noph-ui 0.51.2 → 0.52.0

package/dist/button/ButtonGroup.svelte

@@ -1,11 +1,23 @@
 <script lang="ts">
+	import { formReset } from '../form-reset.js'
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import { reducedMotion } from '../media.js'
-	import { onMount } from 'svelte'
-	import { expandedWidths, parseMotion, resolveItem } from './buttonGroup.js'
+	import { onMount, untrack } from 'svelte'
+	import { motionOf } from '../animation.js'
+	import { expandedWidths, resolveItem } from './buttonGroup.js'
+	import { setButtonGroupContext } from './groupContext.js'
 	import type { ButtonGroupProps } from './types.js'
 
 	let {
 		variant = 'standard',
+		size,
+		shape,
+		selection,
+		value = $bindable(),
+		required = false,
+		name,
+		form,
+		arrowKeys = true,
 		expandedRatio = 0.15,
 		compressionLimit = 24,
 		element = $bindable(),
@@ -13,6 +25,37 @@
 		...attributes
 	}: ButtonGroupProps = $props()
 
+	const selectedValues = $derived(
+		value == null ? [] : Array.isArray(value) ? value.map(String) : [String(value)],
+	)
+	setButtonGroupContext({
+		get selection() {
+			return selection
+		},
+		get size() {
+			return size
+		},
+		get shape() {
+			return shape
+		},
+		isSelected: (item) => selectedValues.includes(item),
+		toggle: (item) => {
+			const on = selectedValues.includes(item)
+			if (on && required && selectedValues.length === 1) return
+			if (selection === 'single') value = on ? null : item
+			else value = on ? selectedValues.filter((v) => v !== item) : [...selectedValues, item]
+		},
+	})
+
+	// A form reset brings back the selection the group started with.
+	const initialValue = untrack(() => (Array.isArray(value) ? [...value] : value))
+	const restore = () => (value = Array.isArray(initialValue) ? [...initialValue] : initialValue)
+
+	// The buttons share one tab stop, Tab enters the group and the arrow keys move inside it.
+	const ITEMS = 'button, a[href]'
+	const roving = rovingTabindex(ITEMS)
+	const arrows = arrowKeyNav(ITEMS, 'horizontal')
+
 	const settleRatio = 0.75
 
 	type Timing = { duration: number; easing: string }
@@ -30,15 +73,15 @@
 	const items = () =>
 		element
 			? (Array.from(element.children) as HTMLElement[])
-					.filter((item) => !item.hasAttribute('popover'))
+					.filter(
+						(item) => !item.hasAttribute('popover') && !item.matches('.np-button-group-input'),
+					)
 					.map(resolveItem)
 			: []
 
 	const motion = () =>
 		element
-			? parseMotion(
-					getComputedStyle(element).getPropertyValue('--np-motion-expressive-fast-spatial'),
-				)
+			? motionOf(element, '--np-motion-expressive-fast-spatial')
 			: { duration: 0, easing: 'linear' }
 
 	const animate = (
@@ -130,6 +173,7 @@
 	{...attributes}
 	role={attributes.role ?? 'group'}
 	bind:this={element}
+	{@attach (node) => (arrowKeys ? roving(node) : undefined)}
 	class={['np-button-group', variant, moving && 'moving', attributes.class]}
 	onpointerdown={(event) => {
 		press(event.target)
@@ -152,6 +196,7 @@
 			press(event.target)
 		}
 		attributes.onkeydown?.(event)
+		if (arrowKeys && !event.defaultPrevented) arrows(event)
 	}}
 	onkeyup={(event) => {
 		release()
@@ -163,38 +208,109 @@
 	}}
 >
 	{@render children?.()}
