@mcp-b/web-components 0.2.0

package/dist/dialog-Cx46HMaZ.js

@@ -0,0 +1,983 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html, nothing } from "lit";
+import { property, query } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { animateWithClass } from "@mcp-b/wc-support/utilities/animate";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { SigveloBeforeCloseEvent, SigveloBeforeOpenEvent, SigveloCloseEvent, SigveloOpenEvent } from "@mcp-b/wc-support/events/open-close";
+import { parseDelimitedTokens } from "@mcp-b/wc-support/utilities/parse";
+import { stripElementPrefix } from "@mcp-b/wc-support/prefix";
+import { lockScrolling, unlockScrolling } from "@mcp-b/wc-support/utilities/scroll";
+//#region src/components/dialog/dialog.styles.ts
+var dialog_styles_default = css`
+  :host {
+    --width: 30rem;
+    --height: fit-content;
+    --show-duration: var(--sigvelo-motion-duration-interaction);
+    --spacing: 1.5em;
+
+    display: none;
+  }
+
+  :host(:state(open)) {
+    display: block;
+  }
+
+  #dialog {
+    display: flex;
+    position: fixed;
+    flex-direction: column;
+    width: var(--width);
+    height: var(--height);
+    inset-block-end: 0;
+    inset-block-start: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--sigvelo-radius-md);
+    background: var(--sigvelo-color-canvas);
+    box-shadow: var(--sigvelo-elevation-overlay);
+
+    &::backdrop {
+      backdrop-filter: var(--sigvelo-glass-filter);
+      -webkit-backdrop-filter: var(--sigvelo-glass-filter, blur(6px));
+      /*
+        NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
+        remove the fallback values here.
+      */
+      background-color: var(--sigvelo-color-backdrop, rgb(0 0 0 / 0.25));
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: none;
+    }
+
+    /* Shake animation */
+    &.shake {
+      animation: shake 1000ms ease;
+    }
+
+    &.pulse {
+      --pulse-size: 1.01;
+      animation: pulse var(--sigvelo-motion-duration-presence) ease;
+    }
+
+    /* Center placement */
+    &[data-placement="center"] {
+      --pulse-size: 1.02;
+      max-width: calc(100dvw - 2rem);
+      max-height: calc(100dvh - 2rem);
+
+      &.show {
+        animation: show-from-center var(--show-duration) ease;
+
+        &::backdrop {
+          animation: show-backdrop var(--show-duration, var(--sigvelo-motion-duration-presence))
+            ease;
+        }
+      }
+
+      &.hide {
+        animation: show-from-center var(--show-duration) ease reverse;
+
+        &::backdrop {
+          animation: show-backdrop var(--show-duration, var(--sigvelo-motion-duration-presence))
+            ease reverse;
+        }
+      }
+    }
+
+    /* Top placement */
+    &[data-placement="top"] {
+      width: 100dvw;
+      max-width: 100dvw;
+      max-height: 100dvh;
+      inset-block-end: auto;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      inset-inline-start: 0;
+      border-radius: 0;
+
+      &.show {
+        animation: show-from-top var(--show-duration) ease;
+
+        &::backdrop {
+          animation: show-backdrop var(--show-duration, var(--sigvelo-motion-duration-presence))
+            ease;
+        }
+      }
+
+      &.hide {
+        animation: show-from-top var(--show-duration) ease reverse;
+
+        &::backdrop {
+          animation: show-backdrop var(--show-duration, var(--sigvelo-motion-duration-presence))
+            ease reverse;
+        }
+      }
+    }
+
+    /* Bottom placement */
+    &[data-placement="bottom"] {
+      width: 100dvw;
+      max-width: 100dvw;
+      max-height: 100dvh;
+      inset-block-end: 0;
+      inset-block-start: auto;
+      inset-inline-end: 0;
+      inset-inline-start: 0;
+      border-radius: 0;
+
+      &.show {
+        animation: show-from-bottom var(--show-duration) ease;
+
+        &::backdrop {
+          animation: show-backdrop var(--show-duration, var(--sigvelo-motion-duration-presence))
+            ease;
+        }
+      }
+
+      &.hide {
+        animation: show-from-bottom var(--show-duration) ease reverse;
+
+        &::backdrop {
+          animation: show-backdrop var(--show-duration, var(--sigvelo-motion-duration-presence))
+            ease reverse;
+        }
+      }
+    }
+
+    /* Start placement */
+    &[data-placement="start"] {
+      max-width: 100dvw;
+      height: 100dvh;
+      max-height: none;
+      inset-block-end: 0;
+      inset-block-start: 0;
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+      border-radius: 0;
+
+      &.show {
+        animation: show-from-left var(--show-duration) ease;
+
+        &:dir(rtl) {
+          animation-name: show-from-right;
+        }
+
+        &::backdrop {
+          animation: show-backdrop var(--show-duration, var(--sigvelo-motion-duration-presence))
+            ease;
+        }
+      }
+
+      &.hide {
+        animation: show-from-left var(--show-duration) ease reverse;
+
+        &:dir(rtl) {
+          animation-name: show-from-right;
+        }
+
+        &::backdrop {
+          animation: show-backdrop var(--show-duration, var(--sigvelo-motion-duration-presence))
+            ease reverse;
+        }
+      }
+    }
+
+    /* End placement */
+    &[data-placement="end"] {
+      max-width: 100dvw;
+      height: 100dvh;
+      max-height: none;
+      inset-block-end: 0;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      inset-inline-start: auto;
+      border-radius: 0;
+
+      &.show {
+        animation: show-from-right var(--show-duration) ease;
+
+        &:dir(rtl) {
+          animation-name: show-from-left;
+        }
+
+        &::backdrop {
+          animation: show-backdrop var(--show-duration, var(--sigvelo-motion-duration-presence))
+            ease;
+        }
+      }
+
+      &.hide {
+        animation: show-from-right var(--show-duration) ease reverse;
+
+        &:dir(rtl) {
+          animation-name: show-from-left;
+        }
+
+        &::backdrop {
+          animation: show-backdrop var(--show-duration, var(--sigvelo-motion-duration-presence))
+            ease reverse;
+        }
+      }
+    }
+
+    /* Full placement */
+    &[data-placement="full"] {
+      width: 100dvw;
+      max-width: 100dvw;
+      height: 100dvh;
+      max-height: 100dvh;
+      inset: 0;
+      border-radius: 0;
+
+      &.show {
+        animation: show-from-center var(--show-duration) ease;
+
+        &::backdrop {
+          animation: show-backdrop var(--show-duration, var(--sigvelo-motion-duration-presence))
+            ease;
+        }
+      }
+
+      &.hide {
+        animation: show-from-center var(--show-duration) ease reverse;
+
+        &::backdrop {
+          animation: show-backdrop var(--show-duration, var(--sigvelo-motion-duration-presence))
+            ease reverse;
+        }
+      }
+    }
+  }
+
+  /* Header */
+  #header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding-inline-start: var(--spacing);
+    padding-inline-end: calc(
+      var(--spacing) / 2
+    ); /* less spacing to better align buttons as actions */
+    padding-block-start: calc(var(--spacing) / 2);
+    padding-block-end: calc(var(--spacing) / 2);
+    gap: calc(var(--spacing) / 4);
+    background: var(--sigvelo-color-canvas);
+  }
+
+  #actions {
+    display: flex;
+    flex-wrap: wrap;
+    margin-inline-start: auto;
+  }
+
+  /* Body */
+  #body {
+    flex: 1 1 auto;
+    padding-inline: var(--spacing);
+    padding-block: calc(var(--spacing) / 2);
+    overflow: auto;
+    scrollbar-color: var(--sigvelo-color-neutral-bg) transparent;
+    scrollbar-width: thin;
+  }
+
+  /* Normalize spacing when the header and footer are absent */
+  #dialog:not(.has-header) #body {
+    padding-block-start: var(--spacing);
+  }
+
+  #dialog:not(.has-footer) #body {
+    padding-block-end: var(--spacing);
+  }
+
+  /* Footer */
+  #footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: end;
+    padding-inline: var(--spacing);
+    padding-block: var(--spacing);
+    gap: calc(var(--spacing) / 4);
+    background: var(--sigvelo-color-canvas);
+  }
+
+  @keyframes show-from-center {
+    from {
+      scale: 0.9;
+      opacity: 0;
+    }
+    to {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+
+  @keyframes show-from-top {
+    from {
+      translate: 0 -75%;
+      opacity: 0;
+    }
+    to {
+      translate: 0 0;
+      opacity: 1;
+    }
+  }
+
+  @keyframes show-from-bottom {
+    from {
+      translate: 0 75%;
+      opacity: 0;
+    }
+    to {
+      translate: 0 0;
+      opacity: 1;
+    }
+  }
+
+  @keyframes show-from-left {
+    from {
+      translate: -75%;
+      opacity: 0;
+    }
+    to {
+      translate: 0 0;
+      opacity: 1;
+    }
+  }
+
+  @keyframes show-from-right {
+    from {
+      translate: 75%;
+      opacity: 0;
+    }
+    to {
+      translate: 0 0;
+      opacity: 1;
+    }
+  }
+
+  @keyframes show-backdrop {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      scale: 1;
+    }
+    50% {
+      scale: var(--pulse-size);
+    }
+    100% {
+      scale: 1;
+    }
+  }
+
+  @keyframes shake {
+    0% {
+      -webkit-transform: translateX(0);
+    }
+    10% {
+      -webkit-transform: translateX(2%);
+    }
+    20% {
+      -webkit-transform: translateX(-2%);
+    }
+    30% {
+      -webkit-transform: translateX(2%);
+    }
+    40% {
+      -webkit-transform: translateX(-2%);
+    }
+    50% {
+      -webkit-transform: translateX(2%);
+    }
+    60% {
+      -webkit-transform: translateX(0);
+    }
+  }
+`;
+//#endregion
+//#region src/components/dialog/dialog.ts
+function setDialogTriggerAttributes(trigger, id, open) {
+	if (open === null) {
+		trigger.removeAttribute("aria-haspopup");
+		trigger.removeAttribute("aria-controls");
+		trigger.removeAttribute("aria-expanded");
+		return;
+	}
+	trigger.setAttribute("aria-haspopup", "dialog");
+	trigger.setAttribute("aria-controls", id);
+	trigger.setAttribute("aria-expanded", String(open));
+}
+function syncDialogTriggers(owner, open) {
+	if (!owner.id) return;
+	const root = owner.getRootNode();
+	for (const trigger of root.querySelectorAll("[data-dialog]")) {
+		const [command, id] = parseDelimitedTokens(trigger.getAttribute("data-dialog") || "");
+		if (command !== "open" || id !== owner.id) continue;
+		setDialogTriggerAttributes(trigger, owner.id, open);
+		if (stripElementPrefix(trigger.localName) === "button") customElements.whenDefined("sigvelo-button").then(async () => {
+			await trigger.updateComplete;
+			const nativeButton = trigger.shadowRoot?.querySelector("button");
+			if (nativeButton) {
+				const currentOpen = open === null ? null : Boolean(owner.open);
+				setDialogTriggerAttributes(nativeButton, owner.id, currentOpen);
+			}
+		});
+	}
+}
+/**
+* <sigvelo-dialog>
+*
+* @summary Displays modal content for alerts, confirmations, configurations, and other important interactions that
+* @tag sigvelo-dialog
+*  require immediate attention.
+* @documentation https://design-system.sigvelo.com/docs/components/dialog
+* @status stable
+* @since 1.0
+*
+* @slot - Content to place in the dialog's body. Note that, due to [this Chrome bug](https://issues.chromium.org/issues/40800208),
+*  you should wrap text nodes in an element to allow text selection in that browser.
+* @slot header - Content to place in the dialog's header.
+* @slot description - A concise description of the dialog's purpose, associated with the dialog for assistive technology.
+* @slot actions - Slot in one or more text buttons to customize the actions that appear in the dialog's header. Only
+*  available when the header is enabled.
+* @slot footer - Content to place in the dialog's footer.
+*
+* @event sigvelo-before-open - Emitted when the dialog is instructed to open but before it is shown. Calling
+*  `event.preventDefault()` will prevent the dialog from opening.
+* @event sigvelo-open - Emitted after the dialog has been opened and the show animation has completed.
+* @event sigvelo-before-close - Emitted when the dialog is dismissed. Calling `event.preventDefault()` will prevent the
+*  dialog from closing and show a brief animation.<br><br>You can check `event.detail.source` to see which element
+*  triggered the dialog to close, such as a button. If the source is the dialog itself, the user has pressed [[Escape]]
+*  or the dialog has been closed programmatically.
+* @event sigvelo-close - Emitted after the dialog has been closed and the hide animation has completed.
+*
+* @cssproperty [--height=fit-content] - The default height of the dialog. Note that dialogs shrink to fit as necessary.
+* @cssproperty [--show-duration=200ms] - The duration of the show/hide animation.
+* @cssproperty [--spacing=1.5rem] - The spacing to use throughout the dialog.
+* @cssproperty [--width=30rem] - The default width of the dialog. Note that dialogs shrink to fit as necessary.
+*
+* @csspart dialog - The internal `<dialog>` element.
+* @csspart body - The container that wraps the dialog's body.
+* @csspart header - The container that wraps the dialog's header. A flex container, by default.
+* @csspart footer - The container that wraps the dialog's footer. A flex container, by default.
+*
+* @cssstate open - Applied when the dialog is open.
+*
+* @example Default
+* ```html
+* <sigvelo-dialog id="dialog__overview">
+*   <h3 slot="header" style="font-size: 1.25rem; margin-block: 0;">
+*     Dialog
+*   </h3>
+*
+*   <p>Curious cats explore every corner of their domain, gracefully leaping from windowsills to countertops, always seeking new adventures.</p>
+*
+*   <sigvelo-button slot="footer" data-dialog="close" color="primary">
+*     Close
+*   </sigvelo-button>
+* </sigvelo-dialog>
+*
+* <sigvelo-button data-dialog="open dialog__overview">Show dialog</sigvelo-button>
+* ```
+*
+* @example Opening and closing dialogs
+* You can open and close a dialog programmatically by obtaining a reference to it and setting the `open` property to `true` or `false`, respectively.
+*
+* ```js
+* const dialog = document.querySelector('sigvelo-dialog');
+*
+* // Open the dialog
+* dialog.open = true;
+*
+* // Close the dialog
+* dialog.open = false;
+* ```
+*
+* However, it's often more convenient for a button to control the dialog _without_ additional scripting. In this case, you can add the `data-dialog="open *"` attribute to any button in the document, where `*` is the target dialog's `id`.
+*
+* Similarly, you can add `data-dialog="close"` to any button inside a dialog to close it.
+*
+* ```html
+* <sigvelo-dialog id="dialog__opening">
+*   <h3 slot="header" style="font-size: 1.25rem; margin-block: 0;">
+*     Opening and closing
+*   </h3>
+*
+*   <p>The button you clicked has <code>data-dialog="open <em>id</em>"</code> so it opens the dialog that has a matching ID.</p>
+*   <p>The button below has <code>data-dialog="close"</code> so clicking it will close the dialog.</p>
+*
+*   <sigvelo-button slot="footer" data-dialog="close" color="primary">
+*     Close
+*   </sigvelo-button>
+* </sigvelo-dialog>
+*
+* <sigvelo-button data-dialog="open dialog__opening">Show dialog</sigvelo-button>
+* ```
+*
+* @example With header
+* Place elements into the `header` slot to add content at the start of the dialog.
+*
+* ```html
+* <sigvelo-dialog id="dialog__header">
+*   <h3 slot="header" style="font-size: 1.25rem; margin-block: 0;">
+*     With header
+*   </h3>
+*
+*   <p>A playful kitten chases a red laser dot across the room, pouncing with determination while its tail twitches with excitement.</p>
+* </sigvelo-dialog>
+*
+* <sigvelo-button data-dialog="open dialog__header">Show dialog</sigvelo-button>
+* ```
+*
+* @example With footer
+* Place elements into the `footer` slot to add actions or other supplemental information at the end of the dialog.
+*
+* ```html
+* <sigvelo-dialog id="dialog__footer">
+*   <p>Gentle purrs fill the room as a content cat naps in a warm sunbeam, dreaming of chasing butterflies in the garden.</p>
+*
+*   <sigvelo-button slot="footer" data-dialog="close" color="primary">
+*     Close
+*   </sigvelo-button>
+* </sigvelo-dialog>
+*
+* <sigvelo-button data-dialog="open dialog__footer">Show dialog</sigvelo-button>
+* ```
+*
+* @example Disabling light dismissal
+* Clicking outside a dialog dismisses it by default. Set the `lightDismiss` property to `false` when an interaction must keep the dialog open until an explicit action is chosen.
+*
+* ```html
+* <sigvelo-dialog id="dialog__light">
+*   <h3 slot="header" style="font-size: 1.25rem; margin-block: 0;">
+*     Explicit dismissal
+*   </h3>
+*
+*   <p>Clicking outside the dialog will keep it open.</p>
+*
+*   <sigvelo-button slot="footer" data-dialog="close" color="primary">
+*     Close
+*   </sigvelo-button>
+* </sigvelo-dialog>
+*
+* <sigvelo-button data-dialog="open dialog__light">Show dialog</sigvelo-button>
+*
+* <script>
+*   document.getElementById('dialog__light').lightDismiss = false;
+* <\/script>
+* ```
+*
+*
+* @example Customizing actions
+* By default, a close button is provided as a single action in the dialog's header. You can add your own header actions by slotting text buttons into the `actions` slot. Note that adding your own actions will remove the default close button.
+*
+* ```html
+* <sigvelo-dialog id="dialog__customizing">
+*   <h3 slot="header" style="font-size: 1.25rem; margin-block: 0;">
+*     Actions
+*   </h3>
+*
+*   <sigvelo-button slot="actions" variant="ghost" icon-label="Settings">
+*     <sigvelo-icon name="settings"></sigvelo-icon>
+*   </sigvelo-button>
+*
+*   <sigvelo-button slot="actions" variant="ghost" icon-label="Open in a new window">
+*     <sigvelo-icon name="external-link"></sigvelo-icon>
+*   </sigvelo-button>
+*
+*   <sigvelo-button slot="actions" variant="ghost" icon-label="Close" data-dialog="close">
+*     <sigvelo-icon name="x"></sigvelo-icon>
+*   </sigvelo-button>
+*
+*   <p>Graceful cats leap through sunny windows. Their sleek whiskers twitch as they watch birds flutter past their perch.</p>
+*
+*   <sigvelo-button slot="footer" data-dialog="close" color="primary">
+*     Close
+*   </sigvelo-button>
+* </sigvelo-dialog>
+*
+* <sigvelo-button data-dialog="open dialog__customizing">Show dialog</sigvelo-button>
+* ```
+*
+* **Note:** The `actions` slot is only available when the header is enabled.
+*
+* @example Changing the placement
+* By default, dialogs appear in the center of the screen. To make the dialog slide in from the side of the screen like a drawer, set the `placement` attribute to `start`, `end`, `top`, `bottom`, or `full`.
+*
+* ```html
+* <sigvelo-dialog id="dialog__placement">
+*   <h3 slot="header" style="font-size: 1.25rem; margin-block: 0;">
+*     Placement
+*   </h3>
+*
+*   <p>Two mischievous cats prowl the kitchen countertops at midnight. Their glowing eyes search for forgotten treats and adventures.</p>
+*
+*   <sigvelo-button slot="footer" data-dialog="close" color="primary">
+*     Close
+*   </sigvelo-button>
+* </sigvelo-dialog>
+*
+* <div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
+*   <sigvelo-button data-placement="start">Start</sigvelo-button>
+*   <sigvelo-button data-placement="end">End</sigvelo-button>
+*   <sigvelo-button data-placement="top">Top</sigvelo-button>
+*   <sigvelo-button data-placement="bottom">Bottom</sigvelo-button>
+*   <sigvelo-button data-placement="full">Full</sigvelo-button>
+* </div>
+*
+* <script>
+*   const dialog = document.getElementById('dialog__placement');
+*   const container = dialog.nextElementSibling;
+*
+*   container.addEventListener('click', event => {
+*     if (event.target.closest('sigvelo-button')) {
+*       dialog.placement = event.target.getAttribute('data-placement');
+*       dialog.open = true;
+*     }
+*   });
+* <\/script>
+* ```
+*
+* **Note:** The `--width` custom property has no effect on dialogs with `top` and `bottom` placements. Similarly, the `--height` custom property has no effect on dialogs with `start` and `end` placements. Neither have an effect on dialogs with the `full` placement.
+*
+* @example Changing the size
+* The `--width` and `--height` custom properties control the default width and height of the dialog, respectively. On smaller screens, the dialog will shrink to fit the viewport.
+*
+* ```html
+* <sigvelo-dialog id="dialog__width" style="--width: 800px;">
+*   <h3 slot="header" style="font-size: 1.25rem; margin-block: 0;">
+*     Size
+*   </h3>
+*
+*   <p>Lobortis feugiat vivamus at augue eget arcu dictum. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Venenatis tellus in metus vulputate eu scelerisque felis.</p>
+*   <p>Et malesuada fames ac turpis egestas maecenas pharetra. Eu lobortis elementum nibh tellus molestie nunc. Nisl purus in mollis nunc sed id semper risus in. Ultricies mi quis hendrerit dolor magna eget. Venenatis cras sed felis eget velit aliquet sagittis.</p>
+*
+*   <sigvelo-button slot="footer" data-dialog="close" color="primary">
+*     Close
+*   </sigvelo-button>
+* </sigvelo-dialog>
+*
+* <sigvelo-button data-dialog="open dialog__width">Show dialog</sigvelo-button>
+* ```
+*
+* @example Scrolling dialogs
+* Dialogs with overflowing content will expand as the viewport allows before scrolling. By design, the header and footer will remain visible so users don't get confused and have an easy way to exit the dialog.
+*
+* ```html
+* <sigvelo-dialog id="dialog__scrolling" reset-scroll>
+*   <h3 slot="header" style="font-size: 1.25rem; margin-block: 0;">
+*     The Chronicles of Cats
+*   </h3>
+*
+*   <p>In the cozy corner of a sunlit room, a mysterious tabby cat named Shadow prowls with silent grace. Her whiskers twitch as she surveys her domain, a master of stealth and elegance. The morning light catches her fur, creating a mesmerizing dance of golden highlights across her perfectly groomed coat.</p>
+*   <p>Nearby, a mischievous kitten named Pixel bounces from cushion to cushion, defying gravity with each leap. His tiny paws barely touch one surface before he's airborne again, a blur of energy and enthusiasm. The curtains flutter in his wake, marking his path of playful destruction.</p>
+*   <p>In the kitchen windowsill, wise old Mr. Whiskers observes the garden with half-closed eyes. Birds flit past, catching his attention, but he merely twitches an ear – he's long past his bird-chasing days. Instead, he focuses on the important task of soaking up the warm sunshine, occasionally stretching out one paw in perfect contentment.</p>
+*   <p>Luna, the elegant Siamese, practices her opera on the highest shelf of the bookcase. Her melodious complaints about dinner being four hours away echo through the house. She's convinced that her humans simply don't understand the concept of proper feeding schedules – clearly, anytime is dinner time.</p>
+*   <p>Under the dining room table, partners in crime Socks and Mittens plot their next kitchen raid. Their synchronized tail swishes betray their excitement as they plan the optimal route to the treats stored in the highest cabinet. Their previous attempts may have failed, but cats are nothing if not persistent.</p>
+*   <p>Out in the garden, adventurous explorer Captain Whiskers maps uncharted territory behind the rose bushes. Each rustle of leaves could hide a potential adversary – or worse, a cucumber. He approaches each step with military precision, his battle-scarred ear twitching at every sound.</p>
+*   <p>Back inside, the newest family member, a tiny rescue named Pixel, discovers the joy of cardboard boxes. The expensive cat bed lies ignored as she claims a simple shipping box as her castle. Her purrs of contentment vibrate through the cardboard walls of her newfound kingdom.</p>
+*
+*   <sigvelo-button slot="footer" data-dialog="close" color="primary">
+*     Close
+*   </sigvelo-button>
+* </sigvelo-dialog>
+*
+* <sigvelo-button data-dialog="open dialog__scrolling">Show dialog</sigvelo-button>
+* ```
+*
+* **Note:** By default, dialogs will maintain their scroll position when closed. Use the `reset-scroll` attribute to tell the dialog to reset scrolling each time it's closed.
+*
+* @example Setting focus on open
+* To move focus to a specific form control when the dialog opens, add the `autofocus` attribute to it.
+*
+* ```html
+* <sigvelo-dialog id="dialog__focus">
+*   <h3 slot="header" style="font-size: 1.25rem; margin-block: 0;">
+*     Autofocus
+*   </h3>
+*
+*   <sigvelo-text-field autofocus placeholder="Enter something"></sigvelo-text-field>
+*
+*   <sigvelo-button slot="footer" data-dialog="close" color="primary">Close</sigvelo-button>
+* </sigvelo-dialog>
+*
+* <sigvelo-button data-dialog="open dialog__focus">Show dialog</sigvelo-button>
+* ```
+*
+* @example Preventing the dialog from closing
+* You can stop the dialog from closing by preventing the `sigvelo-before-close` event. The dialog will briefly animate to draw the user's attention.
+*
+* You can check `event.detail.source` to see which element triggered the dialog to close, such as a button. If the source is the dialog itself, you can assume that the user has pressed [[Escape]] or the dialog has been closed programmatically.
+*
+* ```html
+* <sigvelo-dialog id="dialog__prevent">
+*   <h3 slot="header" style="font-size: 1.25rem; margin-block: 0;">
+*     Try closing me
+*   </h3>
+*
+*   <p>Only clicking the last button will close this dialog. Not even the <kbd>Escape</kbd> key will save you!</p>
+*
+*   <sigvelo-button slot="footer" data-dialog="close">
+*     I won't close it
+*   </sigvelo-button>
+*
+*   <sigvelo-button slot="footer" data-dialog="close" color="primary">
+*     Only I will close it
+*   </sigvelo-button>
+* </sigvelo-dialog>
+*
+* <sigvelo-button data-dialog="open dialog__prevent">Show dialog</sigvelo-button>
+*
+* <script>
+*   const dialog = document.getElementById('dialog__prevent');
+*   const closeButton = dialog.querySelector('sigvelo-button:last-of-type');
+*
+*   dialog.addEventListener('sigvelo-before-close', event => {
+*     if (event.detail.source !== closeButton) {
+*       event.preventDefault();
+*     }
+*   });
+* <\/script>
+* ```
+*
+* **Note:** For best results, avoid using this feature unless something severe will result from the user not making an explicit choice, e.g. data loss.
+*
+* @example Styling dialogs
+* Dialogs come with a simple, minimal appearance. Feel free to customize them with your own styles. Here's a quick way to turn a dialog into an action sheet that works great on mobile devices.
+*
+* ```html
+* <sigvelo-dialog class="dialog__action-sheet" placement="bottom" id="dialog__styling">
+*   <sigvelo-button data-dialog="close" pill>Cancel</sigvelo-button>
+*   <sigvelo-button color="destructive" pill data-dialog="close">Delete</sigvelo-button>
+* </sigvelo-dialog>
+*
+* <sigvelo-button color="destructive" data-dialog="open dialog__styling">Delete</sigvelo-button>
+*
+* <style>
+*   sigvelo-dialog.dialog__action-sheet::part(dialog) {
+*     background: transparent;
+*     box-shadow: none;
+*   }
+*
+*   sigvelo-dialog.dialog__action-sheet::part(body) {
+*     display: flex;
+*     flex-direction: column;
+*     width: 100%;
+*     max-width: 500px;
+*     align-self: center;
+*     gap: 1rem;
+* }
+* </style>
+* ```
+*
+* @example Using dialogs with top-layer elements
+* This component uses the `<dialog>` element under the hood, which makes everything outside of it inert and blocks interaction with other top-layer elements such as popovers and toasts. The elements will be visible, but they cannot receive clicks or focus.
+*
+* One workaround is to place interactive top-layer elements _inside_ the dialog, which will prevent them from becoming inert when the dialog opens.
+*
+* ```html
+* <sigvelo-dialog>
+*   ...
+*   <sigvelo-button id="my-popover">Show popover</sigvelo-button>
+*
+*   <!-- This popover is inside the dialog and will be interactive -->
+*   <sigvelo-popover for="my-popover">
+*     ...
+*   </sigvelo-popover>
+* </sigvelo-dialog>
+* ```
+*/
+var SigveloDialog = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.open = false;
+		this.dialogRole = "dialog";
+		this.placement = "center";
+		this.lightDismiss = true;
+		this.resetScroll = false;
+		this.handleDocumentKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				this.requestClose(this);
+			}
+		};
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [hostStyles, dialog_styles_default];
+	}
+	/** @internal Keeps declarative dialog triggers synchronized with a dialog-like component. */
+	static syncTriggers(owner, open) {
+		syncDialogTriggers(owner, open);
+	}
+	firstUpdated() {
+		syncDialogTriggers(this, this.open);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		syncDialogTriggers(this, null);
+		document.removeEventListener("keydown", this.handleDocumentKeyDown);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open")) {
+			if (this.open && !this.dialog.open) this.show();
+			else if (this.dialog.open) this.requestClose(this.dialog);
+			syncDialogTriggers(this, this.open);
+		}
+	}
+	handleDialogCancel(event) {
+		event.preventDefault();
+		if (!this.dialog.classList.contains("hide")) this.requestClose(this.dialog);
+	}
+	handleDialogClick(event) {
+		const button = event.target.closest("[data-dialog=\"close\"]");
+		if (button) {
+			event.stopPropagation();
+			this.requestClose(button);
+		}
+	}
+	handleDialogPointerDown(event) {
+		if (event.target === this.dialog) if (this.lightDismiss) this.requestClose(this.dialog);
+		else animateWithClass(this.dialog, "pulse");
+	}
+	/** Call this to show the dialog. */
+	async show() {
+		const openEvent = new SigveloBeforeOpenEvent();
+		this.dispatchEvent(openEvent);
+		if (openEvent.defaultPrevented) {
+			this.open = false;
+			return;
+		}
+		document.addEventListener("keydown", this.handleDocumentKeyDown);
+		lockScrolling(this.dialog);
+		this.dialog.showModal();
+		this.customStates.set("open", true);
+		requestAnimationFrame(() => {
+			const elementToFocus = this.querySelector("[autofocus]");
+			if (elementToFocus && typeof elementToFocus.focus === "function") elementToFocus.focus();
+			else this.dialog.focus();
+		});
+		await animateWithClass(this.dialog, "show");
+		this.dispatchEvent(new SigveloOpenEvent());
+	}
+	/** Call this to ask the dialog to close. */
+	async requestClose(source) {
+		const closeEvent = new SigveloBeforeCloseEvent({ source });
+		this.dispatchEvent(closeEvent);
+		if (closeEvent.defaultPrevented) {
+			this.open = true;
+			animateWithClass(this.dialog, "shake");
+		} else {
+			document.removeEventListener("keydown", this.handleDocumentKeyDown);
+			unlockScrolling(this.dialog);
+			await animateWithClass(this.dialog, "hide");
+			if (this.resetScroll) this.scrollBodyTo({
+				top: 0,
+				left: 0
+			});
+			this.dialog.close();
+			this.open = false;
+			this.customStates.set("open", false);
+			this.dispatchEvent(new SigveloCloseEvent());
+		}
+	}
+	/** Scrolls the dialog's body to the specified position. */
+	scrollBodyTo(options) {
+		this.body.scrollTo(options);
+	}
+	render() {
+		return html`
+      <dialog
+        id="dialog"
+        part="dialog"
+        role=${this.dialogRole}
+        aria-label=${ifDefined(this.label)}
+        aria-labelledby=${!this.label && this.slotsWithContent.has("header") ? "header" : nothing}
+        aria-describedby=${this.description || this.slotsWithContent.has("description") ? "description" : nothing}
+        class=${classMap({
+			"has-header": this.slotsWithContent.has("header"),
+			"has-footer": this.slotsWithContent.has("footer")
+		})}
+        data-placement=${this.placement}
+        @click=${this.handleDialogClick}
+        @pointerdown=${this.handleDialogPointerDown}
+        @cancel=${this.handleDialogCancel}
+      >
+        ${this.whenSlotted("header", html`
+            <header id="header" part="header">
+              <slot name="header"></slot>
+              <slot id="actions" name="actions">
+                <sigvelo-button
+                  slot="header"
+                  variant="ghost"
+                  icon-label=${this.localize.term("close")}
+                  data-dialog="close"
+                >
+                  <sigvelo-icon library="system" name="x"></sigvelo-icon>
+                </sigvelo-button>
+              </slot>
+            </header>
+          `)}
+
+        <div id="body" part="body">
+          ${this.description || this.slotsWithContent.has("description") ? html`<div id="description" part="description">
+                <slot name="description">${this.description}</slot>
+              </div>` : nothing}
+          <slot></slot>
+        </div>
+
+        ${this.whenSlotted("footer", html` <footer id="footer" part="footer"><slot name="footer"></slot></footer> `)}
+      </dialog>
+    `;
+	}
+};
+__decorate([query("#body")], SigveloDialog.prototype, "body", void 0);
+__decorate([query("#dialog")], SigveloDialog.prototype, "dialog", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloDialog.prototype, "open", void 0);
+__decorate([property()], SigveloDialog.prototype, "label", void 0);
+__decorate([property()], SigveloDialog.prototype, "description", void 0);
+__decorate([property({ attribute: false })], SigveloDialog.prototype, "dialogRole", void 0);
+__decorate([property({ reflect: true })], SigveloDialog.prototype, "placement", void 0);
+__decorate([property({
+	attribute: "light-dismiss",
+	type: Boolean
+})], SigveloDialog.prototype, "lightDismiss", void 0);
+__decorate([property({
+	attribute: "reset-scroll",
+	type: Boolean
+})], SigveloDialog.prototype, "resetScroll", void 0);
+document.addEventListener("click", (event) => {
+	const dialogAttrEl = event.target.closest("[data-dialog]");
+	if (dialogAttrEl instanceof Element) {
+		const [command, id] = parseDelimitedTokens(dialogAttrEl.getAttribute("data-dialog") || "");
+		if (command === "open" && id?.length) {
+			const dialog = dialogAttrEl.getRootNode().getElementById(id);
+			const componentName = stripElementPrefix(dialog?.localName);
+			if (dialog && (componentName === "dialog" || componentName === "alert-dialog")) dialog.open = true;
+			else console.warn(`A dialog with an ID of "${id}" could not be found in this document.`);
+		}
+	}
+});
+document.addEventListener("pointerdown", () => {});
+customElements.define("sigvelo-dialog", SigveloDialog);
+//#endregion
+export { SigveloDialog as t };