@14ch/svelte-ui 0.0.27 → 0.0.29

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

@@ -18,23 +18,32 @@ export type DrawerProps = {
     title?: string;
     description?: string;
     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;
     ariaLabel?: string;
     ariaDescribedby?: string;
 };
 declare const Drawer: import("svelte").Component<DrawerProps, {
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-    closeEnd: () => void;
+    /** Opens the drawer. */ open: () => void;
+    /** Closes the drawer. */ close: () => void;
+    /** Toggles between open and closed. */ toggle: () => void;
+    /** @internal Completes the close animation. Called automatically. */ closeEnd: () => void;
 }, "isOpen">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

package/dist/components/Fab.svelte

@@ -21,23 +21,34 @@
 	// =========================================================================
 	export type FabProps = {
 		children?: Snippet;
+		/** @default 'button' */
 		type?: HTMLButtonAttributes['type'];
 		customStyle?: HTMLButtonAttributes['style'];
 		disabled?: boolean;
+		/** Shows a loading spinner and disables interaction. @default false */
 		loading?: boolean;
+		/** Material Symbols icon name. */
 		icon?: string;
 		iconFilled?: boolean;
 		iconWeight?: IconWeight;
 		iconGrade?: IconGrade;
 		iconOpticalSize?: IconOpticalSize;
 		iconVariant?: IconVariant;
+		/** Custom CSS color value. Overrides the theme color. */
 		color?: string;
+		/** @default 'ghost' */
 		variant?: ButtonVariant;
+		/** Fixed position on screen. When set, the FAB is `position: fixed`. */
 		position?: FabPosition;
+		/** Distance from the bottom edge when `position` is set. */
 		bottomOffset?: string | number;
+		/** Distance from the side edge when `position` is set. */
 		sideOffset?: string | number;
+		/** Adds safe-area inset padding (for notched devices). @default false */
 		useSafeArea?: boolean;
+		/** @default false */
 		shadow?: boolean;
+		/** Disables animations for accessibility. @default false */
 		reducedMotion?: boolean;
 		ariaLabel?: string;
 		ariaDescribedby?: string;

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

@@ -5,23 +5,34 @@ import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, Pointer
 import type { ButtonVariant, FabPosition } from '../types/propOptions';
 export type FabProps = {
     children?: Snippet;
+    /** @default 'button' */
     type?: HTMLButtonAttributes['type'];
     customStyle?: HTMLButtonAttributes['style'];
     disabled?: boolean;
+    /** Shows a loading spinner and disables interaction. @default false */
     loading?: boolean;
+    /** Material Symbols icon name. */
     icon?: string;
     iconFilled?: boolean;
     iconWeight?: IconWeight;
     iconGrade?: IconGrade;
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
+    /** Custom CSS color value. Overrides the theme color. */
     color?: string;
+    /** @default 'ghost' */
     variant?: ButtonVariant;
+    /** Fixed position on screen. When set, the FAB is `position: fixed`. */
     position?: FabPosition;
+    /** Distance from the bottom edge when `position` is set. */
     bottomOffset?: string | number;
+    /** Distance from the side edge when `position` is set. */
     sideOffset?: string | number;
+    /** Adds safe-area inset padding (for notched devices). @default false */
     useSafeArea?: boolean;
+    /** @default false */
     shadow?: boolean;
+    /** Disables animations for accessibility. @default false */
     reducedMotion?: boolean;
     ariaLabel?: string;
     ariaDescribedby?: string;

package/dist/components/FileUploader.svelte

@@ -21,13 +21,17 @@
 	// =========================================================================
 	export type FileUploaderProps = {
 		// 基本プロパティ
+		/** Supports `bind:value`. */
 		value: FileList | null | undefined;
+		/** Allows selecting multiple files. @default false */
 		multiple?: boolean;
+		/** Maximum file size in bytes. Shows an error if exceeded. */
 		maxFileSize?: number;
 		placeholder?: string;
 
 		// HTML属性系
 		id?: string;
+		/** Accepted file types (e.g. `"image/*"`, `".pdf,.docx"`). */
 		accept?: string;
 
 		// スタイル/レイアウト

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

@@ -1,11 +1,15 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type FileUploaderProps = {
+    /** Supports `bind:value`. */
     value: FileList | null | undefined;
+    /** Allows selecting multiple files. @default false */
     multiple?: boolean;
+    /** Maximum file size in bytes. Shows an error if exceeded. */
     maxFileSize?: number;
     placeholder?: string;
     id?: string;
+    /** Accepted file types (e.g. `"image/*"`, `".pdf,.docx"`). */
     accept?: string;
     width?: string | number;
     height?: string | number;

package/dist/components/Icon.svelte

@@ -10,26 +10,34 @@
 	// =========================================================================
 	export type IconProps = {
 		// Snippet
+		/** Material Symbols icon name (e.g. `"home"`, `"settings"`). */
 		children: Snippet;
 
 		// 基本プロパティ
 		title?: string;
+		/** Text shown when the icon font fails to load. */
 		fallbackText?: string;
 
 		// スタイル/レイアウト
+		/** Icon size in px or CSS unit. @default 24 */
 		size?: number | string;
 		color?: string;
 		customStyle?: string;
 
 		// アイコン関連
+		/** Renders the filled style. @default false */
 		filled?: boolean;
+		/** @default 300 */
 		weight?: IconWeight;
+		/** @default 0 */
 		grade?: IconGrade;
 		opticalSize?: IconOpticalSize;
+		/** @default 'outlined' */
 		variant?: IconVariant;
 
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
+		/** Marks the icon as decorative (hidden from screen readers). @default true */
 		decorative?: boolean;
 
 		// その他

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

@@ -1,18 +1,26 @@
 import type { Snippet } from 'svelte';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 export type IconProps = {
+    /** Material Symbols icon name (e.g. `"home"`, `"settings"`). */
     children: Snippet;
     title?: string;
+    /** Text shown when the icon font fails to load. */
     fallbackText?: string;
+    /** Icon size in px or CSS unit. @default 24 */
     size?: number | string;
     color?: string;
     customStyle?: string;
+    /** Renders the filled style. @default false */
     filled?: boolean;
+    /** @default 300 */
     weight?: IconWeight;
+    /** @default 0 */
     grade?: IconGrade;
     opticalSize?: IconOpticalSize;
+    /** @default 'outlined' */
     variant?: IconVariant;
     ariaLabel?: string;
+    /** Marks the icon as decorative (hidden from screen readers). @default true */
     decorative?: boolean;
     [key: string]: any;
 };

package/dist/components/IconButton.svelte

@@ -21,21 +21,28 @@
 	// =========================================================================
 	export type IconButtonProps = {
 		// Snippet
+		/** Material Symbols icon name (e.g. `"close"`, `"edit"`). */
 		children: Snippet;
 
 		// HTML属性系
+		/** @default 'button' */
 		type?: 'button' | 'submit' | 'reset' | null | undefined;
 		tabindex?: number | null;
 
 		// スタイル/レイアウト
 		customStyle?: HTMLButtonAttributes['style'];
+		/** @default 'ghost' */
 		variant?: ButtonVariant;
+		/** Button size in px. */
 		size?: number;
+		/** Icon font size in px. */
 		fontSize?: number;
+		/** Custom CSS color value. Overrides the theme color. */
 		color?: string;
 		rounded?: boolean;
 
 		// アイコン関連
+		/** Additional Material Symbols icon rendered alongside children. */
 		icon?: string;
 		iconFilled?: boolean;
 		iconWeight?: IconWeight;
@@ -44,21 +51,27 @@
 		iconVariant?: IconVariant;
 
 		// バッジ関連
+		/** Shows a badge indicator on the button. @default false */
 		hasBadge?: boolean;
+		/** Number shown inside the badge. */
 		badgeCount?: number;
 		badgeVariant?: BadgeVariant;
 		badgeColor?: string;
+		/** Caps the badge count display (shows `max+` when exceeded). */
 		badgeMax?: number;
 
 		// 状態/動作
 		disabled?: boolean;
+		/** Shows a loading spinner and disables interaction. @default false */
 		loading?: boolean;
+		/** Toggleable pressed state (for toggle buttons). @default false */
 		pressed?: boolean;
 
 		// ARIA/アクセシビリティ
 		ariaLabel: string;
 		ariaDescribedby?: string;
 		ariaPressed?: boolean;
+		/** Disables animations for accessibility. @default false */
 		reducedMotion?: boolean;
 
 		// フォーカスイベント

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

@@ -4,32 +4,45 @@ import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../typ
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 import type { ButtonVariant, BadgeVariant } from '../types/propOptions';
 export type IconButtonProps = {
+    /** Material Symbols icon name (e.g. `"close"`, `"edit"`). */
     children: Snippet;
+    /** @default 'button' */
     type?: 'button' | 'submit' | 'reset' | null | undefined;
     tabindex?: number | null;
     customStyle?: HTMLButtonAttributes['style'];
+    /** @default 'ghost' */
     variant?: ButtonVariant;
+    /** Button size in px. */
     size?: number;
+    /** Icon font size in px. */
     fontSize?: number;
+    /** Custom CSS color value. Overrides the theme color. */
     color?: string;
     rounded?: boolean;
+    /** Additional Material Symbols icon rendered alongside children. */
     icon?: string;
     iconFilled?: boolean;
     iconWeight?: IconWeight;
     iconGrade?: IconGrade;
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
+    /** Shows a badge indicator on the button. @default false */
     hasBadge?: boolean;
+    /** Number shown inside the badge. */
     badgeCount?: number;
     badgeVariant?: BadgeVariant;
     badgeColor?: string;
+    /** Caps the badge count display (shows `max+` when exceeded). */
     badgeMax?: number;
     disabled?: boolean;
+    /** Shows a loading spinner and disables interaction. @default false */
     loading?: boolean;
+    /** Toggleable pressed state (for toggle buttons). @default false */
     pressed?: boolean;
     ariaLabel: string;
     ariaDescribedby?: string;
     ariaPressed?: boolean;
+    /** Disables animations for accessibility. @default false */
     reducedMotion?: boolean;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;

package/dist/components/ImageUploader.svelte

@@ -22,20 +22,26 @@
 	// =========================================================================
 	export type ImageUploaderProps = {
 		// 基本プロパティ
+		/** Supports `bind:value`. */
 		value: FileList | null | undefined;
+		/** Allows selecting multiple images. @default false */
 		multiple?: boolean;
+		/** Maximum file size in bytes. Shows an error if exceeded. */
 		maxFileSize?: number;
 		placeholder?: string;
 
 		// HTML属性系
 		id?: string;
+		/** Accepted file types (e.g. `"image/*"`). */
 		accept?: string;
 
 		// スタイル/レイアウト
 		width?: string | number;
 		height?: string | number;
 		rounded?: boolean;
+		/** Preview display style. @default 'plain' */
 		previewStyle?: 'plain' | 'framed';
+		/** Adapts preview size to the image aspect ratio. @default false */
 		previewAdaptive?: boolean;
 
 		// アイコン系

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

@@ -1,16 +1,22 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type ImageUploaderProps = {
+    /** Supports `bind:value`. */
     value: FileList | null | undefined;
+    /** Allows selecting multiple images. @default false */
     multiple?: boolean;
+    /** Maximum file size in bytes. Shows an error if exceeded. */
     maxFileSize?: number;
     placeholder?: string;
     id?: string;
+    /** Accepted file types (e.g. `"image/*"`). */
     accept?: string;
     width?: string | number;
     height?: string | number;
     rounded?: boolean;
+    /** Preview display style. @default 'plain' */
     previewStyle?: 'plain' | 'framed';
+    /** Adapts preview size to the image aspect ratio. @default false */
     previewAdaptive?: boolean;
     icon?: string;
     iconSize?: number;

package/dist/components/Input.svelte

@@ -27,6 +27,7 @@
 
 		// HTML属性系
 		id?: string | null;
+		/** @default 'text' */
 		type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'number';
 		tabindex?: number | null;
 		maxlength?: number | null;
@@ -34,24 +35,32 @@
 		min?: number | null;
 		max?: number | null;
 		step?: number | null;
+		/** Decimal places to round and display. Only for `type="number"`. */
 		decimalPlaces?: number | null;
+		/** Show thousands separator in the displayed value. Only for `type="number"`. @default false */
 		enableThousandsSeparator?: boolean;
 		autocomplete?: HTMLInputElement['autocomplete'] | null;
 		spellcheck?: boolean | null;
 		// スタイル/レイアウト
+		/** Renders inline, sized to content. @default false */
 		inline?: boolean;
+		/** @default 'outline' */
 		focusStyle?: FocusStyle;
 		placeholder?: string;
 		fullWidth?: boolean;
+		/** Width as px number or CSS string. */
 		width?: string | number | null;
 		minWidth?: string | number | null;
 		maxWidth?: string | number | null;
 		rounded?: boolean;
 		customStyle?: string;
+		/** Unit label (e.g. `"px"`, `"kg"`) shown next to the value; hidden while focused. */
 		unit?: string;
 
 		// アイコン関連
+		/** Material Symbols icon name shown on the right. */
 		rightIcon?: string;
+		/** Material Symbols icon name shown on the left. */
 		leftIcon?: string;
 		leftIconAriaLabel?: string;
 		rightIconAriaLabel?: string;
@@ -65,9 +74,13 @@
 		disabled?: boolean;
 		readonly?: boolean;
 		required?: boolean;
+		/** Shows a clear (×) button when the input has a value. @default false */
 		clearable?: boolean;
+		/** 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 */
 		enablePasswordVisibilityToggle?: boolean;
+		/** Adds increment/decrement stepper buttons. Only for `type="number"`. @default false */
 		enableNumberStepper?: boolean;
 
 		// フォーカスイベント

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

@@ -5,6 +5,7 @@ export type InputProps = {
     name?: string;
     value: string | number | null | undefined;
     id?: string | null;
+    /** @default 'text' */
     type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'number';
     tabindex?: number | null;
     maxlength?: number | null;
@@ -12,21 +13,29 @@ export type InputProps = {
     min?: number | null;
     max?: number | null;
     step?: number | null;
+    /** Decimal places to round and display. Only for `type="number"`. */
     decimalPlaces?: number | null;
+    /** Show thousands separator in the displayed value. Only for `type="number"`. @default false */
     enableThousandsSeparator?: boolean;
     autocomplete?: HTMLInputElement['autocomplete'] | null;
     spellcheck?: boolean | null;
+    /** Renders inline, sized to content. @default false */
     inline?: boolean;
+    /** @default 'outline' */
     focusStyle?: FocusStyle;
     placeholder?: string;
     fullWidth?: boolean;
+    /** Width as px number or CSS string. */
     width?: string | number | null;
     minWidth?: string | number | null;
     maxWidth?: string | number | null;
     rounded?: boolean;
     customStyle?: string;
+    /** Unit label (e.g. `"px"`, `"kg"`) shown next to the value; hidden while focused. */
     unit?: string;
+    /** Material Symbols icon name shown on the right. */
     rightIcon?: string;
+    /** Material Symbols icon name shown on the left. */
     leftIcon?: string;
     leftIconAriaLabel?: string;
     rightIconAriaLabel?: string;
@@ -38,9 +47,13 @@ export type InputProps = {
     disabled?: boolean;
     readonly?: boolean;
     required?: boolean;
+    /** Shows a clear (×) button when the input has a value. @default false */
     clearable?: boolean;
+    /** 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 */
     enablePasswordVisibilityToggle?: boolean;
+    /** Adds increment/decrement stepper buttons. Only for `type="number"`. @default false */
     enableNumberStepper?: boolean;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;

package/dist/components/LoadingSpinner.svelte

@@ -6,14 +6,18 @@
 	// =========================================================================
 	export type LoadingSpinnerProps = {
 		// スタイル/レイアウト
+		/** Size in px. @default 32 */
 		size?: number;
 		color?: string;
+		/** @default 3 */
 		strokeWidth?: number;
 
 		// 状態/動作
+		/** Animation speed multiplier. @default 1 */
 		speed?: number;
 
 		// ARIA/アクセシビリティ
+		/** Disables animations for accessibility. @default false */
 		reducedMotion?: boolean;
 	};
 

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

@@ -1,8 +1,12 @@
 export type LoadingSpinnerProps = {
+    /** Size in px. @default 32 */
     size?: number;
     color?: string;
+    /** @default 3 */
     strokeWidth?: number;
+    /** Animation speed multiplier. @default 1 */
     speed?: number;
+    /** Disables animations for accessibility. @default false */
     reducedMotion?: boolean;
 };
 declare const LoadingSpinner: import("svelte").Component<LoadingSpinnerProps, {}, "">;

package/dist/components/Modal.svelte

@@ -23,6 +23,7 @@
 		children?: Snippet;
 
 		// 基本プロパティ
+		/** Internal label used for accessibility announcements. @default 'Modal' */
 		componentType?: string;
 
 		// スタイル/レイアウト
@@ -30,9 +31,13 @@
 		customStyles?: string;
 
 		// 状態/動作
+		/** Use `modalRef.open()` / `.close()` instead of binding this directly. */
 		isOpen?: 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/アクセシビリティ
@@ -163,6 +168,7 @@
 	// =========================================================================
 	// Methods
 	// =========================================================================
+	/** Opens the modal. */
 	export const open = (title?: string): void => {
 		if (!dialogRef) return;
 
@@ -181,6 +187,7 @@
 		}, 0);
 	};
 
+	/** Closes the modal. */
 	export const close = (title?: string): void => {
 		if (!dialogRef) return;
 
@@ -191,6 +198,7 @@
 		announceOpenClose(componentType, false, title || ariaLabel || '');
 	};
 
+	/** @internal Completes the close animation. Called automatically. */
 	export const closeEnd = (): void => {
 		if (!dialogRef) return;
 
@@ -203,6 +211,7 @@
 		previousActiveElement = null;
 	};
 
+	/** Toggles between open and closed. */
 	export const toggle = (title?: string): void => {
 		if (isOpen) {
 			close(title);

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

@@ -13,12 +13,17 @@
 import type { Snippet } from 'svelte';
 export type ModalProps = {
     children?: Snippet;
+    /** Internal label used for accessibility announcements. @default 'Modal' */
     componentType?: string;
     customClass?: string;
     customStyles?: string;
+    /** Use `modalRef.open()` / `.close()` instead of binding this directly. */
     isOpen?: 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;
     ariaLabelledby?: string;
@@ -26,10 +31,10 @@ export type ModalProps = {
     id?: string;
 };
 declare const Modal: import("svelte").Component<ModalProps, {
-    open: (title?: string) => void;
-    close: (title?: string) => void;
-    closeEnd: () => void;
-    toggle: (title?: string) => void;
+    /** Opens the modal. */ open: (title?: string) => void;
+    /** Closes the modal. */ close: (title?: string) => void;
+    /** @internal Completes the close animation. Called automatically. */ closeEnd: () => void;
+    /** Toggles between open and closed. */ toggle: (title?: string) => void;
 }, "isOpen">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;