@14ch/svelte-ui 0.0.12 → 0.0.14

package/dist/components/Drawer.svelte

@@ -20,6 +20,36 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type DrawerProps = {
+		// Snippet
+		header?: Snippet;
+		children?: Snippet;
+		footer?: Snippet;
+
+		// 基本プロパティ
+		title?: string;
+		description?: string;
+
+		// HTML属性
+		id?: string;
+
+		// スタイル/レイアウト
+		width?: string | number;
+		position?: 'left' | 'right';
+		bodyStyle?: string;
+		noPadding?: boolean;
+
+		// 状態/動作
+		isOpen?: boolean;
+		scrollable?: boolean;
+		closeIfClickOutside?: boolean;
+		restoreFocus?: boolean;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaDescribedby?: string;
+	};
+
 	let {
 		// Snippet
 		header,
@@ -48,35 +78,7 @@
 		// ARIA/アクセシビリティ
 		ariaLabel = 'Drawer',
 		ariaDescribedby
-	}: {
-		// Snippet
-		header?: Snippet;
-		children?: Snippet;
-		footer?: Snippet;
-
-		// 基本プロパティ
-		title?: string;
-		description?: string;
-
-		// HTML属性
-		id?: string;
-
-		// スタイル/レイアウト
-		width?: string | number;
-		position?: 'left' | 'right';
-		bodyStyle?: string;
-		noPadding?: boolean;
-
-		// 状態/動作
-		isOpen?: boolean;
-		scrollable?: boolean;
-		closeIfClickOutside?: boolean;
-		restoreFocus?: boolean;
-
-		// ARIA/アクセシビリティ
-		ariaLabel?: string;
-		ariaDescribedby?: string;
-	} = $props();
+	}: DrawerProps = $props();
 
 	let modalRef: Modal;
 
@@ -308,7 +310,7 @@
   align-items: center;
   justify-content: stretch;
   min-height: var(--svelte-ui-drawer-header-height);
