@dryui/ui 1.7.4 → 1.9.0

package/dist/card/card-root.svelte

@@ -10,6 +10,7 @@
 		orientation?: 'vertical' | 'horizontal';
 		variant?: 'default' | 'elevated' | 'interactive';
 		size?: 'default' | 'sm';
+		bordered?: boolean;
 		children: Snippet;
 	}
 
@@ -20,6 +21,7 @@
 		orientation,
 		variant = 'default',
 		size = 'default',
+		bordered = false,
 		class: className,
 		children,
 		...rest
@@ -32,6 +34,7 @@
 		data-card
 		data-selected={selected ? '' : undefined}
 		data-orientation={orientation}
+		data-bordered={bordered ? '' : undefined}
 		{...variantAttrs({
 			variant: variant !== 'default' ? variant : undefined,
 			size: size !== 'default' ? size : undefined
@@ -50,6 +53,7 @@
 		data-card
 		data-selected={selected ? '' : undefined}
 		data-orientation={orientation}
+		data-bordered={bordered ? '' : undefined}
 		{...variantAttrs({
 			variant: variant !== 'default' ? variant : undefined,
 			size: size !== 'default' ? size : undefined
@@ -63,22 +67,27 @@
 {/if}
 
 <style>
+	/* outer: var(--dry-radius-card); children inside the padded region use var(--dry-radius-nested-card). */
+
 	[data-card] {
-		--dry-card-radius: var(--dry-radius-2xl);
-		--dry-radius-nested: max(
-			var(--dry-radius-sm),
-			calc(var(--dry-card-radius) - var(--dry-card-padding, var(--dry-space-8)))
-		);
-		--dry-btn-radius: var(--dry-radius-nested);
+		--dry-card-radius: var(--dry-radius-card);
+		--dry-card-padding: var(--dry-padding-card);
+		--dry-btn-radius: var(--dry-radius-nested-card);
 
 		container-type: inline-size;
 		display: grid;
 		background: var(--dry-card-bg, var(--dry-surface-bg, var(--dry-color-bg-raised)));
+		border-radius: var(--dry-card-radius, var(--dry-surface-radius, var(--dry-radius-card)));
+		box-shadow: var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-sm)));
+		overflow: hidden;
+		transition: box-shadow var(--dry-duration-fast) var(--dry-ease-out);
+	}
+
+	/* ── Bordered escape hatch (retain the 1px border look) ────────────────── */
+
+	[data-card][data-bordered] {
 		border: 1px solid
 			var(--dry-card-border, var(--dry-surface-border, var(--dry-color-stroke-weak)));
-		border-radius: var(--dry-card-radius, var(--dry-surface-radius, var(--dry-radius-2xl)));
-		box-shadow: var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-raised)));
-		overflow: hidden;
 	}
 
 	/* ── Selected state ────────────────────────────────────────────────────── */
@@ -93,7 +102,7 @@
 		outline-offset: -2px;
 		box-shadow:
 			inset 0 0 0 1px var(--dry-card-selected-ring-color),
-			var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-raised)));
+			var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-sm)));
 	}
 
 	/* ── Clickable card (button) ───────────────────────────────────────────── */
@@ -107,13 +116,12 @@
 		text-align: inherit;
 		cursor: pointer;
 		transition:
-			box-shadow var(--dry-duration-normal, 200ms) ease,
+			box-shadow var(--dry-duration-fast) var(--dry-ease-out),
 			transform var(--dry-duration-fast, 100ms) ease;
 	}
 
 	button[data-card]:hover {
-		box-shadow: var(--dry-shadow-md, 0 4px 6px -1px rgb(15 23 42 / 0.1));
-		border-color: var(--dry-color-stroke-strong);
+		box-shadow: var(--dry-shadow-sm-hover);
 	}
 
 	button[data-card]:active {
@@ -135,11 +143,10 @@
 		grid-auto-flow: column;
 	}
 
