@nadicodeai/ui 12.1.156 → 12.1.157

package/dist/components/numbered-steps.d.ts

@@ -21,7 +21,7 @@ export type NumberedStepsProps = {
     framed?: boolean;
     columns?: never;
 } | {
-    /** The steps side by side from 640 px, two across then three, each number above its words: a short sequence a page explains. */
+    /** The steps side by side as their width allows, each at least 192 px wide, each number above its words: a short sequence a page explains. */
     columns: true;
     framed?: never;
 });
@@ -31,7 +31,7 @@ export type NumberedStepsProps = {
  * @family Other
  * @when A short sequence the person does: installing Nadia from Downloads, connecting Teams, the Dashboard's setup guide; or a sequence whose real progress the page tracks, such as the company check; and, as `columns`, the few steps a page explains, such as the website's how it works. Vercel draws its Speed Insights *Get Started* the same way: three numbered steps, each with its words and its own action.
  * @instead Stages the system runs on an entry screen are the EntryStageList; the steps of an Agent's run are a RunTimeline; a setup with a wait is a FormDrawer with its "Step 2 of 3" line.
- * @behaviour Each step is a 28 px square number in label-mono, its title, one muted description and, under it, the step's own action. Instructions mark no step and every number stays muted, because the page cannot know which one the person is on. Where the page tracks real progress, `current` turns that step's number to ink and writes its word beside the title. `framed` draws one bordered list with a seam between steps; `columns` sets the steps side by side from 640 px, two across then three, each number above its words, and is never framed. Colour is neutral: the current number is ink on the page's background and the others are muted; no hue marks a step. It is the one owner of a drawn step number.
+ * @behaviour Each step is a 28 px square number in label-mono, its title, one muted description and, under it, the step's own action. Instructions mark no step and every number stays muted, because the page cannot know which one the person is on. Where the page tracks real progress, `current` turns that step's number to ink and writes its word beside the title. `framed` draws one bordered list with a seam between steps; `columns` sets the steps side by side as the width it is given allows, each column at least 192 px, so a phone stacks them and a wide page or panel holds three, each number above its words, and is never framed. A step's action never grows past its step: one wider than the step is held to its width. Colour is neutral: the current number is ink on the page's background and the others are muted; no hue marks a step. It is the one owner of a drawn step number.
  * @words The title is what the person does, in the imperative ("Install Nadia"), or a finished step in the past tense ("Sofia looked up acme.it"). The current step's word is short: "Now". An action names its verb and carries its platform line ("macOS · 2.14.0 · Apple silicon").
  * @access An ordered list named by `label`, so assistive technology reads the count and position; the drawn numbers are hidden. The current step carries `aria-current="step"`. The titles are not headings, so the list never breaks the page's heading order.
  */

package/dist/components/numbered-steps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"numbered-steps.d.ts","sourceRoot":"","sources":["../../src/components/numbered-steps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,gHAAgH;IAChH,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACzC,GAAG,CACA;IACE,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,GACD;IACE,gIAAgI;IAChI,OAAO,EAAE,IAAI,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CACJ,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAc,EACd,OAAO,GACR,EAAE,kBAAkB,+BAgEpB"}
+{"version":3,"file":"numbered-steps.d.ts","sourceRoot":"","sources":["../../src/components/numbered-steps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,gHAAgH;IAChH,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACzC,GAAG,CACA;IACE,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,GACD;IACE,8IAA8I;IAC9I,OAAO,EAAE,IAAI,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CACJ,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAc,EACd,OAAO,GACR,EAAE,kBAAkB,+BAgEpB"}

package/dist/components/numbered-steps.js

@@ -6,20 +6,20 @@ import { cn } from "../lib/utils.js";
  * @family Other
  * @when A short sequence the person does: installing Nadia from Downloads, connecting Teams, the Dashboard's setup guide; or a sequence whose real progress the page tracks, such as the company check; and, as `columns`, the few steps a page explains, such as the website's how it works. Vercel draws its Speed Insights *Get Started* the same way: three numbered steps, each with its words and its own action.
  * @instead Stages the system runs on an entry screen are the EntryStageList; the steps of an Agent's run are a RunTimeline; a setup with a wait is a FormDrawer with its "Step 2 of 3" line.
- * @behaviour Each step is a 28 px square number in label-mono, its title, one muted description and, under it, the step's own action. Instructions mark no step and every number stays muted, because the page cannot know which one the person is on. Where the page tracks real progress, `current` turns that step's number to ink and writes its word beside the title. `framed` draws one bordered list with a seam between steps; `columns` sets the steps side by side from 640 px, two across then three, each number above its words, and is never framed. Colour is neutral: the current number is ink on the page's background and the others are muted; no hue marks a step. It is the one owner of a drawn step number.
+ * @behaviour Each step is a 28 px square number in label-mono, its title, one muted description and, under it, the step's own action. Instructions mark no step and every number stays muted, because the page cannot know which one the person is on. Where the page tracks real progress, `current` turns that step's number to ink and writes its word beside the title. `framed` draws one bordered list with a seam between steps; `columns` sets the steps side by side as the width it is given allows, each column at least 192 px, so a phone stacks them and a wide page or panel holds three, each number above its words, and is never framed. A step's action never grows past its step: one wider than the step is held to its width. Colour is neutral: the current number is ink on the page's background and the others are muted; no hue marks a step. It is the one owner of a drawn step number.
  * @words The title is what the person does, in the imperative ("Install Nadia"), or a finished step in the past tense ("Sofia looked up acme.it"). The current step's word is short: "Now". An action names its verb and carries its platform line ("macOS · 2.14.0 · Apple silicon").
  * @access An ordered list named by `label`, so assistive technology reads the count and position; the drawn numbers are hidden. The current step carries `aria-current="step"`. The titles are not headings, so the list never breaks the page's heading order.
  */
 export function NumberedSteps({ label, steps, current, framed = false, columns, }) {
     return (_jsx("ol", { "aria-label": label, className: cn(framed
             ? "grid divide-y divide-border rounded-md border border-border bg-card"
-            : "grid gap-6", columns && "gap-8 sm:grid-cols-2 lg:grid-cols-3"), "data-slot": "numbered-steps", children: steps.map((step, index) => {
+            : "grid gap-6", columns && "grid-cols-[repeat(auto-fit,minmax(min(100%,12rem),1fr))] gap-8"), "data-slot": "numbered-steps", children: steps.map((step, index) => {
             const word = current && step.id === current.id ? current.label : undefined;
             const isCurrent = word !== undefined;
             return (_jsxs("li", { "aria-current": isCurrent ? "step" : undefined, className: cn(columns
-                    ? "grid content-start gap-y-3"
+                    ? "grid grid-cols-[minmax(0,1fr)] content-start gap-y-3"
                     : "grid grid-cols-[1.75rem_minmax(0,1fr)] gap-x-3 gap-y-1", framed && "p-4"), children: [_jsx("span", { "aria-hidden": "true", className: isCurrent
                             ? "flex size-7 items-center justify-center rounded-md bg-foreground font-label-mono text-label-mono tabular-nums text-background"
-                            : "flex size-7 items-center justify-center rounded-md bg-muted font-label-mono text-label-mono tabular-nums text-muted-foreground", children: index + 1 }), _jsxs("div", { className: "flex min-h-7 min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-body-sm font-medium text-foreground", children: step.title }), isCurrent ? (_jsx("span", { className: "font-label-mono text-label-mono uppercase text-muted-foreground", children: word })) : null] }), step.description ? (_jsx("div", { className: cn("text-body-sm text-muted-foreground", !columns && "col-start-2"), children: step.description })) : null, step.action ? (_jsx("div", { className: cn("grid justify-items-start gap-1.5", columns ? "pt-1" : "col-start-2 pt-3"), children: step.action })) : null] }, step.id));
+                            : "flex size-7 items-center justify-center rounded-md bg-muted font-label-mono text-label-mono tabular-nums text-muted-foreground", children: index + 1 }), _jsxs("div", { className: "flex min-h-7 min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-body-sm font-medium text-foreground", children: step.title }), isCurrent ? (_jsx("span", { className: "font-label-mono text-label-mono uppercase text-muted-foreground", children: word })) : null] }), step.description ? (_jsx("div", { className: cn("text-body-sm text-muted-foreground", !columns && "col-start-2"), children: step.description })) : null, step.action ? (_jsx("div", { className: cn("grid grid-cols-[minmax(0,1fr)] justify-items-start gap-1.5 *:max-w-full", columns ? "pt-1" : "col-start-2 pt-3"), children: step.action })) : null] }, step.id));
         }) }));
 }

