@womp/kookie-ui 0.19.0 → 0.21.0

package/schemas/schemas.d.ts

@@ -14,16 +14,12 @@ export interface BaseButtonJsonSchema {
 }
 
 export interface ButtonJsonSchema extends BaseButtonJsonSchema {}
-export interface IconButtonJsonSchema extends BaseButtonJsonSchema {}
-export interface ToggleButtonJsonSchema extends BaseButtonJsonSchema {}
-export interface ToggleIconButtonJsonSchema extends BaseButtonJsonSchema {}
+export interface ToggleJsonSchema extends BaseButtonJsonSchema {}
 
 export interface KookieUIButtonSchemas {
   'base-button': BaseButtonJsonSchema;
   'button': ButtonJsonSchema;
-  'icon-button': IconButtonJsonSchema;
-  'toggle-button': ToggleButtonJsonSchema;
-  'toggle-icon-button': ToggleIconButtonJsonSchema;
+  'toggle': ToggleJsonSchema;
 }
 
 export type ButtonComponentName = keyof KookieUIButtonSchemas;

package/schemas/{toggle-button.json → toggle.json}

@@ -1,7 +1,7 @@
 {
-  "$ref": "#/definitions/Toggle-buttonSchema",
+  "$ref": "#/definitions/ToggleSchema",
   "definitions": {
-    "Toggle-buttonSchema": {
+    "ToggleSchema": {
       "type": "object",
       "properties": {
         "as": {
@@ -139,11 +139,6 @@
           "description": "Loading state that shows a spinner and disables interaction",
           "type": "boolean"
         },
-        "flush": {
-          "default": false,
-          "description": "Flush mode that removes visual padding for seamless text integration",
-          "type": "boolean"
-        },
         "disabled": {
           "default": false,
           "description": "Disabled state",
@@ -316,8 +311,8 @@
     }
   },
   "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "title": "Toggle-button Component Props",
-  "description": "Props schema for the toggle-button component in Kookie UI",
+  "title": "Toggle Component Props",
+  "description": "Props schema for the toggle component in Kookie UI",
   "version": "1.0.0",
   "source": "Zod schema"
 }

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

@@ -3,7 +3,7 @@
  *
  * This file contains the foundational styling for all button components in the
  * Kookie User Interface design system. It provides the base styles that are
- * extended by Button, IconButton, and other button variants.
+ * extended by Button (including its icon-only form) and Toggle.
  *
  * ARCHITECTURE:
  * - Base styles: Layout, accessibility
@@ -130,7 +130,7 @@
 
 /* An icon-only button is square: no inline padding, and aspect-ratio rather than a width ladder,
    so a hosted icon button whose height comes from its container (Toolbar, Chatbar) stays square. */
-.rt-BaseButton:where(.rt-IconButton) {
+.rt-BaseButton:where([data-icon-only]) {
   padding-inline: 0;
   aspect-ratio: 1;
 }
@@ -349,40 +349,6 @@
   }
 }
 
-/* Ghost flush mode: pull the button out by its own padding so its content sits on the text line */
-.rt-BaseButton:where(.rt-variant-ghost[data-flush='true']) {
-  --margin-top: 0px;
-  --margin-right: 0px;
-  --margin-bottom: 0px;
-  --margin-left: 0px;
-
-  --button-padding-x: var(--base-button-px);
-  --button-padding-y: calc((var(--base-button-height) - 1lh) / 2);
-
-  --margin-top-override: calc(var(--margin-top) - var(--button-padding-y));
-  --margin-right-override: calc(var(--margin-right) - var(--button-padding-x));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--button-padding-y));
-  --margin-left-override: calc(var(--margin-left) - var(--button-padding-x));
-
-  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;
-  }
-}
-
-/* A flush ghost icon button pulls out by the space around its glyph */
-.rt-BaseButton:where(.rt-IconButton.rt-variant-ghost[data-flush='true']) {
-  --button-padding-x: calc((var(--base-button-height) - var(--base-button-icon-size)) / 2);
-  --button-padding-y: var(--button-padding-x);
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * SPECIAL VARIANTS                                                                                *

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

@@ -27,7 +27,7 @@ const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost'] as c
 /**
  * Base button prop definitions that define the component's API
  * 
- * These props are used by all button variants (Button, IconButton, etc.)
+ * These props are used by all button variants (Button and Toggle)
  * to ensure consistent behavior and styling across the design system.
  * 
  * Key features:
@@ -72,17 +72,11 @@ const baseButtonPropDefs = {
    * Useful for mobile layouts and form submissions
    */
   fullWidth: { type: 'boolean', className: 'rt-full-width', default: false },
-  /**
-   * Flush mode that removes visual padding for seamless text integration
-   * Only effective with ghost variant
-   */
-  flush: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   loading: PropDef<boolean>;
   fullWidth: PropDef<boolean>;
-  flush: PropDef<boolean>;
 };
 
 export { baseButtonPropDefs };

package/src/components/_internal/base-button.tsx

@@ -8,9 +8,7 @@ import { Spinner } from '../spinner.js';
 import { VisuallyHidden } from '../visually-hidden.js';
 import { extractProps } from '../../helpers/extract-props.js';
 import { useThemeSizeProps } from '../../helpers/theme-size.js';
-import { marginPropDefs } from '../../props/margin.props.js';
 
