@dryui/ui 1.7.4 → 1.9.0

package/dist/stepper/stepper.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Stepper',
+    description: 'Step-by-step progress indicator',
+    category: 'navigation',
+    tags: ['steps', 'wizard', 'progress', 'workflow', 'multi-step', 'form']
+};

package/dist/svg/svg.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/svg/svg.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Svg',
+    description: 'Accessible SVG wrapper with viewBox and aria-label defaults',
+    category: 'utility',
+    tags: ['svg', 'icon', 'graphic', 'accessible', 'vector']
+};

package/dist/table/table.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/table/table.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Table',
+    description: 'Data table with header, body, footer sections',
+    category: 'display',
+    tags: ['data', 'table', 'grid', 'rows', 'columns']
+};

package/dist/table-of-contents/table-of-contents.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/table-of-contents/table-of-contents.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'TableOfContents',
+    description: 'Auto-generated table of contents from headings',
+    category: 'navigation',
+    tags: ['toc', 'navigation', 'headings', 'scroll-spy']
+};

package/dist/tabs/tabs.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/tabs/tabs.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Tabs',
+    description: 'Tabbed content navigation',
+    category: 'navigation',
+    tags: ['tabs', 'nav', 'switch', 'panel']
+};

package/dist/tag/tag.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/tag/tag.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Tag',
+    description: 'Small labeled tag element with color and variant support',
+    category: 'display',
+    tags: ['tag', 'label', 'chip', 'badge', 'category', 'status']
+};

package/dist/tags-input/tags-input.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/tags-input/tags-input.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'TagsInput',
+    description: 'Input for managing a list of tags',
+    category: 'input',
+    tags: ['form', 'tags', 'chips', 'multi', 'input']
+};

package/dist/text/index.d.ts

@@ -7,6 +7,12 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
     font?: 'sans' | 'mono';
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     variant?: 'default' | 'label';
+    /**
+     * Caps the rendered inline size in ch units so body copy wraps on ergonomic
+     * measure. `false` (default) keeps the existing behaviour of no cap.
+     * `narrow` ≈ 48ch, `default` ≈ 65ch, `wide` ≈ 80ch.
+     */
+    maxMeasure?: 'narrow' | 'default' | 'wide' | false;
     className?: HTMLAttributes<HTMLElement>['class'];
     children: Snippet;
 }

package/dist/text/text.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/text/text.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Text',
+    description: 'Standalone body copy export for starter-kit typography',
+    category: 'display',
+    tags: ['text', 'copy', 'paragraph', 'typography']
+};

package/dist/text/text.svelte

@@ -10,6 +10,7 @@
 		font?: 'sans' | 'mono';
 		weight?: 'normal' | 'medium' | 'semibold' | 'bold';
 		variant?: 'default' | 'label';
+		maxMeasure?: 'narrow' | 'default' | 'wide' | false;
 		className?: HTMLAttributes<HTMLElement>['class'];
 		children: Snippet;
 	}
@@ -21,23 +22,28 @@
 		font = 'sans',
 		weight,
 		variant = 'default',
+		maxMeasure = false,
 		class: classAttr,
 		className = classAttr,
 		children,
 		...rest
 	}: Props = $props();
+
+	let measure: 'narrow' | 'default' | 'wide' | undefined = $derived(
+		maxMeasure === false ? undefined : maxMeasure
+	);
 </script>
 
 {#if as === 'span'}
 	<span
 		class={className}
-		{...variantAttrs({ color, size, font, weight: weight || undefined, variant })}
+		{...variantAttrs({ color, size, font, weight: weight || undefined, variant, measure })}
 		{...rest}>{@render children()}</span
 	>
 {:else if as === 'div'}
 	<div
 		class={className}
-		{...variantAttrs({ color, size, font, weight: weight || undefined, variant })}
+		{...variantAttrs({ color, size, font, weight: weight || undefined, variant, measure })}
 		{...rest}
 	>
 		{@render children()}
@@ -45,7 +51,7 @@
 {:else}
 	<p
 		class={className}
-		{...variantAttrs({ color, size, font, weight: weight || undefined, variant })}
+		{...variantAttrs({ color, size, font, weight: weight || undefined, variant, measure })}
 		{...rest}
 	>
 		{@render children()}
@@ -132,4 +138,19 @@
 		letter-spacing: 0.05em;
 		font-weight: 600;
 	}
