@sableui/react 0.18.0 → 0.19.0

package/dist/components/date-picker/date-picker.js

@@ -12,7 +12,7 @@ import { useId, useState } from "react";
 import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { useDensity, useTypeTier } from "../../lib/density.js";
-import { FIELD_INVALID, FIELD_SHELL, MOBILE_FIELD_TIER } from "../../lib/field-shell.js";
+import { FIELD_INVALID, FIELD_SHELL, FIELD_SHELL_XS, MOBILE_FIELD_TIER } from "../../lib/field-shell.js";
 import { Calendar } from "../calendar/calendar.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
 import {
@@ -56,6 +56,8 @@ function DatePicker(props) {
     disabled,
     minDate,
     maxDate,
+    size = "md",
+    formatOptions,
     className,
     id,
     "aria-label": ariaLabel,
@@ -102,11 +104,12 @@ function DatePicker(props) {
     if (next == null) return;
     commit(setMinutes(timeBase(), Number(next)));
   }
-  const label = value ? (
+  const label = value ? formatOptions ? new Intl.DateTimeFormat(void 0, formatOptions).format(value) : (
     // 24-hour, matching the hour / minute Selects below — the trigger
     // and the row that sets it must not show the same time two ways.
     format(value, withTime ? "MMM d, yyyy 'at' HH:mm" : "PP")
   ) : placeholder ?? (withTime ? "Pick date & time" : "Pick a date");
+  const xs = size === "xs";
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(
       PopoverTrigger,
@@ -130,17 +133,21 @@ function DatePicker(props) {
               "aria-required": ariaRequired,
               disabled,
               className: cn(
-                "inline-flex h-(--control-md) items-center gap-2 ps-3 pe-3 text-start text-foreground",
+                "inline-flex items-center text-start text-foreground",
+                xs ? "h-(--control-xs) gap-1 px-1.5" : "h-(--control-md) gap-2 ps-3 pe-3",
                 // Select's type: the density tier, plus the 16px phone tier
-                // its form-row neighbours take (lib/field-shell).
+                // its form-row neighbours take (lib/field-shell). The xs rung
+                // never sits in a page-register form row, so it skips it.
                 tier.body,
-                density === "comfortable" && MOBILE_FIELD_TIER,
+                density === "comfortable" && !xs && MOBILE_FIELD_TIER,
                 FIELD_SHELL,
+                // After FIELD_SHELL, so its well replaces the outlined field.
+                xs && FIELD_SHELL_XS,
                 FIELD_INVALID,
                 className
               ),
               children: [
-                /* @__PURE__ */ jsx(Icon, { name: "calendar", className: "shrink-0 text-sm text-muted-foreground" }),
+                /* @__PURE__ */ jsx(Icon, { name: "calendar", className: cn("shrink-0 text-muted-foreground", xs ? "text-xs" : "text-sm") }),
                 /* @__PURE__ */ jsx("span", { className: cn("truncate", !value && "text-muted-foreground"), children: label })
               ]
             }

package/dist/components/date-picker/date-picker.meta.js

@@ -5,6 +5,9 @@ var datePickerMeta = {
   status: "stable",
   keywords: [
     "date picker",
+    "due date",
+    "property row",
+    "inspector",
     "calendar",
     "date input",
     "date time picker",
@@ -104,6 +107,17 @@ var datePickerMeta = {
       type: "Date",
       description: "Latest selectable day (inclusive). Later days are disabled and navigation is bounded."
     },
+    {
+      name: "size",
+      type: '"md" | "xs"',
+      default: '"md"',
+      description: `The trigger's rung. md is the form field beside Input and Select. xs is the property-grid rung (24px in a workspace): an inset panel-field well with no border, the same shape as SelectTrigger size="xs" and ScrubField on the neighbouring rows of an inspector \u2014 use it for a due date in a PropertyRow instead of a native date input.`
+    },
+    {
+      name: "formatOptions",
+      type: "Intl.DateTimeFormatOptions",
+      description: `How the trigger writes the chosen date, as Intl.DateTimeFormat options in the reader's locale \u2014 { month: "short", day: "numeric" } for "Oct 23" where the rest of a list writes dates that way. Omitted: "Oct 23, 2026" (with "at 14:30" under granularity="minute").`
+    },
     {
       name: "className",
       type: "string",
@@ -137,6 +151,14 @@ var datePickerMeta = {
     'With granularity="minute" the hour and minute Selects are full Base UI listboxes (typeahead, ARIA) labelled "Hour" and "Minute"; selecting a day keeps the chosen time-of-day, so day and time can be set in any order.'
   ],
   examples: [
+    {
+      label: "In an inspector row",
+      code: `<PanelSection title="Properties">
+	<PropertyRow label="Due date">
+		<DatePicker size="xs" aria-label="Due date" value={due} onValueChange={setDue} formatOptions={{ month: "short", day: "numeric" }} />
+	</PropertyRow>
+</PanelSection>`
+    },
     {
       label: "Controlled",
       code: "const [date, setDate] = useState<Date>()\n<DatePicker value={date} onValueChange={setDate} />"

package/dist/components/menu/menu.js

@@ -131,6 +131,7 @@ function MenuSubmenuTrigger({
   className,
   children,
   value,
+  icon,
   ...props
 }) {
   const tier = useTypeTier();
@@ -143,6 +144,7 @@ function MenuSubmenuTrigger({
       ),
       ...props,
       children: [
+        icon,
         /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-start", children }),
         value !== void 0 ? /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: value }) : null,
         /* @__PURE__ */ jsx(Icon, { name: "chevron-right", className: "text-xs opacity-60" })

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

@@ -114,8 +114,8 @@ var menuMeta = {
     },
     {
       name: "MenuSubmenuTrigger",
-      type: "Base UI Menu.SubmenuTrigger props + value: ReactNode + className",
-      description: 'The row that opens a submenu: item styling, a trailing chevron, and an optional `value` showing the current choice so the row reads "Effort  High \u203A" rather than making the reader open it to find out.'
+      type: "Base UI Menu.SubmenuTrigger props + value: ReactNode + icon: ReactNode + className",
+      description: 'The row that opens a submenu: item styling, a trailing chevron, and an optional `value` showing the current choice so the row reads "Effort  High \u203A" rather than making the reader open it to find out. `icon` leads the row as MenuItem\'s does; give it one whenever the items around it have icons, or its label starts a column to their left.'
     },
     {
       name: "MenuRadioGroup",

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

@@ -7,7 +7,9 @@ import {
   useSyncExternalStore
 } from "react";
 import { cn } from "../../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
+import { useBelowBreakpoint } from "../../lib/use-media-query.js";
+import { Sheet, SheetContent, SheetTitle } from "../sheet/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 var widthCache = /* @__PURE__ */ new Map();
 var listeners = /* @__PURE__ */ new Set();
 function clampWidth(value, min, max) {
@@ -64,10 +66,24 @@ function Panel({
   label,
   width,
   scroll = true,
+  narrow = "dock",
+  open,
+  onOpenChange,
+  side = "right",
+  below = "lg",
   className,
   children,
   ...props
 }) {
+  const isNarrow = useBelowBreakpoint(below);
+  if (narrow !== "dock" && isNarrow) {
+    if (narrow === "hidden") return null;
+    return /* @__PURE__ */ jsx(Sheet, { open: open ?? false, onOpenChange: (next) => onOpenChange?.(next), children: /* @__PURE__ */ jsxs(SheetContent, { side, className: "gap-0 p-0 [--sidebar-width:100%]", children: [
+      /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: label }),
+      children
+    ] }) });
+  }
+  if (open === false) return null;
   return /* @__PURE__ */ jsx(
     "aside",
     {

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

@@ -13,7 +13,13 @@ var panelGroupMeta = {
     "tool",
     "chrome",
     "inspector",
-    "layout"
+    "layout",
+    "mobile",
+    "responsive",
+    "sheet",
+    "drawer",
+    "narrow",
+    "detail pane"
   ],
   usage: {
     description: "Use PanelGroup for the body of a tool workspace: fixed-width Panels docked left and/or right, a flexible Panel in the middle for the canvas, and a PanelResizer between them. Panels scroll internally and the group never scrolls. This is the workspace-register counterpart to SplitPane, which only switches between side-by-side and stacked at a breakpoint and cannot be resized.",
@@ -30,6 +36,14 @@ var panelGroupMeta = {
         guidance: "do",
         description: "Label every Panel \u2014 they are landmarks, and 'Layers' or 'Properties' is what a screen-reader user navigates by."
       },
+      {
+        guidance: "do",
+        description: 'Decide what each docked Panel becomes on a phone with `narrow`: "sheet" for an inspector or a navigation rail the user opens on demand, "hidden" for chrome a phone does without. Drive a sheet\'s `open` from the same state that selects the record, so selecting a row opens the inspector at every width.'
+      },
+      {
+        guidance: "dont",
+        description: 'Render the same inspector twice, once in a Panel and once in a Sheet behind a hand-rolled viewport check. `narrow="sheet"` renders the content once, in whichever place applies.'
+      },
       {
         guidance: "dont",
         description: "Let the group scroll. Only panels and the canvas scroll; a scrolling group means the shell lost its height constraint."
@@ -69,8 +83,8 @@ var panelGroupMeta = {
   subcomponents: [
     {
       name: "Panel",
-      type: "{ label: string; width?: number; scroll?: boolean }",
-      description: "A docked or flexible column. `label` names the landmark; omit `width` for the flexible centre. `scroll` defaults to true \u2014 set it false for a header + scrolling body + pinned footer, so the footer doesn't scroll away with the list. When you own the layout, give the header and footer shrink-0 and the middle min-h-0 flex-1 overflow-y-auto. overflow-y-auto only activates if every flex ancestor can shrink: a single missing min-h-0 anywhere up the chain makes the panel grow instead of scroll, and nothing reports it."
+      type: '{ label: string; width?: number; scroll?: boolean; narrow?: "dock" | "sheet" | "hidden"; open?: boolean; onOpenChange?: (open: boolean) => void; side?: "left" | "right"; below?: "sm" | "md" | "lg" | "xl" | "2xl" }',
+      description: 'A docked or flexible column. Below `below` (default lg, where Sidebar and BottomNav swap), `narrow` decides what it becomes: "dock" (default) stays docked, "sheet" renders the same content once inside a Sheet from `side` (default "right"; a panel before the canvas is "left"), titled by `label`, open while `open` is true and closed through `onOpenChange` (Esc, scrim, swipe), and "hidden" drops it. `open` defaults to true docked (false removes the column, so the canvas takes its width) and false as a sheet. Crossing the breakpoint remounts the content, so keep state that must survive it in the app. `label` names the landmark; omit `width` for the flexible centre. `scroll` defaults to true \u2014 set it false for a header + scrolling body + pinned footer, so the footer doesn\'t scroll away with the list. When you own the layout, give the header and footer shrink-0 and the middle min-h-0 flex-1 overflow-y-auto. overflow-y-auto only activates if every flex ancestor can shrink: a single missing min-h-0 anywhere up the chain makes the panel grow instead of scroll, and nothing reports it.'
     },
     {
       name: "PanelResizer",
@@ -158,6 +172,32 @@ var panelGroupMeta = {
       </Panel>
     </PanelGroup>
   )
+}`
+    },
+    {
+      label: "Inspector that becomes a sheet on phones",
+      code: `function Body() {
+  const [selected, setSelected] = useState<string | null>(null)
+  return (
+    <PanelGroup>
+      <Panel label="Issues">
+        <div className="p-2">
+          <Button size="xs" variant="ghost" onClick={() => setSelected("AES-104")}>AES-104 Refine product page</Button>
+        </div>
+      </Panel>
+      <Panel
+        label="Issue details"
+        width={320}
+        narrow="sheet"
+        open={selected !== null}
+        onOpenChange={(open) => !open && setSelected(null)}
+      >
+        <PanelSection title={selected ?? ""}>
+          <PropertyRow label="Status"><Input defaultValue="In progress" /></PropertyRow>
+        </PanelSection>
+      </Panel>
+    </PanelGroup>
+  )
 }`
     },
     {

package/dist/components/side-nav/side-nav.variants.js

@@ -11,7 +11,12 @@ var sideNavItemVariants = cva(
         md: "gap-2.5 rounded-sm px-3 py-1.5 text-body-sm",
         lg: "gap-3 rounded-sm px-3 py-2 text-body-md",
         // The app rail (Sidebar): chrome-weight rows on the label tier.
-        rail: `${RAIL_ROW_INLINE} rounded-sm py-2.5 text-label-lg`
+        rail: `${RAIL_ROW_INLINE} rounded-sm py-2.5 text-label-lg`,
+        // The same rail inside a compact scope (a Workspace): the same
+        // columns, a 20px icon and a 32px row. Sidebar picks it from the
+        // density, so a tool's rail is not a page's 44px rows beside
+        // 28px chrome.
+        "rail-compact": `${RAIL_ROW_INLINE} rounded-sm py-1.5 text-label-lg`
       },
       activeVariant: {
         content: "text-foreground hover:bg-muted focus-visible:ring-ring data-[active]:bg-accent data-[active]:text-accent-foreground",
@@ -24,8 +29,8 @@ var sideNavItemVariants = cva(
 var sideNavItemIconVariants = cva(
   "flex shrink-0 items-center justify-center",
   {
-    // md 20px icon in a 20px box; lg 20px in 24px; rail 24px in 24px.
-    variants: { size: { md: "size-[1em] text-xl", lg: "size-[1.2em] text-xl", rail: "size-[1em] text-2xl" } },
+    // md 20px icon in a 20px box; lg 20px in 24px; rail 24px in 24px; compact rail 20px in 20px.
+    variants: { size: { md: "size-[1em] text-xl", lg: "size-[1.2em] text-xl", rail: "size-[1em] text-2xl", "rail-compact": "size-[1em] text-xl" } },
     defaultVariants: { size: "md" }
   }
 );

package/dist/components/sidebar/index.js

@@ -6,13 +6,17 @@ import {
   SidebarNav,
   SidebarFooter,
   SidebarItem,
+  SidebarGroup,
+  SidebarAccount,
   useSidebar
 } from "./sidebar.js";
 import { sidebarMeta } from "./sidebar.meta.js";
 export {
   Sidebar,
+  SidebarAccount,
   SidebarBrand,
   SidebarFooter,
+  SidebarGroup,
   SidebarHeader,
   SidebarItem,
   SidebarNav,

package/dist/components/sidebar/sidebar.js

@@ -5,9 +5,12 @@ import { useRender } from "@base-ui/react/use-render";
 import {
   createContext,
   useContext,
+  useId,
   useState
 } from "react";
+import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
+import { useDensity } from "../../lib/density.js";
 import { HighlightGlide } from "../../lib/highlight-glide.js";
 import { motionAttribute } from "../../motion/MotionProvider.js";
 import { useAppShellFrame } from "../app-shell/app-shell-frame.js";
@@ -16,7 +19,8 @@ import { SimpleTooltip } from "../tooltip/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var SidebarContext = createContext({
   collapsed: false,
-  icons: true
+  icons: true,
+  rung: "rail"
 });
 var LABEL_FADE = "starting:opacity-0 transition-opacity duration-(--motion-duration-base) ease-decelerate";
 function useSidebar() {
@@ -58,7 +62,8 @@ function Sidebar({
   const [hasCollapsed, setHasCollapsed] = useState(collapsed);
   if (collapsed && !hasCollapsed) setHasCollapsed(true);
   const inset = useAppShellFrame() === "inset";
-  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { collapsed, icons, reopened: hasCollapsed && !collapsed }, children: /* @__PURE__ */ jsx(
+  const rung = useDensity() === "compact" ? "rail-compact" : "rail";
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { collapsed, icons, reopened: hasCollapsed && !collapsed, rung }, children: /* @__PURE__ */ jsx(
     "aside",
     {
       "data-motion": motionAttribute(motion),
@@ -103,12 +108,15 @@ function SidebarHeader({
   className,
   ...props
 }) {
-  const { collapsed } = useSidebar();
+  const { collapsed, rung } = useSidebar();
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "flex min-h-16 flex-wrap content-center items-center gap-y-2 px-3 has-[>:nth-child(2)]:py-3",
+        "flex flex-wrap content-center items-center gap-y-2 px-3",
+        // Compact, the brand row is the height of the tool's own chrome bar,
+        // so it lines up with the WorkspaceBar beside it.
+        rung === "rail-compact" ? "min-h-(--chrome-bar-height) has-[>:nth-child(2)]:py-2" : "min-h-16 has-[>:nth-child(2)]:py-3",
         // Collapsed, the brand mark centres on the same axis as the item icons.
         collapsed && "justify-center px-0",
         className
@@ -119,7 +127,7 @@ function SidebarHeader({
 }
 SidebarHeader.displayName = "SidebarHeader";
 function SidebarBrand({ mark, label, render, className, "aria-label": ariaLabel, ...props }) {
-  const { collapsed, reopened } = useSidebar();
+  const { collapsed, reopened, rung } = useSidebar();
   return useRender({
     render: render ?? /* @__PURE__ */ jsx("div", {}),
     props: {
@@ -135,7 +143,7 @@ function SidebarBrand({ mark, label, render, className, "aria-label": ariaLabel,
         className
       ),
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: sideNavItemIconVariants({ size: "rail" }), children: mark }),
+        /* @__PURE__ */ jsx("span", { className: sideNavItemIconVariants({ size: rung }), children: mark }),
         collapsed ? null : /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate text-title-sm", reopened && LABEL_FADE), children: label })
       ] })
     },
@@ -148,6 +156,7 @@ function SidebarNav({
   children,
   ...props
 }) {
+  const { rung } = useSidebar();
   return /* @__PURE__ */ jsxs(
     "nav",
     {
@@ -155,7 +164,8 @@ function SidebarNav({
         // Thin scrollbar so a long nav does not hand a fat platform bar to a
         // narrow rail, and contained overscroll so a wheel gesture that runs
         // out of nav stops there instead of scrolling the page behind it.
-        "flex flex-1 flex-col gap-1 overflow-y-auto overscroll-contain px-3 py-4 scrollbar-quiet",
+        "flex flex-1 flex-col overflow-y-auto overscroll-contain px-3 scrollbar-quiet",
+        rung === "rail-compact" ? "gap-0.5 py-2" : "gap-1 py-4",
         "[&[data-glide]_[data-active]]:bg-transparent",
         className
       ),
@@ -173,11 +183,13 @@ function SidebarFooter({
   ...props
 }) {
   const inset = useAppShellFrame() === "inset";
+  const { rung } = useSidebar();
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "flex flex-col gap-1 border-t border-sidebar-border px-3 py-4",
+        "flex flex-col gap-1 border-t border-sidebar-border px-3",
+        rung === "rail-compact" ? "py-2" : "py-4",
         // In an inset shell the rail has no edge of its own (the gap is the
         // divider), so a full-width rule ran out into that gap and stopped on
         // nothing. Inset to the content column it spans what the rows span:
@@ -201,7 +213,7 @@ function SidebarItem({
   "aria-label": ariaLabel,
   ...props
 }) {
-  const { collapsed, icons, reopened } = useSidebar();
+  const { collapsed, icons, reopened, rung } = useSidebar();
   const showIcon = icon != null && (icons || collapsed);
   const element = useRender({
     render: render ?? /* @__PURE__ */ jsx("button", { type: "button" }),
@@ -214,12 +226,12 @@ function SidebarItem({
       "aria-label": ariaLabel ?? (collapsed && typeof label === "string" ? label : void 0),
       className: cn(
         // SideNav's row recipe on the rail rung — one row, not a copy.
-        sideNavItemVariants({ size: "rail", activeVariant: "sidebar" }),
+        sideNavItemVariants({ size: rung, activeVariant: "sidebar" }),
         collapsed && "justify-center px-0",
         className
       ),
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        showIcon ? /* @__PURE__ */ jsx("span", { className: sideNavItemIconVariants({ size: "rail" }), children: icon }) : null,
+        showIcon ? /* @__PURE__ */ jsx("span", { className: sideNavItemIconVariants({ size: rung }), children: icon }) : null,
         collapsed ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate", reopened && LABEL_FADE), children: label }),
           badge ? /* @__PURE__ */ jsx("span", { className: "ms-auto shrink-0", children: badge }) : null
@@ -234,10 +246,77 @@ function SidebarItem({
   return element;
 }
 SidebarItem.displayName = "SidebarItem";
+function SidebarGroup({ label, className, children, ...props }) {
+  const { collapsed, rung } = useSidebar();
+  const labelId = useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-labelledby": label ? labelId : void 0,
+      className: cn("flex flex-col", rung === "rail-compact" ? "gap-0.5" : "gap-1", className),
+      ...props,
+      children: [
+        label ? collapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { id: labelId, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "mx-3 my-2 h-px bg-sidebar-border" })
+        ] }) : /* @__PURE__ */ jsx("div", { id: labelId, className: "truncate px-3 pt-4 pb-1 text-caption text-muted-foreground", children: label }) : null,
+        children
+      ]
+    }
+  );
+}
+SidebarGroup.displayName = "SidebarGroup";
+function SidebarAccount({
+  avatar,
+  label,
+  detail,
+  indicator,
+  render,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const { collapsed, reopened, rung } = useSidebar();
+  const element = useRender({
+    // design-lint-disable-next-line raw-button -- a rail row with its own anatomy (avatar slot, two-line label, chevron) on SidebarItem's row recipe, and usually a MenuTrigger's render target; not a button-shaped action
+    render: render ?? /* @__PURE__ */ jsx("button", { type: "button" }),
+    props: {
+      ...props,
+      "aria-label": ariaLabel ?? (collapsed && typeof label === "string" ? label : void 0),
+      className: cn(
+        sideNavItemVariants({ size: rung, activeVariant: "sidebar" }),
+        // Holds the hover fill while its menu is open, so the row reads as
+        // the thing the menu came from.
+        "data-[popup-open]:bg-sidebar-accent data-[popup-open]:text-sidebar-accent-foreground",
+        collapsed && "justify-center px-0",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: sideNavItemIconVariants({ size: rung }), children: avatar }),
+        collapsed ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 flex-1 flex-col", reopened && LABEL_FADE), children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+            detail ? /* @__PURE__ */ jsx("span", { className: "truncate text-caption text-muted-foreground", children: detail }) : null
+          ] }),
+          indicator === false ? null : /* @__PURE__ */ jsx("span", { className: "ms-auto flex shrink-0 text-muted-foreground", "aria-hidden": true, children: indicator ?? /* @__PURE__ */ jsx(Icon, { name: "chevron-up-down", className: "text-base" }) })
+        ] })
+      ] })
+    },
+    defaultTagName: "button"
+  });
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(SimpleTooltip, { content: label, side: "right", children: element });
+  }
+  return element;
+}
+SidebarAccount.displayName = "SidebarAccount";
 export {
   Sidebar,
+  SidebarAccount,
   SidebarBrand,
   SidebarFooter,
+  SidebarGroup,
   SidebarHeader,
   SidebarItem,
   SidebarNav,

package/dist/components/sidebar/sidebar.meta.js

@@ -1,13 +1,21 @@
 // src/components/sidebar/sidebar.meta.ts
 var sidebarMeta = {
   name: "Sidebar",
-  summary: "Desktop side-navigation rail (in-flow sticky, hidden below lg) with SidebarHeader / SidebarBrand / SidebarNav / SidebarItem / SidebarFooter parts. Items are router-agnostic via the `render` prop; an optional collapsed icon-rail mode reveals labels in tooltips.",
+  summary: "Desktop side-navigation rail (in-flow sticky, hidden below lg) with SidebarHeader / SidebarBrand / SidebarNav / SidebarGroup / SidebarItem / SidebarFooter / SidebarAccount parts, all on one set of columns. Items are router-agnostic via the `render` prop; an optional collapsed icon-rail mode reveals labels in tooltips.",
   status: "stable",
   keywords: [
     "sidebar",
     "navigation",
     "app chrome",
-    "rail"
+    "rail",
+    "nav group",
+    "section label",
+    "account",
+    "user menu",
+    "profile",
+    "account switcher",
+    "workspace switcher",
+    "sidebar footer"
   ],
   usage: {
     description: "Use Sidebar for persistent desktop navigation or application chrome outside the main content region.",
@@ -28,6 +36,18 @@ var sidebarMeta = {
         guidance: "do",
         description: `Keep surface="rail" inside AppShell frame="inset": the rail's tint becomes the ground the main panel floats on. Do not add a border-r class back \u2014 the gap is the divider.`
       },
+      {
+        guidance: "do",
+        description: "Group items with SidebarGroup and end the rail with one SidebarAccount that opens the account menu (settings, appearance, sign out). Every part sits on the same icon and label columns, at either density."
+      },
+      {
+        guidance: "dont",
+        description: "Do not put SideNav, an Entity or a stack of ghost Buttons in the rail. Each brings its own insets, so the icons and labels land on four different columns. SideNav is the in-page section list; the rail has its own parts."
+      },
+      {
+        guidance: "dont",
+        description: "Do not put a Badge or pill in the account row. Its one quiet detail line carries the plan, role or 'Demo'."
+      },
       {
         guidance: "dont",
         description: "Do not use Sidebar for page-local settings, filters, or temporary action groups."
@@ -93,7 +113,7 @@ var sidebarMeta = {
     {
       name: "SidebarHeader",
       type: "div props",
-      description: "The top of the rail, at least 64px tall. It holds SidebarBrand and may take a second row under it, such as a search field or a notifications button: give that row basis-full and the header grows to hold it instead of clipping."
+      description: "The top of the rail, at least 64px tall (the chrome bar's height inside a compact Workspace, so it lines up with the WorkspaceBar beside it). It holds SidebarBrand and may take a second row under it, such as a search field or a notifications button: give that row basis-full and the header grows to hold it instead of clipping."
     },
     {
       name: "SidebarBrand",
@@ -103,7 +123,17 @@ var sidebarMeta = {
     {
       name: "SidebarItem",
       type: "{ label: ReactNode; icon?: ReactNode; active?: boolean; badge?: ReactNode; render?: useRender.RenderProp } + button props",
-      description: 'A single nav row. label is the row text (inline when expanded, in a hover tooltip when collapsed); icon is the leading icon node (the consumer swaps fill weight for the active state); active marks the current route (accent fill + aria-current="page"); badge is a trailing node (e.g. a count) pushed to the row end and hidden when collapsed; render composes another element, e.g. render={<Link to="/x" />}.'
+      description: 'A single nav row, 44px on a page and 32px inside a compact scope such as a Workspace (the rail reads the density; nothing to set). label is the row text (inline when expanded, in a hover tooltip when collapsed); icon is the leading icon node (the consumer swaps fill weight for the active state); active marks the current route (accent fill + aria-current="page"); badge is a trailing node (e.g. a count) pushed to the row end and hidden when collapsed; render composes another element, e.g. render={<Link to="/x" />}.'
+    },
+    {
+      name: "SidebarGroup",
+      type: "{ label?: ReactNode } + div props",
+      description: `A labelled run of SidebarItems inside SidebarNav ("Workspace", "Favorites"). The label starts on the items' icon column; collapsed, a hairline stands in for it and the label stays as the group's accessible name.`
+    },
+    {
+      name: "SidebarAccount",
+      type: "{ avatar: ReactNode; label: ReactNode; detail?: ReactNode; indicator?: ReactNode | false; render?: useRender.RenderProp } + button props",
+      description: "The account row at the foot of the rail, inside SidebarFooter: the avatar in the icon slot (Avatar xs on a page rail, 2xs in a compact one), the label on the label column, one muted detail line, and an up-down chevron. Make it the trigger of the account Menu (render it through MenuTrigger render) and put Settings, appearance and sign-out there; it holds its fill while the menu is open. Collapsed, the avatar alone, with the label in a tooltip."
     }
   ],
   motion: [
@@ -165,6 +195,10 @@ var sidebarMeta = {
       label: "Collapsible (icon rail)",
       code: 'const [collapsed, setCollapsed] = useState(false)\n<Sidebar collapsed={collapsed}><SidebarNav><SidebarItem icon={<Icon name="home" />} label="Home" active render={<Link to="/" />} /></SidebarNav><SidebarFooter><Button variant="ghost" size="icon" onClick={() => setCollapsed((c) => !c)} aria-label="Toggle sidebar"><Icon name="chevron-left" /></Button></SidebarFooter></Sidebar>'
     },
+    {
+      label: "Grouped nav with an account menu",
+      code: '<Sidebar><SidebarHeader><SidebarBrand mark={<Avatar shape="square" size="xs" fallback="F" alt="" />} label="Forma Studio" /></SidebarHeader><SidebarNav><SidebarItem icon={<Icon name="inbox" />} label="Inbox" badge={<span className="text-ui-num">4</span>} /><SidebarGroup label="Workspace"><SidebarItem icon={<Icon name="folder" />} label="Projects" active /><SidebarItem icon={<Icon name="users" />} label="Clients" /></SidebarGroup></SidebarNav><SidebarFooter><Menu><MenuTrigger render={<SidebarAccount avatar={<Avatar size="xs" fallback="EL" alt="" />} label="Emma Lee" detail="Forma Studio" />} /><MenuContent side="top" align="start"><MenuItem>Settings</MenuItem><MenuSeparator /><MenuItem>Sign out</MenuItem></MenuContent></Menu></SidebarFooter></Sidebar>'
+    },
     {
       label: "Inline (inside a bounded frame)",
       code: '<div className="flex h-80 overflow-hidden rounded-lg border border-border"><Sidebar variant="inline"><SidebarNav><SidebarItem icon={<Icon name="home" />} label="Home" active /></SidebarNav></Sidebar><div className="flex-1 p-6">Content</div></div>'

package/dist/components/table/table.js

@@ -1,7 +1,11 @@
+"use client";
+
 // src/components/table/table.tsx
 import { cn } from "../../lib/cn.js";
+import { useDensity } from "../../lib/density.js";
 import { jsx } from "react/jsx-runtime";
 function Table({ className, ...props }) {
+  const tier = useDensity() === "compact" ? "text-ui-body" : "text-body-sm";
   return (
     // Thin scrollbar so a wide table's horizontal bar reads as part of the
     // table rather than as chrome, and contained overscroll so swiping past
@@ -9,7 +13,7 @@ function Table({ className, ...props }) {
     /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto overscroll-x-contain scrollbar-quiet", children: /* @__PURE__ */ jsx(
       "table",
       {
-        className: cn("w-full caption-bottom text-body-sm", className),
+        className: cn("w-full caption-bottom", tier, className),
         ...props
       }
     ) })
@@ -66,7 +70,7 @@ function TableHead({ className, numeric = false, ...props }) {
     "th",
     {
       className: cn(
-        "h-10 px-3 text-start align-middle text-label-md text-muted-foreground first:ps-[var(--table-edge-px,--spacing(3))] last:pe-[var(--table-edge-px,--spacing(3))]",
+        "h-[var(--table-head-h,--spacing(10))] px-3 text-start align-middle text-label-md text-muted-foreground first:ps-[var(--table-edge-px,--spacing(3))] last:pe-[var(--table-edge-px,--spacing(3))]",
         numeric && NUMERIC,
         className
       ),
@@ -80,7 +84,7 @@ function TableCell({ className, numeric = false, ...props }) {
     "td",
     {
       className: cn(
-        "px-3 py-2.5 align-middle first:ps-[var(--table-edge-px,--spacing(3))] last:pe-[var(--table-edge-px,--spacing(3))]",
+        "px-3 py-[var(--table-cell-py,--spacing(2.5))] align-middle first:ps-[var(--table-edge-px,--spacing(3))] last:pe-[var(--table-edge-px,--spacing(3))]",
         numeric && NUMERIC,
         className
       ),

package/dist/components/tabs/tabs.js

@@ -21,7 +21,15 @@ function TabsList({ className, variant = "underline", children, ...props }) {
     {
       "data-variant": variant,
       className: cn(
-        variant === "underline" ? cn("relative inline-flex items-center gap-1 border-b border-border", UNDERLINE_HANDOFF) : cn("relative inline-flex items-center gap-1", PILL_HANDOFF),
+        variant === "underline" ? cn(
+          "relative inline-flex items-center gap-1 border-b border-border",
+          // In a WorkspaceBar the bar's hairline IS the divider: the list
+          // fills the bar's height, drops its own rule (which stopped
+          // after the last tab, a second line above the bar's), and the
+          // mark lands on the bar's edge.
+          "[[data-workspace-bar]_&]:self-stretch [[data-workspace-bar]_&]:border-b-0",
+          UNDERLINE_HANDOFF
+        ) : cn("relative inline-flex items-center gap-1", PILL_HANDOFF),
         className
       ),
       ...props,
@@ -48,7 +56,7 @@ function TabsTrigger({ className, children, ...props }) {
         variant === "underline" ? (
           // On the control ladder like the pill variant (it was py-2 plus
           // the label's line, ~36px — no rung).
-          "-mb-px inline-flex h-(--control-md) items-center gap-(--control-gap) border-b-2 border-transparent px-3 data-[active]:border-foreground"
+          "-mb-px inline-flex h-(--control-md) items-center gap-(--control-gap) border-b-2 border-transparent px-3 data-[active]:border-foreground [[data-workspace-bar]_&]:h-full"
         ) : "inline-flex h-(--control-sm) items-center gap-(--control-gap) rounded-[var(--button-radius,9999px)] px-3 data-[active]:bg-muted",
         className
       ),

package/dist/components/tabs/tabs.meta.js

@@ -16,6 +16,10 @@ var tabsMeta = {
         guidance: "do",
         description: "Use tabs when each panel is peer content and users may compare or switch often."
       },
+      {
+        guidance: "do",
+        description: `In tool chrome (a WorkspaceBar, a compact panel header) use variant="pill" for a view switch such as Overview / Issues / Updates: it reads as a control beside the bar's other controls. Underline is the page-section idiom; inside a WorkspaceBar it sits on the bar's hairline rather than drawing its own.`
+      },
       {
         guidance: "do",
         description: "Keep tab labels short and make the active tab unmistakable."