@solid-design-system/components 4.0.6 → 4.0.7

package/dist/chunks/{chunk.32MPDFO4.js → chunk.F63YFNZS.js}

@@ -128,7 +128,7 @@ var SdNavigationItem = class extends SolidElement {
       horizontalPaddingBottom
     )}"></slot>` : ""}</${tag}>`;
     if (isAccordion) {
-      return html`<details aria-expanded="${this.open}" part="details" id="navigation-item-details" ?open="${this.open}" class="relative flex">${root}<slot name="children"></slot></details>`;
+      return html`<details aria-expanded="${this.open}" part="details" id="navigation-item-details" ?open="${this.open}" class="relative">${root}<slot name="children"></slot></details>`;
     }
     if (this.separated) {
       return html`<div part="details" id="navigation-item-details" class="relative flex flex-col">${root}${this.open ? html`<slot name="children"></slot>` : ""}</div>`;

package/dist/chunks/{chunk.LU65KM4S.js → chunk.OZU372TI.js}

@@ -35,7 +35,6 @@ import {
 
 // src/components/drawer/drawer.ts
 import { css, html } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { property, query } from "lit/decorators.js";
 
 // src/internal/string.ts
@@ -112,6 +111,7 @@ var SdDrawer = class extends SolidElement {
       }
       await Promise.all([stopAnimations(this.drawer), stopAnimations(this.overlay)]);
       this.drawer.hidden = false;
+      this.drawer.removeAttribute("inert");
       requestAnimationFrame(() => {
         const sdInitialFocus = this.emit("sd-initial-focus", { cancelable: true });
         if (!sdInitialFocus.defaultPrevented) {
@@ -123,6 +123,8 @@ var SdDrawer = class extends SolidElement {
         }
         if (autoFocusTarget) {
           autoFocusTarget.setAttribute("autofocus", "");
+        } else {
+          this.closeButton.focus();
         }
       });
       const panelAnimation = getAnimation(this, `drawer.show${uppercaseFirstLetter(this.placement)}`, {
@@ -157,6 +159,7 @@ var SdDrawer = class extends SolidElement {
         })
       ]);
       this.drawer.hidden = true;
+      this.drawer.setAttribute("inert", "");
       this.overlay.hidden = false;
       this.panel.hidden = false;
       const trigger = this.originalTrigger;
@@ -201,12 +204,12 @@ var SdDrawer = class extends SolidElement {
       "block top-0 left-0 right-0 bottom-0 bg-neutral-800/75 pointer-events-auto",
       this.contained ? "absolute" : "fixed"
     )}" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
-      "absolute flex flex-col z-10 max-w-full max-h-full bg-white shadow-lg overflow-auto pointer-events-auto focus:outline-none",
+      "absolute flex flex-col gap-4 z-10 max-w-full max-h-full bg-white shadow-lg overflow-auto pointer-events-auto focus:outline-none",
       {
         end: "top-0 end-0 bottom-auto start-auto w-[--width] h-full",
         start: "top-0 end-auto bottom-auto start-0 w-[--width] h-full"
       }[this.placement]
-    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.label}" aria-labelledby="${ifDefined(!this.noHeader ? "title" : void 0)}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-icon label="${this.localize.term("close")}" name="close" library="system"></sd-icon></sd-button></div></header>` : ""}<div part="body" class="flex-auto block px-4"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></div>`;
+    )}" role="dialog" aria-modal="true" aria-label="${this.label}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-icon label="${this.localize.term("close")}" name="close" library="system"></sd-icon></sd-button></div></header>` : html`<sd-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-icon label="${this.localize.term("close")}" name="close" library="system"></sd-icon></sd-button>`}<div part="body" class="flex-auto block px-4" role="region" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDrawer.styles = [

package/dist/components/animation/animation.js

@@ -1,8 +1,8 @@
 import {
   SdAnimation
-} from "../../chunks/chunk.DCTW5WAP.js";
-import "../../chunks/chunk.TJOP7HQP.js";
+} from "../../chunks/chunk.LZA2QYUU.js";
 import "../../chunks/chunk.X2OQMWGY.js";
+import "../../chunks/chunk.TJOP7HQP.js";
 import "../../chunks/chunk.HFHUY7YD.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/audio/audio.js

@@ -1,12 +1,12 @@
 import {
   SdAudio
-} from "../../chunks/chunk.TGJ2SBPH.js";
+} from "../../chunks/chunk.KQAHFLVX.js";
+import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.MNYQWRJE.js";
 import "../../chunks/chunk.2S2CNWKY.js";
 import "../../chunks/chunk.HFHUY7YD.js";
-import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {
   SdAudio as default

package/dist/components/drawer/drawer.js

@@ -1,6 +1,6 @@
 import {
   SdDrawer
-} from "../../chunks/chunk.LU65KM4S.js";
+} from "../../chunks/chunk.OZU372TI.js";
 import "../../chunks/chunk.VBQLCQSN.js";
 import "../../chunks/chunk.XHCTCU2Q.js";
 import "../../chunks/chunk.WDWV53JP.js";

package/dist/components/navigation-item/navigation-item.js

@@ -1,6 +1,6 @@
 import {
   SdNavigationItem
-} from "../../chunks/chunk.32MPDFO4.js";
+} from "../../chunks/chunk.F63YFNZS.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.HFHUY7YD.js";
 import "../../chunks/chunk.S3NI7NKU.js";