@14ch/svelte-ui 0.0.29 → 0.0.31

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, SubMenuMode } 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';
@@ -39,8 +39,8 @@
 		/** Visual style for the selected item. */
 		selectedStyle?: NavItemSelectedStyle;
 		gap?: number | string;
-		/** Sub-menu display mode for items that have children. @default 'popup' */
-		subMenuMode?: SubMenuMode;
+		/** 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;
 
@@ -70,7 +70,7 @@
 		// スタイル/レイアウト
 		selectedStyle,
 		gap,
-		subMenuMode = 'popup',
+		childrenVariant = variant === 'mobile' ? 'bottom-sheet' : variant === 'vertical' ? 'accordion' : 'bar',
 		chevron,
 
 		// ARIA/アクセシビリティ
@@ -95,13 +95,13 @@
 	$effect(() => {
 		return subscribeUrlChange(() => {
 			resolvedCurrentPath = getCurrentPath(currentPath);
-			if (subMenuMode !== 'accordion') expandedParent = null;
+			if (childrenVariant !== 'accordion') expandedParent = null;
 		});
 	});
 
 	// accordion モード: アクティブな子を持つ親を自動展開
 	$effect(() => {
-		if (subMenuMode !== 'accordion' || !resolvedCurrentPath) return;
+		if (childrenVariant !== 'accordion' || !resolvedCurrentPath) return;
 		const activeParent = navItems.find((item) =>
 			item.children?.some(
 				(child) =>
@@ -124,7 +124,7 @@
 
 	const handleKeyDown = (event: KeyboardEvent) => {
 		// accordion/expanded は子アイテムも DOM 順で含める
-		const includeChildren = subMenuMode === 'accordion' || subMenuMode === 'expanded';
+		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<HTMLElement>(selector)
@@ -136,7 +136,7 @@
 		if (currentIndex === -1) return;
 
 		// bar モード: 展開中の親で ArrowDown → サブバーの最初の子へ
-		if (subMenuMode === 'bar' && event.key === 'ArrowDown' && showSubBar) {
+		if (childrenVariant === 'bar' && event.key === 'ArrowDown' && showSubBar) {
 			const allNavItemEls = Array.from(
 				(event.currentTarget as HTMLElement).querySelectorAll<HTMLElement>('[data-nav-item]')
 			);
@@ -211,8 +211,8 @@
 		}
 	};
 
-	const handleSubMenuToggle = (item: MenuItem) => {
-		if (subMenuMode === 'accordion') {
+	const handleToggle = (item: MenuItem) => {
+		if (childrenVariant === 'accordion') {
 			// accordion: 開くのみ（再クリックで閉じない、他は自動的に閉じる）
 			expandedParent = item;
 		} else {
@@ -231,7 +231,7 @@
 				return i;
 			}
 			// bar モード: 子が選択されていれば親も選択とみなす
-			if (subMenuMode === 'bar' && item.children?.some(
+			if (childrenVariant === 'bar' && item.children?.some(
 				(child) => child.href && matchPath(resolvedCurrentPath, child.href, child, pathPrefix, customPathMatcher)
 			)) {
 				return i;
@@ -241,7 +241,7 @@
 	});
 
 	const showSubBar = $derived(
-		variant === 'horizontal' && subMenuMode === 'bar' && expandedParent != null
+		variant === 'horizontal' && childrenVariant === 'bar' && expandedParent != null
 	);
 
 	const isChildSelected = (child: MenuItem) =>
@@ -271,13 +271,13 @@
 			{iconOpticalSize}
 			{iconVariant}
 			{selectedStyle}
-			{subMenuMode}
+			{childrenVariant}
 			{chevron}
 			{resolvedCurrentPath}
 			{customPathMatcher}
-			isSubMenuExpanded={(subMenuMode === 'bar' || subMenuMode === 'accordion') && expandedParent === item}
-			onSubMenuToggle={handleSubMenuToggle}
-			onClose={() => { expandedParent = null; }}
+			isChildrenVisible={(childrenVariant === 'bar' || childrenVariant === 'accordion') && expandedParent === item}
+			onChildrenToggle={handleToggle}
+			onChildrenClose={() => { expandedParent = null; }}
 		/>
 	{/each}
 	</div>

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

@@ -1,6 +1,6 @@
 import type { NavItemSelectedStyle } from './NavItem.svelte';
 import type { MenuItem } from '../types/menuItem';
-import type { NavVariant, SubMenuMode } 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?, children?, disabled? }[]` */
@@ -22,8 +22,8 @@ export type NavProps = {
     /** Visual style for the selected item. */
     selectedStyle?: NavItemSelectedStyle;
     gap?: number | string;
-    /** Sub-menu display mode for items that have children. @default 'popup' */
-    subMenuMode?: SubMenuMode;
+    /** 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;

package/dist/components/NavItem.svelte

@@ -7,7 +7,7 @@
 	import { fade, fly, slide } from 'svelte/transition';
 	import type { PopupPosition } from '../types/propOptions';
 	import type { MenuItem } from '../types/menuItem';
-	import type { NavVariant, SubMenuMode } from '../types/propOptions';
+	import type { NavVariant, ChildrenVariant } from '../types/propOptions';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import { tick } from 'svelte';
 	import { matchPath } from '../utils/navPath';
@@ -22,10 +22,10 @@
 		item: MenuItem;
 		variant?: NavVariant;
 		pathPrefix?: string;
-
-		// スタイル/レイアウト
-		/** Show chevron icon on parent items. @default true */
-		chevron?: boolean;
+		/** Current URL path passed from Nav for computing child selected state. */
+		resolvedCurrentPath?: string;
+		/** Custom function to determine if a child item is active. */
+		customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
 
 		// アイコン関連
 		iconFilled?: boolean;
@@ -34,26 +34,26 @@
 		iconOpticalSize?: IconOpticalSize;
 		iconVariant?: IconVariant;
 
+		// スタイル/レイアウト
+		/** Show chevron icon on parent items. @default true */
+		chevron?: boolean;
+		selectedStyle?: NavItemSelectedStyle;
+		/** How child items are displayed. Defaults to `accordion` (vertical), `bar` (horizontal), `bottom-sheet` (mobile). */
+		childrenVariant?: ChildrenVariant;
+
 		// 状態/動作
 		isSelected?: boolean;
 		isDisabled?: boolean;
-		selectedStyle?: NavItemSelectedStyle;
-
-		// サブメニュー関連
-		/** Sub-menu display mode. @default 'popup' */
-		subMenuMode?: SubMenuMode;
 		/** When true, this item does not render its own children (prevents infinite recursion). */
 		isChild?: boolean;
-		/** Current URL path passed from Nav for computing child selected state. */
-		resolvedCurrentPath?: string;
-		/** Custom function to determine if a child item is active. */
-		customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
-		/** For bar/accordion mode: whether this item's sub-menu is currently expanded. */
-		isSubMenuExpanded?: boolean;
+		/** Whether this item's children are currently visible. */
+		isChildrenVisible?: boolean;
+
+		// イベントハンドラ
 		/** For bar/accordion mode: called when this parent is clicked. */
-		onSubMenuToggle?: (item: MenuItem) => void;
+		onChildrenToggle?: (item: MenuItem) => void;
 		/** Called when a leaf item (no children) is clicked — used to close any open sub-menu. */
-		onClose?: () => void;
+		onChildrenClose?: () => void;
 	};
 
 	let {
@@ -61,6 +61,8 @@
 		item,
 		variant = 'horizontal',
 		pathPrefix = '',
+		resolvedCurrentPath = '',
+		customPathMatcher,
 
 		// アイコン関連
 		iconFilled = false,
@@ -71,20 +73,18 @@
 
 		// スタイル/レイアウト
 		chevron = true,
+		selectedStyle,
+		childrenVariant = variant === 'mobile' ? 'bottom-sheet' : variant === 'vertical' ? 'accordion' : 'bar',
 
 		// 状態/動作
 		isSelected = false,
 		isDisabled = false,
-		selectedStyle,
-
-		// サブメニュー関連
-		subMenuMode = 'popup',
 		isChild = false,
-		resolvedCurrentPath = '',
-		customPathMatcher,
-		isSubMenuExpanded = false,
-		onSubMenuToggle,
-		onClose
+		isChildrenVisible = $bindable(false),
+
+		// イベントハンドラ
+		onChildrenToggle,
+		onChildrenClose
 	}: NavItemProps = $props();
 
 	// =========================================================================
