@dryui/ui 1.2.0 → 1.3.0

package/dist/index.js

@@ -150,5 +150,5 @@ export { ShaderCanvas, PRESETS as SHADER_PRESETS } from './shader-canvas/index.j
 export { Svg } from './svg/index.js';
 export { StarRating } from './star-rating/index.js';
 export { Tag } from './tag/index.js';
-export { useThemeOverride } from './themes/use-theme-override.svelte.js';
+export { TokenScope } from './themes/token-scope.js';
 export { Diagram } from './diagram/index.js';

package/dist/input/input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { getFormControlCtx } from '@dryui/primitives';
+	import { getFormControlCtx, variantAttrs } from '@dryui/primitives';
 
 	interface Props extends Omit<HTMLInputAttributes, 'size'> {
 		value?: string;
@@ -34,8 +34,7 @@
 		aria-invalid={ctx?.hasError || undefined}
 		aria-errormessage={ctx?.errorMessageId}
 		data-disabled={isDisabled || undefined}
-		data-size={size}
-		data-variant={variant !== 'default' ? variant : undefined}
+		{...variantAttrs({ size, variant: variant !== 'default' ? variant : undefined })}
 		class={className}
 		{...rest}
 	/>
@@ -45,6 +44,7 @@
 	.wrapper {
 		container-type: inline-size;
 		display: grid;
+		grid-template-columns: minmax(0, 1fr);
 	}
 
 	input {

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

@@ -41,9 +41,10 @@
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		adapter: CalendarGridAdapter;
+		hideHeader?: boolean;
 	}
 
-	let { adapter, class: className, ...rest }: Props = $props();
+	let { adapter, hideHeader = false, class: className, ...rest }: Props = $props();
 
 	let containerEl = $state<HTMLDivElement>();
 
@@ -90,31 +91,33 @@
 
 <div {@attach bindContainer} class={className} {...rest} data-calendar-grid>
 	<div role="group" aria-label={monthYearLabel} data-calendar-panel>
-		<div data-calendar-header>
-			<Button
-				variant="trigger"
-				size="icon-sm"
-				type="button"
-				aria-label="Previous month"
-				disabled={adapter.disabled}
-				onclick={() => adapter.prevMonth()}
-			>
-				&#8249;
-			</Button>
-			<span aria-live="polite" aria-atomic="true" data-calendar-heading>
-				{monthYearLabel}
-			</span>
-			<Button
-				variant="trigger"
-				size="icon-sm"
-				type="button"
-				aria-label="Next month"
-				disabled={adapter.disabled}
-				onclick={() => adapter.nextMonth()}
-			>
-				&#8250;
-			</Button>
-		</div>
+		{#if !hideHeader}
+			<div data-calendar-header>
+				<Button
+					variant="trigger"
+					size="icon-sm"
+					type="button"
+					aria-label="Previous month"
+					disabled={adapter.disabled}
+					onclick={() => adapter.prevMonth()}
+				>
+					&#8249;
+				</Button>
+				<span aria-live="polite" aria-atomic="true" data-calendar-heading>
+					{monthYearLabel}
+				</span>
+				<Button
+					variant="trigger"
+					size="icon-sm"
+					type="button"
+					aria-label="Next month"
+					disabled={adapter.disabled}
+					onclick={() => adapter.nextMonth()}
+				>
+					&#8250;
+				</Button>
+			</div>
+		{/if}
 
 		<div role="grid" aria-label={monthYearLabel}>
 			<div role="row" data-calendar-row>

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

@@ -21,6 +21,7 @@ export interface CalendarGridAdapter {
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     adapter: CalendarGridAdapter;
+    hideHeader?: boolean;
 }
 declare const CalendarGridButton: import("svelte").Component<Props, {}, "">;
 type CalendarGridButton = ReturnType<typeof CalendarGridButton>;

package/dist/internal/close-button-base.svelte

@@ -7,13 +7,26 @@
 	interface Props extends HTMLButtonAttributes {
 		variant?: ButtonVariant;
 		size?: ButtonSize;
+		label?: string;
 		children?: Snippet;
 	}
 
-	let { variant = 'trigger', size = 'icon-sm', children, ...rest }: Props = $props();
+	let {
+		variant = 'trigger',
+		size = 'icon-sm',
+		label = 'Dismiss',
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
-<Button {variant} {size} type="button" {...rest}>
+<Button
+	{variant}
+	{size}
+	type="button"
+	aria-label={children !== undefined ? undefined : label}
+	{...rest}
+>
 	{#if children}
 		{@render children()}
 	{:else}

package/dist/internal/close-button-base.svelte.d.ts

@@ -4,6 +4,7 @@ import type { ButtonVariant, ButtonSize } from '../button/index.js';
 interface Props extends HTMLButtonAttributes {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    label?: string;
     children?: Snippet;
 }
 declare const CloseButtonBase: import("svelte").Component<Props, {}, "">;

package/dist/internal/modal-content.svelte

@@ -0,0 +1,331 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLDialogAttributes } from 'svelte/elements';
+
+	type ModalSide = 'center' | 'top' | 'right' | 'bottom' | 'left';
+	type ModalVariant = 'dialog' | 'drawer' | 'alert-dialog';
+
+	interface Props extends HTMLDialogAttributes {
+		ctx: { readonly open: boolean; readonly headerId: string; close: () => void };
+		/** Presentational variant; drives the scoped style block. */
+		variant: ModalVariant;
+		/**
+		 * Positioning hint. `center` stacks the panel in the middle;
+		 * `top`/`right`/`bottom`/`left` pin it to an edge (drawer-style).
+		 */
+		side?: ModalSide;
+		/** When false, clicking the dialog backdrop does not dismiss. */
+		dismissOnBackdropClick?: boolean;
+		/** When false, pressing Escape does not dismiss. */
+		dismissOnEscape?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		ctx,
+		variant,
+		side = 'center',
+		dismissOnBackdropClick = true,
+		dismissOnEscape = true,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let dialogEl = $state<HTMLDialogElement>();
+
+	$effect(() => {
+		if (!dialogEl) return;
+
+		if (side !== 'center') {
+			// Native <dialog> applies a max-width that leaves a strip beside edge drawers.
+			dialogEl.style.setProperty('max-width', 'none');
+		}
+
+		if (ctx.open && !dialogEl.open) {
+			dialogEl.showModal();
+		}
+		if (!ctx.open && dialogEl.open) {
+			dialogEl.close();
+		}
+	});
+</script>
+
+<dialog
+	bind:this={dialogEl}
+	data-modal-content
+	data-variant={variant}
+	data-side={side}
+	data-dialog-content={variant === 'dialog' ? '' : undefined}
+	data-drawer-content={variant === 'drawer' ? '' : undefined}
+	data-alert-dialog-content={variant === 'alert-dialog' ? '' : undefined}
+	aria-labelledby={ctx.headerId || undefined}
+	data-state={ctx.open ? 'open' : 'closed'}
+	onclose={() => ctx.close()}
+	oncancel={dismissOnEscape ? undefined : (e) => e.preventDefault()}
+	onclick={dismissOnBackdropClick
+		? (e) => {
+				if (e.target === dialogEl) {
+					ctx.close();
+				}
+			}
+		: undefined}
+	class={className}
+	{...rest}
+>
+	<div
+		data-modal-panel
+		data-variant={variant}
+		data-side={side}
+		data-dialog-panel={variant === 'dialog' ? '' : undefined}
+		data-drawer-panel={variant === 'drawer' ? '' : undefined}
+		data-alert-dialog-panel={variant === 'alert-dialog' ? '' : undefined}
+	>
+		{@render children()}
+	</div>
+</dialog>
+
+<style>
+	[data-modal-content] {
+		position: fixed;
+		inset: 0;
+		height: 100vh;
+		height: 100dvh;
+		max-height: none;
+		border: none;
+		background: transparent;
+		color: var(--dry-color-text-strong);
+		padding: 0;
+	}
+
+	[data-modal-content][data-variant]:not([open]) {
+		display: none;
+	}
+
+	/* ---------- Dialog (center) ---------- */
+
+	[data-modal-content][data-variant='dialog'] {
+		/* dryui-allow width */
+		width: 100vw;
+		/* dryui-allow width */
+		max-width: none;
+		display: grid;
+		grid-template-columns: min(90vw, var(--dry-dialog-max-width, 32rem));
+		place-content: center;
+		place-items: center;
+		overflow: visible;
+	}
+
+	[data-modal-content][data-variant='dialog']::backdrop {
+		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop));
+		backdrop-filter: blur(var(--dry-overlay-blur, 12px));
+		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 12px));
+	}
+
+	[data-modal-panel][data-variant='dialog'] {
+		--dry-dialog-border: var(--dry-overlay-border, var(--dry-color-stroke-weak));
+		--dry-dialog-padding: var(--dry-space-8);
+		--dry-radius-nested: max(
+			0px,
+			calc(
+				var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-2xl))) -
+					var(--dry-dialog-padding)
+			)
+		);
+
+		container-type: inline-size;
+		justify-self: stretch;
+		border: 1px solid var(--dry-dialog-border);
+		border-radius: var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-2xl)));
+		background: var(--dry-dialog-bg, var(--dry-overlay-bg, var(--dry-color-bg-overlay)));
+		color: var(--dry-color-text-strong);
+		box-shadow: var(--dry-dialog-shadow, var(--dry-overlay-shadow, var(--dry-shadow-overlay)));
+		padding: 0;
+		max-block-size: var(--dry-dialog-max-block-size, 85vh);
+		display: grid;
+		overflow: var(--dry-dialog-overflow, auto);
+
+		transition:
+			opacity var(--dry-duration-normal) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
+	}
+
+	[data-modal-content][data-variant='dialog'][data-state='open'] [data-modal-panel] {
+		opacity: 1;
+		transform: scale(1) translateY(0);
+	}
+
+	@starting-style {
+		[data-modal-content][data-variant='dialog'][open] [data-modal-panel] {
+			opacity: 0;
+			transform: scale(var(--dry-motion-scale-enter)) translateY(var(--dry-motion-distance-sm));
+		}
+	}
+
+	/* ---------- AlertDialog (center) ---------- */
+
+	[data-modal-content][data-variant='alert-dialog'] {
+		/* dryui-allow width */
+		width: 100vw;
+		/* dryui-allow width */
+		max-width: none;
+		display: grid;
+		grid-template-columns: min(90vw, var(--dry-dialog-max-width, 32rem));
+		place-content: center;
+		place-items: center;
+		overflow: visible;
+	}
+
+	[data-modal-content][data-variant='alert-dialog']::backdrop {
+		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop-strong));
+		backdrop-filter: blur(var(--dry-overlay-blur, 4px));
+		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 4px));
+	}
+
+	[data-modal-panel][data-variant='alert-dialog'] {
+		--dry-dialog-bg: var(--dry-color-bg-overlay);
+		--dry-dialog-border: var(--dry-color-stroke-weak);
+		--dry-dialog-radius: var(--dry-radius-xl);
+		--dry-dialog-shadow: var(--dry-shadow-overlay);
+		--dry-dialog-padding: var(--dry-space-6);
+		--dry-dialog-max-width: 32rem;
+
+		container-type: inline-size;
+		justify-self: stretch;
+		border: 1px solid var(--dry-dialog-border);
+		border-radius: var(--dry-dialog-radius);
+		background: var(--dry-dialog-bg);
+		color: var(--dry-color-text-strong);
+		box-shadow: var(--dry-dialog-shadow);
+		padding: 0;
+		max-block-size: 85vh;
+		display: grid;
+		grid-template-rows: max-content minmax(0, 1fr) max-content;
+		overflow: hidden;
+
+		transition:
+			opacity var(--dry-duration-normal) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
+	}
+
+	[data-modal-content][data-variant='alert-dialog'][data-state='open'] [data-modal-panel] {
+		opacity: 1;
+		transform: scale(1) translateY(0);
+	}
+
+	@starting-style {
+		[data-modal-content][data-variant='alert-dialog'][open] [data-modal-panel] {
+			opacity: 0;
+			transform: scale(var(--dry-motion-scale-enter)) translateY(var(--dry-motion-distance-sm));
+		}
+	}
+
+	/* ---------- Drawer (edge-pinned) ---------- */
+
+	[data-modal-content][data-variant='drawer'] {
+		margin: 0;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-rows: minmax(0, 1fr);
+	}
+
+	[data-modal-content][data-variant='drawer']::backdrop {
+		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop-strong));
+		backdrop-filter: blur(var(--dry-overlay-blur, 8px));
+		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 8px));
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='right'] {
+		grid-template-columns:
+			minmax(0, calc(100dvw - var(--dry-drawer-size, 25rem)))
+			var(--dry-drawer-size, 25rem);
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='left'] {
+		grid-template-columns:
+			var(--dry-drawer-size, 25rem)
+			minmax(0, calc(100dvw - var(--dry-drawer-size, 25rem)));
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='top'] {
+		grid-template-rows:
+			var(--dry-drawer-size, 25rem)
+			minmax(0, calc(100dvh - var(--dry-drawer-size, 25rem)));
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='bottom'] {
+		grid-template-rows:
+			minmax(0, calc(100dvh - var(--dry-drawer-size, 25rem)))
+			var(--dry-drawer-size, 25rem);
+	}
+
+	[data-modal-panel][data-variant='drawer'] {
+		--dry-drawer-bg: var(--dry-color-bg-overlay);
+		--dry-drawer-border: var(--dry-color-stroke-weak);
+		--dry-drawer-size: 25rem;
+		--_drawer-rest-transform: translateX(0);
+		--_drawer-enter-transform: translateX(100%);
+
+		background: var(--dry-drawer-bg);
+		color: var(--dry-color-text-strong);
+		box-shadow: var(--dry-drawer-shadow, var(--dry-shadow-overlay));
+		padding: 0;
+		display: grid;
+		grid-template-rows: max-content minmax(0, 1fr) max-content;
+		overflow: hidden;
+		opacity: 1;
+		transform: var(--_drawer-rest-transform);
+		will-change: transform, opacity;
+
+		transition:
+			transform var(--dry-duration-slow) var(--dry-ease-spring-snappy),
+			opacity var(--dry-duration-normal) var(--dry-ease-out);
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='right'] [data-modal-panel] {
+		grid-column: 2;
+		height: 100%;
+		border-left: 1px solid var(--dry-drawer-border);
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='left'] [data-modal-panel] {
+		--_drawer-enter-transform: translateX(-100%);
+		grid-column: 1;
+		height: 100%;
+		border-right: 1px solid var(--dry-drawer-border);
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='top'] [data-modal-panel] {
+		--_drawer-rest-transform: translateY(0);
+		--_drawer-enter-transform: translateY(-100%);
+		grid-row: 1;
+		height: var(--dry-drawer-size);
+		border-bottom: 1px solid var(--dry-drawer-border);
+	}
+
+	[data-modal-content][data-variant='drawer'][data-side='bottom'] [data-modal-panel] {
+		--_drawer-rest-transform: translateY(0);
+		--_drawer-enter-transform: translateY(100%);
+		grid-row: 2;
+		height: var(--dry-drawer-size);
+		border-top: 1px solid var(--dry-drawer-border);
+	}
+
+	@starting-style {
+		[data-modal-content][data-variant='drawer'][open] [data-modal-panel] {
+			opacity: 0;
+			transform: var(--_drawer-enter-transform);
+		}
+	}
+
+	[data-modal-content][data-variant='drawer'][data-state='open'] [data-modal-panel] {
+		opacity: 1;
+		transform: var(--_drawer-rest-transform);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-modal-panel] {
+			transition: none;
+		}
+	}
+</style>

