@womp/kookie-ui 0.16.0 → 0.18.0

package/src/components/select.props.tsx

@@ -17,7 +17,6 @@ const triggerVariants = ['raised', 'surface', 'soft', 'outline', 'ghost'] as con
 
 const selectTriggerPropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'raised' },
-  material: { type: 'enum', values: ['solid', 'translucent'] },
   error: { type: 'boolean' },
   loading: { type: 'boolean' },
   disabled: { type: 'boolean' },
@@ -27,7 +26,6 @@ const selectTriggerPropDefs = {
   placeholder: { type: 'ReactNode' },
 } satisfies {
   variant: PropDef<(typeof triggerVariants)[number]>;
-  material: PropDef<'solid' | 'translucent'>;
   error: PropDef<boolean>;
   loading: PropDef<boolean>;
   disabled: PropDef<boolean>;

package/src/components/select.tsx

@@ -6,6 +6,7 @@ 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 { marginPropDefs } from '../props/margin.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
 import {
@@ -27,7 +28,8 @@ const SelectContext = React.createContext<SelectContextValue>({});
 
 interface SelectRootProps extends SelectPrimitive.SelectProps, SelectContextValue {}
 const SelectRoot: React.FC<SelectRootProps> = (props) => {
-  const { children, size = selectRootPropDefs.size.default, ...rootProps } = props;
+  const { children, size: sizeProp, ...rootProps } = props;
+  const size = useThemeSize(sizeProp, selectRootPropDefs.size);
   return (
     <SelectPrimitive.Root {...rootProps}>
       <SelectContext.Provider value={React.useMemo(() => ({ size }), [size])}>
@@ -57,7 +59,6 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
       loading,
       disabled,
       readOnly,
-      material,
       ...triggerProps
     } = extractProps(
       // Pass size value from the context to generate styles
@@ -84,7 +85,6 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
         <button
           data-accent-color={color}
           data-radius={radius}
-          data-material={material}
           data-error={error}
           data-loading={loading}
           {...triggerProps}
@@ -174,7 +174,7 @@ const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>
                 </ScrollAreaPrimitive.Viewport>
               </SelectPrimitive.Viewport>
               <ScrollAreaPrimitive.Scrollbar
-                className="rt-ScrollAreaScrollbar rt-r-size-1"
+                className="rt-ScrollAreaScrollbar"
                 orientation="vertical"
               >
                 <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />

package/src/components/separator.css

@@ -1,4 +1,6 @@
 .rt-Separator {
+  /* Fills its container along its own axis, as in v2. */
+  --separator-size: 100%;
   display: block;
   background-color: var(--accent-a5);
 }
@@ -25,26 +27,3 @@
     }
   }
 }
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-Separator {
-    &:where(.rt-r-size-1) {
-      --separator-size: var(--space-4);
-    }
-    &:where(.rt-r-size-2) {
-      --separator-size: var(--space-6);
-    }
-    &:where(.rt-r-size-3) {
-      --separator-size: var(--space-9);
-    }
-    &:where(.rt-r-size-4) {
-      --separator-size: 100%;
-    }
-  }
-}

package/src/components/separator.props.tsx

