@womp/kookie-ui 0.16.0 → 0.18.0

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

@@ -15,15 +15,11 @@
   border-radius: var(--skeleton-radius);
   --skeleton-radius-override: 100%;
 
-  /* Theme-level translucent override */
-
-  /* Prevent backdrop-filter stacking with parents */
   isolation: isolate;
 
-  /* Component-level overrides */
-
+  /* Disabled is a colour remap (per variant below), never opacity; the cursor stays default. */
   &:where(:disabled, [data-disabled]) {
-    cursor: var(--cursor-disabled);
+    cursor: default;
   }
 
   &::before {
@@ -51,8 +47,8 @@
   }
 
   &:where(:focus-visible)::before {
-    outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 }
 
@@ -62,16 +58,20 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/* The box is v2's mark ladder (16/20/24/26), the same box Checkbox has at each size. */
 @breakpoints {
   .rt-BaseRadioRoot {
     &:where(.rt-r-size-1) {
-      --radio-size: calc(var(--space-4) * 0.875);
+      --radio-size: var(--mark-1, calc(16px * var(--scale)));
     }
     &:where(.rt-r-size-2) {
-      --radio-size: var(--space-4);
+      --radio-size: var(--mark-2, calc(20px * var(--scale)));
     }
     &:where(.rt-r-size-3) {
-      --radio-size: calc(var(--space-4) * 1.25);
+      --radio-size: var(--mark-3, calc(24px * var(--scale)));
+    }
+    &:where(.rt-r-size-4) {
+      --radio-size: var(--mark-4, calc(26px * var(--scale)));
     }
   }
 }
@@ -111,23 +111,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 +127,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 +150,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 +174,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 +199,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);
@@ -250,3 +218,60 @@
     background-color: var(--gray-a8);
   }
 }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * INTERACTION                                                                                     *
+ *                                                                                                 *
+ * Hover is one step up the variant's own ramp, press two. Disabled marks take neither.           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-BaseRadioRoot {
+  --radio-unchecked-hover: var(--accent-a2);
+  --radio-unchecked-active: var(--accent-a3);
+  --radio-checked-hover: var(--accent-4);
+  --radio-checked-active: var(--accent-5);
+
+  &:where(.rt-variant-solid) {
+    --radio-checked-hover: var(--accent-solid-hover);
+    --radio-checked-active: var(--accent-solid-active);
+  }
+  &:where(.rt-variant-raised) {
+    --radio-unchecked-hover: var(--color-surface-solid);
+    --radio-unchecked-active: var(--accent-3);
+  }
+  &:where(.rt-variant-soft) {
+    --radio-unchecked-hover: var(--accent-4);
+    --radio-unchecked-active: var(--accent-5);
+  }
+  &:where(.rt-variant-outline) {
+    --radio-checked-hover: var(--accent-3);
+    --radio-checked-active: var(--accent-4);
+  }
+  &:where(.rt-variant-surface) {
+    --radio-unchecked-hover: var(--accent-3);
+    --radio-unchecked-active: var(--accent-4);
+  }
+
+  @media (hover: hover) {
+    &:where(:hover:not(:disabled, [data-disabled]))::before {
+      background-color: var(--radio-unchecked-hover);
+    }
+    &:where(:hover:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
+      background-color: var(--radio-checked-hover);
+    }
+    &:where(.rt-variant-solid:hover:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
+      box-shadow: inset 0 0 0 1px var(--radio-checked-hover);
+    }
+  }
+  &:where(:active:not(:disabled, [data-disabled]))::before {
+    background-color: var(--radio-unchecked-active);
+  }
+  &:where(:active:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
+    background-color: var(--radio-checked-active);
+  }
+  &:where(.rt-variant-solid:active:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
+    box-shadow: inset 0 0 0 1px var(--radio-checked-active);
+  }
+}

