@joanroucoux/cairn-ui 0.8.2 → 0.9.1

package/fesm2022/joanroucoux-cairn-ui-dialog.mjs

@@ -1,469 +1,417 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, signal, computed, inject, ElementRef, DestroyRef, afterNextRender, afterRenderEffect, Component } from '@angular/core';
-
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, ElementRef, afterNextRender, afterRenderEffect, booleanAttribute, computed, inject, input, output, signal } from "@angular/core";
 const GRACE = 50;
 function afterExit(element, done) {
-    const style = getComputedStyle(element);
-    const wait = longest(style.transitionDuration) + longest(style.transitionDelay);
-    if (wait === 0) {
-        done();
-        return () => undefined;
-    }
-    const onEnd = (event) => {
-        if (event.target === element && !event.pseudoElement) {
-            cancel();
-            done();
-        }
-    };
-    const timer = setTimeout(() => {
-        cancel();
-        done();
-    }, wait + GRACE);
-    const cancel = () => {
-        clearTimeout(timer);
-        element.removeEventListener('transitionend', onEnd);
-    };
-    element.addEventListener('transitionend', onEnd);
-    return cancel;
+	const style = getComputedStyle(element);
+	const wait = longest(style.transitionDuration) + longest(style.transitionDelay);
+	if (wait === 0) {
+		done();
+		return () => void 0;
+	}
+	const onEnd = (event) => {
+		if (event.target === element && !event.pseudoElement) {
+			cancel();
+			done();
+		}
+	};
+	const timer = setTimeout(() => {
+		cancel();
+		done();
+	}, wait + GRACE);
+	const cancel = () => {
+		clearTimeout(timer);
+		element.removeEventListener("transitionend", onEnd);
+	};
+	element.addEventListener("transitionend", onEnd);
+	return cancel;
 }
 function longest(list) {
-    return Math.max(0, ...list.split(',').map(toMs));
+	return Math.max(0, ...list.split(",").map(toMs));
 }
 function toMs(value) {
-    const amount = Number.parseFloat(value);
-    if (Number.isNaN(amount)) {
-        return 0;
-    }
-    return value.trim().endsWith('ms') ? amount : amount * 1000;
-}
-
-const DIALOG_STYLES = `
-dialog {
-  --dialog-ease: var(--ease-sheet);
-  transition:
-    transform var(--duration-base) var(--dialog-ease),
-    overlay var(--duration-base) allow-discrete,
-    display var(--duration-base) allow-discrete;
-  transform: translateY(var(--drag-y, 0px));
-}
-
-dialog:not([open]) {
-  transform: translateY(100%);
-  transition-duration: var(--duration-exit);
-}
-
-@starting-style {
-  dialog[open] {
-    transform: translateY(100%);
-  }
-}
-
-dialog[data-dragging] {
-  transition: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  dialog {
-    transition:
-      opacity var(--duration-base) var(--dialog-ease),
-      overlay var(--duration-base) allow-discrete,
-      display var(--duration-base) allow-discrete;
-    opacity: 1;
-  }
-
-  dialog:not([open]) {
-    opacity: 0;
-    transform: translateY(var(--drag-y, 0px));
-  }
-
-  @starting-style {
-    dialog[open] {
-      opacity: 0;
-      transform: translateY(0);
-    }
-  }
-}
-
-@media (min-width: 64rem) {
-  dialog {
-    --dialog-ease: var(--ease-out);
-    transition:
-      opacity var(--duration-base) var(--dialog-ease),
-      transform var(--duration-base) var(--dialog-ease),
-      overlay var(--duration-base) allow-discrete,
-      display var(--duration-base) allow-discrete;
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  dialog:not([open]) {
-    opacity: 0;
-    transform: scale(var(--enter-scale));
-  }
-
-  @starting-style {
-    dialog[open] {
-      opacity: 0;
-      transform: scale(var(--enter-scale));
-    }
-  }
-}
-
-dialog::backdrop {
-  transition: opacity var(--duration-base) var(--ease-out);
-  opacity: 1;
+	const amount = Number.parseFloat(value);
+	if (Number.isNaN(amount)) return 0;
+	return value.trim().endsWith("ms") ? amount : amount * 1e3;
 }
-
-dialog:not([open])::backdrop {
-  opacity: 0;
-  transition-duration: var(--duration-exit);
-}
-
-@starting-style {
-  dialog[open]::backdrop {
-    opacity: 0;
-  }
-}
-`;
-
-const DISMISS_RATIO = 0.3;
-const DISMISS_SPEED = 0.5;
+var ModalClose = class {
+	#host = inject(ElementRef);
+	#config;
+	#pressedOnBackdrop = false;
+	#reason = null;
+	#cancelExit = () => void 0;
+	constructor(config) {
+		this.#config = config;
+		inject(DestroyRef).onDestroy(() => this.#cancelExit());
+		afterRenderEffect(() => {
+			const dialog = this.#dialog;
+			if (config.open() && !dialog.open) {
+				this.#cancelExit();
+				config.reset?.();
+				config.opening?.();
+				dialog.showModal();
+			} else if (!config.open() && dialog.open) this.close("programmatic");
+		});
+	}
+	close(reason) {
+		if (this.#dialog.open) {
+			this.#reason = reason;
+			this.#dialog.close();
+		}
+	}
+	onCancel(event) {
+		if (event.target !== event.currentTarget) return;
+		event.preventDefault();
+		if (!this.#config.busy()) this.close("escape");
+	}
+	onKeydown(event) {
+		if (event.key === "Escape" && this.#config.busy() && event.target.closest("dialog") === this.#dialog) event.preventDefault();
+	}
+	onPointerDown(event) {
+		this.#pressedOnBackdrop = event.target === this.#dialog && this.#outside(event);
+	}
+	onClick(event) {
+		if (this.#pressedOnBackdrop && !this.#config.busy() && event.target === this.#dialog && this.#outside(event)) this.close("backdrop");
+		this.#pressedOnBackdrop = false;
+	}
+	onNativeClose() {
+		const asked = this.#reason;
+		this.#reason = null;
+		if (this.#dialog.open) return;
+		if (asked === null && this.#config.busy()) {
+			this.#dialog.showModal();
+			return;
+		}
+		const reason = asked ?? "escape";
+		if (reason !== "programmatic") this.#config.dismissed.emit();
+		this.#cancelExit();
+		this.#cancelExit = afterExit(this.#dialog, () => {
+			this.#cancelExit = () => void 0;
+			this.#config.reset?.();
+			this.#config.closed.emit(reason);
+		});
+	}
+	get #dialog() {
+		return this.#host.nativeElement.querySelector("dialog");
+	}
+	#outside(event) {
+		const rect = this.#dialog.getBoundingClientRect();
+		return event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
+	}
+};
+const DISMISS_RATIO = .3;
+const DISMISS_SPEED = .5;
 const SPEED_WINDOW = 100;
 const SLOP = 6;
-const CONTROLS = 'button, a, input, select, textarea, [role="button"]';
-class SheetDrag {
-    #panel;
-    #grips;
-    #dismiss;
-    #enabled;
-    #gesture = null;
-    constructor(panel, grips, dismiss, enabled) {
-        this.#panel = panel;
-        this.#grips = grips;
-        this.#dismiss = dismiss;
-        this.#enabled = enabled;
-        for (const grip of grips) {
-            grip.addEventListener('pointerdown', this.#onDown);
-            grip.addEventListener('pointermove', this.#onMove);
-            grip.addEventListener('pointerup', this.#onUp);
-            grip.addEventListener('pointercancel', this.#onCancel);
-        }
-    }
-    reset() {
-        this.#gesture = null;
-        this.#panel.removeAttribute('data-dragging');
-        this.#panel.style.removeProperty('--drag-y');
-    }
-    destroy() {
-        for (const grip of this.#grips) {
-            grip.removeEventListener('pointerdown', this.#onDown);
-            grip.removeEventListener('pointermove', this.#onMove);
-            grip.removeEventListener('pointerup', this.#onUp);
-            grip.removeEventListener('pointercancel', this.#onCancel);
-        }
-    }
-    #onDown = (event) => {
-        const grip = event.currentTarget;
-        if (event.button !== 0 || !this.#enabled() || !isSheet() || event.target.closest(CONTROLS)) {
-            return;
-        }
-        grip.setPointerCapture(event.pointerId);
-        this.#gesture = {
-            id: event.pointerId,
-            startX: event.clientX,
-            startY: event.clientY,
-            dragging: false,
-            height: 0,
-            offset: 0,
-            samples: [{ y: event.clientY, at: event.timeStamp }],
-        };
-    };
-    #onMove = (event) => {
-        const gesture = this.#current(event);
-        if (!gesture) {
-            return;
-        }
-        const dx = event.clientX - gesture.startX;
-        const dy = event.clientY - gesture.startY;
-        if (!gesture.dragging) {
-            if (Math.max(Math.abs(dx), Math.abs(dy)) < SLOP) {
-                return;
-            }
-            if (Math.abs(dx) > Math.abs(dy)) {
-                this.#gesture = null;
-                return;
-            }
-            gesture.dragging = true;
-            gesture.height = this.#panel.getBoundingClientRect().height;
-            this.#panel.setAttribute('data-dragging', '');
-        }
-        gesture.offset = Math.max(0, dy);
-        gesture.samples.push({ y: event.clientY, at: event.timeStamp });
-        this.#panel.style.setProperty('--drag-y', `${gesture.offset}px`);
-    };
-    #onUp = (event) => {
-        const gesture = this.#current(event);
-        if (!gesture) {
-            return;
-        }
-        this.#gesture = null;
-        if (!gesture.dragging) {
-            return;
-        }
-        this.#panel.removeAttribute('data-dragging');
-        const release = { y: event.clientY, at: event.timeStamp };
-        if (gesture.offset > gesture.height * DISMISS_RATIO || releaseSpeed(gesture.samples, release) > DISMISS_SPEED) {
-            this.#dismiss();
-        }
-        else {
-            this.reset();
-        }
-    };
-    #onCancel = (event) => {
-        if (this.#current(event)) {
-            this.#gesture = null;
-            this.#panel.removeAttribute('data-dragging');
-            this.reset();
-        }
-    };
-    #current(event) {
-        return this.#gesture?.id === event.pointerId ? this.#gesture : null;
-    }
-}
+const CONTROLS = "button, a, input, select, textarea, [role=\"button\"]";
+var SheetDrag = class {
+	#panel;
+	#grips;
+	#dismiss;
+	#enabled;
+	#gesture = null;
+	constructor(panel, grips, dismiss, enabled) {
+		this.#panel = panel;
+		this.#grips = grips;
+		this.#dismiss = dismiss;
+		this.#enabled = enabled;
+		for (const grip of grips) {
+			grip.addEventListener("pointerdown", this.#onDown);
+			grip.addEventListener("pointermove", this.#onMove);
+			grip.addEventListener("pointerup", this.#onUp);
+			grip.addEventListener("pointercancel", this.#onCancel);
+		}
+	}
+	reset() {
+		this.#gesture = null;
+		this.#panel.removeAttribute("data-dragging");
+		this.#panel.style.removeProperty("--drag-y");
+	}
+	destroy() {
+		for (const grip of this.#grips) {
+			grip.removeEventListener("pointerdown", this.#onDown);
+			grip.removeEventListener("pointermove", this.#onMove);
+			grip.removeEventListener("pointerup", this.#onUp);
+			grip.removeEventListener("pointercancel", this.#onCancel);
+		}
+	}
+	#onDown = (event) => {
+		const grip = event.currentTarget;
+		if (event.button !== 0 || !this.#enabled() || !isSheet() || event.target.closest(CONTROLS)) return;
+		grip.setPointerCapture(event.pointerId);
+		this.#gesture = {
+			id: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY,
+			dragging: false,
+			height: 0,
+			offset: 0,
+			samples: [{
+				y: event.clientY,
+				at: event.timeStamp
+			}]
+		};
+	};
+	#onMove = (event) => {
+		const gesture = this.#current(event);
+		if (!gesture) return;
+		const dx = event.clientX - gesture.startX;
+		const dy = event.clientY - gesture.startY;
+		if (!gesture.dragging) {
+			if (Math.max(Math.abs(dx), Math.abs(dy)) < SLOP) return;
+			if (Math.abs(dx) > Math.abs(dy)) {
+				this.#gesture = null;
+				return;
+			}
+			gesture.dragging = true;
+			gesture.height = this.#panel.getBoundingClientRect().height;
+			this.#panel.setAttribute("data-dragging", "");
+		}
+		gesture.offset = Math.max(0, dy);
+		gesture.samples.push({
+			y: event.clientY,
+			at: event.timeStamp
+		});
+		this.#panel.style.setProperty("--drag-y", `${gesture.offset}px`);
+	};
+	#onUp = (event) => {
+		const gesture = this.#current(event);
+		if (!gesture) return;
+		this.#gesture = null;
+		if (!gesture.dragging) return;
+		this.#panel.removeAttribute("data-dragging");
+		const release = {
+			y: event.clientY,
+			at: event.timeStamp
+		};
+		if (gesture.offset > gesture.height * DISMISS_RATIO || releaseSpeed(gesture.samples, release) > DISMISS_SPEED) this.#dismiss();
+		else this.reset();
+	};
+	#onCancel = (event) => {
+		if (this.#current(event)) {
+			this.#gesture = null;
+			this.#panel.removeAttribute("data-dragging");
+			this.reset();
+		}
+	};
+	#current(event) {
+		return this.#gesture?.id === event.pointerId ? this.#gesture : null;
+	}
+};
 function isSheet() {
-    return typeof matchMedia === 'function' && !matchMedia('(min-width: 64rem)').matches;
+	return typeof matchMedia === "function" && !matchMedia("(min-width: 64rem)").matches;
 }
 function releaseSpeed(samples, last) {
-    const first = samples.find((sample) => sample.at >= last.at - SPEED_WINDOW) ?? last;
-    const elapsed = last.at - first.at;
-    return elapsed > 0 ? (last.y - first.y) / elapsed : 0;
+	const first = samples.find((sample) => sample.at >= last.at - SPEED_WINDOW) ?? last;
+	const elapsed = last.at - first.at;
+	return elapsed > 0 ? (last.y - first.y) / elapsed : 0;
 }
-
-/** Named dialog widths; any other CSS length is accepted as is. `DialogWidth` is derived from this tuple. */
-const DIALOG_WIDTHS = ['md', 'lg'];
+const DIALOG_WIDTHS = ["md", "lg"];
 const WIDTH_VALUES = {
-    md: '28rem',
-    lg: '560px',
+	md: "28rem",
+	lg: "560px"
 };
-/** Spacing presets. `DialogLayout` is derived from this tuple. */
-const DIALOG_LAYOUTS = ['trade', 'form', 'list', 'confirm'];
-const LAYOUTS = {
-    trade: {
-        dialog: '',
-        header: 'items-start lg:pt-6',
-        title: 'pt-1 lg:pt-0',
-        cross: 'lg:-mt-1.5',
-        icon: 'lg:size-5',
-        handle: 'pt-[7.5px]',
-        body: 'pt-3 pb-4 lg:pt-5 lg:pb-5',
-        footer: 'max-lg:pb-[calc(8px+env(safe-area-inset-bottom))] lg:pb-6',
-    },
-    form: {
-        dialog: '',
-        header: 'items-center lg:pt-6',
-        title: '',
-        cross: '',
-        icon: 'lg:size-[22px]',
-        handle: 'pt-[7.5px]',
-        body: 'pt-2 pb-5 lg:pt-4 lg:pb-5',
-        footer: 'max-lg:pb-[calc(12px+env(safe-area-inset-bottom))] lg:pb-5',
-    },
-    list: {
-        dialog: 'max-lg:h-[calc(100dvh-58px)] lg:mt-24 lg:mb-auto lg:max-h-[min(760px,calc(100dvh-96px-32px))]',
-        header: 'items-center lg:pt-5',
-        title: '',
-        cross: '',
-        icon: 'lg:size-[22px]',
-        handle: 'pt-[7.5px]',
-        body: 'pt-2 pb-4 lg:pt-4 lg:pb-5',
-        footer: 'pt-3 shadow-[0_-1px_0_var(--hairline)] max-lg:pb-[calc(8px+env(safe-area-inset-bottom))] lg:pt-4 lg:pb-4',
-    },
-    confirm: {
-        dialog: '',
-        header: 'items-center pt-3 lg:pt-6',
-        title: '',
-        cross: '',
-        icon: 'lg:size-[22px]',
-        handle: 'pt-[11.5px]',
-        body: 'pt-3 pb-5 lg:pt-3 lg:pb-6',
-        footer: 'max-lg:pb-[calc(8px+env(safe-area-inset-bottom))] lg:pb-6',
-    },
+const DIALOG_VARIANTS = ["default", "confirm"];
+const DIALOG_SHEETS = ["fit", "full"];
+const VARIANTS = {
+	default: {
+		handle: "pt-[7.5px]",
+		header: "pb-3 lg:py-4 lg:pl-6",
+		body: "py-4 lg:py-5",
+		footer: "pt-3 empty:hidden lg:py-4"
+	},
+	confirm: {
+		handle: "pt-[11.5px]",
+		header: "pt-3 lg:pt-6 lg:pl-6",
+		body: "pt-3",
+		footer: "not-empty:pt-5 lg:pb-6 lg:not-empty:pt-6"
+	}
 };
-/** What started a close, as `closed` reports it. `DialogCloseReason` is derived from this tuple. */
-const DIALOG_CLOSE_REASONS = ['escape', 'backdrop', 'cross', 'drag', 'programmatic'];
+const DEFAULT_WIDTHS = {
+	default: "lg",
+	confirm: "440px"
+};
+const DIALOG_CLOSE_REASONS = [
+	"escape",
+	"backdrop",
+	"cross",
+	"drag",
+	"programmatic"
+];
 const nextId = (() => {
-    let count = 0;
-    return () => `ui-dialog-${++count}`;
+	let count = 0;
+	return () => `ui-dialog-${++count}`;
 })();
-/**
- * Modal dialog on the native <dialog>: a bottom sheet under `64rem`, centered above it.
- *
- * `busy` keeps it open while its action runs: Escape, a click on the backdrop and a drag of the sheet do
- * nothing and the cross is disabled. The owner disables its own buttons and still closes it through `open`.
- *
- * @example
- * <ui-dialog heading="Buy" description="Ferrari" closeLabel="Close" width="528px" [open]="buying()" (dismissed)="buying.set(false)">
- *   <p>Body</p>
- *   <button dialogActions ui-button variant="outline" class="max-lg:hidden" (click)="buying.set(false)">Cancel</button>
- *   <button dialogActions ui-button>Buy 40 shares</button>
- * </ui-dialog>
- */
-class UiDialog {
-    heading = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
-    description = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
-    closeLabel = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "closeLabel" }] : /* istanbul ignore next */ []));
-    layout = input('trade', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    truncateDescription = input(false, { ...(ngDevMode ? { debugName: "truncateDescription" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    width = input('lg', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    dismissed = output();
-    closed = output();
-    headingId = nextId();
-    descriptionId = `${this.headingId}-description`;
-    bodyId = `${this.headingId}-body`;
-    scrollable = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
-    describedBy = computed(() => {
-        if (this.description()) {
-            return this.descriptionId;
-        }
-        return this.layout() === 'confirm' ? this.bodyId : null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
-    widthValue = computed(() => {
-        const width = this.width();
-        return Object.hasOwn(WIDTH_VALUES, width) ? WIDTH_VALUES[width] : width;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "widthValue" }] : /* istanbul ignore next */ []));
-    spec = computed(() => LAYOUTS[this.layout()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []));
-    headerClasses = computed(() => `flex gap-2 pl-4 max-lg:touch-none lg:gap-3 lg:pl-6 ${this.spec().header} ${this.closeLabel() ? 'pr-2 lg:pr-4' : 'pr-4 lg:pr-6'}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
-    titleClasses = computed(() => this.spec().title, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
-    crossClasses = computed(() => `rounded-pill lg:rounded-control grid size-11 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-(--ring) active:scale-(--press-scale) active:bg-(--soft) disabled:pointer-events-none disabled:opacity-40 lg:size-9 lg:hover:bg-(--glow) lg:hover:text-(--foreground) ${this.spec().cross}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "crossClasses" }] : /* istanbul ignore next */ []));
-    iconClasses = computed(() => this.spec().icon, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
-    footerClasses = computed(() => `max-lg:[&>[ui-button]]:text-body flex justify-end gap-2 px-4 empty:hidden max-lg:flex-col-reverse max-lg:[&>[ui-button]]:h-[50px] max-lg:[&>[ui-button]]:w-full lg:px-6 ${this.spec().footer}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `open:flex w-full flex-col overflow-hidden m-auto mt-auto max-h-[calc(100dvh-2rem)] max-lg:mb-0 max-lg:max-w-none max-lg:rounded-b-none lg:max-w-(--dialog-width) rounded-container bg-(--card) text-(--foreground) shadow-[0_0_0_1px_var(--border),0_24px_64px_rgb(0_0_0/0.24)] max-lg:shadow-[0_-1px_0_var(--border),0_-12px_32px_rgb(0_0_0/0.16)] backdrop:bg-black/[0.36] ${this.spec().dialog}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    #host = inject(ElementRef);
-    constructor() {
-        const destroyRef = inject(DestroyRef);
-        afterNextRender(() => {
-            const host = this.#host.nativeElement;
-            const grips = ['[data-dialog-handle]', '[data-dialog-header]'].map((grip) => host.querySelector(grip));
-            this.#drag = new SheetDrag(this.#dialog, grips, () => this.close('drag'), () => !this.busy());
-            destroyRef.onDestroy(() => {
-                this.#drag?.destroy();
-                this.#cancelExit();
-            });
-            if (typeof ResizeObserver === 'undefined') {
-                return;
-            }
-            const body = this.#host.nativeElement.querySelector('[data-dialog-body]');
-            const observer = new ResizeObserver(() => this.scrollable.set(body.scrollHeight > body.clientHeight));
-            observer.observe(body);
-            observer.observe(body.firstElementChild);
-            destroyRef.onDestroy(() => observer.disconnect());
-        });
-        afterRenderEffect(() => {
-            // viewChild.required can't target a #private field (NG1053); safe because the template has exactly one <dialog>.
-            const dialog = this.#host.nativeElement.querySelector('dialog');
-            if (this.open() && !dialog.open) {
-                this.#cancelExit();
-                this.#drag?.reset();
-                dialog.showModal();
-            }
-            else if (!this.open() && dialog.open) {
-                this.close('programmatic');
-            }
-        });
-    }
-    #pressedOnBackdrop = false;
-    #drag = null;
-    #reason = null;
-    #cancelExit = () => undefined;
-    close(reason) {
-        if (this.#dialog.open) {
-            this.#reason = reason;
-            this.#dialog.close();
-        }
-    }
-    onCancel(event) {
-        if (event.target !== event.currentTarget) {
-            return;
-        }
-        event.preventDefault();
-        if (!this.busy()) {
-            this.close('escape');
-        }
-    }
-    onKeydown(event) {
-        if (event.key === 'Escape' && this.busy()) {
-            event.preventDefault();
-        }
-    }
-    onPointerDown(event) {
-        this.#pressedOnBackdrop = event.target === this.#dialog && this.#outside(event);
-    }
-    onClick(event) {
-        if (this.#pressedOnBackdrop && !this.busy() && event.target === this.#dialog && this.#outside(event)) {
-            this.close('backdrop');
-        }
-        this.#pressedOnBackdrop = false;
-    }
-    get #dialog() {
-        return this.#host.nativeElement.querySelector('dialog');
-    }
-    #outside(event) {
-        const rect = this.#dialog.getBoundingClientRect();
-        return (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom);
-    }
-    onNativeClose() {
-        const asked = this.#reason;
-        this.#reason = null;
-        if (this.#dialog.open) {
-            return;
-        }
-        if (asked === null && this.busy()) {
-            this.#dialog.showModal();
-            return;
-        }
-        const reason = asked ?? 'escape';
-        if (reason !== 'programmatic') {
-            this.dismissed.emit();
-        }
-        this.#awaitExit(reason);
-    }
-    #awaitExit(reason) {
-        this.#cancelExit();
-        this.#cancelExit = afterExit(this.#dialog, () => {
-            this.#cancelExit = () => undefined;
-            this.#drag?.reset();
-            this.closed.emit(reason);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiDialog, isStandalone: true, selector: "ui-dialog", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, truncateDescription: { classPropertyName: "truncateDescription", publicName: "truncateDescription", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", closed: "closed" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "click": "onClick($event)", "keydown": "onKeydown($event)" } }, ngImport: i0, template: `
+var UiDialog = class UiDialog {
+	heading = input.required(...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	description = input(...ngDevMode ? [void 0, { debugName: "description" }] : /* istanbul ignore next */ []);
+	closeLabel = input(...ngDevMode ? [void 0, { debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	sheet = input("fit", ...ngDevMode ? [{ debugName: "sheet" }] : /* istanbul ignore next */ []);
+	truncateDescription = input(false, {
+		...ngDevMode ? { debugName: "truncateDescription" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	width = input(...ngDevMode ? [void 0, { debugName: "width" }] : /* istanbul ignore next */ []);
+	open = input(false, {
+		...ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	busy = input(false, {
+		...ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dismissed = output();
+	closed = output();
+	headingId = nextId();
+	descriptionId = `${this.headingId}-description`;
+	bodyId = `${this.headingId}-body`;
+	scrollable = signal(false, ...ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []);
+	stacked = signal(false, ...ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => {
+		if (this.description()) return this.descriptionId;
+		return this.variant() === "confirm" ? this.bodyId : null;
+	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	widthValue = computed(() => {
+		const width = this.width() ?? DEFAULT_WIDTHS[this.variant()];
+		return Object.hasOwn(WIDTH_VALUES, width) ? WIDTH_VALUES[width] : width;
+	}, ...ngDevMode ? [{ debugName: "widthValue" }] : /* istanbul ignore next */ []);
+	spec = computed(() => VARIANTS[this.variant()], ...ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []);
+	hairlines = computed(() => Boolean(this.closeLabel()) && this.variant() === "default", ...ngDevMode ? [{ debugName: "hairlines" }] : /* istanbul ignore next */ []);
+	headerClasses = computed(() => `flex items-start gap-2 pl-4 max-lg:touch-none lg:gap-3 ${this.spec().header} ${this.closeLabel() ? "pr-2 lg:pr-4" : "pr-4 lg:pr-6"} ${this.hairlines() ? "shadow-[inset_0_-1px_0_var(--hairline)]" : ""}`, ...ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []);
+	crossClasses = "rounded-pill lg:rounded-control grid size-11 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-(--ring) active:scale-(--press-scale) active:bg-(--soft) disabled:pointer-events-none disabled:opacity-40 lg:size-9 lg:hover:bg-(--glow) lg:hover:text-(--foreground)";
+	footerClasses = computed(() => `max-lg:[&>[ui-button]]:text-body flex justify-end gap-2 px-4 pb-[calc(8px+env(safe-area-inset-bottom))] max-lg:flex-col-reverse max-lg:[&>[ui-button]]:h-[50px] max-lg:[&>[ui-button]]:w-full lg:px-6 ${this.spec().footer} ${this.hairlines() ? "shadow-[inset_0_1px_0_var(--hairline)]" : ""}`, ...ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []);
+	classes = computed(() => `open:flex w-full flex-col overflow-hidden m-auto mt-auto max-lg:max-h-[calc(100dvh-2rem)] lg:max-h-[calc(100dvh-96px)] max-lg:mb-0 max-lg:max-w-none max-lg:rounded-b-none lg:max-w-(--dialog-width) rounded-container bg-(--card) text-(--foreground) outline-none shadow-[0_0_0_1px_var(--border),0_24px_64px_rgb(0_0_0/0.24)] max-lg:shadow-[0_-1px_0_var(--border),0_-12px_32px_rgb(0_0_0/0.16)] ${this.stacked() ? "backdrop:bg-black/[0.24]" : "backdrop:bg-black/[0.36]"} ${this.sheet() === "full" ? "max-lg:h-[calc(100dvh-58px)]" : ""}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	#host = inject(ElementRef);
+	#drag = null;
+	modal;
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		afterNextRender(() => {
+			const host = this.#host.nativeElement;
+			const dialog = host.querySelector("dialog");
+			const grips = ["[data-dialog-handle]", "[data-dialog-header]"].map((grip) => host.querySelector(grip));
+			this.#drag = new SheetDrag(dialog, grips, () => this.modal.close("drag"), () => !this.busy());
+			destroyRef.onDestroy(() => this.#drag?.destroy());
+			if (typeof ResizeObserver === "undefined") return;
+			const body = host.querySelector("[data-dialog-body]");
+			const observer = new ResizeObserver(() => this.scrollable.set(body.scrollHeight > body.clientHeight));
+			observer.observe(body);
+			observer.observe(body.firstElementChild);
+			destroyRef.onDestroy(() => observer.disconnect());
+		});
+		this.modal = new ModalClose({
+			open: this.open,
+			busy: this.busy,
+			dismissed: this.dismissed,
+			closed: this.closed,
+			reset: () => this.#drag?.reset(),
+			opening: () => this.stacked.set(this.#overAnotherModal())
+		});
+	}
+	#overAnotherModal() {
+		const open = this.#host.nativeElement.ownerDocument.querySelectorAll("dialog[open]");
+		return Array.from(open).some((dialog) => dialog.matches(":modal"));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: UiDialog,
+		isStandalone: true,
+		selector: "ui-dialog",
+		inputs: {
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sheet: {
+				classPropertyName: "sheet",
+				publicName: "sheet",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			truncateDescription: {
+				classPropertyName: "truncateDescription",
+				publicName: "truncateDescription",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			busy: {
+				classPropertyName: "busy",
+				publicName: "busy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			dismissed: "dismissed",
+			closed: "closed"
+		},
+		host: { listeners: {
+			"pointerdown": "modal.onPointerDown($event)",
+			"click": "modal.onClick($event)",
+			"keydown": "modal.onKeydown($event)"
+		} },
+		ngImport: i0,
+		template: `
     <dialog
       #dlg
       [attr.aria-busy]="busy() || null"
       [attr.aria-describedby]="describedBy()"
       [attr.aria-labelledby]="headingId"
-      [attr.role]="layout() === 'confirm' ? 'alertdialog' : 'dialog'"
+      [attr.role]="variant() === 'confirm' ? 'alertdialog' : 'dialog'"
       [class]="classes()"
       [style.--dialog-width]="widthValue()"
-      (cancel)="onCancel($event)"
-      (close)="onNativeClose()"
+      (cancel)="modal.onCancel($event)"
+      (close)="modal.onNativeClose()"
     >
       <div
         aria-hidden="true"
@@ -475,7 +423,7 @@ class UiDialog {
       </div>
 
       <div data-dialog-header [class]="headerClasses()">
-        <div class="flex min-w-0 flex-1 flex-col" [class]="titleClasses()">
+        <div class="flex min-w-0 flex-1 flex-col" [class.max-lg:pt-1]="description()">
           <h2 class="text-title font-semibold" [id]="headingId">{{ heading() }}</h2>
 
           @if (description()) {
@@ -493,9 +441,9 @@ class UiDialog {
           <button
             type="button"
             [attr.aria-label]="closeLabel()"
-            [class]="crossClasses()"
+            [class]="crossClasses"
             [disabled]="busy()"
-            (click)="close('cross')"
+            (click)="modal.close('cross')"
           >
             <svg
               aria-hidden="true"
@@ -503,7 +451,6 @@ class UiDialog {
               stroke-linecap="round"
               stroke-linejoin="round"
               viewBox="0 0 24 24"
-              [class]="iconClasses()"
             >
               <path d="M18 6 6 18" />
               <path d="m6 6 12 12" />
@@ -520,7 +467,6 @@ class UiDialog {
         [attr.tabindex]="scrollable() ? 0 : null"
         [id]="bodyId"
       >
-        <!-- empty:hidden keeps a body-less dialog from carrying the body's vertical padding. -->
         <div class="flex flex-col gap-4 empty:hidden" [class]="spec().body">
           <ng-content />
         </div>
@@ -530,25 +476,36 @@ class UiDialog {
         <ng-content select="[dialogActions]" />
       </div>
     </dialog>
-  `, isInline: true, styles: ["dialog{--dialog-ease: var(--ease-sheet);transition:transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;transform:translateY(var(--drag-y, 0px))}dialog:not([open]){transform:translateY(100%);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{transform:translateY(100%)}}dialog[data-dragging]{transition:none}@media(prefers-reduced-motion:reduce){dialog{transition:opacity var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1}dialog:not([open]){opacity:0;transform:translateY(var(--drag-y, 0px))}@starting-style{dialog[open]{opacity:0;transform:translateY(0)}}}@media(min-width:64rem){dialog{--dialog-ease: var(--ease-out);transition:opacity var(--duration-base) var(--dialog-ease),transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1;transform:scale(1)}dialog:not([open]){opacity:0;transform:scale(var(--enter-scale))}@starting-style{dialog[open]{opacity:0;transform:scale(var(--enter-scale))}}}dialog::backdrop{transition:opacity var(--duration-base) var(--ease-out);opacity:1}dialog:not([open])::backdrop{opacity:0;transition-duration:var(--duration-exit)}@starting-style{dialog[open]::backdrop{opacity:0}}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDialog, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-dialog', host: {
-                        '(pointerdown)': 'onPointerDown($event)',
-                        '(click)': 'onClick($event)',
-                        '(keydown)': 'onKeydown($event)',
-                    }, template: `
+  `,
+		isInline: true,
+		styles: ["dialog{--dialog-ease: var(--ease-sheet);transition:transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;transform:translateY(var(--drag-y, 0px))}dialog:not([open]){transform:translateY(100%);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{transform:translateY(100%)}}dialog[data-dragging]{transition:none}@media(prefers-reduced-motion:reduce){dialog{transition:opacity var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1}dialog:not([open]){opacity:0;transform:translateY(var(--drag-y, 0px))}@starting-style{dialog[open]{opacity:0;transform:translateY(0)}}}@media(min-width:64rem){dialog{--dialog-ease: var(--ease-out);transition:opacity var(--duration-base) var(--dialog-ease),transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1;transform:scale(1)}dialog:not([open]){opacity:0;transform:scale(var(--enter-scale))}@starting-style{dialog[open]{opacity:0;transform:scale(var(--enter-scale))}}}dialog::backdrop{transition:opacity var(--duration-base) var(--ease-out);opacity:1}dialog:not([open])::backdrop{opacity:0;transition-duration:var(--duration-exit)}@starting-style{dialog[open]::backdrop{opacity:0}}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiDialog,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-dialog",
+			host: {
+				"(pointerdown)": "modal.onPointerDown($event)",
+				"(click)": "modal.onClick($event)",
+				"(keydown)": "modal.onKeydown($event)"
+			},
+			template: `
     <dialog
       #dlg
       [attr.aria-busy]="busy() || null"
       [attr.aria-describedby]="describedBy()"
       [attr.aria-labelledby]="headingId"
-      [attr.role]="layout() === 'confirm' ? 'alertdialog' : 'dialog'"
+      [attr.role]="variant() === 'confirm' ? 'alertdialog' : 'dialog'"
       [class]="classes()"
       [style.--dialog-width]="widthValue()"
-      (cancel)="onCancel($event)"
-      (close)="onNativeClose()"
+      (cancel)="modal.onCancel($event)"
+      (close)="modal.onNativeClose()"
     >
       <div
         aria-hidden="true"
@@ -560,7 +517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       </div>
 
       <div data-dialog-header [class]="headerClasses()">
-        <div class="flex min-w-0 flex-1 flex-col" [class]="titleClasses()">
+        <div class="flex min-w-0 flex-1 flex-col" [class.max-lg:pt-1]="description()">
           <h2 class="text-title font-semibold" [id]="headingId">{{ heading() }}</h2>
 
           @if (description()) {
@@ -578,9 +535,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
           <button
             type="button"
             [attr.aria-label]="closeLabel()"
-            [class]="crossClasses()"
+            [class]="crossClasses"
             [disabled]="busy()"
-            (click)="close('cross')"
+            (click)="modal.close('cross')"
           >
             <svg
               aria-hidden="true"
@@ -588,7 +545,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
               stroke-linecap="round"
               stroke-linejoin="round"
               viewBox="0 0 24 24"
-              [class]="iconClasses()"
             >
               <path d="M18 6 6 18" />
               <path d="m6 6 12 12" />
@@ -605,7 +561,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         [attr.tabindex]="scrollable() ? 0 : null"
         [id]="bodyId"
       >
-        <!-- empty:hidden keeps a body-less dialog from carrying the body's vertical padding. -->
         <div class="flex flex-col gap-4 empty:hidden" [class]="spec().body">
           <ng-content />
         </div>
@@ -615,12 +570,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         <ng-content select="[dialogActions]" />
       </div>
     </dialog>
-  `, styles: ["dialog{--dialog-ease: var(--ease-sheet);transition:transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;transform:translateY(var(--drag-y, 0px))}dialog:not([open]){transform:translateY(100%);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{transform:translateY(100%)}}dialog[data-dragging]{transition:none}@media(prefers-reduced-motion:reduce){dialog{transition:opacity var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1}dialog:not([open]){opacity:0;transform:translateY(var(--drag-y, 0px))}@starting-style{dialog[open]{opacity:0;transform:translateY(0)}}}@media(min-width:64rem){dialog{--dialog-ease: var(--ease-out);transition:opacity var(--duration-base) var(--dialog-ease),transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1;transform:scale(1)}dialog:not([open]){opacity:0;transform:scale(var(--enter-scale))}@starting-style{dialog[open]{opacity:0;transform:scale(var(--enter-scale))}}}dialog::backdrop{transition:opacity var(--duration-base) var(--ease-out);opacity:1}dialog:not([open])::backdrop{opacity:0;transition-duration:var(--duration-exit)}@starting-style{dialog[open]::backdrop{opacity:0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], truncateDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateDescription", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
+  `,
+			styles: ["dialog{--dialog-ease: var(--ease-sheet);transition:transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;transform:translateY(var(--drag-y, 0px))}dialog:not([open]){transform:translateY(100%);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{transform:translateY(100%)}}dialog[data-dragging]{transition:none}@media(prefers-reduced-motion:reduce){dialog{transition:opacity var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1}dialog:not([open]){opacity:0;transform:translateY(var(--drag-y, 0px))}@starting-style{dialog[open]{opacity:0;transform:translateY(0)}}}@media(min-width:64rem){dialog{--dialog-ease: var(--ease-out);transition:opacity var(--duration-base) var(--dialog-ease),transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1;transform:scale(1)}dialog:not([open]){opacity:0;transform:scale(var(--enter-scale))}@starting-style{dialog[open]{opacity:0;transform:scale(var(--enter-scale))}}}dialog::backdrop{transition:opacity var(--duration-base) var(--ease-out);opacity:1}dialog:not([open])::backdrop{opacity:0;transition-duration:var(--duration-exit)}@starting-style{dialog[open]::backdrop{opacity:0}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: true
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		sheet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sheet",
+				required: false
+			}]
+		}],
+		truncateDescription: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "truncateDescription",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}],
+		busy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "busy",
+				required: false
+			}]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}]
+	}
+});
+export { DIALOG_CLOSE_REASONS, DIALOG_SHEETS, DIALOG_VARIANTS, DIALOG_WIDTHS, ModalClose, UiDialog };
 
-export { DIALOG_CLOSE_REASONS, DIALOG_LAYOUTS, DIALOG_WIDTHS, UiDialog };
-//# sourceMappingURL=joanroucoux-cairn-ui-dialog.mjs.map
+//# sourceMappingURL=joanroucoux-cairn-ui-dialog.mjs.map