@dryui/ui 3.0.0 → 4.0.0

package/dist/beam/beam.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { BlendMode } from '@dryui/primitives/beam';
-	import { observeOffscreenState } from '@dryui/primitives/internal/motion';
+	import { observeOffscreenState } from '@dryui/primitives';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 		color?: string;
@@ -30,23 +30,28 @@
 	const clampedIntensity = $derived(`${Math.max(0, Math.min(100, intensity))}`);
 	const speedValue = $derived(`${Math.max(0, speed)}s`);
 
-	function applyRootStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--dry-beam-color', color);
-			node.style.setProperty('--dry-beam-angle', `${angle}deg`);
-			node.style.setProperty('--dry-beam-speed', speedValue);
-			node.style.setProperty('--dry-beam-intensity', clampedIntensity);
-			node.style.setProperty('--dry-beam-width', `${width}px`);
-			if (blendMode) node.style.setProperty('--dry-beam-blend', blendMode);
-			else node.style.removeProperty('--dry-beam-blend');
-		});
+	let el = $state<HTMLDivElement>();
 
-		$effect(() => observeOffscreenState(node, { rootMargin: '200px' }));
-	}
+	$effect(() => {
+		if (!el) return;
+		const node = el;
+		node.style.cssText = style || '';
+		node.style.setProperty('--dry-beam-color', color);
+		node.style.setProperty('--dry-beam-angle', `${angle}deg`);
+		node.style.setProperty('--dry-beam-speed', speedValue);
+		node.style.setProperty('--dry-beam-intensity', clampedIntensity);
+		node.style.setProperty('--dry-beam-width', `${width}px`);
+		if (blendMode) node.style.setProperty('--dry-beam-blend', blendMode);
+		else node.style.removeProperty('--dry-beam-blend');
+	});
+
+	$effect(() => {
+		if (!el) return;
+		return observeOffscreenState(el, { rootMargin: '200px' });
+	});
 </script>
 
