@14ch/svelte-ui 0.0.12 → 0.0.14

package/dist/assets/styles/variables.scss

@@ -376,7 +376,6 @@
 	--svelte-ui-input-icon-space-double-inline: calc(var(--svelte-ui-form-icon-space) * 2);
 	--svelte-ui-input-bg: var(--svelte-ui-form-bg);
 	--svelte-ui-input-border-color: var(--svelte-ui-border-weak-color);
-	--svelte-ui-input-readonly-bg: var(--svelte-ui-form-bg);
 	--svelte-ui-input-text-color: var(--svelte-ui-text-color);
 	--svelte-ui-input-placeholder-color: var(--svelte-ui-text-placeholder-color);
 	--svelte-ui-input-icon-color: var(--svelte-ui-text-subtle-color);
@@ -396,11 +395,6 @@
 	--svelte-ui-textarea-icon-space-inline: var(--svelte-ui-form-icon-space);
 	--svelte-ui-textarea-icon-top: 2px;
 	--svelte-ui-textarea-icon-top-inline: -2px;
-	--svelte-ui-textarea-bg: var(--svelte-ui-form-bg);
-	--svelte-ui-textarea-border-color: var(--svelte-ui-border-weak-color);
-	--svelte-ui-textarea-readonly-bg: var(--svelte-ui-form-bg);
-	--svelte-ui-textarea-text-color: var(--svelte-ui-text-color);
-	--svelte-ui-textarea-placeholder-color: var(--svelte-ui-text-placeholder-color);
 	--svelte-ui-textarea-icon-color: var(--svelte-ui-text-subtle-color);
 
 	/* Select */
@@ -616,8 +610,8 @@
 	/* Drawer */
 	--svelte-ui-drawer-gap: 16px;
 	--svelte-ui-drawer-gap-sm: 8px;
-	--svelte-ui-drawer-padding: 16px 24px;
-	--svelte-ui-drawer-body-padding: 24px;
+	--svelte-ui-drawer-header-padding: 16px 24px;
+	--svelte-ui-drawer-body-padding: 0;
 	--svelte-ui-drawer-header-height: 56px;
 	--svelte-ui-drawer-title-font-size: 1.4rem;
 	--svelte-ui-drawer-description-font-size: 0.875rem;

package/dist/components/Button.svelte

@@ -10,7 +10,8 @@
 		MouseHandler,
 		TouchHandler,
 		PointerHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
+	import type { ButtonVariant, ButtonSize } from '../types/propOptions';
 	import Icon from './Icon.svelte';
 	import LoadingSpinner from './LoadingSpinner.svelte';
 	import { getStyleFromNumber } from '../utils/style';
@@ -18,6 +19,81 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type ButtonProps = {
+		// Snippet
+		children: Snippet;
+
+		// HTML属性系
+		buttonAttributes?: HTMLButtonAttributes | undefined;
+		type?: HTMLButtonAttributes['type'];
+		tabindex?: number | null;
+
+		// スタイル/レイアウト
+		customStyle?: HTMLButtonAttributes['style'];
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		color?: string;
+		fullWidth?: boolean;
+		align?: 'left' | 'center' | 'right';
+		minWidth?: string | number;
+		rounded?: boolean;
+		popup?: boolean;
+
+		// アイコン関連
+		icon?: string;
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+
+		// 状態/動作
+		disabled?: boolean;
+		loading?: boolean;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaDescribedby?: string;
+		ariaExpanded?: boolean;
+		reducedMotion?: boolean;
+
+		// フォーカスイベント
+		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,
@@ -33,6 +109,7 @@
 		size = 'medium',
 		color,
 		fullWidth = false,
+		align = 'center',
 		minWidth = 0,
 		rounded = false,
 		popup = false,
@@ -90,79 +167,7 @@
 
 		// その他
 		...restProps
-	}: {
-		// Snippet
-		children: Snippet;
-
-		// HTML属性系
-		buttonAttributes?: HTMLButtonAttributes | undefined;
-		type?: HTMLButtonAttributes['type'];
-		tabindex?: number | null;
-
-		// スタイル/レイアウト
-		customStyle?: HTMLButtonAttributes['style'];
-		variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
-		size?: 'small' | 'medium' | 'large';
-		color?: string;
-		fullWidth?: boolean;
-		minWidth?: string | number;
-		rounded?: boolean;
-		popup?: boolean;
-
-		// アイコン関連
-		icon?: string;
-		iconFilled?: boolean;
-		iconWeight?: IconWeight;
-		iconGrade?: IconGrade;
-		iconOpticalSize?: IconOpticalSize;
-		iconVariant?: IconVariant;
-
-		// 状態/動作
-		disabled?: boolean;
-		loading?: boolean;
-
-		// ARIA/アクセシビリティ
-		ariaLabel?: string;
-		ariaDescribedby?: string;
-		ariaExpanded?: boolean;
-		reducedMotion?: boolean;
-
-		// フォーカスイベント
-		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();
+	}: ButtonProps = $props();
 
 	const backgroundColors = $derived({
 		filled: color ?? 'var(--svelte-ui-button-bg-filled)',
@@ -308,6 +313,7 @@
 			popup && 'button--popup',
 			rounded && 'button--rounded',
 			fullWidth && 'button--full-width',
+			`button--align-${align}`,
 			loading && 'button--loading',
 			reducedMotion && 'button--no-motion'
 		]
@@ -451,6 +457,14 @@
 		width: 100%;
 	}
 