-  padding: var(--svelte-ui-drawer-padding);
+  padding: var(--svelte-ui-drawer-header-padding);
   margin-bottom: calc(0px - var(--svelte-ui-drawer-body-padding));
 }
 .drawer__header .drawer__title {

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

@@ -11,7 +11,7 @@
      * This prevents state synchronization bugs and ensures consistent behavior.
      */
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+export type DrawerProps = {
     header?: Snippet;
     children?: Snippet;
     footer?: Snippet;
@@ -29,7 +29,7 @@ type $$ComponentProps = {
     ariaLabel?: string;
     ariaDescribedby?: string;
 };
-declare const Drawer: import("svelte").Component<$$ComponentProps, {
+declare const Drawer: import("svelte").Component<DrawerProps, {
     open: () => void;
     close: () => void;
     toggle: () => void;

package/dist/components/Fab.svelte

@@ -4,19 +4,79 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-	import Icon from './Icon.svelte';
-	import LoadingSpinner from './LoadingSpinner.svelte';
 	import type {
 		FocusHandler,
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
 		PointerHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
+	import type { ButtonVariant, FabPosition } from '../types/propOptions';
+	import Icon from './Icon.svelte';
+	import LoadingSpinner from './LoadingSpinner.svelte';
+	import { getStyleFromNumber } from '../utils/style';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type FabProps = {
+		children?: Snippet;
+		buttonAttributes?: HTMLButtonAttributes | undefined;
+		type?: HTMLButtonAttributes['type'];
+		customStyle?: HTMLButtonAttributes['style'];
+		disabled?: boolean;
+		loading?: boolean;
+		icon?: string;
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+		color?: string;
+		variant?: ButtonVariant;
+		position?: FabPosition;
+		bottomOffset?: string | number;
+		sideOffset?: string | number;
+		useSafeArea?: boolean;
+		shadow?: boolean;
+		reducedMotion?: boolean;
+		ariaLabel?: string;
+		ariaDescribedby?: string;
+		// フォーカスイベント
+		onfocus?: FocusHandler;
+		onblur?: FocusHandler;
+
+		// キーボードイベント
+		onkeydown?: KeyboardHandler;
+		onkeyup?: KeyboardHandler;
+
+		// マウスイベント
+		onclick?: MouseHandler;
+		onmousedown?: MouseHandler;
+		onmouseup?: MouseHandler;
+		onmouseenter?: MouseHandler;
+		onmouseleave?: MouseHandler;
+		onmouseover?: MouseHandler;
+		onmouseout?: MouseHandler;
+		oncontextmenu?: MouseHandler;
+		onauxclick?: MouseHandler;
+
+		// タッチイベント
+		ontouchstart?: TouchHandler;
+		ontouchend?: TouchHandler;
+		ontouchmove?: TouchHandler;
+		ontouchcancel?: TouchHandler;
+
+		// ポインターイベント
+		onpointerdown?: PointerHandler;
+		onpointerup?: PointerHandler;
+		onpointerenter?: PointerHandler;
+		onpointerleave?: PointerHandler;
+		onpointermove?: PointerHandler;
+		onpointercancel?: PointerHandler;
+		[key: string]: any;
+	};
+
 	let {
 		// Snippet
 		children,
@@ -30,7 +90,10 @@
 		color,
 		variant = 'filled',
 		position = 'right',
-		hasShadow = false,
+		bottomOffset = 24,
+		sideOffset = 24,
+		useSafeArea = true,
+		shadow = false,
 
 		// アイコン関連
 		icon = '',
@@ -84,60 +147,7 @@
 
 		// その他
 		...restProps
-	}: {
-		children?: Snippet;
-		buttonAttributes?: HTMLButtonAttributes | undefined;
-		type?: HTMLButtonAttributes['type'];
-		customStyle?: HTMLButtonAttributes['style'];
-		disabled?: boolean;
-		loading?: boolean;
-		icon?: string;
-		iconFilled?: boolean;
-		iconWeight?: IconWeight;
-		iconGrade?: IconGrade;
-		iconOpticalSize?: IconOpticalSize;
-		iconVariant?: IconVariant;
-		color?: string;
-		variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
-		position?: 'left' | 'center' | 'right';
-		hasShadow?: boolean;
-		reducedMotion?: boolean;
-		ariaLabel?: string;
-		ariaDescribedby?: string;
-		// フォーカスイベント
-		onfocus?: FocusHandler;
-		onblur?: FocusHandler;
-
-		// キーボードイベント
-		onkeydown?: KeyboardHandler;
-		onkeyup?: KeyboardHandler;
-
-		// マウスイベント
-		onclick?: MouseHandler;
-		onmousedown?: MouseHandler;
-		onmouseup?: MouseHandler;
-		onmouseenter?: MouseHandler;
-		onmouseleave?: MouseHandler;
-		onmouseover?: MouseHandler;
-		onmouseout?: MouseHandler;
-		oncontextmenu?: MouseHandler;
-		onauxclick?: MouseHandler;
-
-		// タッチイベント
-		ontouchstart?: TouchHandler;
-		ontouchend?: TouchHandler;
-		ontouchmove?: TouchHandler;
-		ontouchcancel?: TouchHandler;
-
-		// ポインターイベント
-		onpointerdown?: PointerHandler;
-		onpointerup?: PointerHandler;
-		onpointerenter?: PointerHandler;
-		onpointerleave?: PointerHandler;
-		onpointermove?: PointerHandler;
-		onpointercancel?: PointerHandler;
-		[key: string]: any;
-	} = $props();
+	}: FabProps = $props();
 
 	// =========================================================================
 	// Methods
@@ -275,6 +285,9 @@
 	});
 
 	const hasLabel = $derived(children !== undefined);
+
+	const bottomOffsetStyle = $derived(getStyleFromNumber(bottomOffset));
+	const sideOffsetStyle = $derived(getStyleFromNumber(sideOffset));
 </script>
 
 <button
@@ -290,10 +303,13 @@
 	class:fab--left={position === 'left'}
 	class:fab--center={position === 'center'}
 	class:fab--right={position === 'right'}
-	class:fab--shadow={hasShadow}
+	class:fab--safe-area={useSafeArea}
+	class:fab--shadow={shadow}
 	class:fab--loading={loading}
 	class:fab--no-motion={reducedMotion}
 	style="color: {textColors[variant]}; background-color: {backgroundColors[variant]}; 
+		--fab-bottom: {bottomOffsetStyle};
+		--fab-side: {sideOffsetStyle};
 		{customStyle ?? ''};"
 	onclick={handleClick}
 	onfocus={handleFocus}
@@ -352,7 +368,7 @@
   justify-content: center;
   align-items: center;
   position: fixed;
-  bottom: calc(24px + env(safe-area-inset-bottom));
+  bottom: var(--fab-bottom, 24px);
   height: 56px;
   padding: 0 20px;
   background-color: transparent;
@@ -369,14 +385,17 @@
   transition-duration: var(--svelte-ui-transition-duration);
 }
 .fab.fab--left {
-  left: 24px;
+  left: var(--fab-side, 24px);
 }
 .fab.fab--center {
   left: 50%;
   transform: translateX(-50%);
 }
 .fab.fab--right {
-  right: 24px;
+  right: var(--fab-side, 24px);
+}
+.fab.fab--safe-area {
+  bottom: calc(var(--fab-bottom, 24px) + env(safe-area-inset-bottom, 0px));
 }
 .fab > * {
   z-index: 1;

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

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
-type $$ComponentProps = {
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { ButtonVariant, FabPosition } from '../types/propOptions';
+export type FabProps = {
     children?: Snippet;
     buttonAttributes?: HTMLButtonAttributes | undefined;
     type?: HTMLButtonAttributes['type'];
@@ -16,9 +17,12 @@ type $$ComponentProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     color?: string;
-    variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
-    position?: 'left' | 'center' | 'right';
-    hasShadow?: boolean;
+    variant?: ButtonVariant;
+    position?: FabPosition;
+    bottomOffset?: string | number;
+    sideOffset?: string | number;
+    useSafeArea?: boolean;
+    shadow?: boolean;
     reducedMotion?: boolean;
     ariaLabel?: string;
     ariaDescribedby?: string;
@@ -47,6 +51,6 @@ type $$ComponentProps = {
     onpointercancel?: PointerHandler;
     [key: string]: any;
 };
-declare const Fab: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Fab: import("svelte").Component<FabProps, {}, "">;
 type Fab = ReturnType<typeof Fab>;
 export default Fab;

package/dist/components/FileUploader.svelte

@@ -14,11 +14,61 @@
 		MouseHandler,
 		TouchHandler,
 		PointerHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type FileUploaderProps = {
+		// 基本プロパティ
+		value: FileList | null | undefined;
+		multiple?: boolean;
+		maxFileSize?: number;
+		placeholder?: string;
+
+		// HTML属性系
+		id?: string;
+		accept?: string;
+
+		// スタイル/レイアウト
+		width?: string | number;
+		height?: string | number;
+		rounded?: boolean;
+
+		// アイコン系
+		icon?: string;
+		iconSize?: number;
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+		removeFileAriaLabel?: string;
+
+		// 入力イベント
+		onchange?: BivariantValueHandler<FileList | null | undefined>;
+
+		// フォーカスイベント
+		onfocus?: FocusHandler;
+		onblur?: FocusHandler;
+
+		// キーボードイベント
+		onkeydown?: KeyboardHandler;
+		onkeyup?: KeyboardHandler;
+
+		// マウスイベント
+		onmouseenter?: MouseHandler;
+		onmouseleave?: MouseHandler;
+
+		// タッチイベント
+		ontouchstart?: TouchHandler;
+		ontouchend?: TouchHandler;
+
+		// ポインターイベント
+		onpointerenter?: PointerHandler;
+		onpointerleave?: PointerHandler;
+	};
+
 	let {
 		// 基本プロパティ
 		value = $bindable(),
@@ -67,55 +117,7 @@
 		// ポインターイベント
 		onpointerenter = () => {}, // No params for type inference
 		onpointerleave = () => {} // No params for type inference
-	}: {
-		// 基本プロパティ
-		value: FileList | null | undefined;
-		multiple?: boolean;
-		maxFileSize?: number;
-		placeholder?: string;
-
-		// HTML属性系
-		id?: string;
-		accept?: string;
-
-		// スタイル/レイアウト
-		width?: string | number;
-		height?: string | number;
-		rounded?: boolean;
-
-		// アイコン系
-		icon?: string;
-		iconSize?: number;
-		iconFilled?: boolean;
-		iconWeight?: IconWeight;
-		iconGrade?: IconGrade;
-		iconOpticalSize?: IconOpticalSize;
-		iconVariant?: IconVariant;
-		removeFileAriaLabel?: string;
-
-		// 入力イベント
-		onchange?: BivariantValueHandler<FileList | null | undefined>;
-
-		// フォーカスイベント
-		onfocus?: FocusHandler;
-		onblur?: FocusHandler;
-
-		// キーボードイベント
-		onkeydown?: KeyboardHandler;
-		onkeyup?: KeyboardHandler;
-
-		// マウスイベント
-		onmouseenter?: MouseHandler;
-		onmouseleave?: MouseHandler;
-
-		// タッチイベント
-		ontouchstart?: TouchHandler;
-		ontouchend?: TouchHandler;
-
-		// ポインターイベント
-		onpointerenter?: PointerHandler;
-		onpointerleave?: PointerHandler;
-	} = $props();
+	}: FileUploaderProps = $props();
 
 	let dropAreaRef: HTMLButtonElement;
 	let fileInputRef: HTMLInputElement;

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

@@ -1,6 +1,6 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
-type $$ComponentProps = {
+import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+export type FileUploaderProps = {
     value: FileList | null | undefined;
     multiple?: boolean;
     maxFileSize?: number;
@@ -30,7 +30,7 @@ type $$ComponentProps = {
     onpointerenter?: PointerHandler;
     onpointerleave?: PointerHandler;
 };
-declare const FileUploader: import("svelte").Component<$$ComponentProps, {
+declare const FileUploader: import("svelte").Component<FileUploaderProps, {
     reset: () => void;
 }, "value">;
 type FileUploader = ReturnType<typeof FileUploader>;

package/dist/components/Icon.svelte

@@ -8,6 +8,34 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type IconProps = {
+		// Snippet
+		children: Snippet;
+
+		// 基本プロパティ
+		title?: string;
+		fallbackText?: string;
+
+		// スタイル/レイアウト
+		size?: number;
+		color?: string;
+		customStyle?: string;
+
+		// アイコン関連
+		filled?: boolean;
+		weight?: IconWeight;
+		grade?: IconGrade;
+		opticalSize?: IconOpticalSize;
+		variant?: IconVariant;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		decorative?: boolean;
+
+		// その他
+		[key: string]: any;
+	};
+
 	let {
 		// Snippet
 		children,
@@ -34,33 +62,7 @@
 
 		// その他
 		...restProps
-	}: {
-		// Snippet
-		children: Snippet;
-
-		// 基本プロパティ
-		title?: string;
-		fallbackText?: string;
-
-		// スタイル/レイアウト
-		size?: number;
-		color?: string;
-		customStyle?: string;
-
-		// アイコン関連
-		filled?: boolean;
-		weight?: IconWeight;
-		grade?: IconGrade;
-		opticalSize?: IconOpticalSize;
-		variant?: IconVariant;
-
-		// ARIA/アクセシビリティ
-		ariaLabel?: string;
-		decorative?: boolean;
-
-		// その他
-		[key: string]: any;
-	} = $props();
+	}: IconProps = $props();
 
 	// =========================================================================
 	// $derived

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-type $$ComponentProps = {
+export type IconProps = {
     children: Snippet;
     title?: string;
     fallbackText?: string;
@@ -16,6 +16,6 @@ type $$ComponentProps = {
     decorative?: boolean;
     [key: string]: any;
 };
-declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;