@solid-design-system/components 6.30.0 → 7.0.0-next.10

package/dist/chunks/{chunk.HLFIH4MY.js → chunk.266V4W27.js}

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

package/dist/chunks/{chunk.GA5ZGGWC.js → chunk.2ZO5TQLM.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RT3GEKSF.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.L5OGV3KL.js → chunk.33KST4RJ.js}

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

package/dist/chunks/{chunk.HKDY2SX6.js → chunk.3JGMLVGL.js}

@@ -1,13 +1,13 @@
 import {
   SdAccordion
-} from "./chunk.A337UTOA.js";
+} from "./chunk.KAWDESCC.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.RT3GEKSF.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.2UHCCORM.js → chunk.3MGF33VU.js}

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

package/dist/chunks/{chunk.YBP7P46N.js → chunk.3Y3V2LY4.js}

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

package/dist/chunks/{chunk.MXSG7VRT.js → chunk.4BB4LNMY.js}

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

package/dist/chunks/{chunk.E7BGW6SN.js → chunk.4USTQEWG.js}

@@ -1,6 +1,6 @@
 import {
   SdRadio
-} from "./chunk.DNCDNML2.js";
+} from "./chunk.Z462LBEB.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RT3GEKSF.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.NT2XMLYA.js → chunk.52XEAMVX.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RT3GEKSF.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.js";

package/dist/chunks/{chunk.QBHSDBEF.js → chunk.5R5MY3VD.js}

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

package/dist/chunks/{chunk.SFIA76OX.js → chunk.5VCVDFRJ.js}

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

package/dist/chunks/{chunk.TPUZGQAZ.js → chunk.6A4DHVDL.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RT3GEKSF.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -16,6 +16,7 @@ var SdHeader = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.fixed = false;
+    this.shadow = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -60,11 +61,14 @@ var SdHeader = class extends SolidElement {
 SdHeader.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;z-index:var(--sd-z-index-header,600);display:block}@media (min-height:32rem){:host([fixed]){padding-bottom:var(--sd-header-calculated-height)!important}:host([fixed]) header{position:fixed;top:0;left:0;width:100%}:host([fixed]) header::after{position:absolute;top:100%;right:0;left:0;height:var(--sd-header__shadow-height,var(--sd-spacing-1));--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:color-mix(in oklab, var(--color-black, #000) 40%, transparent);--tw-gradient-to:color-mix(in oklab, var(--color-black, #000) var(--sd-opacity-0), transparent);--tw-gradient-stops:var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));--tw-content:'';content:var(--tw-content)}}[part=main]{width:var(--sd-header-inner-width);max-width:var(--sd-header-inner-max-width);padding:var(--sd-header-padding,12px 16px)}header::before{position:absolute;bottom:0;left:0;display:block;width:100%;--tw-content:'';content:var(--tw-content);background-color:rgb(var(--sd-header__underline-color-background));height:var(--sd-header__underline-height,var(--sd-spacing-2))}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
+:host{position:relative;z-index:var(--sd-z-index-header,600);display:block}@media (min-height:32rem){:host([fixed]){padding-bottom:var(--sd-header-calculated-height)!important}:host([fixed]) header{position:fixed;top:0;left:0;width:100%}}:host([shadow]) header::after{position:absolute;top:100%;right:0;left:0;height:var(--sd-header__shadow-height,var(--sd-spacing-1));--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:color-mix(in oklab, var(--color-black, #000) 40%, transparent);--tw-gradient-to:color-mix(in oklab, var(--color-black, #000) var(--sd-opacity-0), transparent);--tw-gradient-stops:var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));--tw-content:'';content:var(--tw-content)}[part=main]{width:var(--sd-header-inner-width);max-width:var(--sd-header-inner-max-width);padding:var(--sd-header-padding,12px 16px)}:host([shadow]) header::before{position:absolute;bottom:0;left:0;display:block;width:100%;--tw-content:'';content:var(--tw-content);background-color:rgb(var(--sd-header__underline-color-background));height:var(--sd-header__underline-height,var(--sd-spacing-2))}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
 ];
 __decorateClass([
   property({ reflect: true, type: Boolean })
 ], SdHeader.prototype, "fixed", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SdHeader.prototype, "shadow", 2);
 __decorateClass([
   query("header")
 ], SdHeader.prototype, "header", 2);

package/{dist-versioned/chunks/chunk.FBSBBENN.js → dist/chunks/chunk.6DUOHFNN.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.RT3GEKSF.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   animateTo,
   stopAnimations
@@ -54,21 +44,16 @@ var SdDialog = class extends SolidElement {
   connectedCallback() {
     super.connectedCallback();
     this.updateMotionTheme();
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.modal = new Modal(this);
   }
   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();
   }
@@ -93,31 +78,15 @@ var SdDialog = class extends SolidElement {
     }
     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) {
@@ -142,9 +111,7 @@ 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)]);
+      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";
@@ -157,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");
     }
   }
@@ -192,29 +147,29 @@ var SdDialog = class extends SolidElement {
     return waitForEvent(this, "sd-after-hide");
   }
   render() {
-    return html`<sd-6-30-0-theme-listener></sd-6-30-0-theme-listener><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-6-30-0-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-6-30-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-30-0-icon></sd-6-30-0-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="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}}`
 ];
 __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);
@@ -228,7 +183,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDialog.prototype, "handleOpenChange", 1);
 SdDialog = __decorateClass([
-  customElement("sd-6-30-0-dialog")
+  customElement("sd-dialog")
 ], SdDialog);
 setDefaultAnimation("dialog.show", {
   keyframes: [

package/dist/chunks/{chunk.VKAWXQBO.js → chunk.6MSQDSJK.js}

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

package/dist/chunks/{chunk.X7DORH6O.js → chunk.6OYBQ6CO.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RT3GEKSF.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.JU7PIHSF.js → chunk.77CINHAJ.js}

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

package/dist/chunks/{chunk.KYZI324J.js → chunk.7ZKBKOS5.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.6RE6UZ72.js";
 import {
   SdCarouselItem
-} from "./chunk.B2TWJWHR.js";
+} from "./chunk.UOMFY7RY.js";
 import {
   AutoplayController
 } from "./chunk.F4VGSDIW.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RT3GEKSF.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   prefersReducedMotion
 } from "./chunk.HQWAKJBV.js";

package/dist/chunks/{chunk.CHQXV5AD.js → chunk.AFD4FHYM.js}

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

package/dist/chunks/{chunk.5XZQBMKD.js → chunk.AJVSDITF.js}

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

package/dist/chunks/{chunk.BU2U2CE7.js → chunk.BZO3OLK2.js}

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

package/dist/chunks/{chunk.XDZE7ROV.js → chunk.C4RJM5BO.js}

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

package/dist/chunks/{chunk.H6K5MLEC.js → chunk.CQTEYWVJ.js}

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

package/dist/chunks/{chunk.SB6TO2NI.js → chunk.D5JLEZPO.js}

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