noph-ui 0.24.8 → 0.24.11

package/README.md

@@ -71,6 +71,7 @@ Beta (No breaking changes expected)
 
 In progress (Breaking changes expected)
 
+- Auto complete
 - Chips (Docs missing)
 - Dialogs (Fullscreen + Docs missing)
 - Menus (Positioning missing + Docs missing)

package/dist/autocomplete/AutoComplete.svelte

@@ -26,9 +26,6 @@
 		onkeydown,
 		onclick,
 		oninput,
-		onblur,
-		onfocusout,
-		focused = $bindable(false),
 		...attributes
 	}: AutoCompleteProps = $props()
 
@@ -40,61 +37,81 @@
 		menuElement?.hidePopover()
 	}
 	const uid = $props.id()
-	let defaultOptionsFilter = (option: AutoCompleteOption) => {
+	const defaultOptionsFilter = (option: AutoCompleteOption) => {
 		return !value || option.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())
 	}
 	let displayOptions = $derived(options.filter(optionsFilter || defaultOptionsFilter))
 	let useVirtualList = $derived(displayOptions.length > 4000)
 	let clientWidth = $state(0)
-	let menuElement: HTMLDivElement | undefined = $state()
+	let menuElement = $state<HTMLDivElement>()
+	let menuOpen = $state(false)
 	let finalPopulated = $state(populated)
-	let blockEvent = $state(false)
+	let activeIndex = $state(-1)
+
+	function setActive(index: number) {
+		if (index < 0 || index >= displayOptions.length) {
+			activeIndex = -1
+			return
+		}
+		activeIndex = index
+	}
+
+	function moveActive(delta: number) {
+		if (!displayOptions.length) {
+			activeIndex = -1
+			return
+		}
+		const next =
+			activeIndex === -1
+				? delta > 0
+					? 0
+					: displayOptions.length - 1
+				: (activeIndex + delta + displayOptions.length) % displayOptions.length
+		setActive(next)
+	}
+
+	$effect(() => {
+		if (activeIndex >= displayOptions.length) {
+			activeIndex = -1
+		}
+	})
 </script>
 
