noph-ui 0.44.0 → 0.45.1

package/dist/snackbar/Snackbar.svelte

@@ -1,47 +1,46 @@
 <script lang="ts">
 	import Button from '../button/Button.svelte'
 	import IconButton from '../button/IconButton.svelte'
+	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
 	import type { SnackbarProps } from './types.js'
 
 	let {
 		label,
 		supportingText,
 		actionLabel,
-		onActionClick,
+		onactionclick,
 		icon,
-		onIconClick = () => {
-			element?.hidePopover()
-		},
+		iconAriaLabel = 'Close',
+		oniconclick = () => close(),
 		open = $bindable(false),
-		onbeforetoggle,
+		ontoggle,
 		timeout = 4000,
 		element = $bindable(),
 		popover = 'manual',
 		...attributes
 	}: SnackbarProps = $props()
 
-	let timeoutId: ReturnType<typeof setTimeout> | undefined
-	const uid = $props.id()
-
-	export const showPopover = () => {
-		element?.showPopover()
-	}
+	let hovered = $state(false)
+	let focused = $state(false)
 
-	export const hidePopover = () => {
-		element?.hidePopover()
-	}
+	const uid = $props.id()
+	const controller = popoverController(() => element)
 
-	const startTimer = () => {
-		clearTimeout(timeoutId)
-		if (!open || timeout <= 0) return
-		timeoutId = setTimeout(() => {
-			element?.hidePopover()
-		}, timeout)
-	}
+	export const show = () => controller.show()
+	export const close = () => controller.close()
 
-	const pauseTimer = () => clearTimeout(timeoutId)
+	syncOpenEffect(
+		() => element,
+		() => open,
+		show,
+		close,
+	)
 
-	$effect(() => () => clearTimeout(timeoutId))
+	$effect(() => {
+		if (!open || hovered || focused || timeout <= 0) return
+		const timeoutId = setTimeout(close, timeout)
+		return () => clearTimeout(timeoutId)
+	})
 </script>
 
 <div
@@ -51,15 +50,13 @@
 	bind:this={element}
 	role="alert"
 	aria-labelledby="np-snackbar-label-{uid}"
