@dryui/ui 3.0.0 → 4.0.1

package/dist/chart/chart-root.svelte

@@ -35,7 +35,10 @@
 	const width = $derived(widthProp ?? observedWidth);
 	const height = $derived(heightProp ?? observedHeight);
 
-	function observeSize(node: HTMLDivElement) {
+	let containerEl = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!containerEl) return;
 		const ro = new ResizeObserver((entries) => {
 			for (const entry of entries) {
 				const cr = entry.contentRect;
@@ -44,9 +47,9 @@
 			}
 		});
 
-		ro.observe(node);
+		ro.observe(containerEl);
 		return () => ro.disconnect();
-	}
+	});
 
 	const padding = $derived({
 		top: paddingProp?.top ?? 20,
@@ -145,7 +148,7 @@
 	</div>
 
 	{#if widthProp === undefined || heightProp === undefined}
-		<div data-chart-container {@attach observeSize}>
+		<div bind:this={containerEl} data-chart-container>
 			<svg
 				viewBox="0 0 {width} {height}"
 				{width}
@@ -231,6 +234,18 @@
 		--dry-chart-bar-color: var(--dry-color-fill-brand);
 		--dry-chart-line-color: var(--dry-color-fill-brand);
 
+		/* Tonal cascade for multi-series charts. Consumers can override any
+		   slot to retheme the palette. Default order: brand, accent, then a
+		   spread of semantic fills so series stay distinguishable. */
+		--dry-chart-series-1: var(--dry-color-fill-brand);
+		--dry-chart-series-2: var(--dry-color-fill-accent);
+		--dry-chart-series-3: var(--dry-color-fill-purple);
+		--dry-chart-series-4: var(--dry-color-fill-info);
+		--dry-chart-series-5: var(--dry-color-fill-success);
+		--dry-chart-series-6: var(--dry-color-fill-warning);
+		--dry-chart-series-7: var(--dry-color-fill-error);
+		--dry-chart-series-8: var(--dry-color-text-weak);
+
 		display: block;
 		height: auto;
 		overflow: visible;

package/dist/chart/chart-stacked-bar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { SVGAttributes } from 'svelte/elements';
 	import { getChartCtx, type ChartStackedDataPoint } from './context.svelte.js';
+	import { chartSeriesColor } from './series-color.js';
 
 	interface Props extends SVGAttributes<SVGGElement> {
 		stackedData: ChartStackedDataPoint[];
@@ -26,7 +27,7 @@
 			const x = ctx.padding.left + i * (barWidth + gap) + gap / 2;
 
 			let cumHeight = 0;
-			const rects = point.segments.map((seg) => {
+			const rects = point.segments.map((seg, segIndex) => {
 				const segHeight = (seg.value / maxStackValue) * chartHeight;
 				cumHeight += segHeight;
 				const y = ctx.padding.top + chartHeight - cumHeight;
@@ -35,7 +36,7 @@
 					y,
 					width: barWidth,
 					height: Math.max(0, segHeight),
-					color: seg.color,
+					color: seg.color ?? chartSeriesColor(segIndex),
 					value: seg.value
 				};
 			});

package/dist/chart/series-color.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Resolve a chart series colour for the given index. Wraps modulo
+ * `SERIES_SLOTS` and returns a `var(--dry-chart-series-N, currentColor)`
+ * string suitable for SVG `fill` / `stroke` attributes. The
+ * `--dry-chart-series-1..8` palette is defined on `chart-root`.
+ */
+export declare function chartSeriesColor(index: number): string;

package/dist/chart/series-color.js

@@ -0,0 +1,11 @@
+const SERIES_SLOTS = 8;
+/**
+ * Resolve a chart series colour for the given index. Wraps modulo
+ * `SERIES_SLOTS` and returns a `var(--dry-chart-series-N, currentColor)`
+ * string suitable for SVG `fill` / `stroke` attributes. The
+ * `--dry-chart-series-1..8` palette is defined on `chart-root`.
+ */
+export function chartSeriesColor(index) {
+    const slot = (index % SERIES_SLOTS) + 1;
+    return `var(--dry-chart-series-${slot}, currentColor)`;
+}

package/dist/chat-thread/chat-thread.svelte

@@ -1,123 +1,31 @@
 <script lang="ts">
-	import { onMount, tick } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
 		messageCount: number;
 		scrollKey?: number;
-		children: Snippet<
-			[
-				{
-					index: number;
-					viewTransitionName: string;
-					isLatest: boolean;
-				}
-			]
-		>;
+		children: Snippet<[{ index: number; isLatest: boolean }]>;
 	}
 
 	let { messageCount, scrollKey = 0, children, class: className, ...rest }: Props = $props();
 
 	let viewport = $state<HTMLDivElement | null>(null);
-	let renderedCount = $state(0);
 	let prefersReducedMotion = $state(false);
-	let syncSequence = 0;
-
-	const visibleCount = $derived(Math.min(renderedCount, messageCount));
-
-	type ViewTransitionStarter = (callback: () => void) => {
-		ready: Promise<void>;
-		finished: Promise<void>;
-	};
-
-	function getViewTransitionStarter(): ViewTransitionStarter | null {
-		if (typeof document === 'undefined') return null;
-		const doc = document as Document & { startViewTransition?: ViewTransitionStarter };
-		return doc.startViewTransition ? doc.startViewTransition.bind(doc) : null;
-	}
-
-	function findScrollParent(el: HTMLElement | null): HTMLElement | null {
-		let parent = el?.parentElement ?? null;
-		while (parent) {
-			const ov = getComputedStyle(parent).overflowY;
-			if (ov === 'auto' || ov === 'scroll') return parent;
-			parent = parent.parentElement;
-		}
-		return null;
-	}
-
-	function getVisibleIndices(): Set<number> {
-		const visible = new Set<number>();
-		if (!viewport) return visible;
-		const scroller = findScrollParent(viewport);
-		if (!scroller) {
-			// No scroll container — all messages are visible
-			for (let i = 0; i < viewport.children.length; i++) visible.add(i);
-			return visible;
-		}
-		const rect = scroller.getBoundingClientRect();
-		const children = viewport.children;
-		for (let i = 0; i < children.length; i++) {
-			const cr = children[i]?.getBoundingClientRect();
-			if (!cr) continue;
-			if (cr.bottom > rect.top && cr.top < rect.bottom) visible.add(i);
-		}
-		return visible;
-	}
-
-	function setTransitionNames(indices: Set<number> | null) {
-		const children = viewport?.children;
-		if (!children) return;
-		for (let i = 0; i < children.length; i++) {
-			const name = indices === null || indices.has(i) ? `chat-message-${i}` : 'none';
-			(children[i] as HTMLElement).style.setProperty('view-transition-name', name);
-		}
-	}
+	let mounted = false;
 
 	async function scrollToLatest(
 		behavior: ScrollBehavior = prefersReducedMotion ? 'auto' : 'smooth'
 	) {
-		await tick();
+		await new Promise((resolve) => requestAnimationFrame(resolve));
 		viewport?.lastElementChild?.scrollIntoView({ behavior, block: 'end' });
 	}
 
-	async function syncRenderedCount(nextCount: number) {
-		if (nextCount === renderedCount) return;
-		const sequence = ++syncSequence;
-		const startViewTransition = getViewTransitionStarter();
-
-		if (startViewTransition && !prefersReducedMotion && nextCount > renderedCount) {
-			// Only visible messages participate in the view transition.
-			// Messages scrolled out of view or newly added get view-transition-name: none
-			// so they stay in the root capture (which respects overflow clipping).
-			const visibleBefore = getVisibleIndices();
-
-			// Strip names from non-visible messages BEFORE capture
-			setTransitionNames(visibleBefore);
-
-			const transition = startViewTransition(async () => {
-				renderedCount = nextCount;
-				await tick();
-				// Keep only previously-visible messages named; new ones get none
-				setTransitionNames(visibleBefore);
-			});
-			transition.ready?.catch(() => {});
-			await transition.finished.catch(() => {});
-			if (sequence !== syncSequence) return;
-			// Restore all names for future transitions
-			setTransitionNames(null);
-			await scrollToLatest();
-			return;
-		}
-
-		renderedCount = nextCount;
-		if (sequence !== syncSequence) return;
-		await scrollToLatest(prefersReducedMotion ? 'auto' : 'smooth');
-	}
-
 	$effect(() => {
-		void syncRenderedCount(messageCount);
+		void messageCount;
+		const behavior: ScrollBehavior = !mounted || prefersReducedMotion ? 'auto' : 'smooth';
+		mounted = true;
+		void scrollToLatest(behavior);
 	});
 
 	$effect(() => {
@@ -126,17 +34,13 @@
 		}
 	});
 
-	onMount(() => {
+	$effect(() => {
 		const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
 		prefersReducedMotion = mql.matches;
 		const handler = (e: MediaQueryListEvent) => {
 			prefersReducedMotion = e.matches;
 		};
 		mql.addEventListener('change', handler);
-
-		renderedCount = messageCount;
-		void scrollToLatest('auto');
-
 		return () => mql.removeEventListener('change', handler);
 	});
 </script>
@@ -149,19 +53,9 @@
 		aria-live="polite"
 		aria-relevant="additions text"
 	>
-		{#each Array.from({ length: visibleCount }, (_, index) => index) as index (index)}
-			{@const viewTransitionName = `chat-message-${index}`}
-			<div
-				{@attach (node) => {
-					node.style.setProperty('view-transition-name', viewTransitionName);
-				}}
-				data-chat-thread-message
-			>
-				{@render children({
-					index,
-					viewTransitionName,
-					isLatest: index === visibleCount - 1
-				})}
+		{#each Array.from({ length: messageCount }, (_, index) => index) as index (index)}
+			<div data-chat-thread-message>
+				{@render children({ index, isLatest: index === messageCount - 1 })}
 			</div>
 		{/each}
 	</div>
@@ -169,24 +63,19 @@
 
 <style>
 	[data-chat-thread] {
-		--dry-chat-thread-gap: var(--dry-space-4);
-		--dry-chat-thread-message-gap: var(--dry-space-3);
-
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
-		gap: var(--dry-chat-thread-gap);
+		gap: var(--dry-chat-thread-gap, var(--dry-space-4));
 	}
 
 	[data-chat-thread-viewport] {
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
-		gap: var(--dry-chat-thread-message-gap);
+		gap: var(--dry-chat-thread-message-gap, var(--dry-space-3));
 	}
 
-	@supports not (view-transition-name: chat-message-0) {
-		[data-chat-thread-message] {
-			animation: chat-message-enter 220ms ease-out;
-		}
+	[data-chat-thread-message] {
+		animation: chat-message-enter var(--dry-duration-normal) var(--dry-ease-out);
 	}
 
 	@keyframes chat-message-enter {

package/dist/chat-thread/chat-thread.svelte.d.ts

@@ -3,13 +3,10 @@ import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     messageCount: number;
     scrollKey?: number;
-    children: Snippet<[
-        {
-            index: number;
-            viewTransitionName: string;
-            isLatest: boolean;
-        }
-    ]>;
+    children: Snippet<[{
+        index: number;
+        isLatest: boolean;
+    }]>;
 }
 declare const ChatThread: import("svelte").Component<Props, {}, "">;
 type ChatThread = ReturnType<typeof ChatThread>;

package/dist/chat-thread/index.d.ts

@@ -3,12 +3,9 @@ import type { HTMLAttributes } from 'svelte/elements';
 export interface ChatThreadProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     messageCount: number;
     scrollKey?: number;
-    children: Snippet<[
-        {
-            index: number;
-            viewTransitionName: string;
-            isLatest: boolean;
-        }
-    ]>;
+    children: Snippet<[{
+        index: number;
+        isLatest: boolean;
+    }]>;
 }
 export { default as ChatThread } from './chat-thread.svelte';

package/dist/checkbox/checkbox-input.svelte

@@ -26,18 +26,20 @@
 
 	let dataState = $derived(indeterminate ? 'indeterminate' : checked ? 'checked' : 'unchecked');
 
-	function applyIndeterminate(node: HTMLInputElement) {
-		$effect(() => {
-			node.indeterminate = indeterminate;
-		});
-	}
+	let labeledInputEl = $state<HTMLInputElement>();
+	let bareInputEl = $state<HTMLInputElement>();
+
+	$effect(() => {
+		if (labeledInputEl) labeledInputEl.indeterminate = indeterminate;
+		if (bareInputEl) bareInputEl.indeterminate = indeterminate;
+	});
 </script>
 
 {#if children}
 	<label class="checkbox-label" data-disabled={isDisabled || undefined} data-size={size}>
 		<span class="wrapper">
 			<input
-				{@attach applyIndeterminate}
+				bind:this={labeledInputEl}
 				type="checkbox"
 				bind:checked
 				id={ctx?.id}
@@ -58,7 +60,7 @@
 {:else}
 	<span class="wrapper">
 		<input
-			{@attach applyIndeterminate}
+			bind:this={bareInputEl}
 			type="checkbox"
 			bind:checked
 			id={ctx?.id}
@@ -91,7 +93,7 @@
 
 	.checkbox-text {
 		font-size: var(--dry-text-sm-size);
-		line-height: var(--dry-text-sm-line);
+		line-height: var(--dry-text-sm-leading);
 		color: var(--dry-color-text-strong);
 		user-select: none;
 	}
@@ -108,24 +110,29 @@
 	}
 
 	input {
-		--dry-checkbox-size: 20px;
-		--dry-checkbox-radius: var(--dry-control-radius, var(--dry-radius-sm));
-		--dry-checkbox-bg: var(--dry-control-bg, var(--dry-color-bg-raised));
-		--dry-checkbox-border: var(--dry-control-border, var(--dry-color-stroke-strong));
-		--dry-checkbox-check-color: var(--dry-color-on-brand);
+		--_checkbox-size-default: 20px;
+		--_checkbox-radius-default: var(--dry-control-radius, var(--dry-radius-sm));
+		--_checkbox-bg-default: var(--dry-control-bg, var(--dry-color-bg-raised));
+		--_checkbox-border-default: var(--dry-control-border, var(--dry-color-stroke-strong));
+		--_checkbox-check-color-default: var(--dry-color-on-brand);
+		--_checkbox-size: var(--dry-checkbox-size, var(--_checkbox-size-default));
+		--_checkbox-radius: var(--dry-checkbox-radius, var(--_checkbox-radius-default));
+		--_checkbox-bg: var(--dry-checkbox-bg, var(--_checkbox-bg-default));
+		--_checkbox-border: var(--dry-checkbox-border, var(--_checkbox-border-default));
+		--_checkbox-check-color: var(--dry-checkbox-check-color, var(--_checkbox-check-color-default));
 
 		appearance: none;
 		-webkit-appearance: none;
 		display: grid;
 		place-items: center;
-		grid-template-columns: calc(0.35 * var(--dry-checkbox-size));
-		height: var(--dry-checkbox-size);
+		grid-template-columns: calc(0.35 * var(--_checkbox-size));
+		height: var(--_checkbox-size);
 		aspect-ratio: 1;
 		margin: 0;
 		padding: 0;
-		border: 2px solid var(--dry-checkbox-border);
-		border-radius: var(--dry-checkbox-radius);
-		background: var(--dry-checkbox-bg);
+		border: 2px solid var(--_checkbox-border);
+		border-radius: var(--_checkbox-radius);
+		background: var(--_checkbox-bg);
 		cursor: pointer;
 		transition:
 			background var(--dry-duration-fast) var(--dry-ease-default),
@@ -138,8 +145,8 @@
 			aspect-ratio: 35 / 60;
 			border: solid transparent;
 			border-width: 0 2px 2px 0;
-			margin-left: calc(var(--dry-checkbox-size) * 0.52);
-			margin-top: calc(var(--dry-checkbox-size) * -0.18);
+			margin-left: calc(var(--_checkbox-size) * 0.52);
+			margin-top: calc(var(--_checkbox-size) * -0.18);
 			transform-origin: center;
 			opacity: 0;
 			transform: rotate(45deg) scale(0.25);
@@ -151,12 +158,12 @@
 		}
 
 		&[data-state='checked'] {
-			--dry-checkbox-bg: var(--dry-color-fill-selected);
-			--dry-checkbox-border: var(--dry-color-stroke-selected);
+			--_checkbox-bg-default: var(--dry-color-fill-selected);
+			--_checkbox-border-default: var(--dry-color-stroke-selected);
 			box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
 
 			&::after {
-				border-color: var(--dry-checkbox-check-color);
+				border-color: var(--_checkbox-check-color);
 				opacity: 1;
 				transform: rotate(45deg) scale(1);
 				filter: blur(0);
@@ -164,16 +171,16 @@
 		}
 
 		&[data-state='indeterminate'] {
-			grid-template-columns: calc(0.5 * var(--dry-checkbox-size));
-			--dry-checkbox-bg: var(--dry-color-fill-selected);
-			--dry-checkbox-border: var(--dry-color-stroke-selected);
+			grid-template-columns: calc(0.5 * var(--_checkbox-size));
+			--_checkbox-bg-default: var(--dry-color-fill-selected);
+			--_checkbox-border-default: var(--dry-color-stroke-selected);
 			box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
 
 			&::after {
 				height: 2px;
 				aspect-ratio: auto;
 				border: none;
-				background: var(--dry-checkbox-check-color);
+				background: var(--_checkbox-check-color);
 				margin-left: 0;
 				margin-top: 0;
 				opacity: 1;
@@ -183,7 +190,7 @@
 		}
 
 		&:hover:not([data-disabled]) {
-			--dry-checkbox-border: var(--dry-color-stroke-selected);
+			--_checkbox-border-default: var(--dry-color-stroke-selected);
 		}
 
 		&:focus-visible {
@@ -192,49 +199,49 @@
 		}
 
 		&[data-disabled] {
-			--dry-checkbox-bg: var(--dry-color-fill-disabled);
-			--dry-checkbox-border: var(--dry-color-stroke-disabled);
-			--dry-checkbox-check-color: var(--dry-color-text-disabled);
+			--_checkbox-bg-default: var(--dry-color-fill-disabled);
+			--_checkbox-border-default: var(--dry-color-stroke-disabled);
+			--_checkbox-check-color-default: var(--dry-color-text-disabled);
 			opacity: 1;
 			cursor: not-allowed;
 		}
 
 		&[aria-invalid='true'],
 		&[data-invalid] {
-			--dry-checkbox-border: var(--dry-color-stroke-error);
+			--_checkbox-border-default: var(--dry-color-stroke-error);
 
 			&:not([data-state='checked']):not([data-state='indeterminate']) {
-				--dry-checkbox-bg: var(--dry-color-fill-error-weak);
+				--_checkbox-bg-default: var(--dry-color-fill-error-weak);
 			}
 		}
 
 		&[aria-invalid='true']:hover:not([data-disabled]),
 		&[data-invalid]:hover:not([data-disabled]) {
-			--dry-checkbox-border: var(--dry-color-stroke-error);
+			--_checkbox-border-default: var(--dry-color-stroke-error);
 		}
 
 		&[aria-invalid='true']:focus-visible,
 		&[data-invalid]:focus-visible {
 			outline-color: var(--dry-color-stroke-error);
-			--dry-checkbox-border: var(--dry-color-stroke-error);
+			--_checkbox-border-default: var(--dry-color-stroke-error);
 		}
 	}
 
 	/* ── Sizes ─────────────────────────────────────────────────────────────────── */
 
 	input[data-size='sm'] {
-		--dry-checkbox-size: var(--dry-space-6);
-		--dry-checkbox-radius: var(--dry-radius-sm);
+		--_checkbox-size-default: var(--dry-space-6);
+		--_checkbox-radius-default: var(--dry-radius-sm);
 	}
 
 	input[data-size='md'] {
-		--dry-checkbox-size: 1.75rem;
-		--dry-checkbox-radius: var(--dry-radius-sm);
+		--_checkbox-size-default: 1.75rem;
+		--_checkbox-radius-default: var(--dry-radius-sm);
 	}
 
 	input[data-size='lg'] {
-		--dry-checkbox-size: var(--dry-space-8);
-		--dry-checkbox-radius: var(--dry-radius-md);
+		--_checkbox-size-default: var(--dry-space-8);
+		--_checkbox-radius-default: var(--dry-radius-md);
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/dist/chip/chip-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import Button from '../button/button.svelte';
 	import { resolveAlias } from '../internal/color-aliases.js';
 	import type { ChipColor } from './index.js';
@@ -20,13 +20,7 @@
 		children: Snippet;
 	}
 
-	type RestProps = Omit<HTMLButtonAttributes, 'type' | 'disabled' | 'onclick' | 'children'> &
-		Omit<
-			HTMLAnchorAttributes,
-			'href' | 'rel' | 'target' | 'download' | 'type' | 'onclick' | 'children'
-		>;
-
-	type Props = SharedProps & RestProps;
+	type Props = SharedProps & Omit<HTMLAttributes<HTMLSpanElement>, 'onclick' | 'children'>;
 
 	let {
 		selected,
@@ -40,6 +34,8 @@
 		download,
 		type = 'button',
 		onclick,
+		class: className,
+		style,
 		children,
 		...rest
 	}: Props = $props();
@@ -48,11 +44,13 @@
 </script>
 
 <span
-	class="chip-wrap"
+	class={['chip-wrap', className]}
+	{style}
 	data-chip-variant={variant}
 	data-chip-color={resolvedColor}
 	data-chip-size={size}
 	data-chip-selected={selected || undefined}
+	{...rest}
 >
 	<Button
 		variant="pill"
@@ -66,7 +64,6 @@
 		aria-pressed={selected || undefined}
 		data-disabled={disabled || undefined}
 		data-selected={selected || undefined}
-		{...rest}
 		{onclick}
 	>
 		{@render children()}
@@ -76,13 +73,13 @@
 <style>
 	.chip-wrap {
 		display: inline-grid;
-		--dry-btn-accent: var(--_chip-active-bg);
-		--dry-btn-accent-fg: var(--_chip-color);
-		--dry-btn-accent-stroke: var(--_chip-border);
-		--dry-btn-accent-weak: var(--_chip-bg);
-		--dry-btn-bg: var(--_chip-bg);
-		--dry-btn-color: var(--_chip-color);
-		--dry-btn-border: var(--_chip-border);
+		--dry-btn-accent: var(--dry-chip-active-bg, var(--_chip-active-bg));
+		--dry-btn-accent-fg: var(--dry-chip-color, var(--_chip-color));
+		--dry-btn-accent-stroke: var(--dry-chip-border, var(--_chip-border));
+		--dry-btn-accent-weak: var(--dry-chip-bg, var(--_chip-bg));
+		--dry-btn-bg: var(--dry-chip-bg, var(--_chip-bg));
+		--dry-btn-color: var(--dry-chip-color, var(--_chip-color));
+		--dry-btn-border: var(--dry-chip-border, var(--_chip-border));
 	}
 
 	/* Defaults */

package/dist/chip/chip-button.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { HTMLAttributes } from 'svelte/elements';
 import type { ChipColor } from './index.js';
 interface SharedProps {
     selected?: boolean;
@@ -15,8 +15,7 @@ interface SharedProps {
     onclick?: (event: MouseEvent) => void;
     children: Snippet;
 }
-type RestProps = Omit<HTMLButtonAttributes, 'type' | 'disabled' | 'onclick' | 'children'> & Omit<HTMLAnchorAttributes, 'href' | 'rel' | 'target' | 'download' | 'type' | 'onclick' | 'children'>;
-type Props = SharedProps & RestProps;
+type Props = SharedProps & Omit<HTMLAttributes<HTMLSpanElement>, 'onclick' | 'children'>;
 declare const ChipButton: import("svelte").Component<Props, {}, "">;
 type ChipButton = ReturnType<typeof ChipButton>;
 export default ChipButton;

package/dist/chip-group/chip-group-root.svelte

@@ -71,10 +71,12 @@
 	 * reads naturally without grid hacks.
 	 */
 	[data-chip-group] {
+		--_chip-group-gap-default: var(--dry-space-2);
+
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
-		gap: var(--dry-chip-group-gap, var(--dry-space-2));
+		gap: var(--dry-chip-group-gap, var(--_chip-group-gap-default));
 	}
 
 	[data-chip-group][data-orientation='vertical'] {
@@ -84,15 +86,15 @@
 
 	/* Gap presets — map onto --dry-space tokens. */
 	[data-chip-group][data-gap='sm'] {
-		--dry-chip-group-gap: var(--dry-space-1);
+		--_chip-group-gap-default: var(--dry-space-1);
 	}
 
 	[data-chip-group][data-gap='md'] {
-		--dry-chip-group-gap: var(--dry-space-2);
+		--_chip-group-gap-default: var(--dry-space-2);
 	}
 
 	[data-chip-group][data-gap='lg'] {
-		--dry-chip-group-gap: var(--dry-space-3);
+		--_chip-group-gap-default: var(--dry-space-3);
 	}
 
 	/* Justify presets. */