-{#snippet item(option: AutoCompleteOption)}
+{#snippet item(option: AutoCompleteOption, index: number)}
 	<Item
+		id="{uid}-opt-{index}"
+		softFocus={index === activeIndex}
+		aria-selected={index === activeIndex}
+		role="option"
+		onmousedown={(e) => {
+			e.preventDefault()
+		}}
+		onmouseenter={() => setActive(index)}
 		onclick={(event) => {
 			event.preventDefault()
-			element?.focus()
+			setActive(index)
 			onoptionselect(option)
 		}}
-		role="option"
-		disabled={option.disabled}
-		onkeydown={(event) => {
-			if (event.key === 'ArrowDown') {
-				blockEvent = true
-				;(event.currentTarget?.nextElementSibling as HTMLElement)?.focus()
-				event.preventDefault()
-			}
-			if (event.key === 'ArrowUp') {
-				blockEvent = true
-				;(event.currentTarget?.previousElementSibling as HTMLElement)?.focus()
-				event.preventDefault()
-			}
-			if (event.key === 'Enter') {
-				onoptionselect(option)
-			}
-			if (event.key === 'Tab') {
-				finalPopulated = populated
-				blockEvent = false
-				hidePopover?.()
-			}
-		}}
 		variant="button"
 		>{option.label}
 	</Item>
 {/snippet}
 
 <TextField
-	autocomplete="off"
 	{...attributes}
+	autocomplete="off"
 	{variant}
 	type="text"
 	populated={finalPopulated}
 	bind:clientWidth
 	bind:value
-	bind:focused
 	style="anchor-name:--{uid};"
+	role="combobox"
+	aria-controls="listbox-{uid}"
+	aria-expanded={menuOpen}
+	aria-autocomplete="list"
+	aria-activedescendant={activeIndex >= 0 ? `${uid}-opt-${activeIndex}` : undefined}
+	aria-haspopup="listbox"
 	onclick={(event) => {
 		finalPopulated = true
 		showPopover()
@@ -102,32 +119,42 @@
 	}}
 	oninput={(event) => {
 		showPopover()
+		activeIndex = -1
 		oninput?.(event)
 	}}
 	onkeydown={(event) => {
-		if (event.key === 'Tab' || event.key === 'Escape') {
-			blockEvent = false
+		if (event.key === 'Tab') {
+			return
+		}
+		if (event.key === 'Escape') {
 			hidePopover()
-		} else {
-			if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-				event.preventDefault()
-				finalPopulated = true
-				blockEvent = true
-				showPopover()
-				;(menuElement?.firstElementChild?.firstElementChild as HTMLElement)?.focus()
-			}
+			activeIndex = -1
+			event.preventDefault()
+			return
 		}
-		onkeydown?.(event)
-	}}
-	onblur={(event) => {
-		if (!blockEvent) {
-			onblur?.(event)
+		if (event.key === 'ArrowDown') {
+			finalPopulated = true
+			showPopover()
+			moveActive(1)
+			event.preventDefault()
+			return
 		}
-	}}
-	onfocusout={(event) => {
-		if (!blockEvent) {
-			onfocusout?.(event)
+		if (event.key === 'ArrowUp') {
+			finalPopulated = true
+			showPopover()
+			moveActive(-1)
+			event.preventDefault()
+			return
 		}
+		if (event.key === 'Enter' && activeIndex >= 0) {
+			const opt = displayOptions[activeIndex]
+			if (opt) {
+				onoptionselect(opt)
+			}
+			event.preventDefault()
+			return
+		}
+		onkeydown?.(event)
 	}}
 	bind:reportValidity
 	bind:checkValidity
@@ -135,6 +162,7 @@
 	>{@render children?.()}
 </TextField>
 <Menu
+	id="listbox-{uid}"
 	style="position-anchor:--{uid};{clampMenuWidth || useVirtualList
 		? 'width'
 		: 'min-width'}:{clientWidth}px"
@@ -147,38 +175,32 @@
 		? 'var(--np-outlined-select-text-field-container-shape)'
 		: 'var(--np-filled-select-text-field-container-shape)'}
 	anchor={element}
-	onbeforetoggle={(e) => {
-		if (e.newState !== 'closed') {
-			blockEvent = true
-		}
-	}}
 	ontoggle={(e) => {
 		if (e.newState === 'closed') {
-			blockEvent = false
+			menuOpen = false
+			activeIndex = -1
 			if (!populated && finalPopulated && !value) {
 				finalPopulated = false
 			}
-		}
-		if (!focused) {
-			const event = {
-				...new FocusEvent('blur', { relatedTarget: element }),
-				currentTarget: element as EventTarget & HTMLInputElement,
-			} as FocusEvent & { currentTarget: EventTarget & HTMLInputElement }
-			onblur?.(event)
-			onfocusout?.(event)
+		} else {
+			menuOpen = true
+			// Ensure activeIndex valid when opening
+			if (activeIndex >= displayOptions.length) {
+				activeIndex = -1
+			}
 		}
 	}}
 	bind:element={menuElement}
 >
 	{#if useVirtualList}
 		<VirtualList height="250px" itemHeight={48} items={displayOptions}>
-			{#snippet row(option)}
-				{@render item(option)}
+			{#snippet row(option, index)}
+				{@render item(option, index)}
 			{/snippet}
 		</VirtualList>
 	{:else}
 		{#each displayOptions as option, index (index)}
-			{@render item(option)}
+			{@render item(option, index)}
 		{/each}
 	{/if}
 </Menu>

package/dist/autocomplete/AutoComplete.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { AutoCompleteProps } from './types.ts';
-declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "element" | "value" | "showPopover" | "hidePopover" | "reportValidity" | "checkValidity" | "focused">;
+declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "element" | "value" | "showPopover" | "hidePopover" | "reportValidity" | "checkValidity">;
 type AutoComplete = ReturnType<typeof AutoComplete>;
 export default AutoComplete;

package/dist/autocomplete/types.d.ts

@@ -2,8 +2,6 @@ import type { InputFieldProps } from '../types.ts';
 export interface AutoCompleteOption {
     value?: string | number;
     label: string;
-    disabled?: boolean;
-    selected?: boolean | undefined | null;
 }
 export interface AutoCompleteProps extends Omit<InputFieldProps, 'clientWidth' | 'clientHeight'> {
     options: AutoCompleteOption[];

package/dist/button/Button.svelte

@@ -1,11 +1,7 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
-	import type {
-		HTMLAnchorAttributes,
-		HTMLButtonAttributes,
-		MouseEventHandler,
-	} from 'svelte/elements'
+	import type { HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
 	import type { ButtonProps } from './types.ts'
 	import CircularProgress from '../progress/CircularProgress.svelte'
 
@@ -29,13 +25,6 @@
 	}: ButtonProps = $props()
 
 	const uid = $props.id()
-
-	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
-		return (obj as HTMLAnchorAttributes).href === undefined
-	}
-	const isLink = (obj: unknown): obj is HTMLAnchorAttributes => {
-		return (obj as HTMLAnchorAttributes).href !== undefined
-	}
 </script>
 
 {#snippet content()}
@@ -64,13 +53,36 @@
 	{/if}
 {/snippet}
 
-{#if isButton(attributes) || disabled || loading}
+{#if 'href' in attributes && !disabled && !loading}
+	<a
+		{...attributes}
+		onclick={(event) => {
+			;(onclick as MouseEventHandler<HTMLAnchorElement>)?.(event)
+		}}
+		aria-describedby={title ? uid : attributes['aria-describedby']}
+		aria-label={title || attributes['aria-label']}
+		bind:this={element}
+		class={[
+			'np-button',
+			size,
+			selected ? 'square' : shape,
+			toggle && 'toggle',
+			'enabled',
+			variant,
+			attributes.class,
+		]}
+	>
+		{@render content()}
+	</a>
+{:else}
 	<button
 		{...attributes as HTMLButtonAttributes}
 		aria-describedby={title ? uid : attributes['aria-describedby']}
 		aria-label={title || attributes['aria-label']}
 		disabled={disabled || loading}
-		aria-pressed={selected}
+		aria-pressed={toggle ? selected : undefined}
+		aria-busy={loading}
+		type={(attributes['type'] as 'button' | 'submit' | 'reset' | 'button') ?? undefined}
 		bind:this={element}
 		onclick={(event) => {
 			if (toggle) {
@@ -82,39 +94,18 @@
 			'np-button',
 			size,
 			selected || loading ? 'square' : shape,
-			toggle ? 'toggle' : '',
-			selected ? 'selected' : '',
-			loading ? 'np-loading' : '',
+			toggle && 'toggle',
+			selected && 'selected',
+			loading && 'np-loading',
 			disabled || loading ? `${variant}-disabled disabled` : `${variant} enabled`,
 			attributes.class,
 		]}
 	>
 		{@render content()}
 	</button>
-{:else if isLink(attributes)}
-	<a
-		{...attributes}
-		onclick={(event) => {
-			;(onclick as MouseEventHandler<HTMLAnchorElement>)?.(event)
-		}}
-		aria-describedby={title ? uid : attributes['aria-describedby']}
-		aria-label={title || attributes['aria-label']}
-		bind:this={element}
-		class={[
-			'np-button',
-			size,
-			selected || loading ? 'square' : shape,
-			toggle ? 'toggle' : '',
-			'enabled',
-			variant,
-			attributes.class,
-		]}
-	>
-		{@render content()}
-	</a>
 {/if}
 
-{#if title}
+{#if title && !disabled && !loading}
 	<Tooltip {keepTooltipOnClick} id={uid}>{title}</Tooltip>
 {/if}
 
@@ -258,10 +249,8 @@
 		background-color: color-mix(in srgb, var(--np-color-on-surface) 12%, transparent);
 	}
 	.outlined-disabled {
-		outline-style: solid;
-		outline-color: color-mix(in srgb, var(--np-color-on-surface) 12%, transparent);
-		outline-width: 1px;
-		outline-offset: -1px;
+		/* Variant outline now rendered via pseudo-element; keep token for color */
+		--_outlined-border-color: color-mix(in srgb, var(--np-color-on-surface) 12%, transparent);
 	}
 	.enabled:focus-visible {
 		outline-style: solid;
@@ -363,19 +352,28 @@
 	}
 	.outlined {
 		background-color: var(--np-outlined-button-container-color, transparent);
-		outline-style: solid;
-		outline-color: var(--np-outlined-button-outline-color, var(--np-color-outline-variant));
-		outline-width: 1px;
-		outline-offset: -1px;
+		--_outlined-border-color: var(
+			--np-outlined-button-outline-color,
+			var(--np-color-outline-variant)
+		);
 		--np-ripple-hover-color: var(--np-outlined-button-label-text-color, var(--np-color-primary));
 		--np-ripple-pressed-color: var(--np-outlined-button-label-text-color, var(--np-color-primary));
 		color: var(--np-outlined-button-label-text-color, var(--np-color-primary));
 	}
 
+	.outlined:not(.selected)::after,
+	.outlined-disabled::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border: 1px solid var(--_outlined-border-color);
+		border-radius: inherit;
+		pointer-events: none;
+	}
+
 	.outlined.selected {
 		background-color: var(--np-color-inverse-surface);
 		color: var(--np-color-inverse-on-surface);
-		outline-style: none;
 	}
 	.button-icon {
 		display: inline-flex;

package/dist/button/IconButton.svelte

@@ -3,11 +3,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { IconButtonProps } from './types.ts'
-	import type {
-		HTMLAnchorAttributes,
-		HTMLButtonAttributes,
-		MouseEventHandler,
-	} from 'svelte/elements'
+	import type { HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
 
 	let {
 		variant = 'text',
@@ -15,7 +11,7 @@
 		children,
 		title,
 		element = $bindable(),
-		disabled,
+		disabled = false,
 		loading = false,
 		loadingAriaLabel,
 		selected = $bindable(false),
@@ -30,13 +26,6 @@
 
 	const uid = $props.id()
 	let touchEl: HTMLSpanElement | undefined = $state()
-
-	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
-		return (obj as HTMLAnchorAttributes).href === undefined
-	}
-	const isLink = (obj: unknown): obj is HTMLAnchorAttributes => {
-		return (obj as HTMLAnchorAttributes).href !== undefined
-	}
 </script>
 
 {#snippet content()}
@@ -56,12 +45,37 @@
 	{/if}
 {/snippet}
 
-{#if isButton(attributes) || disabled || loading}
+{#if 'href' in attributes && !disabled && !loading}
+	<a
+		{...attributes}
+		onclick={(event) => {
+			;(onclick as MouseEventHandler<HTMLAnchorElement>)?.(event)
+		}}
+		aria-describedby={title ? uid : undefined}
+		aria-label={title}
+		bind:this={element}
+		class={[
+			'np-icon-button',
+			size,
+			width,
+			variant,
+			selected ? 'square' : shape,
+			'enabled',
+			toggle && 'toggle',
+			selected && 'selected',
+			attributes.class,
+		].filter(Boolean)}
+	>
+		{@render content()}
+	</a>
+{:else}
 	<button
+		{...attributes as HTMLButtonAttributes}
 		aria-describedby={title ? uid : attributes['aria-describedby']}
 		aria-label={title || attributes['aria-label']}
-		aria-pressed={selected}
-		{...attributes as HTMLButtonAttributes}
+		aria-pressed={toggle ? selected : undefined}
+		aria-busy={loading}
+		type={(attributes['type'] as 'button' | 'submit' | 'reset' | 'button') ?? undefined}
 		disabled={disabled || loading}
 		bind:this={element}
 		onclick={(event) => {
@@ -77,38 +91,15 @@
 			selected || loading ? 'square' : shape,
 			disabled || loading ? `${variant}-disabled disabled` : `${variant} enabled`,
 			toggle && 'toggle',
-			selected ? 'selected' : '',
+			selected && 'selected',
 			attributes.class,
 		]}
 	>
 		{@render content()}
 	</button>
-{:else if isLink(attributes)}
-	<a
-		{...attributes}
-		onclick={(event) => {
-			;(onclick as MouseEventHandler<HTMLAnchorElement>)?.(event)
-		}}
-		aria-describedby={title ? uid : undefined}
-		aria-label={title}
-		bind:this={element}
-		class={[
-			'np-icon-button',
-			size,
-			width,
-			variant,
-			selected || loading ? 'square' : shape,
-			'enabled',
-			toggle && 'toggle',
-			selected ? 'selected' : '',
-			attributes.class,
-		]}
-	>
-		{@render content()}
-	</a>
 {/if}
 
-{#if title}
+{#if title && !disabled && !loading}
 	<Tooltip {keepTooltipOnClick} id={uid}>{title}</Tooltip>
 {/if}
 
@@ -343,16 +334,26 @@
 	}
 
 	.outlined {
-		outline-style: solid;
-		outline-color: var(--np-outlined-icon-button-outline-color, var(--np-color-outline-variant));
-		outline-width: 1px;
-		outline-offset: -1px;
+		--_outlined-border-color: var(
+			--np-outlined-icon-button-outline-color,
+			var(--np-color-outline-variant)
+		);
 		--np-ripple-hover-color: var(--np-color-on-surface-variant);
 		--np-ripple-pressed-color: var(--np-color-on-surface-variant);
 		color: var(--np-color-on-surface-variant);
 	}
+
+	.outlined:not(.selected)::after,
+	.outlined-disabled::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border: 1px solid var(--_outlined-border-color);
+		border-radius: inherit;
+		pointer-events: none;
+	}
+
 	.outlined.selected {
-		outline-style: none;
 		--np-ripple-hover-color: var(--np-color-on-surface-variant);
 		--np-ripple-pressed-color: var(--np-color-on-surface-variant);
 		color: var(--np-color-inverse-on-surface);

package/dist/list/Item.svelte

@@ -13,10 +13,11 @@
 		disabled = false,
 		onfocus,
 		onblur,
+		softFocus = false,
 		...attributes
 	}: ItemProps = $props()
 
-	let focused = $state(false)
+	let focused = $derived(softFocus)
 	let visible = $state(false)
 	let element: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement | undefined = $state()
 	let observer: IntersectionObserver | undefined

package/dist/list/types.d.ts

@@ -6,6 +6,7 @@ interface ButtonProps extends HTMLButtonAttributes {
     end?: Snippet;
     variant: 'button';
     supportingText?: Snippet;
+    softFocus?: boolean;
 }
 interface AnchorProps extends HTMLAnchorAttributes {
     selected?: boolean;
@@ -14,6 +15,7 @@ interface AnchorProps extends HTMLAnchorAttributes {
     disabled?: boolean;
     variant: 'link';
     supportingText?: Snippet;
+    softFocus?: boolean;
 }
 interface TextProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
@@ -22,6 +24,7 @@ interface TextProps extends HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
     variant?: 'text';
     supportingText?: Snippet;
+    softFocus?: boolean;
 }
 export type ItemProps = ButtonProps | AnchorProps | TextProps;
 export type ListItemProps = ButtonProps | AnchorProps | TextProps;

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { NavigationDrawerItemProps } from './types.ts'
 	import Ripple from '../ripple/Ripple.svelte'
 
@@ -10,13 +10,6 @@
 		icon,
 		...attributes
 	}: NavigationDrawerItemProps = $props()
-
-	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
-		return (obj as HTMLAnchorAttributes).href === undefined
-	}
-	const isLink = (obj: unknown): obj is HTMLAnchorAttributes => {
-		return (obj as HTMLAnchorAttributes).href !== undefined
-	}
 </script>
 
 {#snippet content()}
@@ -30,9 +23,9 @@
 	<div class="np-navigation-drawer-item-badge">{badgeLabelText}</div>
 {/snippet}
 
-{#if isButton(attributes)}
-	<button
-		{...attributes as HTMLButtonAttributes}
+{#if 'href' in attributes}
+	<a
+		{...attributes}
 		class={[
 			'np-navigation-drawer-item',
 			selected && 'np-navigation-drawer-item-selected',
@@ -40,10 +33,10 @@
 		]}
 	>
 		{@render content()}
-	</button>
-{:else if isLink(attributes)}
-	<a
-		{...attributes}
+	</a>
+{:else}
+	<button
+		{...attributes as HTMLButtonAttributes}
 		class={[
 			'np-navigation-drawer-item',
 			selected && 'np-navigation-drawer-item-selected',
@@ -51,7 +44,7 @@
 		]}
 	>
 		{@render content()}
-	</a>
+	</button>
 {/if}
 
 <style>

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -1,17 +1,10 @@
 <script lang="ts">
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { NavigationRailItemProps } from './types.ts'
 	import Ripple from '../ripple/Ripple.svelte'
 
 	let { selected, icon, label, ...attributes }: NavigationRailItemProps = $props()
 	let touchEl: HTMLSpanElement | undefined = $state()
-
-	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
-		return (obj as HTMLAnchorAttributes).href === undefined
-	}
-	const isLink = (obj: unknown): obj is HTMLAnchorAttributes => {
-		return (obj as HTMLAnchorAttributes).href !== undefined
-	}
 </script>
 
 {#snippet content()}
@@ -23,20 +16,20 @@
 	<span class="np-touch" bind:this={touchEl}></span>
 {/snippet}
 
-{#if isButton(attributes)}
-	<button
-		{...attributes as HTMLButtonAttributes}
-		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
-	>
-		{@render content()}
-	</button>
-{:else if isLink(attributes)}
+{#if 'href' in attributes}
 	<a
 		{...attributes}
 		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
 	>
 		{@render content()}
 	</a>
+{:else}
+	<button
+		{...attributes as HTMLButtonAttributes}
+		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
+	>
+		{@render content()}
+	</button>
 {/if}
 
 <style>

package/dist/radio/Radio.svelte

@@ -11,7 +11,8 @@
 		...attributes
 	}: RadioProps = $props()
 
-	let inputEl: HTMLSpanElement | undefined = $state()
+	let inputEl = $state<HTMLInputElement>()
+	const uid = $props.id()
 </script>
 
 <label {style} class={['np-host', attributes.class]} bind:this={element}>
@@ -20,11 +21,11 @@
 			<Ripple forElement={inputEl} class="np-radio-ripple" />
 		{/if}
 		<svg class="np-radio-icon" viewBox="0 0 20 20">
-			<mask id="1">
+			<mask id="{uid}-mask">
 				<rect width="100%" height="100%" fill="white" />
 				<circle cx="10" cy="10" r="8" fill="black" />
 			</mask>
-			<circle class="outer circle" cx="10" cy="10" r="10" mask="url(#1)" />
+			<circle class="outer circle" cx="10" cy="10" r="10" mask="url(#{uid}-mask)" />
 			<circle class="inner circle" cx="10" cy="10" r="5" />
 		</svg>
 		{#if group !== undefined}

package/dist/select/Select.svelte

@@ -45,12 +45,12 @@
 			value = options.find((option) => option.selected)?.value
 		}
 	}
-	let selectedOption: SelectOption[] = $state(
+	let selectedOption: SelectOption[] = $derived(
 		options
-			.filter((option) =>
-				option.selected || Array.isArray(value)
-					? value.includes(option.value)
-					: value === option.value || false,
+			.filter(
+				(option) =>
+					option.selected ||
+					(Array.isArray(value) ? value.includes(option.value) : value === option.value),
 			)
 			.map((option) => ({ ...option, selected: true })),
 	)
@@ -59,13 +59,27 @@
 
 	let errorTextRaw: string = $state(errorText)
 	let errorRaw = $state(error)
-	let selectElement: HTMLSelectElement | undefined = $state()
-	let menuElement: HTMLDivElement | undefined = $state()
-	let anchorElement: HTMLDivElement | undefined = $state()
-	let field: HTMLDivElement | undefined = $state()
+	let selectElement = $state<HTMLSelectElement>()
+	let menuElement = $state<HTMLDivElement>()
+	let anchorElement = $state<HTMLDivElement>()
+	let field = $state<HTMLDivElement>()
 	let clientWidth = $state(0)
 	let menuOpen = $state(false)
-	let selectedLabel = $derived.by<string | string[]>(() => {
+	let focusIndex = $state(-1)
+	let typeBuffer = ''
+	let lastTypeTime = 0
+
+	let activeDescendantId = $derived.by<string | undefined>(() => {
+		if (!menuOpen) return undefined
+		if (focusIndex >= 0 && focusIndex < options.length) return `${uid}-opt-${focusIndex}`
+		const fallbackIdx = multiple
+			? Array.isArray(value) && value.length
+				? options.findIndex((o) => o.value === value[0])
+				: -1
+			: options.findIndex((o) => o.value === value)
+		return fallbackIdx >= 0 ? `${uid}-opt-${fallbackIdx}` : undefined
+	})
+	let selectedLabel = $derived.by<string>(() => {
 		if (multiple) {
 			if (value && Array.isArray(value)) {
 				return value
@@ -143,6 +157,82 @@
 			selectElement?.dispatchEvent(new Event('change', { bubbles: true }))
 		})
 	}
+
+	const openMenuAndFocus = async (index: number) => {
+		if (!menuOpen) {
+			menuElement?.showPopover()
+		}
+		focusIndex = Math.min(Math.max(index, 0), options.length - 1)
+		await tick()
+		const el = document.getElementById(`${uid}-opt-${focusIndex}`)
+		;(el as HTMLElement | null)?.focus?.()
+	}
+
+	const moveFocus = (delta: number) => {
+		if (!options.length) return
+		let next = focusIndex
+		if (next < 0) {
+			const selIdx = Array.isArray(value)
+				? options.findIndex((o) => value.includes(o.value) && !o.disabled)
+				: options.findIndex((o) => o.value === value && !o.disabled)
+			next = selIdx >= 0 ? selIdx : 0
+		}
+		let attempts = 0
+		while (attempts < options.length) {
+			next = (next + delta + options.length) % options.length
+			if (!options[next].disabled) {
+				openMenuAndFocus(next)
+				return
+			}
+			attempts++
+		}
+	}
+
+	const focusEdge = (start: boolean) => {
+		if (!options.length) {
+			return
+		}
+		if (start) {
+			for (let i = 0; i < options.length; i++) {
+				if (!options[i].disabled) {
+					openMenuAndFocus(i)
+					return
+				}
+			}
+		} else {
+			for (let i = options.length - 1; i >= 0; i--) {
+				if (!options[i].disabled) {
+					openMenuAndFocus(i)
+					return
+				}
+			}
+		}
+	}
+
+	const performTypeahead = (char: string) => {
+		const now = performance.now()
+		if (now - lastTypeTime > 700) typeBuffer = ''
+		lastTypeTime = now
+		typeBuffer += char.toLowerCase()
+		if (!options.length) {
+			return
+		}
+		const startIdx = focusIndex >= 0 ? (focusIndex + 1) % options.length : 0
+		for (let i = 0; i < options.length; i++) {
+			const idx = (startIdx + i) % options.length
+			const label = options[idx].label?.toLowerCase?.() || ''
+			if (label.startsWith(typeBuffer) && !options[idx].disabled) {
+				openMenuAndFocus(idx)
+				return
+			}
+		}
+
+		if (typeBuffer.length > 1) {
+			const last = typeBuffer[typeBuffer.length - 1]
+			typeBuffer = last
+			performTypeahead('')
+		}
+	}
 </script>
 
 {#snippet arrows()}
@@ -175,10 +265,11 @@
 		role="combobox"
 		aria-haspopup="listbox"
 		tabindex={disabled ? -1 : tabindex}
-		aria-controls="listbox"
+		aria-controls="listbox-{uid}"
 		aria-expanded={menuOpen}
 		aria-label={attributes['aria-label'] || label}
 		aria-disabled={disabled}
+		aria-activedescendant={activeDescendantId}
 		data-testid={attributes['data-testid']}
 		bind:this={field}
 		bind:clientWidth
@@ -192,19 +283,51 @@
 			}
 		}}
 		onkeydown={(event) => {
-			if (event.key === 'Tab' || event.key === 'Escape') {
+			const key = event.key
+			if (key === 'Tab') {
 				menuElement?.hidePopover()
-			} else {
+				return
+			}
+			if (key === 'Escape') {
+				menuElement?.hidePopover()
+				return
+			}
+			if (key === 'ArrowDown') {
 				event.preventDefault()
-				if (
-					event.key === 'ArrowDown' ||
-					event.key === 'ArrowUp' ||
-					event.key === 'Enter' ||
-					event.key === ' '
-				) {
-					menuElement?.showPopover()
-					;(menuElement?.firstElementChild?.firstElementChild as HTMLElement)?.focus()
+				moveFocus(1)
+				return
+			}
+			if (key === 'ArrowUp') {
+				event.preventDefault()
+				moveFocus(-1)
+				return
+			}
+			if (key === 'Home') {
+				event.preventDefault()
+				focusEdge(true)
+				return
+			}
+			if (key === 'End') {
+				event.preventDefault()
+				focusEdge(false)
+				return
+			}
+			if (key === 'Enter' || key === ' ') {
+				event.preventDefault()
+				if (!menuOpen) {
+					openMenuAndFocus(focusIndex >= 0 ? focusIndex : 0)
+				} else if (focusIndex >= 0) {
+					const opt = options[focusIndex]
+					if (opt && !opt.disabled) {
+						handleOptionSelect(event, opt)
+					}
 				}
+				return
+			}
+			// Printable character for typeahead
+			if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+				performTypeahead(key)
+				return
 			}
 		}}
 	>
@@ -222,7 +345,7 @@
 							<span class={['label', !noAsterisk && required && 'required']}>{label}</span>
 						</div>
 						<div class="outline-notch">
-							<span class="notch np-hidden" aria-hidden="true"
+							<span class="notch" aria-hidden="true"
 								>{label}{noAsterisk || !required ? '' : '*'}</span
 							>
 						</div>
@@ -334,33 +457,44 @@
 	</div>
 </div>
 
-{#snippet item(option: SelectOption)}
+{#snippet item(option: SelectOption, index: number)}
 	{#if Array.isArray(value) && multiple}
 		<Item
+			id="{uid}-opt-{index}"
 			onclick={(event) => {
 				handleOptionSelect(event, option)
 				field?.focus()
 			}}
+			tabindex={-1}
 			disabled={option.disabled}
+			aria-disabled={option.disabled}
 			role="option"
 			onkeydown={(event) => {
-				if (event.key === 'ArrowDown') {
-					;(event.currentTarget?.nextElementSibling as HTMLElement)?.focus()
+				const key = event.key
+				if (key === 'ArrowDown') {
 					event.preventDefault()
-				}
-				if (event.key === 'ArrowUp') {
-					;(event.currentTarget?.previousElementSibling as HTMLElement)?.focus()
+					moveFocus(1)
+				} else if (key === 'ArrowUp') {
+					event.preventDefault()
+					moveFocus(-1)
+				} else if (key === 'Home') {
+					event.preventDefault()
+					focusEdge(true)
+				} else if (key === 'End') {
+					event.preventDefault()
+					focusEdge(false)
+				} else if (key === 'Enter' || key === ' ') {
 					event.preventDefault()
-				}
-				if (event.key === 'Enter') {
 					handleOptionSelect(event, option)
-				}
-				if (event.key === 'Tab') {
+				} else if (key === 'Tab') {
 					menuElement?.hidePopover()
+				} else if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+					performTypeahead(key)
 				}
 			}}
 			variant="button"
 			selected={Array.isArray(value) ? value.includes(option.value) : value === option.value}
+			aria-selected={Array.isArray(value) ? value.includes(option.value) : value === option.value}
 			>{option.label}
 			{#snippet start()}
 				<Check disabled={option.disabled} checked={value.includes(option.value)} />
@@ -368,40 +502,53 @@
 		</Item>
 	{:else}
 		<Item
+			id="{uid}-opt-{index}"
 			onclick={(event) => {
 				handleOptionSelect(event, option)
 				field?.focus()
 			}}
+			tabindex={-1}
 			disabled={option.disabled}
+			aria-disabled={option.disabled}
 			role="option"
 			onkeydown={(event) => {
-				if (event.key === 'ArrowDown') {
-					;(event.currentTarget?.nextElementSibling as HTMLElement)?.focus()
+				const key = event.key
+				if (key === 'ArrowDown') {
 					event.preventDefault()
-				}
-				if (event.key === 'ArrowUp') {
-					;(event.currentTarget?.previousElementSibling as HTMLElement)?.focus()
+					moveFocus(1)
+				} else if (key === 'ArrowUp') {
+					event.preventDefault()
+					moveFocus(-1)
+				} else if (key === 'Home') {
+					event.preventDefault()
+					focusEdge(true)
+				} else if (key === 'End') {
+					event.preventDefault()
+					focusEdge(false)
+				} else if (key === 'Enter' || key === ' ') {
 					event.preventDefault()
-				}
-				if (event.key === 'Enter') {
 					handleOptionSelect(event, option)
-				}
-				if (event.key === 'Tab') {
+				} else if (key === 'Tab') {
 					menuElement?.hidePopover()
+				} else if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+					performTypeahead(key)
 				}
 			}}
 			variant="button"
 			selected={Array.isArray(value) ? value.includes(option.value) : value === option.value}
+			aria-selected={Array.isArray(value) ? value.includes(option.value) : value === option.value}
 			>{option.label}
 		</Item>
 	{/if}
 {/snippet}
 
 <Menu
+	id="listbox-{uid}"
 	style="position-anchor:--{uid};{clampMenuWidth || useVirtualList
 		? 'width'
 		: 'min-width'}:{clientWidth}px"
 	role="listbox"
+	aria-multiselectable={multiple}
 	--np-menu-justify-self="none"
 	--np-menu-position-area="bottom span-right"
 	--np-menu-margin="2px 0"
@@ -409,24 +556,41 @@
 		? 'var(--np-outlined-select-text-field-container-shape)'
 		: 'var(--np-filled-select-text-field-container-shape)'}
 	anchor={anchorElement}
-	ontoggle={({ newState }) => {
+	ontoggle={async ({ newState }) => {
 		if (newState === 'open') {
 			menuOpen = true
+			let idx = -1
+			if (multiple) {
+				if (Array.isArray(value) && value.length) {
+					idx = options.findIndex((o) => value.includes(o.value) && !o.disabled)
+				}
+			} else {
+				idx = options.findIndex((o) => o.value === value && !o.disabled)
+			}
+			if (idx < 0) {
+				idx = options.findIndex((o) => !o.disabled)
+			}
+			if (idx < 0) idx = 0
+			focusIndex = idx
+			await tick()
+			const el = document.getElementById(`${uid}-opt-${focusIndex}`)
+			;(el as HTMLElement | null)?.focus?.()
 		} else {
 			menuOpen = false
+			focusIndex = -1
 		}
 	}}
 	bind:element={menuElement}
 >
 	{#if useVirtualList}
 		<VirtualList height="250px" itemHeight={48} items={options}>
-			{#snippet row(option)}
-				{@render item(option)}
+			{#snippet row(option, index)}
+				{@render item(option, index)}
 			{/snippet}
 		</VirtualList>
 	{:else}
 		{#each options as option, index (index)}
-			{@render item(option)}
+			{@render item(option, index)}
 		{/each}
 	{/if}
 </Menu>
@@ -763,12 +927,6 @@
 	.notch {
 		font-size: 0.75rem;
 		line-height: 1rem;
-	}
-	.notch.np-hidden {
-		opacity: 0;
-	}
-
-	.label.np-hidden {
 		opacity: 0;
 	}
 
@@ -828,7 +986,7 @@
 	.disabled .label {
 		color: var(--np-color-on-surface);
 	}
-	.disabled .label:not(.np-hidden) {
+	.disabled {
 		opacity: 0.38;
 	}
 	.resizable:not(.disabled) .np-container {

package/dist/select/VirtualList.svelte

@@ -2,13 +2,14 @@
 	import { onMount, tick, type Snippet } from 'svelte'
 	import type { HTMLAttributes } from 'svelte/elements'
 
-	interface VitualListProps extends HTMLAttributes<HTMLDivElement> {
+	interface VirtualListProps extends HTMLAttributes<HTMLDivElement> {
 		items: T[]
 		height?: string
 		itemHeight?: number
 		start?: number
 		end?: number
-		row: Snippet<[T]>
+		row: Snippet<[T, number]>
+		overscan?: number
 	}
 
 	let {
@@ -18,7 +19,8 @@
 		start = $bindable(0),
 		end = $bindable(0),
 		row,
-	}: VitualListProps = $props()
+		overscan = 4,
+	}: VirtualListProps = $props()
 
 	let height_map: number[] = []
 	// eslint-disable-next-line no-undef
@@ -30,7 +32,7 @@
 
 	let top = $state(0)
 	let bottom = $state(0)
-	let average_height: number = $state(0)
+	let average_height: number = $state(itemHeight || 0)
 
 	$effect(() => {
 		if (mounted) {
@@ -38,9 +40,10 @@
 		}
 	})
 	let visible = $derived(
-		items.slice(start, end).map((data, i) => {
-			return { index: i + start, data }
-		}),
+		items.slice(Math.max(0, start - overscan), end).map((data, i) => ({
+			index: i + Math.max(0, start - overscan),
+			data,
+		})),
 	)
 
 	async function refresh(items: T[], viewport_height: number, itemHeight?: number) {
@@ -68,10 +71,11 @@
 			i += 1
 		}
 
+		i = Math.min(i + overscan, items.length)
 		end = i
 
 		const remaining = items.length - end
-		average_height = (top + content_height) / end
+		average_height = end ? (top + content_height) / end : average_height || itemHeight || 0
 
 		bottom = remaining * average_height
 		height_map.length = items.length
@@ -98,14 +102,24 @@
 			if (y + row_height > scrollTop) {
 				start = i
 				top = y
-
 				break
 			}
-
 			y += row_height
 			i += 1
 		}
 
+		if (start > 0 && overscan > 0) {
+			let back = 0
+			let s = start
+			while (s > 0 && back < overscan) {
+				s -= 1
+				const h = height_map[s] || average_height
+				back += 1
+				top -= h
+			}
+			start = s
+		}
+
 		while (i < items.length) {
 			y += height_map[i] || average_height
 			i += 1
@@ -116,7 +130,7 @@
 		end = i
 
 		const remaining = items.length - end
-		average_height = y / end
+		average_height = end ? y / end : average_height || itemHeight || 0
 
 		height_map.fill(average_height, i, items.length)
 		bottom = remaining * average_height
@@ -137,13 +151,8 @@
 			const d = actual_height - expected_height
 			viewport.scrollTo(0, scrollTop + d)
 		}
-
-		// TODO if we overestimated the space these
-		// rows would occupy we may need to add some
-		// more. maybe we can just call handle_scroll again?
 	}
 
-	// trigger initial refresh
 	onMount(() => {
 		// eslint-disable-next-line no-undef
 		rows = contents?.children as HTMLCollectionOf<HTMLElement>
@@ -159,7 +168,7 @@
 >
 	<div bind:this={contents} style="padding-top: {top}px; padding-bottom: {bottom}px;">
 		{#each visible as entry (entry.index)}
-			{@render row(entry.data)}
+			{@render row(entry.data, entry.index)}
 		{/each}
 	</div>
 </svelte-virtual-list-viewport>

package/dist/select/VirtualList.svelte.d.ts

@@ -7,7 +7,8 @@ declare function $$render<T>(): {
         itemHeight?: number;
         start?: number;
         end?: number;
-        row: Snippet<[T]>;
+        row: Snippet<[T, number]>;
+        overscan?: number;
     };
     exports: {};
     bindings: "start" | "end";

package/dist/snackbar/Snackbar.svelte

@@ -22,6 +22,7 @@
 	}: SnackbarProps = $props()
 
 	let timeoutId: number | undefined = $state()
+	const uid = $props.id()
 
 	showPopover = () => {
 		element?.showPopover()
@@ -38,7 +39,7 @@
 	class={['np-snackbar', attributes.class]}
 	bind:this={element}
 	role="alert"
-	aria-label={label}
+	aria-labelledby="np-snackbar-label-{uid}"
 	onbeforetoggle={(event) => {
 		let { newState } = event
 		if (newState === 'closed') {
@@ -54,7 +55,7 @@
 >
 	<div class="np-snackbar-inner">
 		<div class="np-snackbar-label-container">
-			<div class="np-snackbar-label">{label}</div>
+			<div id="np-snackbar-label-{uid}" class="np-snackbar-label">{label}</div>
 			{#if supportingText}
 				<div class="np-snackbar-supporting-text">{supportingText}</div>
 			{/if}

package/package.json

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