-	/* ── Variant: elevated (shadow-only separation, no border) ─────────────── */
+	/* ── Variant: elevated (shadow-only separation, stronger shadow) ───────── */
 
 	[data-card][data-variant='elevated'] {
 		--dry-card-bg: var(--dry-color-bg-overlay);
-		border-color: transparent;
 		--dry-card-shadow: var(--dry-shadow-md);
 	}
 
@@ -148,13 +155,16 @@
 	[data-card][data-variant='interactive'] {
 		cursor: pointer;
 		transition:
-			box-shadow var(--dry-duration-normal) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-out),
 			transform var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
 	[data-card][data-variant='interactive']:hover {
-		box-shadow: var(--dry-shadow-md);
-		border-color: var(--dry-color-stroke-strong);
+		box-shadow: var(--dry-shadow-sm-hover);
+	}
+
+	[data-card][data-variant='elevated']:hover {
+		box-shadow: var(--dry-shadow-md-hover);
 	}
 
 	[data-card][data-variant='interactive']:active {

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

@@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<HTMLElement> {
     orientation?: 'vertical' | 'horizontal';
     variant?: 'default' | 'elevated' | 'interactive';
     size?: 'default' | 'sm';
+    bordered?: boolean;
     children: Snippet;
 }
 declare const CardRoot: import("svelte").Component<Props, {}, "">;

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Card',
+    description: 'Contained content surface with header/content/footer sections',
+    category: 'display',
+    tags: ['surface', 'container', 'content', 'panel']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Carousel',
+    description: 'Scrollable content carousel with slide navigation',
+    category: 'display',
+    tags: ['slider', 'carousel', 'scroll', 'gallery', 'slideshow']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Chart',
+    description: 'SVG-based chart with bars, lines, and axes',
+    category: 'display',
+    tags: ['chart', 'graph', 'bar', 'line', 'data', 'visualization']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ChatThread',
+    description: 'Conversation thread container with restart action and auto-scroll behavior',
+    category: 'display',
+    tags: ['chat', 'thread', 'conversation', 'log']
+};

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Checkbox',
+    description: 'Boolean toggle input with indeterminate state',
+    category: 'input',
+    tags: ['form', 'toggle', 'boolean', 'check']
+};

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-label.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<span data-chip-group-label class={className} {...rest}>
+	{@render children()}
+</span>
+
+<style>
+	[data-chip-group-label] {
+		display: inline-block;
+		font-size: var(--dry-chip-group-label-size, var(--dry-type-tiny-size, var(--dry-text-xs-size)));
+		font-weight: var(--dry-chip-group-label-weight, 600);
+		letter-spacing: var(--dry-chip-group-label-tracking, 0.1em);
+		line-height: var(--dry-chip-group-label-leading, 1.2);
+		text-transform: uppercase;
+		color: var(--dry-chip-group-label-color, var(--dry-color-text-weak));
+	}
+</style>

package/dist/chip-group/chip-group-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    children: Snippet;
+}
+declare const ChipGroupLabel: import("svelte").Component<Props, {}, "">;
+type ChipGroupLabel = ReturnType<typeof ChipGroupLabel>;
+export default ChipGroupLabel;

package/dist/chip-group/chip-group-root.svelte

@@ -10,6 +10,8 @@
 		disabled?: boolean;
 		orientation?: 'horizontal' | 'vertical';
 		size?: 'sm' | 'md';
+		gap?: 'sm' | 'md' | 'lg';
+		justify?: 'start' | 'center' | 'end' | 'between';
 		children: Snippet;
 	}
 
@@ -19,6 +21,8 @@
 		disabled = false,
 		orientation = 'horizontal',
 		size = 'sm',
+		gap = 'md',
+		justify = 'start',
 		class: className,
 		children,
 		...rest
@@ -52,7 +56,7 @@
 <div
 	role="group"
 	data-chip-group
-	{...variantAttrs({ orientation, size })}
+	{...variantAttrs({ orientation, size, gap, justify })}
 	class={className}
 	{...rest}
 >
@@ -60,21 +64,55 @@
 </div>
 
 <style>
