@womp/kookie-ui 0.13.2 → 0.14.0

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/shell.css

@@ -802,11 +802,16 @@
   block-size: 2px;
 }
 
-.rt-ShellResizer:hover::before,
 .rt-ShellResizer[data-dragging]::before {
   background-color: var(--gray-a6);
 }
 
+@media (hover: hover) {
+  .rt-ShellResizer:hover::before {
+    background-color: var(--gray-a6);
+  }
+}
+
 .rt-ShellResizer:focus-visible {
   outline: none;
 }

package/src/components/sidebar.css

@@ -230,19 +230,19 @@
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1 .rt-SidebarMenuIconWrapper {
   padding: var(--space-2) var(--space-2);
-  border-radius: max(var(--radius-1), var(--radius-full));
+  border-radius: var(--radius-pill-1);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2 .rt-SidebarMenuIconWrapper {
   padding: var(--space-2);
-  border-radius: max(var(--radius-2), var(--radius-full));
+  border-radius: var(--radius-pill-2);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3 .rt-SidebarMenuIconWrapper {
   padding: var(--space-3);
-  border-radius: max(var(--radius-3), var(--radius-full));
+  border-radius: var(--radius-pill-3);
 }
 
 /* Label styling in thin mode - outside the background area */
@@ -266,40 +266,70 @@
 }
 
 /* Highlighted label gets slightly darker color */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled]) .rt-SidebarMenuLabel) {
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuLabel) {
   color: var(--accent-ink);
 }
 
+@media (hover: hover) {
+  :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuLabel) {
+    color: var(--accent-ink);
+  }
+}
+
 /* Remove background from button itself in thin mode - styles are on icon wrapper */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled])),
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton[data-active]) {
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled])), :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton[data-active]) {
   background-color: transparent !important;
 }
 
+@media (hover: hover) {
+  :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where(:hover):not([data-disabled])) {
+    background-color: transparent !important;
+  }
+}
+
 /* Soft variant icon wrapper states in thin mode */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
   background-color: var(--accent-4);
 }
 
+@media (hover: hover) {
+  :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+    background-color: var(--accent-4);
+  }
+}
+
 :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
   background-color: var(--accent-3);
 }
 
 /* Translucent panel support for soft variant */
-:where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+:where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
   background-color: var(--accent-a4);
 }
 
+@media (hover: hover) {
+  :where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+    background-color: var(--accent-a4);
+  }
+}
+
 :where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
   background-color: var(--accent-a3);
 }
 
 /* Solid variant icon wrapper states in thin mode */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
   background-color: var(--accent-solid);
   color: var(--accent-solid-contrast);
 }
 
+@media (hover: hover) {
+  :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+    background-color: var(--accent-solid);
+    color: var(--accent-solid-contrast);
+  }
+}
+
 :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
   background-color: var(--accent-solid);
   color: var(--accent-solid-contrast);
@@ -786,7 +816,7 @@
   }
 
   /* Hover/highlighted state for solid variant - EXACT match to base menu */
-  & :where(.rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled])) {
+  & :where(.rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled])) {
     background-color: var(--accent-solid);
     color: var(--accent-solid-contrast);
 
@@ -811,6 +841,33 @@
     }
   }
 
+  @media (hover: hover) {
+    & :where(.rt-SidebarMenuButton:where(:hover):not([data-disabled])) {
+      background-color: var(--accent-solid);
+      color: var(--accent-solid-contrast);
+  
+      & :where(.rt-BaseMenuSubTriggerIcon) {
+        color: var(--accent-solid-contrast);
+      }
+  
+      /* Force all text elements to inherit hover color, including those with color="gray" */
+      & :where(.rt-Text) {
+        color: inherit !important;
+      }
+  
+      /* Also target any element with data-accent-color="gray" */
+      & :where([data-accent-color='gray']:not(.rt-Badge)) {
+        color: inherit !important;
+      }
+  
+      /* FIX: Ensure badges maintain their own styling and don't inherit hover colors */
+      & :where(.rt-Badge) {
+        color: var(--accent-solid-badge-contrast) !important;
+        background-color: var(--accent-solid-badge) !important;
+      }
+    }
+  }
+
   /* Active navigation state for solid variant - same as highlighted */
   & :where(.rt-SidebarMenuButton[data-active]) {
     background-color: var(--accent-solid);
@@ -888,7 +945,7 @@
   }
 
   /* Hover/highlighted state for soft variant - EXACT match to base menu */
