@womp/kookie-ui 0.18.0 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",

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

@@ -6,7 +6,7 @@
  *
  * ARCHITECTURE (matching base-button.css):
  * 1. Base styles: Layout, pseudo-element setup
- * 2. Sizes: Responsive padding and border-radius
+ * 2. Sizes 1-4: padding --surface-p-N, corner --radius-surface-N
  * 3. Variant palettes: Each variant defines its color variables
  * 4. Shared state logic: Single set of hover/active/open selectors (outline, soft, surface)
  * 5. Border variants: Outline & surface border handling
@@ -43,14 +43,6 @@
   font-style: normal;
   text-align: start;
 
-  /* Inset calculations */
-  --inset-border-width: var(--base-card-border-width);
-  --inset-border-radius: var(--base-card-border-radius);
-  --inset-padding-top: calc(var(--base-card-padding-top) - var(--base-card-border-width));
-  --inset-padding-right: calc(var(--base-card-padding-right) - var(--base-card-border-width));
-  --inset-padding-bottom: calc(var(--base-card-padding-bottom) - var(--base-card-border-width));
-  --inset-padding-left: calc(var(--base-card-padding-left) - var(--base-card-border-width));
-
   /*
    * Pseudo-element setup
    * ::before = background color (z-index: -1)
@@ -83,56 +75,36 @@
 @breakpoints {
   .rt-BaseCard {
     &:where(.rt-r-size-1) {
-      --base-card-padding-top: var(--space-3);
-      --base-card-padding-right: var(--space-3);
-      --base-card-padding-bottom: var(--space-3);
-      --base-card-padding-left: var(--space-3);
-      --base-card-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-2)));
+      --base-card-padding-top: var(--surface-p-1);
+      --base-card-padding-right: var(--surface-p-1);
+      --base-card-padding-bottom: var(--surface-p-1);
+      --base-card-padding-left: var(--surface-p-1);
+      --base-card-border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-2) {
-      --base-card-padding-top: var(--space-4);
-      --base-card-padding-right: var(--space-4);
-      --base-card-padding-bottom: var(--space-4);
-      --base-card-padding-left: var(--space-4);
-      --base-card-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
+      --base-card-padding-top: var(--surface-p-2);
+      --base-card-padding-right: var(--surface-p-2);
+      --base-card-padding-bottom: var(--surface-p-2);
+      --base-card-padding-left: var(--surface-p-2);
+      --base-card-border-radius: var(--radius-surface-2);
     }
     &:where(.rt-r-size-3) {
-      --base-card-padding-top: var(--space-5);
-      --base-card-padding-right: var(--space-5);
-      --base-card-padding-bottom: var(--space-5);
-      --base-card-padding-left: var(--space-5);
-      --base-card-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
+      --base-card-padding-top: var(--surface-p-3);
+      --base-card-padding-right: var(--surface-p-3);
+      --base-card-padding-bottom: var(--surface-p-3);
+      --base-card-padding-left: var(--surface-p-3);
+      --base-card-border-radius: var(--radius-surface-3);
     }
     &:where(.rt-r-size-4) {
-      --base-card-padding-top: var(--space-6);
-      --base-card-padding-right: var(--space-6);
-      --base-card-padding-bottom: var(--space-6);
-      --base-card-padding-left: var(--space-6);
-      --base-card-border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-5)));
-    }
-    &:where(.rt-r-size-5) {
-      --base-card-padding-top: var(--space-7);
-      --base-card-padding-right: var(--space-7);
-      --base-card-padding-bottom: var(--space-7);
-      --base-card-padding-left: var(--space-7);
-      --base-card-border-radius: min(var(--radius-surface-9), calc(var(--radius-surface-5) + var(--space-6)));
+      --base-card-padding-top: var(--surface-p-4);
+      --base-card-padding-right: var(--surface-p-4);
+      --base-card-padding-bottom: var(--surface-p-4);
+      --base-card-padding-left: var(--surface-p-4);
+      --base-card-border-radius: var(--radius-surface-4);
     }
   }
 }
 
-/***************************************************************************************************
- *                                                                                                 *
- * INSET MODE                                                                                      *
- *                                                                                                 *
- ***************************************************************************************************/
-
-.rt-BaseCard:where([data-inset='true']) {
-  --base-card-padding-top: 0px;
-  --base-card-padding-right: 0px;
-  --base-card-padding-bottom: 0px;
-  --base-card-padding-left: 0px;
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * VARIANT PALETTES                                                                                *
@@ -299,30 +271,6 @@
   --v-focus-color: var(--focus-8);
   --v-focus-offset: -1px;
 
-  /* Flush mode */
-  &:where([data-flush='true']) {
-    --margin-top: 0px;
-    --margin-right: 0px;
-    --margin-bottom: 0px;
-    --margin-left: 0px;
-    --margin-top-override: calc(var(--margin-top) - var(--card-padding));
-    --margin-right-override: calc(var(--margin-right) - var(--card-padding));
-    --margin-bottom-override: calc(var(--margin-bottom) - var(--card-padding));
-    --margin-left-override: calc(var(--margin-left) - var(--card-padding));
-
-    margin-top: var(--margin-top-override);
-    margin-right: var(--margin-right-override);
-    margin-bottom: var(--margin-bottom-override);
-    margin-left: var(--margin-left-override);
-
-    :where(&) > * {
-      --margin-top-override: initial;
-      --margin-right-override: initial;
-      --margin-bottom-override: initial;
-      --margin-left-override: initial;
-    }
-  }
-
   /* Focus */
   &:where(:focus-visible) {
     outline: 2px solid var(--v-focus-color);

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

@@ -44,10 +44,6 @@
   box-sizing: border-box;
   overflow: auto;
 
-  --inset-padding-top: var(--dialog-content-padding);
-  --inset-padding-right: var(--dialog-content-padding);
-  --inset-padding-bottom: var(--dialog-content-padding);
-  --inset-padding-left: var(--dialog-content-padding);
   padding: var(--dialog-content-padding);
   box-sizing: border-box;
 
@@ -62,23 +58,33 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/*
+ * v2's overlay ladder. Size N wears the overlay corner N, pads one surface step above its
+ * index (capped at 4), and publishes --overlay-w as its designed maximum width. Dialog and
+ * AlertDialog read it as max-width; Sheet reads it on its start/end sides only. An explicit
+ * maxWidth prop wins, because the max-width utility comes later in the cascade.
+ */
 @breakpoints {
   .rt-BaseDialogContent {
     &:where(.rt-r-size-1) {
-      --dialog-content-padding: var(--space-6);
-      border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-3)));
+      --dialog-content-padding: var(--surface-p-2);
+      --overlay-w: var(--overlay-w-1);
+      border-radius: var(--radius-overlay-1);
     }
     &:where(.rt-r-size-2) {
-      --dialog-content-padding: var(--space-7);
-      border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-4)));
+      --dialog-content-padding: var(--surface-p-3);
+      --overlay-w: var(--overlay-w-2);
+      border-radius: var(--radius-overlay-2);
     }
     &:where(.rt-r-size-3) {
-      --dialog-content-padding: var(--space-8);
-      border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-5)));
+      --dialog-content-padding: var(--surface-p-4);
+      --overlay-w: var(--overlay-w-3);
+      border-radius: var(--radius-overlay-3);
     }
     &:where(.rt-r-size-4) {
-      --dialog-content-padding: var(--space-9);
-      border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-6)));
+      --dialog-content-padding: var(--surface-p-4);
+      --overlay-w: var(--overlay-w-4);
+      border-radius: var(--radius-overlay-4);
     }
   }
 }

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

