@womp/kookie-ui 0.15.1 → 0.17.0

package/src/components/sheet.css

@@ -58,14 +58,3 @@
   border-end-end-radius: 0;
 }
 
-/* Overlay adjustments: avoid double-fade jank from base dialog */
-.rt-SheetOverlay::before {
-  backdrop-filter: var(--backdrop-filter-components) !important;
-}
-
-/* Safari backdrop-filter fallback */
-@supports not (backdrop-filter: blur(1px)) {
-  .rt-SheetOverlay::before {
-    backdrop-filter: none !important;
-  }
-}

package/src/components/sheet.tsx

@@ -14,7 +14,6 @@
  * - Side: set with `side` on `Sheet.Content`. Aliases: `left` → `start`, `right` → `end`.
  * - Sizing: reuses Dialog content prop defs (width/min/max/height/size). Default Dialog
  *   maxWidth clamping is removed for Sheets.
- * - Material: use `material` (solid | translucent).
  * - A11y: provide an accessible name via `Sheet.Title` or `aria-label` on `Sheet.Content`.
  *
  * Example
@@ -84,21 +83,15 @@ Trigger.displayName = 'Sheet.Trigger';
 
 // Content
 /** Element type for `Sheet.Content`. */
-// Reuse dialog content prop defs for size/width/height tokens, but handle
-// material explicitly to avoid forwarding unknown DOM props.
+// Reuse dialog content prop defs for size/width/height tokens.
 // Built once at module scope: `extractProps` memoises on the identity of the
 // prop def objects it is handed, so rebuilding these per render would recompile
 // them every time a sheet renders.
 const {
   align: _alignPropDef,
-  material: materialPropDef,
   ...dialogPropDefsForSheet
 } = dialogContentPropDefs;
 
