@dryui/ui 0.2.2 → 0.4.0

package/dist/spotlight/spotlight.svelte

@@ -35,6 +35,9 @@
 	let y = $state('50%');
 	let active = $state(false);
 	let prefersReducedMotion = $state(false);
+	let pointerFrame = $state<number | null>(null);
+	let pendingX = '50%';
+	let pendingY = '50%';
 
 	function captureElement(node: HTMLDivElement) {
 		element = node;
@@ -46,6 +49,9 @@
 	}
 
 	function centerSpotlight() {
+		cancelQueuedPointerPosition();
+		pendingX = '50%';
+		pendingY = '50%';
 		x = '50%';
 		y = '50%';
 	}
@@ -57,8 +63,30 @@
 	function updateFromClientPoint(clientX: number, clientY: number) {
 		if (!element) return;
 		const rect = element.getBoundingClientRect();
-		x = `${clientX - rect.left}px`;
-		y = `${clientY - rect.top}px`;
+		queuePointerPosition(`${clientX - rect.left}px`, `${clientY - rect.top}px`);
+	}
+
+	function flushPointerPosition() {
+		pointerFrame = null;
+		x = pendingX;
+		y = pendingY;
+	}
+
+	function queuePointerPosition(nextX: string, nextY: string) {
+		pendingX = nextX;
+		pendingY = nextY;
+
+		if (pointerFrame !== null) return;
+
+		pointerFrame = requestAnimationFrame(() => {
+			flushPointerPosition();
+		});
+	}
+
+	function cancelQueuedPointerPosition() {
+		if (pointerFrame === null) return;
+		cancelAnimationFrame(pointerFrame);
+		pointerFrame = null;
 	}
 
 	function handlePointerEnter(event: PointerEvent) {
@@ -101,11 +129,16 @@
 			initialValue: '50%'
 		});
 
-		return observeReducedMotionPreference((matches) => {
+		const stopMotionObserver = observeReducedMotionPreference((matches) => {
 			prefersReducedMotion = matches;
 			active = matches || !followPointer;
 			centerSpotlight();
 		});
+
+		return () => {
+			cancelQueuedPointerPosition();
+			stopMotionObserver();
+		};
 	});
 
 	const radiusValue = $derived(`${Math.max(0, radius)}px`);
@@ -137,6 +170,7 @@
 
 <div
 	{@attach captureElement}
+	{@attach applyStyles}
 	class={className}
 	data-spotlight
 	data-active={active || undefined}
@@ -147,7 +181,6 @@
 	onpointerleave={handlePointerLeave}
 	onfocusin={handleFocusIn}
 	onfocusout={handleFocusOut}
-	use:applyStyles
 	{...rest}
 >
 	{@render children()}
@@ -221,6 +254,11 @@
 			transform var(--dry-duration-normal, 200ms) var(--dry-ease-out, ease),
 			--dry-spotlight-x 60ms ease-out,
 			--dry-spotlight-y 60ms ease-out;
+	}
+
+	[data-spotlight][data-active]::before,
+	[data-spotlight][data-static]::before,
+	[data-spotlight][data-follow-pointer]::before {
 		will-change: opacity, transform;
 	}
 

package/dist/spotlight/spotlight.svelte.d.ts

@@ -1,13 +1,14 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type SpotlightProps as PrimitiveSpotlightProps } from '@dryui/primitives/spotlight';
+import type { BlendMode } from '@dryui/primitives/spotlight';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	radius?: PrimitiveSpotlightProps['radius'];
-	intensity?: PrimitiveSpotlightProps['intensity'];
-	color?: PrimitiveSpotlightProps['color'];
-	followPointer?: PrimitiveSpotlightProps['followPointer'];
-	blendMode?: PrimitiveSpotlightProps['blendMode'];
-	children: PrimitiveSpotlightProps['children'];
+    radius?: number;
+    intensity?: number;
+    color?: string;
+    followPointer?: boolean;
+    blendMode?: BlendMode;
+    children: Snippet;
 }
-declare const Spotlight: import('svelte').Component<Props, {}, ''>;
+declare const Spotlight: import("svelte").Component<Props, {}, "">;
 type Spotlight = ReturnType<typeof Spotlight>;
 export default Spotlight;

package/dist/star-rating/star-rating-root.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	stars: number;
-	label?: string;
-	size?: 'sm' | 'md' | 'lg';
-	variant?: 'filled' | 'outlined';
+    stars: number;
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'filled' | 'outlined';
 }
-declare const StarRatingRoot: import('svelte').Component<Props, {}, ''>;
+declare const StarRatingRoot: import("svelte").Component<Props, {}, "">;
 type StarRatingRoot = ReturnType<typeof StarRatingRoot>;
 export default StarRatingRoot;

package/dist/stepper/index.d.ts

