@dryui/ui 3.0.0 → 4.0.1

package/dist/textarea/textarea.svelte

@@ -1,38 +1,110 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import { getFormControlCtx } from '@dryui/primitives';
+	import type { FormControlWrapperAttrs } from '../internal/form-control-wrapper-attrs.js';
 
-	interface Props extends HTMLTextareaAttributes {
+	interface Props extends FormControlWrapperAttrs<HTMLSpanElement> {
 		value?: string;
 		size?: 'sm' | 'md' | 'lg';
 		disabled?: boolean;
+		name?: HTMLTextareaAttributes['name'];
+		placeholder?: HTMLTextareaAttributes['placeholder'];
+		readonly?: HTMLTextareaAttributes['readonly'];
+		required?: HTMLTextareaAttributes['required'];
+		minlength?: HTMLTextareaAttributes['minlength'];
+		maxlength?: HTMLTextareaAttributes['maxlength'];
+		rows?: HTMLTextareaAttributes['rows'];
+		cols?: HTMLTextareaAttributes['cols'];
+		wrap?: HTMLTextareaAttributes['wrap'];
+		autocomplete?: HTMLTextareaAttributes['autocomplete'];
+		autofocus?: HTMLTextareaAttributes['autofocus'];
+		oninput?: HTMLTextareaAttributes['oninput'];
+		onchange?: HTMLTextareaAttributes['onchange'];
+		onfocus?: HTMLTextareaAttributes['onfocus'];
+		onblur?: HTMLTextareaAttributes['onblur'];
+		onkeydown?: HTMLTextareaAttributes['onkeydown'];
+		onkeyup?: HTMLTextareaAttributes['onkeyup'];
+		'aria-invalid'?: HTMLTextareaAttributes['aria-invalid'];
 	}
 
 	let {
 		value = $bindable(''),
 		size = 'md',
 		class: className,
+		style,
 		disabled = false,
+		id,
+		name,
+		placeholder,
+		readonly,
+		required,
+		minlength,
+		maxlength,
+		rows,
+		cols,
+		wrap,
+		autocomplete,
+		autofocus,
+		oninput,
+		onchange,
+		onfocus,
+		onblur,
+		onkeydown,
+		onkeyup,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
+		'aria-errormessage': ariaErrormessage,
 		...rest
 	}: Props = $props();
 
 	const ctx = getFormControlCtx();
 	const isDisabled = $derived(disabled || ctx?.disabled || false);
+
+	function autofocusAction(
+		node: HTMLTextAreaElement,
+		enabled: HTMLTextareaAttributes['autofocus']
+	) {
+		if (enabled) node.focus();
+		return {
+			update(nextEnabled: HTMLTextareaAttributes['autofocus']) {
+				if (nextEnabled) node.focus();
+			}
+		};
+	}
 </script>
 
-<span class="wrapper">
+<span class="wrapper {className ?? ''}" {style}>
 	<textarea
+		{...rest}
+		use:autofocusAction={autofocus}
 		bind:value
-		id={ctx?.id}
+		id={id ?? ctx?.id}
 		disabled={isDisabled}
-		required={ctx?.required || undefined}
-		aria-describedby={ctx?.describedBy}
-		aria-invalid={ctx?.hasError || undefined}
-		aria-errormessage={ctx?.errorMessageId}
+		required={required ?? ctx?.required ?? undefined}
+		aria-label={ariaLabel}
+		aria-labelledby={ariaLabelledby}
+		aria-describedby={ariaDescribedby ?? ctx?.describedBy}
+		aria-invalid={ariaInvalid ?? ctx?.hasError ?? undefined}
+		aria-errormessage={ariaErrormessage ?? ctx?.errorMessageId}
 		data-disabled={isDisabled || undefined}
 		data-size={size}
-		class={className}
-		{...rest}
+		{name}
+		{placeholder}
+		{readonly}
+		{minlength}
+		{maxlength}
+		{rows}
+		{cols}
+		{wrap}
+		{autocomplete}
+		{oninput}
+		{onchange}
+		{onfocus}
+		{onblur}
+		{onkeydown}
+		{onkeyup}
 	></textarea>
 </span>
 
@@ -43,19 +115,22 @@
 	}
 
 	textarea {
-		--dry-input-bg: var(--dry-form-control-bg);
-		--dry-input-border: var(--dry-form-control-border);
-		--dry-input-padding-x: var(--dry-form-control-padding-inline);
-		--dry-input-padding-y: var(--dry-form-control-padding-block);
-		--dry-input-font-size: var(--dry-form-control-font-size);
+		--dry-input-bg: var(--dry-textarea-bg, var(--dry-form-control-bg));
+		--dry-input-border: var(--dry-textarea-border, var(--dry-form-control-border));
+		--dry-input-padding-x: var(--dry-textarea-padding-x, var(--dry-form-control-padding-inline));
+		--dry-input-padding-y: var(--dry-textarea-padding-y, var(--dry-form-control-padding-block));
+		--dry-input-font-size: var(--dry-textarea-font-size, var(--dry-form-control-font-size));
 		padding: var(--dry-input-padding-y) var(--dry-input-padding-x);
 		font-size: var(--dry-input-font-size);
 		line-height: var(--dry-type-small-leading);
 		font-family: var(--dry-font-sans);
-		color: var(--dry-input-color, var(--dry-form-control-color));
+		color: var(--dry-textarea-color, var(--dry-input-color, var(--dry-form-control-color)));
 		background: var(--dry-input-bg);
 		border: 1px solid var(--dry-input-border);
-		border-radius: var(--dry-input-radius, var(--dry-form-control-radius));
+		border-radius: var(
+			--dry-textarea-radius,
+			var(--dry-input-radius, var(--dry-form-control-radius))
+		);
 		transition:
 			border-color var(--dry-duration-fast) var(--dry-ease-default),
 			box-shadow var(--dry-duration-fast) var(--dry-ease-default);

package/dist/textarea/textarea.svelte.d.ts

@@ -1,8 +1,27 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
-interface Props extends HTMLTextareaAttributes {
+import type { FormControlWrapperAttrs } from '../internal/form-control-wrapper-attrs.js';
+interface Props extends FormControlWrapperAttrs<HTMLSpanElement> {
     value?: string;
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
+    name?: HTMLTextareaAttributes['name'];
+    placeholder?: HTMLTextareaAttributes['placeholder'];
+    readonly?: HTMLTextareaAttributes['readonly'];
+    required?: HTMLTextareaAttributes['required'];
+    minlength?: HTMLTextareaAttributes['minlength'];
+    maxlength?: HTMLTextareaAttributes['maxlength'];
+    rows?: HTMLTextareaAttributes['rows'];
+    cols?: HTMLTextareaAttributes['cols'];
+    wrap?: HTMLTextareaAttributes['wrap'];
+    autocomplete?: HTMLTextareaAttributes['autocomplete'];
+    autofocus?: HTMLTextareaAttributes['autofocus'];
+    oninput?: HTMLTextareaAttributes['oninput'];
+    onchange?: HTMLTextareaAttributes['onchange'];
+    onfocus?: HTMLTextareaAttributes['onfocus'];
+    onblur?: HTMLTextareaAttributes['onblur'];
+    onkeydown?: HTMLTextareaAttributes['onkeydown'];
+    onkeyup?: HTMLTextareaAttributes['onkeyup'];
+    'aria-invalid'?: HTMLTextareaAttributes['aria-invalid'];
 }
 declare const Textarea: import("svelte").Component<Props, {}, "value">;
 type Textarea = ReturnType<typeof Textarea>;

package/dist/themes/aurora.css

@@ -10,46 +10,98 @@
 
 [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%);
+	--dry-color-text: hsla(20, 40%, 10%, 0.9);
+	--dry-color-text-secondary: hsla(20, 30%, 15%, 0.6);
+	--dry-color-muted: hsla(20, 25%, 25%, 0.1);
+	--dry-color-warning: hsl(40, 85%, 52%);
+	--dry-color-success: hsl(140, 60%, 45%);
+	--dry-color-danger: hsl(8, 75%, 52%);
+	--dry-color-border: hsla(20, 25%, 25%, 0.1);
+	--dry-color-border-hover: hsla(20, 25%, 20%, 0.35);
+
 	/* ─── Brand — warm coral instead of cold blue ─────────────────── */
-	--dry-color-brand: hsl(15, 85%, 55%);
 	--dry-color-text-brand: hsl(15, 80%, 42%);
-	--dry-color-fill-brand: hsl(15, 85%, 55%);
-	--dry-color-fill-brand-hover: hsl(15, 85%, 47%);
+	--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-stroke-brand-weak: hsla(15, 85%, 55%, 0.2);
-	--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 ───────────────────────────────────── */
-	--dry-color-accent: hsl(38, 92%, 55%);
-	--dry-color-text-accent: hsl(38, 80%, 35%);
 	--dry-color-fill-accent: hsl(38, 92%, 55%);
-	--dry-color-fill-accent-hover: hsl(38, 92%, 47%);
-	--dry-color-fill-accent-active: hsl(38, 92%, 41%);
 	--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-stroke-accent-weak: hsla(38, 92%, 55%, 0.2);
-	--dry-color-icon-accent: hsla(38, 92%, 55%, 0.8);
-	--dry-color-on-accent: #1a1410;
+	--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: 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: 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);
+	--dry-color-on-warning: hsl(40, 80%, 12%);
+
+	/* ─── 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: hsl(140, 30%, 8%);
+
+	/* ─── Status: Info ────────────────────────────────────────────── */
+	--dry-color-text-info: hsl(205, 70%, 35%);
+	--dry-color-fill-info: hsl(205, 70%, 50%);
+	--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: 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);
+	--dry-color-overlay-backdrop-strong: hsla(20, 30%, 15%, 0.6);
 
 	/* ─── Backgrounds — warm cream tint ───────────────────────────── */
 	--dry-color-bg-base: hsl(30, 25%, 98%);
 	--dry-color-bg-raised: hsl(30, 20%, 95%);
 	--dry-color-bg-overlay: hsl(30, 15%, 92%);
