noph-ui 0.45.0 → 0.46.0

package/dist/search/Search.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick } from 'svelte'
 	import '../internal/focus-ring.css'
 	import IconButton from '../button/IconButton.svelte'
 	import ArrowBackIcon from '../icons/ArrowBackIcon.svelte'
@@ -29,20 +30,23 @@
 	const uid = $props.id()
 	const resultsId = `np-search-results-${uid}`
 
-	/*
-	 * A combobox has to own a popup ARIA recognises, so the field claims to be one only when the
-	 * results say what they are. Left alone they are ordinary content that appears below the
-	 * field, which is what a list, a set of categories or a row of chips actually is.
-	 */
 	const comboboxPopups = ['listbox', 'tree', 'grid', 'dialog']
 	const isCombobox = $derived(comboboxPopups.includes(String(resultsAttributes?.role)))
 
-	/*
-	 * A focused text input always matches `:focus-visible`, pointer or not, so the ring is tracked
-	 * by hand: it shows only when focus did not arrive under a finger or a mouse.
-	 */
 	let pointerFocus = false
 	let focusRing = $state(false)
+
+	export const show = async () => {
+		expanded = true
+		pointerFocus = true
+		await tick()
+		inputElement?.focus()
+	}
+
+	export const close = () => {
+		expanded = false
+		inputElement?.blur()
+	}
 </script>
 
 <div
@@ -56,19 +60,16 @@
 		attributes.class,
 	]}
 	onkeydown={(event) => {
-		// A key press means whatever takes focus next is being reached with the keyboard.
 		pointerFocus = false
 		attributes.onkeydown?.(event)
 	}}
 	onfocusout={(event) => {
-		// The open view floats over the page, so it closes the moment focus leaves it.
 		const next = event.relatedTarget
 		if (expanded && !(next instanceof Node && element?.contains(next))) expanded = false
 		attributes.onfocusout?.(event)
 	}}
 >
 	<div class="np-search-container">
-		<!-- The click only forwards focus to the input below, which is the actual control. -->
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
@@ -84,7 +85,6 @@
 					<IconButton
 						title={backLabel}
 						onclick={(event) => {
-							// Bubbling to the bar's own onclick would refocus the input and reopen the view.
 							event.stopPropagation()
 							expanded = false
 						}}
@@ -139,7 +139,6 @@
 						title={clearLabel}
 						onclick={() => {
 							value = ''
-							// The focus below is a pointer's doing, so it must not raise the ring.
 							pointerFocus = true
 							inputElement?.focus()
 						}}
@@ -153,11 +152,6 @@
 			</span>
 		</div>
 
-		<!--
-			The container brings no semantics of its own: what goes in it is a list one time and
-			categories, avatars and chips the next. `resultsAttributes` is where a role belongs when
-			the content has earned one.
-		-->
 		<div
 			{...resultsAttributes}
 			id={resultsId}
@@ -170,13 +164,7 @@
 
 <style>
 	.np-search {
-		/* SearchBarTokens: 56dp tall, fully rounded, surface-container-high. */
 		--_bar-height: 3.5rem;
-		/*
-		 * M3 Expressive grows the bar by shrinking the margins it keeps to its pane, from 24dp at
-		 * rest to 12dp once the view opens. Owning the margin is what makes that growth work
-		 * without the consumer having to name two widths.
-		 */
 		--_pane-margin: var(--np-search-pane-margin, 1.5rem);
 		display: flex;
 		flex-direction: column;
@@ -195,27 +183,18 @@
 		}
 	}
 
-	/*
-	 * Docked, the bar is all the component takes up in the layout: the view it opens floats over
-	 * the page rather than pushing it down, so the margins are the container's own insets.
-	 */
 	.np-search-docked {
 		position: relative;
 		block-size: var(--_bar-height);
 		padding-inline: 0;
 	}
 
-	/*
-	 * The container is only a surface in the divided style, where the bar and the results share
-	 * one. Contained keeps them apart, 2dp of gap between the two.
-	 */
 	.np-search-container {
 		display: flex;
 		flex-direction: column;
 		box-sizing: border-box;
 		gap: 0.125rem;
 		min-height: 0;
-		/* Container width is 360dp at the least and 720dp at the most. */
 		width: 100%;
 		min-width: min(22.5rem, 100%);
 		max-width: var(--np-search-width, 45rem);
@@ -225,18 +204,7 @@
 		position: absolute;
 		inset-block-start: 0;
 		inset-inline: var(--_pane-margin);
-		/*
-		 * A definite `width` rather than `auto`, which resolves outside the transition engine and
-		 * would snap the pane to its grown width the instant the class changes instead of easing
-		 * it in with the insets.
-		 */
 		width: calc(100% - 2 * var(--_pane-margin));
-		/*
-		 * An absolutely positioned box measures a percentage against the whole component, margins
-		 * included, so the floor has to leave room for them or a narrow host overflows. Also
-		 * transitioned below, in step with `width`, or it would snap to its own end value early
-		 * and clamp the still-transitioning `width` to it for the whole animation.
-		 */
 		min-width: min(22.5rem, calc(100% - 2 * var(--_pane-margin)));
 		z-index: var(--np-search-z-index, 3);
 	}
@@ -250,11 +218,6 @@
 				min-width var(--np-motion-expressive-default-spatial);
 		}
 
-		/*
-		 * The view unrolls from under the bar rather than arriving whole. Clipping is what does it,
-		 * so nothing about the bar moves and the pane's shape, rule and shadow are all uncovered
-		 * together, however tall the list turns out to be.
-		 */
 		.np-search-docked.np-search-expanded .np-search-container {
 			animation: unroll var(--np-motion-expressive-default-spatial);
 		}
@@ -262,7 +225,6 @@
 			animation: fadeIn var(--np-motion-expressive-default-effects);
 		}
 	}
-	/* The clip is held off the edges so that it never cuts the shadow while it plays. */
 	@keyframes unroll {
 		from {
 			clip-path: inset(-1.5rem -1.5rem calc(100% - var(--_bar-height)) -1.5rem);
@@ -283,12 +245,6 @@
 		align-items: center;
 		box-sizing: border-box;
 		flex: none;
-		/*
-		 * 8dp of padding and 8dp of gap put the glyphs 16dp inside the bar and the input text 16dp
-		 * past them, which is what the spec measures. The spec reaches those numbers with 48dp tap
-		 * targets and 4dp of space; the library's icon buttons are 40dp, so the space absorbs the
-		 * difference.
-		 */
 		gap: 0.5rem;
 		padding-inline: 0.5rem;
 		height: var(--_bar-height);
@@ -308,7 +264,6 @@
 		}
 	}
 
-	/* The bar is a tap target at rest. Once the view is open it is a header, and takes no states. */
 	.np-search-state-layer {
 		position: absolute;
 		inset: 0;
@@ -326,7 +281,6 @@
 		opacity: 0.1;
 	}
 
-	/* Positioned, so the bar's content paints over the state layer rather than under it. */
 	.np-search-leading,
 	.np-search-trailing,
 	.np-search-input {
@@ -339,18 +293,15 @@
 		align-items: center;
 		flex: none;
 	}
-	/* Trailing actions sit flush against one another. */
 	.np-search-trailing {
 		gap: 0;
 	}
-	/* LeadingIconColor is on-surface; trailing is on-surface-variant. */
 	.np-search-leading {
 		--np-icon-button-icon-color: var(--np-color-on-surface);
 	}
 	.np-search-trailing {
 		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
 	}
-	/* Sized like the icon button that replaces it, so the glyph holds still as the view opens. */
 	.np-search-leading-icon {
 		display: flex;
 		align-items: center;
@@ -368,7 +319,6 @@
 		outline: none;
 		background: none;
 		font: inherit;
-		/* InputTextFont is body-large. */
 		font-size: 1rem;
 		line-height: 1.5rem;
 		letter-spacing: 0.03125rem;
@@ -380,7 +330,6 @@
 		color: var(--np-color-on-surface-variant);
 		opacity: 1;
 	}
-	/* The type="search" clear affordance would duplicate the component's own. */
 	.np-search-input::-webkit-search-cancel-button {
 		appearance: none;
 	}
@@ -397,7 +346,6 @@
 		}
 	}
 
-	/* Results are only in the layout, and only in the accessibility tree, once expanded. */
 	.np-search-results {
 		display: none;
 		box-sizing: border-box;
@@ -408,20 +356,14 @@
 		display: block;
 	}
 