-import type { MarginProps } from '../../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../../helpers/component-props.js';
 import type { GetPropDefTypes } from '../../props/prop-def.js';
 
@@ -26,8 +24,7 @@ type PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {
   /** Element type to render as (e.g., 'a', 'span', etc.) */
   as?: C;
 } & BaseButtonOwnProps &
-  MarginProps &
-  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;
+  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | 'as'>;
 
 /**
  * BaseButton props interface that combines all available props
@@ -39,8 +36,7 @@ interface BaseButtonProps extends PolymorphicBaseButtonProps {}
  *
  * This is the foundational button component that handles all the complex logic
  * including loading states, accessibility, performance optimizations, and
- * polymorphic rendering. It's used by Button, IconButton, and other button
- * variants to ensure consistent behavior across the design system.
+ * polymorphic rendering. It's used by Button and Toggle to ensure consistent behavior across the design system.
  *
  * Key features:
  * - Loading state with spinner and accessibility announcements
@@ -70,10 +66,9 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
     as,
     color,
     radius,
-    flush,
     disabled: nativeDisabled,
     ...baseButtonProps
-  } = extractProps(props, baseButtonPropDefs, marginPropDefs);
+  } = extractProps(props, baseButtonPropDefs);
 
   // Loading blocks activation but keeps the native `disabled` off, so the button keeps focus
   // and its place in the tab order (aria-disabled carries the state). An explicit `disabled`
@@ -158,7 +153,6 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
     <Comp
       data-accent-color={color}
       data-radius={radius}
-      data-flush={flush ? 'true' : undefined}
       data-icon-start={iconStart || undefined}
       data-icon-end={iconEnd || undefined}
       {...baseButtonProps}

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

@@ -7,13 +7,8 @@
   flex-shrink: 0;
   cursor: var(--cursor-checkbox);
 
-  /* Unless in a skeleton, align with text line height when possible and fall back to own height */
-  height: var(--skeleton-height, var(--line-height, var(--checkbox-size)));
-  --skeleton-height-override: var(--checkbox-size);
-
-  /* Set root radius when in a skeleton */
-  border-radius: var(--skeleton-radius);
-  --skeleton-radius-override: var(--checkbox-border-radius);
+  /* Align with text line height when possible and fall back to own height */
+  height: var(--line-height, var(--checkbox-size));
 
   /*
    * Ceiling on the mark's corner, as a ratio of its own box.
@@ -322,7 +317,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* The focus ring lives on Checkbox and CheckboxGroup: CheckboxCards rings its card instead. */
+/* The focus ring lives on Checkbox and CheckboxGroup. */
 .rt-BaseCheckboxRoot {
   /* Disabled is a colour remap (per variant above), never opacity; the cursor stays default. */
   &:where(:disabled, [data-disabled]) {

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,37 +59,68 @@
     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 {
+  box-sizing: content-box;
   height: 1px;
-  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);
+  padding-top: var(--base-menu-content-padding);
+  padding-bottom: var(--base-menu-content-padding);
+  padding-inline-start: var(--base-menu-item-padding-left);
+  padding-inline-end: var(--base-menu-item-padding-right);
+  background-clip: content-box;
 }
 
 .rt-BaseMenuLabel {
@@ -97,12 +132,17 @@
   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;
 
+  /* After items, the extra air is inside the label's own box, never a margin on it. */
   :where(.rt-BaseMenuItem) + & {
-    margin-top: var(--space-3);
+    min-height: calc(var(--base-menu-item-height) + var(--space-3));
+    padding-top: calc(var(--base-menu-item-padding-y) + var(--space-3));
   }
 }
 
@@ -111,15 +151,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 +197,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);
+      --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-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);
-      }
-
     }
 
     &: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);
+      --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-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);
-      }
-
     }
 
     &: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);
+      --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-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);
-      }
-
+    &: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);
     }
   }
 }
@@ -321,7 +331,7 @@
       }
 
       /* Also target any element with data-accent-color="gray" */
-      & :where([data-accent-color='gray']:not(.rt-Badge)) {
+      & :where([data-accent-color='gray']:not(.rt-Chip)) {
         color: inherit !important;
       }
     }

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-radio.css

@@ -7,13 +7,8 @@
   flex-shrink: 0;
   cursor: var(--cursor-radio);
 
-  /* Unless in a skeleton, align with text line height when possible and fall back to own height */
-  height: var(--skeleton-height, var(--line-height, var(--radio-size)));
-  --skeleton-height-override: var(--radio-size);
-
-  /* Set root radius when in a skeleton */
-  border-radius: var(--skeleton-radius);
-  --skeleton-radius-override: 100%;
+  /* Align with text line height when possible and fall back to own height */
+  height: var(--line-height, var(--radio-size));
 
   isolation: isolate;
 

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;
@@ -169,21 +144,10 @@
   user-select: none;
   cursor: default;
 
-  /* Add margin-top when following menu items - identical to BaseMenuLabel */
+  /* After items, the extra air is inside the label's own box - identical to BaseMenuLabel */
   :where(.rt-SidebarMenuItem) + & {
-    margin-top: var(--space-3);
-  }
-}
-
-/* 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 */
+    min-height: calc(var(--base-menu-item-height) + var(--space-3));
+    padding-top: calc(var(--base-menu-item-padding-y) + var(--space-3));
   }
 }
 
@@ -195,10 +159,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);
 }