@dryui/ui 3.0.0 → 4.0.1

package/src/multi-select-combobox/multi-select-combobox-root-input.svelte

@@ -0,0 +1,286 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setMultiSelectComboboxCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: string[];
+		query?: string;
+		open?: boolean;
+		disabled?: boolean;
+		name?: string;
+		maxSelections?: number;
+		onvaluechange?: (value: string[]) => void;
+		onquerychange?: (query: string) => void;
+		children: Snippet;
+	}
+
+	let {
+		value = $bindable([]),
+		query = $bindable(''),
+		open = $bindable(false),
+		disabled = false,
+		name,
+		maxSelections = 0,
+		onvaluechange,
+		onquerychange,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const uid = $props.id();
+	const inputId = `multi-select-combobox-input-${uid}`;
+	const contentId = `multi-select-combobox-content-${uid}`;
+
+	let rootEl = $state<HTMLDivElement>();
+	let inputEl = $state<HTMLInputElement | null>(null);
+	let activeItemId = $state('');
+	let itemIds = $state<string[]>([]);
+
+	function setQueryValue(nextQuery: string, notify = true) {
+		query = nextQuery;
+		if (notify) {
+			onquerychange?.(nextQuery);
+		}
+	}
+
+	function setSelectedValues(nextValue: string[]) {
+		value = nextValue;
+		onvaluechange?.(nextValue);
+	}
+
+	function focusInput() {
+		inputEl?.focus();
+	}
+
+	function canSelectValue(itemValue: string) {
+		return value.includes(itemValue) || maxSelections === 0 || value.length < maxSelections;
+	}
+
+	function getEnabledItems() {
+		const contentEl = document.getElementById(contentId);
+		if (!(contentEl instanceof HTMLElement)) {
+			return [];
+		}
+
+		return Array.from(
+			contentEl.querySelectorAll<HTMLElement>('[role="option"]:not([aria-disabled="true"])')
+		);
+	}
+
+	function show() {
+		if (!disabled) {
+			open = true;
+		}
+	}
+
+	function close() {
+		open = false;
+		activeItemId = '';
+	}
+
+	function selectValue(itemValue: string) {
+		if (disabled || !canSelectValue(itemValue)) {
+			return false;
+		}
+
+		if (value.includes(itemValue)) {
+			setSelectedValues(value.filter((entry) => entry !== itemValue));
+		} else {
+			setSelectedValues([...value, itemValue]);
+		}
+
+		setQueryValue('');
+		activeItemId = '';
+		focusInput();
+		return true;
+	}
+
+	function removeValue(itemValue: string) {
+		if (!value.includes(itemValue)) {
+			return;
+		}
+
+		setSelectedValues(value.filter((entry) => entry !== itemValue));
+	}
+
+	function removeLastValue() {
+		const lastValue = value[value.length - 1];
+		if (lastValue) {
+			removeValue(lastValue);
+		}
+	}
+
+	$effect(() => {
+		const node = rootEl;
+		if (!node) return;
+
+		function handlePointerDown(event: PointerEvent) {
+			if (event.button !== 0) {
+				return;
+			}
+
+			const target = event.target;
+			if (!(target instanceof HTMLElement)) {
+				return;
+			}
+
+			if (target.closest('button, a, input, textarea, select, label')) {
+				return;
+			}
+
+			event.preventDefault();
+			focusInput();
+			show();
+		}
+
+		node.addEventListener('pointerdown', handlePointerDown);
+		return () => {
+			node.removeEventListener('pointerdown', handlePointerDown);
+		};
+	});
+
+	setMultiSelectComboboxCtx({
+		get open() {
+			return open;
+		},
+		get query() {
+			return query;
+		},
+		get value() {
+			return value;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get maxSelections() {
+			return maxSelections;
+		},
+		get activeItemId() {
+			return activeItemId;
+		},
+		get itemCount() {
+			return itemIds.length;
+		},
+		get inputId() {
+			return inputId;
+		},
+		get contentId() {
+			return contentId;
+		},
+		get anchorEl() {
+			return rootEl ?? null;
+		},
+		get inputEl() {
+			return inputEl;
+		},
+		set inputEl(element: HTMLInputElement | null) {
+			inputEl = element;
+		},
+		show,
+		close,
+		setQuery(value, notify = true) {
+			setQueryValue(value, notify);
+		},
+		setActiveItem(id: string) {
+			activeItemId = id;
+		},
+		registerItem(id: string) {
+			untrack(() => {
+				if (!itemIds.includes(id)) {
+					itemIds = [...itemIds, id];
+				}
+			});
+		},
+		unregisterItem(id: string) {
+			untrack(() => {
+				itemIds = itemIds.filter((itemId) => itemId !== id);
+				if (activeItemId === id) {
+					activeItemId = '';
+				}
+			});
+		},
+		getEnabledItems,
+		isSelected(itemValue: string) {
+			return value.includes(itemValue);
+		},
+		canSelect(itemValue: string) {
+			return canSelectValue(itemValue);
+		},
+		selectValue,
+		removeValue,
+		removeLastValue,
+		focusInput
+	});
+</script>
+
+<div data-multi-select-wrapper class={className} {...rest}>
+	<div
+		bind:this={rootEl}
+		role="group"
+		data-multi-select-root
+		data-state={open ? 'open' : 'closed'}
+		data-disabled={disabled || undefined}
+	>
+		{@render children()}
+
+		{#if name}
+			{#each value as selectedValue (selectedValue)}
+				<input type="hidden" {name} value={selectedValue} disabled={disabled || undefined} />
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<style>
+	[data-multi-select-wrapper] {
+		container-type: inline-size;
+		display: grid;
+	}
+
+	[data-multi-select-root] {
+		/* auto-fit requires a fixed-size min for the column track; 48px is the
+		   smallest comfortable width for a short token like "Vue ×". auto-fit
+		   collapses trailing empty tracks so tokens pack tightly from the
+		   start edge. The original min-content → max-content fell back to
+		   single-column because max-content isn't a <fixed-size> under the
+		   auto-fill/auto-fit spec. */
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(48px, max-content));
+		justify-content: start;
+		gap: var(--dry-multi-select-gap, var(--dry-space-1_5));
+		padding: var(--dry-multi-select-padding, var(--dry-space-2));
+		border: 1px solid var(--dry-multi-select-border, var(--dry-color-stroke-strong));
+		border-radius: var(--dry-multi-select-radius, var(--dry-radius-md));
+		background: var(--dry-multi-select-bg, var(--dry-color-bg-raised));
+		min-height: 44px;
+		align-items: center;
+		box-sizing: border-box;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+		cursor: text;
+	}
+
+	[data-multi-select-root]:focus-within {
+		border-color: var(--dry-color-stroke-focus);
+		box-shadow: 0 0 0 2px var(--dry-color-stroke-focus);
+		outline: none;
+	}
+
+	[data-multi-select-root][data-disabled] {
+		background: var(--dry-color-bg-sunken);
+		border-color: var(--dry-color-stroke-disabled);
+		color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	@container (max-width: 200px) {
+		[data-multi-select-root] {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

package/src/multi-select-combobox/multi-select-combobox-selection-item.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getMultiSelectComboboxCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+		value: string;
+		children?: Snippet | undefined;
+	}
+
+	let { class: className, value, children, ...rest }: Props = $props();
+
+	const ctx = getMultiSelectComboboxCtx();
+</script>
+
+{#if ctx.isSelected(value)}
+	<span
+		role="listitem"
+		data-multi-select-selection-item
+		data-value={value}
+		class={className}
+		{...rest}
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			{value}
+		{/if}
+	</span>
+{/if}
+
+<style>
+	[data-multi-select-selection-item] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		padding-block: 4px;
+		padding-inline-start: var(--dry-space-2);
+		padding-inline-end: 0;
+		background: var(--dry-color-fill-brand-weak);
+		color: var(--dry-color-text-brand);
+		box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
+		border-radius: var(--dry-radius-md);
+		overflow: hidden;
+		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		font-family: var(--dry-font-sans);
+		font-weight: 500;
+		line-height: 1.5;
+		white-space: nowrap;
+		user-select: none;
+		--dry-btn-radius: 0;
+		--dry-btn-padding-x: var(--dry-space-2);
+		--dry-btn-padding-y: 0;
+		--dry-btn-font-size: inherit;
+	}
+
+	@container (max-width: 200px) {
+		[data-multi-select-selection-item] {
+			grid-template-columns: 1fr auto;
+		}
+	}
+</style>

package/src/multi-select-combobox/multi-select-combobox-selection-list.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getMultiSelectComboboxCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getMultiSelectComboboxCtx();
+</script>
+
+<div
+	role="list"
+	data-multi-select-selection-list
+	data-empty={ctx.value.length === 0 || undefined}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-multi-select-selection-list] {
+		display: contents;
+	}
+</style>

package/src/multi-select-combobox/multi-select-combobox-selection-remove-button.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CloseButtonBase from '../internal/close-button-base.svelte';
+	import { getMultiSelectComboboxCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		value: string;
+		label?: string | undefined;
+	}
+
+	let { value, label, onclick, ...rest }: Props = $props();
+
+	const ctx = getMultiSelectComboboxCtx();
+
+	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		if (ctx.disabled) {
+			return;
+		}
+
+		ctx.removeValue(value);
+		ctx.focusInput();
+
+		if (onclick) {
+			(onclick as (event: MouseEvent & { currentTarget: HTMLButtonElement }) => void)(event);
+		}
+	}
+</script>
+
+<CloseButtonBase
+	variant="bare"
+	size="sm"
+	aria-label={`Remove selection: ${label ?? value}`}
+	disabled={ctx.disabled}
+	{...rest}
+	onclick={handleClick}
+/>

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'MultiSelectCombobox',
+	description: 'Searchable multi-select combobox with removable selected tokens',
+	category: 'form',
+	tags: ['form', 'multiselect', 'combobox', 'autocomplete', 'tokens', 'chips']
+};

package/src/navigation-menu/context.svelte.ts

@@ -0,0 +1,18 @@
+import { createContext } from '@dryui/primitives';
+
+export interface NavigationMenuContext {
+	readonly activeItem: string | null;
+	openItem: (id: string) => void;
+	closeItem: () => void;
+}
+export const [setNavigationMenuCtx, getNavigationMenuCtx] =
+	createContext<NavigationMenuContext>('navigation-menu');
+
+export interface NavigationMenuItemContext {
+	readonly itemId: string;
+	readonly triggerId: string;
+	readonly contentId: string;
+	readonly open: boolean;
+}
+export const [setNavigationMenuItemCtx, getNavigationMenuItemCtx] =
+	createContext<NavigationMenuItemContext>('navigation-menu-item');

package/src/navigation-menu/index.ts

@@ -0,0 +1,50 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+
+export interface NavigationMenuRootProps extends HTMLAttributes<HTMLElement> {
+	children: Snippet;
+}
+
+export interface NavigationMenuListProps extends HTMLAttributes<HTMLUListElement> {
+	children: Snippet;
+}
+
+export interface NavigationMenuItemProps {
+	children: Snippet;
+}
+
+export interface NavigationMenuTriggerProps extends HTMLButtonAttributes {
+	children: Snippet;
+}
+
+export interface NavigationMenuContentProps extends HTMLAttributes<HTMLDivElement> {
+	children: Snippet;
+}
+
+export interface NavigationMenuLinkProps extends HTMLAnchorAttributes {
+	active?: boolean;
+	children: Snippet;
+}
+
+import NavigationMenuRoot from './navigation-menu-root.svelte';
+import NavigationMenuList from './navigation-menu-list.svelte';
+import NavigationMenuItem from './navigation-menu-item.svelte';
+import NavigationMenuTrigger from './navigation-menu-trigger-button.svelte';
+import NavigationMenuContent from './navigation-menu-content.svelte';
+import NavigationMenuLink from './navigation-menu-link.svelte';
+
+export const NavigationMenu: {
+	Root: typeof NavigationMenuRoot;
+	List: typeof NavigationMenuList;
+	Item: typeof NavigationMenuItem;
+	Trigger: typeof NavigationMenuTrigger;
+	Content: typeof NavigationMenuContent;
+	Link: typeof NavigationMenuLink;
+} = {
+	Root: NavigationMenuRoot,
+	List: NavigationMenuList,
+	Item: NavigationMenuItem,
+	Trigger: NavigationMenuTrigger,
+	Content: NavigationMenuContent,
+	Link: NavigationMenuLink
+};

package/src/navigation-menu/navigation-menu-content.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getNavigationMenuCtx, getNavigationMenuItemCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getNavigationMenuCtx();
+	const itemCtx = getNavigationMenuItemCtx();
+
+	function handlePointerEnter() {
+		ctx.openItem(itemCtx.itemId);
+	}
+
+	function handlePointerLeave() {
+		ctx.closeItem();
+	}
+</script>
+
+{#if itemCtx.open}
+	<div
+		id={itemCtx.contentId}
+		role="region"
+		aria-labelledby={itemCtx.triggerId}
+		data-state={itemCtx.open ? 'open' : 'closed'}
+		data-nav-menu-content
+		class={className}
+		onpointerenter={handlePointerEnter}
+		onpointerleave={handlePointerLeave}
+		{...rest}
+	>
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	[data-nav-menu-content] {
+		position: absolute;
+		inset-block-start: calc(100% + var(--dry-space-2));
+		inset-inline-start: 0;
+		z-index: 20;
+		display: grid;
+		grid-template-columns: minmax(16rem, max-content);
+		gap: var(--dry-space-1);
+		padding: var(--dry-nav-menu-content-padding);
+		background: var(--dry-nav-menu-content-bg);
+		border: 1px solid var(--dry-nav-menu-content-border);
+		border-radius: var(--dry-nav-menu-content-radius);
+		box-shadow: var(--dry-nav-menu-content-shadow);
+	}
+</style>

package/src/navigation-menu/navigation-menu-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setNavigationMenuItemCtx, getNavigationMenuCtx } from './context.svelte.js';
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	const ctx = getNavigationMenuCtx();
+	const uid = $props.id();
+	const itemId = `nav-item-${uid}`;
+	const triggerId = `nav-trigger-${uid}`;
+	const contentId = `nav-content-${uid}`;
+
+	setNavigationMenuItemCtx({
+		itemId,
+		triggerId,
+		contentId,
+		get open() {
+			return ctx.activeItem === itemId;
+		}
+	});
+</script>
+
+<li>
+	{@render children()}
+</li>
+
+<style>
+	li {
+		position: relative;
+	}
+</style>

package/src/navigation-menu/navigation-menu-link.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAnchorAttributes {
+		active?: boolean;
+		children: Snippet;
+	}
+
+	let { href, active = false, class: className, children, ...rest }: Props = $props();
+</script>
+
+<a {href} data-active={active || undefined} data-nav-menu-link class={className} {...rest}>
+	{@render children()}
+</a>
+
+<style>
+	[data-nav-menu-link] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		min-height: var(--dry-space-12);
+		gap: var(--dry-space-2);
+		padding: var(--dry-nav-menu-link-padding-y) var(--dry-nav-menu-link-padding-x);
+		border-radius: var(--dry-radius-md);
+		color: var(--dry-color-text-strong);
+		text-decoration: none;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-nav-menu-link]:hover {
+		background: var(--dry-color-fill);
+		color: var(--dry-color-text-strong);
+	}
+
+	[data-nav-menu-link][data-active] {
+		background: var(--dry-color-fill-brand-weak);
+		color: var(--dry-color-text-brand);
+		font-weight: 600;
+	}
+
+	[data-nav-menu-link]:focus-visible {
+		outline: var(--dry-focus-ring);
+		outline-offset: 2px;
+	}
+</style>

package/src/navigation-menu/navigation-menu-list.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLUListElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<ul data-nav-menu-list class={className} {...rest}>
+	{@render children()}
+</ul>
+
+<style>
+	[data-nav-menu-list] {
+		--dry-nav-menu-bg: var(--dry-color-bg-raised);
+		--dry-nav-menu-border: var(--dry-color-stroke-weak);
+		--dry-nav-menu-radius: var(--dry-radius-xl);
+		--dry-nav-menu-shadow: var(--dry-shadow-sm);
+		--dry-nav-menu-gap: var(--dry-space-1);
+		--dry-nav-menu-padding: var(--dry-space-2);
+		--dry-nav-menu-trigger-padding-x: var(--dry-space-3);
+		--dry-nav-menu-trigger-padding-y: var(--dry-space-2);
+		--dry-nav-menu-content-bg: var(--dry-color-bg-overlay);
+		--dry-nav-menu-content-border: var(--dry-color-stroke-weak);
+		--dry-nav-menu-content-radius: var(--dry-radius-xl);
+		--dry-nav-menu-content-shadow: var(--dry-shadow-lg);
+		--dry-nav-menu-content-padding: var(--dry-space-2);
+		--dry-nav-menu-link-padding-x: var(--dry-space-3);
+		--dry-nav-menu-link-padding-y: var(--dry-space-2);
+
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: stretch;
+		gap: var(--dry-nav-menu-gap);
+		margin: 0;
+		padding: var(--dry-nav-menu-padding);
+		list-style: none;
+		background: var(--dry-nav-menu-bg);
+		border: 1px solid var(--dry-nav-menu-border);
+		border-radius: var(--dry-nav-menu-radius);
+		box-shadow: var(--dry-nav-menu-shadow);
+	}
+</style>