@solid-design-system/components 5.15.2 → 5.15.4

package/dist-versioned/chunks/{chunk.B6FL47S6.js → chunk.VJDDGKX3.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -98,7 +98,7 @@ var SdVideo = class extends SolidElement {
       this.playing ? "opacity-0" : "opacity-100",
       this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
       "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-5-15-2-icon id="default-play-icon" library="_internal" name="start"></sd-5-15-2-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-5-15-4-icon id="default-play-icon" library="_internal" name="start"></sd-5-15-4-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
   }
 };
 SdVideo.styles = [
@@ -115,7 +115,7 @@ __decorateClass([
   property({ type: Boolean })
 ], SdVideo.prototype, "isBelowBreakpoint", 2);
 SdVideo = __decorateClass([
-  customElement("sd-5-15-2-video")
+  customElement("sd-5-15-4-video")
 ], SdVideo);
 
 export {

package/dist-versioned/chunks/{chunk.SGJLP4HM.js → chunk.VXNLEJ7N.js}

@@ -30,7 +30,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   animateTo,
   stopAnimations
@@ -208,7 +208,7 @@ var SdDrawer = class extends SolidElement {
         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-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:64px"><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 ms-4 absolute top-2 end-2"><sd-5-15-2-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-5-15-2-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-5-15-2-icon></sd-5-15-2-button></div></header>` : html`<sd-5-15-2-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-5-15-2-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-5-15-2-icon></sd-5-15-2-button>`}<div part="body" class="flex-auto block px-4 focus-visible:focus-outline !-outline-offset-2" 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></section>`;
+    )}" 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:64px"><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 ms-4 absolute top-2 end-2"><sd-5-15-4-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-5-15-4-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-5-15-4-icon></sd-5-15-4-button></div></header>` : html`<sd-5-15-4-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-5-15-4-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-5-15-4-icon></sd-5-15-4-button>`}<div part="body" class="flex-auto block px-4 focus-visible:focus-outline !-outline-offset-2" 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></section>`;
   }
 };
 SdDrawer.styles = [
@@ -249,7 +249,7 @@ __decorateClass([
   watch("contained", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleNoModalChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-5-15-2-drawer")
+  customElement("sd-5-15-4-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

package/dist-versioned/chunks/{chunk.GIS5TWPR.js → chunk.WKG46TY7.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -208,7 +208,7 @@ __decorateClass([
   watch("playbackRate")
 ], SdAnimation.prototype, "handlePlaybackRateChange", 1);
 SdAnimation = __decorateClass([
-  customElement("sd-5-15-2-animation")
+  customElement("sd-5-15-4-animation")
 ], SdAnimation);
 
 export {

package/dist-versioned/chunks/{chunk.SRLNYSZB.js → chunk.WO6TH2CW.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.js";
@@ -298,18 +298,18 @@ 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")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-5-15-2-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="mb-4">${this.isPlaying ? html`<slot name="pause-icon"><sd-5-15-2-icon class="text-xl" name="pause" library="_internal"></sd-5-15-2-icon></slot>` : html`<slot name="play-icon"><sd-5-15-2-icon class="text-xl" name="start" library="_internal"></sd-5-15-2-icon></slot>`}</sd-5-15-2-button><div class="flex items-center gap-6 justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx("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}" part="transcript"><sd-5-15-2-icon class="w-6 h-6" name="transcript" library="_internal"></sd-5-15-2-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-5-15-2-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-5-15-2-icon></button></div></div>`;
+    )}" aria-label="${this.localize.term("playbackSpeed")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-5-15-4-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="mb-4">${this.isPlaying ? html`<slot name="pause-icon"><sd-5-15-4-icon class="text-xl" name="pause" library="_internal"></sd-5-15-4-icon></slot>` : html`<slot name="play-icon"><sd-5-15-4-icon class="text-xl" name="start" library="_internal"></sd-5-15-4-icon></slot>`}</sd-5-15-4-button><div class="flex items-center gap-6 justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx("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}" part="transcript"><sd-5-15-4-icon class="w-6 h-6" name="transcript" library="_internal"></sd-5-15-4-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-5-15-4-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-5-15-4-icon></button></div></div>`;
     const renderTimestamps = html`<div class="${cx(
       "w-full flex justify-between",
       this.reversedLayout ? "mb-0.5" : "mt-0.5",
       this.animated && this.reversedLayout && "absolute bottom-0 left-0 !mb-4"
     )}" part="timestamps"><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "text-black")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "text-black")}">${this.duration}</div></div>`;
-    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 -mb-2"></canvas>` : null} ${!this.hideTimestamps && this.animated && this.reversedLayout ? renderTimestamps : null}<sd-5-15-2-range part="progress-slider" no-tooltip min="0" max="100" step="0.001" label="${this.localize.term("seekBar")}" @mousedown="${this.handleThumbGrab}" @touchstart="${this.handleThumbGrab}" @mouseup="${this.handleThumbRelease}" @touchend="${this.handleThumbRelease}" @sd-5-15-2-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-5-15-2-range></div>${this.hasSlotController.test("transcript") ? html`<sd-5-15-2-drawer><slot name="transcript"></slot></sd-5-15-2-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
+    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 -mb-2"></canvas>` : null} ${!this.hideTimestamps && this.animated && this.reversedLayout ? renderTimestamps : null}<sd-5-15-4-range part="progress-slider" no-tooltip min="0" max="100" step="0.001" label="${this.localize.term("seekBar")}" @mousedown="${this.handleThumbGrab}" @touchstart="${this.handleThumbGrab}" @mouseup="${this.handleThumbRelease}" @touchend="${this.handleThumbRelease}" @sd-5-15-4-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-5-15-4-range></div>${this.hasSlotController.test("transcript") ? html`<sd-5-15-4-drawer><slot name="transcript"></slot></sd-5-15-4-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
   }
 };
 SdAudio.styles = [
   ...SolidElement.styles,
-  css`sd-5-15-2-button::part(base){align-items:center;border-radius:var(--sd-border-radius-full,9999px);display:flex;height:var(--sd-spacing-12,3rem);justify-content:center;width:var(--sd-spacing-12,3rem)}sd-5-15-2-button::part(motion-wrapper){border-radius:var(--sd-border-radius-full,9999px)}sd-5-15-2-button::part(label){align-items:center;display:flex;flex-grow:0}sd-5-15-2-range::part(form-control-label){display:none}:host([inverted]) sd-5-15-2-range::part(thumb){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));outline-color:rgb(var(--sd-color-white,255 255 255)/1)}:host([animated]) sd-5-15-2-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-5-15-2-range::part(track){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-400,153 171 208)/var(--tw-bg-opacity,1))}:host([inverted]:not([animated])) sd-5-15-2-range::part(active-track){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1))}`
+  css`sd-5-15-4-button::part(base){align-items:center;border-radius:var(--sd-border-radius-full,9999px);display:flex;height:var(--sd-spacing-12,3rem);justify-content:center;width:var(--sd-spacing-12,3rem)}sd-5-15-4-button::part(motion-wrapper){border-radius:var(--sd-border-radius-full,9999px)}sd-5-15-4-button::part(label){align-items:center;display:flex;flex-grow:0}sd-5-15-4-range::part(form-control-label){display:none}:host([inverted]) sd-5-15-4-range::part(thumb){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));outline-color:rgb(var(--sd-color-white,255 255 255)/1)}:host([animated]) sd-5-15-4-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-5-15-4-range::part(track){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-400,153 171 208)/var(--tw-bg-opacity,1))}:host([inverted]:not([animated])) sd-5-15-4-range::part(active-track){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1))}`
 ];
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "reversed-layout" })
@@ -351,13 +351,13 @@ __decorateClass([
   query('[part="audio-player"]')
 ], SdAudio.prototype, "audioPlayerContainer", 2);
 __decorateClass([
-  query("sd-5-15-2-drawer")
+  query("sd-5-15-4-drawer")
 ], SdAudio.prototype, "drawer", 2);
 __decorateClass([
   query("canvas")
 ], SdAudio.prototype, "canvas", 2);
 SdAudio = __decorateClass([
-  customElement("sd-5-15-2-audio")
+  customElement("sd-5-15-4-audio")
 ], SdAudio);
 
 export {

package/dist-versioned/chunks/chunk.XCQC3F3H.js

@@ -15,7 +15,7 @@ var FormControlController = class {
       const disabled = this.options.disabled(this.host);
       const name = this.options.name(this.host);
       const value = this.options.value(this.host);
-      const isButton = this.host.tagName.toLowerCase() === "sd-5-15-2-button";
+      const isButton = this.host.tagName.toLowerCase() === "sd-5-15-4-button";
       if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
         if (Array.isArray(value)) {
           value.forEach((val) => {
@@ -40,7 +40,7 @@ var FormControlController = class {
         event.stopImmediatePropagation();
         const invalidElements = (_b = this.form) == null ? void 0 : _b.querySelectorAll("[data-invalid]");
         const sdRadioGroups = Array.from(invalidElements).filter(
-          (element) => element.tagName.toLowerCase() === "sd-5-15-2-radio-group"
+          (element) => element.tagName.toLowerCase() === "sd-5-15-4-radio-group"
         );
         sdRadioGroups.forEach((radioGroup) => {
           var _a2, _b2;
@@ -88,7 +88,7 @@ var FormControlController = class {
       },
       reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
       setValue: (input, value) => input.value = value,
-      assumeInteractionOn: ["sd-5-15-2-input"]
+      assumeInteractionOn: ["sd-5-15-4-input"]
     }, options);
   }
   hostConnected() {

package/dist-versioned/chunks/{chunk.KPWKRZGL.js → chunk.YTVIW7VH.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass,
   __spreadValues
@@ -37,8 +37,8 @@ var SdTabGroup = class extends SolidElement {
   }
   connectedCallback() {
     const whenAllDefined = Promise.all([
-      customElements.whenDefined("sd-5-15-2-tab"),
-      customElements.whenDefined("sd-5-15-2-tab-panel")
+      customElements.whenDefined("sd-5-15-4-tab"),
+      customElements.whenDefined("sd-5-15-4-tab-panel")
     ]);
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => {
@@ -81,20 +81,20 @@ var SdTabGroup = class extends SolidElement {
   }
   getAllTabs(options = { includeDisabled: true }) {
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
-    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-5-15-2-tab" ? el : el.querySelector("sd-5-15-2-tab")).filter((el) => {
-      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-5-15-2-tab" : el.tagName.toLowerCase() === "sd-5-15-2-tab" && !el.disabled;
+    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-5-15-4-tab" ? el : el.querySelector("sd-5-15-4-tab")).filter((el) => {
+      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-5-15-4-tab" : el.tagName.toLowerCase() === "sd-5-15-4-tab" && !el.disabled;
     });
   }
   getAllPanels() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-15-2-tab-panel");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-15-4-tab-panel");
   }
   getActiveTab() {
     return this.tabs.find((t) => t.matches(":focus"));
   }
   handleClick(event) {
     const target = event.target;
-    const tab = target.closest("sd-5-15-2-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-15-2-tab-group");
+    const tab = target.closest("sd-5-15-4-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-15-4-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -104,8 +104,8 @@ var SdTabGroup = class extends SolidElement {
   }
   handleKeyDown(event) {
     const target = event.target;
-    const tab = target.closest("sd-5-15-2-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-15-2-tab-group");
+    const tab = target.closest("sd-5-15-4-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-15-4-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -132,7 +132,7 @@ var SdTabGroup = class extends SolidElement {
     if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
       const activeEl = this.tabs.find((t) => t.matches(":focus"));
       const isRtl = this.localize.dir() === "rtl";
-      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-5-15-2-tab") {
+      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-5-15-4-tab") {
         let index = this.tabs.indexOf(activeEl);
         if (event.key === "Home") {
           index = 0;
@@ -253,15 +253,15 @@ var SdTabGroup = class extends SolidElement {
     return html`<div part="base" class="${cx("flex flex-col rounded-none")}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}"><div part="nav" class="${cx(this.hasScrollControls && "relative py-0 px-12")}">${this.hasScrollControls ? html`<button part="scroll-button--start" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${ifDefined(!this.canScroll.left || void 0)}" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "left-auto right-0"
-    )}" @click="${this.handleScrollToStart}"><sd-5-15-2-icon library="_internal" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-15-2-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist">${((_a = this.activeTab) == null ? void 0 : _a.variant) !== "container" ? html`<div part="active-tab-indicator" id="indicator" class="absolute h-1 bg-accent bottom-0 transition-[transform,width] duration-medium ease-in-out z-30"></div>` : ""}<div part="separation" class="border-neutral-400 absolute w-full h-0.25 bottom-0 border-b z-10"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${ifDefined(!this.canScroll.right || void 0)}" class="${cx(
+    )}" @click="${this.handleScrollToStart}"><sd-5-15-4-icon library="_internal" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-15-4-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist">${((_a = this.activeTab) == null ? void 0 : _a.variant) !== "container" ? html`<div part="active-tab-indicator" id="indicator" class="absolute h-1 bg-accent bottom-0 transition-[transform,width] duration-medium ease-in-out z-30"></div>` : ""}<div part="separation" class="border-neutral-400 absolute w-full h-0.25 bottom-0 border-b z-10"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${ifDefined(!this.canScroll.right || void 0)}" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "right-auto left-0"
-    )}" @click="${this.handleScrollToEnd}"><sd-5-15-2-icon library="_internal" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-15-2-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
+    )}" @click="${this.handleScrollToEnd}"><sd-5-15-4-icon library="_internal" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-15-4-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
   }
 };
 SdTabGroup.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}::slotted(sd-5-15-2-tab-panel){--padding:1rem 0}::slotted(sd-5-15-2-tab-panel:focus-visible){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}`
+  css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}::slotted(sd-5-15-4-tab-panel){--padding:1rem 0}::slotted(sd-5-15-4-tab-panel:focus-visible){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -294,7 +294,7 @@ __decorateClass([
   debounce(20)
 ], SdTabGroup.prototype, "handleScroll", 1);
 SdTabGroup = __decorateClass([
-  customElement("sd-5-15-2-tab-group")
+  customElement("sd-5-15-4-tab-group")
 ], SdTabGroup);
 
 export {

package/dist-versioned/chunks/{chunk.DIXRYCRP.js → chunk.ZCJO2MVE.js}

@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -126,7 +126,7 @@ __decorateClass([
   watch(["name", "src", "library"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-5-15-2-icon")
+  customElement("sd-5-15-4-icon")
 ], SdIcon);
 
 export {

package/dist-versioned/components/accordion/accordion.d.ts

@@ -21,6 +21,6 @@ export default class SdAccordion extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-accordion': SdAccordion;
+        'sd-5-15-4-accordion': SdAccordion;
     }
 }

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

@@ -1,9 +1,9 @@
 import {
   SdAccordion
-} from "../../chunks/chunk.PBEPE2U7.js";
+} from "../../chunks/chunk.ADMDIP2N.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.DIXRYCRP.js";
+import "../../chunks/chunk.ZCJO2MVE.js";
 import "../../chunks/chunk.6JH5RYK5.js";
 import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.M4ZYKLLS.js";
@@ -14,7 +14,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.HIAKAB7R.js";
 import "../../chunks/chunk.7VEM2IPR.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.NXS7DO7N.js";
+import "../../chunks/chunk.RM5CDV7K.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/components/accordion-group/accordion-group.d.ts

@@ -11,6 +11,6 @@ export default class SdAccordionGroup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-accordion-group': SdAccordionGroup;
+        'sd-5-15-4-accordion-group': SdAccordionGroup;
     }
 }

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

@@ -1,10 +1,10 @@
 import {
   SdAccordionGroup
-} from "../../chunks/chunk.4I4QBVGB.js";
-import "../../chunks/chunk.PBEPE2U7.js";
+} from "../../chunks/chunk.B253CY3Z.js";
+import "../../chunks/chunk.ADMDIP2N.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.DIXRYCRP.js";
+import "../../chunks/chunk.ZCJO2MVE.js";
 import "../../chunks/chunk.6JH5RYK5.js";
 import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.M4ZYKLLS.js";
@@ -15,7 +15,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.HIAKAB7R.js";
 import "../../chunks/chunk.7VEM2IPR.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.NXS7DO7N.js";
+import "../../chunks/chunk.RM5CDV7K.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/components/animation/animation.d.ts

@@ -34,6 +34,6 @@ export default class SdAnimation extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-animation': SdAnimation;
+        'sd-5-15-4-animation': SdAnimation;
     }
 }

package/dist-versioned/components/animation/animation.js

@@ -1,9 +1,9 @@
 import {
   SdAnimation
-} from "../../chunks/chunk.GIS5TWPR.js";
+} from "../../chunks/chunk.WKG46TY7.js";
 import "../../chunks/chunk.TJOP7HQP.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.NXS7DO7N.js";
+import "../../chunks/chunk.RM5CDV7K.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -57,6 +57,6 @@ export default class SdAudio extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-audio': SdAudio;
+        'sd-5-15-4-audio': SdAudio;
     }
 }

package/dist-versioned/components/audio/audio.js

@@ -1,18 +1,18 @@
 import {
   SdAudio
-} from "../../chunks/chunk.SRLNYSZB.js";
-import "../../chunks/chunk.SGJLP4HM.js";
+} from "../../chunks/chunk.WO6TH2CW.js";
+import "../../chunks/chunk.VXNLEJ7N.js";
 import "../../chunks/chunk.SF6AUNJF.js";
 import "../../chunks/chunk.EDMG7C5H.js";
 import "../../chunks/chunk.UMIKFOMI.js";
 import "../../chunks/chunk.WDWV53JP.js";
-import "../../chunks/chunk.32WTYFY6.js";
-import "../../chunks/chunk.VGC5A42Q.js";
+import "../../chunks/chunk.IJCSM2YM.js";
+import "../../chunks/chunk.KFCKRUYW.js";
 import "../../chunks/chunk.XCQC3F3H.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.DIXRYCRP.js";
+import "../../chunks/chunk.ZCJO2MVE.js";
 import "../../chunks/chunk.6JH5RYK5.js";
 import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.M4ZYKLLS.js";
@@ -23,7 +23,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.HIAKAB7R.js";
 import "../../chunks/chunk.7VEM2IPR.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.NXS7DO7N.js";
+import "../../chunks/chunk.RM5CDV7K.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.S3NI7NKU.js";

package/dist-versioned/components/badge/badge.d.ts

@@ -8,6 +8,6 @@ export default class SdBadge extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-badge': SdBadge;
+        'sd-5-15-4-badge': SdBadge;
     }
 }

package/dist-versioned/components/badge/badge.js

@@ -1,7 +1,7 @@
 import {
   SdBadge
-} from "../../chunks/chunk.CNDCBFFV.js";
-import "../../chunks/chunk.NXS7DO7N.js";
+} from "../../chunks/chunk.IOYXRMSA.js";
+import "../../chunks/chunk.RM5CDV7K.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/components/brandshape/brandshape.d.ts

@@ -25,7 +25,7 @@ export default class SdBrandshape extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-brandshape': SdBrandshape;
+        'sd-5-15-4-brandshape': SdBrandshape;
     }
 }
 export {};

package/dist-versioned/components/brandshape/brandshape.js

@@ -1,7 +1,7 @@
 import {
   SdBrandshape
-} from "../../chunks/chunk.HV3AJIJO.js";
-import "../../chunks/chunk.NXS7DO7N.js";
+} from "../../chunks/chunk.S7FUQC6B.js";
+import "../../chunks/chunk.RM5CDV7K.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/components/breadcrumb/breadcrumb.d.ts

@@ -22,6 +22,6 @@ export default class SdBreadcrumb extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-breadcrumb': SdBreadcrumb;
+        'sd-5-15-4-breadcrumb': SdBreadcrumb;
     }
 }

package/dist-versioned/components/breadcrumb/breadcrumb.js

@@ -1,10 +1,10 @@
 import {
   SdBreadcrumb
-} from "../../chunks/chunk.WUIOLD72.js";
+} from "../../chunks/chunk.KGOTQFL4.js";
 import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.HIAKAB7R.js";
 import "../../chunks/chunk.7VEM2IPR.js";
-import "../../chunks/chunk.NXS7DO7N.js";
+import "../../chunks/chunk.RM5CDV7K.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/components/breadcrumb-item/breadcrumb-item.d.ts

@@ -14,6 +14,6 @@ export default class SdBreadcrumbItem extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-breadcrumb-item': SdBreadcrumbItem;
+        'sd-5-15-4-breadcrumb-item': SdBreadcrumbItem;
     }
 }

package/dist-versioned/components/breadcrumb-item/breadcrumb-item.js

@@ -1,11 +1,11 @@
 import {
   SdBreadcrumbItem
-} from "../../chunks/chunk.BMFACTFH.js";
+} from "../../chunks/chunk.HMSJI72P.js";
 import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.HIAKAB7R.js";
 import "../../chunks/chunk.7VEM2IPR.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.NXS7DO7N.js";
+import "../../chunks/chunk.RM5CDV7K.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/components/button/button.d.ts

@@ -48,6 +48,6 @@ export default class SdButton extends SolidElement implements SolidFormControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-button': SdButton;
+        'sd-5-15-4-button': SdButton;
     }
 }

package/dist-versioned/components/button/button.js

@@ -1,14 +1,14 @@
 import {
   SdButton
-} from "../../chunks/chunk.32WTYFY6.js";
-import "../../chunks/chunk.VGC5A42Q.js";
+} from "../../chunks/chunk.IJCSM2YM.js";
+import "../../chunks/chunk.KFCKRUYW.js";
 import "../../chunks/chunk.XCQC3F3H.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.HIAKAB7R.js";
 import "../../chunks/chunk.7VEM2IPR.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.NXS7DO7N.js";
+import "../../chunks/chunk.RM5CDV7K.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/components/button-group/button-group.d.ts

@@ -13,6 +13,6 @@ export default class SdButtonGroup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-button-group': SdButtonGroup;
+        'sd-5-15-4-button-group': SdButtonGroup;
     }
 }

package/dist-versioned/components/button-group/button-group.js

@@ -1,7 +1,7 @@
 import {
   SdButtonGroup
-} from "../../chunks/chunk.ANOMYZE3.js";
-import "../../chunks/chunk.NXS7DO7N.js";
+} from "../../chunks/chunk.VAUKIGVG.js";
+import "../../chunks/chunk.RM5CDV7K.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/components/carousel/carousel.d.ts

@@ -61,6 +61,6 @@ export default class SdCarousel extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-carousel': SdCarousel;
+        'sd-5-15-4-carousel': SdCarousel;
     }
 }

package/dist-versioned/components/carousel/carousel.js

@@ -1,13 +1,13 @@
 import {
   SdCarousel
-} from "../../chunks/chunk.HMK6KRAR.js";
+} from "../../chunks/chunk.LFSEKQNM.js";
 import "../../chunks/chunk.W2YDXTG5.js";
 import "../../chunks/chunk.FNYEXUNK.js";
 import "../../chunks/chunk.NOWCQZBS.js";
-import "../../chunks/chunk.RUNTBTHS.js";
+import "../../chunks/chunk.64ZTG326.js";
 import "../../chunks/chunk.F4VGSDIW.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.DIXRYCRP.js";
+import "../../chunks/chunk.ZCJO2MVE.js";
 import "../../chunks/chunk.6JH5RYK5.js";
 import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.M4ZYKLLS.js";
@@ -18,7 +18,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.HIAKAB7R.js";
 import "../../chunks/chunk.7VEM2IPR.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.NXS7DO7N.js";
+import "../../chunks/chunk.RM5CDV7K.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/components/carousel-item/carousel-item.d.ts

@@ -7,6 +7,6 @@ export default class SdCarouselItem extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-carousel-item': SdCarouselItem;
+        'sd-5-15-4-carousel-item': SdCarouselItem;
     }
 }

package/dist-versioned/components/carousel-item/carousel-item.js

@@ -1,7 +1,7 @@
 import {
   SdCarouselItem
-} from "../../chunks/chunk.RUNTBTHS.js";
-import "../../chunks/chunk.NXS7DO7N.js";
+} from "../../chunks/chunk.64ZTG326.js";
+import "../../chunks/chunk.RM5CDV7K.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/components/checkbox/checkbox.d.ts

@@ -38,6 +38,6 @@ export default class SdCheckbox extends SolidElement implements SolidFormControl
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-2-checkbox': SdCheckbox;
+        'sd-5-15-4-checkbox': SdCheckbox;
     }
 }