@dryui/ui 1.2.0 → 1.3.1

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

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { createDismiss, createMenuNavigation } from '@dryui/primitives';
 	import { getContextMenuCtx } from './context.svelte.js';
 
-	const MENU_ITEM_SELECTOR = '[role="menuitem"]:not([data-disabled])';
-
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		children: Snippet;
 	}
@@ -15,15 +14,10 @@
 
 	let el = $state<HTMLDivElement>();
 
-	function getMenuItems(container: HTMLElement): HTMLElement[] {
-		return Array.from(container.querySelectorAll<HTMLElement>(MENU_ITEM_SELECTOR));
-	}
-
-	function focusItem(items: HTMLElement[], index: number): void {
-		if (items.length === 0) return;
-		const clamped = ((index % items.length) + items.length) % items.length;
-		items[clamped]?.focus();
-	}
+	const menu = createMenuNavigation({
+		container: () => el ?? null,
+		orientation: 'vertical'
+	});
 
 	$effect(() => {
 		if (ctx.open && el) {
@@ -32,80 +26,19 @@
 			el.style.top = `${ctx.position.y}px`;
 			if (!el.matches(':popover-open')) {
 				el.showPopover();
-				const items = getMenuItems(el);
-				const first = items[0];
-				if (first) {
-					first.focus();
-				} else {
-					el.focus();
-				}
+				menu.focusFirst();
 			}
 		} else if (!ctx.open && el?.matches(':popover-open')) {
 			el.hidePopover();
 		}
 	});
 
-	// Manual dismiss: close on click outside or Escape
-	$effect(() => {
-		if (!ctx.open) return;
-
-		function handlePointerDown(e: PointerEvent) {
-			if (el?.contains(e.target as Node)) return;
-			ctx.close();
-		}
-
-		function handleKeydown(e: KeyboardEvent) {
-			if (e.key === 'Escape') {
-				e.preventDefault();
-				ctx.close();
-			}
-		}
-
-		document.addEventListener('pointerdown', handlePointerDown);
-		document.addEventListener('keydown', handleKeydown, true);
-		return () => {
-			document.removeEventListener('pointerdown', handlePointerDown);
-			document.removeEventListener('keydown', handleKeydown, true);
-		};
+	createDismiss({
+		enabled: () => ctx.open,
+		onDismiss: () => ctx.close(),
+		contentEl: () => el ?? null,
+		preventDefaultOnEscape: true
 	});
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (!el) return;
-		const items = getMenuItems(el);
-		const currentIndex = items.indexOf(document.activeElement as HTMLElement);
-
-		switch (e.key) {
-			case 'ArrowDown': {
-				e.preventDefault();
-				focusItem(items, currentIndex + 1);
-				return;
-			}
-			case 'ArrowUp': {
-				e.preventDefault();
-				focusItem(items, currentIndex - 1);
-				return;
-			}
-			case 'Home': {
-				e.preventDefault();
-				focusItem(items, 0);
-				return;
-			}
-			case 'End': {
-				e.preventDefault();
-				focusItem(items, items.length - 1);
-				return;
-			}
-			default: {
-				if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-					const char = e.key.toLowerCase();
-					const match = items.find((item) =>
-						item.textContent?.trim().toLowerCase().startsWith(char)
-					);
-					if (match) match.focus();
-				}
-			}
-		}
-	}
 </script>
 
 <div
@@ -119,7 +52,7 @@
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
 	{style}
-	onkeydown={handleKeydown}
+	onkeydown={(e) => menu.handleKeydown(e)}
 	{...rest}
 >
 	{@render children()}

package/dist/diagram/diagram.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { SVGAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 	import type { DiagramConfig } from './types.js';
 	import { computeLayout } from './layout.js';
 
@@ -300,8 +301,7 @@
 					{@const WpIcon = wp.iconComponent}
 					<g
 						data-part="waypoint"
-						data-variant={wp.variant}
-						data-color={wp.color}
+						{...variantAttrs({ variant: wp.variant, color: wp.color })}
 						transform="translate({wp.x},{wp.y})"
 					>
 						<rect
@@ -349,8 +349,7 @@
 				{@const NodeIcon = node.iconComponent}
 				<g
 					data-part="node"
-					data-variant={node.variant}
-					data-color={node.color}
+					{...variantAttrs({ variant: node.variant, color: node.color })}
 					data-state={node.state}
 					transform="translate({node.x},{node.y})"
 				>

package/dist/dialog/dialog-content.svelte

@@ -2,115 +2,17 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getDialogCtx } from './context.svelte.js';
+	import ModalContent from '../internal/modal-content.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDialogElement> {
 		children: Snippet;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { children, ...rest }: Props = $props();
 
 	const ctx = getDialogCtx();
