@14ch/svelte-ui 0.0.49 → 0.0.50

package/dist/assets/styles/import.css

@@ -368,6 +368,45 @@
   --svelte-ui-nav-bottom-sheet-overlay-bg: rgba(0, 0, 0, 0.4);
   --svelte-ui-nav-bottom-sheet-border-radius: 16px 16px 0 0;
   --svelte-ui-nav-bottom-sheet-padding: 16px 8px;
+  /* StepNav */
+  /* 強調色（現在／完了）。color prop 指定時は --internal-step-nav-accent が優先。 */
+  --svelte-ui-step-nav-accent-color: var(--svelte-ui-primary-color);
+  --svelte-ui-step-nav-completed-color: var(--svelte-ui-step-nav-accent-color);
+  --svelte-ui-step-nav-current-color: var(--svelte-ui-step-nav-accent-color);
+  /* マーカー */
+  --svelte-ui-step-nav-marker-size-sm: 24px;
+  --svelte-ui-step-nav-marker-size: 32px;
+  --svelte-ui-step-nav-marker-size-lg: 40px;
+  --svelte-ui-step-nav-marker-border-width: 2px;
+  --svelte-ui-step-nav-marker-text-color: var(--svelte-ui-text-on-filled-color);
+  --svelte-ui-step-nav-upcoming-marker-color: var(--svelte-ui-border-strong-color);
+  --svelte-ui-step-nav-upcoming-text-color: var(--svelte-ui-text-subtle-color);
+  --svelte-ui-step-nav-error-color: var(--svelte-ui-error-color);
+  /* ラベル・説明 */
+  --svelte-ui-step-nav-label-color: var(--svelte-ui-text-color);
+  --svelte-ui-step-nav-description-color: var(--svelte-ui-text-subtle-color);
+  --svelte-ui-step-nav-font-size-sm: 12px;
+  --svelte-ui-step-nav-font-size: 14px;
+  --svelte-ui-step-nav-font-size-lg: 16px;
+  --svelte-ui-step-nav-description-font-size: var(--svelte-ui-font-size-sm);
+  --svelte-ui-step-nav-label-line-height: 1.3;
+  /* コネクター（完了区間 / 未完了区間） */
+  --svelte-ui-step-nav-connector-color: var(--svelte-ui-border-color);
+  --svelte-ui-step-nav-connector-completed-color: var(--svelte-ui-step-nav-accent-color);
+  --svelte-ui-step-nav-connector-thickness: 2px;
+  /* 間隔 */
+  --svelte-ui-step-nav-marker-label-gap: 8px;
+  --svelte-ui-step-nav-step-gap: 8px;
+  /* 表示中リング（フォーカス表示とは別レイヤー・別色） */
+  --svelte-ui-step-nav-ring-color: color-mix(
+  	in srgb,
+  	var(--svelte-ui-step-nav-accent-color) 40%,
+  	transparent
+  );
+  --svelte-ui-step-nav-ring-width: 2px;
+  --svelte-ui-step-nav-ring-offset: 2px;
+  /* フォーカス表示（表示中リングと衝突しない色） */
+  --svelte-ui-step-nav-focus-color: var(--svelte-ui-focus-color);
   /* Input */
   --svelte-ui-input-height: var(--svelte-ui-form-height);
   --svelte-ui-input-padding: var(--svelte-ui-form-padding);
@@ -816,6 +855,18 @@
     --svelte-ui-nav-item-underline-text-color: CanvasText;
     --svelte-ui-nav-item-underline-selected-text-color: Highlight;
     --svelte-ui-nav-item-underline-bar-color: Highlight;
+    /* StepNav */
+    --svelte-ui-step-nav-accent-color: Highlight;
+    --svelte-ui-step-nav-marker-text-color: HighlightText;
+    --svelte-ui-step-nav-upcoming-marker-color: CanvasText;
+    --svelte-ui-step-nav-upcoming-text-color: CanvasText;
+    --svelte-ui-step-nav-label-color: CanvasText;
+    --svelte-ui-step-nav-description-color: CanvasText;
+    --svelte-ui-step-nav-error-color: CanvasText;
+    --svelte-ui-step-nav-connector-color: CanvasText;
+    --svelte-ui-step-nav-connector-completed-color: Highlight;
+    --svelte-ui-step-nav-ring-color: Highlight;
+    --svelte-ui-step-nav-focus-color: CanvasText;
     /* Radio */
     --svelte-ui-radio-border-color: CanvasText;
     --svelte-ui-radio-border-width: var(--svelte-ui-border-width-thick);

package/dist/assets/styles/variables.scss

@@ -407,6 +407,46 @@
 	--svelte-ui-nav-bottom-sheet-border-radius: 16px 16px 0 0;
 	--svelte-ui-nav-bottom-sheet-padding: 16px 8px;
 
