@womp/kookie-ui 0.23.0 → 0.25.0

package/dist/esm/props/radius.prop.js

@@ -1,2 +1,2 @@
-import{a,b}from"../chunk-KRJTW535.js";import"../chunk-OS3FCYZY.js";export{a as radii,b as radiusPropDef};
+import{a,b}from"../chunk-KRJTW535.js";export{a as radii,b as radiusPropDef};
 //# sourceMappingURL=radius.prop.js.map

package/dist/esm/props/shadow.props.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-677CX2QF.js";import"../chunk-OS3FCYZY.js";export{a as shadowPropDefs};
+import{a}from"../chunk-677CX2QF.js";export{a as shadowPropDefs};
 //# sourceMappingURL=shadow.props.js.map

package/dist/esm/props/text-align.prop.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-WTCZAUFY.js";import"../chunk-OS3FCYZY.js";export{a as textAlignPropDef};
+import{a}from"../chunk-WTCZAUFY.js";export{a as textAlignPropDef};
 //# sourceMappingURL=text-align.prop.js.map

package/dist/esm/props/text-wrap.prop.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-SBRPXQWH.js";import"../chunk-OS3FCYZY.js";export{a as textWrapPropDef};
+import{a}from"../chunk-SBRPXQWH.js";export{a as textWrapPropDef};
 //# sourceMappingURL=text-wrap.prop.js.map

package/dist/esm/props/truncate.prop.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-SJXV4BWZ.js";import"../chunk-OS3FCYZY.js";export{a as truncatePropDef};
+import{a}from"../chunk-SJXV4BWZ.js";export{a as truncatePropDef};
 //# sourceMappingURL=truncate.prop.js.map

package/dist/esm/props/weight.prop.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-N6KH2EOU.js";import"../chunk-OS3FCYZY.js";export{a as weightPropDef};
+import{a}from"../chunk-N6KH2EOU.js";export{a as weightPropDef};
 //# sourceMappingURL=weight.prop.js.map

package/dist/esm/props/width.props.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-EKTVL6SS.js";import"../chunk-OS3FCYZY.js";export{a as widthPropDefs};
+import{a}from"../chunk-EKTVL6SS.js";export{a as widthPropDefs};
 //# sourceMappingURL=width.props.js.map

package/layout/utilities.css

@@ -6956,8 +6956,8 @@
         margin-right: var(--margin-right-override, var(--margin-right));
     }
     .sm\:kui-r-mx {
-        --margin-left: var(--ml-md);
-        --margin-right: var(--mr-md)
+        --margin-left: var(--ml-sm);
+        --margin-right: var(--mr-sm)
     }
     .sm\:kui-r-mx-0 {
         --margin-left: 0px;

package/layout.css

@@ -7065,8 +7065,8 @@
         margin-right: var(--margin-right-override, var(--margin-right));
     }
     .sm\:kui-r-mx {
-        --margin-left: var(--ml-md);
-        --margin-right: var(--mr-md)
+        --margin-left: var(--ml-sm);
+        --margin-right: var(--mr-sm)
     }
     .sm\:kui-r-mx-0 {
         --margin-left: 0px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",
@@ -164,21 +164,17 @@
     "@radix-ui/react-accordion": "^1.2.20",
     "@shadcn/react": "0.3.1",
     "@tanstack/react-virtual": "^3.14.13",
-    "@zag-js/react": "^1.44.0",
-    "@zag-js/splitter": "^1.44.0",
     "classnames": "^2.5.1",
     "cmdk": "^1.1.1",
-    "geist": "^1.7.2",
     "radix-ui": "^1.6.7",
     "react-dropzone": "^20.1.2",
-    "react-remove-scroll-bar": "^2.3.8",
     "zod": "^4.6.5"
   },
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "react": "^18.0 || ^19.0",
-    "react-dom": "^18.0 || ^19.0"
+    "react": "^19.0",
+    "react-dom": "^19.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/src/components/_internal/base-button.css

@@ -63,11 +63,6 @@
   font-style: normal;
   text-align: center;
 
-  /* RTL support for right-to-left languages */
-  :where([dir='rtl']) & {
-    flex-direction: row-reverse;
-  }
-
   /* Own stacking context so inner layers (spinner) stay contained */
   isolation: isolate;
 
@@ -101,9 +96,15 @@
     cursor: progress;
   }
 
