@womp/kookie-ui 0.20.0 → 0.22.0

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';
@@ -8,9 +9,7 @@ import { Spinner } from '../spinner.js';
 import { VisuallyHidden } from '../visually-hidden.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';
 import type { ComponentPropsWithout, RemovedProps } from '../../helpers/component-props.js';
 import type { GetPropDefTypes } from '../../props/prop-def.js';
 
@@ -26,8 +25,7 @@ type PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {
   /** Element type to render as (e.g., 'a', 'span', etc.) */
   as?: C;
 } & BaseButtonOwnProps &
-  MarginProps &
-  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;
+  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | 'as'>;
 
 /**
  * BaseButton props interface that combines all available props
@@ -39,8 +37,7 @@ interface BaseButtonProps extends PolymorphicBaseButtonProps {}
  *
  * This is the foundational button component that handles all the complex logic
  * including loading states, accessibility, performance optimizations, and
- * polymorphic rendering. It's used by Button, IconButton, and other button
- * variants to ensure consistent behavior across the design system.
+ * polymorphic rendering. It's used by Button and Toggle to ensure consistent behavior across the design system.
  *
  * Key features:
  * - Loading state with spinner and accessibility announcements
@@ -70,31 +67,38 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
     as,
     color,
     radius,
-    flush,
     disabled: nativeDisabled,
     ...baseButtonProps
-  } = extractProps(props, baseButtonPropDefs, marginPropDefs);
+  } = extractProps(props, baseButtonPropDefs);
 
   // 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.
@@ -105,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
@@ -131,34 +145,27 @@ 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
       data-accent-color={color}
       data-radius={radius}
-      data-flush={flush ? 'true' : undefined}
       data-icon-start={iconStart || undefined}
       data-icon-end={iconEnd || undefined}
       {...baseButtonProps}
@@ -167,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' } : {})}
     >
@@ -185,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>
 
@@ -206,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 };

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

@@ -22,7 +22,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard {
+.kui-BaseCard {
   /* Layout */
   display: block;
   position: relative;
@@ -39,7 +39,7 @@
 
   /* Typography reset */
   font-family: var(--default-font-family);
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--font-weight-regular);
   font-style: normal;
   text-align: start;
 
