@solid-design-system/components 7.0.0-next.3 → 7.0.0-next.5

package/dist/chunks/{chunk.ICBYOTXZ.js → chunk.32OX3VGB.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.HQZ5Y72U.js → chunk.3LN66WKN.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.DJIFAD75.js → chunk.4NXRXHFJ.js}

@@ -1,10 +1,6 @@
-import {
-  getDeepActiveElement,
-  getTabbableBoundary
-} from "./chunk.UMIKFOMI.js";
 import {
   scrollIntoView
-} from "./chunk.WDWV53JP.js";
+} from "./chunk.LTZVVIB2.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -21,7 +17,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   animateTo,
   stopAnimations
@@ -51,6 +47,67 @@ function deepClosestElement(element, selector) {
   return null;
 }
 
+// src/internal/deep-active-element.ts
+function getDeepActiveElement(element = document.activeElement) {
+  if (element == null ? void 0 : element.shadowRoot) {
+    const shadowActiveElement = element.shadowRoot.activeElement;
+    if (shadowActiveElement) {
+      return getDeepActiveElement(shadowActiveElement);
+    }
+  }
+  return element;
+}
+
+// src/internal/tabbable.ts
+function isTabbable(el) {
+  const tag = el.tagName.toLowerCase();
+  if (el.getAttribute("tabindex") === "-1") {
+    return false;
+  }
+  if (el.hasAttribute("disabled")) {
+    return false;
+  }
+  if (el.hasAttribute("aria-disabled") && el.getAttribute("aria-disabled") !== "false") {
+    return false;
+  }
+  if (tag === "input" && el.getAttribute("type") === "radio" && !el.hasAttribute("checked")) {
+    return false;
+  }
+  if (el.offsetParent === null && !(el.getRootNode() instanceof ShadowRoot)) {
+    return false;
+  }
+  if (window.getComputedStyle(el).visibility === "hidden") {
+    return false;
+  }
+  if ((tag === "audio" || tag === "video") && el.hasAttribute("controls")) {
+    return true;
+  }
+  if (el.hasAttribute("tabindex")) {
+    return true;
+  }
+  if (el.hasAttribute("contenteditable") && el.getAttribute("contenteditable") !== "false") {
+    return true;
+  }
+  return ["button", "input", "select", "textarea", "a", "audio", "video", "summary"].includes(tag);
+}
+function getTabbableBoundary(root) {
+  var _a, _b;
+  const allElements = [];
+  function walk(el) {
+    if (el instanceof HTMLElement) {
+      allElements.push(el);
+      if (el.shadowRoot !== null && el.shadowRoot.mode === "open") {
+        walk(el.shadowRoot);
+      }
+    }
+    [...el.children].forEach((e) => walk(e));
+  }
+  walk(root);
+  const start = (_a = allElements.find((el) => isTabbable(el))) != null ? _a : null;
+  const end = (_b = allElements.reverse().find((el) => isTabbable(el))) != null ? _b : null;
+  return { start, end };
+}
+
 // src/components/dropdown/dropdown.ts
 import { property, query } from "lit/decorators.js";
 import cx from "classix";

package/dist/chunks/{chunk.4UWPPYNK.js → chunk.4RYOOAMJ.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.JO4VO3DE.js → chunk.53FS6JNC.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.UIQBHPD3.js";
 import {
   scrollIntoView
-} from "./chunk.WDWV53JP.js";
+} from "./chunk.LTZVVIB2.js";
 import {
   FormControlController
 } from "./chunk.C3WIBDGG.js";
@@ -35,7 +35,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.PJELKFNY.js → chunk.5UMZRILA.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.X6ZZWTS7.js → chunk.5UYXIS2U.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.CFE22DL2.js → chunk.67R42AVH.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.GWLYBCED.js → chunk.6CESNAQW.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.K5UVAUSH.js → chunk.6VJCUBYA.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.WJFZKOMO.js → chunk.7EWDTJLW.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ZINALM6Z.js → chunk.AH2NSGQE.js}

@@ -1,6 +1,6 @@
 import {
   SdRadio
-} from "./chunk.GWLYBCED.js";
+} from "./chunk.6CESNAQW.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.TACTLKX6.js → chunk.B6PFRZJR.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.MLBOR3OA.js → chunk.B7QQBC4A.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.IJQGWINY.js → chunk.BBE2NXFL.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ROTKRIJL.js → chunk.BNPZJWJE.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.EI5PCGH6.js → chunk.BTR7H5XJ.js}

@@ -17,7 +17,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   animateTo,
   parseDuration,

package/dist/chunks/{chunk.NHPAPNCA.js → chunk.D55CZ6ZH.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.64V7RPJM.js → chunk.DLZAEQ2O.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.BGHQYSC6.js → chunk.EAIVAETN.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.FAQBBAJ3.js → chunk.EWMWCZTD.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.GI7VDIWX.js";
 import {
   scrollIntoView
-} from "./chunk.WDWV53JP.js";
+} from "./chunk.LTZVVIB2.js";
 import {
   FormControlController
 } from "./chunk.C3WIBDGG.js";