-<div data-beam class={className} {...rest} {@attach applyRootStyles}>
+<div bind:this={el} data-beam class={className} {...rest}>
 	<div data-beam-layer></div>
 	{#if children}
 		{@render children()}
@@ -55,12 +60,6 @@
 
 <style>
 	[data-beam] {
-		--dry-beam-color: var(--dry-color-fill-brand);
-		--dry-beam-angle: 45deg;
-		--dry-beam-speed: 3s;
-		--dry-beam-intensity: 70;
-		--dry-beam-width: 2px;
-
 		position: relative;
 		overflow: hidden;
 		border-radius: inherit;

package/dist/button/button.svelte

@@ -11,6 +11,20 @@
 	// are left as HTMLButtonAttributes' own (boolean | null | undefined, etc.) so consumers
 	// spreading `...rest: HTMLButtonAttributes` into Button type-check.
 	interface Props extends Omit<HTMLButtonAttributes, 'color'> {
+		/**
+		 * Button treatment.
+		 * - `solid` | `outline` | `ghost` | `soft` | `secondary` | `link` | `bare`:
+		 *   normal text-button surfaces ordered roughly from dominant to subtle.
+		 *   Override layout via consumer CSS or the `--dry-btn-justify` token
+		 *   (e.g. `--dry-btn-justify: flex-start` for full-width sidebar rows).
+		 * - `trigger`: pairs with disclosure menus, picks up `aria-expanded`.
+		 * - `tab` / `toggle`: expose `aria-selected` / `aria-pressed` states.
+		 * - `pill`: rounded outline-on-hover chip.
+		 * - `nav`: icon-only circular nav-rail button (aspect-ratio 1, fully
+		 *   rounded). Used for carousel arrows, scroll-to-top, and vertical
+		 *   icon rails. NOT a full-width sidebar nav row: reach for `ghost` or
+		 *   `pill` for those. Pair `nav` with `size='icon'`.
+		 */
 		variant?:
 			| 'solid'
 			| 'outline'
@@ -92,7 +106,12 @@
 		node.toggleAttribute('data-icon-end', lastChild?.hasAttribute('data-dry-icon') === true);
 	}
 
-	function attachButton(node: HTMLButtonElement | HTMLAnchorElement) {
+	let buttonEl = $state<HTMLButtonElement | HTMLAnchorElement>();
+
+	$effect(() => {
+		const node = buttonEl;
+		if (!node) return;
+
 		ref?.(node);
 		syncIconEdgeAttrs(node);
 
@@ -108,12 +127,13 @@
 			observer.disconnect();
 			ref?.(null);
 		};
-	}
+	});
 </script>
 
 {#snippet element()}
 	{#if href !== undefined}
 		<a
+			bind:this={buttonEl}
 			{...rest as AnchorRest}
 			href={disabled ? undefined : href}
 			{rel}
@@ -129,12 +149,12 @@
 			{...variantAttrs({ variant, size, color })}
 			class={className}
 			onclick={handleLinkClick}
-			{@attach attachButton}
 		>
 			{@render children()}
 		</a>
 	{:else}
 		<button
+			bind:this={buttonEl}
 			{type}
 			{disabled}
 			data-disabled={disabled || undefined}
@@ -146,7 +166,6 @@
 			class={className}
 			{onclick}
 			{...rest}
-			{@attach attachButton}
 		>
 			{@render children()}
 		</button>
@@ -166,7 +185,14 @@
 		display: inline-grid;
 	}
 
-	[data-dry-button] {
+	/* Base rule wrapped in `:where()` so consumer-authored classes (e.g. a
+	   sidebar `.nav-action { justify-content: flex-start }`) can override the
+	   structural defaults without resorting to !important. The variant rules
+	   below stay at their natural specificity so they continue to win against
+	   bare consumer classes — that's intentional, since variants are the
+	   library's contract. Override variant-specific paint via the public
+	   `--dry-btn-*` tokens on the consumer class. */
+	:where([data-dry-button]) {
 		/* Resolve public button tokens without stomping inherited overrides. */
 		--_dry-btn-accent: var(--dry-btn-accent, var(--dry-color-fill-brand));
 		--_dry-btn-accent-fg: var(--dry-btn-accent-fg, var(--dry-color-text-brand));
@@ -198,10 +224,6 @@
 			--dry-btn-soft-active-bg,
 			color-mix(in srgb, var(--_dry-btn-accent) 28%, transparent)
 		);
-		--_dry-btn-ghost-underline: var(
-			--dry-btn-ghost-underline,
-			color-mix(in srgb, var(--_dry-btn-accent) 65%, transparent)
-		);
 
 		display: inline-grid;
 		grid-auto-flow: column;
@@ -307,20 +329,14 @@
 		--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-accent-fg));
 		--_dry-btn-border: var(--dry-btn-border, transparent);
 
-		text-decoration: underline;
-		text-decoration-color: color-mix(in srgb, var(--_dry-btn-accent-stroke) 70%, transparent);
-		text-underline-offset: 2px;
-
 		&:hover:not([data-disabled]) {
 			--_dry-btn-bg: var(--dry-btn-bg, var(--_dry-btn-accent-weak));
 			--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-accent-fg));
-			text-decoration-color: color-mix(in srgb, var(--_dry-btn-accent-stroke) 70%, transparent);
 		}
 
 		&:active:not([data-disabled]) {
 			--_dry-btn-bg: var(--dry-btn-bg, var(--_dry-btn-accent));
 			--_dry-btn-color: var(--dry-btn-color, var(--_dry-btn-on-accent));
-			text-decoration-color: transparent;
 		}
 	}
 
@@ -419,6 +435,11 @@
 		}
 	}
 
+	/* `nav` is the icon-only nav-rail variant: circular, aspect-ratio 1, used
+	   for vertical icon-only navigation rails (carousel arrows, scroll-to-top,
+	   sidebar icon rails). It is NOT a full-width sidebar nav row. For
+	   full-width sidebar/menu rows reach for `ghost` or `pill` instead.
+	   Pair `nav` with `size='icon'` so the height matches a square hit-box. */
 	[data-dry-button][data-variant='nav'] {
 		--_dry-btn-bg: var(--dry-btn-bg, var(--dry-color-bg-raised));
 		--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-strong));
