@marianmeres/stuic 3.167.0 → 3.168.0

package/dist/components/Stat/Stat.svelte

@@ -0,0 +1,226 @@
+<script lang="ts" module>
+	import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { THC } from "../Thc/Thc.svelte";
+
+	export type StatTrend = "up" | "down" | "flat";
+
+	export type StatTrendIntent =
+		"auto" | "success" | "destructive" | "warning" | "neutral";
+
+	export interface Props extends Omit<
+		HTMLAttributes<HTMLDivElement>,
+		"children" | "title"
+	> {
+		/** Small label above the value (metric name, e.g. "Revenue") */
+		label?: THC;
+		/** The primary metric value, preformatted (e.g. "$45,231.89") */
+		value?: THC | number;
+		/** Delta/change indicator, preformatted (e.g. "+20.1%") */
+		delta?: THC | number;
+		/** Trend direction — drives the arrow and (via `trendIntent="auto"`) the delta color */
+		trend?: StatTrend;
+		/**
+		 * Delta color semantics. "auto" (default) maps up→success, down→destructive,
+		 * flat→neutral. Set explicitly for metrics where down is good (churn, costs):
+		 * e.g. `trend="down" trendIntent="success"`.
+		 */
+		trendIntent?: StatTrendIntent;
+		/** Show the trend direction arrow next to the delta */
+		showTrendArrow?: boolean;
+		/** Secondary text next to the delta (e.g. "vs. last month") */
+		hint?: THC;
+		/** When provided, the stat renders as <a> */
+		href?: string;
+		/** Disabled state */
+		disabled?: boolean;
+		/** Override the entire stat body */
+		children?: Snippet;
+		/** Icon area in the top-right corner (next to the label) */
+		renderIcon?: Snippet;
+		/** Footer area (sparkline, actions, metadata, etc.) */
+		renderFooter?: Snippet;
+		/** Skip all default styling */
+		unstyled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Class for the label */
+		classLabel?: string;
+		/** Class for the value */
+		classValue?: string;
+		/** Class for the delta */
+		classDelta?: string;
+		/** Class for the hint */
+		classHint?: string;
+		/** Class for the footer area */
+		classFooter?: string;
+		/** Bindable element reference */
+		el?: HTMLElement;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Thc from "../Thc/Thc.svelte";
+	import { iconTrendingUp, iconTrendingDown, iconMinus } from "../../icons/index.js";
+
+	let {
+		label,
+		value,
+		delta,
+		trend,
+		trendIntent = "auto",
+		showTrendArrow = true,
+		hint,
+		href,
+		disabled = false,
+		children,
+		renderIcon,
+		renderFooter,
+		unstyled = false,
+		class: classProp,
+		classLabel: classLabelProp,
+		classValue: classValueProp,
+		classDelta: classDeltaProp,
+		classHint: classHintProp,
+		classFooter: classFooterProp,
+		el = $bindable(),
+		onclick,
+		...rest
+	}: Props = $props();
+
+	const TREND_ICONS: Record<StatTrend, () => string> = {
+		up: () => iconTrendingUp(),
+		down: () => iconTrendingDown(),
+		flat: () => iconMinus(),
+	};
+
+	let _value = $derived(typeof value === "number" ? String(value) : value);
+	let _delta = $derived(typeof delta === "number" ? String(delta) : delta);
+
+	let _resolvedTrendIntent = $derived.by(() => {
+		if (trendIntent !== "auto") return trendIntent;
+		if (trend === "up") return "success";
+		if (trend === "down") return "destructive";
+		return "neutral";
+	});
+
+	let _showArrow = $derived(showTrendArrow && !!trend);
+	let _hasDelta = $derived((delta !== undefined && delta !== null) || _showArrow);
+	let _hasHeader = $derived(!!(label || renderIcon));
+	let _hasMeta = $derived(_hasDelta || !!hint);
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-stat", classProp));
+	let _classLabel = $derived(
+		unstyled ? classLabelProp : twMerge("stuic-stat-label", classLabelProp)
+	);
+	let _classValue = $derived(
+		unstyled ? classValueProp : twMerge("stuic-stat-value", classValueProp)
+	);
+	let _classDelta = $derived(
+		unstyled ? classDeltaProp : twMerge("stuic-stat-delta", classDeltaProp)
+	);
+	let _classHint = $derived(
+		unstyled ? classHintProp : twMerge("stuic-stat-hint", classHintProp)
+	);
+	let _classFooter = $derived(
+		unstyled ? classFooterProp : twMerge("stuic-stat-footer", classFooterProp)
+	);
+</script>
+
+{#snippet statInner()}
+	{#if children}
+		{@render children()}
+	{:else}
+		{#if _hasHeader}
+			<div class={unstyled ? undefined : "stuic-stat-header"}>
+				{#if label}
+					<div class={_classLabel}>
+						<Thc thc={label} />
+					</div>
+				{/if}
+				{#if renderIcon}
+					<div class={unstyled ? undefined : "stuic-stat-icon"}>
+						{@render renderIcon()}
+					</div>
+				{/if}
+			</div>
+		{/if}
+		{#if _value !== undefined && _value !== null}
+			<div class={_classValue}>
+				<Thc thc={_value} />
+			</div>
+		{/if}
+		{#if _hasMeta}
+			<div class={unstyled ? undefined : "stuic-stat-meta"}>
+				{#if _hasDelta}
+					<span class={_classDelta}>
+						{#if _showArrow && trend}
+							<span
+								class={unstyled ? undefined : "stuic-stat-trend-arrow"}
+								aria-hidden="true"
+							>
+								{@html TREND_ICONS[trend]()}
+							</span>
+						{/if}
+						{#if _delta !== undefined && _delta !== null}
+							<Thc thc={_delta} />
+						{/if}
+					</span>
+				{/if}
+				{#if hint}
+					<span class={_classHint}>
+						<Thc thc={hint} />
+					</span>
+				{/if}
+			</div>
+		{/if}
+		{#if renderFooter}
+			<div class={_classFooter}>
+				{@render renderFooter()}
+			</div>
+		{/if}
+	{/if}
+{/snippet}
+
+{#if href}
+	<a
+		{href}
+		bind:this={el}
+		class={_class}
+		data-trend={!unstyled && trend ? trend : undefined}
+		data-trend-intent={!unstyled && _hasDelta ? _resolvedTrendIntent : undefined}
+		data-interactive={!unstyled ? "" : undefined}
+		data-disabled={!unstyled && disabled ? "" : undefined}
+		aria-disabled={disabled ? "true" : undefined}
+		{...rest as HTMLAnchorAttributes}
+	>
+		{@render statInner()}
+	</a>
+{:else if onclick}
+	<button
+		type="button"
+		bind:this={el}
+		class={_class}
+		data-trend={!unstyled && trend ? trend : undefined}
+		data-trend-intent={!unstyled && _hasDelta ? _resolvedTrendIntent : undefined}
+		data-interactive={!unstyled ? "" : undefined}
+		data-disabled={!unstyled && disabled ? "" : undefined}
+		{disabled}
+		{onclick}
+		{...rest as any}
+	>
+		{@render statInner()}
+	</button>
+{:else}
+	<div
+		bind:this={el}
+		class={_class}
+		data-trend={!unstyled && trend ? trend : undefined}
+		data-trend-intent={!unstyled && _hasDelta ? _resolvedTrendIntent : undefined}
+		data-disabled={!unstyled && disabled ? "" : undefined}
+		{...rest}
+	>
+		{@render statInner()}
+	</div>
+{/if}

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

@@ -0,0 +1,54 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { THC } from "../Thc/Thc.svelte";
+export type StatTrend = "up" | "down" | "flat";
+export type StatTrendIntent = "auto" | "success" | "destructive" | "warning" | "neutral";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+    /** Small label above the value (metric name, e.g. "Revenue") */
+    label?: THC;
+    /** The primary metric value, preformatted (e.g. "$45,231.89") */
+    value?: THC | number;
+    /** Delta/change indicator, preformatted (e.g. "+20.1%") */
+    delta?: THC | number;
+    /** Trend direction — drives the arrow and (via `trendIntent="auto"`) the delta color */
+    trend?: StatTrend;
+    /**
+     * Delta color semantics. "auto" (default) maps up→success, down→destructive,
+     * flat→neutral. Set explicitly for metrics where down is good (churn, costs):
+     * e.g. `trend="down" trendIntent="success"`.
+     */
+    trendIntent?: StatTrendIntent;
+    /** Show the trend direction arrow next to the delta */
+    showTrendArrow?: boolean;
+    /** Secondary text next to the delta (e.g. "vs. last month") */
+    hint?: THC;
+    /** When provided, the stat renders as <a> */
+    href?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Override the entire stat body */
+    children?: Snippet;
+    /** Icon area in the top-right corner (next to the label) */
+    renderIcon?: Snippet;
+    /** Footer area (sparkline, actions, metadata, etc.) */
+    renderFooter?: Snippet;
+    /** Skip all default styling */
+    unstyled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Class for the label */
+    classLabel?: string;
+    /** Class for the value */
+    classValue?: string;
+    /** Class for the delta */
+    classDelta?: string;
+    /** Class for the hint */
+    classHint?: string;
+    /** Class for the footer area */
+    classFooter?: string;
+    /** Bindable element reference */
+    el?: HTMLElement;
+}
+declare const Stat: import("svelte").Component<Props, {}, "el">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

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`)