-const materialPropDefs = {
-  material: materialPropDef,
-};
-
 // Override dialog's default maxWidth (600px) to avoid clamping Sheet by default
 const { default: _mwDefault, ...maxWidthWithoutDefault } = dialogPropDefsForSheet.maxWidth;
 const sheetPropDefs = {
@@ -128,7 +121,6 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>(
       forceMount,
       container,
       className,
-      material: materialProp,
       ...restProps
     } = allProps;
     const normalizedSideMap: Record<SheetSide, 'start' | 'end' | 'top' | 'bottom'> = {
@@ -140,14 +132,6 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>(
       bottom: 'bottom',
     };
     const normalizedSide = normalizedSideMap[side];
-    const { material: resolvedMaterial } = extractProps(
-      { material: materialProp },
-      materialPropDefs,
-    );
-
-
-    const materialValue = resolvedMaterial;
-
     // Size/width/height class names come from the dialog defs — see `sheetPropDefs`.
     const { className: extractedClassName, ...contentProps } = extractProps(
       restProps,
@@ -240,7 +224,6 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>(
                 extractedClassName,
               )}
               data-side={normalizedSide}
-              data-material={materialValue}
               tabIndex={-1}
               role="dialog"
               aria-modal="true"

package/src/components/shell.css

@@ -27,7 +27,7 @@
 
 .rt-ShellRoot {
   /* Read by inset panes. Declared here, so the documented override on the Root works. */
-  --shell-inset-gap: var(--space-2);
+  --shell-inset-gap: var(--space-3);
   /* Written inline by the Root while a Rail shows; stated here so a nested Shell never inherits its parent's. */
   --shell-rail-offset: 0px;
 
@@ -96,6 +96,11 @@
  * property guaranteed-invalid, so the readers below fall back to the frame.
  */
 .rt-ShellPane {
+  /* A pane nested in a Shell.Scroll measures its own floating rows, not the outer ones. */
+  --rt-pane-inset-start: initial;
+  --rt-pane-inset-end: initial;
+  --rt-pane-band-start: initial;
+  --rt-pane-band-end: initial;
   --rt-shell-position: initial;
   --rt-shell-z: initial;
   --rt-shell-row: initial;
@@ -198,7 +203,7 @@
 }
 
 .rt-ShellRailContent {
-  gap: var(--space-2);
+  gap: var(--space-3);
 }
 
 /* Shell.Scroll takes the room a pane's header and footer leave, and scrolls inside it. */
@@ -207,6 +212,125 @@
   min-height: 0;
 }
 
+/* ── Floating header and footer ───────────────────────────────────────────── */
+
+/*
+ * A floating row sits over the scroller instead of above or below it, so the list runs the
+ * pane's full height and scrolls behind the row. The row paints nothing, so it catches no
+ * clicks either: each control in it takes the pointer back.
+ */
+.rt-ShellPaneHeader[data-float],
+.rt-ShellPaneFooter[data-float] {
+  position: absolute;
+  inset-inline: 0;
+  z-index: 1;
+  pointer-events: none;
+
+  & > :where(*),
+  & > :where(.rt-Toolbar) > :where(*) {
+    pointer-events: auto;
+  }
+  & > :where(.rt-Toolbar) {
+    pointer-events: none;
+  }
+}
+.rt-ShellPaneHeader[data-float] {
+  top: 0;
+}
+.rt-ShellPaneFooter[data-float] {
+  bottom: 0;
+}
+
+/* The row's containing block is the pane content around it. */
+:where(:has(> .rt-ShellPaneHeader[data-float], > .rt-ShellPaneFooter[data-float])) {
+  position: relative;
+}
+
+/*
+ * How tall the floating row is: one control row plus the row's padding on both sides, worked
+ * out in CSS so the first paint is right. The padding is the pane's surface padding at the
+ * 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(> .rt-ShellPaneHeader[data-float]:where(.rt-r-size-1)) {
+  --rt-pane-row-start: var(--control-height-1);
+  --rt-pane-pad-start: var(--surface-p-1);
+}
+:has(> .rt-ShellPaneHeader[data-float]:where(.rt-r-size-2)) {
+  --rt-pane-row-start: var(--control-height-2);
+  --rt-pane-pad-start: var(--surface-p-2);
+}
+:has(> .rt-ShellPaneHeader[data-float]:where(.rt-r-size-3)) {
+  --rt-pane-row-start: var(--control-height-3);
+  --rt-pane-pad-start: var(--surface-p-3);
+}
+:has(> .rt-ShellPaneFooter[data-float]:where(.rt-r-size-1)) {
+  --rt-pane-row-end: var(--control-height-1);
+  --rt-pane-pad-end: var(--surface-p-1);
+}
+:has(> .rt-ShellPaneFooter[data-float]:where(.rt-r-size-2)) {
+  --rt-pane-row-end: var(--control-height-2);
+  --rt-pane-pad-end: var(--surface-p-2);
+}
+:has(> .rt-ShellPaneFooter[data-float]:where(.rt-r-size-3)) {
+  --rt-pane-row-end: var(--control-height-3);
+  --rt-pane-pad-end: var(--surface-p-3);
+}
+:has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-1)) {
+  --rt-pane-band-start: var(--control-height-1);
+}
+:has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-2)) {
+  --rt-pane-band-start: var(--control-height-2);
+}
+:has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-3)) {
+  --rt-pane-band-start: var(--control-height-3);
+}
+:has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-4)) {
+  --rt-pane-band-start: var(--control-height-4);
+}
+:has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-1)) {
+  --rt-pane-band-end: var(--control-height-1);
+}
+:has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-2)) {
+  --rt-pane-band-end: var(--control-height-2);
+}
+:has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-3)) {
+  --rt-pane-band-end: var(--control-height-3);
+}
+:has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-4)) {
+  --rt-pane-band-end: var(--control-height-4);
+}
+
+/* A Rail's rows are tiles, and its chrome keeps their tight padding (sidebar.css). */
+.rt-ShellRailContent:has(> .rt-ShellPaneHeader[data-float]),
+.rt-ShellRailContent :has(> .rt-ShellPaneHeader[data-float]) {
+  --rt-pane-pad-start: var(--space-3);
+}
+.rt-ShellRailContent:has(> .rt-ShellPaneFooter[data-float]),
+.rt-ShellRailContent :has(> .rt-ShellPaneFooter[data-float]) {
+  --rt-pane-pad-end: var(--space-3);
+}
+
+/*
+ * 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(> .rt-ShellPaneHeader[data-float]) > .rt-ShellScroll {
+  /* The taller of the pane's control row and a Toolbar's own: the row never shrinks below the first. */
+  --rt-pane-inset-start: calc(max(var(--rt-pane-row-start), var(--rt-pane-band-start, 0px)) + 2 * var(--rt-pane-pad-start));
+  --scroll-fade-start: var(--rt-pane-inset-start);
+  --scrollarea-scrollbar-vertical-margin-top: calc(var(--space-2) + var(--rt-pane-inset-start));
+}
+:has(> .rt-ShellPaneFooter[data-float]) > .rt-ShellScroll {
+  --rt-pane-inset-end: calc(max(var(--rt-pane-row-end), var(--rt-pane-band-end, 0px)) + 2 * var(--rt-pane-pad-end));
+  --scroll-fade-end: var(--rt-pane-inset-end);
+  --scrollarea-scrollbar-vertical-margin-bottom: calc(var(--space-2) + var(--rt-pane-inset-end));
+}
+.rt-ShellScroll > .rt-ScrollAreaViewport > * {
+  padding-top: var(--rt-pane-inset-start, 0px);
+  padding-bottom: var(--rt-pane-inset-end, 0px);
+}
+
 /* Closed is closed, in every posture: out of the layout, the tab order and the accessibility tree. */
 .rt-ShellPane[data-state='closed'] {
   display: none;
@@ -223,7 +347,7 @@
   --rt-shell-col: 1 / -1;
   --rt-shell-surface: var(--color-panel-solid);
   --rt-shell-shadow: var(--shadow-5);
-  --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+  --rt-shell-cap: calc(100% - var(--space-9) - var(--rt-shell-start, 0px));
   --rt-shell-offset: var(--shell-rail-offset, 0px);
   --rt-shell-handle: none;
 }
@@ -267,7 +391,7 @@
   --rt-shell-col: 1 / -1;
   --rt-shell-surface: var(--color-panel-solid);
   --rt-shell-shadow: var(--shadow-5);
-  --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+  --rt-shell-cap: calc(100% - var(--space-9) - var(--rt-shell-start, 0px));
   --rt-shell-offset: var(--shell-rail-offset, 0px);
   --rt-shell-handle: none;
 }