@@ -35,7 +35,7 @@
 .rt-BaseMenuItem {
   display: flex;
   align-items: center;
-  gap: var(--space-3);
+  gap: var(--base-menu-item-gap);
   min-height: var(--base-menu-item-height);
   padding-top: var(--base-menu-item-padding-y);
   padding-bottom: var(--base-menu-item-padding-y);
@@ -45,6 +45,10 @@
   position: relative;
   outline: none;
   scroll-margin: var(--base-menu-content-padding) 0;
+  font-size: var(--base-menu-font-size);
+  line-height: var(--base-menu-line-height);
+  letter-spacing: var(--base-menu-letter-spacing);
+  border-radius: var(--base-menu-item-radius);
 
   /* Fix sticky text highlighting after selection in Firefox */
   user-select: none;
@@ -55,35 +59,64 @@
     cursor: default;
   }
 
-  /* Enhanced reduced motion support */
+  /* stylelint-disable-next-line selector-max-type */
+  & :where(svg) {
+    width: var(--base-menu-icon-size);
+    height: var(--base-menu-icon-size);
+    flex-shrink: 0;
+  }
 }
 
+/*
+ * The trailing slot (a shortcut, a submenu chevron) sits the row's inset from the far edge,
+ * the same distance as from the top and bottom. The label keeps the row's text padding.
+ */
 .rt-BaseMenuShortcut {
   display: flex;
   align-items: center;
   margin-inline-start: auto;
   padding-inline-start: var(--space-5);
-  margin-inline-end: calc(-2px * var(--scale)); /* Pulls closer to edge */
+  margin-inline-end: calc(var(--base-menu-item-padding-y) - var(--base-menu-item-padding-right));
+}
+
+/*
+ * A shortcut's Kbd is a line-box-tall chip, so it never grows the row past its line plus the
+ * insets. Kbd loads later and sets its own block padding, so this needs the extra class.
+ */
+/* stylelint-disable-next-line selector-max-specificity */
+.rt-BaseMenuShortcut .rt-Kbd {
+  height: var(--base-menu-line-height);
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .rt-BaseMenuSubTriggerIcon {
   color: var(--gray-12);
-  margin-inline-end: calc(-2px * var(--scale));
 }
 
+/* The check or radio mark sits in the leading icon box, at the plain padding. */
 .rt-BaseMenuItemIndicator {
   position: absolute;
-  inset-inline-start: 0;
-  width: var(--base-menu-item-padding-left);
+  inset-inline-start: var(--base-menu-item-px);
+  top: 0;
+  bottom: 0;
+  width: var(--base-menu-icon-size);
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
+/* The mark and the chevron are small glyphs, not icons. */
+.rt-BaseMenuItem :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon, .rt-SelectItemIndicatorIcon) {
+  width: var(--base-menu-indicator-icon-size);
+  height: var(--base-menu-indicator-icon-size);
+}
+
+/* A separator keeps the panel's own rhythm above and below, and spans the rows' text. */
 .rt-BaseMenuSeparator {
   height: 1px;
-  margin-top: var(--space-3);
-  margin-bottom: var(--space-3);
+  margin-top: var(--base-menu-content-padding);
+  margin-bottom: var(--base-menu-content-padding);
   margin-inline-start: var(--base-menu-item-padding-left);
   margin-inline-end: var(--base-menu-item-padding-right);
 }
@@ -97,6 +130,9 @@
   padding-inline-start: var(--base-menu-item-padding-left);
   padding-inline-end: var(--base-menu-item-padding-right);
   box-sizing: border-box;
+  font-size: var(--base-menu-font-size);
+  line-height: var(--base-menu-line-height);
+  letter-spacing: var(--base-menu-letter-spacing);
   color: var(--gray-a11);
   user-select: none;
   cursor: default;
@@ -111,15 +147,39 @@
   transform: scaleX(-1);
 }
 