-  /* The label, hidden in place while the spinner shows. `contents` keeps the button's flex gap. */
+  /* The loading spinner rides the icon ladder */
+  --spinner-size: var(--base-button-icon-size);
+
+  /* The label's wrapper. `contents` keeps the button's flex gap; hidden in place while the spinner shows. */
   & :where(.kui-BaseButtonContent) {
     display: contents;
+  }
+
+  &:where(.kui-loading) :where(.kui-BaseButtonContent) {
     visibility: hidden;
   }
 
@@ -463,3 +464,20 @@
     top: 0;
   }
 }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * FORCED COLORS: PRESSED                                                                          *
+ *                                                                                                 *
+ * Forced colors erase the pressed background, so a pressed toggle takes the Highlight pair.       *
+ * Last in the file, so it wins over every variant's pressed rule.                                 *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@media (forced-colors: active) {
+  .kui-BaseButton:where([data-state='on'], [aria-pressed='true']):where(:not([data-disabled], [aria-disabled='true'])) {
+    border-color: Highlight;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}

package/src/components/_internal/base-button.props.ts

@@ -6,7 +6,7 @@ import type { PropDef } from '../../props/prop-def.js';
 
 /**
  * Available button sizes for responsive design
- * Size 1: 24px - Compact for toolbars and dense interfaces
+ * Size 1: 28px - Compact for toolbars and dense interfaces
  * Size 2: 32px - Standard for most interface contexts
  * Size 3: 40px - Large for important actions and mobile touch targets
  * Size 4: 48px - Extra large for hero sections and maximum impact

package/src/components/_internal/base-button.tsx

@@ -6,6 +6,7 @@ import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
 import { baseButtonPropDefs } from './base-button.props.js';
 import { Flex } from '../flex.js';
 import { Spinner } from '../spinner.js';
+import { TickIcon } from '../icons.js';
 import { extractProps } from '../../helpers/extract-props.js';
 import { useThemeSizeProps } from '../../helpers/theme-size.js';
 
@@ -24,7 +25,19 @@ type PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {
   /** Element type to render as (e.g., 'a', 'span', etc.) */
   as?: C;
 } & BaseButtonOwnProps &
-  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | 'as'>;
+  BaseButtonDoneProps &
+  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | 'as' | 'done'>;
+
+interface BaseButtonDoneProps {
+  /**
+   * Shows a tick in place of the icon to say that the action finished. The tick takes the
+   * icon's box, so nothing moves, and the icon comes back as soon as `done` is false again. On
+   * an `iconOnly` button the tick replaces the content. It doesn't block the press. Screen
+   * readers don't announce the tick, so also change the label or `aria-label` (for example,
+   * `Copy` to `Copied`).
+   */
+  done?: boolean;
+}
 
 /**
  * BaseButton props interface that combines all available props
@@ -67,6 +80,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
     color,
     radius,
     disabled: nativeDisabled,
+    done = false,
     ...baseButtonProps
   } = extractProps(props, baseButtonPropDefs);
 
@@ -75,6 +89,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
   // stays native on form controls; on anything else (a link, an asChild child) the `disabled`
   // attribute does nothing, so aria-disabled carries the state and the click is stopped here.
   const loading = Boolean(props.loading);
+  const canLoad = props.loading !== undefined;
   const disabled = Boolean(nativeDisabled) || loading;
   const { onClick, 'aria-describedby': ariaDescribedByProp } = baseButtonProps as {
     onClick?: React.MouseEventHandler<HTMLElement>;
@@ -93,22 +108,19 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
 
   // Which edges start or end with an icon. A bare edge pads wider under a full radius; an edge
   // holding an icon keeps the plain padding (the icon already stands between text and curve).
-  // Only an svg is an icon. Rendering reads the children for an svg element at either end, so
-  // the server output is right for inline svgs; after mount the rendered DOM settles it, which
-  // also catches icon components (they render an svg) and rules out wrapped text (`<Text>`,
-  // `<Kbd>`, `<Trans>`), whose first node is not an svg.
+  // Rendering guesses from the children: an svg element, or a component at either end that is
+  // not a known text component (`<Text>`, `<Kbd>`, `<Trans>` and the like), counts as an icon,
+  // so the server output is right for icon components such as HugeIcons. After mount the
+  // rendered DOM settles it: only an svg is an icon, which corrects a wrong guess.
   const childEdges = React.useMemo(() => {
     const content =
       asChild && React.isValidElement(children) ? (children.props as { children?: React.ReactNode }).children : children;
     // Fragments are see-through: their own first and last children are the edges.
-    const flatten = (nodes: React.ReactNode): React.ReactNode[] =>
-      React.Children.toArray(nodes).flatMap((node) =>
-        React.isValidElement(node) && node.type === React.Fragment
-          ? flatten((node.props as { children?: React.ReactNode }).children)
-          : [node],
-      );
-    const items = flatten(content);
-    const isIcon = (node: React.ReactNode) => React.isValidElement(node) && node.type === 'svg';
+    const items = flattenFragments(content);
+    const isIcon = (node: React.ReactNode) =>
+      React.isValidElement(node) &&
+      (node.type === 'svg' ||
+        (typeof node.type !== 'string' && node.type !== React.Fragment && !TEXT_COMPONENTS.has(componentName(node.type))));
     return { iconStart: isIcon(items[0]), iconEnd: isIcon(items[items.length - 1]) };
   }, [asChild, children]);
   const [domEdges, setDomEdges] = React.useState<{ iconStart: boolean; iconEnd: boolean } | null>(null);
@@ -116,22 +128,62 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
   const composedRef = useComposedRefs(forwardedRef, elementRef as React.Ref<BaseButtonElement>);
   useLayoutEffect(() => {
     const element = elementRef.current;
-    // While loading the label sits in a wrapper; keep the edges read before it.
-    if (!element || loading) return;
-    const iconStart = edgeIsSvg(element, 'start');
-    const iconEnd = edgeIsSvg(element, 'end');
+    // While loading the sr-only copy and spinner follow the content, and while done the tick
+    // stands at the start; keep the edges read before either.
+    if (!element || loading || done) return;
+    const contentRoot = element.querySelector(':scope > .kui-BaseButtonContent') ?? element;
+    const iconStart = edgeIsSvg(contentRoot, 'start');
+    const iconEnd = edgeIsSvg(contentRoot, 'end');
     setDomEdges((prev) => (prev && prev.iconStart === iconStart && prev.iconEnd === iconEnd ? prev : { iconStart, iconEnd }));
   });
   const { iconStart, iconEnd } = domEdges ?? childEdges;
 
+  // Done swaps the icon for a tick in the same place: the leading icon when there is one, the
+  // whole content on an icon-only button. Without a leading icon the tick goes before the label.
+  const iconOnly = Boolean((baseButtonProps as Record<string, unknown>)['data-icon-only']);
+  const content = React.useMemo(() => {
+    if (!done) return children;
+    const tick = <TickIcon key="kui-done-tick" className="kui-BaseButtonTick" aria-hidden />;
+    const swap = (nodes: React.ReactNode): React.ReactNode => {
+      if (iconOnly) return tick;
+      const items = flattenFragments(nodes);
+      const first = items.findIndex((node) => !(typeof node === 'string' && !node.trim()));
+      if (iconStart && first !== -1) return items.map((node, index) => (index === first ? tick : node));
+      return [tick, ...items];
+    };
+    if (asChild && React.isValidElement(children)) {
+      const element = children as React.ReactElement<{ children?: React.ReactNode }>;
+      return React.cloneElement(element, undefined, swap(element.props.children));
+    }
+    return swap(children);
+  }, [done, children, iconOnly, iconStart, asChild]);
+
   // asChild takes precedence over as prop for Radix Slot integration
   // When asChild is true, we use Slot.Root to merge props onto the child element
   // When asChild is false, we render as the specified element (or button by default)
   const Comp = asChild ? Slot.Root : (as || 'button');
 
   // Only pass disabled for elements that support it
-  // This prevents invalid HTML attributes on unsupported elements
-  const shouldPassDisabled = asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);
+  // This prevents invalid HTML attributes on unsupported elements. With asChild, the child's own
+  // element type decides: a link child gets aria-disabled, not an invalid `disabled`.
+  const formElements = ['button', 'input', 'textarea', 'select'];
+  const renderedType = asChild ? (React.isValidElement(children) ? children.type : undefined) : (as || 'button');
+  const shouldPassDisabled = typeof renderedType === 'string' && formElements.includes(renderedType);
+
+  // With asChild, Radix Slot runs the child's own onClick before ours, so a disabled asChild
+  // button stops the click in the capture phase, before any bubble handler runs.
+  const { onClickCapture } = baseButtonProps as { onClickCapture?: React.MouseEventHandler<HTMLElement> };
+  const handleClickCapture = React.useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      if (asChild && disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      onClickCapture?.(event);
+    },
+    [asChild, disabled, onClickCapture],
+  );
 
   // Determine if we are rendering a real <button> element so we can set a safe
   // default type. Native <button> defaults to type="submit" which can cause
@@ -167,54 +219,86 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
       data-radius={radius}
       data-icon-start={iconStart || undefined}
       data-icon-end={iconEnd || undefined}
+      data-done={done || undefined}
       {...baseButtonProps}
       {...accessibilityProps}
       // After the spread: `data-disabled` styles `<Button asChild disabled>`, and a wrapping
       // Radix Toggle (asChild) passes `data-disabled={undefined}` that must not erase it.
       data-disabled={disabled || undefined}
       onClick={handleClick}
+      onClickCapture={handleClickCapture}
       ref={composedRef}
       className={classNames('kui-reset', 'kui-BaseButton', className)}
       {...(shouldPassDisabled && { disabled: nativeDisabled })}
       {...(isNativeButtonElement && !hasExplicitTypeAttribute ? { type: 'button' } : {})}
     >
-      {props.loading ? (
+      {asChild && !loading ? (
+        // asChild: Slot merges onto the single child, so the content can't take a wrapper or a sibling.
+        content
+      ) : (
         <>
           {/**
-           * We need a wrapper to set `visibility: hidden` to hide the button content whilst we show the `Spinner`.
-           * The button is a flex container with a `gap`, so we use `display: contents` to ensure the correct flex layout.
+           * A button that takes `loading` (true or false) keeps its content in this wrapper, so
+           * starting or stopping `loading` keeps the children in place (their state survives). A
+           * button that never loads skips it, which saves a node per button. `display: contents`
+           * keeps the button's flex
+           * gap; while loading the wrapper is `visibility: hidden` under the spinner.
            *
-           * However, `display: contents` removes the content from the accessibility tree in some browsers,
-           * so we force remove it with `aria-hidden` and re-add it in the tree with a `kui-sr-only` copy.
-           * Both are classes, not style attributes, so a loading button carries no inline style.
+           * `display: contents` removes the content from the accessibility tree in some browsers,
+           * so while loading the wrapper is `aria-hidden` and a `kui-sr-only` copy carries the name.
            */}
