@womp/kookie-ui 0.23.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;
@@ -224,6 +225,16 @@
   min-height: 0;
 }
 
+/*
+ * In the content it is the page's scroller. The content becomes a column that does not scroll
+ * itself, so a floating header beside the Scroll stays pinned while the page scrolls under it.
+ */
+.kui-ShellContent:has(> .kui-ShellScroll) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 /* ── Floating header and footer ───────────────────────────────────────────── */
 
 /*
@@ -253,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;
 }
 
@@ -264,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);
 }
 
@@ -327,17 +415,31 @@
  * 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));
 }
+/* A link target or a focused control scrolls into view clear of the floating rows, not under them. */
+.kui-ShellScroll > .kui-ScrollAreaViewport {
+  scroll-padding-block: var(--kui-pane-inset-start, 0px) var(--kui-pane-inset-end, 0px);
+}
 .kui-ShellScroll > .kui-ScrollAreaViewport > * {
   padding-top: var(--kui-pane-inset-start, 0px);
   padding-bottom: var(--kui-pane-inset-end, 0px);
@@ -359,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;
@@ -372,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;
@@ -390,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;
@@ -403,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;
@@ -416,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;
@@ -442,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;
@@ -455,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;
@@ -468,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;
@@ -495,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;
@@ -508,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;
@@ -521,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;
@@ -548,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;
@@ -561,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;
@@ -574,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;
@@ -601,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;
@@ -614,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;
@@ -627,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;
@@ -654,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;
@@ -667,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;
@@ -680,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;
@@ -713,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;
 
@@ -909,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

@@ -22,12 +22,16 @@
 
 import * as React from 'react';
 import classNames from 'classnames';
+import { Slot } from 'radix-ui';
 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 {
@@ -48,8 +52,8 @@ import { useShell, useSidebarMode } from './shell.context.js';
 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, ShellSizeContext } from './_internal/pane-chrome.js';
-import type { PaneSize } from './_internal/pane-chrome.js';
+import { PaneChromeScope, PaneFooter, PaneHeader, Scroll, ShellContentContext, ShellSizeContext } 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 ──────────────────────────────────────────────────────────────────── */
@@ -365,6 +369,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
   return (
     <ShellStoreContext.Provider value={store}>
       <ShellSizeContext.Provider value={size}>
+      <ShellContentContext.Provider value={false}>
       <ShellInsetContext.Provider value={insetContext}>
         {/* The Root is not a widget: it hears Escape bubbling up from the panes,
             after their own handlers, to close the overlays. */}
@@ -387,6 +392,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
           <div className="kui-ShellScrim" aria-hidden onClick={closeOverlays} />
         </div>
       </ShellInsetContext.Provider>
+      </ShellContentContext.Provider>
       </ShellSizeContext.Provider>
     </ShellStoreContext.Provider>
   );
@@ -484,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)}
@@ -649,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)}
@@ -679,9 +687,17 @@ interface ShellContentProps extends React.ComponentPropsWithoutRef<'main'> {
   inset?: boolean;
 }
 
-const Content = React.forwardRef<HTMLElement, ShellContentProps>(({ className, inset, ...props }, ref) => {
+/**
+ * The work area. It scrolls as it is; with a `Shell.Scroll` child it becomes a column and the
+ * Scroll scrolls instead, so a `Shell.PaneHeader float` beside it stays pinned over the page.
+ */
+const Content = React.forwardRef<HTMLElement, ShellContentProps>(({ className, inset, children, ...props }, ref) => {
   useInsetRegistration('content', inset);
-  return <main {...props} ref={ref} className={classNames('kui-ShellContent', className)} data-inset={inset || undefined} />;
+  return (
+    <main {...props} ref={ref} className={classNames('kui-ShellContent', className)} data-inset={inset || undefined}>
+      <ShellContentContext.Provider value={true}>{children}</ShellContentContext.Provider>
+    </main>
+  );
 });
 Content.displayName = 'Shell.Content';
 
@@ -692,6 +708,12 @@ type TriggerAction = 'toggle' | 'expand' | 'collapse';
 interface TriggerProps extends React.ComponentPropsWithoutRef<'button'> {
   target: PaneTarget;
   action?: TriggerAction;
+  /**
+   * Renders the single child in place of the trigger's own button, with the trigger's click,
+   * `aria-controls`, `aria-expanded` and data attributes merged onto it. Use it to make a
+   * `Button` the trigger: `<Shell.Trigger asChild><Button iconOnly aria-label="Toggle sidebar">…</Button></Shell.Trigger>`.
+   */
+  asChild?: boolean;
   /**
    * Whether to show a preview of the target pane on hover while it is closed
    * and not an overlay. Defaults to false.
@@ -706,9 +728,10 @@ interface TriggerProps extends React.ComponentPropsWithoutRef<'button'> {
  * A button that drives a pane by name, through the registry. It sets
  * `aria-controls` and `aria-expanded` (left off while an untouched pane
  * cannot know its state yet), renders `type="button"`, and runs the
- * consumer's `onClick` first: calling `preventDefault()` there cancels it.
+ * consumer's `onClick` first: calling `preventDefault()` there cancels it. With `asChild` the
+ * child is the button, and its own `type` stands.
  */
-const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, action = 'toggle', peekOnHover, onClick, onMouseEnter, onMouseLeave, children, ...props }, ref) => {
+const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, action = 'toggle', peekOnHover, asChild = false, onClick, onMouseEnter, onMouseLeave, children, ...props }, ref) => {
   const store = useShellStore('Shell.Trigger');
   React.useEffect(() => {
     if (target === 'left') warnOnce('Shell.Trigger target="left" is deprecated and is removed in 1.0. Use target="rail".');
@@ -742,10 +765,13 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, act
     if (peekOnHover && store.peek === name) setShellPeek(store, null);
   };
 
+  const Comp = asChild ? Slot.Root : 'button';
   return (
-    <button
+    <Comp
       // A button's default type is `submit`. Stated before the spread, so a consumer's own wins.
-      type="button"
+      // An asChild child states its own (Button already says `button`; a link has none), so the
+      // key is left off rather than passed as undefined.
+      {...(!asChild && { type: 'button' as const })}
       aria-controls={entry?.id}
       aria-expanded={shown}
       {...props}
@@ -757,7 +783,7 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, act
       data-shell-action={action}
     >
       {children}
-    </button>
+    </Comp>
   );
 });
 Trigger.displayName = 'Shell.Trigger';
@@ -785,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,
 };