@dryui/ui 1.5.1 → 1.7.0

package/dist/accordion/accordion-item.svelte

@@ -46,6 +46,15 @@
 		display: grid;
 		border-bottom: 1px solid var(--dry-color-stroke-weak);
 
+		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);
+		}
+
 		&:last-child {
 			border-bottom: none;
 		}

package/dist/accordion/accordion-root.svelte

@@ -47,7 +47,7 @@
 	});
 </script>
 
-<div data-accordion data-orientation={orientation} class={className} {...rest}>
+<div data-accordion data-dry-stagger data-orientation={orientation} class={className} {...rest}>
 	{@render children()}
 </div>
 

package/dist/alert/alert.svelte

@@ -83,6 +83,7 @@
 					var(--dry-alert-padding, var(--dry-space-6))
 			)
 		);
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		container-type: inline-size;
 		display: grid;

package/dist/avatar/avatar.svelte

@@ -121,7 +121,7 @@
 		font-size: var(--dry-avatar-font-size);
 		font-weight: 600;
 		line-height: 1;
-		border: 1px solid var(--dry-color-stroke-weak);
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
 		overflow: hidden;
 		user-select: none;
 	}

package/dist/button/button.svelte

@@ -177,6 +177,7 @@
 		text-decoration: none;
 		white-space: nowrap;
 		user-select: none;
+		transform-origin: center;
 		transition:
 			background var(--dry-duration-fast) var(--dry-ease-default),
 			border-color var(--dry-duration-fast) var(--dry-ease-default),
@@ -191,7 +192,7 @@
 		}
 
 		&:active:not([data-disabled]) {
-			transform: translateY(1px);
+			transform: scale(0.98);
 		}
 
 		&[data-disabled] {
@@ -499,7 +500,7 @@
 		--_dry-btn-padding-x: var(--dry-btn-padding-x, 0);
 		--_dry-btn-padding-y: var(--dry-btn-padding-y, 0);
 		aspect-ratio: 1;
-		height: var(--dry-space-8);
+		height: var(--dry-space-10);
 		--_dry-btn-radius: var(--dry-btn-radius, var(--dry-radius-sm));
 		--_dry-btn-font-size: var(
 			--dry-btn-font-size,

package/dist/button-group/context.svelte.js

@@ -1,11 +1,8 @@
-import { getContext, setContext, hasContext } from 'svelte';
-const KEY = Symbol('button-group');
+import { createContext } from '@dryui/primitives';
+const [_setButtonGroupCtx, _getButtonGroupCtx] = createContext('button-group');
 export function setButtonGroupCtx(ctx) {
-    setContext(KEY, ctx);
-    return ctx;
+    return _setButtonGroupCtx(ctx);
 }
 export function getButtonGroupCtx() {
-    if (!hasContext(KEY))
-        return undefined;
-    return getContext(KEY);
+    return _getButtonGroupCtx();
 }

package/dist/calendar/calendar-root.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { createDateViewController } from '../internal/date-family-controller.svelte.js';
 	import { setCalendarCtx } from './context.svelte.js';
-	import { getWeekStartDay, addMonths } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		value?: Date | null;
@@ -24,24 +24,23 @@
 		...rest
 	}: Props = $props();
 
-	const weekStartDay = $derived(getWeekStartDay(locale));
-
-	let viewMonth = $state(value ? value.getMonth() : new Date().getMonth());
-	let viewYear = $state(value ? value.getFullYear() : new Date().getFullYear());
-	let focusedDate = $state<Date>(value ?? new Date());
+	const view = createDateViewController({
+		initialDate: value,
+		locale: () => locale
+	});
 
 	setCalendarCtx({
 		get value() {
 			return value;
 		},
 		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;
@@ -56,7 +55,7 @@
 			return disabled;
 		},
 		get weekStartDay() {
-			return weekStartDay;
+			return view.weekStartDay;
 		},
 		get multiple() {
 			return false;
@@ -66,38 +65,22 @@
 		},
 		select(date: Date) {
 			value = date;
-			focusedDate = date;
-			viewMonth = date.getMonth();
-			viewYear = date.getFullYear();
+			view.setFocusedDate(date);
 		},
 		goToMonth(month: number) {
-			if (month < 0) {
-				viewMonth = 11;
-				viewYear = viewYear - 1;
-			} else if (month > 11) {
-				viewMonth = 0;
-				viewYear = viewYear + 1;
-			} else {
-				viewMonth = month;
-			}
+			view.goToMonth(month);
 		},
 		goToYear(year: number) {
-			viewYear = year;
+			view.goToYear(year);
 		},
 		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/card/card-root.svelte

@@ -69,6 +69,7 @@
 			0px,
 			calc(var(--dry-card-radius) - var(--dry-card-padding, var(--dry-space-8)))
 		);
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		container-type: inline-size;
 		display: grid;

package/dist/chart/chart-y-axis.svelte

@@ -45,6 +45,7 @@
 			font-size="11"
 			fill="currentColor"
 			opacity="0.6"
+			data-chart-tick-label
 		>
 			{Math.round(tick.value)}
 		</text>
@@ -63,4 +64,8 @@
 	[data-chart-axis] {
 		color: var(--dry-chart-axis-color);
 	}
+
+	[data-chart-tick-label] {
+		font-variant-numeric: tabular-nums;
+	}
 </style>

package/dist/checkbox/checkbox-input.svelte

@@ -133,8 +133,21 @@
 
 		&::after {
 			content: '';
-			display: none;
-			transition: transform var(--dry-duration-fast) var(--dry-ease-spring);
+			display: block;
+			height: 60%;
+			aspect-ratio: 35 / 60;
+			border: solid transparent;
+			border-width: 0 2px 2px 0;
+			margin-left: calc(var(--dry-checkbox-size) * 0.52);
+			margin-top: calc(var(--dry-checkbox-size) * -0.18);
+			transform-origin: center;
+			opacity: 0;
+			transform: rotate(45deg) scale(0.25);
+			filter: blur(4px);
+			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-state='checked'] {
@@ -143,16 +156,10 @@
 			box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
 
 			&::after {
-				display: block;
-				height: 60%;
-				aspect-ratio: 35 / 60;
-				border: solid var(--dry-checkbox-check-color);
-				border-width: 0 2px 2px 0;
-				margin-left: calc(var(--dry-checkbox-size) * 0.52);
-				margin-top: calc(var(--dry-checkbox-size) * -0.18);
+				border-color: var(--dry-checkbox-check-color);
+				opacity: 1;
 				transform: rotate(45deg) scale(1);
-				transform-origin: center;
-				animation: checkScale var(--dry-duration-fast) var(--dry-ease-spring);
+				filter: blur(0);
 			}
 		}
 
@@ -163,11 +170,15 @@
 			box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
 
 			&::after {
-				display: block;
 				height: 2px;
+				aspect-ratio: auto;
+				border: none;
 				background: var(--dry-checkbox-check-color);
+				margin-left: 0;
+				margin-top: 0;
+				opacity: 1;
 				transform: scale(1);
-				animation: dashScale var(--dry-duration-fast) var(--dry-ease-spring);
+				filter: blur(0);
 			}
 		}
 