+/***************************************************************************************************
+ *                                                                                                 *
+ * ROWS                                                                                            *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
 /*
- * Items leave room for the check/radio indicator only when the menu has one.
- * The size blocks below set both paddings; this picks one. Browsers without
- * :has() keep the indicator padding, which never overlaps.
+ * A panel that hugs rows (v2 §21). The panel pads --panel-p-N. A row hugs its line: its
+ * height is the line height plus --row-inset-N above and below (24 / 30 / 34 / 38 at sizes
+ * 1-4), never under the 24px target floor, and a wrapped label grows it. Its inline padding
+ * is --control-px-N, or --control-px-pill-N at radius full (--radius-full is 0px below full
+ * and 9999px at full). Its corner is --radius-row-N: half the row's own height at full.
+ *
+ * Items leave room for the check or radio mark only when the menu has one: the plain
+ * padding, the mark's icon box and the gap. Select and Combobox rows always carry a mark.
+ * Browsers without :has() keep the room.
  */
-.rt-BaseMenuContent {
+.rt-BaseMenuContent,
+.rt-SidebarHeader,
+.rt-SidebarFooter,
+.rt-SidebarSearchPopover {
+  --base-menu-item-height: max(24px, calc(var(--base-menu-line-height) + 2 * var(--base-menu-item-padding-y)));
+  --base-menu-item-padding-x: calc(
+    var(--base-menu-item-px) + min(var(--radius-full, 0px), var(--base-menu-item-px-pill) - var(--base-menu-item-px))
+  );
+  --base-menu-item-padding-left-plain: var(--base-menu-item-padding-x);
+  --base-menu-item-padding-left-indicator: calc(
+    var(--base-menu-item-px) + var(--base-menu-icon-size) + var(--base-menu-item-gap)
+  );
+  --base-menu-item-padding-right: var(--base-menu-item-padding-x);
   --base-menu-item-padding-left: var(--base-menu-item-padding-left-indicator);
 
-  &:where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+  &:where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem, .rt-SelectItem, .rt-ComboboxItem))) {
     --base-menu-item-padding-left: var(--base-menu-item-padding-left-plain);
   }
 }