+	/*
+	 * ChipGroup wraps tag/chip clusters with content-driven flow.
+	 * This is the sanctioned home for flex-wrap: the `[data-chip-group]`
+	 * attribute is carved out of `dryui/no-flex` so chip/tag wrapping
+	 * reads naturally without grid hacks.
+	 */
 	[data-chip-group] {
-		display: inline-grid;
-		grid-template-columns: repeat(auto-fill, minmax(min-content, max-content));
-		gap: var(--dry-space-2);
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--dry-chip-group-gap, var(--dry-space-2));
 	}
 
-	[data-chip-group][data-orientation='horizontal'] {
-		grid-auto-flow: column;
+	[data-chip-group][data-orientation='vertical'] {
+		flex-direction: column;
+		align-items: flex-start;
 	}
 
-	[data-chip-group][data-orientation='vertical'] {
-		grid-template-columns: 1fr;
-		justify-items: start;
+	/* Gap presets — map onto --dry-space tokens. */
+	[data-chip-group][data-gap='sm'] {
+		--dry-chip-group-gap: var(--dry-space-1);
+	}
+
+	[data-chip-group][data-gap='md'] {
+		--dry-chip-group-gap: var(--dry-space-2);
+	}
+
+	[data-chip-group][data-gap='lg'] {
+		--dry-chip-group-gap: var(--dry-space-3);
+	}
+
+	/* Justify presets. */
+	[data-chip-group][data-justify='start'] {
+		justify-content: flex-start;
+	}
+
+	[data-chip-group][data-justify='center'] {
+		justify-content: center;
+	}
+
+	[data-chip-group][data-justify='end'] {
+		justify-content: flex-end;
+	}
+
+	[data-chip-group][data-justify='between'] {
+		justify-content: space-between;
 	}
 
+	/* Size presets retained for backward-compatible Item styling. */
 	[data-chip-group][data-size='sm'] {
 		--dry-chip-group-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
 		--dry-chip-group-padding-x: var(--dry-space-2_5);

package/dist/chip-group/chip-group-root.svelte.d.ts

@@ -6,6 +6,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
     orientation?: 'horizontal' | 'vertical';
     size?: 'sm' | 'md';
+    gap?: 'sm' | 'md' | 'lg';
+    justify?: 'start' | 'center' | 'end' | 'between';
     children: Snippet;
 }
 declare const ChipGroupRoot: import("svelte").Component<Props, {}, "value">;

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/chip-group/index.d.ts

@@ -1,11 +1,14 @@
-import type { ChipGroupRootProps as PrimitiveChipGroupRootProps } from '@dryui/primitives';
+import type { ChipGroupRootProps as PrimitiveChipGroupRootProps, ChipGroupLabelProps as PrimitiveChipGroupLabelProps } from '@dryui/primitives';
 export type { ChipGroupItemProps } from '@dryui/primitives';
 export interface ChipGroupRootProps extends PrimitiveChipGroupRootProps {
     size?: 'sm' | 'md';
 }
+export type ChipGroupLabelProps = PrimitiveChipGroupLabelProps;
 import ChipGroupRoot from './chip-group-root.svelte';
 import ChipGroupItem from './chip-group-button-item.svelte';
+import ChipGroupLabel from './chip-group-label.svelte';
 export declare const ChipGroup: {
     Root: typeof ChipGroupRoot;
     Item: typeof ChipGroupItem;
+    Label: typeof ChipGroupLabel;
 };

package/dist/chip-group/index.js

@@ -1,6 +1,8 @@
 import ChipGroupRoot from './chip-group-root.svelte';
 import ChipGroupItem from './chip-group-button-item.svelte';
+import ChipGroupLabel from './chip-group-label.svelte';
 export const ChipGroup = {
     Root: ChipGroupRoot,
-    Item: ChipGroupItem
+    Item: ChipGroupItem,
+    Label: ChipGroupLabel
 };

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-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.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/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.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

@@ -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

@@ -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: var(--dry-radius-nested-dialog);
 
 		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);