@dryui/ui 1.5.1 → 1.6.0

package/dist/heading/heading.svelte

@@ -6,10 +6,18 @@
 	interface Props extends HTMLAttributes<HTMLHeadingElement> {
 		level?: 1 | 2 | 3 | 4 | 5 | 6;
 		variant?: 'default' | 'display';
+		className?: HTMLAttributes<HTMLHeadingElement>['class'];
 		children: Snippet;
 	}
 
-	let { level = 2, variant = 'default', class: className, children, ...rest }: Props = $props();
+	let {
+		level = 2,
+		variant = 'default',
+		class: classAttr,
+		className = classAttr,
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
 {#if level === 1}
@@ -51,6 +59,7 @@
 		font-weight: 700;
 		line-height: var(--dry-type-heading-2-leading, 2.5rem);
 		letter-spacing: -0.03em;
+		text-wrap: balance;
 	}
 
 	[data-level='1'] {

package/dist/heading/heading.svelte.d.ts

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     variant?: 'default' | 'display';
+    className?: HTMLAttributes<HTMLHeadingElement>['class'];
     children: Snippet;
 }
 declare const Heading: import("svelte").Component<Props, {}, "">;

package/dist/heading/index.d.ts

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     variant?: 'default' | 'display';
+    className?: HTMLAttributes<HTMLHeadingElement>['class'];
     children: Snippet;
 }
 export { default as Heading } from './heading.svelte';

