@14ch/svelte-ui 0.0.33 → 0.0.35

package/dist/components/CheckboxGroup.svelte

@@ -3,7 +3,6 @@
 <script lang="ts">
 	import type { Option, OptionValue } from '../types/options';
 	import Checkbox from './Checkbox.svelte';
-	import { onMount } from 'svelte';
 	import { getStyleFromNumber } from '../utils/style';
 	import type { BivariantValueHandler } from '../types/callbackHandlers';
 
@@ -62,14 +61,19 @@
 		onchange = () => {} // No params for type inference
 	}: CheckboxGroupProps = $props();
 
-	let localValues: Record<string, boolean> = $state({});
+	let localValues: Record<string, boolean> = $state(
+		Object.fromEntries(options.map((opt) => [String(opt.value), (value ?? []).includes(opt.value)]))
+	);
 
 	// =========================================================================
-	// Lifecycle
+	// Effects
 	// =========================================================================
-	onMount(() => {
+	$effect(() => {
 		options.forEach((option) => {
-			localValues[String(option.value)] = false;
+			const key = String(option.value);
+			if (!(key in localValues)) {
+				localValues[key] = (value ?? []).includes(option.value);
+			}
 		});
 	});
 
@@ -98,20 +102,18 @@
 	style:--internal-checkbox-group-min-option-width={minOptionWidthStyle}
 >
 	{#each options as option (option.value)}
-		{#if localValues[String(option.value)] !== undefined}
-			<li class="checkbox-group__option">
-				<Checkbox
-					bind:value={localValues[String(option.value)]}
-					{size}
-					{disabled}
-					{required}
-					{reducedMotion}
-					onchange={handleChange}
-				>
-					{option.label}
-				</Checkbox>
-			</li>
-		{/if}
+		<li class="checkbox-group__option">
+			<Checkbox
+				bind:value={localValues[String(option.value)]}
+				{size}
+				{disabled}
+				{required}
+				{reducedMotion}
+				onchange={handleChange}
+			>
+				{option.label}
+			</Checkbox>
+		</li>
 	{/each}
 </ul>
 

package/dist/components/Nav.svelte

@@ -111,7 +111,6 @@
 	$effect(() => {
 		return subscribeUrlChange(() => {
 			resolvedCurrentPath = getCurrentPath(currentPath);
-			if (childrenVariant !== 'accordion') expandedParent = null;
 		});
 	});
 
@@ -129,7 +128,7 @@
 						matchPath(resolvedCurrentPath, child.href, child, pathPrefix, customPathMatcher)
 				)
 		);
-		if (activeParent) expandedParent = activeParent;
+		expandedParent = activeParent ?? null;
 	});
 
 	// =========================================================================
@@ -231,16 +230,6 @@
 		}
 	};
 
-	const handleToggle = (item: MenuItem) => {
-		if (childrenVariant === 'accordion') {
-			// accordion: 開くのみ（再クリックで閉じない、他は自動的に閉じる）
-			expandedParent = item;
-		} else {
-			// bar: トグル
-			expandedParent = expandedParent === item ? null : item;
-		}
-	};
-
 	// =========================================================================
 	// $derived
 	// =========================================================================
@@ -310,10 +299,6 @@
 				{customPathMatcher}
 				isChildrenVisible={(childrenVariant === 'bar' || childrenVariant === 'accordion') &&
 					expandedParent === item}
-				onChildrenToggle={handleToggle}
-				onChildrenClose={() => {
-					expandedParent = null;
-				}}
 			/>
 		{/each}
 	</div>

package/dist/components/NavItem.svelte

@@ -55,11 +55,6 @@
 		/** Whether this item's children are currently visible. */
 		isChildrenVisible?: boolean;
 
-		// イベントハンドラ
-		/** For bar/accordion mode: called when this parent is clicked. */
-		onChildrenToggle?: (item: MenuItem) => void;
-		/** Called when a leaf item (no children) is clicked — used to close any open sub-menu. */
-		onChildrenClose?: () => void;
 	};
 
 	let {
@@ -91,9 +86,6 @@
 		isChild = false,
 		isChildrenVisible = $bindable(false),
 
-		// イベントハンドラ
-		onChildrenToggle,
-		onChildrenClose
 	}: NavItemProps = $props();
 
 	// =========================================================================
@@ -222,8 +214,6 @@
 			popupMenuRef?.toggle();
 		} else if (childrenVariant === 'bottom-sheet') {
 			toggleOpen();
-		} else if (childrenVariant !== 'expanded') {
-			onChildrenToggle?.(item);
 		}
 	};
 
@@ -373,6 +363,7 @@
 				role="menu"
 				tabindex="-1"
 				transition:fly={{ y: 100, duration: 250 }}
+				onclick={closeOpen}
 				onkeydown={(e) => handleChildKeyDown(e, true)}
 				bind:this={bottomSheetEl}
 			>
@@ -393,7 +384,6 @@
 						{customPathMatcher}
 						isSelected={isChildSelected(child)}
 						isDisabled={child.disabled ?? false}
-						onChildrenClose={closeOpen}
 					/>
 				{/each}
 			</div>
@@ -418,7 +408,6 @@
 		data-nav-item={!isChild ? '' : undefined}
 		data-nav-item-child={isChild ? '' : undefined}
 		data-testid="nav-item"
-		onclick={onChildrenClose}
 	>
 		{#if item.icon}
 			<div class="nav-item__icon">

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

@@ -33,10 +33,6 @@ export type NavItemProps = {
     isChild?: boolean;
     /** Whether this item's children are currently visible. */
     isChildrenVisible?: boolean;
-    /** For bar/accordion mode: called when this parent is clicked. */
-    onChildrenToggle?: (item: MenuItem) => void;
-    /** Called when a leaf item (no children) is clicked — used to close any open sub-menu. */
-    onChildrenClose?: () => void;
 };
 declare const NavItem: import("svelte").Component<NavItemProps, {}, "isChildrenVisible">;
 type NavItem = ReturnType<typeof NavItem>;

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