noph-ui 0.23.3 → 0.24.0

package/dist/tabs/Tab.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	import { onMount } from 'svelte'
-	import type { TabProps } from './types.ts'
+	import { getContext, onMount } from 'svelte'
+	import type { TabProps, TabsContext } from './types.ts'
 	import Badge from '../badge/Badge.svelte'
 
 	let {
@@ -12,66 +12,46 @@
 		onkeydown,
 		value,
 		href,
-		variant = 'primary',
 		badge = false,
 		badgeLabel,
-		selected = $bindable(false),
+		element = $bindable(),
 		...attributes
 	}: TabProps = $props()
-	let element: HTMLElement | undefined = $state()
-	let id = $props.id()
-	let parentElement = $derived(element?.parentElement)
 
-	const onChange = (event: Event) => {
-		const { detail } = event as CustomEvent<{ id: string }>
-		selected = detail.id === id
-	}
-
-	onMount(() => {
-		element?.addEventListener('change', onChange)
-		return () => {
-			element?.removeEventListener('change', onChange)
-		}
-	})
-
-	const setTabActive = (el: HTMLElement) => {
-		parentElement?.dispatchEvent(new CustomEvent('change', { detail: { id: el.id, value } }))
-	}
+	const tabsContext = getContext<TabsContext>('np-tabs')
+	let fallbackIndicator = $state(false)
 
-	const onClick = (event: MouseEvent & { currentTarget: EventTarget & HTMLElement }) => {
-		setTabActive(event.currentTarget)
+	const handleClick = (event: MouseEvent & { currentTarget: EventTarget & HTMLElement }) => {
+		tabsContext.value = value
 		if (onclick) {
 			onclick(event)
 		}
 	}
-	const onKeyDown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
+	const handleKeyDown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
 		if (event.key === 'Enter' || event.key === ' ') {
-			setTabActive(event.currentTarget)
+			tabsContext.value = value
 		}
 		if (onkeydown) {
 			onkeydown(event)
 		}
 	}
-	const setCheckInitialState = () => {
-		if (parentElement?.getAttribute('data-value') === value) {
-			selected = true
+	onMount(() => {
+		if (!('anchorName' in document.documentElement.style)) {
+			fallbackIndicator = true
 		}
-	}
+	})
 </script>
 
 {#snippet content()}
-	<div
-		class="np-tab-content"
-		style={variant === 'secondary' ? '--np-indicator-radius: 0;--_indicator-gap: 0' : ''}
-	>
+	<div class={['np-tab-content', tabsContext.value === value && fallbackIndicator && 'fallback']}>
 		<div
 			class={[
 				'np-tab-label',
-				!inlineIcon && variant === 'primary' && children && icon && 'np-tab-no-inline',
+				!inlineIcon && tabsContext.variant === 'primary' && children && icon && 'np-tab-no-inline',
 			]}
 		>
 			{#if icon}
-				{#if badge && variant === 'primary' && !inlineIcon}
+				{#if badge && tabsContext.variant === 'primary' && !inlineIcon}
 					<div class="np-tab-icon-badge">
 						<Badge label={badgeLabel} />
 						{@render icon?.()}
@@ -80,18 +60,18 @@
 					{@render icon?.()}
 				{/if}
 			{/if}
-			{#if badge && (!icon || variant === 'secondary' || inlineIcon)}
+			{#if badge && (!icon || tabsContext.variant === 'secondary' || inlineIcon)}
 				<div style="--np-badge-position:static;">
 					<span class="np-tab-label-badge">{@render children?.()}</span><Badge label={badgeLabel} />
 				</div>
 			{:else}
 				{@render children?.()}
 			{/if}
-			{#if variant === 'primary'}
+			{#if tabsContext.variant === 'primary'}
 				<div class="np-indicator"></div>
 			{/if}
 		</div>
-		{#if variant === 'secondary'}
+		{#if tabsContext.variant === 'secondary'}
 			<div class="np-indicator"></div>
 		{/if}
 	</div>
@@ -101,56 +81,53 @@
 
 {#if href}
 	<a
-		{@attach setCheckInitialState}
 		{...attributes}
-		{id}
-		tabindex={selected ? 0 : -1}
-		role="tab"
-		aria-selected={selected}
-		data-value={value}
 		bind:this={element}
+		role="tab"
+		aria-selected={tabsContext.value === value}
+		tabindex={tabsContext.value === value ? 0 : -1}
 		{href}
 		class={[
 			'np-tab',
-			selected && 'np-tab-content-active',
-			variant === 'primary' ? 'primary' : 'secondary',
+			tabsContext.value === value && 'np-tab-content-active',
+			tabsContext.variant === 'primary' ? 'primary' : 'secondary',
 			attributes.class,
 		]}
-		onclick={onClick}
-		onkeydown={onKeyDown}
+		{onclick}
+		{onkeydown}
 	>
 		{@render content()}
 	</a>
 {:else}
-	<div
-		{@attach setCheckInitialState}
+	<button
 		{...attributes}
-		{id}
-		tabindex={selected ? 0 : -1}
-		role="tab"
-		aria-selected={selected}
-		data-value={value}
 		bind:this={element}
+		role="tab"
+		aria-selected={tabsContext.value === value}
+		tabindex={tabsContext.value === value ? 0 : -1}
 		class={[
 			'np-tab',
-			selected && 'np-tab-content-active',
-			variant === 'primary' ? 'primary' : 'secondary',
+			tabsContext.value === value && 'np-tab-content-active',
+			tabsContext.variant === 'primary' ? 'primary' : 'secondary',
 			attributes.class,
 		]}
-		onclick={onClick}
-		onkeydown={onKeyDown}
+		onclick={handleClick}
+		onkeydown={handleKeyDown}
 	>
 		{@render content()}
-	</div>
+	</button>
 {/if}
 
 <style>
 	.np-tab {
 		flex: 1;
+		font-family: inherit;
+		background-color: transparent;
+		border-width: 0;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		font-family: inherit;
 		box-sizing: border-box;
 		text-decoration: none;
 		position: relative;
@@ -158,7 +135,7 @@
 		padding: 0 1rem;
 		color: var(--np-color-on-surface-variant);
 		height: 3rem;
-		transition: color 0.3s ease;
+		transition: color 0.3s cubic-bezier(0.33, 1, 0.68, 1);
 	}
 	.np-tab-content-active {
 		--_focus-bottom: 4px;
@@ -210,24 +187,12 @@
 		left: var(--_indicator-gap, 2px);
 		right: var(--_indicator-gap, 2px);
 		height: 3px;
+	}
+
+	.fallback .np-indicator {
 		background-color: var(--np-color-primary);
 		border-top-left-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
 		border-top-right-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
-		opacity: 0;
-	}
-	.np-tab-content-active .np-indicator {
-		opacity: 1;
-		transform-origin: left center;
-		animation: slide 0.3s ease-in-out;
-	}
-
-	@keyframes slide {
-		0% {
-			transform: translateX(var(--np-tab-indicator-start)) scaleX(var(--np-tab-indicator-scale, 1));
-		}
-		100% {
-			transform: translateX(0) scaleX(1);
-		}
 	}
 
 	.focus-area {

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

@@ -1,4 +1,4 @@
 import type { TabProps } from './types.ts';
-declare const Tab: import("svelte").Component<TabProps, {}, "selected">;
+declare const Tab: import("svelte").Component<TabProps, {}, "element">;
 type Tab = ReturnType<typeof Tab>;
 export default Tab;

package/dist/tabs/Tabs.svelte

@@ -1,115 +1,74 @@
 <script lang="ts">
 	import Divider from '../divider/Divider.svelte'
-	import { onMount } from 'svelte'
-	import type { TabsProps } from './types.ts'
+	import { setContext } from 'svelte'
+	import type { TabsContext, TabsProps } from './types.ts'
 
-	let { children, element = $bindable(), value = $bindable(), ...attributes }: TabsProps = $props()
-	const initialValue = value
+	let {
+		children,
+		element = $bindable(),
+		value = $bindable(),
+		variant = 'primary',
+		...attributes
+	}: TabsProps = $props()
 
-	const getCurrentTabs = () => {
-		if (!element) {
-			return []
-		}
-		return Array.from(element.querySelectorAll<HTMLElement>('.np-tab'))
-	}
+	let uid = $props.id()
+	let tabsContext = $state<TabsContext>({
+		value,
+		variant,
+		id: uid,
+	})
+	$effect(() => {
+		value = tabsContext.value
+	})
 
 	$effect(() => {
-		if (value) {
-			const tabs = getCurrentTabs()
-			const newTab = tabs?.find((tab) => tab.getAttribute('data-value') === value)
-			if (newTab) {
-				selectTab(newTab, tabs, { id: newTab.id, value })
-			}
-		}
+		tabsContext.value = value
+		tabsContext.variant = variant
 	})
+	setContext('np-tabs', tabsContext)
 
-	const selectTab = (
-		newTab: HTMLElement,
-		tabs: HTMLElement[],
-		detail: { id: string; value: string | number },
+	const handleKeydown = (
+		event: KeyboardEvent & {
+			currentTarget: EventTarget & HTMLDivElement
+		},
 	) => {
-		const oldTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true')
-		if (!oldTab || oldTab === newTab) {
-			return
-		}
-		const oldIndicator = oldTab.querySelector<HTMLElement>('.np-indicator')
-		const oldIndicatorRect = oldIndicator?.getBoundingClientRect()
-		if (oldIndicatorRect) {
-			const newIndicator = newTab.querySelector<HTMLElement>('.np-indicator')
-			if (newIndicator) {
-				newIndicator.style.setProperty(
-					'--np-tab-indicator-start',
-					`${oldIndicatorRect.x - newIndicator.getBoundingClientRect().x}px`,
-				)
-				newIndicator.style.setProperty(
-					'--np-tab-indicator-scale',
-					`${oldIndicatorRect.width / newIndicator.clientWidth}`,
-				)
-			}
-		}
-		value = detail.value
-		tabs?.forEach((tab) => {
-			tab.dispatchEvent(new CustomEvent('change', { detail }))
-		})
-	}
-
-	const onChange = (event: Event) => {
-		const { detail } = event as CustomEvent<{ id: string; value: string | number }>
-		const tabs = getCurrentTabs()
-		const newTab = tabs?.find((tab) => tab.id === detail.id)
-		if (newTab) {
-			selectTab(newTab, tabs, detail)
-		}
-	}
-
-	onMount(() => {
-		element?.addEventListener('change', onChange)
-		return () => {
-			element?.removeEventListener('change', onChange)
-		}
-	})
-	const initialSetup = (el: HTMLElement) => {
-		const tabs = Array.from(el.querySelectorAll<HTMLElement>('.np-tab'))
-		const activeTab =
-			tabs && tabs.length > 0
-				? (tabs.find((t) => {
-						return t.getAttribute('data-value') === initialValue
-					}) ?? tabs[0])
-				: undefined
-		if (initialValue === undefined) {
-			value = activeTab?.getAttribute('data-value') ?? undefined
-		} else {
-			value = initialValue
+		const tabs = Array.from(event.currentTarget.querySelectorAll<HTMLElement>('.np-tab'))
+		if (tabs && tabs.length > 0 && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
+			const focusedTab = event.currentTarget.querySelector<HTMLElement>('.np-tab:focus')
+			const currentIndex = focusedTab ? tabs.indexOf(focusedTab) : 0
+			const index = currentIndex + (event.key === 'ArrowRight' ? 1 : -1)
+			const newTab =
+				index < 0 ? tabs[tabs.length - 1] : index >= tabs.length ? tabs[0] : tabs[index]
+			newTab.focus()
+			event.preventDefault()
 		}
 	}
 </script>
 
-<div {@attach initialSetup} {...attributes} class={[attributes.class]}>
+<nav
+	{...attributes}
+	bind:this={element}
+	style={tabsContext.variant === 'secondary' ? '--np-indicator-radius: 0;--_indicator-gap: 0' : ''}
+>
 	<div
 		class={['np-tabs']}
 		role="tablist"
-		data-value={value}
+		aria-orientation="horizontal"
 		tabindex="-1"
-		bind:this={element}
-		onkeydown={(event) => {
-			const tabs = Array.from(event.currentTarget.querySelectorAll<HTMLElement>('.np-tab'))
-			if (tabs && tabs.length > 0 && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
-				const focusedTab = event.currentTarget.querySelector<HTMLElement>('.np-tab:focus')
-				const currentIndex = focusedTab ? tabs.indexOf(focusedTab) : 0
-				const index = currentIndex + (event.key === 'ArrowRight' ? 1 : -1)
-				const newTab =
-					index < 0 ? tabs[tabs.length - 1] : index >= tabs.length ? tabs[0] : tabs[index]
-				newTab.focus()
-			}
-		}}
+		onkeydown={handleKeydown}
 	>
 		{@render children?.()}
 	</div>
 	<Divider />
-</div>
+</nav>
 
 <style>
+	:global(.np-tabs .np-tab-content-active .np-indicator) {
+		anchor-name: --np-tab-indicator;
+	}
 	.np-tabs {
+		padding: 0;
+		margin: 0;
 		display: flex;
 		align-items: end;
 		width: 100%;
@@ -118,5 +77,20 @@
 		scroll-behavior: smooth;
 		overflow: auto;
 		background-color: var(--np-color-surface);
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			height: 3px;
+			left: anchor(left);
+			right: anchor(right);
+			bottom: anchor(bottom);
+			background-color: var(--np-color-primary);
+			border-top-left-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
+			border-top-right-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
+			position-anchor: --np-tab-indicator;
+			transition: cubic-bezier(0.33, 1, 0.68, 1) 0.3s;
+		}
 	}
 </style>

package/dist/tabs/types.d.ts

@@ -1,16 +1,21 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface TabProps extends HTMLAttributes<HTMLElement> {
-    variant?: 'primary' | 'secondary';
     inlineIcon?: boolean;
     value: string | number;
     href?: string;
     icon?: Snippet;
     badge?: boolean;
     badgeLabel?: string | number;
-    selected?: boolean;
+    element?: HTMLElement;
 }
-export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
-    value?: string | number;
+export interface TabsProps extends HTMLAttributes<HTMLElement> {
+    variant?: 'primary' | 'secondary';
+    value: string | number;
     element?: HTMLElement;
 }
+export interface TabsContext {
+    value: string | number;
+    variant: 'primary' | 'secondary';
+    id: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.23.3",
+  "version": "0.24.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -56,11 +56,11 @@
   "devDependencies": {
     "@eslint/js": "^9.33.0",
     "@material/material-color-utilities": "^0.3.0",
-    "@playwright/test": "^1.54.2",
-    "@sveltejs/adapter-vercel": "^5.9.1",
-    "@sveltejs/kit": "^2.31.1",
-    "@sveltejs/package": "^2.4.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.2",
+    "@playwright/test": "^1.55.0",
+    "@sveltejs/adapter-vercel": "^5.10.2",
+    "@sveltejs/kit": "^2.36.1",
+    "@sveltejs/package": "^2.5.0",
+    "@sveltejs/vite-plugin-svelte": "^6.1.3",
     "@types/eslint": "^9.6.1",
     "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.8",
@@ -69,11 +69,11 @@
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
-    "svelte": "^5.38.1",
+    "svelte": "^5.38.2",
     "svelte-check": "^4.3.1",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2",
+    "typescript-eslint": "^8.40.0",
+    "vite": "^7.1.3",
     "vitest": "^3.2.4"
   },
   "svelte": "./dist/index.js",