@dryui/ui 1.2.0 → 1.3.0

package/dist/menubar/menubar-content.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAnchorPosition } from '@dryui/primitives';
+	import { createAnchoredPopover, createMenuNavigation } from '@dryui/primitives';
 	import { getMenubarCtx, getMenubarMenuCtx } from './context.svelte.js';
 
-	const MENU_ITEM_SELECTOR = '[role="menuitem"]:not([data-disabled])';
-
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		placement?: 'bottom' | 'bottom-start' | 'bottom-end';
 		offset?: number;
@@ -33,57 +31,31 @@
 			root?.querySelector<HTMLElement>(`[data-menubar-trigger="${menuCtx.menuId}"]`) ?? null;
 	});
 
-	const anchor = createAnchorPosition(
-		() => triggerEl,
-		() => el ?? null,
-		{
-			get placement() {
-				return placement;
-			},
-			get offset() {
-				return offset;
-			}
-		}
-	);
-
-	$effect(() => {
-		if (!el) return;
-
-		el.style.cssText = typeof style === 'string' ? style : '';
-		const positionStyles = anchor.styles;
-		for (const [key, value] of Object.entries(positionStyles)) {
-			el.style.setProperty(key, value);
-		}
-	});
-
-	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();
-	}
-
-	$effect(() => {
-		if (menuCtx.open && el && !el.matches(':popover-open')) {
-			el.showPopover();
+	const popover = createAnchoredPopover({
+		triggerEl: () => triggerEl,
+		contentEl: () => el ?? null,
+		open: () => menuCtx.open,
+		placement: () => placement,
+		offset: () => offset,
+		onAfterShow: (contentEl) => {
 			requestAnimationFrame(() => {
-				if (!el) return;
-				const items = getMenuItems(el);
-				const first = items[0];
-				if (first) {
-					first.focus();
+				const focusable = contentEl.querySelector<HTMLElement>(
+					'[role="menuitem"]:not([data-disabled])'
+				);
+				if (focusable) {
+					focusable.focus();
 				} else {
-					el.focus();
+					contentEl.focus();
 				}
 			});
-		} else if (!menuCtx.open && el?.matches(':popover-open')) {
-			el.hidePopover();
 		}
 	});
 
+	const menu = createMenuNavigation({
+		container: () => el ?? null,
+		orientation: 'vertical'
+	});
+
 	function handleKeydown(e: KeyboardEvent) {
 		if (!el) return;
 		switch (e.key) {
@@ -107,40 +79,7 @@
 				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();
-				}
-			}
-		}
+		menu.handleKeydown(e);
 	}
 </script>
 
@@ -153,6 +92,7 @@
 	data-menubar-content
 	data-state={menuCtx.open ? 'open' : 'closed'}
 	class={className}
+	use:popover.applyPosition={style}
 	ontoggle={(e) => {
 		const newState = (e as ToggleEvent).newState === 'open';
 		if (!newState && menuCtx.open) {

package/dist/noise/noise.svelte

@@ -85,6 +85,7 @@
 	[data-noise-texture] {
 		position: absolute;
 		inset: -24%;
+		z-index: 2;
 		pointer-events: none;
 		opacity: var(--dry-noise-opacity);
 		mix-blend-mode: var(--dry-noise-blend);

package/dist/option-picker/option-picker-preview.svelte

@@ -11,19 +11,20 @@
 
 	let { color, shape = 'rounded', variant = 'default', children, ...rest }: Props = $props();
 
-	function attachPreviewVars(previewColor: string | undefined) {
-		return (node: HTMLSpanElement) => {
-			if (previewColor) {
-				node.style.setProperty('--dry-option-picker-preview-bg', previewColor);
-			} else {
-				node.style.removeProperty('--dry-option-picker-preview-bg');
-			}
-		};
-	}
+	let el: HTMLSpanElement | undefined = $state();
+
+	$effect(() => {
+		if (!el) return;
+		if (color) {
+			el.style.setProperty('--dry-option-picker-preview-bg', color);
+		} else {
+			el.style.removeProperty('--dry-option-picker-preview-bg');
+		}
+	});
 </script>
 
 <span
-	{@attach attachPreviewVars(color)}
+	bind:this={el}
 	data-option-picker-preview
 	data-option-picker-preview-shape={shape}
 	data-variant={variant !== 'default' ? variant : undefined}

package/dist/popover/popover-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, createDismiss } from '@dryui/primitives';
 	import type { Placement } from '@dryui/primitives';
 	import { getPopoverCtx } from './context.svelte.js';
 
@@ -24,47 +24,21 @@
 
 	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);
-		}
-	});
-
-	$effect(() => {
-		if (!ctx.open) return;
-
-		function handlePointerDown(event: PointerEvent) {
-			const target = event.target as Node;
-			if (contentEl?.contains(target) || ctx.triggerEl?.contains(target)) {
-				return;
-			}
-			ctx.close();
-		}
-
-		function handleKeydown(event: KeyboardEvent) {
-			if (event.key !== 'Escape') return;
-			event.preventDefault();
-			ctx.close();
-			ctx.triggerEl?.focus();
-		}
-
-		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: () => contentEl ?? null,
+		triggerEl: () => ctx.triggerEl,
+		preventDefaultOnEscape: true,
+		returnFocusTo: () => ctx.triggerEl
 	});
 </script>
 

package/dist/progress/progress.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 
 	interface ProgressSegment {
 		value: number;
@@ -97,8 +98,7 @@
 	data-max={max}
 	data-segmented={segments ? '' : undefined}
 	data-has-label={showLabel ? labelPosition : undefined}
-	data-size={size}
-	data-color={color}
+	{...variantAttrs({ size, color })}
 	data-with-label={showLabel ? '' : undefined}
 	{...rest}
 >

package/dist/prompt-input/index.d.ts

@@ -1,2 +1,14 @@
-export type { PromptInputProps } from '@dryui/primitives';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ButtonSize, ButtonVariant } from '../button/index.js';
+export interface PromptInputProps extends HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    submitLabel?: string;
+    submitSize?: ButtonSize;
+    submitVariant?: ButtonVariant;
+    onpromptsubmit?: (value: string) => void;
+    actions?: Snippet;
+}
 export { default as PromptInput } from './prompt-input-button-textarea.svelte';

