@14ch/svelte-ui 0.0.56 → 0.0.58

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>;

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/MultiSelect.svelte

@@ -336,7 +336,7 @@
   box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-select-border-color);
   border: none;
   border-radius: var(--svelte-ui-select-border-radius);
-  font-size: 1rem;
+  font-size: var(--svelte-ui-font-size);
 }
 
 /* =============================================

package/dist/components/PopupMenu.svelte

@@ -355,7 +355,7 @@
   padding: 8px 16px;
   background: transparent;
   border: none;
-  font-size: 1rem;
+  font-size: var(--svelte-ui-font-size);
   color: var(--svelte-ui-popupmenu-text-color);
   text-align: left;
   white-space: nowrap;
@@ -412,6 +412,6 @@
 
 :global(.popup--fullscreen) .popup-menu__button {
   padding: 16px 24px;
-  font-size: 1.1rem;
+  font-size: var(--svelte-ui-font-size);
   min-height: var(--svelte-ui-touch-target-lg);
 }</style>

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 {
@@ -456,7 +486,7 @@ select--focus-{focusStyle}"
 			box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-select-border-color);
 			border: none;
 			border-radius: var(--svelte-ui-select-border-radius);
-			font-size: 1rem;
+			font-size: var(--svelte-ui-font-size);
 			line-height: var(--svelte-ui-select-height);
 		}
 	}

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/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 {