@@ -613,14 +634,14 @@
 
 	/* Horizontal: first child gets left radii */
 	.wrapper[data-in-group][data-group-orientation='horizontal']:first-child [data-dry-button] {
-		border-top-left-radius: var(--dry-button-group-radius);
-		border-bottom-left-radius: var(--dry-button-group-radius);
+		border-top-left-radius: var(--dry-button-group-radius, var(--_button-group-radius-default));
+		border-bottom-left-radius: var(--dry-button-group-radius, var(--_button-group-radius-default));
 	}
 
 	/* Horizontal: last child gets right radii */
 	.wrapper[data-in-group][data-group-orientation='horizontal']:last-child [data-dry-button] {
-		border-top-right-radius: var(--dry-button-group-radius);
-		border-bottom-right-radius: var(--dry-button-group-radius);
+		border-top-right-radius: var(--dry-button-group-radius, var(--_button-group-radius-default));
+		border-bottom-right-radius: var(--dry-button-group-radius, var(--_button-group-radius-default));
 	}
 
 	/* Horizontal: non-first child removes inline-start border */
@@ -630,14 +651,14 @@
 
 	/* Vertical: first child gets top radii */
 	.wrapper[data-in-group][data-group-orientation='vertical']:first-child [data-dry-button] {
-		border-top-left-radius: var(--dry-button-group-radius);
-		border-top-right-radius: var(--dry-button-group-radius);
+		border-top-left-radius: var(--dry-button-group-radius, var(--_button-group-radius-default));
+		border-top-right-radius: var(--dry-button-group-radius, var(--_button-group-radius-default));
 	}
 
 	/* Vertical: last child gets bottom radii */
 	.wrapper[data-in-group][data-group-orientation='vertical']:last-child [data-dry-button] {
-		border-bottom-left-radius: var(--dry-button-group-radius);
-		border-bottom-right-radius: var(--dry-button-group-radius);
+		border-bottom-left-radius: var(--dry-button-group-radius, var(--_button-group-radius-default));
+		border-bottom-right-radius: var(--dry-button-group-radius, var(--_button-group-radius-default));
 	}
 
 	/* Vertical: non-first child removes block-start border */
@@ -648,7 +669,7 @@
 	/* Hover/focus z-index for grouped buttons */
 	.wrapper[data-in-group]:hover [data-dry-button],
 	.wrapper[data-in-group]:focus-within [data-dry-button] {
-		z-index: var(--dry-button-group-hover-z-index);
+		z-index: var(--dry-button-group-hover-z-index, 1);
 		position: relative;
 	}
 </style>

package/dist/button/button.svelte.d.ts

