@dryui/ui 3.0.0 → 4.0.1

package/dist/markdown-renderer/markdown-renderer.svelte

@@ -16,17 +16,11 @@
 {#snippet renderNodes(items: MarkdownNode[])}
 	{#each items as node}
 		{#if node.type === 'heading'}
-			<!-- dryui-allow raw-heading: MarkdownRenderer maps parsed markdown heading nodes to their semantic HTML tag. -->
 			{#if node.level === 1}<h1>{@html node.content}</h1>
-				<!-- dryui-allow raw-heading: MarkdownRenderer maps parsed markdown heading nodes to their semantic HTML tag. -->
 			{:else if node.level === 2}<h2>{@html node.content}</h2>
-				<!-- dryui-allow raw-heading: MarkdownRenderer maps parsed markdown heading nodes to their semantic HTML tag. -->
 			{:else if node.level === 3}<h3>{@html node.content}</h3>
-				<!-- dryui-allow raw-heading: MarkdownRenderer maps parsed markdown heading nodes to their semantic HTML tag. -->
 			{:else if node.level === 4}<h4>{@html node.content}</h4>
-				<!-- dryui-allow raw-heading: MarkdownRenderer maps parsed markdown heading nodes to their semantic HTML tag. -->
 			{:else if node.level === 5}<h5>{@html node.content}</h5>
-				<!-- dryui-allow raw-heading: MarkdownRenderer maps parsed markdown heading nodes to their semantic HTML tag. -->
 			{:else}<h6>{@html node.content}</h6>
 			{/if}
 		{:else if node.type === 'paragraph'}
@@ -61,165 +55,148 @@
 
 <style>
 	[data-markdown-renderer-root] {
-		/* Component tokens (Tier 3) — use semantic tokens so dark mode works */
-		--dry-markdown-color: var(--dry-color-text-strong);
-		--dry-markdown-heading-color: var(--dry-color-text-strong);
-		--dry-markdown-link-color: var(--dry-color-fill-brand);
-		--dry-markdown-link-hover-color: var(--dry-color-fill-brand-hover);
-		--dry-markdown-code-bg: var(--dry-color-bg-raised);
-		--dry-markdown-code-color: var(--dry-color-text-weak);
-		--dry-markdown-code-border: var(--dry-color-stroke-weak);
-		--dry-markdown-blockquote-border: var(--dry-color-stroke-weak);
-		--dry-markdown-blockquote-color: var(--dry-color-text-weak);
-		--dry-markdown-hr-color: var(--dry-color-stroke-weak);
-		--dry-markdown-font-size: var(--dry-type-small-size, var(--dry-type-small-size));
-		--dry-markdown-line-height: var(--dry-type-small-leading, var(--dry-type-small-leading));
-		--dry-markdown-max-width: 65ch;
-
 		display: grid;
-		grid-template-columns: minmax(0, var(--dry-markdown-max-width));
+		grid-template-columns: minmax(0, var(--dry-markdown-max-width, 65ch));
 		font-family: var(--dry-font-sans);
-		font-size: var(--dry-markdown-font-size);
-		line-height: var(--dry-markdown-line-height);
-		color: var(--dry-markdown-color);
-	}
-
-	[data-markdown-renderer-root] :global {
-		/* ── Headings ─────────────────────────────────────────────────────────────── */
-
-		h1,
-		h2,
-		h3,
-		h4,
-		h5,
-		h6 {
-			color: var(--dry-markdown-heading-color);
-			font-weight: 600;
-			line-height: 1.25;
-			margin-top: 1.5em;
-			margin-bottom: 0.5em;
-		}
-
-		h1 {
-			font-size: var(--dry-type-heading-2-size, var(--dry-type-heading-2-size));
-			margin-top: 0;
-		}
-
-		h2 {
-			font-size: var(--dry-type-heading-2-size, var(--dry-type-heading-2-size));
-			padding-bottom: 0.25em;
-			border-bottom: 1px solid var(--dry-markdown-hr-color);
-		}
-
-		h3 {
-			font-size: var(--dry-type-heading-3-size, var(--dry-type-heading-3-size));
-		}
-
-		h4 {
-			font-size: var(--dry-type-heading-4-size, var(--dry-type-heading-4-size));
-		}
-
-		h5 {
-			font-size: var(--dry-markdown-font-size);
-		}
-
-		h6 {
-			font-size: var(--dry-type-small-size, var(--dry-type-small-size));
-			color: var(--dry-color-text-weak);
-		}
-
-		/* ── Paragraph ────────────────────────────────────────────────────────────── */
-
-		p {
-			margin-top: 0;
-			margin-bottom: 1em;
-		}
-
-		/* ── Links ────────────────────────────────────────────────────────────────── */
-
-		a {
-			color: var(--dry-markdown-link-color);
-			text-decoration: underline;
-			text-underline-offset: 2px;
-
-			&:hover {
-				color: var(--dry-markdown-link-hover-color);
-			}
-		}
-
-		/* ── Images ───────────────────────────────────────────────────────────────── */
-
-		img {
-			height: auto;
-			border-radius: var(--dry-radius-md);
-			margin-top: 0.5em;
-			margin-bottom: 0.5em;
-		}
-
-		/* ── Lists ────────────────────────────────────────────────────────────────── */
-
-		ul,
-		ol {
-			margin-top: 0;
-			margin-bottom: 1em;
-			padding-left: 1.5em;
-		}
-
-		li {
-			margin-bottom: 0.25em;
-		}
-
-		ul {
-			list-style-type: disc;
-		}
-
-		ol {
-			list-style-type: decimal;
-		}
-
-		/* ── Blockquotes ──────────────────────────────────────────────────────────── */
-
-		blockquote {
-			margin: 0 0 1em 0;
-			padding: var(--dry-space-2) var(--dry-space-4);
-			border-left: 3px solid var(--dry-markdown-blockquote-border);
-			color: var(--dry-markdown-blockquote-color);
-		}
-
-		blockquote p:last-child {
-			margin-bottom: 0;
-		}
-
-		/* ── Inline code ──────────────────────────────────────────────────────────── */
-
-		code {
-			font-family: var(--dry-font-mono);
-			font-size: 0.875em;
-			padding: 0.125em 0.375em;
-			background: var(--dry-markdown-code-bg);
-			color: var(--dry-markdown-code-color);
-			border: 1px solid var(--dry-markdown-code-border);
-			border-radius: var(--dry-radius-sm);
-		}
-
-		/* Reset inline code styles inside CodeBlock */
-		[data-code-block] code {
-			padding: 0;
-			background: none;
-			color: inherit;
-			border: none;
-			border-radius: 0;
-		}
-
-		/* ── Strong & Em ──────────────────────────────────────────────────────────── */
-
-		strong {
-			font-weight: 600;
-			color: var(--dry-markdown-heading-color);
-		}
-
-		em {
-			font-style: italic;
-		}
+		font-size: var(--dry-markdown-font-size, var(--dry-type-small-size));
+		line-height: var(--dry-markdown-line-height, var(--dry-type-small-leading));
+		color: var(--dry-markdown-color, var(--dry-color-text-strong));
+	}
+
+	/* ── Headings ─────────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(h1),
+	[data-markdown-renderer-root] :global(h2),
+	[data-markdown-renderer-root] :global(h3),
+	[data-markdown-renderer-root] :global(h4),
+	[data-markdown-renderer-root] :global(h5),
+	[data-markdown-renderer-root] :global(h6) {
+		color: var(--dry-markdown-heading-color, var(--dry-color-text-strong));
+		font-weight: 600;
+		line-height: 1.25;
+		margin-top: 1.5em;
+		margin-bottom: 0.5em;
+	}
+
+	[data-markdown-renderer-root] :global(h1) {
+		font-size: var(--dry-type-heading-2-size);
+		margin-top: 0;
+	}
+
+	[data-markdown-renderer-root] :global(h2) {
+		font-size: var(--dry-type-heading-2-size);
+		padding-bottom: 0.25em;
+		border-bottom: 1px solid var(--dry-markdown-hr-color, var(--dry-color-stroke-weak));
+	}
+
+	[data-markdown-renderer-root] :global(h3) {
+		font-size: var(--dry-type-heading-3-size);
+	}
+
+	[data-markdown-renderer-root] :global(h4) {
+		font-size: var(--dry-type-heading-4-size);
+	}
+
+	[data-markdown-renderer-root] :global(h5) {
+		font-size: var(--dry-markdown-font-size, var(--dry-type-small-size));
+	}
+
+	[data-markdown-renderer-root] :global(h6) {
+		font-size: var(--dry-type-small-size);
+		color: var(--dry-color-text-weak);
+	}
+
+	/* ── Paragraph ────────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(p) {
+		margin-top: 0;
+		margin-bottom: 1em;
+	}
+
+	/* ── Links ────────────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(a) {
+		color: var(--dry-markdown-link-color, var(--dry-color-fill-brand));
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+
+	[data-markdown-renderer-root] :global(a:hover) {
+		color: var(--dry-markdown-link-hover-color, var(--dry-color-fill-brand-hover));
+	}
+
+	/* ── Images ───────────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(img) {
+		height: auto;
+		border-radius: var(--dry-radius-md);
+		margin-top: 0.5em;
+		margin-bottom: 0.5em;
+	}
+
+	/* ── Lists ────────────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(ul),
+	[data-markdown-renderer-root] :global(ol) {
+		margin-top: 0;
+		margin-bottom: 1em;
+		padding-left: 1.5em;
+	}
+
+	[data-markdown-renderer-root] :global(li) {
+		margin-bottom: 0.25em;
+	}
+
+	[data-markdown-renderer-root] :global(ul) {
+		list-style-type: disc;
+	}
+
+	[data-markdown-renderer-root] :global(ol) {
+		list-style-type: decimal;
+	}
+
+	/* ── Blockquotes ──────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(blockquote) {
+		margin: 0 0 1em 0;
+		padding: var(--dry-space-2) var(--dry-space-4);
+		border-left: 3px solid var(--dry-markdown-blockquote-border, var(--dry-color-stroke-weak));
+		color: var(--dry-markdown-blockquote-color, var(--dry-color-text-weak));
+	}
+
+	[data-markdown-renderer-root] :global(blockquote p:last-child) {
+		margin-bottom: 0;
+	}
+
+	/* ── Inline code ──────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(code) {
+		font-family: var(--dry-font-mono);
+		font-size: 0.875em;
+		padding: 0.125em 0.375em;
+		background: var(--dry-markdown-code-bg, var(--dry-color-bg-raised));
+		color: var(--dry-markdown-code-color, var(--dry-color-text-weak));
+		border: 1px solid var(--dry-markdown-code-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-radius-sm);
+	}
+
+	/* Reset inline code styles inside CodeBlock */
+	[data-markdown-renderer-root] :global([data-code-block] code) {
+		padding: 0;
+		background: none;
+		color: inherit;
+		border: none;
+		border-radius: 0;
+	}
+
+	/* ── Strong & Em ──────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(strong) {
+		font-weight: 600;
+		color: var(--dry-markdown-heading-color, var(--dry-color-text-strong));
+	}
+
+	[data-markdown-renderer-root] :global(em) {
+		font-style: italic;
 	}
 </style>

package/dist/marquee/marquee.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
 		observeInViewport,
 		observePageVisibility,
 		observeReducedMotionPreference
-	} from '@dryui/primitives/internal/motion';
+	} from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		speed?: number;
@@ -39,7 +38,7 @@
 	const duration = $derived(contentSize > 0 && speed > 0 ? contentSize / speed : 0);
 	const paused = $derived(!onScreen || !tabVisible);
 
-	onMount(() => {
+	$effect(() => {
 		const unsubscribeMotion = observeReducedMotionPreference((matches) => {
 			prefersReducedMotion = matches;
 		});
@@ -81,9 +80,9 @@
 
 	function applyRootStyles(node: HTMLElement) {
 		$effect(() => {
-			node.style.setProperty('--marquee-duration', `${duration}s`);
-			node.style.setProperty('--marquee-gap', gap);
-			node.style.setProperty('--marquee-shift', `${contentSize}px`);
+			node.style.setProperty('--_marquee-duration', `${duration}s`);
+			node.style.setProperty('--_marquee-gap', gap);
+			node.style.setProperty('--_marquee-shift', `${contentSize}px`);
 		});
 	}
 
@@ -119,8 +118,8 @@
 <style>
 	[data-marquee] {
 		/* Component tokens (Tier 3) */
-		--dry-marquee-gap: var(--marquee-gap, 1rem);
-		--dry-marquee-speed: var(--marquee-duration, 10s);
+		--dry-marquee-gap: var(--_marquee-gap, 1rem);
+		--dry-marquee-speed: var(--_marquee-duration, 10s);
 
 		overflow: hidden;
 		position: relative;
@@ -143,18 +142,18 @@
 	[data-marquee-content] {
 		display: grid;
 		grid-auto-flow: var(--_flow, column);
-		gap: var(--marquee-gap, 1rem);
+		gap: var(--_marquee-gap, 1rem);
 	}
 
 	/* Trailing padding on content (not gap on track) keeps the keyframe loop seamless. */
 	[data-marquee][data-direction='left'] [data-marquee-content],
 	[data-marquee][data-direction='right'] [data-marquee-content] {
-		padding-inline-end: var(--marquee-gap, 1rem);
+		padding-inline-end: var(--_marquee-gap, 1rem);
 	}
 
 	[data-marquee][data-direction='up'] [data-marquee-content],
 	[data-marquee][data-direction='down'] [data-marquee-content] {
-		padding-block-end: var(--marquee-gap, 1rem);
+		padding-block-end: var(--_marquee-gap, 1rem);
 	}
 
 	[data-marquee][data-direction='left'] [data-marquee-track],
@@ -185,7 +184,7 @@
 			transform: translateX(0);
 		}
 		to {
-			transform: translateX(calc(-1 * var(--marquee-shift, 0px)));
+			transform: translateX(calc(-1 * var(--_marquee-shift, 0px)));
 		}
 	}
 
@@ -194,7 +193,7 @@
 			transform: translateY(0);
 		}
 		to {
-			transform: translateY(calc(-1 * var(--marquee-shift, 0px)));
+			transform: translateY(calc(-1 * var(--_marquee-shift, 0px)));
 		}
 	}
 

