@c2n/steps 0.0.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,69 @@
+# @c2n/steps
+
+A vertical list of steps: the trace of a task as it runs, or a wizard's progress.
+
+A step with sub-steps is a **group**, and a group is a disclosure — its own row is the summary, its sub-steps are
+the detail. Every step is a row and every row is visible: a group starts expanded and nothing folds one away on its
+own. A sub-step is indented until its marker sits under its parent's label, and that is the whole tree — no chevron
+column, no rules, unless you ask for them. `collapsed` in the markup starts a stage folded, and the run only ever
+brings a folded stage back into view when it starts running or something in it fails.
+
+A parent that authors no `status` takes the most urgent one under it, so a stage reports that it is running, or
+that something below it failed, on its own.
+
+```bash
+npm install @c2n/steps
+```
+
+## Markup
+
+```html
+<script type="module">
+  import '@c2n/steps'
+</script>
+
+<c2-steps aria-label="Pipeline">
+  <c2-step label="build" trailing="24 s">
+    <c2-step status="success" label="install dependencies" trailing="19 s"></c2-step>
+    <c2-step status="success" label="compile" trailing="5 s"></c2-step>
+  </c2-step>
+  <c2-step label="test">
+    <c2-step status="success" label="unit" trailing="8 s"></c2-step>
+    <c2-step status="running" label="e2e"></c2-step>
+  </c2-step>
+</c2-steps>
+```
+
+## Data
+
+```js
+const trace = document.querySelector('c2-steps')
+
+trace.steps = [
+  { id: 'build', label: 'build', children: [{ id: 'install', label: 'install dependencies' }] },
+  { id: 'test', label: 'test', children: [{ id: 'e2e', label: 'e2e' }] },
+]
+
+// One step at a time, without rebuilding the array.
+trace.updateStep('install', { status: 'running' })
+trace.updateStep('install', { status: 'success', trailing: '19 s' })
+```
+
+`collapseAll()` folds every group away and `expandAll()` brings them back; a `step-toggle` event bubbles to the
+list whenever a group is folded or unfolded.
+
+A step that arrives while the list is already on screen grows into place, and a marker gives one beat as its
+status settles — both only for things that actually change, so a trace drawn complete sits still.
+`--c2-step--enter-duration: 0s` turns the arrival off and `prefers-reduced-motion` turns both off. Give every node
+a stable `id`, or a step is identified by its position and inserting one recreates every row after it.
+
+Everything the markup fills with a slot, the data-driven mode fills with a renderer handed the same node: `marker`
+→ `renderMarker`, `label` → `renderLabel`, `detail` → `renderDetail`, `trailing` → `renderTrailing`, `toggle` →
+`renderToggle`, plus `renderItem` for a row's text all at once. The marker and the disclosure are their own
+columns, so they keep their renderers alongside `renderItem`.
+
+Statuses are `pending`, `current`, `running`, `success`, `error`, `warning` and `skipped`. `marker` is `icon`
+(default), `number` — which draws a dotted path, so `3.1` is the first sub-step of the third step — or `none`.
+`current` is the wizard shortcut: the index of the active top-level step.
+
+Everything visual is a CSS custom property; the full list is in `custom-elements.json` and on the docs site.

package/dist/step-CsDVe4w8.js

