@14ch/svelte-ui 0.0.28 → 0.0.30

package/dist/assets/styles/variables.scss

@@ -358,21 +358,6 @@
 	--svelte-ui-segmented-control-selected-text-color: var(--svelte-ui-text-on-filled-color);
 	--svelte-ui-segmented-control-hover-overlay: var(--svelte-ui-hover-overlay);
 
-	/* Tab */
-	--svelte-ui-tab-min-height: var(--svelte-ui-form-height);
-	--svelte-ui-tab-item-text-color: var(--svelte-ui-text-color);
-	--svelte-ui-tab-item-selected-text-color: var(--svelte-ui-primary-color);
-	--svelte-ui-tab-item-selected-bar-color: var(--svelte-ui-primary-color);
-	--svelte-ui-tab-item-padding-x: 16px;
-	--svelte-ui-tab-item-padding-y: 8px;
-	--svelte-ui-tab-item-padding: var(--svelte-ui-tab-item-padding-y)
-		var(--svelte-ui-tab-item-padding-x);
-	--svelte-ui-tab-item-icon-gap: 8px;
-	--svelte-ui-tab-item-selected-bar-offset: 0px;
-	--svelte-ui-tab-item-selected-bar-height: 4px;
-	--svelte-ui-tab-item-selected-bar-radius: 3px 3px 0 0;
-	--svelte-ui-tab-item-disabled-opacity: var(--svelte-ui-disabled-opacity);
-
 	/* Nav */
 	--svelte-ui-nav-item-text-color: var(--svelte-ui-text-color);
 	--svelte-ui-nav-item-selected-text-color: var(--svelte-ui-primary-color);
@@ -382,23 +367,42 @@
 		var(--svelte-ui-primary-color) 16%,
 		transparent
 	);
-	--svelte-ui-nav-item-selected-bar-color: var(--svelte-ui-primary-color);
-	--svelte-ui-nav-item-selected-bar-height: 3px;
-	--svelte-ui-nav-item-selected-bar-radius: 2px;
+	/* Nav: underline style（Tab はこれを参照するエイリアス） */
+	--svelte-ui-nav-item-underline-text-color: var(--svelte-ui-text-color);
+	--svelte-ui-nav-item-underline-selected-text-color: var(--svelte-ui-primary-color);
+	--svelte-ui-nav-item-underline-bar-color: var(--svelte-ui-primary-color);
+	--svelte-ui-nav-item-underline-bar-offset: 0px;
+	--svelte-ui-nav-item-underline-bar-height: 4px;
+	--svelte-ui-nav-item-underline-bar-radius: 3px 3px 0 0;
+
+	/* Tab */
+	--svelte-ui-tab-min-height: var(--svelte-ui-form-height);
 	--svelte-ui-nav-item-min-height: 40px;
 	--svelte-ui-nav-item-icon-gap: 8px;
 	--svelte-ui-nav-item-disabled-opacity: var(--svelte-ui-disabled-opacity);
+	--svelte-ui-nav-item-padding-x: 12px;
+	--svelte-ui-nav-item-padding-y: 8px;
+	--svelte-ui-nav-item-padding: var(--svelte-ui-nav-item-padding-y)
+		var(--svelte-ui-nav-item-padding-x);
+	--svelte-ui-nav-item-border-radius: var(--svelte-ui-border-radius);
+	--svelte-ui-nav-item-label-line-height: 1.3;
 	/* Nav: mobile-tab */
 	--svelte-ui-nav-mobile-min-height: 56px;
 	--svelte-ui-nav-mobile-item-padding: 8px;
 	--svelte-ui-nav-mobile-item-icon-gap: 8px;
 	--svelte-ui-nav-mobile-item-font-size: 0.75rem;
-	--svelte-ui-nav-item-padding: 8px 12px;
-	--svelte-ui-nav-item-border-radius: var(--svelte-ui-border-radius);
 	/* Nav: vertical */
 	--svelte-ui-nav-vertical-item-gap: 8px;
 	/* Nav: horizontal */
 	--svelte-ui-nav-horizontal-item-gap: 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);
+	--svelte-ui-nav-sub-bar-min-height: 48px;
+	--svelte-ui-nav-item-child-indent: 32px;
+	--svelte-ui-nav-bottom-sheet-overlay-bg: rgba(0, 0, 0, 0.4);
+	--svelte-ui-nav-bottom-sheet-border-radius: 16px 16px 0 0;
+	--svelte-ui-nav-bottom-sheet-padding: 16px 8px;
 
 	/* Input */
 	--svelte-ui-input-height: var(--svelte-ui-form-height);
