@marianmeres/stuic 3.167.0 → 3.169.0

package/dist/components/Stat/index.css

@@ -0,0 +1,217 @@
+/* ============================================================================
+   STAT COMPONENT TOKENS
+   Override globally: :root { --stuic-stat-radius: 0; }
+   Override locally:  <Stat style="--stuic-stat-value-font-size: 3rem;">
+   ============================================================================ */
+
+:root {
+	--stuic-stat-bg: var(--stuic-color-card, var(--stuic-color-background));
+	--stuic-stat-bg-hover: var(--stuic-color-card-hover, var(--stuic-color-muted));
+	--stuic-stat-border: var(--stuic-color-border);
+	--stuic-stat-border-hover: var(--stuic-color-border-hover);
+
+	/* Layout */
+	--stuic-stat-padding: 1rem;
+	--stuic-stat-gap: 0.375rem;
+	--stuic-stat-meta-gap: 0.5rem;
+	--stuic-stat-delta-gap: 0.25rem;
+
+	/* Label */
+	--stuic-stat-label-font-size: var(--text-sm);
+	--stuic-stat-label-font-weight: var(--font-weight-medium);
+	--stuic-stat-label-text: var(--stuic-color-muted-foreground);
+
+	/* Value */
+	--stuic-stat-value-font-size: var(--text-2xl);
+	--stuic-stat-value-font-weight: var(--font-weight-semibold);
+	--stuic-stat-value-line-height: 1.2;
+	--stuic-stat-value-text: var(--stuic-color-foreground);
+
+	/* Delta */
+	--stuic-stat-delta-font-size: var(--text-sm);
+	--stuic-stat-delta-font-weight: var(--font-weight-medium);
+	--stuic-stat-delta-text-success: var(--stuic-color-success);
+	--stuic-stat-delta-text-destructive: var(--stuic-color-destructive);
+	--stuic-stat-delta-text-warning: var(--stuic-color-warning);
+	--stuic-stat-delta-text-neutral: var(--stuic-color-muted-foreground);
+
+	/* Hint */
+	--stuic-stat-hint-font-size: var(--text-sm);
+	--stuic-stat-hint-text: var(--stuic-color-muted-foreground);
+
+	/* Icon */
+	--stuic-stat-icon-text: var(--stuic-color-muted-foreground);
+
+	/* Focus ring */
+	--stuic-stat-ring-width: 3px;
+	--stuic-stat-ring-color: var(--stuic-color-ring);
+
+	/* Disabled */
+	--stuic-stat-opacity-disabled: 0.5;
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
+
+	.stuic-stat {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-stat-gap);
+		width: 100%;
+		height: 100%;
+		padding: var(--stuic-stat-padding);
+		background: var(--stuic-stat-bg);
+		border: var(--stuic-stat-border-width, var(--stuic-border-width)) solid
+			var(--stuic-stat-border);
+		border-radius: var(--stuic-stat-radius, var(--stuic-radius-container));
+		box-shadow: var(--stuic-stat-shadow, var(--stuic-shadow));
+		transition:
+			background var(--stuic-stat-transition, var(--stuic-transition)),
+			border-color var(--stuic-stat-transition, var(--stuic-transition)),
+			box-shadow var(--stuic-stat-transition, var(--stuic-transition));
+		text-decoration: none;
+		color: inherit;
+		text-align: start;
+	}
+
+	/* Reset button styling */
+	button.stuic-stat {
+		font: inherit;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	/* ============================================================================
+	   INTERACTIVE HOVER (only when href or onclick)
+	   ============================================================================ */
+
+	.stuic-stat[data-interactive]:hover:not([data-disabled]) {
+		background: var(--stuic-stat-bg-hover);
+		border-color: var(--stuic-stat-border-hover);
+		box-shadow: var(--stuic-stat-shadow-hover, var(--stuic-shadow-hover));
+		cursor: pointer;
+	}
+
+	/* ============================================================================
+	   FOCUS
+	   ============================================================================ */
+
+	.stuic-stat:focus-visible {
+		outline: var(--stuic-stat-ring-width) solid var(--stuic-stat-ring-color);
+		outline-offset: 0px;
+	}
+
+	/* ============================================================================
+	   DISABLED
+	   ============================================================================ */
+
+	.stuic-stat[data-disabled] {
+		opacity: var(--stuic-stat-opacity-disabled);
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	/* ============================================================================
+	   HEADER (label + icon)
+	   ============================================================================ */
+
+	.stuic-stat-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	.stuic-stat-label {
+		font-size: var(--stuic-stat-label-font-size);
+		font-weight: var(--stuic-stat-label-font-weight);
+		color: var(--stuic-stat-label-text);
+	}
+
+	.stuic-stat-icon {
+		color: var(--stuic-stat-icon-text);
+		flex-shrink: 0;
+	}
+
+	/* ============================================================================
+	   VALUE
+	   ============================================================================ */
+
+	.stuic-stat-value {
+		font-size: var(--stuic-stat-value-font-size);
+		font-weight: var(--stuic-stat-value-font-weight);
+		line-height: var(--stuic-stat-value-line-height);
+		color: var(--stuic-stat-value-text);
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* ============================================================================
+	   META (delta + hint)
+	   ============================================================================ */
+
+	.stuic-stat-meta {
+		display: flex;
+		align-items: baseline;
+		flex-wrap: wrap;
+		gap: var(--stuic-stat-meta-gap);
+	}
+
+	/* Deliberately NOT a flex container. A flex box exports its FIRST item's
+	   baseline, which here is the arrow — and a replaced <svg> has no text
+	   baseline, so it synthesizes one from its bottom edge. Centered on the line
+	   that edge sits ~0.2em below the delta text's baseline, and the row's
+	   baseline alignment then pushed the hint down by that much. Inline layout
+	   exports the text baseline, so delta text and hint sit on the same line. */
+	.stuic-stat-delta {
+		font-size: var(--stuic-stat-delta-font-size);
+		font-weight: var(--stuic-stat-delta-font-weight);
+	}
+
+	/* Delta color by resolved trend intent (root data attribute) */
+	.stuic-stat[data-trend-intent="success"] .stuic-stat-delta {
+		color: var(--stuic-stat-delta-text-success);
+	}
+
+	.stuic-stat[data-trend-intent="destructive"] .stuic-stat-delta {
+		color: var(--stuic-stat-delta-text-destructive);
+	}
+
+	.stuic-stat[data-trend-intent="warning"] .stuic-stat-delta {
+		color: var(--stuic-stat-delta-text-warning);
+	}
+
+	.stuic-stat[data-trend-intent="neutral"] .stuic-stat-delta {
+		color: var(--stuic-stat-delta-text-neutral);
+	}
+
+	.stuic-stat-trend-arrow {
+		display: inline-block;
+		margin-inline-end: var(--stuic-stat-delta-gap);
+		/* Optical centering: a 1em icon reads as centered on the text when its
+		   box hangs slightly below the baseline. */
+		vertical-align: -0.125em;
+	}
+
+	/* display:block so the icon defines no inner line box — the wrapper's
+	   baseline stays its bottom edge, which is what vertical-align shifts. */
+	.stuic-stat-trend-arrow svg {
+		display: block;
+		width: 1em;
+		height: 1em;
+	}
+
+	.stuic-stat-hint {
+		font-size: var(--stuic-stat-hint-font-size);
+		color: var(--stuic-stat-hint-text);
+	}
+
+	/* ============================================================================
+	   FOOTER
+	   ============================================================================ */
+
+	.stuic-stat-footer {
+		margin-top: auto;
+	}
+}

package/dist/components/Stat/index.d.ts

@@ -0,0 +1 @@
+export { default as Stat, type Props as StatProps, type StatTrend, type StatTrendIntent, } from "./Stat.svelte";

package/dist/components/Stat/index.js

@@ -0,0 +1 @@
+export { default as Stat, } from "./Stat.svelte";

package/dist/components/Stepper/README.md

@@ -0,0 +1,181 @@
+# Stepper
+
+Numbered multi-step progress header for wizard/checkout flows. Renders the steps as
+an accessible `<nav>` landmark with an ordered list: completed steps get a check
+mark and filled connector, the current step is highlighted (and marked
+`aria-current="step"`), upcoming steps stay muted. Display-only by default; pass
+`onSelect` to make steps clickable (completed-only by default — the "go back and
+revisit" wizard rule).
+
+Pairs naturally with [`@marianmeres/wizard`](https://github.com/marianmeres/wizard)
+— `current` is a zero-based index, exactly the wizard's `step.index` (see below).
+
+## Props
+
+| Prop               | Type                             | Default        | Description                                                                                  |
+| ------------------ | -------------------------------- | -------------- | -------------------------------------------------------------------------------------------- |
+| `steps`            | `(StepperStep \| string)[]`      | required       | The steps; plain strings are shorthand for `{ label }`                                       |
+| `current`          | `number`                         | `0`            | Zero-based current step index; `steps.length` = all completed (wizard done); clamped         |
+| `onSelect`         | `(index, step) => void`          | -              | Navigation callback; when present, steps render as buttons                                   |
+| `clickable`        | `"none" \| "completed" \| "all"` | `"completed"`  | Which steps may be clicked when `onSelect` is present (the current step never fires)         |
+| `orientation`      | `"horizontal" \| "vertical"`     | `"horizontal"` | Layout direction                                                                             |
+| `labelPosition`    | `"end" \| "below"`               | `"end"`        | Horizontal only: labels beside the indicator, or centered below it (classic checkout header) |
+| `disabled`         | `boolean`                        | `false`        | Disable all interaction (e.g. while a step is submitting)                                    |
+| `t`                | `TranslateFn`                    | English        | i18n translate function (see below)                                                          |
+| `unstyled`         | `boolean`                        | `false`        | Skip all default styling                                                                     |
+| `class`            | `string`                         | -              | Additional CSS classes (merged via twMerge)                                                  |
+| `classStep`        | `string`                         | -              | Class for every step item (`li`)                                                             |
+| `classIndicator`   | `string`                         | -              | Class for the indicator bubble                                                               |
+| `classLabel`       | `string`                         | -              | Class for the label                                                                          |
+| `classDescription` | `string`                         | -              | Class for the description                                                                    |
+| `classConnector`   | `string`                         | -              | Class for the connector line between steps                                                   |
+| `el`               | `HTMLElement`                    | -              | Element reference (bindable)                                                                 |
+
+### `StepperStep`
+
+| Field         | Type      | Description                                                                                       |
+| ------------- | --------- | ------------------------------------------------------------------------------------------------- |
+| `label`       | `THC`     | Step label (text, html, or component — see `Thc`)                                                 |
+| `description` | `THC`     | Optional secondary line under the label                                                           |
+| `icon`        | `string`  | Raw svg/html string rendered in the indicator instead of the number (completed/error markers win) |
+| `error`       | `boolean` | Marks the step as failed — destructive coloring + "×" indicator                                   |
+| `disabled`    | `boolean` | Never clickable, regardless of the `clickable` policy                                             |
+
+## Snippet Props
+
+| Snippet           | Description                                                    |
+| ----------------- | -------------------------------------------------------------- |
+| `renderIndicator` | Override the bubble content; receives `{ index, step, state }` |
+
+## Usage
+
+### Basic
+
+```svelte
+<script lang="ts">
+	import { Stepper } from "@marianmeres/stuic";
+
+	let current = $state(1);
+</script>
+
+<Stepper steps={["Account", "Payment", "Confirm"]} {current} />
+```
+
+### Clickable (go back to a completed step)
+
+```svelte
+<Stepper
+	steps={["Account", "Payment", "Confirm"]}
+	{current}
+	onSelect={(index) => (current = index)}
+/>
+
+<!-- free navigation to any non-disabled step -->
+<Stepper {steps} {current} clickable="all" onSelect={(index) => (current = index)} />
+```
+
+### Descriptions, error state
+
+```svelte
+<Stepper
+	current={2}
+	steps={[
+		{ label: "Account", description: "Your credentials" },
+		{ label: "Payment", description: "Card details", error: true },
+		{ label: "Confirm", description: "Review the order" },
+	]}
+/>
+```
+
+### Vertical / labels below
+
+```svelte
+<Stepper {steps} {current} orientation="vertical" />
+<Stepper {steps} {current} labelPosition="below" />
+```
+
+### With `@marianmeres/wizard`
+
+`current` is a zero-based index, exactly the wizard's `step.index`:
+
+```svelte
+<script lang="ts">
+	import { Stepper } from "@marianmeres/stuic";
+	import { createWizard } from "@marianmeres/wizard";
+
+	const wizard = createWizard("checkout", {
+		steps: [{ label: "Account" }, { label: "Payment" }, { label: "Confirm" }],
+	});
+</script>
+
+<Stepper
+	steps={$wizard.steps.map((s) => ({ label: s.label, error: !!s.error }))}
+	current={$wizard.isDone ? $wizard.steps.length : $wizard.step.index}
+/>
+```
+
+### i18n
+
+Built-in English; bundled Slovak (`STEPPER_MESSAGES_SK`) is opt-in. Only the `<nav>`
+landmark label and the screen-reader-only step announcements are localized — the
+step labels are yours.
+
+```svelte
+<script lang="ts">
+	import { Stepper, createStepperT, STEPPER_MESSAGES_SK } from "@marianmeres/stuic";
+	const t = createStepperT(STEPPER_MESSAGES_SK);
+</script>
+
+<Stepper {steps} {current} {t} />
+```
+
+### Custom indicator
+
+```svelte
+<Stepper {steps} {current}>
+	{#snippet renderIndicator({ index, state })}
+		{state === "completed" ? "✓" : index + 1}
+	{/snippet}
+</Stepper>
+```
+
+## Accessibility
+
+- Renders a `<nav aria-label="Progress">` landmark (label localized via `t`) with an
+  ordered list; the current step is marked `aria-current="step"`.
+- The indicator bubble is `aria-hidden` — a visually hidden text announces
+  "Step X of Y" plus the completed/failed state instead, so icon-only information is
+  never lost to screen readers.
+- Clickable steps are real `<button>`s; ineligible ones are disabled.
+
+## CSS Variables
+
+| Variable                                                               | Default                            | Description                              |
+| ---------------------------------------------------------------------- | ---------------------------------- | ---------------------------------------- |
+| `--stuic-stepper-gap`                                                  | `0.75rem`                          | Indicator↔label gap + step↔connector gap |
+| `--stuic-stepper-gap-vertical`                                         | `1.75rem`                          | Vertical: distance between steps         |
+| `--stuic-stepper-connector-min-length`                                 | `1.5rem`                           | Horizontal: shortest connector           |
+| `--stuic-stepper-indicator-size`                                       | `2rem`                             | Bubble diameter                          |
+| `--stuic-stepper-indicator-border-width`                               | `2px`                              | Bubble border width                      |
+| `--stuic-stepper-indicator-radius`                                     | full circle                        | Bubble radius                            |
+| `--stuic-stepper-indicator-font-size`                                  | `--text-sm`                        | Bubble number font size                  |
+| `--stuic-stepper-indicator-bg` / `-text` / `-border`                   | upcoming colors                    | Bubble, upcoming state                   |
+| `--stuic-stepper-indicator-bg-current` / `-text-current` / …           | `--stuic-color-primary` accents    | Bubble, current state                    |
+| `--stuic-stepper-indicator-bg-completed` / `-text-completed` / …       | `--stuic-color-primary` filled     | Bubble, completed state                  |
+| `--stuic-stepper-indicator-bg-error` / `-text-error` / `-border-error` | `--stuic-color-destructive` filled | Bubble, error state                      |
+| `--stuic-stepper-label-font-size`                                      | `--text-base`                      | Label font size                          |
+| `--stuic-stepper-label-text` / `-text-current` / `-text-completed` / … | muted / foreground / destructive   | Label color per state                    |
+| `--stuic-stepper-description-font-size`                                | `--text-sm`                        | Description font size                    |
+| `--stuic-stepper-description-text`                                     | `--stuic-color-muted-foreground`   | Description color                        |
+| `--stuic-stepper-connector-thickness`                                  | `2px`                              | Connector line thickness                 |
+| `--stuic-stepper-connector-bg` / `-bg-completed`                       | border / primary                   | Connector color                          |
+| `--stuic-stepper-ring-width` / `--stuic-stepper-ring-color`            | `3px` / `--stuic-color-ring`       | Focus ring of clickable steps            |
+| `--stuic-stepper-opacity-disabled`                                     | `0.5`                              | Disabled opacity                         |
+
+## Data Attributes
+
+- `data-orientation` - `"horizontal" | "vertical"` (root)
+- `data-label-position` - `"end" | "below"` (root, horizontal only)
+- `data-disabled` - empty attribute (root when `disabled`; step `li` when `step.disabled`)
+- `data-state` - `"completed" | "current" | "upcoming"` (step `li`); `"completed"` on filled connectors
+- `data-error` - empty attribute (step `li` when `step.error`)

package/dist/components/Stepper/Stepper.svelte

@@ -0,0 +1,240 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { THC } from "../Thc/Thc.svelte";
+	import type { TranslateFn } from "../../types.js";
+
+	export type StepperOrientation = "horizontal" | "vertical";
+
+	export type StepperLabelPosition = "end" | "below";
+
+	export type StepperStepState = "completed" | "current" | "upcoming";
+
+	export type StepperClickable = "none" | "completed" | "all";
+
+	export interface StepperStep {
+		/** Step label */
+		label: THC;
+		/** Optional secondary line under the label */
+		description?: THC;
+		/**
+		 * Raw svg/html string rendered inside the indicator instead of the step number
+		 * (e.g. an `@marianmeres/icons-fns` render result). Completed/error markers
+		 * still take precedence.
+		 */
+		icon?: string;
+		/** Marks the step as failed — destructive coloring + "×" indicator */
+		error?: boolean;
+		/** Never clickable, regardless of the `clickable` policy */
+		disabled?: boolean;
+	}
+
+	export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+		/** The steps to render. Plain strings are shorthand for `{ label }`. */
+		steps: (StepperStep | string)[];
+		/**
+		 * Zero-based index of the current step (default 0) — aligns with
+		 * `@marianmeres/wizard`'s `step.index`. Steps before it render as completed,
+		 * steps after it as upcoming. Pass `steps.length` to mark every step
+		 * completed (wizard done). Out-of-range values are clamped.
+		 */
+		current?: number;
+		/**
+		 * Navigation callback. When provided (and `clickable` is not "none"), steps
+		 * render as buttons and eligible ones fire this on click. The current step
+		 * never fires.
+		 */
+		onSelect?: (index: number, step: StepperStep) => void;
+		/**
+		 * Which steps may be clicked when `onSelect` is present. `"completed"`
+		 * (default): only completed steps — the "go back and revisit" wizard rule.
+		 * `"all"`: any non-disabled step. `"none"`: display-only.
+		 */
+		clickable?: StepperClickable;
+		/** Layout direction (default "horizontal") */
+		orientation?: StepperOrientation;
+		/**
+		 * Horizontal orientation only: labels to the right of the indicator
+		 * (`"end"`, default) or centered below it (`"below"` — the classic
+		 * checkout header).
+		 */
+		labelPosition?: StepperLabelPosition;
+		/** Disable all interaction (e.g. while a step is submitting) */
+		disabled?: boolean;
+		/** i18n translate function (see `createStepperT`) */
+		t?: TranslateFn;
+		/** Override the indicator bubble content */
+		renderIndicator?: Snippet<
+			[{ index: number; step: StepperStep; state: StepperStepState }]
+		>;
+		/** Skip all default styling */
+		unstyled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Class for every step item (`li`) */
+		classStep?: string;
+		/** Class for the indicator bubble */
+		classIndicator?: string;
+		/** Class for the label */
+		classLabel?: string;
+		/** Class for the description */
+		classDescription?: string;
+		/** Class for the connector line between steps */
+		classConnector?: string;
+		/** Bindable element reference */
+		el?: HTMLElement;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Thc from "../Thc/Thc.svelte";
+	import { iconCheck, iconX } from "../../icons/index.js";
+	import { t_default } from "./i18n.js";
+
+	let {
+		steps,
+		current = 0,
+		onSelect,
+		clickable = "completed",
+		orientation = "horizontal",
+		labelPosition = "end",
+		disabled = false,
+		t = t_default,
+		renderIndicator,
+		unstyled = false,
+		class: classProp,
+		classStep: classStepProp,
+		classIndicator: classIndicatorProp,
+		classLabel: classLabelProp,
+		classDescription: classDescriptionProp,
+		classConnector: classConnectorProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	let _steps: StepperStep[] = $derived(
+		steps.map((s) => (typeof s === "string" ? { label: s } : s))
+	);
+
+	// clamped to [0, steps.length] — the extra slot means "all completed"
+	let _current = $derived(Math.min(Math.max(0, Math.floor(current)), _steps.length));
+
+	let _interactive = $derived(!!onSelect && clickable !== "none");
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-stepper", classProp));
+	let _classStep = $derived(
+		unstyled ? classStepProp : twMerge("stuic-stepper-item", classStepProp)
+	);
+	let _classIndicator = $derived(
+		unstyled ? classIndicatorProp : twMerge("stuic-stepper-indicator", classIndicatorProp)
+	);
+	let _classLabel = $derived(
+		unstyled ? classLabelProp : twMerge("stuic-stepper-label", classLabelProp)
+	);
+	let _classDescription = $derived(
+		unstyled
+			? classDescriptionProp
+			: twMerge("stuic-stepper-description", classDescriptionProp)
+	);
+	let _classConnector = $derived(
+		unstyled ? classConnectorProp : twMerge("stuic-stepper-connector", classConnectorProp)
+	);
+
+	function stateOf(i: number): StepperStepState {
+		if (i < _current) return "completed";
+		if (i === _current) return "current";
+		return "upcoming";
+	}
+
+	function isEligible(step: StepperStep, state: StepperStepState): boolean {
+		if (disabled || step.disabled || state === "current") return false;
+		return clickable === "all" || state === "completed";
+	}
+
+	function select(i: number) {
+		const step = _steps[i];
+		if (!_interactive || !isEligible(step, stateOf(i))) return;
+		onSelect?.(i, step);
+	}
+
+	// icon-only state info for screen readers ("Step 2 of 4, Completed")
+	function srText(i: number, step: StepperStep, state: StepperStepState): string {
+		const parts = [t("step_x_of_y", { step: i + 1, stepCount: _steps.length })];
+		if (step.error) parts.push(t("failed"));
+		else if (state === "completed") parts.push(t("completed"));
+		return parts.join(", ");
+	}
+</script>
+
+{#snippet stepInner(i: number, step: StepperStep, state: StepperStepState)}
+	<span class={_classIndicator} aria-hidden="true">
+		{#if renderIndicator}
+			{@render renderIndicator({ index: i, step, state })}
+		{:else if step.error}
+			{@html iconX()}
+		{:else if state === "completed"}
+			{@html iconCheck()}
+		{:else if step.icon}
+			{@html step.icon}
+		{:else}
+			{i + 1}
+		{/if}
+	</span>
+	<span class="sr-only">{srText(i, step, state)}</span>
+	<span class={unstyled ? undefined : "stuic-stepper-text"}>
+		<span class={_classLabel}><Thc thc={step.label} /></span>
+		{#if step.description}
+			<span class={_classDescription}><Thc thc={step.description} /></span>
+		{/if}
+	</span>
+{/snippet}
+
+{#if _steps.length}
+	<nav
+		bind:this={el}
+		class={_class}
+		data-orientation={!unstyled ? orientation : undefined}
+		data-label-position={!unstyled && orientation === "horizontal"
+			? labelPosition
+			: undefined}
+		data-disabled={!unstyled && disabled ? "" : undefined}
+		aria-label={t("stepper", null, "Progress")}
+		{...rest}
+	>
+		<ol class={unstyled ? undefined : "stuic-stepper-list"}>
+			{#each _steps as step, i (i)}
+				{@const state = stateOf(i)}
+				<li
+					class={_classStep}
+					data-state={!unstyled ? state : undefined}
+					data-error={!unstyled && step.error ? "" : undefined}
+					data-disabled={!unstyled && step.disabled ? "" : undefined}
+					aria-current={state === "current" ? "step" : undefined}
+				>
+					{#if _interactive}
+						<button
+							type="button"
+							class={unstyled ? undefined : "stuic-stepper-trigger"}
+							disabled={!isEligible(step, state)}
+							onclick={() => select(i)}
+						>
+							{@render stepInner(i, step, state)}
+						</button>
+					{:else}
+						<div class={unstyled ? undefined : "stuic-stepper-trigger"}>
+							{@render stepInner(i, step, state)}
+						</div>
+					{/if}
+					{#if i < _steps.length - 1}
+						<span
+							class={_classConnector}
+							data-state={!unstyled && state === "completed" ? "completed" : undefined}
+							aria-hidden="true"
+						></span>
+					{/if}
+				</li>
+			{/each}
+		</ol>
+	</nav>
+{/if}