@@ -121,70 +121,56 @@
 	// =========================================================================
 	// States
 	// =========================================================================
-	let isSubMenuOpen = $state(false);
 	let anchorEl: HTMLElement | undefined = $state();
 	let popupMenuRef: PopupMenu | undefined = $state();
-	let isPopupOpen = $state(false);
 	let bottomSheetEl: HTMLElement | undefined = $state();
 
 	const focusFirstChild = (container: HTMLElement | undefined) =>
 		container?.querySelector<HTMLElement>('[data-nav-item-child]:not([tabindex="-1"])')?.focus();
 
 	$effect(() => {
-		if (isSubMenuOpen) tick().then(() => focusFirstChild(bottomSheetEl));
+		if (isChildrenVisible && childrenVariant === 'bottom-sheet') tick().then(() => focusFirstChild(bottomSheetEl));
 	});
 
 	const popupPosition = $derived<PopupPosition>(
 		variant === 'vertical' ? 'right-top' : variant === 'mobile' ? 'top-center' : 'bottom-left'
 	);
 
-	const isSubMenuVisible = $derived(
-		!hasChildren
-			? false
-			: subMenuMode === 'expanded'
-				? true
-				: subMenuMode === 'bottom-sheet'
-					? isSubMenuOpen
-					: subMenuMode === 'popup'
-						? isPopupOpen
-						: isSubMenuExpanded
-	);
-
-	const showChevron = $derived(hasChildren && chevron && variant !== 'mobile');
+	const showChevron = $derived(hasChildren && chevron && variant !== 'mobile' && childrenVariant !== 'expanded');
 
 	// popup の方向に合わせたアイコン。それ以外は expand_more
 	const chevronIcon = $derived(
-		subMenuMode === 'popup' && variant === 'vertical'
+		childrenVariant === 'popup' && variant === 'vertical'
 			? 'arrow_right'
-			: subMenuMode === 'popup' && variant === 'horizontal'
+			: childrenVariant === 'popup' && variant === 'horizontal'
 				? 'arrow_drop_down'
 				: 'expand_more'
 	);
 
 	// popup 専用アイコンは方向固定なので展開時も回転しない