package/dist/hover-card/hover-card-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 { getHoverCardCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -22,28 +22,16 @@
 
 	const ctx = getHoverCardCtx();
 
-	let contentEl = $state<HTMLDivElement>();
-
-	$effect(() => {
-		if (contentEl) {
+	const overlay = createAnchoredOverlayContent({
+		ctx,
+		placement: () => placement,
+		offset: () => offset,
+		style: () => style,
+		onContentChange: (contentEl) => {
 			ctx.contentEl = contentEl;
-
-			return () => {
-				if (ctx.contentEl === contentEl) {
-					ctx.contentEl = null;
-				}
-			};
 		}
 	});
 
-	const popover = createAnchoredPopover({
-		triggerEl: () => ctx.triggerEl,
-		contentEl: () => contentEl ?? null,
-		open: () => ctx.open,
-		placement: () => placement,
-		offset: () => offset
-	});
-
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
 			e.preventDefault();
@@ -75,14 +63,14 @@
 </script>
 
 <div
-	bind:this={contentEl}
+	{@attach overlay.bindContent}
+	{@attach overlay.position}
 	id={ctx.contentId}
 	popover="manual"
 	role="dialog"
 	aria-labelledby={ctx.triggerId}
 	data-hover-card-content
 	data-state={ctx.open ? 'open' : 'closed'}
-	use:popover.applyPosition={style}
 	onpointerenter={handlePointerEnter}
 	onpointerleave={handlePointerLeave}
 	onfocusin={handleFocusIn}

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

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import type { ComponentProps } from 'svelte';
+	import type { HoverCardRootProps } from '@dryui/primitives';
 	import { HoverCard as PrimitiveHoverCard } from '@dryui/primitives';
 
 	// The styled hover-card only adds theme tokens to trigger/content, so root
 	// is a pure re-export of the primitives implementation. The ctx set here is
 	// consumed by the ui trigger/content via the shared primitives ctx key.
-	let props: ComponentProps<typeof PrimitiveHoverCard.Root> = $props();
+	let props: HoverCardRootProps = $props();
 </script>
 
 <PrimitiveHoverCard.Root {...props} />

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

@@ -0,0 +1,4 @@
+import type { HoverCardRootProps } from '@dryui/primitives';
+declare const HoverCardRoot: import("svelte").Component<HoverCardRootProps, {}, "">;
+type HoverCardRoot = ReturnType<typeof HoverCardRoot>;
+export default HoverCardRoot;

package/dist/index.d.ts

@@ -52,6 +52,8 @@ export { Toggle } from './toggle/index.js';
 export type { ToggleProps } from './toggle/index.js';
 export { ToggleGroup } from './toggle-group/index.js';
 export type { ToggleGroupRootProps, ToggleGroupItemProps } from './toggle-group/index.js';
+export { ThemeToggle, createThemeController, themeFlashScript } from './theme-toggle/index.js';
+export type { ThemeToggleProps, ThemeMode, ThemeController, ThemeControllerOptions } from './theme-toggle/index.js';
 export { InputGroup } from './input-group/index.js';
 export type { InputGroupRootProps, InputGroupPrefixProps, InputGroupInputProps, InputGroupSuffixProps, InputGroupSelectProps, InputGroupSeparatorProps, InputGroupActionProps } from './input-group/index.js';
 export { OptionPicker } from './option-picker/index.js';

package/dist/index.js

@@ -26,6 +26,7 @@ export { SegmentedControl } from './segmented-control/index.js';
 export { Slider } from './slider/index.js';
 export { Toggle } from './toggle/index.js';
 export { ToggleGroup } from './toggle-group/index.js';
+export { ThemeToggle, createThemeController, themeFlashScript } from './theme-toggle/index.js';
 export { InputGroup } from './input-group/index.js';
 export { OptionPicker } from './option-picker/index.js';
 // Phase 4 — Layout Primitives

package/dist/internal/anchored-overlay-content.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Placement } from '@dryui/primitives';
+interface AnchoredOverlayContentContext {
+    readonly open: boolean;
+    readonly contentId: string;
+    triggerEl: HTMLElement | null;
+}
+interface AnchoredOverlayContentOptions {
+    ctx: AnchoredOverlayContentContext;
+    placement: () => Placement;
+    offset: () => number;
+    style: () => HTMLAttributes<HTMLDivElement>['style'];
+    onContentChange?: (contentEl: HTMLDivElement | null) => void;
+}
+export declare function createAnchoredOverlayContent(options: AnchoredOverlayContentOptions): {
+    bindContent: (node: HTMLDivElement) => () => void;
+    contentEl: () => HTMLDivElement | null;
+    position: import("svelte/attachments").Attachment<HTMLElement>;
+};
+export {};

package/dist/internal/anchored-overlay-content.svelte.js

@@ -0,0 +1,28 @@
+import { fromAction } from 'svelte/attachments';
+import { createAnchoredPopover } from '@dryui/primitives';
+export function createAnchoredOverlayContent(options) {
+    let contentEl = $state();
+    const popover = createAnchoredPopover({
+        triggerEl: () => options.ctx.triggerEl,
+        contentEl: () => contentEl ?? null,
+        open: () => options.ctx.open,
+        placement: options.placement,
+        offset: options.offset
+    });
+    const position = fromAction(popover.applyPosition, options.style);
+    function bindContent(node) {
+        contentEl = node;
+        options.onContentChange?.(node);
+        return () => {
+            if (contentEl === node) {
+                contentEl = undefined;
+            }
+            options.onContentChange?.(null);
+        };
+    }
+    return {
+        bindContent,
+        contentEl: () => contentEl ?? null,
+        position
+    };
+}

package/dist/internal/date-family-controller.svelte.d.ts

@@ -0,0 +1,45 @@
+interface DateViewControllerConfig {
+    initialDate?: Date | null;
+    locale: () => string;
+}
+export interface DateViewController {
+    readonly focusedDate: Date;
+    readonly viewMonth: number;
+    readonly viewYear: number;
+    readonly weekStartDay: number;
+    focusDate: (date: Date) => void;
+    setFocusedDate: (date: Date) => void;
+    goToMonth: (month: number) => void;
+    goToYear: (year: number) => void;
+    nextMonth: () => void;
+    prevMonth: () => void;
+}
+export declare function createDateViewController({ initialDate, locale }: DateViewControllerConfig): DateViewController;
+interface PickerPopoverControllerConfig {
+    triggerIdPrefix: string;
+    contentIdPrefix: string;
+    open: () => boolean;
+    setOpen: (open: boolean) => void;
+    disabled: () => boolean;
+    onShow?: () => void;
+    onClose?: () => void;
+}
+export interface PickerPopoverController {
+    readonly open: boolean;
+    readonly triggerId: string;
+    readonly contentId: string;
+    readonly triggerEl: HTMLElement | null;
+    show: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+export declare function createPickerPopoverController({ triggerIdPrefix, contentIdPrefix, open, setOpen, disabled, onShow, onClose }: PickerPopoverControllerConfig): {
+    readonly triggerId: string;
+    readonly contentId: string;
+    readonly triggerEl: HTMLElement | null;
+    setTriggerEl(element: HTMLElement | null): void;
+    show(): void;
+    close(): void;
+    toggle(): void;
+};
+export {};

package/dist/internal/date-family-controller.svelte.js

@@ -0,0 +1,99 @@
+import { generateFormId, getWeekStartDay } from '@dryui/primitives';
+import { SvelteDate } from 'svelte/reactivity';
+export function createDateViewController({ initialDate = null, locale }) {
+    const seedDate = initialDate ? new SvelteDate(initialDate.getTime()) : new SvelteDate();
+    let viewMonth = $state(seedDate.getMonth());
+    let viewYear = $state(seedDate.getFullYear());
+    let focusedTime = $state(seedDate.getTime());
+    const weekStartDay = $derived(getWeekStartDay(locale()));
+    function updateViewFromDate(date) {
+        viewMonth = date.getMonth();
+        viewYear = date.getFullYear();
+    }
+    function goToMonth(month) {
+        if (month < 0) {
+            viewMonth = 11;
+            viewYear -= 1;
+            return;
+        }
+        if (month > 11) {
+            viewMonth = 0;
+            viewYear += 1;
+            return;
+        }
+        viewMonth = month;
+    }
+    function goToYear(year) {
+        viewYear = year;
+    }
+    return {
+        get focusedDate() {
+            return new SvelteDate(focusedTime);
+        },
+        get viewMonth() {
+            return viewMonth;
+        },
+        get viewYear() {
+            return viewYear;
+        },
+        get weekStartDay() {
+            return weekStartDay;
+        },
+        focusDate(date) {
+            focusedTime = date.getTime();
+        },
+        setFocusedDate(date) {
+            focusedTime = date.getTime();
+            updateViewFromDate(date);
+        },
+        goToMonth,
+        goToYear,
+        nextMonth() {
+            goToMonth(viewMonth + 1);
+        },
+        prevMonth() {
+            goToMonth(viewMonth - 1);
+        }
+    };
+}
+export function createPickerPopoverController({ triggerIdPrefix, contentIdPrefix, open, setOpen, disabled, onShow, onClose }) {
+    const triggerId = generateFormId(triggerIdPrefix);
+    const contentId = generateFormId(contentIdPrefix);
+    let triggerEl = $state(null);
+    return {
+        get triggerId() {
+            return triggerId;
+        },
+        get contentId() {
+            return contentId;
+        },
+        get triggerEl() {
+            return triggerEl;
+        },
+        setTriggerEl(element) {
+            triggerEl = element;
+        },
+        show() {
+            if (disabled())
+                return;
+            onShow?.();
+            setOpen(true);
+        },
+        close() {
+            setOpen(false);
+            onClose?.();
+        },
+        toggle() {
+            if (disabled())
+                return;
+            const nextOpen = !open();
+            if (nextOpen) {
+                onShow?.();
+            }
+            setOpen(nextOpen);
+            if (!nextOpen) {
+                onClose?.();
+            }
+        }
+    };
+}

package/dist/internal/menu-group.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		className?: HTMLAttributes<HTMLDivElement>['class'];
+		children: Snippet;
+	}
+
+	let { className, children, ...rest }: Props = $props();
+</script>
+
+<div role="group" class={className} {...rest}>
+	{@render children()}
+</div>

package/dist/internal/menu-group.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    className?: HTMLAttributes<HTMLDivElement>['class'];
+    children: Snippet;
+}
+declare const MenuGroup: import("svelte").Component<Props, {}, "">;
+type MenuGroup = ReturnType<typeof MenuGroup>;
+export default MenuGroup;

package/dist/internal/menu-item.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		className?: HTMLAttributes<HTMLDivElement>['class'];
+		close: () => void;
+		disabled?: boolean;
+		children: Snippet;
+	}
+
+	let { className, close, disabled, children, onclick, onkeydown, ...rest }: Props = $props();
+
+	function handleClick(e: MouseEvent & { currentTarget: HTMLDivElement }) {
+		if (disabled) return;
+		if (onclick) {
+			(onclick as (event: MouseEvent & { currentTarget: HTMLDivElement }) => void)(e);
+		}
+		close();
+	}
+
+	function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLDivElement }) {
+		if (disabled) return;
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			e.currentTarget.click();
+		}
+		if (onkeydown) {
+			(onkeydown as (event: KeyboardEvent & { currentTarget: HTMLDivElement }) => void)(e);
+		}
+	}
+</script>
+
+<div
+	role="menuitem"
+	tabindex={disabled ? undefined : -1}
+	aria-disabled={disabled || undefined}
+	data-disabled={disabled || undefined}
+	class={className}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	div {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding: var(--dry-menu-item-padding, var(--dry-space-2_5) var(--dry-space-2));
+		border-radius: var(
+			--dry-menu-item-radius,
+			min(var(--dry-control-radius, var(--dry-radius-sm)), var(--dry-space-4))
+		);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		cursor: pointer;
+		user-select: none;
+		outline: none;
+		color: var(--dry-color-text-strong);
+		min-height: var(--dry-space-11);
+		transition: background var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	div:hover:not([data-disabled]),
+	div:focus-visible {
+		background: var(--dry-color-fill);
+	}
+
+	div:active:not([data-disabled]) {
+		background: var(--dry-color-fill-hover);
+	}
+
+	div[data-disabled] {
+		color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+</style>

package/dist/internal/menu-item.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    className?: HTMLAttributes<HTMLDivElement>['class'];
+    close: () => void;
+    disabled?: boolean;
+    children: Snippet;
+}
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/internal/menu-label.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		className?: HTMLAttributes<HTMLDivElement>['class'];
+		children: Snippet;
+	}
+
+	let { className, children, ...rest }: Props = $props();
+</script>
+
+<div role="presentation" class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	div {
+		padding: var(--dry-space-1_5) var(--dry-space-2);
+		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		color: var(--dry-color-text-weak);
+		font-weight: 500;
+	}
+</style>

