@sableui/react 0.11.0 → 0.13.0

package/dist/components/input-group/input-group.js

@@ -0,0 +1,66 @@
+// src/components/input-group/input-group.tsx
+import {
+  Children,
+  cloneElement
+} from "react";
+import { cn } from "../../lib/cn.js";
+import { useDensity, useTypeTier } from "../../lib/density.js";
+import { MOBILE_FIELD_TIER } from "../../lib/field-shell.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function InputGroup({
+  leading,
+  trailing,
+  children,
+  className,
+  id,
+  required,
+  disabled,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...props
+}) {
+  const tier = useTypeTier();
+  const density = useDensity();
+  const input = Children.only(children);
+  const control = cloneElement(input, {
+    ...id != null ? { id } : null,
+    ...required != null ? { required } : null,
+    ...disabled ? { disabled: true } : null,
+    ...describedBy ? { "aria-describedby": describedBy } : null,
+    ...invalid ? { "aria-invalid": invalid } : null
+  });
+  const addon = cn(
+    "flex shrink-0 items-center gap-1.5 text-muted-foreground whitespace-nowrap",
+    tier.body,
+    density === "comfortable" && MOBILE_FIELD_TIER
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "input-group",
+      className: cn(
+        "flex h-(--control-md) w-full items-center",
+        // The field shell, moved from the input to the group: focus is the
+        // ring on the whole field, and so are the error and disabled states.
+        "rounded-sm border border-input bg-card motion-interactive focus-within:ring-2 focus-within:ring-ring",
+        "has-[>input[aria-invalid=true]]:border-destructive has-[>input[aria-invalid=true]]:ring-destructive/30",
+        "has-[>input:disabled]:cursor-not-allowed has-[>input:disabled]:opacity-50",
+        // The Input keeps its type, padding and behaviour; the box is the group's.
+        "[&>input]:h-full [&>input]:min-w-0 [&>input]:flex-1 [&>input]:rounded-none [&>input]:border-0 [&>input]:bg-transparent [&>input]:focus-visible:ring-0 [&>input]:disabled:opacity-100",
+        leading != null && "[&>input]:ps-1.5",
+        trailing != null && "[&>input]:pe-1.5",
+        className
+      ),
+      ...props,
+      children: [
+        leading != null ? /* @__PURE__ */ jsx("span", { "data-slot": "input-group-leading", className: cn(addon, "ps-3 has-[>[data-variant]]:ps-1"), children: leading }) : null,
+        control,
+        trailing != null ? /* @__PURE__ */ jsx("span", { "data-slot": "input-group-trailing", className: cn(addon, "pe-3 has-[>[data-variant]]:pe-1"), children: trailing }) : null
+      ]
+    }
+  );
+}
+InputGroup.displayName = "InputGroup";
+export {
+  InputGroup
+};

package/dist/components/input-group/input-group.meta.js

