@womp/kookie-ui 0.13.3 → 0.14.0

package/src/components/kbd.css

@@ -15,11 +15,11 @@
   user-select: none;
 
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
 
   min-width: 1.75em;
   box-sizing: border-box;
-  word-spacing: var(--classic-word-spacing);
+  word-spacing: var(--raised-word-spacing);
   border-radius: var(--radius-pill-2);
   
   /* Default sizing (size 2) */
@@ -40,23 +40,23 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-Kbd:where(.rt-variant-classic) {
+.rt-Kbd:where(.rt-variant-raised) {
   background-color: var(--gray-1);
   /* prettier-ignore */
   box-shadow:
-    inset 0 var(--classic-border-width) var(--white-a12),
-    inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6),
-    0 0 0 var(--classic-border-width) var(--gray-a5),
-    0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
+    inset 0 var(--raised-border-width) var(--white-a12),
+    inset 0 calc(-1 * var(--raised-border-width)) var(--gray-a6),
+    0 0 0 var(--raised-border-width) var(--gray-a5),
+    0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--gray-a7);
 
   :where(.dark, .dark-theme) &,
   :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
     /* prettier-ignore */
     box-shadow:
-      inset 0 var(--classic-border-width) var(--gray-a11),
-      inset 0 calc(-1 * var(--classic-border-width)) var(--black-a11),
-      0 0 0 var(--classic-border-width-thick) var(--gray-a7),
-      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+      inset 0 var(--raised-border-width) var(--gray-a11),
+      inset 0 calc(-1 * var(--raised-border-width)) var(--black-a11),
+      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;
 
@@ -67,16 +67,16 @@
           background-color: var(--color-background);
           /* prettier-ignore */
           box-shadow:
-            0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7),
-            0 0 0 var(--classic-border-width) var(--gray-a5);
+            0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--gray-a7),
+            0 0 0 var(--raised-border-width) var(--gray-a5);
 
           :where(.dark, .dark-theme) &,
           :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
             /* prettier-ignore */
             box-shadow:
-              0 0 0 var(--classic-border-width-thick) var(--gray-a7),
-              0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12),
-              0 0 0 var(--classic-border-width) var(--gray-a5);
+              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),
+              0 0 0 var(--raised-border-width) var(--gray-a5);
           }
         }
       }
@@ -85,25 +85,25 @@
       background-color: var(--color-background);
       /* prettier-ignore */
       box-shadow:
-        inset 0 var(--classic-border-width) var(--white-a12),
-        0 0 0 var(--classic-border-width) var(--gray-a5),
-        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
+        inset 0 var(--raised-border-width) var(--white-a12),
+        0 0 0 var(--raised-border-width) var(--gray-a5),
+        0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--gray-a7);
 
       :where(.dark, .dark-theme) &,
       :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
         /* prettier-ignore */
         box-shadow:
-          inset 0 var(--classic-border-width) var(--gray-a11),
-          0 0 0 var(--classic-border-width-thick) var(--gray-a7),
-          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+          inset 0 var(--raised-border-width) var(--gray-a11),
+          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);
       }
     }
     &:where(:active:not([data-state='open'])) {
-      padding-top: var(--classic-border-width);
+      padding-top: var(--raised-border-width);
       padding-bottom: 0;
       transition-duration: 40ms, 40ms;
       background-color: var(--gray-2);
-      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--gray-a7);
+      box-shadow: inset 0 var(--raised-border-width) var(--black-a3), 0 0 0 var(--raised-border-width) var(--gray-a7);
     }
     &:where(:focus-visible) {
       outline: 2px solid var(--focus-8);

package/src/components/kbd.props.tsx

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

package/src/components/navbar.css

@@ -51,6 +51,10 @@
   padding: var(--space-4) var(--space-5);
 }
 
