@womp/kookie-ui 0.13.3 → 0.14.0

package/schemas/button.json

@@ -79,17 +79,18 @@
           ]
         },
         "variant": {
-          "default": "solid",
+          "default": "raised",
           "description": "Visual variant that determines the button's appearance and context",
           "type": "string",
           "enum": [
-            "classic",
+            "raised",
             "solid",
             "soft",
             "surface",
             "outline",
             "ghost",
-            "override"
+            "override",
+            "classic"
           ]
         },
         "color": {

package/schemas/icon-button.json

@@ -79,17 +79,18 @@
           ]
         },
         "variant": {
-          "default": "solid",
+          "default": "raised",
           "description": "Visual variant that determines the button's appearance and context",
           "type": "string",
           "enum": [
-            "classic",
+            "raised",
             "solid",
             "soft",
             "surface",
             "outline",
             "ghost",
-            "override"
+            "override",
+            "classic"
           ]
         },
         "color": {

package/schemas/index.json

@@ -86,17 +86,18 @@
               ]
             },
             "variant": {
-              "default": "solid",
+              "default": "raised",
               "description": "Visual variant that determines the button's appearance and context",
               "type": "string",
               "enum": [
-                "classic",
+                "raised",
                 "solid",
                 "soft",
                 "surface",
                 "outline",
                 "ghost",
-                "override"
+                "override",
+                "classic"
               ]
             },
             "color": {
@@ -370,17 +371,18 @@
               ]
             },
             "variant": {
-              "default": "solid",
+              "default": "raised",
               "description": "Visual variant that determines the button's appearance and context",
               "type": "string",
               "enum": [
-                "classic",
+                "raised",
                 "solid",
                 "soft",
                 "surface",
                 "outline",
                 "ghost",
-                "override"
+                "override",
+                "classic"
               ]
             },
             "color": {
@@ -905,17 +907,18 @@
               ]
             },
             "variant": {
-              "default": "solid",
+              "default": "raised",
               "description": "Visual variant that determines the button's appearance and context",
               "type": "string",
               "enum": [
-                "classic",
+                "raised",
                 "solid",
                 "soft",
                 "surface",
                 "outline",
                 "ghost",
-                "override"
+                "override",
+                "classic"
               ]
             },
             "color": {
@@ -1223,17 +1226,18 @@
               ]
             },
             "variant": {
-              "default": "solid",
+              "default": "raised",
               "description": "Visual variant that determines the button's appearance and context",
               "type": "string",
               "enum": [
-                "classic",
+                "raised",
                 "solid",
                 "soft",
                 "surface",
                 "outline",
                 "ghost",
-                "override"
+                "override",
+                "classic"
               ]
             },
             "color": {
@@ -1766,17 +1770,18 @@
               ]
             },
             "variant": {
-              "default": "solid",
+              "default": "raised",
               "description": "Visual variant that determines the button's appearance and context",
               "type": "string",
               "enum": [
-                "classic",
+                "raised",
                 "solid",
                 "soft",
                 "surface",
                 "outline",
                 "ghost",
-                "override"
+                "override",
+                "classic"
               ]
             },
             "color": {

package/schemas/toggle-button.json

@@ -79,17 +79,18 @@
           ]
         },
         "variant": {
-          "default": "solid",
+          "default": "raised",
           "description": "Visual variant that determines the button's appearance and context",
           "type": "string",
           "enum": [
-            "classic",
+            "raised",
             "solid",
             "soft",
             "surface",
             "outline",
             "ghost",
-            "override"
+            "override",
+            "classic"
           ]
         },
         "color": {

package/schemas/toggle-icon-button.json

@@ -79,17 +79,18 @@
           ]
         },
         "variant": {
-          "default": "solid",
+          "default": "raised",
           "description": "Visual variant that determines the button's appearance and context",
           "type": "string",
           "enum": [
-            "classic",
+            "raised",
             "solid",
             "soft",
             "surface",
             "outline",
             "ghost",
-            "override"
+            "override",
+            "classic"
           ]
         },
         "color": {

package/src/components/_internal/base-button.css

@@ -10,7 +10,7 @@
  * - Sizes: Responsive height and border-radius
  * - Variant palettes: Each variant defines its color scale as CSS variables
  * - Shared state logic: Single set of hover/active/open/disabled selectors
- * - Special variants: classic, override, solid (unique behavior, kept separate)
+ * - Special variants: raised, override, solid (unique behavior, kept separate)
  * - Toggle states: Pressed state overrides for all variants
  */
 
@@ -444,8 +444,8 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* Classic variant - uses --color-surface and gray interactive states */
-.rt-BaseButton:where(.rt-variant-classic) {
+/* Raised variant - uses --color-surface and gray interactive states */
+.rt-BaseButton:where(.rt-variant-raised) {
   position: relative;
   color: var(--accent-ink);
   background-color: var(--color-surface-solid);
@@ -477,7 +477,7 @@
 
   @media (pointer: coarse) {
     &:where(:active:not([data-state='open'])) {
-      outline: var(--classic-shadow-blur-large) solid var(--gray-a4);
+      outline: var(--raised-shadow-blur-large) solid var(--gray-a4);
       outline-offset: 0;
     }
   }
@@ -594,7 +594,7 @@
 
   @media (pointer: coarse) {
     &:where(:active:not([data-state='open'])) {
-      outline: var(--classic-shadow-blur-large) solid var(--accent-a4);
+      outline: var(--raised-shadow-blur-large) solid var(--accent-a4);
       outline-offset: 0;
     }
   }
@@ -634,8 +634,8 @@
     filter: none;
   }
 
-  /* Classic needs special handling for top position */
-  &:where(.rt-variant-classic) {
+  /* Raised needs special handling for top position */
+  &:where(.rt-variant-raised) {
     top: 0;
   }
 }

package/src/components/_internal/base-button.props.ts

@@ -1,3 +1,4 @@
+import { parseVariant } from '../../helpers/parse-variant.js';
 import { asChildPropDef } from '../../props/as-child.prop.js';
 import { accentColorPropDef } from '../../props/color.prop.js';
 import { radiusPropDef } from '../../props/radius.prop.js';
@@ -15,14 +16,14 @@ const sizes = ['1', '2', '3', '4'] as const;
 
 /**
  * Available button variants for different visual contexts
- * - classic: Premium, sophisticated appearance
+ * - raised: lifted off its ground, with an edge and a shadow (the default)
  * - solid: Primary actions that should be noticed first
  * - soft: Content-heavy interfaces, natural integration
  * - surface: Elevated appearance with subtle depth
  * - outline: Secondary actions that support primary actions
  * - ghost: Utility functions that don't compete for attention
  */
-const variants = ['classic', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override'] as const;
+const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override', 'classic'] as const;
 
 /**
  * Available panel background options (deprecated)
@@ -76,7 +77,7 @@ const baseButtonPropDefs = {
   /**
    * Visual variant that determines the button's appearance and context
    */
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
   ...accentColorPropDef,
   ...radiusPropDef,
   /**

package/src/components/_internal/base-card.css

@@ -553,11 +553,11 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseCard:where(.rt-variant-classic) {
+.rt-BaseCard:where(.rt-variant-raised) {
   --card-border-width: 1px;
   --card-background-color: var(--color-surface-solid);
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
   box-shadow: var(--shadow-2);
 
   :where([data-panel-background='translucent'], [data-material='translucent']) & {

package/src/components/_internal/base-checkbox.css

@@ -143,11 +143,11 @@
   }
 }
 
-/* classic */
+/* raised */
 
-.rt-BaseCheckboxRoot:where(.rt-variant-classic) {
+.rt-BaseCheckboxRoot:where(.rt-variant-raised) {
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
   
   &:where([data-state='unchecked']) {
     &::before {
@@ -195,7 +195,7 @@
   }
 
   &:where(:active:not(:disabled)) {
-    top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
+    top: calc(var(--raised-elevation-offset) + var(--raised-active-padding-offset-1));
     
     &::before {
       background-color: var(--accent-3);

package/src/components/_internal/base-checkbox.props.ts

@@ -1,14 +1,15 @@
+import { parseVariant } from '../../helpers/parse-variant.js';
 import { colorPropDef } from '../../props/color.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', 'outline', 'surface'] as const;
+const variants = ['raised', 'solid', 'soft', 'outline', 'surface', 'classic'] as const;
 const materials = ['solid', 'translucent'] as const;
 
 const baseCheckboxPropDefs = {
   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 },
   material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
 } satisfies {

package/src/components/_internal/base-menu.css

@@ -367,6 +367,39 @@
   }
 }
 
+/* The menu highlight is soft, and solid when the person asks for more contrast. */
+@media (prefers-contrast: more) {
+  .rt-BaseMenuContent:where(.rt-variant-soft) {
+    & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
+      background-color: var(--gray-3);
+    }
+
+    &:where([data-panel-background='translucent']) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
+      background-color: var(--gray-a3);
+    }
+
+    /* Gray fills with step 12 automatically; a coloured item re-resolves the solid tokens */
+    & :where(.rt-BaseMenuItem[data-highlighted]) {
+      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;
+      }
+    }
+  }
+}
+
 /* Forced colors support */
 @media (forced-colors: active) {
   .rt-BaseMenuItem:where(:focus-visible) {

package/src/components/_internal/base-menu.props.ts

@@ -22,7 +22,7 @@ const baseMenuSharedPropDefs = {
     type: 'enum',
     className: 'rt-variant',
     values: contentVariants,
-    default: 'solid',
+    default: 'soft',
   },
   material: {
     type: 'enum',

package/src/components/_internal/base-radio.css

@@ -122,11 +122,11 @@
   }
 }
 
-/* classic */
+/* raised */
 
-.rt-BaseRadioRoot:where(.rt-variant-classic) {
+.rt-BaseRadioRoot:where(.rt-variant-raised) {
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
   
   &:where(:not(:checked), [data-state='unchecked'])::before {
     color: var(--accent-ink);
@@ -170,7 +170,7 @@
   }
 
   &:where(:active:not(:disabled, [data-disabled])) {
-    top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
+    top: calc(var(--raised-elevation-offset) + var(--raised-active-padding-offset-1));
     
     &::before {
       background-color: var(--accent-3);

package/src/components/_internal/base-radio.props.ts

@@ -1,14 +1,15 @@
+import { parseVariant } from '../../helpers/parse-variant.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', 'outline', 'surface'] as const;
+const variants = ['raised', 'solid', 'soft', 'outline', 'surface', 'classic'] as const;
 const materials = ['solid', 'translucent'] as const;
 
 const baseRadioPropDefs = {
   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 },
   material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
 } satisfies {

package/src/components/_internal/base-tab-list.css

@@ -121,6 +121,48 @@
         gap: var(--component-gap-2);
       }
     }
+    &:where(.rt-r-size-3) {
+      font-size: var(--font-size-3);
+      line-height: var(--line-height-3);
+      letter-spacing: var(--letter-spacing-3);
+      --tab-height: var(--control-height-3);
+      --tab-padding-x: var(--space-3);
+      --tab-inner-padding-x: var(--space-3);
+      --tab-inner-padding-y: var(--space-2);
+      --tab-inner-border-radius: var(--radius-3);
+
+      /* Icon sizing for size 3 */
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: var(--content-icon-size-3);
+        height: var(--content-icon-size-3);
+      }
+
+      & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
+        gap: var(--component-gap-3);
+      }
+    }
+    &:where(.rt-r-size-4) {
+      font-size: var(--font-size-4);
+      line-height: var(--line-height-4);
+      letter-spacing: var(--letter-spacing-4);
+      --tab-height: var(--control-height-4);
+      --tab-padding-x: var(--space-3);
+      --tab-inner-padding-x: var(--space-4);
+      --tab-inner-padding-y: var(--space-2);
+      --tab-inner-border-radius: var(--radius-4);
+
+      /* Icon sizing for size 4 */
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: var(--content-icon-size-4);
+        height: var(--content-icon-size-4);
+      }
+
+      & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
+        gap: var(--component-gap-4);
+      }
+    }
   }
 }
 

