@womp/kookie-ui 0.17.0 → 0.18.0

package/src/components/select.css

@@ -5,7 +5,6 @@
   flex-shrink: 0;
   user-select: none;
   vertical-align: top;
-  line-height: var(--height);
 
   font-family: var(--default-font-family);
   font-weight: var(--font-weight-regular);
@@ -137,36 +136,34 @@
 
 .rt-SelectTrigger {
   color: var(--gray-12);
-
-  &:where(:not(.rt-variant-ghost)) {
-    box-sizing: border-box;
-    height: var(--select-trigger-height);
-  }
-  &:where(.rt-variant-ghost) {
-    box-sizing: border-box;
-    height: var(--select-trigger-height);
-    padding: 0 var(--select-trigger-ghost-padding-x);
-  }
+  box-sizing: border-box;
+  /* min-height, not height: a hard height clips text resized to 200%. */
+  min-height: var(--select-trigger-height);
+  gap: var(--select-trigger-gap);
+
+  /*
+   * The label's edge is bare, so under a full radius it pads wider (the curve cuts into the
+   * text). `--radius-full` is 0px below `full` and 9999px at `full`. The chevron's edge keeps
+   * the plain padding.
+   */
+  padding-left: 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);
 }
 
 @breakpoints {
   .rt-SelectTrigger {
     &:where(.rt-r-size-1) {
       --select-trigger-height: var(--control-height-1);
-      gap: var(--component-gap-1);
+      --select-trigger-px: var(--control-px-1);
+      --select-trigger-px-pill: var(--control-px-pill-1);
+      --select-trigger-gap: var(--control-gap-1);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       border-radius: var(--radius-pill-1);
 
-      &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-3);
-        padding-right: var(--space-3);
-      }
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-1);
-        --select-trigger-ghost-padding-x: var(--space-3);
-      }
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-1);
         height: var(--trigger-icon-size-1);
@@ -174,20 +171,14 @@
     }
     &:where(.rt-r-size-2) {
       --select-trigger-height: var(--control-height-2);
-      gap: var(--component-gap-2);
+      --select-trigger-px: var(--control-px-2);
+      --select-trigger-px-pill: var(--control-px-pill-2);
+      --select-trigger-gap: var(--control-gap-2);
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       border-radius: var(--radius-pill-2);
 
-      &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-4);
-        padding-right: var(--space-4);
-      }
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-2);
-        --select-trigger-ghost-padding-x: var(--space-3);
-      }
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-2);
         height: var(--trigger-icon-size-2);
@@ -195,20 +186,14 @@
     }
     &:where(.rt-r-size-3) {
       --select-trigger-height: var(--control-height-3);
-      gap: var(--component-gap-3);
+      --select-trigger-px: var(--control-px-3);
+      --select-trigger-px-pill: var(--control-px-pill-3);
+      --select-trigger-gap: var(--control-gap-3);
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
       border-radius: var(--radius-pill-3);
 
-      &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
-      }
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-3);
-        --select-trigger-ghost-padding-x: var(--space-4);
-      }
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-3);
         height: var(--trigger-icon-size-3);
@@ -216,20 +201,14 @@
     }
     &:where(.rt-r-size-4) {
       --select-trigger-height: var(--control-height-4);
-      gap: var(--component-gap-4);
+      --select-trigger-px: var(--control-px-4);
+      --select-trigger-px-pill: var(--control-px-pill-4);
+      --select-trigger-gap: var(--control-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-5);
-        padding-right: var(--space-5);
-      }
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-4);
-        --select-trigger-ghost-padding-x: var(--space-4);
-      }
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-4);
         height: var(--trigger-icon-size-4);
@@ -345,7 +324,7 @@
   }
 
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-2);
       box-shadow: var(--shadow-2);
     }
@@ -364,8 +343,7 @@
     background-color: var(--gray-a3);
     box-shadow: none;
     outline: none;
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
     top: 0;
   }
 
@@ -388,7 +366,7 @@
   }
 
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-4);
     }
   }
@@ -397,15 +375,14 @@
     background-color: var(--accent-4);
   }
 
-  &:where(:active:not([data-state='open'])) {
+  &:where(:active:not([data-state='open'], :disabled)) {
     background-color: var(--accent-5);
   }
 
   &:where(:disabled) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 
   &:where([data-placeholder]) {
@@ -431,7 +408,7 @@
   }
 
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-3);
     }
   }
@@ -445,15 +422,14 @@
     background-color: var(--accent-3);
   }
 
-  &:where(:active:not([data-state='open'])) {
+  &:where(:active:not([data-state='open'], :disabled)) {
     background-color: var(--accent-4);
   }
 
   &:where(:disabled) {
     color: var(--gray-a8);
     background-color: transparent;
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 }
 
@@ -464,7 +440,7 @@
   color: var(--accent-ink);
 
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-2);
       box-shadow: inset 0 0 0 1px var(--accent-7);
     }
