@solid-design-system/components 4.6.7 → 4.6.9

package/dist/chunks/{chunk.EATARJOL.js → chunk.5NUL7XZO.js}

@@ -1,9 +1,9 @@
-import {
-  watch
-} from "./chunk.X2OQMWGY.js";
 import {
   HasSlotController
 } from "./chunk.YEZS5ZR2.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -26,6 +26,7 @@ var SdTab = class extends SolidElement {
     this.variant = "default";
     this.active = false;
     this.disabled = false;
+    this.visuallyDisabled = false;
     this.panel = "";
   }
   connectedCallback() {
@@ -36,7 +37,8 @@ var SdTab = class extends SolidElement {
     this.setAttribute("aria-selected", this.active ? "true" : "false");
   }
   handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    const isDisabled = this.disabled || this.visuallyDisabled;
+    this.setAttribute("aria-disabled", isDisabled ? "true" : "false");
   }
   /** Sets focus to the tab. */
   focus(options) {
@@ -52,17 +54,23 @@ var SdTab = class extends SolidElement {
       left: this.hasSlotController.test("left")
     };
     return html`<div part="base" class="${cx(
-      "inline-flex min-w-max h-12 px-3 leading-none items-center justify-center whitespace-nowrap select-none cursor-pointer group relative focus-visible:focus-outline outline-2 !-outline-offset-2",
+      "inline-flex justify-center min-w-max items-center h-12 px-3 leading-none select-none cursor-pointer group relative focus-visible:focus-outline outline-2 !-outline-offset-2",
       this.variant === "container" && " rounded-[4px_4px_0_0]",
       this.variant === "container" && this.active && "tab--active-container-border bg-white",
-      this.disabled ? "opacity-50 !cursor-not-allowed" : "hover:bg-neutral-200"
-    )}" tabindex="${!this.active || this.disabled ? "-1" : "0"}"><slot name="left" class="${cx(slots.left && "block pr-2", this.disabled ? "text-neutral-500" : "text-primary")}"></slot><slot class="${cx(this.disabled ? "text-neutral-500" : "text-primary")}"></slot><div part="active-tab-indicator" class="${cx(
+      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:bg-neutral-200"
+    )}" tabindex="${!this.active || this.disabled ? "-1" : "0"}"><div class="${cx(
+      "flex h-full items-center justify-center whitespace-nowrap",
+      this.disabled || this.visuallyDisabled && "opacity-50 "
+    )}"><slot name="left" class="${cx(
+      slots.left && "block pr-2",
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary"
+    )}"></slot><slot class="${cx(this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary")}"></slot><div part="active-tab-indicator" class="${cx(
       (!this.active || this.disabled) && "hidden",
       "absolute bottom-0 h-1 bg-accent",
       this.variant === "default" ? "w-full" : "w-3/4 group-hover:w-full transition-all duration-200 ease-in-out"
     )}"></div><div part="hover-bottom-border" class="${cx(
       !this.active && !this.disabled && "absolute w-full h-0.25 bottom-0 border-b border-neutral-400 invisible group-hover:visible"
-    )}"></div></div>`;
+    )}"></div></div></div>`;
   }
 };
 SdTab.styles = [
@@ -81,6 +89,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdTab.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
+], SdTab.prototype, "visuallyDisabled", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], SdTab.prototype, "panel", 2);
@@ -88,7 +99,7 @@ __decorateClass([
   watch("active")
 ], SdTab.prototype, "handleActiveChange", 1);
 __decorateClass([
-  watch("disabled")
+  watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
   customElement("sd-tab")

package/dist/chunks/{chunk.ML4MIKYQ.js → chunk.6KFGIUGJ.js}

@@ -15,12 +15,12 @@ import {
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
-import {
-  watch
-} from "./chunk.X2OQMWGY.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -313,7 +313,7 @@ __decorateClass([
   property({ attribute: "stay-open-on-select", type: Boolean, reflect: true })
 ], SdDropdown.prototype, "stayOpenOnSelect", 2);
 __decorateClass([
-  property({ type: String, attribute: false, reflect: true })
+  property({ type: Object })
 ], SdDropdown.prototype, "containingElement", 2);
 __decorateClass([
   property({ type: Number, reflect: true })

package/dist/chunks/{chunk.TDFVAXJF.js → chunk.7PDAG24K.js}

@@ -1,6 +1,7 @@
 import {
-  Modal
-} from "./chunk.VBQLCQSN.js";
+  Modal,
+  getDeepActiveElement
+} from "./chunk.UFBRSKVR.js";
 import {
   lockBodyScrolling,
   unlockBodyScrolling
@@ -16,15 +17,15 @@ import {
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
-import {
-  watch
-} from "./chunk.X2OQMWGY.js";
 import {
   HasSlotController
 } from "./chunk.YEZS5ZR2.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -100,7 +101,7 @@ var SdDrawer = class extends SolidElement {
     if (this.open) {
       this.emit("sd-show");
       this.addOpenListeners();
-      this.originalTrigger = document.activeElement;
+      this.originalTrigger = getDeepActiveElement();
       if (!this.contained) {
         this.modal.activate();
         lockBodyScrolling(this);

package/dist/chunks/{chunk.VMVFMQ3Q.js → chunk.BO6G26AO.js}

@@ -288,10 +288,10 @@ var SdAudio = class extends SolidElement {
     )}" part="audio-controls"><button class="${cx(
       "playback-speed justify-self-start text-base font-bold hover:cursor-pointer sd-interactive",
       this.inverted && "sd-interactive--inverted"
-    )}" aria-label="${this.localize.term("playbackSpeed")}" tabindex="0" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" title="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" class="text-3xl">${this.isPlaying ? html`<slot name="pause-icon"><sd-icon class="text-3xl" name="pause" library="system"></sd-icon></slot>` : html`<slot name="play-icon"><sd-icon class="text-3xl" name="start" library="system"></sd-icon></slot>`}</sd-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx(
+    )}" aria-label="${this.localize.term("playbackSpeed")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" title="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" class="text-3xl">${this.isPlaying ? html`<slot name="pause-icon"><sd-icon class="text-3xl" name="pause" library="system"></sd-icon></slot>` : html`<slot name="play-icon"><sd-icon class="text-3xl" name="start" library="system"></sd-icon></slot>`}</sd-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx(
       "mr-6 w-6 h-6 hover:cursor-pointer sd-interactive",
       this.inverted && "sd-interactive--inverted"
-    )}" aria-label="${this.isTranscriptOpen ? this.localize.term("transcriptIsOpen") : this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" tab-index="0" part="transcript"><sd-icon class="w-6 h-6" name="transcript" library="system"></sd-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${!this.isMuted ? this.localize.term("mute") : this.localize.term("unmute")}" tabindex="0" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="system"></sd-icon></button></div></div>`;
+    )}" aria-label="${this.isTranscriptOpen ? this.localize.term("transcriptIsOpen") : this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" part="transcript"><sd-icon class="w-6 h-6" name="transcript" library="system"></sd-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${!this.isMuted ? this.localize.term("mute") : this.localize.term("unmute")}" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="system"></sd-icon></button></div></div>`;
     const renderTimestamps = html`<div class="${cx(
       "w-full flex justify-between",
       this.reversedLayout ? "mb-2" : "mt-2",
@@ -301,7 +301,7 @@ var SdAudio = class extends SolidElement {
     return html`<div class="${cx("w-full flex relative", this.reversedLayout ? "flex-col-reverse" : "flex-col")}" aria-label="${this.localize.term("audioPlayer")}" part="audio-player"><slot @slotchange="${this.updateAudioDuration}"></slot>${!this.animated || this.animated && this.reversedLayout ? renderAudioControls : null}<div class="relative">${this.animated && !this.reversedLayout ? html`${renderAudioControls}` : null} ${this.animated ? html`<canvas class="w-full h-16"></canvas>` : null} ${!this.hideTimestamps && this.animated && this.reversedLayout ? renderTimestamps : null} <input class="${cx(
       "progress-slider bg-primary appearance-none w-full cursor-pointer outline-none h-1 flex items-center sd-interactive",
       this.inverted && "sd-interactive--inverted"
-    )}" type="range" max="100" step="0.001" value="${this.progress}" tabindex="0" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" aria-label="${this.localize.term("seekBar")}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted ? "rgb(var(--sd-color-white, 255 255 255) / 1)" : "rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${progressPercentage}%,${this.animated ? "transparent" : this.inverted ? "rgb(var(--sd-color-primary-400, 153 171 208) / 1)" : "rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${progressPercentage}%)"></div>${this.hasSlotController.test("transcript") ? html`<sd-drawer><slot name="transcript"></slot></sd-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
+    )}" type="range" max="100" step="0.001" value="${this.progress}" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" aria-label="${this.localize.term("seekBar")}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted ? "rgb(var(--sd-color-white, 255 255 255) / 1)" : "rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${progressPercentage}%,${this.animated ? "transparent" : this.inverted ? "rgb(var(--sd-color-primary-400, 153 171 208) / 1)" : "rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${progressPercentage}%)"></div>${this.hasSlotController.test("transcript") ? html`<sd-drawer><slot name="transcript"></slot></sd-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
   }
 };
 SdAudio.styles = [

package/dist/chunks/{chunk.YELMYFWG.js → chunk.IFVMGJPH.js}

@@ -70,8 +70,8 @@ var SdTabGroup = class extends SolidElement {
   }
   getAllTabs(options = { includeDisabled: true }) {
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
-    return [...slot.assignedElements()].filter((el) => {
-      return options.includeDisabled ? el.tagName.toLowerCase() === "sd-tab" : el.tagName.toLowerCase() === "sd-tab" && !el.disabled;
+    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-tab" ? el : el.querySelector("sd-tab")).filter((el) => {
+      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-tab" : el.tagName.toLowerCase() === "sd-tab" && !el.disabled;
     });
   }
   getAllPanels() {
@@ -163,7 +163,7 @@ var SdTabGroup = class extends SolidElement {
       emitEvents: true,
       scrollBehavior: "auto"
     }, options);
-    if (tab !== this.activeTab && !tab.disabled) {
+    if (tab !== this.activeTab && !tab.disabled && !tab.visuallyDisabled) {
       const previousTab = this.activeTab;
       this.activeTab = tab;
       this.tabs.map((el) => el.active = el === this.activeTab);

package/dist/chunks/{chunk.ZKKB55C5.js → chunk.IOAEHG5C.js}

@@ -1,6 +1,7 @@
 import {
-  Modal
-} from "./chunk.VBQLCQSN.js";
+  Modal,
+  getDeepActiveElement
+} from "./chunk.UFBRSKVR.js";
 import {
   lockBodyScrolling,
   unlockBodyScrolling
@@ -16,15 +17,15 @@ import {
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
-import {
-  watch
-} from "./chunk.X2OQMWGY.js";
 import {
   HasSlotController
 } from "./chunk.YEZS5ZR2.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -91,7 +92,7 @@ var SdDialog = class extends SolidElement {
     if (this.open) {
       this.emit("sd-show");
       this.addOpenListeners();
-      this.originalTrigger = document.activeElement;
+      this.originalTrigger = getDeepActiveElement();
       this.modal.activate();
       lockBodyScrolling(this);
       const autoFocusTarget = this.querySelector("[autofocus]");

package/dist/chunks/{chunk.PTZRO2RN.js → chunk.JH33Y6NI.js}

@@ -1,6 +1,6 @@
 import {
   SdAccordion
-} from "./chunk.T4ZCLZI2.js";
+} from "./chunk.35D7BDRG.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";

package/dist/chunks/{chunk.O3TREWCC.js → chunk.QWW7D2EF.js}

@@ -4,15 +4,15 @@ import {
 import {
   FormControlController
 } from "./chunk.KVKRZJS7.js";
-import {
-  watch
-} from "./chunk.X2OQMWGY.js";
 import {
   HasSlotController
 } from "./chunk.YEZS5ZR2.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -378,7 +378,8 @@ var SdInput = class extends SolidElement {
       this.size === "sm" ? "h-6" : "h-8",
       textSize,
       this.visuallyDisabled && "cursor-not-allowed"
-    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**

package/dist/chunks/{chunk.WZWSOE2S.js → chunk.TPRFXGPO.js}

@@ -1,25 +1,13 @@
-import {
-  SdTag
-} from "./chunk.EJMQUF44.js";
-import {
-  SdPopup
-} from "./chunk.CTZX4JSW.js";
 import {
   defaultValue
 } from "./chunk.GI7VDIWX.js";
 import {
   scrollIntoView
 } from "./chunk.WDWV53JP.js";
-import {
-  FormControlController
-} from "./chunk.KVKRZJS7.js";
 import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
-import {
-  SdIcon
-} from "./chunk.PS2S6VDP.js";
 import {
   animateTo,
   stopAnimations
@@ -28,14 +16,17 @@ import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
 import {
-  watch
-} from "./chunk.X2OQMWGY.js";
+  FormControlController
+} from "./chunk.KVKRZJS7.js";
 import {
   HasSlotController
 } from "./chunk.YEZS5ZR2.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -643,11 +634,6 @@ var SdSelect = class extends SolidElement {
     )}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-popup></div><div class="text-sm text-neutral-700 mt-2" part="form-control-help-text" id="help-text" aria-hidden="${hasHelpText ? "false" : "true"}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
-SdSelect.dependencies = {
-  "sd-icon": SdIcon,
-  "sd-popup": SdPopup,
-  "sd-tag": SdTag
-};
 /**
  * Inherits global stylesheet including TailwindCSS
  */

package/dist/chunks/{chunk.PQNIAIWQ.js → chunk.TYYOT3JJ.js}

@@ -1,6 +1,9 @@
 import {
   SdRadio
-} from "./chunk.VSY4EUFN.js";
+} from "./chunk.BALWGQRW.js";
+import {
+  SdButtonGroup
+} from "./chunk.HP5TMUCE.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -8,14 +11,11 @@ import {
   valueMissingValidityState
 } from "./chunk.KVKRZJS7.js";
 import {
-  SdButtonGroup
-} from "./chunk.HP5TMUCE.js";
+  HasSlotController
+} from "./chunk.YEZS5ZR2.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
-import {
-  HasSlotController
-} from "./chunk.YEZS5ZR2.js";
 import {
   SolidElement,
   customElement

package/dist/chunks/{chunk.VBQLCQSN.js → chunk.UFBRSKVR.js}

@@ -2,6 +2,17 @@ import {
   getTabbableBoundary
 } from "./chunk.XHCTCU2Q.js";
 
+// 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/modal.ts
 var activeModals = [];
 var Modal = class {
@@ -53,5 +64,6 @@ var Modal = class {
 };
 
 export {
+  getDeepActiveElement,
   Modal
 };

package/dist/chunks/{chunk.V5TII4MB.js → chunk.XHFS2AN7.js}

@@ -1,9 +1,3 @@
-import {
-  SdTag
-} from "./chunk.EJMQUF44.js";
-import {
-  SdPopup
-} from "./chunk.CTZX4JSW.js";
 import {
   defaultValue
 } from "./chunk.GI7VDIWX.js";
@@ -19,16 +13,10 @@ import {
 import {
   scrollIntoView
 } from "./chunk.WDWV53JP.js";
-import {
-  FormControlController
-} from "./chunk.KVKRZJS7.js";
 import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
-import {
-  SdIcon
-} from "./chunk.PS2S6VDP.js";
 import {
   animateTo,
   stopAnimations
@@ -37,14 +25,17 @@ import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
 import {
-  watch
-} from "./chunk.X2OQMWGY.js";
+  FormControlController
+} from "./chunk.KVKRZJS7.js";
 import {
   HasSlotController
 } from "./chunk.YEZS5ZR2.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -814,11 +805,6 @@ var SdCombobox = class extends SolidElement {
     )}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox" class="overflow-y-scroll">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-popup></div><div part="form-control-help-text" id="help-text" class="text-sm text-neutral-700 mt-2" aria-hidden="${!hasHelpText}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
-SdCombobox.dependencies = {
-  "sd-icon": SdIcon,
-  "sd-popup": SdPopup,
-  "sd-tag": SdTag
-};
 SdCombobox.styles = [
   ...SolidElement.styles,
   css`:host{display:block;position:relative;width:100%}:host([required]) #label:after{content:" *"}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-tag::part(content){display:inline-block;max-width:var(--tag-max-width,15ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-bg-opacity,1))}[part=filtered-listbox] sd-optgroup:first-of-type{--display-divider:none}mark{background-color:transparent;color:inherit;font-weight:700}`

package/dist/components/accordion/accordion.js

@@ -1,7 +1,9 @@
 import {
   SdAccordion
-} from "../../chunks/chunk.T4ZCLZI2.js";
+} from "../../chunks/chunk.35D7BDRG.js";
 import "../../chunks/chunk.N4LHE3QK.js";
+import "../../chunks/chunk.EY4JPJJQ.js";
+import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.PS2S6VDP.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
@@ -9,12 +11,10 @@ import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.XS4QJO4N.js";
-import "../../chunks/chunk.EY4JPJJQ.js";
-import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.G4WRYNRZ.js";
 import "../../chunks/chunk.L4ICI7XS.js";
+import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.TXYWAHFM.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/accordion-group/accordion-group.js

@@ -1,8 +1,10 @@
 import {
   SdAccordionGroup
 } from "../../chunks/chunk.Q7SDLREI.js";
-import "../../chunks/chunk.T4ZCLZI2.js";
+import "../../chunks/chunk.35D7BDRG.js";
 import "../../chunks/chunk.N4LHE3QK.js";
+import "../../chunks/chunk.EY4JPJJQ.js";
+import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.PS2S6VDP.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
@@ -10,12 +12,10 @@ import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.XS4QJO4N.js";
-import "../../chunks/chunk.EY4JPJJQ.js";
-import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.G4WRYNRZ.js";
 import "../../chunks/chunk.L4ICI7XS.js";
+import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.TXYWAHFM.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/animation/animation.js

@@ -1,8 +1,8 @@
 import {
   SdAnimation
-} from "../../chunks/chunk.OX2URSR7.js";
-import "../../chunks/chunk.X2OQMWGY.js";
+} from "../../chunks/chunk.7T42VK6H.js";
 import "../../chunks/chunk.TJOP7HQP.js";
+import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.TXYWAHFM.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/audio/audio.d.ts

@@ -1,6 +1,8 @@
+import '../button/button';
+import '../icon/icon';
 import { Wave } from './wave';
 import SolidElement from '../../internal/solid-element';
-import type SdDrawer from '../drawer/drawer';
+import SdDrawer from '../drawer/drawer';
 export default class SdAudio extends SolidElement {
     private readonly localize;
     private readonly hasSlotController;

package/dist/components/audio/audio.js

@@ -1,10 +1,21 @@
 import {
   SdAudio
-} from "../../chunks/chunk.VMVFMQ3Q.js";
+} from "../../chunks/chunk.BO6G26AO.js";
+import "../../chunks/chunk.ZE3C43AX.js";
+import "../../chunks/chunk.LA5LTAEA.js";
+import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
+import "../../chunks/chunk.PS2S6VDP.js";
+import "../../chunks/chunk.7WEXXSFH.js";
+import "../../chunks/chunk.P52GZVKG.js";
+import "../../chunks/chunk.RPB53XXV.js";
+import "../../chunks/chunk.7VPFFNHR.js";
+import "../../chunks/chunk.4TPOL3LB.js";
+import "../../chunks/chunk.XS4QJO4N.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.G4WRYNRZ.js";
 import "../../chunks/chunk.L4ICI7XS.js";
+import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.TXYWAHFM.js";
 import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.S3NI7NKU.js";

package/dist/components/button/button.js

@@ -1,13 +1,13 @@
 import {
   SdButton
-} from "../../chunks/chunk.X54F4QNG.js";
+} from "../../chunks/chunk.ZE3C43AX.js";
 import "../../chunks/chunk.LA5LTAEA.js";
 import "../../chunks/chunk.KVKRZJS7.js";
-import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.G4WRYNRZ.js";
 import "../../chunks/chunk.L4ICI7XS.js";
+import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.TXYWAHFM.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/carousel/carousel.js

@@ -1,10 +1,12 @@
 import {
   SdCarousel
-} from "../../chunks/chunk.WFNCHKPE.js";
+} from "../../chunks/chunk.OXCJX3LE.js";
 import "../../chunks/chunk.F4VGSDIW.js";
 import "../../chunks/chunk.2LMWBUBT.js";
 import "../../chunks/chunk.NOWCQZBS.js";
 import "../../chunks/chunk.TK6PTMFF.js";
+import "../../chunks/chunk.EY4JPJJQ.js";
+import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.PS2S6VDP.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
@@ -12,12 +14,10 @@ import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.XS4QJO4N.js";
-import "../../chunks/chunk.EY4JPJJQ.js";
-import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.G4WRYNRZ.js";
 import "../../chunks/chunk.L4ICI7XS.js";
+import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.TXYWAHFM.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/checkbox-group/checkbox-group.js

@@ -1,6 +1,7 @@
 import {
   SdCheckboxGroup
-} from "../../chunks/chunk.WCLY7RG6.js";
+} from "../../chunks/chunk.LY4LB7WU.js";
+import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.PS2S6VDP.js";
 import "../../chunks/chunk.7WEXXSFH.js";
 import "../../chunks/chunk.P52GZVKG.js";
@@ -9,7 +10,6 @@ import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.XS4QJO4N.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.TXYWAHFM.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {