@14ch/svelte-ui 0.0.50 → 0.0.52

package/dist/components/Nav.svelte

@@ -16,6 +16,8 @@
 		// 基本プロパティ
 		/** `{ label, href, icon?, children?, disabled? }[]` */
 		navItems?: MenuItem[];
+		/** `navItems` のエイリアス。両方指定された場合は `navItems` が優先。 */
+		items?: MenuItem[];
 		/** Layout variant. @default 'horizontal' */
 		variant?: NavVariant;
 		/** Prepended to each item's href for active-state matching. */
@@ -65,7 +67,8 @@
 
 	let {
 		// 基本プロパティ
-		navItems = [],
+		navItems: navItemsProp,
+		items: itemsAlias,
 		variant = 'horizontal',
 		pathPrefix = '',
 		customPathMatcher,
@@ -103,6 +106,9 @@
 		ariaLabelledby
 	}: NavProps = $props();
 
+	// navItems（正式名）を優先し、items（エイリアス）へフォールバック
+	const navItems = $derived<MenuItem[]>(navItemsProp ?? itemsAlias ?? []);
+
 	let resolvedCurrentPath = $state('');
 	let navEl: HTMLElement | undefined = $state();
 	let subBarEl: HTMLElement | undefined = $state();

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

@@ -5,6 +5,8 @@ import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../typ
 export type NavProps = {
     /** `{ label, href, icon?, children?, disabled? }[]` */
     navItems?: MenuItem[];
+    /** `navItems` のエイリアス。両方指定された場合は `navItems` が優先。 */
+    items?: MenuItem[];
     /** Layout variant. @default 'horizontal' */
     variant?: NavVariant;
     /** Prepended to each item's href for active-state matching. */

package/dist/components/StepNav.svelte

@@ -21,12 +21,17 @@
 	// =========================================================================
 	export type StepNavProps = {
 		// 基本プロパティ
-		/** `{ label, value?, href?, description?, icon?, error?, disabled? }[]` */
-		items: StepItem[];
+		/** ステップ配列（正式名称）。`{ label, value?, href?, description?, icon?, error?, disabled? }[]` */
+		stepItems?: StepItem[];
+		/** `stepItems` のエイリアス。両方指定された場合は `stepItems` が優先。 */
+		items?: StepItem[];
 		/** 表示中ステップの値（インページ方式）。`bind:value` 対応。`item.value` 省略時は配列 index の文字列（'0','1',...）が暗黙の値になる。 */
 		value?: string;
-		/** 到達済みの最遠ステップの 0 始まりインデックス（進捗軸）。未指定時は表示中ステップ位置。 */
-		progress?: number;
+		/**
+		 * 到達済みの最遠ステップ（進捗軸）。未指定時は表示中ステップ位置。
+		 * 数値なら 0 始まりのインデックス、文字列ならアイテムのユニークキー（`value`。省略時は配列 index の文字列）で指定する。URL方式でも `value` をキーに使う。
+		 */
+		progress?: number | string;
 
 		// URL 方式（href 使用時）
 		/** 各 href のアクティブ判定に前置するパス。 */
@@ -58,7 +63,7 @@
 		iconOpticalSize?: IconOpticalSize;
 
 		// 状態/動作
-		/** インページ方式でステップのクリック遷移を許可。 @default false */
+		/** インページ方式でステップのクリック遷移を許可。到達済み（progress 以下）のステップのみクリック可能。 @default false */
 		clickable?: boolean;
 		/** コンポーネント全体を無効化。 @default false */
 		disabled?: boolean;
@@ -80,7 +85,8 @@
 
 	let {
 		// 基本プロパティ
-		items = [],
+		stepItems,
+		items: itemsAlias,
 		value = $bindable(''),
 		progress,
 
@@ -141,6 +147,9 @@
 	// =========================================================================
 	// Derived state
 	// =========================================================================
+	// stepItems（正式名）を優先し、items（エイリアス）へフォールバック
+	const items = $derived<StepItem[]>(stepItems ?? itemsAlias ?? []);
+
 	const isLinkMode = $derived(items.some((item) => item.href != null));
 
 	const activeIndex = $derived.by(() => {
@@ -162,7 +171,12 @@
 		return items.findIndex((item, index) => (item.value ?? String(index)) === value);
 	});
 
-	const progressIndex = $derived(progress ?? activeIndex);
+	// progress を数値インデックスへ解決する。文字列ならアイテムのユニークキー（value）で一致判定。未指定なら表示中位置。
+	const progressIndex = $derived.by(() => {
+		if (progress == null) return activeIndex;
+		if (typeof progress === 'number') return progress;
+		return items.findIndex((item, index) => (item.value ?? String(index)) === progress);
+	});
 
 	const resolvedIconSize = $derived(
 		iconOpticalSize || (size === 'small' ? 16 : size === 'large' ? 24 : 20)
@@ -204,12 +218,10 @@
 
 	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;
+	// 対話的なステップか。到達済み（index <= progressIndex）のステップのみ対話可能。
+	// URL方式はリンク、インページ方式は clickable のときボタン。未到達の先のステップへは飛べない。無効なら常に非対話。
+	const isStepInteractive = (item: StepItem, index: number): boolean =>
+		!isStepDisabled(item) && index <= progressIndex && (isLinkMode || clickable);
 
 	const stepClasses = (item: StepItem, status: StepStatus, isViewing: boolean): string =>
 		[
@@ -235,8 +247,8 @@
 		return `${step}: ${state}`;
 	};
 
+	// クリック可能なインページボタンからのみ呼ばれる（未到達/無効/URL/非clickable は非対話要素で描画される）
 	const handleStepClick = (item: StepItem, index: number, event: MouseEvent) => {
-		if (!isStepButton(item)) return;
 		const nextValue = item.value ?? String(index);
 		value = nextValue;
 		onchange(nextValue);
@@ -338,7 +350,7 @@
 					{@const status = getStatus(index)}
 					{@const isViewing = index === activeIndex}
 					<li class="step-nav__item" role="listitem">
-						{#if !isStepInteractive(item)}
+						{#if !isStepInteractive(item, index)}
 							<!-- 非対話（URL/インページを問わず共通）: 表示のみ。無効ステップは aria-disabled を付与 -->
 							<span
 								class={stepClasses(item, status, isViewing)}

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

@@ -3,12 +3,17 @@ 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[];
+    /** ステップ配列（正式名称）。`{ label, value?, href?, description?, icon?, error?, disabled? }[]` */
+    stepItems?: StepItem[];
+    /** `stepItems` のエイリアス。両方指定された場合は `stepItems` が優先。 */
+    items?: StepItem[];
     /** 表示中ステップの値（インページ方式）。`bind:value` 対応。`item.value` 省略時は配列 index の文字列（'0','1',...）が暗黙の値になる。 */
     value?: string;
-    /** 到達済みの最遠ステップの 0 始まりインデックス（進捗軸）。未指定時は表示中ステップ位置。 */
-    progress?: number;
+    /**
+     * 到達済みの最遠ステップ（進捗軸）。未指定時は表示中ステップ位置。
+     * 数値なら 0 始まりのインデックス、文字列ならアイテムのユニークキー（`value`。省略時は配列 index の文字列）で指定する。URL方式でも `value` をキーに使う。
+     */
+    progress?: number | string;
     /** 各 href のアクティブ判定に前置するパス。 */
     pathPrefix?: string;
     /** アクティブ判定をカスタムする関数。 */
@@ -30,7 +35,7 @@ export type StepNavProps = {
     iconWeight?: IconWeight;
     iconGrade?: IconGrade;
     iconOpticalSize?: IconOpticalSize;
-    /** インページ方式でステップのクリック遷移を許可。 @default false */
+    /** インページ方式でステップのクリック遷移を許可。到達済み（progress 以下）のステップのみクリック可能。 @default false */
     clickable?: boolean;
     /** コンポーネント全体を無効化。 @default false */
     disabled?: boolean;

package/dist/components/Tab.svelte

@@ -12,6 +12,8 @@
 		// 基本プロパティ
 		/** `{ label, href, icon?, disabled? }[]` */
 		tabItems?: MenuItem[];
+		/** `tabItems` のエイリアス。両方指定された場合は `tabItems` が優先。 */
+		items?: MenuItem[];
 		/** Prepended to each item's href for active-state matching. */
 		pathPrefix?: string;
 		/** Custom function to determine if an item is active. */
@@ -52,7 +54,8 @@
 
 	let {
 		// 基本プロパティ
-		tabItems = [],
+		tabItems: tabItemsProp,
+		items: itemsAlias,
 		pathPrefix = '',
 		customPathMatcher,
 		currentPath,
@@ -80,6 +83,9 @@
 		ariaLabel = 'Tabs',
 		ariaLabelledby
 	}: TabProps = $props();
+
+	// tabItems（正式名）を優先し、items（エイリアス）へフォールバック
+	const tabItems = $derived<MenuItem[]>(tabItemsProp ?? itemsAlias ?? []);
 </script>
 
 <div class="tab" data-testid="tab">

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

@@ -3,6 +3,8 @@ import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../typ
 export type TabProps = {
     /** `{ label, href, icon?, disabled? }[]` */
     tabItems?: MenuItem[];
+    /** `tabItems` のエイリアス。両方指定された場合は `tabItems` が優先。 */
+    items?: MenuItem[];
     /** Prepended to each item's href for active-state matching. */
     pathPrefix?: string;
     /** Custom function to determine if an item is active. */

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.50",
+	"version": "0.0.52",
 	"type": "module",
 	"keywords": [
 		"svelte",