@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/status-dot.d.ts

@@ -1,21 +1,52 @@
 import type { ComponentProps } from "react";
 type StatusTone = "good" | "muted" | "warn" | "bad";
-interface StatusDotProps extends ComponentProps<"span"> {
+type StatusDotName = {
+    label: string;
+    showLabel?: boolean;
+    decorative?: never;
+} | {
+    decorative: true;
+    label?: never;
+    showLabel?: never;
+};
+type StatusDotProps = Omit<ComponentProps<"span">, "children" | "role" | "title" | "aria-hidden" | "aria-label" | "aria-labelledby"> & {
     tone: StatusTone;
-}
+} & StatusDotName;
 /**
- * A small still dot beside a word that already names the state.
+ * A small still dot for one state, named by its label or by the word beside it.
  *
  * @family Status
- * @when A small mark in dense chrome, beside a word that already names the state: a channel, a
- * machine in a list.
- * @instead A status that stands alone is a `StatusBadge`. Something in motion is the waiting line
- * or an Agent's orb; the dot has no info tone.
- * @behaviour Still; never pulses. Tones are `good`, `muted`, `warn`, `bad`, at full strength.
- * @words None of its own. The word beside it says the state.
- * @access Always `aria-hidden`. If the word is missing, the state is missing.
+ * @when "Deployment lifecycle only. `state` accepts `QUEUED | BUILDING | READY | ERROR | CANCELED | DELETED`." (https://vercel.com/geist/status-dot)
+ * Ours: any one state in dense chrome (a channel, a machine in a list), set as `tone`. It always
+ * says which state it shows: `label` names it (*Ready*), and `decorative` stands for a word beside
+ * it that already does. The type asks for one of the two.
+ * "Don’t flash the color through every transitional state on a polling tick; only update when the readyState changes." (https://vercel.com/geist/status-dot)
+ * Ours: pick the tone from the state and keep it until the state changes.
+ * @instead "For non-deployment statuses (Workflow runs, Queue messages, Sandbox, Cron jobs), use a `Badge` with the canonical state vocabulary instead of repurposing the dot." (https://vercel.com/geist/status-dot)
+ * Ours: that `Badge` is `StatusBadge`; so is a status that stands alone, or one that needs a mark
+ * and a word.
+ * "For health summaries that need a number (uptime, hit rate), use `Gauge`; for in-flight work with a knowable total, use `Progress`." (https://vercel.com/geist/status-dot)
+ * Ours: something in motion is the waiting line or an Agent's orb; the dot has no info tone.
+ * @behaviour "The dot animates while `BUILDING` or `QUEUED` and goes static once the deployment reaches a terminal state." (https://vercel.com/geist/status-dot)
+ * "Don’t add a separate spinner alongside it." (https://vercel.com/geist/status-dot) Ours: still,
+ * even while a state is in progress: it never pulses. A 10 px dot; tones are `good`, `muted`,
+ * `warn`, `bad`, at full strength. Colour sits on the dot alone: with `showLabel` the word beside
+ * it is 14 px and neutral, never in the tone's colour. `label` alone draws the dot with the word as
+ * its name and tooltip; `showLabel` draws the word 8 px after it, for a dot with no other text
+ * around it.
+ * @words "Use `label` only when the dot stands alone without surrounding text; Geist sentence-cases the state for you (`Building`, `Ready`, `Error`)." (https://vercel.com/geist/status-dot)
+ * Ours: `label` is the required name unless the dot is `decorative`, and we write it in sentence
+ * case ourselves: *Ready*, *Error*, *Canceled*.
+ * "Don’t wrap the dot in extra prose like `Status: Ready`. The label already names the state." (https://vercel.com/geist/status-dot)
+ * @access "The component composes its own `aria-label` from `titlePrefix` plus the state message; don’t override it with a generic `aria-label="status"`." (https://vercel.com/geist/status-dot)
+ * Ours: there is no `titlePrefix` and no `aria-label` prop; `label` is the dot's name, an image
+ * role with that name.
+ * "When the dot sits inline with text that already names the state, mark the dot decorative with `aria-hidden` so screen readers don’t announce it twice." (https://vercel.com/geist/status-dot)
+ * Ours: `decorative` does it; the word beside the dot must name the state, and if that word is
+ * missing, the state is missing.
+ * "Color is not the only signal: every state ships with a distinct title and label so colorblind users get the same information." (https://vercel.com/geist/status-dot)
  */
-declare function StatusDot({ className, tone, ...props }: StatusDotProps): import("react").JSX.Element;
+declare function StatusDot({ className, tone, label, showLabel, decorative, ...props }: StatusDotProps): import("react").JSX.Element;
 export { StatusDot };
 export type { StatusTone };
 //# sourceMappingURL=status-dot.d.ts.map