@@ -0,0 +1,220 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/step-icons.ts
+/** What a screen reader reads for each status, since the marker is a glyph. */
+var STATUS_LABELS = {
+	pending: "Pending",
+	current: "Current",
+	running: "Running",
+	success: "Completed",
+	error: "Failed",
+	warning: "Completed with warnings",
+	skipped: "Skipped"
+};
+/** The states that draw a glyph. The rest are drawn by the marker's ring alone. */
+var STATUS_ICONS = {
+	success: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 6 9 17l-5-5"></path>
+</svg>`,
+	error: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M18 6 6 18M6 6l12 12"></path>
+</svg>`,
+	warning: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"></path>
+  <path d="M12 9v4M12 17h.01"></path>
+</svg>`,
+	skipped: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
+  <path d="M5 12h14"></path>
+</svg>`
+};
+/**
+* The status that stands for a group: the most urgent thing inside it. `skipped` only wins when there is nothing
+* else — a group where one step ran and the rest were skipped still reports that it ran. An empty group is
+* `pending`, because nothing in it has happened.
+*/
+var ROLLUP_ORDER = [
+	"error",
+	"running",
+	"current",
+	"warning",
+	"pending"
+];
+function rollupStatus(statuses) {
+	if (!statuses.length) return "pending";
+	for (const status of ROLLUP_ORDER) if (statuses.includes(status)) return status;
+	return statuses.every((status) => status === "skipped") ? "skipped" : "success";
+}
+//#endregion
+//#region src/step.scss?inline
+var step_default = "@charset \"UTF-8\";\n/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n/**\n * A grid of one row rather than a block, so a step arriving in a running trace can grow from `0fr` to `1fr` —\n * the one way to animate to a height nobody knows in advance.\n */\n:host {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: 1fr;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-step__frame {\n  min-width: 0;\n  min-height: 0;\n}\n\n:host([entering]) {\n  animation: c2-step-enter var(--c2-step--enter-duration,260ms) cubic-bezier(0.2, 0, 0, 1);\n}\n\n:host([entering]) .c2-step__frame {\n  overflow: hidden;\n}\n\n@keyframes c2-step-enter {\n  from {\n    grid-template-rows: 0fr;\n    opacity: 0;\n    translate: 0 var(--c2-step--enter-translate,-4px);\n  }\n  to {\n    grid-template-rows: 1fr;\n    opacity: 1;\n    translate: none;\n  }\n}\n.c2-step__details {\n  display: block;\n}\n\n.c2-step__details:not([open]) .c2-step__children {\n  display: none;\n}\n\n.c2-step__row {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--c2-step__row--gap,10px);\n  box-sizing: border-box;\n  padding: var(--c2-step__row--padding-block,7px) var(--c2-step__row--padding-inline,12px);\n  padding-inline-start: calc(var(--c2-step__row--indent,calc(var(--c2-step__marker--size, 16px) + var(--c2-step__row--gap, 10px))) * var(--level, 0) + var(--c2-step__row--padding-inline,12px));\n  position: relative;\n  background: var(--c2-step__row--background);\n  border-radius: var(--c2-step__row--border-radius);\n  border-bottom: var(--c2-step__row--border-bottom,1px solid #e4e4e7);\n  transition: background-color var(--c2-step--transition-duration,150ms) cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-step__row:hover {\n  background: var(--c2-step__row__hover--background,var(--c2-step__row--background));\n}\n\n/**\n * One vertical rule per ancestor level, each sitting where that ancestor's own chevron sits, so the nesting reads\n * as a tree rather than as rows that happen to start further in.\n *\n * The box starts at the first ancestor's chevron centre and is `level * indent` wide, so the repeating tile lands\n * a rule exactly on every ancestor and none anywhere else — offsetting the gradient inside a box that starts at 0\n * repeats in both directions and draws a spurious rule before the first level. `--c2-step__guide--width: 0px`\n * turns them off: a zero-wide colour band paints nothing.\n */\n.c2-step__row::before {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(var(--c2-step__row--padding-inline,12px) + var(--c2-step__toggle--size,14px) / 2);\n  inline-size: calc(var(--c2-step__row--indent,calc(var(--c2-step__marker--size, 16px) + var(--c2-step__row--gap, 10px))) * var(--level, 0));\n  pointer-events: none;\n  background-image: repeating-linear-gradient(to right, var(--c2-step__guide--color,#e4e4e7) 0 var(--c2-step__guide--width,0px), transparent var(--c2-step__guide--width,0px) var(--c2-step__row--indent,calc(var(--c2-step__marker--size, 16px) + var(--c2-step__row--gap, 10px))));\n}\n\n.c2-step__row:dir(rtl)::before {\n  background-image: repeating-linear-gradient(to left, var(--c2-step__guide--color,#e4e4e7) 0 var(--c2-step__guide--width,0px), transparent var(--c2-step__guide--width,0px) var(--c2-step__row--indent,calc(var(--c2-step__marker--size, 16px) + var(--c2-step__row--gap, 10px))));\n}\n\n:host(:not([grouped])) .c2-step__row::before {\n  display: none;\n}\n\nsummary.c2-step__row {\n  cursor: pointer;\n  list-style: none;\n  user-select: none;\n}\nsummary.c2-step__row::-webkit-details-marker {\n  display: none;\n}\nsummary.c2-step__row:focus-visible {\n  outline: var(--c2-step__row--outline,2px solid rgb(2, 101, 220));\n  outline-offset: -2px;\n}\n\n:host([last]) .c2-step__row:not(:has(~ .c2-step__children:not([hidden]))) {\n  border-bottom: none;\n}\n\n:host([last][has-children]:not([collapsed])) > .c2-step__frame > .c2-step__details > summary.c2-step__row {\n  border-bottom: var(--c2-step__row--border-bottom,1px solid #e4e4e7);\n}\n\n/**\n * The disclosure affordance, and there is none by default: a trace is a list of rows, and a column of chevrons\n * down the side of it is noise. The row is a `<summary>`, so it is clickable and focusable with nothing drawn.\n * Fill the `toggle` slot to put a marker of your own there, and it takes a column on every row so they line up.\n */\n.c2-step__toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--c2-step__toggle--size,14px);\n  height: calc(var(--c2-step__label--font-size,13px) * 1.5);\n  margin-inline-end: calc(var(--c2-step__toggle--gap,4px) - var(--c2-step__row--gap,10px));\n  color: var(--c2-step__toggle--color,#a1a1aa);\n  transition: transform var(--c2-step--transition-duration,150ms) cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-step__toggle[hidden] {\n  display: none;\n}\n.c2-step__toggle svg {\n  width: 100%;\n  height: 100%;\n}\n.c2-step__toggle ::slotted(*) {\n  width: 100%;\n  height: 100%;\n}\n\n:host([has-children]:not([collapsed])) .c2-step__toggle {\n  transform: rotate(90deg);\n}\n\n.c2-step__gutter {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex: none;\n  align-self: stretch;\n  gap: var(--c2-step__rail--gap,4px);\n}\n\n.c2-step__marker {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  box-sizing: border-box;\n  width: var(--c2-step__marker--size,16px);\n  height: var(--c2-step__marker--size,16px);\n  margin-top: calc((var(--c2-step__label--font-size,13px) * 1.5 - var(--c2-step__marker--size,16px)) / 2);\n  font-size: var(--c2-step__marker--font-size,10px);\n  font-weight: var(--c2-step__marker--font-weight,600);\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n  color: var(--c2-step__marker--color,#71717a);\n  background: var(--c2-step__marker--background,transparent);\n  border: 1px solid transparent;\n  border-radius: var(--c2-step__marker--border-radius,999px);\n  transition: color var(--c2-step--transition-duration,150ms) cubic-bezier(0.2, 0, 0, 1), border-color var(--c2-step--transition-duration,150ms) cubic-bezier(0.2, 0, 0, 1), background-color var(--c2-step--transition-duration,150ms) cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-step__marker svg {\n  width: 68%;\n  height: 68%;\n}\n.c2-step__marker ::slotted(*) {\n  width: 100%;\n  height: 100%;\n}\n\n.c2-step__rail {\n  flex: 1 1 auto;\n  width: var(--c2-step__rail--width,0px);\n  min-height: 0;\n  background: var(--c2-step__rail--color,#e4e4e7);\n  border-radius: var(--c2-step__rail--width,0px);\n}\n\n:host([last]:not([has-children])) .c2-step__rail,\n:host([last][has-children][collapsed]) .c2-step__rail {\n  visibility: hidden;\n}\n\n:host([marker=none]) .c2-step__gutter {\n  display: none;\n}\n\n.c2-step__text {\n  display: flex;\n  flex-direction: var(--c2-step__text--flex-direction,row);\n  align-items: var(--c2-step__text--align-items,baseline);\n  flex: 1 1 auto;\n  min-width: 0;\n  gap: var(--c2-step__detail--row-gap,2px) var(--c2-step__detail--gap,8px);\n}\n\n.c2-step__label {\n  transition: color var(--c2-step--transition-duration,150ms) cubic-bezier(0.2, 0, 0, 1);\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--c2-step__label--color,#18181b);\n  font-family: var(--c2-step__label--font-family,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n  font-size: var(--c2-step__label--font-size,13px);\n  font-weight: var(--c2-step__label--font-weight,500);\n  line-height: 1.5;\n}\n\n.c2-step__detail {\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--c2-step__detail--color,#71717a);\n  font-family: var(--c2-step__label--font-family,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n  font-size: var(--c2-step__detail--font-size,var(--c2-step__label--font-size,13px));\n  font-weight: var(--c2-step__detail--font-weight,400);\n  line-height: 1.5;\n}\n.c2-step__detail[hidden] {\n  display: none;\n}\n\n.c2-step__trailing {\n  flex: none;\n  white-space: nowrap;\n  color: var(--c2-step__trailing--color,#71717a);\n  font-family: var(--c2-step__label--font-family,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n  font-size: var(--c2-step__trailing--font-size,var(--c2-step__label--font-size,13px));\n  font-weight: var(--c2-step__trailing--font-weight,400);\n  font-variant-numeric: tabular-nums;\n  line-height: 1.5;\n}\n.c2-step__trailing[hidden] {\n  display: none;\n}\n\n.c2-step__status-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.c2-step__children[hidden] {\n  display: none;\n}\n\n.c2-step__row.is-pending .c2-step__marker {\n  border: var(--c2-step__marker--border,1px solid #bcbcc6);\n}\n\n.c2-step__row.is-success .c2-step__marker {\n  color: var(--c2-step__success--color,#16a34a);\n}\n\n.c2-step__row.is-error .c2-step__marker {\n  color: var(--c2-step__error--color,#dc2626);\n}\n\n.c2-step__row.is-warning .c2-step__marker {\n  color: var(--c2-step__warning--color,#d97706);\n}\n\n.c2-step__row.is-running .c2-step__marker {\n  color: var(--c2-step__running--color,rgb(2, 101, 220));\n}\n\n.c2-step__row.is-current .c2-step__marker {\n  color: var(--c2-step__current--color,rgb(2, 101, 220));\n}\n\n.c2-step__row.is-current .c2-step__marker,\n.c2-step__row.is-running .c2-step__marker {\n  border: var(--c2-step__marker--border,1px solid #bcbcc6);\n  border-color: currentColor;\n  box-shadow: inset 0 0 0 calc(var(--c2-step__marker--size,16px) / 5) currentColor;\n}\n\n/**\n * A number has to sit inside something, whatever the status — but a dotted path is not a glyph, and `2.2.1` in a\n * round box the size of a checkmark spills out over its own border. In number mode the marker keeps its height and\n * grows sideways instead: a single digit is still the circle, a path is a pill.\n */\n:host([marker=number]) .c2-step__marker {\n  width: auto;\n  min-width: var(--c2-step__marker--size,16px);\n  padding-inline: var(--c2-step__marker--padding-inline,3px);\n  white-space: nowrap;\n  border: var(--c2-step__marker--border,1px solid #bcbcc6);\n}\n\n:host([marker=number]) .c2-step__row.is-success .c2-step__marker,\n:host([marker=number]) .c2-step__row.is-error .c2-step__marker,\n:host([marker=number]) .c2-step__row.is-warning .c2-step__marker,\n:host([marker=number]) .c2-step__row.is-current .c2-step__marker,\n:host([marker=number]) .c2-step__row.is-running .c2-step__marker {\n  border-color: currentColor;\n}\n\n:host([marker=number]) .c2-step__row.is-current .c2-step__marker,\n:host([marker=number]) .c2-step__row.is-running .c2-step__marker {\n  box-shadow: none;\n}\n\n.c2-step__row.is-skipped .c2-step__marker {\n  color: var(--c2-step__skipped--color,#71717a);\n}\n.c2-step__row.is-skipped .c2-step__label {\n  color: var(--c2-step__skipped--color,#71717a);\n}\n\n/**\n * A status that settles gives the marker one beat. `settling` is written by the step when its status changes after\n * the first pass and taken off again when the beat ends, so a trace drawn complete sits still and only a step that\n * actually finishes in front of you moves. A step that is still growing into place has enough going on already.\n */\n:host([settling]:not([entering])) .c2-step__row.is-success .c2-step__marker,\n:host([settling]:not([entering])) .c2-step__row.is-error .c2-step__marker,\n:host([settling]:not([entering])) .c2-step__row.is-warning .c2-step__marker,\n:host([settling]:not([entering])) .c2-step__row.is-skipped .c2-step__marker {\n  animation: c2-step-settle var(--c2-step--transition-duration,150ms) cubic-bezier(0.2, 0, 0, 1);\n}\n\n@keyframes c2-step-settle {\n  from {\n    scale: 0.55;\n  }\n  60% {\n    scale: 1.12;\n  }\n  to {\n    scale: 1;\n  }\n}\n.c2-step__row.is-running .c2-step__marker {\n  border-style: solid;\n  border-top-color: transparent;\n  box-shadow: none;\n  animation: c2-step-spin 900ms linear infinite;\n}\n\n:host([marker=number]) .c2-step__row.is-running .c2-step__marker {\n  animation: none;\n  border-top-color: currentColor;\n}\n\n@keyframes c2-step-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .c2-step__row.is-running .c2-step__marker {\n    animation: none;\n    border-top-color: currentColor;\n  }\n  :host([entering]),\n  :host([settling]) .c2-step__row .c2-step__marker {\n    animation: none;\n  }\n  .c2-step__row,\n  .c2-step__marker,\n  .c2-step__label,\n  .c2-step__toggle {\n    transition: none;\n  }\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/step.ts
+/** The statuses that bring a folded-away stage back into view. Nothing ever folds one away on its own. */
+var STATUS_REOPENS = /* @__PURE__ */ new Set([
+	"running",
+	"current",
+	"error",
+	"warning"
+]);
+var Step = class Step extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.status = "pending";
+		this.label = "";
+		this.detail = "";
+		this.trailing = "";
+		this.collapsed = false;
+		this.level = 0;
+		this.position = 1;
+		this.path = "1";
+		this.last = false;
+		this.marker = "icon";
+		this.grouped = false;
+		this.hasChildren = false;
+		this.hasDetailSlot = false;
+		this.hasTrailingSlot = false;
+		this.hasToggleSlot = false;
+		this.handleAnimationEnd = (event) => {
+			const name = event.animationName;
+			if (name.includes("step-enter") && event.target === this) this.removeAttribute("entering");
+			if (name.includes("step-settle")) this.removeAttribute("settling");
+		};
+	}
+	static {
+		this.styles = unsafeCSS(step_default);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "listitem");
+		this.addEventListener("animationend", this.handleAnimationEnd);
+		this.renderRoot.addEventListener("animationend", this.handleAnimationEnd);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("animationend", this.handleAnimationEnd);
+		this.renderRoot.removeEventListener("animationend", this.handleAnimationEnd);
+		super.disconnectedCallback();
+	}
+	firstUpdated() {
+		this.syncHasChildren();
+	}
+	willUpdate(changed) {
+		if (!changed.has("status") || changed.get("status") === void 0) return;
+		if (STATUS_REOPENS.has(this.status)) this.collapsed = false;
+	}
+	updated(changed) {
+		if (changed.has("status") && changed.get("status") !== void 0) this.toggleAttribute("settling", true);
+		if (changed.has("level")) this.style.setProperty("--level", String(this.level));
+		if (changed.has("last")) this.toggleAttribute("last", this.last);
+		if (changed.has("marker")) this.setAttribute("marker", this.marker);
+		if (changed.has("grouped")) this.toggleAttribute("grouped", this.grouped);
+		if (changed.has("hasChildren")) this.toggleAttribute("has-children", this.hasChildren);
+		if (changed.has("collapsed") && changed.get("collapsed") !== void 0 && this.hasChildren) this.dispatchEvent(new CustomEvent("step-toggle", {
+			detail: {
+				collapsed: this.collapsed,
+				path: this.path
+			},
+			bubbles: true
+		}));
+	}
+	/** These three collapse when empty, so their rows have to know whether the slot was filled. */
+	handleSlotChange(name, event) {
+		const filled = event.target.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+		if (name === "detail") this.hasDetailSlot = filled;
+		else if (name === "trailing") this.hasTrailingSlot = filled;
+		else this.hasToggleSlot = filled;
+	}
+	/** Astro wraps an island in `<astro-island>`, so a sub-step is rarely a literal child — look right through. */
+	syncHasChildren() {
+		this.hasChildren = !!this.querySelector("c2-step");
+	}
+	handleToggle(event) {
+		this.collapsed = !event.target.open;
+	}
+	renderMarker() {
+		if (this.marker === "none") return nothing;
+		const glyph = this.marker === "number" ? html`${this.path}` : STATUS_ICONS[this.status] ?? nothing;
+		return html`<span class="c2-step__marker" part="marker" aria-hidden="true"><slot name="marker">${glyph}</slot></span>`;
+	}
+	/** The row's content, identical whether it is a plain row or a group's summary. */
+	renderRowContent() {
+		const detail = this.detail || this.hasDetailSlot;
+		const trailing = this.trailing || this.hasTrailingSlot;
+		return html`
+      <span class="c2-step__toggle" part="toggle" aria-hidden="true" ?hidden=${!this.hasToggleSlot}>
+        <slot name="toggle" @slotchange=${(event) => this.handleSlotChange("toggle", event)}></slot>
+      </span>
+      <span class="c2-step__gutter">
+        ${this.renderMarker()}
+        <span class="c2-step__rail" part="rail" aria-hidden="true"></span>
+      </span>
+      <span class="c2-step__text">
+        <span class="c2-step__label" part="label">
+          <slot name="label">${this.label}</slot>
+        </span>
+        <span class="c2-step__detail" part="detail" ?hidden=${!detail}>
+          <slot name="detail" @slotchange=${(event) => this.handleSlotChange("detail", event)}>${this.detail}</slot>
+        </span>
+      </span>
+      <span class="c2-step__trailing" part="trailing" ?hidden=${!trailing}>
+        <slot name="trailing" @slotchange=${(event) => this.handleSlotChange("trailing", event)}>${this.trailing}</slot>
+      </span>
+      <!-- The marker is a glyph, so the state is spelled out for assistive technology. -->
+      <span class="c2-step__status-text">${STATUS_LABELS[this.status]}</span>
+    `;
+	}
+	renderChildren() {
+		return html`
+      <div class="c2-step__children" part="children" role="list" ?hidden=${!this.hasChildren}>
+        <slot @slotchange=${this.syncHasChildren}></slot>
+      </div>
+    `;
+	}
+	render() {
+		const rowClass = classMap({
+			"c2-step__row": true,
+			[`is-${this.status}`]: true
+		});
+		return html`
+      <div class="c2-step__frame" part="frame">
+        ${this.hasChildren ? html`
+                <details class="c2-step__details" ?open=${!this.collapsed} @toggle=${this.handleToggle}>
+                  <summary class=${rowClass} part="row">${this.renderRowContent()}</summary>
+                  ${this.renderChildren()}
+                </details>
+              ` : html`<div class=${rowClass} part="row">${this.renderRowContent()}</div>
+                ${this.renderChildren()}`}
+      </div>
+    `;
+	}
+};
+__decorate([property({ reflect: true })], Step.prototype, "status", void 0);
+__decorate([property()], Step.prototype, "label", void 0);
+__decorate([property()], Step.prototype, "detail", void 0);
+__decorate([property()], Step.prototype, "trailing", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Step.prototype, "collapsed", void 0);
+__decorate([property({ attribute: false })], Step.prototype, "level", void 0);
+__decorate([property({ attribute: false })], Step.prototype, "position", void 0);
+__decorate([property({ attribute: false })], Step.prototype, "path", void 0);
+__decorate([property({ attribute: false })], Step.prototype, "last", void 0);
+__decorate([property({ attribute: false })], Step.prototype, "marker", void 0);
+__decorate([property({ attribute: false })], Step.prototype, "grouped", void 0);
+__decorate([property({ attribute: false })], Step.prototype, "hasChildren", void 0);
+__decorate([state()], Step.prototype, "hasDetailSlot", void 0);
+__decorate([state()], Step.prototype, "hasTrailingSlot", void 0);
+__decorate([state()], Step.prototype, "hasToggleSlot", void 0);
+Step = __decorate([customElement("c2-step")], Step);
+//#endregion
+export { __decorate as n, rollupStatus as r, Step as t };

