@womp/kookie-ui 0.16.0 → 0.17.0

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

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

@@ -15,13 +15,8 @@
   border-radius: var(--skeleton-radius);
   --skeleton-radius-override: 100%;
 
-  /* Theme-level translucent override */
-
-  /* Prevent backdrop-filter stacking with parents */
   isolation: isolate;
 
-  /* Component-level overrides */
-
   &:where(:disabled, [data-disabled]) {
     cursor: var(--cursor-disabled);
   }
@@ -65,13 +60,13 @@
 @breakpoints {
   .rt-BaseRadioRoot {
     &:where(.rt-r-size-1) {
-      --radio-size: calc(var(--space-4) * 0.875);
+      --radio-size: calc(var(--space-5) * 0.875);
     }
     &:where(.rt-r-size-2) {
-      --radio-size: var(--space-4);
+      --radio-size: var(--space-5);
     }
     &:where(.rt-r-size-3) {
-      --radio-size: calc(var(--space-4) * 1.25);
+      --radio-size: calc(var(--space-5) * 1.25);
     }
   }
 }
@@ -111,23 +106,15 @@
 .rt-BaseRadioRoot:where(.rt-variant-raised) {
   position: relative;
   top: var(--raised-elevation-offset);
-  
+
   &:where(:not(:checked), [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(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-3)
-
-    /* Theme-level translucent override */
 
-    /* Component-level overrides (higher specificity) */
+  &:where(:checked, [data-state='checked'])::before {
+    background-color: var(--accent-3);
   }
   &::after {
     background-color: var(--accent-ink);
@@ -135,13 +122,9 @@
 
   &:where(:active:not(:disabled, [data-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);
     }
   }
 
@@ -162,11 +145,7 @@
 
 .rt-BaseRadioRoot:where(.rt-variant-soft) {
   &::before {
-    background-color: var(--accent-3)
-
-    /* Theme-level translucent override */
-
-    /* Component-level overrides (higher specificity) */
+    background-color: var(--accent-3);
   }
   &::after {
     background-color: var(--accent-ink);
@@ -190,20 +169,12 @@
 .rt-BaseRadioRoot:where(.rt-variant-outline) {
   &:where(:not(:checked), [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(:checked, [data-state='checked'])::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);
   }
   &::after {
     background-color: var(--accent-ink);
@@ -223,20 +194,12 @@
 .rt-BaseRadioRoot:where(.rt-variant-surface) {
   &:where(:not(:checked), [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(:checked, [data-state='checked'])::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);
   }
   &::after {
     background-color: var(--accent-ink);

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

@@ -13,10 +13,12 @@
   box-sizing: border-box;
   list-style: none;
   margin: 0;
+  /* No list indent: rows start on the pane's inset, level with the header's controls. */
+  padding: 0;
   min-height: 0;
 
   :where(.rt-SidebarContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) & {
-    padding-inline-end: var(--space-3);
+    padding-inline-end: var(--space-4);
   }
 }
 
@@ -29,7 +31,7 @@
 .rt-SidebarMenuButton {
   display: flex;
   align-items: center;
-  gap: var(--space-2); /* Will be overridden by size-specific gap */
+  gap: var(--space-3); /* Will be overridden by size-specific gap */
   min-height: var(--base-menu-item-height);
   padding-top: var(--base-menu-item-padding-y);
   padding-bottom: var(--base-menu-item-padding-y);
@@ -122,33 +124,33 @@
 }
 
 .rt-SidebarMenuSubList {
-  padding-inline-start: var(--space-4);
+  padding-inline-start: var(--space-5);
   border-inline-start: 1px solid var(--gray-a5);
-  margin-inline-start: var(--space-3);
+  margin-inline-start: var(--space-4);
 }
 
 /* Sub-menu items have consistent heights based on size - match dropdown menu exactly */
 :where(.rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
-  padding-inline-start: var(--space-3);
-  padding-top: calc(var(--space-1) * 0.75);
-  padding-bottom: calc(var(--space-1) * 0.75);
-  min-height: var(--space-6); /* bumped from space-5 */
+  padding-inline-start: var(--space-4);
+  padding-top: calc(var(--space-2) * 0.75);
+  padding-bottom: calc(var(--space-2) * 0.75);
+  min-height: var(--space-7); /* bumped from space-5 */
   font-size: var(--font-size-1);
 }
 
 :where(.rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
-  padding-inline-start: var(--space-3);
-  padding-top: var(--space-1);
-  padding-bottom: var(--space-1);
-  min-height: var(--space-7); /* bumped from space-6 */
+  padding-inline-start: var(--space-4);
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+  min-height: var(--space-8); /* bumped from space-6 */
   font-size: var(--font-size-2);
 }
 
 :where(.rt-SidebarContent.rt-r-size-3) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
-  padding-inline-start: var(--space-3);
-  padding-top: var(--space-2);
-  padding-bottom: var(--space-2);
-  min-height: var(--space-8);
+  padding-inline-start: var(--space-4);
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-3);
+  min-height: var(--space-9);
   font-size: var(--font-size-3);
 }
 
@@ -169,7 +171,7 @@
 
   /* Add margin-top when following menu items - identical to BaseMenuLabel */
   :where(.rt-SidebarMenuItem) + & {
-    margin-top: var(--space-2);
+    margin-top: var(--space-3);
   }
 }
 
@@ -189,7 +191,7 @@
   display: flex;
   align-items: center;
   margin-inline-start: auto;
-  padding-inline-start: var(--space-4);
+  padding-inline-start: var(--space-5);
   color: var(--gray-a11);
 }
 
@@ -197,7 +199,7 @@
   display: flex;
   align-items: center;
   margin-inline-start: auto;
-  padding-inline-start: var(--space-2);
+  padding-inline-start: var(--space-3);
 }
 
 /* Add balanced spacing for sidebar menu items while preserving base menu border radius */

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

@@ -32,7 +32,6 @@
 
   /* Override base menu styling that's not appropriate for sidebars */
   background-color: transparent !important;
-  backdrop-filter: none !important;
   box-shadow: none !important;
   border-radius: 0 !important;
 
@@ -44,7 +43,7 @@
   /* stylelint-disable-next-line selector-max-specificity */
   & .rt-BaseMenuViewport {
     /* gap: var(--base-menu-content-padding); */
-    gap: var(--space-5);
+    gap: var(--space-6);
   }
 
   /* Ensure ScrollArea takes full height within SidebarContent */
@@ -80,7 +79,7 @@
 /* Sidebar Separator - ensure full width and proper spacing */
 .rt-SidebarSeparator {
   width: 100%;
-  margin: var(--space-2) 0;
+  margin: var(--space-3) 0;
 }
 
 /* Removed mobile hide rule; Shell handles overlay vs inline */