noph-ui 0.45.0 → 0.46.0

package/dist/fab/Fab.svelte

@@ -109,13 +109,6 @@
 		--np-ripple-pressed-color: var(--np-fab-icon-color, var(--_icon-color));
 	}
 
-	/*
-	 * `round` is fully rounded and `square` is the smaller radius, the same way Button reads.
-	 * The FAB box is always square, so `50%` renders identically to `--np-shape-corner-full`
-	 * (9999px) at rest. It matters for the pressed transition below: animating `border-radius`
-	 * 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.
-	 */
 	.round {
 		border-radius: var(--np-fab-shape, 50%);
 	}
@@ -123,13 +116,6 @@
 		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));
@@ -148,11 +134,6 @@
 		}
 	}
 
-	/*
-	 * M3's three recommended sizes, matching the extended FAB's. The 40px FAB it used to also
-	 * define is gone: M3 Expressive no longer recommends it. Each square radius is the shape token
-	 * that goes with the size, large, large-increased and extra-large.
-	 */
 	.s {
 		width: 3.5rem;
 		height: 3.5rem;
@@ -172,10 +153,6 @@
 		--np-icon-size: 2.25rem;
 	}
 
-	/*
-	 * 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);
@@ -226,11 +203,6 @@
 		color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
 	}
 
-	/*
-	 * The icon is never a hit target, matching `Button`'s. Otherwise swapping it out from under
-	 * the pointer, which `FabMenu`'s trigger does when it opens, moves the pointer to a different
-	 * element; the browser hands the button fresh interest on the way and reopens its tooltip.
-	 */
 	.np-fab-icon {
 		display: flex;
 		fill: currentColor;

package/dist/fab/FabMenu.svelte

@@ -24,18 +24,11 @@
 
 	const uid = $props.id()
 	const menuId = `np-fab-menu-${uid}`
-	/*
-	 * One anchor name per instance. A fixed name in the stylesheet is shared by every FabMenu on
-	 * the page, and a duplicated anchor name resolves to the last one in tree order, so every menu
-	 * would open on the last trigger.
-	 */
 	const anchorName = `--np-fab-menu-${uid}`
 
 	let menuElement: HTMLDivElement | undefined = $state()
 	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)', false)
 
-	// Declaring `role="menu"` means owing the keyboard model that goes with it: one tab stop, the
-	// arrows moving between actions. The same attachments the toolbar and the bars use.
 	const ITEMS = 'button, a[href], [role="menuitem"]'
 	const attach = rovingTabindex(ITEMS)
 	const arrowHandler = $derived(
@@ -51,12 +44,6 @@
 		controller.close()
 	}
 
-	/*
-	 * An item runs its own press animation on click, the corner morph a Button or a FAB does. The
-	 * menu is a popover, so closing it means `display: none`, which would cut that off before a
-	 * frame of it is seen. Holding the close for the length of the press lets the item finish.
-	 * Matched to Button's own timer, and skipped entirely when there is no animation to wait for.
-	 */
 	let closeTimeout: ReturnType<typeof setTimeout>
 
 	const closeAfterPress = () => {
@@ -82,10 +69,6 @@
 	)
 </script>
 
-<!--
-	Both icons stay mounted and turn into each other. Swapping one for the other cannot animate:
-	the icon arriving has no previous state to move from, so it can only appear.
--->
 {#snippet triggerIcon()}
 	<span class="np-fab-menu-icons" aria-hidden="true">
 		<span class="np-fab-menu-icon" class:np-fab-menu-icon-away={open}>
@@ -103,12 +86,6 @@
 	style="anchor-name: {anchorName}; {attributes.style ?? ''}"
 	class={['np-fab-menu', `np-fab-menu-${placement}`, attributes.class]}
 >
-	<!--
-		The tooltip is dropped while the menu is open, and the name given directly instead. A
-		tooltip is a `hint` popover, which the browser closes when the menu's `auto` popover opens,
-		and the trigger still holds interest at that point, so it would come straight back and sit
-		over the open menu. There is nothing to hint at anyway once the actions are on screen.
-	-->
 	<Fab
 		{variant}
 		{size}
@@ -134,8 +111,6 @@
 		{@attach attach}
 		onkeydown={arrowHandler}
 		onclick={(event) => {
-			// Picking an action closes the menu. `closeOnSelect={false}` keeps it open for a menu
-			// whose items toggle something instead of navigating away.
 			if (!closeOnSelect) return
 			const target = event.target as HTMLElement
 			if (target.closest(ITEMS)) closeAfterPress()
@@ -154,7 +129,6 @@
 		display: inline-flex;
 	}
 
-	/* One grid cell holds both icons, so they sit on top of each other rather than side by side. */
 	.np-fab-menu-icons {
 		display: grid;
 	}
@@ -172,11 +146,6 @@
 				opacity var(--np-motion-expressive-fast-effects),
 				rotate var(--np-motion-expressive-default-spatial);
 		}
-		/*
-		 * Both turn the same way, so the pair reads as one icon rotating rather than two crossing
-		 * over. The close icon spends its hidden time at -45deg, where an X sits square like the
-		 * plus it replaces, so opening rotates the plus away and the X into place behind it.
-		 */
 		.np-fab-menu-icon-away {
 			rotate: -45deg;
 		}
@@ -194,16 +163,10 @@
 		overflow: visible;
 	}
 
