@dryui/ui 1.5.1 → 1.7.0

package/dist/internal/menu-group.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    className?: HTMLAttributes<HTMLDivElement>['class'];
+    children: Snippet;
+}
+declare const MenuGroup: import("svelte").Component<Props, {}, "">;
+type MenuGroup = ReturnType<typeof MenuGroup>;
+export default MenuGroup;

package/dist/internal/menu-item.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		className?: HTMLAttributes<HTMLDivElement>['class'];
+		close: () => void;
+		disabled?: boolean;
+		children: Snippet;
+	}
+
+	let { className, close, disabled, children, onclick, onkeydown, ...rest }: Props = $props();
+
+	function handleClick(e: MouseEvent & { currentTarget: HTMLDivElement }) {
+		if (disabled) return;
+		if (onclick) {
+			(onclick as (event: MouseEvent & { currentTarget: HTMLDivElement }) => void)(e);
+		}
+		close();
+	}
+
+	function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLDivElement }) {
+		if (disabled) return;
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			e.currentTarget.click();
+		}
+		if (onkeydown) {
+			(onkeydown as (event: KeyboardEvent & { currentTarget: HTMLDivElement }) => void)(e);
+		}
+	}
+</script>
+
+<div
+	role="menuitem"
+	tabindex={disabled ? undefined : -1}
+	aria-disabled={disabled || undefined}
+	data-disabled={disabled || undefined}
+	class={className}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	div {
+		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),
+			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);
+		}
+	}
+
+	div:hover:not([data-disabled]),
+	div:focus-visible {
+		background: var(--dry-color-fill);
+	}
+
+	div:active:not([data-disabled]) {
+		background: var(--dry-color-fill-hover);
+	}
+
+	div[data-disabled] {
+		color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+</style>

package/dist/internal/menu-item.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    className?: HTMLAttributes<HTMLDivElement>['class'];
+    close: () => void;
+    disabled?: boolean;
+    children: Snippet;
+}
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/internal/menu-label.svelte

@@ -0,0 +1,24 @@
+<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="presentation" class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	div {
+		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>

package/dist/internal/menu-label.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    className?: HTMLAttributes<HTMLDivElement>['class'];
+    children: Snippet;
+}
+declare const MenuLabel: import("svelte").Component<Props, {}, "">;
+type MenuLabel = ReturnType<typeof MenuLabel>;
+export default MenuLabel;

package/dist/internal/menu-root-state.svelte.d.ts

@@ -0,0 +1,24 @@
+export interface MenuRootState {
+    readonly open: boolean;
+    readonly triggerId: string;
+    readonly contentId: string;
+    triggerEl: HTMLElement | null;
+    show: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+export interface MenuPosition {
+    x: number;
+    y: number;
+}
+export interface PositionedMenuRootState extends MenuRootState {
+    position: MenuPosition;
+}
+interface CreateMenuRootStateOptions {
+    idBase: string;
+    getOpen: () => boolean;
+    setOpen: (value: boolean) => void;
+}
+export declare function createMenuRootState(options: CreateMenuRootStateOptions): MenuRootState;
+export declare function createPositionedMenuRootState(options: CreateMenuRootStateOptions): PositionedMenuRootState;
+export {};

package/dist/internal/menu-root-state.svelte.js

@@ -0,0 +1,42 @@
+import { generateFormId } from '@dryui/primitives';
+function createBaseMenuRootState(options) {
+    const triggerId = generateFormId(`${options.idBase}-trigger`);
+    const contentId = generateFormId(`${options.idBase}-content`);
+    return {
+        triggerId,
+        contentId,
+        triggerEl: null,
+        show() {
+            options.setOpen(true);
+        },
+        close() {
+            options.setOpen(false);
+        },
+        toggle() {
+            options.setOpen(!options.getOpen());
+        }
+    };
+}
+export function createMenuRootState(options) {
+    return {
+        get open() {
+            return options.getOpen();
+        },
+        ...createBaseMenuRootState(options)
+    };
+}
+export function createPositionedMenuRootState(options) {
+    let position = $state({ x: 0, y: 0 });
+    return {
+        get open() {
+            return options.getOpen();
+        },
+        ...createBaseMenuRootState(options),
+        get position() {
+            return position;
+        },
+        set position(value) {
+            position = value;
+        }
+    };
+}

package/dist/internal/menu-separator.svelte

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

package/dist/internal/menu-separator.svelte.d.ts

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

package/dist/internal/modal-content.svelte

@@ -132,6 +132,7 @@
 					var(--dry-dialog-padding)
 			)
 		);
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		container-type: inline-size;
 		justify-self: stretch;
@@ -150,6 +151,11 @@
 			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
 	}
 
