@womp/kookie-ui 0.14.4 → 0.15.0

package/src/components/sheet.tsx

@@ -14,8 +14,7 @@
  * - 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). Deprecated `panelBackground` falls back
- *   in dev with a warning.
+ * - Material: use `material` (solid | translucent).
  * - A11y: provide an accessible name via `Sheet.Title` or `aria-label` on `Sheet.Content`.
  *
  * Example
@@ -43,7 +42,6 @@ import { Theme } from './theme.js';
 import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
@@ -87,19 +85,17 @@ Trigger.displayName = 'Sheet.Trigger';
 // Content
 /** Element type for `Sheet.Content`. */
 // Reuse dialog content prop defs for size/width/height tokens, but handle
-// material/panelBackground explicitly to avoid forwarding unknown DOM props.
+// material explicitly to avoid forwarding unknown DOM props.
 // 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,
-  panelBackground: panelBackgroundPropDef,
   material: materialPropDef,
   ...dialogPropDefsForSheet
 } = dialogContentPropDefs;
 
 const materialPropDefs = {
-  panelBackground: panelBackgroundPropDef,
   material: materialPropDef,
 };
 
@@ -132,7 +128,6 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>(
       forceMount,
       container,
       className,
-      panelBackground: panelBackgroundProp,
       material: materialProp,
       ...restProps
     } = allProps;
@@ -145,16 +140,13 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>(
       bottom: 'bottom',
     };
     const normalizedSide = normalizedSideMap[side];
-    // Extract panelBackground and material together (remove from DOM props)
-    const { panelBackground: resolvedPanelBackground, material: resolvedMaterial } = extractProps(
-      { panelBackground: panelBackgroundProp, material: materialProp },
+    const { material: resolvedMaterial } = extractProps(
+      { material: materialProp },
       materialPropDefs,
     );
 
-    useDeprecatedPanelBackgroundWarning(panelBackgroundProp);
 
-    // Material takes precedence over the deprecated panelBackground
-    const materialValue = resolvedMaterial ?? resolvedPanelBackground;
+    const materialValue = resolvedMaterial;
 
     // Size/width/height class names come from the dialog defs — see `sheetPropDefs`.
     const { className: extractedClassName, ...contentProps } = extractProps(
@@ -249,7 +241,6 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>(
               )}
               data-side={normalizedSide}
               data-material={materialValue}
-              data-panel-background={materialValue}
               tabIndex={-1}
               role="dialog"
               aria-modal="true"

package/src/components/shell.context.tsx

@@ -11,9 +11,9 @@ import { useBreakpoint } from '../hooks/use-breakpoint.js';
 import type { Breakpoint, PaneMode, PaneName, PaneTarget, PresentationValue, SidebarMode } from './shell.types.js';
 import { setShellPeek, subscribeShellStore, useShellStore, warnOnce, type PaneValue, type ShellStore } from './_internal/shell-store.js';
 
-const toSidebarMode = (value: PaneValue | undefined): SidebarMode | undefined => (value === undefined ? undefined : value === 'closed' ? 'collapsed' : value === 'thin' ? 'thin' : 'expanded');
+const toSidebarMode = (value: PaneValue | undefined): SidebarMode | undefined => (value === undefined ? undefined : value === 'closed' ? 'collapsed' : 'expanded');
 
-const fromSidebarMode = (mode: SidebarMode): PaneValue => (mode === 'collapsed' ? 'closed' : mode === 'thin' ? 'thin' : 'open');
+const fromSidebarMode = (mode: SidebarMode): PaneValue => (mode === 'collapsed' ? 'closed' : 'open');
 
 const toPaneMode = (value: PaneValue | undefined): PaneMode => (value === undefined || value === 'closed' ? 'collapsed' : 'expanded');
 

package/src/components/shell.css

@@ -106,7 +106,6 @@
   --rt-shell-offset: initial;
   --rt-shell-handle: initial;
   --rt-shell-start: initial;
-  --rt-shell-thin: initial;
 
   display: flex;
   flex-direction: column;
@@ -166,11 +165,6 @@
   max-inline-size: var(--rt-shell-cap, none);
 }
 
-.rt-ShellSidebar[data-thin] {
-  inline-size: var(--sidebar-thin-size, 64px);
-  --rt-shell-thin: none;
-}
-
 .rt-ShellInspector {
   grid-row: var(--rt-shell-row, inspector);
   grid-column: var(--rt-shell-col, inspector);
@@ -251,11 +245,6 @@
   display: none;
 }
 
-.rt-ShellSidebar[data-state='auto'][data-auto='thin'] {
-  inline-size: var(--sidebar-thin-size, 64px);
-  --rt-shell-thin: none;
-}
-
 /* initial: below 520px, and the base every larger breakpoint overrides. */
 .rt-ShellPane[data-presentation-initial='fixed'],
 .rt-ShellRail[data-presentation-initial='fixed'] ~ .rt-ShellPanel[data-presentation-follows] {
@@ -300,19 +289,12 @@
   display: none;
 }
 
