@14ch/svelte-ui 0.0.23 → 0.0.25

package/dist/assets/styles/variables.scss

@@ -373,6 +373,36 @@
 	--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);
+	--svelte-ui-nav-item-selected-bg-color: var(--svelte-ui-hover-overlay);
+	--svelte-ui-nav-item-filled-text-color: #ffffff;
+	--svelte-ui-nav-item-tonal-bg-color: color-mix(
+		in srgb,
+		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;
+	--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);
+	/* 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-mobile-item-bar-width: 40px;
+	--svelte-ui-nav-item-padding: 8px 12px;
+	--svelte-ui-nav-item-border-radius: var(--svelte-ui-border-radius);
+	/* Nav: vertical */
+	--svelte-ui-nav-vertical-padding: 8px;
+	--svelte-ui-nav-vertical-item-gap: 8px;
+	/* Nav: horizontal */
+	--svelte-ui-nav-horizontal-item-gap: 8px;
+
 	/* Input */
 	--svelte-ui-input-height: var(--svelte-ui-form-height);
 	--svelte-ui-input-padding: var(--svelte-ui-form-padding);

package/dist/components/Nav.svelte

@@ -0,0 +1,218 @@
+<!-- Nav.svelte -->
+
+<script lang="ts">
+	import NavItem from './NavItem.svelte';
+	import type { NavItemSelectedStyle } from './NavItem.svelte';
+	import type { MenuItem } from '../types/menuItem';
+	import type { NavVariant } from '../types/propOptions';
+	import { subscribeUrlChange } from '../utils/urlChange';
+	import { getCurrentPath, matchPath } from '../utils/navPath';
+	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	export type NavProps = {
+		// 基本プロパティ
+		items?: MenuItem[];
+		variant?: NavVariant;
+		pathPrefix?: string;
+		customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
+		currentPath?: string;
+
+		// HTML属性
+		id?: string;
+
+		// アイコン関連
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+
+		// スタイル/レイアウト
+		selectedStyle?: NavItemSelectedStyle;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaLabelledby?: string;
+	};
+
+	let {
+		// 基本プロパティ
+		items = [],
+		variant = 'tab',
+		pathPrefix = '',
+		customPathMatcher,
+		currentPath,
+
+		// HTML属性
+		id,
+
+		// アイコン関連
+		iconFilled = false,
+		iconWeight = 300,
+		iconGrade = 0,
+		iconOpticalSize = 24,
+		iconVariant = 'outlined',
+
+		// スタイル/レイアウト
+		selectedStyle,
+
+		// ARIA/アクセシビリティ
+		ariaLabel,
+		ariaLabelledby
+	}: NavProps = $props();
+
+	let resolvedCurrentPath = $state('');
+
+	// =========================================================================
+	// Effects
+	// =========================================================================
+	$effect(() => {
+		resolvedCurrentPath = getCurrentPath(currentPath);
+	});
+
+	$effect(() => {
+		return subscribeUrlChange(() => {
+			resolvedCurrentPath = getCurrentPath(currentPath);
+		});
+	});
+
+	// =========================================================================
+	// Methods
+	// =========================================================================
+	const handleKeyDown = (event: KeyboardEvent) => {
+		if (items.length === 0 || enabledIndices.length === 0) return;
+
+		const navEl = event.currentTarget as HTMLElement;
+		const navItems = Array.from(navEl.querySelectorAll('[data-nav-item]')) as HTMLElement[];
+		const currentItem = event.target as HTMLElement;
+		const currentIndex = navItems.indexOf(currentItem);
+
+		if (currentIndex === -1) return;
+
+		const currentEnabledPosition = enabledIndices.indexOf(currentIndex);
+		let nextEnabledPosition = currentEnabledPosition;
+
+		const isVertical = variant === 'vertical';
+		const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+		const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+
+		switch (event.key) {
+			case prevKey:
+				event.preventDefault();
+				nextEnabledPosition =
+					currentEnabledPosition > 0 ? currentEnabledPosition - 1 : enabledIndices.length - 1;
+				break;
+			case nextKey:
+				event.preventDefault();
+				nextEnabledPosition =
+					currentEnabledPosition < enabledIndices.length - 1 ? currentEnabledPosition + 1 : 0;
+				break;
+			case 'Home':
+				event.preventDefault();
+				nextEnabledPosition = 0;
+				break;
+			case 'End':
+				event.preventDefault();
+				nextEnabledPosition = enabledIndices.length - 1;
+				break;
+			default:
+				return;
+		}
+
+		const nextIndex = enabledIndices[nextEnabledPosition];
+		navItems[nextIndex]?.focus();
+	};
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const selectedIndex = $derived.by(() => {
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			if (!item.href) continue;
+			if (matchPath(resolvedCurrentPath, item.href, item, pathPrefix, customPathMatcher)) {
+				return i;
+			}
+		}
+		return -1;
+	});
+
+	const enabledIndices = $derived(
+		items.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0)
+	);
+
+	const isTabVariant = $derived(variant === 'tab');
+</script>
+
+<nav
+	class="nav nav--{variant}"
+	role={isTabVariant ? 'tablist' : undefined}
+	aria-label={ariaLabelledby ? undefined : ariaLabel}
+	aria-labelledby={ariaLabelledby}
+	aria-orientation={variant === 'vertical' ? 'vertical' : 'horizontal'}
+	tabindex="-1"
+	{id}
+	onkeydown={handleKeyDown}
+	data-testid="nav"
+>
+	{#each items as item, index}
+		<NavItem
+			{item}
+			{variant}
+			{pathPrefix}
+			isSelected={index === selectedIndex}
+			isDisabled={item.disabled ?? false}
+			{iconFilled}
+			{iconWeight}
+			{iconGrade}
+			{iconOpticalSize}
+			{iconVariant}
+			{selectedStyle}
+		/>
+	{/each}
+</nav>
+
+<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%;
+  min-height: var(--svelte-ui-nav-mobile-min-height);
+  overflow: hidden;
+}
+
+.nav--vertical {
+  flex-direction: column;
+  gap: var(--svelte-ui-nav-vertical-item-gap);
+  padding: var(--svelte-ui-nav-vertical-padding);
+  width: 100%;
+}
+
+.nav--horizontal {
+  flex-direction: row;
+  gap: var(--svelte-ui-nav-horizontal-item-gap);
+  align-items: center;
+}</style>

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