-
-	let dialogEl = $state<HTMLDialogElement>();
-
-	$effect(() => {
-		if (ctx.open && dialogEl && !dialogEl.open) {
-			dialogEl.showModal();
-		}
-		if (!ctx.open && dialogEl?.open) {
-			dialogEl.close();
-		}
-	});
 </script>
 
-<dialog
-	bind:this={dialogEl}
-	data-dialog-content
-	aria-labelledby={ctx.headerId}
-	data-state={ctx.open ? 'open' : 'closed'}
-	onclose={() => ctx.close()}
-	onclick={(e) => {
-		if (e.target === dialogEl) {
-			ctx.close();
-		}
-	}}
-	class={className}
-	{...rest}
->
-	<div data-dialog-panel>
-		{@render children()}
-	</div>
-</dialog>
-
-<style>
-	[data-dialog-content] {
-		position: fixed;
-		inset: 0;
-		/* dryui-allow width */
-		width: 100vw;
-		/* dryui-allow width */
-		max-width: none;
-		height: 100vh;
-		height: 100dvh;
-		max-height: none;
-		border: none;
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		padding: 0;
-		display: grid;
-		grid-template-columns: min(90vw, var(--dry-dialog-max-width, 32rem));
-		place-content: center;
-		place-items: center;
-		overflow: visible;
-	}
-
-	[data-dialog-content]:not([open]) {
-		display: none;
-	}
-
-	[data-dialog-content]::backdrop {
-		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop));
-		backdrop-filter: blur(var(--dry-overlay-blur, 12px));
-		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 12px));
-	}
-
-	[data-dialog-panel] {
-		--dry-dialog-border: var(--dry-overlay-border, var(--dry-color-stroke-weak));
-		--dry-dialog-padding: var(--dry-space-8);
-		--dry-radius-nested: max(
-			0px,
-			calc(
-				var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-2xl))) -
-					var(--dry-dialog-padding)
-			)
-		);
-
-		container-type: inline-size;
-		justify-self: stretch;
-		border: 1px solid var(--dry-dialog-border);
-		border-radius: var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-2xl)));
-		background: var(--dry-dialog-bg, var(--dry-overlay-bg, var(--dry-color-bg-overlay)));
-		color: var(--dry-color-text-strong);
-		box-shadow: var(--dry-dialog-shadow, var(--dry-overlay-shadow, var(--dry-shadow-overlay)));
-		padding: 0;
-		max-block-size: var(--dry-dialog-max-block-size, 85vh);
-		display: grid;
-		overflow: var(--dry-dialog-overflow, auto);
-
-		transition:
-			opacity var(--dry-duration-normal) var(--dry-ease-spring-snappy),
-			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
-	}
-
-	[data-dialog-content][data-state='open'] [data-dialog-panel] {
-		opacity: 1;
-		transform: scale(1) translateY(0);
-	}
-
-	@starting-style {
-		[data-dialog-content][open] [data-dialog-panel] {
-			opacity: 0;
-			transform: scale(var(--dry-motion-scale-enter)) translateY(var(--dry-motion-distance-sm));
-		}
-	}
-</style>
+<ModalContent {ctx} variant="dialog" side="center" {...rest}>
+	{@render children()}
+</ModalContent>

package/dist/drag-and-drop/drag-and-drop-item.svelte

@@ -12,7 +12,7 @@
 
 	const ctx = getDragAndDropCtx();
 
-	let itemIsDragging = $derived(ctx.draggedIndex === index);
+	let itemIsDragging = $derived(ctx.draggedIndex === index && ctx.isDragging);
 	let isOver = $derived(
 		(ctx.overIndex === index && ctx.isDragging && ctx.draggedIndex !== index) ||
 			ctx.foreignOverIndex === index

package/dist/drawer/drawer-dialog-content.svelte

@@ -2,167 +2,17 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getDrawerCtx } from './context.svelte.js';
+	import ModalContent from '../internal/modal-content.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDialogElement> {
 		children: Snippet;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { children, ...rest }: Props = $props();
 
 	const ctx = getDrawerCtx();