@@ -133,117 +193,63 @@
 @breakpoints {
   .rt-BaseMenuContent {
     &:where(.rt-r-size-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);
-
-      & :where(.rt-BaseMenuItem) {
-        gap: var(--component-gap-2);
-        font-size: var(--font-size-1);
-        line-height: var(--line-height-1);
-        letter-spacing: var(--letter-spacing-1);
-        border-radius: var(--radius-1);
-
-        /* stylelint-disable-next-line selector-max-type */
-        & :where(svg) {
-          width: var(--content-icon-size-1);
-          height: var(--content-icon-size-1);
-          flex-shrink: 0;
-        }
-      }
-
-      & :where(.rt-BaseMenuLabel) {
-        font-size: var(--font-size-1);
-        line-height: var(--line-height-1);
-        letter-spacing: var(--letter-spacing-1);
-        padding-inline-start: var(--base-menu-item-padding-left);
-      }
-
-      & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
-        width: var(--indicator-icon-size-1);
-        height: var(--indicator-icon-size-1);
-      }
-
+      --base-menu-content-padding: var(--panel-p-1);
+      --base-menu-item-padding-y: var(--row-inset-1);
+      --base-menu-item-px: var(--control-px-1);
+      --base-menu-item-px-pill: var(--control-px-pill-1);
+      --base-menu-item-gap: var(--control-gap-1);
+      --base-menu-item-radius: var(--radius-row-1);
+      --base-menu-icon-size: var(--icon-size-1);
+      --base-menu-indicator-icon-size: var(--indicator-icon-size-1);
+      --base-menu-font-size: var(--font-size-1);
+      --base-menu-line-height: var(--line-height-1);
+      --base-menu-letter-spacing: var(--letter-spacing-1);
+      border-radius: var(--radius-surface-1);
     }
 
     &:where(.rt-r-size-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-2);
-      --base-menu-item-height: var(--control-height-2);
-      border-radius: var(--radius-surface-5);
-
-      & :where(.rt-BaseMenuItem) {
-        gap: var(--component-gap-3);
-        font-size: var(--font-size-2);
-        line-height: var(--line-height-2);
-        letter-spacing: var(--letter-spacing-2);
-        border-radius: var(--radius-2);
-
-        /* stylelint-disable-next-line selector-max-type */
-        & :where(svg) {
-          width: var(--content-icon-size-2);
-          height: var(--content-icon-size-2);
-          flex-shrink: 0;
-        }
-      }
-
-      & :where(.rt-BaseMenuLabel) {
-        font-size: var(--font-size-2);
-        line-height: var(--line-height-2);
-        letter-spacing: var(--letter-spacing-2);
-        padding-inline-start: var(--base-menu-item-padding-left);
-      }
-
-      & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
-        width: var(--indicator-icon-size-2);
-        height: var(--indicator-icon-size-2);
-      }
-
+      --base-menu-content-padding: var(--panel-p-2);
+      --base-menu-item-padding-y: var(--row-inset-2);
+      --base-menu-item-px: var(--control-px-2);
+      --base-menu-item-px-pill: var(--control-px-pill-2);
+      --base-menu-item-gap: var(--control-gap-2);
+      --base-menu-item-radius: var(--radius-row-2);
+      --base-menu-icon-size: var(--icon-size-2);
+      --base-menu-indicator-icon-size: var(--indicator-icon-size-2);
+      --base-menu-font-size: var(--font-size-2);
+      --base-menu-line-height: var(--line-height-2);
+      --base-menu-letter-spacing: var(--letter-spacing-2);
+      border-radius: var(--radius-surface-2);
     }
 
     &:where(.rt-r-size-3) {
-      --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);
-
-      & :where(.rt-BaseMenuItem) {
-        gap: var(--component-gap-4);
-        font-size: var(--font-size-3);
-        line-height: var(--line-height-3);
-        letter-spacing: var(--letter-spacing-3);
-        border-radius: var(--radius-2);
-
-        /* stylelint-disable-next-line selector-max-type */
-        & :where(svg) {
-          width: var(--content-icon-size-3);
-          height: var(--content-icon-size-3);
-          flex-shrink: 0;
-        }
-      }
-
-      & :where(.rt-BaseMenuLabel) {
-        font-size: var(--font-size-3);
-        line-height: var(--line-height-3);
-        letter-spacing: var(--letter-spacing-3);
-        padding-inline-start: var(--base-menu-item-padding-left);
-      }
-
-      & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
-        width: var(--indicator-icon-size-3);
-        height: var(--indicator-icon-size-3);
-      }
+      --base-menu-content-padding: var(--panel-p-3);
+      --base-menu-item-padding-y: var(--row-inset-3);
+      --base-menu-item-px: var(--control-px-3);
+      --base-menu-item-px-pill: var(--control-px-pill-3);
+      --base-menu-item-gap: var(--control-gap-3);
+      --base-menu-item-radius: var(--radius-row-3);
+      --base-menu-icon-size: var(--icon-size-3);
+      --base-menu-indicator-icon-size: var(--indicator-icon-size-3);
+      --base-menu-font-size: var(--font-size-3);
+      --base-menu-line-height: var(--line-height-3);
+      --base-menu-letter-spacing: var(--letter-spacing-3);
+      border-radius: var(--radius-surface-3);
+    }
 
+    &:where(.rt-r-size-4) {
+      --base-menu-content-padding: var(--panel-p-4);
+      --base-menu-item-padding-y: var(--row-inset-4);
+      --base-menu-item-px: var(--control-px-4);
+      --base-menu-item-px-pill: var(--control-px-pill-4);
+      --base-menu-item-gap: var(--control-gap-4);
+      --base-menu-item-radius: var(--radius-row-4);
+      --base-menu-icon-size: var(--icon-size-4);
+      --base-menu-indicator-icon-size: var(--indicator-icon-size-3);
+      --base-menu-font-size: var(--font-size-4);
+      --base-menu-line-height: var(--line-height-4);
+      --base-menu-letter-spacing: var(--letter-spacing-4);
+      border-radius: var(--radius-surface-4);
     }
   }
 }

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

@@ -3,7 +3,7 @@ import { colorPropDef } from '../../props/color.prop.js';
 
 import type { PropDef } from '../../props/prop-def.js';
 
-const contentSizes = ['1', '2'] as const;
+const contentSizes = ['1', '2', '3', '4'] as const;
 const submenuBehaviors = ['cascade', 'drill-down'] as const;
 
 // Base props shared between Content and SubContent

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