package/dist/prompt-input/prompt-input-button-textarea.svelte

@@ -2,12 +2,15 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import Button from '../button/button.svelte';
+	import type { ButtonSize, ButtonVariant } from '../button/index.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		value?: string;
 		placeholder?: string;
 		disabled?: boolean;
 		submitLabel?: string;
+		submitSize?: ButtonSize;
+		submitVariant?: ButtonVariant;
 		onpromptsubmit?: (value: string) => void;
 		actions?: Snippet;
 	}
@@ -17,6 +20,8 @@
 		placeholder = 'Type a message...',
 		disabled = false,
 		submitLabel = 'Send',
+		submitSize = 'md',
+		submitVariant = 'solid',
 		onpromptsubmit,
 		actions,
 		class: className,
@@ -79,7 +84,14 @@
 		{#if actions}
 			{@render actions()}
 		{/if}
-		<Button variant="solid" type="button" {disabled} onclick={submit} aria-label={submitLabel}>
+		<Button
+			variant={submitVariant}
+			size={submitSize}
+			type="button"
+			{disabled}
+			onclick={submit}
+			aria-label={submitLabel}
+		>
 			<span data-prompt-submit-label>{submitLabel}</span>
 			<svg
 				width="20"

package/dist/prompt-input/prompt-input-button-textarea.svelte.d.ts

@@ -1,10 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { ButtonSize, ButtonVariant } from '../button/index.js';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     value?: string;
     placeholder?: string;
     disabled?: boolean;
     submitLabel?: string;
+    submitSize?: ButtonSize;
+    submitVariant?: ButtonVariant;
     onpromptsubmit?: (value: string) => void;
     actions?: Snippet;
 }

