@womp/kookie-ui 0.13.2 → 0.14.0

package/src/components/accordion.css

@@ -72,7 +72,7 @@
   }
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-classic)) {
+:where(.rt-AccordionRoot:where(.rt-variant-raised)) {
   /* Base state: solid surface for solid panels */
   background-color: var(--color-surface-solid);
   box-shadow: var(--shadow-2);
@@ -243,9 +243,11 @@
 }
 
 /* Trigger hover states */
-:where(.rt-AccordionTrigger:hover) {
-  background-color: var(--gray-a3);
-  transform: translateY(-1px);
+@media (hover: hover) {
+  :where(.rt-AccordionTrigger:hover) {
+    background-color: var(--gray-a3);
+    transform: translateY(-1px);
+  }
 }
 
 :where(.rt-AccordionTrigger:active) {
@@ -254,120 +256,130 @@
 }
 
 /* Trigger colour reads the loud ink in every variant; gray resolves to step 12 */
-:where(.rt-AccordionRoot:where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface, .rt-variant-ghost, .rt-variant-classic)) .rt-AccordionTrigger {
+:where(.rt-AccordionRoot:where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface, .rt-variant-ghost, .rt-variant-raised)) .rt-AccordionTrigger {
   color: var(--accent-ink);
 }
 
-/* Classic variant shadow states */
-:where(.rt-AccordionRoot:where(.rt-variant-classic):hover) {
-  background-color: var(--accent-2);
-  box-shadow: var(--shadow-2);
-
-  /* Theme-level translucent override for hover */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-  }
-
-  /* Component-level overrides for hover */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+/* Raised variant shadow states */
+@media (hover: hover) {
+  :where(.rt-AccordionRoot:where(.rt-variant-raised):hover) {
     background-color: var(--accent-2);
-  }
-
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+    box-shadow: var(--shadow-2);
+  
+    /* Theme-level translucent override for hover */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+    }
+  
+    /* Component-level overrides for hover */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--accent-2);
+    }
+  
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+    }
   }
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-classic):focus-within) {
+:where(.rt-AccordionRoot:where(.rt-variant-raised):focus-within) {
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
   transition: var(--transition-text-field);
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-soft)) :where(.rt-AccordionTrigger:hover) {
-  background-color: var(--accent-4);
-  
-  /* Theme-level translucent override for hover */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-  }
-
-  /* Component-level overrides for hover */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+@media (hover: hover) {
+  :where(.rt-AccordionRoot:where(.rt-variant-soft)) :where(.rt-AccordionTrigger:hover) {
     background-color: var(--accent-4);
-  }
-
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
-  }
-}
-
-:where(.rt-AccordionRoot:where(.rt-variant-outline)) :where(.rt-AccordionTrigger:hover) {
-  background-color: var(--accent-2);
-  box-shadow: inset 0 0 0 1px var(--accent-7);
+    
+    /* Theme-level translucent override for hover */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
+    }
   
-  /* Theme-level translucent override for hover */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-    box-shadow: inset 0 0 0 1px var(--accent-a7);
+    /* Component-level overrides for hover */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--accent-4);
+    }
+  
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
+    }
   }
+}
 
-  /* Component-level overrides for hover */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+@media (hover: hover) {
+  :where(.rt-AccordionRoot:where(.rt-variant-outline)) :where(.rt-AccordionTrigger:hover) {
     background-color: var(--accent-2);
     box-shadow: inset 0 0 0 1px var(--accent-7);
-  }
-
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-    box-shadow: inset 0 0 0 1px var(--accent-a7);
-  }
-}
-
-:where(.rt-AccordionRoot:where(.rt-variant-surface)) :where(.rt-AccordionTrigger:hover) {
-  background-color: var(--accent-3);
-  box-shadow: inset 0 0 0 1px var(--accent-7);
+    
+    /* Theme-level translucent override for hover */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+      box-shadow: inset 0 0 0 1px var(--accent-a7);
+    }
   
-  /* Theme-level translucent override for hover */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    box-shadow: inset 0 0 0 1px var(--accent-a7);
+    /* Component-level overrides for hover */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--accent-2);
+      box-shadow: inset 0 0 0 1px var(--accent-7);
+    }
+  
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+      box-shadow: inset 0 0 0 1px var(--accent-a7);
+    }
   }
