noph-ui 0.34.3 → 0.35.0

package/dist/chip/InputChip.svelte

@@ -10,22 +10,20 @@
 		label = '',
 		icon,
 		element = $bindable(),
+		actionElement = $bindable(),
 		ariaLabelRemove = 'Remove',
+		onclick,
 		onremove,
 		name,
 		value,
 		...attributes
 	}: InputChipProps = $props()
-
-	let chipLabel: HTMLDivElement | undefined = $state()
 </script>
 
 <div
 	{...attributes}
 	bind:this={element}
-	tabindex={disabled ? -1 : 0}
 	aria-disabled={disabled}
-	role="button"
 	class={[
 		'np-input-chip',
 		icon ? 'np-input-chip-icon' : '',
@@ -34,17 +32,24 @@
 		attributes.class,
 	]}
 >
-	<div bind:this={chipLabel} class={['np-input-chip-label']}>
+	<button
+		bind:this={actionElement}
+		type="button"
+		class="np-input-chip-label"
+		aria-pressed={selected === undefined ? undefined : selected}
+		{disabled}
+		{onclick}
+	>
 		{#if icon}
 			<div class="np-chip-icon">
 				{@render icon()}
 			</div>
 		{/if}
 		<div class="np-chip-label">{label || value}</div>
-		<input type="hidden" {value} {name} {disabled} />
-	</div>
+	</button>
+	<input type="hidden" {value} {name} {disabled} />
 	{#if !disabled}
-		<Ripple forElement={chipLabel} />
+		<Ripple forElement={actionElement} />
 	{/if}
 	<IconButton
 		{disabled}
@@ -71,12 +76,14 @@
 		padding-inline-end: 1px;
 		min-width: 0;
 	}
-	.np-input-chip-label input {
-		opacity: 0;
-		position: absolute;
-		pointer-events: none;
-	}
 	.np-input-chip-label {
+		appearance: none;
+		background: none;
+		border-width: 0;
+		font: inherit;
+		margin: 0;
+		padding-block: 0;
+		padding-inline-end: 0;
 		cursor: pointer;
 		display: inline-flex;
 		align-items: center;
@@ -88,6 +95,12 @@
 		z-index: 1;
 		padding-inline-start: 0.75rem;
 		overflow: hidden;
+		min-width: 0;
+	}
+	/* The chip container draws the focus ring, so the body keeps none of its own.
+	   `outline-width: 0` would not do, the UA ring is `outline-style: auto`. */
+	.np-input-chip-label:focus-visible {
+		outline: none;
 	}
 	.np-chip-icon {
 		color: var(--np-color-on-surface-variant);
@@ -133,7 +146,7 @@
 	.np-input-chip-selected .np-input-chip-label {
 		color: var(--np-color-on-secondary-container);
 	}
-	.np-input-chip:focus-visible {
+	.np-input-chip:has(:focus-visible) {
 		outline-style: solid;
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
@@ -157,24 +170,12 @@
 		color: var(--np-color-on-surface);
 		opacity: 0.38;
 	}
-	.np-input-chip-disabled.np-input-chip-selected::before {
-		opacity: 0.12;
-	}
-	.np-input-chip-disabled:not(.np-input-chip-selected).np-input-chip::after {
-		content: '';
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		pointer-events: none;
-		border-width: 1px;
-		border-style: solid;
-		border-color: var(--np-color-on-surface);
-		opacity: 0.12;
-	}
-	.np-input-chip-disabled::before {
-		opacity: 0.12;
+	.np-input-chip-disabled:not(.np-input-chip-selected)::before {
+		outline-color: color-mix(in srgb, var(--np-color-on-surface) 12%, transparent);
+		background-color: transparent;
 	}
 	.np-input-chip-selected.np-input-chip-disabled::before {
-		background-color: var(--np-color-on-surface);
+		outline-color: transparent;
+		background-color: color-mix(in srgb, var(--np-color-on-surface) 12%, transparent);
 	}
 </style>

package/dist/chip/InputChip.svelte.d.ts

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

package/dist/chip/types.d.ts

@@ -26,15 +26,17 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     defaultSelected?: boolean | null;
     onremove?: MouseEventHandler<ButtonElement>;
 }
-export interface InputChipProps extends HTMLAttributes<HTMLDivElement> {
+export interface InputChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onclick'> {
     selected?: boolean;
     disabled?: boolean;
     label?: string;
     icon?: Snippet;
     ariaLabelRemove?: string;
     element?: HTMLDivElement;
+    actionElement?: HTMLButtonElement;
     name?: string;
     value?: string | number;
+    onclick?: MouseEventHandler<HTMLButtonElement>;
     onremove?: MouseEventHandler<ButtonElement>;
 }
 export interface ChipSetContext {

package/dist/dialog/Dialog.svelte

@@ -11,11 +11,16 @@
 		supportingText,
 		actions,
 		divider,
+		ontoggle,
 		...attributes
 	}: DialogProps = $props()
 
 	const uid = $props.id()
 
+	let dialogEl: HTMLDivElement | undefined = $state()
+	let previouslyFocused: HTMLElement | undefined
+	let inerted: HTMLElement[] = []
+
 	export function showPopover() {
 		element?.showPopover()
 	}
@@ -23,12 +28,43 @@
 	export function hidePopover() {
 		element?.hidePopover()
 	}
+
+	const trapFocus = () => {
+		if (!element) return
+		previouslyFocused = document.activeElement as HTMLElement | undefined
+		for (let node: HTMLElement | null = element; node && node !== document.body;) {
+			const parent: HTMLElement | null = node.parentElement
+			if (!parent) break
+			for (const sibling of parent.children) {
+				if (sibling === node || !(sibling instanceof HTMLElement) || sibling.inert) continue
+				sibling.inert = true
+				inerted.push(sibling)
+			}
+			node = parent
+		}
+		dialogEl?.focus()
+	}
+
+	const releaseFocus = () => {
+		for (const node of inerted) node.inert = false
+		inerted = []
+		previouslyFocused?.focus?.()
+		previouslyFocused = undefined
+	}
 </script>
 
 <div
 	bind:this={element}
 	popover="auto"
 	{...attributes}
+	ontoggle={(event) => {
+		if (event.newState === 'open') {
+			trapFocus()
+		} else {
+			releaseFocus()
+		}
+		ontoggle?.(event)
+	}}
 	class={['np-dialog-container', !quick && 'np-animate', attributes.class]}
 >
 	<div
@@ -39,24 +75,28 @@
 		}}
 	></div>
 	<div
+		bind:this={dialogEl}
 		class="np-dialog"
 		role="dialog"
+		tabindex="-1"
 		aria-modal="true"
-		aria-labelledby="{uid}-dialog-headline"
-		aria-describedby={supportingText ? '{uid}-dialog-supporting-text' : undefined}
+		aria-labelledby={headline ? `${uid}-dialog-headline` : undefined}
+		aria-describedby={supportingText ? `${uid}-dialog-supporting-text` : undefined}
 	>
 		{#if icon}
 			<div class="np-dialog-icon">
 				{@render icon()}
 			</div>
 		{/if}
-		<h1
-			id="{uid}-dialog-headline"
-			class="np-dialog-headline"
-			style={icon ? 'text-align: center' : ''}
-		>
-			{headline}
-		</h1>
+		{#if headline}
+			<h1
+				id="{uid}-dialog-headline"
+				class="np-dialog-headline"
+				style={icon ? 'text-align: center' : ''}
+			>
+				{headline}
+			</h1>
+		{/if}
 		{#if supportingText}
 			<p id="{uid}-dialog-supporting-text" class="np-dialog-supporting-text">{supportingText}</p>
 		{/if}
@@ -126,7 +166,10 @@
 		inset: 0;
 		position: fixed;
 		background-color: var(--np-color-scrim);
-		opacity: 0.38;
+		opacity: 0.32;
+	}
+	.np-dialog:focus-visible {
+		outline: none;
 	}
 
 	.np-dialog-icon {

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from './progress/index.js';
 export * from './radio/index.js';
 export * from './ripple/index.js';
 export * from './select/index.js';
+export * from './slider/index.js';
 export * from './snackbar/index.js';
 export * from './switch/index.js';
 export * from './tabs/index.js';

package/dist/index.js

@@ -14,6 +14,7 @@ export * from './progress/index.js';
 export * from './radio/index.js';
 export * from './ripple/index.js';
 export * from './select/index.js';
+export * from './slider/index.js';
 export * from './snackbar/index.js';
 export * from './switch/index.js';
 export * from './tabs/index.js';

package/dist/keyboard-nav.js

@@ -1,7 +1,15 @@
+const focusable = (items) => items.filter((item) => !item.matches(':disabled'));
+const focusedItem = (node, itemSelector, items) => {
+    const active = document.activeElement;
+    if (!(active instanceof HTMLElement) || !node.contains(active))
+        return null;
+    const item = active.closest(itemSelector);
+    return item && items.includes(item) ? item : null;
+};
 export const rovingTabindex = (itemSelector, options = {}) => {
     const { currentAttr = 'aria-current', currentValue = 'page' } = options;
     return (node) => {
-        const getItems = () => Array.from(node.querySelectorAll(itemSelector));
+        const getItems = () => focusable(Array.from(node.querySelectorAll(itemSelector)));
         const setTabstop = (target) => {
             for (const i of getItems()) {
                 const wanted = i === target ? 0 : -1;
@@ -13,7 +21,7 @@ export const rovingTabindex = (itemSelector, options = {}) => {
             const items = getItems();
             if (items.length === 0)
                 return;
-            const focused = node.querySelector(`${itemSelector}:focus`);
+            const focused = focusedItem(node, itemSelector, items);
             const current = items.find((i) => i.getAttribute(currentAttr) === currentValue);
             setTabstop(focused ?? current ?? items[0]);
         };
@@ -45,10 +53,10 @@ export const arrowKeyNav = (itemSelector, orientation = 'vertical') => (event) =
     const { key } = event;
     if (key !== prev && key !== next && key !== 'Home' && key !== 'End')
         return;
-    const items = Array.from(event.currentTarget.querySelectorAll(itemSelector));
+    const items = focusable(Array.from(event.currentTarget.querySelectorAll(itemSelector)));
     if (items.length === 0)
         return;
-    const focused = event.currentTarget.querySelector(`${itemSelector}:focus`);
+    const focused = focusedItem(event.currentTarget, itemSelector, items);
     if (!focused)
         return;
     const currentIndex = items.indexOf(focused);

package/dist/list/Item.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	import { onMount } from 'svelte'
 	import type { ItemProps } from './types.ts'
 
 	let {
@@ -10,37 +9,11 @@
 		children,
 		supportingText,
 		disabled = false,
-		onfocus,
-		onblur,
 		softFocus = false,
 		lazy = false,
+		variant,
 		...attributes
 	}: ItemProps = $props()
-
-	let focused = $derived(softFocus)
-	let visible = $derived(!lazy)
-	let element: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement | undefined = $state()
-	let observer: IntersectionObserver | undefined
-	onMount(() => {
-		if (!lazy) {
-			return
-		}
-		observer = new IntersectionObserver((entries) => {
-			entries.forEach((entry) => {
-				if (entry.isIntersecting) {
-					visible = true
-					observer?.disconnect()
-				}
-			})
-		})
-
-		return () => observer?.disconnect()
-	})
-	$effect(() => {
-		if (element && lazy) {
-			observer?.observe(element)
-		}
-	})
 </script>
 
 {#snippet content()}
@@ -70,53 +43,36 @@
 {/snippet}
 
 {#if disabled}
-	<div bind:this={element} aria-disabled="true" class={['np-item disabled', attributes.class]}>
-		{#if visible}
-			{@render content()}
-		{/if}
+	<div
+		{...attributes}
+		aria-disabled="true"
+		class={['np-item disabled', lazy && 'np-item-lazy', attributes.class]}
+	>
+		{@render content()}
 	</div>
-{:else if attributes.variant === 'text' || attributes.variant === undefined}
-	<div {...attributes} class={['np-item', selected && 'selected', attributes.class]}>
+{:else if variant === 'text' || variant === undefined}
+	<div
+		{...attributes}
+		class={['np-item', selected && 'selected', lazy && 'np-item-lazy', attributes.class]}
+	>
 		{@render content()}
 	</div>
-{:else if attributes.variant === 'button'}
+{:else if variant === 'button'}
 	<button
 		{...attributes}
 		type={attributes.type ?? 'button'}
-		onfocus={(event) => {
-			focused = true
-			onfocus?.(event)
-		}}
-		onblur={(event) => {
-			focused = false
-			onblur?.(event)
-		}}
-		class={['np-item', selected && 'selected', attributes.class]}
-		bind:this={element}
+		class={['np-item', selected && 'selected', lazy && 'np-item-lazy', attributes.class]}
 	>
-		{#if visible}
-			{@render content()}
-			<Ripple forceHover={focused} />
-		{/if}
+		{@render content()}
+		<Ripple forceHover={softFocus} />
 	</button>
-{:else if attributes.variant === 'link'}
+{:else if variant === 'link'}
 	<a
 		{...attributes}
-		onfocus={(event) => {
-			focused = true
-			onfocus?.(event)
-		}}
-		onblur={(event) => {
-			focused = false
-			onblur?.(event)
-		}}
-		class={['np-item', selected && 'selected', attributes.class]}
-		bind:this={element}
+		class={['np-item', selected && 'selected', lazy && 'np-item-lazy', attributes.class]}
 	>
-		{#if visible}
-			{@render content()}
-			<Ripple forceHover={focused} />
-		{/if}
+		{@render content()}
+		<Ripple forceHover={softFocus} />
 	</a>
 {/if}
 
@@ -161,9 +117,9 @@
 		text-align: start;
 		overflow: hidden;
 		width: 100%;
-		padding-block: 0.75rem;
+		padding-block: 0.625rem;
 		padding-inline: 1rem;
-		min-height: 3rem;
+		min-height: var(--np-item-container-height, 3.5rem);
 		gap: 0.75rem;
 		text-decoration: none;
 		-webkit-tap-highlight-color: transparent;
@@ -171,6 +127,23 @@
 		box-sizing: border-box;
 	}
 
+	.np-item:has(.np-item-supporting-text) {
+		min-height: var(--np-item-container-height, 4.5rem);
+	}
+
+	.np-item-lazy {
+		content-visibility: auto;
+		contain-intrinsic-block-size: auto var(--np-item-container-height, 3.5rem);
+	}
+
+	.np-item-lazy:has(.np-item-supporting-text) {
+		contain-intrinsic-block-size: auto var(--np-item-container-height, 4.5rem);
+	}
+
+	.np-item:focus-visible :global(.np-ripple-surface)::before {
+		opacity: var(--np-ripple-focus-opacity, 0.1);
+	}
+
 	.np-item:focus-visible {
 		outline-style: solid;
 		outline-color: var(--np-color-secondary);

package/dist/menu/Menu.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import type { MenuProps } from './types.ts'
 	import { on } from 'svelte/events'
 
+	const MENU_ITEM_SELECTOR = '[role="menuitem"]'
+	const attach = rovingTabindex(MENU_ITEM_SELECTOR)
+	const arrowHandler = arrowKeyNav(MENU_ITEM_SELECTOR)
+
 	let {
 		children,
 		element = $bindable(),
@@ -101,8 +106,12 @@
 	{popover}
 	class={['np-menu-container', attributes.class]}
 	{style}
+	onkeydown={(event) => {
+		attributes.onkeydown?.(event)
+		if (!event.defaultPrevented) arrowHandler(event)
+	}}
 >
-	<div class="np-menu">
+	<div {@attach attach} class="np-menu" role="none">
 		{@render children()}
 	</div>
 </div>

package/dist/menu/MenuItem.svelte

@@ -5,13 +5,13 @@
 	let { ...attributes }: MenuItemProps = $props()
 </script>
 
-<li class="np-menu-item" role="menuitem">
+<div class="np-menu-item" role="none">
 	{#if 'href' in attributes}
-		<Item {...attributes} variant="link" />
+		<Item role="menuitem" {...attributes} variant="link" />
 	{:else}
-		<Item {...attributes} variant="button" />
+		<Item role="menuitem" {...attributes} variant="button" />
 	{/if}
-</li>
+</div>
 
 <style>
 	.np-menu-item {

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -9,6 +9,7 @@
 		popover,
 		children,
 		onkeydown: userKeydown,
+		ontoggle,
 		...attributes
 	}: NavigationDrawerProps = $props()
 
@@ -19,6 +20,32 @@
 		userKeydown?.(event)
 		if (!event.defaultPrevented) arrowHandler(event)
 	}
+
+	let previouslyFocused: HTMLElement | undefined
+	let inerted: HTMLElement[] = []
+
+	const trapFocus = () => {
+		if (!element) return
+		previouslyFocused = document.activeElement as HTMLElement | undefined
+		for (let node: HTMLElement | null = element; node && node !== document.body;) {
+			const parent: HTMLElement | null = node.parentElement
+			if (!parent) break
+			for (const sibling of parent.children) {
+				if (sibling === node || !(sibling instanceof HTMLElement) || sibling.inert) continue
+				sibling.inert = true
+				inerted.push(sibling)
+			}
+			node = parent
+		}
+		element.querySelector<HTMLElement>('.np-navigation-drawer-item')?.focus()
+	}
+
+	const releaseFocus = () => {
+		for (const node of inerted) node.inert = false
+		inerted = []
+		previouslyFocused?.focus?.()
+		previouslyFocused = undefined
+	}
 </script>
 
 <nav
@@ -36,6 +63,13 @@
 		attributes.class,
 	]}
 	onkeydown={handleKeydown}
+	ontoggle={(event) => {
+		if (modal) {
+			if (event.newState === 'open') trapFocus()
+			else releaseFocus()
+		}
+		ontoggle?.(event)
+	}}
 >
 	{#if backdrop}
 		<div
@@ -108,7 +142,7 @@
 		transition: opacity 0.25s ease;
 	}
 	.np-navigation-drawer-backdrop[popover]:popover-open .np-backdrop {
-		opacity: 0.38;
+		opacity: 0.32;
 		@starting-style {
 			opacity: 0;
 		}

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -89,7 +89,7 @@
 		font-size: 0.75rem;
 		line-height: 1rem;
 		font-weight: var(--np-navigation-rail-item-font-weight, 500);
-		transition: all;
+		transition: color var(--np-motion-expressive-default-effects);
 		color: var(--np-color-on-surface-variant);
 	}
 	.np-navigation-action-selected .np-navigation-action-icon {
@@ -117,7 +117,7 @@
 
 	.np-navigation-action-selected .np-navigation-action-label {
 		font-weight: var(--np-navigation-rail-item-selected-font-weight, 500);
-		color: var(--np-color-secondary);
+		color: var(--np-color-on-surface);
 	}
 	.np-touch {
 		height: 56px;