+	/* StepNav */
+	/* 強調色（現在／完了）。color prop 指定時は --internal-step-nav-accent が優先。 */
+	--svelte-ui-step-nav-accent-color: var(--svelte-ui-primary-color);
+	--svelte-ui-step-nav-completed-color: var(--svelte-ui-step-nav-accent-color);
+	--svelte-ui-step-nav-current-color: var(--svelte-ui-step-nav-accent-color);
+	/* マーカー */
+	--svelte-ui-step-nav-marker-size-sm: 24px;
+	--svelte-ui-step-nav-marker-size: 32px;
+	--svelte-ui-step-nav-marker-size-lg: 40px;
+	--svelte-ui-step-nav-marker-border-width: 2px;
+	--svelte-ui-step-nav-marker-text-color: var(--svelte-ui-text-on-filled-color);
+	--svelte-ui-step-nav-upcoming-marker-color: var(--svelte-ui-border-strong-color);
+	--svelte-ui-step-nav-upcoming-text-color: var(--svelte-ui-text-subtle-color);
+	--svelte-ui-step-nav-error-color: var(--svelte-ui-error-color);
+	/* ラベル・説明 */
+	--svelte-ui-step-nav-label-color: var(--svelte-ui-text-color);
+	--svelte-ui-step-nav-description-color: var(--svelte-ui-text-subtle-color);
+	--svelte-ui-step-nav-font-size-sm: 12px;
+	--svelte-ui-step-nav-font-size: 14px;
+	--svelte-ui-step-nav-font-size-lg: 16px;
+	--svelte-ui-step-nav-description-font-size: var(--svelte-ui-font-size-sm);
+	--svelte-ui-step-nav-label-line-height: 1.3;
+	/* コネクター（完了区間 / 未完了区間） */
+	--svelte-ui-step-nav-connector-color: var(--svelte-ui-border-color);
+	--svelte-ui-step-nav-connector-completed-color: var(--svelte-ui-step-nav-accent-color);
+	--svelte-ui-step-nav-connector-thickness: 2px;
+	/* 間隔 */
+	--svelte-ui-step-nav-marker-label-gap: 8px;
+	--svelte-ui-step-nav-step-gap: 8px;
+	/* 表示中リング（フォーカス表示とは別レイヤー・別色） */
+	--svelte-ui-step-nav-ring-color: color-mix(
+		in srgb,
+		var(--svelte-ui-step-nav-accent-color) 40%,
+		transparent
+	);
+	--svelte-ui-step-nav-ring-width: 2px;
+	--svelte-ui-step-nav-ring-offset: 2px;
+	/* フォーカス表示（表示中リングと衝突しない色） */
+	--svelte-ui-step-nav-focus-color: var(--svelte-ui-focus-color);
+
 	/* Input */
 	--svelte-ui-input-height: var(--svelte-ui-form-height);
 	--svelte-ui-input-padding: var(--svelte-ui-form-padding);
@@ -898,6 +938,19 @@
 		--svelte-ui-nav-item-underline-selected-text-color: Highlight;
 		--svelte-ui-nav-item-underline-bar-color: Highlight;
 
+		/* StepNav */
+		--svelte-ui-step-nav-accent-color: Highlight;
+		--svelte-ui-step-nav-marker-text-color: HighlightText;
+		--svelte-ui-step-nav-upcoming-marker-color: CanvasText;
+		--svelte-ui-step-nav-upcoming-text-color: CanvasText;
+		--svelte-ui-step-nav-label-color: CanvasText;
+		--svelte-ui-step-nav-description-color: CanvasText;
+		--svelte-ui-step-nav-error-color: CanvasText;
+		--svelte-ui-step-nav-connector-color: CanvasText;
+		--svelte-ui-step-nav-connector-completed-color: Highlight;
+		--svelte-ui-step-nav-ring-color: Highlight;
+		--svelte-ui-step-nav-focus-color: CanvasText;
+
 		/* Radio */
 		--svelte-ui-radio-border-color: CanvasText;
 		--svelte-ui-radio-border-width: var(--svelte-ui-border-width-thick);

package/dist/components/StepNav.svelte

