@14ch/svelte-ui 0.0.27 → 0.0.29

package/dist/assets/styles/variables.scss

@@ -358,21 +358,6 @@
 	--svelte-ui-segmented-control-selected-text-color: var(--svelte-ui-text-on-filled-color);
 	--svelte-ui-segmented-control-hover-overlay: var(--svelte-ui-hover-overlay);
 
-	/* Tab */
-	--svelte-ui-tab-min-height: var(--svelte-ui-form-height);
-	--svelte-ui-tab-item-text-color: var(--svelte-ui-text-color);
-	--svelte-ui-tab-item-selected-text-color: var(--svelte-ui-primary-color);
-	--svelte-ui-tab-item-selected-bar-color: var(--svelte-ui-primary-color);
-	--svelte-ui-tab-item-padding-x: 16px;
-	--svelte-ui-tab-item-padding-y: 8px;
-	--svelte-ui-tab-item-padding: var(--svelte-ui-tab-item-padding-y)
-		var(--svelte-ui-tab-item-padding-x);
-	--svelte-ui-tab-item-icon-gap: 8px;
-	--svelte-ui-tab-item-selected-bar-offset: 0px;
-	--svelte-ui-tab-item-selected-bar-height: 4px;
-	--svelte-ui-tab-item-selected-bar-radius: 3px 3px 0 0;
-	--svelte-ui-tab-item-disabled-opacity: var(--svelte-ui-disabled-opacity);
-
 	/* Nav */
 	--svelte-ui-nav-item-text-color: var(--svelte-ui-text-color);
 	--svelte-ui-nav-item-selected-text-color: var(--svelte-ui-primary-color);
@@ -382,23 +367,42 @@
 		var(--svelte-ui-primary-color) 16%,
 		transparent
 	);
-	--svelte-ui-nav-item-selected-bar-color: var(--svelte-ui-primary-color);
-	--svelte-ui-nav-item-selected-bar-height: 3px;
-	--svelte-ui-nav-item-selected-bar-radius: 2px;
+	/* Nav: underline style（Tab はこれを参照するエイリアス） */
+	--svelte-ui-nav-item-underline-text-color: var(--svelte-ui-text-color);
+	--svelte-ui-nav-item-underline-selected-text-color: var(--svelte-ui-primary-color);
+	--svelte-ui-nav-item-underline-bar-color: var(--svelte-ui-primary-color);
+	--svelte-ui-nav-item-underline-bar-offset: 0px;
+	--svelte-ui-nav-item-underline-bar-height: 4px;
+	--svelte-ui-nav-item-underline-bar-radius: 3px 3px 0 0;
+
+	/* Tab */
+	--svelte-ui-tab-min-height: var(--svelte-ui-form-height);
 	--svelte-ui-nav-item-min-height: 40px;
 	--svelte-ui-nav-item-icon-gap: 8px;
 	--svelte-ui-nav-item-disabled-opacity: var(--svelte-ui-disabled-opacity);
+	--svelte-ui-nav-item-padding-x: 12px;
+	--svelte-ui-nav-item-padding-y: 8px;
+	--svelte-ui-nav-item-padding: var(--svelte-ui-nav-item-padding-y)
+		var(--svelte-ui-nav-item-padding-x);
+	--svelte-ui-nav-item-border-radius: var(--svelte-ui-border-radius);
+	--svelte-ui-nav-item-label-line-height: 1.3;
 	/* Nav: mobile-tab */
 	--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-item-padding: 8px 12px;
-	--svelte-ui-nav-item-border-radius: var(--svelte-ui-border-radius);
 	/* Nav: vertical */
 	--svelte-ui-nav-vertical-item-gap: 8px;
 	/* Nav: horizontal */
 	--svelte-ui-nav-horizontal-item-gap: 8px;
+	/* Nav: sub-menu */
+	--svelte-ui-nav-sub-popup-min-width: 160px;
+	--svelte-ui-nav-sub-popup-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+	--svelte-ui-nav-sub-bar-min-height: 48px;
+	--svelte-ui-nav-item-child-indent: 32px;
+	--svelte-ui-nav-bottom-sheet-overlay-bg: rgba(0, 0, 0, 0.4);
+	--svelte-ui-nav-bottom-sheet-border-radius: 16px 16px 0 0;
+	--svelte-ui-nav-bottom-sheet-padding: 16px 8px;
 
 	/* Input */
 	--svelte-ui-input-height: var(--svelte-ui-form-height);
