noph-ui 0.33.0 → 0.33.2

package/dist/keyboard-nav.d.ts

@@ -0,0 +1,8 @@
+import type { Attachment } from 'svelte/attachments';
+export declare const rovingTabindex: (itemSelector: string, options?: {
+    currentAttr?: string;
+    currentValue?: string;
+}) => Attachment<HTMLElement>;
+export declare const arrowKeyNav: (itemSelector: string, orientation?: "vertical" | "horizontal") => (event: KeyboardEvent & {
+    currentTarget: EventTarget & HTMLElement;
+}) => void;

package/dist/keyboard-nav.js

@@ -0,0 +1,69 @@
+export const rovingTabindex = (itemSelector, options = {}) => {
+    const { currentAttr = 'aria-current', currentValue = 'page' } = options;
+    return (node) => {
+        const getItems = () => Array.from(node.querySelectorAll(itemSelector));
+        const setTabstop = (target) => {
+            for (const i of getItems()) {
+                const wanted = i === target ? 0 : -1;
+                if (i.tabIndex !== wanted)
+                    i.tabIndex = wanted;
+            }
+        };
+        const sync = () => {
+            const items = getItems();
+            if (items.length === 0)
+                return;
+            const focused = node.querySelector(`${itemSelector}:focus`);
+            const current = items.find((i) => i.getAttribute(currentAttr) === currentValue);
+            setTabstop(focused ?? current ?? items[0]);
+        };
+        const onFocusIn = (event) => {
+            const target = event.target.closest(itemSelector);
+            if (!target || !node.contains(target) || target.tabIndex === 0)
+                return;
+            setTabstop(target);
+        };
+        sync();
+        node.addEventListener('focusin', onFocusIn);
+        const observer = new MutationObserver(sync);
+        observer.observe(node, {
+            attributes: true,
+            attributeFilter: [currentAttr],
+            subtree: true,
+            childList: true,
+        });
+        return () => {
+            node.removeEventListener('focusin', onFocusIn);
+            observer.disconnect();
+        };
+    };
+};
+export const arrowKeyNav = (itemSelector, orientation = 'vertical') => (event) => {
+    const [prev, next] = orientation === 'vertical'
+        ? ['ArrowUp', 'ArrowDown']
+        : ['ArrowLeft', 'ArrowRight'];
+    const { key } = event;
+    if (key !== prev && key !== next && key !== 'Home' && key !== 'End')
+        return;
+    const items = Array.from(event.currentTarget.querySelectorAll(itemSelector));
+    if (items.length === 0)
+        return;
+    const focused = event.currentTarget.querySelector(`${itemSelector}:focus`);
+    if (!focused)
+        return;
+    const currentIndex = items.indexOf(focused);
+    let target;
+    if (key === 'Home') {
+        target = items[0];
+    }
+    else if (key === 'End') {
+        target = items[items.length - 1];
+    }
+    else {
+        const delta = key === next ? 1 : -1;
+        const index = currentIndex + delta;
+        target = index < 0 ? items[items.length - 1] : index >= items.length ? items[0] : items[index];
+    }
+    target.focus();
+    event.preventDefault();
+};

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import type { NavigationDrawerProps } from './types.ts'
 	let {
 		modal = false,
@@ -7,12 +8,22 @@
 		direction = 'ltr',
 		popover,
 		children,
+		onkeydown: userKeydown,
 		...attributes
 	}: NavigationDrawerProps = $props()
+
+	const attach = rovingTabindex('.np-navigation-drawer-item')
+	const arrowHandler = arrowKeyNav('.np-navigation-drawer-item')
+
+	const handleKeydown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
+		userKeydown?.(event)
+		if (!event.defaultPrevented) arrowHandler(event)
+	}
 </script>
 
 <nav
 	{...attributes}
+	{@attach attach}
 	bind:this={element}
 	popover={modal ? popover || 'auto' : undefined}
 	style="--np-navigation-drawer-start: {direction === 'ltr'
@@ -24,6 +35,7 @@
 		backdrop && 'np-navigation-drawer-backdrop',
 		attributes.class,
 	]}
+	onkeydown={handleKeydown}
 >
 	{#if backdrop}
 		<div

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -28,12 +28,14 @@
 {#if 'href' in attributes}
 	<a
 		{...attributes}
+		href={attributes.href}
 		class={[
 			'np-navigation-drawer-item',
 			selected && 'np-navigation-drawer-item-selected',
 			attributes.class,
 		]}
 		aria-current={selected ? 'page' : undefined}
+		tabindex={selected ? 0 : -1}
 	>
 		{@render content()}
 	</a>
@@ -46,7 +48,8 @@
 			attributes.class,
 		]}
 		type="button"
