@14ch/svelte-ui 0.0.51 → 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 のアクティブ判定に前置するパス。 */
@@ -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)

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;
     /** アクティブ判定をカスタムする関数。 */

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