-
-	let dialogEl = $state<HTMLDialogElement>();
-
-	$effect(() => {
-		if (!dialogEl) return;
-
-		// Native <dialog> applies a max-width that leaves a strip beside edge drawers.
-		dialogEl.style.setProperty('max-width', 'none');
-
-		if (ctx.open && !dialogEl.open) {
-			dialogEl.showModal();
-		}
-		if (!ctx.open && dialogEl.open) {
-			dialogEl.close();
-		}
-	});
 </script>
 
-<dialog
-	bind:this={dialogEl}
-	data-drawer-content
-	data-side={ctx.side}
-	aria-labelledby={ctx.headerId}
-	data-state={ctx.open ? 'open' : 'closed'}
-	onclose={() => ctx.close()}
-	onclick={(e) => {
-		if (e.target === dialogEl) {
-			ctx.close();
-		}
-	}}
-	class={className}
-	{...rest}
->
-	<div data-drawer-panel>
-		{@render children()}
-	</div>
-</dialog>
-
-<style>
-	[data-drawer-content] {
-		margin: 0;
-		position: fixed;
-		inset: 0;
-		height: 100vh;
-		height: 100dvh;
-		max-height: none;
-		border: none;
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		padding: 0;
-		box-sizing: border-box;
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		grid-template-rows: minmax(0, 1fr);
-	}
-
-	[data-drawer-content]:not([open]) {
-		display: none;
-	}
-
-	[data-drawer-content]::backdrop {
-		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop-strong));
-		backdrop-filter: blur(var(--dry-overlay-blur, 8px));
-		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 8px));
-	}
-
-	/* Side positioning via grid alignment */
-	[data-drawer-content][data-side='right'] {
-		grid-template-columns:
-			minmax(0, calc(100dvw - var(--dry-drawer-size, 25rem)))
-			var(--dry-drawer-size, 25rem);
-	}
-
-	[data-drawer-content][data-side='left'] {
-		grid-template-columns:
-			var(--dry-drawer-size, 25rem)
-			minmax(0, calc(100dvw - var(--dry-drawer-size, 25rem)));
-	}
-
-	[data-drawer-content][data-side='top'] {
-		grid-template-rows:
-			var(--dry-drawer-size, 25rem)
-			minmax(0, calc(100dvh - var(--dry-drawer-size, 25rem)));
-	}
-
-	[data-drawer-content][data-side='bottom'] {
-		grid-template-rows:
-			minmax(0, calc(100dvh - var(--dry-drawer-size, 25rem)))
-			var(--dry-drawer-size, 25rem);
-	}
-
-	/* Panel */
-	[data-drawer-panel] {
-		--dry-drawer-bg: var(--dry-color-bg-overlay);
-		--dry-drawer-border: var(--dry-color-stroke-weak);
-		--dry-drawer-size: 25rem;
-		--_drawer-rest-transform: translateX(0);
-		--_drawer-enter-transform: translateX(100%);
-
-		background: var(--dry-drawer-bg);
-		color: var(--dry-color-text-strong);
-		box-shadow: var(--dry-drawer-shadow, var(--dry-shadow-overlay));
-		padding: 0;
-		display: grid;
-		grid-template-rows: max-content minmax(0, 1fr) max-content;
-		overflow: hidden;
-		opacity: 1;
-		transform: var(--_drawer-rest-transform);
-		will-change: transform, opacity;
-
-		transition:
-			transform var(--dry-duration-slow) var(--dry-ease-spring-snappy),
-			opacity var(--dry-duration-normal) var(--dry-ease-out);
-	}
-
-	[data-drawer-content][data-side='right'] [data-drawer-panel] {
-		grid-column: 2;
-		height: 100%;
-		border-left: 1px solid var(--dry-drawer-border);
-	}
-
-	[data-drawer-content][data-side='left'] [data-drawer-panel] {
-		--_drawer-enter-transform: translateX(-100%);
-		grid-column: 1;
-		height: 100%;
-		border-right: 1px solid var(--dry-drawer-border);
-	}
-
-	[data-drawer-content][data-side='top'] [data-drawer-panel] {
-		--_drawer-rest-transform: translateY(0);
-		--_drawer-enter-transform: translateY(-100%);
-		grid-row: 1;
-		height: var(--dry-drawer-size);
-		border-bottom: 1px solid var(--dry-drawer-border);
-	}
-
-	[data-drawer-content][data-side='bottom'] [data-drawer-panel] {
-		--_drawer-rest-transform: translateY(0);
-		--_drawer-enter-transform: translateY(100%);
-		grid-row: 2;
-		height: var(--dry-drawer-size);
-		border-top: 1px solid var(--dry-drawer-border);
-	}
-
-	@starting-style {
-		[data-drawer-content][open] [data-drawer-panel] {
-			opacity: 0;
-			transform: var(--_drawer-enter-transform);
-		}
-	}
-
-	[data-drawer-content][data-state='open'] [data-drawer-panel] {
-		opacity: 1;
-		transform: var(--_drawer-rest-transform);
-	}
-</style>
+<ModalContent {ctx} variant="drawer" side={ctx.side} {...rest}>
+	{@render children()}
+</ModalContent>

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