package/src/components/_internal/base-radio.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 baseRadioPropDefs = {

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 */

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

@@ -61,11 +61,14 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/*
+ * Height is the control ladder. The hover pill pads by --control-px-N; half a control gap on each
+ * side of it sets neighbouring pills one --control-gap-N apart.
+ */
 .rt-BaseTabListTrigger {
   box-sizing: border-box;
   height: var(--tab-height);
-  padding-left: var(--tab-padding-x);
-  padding-right: var(--tab-padding-x);
+  padding-inline: var(--tab-padding-x);
 }
 
 .rt-BaseTabListTriggerInner,
@@ -82,20 +85,20 @@
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       --tab-height: var(--control-height-1);
-      --tab-padding-x: var(--space-1);
-      --tab-inner-padding-x: var(--space-1);
-      --tab-inner-padding-y: calc(var(--space-1) * var(--spacing-multiplier-small));
+      --tab-padding-x: calc(var(--control-gap-1) / 2);
+      --tab-inner-padding-x: var(--control-px-1);
+      --tab-inner-padding-y: calc(var(--space-2) * var(--spacing-multiplier-small));
       --tab-inner-border-radius: var(--radius-1);
 
       /* Icon sizing for size 1 */
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--content-icon-size-1);
-        height: var(--content-icon-size-1);
+        width: var(--icon-size-1);
+        height: var(--icon-size-1);
       }
 
       & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
-        gap: var(--component-gap-1);
+        gap: var(--control-gap-1);
       }
     }
     &:where(.rt-r-size-2) {
@@ -103,20 +106,20 @@
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       --tab-height: var(--control-height-2);
-      --tab-padding-x: var(--space-2);
-      --tab-inner-padding-x: var(--space-2);
-      --tab-inner-padding-y: var(--space-1);
+      --tab-padding-x: calc(var(--control-gap-2) / 2);
+      --tab-inner-padding-x: var(--control-px-2);
+      --tab-inner-padding-y: var(--space-2);
       --tab-inner-border-radius: var(--radius-2);
 
       /* Icon sizing for size 2 */
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--content-icon-size-2);
-        height: var(--content-icon-size-2);
+        width: var(--icon-size-2);
+        height: var(--icon-size-2);
       }
 
       & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
-        gap: var(--component-gap-2);
+        gap: var(--control-gap-2);
       }
     }
     &:where(.rt-r-size-3) {
@@ -124,20 +127,20 @@
       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-padding-x: calc(var(--control-gap-3) / 2);
+      --tab-inner-padding-x: var(--control-px-3);
+      --tab-inner-padding-y: var(--space-3);
       --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);
+        width: var(--icon-size-3);
+        height: var(--icon-size-3);
       }
 
       & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
-        gap: var(--component-gap-3);
+        gap: var(--control-gap-3);
       }
     }
     &:where(.rt-r-size-4) {
@@ -145,20 +148,20 @@
       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-padding-x: calc(var(--control-gap-4) / 2);
+      --tab-inner-padding-x: var(--control-px-4);
+      --tab-inner-padding-y: var(--space-3);
       --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);
+        width: var(--icon-size-4);
+        height: var(--icon-size-4);
       }
 
       & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
-        gap: var(--component-gap-4);
+        gap: var(--control-gap-4);
       }
     }
   }
@@ -182,69 +185,29 @@
       color: var(--gray-12);
     }
     &:where(:hover) :where(.rt-BaseTabListTriggerInner) {
-      /* Base state: solid gray for solid panels */
       background-color: var(--gray-a3);
-
-      /* Theme-level translucent override for hover */
-      :where([data-material='translucent']) & {
-        background-color: var(--gray-a3);
-        backdrop-filter: var(--backdrop-filter-components);
-      }
-
-      /* Component-level overrides for hover */
-      :where(.rt-BaseTabList[data-material='solid']) & {
-        background-color: var(--gray-a3);
-        backdrop-filter: none;
-        --backdrop-filter-components: none;
-      }
-
-      :where(.rt-BaseTabList[data-material='translucent']) & {
-        background-color: var(--gray-a3);
-        backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-      }
-
-      /* 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;
-      }
     }
     &:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner) {
-      /* Base state: solid accent for solid panels */
       background-color: var(--accent-a3);
-
-      /* Theme-level translucent override for focus+hover */
-      :where([data-material='translucent']) & {
-        background-color: var(--accent-a3);
-        backdrop-filter: var(--backdrop-filter-components);
-      }
-
-      /* Component-level overrides for focus+hover */
-      :where(.rt-BaseTabList[data-material='solid']) & {
-        background-color: var(--accent-a3);
-        backdrop-filter: none;
-        --backdrop-filter-components: none;
-      }
-
-      :where(.rt-BaseTabList[data-material='translucent']) & {
-        background-color: var(--accent-a3);
-        backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-      }
     }
   }
