@dryui/ui 1.5.1 → 1.6.0

package/dist/date-range-picker/date-range-picker-content.svelte

@@ -1,8 +1,8 @@
 <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 { Placement } from '@dryui/primitives';
+	import PickerPopoverContent from '../internal/picker-popover-content.svelte';
 	import { getDateRangePickerCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -21,79 +21,15 @@
 	}: Props = $props();
 
 	const ctx = getDateRangePickerCtx();
-
-	let el = $state<HTMLDivElement | null>(null);
-
-	function attachContent(node: HTMLDivElement) {
-		el = node;
-
-		return () => {
-			if (el === node) {
-				el = null;
-			}
-		};
-	}
-
-	const popover = createAnchoredPopover({
-		triggerEl: () => ctx.triggerEl,
-		contentEl: () => el ?? null,
-		open: () => ctx.open,
-		placement: () => placement,
-		offset: () => offset
-	});
 </script>
 
-<div
-	{@attach attachContent}
-	{@attach fromAction(popover.applyPosition, () => style)}
-	popover="auto"
-	role="dialog"
-	id={ctx.contentId}
-	aria-labelledby={ctx.triggerId}
-	data-state={ctx.open ? 'open' : 'closed'}
-	data-drp-content
-	class={className}
-	ontoggle={(e) => {
-		const newState = (e as ToggleEvent).newState === 'open';
-		if (newState && !ctx.open) {
-			ctx.show();
-		} else if (!newState && ctx.open) {
-			ctx.close();
-		}
-	}}
+<PickerPopoverContent
+	controller={ctx}
+	dataAttribute="data-drp-content"
+	{placement}
+	{offset}
+	contentStyle={style}
+	contentClass={className}
+	{children}
 	{...rest}
->
-	{@render children()}
-</div>
-
-<style>
-	[data-drp-content] {
-		inset: unset;
-		margin: 0;
-		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);
-	}
-
-	[data-drp-content]:popover-open {
-		opacity: 1;
-		transform: translateY(0) scale(1);
-	}
-
-	@starting-style {
-		[data-drp-content]:popover-open {
-			opacity: 0;
-			transform: translateY(calc(var(--dry-motion-distance-xs) * -1))
-				scale(var(--dry-motion-scale-enter));
-		}
-	}
-
-	[data-drp-content] {
-		transition:
-			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
-			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
-	}
-</style>
+/>

package/dist/date-range-picker/date-range-picker-content.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Placement } from '@dryui/primitives';
+import type { Placement } from '@dryui/primitives';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     placement?: Placement;
     offset?: number;

package/dist/date-range-picker/date-range-picker-root.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
+	import {
+		createDateViewController,
+		createPickerPopoverController
+	} from '../internal/date-family-controller.svelte.js';
 	import { setDateRangePickerCtx } from './context.svelte.js';
-	import { getWeekStartDay, addMonths, isSameDay } from '@dryui/primitives';
 
 	interface Props {
 		open?: boolean;
@@ -26,18 +28,10 @@
 		children
 	}: Props = $props();
 
-	const weekStartDay = $derived(getWeekStartDay(locale));
-
-	const triggerId = generateFormId('date-range-picker-trigger');
-	const contentId = generateFormId('date-range-picker-content');
-
-	// View state: which month/year is the calendar showing
-	let viewMonth = $state(startDate ? startDate.getMonth() : new Date().getMonth());
-	let viewYear = $state(startDate ? startDate.getFullYear() : new Date().getFullYear());
-	let triggerEl = $state<HTMLElement | null>(null);
-
-	// The day that has keyboard focus within the calendar grid
-	let focusedDate = $state<Date>(startDate ?? new Date());
+	const view = createDateViewController({
+		initialDate: startDate,
+		locale: () => locale
+	});
 
 	// Hover date for range preview
 	let hoverDate = $state<Date | null>(null);
@@ -45,6 +39,22 @@
 	// Selection mode: 'start' means next click sets start, 'end' means next click sets end
 	let selecting = $state<'start' | 'end'>('start');
 
