noph-ui 0.22.4 → 0.23.0

package/dist/badge/Badge.svelte

@@ -8,9 +8,6 @@
 		label === undefined ? 'np-badge-container-no-label' : 'np-badge-container-label',
 	]}
 >
-	{#if label === 0}
-		<div class="np-badge-label">0</div>
-	{/if}
 	{#if label !== undefined}
 		<div class="np-badge-label">
 			{label}
@@ -20,7 +17,7 @@
 
 <style>
 	.np-badge-container {
-		display: flex;
+		display: inline-flex;
 		justify-content: center;
 		background-color: var(--np-color-error);
 		border-radius: var(--np-shape-corner-full);

package/dist/tabs/Tab.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	import { getContext } from 'svelte'
+	import { onMount } from 'svelte'
 	import type { TabProps } from './types.ts'
 	import Badge from '../badge/Badge.svelte'
 
@@ -15,49 +15,30 @@
 		variant = 'primary',
 		badge = false,
 		badgeLabel,
+		selected = $bindable(false),
 		...attributes
 	}: TabProps = $props()
-	let activeTab: { value: string | number; node: HTMLElement } = getContext('activeTab')
 	let element: HTMLElement | undefined = $state()
-	let isActive = $state(activeTab.value === value)
+	let id = $props.id()
+	let parentElement = $derived(element?.parentElement)
 
-	$effect(() => {
-		if (activeTab.value === value) {
-			if (element && element !== activeTab.node) {
-				setTabActive(element)
-			}
-			isActive = true
-		} else {
-			isActive = false
+	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) => {
-		const oldTab = activeTab.node as HTMLElement | undefined
-		const oldIndicator = oldTab?.querySelector('.np-indicator') as HTMLElement
-		const oldIndicatorRect = oldIndicator?.getBoundingClientRect()
-		if (oldIndicatorRect) {
-			const newIndicator = el.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}`,
-				)
-			}
-		}
-		activeTab.value = value
-		activeTab.node = el
+		parentElement?.dispatchEvent(new CustomEvent('change', { detail: { id: el.id, value } }))
+		selected = true
 	}
 
-	const setActiveTab = (el: HTMLElement) => {
-		if (isActive) {
-			activeTab.node = el
-		}
-	}
 	const onClick = (event: MouseEvent & { currentTarget: EventTarget & HTMLElement }) => {
 		setTabActive(event.currentTarget)
 		if (onclick) {
@@ -116,15 +97,17 @@
 
 {#if href}
 	<a
-		{@attach setActiveTab}
 		{...attributes}
-		tabindex={isActive ? 0 : -1}
+		{id}
+		tabindex={selected ? 0 : -1}
 		role="tab"
+		aria-selected={selected}
+		data-value={value}
 		bind:this={element}
 		{href}
 		class={[
 			'np-tab',
-			isActive && 'np-tab-content-active',
+			selected && 'np-tab-content-active',
 			variant === 'primary' ? 'primary' : 'secondary',
 			attributes.class,
 		]}
@@ -135,14 +118,16 @@
 	</a>
 {:else}
 	<div
-		{@attach setActiveTab}
 		{...attributes}
-		tabindex={isActive ? 0 : -1}
+		{id}
+		tabindex={selected ? 0 : -1}
 		role="tab"
+		aria-selected={selected}
+		data-value={value}
 		bind:this={element}
 		class={[
 			'np-tab',
-			isActive && 'np-tab-content-active',
+			selected && 'np-tab-content-active',
 			variant === 'primary' ? 'primary' : 'secondary',
 			attributes.class,
 		]}

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

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

package/dist/tabs/Tabs.svelte

@@ -1,20 +1,55 @@
 <script lang="ts">
 	import Divider from '../divider/Divider.svelte'
-	import { setContext } from 'svelte'
+	import { onMount } from 'svelte'
 	import type { TabsProps } from './types.ts'
 
 	let { children, element = $bindable(), value = $bindable(), ...attributes }: TabsProps = $props()
-	let active = $state({
-		value: value,
-		node: element?.firstChild as HTMLElement | undefined,
-	})
-	setContext('activeTab', active)
+	let tabs = $derived(
+		element ? Array.from(element.querySelectorAll<HTMLElement>('.np-tab')) : undefined,
+	)
+	let activeTab = $derived(
+		tabs && tabs.length > 0
+			? (tabs.find((t) => {
+					return t.getAttribute('data-value') === value
+				}) ?? tabs[0])
+			: undefined,
+	)
 
 	$effect(() => {
-		value = active.value
+		if (value === undefined) {
+			value = activeTab?.getAttribute('data-value') ?? undefined
+		}
 	})
-	$effect(() => {
-		active.value = value
+
+	onMount(() => {
+		element?.addEventListener('change', (event) => {
+			const { detail } = event as CustomEvent<{ id: string; value: string | number }>
+			const oldTab = activeTab
+			const newTab = tabs?.find((tab) => tab.id === detail.id)
+			if (newTab && oldTab) {
+				const oldIndicator = oldTab.querySelector('.np-indicator') as HTMLElement
+				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
+				activeTab = newTab
+				tabs?.forEach((tab) => {
+					tab.dispatchEvent(new CustomEvent('change', { detail }))
+				})
+			}
+		})
+		activeTab?.dispatchEvent(new CustomEvent('change', { detail: { id: activeTab.id } }))
 	})
 </script>
 
@@ -25,8 +60,7 @@
 		tabindex="-1"
 		bind:this={element}
 		onkeydown={(event) => {
-			if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
-				const tabs: HTMLElement[] = Array.from(event.currentTarget.querySelectorAll('.np-tab'))
+			if (tabs && tabs.length > 0 && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
 				const focusedTab = event.currentTarget.querySelector('.np-tab:focus') as HTMLElement
 				const currentIndex = tabs.indexOf(focusedTab)
 				const index = currentIndex + (event.key === 'ArrowRight' ? 1 : -1)

package/dist/tabs/types.d.ts

@@ -8,8 +8,9 @@ export interface TabProps extends HTMLAttributes<HTMLElement> {
     icon?: Snippet;
     badge?: boolean;
     badgeLabel?: string | number;
+    selected?: boolean;
 }
 export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
-    value: string | number;
+    value?: string | number;
     element?: HTMLElement;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.22.4",
+  "version": "0.23.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {