@dryui/ui 1.9.0 → 2.0.1

package/dist/date-field/date-field-segment.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getDateFieldCtx, type DateSegmentType } from './context.svelte.js';
 
@@ -25,12 +26,31 @@
 	);
 
 	let inputBuffer = '';
-	let bufferTimeout: ReturnType<typeof setTimeout>;
+	let segmentEl: HTMLSpanElement | undefined;
+	let bufferTimeout: ReturnType<typeof setTimeout> | undefined;
+
+	function clearBufferTimeout() {
+		if (bufferTimeout === undefined) return;
+		clearTimeout(bufferTimeout);
+		bufferTimeout = undefined;
+	}
+
+	function resetInputBuffer() {
+		clearBufferTimeout();
+		inputBuffer = '';
+	}
+
+	onDestroy(resetInputBuffer);
 
 	function registerSegment(node: HTMLSpanElement) {
+		segmentEl = node;
 		ctx.registerSegment(type, node);
+		node.addEventListener('blur', resetInputBuffer);
 		return {
 			destroy() {
+				node.removeEventListener('blur', resetInputBuffer);
+				resetInputBuffer();
+				if (segmentEl === node) segmentEl = undefined;
 				ctx.unregisterSegment(type);
 			}
 		};
@@ -77,21 +97,21 @@
 				break;
 			case 'Backspace': {
 				e.preventDefault();
-				inputBuffer = '';
+				resetInputBuffer();
 				ctx.updateSegment(type, minValue);
 				break;
 			}
 			default: {
 				if (/^\d$/.test(e.key)) {
 					e.preventDefault();
-					clearTimeout(bufferTimeout);
+					clearBufferTimeout();
 					inputBuffer += e.key;
 					const num = parseInt(inputBuffer, 10);
 					const maxDigits = type === 'year' ? 4 : 2;
 
 					if (inputBuffer.length >= maxDigits || num > maxValue) {
 						ctx.updateSegment(type, Math.min(Math.max(num, minValue), maxValue));
-						inputBuffer = '';
+						resetInputBuffer();
 						// Auto-advance to next segment
 						if (type !== 'year') {
 							ctx.focusSegment(type, 'next');
@@ -100,6 +120,8 @@
 						ctx.updateSegment(type, num);
 						bufferTimeout = setTimeout(() => {
 							inputBuffer = '';
+							bufferTimeout = undefined;
+							if (document.activeElement !== segmentEl) return;
 							if (type !== 'year') {
 								ctx.focusSegment(type, 'next');
 							}

package/dist/date-picker/datepicker-input-root.svelte

@@ -27,6 +27,7 @@
 		disabled = false,
 		children
 	}: Props = $props();
+	const uid = $props.id();
 
 	const view = createDateViewController({
 		initialDate: value,
@@ -36,6 +37,7 @@
 	const popover = createPickerPopoverController({
 		triggerIdPrefix: 'datepicker-trigger',
 		contentIdPrefix: 'datepicker-content',
+		uid,
 		open: () => open,
 		setOpen: (nextOpen) => {
 			open = nextOpen;

package/dist/date-range-picker/date-range-picker-root.svelte

@@ -27,6 +27,7 @@
 		disabled = false,
 		children
 	}: Props = $props();
+	const uid = $props.id();
 
 	const view = createDateViewController({
 		initialDate: startDate,
@@ -42,6 +43,7 @@
 	const popover = createPickerPopoverController({
 		triggerIdPrefix: 'date-range-picker-trigger',
 		contentIdPrefix: 'date-range-picker-content',
+		uid,
 		open: () => open,
 		setOpen: (nextOpen) => {
 			open = nextOpen;

package/dist/dialog/dialog-root.svelte

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

package/dist/drag-and-drop/drag-and-drop-root.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" generics="T">
-	import { flushSync } from 'svelte';
+	import { flushSync, onDestroy } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createId, mergeIds } from '@dryui/primitives';
+	import { mergeIds } from '@dryui/primitives';
 	import { setDragAndDropCtx } from './context.svelte.js';
 	import { getGroupCtx } from './group-context.svelte.js';
 
@@ -48,7 +48,8 @@
 	let crossListIndex: number | null = null;
 
 	const groupCtx = getGroupCtx();
-	const instructionsId = createId('dry-dnd-instructions');
+	const uid = $props.id();
+	const instructionsId = `dry-dnd-instructions-${uid}`;
 
 	let keyboardInstructions = $derived.by(() => {
 		const arrowKeys =
@@ -172,6 +173,7 @@
 
 		const clone = draggedEl.cloneNode(true) as HTMLElement;
 		clone.setAttribute('data-dnd-preview', '');
+		scrubPreviewClone(clone);
 		clone.removeAttribute('data-index');
 		clone.removeAttribute('data-dragging');
 		clone.removeAttribute('data-drag-active');
@@ -204,6 +206,33 @@
 		updatePreviewPosition();
 	}
 
+	function scrubPreviewClone(clone: HTMLElement) {
+		clone.setAttribute('aria-hidden', 'true');
+		clone.setAttribute('inert', '');
+		clone.removeAttribute('id');
+
+		for (const el of clone.querySelectorAll<HTMLElement>('[id]')) {
+			el.removeAttribute('id');
+		}
+
+		const relationshipAttrs = [
+			'for',
+			'aria-activedescendant',
+			'aria-controls',
+			'aria-describedby',
+			'aria-details',
+			'aria-labelledby',
+			'aria-owns'
+		];
+		const selector = relationshipAttrs.map((attr) => `[${attr}]`).join(',');
+
+		for (const el of clone.querySelectorAll<HTMLElement>(selector)) {
+			for (const attr of relationshipAttrs) {
+				el.removeAttribute(attr);
+			}
+		}
+	}
+
 	function updatePreviewPosition() {
 		if (!previewEl) return;
 		const dx = pointerX - startX;
@@ -358,6 +387,8 @@
 		}
 	}
 
+	onDestroy(removePreview);
+
 	function handlePointerMove(e: PointerEvent) {
 		if (isAnimating) return;
 		if (!isPending && !isDragging) return;

package/dist/drawer/drawer-root.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { setDrawerCtx } from './context.svelte.js';
 
 	interface Props {
@@ -11,7 +10,8 @@
 
 	let { open = $bindable(false), side = 'right', children }: Props = $props();
 
-	const headerId = generateFormId('drawer');
+	const uid = $props.id();
+	const headerId = `drawer-${uid}`;
 
 	setDrawerCtx({
 		get open() {

package/dist/dropdown-menu/dropdown-menu-root.svelte

@@ -9,10 +9,12 @@
 	}
 
 	let { open = $bindable(false), children }: Props = $props();
+	const uid = $props.id();
 
 	setDropdownMenuCtx(
 		createMenuRootState({
 			idBase: 'dropdown',
+			uid,
 			getOpen: () => open,
 			setOpen: (value) => {
 				open = value;

package/dist/field/field-root.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { setFormControlCtx, generateFormId } from '@dryui/primitives';
+	import { setFormControlCtx } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		children: Snippet;
@@ -21,7 +21,8 @@
 		...rest
 	}: Props = $props();
 
-	const id = generateFormId('field');
+	const uid = $props.id();
+	const id = `field-${uid}`;
 	let hasDescription = $state(false);
 	let hasErrorMessage = $state(false);
 

package/dist/file-select/file-select-root.svelte

@@ -85,6 +85,7 @@
 		padding: var(--dry-space-2) var(--dry-space-3);
 		font-family: var(--dry-font-sans);
 		background: var(--dry-color-bg-raised);
+		/* dryui-allow solid-border-on-raised: file select is a form control and needs a persistent field edge. */
 		border: 1px solid var(--dry-color-stroke-strong);
 		border-radius: var(--dry-radius-md);
 		transition:

package/dist/file-upload/file-upload-item.svelte

@@ -27,6 +27,7 @@
 		font-family: var(--dry-font-sans);
 		color: var(--dry-color-text-strong);
 		background: var(--dry-color-bg-raised);
+		/* dryui-allow solid-border-on-raised: uploaded file rows need a visible item boundary in dense lists. */
 		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-md);
 	}

package/dist/heading/heading.svelte

@@ -27,26 +27,32 @@
 </script>
 
 {#if level === 1}
+	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h1 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h1>
 {:else if level === 2}
+	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h2 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h2>
 {:else if level === 3}
+	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h3 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h3>
 {:else if level === 4}
+	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h4 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h4>
 {:else if level === 5}
+	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h5 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h5>
 {:else}
+	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h6 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h6>
@@ -64,7 +70,6 @@
 		font-family: var(--dry-font-sans);
 		font-weight: 700;
 		line-height: var(--dry-type-heading-2-leading, 2.5rem);
-		letter-spacing: -0.03em;
 		text-wrap: balance;
 	}
 
@@ -102,7 +107,6 @@
 		font-family: var(--dry-font-display, var(--dry-font-sans));
 		font-size: var(--dry-type-display-size, var(--dry-text-4xl-size, 2.25rem));
 		line-height: var(--dry-type-display-leading, 4rem);
-		letter-spacing: -0.04em;
 	}
 
 	/* ── Measure (max-inline-size) ─────────────────────────────────────────────

package/dist/image/image.svelte

@@ -37,8 +37,10 @@
 {#if status === 'error' && fallbackSnippet}
 	{@render fallbackSnippet()}
 {:else if status === 'error' && fallback}
+	<!-- dryui-allow raw-img: Image is the canonical component that renders the underlying img element. -->
 	<img class={className} src={fallback} {alt} data-state="fallback" {...rest} />
 {:else}
+	<!-- dryui-allow raw-img: Image is the canonical component that renders the underlying img element. -->
 	<img
 		class={className}
 		{src}

package/dist/internal/date-family-controller.svelte.d.ts

@@ -18,6 +18,7 @@ export declare function createDateViewController({ initialDate, locale }: DateVi
 interface PickerPopoverControllerConfig {
     triggerIdPrefix: string;
     contentIdPrefix: string;
+    uid: string;
     open: () => boolean;
     setOpen: (open: boolean) => void;
     disabled: () => boolean;
@@ -33,7 +34,7 @@ export interface PickerPopoverController {
     close: () => void;
     toggle: () => void;
 }
-export declare function createPickerPopoverController({ triggerIdPrefix, contentIdPrefix, open, setOpen, disabled, onShow, onClose }: PickerPopoverControllerConfig): {
+export declare function createPickerPopoverController({ triggerIdPrefix, contentIdPrefix, uid, open, setOpen, disabled, onShow, onClose }: PickerPopoverControllerConfig): {
     readonly triggerId: string;
     readonly contentId: string;
     readonly triggerEl: HTMLElement | null;

package/dist/internal/date-family-controller.svelte.js

@@ -1,4 +1,4 @@
-import { generateFormId, getWeekStartDay } from '@dryui/primitives';
+import { getWeekStartDay } from '@dryui/primitives';
 import { SvelteDate } from 'svelte/reactivity';
 export function createDateViewController({ initialDate = null, locale }) {
     const seedDate = initialDate ? new SvelteDate(initialDate.getTime()) : new SvelteDate();
@@ -56,9 +56,9 @@ export function createDateViewController({ initialDate = null, locale }) {
         }
     };
 }
-export function createPickerPopoverController({ triggerIdPrefix, contentIdPrefix, open, setOpen, disabled, onShow, onClose }) {
-    const triggerId = generateFormId(triggerIdPrefix);
-    const contentId = generateFormId(contentIdPrefix);
+export function createPickerPopoverController({ triggerIdPrefix, contentIdPrefix, uid, open, setOpen, disabled, onShow, onClose }) {
+    const triggerId = `${triggerIdPrefix}-${uid}`;
+    const contentId = `${contentIdPrefix}-${uid}`;
     let triggerEl = $state(null);
     return {
         get triggerId() {

package/dist/internal/menu-root-state.svelte.d.ts

@@ -16,6 +16,7 @@ export interface PositionedMenuRootState extends MenuRootState {
 }
 interface CreateMenuRootStateOptions {
     idBase: string;
+    uid: string;
     getOpen: () => boolean;
     setOpen: (value: boolean) => void;
 }

package/dist/internal/menu-root-state.svelte.js

@@ -1,7 +1,6 @@
-import { generateFormId } from '@dryui/primitives';
 function createBaseMenuRootState(options) {
-    const triggerId = generateFormId(`${options.idBase}-trigger`);
-    const contentId = generateFormId(`${options.idBase}-content`);
+    const triggerId = `${options.idBase}-trigger-${options.uid}`;
+    const contentId = `${options.idBase}-content-${options.uid}`;
     return {
         triggerId,
         contentId,

package/dist/internal/modal-content.svelte

@@ -319,6 +319,7 @@
 
 	[data-modal-content][data-variant='drawer'][data-side='top'] [data-modal-panel] {
 		--_drawer-rest-transform: translateY(0);
+		/* dryui-allow symmetric-exit-animation: this is the off-canvas enter position for a top drawer, not the exit animation. */
 		--_drawer-enter-transform: translateY(-100%);
 		grid-row: 1;
 		height: var(--dry-drawer-size);
@@ -327,6 +328,7 @@
 
 	[data-modal-content][data-variant='drawer'][data-side='bottom'] [data-modal-panel] {
 		--_drawer-rest-transform: translateY(0);
+		/* dryui-allow symmetric-exit-animation: this is the off-canvas enter position for a bottom drawer, not the exit animation. */
 		--_drawer-enter-transform: translateY(100%);
 		grid-row: 2;
 		height: var(--dry-drawer-size);

package/dist/internal/picker-popover-content.svelte

@@ -82,6 +82,7 @@
 		margin: 0;
 		display: inline-grid;
 		padding: var(--dry-space-3);
+		/* dryui-allow solid-border-on-raised: date picker popovers need a clear calendar boundary. */
 		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-lg);
 		background: var(--dry-color-bg-overlay);

package/dist/link-preview/link-preview-root.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { setLinkPreviewCtx } from './context.svelte.js';
 
 	interface Props {
@@ -12,8 +11,9 @@
 
 	let { open = $bindable(false), openDelay = 700, closeDelay = 300, children }: Props = $props();
 
-	const triggerId = generateFormId('link-preview-trigger');
-	const contentId = generateFormId('link-preview-content');
+	const uid = $props.id();
+	const triggerId = `link-preview-trigger-${uid}`;
+	const contentId = `link-preview-content-${uid}`;
 
 	let openTimeout: ReturnType<typeof setTimeout>;
 	let closeTimeout: ReturnType<typeof setTimeout>;

package/dist/logo-mark/logo-mark.svelte

@@ -48,6 +48,7 @@
 	{...rest}
 >
 	{#if showImage}
+		<!-- dryui-allow raw-img: LogoMark owns the intrinsic brand mark image and fallback lifecycle. -->
 		<img {src} {alt} onerror={handleError} />
 	{:else}
 		<span aria-hidden="true">{getFallbackText()}</span>

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

@@ -5,22 +5,28 @@
 	import { Separator } from '../separator/index.js';
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		content: string;
-		sanitize?: boolean;
+		dangerouslyAllowRawHtml?: boolean;
 	}
 
-	let { content, sanitize = true, class: className, ...rest }: Props = $props();
+	let { content, dangerouslyAllowRawHtml = false, class: className, ...rest }: Props = $props();
 
-	const nodes = $derived(parseMarkdownToAst(content, { sanitize }));
+	const nodes = $derived(parseMarkdownToAst(content, { sanitize: !dangerouslyAllowRawHtml }));
 </script>
 
 {#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'}

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

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     content: string;
-    sanitize?: boolean;
+    dangerouslyAllowRawHtml?: boolean;
 }
 declare const MarkdownRenderer: import("svelte").Component<Props, {}, "">;
 type MarkdownRenderer = ReturnType<typeof MarkdownRenderer>;

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { generateFormId } from '@dryui/primitives';
 	import { getMegaMenuCtx, setMegaMenuItemCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -11,9 +10,10 @@
 	let { class: className, children, ...rest }: Props = $props();
 
 	const ctx = getMegaMenuCtx();
-	const itemId = generateFormId('mm-item');
-	const triggerId = generateFormId('mm-trigger');
-	const panelId = generateFormId('mm-panel');
+	const uid = $props.id();
+	const itemId = `mm-item-${uid}`;
+	const triggerId = `mm-trigger-${uid}`;
+	const panelId = `mm-panel-${uid}`;
 
 	setMegaMenuItemCtx({
 		itemId,

package/dist/menubar/menubar-content.svelte

@@ -123,6 +123,7 @@
 
 		background: var(--dry-color-bg-overlay);
 		color: var(--dry-color-text-strong);
+		/* dryui-allow solid-border-on-raised: menu popover keeps a visible edge while floating above varied content. */
 		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-popover);
 		box-shadow: var(--dry-shadow-overlay);

package/dist/menubar/menubar-menu.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { getMenubarCtx, setMenubarMenuCtx } from './context.svelte.js';
 
 	interface Props {
@@ -10,7 +9,8 @@
 
 	let { children }: Props = $props();
 
-	const menuId = generateFormId('menubar-menu');
+	const uid = $props.id();
+	const menuId = `menubar-menu-${uid}`;
 	const ctx = getMenubarCtx();
 
 	onMount(() => {

package/dist/menubar/menubar-root.svelte

@@ -82,6 +82,7 @@
 		gap: var(--dry-space-1);
 		padding: var(--dry-space-1);
 		background: var(--dry-color-bg-overlay);
+		/* dryui-allow solid-border-on-raised: menubar root presents a persistent command strip boundary. */
 		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-lg);
 	}

package/dist/multi-select-combobox/multi-select-combobox-content.svelte

@@ -87,6 +87,7 @@
 		margin: 0;
 		grid-template-columns: minmax(anchor-size(inline), max-content);
 		background: var(--dry-color-bg-overlay);
+		/* dryui-allow solid-border-on-raised: popover menu keeps an explicit edge for contrast against busy app surfaces. */
 		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-md);
 		box-shadow: var(--dry-shadow-lg);

package/dist/multi-select-combobox/multi-select-combobox-item.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { generateFormId } from '@dryui/primitives';
 	import { getMultiSelectComboboxCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -24,7 +23,8 @@
 	}: Props = $props();
 
 	const ctx = getMultiSelectComboboxCtx();
-	const id = generateFormId('multi-select-combobox-item');
+	const uid = $props.id();
+	const id = `multi-select-combobox-item-${uid}`;
 
 	const isSelected = $derived(ctx.isSelected(value));
 	const isUnavailable = $derived(disabled || !ctx.canSelect(value));

package/dist/multi-select-combobox/multi-select-combobox-root-input.svelte

@@ -2,7 +2,6 @@
 	import { untrack } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { generateFormId } from '@dryui/primitives';
 	import { setMultiSelectComboboxCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -31,8 +30,9 @@
 		...rest
 	}: Props = $props();
 
-	const inputId = generateFormId('multi-select-combobox-input');
-	const contentId = generateFormId('multi-select-combobox-content');
+	const uid = $props.id();
+	const inputId = `multi-select-combobox-input-${uid}`;
+	const contentId = `multi-select-combobox-content-${uid}`;
 
 	let rootEl = $state<HTMLDivElement | null>(null);
 	let inputEl = $state<HTMLInputElement | null>(null);
@@ -251,6 +251,7 @@
 		justify-content: start;
 		gap: var(--dry-space-1_5);
 		padding: var(--dry-space-2);
+		/* dryui-allow solid-border-on-raised: composite input needs a persistent field edge plus raised fill for token contrast. */
 		border: 1px solid var(--dry-color-stroke-strong);
 		border-radius: var(--dry-radius-md);
 		background: var(--dry-color-bg-raised);

package/dist/navigation-menu/context.svelte.d.ts

@@ -1,4 +1,3 @@
-import { generateFormId } from '@dryui/primitives';
 export interface NavigationMenuContext {
     readonly activeItem: string | null;
     openItem: (id: string) => void;
@@ -12,4 +11,3 @@ export interface NavigationMenuItemContext {
     readonly open: boolean;
 }
 export declare const setNavigationMenuItemCtx: (ctx: NavigationMenuItemContext) => NavigationMenuItemContext, getNavigationMenuItemCtx: () => NavigationMenuItemContext;
-export { generateFormId };

package/dist/navigation-menu/context.svelte.js

@@ -1,4 +1,3 @@
-import { createContext, generateFormId } from '@dryui/primitives';
+import { createContext } from '@dryui/primitives';
 export const [setNavigationMenuCtx, getNavigationMenuCtx] = createContext('navigation-menu');
 export const [setNavigationMenuItemCtx, getNavigationMenuItemCtx] = createContext('navigation-menu-item');
-export { generateFormId };

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/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);