@@ -42,7 +42,8 @@ function useResolvedResponsiveValue<T>(value: Responsive<T> | undefined, default
 }
 
 /** Content padding per menu size, in px (see base-menu.css). */
-const CONTENT_PADDING: Record<string, number> = { '1': 8, '2': 12, '3': 12 };
+// The panel padding ladder (--panel-p-N).
+const CONTENT_PADDING: Record<string, number> = { '1': 8, '2': 12, '3': 16, '4': 24 };
 
 /**
  * Offset that lines the first item of a menu up with its anchor: the pointer

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

@@ -31,7 +31,7 @@
 .rt-SidebarMenuButton {
   display: flex;
   align-items: center;
-  gap: var(--space-3); /* Will be overridden by size-specific gap */
+  gap: var(--base-menu-item-gap);
   min-height: var(--base-menu-item-height);
   padding-top: var(--base-menu-item-padding-y);
   padding-bottom: var(--base-menu-item-padding-y);
@@ -129,31 +129,6 @@
   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-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-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-4);
-  padding-top: var(--space-3);
-  padding-bottom: var(--space-3);
-  min-height: var(--space-9);
-  font-size: var(--font-size-3);
-}
-
 .rt-SidebarGroupLabel {
   /* Inherit all BaseMenuLabel styles */
   display: flex;
@@ -175,18 +150,6 @@
   }
 }
 
-/* Reduce right padding on menu buttons with trailing elements */
-.rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
-  /* Use base menu padding tokens */
-  :where(.rt-SidebarContent.rt-r-size-1) & {
-    padding-inline-end: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
-  }
-
-  :where(.rt-SidebarContent.rt-r-size-2) & {
-    padding-inline-end: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
-  }
-}
-
 .rt-SidebarMenuShortcut {
   display: flex;
   align-items: center;
@@ -195,10 +158,17 @@
   color: var(--gray-a11);
 }
 
+/*
+ * A trailing badge sits the row's inset from the far edge, like a shortcut. A badge is taller
+ * than the line, so it may spend the row's block insets rather than grow the row past its height.
+ */
 .rt-SidebarMenuBadge {
   display: flex;
   align-items: center;
   margin-inline-start: auto;
+  margin-inline-end: calc(var(--base-menu-item-padding-y) - var(--base-menu-item-padding-right));
+  margin-top: calc(-1 * var(--base-menu-item-padding-y));
+  margin-bottom: calc(-1 * var(--base-menu-item-padding-y));
   padding-inline-start: var(--space-3);
 }
 

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

@@ -14,7 +14,7 @@ import type { Responsive } from '../../props/prop-def.js';
  * - Use the correct item height based on menu size
  */
 
-export type MenuSize = '1' | '2';
+export type MenuSize = '1' | '2' | '3' | '4';
 
 interface MenuContextValue {
   /** Whether we're inside a menu that owns the menu role */
@@ -33,10 +33,15 @@ interface MenuProviderProps {
   size?: Responsive<MenuSize>;
 }
 
-/** Menu item height in pixels per size: the control height ladder (--control-height-N). */
+/**
+ * Menu row height in pixels per size: the line height plus --row-inset-N above and below
+ * (base-menu.css), never under the 24px target floor.
+ */
 export const menuSizeToItemHeight: Record<MenuSize, number> = {
-  '1': 28,
-  '2': 32,
+  '1': 24,
+  '2': 30,
+  '3': 34,
+  '4': 38,
 };
 
 export function getMenuItemHeight(size: MenuSize): number {

package/src/components/accordion.css

@@ -12,13 +12,13 @@
       border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-2) {
-      border-radius: var(--radius-surface-2);
+      border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-3) {
-      border-radius: var(--radius-surface-3);
+      border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-4) {
-      border-radius: var(--radius-surface-4);
+      border-radius: var(--radius-surface-1);
     }
   }
 }

package/src/components/alert-dialog.css

@@ -1 +1,5 @@
 @import './_internal/base-dialog.css';
+
+.rt-AlertDialogContent {
+  max-width: var(--overlay-w);
+}