noph-ui 0.42.1 → 0.43.1

package/dist/button/Button.svelte

@@ -143,8 +143,8 @@
 <style>
 	.children-wrapper {
 		flex: 1;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		overflow: var(--_button-label-overflow, hidden);
+		text-overflow: var(--_button-label-text-overflow, ellipsis);
 		text-wrap: nowrap;
 	}
 	.circular-progress {
@@ -186,6 +186,9 @@
 				box-shadow var(--np-motion-expressive-default-effects);
 		}
 	}
+	.round {
+		border-radius: var(--_round-radius);
+	}
 	.xs {
 		font-size: 0.875rem;
 		height: 2rem;
@@ -193,17 +196,12 @@
 		gap: var(--np-button-gap, 0.25rem);
 		--_icon-size: var(--np-button-icon-size, 1.25rem);
 		--np-circular-progress-size: 1.75rem;
-	}
-	.xs.round {
-		border-radius: 1rem;
+		--_round-radius: 1rem;
+		--_pressed-radius: 0.5rem;
 	}
 	.xs.square {
 		border-radius: var(--np-button-shape, 0.75rem);
 	}
-	.xs:active,
-	.xs.pressed {
-		border-radius: 0.5rem;
-	}
 	.s {
 		font-size: 0.875rem;
 		height: 2.5rem;
@@ -211,17 +209,12 @@
 		gap: var(--np-button-gap, 0.5rem);
 		--_icon-size: var(--np-button-icon-size, 1.25rem);
 		--np-circular-progress-size: 2rem;
-	}
-	.s.round {
-		border-radius: 1.25rem;
+		--_round-radius: 1.25rem;
+		--_pressed-radius: 0.5rem;
 	}
 	.s.square {
 		border-radius: var(--np-button-shape, 0.75rem);
 	}
-	.s:active,
-	.s.pressed {
-		border-radius: 0.5rem;
-	}
 	.m {
 		font-size: 1rem;
 		height: 3.5rem;
@@ -229,17 +222,12 @@
 		gap: var(--np-button-gap, 0.5rem);
 		--_icon-size: var(--np-button-icon-size, 1.5rem);
 		--np-circular-progress-size: 3rem;
-	}
-	.m.round {
-		border-radius: 1.75rem;
+		--_round-radius: 1.75rem;
+		--_pressed-radius: 0.75rem;
 	}
 	.m.square {
 		border-radius: var(--np-button-shape, 1rem);
 	}
-	.m:active,
-	.m.pressed {
-		border-radius: 0.75rem;
-	}
 	.l {
 		font-size: 1.5rem;
 		height: 6rem;
@@ -247,17 +235,12 @@
 		gap: var(--np-button-gap, 0.75rem);
 		--_icon-size: var(--np-button-icon-size, 2rem);
 		--np-circular-progress-size: 5rem;
-	}
-	.l.round {
-		border-radius: 3rem;
+		--_round-radius: 3rem;
+		--_pressed-radius: 1rem;
 	}
 	.l.square {
 		border-radius: var(--np-button-shape, 1.75rem);
 	}
-	.l:active,
-	.l.pressed {
-		border-radius: 1rem;
-	}
 	.xl {
 		font-size: 2rem;
 		height: 8.5rem;
@@ -265,16 +248,16 @@
 		gap: var(--np-button-gap, 1rem);
 		--_icon-size: var(--np-button-icon-size, 2.5rem);
 		--np-circular-progress-size: 7rem;
-	}
-	.xl.round {
-		border-radius: 4.25rem;
+		--_round-radius: 4.25rem;
+		--_pressed-radius: 1rem;
 	}
 	.xl.square {
 		border-radius: var(--np-button-shape, 1.75rem);
 	}
