@14ch/svelte-ui 0.0.26 → 0.0.28

package/dist/components/Popup.svelte

@@ -29,23 +29,32 @@
 		children: Snippet;
 
 		// DOM参照
+		/** The element the popup is anchored to. */
 		anchorElement: HTMLElement | null | undefined;
 
 		// 基本プロパティ
+		/** ARIA role for the popup container. @default 'menu' */
 		role?: string;
 
 		// HTML属性
 		id?: string;
 
 		// スタイル/レイアウト
+		/** @default 'bottom' */
 		position?: PopupPosition;
+		/** Gap in px between anchor and popup. @default 8 */
 		margin?: number;
 
 		// 状態/動作
+		/** Use `popupRef.open()` / `.close()` instead of binding this directly. */
 		isOpen?: boolean;
+		/** Traps keyboard focus inside the popup. @default false */
 		focusTrap?: boolean;
+		/** Returns focus to the anchor element on close. @default false */
 		restoreFocus?: boolean;
+		/** On mobile, displays as a fullscreen sheet. @default false */
 		mobileFullscreen?: boolean;
+		/** Repositions automatically when near viewport edges. @default false */
 		enableAutoReposition?: boolean;
 
 		// ARIA/アクセシビリティ
@@ -432,6 +441,7 @@
 		};
 	};
 
+	/** Opens the popup. */
 	export const open = async () => {
 		// 他の開いているPopupをすべて閉じる
 		popupManager.closeOthers(close);
@@ -487,6 +497,7 @@
 		}, 1);
 	};
 
+	/** Closes the popup. */
 	export const close = () => {
 		isOpen = false;
 		removeEventListenersToClose();
@@ -498,6 +509,7 @@
 		// onCloseはアニメーション完了後に呼ぶ（closeEndで実行）
 	};
 
+	/** Toggles between open and closed. */
 	export const toggle = () => {
 		if (isOpen) {
 			close();
@@ -506,6 +518,7 @@
 		}
 	};
 
+	/** Returns whether the popup is currently open. */
 	export const getIsOpen = () => {
 		return isOpen;
 	};

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

@@ -14,15 +14,24 @@ import type { Snippet } from 'svelte';
 import type { PopupPosition } from '../types/propOptions';
 export type PopupProps = {
     children: Snippet;
+    /** The element the popup is anchored to. */
     anchorElement: HTMLElement | null | undefined;
+    /** ARIA role for the popup container. @default 'menu' */
     role?: string;
     id?: string;
+    /** @default 'bottom' */
     position?: PopupPosition;
+    /** Gap in px between anchor and popup. @default 8 */
     margin?: number;
+    /** Use `popupRef.open()` / `.close()` instead of binding this directly. */
     isOpen?: boolean;
+    /** Traps keyboard focus inside the popup. @default false */
     focusTrap?: boolean;
+    /** Returns focus to the anchor element on close. @default false */
     restoreFocus?: boolean;
+    /** On mobile, displays as a fullscreen sheet. @default false */
     mobileFullscreen?: boolean;
+    /** Repositions automatically when near viewport edges. @default false */
     enableAutoReposition?: boolean;
     ariaLabel?: string;
     ariaLabelledby?: string;
@@ -31,10 +40,10 @@ export type PopupProps = {
     onClose?: () => void;
 };
 declare const Popup: import("svelte").Component<PopupProps, {
-    open: () => Promise<void>;
-    close: () => void;
-    toggle: () => void;
-    getIsOpen: () => boolean;
+    /** Opens the popup. */ open: () => Promise<void>;
+    /** Closes the popup. */ close: () => void;
+    /** Toggles between open and closed. */ toggle: () => void;
+    /** Returns whether the popup is currently open. */ getIsOpen: () => boolean;
 }, "isOpen">;
 type Popup = ReturnType<typeof Popup>;
 export default Popup;

package/dist/components/PopupMenu.svelte

@@ -14,12 +14,17 @@
 	// Props, States & Constants
 	// =========================================================================
 	export type PopupMenuProps = {
+		/** Use `popupMenuRef.open()` / `.close()` instead of binding this directly. */
 		isOpen?: boolean;
+		/** The element the menu is anchored to. */
 		anchorElement: HTMLElement | null | undefined;
+		/** @default 'bottom' */
 		position?: PopupPosition;
+		/** `{ label, icon?, href?, callback?, disabled? }[]` or `'separator'` for dividers. */
 		menuItems: (MenuItem | 'separator')[];
 		id?: string;
 		ariaLabel?: string;
+		/** On mobile, displays as a fullscreen sheet. @default true */
 		mobileFullscreen?: boolean;
 		iconFilled?: boolean;
 		iconWeight?: IconWeight;
@@ -192,14 +197,17 @@
 		}
 	};
 
