@womp/kookie-ui 0.16.0 → 0.18.0

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

@@ -29,13 +29,8 @@
   --checkbox-radius-ratio-max: 0.4;
   --checkbox-radius-max: calc(var(--checkbox-size) * var(--checkbox-radius-ratio-max));
 
-  /* Theme-level translucent override */
-
-  /* Prevent backdrop-filter stacking with parents */
   isolation: isolate;
 
-  /* Component-level overrides */
-
   &::before {
     content: '';
     display: block;
@@ -53,10 +48,10 @@
   /* Required for subpixel alignment in Safari */
   transform: translate(-50%, -50%);
   top: 50%;
-  left: 50%
-  
+  left: 50%;
+
   /* Smooth color transitions for the indicator icon */
-  
+
   /* Respect user preference for reduced motion */
 }
 
@@ -66,22 +61,32 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/*
+ * The box is v2's mark ladder (16/20/24/26): a mark occupies one line of the label beside it.
+ * The glyph keeps v1's proportion of the box. The corner keeps v1's ramp off --radius-1,
+ * clamped below a circle.
+ */
 @breakpoints {
   .rt-BaseCheckboxRoot {
     &:where(.rt-r-size-1) {
-      --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
-      --checkbox-indicator-size: var(--indicator-icon-size-1);
-      --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-small)), var(--checkbox-radius-max));
+      --checkbox-size: var(--mark-1, calc(16px * var(--scale)));
+      --checkbox-indicator-size: calc(10px * var(--scale));
+      --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--checkbox-radius-max));
     }
     &:where(.rt-r-size-2) {
-      --checkbox-size: var(--space-4);
-      --checkbox-indicator-size: var(--indicator-icon-size-2);
+      --checkbox-size: var(--mark-2, calc(20px * var(--scale)));
+      --checkbox-indicator-size: calc(12px * var(--scale));
       --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--checkbox-radius-max));
     }
     &:where(.rt-r-size-3) {
-      --checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
-      --checkbox-indicator-size: var(--indicator-icon-size-3);
-      --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--checkbox-radius-max));
+      --checkbox-size: var(--mark-3, calc(24px * var(--scale)));
+      --checkbox-indicator-size: calc(14px * var(--scale));
+      --checkbox-border-radius: min(var(--radius-1), var(--checkbox-radius-max));
+    }
+    &:where(.rt-r-size-4) {
+      --checkbox-size: var(--mark-4, calc(26px * var(--scale)));
+      --checkbox-indicator-size: calc(16px * var(--scale));
+      --checkbox-border-radius: min(var(--radius-1), var(--checkbox-radius-max));
     }
   }
 }
