@womp/kookie-ui 0.22.0 → 0.23.0

package/src/components/combobox.css

@@ -12,6 +12,10 @@
 .kui-ComboboxContent {
   --combobox-list-max-height: calc(300px * var(--scale));
 
+  /* Stops the list's scroll chaining to the page. Not user-scrollable (overflow: hidden), so
+     Chromium does not composite it the way it does a scroller with this property. */
+  overscroll-behavior: contain;
+
   min-width: var(--radix-popover-trigger-width);
   max-height: var(--radix-popover-content-available-height);
   transform-origin: var(--radix-popover-content-transform-origin);
@@ -55,6 +59,15 @@
   scrollbar-color: var(--neutral-a8) transparent;
 }
 
+/* Chromium (the only engine with -webkit-app-region) composites a scroller whose
+   overscroll-behavior is not auto, even when the list fits: 2 layers. There the content above
+   stops the chain. WebKit ignores an ancestor that is not user-scrollable, so it keeps `contain`. */
+@supports (-webkit-app-region: drag) {
+  .kui-ComboboxScrollArea {
+    overscroll-behavior: auto;
+  }
+}
+
 .kui-ComboboxList {
   outline: 0;
 }

package/src/components/image.css

@@ -0,0 +1,33 @@
+/*
+ * Image: one <img>. It fills its box by `fit`, takes the theme's corner, rests on a quiet
+ * neutral fill until it has loaded, so the box holds its place and a failed image keeps it.
+ * No fade-in: v1 has had no motion since 0.15. The fill clears once loaded so a transparent
+ * picture shows what is behind it.
+ */
+.kui-Image {
+  display: block;
+  max-width: 100%;
+  object-fit: var(--image-object-fit, cover);
+  border-radius: var(--radius-2);
+  background-color: var(--neutral-a3);
+}
+
+.kui-Image:where([data-status='loaded']) {
+  background-color: transparent;
+}
+
+.kui-Image:where(.kui-r-fit-cover) {
+  --image-object-fit: cover;
+}
+.kui-Image:where(.kui-r-fit-contain) {
+  --image-object-fit: contain;
+}
+.kui-Image:where(.kui-r-fit-fill) {
+  --image-object-fit: fill;
+}
+.kui-Image:where(.kui-r-fit-scale-down) {
+  --image-object-fit: scale-down;
+}
+.kui-Image:where(.kui-r-fit-none) {
+  --image-object-fit: none;
+}

package/src/components/image.props.ts

@@ -0,0 +1,18 @@
+import { radiusPropDef } from '../props/radius.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as const;
+
+const imagePropDefs = {
+  ...radiusPropDef,
+  /**
+   * How the picture fills its box, as CSS `object-fit`.
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
+   */
+  fit: { type: 'enum', className: 'kui-r-fit', values: objectFitValues, default: 'cover' },
+} satisfies {
+  fit: PropDef<(typeof objectFitValues)[number]>;
+};
+
+export { imagePropDefs };

package/src/components/image.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
+
+import { imagePropDefs } from './image.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { widthPropDefs } from '../props/width.props.js';
+import { heightPropDefs } from '../props/height.props.js';
+
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { WidthProps } from '../props/width.props.js';
+import type { HeightProps } from '../props/height.props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type ImageElement = React.ElementRef<'img'>;
+type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs>;
+type ImageStatus = 'loading' | 'loaded' | 'error';
+
+interface ImageProps extends ComponentPropsWithout<'img', RemovedProps | 'width' | 'height' | 'src' | 'alt'>, WidthProps, HeightProps, ImageOwnProps {
+  src: string;
+  /** Required. Pass `""` for a decorative picture. */
+  alt: string;
+}
+
+/**
+ * A plain `<img>` that loads lazily, fills its box by `fit` and takes the theme's corner.
+ * One element and no wrapper: `width`, `height`, `className` and `style` all land on the
+ * `<img>` itself.
+ *
+ * Until it loads it rests on a quiet neutral fill, which is also what stays if it fails.
+ */
+const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {
+  const { className, alt, radius, loading = 'lazy', decoding = 'async', onLoad, onError, ...imageProps } = extractProps(props, imagePropDefs, widthPropDefs, heightPropDefs);
+
+  const [status, setStatus] = React.useState<ImageStatus>('loading');
+  const ref = React.useRef<HTMLImageElement>(null);
+
+  // A cached image, or one that finished before hydration, never fires onLoad for us.
+  useLayoutEffect(() => {
+    const img = ref.current;
+    if (img?.complete) setStatus(img.naturalWidth > 0 ? 'loaded' : 'error');
+    else setStatus('loading');
+  }, [props.src]);
+
+  const setRefs = useComposedRefs(ref, forwardedRef);
+
+  return (
+    <img
+      {...imageProps}
+      ref={setRefs}
+      alt={alt}
+      loading={loading}
+      decoding={decoding}
+      data-radius={radius}
+      data-status={status}
+      className={classNames('kui-Image', className)}
+      onLoad={(event) => {
+        setStatus('loaded');
+        onLoad?.(event);
+      }}
+      onError={(event) => {
+        setStatus('error');
+        onError?.(event);
+      }}
+    />
+  );
+});
+Image.displayName = 'Image';
+
+export { Image };
+export type { ImageProps };