@@ -0,0 +1,106 @@
+// src/components/input-group/input-group.meta.ts
+var inputGroupMeta = {
+  name: "InputGroup",
+  summary: `An Input with addons inside the same field: a prefix or suffix ("https://", ".com", "$"), an icon, or a borderless Button such as copy or reveal. One shell, one focus ring, one error state; a Field's label and error wiring reaches the Input inside.`,
+  keywords: [
+    "input group",
+    "input addon",
+    "prefix",
+    "suffix",
+    "adornment",
+    "url input",
+    "currency input",
+    "password reveal",
+    "copy field",
+    "icon in input"
+  ],
+  usage: {
+    description: "Use InputGroup when something belongs inside the field with the text: a unit, a fixed prefix, an icon, or a small action on the value itself (copy, reveal, clear). Use Field's `trailing` for an action beside the field (Apply next to a promo code), SearchInput for search, and NumberField for numbers with steppers.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Keep text addons short and fixed ("https://", "kg", "USD"). They are part of the field, not its label.'
+      },
+      {
+        guidance: "do",
+        description: 'For a button addon, use a borderless Button (`variant="ghost"`, `size="icon-sm"`) with an aria-label. The addon tightens around it, so it sits as far from the edge as from the top and bottom.'
+      },
+      {
+        guidance: "do",
+        description: 'Wrap the group in Field for a label and errors: `<Field label="Website"><InputGroup leading="https://"><Input /></InputGroup></Field>`.'
+      },
+      {
+        guidance: "dont",
+        description: `Do not put the value's meaning only in an addon. A screen reader hears the label and the text, so "Price (USD)" belongs in the label too.`
+      },
+      {
+        guidance: "dont",
+        description: "Do not restyle an Input to fake an addon; the group owns the border, the fill and the ring."
+      }
+    ]
+  },
+  related: {
+    components: ["Input", "Field", "SearchInput", "NumberField", "Button"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "leading",
+      type: "ReactNode",
+      default: "\u2014",
+      description: 'Inside the field, before the text: a prefix ("https://", "$"), an icon, or a borderless Button.'
+    },
+    {
+      name: "trailing",
+      type: "ReactNode",
+      default: "\u2014",
+      description: 'Inside the field, after the text: a suffix (".com", "kg"), an icon, or a borderless Button (copy, reveal, clear).'
+    },
+    {
+      name: "children",
+      type: "ReactElement",
+      default: "\u2014",
+      description: "The single `<Input />`. It keeps its own props and type; the group takes over its border, fill and focus ring."
+    },
+    {
+      name: "id / required / disabled / aria-describedby / aria-invalid",
+      type: "control props",
+      default: "\u2014",
+      description: "Forwarded to the Input, not set on the group. This is how a Field's wiring reaches the text box when the group is its child."
+    },
+    {
+      name: "className",
+      type: "string",
+      default: "\u2014",
+      description: "Layout classes for the group (width, margins)."
+    }
+  ],
+  tokensUsed: ["input", "card", "ring", "destructive", "muted-foreground", "foreground"],
+  a11y: [
+    "The Input stays the focusable control; the group draws the focus ring around the whole field while it is focused.",
+    "Inside a Field, the label, description and error are wired to the Input itself, not the group.",
+    "Text addons are plain text beside the input, read in order; put a unit or currency in the label as well so it is not only visual.",
+    "A button addon is a real Button with its own focus stop and needs an aria-label."
+  ],
+  examples: [
+    {
+      label: "Prefix and suffix",
+      code: '<Field label="Website"><InputGroup leading="https://" trailing=".com"><Input placeholder="example" /></InputGroup></Field>'
+    },
+    {
+      label: "Leading icon",
+      code: '<Field label="Email"><InputGroup leading={<Icon name="mail" />}><Input type="email" placeholder="you@example.com" /></InputGroup></Field>'
+    },
+    {
+      label: "Copy button",
+      code: '<Field label="API key"><InputGroup trailing={<Button variant="ghost" size="icon-sm" aria-label="Copy key" onClick={copy}><Icon name={copied ? "check" : "copy"} /></Button>}><Input readOnly value={key} /></InputGroup></Field>'
+    },
+    {
+      label: "Password with reveal",
+      code: '<Field label="Password"><InputGroup trailing={<Button variant="ghost" size="icon-sm" aria-label={shown ? "Hide password" : "Show password"} aria-pressed={shown} onClick={() => setShown(!shown)}><Icon name={shown ? "eye-off" : "eye"} /></Button>}><Input type={shown ? "text" : "password"} autoComplete="current-password" /></InputGroup></Field>'
+    }
+  ]
+};
+export {
+  inputGroupMeta
+};

package/dist/components/menu/index.js

@@ -5,6 +5,7 @@ import {
   MenuPortal,
   MenuContent,
   MenuItem,
+  MenuLinkItem,
   MenuSeparator,
   MenuGroup,
   MenuGroupLabel,
@@ -22,6 +23,7 @@ export {
   MenuGroup,
   MenuGroupLabel,
   MenuItem,
+  MenuLinkItem,
   MenuPortal,
   MenuRadioGroup,
   MenuRadioItem,

package/dist/components/menu/menu.js

@@ -6,7 +6,7 @@ import { cn } from "../../lib/cn.js";
 import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
 import { useAnchoredDensity, useTypeTier } from "../../lib/density.js";
 import { HighlightGlide } from "../../lib/highlight-glide.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Menu = Base.Root;
 var MenuTrigger = Base.Trigger;
 var MenuPortal = withPortalThemeScope(Base.Portal);
@@ -40,6 +40,28 @@ function MenuContent({
     }
   ) }) });
 }