-	onpointerenter={pauseTimer}
-	onpointerleave={startTimer}
-	onfocusin={pauseTimer}
-	onfocusout={startTimer}
-	onbeforetoggle={(event) => {
-		let { newState } = event
-		open = newState === 'open'
-		startTimer()
-		onbeforetoggle?.(event)
+	onpointerenter={() => (hovered = true)}
+	onpointerleave={() => (hovered = false)}
+	onfocusin={() => (focused = true)}
+	onfocusout={() => (focused = false)}
+	ontoggle={(event) => {
+		open = event.newState === 'open'
+		ontoggle?.(event)
 	}}
 >
 	<div class="np-snackbar-inner">
@@ -74,7 +71,7 @@
 				variant="text"
 				--np-text-button-label-text-color="var(--np-snackbar-action-color, var(--np-color-inverse-primary))"
 				aria-label={actionLabel}
-				onclick={onActionClick}
+				onclick={onactionclick}
 			>
 				{actionLabel}
 			</Button>
@@ -83,8 +80,8 @@
 			<div class="np-snackbar-icon-container">
 				<IconButton
 					--np-icon-button-icon-color="var(--np-snackbar-text-color, var(--np-color-inverse-on-surface))"
-					aria-label="Close"
-					onclick={onIconClick}
+					aria-label={iconAriaLabel}
+					onclick={oniconclick}
 				>
 					{@render icon()}</IconButton
 				>

package/dist/snackbar/Snackbar.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { SnackbarProps } from './types.ts';
 declare const Snackbar: import("svelte").Component<SnackbarProps, {
-    showPopover: () => void;
-    hidePopover: () => void;
+    show: () => void;
+    close: () => void;
 }, "element" | "open">;
 type Snackbar = ReturnType<typeof Snackbar>;
 export default Snackbar;

package/dist/snackbar/types.d.ts

@@ -5,9 +5,10 @@ export interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     supportingText?: string | undefined;
     actionLabel?: string | undefined;
-    onActionClick?: (event: Event) => void;
+    onactionclick?: (event: Event) => void;
     icon?: Snippet | undefined;
-    onIconClick?: (event: Event) => void;
+    oniconclick?: (event: Event) => void;
+    iconAriaLabel?: string;
     timeout?: number;
     element?: HTMLElement;
     popover?: 'auto' | 'manual';

package/dist/switch/Switch.svelte

@@ -10,11 +10,23 @@
 		inputElement = $bindable(),
 		icons,
 		onkeyup,
+		issues,
+		'aria-invalid': ariaInvalid,
 		...attributes
 	}: SwitchProps = $props()
+
+	let hasError = $derived(!!issues?.length)
 </script>
 
-<div bind:this={element} class={['np-switch', disabled && 'np-disabled', attributes.class]}>
+<div
+	bind:this={element}
+	class={[
+		'np-switch',
+		disabled && 'np-disabled',
+		hasError && !disabled && 'np-error',
+		attributes.class,
+	]}
+>
 	<div class="np-track"></div>
 	<div class={['np-handle', icons === 'both' && 'both-icons']}>
 		{#if icons}
@@ -57,6 +69,7 @@
 		bind:this={inputElement}
 		bind:checked={selected}
 		{disabled}
+		aria-invalid={hasError ? 'true' : ariaInvalid}
 	/>
 </div>
 
@@ -78,7 +91,7 @@
 		width: 3.25rem;
 		height: 2rem;
 		background-color: var(
-			--np-comp-switch-unselected-track-color,
+			--np-switch-unselected-track-color,
 			var(--np-color-surface-container-highest)
 		);
 		border-radius: var(--np-shape-corner-full);
@@ -86,7 +99,7 @@
 			background-color 0.2s,
 			outline-color 0.2s;
 		outline-width: 0.125rem;
-		outline-color: var(--np-comp-switch-unselected-track-outline-color, var(--np-color-outline));
+		outline-color: var(--np-switch-unselected-track-outline-color, var(--np-color-outline));
 		outline-style: solid;
 		outline-offset: -0.125rem;
 	}
@@ -100,8 +113,8 @@
 		transition:
 			transform var(--np-motion-expressive-fast-spatial),
 			background-color var(--np-motion-expressive-default-effects);
-		background-color: var(--np-comp-switch-unselected-handle-color, var(--np-color-outline));
-		border-radius: var(--np-comp-switch-handle-shape, var(--np-shape-corner-full));
+		background-color: var(--np-switch-unselected-handle-color, var(--np-color-outline));
+		border-radius: var(--np-switch-handle-shape, var(--np-shape-corner-full));
 	}
 
 	.np-handle.both-icons {
@@ -110,12 +123,12 @@
 
 	.np-state-layer {
 		position: relative;
-		width: var(--np-comp-switch-state-layer-size, 2.5rem);
-		height: var(--np-comp-switch-state-layer-size, 2.5rem);
+		width: var(--np-switch-state-layer-size, 2.5rem);
+		height: var(--np-switch-state-layer-size, 2.5rem);
 		margin-block-start: -0.25rem;
 		margin-inline-start: -0.25rem;
 		transition: var(--np-motion-expressive-fast-spatial);
-		border-radius: var(--np-comp-switch-state-layer-shape, var(--np-shape-corner-full));
+		border-radius: var(--np-switch-state-layer-shape, var(--np-shape-corner-full));
 	}
 
 	.np-switch:has(input:checked) .np-state-layer {
@@ -152,37 +165,55 @@
 
 	.np-switch:has(input:checked) .np-handle {
 		transform: translateX(1.25rem) scale(1.5);
-		color: var(--np-comp-switch-selected-icon-color, var(--np-color-primary));
-		background-color: var(--np-comp-switch-selected-handle-color, var(--np-color-on-primary));
+		color: var(--np-switch-selected-icon-color, var(--np-color-primary));
+		background-color: var(--np-switch-selected-handle-color, var(--np-color-on-primary));
 	}
 
 	.np-disabled .np-handle {
-		opacity: var(--np-comp-switch-disabled-unselected-handle-opacity, 0.38);
+		opacity: var(--np-switch-disabled-unselected-handle-opacity, 0.38);
 	}
 
 	.np-switch.np-disabled:has(input:checked) .np-handle {
-		opacity: var(--np-comp-switch-disabled-selected-handle-opacity, 1);
-		background-color: var(--np-comp-switch-selected-handle-color, var(--np-color-surface));
+		opacity: var(--np-switch-disabled-selected-handle-opacity, 1);
+		background-color: var(--np-switch-selected-handle-color, var(--np-color-surface));
 	}
 
 	.np-switch:has(input:checked) .np-track {
-		background-color: var(--np-comp-switch-selected-track-color, var(--np-color-primary));
+		background-color: var(--np-switch-selected-track-color, var(--np-color-primary));
 		outline-color: transparent;
 	}
 
+	.np-error .np-track {
+		outline-color: var(--np-color-error);
+	}
+
+	.np-error:has(input:checked) .np-track {
+		background-color: var(--np-color-error);
+	}
+
+	.np-error:has(input:checked) .np-handle {
+		background-color: var(--np-color-on-error);
+	}
+
+	.np-error:has(input:checked) .np-switch-icon {
+		fill: var(--np-color-error);
+	}
+
+	.np-error {
+		--np-ripple-hover-color: var(--np-color-error);
+		--np-ripple-pressed-color: var(--np-color-error);
+	}
+
 	.np-disabled .np-track {
-		opacity: var(--np-comp-switch-disabled-track-opacity, 0.12);
+		opacity: var(--np-switch-disabled-track-opacity, 0.12);
 		background-color: var(
-			--np-comp-switch-disabled-unselected-track-color,
+			--np-switch-disabled-unselected-track-color,
 			var(--np-color-surface-container-highest)
 		);
 	}
 
 	.np-switch.np-disabled:has(input:checked) .np-track {
-		background-color: var(
-			--np-comp-switch-disabled-selected-track-color,
-			var(--np-color-on-surface)
-		);
+		background-color: var(--np-switch-disabled-selected-track-color, var(--np-color-on-surface));
 	}
 
 	.np-disabled {

package/dist/switch/types.d.ts

@@ -5,4 +5,7 @@ export interface SwitchProps extends Omit<HTMLInputAttributes, 'type' | 'role' |
     icons?: 'selected' | 'both';
     inputElement?: HTMLInputElement;
     element?: HTMLDivElement;
+    issues?: {
+        message: string;
+    }[];
 }

package/dist/tabs/Tab.svelte

@@ -2,7 +2,6 @@
 	import '../internal/focus-ring.css'
 	import Badge from '../badge/Badge.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import { tick } from 'svelte'
 	import { getTabsContext } from './context.js'
 	import type { TabProps } from './types.js'
 
@@ -29,11 +28,6 @@
 			tabsContext.indicatorValue = value
 		}
 	})
