@14ch/svelte-ui 0.0.4 → 0.0.5

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/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/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/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/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.5",
 	"type": "module",
 	"keywords": [
 		"svelte",