@dryui/ui 4.0.0 → 4.0.2

package/src/scroll-area/scroll-area.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'ScrollArea',
 	description: 'Custom scrollable area with styled scrollbars',

package/src/scroll-to-top/scroll-to-top.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'ScrollToTop',
 	description: 'Button that scrolls to top of page or container',

package/src/segmented-control/segmented-control.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'SegmentedControl',
 	description: 'Compact segmented switch for mutually exclusive options',

package/src/select/index.ts

@@ -1,10 +1,16 @@
 export type {
 	SelectRootProps,
-	SelectTriggerProps,
 	SelectContentProps,
 	SelectItemProps,
 	SelectValueProps
 } from '@dryui/primitives';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+
+export interface SelectTriggerProps extends Omit<HTMLButtonAttributes, 'children'> {
+	size?: 'sm' | 'md' | 'lg';
+	children: Snippet;
+}
 
 import SelectRoot from './select-root-input.svelte';
 import SelectTrigger from './select-trigger-button.svelte';

package/src/select/select.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Select',
 	description: 'Closed dropdown select for choosing one option from a fixed list',

package/src/separator/separator.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Separator',
 	description: 'Visual divider between content',

package/src/shader-canvas/shader-canvas.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'ShaderCanvas',
 	description: 'WebGL shader canvas with built-in presets and theme color integration',

package/src/shimmer/shimmer.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Shimmer',
 	description: 'Warm highlight sweep that travels across wrapped text and inline icons together',

package/src/sidebar/sidebar.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Sidebar',
 	description: 'Collapsible side navigation panel',

package/src/skeleton/skeleton.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Skeleton',
 	description: 'Loading placeholder animation',

package/src/slider/slider.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Slider',
 	description: 'Range input slider with thumb control',

package/src/spacer/spacer.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Spacer',
 	description: 'Empty space component for spacing',

package/src/sparkline/sparkline.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Sparkline',
 	description: 'Compact inline SVG sparkline chart',

package/src/spinner/spinner.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Spinner',
 	description: 'Loading spinner animation',

package/src/splitter/splitter.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Splitter',
 	description: 'Resizable split panels with drag handle',

package/src/spotlight/spotlight.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Spotlight',
 	description:

package/src/stagger/stagger.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Stagger',
 	description:

package/src/star-rating/star-rating.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'StarRating',
 	description: 'Read-only star rating display with filled and outlined variants',

package/src/stepper/stepper.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Stepper',
 	description: 'Step-by-step progress indicator',

package/src/svg/svg.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Svg',
 	description: 'Accessible SVG wrapper with viewBox and aria-label defaults',

package/src/table/table.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Table',
 	description: 'Data table with header, body, footer sections',

package/src/table-of-contents/table-of-contents.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'TableOfContents',
 	description: 'Auto-generated table of contents from headings',

package/src/tabs/tabs.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Tabs',
 	description: 'Tabbed content navigation',

package/src/tag/tag-button.svelte

@@ -146,12 +146,8 @@
 	}
 
 	[data-variant='solid'][data-color='orange'] {
-		--_tag-bg-default: color-mix(
-			in srgb,
-			var(--dry-color-fill-warning) 70%,
-			var(--dry-color-fill-error)
-		);
-		--_tag-color-default: var(--dry-color-on-warning);
+		--_tag-bg-default: var(--dry-color-fill-orange);
+		--_tag-color-default: var(--dry-color-on-orange);
 	}
 
 	/* ── Variant: outline ─────────────────────────────────────────────────────── */

package/src/tag/tag.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Tag',
 	description: 'Small labeled tag element with color and variant support',

package/src/tags-input/tags-input-tag.svelte

@@ -41,7 +41,7 @@
 		margin-inline-end: var(--dry-tags-input-gap, var(--dry-space-1_5));
 		margin-block: calc(var(--dry-tags-input-gap, var(--dry-space-1_5)) / 2);
 		background: color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent);