@@ -73,29 +73,29 @@
  ***************************************************************************************************/
 
 @breakpoints {
-  .rt-BaseCard {
-    &:where(.rt-r-size-1) {
+  .kui-BaseCard {
+    &:where(.kui-r-size-1) {
       --base-card-padding-top: var(--surface-p-1);
       --base-card-padding-right: var(--surface-p-1);
       --base-card-padding-bottom: var(--surface-p-1);
       --base-card-padding-left: var(--surface-p-1);
       --base-card-border-radius: var(--radius-surface-1);
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --base-card-padding-top: var(--surface-p-2);
       --base-card-padding-right: var(--surface-p-2);
       --base-card-padding-bottom: var(--surface-p-2);
       --base-card-padding-left: var(--surface-p-2);
       --base-card-border-radius: var(--radius-surface-2);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --base-card-padding-top: var(--surface-p-3);
       --base-card-padding-right: var(--surface-p-3);
       --base-card-padding-bottom: var(--surface-p-3);
       --base-card-padding-left: var(--surface-p-3);
       --base-card-border-radius: var(--radius-surface-3);
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       --base-card-padding-top: var(--surface-p-4);
       --base-card-padding-right: var(--surface-p-4);
       --base-card-padding-bottom: var(--surface-p-4);
@@ -113,35 +113,35 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard:where(.rt-variant-outline) {
+.kui-BaseCard:where(.kui-variant-outline) {
   --card-border-width: 1px;
   --v-bg: transparent;
-  --v-bg-hover: var(--gray-2);
-  --v-bg-active: var(--gray-3);
-  --v-border: var(--gray-6);
-  --v-border-hover: var(--gray-7);
-  --v-border-active: var(--gray-8);
+  --v-bg-hover: var(--neutral-2);
+  --v-bg-active: var(--neutral-3);
+  --v-border: var(--neutral-6);
+  --v-border-hover: var(--neutral-7);
+  --v-border-active: var(--neutral-8);
   --v-focus-color: var(--focus-8);
   --v-focus-offset: -1px;
 }
 
-.rt-BaseCard:where(.rt-variant-soft) {
+.kui-BaseCard:where(.kui-variant-soft) {
   --card-border-width: 0px;
-  --v-bg: var(--gray-2);
-  --v-bg-hover: var(--gray-3);
-  --v-bg-active: var(--gray-3);
-  --v-focus-color: var(--gray-8);
+  --v-bg: var(--neutral-2);
+  --v-bg-hover: var(--neutral-3);
+  --v-bg-active: var(--neutral-3);
+  --v-focus-color: var(--neutral-8);
   --v-focus-offset: -1px;
 }
 
-.rt-BaseCard:where(.rt-variant-surface) {
+.kui-BaseCard:where(.kui-variant-surface) {
   --card-border-width: 1px;
-  --v-bg: var(--gray-1);
-  --v-bg-hover: var(--gray-2);
-  --v-bg-active: var(--gray-3);
-  --v-border: var(--gray-6);
-  --v-border-hover: var(--gray-7);
-  --v-border-active: var(--gray-7);
+  --v-bg: var(--neutral-1);
+  --v-bg-hover: var(--neutral-2);
+  --v-bg-active: var(--neutral-3);
+  --v-border: var(--neutral-6);
+  --v-border-hover: var(--neutral-7);
+  --v-border-active: var(--neutral-7);
   --v-focus-color: var(--focus-8);
   --v-focus-offset: -1px;
 }
@@ -155,7 +155,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard:where(.rt-variant-outline, .rt-variant-soft, .rt-variant-surface) {
+.kui-BaseCard:where(.kui-variant-outline, .kui-variant-soft, .kui-variant-surface) {
   /* Rest state */
   &::before {
     background-color: var(--v-bg);
@@ -195,13 +195,13 @@
   /* Tap highlight */
   @media (pointer: coarse) {
     &:where(:any-link, button, label):where(:active:not([data-state='open']))::before {
-      background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+      background-image: linear-gradient(var(--neutral-a4), var(--neutral-a4));
     }
   }
 }
 
 /* Soft variant ::after reset */
-.rt-BaseCard:where(.rt-variant-soft)::after {
+.kui-BaseCard:where(.kui-variant-soft)::after {
   box-shadow: none;
   border: none;
   outline: none;
@@ -214,7 +214,7 @@
  ***************************************************************************************************/
 
 /* Outline uses direct box-shadow on element */
-.rt-BaseCard:where(.rt-variant-outline) {
+.kui-BaseCard:where(.kui-variant-outline) {
   box-shadow: inset 0 0 0 1px var(--v-border);
 
   &::after {
@@ -239,11 +239,11 @@
 }
 
 /* Surface uses ::after for border ON TOP of children */
-.rt-BaseCard:where(.rt-variant-surface)::after {
+.kui-BaseCard:where(.kui-variant-surface)::after {
   box-shadow: inset 0 0 0 var(--base-card-border-width) var(--v-border);
 }
 
-.rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label) {
+.kui-BaseCard:where(.kui-variant-surface):where(:any-link, button, label) {
   @media (hover: hover) {
     &:where(:hover)::after {
       box-shadow: inset 0 0 0 var(--base-card-border-width) var(--v-border-hover);
@@ -264,10 +264,10 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard:where(.rt-variant-ghost) {
+.kui-BaseCard:where(.kui-variant-ghost) {
   --card-border-width: 0px;
-  --v-bg-hover: var(--gray-3);
-  --v-bg-active: var(--gray-4);
+  --v-bg-hover: var(--neutral-3);
+  --v-bg-active: var(--neutral-4);
   --v-focus-color: var(--focus-8);
   --v-focus-offset: -1px;
 
@@ -309,7 +309,7 @@
   /* Tap highlight */
   @media (pointer: coarse) {
     &:where(:any-link, button, label):where(:active:not([data-state='open']))::before {
-      background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+      background-image: linear-gradient(var(--neutral-a4), var(--neutral-a4));
     }
   }
 }
@@ -322,9 +322,9 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard:where(.rt-variant-raised) {
+.kui-BaseCard:where(.kui-variant-raised) {
   --card-border-width: 1px;
-  --card-background-color: var(--color-surface-solid);
+  --card-background-color: var(--color-surface);
   position: relative;
   top: var(--raised-elevation-offset);
   box-shadow: var(--shadow-2);
@@ -348,7 +348,7 @@
         box-shadow: var(--shadow-2);
 
         &::before {
-          background-color: var(--gray-2);
+          background-color: var(--neutral-2);
         }
 
         &::after {
@@ -359,7 +359,7 @@
 
     &:where([data-state='open']) {
       &::before {
-        background-color: var(--gray-3);
+        background-color: var(--neutral-3);
       }
 
       &::after {
@@ -369,7 +369,7 @@
 
     &:where(:active:not([data-state='open'])) {
       &::before {
-        background-color: var(--gray-3);
+        background-color: var(--neutral-3);
       }
 
       &::after {
@@ -380,7 +380,7 @@
 
   @media (pointer: coarse) {
     &:where(:any-link, button, label):where(:active:not([data-state='open']))::before {
-      background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+      background-image: linear-gradient(var(--neutral-a4), var(--neutral-a4));
     }
   }
 }
@@ -391,15 +391,15 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard:where(:any-link, button, label) {
+.kui-BaseCard:where(:any-link, button, label) {
   @media (pointer: coarse) {
     &:where(:active:not(:focus-visible, [data-state='open']))::before {
-      background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+      background-image: linear-gradient(var(--neutral-a4), var(--neutral-a4));
     }
   }
 }
 
 /* A disabled interactive card keeps its look but stops reacting to the pointer. */
-.rt-BaseCard:where(:any-link, button, label):where(:disabled, [data-disabled]) {
+.kui-BaseCard:where(:any-link, button, label):where(:disabled, [data-disabled]) {
   cursor: default;
 }