@14ch/svelte-ui 0.0.30 → 0.0.32

package/dist/assets/styles/variables.scss

@@ -398,7 +398,6 @@
 	/* 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;

package/dist/components/Nav.svelte

@@ -2,7 +2,7 @@
 
 <script lang="ts">
 	import NavItem from './NavItem.svelte';
-	import type { NavItemSelectedStyle } from './NavItem.svelte';
+	import type { NavItemSelectedVariant } from './NavItem.svelte';
 	import type { MenuItem } from '../types/menuItem';
 	import type { NavVariant, ChildrenVariant } from '../types/propOptions';
 	import { subscribeUrlChange } from '../utils/urlChange';
@@ -37,12 +37,20 @@
 
 		// スタイル/レイアウト
 		/** Visual style for the selected item. */
-		selectedStyle?: NavItemSelectedStyle;
+		selectedVariant?: NavItemSelectedVariant;
 		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;
+		/** Inline style applied to the nav container element. */
+		customContainerStyle?: string;
+		/** Inline style applied to each nav item element. */
+		customItemStyle?: string;
+		/** Inline style applied to each child nav item element. */
+		customChildrenItemStyle?: string;
+		/** Inline style applied to the children container (accordion/expanded list, bar row). */
+		customChildrenContainerStyle?: string;
 
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
@@ -68,10 +76,14 @@
 		iconVariant = 'outlined',
 
 		// スタイル/レイアウト
-		selectedStyle,
+		selectedVariant,
 		gap,
 		childrenVariant = variant === 'mobile' ? 'bottom-sheet' : variant === 'vertical' ? 'accordion' : 'bar',
 		chevron,
+		customContainerStyle,
+		customItemStyle,
+		customChildrenItemStyle,
+		customChildrenContainerStyle,
 
 		// ARIA/アクセシビリティ
 		ariaLabel,
@@ -253,6 +265,7 @@
 	aria-label={ariaLabelledby ? undefined : ariaLabel}
 	aria-labelledby={ariaLabelledby}
 	style:--internal-nav-gap={gap != null ? (typeof gap === 'number' ? `${gap}px` : gap) : undefined}
+	style={customContainerStyle}
 	{id}
 	data-testid="nav"
 	bind:this={navEl}
@@ -270,12 +283,15 @@
 			{iconGrade}
 			{iconOpticalSize}
 			{iconVariant}
-			{selectedStyle}
+			{selectedVariant}
 			{childrenVariant}
 			{chevron}
+			customStyle={customItemStyle}
+			customChildrenStyle={customChildrenItemStyle}
+			{customChildrenContainerStyle}
 			{resolvedCurrentPath}
 			{customPathMatcher}
-			isChildrenExpanded={(childrenVariant === 'bar' || childrenVariant === 'accordion') && expandedParent === item}
+			isChildrenVisible={(childrenVariant === 'bar' || childrenVariant === 'accordion') && expandedParent === item}
 			onChildrenToggle={handleToggle}
 			onChildrenClose={() => { expandedParent = null; }}
 		/>
@@ -285,7 +301,7 @@
 
 <!-- bar モード: 選択中の親の子アイテムを横バーとして表示 -->
 {#if showSubBar && expandedParent?.children}
-	<div class="nav__sub-bar" role="menu" tabindex="-1" 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}
@@ -296,7 +312,8 @@
 				{iconGrade}
 				{iconOpticalSize}
 				{iconVariant}
-				{selectedStyle}
+				{selectedVariant}
+				customStyle={customChildrenItemStyle}
 				isChild={true}
 				{resolvedCurrentPath}
 				{customPathMatcher}
@@ -340,10 +357,9 @@
   display: none;
 }
 
