diff --git a/packages/controls/css/lumino.css b/packages/controls/css/lumino.css
index 1831b12e25..1cfd1194ce 100644
--- a/packages/controls/css/lumino.css
+++ b/packages/controls/css/lumino.css
@@ -64,8 +64,9 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar {
+.jupyter-widgets.widget-tab > .p-TabBar, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar {
   display: flex;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -74,20 +75,23 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='horizontal'], /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar[data-orientation='horizontal'] {
+.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='horizontal'], /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar[data-orientation='horizontal'], /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar[data-orientation='horizontal'] {
   flex-direction: row;
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='vertical'], /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar[data-orientation='vertical'] {
+.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='vertical'], /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar[data-orientation='vertical'], /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar[data-orientation='vertical'] {
   flex-direction: column;
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar > .p-TabBar-content, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar > .p-TabBar-content {
+.jupyter-widgets.widget-tab > .p-TabBar > .p-TabBar-content, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar > .p-TabBar-content, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar > .lm-TabBar-content {
   margin: 0;
   padding: 0;
   display: flex;
@@ -99,10 +103,15 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 .jupyter-widgets.widget-tab
   > .p-TabBar[data-orientation='horizontal']
   > .p-TabBar-content,
+/* </DEPRECATED> */
 /* <DEPRECATED> */
 .jupyter-widgets.jupyter-widget-tab
-  > .p-TabBar[data-orientation='horizontal']
-  > .p-TabBar-content {
+> .p-TabBar[data-orientation='horizontal']
+> .p-TabBar-content,
+/* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab
+  > .lm-TabBar[data-orientation='horizontal']
+  > .lm-TabBar-content {
   flex-direction: row;
 }
 
@@ -110,16 +119,22 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 .jupyter-widgets.widget-tab
   > .p-TabBar[data-orientation='vertical']
   > .p-TabBar-content,
+/* </DEPRECATED> */
 /* <DEPRECATED> */
 .jupyter-widgets.jupyter-widget-tab
-  > .p-TabBar[data-orientation='vertical']
-  > .p-TabBar-content {
+> .p-TabBar[data-orientation='vertical']
+> .p-TabBar-content,
+/* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab
+  > .lm-TabBar[data-orientation='vertical']
+  > .lm-TabBar-content {
   flex-direction: column;
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar .lm-TabBar-tab {
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
@@ -127,30 +142,35 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabIcon, /* <DEPRECATED> */
-/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabCloseIcon, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabIcon,
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabCloseIcon {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabIcon, /* </DEPRECATED> */
+/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabCloseIcon, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabIcon, /* </DEPRECATED> */
+/* <DEPRECATED> */ .jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabCloseIcon, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar .lm-TabBar-tabIcon,
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar .lm-TabBar-tabCloseIcon {
   flex: 0 0 auto;
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabLabel, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabLabel {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabLabel, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabLabel, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar .lm-TabBar-tabLabel {
   flex: 1 1 auto;
   overflow: hidden;
   white-space: nowrap;
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-hidden, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab.p-mod-hidden {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-hidden, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab.p-mod-hidden, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar .lm-TabBar-tab.lm-mod-hidden {
   display: none !important;
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab {
+.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar.lm-mod-dragging .lm-TabBar-tab {
   position: relative;
 }
 
@@ -158,10 +178,15 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 .jupyter-widgets.widget-tab
   > .p-TabBar.p-mod-dragging[data-orientation='horizontal']
   .p-TabBar-tab,
+/* </DEPRECATED> */
 /* <DEPRECATED> */
 .jupyter-widgets.jupyter-widget-tab
   > .p-TabBar.p-mod-dragging[data-orientation='horizontal']
-  .p-TabBar-tab {
+  .p-TabBar-tab,
+/* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab
+  > .lm-TabBar.lm-mod-dragging[data-orientation='horizontal']
+  .lm-TabBar-tab {
   left: 0;
   transition: left 150ms ease;
 }
@@ -170,10 +195,15 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 .jupyter-widgets.widget-tab
   > .p-TabBar.p-mod-dragging[data-orientation='vertical']
   .p-TabBar-tab,
+/* </DEPRECATED> */
 /* <DEPRECATED> */
 .jupyter-widgets.jupyter-widget-tab
-  > .p-TabBar.p-mod-dragging[data-orientation='vertical']
-  .p-TabBar-tab {
+> .p-TabBar.p-mod-dragging[data-orientation='vertical']
+.p-TabBar-tab,
+/* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab
+  > .lm-TabBar.lm-mod-dragging[data-orientation='vertical']
+  .lm-TabBar-tab {
   top: 0;
   transition: top 150ms ease;
 }
@@ -182,10 +212,15 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 .jupyter-widgets.widget-tab
   > .p-TabBar.p-mod-dragging
   .p-TabBar-tab.p-mod-dragging,
-  /* <DEPRECATED> */
+/* </DEPRECATED> */
+/* <DEPRECATED> */
 .jupyter-widgets.jupyter-widget-tab
-  > .p-TabBar.p-mod-dragging
-  .p-TabBar-tab.p-mod-dragging {
+> .p-TabBar.p-mod-dragging
+.p-TabBar-tab.p-mod-dragging,
+/* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab
+  > .lm-TabBar.lm-mod-dragging
+  .lm-TabBar-tab.lm-mod-dragging {
   transition: none;
 }
 
diff --git a/packages/controls/css/widgets-base.css b/packages/controls/css/widgets-base.css
index 45fdfb1240..79bc024695 100644
--- a/packages/controls/css/widgets-base.css
+++ b/packages/controls/css/widgets-base.css
@@ -81,7 +81,7 @@
 /* vbox and hbox */
 
 /* <DEPRECATED> */
-.widget-inline-hbox, /* <DEPRECATED> */
+.widget-inline-hbox, /* </DEPRECATED> */
  .jupyter-widget-inline-hbox {
   /* Horizontal widgets */
   box-sizing: border-box;
@@ -91,7 +91,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-inline-vbox, /* <DEPRECATED> */
+.widget-inline-vbox, /* </DEPRECATED> */
  .jupyter-widget-inline-vbox {
   /* Vertical Widgets */
   box-sizing: border-box;
@@ -101,7 +101,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-box, /* <DEPRECATED> */
+.widget-box, /* </DEPRECATED> */
 .jupyter-widget-box {
   box-sizing: border-box;
   display: flex;
@@ -110,7 +110,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-gridbox, /* <DEPRECATED> */
+.widget-gridbox, /* </DEPRECATED> */
 .jupyter-widget-gridbox {
   box-sizing: border-box;
   display: grid;
@@ -119,13 +119,13 @@
 }
 
 /* <DEPRECATED> */
-.widget-hbox, /* <DEPRECATED> */
+.widget-hbox, /* </DEPRECATED> */
 .jupyter-widget-hbox {
   flex-direction: row;
 }
 
 /* <DEPRECATED> */
-.widget-vbox, /* <DEPRECATED> */
+.widget-vbox, /* </DEPRECATED> */
 .jupyter-widget-vbox {
   flex-direction: column;
 }
@@ -422,9 +422,9 @@
 /* Widget Button, Widget Toggle Button, Widget Upload */
 
 /* <DEPRECATED> */
-.widget-button, /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-toggle-button, /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-upload, /* <DEPRECATED> */
+.widget-button, /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-toggle-button, /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-upload, /* </DEPRECATED> */
 .jupyter-widget-button,
 .jupyter-widget-toggle-button,
 .jupyter-widget-upload {
@@ -439,7 +439,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-label-basic, /* <DEPRECATED> */
+.widget-label-basic, /* </DEPRECATED> */
 .jupyter-widget-label-basic {
   /* Basic Label */
   color: var(--jp-widgets-label-color);
@@ -451,7 +451,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-label, /* <DEPRECATED> */
+.widget-label, /* </DEPRECATED> */
 .jupyter-widget-label {
   /* Label */
   color: var(--jp-widgets-label-color);
@@ -463,7 +463,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-inline-hbox .widget-label, /* <DEPRECATED> */
+.widget-inline-hbox .widget-label, /* </DEPRECATED> */
 .jupyter-widget-inline-hbox .jupyter-widget-label {
   /* Horizontal Widget Label */
   color: var(--jp-widgets-label-color);
@@ -474,7 +474,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-inline-vbox .widget-label, /* <DEPRECATED> */
+.widget-inline-vbox .widget-label, /* </DEPRECATED> */
 .jupyter-widget-inline-vbox .jupyter-widget-label {
   /* Vertical Widget Label */
   color: var(--jp-widgets-label-color);
@@ -485,7 +485,7 @@
 /* Widget Readout Styling */
 
 /* <DEPRECATED> */
-.widget-readout, /* <DEPRECATED> */
+.widget-readout, /* </DEPRECATED> */
 .jupyter-widget-readout {
   color: var(--jp-widgets-readout-color);
   font-size: var(--jp-widgets-font-size);
@@ -497,7 +497,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-readout.overflow, /* <DEPRECATED> */
+.widget-readout.overflow, /* </DEPRECATED> */
 .jupyter-widget-readout.overflow {
   /* Overflowing Readout */
 
@@ -517,7 +517,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-inline-hbox .widget-readout, /* <DEPRECATED> */
+.widget-inline-hbox .widget-readout, /* </DEPRECATED> */
 .jupyter-widget-inline-hbox .jupyter-widget-readout {
   /* Horizontal Readout */
   text-align: center;
@@ -527,7 +527,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-inline-vbox .widget-readout, /* <DEPRECATED> */
+.widget-inline-vbox .widget-readout, /* </DEPRECATED> */
 .jupyter-widget-inline-vbox .jupyter-widget-readout {
   /* Vertical Readout */
   margin-top: var(--jp-widgets-inline-margin);
@@ -538,7 +538,7 @@
 /* Widget Checkbox Styling */
 
 /* <DEPRECATED> */
-.widget-checkbox, /* <DEPRECATED> */
+.widget-checkbox, /* </DEPRECATED> */
 .jupyter-widget-checkbox {
   width: var(--jp-widgets-inline-width);
   height: var(--jp-widgets-inline-height);
@@ -546,7 +546,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-checkbox input[type='checkbox'], /* <DEPRECATED> */
+.widget-checkbox input[type='checkbox'], /* </DEPRECATED> */
 .jupyter-widget-checkbox input[type='checkbox'] {
   margin: 0px calc(var(--jp-widgets-inline-margin) * 2) 0px 0px;
   line-height: var(--jp-widgets-inline-height);
@@ -559,7 +559,7 @@
 /* Widget Valid Styling */
 
 /* <DEPRECATED> */
-.widget-valid, /* <DEPRECATED> */
+.widget-valid, /* </DEPRECATED> */
 .jupyter-widget-valid {
   height: var(--jp-widgets-inline-height);
   line-height: var(--jp-widgets-inline-height);
@@ -568,7 +568,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-valid i, /* <DEPRECATED> */
+.widget-valid i, /* </DEPRECATED> */
 .jupyter-widget-valid i {
   line-height: var(--jp-widgets-inline-height);
   margin-right: var(--jp-widgets-inline-margin);
@@ -576,19 +576,19 @@
 }
 
 /* <DEPRECATED> */
-.widget-valid.mod-valid i, /* <DEPRECATED> */
+.widget-valid.mod-valid i, /* </DEPRECATED> */
 .jupyter-widget-valid.mod-valid i {
   color: green;
 }
 
 /* <DEPRECATED> */
-.widget-valid.mod-invalid i, /* <DEPRECATED> */
+.widget-valid.mod-invalid i, /* </DEPRECATED> */
 .jupyter-widget-valid.mod-invalid i {
   color: red;
 }
 
 /* <DEPRECATED> */
-.widget-valid.mod-valid .widget-valid-readout, /* <DEPRECATED> */
+.widget-valid.mod-valid .widget-valid-readout, /* </DEPRECATED> */
 .jupyter-widget-valid.mod-valid .jupyter-widget-valid-readout {
   display: none;
 }
@@ -596,17 +596,17 @@
 /* Widget Text and TextArea Styling */
 
 /* <DEPRECATED> */
-.widget-textarea, /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-text, /* <DEPRECATED> */
+.widget-textarea, /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-text, /* </DEPRECATED> */
 .jupyter-widget-textarea,
 .jupyter-widget-text {
   width: var(--jp-widgets-inline-width);
 }
 
 /* <DEPRECATED> */
-.widget-text input[type='text'], /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-text input[type='number'], /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-text input[type='password'], /* <DEPRECATED> */
+.widget-text input[type='text'], /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-text input[type='number'], /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-text input[type='password'], /* </DEPRECATED> */
 .jupyter-widget-text input[type='text'],
 .jupyter-widget-text input[type='number'],
 .jupyter-widget-text input[type='password'] {
@@ -615,10 +615,10 @@
 }
 
 /* <DEPRECATED> */
-.widget-text input[type='text']:disabled, /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-text input[type='number']:disabled, /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-text input[type='password']:disabled, /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-textarea textarea:disabled, /* <DEPRECATED> */
+.widget-text input[type='text']:disabled, /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-text input[type='number']:disabled, /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-text input[type='password']:disabled, /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-textarea textarea:disabled, /* </DEPRECATED> */
 .jupyter-widget-text input[type='text']:disabled,
 .jupyter-widget-text input[type='number']:disabled,
 .jupyter-widget-text input[type='password']:disabled,
@@ -627,10 +627,10 @@
 }
 
 /* <DEPRECATED> */
-.widget-text input[type='text'], /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-text input[type='number'], /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-text input[type='password'], /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-textarea textarea, /* <DEPRECATED> */
+.widget-text input[type='text'], /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-text input[type='number'], /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-text input[type='password'], /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-textarea textarea, /* </DEPRECATED> */
 .jupyter-widget-text input[type='text'],
 .jupyter-widget-text input[type='number'],
 .jupyter-widget-text input[type='password'],
@@ -648,9 +648,9 @@
 }
 
 /* <DEPRECATED> */
-.widget-text input[type='text'], /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-text input[type='password'], /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-textarea textarea, /* <DEPRECATED> */
+.widget-text input[type='text'], /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-text input[type='password'], /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-textarea textarea, /* </DEPRECATED> */
 .jupyter-widget-text input[type='text'],
 .jupyter-widget-text input[type='password'],
 .jupyter-widget-textarea textarea {
@@ -659,22 +659,22 @@
 }
 
 /* <DEPRECATED> */
-.widget-text input[type='number'], /* <DEPRECATED> */
+.widget-text input[type='number'], /* </DEPRECATED> */
 .jupyter-widget-text input[type='number'] {
   padding: var(--jp-widgets-input-padding) 0 var(--jp-widgets-input-padding)
     calc(var(--jp-widgets-input-padding) * 2);
 }
 
 /* <DEPRECATED> */
-.widget-textarea textarea, /* <DEPRECATED> */
+.widget-textarea textarea, /* </DEPRECATED> */
 .jupyter-widget-textarea textarea {
   height: inherit;
   width: inherit;
 }
 
 /* <DEPRECATED> */
-.widget-text input:focus, /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-textarea textarea:focus, /* <DEPRECATED> */
+.widget-text input:focus, /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-textarea textarea:focus, /* </DEPRECATED> */
 .jupyter-widget-text input:focus,
 .jupyter-widget-textarea textarea:focus {
   border-color: var(--jp-widgets-input-focus-border-color);
@@ -682,7 +682,7 @@
 
 /* Horizontal Slider */
 /* <DEPRECATED> */
-.widget-hslider, /* <DEPRECATED> */
+.widget-hslider, /* </DEPRECATED> */
 .jupyter-widget-hslider {
   width: var(--jp-widgets-inline-width);
   height: var(--jp-widgets-inline-height);
@@ -695,13 +695,13 @@
 }
 
 /* <DEPRECATED> */
-.widgets-slider .slider-container, /* <DEPRECATED> */
+.widgets-slider .slider-container, /* </DEPRECATED> */
 .jupyter-widgets-slider .slider-container {
   overflow: visible;
 }
 
 /* <DEPRECATED> */
-.widget-hslider .slider-container, /* <DEPRECATED> */
+.widget-hslider .slider-container, /* </DEPRECATED> */
 .jupyter-widget-hslider .slider-container {
   margin-left: calc(
     var(--jp-widgets-slider-handle-size) / 2 - 2 *
@@ -717,14 +717,14 @@
 /* Vertical Slider */
 
 /* <DEPRECATED> */
-.widget-vbox .widget-label, /* <DEPRECATED> */
+.widget-vbox .widget-label, /* </DEPRECATED> */
 .jupyter-widget-vbox .jupyter-widget-label {
   height: var(--jp-widgets-inline-height);
   line-height: var(--jp-widgets-inline-height);
 }
 
 /* <DEPRECATED> */
-.widget-vslider, /* <DEPRECATED> */
+.widget-vslider, /* </DEPRECATED> */
 .jupyter-widget-vslider {
   /* Vertical Slider */
   height: var(--jp-widgets-vertical-height);
@@ -732,7 +732,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-vslider .slider-container, /* <DEPRECATED> */
+.widget-vslider .slider-container, /* </DEPRECATED> */
 .jupyter-widget-vslider .slider-container {
   flex: 1 1 var(--jp-widgets-inline-width-short);
   margin-left: auto;
@@ -792,7 +792,7 @@
 /* Horisontal Progress */
 
 /* <DEPRECATED> */
-.widget-hprogress, /* <DEPRECATED> */
+.widget-hprogress, /* </DEPRECATED> */
 .jupyter-widget-hprogress {
   /* Progress Bar */
   height: var(--jp-widgets-inline-height);
@@ -802,7 +802,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-hprogress .progress, /* <DEPRECATED> */
+.widget-hprogress .progress, /* </DEPRECATED> */
 .jupyter-widget-hprogress .progress {
   flex-grow: 1;
   margin-top: var(--jp-widgets-input-padding);
@@ -815,14 +815,14 @@
 /* Vertical Progress */
 
 /* <DEPRECATED> */
-.widget-vprogress, /* <DEPRECATED> */
+.widget-vprogress, /* </DEPRECATED> */
 .jupyter-widget-vprogress {
   height: var(--jp-widgets-vertical-height);
   width: var(--jp-widgets-inline-width-tiny);
 }
 
 /* <DEPRECATED> */
-.widget-vprogress .progress, /* <DEPRECATED> */
+.widget-vprogress .progress, /* </DEPRECATED> */
 .jupyter-widget-vprogress .progress {
   flex-grow: 1;
   width: var(--jp-widgets-progress-thickness);
@@ -834,7 +834,7 @@
 /* Select Widget Styling */
 
 /* <DEPRECATED> */
-.widget-dropdown, /* <DEPRECATED> */
+.widget-dropdown, /* </DEPRECATED> */
 .jupyter-widget-dropdown {
   height: var(--jp-widgets-inline-height);
   width: var(--jp-widgets-inline-width);
@@ -842,7 +842,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-dropdown > select, /* <DEPRECATED> */
+.widget-dropdown > select, /* </DEPRECATED> */
 .jupyter-widget-dropdown > select {
   padding-right: 20px;
   border: var(--jp-widgets-input-border-width) solid
@@ -868,13 +868,13 @@
   background-image: var(--jp-widgets-dropdown-arrow);
 }
 /* <DEPRECATED> */
-.widget-dropdown > select:focus, /* <DEPRECATED> */
+.widget-dropdown > select:focus, /* </DEPRECATED> */
 .jupyter-widget-dropdown > select:focus {
   border-color: var(--jp-widgets-input-focus-border-color);
 }
 
 /* <DEPRECATED> */
-.widget-dropdown > select:disabled, /* <DEPRECATED> */
+.widget-dropdown > select:disabled, /* </DEPRECATED> */
 .jupyter-widget-dropdown > select:disabled {
   opacity: var(--jp-widgets-disabled-opacity);
 }
@@ -882,7 +882,7 @@
 /* To disable the dotted border in Firefox around select controls.
    See http://stackoverflow.com/a/18853002 */
 /* <DEPRECATED> */
-.widget-dropdown > select:-moz-focusring, /* <DEPRECATED> */
+.widget-dropdown > select:-moz-focusring, /* </DEPRECATED> */
 .jupyter-widget-dropdown > select:-moz-focusring {
   color: transparent;
   text-shadow: 0 0 0 #000;
@@ -891,7 +891,7 @@
 /* Select and SelectMultiple */
 
 /* <DEPRECATED> */
-.widget-select, /* <DEPRECATED> */
+.widget-select, /* </DEPRECATED> */
 .jupyter-widget-select {
   width: var(--jp-widgets-inline-width);
   line-height: var(--jp-widgets-inline-height);
@@ -903,7 +903,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-select > select, /* <DEPRECATED> */
+.widget-select > select, /* </DEPRECATED> */
 .jupyter-widget-select > select {
   border: var(--jp-widgets-input-border-width) solid
     var(--jp-widgets-input-border-color);
@@ -922,7 +922,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-select > select:focus, /* <DEPRECATED> */
+.widget-select > select:focus, /* </DEPRECATED> */
 .jupyter-widget-select > select:focus {
   border-color: var(--jp-widgets-input-focus-border-color);
 }
@@ -943,20 +943,20 @@
 /* Toggle Buttons Styling */
 
 /* <DEPRECATED> */
-.widget-toggle-buttons, /* <DEPRECATED> */
+.widget-toggle-buttons, /* </DEPRECATED> */
 .jupyter-widget-toggle-buttons {
   line-height: var(--jp-widgets-inline-height);
 }
 
 /* <DEPRECATED> */
-.widget-toggle-buttons .widget-toggle-button, /* <DEPRECATED> */
+.widget-toggle-buttons .widget-toggle-button, /* </DEPRECATED> */
 .jupyter-widget-toggle-buttons .jupyter-widget-toggle-button {
   margin-left: var(--jp-widgets-margin);
   margin-right: var(--jp-widgets-margin);
 }
 
 /* <DEPRECATED> */
-.widget-toggle-buttons .jupyter-button:disabled, /* <DEPRECATED> */
+.widget-toggle-buttons .jupyter-button:disabled, /* </DEPRECATED> */
 .jupyter-widget-toggle-buttons .jupyter-button:disabled {
   opacity: var(--jp-widgets-disabled-opacity);
 }
@@ -964,14 +964,14 @@
 /* Radio Buttons Styling */
 
 /* <DEPRECATED> */
-.widget-radio, /* <DEPRECATED> */
+.widget-radio, /* </DEPRECATED> */
 .jupyter-widget-radio {
   width: var(--jp-widgets-inline-width);
   line-height: var(--jp-widgets-inline-height);
 }
 
 /* <DEPRECATED> */
-.widget-radio-box, /* <DEPRECATED> */
+.widget-radio-box, /* </DEPRECATED> */
 .jupyter-widget-radio-box {
   display: flex;
   flex-direction: column;
@@ -982,7 +982,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-radio-box label, /* <DEPRECATED> */
+.widget-radio-box label, /* </DEPRECATED> */
 .jupyter-widget-radio-box label {
   height: var(--jp-widgets-radio-item-height);
   line-height: var(--jp-widgets-radio-item-height);
@@ -990,7 +990,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-radio-box input, /* <DEPRECATED> */
+.widget-radio-box input, /* </DEPRECATED> */
 .jupyter-widget-radio-box input {
   height: var(--jp-widgets-radio-item-height);
   line-height: var(--jp-widgets-radio-item-height);
@@ -1001,7 +1001,7 @@
 /* Color Picker Styling */
 
 /* <DEPRECATED> */
-.widget-colorpicker, /* <DEPRECATED> */
+.widget-colorpicker, /* </DEPRECATED> */
 .jupyter-widget-colorpicker {
   width: var(--jp-widgets-inline-width);
   height: var(--jp-widgets-inline-height);
@@ -1009,7 +1009,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-colorpicker > .widget-colorpicker-input, /* <DEPRECATED> */
+.widget-colorpicker > .widget-colorpicker-input, /* </DEPRECATED> */
 .jupyter-widget-colorpicker > .jupyter-widget-colorpicker-input {
   flex-grow: 1;
   flex-shrink: 1;
@@ -1017,7 +1017,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-colorpicker input[type='color'], /* <DEPRECATED> */
+.widget-colorpicker input[type='color'], /* </DEPRECATED> */
 .jupyter-widget-colorpicker input[type='color'] {
   width: var(--jp-widgets-inline-height);
   height: var(--jp-widgets-inline-height);
@@ -1035,22 +1035,22 @@
 }
 
 /* <DEPRECATED> */
-.widget-colorpicker.concise input[type='color'], /* <DEPRECATED> */
+.widget-colorpicker.concise input[type='color'], /* </DEPRECATED> */
 .jupyter-widget-colorpicker.concise input[type='color'] {
   border-left: var(--jp-widgets-input-border-width) solid
     var(--jp-widgets-input-border-color);
 }
 
 /* <DEPRECATED> */
-.widget-colorpicker input[type='color']:focus, /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-colorpicker input[type='text']:focus, /* <DEPRECATED> */
+.widget-colorpicker input[type='color']:focus, /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-colorpicker input[type='text']:focus, /* </DEPRECATED> */
 .jupyter-widget-colorpicker input[type='color']:focus,
 .jupyter-widget-colorpicker input[type='text']:focus {
   border-color: var(--jp-widgets-input-focus-border-color);
 }
 
 /* <DEPRECATED> */
-.widget-colorpicker input[type='text'], /* <DEPRECATED> */
+.widget-colorpicker input[type='text'], /* </DEPRECATED> */
 .jupyter-widget-colorpicker input[type='text'] {
   flex-grow: 1;
   outline: none !important;
@@ -1069,7 +1069,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-colorpicker input[type='text']:disabled, /* <DEPRECATED> */
+.widget-colorpicker input[type='text']:disabled, /* </DEPRECATED> */
 .jupyter-widget-colorpicker input[type='text']:disabled {
   opacity: var(--jp-widgets-disabled-opacity);
 }
@@ -1077,7 +1077,7 @@
 /* Date Picker Styling */
 
 /* <DEPRECATED> */
-.widget-datepicker, /* <DEPRECATED> */
+.widget-datepicker, /* </DEPRECATED> */
 .jupyter-widget-datepicker {
   width: var(--jp-widgets-inline-width);
   height: var(--jp-widgets-inline-height);
@@ -1085,7 +1085,7 @@
 }
 
 /* <DEPRECATED> */
-.widget-datepicker input[type='date'], /* <DEPRECATED> */
+.widget-datepicker input[type='date'], /* </DEPRECATED> */
 .jupyter-widget-datepicker input[type='date'] {
   flex-grow: 1;
   flex-shrink: 1;
@@ -1103,19 +1103,19 @@
 }
 
 /* <DEPRECATED> */
-.widget-datepicker input[type='date']:focus, /* <DEPRECATED> */
+.widget-datepicker input[type='date']:focus, /* </DEPRECATED> */
 .jupyter-widget-datepicker input[type='date']:focus {
   border-color: var(--jp-widgets-input-focus-border-color);
 }
 
 /* <DEPRECATED> */
-.widget-datepicker input[type='date']:invalid, /* <DEPRECATED> */
+.widget-datepicker input[type='date']:invalid, /* </DEPRECATED> */
 .jupyter-widget-datepicker input[type='date']:invalid {
   border-color: var(--jp-warn-color1);
 }
 
 /* <DEPRECATED> */
-.widget-datepicker input[type='date']:disabled, /* <DEPRECATED> */
+.widget-datepicker input[type='date']:disabled, /* </DEPRECATED> */
 .jupyter-widget-datepicker input[type='date']:disabled {
   opacity: var(--jp-widgets-disabled-opacity);
 }
@@ -1123,7 +1123,7 @@
 /* Play Widget */
 
 /* <DEPRECATED> */
-.widget-play, /* <DEPRECATED> */
+.widget-play, /* </DEPRECATED> */
 .jupyter-widget-play {
   width: var(--jp-widgets-inline-width-short);
   display: flex;
@@ -1131,14 +1131,14 @@
 }
 
 /* <DEPRECATED> */
-.widget-play .jupyter-button, /* <DEPRECATED> */
+.widget-play .jupyter-button, /* </DEPRECATED> */
 .jupyter-widget-play .jupyter-button {
   flex-grow: 1;
   height: auto;
 }
 
 /* <DEPRECATED> */
-.widget-play .jupyter-button:disabled, /* <DEPRECATED> */
+.widget-play .jupyter-button:disabled, /* </DEPRECATED> */
 .jupyter-widget-play .jupyter-button:disabled {
   opacity: var(--jp-widgets-disabled-opacity);
 }
@@ -1146,23 +1146,25 @@
 /* Tab Widget */
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab, /* <DEPRECATED> */
+.jupyter-widgets.widget-tab, /* </DEPRECATED> */
 .jupyter-widgets.jupyter-widget-tab {
   display: flex;
   flex-direction: column;
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar {
+.jupyter-widgets.widget-tab > .p-TabBar, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar {
   /* Necessary so that a tab can be shifted down to overlay the border of the box below. */
   overflow-x: visible;
   overflow-y: visible;
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar > .p-TabBar-content, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar > .p-TabBar-content {
+.jupyter-widgets.widget-tab > .p-TabBar > .p-TabBar-content, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar > .p-TabBar-content, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar > .lm-TabBar-content {
   /* Make sure that the tab grows from bottom up */
   align-items: flex-end;
   min-width: 0;
@@ -1170,7 +1172,7 @@
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .widget-tab-contents, /* <DEPRECATED> */
+.jupyter-widgets.widget-tab > .widget-tab-contents, /* </DEPRECATED> */
 .jupyter-widgets.jupyter-widget-tab > .widget-tab-contents {
   width: 100%;
   box-sizing: border-box;
@@ -1184,8 +1186,9 @@
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar {
+.jupyter-widgets.widget-tab > .p-TabBar, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar {
   font: var(--jp-widgets-font-size) Helvetica, Arial, sans-serif;
   min-height: calc(
     var(--jp-widgets-horizontal-tab-height) + var(--jp-border-width)
@@ -1193,8 +1196,9 @@
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar .lm-TabBar-tab {
   flex: 0 1 var(--jp-widgets-horizontal-tab-width);
   min-width: 35px;
   min-height: calc(
@@ -1211,8 +1215,9 @@
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar .lm-TabBar-tab.lm-mod-current {
   color: var(--jp-ui-font-color0);
   /* We want the background to match the tab content background */
   background: var(--jp-layout-color1);
@@ -1224,8 +1229,9 @@
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current:before, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current:before {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current:before, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current:before, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar .lm-TabBar-tab.lm-mod-current:before {
   position: absolute;
   top: calc(-1 * var(--jp-border-width));
   left: calc(-1 * var(--jp-border-width));
@@ -1236,8 +1242,9 @@
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab:first-child, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab:first-child {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab:first-child, /* </DEPRECATED> */
+/* <DEPRECATED> */.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab:first-child, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar .lm-TabBar-tab:first-child {
   margin-left: 0;
 }
 
@@ -1245,10 +1252,15 @@
 .jupyter-widgets.widget-tab
   > .p-TabBar
   .p-TabBar-tab:hover:not(.p-mod-current),
+/* </DEPRECATED> */
 /* <DEPRECATED> */
 .jupyter-widgets.jupyter-widget-tab
   > .p-TabBar
-  .p-TabBar-tab:hover:not(.p-mod-current) {
+  .p-TabBar-tab:hover:not(.p-mod-current),
+/* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab
+  > .lm-TabBar
+  .lm-TabBar-tab:hover:not(.lm-mod-current) {
   background: var(--jp-layout-color1);
   color: var(--jp-ui-font-color1);
 }
@@ -1258,11 +1270,17 @@
   > .p-TabBar
   .p-mod-closable
   > .p-TabBar-tabCloseIcon,
+/* </DEPRECATED> */
 /* <DEPRECATED> */
 .jupyter-widgets.jupyter-widget-tab
-  > .p-TabBar
-  .p-mod-closable
-  > .p-TabBar-tabCloseIcon {
+> .p-TabBar
+.p-mod-closable
+> .p-TabBar-tabCloseIcon,
+/* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab
+  > .lm-TabBar
+  .lm-mod-closable
+  > .lm-TabBar-tabCloseIcon {
   margin-left: 4px;
 }
 
@@ -1273,34 +1291,43 @@ actually support closable tabs, so it really doesn't matter */
   > .p-TabBar
   .p-mod-closable
   > .p-TabBar-tabCloseIcon:before,
+/* </DEPRECATED> */
 /* <DEPRECATED> */
+.jupyter-widgets.jupyter-widget-widget-tab
+> .p-TabBar
+.p-mod-closable
+> .p-TabBar-tabCloseIcon:before,
+/* </DEPRECATED> */
 .jupyter-widgets.jupyter-widget-tab
-  > .p-TabBar
-  .p-mod-closable
-  > .p-TabBar-tabCloseIcon:before {
+  > .lm-TabBar
+  .lm-mod-closable
+  > .lm-TabBar-tabCloseIcon:before {
   font-family: FontAwesome;
   content: '\f00d'; /* close */
 }
 
 /* <DEPRECATED> */
-.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabIcon, /* <DEPRECATED> */
-/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabLabel, /* <DEPRECATED> */
-/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabCloseIcon, /* <DEPRECATED> */
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabIcon,
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabLabel,
-.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabCloseIcon {
+.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabIcon, /* </DEPRECATED> */
+/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabLabel, /* </DEPRECATED> */
+/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabCloseIcon, /* </DEPRECATED> */
+/* <DEPRECATED> */ .jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabIcon, /* </DEPRECATED> */
+/* <DEPRECATED> */ .jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabLabel, /* </DEPRECATED> */
+/* <DEPRECATED> */ .jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabCloseIcon, /* </DEPRECATED> */
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar .lm-TabBar-tabIcon,
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar .lm-TabBar-tabLabel,
+.jupyter-widgets.jupyter-widget-tab > .lm-TabBar .lm-TabBar-tabCloseIcon {
   line-height: var(--jp-widgets-horizontal-tab-height);
 }
 
 /* Accordion Widget */
 
-.p-Collapse {
+.jupyter-widget-Collapse {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }
 
-.p-Collapse-header {
+.jupyter-widget-Collapse-header {
   padding: var(--jp-widgets-input-padding);
   cursor: pointer;
   color: var(--jp-ui-font-color2);
@@ -1311,19 +1338,19 @@ actually support closable tabs, so it really doesn't matter */
   font-weight: bold;
 }
 
-.p-Collapse-header:hover {
+.jupyter-widget-Collapse-header:hover {
   background-color: var(--jp-layout-color1);
   color: var(--jp-ui-font-color1);
 }
 
-.p-Collapse-open > .p-Collapse-header {
+.jupyter-widget-Collapse-open > .jupyter-widget-Collapse-header {
   background-color: var(--jp-layout-color1);
   color: var(--jp-ui-font-color0);
   cursor: default;
   border-bottom: none;
 }
 
-.p-Collapse-contents {
+.jupyter-widget-Collapse-contents {
   padding: var(--jp-widgets-container-padding);
   background-color: var(--jp-layout-color1);
   color: var(--jp-ui-font-color1);
@@ -1333,33 +1360,33 @@ actually support closable tabs, so it really doesn't matter */
   overflow: auto;
 }
 
-.p-Accordion {
+.jupyter-widget-Accordion {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }
 
-.p-Accordion .p-Collapse {
+.jupyter-widget-Accordion .jupyter-widget-Collapse {
   margin-bottom: 0;
 }
 
-.p-Accordion .p-Collapse + .p-Collapse {
+.jupyter-widget-Accordion .jupyter-widget-Collapse + .jupyter-widget-Collapse {
   margin-top: 4px;
 }
 
 /* HTML widget */
 
 /* <DEPRECATED> */
-.widget-html, /* <DEPRECATED> */
-/* <DEPRECATED> */ .widget-htmlmath, /* <DEPRECATED> */
+.widget-html, /* </DEPRECATED> */
+/* <DEPRECATED> */ .widget-htmlmath, /* </DEPRECATED> */
 .jupyter-widget-html,
 .jupyter-widget-htmlmath {
   font-size: var(--jp-widgets-font-size);
 }
 
 /* <DEPRECATED> */
-.widget-html > .widget-html-content, /* <DEPRECATED> */
-/* <DEPRECATED> */.widget-htmlmath > .widget-html-content, /* <DEPRECATED> */
+.widget-html > .widget-html-content, /* </DEPRECATED> */
+/* <DEPRECATED> */.widget-htmlmath > .widget-html-content, /* </DEPRECATED> */
 .jupyter-widget-html > .jupyter-widget-html-content,
 .jupyter-widget-htmlmath > .jupyter-widget-html-content {
   /* Fill out the area in the HTML widget */
@@ -1375,7 +1402,7 @@ actually support closable tabs, so it really doesn't matter */
 /* Image widget  */
 
 /* <DEPRECATED> */
-.widget-image, /* <DEPRECATED> */
+.widget-image, /* </DEPRECATED> */
 .jupyter-widget-image {
   max-width: 100%;
   height: auto;
diff --git a/packages/controls/src/lumino/accordion.ts b/packages/controls/src/lumino/accordion.ts
index 8875d84a1f..7b510dde19 100644
--- a/packages/controls/src/lumino/accordion.ts
+++ b/packages/controls/src/lumino/accordion.ts
@@ -12,22 +12,22 @@ import { Selection } from './currentselection';
 /**
  * The class name added to Collapse instances.
  */
-const COLLAPSE_CLASS = 'p-Collapse';
+const COLLAPSE_CLASS = 'jupyter-widget-Collapse';
 
 /**
  * The class name added to a Collapse's header.
  */
-const COLLAPSE_HEADER_CLASS = 'p-Collapse-header';
+const COLLAPSE_HEADER_CLASS = 'jupyter-widget-Collapse-header';
 
 /**
  * The class name added to a Collapse's contents.
  */
-const COLLAPSE_CONTENTS_CLASS = 'p-Collapse-contents';
+const COLLAPSE_CONTENTS_CLASS = 'jupyter-widget-Collapse-contents';
 
 /**
  * The class name added to a Collapse when it is opened
  */
-const COLLAPSE_CLASS_OPEN = 'p-Collapse-open';
+const COLLAPSE_CLASS_OPEN = 'jupyter-widget-Collapse-open';
 
 /**
  * A panel that supports a collapsible header, made from the widget's title.
@@ -186,14 +186,14 @@ export namespace Collapse {
 /**
  * The class name added to Accordion instances.
  */
-const ACCORDION_CLASS = 'p-Accordion';
+const ACCORDION_CLASS = 'jupyter-widget-Accordion';
 
 /**
  * The class name added to an Accordion child.
  */
-const ACCORDION_CHILD_CLASS = 'p-Accordion-child';
+const ACCORDION_CHILD_CLASS = 'jupyter-widget-Accordion-child';
 
-const ACCORDION_CHILD_ACTIVE_CLASS = 'p-Accordion-child-active';
+const ACCORDION_CHILD_ACTIVE_CLASS = 'jupyter-widget-Accordion-child-active';
 
 /**
  * A panel that supports a collapsible header, made from the widget's title.
diff --git a/packages/controls/src/lumino/tabpanel.ts b/packages/controls/src/lumino/tabpanel.ts
index 23e1ade13d..f7260e64e9 100644
--- a/packages/controls/src/lumino/tabpanel.ts
+++ b/packages/controls/src/lumino/tabpanel.ts
@@ -111,13 +111,13 @@ export class TabPanel extends Widget {
    */
   constructor(options: TabPanel.IOptions = {}) {
     super();
-    this.addClass('p-TabPanel');
+    this.addClass('jupyter-widget-TabPanel');
 
     // Create the tab bar and contents panel.
     this.tabBar = new TabBar<Widget>(options);
-    this.tabBar.addClass('p-TabPanel-tabBar');
+    this.tabBar.addClass('jupyter-widget-TabPanel-tabBar');
     this.tabContents = new EventedPanel();
-    this.tabContents.addClass('p-TabPanel-tabContents');
+    this.tabContents.addClass('jupyter-widget-TabPanel-tabContents');
 
     // Connect the tab bar signal handlers.
     this.tabBar.tabMoved.connect(this._onTabMoved, this);