@14ch/svelte-ui 0.0.1

package/dist/components/TabItem.svelte

@@ -0,0 +1,140 @@
+<!-- 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
+	// =========================================================================
+
+	let {
+		// 基本プロパティ
+		tabItem,
+
+		// スタイル/レイアウト
+		textColor,
+		selectedTextColor,
+		selectedBarColor,
+
+		// アイコン関連
+		iconFilled = false,
+		iconWeight = 300,
+		iconGrade = 0,
+		iconOpticalSize = 24,
+		iconVariant = 'outlined',
+
+		// 状態/動作
+		isSelected = false
+	}: {
+		// 基本プロパティ
+		tabItem: MenuItem;
+
+		// スタイル/レイアウト
+		textColor: string;
+		selectedTextColor: string;
+		selectedBarColor: string;
+
+		// アイコン関連
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+
+		// 状態/動作
+		isSelected?: boolean;
+	} = $props();
+</script>
+
+<a
+	href={tabItem.href}
+	class="tab-item"
+	class:tab-item--selected={isSelected}
+	style="--text-color: {textColor}; --selected-text-color: {selectedTextColor}; --selected-bar-color: {selectedBarColor}"
+	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.title}
+		<div class="tab-item__text">
+			{tabItem.title}
+		</div>
+	{/if}
+</a>
+
+<style>@charset "UTF-8";
+.tab-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  height: 100%;
+  padding: 0 16px;
+  color: var(--text-color);
+  white-space: nowrap;
+  text-decoration: none;
+  transition-property: background-color, color, outline;
+  transition-duration: 0.3s;
+  outline: none;
+}
+
+@media (hover: hover) {
+  .tab-item:hover:not(.tab-item--selected) {
+    background-color: var(--svelte-ui-hover-overlay);
+  }
+}
+/* キーボードフォーカス時のみ枠線を表示 */
+.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) {
+    background-color: var(--svelte-ui-hover-overlay);
+  }
+}
+/* 選択状態のインジケーター */
+.tab-item::before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 16px;
+  bottom: 0;
+  width: calc(100% - 32px);
+  height: 4px;
+  background-color: var(--selected-bar-color);
+  border-radius: 3px 3px 0 0;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: 0.3s;
+}
+
+.tab-item--selected {
+  color: var(--selected-text-color);
+  background-color: transparent;
+}
+
+.tab-item--selected::before {
+  opacity: 1;
+}</style>

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

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