@14ch/svelte-ui 0.0.51 → 0.0.53

package/dist/components/Button.svelte

@@ -11,7 +11,7 @@
 		TouchHandler,
 		PointerHandler
 	} from '../types/callbackHandlers';
-	import type { ButtonVariant, ButtonSize } from '../types/propOptions';
+	import type { ButtonVariant, ButtonSize, IconPosition } from '../types/propOptions';
 	import Icon from './Icon.svelte';
 	import LoadingSpinner from './LoadingSpinner.svelte';
 	import { getStyleFromNumber } from '../utils/style';
@@ -46,6 +46,8 @@
 		// アイコン関連
 		/** Material Symbols icon name. */
 		icon?: string;
+		/** Icon position relative to the label. @default 'left' */
+		iconPosition?: IconPosition;
 		iconFilled?: boolean;
 		iconWeight?: IconWeight;
 		iconGrade?: IconGrade;
@@ -121,6 +123,7 @@
 
 		// アイコン関連
 		icon = '',
+		iconPosition = 'left',
 		iconFilled = false,
 		iconWeight = 300,
 		iconGrade = 0,
@@ -368,19 +371,23 @@
 	data-testid="button"
 	{...restProps}
 >
+	{#snippet iconContent()}
+		<Icon
+			filled={iconFilled}
+			weight={iconWeight}
+			grade={iconGrade}
+			opticalSize={iconOpticalSize}
+			variant={iconVariant}>{icon}</Icon
+		>
+	{/snippet}
+
 	{#if loading}
 		<div class="button__loading">
 			<LoadingSpinner size={18} strokeWidth={2} color="currentColor" />
 		</div>
-	{:else if icon}
-		<div class="button__icon">
-			<Icon
-				filled={iconFilled}
-				weight={iconWeight}
-				grade={iconGrade}
-				opticalSize={iconOpticalSize}
-				variant={iconVariant}>{icon}</Icon
-			>
+	{:else if icon && iconPosition === 'left'}
+		<div class="button__icon button__icon--left">
+			{@render iconContent()}
 		</div>
 	{/if}
 
@@ -388,6 +395,12 @@
 		{@render children()}
 	</div>
 
+	{#if icon && iconPosition === 'right' && !loading}
+		<div class="button__icon button__icon--right">
+			{@render iconContent()}
+		</div>
+	{/if}
+
 	{#if popup && !loading}
 		<div class="button__popup-icon">
 			<Icon>arrow_drop_down</Icon>
@@ -519,12 +532,24 @@
 	}
 
 	.button__icon {
-		margin: -12px 0 -12px -4px;
+		margin: -12px 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
 
+	.button__icon--left {
+		margin-left: -4px;
+	}
+
+	.button__icon--right {
+		margin-right: -4px;
+	}
+
+	.button--align-left .button__icon--right {
+		margin-left: auto;
+	}
+
 	.button__label {
 		display: block;
 		width: auto;
@@ -562,10 +587,14 @@
 	}
 
 	/* Size-specific adjustments */
-	.button--small .button__icon {
+	.button--small .button__icon--left {
 		margin-left: -2px;
 	}
 
+	.button--small .button__icon--right {
+		margin-right: -2px;
+	}
+
 	.button--small .button__popup-icon {
 		margin-right: -2px;
 	}
@@ -575,10 +604,14 @@
 		margin-right: -2px;
 	}
 
-	.button--large .button__icon {
+	.button--large .button__icon--left {
 		margin-left: -6px;
 	}
 
+	.button--large .button__icon--right {
+		margin-right: -6px;
+	}
+
 	.button--large .button__popup-icon {
 		margin-right: -6px;
 	}

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

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
-import type { ButtonVariant, ButtonSize } from '../types/propOptions';
+import type { ButtonVariant, ButtonSize, IconPosition } from '../types/propOptions';
 export type ButtonProps = {
     children: Snippet;
     /** @default 'button' */
@@ -23,6 +23,8 @@ export type ButtonProps = {
     popup?: boolean;
     /** Material Symbols icon name. */
     icon?: string;
+    /** Icon position relative to the label. @default 'left' */
+    iconPosition?: IconPosition;
     iconFilled?: boolean;
     iconWeight?: IconWeight;
     iconGrade?: IconGrade;

package/dist/components/Dialog.svelte

@@ -238,7 +238,7 @@
 
 .dialog--scrollable .dialog__header {
   margin-bottom: 0;
-  border-bottom: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
+  border-bottom: solid 1px var(--svelte-ui-border-color);
 }
 
 .dialog--scrollable .dialog__body {
@@ -248,5 +248,5 @@
 }
 
 .dialog--scrollable .dialog__footer {
-  border-top: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
+  border-top: solid 1px var(--svelte-ui-border-color);
 }</style>

package/dist/components/Fab.svelte

@@ -11,7 +11,7 @@
 		TouchHandler,
 		PointerHandler
 	} from '../types/callbackHandlers';
-	import type { ButtonVariant, FabPosition } from '../types/propOptions';
+	import type { ButtonVariant, FabPosition, IconPosition } from '../types/propOptions';
 	import Icon from './Icon.svelte';
 	import LoadingSpinner from './LoadingSpinner.svelte';
 	import { getStyleFromNumber } from '../utils/style';
@@ -29,6 +29,8 @@
 		loading?: boolean;
 		/** Material Symbols icon name. */
 		icon?: string;
+		/** Icon position relative to the label. @default 'left' */
+		iconPosition?: IconPosition;
 		iconFilled?: boolean;
 		iconWeight?: IconWeight;
 		iconGrade?: IconGrade;
@@ -106,6 +108,7 @@
 
 		// アイコン関連
 		icon = '',
+		iconPosition = 'left',
 		iconFilled = false,
 		iconWeight = 300,
 		iconGrade = 0,
@@ -348,20 +351,24 @@
 	aria-busy={loading ? 'true' : undefined}
 	data-testid="fab"
 >
+	{#snippet iconContent()}
+		<Icon
+			filled={iconFilled}
+			weight={iconWeight}
+			grade={iconGrade}
+			opticalSize={iconOpticalSize}
+			variant={iconVariant}
+			size={24}>{icon}</Icon
+		>
+	{/snippet}
+
 	{#if loading}
 		<div class="fab__loading">
 			<LoadingSpinner size={24} strokeWidth={2} color="currentColor" />
 		</div>
-	{:else if icon}
-		<div class="fab__icon">
-			<Icon
-				filled={iconFilled}
-				weight={iconWeight}
-				grade={iconGrade}
-				opticalSize={iconOpticalSize}
-				variant={iconVariant}
-				size={24}>{icon}</Icon
-			>
+	{:else if icon && iconPosition === 'left'}
+		<div class="fab__icon fab__icon--left">
+			{@render iconContent()}
 		</div>
 	{/if}
 
@@ -370,6 +377,12 @@
 			{@render children()}
 		</div>
 	{/if}
+
+	{#if icon && iconPosition === 'right' && !loading}
+		<div class="fab__icon fab__icon--right">
+			{@render iconContent()}
+		</div>
+	{/if}
 </button>
 
 <style>.fab {
@@ -470,12 +483,17 @@
   transition-duration: 0.01s;
 }
 .fab .fab__icon {
-  margin: 0 8px 0 -8px;
   user-select: none;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+.fab .fab__icon--left {
+  margin: 0 8px 0 -8px;
+}
+.fab .fab__icon--right {
+  margin: 0 -8px 0 8px;
+}
 .fab .fab__loading {
   position: absolute;
   top: 50%;

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

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
-import type { ButtonVariant, FabPosition } from '../types/propOptions';
+import type { ButtonVariant, FabPosition, IconPosition } from '../types/propOptions';
 export type FabProps = {
     children?: Snippet;
     /** @default 'button' */
@@ -13,6 +13,8 @@ export type FabProps = {
     loading?: boolean;
     /** Material Symbols icon name. */
     icon?: string;
+    /** Icon position relative to the label. @default 'left' */
+    iconPosition?: IconPosition;
     iconFilled?: boolean;
     iconWeight?: IconWeight;
     iconGrade?: IconGrade;

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/dist/index.d.ts

@@ -85,7 +85,7 @@ 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, StepNavOrientation } from './types/propOptions';
+export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, IconPosition, 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';

package/dist/types/propOptions.d.ts

@@ -22,6 +22,11 @@ export type FabPosition = 'left' | 'center' | 'right';
  * Used by Button, IconButton, Fab components
  */
 export type ButtonVariant = 'ghost' | 'filled' | 'outlined' | 'glass';
+/**
+ * Icon position type (left/right)
+ * Used by Button, Fab components
+ */
+export type IconPosition = 'left' | 'right';
 /**
  * Common component size type
  * Used by Button, Checkbox, CheckboxGroup, Radio, RadioGroup, SegmentedControl, Switch

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.53",
 	"type": "module",
 	"keywords": [
 		"svelte",