@@ -128,26 +133,18 @@
 .rt-BaseCheckboxRoot:where(.rt-variant-raised) {
   position: relative;
   top: var(--raised-elevation-offset);
-  
+
   &:where([data-state='unchecked']) {
     &::before {
       color: var(--accent-ink);
       background-color: var(--color-surface-solid);
-      box-shadow: var(--shadow-2)
-
-      /* Theme-level translucent override */
-
-      /* Component-level overrides (higher specificity) */
+      box-shadow: var(--shadow-2);
     }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
-      background-color: var(--accent-3)
-
-      /* Theme-level translucent override */
-
-      /* Component-level overrides (higher specificity) */
+      background-color: var(--accent-3);
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--accent-ink);
@@ -156,13 +153,9 @@
 
   &:where(:active:not(:disabled)) {
     top: calc(var(--raised-elevation-offset) + var(--raised-active-padding-offset-1));
-    
-    &::before {
-      background-color: var(--accent-3)
 
-      /* Theme-level translucent override for active */
-
-      /* Component-level overrides for active */
+    &::before {
+      background-color: var(--accent-3);
     }
   }
 
@@ -183,11 +176,7 @@
 
 .rt-BaseCheckboxRoot:where(.rt-variant-soft) {
   &::before {
-    background-color: var(--accent-3)
-
-    /* Theme-level translucent override */
-
-    /* Component-level overrides (higher specificity) */
+    background-color: var(--accent-3);
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
@@ -212,22 +201,14 @@
   &:where([data-state='unchecked']) {
     &::before {
       box-shadow: inset 0 0 0 1px var(--accent-6);
-      color: var(--accent-ink)
-
-      /* Theme-level translucent override */
-
-      /* Component-level overrides (higher specificity) */
+      color: var(--accent-ink);
     }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
       background-color: var(--accent-2);
-      box-shadow: inset 0 0 0 1px var(--accent-7)
-
-      /* Theme-level translucent override */
-
-      /* Component-level overrides (higher specificity) */
+      box-shadow: inset 0 0 0 1px var(--accent-7);
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--accent-ink);
@@ -251,22 +232,14 @@
   &:where([data-state='unchecked']) {
     &::before {
       background-color: var(--accent-2);
-      box-shadow: inset 0 0 0 1px var(--accent-6)
-
-      /* Theme-level translucent override */
-
-      /* Component-level overrides (higher specificity) */
+      box-shadow: inset 0 0 0 1px var(--accent-6);
     }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
       background-color: var(--accent-3);
-      box-shadow: inset 0 0 0 1px var(--accent-8)
-
-      /* Theme-level translucent override */
-
-      /* Component-level overrides (higher specificity) */
+      box-shadow: inset 0 0 0 1px var(--accent-8);
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--accent-ink);
@@ -283,3 +256,76 @@
     }
   }
 }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * INTERACTION                                                                                     *
+ *                                                                                                 *
+ * Hover is one step up the variant's own ramp, press two. Disabled marks take neither.           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-BaseCheckboxRoot {
+  --checkbox-unchecked-hover: var(--accent-a2);
+  --checkbox-unchecked-active: var(--accent-a3);
+  --checkbox-checked-hover: var(--accent-4);
+  --checkbox-checked-active: var(--accent-5);
+
+  &:where(.rt-variant-solid) {
+    --checkbox-checked-hover: var(--accent-solid-hover);
+    --checkbox-checked-active: var(--accent-solid-active);
+  }
+  &:where(.rt-variant-raised) {
+    --checkbox-unchecked-hover: var(--color-surface-solid);
+    --checkbox-unchecked-active: var(--accent-3);
+  }
+  &:where(.rt-variant-soft) {
+    --checkbox-unchecked-hover: var(--accent-4);
+    --checkbox-unchecked-active: var(--accent-5);
+  }
+  &:where(.rt-variant-outline) {
+    --checkbox-checked-hover: var(--accent-3);
+    --checkbox-checked-active: var(--accent-4);
+  }
+  &:where(.rt-variant-surface) {
+    --checkbox-unchecked-hover: var(--accent-3);
+    --checkbox-unchecked-active: var(--accent-4);
+  }
+
+  @media (hover: hover) {
+    &:where(:hover:not(:disabled, [data-disabled]))::before {
+      background-color: var(--checkbox-unchecked-hover);
+    }
+    &:where(:hover:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
+      background-color: var(--checkbox-checked-hover);
+    }
+  }
+  &:where(:active:not(:disabled, [data-disabled]))::before {
+    background-color: var(--checkbox-unchecked-active);
+  }
+  &:where(:active:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
+    background-color: var(--checkbox-checked-active);
+  }
+  &:where(.rt-variant-solid:active:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
+    box-shadow: inset 0 0 0 1px var(--checkbox-checked-active);
+  }
+  @media (hover: hover) {
+    &:where(.rt-variant-solid:hover:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
+      box-shadow: inset 0 0 0 1px var(--checkbox-checked-hover);
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * FOCUS AND DISABLED                                                                              *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* The focus ring lives on Checkbox and CheckboxGroup: CheckboxCards rings its card instead. */
+.rt-BaseCheckboxRoot {
+  /* Disabled is a colour remap (per variant above), never opacity; the cursor stays default. */
+  &:where(:disabled, [data-disabled]) {
+    cursor: default;
+  }
+}

package/src/components/_internal/base-checkbox.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', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['raised', 'solid', 'soft', 'outline', 'surface'] as const;
 
 const baseCheckboxPropDefs = {

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

@@ -21,10 +21,10 @@
 .rt-BaseDialogScrollPadding {
   flex-grow: 1;
   margin: auto;
-  padding-top: var(--space-6);
-  padding-bottom: max(var(--space-6), 6vh);
-  padding-left: var(--space-4);
-  padding-right: var(--space-4);
+  padding-top: var(--space-7);
+  padding-bottom: max(var(--space-7), 6vh);
+  padding-left: var(--space-5);
+  padding-right: var(--space-5);
 }
 
 @breakpoints {
@@ -37,13 +37,6 @@
 }
 
 .rt-BaseDialogContent {
-  /*
-   * This surface blurs its own backdrop, which makes it the backdrop root for
-   * everything inside it. A component nested here would re-blur an already
-   * blurred, already flat surface for the full cost of another blur pass, so
-   * switch the component filter off for the subtree. See tokens/blur.css.
-   */
-  --backdrop-filter-components-enabled: none;
   margin: auto;
   width: 100%;
   z-index: 1;
@@ -58,26 +51,9 @@
   padding: var(--dialog-content-padding);
   box-sizing: border-box;
 
-  /* Base state: use contextual dialog color that auto-resolves */
-  background-color: var(--color-dialog);
+  background-color: var(--color-dialog-solid);
   box-shadow: var(--shadow-6);
   outline: none;
-
-  /* Theme-level backdrop filter for auto dialogs */
-  :where([data-material='translucent']) & {
-    backdrop-filter: var(--backdrop-filter-dialog);
-  }
-
-  /* Component-level overrides (when the material prop is set) */
-  &:where([data-material='solid']) {
-    background-color: var(--color-dialog-solid);
-    backdrop-filter: none;
-  }
-
-  &:where([data-material='translucent']) {
-    background-color: var(--color-dialog-translucent);
-    backdrop-filter: var(--backdrop-filter-dialog);
-  }
 }
 
 /***************************************************************************************************
@@ -89,32 +65,24 @@
 @breakpoints {
   .rt-BaseDialogContent {
     &:where(.rt-r-size-1) {
-      --dialog-content-padding: var(--space-5);
-      border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-2)));
+      --dialog-content-padding: var(--space-6);
+      border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-3)));
     }
     &:where(.rt-r-size-2) {
-      --dialog-content-padding: var(--space-6);
-      border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
+      --dialog-content-padding: var(--space-7);
+      border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-4)));
     }
     &:where(.rt-r-size-3) {
-      --dialog-content-padding: var(--space-7);
-      border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
+      --dialog-content-padding: var(--space-8);
+      border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-5)));
     }
     &:where(.rt-r-size-4) {
-      --dialog-content-padding: var(--space-8);
-      border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-5)));
+      --dialog-content-padding: var(--space-9);
+      border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-6)));
     }
   }
 }
 
-/* Safari backdrop-filter fallback */
-@supports not (backdrop-filter: blur(1px)) {
-  :where(.rt-BaseDialogContent[data-material='translucent']),
-  :where(.rt-BaseDialogContent[data-material='translucent']) {
-    background-color: var(--color-dialog-solid);
-  }
-}
-
 /* Forced colors support */
 @media (forced-colors: active) {
   .rt-BaseDialogContent {

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

@@ -1,11 +1,4 @@
 .rt-BaseMenuContent {
-  /*
-   * This surface blurs its own backdrop, which makes it the backdrop root for
-   * everything inside it. A component nested here would re-blur an already
-   * blurred, already flat surface for the full cost of another blur pass, so
-   * switch the component filter off for the subtree. See tokens/blur.css.
-   */
-  --backdrop-filter-components-enabled: none;
   --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);
   --scrollarea-scrollbar-vertical-margin-bottom: var(--base-menu-content-padding);
   --scrollarea-scrollbar-horizontal-margin-left: var(--base-menu-content-padding);
@@ -17,26 +10,12 @@
   overflow: hidden;
   z-index: 200; /* Above dialogs (100) so menus inside dialogs/sheets work */
 
-  background-color: var(--color-panel);
-  backdrop-filter: var(--backdrop-filter-panel);
+  background-color: var(--color-panel-solid);
   box-shadow: var(--shadow-5);
 
-  /* GPU optimization: limit paint scope and prevent backdrop-filter layering */
+  /* Limit paint scope to the menu */
   contain: paint;
   isolation: isolate;
-
-  /* Enhanced reduced motion support */
-
-  /* Component-level overrides (higher specificity) */
-  &:where([data-material='solid']) {
-    background-color: var(--color-panel-solid);
-    backdrop-filter: none;
-  }
-
-  &:where([data-material='translucent']) {
-    background-color: var(--color-panel-translucent);
-    backdrop-filter: var(--backdrop-filter-panel);
-  }
 }
 
 .rt-BaseMenuViewport {
@@ -56,7 +35,7 @@
 .rt-BaseMenuItem {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
   min-height: var(--base-menu-item-height);
   padding-top: var(--base-menu-item-padding-y);
   padding-bottom: var(--base-menu-item-padding-y);
@@ -83,13 +62,13 @@
   display: flex;
   align-items: center;
   margin-inline-start: auto;
-  padding-inline-start: var(--space-4);
-  margin-inline-end: calc(-2px * var(--scaling)); /* Pulls closer to edge */
+  padding-inline-start: var(--space-5);
+  margin-inline-end: calc(-2px * var(--scale)); /* Pulls closer to edge */
 }
 
 .rt-BaseMenuSubTriggerIcon {
   color: var(--gray-12);
-  margin-inline-end: calc(-2px * var(--scaling));
+  margin-inline-end: calc(-2px * var(--scale));
 }
 
 .rt-BaseMenuItemIndicator {
@@ -103,8 +82,8 @@
 
 .rt-BaseMenuSeparator {
   height: 1px;
-  margin-top: var(--space-2);
-  margin-bottom: var(--space-2);
+  margin-top: var(--space-3);
+  margin-bottom: var(--space-3);
   margin-inline-start: var(--base-menu-item-padding-left);
   margin-inline-end: var(--base-menu-item-padding-right);
 }
@@ -123,7 +102,7 @@
   cursor: default;
 
   :where(.rt-BaseMenuItem) + & {
-    margin-top: var(--space-2);
+    margin-top: var(--space-3);
   }
 }
 
@@ -154,11 +133,11 @@
 @breakpoints {
   .rt-BaseMenuContent {
     &:where(.rt-r-size-1) {
-      --base-menu-content-padding: var(--space-2);
-      --base-menu-item-padding-left-plain: var(--space-2);
-      --base-menu-item-padding-left-indicator: calc(var(--space-5) / 1.2);
-      --base-menu-item-padding-right: var(--space-2);
-      --base-menu-item-padding-y: var(--space-1);
+      --base-menu-content-padding: var(--space-3);
+      --base-menu-item-padding-left-plain: var(--space-3);
+      --base-menu-item-padding-left-indicator: calc(var(--space-6) / 1.2);
+      --base-menu-item-padding-right: var(--space-3);
+      --base-menu-item-padding-y: var(--space-2);
       --base-menu-item-height: var(--control-height-1);
       border-radius: var(--radius-surface-3);
 
@@ -192,11 +171,11 @@
     }
 
     &:where(.rt-r-size-2) {
-      --base-menu-content-padding: var(--space-3);
-      --base-menu-item-padding-left-plain: var(--space-3);
-      --base-menu-item-padding-left-indicator: var(--space-5);
-      --base-menu-item-padding-right: var(--space-3);
-      --base-menu-item-padding-y: var(--space-1);
+      --base-menu-content-padding: var(--space-4);
+      --base-menu-item-padding-left-plain: var(--space-4);
+      --base-menu-item-padding-left-indicator: var(--space-6);
+      --base-menu-item-padding-right: var(--space-4);
+      --base-menu-item-padding-y: var(--space-2);
       --base-menu-item-height: var(--control-height-2);
       border-radius: var(--radius-surface-5);
 
@@ -230,11 +209,11 @@
     }
 
     &:where(.rt-r-size-3) {
-      --base-menu-content-padding: var(--space-3);
-      --base-menu-item-padding-left-plain: var(--space-3);
-      --base-menu-item-padding-left-indicator: var(--space-5);
-      --base-menu-item-padding-right: var(--space-3);
-      --base-menu-item-padding-y: var(--space-2);
+      --base-menu-content-padding: var(--space-4);
+      --base-menu-item-padding-left-plain: var(--space-4);
+      --base-menu-item-padding-left-indicator: var(--space-6);
+      --base-menu-item-padding-right: var(--space-4);
+      --base-menu-item-padding-y: var(--space-3);
       --base-menu-item-height: var(--control-height-3);
       border-radius: var(--radius-surface-6);
 
@@ -305,10 +284,6 @@
     background-color: var(--accent-3);
   }
 
-  &:where([data-material='translucent']) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
-    background-color: var(--accent-a3);
-  }
-
   & :where(.rt-BaseMenuItem[data-highlighted]) {
     background-color: var(--accent-4);
 
@@ -318,10 +293,6 @@
     }
   }
 
-  &:where([data-material='translucent']) :where(.rt-BaseMenuItem[data-highlighted]) {
-    background-color: var(--accent-a4);
-  }
-
   /* The soft fill is faint on its own; keyboard focus also gets a ring */
   & :where(.rt-BaseMenuItem[data-highlighted]:focus-visible) {
     box-shadow: inset 0 0 0 1px var(--accent-a8);
@@ -335,10 +306,6 @@
       background-color: var(--gray-3);
     }
 
-    &:where([data-material='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);

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

@@ -4,7 +4,6 @@ import { colorPropDef } from '../../props/color.prop.js';
 import type { PropDef } from '../../props/prop-def.js';
 
 const contentSizes = ['1', '2'] as const;
-const materials = ['solid', 'translucent'] as const;
 const submenuBehaviors = ['cascade', 'drill-down'] as const;
 
 // Base props shared between Content and SubContent
@@ -16,15 +15,9 @@ const baseMenuSharedPropDefs = {
     default: '2',
     responsive: true,
   },
-  material: {
-    type: 'enum',
-    values: materials,
-    default: undefined,
-  },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof contentSizes)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
 };
 
 // Content-specific props (includes submenuBehavior)
@@ -44,7 +37,6 @@ const baseMenuContentPropDefs = {
   },
 } satisfies {
   size: PropDef<(typeof contentSizes)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
   submenuBehavior: PropDef<(typeof submenuBehaviors)[number]>;
 };
 

package/src/components/_internal/base-menu.utils.tsx

@@ -41,25 +41,16 @@ function useResolvedResponsiveValue<T>(value: Responsive<T> | undefined, default
   return resolveResponsiveValue(value as T | Partial<Record<Breakpoint, T>> | undefined, breakpoint, defaultValue);
 }
 
-type MenuMaterial = 'solid' | 'translucent';
-
-/** The menu surface material: the component's prop, then the nearest Theme's `material`. */
-function resolveMenuMaterial(material: MenuMaterial | undefined, theme: { material: MenuMaterial }): MenuMaterial {
-  return material ?? theme.material;
-}
-
-/** Content padding per menu size, in px at 100% scaling (see base-menu.css). */
+/** Content padding per menu size, in px (see base-menu.css). */
 const CONTENT_PADDING: Record<string, number> = { '1': 8, '2': 12, '3': 12 };
 
 /**
  * Offset that lines the first item of a menu up with its anchor: the pointer
  * for a context menu, or the sub trigger for a submenu. It cancels the content
- * padding, which scales with the theme.
+ * padding.
  */
-function getMenuAlignOffset(size: string, scaling: string | undefined): number {
-  const scale = scaling ? parseFloat(scaling) / 100 : 1;
-  const padding = CONTENT_PADDING[size] ?? CONTENT_PADDING['2'];
-  return -Math.round(padding * (Number.isFinite(scale) ? scale : 1));
+function getMenuAlignOffset(size: string): number {
+  return -(CONTENT_PADDING[size] ?? CONTENT_PADDING['2']);
 }
 
 const KEY_SYMBOLS: Record<string, string> = {
@@ -126,9 +117,7 @@ function MenuShortcut({ shortcut, className }: { shortcut: string; className?: s
 export {
   resolveResponsiveValue,
   useResolvedResponsiveValue,
-  resolveMenuMaterial,
   getMenuAlignOffset,
   toAriaKeyShortcuts,
   MenuShortcut,
 };
-export type { MenuMaterial };