noph-ui 0.45.0 → 0.45.1

package/dist/animation.d.ts

@@ -1,17 +1,2 @@
-/**
- * Runs `fn` after two frames, so a class or attribute change written just before it has been through
- * one style recalculation. Returns a canceller.
- */
 export declare const afterTwoFrames: (fn: () => void) => () => void;
-/**
- * Runs `fn` once `element` has finished the transitions it is playing, so content gated on `open`
- * can stay mounted for as long as its container is still on screen. A container that animates its
- * exit is still painted after `open` has flipped to `false`, and content dropped on that flip empties
- * the container a frame before it starts to leave.
- *
- * The wait starts two frames in because a transition does not exist until the browser has
- * recalculated styles, so `getAnimations()` reads empty straight after the change that starts it.
- * An element with no exit animation therefore finishes on the second frame. Returns a canceller for
- * the container reopening mid exit.
- */
 export declare const afterExit: (element: Element | undefined, fn: () => void) => () => void;

package/dist/animation.js

@@ -1,7 +1,3 @@
-/**
- * Runs `fn` after two frames, so a class or attribute change written just before it has been through
- * one style recalculation. Returns a canceller.
- */
 export const afterTwoFrames = (fn) => {
     let inner = 0;
     const outer = requestAnimationFrame(() => {
@@ -12,17 +8,6 @@ export const afterTwoFrames = (fn) => {
         cancelAnimationFrame(inner);
     };
 };
-/**
- * Runs `fn` once `element` has finished the transitions it is playing, so content gated on `open`
- * can stay mounted for as long as its container is still on screen. A container that animates its
- * exit is still painted after `open` has flipped to `false`, and content dropped on that flip empties
- * the container a frame before it starts to leave.
- *
- * The wait starts two frames in because a transition does not exist until the browser has
- * recalculated styles, so `getAnimations()` reads empty straight after the change that starts it.
- * An element with no exit animation therefore finishes on the second frame. Returns a canceller for
- * the container reopening mid exit.
- */
 export const afterExit = (element, fn) => {
     if (!element) {
         fn();

package/dist/app-bar/AppBar.svelte

@@ -17,7 +17,6 @@
 
 	const twoLine = $derived(variant === 'medium' || variant === 'large')
 	const isSearch = $derived(variant === 'search')
-	// Only a two-line bar has a second row to collapse.
 	const collapses = $derived(collapsible && twoLine)
 </script>
 
@@ -46,13 +45,8 @@
 			<div class="np-app-bar-leading">{@render leading()}</div>
 		{/if}
 		{#if isSearch}
-			<!-- A search app bar carries a field in place of a headline. -->
 			<div class="np-app-bar-search-field">{@render search?.()}</div>
 		{:else if twoLine}
-			<!--
-				The collapsed copy of the headline and subtitle. Hidden from assistive technology so they
-				are announced once; the real ones below stay in the accessibility tree even at height zero.
-			-->
 			<div class="np-app-bar-inline" aria-hidden="true">{@render titles(true)}</div>
 		{:else}
 			{@render titles(false)}
@@ -83,12 +77,6 @@
 		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
 	}
 
-	/*
-	 * An expanded search floats past the bar's own bounds, into the space of whatever comes
-	 * after it in the document. Sibling bars share the same z-index, so without this the one
-	 * holding the expanded search would lose to a later sibling and the view would open behind
-	 * it rather than over it.
-	 */
 	.np-app-bar:has(:global(.np-search-expanded)) {
 		z-index: 9;
 	}
@@ -98,7 +86,6 @@
 		align-items: center;
 		gap: 0.5rem;
 		flex: none;
-		/* `min-height` rather than `height`, so a subtitle on a one-row bar grows it. */
 		min-height: 4rem;
 		padding-inline: 0.25rem;
 	}
@@ -131,7 +118,6 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-	/* The collapsed copy sits on one row, so its subtitle stays at the small size. */
 	.np-app-bar-titles-inline .np-app-bar-headline {
 		font-size: 1.375rem;
 	}
@@ -147,16 +133,11 @@
 		min-width: 0;
 	}
 
-	/* One-row bars: the headline sits in the action row. */
 	.np-app-bar-small,
 	.np-app-bar-search {
 		--_headline-size: 1.375rem;
 	}
 
-	/*
-	 * The field takes the row, so a search bar has no headline to size. Named `-search-field`
-	 * rather than `-search`, which is already the variant class on the header.
-	 */
 	.np-app-bar-search-field {
 		flex: 1;
 		min-width: 0;
@@ -169,21 +150,15 @@
 		flex: 1;
 	}
 
-	/* Two-row bars: the headline sits below, and the inline copy is revealed on collapse. */
 	.np-app-bar-medium {
 		--_headline-size: 1.5rem;
-		--_second-row-height: 3rem; /* medium: 64 + 48 = 112 */
+		--_second-row-height: 3rem;
 	}
 	.np-app-bar-large {
 		--_headline-size: 1.75rem;
-		--_second-row-height: 5.5rem; /* large: 64 + 88 = 152 */
+		--_second-row-height: 5.5rem;
 	}
 
-	/*
-	 * Sized by its content with a floor, not a fixed height, so a headline plus a subtitle is not
-	 * clipped. `interpolate-size` lets the collapse animate that intrinsic height down to zero,
-	 * the same way the extended FAB animates its width.
-	 */
 	.np-app-bar-second-row {
 		interpolate-size: allow-keywords;
 		display: flex;
@@ -207,41 +182,17 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		/* Hidden until the bar collapses. */
 		opacity: 0;
 	}
 
-	/*
-	 * The collapse. `animation-timeline: scroll()` drives these keyframes from the scroll position
-	 * itself, so there is no scroll listener, no measurement and no state. `animation-range` ends
-	 * the collapse once the page has scrolled past the second row's height.
-	 */
 	@supports (animation-timeline: scroll()) {
-		/*
-		 * Scroll anchoring has to be off on whichever element scrolls, or the collapse cannot
-		 * happen at all: the bar shrinking above the viewport is exactly the content shift that
-		 * anchoring exists to compensate for, so the browser pushes the scroll position back and
-		 * the two fight to a standstill. `:has()` reaches the scroller so a consumer does not have
-		 * to know this, and only ever matches when a collapsible bar is actually present.
-		 */
 		:global(html:has(.np-app-bar-collapsible)) {
 			overflow-anchor: none;
 		}
-		/*
-		 * `scroll(nearest block)` resolves to the nearest scrollable ancestor at any depth, and CSS
-		 * cannot single that one out, so every ancestor of the bar is covered. Turning anchoring off
-		 * on an ancestor that does not scroll costs nothing.
-		 */
 		:global(:has(.np-app-bar-scroller-nearest)) {
 			overflow-anchor: none;
 		}
 
-		/*
-		 * Deliberately not gated on `prefers-reduced-motion`. The collapse is a layout state tied
-		 * one to one to the scroll position, the way `position: sticky` is, not motion that plays on
-		 * its own. Turning it off would leave the bar permanently eating a third of a small screen
-		 * rather than removing an animation.
-		 */
 		.np-app-bar-collapsible .np-app-bar-second-row {
 			animation: np-app-bar-collapse linear both;
 			animation-timeline: scroll(root block);
@@ -268,7 +219,6 @@
 	}
 
 	@keyframes np-app-bar-reveal {
-		/* Held hidden for the first half, so the two headlines cross rather than overlap. */
 		0%,
 		50% {
 			opacity: 0;

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

@@ -1,35 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface AppBarProps extends HTMLAttributes<HTMLElement> {
-    /**
-     * M3 Expressive's four: `'search'` carries a search field instead of a headline and is the
-     * emphasised, global entry point to search. `'small'` is one row. `'medium'` and `'large'` are
-     * the flexible variants, putting the headline on a second line below the action row.
-     */
     variant?: 'search' | 'small' | 'medium' | 'large';
-    /** Named `headline` rather than `title`, which is the native tooltip attribute. */
     headline?: string;
-    /** Secondary line under the headline. */
     subtitle?: string;
-    /** Leading action, usually a navigation or back icon button. */
     leading?: Snippet;
-    /**
-     * The search field for `variant="search"`. Put a `Search` here. Replaces the headline, which a
-     * search app bar does not show.
-     */
     search?: Snippet;
-    /** Trailing actions. */
     trailing?: Snippet;
-    /**
-     * Collapses a `medium` or `large` bar down to one row as the page scrolls. Driven by
-     * `animation-timeline: scroll()`, so there is no scroll listener. Where that is unsupported the
-     * bar simply stays expanded.
-     */
     collapsible?: boolean;
-    /**
-     * The element the collapse is tied to. `'root'` (the default) follows the page scroller; pass a
-     * different scroll container's axis with `'nearest'` when the bar sits inside one.
-     */
     scroller?: 'root' | 'nearest';
     element?: HTMLElement;
 }

package/dist/button/SplitButton.svelte

@@ -22,7 +22,6 @@
 	const uid = $props.id()
 	const menuId = `np-split-button-menu-${uid}`
 
-	// The trailing half is the menu's invoker, so it is also the popover's implicit anchor.
 	let trigger: HTMLElement | undefined = $state()
 </script>
 
@@ -37,10 +36,6 @@
 	class={['np-split-button', attributes.class]}
 >
 	<Button {variant} {size} {disabled} {onclick} start={icon}>{label}</Button>
-	<!--
-		A `Button` rather than an `IconButton`, because an icon button has no `elevated` variant and
-		a split button's two halves have to match.
-	-->
 	<Button
 		{variant}
 		{size}
@@ -60,29 +55,17 @@
 </ButtonGroup>
 
 <style>
-	/* The caret turns over while the menu is open, the way the select arrow does. */
 	:global(.np-split-button-trigger svg) {
 		transition: rotate var(--np-motion-expressive-fast-effects);
 	}
 	:global(.np-split-button-trigger[aria-expanded='true'] svg) {
 		rotate: 180deg;
 	}
-	/*
-		The trailing half only holds a caret, so it does not need a full button's width. It is
-		square rather than merely narrow, because every size sets its round corner to half its
-		height, and only on a square does that corner come out as a true circle.
-	*/
 	:global(.np-split-button > .np-split-button-trigger) {
 		--np-button-padding: 0;
 		aspect-ratio: 1;
 		justify-content: center;
 	}
-	/*
-		While the menu is open the trailing half reads as selected: its inner corner rounds out to
-		the outer one, so the half becomes a circle, and it keeps a state layer up. Overriding the
-		group's inner corner rather than `border-radius` leaves ButtonGroup's own corner rules in
-		charge of which corner is which.
-	*/
 	:global(.np-split-button > .np-split-button-trigger[aria-expanded='true']) {
 		--np-button-group-inner-corner: var(--_round-radius, var(--np-shape-corner-full));
 	}

package/dist/button/types.d.ts

@@ -29,20 +29,14 @@ export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
     element?: HTMLElement;
 }
 export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onclick'> {
-    /** Text of the leading action. */
     label?: string;
-    /** Leading icon on the action half. */
     icon?: Snippet;
-    /** Menu items for the trailing half. Rendered inside a `Menu`. */
     menu?: Snippet<[string]>;
     variant?: Exclude<ButtonProps['variant'], 'text'>;
     size?: BaseButtonProps['size'];
     disabled?: boolean | null;
-    /** Bindable. Whether the menu is open. */
     open?: boolean;
-    /** Accessible name for the trailing half, which shows only a caret. */
     menuLabel?: string;
-    /** The action half's click handler. The trailing half opens the menu instead. */
     onclick?: MouseEventHandler<ButtonElement>;
     element?: HTMLElement;
 }

package/dist/checkbox/Checkbox.svelte

@@ -21,8 +21,6 @@
 	let groupValue = $derived(
 		typeof value === 'string' || typeof value === 'number' ? value : undefined,
 	)
-	// A grouped checkbox takes its checked state from the group, so it cannot also `bind:checked`.
-	// One controlled input covers both, with the change handler writing back whichever is in play.
 	let isChecked = $derived(
 		Array.isArray(group) && groupValue !== undefined ? group.includes(groupValue) : checked,
 	)

package/dist/chip/FilterChip.svelte

@@ -29,8 +29,6 @@
 
 	let chipLabel: HTMLLabelElement | undefined = $state()
 
-	// A grouped chip takes its checked state from the group, so it cannot also `bind:checked`. One
-	// controlled input covers both, with the change handler writing back whichever is in play.
 	let isChecked = $derived(
 		Array.isArray(group) && value !== undefined ? group.includes(value) : selected,
 	)

package/dist/chip/types.d.ts

@@ -4,10 +4,6 @@ import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, MouseE
 export interface ChipSetProps extends HTMLAttributes<HTMLDivElement> {
     element?: HTMLDivElement;
 }
-/**
- * Declared from the element attributes rather than `ButtonProps`, which leaked `size`, `shape`,
- * `toggle`, `loading` and `selected` onto a chip. A chip has one size and one shape.
- */
 export interface AssistChipProps extends HTMLAttributes<ButtonElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
     variant?: 'outlined' | 'elevated';
     disabled?: boolean | null;
@@ -16,10 +12,6 @@ export interface AssistChipProps extends HTMLAttributes<ButtonElement>, Omit<HTM
     element?: HTMLElement;
     type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
 }
-/**
- * A suggestion chip carries a generated suggestion rather than an action, so it is text-first and
- * takes no leading icon. Everything else matches an assist chip.
- */
 export type SuggestionChipProps = Omit<AssistChipProps, 'icon'>;
 export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;

package/dist/date-picker/DatePickerDialog.svelte

@@ -130,11 +130,6 @@
 		cancelYearEnter = afterTwoFrames(() => (yearEnter = false))
 	}
 
-	/*
-	 * The same pair every overlay in the library exports. A trigger with `command="show-modal"` and
-	 * `commandfor` needs neither, so these are for the times there is no trigger to point at the
-	 * dialog. `open` follows either way, written back from the dialog's own toggle event.
-	 */
 	export const show = () => {
 		if (element && !element.open) element.showModal()
 	}
@@ -227,8 +222,6 @@
 		} else {
 			if (!confirming) oncancel?.()
 			confirming = false
-			// Handing the month back before the dialog has gone would step the calendar to another
-			// month in front of the user, so that waits for the fade as well.
 			exit.scheduleExit(element, () => (displayMonth = monthBeforeOpen))
 		}
 	}}
