@14ch/svelte-ui 0.0.28 → 0.0.29

package/dist/components/Tab.svelte

@@ -1,10 +1,9 @@
 <!-- Tab.svelte -->
 
 <script lang="ts">
-	import TabItem from './TabItem.svelte';
+	import Nav from './Nav.svelte';
 	import type { MenuItem } from '../types/menuItem';
-	import { subscribeUrlChange } from '../utils/urlChange';
-	import { getCurrentPath as resolveCurrentPath, matchPath as doMatchPath } from '../utils/navPath';
+	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -12,7 +11,7 @@
 	export type TabProps = {
 		// 基本プロパティ
 		/** `{ label, href, icon?, disabled? }[]` */
-		tabItems: MenuItem[];
+		tabItems?: MenuItem[];
 		/** Prepended to each item's href for active-state matching. */
 		pathPrefix?: string;
 		/** Custom function to determine if an item is active. */
@@ -20,6 +19,16 @@
 		/** Overrides the auto-detected current path. */
 		currentPath?: string;
 
+		// HTML属性
+		id?: string;
+
+		// アイコン関連
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+
 		// スタイル/レイアウト
 		/** Custom CSS color for tab labels. */
 		textColor?: string;
@@ -40,7 +49,17 @@
 		customPathMatcher,
 		currentPath,
 
-		// スタイル/レイアウト（未指定時は TabItem が variables の tab 用変数を直接参照）
+		// HTML属性
+		id,
+
+		// アイコン関連
+		iconFilled = false,
+		iconWeight = 300,
+		iconGrade = 0,
+		iconOpticalSize = 24,
+		iconVariant = 'outlined',
+
+		// スタイル/レイアウト
 		textColor,
 		selectedTextColor,
 		selectedBarColor,
@@ -49,128 +68,35 @@
 		ariaLabel = 'Tabs',
 		ariaLabelledby
 	}: TabProps = $props();
-
-	let resolvedCurrentPath = $state('');
-
-	// =========================================================================
-	// Effects
-	// =========================================================================
-	$effect(() => {
-		// props の currentPath が変更されたとき
-		resolvedCurrentPath = resolveCurrentPath(currentPath);
-	});
-
-	$effect(() => {
-		// URL の変更を subscribe
-		return subscribeUrlChange(() => {
-			resolvedCurrentPath = resolveCurrentPath(currentPath);
-		});
-	});
-
-	// =========================================================================
-	// Methods
-	// =========================================================================
-
-	// シンプルなキーボードナビゲーション（disabled タブはスキップ）
-	const handleKeyDown = (event: KeyboardEvent) => {
-		if (tabItems.length === 0 || enabledIndices.length === 0) return;
-
-		const tabList = event.currentTarget as HTMLElement;
-		const tabs = Array.from(tabList.querySelectorAll('[role="tab"]')) as HTMLElement[];
-		const currentTab = event.target as HTMLElement;
-		const currentIndex = tabs.indexOf(currentTab);
-
-		if (currentIndex === -1) return;
-
-		const currentEnabledPosition = enabledIndices.indexOf(currentIndex);
-		let nextEnabledPosition = currentEnabledPosition;
-
-		switch (event.key) {
-			case 'ArrowLeft':
-				event.preventDefault();
-				nextEnabledPosition =
-					currentEnabledPosition > 0 ? currentEnabledPosition - 1 : enabledIndices.length - 1;
-				break;
-			case 'ArrowRight':
-				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];
-		tabs[nextIndex]?.focus();
-	};
-
-	// =========================================================================
-	// $derived
-	// =========================================================================
-
-	// アクティブなタブのインデックスを現在のパスに基づいて計算
-	const selectedTabIndex = $derived.by(() => {
-		for (let i = 0; i < tabItems.length; i++) {
-			const item = tabItems[i];
-			if (!item.href) continue;
-
-			if (doMatchPath(resolvedCurrentPath, item.href, item, pathPrefix, customPathMatcher)) {
-				return i;
-			}
-		}
-		return -1;
-	});
-
-	// 有効なタブのインデックス一覧（disabled を除く）
-	const enabledIndices = $derived(
-		tabItems.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0)
-	);
 </script>
 
 <div
 	class="tab"
-	role="tablist"
-	aria-label={ariaLabelledby ? undefined : ariaLabel}
-	aria-labelledby={ariaLabelledby}
-	tabindex="-1"
-	onkeydown={handleKeyDown}
+	style:--svelte-ui-nav-item-underline-text-color={textColor}
+	style:--svelte-ui-nav-item-underline-selected-text-color={selectedTextColor}
+	style:--svelte-ui-nav-item-underline-bar-color={selectedBarColor}
 	data-testid="tab"
 >
-	{#each tabItems as tabItem, index}
-		<TabItem
-			{tabItem}
-			{pathPrefix}
-			isSelected={index === selectedTabIndex}
-			isDisabled={tabItem.disabled ?? false}
-			{textColor}
-			{selectedTextColor}
-			{selectedBarColor}
-		/>
-	{/each}
+	<Nav
+		navItems={tabItems}
+		variant="horizontal"
+		selectedStyle="underline"
+		{pathPrefix}
+		{customPathMatcher}
+		{currentPath}
+		{id}
+		{iconFilled}
+		{iconWeight}
+		{iconGrade}
+		{iconOpticalSize}
+		{iconVariant}
+		{ariaLabel}
+		{ariaLabelledby}
+	/>
 </div>
 
 <style>.tab {
-  display: flex;
-  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;
+  width: 100%;
   box-sizing: border-box;
-}
-
-.tab::-webkit-scrollbar {
-  display: none;
 }</style>

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

@@ -1,13 +1,20 @@
 import type { MenuItem } from '../types/menuItem';
+import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 export type TabProps = {
     /** `{ label, href, icon?, disabled? }[]` */
-    tabItems: MenuItem[];
+    tabItems?: MenuItem[];
     /** Prepended to each item's href for active-state matching. */
     pathPrefix?: string;
     /** Custom function to determine if an item is active. */
     customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
     /** Overrides the auto-detected current path. */
     currentPath?: string;
+    id?: string;
+    iconFilled?: boolean;
+    iconWeight?: IconWeight;
+    iconGrade?: IconGrade;
+    iconOpticalSize?: IconOpticalSize;
+    iconVariant?: IconVariant;
     /** Custom CSS color for tab labels. */
     textColor?: string;
     /** Custom CSS color for the active tab label. */

package/dist/index.d.ts

@@ -35,7 +35,6 @@ 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';
 export type { ButtonProps } from './components/Button.svelte';
 export type { CheckboxProps } from './components/Checkbox.svelte';
@@ -78,9 +77,8 @@ 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, NavVariant } from './types/propOptions';
+export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle, NavVariant, SubMenuMode } from './types/propOptions';
 export type { MenuItem } from './types/menuItem';
 export type { SegmentedControlItem } from './types/segmentedControlItem';
 export type { Option, OptionValue } from './types/options';

package/dist/index.js

@@ -36,7 +36,6 @@ 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';
 // Utils
 export * from './utils/accessibility';

package/dist/types/menuItem.d.ts

@@ -7,4 +7,5 @@ export type MenuItem = {
     matchingPath?: string[];
     strictMatch?: boolean;
     disabled?: boolean;
+    children?: MenuItem[];
 };

package/dist/types/propOptions.d.ts

@@ -56,4 +56,13 @@ export type FocusStyle = 'background' | 'outline' | 'none';
  * Nav variant type
  * Used by Nav component
  */
