@14ch/svelte-ui 0.0.25 → 0.0.26

package/dist/assets/styles/variables.scss

@@ -376,7 +376,6 @@
 	/* 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,
@@ -394,11 +393,9 @@
 	--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;

package/dist/components/Nav.svelte

@@ -14,7 +14,7 @@
 	// =========================================================================
 	export type NavProps = {
 		// 基本プロパティ
-		items?: MenuItem[];
+		navItems?: MenuItem[];
 		variant?: NavVariant;
 		pathPrefix?: string;
 		customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
@@ -32,6 +32,7 @@
 
 		// スタイル/レイアウト
 		selectedStyle?: NavItemSelectedStyle;
+		gap?: number | string;
 
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
@@ -40,7 +41,7 @@
 
 	let {
 		// 基本プロパティ
-		items = [],
+		navItems = [],
 		variant = 'tab',
 		pathPrefix = '',
 		customPathMatcher,
@@ -58,6 +59,7 @@
 
 		// スタイル/レイアウト
 		selectedStyle,
+		gap,
 
 		// ARIA/アクセシビリティ
 		ariaLabel,
@@ -83,12 +85,13 @@
 	// Methods
 	// =========================================================================
 	const handleKeyDown = (event: KeyboardEvent) => {
-		if (items.length === 0 || enabledIndices.length === 0) return;
+		if (navItems.length === 0 || enabledIndices.length === 0) return;
 
-		const navEl = event.currentTarget as HTMLElement;
-		const navItems = Array.from(navEl.querySelectorAll('[data-nav-item]')) as HTMLElement[];
+		const navItemEls = Array.from(
+			(event.currentTarget as HTMLElement).querySelectorAll('[data-nav-item]')
+		) as HTMLElement[];
 		const currentItem = event.target as HTMLElement;
-		const currentIndex = navItems.indexOf(currentItem);
+		const currentIndex = navItemEls.indexOf(currentItem);
 
 		if (currentIndex === -1) return;
 
@@ -123,15 +126,15 @@
 		}
 
 		const nextIndex = enabledIndices[nextEnabledPosition];
-		navItems[nextIndex]?.focus();
+		navItemEls[nextIndex]?.focus();
 	};
 
 	// =========================================================================
 	// $derived
 	// =========================================================================
 	const selectedIndex = $derived.by(() => {
-		for (let i = 0; i < items.length; i++) {
-			const item = items[i];
+		for (let i = 0; i < navItems.length; i++) {
+			const item = navItems[i];
 			if (!item.href) continue;
 			if (matchPath(resolvedCurrentPath, item.href, item, pathPrefix, customPathMatcher)) {
 				return i;
@@ -141,7 +144,7 @@
 	});
 
 	const enabledIndices = $derived(
-		items.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0)
+		navItems.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0)
 	);
 
 	const isTabVariant = $derived(variant === 'tab');
@@ -153,12 +156,13 @@
 	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"
 >
-	{#each items as item, index}
+	{#each navItems as item, index}
 		<NavItem
 			{item}
 			{variant}
@@ -206,13 +210,12 @@
 
 .nav--vertical {
   flex-direction: column;
-  gap: var(--svelte-ui-nav-vertical-item-gap);
-  padding: var(--svelte-ui-nav-vertical-padding);
+  gap: var(--internal-nav-gap, var(--svelte-ui-nav-vertical-item-gap));
   width: 100%;
 }
 
 .nav--horizontal {
   flex-direction: row;
-  gap: var(--svelte-ui-nav-horizontal-item-gap);
+  gap: var(--internal-nav-gap, var(--svelte-ui-nav-horizontal-item-gap));
   align-items: center;
 }</style>

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

@@ -3,7 +3,7 @@ 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[];
+    navItems?: MenuItem[];
     variant?: NavVariant;
     pathPrefix?: string;
     customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
@@ -15,6 +15,7 @@ export type NavProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     selectedStyle?: NavItemSelectedStyle;
+    gap?: number | string;
     ariaLabel?: string;
     ariaLabelledby?: string;
 };

package/dist/components/NavItem.svelte

@@ -210,23 +210,16 @@
   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);
+  height: var(--svelte-ui-nav-mobile-min-height);
   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 {
@@ -234,9 +227,6 @@
 }
 
 @media (hover: hover) {
-  .nav-item--vertical:hover {
-    color: var(--svelte-ui-nav-item-selected-text-color);
-  }
   .nav-item--vertical:hover::after {
     opacity: 1;
   }
@@ -245,7 +235,6 @@
   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 {
@@ -253,9 +242,6 @@
 }
 
 @media (hover: hover) {
-  .nav-item--horizontal:hover {
-    color: var(--svelte-ui-nav-item-selected-text-color);
-  }
   .nav-item--horizontal:hover::after {
     opacity: 1;
   }

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