@14ch/svelte-ui 0.0.13 → 0.0.15

package/dist/assets/styles/variables.scss

@@ -376,7 +376,7 @@
 	--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-text-color: var(--svelte-ui-text-color);
+	--svelte-ui-input-unit-font-size: max(0.5em, var(--svelte-ui-font-size-sm));
 	--svelte-ui-input-placeholder-color: var(--svelte-ui-text-placeholder-color);
 	--svelte-ui-input-icon-color: var(--svelte-ui-text-subtle-color);
 
@@ -387,7 +387,6 @@
 	--svelte-ui-textarea-border-radius-rounded: calc(var(--svelte-ui-textarea-min-height) / 2);
 	--svelte-ui-textarea-bg: var(--svelte-ui-form-bg);
 	--svelte-ui-textarea-border-color: var(--svelte-ui-border-weak-color);
-	--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-space: calc(
 		var(--svelte-ui-form-icon-space) + var(--svelte-ui-form-icon-offset)
@@ -409,7 +408,6 @@
 	--svelte-ui-select-border-radius-rounded: var(--svelte-ui-form-border-radius-rounded);
 	--svelte-ui-select-bg: var(--svelte-ui-form-bg);
 	--svelte-ui-select-border-color: var(--svelte-ui-border-weak-color);
-	--svelte-ui-select-text-color: var(--svelte-ui-text-color);
 	--svelte-ui-select-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
 	--svelte-ui-select-placeholder-color: var(--svelte-ui-text-placeholder-color);
 
@@ -510,7 +508,6 @@
 	--svelte-ui-colorpicker-border-color: var(--svelte-ui-border-weak-color);
 	--svelte-ui-colorpicker-trigger-border-color: var(--svelte-ui-border-color);
 	--svelte-ui-colorpicker-bg: var(--svelte-ui-form-bg);
-	--svelte-ui-colorpicker-text-color: var(--svelte-ui-text-color);
 	--svelte-ui-colorpicker-placeholder-color: var(--svelte-ui-text-placeholder-color);
 
 	/* Combobox */
@@ -524,7 +521,6 @@
 	--svelte-ui-combobox-border-radius-rounded: var(--svelte-ui-form-border-radius-rounded);
 	--svelte-ui-combobox-border-color: var(--svelte-ui-border-weak-color);
 	--svelte-ui-combobox-bg: var(--svelte-ui-surface-color);
-	--svelte-ui-combobox-text-color: var(--svelte-ui-text-color);
 	--svelte-ui-combobox-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
 	--svelte-ui-combobox-option-hover-bg: var(--svelte-ui-hover-overlay);
 	--svelte-ui-combobox-option-selected-bg: var(--svelte-ui-select-overlay);
@@ -610,8 +606,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';
@@ -29,10 +30,11 @@
 
 		// スタイル/レイアウト
 		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;
@@ -107,6 +109,7 @@
 		size = 'medium',
 		color,
 		fullWidth = false,
+		align = 'center',
 		minWidth = 0,
 		rounded = false,
 		popup = false,
@@ -310,6 +313,7 @@
 			popup && 'button--popup',
 			rounded && 'button--rounded',
 			fullWidth && 'button--full-width',
+			`button--align-${align}`,
 			loading && 'button--loading',
 			reducedMotion && 'button--no-motion'
 		]
@@ -453,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);
 	}
@@ -510,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;
@@ -531,6 +542,11 @@
 		justify-content: center;
 	}
 
+	.button--align-left .button__popup-icon {
+		margin-left: auto;
+		margin-right: -4px;
+	}
+
 	.button__loading {
 		position: absolute;
 		top: 50%;
@@ -550,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;
 	}
@@ -558,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';
+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;

package/dist/components/Checkbox.svelte

@@ -8,9 +8,8 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler,
-		BivariantValueHandler
-	} from '../types/eventHandlers';
+		PointerHandler
+	} from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -340,10 +339,11 @@
 	 * ========================================================================= */
 
 	.checkbox {
-		display: flex;
+		display: inline-flex;
 		align-items: center;
 		width: fit-content;
 		min-height: var(--svelte-ui-checkbox-min-height);
+		vertical-align: top;
 		contain: layout;
 	}
 

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

