@nanisoft/prism-ui 0.13.0 → 0.16.0

package/dist/components/ui/selection-toolbar.d.ts

@@ -0,0 +1,166 @@
+import { type ReactNode } from 'react';
+/**
+ * One command in a selection toolbar.
+ *
+ * A callback per command rather than one dispatch for the whole row, because a
+ * selection toolbar's commands are not interchangeable the way a split button's
+ * menu rows are: two of them may be destructive and one may need an argument the
+ * caller computes from its own selection, and a single `id` plus a switch at the
+ * call site would move that computation to the reader's keystroke.
+ */
+export type SelectionToolbarCommand = {
+    /**
+     * The caller's own identity for the command.
+     *
+     * Required and stable, for the reason every keyed list in this package says:
+     * a command keyed on a localised label remounts a control the moment the reader
+     * changes language, which drops the focus the Component just took pains to hold.
+     */
+    id: string;
+    /**
+     * The command's accessible name, in the product's own words.
+     *
+     * Required and a string, because a name a screen reader reads is a string.
+     * Commands here are almost always icon-only, and a row of unnamed icon buttons
+     * is announced as "button, button, button", which is three controls nobody can
+     * tell apart in a toolbar whose whole job is that they differ.
+     */
+    label: string;
+    /**
+     * The mark for the command.
+     *
+     * A `ReactNode` and not an icon name, because the vocabulary a product uses for
+     * its own rows is its own. Pass an `svg` or an `img` and keep it `aria-hidden`,
+     * because `label` already names the control.
+     */
+    icon?: ReactNode;
+    /** Whether the command refuses the press and stays in the walk. */
+    disabled?: boolean;
+    /**
+     * Runs the command against the caller's selection.
+     *
+     * Required, and the caller owns everything inside it: reading what is selected,
+     * doing it, and clearing or keeping the selection afterwards. Prism calls it
+     * and does not touch the selection, because the selection is a claim about the
+     * caller's data and a Component that rewrote it would be rewriting rows it
+     * cannot see.
+     */
+    onRun: () => void;
+};
+/**
+ * The props the Selection toolbar accepts.
+ *
+ * A declared interface rather than a forwarded native one, because the Component
+ * draws a `toolbar` and its own commands, so a forwarded `onKeyDown` would be a
+ * second place the arrow-key model lives and a forwarded `children` would be a
+ * second way to say what the row contains.
+ */
+export interface SelectionToolbarProps {
+    /**
+     * What is selected, read at the leading end of the row.
+     *
+     * Required, and passing `null` is how the caller says there is no selection, in
+     * which case this Component renders nothing at all. That is the whole of the
+     * appearing half and it is a decision rather than a prop: a toolbar for nothing
+     * is a row of controls that do nothing, and a caller who mounts one permanently
+     * so it can appear later has paid for it on every page that never selects
+     * anything. The cost is that the caller has to hold the sentence rather than
+     * only the number, because "3 selected" and "Drei ausgewahlt" are one string
+     * in one language, and no Component here may compose the two.
+     */
+    label: ReactNode;
+    /**
+     * The commands, in the order the arrow keys walk them.
+     *
+     * Required, and the order is the caller's because it is a claim about how often
+     * each is used. Nothing is drawn between them: no separators and no groups, so
+     * the order is the only grouping the row has.
+     */
+    commands: readonly SelectionToolbarCommand[];
+    /**
+     * The accessible name of the dismiss control.
+     *
+     * Required, and the reason is the one `Toast` states for its close control: a
+     * control the reader reaches towards has to say what it is before they press
+     * it, and four products in at least two languages cannot all be told it says
+     * "Clear selection".
+     */
+    dismissLabel: string;
+    /**
+     * Called when the reader asks for the selection to end.
+     *
+     * Required, and Prism does not clear the selection itself. The selection lives
+     * in the caller's rows, in its own checkboxes or its own table state, and a
+     * Component that unchecked them would be writing to data it was handed as a
+     * count. The caller unmounts the toolbar by clearing the selection, which is
+     * also why `label={null}` is how it leaves rather than a `hidden` prop.
+     */
+    onDismiss: () => void;
+    /** Layout only. Changing a Prism-owned visual property from here is prohibited. */
+    className?: string;
+}
+/**
+ * A toolbar that exists because something is selected, and acts on it.
+ *
+ * **It is a different Component from `TextFormatToolbar`, and the two disagree
+ * about focus.** That is the argument, and it is a disagreement rather than a
+ * difference of content: a text format toolbar **must** refuse to move focus on a
+ * press, because focus leaving a `contenteditable` collapses its selection in
+ * several engines and the command would act on nothing, so it takes a
+ * `getEditor` and hands focus back after every command. A selection toolbar over
+ * rows **must let** focus move, because a keyboard reader has to Tab back to the
+ * list to change what is selected, and a row's checkbox has to be able to receive
+ * focus to be unchecked. One Component could not do both, and a
+ * `preserveFocus` boolean over the two would be a prop whose two answers are "this
+ * is the Component for a caret" and "this is the Component for a set of rows",
+ * which is the kind of prop that makes a catalogue a second list of call sites.
+ * So the roles are the same and the focus contract is the Component.
+ *
+ * **It renders nothing when nothing is selected, and the cost is the caller
+ * holding the sentence.** See `label`. A Component that counted for itself would
+ * need a `count` and a plural rule, and the plural rule is a language question:
+ * English puts the noun in the middle, Polish puts it in the genitive and adds
+ * three forms, and no Component here may know any of that. The caller passes the
+ * finished words and this Component never invents one.
+ *
+ * **Unavailable is drawn and walked, not removed and not the native `disabled`.**
+ * A command that cannot run keeps its place in the row and in the arrow-key walk,
+ * carries `aria-disabled`, and refuses the press in its handler, which is the
+ * arrangement `Dropzone` states in full: a control that vanishes leaves a
+ * keyboard reader with a gap and no announcement, and a natively disabled one
+ * leaves a hole they have to interpret. The cost is that the row is wider than
+ * the set of things a reader can do about the selection they have made.
+ *
+ * **The commands are drawn, and the selection is not read.** Prism never calls
+ * `window.getSelection` and never asks what is selected, for the same reason
+ * `TextFormatToolbar` does not: the rows may be a table, a grid, a card list or
+ * something behind a consumer's own state, and the DOM selection a browser would
+ * report is either absent or a fiction. So the caller owns whether a command can
+ * run, what running it does, and what happens to the selection afterwards, and
+ * this Component's entire claim about the selection is that it exists while there
+ * is one and says how much of it there is.
+ *
+ * **The dismiss control is a second command and not a property of the row.** A
+ * selection ends by the reader saying so, and a row that could not be ended would
+ * leave a reader who selected the wrong eleven rows with no way back that does not
+ * involve the checkboxes. It is a real button with its own name rather than a
+ * drawn affordance, so the cost is one more stop in a row whose commands are
+ * otherwise the caller's.
+ *
+ * **The row is named by the label it already draws.** `aria-labelledby` on the
+ * leading label rather than an `aria-label`, because `label` is a `ReactNode` and
+ * there is no string here to put in an `aria-label`, while a reference reads the
+ * rendered words. So a reader tabbing onto the row hears the selection and the
+ * commands in one announcement, and the two cannot drift apart.
+ * `TextFormatToolbar` states the same rule from the other end, where its name is a
+ * string and `aria-label` is what takes it.
+ *
+ * **It is a client Component**, because it holds the one tab stop the `toolbar`
+ * role promises, walks it with four keys, and takes the dismissal callback. What
+ * that costs is that a server-rendered page cannot show a selection toolbar at all,
+ * which is correct, because a selection is something a reader did and a server has
+ * not heard about it yet.
+ */
+declare function SelectionToolbar({ label, commands, dismissLabel, onDismiss, className, }: SelectionToolbarProps): import("react").JSX.Element | null;
+export { SelectionToolbar };
+//# sourceMappingURL=selection-toolbar.d.ts.map

