@womp/kookie-ui 0.24.0 → 0.25.0

package/src/components/shell.css

@@ -119,6 +119,7 @@
   --kui-shell-col: initial;
   --kui-shell-surface: initial;
   --kui-shell-shadow: initial;
+  --kui-shell-edge: 0px;
   --kui-shell-cap: initial;
   --kui-shell-offset: initial;
   --kui-shell-handle: initial;
@@ -263,8 +264,17 @@
   bottom: 0;
 }
 
+/*
+ * The pane content holding a floating row is the subject of these rules, named by class so the
+ * browser tries them only on those elements (a bare `:has()` is tried on every element).
+ */
 /* The row's containing block is the pane content around it. */
-:where(:has(> .kui-ShellPaneHeader[data-float], > .kui-ShellPaneFooter[data-float])) {
+:where(.kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float], > .kui-ShellPaneFooter[data-float])),
+:where(.kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float], > .kui-ShellPaneFooter[data-float])),
+:where(.kui-ShellSidebarContent:has(> .kui-ShellPaneHeader[data-float], > .kui-ShellPaneFooter[data-float])),
+:where(.kui-ShellInspectorContent:has(> .kui-ShellPaneHeader[data-float], > .kui-ShellPaneFooter[data-float])),
+:where(.kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float], > .kui-ShellPaneFooter[data-float])),
+:where(.kui-ShellContent:has(> .kui-ShellPaneHeader[data-float], > .kui-ShellPaneFooter[data-float])) {
   position: relative;
 }
 
@@ -274,62 +284,130 @@
  * Shell's index, the same the row itself pads by. A Toolbar in the row publishes its own control
  * height as the band (one step above the Shell's when it states no size).
  */
-:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)),
+.kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-1)) {
   --kui-pane-row-start: var(--control-height-1);
   --kui-pane-pad-start: var(--surface-p-1);
 }
-:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)),
+.kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-2)) {
   --kui-pane-row-start: var(--control-height-2);
   --kui-pane-pad-start: var(--surface-p-2);
 }
-:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)),
+.kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]:where(.kui-r-size-3)) {
   --kui-pane-row-start: var(--control-height-3);
   --kui-pane-pad-start: var(--surface-p-3);
 }
-:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)),
+.kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-1)) {
   --kui-pane-row-end: var(--control-height-1);
   --kui-pane-pad-end: var(--surface-p-1);
 }
-:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)),
+.kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-2)) {
   --kui-pane-row-end: var(--control-height-2);
   --kui-pane-pad-end: var(--surface-p-2);
 }
-:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)),
+.kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]:where(.kui-r-size-3)) {
   --kui-pane-row-end: var(--control-height-3);
   --kui-pane-pad-end: var(--surface-p-3);
 }
-:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
+.kui-ShellContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-1)) {
   --kui-pane-band-start: var(--control-height-1);
 }
-:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-2)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-2)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-2)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-2)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-2)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-2)),
+.kui-ShellContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-2)) {
   --kui-pane-band-start: var(--control-height-2);
 }
-:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-3)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-3)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-3)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-3)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-3)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-3)),
+.kui-ShellContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-3)) {
   --kui-pane-band-start: var(--control-height-3);
 }
-:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-4)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-4)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-4)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-4)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-4)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-4)),
+.kui-ShellContent:has(> .kui-ShellPaneHeader[data-float] > .kui-Toolbar:where(.kui-r-size-4)) {
   --kui-pane-band-start: var(--control-height-4);
 }
-:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-1)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-1)),
+.kui-ShellContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-1)) {
   --kui-pane-band-end: var(--control-height-1);
 }
-:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-2)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-2)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-2)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-2)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-2)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-2)),
+.kui-ShellContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-2)) {
   --kui-pane-band-end: var(--control-height-2);
 }
-:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-3)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-3)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-3)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-3)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-3)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-3)),
+.kui-ShellContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-3)) {
   --kui-pane-band-end: var(--control-height-3);
 }
-:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-4)) {
+.kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-4)),
+.kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-4)),
+.kui-ShellSidebarContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-4)),
+.kui-ShellInspectorContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-4)),
+.kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-4)),
+.kui-ShellContent:has(> .kui-ShellPaneFooter[data-float] > .kui-Toolbar:where(.kui-r-size-4)) {
   --kui-pane-band-end: var(--control-height-4);
 }
 
 /* A Rail's rows are tiles, and its chrome keeps their tight padding (sidebar.css). */
-.kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]),
-.kui-ShellRailContent :has(> .kui-ShellPaneHeader[data-float]) {
+.kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]) {
   --kui-pane-pad-start: var(--space-3);
 }
-.kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]),
-.kui-ShellRailContent :has(> .kui-ShellPaneFooter[data-float]) {
+.kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]) {
   --kui-pane-pad-end: var(--space-3);
 }
 
@@ -337,13 +415,23 @@
  * The scroller spends that height three ways: the list starts and ends clear of the rows, the
  * scrollbar stays between them, and the fade (with `fade`) runs across them.
  */
-:has(> .kui-ShellPaneHeader[data-float]) > .kui-ShellScroll {
+.kui-ShellRailContent:has(> .kui-ShellPaneHeader[data-float]) > .kui-ShellScroll,
+.kui-ShellPanelContent:has(> .kui-ShellPaneHeader[data-float]) > .kui-ShellScroll,
+.kui-ShellSidebarContent:has(> .kui-ShellPaneHeader[data-float]) > .kui-ShellScroll,
+.kui-ShellInspectorContent:has(> .kui-ShellPaneHeader[data-float]) > .kui-ShellScroll,
+.kui-ShellBottomContent:has(> .kui-ShellPaneHeader[data-float]) > .kui-ShellScroll,
+.kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]) > .kui-ShellScroll {
   /* The taller of the pane's control row and a Toolbar's own: the row never shrinks below the first. */
   --kui-pane-inset-start: calc(max(var(--kui-pane-row-start), var(--kui-pane-band-start, 0px)) + 2 * var(--kui-pane-pad-start));
   --scroll-fade-start: var(--kui-pane-inset-start);
   --scrollarea-scrollbar-vertical-margin-top: calc(var(--space-2) + var(--kui-pane-inset-start));
 }
-:has(> .kui-ShellPaneFooter[data-float]) > .kui-ShellScroll {
+.kui-ShellRailContent:has(> .kui-ShellPaneFooter[data-float]) > .kui-ShellScroll,
+.kui-ShellPanelContent:has(> .kui-ShellPaneFooter[data-float]) > .kui-ShellScroll,
+.kui-ShellSidebarContent:has(> .kui-ShellPaneFooter[data-float]) > .kui-ShellScroll,
+.kui-ShellInspectorContent:has(> .kui-ShellPaneFooter[data-float]) > .kui-ShellScroll,
+.kui-ShellBottomContent:has(> .kui-ShellPaneFooter[data-float]) > .kui-ShellScroll,
+.kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]) > .kui-ShellScroll {
   --kui-pane-inset-end: calc(max(var(--kui-pane-row-end), var(--kui-pane-band-end, 0px)) + 2 * var(--kui-pane-pad-end));
   --scroll-fade-end: var(--kui-pane-inset-end);
   --scrollarea-scrollbar-vertical-margin-bottom: calc(var(--space-2) + var(--kui-pane-inset-end));
@@ -373,6 +461,7 @@
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
   --kui-shell-shadow: var(--shadow-5);
+  --kui-shell-edge: 1px;
   --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
   --kui-shell-offset: var(--shell-rail-offset, 0px);
   --kui-shell-handle: none;
@@ -386,6 +475,7 @@
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
   --kui-shell-shadow: var(--shadow-4);
+  --kui-shell-edge: 1px;
   --kui-shell-cap: initial;
   --kui-shell-offset: var(--shell-rail-offset, 0px);
   --kui-shell-handle: initial;
@@ -404,6 +494,7 @@
   --kui-shell-col: initial;
   --kui-shell-surface: initial;
   --kui-shell-shadow: initial;
+  --kui-shell-edge: 0px;
   --kui-shell-cap: initial;
   --kui-shell-offset: initial;
   --kui-shell-handle: initial;
@@ -417,6 +508,7 @@
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
   --kui-shell-shadow: var(--shadow-5);
+  --kui-shell-edge: 1px;
   --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
   --kui-shell-offset: var(--shell-rail-offset, 0px);
   --kui-shell-handle: none;
@@ -430,6 +522,7 @@
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
   --kui-shell-shadow: var(--shadow-4);
+  --kui-shell-edge: 1px;
   --kui-shell-cap: initial;
   --kui-shell-offset: var(--shell-rail-offset, 0px);
   --kui-shell-handle: initial;
@@ -456,6 +549,7 @@
     --kui-shell-col: initial;
     --kui-shell-surface: initial;
     --kui-shell-shadow: initial;
+    --kui-shell-edge: 0px;
     --kui-shell-cap: initial;
     --kui-shell-offset: initial;
     --kui-shell-handle: initial;
@@ -469,6 +563,7 @@
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
     --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
     --kui-shell-handle: none;
@@ -482,6 +577,7 @@
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
     --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
     --kui-shell-handle: initial;
@@ -509,6 +605,7 @@
     --kui-shell-col: initial;
     --kui-shell-surface: initial;
     --kui-shell-shadow: initial;
+    --kui-shell-edge: 0px;
     --kui-shell-cap: initial;
     --kui-shell-offset: initial;
     --kui-shell-handle: initial;
@@ -522,6 +619,7 @@
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
     --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
     --kui-shell-handle: none;
@@ -535,6 +633,7 @@
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
     --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
     --kui-shell-handle: initial;
@@ -562,6 +661,7 @@
     --kui-shell-col: initial;
     --kui-shell-surface: initial;
     --kui-shell-shadow: initial;
+    --kui-shell-edge: 0px;
     --kui-shell-cap: initial;
     --kui-shell-offset: initial;
     --kui-shell-handle: initial;
@@ -575,6 +675,7 @@
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
     --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
     --kui-shell-handle: none;
@@ -588,6 +689,7 @@
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
     --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
     --kui-shell-handle: initial;
@@ -615,6 +717,7 @@
     --kui-shell-col: initial;
     --kui-shell-surface: initial;
     --kui-shell-shadow: initial;
+    --kui-shell-edge: 0px;
     --kui-shell-cap: initial;
     --kui-shell-offset: initial;
     --kui-shell-handle: initial;
@@ -628,6 +731,7 @@
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
     --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
     --kui-shell-handle: none;
@@ -641,6 +745,7 @@
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
     --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
     --kui-shell-handle: initial;
@@ -668,6 +773,7 @@
     --kui-shell-col: initial;
     --kui-shell-surface: initial;
     --kui-shell-shadow: initial;
+    --kui-shell-edge: 0px;
     --kui-shell-cap: initial;
     --kui-shell-offset: initial;
     --kui-shell-handle: initial;
@@ -681,6 +787,7 @@
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
     --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
     --kui-shell-handle: none;
@@ -694,6 +801,7 @@
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
     --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
     --kui-shell-handle: initial;
@@ -727,6 +835,7 @@
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
   --kui-shell-shadow: var(--shadow-4);
+  --kui-shell-edge: 1px;
   --kui-shell-offset: var(--shell-rail-offset, 0px);
   --kui-shell-handle: none;
 
@@ -923,3 +1032,21 @@
   background-color: var(--focus-8);
 }
 
+/*
+ * Forced colors drop backgrounds and shadows. The focused handle keeps its line in the
+ * system highlight, and a pane floating over the page (overlay or stacked) gets an edge
+ * in place of its shadow.
+ */
+@media (forced-colors: active) {
+  .kui-ShellResizer:focus-visible::before {
+    background-color: Highlight;
+    forced-color-adjust: none;
+  }
+
+  .kui-ShellPane,
+  .kui-ShellPane:focus {
+    outline: var(--kui-shell-edge, 0px) solid CanvasText;
+    outline-offset: calc(-1 * var(--kui-shell-edge, 0px));
+  }
+}
+

