@dryui/ui 3.0.0 → 4.0.1

package/src/menubar/menubar-content.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { createAnchoredPopover, createDismiss, createMenuNavigation } from '@dryui/primitives';
+	import { getMenubarCtx, getMenubarMenuCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		placement?: 'bottom' | 'bottom-start' | 'bottom-end';
+		offset?: number;
+		children: Snippet;
+	}
+
+	let {
+		class: className,
+		placement = 'bottom-start',
+		offset = 4,
+		children,
+		style,
+		...rest
+	}: Props = $props();
+
+	const ctx = getMenubarCtx();
+	const menuCtx = getMenubarMenuCtx();
+
+	let el = $state<HTMLDivElement>();
+	const triggerEl = $derived(
+		ctx.rootElement?.querySelector<HTMLElement>(`[data-menubar-trigger="${menuCtx.menuId}"]`) ??
+			null
+	);
+
+	const popover = createAnchoredPopover({
+		triggerEl: () => triggerEl,
+		contentEl: () => el ?? null,
+		open: () => menuCtx.open,
+		placement: () => placement,
+		offset: () => offset,
+		onAfterShow: (contentEl) => {
+			requestAnimationFrame(() => {
+				const focusable = contentEl.querySelector<HTMLElement>(
+					'[role="menuitem"]:not([data-disabled])'
+				);
+				if (focusable) {
+					focusable.focus();
+				} else {
+					contentEl.focus();
+				}
+			});
+		}
+	});
+
+	const menu = createMenuNavigation({
+		container: () => el ?? null,
+		orientation: 'vertical'
+	});
+
+	createDismiss({
+		enabled: () => menuCtx.open,
+		onDismiss: () => ctx.closeMenu(),
+		contentEl: () => el ?? null,
+		triggerEl: () => triggerEl,
+		preventDefaultOnEscape: true,
+		returnFocusTo: () => triggerEl
+	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (!el) return;
+		switch (e.key) {
+			case 'ArrowRight': {
+				e.preventDefault();
+				ctx.focusNextMenu(menuCtx.menuId, true);
+				return;
+			}
+			case 'ArrowLeft': {
+				e.preventDefault();
+				ctx.focusPrevMenu(menuCtx.menuId, true);
+				return;
+			}
+			case 'Escape': {
+				e.preventDefault();
+				ctx.closeMenu();
+				const trigger = ctx.rootElement?.querySelector<HTMLButtonElement>(
+					`[data-menubar-trigger="${menuCtx.menuId}"]`
+				);
+				trigger?.focus();
+				return;
+			}
+		}
+		menu.handleKeydown(e);
+	}
+</script>
+
+<div
+	bind:this={el}
+	use:popover.applyPosition={style}
+	popover="manual"
+	role="menu"
+	tabindex="-1"
+	aria-labelledby={triggerEl?.id}
+	data-menubar-content
+	data-dry-stagger
+	data-state={menuCtx.open ? 'open' : 'closed'}
+	class={className}
+	ontoggle={(e) => {
+		const newState = (e as ToggleEvent).newState === 'open';
+		if (!newState && menuCtx.open) {
+			ctx.closeMenu();
+		}
+	}}
+	onkeydown={handleKeydown}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	/* outer: var(--dry-radius-popover); children inside the padded region use var(--dry-radius-nested-popover). */
+	[data-menubar-content] {
+		/* Reset UA popover defaults */
+		inset: unset;
+		margin: 0;
+
+		background: var(--dry-menubar-bg, var(--dry-color-bg-overlay));
+		color: var(--dry-color-text-strong);
+		border: 1px solid var(--dry-menubar-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-menubar-radius, var(--dry-radius-popover));
+		box-shadow: var(--dry-shadow-overlay);
+		font-family: var(--dry-font-sans);
+		padding: var(--dry-space-1);
+
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
+			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
+	}
+
+	[data-menubar-content]:popover-open {
+		opacity: 1;
+		transform: scale(1) translateY(0);
+	}
+
+	@starting-style {
+		[data-menubar-content]:popover-open {
+			opacity: 0;
+			transform: scale(var(--dry-motion-scale-enter))
+				translateY(calc(var(--dry-motion-distance-xs) * -1));
+		}
+	}
+</style>

package/src/menubar/menubar-item.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getMenubarCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		disabled?: boolean;
+		onSelect?: () => void;
+		children: Snippet;
+	}
+
+	let {
+		class: className,
+		disabled,
+		onSelect,
+		children,
+		onclick,
+		onkeydown,
+		...rest
+	}: Props = $props();
+
+	const ctx = getMenubarCtx();
+
+	function handleClick(e: MouseEvent & { currentTarget: HTMLDivElement }) {
+		if (disabled) return;
+		if (onSelect) onSelect();
+		if (onclick) (onclick as (e: MouseEvent & { currentTarget: HTMLDivElement }) => void)(e);
+		ctx.closeMenu();
+	}
+
+	function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLDivElement }) {
+		if (disabled) return;
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			(e.currentTarget as HTMLElement).click();
+		}
+		if (onkeydown) (onkeydown as (e: KeyboardEvent & { currentTarget: HTMLDivElement }) => void)(e);
+	}
+</script>
+
+<div
+	role="menuitem"
+	tabindex={disabled ? undefined : -1}
+	data-menubar-item
+	data-disabled={disabled || undefined}
+	class={className}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-menubar-item] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding: var(--dry-menu-item-padding, var(--dry-space-2_5) var(--dry-space-2));
+		border-radius: var(--dry-menu-item-radius, var(--dry-radius-nested-popover));
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		cursor: pointer;
+		user-select: none;
+		outline: none;
+		color: var(--dry-color-text-strong);
+		min-height: var(--dry-space-11);
+
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-out),
+			transform var(--dry-duration-fast) var(--dry-ease-out);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(4px);
+		}
+	}
+
+	[data-menubar-item]:hover:not([data-disabled]),
+	[data-menubar-item]:focus-visible {
+		background: var(--dry-color-fill);
+	}
+
+	[data-menubar-item]:active:not([data-disabled]) {
+		background: var(--dry-color-fill-hover);
+	}
+
+	[data-menubar-item][data-disabled] {
+		color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+</style>

package/{dist/card/card-header.svelte → src/menubar/menubar-label.svelte}

@@ -9,19 +9,15 @@
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<div class={className} data-card-header {...rest}>
+<div role="presentation" data-menubar-label class={className} {...rest}>
 	{@render children()}
 </div>
 
 <style>
-	[data-card-header] {
-		padding: var(--dry-card-padding, var(--dry-padding-card));
-		border-bottom: 1px solid var(--dry-card-border, var(--dry-color-stroke-weak));
-	}
-
-	@container (max-width: 300px) {
-		[data-card-header] {
-			padding: var(--dry-space-4);
-		}
+	[data-menubar-label] {
+		padding: var(--dry-space-1_5) var(--dry-space-2);
+		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		color: var(--dry-color-text-weak);
+		font-weight: 500;
 	}
 </style>

package/src/menubar/menubar-menu.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getMenubarCtx, setMenubarMenuCtx } from './context.svelte.js';
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	const uid = $props.id();
+	const menuId = `menubar-menu-${uid}`;
+	const ctx = getMenubarCtx();
+
+	$effect(() => {
+		ctx.registerMenu(menuId);
+		return () => ctx.unregisterMenu(menuId);
+	});
+
+	const open = $derived(ctx.activeMenu === menuId);
+
+	setMenubarMenuCtx({
+		get menuId() {
+			return menuId;
+		},
+		get open() {
+			return open;
+		}
+	});
+</script>
+
+{@render children()}

package/src/menubar/menubar-root.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setMenubarCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	let activeMenu = $state<string | null>(null);
+	let menuIds: string[] = [];
+	let rootEl = $state<HTMLDivElement>();
+
+	setMenubarCtx({
+		get activeMenu() {
+			return activeMenu;
+		},
+		get hasOpenMenu() {
+			return activeMenu !== null;
+		},
+		get rootElement() {
+			return rootEl ?? null;
+		},
+		openMenu(id) {
+			activeMenu = id;
+		},
+		closeMenu() {
+			activeMenu = null;
+		},
+		registerMenu(id) {
+			if (!menuIds.includes(id)) menuIds.push(id);
+		},
+		unregisterMenu(id) {
+			menuIds = menuIds.filter((m) => m !== id);
+		},
+		getMenuIds() {
+			return menuIds;
+		},
+		focusNextMenu(currentId, open = false) {
+			const idx = menuIds.indexOf(currentId);
+			const nextIdx = (idx + 1) % menuIds.length;
+			const nextId = menuIds[nextIdx] ?? null;
+			activeMenu = open ? nextId : null;
+			requestAnimationFrame(() => {
+				rootEl?.querySelector<HTMLButtonElement>(`[data-menubar-trigger="${nextId}"]`)?.focus();
+			});
+		},
+		focusPrevMenu(currentId, open = false) {
+			const idx = menuIds.indexOf(currentId);
+			const prevIdx = (idx - 1 + menuIds.length) % menuIds.length;
+			const prevId = menuIds[prevIdx] ?? null;
+			activeMenu = open ? prevId : null;
+			requestAnimationFrame(() => {
+				rootEl?.querySelector<HTMLButtonElement>(`[data-menubar-trigger="${prevId}"]`)?.focus();
+			});
+		}
+	});
+</script>
+
+<div bind:this={rootEl} role="menubar" data-menubar-root class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-menubar-root] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-1);
+		padding: var(--dry-space-1);
+		background: var(--dry-color-bg-overlay);
+		border: 1px solid var(--dry-color-stroke-weak);
+		border-radius: var(--dry-radius-lg);
+	}
+</style>