+  /* Hover is one step up, press two. */
+  &:where(:active:not([data-disabled])) :where(.rt-BaseTabListTriggerInner) {
+    background-color: var(--gray-a4);
+  }
   &:where([data-state='active'], [data-active]) {
     color: var(--gray-12);
   }
+  /* Drawn inside the trigger: the scrolling list clips anything outside it. */
   &:where(:focus-visible) :where(.rt-BaseTabListTriggerInner) {
-    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
     outline-offset: var(--focus-outline-offset-inset);
-    scroll-margin: var(--space-2);
+    scroll-margin: var(--space-3);
   }
   &:where([data-state='active'], [data-active])::before {
     box-sizing: border-box;
     content: '';
-    height: var(--focus-outline-width); /* Consistent with focus outline thickness */
+    height: var(--focus-ring-width, 2px); /* Consistent with focus ring thickness */
     position: absolute;
     bottom: 0;
     left: 0;
@@ -260,16 +223,14 @@
   .rt-TabNavLink:where([data-active])::before {
     background-color: Highlight;
   }
-  
+
   .rt-BaseTabListTrigger:where(:focus-visible) :where(.rt-BaseTabListTriggerInner) {
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
 }
 
-
-
-/* Disabled: the same treatment as a disabled menu item. It keeps no hover fill. */
+/* Disabled: the same treatment as a disabled menu item, a colour remap with no opacity. It keeps no hover or press fill. */
 .rt-BaseTabListTrigger:where([data-disabled]) {
   color: var(--gray-a8);
   cursor: default;

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

@@ -5,7 +5,6 @@ import type { PropDef } from '../../props/prop-def.js';
 const sizes = ['1', '2', '3', '4'] as const;
 const wrapValues = ['nowrap', 'wrap', 'wrap-reverse'] as const;
 const justifyValues = ['start', 'center', 'end'] as const;
-const materials = ['solid', 'translucent'] as const;
 
 const baseTabListPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
@@ -22,12 +21,10 @@ const baseTabListPropDefs = {
     responsive: true,
   },
   ...colorPropDef,
-  material: { type: 'enum', values: materials, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   wrap: PropDef<(typeof wrapValues)[number]>;
   justify: PropDef<(typeof justifyValues)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
 };
 
 export { baseTabListPropDefs };

package/src/components/_internal/menu-context.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 
-import { useThemeContext } from '../theme.js';
 import { useResolvedResponsiveValue } from './base-menu.utils.js';
 
 import type { Responsive } from '../../props/prop-def.js';
@@ -34,22 +33,19 @@ interface MenuProviderProps {
   size?: Responsive<MenuSize>;
 }
 
-/** Map menu size to item height in pixels at 100% scaling */
+/** Menu item height in pixels per size: the control height ladder (--control-height-N). */
 export const menuSizeToItemHeight: Record<MenuSize, number> = {
-  '1': 24, // --space-5
-  '2': 32, // --space-6
+  '1': 28,
+  '2': 32,
 };
 
-/** Item height in px for a size at the given theme scaling ("100%", "110%"…). */
-export function getMenuItemHeight(size: MenuSize, scaling: string | undefined): number {
-  const scale = scaling ? parseFloat(scaling) / 100 : 1;
-  return menuSizeToItemHeight[size] * (Number.isFinite(scale) ? scale : 1);
+export function getMenuItemHeight(size: MenuSize): number {
+  return menuSizeToItemHeight[size];
 }
 
 export function MenuProvider({ children, size }: MenuProviderProps) {
   const resolvedSize = useResolvedResponsiveValue<MenuSize | undefined>(size, undefined);
-  const { scaling } = useThemeContext();
-  const itemHeight = resolvedSize ? getMenuItemHeight(resolvedSize, scaling) : undefined;
+  const itemHeight = resolvedSize ? getMenuItemHeight(resolvedSize) : undefined;
   const value = React.useMemo(
     () => ({ isInsideMenu: true, size: resolvedSize, itemHeight }),
     [resolvedSize, itemHeight],