-.rt-ShellPane[data-state='auto'][data-auto-initial='open'],
-.rt-ShellPane[data-state='auto'][data-auto-initial='thin'] {
+.rt-ShellPane[data-state='auto'][data-auto-initial='open'] {
   display: flex;
 }
 
 .rt-ShellSidebar[data-state='auto'][data-auto-initial='open'] {
   inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
-  --rt-shell-thin: initial;
-}
-
-.rt-ShellSidebar[data-state='auto'][data-auto-initial='thin'] {
-  inline-size: var(--sidebar-thin-size, 64px);
-  --rt-shell-thin: none;
 }
 
 @media (min-width: 520px) {
@@ -359,19 +341,12 @@
     display: none;
   }
 
-  .rt-ShellPane[data-state='auto'][data-auto-xs='open'],
-  .rt-ShellPane[data-state='auto'][data-auto-xs='thin'] {
+  .rt-ShellPane[data-state='auto'][data-auto-xs='open'] {
     display: flex;
   }
 
   .rt-ShellSidebar[data-state='auto'][data-auto-xs='open'] {
     inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
-    --rt-shell-thin: initial;
-  }
-
-  .rt-ShellSidebar[data-state='auto'][data-auto-xs='thin'] {
-    inline-size: var(--sidebar-thin-size, 64px);
-    --rt-shell-thin: none;
   }
 }
 
@@ -419,19 +394,12 @@
     display: none;
   }
 
-  .rt-ShellPane[data-state='auto'][data-auto-sm='open'],
-  .rt-ShellPane[data-state='auto'][data-auto-sm='thin'] {
+  .rt-ShellPane[data-state='auto'][data-auto-sm='open'] {
     display: flex;
   }
 
   .rt-ShellSidebar[data-state='auto'][data-auto-sm='open'] {
     inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
-    --rt-shell-thin: initial;
-  }
-
-  .rt-ShellSidebar[data-state='auto'][data-auto-sm='thin'] {
-    inline-size: var(--sidebar-thin-size, 64px);
-    --rt-shell-thin: none;
   }
 }
 
@@ -479,19 +447,12 @@
     display: none;
   }
 
-  .rt-ShellPane[data-state='auto'][data-auto-md='open'],
-  .rt-ShellPane[data-state='auto'][data-auto-md='thin'] {
+  .rt-ShellPane[data-state='auto'][data-auto-md='open'] {
     display: flex;
   }
 
   .rt-ShellSidebar[data-state='auto'][data-auto-md='open'] {
     inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
-    --rt-shell-thin: initial;
-  }
-
-  .rt-ShellSidebar[data-state='auto'][data-auto-md='thin'] {
-    inline-size: var(--sidebar-thin-size, 64px);
-    --rt-shell-thin: none;
   }
 }
 
@@ -539,19 +500,12 @@
     display: none;
   }
 
-  .rt-ShellPane[data-state='auto'][data-auto-lg='open'],
-  .rt-ShellPane[data-state='auto'][data-auto-lg='thin'] {
+  .rt-ShellPane[data-state='auto'][data-auto-lg='open'] {
     display: flex;
   }
 
   .rt-ShellSidebar[data-state='auto'][data-auto-lg='open'] {
     inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
-    --rt-shell-thin: initial;
-  }
-
-  .rt-ShellSidebar[data-state='auto'][data-auto-lg='thin'] {
-    inline-size: var(--sidebar-thin-size, 64px);
-    --rt-shell-thin: none;
   }
 }
 
@@ -599,19 +553,12 @@
     display: none;
   }
 
-  .rt-ShellPane[data-state='auto'][data-auto-xl='open'],
-  .rt-ShellPane[data-state='auto'][data-auto-xl='thin'] {
+  .rt-ShellPane[data-state='auto'][data-auto-xl='open'] {
     display: flex;
   }
 
   .rt-ShellSidebar[data-state='auto'][data-auto-xl='open'] {
     inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
-    --rt-shell-thin: initial;
-  }
-
-  .rt-ShellSidebar[data-state='auto'][data-auto-xl='thin'] {
-    inline-size: var(--sidebar-thin-size, 64px);
-    --rt-shell-thin: none;
   }
 }
 
@@ -736,7 +683,7 @@
   background: transparent;
   /* hit target size, adjustable per media */
   --resizer-hit: var(--space-3);
-  display: var(--rt-shell-thin, var(--rt-shell-handle, flex));
+  display: var(--rt-shell-handle, flex);
   align-items: center;
   justify-content: center;
   overflow: visible;
@@ -826,7 +773,3 @@
   background-color: var(--focus-8);
 }
 
-/* Hide the handle while its pane is a thin sidebar. */
-.rt-ShellSidebar[data-thin] .rt-ShellResizer {
-  display: none;
-}

package/src/components/shell.tsx

@@ -6,8 +6,8 @@
  * - The Root is a CSS grid and renders its children as given, in JSX order.
  *   Each pane claims its own grid area, so the Root never scans or reorders
  *   children, any child renders, and a pane mounted after the Root works.
- * - State lives on each pane: `auto` (untouched), `open` or `closed`, and the
- *   Sidebar's `thin`. An untouched pane follows the window, resolved by the
+ * - State lives on each pane: `auto` (untouched), `open` or `closed`. An
+ *   untouched pane follows the window, resolved by the
  *   stylesheet, so first paint needs no script and no open-state callback
  *   fires on mount or on a resize.
  * - A pane is one element at every width. `overlay` is a posture of that

package/src/components/shell.types.ts

@@ -5,7 +5,7 @@ export type PresentationValue = 'fixed' | 'overlay' | 'stacked';
 export type ResponsivePresentation = PresentationValue | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PresentationValue>>;
 
 export type PaneMode = 'expanded' | 'collapsed';
-export type SidebarMode = 'collapsed' | 'thin' | 'expanded';
+export type SidebarMode = 'collapsed' | 'expanded';
 
 export type ResponsiveMode = PaneMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PaneMode>>;