@@ -475,7 +451,7 @@
     box-shadow: inset 0 0 0 1px var(--accent-7);
   }
 
-  &:where(:active:not([data-state='open'])) {
+  &:where(:active:not([data-state='open'], :disabled)) {
     background-color: var(--accent-3);
     box-shadow: inset 0 0 0 1px var(--accent-8);
   }
@@ -489,8 +465,7 @@
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a7);
     background-color: transparent;
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 
   &:where([data-placeholder]) {
@@ -509,7 +484,7 @@
   color: var(--accent-ink);
 
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-3);
       box-shadow: inset 0 0 0 1px var(--accent-7);
     }
@@ -520,7 +495,7 @@
     box-shadow: inset 0 0 0 1px var(--accent-8);
   }
 
-  &:where(:active:not([data-state='open'])) {
+  &:where(:active:not([data-state='open'], :disabled)) {
     background-color: var(--accent-4);
     box-shadow: inset 0 0 0 1px var(--accent-8);
   }
@@ -534,8 +509,7 @@
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a6);
     background-color: var(--gray-a2);
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 
   &:where([data-placeholder]) {
@@ -546,22 +520,50 @@
   }
 }
 
-/* all disabled */
+/* all disabled: a colour remap, never opacity, and the arrow cursor */
 .rt-SelectTrigger {
   &:where(:disabled) {
     & :where(.rt-SelectIcon) {
       color: var(--gray-a9);
     }
+    &:where([data-placeholder]) :where(.rt-SelectTriggerInner) {
+      color: var(--gray-a8);
+      opacity: 1;
+    }
   }
 }
 
-/* Error state styling */
-.rt-SelectTrigger:where([data-error="true"]) {
-  box-shadow: inset 0 0 0 1px var(--red-9);
-}
+/*
+ * Invalid. Keyed on `aria-invalid`, which the `error` prop sets, so both paths style the same.
+ * Only the border and the focus ring move; the fill stays the variant's.
+ */
+.rt-SelectTrigger:where([aria-invalid='true']) {
+  &:where(:not(.rt-variant-raised)) {
+    box-shadow: inset 0 0 0 1px var(--red-6);
+
+    @media (hover: hover) {
+      &:where(:hover:not(:disabled)) {
+        box-shadow: inset 0 0 0 1px var(--red-7);
+      }
+    }
+    &:where([data-state='open'], :active) {
+      box-shadow: inset 0 0 0 1px var(--red-7);
+    }
+  }
 
-.rt-SelectTrigger:where([data-error="true"]:focus-visible) {
-  outline: 2px solid var(--red-8);
+  &:where(.rt-variant-raised) {
+    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
+
+    @media (hover: hover) {
+      &:where(:hover:not(:disabled)) {
+        box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
+      }
+    }
+  }
+
+  &:where(:focus-visible) {
+    outline-color: var(--red-8);
+  }
 }
 
 /* Loading state styling */
@@ -595,7 +597,7 @@
 
 /* Forced colors support */
 @media (forced-colors: active) {
-  .rt-SelectTrigger:where([data-error="true"]) {
+  .rt-SelectTrigger:where([aria-invalid='true']) {
     border: 1px solid CanvasText;
   }
 }

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])}>
@@ -172,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-5);
-    }
-    &:where(.rt-r-size-2) {
-      --separator-size: var(--space-7);
-    }
-    &:where(.rt-r-size-3) {
-      --separator-size: var(--space-10);
-    }
-    &: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/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

package/src/components/slider.css

