@womp/kookie-ui 0.13.2 → 0.14.0

package/src/components/callout.css

@@ -106,22 +106,6 @@
       --callout-icon-height: var(--line-height-3);
       --callout-icon-size: var(--content-icon-size-3);
     }
-    &:where(.rt-r-size-4) {
-      row-gap: var(--space-3);
-      column-gap: var(--space-5);
-      padding: var(--space-6);
-      --callout-border-radius: var(--radius-surface-4);
-      --callout-icon-height: var(--line-height-4);
-      --callout-icon-size: var(--content-icon-size-4);
-    }
-    &:where(.rt-r-size-5) {
-      row-gap: var(--space-4);
-      column-gap: var(--space-6);
-      padding: var(--space-7);
-      --callout-border-radius: var(--radius-surface-5);
-      --callout-icon-height: var(--line-height-5);
-      --callout-icon-size: var(--content-icon-size-5);
-    }
   }
 }
 
@@ -153,24 +137,24 @@
   color: var(--accent-ink);
 }
 
-/* classic */
+/* raised */
 
-.rt-CalloutRoot:where(.rt-variant-classic) {
-  --classic-surface: var(--color-surface-solid);
-  background-color: var(--classic-surface);
+.rt-CalloutRoot:where(.rt-variant-raised) {
+  --raised-surface: var(--color-surface-solid);
+  background-color: var(--raised-surface);
   box-shadow: var(--shadow-2);
   color: var(--accent-ink);
   transition: var(--transition-text-field);
 
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    --classic-surface: var(--color-surface-translucent);
+    --raised-surface: var(--color-surface-translucent);
   }
 
   &:where([data-panel-background='solid'], [data-material='solid']) {
-    --classic-surface: var(--color-surface-solid);
+    --raised-surface: var(--color-surface-solid);
   }
 
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    --classic-surface: var(--color-surface-translucent);
+    --raised-surface: var(--color-surface-translucent);
   }
 }

package/src/components/callout.props.tsx

@@ -1,18 +1,19 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
-import { accentColorPropDef } from '../props/color.prop.js';
+import { grayAccentColorPropDef } from '../props/color.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['soft', 'surface', 'outline', 'classic'] as const;
+const variants = ['raised', 'soft', 'surface', 'outline', 'classic'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
 
 const calloutRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
-  ...accentColorPropDef,
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
+  ...grayAccentColorPropDef,
   material: { type: 'enum', values: materials, default: undefined },
   /**
    * @deprecated Use `material` prop instead. This prop will be removed in a future version.

package/src/components/callout.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from 'radix-ui';
@@ -37,8 +38,12 @@ interface CalloutRootProps
   /** Semantic role for the callout */
   role?: 'alert' | 'status' | 'note';
 }