-export type NavVariant = 'vertical' | 'horizontal' | 'mobile' | 'tab';
+export type NavVariant = 'vertical' | 'horizontal' | 'mobile';
+/**
+ * Sub-menu display mode for Nav hierarchical 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';

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

package/dist/components/TabItem.svelte

@@ -1,219 +0,0 @@
-<!-- TabItem.svelte -->
-
-<script lang="ts">
-	import Icon from './Icon.svelte';
-	import type { MenuItem } from '../types/menuItem';
-	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-
-	// =========================================================================
-	// Props, States & Constants
-	// =========================================================================
-	export type TabItemProps = {
-		// 基本プロパティ
-		tabItem: MenuItem;
-		pathPrefix?: string;
-
-		// スタイル/レイアウト（未指定時は variables の tab 用変数を参照）
-		textColor?: string;
-		selectedTextColor?: string;
-		selectedBarColor?: string;
-
-		// アイコン関連
-		iconFilled?: boolean;
-		iconWeight?: IconWeight;
-		iconGrade?: IconGrade;
-		iconOpticalSize?: IconOpticalSize;
-		iconVariant?: IconVariant;
-
-		// 状態/動作
-		isSelected?: boolean;
-		isDisabled?: boolean;
-	};
-
-	let {
-		// 基本プロパティ
-		tabItem,
-		pathPrefix = '',
-
-		// スタイル/レイアウト
-		textColor,
-		selectedTextColor,
-		selectedBarColor,
-
-		// アイコン関連
-		iconFilled = false,
-		iconWeight = 300,
-		iconGrade = 0,
-		iconOpticalSize = 24,
-		iconVariant = 'outlined',
-
-		// 状態/動作
-		isSelected = false,
-		isDisabled = false
-	}: TabItemProps = $props();
-
-	// =========================================================================
-	// $derived
-	// =========================================================================
-
-	// pathPrefixを付与したhrefを計算
-	const hrefWithPrefix = $derived.by(() => {
-		if (!tabItem.href) return undefined;
-		if (!pathPrefix) return tabItem.href;
-
-		// 既にpathPrefixが含まれている場合はそのまま
-		// pathPrefixが完全一致、またはpathPrefix + '/'で始まる場合
-		if (tabItem.href === pathPrefix || tabItem.href.startsWith(`${pathPrefix}/`)) {
-			return tabItem.href;
-		}
-
-		// pathPrefixを付与
-		return `${pathPrefix}${tabItem.href.startsWith('/') ? '' : '/'}${tabItem.href}`;
-	});
-
-	// 明示的に渡されたときだけ内部CSS変数で上書き。未渡しなら variables の tab 用変数をそのまま参照
-	const internalTextColor = $derived(textColor);
-	const internalSelectedTextColor = $derived(selectedTextColor);
-	const internalSelectedBarColor = $derived(selectedBarColor);
-</script>
-
-{#if isDisabled}
-	<span
-		class="tab-item tab-item--disabled"
-		class:tab-item--selected={isSelected}
-		style:--internal-tab-item-text-color={internalTextColor}
-		style:--internal-tab-item-selected-text-color={internalSelectedTextColor}
-		style:--internal-tab-item-selected-bar-color={internalSelectedBarColor}
-		role="tab"
-		aria-selected={isSelected}
-		aria-disabled="true"
-		tabindex="-1"
-		data-testid="tab-item"
-	>
-		{#if tabItem.icon}
-			<div class="tab-item__icon">
-				<Icon
-					filled={iconFilled || isSelected}
-					weight={iconWeight}
-					grade={iconGrade}
-					opticalSize={iconOpticalSize}
-					variant={iconVariant}>{tabItem.icon}</Icon
-				>
-			</div>
-		{/if}
-		{#if tabItem.label}
-			<div class="tab-item__label">
-				{tabItem.label}
-			</div>
-		{/if}
-	</span>
-{:else}
-	<a
-		href={hrefWithPrefix}
-		class="tab-item"
-		class:tab-item--selected={isSelected}
-		style:--internal-tab-item-text-color={internalTextColor}
-		style:--internal-tab-item-selected-text-color={internalSelectedTextColor}
-		style:--internal-tab-item-selected-bar-color={internalSelectedBarColor}
-		role="tab"
-		aria-selected={isSelected}
-		tabindex={0}
-		data-testid="tab-item"
-	>
-		{#if tabItem.icon}
-			<div class="tab-item__icon">
-				<Icon
-					filled={iconFilled || isSelected}
-					weight={iconWeight}
-					grade={iconGrade}
-					opticalSize={iconOpticalSize}
-					variant={iconVariant}>{tabItem.icon}</Icon
-				>
-			</div>
-		{/if}
-		{#if tabItem.label}
-			<div class="tab-item__label">
-				{tabItem.label}
-			</div>
-		{/if}
-	</a>
-{/if}
-
-<style>@charset "UTF-8";
-.tab-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--svelte-ui-tab-item-icon-gap);
-  position: relative;
-  padding: var(--svelte-ui-tab-item-padding);
-  color: var(--internal-tab-item-text-color, var(--svelte-ui-tab-item-text-color));
-  white-space: nowrap;
-  text-decoration: none;
-  transition-property: background-color, color, outline;
-  transition-duration: var(--svelte-ui-transition-duration);
-  outline: none;
-}
-
-@media (hover: hover) {
-  .tab-item:hover:not(.tab-item--selected) {
-    color: var(--internal-tab-item-selected-text-color, var(--svelte-ui-tab-item-selected-text-color));
-  }
-  .tab-item:hover:not(.tab-item--selected)::before {
-    opacity: 1;
-  }
-}
-/* キーボードフォーカス時のみ枠線を表示 */
-.tab-item:focus-visible {
-  outline: var(--svelte-ui-focus-outline-inner);
-  outline-offset: var(--svelte-ui-focus-outline-offset-inner);
-}
-
-/* フォールバック: :focus-visible未対応ブラウザ用 */
-@supports not selector(:focus-visible) {
-  .tab-item:focus {
-    outline: var(--svelte-ui-focus-outline-inner);
-    outline-offset: var(--svelte-ui-focus-outline-offset-inner);
-  }
-  .tab-item:focus:not(.tab-item--selected) {
-    color: var(--internal-tab-item-selected-text-color, var(--svelte-ui-tab-item-selected-text-color));
-  }
-  .tab-item:focus:not(.tab-item--selected)::before {
-    opacity: 1;
-  }
-}
-/* 選択状態のインジケーター */
-.tab-item::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(--internal-tab-item-selected-bar-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);
-}
-
-.tab-item--selected {
-  color: var(--internal-tab-item-selected-text-color, var(--svelte-ui-tab-item-selected-text-color));
-  background-color: transparent;
-}
-
-.tab-item--selected::before {
-  opacity: 1;
-}
-
-.tab-item--disabled {
-  opacity: var(--svelte-ui-tab-item-disabled-opacity);
-  pointer-events: none;
-  cursor: default;
-}
-
-.tab-item__label {
-  text-box-trim: trim-both;
-  text-box-edge: cap alphabetic;
-}</style>

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

@@ -1,19 +0,0 @@
-import type { MenuItem } from '../types/menuItem';
-import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-export type TabItemProps = {
-    tabItem: MenuItem;
-    pathPrefix?: string;
-    textColor?: string;
-    selectedTextColor?: string;
-    selectedBarColor?: string;
-    iconFilled?: boolean;
-    iconWeight?: IconWeight;
-    iconGrade?: IconGrade;
-    iconOpticalSize?: IconOpticalSize;
-    iconVariant?: IconVariant;
-    isSelected?: boolean;
-    isDisabled?: boolean;
-};
-declare const TabItem: import("svelte").Component<TabItemProps, {}, "">;
-type TabItem = ReturnType<typeof TabItem>;
-export default TabItem;