package/dist/internal/modal-content.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+type ModalSide = 'center' | 'top' | 'right' | 'bottom' | 'left';
+type ModalVariant = 'dialog' | 'drawer' | 'alert-dialog';
+interface Props extends HTMLDialogAttributes {
+    ctx: {
+        readonly open: boolean;
+        readonly headerId: string;
+        close: () => void;
+    };
+    /** Presentational variant; drives the scoped style block. */
+    variant: ModalVariant;
+    /**
+     * Positioning hint. `center` stacks the panel in the middle;
+     * `top`/`right`/`bottom`/`left` pin it to an edge (drawer-style).
+     */
+    side?: ModalSide;
+    /** When false, clicking the dialog backdrop does not dismiss. */
+    dismissOnBackdropClick?: boolean;
+    /** When false, pressing Escape does not dismiss. */
+    dismissOnEscape?: boolean;
+    children: Snippet;
+}
+declare const ModalContent: import("svelte").Component<Props, {}, "">;
+type ModalContent = ReturnType<typeof ModalContent>;
+export default ModalContent;

package/dist/link-preview/link-preview-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createPositionedPopover } from '@dryui/primitives';
+	import { createAnchoredPopover } from '@dryui/primitives';
 	import type { Placement } from '@dryui/primitives';
 	import { getLinkPreviewCtx } from './context.svelte.js';
 