-          <span className="kui-BaseButtonContent" aria-hidden>
-            {children}
-          </span>
-
-          {/* The label stays the name; the hidden "Loading" only describes (aria-describedby reads hidden text). */}
-          <span className="kui-sr-only">
-            <span id={describedById} aria-hidden>
-              Loading
+          {canLoad ? (
+            <span className="kui-BaseButtonContent" aria-hidden={loading || undefined}>
+              {content}
             </span>
-            {children}
-          </span>
+          ) : (
+            content
+          )}
 
-          {/* Centered spinner overlay during loading state */}
-          <Flex asChild align="center" justify="center" position="absolute" inset="0">
-            <span>
-              <Spinner aria-hidden="true" />
-            </span>
-          </Flex>
+          {loading ? (
+            <>
+              {/* The label stays the name; the hidden "Loading" only describes (aria-describedby reads hidden text). */}
+              <span className="kui-sr-only">
+                <span id={describedById} aria-hidden>
+                  Loading
+                </span>
+                {children}
+              </span>
+
+              {/* Centered spinner overlay during loading state */}
+              <Flex asChild align="center" justify="center" position="absolute" inset="0">
+                <span>
+                  <Spinner aria-hidden="true" />
+                </span>
+              </Flex>
+            </>
+          ) : null}
         </>
-      ) : (
-        children
       )}
     </Comp>
   );
 });
 BaseButton.displayName = 'BaseButton';
 
+/** Components that render text, never an icon, so the render-time guess skips them. */
+const TEXT_COMPONENTS = new Set(['Text', 'Kbd', 'Code', 'Link', 'Em', 'Strong', 'Quote', 'Badge', 'Trans']);
+
+/** A component's display name, looking through forwardRef and memo. */
+function componentName(type: unknown): string {
+  if (!type || (typeof type !== 'function' && typeof type !== 'object')) return '';
+  const named = type as { displayName?: string; name?: string; render?: unknown; type?: unknown };
+  return named.displayName || named.name || componentName(named.render) || componentName(named.type);
+}
+
+/** The child list with fragments opened up: a fragment's own children are the edges. */
+function flattenFragments(nodes: React.ReactNode): React.ReactNode[] {
+  return React.Children.toArray(nodes).flatMap((node) =>
+    React.isValidElement(node) && node.type === React.Fragment
+      ? flattenFragments((node.props as { children?: React.ReactNode }).children)
+      : [node],
+  );
+}
+
 /** Whether the first or last rendered node of `element` (blank text and comments skipped) is an svg. */
 function edgeIsSvg(element: Element, edge: 'start' | 'end'): boolean {
   let node = edge === 'start' ? element.firstChild : element.lastChild;

package/src/components/_internal/base-checkbox.css

@@ -324,3 +324,26 @@
     cursor: default;
   }
 }
+
+/* Windows High Contrast drops box shadows and background colours, so the box takes a real
+ * border and system colours. */
+@media (forced-colors: active) {
+  .kui-BaseCheckboxRoot::before {
+    box-sizing: border-box;
+    border: 1px solid CanvasText;
+  }
+  .kui-BaseCheckboxRoot:where([data-state='checked'], [data-state='indeterminate'])::before {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+  .kui-BaseCheckboxRoot:where([data-state='checked'], [data-state='indeterminate']) :where(.kui-BaseCheckboxIndicator) {
+    color: HighlightText;
+  }
+  .kui-BaseCheckboxRoot:where(:disabled, [data-disabled])::before {
+    border-color: GrayText;
+    background-color: Canvas;
+  }
+  .kui-BaseCheckboxRoot:where(:disabled, [data-disabled]) :where(.kui-BaseCheckboxIndicator) {
+    color: GrayText;
+  }
+}

package/src/components/_internal/base-menu.css

@@ -297,9 +297,15 @@
   & :where(.kui-BaseMenuItem[data-highlighted]) {
     background-color: var(--accent-4);
 
-    /* In soft variant, lift muted text a step while keeping the hierarchy */
-    & :where(.kui-Text.kui-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
-      color: var(--neutral-11) !important;
+    /*
+     * In soft variant, lift muted text a step while keeping the hierarchy. This sets the ink
+     * token Text reads, not its color, so a caller's own color on the Text still wins.
+     */
+    & :where(.kui-Text.kui-emphasis-medium:not([data-accent-color])) {
+      --neutral-ink-muted: var(--neutral-11);
+    }
+    & :where(.kui-Text.kui-emphasis-medium[data-accent-color='gray']) {
+      --accent-ink-muted: var(--neutral-11);
     }
   }
 

package/src/components/_internal/base-radio.css

@@ -270,3 +270,25 @@
     box-shadow: inset 0 0 0 1px var(--radio-checked-active);
   }
 }
+
+/* Windows High Contrast drops box shadows and background colours, so the ring takes a real
+ * border and the dot a system colour. */
+@media (forced-colors: active) {
+  .kui-BaseRadioRoot::before {
+    box-sizing: border-box;
+    border: 1px solid CanvasText;
+  }
+  .kui-BaseRadioRoot:where(:checked, [data-state='checked'])::before {
+    border-color: Highlight;
+    background-color: Canvas;
+  }
+  .kui-BaseRadioRoot::after {
+    background-color: Highlight;
+  }
+  .kui-BaseRadioRoot:where(:disabled, [data-disabled])::before {
+    border-color: GrayText;
+  }
+  .kui-BaseRadioRoot:where(:disabled, [data-disabled])::after {
+    background-color: GrayText;
+  }
+}

package/src/components/_internal/base-sidebar-menu.css

@@ -185,3 +185,11 @@
   margin-top: 1px;
   margin-bottom: 1px;
 }
+
+/* A sub-menu's rows are list items, so their list is a list. Zero specificity: only the UA's
+   list indent is removed. */
+:where(.kui-SidebarMenuSubList) {
+  list-style: none;
+  margin-block: 0;
+  padding: 0;
+}

package/src/components/_internal/base-tab-list.css

@@ -34,6 +34,11 @@
 .kui-BaseTabListTriggerInner {
   position: absolute;
 
+  /* Without a width sizer beside it (non-text children), it sizes the trigger itself */
+  &:where(:only-child) {
+    position: static;
+  }
+
   :where(.kui-BaseTabListTrigger[data-state='inactive']) & {
     letter-spacing: var(--tab-inactive-letter-spacing);
     word-spacing: var(--tab-inactive-word-spacing);