package/src/menubar/menubar-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+	let { class: className, ...rest }: Props = $props();
+</script>
+
+<div role="separator" data-menubar-separator class={className} {...rest}></div>
+
+<style>
+	[data-menubar-separator] {
+		height: 1px;
+		background: var(--dry-color-stroke-weak);
+		margin: var(--dry-space-1) 0;
+	}
+</style>

package/src/menubar/menubar.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Menubar',
+	description: 'Horizontal menu bar with dropdown menus',
+	category: 'navigation',
+	tags: ['menu', 'menubar', 'dropdown', 'navigation']
+};

package/src/motion/enter.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		index?: number;
+		duration?: string;
+		as?: string;
+		children?: Snippet;
+	}
+
+	let { index = 0, duration, as = 'div', class: className, children, ...rest }: Props = $props();
+
+	let el = $state<HTMLElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.setProperty('--dry-enter-index', String(index));
+		if (duration) {
+			el.style.setProperty('--dry-enter-duration', duration);
+		} else {
+			el.style.removeProperty('--dry-enter-duration');
+		}
+	});
+</script>
+
+<svelte:element this={as} bind:this={el} class={['dry-enter', className]} {...rest}>
+	{@render children?.()}
+</svelte:element>

package/src/motion/enter.ts

@@ -0,0 +1,46 @@
+import type { TransitionConfig } from 'svelte/transition';
+import { cubicOut } from 'svelte/easing';
+
+export interface EnterOptions {
+	index?: number;
+	delay?: number;
+	duration?: number;
+	translate?: number;
+	blur?: number;
+	easing?: (t: number) => number;
+}
+
+function resolveMs(value: string | undefined, fallback: number): number {
+	if (!value) return fallback;
+	const trimmed = value.trim();
+	if (trimmed.endsWith('ms')) return parseFloat(trimmed);
+	if (trimmed.endsWith('s')) return parseFloat(trimmed) * 1000;
+	return parseFloat(trimmed) || fallback;
+}
+
+export function enter(node: Element, opts: EnterOptions = {}): TransitionConfig {
+	if (typeof window === 'undefined') {
+		return { duration: 0, css: () => '' };
+	}
+	const styles = getComputedStyle(node as HTMLElement);
+	const duration = opts.duration ?? resolveMs(styles.getPropertyValue('--dry-enter-duration'), 800);
+	const stagger = resolveMs(styles.getPropertyValue('--dry-enter-stagger-section'), 100);
+	const index = opts.index ?? 0;
+	const max = parseFloat(styles.getPropertyValue('--dry-enter-stagger-max') || '16') || 16;
+	const delay = opts.delay ?? Math.min(index, max) * stagger;
+	const translate =
+		opts.translate ?? (parseFloat(styles.getPropertyValue('--dry-enter-translate') || '8') || 8);
+	const blur = opts.blur ?? (parseFloat(styles.getPropertyValue('--dry-enter-blur') || '5') || 5);
+	const easing = opts.easing ?? cubicOut;
+	return {
+		duration,
+		delay,
+		easing,
+		css: (t) => {
+			const eased = t;
+			const y = (1 - eased) * translate;
+			const b = (1 - eased) * blur;
+			return `transform: translateY(${y}px); filter: blur(${b}px); opacity: ${eased};`;
+		}
+	};
+}

