@womp/kookie-ui 0.19.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);
-  }
 }
 
 /***************************************************************************************************
@@ -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-1);
-
-      & :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-1);
-
-      & :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/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;
@@ -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;
@@ -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;

package/src/components/table.css

@@ -32,9 +32,8 @@
   box-shadow: var(--table-row-box-shadow);
   box-sizing: border-box;
   vertical-align: inherit;
-  padding: var(--table-cell-padding);
-  /* Works as min-height */
-  height: var(--table-cell-min-height);
+  /* A cell hugs its line: the inset above and below, the wider inset at the sides. */
+  padding: var(--table-cell-py) var(--table-cell-px);
 }
 .rt-TableColumnHeaderCell {
   font-weight: 600;
@@ -53,32 +52,46 @@
   .rt-TableRoot {
     &:where(.rt-r-size-1) {
       --table-border-radius: var(--radius-surface-1);
-      --table-cell-padding: var(--space-3);
-      --table-cell-min-height: calc(36px * var(--scale));
+      --table-cell-py: var(--layout-space-2);
+      --table-cell-px: var(--layout-space-3);
 
       & :where(.rt-TableRootTable) {
-        font-size: var(--font-size-2);
-        line-height: var(--line-height-2);
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
       }
     }
     &:where(.rt-r-size-2) {
       --table-border-radius: var(--radius-surface-2);
-      --table-cell-padding: var(--space-4);
-      --table-cell-min-height: calc(44px * var(--scale));
+      --table-cell-py: var(--layout-space-3);
+      --table-cell-px: var(--layout-space-4);
 
       & :where(.rt-TableRootTable) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
       }
     }
     &:where(.rt-r-size-3) {
       --table-border-radius: var(--radius-surface-3);
-      --table-cell-padding: var(--space-5);
-      --table-cell-min-height: var(--space-9);
+      --table-cell-py: var(--layout-space-4);
+      --table-cell-px: var(--layout-space-5);
 
       & :where(.rt-TableRootTable) {
         font-size: var(--font-size-3);
         line-height: var(--line-height-3);
+        letter-spacing: var(--letter-spacing-3);
+      }
+    }
+    &:where(.rt-r-size-4) {
+      --table-border-radius: var(--radius-surface-4);
+      --table-cell-py: var(--layout-space-5);
+      --table-cell-px: var(--layout-space-6);
+
+      & :where(.rt-TableRootTable) {
+        font-size: var(--font-size-4);
+        line-height: var(--line-height-4);
+        letter-spacing: var(--letter-spacing-4);
       }
     }
   }

package/src/components/text.css

@@ -59,11 +59,6 @@
 
 @breakpoints {
   .rt-Text {
-    &:where(.rt-r-size-0) {
-      font-size: var(--font-size-0);
-      --line-height: var(--line-height-0);
-      --letter-spacing: var(--letter-spacing-0);
-    }
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-1);
       --line-height: var(--line-height-1);
@@ -109,20 +104,5 @@
       --line-height: var(--line-height-9);
       --letter-spacing: var(--letter-spacing-9);
     }
-    &:where(.rt-r-size-10) {
-      font-size: var(--font-size-10);
-      --line-height: var(--line-height-10);
-      --letter-spacing: var(--letter-spacing-10);
-    }
-    &:where(.rt-r-size-11) {
-      font-size: var(--font-size-11);
-      --line-height: var(--line-height-11);
-      --letter-spacing: var(--letter-spacing-11);
-    }
-    &:where(.rt-r-size-12) {
-      font-size: var(--font-size-12);
-      --line-height: var(--line-height-12);
-      --letter-spacing: var(--letter-spacing-12);
-    }
   }
 }

package/src/components/text.props.tsx

@@ -11,7 +11,7 @@ import { weightPropDef } from '../props/weight.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const as = ['span', 'div', 'label', 'p'] as const;
-const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 
 const textPropDefs = {
   as: { type: 'enum', values: as, default: 'span' },

package/src/components/virtual-menu.tsx

@@ -5,6 +5,8 @@ import classNames from 'classnames';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useMenuContext, getMenuItemHeight } from './_internal/menu-context.js';
 
+import type { MenuSize } from './_internal/menu-context.js';
+
 /**
  * VirtualMenu - A virtualized menu component for rendering large lists efficiently.
  *
@@ -90,7 +92,7 @@ interface VirtualMenuProps<T> {
    * Only set manually when using VirtualMenu outside of a menu context.
    * @default '2' (or inherited from context)
    */
-  size?: '1' | '2';
+  size?: MenuSize;
   /**
    * Estimated height of each item in pixels.
    * Can be a number (same for all) or a function (per-item).

package/src/props/weight.prop.ts

@@ -1,6 +1,7 @@
 import type { PropDef } from './prop-def.js';
 
-const weights = ['thin', 'extralight', 'light', 'regular', 'medium', 'semibold', 'bold', 'extrabold'] as const;
+/** v2's three weights (§15). No bold: a larger size or stronger emphasis says importance. */
+const weights = ['regular', 'medium', 'semibold'] as const;
 
 const weightPropDef = {
   weight: {