+}
 
-  /* Component-level overrides for hover */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+@media (hover: hover) {
+  :where(.rt-AccordionRoot:where(.rt-variant-surface)) :where(.rt-AccordionTrigger:hover) {
     background-color: var(--accent-3);
     box-shadow: inset 0 0 0 1px var(--accent-7);
-  }
-
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    box-shadow: inset 0 0 0 1px var(--accent-a7);
-  }
-}
-
-:where(.rt-AccordionRoot:where(.rt-variant-ghost)) :where(.rt-AccordionTrigger:hover) {
-  /* Base state: solid accent for solid panels */
-  background-color: var(--accent-3);
+    
+    /* Theme-level translucent override for hover */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+      box-shadow: inset 0 0 0 1px var(--accent-a7);
+    }
   
-  /* Theme-level translucent override for hover */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+    /* Component-level overrides for hover */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--accent-3);
+      box-shadow: inset 0 0 0 1px var(--accent-7);
+    }
+  
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+      box-shadow: inset 0 0 0 1px var(--accent-a7);
+    }
   }
+}
 
-  /* Component-level overrides for hover */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+@media (hover: hover) {
+  :where(.rt-AccordionRoot:where(.rt-variant-ghost)) :where(.rt-AccordionTrigger:hover) {
+    /* Base state: solid accent for solid panels */
     background-color: var(--accent-3);
-  }
-
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-  }
-
-  /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-  /* :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+    
+    /* Theme-level translucent override for hover */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+    }
+  
+    /* Component-level overrides for hover */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--accent-3);
+    }
+  
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+    }
+  
+    /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+    /* :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
     backdrop-filter: none !important;
   } */
+  }
 }
 
 /* Trigger focus states */
@@ -469,8 +481,10 @@
 }
 
 /* Color accent support */
-:where(.rt-AccordionRoot:where(.rt-variant-soft)[data-accent-color]) :where(.rt-AccordionTrigger:hover) {
-  background-color: var(--accent-a4);
+@media (hover: hover) {
+  :where(.rt-AccordionRoot:where(.rt-variant-soft)[data-accent-color]) :where(.rt-AccordionTrigger:hover) {
+    background-color: var(--accent-a4);
+  }
 }
 
 /* Reduced motion */
@@ -487,8 +501,10 @@
     background-color: var(--accent-2);
   }
   
-  :where(.rt-AccordionRoot[data-material='translucent']) :where(.rt-AccordionTrigger:hover) {
-    background-color: var(--accent-4);
+  @media (hover: hover) {
+    :where(.rt-AccordionRoot[data-material='translucent']) :where(.rt-AccordionTrigger:hover) {
+      background-color: var(--accent-4);
+    }
   }
 }
 
@@ -587,4 +603,11 @@
   :where(.rt-AccordionRoot.rt-variant-ghost[data-panel-background='translucent'], .rt-AccordionRoot.rt-variant-ghost[data-material='translucent']:hover) {
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
   }
-} 
+} 
+/* Disabled: the same treatment as a disabled menu item. It keeps no hover fill or lift. */
+.rt-AccordionTrigger:where([data-disabled]) {
+  color: var(--gray-a8);
+  cursor: default;
+  background-color: transparent;
+  transform: none;
+}

package/src/components/accordion.props.tsx