package/src/components/shell.tsx

@@ -27,8 +27,11 @@ import { useComposedRefs } from 'radix-ui/internal';
 import { PaneResizeContext } from './_internal/shell-resize.js';
 import { PaneHandle, PanelHandle } from './_internal/shell-handles.js';
 import { Sidebar } from './_internal/shell-sidebar.js';
+import type { SidebarPublicProps } from './_internal/shell-sidebar.js';
 import { Bottom } from './_internal/shell-bottom.js';
+import type { BottomPublicProps } from './_internal/shell-bottom.js';
 import { Inspector } from './_internal/shell-inspector.js';
+import type { InspectorPublicProps } from './_internal/shell-inspector.js';
 import { usePane, paneAttributes, usePresentationTable } from './_internal/shell-pane.js';
 import { splitHandles, useResizablePane } from './_internal/shell-resizable.js';
 import {
@@ -50,7 +53,7 @@ import { useResponsivePresentation } from './shell.hooks.js';
 import { readBreakpoint } from '../hooks/use-breakpoint.js';
 import { useThemeSize } from '../helpers/theme-size.js';
 import { PaneChromeScope, PaneFooter, PaneHeader, Scroll, ShellContentContext, ShellSizeContext } from './_internal/pane-chrome.js';
-import type { PaneSize } from './_internal/pane-chrome.js';
+import type { PaneSize, PaneHeaderProps, PaneFooterProps, ScrollProps } from './_internal/pane-chrome.js';
 import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneMode, PaneName, PaneTarget, ResponsivePresentation, SidebarMode } from './shell.types.js';
 
 /* ── Root ──────────────────────────────────────────────────────────────────── */
