@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/toggle-group.d.ts

@@ -0,0 +1,127 @@
+import { type ComponentProps, type ReactNode } from 'react';
+/** How many members of a ToggleGroup may be pressed at once. */
+export type ToggleGroupSelectionMode = 'single' | 'multiple';
+/** The props the ToggleGroup accepts. */
+export interface ToggleGroupProps extends Omit<ComponentProps<'div'>, 'onChange' | 'children'> {
+    /** The members, as `ToggleGroupItem` elements. */
+    children?: ReactNode;
+    /**
+     * Whether one member or several may be pressed.
+     *
+     * This is the caller's decision and it is a real one, which is why it is a prop
+     * with two values rather than two Components. See the group's JSDoc for what
+     * each mode means in the accessibility tree, because the two are not the same
+     * control wearing two looks.
+     */
+    selectionMode?: ToggleGroupSelectionMode;
+    /** The pressed values, when the group is controlled. */
+    value?: readonly string[];
+    /** The pressed values to start with, for an uncontrolled group. */
+    defaultValue?: readonly string[];
+    /** Called with the group's whole set of pressed values when it changes. */
+    onValueChange?: (value: readonly string[]) => void;
+    /** Whether every member ignores user interaction. */
+    disabled?: boolean;
+    /**
+     * The group's accessible name.
+     *
+     * Required, and required by the type rather than only by this paragraph, which is
+     * the whole of the change: it was declared optional while the sentence beneath it
+     * said "Required rather than defaulted", so TypeScript enforced nothing and the
+     * group shipped unnamed. Both roles this Component draws are ones ARIA names a
+     * MUST for, and both announce as their bare role name when unnamed: a reader
+     * tabbing onto a toolbar with two of them is told "toolbar" and has no way to ask
+     * which set of controls they have reached, and a radiogroup with no name says
+     * nothing about which question its radios are answering. `TextFormatToolbar` draws
+     * the same role with a required `label`, which is the shape this now matches.
+     *
+     * The name is the caller's word, for the reason every region's name in this package
+     * is. `aria-labelledby` also arrives through `...props`, so a caller whose name is
+     * already drawn somewhere can point at it rather than repeat it.
+     */
+    'aria-label': string;
+    /** The direction the arrow keys move in. @defaultValue 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Layout only. */
+    className?: string;
+}
+/** The props the ToggleGroupItem accepts. */
+export interface ToggleGroupItemProps extends Omit<ComponentProps<'button'>, 'value' | 'children'> {
+    /**
+     * The value this member contributes to the group.
+     *
+     * Required, because a member the group cannot name is a member it cannot report
+     * and cannot restore, and the group reports the whole set rather than a
+     * difference.
+     */
+    value: string;
+    /** Whether this member ignores user interaction. */
+    disabled?: boolean;
+    /** The words on the member, and its accessible name. */
+    children?: ReactNode;
+}
+/**
+ * A set of toggles that behave as one control.
+ *
+ * **The single or multiple decision is the caller's, and it changes what the
+ * group is rather than how it looks.** This is the decision worth stating because
+ * getting it wrong is the usual failure, and it is invisible in a screenshot: two
+ * groups of three buttons, one where at most one is pressed and one where any
+ * number are, look identical until you read the roles.
+ *
+ * In `single` mode the group is a **radiogroup** and its members are **radios**
+ * carrying `aria-checked`. That is not a stylistic preference, it is the only
+ * description of the constraint that is true. The choices are mutually exclusive,
+ * there is exactly one answer, and the whole set is one question rather than three
+ * independent facts. Three buttons carrying `aria-pressed` say three independent
+ * things can be on at once, which is a lie, and a reader of the accessibility tree
+ * is left to infer the constraint from nothing.
+ *
+ * In `multiple` mode the group is a **toolbar** and its members are **pressed
+ * buttons** carrying `aria-pressed`, and the arrow keys move focus without
+ * choosing. That is the right behaviour for a toolbar of independent toggles,
+ * where arrowing past a member must not silently turn it on, and Space is what
+ * presses. So the two modes differ in the role of the group, the role of the
+ * member, the state attribute, and what an arrow key does, and none of the four is
+ * reachable from the other by passing a prop.
+ *
+ * **The group is one Tab stop, and it is the current answer.** Tab enters on the
+ * member that is pressed, or on the first member when nothing is pressed, and Tab
+ * leaves the group in one step. That is the composite pattern, and it is why a
+ * consumer cannot assemble this from a row of Toggles: composing them gives the
+ * Tab order of the document, which is every member of the group and none of the
+ * arrows. A radiogroup whose Tab lands on the first option when a different one is
+ * checked is a group that reports the wrong current value through the tab order
+ * alone, and with seven members in a row the reader pays for it.
+ *
+ * **The tab stop follows the reader once they move.** It is a piece of state
+ * rather than a derivation, because a reader who arrows across a group of seven
+ * and Tabs away expects to arrive back where they were, and a stop recomputed
+ * from the pressed value on every render is a stop that follows the pressed value
+ * instead of the reader.
+ *
+ * **The keyboard model lives here rather than in each member,** for the reason
+ * `Tree` keeps its own: three members each handling an arrow key is three
+ * implementations of one rule, and the third is the one that is wrong. The order
+ * the arrows walk is the group's own children rather than the node list, so it is
+ * the order the reader sees and the order a reordering caller declared, with no
+ * second list to fall behind the first.
+ *
+ * It is a client Component: it holds the pressed set and the roving tab stop, and
+ * both are the control rather than a decoration of it.
+ */
+declare function ToggleGroup({ children, className, selectionMode, value, defaultValue, onValueChange, disabled, orientation, ...props }: ToggleGroupProps): import("react").JSX.Element;
+/**
+ * One member of a ToggleGroup.
+ *
+ * A native `<button>` in both modes, because it is focusable, it submits nothing
+ * it was not asked to, and it is the element the browser's own activation already
+ * handles. What changes between the modes is the role and the state attribute, and
+ * both are read from the group: a radio carrying `aria-checked` in single mode, a
+ * pressed button in multiple mode. Render a Prism `Toggle` outside a group when a
+ * member stands alone; render this inside one, where the group owns the keyboard
+ * model and the pressed set.
+ */
+declare function ToggleGroupItem({ className, value, disabled, children, ...props }: ToggleGroupItemProps): import("react").JSX.Element;
+export { ToggleGroup, ToggleGroupItem };
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/components/ui/toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAId,gEAAgE;AAChE,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,UAAU,CAAA;AAE5D,yCAAyC;AACzC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC5F,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,wBAAwB,CAAA;IACxC,wDAAwD;IACxD,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,mEAAmE;IACnE,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAChC,2EAA2E;IAC3E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAA;IAClD,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;;;OAgBG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB,uEAAuE;IACvE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,6CAA6C;AAC7C,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChG;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAyCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,iBAAS,WAAW,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,aAAwB,EACxB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,QAAgB,EAChB,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAwHlB;AAED;;;;;;;;;;GAUG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,+BA2DtB;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/toggle-group.js

