@dryui/ui 1.8.0 → 2.0.0

package/dist/button/button.svelte

@@ -35,6 +35,13 @@
 		download?: boolean | string;
 		/** Back-compat alias for `class` — matches Heading/Text ergonomics. Prefer `class`. */
 		className?: HTMLButtonAttributes['class'];
+		/**
+		 * Optical compensation for leading/trailing icons. When `'auto'` (default),
+		 * the button trims its inline padding on the icon side by
+		 * `--dry-optical-icon-offset` so the label reads visually centered against
+		 * the icon. Set to `'off'` to disable the nudge.
+		 */
+		optical?: 'auto' | 'off';
 		/** Callback invoked with the rendered `<button>` or `<a>` element on mount, `null` on destroy. */
 		ref?: (el: HTMLButtonElement | HTMLAnchorElement | null) => void;
 		children: Snippet;
@@ -58,6 +65,7 @@
 		onclick,
 		class: classAttr,
 		className = classAttr,
+		optical = 'auto',
 		ref,
 		children,
 		...rest
@@ -73,9 +81,33 @@
 		(onclick as ((event: MouseEvent) => void) | undefined)?.(event);
 	}
 
-	function attachRef(node: HTMLButtonElement | HTMLAnchorElement) {
+	function syncIconEdgeAttrs(node: HTMLButtonElement | HTMLAnchorElement) {
+		const children = Array.from(node.children).filter(
+			(child): child is HTMLElement => child instanceof HTMLElement
+		);
+		const firstChild = children[0];
+		const lastChild = children[children.length - 1];
+
+		node.toggleAttribute('data-icon-start', firstChild?.hasAttribute('data-dry-icon') === true);
+		node.toggleAttribute('data-icon-end', lastChild?.hasAttribute('data-dry-icon') === true);
+	}
+
+	function attachButton(node: HTMLButtonElement | HTMLAnchorElement) {
 		ref?.(node);
-		return () => ref?.(null);
+		syncIconEdgeAttrs(node);
+
+		const observer = new MutationObserver(() => syncIconEdgeAttrs(node));
+		observer.observe(node, {
+			attributeFilter: ['data-dry-icon'],
+			attributes: true,
+			childList: true,
+			subtree: true
+		});
+
+		return () => {
+			observer.disconnect();
+			ref?.(null);
+		};
 	}
 </script>
 
@@ -89,11 +121,15 @@
 			{download}
 			aria-disabled={disabled || undefined}
 			data-disabled={disabled || undefined}
+			data-optical={optical}
+			data-dry-button
+			data-icon-start={undefined}
+			data-icon-end={undefined}
 			tabindex={disabled ? -1 : undefined}
 			{...variantAttrs({ variant, size, color })}
 			class={className}
 			onclick={handleLinkClick}
-			{@attach attachRef}
+			{@attach attachButton}
 		>
 			{@render children()}
 		</a>
@@ -102,11 +138,15 @@
 			{type}
 			{disabled}
 			data-disabled={disabled || undefined}
+			data-optical={optical}
+			data-dry-button
+			data-icon-start={undefined}
+			data-icon-end={undefined}
 			{...variantAttrs({ variant, size, color })}
 			class={className}
 			{onclick}
 			{...rest}
-			{@attach attachRef}
+			{@attach attachButton}
 		>
 			{@render children()}
 		</button>
@@ -126,8 +166,7 @@
 		display: inline-grid;
 	}
 
-	a,
-	button {
+	[data-dry-button] {
 		/* Resolve public button tokens without stomping inherited overrides. */
 		--_dry-btn-accent: var(--dry-btn-accent, var(--dry-color-fill-brand));
 		--_dry-btn-accent-fg: var(--dry-btn-accent-fg, var(--dry-color-text-brand));
@@ -209,9 +248,25 @@
 		}
 	}
 
+	/* ── Optical icon offset ───────────────────────────────────────────────────
+	   When a button has a leading or trailing child marked with
+	   `[data-dry-icon]`, trim the padding on that side by
+	   `--dry-optical-icon-offset` so the label reads visually centered against
+	   the icon. Consumers set `data-optical="off"` (via the `optical` prop)
+	   to disable the nudge. Data-attribute selectors pierce Svelte style
+	   scoping without needing `:global()`, which is banned by
+	   `dryui/no-global`. */
+	[data-dry-button][data-optical='auto'][data-icon-start] {
+		padding-inline-start: calc(var(--_dry-btn-padding-x) - var(--dry-optical-icon-offset));
+	}
+
+	[data-dry-button][data-optical='auto'][data-icon-end] {
+		padding-inline-end: calc(var(--_dry-btn-padding-x) - var(--dry-optical-icon-offset));
+	}
+
 	/* ── Variants ──────────────────────────────────────────────────────────────── */
 