+	{#if selection && name}
+		<!-- Takes part in the form like a radio or checkbox group: submit, reset and required. -->
+		<select
+			class="np-button-group-input"
+			{name}
+			{form}
+			{required}
+			multiple={selection === 'multiple'}
+			tabindex="-1"
+			aria-hidden="true"
+			{@attach formReset(restore)}
+		>
+			{#each selectedValues as selected (selected)}
+				<option value={selected} selected>{selected}</option>
+			{/each}
+		</select>
+	{/if}
 </div>
 
 <style>
+	/* A standard group hugs its buttons. The space between them grows as they shrink, so each
+	   keeps a 48px target: 18px beside extra small buttons, 12px beside small ones, 8px above. */
 	.np-button-group {
-		display: flex;
+		position: relative;
+		display: inline-flex;
 		align-items: flex-start;
-		gap: var(--np-button-group-space, 0.75rem);
+		gap: var(--np-button-group-space, var(--_space, 0.5rem));
 		isolation: isolate;
 	}
+	.np-button-group:has(> :global(:is(.np-button, .np-icon-button).s)) {
+		--_space: 0.75rem;
+	}
+	.np-button-group:has(> :global(:is(.np-button, .np-icon-button).xs)) {
+		--_space: 1.125rem;
+	}
+	/* A connected group spans its container and widens its buttons to fill it. */
 	.connected {
+		display: flex;
 		gap: var(--np-button-group-space, 0.125rem);
 	}
+	.connected > :global(:not([popover], .np-button-group-input)) {
+		flex: 1 1 auto;
+	}
+	.connected > :global(.np-icon-button:is(.xs, .s)) {
+		min-width: 3rem;
+	}
+	/* The corners where two buttons meet, and every corner of a square group. */
+	.connected > :global(.xs) {
+		--_inner-corner: 0.25rem;
+	}
+	.connected > :global(:is(.s, .m)) {
+		--_inner-corner: 0.5rem;
+	}
+	.connected > :global(.l) {
+		--_inner-corner: 1rem;
+	}
+	.connected > :global(.xl) {
+		--_inner-corner: 1.25rem;
+	}
+	.connected > :global(.square:not(.selected)) {
+		border-radius: var(--np-button-group-inner-corner, var(--_inner-corner));
+	}
+
+	.np-button-group-input {
+		position: absolute;
+		inset-inline-start: 0;
+		bottom: 0;
+		width: 1px;
+		height: 1px;
+		opacity: 0;
+		pointer-events: none;
+	}
 
 	.np-button-group > :global(:focus-visible) {
 		z-index: 1;
 	}
+	/* While widths animate, a button may be narrower than its label for a moment. */
 	.moving {
-		--_button-label-overflow: visible;
-		--_button-label-text-overflow: clip;
+		--_button-min-width: 0;
+		--_button-label-overflow: hidden;
 	}
 
-	.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], .np-button-group-input):has(~ :not([popover], .np-button-group-input))
+		) {
+		border-start-end-radius: var(--np-button-group-inner-corner, var(--_inner-corner));
+		border-end-end-radius: var(--np-button-group-inner-corner, var(--_inner-corner));
 	}
