@dryui/ui 3.0.0 → 4.0.1

package/dist/calendar/week-utils.js

@@ -0,0 +1,133 @@
+import { isSameDay } from '@dryui/primitives';
+export function startOfDay(date) {
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    return d;
+}
+export function addDays(date, n) {
+    const d = new Date(date);
+    d.setDate(d.getDate() + n);
+    return d;
+}
+export function getWeekDays(focused, weekStartDay) {
+    const start = startOfDay(focused);
+    const offset = (start.getDay() - weekStartDay + 7) % 7;
+    const monday = addDays(start, -offset);
+    return Array.from({ length: 7 }, (_, i) => addDays(monday, i));
+}
+export function dayMinutes(date) {
+    return date.getHours() * 60 + date.getMinutes();
+}
+export function isMultiDay(event) {
+    if (event.allDay)
+        return true;
+    return !isSameDay(event.start, event.end);
+}
+function overlaps(a, b) {
+    return (a.dayIndex === b.dayIndex && a.startMinutes < b.endMinutes && b.startMinutes < a.endMinutes);
+}
+export function layoutWeekEvents(events, weekDays, startHour, endHour) {
+    const positioned = [];
+    const band = [];
+    const minMinutes = startHour * 60;
+    const maxMinutes = endHour * 60;
+    const accumulator = [];
+    const sortedBand = [];
+    for (const event of events) {
+        const isMulti = isMultiDay(event);
+        if (isMulti) {
+            const startIdx = weekDays.findIndex((d) => isSameDay(d, event.start) || d.getTime() > startOfDay(event.start).getTime());
+            const endIdx = (() => {
+                let last = -1;
+                weekDays.forEach((d, i) => {
+                    if (d.getTime() <= startOfDay(event.end).getTime())
+                        last = i;
+                });
+                return last;
+            })();
+            if (startIdx !== -1 && endIdx !== -1 && endIdx >= startIdx) {
+                sortedBand.push({
+                    event,
+                    startDayIndex: Math.max(0, startIdx),
+                    endDayIndex: Math.min(6, endIdx)
+                });
+            }
+            continue;
+        }
+        const dayIndex = weekDays.findIndex((d) => isSameDay(d, event.start));
+        if (dayIndex === -1)
+            continue;
+        const start = Math.max(minMinutes, dayMinutes(event.start));
+        const end = Math.min(maxMinutes, dayMinutes(event.end));
+        if (end <= start)
+            continue;
+        accumulator.push({ dayIndex, startMinutes: start, endMinutes: end, event });
+    }
+    accumulator.sort((a, b) => a.dayIndex !== b.dayIndex ? a.dayIndex - b.dayIndex : a.startMinutes - b.startMinutes);
+    const columnsByDay = new Map();
+    for (const item of accumulator) {
+        const dayCols = columnsByDay.get(item.dayIndex) ?? [];
+        let placed = false;
+        for (let c = 0; c < dayCols.length; c++) {
+            const col = dayCols[c];
+            if (col.every((existing) => !overlaps(existing, item))) {
+                col.push(item);
+                positioned.push({
+                    event: item.event,
+                    dayIndex: item.dayIndex,
+                    startMinutes: item.startMinutes,
+                    endMinutes: item.endMinutes,
+                    column: c,
+                    columnCount: 0
+                });
+                placed = true;
+                break;
+            }
+        }
+        if (!placed) {
+            dayCols.push([item]);
+            positioned.push({
+                event: item.event,
+                dayIndex: item.dayIndex,
+                startMinutes: item.startMinutes,
+                endMinutes: item.endMinutes,
+                column: dayCols.length - 1,
+                columnCount: 0
+            });
+        }
+        columnsByDay.set(item.dayIndex, dayCols);
+    }
+    for (const p of positioned) {
+        const cols = columnsByDay.get(p.dayIndex);
+        p.columnCount = cols ? cols.length : 1;
+    }
+    sortedBand.sort((a, b) => a.startDayIndex - b.startDayIndex);
+    const rows = [];
+    for (const entry of sortedBand) {
+        let placed = false;
+        for (let r = 0; r < rows.length; r++) {
+            const row = rows[r];
+            if (row.every((existing) => entry.startDayIndex > existing.endDayIndex || entry.endDayIndex < existing.startDayIndex)) {
+                row.push({ startDayIndex: entry.startDayIndex, endDayIndex: entry.endDayIndex });
+                band.push({ ...entry, row: r });
+                placed = true;
+                break;
+            }
+        }
+        if (!placed) {
+            rows.push([{ startDayIndex: entry.startDayIndex, endDayIndex: entry.endDayIndex }]);
+            band.push({ ...entry, row: rows.length - 1 });
+        }
+    }
+    return { positioned, band };
+}
+export function formatTime(date, locale) {
+    return new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' })
+        .format(date)
+        .replace(/\s/g, ' ');
+}
+export function formatHourLabel(hour, locale) {
+    const date = new Date();
+    date.setHours(hour, 0, 0, 0);
+    return new Intl.DateTimeFormat(locale, { hour: 'numeric' }).format(date).replace(/\s/g, ' ');
+}

