@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/docs/wizard.json

@@ -0,0 +1,736 @@
+{
+  "family": "wizard",
+  "ui": "wizard",
+  "binding": "react",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Multi-step form with validation per step."
+  },
+  "axes": {
+    "progress": [
+      "start",
+      "top",
+      "none"
+    ],
+    "scroll": [
+      "ancestor",
+      "self"
+    ],
+    "level": [
+      2,
+      3,
+      4
+    ],
+    "autosave": [
+      "none",
+      "step"
+    ]
+  },
+  "members": {
+    "wizard": {
+      "nativeElement": "div",
+      "defaults": {
+        "progress": "start",
+        "scroll": "ancestor",
+        "linear": true,
+        "level": 2,
+        "guardUnsaved": false,
+        "delay": 200,
+        "minDuration": 400,
+        "defaultProgressOpen": false,
+        "disabled": false
+      },
+      "capabilities": [
+        "current",
+        "value",
+        "open",
+        "placement",
+        "disabled",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "loading",
+        "invalid",
+        "complete",
+        "open",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "layout",
+        "progress",
+        "progress-toggle",
+        "progress-position",
+        "progress-track",
+        "progress-segment",
+        "main",
+        "error",
+        "step",
+        "step-header",
+        "step-title",
+        "position",
+        "optional",
+        "step-description",
+        "actions",
+        "actions-start",
+        "actions-end",
+        "cancel",
+        "save-draft",
+        "draft-status",
+        "skip",
+        "previous",
+        "next",
+        "submit",
+        "edit",
+        "complete",
+        "skeleton"
+      ]
+    }
+  },
+  "docs": {
+    "wizard": {
+      "imports": {
+        "source": "import { Wizard, WizardStep, WizardComplete, WizardEdit, useWizardStep } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div",
+          "required": true,
+          "purpose": "data-ui=\"wizard\", data-progress, data-scroll, and data-loading, data-invalid or data-complete for the submission. The container named slotted-wizard."
+        },
+        {
+          "part": "layout",
+          "element": "div",
+          "required": true,
+          "purpose": "The grid of progress and main, one element in so the container query can change it."
+        },
+        {
+          "part": "progress",
+          "element": "div",
+          "required": false,
+          "purpose": "The Stepper, beside the step (progress=\"start\") or above it (\"top\"); data-open while the compact list is open. Absent under progress=\"none\"."
+        },
+        {
+          "part": "progress-toggle",
+          "element": "button",
+          "required": false,
+          "purpose": "Below 600 pixels of the wizard’s own width: “Step 2 of 5” and one segment per step; aria-expanded opens the list."
+        },
+        {
+          "part": "progress-position",
+          "element": "span",
+          "required": false,
+          "purpose": "messages.position, the toggle’s accessible name."
+        },
+        {
+          "part": "progress-track",
+          "element": "span",
+          "required": false,
+          "purpose": "aria-hidden: the whole flow at a glance, one segment per step present."
+        },
+        {
+          "part": "progress-segment",
+          "element": "span",
+          "required": false,
+          "purpose": "data-complete, data-current or data-invalid."
+        },
+        {
+          "part": "main",
+          "element": "div",
+          "required": true,
+          "purpose": "The column of error, step and actions, or of complete."
+        },
+        {
+          "part": "error",
+          "element": "div around an Alert",
+          "required": false,
+          "purpose": "The consumer’s error, or a failed submission, in the danger tone. Focus moves to it."
+        },
+        {
+          "part": "step",
+          "element": "div",
+          "required": true,
+          "purpose": "The current step: its header and its form. aria-busy while a draft is restored."
+        },
+        {
+          "part": "step-header",
+          "element": "div",
+          "required": true,
+          "purpose": "The step’s heading and description."
+        },
+        {
+          "part": "step-title",
+          "element": "h2, h3 or h4",
+          "required": true,
+          "purpose": "By level; tabindex=\"-1\" and the focus target on every step change. Holds the position, the label and the optional mark."
+        },
+        {
+          "part": "position",
+          "element": "span",
+          "required": true,
+          "purpose": "“Step 2 of 5” above the name. Below 600 pixels it leaves the picture and stays in the heading’s text."
+        },
+        {
+          "part": "optional",
+          "element": "span around a Tag",
+          "required": false,
+          "purpose": "messages.optional, on an optional step."
+        },
+        {
+          "part": "step-description",
+          "element": "p",
+          "required": false,
+          "purpose": "The step’s description."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": true,
+          "purpose": "The row under the step, WizardActions by default; the actions prop replaces it."
+        },
+        {
+          "part": "actions-start",
+          "element": "div",
+          "required": true,
+          "purpose": "What leaves the flow: cancel, save draft, then the draft status."
+        },
+        {
+          "part": "actions-end",
+          "element": "div",
+          "required": true,
+          "purpose": "What moves it: skip, back, then next or submit at the end edge."
+        },
+        {
+          "part": "cancel",
+          "element": "button (Button, ghost)",
+          "required": false,
+          "purpose": "Asks onCancel with dirty. Rendered when onCancel is given."
+        },
+        {
+          "part": "save-draft",
+          "element": "button (Button, ghost)",
+          "required": false,
+          "purpose": "Writes the draft. Rendered when onSaveDraft or persistence is given."
+        },
+        {
+          "part": "draft-status",
+          "element": "span role=\"status\"",
+          "required": false,
+          "purpose": "“Draft saved at 14:02”, announced once, politely."
+        },
+        {
+          "part": "skip",
+          "element": "button (Button, ghost)",
+          "required": false,
+          "purpose": "On an optional step: accepts it with no answers."
+        },
+        {
+          "part": "previous",
+          "element": "button (Button, outline)",
+          "required": false,
+          "purpose": "The previous step, keeping what was typed. Absent on the first."
+        },
+        {
+          "part": "next",
+          "element": "button type=\"submit\" (Button, solid)",
+          "required": false,
+          "purpose": "Submits the step’s form from outside it through the form attribute; “Save and return” after an edit from a review step."
+        },
+        {
+          "part": "submit",
+          "element": "button type=\"submit\" (Button, solid)",
+          "required": false,
+          "purpose": "The same button on the step whose acceptance submits the flow; data-final."
+        },
+        {
+          "part": "edit",
+          "element": "button (WizardEdit)",
+          "required": false,
+          "purpose": "Placed by the consumer on a review step: goes to a step and comes back. Text in the accent; named “Change” and the step’s label."
+        },
+        {
+          "part": "complete",
+          "element": "div",
+          "required": false,
+          "purpose": "WizardComplete’s content after an accepted submission, in place of step and actions; takes focus."
+        },
+        {
+          "part": "skeleton",
+          "element": "div",
+          "required": false,
+          "purpose": "While an asynchronous draft is restored: one field whose label and control are skeletons, with the header’s lines beside it."
+        }
+      ],
+      "api": [
+        {
+          "name": "step",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Wizard",
+          "description": "The current step’s name. Present means controlled"
+        },
+        {
+          "name": "defaultStep",
+          "type": "string",
+          "defaultValue": "the first incomplete step",
+          "appliesTo": "Wizard",
+          "description": "The uncontrolled start, read once and clamped to a step in reach"
+        },
+        {
+          "name": "value",
+          "type": "WizardValue",
+          "defaultValue": "—",
+          "appliesTo": "Wizard",
+          "description": "The accepted answers by step name. Present means controlled"
+        },
+        {
+          "name": "defaultValue",
+          "type": "WizardValue",
+          "defaultValue": "{}",
+          "appliesTo": "Wizard",
+          "description": "The uncontrolled answers, read once"
+        },
+        {
+          "name": "progressOpen",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Wizard",
+          "description": "Whether the compact list is open. Present means controlled"
+        },
+        {
+          "name": "defaultProgressOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Wizard",
+          "description": "The uncontrolled start, read once"
+        },
+        {
+          "name": "progress",
+          "type": "'start' | 'top' | 'none'",
+          "defaultValue": "start",
+          "appliesTo": "Wizard, WizardDefaultsProvider",
+          "description": "Where the list of steps stands"
+        },
+        {
+          "name": "scroll",
+          "type": "'ancestor' | 'self'",
+          "defaultValue": "ancestor",
+          "appliesTo": "Wizard, WizardDefaultsProvider",
+          "description": "self takes the height given, scrolls the step and pins the actions"
+        },
+        {
+          "name": "linear",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Wizard, WizardDefaultsProvider",
+          "description": "A step ahead is reached only once every step before it is complete"
+        },
+        {
+          "name": "level",
+          "type": "2 | 3 | 4",
+          "defaultValue": "2",
+          "appliesTo": "Wizard, WizardDefaultsProvider",
+          "description": "The step heading’s level"
+        },
+        {
+          "name": "messages",
+          "type": "PartialMessages<WizardMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Wizard",
+          "description": "Words laid over the language in force, key by key: position, progress (the name of the list of steps), previous, next, submit, return, cancel, saveDraft, saving, saved with {time}, draftFailed, skip, optional, edit, incomplete, submitFailed, restoring"
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Wizard",
+          "description": "An error of your own above the step; it wins over a failed submission"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Wizard",
+          "description": "The form disabled and every action refused"
+        },
+        {
+          "name": "persistence",
+          "type": "WizardPersistence",
+          "defaultValue": "—",
+          "appliesTo": "Wizard",
+          "description": "load, save and clear; storagePersistence from @slotted/core/wizard keeps drafts in Storage"
+        },
+        {
+          "name": "version",
+          "type": "string | number",
+          "defaultValue": "—",
+          "appliesTo": "Wizard",
+          "description": "A draft of another version is not restored"
+        },
+        {
+          "name": "autosave",
+          "type": "'none' | 'step'",
+          "defaultValue": "step with persistence",
+          "appliesTo": "Wizard",
+          "description": "step writes a draft after every accepted step"
+        },
+        {
+          "name": "guardUnsaved",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Wizard",
+          "description": "A beforeunload guard while anything is unsubmitted"
+        },
+        {
+          "name": "delay",
+          "type": "number",
+          "defaultValue": "200",
+          "appliesTo": "Wizard, WizardDefaultsProvider",
+          "description": "How long a restore may take before its skeleton is drawn"
+        },
+        {
+          "name": "minDuration",
+          "type": "number",
+          "defaultValue": "400",
+          "appliesTo": "Wizard, WizardDefaultsProvider",
+          "description": "How long a drawn skeleton stays"
+        },
+        {
+          "name": "actions",
+          "type": "ReactNode",
+          "defaultValue": "<WizardActions />",
+          "appliesTo": "Wizard",
+          "description": "The row under the step"
+        },
+        {
+          "name": "handle",
+          "type": "Ref<WizardHandle>",
+          "defaultValue": "—",
+          "appliesTo": "Wizard",
+          "description": "next, previous, goTo, edit, skip, submit, saveDraft, clearDraft, reset, focus"
+        },
+        {
+          "name": "render",
+          "type": "(props: WizardRootProps) => ReactNode",
+          "defaultValue": "a div",
+          "appliesTo": "Wizard",
+          "description": "Substitutes the root element"
+        },
+        {
+          "name": "native props",
+          "type": "ComponentPropsWithRef<\"div\">",
+          "defaultValue": "—",
+          "appliesTo": "Wizard",
+          "description": "aria-*, data-*, className, style and handlers reach the root"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "WizardStep",
+          "description": "The step’s identity: the key of its answers, of a URL, of a draft"
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "WizardStep",
+          "description": "The step’s name in the heading and the progress"
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "WizardStep",
+          "description": "A sentence under the heading"
+        },
+        {
+          "name": "optional",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "WizardStep",
+          "description": "Marked Optional, and skippable"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "WizardStep",
+          "description": "Out of reach and stepped over"
+        },
+        {
+          "name": "validate",
+          "type": "(values, { value, signal }) => errors | void | Promise<…>",
+          "defaultValue": "—",
+          "appliesTo": "WizardStep",
+          "description": "Runs after the platform’s validation; errors by control name"
+        },
+        {
+          "name": "values",
+          "type": "StepValues",
+          "defaultValue": "the form’s FormData",
+          "appliesTo": "WizardStep",
+          "description": "Typed answers to accept instead"
+        },
+        {
+          "name": "start, end",
+          "type": "ReactNode",
+          "defaultValue": "the default actions",
+          "appliesTo": "WizardActions",
+          "description": "The two groups"
+        },
+        {
+          "name": "WizardNext, WizardPrevious, WizardCancel, WizardSaveDraft, WizardSkip",
+          "type": "ButtonProps",
+          "defaultValue": "—",
+          "appliesTo": "the actions",
+          "description": "Each a Button with its part; props, onClick and render compose"
+        },
+        {
+          "name": "step",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "WizardEdit",
+          "description": "The step to change and come back from"
+        },
+        {
+          "name": "WizardDefaultsProvider",
+          "type": "{ progress, linear, level, scroll, delay, minDuration }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "The decisions an application takes once; an instance that states any of them wins"
+        }
+      ],
+      "composition": [],
+      "events": [
+        {
+          "name": "onStepChange",
+          "payload": "(step: string, request: ChangeRequest<string>)",
+          "when": "Before the step moves: an accepted step or Enter (submit), a header or Back (pointer, keyboard), a clamp, a restore or the handle (programmatic). cancel() refuses it."
+        },
+        {
+          "name": "onValueChange",
+          "payload": "(value: WizardValue, request: ChangeRequest<WizardValue>)",
+          "when": "Before the accepted answers move: a step accepted (submit), reset (clear), a restored draft (programmatic)."
+        },
+        {
+          "name": "onProgressOpenChange",
+          "payload": "(open: boolean, request: ChangeRequest<boolean>)",
+          "when": "Before the compact list opens or closes: its bar (pointer, keyboard), choosing a step (select), Escape (escape)."
+        },
+        {
+          "name": "onSubmit",
+          "payload": "(values: WizardValue, request: { reason, source, value }) => void | WizardFailure | Promise<…>",
+          "when": "Once the last step is accepted and every step present is complete. values holds only the steps present; a returned failure is shown and may name a step and its errors."
+        },
+        {
+          "name": "onCancel",
+          "payload": "({ dirty, source })",
+          "when": "When cancel is pressed. The family closes nothing."
+        },
+        {
+          "name": "onSaveDraft",
+          "payload": "(snapshot: WizardSnapshot, { reason, source }) => void | Promise<void>",
+          "when": "Before persistence keeps a draft: the save-draft button (pointer), the handle (programmatic), autosave after a step (submit)."
+        }
+      ],
+      "accessibility": [
+        "No WAI-ARIA pattern names a wizard; the WAI Multi-page Forms tutorial is the source. The progress is the Stepper, an ordered list whose current header carries aria-current=\"step\" and whose headers say their status in a visually hidden run: “Account, Step 1 of 4, completed”.",
+        "Every step change moves focus to the step’s heading, which starts with its position, so a reader hears “Step 2 of 4, Company” where they land; focus is not moved on the first render, and the heading draws no ring because it is a reading position rather than a control.",
+        "Each step is a form of the Form family: Enter in a text field submits it by the platform’s implicit submission, the error summary takes focus on a refused step, and the Next button submits it from outside through the form attribute.",
+        "A failed submission shows an Alert above the step and moves focus to it; an accepted one moves focus to the complete part. The draft status is a polite status that announces once.",
+        "Back and a header behind the current step keep what was typed without validating it; a header ahead is reached only once the steps before it are complete, and a step out of reach stays in the tab order with aria-disabled."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--slotted-control-gap-md",
+    "--slotted-control-height-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-radius",
+    "--slotted-control-shadow",
+    "--slotted-control-shadow-focus-geometry",
+    "--slotted-control-surface",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-heading",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-2xl",
+    "--slotted-font-size-md",
+    "--slotted-font-size-sm",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-2xl",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-page-ground",
+    "--slotted-radius-full",
+    "--slotted-radius-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-8",
+    "--slotted-space-9",
+    "--slotted-surface",
+    "--slotted-surface-sunken",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-solid",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-wizard-border",
+    "--slotted-wizard-edit-color",
+    "--slotted-wizard-gap",
+    "--slotted-wizard-header-gap",
+    "--slotted-wizard-progress-inline-size",
+    "--slotted-wizard-rhythm",
+    "--slotted-wizard-segment-color",
+    "--slotted-wizard-segment-color-complete",
+    "--slotted-wizard-segment-color-invalid",
+    "--slotted-wizard-toggle-active-background",
+    "--slotted-wizard-toggle-hover-border-color"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Opening a business account",
+      "note": "Four steps with real fields. Next accepts a step only once its form is valid; the progress beside it marks what is done and closes what is not reached yet.",
+      "language": "tsx",
+      "source": "<Wizard onSubmit={(values) => api.openAccount(values)}>\n  <WizardStep label=\"Account\" name=\"account\">\n    <Field>\n      <FieldLabel>Work email</FieldLabel>\n      <TextField name=\"email\" required type=\"email\" />\n    </Field>\n  </WizardStep>\n  <WizardStep label=\"Company\" name=\"company\">\n    …\n  </WizardStep>\n  <WizardComplete>…</WizardComplete>\n</Wizard>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "progress",
+      "title": "Where the progress stands",
+      "note": "progress=\"start\" is a column beside the step, \"top\" a row above it, \"none\" leaves the position in the heading alone. Each is read at the width a page gives it.",
+      "language": "tsx",
+      "source": "<Wizard progress=\"top\">…</Wizard>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "validation",
+      "title": "A step refused, by the platform and by the server",
+      "note": "The email is required, and validate asks the server whether it is taken: Next waits in its loading state, the answer lands in the form’s summary and beside the field, and the step turns red in the progress.",
+      "language": "tsx",
+      "source": "<WizardStep\n  label=\"Account\"\n  name=\"account\"\n  validate={async (values, { signal }) => {\n    const taken = await api.emailTaken(values.email, { signal });\n    return taken ? { email: 'This email already has an account' } : undefined;\n  }}\n>\n  …\n</WizardStep>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "branching",
+      "title": "Steps that depend on an answer",
+      "note": "Choose Business and accept the step: a Company step appears after it. Choose Personal again and it leaves — its answers are kept for when it returns and never submitted.",
+      "language": "tsx",
+      "source": "const business = value.account?.type === 'business';\n\n<Wizard onValueChange={setValue} value={value}>\n  <WizardStep label=\"Account\" name=\"account\">\n    …\n  </WizardStep>\n  {business ? (\n    <WizardStep label=\"Company\" name=\"company\">\n      …\n    </WizardStep>\n  ) : null}\n  <WizardStep label=\"Billing\" name=\"billing\">\n    …\n  </WizardStep>\n</Wizard>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "optional",
+      "title": "An optional step",
+      "note": "The heading and the progress both say Optional; Skip accepts the step with no answers, and the review says Not provided.",
+      "language": "tsx",
+      "source": "<WizardStep label=\"Invite teammates\" name=\"invite\" optional>\n  …\n</WizardStep>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "review",
+      "title": "Review, change and come back",
+      "note": "Change goes to the step and Next reads Save and return: accepting it comes back to the review, unless the change opened a new question, which is asked first.",
+      "language": "tsx",
+      "source": "<WizardStep label=\"Review\" name=\"review\">\n  <DescriptionList>\n    <DescriptionListItem>\n      <DescriptionListTerm>Work email</DescriptionListTerm>\n      <DescriptionListDescription>{value.account?.email}</DescriptionListDescription>\n      <DescriptionListAction>\n        <WizardEdit step=\"account\" />\n      </DescriptionListAction>\n    </DescriptionListItem>\n  </DescriptionList>\n</WizardStep>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "submit",
+      "title": "Submitting, failing and finishing",
+      "note": "Open account waits in its loading state. The first try is refused by the server with the step and the field named: the wizard goes back to Account, shows the error above it and in the field. The second succeeds and the complete part takes focus.",
+      "language": "tsx",
+      "source": "<Wizard\n  onSubmit={async (values) => {\n    const answer = await api.openAccount(values);\n    if (answer.error === 'email-taken') {\n      return { step: 'account', errors: { email: 'Taken since you started' } };\n    }\n  }}\n>\n  …\n</Wizard>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "drafts",
+      "title": "Drafts, reload and a draft of another version",
+      "note": "Save draft writes to sessionStorage and the status says when; each accepted step saves as well. Reload the page and the wizard opens where the draft left it. A draft of another version is cleared, not restored.",
+      "language": "tsx",
+      "source": "const persistence = storagePersistence({\n  key: 'open-account',\n  storage: 'session',\n  version: 3,\n});\n\n<Wizard persistence={persistence} version={3} guardUnsaved>\n  …\n</Wizard>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "url",
+      "title": "The step in the address",
+      "note": "The router owns step. A link to a step past the work done is clamped to the first incomplete one, and the request carries programmatic so the router follows.",
+      "language": "tsx",
+      "source": "const { step } = useParams();\nconst navigate = useNavigate();\n\n<Wizard onStepChange={(next) => navigate(`/open/${next}`)} step={step}>\n  …\n</Wizard>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "narrow",
+      "title": "On a phone",
+      "note": "Below 600 pixels the progress folds behind a bar that says the position and draws one segment per step; the actions stack, the moving ones sharing the line.",
+      "language": "tsx",
+      "source": "<Wizard progressOpen={open} onProgressOpenChange={setOpen}>\n  …\n</Wizard>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "dialog",
+      "title": "Inside a layer",
+      "note": "scroll=\"self\" takes the height it is given: the step scrolls and the actions stay at the bottom on the layer’s ground, which is what a Dialog or a Drawer body needs.",
+      "language": "tsx",
+      "source": "<Dialog open={open} onOpenChange={setOpen}>\n  <DialogBody>\n    <Wizard progress=\"none\" scroll=\"self\">\n      …\n    </Wizard>\n  </DialogBody>\n</Dialog>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Seven steps, in German",
+      "note": "Long translated names wrap in the column and in the heading; the draft status and the long “Save and return” label wrap the row rather than squeezing the buttons.",
+      "language": "tsx",
+      "source": "<WizardStep label=\"Zahlungsinformationen und Rechnungsanschrift\" name=\"payment\">\n  …\n</WizardStep>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "forms",
+      "title": "Typed answers from your own state",
+      "note": "A step’s values replace its FormData: a date picker and a number field keep their own state, and the wizard accepts the typed object. useWizardStep gives a field the answer to start from.",
+      "language": "tsx",
+      "source": "function Shipping() {\n  const step = useWizardStep();\n  return <TextField defaultValue={step?.values.city as string} name=\"city\" />;\n}\n\n<WizardStep label=\"Plan\" name=\"plan\" values={{ seats, start }}>\n  …\n</WizardStep>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "labels",
+      "title": "Words for another product",
+      "note": "Every word is a message: the position, the four actions, the draft status and the failure. The language in force sets them once; a wizard lays its own over them.",
+      "language": "tsx",
+      "source": "<SlottedProvider locale=\"pt-BR\" catalogs={{ 'pt-BR': PT_BR }}>\n  <Wizard messages={{ next: 'Continuar', submit: 'Abrir conta' }}>…</Wizard>\n</SlottedProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a screen reader hears",
+      "note": "Each step change moves focus to the heading, which says “Step 2 of 4, Company”. The progress is an ordered list whose headers say their status; Enter in any text field submits the step.",
+      "language": "tsx",
+      "source": "<Wizard messages={{ progress: 'Account opening' }}>…</Wizard>;\n",
+      "verdict": "excerpt"
+    }
+  ]
+}