-	:is(a, button)[data-variant='solid'] {
+	[data-dry-button][data-variant='solid'] {
 		--_dry-btn-bg: var(--dry-btn-bg, var(--_dry-btn-accent));
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-on-accent));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -226,7 +281,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='outline'] {
+	[data-dry-button][data-variant='outline'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-accent-fg));
 		--_dry-btn-border: var(--dry-btn-border, var(--_dry-btn-accent-stroke));
@@ -246,7 +301,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='ghost'] {
+	[data-dry-button][data-variant='ghost'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-accent-fg));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -268,7 +323,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='soft'] {
+	[data-dry-button][data-variant='soft'] {
 		--_dry-btn-bg: var(--dry-btn-bg, var(--_dry-btn-accent-weak));
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-accent-fg));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -285,7 +340,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='secondary'] {
+	[data-dry-button][data-variant='secondary'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-accent-fg));
 		--_dry-btn-border: var(--dry-btn-border, var(--_dry-btn-accent-stroke));
@@ -304,7 +359,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='bare'] {
+	[data-dry-button][data-variant='bare'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, inherit);
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -320,7 +375,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='link'] {
+	[data-dry-button][data-variant='link'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-accent-fg));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -340,7 +395,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='trigger'] {
+	[data-dry-button][data-variant='trigger'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-strong));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -363,7 +418,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='nav'] {
+	[data-dry-button][data-variant='nav'] {
 		--_dry-btn-bg: var(--dry-btn-bg, var(--dry-color-bg-raised));
 		--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-strong));
 		--_dry-btn-border: var(--dry-btn-border, var(--dry-color-stroke-weak));
@@ -381,7 +436,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='tab'] {
+	[data-dry-button][data-variant='tab'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-weak));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -403,7 +458,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='toggle'] {
+	[data-dry-button][data-variant='toggle'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-weak));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -420,7 +475,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='pill'] {
+	[data-dry-button][data-variant='pill'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-weak));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -437,7 +492,7 @@
 		}
 	}
 