package/src/components/index.css

@@ -20,6 +20,7 @@
 @import './dropdown-menu.css';
 @import './combobox.css';
 @import './heading.css';
+@import './image.css';
 @import './kbd.css';
 @import './link.css';
 @import './navbar.css';

package/src/components/index.tsx

@@ -24,6 +24,7 @@ export {
   ThickChevronRightIcon,
   ThickDividerHorizontalIcon,
 } from './icons.js';
+export { Image, type ImageProps } from './image.js';
 export { Kbd, type KbdProps } from './kbd.js';
 export { Link, type LinkProps } from './link.js';
 export * as Navbar from './navbar.js';

package/src/components/select.tsx

@@ -21,16 +21,45 @@ import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-p
 
 type SelectRootOwnProps = GetPropDefTypes<typeof selectRootPropDefs>;
 
-type SelectContextValue = SelectRootOwnProps;
+// Trigger and Content pass the size prop def as its own record. It is hoisted because
+// extractProps caches its compiled prop defs on the identity of each record it is given:
+// a literal written at the call site would be a new object, and a recompile, every render.
+const selectSizePropDefs = { size: selectRootPropDefs.size };
+
+interface SelectContextValue extends SelectRootOwnProps {
+  /** Whether the list is open. Undefined when Content is rendered outside a Kookie Select.Root. */
+  open?: boolean;
+}
 const SelectContext = React.createContext<SelectContextValue>({});
 
-interface SelectRootProps extends SelectPrimitive.SelectProps, SelectContextValue {}
+interface SelectRootProps extends SelectPrimitive.SelectProps, SelectRootOwnProps {}
 const SelectRoot: React.FC<SelectRootProps> = (props) => {
-  const { children, size: sizeProp, ...rootProps } = props;
+  const {
+    children,
+    size: sizeProp,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    ...rootProps
+  } = props;
   const size = useThemeSize(sizeProp, selectRootPropDefs.size);
+
+  // Root owns the open state and hands Radix a controlled `open`, so Content learns of a
+  // change in the same render Radix does. Radix's uncontrolled state reports changes from an
+  // effect, a render late, which would mount the open list once without its wrappers.
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const open = openProp ?? uncontrolledOpen;
+  const handleOpenChange = React.useCallback(
+    (next: boolean) => {
+      setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange],
+  );
+
   return (
-    <SelectPrimitive.Root {...rootProps}>
-      <SelectContext.Provider value={React.useMemo(() => ({ size }), [size])}>
+    <SelectPrimitive.Root {...rootProps} open={open} onOpenChange={handleOpenChange}>
+      <SelectContext.Provider value={React.useMemo(() => ({ size, open }), [size, open])}>
         {children}
       </SelectContext.Provider>
     </SelectPrimitive.Root>
@@ -61,7 +90,7 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
       // Pass size value from the context to generate styles
       { size: context?.size, ...props },
       // Pass size prop def to allow it to be extracted
-      { size: selectRootPropDefs.size },
+      selectSizePropDefs,
       selectTriggerPropDefs,
     );
 
@@ -143,12 +172,26 @@ const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>
       // Pass size value from the context to generate styles
       { size: context?.size, ...props },
       // Pass size prop def to allow it to be extracted
-      { size: selectRootPropDefs.size },
+      selectSizePropDefs,
       selectContentPropDefs,
     );
     const themeContext = useThemeContext();
+
+    // While closed, Radix still renders Content's children, into a detached fragment: the
+    // items must exist for the trigger's value label, typeahead and the native form select.
+    // Nothing in that fragment is ever shown, so the theme wrapper and the scroll area, with
+    // its two resize observers, are left out until the list opens.
+    if (context.open === false && !contentProps.forceMount) {
+      return (
+        <SelectPrimitive.Portal container={container}>
+          <SelectPrimitive.Content {...contentProps} asChild={false} ref={forwardedRef}>
+            {children}
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      );
+    }
+
     const resolvedColor = color || themeContext.accentColor;
-    const setThumbViewport = useThumbSync<HTMLDivElement>();
     return (
       <SelectPrimitive.Portal container={container}>
         <Theme asChild>
@@ -161,31 +204,12 @@ const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>
             className={classNames(
               'kui-PopperContent',
               'kui-BaseMenuContent',
-          'kui-variant-soft',
+              'kui-variant-soft',
               'kui-SelectContent',
               className,
             )}
           >
-            <ScrollAreaPrimitive.Root type="auto" className="kui-ScrollAreaRoot">
-              <SelectPrimitive.Viewport
-                asChild
-                className={classNames('kui-BaseMenuViewport', 'kui-SelectViewport')}
-              >
-                <ScrollAreaPrimitive.Viewport
-                  ref={setThumbViewport}
-                  className="kui-ScrollAreaViewport"
-                  style={{ overflowY: undefined }}
-                >
-                  {children}
-                </ScrollAreaPrimitive.Viewport>
-              </SelectPrimitive.Viewport>
-              <ScrollAreaPrimitive.Scrollbar
-                className="kui-ScrollAreaScrollbar"
-                orientation="vertical"
-              >
-                <ScrollAreaPrimitive.Thumb className="kui-ScrollAreaThumb" />
-              </ScrollAreaPrimitive.Scrollbar>
-            </ScrollAreaPrimitive.Root>
+            <SelectScrollArea>{children}</SelectScrollArea>
           </SelectPrimitive.Content>
         </Theme>
       </SelectPrimitive.Portal>
@@ -194,6 +218,30 @@ const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>
 );
 SelectContent.displayName = 'Select.Content';
 