package/dist/carousel/carousel-button-dots.svelte

@@ -38,7 +38,7 @@
 					(current slide)
 				{/if}
 			</VisuallyHidden>
-			<span class="dot" aria-hidden="true"></span>
+			<span class="dot" data-active={isActive ? '' : undefined} aria-hidden="true"></span>
 		</Button>
 	{/each}
 </div>
@@ -55,14 +55,20 @@
 
 	.dot {
 		display: inline-grid;
-		height: var(--dry-space-2_5);
-		aspect-ratio: 1;
+		block-size: var(--dry-space-2);
+		padding-inline: calc(var(--dry-space-2) / 2);
 		border-radius: 9999px;
-		background: currentColor;
-		opacity: 0.4;
+		background: var(--dry-color-text-weak);
+		opacity: 0.55;
+		transition:
+			padding-inline var(--dry-duration-fast) var(--dry-ease-default),
+			background-color var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
-	[data-active] .dot {
+	.dot[data-active] {
 		opacity: 1;
+		padding-inline: var(--dry-space-3);
+		background: var(--dry-color-fill-brand);
 	}
 </style>

package/dist/carousel/carousel-root.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import { untrack, type Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import Button from '../button/button.svelte';
 	import {
@@ -37,8 +37,19 @@
 	let manualPaused = $state(false);
 	let pausedByHover = $state(false);
 	let pausedByFocus = $state(false);
+	// Lock observer-driven activeIndex updates to a single physical target while a
+	// programmatic smooth scroll is animating, so intermediate slides crossing the
+	// IntersectionObserver threshold do not retarget the active dot.
+	let programmaticTarget: number | null = null;
+	let programmaticTimeoutId: ReturnType<typeof setTimeout> | null = null;
 	const carouselId = `dry-carousel-${++carouselIds}`;
 
+	// When loop is on and there are at least two real slides, we render a clone of
+	// the last slide before the first and a clone of the first slide after the
+	// last. cloneOffset is the number of leading clones (0 or 1).
+	const cloneOffset = $derived(loop && totalSlides >= 2 ? 1 : 0);
+	const loopActive = $derived(cloneOffset === 1);
+
 	const canScrollPrev = $derived(loop || activeIndex > 0);
 	const canScrollNext = $derived(loop || activeIndex < totalSlides - 1);
 	const autoplayDelay = $derived(typeof autoplay === 'number' && autoplay > 0 ? autoplay : 0);
@@ -53,10 +64,32 @@
 		return Math.max(0, Math.min(index, totalSlides - 1));
 	}
 
-	function scrollViewportTo(index: number) {
+	function logicalToPhysical(logical: number): number {
+		return logical + cloneOffset;
+	}
+
+	function physicalToLogical(physical: number): number {
+		if (!loopActive) return physical;
+		if (physical === 0) return totalSlides - 1; // clone-of-last
+		if (physical === totalSlides + 1) return 0; // clone-of-first
+		return physical - 1;
+	}
+
+	function clearProgrammaticTarget() {
+		programmaticTarget = null;
+		if (programmaticTimeoutId !== null) {
+			clearTimeout(programmaticTimeoutId);
+			programmaticTimeoutId = null;
+		}
+	}
+
+	function scrollViewportToPhysical(physical: number) {
 		if (!viewportEl) return;
-		const slide = viewportEl.children[index] as HTMLElement | undefined;
+		const slide = viewportEl.children[physical] as HTMLElement | undefined;
 		if (!slide) return;
+		programmaticTarget = physical;
+		if (programmaticTimeoutId !== null) clearTimeout(programmaticTimeoutId);
+		programmaticTimeoutId = setTimeout(clearProgrammaticTarget, 1000);
 		viewportEl.scrollTo({
 			left: orientation === 'horizontal' ? slide.offsetLeft : 0,
 			top: orientation === 'vertical' ? slide.offsetTop : 0,
@@ -64,14 +97,99 @@
 		});
 	}
 
-	function syncActiveIndex(index: number) {
-		activeIndex = resolveIndex(index);
+	function syncActiveIndex(physicalIndex: number) {
+		if (programmaticTarget !== null && physicalIndex !== programmaticTarget) return;
+		activeIndex = physicalToLogical(physicalIndex);
+		if (physicalIndex === programmaticTarget) clearProgrammaticTarget();
 	}
 
-	function scrollTo(index: number) {
-		const target = resolveIndex(index);
+	function scrollTo(logicalIndex: number) {
+		realignFromCloneZone();
+		const target = resolveIndex(logicalIndex);
 		activeIndex = target;
-		scrollViewportTo(target);
+		scrollViewportToPhysical(logicalToPhysical(target));
+	}
+
+	function scrollNext() {
+		realignFromCloneZone();
+		if (loopActive && activeIndex === totalSlides - 1) {
+			// Forward wrap: smooth-scroll past the real last into the clone-of-first
+			// (physical index totalSlides + 1). The scrollend handler then instant-
+			// snaps back to the real first (physical index cloneOffset).
+			activeIndex = 0;
+			scrollViewportToPhysical(totalSlides + 1);
+			return;
+		}
+		scrollTo(activeIndex + 1);
+	}
+
+	function scrollPrev() {
+		realignFromCloneZone();
+		if (loopActive && activeIndex === 0) {
+			// Backward wrap: scroll into clone-of-last (physical index 0). The
+			// scrollend handler snaps back to the real last (physical totalSlides).
+			activeIndex = totalSlides - 1;
+			scrollViewportToPhysical(0);
+			return;
+		}
+		scrollTo(activeIndex - 1);
+	}
+
+	function snapBackFromClone() {
+		if (!loopActive || !viewportEl) return;
+		const cloneOfLastEl = viewportEl.children[0] as HTMLElement | undefined;
+		const realLastEl = viewportEl.children[totalSlides] as HTMLElement | undefined;
+		const realFirstEl = viewportEl.children[1] as HTMLElement | undefined;
+		const cloneOfFirstEl = viewportEl.children[totalSlides + 1] as HTMLElement | undefined;
+		if (!cloneOfLastEl || !realLastEl || !realFirstEl || !cloneOfFirstEl) return;
+
+		const epsilon = 4;
+		const scrollPos = orientation === 'horizontal' ? viewportEl.scrollLeft : viewportEl.scrollTop;
+
+		if (Math.abs(scrollPos - offsetOf(cloneOfLastEl)) < epsilon) {
+			scrollInstant(realLastEl);
+		} else if (Math.abs(scrollPos - offsetOf(cloneOfFirstEl)) < epsilon) {
+			scrollInstant(realFirstEl);
+		}
+	}
+
+	// Called before any new programmatic navigation. If a previous wrap animation
+	// is still in flight (scroll position is anywhere past the real last or before
+	// the real first slide), instant-snap to the real twin first. The clone is a
+	// pixel-identical copy of the twin, so the snap is visually invisible — but
+	// it puts the next smooth scroll's start position on a real slide, preventing
+	// the long backward rewind that rapid clicks would otherwise produce.
+	function realignFromCloneZone() {
+		if (!loopActive || !viewportEl) return;
+		const realLastEl = viewportEl.children[totalSlides] as HTMLElement | undefined;
+		const realFirstEl = viewportEl.children[1] as HTMLElement | undefined;
+		if (!realLastEl || !realFirstEl) return;
+
+		const scrollPos = orientation === 'horizontal' ? viewportEl.scrollLeft : viewportEl.scrollTop;
+		const realFirstPos = offsetOf(realFirstEl);
+		const realLastPos = offsetOf(realLastEl);
+		const epsilon = 1;
+
+		if (scrollPos > realLastPos + epsilon) {
+			scrollInstant(realFirstEl);
+			clearProgrammaticTarget();
+		} else if (scrollPos < realFirstPos - epsilon) {
+			scrollInstant(realLastEl);
+			clearProgrammaticTarget();
+		}
+	}
+
+	function offsetOf(el: HTMLElement): number {
+		return orientation === 'horizontal' ? el.offsetLeft : el.offsetTop;
+	}
+
+	function scrollInstant(el: HTMLElement) {
+		if (!viewportEl) return;
+		viewportEl.scrollTo({
+			left: orientation === 'horizontal' ? el.offsetLeft : 0,
+			top: orientation === 'vertical' ? el.offsetTop : 0,
+			behavior: 'instant'
+		});
 	}
 
 	function toggleAutoplay() {
@@ -114,12 +232,8 @@
 		},
 		scrollTo,
 		syncActiveIndex,
-		scrollPrev() {
-			scrollTo(activeIndex - 1);
-		},
-		scrollNext() {
-			scrollTo(activeIndex + 1);
-		},
+		scrollPrev,
+		scrollNext,
 		toggleAutoplay,
 		getSlideId(index) {
 			return `${carouselId}-slide-${index + 1}`;
@@ -167,10 +281,80 @@
 	$effect(() => {
 		if (!autoplayRunning || !autoplayConfigured) return;
 		const interval = setInterval(() => {
-			scrollTo(activeIndex + 1);
+			scrollNext();
 		}, autoplayDelay);
 		return () => clearInterval(interval);
 	});
+
+	// Insert/remove edge clones whenever loop or totalSlides changes. The clones
+	// are static DOM copies (no Svelte reactivity) — anything stateful inside a
+	// slide will not stay in sync with the original. This is a known limitation
+	// of slide-cloning carousels and is documented in carousel.meta.ts.
+	$effect(() => {
+		const view = viewportEl;
+		if (!view) return;
+		// Track totalSlides for reactivity even when loopActive short-circuits.
+		const slideCount = totalSlides;
+		if (!loopActive || slideCount < 2) return;
+
+		const realChildren = Array.from(view.children).filter(
+			(child) => !(child as HTMLElement).hasAttribute('data-carousel-clone')
+		) as HTMLElement[];
+		if (realChildren.length !== slideCount) return;
+
+		const realFirst = realChildren[0];
+		const realLast = realChildren[realChildren.length - 1];
+		if (!realFirst || !realLast) return;
+
+		const cloneOfLast = realLast.cloneNode(true) as HTMLElement;
+		const cloneOfFirst = realFirst.cloneNode(true) as HTMLElement;
+
+		for (const clone of [cloneOfLast, cloneOfFirst]) {
+			clone.setAttribute('data-carousel-clone', '');
+			clone.setAttribute('aria-hidden', 'true');
+			clone.setAttribute('inert', '');
+			clone.removeAttribute('id');
+			clone.removeAttribute('data-active');
+			for (const desc of clone.querySelectorAll('[id]')) desc.removeAttribute('id');
+		}
+
+		view.insertBefore(cloneOfLast, realFirst);
+		view.appendChild(cloneOfFirst);
+
+		// Position the viewport on the active real slide. Read activeIndex via
+		// untrack so a programmatic scrollTo (which updates activeIndex) does not
+		// re-trigger this effect and clobber the in-flight smooth scroll with an
+		// instant one.
+		const currentLogical = untrack(() => activeIndex);
+		const initialSlide = view.children[currentLogical + 1] as HTMLElement | undefined;
+		if (initialSlide) {
+			view.scrollTo({
+				left: orientation === 'horizontal' ? initialSlide.offsetLeft : 0,
+				top: orientation === 'vertical' ? initialSlide.offsetTop : 0,
+				behavior: 'instant'
+			});
+		}
+
+		return () => {
+			cloneOfLast.remove();
+			cloneOfFirst.remove();
+		};
+	});
+
+	// scrollend fires when a smooth-scroll animation finishes (or when a user
+	// drag/touch settles). We use it to release the programmatic lock and to
+	// snap-back from a clone to its real twin so the carousel never gets stuck
+	// at a clone position.
+	$effect(() => {
+		const view = viewportEl;
+		if (!view) return;
+		const handle = () => {
+			snapBackFromClone();
+			clearProgrammaticTarget();
+		};
+		view.addEventListener('scrollend', handle);
+		return () => view.removeEventListener('scrollend', handle);
+	});
 </script>
 
 <div
@@ -209,11 +393,11 @@
 		const next = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
 		if (e.key === prev) {
 			e.preventDefault();
-			scrollTo(activeIndex - 1);
+			scrollPrev();
 		}
 		if (e.key === next) {
 			e.preventDefault();
-			scrollTo(activeIndex + 1);
+			scrollNext();
 		}
 	}}
 >

package/dist/carousel/carousel-root.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     orientation?: 'horizontal' | 'vertical';

package/dist/carousel/carousel-viewport.svelte

@@ -28,7 +28,25 @@
 			);
 
 			for (const child of el.children) observer.observe(child);
-			return () => observer.disconnect();
+
+			// Loop carousels insert clone slides as direct children after this
+			// effect runs. Watch for childList changes so the observer covers them.
+			const mutObserver = new MutationObserver((mutations) => {
+				for (const mutation of mutations) {
+					for (const node of mutation.addedNodes) {
+						if (node instanceof HTMLElement) observer.observe(node);
+					}
+					for (const node of mutation.removedNodes) {
+						if (node instanceof HTMLElement) observer.unobserve(node);
+					}
+				}
+			});
+			mutObserver.observe(el, { childList: true });
+
+			return () => {
+				observer.disconnect();
+				mutObserver.disconnect();
+			};
 		}
 	});
 </script>

package/dist/chart/chart-bars.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { SVGAttributes } from 'svelte/elements';
 	import { getChartCtx, registerChartInteractive } from './context.svelte.js';
+	import { chartSeriesColor } from './series-color.js';
 
 	interface Props extends Omit<SVGAttributes<SVGGElement>, 'onclick'> {
 		radius?: number;
@@ -32,14 +33,13 @@
 		onclick?.({ label: bar.point.label, value: bar.point.value, index: bar.index });
 	}
 
-	function attachBarClick(bar: (typeof bars)[number]) {
-		if (!onclick) return undefined;
+	function handleKeydown(event: KeyboardEvent, bar: (typeof bars)[number]) {
+		if (!onclick || (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'Spacebar')) {
+			return;
+		}
 
-		return (node: SVGRectElement) => {
-			const handleNodeClick = () => handleClick(bar);
-			node.addEventListener('click', handleNodeClick);
-			return () => node.removeEventListener('click', handleNodeClick);
-		};
+		event.preventDefault();
+		handleClick(bar);
 	}
 
 	const registeredHandler = $derived(
@@ -55,19 +55,43 @@
 	registerChartInteractive(ctx, () => registeredHandler);
 </script>
 
-<g role="list" aria-label="Bar chart data" data-chart-bars class={className} {...rest}>
+<g
+	role={onclick ? 'group' : 'list'}
+	aria-label="Bar chart data"
+	data-chart-bars
+	class={className}
+	{...rest}
+>
 	{#each bars as bar (bar.index)}
-		<rect
-			x={bar.x}
-			y={bar.y}
-			width={bar.width}
-			height={bar.height}
-			rx={radius}
-			fill={bar.point.color ?? 'currentColor'}
-			data-part="bar"
-			data-clickable={onclick ? '' : undefined}
-			{@attach attachBarClick(bar)}
-		/>
+		{#if onclick}
+			<rect
+				role="button"
+				tabindex={0}
+				aria-label={`${bar.point.label}: ${bar.point.value}`}
+				x={bar.x}
+				y={bar.y}
+				width={bar.width}
+				height={bar.height}
+				rx={radius}
+				fill={bar.point.color ?? chartSeriesColor(bar.index)}
+				data-part="bar"
+				data-clickable=""
+				onclick={() => handleClick(bar)}
+				onkeydown={(event) => handleKeydown(event, bar)}
+			/>
+		{:else}
+			<rect
+				role="listitem"
+				aria-label={`${bar.point.label}: ${bar.point.value}`}
+				x={bar.x}
+				y={bar.y}
+				width={bar.width}
+				height={bar.height}
+				rx={radius}
+				fill={bar.point.color ?? chartSeriesColor(bar.index)}
+				data-part="bar"
+			/>
+		{/if}
 	{/each}
 </g>
 

package/dist/chart/chart-donut.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { SVGAttributes } from 'svelte/elements';
 	import { getChartCtx, registerChartInteractive } from './context.svelte.js';
+	import { chartSeriesColor } from './series-color.js';
 
 	interface Props extends Omit<SVGAttributes<SVGGElement>, 'onclick'> {
 		innerRadius?: number;
@@ -39,7 +40,7 @@
 				return {
 					dasharray: `${dashLength} ${circumference - dashLength}`,
 					dashoffset: offset,
-					color: point.color ?? 'currentColor',
+					color: point.color ?? chartSeriesColor(i),
 					point,
 					index: i
 				};
@@ -51,14 +52,13 @@
 		onclick?.({ label: seg.point.label, value: seg.point.value, index: seg.index });
 	}
 
-	function attachSegmentClick(seg: (typeof segments)[number]) {
-		if (!onclick) return undefined;
+	function handleKeydown(event: KeyboardEvent, seg: (typeof segments)[number]) {
+		if (!onclick || (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'Spacebar')) {
+			return;
+		}
 
-		return (node: SVGCircleElement) => {
-			const handleNodeClick = () => handleClick(seg);
-			node.addEventListener('click', handleNodeClick);
-			return () => node.removeEventListener('click', handleNodeClick);
-		};
+		event.preventDefault();
+		handleClick(seg);
 	}
 
 	const registeredHandler = $derived(
@@ -74,22 +74,49 @@
 	registerChartInteractive(ctx, () => registeredHandler);
 </script>
 
-<g role="list" aria-label="Donut chart data" data-chart-donut class={className} {...rest}>
+<g
+	role={onclick ? 'group' : 'list'}
+	aria-label="Donut chart data"
+	data-chart-donut
+	class={className}
+	{...rest}
+>
 	{#each segments as seg (seg.index)}
-		<circle
-			{cx}
-			{cy}
-			r={radius}
-			fill="none"
-			stroke={seg.color}
-			stroke-width={strokeW}
-			stroke-dasharray={seg.dasharray}
-			stroke-dashoffset={seg.dashoffset}
-			transform="rotate(-90 {cx} {cy})"
-			data-part="donut-segment"
-			data-clickable={onclick ? '' : undefined}
-			{@attach attachSegmentClick(seg)}
-		/>
+		{#if onclick}
+			<circle
+				role="button"
+				tabindex={0}
+				aria-label={`${seg.point.label}: ${seg.point.value}`}
+				{cx}
+				{cy}
+				r={radius}
+				fill="none"
+				stroke={seg.color}
+				stroke-width={strokeW}
+				stroke-dasharray={seg.dasharray}
+				stroke-dashoffset={seg.dashoffset}
+				transform="rotate(-90 {cx} {cy})"
+				data-part="donut-segment"
+				data-clickable=""
+				onclick={() => handleClick(seg)}
+				onkeydown={(event) => handleKeydown(event, seg)}
+			/>
+		{:else}
+			<circle
+				role="listitem"
+				aria-label={`${seg.point.label}: ${seg.point.value}`}
+				{cx}
+				{cy}
+				r={radius}
+				fill="none"
+				stroke={seg.color}
+				stroke-width={strokeW}
+				stroke-dasharray={seg.dasharray}
+				stroke-dashoffset={seg.dashoffset}
+				transform="rotate(-90 {cx} {cy})"
+				data-part="donut-segment"
+			/>
+		{/if}
 	{/each}
 	{#if label}
 		<foreignObject