@@ -1,12 +1,10 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createPositionedPopover } from '@dryui/primitives';
+	import { createAnchoredPopover, createMenuNavigation } from '@dryui/primitives';
 	import type { Placement } from '@dryui/primitives';
 	import { getDropdownMenuCtx } from './context.svelte.js';
 
-	const MENU_ITEM_SELECTOR = '[role="menuitem"]:not([data-disabled])';
-
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		placement?: Placement;
 		offset?: number;
@@ -26,79 +24,18 @@
 
 	let el = $state<HTMLDivElement>();
 
-	const popover = createPositionedPopover({
+	const popover = createAnchoredPopover({
 		triggerEl: () => ctx.triggerEl,
 		contentEl: () => el ?? null,
+		open: () => ctx.open,
 		placement: () => placement,
 		offset: () => offset
 	});
 
-	function getMenuItems(container: HTMLElement): HTMLElement[] {
-		return Array.from(container.querySelectorAll<HTMLElement>(MENU_ITEM_SELECTOR));
-	}
-
-	function focusItem(items: HTMLElement[], index: number): void {
-		if (items.length === 0) return;
-		const clamped = ((index % items.length) + items.length) % items.length;
-		items[clamped]?.focus();
-	}
-
-	function focusFirstItem(): void {
-		if (!el) return;
-		const items = getMenuItems(el);
-		const first = items[0];
-		if (first) {
-			first.focus();
-		} else {
-			el.focus();
-		}
-	}
-
-	$effect(() => {
-		if (ctx.open && el && !el.matches(':popover-open')) {
-			popover.showPopover(el);
-		} else if (!ctx.open && el?.matches(':popover-open')) {
-			popover.hidePopover(el);
-		}
+	const menu = createMenuNavigation({
+		container: () => el ?? null,
+		orientation: 'vertical'
 	});
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (!el) return;
-		const items = getMenuItems(el);
-		const currentIndex = items.indexOf(document.activeElement as HTMLElement);
-
-		switch (e.key) {
-			case 'ArrowDown': {
-				e.preventDefault();
-				focusItem(items, currentIndex + 1);
-				return;
-			}
-			case 'ArrowUp': {
-				e.preventDefault();
-				focusItem(items, currentIndex - 1);
-				return;
-			}
-			case 'Home': {
-				e.preventDefault();
-				focusItem(items, 0);
-				return;
-			}
-			case 'End': {
-				e.preventDefault();
-				focusItem(items, items.length - 1);
-				return;
-			}
-			default: {
-				if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-					const char = e.key.toLowerCase();
-					const match = items.find((item) =>
-						item.textContent?.trim().toLowerCase().startsWith(char)
-					);
-					if (match) match.focus();
-				}
-			}
-		}
-	}
 </script>
 
 <div
@@ -116,12 +53,12 @@
 		const newState = (e as ToggleEvent).newState === 'open';
 		if (newState && !ctx.open) {
 			ctx.show();
-			queueMicrotask(focusFirstItem);
+			queueMicrotask(() => menu.focusFirst());
 		} else if (!newState && ctx.open) {
 			ctx.close();
 		}
 	}}
