@14ch/svelte-ui 0.0.14 → 0.0.16

package/dist/assets/styles/variables.scss

@@ -163,14 +163,13 @@
 	--svelte-ui-surface-inverse-color: var(--base-800-transparent);
 
 	/* スケルトン色 */
-	--svelte-ui-skeleton-color: var(--base-200-transparent);
-	--svelte-ui-skeleton-shimmer-color: var(--white-300-transparent);
+	--svelte-ui-skeleton-color: var(--base-100-transparent);
 
 	/* UIカラー */
 	--svelte-ui-handle-color: #ffffff;
 
 	/* hover & select 効果 */
-	--svelte-ui-hover-overlay: var(--base-50-transparent);
+	--svelte-ui-hover-overlay: var(--base-100-transparent);
 	--svelte-ui-select-overlay: var(--primary-200-transparent);
 
 	/* ドロップダウンアイコン */
@@ -216,8 +215,7 @@
 	--svelte-ui-surface-inverse-color: var(--white-800-transparent);
 
 	/* スケルトン色 */
-	--svelte-ui-skeleton-color: var(--white-200-transparent);
-	--svelte-ui-skeleton-shimmer-color: var(--white-100-transparent);
+	--svelte-ui-skeleton-color: var(--white-100-transparent);
 
 	/* hover & select 効果 */
 	--svelte-ui-hover-overlay: var(--white-100-transparent);
@@ -376,7 +374,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 +385,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 +406,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 +506,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,14 +519,13 @@
 	--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);
 	--svelte-ui-combobox-no-options-color: var(--svelte-ui-text-subtle-color);
 
 	/* FileUploader */
-	--svelte-ui-file-uploader-border-width: 2px;
+	--svelte-ui-file-uploader-border-width: 1px;
 	--svelte-ui-file-uploader-border-style: dashed;
 	--svelte-ui-file-uploader-bg: var(--svelte-ui-form-bg);
 	--svelte-ui-file-uploader-border-color: var(--svelte-ui-border-color);
@@ -541,7 +535,7 @@
 	--svelte-ui-file-uploader-item-bg: var(--svelte-ui-form-bg);
 
 	/* ImageUploader */
-	--svelte-ui-image-uploader-border-width: 2px;
+	--svelte-ui-image-uploader-border-width: 1px;
 	--svelte-ui-image-uploader-border-style: dashed;
 	--svelte-ui-image-uploader-preview-border-radius: var(--svelte-ui-border-radius);
 	--svelte-ui-image-uploader-preview-border-radius-rounded: var(--svelte-ui-border-radius-rounded);

package/dist/components/Checkbox.svelte

@@ -339,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/ColorPicker.svelte

@@ -19,7 +19,7 @@
 	// =========================================================================
 	export type ColorPickerProps = {
 		// 基本プロパティ
-		value: string;
+		value: string | null | undefined;
 
 		// HTML属性系
 		id?: string;
@@ -141,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);
 