package/dist/mask-reveal/mask-reveal.svelte

@@ -1,11 +1,7 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import {
-		getReducedMotionPreference,
-		observeReducedMotionPreference
-	} from '@dryui/primitives/internal/motion';
+	import { getReducedMotionPreference, observeReducedMotionPreference } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		shape?: 'circle' | 'linear' | 'diagonal' | 'diamond';
@@ -27,30 +23,21 @@
 		...rest
 	}: Props = $props();
 
-	let element = $state<HTMLDivElement | null>(null);
+	let element = $state<HTMLDivElement>();
+	let durationEl = $state<HTMLDivElement>();
 	let revealed = $state(false);
 	let prefersReducedMotion = $state(false);
 
-	function captureElement(node: HTMLDivElement) {
-		element = node;
-		return {
-			destroy() {
-				if (element === node) element = null;
-			}
-		};
-	}
-
-	function applyDuration(node: HTMLDivElement) {
-		$effect(() => {
-			if (typeof duration === 'number') {
-				node.style.setProperty('--dry-mask-reveal-duration', `${Math.max(0, duration)}ms`);
-			} else {
-				node.style.removeProperty('--dry-mask-reveal-duration');
-			}
-		});
-	}
+	$effect(() => {
+		if (!durationEl) return;
+		if (typeof duration === 'number') {
+			durationEl.style.setProperty('--dry-mask-reveal-duration', `${Math.max(0, duration)}ms`);
+		} else {
+			durationEl.style.removeProperty('--dry-mask-reveal-duration');
+		}
+	});
 