@@ -879,10 +883,10 @@
 		--svelte-ui-slider-custom-thumb-focus-shadow: 0 0 0 3px Highlight;
 		--svelte-ui-slider-custom-thumb-color: HighlightText;
 
-		/* Tab */
-		--svelte-ui-tab-item-text-color: CanvasText;
-		--svelte-ui-tab-item-selected-text-color: Highlight;
-		--svelte-ui-tab-item-selected-bar-color: Highlight;
+		/* Nav: underline */
+		--svelte-ui-nav-item-underline-text-color: CanvasText;
+		--svelte-ui-nav-item-underline-selected-text-color: Highlight;
+		--svelte-ui-nav-item-underline-bar-color: Highlight;
 
 		/* Radio */
 		--svelte-ui-radio-border-color: CanvasText;

package/dist/components/Button.svelte

@@ -24,21 +24,27 @@
 		children: Snippet;
 
 		// HTML属性系
+		/** @default 'button' */
 		type?: HTMLButtonAttributes['type'];
 		tabindex?: number | null;
 
 		// スタイル/レイアウト
 		customStyle?: HTMLButtonAttributes['style'];
+		/** @default 'ghost' */
 		variant?: ButtonVariant;
+		/** @default 'medium' */
 		size?: ButtonSize;
+		/** Custom CSS color value. Overrides the theme color. */
 		color?: string;
 		fullWidth?: boolean;
+		/** Content alignment. Useful with `fullWidth`. @default 'center' */
 		align?: 'left' | 'center' | 'right';
-		minWidth?: string | number;
 		rounded?: boolean;
+		/** Adds a chevron-down icon. Use when the button opens a popup/dropdown. @default false */
 		popup?: boolean;
 
 		// アイコン関連
+		/** Material Symbols icon name. */
 		icon?: string;
 		iconFilled?: boolean;
 		iconWeight?: IconWeight;
@@ -48,6 +54,7 @@
 
 		// 状態/動作
 		disabled?: boolean;
+		/** Shows a loading spinner and disables interaction. @default false */
 		loading?: boolean;
 
 		// ARIA/アクセシビリティ

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