package/dist/step.js

@@ -0,0 +1,2 @@
+import { t as Step } from "./step-CsDVe4w8.js";
+export { Step };

package/dist/steps.js

@@ -0,0 +1,201 @@
+import { n as __decorate, r as rollupStatus } from "./step-CsDVe4w8.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { jsonPropertyConverter } from "@c2n/core/lit-helper.js";
+//#region src/steps.scss?inline
+var steps_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--c2-steps--gap,0px);\n  box-sizing: border-box;\n  max-height: var(--c2-steps--max-height,none);\n  overflow-y: var(--c2-steps--overflow-y,visible);\n  padding: var(--c2-steps--padding-block,0px) var(--c2-steps--padding-inline,0px);\n  background: var(--c2-steps--background);\n  border: var(--c2-steps--border);\n  border-radius: var(--c2-steps--border-radius);\n}\n\n:host([hidden]) {\n  display: none;\n}";
+//#endregion
+//#region src/steps.ts
+var _Steps;
+var Steps = class Steps extends LitElement {
+	static {
+		_Steps = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.marker = "icon";
+		this.current = -1;
+		this.steps = void 0;
+		this.ariaLabel = null;
+		this.written = /* @__PURE__ */ new WeakMap();
+		this.known = /* @__PURE__ */ new WeakSet();
+		this.hasSynced = false;
+	}
+	static {
+		this.styles = unsafeCSS(steps_default);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "list");
+		this.observer ??= new MutationObserver(() => this.syncSteps());
+		this.observer.observe(this, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: ["status"]
+		});
+	}
+	disconnectedCallback() {
+		this.observer?.disconnect();
+		super.disconnectedCallback();
+	}
+	updated() {
+		this.syncSteps();
+	}
+	/**
+	* Changes one step of `steps` in place and redraws, without rebuilding the array — what a task runner wants when
+	* it ticks a step over hundreds of times. Returns `false` when no step carries that `id`.
+	*/
+	updateStep(id, patch) {
+		const find = (nodes) => {
+			for (const node of nodes) {
+				if (node.id === id) return node;
+				const hit = node.children?.length ? find(node.children) : void 0;
+				if (hit) return hit;
+			}
+		};
+		const node = this.steps?.length ? find(this.steps) : void 0;
+		if (!node) return false;
+		Object.assign(node, patch);
+		this.requestUpdate();
+		return true;
+	}
+	/** Brings every group back into view. */
+	expandAll() {
+		this.setCollapsedOfAll(false);
+	}
+	/** Folds every group away, leaving the top-level stages. */
+	collapseAll() {
+		this.setCollapsedOfAll(true);
+	}
+	setCollapsedOfAll(collapsed) {
+		for (const step of this.allSteps()) if (step.querySelector("c2-step")) step.collapsed = collapsed;
+	}
+	/** Every step in the list, wherever it came from. */
+	allSteps() {
+		return [...(this.steps?.length ? this.renderRoot : this).querySelectorAll("c2-step")];
+	}
+	/**
+	* The nearest `c2-step` descendants of `root`, looking through anything that is not one.
+	*
+	* A step is rarely a literal child: Astro wraps every island in an `<astro-island>` (which is
+	* `display: contents`, so it changes nothing but the tree), and a consumer may wrap rows in a `<div>`. Matching
+	* only direct children silently found nothing there, and every step kept its defaults.
+	*/
+	static collectSteps(root) {
+		const found = [];
+		for (const child of root.children) if (child.tagName === "C2-STEP") found.push(child);
+		else found.push(..._Steps.collectSteps(child));
+		return found;
+	}
+	/** Top-level steps, whether they came from the slot or from `steps`. */
+	get rootSteps() {
+		const slot = this.renderRoot.querySelector("slot:not([name])");
+		if (!slot) return _Steps.collectSteps(this.renderRoot);
+		return slot.assignedElements().flatMap((element) => element.tagName === "C2-STEP" ? [element] : _Steps.collectSteps(element));
+	}
+	/**
+	* Writes depth, position and presentation onto every step, and gives a parent that authored no `status` the one
+	* rolled up from its children — which is why the walk returns the statuses it settled on.
+	*
+	* Cheap to repeat: each value is a property assignment Lit will no-op when unchanged.
+	*/
+	syncSteps() {
+		const grouped = !!(this.steps?.length ? this.renderRoot : this).querySelector("c2-step c2-step");
+		const walk = (steps, level, parentPath) => {
+			return steps.map((step, index) => {
+				const element = step;
+				element.level = level;
+				element.position = index + 1;
+				element.path = parentPath ? `${parentPath}.${index + 1}` : String(index + 1);
+				element.last = index === steps.length - 1;
+				element.marker = this.marker;
+				element.grouped = grouped;
+				if (!this.known.has(element)) {
+					this.known.add(element);
+					if (this.hasSynced) element.toggleAttribute("entering", true);
+				}
+				const children = _Steps.collectSteps(element);
+				element.hasChildren = children.length > 0;
+				const childStatuses = children.length ? walk(children, level + 1, element.path) : [];
+				if (this.mayWrite(element)) {
+					const next = this.deriveStatus(childStatuses, level, index);
+					element.status = next;
+					this.written.set(element, next);
+				}
+				return element.status;
+			});
+		};
+		walk(this.rootSteps, 0, "");
+		this.hasSynced = true;
+	}
+	/**
+	* Whether this element may still write a step's status. A step it has never written is its to write while the
+	* step is `pending` — what "nobody said" looks like, from the markup or from the server. After that it is ours
+	* only while it still holds the value we gave it.
+	*/
+	mayWrite(element) {
+		const last = this.written.get(element);
+		return last === void 0 ? element.status === "pending" : element.status === last;
+	}
+	/** A parent takes the most urgent status under it; a leaf takes the wizard's `current`, or nothing happened yet. */
+	deriveStatus(childStatuses, level, index) {
+		if (childStatuses.length) return rollupStatus(childStatuses);
+		if (level === 0 && this.current >= 0) return index < this.current ? "success" : index === this.current ? "current" : "pending";
+		return "pending";
+	}
+	/** The status a data node ends up with, so a renderer is handed what is actually drawn. */
+	statusOf(node, level, index) {
+		if (node.status) return node.status;
+		const children = node.children ?? [];
+		if (children.length) return rollupStatus(children.map((child, childIndex) => this.statusOf(child, level + 1, childIndex)));
+		if (level === 0 && this.current >= 0) return index < this.current ? "success" : index === this.current ? "current" : "pending";
+		return "pending";
+	}
+	renderNode(node, level, index, parentPath) {
+		const position = index + 1;
+		const path = parentPath ? `${parentPath}.${position}` : String(position);
+		const context = {
+			node,
+			level,
+			position,
+			path,
+			status: this.statusOf(node, level, index)
+		};
+		const slot = (name, renderer) => renderer ? html`<span slot=${name}>${renderer(context)}</span>` : nothing;
+		const children = node.children ?? [];
+		return html`<c2-step
+      status=${ifDefined(node.status)}
+      ?collapsed=${node.collapsed ?? false}
+      label=${ifDefined(this.renderItem || this.renderLabel ? void 0 : node.label)}
+      detail=${ifDefined(this.renderItem || this.renderDetail ? void 0 : node.detail)}
+      trailing=${ifDefined(this.renderItem || this.renderTrailing ? void 0 : node.trailing)}
+    >
+      ${slot("marker", this.renderMarker)}${slot("toggle", this.renderToggle)}
+      ${this.renderItem ? html`<span slot="label">${this.renderItem(context)}</span>` : html`${slot("label", this.renderLabel)}${slot("detail", this.renderDetail)}${slot("trailing", this.renderTrailing)}`}
+      ${repeat(children, (child, childIndex) => child.id ?? `${path}.${childIndex + 1}`, (child, childIndex) => this.renderNode(child, level + 1, childIndex, path))}
+    </c2-step>`;
+	}
+	render() {
+		return this.steps?.length ? html`${repeat(this.steps, (node, index) => node.id ?? String(index + 1), (node, index) => this.renderNode(node, 0, index, ""))}` : html`<slot @slotchange=${() => this.syncSteps()}></slot>`;
+	}
+};
+__decorate([property({ reflect: true })], Steps.prototype, "marker", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], Steps.prototype, "current", void 0);
+__decorate([property({ converter: jsonPropertyConverter })], Steps.prototype, "steps", void 0);
+__decorate([property({ attribute: "aria-label" })], Steps.prototype, "ariaLabel", void 0);
+__decorate([property({ attribute: false })], Steps.prototype, "renderItem", void 0);
+__decorate([property({ attribute: false })], Steps.prototype, "renderMarker", void 0);
+__decorate([property({ attribute: false })], Steps.prototype, "renderToggle", void 0);
+__decorate([property({ attribute: false })], Steps.prototype, "renderLabel", void 0);
+__decorate([property({ attribute: false })], Steps.prototype, "renderDetail", void 0);
+__decorate([property({ attribute: false })], Steps.prototype, "renderTrailing", void 0);
+Steps = _Steps = __decorate([customElement("c2-steps")], Steps);
+//#endregion
+export { Steps };

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@c2n/steps",
+  "version": "0.0.10",
+  "type": "module",
+  "main": "dist/steps.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/steps.d.ts",
+      "default": "./dist/steps.js"
+    },
+    "./step.js": {
+      "types": "./types/src/step.d.ts",
+      "default": "./dist/step.js"
+    },
+    "./step-types.js": {
+      "types": "./types/src/step-types.d.ts",
+      "default": "./dist/step-types.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "steps",
+    "stepper",
+    "progress",
+    "trace",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.10",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "8d57710b3345fcb01cdb4cb15d2d43ba8bf21642"
+}

