@womp/kookie-ui 0.13.2 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",
@@ -177,8 +177,8 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "react": "16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-    "react-dom": "16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+    "react": "^18.0 || ^19.0",
+    "react-dom": "^18.0 || ^19.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/schemas/base-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/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
  */
 
@@ -130,8 +130,10 @@
   /* Scale interaction effects using CSS scale property (separate from transform).
    * This avoids conflicts with user's transform styles (e.g. translateX).
    * Uses spring-bounce easing from --transition-button for natural feel. */
-  &:where(:hover:not([data-disabled], [data-state='open'])) {
-    scale: 1.02;
+  @media (hover: hover) {
+    &:where(:hover:not([data-disabled], [data-state='open'])) {
+      scale: 1.02;
+    }
   }
 
   &:where(:active:not([data-disabled])) {
@@ -177,22 +179,22 @@
   .rt-BaseButton {
     &:where(.rt-r-size-1) {
       --base-button-height: var(--control-height-1);
-      border-radius: max(var(--radius-1), var(--radius-full));
+      border-radius: var(--radius-pill-1);
     }
 
     &:where(.rt-r-size-2) {
       --base-button-height: var(--control-height-2);
-      border-radius: max(var(--radius-2), var(--radius-full));
+      border-radius: var(--radius-pill-2);
     }
 
     &:where(.rt-r-size-3) {
       --base-button-height: var(--control-height-3);
-      border-radius: max(var(--radius-3), var(--radius-full));
+      border-radius: var(--radius-pill-3);
     }
 
     &:where(.rt-r-size-4) {
       --base-button-height: var(--control-height-4);
-      border-radius: max(var(--radius-4), var(--radius-full));
+      border-radius: var(--radius-pill-4);
     }
   }
 }
@@ -442,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);
@@ -475,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;
     }
   }
@@ -592,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;
     }
   }
@@ -632,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']) & {
@@ -653,3 +653,9 @@
     }
   }
 }
+
+/* A disabled interactive card keeps its look but stops reacting to the pointer. */
+.rt-BaseCard:where(:any-link, button, label):where(:disabled, [data-disabled]) {
+  cursor: default;
+  scale: 1;
+}

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-sidebar-menu.css

@@ -84,12 +84,20 @@
   }
 
   /* Ensure shortcuts inherit color in disabled/highlighted/hover/active states */
-  &:where([data-disabled], [data-highlighted], :hover, [data-active]) {
+  &:where([data-disabled], [data-highlighted], [data-active]) {
     & :where(.rt-SidebarMenuShortcut) {
       color: inherit;
     }
   }
 
+  @media (hover: hover) {
+    &:where(:hover) {
+      & :where(.rt-SidebarMenuShortcut) {
+        color: inherit;
+      }
+    }
+  }
+
   /* Reduced motion support */
   @media (prefers-reduced-motion: reduce) {
     transition: none;

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);
+      }
+    }
   }
 }
 
@@ -232,3 +274,13 @@
 }
 
 
+
+/* Disabled: the same treatment as a disabled menu item. It keeps no hover fill. */
+.rt-BaseTabListTrigger:where([data-disabled]) {
+  color: var(--gray-a8);
+  cursor: default;
+
+  & :where(.rt-BaseTabListTriggerInner) {
+    background-color: transparent;
+  }
+}

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