package/src/components/_internal/base-tab-list.props.ts

@@ -2,7 +2,7 @@ import { colorPropDef } from '../../props/color.prop.js';
 
 import type { PropDef } from '../../props/prop-def.js';
 
-const sizes = ['1', '2'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 const wrapValues = ['nowrap', 'wrap', 'wrap-reverse'] as const;
 const justifyValues = ['start', 'center', 'end'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
@@ -22,11 +22,14 @@ const baseTabListPropDefs = {
     responsive: true,
   },
   ...colorPropDef,
+  material: { type: 'enum', values: panelBackgrounds, default: undefined },
+  /** @deprecated Use `material`. Removed in 0.15.0. */
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   wrap: PropDef<(typeof wrapValues)[number]>;
   justify: PropDef<(typeof justifyValues)[number]>;
+  material: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 

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);
@@ -256,13 +256,13 @@
 }
 
 /* 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 */
+/* Raised variant shadow states */
 @media (hover: hover) {
-  :where(.rt-AccordionRoot:where(.rt-variant-classic):hover) {
+  :where(.rt-AccordionRoot:where(.rt-variant-raised):hover) {
     background-color: var(--accent-2);
     box-shadow: var(--shadow-2);
   
@@ -282,7 +282,7 @@
   }
 }
 
-: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);

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
  */
 
@@ -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 },