package/react.d.ts

@@ -0,0 +1,26 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/steps. Import once, anywhere in the program:
+//
+//     import '@c2n/steps/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Step } from '@c2n/steps/step.js'
+import type { Steps } from '@c2n/steps'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-step': C2Props<Step>
+      'c2-steps': C2Props<Steps>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/step-icons.d.ts

@@ -0,0 +1,7 @@
+import type { StepStatus } from './step-types.js';
+/** What a screen reader reads for each status, since the marker is a glyph. */
+export declare const STATUS_LABELS: Record<StepStatus, string>;
+/** The states that draw a glyph. The rest are drawn by the marker's ring alone. */
+export declare const STATUS_ICONS: Partial<Record<StepStatus, unknown>>;
+export declare function rollupStatus(statuses: StepStatus[]): StepStatus;
+//# sourceMappingURL=step-icons.d.ts.map

package/types/src/step-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-icons.d.ts","sourceRoot":"","sources":["../../src/step-icons.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEjD,+EAA+E;AAC/E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAQpD,CAAA;AAmBD,mFAAmF;AACnF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAK7D,CAAA;AASD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,UAAU,EAAE,GAAG,UAAU,CAI/D"}

package/types/src/step-types.d.ts

@@ -0,0 +1,64 @@
+/** State of a single step. */
+export type StepStatus = 
+/** Not reached yet. */
+'pending'
+/** The step the process is on, but not doing work — a wizard's active page. */
+ | 'current'
+/** Under way: the marker spins. */
+ | 'running'
+/** Finished successfully. */
+ | 'success'
+/** Finished and failed. */
+ | 'error'
+/** Finished with something worth reading. */
+ | 'warning'
+/** Deliberately not run. */
+ | 'skipped';
+/** How the marker is drawn. */
+export type StepsMarker = 
+/** A glyph per status: check, cross, triangle, spinner, dot, dash. */
+'icon'
+/** The step's dotted position, coloured by status. */
+ | 'number'
+/** No marker column at all. */
+ | 'none';
+/** One node of the `steps` property, the data-driven alternative to `c2-step` children. */
+export interface StepNode {
+    /**
+     * Stable identity. A step keeps its DOM — and so its expanded state — across renders that reuse the same `id`,
+     * and `updateStep` addresses a step by it. Without one a step is identified by its position, which is enough for
+     * a trace that only ever grows at the end.
+     */
+    id?: string;
+    /** Primary text. */
+    label?: string;
+    /** Secondary text beside the label, dimmed — a path, an id, a short note. */
+    detail?: string;
+    /** Text at the end of the row: a duration, a count, a timestamp. */
+    trailing?: string;
+    /**
+     * State of this step. Left out on a step that has `children`, it is rolled up from them: the most urgent thing
+     * inside wins, so a parent reports that it is running, or that something under it failed, on its own.
+     */
+    status?: StepStatus;
+    /** Sub-steps. A step that has them is a group: its own row is the summary, and these are the detail. */
+    children?: StepNode[];
+    /** Starts this group folded away. A group is expanded by default: every step in the list is a row you can see. */
+    collapsed?: boolean;
+}
+/** What a renderer is handed for one step. */
+export interface StepContext {
+    /** The node from the `steps` array. */
+    node: StepNode;
+    /** Depth of nesting; `0` at the top level. */
+    level: number;
+    /** 1-based position among its siblings. */
+    position: number;
+    /** Dotted position through the whole tree — `3.1` is the first child of the third step. */
+    path: string;
+    /** The status in effect, rolled up and `current`-derived. */
+    status: StepStatus;
+}
+/** Replaces part of a row's content. Returns anything Lit can render. */
+export type StepRenderer = (context: StepContext) => unknown;
+//# sourceMappingURL=step-types.d.ts.map