+	.button--align-left {
+		justify-content: flex-start;
+	}
+
+	.button--align-right {
+		justify-content: flex-end;
+	}
+
 	.button--rounded {
 		border-radius: var(--svelte-ui-button-border-radius-rounded);
 	}
@@ -508,9 +522,8 @@
 	}
 
 	.button__label {
-		width: 100%;
 		display: block;
-		text-align: center;
+		width: auto;
 		line-height: var(--svelte-ui-button-line-height);
 		text-box-trim: trim-both;
 		text-box-edge: cap alphabetic;
@@ -529,6 +542,11 @@
 		justify-content: center;
 	}
 
+	.button--align-left .button__popup-icon {
+		margin-left: auto;
+		margin-right: -4px;
+	}
+
 	.button__loading {
 		position: absolute;
 		top: 50%;
@@ -548,6 +566,11 @@
 		margin-right: -2px;
 	}
 
+	.button--align-left.button--small .button__popup-icon {
+		margin-left: auto;
+		margin-right: -2px;
+	}
+
 	.button--large .button__icon {
 		margin-left: -6px;
 	}
@@ -556,6 +579,11 @@
 		margin-right: -6px;
 	}
 
+	.button--align-left.button--large .button__popup-icon {
+		margin-left: auto;
+		margin-right: -6px;
+	}
+
 	/* Reduced motion */
 	.button--no-motion,
 	.button--no-motion:before,

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

@@ -1,17 +1,19 @@
 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, ButtonSize } from '../types/propOptions';
+export type ButtonProps = {
     children: Snippet;
     buttonAttributes?: HTMLButtonAttributes | undefined;
     type?: HTMLButtonAttributes['type'];
     tabindex?: number | null;
     customStyle?: HTMLButtonAttributes['style'];
-    variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
-    size?: 'small' | 'medium' | 'large';
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     color?: string;
     fullWidth?: boolean;
+    align?: 'left' | 'center' | 'right';
     minWidth?: string | number;
     rounded?: boolean;
     popup?: boolean;
@@ -52,6 +54,6 @@ type $$ComponentProps = {
     onpointercancel?: PointerHandler;
     [key: string]: any;
 };
-declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/Checkbox.svelte

@@ -8,13 +8,75 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler,
-		BivariantValueHandler
-	} from '../types/eventHandlers';
+		PointerHandler
+	} from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type CheckboxProps = {
+		// Snippet
+		children?: Snippet;
+
+		// 基本プロパティ
+		name?: string;
+		value: boolean;
+		indeterminate?: boolean;
+
+		// HTML属性系
+		id?: string;
+		inputAttributes?: HTMLInputAttributes | undefined;
+
+		// スタイル/レイアウト
+		size?: 'small' | 'medium' | 'large';
+
+		// 状態/動作
+		disabled?: boolean;
+		required?: boolean;
+
+		// ARIA/アクセシビリティ
+		reducedMotion?: boolean;
+
+		// 入力イベント
+		onchange?: (value: boolean) => void;
+
+		// フォーカスイベント
+		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,
@@ -76,85 +138,9 @@
 
 		// その他
 		...restProps
-	}: {
-		// Snippet
-		children?: Snippet;
-
-		// 基本プロパティ
-		name?: string;
-		value: boolean;
-		indeterminate?: boolean;
-
-		// HTML属性系
-		id?: string;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
-		// スタイル/レイアウト
-		size?: 'small' | 'medium' | 'large';
+	}: CheckboxProps = $props();
 
-		// 状態/動作
-		disabled?: boolean;
-		required?: boolean;
-
-		// ARIA/アクセシビリティ
-		reducedMotion?: boolean;
-
-		// 入力イベント
-		onchange?: BivariantValueHandler<boolean>;
-
-		// フォーカスイベント
-		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();
-
-	// =========================================================================
-	// $derived
 	// =========================================================================
