@dryui/ui 1.9.0 → 2.0.0

package/dist/alert-dialog/alert-dialog-root.svelte

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

package/dist/avatar/avatar.svelte

@@ -66,6 +66,7 @@
 			{...rest}
 		>
 			{#if showImage}
+				<!-- dryui-allow raw-img: Avatar owns the intrinsic image primitive and fallback/error lifecycle. -->
 				<img {src} {alt} onerror={handleError} />
 			{:else if children}
 				{@render children()}
@@ -90,6 +91,7 @@
 		{...rest}
 	>
 		{#if showImage}
+			<!-- dryui-allow raw-img: Avatar owns the intrinsic image primitive and fallback/error lifecycle. -->
 			<img {src} {alt} onerror={handleError} />
 		{:else if children}
 			{@render children()}

package/dist/badge/badge.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { variantAttrs } from '@dryui/primitives';
+	import { getPageHeaderMetaCtx } from '@dryui/primitives/page-header';
 	import { resolveAlias } from '../internal/color-aliases.js';
 	import type { BadgeColor } from './index.js';
 
@@ -21,9 +22,9 @@
 	}
 
 	let {
-		variant = 'soft',
-		color = 'gray',
-		size = 'sm',
+		variant: variantProp,
+		color: colorProp,
+		size: sizeProp,
 		class: className,
 		children,
 		pulse,
@@ -31,43 +32,42 @@
 		numeric = false,
 		...rest
 	}: Props = $props();
+
+	const ctx = getPageHeaderMetaCtx();
+	const variant = $derived(variantProp ?? ctx?.variant ?? 'soft');
+	const color = $derived<BadgeColor>(colorProp ?? ctx?.color ?? 'gray');
+	const size = $derived(sizeProp ?? ctx?.size ?? 'sm');
 	const resolvedColor = $derived(resolveAlias(color, 'gray'));
 	const isDot = $derived(variant === 'dot');
 	const hasIcon = $derived(!!icon && !isDot);
 </script>
 
-<span data-wrapper>
-	<span
-		class={className}
-		data-badge={isDot ? undefined : ''}
-		data-dot={isDot ? '' : undefined}
-		data-numeric={numeric && !isDot ? 'true' : undefined}
-		{...variantAttrs({
-			variant: isDot ? undefined : variant,
-			color: resolvedColor,
-			size: isDot ? undefined : size,
-			'data-icon-only': hasIcon ? '' : undefined,
-			'data-pulse': pulse ? '' : undefined
-		})}
-		{...rest}
-	>
-		{#if isDot}
-			<!-- dot variant renders no content -->
-		{:else if icon}
-			{@render icon()}
-		{:else if children}
-			{@render children()}
-		{/if}
-	</span>
+<span
+	class={className}
+	data-badge={isDot ? undefined : ''}
+	data-dot={isDot ? '' : undefined}
+	data-numeric={numeric && !isDot ? 'true' : undefined}
+	{...variantAttrs({
+		variant: isDot ? undefined : variant,
+		color: resolvedColor,
+		size: isDot ? undefined : size,
+		'data-icon-only': hasIcon ? '' : undefined,
+		'data-pulse': pulse ? '' : undefined
+	})}
+	{...rest}
+>
+	{#if isDot}
+		<!-- dot variant renders no content -->
+	{:else if icon}
+		{@render icon()}
+	{:else if children}
+		{@render children()}
+	{/if}
 </span>
 
 <style>
-	[data-wrapper] {
-		display: inline-grid;
-		justify-self: start;
-	}
-
 	[data-badge] {
+		justify-self: start;
 		/* Component tokens (Tier 3) */
 		--_badge-bg-default: var(--dry-color-fill);
 		--_badge-color-default: var(--dry-color-text-weak);
@@ -85,7 +85,9 @@
 		--_badge-radius: var(--dry-badge-radius, var(--_badge-radius-default));
 
 		display: inline-grid;
-		place-items: center;
+		grid-auto-flow: column;
+		align-items: center;
+		gap: var(--dry-space-1);
 		padding: var(--_badge-padding-y) var(--_badge-padding-x);
 		font-size: var(--_badge-font-size);
 		font-family: var(--dry-font-sans);

package/dist/button/button.svelte

@@ -81,9 +81,33 @@
 		(onclick as ((event: MouseEvent) => void) | undefined)?.(event);
 	}
 
-	function attachRef(node: HTMLButtonElement | HTMLAnchorElement) {
+	function syncIconEdgeAttrs(node: HTMLButtonElement | HTMLAnchorElement) {
+		const children = Array.from(node.children).filter(
+			(child): child is HTMLElement => child instanceof HTMLElement
+		);
+		const firstChild = children[0];
+		const lastChild = children[children.length - 1];
+
+		node.toggleAttribute('data-icon-start', firstChild?.hasAttribute('data-dry-icon') === true);
+		node.toggleAttribute('data-icon-end', lastChild?.hasAttribute('data-dry-icon') === true);
+	}
+
+	function attachButton(node: HTMLButtonElement | HTMLAnchorElement) {
 		ref?.(node);
-		return () => ref?.(null);
+		syncIconEdgeAttrs(node);
+
+		const observer = new MutationObserver(() => syncIconEdgeAttrs(node));
+		observer.observe(node, {
+			attributeFilter: ['data-dry-icon'],
+			attributes: true,
+			childList: true,
+			subtree: true
+		});
+
+		return () => {
+			observer.disconnect();
+			ref?.(null);
+		};
 	}
 </script>
 
@@ -98,11 +122,14 @@
 			aria-disabled={disabled || undefined}
 			data-disabled={disabled || undefined}
 			data-optical={optical}
+			data-dry-button
+			data-icon-start={undefined}
+			data-icon-end={undefined}
 			tabindex={disabled ? -1 : undefined}
 			{...variantAttrs({ variant, size, color })}
 			class={className}
 			onclick={handleLinkClick}
-			{@attach attachRef}
+			{@attach attachButton}
 		>
 			{@render children()}
 		</a>
@@ -112,11 +139,14 @@
 			{disabled}
 			data-disabled={disabled || undefined}
 			data-optical={optical}
+			data-dry-button
+			data-icon-start={undefined}
+			data-icon-end={undefined}
 			{...variantAttrs({ variant, size, color })}
 			class={className}
 			{onclick}
 			{...rest}
-			{@attach attachRef}
+			{@attach attachButton}
 		>
 			{@render children()}
 		</button>
@@ -136,8 +166,7 @@
 		display: inline-grid;
 	}
 
-	a,
-	button {
+	[data-dry-button] {
 		/* Resolve public button tokens without stomping inherited overrides. */
 		--_dry-btn-accent: var(--dry-btn-accent, var(--dry-color-fill-brand));
 		--_dry-btn-accent-fg: var(--dry-btn-accent-fg, var(--dry-color-text-brand));
@@ -227,17 +256,17 @@
 	   to disable the nudge. Data-attribute selectors pierce Svelte style
 	   scoping without needing `:global()`, which is banned by
 	   `dryui/no-global`. */
-	:is(a, button)[data-optical='auto']:has(> [data-dry-icon]:first-child) {
+	[data-dry-button][data-optical='auto'][data-icon-start] {
 		padding-inline-start: calc(var(--_dry-btn-padding-x) - var(--dry-optical-icon-offset));
 	}
 
-	:is(a, button)[data-optical='auto']:has(> [data-dry-icon]:last-child) {
+	[data-dry-button][data-optical='auto'][data-icon-end] {
 		padding-inline-end: calc(var(--_dry-btn-padding-x) - var(--dry-optical-icon-offset));
 	}
 
 	/* ── Variants ──────────────────────────────────────────────────────────────── */
 
-	:is(a, button)[data-variant='solid'] {
+	[data-dry-button][data-variant='solid'] {
 		--_dry-btn-bg: var(--dry-btn-bg, var(--_dry-btn-accent));
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-on-accent));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -252,7 +281,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='outline'] {
+	[data-dry-button][data-variant='outline'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-accent-fg));
 		--_dry-btn-border: var(--dry-btn-border, var(--_dry-btn-accent-stroke));
@@ -272,7 +301,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='ghost'] {
+	[data-dry-button][data-variant='ghost'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-accent-fg));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -294,7 +323,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='soft'] {
+	[data-dry-button][data-variant='soft'] {
 		--_dry-btn-bg: var(--dry-btn-bg, var(--_dry-btn-accent-weak));
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-accent-fg));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -311,7 +340,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='secondary'] {
+	[data-dry-button][data-variant='secondary'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-accent-fg));
 		--_dry-btn-border: var(--dry-btn-border, var(--_dry-btn-accent-stroke));
@@ -330,7 +359,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='bare'] {
+	[data-dry-button][data-variant='bare'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, inherit);
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -346,7 +375,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='link'] {
+	[data-dry-button][data-variant='link'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-accent-fg));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -366,7 +395,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='trigger'] {
+	[data-dry-button][data-variant='trigger'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-strong));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -389,7 +418,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='nav'] {
+	[data-dry-button][data-variant='nav'] {
 		--_dry-btn-bg: var(--dry-btn-bg, var(--dry-color-bg-raised));
 		--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-strong));
 		--_dry-btn-border: var(--dry-btn-border, var(--dry-color-stroke-weak));