package/types/src/step-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-types.d.ts","sourceRoot":"","sources":["../../src/step-types.ts"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,MAAM,MAAM,UAAU;AACpB,uBAAuB;AACrB,SAAS;AACX,+EAA+E;GAC7E,SAAS;AACX,mCAAmC;GACjC,SAAS;AACX,6BAA6B;GAC3B,SAAS;AACX,2BAA2B;GACzB,OAAO;AACT,6CAA6C;GAC3C,SAAS;AACX,4BAA4B;GAC1B,SAAS,CAAA;AAEb,+BAA+B;AAC/B,MAAM,MAAM,WAAW;AACrB,sEAAsE;AACpE,MAAM;AACR,sDAAsD;GACpD,QAAQ;AACV,+BAA+B;GAC7B,MAAM,CAAA;AAEV,2FAA2F;AAC3F,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAA;IACrB,kHAAkH;IAClH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,8CAA8C;AAC9C,MAAM,WAAW,WAAW;IAC1B,uCAAuC;IACvC,IAAI,EAAE,QAAQ,CAAA;IACd,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAA;IACb,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAA;IAChB,2FAA2F;IAC3F,IAAI,EAAE,MAAM,CAAA;IACZ,6DAA6D;IAC7D,MAAM,EAAE,UAAU,CAAA;CACnB;AAED,yEAAyE;AACzE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAA"}

package/types/src/step.d.ts

