@14ch/svelte-ui 0.0.55 → 0.0.57

package/dist/components/Input.svelte

@@ -16,11 +16,52 @@
 		BivariantValueHandler
 	} from '../types/callbackHandlers';
 	import type { FocusStyle } from '../types/propOptions';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type InputProps = {
+	export type InputProps = Omit<
+		HTMLInputAttributes,
+		// 独自の型で再定義するためベースの HTML 属性から除外
+		| 'value'
+		| 'type'
+		| 'id'
+		| 'tabindex'
+		| 'maxlength'
+		| 'pattern'
+		| 'min'
+		| 'max'
+		| 'step'
+		| 'autocomplete'
+		| 'spellcheck'
+		// 独自ハンドラ型（callbackHandlers）で再定義するイベント系
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+		| 'onchange'
+		| 'oninput'
+	> & {
 		// 基本プロパティ
 		name?: string;
 		value: string | number | null | undefined;
@@ -76,6 +117,7 @@
 		required?: boolean;
 		/** Shows a clear (×) button when the input has a value. @default false */
 		clearable?: boolean;
+		clearButtonAriaLabel?: string;
 		/** Converts URLs in the value to clickable links. Only for `type="text"` or `type="url"`. @default false */
 		linkify?: boolean;
 		/** Adds a show/hide password toggle button. Only for `type="password"`. @default false */
@@ -139,9 +181,6 @@
 		onLeftIconTouchEnd?: TouchHandler;
 		onRightIconTouchCancel?: TouchHandler;
 		onLeftIconTouchCancel?: TouchHandler;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

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

@@ -1,7 +1,8 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { FocusStyle } from '../types/propOptions';
-export type InputProps = {
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type InputProps = Omit<HTMLInputAttributes, 'value' | 'type' | 'id' | 'tabindex' | 'maxlength' | 'pattern' | 'min' | 'max' | 'step' | 'autocomplete' | 'spellcheck' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'onclick' | 'onmousedown' | 'onmouseup' | 'onmouseenter' | 'onmouseleave' | 'onmouseover' | 'onmouseout' | 'oncontextmenu' | 'onauxclick' | 'ontouchstart' | 'ontouchend' | 'ontouchmove' | 'ontouchcancel' | 'onpointerdown' | 'onpointerup' | 'onpointerenter' | 'onpointerleave' | 'onpointermove' | 'onpointercancel' | 'onchange' | 'oninput'> & {
     name?: string;
     value: string | number | null | undefined;
     id?: string | null;
@@ -49,6 +50,7 @@ export type InputProps = {
     required?: boolean;
     /** Shows a clear (×) button when the input has a value. @default false */
     clearable?: boolean;
+    clearButtonAriaLabel?: string;
     /** Converts URLs in the value to clickable links. Only for `type="text"` or `type="url"`. @default false */
     linkify?: boolean;
     /** Adds a show/hide password toggle button. Only for `type="password"`. @default false */
@@ -96,7 +98,6 @@ export type InputProps = {
     onLeftIconTouchEnd?: TouchHandler;
     onRightIconTouchCancel?: TouchHandler;
     onLeftIconTouchCancel?: TouchHandler;
-    [key: string]: any;
 };
 declare const Input: import("svelte").Component<InputProps, {
     focus: () => void;

package/dist/components/Radio.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
 	import { type Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type {
 		FocusHandler,
 		KeyboardHandler,
@@ -16,7 +17,37 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type RadioProps = {
+	export type RadioProps = Omit<
+		HTMLInputAttributes,
+		// 独自型で再定義する props / イベントは除外して衝突を避ける
+		| 'children'
+		| 'value'
+		| 'size'
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+		| 'onchange'
+	> & {
 		// Snippet
 		/** Label content displayed next to the radio button. */
 		children?: Snippet;
@@ -85,9 +116,6 @@
 
 		// 入力イベント
 		onchange?: BivariantValueHandler<OptionValue>;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

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

@@ -1,8 +1,9 @@
 import { type Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { OptionValue } from '../types/options';
 import type { ComponentSize } from '../types/propOptions';
-export type RadioProps = {
+export type RadioProps = Omit<HTMLInputAttributes, 'children' | 'value' | 'size' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'onclick' | 'onmousedown' | 'onmouseup' | 'onmouseenter' | 'onmouseleave' | 'onmouseover' | 'onmouseout' | 'oncontextmenu' | 'onauxclick' | 'ontouchstart' | 'ontouchend' | 'ontouchmove' | 'ontouchcancel' | 'onpointerdown' | 'onpointerup' | 'onpointerenter' | 'onpointerleave' | 'onpointermove' | 'onpointercancel' | 'onchange'> & {
     /** Label content displayed next to the radio button. */
     children?: Snippet;
     /** Radio group name. All radios in a group must share the same name. */
@@ -48,7 +49,6 @@ export type RadioProps = {
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
     onchange?: BivariantValueHandler<OptionValue>;
-    [key: string]: any;
 };
 declare const Radio: import("svelte").Component<RadioProps, {}, "currentValue">;
 type Radio = ReturnType<typeof Radio>;

package/dist/components/SegmentedControl.svelte

@@ -13,11 +13,39 @@
 		BivariantValueHandler
 	} from '../types/callbackHandlers';
 	import type { ComponentSize } from '../types/propOptions';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type SegmentedControlProps = {
+	export type SegmentedControlProps = Omit<
+		HTMLAttributes<HTMLDivElement>,
+		// 独自ハンドラ型（callbackHandlers）で再定義するイベント系は除外して衝突を避ける
+		| 'onchange'
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+	> & {
 		// 基本プロパティ
 		/** `{ label, value, icon?, disabled? }[]` */
 		items: SegmentedControlItem[];
@@ -87,9 +115,6 @@
 		onpointerleave?: PointerHandler;
 		onpointermove?: PointerHandler;
 		onpointercancel?: PointerHandler;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

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

@@ -2,7 +2,8 @@ import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../typ
 import type { SegmentedControlItem } from '../types/segmentedControlItem';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { ComponentSize } from '../types/propOptions';
-export type SegmentedControlProps = {
+import type { HTMLAttributes } from 'svelte/elements';
+export type SegmentedControlProps = Omit<HTMLAttributes<HTMLDivElement>, 'onchange' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'onclick' | 'onmousedown' | 'onmouseup' | 'onmouseenter' | 'onmouseleave' | 'onmouseover' | 'onmouseout' | 'oncontextmenu' | 'onauxclick' | 'ontouchstart' | 'ontouchend' | 'ontouchmove' | 'ontouchcancel' | 'onpointerdown' | 'onpointerup' | 'onpointerenter' | 'onpointerleave' | 'onpointermove' | 'onpointercancel'> & {
     /** `{ label, value, icon?, disabled? }[]` */
     items: SegmentedControlItem[];
     /** Currently selected value. Supports `bind:value`. */
@@ -49,7 +50,6 @@ export type SegmentedControlProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    [key: string]: any;
 };
 declare const SegmentedControl: import("svelte").Component<SegmentedControlProps, {}, "value">;
 type SegmentedControl = ReturnType<typeof SegmentedControl>;

package/dist/components/Select.svelte

@@ -12,11 +12,44 @@
 		BivariantValueHandler
 	} from '../types/callbackHandlers';
 	import type { Option } from '../types/options';
+	import type { HTMLSelectAttributes } from 'svelte/elements';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type SelectProps = {
+	export type SelectProps = Omit<
+		HTMLSelectAttributes,
+		// 独自の型で再定義するためベースの HTML 属性から除外
+		| 'value'
+		| 'id'
+		| 'tabindex'
+		| 'size'
+		// 独自ハンドラ型（callbackHandlers）で再定義するイベント系
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+		| 'onchange'
+	> & {
 		// 基本プロパティ
 		name?: string;
 		value: string | number | null | undefined;
@@ -78,9 +111,6 @@
 
 		// 入力イベント
 		onchange?: BivariantValueHandler<string | number | null | undefined>;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

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

@@ -1,6 +1,7 @@
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { Option } from '../types/options';
-export type SelectProps = {
+import type { HTMLSelectAttributes } from 'svelte/elements';
+export type SelectProps = Omit<HTMLSelectAttributes, 'value' | 'id' | 'tabindex' | 'size' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'onclick' | 'onmousedown' | 'onmouseup' | 'onmouseenter' | 'onmouseleave' | 'onmouseover' | 'onmouseout' | 'oncontextmenu' | 'onauxclick' | 'ontouchstart' | 'ontouchend' | 'ontouchmove' | 'ontouchcancel' | 'onpointerdown' | 'onpointerup' | 'onpointerenter' | 'onpointerleave' | 'onpointermove' | 'onpointercancel' | 'onchange'> & {
     name?: string;
     value: string | number | null | undefined;
     /** `{ label, value, disabled? }[]` */
@@ -44,7 +45,6 @@ export type SelectProps = {
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
     onchange?: BivariantValueHandler<string | number | null | undefined>;
-    [key: string]: any;
 };
 declare const Select: import("svelte").Component<SelectProps, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/components/Slider.svelte

@@ -3,6 +3,7 @@
 <script lang="ts">
 	import { getStyleFromNumber } from '../utils/style';
 	import { t } from '../i18n';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type {
 		FocusHandler,
 		KeyboardHandler,
@@ -15,7 +16,36 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type SliderProps = {
+	export type SliderProps = Omit<
+		HTMLInputAttributes,
+		// 独自型で再定義する props / イベントは除外して衝突を避ける
+		| 'value'
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+		| 'onchange'
+		| 'oninput'
+	> & {
 		// 基本プロパティ
 		/** Supports `bind:value`. */
 		value: number;
@@ -78,9 +108,6 @@
 		// 入力イベント
 		onchange?: BivariantValueHandler<number>;
 		oninput?: BivariantValueHandler<number>;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

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

@@ -1,5 +1,6 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
-export type SliderProps = {
+export type SliderProps = Omit<HTMLInputAttributes, 'value' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'onclick' | 'onmousedown' | 'onmouseup' | 'onmouseenter' | 'onmouseleave' | 'onmouseover' | 'onmouseout' | 'oncontextmenu' | 'onauxclick' | 'ontouchstart' | 'ontouchend' | 'ontouchmove' | 'ontouchcancel' | 'onpointerdown' | 'onpointerup' | 'onpointerenter' | 'onpointerleave' | 'onpointermove' | 'onpointercancel' | 'onchange' | 'oninput'> & {
     /** Supports `bind:value`. */
     value: number;
     name?: string;
@@ -44,7 +45,6 @@ export type SliderProps = {
     onpointercancel?: PointerHandler;
     onchange?: BivariantValueHandler<number>;
     oninput?: BivariantValueHandler<number>;
-    [key: string]: any;
 };
 declare const Slider: import("svelte").Component<SliderProps, {}, "value">;
 type Slider = ReturnType<typeof Slider>;

package/dist/components/SnackbarItem.svelte

@@ -173,7 +173,7 @@
 	>
 		{#if typeIcons[type]}
 			<div class="snackbar-item__icon" aria-hidden="true">
-				<Icon name={typeIcons[type]} size={32}>{typeIcons[type]}</Icon>
+				<Icon size={32}>{typeIcons[type]}</Icon>
 			</div>
 		{/if}
 

package/dist/components/StepNav.svelte

@@ -30,8 +30,9 @@
 		/**
 		 * 到達済みの最遠ステップ（進捗軸）。未指定時は表示中ステップ位置。
 		 * 数値なら 0 始まりのインデックス、文字列ならアイテムのユニークキー（`value`。省略時は配列 index の文字列）で指定する。URL方式でも `value` をキーに使う。
+		 * `{ step, status }` を渡すと指したステップの状態を明示できる。`status: 'done'` なら当該ステップも完了表示（進行中なし）。数値／文字列のみ指定時は `'in-progress'` 扱い。
 		 */
-		progress?: number | string;
+		progress?: number | string | { step: number | string; status: 'in-progress' | 'done' };
 
 		// URL 方式（href 使用時）
 		/** 各 href のアクティブ判定に前置するパス。 */
@@ -171,11 +172,20 @@
 		return items.findIndex((item, index) => (item.value ?? String(index)) === value);
 	});
 
+	// progress の step 部分（オブジェクト形なら .step、それ以外は progress 自身）。
+	const progressStep = $derived(
+		typeof progress === 'object' && progress !== null ? progress.step : progress
+	);
+	// 指したステップの状態。オブジェクト形の status のみ 'done' になり得る。未指定は 'in-progress'。
+	const progressStepStatus = $derived<'in-progress' | 'done'>(
+		typeof progress === 'object' && progress !== null ? progress.status : 'in-progress'
+	);
+
 	// 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);
+		if (progressStep == null) return activeIndex;
+		if (typeof progressStep === 'number') return progressStep;
+		return items.findIndex((item, index) => (item.value ?? String(index)) === progressStep);
 	});
 
 	const resolvedIconSize = $derived(
@@ -208,11 +218,11 @@
 	// =========================================================================
 	// Helpers
 	// =========================================================================
-	type StepStatus = 'completed' | 'current' | 'upcoming';
+	type StepStatus = 'done' | 'in-progress' | 'upcoming';
 
 	const getStatus = (index: number): StepStatus => {
-		if (index < progressIndex) return 'completed';
-		if (index === progressIndex) return 'current';
+		if (index < progressIndex) return 'done';
+		if (index === progressIndex) return progressStepStatus === 'done' ? 'done' : 'in-progress';
 		return 'upcoming';
 	};
 
@@ -239,10 +249,10 @@
 		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')
+			: getStatus(index) === 'done'
+				? t('stepNav.done')
+				: getStatus(index) === 'in-progress'
+					? t('stepNav.inProgress')
 					: t('stepNav.upcoming');
 		return `${step}: ${state}`;
 	};
@@ -304,7 +314,7 @@
 				variant={iconVariant}
 				filled>error</Icon
 			>
-		{:else if status === 'completed'}
+		{:else if status === 'done'}
 			<Icon size={resolvedIconSize} weight={iconWeight} grade={iconGrade} variant={iconVariant}
 				>check</Icon
 			>
@@ -393,7 +403,7 @@
 						{#if index < items.length - 1}
 							<span
 								class="step-nav__connector"
-								class:step-nav__connector--completed={index < progressIndex}
+								class:step-nav__connector--done={index < progressIndex}
 								aria-hidden="true"
 							></span>
 						{/if}
@@ -499,15 +509,15 @@ button.step-nav__step {
   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 {
+/* in-progress: primary アウトライン + 番号 */
+.step-nav__step--in-progress .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 {
+/* done: primary 塗り + check */
+.step-nav__step--done .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));
@@ -564,8 +574,8 @@ button.step-nav__step {
   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__connector--done {
+  background: var(--internal-step-nav-accent, var(--svelte-ui-step-nav-connector-done-color));
 }
 
 /* ======================= 水平レイアウト ======================= */

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

@@ -12,8 +12,12 @@ export type StepNavProps = {
     /**
      * 到達済みの最遠ステップ（進捗軸）。未指定時は表示中ステップ位置。
      * 数値なら 0 始まりのインデックス、文字列ならアイテムのユニークキー（`value`。省略時は配列 index の文字列）で指定する。URL方式でも `value` をキーに使う。
+     * `{ step, status }` を渡すと指したステップの状態を明示できる。`status: 'done'` なら当該ステップも完了表示（進行中なし）。数値／文字列のみ指定時は `'in-progress'` 扱い。
      */
-    progress?: number | string;
+    progress?: number | string | {
+        step: number | string;
+        status: 'in-progress' | 'done';
+    };
     /** 各 href のアクティブ判定に前置するパス。 */
     pathPrefix?: string;
     /** アクティブ判定をカスタムする関数。 */

package/dist/components/Switch.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type {
 		FocusHandler,
 		KeyboardHandler,
@@ -15,7 +16,37 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type SwitchProps = {
+	export type SwitchProps = Omit<
+		HTMLInputAttributes,
+		// 独自型で再定義する props / イベントは除外して衝突を避ける
+		| 'children'
+		| 'value'
+		| 'size'
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+		| 'onchange'
+	> & {
 		// Snippet
 		children?: Snippet;
 
@@ -77,9 +108,6 @@
 
 		// 入力イベント
 		onchange?: BivariantValueHandler<boolean>;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

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

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { ComponentSize } from '../types/propOptions';
-export type SwitchProps = {
+export type SwitchProps = Omit<HTMLInputAttributes, 'children' | 'value' | 'size' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'onclick' | 'onmousedown' | 'onmouseup' | 'onmouseenter' | 'onmouseleave' | 'onmouseover' | 'onmouseout' | 'oncontextmenu' | 'onauxclick' | 'ontouchstart' | 'ontouchend' | 'ontouchmove' | 'ontouchcancel' | 'onpointerdown' | 'onpointerup' | 'onpointerenter' | 'onpointerleave' | 'onpointermove' | 'onpointercancel' | 'onchange'> & {
     children?: Snippet;
     /** Supports `bind:value`. */
     value: boolean;
@@ -41,7 +42,6 @@ export type SwitchProps = {
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
     onchange?: BivariantValueHandler<boolean>;
-    [key: string]: any;
 };
 declare const Switch: import("svelte").Component<SwitchProps, {}, "value">;
 type Switch = ReturnType<typeof Switch>;

package/dist/components/Textarea.svelte

@@ -20,7 +20,44 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type TextareaProps = {
+	export type TextareaProps = Omit<
+		HTMLTextareaAttributes,
+		// 独自の型で再定義するためベースの HTML 属性から除外
+		| 'value'
+		| 'id'
+		| 'tabindex'
+		| 'maxlength'
+		| 'autocomplete'
+		| 'wrap'
+		| 'spellcheck'
+		| 'autocapitalize'
+		// 独自ハンドラ型（callbackHandlers）で再定義するイベント系
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+		| 'onchange'
+		| 'oninput'
+	> & {
 		// 基本プロパティ
 		name?: string;
 		value: string | null | undefined;
@@ -112,9 +149,6 @@
 		// 入力イベント
 		onchange?: BivariantValueHandler<string>;
 		oninput?: BivariantValueHandler<string>;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {