@wtfalch/design 0.10.1 → 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/Checkbox.d.ts

@@ -1,4 +1,4 @@
-export default function Checkbox({ label, hint, meta, checked, defaultChecked, onChange, name, value, disabled, className, }: {
+export default function Checkbox({ label, hint, meta, checked, defaultChecked, onChange, name, value, disabled, tile, className, }: {
     label: React.ReactNode;
     /** What choosing it means, or what it costs. Under the name. `hint`, the
      *  word `Toggle`, `Slider` and `Field` use for the same line; it was `why`. */
@@ -17,5 +17,15 @@ export default function Checkbox({ label, hint, meta, checked, defaultChecked, o
      *  which is rarely the word a Server Action wants to read. */
     value?: string;
     disabled?: boolean;
+    /** In a grid of tiles rather than a run of full-width rows.
+     *
+     *  The tick is positioned at the top right, and in a full-width row the
+     *  label never reaches it. In a tile it runs underneath, so the body needs
+     *  the room reserved. This was a `.choice-tiles .choice-body` rule, which
+     *  meant the package styling its own component through a class the caller
+     *  had to know to write on the container -- and there is no such container
+     *  component, so the class was only ever a private name in a consumer's
+     *  markup. A prop says the same thing and belongs to the component. */
+    tile?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/dist/components/Checkbox.js

@@ -38,14 +38,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * neither) for one the form reads at submit.
  */
 import { Checkbox as AriaCheckbox } from 'react-aria-components';
-export default function Checkbox({ label, hint, meta, checked, defaultChecked, onChange, name, value, disabled, className, }) {
+export default function Checkbox({ label, hint, meta, checked, defaultChecked, onChange, name, value, disabled, tile, className, }) {
     /* React Aria's `Checkbox` is the `<label>`. It keeps the real input in the
        markup and visually hidden -- exactly the arrangement this component
        already had by hand -- and stamps `data-selected`, `data-focus-visible`
        and `data-disabled` on the row. The ring and the tick are still drawn by
        the row's `::after` and `::before`; `checkbox.css` now reads the state off
        those attributes instead of `:has(input:checked)`. */
-    return (_jsx(AriaCheckbox, { className: `choice${className ? ` ${className}` : ''}`, 
+    return (_jsx(AriaCheckbox, { className: `choice${tile ? ' choice-tile' : ''}${className ? ` ${className}` : ''}`, 
         /* `undefined` is what makes React Aria leave the box uncontrolled, so
            the controlled and uncontrolled cases are the same call: pass both and
            let whichever was given decide. Passing `isSelected={false}` here

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. */
@@ -1552,10 +1538,6 @@ input:active, textarea:active, select:active { transform: none; }
   40% { opacity: 1; transform: translateY(-3px); }
 }
 
-/* The top bar carries the title, the views and the way into settings. Nothing
-   that belongs to a conversation lives here any more, so it can breathe. */
-.topbar .ctl-grow { flex: 1; min-width: 0; }
-
 @keyframes listening-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
 
 /* table ---------------------------------------------------------------- */
@@ -1824,23 +1806,6 @@ input:active, textarea:active, select:active { transform: none; }
   border-color: var(--bad);
 }
 
-/* Three fields on one line, and their inputs on one line too.
-   
-   `Field` puts the description *above* the control, which is the house rule and
-   right -- but only `Arguments` has one here, so as a flex row the other two
-   inputs floated a description's height above it and the row read as broken.
-   Aligned to the end instead: the labels sit where their text needs them and
-   the three boxes share a baseline, which is the edge the eye actually follows.
-   
-   A grid rather than flex, so `Arguments` gets the room it needs by declaration
-   instead of by an inline pixel width on each of its neighbours. */
-.mcp-local .field-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr 2fr;
-  align-items: end;
-  gap: var(--space-3);
-}
-
 /* How an applet's polling is going, said the same way on every tile. Muted
    when it is going fine -- this is a fact you glance at, not one you are being
    told. */
@@ -1885,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; }
 
@@ -1907,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 ---- */
@@ -2246,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
@@ -3023,11 +2999,6 @@ input[type='radio']:active:not(:disabled) {
   width: min(760px, 100%);
 }
 
-/* Settings is wider than the others: the rail carries group headings with a
-   hint each and indented tabs under them, and a pane beside it that draws
-   cards with a control on the right -- 760 gave one or the other room. */
-.modal.modal-settings { width: min(880px, 100%); }
-
 .modal {
   /* The window, less the backdrop's padding at each end -- `--space-15` is 60px
      and there are two of them, above and below.
@@ -3462,25 +3433,12 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* A run of checkboxes is one choice, not several settings that happen to be
    adjacent. Tight enough that the group reads as a block -- at the spacing a
    form field wants, four tools look like four unrelated questions. */
-/* The same choice, laid out as tiles instead of a column.
-   
-   Four short names down the full width of a card is four wide bands for four
-   words -- the row is sized by the card, not by anything in it, so `Read` gets
-   the same 1000px as a sentence would. As tiles they are sized by their
-   content and the group reads as one set of four rather than a stack of four
-   settings.
-   
-   `auto-fit` with a floor rather than a fixed four: the pane is a modal that
-   narrows with the window, and four columns of 40px is worse than two of 160.
-   The floor is the width at which a two-word name still fits on one line. */
-.choice-tiles {
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: var(--space-2);
-}
-
 /* Room for the tick, which is absolutely positioned at the top right. In a
-   full-width row the text never reached it; in a tile it would run underneath. */
-.choice-tiles .choice-body { padding-right: var(--space-6); }
+   full-width row the text never reaches it; in a tile it would run underneath.
+   `tile` is a prop on the component now: this was keyed on a `.choice-tiles`
+   container that no component renders, so the class only ever existed in a
+   consumer's markup and the package was styling itself through it. */
+.choice-tile .choice-body { padding-right: var(--space-6); }
 
 /* The floor is 220px and not 150px because of what four items do at the widths
    in between. The settings pane gives this group 514px: at a 150px floor that
@@ -3855,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. */
@@ -1822,10 +1808,6 @@ input:active, textarea:active, select:active { transform: none; }
   40% { opacity: 1; transform: translateY(-3px); }
 }
 
-/* The top bar carries the title, the views and the way into settings. Nothing
-   that belongs to a conversation lives here any more, so it can breathe. */
-.topbar .ctl-grow { flex: 1; min-width: 0; }
-
 @keyframes listening-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
 
 /* table ---------------------------------------------------------------- */
@@ -2094,23 +2076,6 @@ input:active, textarea:active, select:active { transform: none; }
   border-color: var(--bad);
 }
 
-/* Three fields on one line, and their inputs on one line too.
-   
-   `Field` puts the description *above* the control, which is the house rule and
-   right -- but only `Arguments` has one here, so as a flex row the other two
-   inputs floated a description's height above it and the row read as broken.
-   Aligned to the end instead: the labels sit where their text needs them and
-   the three boxes share a baseline, which is the edge the eye actually follows.
-   
-   A grid rather than flex, so `Arguments` gets the room it needs by declaration
-   instead of by an inline pixel width on each of its neighbours. */
-.mcp-local .field-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr 2fr;
-  align-items: end;
-  gap: var(--space-3);
-}
-
 /* How an applet's polling is going, said the same way on every tile. Muted
    when it is going fine -- this is a fact you glance at, not one you are being
    told. */
@@ -2155,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; }
 
@@ -2177,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 ---- */
@@ -2516,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
@@ -3293,11 +3269,6 @@ input[type='radio']:active:not(:disabled) {
   width: min(760px, 100%);
 }
 
-/* Settings is wider than the others: the rail carries group headings with a
-   hint each and indented tabs under them, and a pane beside it that draws
-   cards with a control on the right -- 760 gave one or the other room. */
-.modal.modal-settings { width: min(880px, 100%); }
-
 .modal {
   /* The window, less the backdrop's padding at each end -- `--space-15` is 60px
      and there are two of them, above and below.
@@ -3732,25 +3703,12 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* A run of checkboxes is one choice, not several settings that happen to be
    adjacent. Tight enough that the group reads as a block -- at the spacing a
    form field wants, four tools look like four unrelated questions. */
-/* The same choice, laid out as tiles instead of a column.
-   
-   Four short names down the full width of a card is four wide bands for four
-   words -- the row is sized by the card, not by anything in it, so `Read` gets
-   the same 1000px as a sentence would. As tiles they are sized by their
-   content and the group reads as one set of four rather than a stack of four
-   settings.
-   
-   `auto-fit` with a floor rather than a fixed four: the pane is a modal that
-   narrows with the window, and four columns of 40px is worse than two of 160.
-   The floor is the width at which a two-word name still fits on one line. */
-.choice-tiles {
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: var(--space-2);
-}
-
 /* Room for the tick, which is absolutely positioned at the top right. In a
-   full-width row the text never reached it; in a tile it would run underneath. */
-.choice-tiles .choice-body { padding-right: var(--space-6); }
+   full-width row the text never reaches it; in a tile it would run underneath.
+   `tile` is a prop on the component now: this was keyed on a `.choice-tiles`
+   container that no component renders, so the class only ever existed in a
+   consumer's markup and the package was styling itself through it. */
+.choice-tile .choice-body { padding-right: var(--space-6); }
 
 /* The floor is 220px and not 150px because of what four items do at the widths
    in between. The settings pane gives this group 514px: at a 150px floor that
@@ -4125,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. */
@@ -1826,10 +1812,6 @@ input:active, textarea:active, select:active { transform: none; }
   40% { opacity: 1; transform: translateY(-3px); }
 }
 
-/* The top bar carries the title, the views and the way into settings. Nothing
-   that belongs to a conversation lives here any more, so it can breathe. */
-.topbar .ctl-grow { flex: 1; min-width: 0; }
-
 @keyframes listening-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
 
 /* table ---------------------------------------------------------------- */
@@ -2098,23 +2080,6 @@ input:active, textarea:active, select:active { transform: none; }
   border-color: var(--bad);
 }
 
-/* Three fields on one line, and their inputs on one line too.
-   
-   `Field` puts the description *above* the control, which is the house rule and
-   right -- but only `Arguments` has one here, so as a flex row the other two
-   inputs floated a description's height above it and the row read as broken.
-   Aligned to the end instead: the labels sit where their text needs them and
-   the three boxes share a baseline, which is the edge the eye actually follows.
-   
-   A grid rather than flex, so `Arguments` gets the room it needs by declaration
-   instead of by an inline pixel width on each of its neighbours. */
-.mcp-local .field-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr 2fr;
-  align-items: end;
-  gap: var(--space-3);
-}
-
 /* How an applet's polling is going, said the same way on every tile. Muted
    when it is going fine -- this is a fact you glance at, not one you are being
    told. */
@@ -2159,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; }
 
@@ -2181,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 ---- */
@@ -2520,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
@@ -3297,11 +3273,6 @@ input[type='radio']:active:not(:disabled) {
   width: min(760px, 100%);
 }
 
-/* Settings is wider than the others: the rail carries group headings with a
-   hint each and indented tabs under them, and a pane beside it that draws
-   cards with a control on the right -- 760 gave one or the other room. */
-.modal.modal-settings { width: min(880px, 100%); }
-
 .modal {
   /* The window, less the backdrop's padding at each end -- `--space-15` is 60px
      and there are two of them, above and below.
@@ -3736,25 +3707,12 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* A run of checkboxes is one choice, not several settings that happen to be
    adjacent. Tight enough that the group reads as a block -- at the spacing a
    form field wants, four tools look like four unrelated questions. */
-/* The same choice, laid out as tiles instead of a column.
-   
-   Four short names down the full width of a card is four wide bands for four
-   words -- the row is sized by the card, not by anything in it, so `Read` gets
-   the same 1000px as a sentence would. As tiles they are sized by their
-   content and the group reads as one set of four rather than a stack of four
-   settings.
-   
-   `auto-fit` with a floor rather than a fixed four: the pane is a modal that
-   narrows with the window, and four columns of 40px is worse than two of 160.
-   The floor is the width at which a two-word name still fits on one line. */
-.choice-tiles {
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: var(--space-2);
-}
-
 /* Room for the tick, which is absolutely positioned at the top right. In a
-   full-width row the text never reached it; in a tile it would run underneath. */
-.choice-tiles .choice-body { padding-right: var(--space-6); }
+   full-width row the text never reaches it; in a tile it would run underneath.
+   `tile` is a prop on the component now: this was keyed on a `.choice-tiles`
+   container that no component renders, so the class only ever existed in a
+   consumer's markup and the package was styling itself through it. */
+.choice-tile .choice-body { padding-right: var(--space-6); }
 
 /* The floor is 220px and not 150px because of what four items do at the widths
    in between. The settings pane gives this group 514px: at a 150px floor that
@@ -4129,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.1",
+  "version": "0.11.0",
   "description": "wtfalch's design system: themeable components on a fixed token vocabulary.",
   "keywords": [
     "design-system",