-	/* Docked: the results sit under the field, growing to two thirds of the screen at the most. */
 	.np-search-docked .np-search-results {
 		max-height: var(--np-search-results-max-height, 66.6667dvh);
 	}
-	/* Contained docks them as their own 12dp pane. */
 	.np-search-contained.np-search-docked .np-search-results {
 		border-radius: var(--np-search-results-shape, var(--np-shape-corner-medium));
 		background-color: var(--np-search-container-color, var(--np-color-surface-container-high));
 	}
 
-	/*
-	 * Divided (baseline) folds the field and the results into one 28dp container, separated by a
-	 * rule. Contained keeps the pill, which is what M3 recommends.
-	 */
 	.np-search-divided.np-search-expanded .np-search-bar {
 		border-radius: 0;
 		background-color: transparent;
@@ -432,21 +374,15 @@
 		border-radius: var(--np-search-results-shape, var(--np-shape-corner-extra-large));
 		background-color: var(--np-search-container-color, var(--np-color-surface-container-high));
 	}
-	/*
-	 * The results round off the container's bottom corners themselves, rather than the container
-	 * clipping them, which would take the header's focus ring with it.
-	 */
 	.np-search-divided.np-search-docked.np-search-expanded .np-search-results {
 		border-end-start-radius: inherit;
 		border-end-end-radius: inherit;
 	}
 
-	/* Full screen: the field and its results take over the viewport, and the view has no shape. */
 	.np-search-full-screen.np-search-expanded {
 		position: fixed;
 		inset: 0;
 		z-index: var(--np-search-z-index, 24);
-		/* The pill needs the same room above it that it keeps at its sides. */
 		padding-block-start: var(--_pane-margin);
 		background-color: var(--np-search-view-background-color, var(--np-color-surface-container-low));
 	}
@@ -458,10 +394,6 @@
 		flex: 1;
 		max-height: none;
 	}
-	/*
-	 * Contained holds the 56dp bar in full screen too. Only the divided header grows to 72dp, and
-	 * it runs edge to edge on the view's own surface.
-	 */
 	.np-search-divided.np-search-full-screen.np-search-expanded {
 		padding: 0;
 		background-color: var(--np-search-container-color, var(--np-color-surface-container-high));
@@ -469,4 +401,14 @@
 	.np-search-divided.np-search-full-screen.np-search-expanded .np-search-bar {
 		height: 4.5rem;
 	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		@starting-style {
+			.np-search-full-screen.np-search-expanded,
+			.np-search-divided.np-search-full-screen.np-search-expanded {
+				padding-block-start: 0;
+				padding-inline: var(--np-search-pane-margin, 1.5rem);
+			}
+		}
+	}
 </style>

package/dist/search/Search.svelte.d.ts

@@ -1,5 +1,8 @@
 import '../internal/focus-ring.css';
 import type { SearchProps } from './types.ts';
-declare const Search: import("svelte").Component<SearchProps, {}, "element" | "value" | "inputElement" | "expanded">;
+declare const Search: import("svelte").Component<SearchProps, {
+    show: () => Promise<void>;
+    close: () => void;
+}, "element" | "value" | "inputElement" | "expanded">;
 type Search = ReturnType<typeof Search>;
 export default Search;

package/dist/search/types.d.ts

@@ -1,38 +1,18 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 export interface SearchProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onsearch'> {
-    /** Bindable. The query. */
     value?: string;
-    /** Hinted search text, shown while the field is empty. */
     placeholder?: string;
-    /** Bindable. Whether the results are showing. */
     expanded?: boolean;
-    /**
-     * `'contained'` keeps the field's pill shape and colour while expanded, which M3 recommends.
-     * `'divided'` squares the field off against the results and separates them with a divider.
-     */
     variant?: 'contained' | 'divided';
-    /** `'docked'` drops the results under the field. `'full-screen'` covers the viewport. */
     view?: 'docked' | 'full-screen';
-    /** Leading slot. Defaults to a search icon, or a back arrow once expanded. */
     leading?: Snippet;
-    /** Trailing slot, for an avatar or actions. A clear button is shown alongside it. */
     trailing?: Snippet;
-    /** Accessible name for the field. */
     label?: string;
-    /** Accessible name for the clear button. */
     clearLabel?: string;
-    /** Accessible name for the back action shown while expanded. */
     backLabel?: string;
-    /** Fired on the Enter key, with the current query. */
     onsearch?: (value: string) => void;
-    /** Extra attributes for the underlying `input`. */
     inputAttributes?: HTMLInputAttributes;
-    /**
-     * Extra attributes for the container holding the suggestions or results. It carries no role of
-     * its own, so this is where the content's semantics go: `role="listbox"` when the children
-     * really are options, nothing when they are a list, categories or chips.
-     */
     resultsAttributes?: HTMLAttributes<HTMLDivElement>;
     element?: HTMLDivElement;
     inputElement?: HTMLInputElement;

package/dist/sheet/Sheet.svelte

@@ -37,14 +37,6 @@
 	)
 </script>
 
-<!--
-	A `dialog` rather than a popover. `showModal()` keeps everything outside the sheet inert for as
-	long as it is open, including anything added while it is open, and restores focus on close. A
-	hand-rolled trap can only inert what exists at the moment it runs.
-
-	`closedby="any"` is the light dismiss a popover gets for free. Where it is unsupported the click
-	handler below covers it: a click on the backdrop is reported against the dialog itself.
--->
 <dialog
 	{...attributes}
 	bind:this={element}
@@ -58,11 +50,6 @@
 	}}
 	ontoggle={(event) => {
 		open = event.newState === 'open'
-		/*
-		 * Without this the browser autofocuses the first focusable descendant, which is the close
-		 * button when `action` puts one in the header, firing its tooltip on open. Focus the sheet
-		 * itself instead, so nothing is focused that the user didn't choose to interact with.
-		 */
 		if (event.newState === 'open') element?.focus()
 		ontoggle?.(event)
 	}}
@@ -91,13 +78,7 @@
 <style>
 	.np-sheet {
 		position: fixed;
-		/* Focus lands here on open only to stay off the header action, not as something to show. */
 		outline: none;
-		/*
-		 * `showModal()` puts a modal sheet in the top layer, above normal stacking order regardless
-		 * of z-index. A non-modal sheet (`.show()`) stays in normal flow, so it needs a z-index of
-		 * its own to clear app bars and other overlays.
-		 */
 		z-index: var(--np-sheet-z-index, 24);
 		box-sizing: border-box;
 		margin: 0;
@@ -113,7 +94,6 @@
 		box-shadow: var(--np-sheet-elevation, var(--np-elevation-1));
 	}
 
-	/* A closed dialog is `display: none` from the user agent, which the enter transition needs. */
 	.np-sheet:not([open]) {
 		display: none;
 	}
@@ -193,16 +173,11 @@
 		padding: 1rem 1.5rem 1.5rem;
 	}
 
-	/* `::backdrop` is the scrim, so a modal sheet needs no backdrop element of its own. */
 	.np-sheet-modal::backdrop {
 		background-color: var(--np-color-scrim);
 		opacity: 0.32;
 	}
 
