@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/text-field.tsx

@@ -8,11 +8,9 @@ import { composeRefs } from 'radix-ui/internal';
 import { textFieldRootPropDefs, textFieldSlotPropDefs, type TextFieldSlotScrubProps } from './text-field.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 { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { NotInputTextualAttributes } from '../helpers/input-attributes.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type TextFieldRootElement = React.ElementRef<'input'>;
@@ -22,11 +20,11 @@ type TextFieldRootOwnProps = GetPropDefTypes<typeof textFieldRootPropDefs> & {
   type?: 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 };
 type TextFieldInputProps = ComponentPropsWithout<'input', NotInputTextualAttributes | 'color' | 'defaultValue' | 'size' | 'type' | 'value'>;
-interface TextFieldRootProps extends TextFieldInputProps, MarginProps, TextFieldRootOwnProps {}
+interface TextFieldRootProps extends TextFieldInputProps, TextFieldRootOwnProps {}
 const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, textFieldRootPropDefs.size);
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const { children, className, color, radius, style, ...inputProps } = extractProps(props, textFieldRootPropDefs, marginPropDefs);
+  const { children, className, color, radius, style, ...inputProps } = extractProps(props, textFieldRootPropDefs);
 
   // Generate unique IDs for accessibility
   const errorId = React.useId();
@@ -67,8 +65,8 @@ const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>
 
     // Same selector as in the CSS to find the right slot
     const isRightSlot = target.closest(`
-        .rt-TextFieldSlot[data-side='right'],
-        .rt-TextFieldSlot:not([data-side='right']) ~ .rt-TextFieldSlot:not([data-side='left'])
+        .kui-TextFieldSlot[data-side='right'],
+        .kui-TextFieldSlot:not([data-side='right']) ~ .kui-TextFieldSlot:not([data-side='left'])
       `);
 
     const cursorPosition = isRightSlot ? input.value.length : 0;
@@ -88,15 +86,15 @@ const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>
       data-accent-color={color}
       data-radius={radius}
       style={style}
