noph-ui 0.16.23 → 0.17.0

package/README.md

@@ -67,6 +67,7 @@ Beta (No breaking changes expected)
 - Select
 - Snackbar
 - Text fields
+- Tabs
 
 In progress (Breaking changes expected)
 
@@ -76,4 +77,3 @@ In progress (Breaking changes expected)
 - Navigation Drawer (Docs missing)
 - Navigation Rail (Badge is missing + Docs missing)
 - Tooltips (Positioning missing)
-- Tabs

package/dist/card/Card.svelte

@@ -174,6 +174,8 @@
 		position: relative;
 		padding: 0;
 		box-sizing: border-box;
+		color: var(--np-color-on-surface);
+		text-decoration: none;
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		border-radius: var(--border-radius);
 		background-color: var(--background-color);

package/dist/list/Item.svelte

@@ -150,6 +150,7 @@
 		padding: 0.75rem 1rem;
 		min-height: 3.5rem;
 		gap: 1rem;
+		text-decoration: none;
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		color: var(--np-item-label-text-color, var(--np-color-on-surface));
 		box-sizing: border-box;

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -58,6 +58,8 @@
 	.np-navigation-drawer-item {
 		cursor: pointer;
 		font-family: inherit;
+		color: var(--np-color-on-surface);
+		text-decoration: none;
 		border: 0;
 		background: none;
 		align-items: center;

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -49,6 +49,8 @@
 		gap: 0.25rem;
 		display: flex;
 		flex-direction: column;
+		color: var(--np-color-on-surface);
+		text-decoration: none;
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 	}
 	.np-navigation-action:focus-visible {
@@ -113,7 +115,7 @@
 
 	.np-navigation-action-selected .np-navigation-action-label {
 		font-weight: var(--np-navigation-rail-item-selected-font-weight, 700);
-		color: var(--np-color-on-surface);
+		color: var(--np-color-secondary);
 	}
 	.np-touch {
 		height: 56px;

package/dist/tabs/Tab.svelte

@@ -10,19 +10,20 @@
 		onclick,
 		onkeydown,
 		value,
+		href,
 		variant = 'primary',
 		...attributes
 	}: TabProps = $props()
 	let activeTab: { value: string | number; node: HTMLElement } = getContext('activeTab')
 	let isActive = $derived(activeTab.value === value)
 
-	const setTabActive = (el: HTMLDivElement) => {
+	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('.np-indicator') as HTMLElement
-			newIndicator.style.setProperty(
+			const newIndicator = el.querySelector<HTMLElement>('.np-indicator')
+			newIndicator?.style.setProperty(
 				'--np-tab-indicator-start',
 				`${oldIndicatorRect.x - newIndicator.getBoundingClientRect().x}px`,
 			)
@@ -30,38 +31,28 @@
 		activeTab.value = value
 		activeTab.node = el
 	}
-</script>
-
-<div
-	{@attach (el) => {
+	const setActiveTab = (el: HTMLElement) => {
 		if (isActive) {
 			activeTab.node = el
 		}
-	}}
-	{...attributes}
-	tabindex={isActive ? 0 : -1}
-	role="tab"
-	class={[
-		'np-tab',
-		variant === 'secondary' && 'np-tab-secondary',
-		isActive && 'np-tab-content-active',
-		attributes.class,
-	]}
-	onclick={(event) => {
+	}
+	const onClick = (event: MouseEvent & { currentTarget: EventTarget & HTMLElement }) => {
 		setTabActive(event.currentTarget)
 		if (onclick) {
 			onclick(event)
 		}
-	}}
-	onkeydown={(event) => {
+	}
+	const onKeyDown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
 		if (event.key === 'Enter' || event.key === ' ') {
 			setTabActive(event.currentTarget)
 		}
 		if (onkeydown) {
 			onkeydown(event)
 		}
-	}}
->
+	}
+</script>
+
+{#snippet content()}
 	<div
 		class="np-tab-content"
 		style={variant === 'secondary' ? '--np-indicator-radius: 0;--_indicator-gap: 0' : ''}
@@ -84,7 +75,44 @@
 	</div>
 	<div class="focus-area"></div>
 	<Ripple />
-</div>
+{/snippet}
+
+{#if href}
+	<a
+		{@attach setActiveTab}
+		{...attributes}
+		tabindex={isActive ? 0 : -1}
+		role="tab"
+		{href}
+		class={[
+			'np-tab',
+			variant === 'secondary' && 'np-tab-secondary',
+			isActive && 'np-tab-content-active',
+			attributes.class,
+		]}
+		onclick={onClick}
+		onkeydown={onKeyDown}
+	>
+		{@render content()}
+	</a>
+{:else}
+	<div
+		{@attach setActiveTab}
+		{...attributes}
+		tabindex={isActive ? 0 : -1}
+		role="tab"
+		class={[
+			'np-tab',
+			variant === 'secondary' && 'np-tab-secondary',
+			isActive && 'np-tab-content-active',
+			attributes.class,
+		]}
+		onclick={onClick}
+		onkeydown={onKeyDown}
+	>
+		{@render content()}
+	</div>
+{/if}
 
 <style>
 	.np-tab {
@@ -94,9 +122,7 @@
 		justify-content: center;
 		font-family: inherit;
 		box-sizing: border-box;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-		background-color: transparent;
-		border-width: 0;
+		text-decoration: none;
 		position: relative;
 		cursor: pointer;
 		padding: 0 1rem;

package/dist/tabs/types.d.ts

@@ -1,9 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-export interface TabProps extends HTMLAttributes<HTMLDivElement> {
+export interface TabProps extends HTMLAttributes<HTMLElement> {
     variant?: 'primary' | 'secondary';
     inlineIcon?: boolean;
     value: string | number;
+    href?: string;
     icon?: Snippet;
 }
 export interface TabsProps extends HTMLAttributes<HTMLDivElement> {

package/package.json

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