@@ -3,7 +3,6 @@ import { colorPropDef } from '../props/color.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const orientationValues = ['horizontal', 'vertical'] as const;
-const sizes = ['1', '2', '3', '4'] as const;
 
 const separatorPropDefs = {
   orientation: {
@@ -13,13 +12,11 @@ const separatorPropDefs = {
     default: 'horizontal',
     responsive: true,
   },
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
   color: { ...colorPropDef.color, default: 'gray' },
   decorative: { type: 'boolean', default: true },
   light: { type: 'boolean', className: 'rt-light', default: false },
 } satisfies {
   orientation: PropDef<(typeof orientationValues)[number]>;
-  size: PropDef<(typeof sizes)[number]>;
   color: typeof colorPropDef.color;
   decorative: PropDef<boolean>;
   light: PropDef<boolean>;

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;
 
@@ -99,6 +99,8 @@
   /* 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;
@@ -201,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. */
@@ -246,55 +248,67 @@
 
 /*
  * 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. A Toolbar in the row states its own control height.
+ * 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(--space-2);
+  --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(--space-3);
+  --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(--space-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(--space-2);
+  --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(--space-3);
+  --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(--space-3);
+  --rt-pane-pad-end: var(--surface-p-3);
 }
 :has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-1)) {
-  --rt-pane-row-start: var(--control-height-1);
+  --rt-pane-band-start: var(--control-height-1);
 }
 :has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-2)) {
-  --rt-pane-row-start: var(--control-height-2);
+  --rt-pane-band-start: var(--control-height-2);
 }
 :has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-3)) {
-  --rt-pane-row-start: var(--control-height-3);
+  --rt-pane-band-start: var(--control-height-3);
 }
 :has(> .rt-ShellPaneHeader[data-float] > .rt-Toolbar:where(.rt-r-size-4)) {
-  --rt-pane-row-start: var(--control-height-4);
+  --rt-pane-band-start: var(--control-height-4);
 }
 :has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-1)) {
-  --rt-pane-row-end: var(--control-height-1);
+  --rt-pane-band-end: var(--control-height-1);
 }
 :has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-2)) {
-  --rt-pane-row-end: var(--control-height-2);
+  --rt-pane-band-end: var(--control-height-2);
 }
 :has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-3)) {
-  --rt-pane-row-end: var(--control-height-3);
+  --rt-pane-band-end: var(--control-height-3);
 }
 :has(> .rt-ShellPaneFooter[data-float] > .rt-Toolbar:where(.rt-r-size-4)) {
-  --rt-pane-row-end: var(--control-height-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);
 }
 
 /*
@@ -302,14 +316,15 @@
  * scrollbar stays between them, and the fade (with `fade`) runs across them.
  */
 :has(> .rt-ShellPaneHeader[data-float]) > .rt-ShellScroll {
-  --rt-pane-inset-start: calc(var(--rt-pane-row-start) + 2 * var(--rt-pane-pad-start));
+  /* 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-1) + 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(var(--rt-pane-row-end) + 2 * var(--rt-pane-pad-end));
+  --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-1) + 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);
@@ -332,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;
 }
@@ -376,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;
 }
@@ -428,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;
   }
@@ -481,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;
   }
@@ -534,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;
   }
@@ -587,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;
   }
@@ -640,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;
   }
@@ -791,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;
@@ -836,7 +851,7 @@
 
 @media (pointer: coarse) {
   .rt-ShellResizer {
-    --resizer-hit: var(--space-6);
+    --resizer-hit: var(--space-7);
   }
 }
 

package/src/components/shell.tsx

@@ -47,6 +47,7 @@ import { navigationRest, detailRest, toPaneValue, startAnchoredGrowth, withoutRe
 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 type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneMode, PaneName, PaneTarget, ResponsivePresentation, SidebarMode } from './shell.types.js';
@@ -56,7 +57,7 @@ import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneMode, PaneNa
 export interface ShellRootProps extends React.ComponentPropsWithoutRef<'div'> {
   children: React.ReactNode;
   height?: 'full' | 'auto' | string | number;
-  /** The index the panes' chrome takes: `Shell.PaneHeader`, `Shell.Scroll`, `Shell.PaneFooter` and the Sidebar rows in them. Default `2`. */
+  /** The index the panes' chrome takes: `Shell.PaneHeader`, `Shell.Scroll`, `Shell.PaneFooter` and the Sidebar rows in them. Defaults to the nearest Theme's size (3 when the Theme is 4), else `2`. */
   size?: PaneSize;
 }
 
@@ -96,7 +97,12 @@ function triggerFor(doc: Document, id: string, within?: HTMLElement[]): HTMLElem
 
 type LivePane = { name: PaneName; id: string; el: HTMLElement };
 
-const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, children, height = 'full', size = '2', style, onKeyDown, onFocus, ...props }, ref) => {
+/** Shell.Root's own range; a Theme size above it maps to 3. */
+const shellSizePropDef = { values: ['1', '2', '3'] as const };
+
+const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, children, height = 'full', size: sizeProp, style, onKeyDown, onFocus, ...props }, ref) => {
+  // No size of its own: the nearest Theme's, mapped into 1-3.
+  const size = useThemeSize(sizeProp, shellSizePropDef);
   const [store] = React.useState(createShellStore);
   const subscribe = React.useCallback((listener: () => void) => subscribeShellStore(store, listener), [store]);
   // Subscribed for the re-render, not for a value: a pane opening or closing