package/src/motion/exit.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { leave } from './leave.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children?: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div out:leave data-dry-exit class={className} {...rest}>
+	{@render children?.()}
+</div>
+
+<style>
+	[data-dry-exit] {
+		display: grid;
+	}
+</style>

package/src/motion/index.ts

@@ -0,0 +1,7 @@
+export { default as Enter } from './enter.svelte';
+export { default as Exit } from './exit.svelte';
+export { default as Stagger } from './stagger.svelte';
+export { enter } from './enter.js';
+export { leave } from './leave.js';
+export type { EnterOptions } from './enter.js';
+export type { LeaveOptions } from './leave.js';

package/src/motion/leave.ts

@@ -0,0 +1,41 @@
+import type { TransitionConfig } from 'svelte/transition';
+import { cubicOut } from 'svelte/easing';
+
+export interface LeaveOptions {
+	delay?: number;
+	duration?: number;
+	translate?: number;
+	blur?: number;
+	easing?: (t: number) => number;
+}
+
+function resolveMs(value: string | undefined, fallback: number): number {
+	if (!value) return fallback;
+	const trimmed = value.trim();
+	if (trimmed.endsWith('ms')) return parseFloat(trimmed);
+	if (trimmed.endsWith('s')) return parseFloat(trimmed) * 1000;
+	return parseFloat(trimmed) || fallback;
+}
+
+export function leave(node: Element, opts: LeaveOptions = {}): TransitionConfig {
+	if (typeof window === 'undefined') {
+		return { duration: 0, css: () => '' };
+	}
+	const styles = getComputedStyle(node as HTMLElement);
+	const duration = opts.duration ?? resolveMs(styles.getPropertyValue('--dry-exit-duration'), 360);
+	const translate =
+		opts.translate ?? (parseFloat(styles.getPropertyValue('--dry-exit-translate') || '12') || 12);
+	const blur = opts.blur ?? (parseFloat(styles.getPropertyValue('--dry-exit-blur') || '4') || 4);
+	const easing = opts.easing ?? cubicOut;
+	return {
+		duration,
+		delay: opts.delay ?? 0,
+		easing,
+		css: (t) => {
+			const eased = t;
+			const y = (1 - eased) * translate;
+			const b = (1 - eased) * blur;
+			return `transform: translateY(${y}px); filter: blur(${b}px); opacity: ${eased};`;
+		}
+	};
+}