@@ -1,6 +1,6 @@
 import { type Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type CheckboxProps = {
     children?: Snippet;
     name?: string;

package/dist/components/CheckboxGroup.svelte

@@ -5,7 +5,7 @@
 	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
@@ -78,8 +78,11 @@
 		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

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

@@ -1,5 +1,5 @@
 import type { Option, OptionValue } from '../types/options';
-import type { BivariantValueHandler } from '../types/eventHandlers';
+import type { BivariantValueHandler } from '../types/callbackHandlers';
 export type CheckboxGroupProps = {
     options: Option[];
     value: OptionValue[];

package/dist/components/ColorPicker.svelte

@@ -11,16 +11,15 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler,
-		BivariantValueHandler
-	} from '../types/eventHandlers';
+		PointerHandler
+	} from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
 	export type ColorPickerProps = {
 		// 基本プロパティ
-		value: string;
+		value: string | null | undefined;
 
 		// HTML属性系
 		id?: string;
@@ -40,8 +39,8 @@
 		iconVariant?: IconVariant;
 
 		// 入力イベント
-		onchange?: BivariantValueHandler<string>;
-		oninput?: BivariantValueHandler<string>;
+		onchange?: (value: string) => void;
+		oninput?: (value: string) => void;
 
 		// フォーカスイベント
 		onfocus?: FocusHandler;
@@ -142,7 +141,12 @@
 		...restProps
 	}: ColorPickerProps = $props();
 
-	let localValue: string | undefined = $state(value);
+	const getNormalizedValue = (val: string | null | undefined): string => {
+		if (val === null || val === undefined) return '';
+		return val;
+	};
+
+	let localValue: string = $state(getNormalizedValue(value));
 	let prevValue: string = $state('');
 	let isFocused: boolean = $state(false);
 
@@ -155,7 +159,7 @@
 		value;
 		untrack(() => {
 			/* value を localValue に反映 */
-			localValue = value;
+			localValue = getNormalizedValue(value);
 
 			/* value が更新されたらonchangeを実行 */
 			handleValueChange();
@@ -166,7 +170,7 @@
 		localValue;
 		untrack(() => {
 			/* localValue がクリアされた時に value もクリア */
-			if (localValue === '' || localValue === undefined) {
+			if (localValue === '') {
 				value = '';
 				prevValue = '';
 			}
@@ -393,7 +397,10 @@
 			{...inputAttributes}
 			{...restProps}
 		/>
-		<div class="color-picker__color-display" style="background-color: {value};"></div>
+		<div
+			class="color-picker__color-display"
+			style="background-color: {getNormalizedValue(value)};"
+		></div>
 	</div>
 </div>
 
@@ -408,6 +415,7 @@
 		position: relative;
 		width: auto;
 		max-width: 100%;
+		vertical-align: top;
 	}
 
 	/* =============================================

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

@@ -1,8 +1,8 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/eventHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type ColorPickerProps = {
-    value: string;
+    value: string | null | undefined;
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
     customStyle?: string;
@@ -14,8 +14,8 @@ export type ColorPickerProps = {
     clearable?: boolean;
     clearButtonAriaLabel?: string;
     iconVariant?: IconVariant;
-    onchange?: BivariantValueHandler<string>;
-    oninput?: BivariantValueHandler<string>;
+    onchange?: (value: string) => void;
+    oninput?: (value: string) => void;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;

package/dist/components/Combobox.svelte

@@ -13,7 +13,7 @@
 		TouchHandler,
 		PointerHandler,
 		BivariantValueHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -165,10 +165,7 @@
 	let popupRef = $state<any>();
 	let highlightedIndex = $state(-1);
 	let isFocused = $state(false);
-
-	// 各要素のIDを生成
-	const inputId = `${id}-input`;
-	const listboxId = `${id}-listbox`;
+	let isKeyboardNavigation = $state(false);
 
 	// =========================================================================
 	// Methods
@@ -180,6 +177,7 @@
 		popupRef?.close();
 		highlightedIndex = -1;
 		isFocused = false;
+		isKeyboardNavigation = false;
 
 		// スクリーンリーダーアナウンス
 		if (option !== null && option !== undefined) {
@@ -239,6 +237,7 @@
 		switch (event.key) {
 			case 'ArrowDown':
 				event?.preventDefault?.();
+				isKeyboardNavigation = true;
 				if (!isFocused) {
 					isFocused = true;
 					popupRef?.open();
@@ -247,6 +246,7 @@
 				break;
 			case 'ArrowUp':
 				event?.preventDefault?.();
+				isKeyboardNavigation = true;
 				if (!isFocused) {
 					isFocused = true;
 					popupRef?.open();
@@ -263,6 +263,7 @@
 				event?.preventDefault?.();
 				inputValue = '';
 				highlightedIndex = -1;
+				isKeyboardNavigation = false;
 				popupRef?.close();
 				isFocused = false;
 				break;
@@ -387,6 +388,9 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
+	// 各要素のIDを生成
+	const inputId = $derived(`${id}-input`);
+	const listboxId = $derived(`${id}-listbox`);
 
 	// フィルタリングされたオプション
 	const filteredOptions = $derived.by(() => {
@@ -463,7 +467,7 @@
 		bind:this={popupRef}
 		anchorElement={comboboxElement}
 		position="bottom-left"
-		focusTrap={false}
+		mobileFullscreen={false}
 		onClose={handlePopupClose}
 		margin={4}
 	>
@@ -481,6 +485,7 @@
 						type="button"
 						class="combobox__option"
 						class:combobox__option--highlighted={index === highlightedIndex}
+						class:combobox__option--keyboard={isKeyboardNavigation && index === highlightedIndex}
 						class:combobox__option--selected={option === inputValue}
 						role="option"
 						aria-selected={option === inputValue}
@@ -489,7 +494,10 @@
 							event?.stopPropagation?.();
 							selectOption(option);
 						}}
-						onmouseenter={() => (highlightedIndex = index)}
+						onmouseenter={() => {
+							highlightedIndex = index;
+							isKeyboardNavigation = false; // マウス操作時はキーボード操作フラグをリセット
+						}}
 					>
 						{option}
 					</button>
@@ -510,6 +518,7 @@
 		position: relative;
 		width: auto;
 		max-width: 100%;
+		vertical-align: top;
 	}
 
 	.combobox--full-width {
@@ -539,7 +548,7 @@
 		text-align: left;
 		cursor: pointer;
 		font-size: inherit;
-		color: var(--svelte-ui-combobox-text-color);
+		color: var(--svelte-ui-text-color);
 		transition: background-color var(--svelte-ui-transition-duration) ease;
 
 		@media (hover: hover) {
@@ -553,6 +562,12 @@
 			background-color: var(--svelte-ui-combobox-option-hover-bg);
 		}
 
+		/* キーボード操作時のみ枠線を表示 */
+		&.combobox__option--keyboard {
+			outline: var(--svelte-ui-focus-outline-inner);
+			outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+		}
+
 		&.combobox__option--selected {
 			background-color: var(--svelte-ui-combobox-option-selected-bg);
 		}
@@ -561,6 +576,11 @@
 			background-color: var(--svelte-ui-combobox-option-selected-bg);
 		}
 
+		&.combobox__option--selected.combobox__option--keyboard {
+			outline: var(--svelte-ui-focus-outline-inner);
+			outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+		}
+
 		&:focus,
 		&:focus-visible {
 			outline: var(--svelte-ui-focus-outline-inner);

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

@@ -1,5 +1,5 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/eventHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 export type ComboboxProps = {
     name?: string;
     value: string | number | null | undefined;

package/dist/components/ConfirmDialog.svelte

@@ -20,7 +20,7 @@
 		id?: string;
 
 		// スタイル/レイアウト
-		variant?: 'info' | 'warning' | 'danger';
+		danger?: boolean;
 		width?: string | number;
 
 		// 状態/動作
@@ -43,7 +43,7 @@
 		id,
 
 		// スタイル/レイアウト
-		variant = 'info',
+		danger = false,
 		width = 400,
 
 		// 状態/動作
@@ -101,11 +101,7 @@
 		</Button>
 		<Button
 			variant="filled"
-			color={variant === 'danger'
-				? 'var(--svelte-ui-danger-color)'
-				: variant === 'warning'
-					? 'var(--svelte-ui-warning-color)'
-					: undefined}
+			color={danger ? 'var(--svelte-ui-danger-color)' : undefined}
 			onclick={handleSubmit}
 		>
 			{submitLabel}

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

@@ -4,7 +4,7 @@ export type ConfirmDialogProps = {
     submitLabel?: string;
     cancelLabel?: string;
     id?: string;
-    variant?: 'info' | 'warning' | 'danger';
+    danger?: boolean;
     width?: string | number;
     isOpen?: boolean;
     closeIfClickOutside?: boolean;