@@ -0,0 +1,208 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, createContext, useContext, useMemo, useRef, useState, } from 'react';
+import { cn } from '../../lib/utils.js';
+const ToggleGroupContext = createContext(null);
+/** The keys that move a member, read from the group's own orientation. */
+const FORWARD = {
+    horizontal: ['ArrowRight'],
+    vertical: ['ArrowDown'],
+};
+const BACKWARD = {
+    horizontal: ['ArrowLeft'],
+    vertical: ['ArrowUp'],
+};
+/**
+ * A set of toggles that behave as one control.
+ *
+ * **The single or multiple decision is the caller's, and it changes what the
+ * group is rather than how it looks.** This is the decision worth stating because
+ * getting it wrong is the usual failure, and it is invisible in a screenshot: two
+ * groups of three buttons, one where at most one is pressed and one where any
+ * number are, look identical until you read the roles.
+ *
+ * In `single` mode the group is a **radiogroup** and its members are **radios**
+ * carrying `aria-checked`. That is not a stylistic preference, it is the only
+ * description of the constraint that is true. The choices are mutually exclusive,
+ * there is exactly one answer, and the whole set is one question rather than three
+ * independent facts. Three buttons carrying `aria-pressed` say three independent
+ * things can be on at once, which is a lie, and a reader of the accessibility tree
+ * is left to infer the constraint from nothing.
+ *
+ * In `multiple` mode the group is a **toolbar** and its members are **pressed
+ * buttons** carrying `aria-pressed`, and the arrow keys move focus without
+ * choosing. That is the right behaviour for a toolbar of independent toggles,
+ * where arrowing past a member must not silently turn it on, and Space is what
+ * presses. So the two modes differ in the role of the group, the role of the
+ * member, the state attribute, and what an arrow key does, and none of the four is
+ * reachable from the other by passing a prop.
+ *
+ * **The group is one Tab stop, and it is the current answer.** Tab enters on the
+ * member that is pressed, or on the first member when nothing is pressed, and Tab
+ * leaves the group in one step. That is the composite pattern, and it is why a
+ * consumer cannot assemble this from a row of Toggles: composing them gives the
+ * Tab order of the document, which is every member of the group and none of the
+ * arrows. A radiogroup whose Tab lands on the first option when a different one is
+ * checked is a group that reports the wrong current value through the tab order
+ * alone, and with seven members in a row the reader pays for it.
+ *
+ * **The tab stop follows the reader once they move.** It is a piece of state
+ * rather than a derivation, because a reader who arrows across a group of seven
+ * and Tabs away expects to arrive back where they were, and a stop recomputed
+ * from the pressed value on every render is a stop that follows the pressed value
+ * instead of the reader.
+ *
+ * **The keyboard model lives here rather than in each member,** for the reason
+ * `Tree` keeps its own: three members each handling an arrow key is three
+ * implementations of one rule, and the third is the one that is wrong. The order
+ * the arrows walk is the group's own children rather than the node list, so it is
+ * the order the reader sees and the order a reordering caller declared, with no
+ * second list to fall behind the first.
+ *
+ * It is a client Component: it holds the pressed set and the roving tab stop, and
+ * both are the control rather than a decoration of it.
+ */
+function ToggleGroup({ children, className, selectionMode = 'single', value, defaultValue, onValueChange, disabled = false, orientation = 'horizontal', ...props }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultValue ?? []);
+    const controlled = value !== undefined;
+    const pressed = controlled ? value : uncontrolled;
+    // The tab stop is state because it has to move; see the JSDoc. `null` is the
+    // "the reader has not been here yet" case, and resolving it to the pressed
+    // member is what makes an uncontrolled group with a default answer enter on that
+    // answer.
+    const [stop, setStop] = useState(null);
+    const root = useRef(null);
+    /**
+     * The declared order of the members, read from the children.
+     *
+     * Read from the children rather than from the DOM on purpose. The tab stop has
+     * to be known during the first render, and a query of `root.current` returns
+     * nothing on that render because the ref is not attached yet, so a group whose
+     * tab stop comes from the DOM has no tab stop on its first paint. A child with
+     * no `value` is skipped, which is the same thing the DOM read would have done by
+     * leaving it out of the list.
+     */
+    const declared = useMemo(() => Children.toArray(children)
+        .map((child) => typeof child === 'object' && child !== null && 'props' in child
+        ? child.props?.value
+        : undefined)
+        .filter((item) => typeof item === 'string'), [children]);
+    const members = () => [
+        ...(root.current?.querySelectorAll('[data-slot="toggle-group-item"]') ?? []),
+    ];
+    const context = useMemo(() => ({
+        selectionMode,
+        value: pressed,
+        disabled,
+        isPressed: (item) => pressed.includes(item),
+        isTabStop: (item) => {
+            if (stop !== null)
+                return stop === item;
+            const current = pressed[0];
+            return current === undefined ? item === declared[0] : item === current;
+        },
+        toggle: (item) => {
+            // The whole set comes back rather than a difference, so a caller
+            // restoring state does not have to know which member it was holding. In
+            // single mode pressing the pressed member clears it rather than doing
+            // nothing, which is the one place the two modes genuinely differ in
+            // consequence: a radio group with no answer is a real state, and it is
+            // reachable by pressing the answer again.
+            const next = selectionMode === 'multiple'
+                ? pressed.includes(item)
+                    ? pressed.filter((held) => held !== item)
+                    : [...pressed, item]
+                : pressed.includes(item)
+                    ? []
+                    : [item];
+            if (!controlled)
+                setUncontrolled(next);
+            onValueChange?.(next);
+        },
+        focus: (item) => setStop(item),
+        members,
+        orientation,
+    }), [controlled, declared, disabled, onValueChange, orientation, pressed, selectionMode, stop]);
+    return (_jsx("div", { ref: root, "data-slot": "toggle-group", "data-selection-mode": selectionMode, 
+        // The role is the whole difference between the two modes, and it is set here
+        // rather than inherited from whatever the underlying primitive defaults to.
+        // A `group` with `aria-orientation` is itself an error, which is one of the
+        // reasons the multiple mode is a toolbar: a toolbar is the role that says
+        // "a set of controls operated with the arrow keys", and it is the role that
+        // carries an orientation.
+        //
+        // Both of those roles are announced by their bare name when nothing names
+        // them, which is why `aria-label` is a required prop rather than an optional
+        // one; see the prop.
+        role: selectionMode === 'multiple' ? 'toolbar' : 'radiogroup', "aria-orientation": orientation, onKeyDown: (event) => {
+            const back = BACKWARD[orientation].includes(event.key);
+            if (!back && !FORWARD[orientation].includes(event.key))
+                return;
+            const all = members();
+            if (all.length === 0)
+                return;
+            const at = all.indexOf(document.activeElement);
+            if (at === -1)
+                return;
+            // A member that ignores interaction is skipped rather than focused and
+            // doing nothing, which is the same rule `Tree` follows for a label that
+            // is not a destination.
+            const forward = back ? -1 : 1;
+            for (let step = 1; step <= all.length; step += 1) {
+                const target = all[(at + forward * step + all.length * step) % all.length];
+                if (target === undefined || target.disabled)
+                    continue;
+                event.preventDefault();
+                target.focus();
+                return;
+            }
+        }, className: cn('inline-flex items-center gap-1', orientation === 'vertical' ? 'flex-col' : 'flex-row', className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: context, children: children }) }));
+}
+/**
+ * One member of a ToggleGroup.
+ *
+ * A native `<button>` in both modes, because it is focusable, it submits nothing
+ * it was not asked to, and it is the element the browser's own activation already
+ * handles. What changes between the modes is the role and the state attribute, and
+ * both are read from the group: a radio carrying `aria-checked` in single mode, a
+ * pressed button in multiple mode. Render a Prism `Toggle` outside a group when a
+ * member stands alone; render this inside one, where the group owns the keyboard
+ * model and the pressed set.
+ */
+function ToggleGroupItem({ className, value, disabled, children, ...props }) {
+    const group = useContext(ToggleGroupContext);
+    // A member outside a group still has to be a usable button rather than a broken
+    // one, so the defaults here are the standalone behaviour and the group overrides
+    // them. A member with no group is a caller's mistake, and the honest response to
+    // it is a working control rather than a crash.
+    const standalone = group === null;
+    const multiple = group?.selectionMode === 'multiple';
+    const pressed = group?.isPressed(value) ?? false;
+    const inert = group?.disabled === true || disabled === true;
+    return (_jsx("button", { type: "button", "data-slot": "toggle-group-item", "data-value": value, "data-pressed": pressed ? 'true' : undefined, 
+        // The single-selection member is a radio, and `aria-checked` is the only
+        // attribute that says "one of these is the answer". `aria-pressed` on a
+        // button inside a set of mutually exclusive choices says each choice is
+        // independent, which is the claim single mode is denying.
+        role: standalone || multiple ? undefined : 'radio', "aria-checked": standalone || multiple ? undefined : pressed, "aria-pressed": standalone || multiple ? pressed : undefined, 
+        // The roving tab stop. A group where every member is out of the tab order is
+        // a group a keyboard cannot enter at all, which is the failure a roving
+        // tabindex has when nobody owns the pointer position, so the first member is
+        // the stop whenever nothing is pressed.
+        tabIndex: group === null || group.isTabStop(value) ? 0 : -1, disabled: inert, onFocus: () => group?.focus(value), onClick: () => group?.toggle(value), className: cn('text-muted-foreground inline-flex h-8 min-w-8 items-center justify-center gap-1.5 rounded-sm px-2.5 text-sm font-medium whitespace-nowrap outline-none', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'hover:text-foreground', 'focus-visible:ring-ring focus-visible:ring-[3px]', 
+        // Both state surfaces set their own ink, for the reason `Toggle` states: an
+        // inherited ink is the same control on the page ground and a different one
+        // inside a Block.
+        'data-[pressed]:bg-accent data-[pressed]:text-accent-foreground', 
+        // The coarse-pointer floor, as a step with `min-w-11` on the other axis, and
+        // a band is the worst of the three answers here. These are the members of one
+        // segmented set, so they sit directly beside each other: a 44px band on one
+        // member is a press aimed at its neighbour, which is condition 1 of the three
+        // in `DESIGN.md` failing outright. `min-w-11` is the width half for the reason
+        // `Button` gives, since an icon-only member is `size-4` plus `px-2.5` and would
+        // otherwise stay under the floor across. The cost is that the group is 44 tall
+        // on touch rather than 32, and it is paid uniformly because the class is on the
+        // member and every member carries it. See DESIGN.md, The coarse-pointer floor.
+        'pointer-coarse:h-11 pointer-coarse:min-w-11', inert ? 'cursor-not-allowed opacity-50' : '', className), ...props, children: children }));
+}
+export { ToggleGroup, ToggleGroupItem };

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