-  & :where(.rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled])) {
+  & :where(.rt-SidebarMenuButton:where([data-highlighted]):not([data-disabled])) {
     /* Base state: solid accent for solid panels */
     background-color: var(--accent-4);
 
@@ -914,6 +971,34 @@
     }
   }
 
+  @media (hover: hover) {
+    & :where(.rt-SidebarMenuButton:where(:hover):not([data-disabled])) {
+      /* Base state: solid accent for solid panels */
+      background-color: var(--accent-4);
+  
+      /* Theme-level translucent override */
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--accent-a4);
+      }
+  
+      /* Component-level overrides (higher specificity) */
+      &:where([data-panel-background='solid']) {
+        background-color: var(--accent-4);
+        backdrop-filter: none;
+        --backdrop-filter-components: none;
+      }
+  
+      &:where([data-panel-background='translucent']) {
+        background-color: var(--accent-a4);
+      }
+  
+      /* In soft variant, lift muted text a step while keeping the hierarchy */
+      & :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
+        color: var(--gray-11) !important;
+      }
+    }
+  }
+
   /* Active navigation state for soft variant - use accent-3 like sub-trigger */
   & :where(.rt-SidebarMenuButton[data-active]) {
     /* Base state: solid accent for solid panels */
@@ -1038,42 +1123,54 @@
 }
 
 /* Remove hover background from thin trigger button itself (styles live on icon wrapper) */
-:where(.rt-SidebarContainer[data-presentation='thin']) :where(.rt-SidebarSearchTrigger:where(:hover, [data-state='open'])) {
+:where(.rt-SidebarContainer[data-presentation='thin']) :where(.rt-SidebarSearchTrigger:where([data-state='open'])) {
   background-color: transparent !important;
 }
 
+@media (hover: hover) {
+  :where(.rt-SidebarContainer[data-presentation='thin']) :where(.rt-SidebarSearchTrigger:where(:hover)) {
+    background-color: transparent !important;
+  }
+}
+
 /* Search trigger icon wrapper - size-specific padding (mirrors Content-scoped rules) */
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-SidebarContainer[data-presentation='thin'].rt-r-size-1 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
   padding: var(--space-2) var(--space-2);
-  border-radius: max(var(--radius-1), var(--radius-full));
+  border-radius: var(--radius-pill-1);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-SidebarContainer[data-presentation='thin'].rt-r-size-2 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
   padding: var(--space-2);
-  border-radius: max(var(--radius-2), var(--radius-full));
+  border-radius: var(--radius-pill-2);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-SidebarContainer[data-presentation='thin'].rt-r-size-3 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
   padding: var(--space-3);
-  border-radius: max(var(--radius-3), var(--radius-full));
+  border-radius: var(--radius-pill-3);
 }
 
 /* Search trigger icon wrapper hover (soft variant) */
-:where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-soft) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
-  background-color: var(--accent-4);
+@media (hover: hover) {
+  :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-soft) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+    background-color: var(--accent-4);
+  }
 }
 
-:where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-soft) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
-  background-color: var(--accent-a4);
+@media (hover: hover) {
+  :where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-soft) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+    background-color: var(--accent-a4);
+  }
 }
 
 /* Search trigger icon wrapper hover (solid variant) */
-:where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-solid) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
-  background-color: var(--accent-solid);
-  color: var(--accent-solid-contrast);
+@media (hover: hover) {
+  :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-solid) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
+    background-color: var(--accent-solid);
+    color: var(--accent-solid-contrast);
+  }
 }
 
 /* Popover inner wrapper - provide base menu tokens for portal-rendered items */