@@ -246,9 +239,6 @@
 						type="button"
 						aria-label={mode === 'calendar' ? inputModeLabel : calendarModeLabel}
 						onclick={() => {
-							// The calendar moves `pending` on without touching the field, so the text has to
-							// catch up before it is shown again. Otherwise the field contradicts the headline
-							// and OK confirms a date the user never saw there.
 							if (mode === 'calendar') syncText()
 							setMode(mode === 'calendar' ? 'input' : 'calendar')
 							showYearPicker(false)

package/dist/date-picker/DateRangePicker.svelte

@@ -116,11 +116,6 @@
 		if (target && scroller) scroller.scrollTop = target.offsetTop
 	}
 
-	/*
-	 * The same pair every overlay in the library exports. A trigger with `command="show-modal"` and
-	 * `commandfor` needs neither, so these are for the times there is no trigger to point at the
-	 * dialog. `open` follows either way, written back from the dialog's own toggle event.
-	 */
 	export const show = () => {
 		if (element && !element.open) element.showModal()
 	}

package/dist/date-picker/DockedDatePicker.svelte

@@ -35,7 +35,6 @@
 	let {
 		value = $bindable(),
 		defaultValue,
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars -- absorbed on purpose
 		type,
 		'aria-invalid': ariaInvalid,
 		style,
@@ -215,11 +214,6 @@
 		focusCalendar()
 	}
 
-	/*
-	 * The same pair every overlay in the library exports, for the times there is no trigger to point
-	 * at the picker. `close()` leaves focus where it is; only a close the user asked for, through the
-	 * field or the cancel button, hands focus back to the input.
-	 */
 	export const show = () => openPicker()
 
 	export const close = () => {
@@ -269,7 +263,6 @@
 		const parsed = usableDate(next)
 		commit(parsed ? toISODate(parsed) : undefined)
 		if (parsed) setMonth(parsed)
-		// Recorded after the commit, so that it is remembered against the value it just produced.
 		typed = { source: current, text: next }
 		invalidText = undefined
 	}
@@ -281,8 +274,6 @@
 		}
 		const parsed = usableDate(text)
 		invalidText = parsed ? undefined : text
-		// Leaving the field tidies a loose entry: dropping what was typed falls back to the
-		// canonical formatting of the value it produced.
 		if (parsed) typed = undefined
 	}
 
@@ -299,8 +290,6 @@
 	}
 
 	const chooseYear = (year: number) => {
-		// A year is offered as soon as any of its days is in range, so keeping the month the list was
-		// opened from can land on a month where nothing at all is selectable.
 		setMonth(new Date(year, clampMonthInYear(year, monthDate.getMonth(), minDate, maxDate), 1))
 		leaveList()
 	}

package/dist/date-picker/DockedDateTimePicker.svelte

@@ -49,7 +49,6 @@
 	let {
 		value = $bindable(),
 		defaultValue,
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars -- absorbed on purpose
 		type,
 		'aria-invalid': ariaInvalid,
 		style,
@@ -119,8 +118,6 @@
 	let week = $derived(firstDayOfWeek ?? getFirstDayOfWeek(locale))
 	let minDate = $derived(parseISODateTime(min))
 	let maxDate = $derived(parseISODateTime(max, MINUTES_IN_DAY - 1))
-	// `as('datetime-local')` types its value as `string | number` and carries the last submission in
-	// `defaultValue`, so both are funnelled into one ISO string the rest of the component reads.
 	let current = $derived<string | undefined>(
 		typeof value === 'string' ? value : typeof defaultValue === 'string' ? defaultValue : undefined,
 	)
@@ -298,11 +295,6 @@
 		focusCalendar()
 	}
 
-	/*
-	 * The same pair every overlay in the library exports, for the times there is no trigger to point
-	 * at the picker. `close()` leaves focus where it is; only a close the user asked for, through the
-	 * field or the cancel button, hands focus back to the input.
-	 */
 	export const show = () => openPicker()
 
 	export const close = () => {

package/dist/date-picker/exitVisibility.svelte.d.ts

@@ -1,8 +1,3 @@
-/**
- * `visible` for a dialog that fades itself out, so it stays on screen after `open` has flipped to
- * `false`. Content tied to `open` would leave the fading dialog empty a frame before it starts to
- * leave, so this holds `visible` true until the exit animation has actually finished.
- */
 export declare const exitVisibility: () => {
     readonly visible: boolean;
     show: () => void;

package/dist/date-picker/exitVisibility.svelte.js

@@ -1,14 +1,7 @@
 import { afterExit } from '../animation.js';
-/**
- * `visible` for a dialog that fades itself out, so it stays on screen after `open` has flipped to
- * `false`. Content tied to `open` would leave the fading dialog empty a frame before it starts to
- * leave, so this holds `visible` true until the exit animation has actually finished.
- */
 export const exitVisibility = () => {
     let visible = $state(false);
     let cancelExit;
-    // A dialog torn down mid fade has nothing left to reveal, and running a stale `onDone` against a
-    // parent that has already dropped its state is worse than not running it at all.
     $effect(() => () => cancelExit?.());
     return {
         get visible() {

package/dist/date-picker/optionList.d.ts

@@ -1,16 +1,4 @@
 import type { Attachment } from 'svelte/attachments';
 import type { TimeOption } from './types.ts';
-/**
- * The option that carries the list's single tab stop: the selected one, or else the offered option
- * nearest to the value, so arriving with the keyboard lands next to where the value already is.
- */
 export declare const tabStop: (options: TimeOption[], value: number | undefined) => number | undefined;
-/**
- * Scrolls the selected option into view inside its own list, rather than through `scrollIntoView`,
- * which takes every scrollable ancestor with it and would move the page behind the picker.
- *
- * `centre` puts the option in the middle of the list every time it changes. Otherwise the list is
- * centred once, on the option it opens with, and afterwards the selection is only pulled to the
- * nearest edge when it has moved out of view, so stepping through options does not jump the list.
- */
 export declare const revealSelected: (centre?: boolean) => Attachment<HTMLElement>;

package/dist/date-picker/optionList.js

@@ -1,7 +1,3 @@
-/**
- * The option that carries the list's single tab stop: the selected one, or else the offered option
- * nearest to the value, so arriving with the keyboard lands next to where the value already is.
- */
 export const tabStop = (options, value) => {
     if (options.some((option) => option.value === value))
         return value;
@@ -13,14 +9,6 @@ export const tabStop = (options, value) => {
         return pool[0].value;
     return pool.reduce((nearest, option) => Math.abs(option.value - value) < Math.abs(nearest.value - value) ? option : nearest).value;
 };
-/**
- * Scrolls the selected option into view inside its own list, rather than through `scrollIntoView`,
- * which takes every scrollable ancestor with it and would move the page behind the picker.
- *
- * `centre` puts the option in the middle of the list every time it changes. Otherwise the list is
- * centred once, on the option it opens with, and afterwards the selection is only pulled to the
- * nearest edge when it has moved out of view, so stepping through options does not jump the list.
- */
 export const revealSelected = (centre = false) => {
     let centred = false;
     return (element) => {

package/dist/dialog/Dialog.svelte

@@ -20,10 +20,6 @@
 
 	const uid = $props.id()
 
-	/*
-	 * A modal dialog can only be opened from script or from a `command` button; `<dialog open>` on
-	 * its own is the non-modal kind, with no focus trap and no backdrop.
-	 */
 	export const show = () => {
 		if (element && !element.open) element.showModal()
 	}
@@ -40,13 +36,6 @@
 	)
 </script>
 
-<!--
-	A `dialog`, not a popover. `showModal()` keeps everything outside inert for as long as the dialog
-	is open, including anything added to the page while it is open, and hands focus back on close.
-	`::backdrop` is the scrim and `closedby="any"` the click-outside-to-close. Where `closedby` is
-	unsupported the click handler below covers it: a click on the backdrop is reported against the
-	dialog itself.
--->
 <dialog
 	bind:this={element}
 	{...attributes}
@@ -57,11 +46,6 @@
 	class={['np-dialog-container', !quick && 'np-animate', attributes.class]}
 	ontoggle={(event) => {
 		open = event.newState === 'open'
-		/*
-		 * Without this the browser autofocuses the first focusable descendant, one of the actions,
-		 * which can be a destructive one. Focus the dialog itself instead, so nothing is focused
-		 * that the user didn't choose to interact with.
-		 */
 		if (event.newState === 'open') element?.focus()
 		ontoggle?.(event)
 	}}
@@ -108,7 +92,6 @@
 	.np-dialog-container {
 		background: transparent;
 		border: none;
-		/* Focus lands here on open only to stay off the actions, not as something to show. */
 		outline: none;
 		margin: auto;
 		padding: var(--np-dialog-inset, 2rem 1rem);
@@ -120,14 +103,9 @@
 		overflow: visible;
 		color: var(--np-color-on-surface);
 	}
-	/* A closed dialog is `display: none` from the user agent, which the enter transition needs. */
 	.np-dialog-container:not([open]) {
 		display: none;
 	}
-	/*
-	 * The exit transition holds the dialog in the top layer after it has closed, where it would go on
-	 * taking the clicks meant for the page behind it.
-	 */
 	.np-animate:not([open]) {
 		pointer-events: none;
 	}

package/dist/dialog/types.d.ts

@@ -8,6 +8,5 @@ export interface DialogProps extends Omit<HTMLDialogAttributes, 'open'> {
     actions?: Snippet;
     quick?: boolean;
     element?: HTMLDialogElement;
-    /** Bindable. Whether the dialog is showing. */
     open?: boolean;
 }

package/dist/fab/ExtendedFab.svelte

@@ -22,7 +22,6 @@
 	const uid = $props.id()
 
 	const isLink = $derived(attributes.href != null && !disabled)
-	// Collapsed, the text is hidden, so the label has to be announced some other way.
 	const tooltipId = $derived(collapsed && label && !disabled ? uid : undefined)
 
 	const morph = pressMorph()
@@ -97,10 +96,6 @@
 {/if}
 
 <style>
-	/*
-	 * `interpolate-size` lets the intrinsic width animate, so collapsing is a plain CSS
-	 * transition on `width` rather than a measured pixel value.
-	 */
 	.np-extended-fab {
 		interpolate-size: allow-keywords;
 		position: relative;
@@ -128,27 +123,12 @@
 		padding-inline: var(--_padding);
 	}
 
-	/*
-	 * `calc(var(--_height) / 2)` renders identically to `--np-shape-corner-full` (9999px) at
-	 * rest, since border-radius clamps an oversized radius down to exactly half the height
-	 * anyway. It matters for the pressed transition: animating from a huge fixed value spends
-	 * nearly the whole transition on radii that still render as fully round, so the morph never
-	 * becomes visible during a normal, brief click. `50%` isn't a substitute here, since the box
-	 * isn't square, it would resolve to an elliptical corner rather than a round pill end.
-	 */
 	.round {
 		border-radius: var(--np-fab-shape, calc(var(--_height) / 2));
 	}
 	.square {
 		border-radius: var(--np-fab-shape, var(--_square-radius));
 	}
-	/*
-	 * A press morphs the corner towards the other shape. `:active` alone drops the moment the
-	 * pointer lifts, which on a normal click is long before the morph has played, so the short
-	 * `pressed` class holds the shape until the whole round trip is visible, the way Button does
-	 * it. Both are gated on the motion preference, since without the transition below this is
-	 * only an instant snap.
-	 */
 	@media (prefers-reduced-motion: no-preference) {
 		.round:not(:disabled):is(:active, .pressed) {
 			border-radius: var(--np-fab-pressed-shape, var(--_square-radius));
@@ -158,7 +138,6 @@
 		}
 	}
 
-	/* The same three sizes as `Fab`, which is what M3 Expressive aligned the two on. */
 	.s {
 		--_height: 3.5rem;
 		--_square-radius: 1rem;
@@ -184,7 +163,6 @@
 		--np-icon-size: 2.25rem;
 	}
 
-	/* Collapsed is the icon-only FAB: square box, no text, no padding around the label. */
 	.np-fab-collapsed {
 		width: var(--_height);
 		padding-inline: 0;
@@ -219,10 +197,6 @@
 		}
 	}
 
-	/*
-	 * M3's colour styles, named after the tokens they map to. The tone styles are the stronger
-	 * pair, the container styles the softer one. The surface style M3 Expressive dropped is gone.
-	 */
 	.np-fab-primary {
 		--_container-color: var(--np-color-primary);
 		--_icon-color: var(--np-color-on-primary);