@womp/kookie-ui 0.21.0 → 0.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",

package/postcss-breakpoints.cjs

@@ -79,25 +79,25 @@ function addPrefix(node, prefix) {
   }
 
   /**
-   * Should match responsive classes (rt-r- prefix):
+   * Should match responsive classes (kui-r- prefix):
    * ```
-   * .rt-r-size-1
-   * .rt-m-2
-   * .-rt-m-2
-   * .rt-Button.rt-r-size-1 (captures "rt-r-size-1")
+   * .kui-r-size-1
+   * .kui-m-2
+   * .-kui-m-2
+   * .kui-Button.kui-r-size-1 (captures "kui-r-size-1")
    * ```
    *
    * Should not match:
-   * .rt-Button
+   * .kui-Button
    */
-  const classNameRegexp = /\.(-?rt-r-[a-z0-9-]+)/g;
+  const classNameRegexp = /\.(-?kui-r-[a-z0-9-]+)/g;
 
   // Check for rules that use compound props on a component:
-  // - a component name (prefixed with "rt-" and pascal cased)
+  // - a component name (prefixed with "kui-" and pascal cased)
   // - followed by 2 or more prop selectors (lowercase, numbers, -)
   //
-  // e.g. ".rt-DialogContent.rt-r-size-2.gray"
-  if (/\.rt-(?:[A-Z][a-z]+)+(?:\.[a-z0-9-]+){2,}/.test(node.selector)) {
+  // e.g. ".kui-DialogContent.kui-r-size-2.gray"
+  if (/\.kui-(?:[A-Z][a-z]+)+(?:\.[a-z0-9-]+){2,}/.test(node.selector)) {
     throw Error(`
       "${node.selector}" looks like it uses compound props on a component.
       "@breakpoints" does not support compound props yet.

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

@@ -20,7 +20,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseButton {
+.kui-BaseButton {
   /* Reset all inherited styles to ensure consistent base */
   all: unset;
   box-sizing: border-box;
@@ -96,7 +96,7 @@
   }
 
   /* Loading: busy, not frozen */
-  &:where(.rt-loading) {
+  &:where(.kui-loading) {
     position: relative;
     cursor: progress;
   }
@@ -120,23 +120,23 @@
 }
 
 /* An edge holding an icon keeps the plain padding under a pill */
-.rt-BaseButton:where([data-icon-start]) {
+.kui-BaseButton:where([data-icon-start]) {
   padding-inline-start: var(--base-button-px);
 }
 
-.rt-BaseButton:where([data-icon-end]) {
+.kui-BaseButton:where([data-icon-end]) {
   padding-inline-end: var(--base-button-px);
 }
 
 /* An icon-only button is square: no inline padding, and aspect-ratio rather than a width ladder,
    so a hosted icon button whose height comes from its container (Toolbar, Chatbar) stays square. */
-.rt-BaseButton:where([data-icon-only]) {
+.kui-BaseButton:where([data-icon-only]) {
   padding-inline: 0;
   aspect-ratio: 1;
 }
 
 /* Full width mode */
-.rt-BaseButton:where(.rt-full-width) {
+.kui-BaseButton:where(.kui-full-width) {
   display: flex;
   width: 100%;
 }
@@ -151,8 +151,8 @@
  ***************************************************************************************************/
 
 @breakpoints {
-  .rt-BaseButton {
-    &:where(.rt-r-size-1) {
+  .kui-BaseButton {
+    &:where(.kui-r-size-1) {
       --base-button-height: var(--control-height-1);
       --base-button-px: var(--control-px-1);
       --base-button-px-pill: var(--control-px-pill-1);
@@ -161,7 +161,7 @@
       --base-button-radius: var(--radius-1);
     }
 
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --base-button-height: var(--control-height-2);
       --base-button-px: var(--control-px-2);
       --base-button-px-pill: var(--control-px-pill-2);
@@ -170,7 +170,7 @@
       --base-button-radius: var(--radius-2);
     }
 
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --base-button-height: var(--control-height-3);
       --base-button-px: var(--control-px-3);
       --base-button-px-pill: var(--control-px-pill-3);
@@ -179,7 +179,7 @@
       --base-button-radius: var(--radius-3);
     }
 
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       --base-button-height: var(--control-height-4);
       --base-button-px: var(--control-px-4);
       --base-button-px-pill: var(--control-px-pill-4);
@@ -200,7 +200,7 @@
  ***************************************************************************************************/
 
 /* Soft variant palette */
-.rt-BaseButton:where(.rt-variant-soft) {
+.kui-BaseButton:where(.kui-variant-soft) {
   --v-color: var(--accent-ink);
   --v-bg: var(--accent-3);
   --v-bg-a: var(--accent-a3);
@@ -214,7 +214,7 @@
 }
 
 /* Ghost variant palette */
-.rt-BaseButton:where(.rt-variant-ghost) {
+.kui-BaseButton:where(.kui-variant-ghost) {
   --v-color: var(--accent-ink);
   --v-bg: transparent;
   --v-bg-a: transparent;
@@ -228,7 +228,7 @@
 }
 
 /* Outline variant palette */
-.rt-BaseButton:where(.rt-variant-outline) {
+.kui-BaseButton:where(.kui-variant-outline) {
   --v-color: var(--accent-ink);
   --v-bg: transparent;
   --v-bg-a: transparent;
@@ -247,11 +247,11 @@
   --v-border-open-a: var(--accent-a7);
   --v-border-active: var(--accent-8);
   --v-border-active-a: var(--accent-a8);
-  --v-border-disabled: var(--gray-a7);
+  --v-border-disabled: var(--neutral-a7);
 }
 
 /* Surface variant palette */
-.rt-BaseButton:where(.rt-variant-surface) {
+.kui-BaseButton:where(.kui-variant-surface) {
   --v-color: var(--accent-ink);
   --v-bg: var(--accent-2);
   --v-bg-a: var(--accent-a2);
@@ -261,7 +261,7 @@
   --v-bg-active-a: var(--accent-a4);
   --v-bg-pressed: var(--accent-4);
   --v-bg-pressed-a: var(--accent-a4);
-  --v-bg-disabled: var(--gray-a2);
+  --v-bg-disabled: var(--neutral-a2);
   --v-border: var(--accent-6);
   --v-border-a: var(--accent-a6);
   --v-border-hover: var(--accent-7);
@@ -270,7 +270,7 @@
   --v-border-open-a: var(--accent-a8);
   --v-border-active: var(--accent-8);
   --v-border-active-a: var(--accent-a8);
-  --v-border-disabled: var(--gray-a6);
+  --v-border-disabled: var(--neutral-a6);
 }
 
 /***************************************************************************************************
@@ -283,7 +283,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseButton:where(.rt-variant-soft, .rt-variant-ghost, .rt-variant-outline, .rt-variant-surface) {
+.kui-BaseButton:where(.kui-variant-soft, .kui-variant-ghost, .kui-variant-outline, .kui-variant-surface) {
   /* Rest state */
   color: var(--v-color);
   background-color: var(--v-bg);
@@ -314,14 +314,14 @@
 
   /* Disabled state */
   &:where([data-disabled], [aria-disabled='true']) {
-    color: var(--gray-a8);
-    background-color: var(--v-bg-disabled, var(--gray-a3));
+    color: var(--neutral-a8);
+    background-color: var(--v-bg-disabled, var(--neutral-a3));
     box-shadow: none;
   }
 }
 
 /* Border variants: outline and surface */
-.rt-BaseButton:where(.rt-variant-outline, .rt-variant-surface) {
+.kui-BaseButton:where(.kui-variant-outline, .kui-variant-surface) {
   /* Rest state border */
   box-shadow: inset 0 0 0 1px var(--v-border);
 
@@ -358,15 +358,15 @@
  ***************************************************************************************************/
 
 /* Raised variant - surface at rest, then gray 2 on hover and gray 3 on press */
-.rt-BaseButton:where(.rt-variant-raised) {
+.kui-BaseButton:where(.kui-variant-raised) {
   position: relative;
   color: var(--accent-ink);
-  background-color: var(--color-surface-solid);
+  background-color: var(--color-surface);
   box-shadow: var(--shadow-2);
 
   @media (hover: hover) {
     &:where(:hover:not([data-disabled], [aria-disabled='true'])) {
-      background-color: var(--gray-2);
+      background-color: var(--neutral-2);
       box-shadow: var(--shadow-2);
     }
   }
@@ -374,20 +374,20 @@
   &:where([data-state='open']),
   &:where(:active:not([data-state='open'], [data-disabled], [aria-disabled='true'])),
   &:where([data-state='on']:not([data-disabled], [aria-disabled='true'])) {
-    background-color: var(--gray-3);
+    background-color: var(--neutral-3);
     box-shadow: var(--shadow-1);
   }
 
   @media (pointer: coarse) {
     &:where(:active:not([data-state='open'], [data-disabled], [aria-disabled='true'])) {
-      outline: var(--raised-shadow-blur-large) solid var(--gray-a4);
+      outline: var(--raised-shadow-blur-large) solid var(--neutral-a4);
       outline-offset: 0;
     }
   }
 
   &:where([data-disabled], [aria-disabled='true']) {
-    color: var(--gray-a8);
-    background-color: var(--gray-a3);
+    color: var(--neutral-a8);
+    background-color: var(--neutral-a3);
     box-shadow: none;
     top: 0;
   }
@@ -395,7 +395,7 @@
 
 /* Solid variant - accent solid at rest, solid-hover on hover, solid-active on press
    (gray resolves the three to step 12 and the filters carry the change) */
-.rt-BaseButton:where(.rt-variant-solid) {
+.kui-BaseButton:where(.kui-variant-solid) {
   background-color: var(--accent-solid);
   color: var(--accent-solid-contrast);
 
@@ -430,8 +430,8 @@
   }
 
   &:where([data-disabled], [aria-disabled='true']) {
-    color: var(--gray-a8);
-    background-color: var(--gray-a3);
+    color: var(--neutral-a8);
+    background-color: var(--neutral-a3);
     box-shadow: none;
     filter: none;
     opacity: 1;
@@ -444,16 +444,16 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseButton:where([data-disabled][aria-pressed], [aria-disabled='true'][aria-pressed]) {
+.kui-BaseButton:where([data-disabled][aria-pressed], [aria-disabled='true'][aria-pressed]) {
   transform: none;
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
+  color: var(--neutral-a8);
+  background-color: var(--neutral-a3);
   box-shadow: none;
   filter: none;
   opacity: 1;
 
   /* Raised needs special handling for top position */
-  &:where(.rt-variant-raised) {
+  &:where(.kui-variant-raised) {
     top: 0;
   }
 }

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

@@ -55,23 +55,23 @@ const baseButtonPropDefs = {
    * Button size for responsive design and interface density
    * Supports responsive objects: { initial: '1', sm: '2', md: '3', lg: '4' }
    */
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
   /**
    * Visual variant that determines the button's appearance and context
    */
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
+  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'solid' },
   ...accentColorPropDef,
   ...radiusPropDef,
   /**
    * Loading state that shows a spinner and disables interaction
    * Automatically sets disabled=true and provides accessibility announcements
    */
-  loading: { type: 'boolean', className: 'rt-loading', default: false },
+  loading: { type: 'boolean', className: 'kui-loading', default: false },
   /**
    * Full width mode that expands the button to fill its container
    * Useful for mobile layouts and form submissions
    */
-  fullWidth: { type: 'boolean', className: 'rt-full-width', default: false },
+  fullWidth: { type: 'boolean', className: 'kui-full-width', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from 'radix-ui';
+import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
 
 import { baseButtonPropDefs } from './base-button.props.js';
 import { Flex } from '../flex.js';
@@ -72,24 +73,32 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
 
   // Loading blocks activation but keeps the native `disabled` off, so the button keeps focus
   // and its place in the tab order (aria-disabled carries the state). An explicit `disabled`
-  // stays native.
+  // 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 disabled = Boolean(nativeDisabled) || loading;
-  const { onClick } = baseButtonProps as { onClick?: React.MouseEventHandler<HTMLElement> };
+  const { onClick, 'aria-describedby': ariaDescribedByProp } = baseButtonProps as {
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    'aria-describedby'?: string;
+  };
   const handleClick = React.useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
-      if (loading) {
+      if (disabled) {
         event.preventDefault();
         return;
       }
       onClick?.(event);
     },
-    [loading, onClick],
+    [disabled, onClick],
   );
 
   // 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).
-  const { iconStart, iconEnd } = React.useMemo(() => {
+  // 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.
+  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.
@@ -100,11 +109,21 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
           : [node],
       );
     const items = flatten(content);
-    const isIcon = (node: React.ReactNode) =>
-      React.isValidElement(node) && (node.type === 'svg' || typeof node.type !== 'string');
+    const isIcon = (node: React.ReactNode) => React.isValidElement(node) && node.type === 'svg';
     return { iconStart: isIcon(items[0]), iconEnd: isIcon(items[items.length - 1]) };
   }, [asChild, children]);
-
+  const [domEdges, setDomEdges] = React.useState<{ iconStart: boolean; iconEnd: boolean } | null>(null);
+  const elementRef = React.useRef<HTMLElement>(null);
+  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');
+    setDomEdges((prev) => (prev && prev.iconStart === iconStart && prev.iconEnd === iconEnd ? prev : { iconStart, iconEnd }));
+  });
+  const { iconStart, iconEnd } = domEdges ?? childEdges;
 
   // 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
@@ -126,28 +145,22 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
   const loadingId = React.useId();
   const describedById = loading ? `${loadingId}-loading` : undefined;
 
-  // Extract button text for accessibility announcements
-  const buttonText = React.useMemo(() => {
-    if (typeof children === 'string') return children;
-    if (React.isValidElement(children) && typeof (children.props as any)?.children === 'string') {
-      return (children.props as any).children;
-    }
-    return 'button';
-  }, [children]);
-
-  // Enhanced accessibility props for loading state
-  // These ensure screen readers announce the loading state properly
+  // Loading keeps the caller's name (aria-label, aria-labelledby or the label text) and adds
+  // aria-busy plus a description, as v2 does. A disabled element with no native `disabled`
+  // announces itself through aria-disabled.
   const accessibilityProps = React.useMemo(() => {
-    if (props.loading) {
+    if (loading) {
       return {
         'aria-busy': true,
         'aria-disabled': true,
-        'aria-describedby': describedById,
-        'aria-label': `${buttonText} (loading)`,
+        'aria-describedby': [ariaDescribedByProp, describedById].filter(Boolean).join(' '),
       };
     }
+    if (nativeDisabled && (!shouldPassDisabled || asChild)) {
+      return { 'aria-disabled': true };
+    }
     return {};
-  }, [props.loading, describedById, buttonText]);
+  }, [loading, describedById, ariaDescribedByProp, nativeDisabled, shouldPassDisabled, asChild]);
 
   return (
     <Comp
@@ -161,8 +174,8 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
       // Radix Toggle (asChild) passes `data-disabled={undefined}` that must not erase it.
       data-disabled={disabled || undefined}
       onClick={handleClick}
-      ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-BaseButton', className)}
+      ref={composedRef}
+      className={classNames('kui-reset', 'kui-BaseButton', className)}
       {...(shouldPassDisabled && { disabled: nativeDisabled })}
       {...(isNativeButtonElement && !hasExplicitTypeAttribute ? { type: 'button' } : {})}
     >
@@ -179,9 +192,11 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
             {children}
           </span>
 
-          {/* Enhanced accessibility for loading state */}
+          {/* The label stays the name; the hidden "Loading" only describes (aria-describedby reads hidden text). */}
           <VisuallyHidden>
-            <span id={describedById}>{buttonText} is loading, please wait...</span>
+            <span id={describedById} aria-hidden>
+              Loading
+            </span>
             {children}
           </VisuallyHidden>
 
@@ -200,5 +215,17 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
 });
 BaseButton.displayName = 'BaseButton';
 
+/** 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;
+  while (node) {
+    const blank =
+      node.nodeType === Node.COMMENT_NODE || (node.nodeType === Node.TEXT_NODE && !node.textContent?.trim());
+    if (!blank) break;
+    node = edge === 'start' ? node.nextSibling : node.previousSibling;
+  }
+  return node?.nodeType === Node.ELEMENT_NODE && (node as Element).localName === 'svg';
+}
+
 export { BaseButton };
 export type { BaseButtonProps };