@@ -5,17 +5,23 @@ import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, Pointer
 import type { ButtonVariant, ButtonSize } from '../types/propOptions';
 export type ButtonProps = {
     children: Snippet;
+    /** @default 'button' */
     type?: HTMLButtonAttributes['type'];
     tabindex?: number | null;
     customStyle?: HTMLButtonAttributes['style'];
+    /** @default 'ghost' */
     variant?: ButtonVariant;
+    /** @default 'medium' */
     size?: ButtonSize;
+    /** Custom CSS color value. Overrides the theme color. */
     color?: string;
     fullWidth?: boolean;
+    /** Content alignment. Useful with `fullWidth`. @default 'center' */
     align?: 'left' | 'center' | 'right';
-    minWidth?: string | number;
     rounded?: boolean;
+    /** Adds a chevron-down icon. Use when the button opens a popup/dropdown. @default false */
     popup?: boolean;
+    /** Material Symbols icon name. */
     icon?: string;
     iconFilled?: boolean;
     iconWeight?: IconWeight;
@@ -23,6 +29,7 @@ export type ButtonProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     disabled?: boolean;
+    /** Shows a loading spinner and disables interaction. @default false */
     loading?: boolean;
     ariaLabel?: string;
     ariaDescribedby?: string;

package/dist/components/Checkbox.svelte

@@ -15,23 +15,30 @@
 	// =========================================================================
 	export type CheckboxProps = {
 		// Snippet
+		/** Label content displayed next to the checkbox. */
 		children?: Snippet;
 
 		// 基本プロパティ
+		/** Native `name` attribute. */
 		name?: string;
+		/** Checked state. Supports `bind:value` for two-way binding. */
 		value: boolean;
+		/** Shows the indeterminate (partially checked) state. @default false */
 		indeterminate?: boolean;
 
 		// HTML属性系
 		id?: string;
 		// スタイル/レイアウト
+		/** Checkbox size. @default 'medium' */
 		size?: 'small' | 'medium' | 'large';
 
 		// 状態/動作
+		/** Disables the checkbox. @default false */
 		disabled?: boolean;
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
+		/** Disables animations for users who prefer reduced motion. @default false */
 		reducedMotion?: boolean;
 
 		// フォーカスイベント

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

@@ -1,14 +1,21 @@
 import { type Snippet } from 'svelte';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type CheckboxProps = {
+    /** Label content displayed next to the checkbox. */
     children?: Snippet;
+    /** Native `name` attribute. */
     name?: string;
+    /** Checked state. Supports `bind:value` for two-way binding. */
     value: boolean;
+    /** Shows the indeterminate (partially checked) state. @default false */
     indeterminate?: boolean;
     id?: string;
+    /** Checkbox size. @default 'medium' */
     size?: 'small' | 'medium' | 'large';
+    /** Disables the checkbox. @default false */
     disabled?: boolean;
     required?: boolean;
+    /** Disables animations for users who prefer reduced motion. @default false */
     reducedMotion?: boolean;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;

package/dist/components/CheckboxGroup.svelte

@@ -13,14 +13,18 @@
 
 	export type CheckboxGroupProps = {
 		// 基本プロパティ
+		/** `{ label, value, disabled? }[]` */
 		options: Option[];
+		/** Array of currently checked values. Supports `bind:value`. */
 		value: OptionValue[];
 
 		// スタイル/レイアウト
+		/** @default 'vertical' */
 		direction?: 'vertical' | 'horizontal';
 		gap?: string | number;
 		wrap?: boolean;
 		minOptionWidth?: string | number;
+		/** @default 'medium' */
 		size?: 'small' | 'medium' | 'large';
 
 		// 状態/動作
@@ -28,6 +32,7 @@
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
+		/** Disables animations for accessibility. @default false */
 		reducedMotion?: boolean;
 
 		// 入力イベント

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

@@ -1,15 +1,20 @@
 import type { Option, OptionValue } from '../types/options';
 import type { BivariantValueHandler } from '../types/callbackHandlers';
 export type CheckboxGroupProps = {
+    /** `{ label, value, disabled? }[]` */
     options: Option[];
+    /** Array of currently checked values. Supports `bind:value`. */
     value: OptionValue[];
+    /** @default 'vertical' */
     direction?: 'vertical' | 'horizontal';
     gap?: string | number;
     wrap?: boolean;
     minOptionWidth?: string | number;
+    /** @default 'medium' */
     size?: 'small' | 'medium' | 'large';
     disabled?: boolean;
     required?: boolean;
+    /** Disables animations for accessibility. @default false */
     reducedMotion?: boolean;
     onchange?: BivariantValueHandler<OptionValue[]>;
 };

package/dist/components/ColorPicker.svelte

@@ -18,6 +18,7 @@
 	// =========================================================================
 	export type ColorPickerProps = {
 		// 基本プロパティ
+		/** Hex color string (e.g. `"#ff0000"`). Supports `bind:value`. */
 		value: string | null | undefined;
 
 		// HTML属性系
@@ -25,6 +26,7 @@
 		ariaLabel?: string;
 		// スタイル/レイアウト
 		customStyle?: string;
+		/** @default 'outline' */
 		focusStyle?: 'background' | 'outline' | 'none';
 		fullWidth?: boolean;
 		width?: string | number | null;
@@ -35,6 +37,7 @@
 		// 状態/動作
 		disabled?: boolean;
 		readonly?: boolean;
+		/** Shows a clear button when a value is selected. @default false */
 		clearable?: boolean;
 		clearButtonAriaLabel?: string;
 		iconVariant?: IconVariant;

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

@@ -1,10 +1,12 @@
 import type { IconVariant } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type ColorPickerProps = {
+    /** Hex color string (e.g. `"#ff0000"`). Supports `bind:value`. */
     value: string | null | undefined;
     id?: string;
     ariaLabel?: string;
     customStyle?: string;
+    /** @default 'outline' */
     focusStyle?: 'background' | 'outline' | 'none';
     fullWidth?: boolean;
     width?: string | number | null;
@@ -13,6 +15,7 @@ export type ColorPickerProps = {
     rounded?: boolean;
     disabled?: boolean;
     readonly?: boolean;
+    /** Shows a clear button when a value is selected. @default false */
     clearable?: boolean;
     clearButtonAriaLabel?: string;
     iconVariant?: IconVariant;

package/dist/components/Combobox.svelte

@@ -20,7 +20,9 @@
 	export type ComboboxProps = {
 		// 基本プロパティ
 		name?: string;
+		/** Supports `bind:value`. */
 		value: string | number | null | undefined;
+		/** Dropdown suggestion list. */
 		options: string[];
 
 		// HTML属性系
@@ -30,7 +32,9 @@
 
 		// スタイル/レイアウト
 		customStyle?: string;
+		/** Renders inline (no border/background). @default false */
 		inline?: boolean;
+		/** @default 'outline' */
 		focusStyle?: 'background' | 'outline' | 'none';
 		placeholder?: string;
 		fullWidth?: boolean;
@@ -43,7 +47,9 @@
 		disabled?: boolean;
 		readonly?: boolean;
 		required?: boolean;
+		/** Filters options based on typed input. @default false */
 		filterable?: boolean;
+		/** Shows a clear button when a value is entered. @default false */
 		clearable?: boolean;
 
 		// 入力イベント

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

@@ -1,13 +1,17 @@
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 export type ComboboxProps = {
     name?: string;
+    /** Supports `bind:value`. */
     value: string | number | null | undefined;
+    /** Dropdown suggestion list. */
     options: string[];
     id?: string | null;
     tabindex?: number | null;
     maxlength?: number | null;
     customStyle?: string;
+    /** Renders inline (no border/background). @default false */
     inline?: boolean;
+    /** @default 'outline' */
     focusStyle?: 'background' | 'outline' | 'none';
     placeholder?: string;
     fullWidth?: boolean;
@@ -18,7 +22,9 @@ export type ComboboxProps = {
     disabled?: boolean;
     readonly?: boolean;
     required?: boolean;
+    /** Filters options based on typed input. @default false */
     filterable?: boolean;
+    /** Shows a clear button when a value is entered. @default false */
     clearable?: boolean;
     onchange?: BivariantValueHandler<string | number | null | undefined>;
     oninput?: BivariantValueHandler<string | number | null | undefined>;

package/dist/components/ConfirmDialog.svelte

@@ -20,12 +20,16 @@
 		id?: string;
 
 		// スタイル/レイアウト
+		/** Renders the confirm button in a destructive (red) style. @default false */
 		danger?: boolean;
+		/** @default 400 */
 		width?: string | number;
 		scrollable?: boolean;
 
 		// 状態/動作
+		/** Use `confirmDialogRef.open()` / `.close()` instead of binding this directly. */
 		isOpen?: boolean;
+		/** Closes when clicking the backdrop. @default true */
 		closeIfClickOutside?: boolean;
 		focusFirstOnOpen?: boolean;
 
@@ -74,14 +78,17 @@
 		close();
 	};
 
+	/** Opens the dialog. */
 	export const open = (): void => {
 		isOpen = true;
 	};
 
+	/** Closes the dialog. */
 	export const close = (): void => {
 		isOpen = false;
 	};
 
+	/** Toggles between open and closed. */
 	export const toggle = (): void => {
 		isOpen = !isOpen;
 	};

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

@@ -4,19 +4,23 @@ export type ConfirmDialogProps = {
     submitLabel?: string;
     cancelLabel?: string;
     id?: string;
+    /** Renders the confirm button in a destructive (red) style. @default false */
     danger?: boolean;
+    /** @default 400 */
     width?: string | number;
     scrollable?: boolean;
+    /** Use `confirmDialogRef.open()` / `.close()` instead of binding this directly. */
     isOpen?: boolean;
+    /** Closes when clicking the backdrop. @default true */
     closeIfClickOutside?: boolean;
     focusFirstOnOpen?: boolean;
     onSubmit?: () => void;
     onCancel?: () => void;
 };
 declare const ConfirmDialog: import("svelte").Component<ConfirmDialogProps, {
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
+    /** Opens the dialog. */ open: () => void;
+    /** Closes the dialog. */ close: () => void;
+    /** Toggles between open and closed. */ toggle: () => void;
 }, "isOpen">;
 type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
 export default ConfirmDialog;

package/dist/components/Datepicker.svelte

@@ -33,16 +33,21 @@
 	// =========================================================================
 	export type DatepickerProps = {
 		// 基本プロパティ
+		/** Selected date (single mode) or range (range mode). Supports `bind:value`. */
 		value: Date | { start: Date; end: Date } | undefined;
+		/** dayjs format string for display (e.g. `"YYYY/MM/DD"`). */
 		format?: string;
 		placeholder?: string;
 		locale?: 'en' | 'ja' | 'fr' | 'de' | 'es' | 'zh-cn';
+		/** Separator between start and end dates in range mode. @default ' - ' */
 		rangeSeparator?: string;
 
 		// HTML属性系
 		id?: string;
 		// スタイル/レイアウト
+		/** Renders inline (no border/background). @default false */
 		inline?: boolean;
+		/** @default 'outline' */
 		focusStyle?: FocusStyle;
 		fullWidth?: boolean;
 		width?: string | number | null;
@@ -51,6 +56,7 @@
 		rounded?: boolean;
 
 		// アイコン関連
+		/** Shows a calendar icon. @default false */
 		hasIcon?: boolean;
 		iconFilled?: boolean;
 		iconWeight?: IconWeight;
@@ -61,8 +67,11 @@
 		// 状態/動作
 		disabled?: boolean;
 		readonly?: boolean;
+		/** `'single'` for one date, `'range'` for start/end selection. @default 'single' */
 		mode?: DatepickerMode;
+		/** Allows typing a date directly in the input. @default false */
 		enableTextInput?: boolean;
+		/** Opens the calendar when the input is clicked. @default true */
 		enableClickToOpen?: boolean;
 		minDate?: Date;
 		maxDate?: Date;
@@ -570,15 +579,18 @@
 		return match ? match[0] : trimmed;
 	};
 
+	/** Opens the calendar popup. */
 	export const open = () => {
 		datapickerCalendarRef?.reset();
 		popupRef?.open();
 	};
 
+	/** Closes the calendar popup. */
 	export const close = () => {
 		popupRef?.close();
 	};
 
+	/** Toggles the calendar popup. */
 	export const toggle = () => {
 		datapickerCalendarRef?.reset();
 		popupRef?.toggle();

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

@@ -8,22 +8,28 @@ import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../typ
 import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 import type { DatepickerMode, FocusStyle } from '../types/propOptions';
 export type DatepickerProps = {
+    /** Selected date (single mode) or range (range mode). Supports `bind:value`. */
     value: Date | {
         start: Date;
         end: Date;
     } | undefined;
+    /** dayjs format string for display (e.g. `"YYYY/MM/DD"`). */
     format?: string;
     placeholder?: string;
     locale?: 'en' | 'ja' | 'fr' | 'de' | 'es' | 'zh-cn';
+    /** Separator between start and end dates in range mode. @default ' - ' */
     rangeSeparator?: string;
     id?: string;
+    /** Renders inline (no border/background). @default false */
     inline?: boolean;
+    /** @default 'outline' */
     focusStyle?: FocusStyle;
     fullWidth?: boolean;
     width?: string | number | null;
     minWidth?: string | number | null;
     maxWidth?: string | number | null;
     rounded?: boolean;
+    /** Shows a calendar icon. @default false */
     hasIcon?: boolean;
     iconFilled?: boolean;
     iconWeight?: IconWeight;
@@ -32,8 +38,11 @@ export type DatepickerProps = {
     iconVariant?: IconVariant;
     disabled?: boolean;
     readonly?: boolean;
+    /** `'single'` for one date, `'range'` for start/end selection. @default 'single' */
     mode?: DatepickerMode;
+    /** Allows typing a date directly in the input. @default false */
     enableTextInput?: boolean;
+    /** Opens the calendar when the input is clicked. @default true */
     enableClickToOpen?: boolean;
     minDate?: Date;
     maxDate?: Date;
@@ -68,9 +77,9 @@ export type DatepickerProps = {
     [key: string]: any;
 };
 declare const Datepicker: import("svelte").Component<DatepickerProps, {
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
+    /** Opens the calendar popup. */ open: () => void;
+    /** Closes the calendar popup. */ close: () => void;
+    /** Toggles the calendar popup. */ toggle: () => void;
 }, "value">;
 type Datepicker = ReturnType<typeof Datepicker>;
 export default Datepicker;

package/dist/components/Dialog.svelte

@@ -34,15 +34,23 @@
 		id?: string;
 
 		// スタイル/レイアウト
+		/** Dialog width in px (number) or any CSS unit (string). @default 320 */
 		width?: string | number;
+		/** Inline style applied to the body area. */
 		bodyStyle?: string;
+		/** Removes default body padding. @default false */
 		noPadding?: boolean;
 
 		// 状態/動作
+		/** Use `dialogRef.open()` / `.close()` instead of binding this directly. */
 		isOpen?: boolean;
+		/** Makes the body area scrollable when content overflows. @default false */
 		scrollable?: boolean;
+		/** Closes when clicking the backdrop. @default true */
 		closeIfClickOutside?: boolean;
+		/** Returns focus to the trigger element on close. @default false */
 		restoreFocus?: boolean;
+		/** Focuses the first focusable element on open. @default false */
 		focusFirstOnOpen?: boolean;
 
 		// ARIA/アクセシビリティ
@@ -85,18 +93,22 @@
 	// =========================================================================
 	// Methods
 	// =========================================================================
+	/** Opens the dialog. */
 	export const open = (): void => {
 		modalRef?.open(title || ariaLabel);
 	};
 
+	/** Closes the dialog. */
 	export const close = (): void => {
 		modalRef?.close(title || ariaLabel);
 	};
 
+	/** Toggles between open and closed. */
 	export const toggle = (): void => {
 		modalRef?.toggle(title || ariaLabel);
 	};
 
+	/** @internal Completes the close animation. Called automatically. */
 	export const closeEnd = (): void => {
 		modalRef?.closeEnd();
 	};

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

@@ -18,22 +18,30 @@ export type DialogProps = {
     title?: string;
     description?: string;
     id?: string;
+    /** Dialog width in px (number) or any CSS unit (string). @default 320 */
     width?: string | number;
+    /** Inline style applied to the body area. */
     bodyStyle?: string;
+    /** Removes default body padding. @default false */
     noPadding?: boolean;
+    /** Use `dialogRef.open()` / `.close()` instead of binding this directly. */
     isOpen?: boolean;
+    /** Makes the body area scrollable when content overflows. @default false */
     scrollable?: boolean;
+    /** Closes when clicking the backdrop. @default true */
     closeIfClickOutside?: boolean;
+    /** Returns focus to the trigger element on close. @default false */
     restoreFocus?: boolean;
+    /** Focuses the first focusable element on open. @default false */
     focusFirstOnOpen?: boolean;
     ariaLabel?: string;
     ariaDescribedby?: string;
 };
 declare const Dialog: import("svelte").Component<DialogProps, {
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-    closeEnd: () => void;
+    /** Opens the dialog. */ open: () => void;
+    /** Closes the dialog. */ close: () => void;
+    /** Toggles between open and closed. */ toggle: () => void;
+    /** @internal Completes the close animation. Called automatically. */ closeEnd: () => void;
 }, "isOpen">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/components/Drawer.svelte

@@ -34,16 +34,25 @@
 		id?: string;
 
 		// スタイル/レイアウト
+		/** Drawer width in px (number) or any CSS unit (string). */
 		width?: string | number | undefined;
+		/** @default 'left' */
 		position?: 'left' | 'right';
+		/** Inline style applied to the body area. */
 		bodyStyle?: string;
+		/** Removes default body padding. @default false */
 		noPadding?: boolean;
 
 		// 状態/動作
+		/** Use `drawerRef.open()` / `.close()` instead of binding this directly. */
 		isOpen?: boolean;
+		/** Makes the body area scrollable when content overflows. @default false */
 		scrollable?: boolean;
+		/** Closes when clicking the backdrop. @default true */
 		closeIfClickOutside?: boolean;
+		/** Returns focus to the trigger element on close. @default false */
 		restoreFocus?: boolean;
+		/** Focuses the first focusable element on open. @default false */
 		focusFirstOnOpen?: boolean;
 
 		// ARIA/アクセシビリティ
@@ -87,18 +96,22 @@
 	// =========================================================================
 	// Methods
 	// =========================================================================
+	/** Opens the drawer. */
 	export const open = (): void => {
 		modalRef?.open(title || ariaLabel);
 	};
 
+	/** Closes the drawer. */
 	export const close = (): void => {
 		modalRef?.close(title || ariaLabel);
 	};
 
+	/** Toggles between open and closed. */
 	export const toggle = (): void => {
 		modalRef?.toggle(title || ariaLabel);
 	};
 
+	/** @internal Completes the close animation. Called automatically. */
 	export const closeEnd = (): void => {
 		modalRef?.closeEnd();
 	};