+
+	/* ── Measure (max-inline-size) ─────────────────────────────────────────────
+	   Body copy gets wider presets than Heading so paragraphs read well
+	   without feeling cramped. */
+	[data-measure='narrow'] {
+		max-inline-size: 48ch;
+	}
+
+	[data-measure='default'] {
+		max-inline-size: 65ch;
+	}
+
+	[data-measure='wide'] {
+		max-inline-size: 80ch;
+	}
 </style>

package/dist/text/text.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<HTMLElement> {
     font?: 'sans' | 'mono';
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     variant?: 'default' | 'label';
+    maxMeasure?: 'narrow' | 'default' | 'wide' | false;
     className?: HTMLAttributes<HTMLElement>['class'];
     children: Snippet;
 }

package/dist/textarea/textarea.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/textarea/textarea.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Textarea',
+    description: 'Multi-line text input',
+    category: 'input',
+    tags: ['form', 'text', 'multiline', 'textarea']
+};

package/dist/theme-toggle/theme-toggle.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/theme-toggle/theme-toggle.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ThemeToggle',
+    description: 'Persisted light/dark theme switcher with system-preference fallback',
+    category: 'action',
+    tags: ['theme', 'dark-mode', 'light-mode', 'toggle', 'switcher', 'preference']
+};

package/dist/themes/aurora.css

@@ -167,6 +167,26 @@
 	--dry-shadow-brand: 0 4px 14px hsla(15, 90%, 70%, 0.18), 0 2px 6px hsla(15, 90%, 70%, 0.1);
 	--dry-shadow-accent: 0 4px 14px hsla(38, 88%, 68%, 0.18), 0 2px 6px hsla(38, 88%, 68%, 0.1);
 
+	/* ─── Utility shadows — warm dark edge + ink layers ─────────────── */
+	--dry-shadow-sm:
+		0px 0px 0px 1px hsla(30, 30%, 95%, 0.06), 0px 1px 2px -1px hsla(20, 40%, 5%, 0.45),
+		0px 2px 4px 0px hsla(20, 40%, 5%, 0.35);
+	--dry-shadow-md:
+		0px 0px 0px 1px hsla(30, 30%, 95%, 0.07), 0px 2px 4px -1px hsla(20, 40%, 5%, 0.5),
+		0px 4px 8px -2px hsla(20, 40%, 5%, 0.35);
+	--dry-shadow-lg:
+		0px 0px 0px 1px hsla(30, 30%, 95%, 0.08), 0px 4px 8px -2px hsla(20, 40%, 5%, 0.55),
+		0px 8px 20px -4px hsla(20, 40%, 5%, 0.45);
+	--dry-shadow-xl:
+		0px 0px 0px 1px hsla(30, 30%, 95%, 0.08), 0px 8px 16px -4px hsla(20, 40%, 5%, 0.6),
+		0px 20px 40px -8px hsla(20, 40%, 5%, 0.5);
+	--dry-shadow-sm-hover:
+		0px 0px 0px 1px hsla(30, 30%, 95%, 0.1), 0px 1px 2px -1px hsla(20, 40%, 5%, 0.5),
+		0px 2px 4px 0px hsla(20, 40%, 5%, 0.4);
+	--dry-shadow-md-hover:
+		0px 0px 0px 1px hsla(30, 30%, 95%, 0.1), 0px 2px 4px -1px hsla(20, 40%, 5%, 0.55),
+		0px 4px 8px -2px hsla(20, 40%, 5%, 0.4);
+
 	/* ─── Glass — dark warm frosted ───────────────────────────────── */
 	--dry-glass-tint: hsla(20, 14%, 12%, 0.7);
 	--dry-glass-opacity: 62%;

package/dist/themes/dark.css

@@ -157,6 +157,26 @@
 	--dry-shadow-brand: 0 4px 14px hsla(230, 100%, 82%, 0.15), 0 2px 6px hsla(230, 100%, 82%, 0.1);
 	--dry-shadow-accent: 0 4px 14px hsla(25, 85%, 68%, 0.15), 0 2px 6px hsla(25, 85%, 68%, 0.1);
 