@@ -0,0 +1,73 @@
+import type { ComponentProps } from 'react';
+/** How large a Toggle is drawn. */
+export type ToggleSize = 'sm' | 'default';
+/**
+ * The props the Toggle forwards to its Base UI root.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type crosses
+ * the package seam (ticket 07 section 6).
+ */
+/**
+ * The props the Toggle accepts.
+ *
+ * `value` is omitted from what it forwards, because the native button attribute
+ * and the toggle's own `value` are different things. The native one is the value
+ * submitted with a form, and the toggle's is the identifier a `ToggleGroup` uses to
+ * hold the pressed set; a single prop cannot be both. A standalone Toggle submits
+ * nothing, so the attribute is not the one a caller is reaching for here, and a
+ * caller who wants it wraps the Toggle in a form control of its own.
+ */
+export interface ToggleProps extends Omit<ComponentProps<'button'>, 'onChange' | 'value'> {
+    /** The pressed state, when the control is controlled. */
+    pressed?: boolean;
+    /** The pressed state to start in, for an uncontrolled toggle. */
+    defaultPressed?: boolean;
+    /** Called when the pressed state changes. */
+    onPressedChange?: (pressed: boolean) => void;
+    /** Whether the control ignores user interaction. */
+    disabled?: boolean;
+    /**
+     * The control's accessible name.
+     *
+     * Optional rather than required only because a Toggle whose visible label is its
+     * own text takes its name from that text. Pass it for the icon-only case, which
+     * is common: a bold, an italic and an underline row are three glyphs, and a
+     * screen reader that says "button, button, button" for them is three controls
+     * nobody can tell apart.
+     */
+    'aria-label'?: string;
+    /** The control's height. @defaultValue 'default' */
+    size?: ToggleSize;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * A two-state button: it is pressed or it is not.
+ *
+ * **A Toggle is not a Switch, and the difference is the whole of it.** A Switch
+ * takes effect the moment it is flipped: notifications are on, a panel is showing,
+ * a feature is enabled, and there is no save step. A Toggle is *pressed*, which is
+ * a state the caller holds and decides what to do with, usually on submit. Turning
+ * on a feature the moment a reader presses a word is a change made without a save
+ * and without a confirmation, and a reader who pressed the wrong one has to know
+ * what was undone. So: flipping a Switch changes the application, pressing a
+ * Toggle changes a value.
+ *
+ * Between the two, use a Switch when the change applies at once and a Toggle when
+ * it is part of a larger form. A Checkbox is the third answer and the one most
+ * often confused with both: a Checkbox is an independent yes-or-no that submits
+ * with the form and has no pressed styling to suggest it is currently on.
+ *
+ * **The pressed state is an attribute and not only a surface.** Base UI renders a
+ * native `<button>` with `aria-pressed`, which is what makes it a toggle rather
+ * than a button that happens to change colour, and the surface follows it with
+ * `data-[pressed]:`. The order is the same everywhere in this package: the
+ * attribute is the fact and the colour is the reminder, so a reader who cannot
+ * separate the two inks still knows which way the control is.
+ *
+ * It is a client Component, because a toggle that cannot be pressed is a label and
+ * because the pressed state is what the whole control is.
+ */
+declare function Toggle({ className, size, pressed, defaultPressed, onPressedChange, disabled, ...props }: ToggleProps): import("react").JSX.Element;
+export { Toggle };
+//# sourceMappingURL=toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,mCAAmC;AACnC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzC;;;;;GAKG;AACH;;;;;;;;;GASG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACvF,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iEAAiE;IACjE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,OAAO,EACP,cAAc,EACd,eAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,+BAoCb;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/ui/toggle.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { cn } from '../../lib/utils.js';
+/**
+ * A two-state button: it is pressed or it is not.
+ *
+ * **A Toggle is not a Switch, and the difference is the whole of it.** A Switch
+ * takes effect the moment it is flipped: notifications are on, a panel is showing,
+ * a feature is enabled, and there is no save step. A Toggle is *pressed*, which is
+ * a state the caller holds and decides what to do with, usually on submit. Turning
+ * on a feature the moment a reader presses a word is a change made without a save
+ * and without a confirmation, and a reader who pressed the wrong one has to know
+ * what was undone. So: flipping a Switch changes the application, pressing a
+ * Toggle changes a value.
+ *
+ * Between the two, use a Switch when the change applies at once and a Toggle when
+ * it is part of a larger form. A Checkbox is the third answer and the one most
+ * often confused with both: a Checkbox is an independent yes-or-no that submits
+ * with the form and has no pressed styling to suggest it is currently on.
+ *
+ * **The pressed state is an attribute and not only a surface.** Base UI renders a
+ * native `<button>` with `aria-pressed`, which is what makes it a toggle rather
+ * than a button that happens to change colour, and the surface follows it with
+ * `data-[pressed]:`. The order is the same everywhere in this package: the
+ * attribute is the fact and the colour is the reminder, so a reader who cannot
+ * separate the two inks still knows which way the control is.
+ *
+ * It is a client Component, because a toggle that cannot be pressed is a label and
+ * because the pressed state is what the whole control is.
+ */
+function Toggle({ className, size = 'default', pressed, defaultPressed, onPressedChange, disabled, ...props }) {
+    return (_jsx(TogglePrimitive, { "data-slot": "toggle", 
+        // The focus ring is `ring-ring` at full strength, for the reason `Button`
+        // states: half alpha of this ring clears 3:1 against no surface in any pack.
+        className: cn('inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap outline-none', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50', 
+        // Both state surfaces set their own ink, which is the rule a variant that
+        // sets a fill must follow. A pressed surface with an inherited ink is the
+        // same control on the page ground and a different one inside a Block.
+        'hover:bg-accent hover:text-accent-foreground', 'data-[pressed]:bg-accent data-[pressed]:text-accent-foreground', 
+        // The coarse-pointer floor, as a step with `min-w-11` on the other axis, and a
+        // band is rejected on condition 1 for the reason `toggle-group.tsx` rejects one:
+        // a `Toggle` is most often one member of a row or a set, and a 44px band on it is
+        // a press aimed at whatever sits beside it. `min-w-11` is the width half for the
+        // reason `Button` gives, since an icon-only toggle is `size-4` plus `px-2.5` and
+        // would otherwise stay under the floor across. See DESIGN.md, The coarse-pointer
+        // floor.
+        'pointer-coarse:h-11 pointer-coarse:min-w-11', size === 'sm' ? 'h-8 min-w-8 px-2.5' : 'h-9 min-w-9 px-3', className), ...(pressed === undefined ? null : { pressed }), ...(defaultPressed === undefined ? null : { defaultPressed }), ...(onPressedChange === undefined
+            ? null
+            : { onPressedChange: (next) => onPressedChange(next) }), ...(disabled === undefined ? null : { disabled }), ...props }));
+}
+export { Toggle };

package/dist/components/ui/tooltip.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * A short label shown on hover or focus.
  *

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

@@ -109,6 +109,14 @@ export interface TreeProps {
  * are specific to a documentation rail and are reasoned at length in the design
  * rules. A documentation rail is one shape a tree takes, not the shape. Whether the
  * Page composes this Component later is a decision this ticket does not make.
+ *
+ * **Nothing collapses, so nothing claims to.** There is no `open` set, no
+ * `aria-expanded` on a node and no arrow that folds a subtree away. The attribute
+ * was on every group with children, hard-coded to `true`, and it promised a second
+ * press that did nothing: a reader who hears "expanded" and presses to collapse
+ * has been told about a control this Component does not have. ARIA's own wording
+ * covers the case, that a node which cannot expand omits the attribute, and `aria-level`
+ * is what places a node in the tree for a reader who wants that instead.
  */
 declare function Tree({ nodes, currentHref, label, className, empty }: TreeProps): import("react").JSX.Element;
 export { Tree };

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

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tree.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIlE;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAA;IACb,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0EAA0E;IAC1E,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAA;CAC3B,CAAA;AAED;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,SAAS,CAAA;IACf,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,aAAa,GAAG,eAAe,CAAA;AAErE,kCAAkC;AAClC,MAAM,WAAW,SAAS;IACxB,yDAAyD;IACzD,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAA;IAC1B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,SAAS,CAAA;KAAE,CAAA;CAChD;AAqKD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,SAAS,+BAkEvE;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tree.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIzF;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAA;IACb,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0EAA0E;IAC1E,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAA;CAC3B,CAAA;AAED;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,SAAS,CAAA;IACf,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,aAAa,GAAG,eAAe,CAAA;AAErE,kCAAkC;AAClC,MAAM,WAAW,SAAS;IACxB,yDAAyD;IACzD,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAA;IAC1B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,SAAS,CAAA;KAAE,CAAA;CAChD;AAkOD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,iBAAS,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,SAAS,+BAqGvE;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}