-	:is(a, button)[data-color='primary'] {
+	[data-dry-button][data-color='primary'] {
 		--_dry-btn-accent: var(--dry-btn-accent, var(--dry-color-fill-brand));
 		--_dry-btn-accent-fg: var(--dry-btn-accent-fg, var(--dry-color-text-brand));
 		--_dry-btn-accent-stroke: var(--dry-btn-accent-stroke, var(--dry-color-stroke-brand));
@@ -446,7 +501,7 @@
 		--_dry-btn-accent-active: var(--dry-btn-accent-active, var(--dry-color-fill-brand-active));
 	}
 
-	:is(a, button)[data-color='danger'] {
+	[data-dry-button][data-color='danger'] {
 		--_dry-btn-accent: var(--dry-btn-accent, var(--dry-color-fill-error));
 		--_dry-btn-accent-fg: var(--dry-btn-accent-fg, var(--dry-color-text-error));
 		--_dry-btn-accent-stroke: var(--dry-btn-accent-stroke, var(--dry-color-stroke-error));
@@ -461,7 +516,7 @@
 	   light theme → near-black bg + white text; dark theme → white bg + near-black
 	   text. Any consumer token override (--dry-btn-bg etc.) still wins because the
 	   variant styles read from the public layer first. */
-	:is(a, button)[data-color='ink'] {
+	[data-dry-button][data-color='ink'] {
 		--_dry-btn-accent: var(--dry-btn-accent, var(--dry-color-bg-inverse));
 		--_dry-btn-accent-fg: var(--dry-btn-accent-fg, var(--dry-color-text-inverse));
 		--_dry-btn-accent-stroke: var(--dry-btn-accent-stroke, var(--dry-color-stroke-strong));
@@ -482,7 +537,7 @@
 
 	/* ── Sizes ─────────────────────────────────────────────────────────────────── */
 
-	:is(a, button)[data-size='sm'] {
+	[data-dry-button][data-size='sm'] {
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, var(--dry-space-3));
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, var(--dry-space-1_5));
 		--_dry-btn-font-size: var(
@@ -493,7 +548,7 @@
 		min-height: var(--dry-btn-min-height, var(--dry-space-8));
 	}
 
-	:is(a, button)[data-size='md'] {
+	[data-dry-button][data-size='md'] {
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, var(--dry-space-4));
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, var(--dry-space-2_5));
 		--_dry-btn-font-size: var(
@@ -504,7 +559,7 @@
 		min-height: var(--dry-btn-min-height, var(--dry-space-12));
 	}
 
-	:is(a, button)[data-size='lg'] {
+	[data-dry-button][data-size='lg'] {
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, var(--dry-space-6));
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, var(--dry-space-3));
 		--_dry-btn-font-size: var(
@@ -517,7 +572,7 @@
 
 	/* ── Icon-only sizes (square aspect ratio) ────────────────────────────── */
 
-	:is(a, button)[data-size='icon'] {
+	[data-dry-button][data-size='icon'] {
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, 0);
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, 0);
 		aspect-ratio: 1;
@@ -525,7 +580,7 @@
 		--_dry-btn-radius: var(--dry-btn-radius, var(--dry-radius-md));
 	}
 
-	:is(a, button)[data-size='icon-sm'] {
+	[data-dry-button][data-size='icon-sm'] {
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, 0);
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, 0);
 		aspect-ratio: 1;
@@ -537,7 +592,7 @@
 		);
 	}
 
-	:is(a, button)[data-size='icon-lg'] {
+	[data-dry-button][data-size='icon-lg'] {
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, 0);
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, 0);
 		aspect-ratio: 1;
@@ -551,47 +606,47 @@
 
 	/* ── Button-group integration ─────────────────────────────────────── */
 
-	.wrapper[data-in-group] :is(a, button) {
+	.wrapper[data-in-group] [data-dry-button] {
 		border-radius: 0;
 	}
 
 	/* Horizontal: first child gets left radii */
-	.wrapper[data-in-group][data-group-orientation='horizontal']:first-child :is(a, button) {
+	.wrapper[data-in-group][data-group-orientation='horizontal']:first-child [data-dry-button] {
 		border-top-left-radius: var(--dry-button-group-radius);
 		border-bottom-left-radius: var(--dry-button-group-radius);
 	}
 
 	/* Horizontal: last child gets right radii */
-	.wrapper[data-in-group][data-group-orientation='horizontal']:last-child :is(a, button) {
+	.wrapper[data-in-group][data-group-orientation='horizontal']:last-child [data-dry-button] {
 		border-top-right-radius: var(--dry-button-group-radius);
 		border-bottom-right-radius: var(--dry-button-group-radius);
 	}
 
 	/* Horizontal: non-first child removes inline-start border */
-	.wrapper[data-in-group][data-group-orientation='horizontal']:not(:first-child) :is(a, button) {
+	.wrapper[data-in-group][data-group-orientation='horizontal']:not(:first-child) [data-dry-button] {
 		border-inline-start: 0;
 	}
 
 	/* Vertical: first child gets top radii */
-	.wrapper[data-in-group][data-group-orientation='vertical']:first-child :is(a, button) {
+	.wrapper[data-in-group][data-group-orientation='vertical']:first-child [data-dry-button] {
 		border-top-left-radius: var(--dry-button-group-radius);
 		border-top-right-radius: var(--dry-button-group-radius);
 	}
 
 	/* Vertical: last child gets bottom radii */
-	.wrapper[data-in-group][data-group-orientation='vertical']:last-child :is(a, button) {
+	.wrapper[data-in-group][data-group-orientation='vertical']:last-child [data-dry-button] {
 		border-bottom-left-radius: var(--dry-button-group-radius);
 		border-bottom-right-radius: var(--dry-button-group-radius);
 	}
 
 	/* Vertical: non-first child removes block-start border */
-	.wrapper[data-in-group][data-group-orientation='vertical']:not(:first-child) :is(a, button) {
+	.wrapper[data-in-group][data-group-orientation='vertical']:not(:first-child) [data-dry-button] {
 		border-block-start: 0;
 	}
 
 	/* Hover/focus z-index for grouped buttons */
-	.wrapper[data-in-group]:hover :is(a, button),
-	.wrapper[data-in-group]:focus-within :is(a, button) {
+	.wrapper[data-in-group]:hover [data-dry-button],
+	.wrapper[data-in-group]:focus-within [data-dry-button] {
 		z-index: var(--dry-button-group-hover-z-index);
 		position: relative;
 	}

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

@@ -10,6 +10,13 @@ interface Props extends Omit<HTMLButtonAttributes, 'color'> {
     download?: boolean | string;
     /** Back-compat alias for `class` — matches Heading/Text ergonomics. Prefer `class`. */
     className?: HTMLButtonAttributes['class'];
+    /**
+     * Optical compensation for leading/trailing icons. When `'auto'` (default),
+     * the button trims its inline padding on the icon side by
+     * `--dry-optical-icon-offset` so the label reads visually centered against
+     * the icon. Set to `'off'` to disable the nudge.
+     */
+    optical?: 'auto' | 'off';
     /** Callback invoked with the rendered `<button>` or `<a>` element on mount, `null` on destroy. */
     ref?: (el: HTMLButtonElement | HTMLAnchorElement | null) => void;
     children: Snippet;

package/dist/button-group/button-group.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/button-group/button-group.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ButtonGroup',
+    description: 'Groups related buttons with shared styling',
+    category: 'action',
+    tags: ['button', 'group', 'toolbar', 'actions']
+};

package/dist/calendar/calendar.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/calendar/calendar.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Calendar',
+    description: 'Interactive calendar grid for date navigation',
+    category: 'form',
+    tags: ['date', 'calendar', 'picker', 'month', 'locale']
+};

package/dist/card/card-content.svelte

@@ -16,7 +16,7 @@
 
 <style>
 	[data-card-content] {
-		padding: var(--dry-card-padding, var(--dry-space-8));
+		padding: var(--dry-card-padding, var(--dry-padding-card));
 		overflow-x: auto;
 	}
 

package/dist/card/card-footer.svelte

@@ -15,7 +15,7 @@
 
 <style>
 	[data-card-footer] {
-		padding: var(--dry-card-padding, var(--dry-space-8));
+		padding: var(--dry-card-padding, var(--dry-padding-card));
 		border-top: 1px solid var(--dry-card-border, var(--dry-color-stroke-weak));
 	}
 

package/dist/card/card-header.svelte

@@ -15,7 +15,7 @@
 
 <style>
 	[data-card-header] {
-		padding: var(--dry-card-padding, var(--dry-space-8));
+		padding: var(--dry-card-padding, var(--dry-padding-card));
 		border-bottom: 1px solid var(--dry-card-border, var(--dry-color-stroke-weak));
 	}
 

package/dist/card/card-root.svelte

@@ -10,6 +10,7 @@
 		orientation?: 'vertical' | 'horizontal';
 		variant?: 'default' | 'elevated' | 'interactive';
 		size?: 'default' | 'sm';
+		bordered?: boolean;
 		children: Snippet;
 	}
 
@@ -20,6 +21,7 @@
 		orientation,
 		variant = 'default',
 		size = 'default',
+		bordered = false,
 		class: className,
 		children,
 		...rest
@@ -32,6 +34,7 @@
 		data-card
 		data-selected={selected ? '' : undefined}
 		data-orientation={orientation}
+		data-bordered={bordered ? '' : undefined}
 		{...variantAttrs({
 			variant: variant !== 'default' ? variant : undefined,
 			size: size !== 'default' ? size : undefined
@@ -50,6 +53,7 @@
 		data-card
 		data-selected={selected ? '' : undefined}
 		data-orientation={orientation}
+		data-bordered={bordered ? '' : undefined}
 		{...variantAttrs({
 			variant: variant !== 'default' ? variant : undefined,
 			size: size !== 'default' ? size : undefined
@@ -63,22 +67,27 @@
 {/if}
 
 <style>
+	/* outer: var(--dry-radius-card); children inside the padded region use var(--dry-radius-nested-card). */
+
 	[data-card] {
-		--dry-card-radius: var(--dry-radius-2xl);
-		--dry-radius-nested: max(
-			var(--dry-radius-sm),
-			calc(var(--dry-card-radius) - var(--dry-card-padding, var(--dry-space-8)))
-		);
-		--dry-btn-radius: var(--dry-radius-nested);
+		--dry-card-radius: var(--dry-radius-card);
+		--dry-card-padding: var(--dry-padding-card);
+		--dry-btn-radius: var(--dry-radius-nested-card);
 
 		container-type: inline-size;
 		display: grid;
 		background: var(--dry-card-bg, var(--dry-surface-bg, var(--dry-color-bg-raised)));
+		border-radius: var(--dry-card-radius, var(--dry-surface-radius, var(--dry-radius-card)));
+		box-shadow: var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-sm)));
+		overflow: hidden;
+		transition: box-shadow var(--dry-duration-fast) var(--dry-ease-out);
+	}
+
+	/* ── Bordered escape hatch (retain the 1px border look) ────────────────── */
+
+	[data-card][data-bordered] {
 		border: 1px solid
 			var(--dry-card-border, var(--dry-surface-border, var(--dry-color-stroke-weak)));
-		border-radius: var(--dry-card-radius, var(--dry-surface-radius, var(--dry-radius-2xl)));
-		box-shadow: var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-raised)));
-		overflow: hidden;
 	}
 
 	/* ── Selected state ────────────────────────────────────────────────────── */
@@ -93,7 +102,7 @@
 		outline-offset: -2px;
 		box-shadow:
 			inset 0 0 0 1px var(--dry-card-selected-ring-color),
-			var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-raised)));
+			var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-sm)));
 	}
 
 	/* ── Clickable card (button) ───────────────────────────────────────────── */
@@ -107,13 +116,12 @@
 		text-align: inherit;
 		cursor: pointer;
 		transition:
-			box-shadow var(--dry-duration-normal, 200ms) ease,
+			box-shadow var(--dry-duration-fast) var(--dry-ease-out),
 			transform var(--dry-duration-fast, 100ms) ease;
 	}
 
 	button[data-card]:hover {
-		box-shadow: var(--dry-shadow-md, 0 4px 6px -1px rgb(15 23 42 / 0.1));
-		border-color: var(--dry-color-stroke-strong);
+		box-shadow: var(--dry-shadow-sm-hover);
 	}
 
 	button[data-card]:active {
@@ -135,11 +143,10 @@
 		grid-auto-flow: column;
 	}
 
-	/* ── Variant: elevated (shadow-only separation, no border) ─────────────── */
+	/* ── Variant: elevated (shadow-only separation, stronger shadow) ───────── */
 
 	[data-card][data-variant='elevated'] {
 		--dry-card-bg: var(--dry-color-bg-overlay);
-		border-color: transparent;
 		--dry-card-shadow: var(--dry-shadow-md);
 	}
 
@@ -148,13 +155,16 @@
 	[data-card][data-variant='interactive'] {
 		cursor: pointer;
 		transition:
-			box-shadow var(--dry-duration-normal) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-out),
 			transform var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
 	[data-card][data-variant='interactive']:hover {
-		box-shadow: var(--dry-shadow-md);
-		border-color: var(--dry-color-stroke-strong);
+		box-shadow: var(--dry-shadow-sm-hover);
+	}
+
+	[data-card][data-variant='elevated']:hover {
+		box-shadow: var(--dry-shadow-md-hover);
 	}
 
 	[data-card][data-variant='interactive']:active {

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

@@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<HTMLElement> {
     orientation?: 'vertical' | 'horizontal';
     variant?: 'default' | 'elevated' | 'interactive';
     size?: 'default' | 'sm';
+    bordered?: boolean;
     children: Snippet;
 }
 declare const CardRoot: import("svelte").Component<Props, {}, "">;

package/dist/card/card.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/card/card.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Card',
+    description: 'Contained content surface with header/content/footer sections',
+    category: 'display',
+    tags: ['surface', 'container', 'content', 'panel']
+};

package/dist/carousel/carousel.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/carousel/carousel.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Carousel',
+    description: 'Scrollable content carousel with slide navigation',
+    category: 'display',
+    tags: ['slider', 'carousel', 'scroll', 'gallery', 'slideshow']
+};

package/dist/chart/chart.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/chart/chart.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Chart',
+    description: 'SVG-based chart with bars, lines, and axes',
+    category: 'display',
+    tags: ['chart', 'graph', 'bar', 'line', 'data', 'visualization']
+};

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

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/chat-thread/chat-thread.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ChatThread',
+    description: 'Conversation thread container with restart action and auto-scroll behavior',
+    category: 'display',
+    tags: ['chat', 'thread', 'conversation', 'log']
+};

package/dist/checkbox/checkbox.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/checkbox/checkbox.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Checkbox',
+    description: 'Boolean toggle input with indeterminate state',
+    category: 'input',
+    tags: ['form', 'toggle', 'boolean', 'check']
+};