@@ -879,10 +883,10 @@
 		--svelte-ui-slider-custom-thumb-focus-shadow: 0 0 0 3px Highlight;
 		--svelte-ui-slider-custom-thumb-color: HighlightText;
 
-		/* Tab */
-		--svelte-ui-tab-item-text-color: CanvasText;
-		--svelte-ui-tab-item-selected-text-color: Highlight;
-		--svelte-ui-tab-item-selected-bar-color: Highlight;
+		/* Nav: underline */
+		--svelte-ui-nav-item-underline-text-color: CanvasText;
+		--svelte-ui-nav-item-underline-selected-text-color: Highlight;
+		--svelte-ui-nav-item-underline-bar-color: Highlight;
 
 		/* Radio */
 		--svelte-ui-radio-border-color: CanvasText;

package/dist/components/Nav.svelte

@@ -4,7 +4,7 @@
 	import NavItem from './NavItem.svelte';
 	import type { NavItemSelectedStyle } from './NavItem.svelte';
 	import type { MenuItem } from '../types/menuItem';
-	import type { NavVariant } from '../types/propOptions';
+	import type { NavVariant, ChildrenVariant } from '../types/propOptions';
 	import { subscribeUrlChange } from '../utils/urlChange';
 	import { getCurrentPath, matchPath } from '../utils/navPath';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
@@ -14,9 +14,9 @@
 	// =========================================================================
 	export type NavProps = {
 		// 基本プロパティ
-		/** `{ label, href, icon?, disabled? }[]` */
+		/** `{ label, href, icon?, children?, disabled? }[]` */
 		navItems?: MenuItem[];
-		/** Layout variant. @default 'tab' */
+		/** Layout variant. @default 'horizontal' */
 		variant?: NavVariant;
 		/** Prepended to each item's href for active-state matching. */
 		pathPrefix?: string;
@@ -39,6 +39,10 @@
 		/** Visual style for the selected item. */
 		selectedStyle?: NavItemSelectedStyle;
 		gap?: number | string;
+		/** How child items are displayed. Defaults to `accordion` (vertical), `bar` (horizontal), `bottom-sheet` (mobile). */
+		childrenVariant?: ChildrenVariant;
+		/** Show chevron icon on parent items. @default true */
+		chevron?: boolean;
 
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
@@ -48,7 +52,7 @@
 	let {
 		// 基本プロパティ
 		navItems = [],
-		variant = 'tab',
+		variant = 'horizontal',
 		pathPrefix = '',
 		customPathMatcher,
 		currentPath,
@@ -66,6 +70,8 @@
 		// スタイル/レイアウト
 		selectedStyle,
 		gap,
+		childrenVariant = variant === 'mobile' ? 'bottom-sheet' : variant === 'vertical' ? 'accordion' : 'bar',
+		chevron,
 
 		// ARIA/アクセシビリティ
 		ariaLabel,
@@ -73,6 +79,11 @@
 	}: NavProps = $props();
 
 	let resolvedCurrentPath = $state('');
+	let navEl: HTMLElement | undefined = $state();
+	let subBarEl: HTMLElement | undefined = $state();
+
+	// bar/accordion モード: 展開中の親アイテム（$state.raw で Proxy ラップを避け === 比較を正常にする）
+	let expandedParent: MenuItem | null = $state.raw(null);
 
 	// =========================================================================
 	// Effects
@@ -84,25 +95,58 @@
 	$effect(() => {
 		return subscribeUrlChange(() => {
 			resolvedCurrentPath = getCurrentPath(currentPath);
+			if (childrenVariant !== 'accordion') expandedParent = null;
 		});
 	});
 
+	// accordion モード: アクティブな子を持つ親を自動展開
+	$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 (activeParent) expandedParent = activeParent;
+	});
+
 	// =========================================================================
 	// Methods
 	// =========================================================================