package/dist/components/ui/selection-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/selection-toolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA+C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKnF;;;;;;;;GAQG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;;;;;OAMG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;;;;;;;;;OAWG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,QAAQ,EAAE,SAAS,uBAAuB,EAAE,CAAA;IAC5C;;;;;;;OAOG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB;;;;;;;;OAQG;IACH,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAkBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,GACV,EAAE,qBAAqB,sCA+GvB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/selection-toolbar.js

@@ -0,0 +1,139 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from 'lucide-react';
+import { useId, useRef, useState } from 'react';
+import { Button } from './button.js';
+import { cn } from '../../lib/utils.js';
+/** The drawn commands, read back for the arrow-key walk. */
+const COMMAND_SLOT = '[data-slot="selection-toolbar-command"]';
+/**
+ * Whether the caller says there is nothing selected.
+ *
+ * The test is "renders nothing" rather than a list of the nothing values, for the
+ * reason `LiveRegion` states in full: a caller passing an empty string, a null
+ * from a state that has not resolved and a false from a condition are three
+ * routes to the same state, and a list of three is a list a fourth route would
+ * miss.
+ */
+function isNothing(label) {
+    return label === undefined || label === null || label === false || label === '';
+}
+/**
+ * A toolbar that exists because something is selected, and acts on it.
+ *
+ * **It is a different Component from `TextFormatToolbar`, and the two disagree
+ * about focus.** That is the argument, and it is a disagreement rather than a
+ * difference of content: a text format toolbar **must** refuse to move focus on a
+ * press, because focus leaving a `contenteditable` collapses its selection in
+ * several engines and the command would act on nothing, so it takes a
+ * `getEditor` and hands focus back after every command. A selection toolbar over
+ * rows **must let** focus move, because a keyboard reader has to Tab back to the
+ * list to change what is selected, and a row's checkbox has to be able to receive
+ * focus to be unchecked. One Component could not do both, and a
+ * `preserveFocus` boolean over the two would be a prop whose two answers are "this
+ * is the Component for a caret" and "this is the Component for a set of rows",
+ * which is the kind of prop that makes a catalogue a second list of call sites.
+ * So the roles are the same and the focus contract is the Component.
+ *
+ * **It renders nothing when nothing is selected, and the cost is the caller
+ * holding the sentence.** See `label`. A Component that counted for itself would
+ * need a `count` and a plural rule, and the plural rule is a language question:
+ * English puts the noun in the middle, Polish puts it in the genitive and adds
+ * three forms, and no Component here may know any of that. The caller passes the
+ * finished words and this Component never invents one.
+ *
+ * **Unavailable is drawn and walked, not removed and not the native `disabled`.**
+ * A command that cannot run keeps its place in the row and in the arrow-key walk,
+ * carries `aria-disabled`, and refuses the press in its handler, which is the
+ * arrangement `Dropzone` states in full: a control that vanishes leaves a
+ * keyboard reader with a gap and no announcement, and a natively disabled one
+ * leaves a hole they have to interpret. The cost is that the row is wider than
+ * the set of things a reader can do about the selection they have made.
+ *
+ * **The commands are drawn, and the selection is not read.** Prism never calls
+ * `window.getSelection` and never asks what is selected, for the same reason
+ * `TextFormatToolbar` does not: the rows may be a table, a grid, a card list or
+ * something behind a consumer's own state, and the DOM selection a browser would
+ * report is either absent or a fiction. So the caller owns whether a command can
+ * run, what running it does, and what happens to the selection afterwards, and
+ * this Component's entire claim about the selection is that it exists while there
+ * is one and says how much of it there is.
+ *
+ * **The dismiss control is a second command and not a property of the row.** A
+ * selection ends by the reader saying so, and a row that could not be ended would
+ * leave a reader who selected the wrong eleven rows with no way back that does not
+ * involve the checkboxes. It is a real button with its own name rather than a
+ * drawn affordance, so the cost is one more stop in a row whose commands are
+ * otherwise the caller's.
+ *
+ * **The row is named by the label it already draws.** `aria-labelledby` on the
+ * leading label rather than an `aria-label`, because `label` is a `ReactNode` and
+ * there is no string here to put in an `aria-label`, while a reference reads the
+ * rendered words. So a reader tabbing onto the row hears the selection and the
+ * commands in one announcement, and the two cannot drift apart.
+ * `TextFormatToolbar` states the same rule from the other end, where its name is a
+ * string and `aria-label` is what takes it.
+ *
+ * **It is a client Component**, because it holds the one tab stop the `toolbar`
+ * role promises, walks it with four keys, and takes the dismissal callback. What
+ * that costs is that a server-rendered page cannot show a selection toolbar at all,
+ * which is correct, because a selection is something a reader did and a server has
+ * not heard about it yet.
+ */
+function SelectionToolbar({ label, commands, dismissLabel, onDismiss, className, }) {
+    const rootRef = useRef(null);
+    // The name of the toolbar, taken from the label the reader can already see.
+    //
+    // The visible label is a `ReactNode` because the count is a sentence in the
+    // caller's language and this Component may not compose one, so the name cannot be
+    // an `aria-label`: there is no string here to put in one. `aria-labelledby` reads
+    // the rendered text of the element it points at, which is the arrangement
+    // `ChoiceCard` uses for its legend and for the same reason, and it has the second
+    // property that matters, which is that the name and the words cannot drift apart.
+    const labelId = useId();
+    // The one tab stop the `toolbar` role promises, held as a position so a caller
+    // who reorders the commands does not strand the reader on a command that moved.
+    const [active, setActive] = useState(0);
+    // Clamped to the row, because a caller who removes commands can leave the
+    // remembered position past the end and a toolbar with no tab stop is a toolbar a
+    // keyboard reader has to step over.
+    const stop = active < commands.length ? active : 0;
+    if (isNothing(label))
+        return null;
+    const focusCommand = (index) => {
+        const count = commands.length;
+        if (count === 0)
+            return;
+        // Wrapping is the toolbar model rather than the list model: a reader who
+        // arrows off the right end expects the row to continue, because a row that
+        // stops is a row they have to Tab out of and back into to reach the first
+        // command again.
+        const next = ((index % count) + count) % count;
+        setActive(next);
+        const command = rootRef.current?.querySelectorAll(COMMAND_SLOT).item(next);
+        command?.focus();
+    };
+    const onKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                focusCommand(active + 1);
+                return;
+            case 'ArrowLeft':
+                event.preventDefault();
+                focusCommand(active - 1);
+                return;
+            case 'Home':
+                event.preventDefault();
+                focusCommand(0);
+                return;
+            case 'End':
+                event.preventDefault();
+                focusCommand(commands.length - 1);
+                return;
+            default:
+        }
+    };
+    return (_jsxs("div", { ref: rootRef, "data-slot": "selection-toolbar", role: "toolbar", "aria-labelledby": labelId, "aria-orientation": "horizontal", onKeyDown: onKeyDown, className: cn('bg-card flex w-full items-center gap-1 rounded-md border p-1', className), children: [_jsx("span", { id: labelId, "data-slot": "selection-toolbar-label", className: "text-muted-foreground px-2 text-sm font-medium", children: label }), commands.map((command, index) => (_jsx(Button, { "data-slot": "selection-toolbar-command", type: "button", variant: "ghost", size: "sm", tabIndex: index === stop ? 0 : -1, "aria-label": command.label, "aria-disabled": command.disabled || undefined, onClick: command.disabled ? () => undefined : command.onRun, children: command.icon }, command.id))), _jsx(Button, { "data-slot": "selection-toolbar-dismiss", type: "button", variant: "ghost", size: "sm", "aria-label": dismissLabel, onClick: onDismiss, children: _jsx(XIcon, { "aria-hidden": "true" }) })] }));
+}
+export { SelectionToolbar };

