@solid-design-system/components 7.0.3 → 7.1.0

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

@@ -48,7 +48,7 @@ var SubmenuController = class {
       if (event.target === this.host) {
         event.preventDefault();
         event.stopPropagation();
-      } else if (event.target instanceof Element && (event.target.tagName === "sd-7-0-3-menu-item" || ((_a = event.target.role) == null ? void 0 : _a.startsWith("menuitem")))) {
+      } else if (event.target instanceof Element && (event.target.tagName === "sd-7-1-0-menu-item" || ((_a = event.target.role) == null ? void 0 : _a.startsWith("menuitem")))) {
         const type = event.target.getAttribute("type");
         if (type !== "checkbox") {
           this.disableSubmenu();
@@ -69,7 +69,7 @@ var SubmenuController = class {
     // Set the safe triangle values for the submenu when the position changes
     this.handlePopupReposition = () => {
       const submenuSlot = this.host.renderRoot.querySelector("slot[name='submenu']");
-      const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sd-7-0-3-menu")[0];
+      const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sd-7-1-0-menu")[0];
       const isRtl = getComputedStyle(this.host).direction === "rtl";
       if (!menu) {
         return;
@@ -141,7 +141,7 @@ var SubmenuController = class {
     }
     let menuItems = null;
     for (const elt of submenuSlot.assignedElements()) {
-      menuItems = elt.querySelectorAll("sd-7-0-3-menu-item, [role^='menuitem']");
+      menuItems = elt.querySelectorAll("sd-7-1-0-menu-item, [role^='menuitem']");
       if (menuItems.length !== 0) {
         break;
       }
@@ -220,7 +220,7 @@ var SubmenuController = class {
     if (!this.isConnected) {
       return html`<slot name="submenu" hidden></slot>`;
     }
-    return html`<sd-7-0-3-popup ${ref(this.popupRef)} placement="${isRtl ? "left-start" : "right-start"}" anchor="anchor" flip flip-fallback-strategy="best-fit" skidding="${this.skidding}" strategy="fixed" auto-size="vertical" auto-size-padding="10"><slot name="submenu"></slot></sd-7-0-3-popup>`;
+    return html`<sd-7-1-0-popup ${ref(this.popupRef)} placement="${isRtl ? "left-start" : "right-start"}" anchor="anchor" flip flip-fallback-strategy="best-fit" skidding="${this.skidding}" strategy="fixed" auto-size="vertical" auto-size-padding="10"><slot name="submenu"></slot></sd-7-1-0-popup>`;
   }
 };
 

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

@@ -24,7 +24,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-7-0-3-tab-${this.attrId}`;
+    this.componentId = `sd-7-1-0-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.localize = new LocalizeController(this);
     this.variant = "default";
@@ -62,17 +62,17 @@ var SdTab = class extends SolidElement {
       "outline-hidden focus-visible:focus-outline outline-2 !-outline-offset-2 transition-all duration-fast ease-in-out",
       this.variant === "container" ? "tab-container-border bg-white rounded-[4px_4px_0_0]" : "navigable-border-radius",
       this.variant === "container" && this.active && "tab--active-container-border bg-white",
-      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:sd-7-0-3-tab--hover-color-background",
-      this.active && "z-20 sd-7-0-3-tab--active-color-text"
+      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:sd-7-1-0-tab--hover-color-background",
+      this.active && "z-20 sd-7-1-0-tab--active-color-text"
     )}" tabindex="${!this.active || this.disabled ? "-1" : "0"}"><div class="${cx("flex h-full items-center justify-center whitespace-nowrap")}"><slot name="left" class="${cx(
       slots.left && "block pr-2",
-      this.disabled || this.visuallyDisabled ? "sd-7-0-3-tab--disabled-color-text" : this.active ? "sd-7-0-3-tab--active-color-text" : "sd-7-0-3-tab-color-text"
+      this.disabled || this.visuallyDisabled ? "sd-7-1-0-tab--disabled-color-text" : this.active ? "sd-7-1-0-tab--active-color-text" : "sd-7-1-0-tab-color-text"
     )}"></slot><slot class="${cx(
-      this.disabled || this.visuallyDisabled ? "sd-7-0-3-tab--disabled-color-text" : this.active ? "sd-7-0-3-tab--active-color-text" : "sd-7-0-3-tab-color-text"
+      this.disabled || this.visuallyDisabled ? "sd-7-1-0-tab--disabled-color-text" : this.active ? "sd-7-1-0-tab--active-color-text" : "sd-7-1-0-tab-color-text"
     )}"></slot>${this.variant === "container" ? html`<div part="active-tab-indicator" class="${cx(
       "absolute bottom-0 h-1 bg-accent w-3/4 bottom-0 group-hover:w-[calc(100%-2px)] navigable__current-indicator-height navigable__current-indicator-border-radius"
     )}"></div>` : ""}<div part="hover-bottom-border" class="${cx(
-      !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-7-0-3-tab-color-border"
+      !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-7-1-0-tab-color-border"
     )}"></div></div></div>`;
   }
 };
@@ -109,7 +109,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-7-0-3-tab")
+  customElement("sd-7-1-0-tab")
 ], SdTab);
 
 export {

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

@@ -138,7 +138,7 @@ var SdDrawer = class extends SolidElement {
         end: "top-0 end-0 bottom-auto start-auto w-[var(--width)] h-full",
         start: "top-0 end-auto bottom-auto start-0 w-[var(--width)] h-full"
       }[this.placement]
-    )}" 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-7-0-3-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-7-0-3-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-7-0-3-icon></sd-7-0-3-button></div></header>` : html`<sd-7-0-3-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-7-0-3-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-7-0-3-icon></sd-7-0-3-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></dialog>`;
+    )}" 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-7-1-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-7-1-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-7-1-0-icon></sd-7-1-0-button></div></header>` : html`<sd-7-1-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-7-1-0-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-7-1-0-icon></sd-7-1-0-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></dialog>`;
   }
 };
 SdDrawer.styles = [
@@ -174,7 +174,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleOpenChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-7-0-3-drawer")
+  customElement("sd-7-1-0-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

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

@@ -209,7 +209,7 @@ __decorateClass([
   watch("playbackRate")
 ], SdAnimation.prototype, "handlePlaybackRateChange", 1);
 SdAnimation = __decorateClass([
-  customElement("sd-7-0-3-animation")
+  customElement("sd-7-1-0-animation")
 ], SdAnimation);
 
 export {

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

@@ -324,7 +324,7 @@ __decorateClass([
   property({ attribute: "auto-size-padding", type: Number })
 ], SdPopup.prototype, "autoSizePadding", 2);
 SdPopup = __decorateClass([
-  customElement("sd-7-0-3-popup")
+  customElement("sd-7-1-0-popup")
 ], SdPopup);
 
 export {

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

@@ -25,11 +25,11 @@ var SdOptgroup = class extends SolidElement {
     this.label = "";
   }
   /**
-   * Syncs the disabled prop for all slotted sd-7-0-3-options when it is triggered
+   * Syncs the disabled prop for all slotted sd-7-1-0-options when it is triggered
    */
   handleDisableOptions() {
     const { disabled } = this;
-    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-7-0-3-option").forEach((opt) => {
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-7-1-0-option").forEach((opt) => {
       opt.disabled = disabled;
     });
   }
@@ -38,7 +38,7 @@ var SdOptgroup = class extends SolidElement {
   }
   render() {
     const { disabled } = this;
-    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-7-0-3-divider id="divider" class="pt-2 pb-4" part="divider"></sd-7-0-3-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
+    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-7-1-0-divider id="divider" class="pt-2 pb-4" part="divider"></sd-7-1-0-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
   }
 };
 SdOptgroup.styles = [
@@ -59,7 +59,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdOptgroup.prototype, "handleDisabledChange", 1);
 SdOptgroup = __decorateClass([
-  customElement("sd-7-0-3-optgroup")
+  customElement("sd-7-1-0-optgroup")
 ], SdOptgroup);
 
 export {

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

@@ -26,7 +26,7 @@ SdCarouselItem.styles = [
 :host{aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always;display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}::slotted(img){height:100%;width:100%;-o-object-fit:cover;object-fit:cover}`
 ];
 SdCarouselItem = __decorateClass([
-  customElement("sd-7-0-3-carousel-item")
+  customElement("sd-7-1-0-carousel-item")
 ], SdCarouselItem);
 
 export {

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

@@ -87,7 +87,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.frontVariant]
-    )}"></div><sd-7-0-3-button part="front-button" size="md" variant="${{
+    )}"></div><sd-7-1-0-button part="front-button" size="md" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -97,7 +97,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-7-0-3-icon library="_internal" name="reload" label="Flip to Back"></sd-7-0-3-icon></sd-7-0-3-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
+    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-7-1-0-icon library="_internal" name="reload" label="Flip to Back"></sd-7-1-0-icon></sd-7-1-0-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
       "flip-card__side flip-card__side--back overflow-hidden transition-transform duration-1000 ease-in-out",
       "flex focus-visible:focus-outline",
       "absolute top-0 left-0 w-full h-full justify-end text-left",
@@ -130,7 +130,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.backVariant]
-    )}"></div><sd-7-0-3-button size="md" part="back-button" variant="${{
+    )}"></div><sd-7-1-0-button size="md" part="back-button" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -140,7 +140,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-7-0-3-icon library="_internal" name="reload" label="Flip to Front"></sd-7-0-3-icon></sd-7-0-3-button></div></div>`;
+    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-7-1-0-icon library="_internal" name="reload" label="Flip to Front"></sd-7-1-0-icon></sd-7-1-0-button></div></div>`;
   }
 };
 /**
@@ -176,7 +176,7 @@ __decorateClass([
   state()
 ], SdFlipcard.prototype, "activeSide", 2);
 SdFlipcard = __decorateClass([
-  customElement("sd-7-0-3-flipcard")
+  customElement("sd-7-1-0-flipcard")
 ], SdFlipcard);
 
 export {

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

@@ -300,19 +300,19 @@ 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-7-0-3-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-7-0-3-icon class="text-xl" name="pause" library="_internal"></sd-7-0-3-icon></slot>` : html`<slot name="play-icon"><sd-7-0-3-icon class="text-xl" name="play" library="_internal"></sd-7-0-3-icon></slot>`}</sd-7-0-3-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-7-0-3-icon class="w-6 h-6" name="transcript" library="_internal"></sd-7-0-3-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-7-0-3-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-7-0-3-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-7-1-0-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-7-1-0-icon class="text-xl" name="pause" library="_internal"></sd-7-1-0-icon></slot>` : html`<slot name="play-icon"><sd-7-1-0-icon class="text-xl" name="play" library="_internal"></sd-7-1-0-icon></slot>`}</sd-7-1-0-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-7-1-0-icon class="w-6 h-6" name="transcript" library="_internal"></sd-7-1-0-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-7-1-0-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-7-1-0-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-neutral-700")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "text-neutral-700")}">${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-7-0-3-range part="progress-slider" tooltip="hidden" 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-7-0-3-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-7-0-3-range></div>${this.hasSlotController.test("transcript") ? html`<sd-7-0-3-drawer><slot name="transcript"></slot></sd-7-0-3-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-7-0-3-theme-listener></sd-7-0-3-theme-listener>`;
+    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-7-1-0-range part="progress-slider" tooltip="hidden" 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-7-1-0-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-7-1-0-range></div>${this.hasSlotController.test("transcript") ? html`<sd-7-1-0-drawer><slot name="transcript"></slot></sd-7-1-0-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-7-1-0-theme-listener></sd-7-1-0-theme-listener>`;
   }
 };
 SdAudio.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-sd-7-0-3-button::part(base){display:flex;height:var(--sd-spacing-12,3rem);width:var(--sd-spacing-12,3rem);align-items:center;justify-content:center;border-radius:var(--sd-radius-full,624.9375rem)}sd-7-0-3-button::part(motion-wrapper){border-radius:var(--sd-radius-full,624.9375rem)}sd-7-0-3-button::part(label){display:flex;flex-grow:0;align-items:center}sd-7-0-3-range::part(form-control-label){display:none}:host([inverted]) sd-7-0-3-range::part(thumb){outline-color:rgba(var(--sd-color-border-white,var(--sd-color-white,255 255 255)));background-color:rgba(var(--sd-color-icon-fill-white,rgba(var(--sd-color-white))))}:host([animated]) sd-7-0-3-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-7-0-3-range::part(track){background-color:rgba(var(--sd-audio__slide-bar--inverted-color-background,rgba(var(--sd-color-primary-400))))}:host([inverted]:not([animated])) sd-7-0-3-range::part(active-track){background-color:rgba(var(--sd-audio__track-bar--inverted-color-background,rgba(var(--sd-color-white))))}`
+sd-7-1-0-button::part(base){display:flex;height:var(--sd-spacing-12,3rem);width:var(--sd-spacing-12,3rem);align-items:center;justify-content:center;border-radius:var(--sd-radius-full,624.9375rem)}sd-7-1-0-button::part(motion-wrapper){border-radius:var(--sd-radius-full,624.9375rem)}sd-7-1-0-button::part(label){display:flex;flex-grow:0;align-items:center}sd-7-1-0-range::part(form-control-label){display:none}:host([inverted]) sd-7-1-0-range::part(thumb){outline-color:rgba(var(--sd-color-border-white,var(--sd-color-white,255 255 255)));background-color:rgba(var(--sd-color-icon-fill-white,rgba(var(--sd-color-white))))}:host([animated]) sd-7-1-0-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-7-1-0-range::part(track){background-color:rgba(var(--sd-audio__slide-bar--inverted-color-background,rgba(var(--sd-color-primary-400))))}:host([inverted]:not([animated])) sd-7-1-0-range::part(active-track){background-color:rgba(var(--sd-audio__track-bar--inverted-color-background,rgba(var(--sd-color-white))))}`
 ];
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "reversed-layout" })
@@ -354,13 +354,13 @@ __decorateClass([
   query('[part="audio-player"]')
 ], SdAudio.prototype, "audioPlayerContainer", 2);
 __decorateClass([
-  query("sd-7-0-3-drawer")
+  query("sd-7-1-0-drawer")
 ], SdAudio.prototype, "drawer", 2);
 __decorateClass([
   query("canvas")
 ], SdAudio.prototype, "canvas", 2);
 SdAudio = __decorateClass([
-  customElement("sd-7-0-3-audio")
+  customElement("sd-7-1-0-audio")
 ], SdAudio);
 
 export {

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

@@ -163,76 +163,76 @@ var SdButton = class extends SolidElement {
     const hasBorder = this.variant === "secondary";
     const variantBackgroundColors = {
       primary: this.inverted ? {
-        motionBackground: "sd-7-0-3-button--primary--inverted--hover-color-background group-active:sd-7-0-3-button--primary--inverted--active-color-background",
-        baseBackground: "hover:sd-7-0-3-button--primary--inverted--hover-color-background active:sd-7-0-3-button--primary--inverted--active-color-background"
+        motionBackground: "sd-7-1-0-button--primary--inverted--hover-color-background group-active:sd-7-1-0-button--primary--inverted--active-color-background",
+        baseBackground: "hover:sd-7-1-0-button--primary--inverted--hover-color-background active:sd-7-1-0-button--primary--inverted--active-color-background"
       } : {
-        motionBackground: "sd-7-0-3-button--primary--hover-color-background group-active:sd-7-0-3-button--primary--active-color-background",
-        baseBackground: "hover:sd-7-0-3-button--primary--hover-color-background active:sd-7-0-3-button--primary--active-color-background"
+        motionBackground: "sd-7-1-0-button--primary--hover-color-background group-active:sd-7-1-0-button--primary--active-color-background",
+        baseBackground: "hover:sd-7-1-0-button--primary--hover-color-background active:sd-7-1-0-button--primary--active-color-background"
       },
       secondary: this.inverted ? {
-        motionBackground: "sd-7-0-3-button--secondary--inverted--hover-color-background group-active:sd-7-0-3-button--secondary--inverted--active-color-background group-active:sd-7-0-3-button--secondary--inverted--active-color-text",
-        baseBackground: "hover:sd-7-0-3-button--secondary--inverted--hover-color-background active:sd-7-0-3-button--secondary--inverted--active-color-background"
+        motionBackground: "sd-7-1-0-button--secondary--inverted--hover-color-background group-active:sd-7-1-0-button--secondary--inverted--active-color-background group-active:sd-7-1-0-button--secondary--inverted--active-color-text",
+        baseBackground: "hover:sd-7-1-0-button--secondary--inverted--hover-color-background active:sd-7-1-0-button--secondary--inverted--active-color-background"
       } : {
-        motionBackground: "sd-7-0-3-button--secondary--hover-color-background group-active:sd-7-0-3-button--secondary--active-color-background",
-        baseBackground: "hover:sd-7-0-3-button--secondary--hover-color-background active:sd-7-0-3-button--secondary--active-color-background"
+        motionBackground: "sd-7-1-0-button--secondary--hover-color-background group-active:sd-7-1-0-button--secondary--active-color-background",
+        baseBackground: "hover:sd-7-1-0-button--secondary--hover-color-background active:sd-7-1-0-button--secondary--active-color-background"
       },
       tertiary: this.inverted ? {
-        motionBackground: "sd-7-0-3-button--tertiary--inverted--hover-color-background group-active:sd-7-0-3-button--tertiary--inverted--active-color-background group-active:sd-7-0-3-button--tertiary--inverted--active-color-text",
-        baseBackground: "hover:sd-7-0-3-button--tertiary--inverted--hover-color-background active:sd-7-0-3-button--tertiary--inverted--active-color-background"
+        motionBackground: "sd-7-1-0-button--tertiary--inverted--hover-color-background group-active:sd-7-1-0-button--tertiary--inverted--active-color-background group-active:sd-7-1-0-button--tertiary--inverted--active-color-text",
+        baseBackground: "hover:sd-7-1-0-button--tertiary--inverted--hover-color-background active:sd-7-1-0-button--tertiary--inverted--active-color-background"
       } : {
-        motionBackground: "sd-7-0-3-button--tertiary--hover-color-background group-active:sd-7-0-3-button--tertiary--active-color-background",
-        baseBackground: "hover:sd-7-0-3-button--tertiary--hover-color-background active:sd-7-0-3-button--tertiary--active-color-background"
+        motionBackground: "sd-7-1-0-button--tertiary--hover-color-background group-active:sd-7-1-0-button--tertiary--active-color-background",
+        baseBackground: "hover:sd-7-1-0-button--tertiary--hover-color-background active:sd-7-1-0-button--tertiary--active-color-background"
       },
       cta: this.inverted ? {
-        motionBackground: "sd-7-0-3-button--cta--inverted--hover-color-background group-active:sd-7-0-3-button--cta--inverted--active-color-background",
-        baseBackground: "hover:sd-7-0-3-button--cta--inverted--hover-color-background active:sd-7-0-3-button--cta--inverted--active-color-background"
+        motionBackground: "sd-7-1-0-button--cta--inverted--hover-color-background group-active:sd-7-1-0-button--cta--inverted--active-color-background",
+        baseBackground: "hover:sd-7-1-0-button--cta--inverted--hover-color-background active:sd-7-1-0-button--cta--inverted--active-color-background"
       } : {
         motionBackground: "bg-accent-500 group-active:bg-accent-700",
         baseBackground: "hover:bg-accent-500 active:bg-accent-700"
       }
     }[this.variant];
-    return html`<sd-7-0-3-theme-listener></sd-7-0-3-theme-listener><${tag} part="base" class="${cx(
+    return html`<sd-7-1-0-theme-listener></sd-7-1-0-theme-listener><${tag} part="base" class="${cx(
       `group relative z-10 font-md no-underline
         w-full align-middle inline-flex items-stretch justify-center
         transition-colors duration-fast ease-in-out
         select-none cursor-[inherit]`,
-      !this.hasUiMotion && "sd-7-0-3-button--simple-motion",
+      !this.hasUiMotion && "sd-7-1-0-button--simple-motion",
       !this.inverted ? "focus-visible:focus-outline" : "focus-visible:focus-outline-inverted",
       this.loading && "relative cursor-wait",
       (this.disabled || this.visuallyDisabled) && "cursor-not-allowed",
       {
         /* sizes, fonts */
-        sm: `varspacing-8 min-h-8 sd-7-0-3-button--size-sm-font-size sd-7-0-3-button-font-weight sd-7-0-3-button--secondary--size-sm-padding-block sd-7-0-3-button-border-radius`,
-        md: `varspacing-10 sd-7-0-3-button--size-md-height sd-7-0-3-button--size-md-font-size sd-7-0-3-button--secondary--size-md-padding-block sd-7-0-3-button-font-weight sd-7-0-3-button-border-radius`,
-        lg: `varspacing-12 sd-7-0-3-button--size-lg-height sd-7-0-3-button--size-lg-font-size sd-7-0-3-button--secondary--size-lg-padding-block sd-7-0-3-button-font-weight sd-7-0-3-button-border-radius`
+        sm: `varspacing-8 min-h-8 sd-7-1-0-button--size-sm-font-size sd-7-1-0-button-font-weight sd-7-1-0-button--secondary--size-sm-padding-block sd-7-1-0-button-border-radius`,
+        md: `varspacing-10 sd-7-1-0-button--size-md-height sd-7-1-0-button--size-md-font-size sd-7-1-0-button--secondary--size-md-padding-block sd-7-1-0-button-font-weight sd-7-1-0-button-border-radius`,
+        lg: `varspacing-12 sd-7-1-0-button--size-lg-height sd-7-1-0-button--size-lg-font-size sd-7-1-0-button--secondary--size-lg-padding-block sd-7-1-0-button-font-weight sd-7-1-0-button-border-radius`
       }[this.size],
       !slots["icon-only"] && {
         /* sizes, fonts */
-        sm: `${hasBorder ? "sd-7-0-3-button--secondary-padding-inline" : "sd-7-0-3-button--size-sm-padding-block sd-7-0-3-button-padding-inline"}`,
-        md: `${hasBorder ? "sd-7-0-3-button--secondary-padding-inline" : "sd-7-0-3-button--size-md-padding-block sd-7-0-3-button-padding-inline"}`,
-        lg: `${hasBorder ? "sd-7-0-3-button--secondary-padding-inline" : "sd-7-0-3-button--size-lg-padding-block sd-7-0-3-button-padding-inline"}`
+        sm: `${hasBorder ? "sd-7-1-0-button--secondary-padding-inline" : "sd-7-1-0-button--size-sm-padding-block sd-7-1-0-button-padding-inline"}`,
+        md: `${hasBorder ? "sd-7-1-0-button--secondary-padding-inline" : "sd-7-1-0-button--size-md-padding-block sd-7-1-0-button-padding-inline"}`,
+        lg: `${hasBorder ? "sd-7-1-0-button--secondary-padding-inline" : "sd-7-1-0-button--size-lg-padding-block sd-7-1-0-button-padding-inline"}`
       }[this.size],
       /**
        * Anatomy
        * */
       slots["icon-only"] && {
         sm: "px-1 aspect-square",
-        md: "sd-7-0-3-button--size-md--icon-only-padding-inline aspect-square",
+        md: "sd-7-1-0-button--size-md--icon-only-padding-inline aspect-square",
         lg: "px-[12px] aspect-square"
       }[this.size],
       {
         /* variants */
-        primary: !this.inverted ? `${this.visuallyDisabled ? "sd-7-0-3-button--primary--disabled-color-background border-neutral-500 text-white" : "sd-7-0-3-button--primary--default-color-background border-transparent sd-7-0-3-button--primary--default-color-text hover:sd-7-0-3-button--primary--hover-color-text active:sd-7-0-3-button--primary--active-color-text"}
-          disabled:sd-7-0-3-button--primary--disabled-color-background disabled:text-white` : `${this.visuallyDisabled ? "sd-7-0-3-button--inverted--disabled-color-background text-white border-neutral-500" : "sd-7-0-3-button--primary--inverted--default-color-text sd-7-0-3-button--primary--inverted--default-color-background border-white hover:sd-7-0-3-button--primary--inverted--hover-color-text active:sd-7-0-3-button--primary--inverted--active-color-text"}
-          disabled:sd-7-0-3-button--inverted--disabled-color-background disabled:text-white`,
-        secondary: !this.inverted ? `border sd-7-0-3-button-border-width ${this.visuallyDisabled ? "sd-7-0-3-button--secondary--disabled-color-text sd-7-0-3-button--secondary--disabled-color-border" : "sd-7-0-3-button--secondary--default-color-text sd-7-0-3-button--secondary--default-color-border hover:sd-7-0-3-button--secondary--hover-color-text hover:sd-7-0-3-button--secondary--hover-color-border active:sd-7-0-3-button--secondary--active-color-text active:sd-7-0-3-button--secondary--active-color-border"}
-          disabled:sd-7-0-3-button--secondary--disabled-color-text disabled:sd-7-0-3-button--secondary--disabled-color-border` : `border sd-7-0-3-button-border-width ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600" : "sd-7-0-3-button--secondary--inverted-color-text sd-7-0-3-button--secondary--inverted-color-border hover:sd-7-0-3-button--secondary--inverted-color-border hover:sd-7-0-3-button--secondary--inverted--hover-color-text active:sd-7-0-3-button--secondary--inverted--active-color-text active:border-primary-200"}
-          disabled:sd-7-0-3-button--inverted--disabled-color-border disabled:sd-7-0-3-button--inverted--disabled-color-text`,
-        tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-7-0-3-button--tertiary--disabled-color-text" : "sd-7-0-3-button--tertiary--default-color-text hover:sd-7-0-3-button--tertiary--hover-color-text active:sd-7-0-3-button--tertiary--active-color-text"}
-          disabled:sd-7-0-3-button--tertiary--disabled-color-text` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600" : "sd-7-0-3-button--tertiary--inverted-color-text hover:sd-7-0-3-button--tertiary--inverted--hover-color-text active:sd-7-0-3-button--tertiary--inverted--active-color-text"}
-          disabled:sd-7-0-3-button--inverted--disabled-color-text`,
-        cta: `${this.visuallyDisabled ? "sd-7-0-3-button--primary--disabled-color-background border-neutral-500" : "border-transparent"}
-          ${!this.inverted ? "text-white bg-accent disabled:sd-7-0-3-button--primary--disabled-color-background disabled:border-neutral-500 disabled:text-white" : "sd-7-0-3-button--cta--inverted--default-color-background sd-7-0-3-button--cta--inverted--default-color-text hover:sd-7-0-3-button--cta--inverted--hover-color-text active:sd-7-0-3-button--cta--inverted--active-color-text disabled:sd-7-0-3-button--inverted--disabled-color-background disabled:text-white"}`
+        primary: !this.inverted ? `${this.visuallyDisabled ? "sd-7-1-0-button--primary--disabled-color-background border-neutral-500 text-white" : "sd-7-1-0-button--primary--default-color-background border-transparent sd-7-1-0-button--primary--default-color-text hover:sd-7-1-0-button--primary--hover-color-text active:sd-7-1-0-button--primary--active-color-text"}
+          disabled:sd-7-1-0-button--primary--disabled-color-background disabled:text-white` : `${this.visuallyDisabled ? "sd-7-1-0-button--inverted--disabled-color-background text-white border-neutral-500" : "sd-7-1-0-button--primary--inverted--default-color-text sd-7-1-0-button--primary--inverted--default-color-background border-white hover:sd-7-1-0-button--primary--inverted--hover-color-text active:sd-7-1-0-button--primary--inverted--active-color-text"}
+          disabled:sd-7-1-0-button--inverted--disabled-color-background disabled:text-white`,
+        secondary: !this.inverted ? `border sd-7-1-0-button-border-width ${this.visuallyDisabled ? "sd-7-1-0-button--secondary--disabled-color-text sd-7-1-0-button--secondary--disabled-color-border" : "sd-7-1-0-button--secondary--default-color-text sd-7-1-0-button--secondary--default-color-border hover:sd-7-1-0-button--secondary--hover-color-text hover:sd-7-1-0-button--secondary--hover-color-border active:sd-7-1-0-button--secondary--active-color-text active:sd-7-1-0-button--secondary--active-color-border"}
+          disabled:sd-7-1-0-button--secondary--disabled-color-text disabled:sd-7-1-0-button--secondary--disabled-color-border` : `border sd-7-1-0-button-border-width ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600" : "sd-7-1-0-button--secondary--inverted-color-text sd-7-1-0-button--secondary--inverted-color-border hover:sd-7-1-0-button--secondary--inverted-color-border hover:sd-7-1-0-button--secondary--inverted--hover-color-text active:sd-7-1-0-button--secondary--inverted--active-color-text active:border-primary-200"}
+          disabled:sd-7-1-0-button--inverted--disabled-color-border disabled:sd-7-1-0-button--inverted--disabled-color-text`,
+        tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-7-1-0-button--tertiary--disabled-color-text" : "sd-7-1-0-button--tertiary--default-color-text hover:sd-7-1-0-button--tertiary--hover-color-text active:sd-7-1-0-button--tertiary--active-color-text"}
+          disabled:sd-7-1-0-button--tertiary--disabled-color-text` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600" : "sd-7-1-0-button--tertiary--inverted-color-text hover:sd-7-1-0-button--tertiary--inverted--hover-color-text active:sd-7-1-0-button--tertiary--inverted--active-color-text"}
+          disabled:sd-7-1-0-button--inverted--disabled-color-text`,
+        cta: `${this.visuallyDisabled ? "sd-7-1-0-button--primary--disabled-color-background border-neutral-500" : "border-transparent"}
+          ${!this.inverted ? "text-white bg-accent disabled:sd-7-1-0-button--primary--disabled-color-background disabled:border-neutral-500 disabled:text-white" : "sd-7-1-0-button--cta--inverted--default-color-background sd-7-1-0-button--cta--inverted--default-color-text hover:sd-7-1-0-button--cta--inverted--hover-color-text active:sd-7-1-0-button--cta--inverted--active-color-text disabled:sd-7-1-0-button--inverted--disabled-color-background disabled:text-white"}`
       }[this.variant],
       !this.hasUiMotion && !this.disabled && !this.visuallyDisabled && variantBackgroundColors.baseBackground
     )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><div part="motion-wrapper" class="${cx(
@@ -240,9 +240,9 @@ var SdButton = class extends SolidElement {
       (!this.hasUiMotion || this.disabled || this.visuallyDisabled) && "hidden",
       {
         /* sizes, fonts */
-        sm: `sd-7-0-3-button-border-radius`,
-        md: `sd-7-0-3-button-border-radius`,
-        lg: `sd-7-0-3-button-border-radius`
+        sm: `sd-7-1-0-button-border-radius`,
+        md: `sd-7-1-0-button-border-radius`,
+        lg: `sd-7-1-0-button-border-radius`
       }[this.size]
     )}"><div class="absolute inset-0 w-full h-full transition-all duration-fast translate-y-full group-hover:translate-y-0 group-hover:mt-[-22%] mt-[11%]"><div class="${cx(
       "absolute right-0 min-w-full min-h-full aspect-square skew-y-[-11deg] mt-[11%]",
@@ -250,7 +250,7 @@ var SdButton = class extends SolidElement {
     )}"></div><div class="${cx(
       "absolute w-full h-full mt-[22%]",
       variantBackgroundColors.motionBackground,
-      this.variant === "secondary" && this.inverted && "group-active:sd-7-0-3-button--secondary--active-color-border"
+      this.variant === "secondary" && this.inverted && "group-active:sd-7-1-0-button--secondary--active-color-border"
     )}"></div></div></div><slot name="icon-left" part="icon-left" class="${cx(
       "flex flex-auto items-center justify-end pointer-events-none",
       slots["icon-only"] && "hidden",
@@ -278,7 +278,7 @@ var SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-7-0-3-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-7-0-3-loader>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-7-1-0-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-7-1-0-loader>` : ""}</${tag}>`;
   }
 };
 /**
@@ -287,13 +287,13 @@ var SdButton = class extends SolidElement {
 SdButton.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:0;display:inline-block;width:auto;cursor:pointer}.sd-7-0-3-button--simple-motion{transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,box-shadow 150ms ease}::slotted(sd-7-0-3-badge){pointer-events:none;position:absolute;top:0;right:0;--tw-translate-x:calc(1 / 2 * 100%)!important;--tw-translate-y:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-7-0-3-icon),sd-7-0-3-loader{font-size:calc(var(--tw-varspacing)/ 2)}:host([size=lg]) ::slotted(sd-7-0-3-icon){font-size:var(--sd-button--size-lg-icon-height,var(--sd-spacing-6))}.sd-7-0-3-button-border-radius{border-radius:var(--sd-button-border-radius)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
+:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}.sd-7-1-0-button--simple-motion{transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,box-shadow 150ms ease}::slotted(sd-7-1-0-badge){pointer-events:none;position:absolute;top:0;right:0;--tw-translate-x:calc(1 / 2 * 100%)!important;--tw-translate-y:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-7-1-0-icon),sd-7-1-0-loader{font-size:calc(var(--tw-varspacing)/ 2)}:host([size=lg]) ::slotted(sd-7-1-0-icon){font-size:var(--sd-button--size-lg-icon-height,var(--sd-spacing-6))}.sd-7-1-0-button-border-radius{border-radius:var(--sd-button-border-radius)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-7-0-3-icon" })
+  queryAssignedElements({ selector: "sd-7-1-0-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -362,7 +362,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-7-0-3-button")
+  customElement("sd-7-1-0-button")
 ], SdButton);
 
 export {