+	[data-modal-content][data-variant='dialog'][data-state='closed'] [data-modal-panel] {
+		transition-duration: var(--dry-duration-fast);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-modal-content][data-variant='dialog'][data-state='open'] [data-modal-panel] {
 		opacity: 1;
 		transform: scale(1) translateY(0);
@@ -189,6 +195,8 @@
 		--dry-dialog-shadow: var(--dry-shadow-overlay);
 		--dry-dialog-padding: var(--dry-space-6);
 		--dry-dialog-max-width: 32rem;
+		--dry-radius-nested: max(0px, calc(var(--dry-dialog-radius) - var(--dry-dialog-padding)));
+		--dry-btn-radius: var(--dry-radius-nested);
 
 		container-type: inline-size;
 		justify-self: stretch;
@@ -208,6 +216,11 @@
 			transform var(--dry-duration-normal) var(--dry-ease-spring-snappy);
 	}
 
+	[data-modal-content][data-variant='alert-dialog'][data-state='closed'] [data-modal-panel] {
+		transition-duration: var(--dry-duration-fast);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-modal-content][data-variant='alert-dialog'][data-state='open'] [data-modal-panel] {
 		opacity: 1;
 		transform: scale(1) translateY(0);
@@ -282,6 +295,11 @@
 			opacity var(--dry-duration-normal) var(--dry-ease-out);
 	}
 
