@wtfalch/design 0.9.1 → 0.10.0

package/README.md

@@ -13,9 +13,12 @@ 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:
+draws them changes. 0.9.0 did exactly that to several of them, and 0.10.0
+deleted 41 more: the components that drew them draw themselves now, so the
+rules had no reader left.
+
+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; }

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: "ctl-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: "flex-none grid place-items-center mt-px opacity-90", "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/Checkbox.js

@@ -50,5 +50,5 @@ export default function Checkbox({ label, hint, meta, checked, defaultChecked, o
            the controlled and uncontrolled cases are the same call: pass both and
            let whichever was given decide. Passing `isSelected={false}` here
            instead would silently pin every uncontrolled box to off. */
-        isSelected: checked, defaultSelected: defaultChecked, onChange: onChange, name: name, value: value, isDisabled: disabled, children: _jsxs("span", { className: "choice-body", children: [_jsx("span", { className: "choice-name", children: label }), hint && _jsx("span", { className: "choice-why", children: hint }), meta && _jsx("span", { className: "choice-meta", children: meta })] }) }));
+        isSelected: checked, defaultSelected: defaultChecked, onChange: onChange, name: name, value: value, isDisabled: disabled, children: _jsxs("span", { className: "choice-body", children: [_jsx("span", { className: "choice-name", children: label }), hint && _jsx("span", { className: "choice-why", children: hint }), meta && _jsx("span", { className: "text-muted text-xs font-mono", children: meta })] }) }));
 }

package/dist/components/Command.js