-
-	const setIndicatorValue = async () => {
-		await tick()
-		tabsContext.indicatorValue = value
-	}
 </script>
 
 {#snippet content()}
@@ -47,7 +41,7 @@
 			{#if icon}
 				{#if badge && tabsContext.variant === 'primary' && !inlineIcon}
 					<div class="np-tab-icon-badge">
-						<Badge label={badgeLabel} ariaLabel={badgeAriaLabel} />
+						<Badge label={badgeLabel} aria-label={badgeAriaLabel} />
 						{@render icon?.()}
 					</div>
 				{:else}
@@ -58,7 +52,7 @@
 				<div style="--np-badge-position:static;">
 					<span class="np-tab-label-badge">{@render children?.()}</span><Badge
 						label={badgeLabel}
-						ariaLabel={badgeAriaLabel}
+						aria-label={badgeAriaLabel}
 					/>
 				</div>
 			{:else}
@@ -116,13 +110,11 @@
 		]}
 		onclick={(event) => {
 			tabsContext.value = value
-			setIndicatorValue()
 			onclick?.(event)
 		}}
 		onkeydown={(event) => {
 			if (event.key === 'Enter' || event.key === ' ') {
 				tabsContext.value = value
-				setIndicatorValue()
 			}
 			onkeydown?.(event)
 		}}
@@ -205,8 +197,8 @@
 	@supports not (anchor-name: --np-tab-indicator) {
 		.np-tab-content-active .np-indicator {
 			background-color: var(--np-color-primary);
-			border-start-start-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
-			border-start-end-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
+			border-start-start-radius: var(--np-tabs-indicator-radius, var(--np-shape-corner-full));
+			border-start-end-radius: var(--np-tabs-indicator-radius, var(--np-shape-corner-full));
 		}
 	}
 

package/dist/tabs/Tabs.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import Divider from '../divider/Divider.svelte'
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import { setTabsContext } from './context.js'
@@ -12,11 +13,10 @@
 		...attributes
 	}: TabsProps = $props()
 
-	// svelte-ignore state_referenced_locally
 	let tabsContext = $state<TabsContext>({
 		value,
 		indicatorValue: value,
-		variant,
+		variant: untrack(() => variant),
 	})
 	$effect(() => {
 		value = tabsContext.value
@@ -30,7 +30,7 @@
 
 	const secondaryStyle = $derived(
 		tabsContext.variant === 'secondary'
-			? '--np-indicator-radius: 0;--_indicator-gap: 0;--_indicator-height: 2px'
+			? '--np-tabs-indicator-radius: 0;--_indicator-gap: 0;--_indicator-height: 2px'
 			: '',
 	)
 
@@ -77,8 +77,8 @@
 			right: anchor(right);
 			bottom: anchor(bottom);
 			background-color: var(--np-color-primary);
-			border-start-start-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
-			border-start-end-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
+			border-start-start-radius: var(--np-tabs-indicator-radius, var(--np-shape-corner-full));
+			border-start-end-radius: var(--np-tabs-indicator-radius, var(--np-shape-corner-full));
 			position-anchor: --np-tab-indicator;
 
 			@media (prefers-reduced-motion: no-preference) {

package/dist/text-field/TextField.svelte

@@ -33,8 +33,6 @@
 	const uid = $props.id()
 	let errorText = $derived(issues?.map((issue) => issue.message).join(', '))
 
-	// Merged rather than set before the spread, so a consumer's own aria wiring adds to the
-	// supporting-text wiring instead of silently replacing it.
 	const supportingTextId = `supporting-text-${uid}`
 	const ids = (...values: (string | undefined | null | false)[]) =>
 		values.filter(Boolean).join(' ') || undefined
@@ -54,7 +52,7 @@
 				(children ? '--top-space:2rem;--bottom-space:1rem;' : '')) +
 		`--_min-height:calc(${minLines} * 1lh);--_max-height:${`calc(${maxLines} * 1lh)`};` +
 		style}
-	class={['text-field', attributes.class]}
+	class={['np-text-field', attributes.class]}
 	bind:this={element}
 	bind:clientWidth
 	bind:clientHeight
@@ -279,7 +277,7 @@
 		height: 100%;
 		position: relative;
 	}
-	.text-field {
+	.np-text-field {
 		display: inline-flex;
 		text-align: start;
 	}

package/dist/toolbar/Toolbar.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import type { ToolbarProps } from './types.js'
+
+	let {
+		variant = 'docked',
+		placement = 'bottom',
+		orientation = 'horizontal',
+		color = 'standard',
+		children,
+		element = $bindable(),
+		onkeydown: userKeydown,
+		...attributes
+	}: ToolbarProps = $props()
+
+	const ITEMS = 'button, a[href], input:not([type="hidden"])'
+	const attach = rovingTabindex(ITEMS)
+	const arrowHandler = $derived(arrowKeyNav(ITEMS, orientation))
+
+	const handleKeydown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
+		userKeydown?.(event)
+		if (!event.defaultPrevented) arrowHandler(event)
+	}
+</script>
+
+<div
+	{...attributes}
+	{@attach attach}
+	bind:this={element}
+	role="toolbar"
+	aria-orientation={orientation}
+	class={[
+		'np-toolbar',
+		`np-toolbar-${variant}`,
+		variant === 'floating' && `np-toolbar-${placement}`,
+		variant === 'floating' && color === 'vibrant' && 'np-toolbar-vibrant',
+		orientation === 'vertical' && 'np-toolbar-vertical',
+		attributes.class,
+	]}
+	onkeydown={handleKeydown}
+>
+	{@render children?.()}
+</div>
+
+<style>
+	.np-toolbar {
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+		gap: var(--np-toolbar-gap, 0.25rem);
+		color: var(--np-toolbar-color, var(--np-color-on-surface));
+		--np-icon-button-icon-color: var(--np-toolbar-color, var(--np-color-on-surface-variant));
+	}
+
+	.np-toolbar-vertical {
+		flex-direction: column;
+		--np-tooltip-position-area: inline-end;
+		--np-tooltip-justify-self: auto;
+		--np-tooltip-align-self: anchor-center;
+		--np-tooltip-margin: 0 4px;
+		--np-tooltip-position-try-fallbacks: flip-inline;
+		--np-rich-tooltip-position-area: inline-end;
+		--np-rich-tooltip-justify-self: auto;
+		--np-rich-tooltip-align-self: anchor-center;
+		--np-rich-tooltip-margin: 0 4px;
+		--np-rich-tooltip-position-try-fallbacks: flip-inline;
+	}
+
+	.np-toolbar-docked {
+		width: 100%;
+		min-height: 4rem;
+		justify-content: center;
+		padding-inline: 0.5rem;
+		background-color: var(--np-toolbar-container-color, var(--np-color-surface-container));
+		padding-block-end: max(0px, env(safe-area-inset-bottom));
+	}
+	.np-toolbar-docked.np-toolbar-vertical {
+		width: auto;
+		height: 100%;
+		min-height: 0;
+		min-width: 4rem;
+		padding-block: 0.5rem;
+		padding-inline: 0;
+	}
+
+	.np-toolbar-floating {
+		position: sticky;
+		z-index: 8;
+		width: fit-content;
+		margin-inline: auto;
+		padding: 0.5rem;
+		border-radius: var(--np-toolbar-shape, var(--np-shape-corner-full));
+		background-color: var(--np-toolbar-container-color, var(--np-color-surface-container));
+		box-shadow: var(--np-toolbar-elevation, var(--np-elevation-3));
+	}
+
+	.np-toolbar-bottom {
+		inset-block-end: var(--np-toolbar-inset, 1rem);
+	}
+	.np-toolbar-top {
+		inset-block-start: var(--np-toolbar-inset, 1rem);
+	}
+	.np-toolbar-start,
+	.np-toolbar-end {
+		margin-inline: 0;
+		margin-block: auto;
+	}
+	.np-toolbar-start {
+		inset-inline-start: var(--np-toolbar-inset, 1rem);
+	}
+	.np-toolbar-end {
+		inset-inline-end: var(--np-toolbar-inset, 1rem);
+		margin-inline-start: auto;
+	}
+
+	.np-toolbar-vibrant {
+		background-color: var(--np-toolbar-container-color, var(--np-color-primary-container));
+		--np-toolbar-color: var(--np-color-on-primary-container);
+		color: var(--np-toolbar-color);
+	}
+</style>