@@ -1,3 +1,4 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
@@ -5,13 +6,13 @@ 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 = ['classic', 'soft', 'surface', 'outline', 'ghost'] as const;
+const variants = ['raised', 'soft', 'surface', 'outline', 'ghost', 'classic'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const accordionRootPropDefs = {
   ...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 },
   ...colorPropDef,
   ...radiusPropDef,
   material: { type: 'enum', values: panelBackgrounds, default: undefined },

package/src/components/app-bar.tsx

@@ -1,3 +1,4 @@
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 
@@ -43,8 +44,12 @@ interface AppBarRootProps extends Omit<CardProps, 'asChild'> {
  * This component was called `Toolbar` until 0.11.0. It is not a `role="toolbar"`: for a row of
  * controls with one tab stop and arrow-key navigation, use `Toolbar`.
  */
+/** @deprecated Removed in 0.15.0. Put a `Toolbar` in `Shell.Header`, or at the top edge of the pane that owns it. */
 const AppBarRoot = React.forwardRef<AppBarRootElement, AppBarRootProps>(
   (props, forwardedRef) => {
+    warnDeprecated(
+      'AppBar is deprecated and will be removed in 0.15.0. Put a Toolbar in Shell.Header, or at the top edge of the pane that owns it.',
+    );
     const {
       anchor = 'top',
       floating = false,

package/src/components/avatar.css

@@ -6,7 +6,7 @@
  * - Sizes: Responsive avatar dimensions and border-radius
  * - Variant palettes: Each variant defines its color scale as CSS variables
  * - Shared state logic: Single set of hover/active/disabled selectors
- * - Special variants: classic, solid (unique behavior, kept separate)
+ * - Special variants: raised, solid (unique behavior, kept separate)
  * - Image, object-fit, fallback, status indicator, badge
  */
 
@@ -166,63 +166,63 @@
       --avatar-size: var(--space-5);
       --avatar-fallback-one-letter-font-size: var(--font-size-2);
       --avatar-fallback-two-letters-font-size: var(--font-size-1);
-      border-radius: max(var(--radius-1), var(--radius-full));
+      border-radius: var(--radius-pill-1);
       letter-spacing: var(--letter-spacing-1);
     }
     &:where(.rt-r-size-2) {
       --avatar-size: var(--space-6);
       --avatar-fallback-one-letter-font-size: var(--font-size-3);
       --avatar-fallback-two-letters-font-size: var(--font-size-2);
-      border-radius: max(var(--radius-2), var(--radius-full));
+      border-radius: var(--radius-pill-2);
       letter-spacing: var(--letter-spacing-2);
     }
     &:where(.rt-r-size-3) {
       --avatar-size: var(--space-7);
       --avatar-fallback-one-letter-font-size: var(--font-size-4);
       --avatar-fallback-two-letters-font-size: var(--font-size-3);
-      border-radius: max(var(--radius-3), var(--radius-full));
+      border-radius: var(--radius-pill-3);
       letter-spacing: var(--letter-spacing-3);
     }
     &:where(.rt-r-size-4) {
       --avatar-size: var(--space-8);
       --avatar-fallback-one-letter-font-size: var(--font-size-5);
       --avatar-fallback-two-letters-font-size: var(--font-size-4);
-      border-radius: max(var(--radius-4), var(--radius-full));
+      border-radius: var(--radius-pill-4);
       letter-spacing: var(--letter-spacing-4);
     }
     &:where(.rt-r-size-5) {
       --avatar-size: var(--space-9);
       --avatar-fallback-one-letter-font-size: var(--font-size-6);
       --avatar-fallback-two-letters-font-size: var(--font-size-5);
-      border-radius: max(var(--radius-5), var(--radius-full));
+      border-radius: var(--radius-pill-5);
       letter-spacing: var(--letter-spacing-5);
     }
     &:where(.rt-r-size-6) {
       --avatar-size: 80px;
       --avatar-fallback-one-letter-font-size: var(--font-size-7);
       --avatar-fallback-two-letters-font-size: var(--font-size-6);
-      border-radius: max(var(--radius-6), var(--radius-full));
+      border-radius: var(--radius-pill-6);
       letter-spacing: var(--letter-spacing-6);
     }
     &:where(.rt-r-size-7) {
       --avatar-size: 96px;
       --avatar-fallback-one-letter-font-size: var(--font-size-7);
       --avatar-fallback-two-letters-font-size: var(--font-size-6);
-      border-radius: max(var(--radius-7), var(--radius-full));
+      border-radius: var(--radius-pill-7);
       letter-spacing: var(--letter-spacing-7);
     }
     &:where(.rt-r-size-8) {
       --avatar-size: 128px;
       --avatar-fallback-one-letter-font-size: var(--font-size-8);
       --avatar-fallback-two-letters-font-size: var(--font-size-7);
-      border-radius: max(var(--radius-8), var(--radius-full));
+      border-radius: var(--radius-pill-8);
       letter-spacing: var(--letter-spacing-8);
     }
     &:where(.rt-r-size-9) {
       --avatar-size: 160px;
       --avatar-fallback-one-letter-font-size: var(--font-size-9);
       --avatar-fallback-two-letters-font-size: var(--font-size-8);
-      border-radius: max(var(--radius-9), var(--radius-full));
+      border-radius: var(--radius-pill-9);
       letter-spacing: var(--letter-spacing-9);
     }
   }
@@ -438,10 +438,10 @@
   }
 }
 
-/* Classic variant - uses --color-surface and gray interactive states */
-.rt-AvatarRoot:where(.rt-variant-classic) {
+/* Raised variant - uses --color-surface and gray interactive states */
+.rt-AvatarRoot:where(.rt-variant-raised) {
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
 
   & :where(.rt-AvatarFallback) {
     position: relative;
@@ -459,8 +459,8 @@
   }
 }
 
-/* Classic interactive states */
-.rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-classic) {
+/* Raised interactive states */
+.rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-raised) {
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled])) {
       background-color: color-mix(in srgb, var(--gray-a2) calc(var(--material-alpha) * 100%), var(--gray-2) var(--material-blend));
@@ -474,7 +474,7 @@
   }
 
   &:where(:active:not(:disabled, [data-disabled])) {
-    padding-top: var(--classic-active-padding-offset-2);
+    padding-top: var(--raised-active-padding-offset-2);
     padding-bottom: 0;
     background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
 

package/src/components/avatar.props.tsx

@@ -1,11 +1,12 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
-import { accentColorPropDef, accentColors } from '../props/color.prop.js';
+import { grayAccentColorPropDef, accentColors } 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', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
-const variants = ['classic', 'solid', 'soft', 'surface', 'outline'] as const;
+const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'classic'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
 const objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as const;
@@ -13,8 +14,8 @@ const objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as co
 const avatarPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '3', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
-  ...accentColorPropDef,
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
+  ...grayAccentColorPropDef,
   ...radiusPropDef,
   fallback: { type: 'ReactNode', required: true },
   material: { type: 'enum', values: materials, default: undefined },

package/src/components/badge.css

@@ -88,7 +88,7 @@
       letter-spacing: var(--letter-spacing-1);
       padding: var(--space-1) var(--space-2);
       gap: calc(var(--space-1) * 1.5);
-      border-radius: max(var(--radius-1), var(--radius-full));
+      border-radius: var(--radius-pill-1);
       
       &:where(.rt-variant-ghost) {
         padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.25);
@@ -101,7 +101,7 @@
       letter-spacing: var(--letter-spacing-2);
       padding: var(--space-1) calc(var(--space-2) * 1.25);
       gap: var(--space-2);
-      border-radius: max(var(--radius-2), var(--radius-full));
+      border-radius: var(--radius-pill-2);
       
       &:where(.rt-variant-ghost) {
         padding: calc(var(--space-1) * 0.75) var(--space-2);
@@ -114,7 +114,7 @@
       letter-spacing: var(--letter-spacing-3);
       padding: calc(var(--space-1) * 1.25) calc(var(--space-2) * 1.5);
       gap: calc(var(--space-2) * 1.25);
-      border-radius: max(var(--radius-3), var(--radius-full));
+      border-radius: var(--radius-pill-3);
       
       &:where(.rt-variant-ghost) {
         padding: var(--space-1) calc(var(--space-2) * 1.25);
@@ -195,27 +195,27 @@
   color: var(--accent-ink);
 }
 
-/* classic */
+/* raised */
 
-.rt-Badge:where(.rt-variant-classic) {
+.rt-Badge:where(.rt-variant-raised) {
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
   color: var(--accent-ink);
   box-shadow: var(--shadow-2);
   transition: var(--transition-text-field);
 
-  --classic-surface: var(--color-surface-solid);
-  background-color: var(--classic-surface);
+  --raised-surface: var(--color-surface-solid);
+  background-color: var(--raised-surface);
 
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    --classic-surface: var(--color-surface-translucent);
+    --raised-surface: var(--color-surface-translucent);
   }
 
   &:where([data-panel-background='solid'], [data-material='solid']) {
-    --classic-surface: var(--color-surface-solid);
+    --raised-surface: var(--color-surface-solid);
   }
 
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    --classic-surface: var(--color-surface-translucent);
+    --raised-surface: var(--color-surface-translucent);
   }
 }

package/src/components/badge.props.tsx

@@ -1,19 +1,20 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
-import { accentColorPropDef } from '../props/color.prop.js';
+import { grayAccentColorPropDef } from '../props/color.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
-const variants = ['solid', 'soft', 'surface', 'outline', 'ghost', 'classic'] 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 badgePropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
-  ...accentColorPropDef,
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
+  ...grayAccentColorPropDef,
   ...radiusPropDef,
   material: { type: 'enum', values: materials, default: undefined },
   /**

package/src/components/button.css

@@ -193,7 +193,7 @@
  * VARIANTS                                                                                        *
  *                                                                                                 *
  * Button variants provide different visual contexts and hierarchies:
- * - classic: Premium, sophisticated appearance
+ * - raised: lifted off its ground, with an edge and a shadow
  * - solid: Primary actions that should be noticed first
  * - soft: Content-heavy interfaces, natural integration
  * - surface: Elevated appearance with subtle depth

package/src/components/button.tsx

@@ -4,6 +4,7 @@ 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';
 
 /**
@@ -70,6 +71,11 @@ type ButtonOwnProps = Omit<BaseButtonProps, 'as'> &
      * 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.
+     */
+    iconOnly?: boolean;
   };
 
 /**
@@ -87,6 +93,20 @@ type ButtonProps<C extends React.ElementType = 'button'> = ButtonOwnProps & {
  */
 type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonProps<C> & { ref?: React.ForwardedRef<ButtonElement> }) => React.ReactElement | null;
 