-	const handleKeyDown = (event: KeyboardEvent) => {
-		if (navItems.length === 0 || enabledIndices.length === 0) return;
+	const focusExpandedParent = () => {
+		if (!expandedParent || !navEl) return;
+		const idx = navItems.indexOf(expandedParent);
+		const parentEls = Array.from(navEl.querySelectorAll<HTMLElement>('[data-nav-item]'));
+		parentEls[idx]?.focus();
+	};
 
+	const handleKeyDown = (event: KeyboardEvent) => {
+		// accordion/expanded は子アイテムも DOM 順で含める
+		const includeChildren = childrenVariant === 'accordion' || childrenVariant === 'expanded';
+		const selector = includeChildren ? '[data-nav-item], [data-nav-item-child]' : '[data-nav-item]';
 		const navItemEls = Array.from(
-			(event.currentTarget as HTMLElement).querySelectorAll('[data-nav-item]')
-		) as HTMLElement[];
-		const currentItem = event.target as HTMLElement;
-		const currentIndex = navItemEls.indexOf(currentItem);
+			(event.currentTarget as HTMLElement).querySelectorAll<HTMLElement>(selector)
+		).filter(el => el.tabIndex !== -1);
+
+		if (navItemEls.length === 0) return;
 
+		const currentIndex = navItemEls.indexOf(event.target as HTMLElement);
 		if (currentIndex === -1) return;
 
-		const currentEnabledPosition = enabledIndices.indexOf(currentIndex);
-		let nextEnabledPosition = currentEnabledPosition;
+		// bar モード: 展開中の親で ArrowDown → サブバーの最初の子へ
+		if (childrenVariant === 'bar' && event.key === 'ArrowDown' && showSubBar) {
+			const allNavItemEls = Array.from(
+				(event.currentTarget as HTMLElement).querySelectorAll<HTMLElement>('[data-nav-item]')
+			);
+			const expandedEl = allNavItemEls[navItems.indexOf(expandedParent!)];
+			if (expandedEl && expandedEl.contains(event.target as Node)) {
+				event.preventDefault();
+				subBarEl?.querySelector<HTMLElement>('[data-nav-item-child]:not([tabindex="-1"])')?.focus();
+				return;
+			}
+		}
 
 		const isVertical = variant === 'vertical';
 		const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
@@ -111,28 +155,70 @@
 		switch (event.key) {
 			case prevKey:
 				event.preventDefault();
-				nextEnabledPosition =
-					currentEnabledPosition > 0 ? currentEnabledPosition - 1 : enabledIndices.length - 1;
+				navItemEls[currentIndex > 0 ? currentIndex - 1 : navItemEls.length - 1]?.focus();
 				break;
 			case nextKey:
 				event.preventDefault();
-				nextEnabledPosition =
-					currentEnabledPosition < enabledIndices.length - 1 ? currentEnabledPosition + 1 : 0;
+				navItemEls[currentIndex < navItemEls.length - 1 ? currentIndex + 1 : 0]?.focus();
 				break;
 			case 'Home':
 				event.preventDefault();
-				nextEnabledPosition = 0;
+				navItemEls[0]?.focus();
 				break;
 			case 'End':
 				event.preventDefault();
-				nextEnabledPosition = enabledIndices.length - 1;
+				navItemEls[navItemEls.length - 1]?.focus();
 				break;
 			default:
 				return;
 		}
+	};
+
+	const handleSubBarKeyDown = (event: KeyboardEvent) => {
+		const container = event.currentTarget as HTMLElement;
+		const items = Array.from(
+			container.querySelectorAll<HTMLElement>('[data-nav-item-child]:not([tabindex="-1"])')
+		);
+		const currentIndex = items.indexOf(event.target as HTMLElement);
+		if (currentIndex === -1) return;
 
-		const nextIndex = enabledIndices[nextEnabledPosition];
-		navItemEls[nextIndex]?.focus();
+		switch (event.key) {
+			case 'ArrowLeft':
+				event.preventDefault();
+				items[currentIndex > 0 ? currentIndex - 1 : items.length - 1]?.focus();
+				break;
+			case 'ArrowRight':
+				event.preventDefault();
+				items[currentIndex < items.length - 1 ? currentIndex + 1 : 0]?.focus();
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				focusExpandedParent();
+				break;
+			case 'Home':
+				event.preventDefault();
+				items[0]?.focus();
+				break;
+			case 'End':
+				event.preventDefault();
+				items[items.length - 1]?.focus();
+				break;
+			case 'Escape':
+				event.preventDefault();
+				focusExpandedParent();
+				expandedParent = null;
+				break;
+		}
+	};
+
+	const handleToggle = (item: MenuItem) => {
+		if (childrenVariant === 'accordion') {
+			// accordion: 開くのみ（再クリックで閉じない、他は自動的に閉じる）
+			expandedParent = item;
+		} else {
+			// bar: トグル
+			expandedParent = expandedParent === item ? null : item;
+		}
 	};
 
 	// =========================================================================
@@ -141,33 +227,37 @@
 	const selectedIndex = $derived.by(() => {
 		for (let i = 0; i < navItems.length; i++) {
 			const item = navItems[i];
-			if (!item.href) continue;
-			if (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)
+			)) {
 				return i;
 			}
 		}
 		return -1;
 	});
 
-	const enabledIndices = $derived(
-		navItems.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0)
+	const showSubBar = $derived(
+		variant === 'horizontal' && childrenVariant === 'bar' && expandedParent != null
 	);
 