package/dist/components/status-dot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-dot.d.ts","sourceRoot":"","sources":["../../src/components/status-dot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;AAQpD,UAAU,cAAe,SAAQ,cAAc,CAAC,MAAM,CAAC;IACrD,IAAI,EAAE,UAAU,CAAC;CAClB;AACD;;;;;;;;;;;GAWG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAU/D;AACD,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"status-dot.d.ts","sourceRoot":"","sources":["../../src/components/status-dot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;AAUpD,KAAK,aAAa,GACd;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAA;CAAE,GAC1D;IAAE,UAAU,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE3D,KAAK,cAAc,GAAG,IAAI,CACxB,cAAc,CAAC,MAAM,CAAC,EACtB,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,GAAG,YAAY,GAAG,iBAAiB,CACjF,GAAG;IACF,IAAI,EAAE,UAAU,CAAC;CAClB,GAAG,aAAa,CAAC;AAElB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,IAAI,EACJ,KAAK,EACL,SAAiB,EACjB,UAAU,EACV,GAAG,KAAK,EACT,EAAE,cAAc,+BAuChB;AACD,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/status-dot.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 const TONE_BG_CLASS = {
     good: "bg-success",
@@ -6,19 +6,48 @@ const TONE_BG_CLASS = {
     warn: "bg-warning",
     bad: "bg-destructive",
 };
+const DOT_CLASS = "inline-block size-2.5 shrink-0 rounded-full";
 /**
- * A small still dot beside a word that already names the state.
+ * A small still dot for one state, named by its label or by the word beside it.
  *
  * @family Status
- * @when A small mark in dense chrome, beside a word that already names the state: a channel, a
- * machine in a list.
- * @instead A status that stands alone is a `StatusBadge`. Something in motion is the waiting line
- * or an Agent's orb; the dot has no info tone.
- * @behaviour Still; never pulses. Tones are `good`, `muted`, `warn`, `bad`, at full strength.
- * @words None of its own. The word beside it says the state.
- * @access Always `aria-hidden`. If the word is missing, the state is missing.
+ * @when "Deployment lifecycle only. `state` accepts `QUEUED | BUILDING | READY | ERROR | CANCELED | DELETED`." (https://vercel.com/geist/status-dot)
+ * Ours: any one state in dense chrome (a channel, a machine in a list), set as `tone`. It always
+ * says which state it shows: `label` names it (*Ready*), and `decorative` stands for a word beside
+ * it that already does. The type asks for one of the two.
+ * "Don’t flash the color through every transitional state on a polling tick; only update when the readyState changes." (https://vercel.com/geist/status-dot)
+ * Ours: pick the tone from the state and keep it until the state changes.
+ * @instead "For non-deployment statuses (Workflow runs, Queue messages, Sandbox, Cron jobs), use a `Badge` with the canonical state vocabulary instead of repurposing the dot." (https://vercel.com/geist/status-dot)
+ * Ours: that `Badge` is `StatusBadge`; so is a status that stands alone, or one that needs a mark
+ * and a word.
+ * "For health summaries that need a number (uptime, hit rate), use `Gauge`; for in-flight work with a knowable total, use `Progress`." (https://vercel.com/geist/status-dot)
+ * Ours: something in motion is the waiting line or an Agent's orb; the dot has no info tone.
+ * @behaviour "The dot animates while `BUILDING` or `QUEUED` and goes static once the deployment reaches a terminal state." (https://vercel.com/geist/status-dot)
+ * "Don’t add a separate spinner alongside it." (https://vercel.com/geist/status-dot) Ours: still,
+ * even while a state is in progress: it never pulses. A 10 px dot; tones are `good`, `muted`,
+ * `warn`, `bad`, at full strength. Colour sits on the dot alone: with `showLabel` the word beside
+ * it is 14 px and neutral, never in the tone's colour. `label` alone draws the dot with the word as
+ * its name and tooltip; `showLabel` draws the word 8 px after it, for a dot with no other text
+ * around it.
+ * @words "Use `label` only when the dot stands alone without surrounding text; Geist sentence-cases the state for you (`Building`, `Ready`, `Error`)." (https://vercel.com/geist/status-dot)
+ * Ours: `label` is the required name unless the dot is `decorative`, and we write it in sentence
+ * case ourselves: *Ready*, *Error*, *Canceled*.
+ * "Don’t wrap the dot in extra prose like `Status: Ready`. The label already names the state." (https://vercel.com/geist/status-dot)
+ * @access "The component composes its own `aria-label` from `titlePrefix` plus the state message; don’t override it with a generic `aria-label="status"`." (https://vercel.com/geist/status-dot)
+ * Ours: there is no `titlePrefix` and no `aria-label` prop; `label` is the dot's name, an image
+ * role with that name.
+ * "When the dot sits inline with text that already names the state, mark the dot decorative with `aria-hidden` so screen readers don’t announce it twice." (https://vercel.com/geist/status-dot)
+ * Ours: `decorative` does it; the word beside the dot must name the state, and if that word is
+ * missing, the state is missing.
+ * "Color is not the only signal: every state ships with a distinct title and label so colorblind users get the same information." (https://vercel.com/geist/status-dot)
  */
-function StatusDot({ className, tone, ...props }) {
-    return (_jsx("span", { "aria-hidden": "true", className: cn("inline-block size-1.5 rounded-full", TONE_BG_CLASS[tone], className), "data-slot": "status-dot", "data-tone": tone, ...props }));
+function StatusDot({ className, tone, label, showLabel = false, decorative, ...props }) {
+    if (decorative) {
+        return (_jsx("span", { ...props, "aria-hidden": "true", className: cn(DOT_CLASS, TONE_BG_CLASS[tone], className), "data-slot": "status-dot", "data-tone": tone }));
+    }
+    if (showLabel) {
+        return (_jsxs("span", { ...props, className: cn("inline-flex items-center gap-2 text-sm leading-4 text-foreground", className), "data-slot": "status-dot", "data-tone": tone, children: [_jsx("span", { "aria-hidden": "true", className: cn(DOT_CLASS, TONE_BG_CLASS[tone]) }), label] }));
+    }
+    return (_jsx("span", { ...props, "aria-label": label, className: cn(DOT_CLASS, TONE_BG_CLASS[tone], className), "data-slot": "status-dot", "data-tone": tone, role: "img", title: label }));
 }
 export { StatusDot };

package/dist/components/switch.d.ts

@@ -1,21 +1,52 @@
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { type ControlName } from "../internal/control-name.js";
 /**
  * A setting that is on or off.
  *
  * @family Choices
- * @when A setting that is either on or off, inside a settings section that saves.
- * @instead Choosing or agreeing to something is a `Checkbox`. A tool button that stays pressed is a
- * `Toggle`. Choosing between named values is a `RadioGroup`.
- * @behaviour Off is the input grey, on is ink; the thumb travels 16 px. Space flips it. On a
- * settings page the change waits for the section's Save, which lights up; only Theme and Language
- * in the account menu apply at once. A failed save leaves the switch showing the true state.
- * @words The label names what on means: *Approvals*, with help saying when. Never *Enable
- * approvals*, and no On/Off text beside the switch.
- * @access `role="switch"` with `aria-checked`. The name is the visible label and stays the same in
- * both states. `sm` only inside a dense row.
+ * @when "Use Toggle for a single boolean setting where ON takes effect immediately, like `Password
+ * Protection` or `Auto-Cancel Builds`." (https://vercel.com/geist/toggle) Ours: Geist's `Toggle` is
+ * our `Switch`, inside a settings section.
+ * @instead "Switch to `Checkbox` for a multi-select list, or to `Switch` for 2–3 mutually exclusive
+ * views." (https://vercel.com/geist/toggle) Ours: Geist's `Switch` is our `SegmentedControl`. A
+ * tool button that stays pressed is a `ToggleGroup`. Choosing between named values is a
+ * `RadioGroup`.
+ * @behaviour "`checked` is required and the component is controlled. Own the state and update it
+ * from `onChange`." (https://vercel.com/geist/toggle) "Persist on change and surface the result in
+ * a `useToasts().success(…)` toast (`Password protection enabled`); don’t leave the user wondering
+ * whether the flip stuck." (https://vercel.com/geist/toggle) "Pair with a form footer only when the
+ * setting needs an explicit `Save` step." (https://vercel.com/geist/toggle) "Disable Toggle only
+ * when the action is impossible (missing plan, locked policy); pair with helper text or a `Tooltip`
+ * that names the resolver." (https://vercel.com/geist/toggle) Ours: `checked` is optional, since a
+ * switch also runs uncontrolled with `defaultChecked`; the toast is raised with `showMessageToast`;
+ * the reason for a disabled switch is written in the card's footer, and it is left off. Always
+ * named: `aria-label` or `aria-labelledby`, or an `id` that a `FieldLabel`'s `htmlFor` points at,
+ * and a switch with none of them does not compile. A bare `Switch` is the 28 by 14 px track with an
+ * 11 px thumb; `md` is 36 by 20 px and `lg` 40 by 24 px. Colour: off is the input grey, on is
+ * ink, and a disabled switch turns grey, on or off, with a greyer thumb and no shadow. Space flips
+ * it. On a settings page it applies at once and the product's toast confirms it, in one of two
+ * places: in the card's header at the right of the title when the switch is the whole card, the
+ * footer holding only its line, or at the end of a row of a card of several settings, the label to
+ * its left. A failed change leaves the switch showing the true state.
+ * @words "The label is `children`, not a `label` prop. Title Case noun phrase, 1–4 words, naming
+ * what is true when ON: `Password Protection`, not `Enable Password Protection`."
+ * (https://vercel.com/geist/toggle) "Render an optional one-sentence description as a sibling under
+ * the label that explains ON only." (https://vercel.com/geist/toggle) "Don’t describe OFF; it’s the
+ * negation." (https://vercel.com/geist/toggle) "Keep `labelCasing="title"` (the default) so labels
+ * match other Title Case surfaces." (https://vercel.com/geist/toggle) "Use `labelCasing="normal"`
+ * only when sentence-case content sits inline next to the toggle."
+ * (https://vercel.com/geist/toggle) Ours: the label is 12 px at medium weight, in sentence case:
+ * *Approvals*, with the card's description in one sentence. The state word is a separate word
+ * beside the switch, not its name.
+ * @access "Provide an accessible name through `children`, `aria-label`, or `aria-labelledby`."
+ * (https://vercel.com/geist/toggle) "Geist warns in development if all three are missing."
+ * (https://vercel.com/geist/toggle) "Set `aria-label` only when the visible label sits elsewhere on
+ * the row; otherwise let `children` carry it so sighted and screen-reader copy stay aligned."
+ * (https://vercel.com/geist/toggle) Ours: `role="switch"` with `aria-checked`, the name the same in
+ * both states; a missing name does not compile.
  */
-declare function Switch({ className, size, ...props }: SwitchPrimitive.Root.Props & {
-    size?: "sm" | "default";
+declare function Switch({ className, size, ...props }: SwitchPrimitive.Root.Props & ControlName & {
+    size?: "sm" | "md" | "lg";
 }): import("react").JSX.Element;
 export { Switch };
 //# sourceMappingURL=switch.d.ts.map

package/dist/components/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlE;;;;;;;;;;;;;;GAcG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,+BAiBA;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGlE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAW,EACX,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,GAC3B,WAAW,GAAG;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,+BAiBF;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/switch.js

@@ -5,18 +5,48 @@ import { cn } from "../lib/utils.js";
  * A setting that is on or off.
  *
  * @family Choices
- * @when A setting that is either on or off, inside a settings section that saves.
- * @instead Choosing or agreeing to something is a `Checkbox`. A tool button that stays pressed is a
- * `Toggle`. Choosing between named values is a `RadioGroup`.
- * @behaviour Off is the input grey, on is ink; the thumb travels 16 px. Space flips it. On a
- * settings page the change waits for the section's Save, which lights up; only Theme and Language
- * in the account menu apply at once. A failed save leaves the switch showing the true state.
- * @words The label names what on means: *Approvals*, with help saying when. Never *Enable
- * approvals*, and no On/Off text beside the switch.
- * @access `role="switch"` with `aria-checked`. The name is the visible label and stays the same in
- * both states. `sm` only inside a dense row.
+ * @when "Use Toggle for a single boolean setting where ON takes effect immediately, like `Password
+ * Protection` or `Auto-Cancel Builds`." (https://vercel.com/geist/toggle) Ours: Geist's `Toggle` is
+ * our `Switch`, inside a settings section.
+ * @instead "Switch to `Checkbox` for a multi-select list, or to `Switch` for 2–3 mutually exclusive
+ * views." (https://vercel.com/geist/toggle) Ours: Geist's `Switch` is our `SegmentedControl`. A
+ * tool button that stays pressed is a `ToggleGroup`. Choosing between named values is a
+ * `RadioGroup`.
+ * @behaviour "`checked` is required and the component is controlled. Own the state and update it
+ * from `onChange`." (https://vercel.com/geist/toggle) "Persist on change and surface the result in
+ * a `useToasts().success(…)` toast (`Password protection enabled`); don’t leave the user wondering
+ * whether the flip stuck." (https://vercel.com/geist/toggle) "Pair with a form footer only when the
+ * setting needs an explicit `Save` step." (https://vercel.com/geist/toggle) "Disable Toggle only
+ * when the action is impossible (missing plan, locked policy); pair with helper text or a `Tooltip`
+ * that names the resolver." (https://vercel.com/geist/toggle) Ours: `checked` is optional, since a
+ * switch also runs uncontrolled with `defaultChecked`; the toast is raised with `showMessageToast`;
+ * the reason for a disabled switch is written in the card's footer, and it is left off. Always
+ * named: `aria-label` or `aria-labelledby`, or an `id` that a `FieldLabel`'s `htmlFor` points at,
+ * and a switch with none of them does not compile. A bare `Switch` is the 28 by 14 px track with an
+ * 11 px thumb; `md` is 36 by 20 px and `lg` 40 by 24 px. Colour: off is the input grey, on is
+ * ink, and a disabled switch turns grey, on or off, with a greyer thumb and no shadow. Space flips
+ * it. On a settings page it applies at once and the product's toast confirms it, in one of two
+ * places: in the card's header at the right of the title when the switch is the whole card, the
+ * footer holding only its line, or at the end of a row of a card of several settings, the label to
+ * its left. A failed change leaves the switch showing the true state.
+ * @words "The label is `children`, not a `label` prop. Title Case noun phrase, 1–4 words, naming
+ * what is true when ON: `Password Protection`, not `Enable Password Protection`."
+ * (https://vercel.com/geist/toggle) "Render an optional one-sentence description as a sibling under
+ * the label that explains ON only." (https://vercel.com/geist/toggle) "Don’t describe OFF; it’s the
+ * negation." (https://vercel.com/geist/toggle) "Keep `labelCasing="title"` (the default) so labels
+ * match other Title Case surfaces." (https://vercel.com/geist/toggle) "Use `labelCasing="normal"`
+ * only when sentence-case content sits inline next to the toggle."
+ * (https://vercel.com/geist/toggle) Ours: the label is 12 px at medium weight, in sentence case:
+ * *Approvals*, with the card's description in one sentence. The state word is a separate word
+ * beside the switch, not its name.
+ * @access "Provide an accessible name through `children`, `aria-label`, or `aria-labelledby`."
+ * (https://vercel.com/geist/toggle) "Geist warns in development if all three are missing."
+ * (https://vercel.com/geist/toggle) "Set `aria-label` only when the visible label sits elsewhere on
+ * the row; otherwise let `children` carry it so sighted and screen-reader copy stay aligned."
+ * (https://vercel.com/geist/toggle) Ours: `role="switch"` with `aria-checked`, the name the same in
+ * both states; a missing name does not compile.
  */
-function Switch({ className, size = "default", ...props }) {
-    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn("nc-transition-paint peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent p-px after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 aria-invalid:border-destructive data-[size=default]:h-5 data-[size=default]:w-9 data-[size=sm]:h-4 data-[size=sm]:w-7 data-checked:bg-primary data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:after:hidden", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "nc-transition-transform pointer-events-none block rounded-full bg-background ring-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-full group-data-[size=sm]/switch:data-checked:translate-x-full group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0" }) }));
+function Switch({ className, size = "sm", ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn("nc-transition-paint peer group/switch relative inline-flex shrink-0 items-start rounded-full border border-transparent p-0 after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 aria-invalid:border-destructive data-[size=sm]:h-3.5 data-[size=sm]:w-7 data-[size=md]:h-5 data-[size=md]:w-9 data-[size=lg]:h-6 data-[size=lg]:w-10 data-checked:bg-primary data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:data-checked:bg-input/50 [@media(hover:hover)_and_(pointer:fine)]:after:hidden", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none mt-px block rounded-full bg-background ring-0 nc-transition-transform not-data-disabled:nc-elevation-resting group-data-[size=sm]/switch:ml-px group-data-[size=sm]/switch:size-2.75 group-data-[size=md]/switch:size-4.25 group-data-[size=lg]/switch:ml-px group-data-[size=lg]/switch:size-5.25 group-data-[size=sm]/switch:data-checked:translate-x-3.5 group-data-[size=md]/switch:data-checked:translate-x-4.25 group-data-[size=lg]/switch:data-checked:translate-x-4 data-disabled:bg-muted data-unchecked:translate-x-0" }) }));
 }
 export { Switch };

package/dist/components/table-card.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
+import { type CollectionNote } from "../internal/collection-note.js";
 import { type CardSurface } from "./card.js";
 /**
- * The frame a collection's table sits in: a heading, the collection's own
- * toolbar under it, the table, a labelled total, and the recessed footer strip.
+ * The frame a collection's table sits in: a heading with the collection's own
+ * toolbar at its trailing edge, the table, a labelled total, and the recessed footer strip.
  *
  * The Portal's DataTable and Nadia's record sections draw this one frame, so a
  * registry card ends the same way in both products.
@@ -12,27 +13,35 @@ import { type CardSurface } from "./card.js";
  * the recessed footer strip.
  * @instead An entity collection that is the page's whole job is `CollectionPage`. A chart is
  * `ChartCard`. One object's facts are `SettingsFactsSection`.
- * @behaviour The heading, the toolbar and a separator come first when given; the summary row is a
- * labelled total under the table; the footer strip holds the hint on the left and the count or
- * paging on the right.
- * @words The title names the collection. The footer is a count or the paging; the summary is a
- * labelled total. Never a help sentence in the footer.
+ * @behaviour The heading and a separator come first when given, the toolbar on the heading's row at
+ * its trailing edge, title left and controls right, as Vercel heads a card's list; on a card under
+ * 576 px the toolbar takes its own line under the title. The table's first and last columns stand
+ * in from the card's edges by the card's spacing, so the first column lines up with the title. The summary row is a
+ * labelled total under the table, padded like a table footer so its label lines up with the first
+ * column and set in ink, medium text; the footer strip holds the hint on the left and the count or
+ * paging on the right. A `note` about the whole list stands in a strip of its own under that one:
+ * one muted line with an optional *Learn more* at the left and one secondary action at the right,
+ * as Vercel ends a deployments list ("Deployment Retention is enabled", *View Recently Deleted*).
+ * @words “Pagination labels are `Previous` and `Next`. Page-count copy reads `Page 2 of 7` or `21–40 of 142` with an en-dash inside the range.” (https://vercel.com/geist/table)
+ * Ours: the title names the collection. The footer is a count or the paging; the summary is a labelled total. Never a help sentence in the footer.
  * @access A `section` whose title is an `h2`; the summary is a `dl`.
  */
-declare function TableCard({ title, description, actions, toolbar, summary, footer, footerHint, children, className, surface, ...props }: Omit<React.ComponentProps<"section">, "title"> & {
+declare function TableCard({ title, description, actions, toolbar, summary, footer, footerHint, note, children, className, surface, ...props }: Omit<React.ComponentProps<"section">, "title"> & {
     title?: React.ReactNode;
     description?: React.ReactNode;
     actions?: React.ReactNode;
-    /** The collection's search, filters and actions, under the heading and above the table. */
+    /** The collection's search, filters and actions, on the heading's row at its trailing edge. */
     toolbar?: React.ReactNode;
     /** A labelled total under the table. */
     summary?: {
         label: React.ReactNode;
         value: React.ReactNode;
-    };
+    } | undefined;
     footer?: React.ReactNode;
     footerHint?: React.ReactNode;
-    surface?: CardSurface;
+    /** The note about the whole list, in its own strip under the count and the paging: a line, Learn more, one secondary action. */
+    note?: CollectionNote | undefined;
+    surface?: CardSurface | undefined;
 }): React.JSX.Element;
-export { TableCard };
+export { TableCard, type CollectionNote };
 //# sourceMappingURL=table-card.d.ts.map

package/dist/components/table-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-card.d.ts","sourceRoot":"","sources":["../../src/components/table-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAA4D,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAGpG;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,GAAG;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2FAA2F;IAC3F,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC;IAC7D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,qBA8CA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"table-card.d.ts","sourceRoot":"","sources":["../../src/components/table-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEtF,OAAO,EAA4D,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAGpG;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,GAAG;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+FAA+F;IAC/F,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,GAAG,SAAS,CAAC;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,gIAAgI;IAChI,IAAI,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAClC,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CACnC,qBA0DA;AAED,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,CAAC"}

package/dist/components/table-card.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
+import { CollectionNoteStrip } from "../internal/collection-note.js";
 import { FooterStrip } from "../internal/footer-strip.js";
 import { Card, CardAction, CardDescription, CardHeader, CardTitle } from "./card.js";
 import { Separator } from "./separator.js";
 /**
- * The frame a collection's table sits in: a heading, the collection's own
- * toolbar under it, the table, a labelled total, and the recessed footer strip.
+ * The frame a collection's table sits in: a heading with the collection's own
+ * toolbar at its trailing edge, the table, a labelled total, and the recessed footer strip.
  *
  * The Portal's DataTable and Nadia's record sections draw this one frame, so a
  * registry card ends the same way in both products.
@@ -15,15 +16,22 @@ import { Separator } from "./separator.js";
  * the recessed footer strip.
  * @instead An entity collection that is the page's whole job is `CollectionPage`. A chart is
  * `ChartCard`. One object's facts are `SettingsFactsSection`.
- * @behaviour The heading, the toolbar and a separator come first when given; the summary row is a
- * labelled total under the table; the footer strip holds the hint on the left and the count or
- * paging on the right.
- * @words The title names the collection. The footer is a count or the paging; the summary is a
- * labelled total. Never a help sentence in the footer.
+ * @behaviour The heading and a separator come first when given, the toolbar on the heading's row at
+ * its trailing edge, title left and controls right, as Vercel heads a card's list; on a card under
+ * 576 px the toolbar takes its own line under the title. The table's first and last columns stand
+ * in from the card's edges by the card's spacing, so the first column lines up with the title. The summary row is a
+ * labelled total under the table, padded like a table footer so its label lines up with the first
+ * column and set in ink, medium text; the footer strip holds the hint on the left and the count or
+ * paging on the right. A `note` about the whole list stands in a strip of its own under that one:
+ * one muted line with an optional *Learn more* at the left and one secondary action at the right,
+ * as Vercel ends a deployments list ("Deployment Retention is enabled", *View Recently Deleted*).
+ * @words “Pagination labels are `Previous` and `Next`. Page-count copy reads `Page 2 of 7` or `21–40 of 142` with an en-dash inside the range.” (https://vercel.com/geist/table)
+ * Ours: the title names the collection. The footer is a count or the paging; the summary is a labelled total. Never a help sentence in the footer.
  * @access A `section` whose title is an `h2`; the summary is a `dl`.
  */
-function TableCard({ title, description, actions, toolbar, summary, footer, footerHint, children, className, surface = "resting", ...props }) {
+function TableCard({ title, description, actions, toolbar, summary, footer, footerHint, note, children, className, surface = "resting", ...props }) {
     const heading = title || description || actions;
-    return (_jsxs(Card, { render: _jsx("section", { ...props, "data-slot": "table-card" }), surface: surface, className: cn("min-w-0 gap-0 py-0", className), children: [(heading || toolbar) && (_jsxs(_Fragment, { children: [heading && (_jsxs(CardHeader, { className: cn("pt-(--card-spacing)", !toolbar && "pb-(--card-spacing)"), children: [title && (_jsx(CardTitle, { children: _jsx("h2", { children: title }) })), description && _jsx(CardDescription, { children: description }), actions && _jsx(CardAction, { children: actions })] })), toolbar && (_jsx("div", { "data-slot": "table-card-toolbar", className: "px-(--card-spacing) pt-(--card-spacing)", children: toolbar })), _jsx(Separator, {})] })), _jsx("div", { "data-slot": "table-card-body", className: "min-w-0", children: children }), summary && (_jsxs("dl", { "data-slot": "table-card-summary", className: "flex min-w-0 items-start justify-between gap-4 border-t border-border px-4 py-3 text-sm font-medium", children: [_jsx("dt", { children: summary.label }), _jsx("dd", { className: "text-right tabular-nums", children: summary.value })] })), _jsx(FooterStrip, { hint: footerHint, hintSlot: "table-card-hint", children: footer })] }));
+    return (_jsxs(Card, { render: _jsx("section", { ...props, "data-slot": "table-card" }), surface: surface, className: cn("min-w-0 gap-0 py-0", className), children: [(heading || toolbar) && (_jsxs(_Fragment, { children: [_jsxs(CardHeader, { className: "py-(--card-spacing)", children: [title && (_jsx(CardTitle, { children: _jsx("h2", { children: title }) })), description && _jsx(CardDescription, { children: description }), actions || toolbar ? (_jsxs(CardAction, { className: cn("flex min-w-0 items-center gap-2", toolbar &&
+                                    "@max-xl/card-header:col-span-2 @max-xl/card-header:col-start-1 @max-xl/card-header:row-span-1 @max-xl/card-header:row-start-auto @max-xl/card-header:justify-self-stretch"), children: [actions, toolbar ? (_jsx("div", { "data-slot": "table-card-toolbar", className: "min-w-0 flex-1", children: toolbar })) : null] })) : null] }), _jsx(Separator, {})] })), _jsx("div", { "data-slot": "table-card-body", className: "min-w-0 [&_[data-slot=table-cell]:first-child]:pl-(--card-spacing) [&_[data-slot=table-cell]:last-child]:pr-(--card-spacing) [&_[data-slot=table-head]:first-child]:pl-(--card-spacing) [&_[data-slot=table-head]:last-child]:pr-(--card-spacing)", children: children }), summary && (_jsxs("dl", { "data-slot": "table-card-summary", className: "flex min-w-0 items-start justify-between gap-4 border-t border-border px-(--card-spacing) py-2.5 text-sm font-medium", children: [_jsx("dt", { children: summary.label }), _jsx("dd", { className: "text-right tabular-nums", children: summary.value })] })), _jsx(FooterStrip, { hint: footerHint, hintSlot: "table-card-hint", children: footer }), note ? _jsx(CollectionNoteStrip, { note: note }) : null] }));
 }
 export { TableCard };

package/dist/components/table-layouts.d.ts

@@ -1,28 +1,60 @@
 export declare const tableCompactLayouts: {
+    /** Only by request: a row that must stay one line on any card wider than a phone's. */
+    readonly narrow: {
+        readonly width: 448;
+        readonly column: "hidden @md/table:table-cell";
+        readonly track: "hidden @md/table:table-column";
+        readonly row: "@max-md/table:[&>td]:border-b-0 @max-md/table:[&>td]:after:hidden @max-md/table:h-auto! @max-md/table:[&>td]:pb-1!";
+        readonly details: "@md/table:hidden";
+        readonly table: "@max-md/table:table-auto @max-md/table:[&_td]:whitespace-normal @max-md/table:[&_th:not(:first-child):not([data-identity])]:w-px @max-md/table:[&_tr:not([data-slot=table-detail-row])>td:not(:first-child)]:pl-0 @max-md/table:[&_tr:not([data-slot=table-detail-row])>td:not(:first-child):not(:last-child)]:pr-0";
+    };
     readonly tight: {
+        readonly width: 576;
         readonly column: "hidden @xl/table:table-cell";
-        readonly row: "@max-xl/table:border-b-0";
+        readonly track: "hidden @xl/table:table-column";
+        readonly row: "@max-xl/table:[&>td]:border-b-0 @max-xl/table:[&>td]:after:hidden @max-xl/table:h-auto! @max-xl/table:[&>td]:pb-1!";
         readonly details: "@xl/table:hidden";
-        readonly table: "@max-xl/table:table-auto @max-xl/table:[&_td]:whitespace-normal @max-xl/table:[&_th:not(:first-child)]:w-px @max-xl/table:[&_th]:px-2 @max-xl/table:[&_td]:px-2 @xl/table:[&_th]:px-4 @xl/table:[&_td]:px-4";
+        readonly table: "@max-xl/table:table-auto @max-xl/table:[&_td]:whitespace-normal @max-xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
     };
     readonly standard: {
+        readonly width: 768;
         readonly column: "hidden @3xl/table:table-cell";
-        readonly row: "@max-3xl/table:border-b-0";
+        readonly track: "hidden @3xl/table:table-column";
+        readonly row: "@max-3xl/table:[&>td]:border-b-0 @max-3xl/table:[&>td]:after:hidden @max-3xl/table:h-auto! @max-3xl/table:[&>td]:pb-1!";
         readonly details: "@3xl/table:hidden";
-        readonly table: "@max-3xl/table:table-auto @max-3xl/table:[&_td]:whitespace-normal @max-3xl/table:[&_th:not(:first-child)]:w-px @max-3xl/table:[&_th]:px-2 @max-3xl/table:[&_td]:px-2 @3xl/table:[&_th]:px-4 @3xl/table:[&_td]:px-4";
+        readonly table: "@max-3xl/table:table-auto @max-3xl/table:[&_td]:whitespace-normal @max-3xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
     };
     readonly wide: {
+        readonly width: 1024;
         readonly column: "hidden @5xl/table:table-cell";
-        readonly row: "@max-5xl/table:border-b-0";
+        readonly track: "hidden @5xl/table:table-column";
+        readonly row: "@max-5xl/table:[&>td]:border-b-0 @max-5xl/table:[&>td]:after:hidden @max-5xl/table:h-auto! @max-5xl/table:[&>td]:pb-1!";
         readonly details: "@5xl/table:hidden";
-        readonly table: "@max-5xl/table:table-auto @max-5xl/table:[&_td]:whitespace-normal @max-5xl/table:[&_th:not(:first-child)]:w-px @max-5xl/table:[&_th]:px-2 @max-5xl/table:[&_td]:px-2 @5xl/table:[&_th]:px-4 @5xl/table:[&_td]:px-4";
+        readonly table: "@max-5xl/table:table-auto @max-5xl/table:[&_td]:whitespace-normal @max-5xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
+    };
+    readonly roomy: {
+        readonly width: 1088;
+        readonly column: "hidden @min-[68rem]/table:table-cell";
+        readonly track: "hidden @min-[68rem]/table:table-column";
+        readonly row: "@max-[68rem]/table:[&>td]:border-b-0 @max-[68rem]/table:[&>td]:after:hidden @max-[68rem]/table:h-auto! @max-[68rem]/table:[&>td]:pb-1!";
+        readonly details: "@min-[68rem]/table:hidden";
+        readonly table: "@max-[68rem]/table:table-auto @max-[68rem]/table:[&_td]:whitespace-normal @max-[68rem]/table:[&_th:not(:first-child):not([data-identity])]:w-px";
     };
     readonly spacious: {
+        readonly width: 1152;
         readonly column: "hidden @6xl/table:table-cell";
-        readonly row: "@max-6xl/table:border-b-0";
+        readonly track: "hidden @6xl/table:table-column";
+        readonly row: "@max-6xl/table:[&>td]:border-b-0 @max-6xl/table:[&>td]:after:hidden @max-6xl/table:h-auto! @max-6xl/table:[&>td]:pb-1!";
         readonly details: "@6xl/table:hidden";
-        readonly table: "@max-6xl/table:table-auto @max-6xl/table:[&_td]:whitespace-normal @max-6xl/table:[&_th:not(:first-child)]:w-px @max-6xl/table:[&_th]:px-2 @max-6xl/table:[&_td]:px-2 @6xl/table:[&_th]:px-4 @6xl/table:[&_td]:px-4";
+        readonly table: "@max-6xl/table:table-auto @max-6xl/table:[&_td]:whitespace-normal @max-6xl/table:[&_th:not(:first-child):not([data-identity])]:w-px";
     };
 };
 export type TableCompactLayout = keyof typeof tableCompactLayouts;
+/**
+ * The compact layout for columns of these sizes: the narrowest card width at which every sized
+ * column, and a floor for each column without a size, still fit. A card narrower than that
+ * leaves its secondary columns out of the row: each joins the one muted line under the name, or is
+ * dropped.
+ */
+export declare function compactLayoutFor(sizes: readonly (number | undefined)[]): TableCompactLayout;
 //# sourceMappingURL=table-layouts.d.ts.map

package/dist/components/table-layouts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-layouts.d.ts","sourceRoot":"","sources":["../../src/components/table-layouts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;CA6BtB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC"}
+{"version":3,"file":"table-layouts.d.ts","sourceRoot":"","sources":["../../src/components/table-layouts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB;IAC9B,uFAAuF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD/E,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAalE;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,kBAAkB,CAG3F"}

package/dist/components/table-layouts.js

@@ -1,26 +1,70 @@
 export const tableCompactLayouts = {
+    /** Only by request: a row that must stay one line on any card wider than a phone's. */
+    narrow: {
+        width: 448,
+        column: "hidden @md/table:table-cell",
+        track: "hidden @md/table:table-column",
+        row: "@max-md/table:[&>td]:border-b-0 @max-md/table:[&>td]:after:hidden @max-md/table:h-auto! @max-md/table:[&>td]:pb-1!",
+        details: "@md/table:hidden",
+        table: "@max-md/table:table-auto @max-md/table:[&_td]:whitespace-normal @max-md/table:[&_th:not(:first-child):not([data-identity])]:w-px @max-md/table:[&_tr:not([data-slot=table-detail-row])>td:not(:first-child)]:pl-0 @max-md/table:[&_tr:not([data-slot=table-detail-row])>td:not(:first-child):not(:last-child)]:pr-0",
+    },
     tight: {
+        width: 576,
         column: "hidden @xl/table:table-cell",
-        row: "@max-xl/table:border-b-0",
+        track: "hidden @xl/table:table-column",
+        row: "@max-xl/table:[&>td]:border-b-0 @max-xl/table:[&>td]:after:hidden @max-xl/table:h-auto! @max-xl/table:[&>td]:pb-1!",
         details: "@xl/table:hidden",
-        table: "@max-xl/table:table-auto @max-xl/table:[&_td]:whitespace-normal @max-xl/table:[&_th:not(:first-child)]:w-px @max-xl/table:[&_th]:px-2 @max-xl/table:[&_td]:px-2 @xl/table:[&_th]:px-4 @xl/table:[&_td]:px-4",
+        table: "@max-xl/table:table-auto @max-xl/table:[&_td]:whitespace-normal @max-xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
     },
     standard: {
+        width: 768,
         column: "hidden @3xl/table:table-cell",
-        row: "@max-3xl/table:border-b-0",
+        track: "hidden @3xl/table:table-column",
+        row: "@max-3xl/table:[&>td]:border-b-0 @max-3xl/table:[&>td]:after:hidden @max-3xl/table:h-auto! @max-3xl/table:[&>td]:pb-1!",
         details: "@3xl/table:hidden",
-        table: "@max-3xl/table:table-auto @max-3xl/table:[&_td]:whitespace-normal @max-3xl/table:[&_th:not(:first-child)]:w-px @max-3xl/table:[&_th]:px-2 @max-3xl/table:[&_td]:px-2 @3xl/table:[&_th]:px-4 @3xl/table:[&_td]:px-4",
+        table: "@max-3xl/table:table-auto @max-3xl/table:[&_td]:whitespace-normal @max-3xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
     },
     wide: {
+        width: 1024,
         column: "hidden @5xl/table:table-cell",
-        row: "@max-5xl/table:border-b-0",
+        track: "hidden @5xl/table:table-column",
+        row: "@max-5xl/table:[&>td]:border-b-0 @max-5xl/table:[&>td]:after:hidden @max-5xl/table:h-auto! @max-5xl/table:[&>td]:pb-1!",
         details: "@5xl/table:hidden",
-        table: "@max-5xl/table:table-auto @max-5xl/table:[&_td]:whitespace-normal @max-5xl/table:[&_th:not(:first-child)]:w-px @max-5xl/table:[&_th]:px-2 @max-5xl/table:[&_td]:px-2 @5xl/table:[&_th]:px-4 @5xl/table:[&_td]:px-4",
+        table: "@max-5xl/table:table-auto @max-5xl/table:[&_td]:whitespace-normal @max-5xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
+    },
+    roomy: {
+        width: 1088,
+        column: "hidden @min-[68rem]/table:table-cell",
+        track: "hidden @min-[68rem]/table:table-column",
+        row: "@max-[68rem]/table:[&>td]:border-b-0 @max-[68rem]/table:[&>td]:after:hidden @max-[68rem]/table:h-auto! @max-[68rem]/table:[&>td]:pb-1!",
+        details: "@min-[68rem]/table:hidden",
+        table: "@max-[68rem]/table:table-auto @max-[68rem]/table:[&_td]:whitespace-normal @max-[68rem]/table:[&_th:not(:first-child):not([data-identity])]:w-px",
     },
     spacious: {
+        width: 1152,
         column: "hidden @6xl/table:table-cell",
-        row: "@max-6xl/table:border-b-0",
+        track: "hidden @6xl/table:table-column",
+        row: "@max-6xl/table:[&>td]:border-b-0 @max-6xl/table:[&>td]:after:hidden @max-6xl/table:h-auto! @max-6xl/table:[&>td]:pb-1!",
         details: "@6xl/table:hidden",
-        table: "@max-6xl/table:table-auto @max-6xl/table:[&_td]:whitespace-normal @max-6xl/table:[&_th:not(:first-child)]:w-px @max-6xl/table:[&_th]:px-2 @max-6xl/table:[&_td]:px-2 @6xl/table:[&_th]:px-4 @6xl/table:[&_td]:px-4",
+        table: "@max-6xl/table:table-auto @max-6xl/table:[&_td]:whitespace-normal @max-6xl/table:[&_th:not(:first-child):not([data-identity])]:w-px",
     },
 };
+/** The least a column without a size needs, in pixels: below it the card lays out compact. */
+const UNSIZED_COLUMN_FLOOR = 160;
+const NARROWEST_FIRST = [
+    "tight",
+    "standard",
+    "wide",
+    "roomy",
+    "spacious",
+];
+/**
+ * The compact layout for columns of these sizes: the narrowest card width at which every sized
+ * column, and a floor for each column without a size, still fit. A card narrower than that
+ * leaves its secondary columns out of the row: each joins the one muted line under the name, or is
+ * dropped.
+ */
+export function compactLayoutFor(sizes) {
+    const needed = sizes.reduce((sum, size) => sum + (size ?? UNSIZED_COLUMN_FLOOR), 0);
+    return NARROWEST_FIRST.find((name) => tableCompactLayouts[name].width >= needed) ?? "spacious";
+}

package/dist/components/table-value.d.ts

@@ -20,9 +20,10 @@ export type TableValueProps = {
  * @family Data
  * @when Every cell of a `DataTable` whose reading can be missing, zero, out of date, unreadable or still loading.
  * @instead A whole table that failed to read is `EmptyState kind="failed"`; a figure on its own is a `KpiCard`.
- * @behaviour Five states that never collapse into a dash: unknown (a muted dash), zero (the figure "0"), stale (the reading, then the stale word), failed (the warning mark and its words) and loading (a still 64 × 12 placeholder). A real value, `0` included, is shown as it is.
- * @words `missingLabel` says what the absence means ("Not reported", never "N/A" or "None"); `staleLabel` is one word ("Stale"); `failedLabel` says the read failed ("Couldn't read").
- * @access The dash is hidden and `missingLabel` is read in its place; the warning mark is hidden beside its words; the placeholder is decorative, and the table is `aria-busy` while it loads.
+ * @behaviour “Render `—` in cells where a value is unknown or not applicable. Don’t substitute `N/A`, `null`, or an empty string.” (https://vercel.com/geist/table)
+ * Ours: five states that never collapse into a dash: unknown (a muted dash), zero (the figure "0"), stale (the reading, then the stale word), failed (the error mark and its words, in the error colour) and loading (a still 64 × 12 placeholder). A real value, `0` included, is shown as it is.
+ * @words Ours: `missingLabel` says what the absence means ("Not reported", never "N/A" or "None"); `staleLabel` is one word ("Stale"); `failedLabel` says the read failed ("Couldn't read").
+ * @access The dash is hidden and `missingLabel` is read in its place; the error mark is hidden beside its words; the placeholder is decorative, and its cell is `aria-busy` while it loads.
  */
 export declare function TableValue(props: TableValueProps): string | number | import("react").JSX.Element;
 export {};