@sableui/react 0.17.0 → 0.19.0

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/pill/pill.meta.js

@@ -1,7 +1,7 @@
 // src/components/pill/pill.meta.ts
 var pillMeta = {
   name: "Pill",
-  summary: 'A chip someone clicks: a filter, a tag choice, an option in a row. Always a button with aria-pressed. appearance="solid" (filters; selected lifts onto the primary surface) or "outline" (quiet chips that annotate content, like reactions); size md or sm. A static label is a Badge.',
+  summary: 'A chip someone clicks: a filter, a tag choice, an option in a row. Always a button with aria-pressed. appearance="solid" (filters; selected lifts onto the primary surface) or "outline" (quiet chips that annotate content, like reactions); size lg, md or sm. A static label is a Badge.',
   status: "stable",
   keywords: [
     "pill",
@@ -22,6 +22,10 @@ var pillMeta = {
         guidance: "do",
         description: "Reflect the current choice with selected, so the active filter reads at a glance."
       },
+      {
+        guidance: "do",
+        description: 'In a toolbar where filter chips share a row with a search field ("All 8 \xB7 Products 5 \xB7 Open source 2 \u2026 [Find a project]"), pair Pill size="lg" with SearchInput size="sm", and Button size="sm" for any action beside them. All three stand on --control-sm (32px, 28 compact), the rung the spacing doctrine gives toolbar controls, so the row is one height in either density. Pill md (28px) has no text field of its height in the page register, so md beside a field always reads as a mismatch.'
+      },
       {
         guidance: "dont",
         description: "Do not use Pill as a static label. A pressable-looking chip that does nothing is the most common cause of dead clicks in a filter row \u2014 that is a Badge.",
@@ -33,14 +37,15 @@ var pillMeta = {
       },
       {
         guidance: "dont",
-        description: 'Do not restyle a Pill with border or background classes to get a quieter chip. That is appearance="outline" (and size="sm" for a small one); an override is a look that exists nowhere else in the system.'
+        description: 'Do not restyle a Pill with border or background classes to get a quieter chip. That is appearance="outline" (and size="sm" for a small one); an override is a look that exists nowhere else in the system. Likewise never set h-* on a Pill to match a neighbour: pick the size that shares its rung.'
       }
     ]
   },
   related: {
     components: [
       "Badge",
-      "ToggleGroup"
+      "ToggleGroup",
+      "SearchInput"
     ]
   },
   props: [
@@ -58,9 +63,9 @@ var pillMeta = {
     },
     {
       name: "size",
-      type: '"md" | "sm"',
+      type: '"lg" | "md" | "sm"',
       default: '"md"',
-      description: "md sits on the density ladder's xs control height (28px); sm is 24px, for chips under or inside other content."
+      description: "lg sits on --control-sm (32px, 28 compact), the toolbar rung it shares with SearchInput sm and Button sm, for a filter row beside a search field. md sits on --control-xs (28px, 24 compact), the chip in a row of its own or among content. sm is a fixed 24px (the target floor, which density does not shrink), for chips under or inside other content."
     },
     {
       name: "tone",
@@ -76,7 +81,7 @@ var pillMeta = {
   ],
   variants: {
     appearance: ["solid", "outline"],
-    size: ["md", "sm"],
+    size: ["lg", "md", "sm"],
     selected: ["true", "false"],
     tone: ["neutral", "red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"]
   },
@@ -143,6 +148,10 @@ var pillMeta = {
       label: "Filter row",
       code: "<Row gap={1}><Pill selected onClick={() => {}}>All</Pill><Pill onClick={() => {}}>Projects</Pill><Pill onClick={() => {}}>Reports</Pill></Row>"
     },
+    {
+      label: "Filters with search",
+      code: 'const [filter, setFilter] = useState("all")\nconst [q, setQ] = useState("")\n\n<Row gap={2} align="center" justify="between" wrap>\n	<Row gap={1}>\n		<Pill size="lg" selected={filter === "all"} onClick={() => setFilter("all")}>All 8</Pill>\n		<Pill size="lg" selected={filter === "products"} onClick={() => setFilter("products")}>Products 5</Pill>\n		<Pill size="lg" selected={filter === "oss"} onClick={() => setFilter("oss")}>Open source 2</Pill>\n	</Row>\n	<SearchInput size="sm" value={q} onValueChange={setQ} placeholder="Find a project\u2026" aria-label="Find a project" className="max-w-64" />\n</Row>'
+    },
     {
       label: "Outline, small (reactions)",
       code: '<Row gap={1}><Pill appearance="outline" size="sm" selected onClick={() => {}}>\u{1F389} 3</Pill><Pill appearance="outline" size="sm" onClick={() => {}}>\u{1F440}</Pill></Row>'

package/dist/components/pill/pill.variants.js

@@ -26,6 +26,7 @@ var pillVariants = cva(
         outline: "border"
       },
       size: {
+        lg: "h-(--control-sm) px-4 py-0 text-label-lg [--sable-optical-pad:0px]",
         md: "h-(--control-xs) px-3 py-0 [--sable-optical-pad:0px]",
         sm: "h-6 py-0 text-label-sm [--sable-optical-pad:0px]"
       },

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

@@ -2,10 +2,31 @@
 import { useState } from "react";
 import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.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 { useDensity, useTypeTier } from "../../lib/density.js";
+import { hitTargetMin } from "../../lib/hit-target.js";
 import { Button } from "../button/button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+var SIZES = {
+  md: {
+    field: "h-(--control-md) ps-9 pe-9",
+    icon: "start-3 text-sm",
+    clear: "end-2",
+    button: void 0
+  },
+  sm: {
+    field: "h-(--control-sm) ps-8 pe-8",
+    icon: "start-2.5 text-sm",
+    clear: "end-1",
+    button: cn("size-[calc(var(--control-sm)-var(--spacing)*2)] [--button-icon:0.875rem]", hitTargetMin)
+  },
+  xs: {
+    field: cn("h-(--control-xs) ps-6 pe-7", FIELD_SHELL_XS),
+    icon: "start-1.5 text-xs",
+    clear: "end-0.5",
+    button: cn("size-[calc(var(--control-xs)-var(--spacing))] [--button-icon:0.75rem]", hitTargetMin)
+  }
+};
 function SearchInput({
   value,
   defaultValue,
@@ -14,10 +35,12 @@ function SearchInput({
   placeholder = "Search",
   className,
   inputClassName,
+  size = "md",
   ref,
   type,
   ...props
 }) {
+  const rung = SIZES[size];
   const [uncontrolled, setUncontrolled] = useState(defaultValue ?? "");
   const controlled = value !== void 0;
   const current = controlled ? value : uncontrolled;
@@ -41,7 +64,7 @@ function SearchInput({
         Icon,
         {
           name: "search",
-          className: "pointer-events-none absolute start-3 text-sm text-muted-foreground"
+          className: cn("pointer-events-none absolute text-muted-foreground", rung.icon)
         }
       ),
       /* @__PURE__ */ jsx(
@@ -53,10 +76,12 @@ function SearchInput({
           onChange: (event) => change(event.target.value),
           placeholder,
           className: cn(
-            "flex h-(--control-md) w-full ps-9 pe-9 text-foreground",
+            "flex w-full text-foreground",
             // The shell Input and CommandMenuTrigger wear too — lib/field-shell.
+            // xs layers the inset tool-panel surface over it, as Input xs does.
             FIELD_SHELL,
             FIELD_INVALID,
+            rung.field,
             "[&::-webkit-search-cancel-button]:appearance-none",
             tier.body,
             density === "comfortable" && MOBILE_FIELD_TIER,
@@ -72,14 +97,14 @@ function SearchInput({
         // transition-property slot — whichever sorted last would win, and
         // either the hover ease or the arrival would silently go. Removal
         // stays instant: an emptied field should not wait on its X.
-        /* @__PURE__ */ jsx("span", { className: "absolute end-2 flex motion-appear", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("span", { className: cn("absolute flex motion-appear", rung.clear), children: /* @__PURE__ */ jsx(
           Button,
           {
             variant: "ghost",
             size: "icon-xs",
             onClick: handleClear,
             "aria-label": "Clear search",
-            className: "text-muted-foreground hover:text-foreground",
+            className: cn("text-muted-foreground hover:text-foreground", rung.button),
             children: /* @__PURE__ */ jsx(Icon, { name: "xmark" })
           }
         ) })

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

@@ -1,7 +1,7 @@
 // src/components/search-input/search-input.meta.ts
 var searchInputMeta = {
   name: "SearchInput",
-  summary: "Styled search field with a leading magnifier and a clearable X. Soft-square (rounded-sm), the theme's field surface, 2px focus ring; the clear button appears only when there is a value.",
+  summary: "Styled search field with a leading magnifier and a clearable X. Soft-square (rounded-sm), the theme's field surface, 2px focus ring; the clear button appears only when there is a value. size md (form), sm (toolbar, matching Pill lg and Button sm) or xs (inset tool-panel field).",
   status: "stable",
   keywords: [
     "search",
@@ -28,6 +28,14 @@ var searchInputMeta = {
         guidance: "do",
         description: "Light the query in the results it filters with `useMatchHighlight(query)` \u2014 a callback ref for the results container, with `selector` to keep it to titles. It paints on the `highlight` pair without wrapping matches in `<mark>`, the same paint Combobox and CommandMenu use for their rows."
       },
+      {
+        guidance: "do",
+        description: `In a toolbar beside filter chips, use size="sm" with Pill size="lg" (and Button size="sm" for actions). All three stand on --control-sm (32px, 28 compact), the rung the spacing doctrine gives toolbar controls, so the row is one height in either density. Keep md for a search field in a form or a page header beside md buttons, and xs for a filter inside a workspace panel, where it matches Input xs's inset surface.`
+      },
+      {
+        guidance: "dont",
+        description: "Do not match a neighbour's height with h-* on className or inputClassName. The magnifier, padding and clear button would stay sized for the old rung; pick the size that shares the neighbour's rung."
+      },
       {
         guidance: "dont",
         description: "Do not use SearchInput as a command palette; use CommandMenu for global commands, opened from the header by CommandMenuTrigger. A SearchInput that opens a dialog on focus is a text box you cannot type in."
@@ -42,10 +50,17 @@ var searchInputMeta = {
     components: [
       "Input",
       "CommandMenu",
-      "Combobox"
+      "Combobox",
+      "Pill"
     ]
   },
   props: [
+    {
+      name: "size",
+      type: '"md" | "sm" | "xs"',
+      default: '"md"',
+      description: "The rung of the control ladder, named as on Input, Select and Combobox. md is the form field (--control-md, 40px / 32 compact). sm is the toolbar field (--control-sm, 32px / 28 compact), the rung Pill lg and Button sm share, so filters + search + actions in one row are one height. xs is the tool-panel field (--control-xs, 28px / 24 compact) on Input xs's inset panel-field surface. The magnifier, inline padding and clear button scale with the rung and stay vertically centred."
+    },
     {
       name: "value",
       type: "string",
@@ -91,7 +106,7 @@ var searchInputMeta = {
     {
       name: "...props",
       type: 'ComponentPropsWithRef<"input">',
-      description: "All native input attributes (name, autoFocus, ref, aria-invalid, \u2026) pass through to the <input> except value/onChange, which are owned by value/onValueChange, and className, which sizes the whole field."
+      description: "All native input attributes (name, autoFocus, ref, aria-invalid, \u2026) pass through to the <input> except value/onChange, which are owned by value/onValueChange, className, which sizes the whole field, and the native numeric size attribute, which the size prop replaces."
     }
   ],
   tokensUsed: [
@@ -100,7 +115,9 @@ var searchInputMeta = {
     "foreground",
     "muted-foreground",
     "ring",
-    "destructive"
+    "destructive",
+    "panel-field",
+    "panel-field-hover"
   ],
   motion: [
     {
@@ -152,6 +169,14 @@ var searchInputMeta = {
       label: "Highlighting matches in the results",
       code: 'const [q, setQ] = useState("")\nconst results = useMatchHighlight<HTMLUListElement>(q, { selector: "[data-title]" })\nconst shown = posts.filter((post) => post.title.toLowerCase().includes(q.trim().toLowerCase()))\n\n<SearchInput value={q} onValueChange={setQ} placeholder="Search posts" />\n<ul ref={results}>\n	{shown.map((post) => (\n		<li key={post.id}><span data-title>{post.title}</span></li>\n	))}\n</ul>'
     },
+    {
+      label: "Filters with search",
+      code: 'const [filter, setFilter] = useState("all")\nconst [q, setQ] = useState("")\n\n<Row gap={2} align="center" justify="between" wrap>\n	<Row gap={1}>\n		<Pill size="lg" selected={filter === "all"} onClick={() => setFilter("all")}>All 8</Pill>\n		<Pill size="lg" selected={filter === "products"} onClick={() => setFilter("products")}>Products 5</Pill>\n		<Pill size="lg" selected={filter === "oss"} onClick={() => setFilter("oss")}>Open source 2</Pill>\n	</Row>\n	<SearchInput size="sm" value={q} onValueChange={setQ} placeholder="Find a project\u2026" aria-label="Find a project" className="max-w-64" />\n</Row>'
+    },
+    {
+      label: "Sizes",
+      code: '<Stack gap={1}>\n	<SearchInput size="md" placeholder="Search posts" aria-label="Search posts" />\n	<SearchInput size="sm" placeholder="Find a project\u2026" aria-label="Find a project" />\n	<SearchInput size="xs" placeholder="Filter layers" aria-label="Filter layers" />\n</Stack>'
+    },
     {
       label: "Disabled",
       code: '<SearchInput disabled placeholder="Search" />'

package/dist/components/section-header/section-header.js

@@ -3,9 +3,10 @@ import { useId } from "react";
 import { cn } from "../../lib/cn.js";
 import { HeadingRow } from "../../lib/heading-row.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var TITLE_TIER = {
-  md: "text-heading-3",
-  sm: "text-heading-4"
+var SIZE = {
+  lg: { root: "gap-3", title: "text-heading-2", description: "text-body-md" },
+  md: { root: "gap-2", title: "text-heading-3", description: "text-body-sm" },
+  sm: { root: "gap-2", title: "text-heading-4", description: "text-body-sm" }
 };
 function SectionHeader({
   title,
@@ -18,20 +19,29 @@ function SectionHeader({
   ...props
 }) {
   const generatedId = useId();
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "section-header", className: cn("flex flex-col gap-2", className), ...props, children: [
-    /* @__PURE__ */ jsx(
-      HeadingRow,
-      {
-        as: titleAs,
-        title,
-        titleId: titleId ?? generatedId,
-        titleClassName: TITLE_TIER[size],
-        band: "flex min-h-(--control-sm) items-center",
-        actions
-      }
-    ),
-    description ? /* @__PURE__ */ jsx("p", { className: "max-w-(--measure-prose) text-body-sm text-pretty text-muted-foreground", children: description }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "section-header",
+      "data-size": size,
+      className: cn("flex flex-col", SIZE[size].root, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          HeadingRow,
+          {
+            as: titleAs,
+            title,
+            titleId: titleId ?? generatedId,
+            titleClassName: SIZE[size].title,
+            band: "flex min-h-(--control-sm) items-center mt-[min(0px,calc((var(--control-sm)_-_1lh)/2))]",
+            actions
+          }
+        ),
+        description ? /* @__PURE__ */ jsx("p", { className: cn("max-w-(--measure-prose) text-pretty text-muted-foreground", SIZE[size].description), children: description }) : null
+      ]
+    }
+  );
 }
 SectionHeader.displayName = "SectionHeader";
 export {

package/dist/components/section-header/section-header.meta.js

@@ -14,7 +14,9 @@ var sectionHeaderMeta = {
     "h2",
     "subsection",
     "optical alignment",
-    "bleed"
+    "bleed",
+    "editorial section",
+    "large section title"
   ],
   usage: {
     description: "Use SectionHeader to head each section below the page title \u2014 a home-page shelf with View all, a settings group, a list with its own actions. PageHeader is the route's single h1; every section under it takes a SectionHeader, with titleId wired to the section's aria-labelledby.",
@@ -25,7 +27,7 @@ var sectionHeaderMeta = {
       },
       {
         guidance: "do",
-        description: "Pick titleAs by the document outline (h2 under the page h1, h3 inside an h2 section) and size by visual weight: md for a page's sections and shelves, sm for denser groups like settings."
+        description: `Pick titleAs by the document outline (h2 under the page h1, h3 inside an h2 section) and size by visual weight: lg for an editorial page's sections under a PageHeader size="lg", md for a page's sections and shelves, sm for denser groups like settings.`
       },
       {
         guidance: "do",
@@ -87,13 +89,13 @@ var sectionHeaderMeta = {
     },
     {
       name: "size",
-      type: '"md" | "sm"',
+      type: '"lg" | "md" | "sm"',
       default: '"md"',
-      description: "Visual weight, independent of the heading level: md (text-heading-3) for a page's sections and shelves; sm (text-heading-4) for denser sets \u2014 settings groups, subsections."
+      description: `Visual weight, independent of the heading level: lg (text-heading-2 over a text-body-md description) for an editorial page's sections, under a PageHeader size="lg"; md (text-heading-3) for a page's sections and shelves; sm (text-heading-4) for denser sets \u2014 settings groups, subsections. lg stops at heading-2: heading-1 is the page title's, one per route. The actions stay centred on the title's first line at every size.`
     }
   ],
   variants: {
-    size: ["md", "sm"]
+    size: ["lg", "md", "sm"]
   },
   tokensUsed: ["foreground", "muted-foreground"],
   a11y: [
@@ -161,6 +163,26 @@ var sectionHeaderMeta = {
 		<Entity className="[--entity-px:0]" title="Late drives" subtitle="42 tracks" />
 		<Entity className="[--entity-px:0]" title="Focus" subtitle="18 tracks" />
 	</Stack>
+</section>`
+    },
+    {
+      label: "An editorial section (size lg)",
+      code: `<section aria-labelledby="selected-work" className="flex flex-col gap-6">
+	<SectionHeader
+		titleId="selected-work"
+		size="lg"
+		title="Selected work"
+		description="Five projects from the last two years."
+		actions={
+			<Button variant="ghost" size="sm" render={<a href="/work" />} aria-label="View all work">
+				View all
+			</Button>
+		}
+	/>
+	<Grid minItemWidth="16rem" gap={3}>
+		<Card><CardHeader><CardTitle>Tidewater</CardTitle><CardDescription>Brand identity</CardDescription></CardHeader></Card>
+		<Card><CardHeader><CardTitle>Northlight</CardTitle><CardDescription>Product design</CardDescription></CardHeader></Card>
+	</Grid>
 </section>`
     },
     {

package/dist/components/sheet/sheet.js

@@ -8,6 +8,7 @@ import {
   useState
 } from "react";
 import { cn } from "../../lib/cn.js";
+import { FocusReturnProvider, useFocusReturn, useFocusReturnDefault } from "../../lib/focus-return.js";
 import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
 import { PresentationProvider, StackedActionsContext, usePresentation } from "../../lib/presentation.js";
 import { mergeRefs } from "../../lib/refs.js";
@@ -27,15 +28,20 @@ function Sheet({
   defaultSnapPoint,
   onSnapPointChange,
   snapToSequentialPoints,
+  open,
+  onOpenChange,
   ...props
 }) {
+  const focus = useFocusReturn(open, onOpenChange);
   const [side, setSide] = useState("right");
   const snaps = Boolean(snapPoints?.length);
   const context = useMemo(() => ({ reportSide: setSide, snaps }), [snaps]);
-  return /* @__PURE__ */ jsx(SheetRootContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(SheetRootContext.Provider, { value: context, children: /* @__PURE__ */ jsx(FocusReturnProvider, { value: focus.focusReturn, children: /* @__PURE__ */ jsx(
     Base.Root,
     {
       ...props,
+      open,
+      onOpenChange: focus.onOpenChange,
       snapPoints: snaps && side === "bottom" ? snapPoints : void 0,
       snapPoint,
       defaultSnapPoint,
@@ -43,7 +49,7 @@ function Sheet({
       snapToSequentialPoints,
       swipeDirection: SWIPE_DIRECTION[side]
     }
-  ) });
+  ) }) });
 }
 function isDevelopment() {
   try {
@@ -81,10 +87,12 @@ function SheetContent({
   children,
   side,
   initialFocus,
+  finalFocus,
   ref,
   style,
   ...props
 }) {
+  const focusReturn = useFocusReturnDefault();
   const root = useContext(SheetRootContext);
   const resolvedSide = side ?? "right";
   const reportSide = root?.reportSide;
@@ -98,7 +106,10 @@ function SheetContent({
   }
   const popupRef = useRef(null);
   const [popup, setPopup] = useState(null);
-  const mergedRef = useMemo(() => mergeRefs(popupRef, ref, setPopup), [ref]);
+  const mergedRef = useMemo(
+    () => mergeRefs(popupRef, ref, setPopup, focusReturn?.popupRef),
+    [ref, focusReturn]
+  );
   const keyboardInset = useKeyboardInset(resolvedSide === "bottom" && popup !== null);
   const keyboardVars = { "--sheet-keyboard-inset": `${keyboardInset}px` };
   useIsomorphicLayoutEffect(() => {
@@ -121,6 +132,7 @@ function SheetContent({
       {
         ref: mergedRef,
         initialFocus: initialFocus === void 0 ? (type) => type === "touch" ? popupRef.current : true : initialFocus,
+        finalFocus: finalFocus === void 0 ? focusReturn?.finalFocus : finalFocus,
         "data-sable-sheet": resolvedSide,
         "data-snap-points": snaps ? "" : void 0,
         className: cn(sheetVariants({ side }), className),

package/dist/components/sheet/sheet.meta.js

@@ -93,7 +93,7 @@ var sheetMeta = {
     {
       name: "Sheet (Root)",
       type: "Base UI Drawer.Root props (open, defaultOpen, onOpenChange, onOpenChangeComplete, modal, disablePointerDismissal, actionsRef, handle, snapPoints, snapPoint, defaultSnapPoint, onSnapPointChange, snapToSequentialPoints) \u2014 minus swipeDirection",
-      description: `Controls open state. Uncontrolled by default. The dismiss swipe direction is not a prop: it follows SheetContent's side. onOpenChange reports reason "swipe" when a swipe closed it.`
+      description: `Controls open state. Uncontrolled by default. The dismiss swipe direction is not a prop: it follows SheetContent's side. onOpenChange reports reason "swipe" when a swipe closed it. Records the element focused when the sheet opens, trigger or not, and returns focus there on close.`
     },
     {
       name: "snapPoints",
@@ -171,7 +171,7 @@ var sheetMeta = {
     "The panel scrolls its own content (thin scrollbar, contained overscroll) when it outgrows its bound \u2014 the full height on left/right, 80vh on top/bottom.",
     "Esc and click-outside dismiss by default; on touch, a swipe toward the sheet's own edge dismisses too. A short or slow drag springs back.",
     "Swipe is an extra path, never the only one: Esc, click-outside and SheetClose all still work.",
-    "Focus matches Dialog: the first tabbable on mouse/keyboard open, the panel itself on touch (so the virtual keyboard stays down); focus returns to the trigger on close.",
+    "Focus matches Dialog: the first tabbable on mouse/keyboard open, the panel itself on touch (so the virtual keyboard stays down). On close, focus returns to the element that held it when the sheet opened: the SheetTrigger, or your own button when it drives a controlled open. It is captured before the content mounts, so an autoFocus field inside cannot displace it; an explicit finalFocus on SheetContent wins.",
     "Render a SheetClose inside SheetContent so screen-reader users can escape the popup.",
     "Slide animation runs via data-[starting-style]/data-[ending-style] attributes on the motion-duration token; while swiping the panel tracks the finger directly, and a released swipe finishes on the same token (scaled by flick speed), so reduced motion makes it instant.",
     "A mouse drag that starts on sheet content selects text rather than dragging the panel; mouse dragging only starts from the padding edge.",

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,