@womp/kookie-ui 0.18.0 → 0.20.0

package/src/components/select.css

@@ -39,11 +39,16 @@
   height: var(--trigger-icon-size-default);
 }
 
+/*
+ * The panel and its rows are the menu's (base-menu.css): the content is a BaseMenuContent and
+ * every item a BaseMenuItem, so the panel pads --panel-p-N and a row hugs its line. What is
+ * left here is the select's own: the check mark's box and rich rows.
+ */
 .rt-SelectContent {
-  --scrollarea-scrollbar-vertical-margin-top: var(--select-content-padding);
-  --scrollarea-scrollbar-vertical-margin-bottom: var(--select-content-padding);
-  --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
-  --scrollarea-scrollbar-horizontal-margin-right: var(--select-content-padding);
+  --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);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--base-menu-content-padding);
 
   overflow: hidden;
   z-index: 200; /* Above dialogs (100) so select inside dialogs/sheets work */
@@ -59,47 +64,28 @@
 
 .rt-SelectViewport {
   box-sizing: border-box;
-  padding: var(--select-content-padding);
 
   :where(.rt-SelectContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) & {
     padding-right: var(--space-4);
   }
 }
 
-.rt-SelectItem {
-  display: flex;
-  align-items: center;
-  height: var(--select-item-height);
-  padding-left: var(--select-item-indicator-width);
-  padding-right: var(--select-item-indicator-width);
-  position: relative;
-  box-sizing: border-box;
-  outline: none;
-  scroll-margin: var(--select-content-padding) 0;
-
-  /* Fix sticky text highlighting after selection in Firefox */
-  user-select: none;
-
-  /* Cursors */
-  cursor: var(--cursor-menu-item);
-  &:where([data-disabled]) {
-    cursor: default;
-  }
+/* Rich content grows the row; the mark stays on the first line. */
+.rt-SelectItem:where(.rt-SelectItemRich) {
+  align-items: flex-start;
 
-  /* Allow rich content to expand height */
-  &:where(.rt-SelectItemRich) {
-    height: auto;
-    min-height: var(--select-item-height);
-    align-items: flex-start;
-    padding-top: var(--space-3);
-    padding-bottom: var(--space-3);
+  & :where(.rt-SelectItemIndicator) {
+    bottom: auto;
+    height: var(--base-menu-item-height);
   }
 }
 
 .rt-SelectItemIndicator {
   position: absolute;
-  left: 0;
-  width: var(--select-item-indicator-width);
+  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;
@@ -107,25 +93,10 @@
 
 .rt-SelectSeparator {
   height: var(--separator-height-thin);
-  margin-top: var(--space-3);
-  margin-bottom: var(--space-3);
-  margin-left: var(--select-item-indicator-width);
-  margin-right: var(--select-separator-margin-right);
 }
 
 .rt-SelectLabel {
-  display: flex;
-  align-items: center;
-  height: var(--select-item-height);
-  padding-left: var(--select-item-indicator-width);
-  padding-right: var(--select-item-indicator-width);
   color: var(--gray-a10);
-  user-select: none;
-  cursor: default;
-
-  :where(.rt-SelectItem) + & {
-    margin-top: var(--space-3);
-  }
 }
 
 /***************************************************************************************************
@@ -162,7 +133,7 @@
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
-      border-radius: var(--radius-pill-1);
+      border-radius: var(--radius-control-1);
 
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-1);
@@ -177,7 +148,7 @@
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
-      border-radius: var(--radius-pill-2);
+      border-radius: var(--radius-control-2);
 
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-2);
@@ -192,7 +163,7 @@
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
-      border-radius: var(--radius-pill-3);
+      border-radius: var(--radius-control-3);
 
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-3);
@@ -207,7 +178,7 @@
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
-      border-radius: var(--radius-pill-4);
+      border-radius: var(--radius-control-4);
 
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-4);
@@ -217,92 +188,6 @@
   }
 }
 
-/***************************************************************************************************
- *                                                                                                 *
- * CONTENT SIZES                                                                                   *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-SelectContent {
-    &:where(.rt-r-size-1) {
-      --select-content-padding: var(--space-2);
-      --select-item-height: var(--control-height-1);
-      --select-item-indicator-width: calc(var(--space-6) / var(--select-item-indicator-width-factor));
-      --select-separator-margin-right: var(--space-3);
-      border-radius: var(--radius-surface-3);
-
-      & :where(.rt-SelectLabel) {
-        font-size: var(--font-size-1);
-        letter-spacing: var(--letter-spacing-1);
-        line-height: var(--line-height-1);
-      }
-      & :where(.rt-SelectItem) {
-        font-size: var(--font-size-1);
-        line-height: var(--line-height-1);
-        letter-spacing: var(--letter-spacing-1);
-        border-radius: var(--radius-1);
-      }
-      & :where(.rt-SelectItemIndicatorIcon) {
-        width: var(--select-indicator-icon-size-1);
-        height: var(--select-indicator-icon-size-1);
-      }
-    }
-    &:where(.rt-r-size-2, .rt-r-size-3, .rt-r-size-4) {
-      --select-content-padding: var(--space-3);
-      --select-item-indicator-width: var(--space-6);
-      --select-separator-margin-right: var(--space-4);
-      border-radius: var(--radius-surface-4);
-
-      & :where(.rt-SelectLabel) {
-        font-size: var(--font-size-2);
-        letter-spacing: var(--letter-spacing-2);
-        line-height: var(--line-height-2);
-      }
-      & :where(.rt-SelectItem) {
-        line-height: var(--line-height-2);
-        border-radius: var(--radius-2);
-      }
-    }
-    &:where(.rt-r-size-2) {
-      --select-item-height: var(--control-height-2);
-
-      & :where(.rt-SelectItem) {
-        font-size: var(--font-size-2);
-        letter-spacing: var(--letter-spacing-2);
-      }
-      & :where(.rt-SelectItemIndicatorIcon) {
-        width: var(--select-indicator-icon-size-2);
-        height: var(--select-indicator-icon-size-2);
-      }
-    }
-    &:where(.rt-r-size-3) {
-      --select-item-height: var(--control-height-3);
-
-      & :where(.rt-SelectItem) {
-        font-size: var(--font-size-3);
-        letter-spacing: var(--letter-spacing-3);
-      }
-      & :where(.rt-SelectItemIndicatorIcon) {
-        width: var(--select-indicator-icon-size-3);
-        height: var(--select-indicator-icon-size-3);
-      }
-    }
-    &:where(.rt-r-size-4) {
-      --select-item-height: var(--control-height-4);
-
-      & :where(.rt-SelectItem) {
-        font-size: var(--font-size-4);
-        letter-spacing: var(--letter-spacing-4);
-      }
-      & :where(.rt-SelectItemIndicatorIcon) {
-        width: var(--select-indicator-icon-size-4);
-        height: var(--select-indicator-icon-size-4);
-      }
-    }
-  }
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * TRIGGER VARIANTS                                                                                *

package/src/components/sheet.css

@@ -2,7 +2,8 @@
   position: fixed !important;
   /* Use physical properties to integrate with width/height responsive utilities */
   width: var(--width, 90vw);
-  max-width: var(--max-width, 100vw);
+  /* The size's overlay width caps the start/end sides; top and bottom span the window. */
+  max-width: min(var(--overlay-w), 100vw);
   height: 100vh;
   max-height: 100vh;
   margin: 0 !important;

package/src/components/sheet.tsx

@@ -12,8 +12,8 @@
  *
  * Notes
  * - Side: set with `side` on `Sheet.Content`. Aliases: `left` → `start`, `right` → `end`.
- * - Sizing: reuses Dialog content prop defs (width/min/max/height/size). Default Dialog
- *   maxWidth clamping is removed for Sheets.
+ * - Sizing: reuses Dialog content prop defs (width/min/max/height/size). Size follows the
+ *   Theme size; start/end sheets cap at the size's overlay width unless maxWidth is set.
  * - A11y: provide an accessible name via `Sheet.Title` or `aria-label` on `Sheet.Content`.
  *
  * Example
@@ -41,6 +41,7 @@ import { Theme } from './theme.js';
 import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
@@ -91,13 +92,7 @@ const {
   align: _alignPropDef,
   ...dialogPropDefsForSheet
 } = dialogContentPropDefs;
-
-// Override dialog's default maxWidth (600px) to avoid clamping Sheet by default
-const { default: _mwDefault, ...maxWidthWithoutDefault } = dialogPropDefsForSheet.maxWidth;
-const sheetPropDefs = {
-  ...dialogPropDefsForSheet,
-  maxWidth: maxWidthWithoutDefault,
-} as typeof dialogPropDefsForSheet;
+const sheetPropDefs = dialogPropDefsForSheet;
 
 type SheetContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 interface SheetContentProps
@@ -121,8 +116,9 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>(
       forceMount,
       container,
       className,
-      ...restProps
+      ...ownProps
     } = allProps;
+    const restProps = useThemeSizeProps(ownProps, sheetPropDefs.size);
     const normalizedSideMap: Record<SheetSide, 'start' | 'end' | 'top' | 'bottom'> = {
       left: 'start',
       right: 'end',

package/src/components/shell.css

@@ -755,7 +755,7 @@
 .rt-ShellPane[data-inset],
 .rt-ShellContent[data-inset] {
   margin: var(--shell-inset-gap);
-  border-radius: var(--radius-surface-3);
+  border-radius: var(--radius-surface-1);
   background: var(--color-background);
   box-shadow: var(--shadow-2);
 }

package/src/components/sidebar.css

@@ -39,8 +39,8 @@
   flex-direction: column !important;
   gap: var(--space-2) !important;
   text-align: center !important;
-  font-size: var(--font-size-0) !important;
-  line-height: var(--line-height-0) !important;
+  font-size: var(--font-size-1) !important;
+  line-height: var(--line-height-1) !important;
   padding-inline-start: var(--space-2) !important;
   padding-inline-end: var(--space-2) !important;
   /* Add margin for balanced spacing like normal variant */
@@ -87,8 +87,8 @@
     flex-direction: column;
     gap: var(--space-2);
     text-align: center;
-    font-size: var(--font-size-0);
-    line-height: var(--line-height-0);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -122,8 +122,8 @@
     flex-direction: column;
     gap: var(--space-2);
     text-align: center;
-    font-size: var(--font-size-0);
-    line-height: var(--line-height-0);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -156,8 +156,8 @@
     flex-direction: column;
     gap: var(--space-2);
     text-align: center;
-    font-size: var(--font-size-0);
-    line-height: var(--line-height-0);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -232,19 +232,19 @@
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-1 .rt-SidebarMenuIconWrapper {
   padding: var(--space-3) var(--space-3);
-  border-radius: var(--radius-pill-1);
+  border-radius: var(--radius-control-1);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-2 .rt-SidebarMenuIconWrapper {
   padding: var(--space-3);
-  border-radius: var(--radius-pill-2);
+  border-radius: var(--radius-control-2);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-3 .rt-SidebarMenuIconWrapper {
   padding: var(--space-4);
-  border-radius: var(--radius-pill-3);
+  border-radius: var(--radius-control-3);
 }
 
 /* Label styling in thin mode - outside the background area */
@@ -257,8 +257,8 @@
   white-space: nowrap;
   text-align: center;
   color: var(--gray-11);
-  font-size: var(--font-size-0);
-  line-height: var(--line-height-0);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
 }
 
 /* Active label gets accent color and medium weight */
@@ -493,12 +493,12 @@
   /* Inherit all base MenuButton styles */
   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);
-  padding-left: var(--base-menu-item-padding-left);
-  padding-right: var(--base-menu-item-padding-right);
+  padding-inline-start: var(--base-menu-item-padding-left);
+  padding-inline-end: var(--base-menu-item-padding-right);
   box-sizing: border-box;
   position: relative;
   outline: none;
@@ -523,14 +523,6 @@
   /* Reduced motion support */
 }
 
-.rt-SidebarHeader :where(.rt-SidebarMenuButton) {
-  border-radius: var(--sidebar-base-border-radius) var(--sidebar-base-border-radius) 0 0;
-}
-
-.rt-SidebarFooter :where(.rt-SidebarMenuButton) {
-  border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * SIZES                                                                                           *
@@ -544,10 +536,10 @@
 }
 
 @breakpoints {
-  /* Sidebar rows sit on the control height ladder: size N is as tall as a Button,
-     menu item or TextField of size N. Content is a BaseMenuContent, so it takes
-     every size value from base-menu.css. Header and Footer are not, so they
-     restate base-menu's values here; keep the two in step. */
+  /* Sidebar rows sit on the control height ladder: size N is as tall as a Button or
+     TextField of size N, with the row family's pill padding, gap and icon box. Content is a
+     BaseMenuContent, so it takes every other size value from base-menu.css. Header and
+     Footer are not, so they restate base-menu's values here; keep the two in step. */
   /* A Shell pane is a surface: its header, footer, search and scrolling list all pad by the
      surface padding at the Shell's index, so every row and every control in the pane starts on
      one line. The Rail is left out: its tiles keep their own tight padding (above). */
@@ -580,98 +572,71 @@
 
   .rt-SidebarHeader:where(.rt-r-size-1),
   .rt-SidebarFooter:where(.rt-r-size-1) {
-    --base-menu-content-padding: var(--space-3);
-    --base-menu-item-padding-left: var(--space-3);
-    --base-menu-item-padding-right: var(--space-3);
-    --base-menu-item-padding-y: var(--space-2);
+    --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-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);
+  }
+
+  /* A sidebar row stands level with a button: control height, and the control's corner. */
+  .rt-SidebarContent:where(.rt-r-size-1),
+  .rt-SidebarHeader:where(.rt-r-size-1),
+  .rt-SidebarFooter:where(.rt-r-size-1) {
     --base-menu-item-height: var(--control-height-1);
-    --sidebar-item-height: var(--base-menu-item-height);
-
-    & :where(.rt-SidebarMenuButton) {
-      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;
-      }
-    }
+    --base-menu-item-radius: var(--radius-control-1);
+    --sidebar-item-height: var(--control-height-1);
+  }
 
-    & :where(.rt-BaseMenuSubTriggerIcon) {
-      width: var(--indicator-icon-size-1);
-      height: var(--indicator-icon-size-1);
-      flex-shrink: 0;
-      margin-left: auto;
-    }
+  .rt-SidebarHeader:where(.rt-r-size-2),
+  .rt-SidebarFooter:where(.rt-r-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-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);
   }
 
+  /* A sidebar row stands level with a button: control height, and the control's corner. */
+  .rt-SidebarContent:where(.rt-r-size-2),
   .rt-SidebarHeader:where(.rt-r-size-2),
   .rt-SidebarFooter:where(.rt-r-size-2) {
-    --base-menu-content-padding: var(--space-4);
-    --base-menu-item-padding-left: var(--space-4);
-    --base-menu-item-padding-right: var(--space-4);
-    --base-menu-item-padding-y: var(--space-2);
     --base-menu-item-height: var(--control-height-2);
-    --sidebar-item-height: var(--base-menu-item-height);
-
-    & :where(.rt-SidebarMenuButton) {
-      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;
-      }
-    }
+    --base-menu-item-radius: var(--radius-control-2);
+    --sidebar-item-height: var(--control-height-2);
+  }
 