@@ -0,0 +1,634 @@
+<!-- StepNav.svelte -->
+
+<script lang="ts">
+	import Icon from './Icon.svelte';
+	import type { StepItem } from '../types/stepItem';
+	import type { MenuItem } from '../types/menuItem';
+	import type { ComponentSize, StepNavOrientation } from '../types/propOptions';
+	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+	import type {
+		MouseHandler,
+		FocusHandler,
+		KeyboardHandler,
+		BivariantValueHandler
+	} from '../types/callbackHandlers';
+	import { getCurrentPath, matchPath } from '../utils/navPath';
+	import { subscribeUrlChange } from '../utils/urlChange';
+	import { t } from '../i18n';
+
+	// =========================================================================
+	// Props
+	// =========================================================================
+	export type StepNavProps = {
+		// 基本プロパティ
+		/** `{ label, value?, href?, description?, icon?, error?, disabled? }[]` */
+		items: StepItem[];
+		/** 表示中ステップの値（インページ方式）。`bind:value` 対応。`item.value` 省略時は配列 index の文字列（'0','1',...）が暗黙の値になる。 */
+		value?: string;
+		/** 到達済みの最遠ステップの 0 始まりインデックス（進捗軸）。未指定時は表示中ステップ位置。 */
+		progress?: number;
+
+		// URL 方式（href 使用時）
+		/** 各 href のアクティブ判定に前置するパス。 */
+		pathPrefix?: string;
+		/** アクティブ判定をカスタムする関数。 */
+		customPathMatcher?: (currentPath: string, itemHref: string, item: StepItem) => boolean;
+		/** 自動検出した現在パスを上書き。 */
+		currentPath?: string;
+
+		// HTML属性
+		id?: string;
+
+		// スタイル/レイアウト
+		/** @default 'horizontal' */
+		orientation?: StepNavOrientation;
+		/** @default 'medium' */
+		size?: ComponentSize;
+		/** 現在／完了ステップの強調色。テーマ色より優先。 */
+		color?: string;
+		/** 番号の代わりに各ステップの icon を表示。 @default false */
+		showIcon?: boolean;
+		/** 追加インラインスタイル。 */
+		customStyle?: string;
+
+		// アイコン関連
+		iconVariant?: IconVariant;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+
+		// 状態/動作
+		/** インページ方式でステップのクリック遷移を許可。 @default false */
+		clickable?: boolean;
+		/** コンポーネント全体を無効化。 @default false */
+		disabled?: boolean;
+		/** アニメーションを抑制。 @default false */
+		reducedMotion?: boolean;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaLabelledby?: string;
+
+		// イベントハンドラ
+		/** 表示中ステップ変更（インページ方式）。 */
+		onchange?: BivariantValueHandler<string>;
+		onclick?: MouseHandler;
+		onfocus?: FocusHandler;
+		onblur?: FocusHandler;
+		onkeydown?: KeyboardHandler;
+	};
+
+	let {
+		// 基本プロパティ
+		items = [],
+		value = $bindable(''),
+		progress,
+
+		// URL 方式
+		pathPrefix = '',
+		customPathMatcher,
+		currentPath,
+
+		// HTML属性
+		id,
+
+		// スタイル/レイアウト
+		orientation = 'horizontal',
+		size = 'medium',
+		color,
+		showIcon = false,
+		customStyle = '',
+
+		// アイコン関連
+		iconVariant = 'outlined',
+		iconWeight = 300,
+		iconGrade = 0,
+		iconOpticalSize,
+
+		// 状態/動作
+		clickable = false,
+		disabled = false,
+		reducedMotion = false,
+
+		// ARIA/アクセシビリティ
+		ariaLabel,
+		ariaLabelledby,
+
+		// イベントハンドラ
+		onchange = () => {}, // No params for type inference
+		onclick = () => {}, // No params for type inference
+		onfocus = () => {}, // No params for type inference
+		onblur = () => {}, // No params for type inference
+		onkeydown = () => {} // No params for type inference
+	}: StepNavProps = $props();
+
+	// =========================================================================
+	// State & Effects
+	// =========================================================================
+	let rootEl: HTMLElement | undefined = $state();
+	let resolvedCurrentPath = $state('');
+
+	$effect(() => {
+		resolvedCurrentPath = getCurrentPath(currentPath);
+	});
+
+	$effect(() => {
+		return subscribeUrlChange(() => {
+			resolvedCurrentPath = getCurrentPath(currentPath);
+		});
+	});
+
+	// =========================================================================
+	// Derived state
+	// =========================================================================
+	const isLinkMode = $derived(items.some((item) => item.href != null));
+
+	const activeIndex = $derived.by(() => {
+		if (isLinkMode) {
+			return items.findIndex(
+				(item) =>
+					item.href != null &&
+					matchPath(
+						resolvedCurrentPath,
+						item.href,
+						item as unknown as MenuItem,
+						pathPrefix,
+						customPathMatcher as
+							| ((currentPath: string, itemHref: string, item: MenuItem) => boolean)
+							| undefined
+					)
+			);
+		}
+		return items.findIndex((item, index) => (item.value ?? String(index)) === value);
+	});
+
+	const progressIndex = $derived(progress ?? activeIndex);
+
+	const resolvedIconSize = $derived(
+		iconOpticalSize || (size === 'small' ? 16 : size === 'large' ? 24 : 20)
+	);
+
+	const rootClasses = $derived(
+		[
+			'step-nav',
+			`step-nav--${orientation}`,
+			`step-nav--${size}`,
+			disabled && 'step-nav--disabled',
+			reducedMotion && 'step-nav--no-motion'
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const rootStyle = $derived(
+		[
+			// color 指定時は強調色を上書き。リングは半透明の色なので同率で合成した値も注入する。
+			color ? `--internal-step-nav-accent:${color}` : '',
+			color ? `--internal-step-nav-ring-color:color-mix(in srgb, ${color} 40%, transparent)` : '',
+			customStyle
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+
+	// =========================================================================
+	// Helpers
+	// =========================================================================
+	type StepStatus = 'completed' | 'current' | 'upcoming';
+
+	const getStatus = (index: number): StepStatus => {
+		if (index < progressIndex) return 'completed';
+		if (index === progressIndex) return 'current';
+		return 'upcoming';
+	};
+
+	const isStepDisabled = (item: StepItem): boolean => disabled || item.disabled === true;
+
+	// 対話的なステップか（URL方式はリンク、インページ方式かつ clickable はボタン）。無効なら常に非対話。
+	const isStepInteractive = (item: StepItem): boolean =>
+		!isStepDisabled(item) && (isLinkMode || clickable);
+
+	// インページ方式でクリック遷移が有効なステップか（ボタン描画・クリック処理の判定）
+	const isStepButton = (item: StepItem): boolean => isStepInteractive(item) && !isLinkMode;
+
+	const stepClasses = (item: StepItem, status: StepStatus, isViewing: boolean): string =>
+		[
+			'step-nav__step',
+			`step-nav__step--${status}`,
+			isViewing && 'step-nav__step--viewing',
+			item.error && 'step-nav__step--error',
+			isStepDisabled(item) && 'step-nav__step--disabled'
+		]
+			.filter(Boolean)
+			.join(' ');
+
+	// スクリーンリーダー向けの状態テキスト
+	const statusText = (index: number, item: StepItem): string => {
+		const step = t('stepNav.step', { number: index + 1 });
+		const state = item.error
+			? t('stepNav.error')
+			: getStatus(index) === 'completed'
+				? t('stepNav.completed')
+				: getStatus(index) === 'current'
+					? t('stepNav.current')
+					: t('stepNav.upcoming');
+		return `${step}: ${state}`;
+	};
+
+	const handleStepClick = (item: StepItem, index: number, event: MouseEvent) => {
+		if (!isStepButton(item)) return;
+		const nextValue = item.value ?? String(index);
+		value = nextValue;
+		onchange(nextValue);
+		onclick(event);
+	};
+
+	// Arrow/Home/End はフォーカス移動の補助。Enter/Space は要素本来の活性化に委ねる。
+	const handleKeyDown = (event: KeyboardEvent) => {
+		onkeydown(event);
+
+		const focusables = Array.from(
+			rootEl?.querySelectorAll<HTMLElement>('[data-step-nav-interactive]') ?? []
+		).filter((el) => el.tabIndex !== -1 && !(el as HTMLButtonElement).disabled);
+		if (focusables.length === 0) return;
+
+		const currentIndex = focusables.indexOf(event.target as HTMLElement);
+		if (currentIndex === -1) return;
+
+		const isVertical = orientation === 'vertical';
+		const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+		const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+
+		switch (event.key) {
+			case prevKey:
+				event.preventDefault();
+				focusables[currentIndex > 0 ? currentIndex - 1 : focusables.length - 1]?.focus();
+				break;
+			case nextKey:
+				event.preventDefault();
+				focusables[currentIndex < focusables.length - 1 ? currentIndex + 1 : 0]?.focus();
+				break;
+			case 'Home':
+				event.preventDefault();
+				focusables[0]?.focus();
+				break;
+			case 'End':
+				event.preventDefault();
+				focusables[focusables.length - 1]?.focus();
+				break;
+			default:
+				break;
+		}
+	};
+</script>
+
+{#snippet marker(item: StepItem, index: number, status: StepStatus)}
+	<span class="step-nav__marker" aria-hidden="true">
+		{#if item.error}
+			<Icon
+				size={resolvedIconSize}
+				weight={iconWeight}
+				grade={iconGrade}
+				variant={iconVariant}
+				filled>error</Icon
+			>
+		{:else if status === 'completed'}
+			<Icon size={resolvedIconSize} weight={iconWeight} grade={iconGrade} variant={iconVariant}
+				>check</Icon
+			>
+		{:else if showIcon && item.icon}
+			<Icon
+				size={resolvedIconSize}
+				weight={iconWeight}
+				grade={iconGrade}
+				opticalSize={iconOpticalSize}
+				variant={iconVariant}>{item.icon}</Icon
+			>
+		{:else}
+			{index + 1}
+		{/if}
+	</span>
+{/snippet}
+
+{#snippet stepInner(item: StepItem, index: number, status: StepStatus)}
+	{@render marker(item, index, status)}
+	<span class="step-nav__body">
+		<span class="step-nav__label">{item.label}</span>
+		{#if item.description}
+			<span class="step-nav__description">{item.description}</span>
+		{/if}
+	</span>
+	<span class="sr-only">{statusText(index, item)}</span>
+{/snippet}
+
+{#if items.length > 0}
+	<nav
+		bind:this={rootEl}
+		class={rootClasses}
+		style={rootStyle || undefined}
+		{id}
+		aria-label={ariaLabelledby ? undefined : ariaLabel}
+		aria-labelledby={ariaLabelledby}
+		data-testid="step-nav"
+	>
+		<!-- キーボード補助はランドマークを汚さないよう presentation ラッパーで受ける -->
+		<div style="display: contents" role="presentation" onkeydown={handleKeyDown}>
+			<ol class="step-nav__list" role="list">
+				{#each items as item, index (index)}
+					{@const status = getStatus(index)}
+					{@const isViewing = index === activeIndex}
+					<li class="step-nav__item" role="listitem">
+						{#if !isStepInteractive(item)}
+							<!-- 非対話（URL/インページを問わず共通）: 表示のみ。無効ステップは aria-disabled を付与 -->
+							<span
+								class={stepClasses(item, status, isViewing)}
+								aria-current={isViewing ? 'step' : undefined}
+								aria-invalid={item.error ? 'true' : undefined}
+								aria-disabled={isStepDisabled(item) ? 'true' : undefined}
+								aria-label={item.ariaLabel ?? undefined}
+							>
+								{@render stepInner(item, index, status)}
+							</span>
+						{:else if isLinkMode}
+							<!-- 対話 × URL 方式: リンクとして描画し標準遷移に委ねる -->
+							<a
+								href={item.href}
+								class={stepClasses(item, status, isViewing)}
+								aria-current={isViewing ? 'step' : undefined}
+								aria-label={item.ariaLabel ?? undefined}
+								data-step-nav-interactive
+								{onfocus}
+								{onblur}
+							>
+								{@render stepInner(item, index, status)}
+							</a>
+						{:else}
+							<!-- 対話 × インページ方式: ボタンとして表示中を更新 -->
+							<button
+								type="button"
+								class={stepClasses(item, status, isViewing)}
+								aria-current={isViewing ? 'step' : undefined}
+								aria-label={item.ariaLabel ?? undefined}
+								data-step-nav-interactive
+								onclick={(event) => handleStepClick(item, index, event)}
+								{onfocus}
+								{onblur}
+							>
+								{@render stepInner(item, index, status)}
+							</button>
+						{/if}
+
+						{#if index < items.length - 1}
+							<span
+								class="step-nav__connector"
+								class:step-nav__connector--completed={index < progressIndex}
+								aria-hidden="true"
+							></span>
+						{/if}
+					</li>
+				{/each}
+			</ol>
+		</div>
+	</nav>
+{/if}
+
+<style>@charset "UTF-8";
+.step-nav {
+  --internal-step-nav-marker-size: var(--svelte-ui-step-nav-marker-size);
+  --internal-step-nav-font-size: var(--svelte-ui-step-nav-font-size);
+  display: block;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+.step-nav--small {
+  --internal-step-nav-marker-size: var(--svelte-ui-step-nav-marker-size-sm);
+  --internal-step-nav-font-size: var(--svelte-ui-step-nav-font-size-sm);
+}
+
+.step-nav--large {
+  --internal-step-nav-marker-size: var(--svelte-ui-step-nav-marker-size-lg);
+  --internal-step-nav-font-size: var(--svelte-ui-step-nav-font-size-lg);
+}
+
+.step-nav__list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.step-nav__item {
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+}
+
+/* ---- 対話/非対話ステップ共通 ---- */
+.step-nav__step {
+  display: flex;
+  align-items: center;
+  gap: var(--svelte-ui-step-nav-marker-label-gap);
+  position: relative;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: var(--internal-step-nav-font-size);
+  color: var(--svelte-ui-step-nav-label-color);
+  text-align: left;
+  text-decoration: none;
+  cursor: default;
+  box-sizing: border-box;
+}
+
+a.step-nav__step,
+button.step-nav__step {
+  cursor: pointer;
+}
+
+.step-nav__step--disabled {
+  opacity: var(--svelte-ui-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.step-nav__step:focus-visible {
+  outline: var(--svelte-ui-focus-outline-outer, 2px solid);
+  outline-color: var(--svelte-ui-step-nav-focus-color);
+  outline-offset: var(--svelte-ui-focus-outline-offset-outer, 2px);
+  border-radius: var(--svelte-ui-border-radius, 4px);
+}
+
+/* ---- マーカー ---- */
+.step-nav__marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: var(--internal-step-nav-marker-size);
+  height: var(--internal-step-nav-marker-size);
+  border-radius: 50%;
+  font-size: calc(var(--internal-step-nav-font-size) * 0.95);
+  font-weight: bold;
+  line-height: 1;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+  transition-property: background-color, border-color, color;
+  transition-duration: var(--svelte-ui-transition-duration, 0.2s);
+  transition-timing-function: ease;
+}
+
+/* upcoming: 淡いアウトライン + 番号 */
+.step-nav__step--upcoming .step-nav__marker {
+  background: var(--svelte-ui-surface-color);
+  color: var(--svelte-ui-step-nav-upcoming-text-color);
+  border: var(--svelte-ui-step-nav-marker-border-width) solid var(--svelte-ui-step-nav-upcoming-marker-color);
+}
+
+/* current: primary アウトライン + 番号 */
+.step-nav__step--current .step-nav__marker {
+  background: var(--svelte-ui-surface-color);
+  color: var(--internal-step-nav-accent, var(--svelte-ui-step-nav-accent-color));
+  border: var(--svelte-ui-step-nav-marker-border-width) solid var(--internal-step-nav-accent, var(--svelte-ui-step-nav-accent-color));
+}
+
+/* completed: primary 塗り + check */
+.step-nav__step--completed .step-nav__marker {
+  background: var(--internal-step-nav-accent, var(--svelte-ui-step-nav-accent-color));
+  color: var(--svelte-ui-step-nav-marker-text-color);
+  border: var(--svelte-ui-step-nav-marker-border-width) solid var(--internal-step-nav-accent, var(--svelte-ui-step-nav-accent-color));
+}
+
+/* error: error 色 + error アイコン（進捗軸を上書き） */
+.step-nav__step--error .step-nav__marker {
+  background: var(--svelte-ui-surface-color);
+  color: var(--svelte-ui-step-nav-error-color);
+  border: var(--svelte-ui-step-nav-marker-border-width) solid var(--svelte-ui-step-nav-error-color);
+}
+
+/* 表示中: 外周リング（フォーカス表示とは別レイヤー・別色） */
+.step-nav__step--viewing .step-nav__marker {
+  box-shadow: 0 0 0 var(--svelte-ui-step-nav-ring-offset) var(--svelte-ui-surface-color), 0 0 0 calc(var(--svelte-ui-step-nav-ring-offset) + var(--svelte-ui-step-nav-ring-width)) var(--internal-step-nav-ring-color, var(--svelte-ui-step-nav-ring-color));
+}
+
+/* ---- ラベル/説明 ---- */
+.step-nav__body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.step-nav__label {
+  line-height: var(--svelte-ui-step-nav-label-line-height);
+  white-space: nowrap;
+}
+
+/* ラベル色の優先順位（同一詳細度のためソース順で解決）: upcoming < viewing < error */
+.step-nav__step--upcoming .step-nav__label {
+  color: var(--svelte-ui-step-nav-upcoming-text-color);
+}
+
+/* 表示中: 強調色 + 太字（Nav の選択中＝primary 文字色と同じ規則。color prop で上書き可） */
+.step-nav__step--viewing .step-nav__label {
+  color: var(--internal-step-nav-accent, var(--svelte-ui-step-nav-accent-color));
+  font-weight: bold;
+}
+
+.step-nav__step--error .step-nav__label {
+  color: var(--svelte-ui-step-nav-error-color);
+}
+
+.step-nav__description {
+  font-size: var(--svelte-ui-step-nav-description-font-size);
+  color: var(--svelte-ui-step-nav-description-color);
+  line-height: var(--svelte-ui-step-nav-label-line-height);
+}
+
+/* ---- コネクター ---- */
+.step-nav__connector {
+  position: absolute;
+  background: var(--svelte-ui-step-nav-connector-color);
+}
+
+.step-nav__connector--completed {
+  background: var(--internal-step-nav-accent, var(--svelte-ui-step-nav-connector-completed-color));
+}
+
+/* ======================= 水平レイアウト ======================= */
+.step-nav--horizontal .step-nav__list {
+  flex-direction: row;
+  overflow-x: auto;
+  overscroll-behavior: contain;
+  /* overflow-x を指定すると overflow-y も auto に計算され、マーカー上端の
+     外周リング／フォーカス表示が切れる。上下に余白を確保して回避する。 */
+  padding-block: max(var(--svelte-ui-step-nav-ring-offset) + var(--svelte-ui-step-nav-ring-width), var(--svelte-ui-focus-outline-offset-outer, 2px) + 2px);
+}
+
+.step-nav--horizontal .step-nav__item {
+  /* 等幅カラムにしてマーカー中心を等間隔に揃える（コネクターの整列に必須）。
+     min-width をフロアにして、ステップが多いときは横スクロールで収める（Req 5.4）。 */
+  flex: 1 1 0;
+  min-width: calc(var(--internal-step-nav-marker-size) * 2.5);
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 0 var(--svelte-ui-step-nav-step-gap);
+}
+
+.step-nav--horizontal .step-nav__step {
+  flex-direction: column;
+  align-items: center;
+}
+
+.step-nav--horizontal .step-nav__body {
+  align-items: center;
+  text-align: center;
+}
+
+/* 各ステップの右側に、次のマーカーへ向けてコネクターを描画（等幅前提で 100% 幅が隣の中心に一致） */
+.step-nav--horizontal .step-nav__connector {
+  top: calc(var(--internal-step-nav-marker-size) / 2);
+  transform: translateY(-50%);
+  left: calc(50% + var(--internal-step-nav-marker-size) / 2);
+  width: calc(100% - var(--internal-step-nav-marker-size));
+  height: var(--svelte-ui-step-nav-connector-thickness);
+}
+
+/* ======================= 垂直レイアウト ======================= */
+.step-nav--vertical .step-nav__list {
+  flex-direction: column;
+}
+
+.step-nav--vertical .step-nav__item {
+  flex-direction: row;
+  align-items: flex-start;
+  padding: var(--svelte-ui-step-nav-step-gap) 0;
+}
+
+.step-nav--vertical .step-nav__step {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+/* 各ステップの下側に、次のマーカーへ向けてコネクターを描画。
+   縦 padding（step-gap）ぶんマーカーが下がっているので、開始位置に加味する（自身の高さ基準で可変高さでも整合）。 */
+.step-nav--vertical .step-nav__connector {
+  left: calc(var(--internal-step-nav-marker-size) / 2);
+  transform: translateX(-50%);
+  top: calc(var(--internal-step-nav-marker-size) + var(--svelte-ui-step-nav-step-gap));
+  height: calc(100% - var(--internal-step-nav-marker-size));
+  width: var(--svelte-ui-step-nav-connector-thickness);
+}
+
+/* ---- モーション抑制 ---- */
+.step-nav--no-motion .step-nav__marker {
+  transition-duration: 0.01s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .step-nav__marker {
+    transition-duration: 0.01s;
+  }
+}</style>

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

@@ -0,0 +1,50 @@
+import type { StepItem } from '../types/stepItem';
+import type { ComponentSize, StepNavOrientation } from '../types/propOptions';
+import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+import type { MouseHandler, FocusHandler, KeyboardHandler, BivariantValueHandler } from '../types/callbackHandlers';
+export type StepNavProps = {
+    /** `{ label, value?, href?, description?, icon?, error?, disabled? }[]` */
+    items: StepItem[];
+    /** 表示中ステップの値（インページ方式）。`bind:value` 対応。`item.value` 省略時は配列 index の文字列（'0','1',...）が暗黙の値になる。 */
+    value?: string;
+    /** 到達済みの最遠ステップの 0 始まりインデックス（進捗軸）。未指定時は表示中ステップ位置。 */
+    progress?: number;
+    /** 各 href のアクティブ判定に前置するパス。 */
+    pathPrefix?: string;
+    /** アクティブ判定をカスタムする関数。 */
+    customPathMatcher?: (currentPath: string, itemHref: string, item: StepItem) => boolean;
+    /** 自動検出した現在パスを上書き。 */
+    currentPath?: string;
+    id?: string;
+    /** @default 'horizontal' */
+    orientation?: StepNavOrientation;
+    /** @default 'medium' */
+    size?: ComponentSize;
+    /** 現在／完了ステップの強調色。テーマ色より優先。 */
+    color?: string;
+    /** 番号の代わりに各ステップの icon を表示。 @default false */
+    showIcon?: boolean;
+    /** 追加インラインスタイル。 */
+    customStyle?: string;
+    iconVariant?: IconVariant;
+    iconWeight?: IconWeight;
+    iconGrade?: IconGrade;
+    iconOpticalSize?: IconOpticalSize;
+    /** インページ方式でステップのクリック遷移を許可。 @default false */
+    clickable?: boolean;
+    /** コンポーネント全体を無効化。 @default false */
+    disabled?: boolean;
+    /** アニメーションを抑制。 @default false */
+    reducedMotion?: boolean;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    /** 表示中ステップ変更（インページ方式）。 */
+    onchange?: BivariantValueHandler<string>;
+    onclick?: MouseHandler;
+    onfocus?: FocusHandler;
+    onblur?: FocusHandler;
+    onkeydown?: KeyboardHandler;
+};
+declare const StepNav: import("svelte").Component<StepNavProps, {}, "value">;
+type StepNav = ReturnType<typeof StepNav>;
+export default StepNav;

package/dist/i18n/index.d.ts

@@ -58,6 +58,13 @@ export declare const TRANSLATIONS: {
             readonly goToPage: "Go to page {{page}}";
             readonly ellipsis: "Omitted pages";
         };
+        readonly stepNav: {
+            readonly step: "Step {{number}}";
+            readonly completed: "Completed";
+            readonly current: "Current step";
+            readonly upcoming: "Not started";
+            readonly error: "Error";
+        };
     };
     readonly ja: {
         readonly datepicker: {
@@ -117,6 +124,13 @@ export declare const TRANSLATIONS: {
             readonly goToPage: "{{page}}ページ目へ移動";
             readonly ellipsis: "省略されたページ";
         };
+        readonly stepNav: {
+            readonly step: "ステップ{{number}}";
+            readonly completed: "完了";
+            readonly current: "現在のステップ";
+            readonly upcoming: "未到達";
+            readonly error: "エラー";
+        };
     };
     readonly fr: {
         readonly datepicker: {
@@ -176,6 +190,13 @@ export declare const TRANSLATIONS: {
             readonly goToPage: "Aller à la page {{page}}";
             readonly ellipsis: "Pages omises";
         };
+        readonly stepNav: {
+            readonly step: "Étape {{number}}";
+            readonly completed: "Terminé";
+            readonly current: "Étape actuelle";
+            readonly upcoming: "Non commencé";
+            readonly error: "Erreur";
+        };
     };
     readonly de: {
         readonly datepicker: {
@@ -235,6 +256,13 @@ export declare const TRANSLATIONS: {
             readonly goToPage: "Zu Seite {{page}} gehen";
             readonly ellipsis: "Ausgelassene Seiten";
         };
+        readonly stepNav: {
+            readonly step: "Schritt {{number}}";
+            readonly completed: "Abgeschlossen";
+            readonly current: "Aktueller Schritt";
+            readonly upcoming: "Noch nicht begonnen";
+            readonly error: "Fehler";
+        };
     };
     readonly es: {
         readonly datepicker: {
@@ -294,6 +322,13 @@ export declare const TRANSLATIONS: {
             readonly goToPage: "Ir a la página {{page}}";
             readonly ellipsis: "Páginas omitidas";
         };
+        readonly stepNav: {
+            readonly step: "Paso {{number}}";
+            readonly completed: "Completado";
+            readonly current: "Paso actual";
+            readonly upcoming: "No iniciado";
+            readonly error: "Error";
+        };
     };
     readonly 'zh-cn': {
         readonly datepicker: {
@@ -353,6 +388,13 @@ export declare const TRANSLATIONS: {
             readonly goToPage: "转到第{{page}}页";
             readonly ellipsis: "省略的页面";
         };
+        readonly stepNav: {
+            readonly step: "第{{number}}步";
+            readonly completed: "已完成";
+            readonly current: "当前步骤";
+            readonly upcoming: "未开始";
+            readonly error: "错误";
+        };
     };
 };
 type NestedKeyOf<T> = T extends object ? {

package/dist/i18n/locales/de.d.ts

@@ -56,4 +56,11 @@ export declare const de: {
         readonly goToPage: "Zu Seite {{page}} gehen";
         readonly ellipsis: "Ausgelassene Seiten";
     };
+    readonly stepNav: {
+        readonly step: "Schritt {{number}}";
+        readonly completed: "Abgeschlossen";
+        readonly current: "Aktueller Schritt";
+        readonly upcoming: "Noch nicht begonnen";
+        readonly error: "Fehler";
+    };
 };

package/dist/i18n/locales/de.js

@@ -55,5 +55,12 @@ export const de = {
         nextPage: 'Zur nächsten Seite gehen',
         goToPage: 'Zu Seite {{page}} gehen',
         ellipsis: 'Ausgelassene Seiten'
+    },
+    stepNav: {
+        step: 'Schritt {{number}}',
+        completed: 'Abgeschlossen',
+        current: 'Aktueller Schritt',
+        upcoming: 'Noch nicht begonnen',
+        error: 'Fehler'
     }
 };

package/dist/i18n/locales/en.d.ts

@@ -56,4 +56,11 @@ export declare const en: {
         readonly goToPage: "Go to page {{page}}";
         readonly ellipsis: "Omitted pages";
     };
+    readonly stepNav: {
+        readonly step: "Step {{number}}";
+        readonly completed: "Completed";
+        readonly current: "Current step";
+        readonly upcoming: "Not started";
+        readonly error: "Error";
+    };
 };

package/dist/i18n/locales/en.js

@@ -55,5 +55,12 @@ export const en = {
         nextPage: 'Go to next page',
         goToPage: 'Go to page {{page}}',
         ellipsis: 'Omitted pages'
+    },
+    stepNav: {
+        step: 'Step {{number}}',
+        completed: 'Completed',
+        current: 'Current step',
+        upcoming: 'Not started',
+        error: 'Error'
     }
 };

package/dist/i18n/locales/es.d.ts

@@ -56,4 +56,11 @@ export declare const es: {
         readonly goToPage: "Ir a la página {{page}}";
         readonly ellipsis: "Páginas omitidas";
     };
+    readonly stepNav: {
+        readonly step: "Paso {{number}}";
+        readonly completed: "Completado";
+        readonly current: "Paso actual";
+        readonly upcoming: "No iniciado";
+        readonly error: "Error";
+    };
 };

package/dist/i18n/locales/es.js

@@ -55,5 +55,12 @@ export const es = {
         nextPage: 'Ir a la página siguiente',
         goToPage: 'Ir a la página {{page}}',
         ellipsis: 'Páginas omitidas'
+    },
+    stepNav: {
+        step: 'Paso {{number}}',
+        completed: 'Completado',
+        current: 'Paso actual',
+        upcoming: 'No iniciado',
+        error: 'Error'
     }
 };

package/dist/i18n/locales/fr.d.ts

@@ -56,4 +56,11 @@ export declare const fr: {
         readonly goToPage: "Aller à la page {{page}}";
         readonly ellipsis: "Pages omises";
     };
+    readonly stepNav: {
+        readonly step: "Étape {{number}}";
+        readonly completed: "Terminé";
+        readonly current: "Étape actuelle";
+        readonly upcoming: "Non commencé";
+        readonly error: "Erreur";
+    };
 };

package/dist/i18n/locales/fr.js

@@ -55,5 +55,12 @@ export const fr = {
         nextPage: 'Aller à la page suivante',
         goToPage: 'Aller à la page {{page}}',
         ellipsis: 'Pages omises'
+    },
+    stepNav: {
+        step: 'Étape {{number}}',
+        completed: 'Terminé',
+        current: 'Étape actuelle',
+        upcoming: 'Non commencé',
+        error: 'Erreur'
     }
 };

package/dist/i18n/locales/ja.d.ts

@@ -56,4 +56,11 @@ export declare const ja: {
         readonly goToPage: "{{page}}ページ目へ移動";
         readonly ellipsis: "省略されたページ";
     };
+    readonly stepNav: {
+        readonly step: "ステップ{{number}}";
+        readonly completed: "完了";
+        readonly current: "現在のステップ";
+        readonly upcoming: "未到達";
+        readonly error: "エラー";
+    };
 };

package/dist/i18n/locales/ja.js

@@ -55,5 +55,12 @@ export const ja = {
         nextPage: '次のページへ移動',
         goToPage: '{{page}}ページ目へ移動',
         ellipsis: '省略されたページ'
+    },
+    stepNav: {
+        step: 'ステップ{{number}}',
+        completed: '完了',
+        current: '現在のステップ',
+        upcoming: '未到達',
+        error: 'エラー'
     }
 };

package/dist/i18n/locales/zh-cn.d.ts

@@ -56,4 +56,11 @@ export declare const zhCn: {
         readonly goToPage: "转到第{{page}}页";
         readonly ellipsis: "省略的页面";
     };
+    readonly stepNav: {
+        readonly step: "第{{number}}步";
+        readonly completed: "已完成";
+        readonly current: "当前步骤";
+        readonly upcoming: "未开始";
+        readonly error: "错误";
+    };
 };

package/dist/i18n/locales/zh-cn.js

@@ -55,5 +55,12 @@ export const zhCn = {
         nextPage: '转到下一页',
         goToPage: '转到第{{page}}页',
         ellipsis: '省略的页面'
+    },
+    stepNav: {
+        step: '第{{number}}步',
+        completed: '已完成',
+        current: '当前步骤',
+        upcoming: '未开始',
+        error: '错误'
     }
 };

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export { default as Radio } from './components/Radio.svelte';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as SegmentedControl } from './components/SegmentedControl.svelte';
+export { default as StepNav } from './components/StepNav.svelte';
 export { default as Slider } from './components/Slider.svelte';
 export { default as Snackbar } from './components/Snackbar.svelte';
 export { default as SnackbarItem } from './components/SnackbarItem.svelte';
@@ -68,6 +69,7 @@ export type { RadioProps } from './components/Radio.svelte';
 export type { RadioGroupProps } from './components/RadioGroup.svelte';
 export type { SelectProps } from './components/Select.svelte';
 export type { SegmentedControlProps } from './components/SegmentedControl.svelte';
+export type { StepNavProps } from './components/StepNav.svelte';
 export type { SliderProps } from './components/Slider.svelte';
 export type { SnackbarProps } from './components/Snackbar.svelte';
 export type { SnackbarItemProps } from './components/SnackbarItem.svelte';
@@ -83,8 +85,9 @@ export type { NavProps } from './components/Nav.svelte';
 export type { NavItemProps, NavItemSelectedVariant } from './components/NavItem.svelte';
 export type { TabProps } from './components/Tab.svelte';
 export type { TextareaProps } from './components/Textarea.svelte';
-export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, ComponentSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle, NavVariant, ChildrenVariant } from './types/propOptions';
+export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, ComponentSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle, NavVariant, ChildrenVariant, StepNavOrientation } from './types/propOptions';
 export type { MenuItem } from './types/menuItem';
+export type { StepItem } from './types/stepItem';
 export type { SegmentedControlItem } from './types/segmentedControlItem';
 export type { Option, OptionValue } from './types/options';
 export type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from './types/icon';

package/dist/index.js

@@ -26,6 +26,7 @@ export { default as Radio } from './components/Radio.svelte';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as SegmentedControl } from './components/SegmentedControl.svelte';
+export { default as StepNav } from './components/StepNav.svelte';
 export { default as Slider } from './components/Slider.svelte';
 export { default as Snackbar } from './components/Snackbar.svelte';
 export { default as SnackbarItem } from './components/SnackbarItem.svelte';

package/dist/types/propOptions.d.ts

@@ -62,6 +62,11 @@ export type FocusStyle = 'background' | 'outline' | 'none';
  * Used by Nav component
  */
 export type NavVariant = 'vertical' | 'horizontal' | 'mobile';
+/**
+ * StepNav orientation type
+ * Used by StepNav component
+ */
+export type StepNavOrientation = 'horizontal' | 'vertical';
 /**
  * Display variant for Nav hierarchical (children) menus.
  * - `popup`: child items appear in a floating panel (all variants)

package/dist/types/stepItem.d.ts

@@ -0,0 +1,22 @@
+export type StepItem = {
+    /** 表示ラベル。 */
+    label: string;
+    /** インページ方式での識別子（value 制御時に一致判定へ使用）。省略時は配列 index の文字列（`String(index)`）がフォールバックに使われる。 */
+    value?: string;
+    /** URL 方式でのリンク先。指定があると URL 方式として扱われる。 */
+    href?: string;
+    /** ラベル下の補足説明。 */
+    description?: string;
+    /** 番号の代わりに表示するアイコン名（Material Symbols）。 */
+    icon?: string;
+    /** エラー状態。進捗軸の状態に上書きしてエラー表示する。 */
+    error?: boolean;
+    /** 個別無効化。 */
+    disabled?: boolean;
+    /** URL 方式の追加マッチパス（`matchPath` 準拠）。 */
+    matchingPath?: string[];
+    /** URL 方式の完全一致指定。 */
+    strictMatch?: boolean;
+    /** アクセシブルネーム（アイコンのみ等）。 */
+    ariaLabel?: string;
+};

package/dist/types/stepItem.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@14ch/svelte-ui",
 	"description": "Modern Svelte UI components library with TypeScript support",
 	"private": false,
-	"version": "0.0.49",
+	"version": "0.0.50",
 	"type": "module",
 	"keywords": [
 		"svelte",