@@ -1,7 +1,7 @@
 export type { StepperRootProps, StepperListProps, StepperStepProps, StepperSeparatorProps } from '@dryui/primitives';
 import StepperRoot from './stepper-root.svelte';
 import StepperList from './stepper-list.svelte';
-import StepperStep from './stepper-step.svelte';
+import StepperStep from './stepper-step-button.svelte';
 import StepperSeparator from './stepper-separator.svelte';
 export declare const Stepper: {
     Root: typeof StepperRoot;

package/dist/stepper/index.js

@@ -1,6 +1,6 @@
 import StepperRoot from './stepper-root.svelte';
 import StepperList from './stepper-list.svelte';
-import StepperStep from './stepper-step.svelte';
+import StepperStep from './stepper-step-button.svelte';
 import StepperSeparator from './stepper-separator.svelte';
 export const Stepper = {
     Root: StepperRoot,

package/dist/stepper/stepper-list.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLOListElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const StepperList: import('svelte').Component<Props, {}, ''>;
+declare const StepperList: import("svelte").Component<Props, {}, "">;
 type StepperList = ReturnType<typeof StepperList>;
 export default StepperList;

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

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	activeStep?: number;
-	orientation?: 'horizontal' | 'vertical';
-	children: Snippet;
+    activeStep?: number;
+    orientation?: 'horizontal' | 'vertical';
+    children: Snippet;
 }
-declare const StepperRoot: import('svelte').Component<Props, {}, 'activeStep'>;
+declare const StepperRoot: import("svelte").Component<Props, {}, "activeStep">;
 type StepperRoot = ReturnType<typeof StepperRoot>;
 export default StepperRoot;

package/dist/stepper/stepper-separator.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	step: number;
+    step: number;
 }
-declare const StepperSeparator: import('svelte').Component<Props, {}, ''>;
+declare const StepperSeparator: import("svelte").Component<Props, {}, "">;
 type StepperSeparator = ReturnType<typeof StepperSeparator>;
 export default StepperSeparator;

package/dist/stepper/{stepper-step.svelte → stepper-step-button.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getStepperCtx } from './context.svelte.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'onclick'> {
@@ -44,14 +45,9 @@
 	{...rest}
 >
 	{#if clickable}
-		<button
-			type="button"
-			data-part="indicator-button"
-			onclick={handleClick}
-			aria-label="Go to step {step + 1}"
-		>
+		<Button variant="bare" type="button" aria-label="Go to step {step + 1}" onclick={handleClick}>
 			{@render children()}
-		</button>
+		</Button>
 	{:else}
 		{@render children()}
 	{/if}
@@ -114,25 +110,4 @@
 	[data-orientation='vertical'] {
 		padding: var(--dry-space-1) 0;
 	}
-
-	[data-part='step'] [data-part='indicator-button'] {
-		all: unset;
-		display: inline-grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: var(--dry-stepper-gap, var(--dry-space-2));
-		cursor: pointer;
-		border-radius: var(--dry-radius-sm, 0.25rem);
-	}
-
-	[data-part='step'] [data-part='indicator-button']:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-part='step'] [data-part='indicator-button']:disabled {
-		cursor: not-allowed;
-		color: var(--dry-color-text-disabled);
-	}
 </style>

package/dist/stepper/stepper-step-button.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'onclick'> {
+    step: number;
+    clickable?: boolean;
+    error?: boolean;
+    onclick?: (index: number) => void;
+    children: Snippet;
+}
+declare const StepperStepButton: import("svelte").Component<Props, {}, "">;
+type StepperStepButton = ReturnType<typeof StepperStepButton>;
+export default StepperStepButton;

package/dist/svg/svg.svelte.d.ts

@@ -1,11 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
 interface Props extends SVGAttributes<SVGSVGElement> {
-	children?: Snippet;
-	viewBox?: string;
-	'aria-label'?: string;
-	class?: string;
+    children?: Snippet;
+    viewBox?: string;
+    'aria-label'?: string;
 }
-declare const Svg: import('svelte').Component<Props, {}, ''>;
+declare const Svg: import("svelte").Component<Props, {}, "">;
 type Svg = ReturnType<typeof Svg>;
 export default Svg;

package/dist/table/table-body.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableSectionElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableBody: import('svelte').Component<Props, {}, ''>;
+declare const TableBody: import("svelte").Component<Props, {}, "">;
 type TableBody = ReturnType<typeof TableBody>;
 export default TableBody;

package/dist/table/table-caption.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableCaption: import('svelte').Component<Props, {}, ''>;
+declare const TableCaption: import("svelte").Component<Props, {}, "">;
 type TableCaption = ReturnType<typeof TableCaption>;
 export default TableCaption;

