@womp/kookie-ui 0.24.0 → 0.25.1

package/src/components/select.css

@@ -34,7 +34,7 @@
 
 .kui-SelectIcon {
   flex-shrink: 0;
-  margin-left: auto;
+  margin-inline-start: auto;
   width: var(--trigger-icon-size-default);
   height: var(--trigger-icon-size-default);
 }
@@ -66,7 +66,7 @@
   box-sizing: border-box;
 
   :where(.kui-SelectContent:has(.kui-ScrollAreaScrollbar[data-orientation='vertical'])) & {
-    padding-right: var(--space-4);
+    padding-inline-end: var(--space-4);
   }
 }
 
@@ -117,10 +117,10 @@
    * text). `--radius-full` is 0px below `full` and 9999px at `full`. The chevron's edge keeps
    * the plain padding.
    */
-  padding-left: calc(
+  padding-inline-start: calc(
     var(--select-trigger-px) + min(var(--radius-full, 0px), var(--select-trigger-px-pill) - var(--select-trigger-px))
   );
-  padding-right: var(--select-trigger-px);
+  padding-inline-end: var(--select-trigger-px);
 }
 
 @breakpoints {
@@ -451,40 +451,27 @@
   }
 }
 
-/* Loading state styling */
+/* Loading: the library Spinner fills the icon box, so it follows the trigger size and reduced motion. */
 .kui-SelectLoadingIcon {
-  animation: kui-spin 1s linear infinite;
+  display: block;
 }
 
-.kui-SelectLoadingIconCircle {
-  animation: kui-dash 1.5s ease-in-out infinite;
-}
-
-@keyframes kui-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-@keyframes kui-dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
+/* Two classes: spinner.css loads after this file and sets its own fixed size. */
+/* stylelint-disable-next-line selector-max-specificity */
+.kui-SelectLoadingIcon > .kui-Spinner {
+  width: 100%;
+  height: 100%;
 }
 
 /* Forced colors support */
+/* Box-shadows, which draw every variant's boundary, are dropped there, so the trigger gets a real border. */
 @media (forced-colors: active) {
-  .kui-SelectTrigger:where([aria-invalid='true']) {
+  .kui-SelectTrigger {
     border: 1px solid CanvasText;
   }
+  .kui-SelectTrigger:where(:disabled, [data-disabled]) {
+    border-color: GrayText;
+  }
 }
 
 /***************************************************************************************************

package/src/components/select.tsx

@@ -5,8 +5,9 @@ import classNames from 'classnames';
 import { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSize } from '../helpers/theme-size.js';
+import { useThemeSize } from '../hooks/theme-size.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
+import { Spinner } from './spinner.js';
 import {
   selectRootPropDefs,
   selectTriggerPropDefs,
@@ -152,21 +153,9 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
           </span>
           <SelectPrimitive.Icon asChild>
             {loading ? (
-              <div className="kui-SelectIcon kui-SelectLoadingIcon" aria-hidden="true">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                  <circle
-                    cx="8"
-                    cy="8"
-                    r="7"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeDasharray="32"
-                    strokeDashoffset="32"
-                    className="kui-SelectLoadingIconCircle"
-                  />
-                </svg>
-              </div>
+              <span className="kui-SelectIcon kui-SelectLoadingIcon" aria-hidden="true">
+                <Spinner />
+              </span>
             ) : (
               <ChevronDownIcon className="kui-SelectIcon" />
             )}

package/src/components/separator.css

@@ -17,13 +17,20 @@
 
 @breakpoints {
   .kui-Separator {
+    /* The min sizes keep a squeezed flex parent from thinning the line toward zero. */
     &:where(.kui-r-orientation-horizontal) {
       width: var(--separator-size);
       height: 1px;
+      min-height: 1px;
     }
+    /* Stretches to the row it sits in. A percentage height would resolve to 0 in an
+     * auto-height row and stop the stretch, so the parent's height is a minimum instead. */
     &:where(.kui-r-orientation-vertical) {
       width: 1px;
-      height: var(--separator-size);
+      min-width: 1px;
+      height: auto;
+      min-height: var(--separator-size);
+      align-self: stretch;
     }
   }
 }

package/src/components/separator.props.tsx

@@ -13,7 +13,7 @@ const separatorPropDefs = {
     responsive: true,
   },
   color: { ...colorPropDef.color, default: 'gray' },