-	/*
-	 * `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 an invisible sheet over the page that swallows clicks.
-	 */
 	.np-fab-menu-list:popover-open {
 		display: flex;
 	}
 
-	/* Which side the items fan out to, and which end they stack from. */
 	.np-fab-menu-block-start .np-fab-menu-list {
 		position-area: block-start;
 		margin-block-end: 0.75rem;
@@ -226,17 +189,6 @@
 		align-items: center;
 	}
 
-	/*
-	 * The items rise into place one after another. Keyframes rather than a transition: a popover
-	 * goes from `display: none` to shown in one step, and a transition has no start value to run
-	 * from, so the items would simply appear. An animation runs when the element becomes displayed.
-	 *
-	 * The whole stagger fits one window, `--_stagger-window`, however many actions there are. That
-	 * is what `sibling-count()` buys over a fixed step: eight actions land in the same time two do,
-	 * each one just following the last a little sooner, rather than the menu taking four times as
-	 * long to finish arriving. Item one starts at 0ms, so the action nearest the trigger moves
-	 * first, and the last one starts as the window closes.
-	 */
 	@media (prefers-reduced-motion: no-preference) {
 		.np-fab-menu-list:popover-open > :global(*) {
 			--_stagger-window: 210ms;

package/dist/fab/types.d.ts

@@ -4,16 +4,7 @@ import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from
 export type FabElement = ButtonElement;
 interface BaseFabProps extends HTMLAttributes<FabElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
     element?: FabElement;
-    /**
-     * Colour style, named after the tokens it maps to. The three tone styles are the stronger
-     * pair, the three container styles the softer one. M3 Expressive no longer recommends a
-     * surface-coloured FAB, so there is no `surface`.
-     */
     variant?: 'primary' | 'secondary' | 'tertiary' | 'primary-container' | 'secondary-container' | 'tertiary-container';
-    /**
-     * 56, 80 and 96 pixels, the same three `Fab` and `ExtendedFab` share. `s` is M3's baseline FAB
-     * and the default. The 40 pixel FAB is not here: M3 Expressive no longer recommends it.
-     */
     size?: 's' | 'm' | 'l';
     shape?: 'round' | 'square';
     lowered?: boolean;
@@ -22,36 +13,21 @@ interface BaseFabProps extends HTMLAttributes<FabElement>, Omit<HTMLButtonAttrib
 }
 export interface FabProps extends BaseFabProps {
     icon?: Snippet;
-    /**
-     * A FAB shows no text, so its accessible name has to come from somewhere. Sets both
-     * `aria-label` and a plain tooltip, the way `Button` treats `title`.
-     */
     label?: string;
 }
 export interface ExtendedFabProps extends BaseFabProps {
     icon?: Snippet;
-    /** Visible text. An extended FAB is named by it, so it needs no `aria-label`. */
     label?: string;
-    /**
-     * Collapses to an icon-only FAB, animating the width. Drive it from a scroll or a media query
-     * to get M3's collapsing FAB.
-     */
     collapsed?: boolean;
 }
 export interface FabMenuProps extends HTMLAttributes<HTMLDivElement> {
-    /** Names the trigger and the menu. The trigger shows no text. */
     label?: string;
-    /** Trigger icon while the menu is closed. */
     icon?: Snippet;
-    /** Trigger icon while the menu is open. Defaults to a close icon. */
     closeIcon?: Snippet;
     variant?: FabProps['variant'];
     size?: FabProps['size'];
-    /** Which side the items fan out to. */
     placement?: 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
-    /** Bindable. Whether the menu is open. */
     open?: boolean;
-    /** Closes the menu when an action is picked, which is what M3 does. */
     closeOnSelect?: boolean;
     element?: HTMLDivElement;
 }

package/dist/loading-indicator/shapes.js

@@ -7,19 +7,12 @@ const decode = (encoded) => {
     return radii;
 };
 export const SHAPES = [
-    // MaterialShapes.SoftBurst
     '2zl30r3533bb3ik3pq3se3s33oh3gs39u33v30a2zn31b3693co3k53qk3sk3ro3n53fb38k32t2zz2zr32037h3e23ls3r83sm3r43lj3dv37c31y2zr30032w38p3fi3ne3rq3sj3qf3jw3ch3653192zm30b33y39z3h03oo3s53sd3pk3ib3b534z30q2zl30r3533bb3ik3pq3se3s33oh3gs39u33v30a2zn31b3693co3k53qk3sk3ro3n53fb38k32t2zz2zr32037h3e23ls3r83sm3r43lj3dv37c31y2zr30032w38p3fi3ne3rq3sj3qf3jw3ch3653192zm30b33y39z3h03oo3s53sd3pk3ib3b534z30q',
-    // MaterialShapes.Cookie9Sided
     '3ne3kp3hr3g53fr3gl3iq3m33ot3qq3rw3sa3rz3qx3p33mg3jc3hi3gz3hn3jn3my3pp3rn3st3t73sv3rs3pw3n73jz3i23hg3i23jz3n73pw3rs3sv3t73st3rn3pp3my3jn3hn3gz3hi3jc3mg3p33qx3rz3sa3rw3qq3ot3m33iq3gl3fr3g53hr3kp3ne3pb3qg3qw3qm3pm3nv3lc3i13fk3eg3ei3fr3ie3lc3nh3ov3pk3pk3ou3ne3l83i93fb3dr3df3e83gb3jh3lz3nr3os3p53os3nr3lz3jh3gb3e83df3dr3fb3i93l83ne3ou3pk3pk3ov3nh3lc3ie3fr3ei3eg3fk3i13lc3nv3pm3qm3qw3qg3pb',
-    // MaterialShapes.Pentagon
     '3ng3lh3jw3im3ho3h23gq3gq3h03hl3ih3jp3l93n63ph3s73vc3y23zz41241e40z3zr3xr3uz3se3q73od3mx3lt3l13kk3kf3kk3l13lt3mx3od3q73se3uz3xr3zr40z41e4123zz3y23vc3s73ph3n63l93jp3ih3hl3h03gq3gq3h23ho3im3jw3lh3ng3pp3rf3se3sp3sb3r93pg3mx3jm3gc3dh3b138z37935u34r33x33e33533533f33y34s35w37b3913b43df3f93gk3hb3hl3hb3gk3f93df3b439137b35w34s33y33f33533533e33x34r35u37938z3b13dh3gc3jm3mx3pg3r93sb3sp3se3rf3pp',
-    // MaterialShapes.Pill
     '3t53rz3qr3pj3o93mz3lo3kd3j13hp3gd3f13dq3cp3by3bj3be3bj3by3cp3dq3f13gd3hp3j13kd3lo3mz3o93pj3qr3rz3t53ua3vd3wc3wu3xm3yg3z83zx40k41341j41x42842f42k42l42k42f42841x41j41340k3zx3z83yg3xm3wu3wc3vd3ua3t53rz3qr3pj3o93mz3lo3kd3j13hp3gd3f13dq3cp3by3bj3be3bj3by3cp3dq3f13gd3hp3j13kd3lo3mz3o93pj3qr3rz3t53ua3vd3wc3wu3xm3yg3z83zx40k41341j41x42842f42k42l42k42f42841x41j41340k3zx3z83yg3xm3wu3wc3vd3ua',
-    // MaterialShapes.Sunny
     '3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa',
-    // MaterialShapes.Cookie4Sided
     '2yr2z530a32b35g39l3ea3iv3mz3qk3tm3w53y73zr40v41j41r41i40u3zr3y63w43tk3qi3mw3it3e739j35f32a3092z42yr2z530a32b35g39l3ea3iv3mz3qk3tm3w53y73zr40v41j41r41i40u3zr3y63w43tk3qi3mw3it3e739j35f32a3092z42yr2z530a32b35g39l3ea3iv3mz3qk3tm3w53y73zr40v41j41r41i40u3zr3y63w43tk3qi3mw3it3e739j35f32a3092z42yr2z530a32b35g39l3ea3iv3mz3qk3tm3w53y73zr40v41j41r41i40u3zr3y63w43tk3qi3mw3it3e739j35f32a3092z4',
-    // MaterialShapes.Oval
     '3ec3bw39m37i35k33s32630q2zg2yb2xc2wj2vv2vd2uz2ur2up2ur2uz2vd2vv2wj2xc2yb2zg30q32633s35k37i39m3bw3ec3gx3jn3mi3ph3sj3vn3yr41t44r47j4a14c84e14fd4g64gg4g64fd4e14c84a147j44r41t3yr3vn3sj3ph3mi3jn3gx3ec3bw39m37i35k33s32630q2zg2yb2xc2wj2vv2vd2uz2ur2up2ur2uz2vd2vv2wj2xc2yb2zg30q32633s35k37i39m3bw3ec3gx3jn3mi3ph3sj3vn3yr41t44r47j4a14c84e14fd4g64gg4g64fd4e14c84a147j44r41t3yr3vn3sj3ph3mi3jn3gx',
 ].map(decode);
 export const CIRCLE = decode('3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so');

package/dist/navigation-bar/NavigationBar.svelte

@@ -10,7 +10,6 @@
 		...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')
 
@@ -45,20 +44,14 @@
 		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;

package/dist/navigation-bar/NavigationBarItem.svelte

@@ -32,7 +32,6 @@
 
 {#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">
@@ -104,7 +103,6 @@
 		z-index: 1;
 	}
 
-	/* The active-indicator pill, grown from the selected class rather than measured. */
 	.np-navigation-bar-item-icon::before {
 		content: '';
 		position: absolute;
@@ -144,10 +142,6 @@
 		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;
 	}
@@ -156,28 +150,13 @@
 		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 {
@@ -197,7 +176,6 @@
 		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;

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

@@ -1,11 +1,6 @@
 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;
 }
@@ -17,12 +12,7 @@ export interface NavigationBarItemProps extends HTMLAttributes<NavigationBarItem
     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-drawer/NavigationDrawer.svelte

@@ -23,7 +23,6 @@
 		if (!event.defaultPrevented) arrowHandler(event)
 	}
 
-	/* Only a modal drawer is a dialog; a standard one is a nav that is always in the layout. */
 	const asDialog = () => (element instanceof HTMLDialogElement ? element : undefined)
 
 	export const show = () => {
@@ -45,12 +44,6 @@
 	const start = $derived(direction === 'ltr' ? 'translateX(-100%)' : 'translateX(100%)')
 </script>
 
-<!--
-	A modal drawer is a `dialog` holding a nav landmark, so the browser keeps the page behind it
-	inert for as long as it is open and hands focus back on close. `::backdrop` is the scrim and
-	`closedby="any"` the tap-outside-to-close. Where `closedby` is unsupported the click handler
-	below covers it: a click on the backdrop is reported against the dialog itself.
--->
 {#if modal}
 	<dialog
 		{...attributes}
@@ -70,11 +63,6 @@
 		onkeydown={handleKeydown}
 		ontoggle={(event) => {
 			open = event.newState === 'open'
-			/*
-			 * Without this the browser autofocuses the first focusable descendant, the first nav
-			 * item. Focus the drawer itself instead, so nothing is focused that the user didn't
-			 * choose to interact with.
-			 */
 			if (event.newState === 'open') element?.focus()
 			ontoggle?.(event)
 		}}
@@ -83,12 +71,6 @@
 			if (event.target === element) close()
 		}}
 	>
-		<!--
-			The label belongs to the navigation landmark, not to the dialog wrapping it, so it is
-			pulled back off the dialog above and put here. Everything else stays on the dialog: it
-			is the container the layout and the custom properties are written against, and the
-			element `commandfor` has to reach.
-		-->
 		<nav
 			aria-label={attributes['aria-label']}
 			aria-labelledby={attributes['aria-labelledby']}
@@ -120,7 +102,6 @@
 		color: var(--np-color-on-surface-variant);
 		width: calc(var(--np-navigation-drawer-width, 22.5rem) + 3px);
 		border: 0;
-		/* Focus lands here on open only to stay off the first nav item, not as something to show. */
 		outline: none;
 		margin: 0;
 		padding: 0;
@@ -129,7 +110,6 @@
 		max-height: none;
 	}
 
-	/* The modal drawer is docked to the inline edge rather than centred as a dialog would be. */
 	.np-navigation-drawer-container-modal {
 		position: fixed;
 		inset-block: 0;
@@ -183,7 +163,6 @@
 		box-shadow: var(--np-elevation-1);
 	}
 
-	/* `backdrop` decides whether the scrim is painted; a modal dialog always has the layer. */
 	.np-navigation-drawer-container-modal::backdrop {
 		background-color: transparent;
 	}

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

@@ -1,11 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export interface NavigationDrawerProps extends HTMLAttributes<HTMLElement> {
-    /** A modal drawer is a `dialog` over the page; a standard one is part of the layout. */
     modal?: boolean;
-    /** Paints the scrim behind a modal drawer. */
     backdrop?: boolean;
-    /** Bindable. Whether a modal drawer is showing. Ignored by a standard drawer. */
     open?: boolean;
     element?: HTMLElement;
     direction?: 'rtl' | 'ltr';

package/dist/popover.svelte.d.ts

@@ -1,14 +1,5 @@
-/**
- * `show()`/`close()` for a popover-backed overlay, guarded both ways. `showPopover()` throws if
- * the popover is already showing and `hidePopover()` throws if it is already hidden, so both
- * directions need the `:popover-open` check, not just the one that happens to get exercised first.
- */
 export declare const popoverController: (getElement: () => HTMLElement | undefined) => {
     show: () => void;
     close: () => void;
 };
-/**
- * Keeps a bindable `open` prop in sync with an overlay's own `show`/`close`, so a caller can drive
- * the overlay either by calling the exported methods or by writing to the bound prop.
- */
 export declare const syncOpenEffect: (getElement: () => HTMLElement | undefined, getOpen: () => boolean | undefined, show: () => void, close: () => void) => void;

package/dist/popover.svelte.js

@@ -1,8 +1,3 @@
-/**
- * `show()`/`close()` for a popover-backed overlay, guarded both ways. `showPopover()` throws if
- * the popover is already showing and `hidePopover()` throws if it is already hidden, so both
- * directions need the `:popover-open` check, not just the one that happens to get exercised first.
- */
 export const popoverController = (getElement) => ({
     show: () => {
         const element = getElement();
@@ -15,10 +10,6 @@ export const popoverController = (getElement) => ({
             element.hidePopover();
     },
 });
-/**
- * Keeps a bindable `open` prop in sync with an overlay's own `show`/`close`, so a caller can drive
- * the overlay either by calling the exported methods or by writing to the bound prop.
- */
 export const syncOpenEffect = (getElement, getOpen, show, close) => {
     $effect(() => {
         if (!getElement())

package/dist/press.svelte.d.ts

@@ -1,19 +1,6 @@
 export declare const PRESS_DURATION = 100;
-/**
- * The corner morph a Button, an IconButton or a FAB plays when it is activated. `:active` covers
- * the press itself, but it drops the moment the pointer lifts, so a quick click would show only a
- * frame or two of the morph. The `pressed` this returns is held for as long as the round trip
- * takes to be seen, and is set from `click`, which arrives for the keyboard as well as the pointer.
- */
 export declare const pressMorph: () => {
     readonly pressed: boolean;
     press: () => void;
-    /**
-     * A change of `shape` supersedes the morph. Both describe the same corner, and the pressed
-     * radius is the shape the element is not, so holding the press across a shape change cancels
-     * the change out and stalls it until the timer runs down. FabMenu's trigger does exactly
-     * that, flipping to `square` on the click that opens the menu; dropping the press there
-     * leaves that click one continuous morph.
-     */
     supersededBy: (shape: () => unknown) => void;
 };

package/dist/press.svelte.js

@@ -1,11 +1,5 @@
 import { onMount } from 'svelte';
 export const PRESS_DURATION = 100;
-/**
- * The corner morph a Button, an IconButton or a FAB plays when it is activated. `:active` covers
- * the press itself, but it drops the moment the pointer lifts, so a quick click would show only a
- * frame or two of the morph. The `pressed` this returns is held for as long as the round trip
- * takes to be seen, and is set from `click`, which arrives for the keyboard as well as the pointer.
- */
 export const pressMorph = () => {
     let pressed = $state(false);
     let timeout;
@@ -23,13 +17,6 @@ export const pressMorph = () => {
             pressed = true;
             timeout = setTimeout(() => (pressed = false), PRESS_DURATION);
         },
-        /**
-         * A change of `shape` supersedes the morph. Both describe the same corner, and the pressed
-         * radius is the shape the element is not, so holding the press across a shape change cancels
-         * the change out and stalls it until the timer runs down. FabMenu's trigger does exactly
-         * that, flipping to `square` on the click that opens the menu; dropping the press there
-         * leaves that click one continuous morph.
-         */
         supersededBy: (shape) => {
             let previous;
             $effect(() => {