-	--dry-color-bg-elevated: hsl(30, 12%, 89%);
 	--dry-color-bg-floating: hsl(30, 30%, 99%);
 	--dry-color-bg-sunken: hsl(30, 18%, 94%);
 
 	/* ─── Neutrals — warm-shifted ─────────────────────────────────── */
-	--dry-color-text-strong: hsla(20, 40%, 10%, 0.9);
-	--dry-color-text-weak: hsla(20, 30%, 15%, 0.6);
 	--dry-color-icon: hsla(20, 30%, 20%, 0.65);
-	--dry-color-stroke-strong: hsla(20, 25%, 20%, 0.35);
-	--dry-color-stroke-weak: hsla(20, 25%, 25%, 0.1);
 	--dry-color-fill: hsla(20, 30%, 30%, 0.04);
 	--dry-color-fill-hover: hsla(20, 30%, 30%, 0.06);
 	--dry-color-fill-active: hsla(20, 30%, 30%, 0.12);
@@ -57,53 +109,19 @@
 	/* ─── Shadows — warm ink ──────────────────────────────────────── */
 	--dry-shadow-raised: 0 1px 3px hsla(20, 30%, 20%, 0.06), 0 1px 2px hsla(20, 30%, 20%, 0.04);
 	--dry-shadow-overlay: 0 8px 24px hsla(20, 30%, 20%, 0.1), 0 2px 8px hsla(20, 30%, 20%, 0.06);