-	/*
-	 * `display` and `overlay` are discrete properties, so the sheet would appear and vanish without
-	 * `allow-discrete`. `@starting-style` gives the entry a value to move from.
-	 */
 	@media (prefers-reduced-motion: no-preference) {
 		.np-sheet {
 			transition:

package/dist/sheet/types.d.ts

@@ -1,19 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLDialogAttributes } from 'svelte/elements';
 export interface SheetProps extends Omit<HTMLDialogAttributes, 'open'> {
-    /** Bindable. Whether the sheet is showing. */
     open?: boolean;
-    /**
-     * A modal sheet takes focus and blocks the page behind it; a standard one sits alongside the
-     * content and leaves it usable.
-     */
     modal?: boolean;
-    /** Which edge the sheet is docked to. `'bottom'` is M3's bottom sheet, the sides are side sheets. */
     placement?: 'bottom' | 'top' | 'start' | 'end';
-    /** The drag handle M3 puts on a bottom sheet. Ignored on the other edges. */
     handle?: boolean;
     headline?: string;
-    /** Trailing action in the header, usually a close button. */
     action?: Snippet;
     element?: HTMLDialogElement;
 }

package/dist/slider/Slider.svelte

@@ -115,13 +115,6 @@
 
 	const DRAG_THRESHOLD = 3
 
-	/*
-	 * The value label is a `manual` popover rather than a plain absolutely positioned element, so it
-	 * renders in the top layer and isn't clipped by an ancestor that scrolls or clips overflow, the
-	 * way a `DemoContainer` or any card with `overflow: hidden` would otherwise cut it off. `manual`
-	 * rather than `hint`, whose open and close the browser drives on its own schedule; this one has
-	 * to follow the drag exactly.
-	 */
 	let startLabelElement = $state<HTMLDivElement>()
 	let endLabelElement = $state<HTMLDivElement>()
 	let startHandleElement = $state<HTMLDivElement>()
@@ -129,13 +122,6 @@
 	let hovered = $state<'start' | 'end' | null>(null)
 	let focused = $state<'start' | 'end' | null>(null)
 
-	/*
-	 * One handle carries the label at a time, the one being interacted with: a drag wins, then the
-	 * pointer, then the keyboard. Focus only counts when it did not come from a pointer, since a
-	 * drag focuses the input and `:focus-visible` does match a range input focused that way, which
-	 * is why the focus ring is suppressed by `np-pointer-focused` too. Without that gate the label
-	 * would stay up after a drag for as long as the input keeps focus, however far the pointer went.
-	 */
 	let labelled = $derived(
 		disabled ? null : (dragging ?? hovered ?? (pointerFocused ? null : focused)),
 	)
@@ -193,16 +179,8 @@
 		}
 	}
 
-	/*
-	 * Hover is derived from where the pointer actually is rather than from the handle's own
-	 * mouseenter/mouseleave. A handle is only a few pixels wide, so those events are easy to miss
-	 * between frames, and while a drag holds pointer capture they are routed to the capturing
-	 * element and never reach the handle at all, which left the label stuck open. The tolerance
-	 * gives the thin handle a hit area worth aiming at.
-	 */
 	const HOVER_TOLERANCE = 12
 
-	/** Distance from the pointer to a handle's box, zero while inside it. */
 	const distanceTo = (handle: HTMLDivElement | undefined, e: PointerEvent) => {
 		if (!handle) return Infinity
 		const r = handle.getBoundingClientRect()
@@ -597,15 +575,6 @@
 			block-size var(--np-motion-expressive-fast-effects);
 	}
 
-	/*
-	 * A `manual` popover rather than a plain absolutely positioned element: it renders in the top
-	 * layer, anchored to the handle by `position-anchor`/`position-area` rather than by an inset
-	 * computed from the handle's own box, so it isn't clipped by an ancestor that scrolls or hides
-	 * overflow. It stays a wrapper around the visible label rather than the popover itself carrying
-	 * the styling, so it can keep resolving `position-area` in the slider's own writing mode while
-	 * the label inside always renders horizontally, the same split the previous absolute-positioned
-	 * version needed for a vertical slider's rotated writing mode.
-	 */
 	.np-slider-label-anchor[popover] {
 		position-area: block-start;
 		justify-self: anchor-center;
@@ -617,11 +586,6 @@
 		pointer-events: none;
 	}
 
