@mystravil/hardpoint 0.0.0-stage → 0.1.0

package/dist/components/Spinner.svelte

@@ -0,0 +1,117 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type SpinnerProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+		/**
+		 * What the app is waiting for, such as `Loading projects`. Shown beside
+		 * the glyph and announced politely once the spinner appears.
+		 */
+		label: string;
+		/** The root element. */
+		ref?: HTMLSpanElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import { duration } from '../motion/transitions.js';
+
+	// The reel's line spinner (da3-10): bar, slash, dash, backslash.
+	const glyphs = ['|', '/', '-', '\\'];
+
+	let { label, class: className, ref = $bindable(null), ...rest }: SpinnerProps = $props();
+
+	let shown = $state(false);
+	let step = $state(0);
+
+	// A timer, not CSS keyframes (keyframes are for expressive entrances
+	// only). It reads both durations from the element, so an app can retune
+	// them, also per spinner (`style="--spinner-delay: 0ms"`). It keeps
+	// stepping under reduced motion: spinners and progress stay.
+	function run(node: HTMLElement) {
+		const delay = duration(node, '--spinner-delay');
+		const every = duration(node, '--spinner-step');
+		let interval: ReturnType<typeof setInterval> | undefined;
+		const timeout = setTimeout(() => {
+			shown = true;
+			if (every > 0) interval = setInterval(() => (step = (step + 1) % glyphs.length), every);
+		}, delay);
+		return () => {
+			clearTimeout(timeout);
+			clearInterval(interval);
+		};
+	}
+</script>
+
+<!--
+	A stepped spinner (BRIEF, visual rule 7): `|`, `/`, `-`, `\` in Geist
+	Pixel Square at 26.32px, one state per `--spinner-step` (167ms). Nothing
+	shows until `--spinner-delay` (300ms) has passed, so fast work never
+	flashes it; the row keeps its height meanwhile. The glyph is aria-hidden
+	and sits outside the live region; the label is a `role="status"` region
+	that is empty until the spinner appears, so screen readers announce it
+	once. Extra attributes and `class` go to the root `span.hp-spinner`, which
+	carries `data-state` waiting | visible. Place it start-aligned: centring
+	it in a wider box can put the glyph between pixels.
+-->
+<span
+	{...rest}
+	bind:this={ref}
+	class={['hp-spinner', className]}
+	data-state={shown ? 'visible' : 'waiting'}
+	{@attach run}
+>
+	<span class="hp-spinner-glyph" aria-hidden="true" data-step={shown ? step : undefined}
+		>{shown ? glyphs[step] : ''}</span
+	>
+	<span class="hp-spinner-label" role="status">{shown ? label : ''}</span>
+</span>
+
+<style>
+	/* One row the height of the pixel line, so the spinner does not move
+	   anything when it appears. The label line sits an even number of pixels
+	   from the top, so the glyph's top edge stays on a whole pixel. */
+	.hp-spinner {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-3);
+		min-height: var(--type-pixel-leading);
+		vertical-align: top;
+	}
+
+	/* Geist Pixel is proportional: at 26.32px (a 1px module) the four glyphs
+	   advance 6, 11, 10 and 11px. A fixed 12px box keeps the label still
+	   while the glyph changes. Each glyph starts at the box's edge plus a
+	   whole-pixel inset that centres it as nearly as whole pixels allow,
+	   because centring in odd free space would put its edges on half pixels
+	   (BRIEF, Crisp pixel text). The insets are font metrics. */
+	.hp-spinner-glyph {
+		flex: none;
+		width: 12px;
+		font-family: var(--pixel);
+		font-size: var(--type-pixel);
+		font-weight: 400;
+		line-height: var(--type-pixel-leading);
+		letter-spacing: 0;
+		text-align: start;
+		color: var(--text);
+	}
+	.hp-spinner-glyph[data-step='0'] {
+		padding-inline-start: 3px;
+	}
+	.hp-spinner-glyph[data-step='2'] {
+		padding-inline-start: 1px;
+	}
+
+	/* 16px on touch, the dense 14px on fine pointers. */
+	.hp-spinner-label {
+		color: var(--muted);
+		font-size: var(--type-body);
+		line-height: 24px;
+	}
+	@media (pointer: fine) {
+		.hp-spinner-label {
+			font-size: var(--type-dense);
+			line-height: 20px;
+		}
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type SpinnerProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    /**
+     * What the app is waiting for, such as `Loading projects`. Shown beside
+     * the glyph and announced politely once the spinner appears.
+     */
+    label: string;
+    /** The root element. */
+    ref?: HTMLSpanElement | null;
+};
+declare const Spinner: import("svelte").Component<SpinnerProps, {}, "ref">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/Stat.svelte

@@ -0,0 +1,253 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	/**
+	 * `standard` (default): the size for a row of several stats. `display`:
+	 * the 32 to 56px display size, for the view's one display subject.
+	 */
+	export type StatVariant = 'standard' | 'display';
+
+	/** A status hue for the delta: `ok` good, `warn` needs attention, `danger` bad. */
+	export type StatTone = 'ok' | 'warn' | 'danger';
+
+	export type StatProps = Omit<HTMLAttributes<HTMLDListElement>, 'children'> & {
+		/** The caps label. A fixed string the app defines. */
+		label: string;
+		/**
+		 * The value in Geist with tabular figures. A string is shown as given
+		 * and changes at once. A number is shown through `format`; when it
+		 * changes after the first render, it ticks from the shown figure to
+		 * the new one (BRIEF, motion rule 5).
+		 */
+		value: string | number;
+		/**
+		 * Formats a number `value` at rest and at every step of a tick, for
+		 * example `(n) => n.toLocaleString('en-US')`. Each step is rounded to
+		 * the larger number of decimal places of the old and new value before
+		 * it is formatted. Without `format` a number shows as `String(value)`,
+		 * and the steps show those decimal places.
+		 */
+		format?: (value: number) => string;
+		/** A unit after the value, smaller and in the muted ink: `EUR`, `ms`, `tasks`. */
+		unit?: string;
+		/**
+		 * The change, in the muted ink. A number gets its sign: `+12`, `−3`
+		 * (a true minus), `0`. A string is shown as written, sign included.
+		 */
+		delta?: string | number;
+		/** What the delta compares with, after it: `since last week`. */
+		deltaNote?: string;
+		/**
+		 * Colours the delta in a status hue. Without it the delta stays muted.
+		 * The label or `deltaNote` must say the same, because colour is never
+		 * the only signal.
+		 */
+		tone?: StatTone;
+		variant?: StatVariant;
+	};
+</script>
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { Tween } from 'svelte/motion';
+	import { curve, duration, useMotion } from '../motion/index.js';
+
+	let {
+		label,
+		value,
+		format,
+		unit,
+		delta,
+		deltaNote,
+		tone,
+		variant = 'standard',
+		class: className,
+		...rest
+	}: StatProps = $props();
+
+	const change = $derived(
+		typeof delta === 'number'
+			? delta > 0
+				? `+${delta}`
+				: delta < 0
+					? `\u2212${-delta}`
+					: String(delta)
+			: delta
+	);
+
+	// ---- Tick (BRIEF, motion rule 5) ---------------------------------------
+
+	// A number value that changes after the first render ticks from the
+	// figure on screen to the new one. Quiet motion, so it runs in both tiers.
+	// Strings, reduced motion and live regions change at once.
+	const LIVE = '[aria-live]:not([aria-live="off"]), [role="status"], [role="log"], [role="alert"]';
+
+	const motion = useMotion();
+	let valueEl: HTMLElement | undefined;
+	// Starts on the first value, so nothing moves on the first render.
+	const tween = new Tween(untrack(() => (typeof value === 'number' ? value : 0)));
+	let last = untrack(() => value);
+	// The decimal places of the running tick's steps.
+	let places = $state(0);
+	// The figure on screen when the tick began. A hidden copy keeps its width.
+	let from = $state('');
+
+	/** The decimal places of `n` as `String()` writes it, exponent included. */
+	function decimals(n: number): number {
+		const [digits, exp = '0'] = String(n).split('e');
+		return Math.min(100, Math.max(0, (digits.split('.')[1]?.length ?? 0) - Number(exp)));
+	}
+	const atRest = (n: number) => (format ? format(n) : String(n));
+	/** One step: rounded to `p` places, never `-0`, then formatted. */
+	function atStep(n: number, p: number): string {
+		const r = Number(n.toFixed(p)) || 0;
+		return format ? format(r) : r.toFixed(p);
+	}
+
+	const text = $derived(typeof value === 'number' ? atRest(value) : value);
+	const ticking = $derived(
+		typeof value === 'number' && !Number.isNaN(value) && tween.current !== value
+	);
+	const step = $derived(ticking ? atStep(tween.current, places) : '');
+
+	// Before the DOM updates, so the first frame after a change still shows
+	// the old figure. Duration and curve are read from the value element at
+	// the change, so a retuned token applies. A change during a tick starts
+	// from the step on screen.
+	$effect.pre(() => {
+		const to = value;
+		untrack(() => {
+			const was = last;
+			last = to;
+			if (typeof to !== 'number' || to === was) return;
+			const resting = tween.current === tween.target;
+			const shown = resting ? tween.current : Number(tween.current.toFixed(places)) || 0;
+			const ms =
+				valueEl && typeof was === 'number' && !motion.reduced && !valueEl.closest(LIVE)
+					? duration(valueEl, '--dur-tick')
+					: 0;
+			if (!valueEl || ms <= 0 || !Number.isFinite(shown) || !Number.isFinite(to)) {
+				void tween.set(to, { duration: 0 });
+				return;
+			}
+			from = resting ? atRest(shown) : atStep(shown, places);
+			places = Math.max(decimals(shown), decimals(to));
+			// Tween would run the old tick for one more frame before the new
+			// one starts; stop it on the step on screen first.
+			if (!resting) void tween.set(shown, { duration: 0 });
+			void tween.set(to, { duration: ms, easing: curve(valueEl, '--tick') });
+		});
+	});
+</script>
+
+<!--
+	A caps label over a key figure in Geist with tabular figures (BRIEF, visual
+	rules 3 and 4; da3-65). A number value ticks to a new value over
+	`--dur-tick` on the `--tick` curve, never on the first render. The final
+	value stays in the accessible text; the moving steps are aria-hidden. The
+	root carries `data-ticking` during a tick. Extra attributes and `class` go
+	to the <dl>.
+-->
+<dl
+	{...rest}
+	class={['hp-stat', className]}
+	data-variant={variant}
+	data-tone={tone}
+	data-ticking={ticking ? '' : undefined}
+>
+	<dt class="hp-stat-label hp-label">{label}</dt>
+	<dd
+		bind:this={valueEl}
+		class={['hp-stat-value', variant === 'display' ? 'hp-display' : 'hp-page-title hp-num']}
+	>
+		<span class="hp-stat-figure"
+			><span class="hp-stat-final">{text}</span>{#if ticking}<span
+					class="hp-stat-from"
+					aria-hidden="true">{from}</span
+				><span class="hp-stat-step" aria-hidden="true">{step}</span>{/if}</span
+		>{#if unit}{' '}<span class="hp-stat-unit">{unit}</span>{/if}
+	</dd>
+	{#if change !== undefined && change !== ''}
+		<dd class="hp-stat-delta">
+			<span class="hp-stat-change">{change}</span>{#if deltaNote}{' '}{deltaNote}{/if}
+		</dd>
+	{/if}
+</dl>
+
+<style>
+	.hp-stat {
+		display: grid;
+		align-content: start;
+		gap: var(--space-1);
+		min-width: 0;
+	}
+	.hp-stat[data-variant='display'] {
+		gap: var(--space-2);
+	}
+
+	.hp-stat-label {
+		color: var(--muted);
+	}
+
+	/* Geist even inside a mono context such as a table cell. The size comes
+	   from base.css: .hp-page-title (24px, 20px on compact) with .hp-num, or
+	   .hp-display. A long figure breaks rather than widen a phone page. */
+	.hp-stat-value {
+		font-family: var(--sans);
+		overflow-wrap: anywhere;
+	}
+
+	/* During a tick the figure stacks three layers in one grid cell: the
+	   final value (transparent, read by screen readers), a hidden copy of
+	   the figure shown when the tick began, and the moving step. The cell is
+	   as wide as the wider of the old and new figure, so the unit after it
+	   holds still; the steps lie between the two in value, and with tabular
+	   figures in width too. */
+	.hp-stat[data-ticking] .hp-stat-figure {
+		display: inline-grid;
+	}
+	.hp-stat[data-ticking] .hp-stat-figure > * {
+		grid-area: 1 / 1;
+	}
+	.hp-stat[data-ticking] .hp-stat-final {
+		opacity: 0;
+	}
+	.hp-stat-from {
+		visibility: hidden;
+	}
+
+	.hp-stat-unit {
+		color: var(--muted);
+		font-size: var(--type-body);
+		font-weight: 400;
+		letter-spacing: 0;
+	}
+	.hp-stat[data-variant='display'] .hp-stat-unit {
+		font-size: var(--type-section);
+	}
+
+	/* 16px on touch, the dense 14px on fine pointers. */
+	.hp-stat-delta {
+		color: var(--muted);
+		font-size: var(--type-body);
+		line-height: 24px;
+		font-variant-numeric: tabular-nums;
+		overflow-wrap: anywhere;
+	}
+	@media (pointer: fine) {
+		.hp-stat-delta {
+			font-size: var(--type-dense);
+			line-height: 20px;
+		}
+	}
+
+	.hp-stat[data-tone='ok'] .hp-stat-change {
+		color: var(--ok);
+	}
+	.hp-stat[data-tone='warn'] .hp-stat-change {
+		color: var(--warn);
+	}
+	.hp-stat[data-tone='danger'] .hp-stat-change {
+		color: var(--danger);
+	}
+</style>

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

@@ -0,0 +1,46 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * `standard` (default): the size for a row of several stats. `display`:
+ * the 32 to 56px display size, for the view's one display subject.
+ */
+export type StatVariant = 'standard' | 'display';
+/** A status hue for the delta: `ok` good, `warn` needs attention, `danger` bad. */
+export type StatTone = 'ok' | 'warn' | 'danger';
+export type StatProps = Omit<HTMLAttributes<HTMLDListElement>, 'children'> & {
+    /** The caps label. A fixed string the app defines. */
+    label: string;
+    /**
+     * The value in Geist with tabular figures. A string is shown as given
+     * and changes at once. A number is shown through `format`; when it
+     * changes after the first render, it ticks from the shown figure to
+     * the new one (BRIEF, motion rule 5).
+     */
+    value: string | number;
+    /**
+     * Formats a number `value` at rest and at every step of a tick, for
+     * example `(n) => n.toLocaleString('en-US')`. Each step is rounded to
+     * the larger number of decimal places of the old and new value before
+     * it is formatted. Without `format` a number shows as `String(value)`,
+     * and the steps show those decimal places.
+     */
+    format?: (value: number) => string;
+    /** A unit after the value, smaller and in the muted ink: `EUR`, `ms`, `tasks`. */
+    unit?: string;
+    /**
+     * The change, in the muted ink. A number gets its sign: `+12`, `−3`
+     * (a true minus), `0`. A string is shown as written, sign included.
+     */
+    delta?: string | number;
+    /** What the delta compares with, after it: `since last week`. */
+    deltaNote?: string;
+    /**
+     * Colours the delta in a status hue. Without it the delta stays muted.
+     * The label or `deltaNote` must say the same, because colour is never
+     * the only signal.
+     */
+    tone?: StatTone;
+    variant?: StatVariant;
+};
+declare const Stat: import("svelte").Component<StatProps, {}, "">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

package/dist/components/Steps.svelte

@@ -0,0 +1,189 @@
+<script lang="ts" module>
+	import type { HTMLOlAttributes } from 'svelte/elements';
+
+	export type StepsItem = {
+		/** The step's caps label. A short fixed string the app defines. */
+		label: string;
+		/** A supporting line in `--muted`, as written. */
+		detail?: string;
+	};
+
+	/** Where a step stands, from `current`. Each step's `<li>` carries it in `data-state`. */
+	export type StepsState = 'done' | 'current' | 'upcoming';
+
+	/** From which width the steps sit in a row: 600px, 900px or 1200px. */
+	export type StepsBreakpoint = 'medium' | 'expanded' | 'large';
+
+	export type StepsProps = Omit<HTMLOlAttributes, 'children'> & {
+		/** In order, first to last. */
+		steps: StepsItem[];
+		/**
+		 * The index of the current step, from 0. Steps before it are done,
+		 * steps after it upcoming. `steps.length` marks every step done.
+		 */
+		current: number;
+		/**
+		 * From which width the steps sit in a row of equal columns; narrower,
+		 * they stack. Default `medium` (600px). Pick a later one when long
+		 * labels or many steps would not fit their columns.
+		 */
+		rowFrom?: StepsBreakpoint;
+		/** Screen-reader text after a done step's label. Default `done`. */
+		doneLabel?: string;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		steps,
+		current,
+		rowFrom = 'medium',
+		doneLabel = 'done',
+		class: className,
+		...rest
+	}: StepsProps = $props();
+
+	function stateOf(index: number): StepsState {
+		return index < current ? 'done' : index === current ? 'current' : 'upcoming';
+	}
+</script>
+
+<!--
+	Ordered steps as discrete segments (BRIEF, visual rule 7): each step has a
+	3px edge, titanium once reached and --border while upcoming, so the edges
+	read as a segmented bar. The current step adds the selection tint and
+	aria-current="step"; a done step shows a check for its number. A row from
+	`rowFrom` (600px by default), stacked below. When the current step
+	changes, the edges and the tint fade their colour over --dur-segment.
+	Extra attributes (an `aria-label` naming the process)
+	and `class` go to the <ol>.
+-->
+<ol role="list" {...rest} class={['hp-steps', className]} data-row-from={rowFrom}>
+	{#each steps as step, index}
+		{@const state = stateOf(index)}
+		<li class="hp-steps-step" data-state={state} aria-current={state === 'current' ? 'step' : undefined}>
+			<span class="hp-steps-mark" aria-hidden="true">
+				{#if state === 'done'}
+					<svg viewBox="0 0 16 16" width="16" height="16" focusable="false">
+						<path d="m3 8.5 3.5 3.5 6.5-7.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" />
+					</svg>
+				{:else}
+					{index + 1}
+				{/if}
+			</span>
+			<span class="hp-steps-label hp-label">{step.label}</span>
+			{#if state === 'done'}<span class="hp-visually-hidden">, {doneLabel}</span>{/if}
+			{#if step.detail}<span class="hp-steps-detail">{step.detail}</span>{/if}
+		</li>
+	{/each}
+</ol>
+
+<style>
+	/* Stacked below 600px. The edges and the current tint reach --bleed into
+	   the gutter, so the labels keep the page edge, as table rows do. */
+	.hp-steps {
+		display: grid;
+		gap: var(--space-1);
+		margin: 0 calc(-1 * var(--bleed));
+		padding: 0;
+		list-style: none;
+	}
+
+	/* The edge colour is a registered colour property, so it can transition
+	   on its own while the edge's shape switches at once between the stacked
+	   and the row form. */
+	@property --steps-edge {
+		syntax: '<color>';
+		inherits: false;
+		initial-value: transparent;
+	}
+
+	/* When the current step changes, the edge and the tint fade their colour
+	   over --dur-segment (BRIEF, short motion). A CSS transition never runs
+	   on an element's first style, so steps show their state at once when
+	   they render. 0ms is a snap. Colour only, so reduced motion keeps it.
+	   The text colour and the number or check change at once. */
+	.hp-steps-step {
+		--steps-edge: var(--accent);
+		position: relative;
+		display: grid;
+		grid-template-columns: var(--space-4) minmax(0, 1fr);
+		column-gap: var(--space-2);
+		row-gap: var(--space-1);
+		align-content: start;
+		padding: var(--space-3) var(--space-3) var(--space-3) var(--bleed);
+		/* the brief's 3px selection edge */
+		box-shadow: inset 3px 0 0 var(--steps-edge);
+		overflow-wrap: anywhere;
+		transition:
+			--steps-edge var(--dur-segment) var(--settle),
+			background-color var(--dur-segment) var(--settle);
+	}
+	.hp-steps-step[data-state='current'] {
+		background: var(--surface-selected);
+	}
+	.hp-steps-step[data-state='upcoming'] {
+		--steps-edge: var(--border);
+		color: var(--muted);
+	}
+
+	/* The number or the check, in a 16px box beside the label's first line. */
+	.hp-steps-mark {
+		display: grid;
+		place-items: center;
+		height: var(--space-4);
+		font-size: var(--type-label);
+		font-weight: 500;
+		line-height: 16px;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.hp-steps-detail {
+		grid-column: 2;
+		color: var(--muted);
+		font-size: var(--type-body);
+		line-height: 24px;
+	}
+	@media (pointer: fine) {
+		.hp-steps-detail {
+			font-size: var(--type-dense);
+			line-height: 20px;
+		}
+	}
+
+	/* A row of equal columns from the rowFrom width, the edge on top. A label
+	   longer than its column still breaks rather than widen the page. */
+	@media (min-width: 600px) {
+		.hp-steps[data-row-from='medium'] {
+			grid-auto-columns: minmax(0, 1fr);
+			grid-auto-flow: column;
+		}
+		[data-row-from='medium'] > .hp-steps-step {
+			padding: var(--space-4) var(--space-2) var(--space-3) var(--bleed);
+			/* the brief's 3px selection edge */
+			box-shadow: inset 0 3px 0 var(--steps-edge);
+		}
+	}
+	@media (min-width: 900px) {
+		.hp-steps[data-row-from='expanded'] {
+			grid-auto-columns: minmax(0, 1fr);
+			grid-auto-flow: column;
+		}
+		[data-row-from='expanded'] > .hp-steps-step {
+			padding: var(--space-4) var(--space-2) var(--space-3) var(--bleed);
+			/* the brief's 3px selection edge */
+			box-shadow: inset 0 3px 0 var(--steps-edge);
+		}
+	}
+	@media (min-width: 1200px) {
+		.hp-steps[data-row-from='large'] {
+			grid-auto-columns: minmax(0, 1fr);
+			grid-auto-flow: column;
+		}
+		[data-row-from='large'] > .hp-steps-step {
+			padding: var(--space-4) var(--space-2) var(--space-3) var(--bleed);
+			/* the brief's 3px selection edge */
+			box-shadow: inset 0 3px 0 var(--steps-edge);
+		}
+	}
+</style>

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

@@ -0,0 +1,31 @@
+import type { HTMLOlAttributes } from 'svelte/elements';
+export type StepsItem = {
+    /** The step's caps label. A short fixed string the app defines. */
+    label: string;
+    /** A supporting line in `--muted`, as written. */
+    detail?: string;
+};
+/** Where a step stands, from `current`. Each step's `<li>` carries it in `data-state`. */
+export type StepsState = 'done' | 'current' | 'upcoming';
+/** From which width the steps sit in a row: 600px, 900px or 1200px. */
+export type StepsBreakpoint = 'medium' | 'expanded' | 'large';
+export type StepsProps = Omit<HTMLOlAttributes, 'children'> & {
+    /** In order, first to last. */
+    steps: StepsItem[];
+    /**
+     * The index of the current step, from 0. Steps before it are done,
+     * steps after it upcoming. `steps.length` marks every step done.
+     */
+    current: number;
+    /**
+     * From which width the steps sit in a row of equal columns; narrower,
+     * they stack. Default `medium` (600px). Pick a later one when long
+     * labels or many steps would not fit their columns.
+     */
+    rowFrom?: StepsBreakpoint;
+    /** Screen-reader text after a done step's label. Default `done`. */
+    doneLabel?: string;
+};
+declare const Steps: import("svelte").Component<StepsProps, {}, "">;
+type Steps = ReturnType<typeof Steps>;
+export default Steps;