@@ -78,7 +78,7 @@
   &::after {
     content: '';
     position: absolute;
-    inset: calc(var(--slider-thumb-inset-factor) * var(--slider-track-size) * -1);
+    inset: calc(var(--slider-thumb-inset-factor) * var(--slider-thumb-overshoot-base, var(--slider-track-size)) * -1);
     background-color: var(--accent-solid-thumb);
     border-radius: var(--slider-thumb-radius);
     box-shadow: var(--shadow-2);
@@ -86,7 +86,8 @@
   }
 
   &:where(:focus-visible)::after {
-    box-shadow: var(--shadow-3), 0 0 0 var(--slider-focus-ring-inner) var(--accent-3), 0 0 0 var(--slider-focus-ring-outer) var(--focus-8);
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
   &:where(:active) {
@@ -100,31 +101,37 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/* Track thickness is v2's slider ladder (4/5/6/7). The thumb keeps v1's shape: its overshoot
+ * still reads v1's track thickness, so a thinner track does not shrink it. */
 @breakpoints {
   .rt-SliderRoot {
     &:where(.rt-r-size-1) {
-      --slider-track-size: var(--progress-slider-height-1);
+      --slider-track-size: var(--slider-track-1, calc(4px * var(--scale)));
+      --slider-thumb-overshoot-base: var(--progress-slider-height-1);
       --slider-radius: var(--progress-slider-radius-1);
       --slider-thumb-width: var(--space-4);
       --slider-thumb-height: var(--space-3);
       --slider-thumb-radius: calc(var(--radius-1) * 0.75);
     }
     &:where(.rt-r-size-2) {
-      --slider-track-size: var(--progress-slider-height-2);
+      --slider-track-size: var(--slider-track-2, calc(5px * var(--scale)));
+      --slider-thumb-overshoot-base: var(--progress-slider-height-2);
       --slider-radius: var(--progress-slider-radius-2);
       --slider-thumb-width: var(--space-5);
       --slider-thumb-height: calc(var(--space-3) + var(--space-2));
       --slider-thumb-radius: calc(var(--radius-2) * 0.75);
     }
     &:where(.rt-r-size-3) {
-      --slider-track-size: var(--progress-slider-height-3);
+      --slider-track-size: var(--slider-track-3, calc(6px * var(--scale)));
+      --slider-thumb-overshoot-base: var(--progress-slider-height-3);
       --slider-radius: var(--progress-slider-radius-3);
       --slider-thumb-width: var(--space-5);
       --slider-thumb-height: var(--space-4);
       --slider-thumb-radius: calc(var(--radius-3) * 0.75);
     }
     &:where(.rt-r-size-4) {
-      --slider-track-size: var(--progress-slider-height-4);
+      --slider-track-size: var(--slider-track-4, calc(7px * var(--scale)));
+      --slider-thumb-overshoot-base: var(--progress-slider-height-4);
       --slider-radius: var(--progress-slider-radius-4);
       --slider-thumb-width: calc(var(--space-5) + var(--space-2));
       --slider-thumb-height: calc(var(--space-4) + var(--space-2));
@@ -189,11 +196,11 @@
   }
 }
 
-/* all disabled Sliders */
+/* all disabled Sliders: a colour remap, never opacity, and a default cursor */
 
 [data-disabled] {
   .rt-SliderRoot:where(&) {
-    cursor: var(--cursor-disabled);
+    cursor: default;
   }
   .rt-SliderTrack:where(&) {
     background-color: var(--gray-a3) !important;
@@ -203,9 +210,10 @@
     background-color: var(--accent-a3) !important;
   }
   .rt-SliderThumb:where(&) {
-    cursor: var(--cursor-disabled);
+    cursor: default;
   }
   .rt-SliderThumb:where(&)::after {
+    cursor: default;
     background-color: var(--gray-3) !important;
     box-shadow: none !important;
   }
@@ -274,8 +282,8 @@
 }
 
 .rt-SliderTick:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+  outline-offset: var(--focus-ring-offset, 2px);
 }
 
 .rt-SliderTickMark {

package/src/components/slider.tsx

@@ -4,6 +4,7 @@ import { Slider as SliderPrimitive } from 'radix-ui';
 
 import { sliderPropDefs } from './slider.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { MarginProps } from '../props/margin.props.js';
@@ -22,7 +23,8 @@ interface SliderProps
   ticks?: Array<{ value: number; label?: string }>;
   unit?: string;
 }
-const Slider = React.forwardRef<SliderElement, SliderProps>((props, forwardedRef) => {
+const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, sliderPropDefs.size);
   const { className, color, radius, tabIndex, ...sliderProps } = extractProps(
     props,
     sliderPropDefs,

package/src/components/spinner.css

@@ -6,6 +6,8 @@
 .rt-Spinner {
   display: block;
   position: relative;
+  width: var(--space-5);
+  height: var(--space-5);
   opacity: var(--spinner-opacity);
   /* Single GPU-composited rotation instead of 8 opacity animations */
   animation: rt-spinner-rotate var(--spinner-animation-duration) steps(8, end) infinite;
@@ -75,26 +77,3 @@
     animation-duration: calc(var(--spinner-animation-duration) * 3);
   }
 }
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-Spinner {
-    &:where(.rt-r-size-1) {
-      width: var(--space-4);
-      height: var(--space-4);
-    }
-    &:where(.rt-r-size-2) {
-      width: var(--space-5);
-      height: var(--space-5);
-    }
-    &:where(.rt-r-size-3) {
-      width: calc(1.25 * var(--space-5));
-      height: calc(1.25 * var(--space-5));
-    }
-  }
-}

package/src/components/spinner.props.tsx

@@ -1,12 +1,8 @@
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
-
 const spinnerPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   loading: { type: 'boolean', default: true },
 } satisfies {
-  size: PropDef<(typeof sizes)[number]>;
   loading: PropDef<boolean>;
 };