@dryui/ui 1.3.0 → 1.4.0

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

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { Button } from '../button/index.js';
 	import { getHoverCardCtx } from './context.svelte.js';
 
-	interface Props extends HTMLAttributes<HTMLAnchorElement> {
+	interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
 		href?: string;
 		children: Snippet;
 	}
@@ -12,57 +13,95 @@
 
 	const ctx = getHoverCardCtx();
 
-	let anchorEl = $state<HTMLAnchorElement>();
+	let triggerEl = $state<HTMLAnchorElement | HTMLButtonElement>();
 
 	$effect(() => {
-		if (anchorEl) {
-			ctx.triggerEl = anchorEl;
+		if (triggerEl) {
+			ctx.triggerEl = triggerEl;
+
+			return () => {
+				if (ctx.triggerEl === triggerEl) {
+					ctx.triggerEl = null;
+				}
+			};
 		}
 	});
+
+	function handlePointerEnter() {
+		ctx.triggerHovered = true;
+		ctx.show();
+	}
+
+	function handlePointerLeave() {
+		ctx.triggerHovered = false;
+		ctx.close();
+	}
+
+	function handleFocusIn() {
+		ctx.triggerFocused = true;
+
+		if (ctx.ignoreNextTriggerFocusOpen) {
+			ctx.ignoreNextTriggerFocusOpen = false;
+			return;
+		}
+
+		ctx.showImmediate();
+	}
+
+	function handleFocusOut() {
+		ctx.triggerFocused = false;
+		ctx.close();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && ctx.open) {
+			event.preventDefault();
+			ctx.forceClose();
+			triggerEl?.focus();
+		}
+	}
+
+	function handleRef(el: HTMLButtonElement | HTMLAnchorElement | null) {
+		triggerEl = el ?? undefined;
+	}
 </script>
 
-<a
-	bind:this={anchorEl}
-	id={ctx.triggerId}
-	{href}
-	data-hover-card-trigger
-	aria-haspopup="true"
-	aria-expanded={ctx.open}
-	data-state={ctx.open ? 'open' : 'closed'}
-	onpointerenter={() => ctx.show()}
-	onpointerleave={() => ctx.close()}
-	onfocus={() => ctx.show()}
-	onblur={() => ctx.close()}
-	class={className}
-	{...rest}
->
-	{@render children()}
-</a>
+<span class={className} data-hover-card-trigger-shell>
+	<Button
+		ref={handleRef}
+		variant="link"
+		size="sm"
+		color="primary"
+		id={ctx.triggerId}
+		{href}
+		data-hover-card-trigger
+		aria-haspopup="dialog"
+		aria-controls={ctx.contentId}
+		aria-expanded={ctx.open}
+		data-state={ctx.open ? 'open' : 'closed'}
+		onpointerenter={handlePointerEnter}
+		onpointerleave={handlePointerLeave}
+		onfocusin={handleFocusIn}
+		onfocusout={handleFocusOut}
+		onkeydown={handleKeydown}
+		{...rest}
+	>
+		{@render children()}
+	</Button>
+</span>
 
 <style>
-	[data-hover-card-trigger] {
+	[data-hover-card-trigger-shell] {
+		--dry-btn-min-height: auto;
+		--dry-btn-padding-x: 0;
+		--dry-btn-padding-y: 0;
+		--dry-btn-font-size: inherit;
+		--dry-btn-radius: var(--dry-radius-sm);
 		display: inline-grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: var(--dry-space-1);
-		color: var(--dry-color-text-brand);
-		text-decoration: underline;
-		text-decoration-color: var(--dry-color-stroke-brand);
-		text-decoration-thickness: 1px;
-		text-underline-offset: 0.18em;
 		cursor: help;
-		transition:
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			text-decoration-color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-hover-card-trigger]:hover {
-		color: var(--dry-color-fill-brand-hover);
-		text-decoration-color: currentColor;
 	}
 
-	[data-hover-card-trigger]:focus-visible {
+	[data-hover-card-trigger-shell]:focus-within {
 		outline: 2px solid var(--dry-color-stroke-focus);
 		outline-offset: 3px;
 		border-radius: var(--dry-radius-sm);

package/dist/hover-card/hover-card-trigger.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLAnchorElement> {
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     href?: string;
     children: Snippet;
 }

package/dist/index.d.ts

@@ -98,6 +98,8 @@ export type { BadgeProps, BadgeColor } from './badge/index.js';
 export { Chart } from './chart/index.js';
 export type { ChartDataPoint, ChartStackedDataPoint } from './chart/index.js';
 export type { ChartRootProps, ChartBarsProps, ChartLineProps, ChartAreaProps, ChartDonutProps, ChartStackedBarProps, ChartHorizontalBarProps, ChartXAxisProps, ChartYAxisProps } from './chart/index.js';
+export { AppFrame } from './app-frame/index.js';
+export type { AppFrameProps } from './app-frame/index.js';
 export { ChatThread } from './chat-thread/index.js';
 export type { ChatThreadProps } from './chat-thread/index.js';
 export { TypingIndicator } from './typing-indicator/index.js';

package/dist/index.js

@@ -50,6 +50,7 @@ export { Table } from './table/index.js';
 export { Avatar } from './avatar/index.js';
 export { Badge } from './badge/index.js';
 export { Chart } from './chart/index.js';
+export { AppFrame } from './app-frame/index.js';
 export { ChatThread } from './chat-thread/index.js';
 export { TypingIndicator } from './typing-indicator/index.js';
 export { Icon } from './icon/index.js';

package/dist/internal/motion.d.ts

@@ -1,4 +1,4 @@
-export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2 } from '@dryui/primitives/internal/motion';
+export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2, observeInViewport, observePageVisibility, observeOffscreenState } from '@dryui/primitives/internal/motion';
 export declare function supportsViewTransitions(): boolean;
 export declare function supportsScrollTimelines(): boolean;
 export declare function extractThemeColor(property: string, element?: HTMLElement): [number, number, number];

package/dist/internal/motion.js

@@ -1,5 +1,5 @@
 // Re-export shared motion utilities from primitives (single source of truth)
-export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2 } from '@dryui/primitives/internal/motion';
+export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2, observeInViewport, observePageVisibility, observeOffscreenState } from '@dryui/primitives/internal/motion';
 // UI-only motion utilities
 export function supportsViewTransitions() {
     return typeof document !== 'undefined' && 'startViewTransition' in document;

package/dist/marquee/marquee.svelte

@@ -2,7 +2,11 @@
 	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { observeReducedMotionPreference } from '@dryui/primitives/internal/motion';
+	import {
+		observeInViewport,
+		observePageVisibility,
+		observeReducedMotionPreference
+	} from '@dryui/primitives/internal/motion';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		speed?: number;
@@ -24,18 +28,40 @@
 		...rest
 	}: Props = $props();
 
+	let rootEl: HTMLDivElement | undefined = $state();
 	let contentEl: HTMLDivElement | undefined = $state();
 	let contentSize = $state(0);
 	let prefersReducedMotion = $state(false);
+	let onScreen = $state(true);
+	let tabVisible = $state(true);
 
 	const isVertical = $derived(direction === 'up' || direction === 'down');
 	const duration = $derived(contentSize > 0 && speed > 0 ? contentSize / speed : 0);
+	const paused = $derived(!onScreen || !tabVisible);
 
-	onMount(() =>
-		observeReducedMotionPreference((matches) => {
+	onMount(() => {
+		const unsubscribeMotion = observeReducedMotionPreference((matches) => {
 			prefersReducedMotion = matches;
-		})
-	);
+		});
+		const unsubscribeVisibility = observePageVisibility((visible) => {
+			tabVisible = visible;
+		});
+		return () => {
+			unsubscribeMotion();
+			unsubscribeVisibility();
+		};
+	});
+
+	$effect(() => {
+		if (!rootEl) return;
+		return observeInViewport(
+			rootEl,
+			(inView) => {
+				onScreen = inView;
+			},
+			{ rootMargin: '200px' }
+		);
+	});
 
 	$effect(() => {
 		if (!contentEl) return;
@@ -57,6 +83,7 @@
 		$effect(() => {
 			node.style.setProperty('--marquee-duration', `${duration}s`);
 			node.style.setProperty('--marquee-gap', gap);
+			node.style.setProperty('--marquee-shift', `${contentSize}px`);
 		});
 	}
 
@@ -68,12 +95,14 @@
 </script>
 
 <div
+	bind:this={rootEl}
 	class={className}
 	data-marquee
 	data-direction={direction}
 	data-pause-on-hover={pauseOnHover || undefined}
 	data-fade={fade || undefined}
 	data-reduced-motion={prefersReducedMotion || undefined}
+	data-paused={paused || undefined}
 	use:applyRootStyles
 	{...rest}
 >
@@ -95,15 +124,19 @@
 
 		overflow: hidden;
 		position: relative;
+		contain: content;
 	}
 
 	[data-marquee-track] {
 		display: grid;
 		grid-auto-flow: var(--_flow, column);
-		gap: var(--marquee-gap, 1rem);
 		animation-duration: var(--dry-marquee-speed);
 		animation-timing-function: linear;
 		animation-iteration-count: infinite;
+		backface-visibility: hidden;
+	}
+
+	[data-marquee]:not([data-paused]) [data-marquee-track] {
 		will-change: transform;
 	}
 
@@ -113,6 +146,17 @@
 		gap: var(--marquee-gap, 1rem);
 	}
 
+	/* Trailing padding on content (not gap on track) keeps the keyframe loop seamless. */
+	[data-marquee][data-direction='left'] [data-marquee-content],
+	[data-marquee][data-direction='right'] [data-marquee-content] {
+		padding-inline-end: var(--marquee-gap, 1rem);
+	}
+
+	[data-marquee][data-direction='up'] [data-marquee-content],
+	[data-marquee][data-direction='down'] [data-marquee-content] {
+		padding-block-end: var(--marquee-gap, 1rem);
+	}
+
 	[data-marquee][data-direction='left'] [data-marquee-track],
 	[data-marquee][data-direction='right'] [data-marquee-track] {
 		animation-name: marquee-horizontal;
@@ -132,12 +176,16 @@
 		animation-play-state: paused;
 	}
 
+	[data-marquee][data-paused] [data-marquee-track] {
+		animation-play-state: paused;
+	}
+
 	@keyframes marquee-horizontal {
 		from {
 			transform: translateX(0);
 		}
 		to {
-			transform: translateX(-50%);
+			transform: translateX(calc(-1 * var(--marquee-shift, 0px)));
 		}
 	}
 
@@ -146,7 +194,7 @@
 			transform: translateY(0);
 		}
 		to {
-			transform: translateY(-50%);
+			transform: translateY(calc(-1 * var(--marquee-shift, 0px)));
 		}
 	}
 

package/dist/mega-menu/context.svelte.d.ts

@@ -1,12 +1,13 @@
 export interface MegaMenuContext {
     readonly activeItem: string | null;
-    openItem: (id: string) => void;
+    openItem: (id: string, triggerId: string) => void;
     closeItem: () => void;
 }
 export declare const setMegaMenuCtx: (ctx: MegaMenuContext) => MegaMenuContext, getMegaMenuCtx: () => MegaMenuContext;
 export interface MegaMenuItemContext {
     readonly itemId: string;
     readonly triggerId: string;
+    readonly panelId: string;
     readonly open: boolean;
 }
 export declare const setMegaMenuItemCtx: (ctx: MegaMenuItemContext) => MegaMenuItemContext, getMegaMenuItemCtx: () => MegaMenuItemContext;

package/dist/mega-menu/mega-menu-button-trigger.svelte

@@ -17,18 +17,7 @@
 		if (itemCtx.open) {
 			ctx.closeItem();
 		} else {
-			ctx.openItem(itemCtx.itemId);
-		}
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			if (itemCtx.open) {
-				ctx.closeItem();
-			} else {
-				ctx.openItem(itemCtx.itemId);
-			}
+			ctx.openItem(itemCtx.itemId, itemCtx.triggerId);
 		}
 	}
 </script>
@@ -37,13 +26,12 @@
 	variant="trigger"
 	type="button"
 	id={itemCtx.triggerId}
+	aria-controls={itemCtx.open ? itemCtx.panelId : undefined}
 	aria-expanded={itemCtx.open}
-	aria-haspopup="true"
 	data-mega-menu-trigger
 	data-state={itemCtx.open ? 'open' : 'closed'}
 	{...rest}
 	onclick={handleClick}
-	onkeydown={handleKeydown}
 >
 	{@render children()}
 </Button>

package/dist/mega-menu/mega-menu-item.svelte

@@ -13,17 +13,19 @@
 	const ctx = getMegaMenuCtx();
 	const itemId = generateFormId('mm-item');
 	const triggerId = generateFormId('mm-trigger');
+	const panelId = generateFormId('mm-panel');
 
 	setMegaMenuItemCtx({
 		itemId,
 		triggerId,
+		panelId,
 		get open() {
 			return ctx.activeItem === itemId;
 		}
 	});
 
 	function handlePointerEnter() {
-		ctx.openItem(itemId);
+		ctx.openItem(itemId, triggerId);
 	}
 
 	function handlePointerLeave() {

package/dist/mega-menu/mega-menu-panel.svelte

@@ -24,6 +24,8 @@
 	const itemCtx = getMegaMenuItemCtx();
 
 	let panelEl = $state<HTMLDivElement | null>(null);
+	let layout = $state<'columns' | 'stacked'>('columns');
+	const STACK_THRESHOLD = 32 * 16;
 
 	const popover = createPositionedPopover({
 		triggerEl: () => document.getElementById(itemCtx.triggerId),
@@ -36,8 +38,18 @@
 		offset: () => 4
 	});
 
+	function watchLayout(node: HTMLDivElement) {
+		const update = () => {
+			const next = window.innerWidth < STACK_THRESHOLD ? 'stacked' : 'columns';
+			if (next !== layout) layout = next;
+		};
+		update();
+		window.addEventListener('resize', update);
+		return () => window.removeEventListener('resize', update);
+	}
+
 	function handlePointerEnter() {
-		ctx.openItem(itemCtx.itemId);
+		ctx.openItem(itemCtx.itemId, itemCtx.triggerId);
 	}
 
 	function handlePointerLeave() {
@@ -70,12 +82,15 @@
 		{@attach attachPanel}
 		{@attach syncPopover(itemCtx.open)}
 		{@attach fromAction(popover.applyPosition, () => style)}
-		role="region"
+		{@attach watchLayout}
+		id={itemCtx.panelId}
+		role="group"
 		popover="manual"
 		data-mega-menu-panel
 		aria-labelledby={itemCtx.triggerId}
 		data-state={itemCtx.open ? 'open' : 'closed'}
 		data-full-width={fullWidth || undefined}
+		data-layout={layout}
 		class={className}
 		onpointerenter={handlePointerEnter}
 		onpointerleave={handlePointerLeave}
@@ -86,6 +101,13 @@
 {/if}
 
 <style>
+	@position-try --dry-mega-menu-panel-viewport-fit {
+		position-area: none;
+		inset-inline: 4vw;
+		inset-block-start: anchor(bottom);
+		margin-top: 0.5rem;
+	}
+
 	[data-mega-menu-panel] {
 		inset: unset;
 		margin: 0;
@@ -95,11 +117,14 @@
 		border-radius: var(--dry-radius-lg, 0.5rem);
 		box-shadow: var(--dry-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
 		padding: var(--dry-space-4, 1rem);
+		/* dryui-allow width */
+		max-inline-size: var(--dry-mega-menu-panel-max-width, min(92vw, 60rem));
 		display: grid;
 		grid-auto-flow: column;
-		grid-auto-columns: max-content;
+		grid-auto-columns: minmax(var(--dry-mega-menu-panel-column-min, 12rem), max-content);
 		align-items: start;
 		gap: var(--dry-space-6, 1.5rem);
+		--dry-anchor-try-fallbacks: flip-block, flip-inline, --dry-mega-menu-panel-viewport-fit;
 	}
 
 	[data-mega-menu-panel]:not(:popover-open) {
@@ -110,6 +135,13 @@
 		display: grid;
 	}
 
+	[data-mega-menu-panel][data-layout='stacked'] {
+		grid-auto-flow: row;
+		grid-auto-columns: auto;
+		grid-auto-rows: auto;
+		gap: var(--dry-space-4, 1rem);
+	}
+
 	[data-mega-menu-panel][data-full-width] {
 		justify-self: stretch;
 	}

package/dist/mega-menu/mega-menu-root.svelte

@@ -10,25 +10,45 @@
 	let { class: className, children, ...rest }: Props = $props();
 
 	let activeItem = $state<string | null>(null);
+	let activeTriggerId = $state<string | null>(null);
 	let openTimer: ReturnType<typeof setTimeout> | undefined;
 	let closeTimer: ReturnType<typeof setTimeout> | undefined;
 
+	function clearPendingTimers() {
+		clearTimeout(openTimer);
+		clearTimeout(closeTimer);
+	}
+
+	function closeImmediately(options?: { restoreFocus?: boolean }) {
+		const triggerId = options?.restoreFocus ? activeTriggerId : null;
+		clearPendingTimers();
+		activeItem = null;
+		activeTriggerId = null;
+
+		if (!triggerId) return;
+
+		const trigger = document.getElementById(triggerId);
+		if (trigger instanceof HTMLElement) {
+			trigger.focus();
+		}
+	}
+
 	setMegaMenuCtx({
 		get activeItem() {
 			return activeItem;
 		},
-		openItem(id) {
-			clearTimeout(closeTimer);
-			clearTimeout(openTimer);
+		openItem(id, triggerId) {
+			clearPendingTimers();
 			openTimer = setTimeout(() => {
 				activeItem = id;
+				activeTriggerId = triggerId;
 			}, 150);
 		},
 		closeItem() {
-			clearTimeout(openTimer);
-			clearTimeout(closeTimer);
+			clearPendingTimers();
 			closeTimer = setTimeout(() => {
 				activeItem = null;
+				activeTriggerId = null;
 			}, 300);
 		}
 	});
@@ -36,9 +56,7 @@
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape' && activeItem) {
 			e.preventDefault();
-			clearTimeout(openTimer);
-			clearTimeout(closeTimer);
-			activeItem = null;
+			closeImmediately({ restoreFocus: true });
 		}
 	}
 
@@ -46,16 +64,13 @@
 		const nav = e.currentTarget as HTMLElement;
 		const related = e.relatedTarget as Node | null;
 		if (related && !nav.contains(related)) {
-			clearTimeout(openTimer);
-			clearTimeout(closeTimer);
-			activeItem = null;
+			closeImmediately();
 		}
 	}
 
 	$effect(() => {
 		return () => {
-			clearTimeout(openTimer);
-			clearTimeout(closeTimer);
+			clearPendingTimers();
 		};
 	});
 </script>

package/dist/menubar/context.svelte.d.ts

@@ -7,8 +7,8 @@ export interface MenubarContext {
     registerMenu: (id: string) => void;
     unregisterMenu: (id: string) => void;
     getMenuIds: () => string[];
-    focusNextMenu: (currentId: string) => void;
-    focusPrevMenu: (currentId: string) => void;
+    focusNextMenu: (currentId: string, open?: boolean) => void;
+    focusPrevMenu: (currentId: string, open?: boolean) => void;
 }
 export declare const setMenubarCtx: (ctx: MenubarContext) => MenubarContext, getMenubarCtx: () => MenubarContext;
 export interface MenubarMenuContext {

package/dist/menubar/menubar-button-trigger.svelte

@@ -8,10 +8,11 @@
 		children: Snippet;
 	}
 
-	let { children, onclick, onkeydown, ...rest }: Props = $props();
+	let { children, onclick, onkeydown, id, ...rest }: Props = $props();
 
 	const ctx = getMenubarCtx();
 	const menuCtx = getMenubarMenuCtx();
+	const triggerId = $derived(id ?? `menubar-trigger-${menuCtx.menuId}`);
 
 	function handleClick(e: MouseEvent & { currentTarget: HTMLButtonElement }) {
 		if (menuCtx.open) {
@@ -32,12 +33,12 @@
 		switch (e.key) {
 			case 'ArrowRight': {
 				e.preventDefault();
-				ctx.focusNextMenu(menuCtx.menuId);
+				ctx.focusNextMenu(menuCtx.menuId, ctx.hasOpenMenu);
 				break;
 			}
 			case 'ArrowLeft': {
 				e.preventDefault();
-				ctx.focusPrevMenu(menuCtx.menuId);
+				ctx.focusPrevMenu(menuCtx.menuId, ctx.hasOpenMenu);
 				break;
 			}
 			case 'ArrowDown': {
@@ -59,6 +60,7 @@
 <Button
 	variant="trigger"
 	type="button"
+	id={triggerId}
 	role="menuitem"
 	aria-haspopup="menu"
 	aria-expanded={menuCtx.open}