-	/*
-	 * `display` only while open. Setting it on the base rule would beat the user agent's
-	 * `display: none` for a closed popover, because author styles win over user agent styles
-	 * whatever the specificity, leaving the label on screen the whole time.
-	 */
 	.np-slider-label-anchor:popover-open {
 		display: flex;
 		opacity: 1;

package/dist/snackbar/Snackbar.svelte

@@ -23,16 +23,12 @@
 	let hovered = $state(false)
 	let focused = $state(false)
 
+	const uid = $props.id()
 	const controller = popoverController(() => element)
 
 	export const show = () => controller.show()
 	export const close = () => controller.close()
 
-	/*
-	 * `toggle` fires once the popover has settled, so `open` coming back from the DOM already
-	 * matches it and this does nothing. Syncing on `beforetoggle` instead would land in the middle
-	 * of the browser's show operation, where `showPopover()` throws.
-	 */
 	syncOpenEffect(
 		() => element,
 		() => open,
@@ -40,11 +36,6 @@
 		close,
 	)
 
-	/*
-	 * The timeout lives and dies with the snackbar being open, so there is no timer to clear by
-	 * hand: closing early or unmounting runs the cleanup. It holds while the snackbar is hovered or
-	 * keeps focus, and starts over once the snackbar is left alone, so an action stays reachable.
-	 */
 	$effect(() => {
 		if (!open || hovered || focused || timeout <= 0) return
 		const timeoutId = setTimeout(close, timeout)
@@ -52,18 +43,13 @@
 	})
 </script>
 
-<!--
-	`alert` is an atomic live region, so a screen reader reads the whole snackbar out when it appears,
-	label and supporting text together. It needs no name of its own for that, and the ARIA alert
-	pattern gives it none: naming the region after an element inside it only risks that text being
-	announced twice. A caller's own `aria-label` reaches the element through `attributes`.
--->
 <div
 	{...attributes}
 	{popover}
 	class={['np-snackbar', attributes.class]}
 	bind:this={element}
 	role="alert"
+	aria-labelledby="np-snackbar-label-{uid}"
 	onpointerenter={() => (hovered = true)}
 	onpointerleave={() => (hovered = false)}
 	onfocusin={() => (focused = true)}
@@ -75,7 +61,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/dist/tabs/Tab.svelte

@@ -23,10 +23,6 @@
 
 	const tabsContext = getTabsContext()
 
-	/*
-	 * The indicator follows the selection one flush behind, so the anchor it is tied to has moved
-	 * to the tab that is already marked selected rather than to one still being rendered.
-	 */
 	$effect(() => {
 		if (tabsContext.value === value) {
 			tabsContext.indicatorValue = value

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

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

package/dist/toolbar/Toolbar.svelte

@@ -54,12 +54,6 @@
 
 	.np-toolbar-vertical {
 		flex-direction: column;
-		/*
-		 * Stacked actions sit right above one another, so a tooltip in its default place covers the
-		 * button before it. Moving it to the trailing side keeps every action readable, and
-		 * flip-inline sends it the other way when the window edge really is in the way. Material's
-		 * Compose API exposes the same idea as TooltipAnchorPosition.End.
-		 */
 		--np-tooltip-position-area: inline-end;
 		--np-tooltip-justify-self: auto;
 		--np-tooltip-align-self: anchor-center;
@@ -72,14 +66,12 @@
 		--np-rich-tooltip-position-try-fallbacks: flip-inline;
 	}
 
-	/* Docked: full width, flush to the edge, no corner rounding. */
 	.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));
-		/* Clears the home inset when docked to the bottom of a phone screen. */
 		padding-block-end: max(0px, env(safe-area-inset-bottom));
 	}
 	.np-toolbar-docked.np-toolbar-vertical {
@@ -91,10 +83,6 @@
 		padding-inline: 0;
 	}
 
-	/*
-	 * Floating: an island above the content. `position: sticky` keeps it in flow so it never
-	 * covers the end of the page, which `fixed` would.
-	 */
 	.np-toolbar-floating {
 		position: sticky;
 		z-index: 8;

package/dist/toolbar/types.d.ts

@@ -1,15 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
 export interface ToolbarProps extends HTMLAttributes<HTMLElement> {
-    /**
-     * `'docked'` spans the full width of its container and sits flush against an edge, for actions
-     * that stay the same across pages. It replaces M3's deprecated bottom app bar. `'floating'`
-     * hovers above the content as a rounded island, for actions specific to the page.
-     */
     variant?: 'docked' | 'floating';
-    /** Which edge a floating toolbar hovers against. Ignored when docked. */
     placement?: 'bottom' | 'top' | 'start' | 'end';
     orientation?: 'horizontal' | 'vertical';
-    /** Colour role of a floating toolbar's container. */
     color?: 'standard' | 'vibrant';
     element?: HTMLElement;
 }

package/dist/tooltip/RichTooltip.svelte

@@ -13,13 +13,6 @@
 		...attributes
 	}: RichTooltipProps = $props()
 
-	/*
-	 * The control the tooltip is opened from, passed to `showPopover()` as its source so a
-	 * programmatic open gets the invoker relationship the declarative one gets for free: the
-	 * tooltip counts as nested inside any popover its control sits in, rather than dismissing it.
-	 * Either attribute names a control, since `commandfor` and `popovertarget` are separate
-	 * properties that set the same relationship.
-	 */
 	const findControl = () =>
 		id
 			? (document.querySelector<HTMLElement>(`[commandfor="${id}"], [popovertarget="${id}"]`) ??

package/package.json

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