@dryui/ui 1.5.1 → 1.7.0

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

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getDropdownMenuCtx } from './context.svelte.js';
+	import MenuItem from '../internal/menu-item.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		disabled?: boolean;
@@ -11,70 +12,16 @@
 	let { class: className, disabled, children, onclick, onkeydown, ...rest }: Props = $props();
 
 	const ctx = getDropdownMenuCtx();
-
-	function handleClick(e: MouseEvent & { currentTarget: HTMLDivElement }) {
-		if (disabled) return;
-		if (onclick) (onclick as (e: MouseEvent & { currentTarget: HTMLDivElement }) => void)(e);
-		ctx.close();
-	}
-
-	function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLDivElement }) {
-		if (disabled) return;
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			(e.currentTarget as HTMLElement).click();
-		}
-		if (onkeydown) (onkeydown as (e: KeyboardEvent & { currentTarget: HTMLDivElement }) => void)(e);
-	}
 </script>
 
-<div
-	role="menuitem"
-	tabindex={disabled ? undefined : -1}
-	aria-disabled={disabled || undefined}
+<MenuItem
 	data-dropdown-menu-item
-	data-disabled={disabled || undefined}
-	class={className}
-	onclick={handleClick}
-	onkeydown={handleKeydown}
+	{className}
+	close={ctx.close}
+	{disabled}
+	{onclick}
+	{onkeydown}
 	{...rest}
 >
 	{@render children()}
-</div>
-
-<style>
-	[data-dropdown-menu-item] {
-		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-3) var(--dry-space-4));
-		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);
-	}
-
-	[data-dropdown-menu-item]:hover:not([data-disabled]),
-	[data-dropdown-menu-item]:focus-visible {
-		background: var(--dry-color-fill);
-	}
-
-	[data-dropdown-menu-item]:active:not([data-disabled]) {
-		background: var(--dry-color-fill-hover);
-	}
-
-	[data-dropdown-menu-item][data-disabled] {
-		color: var(--dry-color-text-disabled);
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-</style>
+</MenuItem>

package/dist/dropdown-menu/dropdown-menu-label.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import MenuLabel from '../internal/menu-label.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		children: Snippet;
@@ -9,15 +10,6 @@
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<div role="presentation" data-dropdown-menu-label class={className} {...rest}>
+<MenuLabel data-dropdown-menu-label {className} {...rest}>
 	{@render children()}
-</div>
-
-<style>
-	[data-dropdown-menu-label] {
-		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>
+</MenuLabel>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { setDropdownMenuCtx } from './context.svelte.js';
+	import { createMenuRootState } from '../internal/menu-root-state.svelte.js';
 
 	interface Props {
 		open?: boolean;
@@ -10,26 +10,15 @@
 
 	let { open = $bindable(false), children }: Props = $props();
 
-	const triggerId = generateFormId('dropdown-trigger');
-	const contentId = generateFormId('dropdown-content');
-
-	setDropdownMenuCtx({
-		get open() {
-			return open;
-		},
-		triggerId,
-		contentId,
-		triggerEl: null,
-		show() {
-			open = true;
-		},
-		close() {
-			open = false;
-		},
-		toggle() {
-			open = !open;
-		}
-	});
+	setDropdownMenuCtx(
+		createMenuRootState({
+			idBase: 'dropdown',
+			getOpen: () => open,
+			setOpen: (value) => {
+				open = value;
+			}
+		})
+	);
 </script>
 
 {@render children()}

package/dist/dropdown-menu/dropdown-menu-separator.svelte

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

package/dist/flip-card/context.svelte.d.ts

@@ -0,0 +1,5 @@
+export interface FlipCardContext {
+    readonly flipped: boolean;
+    readonly direction: 'horizontal' | 'vertical';
+}
+export declare const setFlipCardCtx: (ctx: FlipCardContext) => FlipCardContext, getFlipCardCtx: () => FlipCardContext;

package/dist/flip-card/context.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from '@dryui/primitives';
+export const [setFlipCardCtx, getFlipCardCtx] = createContext('flip-card');

package/dist/flip-card/flip-card-back.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { getContext } from 'svelte';
+	import { getFlipCardCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		children: Snippet;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();
-	const ctx = getContext<{ flipped: boolean }>('flip-card');
+	const ctx = getFlipCardCtx();
 </script>
 
 <div

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

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { setContext } from 'svelte';
+	import Button from '../button/button.svelte';
+	import VisuallyHidden from '../visually-hidden/visually-hidden.svelte';
+	import { setFlipCardCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		trigger?: 'hover' | 'click';
@@ -14,6 +16,8 @@
 		trigger = 'hover',
 		direction = 'horizontal',
 		flipped = $bindable(false),
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledBy,
 		class: className,
 		children,
 		...rest
@@ -23,7 +27,9 @@
 		flipped = !flipped;
 	}
 
-	setContext('flip-card', {
+	const toggleLabel = $derived(flipped ? 'Show front of card' : 'Show back of card');
+
+	setFlipCardCtx({
 		get flipped() {
 			return flipped;
 		},
@@ -33,29 +39,34 @@
 	});
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
 	data-flip-card
+	data-part="root"
 	data-flipped={flipped ? '' : undefined}
 	data-trigger={trigger}
 	data-direction={direction}
-	role={trigger === 'click' ? 'button' : 'group'}
-	aria-roledescription="flip card"
-	tabindex={trigger === 'click' ? 0 : undefined}
+	role={trigger === 'hover' ? 'group' : undefined}
+	aria-roledescription={trigger === 'hover' ? 'flip card' : undefined}
+	aria-label={trigger === 'hover' ? ariaLabel : undefined}
+	aria-labelledby={trigger === 'hover' ? ariaLabelledBy : undefined}
 	onmouseenter={trigger === 'hover' ? () => (flipped = true) : undefined}
 	onmouseleave={trigger === 'hover' ? () => (flipped = false) : undefined}
-	onclick={trigger === 'click' ? toggle : undefined}
-	onkeydown={trigger === 'click'
-		? (e) => {
-				if (e.key === 'Enter' || e.key === ' ') {
-					e.preventDefault();
-					toggle();
-				}
-			}
-		: undefined}
 	class={className}
 	{...rest}
 >
+	{#if trigger === 'click'}
+		<span data-flip-card-toggle-shell>
+			<Button
+				variant="bare"
+				aria-pressed={flipped}
+				aria-label={ariaLabel ?? toggleLabel}
+				aria-labelledby={ariaLabelledBy}
+				onclick={toggle}
+			>
+				<VisuallyHidden>{toggleLabel}</VisuallyHidden>
+			</Button>
+		</span>
+	{/if}
 	{@render children()}
 </div>
 
@@ -72,6 +83,22 @@
 		transform-style: preserve-3d;
 	}
 
+	[data-flip-card-toggle-shell] {
+		position: absolute;
+		inset: 0;
+		z-index: 3;
+		display: grid;
+		border-radius: inherit;
+		--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-radius: inherit;
+		box-shadow: none;
+	}
+
 	[data-flip-card][data-direction='horizontal'][data-flipped] {
 		--dry-flip-card-front-transform: rotateY(180deg);
 		--dry-flip-card-back-transform: rotateY(360deg);

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/image/image.svelte

@@ -67,6 +67,11 @@
 		object-fit: var(--dry-image-object-fit);
 	}
 
+	img[data-state='loaded'],
+	img[data-state='fallback'] {
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
+	}
+
 	img[data-state='fallback'] {
 		opacity: 0.95;
 	}

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>