@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Modal/src/Modal.js

@@ -0,0 +1,1434 @@
+var __legacyDecorateClassTS = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1;i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+// components/Modal/src/Modal.ts
+import"../../Button/src/Button.js";
+import { html as html2, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+
+// common/Base/Base.ts
+import { html, LitElement } from "lit";
+
+// common/helpers/define-element.ts
+var defineElement = (tag, ctor) => {
+  if (typeof customElements === "undefined")
+    return;
+  if (!customElements.get(tag))
+    customElements.define(tag, ctor);
+};
+
+// common/Base/Base.css
+import { css } from "lit";
+var styles = css`/* Base reset in @layer base ensures it comes before utilities in Tailwind v4 cascade
+   This prevents the reset from overriding component utility classes */
+@layer base {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(
+      --default-font-family,
+      var(--font-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  :host h1,
+  :host h2,
+  :host h3,
+  :host h4,
+  :host h5,
+  :host h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+`;
+var Base_default = styles;
+
+// common/Base/Base.ts
+class Base extends LitElement {
+  static styles = Base_default;
+  updateTheme(changedProperties, surface) {
+    if (changedProperties.has("surface")) {
+      if (surface) {
+        this.setAttribute("data-theme", surface);
+      } else {
+        this.removeAttribute("data-theme");
+      }
+    }
+  }
+  emit(name, detail, options = {}) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: options.cancelable ?? false
+    }));
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+defineElement("dsgn-base", Base);
+
+// common/helpers/enum-validator.ts
+var enumValidator = (propName, enumSet, candidateValue) => {
+  if (!enumSet.has(candidateValue)) {
+    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
+  }
+};
+
+// common/helpers/enum-creator.ts
+var enumCreator = (acceptableValues, propName, type, other = {}) => {
+  const acceptableValuesSet = new Set(acceptableValues);
+  return {
+    type,
+    hasChanged(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        enumValidator(propName, acceptableValuesSet, newValue);
+        return true;
+      }
+      return false;
+    },
+    ...other
+  };
+};
+
+// common/props/surface/surface.props.ts
+var surfaceValues = {
+  LIGHT: "light",
+  DARK: "dark"
+};
+var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
+
+// components/Modal/src/Modal.ts
+import {
+  buttonAppearanceValues,
+  buttonIconPositionValues
+} from "../../Button/src/Button.props.js";
+
+// components/Icon/src/icons/x.ts
+import { svg } from "lit";
+var x = svg`<path d="M18 6 6 18" /><path d="m6 6 12 12" />`;
+// components/Modal/src/Modal.css
+import { css as css2 } from "lit";
+var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+    --spacing: 0.25rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --font-weight-semibold: 600;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --duration-moderate: var(--dsgn-src-duration-moderate, 240ms);
+    --duration-quick: var(--dsgn-src-duration-quick, 180ms);
+    --ease-emphasized: var(--dsgn-src-ease-emphasized, cubic-bezier(0.16, 1, 0.3, 1));
+    --radius-surface: var(--dsgn-src-radius-surface, 1rem);
+    --color-accent: inherit;
+    --color-focus: inherit;
+    --color-surface-elevated: inherit;
+    --color-text-primary: inherit;
+    --color-text-secondary: inherit;
+    --shadow-card: inherit;
+    --animate-fade-in: fade-in var(--duration-moderate) var(--ease-emphasized)
+    both;
+    --animate-fade-out: fade-out var(--duration-quick) var(--ease-emphasized) both;
+    --animate-scale-in: scale-in var(--duration-moderate) var(--ease-emphasized)
+    both;
+    --animate-scale-out: scale-out var(--duration-quick) var(--ease-emphasized)
+    both;
+    --animate-slide-in-left: slide-in-left var(--duration-moderate)
+    var(--ease-emphasized) both;
+    --animate-slide-out-left: slide-out-left var(--duration-quick)
+    var(--ease-emphasized) both;
+    --animate-slide-in-right: slide-in-right var(--duration-moderate)
+    var(--ease-emphasized) both;
+    --animate-slide-out-right: slide-out-right var(--duration-quick)
+    var(--ease-emphasized) both;
+    --animate-slide-in-top: slide-in-top var(--duration-moderate)
+    var(--ease-emphasized) both;
+    --animate-slide-out-top: slide-out-top var(--duration-quick)
+    var(--ease-emphasized) both;
+    --animate-slide-in-bottom: slide-in-bottom var(--duration-moderate)
+    var(--ease-emphasized) both;
+    --animate-slide-out-bottom: slide-out-bottom var(--duration-quick)
+    var(--ease-emphasized) both;
+  }
+}
+@layer utilities {
+  .collapse {
+    visibility: collapse;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .static {
+    position: static;
+  }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .box-border {
+    box-sizing: border-box;
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .flex-auto {
+    flex: auto;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .overscroll-contain {
+    overscroll-behavior: contain;
+  }
+  .rounded-\\[var\\(--radius-surface\\)\\] {
+    border-radius: var(--radius-surface);
+  }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .bg-surface-elevated {
+    background-color: var(--color-surface-elevated);
+  }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .text-text-secondary {
+    color: var(--color-text-secondary);
+  }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\\[var\\(--shadow-card\\)\\,0_0_18px_color-mix\\(in_oklab\\,var\\(--color-accent\\)_14\\.625\\%\\,transparent\\)\\] {
+    --tw-shadow: var(--shadow-card), 0 0 18px var(--tw-shadow-color, color-mix(in srgb,inherit 14.625%,transparent));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: var(--shadow-card), 0 0 18px var(--tw-shadow-color, color-mix(in oklab,var(--color-accent) 14.625%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .\\[--dsgn-modal-gutter\\:1rem\\] {
+    --dsgn-modal-gutter: 1rem;
+  }
+  .\\[--dsgn-modal-size\\:32rem\\] {
+    --dsgn-modal-size: 32rem;
+  }
+  .backdrop\\:bg-\\[rgb\\(2_6_23\\/0\\.6\\)\\] {
+    &::backdrop {
+      background-color: rgb(2 6 23/0.6);
+    }
+  }
+  .backdrop\\:backdrop-blur-\\[12px\\] {
+    &::backdrop {
+      --tw-backdrop-blur: blur(12px);
+      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    }
+  }
+  .open\\:flex {
+    &:is([open], :popover-open, :open) {
+      display: flex;
+    }
+  }
+  .focus-visible\\:outline-2 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .focus-visible\\:outline-offset-2 {
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+  .focus-visible\\:outline-focus {
+    &:focus-visible {
+      outline-color: var(--color-focus);
+    }
+  }
+  .data-\\[placement\\=bottom\\]\\:top-auto {
+    &[data-placement="bottom"] {
+      top: auto;
+    }
+  }
+  .data-\\[placement\\=bottom\\]\\:right-0 {
+    &[data-placement="bottom"] {
+      right: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=bottom\\]\\:bottom-0 {
+    &[data-placement="bottom"] {
+      bottom: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=bottom\\]\\:left-0 {
+    &[data-placement="bottom"] {
+      left: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=bottom\\]\\:m-0 {
+    &[data-placement="bottom"] {
+      margin: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=bottom\\]\\:max-h-\\[min\\(var\\(--dsgn-modal-size\\)\\,calc\\(100dvh-var\\(--dsgn-modal-gutter\\)\\)\\)\\] {
+    &[data-placement="bottom"] {
+      max-height: min(var(--dsgn-modal-size), calc(100dvh - var(--dsgn-modal-gutter)));
+    }
+  }
+  .data-\\[placement\\=bottom\\]\\:w-screen {
+    &[data-placement="bottom"] {
+      width: 100vw;
+    }
+  }
+  .data-\\[placement\\=bottom\\]\\:max-w-screen {
+    &[data-placement="bottom"] {
+      max-width: 100vw;
+    }
+  }
+  .data-\\[placement\\=bottom\\]\\:rounded-ee-none {
+    &[data-placement="bottom"] {
+      border-end-end-radius: 0;
+    }
+  }
+  .data-\\[placement\\=bottom\\]\\:rounded-es-none {
+    &[data-placement="bottom"] {
+      border-end-start-radius: 0;
+    }
+  }
+  .data-\\[placement\\=center\\]\\:m-auto {
+    &[data-placement="center"] {
+      margin: auto;
+    }
+  }
+  .data-\\[placement\\=center\\]\\:max-h-\\[calc\\(100dvh-2\\*var\\(--dsgn-modal-gutter\\)\\)\\] {
+    &[data-placement="center"] {
+      max-height: calc(100dvh - 2 * var(--dsgn-modal-gutter));
+    }
+  }
+  .data-\\[placement\\=center\\]\\:w-\\[min\\(var\\(--dsgn-modal-size\\)\\,calc\\(100vw-2\\*var\\(--dsgn-modal-gutter\\)\\)\\)\\] {
+    &[data-placement="center"] {
+      width: min(var(--dsgn-modal-size), calc(100vw - 2 * var(--dsgn-modal-gutter)));
+    }
+  }
+  .data-\\[placement\\=left\\]\\:top-0 {
+    &[data-placement="left"] {
+      top: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=left\\]\\:right-auto {
+    &[data-placement="left"] {
+      right: auto;
+    }
+  }
+  .data-\\[placement\\=left\\]\\:bottom-0 {
+    &[data-placement="left"] {
+      bottom: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=left\\]\\:left-0 {
+    &[data-placement="left"] {
+      left: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=left\\]\\:m-0 {
+    &[data-placement="left"] {
+      margin: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=left\\]\\:h-dvh {
+    &[data-placement="left"] {
+      height: 100dvh;
+    }
+  }
+  .data-\\[placement\\=left\\]\\:max-h-dvh {
+    &[data-placement="left"] {
+      max-height: 100dvh;
+    }
+  }
+  .data-\\[placement\\=left\\]\\:w-\\[min\\(var\\(--dsgn-modal-size\\)\\,calc\\(100vw-var\\(--dsgn-modal-gutter\\)\\)\\)\\] {
+    &[data-placement="left"] {
+      width: min(var(--dsgn-modal-size), calc(100vw - var(--dsgn-modal-gutter)));
+    }
+  }
+  .data-\\[placement\\=left\\]\\:rounded-ss-none {
+    &[data-placement="left"] {
+      border-start-start-radius: 0;
+    }
+  }
+  .data-\\[placement\\=left\\]\\:rounded-es-none {
+    &[data-placement="left"] {
+      border-end-start-radius: 0;
+    }
+  }
+  .data-\\[placement\\=right\\]\\:top-0 {
+    &[data-placement="right"] {
+      top: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=right\\]\\:right-0 {
+    &[data-placement="right"] {
+      right: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=right\\]\\:bottom-0 {
+    &[data-placement="right"] {
+      bottom: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=right\\]\\:left-auto {
+    &[data-placement="right"] {
+      left: auto;
+    }
+  }
+  .data-\\[placement\\=right\\]\\:m-0 {
+    &[data-placement="right"] {
+      margin: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=right\\]\\:h-dvh {
+    &[data-placement="right"] {
+      height: 100dvh;
+    }
+  }
+  .data-\\[placement\\=right\\]\\:max-h-dvh {
+    &[data-placement="right"] {
+      max-height: 100dvh;
+    }
+  }
+  .data-\\[placement\\=right\\]\\:w-\\[min\\(var\\(--dsgn-modal-size\\)\\,calc\\(100vw-var\\(--dsgn-modal-gutter\\)\\)\\)\\] {
+    &[data-placement="right"] {
+      width: min(var(--dsgn-modal-size), calc(100vw - var(--dsgn-modal-gutter)));
+    }
+  }
+  .data-\\[placement\\=right\\]\\:rounded-se-none {
+    &[data-placement="right"] {
+      border-start-end-radius: 0;
+    }
+  }
+  .data-\\[placement\\=right\\]\\:rounded-ee-none {
+    &[data-placement="right"] {
+      border-end-end-radius: 0;
+    }
+  }
+  .data-\\[placement\\=top\\]\\:top-0 {
+    &[data-placement="top"] {
+      top: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=top\\]\\:right-0 {
+    &[data-placement="top"] {
+      right: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=top\\]\\:bottom-auto {
+    &[data-placement="top"] {
+      bottom: auto;
+    }
+  }
+  .data-\\[placement\\=top\\]\\:left-0 {
+    &[data-placement="top"] {
+      left: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=top\\]\\:m-0 {
+    &[data-placement="top"] {
+      margin: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[placement\\=top\\]\\:max-h-\\[min\\(var\\(--dsgn-modal-size\\)\\,calc\\(100dvh-var\\(--dsgn-modal-gutter\\)\\)\\)\\] {
+    &[data-placement="top"] {
+      max-height: min(var(--dsgn-modal-size), calc(100dvh - var(--dsgn-modal-gutter)));
+    }
+  }
+  .data-\\[placement\\=top\\]\\:w-screen {
+    &[data-placement="top"] {
+      width: 100vw;
+    }
+  }
+  .data-\\[placement\\=top\\]\\:max-w-screen {
+    &[data-placement="top"] {
+      max-width: 100vw;
+    }
+  }
+  .data-\\[placement\\=top\\]\\:rounded-ss-none {
+    &[data-placement="top"] {
+      border-start-start-radius: 0;
+    }
+  }
+  .data-\\[placement\\=top\\]\\:rounded-se-none {
+    &[data-placement="top"] {
+      border-start-end-radius: 0;
+    }
+  }
+  .data-\\[size\\=full\\]\\:inset-0 {
+    &[data-size="full"] {
+      inset: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[size\\=full\\]\\:m-0 {
+    &[data-size="full"] {
+      margin: calc(var(--spacing) * 0);
+    }
+  }
+  .data-\\[size\\=full\\]\\:h-dvh {
+    &[data-size="full"] {
+      height: 100dvh;
+    }
+  }
+  .data-\\[size\\=full\\]\\:max-h-dvh {
+    &[data-size="full"] {
+      max-height: 100dvh;
+    }
+  }
+  .data-\\[size\\=full\\]\\:w-screen {
+    &[data-size="full"] {
+      width: 100vw;
+    }
+  }
+  .data-\\[size\\=full\\]\\:max-w-screen {
+    &[data-size="full"] {
+      max-width: 100vw;
+    }
+  }
+  .data-\\[size\\=full\\]\\:rounded-none {
+    &[data-size="full"] {
+      border-radius: 0;
+    }
+  }
+  .data-\\[size\\=lg\\]\\:\\[--dsgn-modal-size\\:42rem\\] {
+    &[data-size="lg"] {
+      --dsgn-modal-size: 42rem;
+    }
+  }
+  .data-\\[size\\=md\\]\\:\\[--dsgn-modal-size\\:32rem\\] {
+    &[data-size="md"] {
+      --dsgn-modal-size: 32rem;
+    }
+  }
+  .data-\\[size\\=sm\\]\\:\\[--dsgn-modal-size\\:24rem\\] {
+    &[data-size="sm"] {
+      --dsgn-modal-size: 24rem;
+    }
+  }
+  .data-\\[size\\=xl\\]\\:\\[--dsgn-modal-size\\:56rem\\] {
+    &[data-size="xl"] {
+      --dsgn-modal-size: 56rem;
+    }
+  }
+  .data-\\[state\\=closed\\]\\:backdrop\\:animate-fade-out {
+    &[data-state="closed"] {
+      &::backdrop {
+        animation: var(--animate-fade-out);
+      }
+    }
+  }
+  .data-\\[motion\\=bottom\\]\\:data-\\[state\\=closed\\]\\:animate-slide-out-bottom {
+    &[data-motion="bottom"] {
+      &[data-state="closed"] {
+        animation: var(--animate-slide-out-bottom);
+      }
+    }
+  }
+  .data-\\[motion\\=center\\]\\:data-\\[state\\=closed\\]\\:animate-scale-out {
+    &[data-motion="center"] {
+      &[data-state="closed"] {
+        animation: var(--animate-scale-out);
+      }
+    }
+  }
+  .data-\\[motion\\=left\\]\\:data-\\[state\\=closed\\]\\:animate-slide-out-left {
+    &[data-motion="left"] {
+      &[data-state="closed"] {
+        animation: var(--animate-slide-out-left);
+      }
+    }
+  }
+  .data-\\[motion\\=none\\]\\:data-\\[state\\=closed\\]\\:animate-fade-out {
+    &[data-motion="none"] {
+      &[data-state="closed"] {
+        animation: var(--animate-fade-out);
+      }
+    }
+  }
+  .data-\\[motion\\=right\\]\\:data-\\[state\\=closed\\]\\:animate-slide-out-right {
+    &[data-motion="right"] {
+      &[data-state="closed"] {
+        animation: var(--animate-slide-out-right);
+      }
+    }
+  }
+  .data-\\[motion\\=top\\]\\:data-\\[state\\=closed\\]\\:animate-slide-out-top {
+    &[data-motion="top"] {
+      &[data-state="closed"] {
+        animation: var(--animate-slide-out-top);
+      }
+    }
+  }
+  .data-\\[state\\=open\\]\\:backdrop\\:animate-fade-in {
+    &[data-state="open"] {
+      &::backdrop {
+        animation: var(--animate-fade-in);
+      }
+    }
+  }
+  .data-\\[motion\\=bottom\\]\\:data-\\[state\\=open\\]\\:animate-slide-in-bottom {
+    &[data-motion="bottom"] {
+      &[data-state="open"] {
+        animation: var(--animate-slide-in-bottom);
+      }
+    }
+  }
+  .data-\\[motion\\=center\\]\\:data-\\[state\\=open\\]\\:animate-scale-in {
+    &[data-motion="center"] {
+      &[data-state="open"] {
+        animation: var(--animate-scale-in);
+      }
+    }
+  }
+  .data-\\[motion\\=left\\]\\:data-\\[state\\=open\\]\\:animate-slide-in-left {
+    &[data-motion="left"] {
+      &[data-state="open"] {
+        animation: var(--animate-slide-in-left);
+      }
+    }
+  }
+  .data-\\[motion\\=none\\]\\:data-\\[state\\=open\\]\\:animate-fade-in {
+    &[data-motion="none"] {
+      &[data-state="open"] {
+        animation: var(--animate-fade-in);
+      }
+    }
+  }
+  .data-\\[motion\\=right\\]\\:data-\\[state\\=open\\]\\:animate-slide-in-right {
+    &[data-motion="right"] {
+      &[data-state="open"] {
+        animation: var(--animate-slide-in-right);
+      }
+    }
+  }
+  .data-\\[motion\\=top\\]\\:data-\\[state\\=open\\]\\:animate-slide-in-top {
+    &[data-motion="top"] {
+      &[data-state="open"] {
+        animation: var(--animate-slide-in-top);
+      }
+    }
+  }
+  .motion-reduce\\:data-\\[motion\\]\\:data-\\[state\\=closed\\]\\:animate-fade-out {
+    @media (prefers-reduced-motion: reduce) {
+      &[data-motion] {
+        &[data-state="closed"] {
+          animation: var(--animate-fade-out);
+        }
+      }
+    }
+  }
+  .motion-reduce\\:data-\\[motion\\]\\:data-\\[state\\=open\\]\\:animate-fade-in {
+    @media (prefers-reduced-motion: reduce) {
+      &[data-motion] {
+        &[data-state="open"] {
+          animation: var(--animate-fade-in);
+        }
+      }
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes scale-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: none;
+  }
+}
+@keyframes slide-out-left {
+  from {
+    transform: none;
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: none;
+  }
+}
+@keyframes slide-out-right {
+  from {
+    transform: none;
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes slide-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: none;
+  }
+}
+@keyframes slide-out-top {
+  from {
+    transform: none;
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+@keyframes slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: none;
+  }
+}
+@keyframes slide-out-bottom {
+  from {
+    transform: none;
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-outline-style: solid;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Modal_default = styles2;
+
+// components/Modal/src/Modal.props.ts
+var modalPlacementValues = {
+  CENTER: "center",
+  LEFT: "left",
+  RIGHT: "right",
+  TOP: "top",
+  BOTTOM: "bottom"
+};
+var modalPlacementProps = enumCreator(Object.values(modalPlacementValues), "placement", String, { reflect: true });
+var modalMotionValues = {
+  INHERIT: "inherit",
+  NONE: "none",
+  CENTER: "center",
+  LEFT: "left",
+  RIGHT: "right",
+  TOP: "top",
+  BOTTOM: "bottom"
+};
+var modalMotionProps = enumCreator(Object.values(modalMotionValues), "motion", String, { reflect: true });
+var modalSizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl",
+  FULL: "full"
+};
+var modalSizeProps = enumCreator(Object.values(modalSizeValues), "size", String, { reflect: true });
+var modalCloseReasonValues = {
+  API: "api",
+  ESCAPE: "escape",
+  BACKDROP: "backdrop",
+  CLOSE_CONTROL: "close-control"
+};
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// components/Modal/src/Modal.styles.ts
+import { css as css3 } from "lit";
+var hostStyles = css3`
+  /* The host is a passive wrapper; the dialog is promoted to the top layer. */
+  :host {
+    display: contents;
+  }
+`;
+var dialogClasses = () => clsx_default("box-border", "p-0", "border-0", "overflow-hidden", "flex-col", "open:flex", "text-text-primary", "bg-surface-elevated", "rounded-[var(--radius-surface)]", "shadow-[var(--shadow-card),0_0_18px_color-mix(in_oklab,var(--color-accent)_14.625%,transparent)]", "focus-visible:outline-2", "focus-visible:outline-focus", "focus-visible:outline-offset-2", "[--dsgn-modal-size:32rem]", "[--dsgn-modal-gutter:1rem]", "data-[size=sm]:[--dsgn-modal-size:24rem]", "data-[size=md]:[--dsgn-modal-size:32rem]", "data-[size=lg]:[--dsgn-modal-size:42rem]", "data-[size=xl]:[--dsgn-modal-size:56rem]", "data-[placement=center]:m-auto", "data-[placement=center]:w-[min(var(--dsgn-modal-size),calc(100vw-2*var(--dsgn-modal-gutter)))]", "data-[placement=center]:max-h-[calc(100dvh-2*var(--dsgn-modal-gutter))]", "data-[placement=left]:m-0", "data-[placement=left]:top-0", "data-[placement=left]:bottom-0", "data-[placement=left]:h-dvh", "data-[placement=left]:max-h-dvh", "data-[placement=left]:w-[min(var(--dsgn-modal-size),calc(100vw-var(--dsgn-modal-gutter)))]", "data-[placement=left]:left-0", "data-[placement=left]:right-auto", "data-[placement=left]:rounded-ss-none", "data-[placement=left]:rounded-es-none", "data-[placement=right]:m-0", "data-[placement=right]:top-0", "data-[placement=right]:bottom-0", "data-[placement=right]:h-dvh", "data-[placement=right]:max-h-dvh", "data-[placement=right]:w-[min(var(--dsgn-modal-size),calc(100vw-var(--dsgn-modal-gutter)))]", "data-[placement=right]:left-auto", "data-[placement=right]:right-0", "data-[placement=right]:rounded-se-none", "data-[placement=right]:rounded-ee-none", "data-[placement=top]:m-0", "data-[placement=top]:left-0", "data-[placement=top]:right-0", "data-[placement=top]:w-screen", "data-[placement=top]:max-w-screen", "data-[placement=top]:max-h-[min(var(--dsgn-modal-size),calc(100dvh-var(--dsgn-modal-gutter)))]", "data-[placement=top]:top-0", "data-[placement=top]:bottom-auto", "data-[placement=top]:rounded-ss-none", "data-[placement=top]:rounded-se-none", "data-[placement=bottom]:m-0", "data-[placement=bottom]:left-0", "data-[placement=bottom]:right-0", "data-[placement=bottom]:w-screen", "data-[placement=bottom]:max-w-screen", "data-[placement=bottom]:max-h-[min(var(--dsgn-modal-size),calc(100dvh-var(--dsgn-modal-gutter)))]", "data-[placement=bottom]:top-auto", "data-[placement=bottom]:bottom-0", "data-[placement=bottom]:rounded-es-none", "data-[placement=bottom]:rounded-ee-none", "data-[size=full]:inset-0", "data-[size=full]:m-0", "data-[size=full]:w-screen", "data-[size=full]:max-w-screen", "data-[size=full]:h-dvh", "data-[size=full]:max-h-dvh", "data-[size=full]:rounded-none", "backdrop:bg-[rgb(2_6_23/0.6)]", "backdrop:backdrop-blur-[12px]", "data-[state=open]:backdrop:animate-fade-in", "data-[state=closed]:backdrop:animate-fade-out", "data-[motion=center]:data-[state=open]:animate-scale-in", "data-[motion=center]:data-[state=closed]:animate-scale-out", "data-[motion=left]:data-[state=open]:animate-slide-in-left", "data-[motion=left]:data-[state=closed]:animate-slide-out-left", "data-[motion=right]:data-[state=open]:animate-slide-in-right", "data-[motion=right]:data-[state=closed]:animate-slide-out-right", "data-[motion=top]:data-[state=open]:animate-slide-in-top", "data-[motion=top]:data-[state=closed]:animate-slide-out-top", "data-[motion=bottom]:data-[state=open]:animate-slide-in-bottom", "data-[motion=bottom]:data-[state=closed]:animate-slide-out-bottom", "data-[motion=none]:data-[state=open]:animate-fade-in", "data-[motion=none]:data-[state=closed]:animate-fade-out", "motion-reduce:data-[motion]:data-[state=open]:animate-fade-in", "motion-reduce:data-[motion]:data-[state=closed]:animate-fade-out");
+var panelClasses = () => clsx_default("flex", "flex-col", "flex-auto", "min-h-0", "font-sans");
+var headerClasses = (visible) => clsx_default("shrink-0", "items-start", "justify-between", "gap-4", "px-6", "pt-6", "pb-2", visible ? "flex" : "hidden");
+var headingClasses = () => clsx_default("min-w-0", "text-lg", "font-semibold", "text-text-primary");
+var closeSlotClasses = () => clsx_default("shrink-0");
+var descriptionClasses = (visible) => clsx_default("shrink-0", "px-6", "pt-2", "pb-2", "text-sm", "text-text-secondary", visible ? "block" : "hidden");
+var bodyClasses = () => clsx_default("flex-1", "min-h-0", "overflow-y-auto", "overscroll-contain", "px-6", "py-4", "text-text-primary");
+var footerClasses = (visible) => clsx_default("shrink-0", "flex-wrap", "items-center", "justify-end", "gap-3", "px-6", "pt-4", "pb-6", visible ? "flex" : "hidden");
+
+// components/Modal/src/Modal.ts
+var DEFAULT_CLOSE_LABEL = "Close";
+var deepActiveElement = () => {
+  let active = document.activeElement;
+  while (active?.shadowRoot?.activeElement) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active;
+};
+var scrollLockCount = 0;
+var restoreBodyOverflow = "";
+var lockBodyScroll = () => {
+  if (typeof document === "undefined")
+    return;
+  if (scrollLockCount === 0) {
+    restoreBodyOverflow = document.body.style.overflow;
+    document.body.style.setProperty("overflow", "hidden");
+  }
+  scrollLockCount += 1;
+};
+var unlockBodyScroll = () => {
+  if (typeof document === "undefined" || scrollLockCount === 0)
+    return;
+  scrollLockCount -= 1;
+  if (scrollLockCount !== 0)
+    return;
+  if (restoreBodyOverflow) {
+    document.body.style.setProperty("overflow", restoreBodyOverflow);
+  } else {
+    document.body.style.removeProperty("overflow");
+  }
+};
+var whenAnimationsSettle = async (dialog) => {
+  if (typeof dialog.getAnimations !== "function")
+    return;
+  const animations = dialog.getAnimations({ subtree: true }).filter((animation) => {
+    const effect = animation.effect;
+    return effect?.target === dialog;
+  });
+  if (animations.length === 0)
+    return;
+  await Promise.allSettled(animations.map((animation) => animation.finished));
+};
+var isInTopLayer = (dialog) => {
+  try {
+    return dialog.matches(":modal");
+  } catch {
+    return dialog.open;
+  }
+};
+
+class Modal extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.open = false;
+    this.placement = modalPlacementValues.CENTER;
+    this.motion = modalMotionValues.INHERIT;
+    this.size = modalSizeValues.MD;
+    this.ariaLabel = "";
+    this.closeLabel = DEFAULT_CLOSE_LABEL;
+    this.noCloseControl = false;
+    this.noBackdropDismiss = false;
+    this.noEscapeDismiss = false;
+    this._closing = false;
+    this._hasHeading = false;
+    this._hasDescription = false;
+    this._hasFooter = false;
+    this._hasCloseControl = false;
+    this._closeReason = modalCloseReasonValues.API;
+    this._returnValue = "";
+    this._previouslyFocused = null;
+    this._pointerDownOnBackdrop = false;
+    this._holdsScrollLock = false;
+  }
+  static styles = [Base.styles, Modal_default, hostStyles];
+  get _hasCloseAffordance() {
+    return this._hasCloseControl || !this.noCloseControl;
+  }
+  get _motionOrigin() {
+    return this.motion === modalMotionValues.INHERIT ? this.placement : this.motion;
+  }
+  show() {
+    this.open = true;
+  }
+  close(returnValue = "") {
+    if (!this.open)
+      return;
+    this._closeReason = modalCloseReasonValues.API;
+    this._returnValue = returnValue;
+    this.open = false;
+  }
+  requestClose(reason = modalCloseReasonValues.API) {
+    if (!this.open)
+      return false;
+    const allowed = this.emit("dsgn-modal-request-close", { reason }, { cancelable: true });
+    if (!allowed)
+      return false;
+    this._closeReason = reason;
+    this._returnValue = "";
+    this.open = false;
+    return true;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.open) {
+      this.updateComplete.then(() => this._syncDialogState());
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._releaseScrollLock();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+    if (changedProperties.has("open")) {
+      this._syncDialogState();
+    }
+  }
+  _syncDialogState() {
+    const dialog = this._dialog;
+    if (!dialog)
+      return;
+    if (this.open) {
+      if (isInTopLayer(dialog))
+        return;
+      this._openDialog(dialog);
+    } else if (dialog.open) {
+      this._runCloseSequence(dialog);
+    }
+  }
+  _openDialog(dialog) {
+    if (dialog.open)
+      dialog.close();
+    this._closing = false;
+    this._previouslyFocused = deepActiveElement();
+    dialog.returnValue = "";
+    dialog.showModal();
+    this._acquireScrollLock();
+    this._focusInitialElement(dialog);
+    this.emit("dsgn-modal-open");
+  }
+  async _runCloseSequence(dialog) {
+    if (this._closing)
+      return;
+    this._closing = true;
+    await this.updateComplete;
+    await whenAnimationsSettle(dialog);
+    if (!dialog.open || this.open) {
+      this._closing = false;
+      return;
+    }
+    dialog.close(this._returnValue);
+  }
+  _focusInitialElement(dialog) {
+    const target = this.querySelector("[autofocus]") ?? dialog.querySelector("[autofocus]") ?? dialog;
+    target.focus();
+  }
+  _restoreFocus() {
+    const target = this._previouslyFocused;
+    this._previouslyFocused = null;
+    if (target?.isConnected)
+      target.focus();
+  }
+  _acquireScrollLock() {
+    if (this._holdsScrollLock)
+      return;
+    this._holdsScrollLock = true;
+    lockBodyScroll();
+  }
+  _releaseScrollLock() {
+    if (!this._holdsScrollLock)
+      return;
+    this._holdsScrollLock = false;
+    unlockBodyScroll();
+  }
+  _handleNativeClose() {
+    if (this._dialog?.open)
+      return;
+    this._closing = false;
+    this.open = false;
+    this._releaseScrollLock();
+    this._restoreFocus();
+    this.emit("dsgn-modal-close", {
+      reason: this._closeReason,
+      returnValue: this._dialog?.returnValue ?? ""
+    });
+    this._closeReason = modalCloseReasonValues.API;
+    this._returnValue = "";
+  }
+  _handleCancel(event) {
+    event.preventDefault();
+    if (this.noEscapeDismiss)
+      return;
+    this.requestClose(modalCloseReasonValues.ESCAPE);
+  }
+  _handlePointerDown(event) {
+    this._pointerDownOnBackdrop = event.target === this._dialog;
+  }
+  _handleDialogClick(event) {
+    const startedOnBackdrop = this._pointerDownOnBackdrop;
+    this._pointerDownOnBackdrop = false;
+    if (this.noBackdropDismiss)
+      return;
+    if (!startedOnBackdrop || event.target !== this._dialog)
+      return;
+    this.requestClose(modalCloseReasonValues.BACKDROP);
+  }
+  _handleCloseControlClick() {
+    this.requestClose(modalCloseReasonValues.CLOSE_CONTROL);
+  }
+  _handleSlotChange(event) {
+    const slot = event.target;
+    const filled = slot.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+    switch (slot.name) {
+      case "heading":
+        this._hasHeading = filled;
+        break;
+      case "description":
+        this._hasDescription = filled;
+        break;
+      case "footer":
+        this._hasFooter = filled;
+        break;
+      case "close":
+        this._hasCloseControl = filled;
+        break;
+    }
+  }
+  render() {
+    return html2`
+      <dialog
+        part="dialog"
+        class=${dialogClasses()}
+        tabindex="-1"
+        data-placement=${this.placement}
+        data-motion=${this._motionOrigin}
+        data-size=${this.size}
+        data-state=${this._closing ? "closed" : "open"}
+        aria-label=${!this._hasHeading && this.ariaLabel ? this.ariaLabel : nothing}
+        aria-labelledby=${this._hasHeading ? "modal-heading" : nothing}
+        aria-describedby=${this._hasDescription ? "modal-description" : nothing}
+        @cancel=${this._handleCancel}
+        @close=${this._handleNativeClose}
+        @mousedown=${this._handlePointerDown}
+        @click=${this._handleDialogClick}
+      >
+        <div class=${panelClasses()}>
+          <header
+            class=${headerClasses(this._hasHeading || this._hasCloseAffordance)}
+          >
+            <div id="modal-heading" class=${headingClasses()}>
+              <slot name="heading" @slotchange=${this._handleSlotChange}></slot>
+            </div>
+            <div
+              class=${closeSlotClasses()}
+              @click=${this._handleCloseControlClick}
+            >
+              <slot name="close" @slotchange=${this._handleSlotChange}>
+                ${this.noCloseControl ? nothing : html2`
+                      <dsgn-button
+                        part="close-button"
+                        .surface=${this.surface}
+                        .appearance=${buttonAppearanceValues.GHOST}
+                        .icon=${x}
+                        .iconPosition=${buttonIconPositionValues.ONLY}
+                        aria-label=${this.closeLabel}
+                      ></dsgn-button>
+                    `}
+              </slot>
+            </div>
+          </header>
+          <div
+            id="modal-description"
+            class=${descriptionClasses(this._hasDescription)}
+          >
+            <slot
+              name="description"
+              @slotchange=${this._handleSlotChange}
+            ></slot>
+          </div>
+          <div class=${bodyClasses()}>
+            <slot></slot>
+          </div>
+          <footer class=${footerClasses(this._hasFooter)}>
+            <slot name="footer" @slotchange=${this._handleSlotChange}></slot>
+          </footer>
+        </div>
+      </dialog>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  query("dialog")
+], Modal.prototype, "_dialog", undefined);
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Modal.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Modal.prototype, "open", undefined);
+__legacyDecorateClassTS([
+  property({ ...modalPlacementProps })
+], Modal.prototype, "placement", undefined);
+__legacyDecorateClassTS([
+  property({ ...modalMotionProps })
+], Modal.prototype, "motion", undefined);
+__legacyDecorateClassTS([
+  property({ ...modalSizeProps })
+], Modal.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "aria-label" })
+], Modal.prototype, "ariaLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "close-label" })
+], Modal.prototype, "closeLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true, attribute: "no-close-control" })
+], Modal.prototype, "noCloseControl", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true, attribute: "no-backdrop-dismiss" })
+], Modal.prototype, "noBackdropDismiss", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true, attribute: "no-escape-dismiss" })
+], Modal.prototype, "noEscapeDismiss", undefined);
+__legacyDecorateClassTS([
+  state()
+], Modal.prototype, "_closing", undefined);
+__legacyDecorateClassTS([
+  state()
+], Modal.prototype, "_hasHeading", undefined);
+__legacyDecorateClassTS([
+  state()
+], Modal.prototype, "_hasDescription", undefined);
+__legacyDecorateClassTS([
+  state()
+], Modal.prototype, "_hasFooter", undefined);
+__legacyDecorateClassTS([
+  state()
+], Modal.prototype, "_hasCloseControl", undefined);
+defineElement("dsgn-modal", Modal);
+export {
+  Modal
+};