@nadicodeai/ui 12.1.102 → 12.1.103

package/dist/components/middle-truncate.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+/**
+ * A technical string cut in the middle, so its start and its end both stay readable.
+ *
+ * @family Data
+ * @when “Use Middle Truncate for strings whose head and tail both carry information: file paths (`apps/…/page.tsx`), URLs, deployment IDs (`dpl_…abc123`), commit hashes, branch names with prefixes.” (https://vercel.com/geist/middle-truncate)
+ * Ours: an environment variable is one of these too.
+ * @instead “For prose, descriptions, and headings, use end-truncation with `…` instead; cutting the middle of a sentence destroys meaning.” (https://vercel.com/geist/middle-truncate)
+ * “For any truncated value the user might need verbatim, pair with a `Tooltip` showing the full string or a copy-on-click affordance.” (https://vercel.com/geist/middle-truncate)
+ * Ours: a value someone may need exactly is `TextWithCopyButton` or sits beside a `CopyButton`; while
+ * the middle is cut, the whole value is also the element's `title`.
+ * @behaviour “Middle Truncate renders a single ellipsis glyph (`…`) rather than three periods. This keeps monospace values, including environment variable keys, IDs, hashes, and paths, from reserving three character cells for the truncation marker.” (https://vercel.com/geist/middle-truncate)
+ * “The component listens to its container width, so layouts that change width on hover (expanding cards, animated rows) cause the truncation point to jitter. Lock the width during interaction.” (https://vercel.com/geist/middle-truncate)
+ * “Copying truncated text yields the full original string from the underlying value, not the visible ellipsis form. Confirm this stays true if wrapping with custom `onCopy`.” (https://vercel.com/geist/middle-truncate)
+ * “Don’t wrap Middle Truncate in another `text-overflow: ellipsis` container; the two strategies fight each other and the inner ellipsis wins inconsistently.” (https://vercel.com/geist/middle-truncate)
+ * “Keep the visible string long enough on small viewports that the head still identifies the resource (path segment, ID prefix).” (https://vercel.com/geist/middle-truncate)
+ * Ours: it fills the width its parent gives and shows the whole value when it fits. Too narrow, the
+ * last third of the value, at most 16 characters, stays whole. While the middle is cut, copying a
+ * selection made inside it puts the whole value on the clipboard; a value shown in full copies only
+ * what is selected. A custom `onCopy` runs first, and `preventDefault` in it keeps the value as
+ * selected.
+ * @words Ours: the value as the system writes it, unchanged; the ellipsis comes from the layout, never from
+ * the text.
+ * @access “Expose the full string to assistive tech via the wrapping element’s accessible name (the component already keeps the full value in the DOM for copy).” (https://vercel.com/geist/middle-truncate)
+ * “Avoid Middle Truncate inside focusable controls without an explicit `aria-label`; the ellipsis on its own gives screen readers nothing to announce.” (https://vercel.com/geist/middle-truncate)
+ * Ours: the whole value is the element's text, read in full; inside a link or a button, the control
+ * carries the `aria-label` that names the target.
+ */
+declare function MiddleTruncate({ className, onCopy, value, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
+    value: string;
+}): React.JSX.Element;
+export { MiddleTruncate };
+//# sourceMappingURL=middle-truncate.d.ts.map