@@ -26,7 +26,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.H4N3X443.js → chunk.F4HCPBUG.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,

package/dist/chunks/{chunk.NDQTMQGH.js → chunk.FINTCURG.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.KDPFXMT7.js → chunk.FQ4HNT4C.js}

@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.POPOYCUO.js → chunk.GT7FZLGE.js}

@@ -21,7 +21,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.YC54RFTI.js → chunk.HHEFJRDJ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.Y32GRFGF.js → chunk.HT4CXANK.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.HVKZA5Q2.js → chunk.IPKJYONP.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.YEAB2PEA.js → chunk.JA4XDN7F.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.HXXLOMBL.js → chunk.JASUQLAD.js}

@@ -1,13 +1,3 @@
-import {
-  Modal
-} from "./chunk.EDMG7C5H.js";
-import {
-  getDeepActiveElement
-} from "./chunk.UMIKFOMI.js";
-import {
-  lockBodyScrolling,
-  unlockBodyScrolling
-} from "./chunk.WDWV53JP.js";
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";
@@ -27,7 +17,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   animateTo,
   stopAnimations
@@ -46,26 +36,30 @@ var SdDialog = class extends SolidElement {
     super(...arguments);
     this.hasSlotController = new HasSlotController(this, "footer");
     this.localize = new LocalizeController(this);
+    this.hasUiMotion = false;
     this.open = false;
     this.headline = "";
     this.noCloseButton = false;
   }
   connectedCallback() {
     super.connectedCallback();
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.modal = new Modal(this);
+    this.updateMotionTheme();
   }
   firstUpdated() {
-    this.dialog.hidden = !this.open;
+    this.dialog.addEventListener("cancel", (event) => {
+      event.preventDefault();
+      this.requestClose("keyboard");
+    });
     if (this.open) {
-      this.addOpenListeners();
-      this.modal.activate();
-      lockBodyScrolling(this);
+      this.dialog.showModal();
     }
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    unlockBodyScrolling(this);
+  onThemeChange() {
+    this.updateMotionTheme();
+  }
+  updateMotionTheme() {
+    const theme = getComputedStyle(this).getPropertyValue("--sd-theme").trim().replace(/['"]/g, "");
+    this.hasUiMotion = theme === "" || theme === "ui-light" || theme === "ui-dark";
   }
   get prefersReducedMotion() {
     return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -76,37 +70,23 @@ var SdDialog = class extends SolidElement {
       detail: { source }
     });
     if (sdRequestClose.defaultPrevented) {
-      const animation = getAnimation(this, "dialog.denyClose", { dir: this.localize.dir() });
+      const animation = getAnimation(this, this.hasUiMotion ? "dialog.denyClose" : "dialog.denyCloseSimple", {
+        dir: this.localize.dir()
+      });
       animateTo(this.panel, animation.keyframes, animation.options);
       return;
     }
     this.hide();
   }
-  addOpenListeners() {
-    document.addEventListener("keydown", this.handleDocumentKeyDown);
-  }
-  removeOpenListeners() {
-    document.removeEventListener("keydown", this.handleDocumentKeyDown);
-  }
-  handleDocumentKeyDown(event) {
-    if (this.open && event.key === "Escape") {
-      event.stopPropagation();
-      this.requestClose("keyboard");
-    }
-  }
   async handleOpenChange() {
     if (this.open) {
       this.emit("sd-show");
-      this.addOpenListeners();
-      this.originalTrigger = getDeepActiveElement();
-      this.modal.activate();
-      lockBodyScrolling(this);
       const autoFocusTarget = this.querySelector("[autofocus]");
       if (autoFocusTarget) {
         autoFocusTarget.removeAttribute("autofocus");
       }
-      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      this.dialog.hidden = false;
+      await stopAnimations(this.dialog);
+      this.dialog.showModal();
       requestAnimationFrame(() => {
         const slInitialFocus = this.emit("sd-initial-focus", { cancelable: true });
         if (!slInitialFocus.defaultPrevented) {
@@ -120,8 +100,10 @@ var SdDialog = class extends SolidElement {
           autoFocusTarget.setAttribute("autofocus", "");
         }
       });
-      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.showReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, "dialog.show", { dir: this.localize.dir() });
-      const overlayAnimation = getAnimation(this, "dialog.overlay.show", { dir: this.localize.dir() });
+      const showAnimation = this.hasUiMotion ? "dialog.show" : "dialog.showSimple";
+      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.showReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, showAnimation, { dir: this.localize.dir() });
+      const overlayShowAnimation = this.hasUiMotion ? "dialog.overlay.show" : "dialog.overlay.showSimple";
+      const overlayAnimation = getAnimation(this, overlayShowAnimation, { dir: this.localize.dir() });
       await Promise.all([
         animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
         animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
@@ -129,11 +111,11 @@ var SdDialog = class extends SolidElement {
       this.emit("sd-after-show");
     } else {
       this.emit("sd-hide");
-      this.removeOpenListeners();
-      this.modal.deactivate();
-      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.hideReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
-      const overlayAnimation = getAnimation(this, "dialog.overlay.hide", { dir: this.localize.dir() });
+      await stopAnimations(this.dialog);
+      const hideAnimation = this.hasUiMotion ? "dialog.hide" : "dialog.hideSimple";
+      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.hideReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, hideAnimation, { dir: this.localize.dir() });
+      const overlayHideAnimation = this.hasUiMotion ? "dialog.overlay.hide" : "dialog.overlay.hideSimple";
+      const overlayAnimation = getAnimation(this, overlayHideAnimation, { dir: this.localize.dir() });
       await Promise.all([
         animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
           this.overlay.hidden = true;
@@ -142,21 +124,9 @@ var SdDialog = class extends SolidElement {
           this.panel.hidden = true;
         })
       ]);
-      this.dialog.hidden = true;
+      this.dialog.close();
       this.overlay.hidden = false;
       this.panel.hidden = false;
-      unlockBodyScrolling(this);
-      const trigger = this.originalTrigger;
-      if (typeof (trigger == null ? void 0 : trigger.focus) === "function" && trigger.isConnected) {
-        setTimeout(() => {
-          try {
-            trigger.focus({ preventScroll: true });
-          } catch (e) {
-            trigger.focus();
-          }
-          this.originalTrigger = null;
-        });
-      }
       this.emit("sd-after-hide");
     }
   }
@@ -177,29 +147,29 @@ var SdDialog = class extends SolidElement {
     return waitForEvent(this, "sd-after-hide");
   }
   render() {
-    return html`<div part="base" class="${cx(
-      "flex items-center justify-center fixed inset-0 z-dialog",
+    return html`<sd-theme-listener></sd-theme-listener><dialog part="base" class="${cx(
+      "flex items-center justify-center p-0 m-auto bg-transparent border-none overflow-visible",
       this.hasSlotController.test("footer") && "dialog--has-footer"
-    )}"><div part="overlay" class="fixed inset-0 overlay-color-background" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
+    )}"><div part="overlay" class="fixed inset-0" @click="${() => this.requestClose("overlay")}"></div><div part="panel" class="${cx(
       "panel-color-border border flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
       this.open && "flex opacity-100"
-    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-icon></sd-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
+    )}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-icon></sd-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></dialog>`;
   }
 };
 SdDialog.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{--width:662px}[part=panel]{width:var(--width);max-height:80vh}[part=body]{-webkit-overflow-scrolling:touch}@media (max-width:414px){:host{--width:335px}[part=body]{min-height:50px}[part=footer]{width:100%}}`