@@ -31,14 +31,14 @@ export default function Command({ open, onOpenChange, groups, placeholder = 'Sea
                delete before they can search for anything else. */
             if (!next)
                 setQuery('');
-        }, 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 ? (
+        }, isDismissable: true, children: _jsx(AriaModal, { className: `cmd${className ? ` ${className}` : ''}`, children: _jsx(Dialog, { className: "outline-none flex flex-col min-h-0", "aria-label": label, children: ({ close }) => (_jsxs(Autocomplete, { inputValue: query, onInputChange: setQuery, filter: () => true, children: [_jsxs(SearchField, { className: "flex items-center gap-2 py-3 px-4 border-b border-border", "aria-label": label, autoFocus: true, children: [_jsx(Icon, { name: "chat", className: "flex-none w-4 h-4 text-muted" }), _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, { 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: "p-2 overflow-auto overscroll-contain outline-none min-h-0", "aria-label": label, selectionMode: "none", children: shown.map((group) => (_jsxs(ListBoxSection, { children: [_jsx(Header, { className: "pt-2 px-2 pb-1 text-2xs uppercase tracking-normal text-muted", 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, { children: command.shortcut })] }, command.id)))] }, group.title))) }))] })) }) }) }));
+                                        }, children: [command.icon && _jsx(Icon, { name: command.icon, className: "cmd-icon" }), _jsxs("span", { className: "flex-[1_1_auto] min-w-0 grid", children: [_jsx(Text, { slot: "label", className: "overflow-hidden text-ellipsis whitespace-nowrap", 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/DangerZone.js

@@ -53,5 +53,5 @@ match, label, busyLabel, busy = false, disabled = false, onConfirm,
 unavailable, }) {
     const [asking, setAsking] = useState(false);
     const [typed, setTyped] = useState('');
-    return (_jsxs("div", { className: `danger-act${kind === 'plain' ? ' plain' : ''}`, children: [_jsx("h4", { children: title }), _jsx("div", { className: "set-hint", children: description }), unavailable ? (_jsx("div", { className: "set-hint danger-unavailable", children: unavailable })) : confirm === 'type' ? (_jsx(_Fragment, { children: _jsxs("div", { className: "row danger-row field-row", children: [_jsx(Field, { label: "Confirm", hint: _jsxs(_Fragment, { children: ["Type ", _jsx("code", { className: "mono danger-name", children: match }), " to confirm."] }), children: (f) => (_jsx(Input, { ...f, mono: true, value: typed, disabled: disabled || busy, autoComplete: "off", spellCheck: false, onChange: (e) => setTyped(e.target.value) })) }), _jsx(Button, { kind: "danger", isDisabled: disabled || busy || typed.trim() !== match, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label })] }) })) : confirm === 'none' ? (_jsx("div", { className: "row danger-row", children: _jsx(Button, { kind: kind === 'plain' ? 'primary' : 'danger', isDisabled: disabled || busy, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label }) })) : asking ? (_jsxs("div", { className: "row danger-row", children: [_jsx(Button, { kind: "danger", isDisabled: disabled || busy, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label }), _jsx(Button, { isDisabled: disabled || busy, onPress: () => setAsking(false), children: "Cancel" })] })) : (_jsx("div", { className: "row danger-row", children: _jsx(Button, { kind: "danger", isDisabled: disabled || busy, onPress: () => setAsking(true), children: label }) }))] }));
+    return (_jsxs("div", { className: `danger-act${kind === 'plain' ? ' plain' : ''}`, children: [_jsx("h4", { children: title }), _jsx("div", { className: "set-hint", children: description }), unavailable ? (_jsx("div", { className: "set-hint mt-2", children: unavailable })) : confirm === 'type' ? (_jsx(_Fragment, { children: _jsxs("div", { className: "row danger-row field-row", children: [_jsx(Field, { label: "Confirm", hint: _jsxs(_Fragment, { children: ["Type ", _jsx("code", { className: "mono danger-name", children: match }), " to confirm."] }), children: (f) => (_jsx(Input, { ...f, mono: true, value: typed, disabled: disabled || busy, autoComplete: "off", spellCheck: false, onChange: (e) => setTyped(e.target.value) })) }), _jsx(Button, { kind: "danger", isDisabled: disabled || busy || typed.trim() !== match, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label })] }) })) : confirm === 'none' ? (_jsx("div", { className: "row danger-row", children: _jsx(Button, { kind: kind === 'plain' ? 'primary' : 'danger', isDisabled: disabled || busy, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label }) })) : asking ? (_jsxs("div", { className: "row danger-row", children: [_jsx(Button, { kind: "danger", isDisabled: disabled || busy, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label }), _jsx(Button, { isDisabled: disabled || busy, onPress: () => setAsking(false), children: "Cancel" })] })) : (_jsx("div", { className: "row danger-row", children: _jsx(Button, { kind: "danger", isDisabled: disabled || busy, onPress: () => setAsking(true), children: label }) }))] }));
 }

package/dist/components/Empty.js

@@ -50,7 +50,14 @@ export default function Empty({ icon, illustration, children, action, className,
             /* `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 })] }));
+               theme.
+    
+               This wanted a rule of its own for a while. `.illo` sets
+               `color: inherit`, and while the package's sheets were unlayered an
+               unlayered declaration beat a layered utility whatever the
+               specificity, so `text-muted` lost silently and the figure came out
+               full text black beside a muted sentence. Wrapping the sheets in
+               `@layer components` put them *below* `@layer utilities` in the
+               declared order, and the utility has won ever since. */
+            _jsx(Illustration, { name: illustration, size: 160, className: "text-muted" })) : (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/Field.js

@@ -53,5 +53,5 @@ export default function Field({ label, hint, error, required, children, labelHid
         'aria-describedby': [hint && hintId, error && errorId].filter(Boolean).join(' ') || undefined,
         'aria-invalid': error ? true : undefined,
     };
-    return (_jsxs("div", { className: `field field-${layout}-layout${error ? ' field-bad' : ''}${className ? ` ${className}` : ''}`, children: [_jsxs("label", { id: labelId, className: labelHidden ? 'sr-only' : 'field-label', htmlFor: id, children: [label, required && (_jsxs("span", { className: "field-required", "aria-label": "required", children: [' ', "*"] }))] }), hint && (_jsx("p", { className: "field-hint", id: hintId, children: hint })), typeof children === 'function' ? (children(wiring)) : (_jsx(FieldWiringContext.Provider, { value: wiring, children: children })), error && (_jsx("p", { className: "field-error", id: errorId, role: "alert", children: error }))] }));
+    return (_jsxs("div", { className: `field field-${layout}-layout${error ? ' field-bad' : ''}${className ? ` ${className}` : ''}`, children: [_jsxs("label", { id: labelId, className: labelHidden ? 'sr-only' : 'field-label', htmlFor: id, children: [label, required && (_jsxs("span", { className: "text-muted", "aria-label": "required", children: [' ', "*"] }))] }), hint && (_jsx("p", { className: "field-hint", id: hintId, children: hint })), typeof children === 'function' ? (children(wiring)) : (_jsx(FieldWiringContext.Provider, { value: wiring, children: children })), error && (_jsx("p", { className: "field-error", id: errorId, role: "alert", children: error }))] }));
 }

package/dist/components/Identity.js

@@ -39,5 +39,5 @@ export default function Identity({ name, address, kind = 'line', size = 'md', as
         /* The hue is a variable and the stylesheet decides what to do with it:
            a `background` written here would be a colour the theme cannot reach,
            and the discs would stay saturated on Paper. */
-        style: { '--ident-hue': hueOf(address) }, children: [_jsx("span", { className: "ident-disc", "aria-hidden": "true", children: initials }), _jsxs("span", { className: "ident-text", children: [_jsx("span", { className: "ident-name", children: shown }), kind === 'full' && shown !== address && _jsx("span", { className: "ident-address", children: address })] }), aside && _jsx("span", { className: "ident-aside", children: aside }), onRemove && (_jsx("button", { type: "button", className: "ident-remove", onClick: onRemove, "aria-label": `Remove ${shown}`, children: _jsx("svg", { viewBox: "0 0 24 24", width: "12", height: "12", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", d: "M6 6l12 12M18 6L6 18" }) }) }))] }));
+        style: { '--ident-hue': hueOf(address) }, children: [_jsx("span", { className: "ident-disc", "aria-hidden": "true", children: initials }), _jsxs("span", { className: "grid min-w-0", children: [_jsx("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap font-normal", children: shown }), kind === 'full' && shown !== address && (_jsx("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap text-xs text-muted", children: address }))] }), aside && _jsx("span", { className: "flex-none text-muted text-xs", children: aside }), onRemove && (_jsx("button", { type: "button", className: "ident-remove", onClick: onRemove, "aria-label": `Remove ${shown}`, children: _jsx("svg", { viewBox: "0 0 24 24", width: "12", height: "12", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", d: "M6 6l12 12M18 6L6 18" }) }) }))] }));
 }

package/dist/components/Menu.js

@@ -17,7 +17,7 @@ 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, { 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));
+        textValue: typeof item.label === 'string' ? item.label : item.id, children: [item.icon && _jsx(Icon, { name: item.icon, className: "menu-icon" }), _jsxs("span", { className: "flex-[1_1_auto] min-w-0 grid", children: [_jsx(Text, { slot: "label", className: "overflow-hidden text-ellipsis whitespace-nowrap", 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;

package/dist/components/Pill.d.ts

@@ -22,8 +22,7 @@
  * label from 4.7:1 to 3.9:1. The tones mix at 10% into the panel for that
  * reason and not for taste.
  *
- * This was the second-most-copied markup in the app — `<span className="pill
- * pill-info">` at every call site, and a gallery page teaching it. A page that
+ * This was the second-most-copied markup in the app — `<span className="pill * pill-info">` at every call site, and a gallery page teaching it. A page that
  * documents hand-written markup is a page that will be copied.
  */
 export default function Pill({ tone, quiet, inRow, className, children, ...rest }: {

package/dist/components/Pill.js

@@ -23,8 +23,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * label from 4.7:1 to 3.9:1. The tones mix at 10% into the panel for that
  * reason and not for taste.
  *
- * This was the second-most-copied markup in the app — `<span className="pill
- * pill-info">` at every call site, and a gallery page teaching it. A page that
+ * This was the second-most-copied markup in the app — `<span className="pill * pill-info">` at every call site, and a gallery page teaching it. A page that
  * documents hand-written markup is a page that will be copied.
  */
 export default function Pill({ tone, quiet, inRow, className, children, ...rest }) {

package/dist/components/Popover.js

@@ -8,5 +8,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
    line at the package's front door. */
 import { Popover as AriaPopover, Dialog, DialogTrigger, } from 'react-aria-components';
 export default function Popover({ trigger, children, placement = 'bottom start', label, offset = 6, open, onOpenChange, className, }) {
-    return (_jsxs(DialogTrigger, { isOpen: open, onOpenChange: onOpenChange, children: [trigger, _jsx(AriaPopover, { className: `pop${className ? ` ${className}` : ''}`, placement: placement, offset: offset, children: _jsx(Dialog, { className: "pop-body", "aria-label": label, children: ({ close }) => (typeof children === 'function' ? children(close) : children) }) })] }));
+    return (_jsxs(DialogTrigger, { isOpen: open, onOpenChange: onOpenChange, children: [trigger, _jsx(AriaPopover, { className: `pop${className ? ` ${className}` : ''}`, placement: placement, offset: offset, children: _jsx(Dialog, { className: "p-3 outline-none text-text text-sm", "aria-label": label, children: ({ close }) => (typeof children === 'function' ? children(close) : children) }) })] }));
 }

package/dist/components/Rows.js

@@ -45,14 +45,14 @@ export function Rows({ children, empty, label, look = 'list', className, }) {
     const items = Array.isArray(children) ? children.filter(Boolean) : children;
     const none = Array.isArray(items) ? items.length === 0 : !items;
     if (none) {
-        return empty ? _jsx("div", { className: "set-hint rows-empty", children: empty }) : null;
+        return empty ? _jsx("div", { className: "set-hint py-3", children: empty }) : null;
     }
     return (_jsx("div", { className: `rows${look === 'pick' ? ' rows-pick' : ''}${className ? ` ${className}` : ''}`, 
         // biome-ignore lint/a11y/useSemanticElements: valid ARIA on a div; a <ul> brings the browser's list reset and the stylesheet and 204 baselines key on `div.rows`.
         role: "list", "aria-label": label, children: items }));
 }
 export function Row({ name, pills, hint, trail, actions, below, onClick, tone, picked, loading, waiting, align = 'center', className, }) {
-    const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "row-subject", children: [_jsxs("span", { className: "named", children: [_jsx("span", { className: "truncate", children: name }), pills] }), hint && _jsx("div", { className: "set-hint", children: hint })] }), trail && _jsx("span", { className: "row-trail set-hint mono", children: trail })] }));
+    const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "row-subject", children: [_jsxs("span", { className: "named", children: [_jsx("span", { className: "truncate", children: name }), pills] }), hint && _jsx("div", { className: "set-hint", children: hint })] }), trail && _jsx("span", { className: "flex-none ml-auto whitespace-nowrap set-hint mono", children: trail })] }));
     const rowClass = `set-row rows-row${tone ? ` rows-${tone}` : ''}` +
         `${align === 'start' ? ' rows-top' : ''}${picked ? ' is-picked' : ''}` +
         `${loading ? ' is-loading' : ''}${waiting ? ' is-waiting' : ''}` +

package/dist/components/Slider.js

@@ -88,7 +88,7 @@ export default function Slider({ label, hint, value, min, max, step, onChange, f
     const risk = danger
         ? Math.max(0, Math.min(1, (live - danger.from) / ((danger.to ?? max) - danger.from || 1)))
         : 0;
-    return (_jsxs("div", { className: `slider-row slider-${size}${disabled ? ' is-disabled' : ''}${className ? ` ${className}` : ''}`, children: [_jsxs("label", { htmlFor: id, className: labelHidden ? 'sr-only' : 'slider-body', children: [_jsx("span", { className: "slider-label", children: label }), hint && _jsx("span", { className: "slider-hint", children: hint })] }), _jsxs("div", { className: "slider-control", children: [_jsxs("span", { className: "slider-box", children: [_jsx("span", { className: "slider-track", style: {
+    return (_jsxs("div", { className: `slider-row slider-${size}${disabled ? ' is-disabled' : ''}${className ? ` ${className}` : ''}`, children: [_jsxs("label", { htmlFor: id, className: labelHidden ? 'sr-only' : 'flex-[1_1_260px] min-w-0 grid gap-px', children: [_jsx("span", { className: "text-text", children: label }), hint && _jsx("span", { className: "slider-hint", children: hint })] }), _jsxs("div", { className: "slider-control", children: [_jsxs("span", { className: "slider-box", children: [_jsx("span", { className: "slider-track", style: {
                                     '--slider-f': String(fill / 100),
                                     '--slider-risk': `${Math.round(risk * 100)}%`,
                                 }, children: _jsx("input", { id: id, type: "range", className: "slider", min: min, max: max, step: step ?? 'any', value: live, disabled: disabled, "aria-valuetext": format(live), ref: input, onKeyDown: () => {

package/dist/components/SplitPane.js

@@ -102,9 +102,9 @@ export default function SplitPane({ children, direction = 'row', defaultSize = 3
             return;
         event.preventDefault();
     };
-    return (_jsxs("div", { ref: frame, className: `split dir-${direction}${className ? ` ${className}` : ''}`, style: { '--split': `${size}%` }, children: [_jsx("div", { className: "split-pane split-first", id: firstPaneId, children: first }), _jsx("div", { role: "separator", tabIndex: 0, "aria-label": label, "aria-orientation": direction === 'row' ? 'vertical' : 'horizontal', "aria-controls": firstPaneId, "aria-valuenow": Math.round(size), "aria-valuemin": min, "aria-valuemax": max, className: "split-handle", onPointerDown: onPointerDown, onKeyDown: onKeyDown, 
+    return (_jsxs("div", { ref: frame, className: `split dir-${direction}${className ? ` ${className}` : ''}`, style: { '--split': `${size}%` }, children: [_jsx("div", { className: "min-w-0 min-h-0 overflow-hidden flex flex-col flex-[0_0_var(--split)]", id: firstPaneId, children: first }), _jsx("div", { role: "separator", tabIndex: 0, "aria-label": label, "aria-orientation": direction === 'row' ? 'vertical' : 'horizontal', "aria-controls": firstPaneId, "aria-valuenow": Math.round(size), "aria-valuemin": min, "aria-valuemax": max, className: "split-handle", onPointerDown: onPointerDown, onKeyDown: onKeyDown, 
                 /* Back to where it started. A drag has no undo, and the size is
                    remembered, so without this a mis-drag is permanent until you get it
                    right by hand. */
-                onDoubleClick: () => move(defaultSize), children: _jsx("span", { className: "split-grip", "aria-hidden": "true" }) }), _jsx("div", { className: "split-pane split-second", children: second })] }));
+                onDoubleClick: () => move(defaultSize), children: _jsx("span", { className: "split-grip", "aria-hidden": "true" }) }), _jsx("div", { className: "min-w-0 min-h-0 overflow-hidden flex flex-col flex-[1_1_0]", children: second })] }));
 }

package/dist/components/Table.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 empty ? _jsx("div", { className: "set-hint py-3", children: empty }) : null;
     }
     return (
     /* The one thing about a table that is a property of one element. Its

package/dist/components/Tabs.js

@@ -64,7 +64,7 @@ export default function Tabs({ tabs, value, onChange, label, orientation = 'hori
                         tabs[i - 1]?.group !== t.group &&
                         (() => {
                             const g = groups.find((x) => x.id === t.group);
-                            return g ? (_jsxs("div", { className: "tab-group", role: "presentation", children: [_jsx("span", { className: "tab-group-label", children: g.label }), g.hint && _jsx("span", { className: "tab-hint", children: g.hint })] })) : null;
+                            return g ? (_jsxs("div", { className: "tab-group", role: "presentation", children: [_jsx("span", { className: "block text-sm font-strong text-text", children: g.label }), g.hint && (_jsx("span", { className: "block mt-px text-xs text-muted leading-[1.35]", children: g.hint }))] })) : null;
                         })(), _jsxs("button", { role: "tab", type: "button", className: `tab${t.id === value ? ' on' : ''}${grouped && t.group ? ' in-group' : ''}`, "aria-selected": t.id === value, disabled: t.disabled, 
                         /* One tab stop for the whole strip: everything but the current tab is
                          taken out of the tab order, and the arrows move between them. */
@@ -85,5 +85,5 @@ export default function Tabs({ tabs, value, onChange, label, orientation = 'hori
                                 e.preventDefault();
                                 move(tabs.length, -1);
                             }
-                        }, children: [_jsx("span", { className: "tab-label", children: t.label }), t.badge && (_jsx("span", { className: "tab-badge", title: t.badgeTitle, "aria-label": t.badgeTitle, children: t.badge })), t.hint && orientation === 'vertical' && !(grouped && t.group) && (_jsx("span", { className: "tab-hint", children: t.hint }))] })] }, t.id))), _jsx("span", { className: "tabs-rule", "aria-hidden": "true" })] }));
+                        }, children: [_jsx("span", { className: "tab-label", children: t.label }), t.badge && (_jsx("span", { className: "tab-badge", title: t.badgeTitle, "aria-label": t.badgeTitle, children: t.badge })), t.hint && orientation === 'vertical' && !(grouped && t.group) && (_jsx("span", { className: "block mt-px text-xs text-muted leading-[1.35]", children: t.hint }))] })] }, t.id))), _jsx("span", { className: "tabs-rule", "aria-hidden": "true" })] }));
 }

package/dist/components/Toggle.js

@@ -158,7 +158,7 @@ export default function Toggle({ label, hint, checked, onChange, disabled, said,
         /* Read-only, not disabled, while a request is out: focus stays where it
            is and the row does not dim, it just refuses a second answer until
            the first has been taken. */
-        isReadOnly: pending, children: [_jsxs("span", { className: labelHidden ? 'sr-only' : 'switch-body', children: [_jsx("span", { className: "switch-label", children: label }), hint && _jsx("span", { className: "switch-hint", children: hint })] }), said && _jsx("span", { className: "switch-said mono", children: said }), _jsx("span", { className: "toggle", "aria-hidden": "true", "data-held": held || undefined, "data-dragging": knob === null ? undefined : true, style: knob === null ? undefined : { '--knob-x': knob }, onPointerDown: (e) => {
+        isReadOnly: pending, children: [_jsxs("span", { className: labelHidden ? 'sr-only' : 'switch-body', children: [_jsx("span", { className: "text-text", children: label }), hint && _jsx("span", { className: "switch-hint", children: hint })] }), said && _jsx("span", { className: "flex-none text-xs text-muted mono", children: said }), _jsx("span", { className: "toggle", "aria-hidden": "true", "data-held": held || undefined, "data-dragging": knob === null ? undefined : true, style: knob === null ? undefined : { '--knob-x': knob }, onPointerDown: (e) => {
                     if (disabled || pending || e.button !== 0)
                         return;
                     e.stopPropagation();

package/dist/components/Tour.js

@@ -99,7 +99,11 @@ export default function Tour({ stops, onDone, storageKey, }) {
         bottom: below ? undefined : window.innerHeight - box.top + 14,
         left: Math.max(16, Math.min(box.left + box.width / 2 - 170, window.innerWidth - 356)),
     };
-    return createPortal(_jsxs("div", { className: "tour", onKeyDown: (e) => {
+    return createPortal(_jsxs("div", { 
+        /* Over everything and catching nothing: the scrim is painted by the
+           hole's own shadow, so there is no full-screen element here to swallow
+           a click meant for the page underneath. */
+        className: "fixed inset-0 z-[60] pointer-events-none", onKeyDown: (e) => {
             if (e.key === 'Escape')
                 finish();
             if (e.key === 'Enter' || e.key === 'ArrowRight')
@@ -111,5 +115,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: "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);
+                role: "dialog", "aria-modal": "true", "aria-labelledby": "tour-title", tabIndex: -1, children: [_jsx("strong", { id: "tour-title", className: "text-base", 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);
 }