package/dist/components/ui/sidebar.d.ts

@@ -185,6 +185,26 @@ export interface SidebarFooterProps extends ComponentProps<'div'> {
  * `useState` and the same context around it. The toggle is a part rather than a
  * built-in control, so a product puts it in the rail's header or its footer
  * without the Component deciding where a rail's controls belong.
+ *
+ * **The rail animates `width` and not a transform, and this is the one place in
+ * this package that could not be moved.** `Progress` and `RangeField` both express
+ * their value as a `scaleX` about the inline start, because a bar and a band are
+ * shapes: scaling one squashes its own corner radius and nothing else, and both
+ * Components say so and accept the trade. A rail is not a shape. It carries a
+ * brand mark, a list of items with a 16px icon, the item's own label, and a
+ * trailing count, and a `scaleX` scales every one of them: the icons become ovals,
+ * the labels become condensed, and the counts are unreadable at exactly the moment
+ * the rail is moving. A transform cannot reflow text, which is the whole reason a
+ * rail is animated at all: at `scaleX(0.25)` the labels are still laid out for a
+ * 16rem column, so the rail's contents would never reflow into the 4rem column they
+ * are supposed to occupy. The property has to be the one that reflows them.
+ *
+ * So the rail keeps `transition-[width]` and is the named exception rather than an
+ * unexplained gap, and the cost is stated rather than argued away: it is a layout
+ * animation on the main thread, over a column that is one element with a small
+ * subtree, once per reader's click. That is a different order of cost from a bar
+ * that advances on every frame of a running job, which is why the two were not the
+ * same decision.
  */
 declare function Sidebar({ collapsed: controlled, defaultCollapsed, onCollapsedChange, id, children, className, ...props }: SidebarProps): import("react").JSX.Element;
 /**
@@ -222,6 +242,15 @@ declare function SidebarItem({ label, href, onClick, icon, current, children, ne
  * a workspace switcher for the same row. It points at the rail by id, so the
  * region it controls is the element the rail actually rendered rather than a name
  * that has drifted from it.
+ *
+ * **`pointer-coarse:size-11` is the coarse-pointer floor, as a step.** A band was
+ * rejected on condition 1 for the same reason `dialog.tsx` rejects one: this control
+ * is the one thing in the rail's header row, so there is no neighbouring control for
+ * a band to reach, and there is no inset to overhang either. `SidebarHeader` is
+ * `p-3` open and `p-2` collapsed with no fixed height, so growing the toggle by
+ * twelve pixels grows the header by twelve and moves nothing. The collapsed rail is
+ * `w-16`, so a 44px control centred in it by `mx-auto` still has ten pixels of air on
+ * each side. See DESIGN.md, The coarse-pointer floor.
  */
 declare function SidebarToggle({ collapseLabel, expandLabel, className, ...props }: SidebarToggleProps): import("react").JSX.Element;
 export { Sidebar, SidebarHeader, SidebarNav, SidebarItem, SidebarFooter, SidebarToggle };

package/dist/components/ui/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/sidebar.js

@@ -77,6 +77,26 @@ const ITEM_FILL = {
  * `useState` and the same context around it. The toggle is a part rather than a
  * built-in control, so a product puts it in the rail's header or its footer
  * without the Component deciding where a rail's controls belong.
+ *
+ * **The rail animates `width` and not a transform, and this is the one place in
+ * this package that could not be moved.** `Progress` and `RangeField` both express
+ * their value as a `scaleX` about the inline start, because a bar and a band are
+ * shapes: scaling one squashes its own corner radius and nothing else, and both
+ * Components say so and accept the trade. A rail is not a shape. It carries a
+ * brand mark, a list of items with a 16px icon, the item's own label, and a
+ * trailing count, and a `scaleX` scales every one of them: the icons become ovals,
+ * the labels become condensed, and the counts are unreadable at exactly the moment
+ * the rail is moving. A transform cannot reflow text, which is the whole reason a
+ * rail is animated at all: at `scaleX(0.25)` the labels are still laid out for a
+ * 16rem column, so the rail's contents would never reflow into the 4rem column they
+ * are supposed to occupy. The property has to be the one that reflows them.
+ *
+ * So the rail keeps `transition-[width]` and is the named exception rather than an
+ * unexplained gap, and the cost is stated rather than argued away: it is a layout
+ * animation on the main thread, over a column that is one element with a small
+ * subtree, once per reader's click. That is a different order of cost from a bar
+ * that advances on every frame of a running job, which is why the two were not the
+ * same decision.
  */
 function Sidebar({ collapsed: controlled, defaultCollapsed = false, onCollapsedChange, id, children, className, ...props }) {
     const [internal, setInternal] = useState(defaultCollapsed);
@@ -100,7 +120,11 @@ function Sidebar({ collapsed: controlled, defaultCollapsed = false, onCollapsedC
             // The width is the state feedback, and it is the only motion on the
             // rail: a rail that collapsed and looked identical teaches a reader
             // that the control did nothing.
-            'transition-[width] duration-base ease-out', collapsed ? 'w-16' : 'w-64', className), ...props, children: children }) }));
+            //
+            // `duration-slow` because this is a layout animation, which is the case
+            // `DESIGN.md`'s motion scale assigns `slow` to. The items in the rail
+            // stay on `duration-fast` for colour, because colour is the other case.
+            'transition-[width] duration-slow ease-out', collapsed ? 'w-16' : 'w-64', className), ...props, children: children }) }));
 }
 /**
  * The space at the top of the rail, for a brand or a workspace switcher.
@@ -164,9 +188,18 @@ function SidebarItem({ label, href, onClick, icon, current = false, children, ne
  * a workspace switcher for the same row. It points at the rail by id, so the
  * region it controls is the element the rail actually rendered rather than a name
  * that has drifted from it.
+ *
+ * **`pointer-coarse:size-11` is the coarse-pointer floor, as a step.** A band was
+ * rejected on condition 1 for the same reason `dialog.tsx` rejects one: this control
+ * is the one thing in the rail's header row, so there is no neighbouring control for
+ * a band to reach, and there is no inset to overhang either. `SidebarHeader` is
+ * `p-3` open and `p-2` collapsed with no fixed height, so growing the toggle by
+ * twelve pixels grows the header by twelve and moves nothing. The collapsed rail is
+ * `w-16`, so a 44px control centred in it by `mx-auto` still has ten pixels of air on
+ * each side. See DESIGN.md, The coarse-pointer floor.
  */
 function SidebarToggle({ collapseLabel, expandLabel, className, ...props }) {
     const { collapsed, id, toggle } = useSidebarState();
-    return (_jsx("button", { type: "button", "data-slot": "sidebar-toggle", "data-collapsed": collapsed, "aria-expanded": !collapsed, "aria-controls": id, "aria-label": collapsed ? expandLabel : collapseLabel, onClick: toggle, className: cn('text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-sidebar-ring focus-visible:ring-[3px] flex size-8 shrink-0 items-center justify-center rounded-md', 'transition-colors duration-fast ease-out', collapsed && 'mx-auto', className), ...props, children: collapsed ? (_jsx(PanelLeftOpen, { className: "size-4", "aria-hidden": "true" })) : (_jsx(PanelLeftClose, { className: "size-4", "aria-hidden": "true" })) }));
+    return (_jsx("button", { type: "button", "data-slot": "sidebar-toggle", "data-collapsed": collapsed, "aria-expanded": !collapsed, "aria-controls": id, "aria-label": collapsed ? expandLabel : collapseLabel, onClick: toggle, className: cn('text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-sidebar-ring focus-visible:ring-[3px] flex size-8 shrink-0 items-center justify-center rounded-md', 'transition-colors duration-fast ease-out', 'pointer-coarse:size-11', collapsed && 'mx-auto', className), ...props, children: collapsed ? (_jsx(PanelLeftOpen, { className: "size-4", "aria-hidden": "true" })) : (_jsx(PanelLeftClose, { className: "size-4", "aria-hidden": "true" })) }));
 }
 export { Sidebar, SidebarHeader, SidebarNav, SidebarItem, SidebarFooter, SidebarToggle };

package/dist/components/ui/signal-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"signal-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/signal-field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAwCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,iBAAS,WAAW,CAAC,EACnB,KAAU,EACV,UAAU,EACV,KAAK,EACL,UAAiB,EACjB,KAAa,EACb,SAAS,GACV,EAAE,gBAAgB,+BA0ClB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"signal-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/signal-field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAwCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,iBAAS,WAAW,CAAC,EACnB,KAAU,EACV,UAAU,EACV,KAAK,EACL,UAAiB,EACjB,KAAa,EACb,SAAS,GACV,EAAE,gBAAgB,+BA2ClB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/signal-field.js

@@ -72,6 +72,6 @@ function SignalField({ count = 28, emphasisAt, label, decorative = true, drift =
                     '--ambient-drift-x': `${(index % 2 === 0 ? 1 : -1) * (0.4 + (index % 5) * 0.15)}rem`,
                     '--ambient-drift-y': `${(index % 3 === 0 ? 1 : -1) * 0.35}rem`,
                 }
-                : undefined }))) }));
+                : undefined }, index))) }));
 }
 export { SignalField };

package/dist/components/ui/slider.d.ts

@@ -37,6 +37,13 @@ export interface SliderProps extends Omit<ComponentProps<'div'>, 'onChange'> {
  * ends. Give it an `aria-label` or a visible label. Use a Slider for a value
  * that is approximate and continuous; when the exact number matters, use an
  * Input of type number.
+ *
+ * The thumb is 16px for a mouse and a trackpad and takes the 44px coarse-pointer
+ * floor on touch input as a transparent band around itself, so the dot you see and
+ * the dot you grab are the same size on every pointer. A press inside the band
+ * drags the thumb from where it was rather than jumping the value to where you
+ * pressed, which is the trade the floor costs on a six pixel rail; the arrow keys
+ * and the range input behind the track still reach every value.
  */
 declare function Slider({ className, 'aria-label': ariaLabel, ...props }: SliderProps): import("react").JSX.Element;
 export { Slider };

package/dist/components/ui/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1E,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED;;;;;;;;GAQG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,WAAW,+BAiCb;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1E,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,WAAW,+BAyDb;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/ui/slider.js

@@ -10,6 +10,13 @@ import { cn } from '../../lib/utils.js';
  * ends. Give it an `aria-label` or a visible label. Use a Slider for a value
  * that is approximate and continuous; when the exact number matters, use an
  * Input of type number.
+ *
+ * The thumb is 16px for a mouse and a trackpad and takes the 44px coarse-pointer
+ * floor on touch input as a transparent band around itself, so the dot you see and
+ * the dot you grab are the same size on every pointer. A press inside the band
+ * drags the thumb from where it was rather than jumping the value to where you
+ * pressed, which is the trade the floor costs on a six pixel rail; the arrow keys
+ * and the range input behind the track still reach every value.
  */
 function Slider({ className, 'aria-label': ariaLabel, ...props }) {
     return (_jsx(SliderPrimitive.Root, { "data-slot": "slider", className: cn('relative flex w-full touch-none items-center select-none', 'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col', 'data-[disabled]:opacity-50', className), ...props, children: _jsxs(SliderPrimitive.Control, { className: "flex w-full items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", children: [_jsx(SliderPrimitive.Track, { className: "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5", children: _jsx(SliderPrimitive.Indicator, { className: "bg-primary absolute rounded-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" }) }), _jsx(SliderPrimitive.Thumb, { "aria-label": ariaLabel, className: cn(
@@ -18,6 +25,30 @@ function Slider({ className, 'aria-label': ariaLabel, ...props }) {
                     // compliant ring and never sees that half strength fails 3:1. This thumb is
                     // the element the JSDoc above says stays focusable, so it is the one
                     // indicator a keyboard user has. See the comment on the Button's base class.
-                    'border-primary bg-background shadow-xs ring-ring block size-4 shrink-0 rounded-full border outline-none', 'transition-[color,box-shadow] duration-fast ease-out', 'hover:ring-4 focus-visible:ring-4', 'data-[disabled]:pointer-events-none') })] }) }));
+                    'border-primary bg-background shadow-xs ring-ring block size-4 shrink-0 rounded-full border outline-none', 
+                    // The 44px coarse-pointer floor, and here it is a band rather than a step.
+                    //
+                    // The two obvious steps are both wrong for a thumb. Growing the dot to 44px
+                    // puts a ball the size of a switch on a 6px track, and Base UI positions the
+                    // thumb with `left: <percent>%` plus a `translate`, so the value would not
+                    // move, but the drawing would: a slider whose handle is seven times the
+                    // thickness of its own rail reads as a different control. A band reaches the
+                    // same 44px with the 16px dot untouched.
+                    //
+                    // The band is safe here because nothing sits within fourteen pixels of a
+                    // thumb to be swallowed by it. It does overlap the track, and that is the
+                    // trade rather than an oversight: a press inside the band grabs the thumb and
+                    // drags it from where it was, where a press on the bare track 10px away would
+                    // have jumped the value to that point. On a coarse pointer the drag is the
+                    // model, a 6px rail cannot be tapped to a chosen value by anyone, and the
+                    // keyboard still reaches every value through the range input behind it.
+                    //
+                    // Nothing about the value maths moves, and that is a claim about Base UI
+                    // rather than about this class string. It reads the press offset from
+                    // `getMidpoint(thumb)`, and it computes the value from the control's own
+                    // `getBoundingClientRect()`, so a pseudo-element, which contributes to neither
+                    // box, cannot shift either. `slider.test.tsx` asserts that the value still
+                    // tracks a pointer press at a given coordinate.
+                    'transition-[color,box-shadow] duration-fast ease-out', 'hover:ring-4 focus-visible:ring-4', 'data-[disabled]:pointer-events-none', 'pointer-coarse:before:absolute pointer-coarse:before:left-1/2 pointer-coarse:before:top-1/2 pointer-coarse:before:h-11 pointer-coarse:before:w-11 pointer-coarse:before:-translate-x-1/2 pointer-coarse:before:-translate-y-1/2 pointer-coarse:before:content-[""]') })] }) }));
 }
 export { Slider };