-.nav__sub-bar {
+.nav__children-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,4 +1,4 @@
-import type { NavItemSelectedStyle } from './NavItem.svelte';
+import type { NavItemSelectedVariant } from './NavItem.svelte';
 import type { MenuItem } from '../types/menuItem';
 import type { NavVariant, ChildrenVariant } from '../types/propOptions';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
@@ -20,12 +20,20 @@ export type NavProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     /** Visual style for the selected item. */
-    selectedStyle?: NavItemSelectedStyle;
+    selectedVariant?: NavItemSelectedVariant;
     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;
+    /** Inline style applied to the nav container element. */
+    customContainerStyle?: string;
+    /** Inline style applied to each nav item element. */
+    customItemStyle?: string;
+    /** Inline style applied to each child nav item element. */
+    customChildrenItemStyle?: string;
+    /** Inline style applied to the children container (accordion/expanded list, bar row). */
+    customChildrenContainerStyle?: string;
     ariaLabel?: string;
     ariaLabelledby?: string;
 };

package/dist/components/NavItem.svelte

@@ -15,7 +15,7 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type NavItemSelectedStyle = 'color' | 'filled' | 'tonal' | 'underline';
+	export type NavItemSelectedVariant = 'color' | 'filled' | 'tonal' | 'underline';
 
 	export type NavItemProps = {
 		// 基本プロパティ
@@ -37,17 +37,23 @@
 		// スタイル/レイアウト
 		/** Show chevron icon on parent items. @default true */
 		chevron?: boolean;
-		selectedStyle?: NavItemSelectedStyle;
+		selectedVariant?: NavItemSelectedVariant;
 		/** How child items are displayed. Defaults to `accordion` (vertical), `bar` (horizontal), `bottom-sheet` (mobile). */
 		childrenVariant?: ChildrenVariant;
+		/** Inline style applied to this nav item element. */
+		customStyle?: string;
+		/** Inline style applied to each child nav item element. */
+		customChildrenStyle?: string;
+		/** Inline style applied to the children container (accordion/expanded list). */
+		customChildrenContainerStyle?: string;
 
 		// 状態/動作
 		isSelected?: boolean;
 		isDisabled?: boolean;
 		/** When true, this item does not render its own children (prevents infinite recursion). */
 		isChild?: boolean;
-		/** For bar/accordion mode: whether this item's sub-menu is currently expanded. */
-		isChildrenExpanded?: boolean;
+		/** Whether this item's children are currently visible. */
+		isChildrenVisible?: boolean;
 
 		// イベントハンドラ
 		/** For bar/accordion mode: called when this parent is clicked. */
@@ -73,14 +79,17 @@
 
 		// スタイル/レイアウト
 		chevron = true,
-		selectedStyle,
+		selectedVariant,
 		childrenVariant = variant === 'mobile' ? 'bottom-sheet' : variant === 'vertical' ? 'accordion' : 'bar',
+		customStyle,
+		customChildrenStyle,
+		customChildrenContainerStyle,
 
 		// 状態/動作
 		isSelected = false,
 		isDisabled = false,
 		isChild = false,
-		isChildrenExpanded = false,
+		isChildrenVisible = $bindable(false),
 
 		// イベントハンドラ
 		onChildrenToggle,
@@ -99,7 +108,7 @@
 	const hrefWithPrefix = $derived(item.href ? withPrefix(item.href) : undefined);
 
 	const resolvedSelectedStyle = $derived(
-		selectedStyle ?? (variant === 'vertical' || variant === 'horizontal' ? 'tonal' : 'color')
+		selectedVariant ?? (variant === 'vertical' || variant === 'horizontal' ? 'tonal' : 'color')
 	);
 
 	// isChild=true のアイテムでは children を展開しない（無限再帰防止）
@@ -121,36 +130,22 @@
 	// =========================================================================
 	// States
 	// =========================================================================
-	let isChildrenOpen = $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 (isChildrenOpen) 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 isChildrenVisible = $derived(
-		!hasChildren
-			? false
-			: childrenVariant === 'expanded'
-				? true
-				: childrenVariant === 'bottom-sheet'
-					? isChildrenOpen
-					: childrenVariant === 'popup'
-						? isPopupOpen
-						: isChildrenExpanded
-	);
-
-	const showChevron = $derived(hasChildren && chevron && variant !== 'mobile');
+	const showChevron = $derived(hasChildren && chevron && variant !== 'mobile' && childrenVariant !== 'expanded');
 
 	// popup の方向に合わせたアイコン。それ以外は expand_more
 	const chevronIcon = $derived(
@@ -168,16 +163,16 @@
 	// Methods
 	// =========================================================================
 	const toggleOpen = () => {
-		isChildrenOpen = !isChildrenOpen;
+		isChildrenVisible = !isChildrenVisible;
 	};
 
 	const closeOpen = () => {
-		isChildrenOpen = false;
+		isChildrenVisible = false;
 	};
 
 	// popup の ArrowRight(vertical) / ArrowDown(horizontal) でサブメニューを開く
 	const handleTriggerKeyDown = (event: KeyboardEvent) => {
-		if (!hasChildren || childrenVariant !== 'popup' || isPopupOpen) return;
+		if (!hasChildren || childrenVariant !== 'popup' || isChildrenVisible) return;
 		const openKey = variant === 'vertical' ? 'ArrowRight' : 'ArrowDown';
 		if (event.key !== openKey) return;
 		event.preventDefault();
@@ -227,7 +222,7 @@
 			popupMenuRef?.toggle();
 		} else if (childrenVariant === 'bottom-sheet') {
 			toggleOpen();
-		} else {
+		} else if (childrenVariant !== 'expanded') {
 			onChildrenToggle?.(item);
 		}
 	};
@@ -246,6 +241,7 @@
 		class:nav-item--style-filled={isSelected && resolvedSelectedStyle === 'filled'}
 		class:nav-item--style-tonal={isSelected && resolvedSelectedStyle === 'tonal'}
 		class:nav-item--style-underline={resolvedSelectedStyle === 'underline'}
+		style={customStyle}
 		aria-disabled="true"
 		tabindex="-1"
 		data-nav-item={!isChild ? '' : undefined}
@@ -273,7 +269,7 @@
 	=================================================================== -->
 	<div
 		class="nav-item__group nav-item__group--{variant}"
-		class:nav-item__group--open={isChildrenVisible}
+		class:nav-item__group--open={childrenVariant === 'expanded' || isChildrenVisible}
 	>
 		<a
 			href={resolvedParentHref}
@@ -284,8 +280,9 @@
 			class:nav-item--style-filled={isSelected && resolvedSelectedStyle === 'filled'}
 			class:nav-item--style-tonal={isSelected && resolvedSelectedStyle === 'tonal'}
 			class:nav-item--style-underline={resolvedSelectedStyle === 'underline'}
+			style={customStyle}
 			aria-current={isSelected ? 'page' : undefined}
-			aria-expanded={childrenVariant === 'popup' ? isPopupOpen : isChildrenExpanded}
+			aria-expanded={childrenVariant === 'expanded' || isChildrenVisible}
 			tabindex={0}
 			data-nav-item
 			data-testid="nav-item"
@@ -325,7 +322,7 @@
 		{#if childrenVariant === 'popup'}
 			<PopupMenu
 				bind:this={popupMenuRef}
-				bind:isOpen={isPopupOpen}
+				bind:isOpen={isChildrenVisible}
 				anchorElement={anchorEl}
 				position={popupPosition}
 				menuItems={item.children!}
@@ -339,8 +336,8 @@
 		{/if}
 
 		<!-- accordion / expanded サブメニュー -->
-		{#if (childrenVariant === 'accordion' || childrenVariant === 'expanded') && isChildrenVisible}
-			<div class="nav-item__children" role="presentation" transition:slide={{ duration: 200 }}>
+		{#if childrenVariant === 'expanded' || (childrenVariant === 'accordion' && isChildrenVisible)}
+			<div class="nav-item__children" role="presentation" style={customChildrenContainerStyle} transition:slide={{ duration: 200 }}>
 				{#each item.children! as child}
 					<NavItem
 						item={child}
@@ -351,7 +348,8 @@
 						{iconGrade}
 						{iconOpticalSize}
 						{iconVariant}
-						{selectedStyle}
+						{selectedVariant}
+						customStyle={customChildrenStyle}
 						isChild={true}
 						{resolvedCurrentPath}
 						{customPathMatcher}
@@ -363,7 +361,7 @@
 		{/if}
 
 		<!-- bottom-sheet オーバーレイ -->
-		{#if childrenVariant === 'bottom-sheet' && isChildrenOpen}
+		{#if childrenVariant === 'bottom-sheet' && isChildrenVisible}
 			<div
 				class="nav-item__bottom-sheet-backdrop"
 				role="presentation"
@@ -388,7 +386,8 @@
 						{iconGrade}
 						{iconOpticalSize}
 						{iconVariant}
-						{selectedStyle}
+						{selectedVariant}
+						customStyle={customChildrenStyle}
 						isChild={true}
 						{resolvedCurrentPath}
 						{customPathMatcher}
@@ -413,6 +412,7 @@
 		class:nav-item--style-filled={isSelected && resolvedSelectedStyle === 'filled'}
 		class:nav-item--style-tonal={isSelected && resolvedSelectedStyle === 'tonal'}
 		class:nav-item--style-underline={resolvedSelectedStyle === 'underline'}
+		style={customStyle}
 		aria-current={isSelected ? 'page' : undefined}
 		tabindex={0}
 		data-nav-item={!isChild ? '' : undefined}

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

@@ -2,7 +2,7 @@ import NavItem from './NavItem.svelte';
 import type { MenuItem } from '../types/menuItem';
 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 NavItemSelectedVariant = 'color' | 'filled' | 'tonal' | 'underline';
 export type NavItemProps = {
     item: MenuItem;
     variant?: NavVariant;
@@ -18,20 +18,26 @@ export type NavItemProps = {
     iconVariant?: IconVariant;
     /** Show chevron icon on parent items. @default true */
     chevron?: boolean;
-    selectedStyle?: NavItemSelectedStyle;
+    selectedVariant?: NavItemSelectedVariant;
     /** How child items are displayed. Defaults to `accordion` (vertical), `bar` (horizontal), `bottom-sheet` (mobile). */
     childrenVariant?: ChildrenVariant;
+    /** Inline style applied to this nav item element. */
+    customStyle?: string;
+    /** Inline style applied to each child nav item element. */
+    customChildrenStyle?: string;
+    /** Inline style applied to the children container (accordion/expanded list). */
+    customChildrenContainerStyle?: string;
     isSelected?: boolean;
     isDisabled?: boolean;
     /** When true, this item does not render its own children (prevents infinite recursion). */
     isChild?: boolean;
-    /** For bar/accordion mode: whether this item's sub-menu is currently expanded. */
-    isChildrenExpanded?: 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, {}, "">;
+declare const NavItem: import("svelte").Component<NavItemProps, {}, "isChildrenVisible">;
 type NavItem = ReturnType<typeof NavItem>;
 export default NavItem;

package/dist/components/Tab.svelte

@@ -80,7 +80,7 @@
 	<Nav
 		navItems={tabItems}
 		variant="horizontal"
-		selectedStyle="underline"
+		selectedVariant="underline"
 		{pathPrefix}
 		{customPathMatcher}
 		{currentPath}

package/dist/index.d.ts

@@ -75,7 +75,7 @@ export type { SkeletonHeadingProps } from './components/skeleton/SkeletonHeading
 export type { SkeletonMediaProps } from './components/skeleton/SkeletonMedia.svelte';
 export type { SwitchProps } from './components/Switch.svelte';
 export type { NavProps } from './components/Nav.svelte';
-export type { NavItemProps, NavItemSelectedStyle } from './components/NavItem.svelte';
+export type { NavItemProps, NavItemSelectedVariant } 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, ChildrenVariant } from './types/propOptions';

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