@womp/kookie-ui 0.14.4 → 0.15.0

package/src/components/dropdown-menu.tsx

@@ -38,7 +38,6 @@ import {
   useResolvedResponsiveValue,
 } from './_internal/base-menu.utils.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 
 import type { SubmenuBehavior } from './_internal/dropdown-menu-drill-down.js';
 import type { IconProps } from './icons.js';
@@ -92,7 +91,6 @@ type DropdownMenuSurfaceProps = GetPropDefTypes<typeof dropdownMenuSubContentPro
 
 type DropdownMenuContentContextValue = {
   size?: DropdownMenuSurfaceProps['size'];
-  variant?: DropdownMenuSurfaceProps['variant'];
   color?: DropdownMenuSurfaceProps['color'];
   material?: DropdownMenuSurfaceProps['material'];
 };
@@ -135,12 +133,10 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
 
-    useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
-    const material = resolveMenuMaterial(props.material, props.panelBackground, themeContext);
+    const material = resolveMenuMaterial(props.material, themeContext);
     const {
       size = dropdownMenuContentPropDefs.size.default,
-      variant = dropdownMenuContentPropDefs.variant.default,
     } = props;
     const {
       className,
@@ -149,7 +145,6 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
       container,
       forceMount,
       material: _material,
-      panelBackground: _panelBackground,
       submenuBehavior,
       virtualized = false,
       onEscapeKeyDown,
@@ -157,7 +152,6 @@ 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';
@@ -183,8 +177,8 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
     };
 
     const contextValue = React.useMemo(
-      () => ({ size, variant, color: resolvedColor, material }),
-      [size, variant, resolvedColor, material],
+      () => ({ size, color: resolvedColor, material }),
+      [size, resolvedColor, material],
     );
 
     const contentBody = (
@@ -203,7 +197,6 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
           <DropdownMenuPrimitive.Content
             data-accent-color={resolvedColor}
             data-material={material}
-            data-panel-background={material}
             align="start"
             sideOffset={4}
             collisionPadding={10}
@@ -215,6 +208,7 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
             className={classNames(
               'rt-PopperContent',
               'rt-BaseMenuContent',
+          'rt-variant-soft',
               'rt-DropdownMenuContent',
               className,
             )}
@@ -666,14 +660,12 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
     const parent = React.useContext(DropdownMenuContentContext);
     const themeContext = useThemeContext();
 
-    useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
     // A submenu inherits the parent surface, and its own props win.
     const size = props.size ?? parent.size;
-    const variant = props.variant ?? parent.variant;
     const color = props.color ?? parent.color;
     const material =
-      props.material ?? props.panelBackground ?? parent.material ?? resolveMenuMaterial(undefined, undefined, themeContext);
+      props.material ?? parent.material ?? resolveMenuMaterial(undefined, themeContext);
 
     const {
       className,
@@ -682,16 +674,15 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
       forceMount,
       color: _color,
       material: _material,
-      panelBackground: _panelBackground,
       virtualized = false,
       ...subContentProps
-    } = extractProps({ ...props, size, variant }, dropdownMenuSubContentPropDefs);
+    } = extractProps({ ...props, size }, dropdownMenuSubContentPropDefs);
 
     const scalarSize = useResolvedResponsiveValue(size, dropdownMenuSubContentPropDefs.size.default);
 
     const contextValue = React.useMemo(
-      () => ({ size, variant, color, material }),
-      [size, variant, color, material],
+      () => ({ size, color, material }),
+      [size, color, material],
     );
 
     const body = (
@@ -706,7 +697,6 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
           <DropdownMenuPrimitive.SubContent
             data-accent-color={color}
             data-material={material}
-            data-panel-background={material}
             alignOffset={getMenuAlignOffset(scalarSize, themeContext.scaling)}
             // Side offset accounts for the outer solid box-shadow
             sideOffset={1}
@@ -717,6 +707,7 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
             className={classNames(
               'rt-PopperContent',
               'rt-BaseMenuContent',
+          'rt-variant-soft',
               'rt-BaseMenuSubContent',
               'rt-DropdownMenuContent',
               'rt-DropdownMenuSubContent',
@@ -765,10 +756,8 @@ const DrillDownPanel = React.forwardRef<DropdownMenuSubContentElement, DrillDown
       forceMount: _forceMount,
       virtualized: _virtualized,
       size: _size,
-      variant: _variant,
       color: _color,
       material: _material,
-      panelBackground: _panelBackground,
       ...panelProps
     } = omitPopperProps(props);
 

package/src/components/icon-button.tsx

@@ -42,7 +42,7 @@ interface IconButtonTooltipProps {
  * Core IconButton props excluding the 'as' prop for polymorphic behavior
  * Combines BaseButton props with accessibility requirements and tooltip functionality
  */
-type IconButtonOwnProps = Omit<BaseButtonProps, 'as' | 'variant'> & ButtonRankProps & AccessibilityProps & IconButtonTooltipProps;
+type IconButtonOwnProps = Omit<BaseButtonProps, 'as' | 'variant' | 'fullWidth'> & ButtonRankProps & AccessibilityProps & IconButtonTooltipProps;
 
 /**
  * Polymorphic IconButton props that support rendering as different HTML elements

package/src/components/image.css

@@ -49,11 +49,6 @@
  * Reduced motion support for accessibility
  * Respects user's motion preferences and disables animations
  */
-@media (prefers-reduced-motion: reduce) {
-  .rt-Image {
-    transition: none;
-  }
-}
 
 /* 
  * Forced colors support for high contrast mode
@@ -78,9 +73,7 @@
  */
 .rt-Image:where(:any-link, button, label) {
   cursor: pointer;
-  transition:
-    var(--transition-card),
-    filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
+ /* Smooth transitions for interactive states */
 
   /* 
    * Hover effects with progressive enhancement
@@ -118,9 +111,7 @@
  */
 :where(:any-link, button, label) {
   cursor: pointer;
-  transition:
-    var(--transition-card),
-    filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
+ /* Smooth transitions for interactive states */
 
   /* Hover effects for wrapper elements */
   @media (hover: hover) {

package/src/components/image.tsx

@@ -32,11 +32,6 @@ type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
    * Shows a skeleton placeholder while loading
    */
   showSkeleton?: boolean;
-  /**
-   * Whether the image should fade in when loaded
-   * @default true
-   */
-  fadeIn?: boolean;
   /**
    * Callback fired when the image successfully loads
    */
@@ -124,7 +119,6 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     src,
     placeholder,
     showSkeleton = false,
-    fadeIn = true,
     loadingAriaLabel = 'Loading image...',
     errorAriaLabel = 'Failed to load image',
     radius,
@@ -191,15 +185,13 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
   const imgStyle: React.CSSProperties = hasFill
     ? {
         display: 'block',
-        opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,
-        transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
+        opacity: isLoaded ? 1 : 0,
       }
     : {
         width: '100%',
         height: '100%',
         display: 'block',
-        opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,
-        transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
+        opacity: isLoaded ? 1 : 0,
       };
 
   const mergeRefs = (node: HTMLImageElement | null) => {

package/src/components/index.css

@@ -1,5 +1,4 @@
 @import './reset.css';
-@import './animations.css';
 @import './layout.css';
 
 /* Import Skeleton before other components so that its default border-radius doesn’t have a higher specificity */
@@ -14,7 +13,6 @@
 @import './badge.css';
 @import './blockquote.css';
 @import './button.css';
-@import './callout.css';
 @import './card.css';
 @import './checkbox-cards.css';
 @import './checkbox-group.css';
@@ -57,11 +55,8 @@
 @import './text-area.css';
 @import './text-field.css';
 @import './theme-panel.css';
-/* AppBar keeps the place its old toolbar.css had: it extends Card and must come after card.css */
-@import './app-bar.css';
 @import './toolbar.css';
 @import './tooltip.css';
-@import './user-card.css';
 @import './virtual-menu.css';
 @import './chatbar.css';
 @import './message-scroller.css';

package/src/components/index.tsx

@@ -1,14 +1,12 @@
 export { AccessibleIcon, type AccessibleIconProps } from './accessible-icon.js';
 export * as Accordion from './accordion.js';
 export * as AlertDialog from './alert-dialog.js';
-export { AppBar } from './app-bar.js';
 export { AspectRatio, type AspectRatioProps } from './aspect-ratio.js';
 export { Avatar, type AvatarProps } from './avatar.js';
 export { Badge, type BadgeProps } from './badge.js';
 export { Blockquote, type BlockquoteProps } from './blockquote.js';
 export { Box, type BoxProps } from './box.js';
 export { Button, type ButtonProps } from './button.js';
-export * as Callout from './callout.js';
 export { Card, type CardProps } from './card.js';
 export * as CheckboxCards from './checkbox-cards.js';
 export * as CheckboxGroup from './checkbox-group.js';
@@ -85,7 +83,6 @@ export {
   type ToolbarTitleProps,
 } from './toolbar.js';
 export { Tooltip, type TooltipProps } from './tooltip.js';
-export { UserCard, type UserCardProps } from './user-card.js';
 export { VirtualMenu, type VirtualMenuProps, type VirtualMenuItemProps, type VirtualMenuRenderItemProps } from './virtual-menu.js';
 export { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden.js';
 export * as Sidebar from './sidebar.js';

package/src/components/kbd.css

@@ -58,12 +58,10 @@
       0 0 0 var(--raised-border-width-thick) var(--gray-a7),
       0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--black-a12);
   }
-  transition: box-shadow 120ms, background-color 120ms;
 
   &:where(:any-link, button) {
           @media (hover: hover) {
         &:where(:hover) {
-          transition-duration: 40ms, 40ms;
           background-color: var(--color-background);
           /* prettier-ignore */
           box-shadow:
@@ -81,7 +79,6 @@
         }
       }
     &:where([data-state='open']) {
-      transition-duration: 40ms, 40ms;
       background-color: var(--color-background);
       /* prettier-ignore */
       box-shadow:
@@ -101,7 +98,6 @@
     &:where(:active:not([data-state='open'])) {
       padding-top: var(--raised-border-width);
       padding-bottom: 0;
-      transition-duration: 40ms, 40ms;
       background-color: var(--gray-2);
       box-shadow: inset 0 var(--raised-border-width) var(--black-a3), 0 0 0 var(--raised-border-width) var(--gray-a7);
     }
@@ -140,68 +136,96 @@
 
 @breakpoints {
   .rt-Kbd {
-    &:where(.rt-r-size-1) {
+    &:where(.rt-r-size-0) {
       font-size: var(--font-size-0);
       line-height: var(--line-height-0);
       letter-spacing: var(--letter-spacing-0);
       padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
       border-radius: var(--radius-pill-1);
     }
-    &:where(.rt-r-size-2) {
+    &:where(.rt-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       padding: var(--space-1) var(--space-2);
       border-radius: var(--radius-pill-2);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.rt-r-size-2) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       padding: var(--space-1) calc(var(--space-2) * 1.25);
       border-radius: var(--radius-pill-2);
     }
-    &:where(.rt-r-size-4) {
+    &:where(.rt-r-size-3) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
       padding: calc(var(--space-1) * 1.25) calc(var(--space-2) * 1.5);
       border-radius: var(--radius-pill-3);
     }
-    &:where(.rt-r-size-5) {
+    &:where(.rt-r-size-4) {
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
       padding: calc(var(--space-1) * 1.5) var(--space-3);
       border-radius: var(--radius-pill-3);
     }
-    &:where(.rt-r-size-6) {
+    &:where(.rt-r-size-5) {
       font-size: var(--font-size-5);
       line-height: var(--line-height-5);
       letter-spacing: var(--letter-spacing-5);
       padding: calc(var(--space-1) * 1.75) calc(var(--space-3) * 1.25);
       border-radius: var(--radius-pill-4);
     }
-    &:where(.rt-r-size-7) {
+    &:where(.rt-r-size-6) {
       font-size: var(--font-size-6);
       line-height: var(--line-height-6);
       letter-spacing: var(--letter-spacing-6);
       padding: var(--space-2) calc(var(--space-3) * 1.5);
       border-radius: var(--radius-pill-4);
     }
-    &:where(.rt-r-size-8) {
+    &:where(.rt-r-size-7) {
       font-size: var(--font-size-7);
       line-height: var(--line-height-7);
       letter-spacing: var(--letter-spacing-7);
       padding: calc(var(--space-2) * 1.25) var(--space-4);
       border-radius: var(--radius-pill-5);
     }
-    &:where(.rt-r-size-9) {
+    &:where(.rt-r-size-8) {
       font-size: var(--font-size-8);
       line-height: var(--line-height-8);
       letter-spacing: var(--letter-spacing-8);
       padding: calc(var(--space-2) * 1.5) calc(var(--space-4) * 1.25);
       border-radius: var(--radius-pill-5);
     }
+    &:where(.rt-r-size-9) {
+      font-size: var(--font-size-9);
+      line-height: var(--line-height-9);
+      letter-spacing: var(--letter-spacing-9);
+      padding: calc(var(--space-2) * 1.75) calc(var(--space-4) * 1.5);
+      border-radius: var(--radius-pill-6);
+    }
+    &:where(.rt-r-size-10) {
+      font-size: var(--font-size-10);
+      line-height: var(--line-height-10);
+      letter-spacing: var(--letter-spacing-10);
+      padding: calc(var(--space-2) * 2.0) calc(var(--space-4) * 1.75);
+      border-radius: var(--radius-pill-6);
+    }
+    &:where(.rt-r-size-11) {
+      font-size: var(--font-size-11);
+      line-height: var(--line-height-11);
+      letter-spacing: var(--letter-spacing-11);
+      padding: calc(var(--space-2) * 2.25) calc(var(--space-4) * 2.0);
+      border-radius: var(--radius-pill-6);
+    }
+    &:where(.rt-r-size-12) {
+      font-size: var(--font-size-12);
+      line-height: var(--line-height-12);
+      letter-spacing: var(--letter-spacing-12);
+      padding: calc(var(--space-2) * 2.5) calc(var(--space-4) * 2.25);
+      border-radius: var(--radius-pill-6);
+    }
   }
 }

package/src/components/kbd.props.tsx

@@ -1,10 +1,9 @@
-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', '6', '7', '8', '9'] as const;
-const variants = ['raised', 'soft', 'classic'] as const;
+const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+const variants = ['raised', 'soft'] as const;
 
 const kbdPropDefs = {
   ...asChildPropDef,
@@ -19,7 +18,6 @@ const kbdPropDefs = {
     className: 'rt-variant',
     values: variants,
     default: 'raised',
-    parseValue: parseVariant,
   },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;

package/src/components/link.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 underline = ['auto', 'always', 'hover', 'none'] as const;
 
 const linkPropDefs = {

package/src/components/popover.css

@@ -15,7 +15,6 @@
   overflow: auto;
   position: relative;
   z-index: 200; /* Above dialogs (100) so popovers inside dialogs/sheets work */
-  transition: var(--transition-background-blur);
 
   --inset-padding-top: var(--popover-content-padding);
   --inset-padding-right: var(--popover-content-padding);
@@ -29,17 +28,14 @@
   transform-origin: var(--radix-popover-content-transform-origin);
 
   /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 
   /* Component-level overrides (higher specificity) */
-  &:where([data-panel-background='solid']) {
+  &:where([data-material='solid']) {
     background-color: var(--color-panel-solid);
     backdrop-filter: none;
   }
 
-  &:where([data-panel-background='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: var(--color-panel-translucent);
     backdrop-filter: var(--backdrop-filter-panel);
   }

package/src/components/popover.props.tsx

@@ -5,7 +5,7 @@ import { widthPropDefs } from '../props/width.props.js';
 import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
 
 const contentSizes = ['1', '2', '3', '4'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
+const materials = ['solid', 'translucent'] as const;
 
 const popoverContentPropDefs = {
   ...asChildPropDef,
@@ -16,9 +16,7 @@ const popoverContentPropDefs = {
     default: '2',
     responsive: true,
   },
-  material: { type: 'enum', values: panelBackgrounds, default: undefined },
-  /** @deprecated Use `material`. Removed in 0.15.0. */
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  material: { type: 'enum', values: materials, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
   maxWidth: { ...widthPropDefs.maxWidth, default: '480px' },
@@ -28,8 +26,7 @@ const popoverContentPropDefs = {
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;
   size: PropDef<(typeof contentSizes)[number]>;
-  material: PropDef<(typeof panelBackgrounds)[number] | undefined>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  material: PropDef<(typeof materials)[number] | undefined>;
 };
 
 type PopoverContentOwnProps = GetPropDefTypes<

package/src/components/popover.tsx

@@ -1,4 +1,3 @@
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Popover as PopoverPrimitive } from 'radix-ui';
@@ -62,14 +61,12 @@ interface PopoverContentProps
 const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentProps>(
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
-    useDeprecatedPanelBackgroundWarning(props.panelBackground);
-    const panelBackground = props.material ?? props.panelBackground ?? themeContext.material ?? themeContext.panelBackground;
+    const resolvedMaterial = props.material ?? themeContext.material;
     const {
       className,
       forceMount,
       container,
       material: _material,
-      panelBackground: _,
       ...contentProps
     } = extractProps(props, popoverContentPropDefs);
 
@@ -111,8 +108,7 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
             {...contentProps}
             ref={combinedRef}
             aria-labelledby={labelId}
-            data-panel-background={panelBackground}
-            data-material={panelBackground}
+            data-material={resolvedMaterial}
             className={classNames('rt-PopperContent', 'rt-PopoverContent', className)}
           >
             <PopoverContentContext.Provider value={React.useMemo(() => ({ contentRef, setToolbarOffset, setLabelId }), [setToolbarOffset])}>

package/src/components/progress.css

@@ -13,7 +13,7 @@
    * Theme-level translucent override
    * Applies backdrop filter for elevated visual effects
    */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -25,12 +25,12 @@
    * Component-level material overrides
    * These ensure proper rendering based on material setting
    */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
   
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -54,7 +54,6 @@
       -100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))
     )
   );
-  transition: var(--transition-progress);
 
   &:where([data-state='indeterminate']) {
     animation-name: rt-progress-indicator-indeterminate-grow;
@@ -128,18 +127,18 @@
   box-shadow: inset 0 0 0 1px var(--gray-6);
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
     box-shadow: inset 0 0 0 1px var(--gray-a6);
   }
 
   /* Component-level overrides */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     background-color: var(--gray-2);
     box-shadow: inset 0 0 0 1px var(--gray-6);
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
     box-shadow: inset 0 0 0 1px var(--gray-a6);
   }
@@ -155,16 +154,16 @@
   background-color: var(--gray-3);
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
   }
 
   /* Component-level overrides */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     background-color: var(--gray-3);
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
   }
 
@@ -180,16 +179,16 @@
   box-shadow: inset 0 0 0 1px var(--gray-6);
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     box-shadow: inset 0 0 0 1px var(--gray-a6);
   }
 
   /* Component-level overrides */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     box-shadow: inset 0 0 0 1px var(--gray-6);
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     box-shadow: inset 0 0 0 1px var(--gray-a6);
   }
 

package/src/components/radio-cards.css

@@ -77,7 +77,6 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 .rt-RadioCardsItem:where([data-state='checked']) {
-  transition: var(--transition-fast);
   outline: var(--focus-outline-width) solid var(--accent-solid-indicator);
   outline-offset: -1px;
 }
@@ -89,7 +88,6 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 .rt-RadioCardsItem:where(:focus-visible) {
-  transition: var(--transition-focus);
   outline: var(--focus-outline-width) solid var(--focus-8);
   outline-offset: -1px;
   &:where([data-state='checked']) {

package/src/components/radio-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 radioCardsRootPropDefs = {
   ...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(160px, 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]>;
 };