+	/* ─── Utility shadows (dark) — edge reads white, layers stay ink ── */
+	--dry-shadow-sm:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.4),
+		0px 2px 4px 0px rgba(0, 0, 0, 0.3);
+	--dry-shadow-md:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.07), 0px 2px 4px -1px rgba(0, 0, 0, 0.45),
+		0px 4px 8px -2px rgba(0, 0, 0, 0.3);
+	--dry-shadow-lg:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 4px 8px -2px rgba(0, 0, 0, 0.5),
+		0px 8px 20px -4px rgba(0, 0, 0, 0.4);
+	--dry-shadow-xl:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.55),
+		0px 20px 40px -8px rgba(0, 0, 0, 0.5);
+	--dry-shadow-sm-hover:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.45),
+		0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+	--dry-shadow-md-hover:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.5),
+		0px 4px 8px -2px rgba(0, 0, 0, 0.35);
+
 	/* ─── Overlay backdrops ───────────────────────────────────────── */
 	--dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.6);
 	--dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.75);
@@ -217,7 +237,15 @@
 	--dry-grain-blend: soft-light;
 }
 
-.theme-auto {
+/* When `.theme-auto` is combined with `data-theme="light"`, the explicit
+   `data-theme` wins — do NOT apply dark tokens under that combo, even on a
+   dark-preferring OS. Without this guard, `<html class="theme-auto" data-theme="light">`
+   on a dark OS would still resolve to dark tokens because the media query
+   below fires regardless of the attribute. Explicit `data-theme="dark"` is
+   already handled by the rule above; this class only drives the system-aware
+   auto behaviour when no explicit override is present (or when the override is
+   explicitly dark). */
+.theme-auto:not([data-theme='light']) {
 	@media (prefers-color-scheme: dark) {
 		& {
 			/* ─── Neutral ─────────────────────────────────────────────────── */
@@ -379,6 +407,26 @@
 				0 4px 14px hsla(230, 100%, 82%, 0.15), 0 2px 6px hsla(230, 100%, 82%, 0.1);
 			--dry-shadow-accent: 0 4px 14px hsla(25, 85%, 68%, 0.15), 0 2px 6px hsla(25, 85%, 68%, 0.1);
 
+			/* ─── Utility shadows (dark auto) ─────────────────────────────── */
+			--dry-shadow-sm:
+				0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.4),
+				0px 2px 4px 0px rgba(0, 0, 0, 0.3);
+			--dry-shadow-md:
+				0px 0px 0px 1px rgba(255, 255, 255, 0.07), 0px 2px 4px -1px rgba(0, 0, 0, 0.45),
+				0px 4px 8px -2px rgba(0, 0, 0, 0.3);
+			--dry-shadow-lg:
+				0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 4px 8px -2px rgba(0, 0, 0, 0.5),
+				0px 8px 20px -4px rgba(0, 0, 0, 0.4);
+			--dry-shadow-xl:
+				0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.55),
+				0px 20px 40px -8px rgba(0, 0, 0, 0.5);
+			--dry-shadow-sm-hover:
+				0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.45),
+				0px 2px 4px 0px rgba(0, 0, 0, 0.35);
+			--dry-shadow-md-hover:
+				0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.5),
+				0px 4px 8px -2px rgba(0, 0, 0, 0.35);
+
 			/* ─── Overlay backdrops ───────────────────────────────────────── */
 			--dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.6);
 			--dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.75);

package/dist/themes/default.css

