@dryui/ui 4.0.0 → 4.0.2

package/src/themes/default.css

@@ -7,6 +7,8 @@
 }
 
 :root {
+	color-scheme: light;
+
 	/* ─── Public aliases (Tier 2, documented) ──────────────────────────
 	   Override at `:root` to retheme. Tier 3 tokens below derive via
 	   `var(--alias)` so overrides cascade. See skills/dryui-build/SKILL.md. */
@@ -124,7 +126,7 @@
 	--dry-color-fill-success-weak: hsla(145, 60%, 45%, 0.1);
 	--dry-color-stroke-success: hsl(145, 50%, 65%);
 	--dry-color-stroke-success-strong: hsla(145, 60%, 45%, 0.8);
-	--dry-color-on-success: #ffffff;
+	--dry-color-on-success: hsl(145, 60%, 12%);
 
 	/* ─── Status: Info (hue 210) ──────────────────────────────────── */
 	--dry-color-text-info: hsl(210, 70%, 35%);
@@ -132,12 +134,14 @@
 	--dry-color-fill-info-weak: hsla(210, 70%, 50%, 0.1);
 	--dry-color-stroke-info: hsl(210, 50%, 70%);
 	--dry-color-stroke-info-strong: hsla(210, 70%, 50%, 0.8);
+	--dry-color-on-info: hsl(210, 70%, 7%);
 
 	/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
 	--dry-color-fill-accent: hsl(25, 90%, 58%);
 	--dry-color-fill-accent-weak: hsla(25, 90%, 58%, 0.08);
 	--dry-color-stroke-accent: hsla(25, 90%, 58%, 0.5);
 	--dry-color-stroke-accent-strong: hsla(25, 90%, 58%, 0.8);
+	--dry-color-on-accent: hsl(25, 90%, 12%);
 
 	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 	--dry-color-text-purple: hsl(280, 60%, 38%);
@@ -146,6 +150,14 @@
 	--dry-color-stroke-purple: hsla(280, 65%, 55%, 0.5);
 	--dry-color-on-purple: #ffffff;
 
+	/* ─── 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, 80%, 12%);
+
 	/* ─── Extended surface depth ──────────────────────────────────── */
 	--dry-color-bg-floating: #ffffff;
 
@@ -448,6 +460,19 @@
 	--dry-scrollbar-width: 8px;
 }
 