@@ -1139,9 +1236,11 @@
 }
 
 /* Popover menu button hover (soft variant) */
-/* stylelint-disable-next-line selector-max-specificity */
-.rt-SidebarSearchPopover .rt-SidebarMenuButton:where(:hover):not([data-disabled]) {
-  background-color: var(--accent-a4);
+@media (hover: hover) {
+  /* stylelint-disable-next-line selector-max-specificity */
+  .rt-SidebarSearchPopover .rt-SidebarMenuButton:where(:hover):not([data-disabled]) {
+    background-color: var(--accent-a4);
+  }
 }
 
 /* Popover menu button focus (arrow-key navigation) */
@@ -1213,9 +1312,11 @@
   transition: color 100ms;
 }
 
-/* stylelint-disable-next-line selector-max-specificity */
-.rt-SidebarSearchClear:hover {
-  color: var(--gray-a11);
+@media (hover: hover) {
+  /* stylelint-disable-next-line selector-max-specificity */
+  .rt-SidebarSearchClear:hover {
+    color: var(--gray-a11);
+  }
 }
 
 /* Size-specific overrides (need real selectors to beat base .rt-SidebarSearchIcon / .rt-SidebarSearchInput) */

package/src/components/slider.css

@@ -321,14 +321,16 @@
   pointer-events: auto;
 }
 
-.rt-SliderTick:where(:hover) {
-  :where(.rt-SliderTickMark) {
-    background-color: var(--gray-12) !important;
-  }
-  
-  :where(.rt-SliderTickLabel) {
-    color: var(--gray-12) !important;
-    font-weight: var(--font-weight-medium);
+@media (hover: hover) {
+  .rt-SliderTick:where(:hover) {
+    :where(.rt-SliderTickMark) {
+      background-color: var(--gray-12) !important;
+    }
+    
+    :where(.rt-SliderTickLabel) {
+      color: var(--gray-12) !important;
+      font-weight: var(--font-weight-medium);
+    }
   }
 }
 

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/table.css

@@ -89,26 +89,6 @@
         line-height: var(--line-height-3);
       }
     }
-    &:where(.rt-r-size-4) {
-      --table-border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-4)));
-      --table-cell-padding: var(--space-5);
-      --table-cell-min-height: var(--space-9);
-
-      & :where(.rt-TableRootTable) {
-        font-size: var(--font-size-3);
-        line-height: var(--line-height-3);
-      }
-    }
-    &:where(.rt-r-size-5) {
-      --table-border-radius: min(var(--radius-surface-9), calc(var(--radius-surface-5) + var(--space-5)));
-      --table-cell-padding: var(--space-6);
-      --table-cell-min-height: var(--space-10);
-
-      & :where(.rt-TableRootTable) {
-        font-size: var(--font-size-4);
-        line-height: var(--line-height-4);
-      }
-    }
   }
 }
 

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 },

package/src/components/text-area.tsx

@@ -1,3 +1,4 @@
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 
@@ -31,6 +32,9 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((props, forwar
 
   // Determine invalid state
   const isInvalid = textAreaProps.error || textAreaProps.isInvalid;
+  if (textAreaProps.isInvalid !== undefined && textAreaProps.isInvalid !== false) {
+    warnDeprecated('`isInvalid` is deprecated and will be removed in 0.15.0. Use `error`, the one name every field uses for an invalid value.');
+  }
 
   // Build aria-describedby string
   const describedBy = React.useMemo(() => {
@@ -79,7 +83,7 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((props, forwar
         {...ariaProps}
       />
       {textAreaProps.errorMessage && (
-        <div id={errorId} className="rt-TextAreaErrorMessage" role="alert" aria-live="polite">
+        <div id={errorId} className="rt-TextAreaErrorMessage" role="alert">
           {textAreaProps.errorMessage}
         </div>
       )}