@@ -407,7 +436,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='tab'] {
+	[data-dry-button][data-variant='tab'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-weak));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -429,7 +458,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='toggle'] {
+	[data-dry-button][data-variant='toggle'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-weak));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -446,7 +475,7 @@
 		}
 	}
 
-	:is(a, button)[data-variant='pill'] {
+	[data-dry-button][data-variant='pill'] {
 		--_dry-btn-bg: var(--dry-btn-bg, transparent);
 		--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-weak));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
@@ -463,7 +492,7 @@
 		}
 	}
 
-	:is(a, button)[data-color='primary'] {
+	[data-dry-button][data-color='primary'] {
 		--_dry-btn-accent: var(--dry-btn-accent, var(--dry-color-fill-brand));
 		--_dry-btn-accent-fg: var(--dry-btn-accent-fg, var(--dry-color-text-brand));
 		--_dry-btn-accent-stroke: var(--dry-btn-accent-stroke, var(--dry-color-stroke-brand));
@@ -472,7 +501,7 @@
 		--_dry-btn-accent-active: var(--dry-btn-accent-active, var(--dry-color-fill-brand-active));
 	}
 
-	:is(a, button)[data-color='danger'] {
+	[data-dry-button][data-color='danger'] {
 		--_dry-btn-accent: var(--dry-btn-accent, var(--dry-color-fill-error));
 		--_dry-btn-accent-fg: var(--dry-btn-accent-fg, var(--dry-color-text-error));
 		--_dry-btn-accent-stroke: var(--dry-btn-accent-stroke, var(--dry-color-stroke-error));
@@ -487,7 +516,7 @@
 	   light theme → near-black bg + white text; dark theme → white bg + near-black
 	   text. Any consumer token override (--dry-btn-bg etc.) still wins because the
 	   variant styles read from the public layer first. */
-	:is(a, button)[data-color='ink'] {
+	[data-dry-button][data-color='ink'] {
 		--_dry-btn-accent: var(--dry-btn-accent, var(--dry-color-bg-inverse));
 		--_dry-btn-accent-fg: var(--dry-btn-accent-fg, var(--dry-color-text-inverse));
 		--_dry-btn-accent-stroke: var(--dry-btn-accent-stroke, var(--dry-color-stroke-strong));
@@ -508,7 +537,7 @@
 
 	/* ── Sizes ─────────────────────────────────────────────────────────────────── */
 
-	:is(a, button)[data-size='sm'] {
+	[data-dry-button][data-size='sm'] {
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, var(--dry-space-3));
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, var(--dry-space-1_5));
 		--_dry-btn-font-size: var(
@@ -519,7 +548,7 @@
 		min-height: var(--dry-btn-min-height, var(--dry-space-8));
 	}
 
-	:is(a, button)[data-size='md'] {
+	[data-dry-button][data-size='md'] {
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, var(--dry-space-4));
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, var(--dry-space-2_5));
 		--_dry-btn-font-size: var(
@@ -530,7 +559,7 @@
 		min-height: var(--dry-btn-min-height, var(--dry-space-12));
 	}
 
-	:is(a, button)[data-size='lg'] {
+	[data-dry-button][data-size='lg'] {
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, var(--dry-space-6));
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, var(--dry-space-3));
 		--_dry-btn-font-size: var(
@@ -543,7 +572,7 @@
 
 	/* ── Icon-only sizes (square aspect ratio) ────────────────────────────── */
 
-	:is(a, button)[data-size='icon'] {
+	[data-dry-button][data-size='icon'] {
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, 0);
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, 0);
 		aspect-ratio: 1;
@@ -551,7 +580,7 @@
 		--_dry-btn-radius: var(--dry-btn-radius, var(--dry-radius-md));
 	}
 
-	:is(a, button)[data-size='icon-sm'] {
+	[data-dry-button][data-size='icon-sm'] {
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, 0);
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, 0);
 		aspect-ratio: 1;
@@ -563,7 +592,7 @@
 		);
 	}
 
-	:is(a, button)[data-size='icon-lg'] {
+	[data-dry-button][data-size='icon-lg'] {
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, 0);
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, 0);
 		aspect-ratio: 1;
@@ -577,47 +606,47 @@
 
 	/* ── Button-group integration ─────────────────────────────────────── */
 
-	.wrapper[data-in-group] :is(a, button) {
+	.wrapper[data-in-group] [data-dry-button] {
 		border-radius: 0;
 	}
 
 	/* Horizontal: first child gets left radii */
-	.wrapper[data-in-group][data-group-orientation='horizontal']:first-child :is(a, button) {
+	.wrapper[data-in-group][data-group-orientation='horizontal']:first-child [data-dry-button] {
 		border-top-left-radius: var(--dry-button-group-radius);
 		border-bottom-left-radius: var(--dry-button-group-radius);
 	}
 
 	/* Horizontal: last child gets right radii */
-	.wrapper[data-in-group][data-group-orientation='horizontal']:last-child :is(a, button) {
+	.wrapper[data-in-group][data-group-orientation='horizontal']:last-child [data-dry-button] {
 		border-top-right-radius: var(--dry-button-group-radius);
 		border-bottom-right-radius: var(--dry-button-group-radius);
 	}
 
 	/* Horizontal: non-first child removes inline-start border */
-	.wrapper[data-in-group][data-group-orientation='horizontal']:not(:first-child) :is(a, button) {
+	.wrapper[data-in-group][data-group-orientation='horizontal']:not(:first-child) [data-dry-button] {
 		border-inline-start: 0;
 	}
 
 	/* Vertical: first child gets top radii */
-	.wrapper[data-in-group][data-group-orientation='vertical']:first-child :is(a, button) {
+	.wrapper[data-in-group][data-group-orientation='vertical']:first-child [data-dry-button] {
 		border-top-left-radius: var(--dry-button-group-radius);
 		border-top-right-radius: var(--dry-button-group-radius);
 	}
 
 	/* Vertical: last child gets bottom radii */
-	.wrapper[data-in-group][data-group-orientation='vertical']:last-child :is(a, button) {
+	.wrapper[data-in-group][data-group-orientation='vertical']:last-child [data-dry-button] {
 		border-bottom-left-radius: var(--dry-button-group-radius);
 		border-bottom-right-radius: var(--dry-button-group-radius);
 	}
 
 	/* Vertical: non-first child removes block-start border */
-	.wrapper[data-in-group][data-group-orientation='vertical']:not(:first-child) :is(a, button) {
+	.wrapper[data-in-group][data-group-orientation='vertical']:not(:first-child) [data-dry-button] {
 		border-block-start: 0;
 	}
 
 	/* Hover/focus z-index for grouped buttons */
-	.wrapper[data-in-group]:hover :is(a, button),
-	.wrapper[data-in-group]:focus-within :is(a, button) {
+	.wrapper[data-in-group]:hover [data-dry-button],
+	.wrapper[data-in-group]:focus-within [data-dry-button] {
 		z-index: var(--dry-button-group-hover-z-index);
 		position: relative;
 	}

package/dist/chromatic-aberration/chromatic-aberration.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { createId } from '@dryui/primitives';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -11,7 +10,8 @@
 
 	let { offset = 3, angle = 0, children, class: className, style, ...rest }: Props = $props();
 
-	const filterId = createId('dry-chromatic');
+	const uid = $props.id();
+	const filterId = `dry-chromatic-${uid}`;
 
 	const offsetX = $derived(Math.round(offset * Math.cos((angle * Math.PI) / 180)));
 	const offsetY = $derived(Math.round(offset * Math.sin((angle * Math.PI) / 180)));

package/dist/collapsible/collapsible-root.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { setCollapsibleCtx, createId } from './context.svelte.js';
+	import { setCollapsibleCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		open?: boolean;
@@ -17,7 +17,8 @@
 		...rest
 	}: Props = $props();
 
-	const contentId = createId('collapsible-content');
+	const uid = $props.id();
+	const contentId = `collapsible-content-${uid}`;
 
 	setCollapsibleCtx({
 		get open() {

package/dist/collapsible/context.svelte.d.ts

@@ -1,4 +1,3 @@
-import { createId } from '@dryui/primitives';
 interface CollapsibleContext {
     readonly open: boolean;
     readonly disabled: boolean;
@@ -6,4 +5,4 @@ interface CollapsibleContext {
     toggle: () => void;
 }
 export declare const setCollapsibleCtx: (ctx: CollapsibleContext) => CollapsibleContext, getCollapsibleCtx: () => CollapsibleContext;
-export { createId };
+export {};

package/dist/collapsible/context.svelte.js

@@ -1,3 +1,2 @@
-import { createContext, createId } from '@dryui/primitives';
+import { createContext } from '@dryui/primitives';
 export const [setCollapsibleCtx, getCollapsibleCtx] = createContext('collapsible');
-export { createId };

package/dist/color-picker/color-picker-channel-input.svelte

@@ -59,6 +59,7 @@
 		font-family: var(--dry-font-mono);
 		color: var(--dry-color-text-strong);
 		background: var(--dry-color-bg-raised);
+		/* dryui-allow solid-border-on-raised: numeric color channel inputs use field affordance inside a raised picker. */
 		border: 1px solid var(--dry-color-stroke-strong);
 		border-radius: var(--dry-radius-md);
 		transition:

package/dist/combobox/combobox-content.svelte

@@ -94,6 +94,7 @@
 			max-content
 		);
 		background: var(--dry-color-bg-overlay);
+		/* dryui-allow solid-border-on-raised: popover listbox keeps a crisp edge for option scanning. */
 		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-md);
 		box-shadow: var(--dry-shadow-lg);

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

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { setComboboxCtx } from './context.svelte.js';
 
 	interface Props {
@@ -19,8 +18,9 @@
 		children
 	}: Props = $props();
 
-	const inputId = generateFormId('combobox-input');
-	const contentId = generateFormId('combobox-content');
+	const uid = $props.id();
+	const inputId = `combobox-input-${uid}`;
+	const contentId = `combobox-content-${uid}`;
 
 	let displayText = $state('');
 	let inputValue = $state('');

package/dist/command-palette/command-palette-dialog-root.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 { setCommandPaletteCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDialogElement> {
@@ -11,8 +10,9 @@
 
 	let { open = $bindable(false), class: className, children, ...rest }: Props = $props();
 
-	const listId = generateFormId('cmd-list');
-	const inputId = generateFormId('cmd-input');
+	const uid = $props.id();
+	const listId = `cmd-list-${uid}`;
+	const inputId = `cmd-input-${uid}`;
 
 	let query = $state('');
 	let activeItemId = $state('');

package/dist/command-palette/command-palette-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 { getCommandPaletteCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -14,7 +13,8 @@
 	let { value, disabled, onSelect, class: className, children, ...rest }: Props = $props();
 
 	const ctx = getCommandPaletteCtx();
-	const id = generateFormId('cmd-item');
+	const uid = $props.id();
+	const id = `cmd-item-${uid}`;
 
 	let visible = $derived.by(() => {
 		const q = ctx.query.toLowerCase().trim();
@@ -58,7 +58,7 @@
 
 <style>
 	[data-command-palette-item] {
-		--dry-cmd-item-radius: var(--dry-radius-nested-dialog);
+		--dry-cmd-item-radius: min(var(--dry-radius-nested-dialog), var(--dry-space-4));
 
 		display: grid;
 		grid-auto-flow: column;

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

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