@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/components/page-actions.js

@@ -1,38 +1,35 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowUpRight } from "lucide-react";
 import { createContext, useCallback, useContext, useEffect, useId, useState, } from "react";
 import { createPortal } from "react-dom";
 import { ActionMenu } from "./action-menu.js";
-import { Button, buttonVariants } from "./button.js";
-import { PendingLabel } from "./pending-label.js";
-function CommandElement({ accessibleName, busy, children, disabled, element, variant, }) {
-    return useRender({
-        render: element,
-        props: {
-            "aria-busy": busy || undefined,
-            "aria-disabled": disabled || undefined,
-            "aria-label": accessibleName,
-            children,
-            className: buttonVariants({ variant }),
-            "data-slot": "button",
-        },
-    });
-}
-export function PageCommandButton({ command, variant, }) {
-    const pending = command.pending === true;
-    const content = (_jsxs(_Fragment, { children: [command.icon ? _jsx("span", { "data-icon": "inline-start", children: command.icon }) : null, _jsx(PendingLabel, { pending: pending, pendingLabel: command.pendingLabel ?? command.label, children: command.label }), command.external ? _jsx(ArrowUpRight, { "aria-hidden": "true", "data-icon": "inline-end" }) : null] }));
+import { Button, ButtonLink } from "./button.js";
+export function PageCommandButton({ command, shape, size, variant, }) {
+    const look = {
+        "aria-label": command.accessibleName,
+        disabled: command.disabled,
+        loading: command.pending === true,
+        loadingLabel: command.pendingLabel ?? command.label,
+        prefix: command.icon,
+        shape,
+        size,
+        suffix: command.external ? _jsx(ArrowUpRight, { "aria-hidden": "true" }) : undefined,
+        variant,
+    };
+    if (command.link) {
+        return (_jsx(ButtonLink, { ...look, render: command.link, children: command.label }));
+    }
     if (command.render) {
-        return (_jsx(CommandElement, { accessibleName: command.accessibleName, busy: pending, disabled: pending || command.disabled === true, element: command.render, variant: variant, children: content }));
+        return (_jsx(Button, { ...look, render: command.render, children: command.label }));
     }
-    return (_jsx(Button, { "aria-busy": pending || undefined, "aria-label": command.accessibleName, disabled: pending || command.disabled, focusableWhenDisabled: pending, onClick: command.onClick, type: "button", variant: variant, children: content }));
+    return (_jsx(Button, { ...look, onClick: command.onClick, type: "button", children: command.label }));
 }
 /** The row of a page's actions where it stands, for a page whose header is its own card. */
 export function PageActionsRow({ period, primary, secondary, menu }) {
     if (!period && !primary && !secondary && !menu)
         return null;
-    return (_jsxs("div", { "data-slot": "page-actions", className: "flex shrink-0 flex-wrap items-center gap-2", children: [period, secondary ? _jsx(PageCommandButton, { command: secondary, variant: "outline" }) : null, primary ? _jsx(PageCommandButton, { command: primary, variant: "default" }) : null, menu ? _jsx(ActionMenu, { ...menu }) : null] }));
+    return (_jsxs("div", { "data-slot": "page-actions", className: "flex max-w-full min-w-0 flex-wrap items-center gap-2", children: [period, secondary ? _jsx(PageCommandButton, { command: secondary, variant: "outline" }) : null, primary ? _jsx(PageCommandButton, { command: primary, variant: "default" }) : null, menu ? _jsx(ActionMenu, { ...menu }) : null] }));
 }
 const PageActionsHostContext = createContext(null);
 /**
@@ -50,7 +47,7 @@ export function PageActionsHostProvider({ children }) {
 /** The element on `PageHeader`'s title row that the page's `PageActions` render into. */
 export function PageActionsSlot() {
     const host = useContext(PageActionsHostContext);
-    return (_jsx("div", { "data-slot": "page-header-actions", className: "flex shrink-0 items-center empty:hidden", ref: host?.attach }));
+    return (_jsx("div", { "data-slot": "page-header-actions", className: "flex max-w-full min-w-0 items-center empty:hidden", ref: host?.attach }));
 }
 /**
  * A page's actions, drawn on its title's row. Only the page shown last owns
@@ -60,7 +57,7 @@ export function PageActionsSlot() {
  * @family Actions
  * @when The actions of a collection, an object or an overview page, on the title's row at its trailing edge. A Configuration page has none: each section saves from its footer.
  * @instead A row's actions are the row's one button and its `ActionMenu`. A collection toolbar holds search and filters, never a page action.
- * @behaviour Takes `period`, `secondary`, `primary` and `menu` and draws their order and variants itself: the period, outline, default, then the three dots last. The menu needs two commands or more; a single extra command is the secondary. A destination outside the product ends in the arrow. A running command keeps its place and icon, says its pending word and holds.
+ * @behaviour Takes `period`, `secondary`, `primary` and `menu` and draws their order and variants itself: the period, outline, default, then the three dots last. The menu needs two commands or more; a single extra command is the secondary. A destination outside the product ends in the arrow. A running command (`pending`) keeps its place and icon, says its pending word and holds, and the type requires `pendingLabel` whenever `pending` is set. A command here is never destructive or warning: those sit in the danger zone of the page, in a card.
  * @words The primary is the page's main job as verb and noun: "Invite member", "New Agent". The pending word is its -ing form: "Inviting member". The menu names the page's record at its top and keeps the destructive command last, after a divider.
  * @access DOM order is visual order. A command whose label does not name its target carries `accessibleName`. A running command is `aria-busy` and keeps focus. The three dots carry "More for {record}"; the menu returns focus to them when it closes.
  */

package/dist/components/page-header.d.ts

@@ -7,13 +7,20 @@ import * as React from "react";
  * the trailing edge of its row.
  * @instead An object's own header is `ObjectPage`'s. The path above it is the top bar's
  * `Breadcrumb`; filters, search and sort sit in the toolbar below.
- * @behaviour Nothing explains the page under its title. The actions arrive through the
- * `PageActions` slot, so the page draws its commands once.
- * @words The title is the page's name as the sidebar writes it: *Customers*, *Agents*.
+ * @behaviour The title is always there and the actions arrive through the `PageActions` slot, so
+ * the page draws its commands once. On a phone the title keeps its row with one action, as Vercel's
+ * does; it gives way, and the actions wrap under it, only when they leave it less than 128 px. Under the title only the `description` may sit: one muted line
+ * saying what the page's records are for, for a page whose kind needs explaining. It ends in a link
+ * to learn more when there is one, and never counts or introduces anything else. The description
+ * is neutral; no hue sits in the header.
+ * @words The title is the page's name as the sidebar writes it: *Customers*, *Agents*. The
+ * description is one sentence in the product's words, without a full stop when it ends in a link.
  * @access The title is the page's `h1`; DOM order is visual order.
  */
-declare function PageHeader({ title, headingProps, className, ...props }: Omit<React.ComponentProps<"header">, "title" | "children"> & {
+declare function PageHeader({ title, description, headingProps, className, ...props }: Omit<React.ComponentProps<"header">, "title" | "children"> & {
     title: React.ReactNode;
+    /** One muted line under the title; a link to learn more may end it. */
+    description?: React.ReactNode;
     headingProps?: Omit<React.ComponentProps<"h1">, "children">;
 }): React.JSX.Element;
 export { PageHeader };

package/dist/components/page-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../src/components/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;;;;;;;;;;GAYG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;CAC7D,qBAiBA;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../src/components/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uEAAuE;IACvE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;CAC7D,qBAyBA;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/page-header.js

@@ -9,12 +9,17 @@ import { PageActionsSlot } from "./page-actions.js";
  * the trailing edge of its row.
  * @instead An object's own header is `ObjectPage`'s. The path above it is the top bar's
  * `Breadcrumb`; filters, search and sort sit in the toolbar below.
- * @behaviour Nothing explains the page under its title. The actions arrive through the
- * `PageActions` slot, so the page draws its commands once.
- * @words The title is the page's name as the sidebar writes it: *Customers*, *Agents*.
+ * @behaviour The title is always there and the actions arrive through the `PageActions` slot, so
+ * the page draws its commands once. On a phone the title keeps its row with one action, as Vercel's
+ * does; it gives way, and the actions wrap under it, only when they leave it less than 128 px. Under the title only the `description` may sit: one muted line
+ * saying what the page's records are for, for a page whose kind needs explaining. It ends in a link
+ * to learn more when there is one, and never counts or introduces anything else. The description
+ * is neutral; no hue sits in the header.
+ * @words The title is the page's name as the sidebar writes it: *Customers*, *Agents*. The
+ * description is one sentence in the product's words, without a full stop when it ends in a link.
  * @access The title is the page's `h1`; DOM order is visual order.
  */
-function PageHeader({ title, headingProps, className, ...props }) {
-    return (_jsx("header", { "data-slot": "page-header", className: cn("min-w-0", className), ...props, children: _jsxs("div", { className: "flex min-h-9 min-w-0 flex-wrap items-center justify-between gap-x-6 gap-y-3", children: [_jsx("h1", { ...headingProps, className: cn("min-w-0 flex-1 basis-48 truncate text-heading-md text-foreground outline-none", headingProps?.className), children: title }), _jsx(PageActionsSlot, {})] }) }));
+function PageHeader({ title, description, headingProps, className, ...props }) {
+    return (_jsxs("header", { "data-slot": "page-header", className: cn("min-w-0", className), ...props, children: [_jsxs("div", { className: "flex min-h-9 min-w-0 flex-wrap items-center justify-between gap-x-6 gap-y-3", children: [_jsx("h1", { ...headingProps, className: cn("min-w-0 flex-1 basis-32 truncate text-heading-md text-foreground outline-none", headingProps?.className), children: title }), _jsx(PageActionsSlot, {})] }), description ? (_jsx("div", { "data-slot": "page-header-description", className: "mt-1 min-w-0 text-body-sm text-muted-foreground", children: description })) : null] }));
 }
 export { PageHeader };

package/dist/components/pending-label.d.ts

@@ -3,13 +3,14 @@ import type * as React from "react";
  * A control's own label while the system works on what it was asked to do.
  *
  * @family Feedback
- * @when Every control that starts work the system does: from the press until the result, whatever
- * the wait. Under about a second it is the only sign. Every save in a footer goes through it.
+ * @when A control that is not a button and starts work the system does, such as a menu row: from
+ * the press until the result, whatever the wait. A `Button` or `ButtonLink` never uses it by hand:
+ * `loading` and `loadingLabel` draw it.
  * @instead Past a second add one `WaitingLine` beside the control. An Agent's work is never this:
  * it is her orb and a sentence. A queued or paused request is a status.
- * @behaviour Swaps the word, nothing else: same place, size and icon. The caller sets `disabled`
- * (50% opacity) and `aria-busy` and blocks a second submit, because only the caller knows which
- * element the wait belongs to. Failure returns the rest label.
+ * @behaviour Swaps the word, nothing else: same place, size and icon; a text label keeps the width of the longer of its two words. The caller sets `aria-busy`
+ * and blocks a second press, because only the caller knows which element the wait belongs to.
+ * Failure returns the rest label.
  * @words The rest label's verb in its -ing form with the same noun: *Remove mailbox* to *Removing
  * mailbox*. No ellipsis, no *Please wait*.
  * @access `aria-busy` on the control; its name changes to the pending word and is read once. Focus

package/dist/components/pending-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pending-label.d.ts","sourceRoot":"","sources":["../../src/components/pending-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,qBAWA;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"pending-label.d.ts","sourceRoot":"","sources":["../../src/components/pending-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,qBAsBA;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/pending-label.js

@@ -4,19 +4,27 @@ import { cn } from "../lib/utils.js";
  * A control's own label while the system works on what it was asked to do.
  *
  * @family Feedback
- * @when Every control that starts work the system does: from the press until the result, whatever
- * the wait. Under about a second it is the only sign. Every save in a footer goes through it.
+ * @when A control that is not a button and starts work the system does, such as a menu row: from
+ * the press until the result, whatever the wait. A `Button` or `ButtonLink` never uses it by hand:
+ * `loading` and `loadingLabel` draw it.
  * @instead Past a second add one `WaitingLine` beside the control. An Agent's work is never this:
  * it is her orb and a sentence. A queued or paused request is a status.
- * @behaviour Swaps the word, nothing else: same place, size and icon. The caller sets `disabled`
- * (50% opacity) and `aria-busy` and blocks a second submit, because only the caller knows which
- * element the wait belongs to. Failure returns the rest label.
+ * @behaviour Swaps the word, nothing else: same place, size and icon; a text label keeps the width of the longer of its two words. The caller sets `aria-busy`
+ * and blocks a second press, because only the caller knows which element the wait belongs to.
+ * Failure returns the rest label.
  * @words The rest label's verb in its -ing form with the same noun: *Remove mailbox* to *Removing
  * mailbox*. No ellipsis, no *Please wait*.
  * @access `aria-busy` on the control; its name changes to the pending word and is read once. Focus
  * stays on it.
  */
 function PendingLabel({ children, className, pending, pendingLabel, ...props }) {
-    return (_jsx("span", { ...props, className: cn(className), "data-pending": pending || undefined, "data-slot": "pending-label", children: pending ? pendingLabel : children }));
+    // The word not shown is laid out unseen under it at no height, so the swap keeps the width;
+    // as a hidden pseudo-element it stays out of the text and the accessible name. The grid comes
+    // after the caller's classes: a caller's flex would set the two words side by side.
+    // oxlint-disable-next-line anti-slop/no-runtime-typeof -- labels are ReactNodes; only a pair of words can be reserved as generated content.
+    const words = typeof children === "string" && typeof pendingLabel === "string";
+    const reserved = words ? (pending ? children : pendingLabel) : undefined;
+    return (_jsx("span", { ...props, className: cn(className, reserved !== undefined &&
+            "inline-grid gap-0 after:invisible after:h-0 after:overflow-hidden after:content-[attr(data-reserved)]"), "data-pending": pending || undefined, "data-reserved": reserved, "data-slot": "pending-label", children: pending ? pendingLabel : children }));
 }
 export { PendingLabel };

package/dist/components/picture-label.d.ts

@@ -9,8 +9,8 @@ import type { ReactNode } from "react";
  * (absence), or a request the product stopped (fault). `PictureLabel` is its label.
  * @instead For one region that failed inside a working page use `EmptyState failed`; the rest of
  * the page stays. Never turn the whole page into an error because one card failed.
- * @behaviour Picture 256 px, 320 from sm, 384 from lg. The label moves beside the base at lg with
- * an empty column of the same width opposite, so the picture keeps the centre line. Still.
+ * @behaviour Picture 256 px, 320 from sm, 384 from lg. The label stands centred under the picture at
+ * every width, on the same centre line as the words below. Still.
  * @words Never apologise, never name the mechanism. The label's title says what the picture is
  * doing; the second line gives its materials and year.
  * @access The picture is decorative; the label is a `figcaption`, read once. The page's heading is

package/dist/components/picture-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"picture-label.d.ts","sourceRoot":"","sources":["../../src/components/picture-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAeA;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,+BASlF"}
+{"version":3,"file":"picture-label.d.ts","sourceRoot":"","sources":["../../src/components/picture-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAUA;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,+BASlF"}

package/dist/components/picture-label.js

@@ -10,15 +10,15 @@ import { cn } from "../lib/utils.js";
  * (absence), or a request the product stopped (fault). `PictureLabel` is its label.
  * @instead For one region that failed inside a working page use `EmptyState failed`; the rest of
  * the page stays. Never turn the whole page into an error because one card failed.
- * @behaviour Picture 256 px, 320 from sm, 384 from lg. The label moves beside the base at lg with
- * an empty column of the same width opposite, so the picture keeps the centre line. Still.
+ * @behaviour Picture 256 px, 320 from sm, 384 from lg. The label stands centred under the picture at
+ * every width, on the same centre line as the words below. Still.
  * @words Never apologise, never name the mechanism. The label's title says what the picture is
  * doing; the second line gives its materials and year.
  * @access The picture is decorative; the label is a `figcaption`, read once. The page's heading is
  * its `h1`; its actions are real links.
  */
 export function LabelledPicture({ children, label, className, }) {
-    return (_jsxs("figure", { className: cn("m-0 grid w-full max-w-4xl justify-items-center gap-4 lg:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] lg:items-end lg:gap-8", className), "data-slot": "labelled-picture", children: [_jsx("div", { className: "lg:col-start-2 lg:row-start-1", children: children }), _jsx("figcaption", { className: "max-w-72 text-center lg:col-start-3 lg:row-start-1 lg:justify-self-start lg:pb-6 lg:text-start", children: label })] }));
+    return (_jsxs("figure", { className: cn("m-0 grid w-full max-w-4xl justify-items-center gap-4", className), "data-slot": "labelled-picture", children: [_jsx("div", { children: children }), _jsx("figcaption", { className: "max-w-72 text-center", children: label })] }));
 }
 export function PictureLabel({ title, details }) {
     return (_jsxs("span", { className: "grid gap-1", children: [_jsx("span", { className: "text-body-sm text-balance font-medium", children: title }), _jsx("span", { className: "font-label-mono text-label-mono text-balance text-muted-foreground", children: details })] }));

package/dist/components/portal-sidebar-frame.d.ts

@@ -14,30 +14,18 @@ export type PortalSidebarBand = {
     items: PortalSidebarItem[];
 };
 /**
- * The Portal's navigation frame, without the Portal's routing: the wordmark and
- * the section name over the collapse control, the Find control with its
- * shortcut, the labelled nav bands, the band that leads out of the Portal, and
- * the account at the foot.
+ * The website's sample of the Portal's navigation column, drawn from data and without the Portal's routing.
  *
- * Its regions are separated by the 1 px guide over the line colour, as the
- * Portal's own shell separates them, so a sidebar region takes no border of its
- * own.
- *
- * The frame carries geometry and brand imagery only. Every word, icon and
- * active marking arrives as a prop, so the Portal can pass its nav model and
- * the website can pass a sample of it.
+ * The sample holds the geometry and the brand imagery only: every word, icon and selected row
+ * arrives as a prop, so the website can pass a sample of the Portal's own navigation. The Portal
+ * and Nadia draw their columns with the same `Sidebar`, `SidebarFrame` and rows.
  *
  * @family Navigation
- * @when `PortalSidebarFrame` is the Portal's whole left column, and the website's sample of it.
- * @instead Nadia's left column belongs to `DesktopAppShell`. Both draw their rows with the same
- * `SidebarMenuButton` and end with the same `AccountMenu`; neither paints its own selected fill or
- * its own account block.
- * @behaviour Wordmark and product name over the collapse control, then Find, the bands, the way out
- * (Get Nadia) and the account, split by 1 px guides.
- * @words Find is one word beside ⌘K. Bands are short nouns; items are nouns, one or two words,
- * sentence case.
- * @access The column is a labelled `nav`. Find is a button named with its shortcut. The wordmark is
- * `role="img"` named nadicode.
+ * @when A static picture of the Portal's column on the website; all of `account`, `bands`, `findLabel`, `subtitle` and `toggleLabel` are required.
+ * @instead A product's own navigation is a `Sidebar` filled by `SidebarFrame`, never this sample.
+ * @behaviour Wordmark and product name beside the collapse control, then Find with ⌘K, the groups, the way out (Get Nadia) and the account; 1 px rules sit under the header and above the way out and the account, none between groups. The selected row takes the selection fill; every other row stays neutral.
+ * @words Find is one word beside ⌘K. Bands are short nouns; items are nouns, one or two words, sentence case.
+ * @access The collapse control is named by `toggleLabel` and Find by `findLabel`; the wordmark is decorative beside the product name.
  */
 export declare function PortalSidebarFrame({ account, bands, className, findLabel, footerItem, subtitle, toggleLabel, }: {
     account: AccountIdentity;

package/dist/components/portal-sidebar-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal-sidebar-frame.d.ts","sourceRoot":"","sources":["../../src/components/portal-sidebar-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAkBtF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,WAAW,GACZ,EAAE;IACD,OAAO,EAAE,eAAe,CAAC;IACzB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,+BAkEA"}
+{"version":3,"file":"portal-sidebar-frame.d.ts","sourceRoot":"","sources":["../../src/components/portal-sidebar-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAiBtF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAaF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,WAAW,GACZ,EAAE;IACD,OAAO,EAAE,eAAe,CAAC;IACzB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,+BAgDA"}

package/dist/components/portal-sidebar-frame.js

@@ -1,40 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Search } from "lucide-react";
 import { AccountMenuIdentity } from "./account-menu.js";
-import { BrandWordmark } from "./brand.js";
-import { Kbd, KbdGroup } from "./kbd.js";
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger, } from "./sidebar.js";
+import { Kbd } from "./kbd.js";
+import { Sidebar, SidebarBrand, SidebarFind, SidebarFrame, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger, } from "./sidebar.js";
 import { cn } from "../lib/utils.js";
 function ItemRow({ item, variant }) {
-    return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: item.current, tooltip: item.label, ...(variant ? { variant } : {}), children: [item.icon, _jsx("span", { className: "truncate", children: item.label })] }) }));
+    return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: item.current, tooltip: item.label, variant: variant, children: [item.icon, _jsx("span", { className: "truncate", children: item.label })] }) }));
 }
 /**
- * The Portal's navigation frame, without the Portal's routing: the wordmark and
- * the section name over the collapse control, the Find control with its
- * shortcut, the labelled nav bands, the band that leads out of the Portal, and
- * the account at the foot.
+ * The website's sample of the Portal's navigation column, drawn from data and without the Portal's routing.
  *
- * Its regions are separated by the 1 px guide over the line colour, as the
- * Portal's own shell separates them, so a sidebar region takes no border of its
- * own.
- *
- * The frame carries geometry and brand imagery only. Every word, icon and
- * active marking arrives as a prop, so the Portal can pass its nav model and
- * the website can pass a sample of it.
+ * The sample holds the geometry and the brand imagery only: every word, icon and selected row
+ * arrives as a prop, so the website can pass a sample of the Portal's own navigation. The Portal
+ * and Nadia draw their columns with the same `Sidebar`, `SidebarFrame` and rows.
  *
  * @family Navigation
- * @when `PortalSidebarFrame` is the Portal's whole left column, and the website's sample of it.
- * @instead Nadia's left column belongs to `DesktopAppShell`. Both draw their rows with the same
- * `SidebarMenuButton` and end with the same `AccountMenu`; neither paints its own selected fill or
- * its own account block.
- * @behaviour Wordmark and product name over the collapse control, then Find, the bands, the way out
- * (Get Nadia) and the account, split by 1 px guides.
- * @words Find is one word beside ⌘K. Bands are short nouns; items are nouns, one or two words,
- * sentence case.
- * @access The column is a labelled `nav`. Find is a button named with its shortcut. The wordmark is
- * `role="img"` named nadicode.
+ * @when A static picture of the Portal's column on the website; all of `account`, `bands`, `findLabel`, `subtitle` and `toggleLabel` are required.
+ * @instead A product's own navigation is a `Sidebar` filled by `SidebarFrame`, never this sample.
+ * @behaviour Wordmark and product name beside the collapse control, then Find with ⌘K, the groups, the way out (Get Nadia) and the account; 1 px rules sit under the header and above the way out and the account, none between groups. The selected row takes the selection fill; every other row stays neutral.
+ * @words Find is one word beside ⌘K. Bands are short nouns; items are nouns, one or two words, sentence case.
+ * @access The collapse control is named by `toggleLabel` and Find by `findLabel`; the wordmark is decorative beside the product name.
  */
 export function PortalSidebarFrame({ account, bands, className, findLabel, footerItem, subtitle, toggleLabel, }) {
-    return (_jsx(Sidebar, { collapsible: "none", className: cn("h-auto shrink-0", className), children: _jsxs("div", { className: "grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)_auto_auto] bg-border *:min-w-0", children: [_jsxs("div", { className: "grid grid-rows-[3.5rem_auto] gap-px bg-border *:bg-sidebar", children: [_jsxs(SidebarHeader, { className: "h-full flex-row items-center justify-between gap-1 px-3 py-0", children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-0", children: [_jsx(BrandWordmark, { alt: "", className: "h-5 w-28 max-w-full" }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: subtitle })] }), _jsx(SidebarTrigger, { "aria-label": toggleLabel, className: "shrink-0" })] }), _jsx("div", { className: "p-2", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { variant: "outline", children: [_jsx(Search, { "aria-hidden": "true", className: "text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left text-muted-foreground", children: findLabel }), _jsxs(KbdGroup, { className: "ml-auto", children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] }) }) }) })] }), _jsx(SidebarContent, { className: "bg-sidebar", children: bands.map((band) => (_jsxs(SidebarGroup, { children: [band.label ? (_jsx(SidebarGroupLabel, { render: _jsx("h2", {}), children: band.label })) : null, _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: band.items.map((item) => (_jsx(ItemRow, { item: item }, item.id))) }) })] }, band.id))) }), footerItem ? (_jsx(SidebarGroup, { className: "border-t bg-sidebar", children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: _jsx(ItemRow, { item: footerItem, variant: "outline" }) }) }) })) : null, _jsx(SidebarFooter, { className: "border-t bg-sidebar", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { className: "group/account flex min-h-9 items-center pr-2 pl-2.5", children: _jsx(AccountMenuIdentity, { identity: account }) }) }) })] }) }));
+    return (_jsx(Sidebar, { collapsible: "none", className: cn("h-auto shrink-0", className), children: _jsx(SidebarFrame, { account: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { className: "group/account flex min-h-9 items-center pr-2 pl-2.5", children: _jsx(AccountMenuIdentity, { identity: account }) }) }), band: footerItem ? (_jsx(SidebarMenu, { children: _jsx(ItemRow, { item: footerItem, variant: "outline" }) })) : undefined, find: _jsx(SidebarFind, { label: findLabel, shortcut: _jsx(Kbd, { meta: true, size: "sm", children: "K" }) }), header: _jsx(SidebarBrand, { subtitle: subtitle }), toggle: _jsx(SidebarTrigger, { "aria-label": toggleLabel, className: "shrink-0" }), children: bands.map((band) => (_jsxs(SidebarGroup, { children: [band.label ? (_jsx(SidebarGroupLabel, { render: _jsx("h2", {}), children: band.label })) : null, _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: band.items.map((item) => (_jsx(ItemRow, { item: item }, item.id))) }) })] }, band.id))) }) }));
 }

package/dist/components/progress-checklist.d.ts

@@ -0,0 +1,46 @@
+import type { IconComponent } from "./identity-mark.js";
+import { type PageCommand } from "./page-actions.js";
+/** The ground of a step's icon tile: a hue says which kind of step it is, never whether it is done. */
+export type ChecklistStepTone = "neutral" | "blue" | "green" | "amber" | "purple" | "teal" | "pink";
+export type ChecklistStep = {
+    id: string;
+    /** What the step asks for, as a done thing reads: "Company details confirmed". */
+    title: string;
+    /** One line: what the step gives, or what is missing. */
+    description: string;
+    icon: IconComponent;
+    tone?: ChecklistStepTone;
+    /** Derived from what exists, never remembered: the thing the step asks for is there. */
+    done: boolean;
+    /** Where the step is done, for a step still to do: a link, drawn as an outline button. */
+    action?: PageCommand;
+};
+export type ProgressChecklistProps = {
+    /** The checklist's name, in the tooltip and as the drawer's title: "Customer setup". */
+    title: string;
+    /** One line under the drawer's title. */
+    description: string;
+    /** The ring's accessible name, whose and how far: "Studio Rossi's setup, 2 of 4 done". */
+    label: string;
+    steps: readonly ChecklistStep[];
+    /** The chip on a done step: "Done". */
+    doneLabel: string;
+    /** The drawer's ×. */
+    closeLabel: string;
+    /** The drawer's footer button, which closes it: "Done". */
+    finishLabel: string;
+};
+/**
+ * How far one record is through the steps that make it ready: a blue ring at the end of its row
+ * that opens the steps in a drawer at the right edge.
+ *
+ * @family Status
+ * @when “Production Checklist”, the ring at the end of a project's row on Vercel's Projects page, which opens the steps that make a project ready for production. (https://vercel.com/dashboard)
+ * Ours: the steps a Customer or a Partner takes before nadicode's work runs for them, each one a fact the Portal can read (company details confirmed, a plan, Nadia connected, an Agent at work), at the end of the record's row.
+ * @instead Steps a person follows on a page, one after the other, are `NumberedSteps`; a setup with a wait is `FormDrawer job="steps"`. A ratio with no steps behind it is a `Gauge`. One state of a record is a `StatusBadge`.
+ * @behaviour The ring is a 24 px `Gauge` in blue with the double check inside in ink, so the glyph reads at a glance, on a 36 px ghost button whose tooltip names the checklist and how far it is ("Customer setup 3/4"). It opens a drawer from the right: the ring again, the title, one line, then one card per step: its icon on a tile of its tone, its title, one line, and the outline button that goes where the step is done; every card is the same hairline card, and a done step differs only by its blue Done chip after its title, with no button, so the steps still to do, with their buttons, draw the eye. The footer's button closes it. A step is done because the thing it asks for exists, so the checklist has no Skip and remembers nothing.
+ * @words Every string is the product's. The title names the checklist ("Customer setup"); a step's title reads as the thing done ("Plan chosen"); its button names where it goes ("Open billing").
+ * @access The ring's button is named by `label`, which says whose checklist and how many steps are done; the ring itself is hidden from assistive technology. The drawer is a dialog named by its title; Escape, × and the footer's button close it and give focus back to the ring. The steps are a list.
+ */
+export declare function ProgressChecklist({ title, description, label, steps, doneLabel, closeLabel, finishLabel, }: ProgressChecklistProps): import("react").JSX.Element;
+//# sourceMappingURL=progress-checklist.d.ts.map

package/dist/components/progress-checklist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-checklist.d.ts","sourceRoot":"","sources":["../../src/components/progress-checklist.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,2BAA2B,CAAC;AAYhF,uGAAuG;AACvG,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpG,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,wFAAwF;IACxF,IAAI,EAAE,OAAO,CAAC;IACd,0FAA0F;IAC1F,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,0FAA0F;IAC1F,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,aAAa,EAAE,CAAC;IAChC,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAuDF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,GACZ,EAAE,sBAAsB,+BAyDxB"}

package/dist/components/progress-checklist.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, CheckCheck } from "lucide-react";
+import { useState } from "react";
+import { Button } from "./button.js";
+import { Gauge } from "./gauge.js";
+import { PageCommandButton } from "./page-actions.js";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "./sheet.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { cn } from "../lib/utils.js";
+const TILE_TONES = {
+    neutral: "bg-card text-muted-foreground ring-1 ring-border ring-inset",
+    blue: "bg-info-soft text-info-soft-foreground",
+    green: "bg-success-soft text-success-soft-foreground",
+    amber: "bg-warning-soft text-warning-soft-foreground",
+    purple: "bg-category-purple text-category-purple-foreground",
+    teal: "bg-category-teal text-category-teal-foreground",
+    pink: "bg-category-pink text-category-pink-foreground",
+};
+function ratio(steps) {
+    if (steps.length === 0)
+        return 0;
+    return (steps.filter((step) => step.done).length / steps.length) * 100;
+}
+function StepCard({ step, doneLabel }) {
+    const tileTone = TILE_TONES[step.tone ?? "neutral"];
+    return (_jsxs("li", { className: cn("flex min-w-0 items-start gap-3 rounded-sm p-4 ring-1 ring-border ring-inset"), "data-done": step.done || undefined, "data-slot": "checklist-step", children: [_jsx("span", { "aria-hidden": "true", className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-sm", tileTone), children: _jsx(step.icon, { "aria-hidden": "true", size: 16 }) }), _jsxs("span", { className: "grid min-w-0 flex-1 gap-1", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "min-w-0 font-medium break-words text-foreground", children: step.title }), step.done ? (_jsxs("span", { className: "inline-flex h-5 items-center gap-1 rounded-full bg-info px-2 text-[11px] leading-5 font-medium text-info-foreground", children: [_jsx(Check, { "aria-hidden": "true", className: "size-3" }), doneLabel] })) : null] }), _jsx("span", { className: "text-body-sm break-words text-muted-foreground", children: step.description }), !step.done && step.action ? (_jsx("span", { className: "pt-2", children: _jsx(PageCommandButton, { command: step.action, size: "sm", variant: "outline" }) })) : null] })] }));
+}
+/**
+ * How far one record is through the steps that make it ready: a blue ring at the end of its row
+ * that opens the steps in a drawer at the right edge.
+ *
+ * @family Status
+ * @when “Production Checklist”, the ring at the end of a project's row on Vercel's Projects page, which opens the steps that make a project ready for production. (https://vercel.com/dashboard)
+ * Ours: the steps a Customer or a Partner takes before nadicode's work runs for them, each one a fact the Portal can read (company details confirmed, a plan, Nadia connected, an Agent at work), at the end of the record's row.
+ * @instead Steps a person follows on a page, one after the other, are `NumberedSteps`; a setup with a wait is `FormDrawer job="steps"`. A ratio with no steps behind it is a `Gauge`. One state of a record is a `StatusBadge`.
+ * @behaviour The ring is a 24 px `Gauge` in blue with the double check inside in ink, so the glyph reads at a glance, on a 36 px ghost button whose tooltip names the checklist and how far it is ("Customer setup 3/4"). It opens a drawer from the right: the ring again, the title, one line, then one card per step: its icon on a tile of its tone, its title, one line, and the outline button that goes where the step is done; every card is the same hairline card, and a done step differs only by its blue Done chip after its title, with no button, so the steps still to do, with their buttons, draw the eye. The footer's button closes it. A step is done because the thing it asks for exists, so the checklist has no Skip and remembers nothing.
+ * @words Every string is the product's. The title names the checklist ("Customer setup"); a step's title reads as the thing done ("Plan chosen"); its button names where it goes ("Open billing").
+ * @access The ring's button is named by `label`, which says whose checklist and how many steps are done; the ring itself is hidden from assistive technology. The drawer is a dialog named by its title; Escape, × and the footer's button close it and give focus back to the ring. The steps are a list.
+ */
+export function ProgressChecklist({ title, description, label, steps, doneLabel, closeLabel, finishLabel, }) {
+    const [open, setOpen] = useState(false);
+    const value = ratio(steps);
+    const done = steps.filter((step) => step.done).length;
+    return (_jsxs(_Fragment, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { "aria-label": label, "data-slot": "progress-checklist", onClick: () => setOpen(true), size: "icon", variant: "ghost" }), children: _jsx(Gauge, { "aria-hidden": "true", "aria-label": title, className: "size-6", size: "xs", tone: "info", value: value, children: _jsx(CheckCheck, { className: "text-foreground" }) }) }), _jsxs(TooltipContent, { children: [title, " ", done, "/", steps.length] })] }), _jsx(Sheet, { onOpenChange: setOpen, open: open, children: _jsxs(SheetContent, { closeLabel: closeLabel, side: "right", children: [_jsxs(SheetHeader, { className: "items-center pt-10 text-center", children: [_jsx(Gauge, { "aria-hidden": "true", "aria-label": title, size: "sm", tone: "info", value: value, children: _jsx(CheckCheck, { className: "size-4" }) }), _jsx(SheetTitle, { className: "pt-3", children: title }), _jsx(SheetDescription, { children: description })] }), _jsx("ol", { className: "grid min-h-0 flex-1 content-start gap-3 overflow-y-auto px-nadicode-lg", "data-slot": "checklist-steps", children: steps.map((step) => (_jsx(StepCard, { doneLabel: doneLabel, step: step }, step.id))) }), _jsx(SheetFooter, { children: _jsx(Button, { onClick: () => setOpen(false), children: finishLabel }) })] }) })] }));
+}

package/dist/components/progress.d.ts

@@ -1,27 +1,67 @@
 import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
 import { type VariantProps } from "class-variance-authority";
 declare const progressIndicatorVariants: (props?: ({
-    tone?: "default" | "warning" | "critical" | null | undefined;
+    tone?: "default" | "secondary" | "warning" | "info" | "success" | "critical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ProgressTone = NonNullable<VariantProps<typeof progressIndicatorVariants>["tone"]>;
+type ProgressSize = "sm" | "md";
+type ProgressName = {
+    "aria-label": string;
+    "aria-labelledby"?: never;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: never;
+};
+type ProgressStop = {
+    value: number;
+    /** The stage that ends at this value, in the reader's language: "Build complete". */
+    label: string;
+};
 /**
  * A known amount against a real maximum, with its label and value.
  *
  * @family Data
- * @when A known amount against a real maximum, with its label and value: included runs used against the plan's allowance.
- * @instead An unknown wait is the waiting line, never a bar with an invented percentage. A run's consumption in a dense spot is a `UsageMeter`. A single figure is a `KpiCard`.
- * @behaviour A 4 px track in the `line` colour. The fill moves only when the reading changes, on `open`; still under reduced motion. `tone` is the product's threshold, never derived from the value. Past the maximum the bar fills and turns red, whatever the tone.
- * @words Print the work and its unit in `ProgressValue`: "620 of 1,000".
- * @access A `progressbar` named by its `ProgressLabel` or `aria-label`, with its value.
+ * @when "Determinate work whose total is knowable, like file uploads, multi-step setup, build steps, or batch deletions." (https://vercel.com/geist/progress)
+ * "Use `max` for the real ceiling (`max={files.length}`), not a hardcoded `100`. The component computes the percentage from `value / max`." (https://vercel.com/geist/progress)
+ * Ours: it always has a `value` and a name, as `aria-label` or as `aria-labelledby` pointing at its
+ * `ProgressLabel`, and the type asks for both. `stops` mark genuine stages, each named. `size` is
+ * `md` (10 px), or `sm` (4 px) inside a table cell or a row.
+ * @instead "For short indeterminate waits (~1–3s), use `Spinner`; for inline copy like `Saving`, use `Loading Dots`." (https://vercel.com/geist/progress)
+ * Ours: neither exists; an unknown wait is the waiting line, never a bar with an invented
+ * percentage.
+ * "For usage against a quota or ratio, use `Gauge`; the circle reads as health, the bar reads as progress." (https://vercel.com/geist/progress)
+ * Ours: a run's consumption in a dense spot is a `UsageMeter`. A single figure is a `KpiCard`.
+ * @behaviour "Threshold colors via `dynamic colors` should mirror the same breakpoints used elsewhere (warning at the same threshold a quota note fires)." (https://vercel.com/geist/progress)
+ * Ours: colour sits on the fill alone: the track is always the neutral line colour and the words
+ * beside the bar stay neutral. The fill is neutral by default; `tone` is that threshold (amber
+ * where the note fires, red past the cap), never derived from the value. Past the maximum the bar
+ * fills and turns red, whatever the tone. The fill's end is rounded, and square when `stops` cut
+ * the bar. The fill moves only when the reading changes, on `open`; still under reduced motion. The
+ * printed value is always the live reading.
+ * "Use stops for genuine multi-stage work and label the stage next to the bar (`Step 2 of 4 · Building`); a stop with no label is decorative noise." (https://vercel.com/geist/progress)
+ * @words "Pair the bar with text naming the work and units: `Uploading 12 of 30 files`, `Building · 1.2 GB / 4 GB`. The bar alone doesn’t say what’s progressing." (https://vercel.com/geist/progress)
+ * "Don’t append `successfully` or `complete` once the bar fills; swap to a completion state (toast, success row, redirect)." (https://vercel.com/geist/progress)
+ * "For long operations, name the work in the surrounding copy (`Building deployment…`) instead of leaving a bare percentage." (https://vercel.com/geist/progress)
+ * Ours: print the work and its unit in `ProgressValue`.
+ * @access "Component sets `role="progressbar"` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`; pass an accessible name through `aria-label` on the wrapper or a sibling `<label>` tied with `aria-labelledby`." (https://vercel.com/geist/progress)
+ * "Throttle `aria-valuenow` updates to roughly once a second so screen readers don’t announce every increment of a fast upload." (https://vercel.com/geist/progress)
+ * Ours: the printed value is live, and the value it announces follows it at most once a second.
+ * "Stops accept their own `ariaLabel`; name each one (`Build complete`, `Tests complete`) so the bar is navigable without sight." (https://vercel.com/geist/progress)
+ * Ours: a stop's name is its `label`. With `stops`, the stage reached leads the spoken value; a
+ * stop is not focusable, because a progressbar's children are presentational.
  */
-declare function Progress({ className, children, value, min, max, tone, indicatorColor, ...props }: ProgressPrimitive.Root.Props & {
+declare function Progress({ className, children, value, min, max, format, locale, getAriaValueText, tone, size, indicatorColor, stops, ...props }: Omit<ProgressPrimitive.Root.Props, "aria-label" | "aria-labelledby" | "value"> & ProgressName & {
+    /** The amount reached, between `min` and `max`; the bar has no indeterminate form. */
+    value: number;
     tone?: ProgressTone;
+    size?: ProgressSize;
     indicatorColor?: string;
+    stops?: readonly ProgressStop[];
 }): import("react").JSX.Element;
 declare function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props): import("react").JSX.Element;
 declare function ProgressIndicator({ className, style, ...props }: ProgressPrimitive.Indicator.Props): import("react").JSX.Element;
 declare function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props): import("react").JSX.Element;
 declare function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props): import("react").JSX.Element;
 export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue, progressIndicatorVariants, };
-export type { ProgressTone };
+export type { ProgressSize, ProgressTone };
 //# sourceMappingURL=progress.d.ts.map

package/dist/components/progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,QAAA,MAAM,yBAAyB;;8EAc9B,CAAC;AAEF,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAiBxF;;;;;;;;;GASG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,IAAgB,EAChB,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,YAAY,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,+BAwBjF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAW5E;AAOD,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,SAAS,CAAC,KAAK,+BA8B3F;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,OAAO,EACL,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,yBAAyB,GAC1B,CAAC;AACF,YAAY,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,QAAA,MAAM,yBAAyB;;8EAiB9B,CAAC;AAEF,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAExF,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC;AAOhC,KAAK,YAAY,GACb;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAexD,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAkEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,MAAM,EACN,MAAM,EACN,gBAAgB,EAChB,IAAgB,EAChB,IAAW,EACX,cAAc,EACd,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,iBAAiB,GAAG,OAAO,CAAC,GAC/E,YAAY,GAAG;IACb,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;CACjC,+BA+CF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAc5E;AAMD,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,SAAS,CAAC,KAAK,+BA+B3F;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,OAAO,EACL,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,yBAAyB,GAC1B,CAAC;AACF,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC"}