+:host{--width:662px;display:contents}[part=base]:not([open]){display:none}[part=panel]{width:var(--width);max-height:80vh}[part=body]{-webkit-overflow-scrolling:touch}::backdrop{display:none}[part=overlay]{background-color:rgb(var(--sd-overlay-color-background,5 21 48 / .9))}@media (max-width:414px){:host{--width:335px}[part=body]{min-height:50px}[part=footer]{width:100%}}`
 ];
 __decorateClass([
   query('[part="base"]')
 ], SdDialog.prototype, "dialog", 2);
-__decorateClass([
-  query('[part="panel"]')
-], SdDialog.prototype, "panel", 2);
 __decorateClass([
   query('[part="overlay"]')
 ], SdDialog.prototype, "overlay", 2);
+__decorateClass([
+  query('[part="panel"]')
+], SdDialog.prototype, "panel", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDialog.prototype, "open", 2);
@@ -226,6 +196,13 @@ setDefaultAnimation("dialog.showReducedMotion", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],
   options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out", reducedMotion: "allow" }
 });
+setDefaultAnimation("dialog.showSimple", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
 setDefaultAnimation("dialog.hide", {
   keyframes: [
     { opacity: 1, transform: "translate(0, 0)" },
@@ -237,18 +214,37 @@ setDefaultAnimation("dialog.hideReducedMotion", {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
   options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out", reducedMotion: "allow" }
 });
+setDefaultAnimation("dialog.hideSimple", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
 setDefaultAnimation("dialog.denyClose", {
   keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
   options: { duration: 250 }
 });
+setDefaultAnimation("dialog.denyCloseSimple", {
+  keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
+  options: { duration: 250 }
+});
 setDefaultAnimation("dialog.overlay.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],
   options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out", reducedMotion: "allow" }
 });
+setDefaultAnimation("dialog.overlay.showSimple", {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: 250, reducedMotion: "allow" }
+});
 setDefaultAnimation("dialog.overlay.hide", {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
   options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out", reducedMotion: "allow" }
 });
+setDefaultAnimation("dialog.overlay.hideSimple", {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: 250, reducedMotion: "allow" }
+});
 
 export {
   SdDialog

package/dist/chunks/{chunk.ZI4J2JI6.js → chunk.JTMMFUZB.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.NQYRZUCX.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,