@dryui/ui 1.8.0 → 2.0.0

package/dist/navigation-menu/navigation-menu-item.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import {
-		setNavigationMenuItemCtx,
-		getNavigationMenuCtx,
-		generateFormId
-	} from './context.svelte.js';
+	import { setNavigationMenuItemCtx, getNavigationMenuCtx } from './context.svelte.js';
 
 	interface Props {
 		children: Snippet;
@@ -13,9 +9,10 @@
 	let { children }: Props = $props();
 
 	const ctx = getNavigationMenuCtx();
-	const itemId = generateFormId('nav-item');
-	const triggerId = generateFormId('nav-trigger');
-	const contentId = generateFormId('nav-content');
+	const uid = $props.id();
+	const itemId = `nav-item-${uid}`;
+	const triggerId = `nav-trigger-${uid}`;
+	const contentId = `nav-content-${uid}`;
 
 	setNavigationMenuItemCtx({
 		itemId,

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'NavigationMenu',
+    description: 'Site-level navigation with flyout content panels',
+    category: 'navigation',
+    tags: ['navigation', 'menu', 'flyout', 'mega-menu']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Noise',
+    description: 'Texture overlay that adds grain and atmosphere to surfaces without external assets',
+    category: 'layout',
+    tags: ['texture', 'grain', 'surface', 'overlay', 'shader-like']
+};

package/dist/notification-center/notification-center-root.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { setNotificationCenterCtx, type NotificationItem } from './context.svelte.js';
 
 	interface Props {
@@ -15,8 +14,9 @@
 		children
 	}: Props = $props();
 
-	const triggerId = generateFormId('nc-trigger');
-	const panelId = generateFormId('nc-panel');
+	const uid = $props.id();
+	const triggerId = `nc-trigger-${uid}`;
+	const panelId = `nc-panel-${uid}`;
 
 	const unreadCount = $derived(items.filter((item) => !item.read).length);
 

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'NotificationCenter',
+    description: 'Notification panel with trigger, groups, and items',
+    category: 'overlay',
+    tags: ['notification', 'bell', 'alerts', 'inbox', 'popover', 'unread', 'feedback', 'status']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'NumberInput',
+    description: 'Numeric input with increment/decrement controls',
+    category: 'input',
+    tags: ['form', 'number', 'input', 'counter']
+};

package/dist/numeric/index.d.ts

@@ -0,0 +1 @@
+export { default as Numeric } from './numeric.svelte';

package/dist/numeric/index.js

@@ -0,0 +1 @@
+export { default as Numeric } from './numeric.svelte';

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Numeric',
+    description: 'Tabular-nums numeric display with optional stable min-width and alignment',
+    category: 'display',
+    tags: ['numeric', 'tabular', 'number', 'stable', 'align']
+};

package/dist/numeric/numeric.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	interface Props {
+		value: number | string;
+		stable?: boolean;
+		align?: 'start' | 'center' | 'end';
+		minDigits?: number;
+	}
+
+	let { value, stable = false, align = 'end', minDigits }: Props = $props();
+
+	const minWidth = $derived.by(() => {
+		if (!stable) return undefined;
+		const digits = minDigits ?? String(value).replace(/[^\d]/g, '').length;
+		return `${digits * 0.6}em`;
+	});
+
+	function applyStyles(node: HTMLElement) {
+		$effect(() => {
+			if (minWidth) {
+				node.style.setProperty('min-width', minWidth);
+			} else {
+				node.style.removeProperty('min-width');
+			}
+		});
+	}
+</script>
+
+<span class="dry-numeric dry-tabular-nums" data-align={align} {@attach applyStyles}>
+	{value}
+</span>
+
+<style>
+	.dry-numeric {
+		display: inline-block;
+		font-variant-numeric: var(--dry-numeric-variant);
+	}
+
+	[data-align='end'] {
+		text-align: end;
+	}
+
+	[data-align='center'] {
+		text-align: center;
+	}
+
+	[data-align='start'] {
+		text-align: start;
+	}
+</style>

package/dist/numeric/numeric.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    value: number | string;
+    stable?: boolean;
+    align?: 'start' | 'center' | 'end';
+    minDigits?: number;
+}
+declare const Numeric: import("svelte").Component<Props, {}, "">;
+type Numeric = ReturnType<typeof Numeric>;
+export default Numeric;

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'OptionPicker',
+    description: 'Selectable option tiles with preview, label, and description for presets, fonts, shapes, and other visual choices',
+    category: 'input',
+    tags: ['picker', 'selection', 'options', 'tiles', 'preset', 'preview']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Pagination',
+    description: 'Page navigation with previous/next and page links',
+    category: 'navigation',
+    tags: ['nav', 'pages', 'paging', 'navigation']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'PhoneInput',
+    description: 'Phone number input with country code selector',
+    category: 'input',
+    tags: ['form', 'phone', 'telephone', 'input', 'country-code', 'international']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'PinInput',
+    description: 'Segmented input for PIN/OTP codes with single hidden input architecture',
+    category: 'input',
+    tags: ['form', 'pin', 'otp', 'code', 'verification']
+};

package/dist/popover/popover-content.svelte

@@ -54,10 +54,11 @@
 </div>
 
 <style>
+	/* outer: var(--dry-radius-popover); children inside the padded region use var(--dry-radius-nested-popover). */
 	[data-popover-content] {
 		--dry-popover-bg: var(--dry-overlay-bg, var(--dry-color-bg-overlay));
 		--dry-popover-border: var(--dry-overlay-border, var(--dry-color-stroke-weak));
-		--dry-popover-radius: var(--dry-overlay-radius, var(--dry-radius-lg));
+		--dry-popover-radius: var(--dry-overlay-radius, var(--dry-radius-popover));
 		--dry-popover-shadow: var(--dry-overlay-shadow, var(--dry-shadow-lg));
 		--dry-popover-padding: var(--dry-space-4);
 		--dry-radius-nested: max(

package/dist/popover/popover-root.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { setPopoverCtx } from './context.svelte.js';
 
 	interface Props {
@@ -10,8 +9,9 @@
 
 	let { open = $bindable(false), children }: Props = $props();
 
-	const triggerId = generateFormId('popover-trigger');
-	const contentId = generateFormId('popover-content');
+	const uid = $props.id();
+	const triggerId = `popover-trigger-${uid}`;
+	const contentId = `popover-content-${uid}`;
 
 	setPopoverCtx({
 		get open() {

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Popover',
+    description: 'Floating content panel anchored to a trigger',
+    category: 'overlay',
+    tags: ['popup', 'floating', 'tooltip', 'popover']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Portal',
+    description: 'Renders children into a different DOM location',
+    category: 'utility',
+    tags: ['teleport', 'portal', 'mount', 'target']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Progress',
+    description: 'Progress bar indicator',
+    category: 'feedback',
+    tags: ['loading', 'progress', 'bar', 'percentage']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ProgressRing',
+    description: 'Circular progress ring with SVG rendering',
+    category: 'feedback',
+    tags: ['progress', 'ring', 'circular', 'loading']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'PromptInput',
+    description: 'AI-style prompt input with auto-resize and submit',
+    category: 'input',
+    tags: ['prompt', 'input', 'chat', 'ai', 'textarea']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'QRCode',
+    description: 'QR code generator using Canvas 2D API',
+    category: 'display',
+    tags: ['qr', 'code', 'barcode', 'canvas', 'generate']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'RadioGroup',
+    description: 'Single selection from multiple options',
+    category: 'input',
+    tags: ['form', 'radio', 'select', 'option', 'group']
+};

package/dist/radio-group/radio-group.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createId } from '@dryui/primitives';
 	import { setRadioGroupCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -25,7 +24,8 @@
 		...rest
 	}: Props = $props();
 
-	const fallbackName = createId('dryui-radio');
+	const uid = $props.id();
+	const fallbackName = `dryui-radio-${uid}`;
 	const groupName = $derived(name ?? fallbackName);
 
 	setRadioGroupCtx({

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'RangeCalendar',
+    description: 'Calendar for selecting date ranges',
+    category: 'form',
+    tags: ['date', 'range', 'calendar', 'selection']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Rating',
+    description: 'Star rating input with half-star support',
+    category: 'input',
+    tags: ['form', 'stars', 'rating', 'review', 'score']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'RelativeTime',
+    description: 'Displays relative time with auto-updating',
+    category: 'display',
+    tags: ['time', 'relative', 'ago', 'auto-update']
+};

package/dist/relative-time/relative-time.svelte

@@ -65,6 +65,7 @@
 		color: var(--dry-relative-time-color);
 		font-size: var(--dry-relative-time-font-size);
 		font-family: var(--dry-font-sans);
+		font-variant-numeric: var(--dry-numeric-variant);
 		line-height: var(--dry-type-small-leading);
 	}
 </style>

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Reveal',
+    description: 'IntersectionObserver-powered entry transitions with reduced-motion and no-dependency fallbacks',
+    category: 'display',
+    tags: ['animation', 'reveal', 'intersection-observer', 'stagger', 'motion']
+};

package/dist/rich-text-editor/rich-text-editor-content.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { getRichTextEditorCtx } from '@dryui/primitives/rich-text-editor';
+	import {
+		getRichTextEditorCtx,
+		setSanitizedRichTextHtml
+	} from '@dryui/primitives/rich-text-editor';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {}
 
@@ -12,17 +15,19 @@
 
 	// Register the content element with the context
 	$effect(() => {
-		if (contentEl) {
-			ctx.contentEl = contentEl;
-		}
+		if (!contentEl) return;
+		ctx.contentEl = contentEl;
+		return () => {
+			if (ctx.contentEl === contentEl) ctx.contentEl = null;
+		};
 	});
 
 	// Sync value into contenteditable (also clears hint elements on mount)
 	$effect(() => {
 		if (!contentEl) return;
-		const html = ctx.html || '';
+		const html = ctx.sanitizeHtml(ctx.html || '');
 		if (contentEl.innerHTML !== html && document.activeElement !== contentEl) {
-			contentEl.innerHTML = html;
+			setSanitizedRichTextHtml(contentEl, html);
 		}
 	});
 
@@ -96,8 +101,11 @@
 	onkeydown={handleKeydown}
 	{...rest}
 >
+	<!-- dryui-allow raw-heading: hidden seed nodes make Svelte retain scoped styles for sanitized contenteditable HTML. -->
 	<h1>.</h1>
+	<!-- dryui-allow raw-heading: hidden seed nodes make Svelte retain scoped styles for sanitized contenteditable HTML. -->
 	<h2>.</h2>
+	<!-- dryui-allow raw-heading: hidden seed nodes make Svelte retain scoped styles for sanitized contenteditable HTML. -->
 	<h3>.</h3>
 	<p></p>
 	<ul><li></li></ul>