@14ch/svelte-ui 0.0.55 → 0.0.57

package/dist/assets/styles/import.css

@@ -371,8 +371,8 @@
   /* 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-done-color: var(--svelte-ui-step-nav-accent-color);
+  --svelte-ui-step-nav-in-progress-color: var(--svelte-ui-step-nav-accent-color);
   /* マーカー */
   --svelte-ui-step-nav-marker-size-sm: 24px;
   --svelte-ui-step-nav-marker-size: 32px;
@@ -392,7 +392,7 @@
   --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-done-color: var(--svelte-ui-step-nav-accent-color);
   --svelte-ui-step-nav-connector-thickness: 2px;
   /* 間隔 */
   --svelte-ui-step-nav-marker-label-gap: 8px;
@@ -864,7 +864,7 @@
     --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-connector-done-color: Highlight;
     --svelte-ui-step-nav-ring-color: Highlight;
     --svelte-ui-step-nav-focus-color: CanvasText;
     /* Radio */

package/dist/assets/styles/variables.scss

@@ -410,8 +410,8 @@
 	/* 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-done-color: var(--svelte-ui-step-nav-accent-color);
+	--svelte-ui-step-nav-in-progress-color: var(--svelte-ui-step-nav-accent-color);
 	/* マーカー */
 	--svelte-ui-step-nav-marker-size-sm: 24px;
 	--svelte-ui-step-nav-marker-size: 32px;
@@ -431,7 +431,7 @@
 	--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-done-color: var(--svelte-ui-step-nav-accent-color);
 	--svelte-ui-step-nav-connector-thickness: 2px;
 	/* 間隔 */
 	--svelte-ui-step-nav-marker-label-gap: 8px;
@@ -947,7 +947,7 @@
 		--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-connector-done-color: Highlight;
 		--svelte-ui-step-nav-ring-color: Highlight;
 		--svelte-ui-step-nav-focus-color: CanvasText;
 

package/dist/components/Button.svelte