-    & :where(.rt-BaseMenuSubTriggerIcon) {
-      width: var(--indicator-icon-size-2);
-      height: var(--indicator-icon-size-2);
-      flex-shrink: 0;
-      margin-left: auto;
-    }
+  .rt-SidebarHeader:where(.rt-r-size-3),
+  .rt-SidebarFooter:where(.rt-r-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-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);
   }
 
+  /* A sidebar row stands level with a button: control height, and the control's corner. */
+  .rt-SidebarContent:where(.rt-r-size-3),
   .rt-SidebarHeader:where(.rt-r-size-3),
   .rt-SidebarFooter:where(.rt-r-size-3) {
-    --base-menu-content-padding: var(--space-4);
-    --base-menu-item-padding-left: var(--space-4);
-    --base-menu-item-padding-right: var(--space-4);
-    --base-menu-item-padding-y: var(--space-3);
     --base-menu-item-height: var(--control-height-3);
-    --sidebar-item-height: var(--base-menu-item-height);
-
-    & :where(.rt-SidebarMenuButton) {
-      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-BaseMenuSubTriggerIcon) {
-      width: var(--indicator-icon-size-3);
-      height: var(--indicator-icon-size-3);
-      flex-shrink: 0;
-      margin-left: auto;
-    }
+    --base-menu-item-radius: var(--radius-control-3);
+    --sidebar-item-height: var(--control-height-3);
   }
 }
 
@@ -862,8 +827,8 @@
   flex-direction: column !important;
   gap: var(--space-2) !important;
   text-align: center !important;
-  font-size: var(--font-size-0) !important;
-  line-height: var(--line-height-0) !important;
+  font-size: var(--font-size-1) !important;
+  line-height: var(--line-height-1) !important;
   padding-inline-start: var(--space-2) !important;
   padding-inline-end: var(--space-2) !important;
   margin-top: 1px;
@@ -921,19 +886,19 @@
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-ShellRailContent.rt-r-size-1 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
   padding: var(--space-3) var(--space-3);
-  border-radius: var(--radius-pill-1);
+  border-radius: var(--radius-control-1);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-ShellRailContent.rt-r-size-2 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
   padding: var(--space-3);
-  border-radius: var(--radius-pill-2);
+  border-radius: var(--radius-control-2);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-ShellRailContent.rt-r-size-3 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
   padding: var(--space-4);
-  border-radius: var(--radius-pill-3);
+  border-radius: var(--radius-control-3);
 }
 
 /* Search trigger icon wrapper hover (soft variant) */
@@ -950,11 +915,18 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
-  --base-menu-item-height: var(--space-8);
-  --base-menu-item-padding-y: var(--space-2);
-  --base-menu-item-padding-left: var(--space-4);
-  --base-menu-item-padding-right: var(--space-4);
+  /* A floating panel of rows at size 2: the rows hug their line (base-menu.css). */
   --base-menu-content-padding: 0;