@@ -24,21 +24,13 @@
 
 	let contentEl = $state<HTMLDivElement>();
 
-	const popover = createPositionedPopover({
+	const popover = createAnchoredPopover({
 		triggerEl: () => ctx.triggerEl,
 		contentEl: () => contentEl ?? null,
+		open: () => ctx.open,
 		placement: () => placement,
 		offset: () => offset
 	});
-
-	$effect(() => {
-		if (!contentEl) return;
-		if (ctx.open) {
-			popover.showPopover(contentEl);
-		} else {
-			popover.hidePopover(contentEl);
-		}
-	});
 </script>
 
 <div

package/dist/logo-mark/logo-mark.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		src?: string;
@@ -42,9 +43,7 @@
 	role="img"
 	aria-label={alt}
 	data-logo-mark
-	data-size={size}
-	data-shape={shape}
-	data-color={color}
+	{...variantAttrs({ size, shape, color })}
 	class={className}
 	{...rest}
 >

package/dist/mask-reveal/mask-reveal.svelte

@@ -96,23 +96,26 @@
 	});
 </script>
 
-<div
-	{@attach captureElement}
-	{@attach applyDuration}
-	class={className}
-	data-mask-reveal
-	data-shape={shape}
-	data-direction={direction}
-	data-revealed={revealed || undefined}
-	data-reduced-motion={prefersReducedMotion || undefined}
-	{...rest}
->
-	{#if childSnippet}
-		{@render childSnippet()}
-	{/if}
+<div {@attach captureElement} class={className} data-mask-reveal-root {...rest}>
+	<div
+		{@attach applyDuration}
+		data-mask-reveal
+		data-shape={shape}
+		data-direction={direction}
+		data-revealed={revealed || undefined}
+		data-reduced-motion={prefersReducedMotion || undefined}
+	>
+		{#if childSnippet}
+			{@render childSnippet()}
+		{/if}
+	</div>
 </div>
 
 <style>
+	[data-mask-reveal-root] {
+		display: block;
+	}
+
 	[data-mask-reveal] {
 		--dry-mask-reveal-duration: var(--dry-duration-entrance, 480ms);
 		--dry-mask-reveal-ease: var(--dry-ease-spring-snappy, cubic-bezier(0.16, 1, 0.3, 1));

package/dist/mega-menu/mega-menu-panel.svelte

@@ -7,10 +7,18 @@
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		fullWidth?: boolean;
+		align?: 'start' | 'center' | 'end';
 		children: Snippet;
 	}
 
-	let { fullWidth = false, class: className, children, style, ...rest }: Props = $props();
+	let {
+		fullWidth = false,
+		align = 'start',
+		class: className,
+		children,
+		style,
+		...rest
+	}: Props = $props();
 
 	const ctx = getMegaMenuCtx();
 	const itemCtx = getMegaMenuItemCtx();
@@ -20,7 +28,11 @@
 	const popover = createPositionedPopover({
 		triggerEl: () => document.getElementById(itemCtx.triggerId),
 		contentEl: () => panelEl ?? null,
-		placement: () => 'bottom-start',
+		placement: () => {
+			if (align === 'center') return 'bottom';
+			if (align === 'end') return 'bottom-end';
+			return 'bottom-start';
+		},
 		offset: () => 4
 	});
 

package/dist/mega-menu/mega-menu-panel.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     fullWidth?: boolean;
+    align?: 'start' | 'center' | 'end';
     children: Snippet;
 }
 declare const MegaMenuPanel: import("svelte").Component<Props, {}, "">;