+/** The open list's scroll area. Its own component so the thumb sync hook runs only while open. */
+function SelectScrollArea({ children }: { children: React.ReactNode }) {
+  const setThumbViewport = useThumbSync<HTMLDivElement>();
+  return (
+    <ScrollAreaPrimitive.Root type="auto" className="kui-ScrollAreaRoot">
+      <SelectPrimitive.Viewport
+        asChild
+        className={classNames('kui-BaseMenuViewport', 'kui-SelectViewport')}
+      >
+        <ScrollAreaPrimitive.Viewport
+          ref={setThumbViewport}
+          className="kui-ScrollAreaViewport"
+          style={{ overflowY: undefined }}
+        >
+          {children}
+        </ScrollAreaPrimitive.Viewport>
+      </SelectPrimitive.Viewport>
+      <ScrollAreaPrimitive.Scrollbar className="kui-ScrollAreaScrollbar" orientation="vertical">
+        <ScrollAreaPrimitive.Thumb className="kui-ScrollAreaThumb" />
+      </ScrollAreaPrimitive.Scrollbar>
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
 type SelectItemElement = React.ElementRef<typeof SelectPrimitive.Item>;
 interface SelectItemProps
   extends ComponentPropsWithout<typeof SelectPrimitive.Item, RemovedProps> {}

package/src/components/shell.css

@@ -88,6 +88,18 @@
   isolation: isolate;
 }
 
+/*
+ * Chromium (the only engine with -webkit-app-region) gives a scroller whose overscroll-behavior is
+ * not auto two composited layers even when its content fits: about 3 MB for a 1280x800 pane. There
+ * the Root's own overscroll-behavior already stops the chain, so the content does not need one.
+ * WebKit ignores an ancestor that is not user-scrollable, so it keeps `contain` above.
+ */
+@supports (-webkit-app-region: drag) {
+  .kui-ShellContent {
+    overscroll-behavior: auto;
+  }
+}
+
 /* ── Panes ─────────────────────────────────────────────────────────────────── */
 
 /*

package/src/components/slider.css

@@ -241,6 +241,7 @@
 .kui-SliderTick {
   position: absolute;
   top: 0;
+  transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;

package/src/components/slider.tsx

@@ -152,14 +152,7 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
         ref={announceRef}
         aria-live="polite"
         aria-atomic="true"
-        className="sr-only"
-        style={{
-          position: 'absolute',
-          left: '-10000px',
-          width: '1px',
-          height: '1px',
-          overflow: 'hidden',
-        }}
+        className="kui-sr-only"
       />
 
       <SliderPrimitive.Root
@@ -205,10 +198,8 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
               <button
                 key={tick.index}
                 className="kui-SliderTick"
-                style={{
-                  left: `${tick.percentage}%`,
-                  transform: 'translateX(-50%)',
-                }}
+                // Only `left` varies per tick; the centring transform lives in `.kui-SliderTick`.
+                style={{ left: `${tick.percentage}%` }}
                 onClick={() => {
                   const currentValues = sliderProps.value ?? sliderProps.defaultValue ?? [min];
                   const newValue = Array.isArray(currentValues)

package/src/components/spinner.css

@@ -8,6 +8,18 @@
   position: relative;
   width: var(--space-5);
   height: var(--space-5);
+  /* The rotation runs on the inner wheel, clipped here. Unclipped, a running transform animation
+     makes Chrome give its own layer to everything painted after it that it might overlap. The
+     leaves stay inside this box at every step; the margin keeps their anti-aliased edges on the
+     diagonal steps, which a clip at the box itself shaves. */
+  contain: paint;
+  overflow-clip-margin: 4px;
+}
+
+.kui-SpinnerWheel {
+  position: absolute;
+  inset: 0;
+  /* On the wheel, not the root: opacity on the clipping root costs Chrome a second layer per spinner. */
   opacity: var(--spinner-opacity);
   /* Single GPU-composited rotation instead of 8 opacity animations */
   animation: kui-spinner-rotate var(--spinner-animation-duration) steps(8, end) infinite;
@@ -73,7 +85,13 @@
 
 /* A busy indicator keeps moving when motion is reduced, more slowly. */
 @media (prefers-reduced-motion: reduce) {
-  .kui-Spinner {
+  .kui-SpinnerWheel {
     animation-duration: calc(var(--spinner-animation-duration) * 3);
   }
 }
+
+/* Children of a Spinner keep their space but are not shown while it spins. A class, not an inline style. */
+.kui-SpinnerHiddenChildren {
+  display: contents;
+  visibility: hidden;
+}

package/src/components/spinner.tsx

@@ -23,14 +23,16 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwarded
 
   const spinner = (
     <span {...spinnerProps} ref={forwardedRef} className={classNames('kui-Spinner', className)}>
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
-      <span className="kui-SpinnerLeaf" />
+      <span className="kui-SpinnerWheel">
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+        <span className="kui-SpinnerLeaf" />
+      </span>
     </span>
   );
 
@@ -43,7 +45,7 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwarded
          * `display: contents` removes the content from the accessibility tree in some browsers,
          * so we force remove it with `aria-hidden`
          */}
-        <span aria-hidden style={{ display: 'contents', visibility: 'hidden' }} inert={undefined}>
+        <span aria-hidden className="kui-SpinnerHiddenChildren" inert={undefined}>
           {children}
         </span>
 

package/src/styles/tokens/color.css

@@ -89,31 +89,10 @@
 
 .kui-theme,
 [data-accent-color]:where(:not([data-accent-color=''], [data-accent-color='gray'])) {
-  --focus-1: var(--accent-1);
-  --focus-2: var(--accent-2);
-  --focus-3: var(--accent-3);
-  --focus-4: var(--accent-4);
-  --focus-5: var(--accent-5);
-  --focus-6: var(--accent-6);
-  --focus-7: var(--accent-7);
+  /* Only the aliases components read; this block runs on every coloured element. */
   --focus-8: var(--accent-8);
-  --focus-9: var(--accent-9);
-  --focus-10: var(--accent-10);
-  --focus-11: var(--accent-11);
-  --focus-12: var(--accent-12);
-
-  --focus-a1: var(--accent-a1);
   --focus-a2: var(--accent-a2);
-  --focus-a3: var(--accent-a3);
-  --focus-a4: var(--accent-a4);
   --focus-a5: var(--accent-a5);
-  --focus-a6: var(--accent-a6);
-  --focus-a7: var(--accent-a7);
-  --focus-a8: var(--accent-a8);
-  --focus-a9: var(--accent-a9);
-  --focus-a10: var(--accent-a10);
-  --focus-a11: var(--accent-a11);
-  --focus-a12: var(--accent-a12);
 }
 
 .kui-theme ::selection {

package/src/styles/tokens/radius.css

@@ -43,15 +43,15 @@
   --radius-row-3: var(--radius-control-3);
   --radius-row-4: var(--radius-control-4);
 
-  --radius-surface-1: calc(10px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-2: calc(16px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-3: calc(22px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-4: calc(28px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-1: calc(8px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-2: calc(12px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-3: calc(16px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-4: calc(20px * var(--scale) * var(--radius-surface-factor));
 
-  --radius-overlay-1: calc(14px * var(--scale) * var(--radius-surface-factor));
-  --radius-overlay-2: calc(20px * var(--scale) * var(--radius-surface-factor));
-  --radius-overlay-3: calc(24px * var(--scale) * var(--radius-surface-factor));
-  --radius-overlay-4: calc(28px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-1: calc(12px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-2: calc(16px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-3: calc(20px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-4: calc(24px * var(--scale) * var(--radius-surface-factor));
 }
 
 [data-radius='none'] {