-		aria-pressed={selected ? 'true' : undefined}
+		aria-current={selected ? 'page' : undefined}
+		tabindex={selected ? 0 : -1}
 	>
 		{@render content()}
 	</button>
@@ -97,7 +100,11 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: -3px;
-		animation: focusAnimation 0.3s ease forwards;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-drawer-item:focus-visible {
+			animation: focusAnimation 0.3s ease forwards;
+		}
 	}
 	@keyframes focusAnimation {
 		0% {

package/dist/navigation-rail/NavigationRail.svelte

@@ -1,10 +1,24 @@
 <script lang="ts">
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import type { NavigationRailProps } from './types.ts'
 
-	let { children, ...attributes }: NavigationRailProps = $props()
+	let { children, onkeydown: userKeydown, ...attributes }: NavigationRailProps = $props()
+
+	const attach = rovingTabindex('.np-navigation-action')
+	const arrowHandler = arrowKeyNav('.np-navigation-action')
+
+	const handleKeydown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
+		userKeydown?.(event)
+		if (!event.defaultPrevented) arrowHandler(event)
+	}
 </script>
 
-<nav {...attributes} class="navigation-rail {attributes.class}">
+<nav
+	{...attributes}
+	{@attach attach}
+	class="navigation-rail {attributes.class}"
+	onkeydown={handleKeydown}
+>
 	{#if children}
 		{@render children()}
 	{/if}

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -19,8 +19,10 @@
 {#if 'href' in attributes}
 	<a
 		{...attributes}
+		href={attributes.href}
 		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
 		aria-current={selected ? 'page' : undefined}
+		tabindex={selected ? 0 : -1}
 	>
 		{@render content()}
 	</a>
@@ -28,7 +30,8 @@
 	<button
 		{...attributes as HTMLButtonAttributes}
 		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
-		aria-pressed={selected ? 'true' : undefined}
+		aria-current={selected ? 'page' : undefined}
+		tabindex={selected ? 0 : -1}
 	>
 		{@render content()}
 	</button>
@@ -54,7 +57,11 @@
 		outline-width: 3px;
 		outline-offset: 2px;
 		border-radius: 1rem;
-		animation: focusAnimation 0.3s ease forwards;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-action:focus-visible {
+			animation: focusAnimation 0.3s ease forwards;
+		}
 	}
 	@keyframes focusAnimation {
 		0% {

package/dist/tabs/Tabs.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Divider from '../divider/Divider.svelte'
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import { setTabsContext } from './context.js'
 	import type { TabsContext, TabsProps } from './types.ts'
 
@@ -31,31 +32,18 @@
 		tabsContext.variant === 'secondary' ? '--np-indicator-radius: 0;--_indicator-gap: 0' : '',
 	)
 
-	const handleKeydown = (
-		event: KeyboardEvent & {
-			currentTarget: EventTarget & HTMLDivElement
-		},
-	) => {
-		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()
-		}
-	}
+	const attach = rovingTabindex('.np-tab', { currentAttr: 'aria-selected', currentValue: 'true' })
+	const onkeydown = arrowKeyNav('.np-tab', 'horizontal')
 </script>
 
 <nav {...attributes} bind:this={element} style={secondaryStyle}>
 	<div
+		{@attach attach}
 		class={['np-tabs']}
 		role="tablist"
 		aria-orientation="horizontal"
 		tabindex="-1"
-		onkeydown={handleKeydown}
+		{onkeydown}
 	>
 		{@render children?.()}
 	</div>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "noph-ui",
-	"version": "0.33.0",
+	"version": "0.33.2",
 	"license": "MIT",
 	"homepage": "https://noph.dev",
 	"repository": {
@@ -70,25 +70,25 @@
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
 		"@materialx/material-color-utilities": "^0.4.8",
-		"@playwright/test": "^1.58.2",
+		"@playwright/test": "^1.59.1",
 		"@sveltejs/adapter-auto": "^7.0.1",
-		"@sveltejs/kit": "^2.55.0",
+		"@sveltejs/kit": "^2.57.1",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",
 		"@types/eslint": "^9.6.1",
-		"eslint": "^10.1.0",
+		"eslint": "^10.2.1",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.16.0",
-		"globals": "^17.4.0",
-		"prettier": "^3.8.1",
+		"eslint-plugin-svelte": "^3.17.1",
+		"globals": "^17.5.0",
+		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^3.5.1",
 		"publint": "^0.3.18",
-		"svelte": "^5.55.1",
-		"svelte-check": "^4.4.5",
-		"typescript": "^6.0.2",
-		"typescript-eslint": "^8.57.2",
-		"vite": "8.0.3",
-		"vitest": "^4.1.2"
+		"svelte": "^5.55.4",
+		"svelte-check": "^4.4.6",
+		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.59.0",
+		"vite": "8.0.10",
+		"vitest": "^4.1.5"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",