package/src/motion/motion.meta.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Motion',
+	description:
+		'Motion primitives module exported from @dryui/ui/motion: Enter/Exit/Stagger component wrappers plus `enter` / `leave` Svelte transition functions driven by --dry-enter-* and --dry-exit-* tokens.',
+	category: 'display',
+	tags: ['motion', 'animation', 'enter', 'exit', 'stagger', 'polish']
+};

package/src/motion/stagger.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		step?: 'section' | 'word' | 'letter' | number;
+		as?: string;
+		children?: Snippet;
+	}
+
+	let { step = 'section', as = 'div', class: className, children, ...rest }: Props = $props();
+
+	const stepValue = $derived.by(() => {
+		if (typeof step === 'number') return `${step}ms`;
+		if (step === 'letter') return 'var(--dry-enter-stagger-letter)';
+		if (step === 'word') return 'var(--dry-enter-stagger-word)';
+		return 'var(--dry-enter-stagger-section)';
+	});
+
+	let el = $state<HTMLElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.setProperty('--dry-stagger-step', stepValue);
+	});
+</script>
+
+<svelte:element this={as} bind:this={el} data-dry-stagger class={className} {...rest}>
+	{@render children?.()}
+</svelte:element>

package/src/multi-select-combobox/context.svelte.ts

