@14ch/svelte-ui 0.0.4 → 0.0.6

package/README.md

@@ -346,6 +346,12 @@ MIT License - see the [LICENSE](LICENSE) file for details.
 
 ## Changelog
 
+### v0.0.5
+
+- Improved TabItem hover behavior: replaced background color with indicator bar opacity change
+- TabItem now shows selected text color and indicator bar on hover for better visual feedback
+- Breaking change: Replaced `variant` prop with `inline` prop in Combobox, Datepicker, and Select components
+
 ### v0.0.3
 
 - Improved text vertical alignment in Button, Fab, TabItem, Checkbox, and Radio components using `text-box-trim`

package/dist/components/ColorPicker.svelte

@@ -72,7 +72,7 @@
 		...restProps
 	}: {
 		// 基本プロパティ
-		value?: string;
+		value: string;
 
 		// HTML属性系
 		id?: string;

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

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
 type $$ComponentProps = {
-    value?: string;
+    value: string;
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
     customStyle?: string;

package/dist/components/Combobox.svelte

@@ -24,11 +24,11 @@
 
 		// スタイル/レイアウト
 		customStyle = '',
-		variant = 'default',
+		inline = false,
 		focusStyle = 'outline',
 		placeholder = '選択してください',
 		fullWidth = false,
-		minWidth = variant === 'inline' ? null : 120,
+		minWidth = inline ? null : 120,
 		maxWidth = null,
 		rounded = false,
 
@@ -92,7 +92,7 @@
 
 		// スタイル/レイアウト
 		customStyle?: string;
-		variant?: 'default' | 'inline';
+		inline?: boolean;
 		focusStyle?: 'background' | 'outline' | 'none';
 		placeholder?: string;
 		fullWidth?: boolean;
@@ -412,7 +412,7 @@
 		{name}
 		id={inputId}
 		{customStyle}
-		{variant}
+		{inline}
 		{focusStyle}
 		{placeholder}
 		{fullWidth}
@@ -420,7 +420,7 @@
 		{readonly}
 		{required}
 		{clearable}
-		rightIcon={variant !== 'inline' ? 'arrow_drop_down' : undefined}
+		rightIcon={inline ? undefined : 'arrow_drop_down'}
 		{tabindex}
 		{maxlength}
 		{rounded}

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

@@ -8,7 +8,7 @@ type $$ComponentProps = {
     tabindex?: number | null;
     maxlength?: number | null;
     customStyle?: string;
-    variant?: 'default' | 'inline';
+    inline?: boolean;
     focusStyle?: 'background' | 'outline' | 'none';
     placeholder?: string;
     fullWidth?: boolean;

package/dist/components/Datepicker.svelte

@@ -36,7 +36,7 @@
 		inputAttributes,
 
 		// スタイル/レイアウト
-		variant = 'default',
+		inline = false,
 		focusStyle = 'outline',
 		fullWidth = false,
 		rounded = false,
@@ -109,7 +109,7 @@
 		inputAttributes?: HTMLInputAttributes | undefined;
 
 		// スタイル/レイアウト
-		variant?: 'default' | 'inline';
+		inline?: boolean;
 		focusStyle?: 'background' | 'outline' | 'none';
 		fullWidth?: boolean;
 		rounded?: boolean;
@@ -502,7 +502,7 @@
 	<Input
 		bind:this={inputRef}
 		value={displayValue}
-		{variant}
+		{inline}
 		{focusStyle}
 		{fullWidth}
 		{rounded}

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

@@ -17,7 +17,7 @@ type $$ComponentProps = {
     rangeSeparator?: string;
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
-    variant?: 'default' | 'inline';
+    inline?: boolean;
     focusStyle?: 'background' | 'outline' | 'none';
     fullWidth?: boolean;
     rounded?: boolean;

package/dist/components/FileUploader.svelte

@@ -61,7 +61,7 @@
 		onpointerleave = () => {} // No params for type inference
 	}: {
 		// 基本プロパティ
-		value: FileList | undefined;
+		value: FileList | null | undefined;
 		multiple?: boolean;
 		maxFileSize?: number;
 		placeholder?: string;
@@ -86,7 +86,7 @@
 		removeFileAriaLabel?: string;
 
 		// 入力イベント
-		onchange?: (value: FileList | null) => void;
+		onchange?: (value: FileList | null | undefined) => void;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -187,7 +187,7 @@
 				dt.items.add(value[i]);
 			}
 		}
-		value = dt.files.length > 0 ? dt.files : undefined;
+		value = dt.files.length > 0 ? dt.files : null;
 	};
 
 	const validateFile = (file: File): boolean => {
@@ -240,7 +240,7 @@
 	export const reset = () => {
 		if (fileInputRef) {
 			fileInputRef.value = '';
-			value = undefined;
+			value = null;
 			errorMessage = '';
 		}
 	};

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

@@ -1,6 +1,6 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 type $$ComponentProps = {
-    value: FileList | undefined;
+    value: FileList | null | undefined;
     multiple?: boolean;
     maxFileSize?: number;
     placeholder?: string;
@@ -17,7 +17,7 @@ type $$ComponentProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     removeFileAriaLabel?: string;
-    onchange?: (value: FileList | null) => void;
+    onchange?: (value: FileList | null | undefined) => void;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/ImageUploader.svelte

@@ -66,7 +66,7 @@
 		onpointerleave = () => {} // No params for type inference
 	}: {
 		// 基本プロパティ
-		value: FileList | undefined;
+		value: FileList | null | undefined;
 		multiple?: boolean;
 		maxFileSize?: number;
 		placeholder?: string;
@@ -93,7 +93,7 @@
 		removeFileAriaLabel?: string;
 
 		// 入力イベント
-		onchange?: (value: FileList | null) => void;
+		onchange?: (value: FileList | null | undefined) => void;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -295,7 +295,7 @@
 	export const reset = () => {
 		if (fileInputRef) {
 			fileInputRef.value = '';
-			value = undefined;
+			value = null;
 			errorMessage = '';
 			cleanupObjectUrls();
 		}

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

@@ -1,6 +1,6 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 type $$ComponentProps = {
-    value: FileList | undefined;
+    value: FileList | null | undefined;
     multiple?: boolean;
     maxFileSize?: number;
     placeholder?: string;
@@ -19,7 +19,7 @@ type $$ComponentProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     removeFileAriaLabel?: string;
-    onchange?: (value: FileList | null) => void;
+    onchange?: (value: FileList | null | undefined) => void;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/Input.svelte

@@ -28,6 +28,7 @@
 		step = null,
 		size = null,
 		autocomplete = null,
+		spellcheck = null,
 		inputAttributes,
 
 		// スタイル/レイアウト
@@ -109,7 +110,7 @@
 	}: {
 		// 基本プロパティ
 		name?: string;
-		value: string | number | undefined;
+		value: string | number;
 
 		// HTML属性系
 		id?: string | null;
@@ -122,6 +123,7 @@
 		step?: number | null;
 		size?: number | null;
 		autocomplete?: HTMLInputElement['autocomplete'] | null;
+		spellcheck?: boolean | null;
 		inputAttributes?: HTMLInputAttributes | undefined;
 
 		// スタイル/レイアウト
@@ -212,8 +214,8 @@
 	const clear = (): void => {
 		if (disabled || readonly) return;
 		ref?.focus();
-		onchange?.(undefined);
-		value = undefined;
+		value = '';
+		onchange?.('');
 	};
 
 	export const focus = () => {
@@ -368,7 +370,6 @@
 	// $derived
 	// =========================================================================
 	const getDisplayValue = (): string => {
-		if (value === undefined) return '';
 		if (type === 'number' && typeof value === 'number') {
 			return value.toLocaleString();
 		}
@@ -425,6 +426,7 @@
 			{required}
 			{tabindex}
 			{size}
+			{spellcheck}
 			onchange={handleChange}
 			oninput={handleInput}
 			onfocus={handleFocus}

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

@@ -2,7 +2,7 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 type $$ComponentProps = {
     name?: string;
-    value: string | number | undefined;
+    value: string | number;
     id?: string | null;
     type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'number';
     tabindex?: number | null;
@@ -13,6 +13,7 @@ type $$ComponentProps = {
     step?: number | null;
     size?: number | null;
     autocomplete?: HTMLInputElement['autocomplete'] | null;
+    spellcheck?: boolean | null;
     inputAttributes?: HTMLInputAttributes | undefined;
     inline?: boolean;
     focusStyle?: 'background' | 'outline' | 'none';

package/dist/components/Select.svelte

@@ -22,7 +22,7 @@
 
 		// スタイル/レイアウト
 		size = null,
-		variant = 'default',
+		inline = false,
 		focusStyle = 'outline',
 		fullWidth = false,
 		rounded = false,
@@ -84,7 +84,7 @@
 
 		// スタイル/レイアウト
 		size?: number | null;
-		variant?: 'default' | 'inline';
+		inline?: boolean;
 		focusStyle?: 'background' | 'outline' | 'none';
 		fullWidth?: boolean;
 		rounded?: boolean;
@@ -275,7 +275,7 @@
 <div
 	class="select
 select--focus-{focusStyle}"
-	class:select--inline={variant === 'inline'}
+	class:select--inline={inline}
 	class:select--full-width={fullWidth}
 	class:select--disabled={disabled}
 	class:select--focused={isFocused}

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

@@ -9,7 +9,7 @@ type $$ComponentProps = {
     placeholder?: string;
     selectAttributes?: HTMLSelectAttributes | undefined;
     size?: number | null;
-    variant?: 'default' | 'inline';
+    inline?: boolean;
     focusStyle?: 'background' | 'outline' | 'none';
     fullWidth?: boolean;
     rounded?: boolean;

package/dist/components/Slider.svelte

@@ -71,7 +71,7 @@
 		...restProps
 	}: {
 		// 基本プロパティ
-		value?: number;
+		value: number;
 		name?: string;
 		id?: string;
 

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

@@ -1,6 +1,6 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 type $$ComponentProps = {
-    value?: number;
+    value: number;
     name?: string;
     id?: string;
     min?: number;

package/dist/components/Switch.svelte

@@ -71,7 +71,7 @@
 		children?: Snippet;
 
 		// 基本プロパティ
-		value?: boolean;
+		value: boolean;
 
 		// HTML属性系
 		id?: string;

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

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 type $$ComponentProps = {
     children?: Snippet;
-    value?: boolean;
+    value: boolean;
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
     size?: 'small' | 'medium' | 'large';

package/dist/components/TabItem.svelte

@@ -94,7 +94,10 @@
 
 @media (hover: hover) {
   .tab-item:hover:not(.tab-item--selected) {
-    background-color: var(--svelte-ui-hover-overlay);
+    color: var(--svelte-ui-tab-item-selected-text-color);
+  }
+  .tab-item:hover:not(.tab-item--selected)::before {
+    opacity: 1;
   }
 }
 /* キーボードフォーカス時のみ枠線を表示 */
@@ -110,7 +113,10 @@
     outline-offset: var(--svelte-ui-focus-outline-offset-inner);
   }
   .tab-item:focus:not(.tab-item--selected) {
-    background-color: var(--svelte-ui-hover-overlay);
+    color: var(--svelte-ui-tab-item-selected-text-color);
+  }
+  .tab-item:focus:not(.tab-item--selected)::before {
+    opacity: 1;
   }
 }
 /* 選択状態のインジケーター */

package/dist/components/Textarea.svelte

@@ -91,7 +91,7 @@
 	}: {
 		// 基本プロパティ
 		name?: string;
-		value: string | undefined;
+		value: string;
 		placeholder?: string;
 
 		// HTML属性系
@@ -177,9 +177,9 @@
 
 	const clear = (): void => {
 		if (disabled || readonly) return;
-		value = undefined;
+		value = '';
 		ref?.focus();
-		onchange?.(value);
+		onchange?.('');
 	};
 
 	// 外部からフォーカスを当てる（キャレットを先頭に移動）
@@ -334,7 +334,7 @@
 
 	// HTML表示用の値（autoResize時の高さ調整用）
 	const htmlValue = $derived.by(() => {
-		if (typeof value === 'string' && value !== '') {
+		if (value !== '') {
 			let html = value
 				.replace(/ +/g, (match) => ' '.repeat(match.length))
 				.replace(/\n/g, '<br />');
@@ -345,7 +345,7 @@
 			}
 			return html;
 		} else {
-			return value ?? '';
+			return '';
 		}
 	});
 </script>

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

@@ -2,7 +2,7 @@ import type { HTMLTextareaAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
 type $$ComponentProps = {
     name?: string;
-    value: string | undefined;
+    value: string;
     placeholder?: string;
     id?: string | null;
     tabindex?: number | null;

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@14ch/svelte-ui",
 	"description": "Modern Svelte UI components library with TypeScript support",
 	"private": false,
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"type": "module",
 	"keywords": [
 		"svelte",