@wtfalch/design 0.8.0 → 0.9.0

package/README.md

@@ -7,6 +7,24 @@ product can look like itself without forking the stylesheet.
 pnpm add @wtfalch/design
 ```
 
+## What is public
+
+The components, and the tokens. Not the classes.
+
+A class in this package is an implementation detail: `.card`, `.set-row`,
+`.pill` and the rest may be renamed or deleted whenever the component that
+draws them changes, and 0.9.0 did exactly that to several of them. If you
+need a card, render `<Card>`; if you need a row of your own, write it in the
+token vocabulary:
+
+```css
+.app-row { display: flex; gap: var(--space-3); align-items: center; }
+```
+
+`tokens.css` ships separately for that, and every value a theme can change is
+in it. An app that wants utilities should run Tailwind over its own source --
+this package's stylesheet is compiled and does not need it.
+
 ```ts
 import '@wtfalch/design/tokens.css'   // the vocabulary and its base values
 import '@wtfalch/design/styles.css'   // the components

package/dist/components/Button.js

@@ -69,10 +69,16 @@ const blockActivation = (event) => {
 export default function Button(props) {
     const { kind = 'default', disabled, size = 'md', busy, block, iconOnly, className } = props;
     const classes = [
+        /* Always, on both elements. Every rule that used to hang off the `button`
+           element now hangs off this class, so the styling belongs to this
+           component rather than to whatever happens to be a `<button>` -- which
+           is what let a tab, a row and a card inherit control styling and then
+           spend five declarations undoing it. */
+        'btn',
         iconOnly ? 'icon-btn' : '',
         kind === 'default' ? '' : kind,
         size === 'md' ? '' : `size-${size}`,
-        block ? 'block' : '',
+        block ? 'ctl-block' : '',
         className ?? '',
     ]
         .filter(Boolean)
@@ -108,12 +114,7 @@ export default function Button(props) {
             el.removeAttribute('aria-busy');
     }, [busy]);
     if (props.asChild) {
-        /* The one class the button form does not carry. Every rule in the
-           stylesheet is written against the `button` element, which an anchor is
-           not, so the slotted element needs a hook of its own. Adding it here
-           rather than to `classes` above keeps the button's own class list, and
-           therefore every committed baseline, exactly as it was. */
-        const slotClasses = ['btn', classes].filter(Boolean).join(' ');
+        const slotClasses = classes;
         /* Narrowed by `props.asChild`, so what is left after the component's own
            props is the DOM attribute set -- which is why an unknown `data-*`
            reaches the child untouched. */

package/dist/components/Callout.js

@@ -70,7 +70,7 @@ export default function Callout({ tone, children, icon, timed, onDismiss, classN
     return (_jsxs("div", { className: `callout${tone ? ` callout-${tone}` : ''}${running ? ' callout-timed' : ''}${className ? ` ${className}` : ''}`, 
         /* An alert interrupts whatever is being read, which is right for bad news
            and rude for "saved". */
-        role: tone === 'bad' ? 'alert' : 'status', onMouseEnter: () => running && setPaused(true), onMouseLeave: () => running && setPaused(false), onFocusCapture: () => running && setPaused(true), onBlurCapture: () => running && setPaused(false), children: [mark && (_jsx("span", { className: "callout-mark", "aria-hidden": "true", children: _jsx(Icon, { name: mark, size: 16 }) })), _jsx("div", { className: "grow", children: children }), running && (
+        role: tone === 'bad' ? 'alert' : 'status', onMouseEnter: () => running && setPaused(true), onMouseLeave: () => running && setPaused(false), onFocusCapture: () => running && setPaused(true), onBlurCapture: () => running && setPaused(false), children: [mark && (_jsx("span", { className: "callout-mark", "aria-hidden": "true", children: _jsx(Icon, { name: mark, size: 16 }) })), _jsx("div", { className: "ctl-grow", children: children }), running && (
             /* Decoration: the time remaining is not information anybody can act on,
                and a screen reader counting down a bar is noise on top of a message
                it has already read out. */

package/dist/components/Card.d.ts

@@ -2,7 +2,7 @@
  * A box with a reason to exist.
  *
  * `.card` was CSS and nothing else, so every caller assembled its own header:
- * a `<div className="row">`, a `<div className="grow">`, a title in a
+ * a `<div className="row">`, a `<div className="ctl-grow">`, a title in a
  * `truncate` span and a description in a `muted mono` div, with the spacing
  * retyped each time. Four variants of that shape existed and no two agreed on
  * the gap between the title and the line under it.

package/dist/components/Card.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * A box with a reason to exist.
  *
  * `.card` was CSS and nothing else, so every caller assembled its own header:
- * a `<div className="row">`, a `<div className="grow">`, a title in a
+ * a `<div className="row">`, a `<div className="ctl-grow">`, a title in a
  * `truncate` span and a description in a `muted mono` div, with the spacing
  * retyped each time. Four variants of that shape existed and no two agreed on
  * the gap between the title and the line under it.
@@ -27,9 +27,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import Icon from './Icon.js';
 export default function Card({ icon, title, description, action, children, tone, onClick, selected, className, }) {
-    const head = (title || description || action) && (_jsxs("div", { className: "card-head", children: [icon && (_jsx("span", { className: "card-icon", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: 20 }) })), _jsxs("div", { className: "card-headings", children: [title && _jsx("strong", { className: "card-title", children: title }), description && _jsx("div", { className: "card-desc", children: description })] }), action && _jsx("div", { className: "card-action", children: action })] }));
-    const cls = `card${onClick ? ' card-pick' : ''}${selected ? ' card-on' : ''}${tone ? ` card-${tone}` : ''}${className ? ` ${className}` : ''}`;
-    const body = children && _jsx("div", { className: "card-body", children: children });
+    const body = children && _jsx("div", { className: "grid gap-3", children: children });
+    /* `mb-3` when something follows, which is what `.card-head:not(:last-child)`
+       was saying. The component knows whether there is a body; a structural
+       pseudo-class was working that out from the DOM. */
+    const head = (title || description || action) && (_jsxs("div", { className: `card-head flex items-start gap-3${body ? ' mb-3' : ''}`, children: [icon && (_jsx("span", { className: "card-icon", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: 20 }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [title && _jsx("strong", { className: "card-title", children: title }), description && _jsx("div", { className: "card-desc", children: description })] }), action && _jsx("div", { className: "flex-none self-center flex items-center", children: action })] }));
+    /* `card` stays as the hook: the tones, the pick and selected states, and
+       `:has(.card-icon)` indenting an inline row past the icon, are all either
+       a `color-mix` or a relationship between elements. What is here is the
+       card's own box -- and `display: block` with `width: 100%` matter, because
+       a pressable card is a `<button>`, which shrink-wraps: a row of cards
+       became a row of labels the moment one gained an `onClick`. */
+    const cls = [
+        'card',
+        onClick ? 'card-pick' : '',
+        selected ? 'card-on' : '',
+        tone ? `card-${tone}` : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
     if (onClick) {
         return (_jsxs("button", { type: "button", className: cls, "aria-pressed": selected, onClick: onClick, children: [head, body] }));
     }

package/dist/components/Command.js

@@ -34,11 +34,11 @@ export default function Command({ open, onOpenChange, groups, placeholder = 'Sea
         }, isDismissable: true, children: _jsx(AriaModal, { className: `cmd${className ? ` ${className}` : ''}`, children: _jsx(Dialog, { className: "cmd-body", "aria-label": label, children: ({ close }) => (_jsxs(Autocomplete, { inputValue: query, onInputChange: setQuery, filter: () => true, children: [_jsxs(SearchField, { className: "cmd-field", "aria-label": label, autoFocus: true, children: [_jsx(Icon, { name: "chat", className: "cmd-mark" }), _jsx(Input, { className: "cmd-input", placeholder: placeholder })] }), empty ? (
                         /* The query, quoted. A palette that says "No results" to a
                            typo looks like a palette that is broken. */
-                        _jsxs("p", { className: "cmd-empty", children: ["Nothing matches ", _jsx("strong", { children: query }), "."] })) : (_jsx(ListBox, { className: "cmd-list", "aria-label": label, selectionMode: "none", children: shown.map((group) => (_jsxs(ListBoxSection, { className: "cmd-group", children: [_jsx(Header, { className: "cmd-group-title", children: group.title }), group.commands.map((command) => (_jsxs(ListBoxItem, { id: command.id, className: "cmd-item", textValue: command.label, isDisabled: command.disabled, onAction: () => {
+                        _jsxs("p", { className: "cmd-empty", children: ["Nothing matches ", _jsx("strong", { children: query }), "."] })) : (_jsx(ListBox, { className: "cmd-list", "aria-label": label, selectionMode: "none", children: shown.map((group) => (_jsxs(ListBoxSection, { children: [_jsx(Header, { className: "cmd-group-title", children: group.title }), group.commands.map((command) => (_jsxs(ListBoxItem, { id: command.id, className: "cmd-item", textValue: command.label, isDisabled: command.disabled, onAction: () => {
                                             command.onRun?.();
                                             /* Closing is this component's job, not every
                                                caller's. Forty `onRun`s that each remember to
                                                close is thirty-nine chances to forget. */
                                             close();
-                                        }, children: [command.icon && _jsx(Icon, { name: command.icon, className: "cmd-icon" }), _jsxs("span", { className: "cmd-text", children: [_jsx(Text, { slot: "label", className: "cmd-label", children: command.label }), command.description && (_jsx(Text, { slot: "description", className: "cmd-desc", children: command.description }))] }), command.shortcut && _jsx(Kbd, { className: "cmd-key", children: command.shortcut })] }, command.id)))] }, group.title))) }))] })) }) }) }));
+                                        }, children: [command.icon && _jsx(Icon, { name: command.icon, className: "cmd-icon" }), _jsxs("span", { className: "cmd-text", children: [_jsx(Text, { slot: "label", className: "cmd-label", children: command.label }), command.description && (_jsx(Text, { slot: "description", className: "cmd-desc", children: command.description }))] }), command.shortcut && _jsx(Kbd, { children: command.shortcut })] }, command.id)))] }, group.title))) }))] })) }) }) }));
 }