package/dist/components/ui/sparkline.d.ts

@@ -0,0 +1,117 @@
+import type { ComponentProps } from 'react';
+import type { ChartColor } from './chart-frame.js';
+/** The props the Sparkline accepts. */
+export interface SparklineProps extends Omit<ComponentProps<'figure'>, 'children'> {
+    /**
+     * The readings, in order, in the caller's own units.
+     *
+     * Raw magnitudes rather than percentages of a maximum, for the reason
+     * `PulseSeries` gives for its columns and the reason `ChartFrame` gives for its
+     * scale: a caller that pre-normalises has two chances to get the axis wrong, and
+     * a mislabelled axis is a lie with a typeface on it. The tallest reading sets
+     * the top of the box here, and the smallest sets the bottom.
+     */
+    values: readonly number[];
+    /**
+     * The name of the series, and the only thing a screen reader reads before the
+     * numbers.
+     *
+     * Required rather than defaulted, and required for the same two reasons
+     * `ChartFrame` gives: two sparklines in a table of numbers are two pictures a
+     * reader cannot tell apart, and a picture with no name is not announced and not
+     * linkable. A sparkline named "Chart" is a Component shipping a sentence about a
+     * product it knows nothing about.
+     */
+    label: string;
+    /**
+     * The role the line is drawn in. @defaultValue 'chart-1'
+     *
+     * One of the five the token contract publishes, and never a raw colour: a
+     * series colour is a claim about what a thing is, and a Component that knows
+     * nothing about the caller's product has no business choosing one, so the caller
+     * chooses and gets the same ink in every pack and both modes. The default is
+     * `chart-1` because a sparkline is usually alone in its cell and has no series
+     * to be distinguished from.
+     */
+    tone?: ChartColor;
+    /**
+     * The width of the box, in pixels. @defaultValue 96
+     *
+     * A number in pixels rather than a token, and the cost is that a sparkline is
+     * not fluid: one in a column that resizes does not resize with it. The reason is
+     * that a sparkline lives in a table cell or a list row, where its job is to sit
+     * at one size in a column of rows and line up with the figures beside it, and a
+     * percentage of a fluid cell would make every row a different width.
+     */
+    width?: number;
+    /**
+     * The height of the box, in pixels. @defaultValue 24
+     *
+     * Two dozen pixels because a sparkline is a mark, not a plot: it is read beside
+     * its number rather than examined, and a box tall enough to read an axis would
+     * be a chart, which is `ChartFrame`.
+     */
+    height?: number;
+    /**
+     * Whether the last reading takes a mark.
+     *
+     * Off by default, because a line with a dot on its end is a claim that the end
+     * is special. On when the series is a live reading, where the last value is the
+     * one the reader came for and the shape behind it is context.
+     */
+    emphasizeLast?: boolean;
+}
+/**
+ * A series drawn small enough to sit in a cell, and the numbers behind it.
+ *
+ * **It is decorative and described, and both halves are needed.** The drawing is
+ * `aria-hidden` and carries no information a reader can use on its own: a
+ * 96-pixel line with no axis, no labels and no legend is a shape, and a shape a
+ * reader cannot query is the failure a chart exists to prevent. So the values are
+ * also rendered as a table in a visually hidden wrapper, generated from the same
+ * array the line is drawn from, which means a screen reader reaches every number,
+ * a reader's own table navigation can walk it, and a crawler indexing the page
+ * finds the figures rather than a picture. That is the honest answer for a figure
+ * whose entire claim is its shape, and the cost is real: a table of two hundred
+ * rows in the document for a sparkline that occupies ninety-six pixels.
+ *
+ * **The table has no column headings, and that is a gap with a reason.** The
+ * positions are numbered rather than named, because this Item has no words for
+ * what a position is called and inventing "Time" or "Index" would be a claim
+ * about the caller's data. The row head carries the position, the cell carries the
+ * number, and the caption is the caller's own `label`. A caller whose readings
+ * have names, a category axis, a legend, a second series or a visible table is
+ * looking for `ChartFrame`, which is the Component that has room for all of it.
+ *
+ * **Two inputs throw rather than draw, because a drawn lie is worse than a
+ * refusal.** An empty `values` array is a frame with no claim in it, and a series
+ * whose readings are all the same number is a straight stroke with no information
+ * in it. A reader cannot tell a flat line from a broken chart, and the only thing
+ * that separates them is a diagnostic the caller sees. The alternative was to draw
+ * a horizontal line, which is what a charting library does, and which answers
+ * "the data is flat" with a picture that also answers "the chart is broken".
+ *
+ * **A line is scaled to its own range, with no floor at zero, and the cost is
+ * named here.** A bar has to start at zero or its length is not a measurement,
+ * which is why `ChartFrame` floors every scale. A line is read for the shape
+ * between its points, and a series between 900 and 1,000 floored at zero is a
+ * flat line drawn faithfully, which is a picture that hides the thing it was put
+ * there to show. So the range is the data's own. The price is that a series that
+ * moves by two percent looks dramatic, and the answer is the table, which carries
+ * the numbers at the precision the caller gave them.
+ *
+ * **The geometry is `ChartFrame`'s geometry.** The `<svg>` has no `viewBox` and
+ * its coordinates are percentages of the box, so the stroke is pixels rather than
+ * user units and a two-pixel line is two pixels in every box size, and one
+ * `<line>` is drawn per pair of readings rather than a `polyline`, because a
+ * `points` attribute is a list of coordinate pairs joined by a space and a
+ * Component here ships no word-shaped literal. The tone is a semantic utility from
+ * the contract, so a scoped pack boundary restyles the line through the cascade
+ * rather than through a value the drawing is holding.
+ *
+ * It is a server Component. No hook, no state, and the line is arithmetic over
+ * props, so a dashboard full of sparklines costs no client code at all.
+ */
+declare function Sparkline({ className, values, label, tone, width, height, emphasizeLast, ...props }: SparklineProps): import("react").JSX.Element;
+export { Sparkline };
+//# sourceMappingURL=sparkline.d.ts.map

package/dist/components/ui/sparkline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AA2C/C,uCAAuC;AACvC,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IAChF;;;;;;;;OAQG;IACH,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB;;;;;;;;;OASG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,MAAM,EACN,KAAK,EACL,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,aAAqB,EACrB,GAAG,KAAK,EACT,EAAE,cAAc,+BA6FhB;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}