@14ch/svelte-ui 0.0.56 → 0.0.58

package/dist/assets/styles/import.css

@@ -139,11 +139,11 @@
     * ==================================== */
   /* 基本テキスト色の定義 */
   --svelte-ui-text-color: var(--base-800-transparent);
-  --svelte-ui-text-subtle-color: var(--base-400-transparent);
+  --svelte-ui-text-subtle-color: var(--base-500-transparent);
   --svelte-ui-text-on-filled-color: #ffffff;
   --svelte-ui-text-inverse-color: var(--white-800-transparent);
-  --svelte-ui-text-inverse-subtle-color: var(--white-400-transparent);
-  --svelte-ui-text-placeholder-color: var(--base-400-transparent);
+  --svelte-ui-text-inverse-subtle-color: var(--white-500-transparent);
+  --svelte-ui-text-placeholder-color: var(--base-500-transparent);
   /* ボーダーカラー */
   --svelte-ui-border-color: var(--base-200-transparent);
   --svelte-ui-border-weak-color: var(--base-100-transparent);
@@ -179,11 +179,11 @@
 [data-theme=dark] {
   /* 基本テキスト色の定義 */
   --svelte-ui-text-color: var(--white-800-transparent);
-  --svelte-ui-text-subtle-color: var(--white-400-transparent);
+  --svelte-ui-text-subtle-color: var(--white-500-transparent);
   --svelte-ui-text-on-filled-color: #ffffff;
   --svelte-ui-text-inverse-color: var(--base-800-transparent);
-  --svelte-ui-text-inverse-subtle-color: var(--base-400-transparent);
-  --svelte-ui-text-placeholder-color: var(--white-400-transparent);
+  --svelte-ui-text-inverse-subtle-color: var(--base-500-transparent);
+  --svelte-ui-text-placeholder-color: var(--white-500-transparent);
   /* ボーダーカラー */
   --svelte-ui-border-color: var(--white-400-transparent);
   --svelte-ui-border-weak-color: var(--white-200-transparent);
@@ -226,8 +226,9 @@
   --svelte-ui-font-size-xs: 0.75rem;
   --svelte-ui-font-size-sm: 0.875rem;
   --svelte-ui-font-size: 1rem;
-  --svelte-ui-font-size-lg: 1.125rem;
-  --svelte-ui-font-size-xl: 1.25rem;
+  --svelte-ui-font-size-lg: 1.25rem;
+  --svelte-ui-font-size-xl: 1.5rem;
+  --svelte-ui-font-size-xxl: 2rem;
   /* Mobile Touch Size */
   --svelte-ui-touch-target-sm: 36px;
   --svelte-ui-touch-target: 44px;
@@ -263,9 +264,9 @@
   --svelte-ui-button-padding-sm: 6px 8px;
   --svelte-ui-button-padding: 8px 12px;
   --svelte-ui-button-padding-lg: 12px 16px;
-  --svelte-ui-button-font-size-sm: 14px;
+  --svelte-ui-button-font-size-sm: var(--svelte-ui-font-size-sm);
   --svelte-ui-button-font-size: inherit;
-  --svelte-ui-button-font-size-lg: 16px;
+  --svelte-ui-button-font-size-lg: var(--svelte-ui-font-size);
   --svelte-ui-button-line-height: 1.2em;
   --svelte-ui-button-border-radius: var(--svelte-ui-border-radius);
   --svelte-ui-button-border-radius-rounded: var(--svelte-ui-border-radius-rounded);
@@ -313,9 +314,9 @@
   --svelte-ui-segmented-control-button-height-sm: 24px;
   --svelte-ui-segmented-control-button-height: 32px;
   --svelte-ui-segmented-control-button-height-lg: 40px;
-  --svelte-ui-segmented-control-font-size-sm: 12px;
-  --svelte-ui-segmented-control-font-size: 14px;
-  --svelte-ui-segmented-control-font-size-lg: 16px;
+  --svelte-ui-segmented-control-font-size-sm: var(--svelte-ui-font-size-sm);
+  --svelte-ui-segmented-control-font-size: var(--svelte-ui-font-size);
+  --svelte-ui-segmented-control-font-size-lg: var(--svelte-ui-font-size-lg);
   --svelte-ui-segmented-control-button-padding-sm: 4px 8px;
   --svelte-ui-segmented-control-button-padding: 6px 12px;
   --svelte-ui-segmented-control-button-padding-lg: 8px 16px;
@@ -354,7 +355,7 @@
   --svelte-ui-nav-mobile-min-height: 56px;
   --svelte-ui-nav-mobile-item-padding: 8px;
   --svelte-ui-nav-mobile-item-icon-gap: 8px;
-  --svelte-ui-nav-mobile-item-font-size: 0.75rem;
+  --svelte-ui-nav-mobile-item-font-size: var(--svelte-ui-font-size-xs);
   /* Nav: vertical */
   --svelte-ui-nav-vertical-item-gap: 8px;
   /* Nav: horizontal */
@@ -385,9 +386,9 @@
   /* ラベル・説明 */
   --svelte-ui-step-nav-label-color: var(--svelte-ui-text-color);
   --svelte-ui-step-nav-description-color: var(--svelte-ui-text-subtle-color);
-  --svelte-ui-step-nav-font-size-sm: 12px;
-  --svelte-ui-step-nav-font-size: 14px;
-  --svelte-ui-step-nav-font-size-lg: 16px;
+  --svelte-ui-step-nav-font-size-sm: var(--svelte-ui-font-size-xs);
+  --svelte-ui-step-nav-font-size: var(--svelte-ui-font-size-sm);
+  --svelte-ui-step-nav-font-size-lg: var(--svelte-ui-font-size);
   --svelte-ui-step-nav-description-font-size: var(--svelte-ui-font-size-sm);
   --svelte-ui-step-nav-label-line-height: 1.3;
   /* コネクター（完了区間 / 未完了区間） */
@@ -635,8 +636,8 @@
   --svelte-ui-dialog-padding: 16px 24px;
   --svelte-ui-dialog-body-padding: 24px;
   --svelte-ui-dialog-header-height: 56px;
-  --svelte-ui-dialog-title-font-size: 1.4rem;
-  --svelte-ui-dialog-description-font-size: 0.875rem;
+  --svelte-ui-dialog-title-font-size: var(--svelte-ui-font-size-xl);
+  --svelte-ui-dialog-description-font-size: var(--svelte-ui-font-size-sm);
   --svelte-ui-dialog-description-padding: 0.5rem 1rem;
   --svelte-ui-dialog-footer-padding: 8px;
   --svelte-ui-dialog-border: solid 1px var(--svelte-ui-border-weak-color);
@@ -649,8 +650,8 @@
   --svelte-ui-drawer-header-padding: 16px 24px;
   --svelte-ui-drawer-body-padding: 24px;
   --svelte-ui-drawer-header-height: 56px;
-  --svelte-ui-drawer-title-font-size: 1.4rem;
-  --svelte-ui-drawer-description-font-size: 0.875rem;
+  --svelte-ui-drawer-title-font-size: var(--svelte-ui-font-size-xl);
+  --svelte-ui-drawer-description-font-size: var(--svelte-ui-font-size-sm);
   --svelte-ui-drawer-description-padding: 0.5rem 1rem;
   --svelte-ui-drawer-footer-padding: 8px;
   --svelte-ui-drawer-border: 1px solid var(--svelte-ui-border-weak-color);
@@ -762,7 +763,7 @@
   --svelte-ui-skeleton-media-gap: 16px;
   --svelte-ui-skeleton-media-vertical-gap: 8px;
   --svelte-ui-skeleton-heading-width: 50%;
-  --svelte-ui-skeleton-heading-font-size: 2rem;
+  --svelte-ui-skeleton-heading-font-size: var(--svelte-ui-font-size-xxl);
   --svelte-ui-skeleton-pattern-gap: 16px;
   --svelte-ui-skeleton-repeat-gap: 24px;
   /* Badge */

package/dist/assets/styles/variables.scss

@@ -141,11 +141,11 @@
 
 	/* 基本テキスト色の定義 */
 	--svelte-ui-text-color: var(--base-800-transparent);
-	--svelte-ui-text-subtle-color: var(--base-400-transparent);
+	--svelte-ui-text-subtle-color: var(--base-500-transparent);
 	--svelte-ui-text-on-filled-color: #ffffff;
 	--svelte-ui-text-inverse-color: var(--white-800-transparent);
-	--svelte-ui-text-inverse-subtle-color: var(--white-400-transparent);
-	--svelte-ui-text-placeholder-color: var(--base-400-transparent);
+	--svelte-ui-text-inverse-subtle-color: var(--white-500-transparent);
+	--svelte-ui-text-placeholder-color: var(--base-500-transparent);
 
 	/* ボーダーカラー */
 	--svelte-ui-border-color: var(--base-200-transparent);
@@ -193,11 +193,11 @@
 [data-theme='dark'] {
 	/* 基本テキスト色の定義 */
 	--svelte-ui-text-color: var(--white-800-transparent);
-	--svelte-ui-text-subtle-color: var(--white-400-transparent);
+	--svelte-ui-text-subtle-color: var(--white-500-transparent);
 	--svelte-ui-text-on-filled-color: #ffffff;
 	--svelte-ui-text-inverse-color: var(--base-800-transparent);
-	--svelte-ui-text-inverse-subtle-color: var(--base-400-transparent);
-	--svelte-ui-text-placeholder-color: var(--white-400-transparent);
+	--svelte-ui-text-inverse-subtle-color: var(--base-500-transparent);
+	--svelte-ui-text-placeholder-color: var(--white-500-transparent);
 
 	/* ボーダーカラー */
 	--svelte-ui-border-color: var(--white-400-transparent);
@@ -253,8 +253,9 @@
 	--svelte-ui-font-size-xs: 0.75rem;
 	--svelte-ui-font-size-sm: 0.875rem;
 	--svelte-ui-font-size: 1rem;
-	--svelte-ui-font-size-lg: 1.125rem;
-	--svelte-ui-font-size-xl: 1.25rem;
+	--svelte-ui-font-size-lg: 1.25rem;
+	--svelte-ui-font-size-xl: 1.5rem;
+	--svelte-ui-font-size-xxl: 2rem;
 
 	/* Mobile Touch Size */
 	--svelte-ui-touch-target-sm: 36px;
@@ -296,9 +297,9 @@
 	--svelte-ui-button-padding-sm: 6px 8px;
 	--svelte-ui-button-padding: 8px 12px;
 	--svelte-ui-button-padding-lg: 12px 16px;
-	--svelte-ui-button-font-size-sm: 14px;
+	--svelte-ui-button-font-size-sm: var(--svelte-ui-font-size-sm);
 	--svelte-ui-button-font-size: inherit;
-	--svelte-ui-button-font-size-lg: 16px;
+	--svelte-ui-button-font-size-lg: var(--svelte-ui-font-size);
 	--svelte-ui-button-line-height: 1.2em;
 	--svelte-ui-button-border-radius: var(--svelte-ui-border-radius);
 	--svelte-ui-button-border-radius-rounded: var(--svelte-ui-border-radius-rounded);
@@ -349,9 +350,9 @@
 	--svelte-ui-segmented-control-button-height-sm: 24px;
 	--svelte-ui-segmented-control-button-height: 32px;
 	--svelte-ui-segmented-control-button-height-lg: 40px;
-	--svelte-ui-segmented-control-font-size-sm: 12px;
-	--svelte-ui-segmented-control-font-size: 14px;
-	--svelte-ui-segmented-control-font-size-lg: 16px;
+	--svelte-ui-segmented-control-font-size-sm: var(--svelte-ui-font-size-sm);
+	--svelte-ui-segmented-control-font-size: var(--svelte-ui-font-size);
+	--svelte-ui-segmented-control-font-size-lg: var(--svelte-ui-font-size-lg);
 	--svelte-ui-segmented-control-button-padding-sm: 4px 8px;
 	--svelte-ui-segmented-control-button-padding: 6px 12px;
 	--svelte-ui-segmented-control-button-padding-lg: 8px 16px;
@@ -392,7 +393,7 @@
 	--svelte-ui-nav-mobile-min-height: 56px;
 	--svelte-ui-nav-mobile-item-padding: 8px;
 	--svelte-ui-nav-mobile-item-icon-gap: 8px;
-	--svelte-ui-nav-mobile-item-font-size: 0.75rem;
+	--svelte-ui-nav-mobile-item-font-size: var(--svelte-ui-font-size-xs);
 	/* Nav: vertical */
 	--svelte-ui-nav-vertical-item-gap: 8px;
 	/* Nav: horizontal */
@@ -424,9 +425,9 @@
 	/* ラベル・説明 */
 	--svelte-ui-step-nav-label-color: var(--svelte-ui-text-color);
 	--svelte-ui-step-nav-description-color: var(--svelte-ui-text-subtle-color);
-	--svelte-ui-step-nav-font-size-sm: 12px;
-	--svelte-ui-step-nav-font-size: 14px;
-	--svelte-ui-step-nav-font-size-lg: 16px;
+	--svelte-ui-step-nav-font-size-sm: var(--svelte-ui-font-size-xs);
+	--svelte-ui-step-nav-font-size: var(--svelte-ui-font-size-sm);
+	--svelte-ui-step-nav-font-size-lg: var(--svelte-ui-font-size);
 	--svelte-ui-step-nav-description-font-size: var(--svelte-ui-font-size-sm);
 	--svelte-ui-step-nav-label-line-height: 1.3;
 	/* コネクター（完了区間 / 未完了区間） */
@@ -692,8 +693,8 @@
 	--svelte-ui-dialog-padding: 16px 24px;
 	--svelte-ui-dialog-body-padding: 24px;
 	--svelte-ui-dialog-header-height: 56px;
-	--svelte-ui-dialog-title-font-size: 1.4rem;
-	--svelte-ui-dialog-description-font-size: 0.875rem;
+	--svelte-ui-dialog-title-font-size: var(--svelte-ui-font-size-xl);
+	--svelte-ui-dialog-description-font-size: var(--svelte-ui-font-size-sm);
 	--svelte-ui-dialog-description-padding: 0.5rem 1rem;
 	--svelte-ui-dialog-footer-padding: 8px;
 	--svelte-ui-dialog-border: solid 1px var(--svelte-ui-border-weak-color);
@@ -707,8 +708,8 @@
 	--svelte-ui-drawer-header-padding: 16px 24px;
 	--svelte-ui-drawer-body-padding: 24px;
 	--svelte-ui-drawer-header-height: 56px;
-	--svelte-ui-drawer-title-font-size: 1.4rem;
-	--svelte-ui-drawer-description-font-size: 0.875rem;
+	--svelte-ui-drawer-title-font-size: var(--svelte-ui-font-size-xl);
+	--svelte-ui-drawer-description-font-size: var(--svelte-ui-font-size-sm);
 	--svelte-ui-drawer-description-padding: 0.5rem 1rem;
 	--svelte-ui-drawer-footer-padding: 8px;
 	--svelte-ui-drawer-border: 1px solid var(--svelte-ui-border-weak-color);
@@ -828,7 +829,7 @@
 	--svelte-ui-skeleton-media-gap: 16px;
 	--svelte-ui-skeleton-media-vertical-gap: 8px;
 	--svelte-ui-skeleton-heading-width: 50%;
-	--svelte-ui-skeleton-heading-font-size: 2rem;
+	--svelte-ui-skeleton-heading-font-size: var(--svelte-ui-font-size-xxl);
 	--svelte-ui-skeleton-pattern-gap: 16px;
 	--svelte-ui-skeleton-repeat-gap: 24px;
 

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

@@ -697,7 +697,7 @@
 }
 
 .datepicker-calendar__header__month-label-button {
-  font-size: 1.4rem;
+  font-size: var(--svelte-ui-font-size-xl);
   font-weight: bold;
   color: var(--svelte-ui-datepicker-date-color);
   background: none;
@@ -728,7 +728,7 @@
   border-radius: var(--svelte-ui-border-radius);
   background-color: var(--svelte-ui-surface-color);
   color: var(--svelte-ui-datepicker-date-color);
-  font-size: 1rem;
+  font-size: var(--svelte-ui-font-size);
   cursor: pointer;
   transition: background-color var(--svelte-ui-transition-duration);
 }
@@ -776,7 +776,7 @@
   display: flex;
   justify-content: center;
   padding: 2px 0;
-  font-size: 1rem;
+  font-size: var(--svelte-ui-font-size);
   width: 14.2857142857%;
 }