@dryui/ui 1.8.0 → 2.0.0

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Chip',
+    description: 'Interactive pill for filters, selections, and inline state',
+    category: 'action',
+    tags: ['chip', 'pill', 'filter', 'selection', 'tag']
+};

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

@@ -0,0 +1,18 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ChipGroup',
+    description: 'Wrapping cluster for Badge, Chip, and tag children with gap and justify controls; carved out of dryui/no-flex',
+    category: 'layout',
+    tags: [
+        'chip',
+        'group',
+        'tag',
+        'badge',
+        'pill',
+        'wrap',
+        'cluster',
+        'filters',
+        'selection',
+        'responsive'
+    ]
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ChromaticAberration',
+    description: 'Soft channel-offset wrapper for chromatic distortion on surfaces and media',
+    category: 'visual',
+    tags: ['chromatic', 'aberration', 'rgb', 'distortion', 'effect']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ChromaticShift',
+    description: 'RGB channel separation effect with hover and animation triggers',
+    category: 'visual',
+    tags: ['chromatic', 'aberration', 'rgb', 'glitch', 'effect', 'animation']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Clipboard',
+    description: 'Copy text to clipboard with native Clipboard API',
+    category: 'action',
+    tags: ['copy', 'clipboard', 'paste', 'text']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'CodeBlock',
+    description: 'Code display with optional line numbers and copy button',
+    category: 'display',
+    tags: ['code', 'syntax', 'pre', 'monospace', 'copy']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Collapsible',
+    description: 'Expandable/collapsible content panel',
+    category: 'display',
+    tags: ['disclosure', 'collapse', 'expand', 'toggle']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ColorPicker',
+    description: 'Color selection with area, hue/alpha sliders, and eyedropper',
+    category: 'input',
+    tags: ['form', 'color', 'picker', 'palette']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Combobox',
+    description: 'Searchable text input with filterable dropdown suggestions',
+    category: 'form',
+    tags: ['form', 'search', 'autocomplete', 'filter', 'select', 'typeahead', 'searchable-select']
+};

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('');
@@ -135,10 +135,11 @@
 </dialog>
 
 <style>
+	/* outer: var(--dry-radius-dialog); children inside the padded region use var(--dry-radius-nested-dialog). */
 	[data-command-palette-root] {
 		--dry-cmd-bg: var(--dry-color-bg-overlay);
 		--dry-cmd-border: var(--dry-color-stroke-weak);
-		--dry-cmd-radius: var(--dry-radius-xl);
+		--dry-cmd-radius: var(--dry-radius-dialog);
 		--dry-cmd-shadow: var(--dry-shadow-xl);
 		--dry-cmd-max-width: 32rem;
 

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: min(var(--dry-control-radius, var(--dry-radius-sm)), var(--dry-space-4));
+		--dry-cmd-item-radius: min(var(--dry-radius-nested-dialog), var(--dry-space-4));
 
 		display: grid;
 		grid-auto-flow: column;

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'CommandPalette',
+    description: 'Searchable command menu dialog',
+    category: 'overlay',
+    tags: ['modal', 'search', 'command', 'shortcut', 'palette', 'navigation', 'launcher']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Container',
+    description: 'Centered content container with max-width',
+    category: 'layout',
+    tags: ['wrapper', 'center', 'max-width']
+};

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

@@ -75,6 +75,7 @@
 </div>
 
 <style>
+	/* outer: var(--dry-radius-popover); children inside the padded region use var(--dry-radius-nested-popover). */
 	[data-context-menu-content] {
 		/* Reset UA popover defaults */
 		inset: unset;
@@ -82,7 +83,7 @@
 
 		--dry-menu-bg: var(--dry-color-bg-overlay);
 		--dry-menu-border: var(--dry-color-stroke-weak);
-		--dry-menu-radius: var(--dry-radius-lg);
+		--dry-menu-radius: var(--dry-radius-popover);
 		--dry-menu-shadow: var(--dry-shadow-lg);
 		--dry-menu-padding: var(--dry-space-1);
 		--dry-menu-item-padding: var(--dry-space-2_5) var(--dry-space-2);

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;

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ContextMenu',
+    description: 'Right-click menu with actions',
+    category: 'overlay',
+    tags: ['menu', 'right-click', 'context', 'actions']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'DataGrid',
+    description: 'Enhanced table with sorting, filtering, and pagination',
+    category: 'display',
+    tags: ['data', 'grid', 'table', 'sort', 'filter', 'paginate']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'DateField',
+    description: 'Form-first locale-aware segmented date input',
+    category: 'form',
+    tags: ['date', 'input', 'field', 'segment', 'locale', 'form', 'date-input']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'DatePicker',
+    description: 'Calendar popup date picker with locale support',
+    category: 'form',
+    tags: ['form', 'date', 'calendar', 'picker', 'locale', 'popover']
+};

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/date-range-picker/date-range-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/date-range-picker/date-range-picker.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'DateRangePicker',
+    description: 'Date range selection with calendar popup',
+    category: 'form',
+    tags: ['date', 'range', 'picker', 'calendar', 'period']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'DateTimeInput',
+    description: 'Combined date and time input with locale-aware segments',
+    category: 'input',
+    tags: ['date', 'time', 'datetime', 'input', 'form', 'locale']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'DescriptionList',
+    description: 'Responsive term and value list for summaries and specs',
+    category: 'display',
+    tags: ['details', 'summary', 'metadata', 'definitions']
+};

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