+var MENU_ITEM = "flex cursor-default select-none items-center gap-(--item-gap) rounded-popup-item px-(--item-px) py-1.5 outline-none motion-interactive data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:shrink-0";
+function useItemContent(children, { icon, description }) {
+  const tier = useTypeTier();
+  if (!description) return icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon,
+    children
+  ] }) : children;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "menu-item-icon",
+        className: "flex size-(--control-sm) shrink-0 items-center justify-center rounded-sm border border-border-strong bg-popover text-muted-foreground",
+        children: icon
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+      /* @__PURE__ */ jsx("span", { children }),
+      /* @__PURE__ */ jsx("span", { "data-slot": "menu-item-description", className: cn("text-muted-foreground", tier.secondary), children: description })
+    ] })
+  ] });
+}
 var MENU_ITEM_DESTRUCTIVE = (
   // The ink is pulled a quarter toward --foreground (as Badge's soft tones
   // are), from --destructive-text rather than the fill: dark fills sit low
@@ -48,17 +70,34 @@ var MENU_ITEM_DESTRUCTIVE = (
   // 5.4:1, Prism dark, on the 10% red wash).
   "text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))] data-[highlighted]:bg-destructive/10 data-[highlighted]:text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))]"
 );
-function MenuItem({ className, variant = "default", ...props }) {
+function MenuItem({ className, variant = "default", icon, description, children, ...props }) {
   const tier = useTypeTier();
+  const content = useItemContent(children, { icon, description });
   return /* @__PURE__ */ jsx(
     Base.Item,
     {
-      className: cn(
-        `flex cursor-default select-none items-center gap-(--item-gap) rounded-popup-item px-(--item-px) py-1.5 ${tier.body} outline-none motion-interactive data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:shrink-0`,
-        variant === "destructive" && MENU_ITEM_DESTRUCTIVE,
-        className
-      ),
-      ...props
+      className: cn(MENU_ITEM, tier.body, variant === "destructive" && MENU_ITEM_DESTRUCTIVE, className),
+      ...props,
+      children: content
+    }
+  );
+}
+function MenuLinkItem({ className, icon, description, children, target, ...props }) {
+  const tier = useTypeTier();
+  const external = target === "_blank";
+  const label = external ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+    children,
+    /* @__PURE__ */ jsx(Icon, { name: "arrow-up-right", className: "text-[0.875em] text-muted-foreground" })
+  ] }) : children;
+  const content = useItemContent(label, { icon, description });
+  return /* @__PURE__ */ jsx(
+    Base.LinkItem,
+    {
+      className: cn(MENU_ITEM, tier.body, className),
+      target,
+      rel: external ? "noopener noreferrer" : void 0,
+      ...props,
+      children: content
     }
   );
 }