@@ -487,6 +490,7 @@ const Rail = React.forwardRef<HTMLDivElement, RailProps>((props, ref) => {
   return (
     <div
       {...domProps}
+      role={domProps.role ?? 'navigation'}
       id={pane.id}
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellRail', className)}
@@ -652,6 +656,7 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>((props, ref) =>
   return (
     <div
       {...withoutRemovedPaneProps(domProps)}
+      role={domProps.role ?? 'navigation'}
       id={pane.id}
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellPanel', className)}
@@ -806,4 +811,16 @@ export {
   type ResponsivePresentation,
   type PaneTarget,
   type TriggerAction,
+  type ShellRootProps as RootProps,
+  type ShellHeaderProps as HeaderProps,
+  type RailProps,
+  type PanelPublicProps as PanelProps,
+  type SidebarPublicProps as SidebarProps,
+  type ShellContentProps as ContentProps,
+  type InspectorPublicProps as InspectorProps,
+  type BottomPublicProps as BottomProps,
+  type TriggerProps,
+  type PaneHeaderProps,
+  type PaneFooterProps,
+  type ScrollProps,
 };

package/src/components/sidebar.css

@@ -198,18 +198,6 @@
   flex-shrink: 0;
 }
 
-/* Ensure submenu anchors also truncate */
-:where(.kui-ShellRailContent .kui-SidebarMenuSubContent .kui-SidebarMenuButton > *) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  min-width: 0;
-}
-
 /* Ensure icons remain visible at their token sizes in thin mode */
 /* stylelint-disable-next-line selector-max-type */
 :where(.kui-ShellRailContent .kui-SidebarMenuButton) :where(svg) {
@@ -316,53 +304,12 @@
   display: none !important;
 }
 
-/* Hide submenu chevrons and flatten sublists in rail */
+/* Hide submenu chevrons in rail */
 :where(.kui-ShellRailContent .kui-SidebarMenuSubTriggerIcon),
 :where(.kui-ShellRailContent .kui-BaseMenuSubTriggerIcon) {
   display: none !important;
 }
 
-:where(.kui-ShellRailContent .kui-SidebarMenuSubList),
-:where(.kui-ShellRailContent .kui-BaseMenuSubList) {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-  border-left: 0 !important;
-  border-top: 0 !important;
-  border-bottom: 0 !important;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-/* Also remove any decorative rule on the submenu list in thin mode */
-:where(.kui-ShellRailContent .kui-SidebarMenuSubList::before),
-:where(.kui-ShellRailContent .kui-BaseMenuSubList::before) {
-  content: none !important;
-  display: none !important;
-}
-
-/* Ensure the Accordion content wrapper doesn't add indentation */
-:where(.kui-ShellRailContent .kui-SidebarMenuSubContent) {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-  border-left: 0 !important;
-  border-top: 1px solid var(--neutral-a6) !important;
-  border-bottom: 1px solid var(--neutral-a6) !important;
-  margin-top: var(--space-3) !important;
-  margin-bottom: var(--space-3) !important;
-  /* background-color: var(--accent-3); */
-}
-
-/* Remove vertical connector in thin mode */
-/* (intentionally no ::before) */
-
-/* Ensure submenu buttons also truncate */
-:where(.kui-ShellRailContent .kui-SidebarMenuSubContent .kui-SidebarMenuButton) {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-
 /* Panel Layout Styling (default) - inherits existing styles */
 
 /* Label truncation in expanded mode - prevents horizontal scrollbar on long names */
@@ -406,87 +353,6 @@
   }
 }
 
-/* Flex utilities for header/footer layouts */
-.kui-SidebarHeader:where(.kui-flex-row) {
-  flex-direction: row;
-}
-.kui-SidebarHeader:where(.kui-flex-col) {
-  flex-direction: column;
-}
-.kui-SidebarHeader:where(.kui-items-center) {
-  align-items: center;
-}
-.kui-SidebarHeader:where(.kui-items-start) {
-  align-items: flex-start;
-}
-.kui-SidebarHeader:where(.kui-items-end) {
-  align-items: flex-end;
-}
-.kui-SidebarHeader:where(.kui-justify-between) {
-  justify-content: space-between;
-}
-.kui-SidebarHeader:where(.kui-justify-center) {
-  justify-content: center;
-}
-.kui-SidebarHeader:where(.kui-justify-start) {
-  justify-content: flex-start;
-}
-.kui-SidebarHeader:where(.kui-justify-end) {
-  justify-content: flex-end;
-}
-.kui-SidebarHeader:where(.kui-gap-1) {
-  gap: var(--space-2);
-}
-.kui-SidebarHeader:where(.kui-gap-2) {
-  gap: var(--space-3);
-}
-.kui-SidebarHeader:where(.kui-gap-3) {
-  gap: var(--space-4);
-}
-.kui-SidebarHeader:where(.kui-gap-4) {
-  gap: var(--space-5);
-}
-
-.kui-SidebarFooter:where(.kui-flex-row) {
-  flex-direction: row;
-}
-.kui-SidebarFooter:where(.kui-flex-col) {
-  flex-direction: column;
-}
-.kui-SidebarFooter:where(.kui-items-center) {
-  align-items: center;
-}
-.kui-SidebarFooter:where(.kui-items-start) {
-  align-items: flex-start;
-}
-.kui-SidebarFooter:where(.kui-items-end) {
-  align-items: flex-end;
-}
-.kui-SidebarFooter:where(.kui-justify-between) {
-  justify-content: space-between;
-}
-.kui-SidebarFooter:where(.kui-justify-center) {
-  justify-content: center;
-}
-.kui-SidebarFooter:where(.kui-justify-start) {
-  justify-content: flex-start;
-}
-.kui-SidebarFooter:where(.kui-justify-end) {
-  justify-content: flex-end;
-}
-.kui-SidebarFooter:where(.kui-gap-1) {
-  gap: var(--space-2);
-}
-.kui-SidebarFooter:where(.kui-gap-2) {
-  gap: var(--space-3);
-}
-.kui-SidebarFooter:where(.kui-gap-3) {
-  gap: var(--space-4);
-}
-.kui-SidebarFooter:where(.kui-gap-4) {
-  gap: var(--space-5);
-}
-
 /* Header/Footer Menu Button Support */
 .kui-SidebarHeader :where(.kui-SidebarMenuButton),
 .kui-SidebarFooter :where(.kui-SidebarMenuButton) {