+.rt-NavbarRoot[data-size='4'] .rt-NavbarContainer {
+  padding: var(--space-5) var(--space-6);
+}
+
 /* Slot overflow handling */
 .rt-NavbarLogo,
 .rt-NavbarActions {

package/src/components/navbar.props.tsx

@@ -1,7 +1,7 @@
 import type { PropDef } from '../props/prop-def.js';
 
 const positions = ['static', 'fixed', 'sticky'] as const;
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 
 const navbarRootPropDefs = {
   position: {

package/src/components/popover.props.tsx

@@ -16,6 +16,8 @@ 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 },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
@@ -26,6 +28,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>;
 };
 

package/src/components/popover.tsx

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

package/src/components/radio-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 radioCardsRootPropDefs = {
   ...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(160px, 1fr))' },
@@ -19,6 +24,7 @@ const radioCardsRootPropDefs = {
 } 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/radio-cards.tsx

@@ -1,3 +1,4 @@
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
@@ -36,10 +37,12 @@ interface RadioCardsRootProps
 const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
-    const panelBackground = props.panelBackground ?? themeContext.panelBackground;
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
+    const panelBackground = props.material ?? props.panelBackground ?? themeContext.material ?? themeContext.panelBackground;
     const {
       className,
       color,
+      material: _material,
       panelBackground: _,
       ...rootProps
     } = extractProps(props, radioCardsRootPropDefs, marginPropDefs);
@@ -49,6 +52,7 @@ const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootPro
           <RadioGroupPrimitive.Root
             data-accent-color={color}
             data-panel-background={panelBackground}
+            data-material={panelBackground}
             {...rootProps}
             ref={forwardedRef}
             className={classNames('rt-RadioCardsRoot', className)}

package/src/components/radio-group.props.tsx

@@ -1,15 +1,18 @@
+import { parseVariant } from '../helpers/parse-variant.js';
+import { baseRadioPropDefs } from './_internal/base-radio.props.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'solid', 'soft'] as const;
+// The same list as Radio: a group offers exactly what its items can draw.
+const variants = baseRadioPropDefs.variant.values;
 
 const radioGroupRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;

package/src/components/schemas/base-button.schema.ts

@@ -57,11 +57,11 @@ export const BaseButtonSchema = z
 
     /**
      * Visual variant that determines the button's appearance and context
-     * @default 'solid'
+     * @default 'raised'
      */
     variant: z
-      .enum(['classic', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override'])
-      .default('solid')
+      .enum(['raised', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override', 'classic'])
+      .default('raised')
       .describe("Visual variant that determines the button's appearance and context"),
 
     /**

package/src/components/segmented-control.props.tsx

@@ -17,17 +17,16 @@ const segmentedControlRootPropDefs = {
     default: 'horizontal',
     responsive: true,
   },
-  panelBackground: {
-    type: 'enum',
-    className: 'rt-panel-background',
-    values: ['solid', 'translucent'],
-  },
+  material: { type: 'enum', values: ['solid', 'translucent'] },
+  /** @deprecated Use `material`. Removed in 0.15.0. */
+  panelBackground: { type: 'enum', values: ['solid', 'translucent'] },
   ...radiusPropDef,
 } satisfies {
   disabled?: PropDef<boolean>;
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   orientation: PropDef<(typeof orientations)[number]>;
+  material: PropDef<'solid' | 'translucent'>;
   panelBackground: PropDef<'solid' | 'translucent'>;
 };
 

package/src/components/segmented-control.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
@@ -33,8 +35,16 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       value: valueProp,
       defaultValue: defaultValueProp,
       onValueChange: onValueChangeProp,
+      material: materialProp,
+      panelBackground,
       ...rootProps
     } = extractProps(props, segmentedControlRootPropDefs, marginPropDefs);
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
+    const material = materialProp ?? panelBackground;
+
+    if (props.variant !== undefined) {
+      warnDeprecated('SegmentedControl `variant` is deprecated and will be removed in 0.15.0. It has one value, so it chooses nothing.');
+    }
 
     const [value, setValue] = useControllableState({
       prop: valueProp,
@@ -46,6 +56,8 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       <ToggleGroupPrimitive.Root
         data-disabled={props.disabled || undefined}
         data-radius={radius}
+        data-panel-background={material}
+        data-material={material}
         ref={forwardedRef}
         className={classNames('rt-SegmentedControlRoot', className)}
         onValueChange={(value) => {

package/src/components/select.css

@@ -248,6 +248,27 @@
         height: var(--trigger-icon-size-3);
       }
     }
+    &:where(.rt-r-size-4) {
+      --select-trigger-height: var(--control-height-4);
+      gap: var(--component-gap-4);
+      font-size: var(--font-size-4);
+      line-height: var(--line-height-4);
+      letter-spacing: var(--letter-spacing-4);
+      border-radius: var(--radius-pill-4);
+
+      &:where(:not(.rt-variant-ghost)) {
+        padding-left: var(--space-4);
+        padding-right: var(--space-4);
+      }
+      &:where(.rt-variant-ghost) {
+        gap: var(--component-gap-ghost-4);
+        --select-trigger-ghost-padding-x: var(--space-3);
+      }
+      & :where(.rt-SelectIcon) {
+        width: var(--trigger-icon-size-4);
+        height: var(--trigger-icon-size-4);
+      }
+    }
   }
 }
 
@@ -282,7 +303,7 @@
         height: var(--select-indicator-icon-size-1);
       }
     }
-    &:where(.rt-r-size-2, .rt-r-size-3) {
+    &:where(.rt-r-size-2, .rt-r-size-3, .rt-r-size-4) {
       --select-content-padding: var(--space-2);
       --select-item-indicator-width: var(--space-5);
       --select-separator-margin-right: var(--space-3);
@@ -322,6 +343,18 @@
         height: var(--select-indicator-icon-size-3);
       }
     }
+    &:where(.rt-r-size-4) {
+      --select-item-height: var(--control-height-4);
+
+      & :where(.rt-SelectItem) {
+        font-size: var(--font-size-4);
+        letter-spacing: var(--letter-spacing-4);
+      }
+      & :where(.rt-SelectItemIndicatorIcon) {
+        width: var(--select-indicator-icon-size-4);
+        height: var(--select-indicator-icon-size-4);
+      }
+    }
   }
 }
 