@@ -0,0 +1,185 @@
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+import type { StepStatus, StepsMarker } from './step-types.js';
+export type { StepStatus, StepsMarker } from './step-types.js';
+/** Detail of {@link StepEventMap.step-toggle}. */
+export interface StepToggleEventDetail {
+    /** Whether the group is now folded away. */
+    collapsed: boolean;
+    /** Dotted position of the step through the tree, so a listener on `c2-steps` knows which one moved. */
+    path: string;
+}
+export interface StepEventMap {
+    /**
+     * A group opened or closed — by a click, by the keyboard, or because the run reopened it. Bubbles, so one
+     * listener on `c2-steps` hears every group; `event.target` is the step and `detail.path` says where it sits.
+     */
+    'step-toggle': CustomEvent<StepToggleEventDetail>;
+}
+export interface Step {
+    addEventListener: TypedAddEventListener<Step, StepEventMap>;
+    removeEventListener: TypedRemoveEventListener<Step, StepEventMap>;
+}
+/**
+ * One row of a {@link Steps} list: a marker, a label with optional dimmed `detail`, and `trailing` text at the end
+ * of the row — a duration, a count, a timestamp.
+ *
+ * **A step with sub-steps is a group.** Nest `c2-step` children and the row becomes the summary of a disclosure
+ * and the children its detail, so a long run collapses to the shape of the task rather than to a wall of lines.
+ * There is no second element to learn: the same tag is a leaf or a group depending on what is inside it.
+ *
+ * **Every step is a row, and every row is visible.** A group starts expanded and nothing ever folds one away on
+ * its own: the chevron is there for the reader, and `collapsed` in the markup starts a stage folded. The run only
+ * ever brings a stage *back* into view — a folded one reopens when it starts running (`running`, `current`) or
+ * when something in it goes wrong (`error`, `warning`).
+ *
+ * **A step is one row.** Label, detail and trailing text sit on a single line and truncate with an ellipsis rather
+ * than wrapping, so a hundred-step trace stays scannable, and a sub-step is indented far enough that its marker
+ * lands under its parent's label. `--c2-step__text--flex-direction: column` still stacks the detail under the
+ * label, which a wizard's descriptions want — that is two lines on purpose, and each of them is still one line.
+ *
+ * The step never sets its own depth, position or marker mode: the parent `c2-steps` writes them on every pass, so
+ * a step used on its own renders as a single root-level row.
+ *
+ * @tag c2-step
+ *
+ * @slot - Sub-steps. A step that has them is a group.
+ * @slot label - Primary text. Falls back to the `label` attribute.
+ * @slot detail - Secondary text beside the label. Falls back to the `detail` attribute.
+ * @slot trailing - Content at the end of the row. Falls back to the `trailing` attribute.
+ * @slot marker - Replaces the whole marker: a custom icon, an avatar, a number of your own.
+ * @slot toggle - A disclosure affordance of your own — a chevron, a caret. Empty by default: a trace is a list of rows, and the row is already clickable. It is filled per step, so give a leaf an empty `<span slot="toggle"></span>` to keep its rows lined up with the groups above them.
+ *
+ * @event {CustomEvent<StepToggleEventDetail>} step-toggle - A group was folded away or brought back. Bubbles.
+ *
+ * @csspart frame - The box around the whole step, which is what grows when a new step arrives.
+ * @csspart row - The row itself: toggle, marker, text and trailing content. A group's row is its `<summary>`.
+ * @csspart toggle - The disclosure chevron of a group.
+ * @csspart marker - The round marker at the start of the row.
+ * @csspart rail - The connector between this marker and the next.
+ * @csspart label - The primary text.
+ * @csspart detail - The dimmed secondary text.
+ * @csspart trailing - The text at the end of the row.
+ * @csspart children - The box holding the sub-steps.
+ *
+ * @cssproperty {pixel} [--c2-step__row--gap=10px] - Space between the marker, the text and the trailing content.
+ * @cssproperty {padding} [--c2-step__row--padding-block=7px]
+ * @cssproperty {padding} [--c2-step__row--padding-inline=12px]
+ * @cssproperty {pixel} [--c2-step__row--indent=marker size + row gap] - Extra inset per level of nesting. The default puts a sub-step's marker under its parent's label, which is what makes the nesting read without drawing anything.
+ * @cssproperty {border-radius} --c2-step__row--border-radius
+ * @cssproperty {color} --c2-step__row--background
+ * @cssproperty {color} --c2-step__row__hover--background - Set it to make the rows respond to the pointer.
+ * @cssproperty {border} [--c2-step__row--border-bottom=1px solid #e4e4e7] - The hairline under each row.
+ * @cssproperty {border} [--c2-step__row--outline=2px solid rgb(2, 101, 220)] - Focus ring of a group's row, which is a button.
+ *
+ * @cssproperty {pixel} [--c2-step__toggle--size=14px] - Width of the `toggle` slot's column, when it is filled.
+ * @cssproperty {pixel} [--c2-step__toggle--gap=4px] - Space between that column and the marker.
+ * @cssproperty {color} [--c2-step__toggle--color=#a1a1aa]
+ *
+ * @cssproperty {color} [--c2-step__guide--color=#e4e4e7] - A vertical rule at each ancestor's depth, for a file-tree look. Off by default.
+ * @cssproperty {pixel} [--c2-step__guide--width=0px] - Width of that rule. `1px` turns the guides on.
+ *
+ * @cssproperty {pixel} [--c2-step__marker--size=16px]
+ * @cssproperty {font-size} [--c2-step__marker--font-size=10px] - Size of the dotted path in `marker="number"`.
+ * @cssproperty {padding} [--c2-step__marker--padding-inline=3px] - Breathing room either side of a dotted path, which is what turns the circle into a pill when the number is long. Only `marker="number"` uses it.
+ * @cssproperty {font-weight} [--c2-step__marker--font-weight=600]
+ * @cssproperty {border-radius} [--c2-step__marker--border-radius=999px]
+ * @cssproperty {border} [--c2-step__marker--border=1px solid #bcbcc6] - The ring, drawn for the states that have no glyph of their own (`pending`, `current`, `running`) and for every `marker="number"` step. A finished step is its glyph, so it has no ring.
+ * @cssproperty {color} [--c2-step__marker--background=transparent]
+ * @cssproperty {color} [--c2-step__marker--color=#71717a]
+ *
+ * @cssproperty {pixel} [--c2-step__rail--width=0px] - Width of the connector. `0px` is the trace look; `2px` gives a stepper its rail.
+ * @cssproperty {color} [--c2-step__rail--color=#e4e4e7]
+ * @cssproperty {pixel} [--c2-step__rail--gap=4px] - Space between the marker and the rail.
+ *
+ * @cssproperty {color} [--c2-step__label--color=#18181b]
+ * @cssproperty {font-size} [--c2-step__label--font-size=13px]
+ * @cssproperty {font-weight} [--c2-step__label--font-weight=500]
+ * @cssproperty {font-family} [--c2-step__label--font-family=ui-monospace, SFMono-Regular, Menlo, Consolas, monospace]
+ * @cssproperty {color} [--c2-step__detail--color=#71717a]
+ * @cssproperty {font-size} --c2-step__detail--font-size - Falls back to the label size.
+ * @cssproperty {font-weight} [--c2-step__detail--font-weight=400]
+ * @cssproperty {pixel} [--c2-step__detail--gap=8px] - Space between the label and the detail when they share a line.
+ * @cssproperty {pixel} [--c2-step__detail--row-gap=2px] - Space between them when they are stacked.
+ * @cssproperty {flex-direction-row} [--c2-step__text--flex-direction=row] - `column` puts the detail on its own line under the label, which a wizard's descriptions want. It is the only variable that switch needs: the gap and the alignment follow it.
+ * @cssproperty {align-items} [--c2-step__text--align-items=baseline] - How the label and the detail line up across the row. Stacked, they are flush left whatever this says.
+ * @cssproperty {color} [--c2-step__trailing--color=#71717a]
+ * @cssproperty {font-size} --c2-step__trailing--font-size - Falls back to the label size.
+ * @cssproperty {font-weight} [--c2-step__trailing--font-weight=400]
+ *
+ * @cssproperty {color} [--c2-step__success--color=#16a34a] - Marker colour when the step succeeded.
+ * @cssproperty {color} [--c2-step__error--color=#dc2626]
+ * @cssproperty {color} [--c2-step__warning--color=#d97706]
+ * @cssproperty {color} [--c2-step__running--color=rgb(2, 101, 220)]
+ * @cssproperty {color} [--c2-step__current--color=rgb(2, 101, 220)]
+ * @cssproperty {color} [--c2-step__skipped--color=#71717a] - Marker and label colour when the step was skipped.
+ * @cssproperty {time} [--c2-step--transition-duration=150ms] - Colour transitions, and the beat a marker gives when its status settles.
+ * @cssproperty {time} [--c2-step--enter-duration=260ms] - How long a step arriving in a running trace takes to grow into place. `0s` turns the animation off.
+ * @cssproperty {translate} [--c2-step--enter-translate=-4px] - How far it slides while it does.
+ */
+export declare class Step extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** State of the step. Drives the marker glyph and the accent colour, and reopens a folded group. */
+    status: StepStatus;
+    /** Primary text, when the `label` slot is empty. */
+    label: string;
+    /** Dimmed secondary text beside the label, when the `detail` slot is empty. */
+    detail: string;
+    /** Text at the end of the row, when the `trailing` slot is empty. */
+    trailing: string;
+    /**
+     * Whether this group is folded away. A group is expanded by default — every step in the list is a row you can
+     * see — and only the reader, the markup or a reopening status ever changes that.
+     */
+    collapsed: boolean;
+    /** Depth of nesting. Written by the parent `c2-steps`; setting it by hand only changes the indent. */
+    level: number;
+    /** 1-based position among its siblings. Written by the parent. */
+    position: number;
+    /** Dotted position through the tree — `3.1` for the first child of the third step. Shown by `marker="number"`. */
+    path: string;
+    /** Whether this is the last step of its group, so the rail stops here. Written by the parent. */
+    last: boolean;
+    /** Marker mode, written by the parent `c2-steps`. */
+    marker: StepsMarker;
+    /**
+     * Whether the list holds any group at all, written by the parent. A list of plain rows drops the chevron column
+     * rather than leaving every row inset by an empty one.
+     */
+    grouped: boolean;
+    /**
+     * Whether this step has sub-steps, and so is a group. Written by the parent `c2-steps`, which walks the tree
+     * anyway; a step on its own works it out for itself.
+     */
+    hasChildren: boolean;
+    private hasDetailSlot;
+    private hasTrailingSlot;
+    private hasToggleSlot;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * `entering` is written by the parent on a step that arrived after the list was already on screen, and it is
+     * the whole of the enter animation. It comes off again the moment that animation is done, so a step is never
+     * left in a state that would replay it — the spinner is ignored here because it never ends.
+     */
+    private readonly handleAnimationEnd;
+    protected firstUpdated(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /** These three collapse when empty, so their rows have to know whether the slot was filled. */
+    private handleSlotChange;
+    /** Astro wraps an island in `<astro-island>`, so a sub-step is rarely a literal child — look right through. */
+    private syncHasChildren;
+    private handleToggle;
+    private renderMarker;
+    /** The row's content, identical whether it is a plain row or a group's summary. */
+    private renderRowContent;
+    private renderChildren;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-step': Step;
+    }
+}
+//# sourceMappingURL=step.d.ts.map