-	const chevronRotates = $derived(subMenuMode !== 'popup');
+	const chevronRotates = $derived(childrenVariant !== 'popup');
 
 	// =========================================================================
 	// Methods
 	// =========================================================================
-	const toggleSubMenu = () => {
-		isSubMenuOpen = !isSubMenuOpen;
+	const toggleOpen = () => {
+		isChildrenVisible = !isChildrenVisible;
 	};
 
-	const closeSubMenu = () => {
-		isSubMenuOpen = false;
+	const closeOpen = () => {
+		isChildrenVisible = false;
 	};
 
 	// popup の ArrowRight(vertical) / ArrowDown(horizontal) でサブメニューを開く
 	const handleTriggerKeyDown = (event: KeyboardEvent) => {
-		if (!hasChildren || subMenuMode !== 'popup' || isPopupOpen) return;
+		if (!hasChildren || childrenVariant !== 'popup' || isChildrenVisible) return;
 		const openKey = variant === 'vertical' ? 'ArrowRight' : 'ArrowDown';
 		if (event.key !== openKey) return;
 		event.preventDefault();
 		popupMenuRef?.toggle();
 	};
 
-	const handleSubMenuKeyDown = (event: KeyboardEvent, horizontal = false) => {
+	const handleChildKeyDown = (event: KeyboardEvent, horizontal = false) => {
 		const container = event.currentTarget as HTMLElement;
 		const items = Array.from(
 			container.querySelectorAll<HTMLElement>('[data-nav-item-child]:not([tabindex="-1"])')
@@ -213,9 +199,9 @@
 				items[items.length - 1]?.focus();
 				break;
 			case 'Escape':
-				if (subMenuMode === 'bottom-sheet') {
+				if (childrenVariant === 'bottom-sheet') {
 					event.preventDefault();
-					closeSubMenu();
+					closeOpen();
 					anchorEl?.focus();
 				}
 				break;
@@ -223,12 +209,12 @@
 	};
 
 	const handleLinkClick = () => {
-		if (subMenuMode === 'popup') {
+		if (childrenVariant === 'popup') {
 			popupMenuRef?.toggle();
-		} else if (subMenuMode === 'bottom-sheet') {
-			toggleSubMenu();
-		} else {
-			onSubMenuToggle?.(item);
+		} else if (childrenVariant === 'bottom-sheet') {
+			toggleOpen();
+		} else if (childrenVariant !== 'expanded') {
+			onChildrenToggle?.(item);
 		}
 	};
 
@@ -273,7 +259,7 @@
 	=================================================================== -->
 	<div
 		class="nav-item__group nav-item__group--{variant}"
-		class:nav-item__group--open={isSubMenuVisible}
+		class:nav-item__group--open={childrenVariant === 'expanded' || isChildrenVisible}
 	>
 		<a
 			href={resolvedParentHref}
@@ -285,7 +271,7 @@
 			class:nav-item--style-tonal={isSelected && resolvedSelectedStyle === 'tonal'}
 			class:nav-item--style-underline={resolvedSelectedStyle === 'underline'}
 			aria-current={isSelected ? 'page' : undefined}
-			aria-expanded={subMenuMode === 'popup' ? isPopupOpen : isSubMenuExpanded}
+			aria-expanded={childrenVariant === 'expanded' || isChildrenVisible}
 			tabindex={0}
 			data-nav-item
 			data-testid="nav-item"
@@ -309,7 +295,7 @@
 			{#if showChevron}
 				<div
 					class="nav-item__chevron"
-					class:nav-item__chevron--expanded={chevronRotates && isSubMenuVisible}
+					class:nav-item__chevron--expanded={chevronRotates && isChildrenVisible}
 				>
 					<Icon
 						weight={iconWeight}
@@ -322,10 +308,10 @@
 		</a>
 
 		<!-- popup サブメニュー -->
-		{#if subMenuMode === 'popup'}
+		{#if childrenVariant === 'popup'}
 			<PopupMenu
 				bind:this={popupMenuRef}
-				bind:isOpen={isPopupOpen}
+				bind:isOpen={isChildrenVisible}
 				anchorElement={anchorEl}
 				position={popupPosition}
 				menuItems={item.children!}
@@ -339,7 +325,7 @@
 		{/if}
 
 		<!-- accordion / expanded サブメニュー -->
-		{#if (subMenuMode === 'accordion' || subMenuMode === 'expanded') && isSubMenuVisible}
+		{#if childrenVariant === 'expanded' || (childrenVariant === 'accordion' && isChildrenVisible)}
 			<div class="nav-item__children" role="presentation" transition:slide={{ duration: 200 }}>
 				{#each item.children! as child}
 					<NavItem
@@ -363,11 +349,11 @@
 		{/if}
 
 		<!-- bottom-sheet オーバーレイ -->
-		{#if subMenuMode === 'bottom-sheet' && isSubMenuOpen}
+		{#if childrenVariant === 'bottom-sheet' && isChildrenVisible}
 			<div
 				class="nav-item__bottom-sheet-backdrop"
 				role="presentation"
-				onclick={closeSubMenu}
+				onclick={closeOpen}
 				transition:fade={{ duration: 200 }}
 			></div>
 			<div
@@ -375,7 +361,7 @@
 				role="menu"
 				tabindex="-1"
 				transition:fly={{ y: 100, duration: 250 }}
-				onkeydown={(e) => handleSubMenuKeyDown(e, true)}
+				onkeydown={(e) => handleChildKeyDown(e, true)}
 				bind:this={bottomSheetEl}
 			>
 				{#each item.children! as child}
@@ -394,7 +380,7 @@
 						{customPathMatcher}
 						isSelected={isChildSelected(child)}
 						isDisabled={child.disabled ?? false}
-						onClose={closeSubMenu}
+						onChildrenClose={closeOpen}
 					/>
 				{/each}
 			</div>
@@ -418,7 +404,7 @@
 		data-nav-item={!isChild ? '' : undefined}
 		data-nav-item-child={isChild ? '' : undefined}
 		data-testid="nav-item"
-		onclick={onClose}
+		onclick={onChildrenClose}
 	>
 		{#if item.icon}
 			<div class="nav-item__icon">

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

@@ -1,37 +1,37 @@
 import NavItem from './NavItem.svelte';
 import type { MenuItem } from '../types/menuItem';
-import type { NavVariant, SubMenuMode } from '../types/propOptions';
+import type { NavVariant, ChildrenVariant } from '../types/propOptions';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 export type NavItemSelectedStyle = 'color' | 'filled' | 'tonal' | 'underline';
 export type NavItemProps = {
     item: MenuItem;
     variant?: NavVariant;
     pathPrefix?: string;
-    /** Show chevron icon on parent items. @default true */
-    chevron?: boolean;
+    /** Current URL path passed from Nav for computing child selected state. */
+    resolvedCurrentPath?: string;
+    /** Custom function to determine if a child item is active. */
+    customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
     iconFilled?: boolean;
     iconWeight?: IconWeight;
     iconGrade?: IconGrade;
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
+    /** Show chevron icon on parent items. @default true */
+    chevron?: boolean;
+    selectedStyle?: NavItemSelectedStyle;
+    /** How child items are displayed. Defaults to `accordion` (vertical), `bar` (horizontal), `bottom-sheet` (mobile). */
+    childrenVariant?: ChildrenVariant;
     isSelected?: boolean;
     isDisabled?: boolean;
-    selectedStyle?: NavItemSelectedStyle;
-    /** Sub-menu display mode. @default 'popup' */
-    subMenuMode?: SubMenuMode;
     /** When true, this item does not render its own children (prevents infinite recursion). */
     isChild?: boolean;
-    /** Current URL path passed from Nav for computing child selected state. */
-    resolvedCurrentPath?: string;
-    /** Custom function to determine if a child item is active. */
-    customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
-    /** For bar/accordion mode: whether this item's sub-menu is currently expanded. */
-    isSubMenuExpanded?: boolean;
+    /** Whether this item's children are currently visible. */
+    isChildrenVisible?: boolean;
     /** For bar/accordion mode: called when this parent is clicked. */
-    onSubMenuToggle?: (item: MenuItem) => void;
+    onChildrenToggle?: (item: MenuItem) => void;
     /** Called when a leaf item (no children) is clicked — used to close any open sub-menu. */
-    onClose?: () => void;
+    onChildrenClose?: () => void;
 };
-declare const NavItem: import("svelte").Component<NavItemProps, {}, "">;
+declare const NavItem: import("svelte").Component<NavItemProps, {}, "isChildrenVisible">;
 type NavItem = ReturnType<typeof NavItem>;
 export default NavItem;

package/dist/index.d.ts

@@ -78,7 +78,7 @@ export type { NavProps } from './components/Nav.svelte';
 export type { NavItemProps, NavItemSelectedStyle } from './components/NavItem.svelte';
 export type { TabProps } from './components/Tab.svelte';
 export type { TextareaProps } from './components/Textarea.svelte';
-export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle, NavVariant, SubMenuMode } from './types/propOptions';
+export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle, NavVariant, ChildrenVariant } from './types/propOptions';
 export type { MenuItem } from './types/menuItem';
 export type { SegmentedControlItem } from './types/segmentedControlItem';
 export type { Option, OptionValue } from './types/options';

package/dist/types/propOptions.d.ts

@@ -58,11 +58,11 @@ export type FocusStyle = 'background' | 'outline' | 'none';
  */
 export type NavVariant = 'vertical' | 'horizontal' | 'mobile';
 /**
- * Sub-menu display mode for Nav hierarchical menus.
+ * Display variant for Nav hierarchical (children) menus.
  * - `popup`: child items appear in a floating panel (all variants)
  * - `accordion`: child items expand/collapse inline (vertical only)
  * - `expanded`: child items are always visible inline (vertical only)
  * - `bar`: child items appear in a secondary bar below the nav (horizontal only)
  * - `bottom-sheet`: child items appear in a fixed bottom sheet overlay (mobile only)
  */
-export type SubMenuMode = 'popup' | 'accordion' | 'expanded' | 'bar' | 'bottom-sheet';
+export type ChildrenVariant = 'popup' | 'accordion' | 'expanded' | 'bar' | 'bottom-sheet';

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