@dryui/ui 1.2.0 → 1.3.0

package/dist/themes/default.css

@@ -91,19 +91,23 @@ samp {
 	--dry-color-bg-brand: var(--dry-color-fill-brand);
 	--dry-color-bg-inverse: hsl(233, 18%, 9%);
 
-	/* ─── Component: Toggle ───────────────────────────────────────── */
-	--dry-toggle-track-bg: rgba(0, 21, 128, 0.04);
-	--dry-toggle-track-stroke: rgba(0, 13, 77, 0.45);
-	--dry-toggle-selected-bg: #4c64d9;
-	--dry-toggle-selected-stroke: #4c64d9;
+	/* ─── Component: Toggle ─────────────────────────────────────────
+	   Derived from semantic tokens so brand overrides (e.g. a consumer
+	   retheming --dry-color-fill-brand) flow through to toggles too.
+	   Thumb bg is intentionally a neutral literal — it's a surface knob,
+	   not a brand-tinted element. */
+	--dry-toggle-track-bg: var(--dry-color-fill-brand-weak);
+	--dry-toggle-track-stroke: var(--dry-color-stroke-strong);
+	--dry-toggle-selected-bg: var(--dry-color-fill-brand);
+	--dry-toggle-selected-stroke: var(--dry-color-fill-brand);
 	--dry-toggle-thumb-bg: #ffffff;
-	--dry-toggle-hover-bg: rgba(0, 21, 128, 0.04);
-	--dry-toggle-press-bg: rgba(0, 17, 102, 0.1);
-	--dry-toggle-disabled-fill: rgba(0, 17, 102, 0.1);
-	--dry-toggle-disabled-stroke: rgba(0, 17, 102, 0.1);
-	--dry-toggle-focus-ring: #4c64d9;
-	--dry-toggle-label-color: rgba(0, 6, 38, 0.9);
-	--dry-toggle-label-disabled-color: rgba(0, 17, 102, 0.1);
+	--dry-toggle-hover-bg: var(--dry-color-fill-brand-weak);
+	--dry-toggle-press-bg: var(--dry-color-fill-active);
+	--dry-toggle-disabled-fill: var(--dry-color-stroke-weak);
+	--dry-toggle-disabled-stroke: var(--dry-color-stroke-weak);
+	--dry-toggle-focus-ring: var(--dry-color-fill-brand);
+	--dry-toggle-label-color: var(--dry-color-text-strong);
+	--dry-toggle-label-disabled-color: var(--dry-color-text-disabled);
 
 	/* ─── Component: Beam ─────────────────────────────────────────── */
 	--dry-beam-default-blend: multiply;

package/dist/themes/token-scope.d.ts

@@ -0,0 +1 @@
+export { TokenScope, type TokenScopeProps } from '@dryui/primitives/token-scope';

package/dist/themes/token-scope.js

@@ -0,0 +1 @@
+export { TokenScope } from '@dryui/primitives/token-scope';

package/dist/timeline/timeline-icon.svelte

@@ -21,11 +21,21 @@
 		place-items: center;
 		height: var(--dry-timeline-dot-size, 0.875rem);
 		aspect-ratio: 1;
+		margin-block-start: var(
+			--dry-timeline-icon-offset,
+			calc(
+				(var(--dry-timeline-content-line-height, 1.5rem) - var(--dry-timeline-dot-size, 0.875rem)) /
+					2
+			)
+		);
 		border-radius: var(--dry-radius-full);
 		background: var(--dry-timeline-dot-color, var(--dry-color-fill-brand));
 		color: var(--dry-color-bg-raised);
-		font-size: var(--dry-type-tiny-size, var(--dry-type-tiny-size));
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-timeline-icon-font-size, var(--dry-type-tiny-size));
 		font-weight: 700;
+		font-variant-numeric: tabular-nums lining-nums;
+		line-height: 1;
 		box-shadow: 0 0 0 3px var(--dry-color-bg-raised);
 	}
 </style>

package/dist/timeline/timeline-item.svelte