package/dist/shimmer/shimmer.svelte

@@ -16,15 +16,33 @@
 		...rest
 	}: Props = $props();
 
-	function applyStyles(node: HTMLSpanElement) {
+	function setup(node: HTMLSpanElement) {
 		$effect(() => {
 			node.style.setProperty('--dry-shimmer-color', color);
 			node.style.setProperty('--dry-shimmer-duration', `${duration}s`);
 		});
+
+		$effect(() => {
+			if (typeof IntersectionObserver === 'undefined') {
+				node.dataset.active = '';
+				return;
+			}
+			const io = new IntersectionObserver(
+				(entries) => {
+					for (const entry of entries) {
+						if (entry.isIntersecting) node.dataset.active = '';
+						else delete node.dataset.active;
+					}
+				},
+				{ rootMargin: '100px' }
+			);
+			io.observe(node);
+			return () => io.disconnect();
+		});
 	}
 </script>
 
-<span data-shimmer class={className} {...rest} {@attach applyStyles}>
+<span data-shimmer class={className} {...rest} {@attach setup}>
 	<span data-shimmer-base>
 		{@render children()}
 	</span>
@@ -40,6 +58,8 @@
 		grid-column: var(--dry-shimmer-column, auto);
 		justify-self: var(--dry-shimmer-justify-self, auto);
 		isolation: isolate;
+		content-visibility: auto;
+		contain-intrinsic-size: auto;
 	}
 
 	[data-shimmer-base],
@@ -62,8 +82,13 @@
 		mask-size: 200% 100%;
 		-webkit-mask-repeat: no-repeat;
 		mask-repeat: no-repeat;
-		will-change: mask-position;
 		animation: shimmer-sweep var(--dry-shimmer-duration, 3s) linear infinite;
+		animation-play-state: paused;
+	}
+
+	[data-shimmer][data-active] [data-shimmer-streak] {
+		animation-play-state: running;
+		will-change: mask-position;
 	}
 
 	@keyframes shimmer-sweep {

package/dist/slider/slider-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { getFormControlCtx } from '@dryui/primitives';
+	import { getFormControlCtx, variantAttrs } from '@dryui/primitives';
 
 	interface Props extends Omit<HTMLInputAttributes, 'size'> {
 		value?: number;
@@ -42,7 +42,7 @@
 	}
 </script>
 
-<span class="wrapper" data-variant={variant} data-size={size} use:applyStyles>
+<span class="wrapper" {...variantAttrs({ variant, size })} use:applyStyles>
 	<input
 		type="range"
 		bind:value
@@ -57,8 +57,7 @@
 		aria-errormessage={ctx?.errorMessageId}
 		data-disabled={isDisabled || undefined}
 		data-orientation={orientation}
-		data-variant={variant}
-		data-size={size}
+		{...variantAttrs({ variant, size })}
 		class={className}
 		{...rest}
 	/>

package/dist/spacer/spacer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -11,8 +12,7 @@
 
 <div
 	aria-hidden="true"
-	data-axis={axis}
-	data-size={size || undefined}
+	{...variantAttrs({ axis, size: size || undefined })}
 	class={className}
 	{...rest}
 ></div>

package/dist/spinner/spinner.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { SVGAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 
 	interface Props extends SVGAttributes<SVGSVGElement> {
 		size?: 'sm' | 'md' | 'lg';
@@ -22,8 +23,7 @@
 	viewBox="0 0 24 24"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
-	data-size={size}
-	data-color={color}
+	{...variantAttrs({ size, color })}
 	class={className}
 	{...rest}
 >

package/dist/tabs/tabs-content.svelte

@@ -19,7 +19,7 @@
 	role="tabpanel"
 	id="{ctx.id}-panel-{value}"
 	aria-labelledby="{ctx.id}-tab-{value}"
-	tabindex={0}
+	tabindex={isSelected ? 0 : -1}
 	data-state={isSelected ? 'active' : 'inactive'}
 	data-tabs-content
 	hidden={!isSelected || undefined}

package/dist/tabs/tabs-list.svelte

@@ -76,6 +76,7 @@
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
+		justify-content: var(--dry-tabs-list-justify, start);
 		border-bottom: 1px solid var(--dry-color-stroke-weak);
 		gap: 0;
 	}

package/dist/tag/tag-button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 	import Button from '../button/button.svelte';
 	import { resolveAlias } from '../internal/color-aliases.js';
 	import type { TagColor } from './index.js';
@@ -31,9 +32,7 @@
 	<span
 		class={className}
 		data-tag
-		data-variant={variant}
-		data-color={resolvedColor}
-		data-size={size}
+		{...variantAttrs({ variant, color: resolvedColor, size })}
 		{...rest}
 	>
 		{@render children()}

package/dist/text/text.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<HTMLElement> {
 		as?: 'p' | 'span' | 'div';
@@ -28,21 +29,13 @@
 {#if as === 'span'}
 	<span
 		class={className}
-		data-color={color}
-		data-size={size}
-		data-font={font}
-		data-weight={weight || undefined}
-		data-variant={variant}
+		{...variantAttrs({ color, size, font, weight: weight || undefined, variant })}
 		{...rest}>{@render children()}</span
 	>
 {:else if as === 'div'}
 	<div
 		class={className}
-		data-color={color}
-		data-size={size}
-		data-font={font}
-		data-weight={weight || undefined}
-		data-variant={variant}
+		{...variantAttrs({ color, size, font, weight: weight || undefined, variant })}
 		{...rest}
 	>
 		{@render children()}
@@ -50,11 +43,7 @@
 {:else}
 	<p
 		class={className}
-		data-color={color}
-		data-size={size}
-		data-font={font}
-		data-weight={weight || undefined}
-		data-variant={variant}
+		{...variantAttrs({ color, size, font, weight: weight || undefined, variant })}
 		{...rest}
 	>
 		{@render children()}

package/dist/themes/dark.css

@@ -65,21 +65,27 @@
 	--dry-color-bg-brand: var(--dry-color-fill-brand);
 	--dry-color-bg-inverse: #ffffff;
 
-	/* ─── Component: Toggle ───────────────────────────────────────── */
-	--dry-toggle-track-bg: #ffffff0f;
-	--dry-toggle-track-stroke: #ffffff99;
-	--dry-toggle-selected-bg: #a3b2ff;
-	--dry-toggle-selected-stroke: #a3b2ff;
+	/* ─── Component: Toggle ─────────────────────────────────────────
+	   Derived from semantic tokens so brand overrides (e.g. a consumer
+	   retheming --dry-color-fill-brand) flow through to toggles too.
+	   Thumb bg is intentionally a neutral literal — it's a surface knob,
+	   not a brand-tinted element. */
+	--dry-toggle-track-bg: var(--dry-color-fill-brand-weak);
+	--dry-toggle-track-stroke: var(--dry-color-stroke-strong);
+	--dry-toggle-selected-bg: var(--dry-color-fill-brand);
+	--dry-toggle-selected-stroke: var(--dry-color-fill-brand);
 	--dry-toggle-thumb-bg: #292b33;
-	--dry-toggle-hover-bg: #ffffff0f;
-	--dry-toggle-press-bg: #ffffff1f;
-	--dry-toggle-disabled-fill: #ffffff1f;
-	--dry-toggle-disabled-stroke: #ffffff1f;
-	--dry-toggle-focus-ring: #a3b2ff;
+	--dry-toggle-hover-bg: var(--dry-color-fill-brand-weak);
+	--dry-toggle-press-bg: var(--dry-color-fill-active);
+	--dry-toggle-disabled-fill: var(--dry-color-stroke-weak);
+	--dry-toggle-disabled-stroke: var(--dry-color-stroke-weak);
+	--dry-toggle-focus-ring: var(--dry-color-fill-brand);
 	--dry-toggle-label-color: var(--dry-color-text-strong);
-	--dry-toggle-label-disabled-color: #ffffff1f;
+	--dry-toggle-label-disabled-color: var(--dry-color-text-disabled);
 
-	/* ─── Component: Beam ─────────────────────────────────────────── */
+	/* ─── Component: Beam ─────────────────────────────────────────
+	   Blend mode is intentionally mode-specific (multiply darkens on
+	   light bg, screen lightens on dark bg) — not brand-derivable. */
 	--dry-beam-default-blend: screen;
 
 	/* ─── Status: Error ───────────────────────────────────────────── */
@@ -152,6 +158,8 @@
 	--dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.6);
 	--dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.75);
 
+	/* Dark-mode enhancements — intentional. Light mode relies on component-level handling. */
+
 	/* ─── Scrollbar ───────────────────────────────────────────────── */
 	--dry-scrollbar-thumb: var(--dry-color-stroke-weak);
 	--dry-scrollbar-thumb-hover: var(--dry-color-stroke-strong);
@@ -275,21 +283,27 @@
 			--dry-color-bg-brand: var(--dry-color-fill-brand);
 			--dry-color-bg-inverse: #ffffff;
 
-			/* ─── Component: Toggle ───────────────────────────────────────── */
-			--dry-toggle-track-bg: #ffffff0f;
-			--dry-toggle-track-stroke: #ffffff99;
-			--dry-toggle-selected-bg: #a3b2ff;
-			--dry-toggle-selected-stroke: #a3b2ff;
+			/* ─── Component: Toggle ─────────────────────────────────────────
+			   Derived from semantic tokens so brand overrides (e.g. a consumer
+			   retheming --dry-color-fill-brand) flow through to toggles too.
+			   Thumb bg is intentionally a neutral literal — it's a surface knob,
+			   not a brand-tinted element. */
+			--dry-toggle-track-bg: var(--dry-color-fill-brand-weak);
+			--dry-toggle-track-stroke: var(--dry-color-stroke-strong);
+			--dry-toggle-selected-bg: var(--dry-color-fill-brand);
+			--dry-toggle-selected-stroke: var(--dry-color-fill-brand);
 			--dry-toggle-thumb-bg: #292b33;
-			--dry-toggle-hover-bg: #ffffff0f;
-			--dry-toggle-press-bg: #ffffff1f;
-			--dry-toggle-disabled-fill: #ffffff1f;
-			--dry-toggle-disabled-stroke: #ffffff1f;
-			--dry-toggle-focus-ring: #a3b2ff;
+			--dry-toggle-hover-bg: var(--dry-color-fill-brand-weak);
+			--dry-toggle-press-bg: var(--dry-color-fill-active);
+			--dry-toggle-disabled-fill: var(--dry-color-stroke-weak);
+			--dry-toggle-disabled-stroke: var(--dry-color-stroke-weak);
+			--dry-toggle-focus-ring: var(--dry-color-fill-brand);
 			--dry-toggle-label-color: var(--dry-color-text-strong);
-			--dry-toggle-label-disabled-color: #ffffff1f;
+			--dry-toggle-label-disabled-color: var(--dry-color-text-disabled);
 
-			/* ─── Component: Beam ─────────────────────────────────────────── */
+			/* ─── Component: Beam ─────────────────────────────────────────
+			   Blend mode is intentionally mode-specific (multiply darkens on
+			   light bg, screen lightens on dark bg) — not brand-derivable. */
 			--dry-beam-default-blend: screen;
 
 			/* ─── Status: Error ───────────────────────────────────────────── */
@@ -363,6 +377,8 @@
 			--dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.6);
 			--dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.75);
 
+			/* Dark-mode enhancements — intentional. Light mode relies on component-level handling. */
+
 			/* ─── Scrollbar ───────────────────────────────────────────────── */
 			--dry-scrollbar-thumb: var(--dry-color-stroke-weak);
 			--dry-scrollbar-thumb-hover: var(--dry-color-stroke-strong);