-  decorative: { type: 'boolean', default: true },
+  decorative: { type: 'boolean', default: false },
   light: { type: 'boolean', className: 'kui-light', default: false },
 } satisfies {
   orientation: PropDef<(typeof orientationValues)[number]>;

package/src/components/separator.tsx

@@ -1,8 +1,12 @@
+'use client';
+
 import * as React from 'react';
 import classNames from 'classnames';
 
 import { separatorPropDefs } from './separator.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useBreakpoint } from '../hooks/use-breakpoint.js';
+import { SHELL_BREAKPOINTS } from './shell.types.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
@@ -10,16 +14,30 @@ import type { GetPropDefTypes } from '../props/prop-def.js';
 type SeparatorElement = React.ElementRef<'span'>;
 type SeparatorOwnProps = GetPropDefTypes<typeof separatorPropDefs>;
 interface SeparatorProps extends ComponentPropsWithout<'span', RemovedProps>, SeparatorOwnProps {}
+type Orientation = 'horizontal' | 'vertical';
+
 const Separator = React.forwardRef<SeparatorElement, SeparatorProps>((props, forwardedRef) => {
   const { className, color, decorative, ...separatorProps } = extractProps(props, separatorPropDefs);
-  // A responsive orientation announces the one it starts with.
-  const orientation =
-    typeof props.orientation === 'object' ? props.orientation.initial : props.orientation;
+  const responsive = typeof props.orientation === 'object' && props.orientation !== null;
+  const { breakpoint } = useBreakpoint(responsive);
+
+  // A responsive orientation announces the one drawn at the current breakpoint.
+  let orientation: Orientation = 'horizontal';
+  if (responsive) {
+    const values = props.orientation as Partial<Record<string, Orientation>>;
+    for (const bp of SHELL_BREAKPOINTS) {
+      if (values[bp] !== undefined) orientation = values[bp]!;
+      if (bp === breakpoint) break;
+    }
+  } else if (props.orientation === 'vertical') {
+    orientation = 'vertical';
+  }
+
   return (
     <span
       data-accent-color={color}
       role={decorative ? undefined : 'separator'}
-      aria-orientation={!decorative && orientation === 'vertical' ? 'vertical' : undefined}
+      aria-orientation={decorative ? undefined : orientation}
       {...separatorProps}
       ref={forwardedRef}
       className={classNames('kui-Separator', className)}

package/src/components/sheet.css

@@ -1,4 +1,6 @@
-:where(.kui-SheetContent) {
+/* The class sits outside :where() so the 90vw default outranks the dialog's width: 100% in
+   base-dialog.css (same weight, later in the cascade). The width prop sets --width. */
+.kui-SheetContent {
   position: fixed !important;
   /* Use physical properties to integrate with width/height responsive utilities */
   width: var(--width, 90vw);
@@ -7,12 +9,11 @@
   height: 100vh;
   max-height: 100vh;
   margin: 0 !important;
-  will-change: transform;
 }
 
 /* iOS dynamic viewport height - accounts for browser chrome */
 @supports (height: 100dvh) {
-  :where(.kui-SheetContent) {
+  .kui-SheetContent {
     height: 100dvh;
     max-height: 100dvh;
   }
@@ -27,8 +28,8 @@
   margin: 0 !important;
   border-start-start-radius: 0;
   border-end-start-radius: 0;
-  /* iOS safe area for home indicator */
-  padding-bottom: env(safe-area-inset-bottom, 0px);
+  /* Keep the content padding, growing it to clear an iOS home indicator */
+  padding-bottom: max(var(--dialog-content-padding), env(safe-area-inset-bottom, 0px));
 }
 .kui-SheetContent:where([data-side='end']) {
   inset-block: 0 !important;
@@ -36,8 +37,8 @@
   margin: 0 !important;
   border-start-end-radius: 0;
   border-end-end-radius: 0;
-  /* iOS safe area for home indicator */
-  padding-bottom: env(safe-area-inset-bottom, 0px);
+  /* Keep the content padding, growing it to clear an iOS home indicator */
+  padding-bottom: max(var(--dialog-content-padding), env(safe-area-inset-bottom, 0px));
 }
 .kui-SheetContent:where([data-side='top']) {
   inset-block-start: 0 !important;

package/src/components/sheet.tsx

@@ -42,7 +42,7 @@ import { Theme } from './theme.js';
 import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
+import { useThemeSizeProps } from '../hooks/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
@@ -93,7 +93,9 @@ const sheetPropDefs = dialogPropDefsForSheet;
 const SheetTitleCountContext = React.createContext<React.MutableRefObject<number> | null>(null);
 
 type SheetContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
-interface SheetContentProps extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>, DialogContentOwnProps {
+interface SheetContentProps
+  extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,
+    Omit<DialogContentOwnProps, 'align'> {
   /** Side where the Sheet should appear. `left`/`right` alias to `start`/`end`. */
   side?: SheetSide;
   /** Optional DOM container to portal into. Defaults to `document.body`. */

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));
+  }
+}
+