@14ch/svelte-ui 0.0.32 → 0.0.34

package/dist/assets/styles/variables.scss

@@ -395,6 +395,8 @@
 	--svelte-ui-nav-vertical-item-gap: 8px;
 	/* Nav: horizontal */
 	--svelte-ui-nav-horizontal-item-gap: 8px;
+	/* Nav: children spacing (parent item → children list) */
+	--svelte-ui-nav-children-offset: 8px;
 	/* Nav: sub-menu */
 	--svelte-ui-nav-sub-popup-min-width: 160px;
 	--svelte-ui-nav-sub-popup-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

package/dist/components/Nav.svelte

@@ -78,7 +78,11 @@
 		// スタイル/レイアウト
 		selectedVariant,
 		gap,
-		childrenVariant = variant === 'mobile' ? 'bottom-sheet' : variant === 'vertical' ? 'accordion' : 'bar',
+		childrenVariant = variant === 'mobile'
+			? 'bottom-sheet'
+			: variant === 'vertical'
+				? 'accordion'
+				: 'bar',
 		chevron,
 		customContainerStyle,
 		customItemStyle,
@@ -107,21 +111,24 @@
 	$effect(() => {
 		return subscribeUrlChange(() => {
 			resolvedCurrentPath = getCurrentPath(currentPath);
-			if (childrenVariant !== 'accordion') expandedParent = null;
 		});
 	});
 
-	// accordion モード: アクティブな子を持つ親を自動展開
+	// accordion / bar モード: アクティブな親を自動展開
 	$effect(() => {
-		if (childrenVariant !== 'accordion' || !resolvedCurrentPath) return;
-		const activeParent = navItems.find((item) =>
-			item.children?.some(
-				(child) =>
-					child.href &&
-					matchPath(resolvedCurrentPath, child.href, child, pathPrefix, customPathMatcher)
-			)
+		if ((childrenVariant !== 'accordion' && childrenVariant !== 'bar') || !resolvedCurrentPath)
+			return;
+		const selected = navItems[selectedIndex];
+		const activeParent = navItems.find(
+			(item) =>
+				(item === selected && !!item.children?.length) ||
+				item.children?.some(
+					(child) =>
+						child.href &&
+						matchPath(resolvedCurrentPath, child.href, child, pathPrefix, customPathMatcher)
+				)
 		);
-		if (activeParent) expandedParent = activeParent;
+		expandedParent = activeParent ?? null;
 	});
 
 	// =========================================================================
@@ -140,7 +147,7 @@
 		const selector = includeChildren ? '[data-nav-item], [data-nav-item-child]' : '[data-nav-item]';
 		const navItemEls = Array.from(
 			(event.currentTarget as HTMLElement).querySelectorAll<HTMLElement>(selector)
-		).filter(el => el.tabIndex !== -1);
+		).filter((el) => el.tabIndex !== -1);
 
 		if (navItemEls.length === 0) return;
 
@@ -223,29 +230,27 @@
 		}
 	};
 