package/dist/components/Empty.js

@@ -31,5 +31,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from './Icon.js';
 import Illustration from './Illustration.js';
 export default function Empty({ icon, illustration, children, action, className, }) {
-    return (_jsxs("div", { className: `nothing${illustration ? ' nothing-surface' : ''}${className ? ` ${className}` : ''}`, children: [illustration ? (_jsx(Illustration, { name: illustration, size: 160, className: "nothing-figure" })) : (icon && (_jsx("span", { className: "nothing-mark", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: 20 }) }))), _jsx("p", { className: "nothing-said", children: children }), action && _jsx("div", { className: "nothing-act", children: action })] }));
+    return (_jsxs("div", { className: [
+            'nothing-surface-or-slot grid justify-items-center text-center rounded-md',
+            /* Dashed rather than solid: a solid border reads as a thing, and the
+               point of this box is that there is no thing -- it marks out where
+               the list will be. */
+            illustration
+                ? /* A whole surface rather than a slot in a card. The outline goes,
+                     because a window-sized dashed rectangle reads as a layout that
+                     failed rather than a view with nothing on it, and the box
+                     centres itself in whatever it was dropped into. */
+                    'gap-3 py-10 px-4 m-auto'
+                : 'gap-2 py-5 px-4 border border-dashed border-border-strong',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), children: [illustration ? (
+            /* `currentColor` reaches the figure through the two rules the
+               illustrations ship with, so the colour is set here and the drawing
+               follows it -- the same grey as the sentence under it, in every
+               theme. `.illo` sets `color: inherit`, so this has to out-rank a
+               single class: `text-muted` on the element itself does. */
+            _jsx(Illustration, { name: illustration, size: 160, className: "nothing-figure" })) : (icon && (_jsx("span", { className: "text-muted leading-[0]", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: 20 }) }))), _jsx("p", { className: "m-0 text-muted text-sm leading-[1.5] max-w-[46ch]", children: children }), action && _jsx("div", { className: "mt-1", children: action })] }));
 }