@@ -319,7 +443,7 @@
     --rt-shell-col: 1 / -1;
     --rt-shell-surface: var(--color-panel-solid);
     --rt-shell-shadow: var(--shadow-5);
-    --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+    --rt-shell-cap: calc(100% - var(--space-9) - var(--rt-shell-start, 0px));
     --rt-shell-offset: var(--shell-rail-offset, 0px);
     --rt-shell-handle: none;
   }
@@ -372,7 +496,7 @@
     --rt-shell-col: 1 / -1;
     --rt-shell-surface: var(--color-panel-solid);
     --rt-shell-shadow: var(--shadow-5);
-    --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+    --rt-shell-cap: calc(100% - var(--space-9) - var(--rt-shell-start, 0px));
     --rt-shell-offset: var(--shell-rail-offset, 0px);
     --rt-shell-handle: none;
   }
@@ -425,7 +549,7 @@
     --rt-shell-col: 1 / -1;
     --rt-shell-surface: var(--color-panel-solid);
     --rt-shell-shadow: var(--shadow-5);
-    --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+    --rt-shell-cap: calc(100% - var(--space-9) - var(--rt-shell-start, 0px));
     --rt-shell-offset: var(--shell-rail-offset, 0px);
     --rt-shell-handle: none;
   }
@@ -478,7 +602,7 @@
     --rt-shell-col: 1 / -1;
     --rt-shell-surface: var(--color-panel-solid);
     --rt-shell-shadow: var(--shadow-5);
-    --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+    --rt-shell-cap: calc(100% - var(--space-9) - var(--rt-shell-start, 0px));
     --rt-shell-offset: var(--shell-rail-offset, 0px);
     --rt-shell-handle: none;
   }
@@ -531,7 +655,7 @@
     --rt-shell-col: 1 / -1;
     --rt-shell-surface: var(--color-panel-solid);
     --rt-shell-shadow: var(--shadow-5);
-    --rt-shell-cap: calc(100% - var(--space-8) - var(--rt-shell-start, 0px));
+    --rt-shell-cap: calc(100% - var(--space-9) - var(--rt-shell-start, 0px));
     --rt-shell-offset: var(--shell-rail-offset, 0px);
     --rt-shell-handle: none;
   }
@@ -682,7 +806,7 @@
   z-index: 1;
   background: transparent;
   /* hit target size, adjustable per media */
-  --resizer-hit: var(--space-3);
+  --resizer-hit: var(--space-4);
   display: var(--rt-shell-handle, flex);
   align-items: center;
   justify-content: center;
@@ -727,7 +851,7 @@
 
 @media (pointer: coarse) {
   .rt-ShellResizer {
-    --resizer-hit: var(--space-6);
+    --resizer-hit: var(--space-7);
   }
 }