@@ -0,0 +1,23 @@
+import type { NavItemSelectedStyle } from './NavItem.svelte';
+import type { MenuItem } from '../types/menuItem';
+import type { NavVariant } from '../types/propOptions';
+import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+export type NavProps = {
+    items?: MenuItem[];
+    variant?: NavVariant;
+    pathPrefix?: string;
+    customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
+    currentPath?: string;
+    id?: string;
+    iconFilled?: boolean;
+    iconWeight?: IconWeight;
+    iconGrade?: IconGrade;
+    iconOpticalSize?: IconOpticalSize;
+    iconVariant?: IconVariant;
+    selectedStyle?: NavItemSelectedStyle;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+};
+declare const Nav: import("svelte").Component<NavProps, {}, "">;
+type Nav = ReturnType<typeof Nav>;
+export default Nav;

package/dist/components/NavItem.svelte

@@ -0,0 +1,289 @@
+<!-- NavItem.svelte -->
+
+<script lang="ts">
+	import Icon from './Icon.svelte';
+	import type { MenuItem } from '../types/menuItem';
+	import type { NavVariant } from '../types/propOptions';
+	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	export type NavItemSelectedStyle = 'color' | 'filled' | 'tonal';
+
+	export type NavItemProps = {
+		// 基本プロパティ
+		item: MenuItem;
+		variant?: NavVariant;
+		pathPrefix?: string;
+
+		// アイコン関連
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+
+		// 状態/動作
+		isSelected?: boolean;
+		isDisabled?: boolean;
+		selectedStyle?: NavItemSelectedStyle;
+	};
+
+	let {
+		// 基本プロパティ
+		item,
+		variant = 'tab',
+		pathPrefix = '',
+
+		// アイコン関連
+		iconFilled = false,
+		iconWeight = 300,
+		iconGrade = 0,
+		iconOpticalSize = 24,
+		iconVariant = 'outlined',
+
+		// 状態/動作
+		isSelected = false,
+		isDisabled = false,
+		selectedStyle
+	}: NavItemProps = $props();
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const hrefWithPrefix = $derived.by(() => {
+		if (!item.href) return undefined;
+		if (!pathPrefix) return item.href;
+		if (item.href === pathPrefix || item.href.startsWith(`${pathPrefix}/`)) return item.href;
+		return `${pathPrefix}${item.href.startsWith('/') ? '' : '/'}${item.href}`;
+	});
+
+	const isTabVariant = $derived(variant === 'tab');
+
+	// selectedStyle 未指定時のバリアント別デフォルト
+	const resolvedSelectedStyle = $derived(
+		selectedStyle ?? (variant === 'vertical' || variant === 'horizontal' ? 'tonal' : 'color')
+	);
+</script>
+
+{#if isDisabled}
+	<span
+		class="nav-item nav-item--{variant} nav-item--disabled"
+		class:nav-item--selected={isSelected}
+		class:nav-item--style-color={isSelected && resolvedSelectedStyle === 'color'}
+		class:nav-item--style-filled={isSelected && resolvedSelectedStyle === 'filled'}
+		class:nav-item--style-tonal={isSelected && resolvedSelectedStyle === 'tonal'}
+		role={isTabVariant ? 'tab' : undefined}
+		aria-selected={isTabVariant ? isSelected : undefined}
+		aria-disabled="true"
+		tabindex="-1"
+		data-nav-item
+		data-testid="nav-item"
+	>
+		{#if item.icon}
+			<div class="nav-item__icon">
+				<Icon
+					filled={iconFilled || isSelected}
+					weight={iconWeight}
+					grade={iconGrade}
+					opticalSize={iconOpticalSize}
+					variant={iconVariant}>{item.icon}</Icon
+				>
+			</div>
+		{/if}
+		{#if item.label}
+			<div class="nav-item__label">{item.label}</div>
+		{/if}
+	</span>
+{:else}
+	<a
+		href={hrefWithPrefix}
+		class="nav-item nav-item--{variant}"
+		class:nav-item--selected={isSelected}
+		class:nav-item--style-color={isSelected && resolvedSelectedStyle === 'color'}
+		class:nav-item--style-filled={isSelected && resolvedSelectedStyle === 'filled'}
+		class:nav-item--style-tonal={isSelected && resolvedSelectedStyle === 'tonal'}
+		role={isTabVariant ? 'tab' : undefined}
+		aria-selected={isTabVariant ? isSelected : undefined}
+		aria-current={!isTabVariant && isSelected ? 'page' : undefined}
+		tabindex={0}
+		data-nav-item
+		data-testid="nav-item"
+	>
+		{#if item.icon}
+			<div class="nav-item__icon">
+				<Icon
+					filled={iconFilled || isSelected}
+					weight={iconWeight}
+					grade={iconGrade}
+					opticalSize={iconOpticalSize}
+					variant={iconVariant}>{item.icon}</Icon
+				>
+			</div>
+		{/if}
+		{#if item.label}
+			<div class="nav-item__label">{item.label}</div>
+		{/if}
+	</a>
+{/if}
+
+<style>.nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--svelte-ui-nav-item-icon-gap);
+  position: relative;
+  color: var(--svelte-ui-nav-item-text-color);
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  transition-property: background-color, color, outline;
+  transition-duration: var(--svelte-ui-transition-duration);
+  box-sizing: border-box;
+}
+
+.nav-item::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--svelte-ui-hover-overlay);
+  opacity: 0;
+  pointer-events: none;
+  transition-property: opacity;
+  transition-duration: var(--svelte-ui-transition-duration);
+}
+
+.nav-item--disabled {
+  opacity: var(--svelte-ui-nav-item-disabled-opacity);
+  pointer-events: none;
+  cursor: default;
+}
+
+.nav-item:focus-visible {
+  outline: var(--svelte-ui-focus-outline-inner);
+  outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+}
+
+@supports not selector(:focus-visible) {
+  .nav-item:focus {
+    outline: var(--svelte-ui-focus-outline-inner);
+    outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+  }
+}
+.nav-item--tab {
+  justify-content: center;
+  padding: var(--svelte-ui-tab-item-padding);
+  min-height: var(--svelte-ui-nav-item-min-height);
+  color: var(--svelte-ui-tab-item-text-color);
+}
+
+@media (hover: hover) {
+  .nav-item--tab:hover {
+    color: var(--svelte-ui-tab-item-selected-text-color);
+  }
+  .nav-item--tab:hover::before {
+    opacity: 1;
+  }
+}
+.nav-item--tab::before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: calc(var(--svelte-ui-tab-item-padding-x) - var(--svelte-ui-tab-item-selected-bar-offset));
+  bottom: 0;
+  width: calc(100% - 2 * var(--svelte-ui-tab-item-padding-x) + 2 * var(--svelte-ui-tab-item-selected-bar-offset));
+  height: var(--svelte-ui-tab-item-selected-bar-height);
+  background-color: var(--svelte-ui-tab-item-selected-bar-color);
+  border-radius: var(--svelte-ui-tab-item-selected-bar-radius);
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: var(--svelte-ui-transition-duration);
+}
+
+.nav-item--tab.nav-item--selected::before {
+  opacity: 1;
+}
+
+.nav-item--mobile {
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  padding: var(--svelte-ui-nav-mobile-item-padding);
+  min-height: var(--svelte-ui-nav-mobile-min-height);
+  color: var(--svelte-ui-nav-item-text-color);
+  font-size: var(--svelte-ui-nav-mobile-item-font-size);
+  gap: var(--svelte-ui-nav-mobile-item-icon-gap);
+}
+
+@media (hover: hover) {
+  .nav-item--mobile:hover {
+    color: var(--svelte-ui-nav-item-selected-text-color);
+  }
+}
+.nav-item--vertical {
+  width: 100%;
+  padding: var(--svelte-ui-nav-item-padding);
+  min-height: var(--svelte-ui-nav-item-min-height);
+  border-radius: var(--svelte-ui-nav-item-border-radius);
+  color: var(--svelte-ui-nav-item-text-color);
+}
+
+.nav-item--vertical::after {
+  border-radius: var(--svelte-ui-nav-item-border-radius);
+}
+
+@media (hover: hover) {
+  .nav-item--vertical:hover {
+    color: var(--svelte-ui-nav-item-selected-text-color);
+  }
+  .nav-item--vertical:hover::after {
+    opacity: 1;
+  }
+}
+.nav-item--horizontal {
+  padding: var(--svelte-ui-nav-item-padding);
+  min-height: var(--svelte-ui-nav-item-min-height);
+  border-radius: var(--svelte-ui-nav-item-border-radius);
+  color: var(--svelte-ui-nav-item-text-color);
+}
+
+.nav-item--horizontal::after {
+  border-radius: var(--svelte-ui-nav-item-border-radius);
+}
+
+@media (hover: hover) {
+  .nav-item--horizontal:hover {
+    color: var(--svelte-ui-nav-item-selected-text-color);
+  }
+  .nav-item--horizontal:hover::after {
+    opacity: 1;
+  }
+}
+.nav-item--style-color {
+  color: var(--svelte-ui-nav-item-selected-text-color);
+}
+
+.nav-item--tab.nav-item--style-color {
+  color: var(--svelte-ui-tab-item-selected-text-color);
+  background-color: transparent;
+}
+
+.nav-item--style-filled {
+  background-color: var(--svelte-ui-primary-color);
+  color: var(--svelte-ui-nav-item-filled-text-color);
+}
+
+.nav-item--style-tonal {
+  background-color: var(--svelte-ui-nav-item-tonal-bg-color);
+  color: var(--svelte-ui-nav-item-selected-text-color);
+}
+
+.nav-item__label {
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
+}
+
+.nav-item--mobile .nav-item__label {
+  text-align: center;
+}</style>

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

@@ -0,0 +1,20 @@
+import type { MenuItem } from '../types/menuItem';
+import type { NavVariant } from '../types/propOptions';
+import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+export type NavItemSelectedStyle = 'color' | 'filled' | 'tonal';
+export type NavItemProps = {
+    item: MenuItem;
+    variant?: NavVariant;
+    pathPrefix?: string;
+    iconFilled?: boolean;
+    iconWeight?: IconWeight;
+    iconGrade?: IconGrade;
+    iconOpticalSize?: IconOpticalSize;
+    iconVariant?: IconVariant;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    selectedStyle?: NavItemSelectedStyle;
+};
+declare const NavItem: import("svelte").Component<NavItemProps, {}, "">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;

package/dist/components/PopupMenu.svelte

@@ -69,7 +69,9 @@
 
 	const executeMenuItem = (item: MenuItem, event?: MouseEvent) => {
 		event?.stopPropagation();
-		event?.preventDefault();
+		if (!item.href) {
+			event?.preventDefault();
+		}
 		if (item.callback) {
 			item.callback();
 		}
@@ -261,6 +263,7 @@
 								tabindex="-1"
 								aria-describedby={item.icon ? `${getMenuItemId(actionableIndex)}-icon` : undefined}
 								href={item.href}
+								target={item.target}
 								onclick={(e) => executeMenuItem(item, e)}
 								onmouseenter={() => handleMouseEnter(actionableIndex)}
 								onfocus={() => handleFocus(actionableIndex)}

package/dist/components/Tab.svelte

@@ -4,6 +4,7 @@
 	import TabItem from './TabItem.svelte';
 	import type { MenuItem } from '../types/menuItem';
 	import { subscribeUrlChange } from '../utils/urlChange';
+	import { getCurrentPath as resolveCurrentPath, matchPath as doMatchPath } from '../utils/navPath';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -49,72 +50,19 @@
 	// =========================================================================
 	$effect(() => {
 		// props の currentPath が変更されたとき
-		resolvedCurrentPath = getCurrentPath();
+		resolvedCurrentPath = resolveCurrentPath(currentPath);
 	});
 
 	$effect(() => {
 		// URL の変更を subscribe
 		return subscribeUrlChange(() => {
-			resolvedCurrentPath = getCurrentPath();
+			resolvedCurrentPath = resolveCurrentPath(currentPath);
 		});
 	});
 
 	// =========================================================================
 	// Methods
 	// =========================================================================
-	const getCurrentPath = () => {
-		// アプリ側から現在パスが明示的に渡されていればそれを優先（SSR対応）
-		if (currentPath && currentPath !== '') {
-			return currentPath;
-		}
-
-		// それ以外の場合はクライアント実行時のみ window.location から取得
-		if (typeof window !== 'undefined') {
-			return window.location.pathname;
-		}
-
-		return '';
-	};
-
-	// パスの正規化処理
-	const normalizePath = (path: string): string => {
-		if (!pathPrefix) return path;
-
-		// pathPrefixが設定されている場合、それを除去
-		if (path.startsWith(pathPrefix)) {
-			const normalized = path.substring(pathPrefix.length);
-			return normalized.startsWith('/') ? normalized : '/' + normalized;
-		}
-
-		return path;
-	};
-
-	// パスマッチング関数
-	const matchPath = (currentPath: string, itemHref: string, item: MenuItem): boolean => {
-		if (customPathMatcher) {
-			return customPathMatcher(currentPath, itemHref, item);
-		}
-
-		const normalizedCurrentPath = normalizePath(currentPath);
-
-		// matchingPathのチェック
-		if (item.matchingPath?.some((href) => normalizedCurrentPath.startsWith(href))) {
-			return true;
-		}
-
-		// strictMatchの場合
-		if (item.strictMatch) {
-			return normalizedCurrentPath === itemHref;
-		}
-
-		// ルートパス (/) の特別な処理
-		if (itemHref === '/') {
-			return normalizedCurrentPath === '/';
-		}
-
-		// その他のパス
-		return normalizedCurrentPath !== '' && normalizedCurrentPath.startsWith(itemHref);
-	};
 
 	// シンプルなキーボードナビゲーション（disabled タブはスキップ）
 	const handleKeyDown = (event: KeyboardEvent) => {
@@ -167,7 +115,7 @@
 			const item = tabItems[i];
 			if (!item.href) continue;
 
-			if (matchPath(resolvedCurrentPath, item.href, item)) {
+			if (doMatchPath(resolvedCurrentPath, item.href, item, pathPrefix, customPathMatcher)) {
 				return i;
 			}
 		}

package/dist/index.d.ts

@@ -32,6 +32,8 @@ export { default as SkeletonText } from './components/skeleton/SkeletonText.svel
 export { default as SkeletonBox } from './components/skeleton/SkeletonBox.svelte';
 export { default as SkeletonAvatar } from './components/skeleton/SkeletonAvatar.svelte';
 export { default as Switch } from './components/Switch.svelte';
+export { default as Nav } from './components/Nav.svelte';
+export { default as NavItem } from './components/NavItem.svelte';
 export { default as Tab } from './components/Tab.svelte';
 export { default as TabItem } from './components/TabItem.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
@@ -73,10 +75,12 @@ export type { SkeletonButtonProps } from './components/skeleton/SkeletonButton.s
 export type { SkeletonHeadingProps } from './components/skeleton/SkeletonHeading.svelte';
 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 { TabProps } from './components/Tab.svelte';
 export type { TabItemProps } from './components/TabItem.svelte';
 export type { TextareaProps } from './components/Textarea.svelte';
-export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle } from './types/propOptions';
+export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle, NavVariant } from './types/propOptions';
 export type { MenuItem } from './types/menuItem';
 export type { SegmentedControlItem } from './types/segmentedControlItem';
 export * from './utils/accessibility';