@@ -15,12 +15,18 @@
 
 <style>
 	[data-part='item'] {
+		--_timeline-item-pl: var(--dry-timeline-item-pl, var(--dry-space-4));
+		--_timeline-dot-size: var(--dry-timeline-dot-size, 0.875rem);
+		--_timeline-line-w: var(--dry-timeline-line-w, 1px);
+		--_timeline-content-lh: var(--dry-timeline-content-line-height, 1.5rem);
+		--_timeline-gap: var(--dry-timeline-gap, var(--dry-space-4));
+
 		position: relative;
 		display: grid;
 		grid-template-columns: var(--dry-timeline-item-columns, auto minmax(0, 1fr));
 		align-items: start;
 		gap: var(--dry-timeline-item-gap, var(--dry-space-3));
-		padding-left: var(--dry-timeline-item-pl, var(--dry-space-4));
+		padding-left: var(--_timeline-item-pl);
 		padding-top: var(--dry-timeline-item-pt, 0);
 	}
 
@@ -29,16 +35,23 @@
 		position: absolute;
 		left: var(
 			--dry-timeline-line-left,
-			calc(var(--dry-timeline-dot-size, 0.875rem) / 2 + var(--dry-space-2))
+			calc(var(--_timeline-item-pl) + var(--_timeline-dot-size) / 2 - var(--_timeline-line-w) / 2)
 		);
 		top: var(
 			--dry-timeline-line-top,
-			calc(var(--dry-timeline-dot-size, 0.875rem) + var(--dry-space-1))
+			calc((var(--_timeline-content-lh) + var(--_timeline-dot-size)) / 2 + var(--dry-space-1))
+		);
+		bottom: var(
+			--dry-timeline-line-bottom,
+			calc(-1 * (var(--_timeline-gap) + var(--_timeline-content-lh) / 2 - var(--dry-space-1)))
 		);
-		bottom: var(--dry-timeline-line-bottom, calc(var(--dry-space-1) * -1));
 		right: var(--dry-timeline-line-right, auto);
 		height: var(--dry-timeline-line-h, auto);
-		border-left: var(--dry-timeline-line-w, 1px) solid
+		border-left: var(--_timeline-line-w) solid
 			var(--dry-timeline-line-color, var(--dry-color-stroke-weak));
 	}
+
+	[data-part='item']:last-child::before {
+		display: none;
+	}
 </style>

package/dist/timeline/timeline-root.svelte

@@ -16,15 +16,8 @@
 
 <style>
 	[data-part='root'] {
-		--dry-timeline-line-color: var(--dry-color-stroke-weak);
-		--dry-timeline-dot-size: 0.875rem;
-		--dry-timeline-dot-color: var(--dry-color-fill-brand);
-		--dry-timeline-gap: var(--dry-space-4);
-		--dry-timeline-item-gap: var(--dry-space-3);
-		--dry-timeline-content-gap: var(--dry-space-1);
-
 		display: grid;
-		gap: var(--dry-timeline-gap);
+		gap: var(--dry-timeline-gap, var(--dry-space-4));
 		color: var(--dry-color-text-strong);
 	}
 
@@ -32,7 +25,7 @@
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
-		gap: var(--dry-space-4);
+		gap: var(--dry-timeline-gap, var(--dry-space-4));
 		overflow-x: auto;
 		padding-bottom: var(--dry-space-1);
 
@@ -41,7 +34,7 @@
 		--dry-timeline-item-pl: 0;
 		--dry-timeline-item-pt: var(--dry-space-4);
 		--dry-timeline-line-left: 0;
-		--dry-timeline-line-top: calc(var(--dry-timeline-dot-size) / 2 + var(--dry-space-2));
+		--dry-timeline-line-top: calc(var(--dry-space-4) + var(--dry-timeline-dot-size, 0.875rem) / 2);
 		--dry-timeline-line-right: calc(var(--dry-space-1) * -1);
 		--dry-timeline-line-bottom: auto;
 		--dry-timeline-line-w: auto;

package/dist/toast/toast-close-button.svelte

@@ -14,10 +14,22 @@
 	const ctx = getToastCtx();
 </script>
 