-	.xl:active,
-	.xl.pressed {
-		border-radius: 1rem;
+	@media (prefers-reduced-motion: no-preference) {
+		.np-button:is(:active, .pressed) {
+			border-radius: var(--_pressed-radius);
+		}
 	}
 	.toggle {
 		--np-icon-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;

package/dist/button/ButtonGroup.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { MediaQuery } from 'svelte/reactivity'
+	import { expandedWidths, parseMotion, resolveItem } from './buttonGroup.js'
+	import type { ButtonGroupProps } from './types.js'
+
+	let {
+		variant = 'standard',
+		expandedRatio = 0.15,
+		compressionLimit = 24,
+		element = $bindable(),
+		children,
+		...attributes
+	}: ButtonGroupProps = $props()
+
+	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)', false)
+
+	const settleRatio = 0.75
+
+	type Timing = { duration: number; easing: string }
+
+	let animations: Animation[] = []
+	let pressed: {
+		items: HTMLElement[]
+		widths: number[]
+		timing: Timing
+		growing?: Animation
+	} | null = null
+	let releaseFrame: number | undefined
+	let moving = $state(false)
+
+	const items = () =>
+		element
+			? (Array.from(element.children) as HTMLElement[])
+					.filter((item) => !item.hasAttribute('popover'))
+					.map(resolveItem)
+			: []
+
+	const motion = () =>
+		element
+			? parseMotion(
+					getComputedStyle(element).getPropertyValue('--np-motion-expressive-fast-spatial'),
+				)
+			: { duration: 0, easing: 'linear' }
+
+	const animate = (
+		targets: HTMLElement[],
+		from: number[],
+		to: number[],
+		keep: boolean,
+		timing: Timing,
+	) =>
+		targets.map((item, index) => {
+			if (keep) {
+				item.style.width = `${to[index]}px`
+			} else {
+				item.style.removeProperty('width')
+			}
+			if (from[index] === to[index]) return undefined
+			const animation = item.animate(
+				[{ width: `${from[index]}px` }, { width: `${to[index]}px` }],
+				timing,
+			)
+			animations.push(animation)
+			return animation
+		})
+
+	const stop = () => {
+		if (releaseFrame !== undefined) cancelAnimationFrame(releaseFrame)
+		releaseFrame = undefined
+		for (const animation of animations) animation.cancel()
+		animations = []
+		moving = false
+		if (!pressed) return
+		for (const item of pressed.items) item.style.removeProperty('width')
+		pressed = null
+	}
+
+	const press = (target: EventTarget | null) => {
+		if (variant === 'connected') return
+		if (!element || expandedRatio <= 0 || reducedMotion.current) return
+		stop()
+		const all = items()
+		if (all.length < 2) return
+		const index = all.findIndex((item) => item.contains(target as Node))
+		if (index < 0) return
+		const widths = all.map((item) => item.getBoundingClientRect().width)
+		const targets = expandedWidths(widths, index, expandedRatio, compressionLimit)
+		const timing = motion()
+		const growing = animate(all, widths, targets, true, timing)[index]
+		pressed = { items: all, widths, timing, growing }
+		moving = true
+	}
+
+	const settled = () => {
+		const progress = pressed?.growing?.effect?.getComputedTiming().progress
+		return progress == null || progress >= settleRatio
+	}
+
+	const release = () => {
+		if (!pressed || releaseFrame !== undefined) return
+		const back = () => {
+			if (!pressed) {
+				releaseFrame = undefined
+				return
+			}
+			if (!settled()) {
+				releaseFrame = requestAnimationFrame(back)
+				return
+			}
+			const { items: targets, widths, timing } = pressed
+			const from = targets.map((item) => item.getBoundingClientRect().width)
+			for (const animation of animations) animation.cancel()
+			animations = []
+			pressed = null
+			releaseFrame = undefined
+			animate(targets, from, widths, false, timing)
+			const returning = animations
+			Promise.allSettled(returning.map((animation) => animation.finished)).then(() => {
+				if (animations !== returning) return
+				animations = []
+				moving = false
+			})
+		}
+		releaseFrame = requestAnimationFrame(back)
+	}
+
+	onMount(() => stop)
+</script>
+
+<div
+	{...attributes}
+	role={attributes.role ?? 'group'}
+	bind:this={element}
+	class={['np-button-group', variant, moving && 'moving', attributes.class]}
+	onpointerdown={(event) => {
+		press(event.target)
+		attributes.onpointerdown?.(event)
+	}}
+	onpointerup={(event) => {
+		release()
+		attributes.onpointerup?.(event)
+	}}
+	onpointercancel={(event) => {
+		release()
+		attributes.onpointercancel?.(event)
+	}}
+	onpointerleave={(event) => {
+		release()
+		attributes.onpointerleave?.(event)
+	}}
+	onkeydown={(event) => {
+		if (!event.repeat && (event.key === ' ' || event.key === 'Enter')) {
+			press(event.target)
+		}
+		attributes.onkeydown?.(event)
+	}}
+	onkeyup={(event) => {
+		release()
+		attributes.onkeyup?.(event)
+	}}
+	onfocusout={(event) => {
+		if (!element?.contains(event.relatedTarget as Node)) release()
+		attributes.onfocusout?.(event)
+	}}
+>
+	{@render children?.()}
+</div>
+
+<style>
+	.np-button-group {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--np-button-group-space, 0.75rem);
+		isolation: isolate;
+	}
+	.connected {
+		gap: var(--np-button-group-space, 0.125rem);
+	}
+
+	.np-button-group > :global(:focus-visible) {
+		z-index: 1;
+	}
+	.moving {
+		--_button-label-overflow: visible;
+		--_button-label-text-overflow: clip;
+	}
+
+	.connected > :global(:not([popover]):has(~ :not([popover]))) {
+		border-start-end-radius: var(--np-button-group-inner-corner, var(--np-shape-corner-small));
+		border-end-end-radius: var(--np-button-group-inner-corner, var(--np-shape-corner-small));
+	}
+	.connected > :global(:not([popover]) ~ :not([popover])) {
+		border-start-start-radius: var(--np-button-group-inner-corner, var(--np-shape-corner-small));
+		border-end-start-radius: var(--np-button-group-inner-corner, var(--np-shape-corner-small));
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.connected > :global(:not([popover]):has(~ :not([popover])):is(:active, .pressed)) {
+			border-start-end-radius: var(
+				--np-button-group-pressed-inner-corner,
+				var(--np-shape-corner-extra-small)
+			);
+			border-end-end-radius: var(
+				--np-button-group-pressed-inner-corner,
+				var(--np-shape-corner-extra-small)
+			);
+		}
+		.connected > :global(:not([popover]) ~ :not([popover]):is(:active, .pressed)) {
+			border-start-start-radius: var(
+				--np-button-group-pressed-inner-corner,
+				var(--np-shape-corner-extra-small)
+			);
+			border-end-start-radius: var(
+				--np-button-group-pressed-inner-corner,
+				var(--np-shape-corner-extra-small)
+			);
+		}
+	}
+
+	.connected > :global(:not([popover]).selected) {
+		border-radius: var(--_round-radius, var(--np-shape-corner-full));
+	}
+</style>