+  --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);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
@@ -986,26 +958,13 @@
   list-style: none;
 }
 
-/* Popover menu button sizing (mirrors size-2 Content rules) */
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-SidebarSearchPopover .rt-SidebarMenuButton {
-  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);
   font-weight: var(--font-weight-regular);
   margin-top: 1px;
   margin-bottom: 1px;
 }
 
-/* stylelint-disable-next-line selector-max-type, selector-max-specificity */
-.rt-SidebarSearchPopover .rt-SidebarMenuButton :where(svg) {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
-  flex-shrink: 0;
-}
-
 /* Popover menu button hover (soft variant) */
 @media (hover: hover) {
   /* stylelint-disable-next-line selector-max-specificity */

package/src/components/sidebar.tsx

@@ -348,10 +348,8 @@ const SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion
       );
     });
 
-    // DropdownMenu only supports sizes 1 and 2, so map size 3 to 2
-    const dropdownSize = visual?.size === '3' ? '2' : visual?.size;
     return (
-      <DropdownMenu.Content size={dropdownSize} className={classNames(className)}>
+      <DropdownMenu.Content size={visual?.size} className={classNames(className)}>
         <DropdownMenu.Group>{normalized}</DropdownMenu.Group>
       </DropdownMenu.Content>
     );

package/src/components/slider.css

@@ -294,8 +294,8 @@
 }
 
 .rt-SliderTickLabel {
-  font-size: var(--font-size-0);
-  line-height: var(--line-height-0);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
   color: var(--gray-11);
   font-weight: var(--font-weight-regular);
   white-space: nowrap;