-	--dry-shadow-brand: 0 4px 14px hsla(15, 85%, 55%, 0.2), 0 2px 6px hsla(15, 85%, 55%, 0.12);
-	--dry-shadow-accent: 0 4px 14px hsla(38, 92%, 55%, 0.2), 0 2px 6px hsla(38, 92%, 55%, 0.12);
 
 	/* ─── Glass — warm frosted ────────────────────────────────────── */
-	--dry-glass-tint: hsla(30, 25%, 98%, 0.8);
-	--dry-glass-opacity: 78%;
+	--dry-color-glass-tint: hsla(30, 25%, 98%, 0.8);
+	--dry-glass-tint: var(--dry-color-glass-tint);
 	--dry-glass-saturation: 160%;
-	--dry-glass-border: hsla(20, 20%, 50%, 0.08);
-	--dry-glass-border-strong: hsla(20, 20%, 50%, 0.15);
 
 	/* ─── Glow — warm halos ───────────────────────────────────────── */
 	--dry-glow-color: var(--dry-color-fill-brand);
-	--dry-glow-ring: 0 0 0 1px hsla(15, 85%, 55%, 0.3), 0 0 16px 3px hsla(15, 85%, 55%, 0.15);
-	--dry-glow-ring-accent: 0 0 0 1px hsla(38, 92%, 55%, 0.3), 0 0 16px 3px hsla(38, 92%, 55%, 0.15);
-	--dry-glow-ambient: hsla(15, 85%, 55%, 0.05);
-	--dry-glow-ambient-accent: hsla(38, 92%, 55%, 0.05);
 
 	/* ─── Gradient palette — warm organic ─────────────────────────── */
-	--dry-gradient-warm: linear-gradient(
-		135deg,
-		hsl(15, 85%, 65%) 0%,
-		hsl(38, 90%, 60%) 50%,
-		hsl(350, 60%, 62%) 100%
-	);
-	--dry-gradient-cool: linear-gradient(
-		135deg,
-		hsl(25, 50%, 75%) 0%,
-		hsl(350, 40%, 70%) 50%,
-		hsl(280, 30%, 65%) 100%
-	);
-	--dry-gradient-sunset: linear-gradient(
-		135deg,
-		hsl(45, 95%, 65%) 0%,
-		hsl(15, 90%, 58%) 40%,
-		hsl(345, 75%, 55%) 100%
-	);
-	--dry-gradient-ocean: linear-gradient(
-		135deg,
-		hsl(30, 70%, 60%) 0%,
-		hsl(10, 80%, 55%) 50%,
-		hsl(350, 60%, 52%) 100%
-	);
-	--dry-gradient-surface: linear-gradient(180deg, hsl(30, 25%, 98%) 0%, hsl(30, 20%, 95%) 100%);
 
 	/* ─── Grain — subtle warmth ───────────────────────────────────── */
 	--dry-grain-opacity: 0.03;
-	--dry-grain-blend: overlay;
 
 	/* ─── Typography — serif display ──────────────────────────────── */
 	--dry-font-display: 'Playfair Display', 'Georgia', 'Times New Roman', ui-serif, serif;
@@ -117,46 +135,93 @@
 /* ─── 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%);
+	--dry-color-text: hsla(30, 30%, 95%, 1);
+	--dry-color-text-secondary: hsla(30, 20%, 90%, 0.72);
+	--dry-color-muted: hsla(30, 15%, 70%, 0.12);
+	--dry-color-warning: hsl(40, 80%, 56%);
+	--dry-color-success: hsl(140, 55%, 50%);
+	--dry-color-danger: hsl(8, 75%, 60%);
+	--dry-color-border: hsla(30, 15%, 70%, 0.12);
+	--dry-color-border-hover: hsla(30, 15%, 80%, 0.5);
+
 	/* ─── Brand — coral, lighter for dark bg ──────────────────────── */
-	--dry-color-brand: hsl(15, 90%, 70%);
-	--dry-color-text-brand: hsl(15, 90%, 70%);
-	--dry-color-fill-brand: hsl(15, 90%, 70%);
-	--dry-color-fill-brand-hover: hsl(15, 90%, 62%);
+	--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);
 	--dry-color-stroke-brand-strong: hsla(15, 90%, 70%, 0.8);
-	--dry-color-stroke-brand-weak: hsla(15, 90%, 70%, 0.2);
 	--dry-color-on-brand: hsl(15, 30%, 10%);
 	--dry-color-focus-ring: hsla(15, 90%, 70%, 0.4);
 
 	/* ─── Accent — golden amber ───────────────────────────────────── */
