noph-ui 0.51.2 → 0.52.0

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
 	import Badge from '../badge/Badge.svelte'
+	import { badgeDescription } from '../badge/description.js'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
+	import { getNavigationRailContext } from './context.js'
 	import type { NavigationRailItemProps } from './types.js'
 
 	let {
@@ -15,23 +17,47 @@
 		element = $bindable(),
 		...attributes
 	}: NavigationRailItemProps = $props()
-	let touchEl: HTMLSpanElement | undefined = $state()
+
+	const uid = $props.id()
+	let badgeId = $derived(badge ? `${uid}-badge` : undefined)
+	let describedBy = $derived(
+		[attributes['aria-describedby'], badgeId].filter(Boolean).join(' ') || undefined,
+	)
 
 	let isLink = $derived(attributes.href != null)
+
+	const rail = getNavigationRailContext()
+	let expanded = $derived(rail?.expanded ?? false)
+
+	let classes = $derived([
+		'np-navigation-action',
+		selected && 'np-navigation-action-selected',
+		expanded && 'np-navigation-action-expanded',
+		attributes.class,
+	])
 </script>
 
 {#snippet content()}
-	<div class="np-navigation-action-icon">
-		<Ripple forElement={touchEl} />
+	<span class="np-navigation-action-indicator"><Ripple forElement={element} /></span>
+	<span class="np-navigation-action-icon">
 		{@render icon()}
 		{#if badge}
-			<div class="np-navigation-action-badge">
-				<Badge label={badgeLabel} aria-label={badgeAriaLabel} />
-			</div>
+			<span class="np-navigation-action-badge"><Badge label={badgeLabel} /></span>
 		{/if}
-	</div>
-	<div class="np-navigation-action-label">{label}</div>
-	<span class="np-touch" bind:this={touchEl}></span>
+	</span>
+	<!-- Both labels stay, so they can cross-fade while the rail morphs. The one out of use is hidden
+	     and out of the flow. -->
+	<span
+		class={['np-navigation-action-label', 'np-label-below', expanded && 'np-away']}
+		aria-hidden={expanded ? 'true' : undefined}>{label}</span
+	>
+	<span
+		class={['np-navigation-action-label', 'np-label-beside', !expanded && 'np-away']}
+		aria-hidden={expanded ? undefined : 'true'}>{label}</span
+	>
+	{#if badgeId}
+		<span id={badgeId} hidden>{badgeDescription(badgeLabel, badgeAriaLabel)}</span>
+	{/if}
 {/snippet}
 
 {#if isLink}
@@ -39,7 +65,8 @@
 		{...attributes}
 		bind:this={element}
 		href={attributes.href}
-		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
+		aria-describedby={describedBy}
+		class={classes}
 		aria-current={selected ? 'page' : undefined}
 		tabindex={selected ? 0 : -1}
 	>
@@ -49,7 +76,8 @@
 	<button
 		{...attributes as HTMLButtonAttributes}
 		bind:this={element}
-		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
+		aria-describedby={describedBy}
+		class={classes}
 		aria-current={selected ? 'page' : undefined}
 		tabindex={selected ? 0 : -1}
 	>
@@ -58,86 +86,195 @@
 {/if}
 
 <style>
+	/* Collapsed: the indicator around the icon, the label below. Expanded: icon and label side by
+	   side inside the indicator. The item spans the rail, so its target is the full width.
+	   Everything is anchored to the item's start, so the parts keep their place while the rail's
+	   width animates, and the measures below place the label that fades out as well. */
 	.np-navigation-action {
+		--_pad-block: 0.375rem;
+		--_pad-inline: 1.25rem;
+		--_indicator-width: 3.5rem;
+		--_indicator-height: 2rem;
+		--_row-gap: 0.25rem;
+		--_expanded-height: 3.5rem;
+		--_icon: 1.5rem;
+		--_icon-inset: 1rem;
+		--_label-gap: 0.5rem;
+		--_beside-line: 1.25rem;
+		position: relative;
+		box-sizing: border-box;
+		display: grid;
+		grid-template-columns: var(--_indicator-width);
+		grid-template-rows: var(--_indicator-height) auto;
+		row-gap: var(--_row-gap);
+		justify-items: start;
+		align-items: center;
+		width: 100%;
+		padding-block: var(--_pad-block);
+		padding-inline: var(--_pad-inline);
 		cursor: pointer;
 		font: inherit;
 		border: 0;
 		background: none;
-		align-items: center;
-		gap: 0.25rem;
-		display: flex;
-		flex-direction: column;
 		color: var(--np-color-on-surface);
 		text-decoration: none;
 		-webkit-tap-highlight-color: transparent;
 	}
+	.np-navigation-action-expanded {
+		grid-template-columns: auto auto;
+		grid-template-rows: var(--_expanded-height);
+		justify-content: start;
+		padding-block: 0;
+	}
+
 	.np-navigation-action:focus-visible {
 		outline-style: solid;
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
-		outline-offset: 2px;
+		outline-offset: -3px;
 		border-radius: 1rem;
 	}
+	/* The focused state layer, on top of the ring. */
+	.np-navigation-action:focus-visible :global(.np-ripple-surface)::before {
+		opacity: var(--np-ripple-focus-opacity, 0.1);
+	}
 	@media (prefers-reduced-motion: no-preference) {
 		.np-navigation-action:focus-visible {
-			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
+			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
 		}
 	}
-	.np-navigation-action-icon {
+
+	.np-navigation-action-indicator {
+		grid-area: 1 / 1;
+		/* Top aligned, so its height can animate without moving it. */
+		align-self: start;
 		position: relative;
-		color: var(--np-color-on-surface-variant);
-		display: flex;
+		z-index: 0;
+		width: var(--_indicator-width);
+		height: var(--_indicator-height);
 		border-radius: var(--np-shape-corner-full);
-		justify-content: center;
-		width: 3.5rem;
-		height: 2rem;
-		align-items: center;
-		z-index: 1;
 	}
-	.np-navigation-action-label {
-		font-size: 0.75rem;
-		line-height: 1rem;
-		font-weight: var(--np-navigation-rail-item-font-weight, 500);
-		transition: color var(--np-motion-expressive-default-effects);
-		color: var(--np-color-on-surface-variant);
+	.np-navigation-action-expanded .np-navigation-action-indicator {
+		grid-area: 1 / 1 / 2 / 3;
+		justify-self: stretch;
+		width: auto;
+		height: var(--_expanded-height);
 	}
-	.np-navigation-action-badge {
-		--np-badge-top: 0;
-		--np-badge-end: 0.75rem;
+	.np-navigation-action-indicator::before {
+		content: '';
 		position: absolute;
 		inset: 0;
+		opacity: 0;
+		transform: scaleX(0.32);
+		background-color: var(
+			--np-navigation-rail-item-active-indicator-color,
+			var(--np-color-secondary-container)
+		);
+		border-radius: inherit;
+		z-index: -1;
+	}
+	.np-navigation-action-selected .np-navigation-action-indicator::before {
+		opacity: 1;
+		transform: scaleX(1);
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-action-indicator::before {
+			transition:
+				transform var(--np-motion-expressive-default-spatial),
+				opacity var(--np-motion-expressive-fast-effects);
+		}
+	}
+
+	.np-navigation-action-icon {
+		grid-area: 1 / 1;
+		justify-self: center;
+		position: relative;
+		z-index: 1;
+		display: flex;
+		width: var(--_icon);
+		height: var(--_icon);
+		color: var(--np-color-on-surface-variant);
 		pointer-events: none;
 	}
+	.np-navigation-action-expanded .np-navigation-action-icon {
+		justify-self: start;
+		margin-inline-start: var(--_icon-inset);
+	}
 	.np-navigation-action-selected .np-navigation-action-icon {
 		color: var(--np-color-on-secondary-container);
 		--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
 	}
-	.np-navigation-action-icon::before {
-		content: '';
+	/* The badge stays on the icon in both layouts. */
+	.np-navigation-action-badge {
 		position: absolute;
-		width: 100%;
-		height: 100%;
-		opacity: 0;
-		transform: scaleX(0.32);
-		transition-duration: 0.2s;
-		transition-property: transform, opacity;
-		transition-timing-function: linear;
-		background-color: var(--np-color-secondary-container);
-		border-radius: 100px;
-		z-index: -1;
-	}
-	.np-navigation-action-selected .np-navigation-action-icon::before {
-		opacity: 1;
-		transform: scaleX(1);
+		inset: 0;
+		pointer-events: none;
 	}
 
+	.np-navigation-action-label {
+		font-size: 0.75rem;
+		line-height: 1rem;
+		letter-spacing: 0.031rem;
+		font-weight: var(--np-navigation-rail-item-font-weight, 500);
+		color: var(--np-color-on-surface-variant);
+		pointer-events: none;
+	}
 	.np-navigation-action-selected .np-navigation-action-label {
 		font-weight: var(--np-navigation-rail-item-selected-font-weight, 500);
 		color: var(--np-color-secondary);
 	}
-	.np-touch {
-		height: 56px;
+	/* Centred under the icon, across the width of the collapsed rail. */
+	.np-label-below {
+		grid-area: 2 / 1;
+		box-sizing: border-box;
+		width: calc(2 * var(--_pad-inline) + var(--_indicator-width));
+		margin-inline-start: calc(-1 * var(--_pad-inline));
+		padding-inline: 0.25rem;
+		text-align: center;
+		overflow-wrap: anywhere;
+	}
+	.np-label-beside {
+		grid-area: 1 / 2;
+		position: relative;
+		z-index: 1;
+		margin-inline: var(--_label-gap) 1rem;
+		font-size: 0.875rem;
+		line-height: var(--_beside-line);
+		letter-spacing: 0.006rem;
+		white-space: nowrap;
+	}
+	.np-navigation-action-selected .np-label-beside {
+		color: var(--np-color-on-secondary-container);
+	}
+	/* The label out of use leaves the flow where it would sit in the other layout. */
+	.np-navigation-action-label.np-away {
+		grid-area: auto;
 		position: absolute;
-		width: 80px;
+		margin: 0;
+		opacity: 0;
+		visibility: hidden;
+	}
+	.np-label-below.np-away {
+		inset-block-start: calc(var(--_pad-block) + var(--_indicator-height) + var(--_row-gap));
+		inset-inline-start: 0;
+	}
+	.np-label-beside.np-away {
+		inset-block-start: calc((var(--_expanded-height) - var(--_beside-line)) / 2);
+		inset-inline-start: calc(
+			var(--_pad-inline) + var(--_icon-inset) + var(--_icon) + var(--_label-gap)
+		);
+	}
+	/* The old label fades out at once, the new one fades in as the items settle. */
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-action-label {
+			transition:
+				opacity var(--np-motion-standard-fast-effects) 100ms,
+				visibility 0s;
+		}
+		.np-navigation-action-label.np-away {
+			transition:
+				opacity 100ms linear,
+				visibility 0s linear 100ms;
+		}
 	}
 </style>

package/dist/navigation-rail/NavigationRailSection.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { getNavigationRailContext } from './context.js'
+	import type { NavigationRailSectionProps } from './types.js'
+
+	let {
+		label,
+		children,
+		element = $bindable(),
+		...attributes
+	}: NavigationRailSectionProps = $props()
+
+	const uid = $props.id()
+	const rail = getNavigationRailContext()
+	let expanded = $derived(rail?.expanded ?? false)
+</script>
+
+<!-- Secondary destinations under a header. They show only in the expanded rail. -->
+<div
+	{...attributes}
+	bind:this={element}
+	role="group"
+	aria-labelledby="{uid}-label"
+	hidden={!expanded}
+	class={['np-navigation-rail-section', attributes.class]}
+>
+	<div id="{uid}-label" class="np-navigation-rail-section-label">{label}</div>
+	{@render children?.()}
+</div>
+
+<style>
+	.np-navigation-rail-section {
+		display: flex;
+		flex-direction: column;
+	}
+	.np-navigation-rail-section[hidden] {
+		display: none;
+	}
+	/* 20dp above and 8dp below, the text in line with the icons. */
+	.np-navigation-rail-section-label {
+		padding: 1.25rem 2.25rem 0.5rem;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-weight: 500;
+		letter-spacing: 0.006rem;
+		white-space: nowrap;
+		color: var(--np-color-on-surface-variant);
+	}
+	/* It fades in as the destinations above settle, like the labels beside the icons. */
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-rail-section {
+			transition: opacity var(--np-motion-standard-fast-effects) 100ms;
+			@starting-style {
+				opacity: 0;
+			}
+		}
+	}
+</style>

package/dist/navigation-rail/NavigationRailSection.svelte.d.ts

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

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

@@ -0,0 +1,6 @@
+export interface NavigationRailContext {
+    readonly expanded: boolean;
+}
+export declare const setNavigationRailContext: (context: NavigationRailContext) => NavigationRailContext;
+/** The surrounding rail, or undefined for an item rendered on its own. */
+export declare const getNavigationRailContext: () => NavigationRailContext | undefined;

package/dist/navigation-rail/context.js

@@ -0,0 +1,5 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('np-navigation-rail');
+export const setNavigationRailContext = (context) => setContext(KEY, context);
+/** The surrounding rail, or undefined for an item rendered on its own. */
+export const getNavigationRailContext = () => getContext(KEY);

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

@@ -1,2 +1,3 @@
 export { default as NavigationRail } from './NavigationRail.svelte';
 export { default as NavigationRailItem } from './NavigationRailItem.svelte';
+export { default as NavigationRailSection } from './NavigationRailSection.svelte';

package/dist/navigation-rail/index.js

@@ -1,2 +1,3 @@
 export { default as NavigationRail } from './NavigationRail.svelte';
 export { default as NavigationRailItem } from './NavigationRailItem.svelte';
+export { default as NavigationRailSection } from './NavigationRailSection.svelte';

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

@@ -0,0 +1,14 @@
+/** Cancels what runs on the elements. Collected first, so styles are flushed only once. */
+export declare const cancel: (elements: (Element | null)[]) => void;
+/**
+ * Switches the layout through `apply` and animates the rail and its items from where they were.
+ * Resolves when the rail has finished moving.
+ */
+export declare const morph: (rail: HTMLElement, apply: () => void, timing: KeyframeAnimationOptions, 
+/** Timing for the rail's own width, when it moves differently from its items. */
+railTiming?: KeyframeAnimationOptions) => Promise<void>;
+/**
+ * Grows the rail out of nothing or shrinks it away, for a rail that is hidden when collapsed.
+ * Shrinking holds the end, so the rail stays gone until it is hidden.
+ */
+export declare const resize: (rail: HTMLElement, grow: boolean, timing: KeyframeAnimationOptions) => Promise<void | Animation>;

package/dist/navigation-rail/morph.js

@@ -0,0 +1,78 @@
+// Morphs the rail between its collapsed and expanded layouts. CSS cannot animate a change of grid
+// layout, so the items are measured before and after the switch and animated from the old boxes
+// to the new ones (FLIP), along with the width of the rail itself.
+/** Cancels what runs on the elements. Collected first, so styles are flushed only once. */
+export const cancel = (elements) => {
+    elements.flatMap((element) => element?.getAnimations() ?? []).forEach((a) => a.cancel());
+};
+// The expanded rail's min-width would snap it open at once, so it is lifted while the width moves.
+const animateWidth = (rail, from, to, timing) => rail.animate([
+    { width: `${from}px`, minWidth: '0px' },
+    { width: `${to}px`, minWidth: '0px' },
+], timing);
+const measure = ({ item, icon, indicator }) => ({
+    item: item.getBoundingClientRect(),
+    icon: icon?.getBoundingClientRect(),
+    indicator: indicator?.getBoundingClientRect(),
+});
+/**
+ * Animates an element back from where it sat inside its parent before. Offsets count from the
+ * parent, so a parent that moves carries the element along. `size` also animates its box.
+ */
+const flip = (element, [before, beforeParent], [after, afterParent], timing, size = false) => {
+    const x = before.left - beforeParent.left - (after.left - afterParent.left);
+    const y = before.top - beforeParent.top - (after.top - afterParent.top);
+    const box = (rect) => size ? { width: `${rect.width}px`, height: `${rect.height}px` } : {};
+    element.animate([
+        { transform: `translate(${x}px, ${y}px)`, ...box(before) },
+        { transform: 'none', ...box(after) },
+    ], timing);
+};
+/**
+ * Switches the layout through `apply` and animates the rail and its items from where they were.
+ * Resolves when the rail has finished moving.
+ */
+export const morph = async (rail, apply, timing, 
+/** Timing for the rail's own width, when it moves differently from its items. */
+railTiming = timing) => {
+    const parts = [...rail.querySelectorAll('.np-navigation-action')].map((item) => ({
+        item,
+        icon: item.querySelector('.np-navigation-action-icon'),
+        indicator: item.querySelector('.np-navigation-action-indicator'),
+    }));
+    const firstRail = rail.getBoundingClientRect();
+    const first = parts.map(measure);
+    cancel([rail, ...parts.flatMap(({ item, icon, indicator }) => [item, icon, indicator])]);
+    apply();
+    // Measure everything before anything moves: the rail's own animation can shift its container.
+    const lastRail = rail.getBoundingClientRect();
+    const last = parts.map(measure);
+    const animation = animateWidth(rail, firstRail.width, lastRail.width, railTiming);
+    parts.forEach(({ item, icon, indicator }, i) => {
+        const before = first[i];
+        const after = last[i];
+        // An item that appears or goes with the switch, in a section shown only when expanded, fades
+        // instead.
+        if (!before.item.width || !after.item.width)
+            return;
+        flip(item, [before.item, firstRail], [after.item, lastRail], timing);
+        if (icon)
+            flip(icon, [before.icon, before.item], [after.icon, after.item], timing);
+        if (indicator) {
+            flip(indicator, [before.indicator, before.item], [after.indicator, after.item], timing, true);
+        }
+    });
+    await animation.finished.catch(() => { });
+};
+/**
+ * Grows the rail out of nothing or shrinks it away, for a rail that is hidden when collapsed.
+ * Shrinking holds the end, so the rail stays gone until it is hidden.
+ */
+export const resize = (rail, grow, timing) => {
+    cancel([rail]);
+    const width = rail.getBoundingClientRect().width;
+    return animateWidth(rail, grow ? 0 : width, grow ? width : 0, {
+        ...timing,
+        fill: grow ? 'none' : 'forwards',
+    }).finished.catch(() => { });
+};

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

@@ -1,6 +1,22 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export interface NavigationRailProps extends HTMLAttributes<HTMLElement> {
+    /** Shows the expanded rail: wider, with the label beside each icon. */
+    expanded?: boolean;
+    /** Opens the expanded rail over the content, behind a scrim, instead of pushing it aside. */
+    modal?: boolean;
+    /** Hides the collapsed rail. Open it with your own button that sets `expanded`. */
+    hideWhenCollapsed?: boolean;
+    /** Puts a menu button at the top that toggles `expanded`. */
+    menu?: boolean;
+    /** Name of the menu button, read by assistive technology. It shows no tooltip. */
+    menuLabel?: string;
+    /** Groups the destinations at the top of the rail or in its vertical centre. */
+    alignment?: 'top' | 'center';
+    /** A FAB above the destinations. Switch to an extended FAB while `expanded`. */
+    fab?: Snippet<[{
+        expanded: boolean;
+    }]>;
     element?: HTMLElement;
 }
 export type NavigationRailItemElement = HTMLButtonElement | HTMLAnchorElement;
@@ -14,3 +30,8 @@ export interface NavigationRailItemProps extends HTMLAttributes<NavigationRailIt
     type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
     element?: NavigationRailItemElement;
 }
+export interface NavigationRailSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** The section header, shown above the destinations and naming the group. */
+    label: string;
+    element?: HTMLDivElement;
+}

package/dist/progress/CircularProgress.svelte

@@ -195,7 +195,8 @@
 	}
 
 	.progress:not(.indeterminate) .track {
-		--_g: min(var(--_active), var(--_gap));
+		/* The full gap as soon as there is any progress, so a low value shows as a dot. */
+		--_g: calc(var(--_gap) * clamp(0, var(--_active) * 100, 1));
 		stroke-dasharray: calc(max(0, 100 - var(--_active) - 2 * var(--_g)) * 1px) 100px;
 		stroke-dashoffset: calc((var(--_active) + var(--_g)) * -1px);
 	}