package/dist/table/table-cell.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableCellElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableCell: import('svelte').Component<Props, {}, ''>;
+declare const TableCell: import("svelte").Component<Props, {}, "">;
 type TableCell = ReturnType<typeof TableCell>;
 export default TableCell;

package/dist/table/table-footer.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableSectionElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableFooter: import('svelte').Component<Props, {}, ''>;
+declare const TableFooter: import("svelte").Component<Props, {}, "">;
 type TableFooter = ReturnType<typeof TableFooter>;
 export default TableFooter;

package/dist/table/table-head.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableCellElement> {
-	scope?: 'col' | 'row';
-	children: Snippet;
+    scope?: 'col' | 'row';
+    children: Snippet;
 }
-declare const TableHead: import('svelte').Component<Props, {}, ''>;
+declare const TableHead: import("svelte").Component<Props, {}, "">;
 type TableHead = ReturnType<typeof TableHead>;
 export default TableHead;

package/dist/table/table-header.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableSectionElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableHeader: import('svelte').Component<Props, {}, ''>;
+declare const TableHeader: import("svelte").Component<Props, {}, "">;
 type TableHeader = ReturnType<typeof TableHeader>;
 export default TableHeader;

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

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableRoot: import('svelte').Component<Props, {}, ''>;
+declare const TableRoot: import("svelte").Component<Props, {}, "">;
 type TableRoot = ReturnType<typeof TableRoot>;
 export default TableRoot;

package/dist/table/table-row.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTableRowElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TableRow: import('svelte').Component<Props, {}, ''>;
+declare const TableRow: import("svelte").Component<Props, {}, "">;
 type TableRow = ReturnType<typeof TableRow>;
 export default TableRow;

package/dist/table-of-contents/table-of-contents-item.svelte

@@ -38,11 +38,14 @@
 		display: block;
 		padding: var(--dry-toc-item-padding-y, var(--dry-space-1_5))
 			var(--dry-toc-item-padding-x, var(--dry-space-2));
+		border-inline-start: 2px solid transparent;
 		border-radius: var(--dry-radius-md);
+		box-sizing: border-box;
 		color: inherit;
 		text-decoration: none;
 		transition:
 			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
 			color var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
@@ -56,8 +59,10 @@
 
 	[data-part='item'][data-active] > a {
 		background: var(--dry-color-fill-brand-weak);
+		border-end-start-radius: 0;
+		border-inline-start-color: var(--dry-color-stroke-selected);
+		border-start-start-radius: 0;
 		color: var(--dry-toc-active-color, var(--dry-color-text-brand));
-		box-shadow: inset 2px 0 0 var(--dry-color-stroke-selected);
 		font-weight: 600;
 	}
 

package/dist/table-of-contents/table-of-contents-item.svelte.d.ts

@@ -1,14 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type TocHeading } from '@dryui/primitives';
-type ItemSnippetProps = {
-	heading: TocHeading;
-	active: boolean;
-};
+import { type TocHeading } from './context.svelte.js';
 interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
-	heading: TocHeading;
-	children?: Snippet<[ItemSnippetProps]>;
+    heading: TocHeading;
+    children?: Snippet<[{
+        heading: TocHeading;
+        active: boolean;
+    }]>;
 }
-declare const TableOfContentsItem: import('svelte').Component<Props, {}, ''>;
+declare const TableOfContentsItem: import("svelte").Component<Props, {}, "">;
 type TableOfContentsItem = ReturnType<typeof TableOfContentsItem>;
 export default TableOfContentsItem;