package/dist/toolbar/Toolbar.svelte.d.ts

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

package/dist/toolbar/index.d.ts

@@ -0,0 +1 @@
+export { default as Toolbar } from './Toolbar.svelte';

package/dist/toolbar/index.js

@@ -0,0 +1 @@
+export { default as Toolbar } from './Toolbar.svelte';

package/dist/toolbar/types.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ToolbarProps extends HTMLAttributes<HTMLElement> {
+    variant?: 'docked' | 'floating';
+    placement?: 'bottom' | 'top' | 'start' | 'end';
+    orientation?: 'horizontal' | 'vertical';
+    color?: 'standard' | 'vibrant';
+    element?: HTMLElement;
+}

package/dist/toolbar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/tooltip/RichTooltip.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
 	import type { RichTooltipProps } from './types.js'
 
 	let {
@@ -13,23 +14,27 @@
 	}: RichTooltipProps = $props()
 
 	const findControl = () =>
-		id ? (document.querySelector<HTMLElement>(`[popovertarget="${id}"]`) ?? undefined) : undefined
+		id
+			? (document.querySelector<HTMLElement>(`[commandfor="${id}"], [popovertarget="${id}"]`) ??
+				undefined)
+			: undefined
 
-	export const showPopover = () => {
+	const controller = popoverController(() => element)
+
+	export const show = () => {
 		if (!element || element.matches(':popover-open')) return
 		const source = findControl()
 		element.showPopover(source ? { source } : undefined)
 	}
 
-	export const hidePopover = () => {
-		element?.hidePopover()
-	}
+	export const close = () => controller.close()
 
-	$effect(() => {
-		if (!element) return
-		if (open === true) showPopover()
-		else if (open === false) hidePopover()
-	})
+	syncOpenEffect(
+		() => element,
+		() => open,
+		show,
+		close,
+	)
 </script>
 
 <div
@@ -68,7 +73,7 @@
 		max-width: 20rem;
 		word-wrap: break-word;
 		overflow-wrap: break-word;
-		margin: 4px 0;
+		margin: var(--np-rich-tooltip-margin, 4px 0);
 		padding: 0.25rem 1rem;
 		border: none;
 		border-radius: var(--np-shape-corner-medium);
@@ -78,8 +83,9 @@
 		font-size: 0.875rem;
 		line-height: 1.25rem;
 		justify-self: var(--np-rich-tooltip-justify-self, anchor-center);
+		align-self: var(--np-rich-tooltip-align-self, auto);
 		position-area: var(--np-rich-tooltip-position-area, bottom);
-		position-try-fallbacks: flip-block;
+		position-try-fallbacks: var(--np-rich-tooltip-position-try-fallbacks, flip-block);
 	}
 	.np-rich-tooltip-with-subhead[popover] {
 		padding-block: 0.75rem 1rem;

package/dist/tooltip/RichTooltip.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { RichTooltipProps } from './types.ts';
 declare const RichTooltip: import("svelte").Component<RichTooltipProps, {
-    showPopover: () => void;
-    hidePopover: () => void;
+    show: () => void;
+    close: () => void;
 }, "element" | "open">;
 type RichTooltip = ReturnType<typeof RichTooltip>;
 export default RichTooltip;