package/dist/components/Input.js

@@ -63,7 +63,7 @@ const Input = forwardRef(function Input({ size = 'md', mono, block, className, t
     const classes = [
         size === 'md' ? '' : `size-${size}`,
         mono ? 'mono' : '',
-        block ? 'block' : '',
+        block ? 'ctl-block' : '',
         className ?? '',
     ]
         .filter(Boolean)
@@ -83,11 +83,11 @@ const Input = forwardRef(function Input({ size = 'md', mono, block, className, t
         const filled = rest.value !== undefined
             ? String(rest.value).length > 0
             : String(rest.defaultValue ?? '').length > 0;
-        return (_jsxs("span", { className: `adorned adorned-${size}${block ? ' block' : ''}${icon ? ' adorned-icon' : ''}`, children: [icon && _jsx(Icon, { name: icon, size: glyph, className: "adorned-mark", "aria-hidden": true }), box, (trailing || (onClear && filled)) && (_jsxs("span", { className: "adorned-end", children: [trailing, onClear && filled && (_jsx("button", { type: "button", className: "icon-btn ghost adorned-clear", "aria-label": "Clear", onClick: onClear, disabled: rest.disabled, children: _jsx(Icon, { name: "close", size: glyph }) }))] }))] }));
+        return (_jsxs("span", { className: `adorned adorned-${size}${block ? ' ctl-block' : ''}${icon ? ' adorned-icon' : ''}`, children: [icon && _jsx(Icon, { name: icon, size: glyph, className: "adorned-mark", "aria-hidden": true }), box, (trailing || (onClear && filled)) && (_jsxs("span", { className: "adorned-end", children: [trailing, onClear && filled && (_jsx("button", { type: "button", className: "icon-btn adorned-clear", "aria-label": "Clear", onClick: onClear, disabled: rest.disabled, children: _jsx(Icon, { name: "close", size: glyph }) }))] }))] }));
     }
-    return (_jsxs("span", { className: `secret secret-${size}${block ? ' block' : ''}`, children: [_jsx("input", { ref: ref, type: shown ? 'text' : 'password', className: classes || undefined, 
+    return (_jsxs("span", { className: `secret secret-${size}${block ? ' ctl-block' : ''}`, children: [_jsx("input", { ref: ref, type: shown ? 'text' : 'password', className: classes || undefined, 
                 /* Only while revealed: as a password these are moot, and setting them
                    on a password field makes some browsers stop offering to fill it. */
-                autoCapitalize: shown ? 'off' : undefined, autoCorrect: shown ? 'off' : undefined, spellCheck: shown ? false : undefined, ...rest, ...wired }), _jsx(ToggleButton, { className: `icon-btn ghost secret-eye${size === 'md' ? '' : ` size-${size}`}`, "aria-label": "Show password", isSelected: shown, onChange: setShown, isDisabled: rest.disabled, children: _jsx(Icon, { name: shown ? 'eye-off' : 'eye', size: glyph }) })] }));
+                autoCapitalize: shown ? 'off' : undefined, autoCorrect: shown ? 'off' : undefined, spellCheck: shown ? false : undefined, ...rest, ...wired }), _jsx(ToggleButton, { className: `icon-btn secret-eye${size === 'md' ? '' : ` size-${size}`}`, "aria-label": "Show password", isSelected: shown, onChange: setShown, isDisabled: rest.disabled, children: _jsx(Icon, { name: shown ? 'eye-off' : 'eye', size: glyph }) })] }));
 });
 export default Input;

package/dist/components/Kbd.js

@@ -23,6 +23,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * carries the slot wiring that lets `Menu` and `Command` place it, so this is
  * that component with the package's class on it rather than a new one.
  *
+ * **Drawn with utilities.** Its five declarations were a `.kbd` rule that
+ * `Menu` and `Command` reached for by class name; they are on the element
+ * now, so the component carries its own appearance and nothing else has to
+ * know the class exists.
+ *
  * **It draws the reminder; it does not bind anything.** Same contract as
  * `Menu`'s `shortcut` and `Command`'s: what actually listens for the chord is
  * the app's business, and a component that both drew a key and bound it would
@@ -30,5 +35,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { Keyboard } from 'react-aria-components';
 export default function Kbd({ children, className, }) {
-    return _jsx(Keyboard, { className: ['kbd', className].filter(Boolean).join(' '), children: children });
+    /* Utilities rather than a `.kbd` rule. Five declarations, each of which
+       reads as what it is at the call site: it never shrinks in a flex row, it
+       is the theme's mono face at the smallest step, and it is quiet. */
+    return (_jsx(Keyboard, { className: ['flex-none font-mono text-2xs text-muted tracking-normal', className]
+            .filter(Boolean)
+            .join(' '), children: children }));
 }

package/dist/components/Menu.js

@@ -17,12 +17,12 @@ function renderItem(item) {
         /* Typeahead needs a string, and `label` may be a node. Without this,
            typing the first letter of an item whose label is markup matches
            nothing and the menu looks broken. */
-        textValue: typeof item.label === 'string' ? item.label : item.id, children: [item.icon && _jsx(Icon, { name: item.icon, className: "menu-icon" }), _jsxs("span", { className: "menu-text", children: [_jsx(Text, { slot: "label", className: "menu-label", children: item.label }), item.description && (_jsx(Text, { slot: "description", className: "menu-desc", children: item.description }))] }), item.shortcut && _jsx(Kbd, { className: "menu-key", children: item.shortcut }), item.items && (_jsx("svg", { className: "menu-more", viewBox: "0 0 24 24", width: "12", height: "12", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m9 6 6 6-6 6" }) }))] }, item.id));
-    const body = item.items ? (_jsxs(SubmenuTrigger, { children: [row, _jsx(AriaPopover, { className: "menu-sheet", children: _jsx(AriaMenu, { className: "menu-list", children: item.items.map(renderItem) }) })] }, item.id)) : (row);
+        textValue: typeof item.label === 'string' ? item.label : item.id, children: [item.icon && _jsx(Icon, { name: item.icon, className: "menu-icon" }), _jsxs("span", { className: "menu-text", children: [_jsx(Text, { slot: "label", className: "menu-label", children: item.label }), item.description && (_jsx(Text, { slot: "description", className: "menu-desc", children: item.description }))] }), item.shortcut && _jsx(Kbd, { children: item.shortcut }), item.items && (_jsx("svg", { className: "menu-more", viewBox: "0 0 24 24", width: "12", height: "12", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m9 6 6 6-6 6" }) }))] }, item.id));
+    const body = item.items ? (_jsxs(SubmenuTrigger, { children: [row, _jsx(AriaPopover, { className: "menu-sheet surface-panel border border-border rounded-md min-w-[12rem] max-w-[min(20rem,calc(100vw-var(--space-6)))] max-h-[24rem] overflow-auto overscroll-contain z-[60]", children: _jsx(AriaMenu, { className: "p-1 outline-none grid gap-[var(--border-width)]", children: item.items.map(renderItem) }) })] }, item.id)) : (row);
     if (!item.separated)
         return body;
     return [_jsx(Separator, { className: "menu-rule" }, `${item.id}-rule`), body];
 }
 export default function Menu({ trigger, items, placement = 'bottom start', label, className, }) {
-    return (_jsxs(MenuTrigger, { children: [trigger, _jsx(AriaPopover, { className: `menu-sheet${className ? ` ${className}` : ''}`, placement: placement, offset: 6, children: _jsx(AriaMenu, { className: "menu-list", "aria-label": label, children: items.map((entry) => isSection(entry) ? (_jsxs(MenuSection, { className: "menu-section", children: [_jsx(Header, { className: "menu-section-title", children: entry.title }), entry.items.map(renderItem)] }, entry.title)) : (renderItem(entry))) }) })] }));
+    return (_jsxs(MenuTrigger, { children: [trigger, _jsx(AriaPopover, { className: `menu-sheet${className ? ` ${className}` : ''}`, placement: placement, offset: 6, children: _jsx(AriaMenu, { className: "p-1 outline-none grid gap-[var(--border-width)]", "aria-label": label, children: items.map((entry) => isSection(entry) ? (_jsxs(MenuSection, { children: [_jsx(Header, { className: "menu-section-title", children: entry.title }), entry.items.map(renderItem)] }, entry.title)) : (renderItem(entry))) }) })] }));
 }

package/dist/components/Modal.js

@@ -75,7 +75,7 @@ export default function Modal({ title, description, subtitle, head, children, fo
     return (_jsx(ModalOverlay, { className: `backdrop${edge ? ` sheeted from-${edge}` : ''}`, isOpen: true, isDismissable: canClose && dismissOnScrim, isKeyboardDismissDisabled: !canClose, onOpenChange: (open) => {
             if (!open && canClose)
                 onClose?.();
-        }, children: _jsx(AriaModal, { className: `modal${edge ? ` sheet from-${edge}` : ''}${className ? ` ${className}` : ''}`, style: width ? { width } : undefined, children: _jsxs(Dialog, { ref: dialogRef, className: "modal-dialog", "aria-labelledby": labelledBy ?? (title ? headingId : undefined), children: [(title || head || (onClose && closeButton)) && (_jsxs("header", { className: "modal-head", children: [title && (
+        }, children: _jsx(AriaModal, { className: `modal${edge ? ` sheet from-${edge}` : ''}${className ? ` ${className}` : ''}`, style: width ? { width } : undefined, children: _jsxs(Dialog, { ref: dialogRef, className: "modal-dialog flex flex-col min-h-0 flex-1", "aria-labelledby": labelledBy ?? (title ? headingId : undefined), children: [(title || head || (onClose && closeButton)) && (_jsxs("header", { className: "modal-head", children: [title && (
                             /* `Heading` is what React Aria labels the dialog by, and it
                                renders an `<h2>` -- which the browser gives its own margins
                                and its own size (17px above and below, 21px type). The old
@@ -83,5 +83,5 @@ export default function Modal({ title, description, subtitle, head, children, fo
                                takes them back off so the `<strong>` inside draws exactly as
                                it did; without it every window opened with its title
                                floating in a band twice the height of the head. */
-                            _jsx(Heading, { slot: "title", id: headingId, level: 2, className: "modal-title", children: _jsx("strong", { children: title }) })), subtitle, head, onClose && closeButton && (_jsx(Button, { iconOnly: true, className: "x", "aria-label": "Close", isDisabled: closeDisabled, onPress: () => onClose(), children: _jsx(Icon, { name: "close", size: 16 }) }))] })), description && _jsx("p", { className: "modal-desc", children: description }), _jsx("div", { className: `modal-body${bodyClass ? ` ${bodyClass}` : ''}`, children: children }), footer && (_jsx("footer", { className: `set-actions${footerClass ? ` ${footerClass}` : ''}`, children: footer }))] }) }) }));
+                            _jsx(Heading, { slot: "title", id: headingId, level: 2, className: "modal-title m-0 [font:inherit]", children: _jsx("strong", { children: title }) })), subtitle, head, onClose && closeButton && (_jsx(Button, { iconOnly: true, className: "x", "aria-label": "Close", isDisabled: closeDisabled, onPress: () => onClose(), children: _jsx(Icon, { name: "close", size: 16 }) }))] })), description && _jsx("p", { className: "m-0 px-4 pb-3 text-muted text-sm", children: description }), _jsx("div", { className: `modal-body${bodyClass ? ` ${bodyClass}` : ''}`, children: children }), footer && (_jsx("footer", { className: `set-actions${footerClass ? ` ${footerClass}` : ''}`, children: footer }))] }) }) }));
 }

package/dist/components/Pagination.js

@@ -99,7 +99,12 @@ export default function Pagination({ position, limit, total, count, onChange, la
        exactly once, on a list whose length is a multiple of the limit, and costs
        one empty page rather than a hidden remainder. */
     const canGoOn = pages === undefined ? shown >= limit : page < pages;
-    return (_jsxs("nav", { className: `pager${className ? ` ${className}` : ''}`, "aria-label": label, children: [_jsx("p", { className: "pager-count", children: shown === 0 ? (`No ${unit}`) : (_jsxs(_Fragment, { children: [_jsxs("strong", { children: [group(first), "\u2013", group(last)] }), total === undefined ? ` ${unit}` : ` of ${group(total)} ${unit}`] })) }), _jsxs("div", { className: "pager-controls", children: [_jsx("button", { type: "button", className: "pager-step", onClick: () => onChange(Math.max(0, position - limit)), disabled: !canGoBack, "aria-label": "Previous page", children: _jsx(Chevron, { back: true }) }), pages !== undefined && (_jsx("ol", { className: "pager-pages", children: pageWindow(page, pages).map((slot, index, slots) => slot === 'gap' ? (
+    return (_jsxs("nav", { className: [
+            'flex items-center justify-between gap-4 flex-wrap py-2 text-xs text-muted',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), "aria-label": label, children: [_jsx("p", { className: "pager-count m-0", children: shown === 0 ? (`No ${unit}`) : (_jsxs(_Fragment, { children: [_jsxs("strong", { children: [group(first), "\u2013", group(last)] }), total === undefined ? ` ${unit}` : ` of ${group(total)} ${unit}`] })) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", className: "pager-step", onClick: () => onChange(Math.max(0, position - limit)), disabled: !canGoBack, "aria-label": "Previous page", children: _jsx(Chevron, { back: true }) }), pages !== undefined && (_jsx("ol", { className: "pager-pages", children: pageWindow(page, pages).map((slot, index, slots) => slot === 'gap' ? (
                         /* Keyed by the page it follows rather than by its index: a
                            window holds at most two gaps and they elide different runs,
                            and an index key makes React reuse the wrong one -- which

package/dist/components/Progress.js

@@ -23,5 +23,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Progress({ value, max, label, detail, tone, className, }) {
     const indeterminate = value === undefined || !max;
     const pct = indeterminate ? 0 : Math.max(0, Math.min(100, (value / max) * 100));
-    return (_jsxs("div", { className: `progress${className ? ` ${className}` : ''}`, children: [(label || detail) && (_jsxs("div", { className: "progress-head", children: [_jsx("span", { className: "progress-label", children: label }), _jsx("span", { className: "grow" }), detail && _jsx("span", { className: "progress-detail mono", children: detail })] })), _jsx("div", { className: `bar${tone ? ` bar-${tone}` : ''}${indeterminate ? ' bar-indeterminate' : ''}`, role: "progressbar", "aria-label": label, "aria-valuenow": indeterminate ? undefined : Math.round(pct), "aria-valuemin": indeterminate ? undefined : 0, "aria-valuemax": indeterminate ? undefined : 100, "aria-valuetext": detail, children: _jsx("i", { style: indeterminate ? undefined : { width: `${pct}%` } }) })] }));
+    return (
+    /* `progress` stays as a hook: `card.css` spaces a bar that follows a
+       card's contents, which is a relationship between two elements. The rest
+       is this component's own shape and reads better here. */
+    _jsxs("div", { className: ['progress grid gap-1', className].filter(Boolean).join(' '), children: [(label || detail) && (
+            /* Baseline, not centre: the label and the detail are one line of text
+               with two weights, and centring them puts the smaller one adrift. */
+            _jsxs("div", { className: "flex items-baseline gap-2 text-sm", children: [_jsx("span", { children: label }), _jsx("span", { className: "ctl-grow" }), detail && _jsx("span", { className: "text-muted text-xs font-mono", children: detail })] })), _jsx("div", { className: `bar${tone ? ` bar-${tone}` : ''}${indeterminate ? ' bar-indeterminate' : ''}`, role: "progressbar", "aria-label": label, "aria-valuenow": indeterminate ? undefined : Math.round(pct), "aria-valuemin": indeterminate ? undefined : 0, "aria-valuemax": indeterminate ? undefined : 100, "aria-valuetext": detail, children: _jsx("i", { style: indeterminate ? undefined : { width: `${pct}%` } }) })] }));
 }

package/dist/components/Rows.d.ts

@@ -5,7 +5,7 @@
  * hand:
  *
  *     <div className="set-row">
- *       <span className="grow" style={{ minWidth: 0 }}>
+ *       <span className="ctl-grow" style={{ minWidth: 0 }}>
  *         <span className="named">
  *           <span className="truncate">{name}</span>
  *           …pills…

package/dist/components/Rows.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * hand:
  *
  *     <div className="set-row">
- *       <span className="grow" style={{ minWidth: 0 }}>
+ *       <span className="ctl-grow" style={{ minWidth: 0 }}>
  *         <span className="named">
  *           <span className="truncate">{name}</span>
  *           …pills…

package/dist/components/Select.js

@@ -78,8 +78,8 @@ export default function Select({ block = false, size, className, children, value
        `sel-value` and the caret are the same markup as before, so the closed
        control is pixel-identical; the list is the same markup with React Aria's
        state attributes where the classes were. */
-    return (_jsxs(AriaSelect, { className: `sel${block ? ' block' : ''}${className ? ` ${className}` : ''}`, selectedKey: value !== undefined ? String(value) : undefined, defaultSelectedKey: defaultValue !== undefined ? String(defaultValue) : (options[0]?.value ?? undefined), onSelectionChange: (key) => {
+    return (_jsxs(AriaSelect, { className: `sel${block ? ' ctl-block' : ''}${className ? ` ${className}` : ''}`, selectedKey: value !== undefined ? String(value) : undefined, defaultSelectedKey: defaultValue !== undefined ? String(defaultValue) : (options[0]?.value ?? undefined), onSelectionChange: (key) => {
             if (key !== null)
                 onChange?.({ target: { value: String(key) } });
-        }, isDisabled: disabled, name: name, form: form, "aria-label": ariaLabel, "aria-labelledby": wiredLabelledBy, children: [_jsxs(Button, { ref: control, id: wiredId, "aria-describedby": ariaDescribedBy ?? field?.['aria-describedby'], className: `sel-control${size ? ` size-${size}` : ''}`, children: [_jsx(SelectValue, { className: "sel-value", children: ({ selectedText, defaultChildren }) => selectedText ?? defaultChildren }), _jsx("svg", { className: "sel-caret", viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m6 9 6 6 6-6" }) })] }), _jsx(Popover, { className: "sel-list", placement: "bottom start", offset: 4, maxHeight: 280, children: _jsx(ListBox, { className: "sel-listbox", children: options.map((o) => (_jsxs(ListBoxItem, { id: o.value, textValue: o.text, isDisabled: o.disabled, className: "sel-item", children: [_jsx("span", { className: "sel-item-label", children: o.label }), _jsx("svg", { className: "sel-tick", viewBox: "0 0 24 24", width: "13", height: "13", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", d: "m5 13 4 4 10-10" }) }), aside?.(o.value)] }, o.value))) }) })] }));
+        }, isDisabled: disabled, name: name, form: form, "aria-label": ariaLabel, "aria-labelledby": wiredLabelledBy, children: [_jsxs(Button, { ref: control, id: wiredId, "aria-describedby": ariaDescribedBy ?? field?.['aria-describedby'], className: `sel-control${size ? ` size-${size}` : ''}`, children: [_jsx(SelectValue, { className: "sel-value flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: ({ selectedText, defaultChildren }) => selectedText ?? defaultChildren }), _jsx("svg", { className: "sel-caret flex-none opacity-60", viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m6 9 6 6 6-6" }) })] }), _jsx(Popover, { className: "sel-list z-[60] max-h-[280px] overflow-y-auto m-0 p-1 list-none border border-border-strong rounded-md surface-panel", placement: "bottom start", offset: 4, maxHeight: 280, children: _jsx(ListBox, { children: options.map((o) => (_jsxs(ListBoxItem, { id: o.value, textValue: o.text, isDisabled: o.disabled, className: "sel-item flex items-center gap-2 p-2 rounded-sm cursor-pointer whitespace-nowrap", children: [_jsx("span", { className: "flex-1 min-w-0 overflow-hidden text-ellipsis", children: o.label }), _jsx("svg", { className: "sel-tick flex-none opacity-0", viewBox: "0 0 24 24", width: "13", height: "13", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", d: "m5 13 4 4 10-10" }) }), aside?.(o.value)] }, o.value))) }) })] }));
 }

package/dist/components/Shell.js

@@ -22,5 +22,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * app's to pass and stay its own client boundaries.
  */
 export default function Shell({ brand, who, nav, wide = false, children, className, }) {
-    return (_jsxs("div", { className: ['shell', className].filter(Boolean).join(' '), children: [_jsxs("header", { className: "shell-head", children: [_jsxs("div", { className: `shell-head-inner${wide ? ' shell-wide' : ''}`, children: [brand, who && _jsx("div", { className: "shell-who", children: who })] }), nav && _jsx("div", { className: `shell-nav${wide ? ' shell-wide' : ''}`, children: nav })] }), _jsx("main", { className: `shell-main${wide ? ' shell-wide' : ''}`, children: children })] }));
+    /* Utilities: this component is layout and nothing else, which is where they
+       earn their place. The measure is the one thing that is not a utility --
+       it is a number two elements have to agree on, so it is a custom property
+       on the frame rather than a literal repeated in three class lists, which
+       is how manage ended up with `head-inner-wide` and `main-wide` as separate
+       classes and had to remember both. */
+    const measure = wide ? 'max-w-[var(--shell-measure-wide)]' : 'max-w-[var(--shell-measure)]';
+    const band = `w-full mx-auto px-4 ${measure}`;
+    return (_jsxs("div", { className: ['shell flex flex-col min-h-screen surface-bg text-text', className]
+            .filter(Boolean)
+            .join(' '), children: [_jsxs("header", { className: "flex-none border-b border-border surface-panel", children: [_jsxs("div", { className: `${band} flex items-center justify-between gap-4 py-3 min-w-0`, children: [brand, who && _jsx("div", { className: "flex items-center gap-3 min-w-0", children: who })] }), nav && _jsx("div", { className: `${band} pb-2`, children: nav })] }), _jsx("main", { className: `${band} flex-1 py-6 min-w-0`, children: children })] }));
 }

package/dist/components/SizeGrid.js

@@ -41,8 +41,20 @@ export default function SizeGrid({ value, max = { cols: 3, rows: 3 }, disabled =
         for (let col = 1; col <= extent.cols; col++) {
             const on = col <= shown.cols && row <= shown.rows;
             const chosen = col <= value.cols && row <= value.rows;
-            cells.push(_jsx("button", { type: "button", className: `size-cell${on ? ' on' : ''}${chosen && !hover ? ' chosen' : ''}`, disabled: disabled, "aria-label": `${col} by ${row}`, onMouseEnter: () => !disabled && setHover({ cols: col, rows: row }), onFocus: () => !disabled && setHover({ cols: col, rows: row }), onClick: () => onChange({ cols: col, rows: row }) }, `${col}x${row}`));
+            cells.push(_jsx("button", { type: "button", 
+                /* `size-cell` stays as the hook for the two states: `on` is a fill
+                   from `color-mix`, which is not a utility. The rest -- a painted
+                   cell with no contents, so it says it is a block rather than
+                   taking a control's arrangement -- is here. */
+                className: [
+                    'size-cell block w-[18px] h-[14px] p-0 rounded-sm border border-border surface-panel-2 cursor-pointer',
+                    'disabled:cursor-default disabled:opacity-50',
+                    on ? 'on' : '',
+                    chosen && !hover ? 'border-accent' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), disabled: disabled, "aria-label": `${col} by ${row}`, onMouseEnter: () => !disabled && setHover({ cols: col, rows: row }), onFocus: () => !disabled && setHover({ cols: col, rows: row }), onClick: () => onChange({ cols: col, rows: row }) }, `${col}x${row}`));
         }
     }
-    return (_jsxs("div", { className: "size-grid-wrap", children: [_jsx("div", { className: "size-grid", style: { gridTemplateColumns: `repeat(${extent.cols}, 1fr)` }, onMouseLeave: () => setHover(null), children: cells }), _jsxs("span", { className: "set-hint mono", children: [shown.cols, " \u00D7 ", shown.rows, (extent.cols === max.cols || extent.rows === max.rows) && (_jsxs("span", { className: "size-ceiling", children: [' ', "\u00B7 max ", max.cols, "\u00D7", max.rows] }))] })] }));
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "grid gap-1", style: { gridTemplateColumns: `repeat(${extent.cols}, 1fr)` }, onMouseLeave: () => setHover(null), children: cells }), _jsxs("span", { className: "set-hint mono", children: [shown.cols, " \u00D7 ", shown.rows, (extent.cols === max.cols || extent.rows === max.rows) && (_jsxs("span", { className: "opacity-[0.55]", children: [' ', "\u00B7 max ", max.cols, "\u00D7", max.rows] }))] })] }));
 }

package/dist/components/Stat.js

@@ -26,6 +26,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * A bordered tile inside a bordered row is two boxes saying one thing.
  */
 export default function Stat({ label, value, note, tone, look = 'tile', className, }) {
-    const classes = ['stat', look === 'bare' ? 'stat-bare' : '', className].filter(Boolean).join(' ');
-    return (_jsxs("div", { className: classes, "data-tone": tone, children: [_jsx("p", { className: "stat-label", children: label }), _jsx("p", { className: "stat-value", children: value }), note && _jsx("p", { className: "stat-note", children: note })] }));
+    /* Utilities, so the tile's shape reads where it is drawn. `bare` states
+       the compact shape rather than adding a class that undoes the tile's --
+       which is the mistake the old element reset made across this package.
+       `stat` and `stat-value` stay as hooks: the tone is an attribute on the
+       tile colouring a child, which is a relationship, and a utility is a
+       property on one element. */
+    const tile = look === 'bare'
+        ? 'grid gap-0 leading-[1.25]'
+        : 'grid gap-1 p-4 border border-border rounded-md surface-panel';
+    const classes = ['stat', tile, '[&>p]:m-0', className].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: classes, "data-tone": tone, children: [_jsx("p", { className: "text-xs text-muted", children: label }), _jsx("p", { className: `stat-value font-strong tabular-nums ${look === 'bare' ? 'text-sm' : 'text-lg'}`, children: value }), note && _jsx("p", { className: "text-xs text-muted", children: note })] }));
 }

package/dist/components/Table.js

@@ -3,7 +3,13 @@ export default function Table({ caption, columns, rows, keyOf, empty, className,
     if (!rows.length) {
         return empty ? _jsx("div", { className: "set-hint rows-empty", children: empty }) : null;
     }
-    return (_jsx("div", { className: `table-scroll${className ? ` ${className}` : ''}`, children: _jsxs("table", { className: "table", children: [_jsx("caption", { className: "sr-only", children: caption }), _jsx("thead", { children: _jsx("tr", { children: columns.map((c) => (_jsx("th", { scope: "col", style: { width: c.width, textAlign: c.align === 'end' ? 'right' : undefined }, children: _jsx("span", { className: c.quiet ? 'sr-only' : undefined, children: c.header }) }, c.header))) }) }), _jsx("tbody", { children: rows.map((item) => (_jsx("tr", { children: columns.map((c, i) => {
+    return (
+    /* The one thing about a table that is a property of one element. Its
+       cells, headings and last-row rule are structural -- `th:first-child`,
+       `tbody tr:last-child td` -- and a structural pseudo-class is the right
+       tool for them: expressing the same thing with utilities means this
+       component doing index arithmetic to work out what CSS already knows. */
+    _jsx("div", { className: ['overflow-x-auto', className].filter(Boolean).join(' '), children: _jsxs("table", { className: "data-table", children: [_jsx("caption", { className: "sr-only", children: caption }), _jsx("thead", { children: _jsx("tr", { children: columns.map((c) => (_jsx("th", { scope: "col", style: { width: c.width, textAlign: c.align === 'end' ? 'right' : undefined }, children: _jsx("span", { className: c.quiet ? 'sr-only' : undefined, children: c.header }) }, c.header))) }) }), _jsx("tbody", { children: rows.map((item) => (_jsx("tr", { children: columns.map((c, i) => {
                             /* The first cell is the row's name, so it is a `<th scope="row">`
                                -- that is what lets a reader ask "which row am I in" and get
                                an answer instead of a cell index. */

package/dist/components/Toast.js

@@ -115,5 +115,5 @@ export function ToastHost({ children }) {
        React error. */
     if (outer)
         return _jsx(_Fragment, { children: children });
-    return (_jsxs(Ctx.Provider, { value: push, children: [children, _jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: polite }), _jsx("div", { className: "sr-only", "aria-live": "assertive", "aria-atomic": "true", children: assertive }), _jsx(ToastRegion, { queue: queue, className: "toasts", children: ({ toast }) => (_jsxs(AriaToast, { toast: toast, className: `toast toast-${toast.content.tone}`, children: [_jsx(Icon, { name: MARK[toast.content.tone], size: 16, className: "toast-mark" }), _jsx(ToastContent, { className: "grow", children: _jsx(Text, { slot: "title", children: toast.content.text }) }), _jsx(Button, { slot: "close", className: "ghost size-sm", "aria-label": "Dismiss", children: _jsx(Icon, { name: "close", size: 14 }) })] })) })] }));
+    return (_jsxs(Ctx.Provider, { value: push, children: [children, _jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: polite }), _jsx("div", { className: "sr-only", "aria-live": "assertive", "aria-atomic": "true", children: assertive }), _jsx(ToastRegion, { queue: queue, className: "toasts", children: ({ toast }) => (_jsxs(AriaToast, { toast: toast, className: `toast toast-${toast.content.tone}`, children: [_jsx(Icon, { name: MARK[toast.content.tone], size: 16, className: "toast-mark" }), _jsx(ToastContent, { className: "ctl-grow", children: _jsx(Text, { slot: "title", children: toast.content.text }) }), _jsx(Button, { slot: "close", className: "toast-close", "aria-label": "Dismiss", children: _jsx(Icon, { name: "close", size: 14 }) })] })) })] }));
 }

package/dist/components/Tooltip.js

@@ -58,12 +58,26 @@ export default function Tooltip({ label, align = 'right', mark, className, child
        is also why `overflow: hidden` on any ancestor no longer clips it -- the
        Permissions pane's horizontal scrollbar, found by hiding one class at a
        time, was this box sitting in the scrollable overflow. */
-    return (_jsxs(TooltipTrigger, { delay: 0, closeDelay: 150, children: [_jsx(Focusable, { children: _jsx("span", { className: `explain explain-${align}${className ? ` ${className}` : ''}`, 
+    return (_jsxs(TooltipTrigger, { delay: 0, closeDelay: 150, children: [_jsx(Focusable, { children: _jsx("span", { 
+                    /* `explain` stays as the hook: the mark brightens on hover and on
+                       focus of this element, which is a parent state reaching a child.
+                       The rest is this element's own. `text-transform` and
+                       `letter-spacing` are reset because one of these sits inside a
+                       heading, and headings here are uppercase and tracked out. */
+                    className: [
+                        'explain',
+                        `explain-${align}`,
+                        'relative flex-none inline-flex items-center ml-2 cursor-help',
+                        'normal-case tracking-normal font-normal',
+                        className,
+                    ]
+                        .filter(Boolean)
+                        .join(' '), 
                     /* A role, because a name on a role-less span is prohibited -- axe's
                        `aria-prohibited-attr`, found the first time this was scanned. `img`
                        rather than `button`: the mark is a glyph that reveals help, not a
                        control that does something, and `button` would promise an action
                        and -- inside the `<label>` rows these sit in -- invite a click that
                        the label forwards to the setting behind it. */
-                    role: "img", "aria-label": mark ? label : `About ${label}`, children: mark ?? (_jsx("span", { className: "explain-mark", "aria-hidden": "true", children: "?" })) }) }), _jsx(AriaTooltip, { className: "explain-tip", placement: align === 'left' ? 'bottom end' : 'bottom start', offset: 8, crossOffset: align === 'left' ? 6 : -6, children: children })] }));
+                    role: "img", "aria-label": mark ? label : `About ${label}`, children: mark ?? (_jsx("span", { className: "explain-mark w-[18px] h-[18px] rounded-full border border-border text-muted text-xs leading-[16px] text-center", "aria-hidden": "true", children: "?" })) }) }), _jsx(AriaTooltip, { className: "explain-tip", placement: align === 'left' ? 'bottom end' : 'bottom start', offset: 8, crossOffset: align === 'left' ? 6 : -6, children: children })] }));
 }

package/dist/components/Tour.js

@@ -111,5 +111,5 @@ export default function Tour({ stops, onDone, storageKey, }) {
                     height: box.height + 12,
                 } }), _jsxs("div", { ref: card, className: "tour-card", style: style, 
                 // biome-ignore lint/a11y/useSemanticElements: a <dialog> brings the top layer, ::backdrop and showModal() focus semantics; this is an anchored coach-mark card that positions itself and manages its own focus, so the role is the faithful choice.
-                role: "dialog", "aria-modal": "true", "aria-labelledby": "tour-title", tabIndex: -1, children: [_jsx("strong", { id: "tour-title", className: "tour-title", children: stop.title }), _jsx("p", { className: "tour-body", children: stop.body }), _jsxs("div", { className: "tour-actions", children: [_jsxs("span", { className: "tour-count mono", children: [at + 1, " of ", live.length] }), _jsx("span", { className: "grow" }), _jsx(Button, { kind: "ghost", size: "sm", onPress: finish, children: "Skip" }), _jsx(Button, { kind: "primary", size: "sm", onPress: next, children: at + 1 < live.length ? 'Next' : 'Done' })] })] })] }), document.body);
+                role: "dialog", "aria-modal": "true", "aria-labelledby": "tour-title", tabIndex: -1, children: [_jsx("strong", { id: "tour-title", className: "tour-title", children: stop.title }), _jsx("p", { className: "tour-body", children: stop.body }), _jsxs("div", { className: "tour-actions", children: [_jsxs("span", { className: "tour-count mono", children: [at + 1, " of ", live.length] }), _jsx("span", { className: "ctl-grow" }), _jsx(Button, { kind: "ghost", size: "sm", onPress: finish, children: "Skip" }), _jsx(Button, { kind: "primary", size: "sm", onPress: next, children: at + 1 < live.length ? 'Next' : 'Done' })] })] })] }), document.body);
 }