-	--dry-color-accent: hsl(38, 88%, 68%);
-	--dry-color-text-accent: hsl(38, 88%, 68%);
 	--dry-color-fill-accent: hsl(38, 88%, 68%);
-	--dry-color-fill-accent-hover: hsl(38, 88%, 60%);
-	--dry-color-fill-accent-active: hsl(38, 88%, 54%);
 	--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-stroke-accent-weak: hsla(38, 88%, 68%, 0.2);
-	--dry-color-icon-accent: hsla(38, 88%, 68%, 0.8);
-	--dry-color-on-accent: hsl(38, 30%, 10%);
+	--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: 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);
+	--dry-color-on-error: hsl(8, 30%, 10%);
+
+	/* ─── 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);
+	--dry-color-on-warning: hsl(40, 80%, 12%);
+
+	/* ─── 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);
+	--dry-color-on-success: hsl(140, 30%, 8%);
+
+	/* ─── Status: Info ────────────────────────────────────────────── */
+	--dry-color-text-info: hsl(205, 65%, 70%);
+	--dry-color-fill-info: hsl(205, 65%, 56%);
+	--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%);
+	--dry-color-fill-purple: hsl(290, 70%, 70%);
+	--dry-color-fill-purple-weak: hsla(290, 70%, 70%, 0.15);
+	--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%);
 	--dry-color-bg-overlay: hsl(20, 10%, 17%);
-	--dry-color-bg-elevated: hsl(20, 8%, 21%);
 	--dry-color-bg-floating: hsl(20, 6%, 25%);
 	--dry-color-bg-sunken: hsl(20, 20%, 5%);
 
 	/* ─── Neutrals — warm white on dark ───────────────────────────── */
-	--dry-color-text-strong: hsla(30, 30%, 95%, 1);
-	--dry-color-text-weak: hsla(30, 20%, 90%, 0.72);
 	--dry-color-icon: hsla(30, 20%, 85%, 0.8);
-	--dry-color-stroke-strong: hsla(30, 15%, 80%, 0.5);
-	--dry-color-stroke-weak: hsla(30, 15%, 70%, 0.12);
 	--dry-color-fill: hsla(30, 15%, 80%, 0.06);
 	--dry-color-fill-hover: hsla(30, 15%, 80%, 0.1);
 	--dry-color-fill-active: hsla(30, 15%, 80%, 0.14);
@@ -164,8 +229,6 @@
 	/* ─── Shadows — warm deep ─────────────────────────────────────── */
 	--dry-shadow-raised: 0 1px 3px hsla(20, 40%, 5%, 0.5), 0 1px 2px hsla(20, 40%, 5%, 0.35);
 	--dry-shadow-overlay: 0 8px 24px hsla(20, 40%, 5%, 0.55), 0 2px 8px hsla(20, 40%, 5%, 0.4);
-	--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:
@@ -180,62 +243,25 @@
 	--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%;
+	--dry-color-glass-tint: hsla(20, 14%, 12%, 0.7);
+	--dry-glass-tint: var(--dry-color-glass-tint);
 	--dry-glass-saturation: 130%;
-	--dry-glass-border: hsla(30, 20%, 80%, 0.06);
-	--dry-glass-border-strong: hsla(30, 20%, 80%, 0.12);
 
 	/* ─── Glow — warm dark halos ──────────────────────────────────── */
 	--dry-glow-color: var(--dry-color-fill-brand);
-	--dry-glow-ring: 0 0 0 1px hsla(15, 90%, 70%, 0.25), 0 0 16px 3px hsla(15, 90%, 70%, 0.12);
-	--dry-glow-ring-accent: 0 0 0 1px hsla(38, 88%, 68%, 0.25), 0 0 16px 3px hsla(38, 88%, 68%, 0.12);
-	--dry-glow-ambient: hsla(15, 90%, 70%, 0.04);
-	--dry-glow-ambient-accent: hsla(38, 88%, 68%, 0.04);
 
 	/* ─── Gradient palette — warm dark ────────────────────────────── */