-	onMount(() => {
+	$effect(() => {
 		const stopMotionObserver = observeReducedMotionPreference((matches) => {
 			prefersReducedMotion = matches;
 			if (matches) revealed = true;
@@ -96,9 +83,9 @@
 	});
 </script>
 
-<div {@attach captureElement} class={className} data-mask-reveal-root {...rest}>
+<div bind:this={element} class={className} data-mask-reveal-root {...rest}>
 	<div
-		{@attach applyDuration}
+		bind:this={durationEl}
 		data-mask-reveal
 		data-shape={shape}
 		data-direction={direction}

package/dist/mega-menu/mega-menu-column.svelte

@@ -28,7 +28,7 @@
 		font-weight: 700;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: var(--dry-color-text-weak, #64748b);
+		color: var(--dry-color-text-weak);
 		padding-bottom: var(--dry-space-1, 0.25rem);
 	}
 </style>

package/dist/mega-menu/mega-menu-link.svelte

@@ -80,8 +80,8 @@
 
 	[data-mega-menu-link]:hover,
 	[data-mega-menu-link]:focus-visible {
-		background: var(--dry-mega-menu-link-hover-bg, var(--dry-color-bg-overlay, #f3f4f6));
-		border-color: var(--dry-mega-menu-link-hover-border, var(--dry-color-stroke-weak, #e2e8f0));
+		background: var(--dry-mega-menu-link-hover-bg, var(--dry-color-bg-overlay));
+		border-color: var(--dry-mega-menu-link-hover-border, var(--dry-color-stroke-weak));
 		box-shadow: var(--dry-mega-menu-link-hover-shadow, none);
 	}
 
@@ -90,11 +90,11 @@
 	[data-mega-menu-link][aria-current='true'] {
 		background: var(
 			--dry-mega-menu-link-selected-bg,
-			var(--dry-mega-menu-link-hover-bg, var(--dry-color-bg-overlay, #f3f4f6))
+			var(--dry-mega-menu-link-hover-bg, var(--dry-color-bg-overlay))
 		);
 		border-color: var(
 			--dry-mega-menu-link-selected-border,
-			var(--dry-mega-menu-link-hover-border, var(--dry-color-stroke-weak, #e2e8f0))
+			var(--dry-mega-menu-link-hover-border, var(--dry-color-stroke-weak))
 		);
 		box-shadow: var(
 			--dry-mega-menu-link-selected-shadow,
@@ -109,7 +109,7 @@
 	[data-mega-menu-link][data-selected] [data-part='link-icon'],
 	[data-mega-menu-link][aria-pressed='true'] [data-part='link-icon'],
 	[data-mega-menu-link][aria-current='true'] [data-part='link-icon'] {
-		color: var(--dry-color-text-strong, #1a1a2e);
+		color: var(--dry-color-text-strong);
 	}
 
 	[data-mega-menu-link] [data-part='link-content'] {
@@ -120,7 +120,7 @@
 	[data-mega-menu-link] [data-part='link-text'] {
 		font-size: var(--dry-type-ui-control-size, var(--dry-text-sm-size, 0.875rem));
 		font-weight: 500;
-		color: var(--dry-color-text-strong, #1a1a2e);
+		color: var(--dry-color-text-strong);
 	}
 
 	[data-mega-menu-link][data-selected] [data-part='link-text'],
@@ -132,6 +132,6 @@
 	[data-mega-menu-link] [data-part='link-description'] {
 		display: block;
 		font-size: var(--dry-type-ui-caption-size, var(--dry-text-xs-size, 0.75rem));
-		color: var(--dry-color-text-weak, #64748b);
+		color: var(--dry-color-text-weak);
 	}
 </style>

package/dist/mega-menu/mega-menu-panel.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { fromAction } from 'svelte/attachments';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { createPositionedPopover } from '@dryui/primitives';
 	import { getMegaMenuCtx, getMegaMenuItemCtx } from './context.svelte.js';
@@ -23,7 +22,7 @@
 	const ctx = getMegaMenuCtx();
 	const itemCtx = getMegaMenuItemCtx();
 
-	let panelEl = $state<HTMLDivElement | null>(null);
+	let panelEl = $state<HTMLDivElement>();
 	let layout = $state<'columns' | 'stacked'>('columns');
 	const STACK_THRESHOLD = 32 * 16;
 
@@ -38,7 +37,7 @@
 		offset: () => 4
 	});
 
-	function watchLayout(node: HTMLDivElement) {
+	$effect(() => {
 		const update = () => {
 			const next = window.innerWidth < STACK_THRESHOLD ? 'stacked' : 'columns';
 			if (next !== layout) layout = next;
@@ -46,7 +45,17 @@
 		update();
 		window.addEventListener('resize', update);
 		return () => window.removeEventListener('resize', update);
-	}
+	});
+
+	$effect(() => {
+		const node = panelEl;
+		if (!node) return;
+		if (itemCtx.open && !node.matches(':popover-open')) {
+			popover.showPopover(node);
+		} else if (!itemCtx.open && node.matches(':popover-open')) {
+			popover.hidePopover(node);
+		}
+	});
 
 	function handlePointerEnter() {
 		ctx.openItem(itemCtx.itemId, itemCtx.triggerId);
@@ -55,34 +64,12 @@
 	function handlePointerLeave() {
 		ctx.closeItem();
 	}
-
-	function attachPanel(node: HTMLDivElement) {
-		panelEl = node;
-
-		return () => {
-			if (panelEl === node) {
-				panelEl = null;
-			}
-		};
-	}
-
-	function syncPopover(isOpen: boolean) {
-		return (node: HTMLDivElement) => {
-			if (isOpen && !node.matches(':popover-open')) {
-				popover.showPopover(node);
-			} else if (!isOpen && node.matches(':popover-open')) {
-				popover.hidePopover(node);
-			}
-		};
-	}
 </script>
 
 {#if itemCtx.open}
 	<div
-		{@attach attachPanel}
-		{@attach syncPopover(itemCtx.open)}
-		{@attach fromAction(popover.applyPosition, () => style)}
-		{@attach watchLayout}
+		bind:this={panelEl}
+		use:popover.applyPosition={style}
 		id={itemCtx.panelId}
 		role="group"
 		popover="manual"
@@ -112,12 +99,11 @@
 		inset: unset;
 		margin: 0;
 		z-index: var(--dry-layer-overlay, 50);
-		background: var(--dry-mega-menu-panel-bg, var(--dry-color-bg-overlay, white));
-		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
+		background: var(--dry-mega-menu-panel-bg, var(--dry-color-bg-overlay));
+		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-lg, 0.5rem);
-		box-shadow: var(--dry-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+		box-shadow: var(--dry-shadow-lg);
 		padding: var(--dry-space-4, 1rem);
-		/* dryui-allow width: viewport cap for the anchored floating panel, not a child-layout sizing rule. */
 		max-inline-size: var(--dry-mega-menu-panel-max-width, min(92vw, 60rem));
 		display: grid;
 		grid-auto-flow: column;