@wtfalch/design 0.12.0 → 0.13.0

package/dist/components/Rows.d.ts

@@ -60,7 +60,7 @@ export declare function Rows({ children, empty, label, look, className, }: {
     look?: 'list' | 'pick';
     className?: string;
 }): import("react").JSX.Element | null;
-export declare function Row({ name, pills, hint, trail, actions, below, onClick, tone, picked, loading, waiting, align, className, }: {
+export declare function Row({ name, pills, hint, trail, actions, below, onClick, tone, picked, loading, waiting, disabled, align, className, }: {
     /** The subject. Truncates -- it is the only part that may. */
     name: React.ReactNode;
     /** Qualifiers, on the name's line. Never truncated: a badge that is
@@ -93,6 +93,13 @@ export declare function Row({ name, pills, hint, trail, actions, below, onClick,
     loading?: boolean;
     /** Something else is working, so this one cannot be chosen yet. */
     waiting?: boolean;
+    /** This one cannot be chosen, and nothing on the page will change that: the
+     *  build lacks something, or a setting elsewhere rules it out. Say why in
+     *  `hint`. Drawn as `waiting` is -- dimmed, its hit area a disabled button,
+     *  `picked` still showing through -- but a separate word, because tf's
+     *  About pane borrowed `waiting` for "this build cannot apply updates", and
+     *  a row that says it is waiting is a row somebody waits on. */
+    disabled?: boolean;
     /** `start` when the row has enough text that vertically centred buttons drift
      *  away from the name they belong to. */
     align?: 'center' | 'start';

package/dist/components/Rows.js

@@ -51,12 +51,13 @@ export function Rows({ children, empty, label, look = 'list', 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, }) {
+export function Row({ name, pills, hint, trail, actions, below, onClick, tone, picked, loading, waiting, disabled, 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: "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' : ''}` +
+        `${disabled ? ' is-disabled' : ''}` +
         `${className ? ` ${className}` : ''}`;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: rowClass, role: "listitem", children: [onClick ? (_jsx("button", { type: "button", className: "row-hit", disabled: waiting, onClick: onClick, children: body })) : (body), actions] }), below] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: rowClass, role: "listitem", children: [onClick ? (_jsx("button", { type: "button", className: "row-hit", disabled: waiting || disabled, onClick: onClick, children: body })) : (body), actions] }), below] }));
 }
 export default Rows;

package/dist/styles/index.css