package/dist/table-of-contents/table-of-contents-list.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <ol data-part="list" class={className} {...rest}>
-	{#each ctx.headings as heading}
+	{#each ctx.headings as heading (heading.id)}
 		<li
 			data-part="item"
 			data-level={heading.level}
@@ -39,11 +39,14 @@
 		display: block;
 		padding: var(--dry-toc-item-padding-y, var(--dry-space-1_5))
 			var(--dry-toc-item-padding-x, var(--dry-space-2));
+		border-inline-start: 2px solid transparent;
 		border-radius: var(--dry-radius-md);
+		box-sizing: border-box;
 		color: inherit;
 		text-decoration: none;
 		transition:
 			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
 			color var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
@@ -57,8 +60,10 @@
 
 	[data-part='item'][data-active] > a {
 		background: var(--dry-color-fill-brand-weak);
+		border-end-start-radius: 0;
+		border-inline-start-color: var(--dry-color-stroke-selected);
+		border-start-start-radius: 0;
 		color: var(--dry-toc-active-color, var(--dry-color-text-brand));
-		box-shadow: inset 2px 0 0 var(--dry-color-stroke-selected);
 		font-weight: 600;
 	}
 

package/dist/table-of-contents/table-of-contents-list.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLOListElement> {}
-declare const TableOfContentsList: import('svelte').Component<Props, {}, ''>;
+interface Props extends HTMLAttributes<HTMLOListElement> {
+}
+declare const TableOfContentsList: import("svelte").Component<Props, {}, "">;
 type TableOfContentsList = ReturnType<typeof TableOfContentsList>;
 export default TableOfContentsList;

package/dist/table-of-contents/table-of-contents-root.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLElement> {
-	selector?: string;
-	headingSelector?: string;
-	rootMargin?: string;
-	autoId?: boolean;
-	children: Snippet;
+    selector?: string;
+    headingSelector?: string;
+    rootMargin?: string;
+    autoId?: boolean;
+    children: Snippet;
 }
-declare const TableOfContentsRoot: import('svelte').Component<Props, {}, ''>;
+declare const TableOfContentsRoot: import("svelte").Component<Props, {}, "">;
 type TableOfContentsRoot = ReturnType<typeof TableOfContentsRoot>;
 export default TableOfContentsRoot;

package/dist/tabs/index.d.ts

@@ -22,7 +22,7 @@ export interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
 }
 import TabsRoot from './tabs-root.svelte';
 import TabsList from './tabs-list.svelte';
-import TabsTrigger from './tabs-trigger.svelte';
+import TabsTrigger from './tabs-trigger-button.svelte';
 import TabsContent from './tabs-content.svelte';
 export declare const Tabs: {
     Root: typeof TabsRoot;

package/dist/tabs/index.js

@@ -1,6 +1,6 @@
 import TabsRoot from './tabs-root.svelte';
 import TabsList from './tabs-list.svelte';
-import TabsTrigger from './tabs-trigger.svelte';
+import TabsTrigger from './tabs-trigger-button.svelte';
 import TabsContent from './tabs-content.svelte';
 export const Tabs = {
     Root: TabsRoot,

package/dist/tabs/tabs-content.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	value: string;
-	children: Snippet;
+    value: string;
+    children: Snippet;
 }
-declare const TabsContent: import('svelte').Component<Props, {}, ''>;
+declare const TabsContent: import("svelte").Component<Props, {}, "">;
 type TabsContent = ReturnType<typeof TabsContent>;
 export default TabsContent;

package/dist/tabs/tabs-list.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TabsList: import('svelte').Component<Props, {}, ''>;
+declare const TabsList: import("svelte").Component<Props, {}, "">;
 type TabsList = ReturnType<typeof TabsList>;
 export default TabsList;

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

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	value?: string;
-	orientation?: 'horizontal' | 'vertical';
-	activationMode?: 'automatic' | 'manual';
-	children: Snippet;
+    value?: string;
+    orientation?: 'horizontal' | 'vertical';
+    activationMode?: 'automatic' | 'manual';
+    children: Snippet;
 }
-declare const TabsRoot: import('svelte').Component<Props, {}, 'value'>;
+declare const TabsRoot: import("svelte").Component<Props, {}, "value">;
 type TabsRoot = ReturnType<typeof TabsRoot>;
 export default TabsRoot;

package/dist/tabs/tabs-trigger-button.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getTabsCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		value: string;
+		disabled?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		children: Snippet;
+	}
+
+	let { value, disabled = false, size = 'md', children, ...rest }: Props = $props();
+
+	const ctx = getTabsCtx();
+
+	const isSelected = $derived(ctx.value === value);
+</script>
+
+<Button
+	variant="tab"
+	type="button"
+	{size}
+	role="tab"
+	aria-selected={isSelected}
+	aria-controls="{ctx.id}-panel-{value}"
+	id="{ctx.id}-tab-{value}"
+	tabindex={isSelected ? 0 : -1}
+	data-state={isSelected ? 'active' : 'inactive'}
+	{disabled}
+	{...rest}
+	onclick={() => {
+		if (!disabled) ctx.select(value);
+	}}
+	onfocus={() => {
+		if (ctx.activationMode === 'automatic' && !disabled) ctx.select(value);
+	}}
+>
+	{@render children()}
+</Button>

package/dist/tabs/tabs-trigger-button.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    value: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
+}
+declare const TabsTriggerButton: import("svelte").Component<Props, {}, "">;
+type TabsTriggerButton = ReturnType<typeof TabsTriggerButton>;
+export default TabsTriggerButton;

package/dist/tag/index.d.ts

@@ -6,4 +6,4 @@ export interface TagProps extends PrimitiveTagProps {
     color?: TagColor;
     size?: 'sm' | 'md';
 }
-export { default as Tag } from './tag.svelte';
+export { default as Tag } from './tag-button.svelte';

package/dist/tag/index.js

@@ -1 +1 @@
-export { default as Tag } from './tag.svelte';
+export { default as Tag } from './tag-button.svelte';