+	[data-modal-content][data-variant='drawer'][data-state='closed'] [data-modal-panel] {
+		transition-duration: var(--dry-duration-fast);
+		transition-timing-function: var(--dry-ease-out);
+	}
+
 	[data-modal-content][data-variant='drawer'][data-side='right'] [data-modal-panel] {
 		grid-column: 2;
 		height: 100%;

package/dist/internal/motion.js

@@ -11,8 +11,19 @@ export function supportsScrollTimelines() {
     return (CSS.supports('animation-timeline: view()') || CSS.supports('scroll-timeline-name: --dry-scroll'));
 }
 export function extractThemeColor(property, element) {
+    if (typeof document === 'undefined') {
+        return [0, 0, 0];
+    }
+    const readComputedStyle = typeof getComputedStyle === 'function'
+        ? getComputedStyle
+        : typeof window !== 'undefined' && typeof window.getComputedStyle === 'function'
+            ? window.getComputedStyle.bind(window)
+            : null;
+    if (!readComputedStyle) {
+        return [0, 0, 0];
+    }
     const el = element ?? document.documentElement;
-    const value = getComputedStyle(el).getPropertyValue(property).trim();
+    const value = readComputedStyle(el).getPropertyValue(property).trim();
     // Parse hex (#rgb, #rrggbb)
     const hexMatch = value.match(/^#([0-9a-f]{3,8})$/i);
     if (hexMatch) {

package/dist/internal/nav-arrow-button.svelte

@@ -18,9 +18,25 @@
 </script>
 
 <Button {variant} {size} type="button" aria-label={label} {...rest}>
-	{#if children}
-		{@render children()}
-	{:else}
-		{glyph}
-	{/if}
+	<span data-part="nav-arrow-icon" data-direction={direction}>
+		{#if children}
+			{@render children()}
+		{:else}
+			{glyph}
+		{/if}
+	</span>
 </Button>
+
+<style>
+	[data-part='nav-arrow-icon'] {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+	[data-part='nav-arrow-icon'][data-direction='prev'] {
+		transform: translateX(-0.5px);
+	}
+	[data-part='nav-arrow-icon'][data-direction='next'] {
+		transform: translateX(0.5px);
+	}
+</style>

package/dist/internal/picker-popover-content.svelte

@@ -0,0 +1,112 @@
+<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 { PickerPopoverController } from './date-family-controller.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		controller: PickerPopoverController;
+		dataAttribute: 'data-dp-content' | 'data-drp-content';
+		placement?: Placement;
+		offset?: number;
+		contentClass?: HTMLAttributes<HTMLDivElement>['class'];
+		contentStyle?: HTMLAttributes<HTMLDivElement>['style'];
+		children: Snippet;
+	}
+
+	let {
+		controller,
+		dataAttribute,
+		placement = 'bottom-start',
+		offset = 8,
+		contentClass,
+		contentStyle,
+		children,
+		...rest
+	}: Props = $props();
+
+	let el = $state<HTMLDivElement | null>(null);
+
+	const markerAttrs = $derived.by<Record<string, string>>(() => ({
+		'data-picker-popover-content': '',
+		[dataAttribute]: ''
+	}));
+
+	function attachContent(node: HTMLDivElement) {
+		el = node;
+
+		return () => {
+			if (el === node) {
+				el = null;
+			}
+		};
+	}
+
+	const popover = createAnchoredPopover({
+		triggerEl: () => controller.triggerEl,
+		contentEl: () => el ?? null,
+		open: () => controller.open,
+		placement: () => placement,
+		offset: () => offset
+	});
+</script>
+
+<div
+	{@attach attachContent}
+	{@attach fromAction(popover.applyPosition, () => contentStyle)}
+	popover="auto"
+	role="dialog"
+	id={controller.contentId}
+	aria-labelledby={controller.triggerId}
+	data-state={controller.open ? 'open' : 'closed'}
+	class={contentClass}
+	{...markerAttrs}
+	ontoggle={(e) => {
+		const newState = (e as ToggleEvent).newState === 'open';
+
+		if (newState && !controller.open) {
+			controller.show();
+		} else if (!newState && controller.open) {
+			controller.close();
+		}
+	}}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-picker-popover-content] {
+		inset: unset;
+		margin: 0;
+		display: inline-grid;
+		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);
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
+			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
+	}
+
+	[data-picker-popover-content]:not(:popover-open) {
+		display: none;
+	}
+
+	[data-picker-popover-content]:popover-open {
+		display: inline-grid;
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+
+	@starting-style {
+		[data-picker-popover-content]:popover-open {
+			opacity: 0;
+			transform: translateY(calc(var(--dry-motion-distance-xs) * -1))
+				scale(var(--dry-motion-scale-enter));
+		}
+	}
+</style>

package/dist/internal/picker-popover-content.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Placement } from '@dryui/primitives';
+import type { PickerPopoverController } from './date-family-controller.svelte.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    controller: PickerPopoverController;
+    dataAttribute: 'data-dp-content' | 'data-drp-content';
+    placement?: Placement;
+    offset?: number;
+    contentClass?: HTMLAttributes<HTMLDivElement>['class'];
+    contentStyle?: HTMLAttributes<HTMLDivElement>['style'];
+    children: Snippet;
+}
+declare const PickerPopoverContent: import("svelte").Component<Props, {}, "">;
+type PickerPopoverContent = ReturnType<typeof PickerPopoverContent>;
+export default PickerPopoverContent;

package/dist/link-preview/link-preview-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 { getLinkPreviewCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -22,25 +22,22 @@
 
 	const ctx = getLinkPreviewCtx();
 
-	let contentEl = $state<HTMLDivElement>();
-
-	const popover = createAnchoredPopover({
-		triggerEl: () => ctx.triggerEl,
-		contentEl: () => contentEl ?? null,
-		open: () => ctx.open,
+	const overlay = createAnchoredOverlayContent({
+		ctx,
 		placement: () => placement,
-		offset: () => offset
+		offset: () => offset,
+		style: () => style
 	});
 </script>
 
 <div
-	bind:this={contentEl}
+	{@attach overlay.bindContent}
+	{@attach overlay.position}
 	id={ctx.contentId}
 	role="tooltip"
 	popover="manual"
 	data-link-preview-content
 	data-state={ctx.open ? 'open' : 'closed'}
-	use:popover.applyPosition={style}
 	onmouseenter={() => ctx.showImmediate()}
 	onmouseleave={() => ctx.close()}
 	class={className}

package/dist/list/list-item-icon.svelte

@@ -2,16 +2,16 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLAttributes<HTMLDivElement> {
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		children: Snippet;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<div data-list-item-icon class={className} {...rest}>
+<span data-list-item-icon class={className} {...rest}>
 	{@render children()}
-</div>
+</span>
 
 <style>
 	[data-list-item-icon] {

package/dist/list/list-item-icon.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+interface Props extends HTMLAttributes<HTMLSpanElement> {
     children: Snippet;
 }
 declare const ListItemIcon: import("svelte").Component<Props, {}, "">;

package/dist/list/list-item-text.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLAttributes<HTMLDivElement> {
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		primary?: Snippet;
 		secondary?: Snippet;
 		children?: Snippet;
@@ -11,7 +11,7 @@
 	let { class: className, primary, secondary, children, ...rest }: Props = $props();
 </script>
 
-<div data-list-item-text class={className} {...rest}>
+<span data-list-item-text class={className} {...rest}>
 	{#if primary}
 		<span data-list-item-primary>{@render primary()}</span>
 	{:else if children}
@@ -20,7 +20,7 @@
 	{#if secondary}
 		<span data-list-item-secondary>{@render secondary()}</span>
 	{/if}
-</div>
+</span>
 
 <style>
 	[data-list-item-text] {

package/dist/list/list-item-text.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+interface Props extends HTMLAttributes<HTMLSpanElement> {
     primary?: Snippet;
     secondary?: Snippet;
     children?: Snippet;