@@ -331,11 +364,11 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* classic */
+/* raised */
 
-.rt-SelectTrigger:where(.rt-variant-classic) {
+.rt-SelectTrigger:where(.rt-variant-raised) {
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
   color: var(--accent-ink);
   background-color: var(--color-surface);
   box-shadow: var(--shadow-2);

package/src/components/select.props.tsx

@@ -1,3 +1,4 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import type React from 'react';
 
 import { colorPropDef } from '../props/color.prop.js';
@@ -5,7 +6,7 @@ import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 
 const selectRootPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
@@ -13,15 +14,13 @@ const selectRootPropDefs = {
   size: PropDef<(typeof sizes)[number]>;
 };
 
-const triggerVariants = ['classic', 'surface', 'soft', 'outline', 'ghost'] as const;
+const triggerVariants = ['raised', 'surface', 'soft', 'outline', 'ghost', 'classic'] as const;
 
 const selectTriggerPropDefs = {
-  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'surface' },
-  panelBackground: {
-    type: 'enum',
-    className: 'rt-panel-background',
-    values: ['solid', 'translucent'],
-  },
+  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'raised', parseValue: parseVariant },
+  material: { type: 'enum', values: ['solid', 'translucent'] },
+  /** @deprecated Use `material`. Removed in 0.15.0. */
+  panelBackground: { type: 'enum', values: ['solid', 'translucent'] },
   error: { type: 'boolean' },
   loading: { type: 'boolean' },
   disabled: { type: 'boolean' },
@@ -31,6 +30,7 @@ const selectTriggerPropDefs = {
   placeholder: { type: 'ReactNode' },
 } satisfies {
   variant: PropDef<(typeof triggerVariants)[number]>;
+  material: PropDef<'solid' | 'translucent'>;
   panelBackground: PropDef<'solid' | 'translucent'>;
   error: PropDef<boolean>;
   loading: PropDef<boolean>;
@@ -42,7 +42,7 @@ const selectTriggerPropDefs = {
 const contentVariants = ['solid', 'soft'] as const;
 
 const selectContentPropDefs = {
-  variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'solid' },
+  variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'soft' },
   ...colorPropDef,
 } satisfies {
   variant: PropDef<(typeof contentVariants)[number]>;

package/src/components/select.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
@@ -55,6 +57,8 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
       loading,
       disabled,
       readOnly,
+      material,
+      panelBackground: panelBackgroundProp,
       ...triggerProps
     } = extractProps(
       // Pass size value from the context to generate styles
@@ -65,8 +69,8 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
       marginPropDefs,
     );
 
-    // Extract panelBackground separately since it needs to be passed as data attribute
-    const { panelBackground } = props;
+    useDeprecatedPanelBackgroundWarning(panelBackgroundProp);
+    const panelBackground = material ?? panelBackgroundProp;
 
     const ariaProps = React.useMemo(
       () => ({
@@ -84,6 +88,7 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
           data-accent-color={color}
           data-radius={radius}
           data-panel-background={panelBackground}
+          data-material={panelBackground}
           data-error={error}
           data-loading={loading}
           {...triggerProps}
@@ -131,6 +136,7 @@ interface SelectContentProps
 }
 const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>(
   (props, forwardedRef) => {
+    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 context = React.useContext(SelectContext);
     const { className, children, color, container, ...contentProps } = extractProps(
       // Pass size value from the context to generate styles

package/src/components/tab-nav.tsx

@@ -1,3 +1,4 @@
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { NavigationMenu } from 'radix-ui';
@@ -20,11 +21,13 @@ interface TabNavRootProps
     MarginProps,
     TabNavOwnProps {}
 const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props, forwardedRef) => {
-  const { children, className, color, panelBackground, ...rootProps } = extractProps(
+  const { children, className, color, material: materialProp, panelBackground, ...rootProps } = extractProps(
     props,
     tabNavRootPropDefs,
     marginPropDefs,
   );
+  useDeprecatedPanelBackgroundWarning(props.panelBackground);
+  const material = materialProp ?? panelBackground;
   return (
     <NavigationMenu.Root
       className="rt-TabNavRoot"
@@ -35,7 +38,8 @@ const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props,
     >
       <NavigationMenu.List
         className={classNames('rt-reset', 'rt-BaseTabList', 'rt-TabNavList', className)}
-        data-panel-background={panelBackground}
+        data-panel-background={material}
+        data-material={material}
       >
         {children}
       </NavigationMenu.List>

package/src/components/tabs.tsx

@@ -1,3 +1,4 @@
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Tabs as TabsPrimitive } from 'radix-ui';
@@ -36,15 +37,18 @@ interface TabsListProps
     MarginProps,
     TabsListOwnProps {}
 const TabsList = React.forwardRef<TabsListElement, TabsListProps>((props, forwardedRef) => {
-  const { className, color, panelBackground, ...listProps } = extractProps(
+  const { className, color, material: materialProp, panelBackground, ...listProps } = extractProps(
     props,
     tabsListPropDefs,
     marginPropDefs,
   );
+  useDeprecatedPanelBackgroundWarning(props.panelBackground);
+  const material = materialProp ?? panelBackground;
   return (
     <TabsPrimitive.List
       data-accent-color={color}
-      data-panel-background={panelBackground}
+      data-panel-background={material}
+      data-material={material}
       {...listProps}
       asChild={false}
       ref={forwardedRef}

package/src/components/text-area.css

@@ -6,7 +6,7 @@
  * - Sizes: Responsive sizing and typography
  * - Variant palettes: Each variant defines its color scale as CSS variables
  * - Shared state logic: Single set of hover/focus/disabled selectors
- * - Special variants: classic (unique behavior, kept separate)
+ * - Special variants: raised (unique behavior, kept separate)
  * - Error states: Override colors for error styling
  */
 
@@ -185,6 +185,19 @@
         letter-spacing: var(--letter-spacing-3);
       }
     }
+    &:where(.rt-r-size-4) {
+      min-height: var(--space-10);
+      border-radius: var(--radius-4);
+
+      & :where(.rt-TextAreaInput) {
+        /* Clip text to border */
+        --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
+        font-size: var(--font-size-4);
+        line-height: var(--line-height-4);
+        letter-spacing: var(--letter-spacing-4);
+      }
+    }
   }
 }
 
@@ -413,8 +426,8 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* Classic variant - uses --color-surface and shadow */
-.rt-TextAreaRoot:where(.rt-variant-classic) {
+/* Raised variant - uses --color-surface and shadow */
+.rt-TextAreaRoot:where(.rt-variant-raised) {
   --text-area-border-width: 0px;
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
@@ -570,8 +583,8 @@
   }
 }
 
-/* Error classic variant */
-.rt-TextAreaRoot:where(.rt-error.rt-variant-classic) {
+/* Error raised variant */
+.rt-TextAreaRoot:where(.rt-error.rt-variant-raised) {
   box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
   
   @media (hover: hover) {

package/src/components/text-area.props.tsx

@@ -1,10 +1,11 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import { colorPropDef } from '../props/color.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'surface', 'soft', 'outline', 'ghost'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
+const variants = ['raised', 'surface', 'soft', 'outline', 'ghost', 'classic'] as const;
 const resizeValues = ['none', 'vertical', 'horizontal', 'both'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
@@ -12,14 +13,15 @@ const materials = ['solid', 'translucent'] as const;
 // prettier-ignore
 const textAreaPropDefs = {
   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 },
   resize: { type: 'enum', className: 'rt-r-resize', values: resizeValues,  responsive: true },
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   material: { type: 'enum', values: materials, default: undefined },
   // Error and validation props
   error: { type: 'boolean', default: false },
   errorMessage: { type: 'string', default: undefined },
-  isInvalid: { type: 'boolean', default: false },
+  /** @deprecated Use `error`. Removed in 0.15.0. */
+  isInvalid: { type: 'boolean' },
   required: { type: 'boolean', default: false },
   // Accessibility props
   'aria-describedby': { type: 'string', default: undefined },