-      className={classNames('rt-TextFieldRoot', className, {
-        'rt-error': isInvalid,
+      className={classNames('kui-TextFieldRoot', className, {
+        'kui-error': isInvalid,
       })}
       onPointerDown={handlePointerDown}
     >
-      <input spellCheck="false" {...nativeInputProps} {...ariaProps} ref={composeRefs(inputRef, forwardedRef)} className="rt-reset rt-TextFieldInput" />
+      <input spellCheck="false" {...nativeInputProps} {...ariaProps} ref={composeRefs(inputRef, forwardedRef)} className="kui-reset kui-TextFieldInput" />
       {children}
       {inputProps.errorMessage && (
-        <div id={errorId} className="rt-TextFieldErrorMessage" role="alert">
+        <div id={errorId} className="kui-TextFieldErrorMessage" role="alert">
           {inputProps.errorMessage}
         </div>
       )}
@@ -371,7 +369,7 @@ const TextFieldSlot = React.forwardRef<TextFieldSlotElement, TextFieldSlotProps>
   const virtualCursor = isScrubbing
     ? ReactDOM.createPortal(
         <img
-          className="rt-TextFieldSlotScrubCursor"
+          className="kui-TextFieldSlotScrubCursor"
           src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='white' stroke-width='1' d='M0 12 L5 7 L5 10 L19 10 L19 7 L24 12 L19 17 L19 14 L5 14 L5 17 Z'/%3E%3C/svg%3E"
           alt=""
           style={{
@@ -398,7 +396,7 @@ const TextFieldSlot = React.forwardRef<TextFieldSlotElement, TextFieldSlotProps>
       data-scrubbing={isScrubbing || undefined}
       {...slotProps}
       ref={composeRefs(slotRef, forwardedRef)}
-      className={classNames('rt-TextFieldSlot', className)}
+      className={classNames('kui-TextFieldSlot', className)}
       onPointerDown={scrub ? handlePointerDown : undefined}
       onPointerMove={scrub ? handlePointerMove : undefined}
       onPointerUp={scrub ? handlePointerUp : undefined}

package/src/components/text.css

@@ -1,16 +1,16 @@
-.rt-Text {
+.kui-Text {
   font-family: var(--default-font-family);
   line-height: var(--line-height, var(--default-line-height));
   letter-spacing: var(--letter-spacing, inherit);
 
   /* `font` prop — all three resolve through the same tier-1 stacks. */
-  &:where(.rt-r-ff-sans) {
+  &:where(.kui-r-ff-sans) {
     font-family: var(--font-sans);
   }
-  &:where(.rt-r-ff-mono) {
+  &:where(.kui-r-ff-mono) {
     font-family: var(--font-mono);
   }
-  &:where(.rt-r-ff-serif) {
+  &:where(.kui-r-ff-serif) {
     font-family: var(--font-serif);
   }
 
@@ -19,22 +19,22 @@
   }
 
   /* Emphasis ladder. No colour and no emphasis sets nothing, so the colour is inherited. */
-  &:where(.rt-emphasis-loud) {
-    color: var(--gray-ink);
+  &:where(.kui-emphasis-loud) {
+    color: var(--neutral-ink);
   }
-  &:where(.rt-emphasis-medium) {
-    color: var(--gray-ink-muted);
+  &:where(.kui-emphasis-medium) {
+    color: var(--neutral-ink-muted);
   }
-  &:where(.rt-emphasis-quiet) {
-    color: var(--gray-ink-faint);
+  &:where(.kui-emphasis-quiet) {
+    color: var(--neutral-ink-faint);
   }
   &:where([data-accent-color]) {
     color: var(--accent-ink);
   }
-  &:where([data-accent-color].rt-emphasis-medium) {
+  &:where([data-accent-color].kui-emphasis-medium) {
     color: var(--accent-ink-muted);
   }
-  &:where([data-accent-color].rt-emphasis-quiet) {
+  &:where([data-accent-color].kui-emphasis-quiet) {
     color: var(--accent-ink-faint);
   }
 
@@ -44,7 +44,7 @@
     @media (pointer: coarse) {
       -webkit-tap-highlight-color: transparent;
       &:where(:active) {
-        outline: 0.75em solid var(--gray-a4);
+        outline: 0.75em solid var(--neutral-a4);
         outline-offset: -0.6em;
       }
     }
@@ -58,48 +58,48 @@
  ***************************************************************************************************/
 
 @breakpoints {
-  .rt-Text {
-    &:where(.rt-r-size-1) {
+  .kui-Text {
+    &:where(.kui-r-size-1) {
       font-size: var(--font-size-1);
       --line-height: var(--line-height-1);
       --letter-spacing: var(--letter-spacing-1);
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       font-size: var(--font-size-2);
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       font-size: var(--font-size-3);
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       font-size: var(--font-size-4);
       --line-height: var(--line-height-4);
       --letter-spacing: var(--letter-spacing-4);
     }
-    &:where(.rt-r-size-5) {
+    &:where(.kui-r-size-5) {
       font-size: var(--font-size-5);
       --line-height: var(--line-height-5);
       --letter-spacing: var(--letter-spacing-5);
     }
-    &:where(.rt-r-size-6) {
+    &:where(.kui-r-size-6) {
       font-size: var(--font-size-6);
       --line-height: var(--line-height-6);
       --letter-spacing: var(--letter-spacing-6);
     }
-    &:where(.rt-r-size-7) {
+    &:where(.kui-r-size-7) {
       font-size: var(--font-size-7);
       --line-height: var(--line-height-7);
       --letter-spacing: var(--letter-spacing-7);
     }
-    &:where(.rt-r-size-8) {
+    &:where(.kui-r-size-8) {
       font-size: var(--font-size-8);
       --line-height: var(--line-height-8);
       --letter-spacing: var(--letter-spacing-8);
     }
-    &:where(.rt-r-size-9) {
+    &:where(.kui-r-size-9) {
       font-size: var(--font-size-9);
       --line-height: var(--line-height-9);
       --letter-spacing: var(--letter-spacing-9);

package/src/components/text.props.tsx

@@ -18,7 +18,7 @@ const textPropDefs = {
   ...asChildPropDef,
   size: {
     type: 'enum',
-    className: 'rt-r-size',
+    className: 'kui-r-size',
     values: sizes,
     responsive: true,
   },

package/src/components/text.tsx

@@ -2,16 +2,14 @@ import * as React from 'react';
 import { Slot } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { textPropDefs } from './text.props.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 
 type TextElement = React.ElementRef<'span'>;
 type TextOwnProps = GetPropDefTypes<typeof textPropDefs>;
-interface CommonTextProps extends MarginProps, TextOwnProps {}
+interface CommonTextProps extends TextOwnProps {}
 type TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>;
 type TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>;
 type TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>;
@@ -19,7 +17,6 @@ type TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>;
 type TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps);
 
 // Pre-merge prop definitions at module level to avoid per-render allocation
-const mergedPropDefs = { ...textPropDefs, ...marginPropDefs };
 
 const Text = React.memo(
   React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
@@ -30,9 +27,9 @@ const Text = React.memo(
       as: Tag = 'span',
       color,
       ...textProps
-    } = extractProps(props, mergedPropDefs);
+    } = extractProps(props, textPropDefs);
 
-    const combinedClassName = className ? `rt-Text ${className}` : 'rt-Text';
+    const combinedClassName = className ? `kui-Text ${className}` : 'kui-Text';
 
     if (asChild) {
       return (

package/src/components/theme.tsx

@@ -106,7 +106,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>((prop
   } = props;
 
   // Each of these follows its prop but stays independently settable, so
-  // `ThemePanel` can change the theme at runtime. Syncing during render
+  // the context setters can change the theme at runtime. Syncing during render
   // rather than in an effect matters here: an effect would commit the old
   // theme first and re-render every consumer of the context a second time.
   const [appearance, setAppearance] = usePropSyncedState(appearanceProp);
@@ -264,7 +264,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           ref={composedRef}
           {...themeProps}
           className={classNames(
-            'radix-themes',
+            'kui-theme',
             {
               light: appearance === 'light',
               dark: appearance === 'dark',

package/src/components/toggle.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Toggle as TogglePrimitive } from 'radix-ui';
+import { Button } from './button.js';
+import type { ButtonIconOnlyProps, ButtonProps, ButtonRankProps } from './button.js';
+import { useToggleState } from '../hooks/use-toggle-state.js';
+
+type ToggleOwnProps = {
+  /** Whether the toggle is on. The controlled counterpart of `defaultPressed`. */
+  pressed?: boolean;
+  /** Fires when the pressed state changes, with the new state. */
+  onPressedChange?: (pressed: boolean) => void;
+  /** Whether the toggle starts on. The uncontrolled counterpart of `pressed`. */
+  defaultPressed?: boolean;
+};
+
+/**
+ * Toggle takes every `Button` prop except `as`. Set `iconOnly` for a square toggle holding only
+ * an icon; the type then requires `aria-label` or `aria-labelledby`.
+ */
+type ToggleProps = Omit<ButtonProps<'button'>, 'as' | 'variant' | 'emphasis' | 'iconOnly'> &
+  ButtonRankProps &
+  ButtonIconOnlyProps &
+  ToggleOwnProps;
+
+type ToggleElement = React.ElementRef<typeof Button>;
+
+/**
+ * A button that stays pressed: bold in a formatting bar, a filter that is on or off. One
+ * control, two states, `aria-pressed` from the primitive. It is a `Button` in every other
+ * respect, and wears Button's pressed look while on.
+ *
+ * Picking one of several is a `SegmentedControl`.
+ *
+ * @example
+ * ```tsx
+ * <Toggle defaultPressed={false}>Show hidden</Toggle>
+ *
+ * <Toggle iconOnly aria-label="Bold" pressed={bold} onPressedChange={setBold}>
+ *   <BoldIcon />
+ * </Toggle>
+ * ```
+ */
+const Toggle = React.forwardRef<ToggleElement, ToggleProps>(
+  ({ pressed, onPressedChange, defaultPressed, children, className, ...buttonProps }, forwardedRef) => {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = buttonProps as {
+      'aria-label'?: string;
+      'aria-labelledby'?: string;
+    };
+
+    // The label behind aria-labelledby is read once per id, not on every press.
+    const cachedLabelRef = React.useRef<string | null>(null);
+    React.useEffect(() => {
+      cachedLabelRef.current = null;
+    }, [ariaLabelledBy]);
+
+    /**
+     * The name announced when the pressed state changes: aria-label, then the label
+     * aria-labelledby points at, then visible text.
+     */
+    const getAccessibleName = React.useCallback(() => {
+      if (ariaLabel) return ariaLabel;
+      if (ariaLabelledBy) {
+        if (cachedLabelRef.current === null) {
+          cachedLabelRef.current = document.getElementById(ariaLabelledBy)?.textContent || 'Toggle';
+        }
+        return cachedLabelRef.current;
+      }
+      if (typeof children === 'string') return children;
+      if (React.isValidElement(children) && typeof (children.props as { children?: unknown })?.children === 'string') {
+        return (children.props as { children: string }).children;
+      }
+      return 'Toggle';
+    }, [ariaLabel, ariaLabelledBy, children]);
+
+    // Shared toggle state hook: accessibility announcements and controlled-state warnings.
+    const { handlePressedChange } = useToggleState({
+      pressed,
+      onPressedChange,
+      getAccessibleName,
+      componentName: 'Toggle',
+    });
+
+    return (
+      <TogglePrimitive.Root pressed={pressed} onPressedChange={handlePressedChange} defaultPressed={defaultPressed} asChild>
+        <Button {...(buttonProps as ButtonProps)} ref={forwardedRef} className={classNames('kui-Toggle', className)}>
+          {children}
+        </Button>
+      </TogglePrimitive.Root>
+    );
+  },
+);
+Toggle.displayName = 'Toggle';
+
+export { Toggle };
+export type { ToggleProps };

package/src/components/toolbar.css

@@ -7,7 +7,7 @@
  * standing level with a button beside it. A ToolbarSeparator is a gray hairline.
  */
 
-.rt-Toolbar {
+.kui-Toolbar {
   --toolbar-group-inset: calc(var(--space-2) / 2);
 
   display: flex;
@@ -25,28 +25,28 @@
     min-width: var(--toolbar-control-height);
   }
 
-  &:where(.rt-r-size-1) {
+  &:where(.kui-r-size-1) {
     --toolbar-control-height: var(--control-height-1);
     --toolbar-radius: var(--radius-control-1);
     --toolbar-gap: var(--space-2);
     --toolbar-title-gap: var(--space-3);
   }
 
-  &:where(.rt-r-size-2) {
+  &:where(.kui-r-size-2) {
     --toolbar-control-height: var(--control-height-2);
     --toolbar-radius: var(--radius-control-2);
     --toolbar-gap: var(--space-3);
     --toolbar-title-gap: var(--space-4);
   }
 
-  &:where(.rt-r-size-3) {
+  &:where(.kui-r-size-3) {
     --toolbar-control-height: var(--control-height-3);
     --toolbar-radius: var(--radius-control-3);
     --toolbar-gap: var(--space-3);
     --toolbar-title-gap: var(--space-5);
   }
 
-  &:where(.rt-r-size-4) {
+  &:where(.kui-r-size-4) {
     --toolbar-control-height: var(--control-height-4);
     --toolbar-radius: var(--radius-control-4);
     --toolbar-gap: var(--space-4);
@@ -60,7 +60,7 @@
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-.rt-ToolbarGroup {
+.kui-ToolbarGroup {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
@@ -68,7 +68,7 @@
   height: var(--toolbar-control-height);
   padding: var(--toolbar-group-inset);
   border-radius: var(--toolbar-radius);
-  background-color: var(--gray-a3);
+  background-color: var(--neutral-a3);
 
   &:where([data-orientation='vertical']) {
     flex-direction: column;
@@ -78,14 +78,14 @@
 }
 
 /* Over content, the well is a raised surface of its own, like a raised button beside it. */
-:where(.rt-Toolbar[data-backdrop]) .rt-ToolbarGroup {
-  background-color: var(--color-surface-solid);
+:where(.kui-Toolbar[data-backdrop]) .kui-ToolbarGroup {
+  background-color: var(--color-surface);
   box-shadow: var(--shadow-2);
 }
 
 /* A button in the group is hosted: the group's height minus the inset on both sides, and a
    concentric corner. Overriding the height variable (not `height`) keeps an icon button square. */
-.rt-ToolbarGroup > :where(.rt-BaseButton) {
+.kui-ToolbarGroup > :where(.kui-BaseButton) {
   --base-button-height: calc(var(--toolbar-control-height) - 2 * var(--toolbar-group-inset));
   border-radius: max(0px, calc(var(--toolbar-radius) - var(--toolbar-group-inset)));
 }
@@ -97,9 +97,9 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 /* The same gray a Separator draws, at the height of the glyphs beside it rather than the row. */
-.rt-ToolbarSeparator {
+.kui-ToolbarSeparator {
   flex-shrink: 0;
-  background-color: var(--gray-a5);
+  background-color: var(--neutral-a5);
 
   &:where([data-orientation='vertical']) {
     width: var(--border-width-standard);
@@ -119,7 +119,7 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 /* One line; truncates rather than wrapping, so the row stays one control row tall. */
-.rt-ToolbarTitle {
+.kui-ToolbarTitle {
   min-width: 0;
   flex-shrink: 1;
 }
@@ -127,10 +127,10 @@
 /* A title is a different kind of thing from the controls beside it, so it takes more air than
    they take from each other. It reaches inside a cluster, since a band is often written
    <Flex>{back}{title}</Flex>. No air against the row's own ends. */
-:where(.rt-Toolbar) .rt-ToolbarTitle:where(:not(:first-child)) {
+:where(.kui-Toolbar) .kui-ToolbarTitle:where(:not(:first-child)) {
   margin-inline-start: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
 }
 
-:where(.rt-Toolbar) .rt-ToolbarTitle:where(:not(:last-child)) {
+:where(.kui-Toolbar) .kui-ToolbarTitle:where(:not(:last-child)) {
   margin-inline-end: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
 }

package/src/components/toolbar.props.tsx

@@ -15,7 +15,7 @@ const toolbarRootPropDefs = {
    * Matches Button's sizes: 1 (28px) to 4 (48px). Unset inside `Shell.PaneHeader` or
    * `Shell.PaneFooter`, it rests one step above the Shell's `size`.
    */
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2' },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2' },
   /**
    * Direction of the row and of the arrow keys. Use `vertical` for a strip of tools along an edge.
    */

package/src/components/toolbar.tsx

@@ -6,16 +6,13 @@ import { Toolbar as ToolbarPrimitive } from 'radix-ui';
 
 import { toolbarRootPropDefs } from './toolbar.props.js';
 import { Button } from './button.js';
-import { IconButton } from './icon-button.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../helpers/theme-size.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { usePaneBandSize } from './_internal/pane-chrome.js';
 
 import type { ButtonProps } from './button.js';
 import type { TextProps } from './text.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';
 import type { ButtonRankProps } from './button.js';
@@ -61,8 +58,7 @@ type ToolbarOwnProps = GetPropDefTypes<typeof toolbarRootPropDefs>;
 
 interface ToolbarProps
   extends ComponentPropsWithout<typeof ToolbarPrimitive.Root, RemovedProps | 'orientation'>,
-    ToolbarOwnProps,
-    MarginProps {
+    ToolbarOwnProps {
   /**
    * Gives every control a surface of its own, for a row that content passes behind, such as
    * `Shell.PaneHeader float`. Buttons rest `raised` instead of `soft`, and a group's well is
@@ -98,7 +94,6 @@ const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwa
   const { className, orientation: _orientation, backdrop = false, children, ...rootProps } = extractProps(
     { ...props, size },
     toolbarRootPropDefs,
-    marginPropDefs,
   );
 
   const context = React.useMemo(() => ({ size, orientation, backdrop }), [size, orientation, backdrop]);
@@ -109,7 +104,7 @@ const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwa
       ref={forwardedRef}
       orientation={orientation}
       data-backdrop={backdrop || undefined}
-      className={classNames('rt-Toolbar', className)}
+      className={classNames('kui-Toolbar', className)}
     >
       <ToolbarContext.Provider value={context}>{children}</ToolbarContext.Provider>
     </ToolbarPrimitive.Root>
@@ -142,7 +137,7 @@ const ToolbarGroup = React.forwardRef<HTMLDivElement, ToolbarGroupProps>(
         data-disabled={disabled || undefined}
         {...props}
         ref={forwardedRef}
-        className={classNames('rt-ToolbarGroup', className)}
+        className={classNames('kui-ToolbarGroup', className)}
       >
         <ToolbarGroupContext.Provider value={group}>{children}</ToolbarGroupContext.Provider>
       </div>
@@ -163,7 +158,7 @@ type ToolbarTextButtonProps = ToolbarButtonBaseProps &
   iconOnly?: false;
 };
 
-/** An icon-only button: renders an `IconButton`, and the type requires an `aria-label`. */
+/** An icon-only button: renders `Button iconOnly`, and the type requires an `aria-label`. */
 type ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'fullWidth'> &
   ButtonRankProps & {
   iconOnly: true;
@@ -206,13 +201,12 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((p
     ...stateProps,
   } as const;
 
+  // The text and icon-only branches share every prop but the name; one Button renders both.
+  const buttonProps = { ...rest, ...(iconOnly ? { iconOnly: true } : {}), ...shared } as ButtonProps;
+
   return (
     <ToolbarPrimitive.Button asChild ref={forwardedRef} disabled={disabled || group?.disabled || undefined}>
-      {iconOnly ? (
-        <IconButton {...(rest as Omit<ToolbarIconButtonProps, 'iconOnly' | 'variant' | 'emphasis'>)} {...shared} />
-      ) : (
-        <Button {...(rest as Omit<ToolbarTextButtonProps, 'iconOnly' | 'variant' | 'emphasis'>)} {...shared} />
-      )}
+      <Button {...buttonProps} />
     </ToolbarPrimitive.Button>
   );
 });
@@ -235,7 +229,7 @@ const ToolbarSeparator = React.forwardRef<HTMLDivElement, ToolbarSeparatorProps>
       <ToolbarPrimitive.Separator
         {...props}
         ref={forwardedRef}
-        className={classNames('rt-ToolbarSeparator', className)}
+        className={classNames('kui-ToolbarSeparator', className)}
       />
     );
   },
@@ -276,7 +270,7 @@ const ToolbarTitle = React.forwardRef<HTMLSpanElement, ToolbarTitleProps>(
         truncate
         id={id}
         style={style}
-        className={classNames('rt-ToolbarTitle', className)}
+        className={classNames('kui-ToolbarTitle', className)}
       >
         {children}
       </Text>

package/src/components/tooltip.css

@@ -1,19 +1,19 @@
-.rt-TooltipContent {
+.kui-TooltipContent {
   box-sizing: border-box;
   padding: var(--space-2) var(--space-3);
-  background-color: var(--gray-12);
+  background-color: var(--neutral-12);
   border-radius: var(--radius-surface-1);
   z-index: 300; /* Tooltips always on top - above dialogs (100) and menus (200) */
 
   transform-origin: var(--radix-tooltip-content-transform-origin)
 }
 
-.rt-TooltipText {
-  color: var(--gray-1);
+.kui-TooltipText {
+  color: var(--neutral-1);
   user-select: none;
   cursor: default;
 }
 
-.rt-TooltipArrow {
-  fill: var(--gray-12);
+.kui-TooltipArrow {
+  fill: var(--neutral-12);
 }

package/src/components/tooltip.tsx

@@ -45,12 +45,12 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwarded
             {...tooltipContentProps}
             asChild={false}
             ref={forwardedRef}
-            className={classNames('rt-TooltipContent', className)}
+            className={classNames('kui-TooltipContent', className)}
           >
-            <Text as="p" className="rt-TooltipText" size="1">
+            <Text as="p" className="kui-TooltipText" size="1">
               {content}
             </Text>
-            <TooltipPrimitive.Arrow className="rt-TooltipArrow" />
+            <TooltipPrimitive.Arrow className="kui-TooltipArrow" />
           </TooltipPrimitive.Content>
         </Theme>
       </TooltipPrimitive.Portal>

package/src/components/virtual-menu.css

@@ -2,10 +2,10 @@
  * VirtualMenu - Virtualized menu component styles
  * 
  * Only positioning styles needed here.
- * Item appearance inherits from rt-BaseMenuItem in _internal/base-menu.css
+ * Item appearance inherits from kui-BaseMenuItem in _internal/base-menu.css
  */
 
-.rt-VirtualMenuRoot {
+.kui-VirtualMenuRoot {
   /* Scroll container */
   overflow: auto;
   position: relative;
@@ -24,13 +24,13 @@
   }
 }
 
-.rt-VirtualMenuViewport {
+.kui-VirtualMenuViewport {
   /* Container for absolutely positioned items */
   position: relative;
   width: 100%;
 }
 
-.rt-VirtualMenuItem {
+.kui-VirtualMenuItem {
   /* Absolute positioning for virtualization */
   position: absolute;
   top: 0;
@@ -40,8 +40,8 @@
   /* Ensure proper box model */
   box-sizing: border-box;
 
-  /* Inherit from rt-BaseMenuItem for consistent styling */
-  /* The rt-BaseMenuItem class provides: */
+  /* Inherit from kui-BaseMenuItem for consistent styling */
+  /* The kui-BaseMenuItem class provides: */
   /* - display: flex, align-items: center, gap */
   /* - min-height, padding */
   /* - cursor, user-select */