@wtfalch/design 0.10.2 → 0.11.0

package/README.md

@@ -17,6 +17,12 @@ 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.
 
+0.11.0 went the other way and removed the rules that reached *through* a
+class, which is the same mistake seen from the other side. `.row > .switch-row`
+styled a Toggle by the container a caller had written round it, so the caller
+had to know to write `.row` -- a class no component here renders. Those are
+props now: `inRow` on `Toggle` and on `Field`, `tile` on `Checkbox`.
+
 If you need a card, render `<Card>`; if you need a row of your own, write it
 in the token vocabulary:
 

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 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 }) }))] }));
+    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: "danger-row danger-field-row", children: [_jsx(Field, { inRow: true, 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: "danger-row", children: _jsx(Button, { kind: kind === 'plain' ? 'primary' : 'danger', isDisabled: disabled || busy, onPress: onConfirm, children: busy ? (busyLabel ?? '…') : label }) })) : asking ? (_jsxs("div", { className: "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: "danger-row", children: _jsx(Button, { kind: "danger", isDisabled: disabled || busy, onPress: () => setAsking(true), children: label }) }))] }));
 }

package/dist/components/Field.d.ts

@@ -1,6 +1,6 @@
 import { type FieldWiring } from './fieldWiring.js';
 export type { FieldWiring } from './fieldWiring.js';
-export default function Field({ label, hint, error, required, children, labelHidden, layout, className, }: {
+export default function Field({ label, hint, error, required, children, labelHidden, layout, inRow, className, }: {
     /** What the field is. Always given -- there is no unlabelled case, only
      *  fields whose label is hidden. */
     label: string;
@@ -39,5 +39,12 @@ export default function Field({ label, hint, error, required, children, labelHid
      * rendered somewhere the provider does not reach.
      */
     children: React.ReactNode | ((field: FieldWiring) => React.ReactNode);
+    /** Sitting in a row of controls rather than in a column of settings.
+     *
+     *  This was a rule keyed on the container -- `.field-row > .field` -- which
+     *  meant the package reaching through a class the caller had to know to
+     *  write, and `.field-row` is not a class this package hands out. A prop says the
+     *  same thing and travels with the component. */
+    inRow?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/dist/components/Field.js

@@ -39,7 +39,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  */
 import { useId } from 'react';
 import { FieldWiringContext } from './fieldWiring.js';
-export default function Field({ label, hint, error, required, children, labelHidden, layout = 'stack', className, }) {
+export default function Field({ label, hint, error, required, children, labelHidden, layout = 'stack', inRow, className, }) {
     const id = useId();
     const hintId = `${id}-hint`;
     const errorId = `${id}-error`;
@@ -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: "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 }))] }));
+    return (_jsxs("div", { className: `field field-${layout}-layout${error ? ' field-bad' : ''}${inRow ? ' field-in-row' : ''}${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/Toggle.d.ts

@@ -1,4 +1,4 @@
-export default function Toggle({ label, hint, checked, onChange, disabled, said, labelHidden, size, className, }: {
+export default function Toggle({ label, hint, checked, onChange, disabled, said, labelHidden, size, inRow, className, }: {
     label: React.ReactNode;
     /** What it does, or what turning it off costs. Under the label, in the same
      *  column, so a long explanation does not push the switch off its row. */
@@ -22,5 +22,12 @@ export default function Toggle({ label, hint, checked, onChange, disabled, said,
     /** The same three the rest of the controls take. `sm` for a switch in a
      *  toolbar or a dense row; `lg` where it is the only thing on the screen. */
     size?: 'sm' | 'md' | 'lg';
+    /** Sitting in a row of controls rather than in a column of settings.
+     *
+     *  This was a rule keyed on the container -- `.row > .switch-row` -- which
+     *  meant the package reaching through a class the caller had to know to
+     *  write, and `.row` is not a class this package hands out. A prop says the
+     *  same thing and travels with the component. */
+    inRow?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/dist/components/Toggle.js

@@ -49,7 +49,7 @@ const KNOB = { sm: 10, md: 12, lg: 16 };
  *  than pressed. Six is over the jitter and still a third of the way across
  *  the shortest track. */
 const SLOP = 6;
-export default function Toggle({ label, hint, checked, onChange, disabled, said, labelHidden, size = 'md', className, }) {
+export default function Toggle({ label, hint, checked, onChange, disabled, said, labelHidden, size = 'md', inRow, className, }) {
     /* React Aria's `Switch` is the `<label>`: it owns a visually-hidden
        `<input type="checkbox" role="switch">` and stamps `data-selected`,
        `data-disabled`, `data-focus-visible` and `data-pressed` on the label. So
@@ -154,7 +154,7 @@ export default function Toggle({ label, hint, checked, onChange, disabled, said,
             return 0;
         return Math.min(1, Math.max(0, (x - box.left - 2 - knobWidth / 2) / travel));
     };
-    return (_jsxs(Switch, { ref: rowRef, className: `switch-row switch-${size}${className ? ` ${className}` : ''}`, isSelected: shown, onChange: commit, isDisabled: disabled, 
+    return (_jsxs(Switch, { ref: rowRef, className: `switch-row switch-${size}${inRow ? ' switch-in-row' : ''}${className ? ` ${className}` : ''}`, isSelected: shown, onChange: commit, isDisabled: disabled, 
         /* 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. */

package/dist/styles/index.css

@@ -1243,13 +1243,6 @@ select:disabled { opacity: 0.45; cursor: not-allowed; }
   to { transform: scaleX(0); }
 }
 
-/* (The bordered head bar that used to live here is gone. It was a second
-   `.card-head` -- same name, different thing -- and the only place it was ever
-   used was the gallery page documenting it. A card that holds rows now takes
-   `title` like any other, and the header the component draws is the one
-   header.) */
-.row { display: flex; align-items: center; gap: var(--space-3); }
-
 .ctl-grow { flex: 1; min-width: 0; }
 
 .mono { font-family: var(--font-mono); font-size: var(--text-sm); }
@@ -1510,13 +1503,6 @@ input:active, textarea:active, select:active { transform: none; }
    template are allowed to diverge, and this is only saying that they have. */
 .set-hint.drifted { color: var(--warn); }
 
-/* One applet, alone on the page, at `/applet/<id>`. Fills the window: there is
-   no grid here to decide a height, and a screenshot of an applet letterboxed
-   inside a page is mostly not the applet. */
-.bare { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
-
-.bare > * { flex: 1; min-height: 0; }
-
 /* A round is in flight. On the button that asks for one, because that is where
    you are looking when you have just pressed it -- and not in the foot, which
    would flicker every thirty seconds on a tile that is working perfectly. */
@@ -1864,7 +1850,15 @@ input:active, textarea:active, select:active { transform: none; }
 
 .danger-act > .set-hint + .set-hint { margin-top: var(--space-1); }
 
-.danger-row { margin-top: var(--space-2); gap: var(--space-2); align-items: center; }
+/* `display: flex` is here now. These rows carried `.row` as well, which is a
+   class no component of this package renders -- it only ever reached them
+   because a consumer's stylesheet happened to define it too. */
+.danger-row {
+  display: flex;
+  margin-top: var(--space-2);
+  gap: var(--space-2);
+  align-items: center;
+}
 
 .danger-row > input { min-width: 0; }
 
@@ -1886,15 +1880,15 @@ input:active, textarea:active, select:active { transform: none; }
   column-gap: var(--space-3);
 }
 
-.field-row { align-items: flex-end; gap: var(--space-2); }
+.danger-field-row { align-items: flex-end; gap: var(--space-2); }
 
-.field-row > button { flex: none; }
+.danger-field-row > button { flex: none; }
 
 /* Two forms one under the other, whose buttons say different words -- "Add"
    and "Block". Sized to their text they came out different widths, and two
    controls in the same column at the same indent that do not line up read as
    an accident rather than as a pair. */
-.field-row > button { min-width: 9ch; }
+.danger-field-row > button { min-width: 9ch; }
 }
 
 /* ---- ./callout.css ---- */
@@ -2225,9 +2219,12 @@ input:active, textarea:active, select:active { transform: none; }
 /* Sized to its words, for a switch that sits in a row of other controls rather
    than owning a row of its own. `flex: 1` there would push the label away from
    the switch by the whole width of the bar. */
-.row > .switch-row { flex: none; padding-block: 0; }
+/* `inRow`: a toggle beside other controls rather than in a column of
+   settings. Was `.row > .switch-row`, which reached through `.row` -- a class
+   no component here renders. */
+.switch-in-row { flex: none; padding-block: 0; }
 
-.row > .switch-row .switch-body { flex: none; }
+.switch-in-row .switch-body { flex: none; }
 
 /* The opposite case: a switch that *is* the row, with something small beside it
    -- a tooltip, a state word. `.set-row` wraps, so a switch that does not grow
@@ -3816,7 +3813,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* Fields stacked down a form. Wider than the gap inside one field, so the
    label of the next belongs to the input under it rather than to the error
    above it. */
-.field-row > .field { flex: 1; min-width: 0; }
+/* `inRow`: a field sharing a line with other controls rather than stacked in a
+   column. Was `.field-row > .field`, which reached through a container class
+   the caller had to write and this package does not hand out. */
+.field-in-row { flex: 1; min-width: 0; }
 
 /* A password with an eye -- `Input type="password"`.
    A grid rather than `position: absolute`: both children take the one cell, the

package/dist/tf.css

@@ -1513,13 +1513,6 @@ select:disabled { opacity: 0.45; cursor: not-allowed; }
   to { transform: scaleX(0); }
 }
 
-/* (The bordered head bar that used to live here is gone. It was a second
-   `.card-head` -- same name, different thing -- and the only place it was ever
-   used was the gallery page documenting it. A card that holds rows now takes
-   `title` like any other, and the header the component draws is the one
-   header.) */
-.row { display: flex; align-items: center; gap: var(--space-3); }
-
 .ctl-grow { flex: 1; min-width: 0; }
 
 .mono { font-family: var(--font-mono); font-size: var(--text-sm); }
@@ -1780,13 +1773,6 @@ input:active, textarea:active, select:active { transform: none; }
    template are allowed to diverge, and this is only saying that they have. */
 .set-hint.drifted { color: var(--warn); }
 
-/* One applet, alone on the page, at `/applet/<id>`. Fills the window: there is
-   no grid here to decide a height, and a screenshot of an applet letterboxed
-   inside a page is mostly not the applet. */
-.bare { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
-
-.bare > * { flex: 1; min-height: 0; }
-
 /* A round is in flight. On the button that asks for one, because that is where
    you are looking when you have just pressed it -- and not in the foot, which
    would flicker every thirty seconds on a tile that is working perfectly. */
@@ -2134,7 +2120,15 @@ input:active, textarea:active, select:active { transform: none; }
 
 .danger-act > .set-hint + .set-hint { margin-top: var(--space-1); }
 
-.danger-row { margin-top: var(--space-2); gap: var(--space-2); align-items: center; }
+/* `display: flex` is here now. These rows carried `.row` as well, which is a
+   class no component of this package renders -- it only ever reached them
+   because a consumer's stylesheet happened to define it too. */
+.danger-row {
+  display: flex;
+  margin-top: var(--space-2);
+  gap: var(--space-2);
+  align-items: center;
+}
 
 .danger-row > input { min-width: 0; }
 
@@ -2156,15 +2150,15 @@ input:active, textarea:active, select:active { transform: none; }
   column-gap: var(--space-3);
 }
 
-.field-row { align-items: flex-end; gap: var(--space-2); }
+.danger-field-row { align-items: flex-end; gap: var(--space-2); }
 
-.field-row > button { flex: none; }
+.danger-field-row > button { flex: none; }
 
 /* Two forms one under the other, whose buttons say different words -- "Add"
    and "Block". Sized to their text they came out different widths, and two
    controls in the same column at the same indent that do not line up read as
    an accident rather than as a pair. */
-.field-row > button { min-width: 9ch; }
+.danger-field-row > button { min-width: 9ch; }
 }
 
 /* ---- ./callout.css ---- */
@@ -2495,9 +2489,12 @@ input:active, textarea:active, select:active { transform: none; }
 /* Sized to its words, for a switch that sits in a row of other controls rather
    than owning a row of its own. `flex: 1` there would push the label away from
    the switch by the whole width of the bar. */
-.row > .switch-row { flex: none; padding-block: 0; }
+/* `inRow`: a toggle beside other controls rather than in a column of
+   settings. Was `.row > .switch-row`, which reached through `.row` -- a class
+   no component here renders. */
+.switch-in-row { flex: none; padding-block: 0; }
 
-.row > .switch-row .switch-body { flex: none; }
+.switch-in-row .switch-body { flex: none; }
 
 /* The opposite case: a switch that *is* the row, with something small beside it
    -- a tooltip, a state word. `.set-row` wraps, so a switch that does not grow
@@ -4086,7 +4083,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* Fields stacked down a form. Wider than the gap inside one field, so the
    label of the next belongs to the input under it rather than to the error
    above it. */
-.field-row > .field { flex: 1; min-width: 0; }
+/* `inRow`: a field sharing a line with other controls rather than stacked in a
+   column. Was `.field-row > .field`, which reached through a container class
+   the caller had to write and this package does not hand out. */
+.field-in-row { flex: 1; min-width: 0; }
 
 /* A password with an eye -- `Input type="password"`.
    A grid rather than `position: absolute`: both children take the one cell, the

package/dist/valet.css

@@ -1517,13 +1517,6 @@ select:disabled { opacity: 0.45; cursor: not-allowed; }
   to { transform: scaleX(0); }
 }
 
-/* (The bordered head bar that used to live here is gone. It was a second
-   `.card-head` -- same name, different thing -- and the only place it was ever
-   used was the gallery page documenting it. A card that holds rows now takes
-   `title` like any other, and the header the component draws is the one
-   header.) */
-.row { display: flex; align-items: center; gap: var(--space-3); }
-
 .ctl-grow { flex: 1; min-width: 0; }
 
 .mono { font-family: var(--font-mono); font-size: var(--text-sm); }
@@ -1784,13 +1777,6 @@ input:active, textarea:active, select:active { transform: none; }
    template are allowed to diverge, and this is only saying that they have. */
 .set-hint.drifted { color: var(--warn); }
 
-/* One applet, alone on the page, at `/applet/<id>`. Fills the window: there is
-   no grid here to decide a height, and a screenshot of an applet letterboxed
-   inside a page is mostly not the applet. */
-.bare { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
-
-.bare > * { flex: 1; min-height: 0; }
-
 /* A round is in flight. On the button that asks for one, because that is where
    you are looking when you have just pressed it -- and not in the foot, which
    would flicker every thirty seconds on a tile that is working perfectly. */
@@ -2138,7 +2124,15 @@ input:active, textarea:active, select:active { transform: none; }
 
 .danger-act > .set-hint + .set-hint { margin-top: var(--space-1); }
 
-.danger-row { margin-top: var(--space-2); gap: var(--space-2); align-items: center; }
+/* `display: flex` is here now. These rows carried `.row` as well, which is a
+   class no component of this package renders -- it only ever reached them
+   because a consumer's stylesheet happened to define it too. */
+.danger-row {
+  display: flex;
+  margin-top: var(--space-2);
+  gap: var(--space-2);
+  align-items: center;
+}
 
 .danger-row > input { min-width: 0; }
 
@@ -2160,15 +2154,15 @@ input:active, textarea:active, select:active { transform: none; }
   column-gap: var(--space-3);
 }
 
-.field-row { align-items: flex-end; gap: var(--space-2); }
+.danger-field-row { align-items: flex-end; gap: var(--space-2); }
 
-.field-row > button { flex: none; }
+.danger-field-row > button { flex: none; }
 
 /* Two forms one under the other, whose buttons say different words -- "Add"
    and "Block". Sized to their text they came out different widths, and two
    controls in the same column at the same indent that do not line up read as
    an accident rather than as a pair. */
-.field-row > button { min-width: 9ch; }
+.danger-field-row > button { min-width: 9ch; }
 }
 
 /* ---- ./callout.css ---- */
@@ -2499,9 +2493,12 @@ input:active, textarea:active, select:active { transform: none; }
 /* Sized to its words, for a switch that sits in a row of other controls rather
    than owning a row of its own. `flex: 1` there would push the label away from
    the switch by the whole width of the bar. */
-.row > .switch-row { flex: none; padding-block: 0; }
+/* `inRow`: a toggle beside other controls rather than in a column of
+   settings. Was `.row > .switch-row`, which reached through `.row` -- a class
+   no component here renders. */
+.switch-in-row { flex: none; padding-block: 0; }
 
-.row > .switch-row .switch-body { flex: none; }
+.switch-in-row .switch-body { flex: none; }
 
 /* The opposite case: a switch that *is* the row, with something small beside it
    -- a tooltip, a state word. `.set-row` wraps, so a switch that does not grow
@@ -4090,7 +4087,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* Fields stacked down a form. Wider than the gap inside one field, so the
    label of the next belongs to the input under it rather than to the error
    above it. */
-.field-row > .field { flex: 1; min-width: 0; }
+/* `inRow`: a field sharing a line with other controls rather than stacked in a
+   column. Was `.field-row > .field`, which reached through a container class
+   the caller had to write and this package does not hand out. */
+.field-in-row { flex: 1; min-width: 0; }
 
 /* A password with an eye -- `Input type="password"`.
    A grid rather than `position: absolute`: both children take the one cell, the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wtfalch/design",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "description": "wtfalch's design system: themeable components on a fixed token vocabulary.",
   "keywords": [
     "design-system",