noph-ui 0.44.0 → 0.45.0

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './app-bar/index.js';
 export * from './autocomplete/index.js';
 export * from './badge/index.js';
 export * from './button/index.js';
@@ -7,18 +8,23 @@ export * from './chip/index.js';
 export * from './date-picker/index.js';
 export * from './dialog/index.js';
 export * from './divider/index.js';
+export * from './fab/index.js';
 export * from './list/index.js';
 export * from './loading-indicator/index.js';
 export * from './menu/index.js';
+export * from './navigation-bar/index.js';
 export * from './navigation-drawer/index.js';
 export * from './navigation-rail/index.js';
 export * from './progress/index.js';
 export * from './radio/index.js';
 export * from './ripple/index.js';
+export * from './search/index.js';
 export * from './select/index.js';
+export * from './sheet/index.js';
 export * from './slider/index.js';
 export * from './snackbar/index.js';
 export * from './switch/index.js';
 export * from './tabs/index.js';
 export * from './text-field/index.js';
+export * from './toolbar/index.js';
 export * from './tooltip/index.js';

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from './app-bar/index.js';
 export * from './autocomplete/index.js';
 export * from './badge/index.js';
 export * from './button/index.js';
@@ -7,18 +8,23 @@ export * from './chip/index.js';
 export * from './date-picker/index.js';
 export * from './dialog/index.js';
 export * from './divider/index.js';
+export * from './fab/index.js';
 export * from './list/index.js';
 export * from './loading-indicator/index.js';
 export * from './menu/index.js';
+export * from './navigation-bar/index.js';
 export * from './navigation-drawer/index.js';
 export * from './navigation-rail/index.js';
 export * from './progress/index.js';
 export * from './radio/index.js';
 export * from './ripple/index.js';
+export * from './search/index.js';
 export * from './select/index.js';
+export * from './sheet/index.js';
 export * from './slider/index.js';
 export * from './snackbar/index.js';
 export * from './switch/index.js';
 export * from './tabs/index.js';
 export * from './text-field/index.js';
+export * from './toolbar/index.js';
 export * from './tooltip/index.js';

package/dist/internal/focus-ring.css

@@ -24,3 +24,15 @@
 		outline-width: 3px;
 	}
 }
+
+.np-focus-ring:focus-visible {
+	outline-style: solid;
+	outline-color: var(--np-color-secondary);
+	outline-width: 3px;
+	outline-offset: 2px;
+}
+@media (prefers-reduced-motion: no-preference) {
+	.np-focus-ring:focus-visible {
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
+	}
+}

package/dist/menu/Menu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
 	import type { MenuProps } from './types.js'
 
 	const MENU_ITEM_SELECTOR = '[role="menuitem"]'
@@ -21,13 +22,17 @@
 	let contentHeight = $state(0)
 	let innerHeight = $state(0)
 
-	export const showPopover = () => {
-		element?.showPopover()
-	}
+	const controller = popoverController(() => element)
 
-	export const hidePopover = () => {
-		element?.hidePopover()
-	}
+	export const show = () => controller.show()
+	export const close = () => controller.close()
+
+	syncOpenEffect(
+		() => element,
+		() => open,
+		show,
+		close,
+	)
 
 	const calculateTransformOrigin = (anchorRect: DOMRect, menuRect: DOMRect) => {
 		const pivot = (anchorStart: number, anchorEnd: number, menuStart: number, menuEnd: number) => {
@@ -82,7 +87,7 @@
 	}}
 >
 	<div {@attach attach} bind:clientHeight={contentHeight} class="np-menu" role="none">
-		{@render children()}
+		{@render children?.()}
 	</div>
 </div>
 

package/dist/menu/Menu.svelte.d.ts

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

package/dist/menu/types.d.ts

@@ -1,8 +1,6 @@
 import type { ItemProps } from '../list/types.js';
-import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
-    children: Snippet;
     anchor?: HTMLElement | undefined;
     element?: HTMLDivElement;
     open?: boolean;