@@ -0,0 +1,31 @@
+import { createContext } from '@dryui/primitives';
+
+export interface MultiSelectComboboxContext {
+	readonly open: boolean;
+	readonly query: string;
+	readonly value: string[];
+	readonly disabled: boolean;
+	readonly maxSelections: number;
+	readonly activeItemId: string;
+	readonly itemCount: number;
+	readonly inputId: string;
+	readonly contentId: string;
+	readonly anchorEl: HTMLElement | null;
+	inputEl: HTMLInputElement | null;
+	show: () => void;
+	close: () => void;
+	setQuery: (value: string, notify?: boolean) => void;
+	setActiveItem: (id: string) => void;
+	registerItem: (id: string) => void;
+	unregisterItem: (id: string) => void;
+	getEnabledItems: () => HTMLElement[];
+	isSelected: (value: string) => boolean;
+	canSelect: (value: string) => boolean;
+	selectValue: (value: string) => boolean;
+	removeValue: (value: string) => void;
+	removeLastValue: () => void;
+	focusInput: () => void;
+}
+
+export const [setMultiSelectComboboxCtx, getMultiSelectComboboxCtx] =
+	createContext<MultiSelectComboboxContext>('multi-select-combobox');

package/src/multi-select-combobox/index.ts

@@ -0,0 +1,43 @@
+export type {
+	MultiSelectComboboxRootProps,
+	MultiSelectComboboxInputProps,
+	MultiSelectComboboxContentProps,
+	MultiSelectComboboxGroupProps,
+	MultiSelectComboboxItemProps,
+	MultiSelectComboboxEmptyProps,
+	MultiSelectComboboxSelectionListProps,
+	MultiSelectComboboxSelectionItemProps,
+	MultiSelectComboboxSelectionRemoveProps
+} from '@dryui/primitives';
+
+import MultiSelectComboboxRoot from './multi-select-combobox-root-input.svelte';
+import MultiSelectComboboxInput from './multi-select-combobox-input.svelte';
+import MultiSelectComboboxContent from './multi-select-combobox-content.svelte';
+import MultiSelectComboboxGroup from './multi-select-combobox-group.svelte';
+import MultiSelectComboboxItem from './multi-select-combobox-item.svelte';
+import MultiSelectComboboxEmpty from './multi-select-combobox-empty.svelte';
+import MultiSelectComboboxSelectionList from './multi-select-combobox-selection-list.svelte';
+import MultiSelectComboboxSelectionItem from './multi-select-combobox-selection-item.svelte';
+import MultiSelectComboboxSelectionRemove from './multi-select-combobox-selection-remove-button.svelte';
+
+export const MultiSelectCombobox: {
+	Root: typeof MultiSelectComboboxRoot;
+	Input: typeof MultiSelectComboboxInput;
+	Content: typeof MultiSelectComboboxContent;
+	Group: typeof MultiSelectComboboxGroup;
+	Item: typeof MultiSelectComboboxItem;
+	Empty: typeof MultiSelectComboboxEmpty;
+	SelectionList: typeof MultiSelectComboboxSelectionList;
+	SelectionItem: typeof MultiSelectComboboxSelectionItem;
+	SelectionRemove: typeof MultiSelectComboboxSelectionRemove;
+} = {
+	Root: MultiSelectComboboxRoot,
+	Input: MultiSelectComboboxInput,
+	Content: MultiSelectComboboxContent,
+	Group: MultiSelectComboboxGroup,
+	Item: MultiSelectComboboxItem,
+	Empty: MultiSelectComboboxEmpty,
+	SelectionList: MultiSelectComboboxSelectionList,
+	SelectionItem: MultiSelectComboboxSelectionItem,
+	SelectionRemove: MultiSelectComboboxSelectionRemove
+};