@dryui/ui 1.5.1 → 1.7.0

package/dist/list/list-item.svelte

@@ -1,12 +1,22 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ClassValue, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getListCtx } from './context.svelte.js';
 
-	interface Props extends HTMLAttributes<HTMLLIElement> {
+	interface Props extends Omit<
+		HTMLAttributes<HTMLLIElement>,
+		'children' | 'class' | 'onclick' | 'onkeydown' | 'aria-label' | 'aria-labelledby' | 'title'
+	> {
 		interactive?: boolean;
 		disabled?: boolean;
+		class?: ClassValue;
 		children: Snippet;
+		onclick?: HTMLButtonAttributes['onclick'];
+		onkeydown?: HTMLButtonAttributes['onkeydown'];
+		'aria-label'?: HTMLButtonAttributes['aria-label'];
+		'aria-labelledby'?: HTMLButtonAttributes['aria-labelledby'];
+		title?: string;
 	}
 
 	let {
@@ -15,74 +25,87 @@
 		class: className,
 		children,
 		onclick,
+		onkeydown,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledBy,
+		title,
 		...rest
 	}: Props = $props();
 
 	const ctx = getListCtx();
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (!interactive || disabled) return;
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			if (onclick) {
-				(onclick as (e: Event) => void)(e);
-			}
-		}
-	}
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <li
 	data-list-item
 	data-interactive={interactive || undefined}
 	data-disabled={disabled || undefined}
 	data-dense={ctx.dense || undefined}
-	role={interactive ? 'button' : undefined}
-	tabindex={interactive && !disabled ? 0 : undefined}
-	aria-disabled={disabled || undefined}
 	class={className}
-	{onclick}
-	onkeydown={interactive ? handleKeydown : undefined}
 	{...rest}
 >
-	{@render children()}
+	{#if interactive}
+		<Button
+			variant="secondary"
+			{disabled}
+			aria-label={ariaLabel}
+			aria-labelledby={ariaLabelledBy}
+			{title}
+			{onclick}
+			{onkeydown}
+		>
+			<span data-list-item-surface>
+				{@render children()}
+			</span>
+		</Button>
+	{:else}
+		<div data-list-item-surface>
+			{@render children()}
+		</div>
+	{/if}
 </li>
 
 <style>
 	[data-list-item] {
+		display: grid;
+		list-style: none;
+	}
+
+	[data-list-item-surface] {
 		display: grid;
 		grid-template-columns: auto minmax(0, 1fr);
 		align-items: start;
 		gap: var(--dry-list-item-gap);
 		padding: var(--dry-list-item-padding);
+		border: 0;
 		border-radius: var(--dry-list-item-radius);
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		text-align: left;
 		transition:
 			background var(--dry-duration-fast) var(--dry-ease-default),
 			color var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
 	[data-list-item][data-interactive='true'] {
+		--dry-btn-bg: transparent;
+		--dry-btn-border: transparent;
+		--dry-btn-color: inherit;
+		--dry-btn-padding-x: 0;
+		--dry-btn-padding-y: 0;
+		--dry-btn-min-height: 0;
+		--dry-btn-accent: var(--dry-list-item-active-bg);
+		--dry-btn-accent-fg: inherit;
+		--dry-btn-accent-stroke: transparent;
+		--dry-btn-accent-weak: var(--dry-list-item-hover-bg);
+		--dry-btn-on-accent: inherit;
+		--dry-btn-radius: var(--dry-list-item-radius);
+		box-shadow: none;
 		cursor: pointer;
 	}
 
-	[data-list-item][data-interactive='true']:hover,
-	[data-list-item][data-interactive='true']:focus-visible {
-		background: var(--dry-list-item-hover-bg);
-	}
-
-	[data-list-item][data-interactive='true']:active {
-		background: var(--dry-list-item-active-bg);
-	}
-
-	[data-list-item][data-interactive='true']:focus-visible {
-		outline: var(--dry-focus-ring);
-		outline-offset: -2px;
-	}
-
 	[data-list-item][data-disabled='true'] {
 		opacity: var(--dry-state-disabled-opacity);
-		cursor: not-allowed;
-		pointer-events: none;
 	}
 
 	[data-list-item][data-dense='true'] {

package/dist/list/list-item.svelte.d.ts

@@ -1,9 +1,15 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLLIElement> {
+import type { ClassValue, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'children' | 'class' | 'onclick' | 'onkeydown' | 'aria-label' | 'aria-labelledby' | 'title'> {
     interactive?: boolean;
     disabled?: boolean;
+    class?: ClassValue;
     children: Snippet;
+    onclick?: HTMLButtonAttributes['onclick'];
+    onkeydown?: HTMLButtonAttributes['onkeydown'];
+    'aria-label'?: HTMLButtonAttributes['aria-label'];
+    'aria-labelledby'?: HTMLButtonAttributes['aria-labelledby'];
+    title?: string;
 }
 declare const ListItem: import("svelte").Component<Props, {}, "">;
 type ListItem = ReturnType<typeof ListItem>;

package/dist/menubar/menubar-content.svelte

@@ -99,6 +99,7 @@
 	tabindex="-1"
 	aria-labelledby={triggerEl?.id}
 	data-menubar-content
+	data-dry-stagger
 	data-state={menuCtx.open ? 'open' : 'closed'}
 	class={className}
 	ontoggle={(e) => {

package/dist/menubar/menubar-item.svelte

@@ -69,7 +69,16 @@
 		outline: none;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-11);
-		transition: background var(--dry-duration-fast) var(--dry-ease-default);
+
+		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]),

package/dist/number-input/number-input-button.svelte

@@ -82,6 +82,7 @@
 		font-size: var(--dry-input-font-size);
 		line-height: var(--dry-type-small-leading);
 		font-family: var(--dry-font-sans);
+		font-variant-numeric: tabular-nums;
 		color: var(--dry-input-color);
 		background: var(--dry-input-bg);
 		border: 1px solid var(--dry-input-border);

package/dist/pin-input/pin-input-cell.svelte

@@ -53,6 +53,7 @@
 		height: var(--dry-pin-size);
 		font-size: var(--dry-pin-font-size);
 		font-family: var(--dry-font-mono);
+		font-variant-numeric: tabular-nums;
 		font-weight: 500;
 		color: var(--dry-color-text-strong);
 		background: var(--dry-pin-bg);

package/dist/popover/popover-content.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAnchoredPopover, createDismiss } from '@dryui/primitives';
+	import { createDismiss } from '@dryui/primitives';
 	import type { Placement } from '@dryui/primitives';
+	import { createAnchoredOverlayContent } from '../internal/anchored-overlay-content.svelte.js';
 	import { getPopoverCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -22,20 +23,17 @@
 
 	const ctx = getPopoverCtx();
 
-	let contentEl = $state<HTMLDivElement>();
-
-	const popover = createAnchoredPopover({
-		triggerEl: () => ctx.triggerEl,
-		contentEl: () => contentEl ?? null,
-		open: () => ctx.open,
+	const overlay = createAnchoredOverlayContent({
+		ctx,
 		placement: () => placement,
-		offset: () => offset
+		offset: () => offset,
+		style: () => style
 	});
 
 	createDismiss({
 		enabled: () => ctx.open,
 		onDismiss: () => ctx.close(),
-		contentEl: () => contentEl ?? null,
+		contentEl: overlay.contentEl,
 		triggerEl: () => ctx.triggerEl,
 		preventDefaultOnEscape: true,
 		returnFocusTo: () => ctx.triggerEl
@@ -43,12 +41,12 @@
 </script>
 
 <div
-	bind:this={contentEl}
+	{@attach overlay.bindContent}
+	{@attach overlay.position}
 	id={ctx.contentId}
 	popover="manual"
 	data-popover-content
 	data-state={ctx.open ? 'open' : 'closed'}
-	use:popover.applyPosition={style}
 	class={className}
 	{...rest}
 >
@@ -63,6 +61,7 @@
 		--dry-popover-shadow: var(--dry-overlay-shadow, var(--dry-shadow-lg));
 		--dry-popover-padding: var(--dry-space-4);
 		--dry-radius-nested: max(0px, calc(var(--dry-popover-radius) - var(--dry-popover-padding)));
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		inset: unset;
 		margin: 0;
@@ -81,6 +80,11 @@
 			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
 	}
 
+	[data-popover-content][data-state='closed'] {
+		transition-duration: calc(var(--dry-duration-fast) / 2);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-popover-content]:not(:popover-open) {
 		display: none;
 	}

package/dist/progress/progress.svelte

@@ -275,6 +275,7 @@
 		font-size: var(--dry-type-ui-caption-size, var(--dry-text-xs-size, 0.75rem));
 		color: var(--dry-color-text-weak, #64748b);
 		white-space: nowrap;
+		font-variant-numeric: tabular-nums;
 	}
 
 	[data-part='label'][data-position='inside'] {

package/dist/radio-group/radio-group-item-input.svelte

@@ -91,12 +91,18 @@
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		transform: translate(-50%, -50%) scale(0);
+		transform: translate(-50%, -50%) scale(0.25);
+		opacity: 0;
+		filter: blur(4px);
 		height: 8px;
 		aspect-ratio: 1;
 		border-radius: var(--dry-radius-full);
 		background: var(--dry-color-on-brand);
-		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+		transform-origin: center;
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			filter var(--dry-duration-fast) var(--dry-ease-spring-snappy);
 	}
 
 	[data-radio-group-item] input[type='radio']:hover:not(:disabled) {
@@ -120,6 +126,15 @@
 
 	[data-radio-group-item] input[type='radio']:checked::after {
 		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+		filter: blur(0);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-radio-group-item] input[type='radio']::after {
+			transition: none;
+			filter: none;
+		}
 	}
 
 	[data-radio-group-item] input[type='radio']:checked:hover:not(:disabled) {

package/dist/range-calendar/range-calendar-root.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { getWeekStartDay, addMonths } from '@dryui/primitives';
+	import { createDateViewController } from '../internal/date-family-controller.svelte.js';
 	import { setRangeCalendarCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -26,11 +26,11 @@
 		...rest
 	}: Props = $props();
 
-	const weekStartDay = $derived(getWeekStartDay(locale));
+	const view = createDateViewController({
+		initialDate: startDate,
+		locale: () => locale
+	});
 
-	let viewMonth = $state(startDate ? startDate.getMonth() : new Date().getMonth());
-	let viewYear = $state(startDate ? startDate.getFullYear() : new Date().getFullYear());
-	let focusedDate = $state<Date>(startDate ?? new Date());
 	let hoveredDate = $state<Date | null>(null);
 
 	let selecting = $state(false);
@@ -46,13 +46,13 @@
 			return hoveredDate;
 		},
 		get focusedDate() {
-			return focusedDate;
+			return view.focusedDate;
 		},
 		get viewMonth() {
-			return viewMonth;
+			return view.viewMonth;
 		},
 		get viewYear() {
-			return viewYear;
+			return view.viewYear;
 		},
 		get locale() {
 			return locale;
@@ -67,7 +67,7 @@
 			return disabled;
 		},
 		get weekStartDay() {
-			return weekStartDay;
+			return view.weekStartDay;
 		},
 		selectDate(date: Date) {
 			if (!selecting) {
@@ -83,25 +83,19 @@
 				}
 				selecting = false;
 			}
-			focusedDate = date;
+			view.focusDate(date);
 		},
 		setHoveredDate(date: Date | null) {
 			hoveredDate = date;
 		},
 		nextMonth() {
-			const next = addMonths(new Date(viewYear, viewMonth, 1), 1);
-			viewMonth = next.getMonth();
-			viewYear = next.getFullYear();
+			view.nextMonth();
 		},
 		prevMonth() {
-			const prev = addMonths(new Date(viewYear, viewMonth, 1), -1);
-			viewMonth = prev.getMonth();
-			viewYear = prev.getFullYear();
+			view.prevMonth();
 		},
 		setFocusedDate(date: Date) {
-			focusedDate = date;
-			viewMonth = date.getMonth();
-			viewYear = date.getFullYear();
+			view.setFocusedDate(date);
 		}
 	});
 </script>

package/dist/reveal/reveal.svelte

@@ -128,7 +128,7 @@
 <style>
 	[data-reveal] {
 		--dry-reveal-distance: var(--dry-motion-distance-sm, 0.75rem);
-		--dry-reveal-delay: 0ms;
+		--dry-reveal-delay: var(--dry-stagger-delay, 0ms);
 		--dry-reveal-duration: var(--dry-duration-entrance, 480ms);
 		--dry-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
 		--dry-reveal-hidden-opacity: var(--dry-motion-opacity-enter, 0);

package/dist/select/select-content.svelte

@@ -123,6 +123,7 @@
 	id={ctx.contentId}
 	aria-labelledby={ctx.triggerId}
 	data-select-content
+	data-dry-stagger
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
 	ontoggle={(e) => {

package/dist/select/select-item.svelte

@@ -81,6 +81,15 @@
 		outline: none;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-10);
+
+		transition:
+			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-select-item]:hover:not([data-disabled]),

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

@@ -33,6 +33,7 @@
 		{@render children()}
 		<svg
 			data-indicator
+			data-state={ctx.open ? 'open' : 'closed'}
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 24 24"
 			fill="none"
@@ -55,6 +56,22 @@
 		aspect-ratio: 1;
 		place-self: center;
 		opacity: 0.5;
-		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+		transform-origin: center;
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			filter var(--dry-duration-fast) var(--dry-ease-spring-snappy);
+	}
+
+	svg[data-indicator][data-state='open'] {
+		opacity: 1;
+		transform: scale(1.05);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		svg[data-indicator] {
+			transition: none;
+			filter: none;
+		}
 	}
 </style>

package/dist/skeleton/skeleton.svelte

@@ -91,10 +91,12 @@
 		--dry-skeleton-radius: var(--dry-radius-full);
 		aspect-ratio: 1;
 		height: var(--_h, var(--dry-space-10));
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
 	}
 
 	div[data-variant='rectangular'] {
 		--dry-skeleton-radius: var(--dry-radius-sm);
 		height: var(--_h, var(--dry-space-16));
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
 	}
 </style>

package/dist/slider/slider-input.svelte

@@ -249,6 +249,7 @@
 		padding-inline: var(--dry-space-4);
 		font-size: var(--dry-text-sm-size, 0.875rem);
 		font-weight: 600;
+		font-variant-numeric: tabular-nums;
 		color: var(--dry-color-text);
 		clip-path: inset(
 			0 calc(100% - var(--dry-slider-progress, 50%)) 0 0 round var(--dry-radius-full)

package/dist/text/index.d.ts

@@ -7,6 +7,7 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
     font?: 'sans' | 'mono';
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     variant?: 'default' | 'label';
+    className?: HTMLAttributes<HTMLElement>['class'];
     children: Snippet;
 }
 export { default as Text } from './text.svelte';

package/dist/text/text.svelte

@@ -10,6 +10,7 @@
 		font?: 'sans' | 'mono';
 		weight?: 'normal' | 'medium' | 'semibold' | 'bold';
 		variant?: 'default' | 'label';
+		className?: HTMLAttributes<HTMLElement>['class'];
 		children: Snippet;
 	}
 
@@ -20,7 +21,8 @@
 		font = 'sans',
 		weight,
 		variant = 'default',
-		class: className,
+		class: classAttr,
+		className = classAttr,
 		children,
 		...rest
 	}: Props = $props();
@@ -58,6 +60,7 @@
 		color: var(--dry-typography-text-color, var(--dry-color-text-strong));
 		font-family: var(--dry-font-sans);
 		line-height: 1.7;
+		text-wrap: pretty;
 	}
 
 	[data-color='muted'] {

package/dist/text/text.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<HTMLElement> {
     font?: 'sans' | 'mono';
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     variant?: 'default' | 'label';
+    className?: HTMLAttributes<HTMLElement>['class'];
     children: Snippet;
 }
 declare const Text: import("svelte").Component<Props, {}, "">;

package/dist/theme-toggle/index.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue, HTMLButtonAttributes } from 'svelte/elements';
+export { createThemeController } from './theme-controller.svelte.js';
+export type { ThemeMode, ThemeController, ThemeControllerOptions } from './theme-controller.svelte.js';
+export { themeFlashScript } from './theme-flash.js';
+import type { ThemeController, ThemeMode } from './theme-controller.svelte.js';
+export interface ThemeToggleProps extends Omit<HTMLButtonAttributes, 'onclick' | 'onkeydown' | 'disabled' | 'class'> {
+    storageKey?: string;
+    size?: 'sm' | 'md' | 'lg';
+    controller?: ThemeController;
+    'aria-label'?: string;
+    sunIcon?: Snippet;
+    moonIcon?: Snippet;
+    onModeChange?: (mode: ThemeMode) => void;
+    disabled?: boolean;
+    class?: ClassValue;
+}
+export { default as ThemeToggle } from './theme-toggle.svelte';

package/dist/theme-toggle/index.js

@@ -0,0 +1,3 @@
+export { createThemeController } from './theme-controller.svelte.js';
+export { themeFlashScript } from './theme-flash.js';
+export { default as ThemeToggle } from './theme-toggle.svelte';

package/dist/theme-toggle/theme-controller.svelte.d.ts

@@ -0,0 +1,54 @@
+export type ThemeMode = 'system' | 'light' | 'dark';
+export interface ThemeControllerOptions {
+    /**
+     * Storage key used to persist the explicit theme preference.
+     * When the user selects system mode the key is removed.
+     * Defaults to `'dryui-theme'`.
+     */
+    storageKey?: string;
+}
+export interface ThemeController {
+    /** Current stored preference: `'system'`, `'light'`, or `'dark'`. */
+    readonly mode: ThemeMode;
+    /**
+     * Whether the active rendered theme is dark. Tracks `prefers-color-scheme`
+     * when the mode is `'system'`.
+     */
+    readonly isDark: boolean;
+    /** Whether the system color-scheme preference is currently dark. */
+    readonly systemPrefersDark: boolean;
+    /** Apply an explicit mode and persist it (or clear persistence for `'system'`). */
+    setMode(mode: ThemeMode): void;
+    /** Toggle between the two rendered themes, writing an explicit preference. */
+    cycle(): void;
+    /** Return to system mode and clear any persisted preference. */
+    reset(): void;
+    /** Stop watching `matchMedia` changes. Called automatically on HMR disposal. */
+    destroy(): void;
+}
+export declare const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+export declare const DEFAULT_STORAGE_KEY = "dryui-theme";
+/**
+ * Read the stored theme mode. Exported for testing; production callers
+ * should go through `createThemeController`.
+ */
+export declare function readStoredMode(storageKey: string): ThemeMode;
+/**
+ * Persist the theme mode. When `mode === 'system'`, removes the key.
+ * Exported for testing.
+ */
+export declare function writeStoredMode(storageKey: string, mode: ThemeMode): void;
+/**
+ * Apply the mode to `<html>` via `classList.theme-auto` and `dataset.theme`.
+ * Exported for testing.
+ */
+export declare function applyModeToDom(mode: ThemeMode): void;
+/**
+ * Create a theme controller that reads the current preference from storage,
+ * applies it to `<html>`, and watches the system color-scheme for changes.
+ *
+ * The returned object exposes reactive `mode`, `isDark`, and `systemPrefersDark`
+ * properties backed by Svelte 5 `$state`, plus imperative methods for changing
+ * or resetting the mode.
+ */
+export declare function createThemeController(options?: ThemeControllerOptions): ThemeController;