package/dist/components/middle-truncate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"middle-truncate.d.ts","sourceRoot":"","sources":["../../src/components/middle-truncate.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmC/B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,MAAM,EACN,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,qBA0BpE;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/middle-truncate.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+const TAIL_SHARE = 3;
+const TAIL_MAX = 16;
+function copiesWholeValue(root) {
+    const head = root.firstElementChild;
+    const selection = window.getSelection();
+    return (head !== null &&
+        head.scrollWidth > head.clientWidth &&
+        selection !== null &&
+        !selection.isCollapsed &&
+        root.contains(selection.anchorNode) &&
+        root.contains(selection.focusNode));
+}
+function useIsCut(root, value) {
+    const [cut, setCut] = React.useState(false);
+    React.useEffect(() => {
+        const element = root.current;
+        const head = element?.firstElementChild;
+        if (!element || !head || typeof ResizeObserver === "undefined")
+            return;
+        const measure = () => setCut(head.scrollWidth > head.clientWidth);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [root, value]);
+    return cut;
+}
+/**
+ * A technical string cut in the middle, so its start and its end both stay readable.
+ *
+ * @family Data
+ * @when “Use Middle Truncate for strings whose head and tail both carry information: file paths (`apps/…/page.tsx`), URLs, deployment IDs (`dpl_…abc123`), commit hashes, branch names with prefixes.” (https://vercel.com/geist/middle-truncate)
+ * Ours: an environment variable is one of these too.
+ * @instead “For prose, descriptions, and headings, use end-truncation with `…` instead; cutting the middle of a sentence destroys meaning.” (https://vercel.com/geist/middle-truncate)
+ * “For any truncated value the user might need verbatim, pair with a `Tooltip` showing the full string or a copy-on-click affordance.” (https://vercel.com/geist/middle-truncate)
+ * Ours: a value someone may need exactly is `TextWithCopyButton` or sits beside a `CopyButton`; while
+ * the middle is cut, the whole value is also the element's `title`.
+ * @behaviour “Middle Truncate renders a single ellipsis glyph (`…`) rather than three periods. This keeps monospace values, including environment variable keys, IDs, hashes, and paths, from reserving three character cells for the truncation marker.” (https://vercel.com/geist/middle-truncate)
+ * “The component listens to its container width, so layouts that change width on hover (expanding cards, animated rows) cause the truncation point to jitter. Lock the width during interaction.” (https://vercel.com/geist/middle-truncate)
+ * “Copying truncated text yields the full original string from the underlying value, not the visible ellipsis form. Confirm this stays true if wrapping with custom `onCopy`.” (https://vercel.com/geist/middle-truncate)
+ * “Don’t wrap Middle Truncate in another `text-overflow: ellipsis` container; the two strategies fight each other and the inner ellipsis wins inconsistently.” (https://vercel.com/geist/middle-truncate)
+ * “Keep the visible string long enough on small viewports that the head still identifies the resource (path segment, ID prefix).” (https://vercel.com/geist/middle-truncate)
+ * Ours: it fills the width its parent gives and shows the whole value when it fits. Too narrow, the
+ * last third of the value, at most 16 characters, stays whole. While the middle is cut, copying a
+ * selection made inside it puts the whole value on the clipboard; a value shown in full copies only
+ * what is selected. A custom `onCopy` runs first, and `preventDefault` in it keeps the value as
+ * selected.
+ * @words Ours: the value as the system writes it, unchanged; the ellipsis comes from the layout, never from
+ * the text.
+ * @access “Expose the full string to assistive tech via the wrapping element’s accessible name (the component already keeps the full value in the DOM for copy).” (https://vercel.com/geist/middle-truncate)
+ * “Avoid Middle Truncate inside focusable controls without an explicit `aria-label`; the ellipsis on its own gives screen readers nothing to announce.” (https://vercel.com/geist/middle-truncate)
+ * Ours: the whole value is the element's text, read in full; inside a link or a button, the control
+ * carries the `aria-label` that names the target.
+ */
+function MiddleTruncate({ className, onCopy, value, ...props }) {
+    const root = React.useRef(null);
+    const cut = useIsCut(root, value);
+    const characters = Array.from(value);
+    const tailStart = characters.length - Math.min(Math.ceil(characters.length / TAIL_SHARE), TAIL_MAX);
+    return (_jsxs("span", { ref: root, "data-slot": "middle-truncate", title: cut ? value : undefined, className: cn("inline-flex max-w-full min-w-0 overflow-hidden", className), onCopy: (event) => {
+            onCopy?.(event);
+            if (event.defaultPrevented || !copiesWholeValue(event.currentTarget))
+                return;
+            event.clipboardData.setData("text/plain", value);
+            event.preventDefault();
+        }, ...props, children: [_jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-pre", children: characters.slice(0, tailStart).join("") }), _jsx("span", { className: "shrink-0 whitespace-pre", children: characters.slice(tailStart).join("") })] }));
+}
+export { MiddleTruncate };

package/dist/components/multi-select.d.ts

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { type FieldName } from "../internal/field-frame.js";
+import { type FieldSize } from "../internal/input-box.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+type MultiSelectContextValue = {
+    selectedCount: number;
+    totalCount: number;
+    onSelectAll: () => void;
+    selectOnlyLabel: string;
+    selectAllLabel: string;
+};
+type MultiSelectProps = React.ComponentProps<typeof Popover> & MultiSelectContextValue;
+/**
+ * A menu of checkbox rows that chooses several values from a known list, with the count in its
+ * trigger.
+ *
+ * @family Choices
+ * @when "A keyboard-navigable dropdown for selecting multiple items with advanced focus management."
+ * (https://vercel.com/geist/multi-select) "Pick `<MultiSelect>` when users pick more than one value
+ * from a known list (regions, scopes, tags)." (https://vercel.com/geist/multi-select) Ours: also the facets of a collection.
+ * @instead "For a single value from a short list, use `Select`."
+ * (https://vercel.com/geist/multi-select) "When typing to filter is more important than seeing
+ * every option at once, use `Combobox`." (https://vercel.com/geist/multi-select) "Skip
+ * `<MultiSelect>` for boolean settings; `Toggle` handles those."
+ * (https://vercel.com/geist/multi-select) Ours: `Combobox` takes several values with `multiple`; a
+ * yes-or-no setting is a `Switch`, never a one-row multi-select.
+ * @behaviour "Use controlled mode when state lives in the URL or syncs to the server so the trigger
+ * label and stored value stay in lockstep." (https://vercel.com/geist/multi-select) "Use controlled
+ * state to manage selections programmatically." (https://vercel.com/geist/multi-select) Ours: the
+ * caller always owns the selection and passes it back through each row, so the trigger and the
+ * stored value (the URL, the server) never disagree; the root takes the same `selectedCount` and
+ * `totalCount` the trigger's summary is built from. "Show the selected count in the trigger (`3
+ * regions selected`); show the single name when only one is picked."
+ * (https://vercel.com/geist/multi-select) The trigger is `Input`'s box at its default size, in
+ * regular weight, with the chevron at the end (it turns up while the list is open); it keeps the
+ * hover edge while the list is open and takes the page's outline for keyboard focus, as a button
+ * does. Everything is neutral: a checked box is ink, never blue, and an error turns only the
+ * trigger's ring red. `label` and `error` go on `MultiSelectTrigger`, and a string `label` requires
+ * `id`; a trigger with no name does not compile. The list opens 8 px under the trigger at least as
+ * wide as it, in an 8 px inset, with rows 28 px tall and no gap, and stops 16 px short of the
+ * screen's edge (at most 24rem tall, then it scrolls). A row is the checkbox in a 28 px square that
+ * fills on hover, then a button holding the row's name; pressing the name runs the button, pressing
+ * the box toggles the row. "**Checkbox focus + Enter/Space**: Toggle individual item"
+ * (https://vercel.com/geist/multi-select) "**Button focus + Enter/Space**: Smart selection (Select
+ * Only, Select All, or Toggle based on context)" (https://vercel.com/geist/multi-select) "**Hidden
+ * action labels**: Appear on hover/focus to show available actions"
+ * (https://vercel.com/geist/multi-select) Ours: the button's label reads *Select all* on a chosen
+ * row while some rows are unchosen, and *Select only* on every other row; it shows on hover and
+ * focus of the row, and always on touch. "Keep checkbox focus and button focus distinct so Up/Down
+ * navigates rows and Left/Right toggles between the row’s checkbox and action button."
+ * (https://vercel.com/geist/multi-select) "**Up/Down arrows**: Navigate between rows while
+ * maintaining checkbox/button focus state" (https://vercel.com/geist/multi-select) "**Left/Right
+ * arrows**: Switch between checkbox and button focus within the current row"
+ * (https://vercel.com/geist/multi-select) "**Tab**: Focus away from the menu (natural tab
+ * behavior)" (https://vercel.com/geist/multi-select) "**Enter/Space**: Execute actions based on
+ * current focus (checkbox toggle or button click)" (https://vercel.com/geist/multi-select) "Trap
+ * focus inside the menu while it’s open and return focus to the trigger on close."
+ * (https://vercel.com/geist/multi-select) Ours: focus moves into the list when it opens; Tab leaves
+ * it in order. "For empty filters, render `No {items} match "{query}"` rather than `No results`."
+ * (https://vercel.com/geist/multi-select) Ours: there is no filter box, so a list that needs one is
+ * a `Combobox` with `multiple`.
+ * @words The trigger says how many are chosen in the product's words: the name when exactly one is
+ * chosen, *No regions selected* when none. It is never empty. Rows are sentence case names.
+ * "Announce bulk actions (`Select All`, `Select Only`) through the visible button label so the
+ * action matches what the screen reader speaks." (https://vercel.com/geist/multi-select) Ours: the
+ * two button labels come from the caller, in sentence case.
+ * @access "Each row checkbox needs an `aria-label` that names the item (`Select us-east-1`); a bare
+ * `Select` is unanchored for screen readers." (https://vercel.com/geist/multi-select) Ours: each
+ * row's checkbox is named by the row's name; each button is named by its label and the row (*Select
+ * only us-east-1*). "The trigger button needs a stable accessible name even when zero items are
+ * selected; don’t rely on the placeholder alone." (https://vercel.com/geist/multi-select) Ours: the
+ * trigger is a button with `aria-expanded`, named by its visible label tied by `id`, or by
+ * `aria-label` or `aria-labelledby`; the summary describes it.
+ */
+declare function MultiSelect({ selectedCount, totalCount, onSelectAll, selectOnlyLabel, selectAllLabel, ...props }: MultiSelectProps): React.JSX.Element;
+declare function MultiSelectTrigger({ className, children, size, label, error, ...props }: Omit<React.ComponentProps<typeof PopoverTrigger>, "children"> & {
+    /** The summary of the choice: a count, a name, or that nothing is chosen. It describes the trigger. */
+    children: string;
+    size?: FieldSize;
+    /** The message under the box, in the product's words; it also marks the box invalid. */
+    error?: string;
+} & FieldName): React.JSX.Element;
+declare function MultiSelectContent({ className, align, sideOffset, onKeyDown, ...props }: React.ComponentProps<typeof PopoverContent>): React.JSX.Element;
+declare function MultiSelectRow({ name, checked, onCheckedChange, onSelectOnly, disabled, className, }: {
+    name: string;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    /** Chooses this row and clears the rest. */
+    onSelectOnly: () => void;
+    disabled?: boolean;
+    className?: string;
+}): React.JSX.Element;
+export { MultiSelect, MultiSelectContent, MultiSelectRow, MultiSelectTrigger };
+//# sourceMappingURL=multi-select.d.ts.map

package/dist/components/multi-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../src/components/multi-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE1E,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAG/E,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG,uBAAuB,CAAC;AAEvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,iBAAS,WAAW,CAAC,EACnB,aAAa,EACb,UAAU,EACV,WAAW,EACX,eAAe,EACf,cAAc,EACd,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAUlB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACjE,uGAAuG;IACvG,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,qBAmCZ;AAwBD,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAe,EACf,UAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,qBAiB7C;AAED,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,eAAe,EACf,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,4CAA4C;IAC5C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAuDA;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/multi-select.js

@@ -0,0 +1,132 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Checkbox } from "./checkbox.js";
+import { FieldFrame } from "../internal/field-frame.js";
+import { fieldTriggerStates } from "../internal/input-box.js";
+import { Label } from "./label.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { selectTriggerVariants } from "./select.js";
+const MultiSelectContext = React.createContext(null);
+function useMultiSelect() {
+    const context = React.useContext(MultiSelectContext);
+    if (!context)
+        throw new Error("MultiSelectRow must be inside <MultiSelect>");
+    return context;
+}
+/**
+ * A menu of checkbox rows that chooses several values from a known list, with the count in its
+ * trigger.
+ *
+ * @family Choices
+ * @when "A keyboard-navigable dropdown for selecting multiple items with advanced focus management."
+ * (https://vercel.com/geist/multi-select) "Pick `<MultiSelect>` when users pick more than one value
+ * from a known list (regions, scopes, tags)." (https://vercel.com/geist/multi-select) Ours: also the facets of a collection.
+ * @instead "For a single value from a short list, use `Select`."
+ * (https://vercel.com/geist/multi-select) "When typing to filter is more important than seeing
+ * every option at once, use `Combobox`." (https://vercel.com/geist/multi-select) "Skip
+ * `<MultiSelect>` for boolean settings; `Toggle` handles those."
+ * (https://vercel.com/geist/multi-select) Ours: `Combobox` takes several values with `multiple`; a
+ * yes-or-no setting is a `Switch`, never a one-row multi-select.
+ * @behaviour "Use controlled mode when state lives in the URL or syncs to the server so the trigger
+ * label and stored value stay in lockstep." (https://vercel.com/geist/multi-select) "Use controlled
+ * state to manage selections programmatically." (https://vercel.com/geist/multi-select) Ours: the
+ * caller always owns the selection and passes it back through each row, so the trigger and the
+ * stored value (the URL, the server) never disagree; the root takes the same `selectedCount` and
+ * `totalCount` the trigger's summary is built from. "Show the selected count in the trigger (`3
+ * regions selected`); show the single name when only one is picked."
+ * (https://vercel.com/geist/multi-select) The trigger is `Input`'s box at its default size, in
+ * regular weight, with the chevron at the end (it turns up while the list is open); it keeps the
+ * hover edge while the list is open and takes the page's outline for keyboard focus, as a button
+ * does. Everything is neutral: a checked box is ink, never blue, and an error turns only the
+ * trigger's ring red. `label` and `error` go on `MultiSelectTrigger`, and a string `label` requires
+ * `id`; a trigger with no name does not compile. The list opens 8 px under the trigger at least as
+ * wide as it, in an 8 px inset, with rows 28 px tall and no gap, and stops 16 px short of the
+ * screen's edge (at most 24rem tall, then it scrolls). A row is the checkbox in a 28 px square that
+ * fills on hover, then a button holding the row's name; pressing the name runs the button, pressing
+ * the box toggles the row. "**Checkbox focus + Enter/Space**: Toggle individual item"
+ * (https://vercel.com/geist/multi-select) "**Button focus + Enter/Space**: Smart selection (Select
+ * Only, Select All, or Toggle based on context)" (https://vercel.com/geist/multi-select) "**Hidden
+ * action labels**: Appear on hover/focus to show available actions"
+ * (https://vercel.com/geist/multi-select) Ours: the button's label reads *Select all* on a chosen
+ * row while some rows are unchosen, and *Select only* on every other row; it shows on hover and
+ * focus of the row, and always on touch. "Keep checkbox focus and button focus distinct so Up/Down
+ * navigates rows and Left/Right toggles between the row’s checkbox and action button."
+ * (https://vercel.com/geist/multi-select) "**Up/Down arrows**: Navigate between rows while
+ * maintaining checkbox/button focus state" (https://vercel.com/geist/multi-select) "**Left/Right
+ * arrows**: Switch between checkbox and button focus within the current row"
+ * (https://vercel.com/geist/multi-select) "**Tab**: Focus away from the menu (natural tab
+ * behavior)" (https://vercel.com/geist/multi-select) "**Enter/Space**: Execute actions based on
+ * current focus (checkbox toggle or button click)" (https://vercel.com/geist/multi-select) "Trap
+ * focus inside the menu while it’s open and return focus to the trigger on close."
+ * (https://vercel.com/geist/multi-select) Ours: focus moves into the list when it opens; Tab leaves
+ * it in order. "For empty filters, render `No {items} match "{query}"` rather than `No results`."
+ * (https://vercel.com/geist/multi-select) Ours: there is no filter box, so a list that needs one is
+ * a `Combobox` with `multiple`.
+ * @words The trigger says how many are chosen in the product's words: the name when exactly one is
+ * chosen, *No regions selected* when none. It is never empty. Rows are sentence case names.
+ * "Announce bulk actions (`Select All`, `Select Only`) through the visible button label so the
+ * action matches what the screen reader speaks." (https://vercel.com/geist/multi-select) Ours: the
+ * two button labels come from the caller, in sentence case.
+ * @access "Each row checkbox needs an `aria-label` that names the item (`Select us-east-1`); a bare
+ * `Select` is unanchored for screen readers." (https://vercel.com/geist/multi-select) Ours: each
+ * row's checkbox is named by the row's name; each button is named by its label and the row (*Select
+ * only us-east-1*). "The trigger button needs a stable accessible name even when zero items are
+ * selected; don’t rely on the placeholder alone." (https://vercel.com/geist/multi-select) Ours: the
+ * trigger is a button with `aria-expanded`, named by its visible label tied by `id`, or by
+ * `aria-label` or `aria-labelledby`; the summary describes it.
+ */
+function MultiSelect({ selectedCount, totalCount, onSelectAll, selectOnlyLabel, selectAllLabel, ...props }) {
+    const value = React.useMemo(() => ({ selectedCount, totalCount, onSelectAll, selectOnlyLabel, selectAllLabel }), [selectedCount, totalCount, onSelectAll, selectOnlyLabel, selectAllLabel]);
+    return (_jsx(MultiSelectContext.Provider, { value: value, children: _jsx(Popover, { ...props }) }));
+}
+function MultiSelectTrigger({ className, children, size = "default", label, error, ...props }) {
+    const summaryId = React.useId();
+    return (_jsx(FieldFrame, { label: label, error: error, size: size, control: props, children: (aria) => (_jsxs(PopoverTrigger, { "data-slot": "multi-select-trigger", "data-size": size, "data-field-frame": "", className: cn(selectTriggerVariants({ size }), fieldTriggerStates, "group/multi-select-trigger pr-3.25 pl-2.5", size !== "lg" && "leading-5.25", className), ...props, ...aria, "aria-describedby": [aria["aria-describedby"], summaryId].filter(Boolean).join(" "), children: [_jsx("span", { id: summaryId, className: "flex-1 truncate px-1.5 text-left", children: children }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-3.5 text-muted-foreground group-data-popup-open/multi-select-trigger:hidden" }), _jsx(ChevronUpIcon, { "aria-hidden": "true", className: "hidden size-3.5 text-muted-foreground group-data-popup-open/multi-select-trigger:block" })] })) }));
+}
+const ROW = "[data-slot=multi-select-row]";
+function moveFocus(event) {
+    const target = event.target;
+    if (!(target instanceof HTMLElement))
+        return;
+    const column = target.closest("[data-multi-select]")?.dataset.multiSelect;
+    const row = target.closest(ROW);
+    if (!column || !row)
+        return;
+    const rows = [...event.currentTarget.querySelectorAll(ROW)];
+    const index = rows.indexOf(row);
+    const focusIn = (next, name) => {
+        const control = next?.querySelector(`[data-multi-select=${name}]`);
+        if (!control)
+            return;
+        event.preventDefault();
+        control.focus();
+    };
+    if (event.key === "ArrowDown")
+        focusIn(rows[index + 1], column);
+    else if (event.key === "ArrowUp")
+        focusIn(rows[index - 1], column);
+    else if (event.key === "ArrowRight" && column === "check")
+        focusIn(row, "action");
+    else if (event.key === "ArrowLeft" && column === "action")
+        focusIn(row, "check");
+}
+function MultiSelectContent({ className, align = "start", sideOffset = 8, onKeyDown, ...props }) {
+    return (_jsx(PopoverContent, { "data-slot": "multi-select-content", align: align, sideOffset: sideOffset, className: cn("max-h-[min(calc(var(--available-height)---spacing(4)),24rem)] w-auto min-w-(--anchor-width) gap-0 overflow-y-auto p-2", className), onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented)
+                moveFocus(event);
+        }, ...props }));
+}
+function MultiSelectRow({ name, checked, onCheckedChange, onSelectOnly, disabled, className, }) {
+    const { selectedCount, totalCount, onSelectAll, selectOnlyLabel, selectAllLabel } = useMultiSelect();
+    const id = React.useId();
+    const actionId = `${id}-action`;
+    const nameId = `${id}-name`;
+    const selectsAll = checked && selectedCount < totalCount;
+    return (_jsxs("div", { "data-slot": "multi-select-row", className: cn("group/multi-select-row flex min-h-touch-target items-center text-sm [@media(hover:hover)_and_(pointer:fine)]:min-h-7", className), children: [_jsx(Label, { className: "size-7 shrink-0 justify-center gap-0 rounded-xs-plus hover:bg-accent active:bg-border has-data-disabled:pointer-events-none", htmlFor: id, children: _jsx(Checkbox, { id: id, "aria-labelledby": nameId, checked: checked, "data-multi-select": "check", disabled: disabled, onCheckedChange: onCheckedChange }) }), totalCount > 1 ? (_jsxs(Button, { "aria-labelledby": `${actionId} ${nameId}`, className: "h-7 flex-1 justify-between gap-0 rounded-xs-plus p-1 text-sm font-normal hover:bg-accent focus-visible:bg-accent active:bg-border disabled:text-placeholder disabled:opacity-100", "data-multi-select": "action", disabled: disabled, onClick: selectsAll ? onSelectAll : onSelectOnly, size: "xs", variant: "ghost", children: [_jsx("span", { className: "min-w-0 truncate text-left", id: nameId, children: name }), _jsx("span", { className: "min-w-16 rounded-xs-plus px-1 py-0.5 text-right text-xs font-normal text-muted-foreground opacity-0 group-focus-within/multi-select-row:opacity-100 group-hover/multi-select-row:opacity-100 [@media(hover:none)]:opacity-100", id: actionId, children: selectsAll ? selectAllLabel : selectOnlyLabel })] })) : (_jsx(Label, { className: "flex-1 truncate px-1 text-sm leading-5", htmlFor: id, id: nameId, children: name }))] }));
+}
+export { MultiSelect, MultiSelectContent, MultiSelectRow, MultiSelectTrigger };

package/dist/components/native-select.d.ts

@@ -1,24 +1,48 @@
 import * as React from "react";
-type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
-    size?: "sm" | "default";
-};
+import { type FieldName } from "../internal/field-frame.js";
+import { type FieldSize } from "../internal/input-box.js";
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "prefix" | "size"> & {
+    size?: FieldSize;
+    /** A mark before the value, such as an icon. */
+    prefix?: React.ReactNode;
+    /** A mark at the end, in place of the chevron. */
+    suffix?: React.ReactNode;
+    /** One muted sentence under the box that says what to enter, read with the box. */
+    description?: string;
+    /** The message under the box, in the product's words; it also marks the box invalid. */
+    error?: string;
+} & FieldName;
 /**
  * The platform's own select, drawn as our input box.
  *
  * @family Inputs
  * @when A long fixed list inside a native form, where the platform's own picker serves best: a time
  * zone, a country.
- * @instead Two or three options are radios or a segmented control. Up to about ten, drawn in our
- * style, is `Select`. A list people type into is `Combobox`.
- * @behaviour Same box as `Input`, the chevron 10 px from the edge in the muted grey. It opens the
- * system's list, with native keyboard and typing. As an uncontrolled field it keeps a saved value
- * instead of snapping back to the page's first default.
- * @words The label names the thing chosen (*Time zone*). A placeholder option is distinct from a
- * real one and never preselected as if chosen.
- * @access A real `select` with a visible label; option groups are `optgroup`. The chevron is
- * decorative.
+ * @instead Two or three options are radios or a segmented control. "Pick `<Select>` for short,
+ * fixed lists (under ~10 items) where typing adds nothing; switch to `Combobox` once filtering
+ * helps." (https://vercel.com/geist/select) Ours: `Select` draws the short list in our style.
+ * @behaviour Same box, sizes, ring, hover, focus halo and disabled as `Input`, filling its
+ * container, the chevron in the muted grey with room reserved for it, after an optional `prefix`
+ * mark (a `suffix` mark takes the chevron's place). Colour sits in one place: an error turns the
+ * ring red and fills the halo, and colours the message; the fill, the value and the label stay
+ * neutral. `label` and `error` draw the `Field` parts around the box, and a string `label` requires
+ * `id`; a box with no name does not compile. It opens the system's list, with native keyboard and
+ * typing. As an uncontrolled field it keeps a saved value instead of snapping back to the page's
+ * first default. "Validate on blur and pass a string to `error`; messages name the field and end in
+ * a period (`Select a framework.`)." (https://vercel.com/geist/select) Other form rules are
+ * `Field`'s.
+ * @words "Label is a short Title Case noun (`Framework`, `Region`); accept the prop directly on
+ * `<Select>`." (https://vercel.com/geist/select) "Options are Title Case when short and match
+ * canonical branding (`Next.js`, not `NextJS`); keep the same register across the list."
+ * (https://vercel.com/geist/select) Ours: the label names the thing chosen (*Time zone*) and
+ * options are sentence case. A placeholder option is distinct from a real one and never preselected
+ * as if chosen.
+ * @access A real `select` with a visible label tied by `id`, or `aria-label`. "Group options past
+ * ~10 items with native `<optgroup>`; Geist `<Select>` has no `.Group` static."
+ * (https://vercel.com/geist/select) Ours: option groups are `optgroup`. The chevron, the prefix and
+ * the suffix are decorative.
  */
-declare function NativeSelect({ className, size, ref, ...props }: NativeSelectProps): React.JSX.Element;
+declare function NativeSelect({ className, size, prefix, suffix, label, description, error, ref, ...props }: NativeSelectProps): React.JSX.Element;
 declare function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">): React.JSX.Element;
 declare function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">): React.JSX.Element;
 export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/dist/components/native-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../src/components/native-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACtE,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAiEtF;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,qBAQlF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAQtF;AAED,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../src/components/native-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG7F,KAAK,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC,GAAG;IACjF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gDAAgD;IAChD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kDAAkD;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,CAAC;AAEd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,IAAgB,EAChB,MAAM,EACN,MAAM,EACN,KAAK,EACL,WAAW,EACX,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA6FnB;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,qBAQlF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAQtF;AAED,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/native-select.js

@@ -2,6 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
+import { FieldFrame } from "../internal/field-frame.js";
+import { fieldDisabled, fieldRing, fieldStates } from "../internal/input-box.js";
 import { ChevronDownIcon } from "lucide-react";
 /**
  * The platform's own select, drawn as our input box.
@@ -9,17 +11,31 @@ import { ChevronDownIcon } from "lucide-react";
  * @family Inputs
  * @when A long fixed list inside a native form, where the platform's own picker serves best: a time
  * zone, a country.
- * @instead Two or three options are radios or a segmented control. Up to about ten, drawn in our
- * style, is `Select`. A list people type into is `Combobox`.
- * @behaviour Same box as `Input`, the chevron 10 px from the edge in the muted grey. It opens the
- * system's list, with native keyboard and typing. As an uncontrolled field it keeps a saved value
- * instead of snapping back to the page's first default.
- * @words The label names the thing chosen (*Time zone*). A placeholder option is distinct from a
- * real one and never preselected as if chosen.
- * @access A real `select` with a visible label; option groups are `optgroup`. The chevron is
- * decorative.
+ * @instead Two or three options are radios or a segmented control. "Pick `<Select>` for short,
+ * fixed lists (under ~10 items) where typing adds nothing; switch to `Combobox` once filtering
+ * helps." (https://vercel.com/geist/select) Ours: `Select` draws the short list in our style.
+ * @behaviour Same box, sizes, ring, hover, focus halo and disabled as `Input`, filling its
+ * container, the chevron in the muted grey with room reserved for it, after an optional `prefix`
+ * mark (a `suffix` mark takes the chevron's place). Colour sits in one place: an error turns the
+ * ring red and fills the halo, and colours the message; the fill, the value and the label stay
+ * neutral. `label` and `error` draw the `Field` parts around the box, and a string `label` requires
+ * `id`; a box with no name does not compile. It opens the system's list, with native keyboard and
+ * typing. As an uncontrolled field it keeps a saved value instead of snapping back to the page's
+ * first default. "Validate on blur and pass a string to `error`; messages name the field and end in
+ * a period (`Select a framework.`)." (https://vercel.com/geist/select) Other form rules are
+ * `Field`'s.
+ * @words "Label is a short Title Case noun (`Framework`, `Region`); accept the prop directly on
+ * `<Select>`." (https://vercel.com/geist/select) "Options are Title Case when short and match
+ * canonical branding (`Next.js`, not `NextJS`); keep the same register across the list."
+ * (https://vercel.com/geist/select) Ours: the label names the thing chosen (*Time zone*) and
+ * options are sentence case. A placeholder option is distinct from a real one and never preselected
+ * as if chosen.
+ * @access A real `select` with a visible label tied by `id`, or `aria-label`. "Group options past
+ * ~10 items with native `<optgroup>`; Geist `<Select>` has no `.Group` static."
+ * (https://vercel.com/geist/select) Ours: option groups are `optgroup`. The chevron, the prefix and
+ * the suffix are decorative.
  */
-function NativeSelect({ className, size = "default", ref, ...props }) {
+function NativeSelect({ className, size = "default", prefix, suffix, label, description, error, ref, ...props }) {
     const select = React.useRef(null);
     const setRef = React.useCallback((node) => {
         select.current = node;
@@ -63,7 +79,7 @@ function NativeSelect({ className, size = "default", ref, ...props }) {
                 option.selected = shown.includes(option.value);
         appliedDefault.current = defaultKey;
     }, [defaultKey]);
-    return (_jsxs("div", { className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className), "data-slot": "native-select-wrapper", "data-size": size, children: [_jsx("select", { ref: setRef, "data-slot": "native-select", "data-size": size, className: "h-control-height min-h-touch-target w-full min-w-0 appearance-none rounded-sm border border-input bg-background py-1 pr-8 pl-control-padding-inline text-sm transition-colors select-none selection:bg-primary selection:text-primary-foreground placeholder:text-placeholder disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive data-[size=sm]:h-nadicode-control-height-sm data-[size=sm]:py-0.5 [@media(hover:hover)_and_(pointer:fine)]:min-h-0", ...props }), _jsx(ChevronDownIcon, { className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
+    return (_jsx(FieldFrame, { label: label, description: description, error: error, size: size, control: props, children: (aria) => (_jsxs("div", { className: cn("group/native-select relative w-full", className), "data-slot": "native-select-wrapper", "data-size": size, children: [prefix ? (_jsx("span", { "data-slot": "native-select-prefix", "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 left-control-padding-inline flex -translate-y-1/2 items-center text-muted-foreground [&_svg:not([class*='size-'])]:size-4", children: prefix })) : null, _jsx("select", { ref: setRef, "data-slot": "native-select", "data-size": size, "data-field-frame": "", className: cn("h-control-height min-h-touch-target w-full min-w-0 cursor-pointer appearance-none rounded-sm bg-(--nc-field,var(--background)) py-0 pr-9 pl-control-padding-inline text-sm select-none selection:bg-primary selection:text-primary-foreground data-[size=lg]:h-nadicode-control-height-lg data-[size=lg]:rounded-md data-[size=lg]:text-base data-[size=sm]:h-nadicode-control-height-sm [@media(hover:hover)_and_(pointer:fine)]:min-h-0", fieldRing, fieldStates, fieldDisabled, prefix ? "pl-10" : undefined), ...props, ...aria }), suffix ? (_jsx("span", { "data-slot": "native-select-suffix", "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 right-3 flex -translate-y-1/2 items-center text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-4", children: suffix })) : (_jsx(ChevronDownIcon, { className: "pointer-events-none absolute top-1/2 right-3 size-3.5 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" }))] })) }));
 }
 function NativeSelectOption({ className, ...props }) {
     return (_jsx("option", { "data-slot": "native-select-option", className: cn("bg-[Canvas] text-[CanvasText]", className), ...props }));

package/dist/components/notice-banner.d.ts

@@ -1,12 +1,19 @@
-import type { ComponentProps, ReactElement, ReactNode } from "react";
-export type NoticeBannerTone = "neutral" | "info" | "warning" | "destructive";
+import type { ComponentProps, ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import { type NoticeTone } from "../internal/notice.js";
+import type { PageCommand } from "./page-actions.js";
+export type NoticeBannerTone = NoticeTone;
 export type NoticeBannerLiveRegion = "off" | "polite";
 export type NoticeBannerProps = {
-    /** The fix the page offers, as a button or a link. Required: a condition is shown with its fix. */
-    action: ReactElement;
+    /** The one fix the page offers, drawn as an underlined link. Required: a condition is shown with its fix. */
+    action: PageCommand;
     className?: string;
     description?: ReactNode;
     detail?: ReactNode;
+    /** Replaces the tone's mark with another lucide icon. */
+    icon?: LucideIcon;
+    /** One or two words naming the topic, leading the title: "Billing", "Slack". */
+    label?: string;
     liveRegion: NoticeBannerLiveRegion;
     title: ReactNode;
     tone: NoticeBannerTone;
@@ -15,11 +22,11 @@ export type NoticeBannerProps = {
  * A condition of the whole page, the account or the service, with its fix.
  *
  * @family Feedback
- * @when A condition of the whole page, the account or the service that the page itself can resolve, with that resolving action on the banner. One at a time, above the page's content, under its title.
- * @instead For one section use `MessageNotice placement="section"`. For a measured level use a `KpiCard` with its tone; crossing a threshold is a notification in the inbox, not a banner.
- * @behaviour Tone `neutral` (the plain card fill), `info`, `warning`, `destructive`: a soft ground, deep text, the 1 px line edge, 6 px corners; neutral and info take the Info mark, warning and destructive the TriangleAlert. No close button on an unresolved condition. No action, no banner: `action` is required.
- * @words Title names the condition, description what it stops, the action the fix as verb and noun: "Open Slack settings", "Sign in". Sentence case, no "Please". The words come from the product's catalogue code.
- * @access `liveRegion="polite"` gives `role="status"`, announced once when it appears; `"off"` gives `role="note"` for one already there at load. The mark is hidden.
+ * @when "A prominent message that spans the full width of its container to announce important information." (https://vercel.com/geist/banner) "Used for temporary, project-wide notifications that require resolution" (https://vercel.com/geist/project-banner) "Use Project Banner for project-wide states that need resolution: overdue billing, an active rollback, attack mitigation, an expiring trial blocking deploys." (https://vercel.com/geist/project-banner) "Match `variant` to severity: `error` for critical downtime or payment-blocking states, `warning` for an exceptional state with non-immediate action, `success` for a positive temporary mitigation, `gray` for routine project-wide notices." (https://vercel.com/geist/project-banner) Ours: a condition of the whole page, the account or the service that the page itself can resolve, with that resolving action on the banner. The `tone` is the `variant`: `destructive` is `error`, `warning` is `warning`, `info` is `success` and `neutral` is `gray`. One sits above the page's content, under its title.
+ * @instead "Pick `Note` for inline contextual messages tied to a single field or card, `Toast` for transient acknowledgments, `Modal` for confirmations." (https://vercel.com/geist/project-banner) Ours: `Note` is `MessageNotice` (`placement="section"`), `Toast` is `showMessageToast` and `Modal` is `ConfirmDialog`. For a measured level use a `KpiCard` with its tone; crossing a threshold is a notification in the inbox, not a banner.
+ * @behaviour "Project Banner is non-dismissible by design. If the message can be dismissed without resolving the underlying state, it isn’t banner-worthy; move it to a `Note`." (https://vercel.com/geist/project-banner) "Show one Project Banner at a time. Stacking competing banners drowns the most urgent state." (https://vercel.com/geist/project-banner) "Always pass a `callToAction` that resolves the state. A banner with no route is a dead end." (https://vercel.com/geist/project-banner) Ours: a strip as wide as its container: a filled ground with a line on its top and bottom edge only, no corners, 40 px high and centred, with the mark, the sentence and the fix on one row; under 768 px the fix drops under the sentence, aligned with its text. Colour sits on the whole strip (ground, both lines, mark and text); the fix is an underlined link in the darkest step of the same hue (neutral: `text-foreground`) and returns to the strip's text on hover. Neutral and info take the Info mark, warning and destructive the TriangleAlert. `action` is the `callToAction`: one command, never two, never a ready-made button, and there is no close button. Required: `action`, `title`, `tone` and `liveRegion`; the mark is always drawn.
+ * @words "`label` is one sentence in sentence case that names the impact: `Your Pro trial expires in 3 days.` Don’t open with `Heads up` or apologetic preambles." (https://vercel.com/geist/project-banner) "`callToAction.label` is Title Case `Verb + Noun` and points at the resolver: `Update Payment Method`, `Reactivate Project`, `Review Tokens`." (https://vercel.com/geist/project-banner) "Name the affected entity when the project context isn’t obvious from the surrounding chrome (`Production deployments are paused on my-project`)." (https://vercel.com/geist/project-banner) "Don’t encode severity in the copy with emoji or interjections; the variant carries that signal." (https://vercel.com/geist/project-banner) "`NoteLabel` is a 1–2 word Title Case prefix that names the topic: `Region Change`, `Rate Limit`, `Plan Limit`. Cut hedges like `Heads Up`, `FYI`, and `Note`." (https://vercel.com/geist/note) Ours: the `title` is the `label`: the one sentence, naming the condition, its impact and the object. A `description` only adds what the title leaves out, in one more sentence. Our `label` is the `NoteLabel` topic prefix. The action is sentence case, verb and noun, pointing at the resolver: "Open Slack settings", "Update card". No "Please". The words come from the product's catalogue code.
+ * @access `liveRegion="polite"` gives `role="status"`, announced once when it appears; `"off"` gives `role="note"` for one already there at load. The mark, given or not, is hidden.
  */
-export declare function NoticeBanner({ action, className, description, detail, liveRegion, title, tone, ...props }: NoticeBannerProps): import("react").JSX.Element;
+export declare function NoticeBanner({ action, className, description, detail, icon, label, liveRegion, title, tone, ...props }: NoticeBannerProps): import("react").JSX.Element;
 //# sourceMappingURL=notice-banner.d.ts.map

package/dist/components/notice-banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notice-banner.d.ts","sourceRoot":"","sources":["../../src/components/notice-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;AAC9E,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,mGAAmG;IACnG,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC;CACxB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAEtD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,WAAW,EACX,MAAM,EACN,UAAU,EACV,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAyBnB"}
+{"version":3,"file":"notice-banner.d.ts","sourceRoot":"","sources":["../../src/components/notice-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAuC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAC1C,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,6GAA6G;IAC7G,MAAM,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC;CACxB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAGtD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,WAAW,EACX,MAAM,EACN,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA4CnB"}