@dryui/ui 1.5.1 → 1.6.0

package/dist/internal/picker-popover-content.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { fromAction } from 'svelte/attachments';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { createAnchoredPopover, type Placement } from '@dryui/primitives';
+	import type { PickerPopoverController } from './date-family-controller.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		controller: PickerPopoverController;
+		dataAttribute: 'data-dp-content' | 'data-drp-content';
+		placement?: Placement;
+		offset?: number;
+		contentClass?: HTMLAttributes<HTMLDivElement>['class'];
+		contentStyle?: HTMLAttributes<HTMLDivElement>['style'];
+		children: Snippet;
+	}
+
+	let {
+		controller,
+		dataAttribute,
+		placement = 'bottom-start',
+		offset = 8,
+		contentClass,
+		contentStyle,
+		children,
+		...rest
+	}: Props = $props();
+
+	let el = $state<HTMLDivElement | null>(null);
+
+	const markerAttrs = $derived.by<Record<string, string>>(() => ({
+		'data-picker-popover-content': '',
+		[dataAttribute]: ''
+	}));
+
+	function attachContent(node: HTMLDivElement) {
+		el = node;
+
+		return () => {
+			if (el === node) {
+				el = null;
+			}
+		};
+	}
+
+	const popover = createAnchoredPopover({
+		triggerEl: () => controller.triggerEl,
+		contentEl: () => el ?? null,
+		open: () => controller.open,
+		placement: () => placement,
+		offset: () => offset
+	});
+</script>
+
+<div
+	{@attach attachContent}
+	{@attach fromAction(popover.applyPosition, () => contentStyle)}
+	popover="auto"
+	role="dialog"
+	id={controller.contentId}
+	aria-labelledby={controller.triggerId}
+	data-state={controller.open ? 'open' : 'closed'}
+	class={contentClass}
+	{...markerAttrs}
+	ontoggle={(e) => {
+		const newState = (e as ToggleEvent).newState === 'open';
+
+		if (newState && !controller.open) {
+			controller.show();
+		} else if (!newState && controller.open) {
+			controller.close();
+		}
+	}}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-picker-popover-content] {
+		inset: unset;
+		margin: 0;
+		display: inline-grid;
+		padding: var(--dry-space-3);
+		border: 1px solid var(--dry-color-stroke-weak);
+		border-radius: var(--dry-radius-lg);
+		background: var(--dry-color-bg-overlay);
+		box-shadow: var(--dry-shadow-lg);
+		color: var(--dry-color-text-strong);
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
+			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
+	}
+
+	[data-picker-popover-content]:not(:popover-open) {
+		display: none;
+	}
+
+	[data-picker-popover-content]:popover-open {
+		display: inline-grid;
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+
+	@starting-style {
+		[data-picker-popover-content]:popover-open {
+			opacity: 0;
+			transform: translateY(calc(var(--dry-motion-distance-xs) * -1))
+				scale(var(--dry-motion-scale-enter));
+		}
+	}
+</style>

package/dist/internal/picker-popover-content.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Placement } from '@dryui/primitives';
+import type { PickerPopoverController } from './date-family-controller.svelte.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    controller: PickerPopoverController;
+    dataAttribute: 'data-dp-content' | 'data-drp-content';
+    placement?: Placement;
+    offset?: number;
+    contentClass?: HTMLAttributes<HTMLDivElement>['class'];
+    contentStyle?: HTMLAttributes<HTMLDivElement>['style'];
+    children: Snippet;
+}
+declare const PickerPopoverContent: import("svelte").Component<Props, {}, "">;
+type PickerPopoverContent = ReturnType<typeof PickerPopoverContent>;
+export default PickerPopoverContent;

package/dist/link-preview/link-preview-content.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAnchoredPopover } from '@dryui/primitives';
 	import type { Placement } from '@dryui/primitives';
+	import { createAnchoredOverlayContent } from '../internal/anchored-overlay-content.svelte.js';
 	import { getLinkPreviewCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -22,25 +22,22 @@
 
 	const ctx = getLinkPreviewCtx();
 
-	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
 	});
 </script>
 
 <div
-	bind:this={contentEl}
+	{@attach overlay.bindContent}
+	{@attach overlay.position}
 	id={ctx.contentId}
 	role="tooltip"
 	popover="manual"
 	data-link-preview-content
 	data-state={ctx.open ? 'open' : 'closed'}
-	use:popover.applyPosition={style}
 	onmouseenter={() => ctx.showImmediate()}
 	onmouseleave={() => ctx.close()}
 	class={className}

package/dist/list/list-item-icon.svelte

@@ -2,16 +2,16 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLAttributes<HTMLDivElement> {
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		children: Snippet;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<div data-list-item-icon class={className} {...rest}>
+<span data-list-item-icon class={className} {...rest}>
 	{@render children()}
-</div>
+</span>
 
 <style>
 	[data-list-item-icon] {

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+interface Props extends HTMLAttributes<HTMLSpanElement> {
     children: Snippet;
 }
 declare const ListItemIcon: import("svelte").Component<Props, {}, "">;

package/dist/list/list-item-text.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLAttributes<HTMLDivElement> {
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		primary?: Snippet;
 		secondary?: Snippet;
 		children?: Snippet;
@@ -11,7 +11,7 @@
 	let { class: className, primary, secondary, children, ...rest }: Props = $props();
 </script>
 
-<div data-list-item-text class={className} {...rest}>
+<span data-list-item-text class={className} {...rest}>
 	{#if primary}
 		<span data-list-item-primary>{@render primary()}</span>
 	{:else if children}
@@ -20,7 +20,7 @@
 	{#if secondary}
 		<span data-list-item-secondary>{@render secondary()}</span>
 	{/if}
-</div>
+</span>
 
 <style>
 	[data-list-item-text] {

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+interface Props extends HTMLAttributes<HTMLSpanElement> {
     primary?: Snippet;
     secondary?: Snippet;
     children?: Snippet;

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/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}
 >

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/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();

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;