@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/docs/status-indicator.md

@@ -0,0 +1,197 @@
+<!-- index: ./index.md -->
+# status-indicator
+
+`data-ui="status-indicator"` · Colored mark and label for a status.
+
+## Import
+
+```ts
+import {
+  SlStatusIndicator,
+  provideStatusIndicatorDefaults,
+} from '@slotted/angular/status-indicator';
+```
+
+Selector: `[slStatusIndicator]` · exportAs: `slStatusIndicator`
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```html
+<span slStatusIndicator status="success">Healthy</span>
+
+<!-- With nothing projected, the status names itself. -->
+<span slStatusIndicator status="success"></span>
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | the consumer’s element | yes |
+| `mark` | span | yes |
+| `label` | span | yes |
+| `announcement` | span | no |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `status` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'unknown'` | neutral | SlStatusIndicator | The operational state. Each value owns a tone and a glyph; the vocabulary is closed, so a domain status maps onto one of the six and projects its own words |
+| `mark` | `'dot' \| 'icon'` | dot | SlStatusIndicator | dot is the compact chromatic mark; icon carries a distinct silhouette per status and is the alternative that does not depend on colour |
+| `size` | `'sm' \| 'md' \| 'lg'` | md | SlStatusIndicator | Reads the control type and glyph scales, so all three steps answer density |
+| `live` | `'off' \| 'polite' \| 'assertive'` | off | SlStatusIndicator | Whether a change is announced. polite writes role="status"; assertive writes role="alert" and interrupts. A role written on the host is read first and never replaced |
+| `pulse` | `boolean` | false | SlStatusIndicator | A wave leaving the dot, for a change happening now. Not drawn on an icon mark, and withdrawn under reduced motion and under forced colours, so it is never the only carrier |
+| `label` | `string` | — | SlStatusIndicator | What a reader hears when nothing is projected. Ignored when something is. Falls back to the status’s word in the catalog |
+| `messages` | `Partial<StatusIndicatorMessages>` | — | SlStatusIndicator | Words laid over the language in force, key by key: the word each status is heard as when nothing is projected (neutral, info, success, warning, danger, unknown) |
+| `ng-content` | `projected content` | — | SlStatusIndicator | The visible words, which are also the accessible name. Its fallback content is the clipped word, so the template itself decides which of the two a reader gets |
+| `host element` | `any` | — | SlStatusIndicator | The selector is a bare attribute, so the element stays the consumer’s: a td, an anchor, a list item. Its own attributes and events are untouched |
+| `exportAs` | `'slStatusIndicator'` | — | SlStatusIndicator | Reaches the instance from a template — name(), markValue(), sizeValue() and liveValue() are the resolved values after the provider |
+| `provideStatusIndicatorDefaults` | `{ mark, size, live }` | — | an injector | Sets the three once for an application or a route. An explicit input still wins |
+| `outputs` | `none` | — | SlStatusIndicator | The family emits nothing. status is the application’s fact about a system this component cannot see, so there is no value for it to request and no reason to carry |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `status` | `neutral`, `info`, `success`, `warning`, `danger`, `unknown` | `neutral` |
+| `mark` | `dot`, `icon` | `dot` |
+| `size` | `sm`, `md`, `lg` | `md` |
+| `live` | `off`, `polite`, `assertive` | `off` |
+
+## Rules
+
+- There is no status-indicator pattern in the WAI-ARIA Authoring Practices: the pattern index carries thirty entries and none of them is this family. The applicable guidance is the ARIA status role, WCAG 2.2 1.4.1 Use of Color and 1.4.11 Non-text Contrast, and each is answered below.
+- The name is always real text in the document — the projected content, or the status’s own word clipped by visually-hidden. role="img" with an aria-label, which is Fluent’s answer, is deliberately not used: text is what lets a live region announce its own contents, lets an aria-labelledby elsewhere point at it, and lets a page search find the word.
+- Colour is never the only carrier. Every indicator has words, and mark="icon" adds a distinct silhouette per status — six circles — so the six survive greyscale, the high-contrast scheme, and the operating system’s forced colours, where every author colour is replaced and the glyph is all that is left.
+- Every dot fill clears the 3:1 that WCAG 2.2 1.4.11 asks of a graphic against the surface in the light and dark schemes, except warning, whose yellow is 1.53:1 on white; that dot alone is rimmed in the warning border role, 2.94:1. The word beside the dot carries the status, so the dot is never the only carrier.
+- live="polite" writes role="status", which the platform gives an implicit aria-live="polite" and aria-atomic="true", so the mark and its word are announced as one thing rather than as two events. live="assertive" writes role="alert" and interrupts, which the APG reserves for a message needing immediate attention. A role written on the host element is read once through HostAttributeToken and kept.
+- The pulse is withdrawn under prefers-reduced-motion rather than shortened, because an endless animation has to stop; a wave frozen halfway through an expansion is a rendering fault rather than a state. Nothing is lost, since the tone, the glyph and the word were already carrying the status.
+- Nothing in the family is focusable on its own and no key is bound. The focus ring is painted for the case a consumer creates — the directive on their own anchor or button — so the ring is never missing where focus can land.
+
+## Tokens
+
+`--slotted-border-strong`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-duration-loop-slow`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-line-height-md`, `--slotted-radius-full`, `--slotted-space-1`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-status-indicator-font-family`, `--slotted-status-indicator-mark-border-color`, `--slotted-status-indicator-mark-border-width`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-text`, `--slotted-tone-success-solid`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-text`
+
+## Examples
+
+### The six operational states
+
+Each maps onto one of the library’s five tones and owns one glyph. neutral and unknown share a tone, so the mark is what tells “nothing is happening” from “nobody knows”.
+
+Excerpt — not a complete module
+
+```html
+<span slStatusIndicator status="neutral">Draft</span>
+<span slStatusIndicator status="info">Live</span>
+<span slStatusIndicator status="success">Healthy</span>
+<span slStatusIndicator status="warning">Degraded</span>
+<span slStatusIndicator status="danger">Failed</span>
+<span slStatusIndicator status="unknown">No data</span>
+```
+
+### The dot, and the mark that does not need colour
+
+A dot is compact and chromatic, so the words beside it carry the meaning. An icon carries a distinct silhouette per status, which is what WCAG 2.2 1.4.1 asks for where the words cannot be shown.
+
+Excerpt — not a complete module
+
+```html
+<span slStatusIndicator status="warning">Degraded</span>
+<span slStatusIndicator status="warning" mark="icon">Degraded</span>
+```
+
+### How large the indicator is
+
+Type and glyph read the control scales, the only ones the theme restates per density, so a status shrinks with the table row it sits in rather than pushing that row taller.
+
+Excerpt — not a complete module
+
+```html
+<span slStatusIndicator status="success" size="sm">Healthy</span>
+<span slStatusIndicator status="success" size="lg">Healthy</span>
+```
+
+### A change happening now
+
+A wave leaves the dot and fades, then rests before the next beat. An icon mark does not pulse. It is for a value moving while the reader watches — a deploy, a reindex, an error rate climbing — and never decoration on a status that settled a week ago.
+
+Excerpt — not a complete module
+
+```html
+<span slStatusIndicator status="info" pulse>Deploying to production</span>
+
+<!-- Not this: nothing is changing. -->
+<span slStatusIndicator status="success" pulse>Healthy since Tuesday</span>
+```
+
+### What a screen reader hears when the status changes
+
+off by default, because a status already on the page when it loaded is not news. polite waits for a pause; assertive interrupts, and belongs to something a reader has to act on now.
+
+Excerpt — not a complete module
+
+```html
+<span slStatusIndicator status="success">Healthy</span>
+
+<span slStatusIndicator status="info" live="polite">Deploying</span>
+
+<span slStatusIndicator status="danger" live="assertive">Region offline</span>
+```
+
+### Where a status actually lives
+
+A column of services, and a header where one status stands for a whole page. The words take the page’s own colour, so the status column reads as easily as the one beside it.
+
+Excerpt — not a complete module
+
+```html
+<tr>
+  <td>checkout-api</td>
+  <td slStatusIndicator status="success" size="sm">Healthy</td>
+</tr>
+```
+
+### Content the family did not choose
+
+A status that is a sentence, a container digest with nothing to break on, and a German label: the label wraps, the token breaks, and the mark stays on the first line of all three.
+
+Excerpt — not a complete module
+
+```html
+<span slStatusIndicator status="warning" mark="icon">
+  Waiting for approval from the security review board
+</span>
+
+<span slStatusIndicator status="danger">sha256:9f2b7c1de4a80b35c7f9a1e6d2408baf5c31</span>
+```
+
+### Composition and escape hatches
+
+The provider decides for a whole application, the host element stays the consumer’s, and a mark on the corner of an avatar is badge’s anchor rather than a second answer here.
+
+Excerpt — not a complete module
+
+```ts
+bootstrapApplication(App, {
+  providers: [provideStatusIndicatorDefaults({ mark: 'icon', size: 'sm' })],
+});
+```
+
+### What a reader hears
+
+A mark with nothing projected still carries its own word, clipped rather than absent — so it is announced, findable by a page search, and available to an aria-labelledby elsewhere.
+
+Excerpt — not a complete module
+
+```html
+<!-- “Error”, from the family’s own table. -->
+<span slStatusIndicator status="danger"></span>
+
+<!-- “Deploy failed”, from the application. -->
+<span slStatusIndicator status="danger" label="Deploy failed"></span>
+
+<!-- “Build 4821 failed”, from the words on the page. -->
+<span slStatusIndicator status="danger">Build 4821 failed</span>
+```

package/docs/stepper.json

@@ -0,0 +1,451 @@
+{
+  "family": "stepper",
+  "ui": "stepper",
+  "binding": "angular",
+  "catalog": {
+    "group": "Navigation",
+    "summary": "Shows progress through ordered steps."
+  },
+  "axes": {
+    "orientation": [
+      "horizontal",
+      "vertical"
+    ],
+    "labelPlacement": [
+      "end",
+      "bottom"
+    ],
+    "navigation": [
+      "button",
+      "link",
+      "none"
+    ]
+  },
+  "members": {
+    "stepper": {
+      "nativeElement": "div",
+      "defaults": {
+        "defaultStep": 0,
+        "orientation": "horizontal",
+        "labelPlacement": "end",
+        "navigation": "button",
+        "linear": false,
+        "autoComplete": false,
+        "disabled": false,
+        "loading": false,
+        "invalid": false
+      },
+      "capabilities": [
+        "current",
+        "orientation",
+        "placement",
+        "disabled",
+        "loading",
+        "invalid",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "loading",
+        "invalid",
+        "current",
+        "complete"
+      ],
+      "parts": [
+        "root",
+        "list",
+        "item",
+        "trigger",
+        "marker",
+        "label",
+        "description",
+        "status",
+        "separator",
+        "panel"
+      ]
+    }
+  },
+  "docs": {
+    "stepper": {
+      "imports": {
+        "source": "import {\n  SlStepper,\n  SlStepperList,\n  SlStepperNext,\n  SlStepperPanel,\n  SlStepperPrevious,\n  SlStepperStep,\n  provideStepperDefaults,\n} from '@slotted/angular/stepper';",
+        "selector": "[slStepper], ol[slStepperList], li[slStepperStep], [slStepperPanel], button[slStepperNext], button[slStepperPrevious]",
+        "exportAs": "slStepper, slStepperList, slStepperStep, slStepperPanel, slStepperNext, slStepperPrevious"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div",
+          "required": true,
+          "purpose": "The consumer’s own element, carrying data-ui=\"stepper\" and the three axes as data attributes. It owns the step, the count and the container the reflow measures, and it claims no landmark: a second navigation region on a page whose main navigation is elsewhere is noise."
+        },
+        {
+          "part": "list",
+          "element": "ol",
+          "required": true,
+          "purpose": "The ordered list, which is what carries the sequence and the set size without a single ARIA attribute. It holds the accessible name of the flow and handles the arrow keys, because only the list knows every header."
+        },
+        {
+          "part": "item",
+          "element": "li",
+          "required": true,
+          "purpose": "One step, and the element every state attribute lands on: data-current, data-complete, data-invalid, data-disabled and data-loading. The marker, the label and the connector are all styled from here."
+        },
+        {
+          "part": "trigger",
+          "element": "button, a or span",
+          "required": true,
+          "purpose": "The step header. navigation decides which of the three it is, and a span is the read-only progress indicator the field ships as a separate component. Carries aria-current=\"step\" and, in a linear flow it has not opened, aria-disabled."
+        },
+        {
+          "part": "marker",
+          "element": "span",
+          "required": true,
+          "purpose": "The circle holding the step’s number, replaced by a check when the step is complete and by a cross when it failed. Hidden from assistive technology, because the status part already says all of it in words."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "The step’s name, and the block the description renders inside — a marker sits against the whole text block rather than against its first line."
+        },
+        {
+          "part": "description",
+          "element": "span",
+          "required": false,
+          "purpose": "The second line under the step’s name. It renders inside label rather than beside it, so a two-line step still lines its marker up with both lines."
+        },
+        {
+          "part": "status",
+          "element": "span",
+          "required": true,
+          "purpose": "The visually hidden run that turns \"2\" into \"Cart, Step 2 of 4, current\". It is rendered with the visually-hidden family and prefixed with a comma, because nothing separates two elements’ text when the accessible name is computed."
+        },
+        {
+          "part": "separator",
+          "element": "span",
+          "required": false,
+          "purpose": "The connector between two markers, drawn after every step but the last and never announced. It fills for a step the reader has walked past, which is distance travelled rather than work completed."
+        },
+        {
+          "part": "panel",
+          "element": "div",
+          "required": false,
+          "purpose": "The content of the step it is written inside, shown only while that step is current. A group labelled by its own trigger rather than a tabpanel, and focusable so a consumer moving focus after a step change has somewhere to put it."
+        }
+      ],
+      "api": [
+        {
+          "name": "step",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "slStepper",
+          "description": "Present means controlled, for the life of the component. The family then only asks to move."
+        },
+        {
+          "name": "defaultStep",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "slStepper",
+          "description": "What an uncontrolled stepper starts from, read once, and where reset() returns to"
+        },
+        {
+          "name": "orientation",
+          "type": "'horizontal' | 'vertical'",
+          "defaultValue": "horizontal",
+          "appliesTo": "slStepper",
+          "description": "Which way the flow runs. A horizontal one still becomes a column below its own breakpoint."
+        },
+        {
+          "name": "labelPlacement",
+          "type": "'end' | 'bottom'",
+          "defaultValue": "end",
+          "appliesTo": "slStepper",
+          "description": "The name beside the marker, or under it"
+        },
+        {
+          "name": "navigation",
+          "type": "'button' | 'link' | 'none'",
+          "defaultValue": "button",
+          "appliesTo": "slStepper",
+          "description": "What a header is. none renders a span, which is a read-only progress indicator."
+        },
+        {
+          "name": "linear",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slStepper",
+          "description": "Requires every earlier step to be complete before a later one can be reached"
+        },
+        {
+          "name": "autoComplete",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slStepper",
+          "description": "Treats every step before the current one as complete. Off, because walking past a step is not finishing it."
+        },
+        {
+          "name": "messages",
+          "type": "PartialMessages<StepperMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slStepper",
+          "description": "Words laid over the language in force, key by key: the name of the sequence announced on the list (label), the position, and the five statuses a step announces"
+        },
+        {
+          "name": "complete",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "li[slStepperStep]",
+          "description": "Whether the consumer says the work on this step is done. Unstated defers to autoComplete."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "li[slStepperStep]",
+          "description": "Takes the header out of reach, in a linear flow or outside one. It keeps its tab stop."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "li[slStepperStep]",
+          "description": "The step is waiting on something: the header stops answering and the status says so"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "li[slStepperStep]",
+          "description": "The work on this step failed. It outranks complete in the marker and in the announcement."
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "li[slStepperStep]",
+          "description": "The second line under the step’s name"
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "li[slStepperStep]",
+          "description": "The destination, used only when navigation is link"
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideStepperDefaults",
+          "type": "labelPlacement | linear | navigation | orientation",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets those six once for the whole injector; an input on the stepper still wins"
+        },
+        {
+          "name": "exportAs=\"slStepper\"",
+          "type": "template reference",
+          "defaultValue": "—",
+          "appliesTo": "Template",
+          "description": "Reaches the instance: step(), count(), percent(), canGoNext(), goToStep(), next(), previous() and reset()"
+        },
+        {
+          "name": "slStepperNext, slStepperPrevious",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "The consumer’s button",
+          "description": "Moving one step is a handler on a button you styled, the shape matStepperNext already taught Angular consumers. The directive disables the button at each bound and never paints it."
+        },
+        {
+          "name": "ng-content",
+          "type": "projection",
+          "defaultValue": "—",
+          "appliesTo": "li[slStepperStep]",
+          "description": "Whatever a step should carry beyond its header — a panel, a form, a summary — projected after the trigger and before the connector"
+        }
+      ],
+      "events": [
+        {
+          "name": "stepChange",
+          "payload": "ChangeRequest<number>",
+          "when": "Before the step moves. The request carries the value it replaces, the reason — pointer, keyboard or programmatic — and the originating event. Calling request.cancel() commits nothing, which is how a consumer refuses a move and the reason this family ships no isStepValid and no onStepInvalid."
+        }
+      ],
+      "accessibility": [
+        "The family refuses role=\"tablist\". Angular Material gives a horizontal stepper that role and section 7 of docs/component-features.md forbids it in the Tabs entry itself: tabs are for peer views in one context, not for the steps of a process. What replaces it is ol and li for the sequence and the set size, a name on the list, and a status inside every header — the cost is that a screen reader will not announce \"tab 2 of 5\" or offer tab-specific navigation.",
+        "The current step carries aria-current=\"step\" on its trigger, which is the value the ARIA specification names for a link inside a step indicator. The item mirrors it as data-current, because the marker, the label and the connector are styled from the item and none of them is the trigger.",
+        "A step a linear flow has not opened carries aria-disabled rather than disabled, so it keeps its tab stop: a reader can find out the step exists and that it is not yet available, instead of finding nothing at all.",
+        "Every header carries a visually hidden status, so what a reader hears is \"Cart, Step 2 of 4, current\" rather than \"2\". The marker itself is aria-hidden, because it would otherwise announce the number twice, and the status is prefixed with a comma because nothing separates two elements’ text when a name is computed.",
+        "A panel is a group labelled by its own trigger and given tabindex=\"-1\", so a consumer who moves focus after a step change has somewhere to put it. It is not a tabpanel, for the same reason the root is not a tablist.",
+        "The arrows reach every header, exactly where Tab reaches — they were added on top of the tab sequence rather than replacing it with a roving tab stop, and they follow the reading direction, so ArrowRight moves to the previous step in a right-to-left document. Home and End go to the ends, and the block arrows answer only a vertical flow.",
+        "No status depends on colour alone: a complete step fills its disc and shows a check, a failed one fills and shows a cross, the current one is a ring and a pending one an outline. Section 7 of the feature guide asks for exactly that."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-control-border-color",
+    "--slotted-control-font-size-md",
+    "--slotted-control-gap-md",
+    "--slotted-control-height-md",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-sm",
+    "--slotted-radius-full",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-8",
+    "--slotted-stepper-color",
+    "--slotted-stepper-color-muted",
+    "--slotted-stepper-column-inset",
+    "--slotted-stepper-connector-color",
+    "--slotted-stepper-connector-color-complete",
+    "--slotted-stepper-connector-gap",
+    "--slotted-stepper-connector-thickness",
+    "--slotted-stepper-description-font-size",
+    "--slotted-stepper-description-gap",
+    "--slotted-stepper-font-family",
+    "--slotted-stepper-font-size",
+    "--slotted-stepper-gap",
+    "--slotted-stepper-glyph-size",
+    "--slotted-stepper-label-color-invalid",
+    "--slotted-stepper-label-gap",
+    "--slotted-stepper-label-weight",
+    "--slotted-stepper-line-height",
+    "--slotted-stepper-marker-border",
+    "--slotted-stepper-marker-border-current",
+    "--slotted-stepper-marker-color-complete",
+    "--slotted-stepper-marker-color-current",
+    "--slotted-stepper-marker-color-invalid",
+    "--slotted-stepper-marker-press-strength",
+    "--slotted-stepper-marker-size",
+    "--slotted-stepper-marker-surface",
+    "--slotted-stepper-marker-surface-complete",
+    "--slotted-stepper-marker-surface-invalid",
+    "--slotted-stepper-marker-weight",
+    "--slotted-stepper-panel-gap",
+    "--slotted-stepper-radius",
+    "--slotted-stepper-step-gap",
+    "--slotted-stepper-track-gap",
+    "--slotted-stepper-track-min",
+    "--slotted-stepper-underline-offset",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-on-solid",
+    "--slotted-tone-danger-solid",
+    "--slotted-tone-danger-text"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Every input on one flow, driven by the controls below the canvas. Turn linear on and watch which headers stop being reachable while staying in the tab sequence.",
+      "language": "html",
+      "source": "<div slStepper [defaultStep]=\"1\" label=\"Checkout\">\n  <ol slStepperList>\n    <li slStepperStep label=\"Cart\" [complete]=\"true\"></li>\n    <li slStepperStep label=\"Address\"></li>\n    <li slStepperStep label=\"Payment\"></li>\n    <li slStepperStep label=\"Review\"></li>\n  </ol>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "orientation",
+      "title": "Which way the flow runs",
+      "note": "Horizontal divides the width into equal columns so five markers line up however long their labels are; vertical runs the connector down the marker’s own centre line.",
+      "language": "html",
+      "source": "<div slStepper orientation=\"horizontal\">\n  <ol slStepperList>\n    …\n  </ol>\n</div>\n\n<div slStepper orientation=\"vertical\">\n  <ol slStepperList>\n    …\n  </ol>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "statuses",
+      "title": "The four statuses, and the fifth that is not one",
+      "note": "Each is a fill and an edge rather than a colour alone: an outline for pending, a ring for current, a filled disc with a check for complete, a filled disc with a cross for a failure.",
+      "language": "html",
+      "source": "<li slStepperStep label=\"Complete\" [complete]=\"true\"></li>\n<li slStepperStep label=\"Failed\" invalid></li>\n<li slStepperStep label=\"Current\"></li>\n<li slStepperStep label=\"Pending\"></li>\n<li slStepperStep label=\"Closed\" [disabled]=\"true\"></li>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "linear",
+      "title": "A flow that has to be taken in order",
+      "note": "linear reaches backwards freely and forwards only as far as the first step whose predecessors are complete. Everything further carries aria-disabled and stays reachable by Tab.",
+      "language": "html",
+      "source": "<div slStepper linear (stepChange)=\"onStepChange($event)\">\n  <ol slStepperList>\n    …\n  </ol>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "navigation",
+      "title": "What a header is",
+      "note": "A button moves the step, a link carries a destination of its own, and none is a read-only progress indicator — one family covering what the field ships as two components.",
+      "language": "html",
+      "source": "<div slStepper navigation=\"button\">…</div>\n<div slStepper navigation=\"link\">\n  <ol slStepperList>\n    <li slStepperStep label=\"Cart\" href=\"/cart\"></li>\n  </ol>\n</div>\n<div slStepper navigation=\"none\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "placement",
+      "title": "Where the label sits",
+      "note": "end puts the name beside the marker and gives the connector whatever the label leaves; bottom centres the marker over its own label, which is what a row of five names needs.",
+      "language": "html",
+      "source": "<div slStepper labelPlacement=\"end\">…</div>\n<div slStepper labelPlacement=\"bottom\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "panels",
+      "title": "The content of the step you are on",
+      "note": "A panel is a group labelled by its own header, shown only while that step is current, and the two buttons that move it are the consumer’s own with a directive on them.",
+      "language": "html",
+      "source": "<li slStepperStep label=\"Recipient\">\n  <div slStepperPanel>The account number is being checked.</div>\n</li>\n\n<button slStepperPrevious type=\"button\">Back</button>\n<button slStepperNext type=\"button\">Continue</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "compact",
+      "title": "A row that runs out of width",
+      "note": "Below thirty rems of its own inline size a horizontal flow becomes a column, because five labels at 320 pixels are five columns two characters wide. Drag the stage edge to cross it.",
+      "language": "css",
+      "source": "/* The family declares its own container, so a stepper in a narrow panel\n   reflows while the same stepper on a full page does not. */\n[data-ui='stepper'] {\n  container-name: slotted-stepper;\n  container-type: inline-size;\n}\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Names the flow did not choose",
+      "note": "Six steps, a forty-character German compound and a second line under each name. The label wraps inside its own column and the markers stay on one line.",
+      "language": "html",
+      "source": "<li\n  slStepperStep\n  label=\"Zahlungsabwicklungseinstellungen\"\n  description=\"Zuletzt geprüft am 14. August\"\n></li>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Composition",
+      "note": "provideStepperDefaults decides for a whole injector, exportAs reaches the instance from a template, and the two advance directives sit on buttons the consumer styled themselves.",
+      "language": "ts",
+      "source": "bootstrapApplication(App, {\n  providers: [provideStepperDefaults({ labelPlacement: 'bottom', linear: true })],\n});\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard and announcement",
+      "note": "Tab reaches every header, the arrows reach exactly the same ones, Home and End go to the ends, and Enter or Space moves to the focused step when the flow allows it.",
+      "language": "html",
+      "source": "<!-- \"Cart, Step 1 of 4, completed\" — the marker is hidden and the\n     status part says the position and the state in words. -->\n<div slStepper [messages]=\"{ label: 'Checkout' }\" [defaultStep]=\"1\">\n  <ol slStepperList>\n    …\n  </ol>\n</div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}