@14ch/svelte-ui 0.0.66 → 0.0.68

package/dist/components/Checkbox.svelte

@@ -124,7 +124,7 @@
 		// 基本プロパティ
 		name = '',
 		value = $bindable(false),
-		indeterminate = $bindable(false),
+		indeterminate = $bindable(),
 
 		// HTML属性系
 		id = `checkbox-${Math.random().toString(36).substring(2, 15)}`,

package/dist/components/ColorPicker.svelte

@@ -123,7 +123,7 @@
 
 	let {
 		// 基本プロパティ
-		value = $bindable(''),
+		value = $bindable(),
 
 		// HTML属性系
 		id = `colorpicker-${Math.random().toString(36).substring(2, 15)}`,
@@ -377,8 +377,7 @@
 </script>
 
 <div
-	class="color-picker
-	focus-style-{focusStyle}"
+	class="color-picker"
 	class:color-picker--full-width={fullWidth}
 	class:color-picker--rounded={rounded}
 	class:color-picker--clearable={clearable}
@@ -436,7 +435,7 @@
 		<input
 			type="color"
 			aria-label={ariaLabel ?? t('colorpicker.chooseColor')}
-			bind:value
+			bind:value={localValue}
 			onchange={handleValueChange}
 			onfocus={handleFocus}
 			onblur={handleBlur}

package/dist/components/MultiSelect.svelte

@@ -201,7 +201,7 @@
 			aria-label={ariaLabel ?? t('multiSelect.accessibleName')}
 			style:min-width="{triggerWidth}px"
 		>
-			{#each options as option, i (option.value)}
+			{#each options as option (option.value)}
 				<li role="presentation" class="multi-select__item">
 					<Checkbox
 						value={value.includes(option.value)}
@@ -250,10 +250,6 @@
   display: flex;
   align-items: center;
 }
-.multi-select__trigger:focus, .multi-select__trigger:focus-visible {
-  outline: var(--svelte-ui-focus-outline-inner);
-  outline-offset: var(--svelte-ui-focus-outline-offset-inner);
-}
 
 .multi-select__inner {
   position: relative;
@@ -311,10 +307,16 @@
   outline-offset: var(--svelte-ui-focus-outline-offset-inner);
 }
 
-.multi-select--focus-background .multi-select__trigger:focus {
+/* デザインバリアントの背景指定より詳細度を上げるため .multi-select を併記 */
+.multi-select.multi-select--focus-background .multi-select__trigger:focus {
+  outline: none;
   background: var(--svelte-ui-hover-overlay);
 }
 
+.multi-select--focus-none .multi-select__trigger:focus {
+  outline: none;
+}
+
 /* =============================================
  * 状態管理
  * ============================================= */

package/dist/components/Popup.svelte

@@ -399,7 +399,7 @@
 		}
 	};
 
-	const announceToScreenReader = () => {
+	const announceOpened = () => {
 		if (!ariaLabel && !ariaLabelledby) return;
 		announceOpenClose('Popup', true, ariaLabel);
 	};
@@ -514,7 +514,7 @@
 				focusFirstElement();
 			}
 
-			announceToScreenReader();
+			announceOpened();
 			onOpen?.();
 		}, 1);
 	};

package/dist/components/PopupMenu.svelte

@@ -3,6 +3,7 @@
 <script lang="ts">
 	import Popup from './Popup.svelte';
 	import Icon from './Icon.svelte';
+	import { announceToScreenReader } from '../utils/accessibility';
 	import type { MenuItem } from '../types/menuItem';
 
 	import type { SvelteComponent } from 'svelte';
@@ -167,26 +168,13 @@
 		activeIndex = index;
 	};
 
-	const announceMenuOpened = () => {
-		const announcement = document.createElement('div');
-		announcement.setAttribute('aria-live', 'polite');
-		announcement.setAttribute('aria-atomic', 'true');
-		announcement.className = 'sr-only';
-		announcement.textContent = `${ariaLabel} opened with ${actionableItems.length} items`;
-		document.body.appendChild(announcement);
-
-		setTimeout(() => {
-			document.body.removeChild(announcement);
-		}, 1000);
-	};
-
 	const handlePopupOpen = () => {
 		activeIndex = -1; // 初期状態ではハイライトなし
 		tick().then(() => {
 			menuContainerRef?.focus();
 		});
 
-		announceMenuOpened();
+		announceToScreenReader(`${ariaLabel} opened with ${actionableItems.length} items`);
 	};
 
 	const handlePopupClose = (reason: 'escape' | 'outside' | 'explicit') => {
@@ -255,7 +243,7 @@
 		onkeydown={handleKeyDown}
 	>
 		<ul class="popup-menu__list" role="none">
-			{#each menuItems as item, index}
+			{#each menuItems as item, index (item === 'separator' ? `separator-${index}` : item)}
 				<li class="popup-menu__item" role="none">
 					{#if item === 'separator'}
 						<div class="popup-menu__separator" role="separator" aria-orientation="horizontal"></div>

package/dist/components/Radio.svelte

@@ -125,7 +125,7 @@
 		// 基本プロパティ
 		name = '',
 		value = '',
-		currentValue = $bindable(null),
+		currentValue = $bindable(),
 
 		// HTML属性系
 		id = `radio-${Math.random().toString(36).substring(2, 15)}`,

package/dist/components/Select.svelte

@@ -412,12 +412,6 @@ select--focus-{focusStyle}"
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
-
-		&:focus,
-		&:focus-visible {
-			outline: var(--svelte-ui-focus-outline-inner);
-			outline-offset: var(--svelte-ui-focus-outline-offset-inner);
-		}
 	}
 
 	.select__dropdown-icon {
@@ -456,10 +450,16 @@ select--focus-{focusStyle}"
 		outline-offset: var(--svelte-ui-focus-outline-offset-inner);
 	}
 
-	.select--focus-background select:focus {
+	/* デザインバリアントの背景指定より詳細度を上げるため .select を併記 */
+	.select.select--focus-background select:focus {
+		outline: none;
 		background: var(--svelte-ui-hover-overlay);
 	}
 
+	.select--focus-none select:focus {
+		outline: none;
+	}
+
 	/* =============================================
  * 状態管理（disabled, readonly等）
  * ============================================= */

package/dist/components/StepNav.svelte

@@ -88,7 +88,7 @@
 		// 基本プロパティ
 		stepItems,
 		items: itemsAlias,
-		value = $bindable(''),
+		value = $bindable(),
 		progress,
 
 		// URL 方式

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.66",
+	"version": "0.0.68",
 	"type": "module",
 	"keywords": [
 		"svelte",