-	const handleToggle = (item: MenuItem) => {
-		if (childrenVariant === 'accordion') {
-			// accordion: 開くのみ（再クリックで閉じない、他は自動的に閉じる）
-			expandedParent = item;
-		} else {
-			// bar: トグル
-			expandedParent = expandedParent === item ? null : item;
-		}
-	};
-
 	// =========================================================================
 	// $derived
 	// =========================================================================
 	const selectedIndex = $derived.by(() => {
 		for (let i = 0; i < navItems.length; i++) {
 			const item = navItems[i];
-			if (item.href && matchPath(resolvedCurrentPath, item.href, item, pathPrefix, customPathMatcher)) {
+			if (
+				item.href &&
+				matchPath(resolvedCurrentPath, item.href, item, pathPrefix, customPathMatcher)
+			) {
 				return i;
 			}
 			// bar モード: 子が選択されていれば親も選択とみなす
-			if (childrenVariant === 'bar' && item.children?.some(
-				(child) => child.href && matchPath(resolvedCurrentPath, child.href, child, pathPrefix, customPathMatcher)
-			)) {
+			if (
+				childrenVariant === 'bar' &&
+				item.children?.some(
+					(child) =>
+						child.href &&
+						matchPath(resolvedCurrentPath, child.href, child, pathPrefix, customPathMatcher)
+				)
+			) {
 				return i;
 			}
 		}
@@ -257,7 +262,8 @@
 	);
 
 	const isChildSelected = (child: MenuItem) =>
-		!!child.href && matchPath(resolvedCurrentPath, child.href, child, pathPrefix, customPathMatcher);
+		!!child.href &&
+		matchPath(resolvedCurrentPath, child.href, child, pathPrefix, customPathMatcher);
 </script>
 
 <nav
@@ -271,37 +277,43 @@
 	bind:this={navEl}
 >
 	<div style="display: contents" role="presentation" onkeydown={handleKeyDown}>
-	{#each navItems as item, index}
-		<NavItem
-			{item}
-			{variant}
-			{pathPrefix}
-			isSelected={index === selectedIndex}
-			isDisabled={item.disabled ?? false}
-			{iconFilled}
-			{iconWeight}
-			{iconGrade}
-			{iconOpticalSize}
-			{iconVariant}
-			{selectedVariant}
-			{childrenVariant}
-			{chevron}
-			customStyle={customItemStyle}
-			customChildrenStyle={customChildrenItemStyle}
-			{customChildrenContainerStyle}
-			{resolvedCurrentPath}
-			{customPathMatcher}
-			isChildrenVisible={(childrenVariant === 'bar' || childrenVariant === 'accordion') && expandedParent === item}
-			onChildrenToggle={handleToggle}
-			onChildrenClose={() => { expandedParent = null; }}
-		/>
-	{/each}
+		{#each navItems as item, index}
+			<NavItem
+				{item}
+				{variant}
+				{pathPrefix}
+				isSelected={index === selectedIndex}
+				isDisabled={item.disabled ?? false}
+				{iconFilled}
+				{iconWeight}
+				{iconGrade}
+				{iconOpticalSize}
+				{iconVariant}
+				{selectedVariant}
+				{childrenVariant}
+				{chevron}
+				customStyle={customItemStyle}
+				customChildrenStyle={customChildrenItemStyle}
+				{customChildrenContainerStyle}
+				{resolvedCurrentPath}
+				{customPathMatcher}
+				isChildrenVisible={(childrenVariant === 'bar' || childrenVariant === 'accordion') &&
+					expandedParent === item}
+			/>
+		{/each}
 	</div>
 </nav>
 
 <!-- bar モード: 選択中の親の子アイテムを横バーとして表示 -->
 {#if showSubBar && expandedParent?.children}
-	<div class="nav__children-bar" role="menu" tabindex="-1" style={customChildrenContainerStyle} onkeydown={handleSubBarKeyDown} bind:this={subBarEl}>
+	<div
+		class="nav__children-bar"
+		role="menu"
+		tabindex="-1"
+		style={customChildrenContainerStyle}
+		onkeydown={handleSubBarKeyDown}
+		bind:this={subBarEl}
+	>
 		{#each expandedParent.children as child}
 			<NavItem
 				item={child}
@@ -362,4 +374,5 @@
   flex-direction: row;
   gap: var(--internal-nav-gap, var(--svelte-ui-nav-horizontal-item-gap));
   align-items: center;
+  padding-top: var(--svelte-ui-nav-children-offset);
 }</style>

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">
@@ -623,7 +612,7 @@
 .nav-item__children {
   display: flex;
   flex-direction: column;
-  padding-top: var(--internal-nav-gap, var(--svelte-ui-nav-vertical-item-gap));
+  padding-top: var(--svelte-ui-nav-children-offset);
   gap: var(--internal-nav-gap, var(--svelte-ui-nav-vertical-item-gap));
   overflow: hidden;
 }

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/dist/components/Tab.svelte

@@ -36,6 +36,14 @@
 		selectedTextColor?: string;
 		/** Custom CSS color for the active tab indicator bar. */
 		selectedBarColor?: string;
+		/** Inline style applied to the tab container element. */
+		customContainerStyle?: string;
+		/** Inline style applied to each tab item element. */
+		customItemStyle?: string;
+		/** Inline style applied to the children container. */
+		customChildrenContainerStyle?: string;
+		/** Inline style applied to each child item element. */
+		customChildrenItemStyle?: string;
 
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
@@ -63,6 +71,10 @@
 		textColor,
 		selectedTextColor,
 		selectedBarColor,
+		customContainerStyle,
+		customItemStyle,
+		customChildrenContainerStyle,
+		customChildrenItemStyle,
 
 		// ARIA/アクセシビリティ
 		ariaLabel = 'Tabs',
@@ -90,6 +102,10 @@
 		{iconGrade}
 		{iconOpticalSize}
 		{iconVariant}
+		{customContainerStyle}
+		{customItemStyle}
+		{customChildrenContainerStyle}
+		{customChildrenItemStyle}
 		{ariaLabel}
 		{ariaLabelledby}
 	/>

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

@@ -21,6 +21,14 @@ export type TabProps = {
     selectedTextColor?: string;
     /** Custom CSS color for the active tab indicator bar. */
     selectedBarColor?: string;
+    /** Inline style applied to the tab container element. */
+    customContainerStyle?: string;
+    /** Inline style applied to each tab item element. */
+    customItemStyle?: string;
+    /** Inline style applied to the children container. */
+    customChildrenContainerStyle?: string;
+    /** Inline style applied to each child item element. */
+    customChildrenItemStyle?: string;
     ariaLabel?: string;
     ariaLabelledby?: string;
 };

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