package/dist/showcase/usage.generated.js

@@ -1781,7 +1781,7 @@ export const USAGE = [
         summary: "Steps a person follows, each with its number, its words and its own action.",
         when: "A short sequence the person does: installing Nadia from Downloads, connecting Teams, the Dashboard's setup guide; or a sequence whose real progress the page tracks, such as the company check; and, as `columns`, the few steps a page explains, such as the website's how it works. Vercel draws its Speed Insights *Get Started* the same way: three numbered steps, each with its words and its own action.",
         instead: 'Stages the system runs on an entry screen are the EntryStageList; the steps of an Agent\'s run are a RunTimeline; a setup with a wait is a FormDrawer with its "Step 2 of 3" line.',
-        behaviour: "Each step is a 28 px square number in label-mono, its title, one muted description and, under it, the step's own action. Instructions mark no step and every number stays muted, because the page cannot know which one the person is on. Where the page tracks real progress, `current` turns that step's number to ink and writes its word beside the title. `framed` draws one bordered list with a seam between steps; `columns` sets the steps side by side from 640 px, two across then three, each number above its words, and is never framed. Colour is neutral: the current number is ink on the page's background and the others are muted; no hue marks a step. It is the one owner of a drawn step number.",
+        behaviour: "Each step is a 28 px square number in label-mono, its title, one muted description and, under it, the step's own action. Instructions mark no step and every number stays muted, because the page cannot know which one the person is on. Where the page tracks real progress, `current` turns that step's number to ink and writes its word beside the title. `framed` draws one bordered list with a seam between steps; `columns` sets the steps side by side as the width it is given allows, each column at least 192 px, so a phone stacks them and a wide page or panel holds three, each number above its words, and is never framed. A step's action never grows past its step: one wider than the step is held to its width. Colour is neutral: the current number is ink on the page's background and the others are muted; no hue marks a step. It is the one owner of a drawn step number.",
         words: 'The title is what the person does, in the imperative ("Install Nadia"), or a finished step in the past tense ("Sofia looked up acme.it"). The current step\'s word is short: "Now". An action names its verb and carries its platform line ("macOS · 2.14.0 · Apple silicon").',
         access: 'An ordered list named by `label`, so assistive technology reads the count and position; the drawn numbers are hidden. The current step carries `aria-current="step"`. The titles are not headings, so the list never breaks the page\'s heading order.',
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.156",
+  "version": "12.1.157",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -84,7 +84,7 @@
     "@base-ui/react": "^1.9.0",
     "@iconify-icons/logos": "^2.0.3",
     "@iconify/react": "^6.0.2",
-    "@nadicodeai/design-system": "12.1.156",
+    "@nadicodeai/design-system": "12.1.157",
     "@tanstack/react-table": "^9.3.1",
     "@vgpu/wgsl": "0.6.0",
     "class-variance-authority": "^0.7.1",