@@ -151,6 +190,7 @@ function MenuCheckboxItem({
   );
 }
 export {
+  MENU_ITEM,
   MENU_ITEM_DESTRUCTIVE,
   Menu,
   MenuCheckboxItem,
@@ -158,11 +198,13 @@ export {
   MenuGroup,
   MenuGroupLabel,
   MenuItem,
+  MenuLinkItem,
   MenuPortal,
   MenuRadioGroup,
   MenuRadioItem,
   MenuSeparator,
   MenuSubmenu,
   MenuSubmenuTrigger,
-  MenuTrigger
+  MenuTrigger,
+  useItemContent
 };

package/dist/components/menu/menu.meta.js

@@ -93,8 +93,13 @@ var menuMeta = {
     },
     {
       name: "MenuItem",
-      type: 'Base UI Menu.Item props + className (disabled, closeOnClick, onClick) + variant?: "default" | "destructive"',
-      description: 'An interactive row. Highlights via data-[highlighted]; dims via data-[disabled]. variant="destructive" for a delete or irreversible action: it keeps the destructive ink when highlighted (never className="text-destructive", which the highlight repaints).'
+      type: 'Base UI Menu.Item props + className (disabled, closeOnClick, onClick) + variant?: "default" | "destructive" + icon?: ReactNode + description?: ReactNode',
+      description: 'An interactive row. Highlights via data-[highlighted]; dims via data-[disabled]. variant="destructive" for a delete or irreversible action: it keeps the destructive ink when highlighted (never className="text-destructive", which the highlight repaints). `icon` leads the row; `description` adds a quieter second line saying what the action does, and the icon then sits in a small tile spanning both lines.'
+    },
+    {
+      name: "MenuLinkItem",
+      type: "Base UI Menu.LinkItem props (href, target, closeOnClick) + className + icon?: ReactNode + description?: ReactNode",
+      description: 'A row that navigates: a real <a>, so it opens in a new tab, middle-clicks and copies as a link. With target="_blank" it adds rel="noopener noreferrer" and a trailing \u2197. Takes icon and description like MenuItem.'
     },
     {
       name: "MenuSeparator",
@@ -165,6 +170,10 @@ var menuMeta = {
       label: "Nested, with a single-choice submenu",
       code: '<Menu>\n	<MenuTrigger render={<Button variant="secondary">View</Button>} />\n	<MenuContent>\n		<MenuItem>Reload</MenuItem>\n		<MenuSubmenu>\n			<MenuSubmenuTrigger value={density}>Density</MenuSubmenuTrigger>\n			<MenuContent side="inline-end" align="start" sideOffset={4}>\n				<MenuRadioGroup value={density} onValueChange={setDensity}>\n					<MenuRadioItem value="Comfortable">Comfortable</MenuRadioItem>\n					<MenuRadioItem value="Compact">Compact</MenuRadioItem>\n				</MenuRadioGroup>\n			</MenuContent>\n		</MenuSubmenu>\n	</MenuContent>\n</Menu>'
     },
+    {
+      label: "Rows with icons and descriptions, and links",
+      code: '<Menu>\n	<MenuTrigger render={<Button variant="outline" size="sm">Share</Button>} />\n	<MenuContent align="end">\n		<MenuItem icon={<Icon name="copy" />} description="Copy page as Markdown for LLMs" onClick={copy}>Copy page</MenuItem>\n		<MenuLinkItem icon={<Icon name="file" />} description="View this page as plain text" href={markdownUrl} target="_blank">View as Markdown</MenuLinkItem>\n	</MenuContent>\n</Menu>'
+    },
     {
       label: "Toggling rows",
       code: '<Menu>\n	<MenuTrigger render={<Button variant="secondary">Columns</Button>} />\n	<MenuContent>\n		<MenuCheckboxItem checked={cols.status} onCheckedChange={(v) => setCol("status", v)}>Status</MenuCheckboxItem>\n		<MenuCheckboxItem checked={cols.updated} onCheckedChange={(v) => setCol("updated", v)}>Updated</MenuCheckboxItem>\n	</MenuContent>\n</Menu>'

package/dist/components/menubar/index.js

@@ -0,0 +1,8 @@
+// src/components/menubar/index.ts
+import { Menubar, MenubarTrigger } from "./menubar.js";
+import { menubarMeta } from "./menubar.meta.js";
+export {
+  Menubar,
+  MenubarTrigger,
+  menubarMeta
+};

package/dist/components/menubar/menubar.js

@@ -0,0 +1,42 @@
+// src/components/menubar/menubar.tsx
+import { Menubar as Base } from "@base-ui/react/menubar";
+import { cn } from "../../lib/cn.js";
+import { useTypeTier } from "../../lib/density.js";
+import { trimLabel } from "../../lib/trim-label.js";
+import { buttonVariants } from "../button/button.variants.js";
+import { MenuTrigger } from "../menu/index.js";
+import { jsx } from "react/jsx-runtime";
+function Menubar({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base,
+    {
+      className: cn(
+        "inline-flex items-center gap-0.5 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+Menubar.displayName = "Menubar";
+function MenubarTrigger({ className, children, ...props }) {
+  const tier = useTypeTier();
+  return /* @__PURE__ */ jsx(
+    MenuTrigger,
+    {
+      className: cn(
+        buttonVariants({ variant: "ghost", size: "sm" }),
+        tier.control,
+        "sable-open:bg-accent sable-open:text-accent-foreground",
+        className
+      ),
+      ...props,
+      children: trimLabel(children)
+    }
+  );
+}
+MenubarTrigger.displayName = "MenubarTrigger";
+export {
+  Menubar,
+  MenubarTrigger
+};

package/dist/components/menubar/menubar.meta.js

@@ -0,0 +1,99 @@
+// src/components/menubar/menubar.meta.ts
+var menubarMeta = {
+  name: "Menubar",
+  summary: "An application's row of menus \u2014 File, Edit, View \u2014 over Base UI's Menubar. Each menu is an ordinary Sable Menu with a MenubarTrigger as its title; the bar joins them into one tab stop with \u2190/\u2192 between titles, and once one menu is open, pointing at a neighbour opens it.",
+  status: "stable",
+  keywords: ["menubar", "menu bar", "app menu", "file menu", "edit menu", "application menu", "desktop menu"],
+  usage: {
+    description: "Use Menubar for a tool or editor whose commands are too many for a toolbar and belong under named menus (File, Edit, View, Help). Use Toolbar for a row of direct actions, a single Menu or OverflowMenu for one set of options, and NavigationMenu-style links for site navigation.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Compose each menu from the Menu parts: `<Menu><MenubarTrigger>File</MenubarTrigger><MenuContent>\u2026</MenuContent></Menu>`. Rows, groups, submenus, checkbox and radio items are the same parts a lone Menu uses."
+      },
+      {
+        guidance: "do",
+        description: `Name the bar with aria-label ("Editor") so it is announced as the application's menus, not a list of buttons.`
+      },
+      {
+        guidance: "do",
+        description: "Keep titles to one short word each. A reader scans a menubar left to right; a phrase in the bar is a toolbar button."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use MenubarTrigger outside a Menubar, or a plain MenuTrigger inside one. The bar's arrow keys and hover-to-switch work on the triggers it owns; a Button trigger in the bar looks like a menu title and behaves like a stray button."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use a menubar for site navigation. Its items are commands in menus (role=menuitem), not links between pages."
+      }
+    ],
+    anatomy: [
+      { name: "Menubar", required: true, description: "The bar: role=menubar, one tab stop, arrow keys between titles." },
+      { name: "Menu", required: true, description: "One per title; the ordinary Menu root." },
+      { name: "MenubarTrigger", required: true, description: "The title in the bar that opens its menu." },
+      { name: "MenuContent", required: true, description: "The menu's popup, with MenuItem / MenuSubmenu / MenuCheckboxItem rows inside." }
+    ]
+  },
+  related: {
+    components: ["Menu", "Toolbar", "OverflowMenu", "ContextMenu"]
+  },
+  props: [
+    {
+      name: "orientation",
+      type: '"horizontal" | "vertical"',
+      default: '"horizontal"',
+      description: "The bar's axis. Arrow keys follow it: \u2190/\u2192 along a horizontal bar, \u2191/\u2193 down a vertical one."
+    },
+    {
+      name: "loopFocus",
+      type: "boolean",
+      default: "true",
+      description: "Wrap from the last title back to the first with the arrow keys."
+    },
+    {
+      name: "modal",
+      type: "boolean",
+      default: "true",
+      description: "While a menu is open, block pointer interaction outside it and lock page scroll, like a lone Menu."
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      default: "false",
+      description: "Disable every menu in the bar."
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Layout classes for the bar. Titles take their look from MenubarTrigger."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "MenubarTrigger",
+      type: "Base UI Menu.Trigger props + className",
+      description: "A menu's title in the bar. A small ghost Button in the control type tier, held in the accent wash while its menu is open (`sable-open:`), so the reader sees which title the popup belongs to."
+    }
+  ],
+  tokensUsed: ["accent", "accent-foreground", "foreground", "ring"],
+  a11y: [
+    'Base UI renders role="menubar" with aria-orientation; each title is a menuitem with aria-haspopup and aria-expanded.',
+    "The bar is one tab stop. \u2190/\u2192 move between titles (\u2191/\u2193 when vertical), \u2193 or Enter opens a menu and moves into it, and Esc closes it and returns focus to its title.",
+    "With one menu open, pointing at another title opens that menu instead, so a reader can sweep across the bar, as in a desktop application.",
+    "Name the bar with aria-label; titles are their own text."
+  ],
+  examples: [
+    {
+      label: "Editor menus",
+      code: '<Menubar aria-label="Editor">\n	<Menu>\n		<MenubarTrigger>File</MenubarTrigger>\n		<MenuContent>\n			<MenuItem>New</MenuItem>\n			<MenuItem>Open\u2026</MenuItem>\n			<MenuSeparator />\n			<MenuItem>Save</MenuItem>\n		</MenuContent>\n	</Menu>\n	<Menu>\n		<MenubarTrigger>Edit</MenubarTrigger>\n		<MenuContent>\n			<MenuItem>Undo</MenuItem>\n			<MenuItem>Redo</MenuItem>\n		</MenuContent>\n	</Menu>\n</Menubar>'
+    },
+    {
+      label: "With a submenu and toggling rows",
+      code: '<Menubar aria-label="Editor">\n	<Menu>\n		<MenubarTrigger>View</MenubarTrigger>\n		<MenuContent>\n			<MenuCheckboxItem checked={ruler} onCheckedChange={setRuler}>Show ruler</MenuCheckboxItem>\n			<MenuSubmenu>\n				<MenuSubmenuTrigger value={zoom}>Zoom</MenuSubmenuTrigger>\n				<MenuContent side="inline-end" align="start" sideOffset={4}>\n					<MenuRadioGroup value={zoom} onValueChange={setZoom}>\n						<MenuRadioItem value="100%">100%</MenuRadioItem>\n						<MenuRadioItem value="Fit">Fit</MenuRadioItem>\n					</MenuRadioGroup>\n				</MenuContent>\n			</MenuSubmenu>\n		</MenuContent>\n	</Menu>\n</Menubar>'
+    }
+  ]
+};
+export {
+  menubarMeta
+};

package/dist/components/message-scroller/message-scroller.meta.js

@@ -20,6 +20,10 @@ var messageScrollerMeta = {
   usage: {
     description: "The scroll region a conversation lives in. It owns the scrolling and nothing else \u2014 not your messages, not your AI state, not your transport or persistence \u2014 so you bring the content renderer and it handles the behaviors that make streaming chat feel right: pinning to the newest message, releasing when the reader scrolls up, keeping the view still when older history loads above, jumping to a specific message, restoring a saved read position, and reporting what is actually on screen.",
     bestPractices: [
+      {
+        guidance: "do",
+        description: "Building a whole chat? `sable docs building-a-chat` covers what the scroller does during a stream, what the app owns, and the failure states around it."
+      },
       {
         guidance: "do",
         description: "Bound it the way you would bound any scroll box \u2014 `flex-1 min-h-0` inside a flex column, or `max-h-96`. `className` lands on the element that actually scrolls, so the obvious bound is the correct one (same contract as Scroller)."

package/dist/components/navigation-menu/index.js

@@ -0,0 +1,19 @@
+// src/components/navigation-menu/index.ts
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger
+} from "./navigation-menu.js";
+import { navigationMenuMeta } from "./navigation-menu.meta.js";
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuMeta
+};

package/dist/components/navigation-menu/navigation-menu.js

@@ -0,0 +1,108 @@
+// src/components/navigation-menu/navigation-menu.tsx
+import { NavigationMenu as Base } from "@base-ui/react/navigation-menu";
+import { createContext, useContext } from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { useAnchoredDensity, useTypeTier } from "../../lib/density.js";
+import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NavigationMenuPortal = withPortalThemeScope(Base.Portal);
+function NavigationMenu({ className, children, align = "start", sideOffset = 8, ...props }) {
+  return /* @__PURE__ */ jsxs(Base.Root, { className: cn("relative", className), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx(NavigationMenuPanel, { align, sideOffset })
+  ] });
+}
+function NavigationMenuPanel({
+  align,
+  sideOffset
+}) {
+  const anchoredDensity = useAnchoredDensity();
+  return /* @__PURE__ */ jsx(NavigationMenuPortal, { children: /* @__PURE__ */ jsx(
+    Base.Positioner,
+    {
+      align,
+      sideOffset,
+      collisionPadding: 16,
+      className: cn(
+        "z-(--z-overlay) transition-[top,left,right,bottom] duration-(--motion-duration-slow) ease-emphasized data-instant:transition-none",
+        // A bridge over the sideOffset gap, so the pointer can travel from
+        // the trigger into the panel without crossing open space.
+        "before:absolute before:inset-x-0 before:bottom-full before:h-2 before:content-['']"
+      ),
+      children: /* @__PURE__ */ jsx(
+        Base.Popup,
+        {
+          ...anchoredDensity,
+          className: cn(
+            "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg border border-border-floating bg-popover sable-surface-popover text-popover-foreground shadow-md outline-none",
+            "transition-[opacity,scale,width,height] duration-(--motion-duration-slow) ease-emphasized",
+            "data-starting-style:scale-96 data-starting-style:opacity-0 data-ending-style:scale-96 data-ending-style:opacity-0",
+            "data-ending-style:duration-(--motion-duration-exit) data-ending-style:ease-standard"
+          ),
+          children: /* @__PURE__ */ jsx(Base.Viewport, { className: "relative size-full overflow-hidden rounded-[inherit]" })
+        }
+      )
+    }
+  ) });
+}
+function NavigationMenuList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Base.List, { className: cn("flex items-center gap-1", className), ...props });
+}
+function NavigationMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Base.Item, { className, ...props });
+}
+var BAR_ENTRY = "inline-flex h-(--control-sm) select-none items-center gap-1 rounded-[var(--button-radius,9999px)] px-3 text-muted-foreground outline-none sable-surface-interactive motion-interactive focus-visible:ring-2 focus-visible:ring-ring data-popup-open:text-foreground";
+function NavigationMenuTrigger({ className, children, ...props }) {
+  const tier = useTypeTier();
+  return /* @__PURE__ */ jsxs(Base.Trigger, { className: cn(BAR_ENTRY, tier.control, className), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx(Base.Icon, { className: "flex transition-[rotate] duration-(--motion-duration-fast) ease-standard data-popup-open:rotate-180", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: "text-[0.875em]" }) })
+  ] });
+}
+var InPanelContext = createContext(false);
+function NavigationMenuContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(InPanelContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+    Base.Content,
+    {
+      className: cn(
+        "h-full w-max max-w-[calc(100vw-2rem)] popup-inset",
+        "transition-[opacity,translate] duration-(--motion-duration-slow) ease-emphasized",
+        "data-starting-style:opacity-0 data-ending-style:opacity-0",
+        "data-starting-style:data-[activation-direction=left]:-translate-x-1/2 data-starting-style:data-[activation-direction=right]:translate-x-1/2",
+        "data-ending-style:data-[activation-direction=left]:translate-x-1/2 data-ending-style:data-[activation-direction=right]:-translate-x-1/2",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function NavigationMenuLink({ className, description, children, ...props }) {
+  const inPanel = useContext(InPanelContext);
+  const tier = useTypeTier();
+  if (!inPanel) {
+    return /* @__PURE__ */ jsx(Base.Link, { className: cn(BAR_ENTRY, tier.control, className), ...props, children });
+  }
+  return /* @__PURE__ */ jsxs(
+    Base.Link,
+    {
+      className: cn(
+        "flex flex-col gap-0.5 rounded-popup-item px-(--item-px) py-2 outline-none sable-surface-interactive motion-interactive focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: tier.control, children }),
+        description ? /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", tier.secondary), children: description }) : null
+      ]
+    }
+  );
+}
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger
+};