-	.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));
+	.connected
+		> :global(:not([popover], .np-button-group-input) ~ :not([popover], .np-button-group-input)) {
+		border-start-start-radius: var(--np-button-group-inner-corner, var(--_inner-corner));
+		border-end-start-radius: var(--np-button-group-inner-corner, var(--_inner-corner));
 	}
 
 	@media (prefers-reduced-motion: no-preference) {
-		.connected > :global(:not([popover]):has(~ :not([popover])):is(:active, .pressed)) {
+		.connected
+			> :global(
+				:not([popover], .np-button-group-input):has(~ :not([popover], .np-button-group-input)):is(
+						:active,
+						.pressed
+					)
+			) {
 			border-start-end-radius: var(
 				--np-button-group-pressed-inner-corner,
 				var(--np-shape-corner-extra-small)
@@ -204,7 +320,11 @@
 				var(--np-shape-corner-extra-small)
 			);
 		}
-		.connected > :global(:not([popover]) ~ :not([popover]):is(:active, .pressed)) {
+		.connected
+			> :global(
+				:not([popover], .np-button-group-input)
+					~ :not([popover], .np-button-group-input):is(:active, .pressed)
+			) {
 			border-start-start-radius: var(
 				--np-button-group-pressed-inner-corner,
 				var(--np-shape-corner-extra-small)
@@ -216,7 +336,7 @@
 		}
 	}
 
-	.connected > :global(:not([popover]).selected) {
+	.connected > :global(:not([popover], .np-button-group-input).selected) {
 		border-radius: var(--_round-radius, var(--np-shape-corner-full));
 	}
 </style>

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

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

package/dist/button/IconButton.svelte

@@ -5,6 +5,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
+	import { getButtonGroupContext } from './groupContext.js'
 	import type { IconButtonProps } from './types.js'
 
 	let {
@@ -19,8 +20,8 @@
 		selected = $bindable(false),
 		selectedIcon,
 		width = 'default',
-		size = 's',
-		shape = 'round',
+		size: sizeProp,
+		shape: shapeProp,
 		...attributes
 	}: IconButtonProps = $props()
 
@@ -28,6 +29,25 @@
 
 	let isLink = $derived(attributes.href != null && !disabled && !loading)
 	let tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
+	// Without an aria-label, the tooltip text is the name, and describing the button with it again
+	// would read it twice.
+	let tooltipNames = $derived(!!tooltipId && !attributes['aria-label'])
+	let name = $derived(attributes['aria-label'] ?? (title || undefined))
+
+	// Inside a ButtonGroup, the group sets the size and shape its buttons leave open, and with
+	// `selection` it decides what is selected.
+	const group = getButtonGroupContext()
+	let size = $derived(sizeProp ?? group?.size ?? 's')
+	let shape = $derived(shapeProp ?? group?.shape ?? 'round')
+	let groupValue = $derived(
+		group?.selection && attributes.value != null ? String(attributes.value) : undefined,
+	)
+	let isToggle = $derived(toggle || groupValue !== undefined)
+	let isSelected = $derived(groupValue !== undefined ? group!.isSelected(groupValue) : selected)
+	// A selected toggle swaps its resting shape: round turns square, square turns round.
+	let shapeClass = $derived(
+		isSelected ? (shape === 'square' ? 'round' : 'square') : loading ? 'square' : shape,
+	)
 
 	const morph = pressMorph()
 
@@ -47,7 +67,7 @@
 			<CircularProgress aria-label={loadingAriaLabel} indeterminate track={false} />
 		</div>
 	{/if}
-	{#if selectedIcon && selected}
+	{#if selectedIcon && isSelected}
 		{@render selectedIcon()}
 	{:else if children}
 		{@render children()}
@@ -58,24 +78,24 @@
 	<a
 		{...attributes}
 		onclick={(event) => {
-			if (!toggle) {
+			if (!isToggle) {
 				handlePress()
 			}
 			attributes.onclick?.(event)
 		}}
-		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		aria-describedby={(!tooltipNames && tooltipId) || attributes['aria-describedby']}
 		interestfor={tooltipId ?? attributes['interestfor']}
-		aria-label={title || attributes['aria-label']}
+		aria-label={name}
 		bind:this={element}
 		class={[
 			'np-icon-button',
 			size,
 			width,
 			variant,
-			selected ? 'square' : shape,
+			shapeClass,
 			'enabled',
-			toggle && 'toggle',
-			selected && 'selected',
+			isToggle && 'toggle',
+			isSelected && 'selected',
 			morph.pressed && 'pressed',
 			attributes.class,
 		].filter(Boolean)}
@@ -85,16 +105,18 @@
 {:else}
 	<button
 		{...attributes as HTMLButtonAttributes}
-		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		aria-describedby={(!tooltipNames && tooltipId) || attributes['aria-describedby']}
 		interestfor={tooltipId ?? attributes['interestfor']}
-		aria-label={title || attributes['aria-label']}
-		aria-pressed={toggle ? selected : undefined}
+		aria-label={name}
+		aria-pressed={isToggle ? isSelected : undefined}
 		aria-busy={loading}
 		type={(attributes['type'] as 'button' | 'submit' | 'reset' | 'button') ?? undefined}
 		disabled={disabled || loading}
 		bind:this={element}
 		onclick={(event) => {
-			if (toggle) {
+			if (groupValue !== undefined) {
+				group!.toggle(groupValue)
+			} else if (toggle) {
 				selected = !selected
 			} else {
 				handlePress()
@@ -105,10 +127,10 @@
 			'np-icon-button',
 			size,
 			width,
-			selected || loading ? 'square' : shape,
+			shapeClass,
 			disabled || loading ? `${variant}-disabled disabled` : `${variant} enabled`,
-			toggle && 'toggle',
-			selected && 'selected',
+			isToggle && 'toggle',
+			isSelected && 'selected',
 			morph.pressed && 'pressed',
 			attributes.class,
 		]}
@@ -278,6 +300,9 @@
 		outline-width: 3px;
 		outline-offset: 2px;
 	}
+	.enabled:focus-visible :global(.np-ripple-surface)::before {
+		opacity: var(--np-ripple-focus-opacity, 0.1);
+	}
 	@media (prefers-reduced-motion: no-preference) {
 		.enabled:focus-visible {
 			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
@@ -316,8 +341,14 @@
 		);
 	}
 	.tonal.toggle {
-		color: var(--np-color-on-secondary-container);
-		background-color: var(--np-color-secondary-container);
+		color: var(
+			--np-tonal-icon-button-unselected-icon-color,
+			var(--np-color-on-secondary-container)
+		);
+		background-color: var(
+			--np-tonal-icon-button-unselected-container-color,
+			var(--np-color-secondary-container)
+		);
 	}
 	.tonal.selected {
 		color: var(--np-color-on-secondary);

package/dist/button/SegmentedButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
 	import CheckIcon from '../icons/CheckIcon.svelte'
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { SegmentedButtonProps } from './types.js'
 
@@ -15,12 +16,30 @@
 	}: SegmentedButtonProps = $props()
 
 	let hasError = $derived(!!issues?.length)
+
+	// Radios already share one tab stop and move with the arrow keys. Checkboxes get the same.
+	const SEGMENTS = 'input'
+	const roving = rovingTabindex(SEGMENTS)
+	const arrows = arrowKeyNav(SEGMENTS, 'horizontal')
 </script>
 
 <div
+	role={multiSelect ? 'group' : 'radiogroup'}
 	{...attributes}
 	class={['np-segmented-buttons', hasError && 'np-error', attributes.class]}
 	bind:this={element}
+	{@attach (node) => (multiSelect ? roving(node) : undefined)}
+	onkeydown={(event) => {
+		attributes.onkeydown?.(event)
+		if (event.defaultPrevented) return
+		// Enter picks the focused segment, like Space, instead of submitting the form.
+		if (event.key === 'Enter' && event.target instanceof HTMLInputElement) {
+			event.preventDefault()
+			if (!(event.target.type === 'radio' && event.target.checked)) event.target.click()
+			return
+		}
+		if (multiSelect) arrows(event)
+	}}
 	style="{attributes.style};grid-template-columns: repeat({options.length}, minmax(max-content, 1fr));"
 >
 	{#each options as option, i (i)}
@@ -48,6 +67,7 @@
 			{/if}
 			{#if !option.disabled}
 				<Ripple />
+				<span class="np-touch"></span>
 			{/if}
 			{#if group !== undefined}
 				{#if multiSelect}
@@ -93,11 +113,13 @@
 		/* State layers take the content color of each variant and state. */
 		--np-ripple-hover-color: currentColor;
 		--np-ripple-pressed-color: currentColor;
-		display: grid;
+		/* As wide as its labels need, every segment as wide as the widest. */
+		display: inline-grid;
+		box-sizing: border-box;
+		min-height: 2.5rem;
 		color: var(--np-color-on-surface);
 		border: 1px solid var(--np-color-outline);
 		border-radius: var(--np-shape-corner-full);
-		overflow-x: auto;
 	}
 
 	.np-segmented-buttons.np-error {
@@ -111,7 +133,7 @@
 
 	.np-segmented-button {
 		flex: 1;
-		padding: 0.5rem 1.75rem;
+		padding: 0 1.75rem;
 		text-align: center;
 		cursor: pointer;
 		font-size: 0.875rem;
@@ -157,12 +179,30 @@
 		inset: 0;
 		z-index: -1;
 		opacity: 0;
+		border-radius: inherit;
 		transition: opacity var(--np-motion-expressive-fast-effects);
 		background-color: var(--np-color-secondary-container);
 	}
 	.width-icon,
 	.np-segmented-button:has(input:checked) {
-		padding: 0.5rem 0.75rem;
+		padding: 0 0.75rem;
+	}
+	/* The outer segments round off the container's ends, for their fill and state layer too. */
+	.np-segmented-button:first-child {
+		border-start-start-radius: var(--np-shape-corner-full);
+		border-end-start-radius: var(--np-shape-corner-full);
+	}
+	.np-segmented-button:last-child {
+		border-start-end-radius: var(--np-shape-corner-full);
+		border-end-end-radius: var(--np-shape-corner-full);
+	}
+	/* Each segment keeps a 48px tall target. */
+	.np-touch {
+		position: absolute;
+		inset-inline: 0;
+		top: 50%;
+		translate: 0 -50%;
+		height: max(3rem, 100%);
 	}
 	.np-segmented-button:has(input:checked) {
 		color: var(--np-color-on-secondary-container);

package/dist/button/SplitButton.svelte

@@ -7,6 +7,7 @@
 
 	let {
 		label = '',
+		iconOnly = false,
 		icon,
 		menu,
 		variant = 'filled',
@@ -29,13 +30,19 @@
 	<ChevronDownIcon />
 {/snippet}
 
+<!-- Tab moves from the leading to the trailing button, the arrow keys are not needed. -->
 <ButtonGroup
 	{...attributes}
 	bind:element
 	variant="connected"
+	arrowKeys={false}
 	class={['np-split-button', attributes.class]}
 >
-	<Button {variant} {size} {disabled} {onclick} start={icon}>{label}</Button>
+	{#if iconOnly}
+		<Button {variant} {size} {disabled} {onclick} start={icon} title={label} />
+	{:else}
+		<Button {variant} {size} {disabled} {onclick} start={icon}>{label}</Button>
+	{/if}
 	<Button
 		{variant}
 		{size}
@@ -55,12 +62,79 @@
 </ButtonGroup>
 
 <style>
-	:global(.np-split-button-trigger svg) {
-		transition: rotate var(--np-motion-expressive-fast-effects);
+	/* A split button keeps its own width instead of spanning its container like other connected
+	   groups. */
+	:global(.np-button-group.np-split-button) {
+		display: inline-flex;
+	}
+	:global(.np-split-button > .np-button) {
+		flex: none;
+	}
+
+	/* The inner corners per size, rounder while hovered, focused or pressed. */
+	:global(.np-split-button > .np-button) {
+		--np-button-group-inner-corner: var(--_split-inner, 0.25rem);
+		--np-button-group-pressed-inner-corner: var(--_split-inner-active, 0.75rem);
+	}
+	:global(.np-split-button > .np-button:is(:focus-visible, :active, .pressed)) {
+		--_split-inner: var(--_split-inner-active, 0.75rem);
+	}
+	@media (hover: hover) {
+		:global(.np-split-button > .np-button:hover) {
+			--_split-inner: var(--_split-inner-active, 0.75rem);
+		}
+	}
+	/* Pressed, only the inner corners change, the outer ends stay round. */
+	@media (prefers-reduced-motion: no-preference) {
+		:global(.np-split-button > .np-button:not(.np-split-button-trigger):is(:active, .pressed)) {
+			border-start-start-radius: var(--_round-radius);
+			border-end-start-radius: var(--_round-radius);
+		}
+		:global(.np-split-button > .np-split-button-trigger:is(:active, .pressed)) {
+			border-start-end-radius: var(--_round-radius);
+			border-end-end-radius: var(--_round-radius);
+		}
+	}
+	:global(.np-split-button > .xs) {
+		--_split-inner-active: 0.5rem;
+	}
+	:global(.np-split-button > .l) {
+		--_split-inner: 0.5rem;
+		--_split-inner-active: 1.25rem;
+	}
+	:global(.np-split-button > .xl) {
+		--_split-inner: 0.75rem;
+		--_split-inner-active: 1.25rem;
+	}
+
+	/* Closed, the caret sits a little toward the leading button; open, it is centered. */
+	:global(.np-split-button-trigger .button-icon) {
+		position: relative;
+		inset-inline-start: var(--_caret-offset, -1px);
+	}
+	:global(.np-split-button-trigger.m .button-icon) {
+		--_caret-offset: -2px;
+	}
+	:global(.np-split-button-trigger.l .button-icon) {
+		--_caret-offset: -3px;
+	}
+	:global(.np-split-button-trigger.xl .button-icon) {
+		--_caret-offset: -6px;
+	}
+	:global(.np-split-button-trigger[aria-expanded='true'] .button-icon) {
+		--_caret-offset: 0px;
 	}
 	:global(.np-split-button-trigger[aria-expanded='true'] svg) {
 		rotate: 180deg;
 	}
+	@media (prefers-reduced-motion: no-preference) {
+		:global(.np-split-button-trigger svg) {
+			transition: rotate var(--np-motion-standard-fast-spatial);
+		}
+		:global(.np-split-button-trigger .button-icon) {
+			transition: inset-inline-start var(--np-motion-standard-fast-spatial);
+		}
+	}
 	:global(.np-split-button > .np-split-button-trigger) {
 		--np-button-padding: 0;
 		aspect-ratio: 1;

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

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

package/dist/button/buttonGroup.d.ts

@@ -1,6 +1,2 @@
 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

@@ -21,12 +21,3 @@ export const expandedWidths = (widths, index, expandedRatio, compressionLimit) =
     }
     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/groupContext.d.ts

@@ -0,0 +1,10 @@
+/** What a `ButtonGroup` decides for its buttons: their size and shape, and with `selection` which are selected. */
+export interface ButtonGroupContext {
+    readonly selection: 'single' | 'multiple' | undefined;
+    readonly size: 'xs' | 's' | 'm' | 'l' | 'xl' | undefined;
+    readonly shape: 'round' | 'square' | undefined;
+    isSelected: (value: string) => boolean;
+    toggle: (value: string) => void;
+}
+export declare const setButtonGroupContext: (context: ButtonGroupContext) => ButtonGroupContext;
+export declare const getButtonGroupContext: () => ButtonGroupContext | undefined;

package/dist/button/groupContext.js

@@ -0,0 +1,4 @@
+import { getContext, setContext } from 'svelte';
+const key = Symbol('np-button-group');
+export const setButtonGroupContext = (context) => setContext(key, context);
+export const getButtonGroupContext = () => getContext(key);

package/dist/button/types.d.ts

@@ -25,12 +25,31 @@ export interface IconButtonProps extends BaseButtonProps {
 }
 export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
     variant?: 'standard' | 'connected';
+    /** Size of the buttons that don't set their own. */
+    size?: BaseButtonProps['size'];
+    /** Shape of the buttons that don't set their own. */
+    shape?: BaseButtonProps['shape'];
+    /**
+     * Lets the group manage selection: its buttons with a `value` become toggles, and `value`
+     * holds the selected one (`single`) or the selected ones (`multiple`).
+     */
+    selection?: 'single' | 'multiple';
+    value?: string | string[] | null;
+    /** With `selection`, keeps at least one button selected and makes a form require one. */
+    required?: boolean;
+    /** With `selection`, submits the selected values under this name, like a radio or checkbox group. */
+    name?: string;
+    form?: string;
+    /** Arrow keys move between the buttons, which share one tab stop. Off, Tab visits each. */
+    arrowKeys?: boolean;
     expandedRatio?: number;
     compressionLimit?: number;
     element?: HTMLElement;
 }
 export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onclick'> {
     label?: string;
+    /** Shows only `icon` on the leading button. `label` then names it and becomes its tooltip. */
+    iconOnly?: boolean;
     icon?: Snippet;
     menu?: Snippet<[string]>;
     variant?: Exclude<ButtonProps['variant'], 'text'>;