-	const containerClasses = $derived(
-		[
-			'checkbox',
-			`checkbox--${size}`,
-			disabled && 'checkbox--disabled',
-			reducedMotion && 'checkbox--no-motion'
-		]
-			.filter(Boolean)
-			.join(' ')
-	);
-
-	// =========================================================================
-
 	// Methods
 	// =========================================================================
 	const handleFocus = (event: FocusEvent) => {
@@ -283,6 +269,20 @@
 	const handleChange = (event: Event) => {
 		onchange(value);
 	};
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const containerClasses = $derived(
+		[
+			'checkbox',
+			`checkbox--${size}`,
+			disabled && 'checkbox--disabled',
+			reducedMotion && 'checkbox--no-motion'
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
 </script>
 
 <div class={containerClasses} data-testid="checkbox">

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

@@ -1,7 +1,7 @@
 import { type Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/eventHandlers';
-type $$ComponentProps = {
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+export type CheckboxProps = {
     children?: Snippet;
     name?: string;
     value: boolean;
@@ -12,7 +12,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     required?: boolean;
     reducedMotion?: boolean;
-    onchange?: BivariantValueHandler<boolean>;
+    onchange?: (value: boolean) => void;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -38,6 +38,6 @@ type $$ComponentProps = {
     onpointercancel?: PointerHandler;
     [key: string]: any;
 };
-declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "value" | "indeterminate">;
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/CheckboxGroup.svelte

@@ -1,9 +1,38 @@
+<!-- CheckboxGroup.svelte -->
+
 <script lang="ts">
 	import type { Option, OptionValue } from '../types/options';
 	import Checkbox from './Checkbox.svelte';
 	import { onMount } from 'svelte';
 	import { getStyleFromNumber } from '../utils/style';
-	import type { BivariantValueHandler } from '../types/eventHandlers';
+	import type { BivariantValueHandler } from '../types/callbackHandlers';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+
+	export type CheckboxGroupProps = {
+		// 基本プロパティ
+		options: Option[];
+		value: OptionValue[];
+
+		// スタイル/レイアウト
+		direction?: 'vertical' | 'horizontal';
+		gap?: string | number;
+		wrap?: boolean;
+		minOptionWidth?: string | number;
+		size?: 'small' | 'medium' | 'large';
+
+		// 状態/動作
+		disabled?: boolean;
+		required?: boolean;
+
+		// ARIA/アクセシビリティ
+		reducedMotion?: boolean;
+
+		// 入力イベント
+		onchange?: BivariantValueHandler<OptionValue[]>;
+	};
 
 	let {
 		// 基本プロパティ
@@ -26,44 +55,34 @@
 
 		// 入力イベント
 		onchange = () => {} // No params for type inference
-	}: {
-		// 基本プロパティ
-		options: Option[];
-		value: OptionValue[];
-
-		// スタイル/レイアウト
-		direction?: 'vertical' | 'horizontal';
-		gap?: string | number;
-		wrap?: boolean;
-		minOptionWidth?: string | number;
-		size?: 'small' | 'medium' | 'large';
-
-		// 状態/動作
-		disabled?: boolean;
-		required?: boolean;
+	}: CheckboxGroupProps = $props();
 
-		// ARIA/アクセシビリティ
-		reducedMotion?: boolean;
-
-		// 入力イベント
-		onchange?: BivariantValueHandler<OptionValue[]>;
-	} = $props();
 	let localValues: Record<string, boolean> = $state({});
 
+	// =========================================================================
+	// Lifecycle
+	// =========================================================================
 	onMount(() => {
 		options.forEach((option) => {
-			localValues[option.value] = false;
+			localValues[String(option.value)] = false;
 		});
 	});
 
+	// =========================================================================
+	// Methods
+	// =========================================================================
 	const handleChange = () => {
-		value = options.filter((option) => localValues[option.value]).map((option) => option.value);
+		value = options
+			.filter((option) => localValues[String(option.value)])
+			.map((option) => option.value);
 		onchange(value);
 	};
 
-	const gapStyle = gap !== undefined ? getStyleFromNumber(gap) : undefined;
-
-	const minOptionWidthStyle = getStyleFromNumber(minOptionWidth);
+	// =========================================================================
+	// $defived
+	// =========================================================================
+	const gapStyle = $derived(gap !== undefined ? getStyleFromNumber(gap) : undefined);
+	const minOptionWidthStyle = $derived(getStyleFromNumber(minOptionWidth));
 </script>
 
 <ul
@@ -75,10 +94,10 @@
     "
 >
 	{#each options as option (option.value)}
-		{#if localValues[option.value] !== undefined}
+		{#if localValues[String(option.value)] !== undefined}
 			<li class="checkbox-group__option">
 				<Checkbox
-					bind:value={localValues[option.value]}
+					bind:value={localValues[String(option.value)]}
 					{size}
 					{disabled}
 					{required}

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

@@ -1,6 +1,6 @@
 import type { Option, OptionValue } from '../types/options';
-import type { BivariantValueHandler } from '../types/eventHandlers';
-type $$ComponentProps = {
+import type { BivariantValueHandler } from '../types/callbackHandlers';
+export type CheckboxGroupProps = {
     options: Option[];
     value: OptionValue[];
     direction?: 'vertical' | 'horizontal';
@@ -13,6 +13,6 @@ type $$ComponentProps = {
     reducedMotion?: boolean;
     onchange?: BivariantValueHandler<OptionValue[]>;
 };
-declare const CheckboxGroup: import("svelte").Component<$$ComponentProps, {}, "value">;
+declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "value">;
 type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
 export default CheckboxGroup;