@womp/kookie-ui 0.14.5 → 0.15.1

package/src/components/avatar.tsx

@@ -22,8 +22,6 @@ const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((props, forwarde
     style,
     color,
     radius,
-    material,
-    panelBackground,
     status,
     badge,
     ...imageProps
@@ -53,8 +51,6 @@ const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((props, forwarde
     <AvatarPrimitive.Root
       data-accent-color={color}
       data-radius={radius}
-      data-material={material}
-      data-panel-background={panelBackground}
       data-disabled={isDisabled || undefined}
       data-has-indicator={hasIndicator || undefined}
       className={classNames('rt-reset', 'rt-AvatarRoot', className)}

package/src/components/badge.css

@@ -7,7 +7,6 @@
   font-style: normal;
   flex-shrink: 0;
   line-height: 1;
-  transition: var(--transition-badge);
 
   /* Make sure that the height is not stretched in a Flex/Grid layout */
   height: fit-content;
@@ -23,35 +22,13 @@
   --material-alpha: 0;
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    --material-blend: 60%;
-    --material-alpha: 1;
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
 
   /* Prevent backdrop-filter stacking with parents */
   isolation: isolate;
 
   /* Component-level overrides */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
-    --material-blend: 100%;
-    --material-alpha: 0;
-    backdrop-filter: none;
-    --backdrop-filter-components: none;
-  }
-  
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    --material-blend: 60%;
-    --material-alpha: 1;
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
 
   /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 
   /* Forced colors support */
   @media (forced-colors: active) {
@@ -185,7 +162,6 @@
 .rt-Badge:where(.rt-variant-outline) {
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
   color: var(--accent-ink);
-  transition: var(--transition-background-blur);
 }
 
 /* ghost */
@@ -202,20 +178,7 @@
   top: var(--raised-elevation-offset);
   color: var(--accent-ink);
   box-shadow: var(--shadow-2);
-  transition: var(--transition-text-field);
 
   --raised-surface: var(--color-surface-solid);
-  background-color: var(--raised-surface);
-
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    --raised-surface: var(--color-surface-translucent);
-  }
-
-  &:where([data-panel-background='solid'], [data-material='solid']) {
-    --raised-surface: var(--color-surface-solid);
-  }
-
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    --raised-surface: var(--color-surface-translucent);
-  }
+  background-color: var(--raised-surface)
 }

package/src/components/badge.props.tsx

@@ -1,4 +1,3 @@
-import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { grayAccentColorPropDef } from '../props/color.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
@@ -6,26 +5,17 @@ import { radiusPropDef } from '../props/radius.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
-const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost', 'classic'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
-const materials = ['solid', 'translucent'] as const;
+const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost'] as const;
 
 const badgePropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...grayAccentColorPropDef,
   ...radiusPropDef,
-  material: { type: 'enum', values: materials, default: undefined },
-  /**
-   * @deprecated Use `material` prop instead. This prop will be removed in a future version.
-   */
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 
 export { badgePropDefs };

package/src/components/badge.tsx

@@ -10,7 +10,6 @@ import { Tooltip } from './tooltip.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 { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 
 type BadgeElement = React.ElementRef<'span'>;
 type BadgeOwnProps = GetPropDefTypes<typeof badgePropDefs>;
@@ -37,8 +36,6 @@ const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) =
     children,
     color,
     radius,
-    material,
-    panelBackground,
     tooltip,
     tooltipSide = 'top',
     tooltipAlign = 'center',
@@ -47,13 +44,7 @@ const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) =
     ...badgeProps
   } = extractProps(props, badgePropDefs, marginPropDefs);
 
-  // Memoize material calculation for performance
-  const effectiveMaterial = React.useMemo(
-    () => material ?? panelBackground,
-    [material, panelBackground],
-  );
 
-  useDeprecatedPanelBackgroundWarning(panelBackground);
 
   // Memoize component variable to prevent unnecessary re-renders
   const Comp = React.useMemo(() => (asChild ? Slot.Root : 'span'), [asChild]);
@@ -62,8 +53,6 @@ const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) =
     <Comp
       data-accent-color={color}
       data-radius={radius}
-      data-material={effectiveMaterial}
-      data-panel-background={effectiveMaterial}
       {...badgeProps}
       ref={forwardedRef}
       className={classNames('rt-reset', 'rt-Badge', className)}

package/src/components/blockquote.props.tsx

