@womp/kookie-ui 0.13.3 → 0.14.1

package/src/components/kbd.props.tsx

@@ -1,9 +1,10 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
-const variants = ['classic', 'soft'] as const;
+const variants = ['raised', 'soft', 'classic'] as const;
 
 const kbdPropDefs = {
   ...asChildPropDef,
@@ -17,7 +18,8 @@ const kbdPropDefs = {
     type: 'enum',
     className: 'rt-variant',
     values: variants,
-    default: 'classic',
+    default: 'raised',
+    parseValue: parseVariant,
   },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;

package/src/components/navbar.css

@@ -51,6 +51,10 @@
   padding: var(--space-4) var(--space-5);
 }
 
+.rt-NavbarRoot[data-size='4'] .rt-NavbarContainer {
+  padding: var(--space-5) var(--space-6);
+}
+
 /* Slot overflow handling */
 .rt-NavbarLogo,
 .rt-NavbarActions {

package/src/components/navbar.props.tsx

@@ -1,7 +1,7 @@
 import type { PropDef } from '../props/prop-def.js';
 
 const positions = ['static', 'fixed', 'sticky'] as const;
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 
 const navbarRootPropDefs = {
   position: {

package/src/components/popover.props.tsx

@@ -16,6 +16,8 @@ const popoverContentPropDefs = {
     default: '2',
     responsive: true,
   },
+  material: { type: 'enum', values: panelBackgrounds, default: undefined },
+  /** @deprecated Use `material`. Removed in 0.15.0. */
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
@@ -26,6 +28,7 @@ const popoverContentPropDefs = {
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;
   size: PropDef<(typeof contentSizes)[number]>;
+  material: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 

package/src/components/popover.tsx

@@ -1,3 +1,4 @@
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Popover as PopoverPrimitive } from 'radix-ui';
@@ -61,11 +62,13 @@ interface PopoverContentProps
 const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentProps>(
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
-    const panelBackground = props.panelBackground ?? themeContext.panelBackground;
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
+    const panelBackground = props.material ?? props.panelBackground ?? themeContext.material ?? themeContext.panelBackground;
     const {
       className,
       forceMount,
       container,
+      material: _material,
       panelBackground: _,
       ...contentProps
     } = extractProps(props, popoverContentPropDefs);
@@ -109,6 +112,7 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
             ref={combinedRef}
             aria-labelledby={labelId}
             data-panel-background={panelBackground}
+            data-material={panelBackground}
             className={classNames('rt-PopperContent', 'rt-PopoverContent', className)}
           >
             <PopoverContentContext.Provider value={React.useMemo(() => ({ contentRef, setToolbarOffset, setLabelId }), [setToolbarOffset])}>

package/src/components/radio-cards.props.tsx

@@ -1,3 +1,5 @@
+import { parseVariant } from '../helpers/parse-variant.js';
+import { cardPropDefs } from './card.props.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
 import { gridPropDefs } from './grid.props.js';
@@ -5,13 +7,16 @@ import { gridPropDefs } from './grid.props.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
-const variants = ['outline', 'classic', 'ghost', 'soft', 'surface'] as const;
+// The same list as Card: a selectable card looks like any other card.
+const variants = cardPropDefs.variant.values;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const radioCardsRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
+  material: { type: 'enum', values: panelBackgrounds, default: undefined },
+  /** @deprecated Use `material`. Removed in 0.15.0. */
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   ...colorPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(160px, 1fr))' },
@@ -19,6 +24,7 @@ const radioCardsRootPropDefs = {
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  material: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
   gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;

package/src/components/radio-cards.tsx

@@ -1,3 +1,4 @@
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
@@ -36,10 +37,12 @@ interface RadioCardsRootProps
 const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
-    const panelBackground = props.panelBackground ?? themeContext.panelBackground;
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
+    const panelBackground = props.material ?? props.panelBackground ?? themeContext.material ?? themeContext.panelBackground;
     const {
       className,
       color,
+      material: _material,
       panelBackground: _,
       ...rootProps
     } = extractProps(props, radioCardsRootPropDefs, marginPropDefs);
@@ -49,6 +52,7 @@ const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootPro
           <RadioGroupPrimitive.Root
             data-accent-color={color}
             data-panel-background={panelBackground}
+            data-material={panelBackground}
             {...rootProps}
             ref={forwardedRef}
             className={classNames('rt-RadioCardsRoot', className)}

package/src/components/radio-group.props.tsx

@@ -1,15 +1,18 @@
+import { parseVariant } from '../helpers/parse-variant.js';
+import { baseRadioPropDefs } from './_internal/base-radio.props.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'solid', 'soft'] as const;
+// The same list as Radio: a group offers exactly what its items can draw.
+const variants = baseRadioPropDefs.variant.values;
 
 const radioGroupRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;

package/src/components/schemas/base-button.schema.ts

@@ -57,11 +57,11 @@ export const BaseButtonSchema = z
 
     /**
      * Visual variant that determines the button's appearance and context
-     * @default 'solid'
+     * @default 'raised'
      */
     variant: z
-      .enum(['classic', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override'])
-      .default('solid')
+      .enum(['raised', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override', 'classic'])
+      .default('raised')
       .describe("Visual variant that determines the button's appearance and context"),
 
     /**

package/src/components/segmented-control.props.tsx

@@ -17,17 +17,16 @@ const segmentedControlRootPropDefs = {
     default: 'horizontal',
     responsive: true,
   },
-  panelBackground: {
-    type: 'enum',
-    className: 'rt-panel-background',
-    values: ['solid', 'translucent'],
-  },
+  material: { type: 'enum', values: ['solid', 'translucent'] },
+  /** @deprecated Use `material`. Removed in 0.15.0. */
+  panelBackground: { type: 'enum', values: ['solid', 'translucent'] },
   ...radiusPropDef,
 } satisfies {
   disabled?: PropDef<boolean>;
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   orientation: PropDef<(typeof orientations)[number]>;
+  material: PropDef<'solid' | 'translucent'>;
   panelBackground: PropDef<'solid' | 'translucent'>;
 };
 

package/src/components/segmented-control.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
@@ -33,8 +35,16 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       value: valueProp,
       defaultValue: defaultValueProp,
       onValueChange: onValueChangeProp,
+      material: materialProp,
+      panelBackground,
       ...rootProps
     } = extractProps(props, segmentedControlRootPropDefs, marginPropDefs);
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
+    const material = materialProp ?? panelBackground;
+
+    if (props.variant !== undefined) {
+      warnDeprecated('SegmentedControl `variant` is deprecated and will be removed in 0.15.0. It has one value, so it chooses nothing.');
+    }
 
     const [value, setValue] = useControllableState({
       prop: valueProp,
@@ -46,6 +56,8 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       <ToggleGroupPrimitive.Root
         data-disabled={props.disabled || undefined}
         data-radius={radius}
+        data-panel-background={material}
+        data-material={material}
         ref={forwardedRef}
         className={classNames('rt-SegmentedControlRoot', className)}
         onValueChange={(value) => {

package/src/components/select.css

@@ -248,6 +248,27 @@
         height: var(--trigger-icon-size-3);
       }
     }
+    &:where(.rt-r-size-4) {
+      --select-trigger-height: var(--control-height-4);
+      gap: var(--component-gap-4);
+      font-size: var(--font-size-4);
+      line-height: var(--line-height-4);
+      letter-spacing: var(--letter-spacing-4);
+      border-radius: var(--radius-pill-4);
+
+      &:where(:not(.rt-variant-ghost)) {
+        padding-left: var(--space-4);
+        padding-right: var(--space-4);
+      }
+      &:where(.rt-variant-ghost) {
+        gap: var(--component-gap-ghost-4);
+        --select-trigger-ghost-padding-x: var(--space-3);
+      }
+      & :where(.rt-SelectIcon) {
+        width: var(--trigger-icon-size-4);
+        height: var(--trigger-icon-size-4);
+      }
+    }
   }
 }
 
@@ -282,7 +303,7 @@
         height: var(--select-indicator-icon-size-1);
       }
     }
-    &:where(.rt-r-size-2, .rt-r-size-3) {
+    &:where(.rt-r-size-2, .rt-r-size-3, .rt-r-size-4) {
       --select-content-padding: var(--space-2);
       --select-item-indicator-width: var(--space-5);
       --select-separator-margin-right: var(--space-3);
@@ -322,6 +343,18 @@
         height: var(--select-indicator-icon-size-3);
       }
     }
+    &:where(.rt-r-size-4) {
+      --select-item-height: var(--control-height-4);
+
+      & :where(.rt-SelectItem) {
+        font-size: var(--font-size-4);
+        letter-spacing: var(--letter-spacing-4);
+      }
+      & :where(.rt-SelectItemIndicatorIcon) {
+        width: var(--select-indicator-icon-size-4);
+        height: var(--select-indicator-icon-size-4);
+      }
+    }
   }
 }
 
@@ -331,11 +364,11 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* classic */
+/* raised */
 
-.rt-SelectTrigger:where(.rt-variant-classic) {
+.rt-SelectTrigger:where(.rt-variant-raised) {
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
   color: var(--accent-ink);
   background-color: var(--color-surface);
   box-shadow: var(--shadow-2);

package/src/components/select.props.tsx

@@ -1,3 +1,4 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import type React from 'react';
 
 import { colorPropDef } from '../props/color.prop.js';
@@ -5,7 +6,7 @@ import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 
 const selectRootPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
@@ -13,15 +14,13 @@ const selectRootPropDefs = {
   size: PropDef<(typeof sizes)[number]>;
 };
 
-const triggerVariants = ['classic', 'surface', 'soft', 'outline', 'ghost'] as const;
+const triggerVariants = ['raised', 'surface', 'soft', 'outline', 'ghost', 'classic'] as const;
 
 const selectTriggerPropDefs = {
-  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'surface' },
-  panelBackground: {
-    type: 'enum',
-    className: 'rt-panel-background',
-    values: ['solid', 'translucent'],
-  },
+  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'raised', parseValue: parseVariant },
+  material: { type: 'enum', values: ['solid', 'translucent'] },
+  /** @deprecated Use `material`. Removed in 0.15.0. */
+  panelBackground: { type: 'enum', values: ['solid', 'translucent'] },
   error: { type: 'boolean' },
   loading: { type: 'boolean' },
   disabled: { type: 'boolean' },
@@ -31,6 +30,7 @@ const selectTriggerPropDefs = {
   placeholder: { type: 'ReactNode' },
 } satisfies {
   variant: PropDef<(typeof triggerVariants)[number]>;
+  material: PropDef<'solid' | 'translucent'>;
   panelBackground: PropDef<'solid' | 'translucent'>;
   error: PropDef<boolean>;
   loading: PropDef<boolean>;
@@ -42,7 +42,7 @@ const selectTriggerPropDefs = {
 const contentVariants = ['solid', 'soft'] as const;
 
 const selectContentPropDefs = {
-  variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'solid' },
+  variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'soft' },
   ...colorPropDef,
 } satisfies {
   variant: PropDef<(typeof contentVariants)[number]>;

package/src/components/select.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
@@ -55,6 +57,8 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
       loading,
       disabled,
       readOnly,
+      material,
+      panelBackground: panelBackgroundProp,
       ...triggerProps
     } = extractProps(
       // Pass size value from the context to generate styles
@@ -65,8 +69,8 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
       marginPropDefs,
     );
 
-    // Extract panelBackground separately since it needs to be passed as data attribute
-    const { panelBackground } = props;
+    useDeprecatedPanelBackgroundWarning(panelBackgroundProp);
+    const panelBackground = material ?? panelBackgroundProp;
 
     const ariaProps = React.useMemo(
       () => ({
@@ -84,6 +88,7 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
           data-accent-color={color}
           data-radius={radius}
           data-panel-background={panelBackground}
+          data-material={panelBackground}
           data-error={error}
           data-loading={loading}
           {...triggerProps}
@@ -131,6 +136,7 @@ interface SelectContentProps
 }
 const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>(
   (props, forwardedRef) => {
+    if (props.variant !== undefined) warnDeprecated('The menu `variant` prop is deprecated and will be removed in 0.15.0. Menus highlight with a soft fill, and a solid one when the person asks for more contrast.');
     const context = React.useContext(SelectContext);
     const { className, children, color, container, ...contentProps } = extractProps(
       // Pass size value from the context to generate styles

package/src/components/shell.css

@@ -207,6 +207,12 @@
   gap: var(--space-2);
 }
 
+/* Shell.Scroll takes the room a pane's header and footer leave, and scrolls inside it. */
+.rt-ShellScroll {
+  flex: 1;
+  min-height: 0;
+}
+
 /* Closed is closed, in every posture: out of the layout, the tab order and the accessibility tree. */
 .rt-ShellPane[data-state='closed'] {
   display: none;

package/src/components/shell.tsx

@@ -47,6 +47,8 @@ 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 { 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';
 
 /* ── Root ──────────────────────────────────────────────────────────────────── */
@@ -54,6 +56,8 @@ 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`. */
+  size?: PaneSize;
 }
 
 /**
@@ -92,7 +96,7 @@ 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', style, onKeyDown, onFocus, ...props }, ref) => {
+const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, children, height = 'full', size = '2', style, onKeyDown, onFocus, ...props }, ref) => {
   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
@@ -354,6 +358,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
 
   return (
     <ShellStoreContext.Provider value={store}>
+      <ShellSizeContext.Provider value={size}>
       <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. */}
@@ -376,6 +381,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
           <div className="rt-ShellScrim" aria-hidden onClick={closeOverlays} />
         </div>
       </ShellInsetContext.Provider>
+      </ShellSizeContext.Provider>
     </ShellStoreContext.Provider>
   );
 });
@@ -480,12 +486,22 @@ const Rail = React.forwardRef<HTMLDivElement, RailProps>((props, ref) => {
       tabIndex={pane.overlaying ? -1 : domProps.tabIndex}
       style={{ ...style, '--rail-size': `${expandedSize}px` } as CSSPropertiesWithVars}
     >
-      <div className="rt-ShellRailContent">{children}</div>
+      <RailContent>{children}</RailContent>
     </div>
   );
 });
 Rail.displayName = 'Shell.Rail';
 
+/** The Rail's content carries the index, so the thin row styles can size themselves by it. */
+function RailContent({ children }: { children: React.ReactNode }) {
+  const size = React.useContext(ShellSizeContext);
+  return (
+    <div className={classNames('rt-ShellRailContent', `rt-r-size-${size}`)}>
+      <PaneChromeScope presentation="thin">{children}</PaneChromeScope>
+    </div>
+  );
+}
+
 /* ── Panel ─────────────────────────────────────────────────────────────────── */
 
 type HandleComponent = React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>>;
@@ -640,7 +656,9 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>((props, ref) =>
         } as CSSPropertiesWithVars
       }
     >
-      <div className="rt-ShellPanelContent">{content}</div>
+      <div className="rt-ShellPanelContent">
+        <PaneChromeScope>{content}</PaneChromeScope>
+      </div>
       {handle}
     </div>
   );
@@ -750,6 +768,9 @@ export {
   Inspector,
   Bottom,
   Trigger,
+  PaneHeader,
+  PaneFooter,
+  Scroll,
   useShell,
   useSidebarMode,
   useResponsivePresentation,