Update p-* selectors, events, and data attributes to lm-*.

examples/console/index.css

@@ -18,7 +18,7 @@ body {
   bottom: 4px;
 }
 
-#main .p-CommandPalette {
+#main .lm-CommandPalette {
   border-top: var(--jp-border-width) solid var(--jp-border-color2);
   min-width: 300px;
 }

packages/application-extension/src/index.tsx

@@ -475,7 +475,7 @@ const sidebar: JupyterFrontEndPlugin<void> = {
     // Add a context menu item to sidebar tabs.
     app.contextMenu.addItem({
       command: CommandIDs.switchSidebar,
-      selector: '.jp-SideBar .p-TabBar-tab',
+      selector: '.jp-SideBar .lm-TabBar-tab',
       rank: 500
     });
   },
@@ -598,7 +598,7 @@ function addCommands(app: JupyterLab, palette: ICommandPalette | null): void {
   // specific selector since we really only want tabs that are
   // in the main area, as opposed to those in sidebars, ipywidgets, etc.
   const tabSelector =
-    '#jp-main-dock-panel .p-DockPanel-tabBar.jp-Activity .p-TabBar-tab';
+    '#jp-main-dock-panel .lm-DockPanel-tabBar.jp-Activity .lm-TabBar-tab';
 
   commands.addCommand(CommandIDs.close, {
     label: () => 'Close Tab',

packages/application/style/base.css

@@ -3,7 +3,7 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-.p-Widget.p-mod-hidden {
+.lm-Widget.lm-mod-hidden {
   display: none !important;
 }
 

packages/application/style/datagrid.css

@@ -3,17 +3,17 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-.p-DataGrid {
+.lm-DataGrid {
   min-width: 64px;
   min-height: 64px;
   border: 1px solid #a0a0a0;
 }
 
-.p-DataGrid-scrollCorner {
+.lm-DataGrid-scrollCorner {
   background-color: #f0f0f0;
 }
 
-.p-DataGrid-scrollCorner::after {
+.lm-DataGrid-scrollCorner::after {
   content: '';
   position: absolute;
   top: 0;

packages/application/style/dockpanel.css

@@ -11,14 +11,14 @@
 | DockPanel
 |----------------------------------------------------------------------------*/
 
-.p-DockPanel-widget {
+.lm-DockPanel-widget {
   background: var(--jp-layout-color0);
   border-left: var(--jp-border-width) solid var(--jp-border-color1);
   border-right: var(--jp-border-width) solid var(--jp-border-color1);
   border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
-.p-DockPanel-overlay {
+.lm-DockPanel-overlay {
   background: rgba(33, 150, 243, 0.1);
   border: var(--jp-border-width) dashed var(--jp-brand-color1);
   transition-property: top, left, right, bottom;
@@ -26,10 +26,10 @@
   transition-timing-function: ease;
 }
 
-.p-DockPanel-overlay.p-mod-root-top,
-.p-DockPanel-overlay.p-mod-root-left,
-.p-DockPanel-overlay.p-mod-root-right,
-.p-DockPanel-overlay.p-mod-root-bottom,
-.p-DockPanel-overlay.p-mod-root-center {
+.lm-DockPanel-overlay.lm-mod-root-top,
+.lm-DockPanel-overlay.lm-mod-root-left,
+.lm-DockPanel-overlay.lm-mod-root-right,
+.lm-DockPanel-overlay.lm-mod-root-bottom,
+.lm-DockPanel-overlay.lm-mod-root-center {
   border-width: 2px;
 }

packages/application/style/menus.css

@@ -16,29 +16,29 @@
 | MenuBar
 |----------------------------------------------------------------------------*/
 
-.p-MenuBar {
+.lm-MenuBar {
   padding-left: 5px;
   background: var(--jp-layout-color1);
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
 }
 
-.p-MenuBar-menu {
+.lm-MenuBar-menu {
   transform: translateY(calc(-2 * var(--jp-border-width)));
 }
 
-.p-MenuBar-item {
+.lm-MenuBar-item {
   padding: 0px 8px;
   border-left: var(--jp-border-width) solid transparent;
   border-right: var(--jp-border-width) solid transparent;
   line-height: var(--jp-private-menubar-height);
 }
 
-.p-MenuBar-item.p-mod-active {
+.lm-MenuBar-item.lm-mod-active {
   background: var(--jp-layout-color2);
 }
 
-.p-MenuBar.p-mod-active .p-MenuBar-item.p-mod-active {
+.lm-MenuBar.lm-mod-active .lm-MenuBar-item.lm-mod-active {
   z-index: 10001;
   background: var(--jp-layout-color0);
   border-left: var(--jp-border-width) solid var(--jp-border-color1);
@@ -46,18 +46,18 @@
   box-shadow: var(--jp-elevation-z6);
 }
 
-.p-MenuBar-item.p-mod-disabled {
+.lm-MenuBar-item.lm-mod-disabled {
   color: var(--jp-ui-font-color3);
 }
 
-.p-MenuBar-item.p-type-separator {
+.lm-MenuBar-item.lm-type-separator {
   margin: 2px;
   padding: 0;
   border: none;
   border-left: var(--jp-border-width) solid var(--jp-border-color2);
 }
 
-.p-MenuBar-itemMnemonic {
+.lm-MenuBar-itemMnemonic {
   text-decoration: underline;
 }
 
@@ -65,7 +65,7 @@
 | Menu
 |----------------------------------------------------------------------------*/
 
-.p-Menu {
+.lm-Menu {
   z-index: 10000;
   padding: 4px 0px;
   background: var(--jp-layout-color0);
@@ -75,50 +75,50 @@
   box-shadow: var(--jp-elevation-z6);
 }
 
-.p-Menu-item {
+.lm-Menu-item {
   min-height: var(--jp-private-menu-item-height);
   max-height: var(--jp-private-menu-item-height);
   padding: 0px;
   line-height: var(--jp-private-menu-item-height);
 }
 
-.p-Menu-item.p-mod-active {
+.lm-Menu-item.lm-mod-active {
   background: var(--jp-layout-color2);
 }
 
-.p-Menu-item.p-mod-disabled {
+.lm-Menu-item.lm-mod-disabled {
   color: var(--jp-ui-font-color3);
 }
 
-.p-Menu-itemIcon {
+.lm-Menu-itemIcon {
   width: 21px;
   padding: 0px 2px 0px 4px;
   margin-top: -2px;
 }
 
-.p-Menu-itemLabel {
+.lm-Menu-itemLabel {
   padding: 0px 32px 0px 2px;
 }
 
-.p-Menu-itemMnemonic {
+.lm-Menu-itemMnemonic {
   text-decoration: underline;
 }
 
-.p-Menu-itemShortcut {
+.lm-Menu-itemShortcut {
   padding: 0px;
 }
 
-.p-Menu-itemSubmenuIcon {
+.lm-Menu-itemSubmenuIcon {
   width: 18px;
   padding: 0px 4px 0px 0px;
 }
 
-.p-Menu-item[data-type='separator'] > div {
+.lm-Menu-item[data-type='separator'] > div {
   padding: 0;
   height: 9px;
 }
 
-.p-Menu-item[data-type='separator'] > div::after {
+.lm-Menu-item[data-type='separator'] > div::after {
   content: '';
   display: block;
   position: relative;
@@ -126,22 +126,22 @@
   border-top: var(--jp-border-width) solid var(--jp-layout-color2);
 }
 
-.p-Menu-itemIcon,
-.p-Menu-itemSubmenuIcon {
+.lm-Menu-itemIcon,
+.lm-Menu-itemSubmenuIcon {
   background-size: 16px;
   background-repeat: no-repeat;
   background-position: center;
 }
 
-.p-Menu-item.p-mod-toggled > .p-Menu-itemIcon {
+.lm-Menu-item.lm-mod-toggled > .lm-Menu-itemIcon {
   background-image: var(--jp-icon-check);
 }
 
-.p-Menu-item.p-mod-toggled.p-mod-disabled > .p-Menu-itemIcon {
+.lm-Menu-item.lm-mod-toggled.lm-mod-disabled > .lm-Menu-itemIcon {
   background-image: var(--jp-icon-check-disabled);
 }
 
-.p-Menu-item[data-type='submenu'] > .p-Menu-itemSubmenuIcon {
+.lm-Menu-item[data-type='submenu'] > .lm-Menu-itemSubmenuIcon {
   background-image: var(--jp-icon-caret-right);
   background-size: 18px;
   background-repeat: no-repeat;

packages/application/style/scrollbar.css

@@ -89,21 +89,21 @@
  * Phosphor
  */
 
-.p-ScrollBar[data-orientation='horizontal'] {
+.lm-ScrollBar[data-orientation='horizontal'] {
   min-height: 16px;
   max-height: 16px;
   min-width: 45px;
   border-top: 1px solid #a0a0a0;
 }
 
-.p-ScrollBar[data-orientation='vertical'] {
+.lm-ScrollBar[data-orientation='vertical'] {
   min-width: 16px;
   max-width: 16px;
   min-height: 45px;
   border-left: 1px solid #a0a0a0;
 }
 
-.p-ScrollBar-button {
+.lm-ScrollBar-button {
   background-color: #f0f0f0;
   background-position: center center;
   min-height: 15px;
@@ -112,64 +112,64 @@
   max-width: 15px;
 }
 
-.p-ScrollBar-button:hover {
+.lm-ScrollBar-button:hover {
   background-color: #dadada;
 }
 
-.p-ScrollBar-button.p-mod-active {
+.lm-ScrollBar-button.lm-mod-active {
   background-color: #cdcdcd;
 }
 
-.p-ScrollBar-track {
+.lm-ScrollBar-track {
   background: #f0f0f0;
 }
 
-.p-ScrollBar-thumb {
+.lm-ScrollBar-thumb {
   background: #cdcdcd;
 }
 
-.p-ScrollBar-thumb:hover {
+.lm-ScrollBar-thumb:hover {
   background: #bababa;
 }
 
-.p-ScrollBar-thumb.p-mod-active {
+.lm-ScrollBar-thumb.lm-mod-active {
   background: #a0a0a0;
 }
 
-.p-ScrollBar[data-orientation='horizontal'] .p-ScrollBar-thumb {
+.lm-ScrollBar[data-orientation='horizontal'] .lm-ScrollBar-thumb {
   height: 100%;
   min-width: 15px;
   border-left: 1px solid #a0a0a0;
   border-right: 1px solid #a0a0a0;
 }
 
-.p-ScrollBar[data-orientation='vertical'] .p-ScrollBar-thumb {
+.lm-ScrollBar[data-orientation='vertical'] .lm-ScrollBar-thumb {
   width: 100%;
   min-height: 15px;
   border-top: 1px solid #a0a0a0;
   border-bottom: 1px solid #a0a0a0;
 }
 
-.p-ScrollBar[data-orientation='horizontal']
-  .p-ScrollBar-button[data-action='decrement'] {
+.lm-ScrollBar[data-orientation='horizontal']
+  .lm-ScrollBar-button[data-action='decrement'] {
   background-image: var(--jp-icon-caret-left);
   background-size: 17px;
 }
 
-.p-ScrollBar[data-orientation='horizontal']
-  .p-ScrollBar-button[data-action='increment'] {
+.lm-ScrollBar[data-orientation='horizontal']
+  .lm-ScrollBar-button[data-action='increment'] {
   background-image: var(--jp-icon-caret-right);
   background-size: 17px;
 }
 
-.p-ScrollBar[data-orientation='vertical']
-  .p-ScrollBar-button[data-action='decrement'] {
+.lm-ScrollBar[data-orientation='vertical']
+  .lm-ScrollBar-button[data-action='decrement'] {
   background-image: var(--jp-icon-caret-up);
   background-size: 17px;
 }
 
-.p-ScrollBar[data-orientation='vertical']
-  .p-ScrollBar-button[data-action='increment'] {
+.lm-ScrollBar[data-orientation='vertical']
+  .lm-ScrollBar-button[data-action='increment'] {
   background-image: var(--jp-icon-caret-down);
   background-size: 17px;
 }

packages/application/style/sidepanel.css

@@ -21,7 +21,7 @@
   font-size: var(--jp-ui-font-size1);
 }
 
-.jp-SideBar.p-TabBar {
+.jp-SideBar.lm-TabBar {
   color: var(--jp-ui-font-color1);
   background: var(--jp-layout-color2);
   font-size: var(--jp-ui-font-size1);
@@ -31,8 +31,8 @@
   display: block;
 }
 
-.jp-SideBar .p-TabBar-content,
-.jp-SideBar .p-TabBar-content {
+.jp-SideBar .lm-TabBar-content,
+.jp-SideBar .lm-TabBar-content {
   margin: 0;
   padding: 0;
   display: flex;
@@ -42,13 +42,13 @@
   transform-origin: 0 0 0;
 }
 
-.jp-SideBar .p-TabBar-tab {
+.jp-SideBar .lm-TabBar-tab {
   padding: 0 16px;
   border: none;
   overflow: visible;
 }
 
-.jp-SideBar .p-TabBar-tab.p-mod-current {
+.jp-SideBar .lm-TabBar-tab.lm-mod-current {
   min-height: calc(
     var(--jp-private-sidebar-tab-width) + var(--jp-border-width)
   );
@@ -58,11 +58,11 @@
   /* transform: translateY(var(--jp-border-width)); */
 }
 
-.jp-SideBar .p-TabBar-tab:not(.p-mod-current) {
+.jp-SideBar .lm-TabBar-tab:not(.lm-mod-current) {
   background: var(--jp-layout-color2);
 }
 
-.jp-SideBar .p-TabBar-tabIcon.jp-SideBar-tabIcon {
+.jp-SideBar .lm-TabBar-tabIcon.jp-SideBar-tabIcon {
   min-width: 20px;
   min-height: 20px;
   background-size: 20px;
@@ -72,11 +72,11 @@
   background-position: center;
 }
 
-.jp-SideBar .p-TabBar-tabLabel {
+.jp-SideBar .lm-TabBar-tabLabel {
   line-height: var(--jp-private-sidebar-tab-width);
 }
 
-.jp-SideBar .p-TabBar-tab:hover:not(.p-mod-current) {
+.jp-SideBar .lm-TabBar-tab:hover:not(.lm-mod-current) {
   background: var(--jp-layout-color1);
 }
 
@@ -84,40 +84,46 @@
 
 /* Borders */
 
-.jp-SideBar.p-TabBar.jp-mod-left {
+.jp-SideBar.lm-TabBar.jp-mod-left {
   border-right: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.p-TabBar.jp-mod-left .p-TabBar-tab + .p-TabBar-tab {
+.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab + .lm-TabBar-tab {
   border-right: var(--jp-border-width) solid var(--jp-layout-color2);
 }
 
-.jp-SideBar.p-TabBar.jp-mod-left .p-TabBar-tab.p-mod-current + .p-TabBar-tab {
+.jp-SideBar.lm-TabBar.jp-mod-left
+  .lm-TabBar-tab.lm-mod-current
+  + .lm-TabBar-tab {
   border-right: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.p-TabBar.jp-mod-left .p-TabBar-tab + .p-TabBar-tab.p-mod-current {
+.jp-SideBar.lm-TabBar.jp-mod-left
+  .lm-TabBar-tab
+  + .lm-TabBar-tab.lm-mod-current {
   border-right: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.p-TabBar.jp-mod-left .p-TabBar-tab.p-mod-current:last-child {
+.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab.lm-mod-current:last-child {
   border-left: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
 /* Transforms */
 
-.jp-SideBar.p-TabBar.jp-mod-left .p-TabBar-content {
+.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-content {
   flex-direction: row-reverse;
   transform: rotate(-90deg) translateX(-100%);
 }
 
-.jp-SideBar.p-TabBar.jp-mod-left
-  .p-TabBar-tab:not(.p-mod-current)
-  .p-TabBar-tabIcon {
+.jp-SideBar.lm-TabBar.jp-mod-left
+  .lm-TabBar-tab:not(.lm-mod-current)
+  .lm-TabBar-tabIcon {
   transform: rotate(90deg);
 }
 
-.jp-SideBar.p-TabBar.jp-mod-left .p-TabBar-tab.p-mod-current .p-TabBar-tabIcon {
+.jp-SideBar.lm-TabBar.jp-mod-left
+  .lm-TabBar-tab.lm-mod-current
+  .lm-TabBar-tabIcon {
   transform: rotate(90deg)
     translate(
       calc(-0.5 * var(--jp-border-width)),
@@ -129,42 +135,46 @@
 
 /* Borders */
 
-.jp-SideBar.p-TabBar.jp-mod-right {
+.jp-SideBar.lm-TabBar.jp-mod-right {
   border-left: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.p-TabBar.jp-mod-right .p-TabBar-tab + .p-TabBar-tab {
+.jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab + .lm-TabBar-tab {
   border-left: var(--jp-border-width) solid var(--jp-layout-color2);
 }
 
-.jp-SideBar.p-TabBar.jp-mod-right .p-TabBar-tab.p-mod-current + .p-TabBar-tab {
+.jp-SideBar.lm-TabBar.jp-mod-right
+  .lm-TabBar-tab.lm-mod-current
+  + .lm-TabBar-tab {
   border-left: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.p-TabBar.jp-mod-right .p-TabBar-tab + .p-TabBar-tab.p-mod-current {
+.jp-SideBar.lm-TabBar.jp-mod-right
+  .lm-TabBar-tab
+  + .lm-TabBar-tab.lm-mod-current {
   border-left: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.p-TabBar.jp-mod-right .p-TabBar-tab.p-mod-current:last-child {
+.jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab.lm-mod-current:last-child {
   border-right: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
 /* Transforms */
 
-.jp-SideBar.p-TabBar.jp-mod-right .p-TabBar-content {
+.jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-content {
   flex-direction: row;
   transform: rotate(90deg) translateY(-100%);
 }
 
-.jp-SideBar.p-TabBar.jp-mod-right
-  .p-TabBar-tab:not(.p-mod-current)
-  .p-TabBar-tabIcon {
+.jp-SideBar.lm-TabBar.jp-mod-right
+  .lm-TabBar-tab:not(.lm-mod-current)
+  .lm-TabBar-tabIcon {
   transform: rotate(-90deg);
 }
 
-.jp-SideBar.p-TabBar.jp-mod-right
-  .p-TabBar-tab.p-mod-current
-  .p-TabBar-tabIcon {
+.jp-SideBar.lm-TabBar.jp-mod-right
+  .lm-TabBar-tab.lm-mod-current
+  .lm-TabBar-tabIcon {
   transform: rotate(-90deg)
     translate(
       calc(0.5 * var(--jp-border-width)),
@@ -174,8 +184,8 @@
 
 /* Stack panels */
 
-#jp-left-stack > .p-Widget,
-#jp-right-stack > .p-Widget {
+#jp-left-stack > .lm-Widget,
+#jp-right-stack > .lm-Widget {
   min-width: var(--jp-sidebar-min-width);
 }
 

packages/application/style/tabs.css

@@ -18,30 +18,30 @@
 | Tabs in the dock panel
 |----------------------------------------------------------------------------*/
 
-.p-DockPanel-tabBar {
+.lm-DockPanel-tabBar {
   border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
   overflow: visible;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
 }
 
-.p-DockPanel-tabBar[data-orientation='horizontal'] {
+.lm-DockPanel-tabBar[data-orientation='horizontal'] {
   min-height: calc(
     var(--jp-private-horizontal-tab-height) + 2 * var(--jp-border-width)
   );
 }
 
-.p-DockPanel-tabBar[data-orientation='vertical'] {
+.lm-DockPanel-tabBar[data-orientation='vertical'] {
   min-width: 80px;
 }
 
-.p-DockPanel-tabBar > .p-TabBar-content {
+.lm-DockPanel-tabBar > .lm-TabBar-content {
   align-items: flex-end;
   min-width: 0;
   min-height: 0;
 }
 
-.p-DockPanel-tabBar .p-TabBar-tab {
+.lm-DockPanel-tabBar .lm-TabBar-tab {
   flex: 0 1 var(--jp-private-horizontal-tab-width);
   min-height: calc(
     var(--jp-private-horizontal-tab-height) + var(--jp-border-width)
@@ -56,16 +56,16 @@
   position: relative;
 }
 
-.p-DockPanel-tabBar .p-TabBar-tab:hover:not(.p-mod-current) {
+.lm-DockPanel-tabBar .lm-TabBar-tab:hover:not(.lm-mod-current) {
   background: var(--jp-layout-color1);
 }
 
-.p-DockPanel-tabBar .p-TabBar-tab:first-child {
+.lm-DockPanel-tabBar .lm-TabBar-tab:first-child {
   margin-left: 0;
 }
 
 /* This is a current tab of a tab bar in the dock panel: each tab bar has 1. */
-.p-DockPanel-tabBar .p-TabBar-tab.p-mod-current {
+.lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-current {
   background: var(--jp-layout-color1);
   color: var(--jp-ui-font-color0);
   min-height: calc(
@@ -75,7 +75,7 @@
 }
 
 /* This is the main application level current tab: only 1 exists. */
-.p-DockPanel-tabBar .p-TabBar-tab.jp-mod-current:before {
+.lm-DockPanel-tabBar .lm-TabBar-tab.jp-mod-current:before {
   position: absolute;
   top: calc(-1 * var(--jp-border-width));
   left: calc(-1 * var(--jp-border-width));
@@ -86,47 +86,47 @@
 }
 
 /* This is the left tab bar current tab: only 1 exists. */
-.p-TabBar-tab.p-mod-current {
+.lm-TabBar-tab.lm-mod-current {
   color: var(--jp-ui-font-color0);
   background: var(--jp-layout-color1);
 }
 
-.p-TabBar-tab.p-mod-current:hover {
+.lm-TabBar-tab.lm-mod-current:hover {
   background: var(--jp-layout-color1);
 }
 
-.p-DockPanel-tabBar .p-TabBar.p-mod-left .p-TabBar-tab,
-.p-DockPanel-tabBar .p-TabBar.p-mod-right .p-TabBar-tab {
+.lm-DockPanel-tabBar .lm-TabBar.lm-mod-left .lm-TabBar-tab,
+.lm-DockPanel-tabBar .lm-TabBar.lm-mod-right .lm-TabBar-tab {
   flex: 0 1 40px;
   margin-top: -1px;
   line-height: 40px;
 }
 
-.p-DockPanel-tabBar .p-TabBar.p-mod-left .p-TabBar-tab {
+.lm-DockPanel-tabBar .lm-TabBar.lm-mod-left .lm-TabBar-tab {
   border-right: none;
 }
 
-.p-DockPanel-tabBar .p-TabBar.p-mod-right .p-TabBar-tab {
+.lm-DockPanel-tabBar .lm-TabBar.lm-mod-right .lm-TabBar-tab {
   border-left: none;
 }
 
-.p-DockPanel-tabBar .p-TabBar.p-mod-left .p-TabBar-tab:first-child,
-.p-DockPanel-tabBar .p-TabBar.p-mod-right .p-TabBar-tab:first-child {
+.lm-DockPanel-tabBar .lm-TabBar.lm-mod-left .lm-TabBar-tab:first-child,
+.lm-DockPanel-tabBar .lm-TabBar.lm-mod-right .lm-TabBar-tab:first-child {
   margin-top: 0;
 }
 
-.p-DockPanel-tabBar .p-TabBar.p-mod-left .p-TabBar-tab.p-mod-current,
-.p-DockPanel-tabBar .p-TabBar.p-mod-right .p-TabBar-tab.p-mod-current {
+.lm-DockPanel-tabBar .lm-TabBar.lm-mod-left .lm-TabBar-tab.lm-mod-current,
+.lm-DockPanel-tabBar .lm-TabBar.lm-mod-right .lm-TabBar-tab.lm-mod-current {
   min-width: 80px;
   max-width: 80px;
 }
 
-.p-DockPanel-tabBar .p-TabBar.p-mod-right .p-TabBar-tab.p-mod-current {
+.lm-DockPanel-tabBar .lm-TabBar.lm-mod-right .lm-TabBar-tab.lm-mod-current {
   transform: translateX(-1px);
 }
 
-.p-DockPanel-tabBar .p-TabBar-tab .p-TabBar-tabIcon,
-.p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon {
+.lm-DockPanel-tabBar .lm-TabBar-tab .lm-TabBar-tabIcon,
+.lm-TabBar-tab.lm-mod-drag-image .lm-TabBar-tabIcon {
   width: 14px;
   background-position: left center;
   background-repeat: no-repeat;
@@ -134,15 +134,15 @@
   margin-right: 4px;
 }
 
-.p-DockPanel-tabBar .p-TabBar-tab.p-mod-current .p-TabBar-tabIcon {
+.lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabIcon {
   margin-bottom: var(--jp-border-width);
 }
 
-.p-TabBar-WindowTabLabel {
+.lm-TabBar-WindowTabLabel {
   margin-top: 4px;
 }
 
-.p-TabBar-tab.p-mod-drag-image {
+.lm-TabBar-tab.lm-mod-drag-image {
   background: var(--jp-layout-color1);
   border: var(--jp-border-width) solid var(--jp-border-color1);
   border-top: var(--jp-border-width) solid var(--jp-brand-color1);

packages/apputils/src/toolbar.tsx

@@ -630,10 +630,10 @@ namespace Private {
     let className = commands.className(id, args);
     // Add the boolean state classes.
     if (commands.isToggled(id, args)) {
-      className += ' p-mod-toggled';
+      className += ' lm-mod-toggled';
     }
     if (!commands.isVisible(id, args)) {
-      className += ' p-mod-hidden';
+      className += ' lm-mod-hidden';
     }
     const tooltip = commands.caption(id, args) || label || iconLabel;
     const onClick = () => {

packages/apputils/style/commandpalette.css

@@ -15,7 +15,7 @@
 | Overall styles
 |----------------------------------------------------------------------------*/
 
-.p-CommandPalette {
+.lm-CommandPalette {
   padding-bottom: 0px;
   color: var(--jp-ui-font-color1);
   background: var(--jp-layout-color1);
@@ -28,13 +28,13 @@
 | Search
 |----------------------------------------------------------------------------*/
 
-.p-CommandPalette-search {
+.lm-CommandPalette-search {
   padding: 4px;
   background-color: var(--jp-layout-color1);
   z-index: 2;
 }
 
-.p-CommandPalette-wrapper {
+.lm-CommandPalette-wrapper {
   overflow: overlay;
   padding: 0px 9px;
   background-color: var(--jp-input-active-background);
@@ -42,12 +42,12 @@
   box-shadow: inset 0 0 0 var(--jp-border-width) var(--jp-input-border-color);
 }
 
-.p-CommandPalette.p-mod-focused .p-CommandPalette-wrapper {
+.lm-CommandPalette.lm-mod-focused .lm-CommandPalette-wrapper {
   box-shadow: inset 0 0 0 1px var(--jp-input-active-box-shadow-color),
     inset 0 0 0 3px var(--jp-input-active-box-shadow-color);
 }
 
-.p-CommandPalette-wrapper::after {
+.lm-CommandPalette-wrapper::after {
   content: ' ';
   color: white;
   background-color: var(--jp-brand-color1);
@@ -63,7 +63,7 @@
   background-position: center;
 }
 
-.p-CommandPalette-input {
+.lm-CommandPalette-input {
   background: transparent;
   width: calc(100% - 18px);
   float: left;
@@ -74,9 +74,9 @@
   line-height: var(--jp-private-commandpalette-search-height);
 }
 
-.p-CommandPalette-input::-webkit-input-placeholder,
-.p-CommandPalette-input::-moz-placeholder,
-.p-CommandPalette-input:-ms-input-placeholder {
+.lm-CommandPalette-input::-webkit-input-placeholder,
+.lm-CommandPalette-input::-moz-placeholder,
+.lm-CommandPalette-input:-ms-input-placeholder {
   color: var(--jp-ui-font-color3);
   font-size: var(--jp-ui-font-size1);
 }
@@ -85,11 +85,11 @@
 | Results
 |----------------------------------------------------------------------------*/
 
-.p-CommandPalette-header:first-child {
+.lm-CommandPalette-header:first-child {
   margin-top: 0px;
 }
 
-.p-CommandPalette-header {
+.lm-CommandPalette-header {
   margin-top: 8px;
   padding: 8px 0 8px 12px;
   color: var(--jp-ui-font-color1);
@@ -101,11 +101,11 @@
   letter-spacing: 1px;
 }
 
-.p-CommandPalette-header.p-mod-active {
+.lm-CommandPalette-header.lm-mod-active {
   background: var(--jp-layout-color2);
 }
 
-.p-CommandPalette-header:hover::after {
+.lm-CommandPalette-header:hover::after {
   content: '';
   min-width: 12px;
   min-height: 12px;
@@ -119,13 +119,13 @@
   background-image: var(--jp-icon-filter-list);
 }
 
-.p-CommandPalette-header > mark {
+.lm-CommandPalette-header > mark {
   background-color: transparent;
   font-weight: bold;
   color: var(--jp-ui-font-color1);
 }
 
-.p-CommandPalette-item {
+.lm-CommandPalette-item {
   padding: 4px 12px 4px 4px;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
@@ -133,43 +133,43 @@
   display: flex;
 }
 
-.p-CommandPalette-item.p-mod-disabled {
+.lm-CommandPalette-item.lm-mod-disabled {
   color: var(--jp-ui-font-color3);
 }
 
-.p-CommandPalette-item.p-mod-active {
+.lm-CommandPalette-item.lm-mod-active {
   background: var(--jp-layout-color3);
 }
 
-.p-CommandPalette-item.p-mod-active:hover:not(.p-mod-disabled) {
+.lm-CommandPalette-item.lm-mod-active:hover:not(.lm-mod-disabled) {
   background: var(--jp-layout-color4);
 }
 
-.p-CommandPalette-item:hover:not(.p-mod-active):not(.p-mod-disabled) {
+.lm-CommandPalette-item:hover:not(.lm-mod-active):not(.lm-mod-disabled) {
   background: var(--jp-layout-color2);
 }
 
-.p-CommandPalette-itemContent {
+.lm-CommandPalette-itemContent {
   overflow: hidden;
 }
 
-.p-CommandPalette-itemLabel > mark {
+.lm-CommandPalette-itemLabel > mark {
   color: var(--jp-ui-font-color0);
   background-color: transparent;
   font-weight: bold;
 }
 
-.p-CommandPalette-item.p-mod-disabled mark {
+.lm-CommandPalette-item.lm-mod-disabled mark {
   color: var(--jp-ui-font-color3);
 }
 
-.p-CommandPalette-item.p-mod-toggled .p-CommandPalette-itemIcon {
+.lm-CommandPalette-item.lm-mod-toggled .lm-CommandPalette-itemIcon {
   background-image: var(--jp-icon-check);
   background-size: 16px;
   background-repeat: no-repeat;
 }
 
-.p-CommandPalette-item .p-CommandPalette-itemIcon {
+.lm-CommandPalette-item .lm-CommandPalette-itemIcon {
   padding: 0px 0px 0px 4px;
   position: relative;
   width: 16px;
@@ -177,23 +177,23 @@
   flex: 0 0 auto;
 }
 
-.p-CommandPalette-item.p-mod-disabled .p-CommandPalette-itemIcon {
+.lm-CommandPalette-item.lm-mod-disabled .lm-CommandPalette-itemIcon {
   opacity: 0.4;
 }
 
-.p-CommandPalette-item .p-CommandPalette-itemShortcut {
+.lm-CommandPalette-item .lm-CommandPalette-itemShortcut {
   flex: 0 0 auto;
 }
 
-.p-CommandPalette-itemCaption {
+.lm-CommandPalette-itemCaption {
   display: none;
 }
 
-.p-CommandPalette-content {
+.lm-CommandPalette-content {
   background-color: var(--jp-layout-color1);
 }
 
-.p-CommandPalette-content:empty:after {
+.lm-CommandPalette-content:empty:after {
   content: 'No results';
   margin: auto;
   margin-top: 20px;
@@ -204,7 +204,7 @@
   font-weight: lighter;
 }
 
-.p-CommandPalette-emptyMessage {
+.lm-CommandPalette-emptyMessage {
   text-align: center;
   margin-top: 24px;
   line-height: 1.32;

packages/apputils/style/iframe.css

@@ -18,11 +18,11 @@ Because iframes steal all cursor events, the following two rules are necessary
 to suppress pointer events while resize drags are occurring. There may be a
 better solution to this problem.
 */
-body.p-mod-override-cursor .jp-IFrame {
+body.lm-mod-override-cursor .jp-IFrame {
   position: relative;
 }
 
-body.p-mod-override-cursor .jp-IFrame:before {
+body.lm-mod-override-cursor .jp-IFrame:before {
   content: '';
   position: absolute;
   top: 0;

packages/cells/src/widget.ts

@@ -1154,10 +1154,10 @@ export abstract class AttachmentsCell extends Cell {
       case 'drop':
         this._evtNativeDrop(event as DragEvent);
         break;
-      case 'p-dragover':
+      case 'lm-dragover':
         this._evtDragOver(event as IDragEvent);
         break;
-      case 'p-drop':
+      case 'lm-drop':
         this._evtDrop(event as IDragEvent);
         break;
       default:
@@ -1178,8 +1178,8 @@ export abstract class AttachmentsCell extends Cell {
   protected onAfterAttach(msg: Message): void {
     super.onAfterAttach(msg);
     let node = this.node;
-    node.addEventListener('p-dragover', this);
-    node.addEventListener('p-drop', this);
+    node.addEventListener('lm-dragover', this);
+    node.addEventListener('lm-drop', this);
     node.addEventListener('dragenter', this);
     node.addEventListener('dragover', this);
     node.addEventListener('drop', this);
@@ -1196,8 +1196,8 @@ export abstract class AttachmentsCell extends Cell {
     node.removeEventListener('dragover', this);
     node.removeEventListener('dragenter', this);
     node.removeEventListener('paste', this);
-    node.removeEventListener('p-dragover', this);
-    node.removeEventListener('p-drop', this);
+    node.removeEventListener('lm-dragover', this);
+    node.removeEventListener('lm-drop', this);
   }
 
   private _evtDragOver(event: IDragEvent) {
@@ -1239,7 +1239,7 @@ export abstract class AttachmentsCell extends Cell {
   }
 
   /**
-   * Handle the `'p-drop'` event for the widget.
+   * Handle the `'lm-drop'` event for the widget.
    */
   private _evtDrop(event: IDragEvent): void {
     const supportedMimeTypes = toArray(

packages/codeeditor/src/widget.ts

@@ -87,16 +87,16 @@ export class CodeEditorWrapper extends Widget {
    */
   handleEvent(event: Event): void {
     switch (event.type) {
-      case 'p-dragenter':
+      case 'lm-dragenter':
         this._evtDragEnter(event as IDragEvent);
         break;
-      case 'p-dragleave':
+      case 'lm-dragleave':
         this._evtDragLeave(event as IDragEvent);
         break;
-      case 'p-dragover':
+      case 'lm-dragover':
         this._evtDragOver(event as IDragEvent);
         break;
-      case 'p-drop':
+      case 'lm-drop':
         this._evtDrop(event as IDragEvent);
         break;
       default:
@@ -117,10 +117,10 @@ export class CodeEditorWrapper extends Widget {
   protected onAfterAttach(msg: Message): void {
     super.onAfterAttach(msg);
     let node = this.node;
-    node.addEventListener('p-dragenter', this);
-    node.addEventListener('p-dragleave', this);
-    node.addEventListener('p-dragover', this);
-    node.addEventListener('p-drop', this);
+    node.addEventListener('lm-dragenter', this);
+    node.addEventListener('lm-dragleave', this);
+    node.addEventListener('lm-dragover', this);
+    node.addEventListener('lm-drop', this);
     // We have to refresh at least once after attaching,
     // while visible.
     this._hasRefreshedSinceAttach = false;
@@ -134,10 +134,10 @@ export class CodeEditorWrapper extends Widget {
    */
   protected onBeforeDetach(msg: Message): void {
     let node = this.node;
-    node.removeEventListener('p-dragenter', this);
-    node.removeEventListener('p-dragleave', this);
-    node.removeEventListener('p-dragover', this);
-    node.removeEventListener('p-drop', this);
+    node.removeEventListener('lm-dragenter', this);
+    node.removeEventListener('lm-dragleave', this);
+    node.removeEventListener('lm-dragover', this);
+    node.removeEventListener('lm-drop', this);
   }
 
   /**
@@ -198,7 +198,7 @@ export class CodeEditorWrapper extends Widget {
   }
 
   /**
-   * Handle the `'p-dragenter'` event for the widget.
+   * Handle the `'lm-dragenter'` event for the widget.
    */
   private _evtDragEnter(event: IDragEvent): void {
     if (this.editor.getOption('readOnly') === true) {
@@ -214,7 +214,7 @@ export class CodeEditorWrapper extends Widget {
   }
 
   /**
-   * Handle the `'p-dragleave'` event for the widget.
+   * Handle the `'lm-dragleave'` event for the widget.
    */
   private _evtDragLeave(event: IDragEvent): void {
     this.removeClass(DROP_TARGET_CLASS);
@@ -230,7 +230,7 @@ export class CodeEditorWrapper extends Widget {
   }
 
   /**
-   * Handle the `'p-dragover'` event for the widget.
+   * Handle the `'lm-dragover'` event for the widget.
    */
   private _evtDragOver(event: IDragEvent): void {
     this.removeClass(DROP_TARGET_CLASS);
@@ -248,7 +248,7 @@ export class CodeEditorWrapper extends Widget {
   }
 
   /**
-   * Handle the `'p-drop'` event for the widget.
+   * Handle the `'lm-drop'` event for the widget.
    */
   private _evtDrop(event: IDragEvent): void {
     if (this.editor.getOption('readOnly') === true) {

packages/extensionmanager/src/widget.tsx

@@ -705,6 +705,6 @@ export class ExtensionView extends VDomRenderer<ListModel> {
    */
   private _toggleFocused(): void {
     let focused = document.activeElement === this.inputNode;
-    this.toggleClass('p-mod-focused', focused);
+    this.toggleClass('lm-mod-focused', focused);
   }
 }

packages/filebrowser/src/crumbs.ts

@@ -85,16 +85,16 @@ export class BreadCrumbs extends Widget {
       case 'click':
         this._evtClick(event as MouseEvent);
         break;
-      case 'p-dragenter':
+      case 'lm-dragenter':
         this._evtDragEnter(event as IDragEvent);
         break;
-      case 'p-dragleave':
+      case 'lm-dragleave':
         this._evtDragLeave(event as IDragEvent);
         break;
-      case 'p-dragover':
+      case 'lm-dragover':
         this._evtDragOver(event as IDragEvent);
         break;
-      case 'p-drop':
+      case 'lm-drop':
         this._evtDrop(event as IDragEvent);
         break;
       default:
@@ -110,10 +110,10 @@ export class BreadCrumbs extends Widget {
     this.update();
     let node = this.node;
     node.addEventListener('click', this);
-    node.addEventListener('p-dragenter', this);
-    node.addEventListener('p-dragleave', this);
-    node.addEventListener('p-dragover', this);
-    node.addEventListener('p-drop', this);
+    node.addEventListener('lm-dragenter', this);
+    node.addEventListener('lm-dragleave', this);
+    node.addEventListener('lm-dragover', this);
+    node.addEventListener('lm-drop', this);
   }
 
   /**
@@ -123,10 +123,10 @@ export class BreadCrumbs extends Widget {
     super.onBeforeDetach(msg);
     let node = this.node;
     node.removeEventListener('click', this);
-    node.removeEventListener('p-dragenter', this);
-    node.removeEventListener('p-dragleave', this);
-    node.removeEventListener('p-dragover', this);
-    node.removeEventListener('p-drop', this);
+    node.removeEventListener('lm-dragenter', this);
+    node.removeEventListener('lm-dragleave', this);
+    node.removeEventListener('lm-dragover', this);
+    node.removeEventListener('lm-drop', this);
   }
 
   /**
@@ -173,7 +173,7 @@ export class BreadCrumbs extends Widget {
   }
 
   /**
-   * Handle the `'p-dragenter'` event for the widget.
+   * Handle the `'lm-dragenter'` event for the widget.
    */
   private _evtDragEnter(event: IDragEvent): void {
     if (event.mimeData.hasData(CONTENTS_MIME)) {
@@ -191,7 +191,7 @@ export class BreadCrumbs extends Widget {
   }
 
   /**
-   * Handle the `'p-dragleave'` event for the widget.
+   * Handle the `'lm-dragleave'` event for the widget.
    */
   private _evtDragLeave(event: IDragEvent): void {
     event.preventDefault();
@@ -203,7 +203,7 @@ export class BreadCrumbs extends Widget {
   }
 
   /**
-   * Handle the `'p-dragover'` event for the widget.
+   * Handle the `'lm-dragover'` event for the widget.
    */
   private _evtDragOver(event: IDragEvent): void {
     event.preventDefault();
@@ -222,7 +222,7 @@ export class BreadCrumbs extends Widget {
   }
 
   /**
-   * Handle the `'p-drop'` event for the widget.
+   * Handle the `'lm-drop'` event for the widget.
    */
   private _evtDrop(event: IDragEvent): void {
     event.preventDefault();

packages/filebrowser/src/listing.ts

@@ -645,16 +645,16 @@ export class DirListing extends Widget {
       case 'scroll':
         this._evtScroll(event as MouseEvent);
         break;
-      case 'p-dragenter':
+      case 'lm-dragenter':
         this._evtDragEnter(event as IDragEvent);
         break;
-      case 'p-dragleave':
+      case 'lm-dragleave':
         this._evtDragLeave(event as IDragEvent);
         break;
-      case 'p-dragover':
+      case 'lm-dragover':
         this._evtDragOver(event as IDragEvent);
         break;
-      case 'p-drop':
+      case 'lm-drop':
         this._evtDrop(event as IDragEvent);
         break;
       default:
@@ -679,10 +679,10 @@ export class DirListing extends Widget {
     content.addEventListener('dragend', this);
     content.addEventListener('drop', this);
     content.addEventListener('scroll', this);
-    content.addEventListener('p-dragenter', this);
-    content.addEventListener('p-dragleave', this);
-    content.addEventListener('p-dragover', this);
-    content.addEventListener('p-drop', this);
+    content.addEventListener('lm-dragenter', this);
+    content.addEventListener('lm-dragleave', this);
+    content.addEventListener('lm-dragover', this);
+    content.addEventListener('lm-drop', this);
   }
 
   /**
@@ -702,10 +702,10 @@ export class DirListing extends Widget {
     content.removeEventListener('dragleave', this);
     content.removeEventListener('dragend', this);
     content.removeEventListener('drop', this);
-    content.removeEventListener('p-dragenter', this);
-    content.removeEventListener('p-dragleave', this);
-    content.removeEventListener('p-dragover', this);
-    content.removeEventListener('p-drop', this);
+    content.removeEventListener('lm-dragenter', this);
+    content.removeEventListener('lm-dragleave', this);
+    content.removeEventListener('lm-dragover', this);
+    content.removeEventListener('lm-drop', this);
     document.removeEventListener('mousemove', this, true);
     document.removeEventListener('mouseup', this, true);
   }
@@ -1045,7 +1045,7 @@ export class DirListing extends Widget {
   }
 
   /**
-   * Handle the `'p-dragenter'` event for the widget.
+   * Handle the `'lm-dragenter'` event for the widget.
    */
   private _evtDragEnter(event: IDragEvent): void {
     if (event.mimeData.hasData(CONTENTS_MIME)) {
@@ -1069,7 +1069,7 @@ export class DirListing extends Widget {
   }
 
   /**
-   * Handle the `'p-dragleave'` event for the widget.
+   * Handle the `'lm-dragleave'` event for the widget.
    */
   private _evtDragLeave(event: IDragEvent): void {
     event.preventDefault();
@@ -1081,7 +1081,7 @@ export class DirListing extends Widget {
   }
 
   /**
-   * Handle the `'p-dragover'` event for the widget.
+   * Handle the `'lm-dragover'` event for the widget.
    */
   private _evtDragOver(event: IDragEvent): void {
     event.preventDefault();
@@ -1096,7 +1096,7 @@ export class DirListing extends Widget {
   }
 
   /**
-   * Handle the `'p-drop'` event for the widget.
+   * Handle the `'lm-drop'` event for the widget.
    */
   private _evtDrop(event: IDragEvent): void {
     event.preventDefault();

packages/filebrowser/style/base.css

@@ -245,8 +245,8 @@
   background-image: var(--jp-icon-image-selected);
 }
 
-.jp-DirListing-item.p-mod-drag-image,
-.jp-DirListing-item.jp-mod-selected.p-mod-drag-image {
+.jp-DirListing-item.lm-mod-drag-image,
+.jp-DirListing-item.jp-mod-selected.lm-mod-drag-image {
   font-size: var(--jp-ui-font-size1);
   padding-left: 4px;
   margin-left: 4px;

packages/htmlviewer/style/base.css

@@ -25,11 +25,11 @@ Because iframes steal all cursor events, the following two rules are necessary
 to suppress pointer events while resize drags are occuring. There may be a
 better solution to this problem.
 */
-body.p-mod-override-cursor .jp-HTMLViewer {
+body.lm-mod-override-cursor .jp-HTMLViewer {
   position: relative;
 }
 
-body.p-mod-override-cursor .jp-HTMLViewer:before {
+body.lm-mod-override-cursor .jp-HTMLViewer:before {
   content: '';
   position: absolute;
   top: 0;

packages/notebook/src/widget.ts

@@ -857,7 +857,7 @@ export class Notebook extends StaticNotebook {
     super(Private.processNotebookOptions(options));
     this.node.tabIndex = -1; // Allow the widget to take focus.
     // Allow the node to scroll while dragging items.
-    this.node.setAttribute('data-p-dragscroll', 'true');
+    this.node.setAttribute('data-lm-dragscroll', 'true');
   }
 
   /**
@@ -1281,16 +1281,16 @@ export class Notebook extends StaticNotebook {
       case 'focusout':
         this._evtFocusOut(event as MouseEvent);
         break;
-      case 'p-dragenter':
+      case 'lm-dragenter':
         this._evtDragEnter(event as IDragEvent);
         break;
-      case 'p-dragleave':
+      case 'lm-dragleave':
         this._evtDragLeave(event as IDragEvent);
         break;
-      case 'p-dragover':
+      case 'lm-dragover':
         this._evtDragOver(event as IDragEvent);
         break;
-      case 'p-drop':
+      case 'lm-drop':
         this._evtDrop(event as IDragEvent);
         break;
       default:
@@ -1315,10 +1315,10 @@ export class Notebook extends StaticNotebook {
     // Capture drag events for the notebook widget
     // in order to preempt the drag/drop handlers in the
     // code editor widgets, which can take text data.
-    node.addEventListener('p-dragenter', this, true);
-    node.addEventListener('p-dragleave', this, true);
-    node.addEventListener('p-dragover', this, true);
-    node.addEventListener('p-drop', this, true);
+    node.addEventListener('lm-dragenter', this, true);
+    node.addEventListener('lm-dragleave', this, true);
+    node.addEventListener('lm-dragover', this, true);
+    node.addEventListener('lm-drop', this, true);
   }
 
   /**
@@ -1333,10 +1333,10 @@ export class Notebook extends StaticNotebook {
     node.removeEventListener('dblclick', this);
     node.removeEventListener('focusin', this);
     node.removeEventListener('focusout', this);
-    node.removeEventListener('p-dragenter', this, true);
-    node.removeEventListener('p-dragleave', this, true);
-    node.removeEventListener('p-dragover', this, true);
-    node.removeEventListener('p-drop', this, true);
+    node.removeEventListener('lm-dragenter', this, true);
+    node.removeEventListener('lm-dragleave', this, true);
+    node.removeEventListener('lm-dragover', this, true);
+    node.removeEventListener('lm-drop', this, true);
     document.removeEventListener('mousemove', this, true);
     document.removeEventListener('mouseup', this, true);
   }
@@ -1825,7 +1825,7 @@ export class Notebook extends StaticNotebook {
   }
 
   /**
-   * Handle the `'p-dragenter'` event for the widget.
+   * Handle the `'lm-dragenter'` event for the widget.
    */
   private _evtDragEnter(event: IDragEvent): void {
     if (!event.mimeData.hasData(JUPYTER_CELL_MIME)) {
@@ -1844,7 +1844,7 @@ export class Notebook extends StaticNotebook {
   }
 
   /**
-   * Handle the `'p-dragleave'` event for the widget.
+   * Handle the `'lm-dragleave'` event for the widget.
    */
   private _evtDragLeave(event: IDragEvent): void {
     if (!event.mimeData.hasData(JUPYTER_CELL_MIME)) {
@@ -1859,7 +1859,7 @@ export class Notebook extends StaticNotebook {
   }
 
   /**
-   * Handle the `'p-dragover'` event for the widget.
+   * Handle the `'lm-dragover'` event for the widget.
    */
   private _evtDragOver(event: IDragEvent): void {
     if (!event.mimeData.hasData(JUPYTER_CELL_MIME)) {
@@ -1882,7 +1882,7 @@ export class Notebook extends StaticNotebook {
   }
 
   /**
-   * Handle the `'p-drop'` event for the widget.
+   * Handle the `'lm-drop'` event for the widget.
    */
   private _evtDrop(event: IDragEvent): void {
     if (!event.mimeData.hasData(JUPYTER_CELL_MIME)) {

packages/outputarea/src/widget.ts

@@ -471,7 +471,7 @@ export class OutputArea extends Widget {
       output.node.appendChild(pre);
 
       // Remove mime-type-specific CSS classes
-      output.node.className = 'p-Widget jp-RenderedText';
+      output.node.className = 'lm-Widget jp-RenderedText';
       output.node.setAttribute(
         'data-mime-type',
         'application/vnd.jupyter.stderr'

packages/outputarea/style/base.css

@@ -74,11 +74,11 @@ Because iframes steal all cursor events, the following two rules are necessary
 to suppress pointer events while resize drags are occurring. There may be a
 better solution to this problem.
 */
-body.p-mod-override-cursor .jp-OutputArea-output.jp-mod-isolated {
+body.lm-mod-override-cursor .jp-OutputArea-output.jp-mod-isolated {
   position: relative;
 }
 
-body.p-mod-override-cursor .jp-OutputArea-output.jp-mod-isolated:before {
+body.lm-mod-override-cursor .jp-OutputArea-output.jp-mod-isolated:before {
   content: '';
   position: absolute;
   top: 0;

packages/pdf-extension/style/base.css

@@ -21,11 +21,11 @@ When drag events occur, `p-mod-override-cursor` is added to the body.
 This reuses the same CSS selector logic as jp-IFrame to prevent embedded
 PDFs from swallowing cursor events.
 */
-body.p-mod-override-cursor .jp-PDFContainer {
+body.lm-mod-override-cursor .jp-PDFContainer {
   position: relative;
 }
 
-body.p-mod-override-cursor .jp-PDFContainer:before {
+body.lm-mod-override-cursor .jp-PDFContainer:before {
   content: '';
   position: absolute;
   z-index: 10;

packages/settingeditor/style/base.css

@@ -23,7 +23,7 @@
   font-size: var(--jp-ui-font-size1);
 }
 
-#setting-editor > .p-Widget {
+#setting-editor > .lm-Widget {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -31,7 +31,7 @@
   right: 0;
 }
 
-#setting-editor .p-SplitPanel-handle {
+#setting-editor .lm-SplitPanel-handle {
   background-color: var(--jp-border-color2);
 }
 

packages/statusbar/src/defaults/lineCol.tsx

@@ -100,7 +100,7 @@ class LineFormComponent extends React.Component<
           <div
             className={classes(
               lineFormWrapper,
-              'p-lineForm-wrapper',
+              'lm-lineForm-wrapper',
               this.state.hasFocus ? lineFormWrapperFocusWithin : undefined
             )}
           >

packages/tabmanager-extension/style/base.css

@@ -37,7 +37,7 @@
   text-transform: uppercase;
 }
 
-#tab-manager .p-TabBar-tab {
+#tab-manager .lm-TabBar-tab {
   height: var(--jp-private-tab-manager-tab-height);
   padding: 0px 12px;
   border: none;
@@ -45,20 +45,20 @@
   overflow: visible;
 }
 
-#tab-manager .p-TabBar-tab:hover:not(.jp-mod-active) {
+#tab-manager .lm-TabBar-tab:hover:not(.jp-mod-active) {
   background: var(--jp-layout-color2);
 }
 
-#tab-manager .p-TabBar-tab:first-child {
+#tab-manager .lm-TabBar-tab:first-child {
   margin-left: 0;
 }
 
-#tab-manager .p-TabBar-tab.jp-mod-active {
+#tab-manager .lm-TabBar-tab.jp-mod-active {
   color: white;
   background: var(--jp-brand-color1);
 }
 
-#tab-manager .p-TabBar-tabLabel {
+#tab-manager .lm-TabBar-tabLabel {
   line-height: var(--jp-private-tab-manager-tab-height);
   padding-left: 4px;
 }

packages/ui-components/src/icon/tabbarsvg.ts

@@ -37,7 +37,7 @@ export namespace TabBarSvg {
      */
     renderCloseIcon(data: TabBar.IRenderData<any>): VirtualElement {
       const className = closeIcon.class({
-        className: 'jp-icon-hover p-TabBar-tabCloseIcon',
+        className: 'jp-icon-hover lm-TabBar-tabCloseIcon',
         justify: 'center',
         height: '16px',
         width: '16px'
@@ -83,7 +83,7 @@ export namespace DockPanelSvg {
      */
     createTabBar(): TabBarSvg<Widget> {
       let bar = new TabBarSvg<Widget>();
-      bar.addClass('p-DockPanel-tabBar');
+      bar.addClass('lm-DockPanel-tabBar');
       return bar;
     }
   }

packages/ui-components/src/style/icon.ts

@@ -80,7 +80,7 @@ const iconCSSlistingHeaderItem: NestedCSSProperties = {
 
 const iconCSSMainAreaTab: NestedCSSProperties = {
   $nest: {
-    '.p-DockPanel-tabBar &': {
+    '.lm-DockPanel-tabBar &': {
       height: '14px',
       width: '14px'
     },
@@ -188,7 +188,7 @@ const containerCSSListingHeaderItem: NestedCSSProperties = {
  */
 const containerCSSMainAreaTab: NestedCSSProperties = {
   $nest: {
-    '.p-DockPanel-tabBar &': {
+    '.lm-DockPanel-tabBar &': {
       marginRight: '4px'
     },
     '#tab-manager &': {
@@ -220,11 +220,11 @@ const containerCSSSideBar: NestedCSSProperties = {
   // `&` will be substituted for the generated classname (interpolation)
   $nest: {
     // left sidebar tab divs
-    '.jp-SideBar.jp-mod-left .p-TabBar-tab &': {
+    '.jp-SideBar.jp-mod-left .lm-TabBar-tab &': {
       transform: 'rotate(90deg)'
     },
     // left sidebar currently selected tab div
-    '.jp-SideBar.jp-mod-left .p-TabBar-tab.p-mod-current &': {
+    '.jp-SideBar.jp-mod-left .lm-TabBar-tab.lm-mod-current &': {
       transform:
         'rotate(90deg)\n' +
         '    translate(\n' +
@@ -234,11 +234,11 @@ const containerCSSSideBar: NestedCSSProperties = {
     },
 
     // right sidebar tab divs
-    '.jp-SideBar.jp-mod-right .p-TabBar-tab &': {
+    '.jp-SideBar.jp-mod-right .lm-TabBar-tab &': {
       transform: 'rotate(-90deg)'
     },
     // right sidebar currently selected tab div
-    '.jp-SideBar.jp-mod-right .p-TabBar-tab.p-mod-current &': {
+    '.jp-SideBar.jp-mod-right .lm-TabBar-tab.lm-mod-current &': {
       transform:
         'rotate(-90deg)\n' +
         '    translate(\n' +

packages/ui-components/style/icons.css

@@ -184,15 +184,15 @@
 }
 
 /* CSS for icons in selected tabs in the sidebar tab manager */
-#tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable[fill] {
+#tab-manager .lm-TabBar-tab.jp-mod-active .jp-icon-selectable[fill] {
   fill: #fff;
 }
 
-#tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable-inverse[fill] {
+#tab-manager .lm-TabBar-tab.jp-mod-active .jp-icon-selectable-inverse[fill] {
   fill: var(--jp-brand-color1);
 }
 #tab-manager
-  .p-TabBar-tab.jp-mod-active
+  .lm-TabBar-tab.jp-mod-active
   .jp-icon-hover
   :hover
   .jp-icon-selectable[fill] {
@@ -200,7 +200,7 @@
 }
 
 #tab-manager
-  .p-TabBar-tab.jp-mod-active
+  .lm-TabBar-tab.jp-mod-active
   .jp-icon-hover
   :hover
   .jp-icon-selectable-inverse[fill] {
@@ -213,23 +213,23 @@
  * CSS for complex behavior of close icon of tabs in the sidebar tab manager
  */
 #tab-manager
-  .p-TabBar-tab.jp-mod-dirty
-  > .p-TabBar-tabCloseIcon
+  .lm-TabBar-tab.jp-mod-dirty
+  > .lm-TabBar-tabCloseIcon
   > :not(:hover)
   > .jp-icon3[fill] {
   fill: none;
 }
 #tab-manager
-  .p-TabBar-tab.jp-mod-dirty
-  > .p-TabBar-tabCloseIcon
+  .lm-TabBar-tab.jp-mod-dirty
+  > .lm-TabBar-tabCloseIcon
   > :not(:hover)
   > .jp-icon-busy[fill] {
   fill: var(--jp-inverse-layout-color3);
 }
 
 #tab-manager
-  .p-TabBar-tab.jp-mod-dirty.jp-mod-active
-  > .p-TabBar-tabCloseIcon
+  .lm-TabBar-tab.jp-mod-dirty.jp-mod-active
+  > .lm-TabBar-tabCloseIcon
   > :not(:hover)
   > .jp-icon-busy[fill] {
   fill: #fff;
@@ -240,16 +240,16 @@
 *  of the close icon
 * CSS for complex behavior of close icon of tabs in the main area tabbar
 */
-.p-DockPanel-tabBar
-  .p-TabBar-tab.p-mod-closable.jp-mod-dirty
-  > .p-TabBar-tabCloseIcon
+.lm-DockPanel-tabBar
+  .lm-TabBar-tab.lm-mod-closable.jp-mod-dirty
+  > .lm-TabBar-tabCloseIcon
   > :not(:hover)
   > .jp-icon3[fill] {
   fill: none;
 }
-.p-DockPanel-tabBar
-  .p-TabBar-tab.p-mod-closable.jp-mod-dirty
-  > .p-TabBar-tabCloseIcon
+.lm-DockPanel-tabBar
+  .lm-TabBar-tab.lm-mod-closable.jp-mod-dirty
+  > .lm-TabBar-tabCloseIcon
   > :not(:hover)
   > .jp-icon-busy[fill] {
   fill: var(--jp-inverse-layout-color3);

tests/test-apputils/src/toolbar.spec.ts

@@ -197,8 +197,8 @@ describe('@jupyterlab/apputils', () => {
         await render(button);
         const buttonNode = button.node.firstChild as HTMLButtonElement;
         expect(buttonNode.disabled).to.equal(true);
-        expect(buttonNode.classList.contains('p-mod-toggled')).to.equal(true);
-        expect(buttonNode.classList.contains('p-mod-hidden')).to.equal(true);
+        expect(buttonNode.classList.contains('lm-mod-toggled')).to.equal(true);
+        expect(buttonNode.classList.contains('lm-mod-hidden')).to.equal(true);
         button.dispose();
       });
 
@@ -213,14 +213,14 @@ describe('@jupyterlab/apputils', () => {
         await render(button);
         const buttonNode = button.node.firstChild as HTMLButtonElement;
         expect(buttonNode.disabled).to.equal(true);
-        expect(buttonNode.classList.contains('p-mod-toggled')).to.equal(true);
-        expect(buttonNode.classList.contains('p-mod-hidden')).to.equal(true);
+        expect(buttonNode.classList.contains('lm-mod-toggled')).to.equal(true);
+        expect(buttonNode.classList.contains('lm-mod-hidden')).to.equal(true);
         enabled = true;
         visible = true;
         commands.notifyCommandChanged(testLogCommandId);
         expect(buttonNode.disabled).to.equal(false);
-        expect(buttonNode.classList.contains('p-mod-toggled')).to.equal(true);
-        expect(buttonNode.classList.contains('p-mod-hidden')).to.equal(false);
+        expect(buttonNode.classList.contains('lm-mod-toggled')).to.equal(true);
+        expect(buttonNode.classList.contains('lm-mod-hidden')).to.equal(false);
         enabled = false;
         visible = false;
         button.dispose();

tests/test-logconsole/src/widget.spec.ts

@@ -45,7 +45,7 @@ function anyAncestor(el: Element, test: (el: Element) => boolean) {
 }
 
 function isHiddenLumino(el: Element) {
-  return el.classList.contains('p-mod-hidden');
+  return el.classList.contains('lm-mod-hidden');
 }
 
 describe('LogConsolePanel', () => {