package/dist/index.js

@@ -33,6 +33,8 @@ export { default as SkeletonText } from './components/skeleton/SkeletonText.svel
 export { default as SkeletonBox } from './components/skeleton/SkeletonBox.svelte';
 export { default as SkeletonAvatar } from './components/skeleton/SkeletonAvatar.svelte';
 export { default as Switch } from './components/Switch.svelte';
+export { default as Nav } from './components/Nav.svelte';
+export { default as NavItem } from './components/NavItem.svelte';
 export { default as Tab } from './components/Tab.svelte';
 export { default as TabItem } from './components/TabItem.svelte';
 export { default as Textarea } from './components/Textarea.svelte';

package/dist/types/menuItem.d.ts

@@ -1,6 +1,7 @@
 export type MenuItem = {
     label: string;
     href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
     callback?: () => void;
     icon?: string;
     matchingPath?: string[];

package/dist/types/propOptions.d.ts

@@ -52,3 +52,8 @@ export type DatepickerMode = 'single' | 'range';
  * Used by Input, Textarea, Datepicker components
  */
 export type FocusStyle = 'background' | 'outline' | 'none';
+/**
+ * Nav variant type
+ * Used by Nav component
+ */
+export type NavVariant = 'vertical' | 'horizontal' | 'mobile' | 'tab';

package/dist/utils/navPath.d.ts

@@ -0,0 +1,4 @@
+import type { MenuItem } from '../types/menuItem';
+export declare const getCurrentPath: (currentPath?: string) => string;
+export declare const normalizePath: (path: string, pathPrefix: string) => string;
+export declare const matchPath: (currentPath: string, itemHref: string, item: MenuItem, pathPrefix: string, customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean) => boolean;

package/dist/utils/navPath.js

@@ -0,0 +1,28 @@
+export const getCurrentPath = (currentPath) => {
+    if (currentPath && currentPath !== '')
+        return currentPath;
+    if (typeof window !== 'undefined')
+        return window.location.pathname;
+    return '';
+};
+export const normalizePath = (path, pathPrefix) => {
+    if (!pathPrefix)
+        return path;
+    if (path.startsWith(pathPrefix)) {
+        const normalized = path.substring(pathPrefix.length);
+        return normalized.startsWith('/') ? normalized : '/' + normalized;
+    }
+    return path;
+};
+export const matchPath = (currentPath, itemHref, item, pathPrefix, customPathMatcher) => {
+    if (customPathMatcher)
+        return customPathMatcher(currentPath, itemHref, item);
+    const normalizedCurrentPath = normalizePath(currentPath, pathPrefix);
+    if (item.matchingPath?.some((href) => normalizedCurrentPath.startsWith(href)))
+        return true;
+    if (item.strictMatch)
+        return normalizedCurrentPath === itemHref;
+    if (itemHref === '/')
+        return normalizedCurrentPath === '/';
+    return normalizedCurrentPath !== '' && normalizedCurrentPath.startsWith(itemHref);
+};

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