@@ -10,6 +10,8 @@ html {
 	color: var(--dry-color-text-strong);
 	background: var(--dry-color-bg-base);
 	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
 }
 
 body {
@@ -17,6 +19,13 @@ body {
 	min-height: 100dvh;
 }
 
+:where(h1, h2, h3, h4, h5, h6) {
+	text-wrap: balance;
+}
+:where(p) {
+	text-wrap: pretty;
+}
+
 code,
 pre,
 kbd,
@@ -221,6 +230,7 @@ samp {
 
 	/* ─── Radius ──────────────────────────────────────────────────── */
 	--dry-radius-none: 0;
+	--dry-radius-xs: 2px;
 	--dry-radius-sm: 4px;
 	--dry-radius-md: 8px;
 	--dry-radius-lg: 8px;
@@ -228,6 +238,55 @@ samp {
 	--dry-radius-2xl: 16px;
 	--dry-radius-full: 9999px;
 
+	/* ─── Concentric radius ─────────────────────────────────────────
+	   Per-container outer radii + the padding each container wraps
+	   its children in. The derived `--dry-radius-nested-*` tokens
+	   below are what children inside the padded region should use
+	   so inner corners sit concentric with the outer edge. */
+	--dry-radius-card: var(--dry-radius-2xl);
+	--dry-radius-dialog: var(--dry-radius-2xl);
+	--dry-radius-popover: var(--dry-radius-xl);
+	--dry-radius-sheet: var(--dry-radius-2xl);
+	--dry-radius-toast: var(--dry-radius-lg);
+	--dry-radius-tooltip: var(--dry-radius-md);
+
+	--dry-padding-card: var(--dry-space-8);
+	--dry-padding-dialog: var(--dry-space-6);
+	--dry-padding-popover: var(--dry-space-2);
+	--dry-padding-sheet: var(--dry-space-6);
+	--dry-padding-toast: var(--dry-space-3);
+	--dry-padding-tooltip: var(--dry-space-2);
+	--dry-padding-field: var(--dry-space-4);
+
+	--dry-radius-nested-card: max(
+		var(--dry-radius-sm),
+		calc(var(--dry-radius-card) - var(--dry-padding-card))
+	);
+	--dry-radius-nested-dialog: max(
+		var(--dry-radius-sm),
+		calc(var(--dry-radius-dialog) - var(--dry-padding-dialog))
+	);
+	--dry-radius-nested-popover: max(
+		var(--dry-radius-xs),
+		calc(var(--dry-radius-popover) - var(--dry-padding-popover))
+	);
+	--dry-radius-nested-sheet: max(
+		var(--dry-radius-sm),
+		calc(var(--dry-radius-sheet) - var(--dry-padding-sheet))
+	);
+	--dry-radius-nested-toast: max(
+		var(--dry-radius-xs),
+		calc(var(--dry-radius-toast) - var(--dry-padding-toast))
+	);
+	--dry-radius-nested-tooltip: max(
+		var(--dry-radius-xs),
+		calc(var(--dry-radius-tooltip) - var(--dry-padding-tooltip))
+	);
+	--dry-radius-nested-field: max(
+		var(--dry-radius-sm),
+		calc(var(--dry-radius-md) - var(--dry-padding-field))
+	);
+
 	/* ─── Typography ──────────────────────────────────────────────── */
 	--dry-font-sans:
 		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
@@ -375,6 +434,50 @@ samp {
 	--dry-stagger-step: 60ms;
 	--dry-stagger-max: 8; /* cap delay so very long lists don't take forever */
 
+	/* ─── Entrance motion ──────────────────────────────────────────
+	   Dramatic one-shot reveal (hero sections, page loads). Distinct
+	   from `--dry-duration-entrance` which drives ambient component
+	   mounts. `dry-enter` keyframe + `.dry-enter` class below consume
+	   these tokens. */
+	--dry-enter-translate: 8px;
+	--dry-enter-blur: 5px;
+	--dry-enter-duration: 800ms;
+	--dry-enter-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+	--dry-enter-stagger-section: 100ms;
+	--dry-enter-stagger-word: 80ms;
+	--dry-enter-stagger-letter: 40ms;
+	--dry-enter-stagger-max: 16;
+
+	/* ─── Exit motion ──────────────────────────────────────────────
+	   Subtle dismissal — small fixed offset, not full container
+	   travel. Consumed by the `leave` Svelte transition and any
+	   overlay primitive using `out:leave`. */
+	--dry-exit-translate: 12px;
+	--dry-exit-blur: 4px;
+	--dry-exit-duration: var(--dry-duration-slow);
+	--dry-exit-ease: var(--dry-ease-out);
+
+	/* ─── Icon swap ────────────────────────────────────────────────
+	   Motion for `<IconSwap>` when one icon replaces another
+	   (copy ↔ check, play ↔ pause). Uses the same retarget-friendly
+	   transition as `[data-dry-icon-reveal]`. */
+	--dry-icon-swap-duration: var(--dry-duration-fast);
+	--dry-icon-swap-ease: var(--dry-ease-spring-snappy);
+	--dry-icon-swap-scale-out: 0.85;
+	--dry-icon-swap-blur-out: 2px;
+
+	/* ─── Optical offset ───────────────────────────────────────────
+	   Small horizontal nudge used by `:has()` selectors on Button,
+	   Chip, etc. to shift padding on the icon side so the label
+	   reads visually centered. */
+	--dry-optical-icon-offset: 0.125rem;
+
+	/* ─── Numeric variant ──────────────────────────────────────────
+	   Indirection layer so `.dry-tabular-nums` and the `Numeric`
+	   primitive can be swapped to `slashed-zero tabular-nums` or
+	   similar without a code sweep. */
+	--dry-numeric-variant: tabular-nums;
+
 	/* ─── Glass surface ───────────────────────────────────────────── */
 	--dry-glass-blur: 12px;
 	--dry-glass-tint: var(--dry-color-bg-raised);
@@ -435,17 +538,29 @@ samp {
 	--dry-tracking-wide: 0.05em;
 	--dry-tracking-wider: 0.1em;
 
-	/* ─── Utility shadows (fixed dark ink for depth across themes) ── */
-	--dry-shadow-sm: 0 1px 2px 0 color-mix(in srgb, #020617 12%, transparent);
+	/* ─── Utility shadows — three-layer shadow-as-border recipe ──────
+	   Edge + close contact + ambient, so a raised surface reads as
+	   raised without needing a solid border. Consumers: Card, Button,
+	   and any raised chrome that used to pair border + subtle shadow.
+	   Hover variants ramp the first two layers slightly. */
+	--dry-shadow-sm:
+		0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06),
+		0px 2px 4px 0px rgba(0, 0, 0, 0.04);
 	--dry-shadow-md:
-		0 4px 6px -1px color-mix(in srgb, #020617 18%, transparent),
-		0 2px 4px -2px color-mix(in srgb, #020617 14%, transparent);
+		0px 0px 0px 1px rgba(0, 0, 0, 0.07), 0px 2px 4px -1px rgba(0, 0, 0, 0.08),
+		0px 4px 8px -2px rgba(0, 0, 0, 0.04);
 	--dry-shadow-lg:
-		0 10px 15px -3px color-mix(in srgb, #020617 24%, transparent),
-		0 4px 6px -4px color-mix(in srgb, #020617 18%, transparent);
+		0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px -2px rgba(0, 0, 0, 0.08),
+		0px 8px 20px -4px rgba(0, 0, 0, 0.06);
 	--dry-shadow-xl:
-		0 20px 25px -5px color-mix(in srgb, #020617 30%, transparent),
-		0 8px 10px -6px color-mix(in srgb, #020617 22%, transparent);
+		0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.1),
+		0px 20px 40px -8px rgba(0, 0, 0, 0.08);
+	--dry-shadow-sm-hover:
+		0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08),
+		0px 2px 4px 0px rgba(0, 0, 0, 0.06);
+	--dry-shadow-md-hover:
+		0px 0px 0px 1px rgba(0, 0, 0, 0.09), 0px 2px 4px -1px rgba(0, 0, 0, 0.1),
+		0px 4px 8px -2px rgba(0, 0, 0, 0.06);
 
 	/* ─── Layers ──────────────────────────────────────────────────── */
 	--dry-layer-overlay: 50;
@@ -509,6 +624,18 @@ samp {
 		--dry-motion-opacity-enter: 1;
 		--dry-motion-blur-enter: 0px;
 		--dry-motion-scale-enter: 1;
+		--dry-enter-translate: 0px;
+		--dry-enter-blur: 0px;
+		--dry-enter-duration: 1ms;
+		--dry-enter-stagger-section: 0ms;
+		--dry-enter-stagger-word: 0ms;
+		--dry-enter-stagger-letter: 0ms;
+		--dry-exit-translate: 0px;
+		--dry-exit-blur: 0px;
+		--dry-exit-duration: 1ms;
+		--dry-icon-swap-duration: 0ms;
+		--dry-icon-swap-scale-out: 1;
+		--dry-icon-swap-blur-out: 0px;
 	}
 }
 
@@ -569,7 +696,33 @@ samp {
 }
 
 .dry-tabular-nums {
-	font-variant-numeric: tabular-nums;
+	font-variant-numeric: var(--dry-numeric-variant);
+}
+
+/* ─── Entrance animation ───────────────────────────────────────────
+   One-shot reveal for mounted content. Keyframes here are acceptable
+   (non-interactive, fires once on mount). Apply via:
+   - `<Enter index={n}>` / `<Stagger>` components.
+   - `in:enter={{ index }}` Svelte transition.
+   - `.dry-enter` + `style="--dry-enter-index: {n}"` for hand-rolled markup. */
+@keyframes dry-enter {
+	from {
+		transform: translateY(var(--dry-enter-translate));
+		filter: blur(var(--dry-enter-blur));
+		opacity: 0;
+	}
+}
+.dry-enter {
+	animation: dry-enter var(--dry-enter-duration) var(--dry-enter-ease) both;
+	animation-delay: calc(
+		var(--dry-enter-stagger-section) * min(var(--dry-enter-index, 0), var(--dry-enter-stagger-max))
+	);
+}
+@media (prefers-reduced-motion: reduce) {
+	.dry-enter {
+		animation-duration: 1ms;
+		animation-delay: 0ms;
+	}
 }
 
 [data-dry-icon-reveal] {

package/dist/themes/midnight.css

@@ -65,6 +65,26 @@
 	--dry-shadow-brand: 0 4px 20px hsla(250, 70%, 75%, 0.12), 0 2px 8px hsla(250, 70%, 75%, 0.08);
 	--dry-shadow-accent: 0 4px 20px hsla(350, 60%, 70%, 0.12), 0 2px 8px hsla(350, 60%, 70%, 0.08);
 
+	/* ─── Utility shadows — dark edge + deep ink layers ─────────────── */
+	--dry-shadow-sm:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 1px 2px -1px hsla(240, 40%, 3%, 0.5),
+		0px 2px 4px 0px hsla(240, 40%, 3%, 0.4);
+	--dry-shadow-md:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.07), 0px 2px 4px -1px hsla(240, 40%, 3%, 0.55),
+		0px 4px 8px -2px hsla(240, 40%, 3%, 0.4);
+	--dry-shadow-lg:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 4px 8px -2px hsla(240, 40%, 3%, 0.6),
+		0px 8px 20px -4px hsla(240, 40%, 3%, 0.5);
+	--dry-shadow-xl:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 8px 16px -4px hsla(240, 40%, 3%, 0.6),
+		0px 20px 40px -8px hsla(240, 40%, 3%, 0.55);
+	--dry-shadow-sm-hover:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px hsla(240, 40%, 3%, 0.55),
+		0px 2px 4px 0px hsla(240, 40%, 3%, 0.45);
+	--dry-shadow-md-hover:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 2px 4px -1px hsla(240, 40%, 3%, 0.6),
+		0px 4px 8px -2px hsla(240, 40%, 3%, 0.45);
+
 	/* ─── Glass — the hero feature of this theme ──────────────────── */
 	--dry-glass-blur: 16px;
 	--dry-glass-tint: hsla(240, 15%, 10%, 0.65);

package/dist/themes/terminal.css

@@ -64,6 +64,26 @@
 	--dry-shadow-brand: 0 0 12px hsla(145, 80%, 50%, 0.15), 0 0 4px hsla(145, 80%, 50%, 0.1);
 	--dry-shadow-accent: 0 0 12px hsla(45, 90%, 55%, 0.15), 0 0 4px hsla(45, 90%, 55%, 0.1);
 
+	/* ─── Utility shadows — thin edge, minimal layering (CRT feel) ─── */
+	--dry-shadow-sm:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.55),
+		0px 2px 4px 0px rgba(0, 0, 0, 0.4);
+	--dry-shadow-md:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.6),
+		0px 4px 8px -2px rgba(0, 0, 0, 0.4);
+	--dry-shadow-lg:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 4px 8px -2px rgba(0, 0, 0, 0.65),
+		0px 8px 20px -4px rgba(0, 0, 0, 0.5);
+	--dry-shadow-xl:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.14), 0px 8px 16px -4px rgba(0, 0, 0, 0.7),
+		0px 20px 40px -8px rgba(0, 0, 0, 0.6);
+	--dry-shadow-sm-hover:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px -1px rgba(0, 0, 0, 0.6),
+		0px 2px 4px 0px rgba(0, 0, 0, 0.45);
+	--dry-shadow-md-hover:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.65),
+		0px 4px 8px -2px rgba(0, 0, 0, 0.45);
+
 	/* ─── Glass — minimal, tinted dark ────────────────────────────── */
 	--dry-glass-blur: 8px;
 	--dry-glass-tint: hsla(0, 0%, 4%, 0.85);

package/dist/time-input/time-input.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;