@@ -1,6 +1,20 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLButtonAttributes, 'color'> {
+    /**
+     * Button treatment.
+     * - `solid` | `outline` | `ghost` | `soft` | `secondary` | `link` | `bare`:
+     *   normal text-button surfaces ordered roughly from dominant to subtle.
+     *   Override layout via consumer CSS or the `--dry-btn-justify` token
+     *   (e.g. `--dry-btn-justify: flex-start` for full-width sidebar rows).
+     * - `trigger`: pairs with disclosure menus, picks up `aria-expanded`.
+     * - `tab` / `toggle`: expose `aria-selected` / `aria-pressed` states.
+     * - `pill`: rounded outline-on-hover chip.
+     * - `nav`: icon-only circular nav-rail button (aspect-ratio 1, fully
+     *   rounded). Used for carousel arrows, scroll-to-top, and vertical
+     *   icon rails. NOT a full-width sidebar nav row: reach for `ghost` or
+     *   `pill` for those. Pair `nav` with `size='icon'`.
+     */
     variant?: 'solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link' | 'bare' | 'trigger' | 'nav' | 'tab' | 'toggle' | 'pill';
     size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
     color?: 'primary' | 'danger' | 'ink' | (string & {}) | null;

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

@@ -37,8 +37,7 @@
 
 <style>
 	[data-button-group] {
-		--dry-button-group-radius: var(--dry-radius-md);
-		--dry-button-group-hover-z-index: 1;
+		--_button-group-radius-default: var(--dry-radius-md);
 
 		display: inline-grid;
 		gap: var(--dry-button-group-gap, 0px);
@@ -49,14 +48,14 @@
 	}
 
 	[data-button-group][data-size='sm'] {
-		--dry-button-group-radius: var(--dry-radius-sm);
+		--_button-group-radius-default: var(--dry-radius-sm);
 	}
 
 	[data-button-group][data-size='md'] {
-		--dry-button-group-radius: var(--dry-radius-md);
+		--_button-group-radius-default: var(--dry-radius-md);
 	}
 
 	[data-button-group][data-size='lg'] {
-		--dry-button-group-radius: var(--dry-radius-lg);
+		--_button-group-radius-default: var(--dry-radius-lg);
 	}
 </style>

package/dist/calendar/calendar-button-grid.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { isSameDay } from '@dryui/primitives';
 	import { getCalendarCtx } from './context.svelte.js';
 	import CalendarGridButton, {
 		type CalendarGridAdapter
 	} from '../internal/calendar-grid-button.svelte';
+	import type { CalendarEventGridProps } from '../internal/calendar-event-layout.js';
+	import { normalizeVisibleMonths } from '../internal/calendar-grid-utils.js';
 
-	interface Props extends HTMLAttributes<HTMLDivElement> {}
+	interface Props extends CalendarEventGridProps {}
 
-	let props: Props = $props();
+	let { events: eventsProp, ...rest }: Props = $props();
 
 	const ctx = getCalendarCtx();
+	const visibleMonthCount = $derived(normalizeVisibleMonths(rest.visibleMonths));
+	const events = $derived(eventsProp ?? ctx.events);
+
+	$effect.pre(() => {
+		ctx.monthView.visibleMonths = visibleMonthCount;
+	});
 
 	const adapter: CalendarGridAdapter = {
 		get viewYear() {
@@ -48,4 +55,4 @@
 	};
 </script>
 
-<CalendarGridButton {adapter} hideHeader {...props} />
+<CalendarGridButton {adapter} hideHeader {...rest} {events} />

package/dist/calendar/calendar-button-grid.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+import type { CalendarEventGridProps } from '../internal/calendar-event-layout.js';
+interface Props extends CalendarEventGridProps {
 }
 declare const CalendarButtonGrid: import("svelte").Component<Props, {}, "">;
 type CalendarButtonGrid = ReturnType<typeof CalendarButtonGrid>;

package/dist/calendar/calendar-event-legend.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getCalendarCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+	let { class: className, ...rest }: Props = $props();
+
+	const ctx = getCalendarCtx();
+	let legendDotNodes = $state<Record<string, HTMLElement | undefined>>({});
+
+	$effect(() => {
+		for (const category of ctx.categories) {
+			legendDotNodes[category.id]?.style.setProperty('--dry-calendar-legend-color', category.color);
+		}
+	});
+</script>
+
+{#if ctx.categories.length > 0}
+	<div data-calendar-event-legend class={className} role="list" {...rest}>
+		{#each ctx.categories as category (category.id)}
+			<div role="listitem" data-calendar-event-legend-item>
+				<span
+					data-calendar-event-legend-dot
+					aria-hidden="true"
+					bind:this={legendDotNodes[category.id]}
+				></span>
+				<span data-calendar-event-legend-label>{category.label}</span>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	[data-calendar-event-legend] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		gap: var(--dry-space-4);
+		align-items: center;
+		padding: var(--dry-space-2) 0;
+	}
+
+	[data-calendar-event-legend-item] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		align-items: center;
+		gap: var(--dry-space-2);
+		font-size: var(--dry-text-sm-size);
+		color: var(--dry-color-text-weak);
+	}
+
+	[data-calendar-event-legend-dot] {
+		aspect-ratio: 1;
+		height: 0.5rem;
+		border-radius: 999px;
+		background: var(--dry-calendar-legend-color, var(--dry-color-fill-brand));
+	}
+
+	[data-calendar-event-legend-label] {
+		color: var(--dry-color-text-strong);
+	}
+</style>

package/dist/calendar/calendar-event-legend.svelte.d.ts

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

package/dist/calendar/calendar-header.svelte

@@ -18,8 +18,10 @@
 <style>
 	[data-calendar-header] {
 		display: grid;
-		grid-template-columns: auto 1fr auto;
+		grid-template-columns: auto max-content auto;
 		align-items: center;
+		align-content: center;
+		justify-content: center;
 		gap: var(--dry-space-2);
 		margin-bottom: var(--dry-space-2);
 	}

package/dist/calendar/calendar-heading.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { getCalendarCtx } from './context.svelte.js';
 	import { formatDate } from '@dryui/primitives';
+	import { getCalendarCtx } from './context.svelte.js';
+	import { formatVisibleMonthRangeLabel } from '../internal/calendar-grid-utils.js';
+	import { getWeekDays } from './week-utils.js';
 
 	interface Props extends HTMLAttributes<HTMLSpanElement> {}
 
@@ -9,22 +11,32 @@
 
 	const ctx = getCalendarCtx();
 
-	const monthYearLabel = $derived(
-		formatDate(new Date(ctx.viewYear, ctx.viewMonth, 1), ctx.locale, {
-			month: 'long',
-			year: 'numeric'
-		})
-	);
+	const label = $derived.by(() => {
+		if (ctx.view === 'week') {
+			const days = getWeekDays(ctx.focusedDate, ctx.weekStartDay);
+			const start = days[0]!;
+			const end = days[6]!;
+			const sameMonth = start.getMonth() === end.getMonth();
+			const monthStr = formatDate(start, ctx.locale, { month: 'long' });
+			if (sameMonth) {
+				return `${monthStr} ${start.getDate()}–${end.getDate()}`;
+			}
+			const endMonthStr = formatDate(end, ctx.locale, { month: 'short' });
+			return `${monthStr} ${start.getDate()} - ${endMonthStr} ${end.getDate()}`;
+		}
+		return formatVisibleMonthRangeLabel(ctx.viewYear, ctx.viewMonth, ctx.locale, ctx.visibleMonths);
+	});
 </script>
 
 <span data-calendar-heading aria-live="polite" aria-atomic="true" class={className} {...rest}>
-	{monthYearLabel}
+	{label}
 </span>
 
 <style>
 	[data-calendar-heading] {
 		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
 		font-weight: 600;
-		letter-spacing: -0.01em;
+		letter-spacing: 0;
+		text-align: center;
 	}
 </style>

package/dist/calendar/calendar-nav-button.svelte

@@ -12,15 +12,28 @@
 	let { direction, children, ...rest }: Props = $props();
 
 	const ctx = getCalendarCtx();
+
+	const label = $derived.by(() => {
+		const verb = direction === 'prev' ? 'Previous' : 'Next';
+		return `${verb} ${ctx.view === 'week' ? 'week' : 'month'}`;
+	});
+
+	function handleClick() {
+		if (ctx.view === 'week') {
+			direction === 'prev' ? ctx.prevWeek() : ctx.nextWeek();
+		} else {
+			direction === 'prev' ? ctx.prevMonth() : ctx.nextMonth();
+		}
+	}
 </script>
 
 <NavArrowButton
 	{direction}
 	variant="trigger"
 	size="icon-sm"
-	label={direction === 'prev' ? 'Previous month' : 'Next month'}
+	{label}
 	disabled={ctx.disabled}
-	onclick={() => (direction === 'prev' ? ctx.prevMonth() : ctx.nextMonth())}
+	onclick={handleClick}
 	{children}
 	{...rest}
 />