+	const popover = createPickerPopoverController({
+		triggerIdPrefix: 'date-range-picker-trigger',
+		contentIdPrefix: 'date-range-picker-content',
+		open: () => open,
+		setOpen: (nextOpen) => {
+			open = nextOpen;
+		},
+		disabled: () => disabled,
+		onShow: () => {
+			selecting = 'start';
+		},
+		onClose: () => {
+			hoverDate = null;
+		}
+	});
+
 	setDateRangePickerCtx({
 		get open() {
 			return open;
@@ -56,13 +66,13 @@
 			return endDate;
 		},
 		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;
@@ -77,7 +87,7 @@
 			return disabled;
 		},
 		get weekStartDay() {
-			return weekStartDay;
+			return view.weekStartDay;
 		},
 		get hoverDate() {
 			return hoverDate;
@@ -85,41 +95,33 @@
 		get selecting() {
 			return selecting;
 		},
-		triggerId,
-		contentId,
+		get triggerId() {
+			return popover.triggerId;
+		},
+		get contentId() {
+			return popover.contentId;
+		},
 		get triggerEl() {
-			return triggerEl;
+			return popover.triggerEl;
 		},
 		set triggerEl(element: HTMLElement | null) {
-			triggerEl = element;
+			popover.setTriggerEl(element);
 		},
 		show() {
-			if (!disabled) {
-				selecting = 'start';
-				open = true;
-			}
+			popover.show();
 		},
 		close() {
-			open = false;
-			hoverDate = null;
+			popover.close();
 		},
 		toggle() {
-			if (!disabled) {
-				if (!open) {
-					selecting = 'start';
-				}
-				open = !open;
-				if (!open) {
-					hoverDate = null;
-				}
-			}
+			popover.toggle();
 		},
 		selectDate(date: Date) {
 			if (selecting === 'start') {
 				startDate = date;
 				endDate = null;
 				selecting = 'end';
-				focusedDate = date;
+				view.focusDate(date);
 			} else {
 				// 'end' mode
 				if (startDate && date.getTime() < startDate.getTime()) {
@@ -130,27 +132,20 @@
 					endDate = date;
 				}
 				selecting = 'start';
-				hoverDate = null;
-				open = false;
+				popover.close();
 			}
 		},
 		setHoverDate(date: Date | null) {
 			hoverDate = 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/drag-and-drop/group-context.svelte.d.ts

@@ -9,5 +9,5 @@ export interface DragAndDropGroupContext {
     setActiveTarget(listId: string | null, index: number | null): void;
     move(fromListId: string, fromIndex: number, toListId: string, toIndex: number): void;
 }
-export declare function setGroupCtx(ctx: DragAndDropGroupContext): void;
+export declare function setGroupCtx(ctx: DragAndDropGroupContext): DragAndDropGroupContext;
 export declare function getGroupCtx(): DragAndDropGroupContext | null;

package/dist/drag-and-drop/group-context.svelte.js

@@ -1,8 +1,8 @@
-import { getContext, setContext, hasContext } from 'svelte';
-const GROUP_KEY = Symbol('drag-and-drop-group');
+import { createContext } from '@dryui/primitives';
+const [_setGroupCtx, _getGroupCtx] = createContext('drag-and-drop-group');
 export function setGroupCtx(ctx) {
-    setContext(GROUP_KEY, ctx);
+    return _setGroupCtx(ctx);
 }
 export function getGroupCtx() {
-    return hasContext(GROUP_KEY) ? getContext(GROUP_KEY) : null;
+    return _getGroupCtx() ?? null;
 }

package/dist/dropdown-menu/context.svelte.d.ts

@@ -1,10 +1,4 @@
-export interface DropdownMenuContext {
-    readonly open: boolean;
-    readonly triggerId: string;
-    readonly contentId: string;
-    triggerEl: HTMLElement | null;
-    show: () => void;
-    close: () => void;
-    toggle: () => void;
+import type { MenuRootState } from '../internal/menu-root-state.svelte.js';
+export interface DropdownMenuContext extends MenuRootState {
 }
 export declare const setDropdownMenuCtx: (ctx: DropdownMenuContext) => DropdownMenuContext, getDropdownMenuCtx: () => DropdownMenuContext;

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { fromAction } from 'svelte/attachments';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { createAnchoredPopover, createMenuNavigation } from '@dryui/primitives';
 	import type { Placement } from '@dryui/primitives';
@@ -22,7 +23,17 @@
 
 	const ctx = getDropdownMenuCtx();
 
-	let el = $state<HTMLDivElement>();
+	let el = $state<HTMLDivElement | null>(null);
+
+	function attachContent(node: HTMLDivElement) {
+		el = node;
+
+		return () => {
+			if (el === node) {
+				el = null;
+			}
+		};
+	}
 
 	const popover = createAnchoredPopover({
 		triggerEl: () => ctx.triggerEl,
@@ -39,7 +50,8 @@
 </script>
 
 <div
-	bind:this={el}
+	{@attach attachContent}
+	{@attach fromAction(popover.applyPosition, () => style)}
 	popover="auto"
 	role="menu"
 	tabindex="-1"
@@ -48,7 +60,6 @@
 	data-dropdown-menu-content
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
-	use:popover.applyPosition={style}
 	ontoggle={(e) => {
 		const newState = (e as ToggleEvent).newState === 'open';
 		if (newState && !ctx.open) {
@@ -70,6 +81,7 @@
 		inset: unset;
 		margin: 0;
 
+		--dry-menu-item-padding: var(--dry-space-3) var(--dry-space-4);
 		background: var(--dry-menu-bg, var(--dry-overlay-bg, var(--dry-color-bg-overlay)));
 		color: var(--dry-color-text-strong);
 		border: 1px solid

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import MenuGroup from '../internal/menu-group.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		children: Snippet;
@@ -9,6 +10,6 @@
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<div role="group" class={className} {...rest}>
+<MenuGroup {className} {...rest}>
 	{@render children()}
-</div>
+</MenuGroup>

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