noph-ui 0.44.0 → 0.45.1

package/dist/navigation-bar/NavigationBarItem.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+	import '../internal/focus-ring.css'
+	import Badge from '../badge/Badge.svelte'
+	import Ripple from '../ripple/Ripple.svelte'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
+	import type { NavigationBarItemProps } from './types.js'
+
+	let {
+		selected = false,
+		icon,
+		label,
+		badge = false,
+		badgeLabel,
+		badgeAriaLabel,
+		labelBehavior = 'always',
+		orientation = 'vertical',
+		element = $bindable(),
+		...attributes
+	}: NavigationBarItemProps = $props()
+
+	let touchEl: HTMLSpanElement | undefined = $state()
+
+	const isLink = $derived(attributes.href != null)
+	const classes = $derived([
+		'np-navigation-bar-item',
+		selected && 'np-navigation-bar-item-selected',
+		labelBehavior === 'selected' && 'np-navigation-bar-item-label-selected',
+		orientation === 'horizontal' && 'np-navigation-bar-item-horizontal',
+		attributes.class,
+	])
+</script>
+
+{#snippet content()}
+	{#if orientation === 'horizontal'}
+		<Ripple forElement={touchEl} />
+	{/if}
+	<span class="np-navigation-bar-item-icon">
+		{#if orientation === 'vertical'}
+			<Ripple forElement={touchEl} />
+		{/if}
+		{@render icon()}
+		{#if badge}
+			<span class="np-navigation-bar-item-badge">
+				<Badge label={badgeLabel} aria-label={badgeAriaLabel} />
+			</span>
+		{/if}
+	</span>
+	<span class="np-navigation-bar-item-label">{label}</span>
+	<span class="np-touch" bind:this={touchEl}></span>
+{/snippet}
+
+{#if isLink}
+	<a
+		{...attributes}
+		bind:this={element}
+		href={attributes.href}
+		class={classes}
+		aria-current={selected ? 'page' : undefined}
+		tabindex={selected ? 0 : -1}
+	>
+		{@render content()}
+	</a>
+{:else}
+	<button
+		{...attributes as HTMLButtonAttributes}
+		bind:this={element}
+		class={classes}
+		aria-current={selected ? 'page' : undefined}
+		tabindex={selected ? 0 : -1}
+	>
+		{@render content()}
+	</button>
+{/if}
+
+<style>
+	.np-navigation-bar-item {
+		position: relative;
+		flex: 1;
+		min-width: 0;
+		cursor: pointer;
+		font: inherit;
+		border-width: 0;
+		background: none;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 0.25rem;
+		color: var(--np-color-on-surface);
+		text-decoration: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.np-navigation-bar-item-icon {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 3.5rem;
+		height: 2rem;
+		border-radius: var(--np-shape-corner-full);
+		color: var(--np-color-on-surface-variant);
+		z-index: 1;
+	}
+
+	.np-navigation-bar-item-icon::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		opacity: 0;
+		transform: scaleX(0.32);
+		background-color: var(
+			--np-navigation-bar-item-active-indicator-color,
+			var(--np-color-secondary-container)
+		);
+		border-radius: inherit;
+		z-index: -1;
+	}
+	.np-navigation-bar-item-selected .np-navigation-bar-item-icon::before {
+		opacity: 1;
+		transform: scaleX(1);
+	}
+
+	.np-navigation-bar-item-selected .np-navigation-bar-item-icon {
+		color: var(--np-color-on-secondary-container);
+		--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+	}
+
+	.np-navigation-bar-item-label {
+		font-size: 0.75rem;
+		line-height: 1rem;
+		letter-spacing: 0.031rem;
+		font-weight: var(--np-navigation-bar-item-font-weight, 500);
+		color: var(--np-color-on-surface-variant);
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.np-navigation-bar-item-selected .np-navigation-bar-item-label {
+		font-weight: var(--np-navigation-bar-item-selected-font-weight, 500);
+		color: var(--np-color-on-surface);
+	}
+
+	.np-navigation-bar-item-label-selected .np-navigation-bar-item-label {
+		visibility: hidden;
+	}
+	.np-navigation-bar-item-label-selected.np-navigation-bar-item-selected
+		.np-navigation-bar-item-label {
+		visibility: visible;
+	}
+
+	.np-navigation-bar-item-horizontal {
+		flex-direction: row;
+		justify-content: center;
+		gap: 0.25rem;
+		padding: 0.5rem 1rem;
+		border-radius: var(--np-shape-corner-full);
+		align-self: center;
+		z-index: 0;
+	}
+	.np-navigation-bar-item-horizontal::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		opacity: 0;
+		transform: scaleX(0.32);
+		background-color: var(
+			--np-navigation-bar-item-active-indicator-color,
+			var(--np-color-secondary-container)
+		);
+		border-radius: inherit;
+		z-index: -1;
+	}
+	.np-navigation-bar-item-horizontal.np-navigation-bar-item-selected::before {
+		opacity: 1;
+		transform: scaleX(1);
+	}
+	.np-navigation-bar-item-horizontal .np-navigation-bar-item-icon {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+	.np-navigation-bar-item-horizontal .np-navigation-bar-item-icon::before {
+		content: none;
+	}
+	.np-navigation-bar-item-horizontal .np-navigation-bar-item-badge {
+		--np-badge-top: -0.25rem;
+		--np-badge-end: -0.25rem;
+	}
+	.np-navigation-bar-item-horizontal .np-touch {
+		inset: 0;
+		width: 100%;
+		height: 100%;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-bar-item-horizontal::before {
+			transition:
+				transform var(--np-motion-expressive-default-spatial),
+				opacity var(--np-motion-expressive-fast-effects);
+		}
+	}
+
+	.np-navigation-bar-item-badge {
+		--np-badge-top: 0;
+		--np-badge-end: 1rem;
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+	}
+
+	.np-touch {
+		position: absolute;
+		inset-block-start: 0;
+		height: 3.5rem;
+		width: 4rem;
+	}
+
+	.np-navigation-bar-item:focus-visible {
+		outline-style: solid;
+		outline-color: var(--np-color-secondary);
+		outline-width: 3px;
+		outline-offset: 2px;
+		border-radius: 1rem;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-bar-item-icon::before {
+			transition:
+				transform var(--np-motion-expressive-default-spatial),
+				opacity var(--np-motion-expressive-fast-effects);
+		}
+		.np-navigation-bar-item-label {
+			transition: color var(--np-motion-expressive-default-effects);
+		}
+		.np-navigation-bar-item:focus-visible {
+			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
+		}
+	}
+</style>

package/dist/navigation-bar/NavigationBarItem.svelte.d.ts

@@ -0,0 +1,5 @@
+import '../internal/focus-ring.css';
+import type { NavigationBarItemProps } from './types.ts';
+declare const NavigationBarItem: import("svelte").Component<NavigationBarItemProps, {}, "element">;
+type NavigationBarItem = ReturnType<typeof NavigationBarItem>;
+export default NavigationBarItem;

package/dist/navigation-bar/index.d.ts

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

package/dist/navigation-bar/index.js

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

package/dist/navigation-bar/types.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+export interface NavigationBarProps extends HTMLAttributes<HTMLElement> {
+    arrangement?: 'equal-weight' | 'centered';
+    element?: HTMLElement;
+}
+export type NavigationBarItemElement = HTMLButtonElement | HTMLAnchorElement;
+export interface NavigationBarItemProps extends HTMLAttributes<NavigationBarItemElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
+    icon: Snippet;
+    label: string;
+    selected?: boolean;
+    badge?: boolean;
+    badgeLabel?: string | number;
+    badgeAriaLabel?: string;
+    labelBehavior?: 'always' | 'selected';
+    orientation?: 'vertical' | 'horizontal';
+    type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
+    element?: NavigationBarItemElement;
+}

package/dist/navigation-bar/types.js

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

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import { syncOpenEffect } from '../popover.svelte.js'
 	import type { NavigationDrawerProps } from './types.js'
+
 	let {
 		modal = false,
 		backdrop = false,
+		open = $bindable(false),
 		element = $bindable(),
 		direction = 'ltr',
-		popover,
 		children,
 		onkeydown: userKeydown,
 		ontoggle,
@@ -21,83 +23,103 @@
 		if (!event.defaultPrevented) arrowHandler(event)
 	}
 
-	let previouslyFocused: HTMLElement | undefined
-	let inerted: HTMLElement[] = []
+	const asDialog = () => (element instanceof HTMLDialogElement ? element : undefined)
 
-	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()
+	export const show = () => {
+		const dialog = asDialog()
+		if (dialog && !dialog.open) dialog.showModal()
 	}
 
-	const releaseFocus = () => {
-		for (const node of inerted) node.inert = false
-		inerted = []
-		previouslyFocused?.focus?.()
-		previouslyFocused = undefined
+	export const close = () => {
+		asDialog()?.close()
 	}
+
+	syncOpenEffect(
+		() => (modal ? element : undefined),
+		() => open,
+		show,
+		close,
+	)
+
+	const start = $derived(direction === 'ltr' ? 'translateX(-100%)' : 'translateX(100%)')
 </script>
 
-<nav
-	{...attributes}
-	{@attach attach}
-	bind:this={element}
-	popover={modal ? popover || 'auto' : undefined}
-	style="--np-navigation-drawer-start: {direction === 'ltr'
-		? 'translateX(-100%)'
-		: 'translateX(100%)'}"
-	class={[
-		'np-navigation-drawer-container',
-		modal && 'np-navigation-drawer-container-modal',
-		backdrop && 'np-navigation-drawer-backdrop',
-		attributes.class,
-	]}
-	onkeydown={handleKeydown}
-	ontoggle={(event) => {
-		if (modal) {
-			if (event.newState === 'open') trapFocus()
-			else releaseFocus()
-		}
-		ontoggle?.(event)
-	}}
->
-	{#if backdrop}
-		<div
-			role="none"
-			class="np-backdrop"
-			onclick={() => {
-				element?.hidePopover()
-			}}
-		></div>
-	{/if}
-	<div class={['np-navigation-wrapper', modal && 'np-navigation-drawer-shade']}>
-		<div class="np-navigation-drawer">
-			{#if children}
-				{@render children()}
-			{/if}
+{#if modal}
+	<dialog
+		{...attributes}
+		{@attach attach}
+		bind:this={element}
+		tabindex="-1"
+		aria-label={null}
+		aria-labelledby={null}
+		closedby="any"
+		style="--np-navigation-drawer-start: {start}; {attributes.style ?? ''}"
+		class={[
+			'np-navigation-drawer-container',
+			'np-navigation-drawer-container-modal',
+			backdrop && 'np-navigation-drawer-backdrop',
+			attributes.class,
+		]}
+		onkeydown={handleKeydown}
+		ontoggle={(event) => {
+			open = event.newState === 'open'
+			if (event.newState === 'open') element?.focus()
+			ontoggle?.(event)
+		}}
+		onclick={(event) => {
+			attributes.onclick?.(event)
+			if (event.target === element) close()
+		}}
+	>
+		<nav
+			aria-label={attributes['aria-label']}
+			aria-labelledby={attributes['aria-labelledby']}
+			class="np-navigation-wrapper np-navigation-drawer-shade"
+		>
+			<div class="np-navigation-drawer">
+				{@render children?.()}
+			</div>
+		</nav>
+	</dialog>
+{:else}
+	<nav
+		{...attributes}
+		{@attach attach}
+		bind:this={element}
+		class={['np-navigation-drawer-container', attributes.class]}
+		onkeydown={handleKeydown}
+	>
+		<div class="np-navigation-wrapper">
+			<div class="np-navigation-drawer">
+				{@render children?.()}
+			</div>
 		</div>
-	</div>
-</nav>
+	</nav>
+{/if}
 
 <style>
 	.np-navigation-drawer-container {
 		color: var(--np-color-on-surface-variant);
 		width: calc(var(--np-navigation-drawer-width, 22.5rem) + 3px);
 		border: 0;
+		outline: none;
 		margin: 0;
 		padding: 0;
 		background-color: transparent;
+		max-width: none;
+		max-height: none;
 	}
+
+	.np-navigation-drawer-container-modal {
+		position: fixed;
+		inset-block: 0;
+		height: 100dvh;
+		overflow: visible;
+	}
+	.np-navigation-drawer-container-modal:not([open]) {
+		display: none;
+	}
+
 	.np-navigation-wrapper {
 		background-color: var(--np-navigation-drawer-background, var(--np-color-surface-container-low));
 		border-start-end-radius: var(--np-shape-corner-large);
@@ -106,33 +128,32 @@
 		height: var(--np-navigation-drawer-height, 100dvh);
 		overflow-y: auto;
 		scrollbar-width: thin;
+		display: block;
 	}
 
-	.np-navigation-drawer-container[popover] .np-navigation-wrapper {
+	.np-navigation-drawer-container-modal .np-navigation-wrapper {
 		transform: var(--np-navigation-drawer-start, translateX(-100%));
 	}
-
-	.np-navigation-drawer-container:popover-open .np-navigation-wrapper {
+	.np-navigation-drawer-container-modal[open] .np-navigation-wrapper {
 		transform: translateX(0);
 	}
 
 	@media (prefers-reduced-motion: no-preference) {
-		.np-navigation-drawer-container[popover] .np-navigation-wrapper {
+		.np-navigation-drawer-container-modal .np-navigation-wrapper {
 			transition: transform var(--np-motion-standard-slow-spatial);
 		}
-
-		.np-navigation-drawer-container[popover] {
+		.np-navigation-drawer-container-modal {
 			transition:
 				overlay var(--np-motion-standard-slow-spatial) allow-discrete,
 				display var(--np-motion-standard-slow-spatial) allow-discrete;
 		}
-
-		.np-navigation-drawer-container:popover-open .np-navigation-wrapper {
+		.np-navigation-drawer-container-modal[open] .np-navigation-wrapper {
 			@starting-style {
 				transform: var(--np-navigation-drawer-start, translateX(-100%));
 			}
 		}
 	}
+
 	.np-navigation-drawer {
 		display: flex;
 		padding: var(--np-navigation-drawer-padding, 1.25rem 0.75rem);
@@ -142,17 +163,27 @@
 		box-shadow: var(--np-elevation-1);
 	}
 
-	.np-navigation-drawer-backdrop[popover] .np-backdrop {
-		inset: 0;
-		position: fixed;
+	.np-navigation-drawer-container-modal::backdrop {
+		background-color: transparent;
+	}
+	.np-navigation-drawer-backdrop::backdrop {
 		background-color: var(--np-color-scrim);
 		opacity: 0;
-		transition: opacity var(--np-motion-expressive-slow-effects);
 	}
-	.np-navigation-drawer-backdrop[popover]:popover-open .np-backdrop {
+	.np-navigation-drawer-backdrop[open]::backdrop {
 		opacity: 0.32;
-		@starting-style {
-			opacity: 0;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-drawer-backdrop::backdrop {
+			transition:
+				opacity var(--np-motion-expressive-slow-effects),
+				overlay var(--np-motion-expressive-slow-effects) allow-discrete,
+				display var(--np-motion-expressive-slow-effects) allow-discrete;
+		}
+		.np-navigation-drawer-backdrop[open]::backdrop {
+			@starting-style {
+				opacity: 0;
+			}
 		}
 	}
 </style>

package/dist/navigation-drawer/NavigationDrawer.svelte.d.ts

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

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -7,7 +7,8 @@
 	let {
 		selected = false,
 		label,
-		badgeLabelText,
+		badgeLabel,
+		badgeAriaLabel,
 		icon,
 		element = $bindable(),
 		...attributes
@@ -24,8 +25,14 @@
 		{/if}
 	</div>
 	<div class="np-navigation-drawer-item-label">{label}</div>
-	{#if badgeLabelText}
-		<div class="np-navigation-drawer-item-badge">{badgeLabelText}</div>
+	{#if badgeLabel}
+		<div
+			class="np-navigation-drawer-item-badge"
+			role={badgeAriaLabel ? 'status' : undefined}
+			aria-label={badgeAriaLabel}
+		>
+			{badgeLabel}
+		</div>
 	{/if}
 {/snippet}
 

package/dist/navigation-drawer/types.d.ts

@@ -3,6 +3,7 @@ import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from
 export interface NavigationDrawerProps extends HTMLAttributes<HTMLElement> {
     modal?: boolean;
     backdrop?: boolean;
+    open?: boolean;
     element?: HTMLElement;
     direction?: 'rtl' | 'ltr';
 }
@@ -11,7 +12,8 @@ export interface NavigationDrawerItemProps extends HTMLAttributes<NavigationDraw
     icon?: Snippet;
     label: string;
     selected?: boolean;
-    badgeLabelText?: string;
+    badgeLabel?: string;
+    badgeAriaLabel?: string;
     type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
     element?: NavigationDrawerItemElement;
 }

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
+	import Badge from '../badge/Badge.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { NavigationRailItemProps } from './types.js'
@@ -8,6 +9,9 @@
 		selected,
 		icon,
 		label,
+		badge = false,
+		badgeLabel,
+		badgeAriaLabel,
 		element = $bindable(),
 		...attributes
 	}: NavigationRailItemProps = $props()
@@ -20,6 +24,11 @@
 	<div class="np-navigation-action-icon">
 		<Ripple forElement={touchEl} />
 		{@render icon()}
+		{#if badge}
+			<div class="np-navigation-action-badge">
+				<Badge label={badgeLabel} aria-label={badgeAriaLabel} />
+			</div>
+		{/if}
 	</div>
 	<div class="np-navigation-action-label">{label}</div>
 	<span class="np-touch" bind:this={touchEl}></span>
@@ -92,6 +101,13 @@
 		transition: color var(--np-motion-expressive-default-effects);
 		color: var(--np-color-on-surface-variant);
 	}
+	.np-navigation-action-badge {
+		--np-badge-top: 0;
+		--np-badge-end: 0.75rem;
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+	}
 	.np-navigation-action-selected .np-navigation-action-icon {
 		color: var(--np-color-on-secondary-container);
 		--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;

package/dist/navigation-rail/types.d.ts

@@ -8,6 +8,9 @@ export interface NavigationRailItemProps extends HTMLAttributes<NavigationRailIt
     icon: Snippet;
     label: string;
     selected?: boolean;
+    badge?: boolean;
+    badgeLabel?: string | number;
+    badgeAriaLabel?: string;
     type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
     element?: NavigationRailItemElement;
 }

package/dist/popover.svelte.d.ts

@@ -0,0 +1,5 @@
+export declare const popoverController: (getElement: () => HTMLElement | undefined) => {
+    show: () => void;
+    close: () => void;
+};
+export declare const syncOpenEffect: (getElement: () => HTMLElement | undefined, getOpen: () => boolean | undefined, show: () => void, close: () => void) => void;

package/dist/popover.svelte.js

@@ -0,0 +1,22 @@
+export const popoverController = (getElement) => ({
+    show: () => {
+        const element = getElement();
+        if (element && !element.matches(':popover-open'))
+            element.showPopover();
+    },
+    close: () => {
+        const element = getElement();
+        if (element?.matches(':popover-open'))
+            element.hidePopover();
+    },
+});
+export const syncOpenEffect = (getElement, getOpen, show, close) => {
+    $effect(() => {
+        if (!getElement())
+            return;
+        if (getOpen() === true)
+            show();
+        else if (getOpen() === false)
+            close();
+    });
+};

package/dist/press.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare const PRESS_DURATION = 100;
+export declare const pressMorph: () => {
+    readonly pressed: boolean;
+    press: () => void;
+    supersededBy: (shape: () => unknown) => void;
+};