+/**
+ * An icon-only button must have an accessible name. Throws in development, logs otherwise.
+ */
+function validateIconButtonName(props: Record<string, unknown>) {
+  if (props['aria-label'] || props['aria-labelledby'] || props.children) return;
+  const errorMessage =
+    'IconButton: Icon buttons must have an accessible name. Please provide either:' +
+    '\n- aria-label prop with descriptive text' +
+    '\n- aria-labelledby prop referencing a label element' +
+    '\n- or visible text children';
+  if (process.env.NODE_ENV === 'development') throw new Error(errorMessage);
+  console.error(errorMessage);
+}
+
 /**
  * Button component for triggering actions throughout your interface
  *
@@ -112,7 +132,7 @@ type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonPro
  */
 const Button = React.forwardRef(
   (
-    { className, style, tooltip, tooltipSide = 'top', tooltipAlign = 'center', tooltipDelayDuration, tooltipDisableHoverableContent, overrideStyles, ...props }: ButtonProps,
+    { className, style, tooltip, tooltipSide = 'top', tooltipAlign = 'center', tooltipDelayDuration, tooltipDisableHoverableContent, overrideStyles, iconOnly = false, ...props }: ButtonProps,
     forwardedRef: React.ForwardedRef<ButtonElement>,
   ) => {
     // Use shared tooltip wrapper hook for accessibility props
@@ -156,7 +176,22 @@ const Button = React.forwardRef(
     // Combine override styles with user-provided styles
     const combinedStyle = React.useMemo(() => (overrideVars ? { ...overrideVars, ...style } : style), [overrideVars, style]);
 
-    const button = <BaseButton {...props} {...tooltipAccessibilityProps} ref={forwardedRef} className={classNames('rt-Button', className)} style={combinedStyle} />;
+    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.');
+      }
+    }
+
+    const button = (
+      <BaseButton
+        {...props}
+        {...tooltipAccessibilityProps}
+        ref={forwardedRef}
+        className={classNames(iconOnly ? 'rt-IconButton' : 'rt-Button', className)}
+        style={combinedStyle}
+      />
+    );
 
     // If no tooltip is provided, return the button as-is for better performance
     if (!hasTooltip) {