package/types/src/step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/step.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAIpG,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAChG,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAI9D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE9D,kDAAkD;AAClD,MAAM,WAAW,qBAAqB;IACpC,4CAA4C;IAC5C,SAAS,EAAE,OAAO,CAAA;IAClB,uGAAuG;IACvG,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,aAAa,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAA;CAClD;AAED,MAAM,WAAW,IAAI;IACnB,gBAAgB,EAAE,qBAAqB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;IAC3D,mBAAmB,EAAE,wBAAwB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;CAClE;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,0BAAoB;IAE1C,oGAAoG;IACvE,MAAM,EAAE,UAAU,CAAY;IAE3D,oDAAoD;IACxC,KAAK,SAAK;IAEtB,+EAA+E;IACnE,MAAM,SAAK;IAEvB,qEAAqE;IACzD,QAAQ,SAAK;IAEzB;;;OAGG;IACyC,SAAS,UAAQ;IAE7D,sGAAsG;IACtE,KAAK,SAAI;IAEzC,kEAAkE;IAClC,QAAQ,SAAI;IAE5C,kHAAkH;IAClF,IAAI,SAAM;IAE1C,iGAAiG;IACjE,IAAI,UAAQ;IAE5C,qDAAqD;IACrB,MAAM,EAAE,WAAW,CAAS;IAE5D;;;OAGG;IAC6B,OAAO,UAAQ;IAE/C;;;OAGG;IAC6B,WAAW,UAAQ;IAE1C,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,eAAe,CAAQ;IAC/B,OAAO,CAAC,aAAa,CAAQ;IAE7B,iBAAiB;IASjB,oBAAoB;IAM7B;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAIlC;cAEkB,YAAY;cAOZ,UAAU,CAAC,OAAO,EAAE,cAAc;cAOlC,OAAO,CAAC,OAAO,EAAE,cAAc;IAclD,+FAA+F;IAC/F,OAAO,CAAC,gBAAgB;IASxB,+GAA+G;IAC/G,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IAMpB,mFAAmF;IACnF,OAAO,CAAC,gBAAgB;IA2BxB,OAAO,CAAC,cAAc;IAQb,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAA;KAChB;CACF"}

package/types/src/steps.d.ts

@@ -0,0 +1,164 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type { StepNode, StepRenderer, StepsMarker } from './step-types.js';
+import './step.js';
+export type { StepContext, StepNode, StepRenderer, StepStatus, StepsMarker } from './step-types.js';
+export type { StepToggleEventDetail, StepEventMap } from './step.js';
+/**
+ * A vertical list of steps: the trace of a task as it runs, or a wizard's progress. Each row is a marker, a label,
+ * an optional dimmed `detail` beside it and `trailing` text at the end — a duration, a count, a timestamp.
+ *
+ * **A step with sub-steps is a group**, and a group is a disclosure: its own row is the summary and its sub-steps
+ * are the detail. **Every step is a row, and every row is visible** — a group starts expanded and nothing ever
+ * folds one away on its own. The chevron is there for the reader, `collapsed` in the markup starts a stage folded,
+ * and the run only ever brings a folded stage *back* into view when it starts running or something in it fails.
+ *
+ * Author it either way, and mix them freely:
+ *
+ * - **Declarative** — slot `c2-step` children and nest them for sub-steps.
+ * - **Data-driven** — hand it a `steps` array of `{ id, label, detail, trailing, status, children }` and it renders
+ *   the tree itself. The array wins when both are present. During a run, `updateStep(id, patch)` changes one step
+ *   without rebuilding the array.
+ *
+ * Everything the markup fills with a slot, the data-driven mode fills with a renderer: `renderMarker` for the
+ * `marker` slot, `renderToggle` for `toggle`, `renderLabel` / `renderDetail` / `renderTrailing` for the text, and
+ * `renderItem` for that text all at once. Each is handed the node, its depth, its position, its dotted path and
+ * the status actually in effect.
+ *
+ * A parent step that does not author a `status` takes one from its children: the most urgent thing inside wins, so
+ * a stage reports that it is running, or that something under it failed, without you setting it.
+ *
+ * `current` is the shortcut a wizard wants: set it to the index of the active step and every top-level step that
+ * has neither an explicit `status` nor sub-steps becomes `success` before it, `current` at it and `pending` after.
+ *
+ * A step that arrives while the list is already on screen grows into place rather than appearing, and a marker
+ * gives one beat as its status settles — which is what a trace being written in front of you should look like.
+ * `--c2-step--enter-duration: 0s` turns the first off, and `prefers-reduced-motion` turns both off.
+ *
+ * The connector rail between markers is drawn by CSS and off by default, because a trace does not want one — give
+ * `--c2-step__rail--width` a width and a stepper gets its rail.
+ *
+ * Numbering follows the tree: `marker="number"` draws a dotted path, so the first child of the third step reads
+ * `3.1` rather than a second `1`.
+ *
+ * @tag c2-steps
+ *
+ * @slot - The `c2-step` children. Ignored when `steps` is set.
+ *
+ * @slotcomponent c2-step
+ *
+ * @event {CustomEvent<StepToggleEventDetail>} step-toggle - Fired by a `c2-step` when a group opens or closes, and bubbling to here. `event.target` is the step; `detail.path` says where it sits.
+ *
+ * @cssproperty {pixel} [--c2-steps--gap=0px] - Space between rows. A stepper usually wants some; a trace does not.
+ * @cssproperty {color} --c2-steps--background
+ * @cssproperty {border} --c2-steps--border
+ * @cssproperty {border-radius} --c2-steps--border-radius
+ * @cssproperty {padding} [--c2-steps--padding-block=0px]
+ * @cssproperty {padding} [--c2-steps--padding-inline=0px]
+ * @cssproperty {overflow} [--c2-steps--overflow-y=visible] - `auto` with a `max-height` keeps a long run in its own scroller.
+ * @cssproperty {max-height} [--c2-steps--max-height=none]
+ */
+export declare class Steps extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** How each marker is drawn: a status glyph, the step's number, or nothing. */
+    marker: StepsMarker;
+    /**
+     * Index of the active step, for a wizard. `-1` (the default) leaves every status alone; otherwise a top-level
+     * step with neither an explicit `status` nor sub-steps becomes `success` before this index, `current` at it and
+     * `pending` after it.
+     */
+    current: number;
+    /** The steps as data, instead of `c2-step` children. Takes precedence over the slot. */
+    steps: StepNode[] | undefined;
+    /** Accessible name for the list. */
+    ariaLabel: string | null;
+    /**
+     * Replaces a row's text when rendering from `steps`, so a step can carry a badge, a link, an avatar — anything
+     * Lit renders. It overrides `renderLabel`, `renderDetail` and `renderTrailing`, which are the finer-grained way
+     * to do the same thing. The marker and the disclosure are their own columns, not part of the text, so
+     * `renderMarker` and `renderToggle` still apply alongside it.
+     */
+    renderItem?: StepRenderer;
+    /**
+     * The step's icon when rendering from `steps` — the data-driven half of the `marker` slot. Return an `<svg>`, an
+     * icon element, a letter; anything Lit renders. Without one the marker draws the glyph for the step's status.
+     */
+    renderMarker?: StepRenderer;
+    /** The step's disclosure affordance when rendering from `steps` — the data-driven half of the `toggle` slot. */
+    renderToggle?: StepRenderer;
+    /** Replaces the label when rendering from `steps`. */
+    renderLabel?: StepRenderer;
+    /** Replaces the dimmed detail when rendering from `steps`. */
+    renderDetail?: StepRenderer;
+    /** Replaces the trailing content when rendering from `steps`. */
+    renderTrailing?: StepRenderer;
+    /**
+     * The status this element last wrote to each step, which is how it knows whether a step is still its to write.
+     *
+     * `status` reflects, and a server-rendered step arrives with the default already stamped on it, so the presence
+     * of the attribute proves nothing about who put it there. A step is ours while it still holds what we last gave
+     * it — the moment a run sets something else on it, it is the run's, for good.
+     */
+    private readonly written;
+    /**
+     * Steps this element has already laid out. A step it has not seen before is new — but only once the list itself
+     * has been drawn: on the first pass every step is new, and a whole trace fading in at once is not an arrival,
+     * it is a page loading.
+     */
+    private readonly known;
+    private hasSynced;
+    /**
+     * A run ticks a step over by setting `status` on it, which is nothing this element renders and so nothing Lit
+     * would notice. Watching the attribute is what lets a parent roll the change up and a group open on it.
+     */
+    private observer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /**
+     * Changes one step of `steps` in place and redraws, without rebuilding the array — what a task runner wants when
+     * it ticks a step over hundreds of times. Returns `false` when no step carries that `id`.
+     */
+    updateStep(id: string, patch: Partial<StepNode>): boolean;
+    /** Brings every group back into view. */
+    expandAll(): void;
+    /** Folds every group away, leaving the top-level stages. */
+    collapseAll(): void;
+    private setCollapsedOfAll;
+    /** Every step in the list, wherever it came from. */
+    private allSteps;
+    /**
+     * The nearest `c2-step` descendants of `root`, looking through anything that is not one.
+     *
+     * A step is rarely a literal child: Astro wraps every island in an `<astro-island>` (which is
+     * `display: contents`, so it changes nothing but the tree), and a consumer may wrap rows in a `<div>`. Matching
+     * only direct children silently found nothing there, and every step kept its defaults.
+     */
+    private static collectSteps;
+    /** Top-level steps, whether they came from the slot or from `steps`. */
+    private get rootSteps();
+    /**
+     * Writes depth, position and presentation onto every step, and gives a parent that authored no `status` the one
+     * rolled up from its children — which is why the walk returns the statuses it settled on.
+     *
+     * Cheap to repeat: each value is a property assignment Lit will no-op when unchanged.
+     */
+    private syncSteps;
+    /**
+     * Whether this element may still write a step's status. A step it has never written is its to write while the
+     * step is `pending` — what "nobody said" looks like, from the markup or from the server. After that it is ours
+     * only while it still holds the value we gave it.
+     */
+    private mayWrite;
+    /** A parent takes the most urgent status under it; a leaf takes the wizard's `current`, or nothing happened yet. */
+    private deriveStatus;
+    /** The status a data node ends up with, so a renderer is handed what is actually drawn. */
+    private statusOf;
+    private renderNode;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-steps': Steps;
+    }
+}
+//# sourceMappingURL=steps.d.ts.map

package/types/src/steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../src/steps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAM/E,OAAO,KAAK,EAAe,QAAQ,EAAE,YAAY,EAAc,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAInG,OAAO,WAAW,CAAA;AAElB,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACnG,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAgBpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,0BAAoB;IAE1C,+EAA+E;IAClD,MAAM,EAAE,WAAW,CAAS;IAEzD;;;;OAIG;IACwC,OAAO,SAAK;IAEvD,wFAAwF;IACxC,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAY;IAEzF,oCAAoC;IACY,SAAS,EAAE,MAAM,GAAG,IAAI,CAAO;IAE/E;;;;;OAKG;IAC6B,UAAU,CAAC,EAAE,YAAY,CAAA;IAEzD;;;OAGG;IAC6B,YAAY,CAAC,EAAE,YAAY,CAAA;IAE3D,gHAAgH;IAChF,YAAY,CAAC,EAAE,YAAY,CAAA;IAE3D,sDAAsD;IACtB,WAAW,CAAC,EAAE,YAAY,CAAA;IAE1D,8DAA8D;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAA;IAE3D,iEAAiE;IACjC,cAAc,CAAC,EAAE,YAAY,CAAA;IAE7D;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAqC;IAE7D;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAyB;IAC/C,OAAO,CAAC,SAAS,CAAQ;IAEzB;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAAC,CAAkB;IAE1B,iBAAiB;IAOjB,oBAAoB;cAKV,OAAO;IAI1B;;;OAGG;IACH,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,OAAO;IAgBzD,yCAAyC;IACzC,SAAS;IAIT,4DAA4D;IAC5D,WAAW;IAIX,OAAO,CAAC,iBAAiB;IAIzB,qDAAqD;IACrD,OAAO,CAAC,QAAQ;IAKhB;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,YAAY;IAS3B,wEAAwE;IACxE,OAAO,KAAK,SAAS,GAIpB;IAED;;;;;OAKG;IACH,OAAO,CAAC,SAAS;IAoCjB;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAKhB,oHAAoH;IACpH,OAAO,CAAC,YAAY;IAMpB,2FAA2F;IAC3F,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,UAAU;IA4BT,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAA;KAClB;CACF"}

package/vue.d.ts

@@ -0,0 +1,40 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/steps. Import once, anywhere in the program:
+//
+//     import '@c2n/steps/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Step, StepEventMap } from '@c2n/steps/step.js'
+import type { Steps, StepsEventMap } from '@c2n/steps'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-step': DefineComponent<
+      C2Props<Step> & {
+        onStepToggle?: (event: StepEventMap['step-toggle']) => void
+      }
+    >
+    'c2-steps': DefineComponent<
+      C2Props<Steps> & {
+        'aria-label'?: unknown
+        onStepToggle?: (event: StepsEventMap['step-toggle']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}