package/dist/navigation-bar/NavigationBar.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import type { NavigationBarProps } from './types.js'
+
+	let {
+		children,
+		arrangement = 'equal-weight',
+		element = $bindable(),
+		onkeydown: userKeydown,
+		...attributes
+	}: NavigationBarProps = $props()
+
+	// The same attachments the rail uses. They read no reactive state, so they never tear down.
+	const attach = rovingTabindex('.np-navigation-bar-item')
+	const arrowHandler = arrowKeyNav('.np-navigation-bar-item', 'horizontal')
+
+	const handleKeydown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
+		userKeydown?.(event)
+		if (!event.defaultPrevented) arrowHandler(event)
+	}
+</script>
+
+<nav
+	{...attributes}
+	{@attach attach}
+	bind:this={element}
+	class={[
+		'np-navigation-bar',
+		arrangement === 'centered' && 'np-navigation-bar-centered',
+		attributes.class,
+	]}
+	onkeydown={handleKeydown}
+>
+	{@render children?.()}
+</nav>
+
+<style>
+	.np-navigation-bar {
+		display: flex;
+		justify-content: space-around;
+		align-items: stretch;
+		box-sizing: border-box;
+		width: 100%;
+		min-height: 5rem;
+		padding-block: 0.75rem;
+		padding-inline: 0.5rem;
+		background-color: var(--np-navigation-bar-container-color, var(--np-color-surface-container));
+		/* Sits above page content the way a rail does, and clears the home inset on a phone. */
+		padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
+		z-index: 8;
+	}
+
+	/* Items keep their own content width instead of stretching, and group in the middle. */
+	.np-navigation-bar-centered {
+		justify-content: center;
+		gap: 0.5rem;
+	}
+	/*
+	 * Doubled selector to outrank the item's own `.svelte-*`-scoped `flex: 1` rule, which has the
+	 * same specificity and would otherwise win or lose depending on CSS bundle order.
+	 */
+	:global(.np-navigation-bar-centered .np-navigation-bar-item.np-navigation-bar-item) {
+		flex: 0 0 auto;
+		min-width: 0;
+	}
+</style>

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

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

package/dist/navigation-bar/NavigationBarItem.svelte

@@ -0,0 +1,261 @@
+<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'}
+		<!-- Sized off its own parent, so it has to sit on the whole pill rather than the icon alone. -->
+		<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;
+	}
+
+	/* The active-indicator pill, grown from the selected class rather than measured. */
+	.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);
+	}
+
+	/*
+	 * `labelBehavior="selected"` keeps the label in the layout but hides it, so the row does not
+	 * reflow as the selection moves.
+	 */
+	.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;
+	}
+
+	/*
+	 * The icon sits beside the label instead of above it, for a bar with room to spare. Unlike the
+	 * stacked layout, the active-indicator pill wraps the icon and label together, like a chip,
+	 * rather than just the icon.
+	 */
+	.np-navigation-bar-item-horizontal {
+		flex-direction: row;
+		justify-content: center;
+		/* M3's "icon label space" token: 4dp between the icon and the label. */
+		gap: 0.25rem;
+		/*
+		 * M3's "leading/trailing space" token (16dp) sets the inline padding, and the block padding
+		 * is picked so a 1.5rem icon plus padding adds up to the "active indicator height" token
+		 * (40dp).
+		 */
+		padding: 0.5rem 1rem;
+		border-radius: var(--np-shape-corner-full);
+		/* The bar stretches items to its own height by default; a pill sizes to its own content and
+		 * centers in the bar instead. */
+		align-self: center;
+		/* Gives the item its own stacking context, so the pill's z-index: -1 stays behind the icon
+		 * and label instead of escaping to sit behind the bar's own background. */
+		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);
+	}
+	/* The wrapping item now supplies the pill, so the icon's own is switched off. */
+	.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,29 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+export interface NavigationBarProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * `'equal-weight'` stretches every item to the same width, which M3 recommends for compact
+     * screens. `'centered'` sizes each item to its content and groups them in the middle, which M3
+     * recommends once the bar has room to spare on a medium-width screen.
+     */
+    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;
+    /** Hides the label until the item is selected, which M3 allows for four or five items. */
+    labelBehavior?: 'always' | 'selected';
+    /**
+     * `'vertical'` stacks the icon above the label. `'horizontal'` puts it beside the label instead,
+     * which M3 pairs with `arrangement="centered"` once a bar has room to spare.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
+    element?: NavigationBarItemElement;
+}

package/dist/navigation-bar/types.js

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