-	onkeydown={handleKeydown}
+	onkeydown={(e) => menu.handleKeydown(e)}
 	{...rest}
 >
 	{@render children()}
@@ -171,4 +108,10 @@
 				translateY(calc(var(--dry-motion-distance-xs) * -1));
 		}
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-dropdown-menu-content] {
+			transition: none;
+		}
+	}
 </style>

package/dist/heading/heading.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLHeadingElement> {
 		level?: 1 | 2 | 3 | 4 | 5 | 6;
@@ -12,27 +13,27 @@
 </script>
 
 {#if level === 1}
-	<h1 class={className} data-level={level} data-variant={variant} {...rest}>
+	<h1 class={className} {...variantAttrs({ level, variant })} {...rest}>
 		{@render children()}
 	</h1>
 {:else if level === 2}
-	<h2 class={className} data-level={level} data-variant={variant} {...rest}>
+	<h2 class={className} {...variantAttrs({ level, variant })} {...rest}>
 		{@render children()}
 	</h2>
 {:else if level === 3}
-	<h3 class={className} data-level={level} data-variant={variant} {...rest}>
+	<h3 class={className} {...variantAttrs({ level, variant })} {...rest}>
 		{@render children()}
 	</h3>
 {:else if level === 4}
-	<h4 class={className} data-level={level} data-variant={variant} {...rest}>
+	<h4 class={className} {...variantAttrs({ level, variant })} {...rest}>
 		{@render children()}
 	</h4>
 {:else if level === 5}
-	<h5 class={className} data-level={level} data-variant={variant} {...rest}>
+	<h5 class={className} {...variantAttrs({ level, variant })} {...rest}>
 		{@render children()}
 	</h5>
 {:else}
-	<h6 class={className} data-level={level} data-variant={variant} {...rest}>
+	<h6 class={className} {...variantAttrs({ level, variant })} {...rest}>
 		{@render children()}
 	</h6>
 {/if}

package/dist/hover-card/hover-card-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createPositionedPopover } from '@dryui/primitives';
+	import { createAnchoredPopover } from '@dryui/primitives';
 	import type { Placement } from '@dryui/primitives';
 	import { getHoverCardCtx } from './context.svelte.js';
 
@@ -24,22 +24,14 @@
 
 	let contentEl = $state<HTMLDivElement>();
 
-	const popover = createPositionedPopover({
+	const popover = createAnchoredPopover({
 		triggerEl: () => ctx.triggerEl,
 		contentEl: () => contentEl ?? null,
+		open: () => ctx.open,
 		placement: () => placement,
 		offset: () => offset
 	});
 
-	$effect(() => {
-		if (!contentEl) return;
-		if (ctx.open) {
-			popover.showPopover(contentEl);
-		} else {
-			popover.hidePopover(contentEl);
-		}
-	});
-
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
 			e.preventDefault();
@@ -51,7 +43,6 @@
 <div
 	bind:this={contentEl}
 	id={ctx.contentId}
-	role="dialog"
 	popover="manual"
 	data-hover-card-content
 	data-state={ctx.open ? 'open' : 'closed'}

package/dist/icon/icon.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { variantAttrs } from '@dryui/primitives';
 
 	interface Props {
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -24,8 +25,7 @@
 	role={label ? 'img' : 'presentation'}
 	aria-label={label}
 	aria-hidden={label ? undefined : true}
-	data-size={size}
-	data-color={color}
+	{...variantAttrs({ size, color })}
 	class={className}
 	use:sizeSvg
 >

package/dist/index.d.ts

@@ -292,7 +292,7 @@ export { StarRating } from './star-rating/index.js';
 export type { StarRatingRootProps } from './star-rating/index.js';
 export { Tag } from './tag/index.js';
 export type { TagProps, TagColor } from './tag/index.js';
-export { useThemeOverride } from './themes/use-theme-override.svelte.js';
-export type { ThemeTokenMap } from './themes/use-theme-override.svelte.js';
+export { TokenScope } from './themes/token-scope.js';
+export type { TokenScopeProps } from './themes/token-scope.js';
 export { Diagram } from './diagram/index.js';
 export type { DiagramConfig, DiagramNode, DiagramEdge, DiagramCluster, DiagramAnnotation, DiagramSwimlane, DiagramRegion, DiagramColor, DiagramDirection } from './diagram/index.js';