@@ -226,28 +237,16 @@
 		--dry-checkbox-radius: var(--dry-radius-md);
 	}
 
-	@keyframes checkScale {
-		from {
-			transform: rotate(45deg) scale(0);
+	@media (prefers-reduced-motion: reduce) {
+		input::after {
+			transition: none;
+			filter: none;
 		}
-		to {
+		input[data-state='checked']::after {
 			transform: rotate(45deg) scale(1);
 		}
-	}
-
-	@keyframes dashScale {
-		from {
-			transform: scale(0);
-		}
-		to {
-			transform: scale(1);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		input[data-state='checked']::after,
 		input[data-state='indeterminate']::after {
-			animation: none;
+			transform: scale(1);
 		}
 	}
 </style>

package/dist/chip-group/context.svelte.d.ts

@@ -1,10 +1,8 @@
-interface ChipGroupContext {
+export interface ChipGroupContext {
     readonly type: 'single' | 'multiple';
     readonly disabled: boolean;
     readonly value: string[];
     toggle: (itemValue: string) => void;
     isSelected: (itemValue: string) => boolean;
 }
-export declare function setChipGroupCtx(ctx: ChipGroupContext): ChipGroupContext;
-export declare function getChipGroupCtx(): ChipGroupContext;
-export {};
+export declare const setChipGroupCtx: (ctx: ChipGroupContext) => ChipGroupContext, getChipGroupCtx: () => ChipGroupContext;

package/dist/chip-group/context.svelte.js

@@ -1,9 +1,2 @@
-import { getContext, setContext } from 'svelte';
-const CHIP_GROUP_KEY = Symbol('chip-group');
-export function setChipGroupCtx(ctx) {
-    setContext(CHIP_GROUP_KEY, ctx);
-    return ctx;
-}
-export function getChipGroupCtx() {
-    return getContext(CHIP_GROUP_KEY);
-}
+import { createContext } from '@dryui/primitives';
+export const [setChipGroupCtx, getChipGroupCtx] = createContext('chip-group');

package/dist/combobox/combobox-content.svelte

@@ -64,6 +64,7 @@
 	id={ctx.contentId}
 	aria-labelledby={ctx.inputId}
 	data-combobox-content
+	data-dry-stagger
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
 	{...rest}

package/dist/combobox/combobox-item.svelte

@@ -97,6 +97,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-combobox-item][data-has-icon] {

package/dist/command-palette/command-palette-item.svelte

@@ -71,6 +71,15 @@
 		cursor: pointer;
 		color: var(--dry-color-text-strong);
 		min-height: var(--dry-space-11);
+
+		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-command-palette-item]:hover:not([data-disabled]) {

package/dist/command-palette/command-palette-list.svelte

@@ -15,6 +15,7 @@
 <div
 	role="listbox"
 	data-command-palette-list
+	data-dry-stagger
 	id={ctx.listId}
 	aria-label="Commands"
 	class={className}

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

@@ -12,26 +12,36 @@
 
 	const ctx = getContextMenuCtx();
 
-	let el = $state<HTMLDivElement>();
+	let el = $state<HTMLDivElement | null>(null);
+
+	function attachContent(node: HTMLDivElement) {
+		el = node;
+
+		return () => {
+			if (el === node) {
+				el = null;
+			}
+		};
+	}
 
 	const menu = createMenuNavigation({
 		container: () => el ?? null,
 		orientation: 'vertical'
 	});
 
-	$effect(() => {
-		if (ctx.open && el) {
-			el.style.position = 'fixed';
-			el.style.left = `${ctx.position.x}px`;
-			el.style.top = `${ctx.position.y}px`;
-			if (!el.matches(':popover-open')) {
-				el.showPopover();
+	function syncPopover(node: HTMLDivElement) {
+		if (ctx.open) {
+			node.style.position = 'fixed';
+			node.style.left = `${ctx.position.x}px`;
+			node.style.top = `${ctx.position.y}px`;
+			if (!node.matches(':popover-open')) {
+				node.showPopover();
 				menu.focusFirst();
 			}
-		} else if (!ctx.open && el?.matches(':popover-open')) {
-			el.hidePopover();
+		} else if (node.matches(':popover-open')) {
+			node.hidePopover();
 		}
-	});
+	}
 
 	createDismiss({
 		enabled: () => ctx.open,
@@ -42,13 +52,15 @@
 </script>
 
 <div
-	bind:this={el}
+	{@attach attachContent}
+	{@attach syncPopover}
 	popover="manual"
 	role="menu"
 	tabindex="-1"
 	id={ctx.contentId}
 	aria-labelledby={ctx.triggerId}
 	data-context-menu-content
+	data-dry-stagger
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
 	{style}
@@ -69,6 +81,7 @@
 		--dry-menu-radius: var(--dry-radius-lg);
 		--dry-menu-shadow: var(--dry-shadow-lg);
 		--dry-menu-padding: var(--dry-space-1);
+		--dry-menu-item-padding: var(--dry-space-2_5) var(--dry-space-2);
 
 		display: grid;
 		grid-template-columns: minmax(12rem, max-content);

package/dist/context-menu/context-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/context-menu/context-menu-item.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getContextMenuCtx } 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 = getContextMenuCtx();
-
-	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-context-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-context-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-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);
-	}
-
-	[data-context-menu-item]:hover:not([data-disabled]),
-	[data-context-menu-item]:focus-visible {
-		background: var(--dry-color-fill);
-	}
-
-	[data-context-menu-item]:active:not([data-disabled]) {
-		background: var(--dry-color-fill-hover);
-	}
-
-	[data-context-menu-item][data-disabled] {
-		color: var(--dry-color-text-disabled);
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-</style>
+</MenuItem>

package/dist/context-menu/context-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-context-menu-label class={className} {...rest}>
+<MenuLabel data-context-menu-label {className} {...rest}>
 	{@render children()}
-</div>
-
-<style>
-	[data-context-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/context-menu/context-menu-root.svelte

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

package/dist/context-menu/context-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-context-menu-separator class={className} {...rest}></div>
-
-<style>
-	[data-context-menu-separator] {
-		height: 1px;
-		background: var(--dry-color-stroke-weak);
-		margin: var(--dry-space-1) 0;
-	}
-</style>
+<MenuSeparator data-context-menu-separator {className} {...rest}></MenuSeparator>

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

@@ -1,14 +1,4 @@
-export interface ContextMenuContext {
-    readonly open: boolean;
-    readonly triggerId: string;
-    readonly contentId: string;
-    triggerEl: HTMLElement | null;
-    position: {
-        x: number;
-        y: number;
-    };
-    show: () => void;
-    close: () => void;
-    toggle: () => void;
+import type { PositionedMenuRootState } from '../internal/menu-root-state.svelte.js';
+export interface ContextMenuContext extends PositionedMenuRootState {
 }
 export declare const setContextMenuCtx: (ctx: ContextMenuContext) => ContextMenuContext, getContextMenuCtx: () => ContextMenuContext;