@@ -7,7 +7,7 @@ import { weightPropDef } from '../props/weight.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
 
 const blockquotePropDefs = {
   ...asChildPropDef,

package/src/components/button.tsx

@@ -4,43 +4,8 @@ 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 { warnDeprecated } from '../helpers/warn-deprecated.js';
 import type { BaseButtonProps } from './_internal/base-button.js';
 
-/**
- * Styles that can be overridden for a particular interaction state
- */
-interface ButtonOverrideStateStyles {
-  color?: string;
-  background?: string;
-  backgroundColor?: string;
-  boxShadow?: string;
-  filter?: string;
-  outline?: string;
-  outlineOffset?: string;
-  opacity?: string | number;
-}
-
-/**
- * Full set of override styles keyed by interaction state
- */
-interface ButtonOverrideStyles {
-  /** Default/idle state styles */
-  normal?: ButtonOverrideStateStyles;
-  /** Hover state styles */
-  hover?: ButtonOverrideStateStyles;
-  /** Active (mouse down) state styles */
-  active?: ButtonOverrideStateStyles;
-  /** Toggle pressed state styles (data-state="on") */
-  pressed?: ButtonOverrideStateStyles;
-  /** Open state styles (e.g., when used as a trigger) */
-  open?: ButtonOverrideStateStyles;
-  /** Disabled state styles */
-  disabled?: ButtonOverrideStateStyles;
-  /** Focus-visible outline styles */
-  focus?: Pick<ButtonOverrideStateStyles, 'outline' | 'outlineOffset'>;
-}
-
 type ButtonElement = React.ElementRef<typeof BaseButton>;
 
 /**
@@ -87,11 +52,6 @@ type ButtonRankProps =
 type ButtonOwnProps = Omit<BaseButtonProps, 'as' | 'variant'> &
   ButtonRankProps &
   ButtonTooltipProps & {
-    /**
-     * When using variant="override", provide token-based styles per state.
-     * We propagate these into CSS variables consumed by the override variant.
-     */
-    overrideStyles?: ButtonOverrideStyles;
     /**
      * A square button holding only an icon. It needs an accessible name: `aria-label`,
      * `aria-labelledby`, or visible text. `IconButton` is this button with `iconOnly` set.
@@ -161,7 +121,6 @@ const Button = React.forwardRef(
       tooltipAlign = 'center',
       tooltipDelayDuration,
       tooltipDisableHoverableContent,
-      overrideStyles,
       iconOnly = false,
       emphasis,
       variant,
@@ -172,49 +131,10 @@ const Button = React.forwardRef(
     // Use shared tooltip wrapper hook for accessibility props
     const { tooltipId, hasTooltip, accessibilityProps: tooltipAccessibilityProps } = useTooltipWrapper(tooltip);
 
-    // Create the base button element with tooltip accessibility props
-    // Map overrideStyles to CSS variables consumed by the override variant rules
-    const overrideVars = React.useMemo(() => {
-      if (!overrideStyles) return undefined;
-      const vars: Record<string, string | number> = {};
-      const setVar = (key: string, value: string | number | undefined) => {
-        if (value !== undefined) vars[key] = value;
-      };
-      const apply = (prefix: string, s?: ButtonOverrideStateStyles) => {
-        if (!s) return;
-        setVar(`--button-override-${prefix}color`, s.color);
-        setVar(`--button-override-${prefix}background`, s.background);
-        setVar(`--button-override-${prefix}background-color`, s.backgroundColor);
-        setVar(`--button-override-${prefix}box-shadow`, s.boxShadow);
-        setVar(`--button-override-${prefix}filter`, s.filter);
-        setVar(`--button-override-${prefix}outline`, s.outline);
-        setVar(`--button-override-${prefix}outline-offset`, s.outlineOffset);
-        setVar(`--button-override-${prefix}opacity`, s.opacity);
-      };
-
-      apply('', overrideStyles.normal);
-      apply('hover-', overrideStyles.hover);
-      apply('active-', overrideStyles.active);
-      apply('pressed-', overrideStyles.pressed);
-      apply('open-', overrideStyles.open);
-      apply('disabled-', overrideStyles.disabled);
-
-      if (overrideStyles.focus) {
-        setVar('--button-override-focus-outline', overrideStyles.focus.outline);
-        setVar('--button-override-focus-outline-offset', overrideStyles.focus.outlineOffset);
-      }
-
-      return vars as React.CSSProperties;
-    }, [overrideStyles]);
-
-    // Combine override styles with user-provided styles
-    const combinedStyle = React.useMemo(() => (overrideVars ? { ...overrideVars, ...style } : style), [overrideVars, style]);
-
+    // An icon button is square, so it never takes the full width.
     if (iconOnly) {
       validateIconButtonName(props);
-      if (props.fullWidth) {
-        warnDeprecated('`fullWidth` on an icon-only button is deprecated and will be removed in 0.15.0. An icon button is square.');
-      }
+      props.fullWidth = false;
     }
 
     if (emphasis !== undefined && variant !== undefined) {
@@ -229,7 +149,7 @@ const Button = React.forwardRef(
         {...tooltipAccessibilityProps}
         ref={forwardedRef}
         className={classNames(iconOnly ? 'rt-IconButton' : 'rt-Button', className)}
-        style={combinedStyle}
+        style={style}
       />
     );
 
@@ -251,4 +171,4 @@ const Button = React.forwardRef(
 Button.displayName = 'Button';
 
 export { Button };
-export type { ButtonProps, ButtonEmphasis, ButtonRankProps, ButtonOverrideStyles, ButtonOverrideStateStyles };
+export type { ButtonProps, ButtonEmphasis, ButtonRankProps };

package/src/components/card.props.tsx

@@ -1,25 +1,21 @@
-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 = ['raised', 'surface', 'outline', 'ghost', 'soft', 'classic'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
+const variants = ['raised', 'surface', 'outline', 'ghost', 'soft'] 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: 'raised', parseValue: parseVariant },
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   material: { type: 'enum', values: materials, default: undefined },
   flush: { type: 'boolean', default: false },
   inset: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   material: PropDef<(typeof materials)[number] | undefined>;
   flush: PropDef<boolean>;
   inset: PropDef<boolean>;

package/src/components/card.tsx

@@ -14,18 +14,17 @@ type CardElement = React.ElementRef<'div'>;
 type CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;
 interface CardProps extends ComponentPropsWithout<'div', RemovedProps>, MarginProps, CardOwnProps {}
 const Card = React.forwardRef<CardElement, CardProps>((props, forwardedRef) => {
-  const { asChild, className, panelBackground, material, flush, inset, ...cardProps } = extractProps(
+  const { asChild, className, material, flush, inset, ...cardProps } = extractProps(
     props,
     cardPropDefs,
     marginPropDefs,
   );
-  const effectiveMaterial = material || panelBackground;
+  const effectiveMaterial = material;
   const Comp = asChild ? Slot.Root : 'div';
   return (
     <Comp
       ref={forwardedRef}
       {...cardProps}
-      data-panel-background={effectiveMaterial}
       data-material={effectiveMaterial}
       data-flush={flush ? 'true' : undefined}
       data-inset={inset ? 'true' : undefined}

package/src/components/chatbar.css

@@ -19,12 +19,12 @@
    * Component-level material override
    * When component has explicit material prop, override the inherited theme values.
    */
-  &:where([data-material='solid'], [data-panel-background='solid']) {
+  &:where([data-material='solid']) {
     --material-blend: 100%;
     --material-alpha: 0;
   }
 
-  &:where([data-material='translucent'], [data-panel-background='translucent']) {
+  &:where([data-material='translucent']) {
     --material-blend: 60%;
     --material-alpha: 1;
   }
@@ -45,7 +45,6 @@
   font: inherit;
   line-height: inherit;
   text-align: start;
-  transition: height var(--motion-duration-small) ease-out;
 }
 .rt-ChatbarInput:focus,
 .rt-ChatbarInput:focus-visible {
@@ -83,9 +82,6 @@
 }
 
 /* Send button - extend button transition with opacity for visibility fade */
-.rt-ChatbarSend {
-  transition: var(--transition-button), opacity var(--motion-duration-small) var(--motion-ease-standard);
-}
 
 /* Hidden send button stays invisible even when disabled styling applies */
 .rt-ChatbarSend[aria-hidden='true'] {
@@ -218,17 +214,16 @@
 .rt-ChatbarBox {
   box-sizing: border-box;
   width: 100%;
-  transition: var(--transition-text-field);
   /* Padding is applied per size below to match Card spacing */
   isolation: isolate;
 }
 
 /* Theme-level translucent override for the visual shell (matches any ancestor) */
-:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox {
+:where([data-material='translucent']) .rt-ChatbarBox {
   backdrop-filter: var(--backdrop-filter-components);
   --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
-.rt-ChatbarRoot:where([data-panel-background='solid'], [data-material='solid']) .rt-ChatbarBox {
+.rt-ChatbarRoot:where([data-material='solid']) .rt-ChatbarBox {
   backdrop-filter: none;
   --backdrop-filter-components: none;
 }
@@ -465,15 +460,14 @@
 
   background-color: var(--color-surface-solid);
   box-shadow: var(--shadow-2);
-  transition: var(--transition-text-field);
 
   /* Translucent theme override (ancestor match, zero added specificity so hover still wins) */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     background-color: var(--color-surface-translucent);
   }
 
   /* Explicit solid material on the component beats an inherited translucent theme */
-  :where(.rt-ChatbarRoot[data-panel-background='solid'], .rt-ChatbarRoot[data-material='solid']) & {
+  :where(.rt-ChatbarRoot[data-material='solid']) & {
     background-color: var(--color-surface-solid);
   }
 
@@ -562,7 +556,6 @@
   align-items: center;
   justify-content: center;
   z-index: 10;
-  animation: rt-fade-in var(--motion-duration-small) var(--motion-spring-snappy);
 }
 
 .rt-ChatbarDropContent {
@@ -573,17 +566,6 @@
 }
 
 /* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .rt-ChatbarInput,
-  .rt-ChatbarBox,
-  .rt-ChatbarSend {
-    transition: none;
-  }
-
-  .rt-ChatbarDropOverlay {
-    animation: none;
-  }
-}
 
 /* Inline slot positioning */
 .rt-ChatbarInlineStart,

package/src/components/chatbar.tsx

@@ -1,7 +1,5 @@
-import { parseVariant } from '../helpers/parse-variant.js';
 import * as React from 'react';
 import classNames from 'classnames';
-import { LazyMotion, MotionConfig, domAnimation, m } from 'motion/react';
 import { useComposedRefs } from 'radix-ui/internal';
 import { useDropzone } from 'react-dropzone';
 
@@ -54,9 +52,6 @@ function withoutPlaceholder(el: HTMLTextAreaElement, measure: () => void): void
   }
 }
 
-// Shared layout spring; hoisted so every motion node receives the same object
-const LAYOUT_TRANSITION = { layout: { type: 'spring', visualDuration: 0.15, bounce: 0.1 } } as const;
-
 type ExpandOn = 'none' | 'focus' | 'overflow' | 'both';
 type SendMode = 'always' | 'whenDirty' | 'never';
 
@@ -215,14 +210,12 @@ interface ChatbarRootBaseProps {
   onSubmit?: (payload: ChatbarSubmitPayload) => void;
 
   size?: '1' | '2' | '3';
-  /** `classic` is a deprecated alias of `raised`, removed in 0.15.0. */
-  variant?: 'raised' | 'surface' | 'outline' | 'ghost' | 'soft' | 'classic';
+  variant?: 'raised' | 'surface' | 'outline' | 'ghost' | 'soft';
   /** Accent color for the control (matches TextArea) */
   color?: (typeof accentColors)[number];
   /** Optional radius override (matches TextArea) */
   radius?: (typeof radii)[number];
   /** Panel/material translucency flags (matches TextArea) */
-  panelBackground?: 'solid' | 'translucent';
   material?: 'solid' | 'translucent';
 
   width?: React.CSSProperties['width'];
@@ -328,7 +321,6 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
     variant,
     color,
     radius,
-    panelBackground,
     material,
     width,
     maxWidth,
@@ -350,7 +342,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
     context,
     ...divProps
   } = props;
-  const effectiveMaterial = material || panelBackground;
+  const effectiveMaterial = material;
 
   const isValueControlled = valueProp != null;
   const [valueUncontrolled, setValueUncontrolled] = React.useState<string>(defaultValue);
@@ -699,8 +691,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
   return (
     <ChatbarContext.Provider value={contextValue}>
       <ChatbarValueContext.Provider value={value}>
-        <LazyMotion features={domAnimation}>
-          <MotionConfig reducedMotion="user">
+        <>
             <div
               {...divProps}
               ref={composedRootRef}
@@ -712,7 +703,6 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
               data-drop-active={dragActive ? '' : undefined}
               data-accent-color={color}
               data-radius={radius}
-              data-panel-background={effectiveMaterial}
               data-material={effectiveMaterial}
               onBlurCapture={handleBlurCapture}
             >
@@ -730,19 +720,16 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
                 </div>
               ) : null}
               <div {...(dropzone ? getRootProps() : {})} style={{ width: '100%', flex: '1 1 auto', minHeight: 0 }} onPointerDown={handleContainerPointerDown}>
-                <m.div
-                  className={classNames('rt-ChatbarBox', `rt-variant-${parseVariant(variant ?? 'raised')}`)}
+                <div
+                  className={classNames('rt-ChatbarBox', `rt-variant-${variant ?? 'raised'}`)}
                   style={{ position: 'relative' }}
                   data-accent-color={color}
                   data-radius={radius}
-                  data-panel-background={effectiveMaterial}
                   data-material={effectiveMaterial}
-                  layout
-                  transition={LAYOUT_TRANSITION}
                 >
-                  <m.div className="rt-ChatbarGrid" layout="position" transition={LAYOUT_TRANSITION}>
+                  <div className="rt-ChatbarGrid">
                     {children}
-                  </m.div>
+                  </div>
                   {dragActive && (
                     <div className="rt-ChatbarDropOverlay" aria-hidden>
                       <div className="rt-ChatbarDropContent">
@@ -752,7 +739,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
                       </div>
                     </div>
                   )}
-                </m.div>
+                </div>
               </div>
               {context ? (
                 <Text as="div" size={size === '3' ? '2' : '1'} emphasis="medium" className="rt-ChatbarContext">
@@ -763,8 +750,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
                 {dragActive ? 'Drop files here to attach.' : <span key={announcement.id}>{announcement.text}</span>}
               </VisuallyHidden>
             </div>
-          </MotionConfig>
-        </LazyMotion>
+        </>
       </ChatbarValueContext.Provider>
     </ChatbarContext.Provider>
   );
@@ -975,7 +961,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, fo
 
   const Comp = asChild ? Slot : 'textarea';
   return (
-    <m.div className={classNames('rt-ChatbarField', 'rt-ChatbarTextarea', className)} layout="position" transition={LAYOUT_TRANSITION}>
+    <div className={classNames('rt-ChatbarField', 'rt-ChatbarTextarea', className)}>
       <Comp
         {...textareaProps}
         ref={composedRef}
@@ -994,7 +980,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, fo
         autoCorrect={textareaProps.autoCorrect ?? 'on'}
         style={style}
       />
-    </m.div>
+    </div>
   );
 });
 Textarea.displayName = 'Chatbar.Textarea';
@@ -1051,7 +1037,7 @@ const AttachmentsRow = React.forwardRef<HTMLDivElement, AttachmentsRowProps>((pr
   if (ctx.attachments.length === 0 && !hasItems && !forceMount) return null;
   const Comp = asChild ? Slot : 'div';
   return (
-    <m.div layout="position" transition={LAYOUT_TRANSITION}>
+    <div>
       <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarAttachmentsRow', className)} role="list" aria-label={divProps['aria-label'] ?? 'Attachments'}>
         <ScrollArea className="rt-ChatbarScrollArea" scrollbars="horizontal" size="1">
           <Flex align="center" gap="2" minWidth="fit-content">
@@ -1064,7 +1050,7 @@ const AttachmentsRow = React.forwardRef<HTMLDivElement, AttachmentsRowProps>((pr
           </Flex>
         </ScrollArea>
       </Comp>
-    </m.div>
+    </div>
   );
 });
 AttachmentsRow.displayName = 'Chatbar.AttachmentsRow';
@@ -1268,13 +1254,13 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, forwardedRef) =>
   if (!ctx.open) return null;
   const Comp = asChild ? Slot : 'div';
   return (
-    <m.div layout="position" transition={LAYOUT_TRANSITION}>
+    <div>
       <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarRow', className)}>
         <Flex align="center" justify="between" width="100%">
           {children}
         </Flex>
       </Comp>
-    </m.div>
+    </div>
   );
 });
 Row.displayName = 'Chatbar.Row';
@@ -1333,8 +1319,7 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
     style,
     className,
     size: sizeProp,
-    variant: variantProp,
-    emphasis,
+    variant: variantProp, emphasis,
     tabIndex,
     onClick,
     status = 'ready',

package/src/components/checkbox-cards.css

@@ -20,7 +20,6 @@
   -webkit-tap-highlight-color: transparent;
 
   &:where(:has(:focus-visible)) {
-    transition: var(--transition-focus);
     outline: var(--focus-outline-width) solid var(--focus-8);
     outline-offset: var(--focus-outline-offset-inset);
 

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

@@ -1,4 +1,3 @@
-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';
@@ -6,26 +5,23 @@ 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 sizes = ['1', '2', '3', '4', '5'] 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 materials = ['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: '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 },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
+  material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(200px, 1fr))' },
   gap: { ...gridPropDefs.gap, default: '4' },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  material: PropDef<(typeof panelBackgrounds)[number] | undefined>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  material: PropDef<(typeof materials)[number] | undefined>;
   columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
   gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;
 };