-	const isTabVariant = $derived(variant === 'tab');
+	const isChildSelected = (child: MenuItem) =>
+		!!child.href && matchPath(resolvedCurrentPath, child.href, child, pathPrefix, customPathMatcher);
 </script>
 
 <nav
 	class="nav nav--{variant}"
-	role={isTabVariant ? 'tablist' : undefined}
 	aria-label={ariaLabelledby ? undefined : ariaLabel}
 	aria-labelledby={ariaLabelledby}
-	aria-orientation={variant === 'vertical' ? 'vertical' : 'horizontal'}
 	style:--internal-nav-gap={gap != null ? (typeof gap === 'number' ? `${gap}px` : gap) : undefined}
-	tabindex="-1"
 	{id}
-	onkeydown={handleKeyDown}
 	data-testid="nav"
+	bind:this={navEl}
 >
+	<div style="display: contents" role="presentation" onkeydown={handleKeyDown}>
 	{#each navItems as item, index}
 		<NavItem
 			{item}
@@ -181,32 +271,47 @@
 			{iconOpticalSize}
 			{iconVariant}
 			{selectedStyle}
+			{childrenVariant}
+			{chevron}
+			{resolvedCurrentPath}
+			{customPathMatcher}
+			isChildrenExpanded={(childrenVariant === 'bar' || childrenVariant === 'accordion') && expandedParent === item}
+			onChildrenToggle={handleToggle}
+			onChildrenClose={() => { expandedParent = null; }}
 		/>
 	{/each}
+	</div>
 </nav>
 
+<!-- bar モード: 選択中の親の子アイテムを横バーとして表示 -->
+{#if showSubBar && expandedParent?.children}
+	<div class="nav__sub-bar" role="menu" tabindex="-1" onkeydown={handleSubBarKeyDown} bind:this={subBarEl}>
+		{#each expandedParent.children as child}
+			<NavItem
+				item={child}
+				variant="horizontal"
+				{pathPrefix}
+				{iconFilled}
+				{iconWeight}
+				{iconGrade}
+				{iconOpticalSize}
+				{iconVariant}
+				{selectedStyle}
+				isChild={true}
+				{resolvedCurrentPath}
+				{customPathMatcher}
+				isSelected={isChildSelected(child)}
+				isDisabled={child.disabled ?? false}
+			/>
+		{/each}
+	</div>
+{/if}
+
 <style>.nav {
   display: flex;
   box-sizing: border-box;
 }
 
-.nav--tab {
-  flex-direction: row;
-  justify-content: start;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  min-height: var(--svelte-ui-tab-min-height);
-  overflow-x: auto;
-  overflow-y: visible;
-  -ms-overflow-style: none;
-  overscroll-behavior: contain;
-}
-
-.nav--tab::-webkit-scrollbar {
-  display: none;
-}
-
 .nav--mobile {
   flex-direction: row;
   width: 100%;
@@ -221,7 +326,24 @@
 }
 
 .nav--horizontal {
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+  gap: var(--internal-nav-gap, var(--svelte-ui-nav-horizontal-item-gap));
+  overflow-x: auto;
+  overflow-y: visible;
+  -ms-overflow-style: none;
+  overscroll-behavior: none;
+}
+
+.nav--horizontal::-webkit-scrollbar {
+  display: none;
+}
+
+.nav__sub-bar {
+  display: flex;
   flex-direction: row;
   gap: var(--internal-nav-gap, var(--svelte-ui-nav-horizontal-item-gap));
   align-items: center;
+  min-height: var(--svelte-ui-nav-sub-bar-min-height);
 }</style>

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

@@ -1,11 +1,11 @@
 import type { NavItemSelectedStyle } from './NavItem.svelte';
 import type { MenuItem } from '../types/menuItem';
-import type { NavVariant } from '../types/propOptions';
+import type { NavVariant, ChildrenVariant } from '../types/propOptions';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 export type NavProps = {
-    /** `{ label, href, icon?, disabled? }[]` */
+    /** `{ label, href, icon?, children?, disabled? }[]` */
     navItems?: MenuItem[];
-    /** Layout variant. @default 'tab' */
+    /** Layout variant. @default 'horizontal' */
     variant?: NavVariant;
     /** Prepended to each item's href for active-state matching. */
     pathPrefix?: string;
@@ -22,6 +22,10 @@ export type NavProps = {
     /** Visual style for the selected item. */
     selectedStyle?: NavItemSelectedStyle;
     gap?: number | string;
+    /** How child items are displayed. Defaults to `accordion` (vertical), `bar` (horizontal), `bottom-sheet` (mobile). */
+    childrenVariant?: ChildrenVariant;
+    /** Show chevron icon on parent items. @default true */
+    chevron?: boolean;
     ariaLabel?: string;
     ariaLabelledby?: string;
 };