-		color: var(--dry-color-fill-brand);
+		color: var(--dry-color-text-brand);
 		border-radius: var(--dry-tags-input-tag-radius, var(--dry-radius-md));
 		overflow: hidden;
 		font-size: var(

package/src/tags-input/tags-input.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'TagsInput',
 	description: 'Input for managing a list of tags',

package/src/text/text.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Text',
 	description: 'Standalone body copy export for starter-kit typography',

package/src/textarea/textarea.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'Textarea',
 	description: 'Multi-line text input',

package/src/theme-toggle/theme-toggle.meta.ts

@@ -1,4 +1,4 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'ThemeToggle',
 	description: 'Persisted light/dark theme switcher with system-preference fallback',

package/src/themes/aurora.css

@@ -10,6 +10,8 @@
 
 [data-theme='aurora'],
 .theme-aurora {
+	color-scheme: light;
+
 	/* ─── Public aliases (aurora) ─────────────────────────────────── */
 	--dry-color-primary: hsl(15, 85%, 55%);
 	--dry-color-primary-hover: hsl(15, 85%, 47%);
@@ -24,11 +26,12 @@
 
 	/* ─── Brand — warm coral instead of cold blue ─────────────────── */
 	--dry-color-text-brand: hsl(15, 80%, 42%);
+	--dry-color-fill-brand: var(--dry-color-primary);
 	--dry-color-fill-brand-active: hsl(15, 85%, 41%);
 	--dry-color-fill-brand-weak: hsla(15, 85%, 55%, 0.07);
 	--dry-color-stroke-brand: hsla(15, 85%, 55%, 0.5);
 	--dry-color-stroke-brand-strong: hsla(15, 85%, 55%, 0.8);
-	--dry-color-on-brand: #ffffff;
+	--dry-color-on-brand: hsl(15, 30%, 10%);
 	--dry-color-focus-ring: hsla(15, 85%, 55%, 0.4);
 
 	/* ─── Accent — golden amber ───────────────────────────────────── */
@@ -36,17 +39,20 @@
 	--dry-color-fill-accent-weak: hsla(38, 92%, 55%, 0.08);
 	--dry-color-stroke-accent: hsla(38, 92%, 55%, 0.5);
 	--dry-color-stroke-accent-strong: hsla(38, 92%, 55%, 0.8);
+	--dry-color-on-accent: hsl(38, 30%, 10%);
 
 	/* ─── Status: Error (warm-shifted hue 8) ──────────────────────── */
 	--dry-color-text-error: hsl(8, 70%, 38%);
-	--dry-color-fill-error-hover: hsl(8, 75%, 44%);
+	--dry-color-fill-error: var(--dry-color-danger);
+	--dry-color-fill-error-hover: hsl(8, 75%, 55%);
 	--dry-color-fill-error-weak: hsla(8, 75%, 52%, 0.1);
 	--dry-color-stroke-error: hsl(8, 50%, 70%);
 	--dry-color-stroke-error-strong: hsla(8, 75%, 52%, 0.8);
-	--dry-color-on-error: #ffffff;
+	--dry-color-on-error: hsl(8, 30%, 5%);
 
 	/* ─── Status: Warning ─────────────────────────────────────────── */
 	--dry-color-text-warning: hsl(40, 80%, 32%);
+	--dry-color-fill-warning: var(--dry-color-warning);
 	--dry-color-fill-warning-weak: hsla(40, 85%, 52%, 0.1);
 	--dry-color-stroke-warning: hsl(40, 60%, 65%);
 	--dry-color-stroke-warning-strong: hsla(40, 85%, 52%, 0.8);
@@ -54,10 +60,11 @@
 
 	/* ─── Status: Success ─────────────────────────────────────────── */
 	--dry-color-text-success: hsl(140, 60%, 30%);
+	--dry-color-fill-success: var(--dry-color-success);
 	--dry-color-fill-success-weak: hsla(140, 60%, 45%, 0.1);
 	--dry-color-stroke-success: hsl(140, 50%, 65%);
 	--dry-color-stroke-success-strong: hsla(140, 60%, 45%, 0.8);
-	--dry-color-on-success: #ffffff;
+	--dry-color-on-success: hsl(140, 30%, 8%);
 
 	/* ─── Status: Info ────────────────────────────────────────────── */
 	--dry-color-text-info: hsl(205, 70%, 35%);
@@ -65,13 +72,22 @@
 	--dry-color-fill-info-weak: hsla(205, 70%, 50%, 0.1);
 	--dry-color-stroke-info: hsl(205, 50%, 70%);
 	--dry-color-stroke-info-strong: hsla(205, 70%, 50%, 0.8);
+	--dry-color-on-info: hsl(205, 30%, 10%);
 
 	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 	--dry-color-text-purple: hsl(290, 55%, 38%);
 	--dry-color-fill-purple: hsl(290, 65%, 55%);
 	--dry-color-fill-purple-weak: hsla(290, 65%, 55%, 0.1);
 	--dry-color-stroke-purple: hsla(290, 65%, 55%, 0.5);
-	--dry-color-on-purple: #ffffff;
+	--dry-color-on-purple: hsl(290, 30%, 5%);
+
+	/* ─── Orange semantic palette (badge / tag orange variants) ───── */
+	--dry-color-fill-orange: color-mix(
+		in srgb,
+		var(--dry-color-fill-warning) 70%,
+		var(--dry-color-fill-error)
+	);
+	--dry-color-on-orange: hsl(24, 30%, 10%);
 
 	/* ─── Overlay backdrops — warm-tinted ─────────────────────────── */
 	--dry-color-overlay-backdrop: hsla(20, 30%, 15%, 0.4);
@@ -119,6 +135,8 @@
 /* ─── Aurora Dark variant ────────────────────────────────────────── */
 [data-theme='aurora-dark'],
 .theme-aurora-dark {
+	color-scheme: dark;
+
 	/* ─── Public aliases (aurora-dark) ────────────────────────────── */
 	--dry-color-primary: hsl(15, 90%, 70%);
 	--dry-color-primary-hover: hsl(15, 90%, 62%);
@@ -132,6 +150,7 @@
 	--dry-color-border-hover: hsla(30, 15%, 80%, 0.5);
 
 	/* ─── Brand — coral, lighter for dark bg ──────────────────────── */
+	--dry-color-fill-brand: var(--dry-color-primary);
 	--dry-color-fill-brand-active: hsl(15, 90%, 56%);
 	--dry-color-fill-brand-weak: hsla(15, 90%, 70%, 0.08);
 	--dry-color-stroke-brand: hsla(15, 90%, 70%, 0.5);
@@ -144,10 +163,12 @@
 	--dry-color-fill-accent-weak: hsla(38, 88%, 68%, 0.1);
 	--dry-color-stroke-accent: hsla(38, 88%, 68%, 0.5);
 	--dry-color-stroke-accent-strong: hsla(38, 88%, 68%, 0.8);
+	--dry-color-on-accent: hsl(38, 30%, 8%);
 
 	/* ─── Status: Error (warm-shifted hue 8) ──────────────────────── */
 	--dry-color-text-error: hsl(8, 75%, 72%);
-	--dry-color-fill-error-hover: hsl(8, 75%, 52%);
+	--dry-color-fill-error: var(--dry-color-danger);
+	--dry-color-fill-error-hover: hsl(8, 75%, 62%);
 	--dry-color-fill-error-weak: hsla(8, 75%, 60%, 0.15);
 	--dry-color-stroke-error: hsl(8, 55%, 55%);
 	--dry-color-stroke-error-strong: hsla(8, 75%, 60%, 0.8);
@@ -155,6 +176,7 @@
 
 	/* ─── Status: Warning ─────────────────────────────────────────── */
 	--dry-color-text-warning: hsl(40, 85%, 68%);
+	--dry-color-fill-warning: var(--dry-color-warning);
 	--dry-color-fill-warning-weak: hsla(40, 80%, 56%, 0.15);
 	--dry-color-stroke-warning: hsl(40, 60%, 55%);
 	--dry-color-stroke-warning-strong: hsla(40, 80%, 56%, 0.8);
@@ -162,6 +184,7 @@
 
 	/* ─── Status: Success ─────────────────────────────────────────── */
 	--dry-color-text-success: hsl(140, 55%, 65%);
+	--dry-color-fill-success: var(--dry-color-success);
 	--dry-color-fill-success-weak: hsla(140, 55%, 50%, 0.15);
 	--dry-color-stroke-success: hsl(140, 45%, 55%);
 	--dry-color-stroke-success-strong: hsla(140, 55%, 50%, 0.8);
@@ -173,6 +196,7 @@
 	--dry-color-fill-info-weak: hsla(205, 65%, 56%, 0.15);
 	--dry-color-stroke-info: hsl(205, 45%, 55%);
 	--dry-color-stroke-info-strong: hsla(205, 65%, 56%, 0.8);
+	--dry-color-on-info: hsl(205, 30%, 8%);
 
 	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 	--dry-color-text-purple: hsl(290, 75%, 78%);
@@ -181,6 +205,14 @@
 	--dry-color-stroke-purple: hsla(290, 70%, 70%, 0.5);
 	--dry-color-on-purple: hsl(290, 30%, 8%);
 
+	/* ─── Orange semantic palette (badge / tag orange variants) ───── */
+	--dry-color-fill-orange: color-mix(
+		in srgb,
+		var(--dry-color-fill-warning) 70%,
+		var(--dry-color-fill-error)
+	);
+	--dry-color-on-orange: hsl(24, 30%, 8%);
+
 	/* ─── Backgrounds — warm dark ─────────────────────────────────── */
 	--dry-color-bg-base: hsl(20, 18%, 8%);
 	--dry-color-bg-raised: hsl(20, 14%, 12%);
@@ -241,3 +273,19 @@
 	--dry-radius-xl: 14px;
 	--dry-radius-2xl: 20px;
 }
+
+@supports (color: contrast-color(white)) {
+	[data-theme='aurora'],
+	.theme-aurora,
+	[data-theme='aurora-dark'],
+	.theme-aurora-dark {
+		--dry-color-on-brand: contrast-color(var(--dry-color-fill-brand));
+		--dry-color-on-error: contrast-color(var(--dry-color-fill-error));
+		--dry-color-on-warning: contrast-color(var(--dry-color-fill-warning));
+		--dry-color-on-success: contrast-color(var(--dry-color-fill-success));
+		--dry-color-on-info: contrast-color(var(--dry-color-fill-info));
+		--dry-color-on-accent: contrast-color(var(--dry-color-fill-accent));
+		--dry-color-on-purple: contrast-color(var(--dry-color-fill-purple));
+		--dry-color-on-orange: contrast-color(var(--dry-color-fill-orange));
+	}
+}

package/src/themes/dark.css

@@ -1,4 +1,6 @@
 [data-theme='dark'] {
+	color-scheme: dark;
+
 	/* ─── Public aliases (dark) ────────────────────────────────────── */
 	--dry-color-primary: hsl(230, 100%, 82%);
 	--dry-color-primary-hover: hsl(230, 100%, 75%);
@@ -18,6 +20,7 @@
 	--dry-color-fill-active: hsla(0, 0%, 100%, 0.14);
 
 	/* ─── Brand dark overrides ────────────────────────────────────── */
+	--dry-color-fill-brand: var(--dry-color-primary);
 	--dry-color-fill-brand-active: hsl(230, 100%, 70%);
 	--dry-color-fill-brand-weak: hsla(230, 100%, 82%, 0.06);
 	--dry-color-stroke-brand: hsla(230, 100%, 82%, 0.5);
@@ -66,14 +69,16 @@
 
 	/* ─── Status: Error ───────────────────────────────────────────── */
 	--dry-color-text-error: hsl(0, 60%, 70%);
-	--dry-color-fill-error-hover: hsl(0, 65%, 48%);
+	--dry-color-fill-error: var(--dry-color-danger);
+	--dry-color-fill-error-hover: hsl(0, 65%, 58%);
 	--dry-color-fill-error-weak: hsla(0, 60%, 60%, 0.15);
 	--dry-color-stroke-error: hsl(0, 45%, 55%);
 	--dry-color-stroke-error-strong: hsla(0, 65%, 55%, 0.8);
-	--dry-color-on-error: #ffffff;
+	--dry-color-on-error: hsl(0, 30%, 4%);
 
 	/* ─── Status: Warning ─────────────────────────────────────────── */
 	--dry-color-text-warning: hsl(40, 80%, 65%);
+	--dry-color-fill-warning: var(--dry-color-warning);
 	--dry-color-fill-warning-weak: hsla(40, 75%, 60%, 0.15);
 	--dry-color-stroke-warning: hsl(40, 55%, 55%);
 	--dry-color-stroke-warning-strong: hsla(40, 75%, 52%, 0.8);
@@ -81,10 +86,11 @@
 
 	/* ─── Status: Success ─────────────────────────────────────────── */
 	--dry-color-text-success: hsl(145, 55%, 65%);
+	--dry-color-fill-success: var(--dry-color-success);
 	--dry-color-fill-success-weak: hsla(145, 55%, 60%, 0.15);
 	--dry-color-stroke-success: hsl(145, 45%, 55%);
 	--dry-color-stroke-success-strong: hsla(145, 55%, 48%, 0.8);
-	--dry-color-on-success: #ffffff;
+	--dry-color-on-success: hsl(145, 30%, 8%);
 
 	/* ─── Status: Info ────────────────────────────────────────────── */
 	--dry-color-text-info: hsl(210, 65%, 70%);
@@ -92,12 +98,14 @@
 	--dry-color-fill-info-weak: hsla(210, 60%, 65%, 0.15);
 	--dry-color-stroke-info: hsl(210, 45%, 55%);
 	--dry-color-stroke-info-strong: hsla(210, 65%, 55%, 0.8);
+	--dry-color-on-info: hsl(210, 30%, 8%);
 
 	/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
 	--dry-color-fill-accent: hsl(25, 85%, 68%);
 	--dry-color-fill-accent-weak: hsla(25, 85%, 68%, 0.1);
 	--dry-color-stroke-accent: hsla(25, 85%, 68%, 0.5);
 	--dry-color-stroke-accent-strong: hsla(25, 85%, 68%, 0.8);
+	--dry-color-on-accent: hsl(25, 30%, 8%);
 
 	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 	--dry-color-text-purple: hsl(280, 75%, 78%);
@@ -106,6 +114,14 @@
 	--dry-color-stroke-purple: hsla(280, 75%, 70%, 0.5);
 	--dry-color-on-purple: hsl(233, 18%, 9%);
 
+	/* ─── Orange semantic palette (badge / tag orange variants) ───── */
+	--dry-color-fill-orange: color-mix(
+		in srgb,
+		var(--dry-color-fill-warning) 70%,
+		var(--dry-color-fill-error)
+	);
+	--dry-color-on-orange: hsl(25, 30%, 8%);
+
 	/* ─── Extended surface depth ──────────────────────────────────── */
 	--dry-color-bg-floating: hsl(234, 8%, 26%);
 
@@ -164,6 +180,8 @@
 .theme-auto:not([data-theme='light']) {
 	@media (prefers-color-scheme: dark) {
 		& {
+			color-scheme: dark;
+
 			/* ─── Public aliases (auto dark) ────────────────────────────── */
 			--dry-color-primary: hsl(230, 100%, 82%);
 			--dry-color-primary-hover: hsl(230, 100%, 75%);
@@ -183,6 +201,7 @@
 			--dry-color-fill-active: hsla(0, 0%, 100%, 0.14);
 
 			/* ─── Brand dark overrides ────────────────────────────────────── */
+			--dry-color-fill-brand: var(--dry-color-primary);
 			--dry-color-fill-brand-active: hsl(230, 100%, 70%);
 			--dry-color-fill-brand-weak: hsla(230, 100%, 82%, 0.06);
 			--dry-color-stroke-brand: hsla(230, 100%, 82%, 0.5);
@@ -227,14 +246,16 @@
 
 			/* ─── Status: Error ───────────────────────────────────────────── */
 			--dry-color-text-error: hsl(0, 60%, 70%);
-			--dry-color-fill-error-hover: hsl(0, 65%, 48%);
+			--dry-color-fill-error: var(--dry-color-danger);
+			--dry-color-fill-error-hover: hsl(0, 65%, 58%);
 			--dry-color-fill-error-weak: hsla(0, 60%, 60%, 0.15);
 			--dry-color-stroke-error: hsl(0, 45%, 55%);
 			--dry-color-stroke-error-strong: hsla(0, 65%, 55%, 0.8);
-			--dry-color-on-error: #ffffff;
+			--dry-color-on-error: hsl(0, 30%, 4%);
 
 			/* ─── Status: Warning ─────────────────────────────────────────── */
 			--dry-color-text-warning: hsl(40, 80%, 65%);
+			--dry-color-fill-warning: var(--dry-color-warning);
 			--dry-color-fill-warning-weak: hsla(40, 75%, 60%, 0.15);
 			--dry-color-stroke-warning: hsl(40, 55%, 55%);
 			--dry-color-stroke-warning-strong: hsla(40, 75%, 52%, 0.8);
@@ -242,10 +263,11 @@
 
 			/* ─── Status: Success ─────────────────────────────────────────── */
 			--dry-color-text-success: hsl(145, 55%, 65%);
+			--dry-color-fill-success: var(--dry-color-success);
 			--dry-color-fill-success-weak: hsla(145, 55%, 60%, 0.15);
 			--dry-color-stroke-success: hsl(145, 45%, 55%);
 			--dry-color-stroke-success-strong: hsla(145, 55%, 48%, 0.8);
-			--dry-color-on-success: #ffffff;
+			--dry-color-on-success: hsl(145, 30%, 8%);
 
 			/* ─── Status: Info ────────────────────────────────────────────── */
 			--dry-color-text-info: hsl(210, 65%, 70%);
@@ -253,12 +275,14 @@
 			--dry-color-fill-info-weak: hsla(210, 60%, 65%, 0.15);
 			--dry-color-stroke-info: hsl(210, 45%, 55%);
 			--dry-color-stroke-info-strong: hsla(210, 65%, 55%, 0.8);
+			--dry-color-on-info: hsl(210, 30%, 8%);
 
 			/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
 			--dry-color-fill-accent: hsl(25, 85%, 68%);
 			--dry-color-fill-accent-weak: hsla(25, 85%, 68%, 0.1);
 			--dry-color-stroke-accent: hsla(25, 85%, 68%, 0.5);
 			--dry-color-stroke-accent-strong: hsla(25, 85%, 68%, 0.8);
+			--dry-color-on-accent: hsl(25, 30%, 8%);
 
 			/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 			--dry-color-text-purple: hsl(280, 75%, 78%);
@@ -267,6 +291,14 @@
 			--dry-color-stroke-purple: hsla(280, 75%, 70%, 0.5);
 			--dry-color-on-purple: hsl(233, 18%, 9%);
 
+			/* ─── Orange semantic palette (badge / tag orange variants) ───── */
+			--dry-color-fill-orange: color-mix(
+				in srgb,
+				var(--dry-color-fill-warning) 70%,
+				var(--dry-color-fill-error)
+			);
+			--dry-color-on-orange: hsl(25, 30%, 8%);
+
 			/* ─── Extended surface depth ──────────────────────────────────── */
 			--dry-color-bg-floating: hsl(234, 8%, 26%);
 
@@ -315,3 +347,31 @@
 		}
 	}
 }
+
+@supports (color: contrast-color(white)) {
+	[data-theme='dark'] {
+		--dry-color-on-brand: contrast-color(var(--dry-color-fill-brand));
+		--dry-color-on-error: contrast-color(var(--dry-color-fill-error));
+		--dry-color-on-warning: contrast-color(var(--dry-color-fill-warning));
+		--dry-color-on-success: contrast-color(var(--dry-color-fill-success));
+		--dry-color-on-info: contrast-color(var(--dry-color-fill-info));
+		--dry-color-on-accent: contrast-color(var(--dry-color-fill-accent));
+		--dry-color-on-purple: contrast-color(var(--dry-color-fill-purple));
+		--dry-color-on-orange: contrast-color(var(--dry-color-fill-orange));
+	}
+
+	.theme-auto:not([data-theme='light']) {
+		@media (prefers-color-scheme: dark) {
+			& {
+				--dry-color-on-brand: contrast-color(var(--dry-color-fill-brand));
+				--dry-color-on-error: contrast-color(var(--dry-color-fill-error));
+				--dry-color-on-warning: contrast-color(var(--dry-color-fill-warning));
+				--dry-color-on-success: contrast-color(var(--dry-color-fill-success));
+				--dry-color-on-info: contrast-color(var(--dry-color-fill-info));
+				--dry-color-on-accent: contrast-color(var(--dry-color-fill-accent));
+				--dry-color-on-purple: contrast-color(var(--dry-color-fill-purple));
+				--dry-color-on-orange: contrast-color(var(--dry-color-fill-orange));
+			}
+		}
+	}
+}