@dryui/ui 1.8.0 → 2.0.0

package/dist/diagram/diagram.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Diagram',
+    description: 'Config-driven diagram component with auto-layout, curved edges, clusters, swimlanes, and annotations',
+    category: 'display',
+    tags: ['diagram', 'graph', 'flow', 'architecture', 'network', 'sequence', 'visualization']
+};

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/dialog/dialog.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/dialog/dialog.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Dialog',
+    description: 'Modal dialog using native dialog element',
+    category: 'overlay',
+    tags: ['modal', 'overlay', 'dialog', 'popup']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Displacement',
+    description: 'SVG turbulence displacement filter for organic distortion effects',
+    category: 'visual',
+    tags: ['displacement', 'distortion', 'turbulence', 'filter', 'svg', 'animation']
+};

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/drag-and-drop/drag-and-drop.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/drag-and-drop/drag-and-drop.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'DragAndDrop',
+    description: 'Reorderable list with drag and keyboard support',
+    category: 'interaction',
+    tags: ['drag', 'drop', 'reorder', 'sortable', 'list']
+};

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/drawer/drawer.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/drawer/drawer.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Drawer',
+    description: 'Slide-in panel from any edge',
+    category: 'overlay',
+    tags: ['modal', 'panel', 'slide', 'sidebar']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'DropZone',
+    description: 'Drag-and-drop file drop zone area',
+    category: 'input',
+    tags: ['drag', 'drop', 'file', 'upload', 'zone']
+};

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

@@ -77,6 +77,7 @@
 </div>
 
 <style>
+	/* outer: var(--dry-radius-popover); children inside the padded region use var(--dry-radius-nested-popover). */
 	[data-dropdown-menu-content] {
 		/* Reset UA popover defaults */
 		inset: unset;
@@ -87,7 +88,7 @@
 		color: var(--dry-color-text-strong);
 		border: 1px solid
 			var(--dry-menu-border, var(--dry-overlay-border, var(--dry-color-stroke-weak)));
-		border-radius: var(--dry-menu-radius, var(--dry-overlay-radius, var(--dry-radius-lg)));
+		border-radius: var(--dry-menu-radius, var(--dry-overlay-radius, var(--dry-radius-popover)));
 		box-shadow: var(--dry-menu-shadow, var(--dry-overlay-shadow, var(--dry-shadow-overlay)));
 		display: grid;
 		grid-template-columns: minmax(12rem, auto);
@@ -95,7 +96,8 @@
 		--dry-radius-nested: max(
 			var(--dry-radius-sm),
 			calc(
-				var(--dry-menu-radius, var(--dry-radius-lg)) - var(--dry-menu-padding, var(--dry-space-2))
+				var(--dry-menu-radius, var(--dry-radius-popover)) -
+					var(--dry-menu-padding, var(--dry-space-2))
 			)
 		);
 		--dry-btn-radius: var(--dry-radius-nested);

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/dropdown-menu/dropdown-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/dropdown-menu/dropdown-menu.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'DropdownMenu',
+    description: 'Trigger-activated dropdown with menu items',
+    category: 'overlay',
+    tags: ['menu', 'dropdown', 'actions', 'popover']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Enter',
+    description: 'Single-child entrance wrapper. Reveals on mount with --dry-enter-* tokens (translate, blur, duration). Accepts an index for staggered reveals.',
+    category: 'display',
+    tags: ['animation', 'enter', 'reveal', 'motion', 'polish']
+};

package/dist/enter/index.d.ts

@@ -0,0 +1 @@
+export { Enter, enter, type EnterOptions } from '../motion/index.js';

package/dist/enter/index.js

@@ -0,0 +1 @@
+export { Enter, enter } from '../motion/index.js';

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Exit',
+    description: 'Exit wrapper that applies the `leave` Svelte transition. Pairs with {#if} blocks for a subtle dismissal (~12px offset + blur).',
+    category: 'display',
+    tags: ['animation', 'exit', 'leave', 'motion', 'polish']
+};

package/dist/exit/index.d.ts

@@ -0,0 +1 @@
+export { Exit, leave, type LeaveOptions } from '../motion/index.js';

package/dist/exit/index.js

@@ -0,0 +1 @@
+export { Exit, leave } from '../motion/index.js';

package/dist/field/field-root.svelte

@@ -1,13 +1,14 @@
 <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;
 		error?: string;
 		required?: boolean;
 		disabled?: boolean;
+		nestRadius?: boolean;
 	}
 
 	let {
@@ -15,11 +16,13 @@
 		error = '',
 		required = false,
 		disabled = false,
+		nestRadius = false,
 		class: className,
 		...rest
 	}: Props = $props();
 
-	const id = generateFormId('field');
+	const uid = $props.id();
+	const id = `field-${uid}`;
 	let hasDescription = $state(false);
 	let hasErrorMessage = $state(false);
 
@@ -67,6 +70,7 @@
 	data-field
 	data-disabled={disabled || undefined}
 	data-error={error ? '' : undefined}
+	data-nest-radius={nestRadius ? '' : undefined}
 	class={className}
 	{...rest}
 >
@@ -86,5 +90,9 @@
 		&[data-error] {
 			--dry-field-gap: var(--dry-space-1);
 		}
+
+		&[data-nest-radius] {
+			--dry-input-radius: var(--dry-radius-nested-field);
+		}
 	}
 </style>

package/dist/field/field-root.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     error?: string;
     required?: boolean;
     disabled?: boolean;
+    nestRadius?: boolean;
 }
 declare const FieldRoot: import("svelte").Component<Props, {}, "">;
 type FieldRoot = ReturnType<typeof FieldRoot>;

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Field',
+    description: 'Form field wrapper with label, description, and error',
+    category: 'form',
+    tags: ['form', 'field', 'label', 'error', 'validation']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Fieldset',
+    description: 'Structured field grouping with legend, description, and content',
+    category: 'form',
+    tags: ['form', 'group', 'legend', 'settings']
+};

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-select/file-select.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/file-select/file-select.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'FileSelect',
+    description: 'Select a file or folder path via external picker',
+    category: 'input',
+    tags: ['form', 'file', 'folder', 'path', 'select', 'picker']
+};

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/file-upload/file-upload.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/file-upload/file-upload.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'FileUpload',
+    description: 'File selection with drag-and-drop dropzone',
+    category: 'input',
+    tags: ['form', 'file', 'upload', 'drag', 'drop']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'FlipCard',
+    description: 'Flippable card with front and back faces',
+    category: 'display',
+    tags: ['card', 'flip', 'hover', 'click', '3d', 'animation']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'FloatButton',
+    description: 'Floating action button with expandable actions',
+    category: 'action',
+    tags: ['fab', 'float', 'action', 'button', 'expand']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'FocusTrap',
+    description: 'Traps keyboard focus within a container element',
+    category: 'utility',
+    tags: ['a11y', 'focus', 'trap', 'modal', 'keyboard']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'FormatBytes',
+    description: 'Formats byte values with Intl.NumberFormat',
+    category: 'display',
+    tags: ['format', 'bytes', 'file-size', 'number']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'FormatDate',
+    description: 'Formats dates with Intl.DateTimeFormat',
+    category: 'display',
+    tags: ['format', 'date', 'time', 'intl', 'locale']
+};

package/dist/format-date/format-date.svelte

@@ -78,6 +78,7 @@
 		color: var(--dry-format-date-color);
 		font-size: var(--dry-format-date-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/format-number/format-number.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/format-number/format-number.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'FormatNumber',
+    description: 'Formats numbers with Intl.NumberFormat',
+    category: 'display',
+    tags: ['format', 'number', 'currency', 'percent']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Gauge',
+    description: 'SVG gauge indicator with configurable arc, thresholds, and label',
+    category: 'display',
+    tags: ['gauge', 'meter', 'dial', 'svg', 'dashboard', 'threshold']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Glass',
+    description: 'Translucent glass wrapper with blur, tint, and saturation control',
+    category: 'visual',
+    tags: ['glass', 'blur', 'frosted', 'surface', 'translucent']
+};

package/dist/glow/glow.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;