-	--dry-gradient-warm: linear-gradient(
-		135deg,
-		hsl(15, 85%, 70%) 0%,
-		hsl(38, 85%, 65%) 50%,
-		hsl(350, 55%, 65%) 100%
-	);
-	--dry-gradient-cool: linear-gradient(
-		135deg,
-		hsl(25, 45%, 70%) 0%,
-		hsl(350, 35%, 65%) 50%,
-		hsl(280, 25%, 60%) 100%
-	);
-	--dry-gradient-sunset: linear-gradient(
-		135deg,
-		hsl(45, 90%, 68%) 0%,
-		hsl(15, 85%, 62%) 40%,
-		hsl(345, 70%, 58%) 100%
-	);
-	--dry-gradient-ocean: linear-gradient(
-		135deg,
-		hsl(30, 65%, 62%) 0%,
-		hsl(10, 75%, 58%) 50%,
-		hsl(350, 55%, 55%) 100%
-	);
-	--dry-gradient-surface: linear-gradient(180deg, hsl(20, 18%, 8%) 0%, hsl(20, 14%, 12%) 100%);
 
 	/* ─── Grain — warm dark ───────────────────────────────────────── */
 	--dry-grain-opacity: 0.06;
-	--dry-grain-blend: soft-light;
 
 	/* ─── Typography — serif display ──────────────────────────────── */
 	--dry-font-display: 'Playfair Display', 'Georgia', 'Times New Roman', ui-serif, serif;
 
-	/* ─── Beam blend ──────────────────────────────────────────────── */
+	/* ─── Component: Toggle (dark thumb) + Beam (`screen` blend) ──── */
+	--dry-toggle-thumb-bg: #292b33;
 	--dry-beam-default-blend: screen;
 
 	/* ─── Overlay backdrops ───────────────────────────────────────── */
@@ -247,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/dist/themes/component-defaults.css

@@ -0,0 +1,47 @@
+/*
+ * Component defaults — opt-in.
+ *
+ * Mirrors the toggle and beam component tokens that ship inline in
+ * `default.css` / `dark.css` / `aurora.css`. Importing this file directly
+ * is only useful for consumers building a custom theme without
+ * `default.css`; otherwise the rules below are already loaded through the
+ * standard theme files.
+ */
+
+:root {
+	/* ─── Component: Toggle ─────────────────────────────────────────
+	   Derived from semantic tokens so brand overrides (e.g. a consumer
+	   retheming --dry-color-fill-brand) flow through to toggles too.
+	   Thumb bg is intentionally a neutral literal — it's a surface knob,
+	   not a brand-tinted element. */
+	--dry-toggle-track-bg: var(--dry-color-fill-brand-weak);
+	--dry-toggle-track-stroke: var(--dry-color-stroke-strong);
+	--dry-toggle-selected-bg: var(--dry-color-fill-brand);
+	--dry-toggle-selected-stroke: var(--dry-color-fill-brand);
+	--dry-toggle-thumb-bg: #ffffff;
+	--dry-toggle-disabled-fill: var(--dry-color-stroke-weak);
+	--dry-toggle-disabled-stroke: var(--dry-color-stroke-weak);
+	--dry-toggle-label-color: var(--dry-color-text-strong);
+	--dry-toggle-label-disabled-color: var(--dry-color-text-disabled);
+
+	/* ─── Component: Beam ─────────────────────────────────────────── */
+	--dry-beam-default-blend: multiply;
+}
+
+/* Dark-mode overrides: thumb is a dark surface knob, beam blend is
+   `screen` so the bloom adds rather than subtracts. Aurora-dark inherits
+   here too because it shares the dark surface story. */
+[data-theme='dark'],
+[data-theme='aurora-dark'] {
+	--dry-toggle-thumb-bg: #292b33;
+	--dry-beam-default-blend: screen;
+}
+
+.theme-auto:not([data-theme='light']) {
+	@media (prefers-color-scheme: dark) {
+		& {
+			--dry-toggle-thumb-bg: #292b33;
+			--dry-beam-default-blend: screen;
+		}
+	}
+}