@@ -154,7 +159,7 @@
 		value;
 		untrack(() => {
 			/* value を localValue に反映 */
-			localValue = value;
+			localValue = getNormalizedValue(value);
 
 			/* value が更新されたらonchangeを実行 */
 			handleValueChange();
@@ -165,7 +170,7 @@
 		localValue;
 		untrack(() => {
 			/* localValue がクリアされた時に value もクリア */
-			if (localValue === '' || localValue === undefined) {
+			if (localValue === '') {
 				value = '';
 				prevValue = '';
 			}
@@ -392,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>
 
@@ -407,6 +415,7 @@
 		position: relative;
 		width: auto;
 		max-width: 100%;
+		vertical-align: top;
 	}
 
 	/* =============================================

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

@@ -2,7 +2,7 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
 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;

package/dist/components/Combobox.svelte

@@ -104,7 +104,7 @@
 		customStyle = '',
 		inline = false,
 		focusStyle = 'outline',
-		placeholder = '選択してください',
+		placeholder = t('combobox.placeholder'),
 		fullWidth = false,
 		minWidth = inline ? null : 120,
 		maxWidth = null,
@@ -503,7 +503,7 @@
 					</button>
 				</div>
 			{:else}
-				<div class="combobox__no-options">該当するオプションがありません</div>
+				<div class="combobox__no-options">{t('combobox.noOptions')}</div>
 			{/each}
 		</div>
 	</Popup>
@@ -518,6 +518,7 @@
 		position: relative;
 		width: auto;
 		max-width: 100%;
+		vertical-align: top;
 	}
 
 	.combobox--full-width {
@@ -547,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) {

package/dist/components/Datepicker.svelte

@@ -234,13 +234,13 @@
 	// =========================================================================
 	// Effects
 	// =========================================================================
-	const effectiveLocale = $derived(locale ?? getLocale());
+	const resolvedLocale = $derived(locale ?? getLocale());
 
 	$effect(() => {
 		// range モードのときは、value を「start <= end」の順序に正規化
 		if (mode === 'range' && value && 'start' in value && 'end' in value) {
-			const startDay = dayjs(value.start).locale(effectiveLocale);
-			const endDay = dayjs(value.end).locale(effectiveLocale);
+			const startDay = dayjs(value.start).locale(resolvedLocale);
+			const endDay = dayjs(value.end).locale(resolvedLocale);
 			if (startDay.isAfter(endDay)) {
 				value = { start: value.end, end: value.start };
 			}
@@ -248,8 +248,7 @@
 	});
 
 	$effect(() => {
-		const formatWithLocale = (date: Date) =>
-			dayjs(date).locale(effectiveLocale).format(finalFormat);
+		const formatWithLocale = (date: Date) => dayjs(date).locale(resolvedLocale).format(finalFormat);
 
 		if (mode === 'range' && value && 'start' in value && 'end' in value) {
 			displayValue = `${formatWithLocale(value.start)}${rangeSeparator}${formatWithLocale(value.end)}`;
@@ -267,11 +266,11 @@
 		// スクリーンリーダーアナウンス
 		if (value) {
 			if (mode === 'range' && typeof value === 'object' && 'start' in value && 'end' in value) {
-				const startDate = dayjs(value.start).locale(effectiveLocale).format(finalFormat);
-				const endDate = dayjs(value.end).locale(effectiveLocale).format(finalFormat);
+				const startDate = dayjs(value.start).locale(resolvedLocale).format(finalFormat);
+				const endDate = dayjs(value.end).locale(resolvedLocale).format(finalFormat);
 				announceToScreenReader(`Date range selected: ${startDate} to ${endDate}`);
 			} else if (value instanceof Date) {
-				const formattedDate = dayjs(value).locale(effectiveLocale).format(finalFormat);
+				const formattedDate = dayjs(value).locale(resolvedLocale).format(finalFormat);
 				announceToScreenReader(`Date selected: ${formattedDate}`);
 			}
 		}
@@ -512,7 +511,7 @@
 
 		// 日付パース処理
 		if (mode === 'range') {
-			const parsedRange = parseRangeInput(inputStr, effectiveLocale);
+			const parsedRange = parseRangeInput(inputStr, resolvedLocale);
 			if (!parsedRange) return;
 
 			value = parsedRange;
@@ -521,7 +520,7 @@
 		}
 
 		// single モードでは先頭の「日付本体」のみを解釈する
-		const parsedSingle = parseSingleInput(inputStr, effectiveLocale);
+		const parsedSingle = parseSingleInput(inputStr, resolvedLocale);
 		if (!parsedSingle) return;
 
 		value = parsedSingle;
@@ -589,7 +588,7 @@
 	// $derived
 	// =========================================================================
 	const calendarId = $derived(`${id}-calendar`);
-	const currentLocaleConfig = $derived(localeConfig[effectiveLocale]);
+	const currentLocaleConfig = $derived(localeConfig[resolvedLocale]);
 	const finalFormat = $derived(
 		format ||
 			(mode === 'range' ? currentLocaleConfig.rangeFormat : currentLocaleConfig.defaultFormat)
@@ -670,7 +669,7 @@
 		onchange={handleChange}
 		{minDate}
 		{maxDate}
-		locale={effectiveLocale}
+		locale={resolvedLocale}
 		id={calendarId}
 	/>
 </Popup>
@@ -679,6 +678,7 @@
   position: relative;
   display: inline-block;
   width: auto;
+  vertical-align: top;
 }
 .datepicker.datepicker--full-width {
   display: block;

package/dist/components/Drawer.svelte

@@ -34,7 +34,7 @@
 		id?: string;
 
 		// スタイル/レイアウト
-		width?: string | number;
+		width?: string | number | undefined;
 		position?: 'left' | 'right';
 		bodyStyle?: string;
 		noPadding?: boolean;
@@ -64,7 +64,7 @@
 		id,
 
 		// スタイル/レイアウト
-		width = 240,
+		width = undefined,
 		position = 'left',
 		bodyStyle = '',
 		noPadding = false,
@@ -106,7 +106,11 @@
 	// =========================================================================
 	const drawerStyles = $derived(() => {
 		const styles = [];
-		styles.push(`width: ${getStyleFromNumber(width)}`);
+		if (width !== undefined) {
+			styles.push(`width: ${getStyleFromNumber(width)}`);
+		} else {
+			styles.push('width: max-content');
+		}
 		styles.push('height: 100%');
 		styles.push('min-height: 100%');
 		styles.push(`${position}: 0`);

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

@@ -18,7 +18,7 @@ export type DrawerProps = {
     title?: string;
     description?: string;
     id?: string;
-    width?: string | number;
+    width?: string | number | undefined;
     position?: 'left' | 'right';
     bodyStyle?: string;
     noPadding?: boolean;

package/dist/components/Icon.svelte

@@ -17,7 +17,7 @@
 		fallbackText?: string;
 
 		// スタイル/レイアウト
-		size?: number;
+		size?: number | string;
 		color?: string;
 		customStyle?: string;
 
@@ -53,7 +53,7 @@
 		filled = false,
 		weight = 300,
 		grade = 0,
-		opticalSize = size,
+		opticalSize = typeof size === 'number' ? size : 24,
 		variant = 'outlined',
 
 		// ARIA/アクセシビリティ
@@ -61,13 +61,16 @@
 		decorative = true,
 
 		// その他
+		class: className,
 		...restProps
 	}: IconProps = $props();
 
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	const iconClasses = $derived(`material-symbols-${variant}`);
+	const iconClasses = $derived(
+		['icon', `icon--${variant}`, `material-symbols-${variant}`, className].filter(Boolean).join(' ')
+	);
 
 	const fontVariationSettings = $derived(
 		`'FILL' ${filled ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' ${opticalSize}`
@@ -79,12 +82,13 @@
 		role: !decorative && ariaLabel ? 'img' : undefined
 	});
 
-	const iconStyle = $derived(
-		`width: ${size}px; height: ${size}px; font-size: ${size}px; 
-		color: ${color}; line-height: 1; 
+	const iconStyle = $derived.by(() => {
+		const sizeStyle = getStyleFromNumber(size);
+		return `width: ${sizeStyle}; height: ${sizeStyle}; font-size: ${sizeStyle}; 
+		color: ${color}; 
 		font-variation-settings: ${fontVariationSettings}; 
-		${customStyle}`
-	);
+		${customStyle}`;
+	});
 </script>
 
 <i
@@ -102,7 +106,7 @@
 	<!-- Unicode文字での代替表示 -->
 	<span
 		class="icon-fallback-text"
-		style="width: {size}px; height: {size}px; font-size: {size}px; {customStyle}"
+		style={customStyle}
 		{...ariaAttributes}
 		{...restProps}
 		data-testid="icon-fallback"
@@ -112,13 +116,11 @@
 {/if}
 
 <style>
-	.material-symbols-outlined,
-	.material-symbols-rounded,
-	.material-symbols-sharp {
+	.icon {
 		display: block;
 		font-size: inherit;
 		color: inherit;
-		line-height: inherit;
+		line-height: 1;
 		text-transform: none;
 		letter-spacing: normal;
 		word-wrap: normal;
@@ -129,15 +131,15 @@
 		transition-timing-function: ease;
 	}
 
-	.material-symbols-outlined {
+	.icon.material-symbols-outlined {
 		font-family: 'Material Symbols Outlined';
 	}
 
-	.material-symbols-rounded {
+	.icon.material-symbols-rounded {
 		font-family: 'Material Symbols Rounded';
 	}
 
-	.material-symbols-sharp {
+	.icon.material-symbols-sharp {
 		font-family: 'Material Symbols Sharp';
 	}
 
@@ -157,10 +159,7 @@
 
 	/* Prefers reduced motion */
 	@media (prefers-reduced-motion: reduce) {
-		.material-symbols-outlined,
-		.material-symbols-filled,
-		.material-symbols-rounded,
-		.material-symbols-sharp,
+		.icon,
 		.icon-fallback-text {
 			transition: none;
 		}
@@ -168,10 +167,7 @@
 
 	/* Print styles */
 	@media print {
-		.material-symbols-outlined,
-		.material-symbols-filled,
-		.material-symbols-rounded,
-		.material-symbols-sharp,
+		.icon,
 		.icon-fallback-text {
 			color: black !important;
 		}

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

@@ -4,7 +4,7 @@ export type IconProps = {
     children: Snippet;
     title?: string;
     fallbackText?: string;
-    size?: number;
+    size?: number | string;
     color?: string;
     customStyle?: string;
     filled?: boolean;

package/dist/components/IconButton.svelte

@@ -383,7 +383,7 @@
 		{:else}
 			<div class="icon-button__icon" class:icon-button__icon--hidden={loading}>
 				<Icon
-					filled={true}
+					filled={iconFilled}
 					size={fontSize}
 					weight={iconWeight}
 					grade={iconGrade}