@@ -2557,8 +2557,10 @@ input[type='radio']:active:not(:disabled) {
 }
 
 /* Only where there is something to pick. A row without `row-hit` is not a
-   choice, and lighting it up on hover promises something that does not happen. */
-.rows-pick > .rows-row:has(.row-hit):hover {
+   choice, and lighting it up on hover promises something that does not happen.
+   Nor is a row whose hit is disabled: a waiting row lit up under its own
+   `not-allowed` cursor, and `disabled` would have made that permanent. */
+.rows-pick > .rows-row:has(.row-hit:enabled):hover {
   border-color: var(--accent);
   background: var(--panel-2);
 }
@@ -2610,9 +2612,16 @@ input[type='radio']:active:not(:disabled) {
 /* And nothing else can be chosen while it happens: picking a second model
    mid-load queues a second load, which is how a machine ends up swapping two
    sets of weights it cannot hold at once. */
-.rows-pick > .rows-row.is-waiting { opacity: 0.5; }
+.rows-pick > .rows-row.is-waiting,
+.rows-pick > .rows-row.is-disabled { opacity: 0.5; }
 
-.rows-pick > .rows-row.is-waiting .row-hit { cursor: not-allowed; }
+.rows-pick > .rows-row.is-waiting .row-hit,
+.rows-pick > .rows-row.is-disabled .row-hit { cursor: not-allowed; }
+
+/* Dimmed once. `.row-hit:disabled` dims the button as well, and under the
+   row's own opacity the hint of a disabled row, the line saying why it cannot
+   be chosen, came out at a quarter strength. */
+.rows-pick > .rows-row.is-disabled > .row-hit:disabled { opacity: 1; }
 
 @media (prefers-reduced-motion: reduce) {
   /* The border still says which one, without the breathing. */
@@ -2664,7 +2673,7 @@ input[type='radio']:active:not(:disabled) {
   margin-bottom: calc(var(--space-2) * -1);
 }
 
-.rows-pick > .rows-row.is-picked:has(.row-hit):hover {
+.rows-pick > .rows-row.is-picked:has(.row-hit:enabled):hover {
   background: color-mix(in srgb, var(--accent) 13%, var(--panel));
 }
 
@@ -2723,7 +2732,7 @@ input[type='radio']:active:not(:disabled) {
   border-radius: var(--radius-sm);
 }
 
-.row-hit:hover .truncate { color: var(--accent); }
+.row-hit:enabled:hover .truncate { color: var(--accent); }
 
 .row-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 }

package/dist/tf.css

@@ -2827,8 +2827,10 @@ input[type='radio']:active:not(:disabled) {
 }
 
 /* Only where there is something to pick. A row without `row-hit` is not a
-   choice, and lighting it up on hover promises something that does not happen. */
-.rows-pick > .rows-row:has(.row-hit):hover {
+   choice, and lighting it up on hover promises something that does not happen.
+   Nor is a row whose hit is disabled: a waiting row lit up under its own
+   `not-allowed` cursor, and `disabled` would have made that permanent. */
+.rows-pick > .rows-row:has(.row-hit:enabled):hover {
   border-color: var(--accent);
   background: var(--panel-2);
 }
@@ -2880,9 +2882,16 @@ input[type='radio']:active:not(:disabled) {
 /* And nothing else can be chosen while it happens: picking a second model
    mid-load queues a second load, which is how a machine ends up swapping two
    sets of weights it cannot hold at once. */
-.rows-pick > .rows-row.is-waiting { opacity: 0.5; }
+.rows-pick > .rows-row.is-waiting,
+.rows-pick > .rows-row.is-disabled { opacity: 0.5; }
 
-.rows-pick > .rows-row.is-waiting .row-hit { cursor: not-allowed; }
+.rows-pick > .rows-row.is-waiting .row-hit,
+.rows-pick > .rows-row.is-disabled .row-hit { cursor: not-allowed; }
+
+/* Dimmed once. `.row-hit:disabled` dims the button as well, and under the
+   row's own opacity the hint of a disabled row, the line saying why it cannot
+   be chosen, came out at a quarter strength. */
+.rows-pick > .rows-row.is-disabled > .row-hit:disabled { opacity: 1; }
 
 @media (prefers-reduced-motion: reduce) {
   /* The border still says which one, without the breathing. */
@@ -2934,7 +2943,7 @@ input[type='radio']:active:not(:disabled) {
   margin-bottom: calc(var(--space-2) * -1);
 }
 
-.rows-pick > .rows-row.is-picked:has(.row-hit):hover {
+.rows-pick > .rows-row.is-picked:has(.row-hit:enabled):hover {
   background: color-mix(in srgb, var(--accent) 13%, var(--panel));
 }
 
@@ -2993,7 +3002,7 @@ input[type='radio']:active:not(:disabled) {
   border-radius: var(--radius-sm);
 }
 
-.row-hit:hover .truncate { color: var(--accent); }
+.row-hit:enabled:hover .truncate { color: var(--accent); }
 
 .row-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 }

package/dist/valet.css

@@ -2831,8 +2831,10 @@ input[type='radio']:active:not(:disabled) {
 }
 
 /* Only where there is something to pick. A row without `row-hit` is not a
-   choice, and lighting it up on hover promises something that does not happen. */
-.rows-pick > .rows-row:has(.row-hit):hover {
+   choice, and lighting it up on hover promises something that does not happen.
+   Nor is a row whose hit is disabled: a waiting row lit up under its own
+   `not-allowed` cursor, and `disabled` would have made that permanent. */
+.rows-pick > .rows-row:has(.row-hit:enabled):hover {
   border-color: var(--accent);
   background: var(--panel-2);
 }
@@ -2884,9 +2886,16 @@ input[type='radio']:active:not(:disabled) {
 /* And nothing else can be chosen while it happens: picking a second model
    mid-load queues a second load, which is how a machine ends up swapping two
    sets of weights it cannot hold at once. */
-.rows-pick > .rows-row.is-waiting { opacity: 0.5; }
+.rows-pick > .rows-row.is-waiting,
+.rows-pick > .rows-row.is-disabled { opacity: 0.5; }
 
-.rows-pick > .rows-row.is-waiting .row-hit { cursor: not-allowed; }
+.rows-pick > .rows-row.is-waiting .row-hit,
+.rows-pick > .rows-row.is-disabled .row-hit { cursor: not-allowed; }
+
+/* Dimmed once. `.row-hit:disabled` dims the button as well, and under the
+   row's own opacity the hint of a disabled row, the line saying why it cannot
+   be chosen, came out at a quarter strength. */
+.rows-pick > .rows-row.is-disabled > .row-hit:disabled { opacity: 1; }
 
 @media (prefers-reduced-motion: reduce) {
   /* The border still says which one, without the breathing. */
@@ -2938,7 +2947,7 @@ input[type='radio']:active:not(:disabled) {
   margin-bottom: calc(var(--space-2) * -1);
 }
 
-.rows-pick > .rows-row.is-picked:has(.row-hit):hover {
+.rows-pick > .rows-row.is-picked:has(.row-hit:enabled):hover {
   background: color-mix(in srgb, var(--accent) 13%, var(--panel));
 }
 
@@ -2997,7 +3006,7 @@ input[type='radio']:active:not(:disabled) {
   border-radius: var(--radius-sm);
 }
 
-.row-hit:hover .truncate { color: var(--accent); }
+.row-hit:enabled:hover .truncate { color: var(--accent); }
 
 .row-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 }

package/package.json

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