+/** @deprecated Removed in 0.15.0. Use `Notice` for a condition that is true now, or `Text` for an aside. */
 const CalloutRoot = React.forwardRef<CalloutRootElement, CalloutRootProps>(
   (props, forwardedRef) => {
+    warnDeprecated(
+      'Callout is deprecated and will be removed in 0.15.0. Use Notice for a condition that is true now, or Text for an aside.',
+    );
     const {
       size = calloutRootPropDefs.size.default,
       live = 'polite',

package/src/components/card.props.tsx

@@ -1,16 +1,17 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5'] as const;
-const variants = ['surface', 'outline', 'classic', 'ghost', 'soft'] as const;
+const variants = ['raised', 'surface', 'outline', 'ghost', 'soft', 'classic'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
 
 const cardPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   material: { type: 'enum', values: materials, default: undefined },
   flush: { type: 'boolean', default: false },

package/src/components/chatbar.css

@@ -390,7 +390,7 @@
     }
   }
 
-  /* Focus state - outline ring (classic has its own box-shadow ring) */
+  /* Focus state - outline ring (raised has its own box-shadow ring) */
   &:where(:focus-within) {
     outline: 2px solid var(--v-focus-color, var(--focus-8));
     outline-offset: -1px;
@@ -457,8 +457,8 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* Classic variant - uses --color-surface and shadow */
-.rt-ChatbarBox:where(.rt-variant-classic) {
+/* Raised variant - uses --color-surface and shadow */
+.rt-ChatbarBox:where(.rt-variant-raised) {
   --text-area-border-width: 0px;
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
@@ -521,7 +521,7 @@
     box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
   }
 
-  & .rt-ChatbarBox:where(.rt-variant-classic) {
+  & .rt-ChatbarBox:where(.rt-variant-raised) {
     background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
   }
 

package/src/components/chatbar.tsx

@@ -1,3 +1,4 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { LazyMotion, MotionConfig, domAnimation, m } from 'motion/react';
@@ -213,7 +214,8 @@ interface ChatbarRootBaseProps {
   onSubmit?: (payload: ChatbarSubmitPayload) => void;
 
   size?: '1' | '2' | '3';
-  variant?: 'surface' | 'outline' | 'classic' | 'ghost' | 'soft';
+  /** `classic` is a deprecated alias of `raised`, removed in 0.15.0. */
+  variant?: 'raised' | 'surface' | 'outline' | 'ghost' | 'soft' | 'classic';
   /** Accent color for the control (matches TextArea) */
   color?: (typeof accentColors)[number];
   /** Optional radius override (matches TextArea) */
@@ -728,7 +730,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
               ) : null}
               <div {...(dropzone ? getRootProps() : {})} style={{ width: '100%', flex: '1 1 auto', minHeight: 0 }} onPointerDown={handleContainerPointerDown}>
                 <m.div
-                  className={classNames('rt-ChatbarBox', `rt-variant-${variant ?? 'surface'}`)}
+                  className={classNames('rt-ChatbarBox', `rt-variant-${parseVariant(variant ?? 'raised')}`)}
                   style={{ position: 'relative' }}
                   data-accent-color={color}
                   data-radius={radius}

package/src/components/checkbox-cards.props.tsx

@@ -1,3 +1,5 @@
+import { parseVariant } from '../helpers/parse-variant.js';
+import { cardPropDefs } from './card.props.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
 import { gridPropDefs } from './grid.props.js';
@@ -5,13 +7,16 @@ import { gridPropDefs } from './grid.props.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
-const variants = ['outline', 'classic', 'ghost', 'soft', 'surface'] as const;
+// The same list as Card: a selectable card looks like any other card.
+const variants = cardPropDefs.variant.values;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const checkboxCardsRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
+  material: { type: 'enum', values: panelBackgrounds, default: undefined },
+  /** @deprecated Use `material`. Removed in 0.15.0. */
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   ...colorPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(200px, 1fr))' },
@@ -19,6 +24,7 @@ const checkboxCardsRootPropDefs = {
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  material: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
   gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;

package/src/components/checkbox-cards.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Context } from 'radix-ui/internal';
@@ -46,11 +47,13 @@ interface CheckboxCardsRootProps
 const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(
   (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
     const themeContext = useThemeContext();
-    const panelBackground = props.panelBackground ?? themeContext.panelBackground;
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
+    const panelBackground = props.material ?? props.panelBackground ?? themeContext.material ?? themeContext.panelBackground;
     const {
       __scopeCheckboxCards,
       className,
       color,
+      material: _material,
       panelBackground: _,
       ...rootProps
     } = extractProps(props, checkboxCardsRootPropDefs, marginPropDefs);
@@ -66,6 +69,7 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
             {...checkboxGroupScope}
             data-accent-color={color}
             data-panel-background={panelBackground}
+            data-material={panelBackground}
             {...rootProps}
             ref={forwardedRef}
             className={classNames('rt-CheckboxCardsRoot', className)}

package/src/components/code.props.tsx

@@ -1,5 +1,5 @@
 import { asChildPropDef } from '../props/as-child.prop.js';
-import { accentColorPropDef } from '../props/color.prop.js';
+import { grayAccentColorPropDef } from '../props/color.prop.js';
 import { emphasisPropDef } from '../props/emphasis.prop.js';
 import { textWrapPropDef } from '../props/text-wrap.prop.js';
 import { truncatePropDef } from '../props/truncate.prop.js';
@@ -20,7 +20,7 @@ const codePropDefs = {
   },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
   ...weightPropDef,
-  ...accentColorPropDef,
+  ...grayAccentColorPropDef,
   ...emphasisPropDef,
   ...truncatePropDef,
   ...textWrapPropDef,

package/src/components/combobox.props.tsx

@@ -1,3 +1,4 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import { colorPropDef } from '../props/color.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
 import { widthPropDefs } from '../props/width.props.js';
@@ -5,7 +6,7 @@ import { heightPropDefs } from '../props/height.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 
 /**
  * Shared responsive sizing inherited by Combobox.Root.
@@ -16,13 +17,13 @@ const comboboxRootPropDefs = {
   size: PropDef<(typeof sizes)[number]>;
 };
 
-const triggerVariants = ['classic', 'surface', 'soft', 'outline', 'ghost'] as const;
+const triggerVariants = ['raised', 'surface', 'soft', 'outline', 'ghost', 'classic'] as const;
 
 /**
  * Token-aware props specific to Combobox.Trigger.
  */
 const comboboxTriggerPropDefs = {
-  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'surface' },
+  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'raised', parseValue: parseVariant },
   panelBackground: {
     type: 'enum',
     className: 'rt-panel-background',
@@ -49,6 +50,8 @@ const comboboxTriggerPropDefs = {
   placeholder: PropDef<string>;
 };
 
+// The list is a menu, and menus stop at size 3.
+const contentSizes = ['1', '2', '3'] as const;
 const contentVariants = ['solid', 'soft'] as const;
 const materials = ['solid', 'translucent'] as const;
 
@@ -56,8 +59,8 @@ const materials = ['solid', 'translucent'] as const;
  * Styling props for the dropdown surface rendered by Combobox.Content.
  */
 const comboboxContentPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'solid' },
+  size: { type: 'enum', className: 'rt-r-size', values: contentSizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'soft' },
   ...colorPropDef,
   material: { type: 'enum', values: materials, default: undefined },
   /** @deprecated Use `material`. */
@@ -67,7 +70,7 @@ const comboboxContentPropDefs = {
   maxWidth: { ...widthPropDefs.maxWidth, default: '480px' },
   ...heightPropDefs,
 } satisfies {
-  size: PropDef<(typeof sizes)[number]>;
+  size: PropDef<(typeof contentSizes)[number]>;
   variant: PropDef<(typeof contentVariants)[number]>;
   material: PropDef<(typeof materials)[number] | undefined>;
   panelBackground: PropDef<(typeof materials)[number] | undefined>;

package/src/components/combobox.tsx

@@ -17,6 +17,7 @@
  * items are never lit at once and Enter always picks the lit item.
  */
 
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Popover as PopoverPrimitive } from 'radix-ui';
@@ -495,7 +496,14 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
   useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
   const material = props.material ?? props.panelBackground ?? themeContext.material ?? themeContext.panelBackground;
-  const size = props.size ?? ctx.size ?? comboboxContentPropDefs.size.default;
+  // Menus stop at size 3; a size 4 field opens a size 3 list.
+  const rootSize = ctx.size === '4' ? '3' : ctx.size;
+  const size = props.size ?? rootSize ?? comboboxContentPropDefs.size.default;
+  if (props.variant !== undefined) {
+    warnDeprecated(
+      'The menu `variant` prop is deprecated and will be removed in 0.15.0. Menus highlight with a soft fill, and a solid one when the person asks for more contrast.',
+    );
+  }
   const variant = props.variant ?? comboboxContentPropDefs.variant.default;
 
   const {
@@ -615,7 +623,7 @@ const ComboboxInput = React.forwardRef<ComboboxInputElement, ComboboxInputProps>
     const search = React.useContext(ComboboxSearchContext);
     const contentContext = useComboboxContentContext();
 
-    const contentVariant = contentContext?.variant ?? 'solid';
+    const contentVariant = contentContext?.variant ?? 'soft';
     const textFieldVariant = inputVariant ?? (contentVariant === 'solid' ? 'surface' : 'soft');
 
     // The search text lives in Root; only this component subscribes to it.

package/src/components/context-menu.tsx

@@ -4,7 +4,9 @@
  */
 'use client';
 
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
+import { VirtualMenu } from './virtual-menu.js';
 import classNames from 'classnames';
 import { ContextMenu as ContextMenuPrimitive, Slot } from 'radix-ui';
 
@@ -101,6 +103,7 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
       ...contentProps
     } = extractProps(props, contextMenuContentPropDefs);
 
+    if (props.variant !== undefined) warnDeprecated('The menu `variant` prop is deprecated and will be removed in 0.15.0. Menus highlight with a soft fill, and a solid one when the person asks for more contrast.');
     const resolvedColor = color || themeContext.accentColor;
     const scalarSize = useResolvedResponsiveValue(size, contextMenuContentPropDefs.size.default);
 
@@ -463,6 +466,7 @@ export {
   ContextMenuSubTrigger as SubTrigger,
   ContextMenuSubContent as SubContent,
   ContextMenuSeparator as Separator,
+  VirtualMenu as Virtual,
 };
 
 export type {

package/src/components/dropdown-menu.tsx

@@ -1,6 +1,8 @@
 'use client';
 
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
+import { VirtualMenu } from './virtual-menu.js';
 import classNames from 'classnames';
 import { DropdownMenu as DropdownMenuPrimitive, Slot } from 'radix-ui';
 import { useCallbackRef } from 'radix-ui/internal';
@@ -155,6 +157,7 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
       ...contentProps
     } = extractProps(props, dropdownMenuContentPropDefs);
 
+    if (props.variant !== undefined) warnDeprecated('The menu `variant` prop is deprecated and will be removed in 0.15.0. Menus highlight with a soft fill, and a solid one when the person asks for more contrast.');
     const resolvedColor = color || themeContext.accentColor;
     const behavior = useResolvedResponsiveValue<SubmenuBehavior>(submenuBehavior, 'cascade');
     const isDrillDown = behavior === 'drill-down';
@@ -825,6 +828,7 @@ export {
   DropdownMenuSubTrigger as SubTrigger,
   DropdownMenuSubContent as SubContent,
   DropdownMenuSeparator as Separator,
+  VirtualMenu as Virtual,
 };
 
 export type {

package/src/components/heading.css

@@ -3,7 +3,7 @@
   --leading-trim-end: var(--heading-leading-trim-end);
   font-family: var(--heading-font-family);
   font-style: var(--heading-font-style);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--heading-font-weight);
   line-height: var(--line-height);
 
   /* `font` prop — all three resolve through the same tier-1 stacks. */

package/src/components/icon-button.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import classNames from 'classnames';
 
 import { BaseButton } from './_internal/base-button.js';
-import { Tooltip } from './tooltip.js';
-import { useTooltipWrapper } from '../hooks/use-tooltip-wrapper.js';
+import { Button } from './button.js';
 import type { BaseButtonProps } from './_internal/base-button.js';
 
 type IconButtonElement = React.ElementRef<typeof BaseButton>;
@@ -61,7 +59,8 @@ type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProp
 type IconButtonComponent = <C extends React.ElementType = 'button'>(props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> }) => React.ReactElement | null;
 
 /**
- * IconButton component for compact, accessible icon-only interactions
+ * IconButton component for compact, accessible icon-only interactions. It is `Button` with
+ * `iconOnly` set, kept as its own name for its stricter type: an accessible name is required.
  *
  * The IconButton component extends Button with specialized behavior for visual symbols.
  * It enforces accessibility requirements, provides automatic square sizing, and includes
@@ -101,50 +100,7 @@ type IconButtonComponent = <C extends React.ElementType = 'button'>(props: IconB
  * ```
  */
 const IconButton = React.forwardRef(
-  (
-    { className, tooltip, tooltipSide = 'top', tooltipAlign = 'center', tooltipDelayDuration, tooltipDisableHoverableContent, ...props }: IconButtonProps,
-    forwardedRef: React.ForwardedRef<IconButtonElement>,
-  ) => {
-    // Use shared tooltip wrapper hook for accessibility props
-    const { tooltipId, hasTooltip, accessibilityProps: tooltipAccessibilityProps } = useTooltipWrapper(tooltip);
-
-    // Runtime accessibility validation to ensure WCAG compliance
-    // This helps catch accessibility issues during development
-    const hasAriaLabel = 'aria-label' in props && props['aria-label'];
-    const hasAriaLabelledBy = 'aria-labelledby' in props && props['aria-labelledby'];
-    const hasChildren = 'children' in props && props.children;
-
-    // Validate accessible name - throw in development, log error in production
-    if (!hasAriaLabel && !hasAriaLabelledBy && !hasChildren) {
-      const errorMessage =
-        'IconButton: Icon buttons must have an accessible name. Please provide either:' +
-        '\n- aria-label prop with descriptive text' +
-        '\n- aria-labelledby prop referencing a label element' +
-        '\n- or visible text children';
-
-      if (process.env.NODE_ENV === 'development') {
-        throw new Error(errorMessage);
-      } else {
-        console.error(errorMessage);
-      }
-    }
-
-    // Create the base icon button element with accessibility props
-    const iconButton = <BaseButton {...props} {...tooltipAccessibilityProps} ref={forwardedRef} className={classNames('rt-IconButton', className)} />;
-
-    // If no tooltip is provided, return the icon button as-is for better performance
-    if (!hasTooltip) {
-      return iconButton;
-    }
-
-    // Wrap with Tooltip when tooltip content is provided
-    // This creates a compound component that handles both button and tooltip functionality
-    return (
-      <Tooltip content={tooltip} side={tooltipSide} align={tooltipAlign} delayDuration={tooltipDelayDuration} disableHoverableContent={tooltipDisableHoverableContent} id={tooltipId}>
-        {iconButton}
-      </Tooltip>
-    );
-  },
+  (props: IconButtonProps, forwardedRef: React.ForwardedRef<IconButtonElement>) => <Button {...props} iconOnly ref={forwardedRef} />,
 ) as IconButtonComponent & { displayName?: string };
 
 IconButton.displayName = 'IconButton';