@@ -19,7 +19,34 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type ButtonProps = {
+	export type ButtonProps = Omit<
+		HTMLButtonAttributes,
+		// 独自ハンドラ型（callbackHandlers）で再定義するイベント系は除外して衝突を避ける
+		| 'children'
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+	> & {
 		// Snippet
 		children: Snippet;
 
@@ -39,6 +66,8 @@
 		fullWidth?: boolean;
 		/** Content alignment. Useful with `fullWidth`. @default 'center' */
 		align?: 'left' | 'center' | 'right';
+		/** Minimum width. A number is treated as px. @default 0 */
+		minWidth?: number;
 		rounded?: boolean;
 		/** Adds a chevron-down icon. Use when the button opens a popup/dropdown. @default false */
 		popup?: boolean;
@@ -97,9 +126,6 @@
 		onpointerleave?: PointerHandler;
 		onpointermove?: PointerHandler;
 		onpointercancel?: PointerHandler;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

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

@@ -3,7 +3,7 @@ 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, IconPosition } from '../types/propOptions';
-export type ButtonProps = {
+export type ButtonProps = Omit<HTMLButtonAttributes, 'children' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'onclick' | 'onmousedown' | 'onmouseup' | 'onmouseenter' | 'onmouseleave' | 'onmouseover' | 'onmouseout' | 'oncontextmenu' | 'onauxclick' | 'ontouchstart' | 'ontouchend' | 'ontouchmove' | 'ontouchcancel' | 'onpointerdown' | 'onpointerup' | 'onpointerenter' | 'onpointerleave' | 'onpointermove' | 'onpointercancel'> & {
     children: Snippet;
     /** @default 'button' */
     type?: HTMLButtonAttributes['type'];
@@ -18,6 +18,8 @@ export type ButtonProps = {
     fullWidth?: boolean;
     /** Content alignment. Useful with `fullWidth`. @default 'center' */
     align?: 'left' | 'center' | 'right';
+    /** Minimum width. A number is treated as px. @default 0 */
+    minWidth?: number;
     rounded?: boolean;
     /** Adds a chevron-down icon. Use when the button opens a popup/dropdown. @default false */
     popup?: boolean;
@@ -60,7 +62,6 @@ export type ButtonProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    [key: string]: any;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/components/Checkbox.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 CheckboxProps = {
+	export type CheckboxProps = 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 checkbox. */
 		children?: Snippet;
@@ -84,9 +115,6 @@
 
 		// 入力イベント
 		onchange?: BivariantValueHandler<boolean>;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

package/dist/components/Checkbox.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 CheckboxProps = {
+export type CheckboxProps = 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 checkbox. */
     children?: Snippet;
     /** Native `name` attribute. */
@@ -47,7 +48,6 @@ export type CheckboxProps = {
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
     onchange?: BivariantValueHandler<boolean>;
-    [key: string]: any;
 };
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;

package/dist/components/ColorPicker.svelte

@@ -3,6 +3,7 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
 	import Input from './Input.svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { t } from '../i18n';
 	import type { IconVariant } from '../types/icon';
 	import type {
@@ -17,7 +18,46 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type ColorPickerProps = {
+	export type ColorPickerProps = Omit<
+		HTMLInputAttributes,
+		// Input と生の color input の両方へ転送するため、Input が絞り込むキーと独自ハンドラを除外
+		| 'value'
+		| 'type'
+		| 'id'
+		| 'tabindex'
+		| 'maxlength'
+		| 'pattern'
+		| 'min'
+		| 'max'
+		| 'step'
+		| 'autocomplete'
+		| 'spellcheck'
+		| 'onchange'
+		| 'oninput'
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+	> & {
 		// 基本プロパティ
 		/** Hex color string (e.g. `"#ff0000"`). Supports `bind:value`. */
 		value: string | null | undefined;
@@ -79,9 +119,6 @@
 		onpointerleave?: PointerHandler;
 		onpointermove?: PointerHandler;
 		onpointercancel?: PointerHandler;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

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

@@ -1,6 +1,7 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
-export type ColorPickerProps = {
+export type ColorPickerProps = Omit<HTMLInputAttributes, 'value' | 'type' | 'id' | 'tabindex' | 'maxlength' | 'pattern' | 'min' | 'max' | 'step' | 'autocomplete' | 'spellcheck' | 'onchange' | 'oninput' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'onclick' | 'onmousedown' | 'onmouseup' | 'onmouseenter' | 'onmouseleave' | 'onmouseover' | 'onmouseout' | 'oncontextmenu' | 'onauxclick' | 'ontouchstart' | 'ontouchend' | 'ontouchmove' | 'ontouchcancel' | 'onpointerdown' | 'onpointerup' | 'onpointerenter' | 'onpointerleave' | 'onpointermove' | 'onpointercancel'> & {
     /** Hex color string (e.g. `"#ff0000"`). Supports `bind:value`. */
     value: string | null | undefined;
     id?: string;
@@ -44,7 +45,6 @@ export type ColorPickerProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    [key: string]: any;
 };
 declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "value">;
 type ColorPicker = ReturnType<typeof ColorPicker>;

package/dist/components/Combobox.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
 	import Input from './Input.svelte';
+	import type { InputProps } from './Input.svelte';
 	import Popup from './Popup.svelte';
 	import { announceSelection } from '../utils/accessibility';
 	import { t } from '../i18n';
@@ -17,7 +18,36 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type ComboboxProps = {
+	export type ComboboxProps = Omit<
+		InputProps,
+		// 独自ハンドラ型と独自型の value は除外して衝突を避ける（余剰プロパティは Input へ転送）
+		| 'value'
+		| 'onchange'
+		| 'oninput'
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+	> & {
 		// 基本プロパティ
 		name?: string;
 		/** Supports `bind:value`. */
@@ -88,9 +118,6 @@
 		onpointerleave?: PointerHandler;
 		onpointermove?: PointerHandler;
 		onpointercancel?: PointerHandler;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

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

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

package/dist/components/Datepicker.svelte

@@ -11,6 +11,7 @@
 	import 'dayjs/locale/es';
 	import 'dayjs/locale/zh-cn';
 	import Input from './Input.svelte';
+	import type { InputProps } from './Input.svelte';
 	import Popup from './Popup.svelte';
 	import DatepickerCalendar from './DatepickerCalendar.svelte';
 	import { announceToScreenReader } from '../utils/accessibility';
@@ -31,7 +32,36 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type DatepickerProps = {
+	export type DatepickerProps = Omit<
+		InputProps,
+		// 独自ハンドラ型と独自型の value は除外して衝突を避ける（余剰プロパティは Input へ転送）
+		| 'value'
+		| 'onchange'
+		| 'oninput'
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+	> & {
 		// 基本プロパティ
 		/** Selected date (single mode) or range (range mode). Supports `bind:value`. */
 		value: Date | { start: Date; end: Date } | undefined;
@@ -104,9 +134,6 @@
 		onpointerleave?: PointerHandler;
 		onpointermove?: PointerHandler;
 		onpointercancel?: PointerHandler;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

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

@@ -4,10 +4,11 @@ import 'dayjs/locale/fr';
 import 'dayjs/locale/de';
 import 'dayjs/locale/es';
 import 'dayjs/locale/zh-cn';
+import type { InputProps } from './Input.svelte';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 import type { DatepickerMode, FocusStyle } from '../types/propOptions';
-export type DatepickerProps = {
+export type DatepickerProps = Omit<InputProps, 'value' | 'onchange' | 'oninput' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'onclick' | 'onmousedown' | 'onmouseup' | 'onmouseenter' | 'onmouseleave' | 'onmouseover' | 'onmouseout' | 'oncontextmenu' | 'onauxclick' | 'ontouchstart' | 'ontouchend' | 'ontouchmove' | 'ontouchcancel' | 'onpointerdown' | 'onpointerup' | 'onpointerenter' | 'onpointerleave' | 'onpointermove' | 'onpointercancel'> & {
     /** Selected date (single mode) or range (range mode). Supports `bind:value`. */
     value: Date | {
         start: Date;
@@ -74,7 +75,6 @@ export type DatepickerProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    [key: string]: any;
 };
 declare const Datepicker: import("svelte").Component<DatepickerProps, {
     /** Opens the calendar popup. */ open: () => void;

package/dist/components/Fab.svelte

@@ -19,7 +19,34 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type FabProps = {
+	export type FabProps = Omit<
+		HTMLButtonAttributes,
+		// 独自ハンドラ型（callbackHandlers）で再定義するイベント系は除外して衝突を避ける
+		| 'children'
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+	> & {
 		children?: Snippet;
 		/** @default 'button' */
 		type?: HTMLButtonAttributes['type'];
@@ -86,7 +113,6 @@
 		onpointerleave?: PointerHandler;
 		onpointermove?: PointerHandler;
 		onpointercancel?: PointerHandler;
-		[key: string]: any;
 	};
 
 	let {

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

@@ -3,7 +3,7 @@ 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, IconPosition } from '../types/propOptions';
-export type FabProps = {
+export type FabProps = Omit<HTMLButtonAttributes, 'children' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'onclick' | 'onmousedown' | 'onmouseup' | 'onmouseenter' | 'onmouseleave' | 'onmouseover' | 'onmouseout' | 'oncontextmenu' | 'onauxclick' | 'ontouchstart' | 'ontouchend' | 'ontouchmove' | 'ontouchcancel' | 'onpointerdown' | 'onpointerup' | 'onpointerenter' | 'onpointerleave' | 'onpointermove' | 'onpointercancel'> & {
     children?: Snippet;
     /** @default 'button' */
     type?: HTMLButtonAttributes['type'];
@@ -61,7 +61,6 @@ export type FabProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    [key: string]: any;
 };
 declare const Fab: import("svelte").Component<FabProps, {}, "">;
 type Fab = ReturnType<typeof Fab>;

package/dist/components/Icon.svelte

@@ -2,13 +2,14 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import { getStyleFromNumber } from '../utils/style';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type IconProps = {
+	export type IconProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
 		// Snippet
 		/** Material Symbols icon name (e.g. `"home"`, `"settings"`). */
 		children: Snippet;
@@ -39,9 +40,6 @@
 		ariaLabel?: string;
 		/** Marks the icon as decorative (hidden from screen readers). @default true */
 		decorative?: boolean;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-export type IconProps = {
+export type IconProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
     /** Material Symbols icon name (e.g. `"home"`, `"settings"`). */
     children: Snippet;
     title?: string;
@@ -22,7 +23,6 @@ export type IconProps = {
     ariaLabel?: string;
     /** Marks the icon as decorative (hidden from screen readers). @default true */
     decorative?: boolean;
-    [key: string]: any;
 };
 declare const Icon: import("svelte").Component<IconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;

package/dist/components/IconButton.svelte

@@ -19,7 +19,34 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type IconButtonProps = {
+	export type IconButtonProps = Omit<
+		HTMLButtonAttributes,
+		// 独自ハンドラ型（callbackHandlers）で再定義するイベント系は除外して衝突を避ける
+		| 'children'
+		| 'onfocus'
+		| 'onblur'
+		| 'onkeydown'
+		| 'onkeyup'
+		| 'onclick'
+		| 'onmousedown'
+		| 'onmouseup'
+		| 'onmouseenter'
+		| 'onmouseleave'
+		| 'onmouseover'
+		| 'onmouseout'
+		| 'oncontextmenu'
+		| 'onauxclick'
+		| 'ontouchstart'
+		| 'ontouchend'
+		| 'ontouchmove'
+		| 'ontouchcancel'
+		| 'onpointerdown'
+		| 'onpointerup'
+		| 'onpointerenter'
+		| 'onpointerleave'
+		| 'onpointermove'
+		| 'onpointercancel'
+	> & {
 		// Snippet
 		/** Material Symbols icon name (e.g. `"close"`, `"edit"`). */
 		children: Snippet;
@@ -106,9 +133,6 @@
 		onpointerleave?: PointerHandler;
 		onpointermove?: PointerHandler;
 		onpointercancel?: PointerHandler;
-
-		// その他
-		[key: string]: any;
 	};
 
 	let {

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

@@ -3,7 +3,7 @@ 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, BadgeVariant } from '../types/propOptions';
-export type IconButtonProps = {
+export type IconButtonProps = Omit<HTMLButtonAttributes, 'children' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'onclick' | 'onmousedown' | 'onmouseup' | 'onmouseenter' | 'onmouseleave' | 'onmouseover' | 'onmouseout' | 'oncontextmenu' | 'onauxclick' | 'ontouchstart' | 'ontouchend' | 'ontouchmove' | 'ontouchcancel' | 'onpointerdown' | 'onpointerup' | 'onpointerenter' | 'onpointerleave' | 'onpointermove' | 'onpointercancel'> & {
     /** Material Symbols icon name (e.g. `"close"`, `"edit"`). */
     children: Snippet;
     /** @default 'button' */
@@ -67,7 +67,6 @@ export type IconButtonProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    [key: string]: any;
 };
 declare const IconButton: import("svelte").Component<IconButtonProps, {}, "">;
 type IconButton = ReturnType<typeof IconButton>;