package/dist/button/ButtonGroup.svelte.d.ts

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

package/dist/button/IconButton.svelte

@@ -163,22 +163,20 @@
 		width: var(--_icon-size, 1.25rem);
 	}
 
+	.round {
+		border-radius: var(--_round-radius);
+	}
 	.xs {
 		--_icon-size: var(--np-icon-button-icon-size, 1.25rem);
 		height: 2rem;
 		width: 2rem;
 		--np-circular-progress-size: 1.75rem;
-	}
-	.xs.round {
-		border-radius: 1rem;
+		--_round-radius: 1rem;
+		--_pressed-radius: 0.5rem;
 	}
 	.xs.square {
 		border-radius: var(--np-icon-button-shape, 0.75rem);
 	}
-	.xs:active,
-	.xs.pressed {
-		border-radius: 0.5rem;
-	}
 	.xs.narrow {
 		width: 1.75rem;
 	}
@@ -190,9 +188,8 @@
 		height: 2.5rem;
 		width: 2.5rem;
 		--np-circular-progress-size: 2rem;
-	}
-	.s.round {
-		border-radius: 1.25rem;
+		--_round-radius: 1.25rem;
+		--_pressed-radius: 0.5rem;
 	}
 	.s.square {
 		border-radius: var(--np-icon-button-shape, 0.75rem);
@@ -203,18 +200,13 @@
 	.s.wide {
 		width: 3.25rem;
 	}
-	.s:active,
-	.s.pressed {
-		border-radius: 0.5rem;
-	}
 	.m {
 		--_icon-size: var(--np-icon-button-icon-size, 1.5rem);
 		height: 3.5rem;
 		width: 3.5rem;
 		--np-circular-progress-size: 3rem;
-	}
-	.m.round {
-		border-radius: 1.75rem;
+		--_round-radius: 1.75rem;
+		--_pressed-radius: 0.75rem;
 	}
 	.m.square {
 		border-radius: var(--np-icon-button-shape, 1rem);
@@ -225,18 +217,13 @@
 	.m.wide {
 		width: 4.5rem;
 	}
-	.m:active,
-	.m.pressed {
-		border-radius: 0.75rem;
-	}
 	.l {
 		--_icon-size: var(--np-icon-button-icon-size, 2rem);
 		height: 6rem;
 		width: 6rem;
 		--np-circular-progress-size: 5rem;
-	}
-	.l.round {
-		border-radius: 3rem;
+		--_round-radius: 3rem;
+		--_pressed-radius: 1rem;
 	}
 	.l.square {
 		border-radius: var(--np-icon-button-shape, 1.75rem);
@@ -247,18 +234,13 @@
 	.l.wide {
 		width: 8rem;
 	}
-	.l:active,
-	.l.pressed {
-		border-radius: 1rem;
-	}
 	.xl {
 		--_icon-size: var(--np-icon-button-icon-size, 2.5rem);
 		height: 8.5rem;
 		width: 8.5rem;
 		--np-circular-progress-size: 7rem;
-	}
-	.xl.round {
-		border-radius: 4.25rem;
+		--_round-radius: 4.25rem;
+		--_pressed-radius: 1rem;
 	}
 	.xl.square {
 		border-radius: var(--np-icon-button-shape, 1.75rem);
@@ -269,9 +251,10 @@
 	.xl.wide {
 		width: 11.5rem;
 	}
-	.xl:active,
-	.xl.pressed {
-		border-radius: 1rem;
+	@media (prefers-reduced-motion: no-preference) {
+		.np-icon-button:is(:active, .pressed) {
+			border-radius: var(--_pressed-radius);
+		}
 	}
 
 	.toggle {
@@ -324,16 +307,34 @@
 		background-color: var(--np-filled-icon-button-container-color, var(--np-color-primary));
 	}
 	.filled.toggle {
-		--np-ripple-hover-color: var(--np-color-on-surface-variant);
-		--np-ripple-pressed-color: var(--np-color-on-surface-variant);
-		color: var(--np-color-on-surface-variant);
-		background-color: var(--np-color-surface-container);
+		--np-ripple-hover-color: var(
+			--np-filled-icon-button-unselected-icon-color,
+			var(--np-color-on-surface-variant)
+		);
+		--np-ripple-pressed-color: var(
+			--np-filled-icon-button-unselected-icon-color,
+			var(--np-color-on-surface-variant)
+		);
+		color: var(--np-filled-icon-button-unselected-icon-color, var(--np-color-on-surface-variant));
+		background-color: var(
+			--np-filled-icon-button-unselected-container-color,
+			var(--np-color-surface-container)
+		);
 	}
 	.filled.selected {
-		--np-ripple-hover-color: var(--np-color-on-primary);
-		--np-ripple-pressed-color: var(--np-color-on-primary);
-		color: var(--np-color-on-primary);
-		background-color: var(--np-color-primary);
+		--np-ripple-hover-color: var(
+			--np-filled-icon-button-selected-icon-color,
+			var(--np-color-on-primary)
+		);
+		--np-ripple-pressed-color: var(
+			--np-filled-icon-button-selected-icon-color,
+			var(--np-color-on-primary)
+		);
+		color: var(--np-filled-icon-button-selected-icon-color, var(--np-color-on-primary));
+		background-color: var(
+			--np-filled-icon-button-selected-container-color,
+			var(--np-color-primary)
+		);
 	}
 
 	.tonal {

package/dist/button/buttonGroup.d.ts

@@ -0,0 +1,6 @@
+export declare const resolveItem: (item: HTMLElement) => HTMLElement;
+export declare const expandedWidths: (widths: number[], index: number, expandedRatio: number, compressionLimit: number) => number[];
+export declare const parseMotion: (token: string) => {
+    duration: number;
+    easing: string;
+};

package/dist/button/buttonGroup.js

@@ -0,0 +1,32 @@
+export const resolveItem = (item) => {
+    let current = item;
+    while (current.ownerDocument.defaultView?.getComputedStyle(current).display === 'contents') {
+        const child = Array.from(current.children).find((candidate) => !candidate.hasAttribute('popover'));
+        if (!child)
+            return current;
+        current = child;
+    }
+    return current;
+};
+export const expandedWidths = (widths, index, expandedRatio, compressionLimit) => {
+    const next = [...widths];
+    if (widths.length < 2 || index < 0 || index >= widths.length || expandedRatio <= 0)
+        return next;
+    const neighbours = [index - 1, index + 1].filter((i) => i >= 0 && i < widths.length);
+    const target = Math.round(Math.min((expandedRatio * widths[index]) / neighbours.length, compressionLimit));
+    for (const neighbour of neighbours) {
+        const growth = Math.min(target, widths[neighbour]);
+        next[neighbour] -= growth;
+        next[index] += growth;
+    }
+    return next;
+};
+export const parseMotion = (token) => {
+    const [time, ...rest] = token.trim().split(/\s+/);
+    const value = Number.parseFloat(time);
+    const easing = rest.join(' ');
+    return {
+        duration: Number.isNaN(value) ? 0 : time.endsWith('ms') ? value : value * 1000,
+        easing: easing || 'linear',
+    };
+};

package/dist/button/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
 export { default as IconButton } from './IconButton.svelte';
 export { default as SegmentedButton } from './SegmentedButton.svelte';

package/dist/button/index.js

@@ -1,3 +1,4 @@
 export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
 export { default as IconButton } from './IconButton.svelte';
 export { default as SegmentedButton } from './SegmentedButton.svelte';

package/dist/button/types.d.ts

@@ -22,6 +22,13 @@ export interface IconButtonProps extends BaseButtonProps {
     selectedIcon?: Snippet;
     width?: 'narrow' | 'wide' | 'default';
 }
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'standard' | 'connected';
+    expandedRatio?: number;
+    compressionLimit?: number;
+    element?: HTMLElement;
+    children?: Snippet;
+}
 export interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
     name: string;
     multiSelect?: boolean;

package/package.json

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