-<CloseButtonBase
-	aria-label="Close notification"
-	{...rest}
-	onclick={() => toastStore.remove(ctx.id)}
->
-	{@render children()}
-</CloseButtonBase>
+<span data-part="toast-close">
+	<CloseButtonBase
+		aria-label="Close notification"
+		{...rest}
+		onclick={() => toastStore.remove(ctx.id)}
+	>
+		{@render children()}
+	</CloseButtonBase>
+</span>
+
+<style>
+	[data-part='toast-close'] {
+		position: absolute;
+		top: var(--dry-space-3);
+		right: var(--dry-space-3);
+		display: inline-grid;
+		--dry-btn-font-size: var(--dry-type-heading-3-size, var(--dry-text-xl-size));
+	}
+</style>

package/dist/toast/toast-provider.svelte

@@ -20,10 +20,30 @@
 
 	let { class: className, position = 'bottom-right', children, ...rest }: Props = $props();
 	const visible = $derived(Boolean(children) || toastStore.toasts.length > 0);
+
+	let panelEl = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!panelEl) return;
+		if (visible) {
+			try {
+				if (!panelEl.matches(':popover-open')) panelEl.showPopover();
+			} catch {
+				// already open
+			}
+		} else {
+			try {
+				if (panelEl.matches(':popover-open')) panelEl.hidePopover();
+			} catch {
+				// already closed
+			}
+		}
+	});
 </script>
 
 <div
-	hidden={!visible}
+	bind:this={panelEl}
+	popover="manual"
 	role="region"
 	aria-label="Notifications"
 	data-part="provider"
@@ -71,6 +91,7 @@
 		margin: 0;
 		border: none;
 		background: transparent;
+		color: inherit;
 		overflow: visible;
 		container-type: inline-size;
 

package/dist/toggle/toggle-button.svelte

@@ -88,10 +88,8 @@
 <style>
 	.root {
 		display: inline-grid;
-		grid-template-columns: var(--_track-w) max-content;
+		grid-template-columns: var(--_track-w);
 		align-items: center;
-		gap: var(--_gap);
-		padding-inline-end: var(--_gap);
 		--dry-btn-bg: var(--dry-toggle-track-bg, var(--dry-color-fill-weak));
 		--dry-btn-border: var(--dry-toggle-track-stroke, var(--dry-color-stroke-strong));
 		--dry-btn-radius: var(--_track-w);
@@ -101,6 +99,12 @@
 		--dry-btn-min-height: var(--_track-h);
 	}
 
+	.root:has(.label) {
+		grid-template-columns: var(--_track-w) max-content;
+		gap: var(--_gap);
+		padding-inline-end: var(--_gap);
+	}
+
 	.root[data-state='on'] {
 		--dry-btn-bg: var(--dry-toggle-selected-bg, var(--dry-color-fill-selected));
 	}

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 	import { setToggleGroupCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -57,8 +58,7 @@
 	role="toolbar"
 	aria-orientation={orientation}
 	data-part="root"
-	data-orientation={orientation}
-	data-size={size}
+	{...variantAttrs({ orientation, size })}
 	class={className}
 	{...rest}
 >

package/dist/tooltip/tooltip-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAnchorPosition, type Placement } from '@dryui/primitives';
+	import { createAnchoredPopover, type Placement } from '@dryui/primitives';
 	import { getTooltipCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -23,37 +23,12 @@
 
 	let contentEl = $state<HTMLDivElement>();
 
-	const anchor = createAnchorPosition(
-		() => ctx.triggerEl,
-		() => contentEl ?? null,
-		{
-			get placement() {
-				return placement;
-			},
-			get offset() {
-				return offset;
-			}
-		}
-	);
-
-	$effect(() => {
-		if (!contentEl) return;
-
-		contentEl.style.cssText = typeof style === 'string' ? style : '';
-		const positionStyles = anchor.styles;
-		for (const [key, value] of Object.entries(positionStyles)) {
-			contentEl.style.setProperty(key, value);
-		}
-	});
-
-	$effect(() => {
-		if (!contentEl) return;
-
-		if (ctx.open && !contentEl.matches(':popover-open')) {
-			contentEl.showPopover();
-		} else if (!ctx.open && contentEl.matches(':popover-open')) {
-			contentEl.hidePopover();
-		}
+	const popover = createAnchoredPopover({
+		triggerEl: () => ctx.triggerEl,
+		contentEl: () => contentEl ?? null,
+		open: () => ctx.open,
+		placement: () => placement,
+		offset: () => offset
 	});
 </script>
 
@@ -64,6 +39,7 @@
 	popover="manual"
 	data-tooltip-content
 	data-state={ctx.open ? 'open' : 'closed'}
+	use:popover.applyPosition={style}
 	class={className}
 	{...rest}
 >

package/dist/tour/tour-root.css

@@ -1,11 +1,11 @@
-[data-tour-root] [data-tour-overlay] {
+[data-tour-overlay] {
 	position: fixed;
 	inset: 0;
 	z-index: var(--dry-layer-tour-overlay);
 	pointer-events: auto;
 }
 
-[data-tour-root] [data-tour-spotlight] {
+[data-tour-spotlight] {
 	--dry-tour-overlay-color: var(--dry-color-overlay-backdrop-strong);
 	--dry-tour-spotlight-padding: 8px;
 	--dry-tour-spotlight-radius: 4px;
@@ -29,7 +29,7 @@
 		height var(--dry-duration-normal) var(--dry-ease-out);
 }
 
-[data-tour-root] [data-part='tooltip'] {
+[data-tour-tooltip] {
 	--dry-tour-tooltip-bg: var(--dry-color-bg-overlay);
 	--dry-tour-tooltip-radius: var(--dry-radius-xl);
 	--dry-tour-tooltip-shadow: var(--dry-shadow-overlay);
@@ -59,7 +59,7 @@
 		opacity var(--dry-duration-fast) var(--dry-ease-out);
 }
 
-[data-tour-root] [data-part='tooltipTitle'] {
+[data-tour-tooltip] [data-part='tooltipTitle'] {
 	font-family: var(--dry-font-sans);
 	font-size: var(--dry-type-small-size, var(--dry-text-base-size));
 	font-weight: 600;
@@ -68,7 +68,7 @@
 	line-height: 1.3;
 }
 
-[data-tour-root] [data-part='tooltipContent'] {
+[data-tour-tooltip] [data-part='tooltipContent'] {
 	font-family: var(--dry-font-sans);
 	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 	line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
@@ -76,20 +76,20 @@
 	margin: 0 0 var(--dry-space-4);
 }
 
-[data-tour-root] [data-part='tooltipFooter'] {
+[data-tour-tooltip] [data-part='tooltipFooter'] {
 	display: grid;
 	grid-template-columns: 1fr auto;
 	align-items: center;
 	gap: var(--dry-space-3);
 }
 
-[data-tour-root] [data-part='tooltipCounter'] {
+[data-tour-tooltip] [data-part='tooltipCounter'] {
 	font-family: var(--dry-font-sans);
 	font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
 	color: var(--dry-color-text-weak);
 }
 
-[data-tour-root] [data-part='tooltipActions'] {
+[data-tour-tooltip] [data-part='tooltipActions'] {
 	display: grid;
 	grid-auto-flow: column;
 	grid-auto-columns: max-content;
@@ -98,7 +98,7 @@
 	justify-items: end;
 }
 
-[data-tour-root] [data-part='skipButton'] {
+[data-tour-tooltip] [data-part='skipButton'] {
 	font-family: var(--dry-font-sans);
 	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 	color: var(--dry-color-text-weak);
@@ -110,16 +110,16 @@
 	transition: color var(--dry-duration-fast);
 }
 
-[data-tour-root] [data-part='skipButton']:hover {
+[data-tour-tooltip] [data-part='skipButton']:hover {
 	color: var(--dry-color-text-strong);
 }
 
-[data-tour-root] [data-part='skipButton']:focus-visible {
+[data-tour-tooltip] [data-part='skipButton']:focus-visible {
 	outline: var(--dry-focus-ring);
 	outline-offset: 2px;
 }
 
-[data-tour-root] [data-part='prevButton'] {
+[data-tour-tooltip] [data-part='prevButton'] {
 	font-family: var(--dry-font-sans);
 	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 	color: var(--dry-color-text-strong);
@@ -131,16 +131,16 @@
 	transition: background var(--dry-duration-fast);
 }
 
-[data-tour-root] [data-part='prevButton']:hover {
+[data-tour-tooltip] [data-part='prevButton']:hover {
 	background: var(--dry-color-bg-raised);
 }
 
-[data-tour-root] [data-part='prevButton']:focus-visible {
+[data-tour-tooltip] [data-part='prevButton']:focus-visible {
 	outline: var(--dry-focus-ring);
 	outline-offset: 2px;
 }
 
-[data-tour-root] [data-part='nextButton'] {
+[data-tour-tooltip] [data-part='nextButton'] {
 	font-family: var(--dry-font-sans);
 	font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 	color: var(--dry-color-on-brand);
@@ -152,16 +152,16 @@
 	transition: opacity var(--dry-duration-fast);
 }
 
-[data-tour-root] [data-part='nextButton']:hover {
+[data-tour-tooltip] [data-part='nextButton']:hover {
 	opacity: 0.9;
 }
 
-[data-tour-root] [data-part='nextButton']:focus-visible {
+[data-tour-tooltip] [data-part='nextButton']:focus-visible {
 	outline: var(--dry-focus-ring);
 	outline-offset: 2px;
 }
 
-[data-tour-root] [data-part='tooltip']::before {
+[data-tour-tooltip]::before {
 	content: '';
 	position: absolute;
 	height: var(--dry-tour-arrow-size);
@@ -171,28 +171,28 @@
 	transform: translate(-50%, -50%) rotate(45deg);
 }
 
-[data-tour-root] [data-part='tooltip'][data-placement='bottom']::before {
+[data-tour-tooltip][data-placement='bottom']::before {
 	top: 0;
 	left: var(--dry-tour-tooltip-arrow-offset, 50%);
 	border-right: none;
 	border-bottom: none;
 }
 
-[data-tour-root] [data-part='tooltip'][data-placement='top']::before {
-	bottom: 0;
+[data-tour-tooltip][data-placement='top']::before {
+	top: 100%;
 	left: var(--dry-tour-tooltip-arrow-offset, 50%);
 	border-left: none;
 	border-top: none;
 }
 
-[data-tour-root] [data-part='tooltip'][data-placement='left']::before {
-	right: 0;
+[data-tour-tooltip][data-placement='left']::before {
+	left: 100%;
 	top: var(--dry-tour-tooltip-arrow-offset, 50%);
 	border-left: none;
 	border-bottom: none;
 }
 
-[data-tour-root] [data-part='tooltip'][data-placement='right']::before {
+[data-tour-tooltip][data-placement='right']::before {
 	left: 0;
 	top: var(--dry-tour-tooltip-arrow-offset, 50%);
 	border-right: none;
@@ -200,11 +200,11 @@
 }
 
 @container (max-width: 480px) {
-	[data-tour-root] [data-part='tooltip'] {
+	[data-tour-tooltip] {
 		grid-template-columns: minmax(0, min(16rem, calc(100vw - var(--dry-space-4))));
 	}
 
-	[data-tour-root] [data-part='tooltipFooter'] {
+	[data-tour-tooltip] [data-part='tooltipFooter'] {
 		grid-template-columns: 1fr;
 		align-items: stretch;
 	}

package/dist/tree/tree-item-label.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { getTreeCtx, getTreeItemCtx } from './context.svelte.js';
 
-	interface Props extends HTMLAttributes<HTMLDivElement> {
+	interface Props extends HTMLButtonAttributes {
 		children: Snippet;
 	}
 
@@ -13,9 +13,8 @@
 	const itemCtx = getTreeItemCtx();
 </script>
 
-<div
-	role="button"
-	tabindex={0}
+<button
+	type="button"
 	data-part="label"
 	data-tree-label
 	data-selected={ctx.isSelected(itemCtx.itemId) || undefined}
@@ -24,29 +23,24 @@
 		ctx.selectItem(itemCtx.itemId);
 		ctx.toggleItem(itemCtx.itemId);
 	}}
-	onkeydown={(e) => {
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			ctx.selectItem(itemCtx.itemId);
-			ctx.toggleItem(itemCtx.itemId);
-		}
-	}}
 	{...rest}
 >
 	{@render children()}
-</div>
+</button>
 
 <style>
 	[data-part='label'] {
+		appearance: none;
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
 		align-items: center;
 		gap: var(--dry-space-2);
 		padding: var(--dry-tree-item-padding, var(--dry-space-1) var(--dry-space-2));
-		border: none;
+		border: 0;
 		border-radius: var(--dry-tree-item-radius, var(--dry-radius-md));
 		background: none;
+		text-align: inherit;
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		font-family: var(--dry-font-sans);
 		color: var(--dry-color-text-strong);

package/dist/tree/tree-item-label.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
     children: Snippet;
 }
 declare const TreeItemLabel: import("svelte").Component<Props, {}, "">;

package/dist/typography/heading.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLHeadingElement> {
 		level?: 1 | 2 | 3 | 4 | 5 | 6;
@@ -12,27 +13,27 @@
 </script>
 
 {#if level === 1}
-	<h1 class={className} data-level={level} data-variant={variant} {...rest}>
+	<h1 class={className} {...variantAttrs({ level, variant })} {...rest}>
 		{@render children()}
 	</h1>
 {:else if level === 2}
-	<h2 class={className} data-level={level} data-variant={variant} {...rest}>
+	<h2 class={className} {...variantAttrs({ level, variant })} {...rest}>
 		{@render children()}
 	</h2>
 {:else if level === 3}
-	<h3 class={className} data-level={level} data-variant={variant} {...rest}>
+	<h3 class={className} {...variantAttrs({ level, variant })} {...rest}>
 		{@render children()}
 	</h3>
 {:else if level === 4}
-	<h4 class={className} data-level={level} data-variant={variant} {...rest}>
+	<h4 class={className} {...variantAttrs({ level, variant })} {...rest}>
 		{@render children()}
 	</h4>
 {:else if level === 5}
-	<h5 class={className} data-level={level} data-variant={variant} {...rest}>
+	<h5 class={className} {...variantAttrs({ level, variant })} {...rest}>
 		{@render children()}
 	</h5>
 {:else}
-	<h6 class={className} data-level={level} data-variant={variant} {...rest}>
+	<h6 class={className} {...variantAttrs({ level, variant })} {...rest}>
 		{@render children()}
 	</h6>
 {/if}

package/dist/typography/text.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLElement> {
 		as?: 'p' | 'span' | 'div';
@@ -24,15 +25,15 @@
 </script>
 
 {#if as === 'span'}
-	<span class={className} data-as={as} data-color={tone} data-size={size} {...rest}
+	<span class={className} {...variantAttrs({ as, color: tone, size })} {...rest}
 		>{@render children()}</span
 	>
 {:else if as === 'div'}
-	<div class={className} data-as={as} data-color={tone} data-size={size} {...rest}>
+	<div class={className} {...variantAttrs({ as, color: tone, size })} {...rest}>
 		{@render children()}
 	</div>
 {:else}
-	<p class={className} data-as={as} data-color={tone} data-size={size} {...rest}>
+	<p class={className} {...variantAttrs({ as, color: tone, size })} {...rest}>
 		{@render children()}
 	</p>
 {/if}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@dryui/ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
+  "description": "Zero-dependency styled Svelte 5 components with scoped styles and --dry-* CSS variable theming.",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -13,6 +14,9 @@
     "url": "https://github.com/rob-balfre/dryui/issues"
   },
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -775,7 +779,7 @@
     "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^1.2.0"
+    "@dryui/primitives": "^1.3.0"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"