+@supports (color: contrast-color(white)) {
+	:root {
+		--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));
+	}
+}
+
 :where([data-dry-type-mode='desktop']) {
 	--dry-type-display-size: 3.5rem;
 	--dry-type-display-leading: 4rem;

package/src/themes/midnight.css

@@ -12,6 +12,8 @@
 
 [data-theme='midnight'],
 .theme-midnight {
+	color-scheme: dark;
+
 	/* ─── Public aliases (midnight) ───────────────────────────────── */
 	--dry-color-primary: hsl(250, 70%, 75%);
 	--dry-color-primary-hover: hsl(250, 70%, 67%);
@@ -25,6 +27,7 @@
 	--dry-color-border-hover: hsla(240, 15%, 85%, 0.5);
 
 	/* ─── Brand — soft lavender ───────────────────────────────────── */
+	--dry-color-fill-brand: var(--dry-color-primary);
 	--dry-color-fill-brand-active: hsl(250, 70%, 62%);
 	--dry-color-fill-brand-weak: hsla(250, 70%, 75%, 0.08);
 	--dry-color-stroke-brand: hsla(250, 70%, 75%, 0.45);
@@ -37,10 +40,12 @@
 	--dry-color-fill-accent-weak: hsla(350, 60%, 70%, 0.08);
 	--dry-color-stroke-accent: hsla(350, 60%, 70%, 0.45);
 	--dry-color-stroke-accent-strong: hsla(350, 60%, 70%, 0.75);
+	--dry-color-on-accent: hsl(350, 30%, 8%);
 
 	/* ─── Status: Error ───────────────────────────────────────────── */
 	--dry-color-text-error: hsl(355, 70%, 72%);
-	--dry-color-fill-error-hover: hsl(355, 70%, 52%);
+	--dry-color-fill-error: var(--dry-color-danger);
+	--dry-color-fill-error-hover: hsl(355, 70%, 62%);
 	--dry-color-fill-error-weak: hsla(355, 70%, 60%, 0.12);
 	--dry-color-stroke-error: hsl(355, 50%, 55%);
 	--dry-color-stroke-error-strong: hsla(355, 70%, 60%, 0.8);
@@ -48,6 +53,7 @@
 
 	/* ─── Status: Warning ─────────────────────────────────────────── */
 	--dry-color-text-warning: hsl(38, 80%, 68%);
+	--dry-color-fill-warning: var(--dry-color-warning);
 	--dry-color-fill-warning-weak: hsla(38, 75%, 55%, 0.12);
 	--dry-color-stroke-warning: hsl(38, 55%, 55%);
 	--dry-color-stroke-warning-strong: hsla(38, 75%, 55%, 0.8);
@@ -55,6 +61,7 @@
 
 	/* ─── Status: Success ─────────────────────────────────────────── */
 	--dry-color-text-success: hsl(150, 55%, 68%);
+	--dry-color-fill-success: var(--dry-color-success);
 	--dry-color-fill-success-weak: hsla(150, 55%, 50%, 0.12);
 	--dry-color-stroke-success: hsl(150, 45%, 55%);
 	--dry-color-stroke-success-strong: hsla(150, 55%, 50%, 0.8);
@@ -66,6 +73,7 @@
 	--dry-color-fill-info-weak: hsla(215, 65%, 60%, 0.12);
 	--dry-color-stroke-info: hsl(215, 45%, 55%);
 	--dry-color-stroke-info-strong: hsla(215, 65%, 60%, 0.8);
+	--dry-color-on-info: hsl(215, 30%, 8%);
 
 	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 	--dry-color-text-purple: hsl(285, 70%, 78%);
@@ -74,6 +82,14 @@
 	--dry-color-stroke-purple: hsla(285, 70%, 70%, 0.5);
 	--dry-color-on-purple: hsl(285, 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(30, 30%, 8%);
+
 	/* ─── Backgrounds — deep layered dark ─────────────────────────── */
 	--dry-color-bg-base: hsl(240, 20%, 6%);
 	--dry-color-bg-raised: hsl(240, 15%, 10%);
@@ -145,3 +161,17 @@
 	--dry-toggle-selected-stroke: hsl(350, 60%, 70%);
 	--dry-toggle-thumb-bg: hsl(240, 20%, 8%);
 }
+
+@supports (color: contrast-color(white)) {
+	[data-theme='midnight'],
+	.theme-midnight {
+		--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/terminal.css

@@ -11,6 +11,8 @@
 
 [data-theme='terminal'],
 .theme-terminal {
+	color-scheme: dark;
+
 	/* ─── Public aliases (terminal) ───────────────────────────────── */
 	--dry-color-primary: hsl(145, 80%, 50%);
 	--dry-color-primary-hover: hsl(145, 80%, 42%);
@@ -24,6 +26,7 @@
 	--dry-color-border-hover: hsla(0, 0%, 100%, 0.4);
 
 	/* ─── Brand — terminal green ──────────────────────────────────── */
+	--dry-color-fill-brand: var(--dry-color-primary);
 	--dry-color-fill-brand-active: hsl(145, 80%, 36%);
 	--dry-color-fill-brand-weak: hsla(145, 80%, 50%, 0.08);
 	--dry-color-stroke-brand: hsla(145, 80%, 50%, 0.5);
@@ -36,6 +39,7 @@
 	--dry-color-fill-accent-weak: hsla(45, 90%, 55%, 0.08);
 	--dry-color-stroke-accent: hsla(45, 90%, 55%, 0.5);
 	--dry-color-stroke-accent-strong: hsla(45, 90%, 55%, 0.8);
+	--dry-color-on-accent: hsl(45, 30%, 5%);
 
 	/* ─── Backgrounds — pure black, minimal saturation ────────────── */
 	--dry-color-bg-base: hsl(0, 0%, 2%);
@@ -128,19 +132,22 @@
 
 	/* ─── Status overrides — more vivid for data-dense UIs ────────── */
 	--dry-color-text-error: hsl(0, 80%, 65%);
-	--dry-color-fill-error-hover: hsl(0, 80%, 47%);
+	--dry-color-fill-error: var(--dry-color-danger);
+	--dry-color-fill-error-hover: hsl(0, 80%, 58%);
 	--dry-color-fill-error-weak: hsla(0, 80%, 55%, 0.12);
 	--dry-color-stroke-error: hsl(0, 60%, 55%);
 	--dry-color-stroke-error-strong: hsla(0, 80%, 55%, 0.85);
 	--dry-color-on-error: hsl(0, 30%, 5%);
 
 	--dry-color-text-warning: hsl(45, 90%, 60%);
+	--dry-color-fill-warning: var(--dry-color-warning);
 	--dry-color-fill-warning-weak: hsla(45, 90%, 55%, 0.12);
 	--dry-color-stroke-warning: hsl(45, 70%, 55%);
 	--dry-color-stroke-warning-strong: hsla(45, 90%, 55%, 0.85);
 	--dry-color-on-warning: hsl(45, 30%, 5%);
 
 	--dry-color-text-success: hsl(145, 80%, 55%);
+	--dry-color-fill-success: var(--dry-color-success);
 	--dry-color-fill-success-weak: hsla(145, 80%, 50%, 0.12);
 	--dry-color-stroke-success: hsl(145, 60%, 50%);
 	--dry-color-stroke-success-strong: hsla(145, 80%, 50%, 0.85);
@@ -151,6 +158,7 @@
 	--dry-color-fill-info-weak: hsla(200, 80%, 55%, 0.12);
 	--dry-color-stroke-info: hsl(200, 60%, 55%);
 	--dry-color-stroke-info-strong: hsla(200, 80%, 55%, 0.85);
+	--dry-color-on-info: hsl(200, 30%, 5%);
 
 	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
 	--dry-color-text-purple: hsl(285, 80%, 70%);
@@ -158,4 +166,26 @@
 	--dry-color-fill-purple-weak: hsla(285, 75%, 60%, 0.12);
 	--dry-color-stroke-purple: hsla(285, 75%, 60%, 0.5);
 	--dry-color-on-purple: hsl(285, 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(30, 30%, 5%);
+}
+
+@supports (color: contrast-color(white)) {
+	[data-theme='terminal'],
+	.theme-terminal {
+		--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/time-input/index.ts

@@ -1,10 +1,14 @@
-export interface TimeInputProps {
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface TimeInputProps extends Omit<
+	HTMLAttributes<HTMLDivElement>,
+	'role' | 'aria-label'
+> {
 	value?: string;
 	disabled?: boolean;
 	step?: number;
 	size?: 'sm' | 'md' | 'lg';
 	name?: string;
-	class?: string;
 }
 
 export { default as TimeInput } from './time-input.svelte';

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

@@ -1,7 +1,7 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+/** DryUI agent metadata. Used by docs generation and skill manifests. */
 export default {
 	name: 'TimeInput',
-	description: 'Native time input with form control integration',
+	description: 'Segmented time input with select-based hour and minute controls',
 	category: 'input',
 	tags: ['time', 'input', 'form', 'clock']
 };

package/src/timeline/timeline.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: 'Timeline',
 	description: 'Vertical timeline for activity feeds and history',

package/src/toast/toast.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: 'Toast',
 	description: 'Temporary notification message',

package/src/toggle/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: 'Toggle',
 	description: 'Pressable toggle button',

package/src/toggle-group/toggle-group.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: 'ToggleGroup',
 	description: 'Group of toggle buttons with single/multiple selection',

package/src/token-scope/token-scope.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: 'TokenScope',
 	description: 'Render a wrapper that injects scoped CSS custom properties for its subtree',

package/src/toolbar/toolbar.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: 'Toolbar',
 	description: 'Horizontal button group for actions',

package/src/tooltip/tooltip.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: 'Tooltip',
 	description: 'Hover/focus popup with descriptive text',

package/src/tour/tour.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: 'Tour',
 	description: 'Step-by-step guided tour overlay with spotlight',

package/src/transfer/transfer.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: 'Transfer',
 	description: 'Dual-list transfer component for moving items between lists',

package/src/tree/tree.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: 'Tree',
 	description: 'Hierarchical tree view with expand/collapse',

package/src/typing-indicator/typing-indicator.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: 'TypingIndicator',
 	description: 'Animated three-dot typing status indicator',

package/src/typography/typography.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: 'Typography',
 	description: 'Standalone semantic text exports: heading, text, code, blockquote',

package/src/video-embed/video-embed.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: 'VideoEmbed',
 	description: 'Video player embed for YouTube, Vimeo, and native sources',

package/src/virtual-list/virtual-list.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: 'VirtualList',
 	description: 'Renders only visible items from large lists for performance',

package/src/visually-hidden/visually-hidden.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: 'VisuallyHidden',
 	description: 'Hides content visually but keeps it accessible to screen readers',