package/dist/internal/menu-label.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    className?: HTMLAttributes<HTMLDivElement>['class'];
+    children: Snippet;
+}
+declare const MenuLabel: import("svelte").Component<Props, {}, "">;
+type MenuLabel = ReturnType<typeof MenuLabel>;
+export default MenuLabel;

package/dist/internal/menu-root-state.svelte.d.ts

@@ -0,0 +1,24 @@
+export interface MenuRootState {
+    readonly open: boolean;
+    readonly triggerId: string;
+    readonly contentId: string;
+    triggerEl: HTMLElement | null;
+    show: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+export interface MenuPosition {
+    x: number;
+    y: number;
+}
+export interface PositionedMenuRootState extends MenuRootState {
+    position: MenuPosition;
+}
+interface CreateMenuRootStateOptions {
+    idBase: string;
+    getOpen: () => boolean;
+    setOpen: (value: boolean) => void;
+}
+export declare function createMenuRootState(options: CreateMenuRootStateOptions): MenuRootState;
+export declare function createPositionedMenuRootState(options: CreateMenuRootStateOptions): PositionedMenuRootState;
+export {};

package/dist/internal/menu-root-state.svelte.js

@@ -0,0 +1,42 @@
+import { generateFormId } from '@dryui/primitives';
+function createBaseMenuRootState(options) {
+    const triggerId = generateFormId(`${options.idBase}-trigger`);
+    const contentId = generateFormId(`${options.idBase}-content`);
+    return {
+        triggerId,
+        contentId,
+        triggerEl: null,
+        show() {
+            options.setOpen(true);
+        },
+        close() {
+            options.setOpen(false);
+        },
+        toggle() {
+            options.setOpen(!options.getOpen());
+        }
+    };
+}
+export function createMenuRootState(options) {
+    return {
+        get open() {
+            return options.getOpen();
+        },
+        ...createBaseMenuRootState(options)
+    };
+}
+export function createPositionedMenuRootState(options) {
+    let position = $state({ x: 0, y: 0 });
+    return {
+        get open() {
+            return options.getOpen();
+        },
+        ...createBaseMenuRootState(options),
+        get position() {
+            return position;
+        },
+        set position(value) {
+            position = value;
+        }
+    };
+}

package/dist/internal/menu-separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		className?: HTMLAttributes<HTMLDivElement>['class'];
+	}
+
+	let { className, ...rest }: Props = $props();
+</script>
+
+<div role="separator" class={className} {...rest}></div>
+
+<style>
+	div {
+		height: 1px;
+		background: var(--dry-color-stroke-weak);
+		margin: var(--dry-space-1) 0;
+	}
+</style>

package/dist/internal/menu-separator.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    className?: HTMLAttributes<HTMLDivElement>['class'];
+}
+declare const MenuSeparator: import("svelte").Component<Props, {}, "">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
+export default MenuSeparator;

package/dist/internal/motion.js

@@ -11,8 +11,19 @@ export function supportsScrollTimelines() {
     return (CSS.supports('animation-timeline: view()') || CSS.supports('scroll-timeline-name: --dry-scroll'));
 }
 export function extractThemeColor(property, element) {
+    if (typeof document === 'undefined') {
+        return [0, 0, 0];
+    }
+    const readComputedStyle = typeof getComputedStyle === 'function'
+        ? getComputedStyle
+        : typeof window !== 'undefined' && typeof window.getComputedStyle === 'function'
+            ? window.getComputedStyle.bind(window)
+            : null;
+    if (!readComputedStyle) {
+        return [0, 0, 0];
+    }
     const el = element ?? document.documentElement;
-    const value = getComputedStyle(el).getPropertyValue(property).trim();
+    const value = readComputedStyle(el).getPropertyValue(property).trim();
     // Parse hex (#rgb, #rrggbb)
     const hexMatch = value.match(/^#([0-9a-f]{3,8})$/i);
     if (hexMatch) {