+	/** Opens the menu. */
 	export const open = () => {
 		popupRef?.open();
 	};
 
+	/** Closes the menu. */
 	export const close = () => {
 		popupRef?.close();
 	};
 
+	/** Toggles between open and closed. */
 	export const toggle = () => {
 		popupRef?.toggle();
 	};

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

@@ -2,12 +2,17 @@ import type { MenuItem } from '../types/menuItem';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { PopupPosition } from '../types/propOptions';
 export type PopupMenuProps = {
+    /** Use `popupMenuRef.open()` / `.close()` instead of binding this directly. */
     isOpen?: boolean;
+    /** The element the menu is anchored to. */
     anchorElement: HTMLElement | null | undefined;
+    /** @default 'bottom' */
     position?: PopupPosition;
+    /** `{ label, icon?, href?, callback?, disabled? }[]` or `'separator'` for dividers. */
     menuItems: (MenuItem | 'separator')[];
     id?: string;
     ariaLabel?: string;
+    /** On mobile, displays as a fullscreen sheet. @default true */
     mobileFullscreen?: boolean;
     iconFilled?: boolean;
     iconWeight?: IconWeight;
@@ -16,9 +21,9 @@ export type PopupMenuProps = {
     iconVariant?: IconVariant;
 };
 declare const PopupMenu: import("svelte").Component<PopupMenuProps, {
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
+    /** Opens the menu. */ open: () => void;
+    /** Closes the menu. */ close: () => void;
+    /** Toggles between open and closed. */ toggle: () => void;
 }, "isOpen">;
 type PopupMenu = ReturnType<typeof PopupMenu>;
 export default PopupMenu;

package/dist/components/PopupMenuButton.svelte

@@ -23,21 +23,28 @@
 		children?: Snippet;
 
 		// 基本プロパティ
+		/** `{ label, icon?, href?, callback?, disabled? }[]` or `'separator'` for dividers. */
 		menuItems: (MenuItem | 'separator')[];
 
 		// HTML属性
 		id?: string;
 
 		// スタイル/レイアウト
+		/** @default 'bottom' */
 		position?: PopupPosition;
+		/** @default 'ghost' */
 		variant?: ButtonVariant;
+		/** Button size in px. */
 		size?: number;
+		/** Custom CSS color value. Overrides the theme color. */
 		color?: string;
 		rounded?: boolean;
 
 		// 状態/動作
 		disabled?: boolean;
+		/** On mobile, displays the menu as a fullscreen sheet. @default true */
 		mobileFullscreen?: boolean;
+		/** Stops click event propagation to parent elements. @default false */
 		cancelParentClick?: boolean;
 
 		// フォーカスイベント

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

@@ -4,15 +4,22 @@ import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, Pointer
 import type { PopupPosition, ButtonVariant } from '../types/propOptions';
 export type PopupMenuButtonProps = {
     children?: Snippet;
+    /** `{ label, icon?, href?, callback?, disabled? }[]` or `'separator'` for dividers. */
     menuItems: (MenuItem | 'separator')[];
     id?: string;
+    /** @default 'bottom' */
     position?: PopupPosition;
+    /** @default 'ghost' */
     variant?: ButtonVariant;
+    /** Button size in px. */
     size?: number;
+    /** Custom CSS color value. Overrides the theme color. */
     color?: string;
     rounded?: boolean;
     disabled?: boolean;
+    /** On mobile, displays the menu as a fullscreen sheet. @default true */
     mobileFullscreen?: boolean;
+    /** Stops click event propagation to parent elements. @default false */
     cancelParentClick?: boolean;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;

package/dist/components/Radio.svelte

@@ -17,23 +17,30 @@
 	// =========================================================================
 	export type RadioProps = {
 		// Snippet
+		/** Label content displayed next to the radio button. */
 		children?: Snippet;
 
 		// 基本プロパティ
+		/** Radio group name. All radios in a group must share the same name. */
 		name: string;
+		/** This radio button's value. */
 		value: OptionValue;
+		/** The currently selected value in the group. Radio is checked when `value === currentValue`. Supports `bind:currentValue`. */
 		currentValue: OptionValue;
 
 		// HTML属性系
 		id?: string;
 		// スタイル/レイアウト
+		/** Radio button size. @default 'medium' */
 		size?: 'small' | 'medium' | 'large';
 
 		// 状態/動作
+		/** Disables this radio button. @default false */
 		disabled?: boolean;
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
+		/** Disables animations for users who prefer reduced motion. @default false */
 		reducedMotion?: boolean;
 
 		// フォーカスイベント

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

@@ -2,14 +2,21 @@ import { type Snippet } from 'svelte';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { OptionValue } from '../types/options';
 export type RadioProps = {
+    /** Label content displayed next to the radio button. */
     children?: Snippet;
+    /** Radio group name. All radios in a group must share the same name. */
     name: string;
+    /** This radio button's value. */
     value: OptionValue;
+    /** The currently selected value in the group. Radio is checked when `value === currentValue`. Supports `bind:currentValue`. */
     currentValue: OptionValue;
     id?: string;
+    /** Radio button size. @default 'medium' */
     size?: 'small' | 'medium' | 'large';
+    /** Disables this radio button. @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/RadioGroup.svelte

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

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

@@ -2,15 +2,20 @@ import type { Option, OptionValue } from '../types/options';
 import type { BivariantValueHandler } from '../types/callbackHandlers';
 export type RadioGroupProps = {
     name?: string;
+    /** `{ label, value, disabled? }[]` */
     options: Option[];
+    /** Currently selected value. 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/SegmentedControl.svelte

@@ -17,7 +17,9 @@
 	// =========================================================================
 	export type SegmentedControlProps = {
 		// 基本プロパティ
+		/** `{ label, value, icon?, disabled? }[]` */
 		items: SegmentedControlItem[];
+		/** Currently selected value. Supports `bind:value`. */
 		value: string;
 
 		// HTML属性系
@@ -25,8 +27,10 @@
 		name?: string;
 
 		// スタイル/レイアウト
+		/** @default 'medium' */
 		size?: 'small' | 'medium' | 'large';
 		fullWidth?: boolean;
+		/** Custom CSS color value. Overrides the theme color. */
 		color?: string;
 		rounded?: boolean;
 
@@ -43,6 +47,7 @@
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
 		ariaLabelledby?: string;
+		/** Disables animations for accessibility. @default false */
 		reducedMotion?: boolean;
 
 		// 入力イベント

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

@@ -2,12 +2,16 @@ import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../typ
 import type { SegmentedControlItem } from '../types/segmentedControlItem';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type SegmentedControlProps = {
+    /** `{ label, value, icon?, disabled? }[]` */
     items: SegmentedControlItem[];
+    /** Currently selected value. Supports `bind:value`. */
     value: string;
     id?: string;
     name?: string;
+    /** @default 'medium' */
     size?: 'small' | 'medium' | 'large';
     fullWidth?: boolean;
+    /** Custom CSS color value. Overrides the theme color. */
     color?: string;
     rounded?: boolean;
     iconFilled?: boolean;
@@ -18,6 +22,7 @@ export type SegmentedControlProps = {
     disabled?: boolean;
     ariaLabel?: string;
     ariaLabelledby?: string;
+    /** Disables animations for accessibility. @default false */
     reducedMotion?: boolean;
     onchange?: (value: string) => void;
     onfocus?: FocusHandler;

package/dist/components/Select.svelte

@@ -20,6 +20,7 @@
 		// 基本プロパティ
 		name?: string;
 		value: string | number | null | undefined;
+		/** `{ label, value, disabled? }[]` */
 		options: Option[];
 
 		// HTML属性系
@@ -28,8 +29,11 @@
 		tabindex?: number | null;
 		placeholder?: string;
 		// スタイル/レイアウト
+		/** Number of visible rows (multi-line mode). @default null */
 		size?: number | null;
+		/** Renders inline. @default false */
 		inline?: boolean;
+		/** @default 'outline' */
 		focusStyle?: 'background' | 'outline' | 'none';
 		fullWidth?: boolean;
 		rounded?: boolean;
@@ -368,6 +372,7 @@ select--focus-{focusStyle}"
 		background: transparent;
 		border: none;
 		border-radius: 0;
+		font-family: inherit;
 		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;

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

@@ -3,13 +3,17 @@ import type { Option } from '../types/options';
 export type SelectProps = {
     name?: string;
     value: string | number | null | undefined;
+    /** `{ label, value, disabled? }[]` */
     options: Option[];
     id?: string | null;
     ariaLabel?: string;
     tabindex?: number | null;
     placeholder?: string;
+    /** Number of visible rows (multi-line mode). @default null */
     size?: number | null;
+    /** Renders inline. @default false */
     inline?: boolean;
+    /** @default 'outline' */
     focusStyle?: 'background' | 'outline' | 'none';
     fullWidth?: boolean;
     rounded?: boolean;

package/dist/components/Slider.svelte

@@ -16,18 +16,23 @@
 	// =========================================================================
 	export type SliderProps = {
 		// 基本プロパティ
+		/** Supports `bind:value`. */
 		value: number;
 		name?: string;
 		id?: string;
 
 		// HTML属性系
 		ariaLabel?: string;
+		/** @default 0 */
 		min?: number;
+		/** @default 100 */
 		max?: number;
+		/** @default 1 */
 		step?: number;
 		// スタイル/レイアウト
 		width?: string | number | null;
 		fullWidth?: boolean;
+		/** Custom CSS color for the thumb. */
 		thumbColor?: string | null;
 		thumbWidth?: string | number | null;
 		thumbHeight?: string | number | null;

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

@@ -1,14 +1,19 @@
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type SliderProps = {
+    /** Supports `bind:value`. */
     value: number;
     name?: string;
     id?: string;
     ariaLabel?: string;
+    /** @default 0 */
     min?: number;
+    /** @default 100 */
     max?: number;
+    /** @default 1 */
     step?: number;
     width?: string | number | null;
     fullWidth?: boolean;
+    /** Custom CSS color for the thumb. */
     thumbColor?: string | null;
     thumbWidth?: string | number | null;
     thumbHeight?: string | number | null;

package/dist/components/Snackbar.svelte

@@ -10,11 +10,15 @@
 	// =========================================================================
 	export type SnackbarProps = {
 		// スタイル/レイアウト
+		/** @default 'bottom' */
 		position?: SnackbarPosition;
+		/** Maximum number of snackbars shown at once. @default 5 */
 		maxVisible?: number;
+		/** @default 'filled' */
 		variant?: SnackbarVariant;
 
 		// 状態/動作
+		/** Auto-dismiss duration in milliseconds. @default 3000 */
 		duration?: number;
 	};
 

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

@@ -1,8 +1,12 @@
 import type { SnackbarPosition, SnackbarVariant } from '../types/propOptions';
 export type SnackbarProps = {
+    /** @default 'bottom' */
     position?: SnackbarPosition;
+    /** Maximum number of snackbars shown at once. @default 5 */
     maxVisible?: number;
+    /** @default 'filled' */
     variant?: SnackbarVariant;
+    /** Auto-dismiss duration in milliseconds. @default 3000 */
     duration?: number;
 };
 declare const Snackbar: import("svelte").Component<SnackbarProps, {}, "">;

package/dist/components/Switch.svelte

@@ -18,11 +18,13 @@
 		children?: Snippet;
 
 		// 基本プロパティ
+		/** Supports `bind:value`. */
 		value: boolean;
 
 		// HTML属性系
 		id?: string;
 		// スタイル/レイアウト
+		/** @default 'medium' */
 		size?: 'small' | 'medium' | 'large';
 
 		// 状態/動作
@@ -30,6 +32,7 @@
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
+		/** Disables animations for accessibility. @default false */
 		reducedMotion?: boolean;
 
 		// フォーカスイベント

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

@@ -2,11 +2,14 @@ import type { Snippet } from 'svelte';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type SwitchProps = {
     children?: Snippet;
+    /** Supports `bind:value`. */
     value: boolean;
     id?: string;
+    /** @default 'medium' */
     size?: 'small' | 'medium' | 'large';
     disabled?: boolean;
     required?: boolean;
+    /** Disables animations for accessibility. @default false */
     reducedMotion?: boolean;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;

package/dist/components/Tab.svelte

@@ -11,14 +11,21 @@
 	// =========================================================================
 	export type TabProps = {
 		// 基本プロパティ
+		/** `{ label, href, icon?, disabled? }[]` */
 		tabItems: MenuItem[];
+		/** Prepended to each item's href for active-state matching. */
 		pathPrefix?: string;
+		/** Custom function to determine if an item is active. */
 		customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
+		/** Overrides the auto-detected current path. */
 		currentPath?: string;
 
 		// スタイル/レイアウト
+		/** Custom CSS color for tab labels. */
 		textColor?: string;
+		/** Custom CSS color for the active tab label. */
 		selectedTextColor?: string;
+		/** Custom CSS color for the active tab indicator bar. */
 		selectedBarColor?: string;
 
 		// ARIA/アクセシビリティ

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

@@ -1,11 +1,18 @@
 import type { MenuItem } from '../types/menuItem';
 export type TabProps = {
+    /** `{ label, href, icon?, disabled? }[]` */
     tabItems: MenuItem[];
+    /** Prepended to each item's href for active-state matching. */
     pathPrefix?: string;
+    /** Custom function to determine if an item is active. */
     customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
+    /** Overrides the auto-detected current path. */
     currentPath?: string;
+    /** Custom CSS color for tab labels. */
     textColor?: string;
+    /** Custom CSS color for the active tab label. */
     selectedTextColor?: string;
+    /** Custom CSS color for the active tab indicator bar. */
     selectedBarColor?: string;
     ariaLabel?: string;
     ariaLabelledby?: string;

package/dist/components/Textarea.svelte

@@ -35,10 +35,15 @@
 		autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | null;
 		// スタイル/レイアウト
 		rows?: number;
+		/** Min height as px number or CSS string. */
 		minHeight?: string | number | null;
+		/** Max height as px number or CSS string. Applied when `autoResize` is enabled. */
 		maxHeight?: string | number | null;
+		/** Renders inline. @default false */
 		inline?: boolean;
+		/** @default 'outline' */
 		focusStyle?: FocusStyle;
+		/** Width as px number or CSS string. */
 		width?: string | number | null;
 		fullWidth?: boolean;
 		fullHeight?: boolean;
@@ -55,11 +60,15 @@
 
 		// 状態/動作
 		disabled?: boolean;
+		/** Automatically grows height to fit content. @default false */
 		autoResize?: boolean;
+		/** Allows manual resize via drag handle. @default false */
 		resizable?: boolean;
+		/** Shows a clear (×) button when the textarea has a value. @default false */
 		clearable?: boolean;
 		readonly?: boolean;
 		required?: boolean;
+		/** Converts URLs in the value to clickable links (non-focused view). @default false */
 		linkify?: boolean;
 
 		// フォーカスイベント
@@ -657,6 +666,7 @@
 		background-color: transparent;
 		border: none;
 		border-radius: var(--svelte-ui-textarea-border-radius);
+		font-family: inherit;
 		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;

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

@@ -14,10 +14,15 @@ export type TextareaProps = {
     spellcheck?: boolean | null;
     autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | null;
     rows?: number;
+    /** Min height as px number or CSS string. */
     minHeight?: string | number | null;
+    /** Max height as px number or CSS string. Applied when `autoResize` is enabled. */
     maxHeight?: string | number | null;
+    /** Renders inline. @default false */
     inline?: boolean;
+    /** @default 'outline' */
     focusStyle?: FocusStyle;
+    /** Width as px number or CSS string. */
     width?: string | number | null;
     fullWidth?: boolean;
     fullHeight?: boolean;
@@ -30,11 +35,15 @@ export type TextareaProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     disabled?: boolean;
+    /** Automatically grows height to fit content. @default false */
     autoResize?: boolean;
+    /** Allows manual resize via drag handle. @default false */
     resizable?: boolean;
+    /** Shows a clear (×) button when the textarea has a value. @default false */
     clearable?: boolean;
     readonly?: boolean;
     required?: boolean;
+    /** Converts URLs in the value to clickable links (non-focused view). @default false */
     linkify?: boolean;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;