@solid-design-system/components 6.13.1 → 6.14.1

package/dist-versioned/chunks/{chunk.HPHKKIL5.js → chunk.6526NKSA.js}

@@ -1,16 +1,16 @@
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";
-import {
-  Wave
-} from "./chunk.POFWU6ZT.js";
 import {
   LocalizeController
 } from "./chunk.X3FE7OHE.js";
+import {
+  Wave
+} from "./chunk.POFWU6ZT.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.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-6-13-1-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-6-13-1-icon class="text-xl" name="pause" library="_internal"></sd-6-13-1-icon></slot>` : html`<slot name="play-icon"><sd-6-13-1-icon class="text-xl" name="start" library="_internal"></sd-6-13-1-icon></slot>`}</sd-6-13-1-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-6-13-1-icon class="w-6 h-6" name="transcript" library="_internal"></sd-6-13-1-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-6-13-1-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-6-13-1-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-6-14-1-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-6-14-1-icon class="text-xl" name="pause" library="_internal"></sd-6-14-1-icon></slot>` : html`<slot name="play-icon"><sd-6-14-1-icon class="text-xl" name="start" library="_internal"></sd-6-14-1-icon></slot>`}</sd-6-14-1-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-6-14-1-icon class="w-6 h-6" name="transcript" library="_internal"></sd-6-14-1-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-6-14-1-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-6-14-1-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" : "sd-6-13-1-audio__timestamp-color-text")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-13-1-audio__timestamp-color-text")}">${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-6-13-1-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-6-13-1-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-6-13-1-range></div>${this.hasSlotController.test("transcript") ? html`<sd-6-13-1-drawer><slot name="transcript"></slot></sd-6-13-1-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-6-13-1-theme-listener></sd-6-13-1-theme-listener>`;
+    )}" part="timestamps"><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-14-1-audio__timestamp-color-text")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-14-1-audio__timestamp-color-text")}">${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-6-14-1-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-6-14-1-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-6-14-1-range></div>${this.hasSlotController.test("transcript") ? html`<sd-6-14-1-drawer><slot name="transcript"></slot></sd-6-14-1-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-6-14-1-theme-listener></sd-6-14-1-theme-listener>`;
   }
 };
 SdAudio.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-sd-6-13-1-button::part(base){display:flex;height:var(--sd-spacing-12);width:var(--sd-spacing-12);align-items:center;justify-content:center;border-radius:var(--sd-radius-full)}sd-6-13-1-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-6-13-1-button::part(label){display:flex;flex-grow:0;align-items:center}sd-6-13-1-range::part(form-control-label){display:none}:host([inverted]) sd-6-13-1-range::part(thumb){outline-color:var(--color-white,#fff);background-color:rgba(var(--sd-color-border-white,rgba(var(--sd-color-white))))}:host([animated]) sd-6-13-1-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-6-13-1-range::part(track){background-color:rgba(var(--sd-color-border-primary-400,rgba(var(--sd-color-primary-400))))}:host([inverted]:not([animated])) sd-6-13-1-range::part(active-track){background-color:rgba(var(--sd-color-border-white,rgba(var(--sd-color-white))))}`
+sd-6-14-1-button::part(base){display:flex;height:var(--sd-spacing-12);width:var(--sd-spacing-12);align-items:center;justify-content:center;border-radius:var(--sd-radius-full)}sd-6-14-1-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-6-14-1-button::part(label){display:flex;flex-grow:0;align-items:center}sd-6-14-1-range::part(form-control-label){display:none}:host([inverted]) sd-6-14-1-range::part(thumb){outline-color:var(--color-white,#fff);background-color:rgba(var(--sd-color-icon-fill-white,rgba(var(--sd-color-white))))}:host([animated]) sd-6-14-1-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-6-14-1-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-6-14-1-range::part(active-track){background-color:rgba(var(--sd-audio__track-bar--inverted-color-background,rgba(var(--sd-color-white))))}.sd-6-14-1-audio__timestamp-color-text{color:rgb(var(--sd-audio__timestamp-color-text,var(--sd-color-text-neutral-700)))}`
 ];
 __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-6-13-1-drawer")
+  query("sd-6-14-1-drawer")
 ], SdAudio.prototype, "drawer", 2);
 __decorateClass([
   query("canvas")
 ], SdAudio.prototype, "canvas", 2);
 SdAudio = __decorateClass([
-  customElement("sd-6-13-1-audio")
+  customElement("sd-6-14-1-audio")
 ], SdAudio);
 
 export {

package/dist-versioned/chunks/{chunk.K3YE6JTB.js → chunk.6D5WVMOB.js}

@@ -1,6 +1,6 @@
 import {
   SdRadio
-} from "./chunk.7VGIRCAG.js";
+} from "./chunk.356O7DWM.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -73,14 +73,14 @@ var SdRadioGroup = class extends SolidElement {
     this.formControlController.updateValidity();
   }
   getAllRadios() {
-    const radios = [...this.querySelectorAll("sd-6-13-1-radio, sd-6-13-1-radio-button")];
+    const radios = [...this.querySelectorAll("sd-6-14-1-radio, sd-6-14-1-radio-button")];
     if (radios.length === 0) {
       console.warn("No radios found in the radio group.");
     }
     return radios;
   }
   handleRadioClick(event) {
-    const target = event.target.closest("sd-6-13-1-radio, sd-6-13-1-radio-button");
+    const target = event.target.closest("sd-6-14-1-radio, sd-6-14-1-radio-button");
     const oldValue = this.value;
     const radios = this.getAllRadios();
     if (radios.length === 0) {
@@ -170,7 +170,7 @@ var SdRadioGroup = class extends SolidElement {
         }
       })
     );
-    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-6-13-1-radio-button");
+    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-6-14-1-radio-button");
     if (!radios.some((radio) => radio.checked)) {
       if (this.hasButtonGroup) {
         const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
@@ -182,26 +182,26 @@ var SdRadioGroup = class extends SolidElement {
       }
     }
     if (this.hasButtonGroup) {
-      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-13-1-button-group");
+      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-14-1-button-group");
       if (buttonGroup) {
         buttonGroup.disableRole = true;
       }
     }
   }
   syncRadios() {
-    if (customElements.get("sd-6-13-1-radio") && customElements.get("sd-6-13-1-radio-button")) {
+    if (customElements.get("sd-6-14-1-radio") && customElements.get("sd-6-14-1-radio-button")) {
       this.syncRadioElements();
       return;
     }
-    if (customElements.get("sd-6-13-1-radio")) {
+    if (customElements.get("sd-6-14-1-radio")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-6-13-1-radio").then(() => this.syncRadios());
+      customElements.whenDefined("sd-6-14-1-radio").then(() => this.syncRadios());
     }
-    if (customElements.get("sd-6-13-1-radio-button")) {
+    if (customElements.get("sd-6-14-1-radio-button")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-6-13-1-radio-button").then(() => this.syncRadios());
+      customElements.whenDefined("sd-6-14-1-radio-button").then(() => this.syncRadios());
     }
   }
   updateCheckedRadio() {
@@ -279,7 +279,7 @@ var SdRadioGroup = class extends SolidElement {
         vertical: "flex-col",
         horizontal: "flex-row"
       }[this.orientation]
-    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-6-13-1-button-group class="border border-primary sd-6-13-1-radio-button-group-border-radius sd-6-13-1-radio-button-group-border-width sd-6-13-1-radio-button-group-padding" part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-6-13-1-button-group>` : defaultSlot}</div></fieldset><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 part="invalid-icon-message" class="flex items-center gap-2 mt-2">${this.showInvalidStyle ? html`<sd-6-13-1-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-6-13-1-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div>`;
+    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-6-14-1-button-group class="border border-primary sd-6-14-1-radio-button-group-border-radius sd-6-14-1-radio-button-group-border-width sd-6-14-1-radio-button-group-padding" part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-6-14-1-button-group>` : defaultSlot}</div></fieldset><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 part="invalid-icon-message" class="flex items-center gap-2 mt-2">${this.showInvalidStyle ? html`<sd-6-14-1-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-6-14-1-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div>`;
   }
 };
 /**
@@ -288,7 +288,7 @@ var SdRadioGroup = class extends SolidElement {
 SdRadioGroup.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}:host([orientation=vertical]) ::slotted(sd-6-13-1-radio){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-6-13-1-radio:last-of-type){margin-bottom:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]) ::slotted(sd-6-13-1-radio){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-6-13-1-radio:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-13-1-radio){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-13-1-radio:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([required]) #label::after{content:' *'}:host:has(sd-6-13-1-button-group){display:inline-flex}`
+:host{display:block}:host([orientation=vertical]) ::slotted(sd-6-14-1-radio){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-6-14-1-radio:last-of-type){margin-bottom:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]) ::slotted(sd-6-14-1-radio){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-6-14-1-radio:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-14-1-radio){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-14-1-radio:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([required]) #label::after{content:' *'}:host:has(sd-6-14-1-button-group){display:inline-flex}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -342,7 +342,7 @@ __decorateClass([
   watch("value")
 ], SdRadioGroup.prototype, "handleValueChange", 1);
 SdRadioGroup = __decorateClass([
-  customElement("sd-6-13-1-radio-group")
+  customElement("sd-6-14-1-radio-group")
 ], SdRadioGroup);
 
 export {

package/dist-versioned/chunks/{chunk.ZC2PWRAF.js → chunk.7NZW7WLQ.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.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/75 rounded-full play-pause-transition group-focus-visible:outline-2 group-focus-visible:outline-offset-2"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-6-13-1-icon id="default-play-icon" library="_internal" name="start"></sd-6-13-1-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-6-14-1-icon id="default-play-icon" library="_internal" name="start"></sd-6-14-1-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 = [
@@ -116,7 +116,7 @@ __decorateClass([
   property({ type: Boolean })
 ], SdVideo.prototype, "isBelowBreakpoint", 2);
 SdVideo = __decorateClass([
-  customElement("sd-6-13-1-video")
+  customElement("sd-6-14-1-video")
 ], SdVideo);
 
 export {

package/dist-versioned/chunks/{chunk.JK2XCRWF.js → chunk.7WMPYF5W.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -55,27 +55,38 @@ var SdMapMarker = class extends SolidElement {
     return html`<${tag} part="base" class="${cx("relative flex justify-center", !this.notInteractive && "group focus-visible:focus-outline")}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" role="${ifDefined(this.notInteractive || isLink ? void 0 : "button")}" aria-label="${ifDefined(!this.notInteractive && this.label ? this.label : void 0)}" aria-labelledby="${ifDefined(!this.notInteractive && !this.label ? "content" : void 0)}"><div part="marker" class="${cx(
       "relative inline-flex",
       this.animated && (this.variant === "main" || this.variant === "place") && "animate-bounce-once",
-      this.variant === "cluster" && this.state === "hover" && "scale-110 sd-6-13-1-map-marker-cluster--hovered-color-icon-fill",
+      this.variant === "cluster" && this.state === "hover" && "scale-110",
       this.variant === "cluster" && !this.notInteractive && "transition-transform duration-fast ease-in-out hover:scale-110",
       {
-        cluster: "sd-6-13-1-map-marker-cluster-color-icon-fill",
-        main: "fill-accent",
-        place: "fill-white"
+        cluster: "sd-6-14-1-map-marker--cluster-color-text",
+        main: "sd-color-fill-accent",
+        place: "sd-6-14-1-map-marker--pin-color-text"
       }[this.variant]
-    )}"><div id="motion-wrapper" part="motion-wrapper" class="absolute inset-0 overflow-hidden pointer-events-none" style="mask-image:${mask};-webkit-mask-image:${mask}"><div class="${cx(
+    )}"><div id="motion-wrapper" part="motion-wrapper" class="${cx(
+      "absolute inset-0 overflow-hidden pointer-events-none",
+      {
+        cluster: "sd-6-14-1-map-marker--cluster--default-color-background group-hover:sd-6-14-1-map-marker--cluster--hover-color-background",
+        main: "sd-6-14-1-map-marker--main-color-background",
+        place: "sd-6-14-1-map-marker--pin--default-color-background"
+      }[this.variant]
+    )}" style="mask-image:${mask};-webkit-mask-image:${mask}"><div class="${cx(
       "absolute inset-0 transition-transform ease-in-out duration-fast translate-y-full group-hover:translate-y-0 group-active:translate-y-0",
       ["hover", "active"].includes(this.state) && "!translate-y-0"
     )}"><div class="${cx(
       "min-w-full min-h-full skew-y-[-11deg]",
       {
         cluster: "",
-        main: this.state === "active" ? "bg-accent-700" : "bg-accent-550 group-active:bg-accent-700",
-        place: this.state === "active" ? "bg-primary-200" : "bg-primary-100 group-active:bg-primary-200"
+        main: this.state === "active" ? "bg-accent-700" : this.state === "hover" ? "bg-accent-550" : "group-hover:bg-accent-550 group-active:bg-accent-700",
+        place: this.state === "active" || this.state === "hover" ? "sd-6-14-1-map-marker--pin--hover-color-background" : "group-active:bg-primary-200"
       }[this.variant]
-    )}"></div></div>${this.variant === "main" ? html`<div id="marker-circle" class="absolute rounded-full bg-white"></div>` : ""}</div>${marker} ${this.variant === "cluster" ? html`<div id="cluster-border" class="${cx(
-      "absolute inset-0 bg-primary opacity-30 rounded-full",
-      this.state === "hover" && "bg-primary-500"
-    )}"></div>` : ""}</div><div id="content" part="content" class="${cx("absolute self-center pointer-events-none", this.variant === "cluster" && "font-bold text-white")}"><slot></slot></div></${tag}>`;
+    )}"></div></div>${this.variant === "main" ? html`<div id="marker-circle" class="absolute rounded-full"></div>` : ""}</div>${marker} ${this.variant === "cluster" ? html`<div id="cluster-border" class="${cx(
+      "absolute inset-0 sd-6-14-1-map-marker--cluster--default-color-background rounded-full opacity-30",
+      this.state === "hover" && "sd-6-14-1-map-marker--cluster--hover-color-background"
+    )}"></div>` : ""}</div><div id="content" part="content" class="${cx(
+      "absolute self-center pointer-events-none",
+      this.variant === "cluster" && "font-bold sd-6-14-1-map-marker--cluster-color-text",
+      this.variant === "place" && "font-bold sd-6-14-1-map-marker--pin-color-text"
+    )}"><slot></slot></div></${tag}>`;
   }
 };
 /**
@@ -84,7 +95,7 @@ var SdMapMarker = class extends SolidElement {
 SdMapMarker.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{display:block}#motion-wrapper{mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:contain;-webkit-mask-size:contain}:host([variant=cluster]) [part=base],svg{width:calc(var(--sd-spacing-12,3rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=base]{height:calc(var(--sd-spacing-12,3rem) * var(--map-marker-scaling,1))}:host(:not([variant=cluster])) [part=base]{height:calc(var(--sd-spacing-16,4rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=content]{font-size:calc(var(--sd-font-size-sm,.875rem) * var(--map-marker-scaling,1))}:host([variant=place]) [part=content]{margin-top:calc(var(--sd-spacing-2) * -1);font-size:calc(var(--sd-font-size-3xl,2rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=motion-wrapper]>div>div{background-color:rgba(var(--sd-map-marker-cluster--hovered-color-icon-fill))}:host([variant=main]) [part=marker],:host([variant=place]) [part=marker]{--tw-drop-shadow-size:drop-shadow(var(--sd-drop-shadow));--tw-drop-shadow:drop-shadow(var(--sd-drop-shadow));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}:host([variant=main]) #marker-circle{width:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));height:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));left:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));right:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));top:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1))}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}`
+:host{display:block}#motion-wrapper{mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:contain;-webkit-mask-size:contain}:host([variant=cluster]) [part=base],svg{width:calc(var(--sd-spacing-12,3rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=base]{height:calc(var(--sd-spacing-12,3rem) * var(--map-marker-scaling,1))}:host(:not([variant=cluster])) [part=base]{height:calc(var(--sd-spacing-16,4rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=content]{font-size:calc(var(--sd-font-size-sm,.875rem) * var(--map-marker-scaling,1))}:host([variant=place]) [part=content]{margin-top:calc(var(--sd-spacing-2) * -1);font-size:calc(var(--sd-font-size-3xl,2rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=motion-wrapper]>div>div{background-color:rgba(var(--sd-map-marker--cluster--hover-color-background))}:host([variant=main]) [part=marker],:host([variant=place]) [part=marker]{--tw-drop-shadow-size:drop-shadow(var(--sd-drop-shadow));--tw-drop-shadow:drop-shadow(var(--sd-drop-shadow));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}:host([variant=main]) #marker-circle{width:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));height:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));left:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));right:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));top:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1))}#marker-circle{background-color:rgba(var(--sd-color-icon-fill-white,rgba(var(--sd-color-white))))}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -108,7 +119,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdMapMarker.prototype, "label", 2);
 SdMapMarker = __decorateClass([
-  customElement("sd-6-13-1-map-marker")
+  customElement("sd-6-14-1-map-marker")
 ], SdMapMarker);
 
 export {

package/dist-versioned/chunks/{chunk.AR57WJHC.js → chunk.A3S43CBC.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -191,7 +191,7 @@ var SdTextarea = class extends SolidElement {
       lg: "text-xl top-2"
     }[this.size];
     return html`<div part="form-control" class="flex flex-col h-full text-left">${hasLabel && !this.floatingLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block form-control-color-text" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative h-full w-full", this.disabled && "cursor-not-allowed")}">${hasLabel && this.floatingLabel ? html`<label id="label" part="form-control-floating-label" class="${cx(
-      "absolute left-4 z-20 pointer-events-none transition-all duration-200",
+      "absolute left-4 z-20 transition-all duration-200 cursor-text",
       textSize,
       !isFloatingLabelActive ? "top-2.5" : "top-2 text-xs"
     )}" for="input"><span class="${cx(
@@ -199,7 +199,7 @@ var SdTextarea = class extends SolidElement {
       (this.visuallyDisabled || this.disabled) && "text-neutral-500",
       isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "form-control--filled__floating-label-color-text"
     )}">${this.label}</span></label>` : null}<div part="border" class="${cx(
-      "absolute w-full h-full pointer-events-none border rounded-default transition-[border] duration-medium ease-in-out",
+      "absolute w-full h-full pointer-events-none border form-control-border-radius transition-[border] duration-medium ease-in-out",
       {
         disabled: "border-neutral-500",
         visuallyDisabled: "border-neutral-500",
@@ -212,7 +212,7 @@ var SdTextarea = class extends SolidElement {
         default: "form-control-color-border"
       }[textareaState]
     )}"></div><div part="base" class="${cx(
-      "textarea h-full flex items-top rounded-default group transition-colors duration-medium hover:duration-fast ease-in-out",
+      "textarea h-full flex items-top form-control-border-radius group transition-colors duration-medium hover:duration-fast ease-in-out",
       this.floatingLabel && "pt-6",
       {
         sm: "textarea-sm",
@@ -221,10 +221,10 @@ var SdTextarea = class extends SolidElement {
       }[this.size],
       !this.disabled && !this.readonly && !this.visuallyDisabled ? "hover:[@media(hover:hover)]:bg-neutral-200" : "",
       this.readonly ? "bg-neutral-100" : "bg-white",
-      textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "form-control-color-text",
+      textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "text-black",
       ["invalid", "activeInvalid"].includes(textareaState) && "form-control--invalid-color-background"
     )}"><textarea part="textarea" id="input" class="${cx(
-      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-6-13-1-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-6-14-1-icon]:pe-8",
       {
         sm: isFloatingLabelActive ? "pb-1" : "py-2",
         md: isFloatingLabelActive ? "pb-1" : "py-2",
@@ -232,7 +232,7 @@ var SdTextarea = class extends SolidElement {
       }[this.size],
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-6-13-1-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-6-13-1-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-6-13-1-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-13-1-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-6-14-1-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-6-14-1-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-6-14-1-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-14-1-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
   }
 };
 /**
@@ -353,7 +353,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdTextarea.prototype, "handleSizeChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-6-13-1-textarea")
+  customElement("sd-6-14-1-textarea")
 ], SdTextarea);
 
 export {

package/dist-versioned/chunks/{chunk.XD4EBUSG.js → chunk.ATPSUELO.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -24,7 +24,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-6-13-1-tab-${this.attrId}`;
+    this.componentId = `sd-6-14-1-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.localize = new LocalizeController(this);
     this.variant = "default";
@@ -58,22 +58,24 @@ var SdTab = class extends SolidElement {
       left: this.hasSlotController.test("left")
     };
     return html`<div part="base" class="${cx(
-      "inline-flex justify-center min-w-max items-center h-12 px-3 leading-none select-none cursor-pointer group relative",
+      "inline-flex justify-center min-w-max items-center h-12 px-3 leading-none select-none cursor-pointer group relative choice-control-font-weight",
       "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:color-background",
-      this.active && "z-20"
+      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:sd-6-14-1-tab--hover-color-background",
+      this.active && "z-20 sd-6-14-1-tab--active-color-text"
     )}" 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>${this.variant === "container" ? html`<div part="active-tab-indicator" class="${cx(
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.active ? "sd-6-14-1-tab--active-color-text" : "sd-6-14-1-tab-color-text"
+    )}"></slot><slot class="${cx(
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.active ? "sd-6-14-1-tab--active-color-text" : "sd-6-14-1-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-6-13-1-tab-color-border"
+      !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-6-14-1-tab-color-border"
     )}"></div></div></div>`;
   }
 };
@@ -110,7 +112,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-6-13-1-tab")
+  customElement("sd-6-14-1-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.BIER6WTC.js → chunk.B5KFI4YW.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -56,7 +56,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdLoader.prototype, "color", 2);
 SdLoader = __decorateClass([
-  customElement("sd-6-13-1-loader")
+  customElement("sd-6-14-1-loader")
 ], SdLoader);
 
 export {

package/dist-versioned/chunks/{chunk.NJFWQYZM.js → chunk.BB7TXOED.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -66,9 +66,9 @@ var SdBrandshape = class extends SolidElement {
       "w-full block relative"
     )}"><div part="shape-middle" class="${cx(
       {
-        "neutral-100": "bg-neutral-100",
+        "neutral-100": "sd-6-14-1-brandshape--neutral-100-color-background",
         primary: "bg-primary",
-        white: "bg-white",
+        white: "sd-6-14-1-brandshape--white-color-background",
         "border-white": "bg-transparent",
         "border-primary": "bg-transparent",
         "primary|80": "bg-primary/80",
@@ -87,9 +87,9 @@ var SdBrandshape = class extends SolidElement {
   renderWhitespaceFix(position) {
     return html`<div class="${cx(
       {
-        "neutral-100": "bg-neutral-100",
+        "neutral-100": "sd-6-14-1-brandshape--neutral-100-color-background",
         primary: "bg-primary",
-        white: "bg-white",
+        white: "sd-6-14-1-brandshape--white-color-background",
         "border-white": "bg-transparent",
         "border-primary": "bg-transparent",
         "primary|80": "bg-primary/80",
@@ -135,7 +135,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-6-13-1-brandshape")
+  customElement("sd-6-14-1-brandshape")
 ], SdBrandshape);
 
 export {

package/dist-versioned/chunks/{chunk.GCHHQ4PP.js → chunk.BL6NQ5XT.js}

@@ -30,7 +30,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   animateTo,
   stopAnimations
@@ -208,13 +208,13 @@ 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]
-    )}" 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-6-13-1-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-6-13-1-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-13-1-icon></sd-6-13-1-button></div></header>` : html`<sd-6-13-1-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-6-13-1-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-13-1-icon></sd-6-13-1-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-6-14-1-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-6-14-1-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-14-1-icon></sd-6-14-1-button></div></header>` : html`<sd-6-14-1-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-6-14-1-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-14-1-icon></sd-6-14-1-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 = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{--width:25rem;display:contents}:host([contained]){z-index:initial}:host(:not([contained])){z-index:var(--sd-z-index-drawer,700)}[part=body]{-webkit-overflow-scrolling:touch;overflow-y:scroll;scrollbar-width:none}[part=body]::-webkit-scrollbar{height:calc(var(--sd-spacing-1) * 0);width:calc(var(--sd-spacing-1) * 0)}:host [part=panel]{outline:1px solid var(--sd-panel-color-border,transparent)}`
+:host{--width:25rem;display:contents}:host([contained]){z-index:initial}:host(:not([contained])){z-index:var(--sd-z-index-drawer,700)}[part=body]{-webkit-overflow-scrolling:touch;overflow-y:scroll;scrollbar-width:none}[part=body]::-webkit-scrollbar{height:calc(var(--sd-spacing-1) * 0);width:calc(var(--sd-spacing-1) * 0)}:host [part=panel]{outline:1px solid rgb(var(--sd-panel-color-border,transparent))}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -250,7 +250,7 @@ __decorateClass([
   watch("contained", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleNoModalChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-6-13-1-drawer")
+  customElement("sd-6-14-1-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

package/dist-versioned/chunks/{chunk.YDUILGDN.js → chunk.BWOOL6ZP.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -81,14 +81,14 @@ var SdStep = class extends SolidElement {
     const hasDescription = this.description ? true : hasDefaultSlot;
     const isHorizontalInline = this.horizontalInline && this.orientation === "horizontal";
     const circleAndTailContainerClasses = cx(
-      "flex shrink-0 gap-2",
+      "flex shrink-0 gap-2 group",
       this.noTail && !isHorizontalInline && "w-max",
       this.orientation === "horizontal" ? "flex-row" : "flex-col items-stretch",
       isHorizontalInline && "items-start",
       this.orientation === "horizontal" && !this.horizontalInline ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" ? "mt-1" : "mt-3"
     );
     const circleButtonClasses = cx(
-      "border sd-6-13-1-step__circle-border-width rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
+      "border sd-6-14-1-step__circle-border-width rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
       this.disabled ? "focus-visible:outline-none cursor-not-allowed" : !this.notInteractive && !this.waiting ? "focus-visible:focus-outline hover:cursor-pointer" : "",
       this.notInteractive ? this.size === "lg" ? "not-interactive-lg" : "w-12" : this.size === "lg" ? "w-12" : "w-8",
       this.disabled && "border-neutral-500 text-neutral-500",
@@ -104,8 +104,8 @@ var SdStep = class extends SolidElement {
     )}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"><div part="circle-and-tail-container" class="${circleAndTailContainerClasses}"><${tag} part="circle" href="${ifDefined(isLink ? this.href : void 0)}" aria-disabled="${ifDefined(this.disabled || this.waiting || void 0)}" aria-current="${this.current ? "step" : void 0}" aria-labelledby="${ifDefined(this.notInteractive || this.waiting || !hasLabel ? void 0 : "label")}" aria-describedby="${ifDefined(this.notInteractive || this.waiting || !hasDescription ? void 0 : "description")}" class="${circleButtonClasses}"><slot name="circle-content" class="${cx(
       "text-lg",
       !this.disabled && !this.current && !this.notInteractive && !this.waiting && "text-primary hover:text-primary-500 hover:fill-primary-500",
-      this.notInteractive && "text-primary"
-    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting ? html`<sd-6-13-1-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-6-13-1-icon>` : html`${this.index}`}</slot></${tag}>${isHorizontalInline ? html`<div class="${cx(!this.noTail && "flex-1", "flex flex-col gap-1")}"><div class="${cx(
+      this.notInteractive && "sd-6-14-1-step-color-text"
+    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting ? html`<sd-6-14-1-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-6-14-1-icon>` : html`${this.index}`}</slot></${tag}>${isHorizontalInline ? html`<div class="${cx(!this.noTail && "flex-1", "flex flex-col gap-1")}"><div class="${cx(
       "flex w-full",
       hasLabel && "gap-2",
       this.size === "sm" && !hasDescription ? "mt-1" : "mt-3"
@@ -116,7 +116,7 @@ var SdStep = class extends SolidElement {
       !this.disabled && !this.current && !this.notInteractive && !this.waiting && "text-black"
     )}"><slot name="label">${this.label}</slot></div>`} ${!this.noTail ? html`<div part="tail" class="${cx(
       "border-t flex-1 mr-2 mt-3",
-      !this.disabled && !this.current && !this.notInteractive && !this.waiting ? "border-primary" : "border-neutral-500"
+      !this.disabled && !this.current && !this.notInteractive && !this.waiting ? "border-primary group-hover:border-primary-500" : "border-neutral-500"
     )}"></div>` : ""}</div>${hasDescription ? html`<div part="description" id="description" class="${cx(
       "sd-paragraph sd-paragraph--size-sm break-words",
       hasDescription ? "flex-1" : "w-0 h-0 overflow-hidden",
@@ -124,7 +124,7 @@ var SdStep = class extends SolidElement {
       (this.disabled || this.waiting) && "!text-neutral-700"
     )}">${this.description || html`<slot></slot>`}</div>` : ""}</div>` : this.noTail ? "" : html`<div part="tail" class="${cx(
       this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",
-      !this.disabled && !this.current && !this.notInteractive && !this.waiting ? "border-primary" : "border-neutral-400"
+      !this.disabled && !this.current && !this.notInteractive && !this.waiting ? "border-primary group-hover:border-primary-500" : "border-neutral-400"
     )}"></div>`}</div>${!isHorizontalInline ? html`<div part="text-container" class="${cx(
       "mt-4 break-words flex flex-col gap-2",
       this.orientation === "horizontal" ? "text-center w-40" : "text-left",
@@ -145,7 +145,7 @@ var SdStep = class extends SolidElement {
 SdStep.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{flex:1}:host([orientation=horizontal]) [part=tail]{border-top-width:var(--sd-step__tail-border-width)}:host([orientation=vertical]) [part=tail]{border-left-width:var(--sd-step__tail-border-width)}:host([no-tail]){flex-grow:0}:host(:not([current])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-6-13-1-icon,slot[name=circle-content]::slotted(sd-6-13-1-icon){color:rgba(var(--sd-color-icon-fill-primary))}:host([horizontal-inline]):has([part=description]){min-width:calc(var(--sd-spacing-1) * 0);flex:1}.translateLg{transform:translateX(3.438rem)}.translateSm{transform:translateX(4rem)}.not-interactive-lg{width:4.5rem}`
+:host{flex:1}:host([orientation=horizontal]) [part=tail]{border-top-width:var(--sd-step__tail-border-width)}:host([orientation=vertical]) [part=tail]{border-left-width:var(--sd-step__tail-border-width)}:host([no-tail]){flex-grow:0}:host(:not([current])) (:not([notInteractive])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-6-14-1-icon,slot[name=circle-content]::slotted(sd-6-14-1-icon){color:rgba(var(--sd-color-icon-fill-primary))}[part=circle]:hover slot[name=circle-content] sd-6-14-1-icon,[part=circle]:hover slot[name=circle-content]::slotted(sd-6-14-1-icon){color:rgba(var(--sd-color-icon-fill-primary-500))}:host([horizontal-inline]):has([part=description]){min-width:calc(var(--sd-spacing-1) * 0);flex:1}.translateLg{transform:translateX(3.438rem)}.translateSm{transform:translateX(4rem)}.not-interactive-lg{width:4.5rem}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -196,7 +196,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStep.prototype, "handleInteractivityChange", 1);
 SdStep = __decorateClass([
-  customElement("sd-6-13-1-step")
+  customElement("sd-6-14-1-step")
 ], SdStep);
 
 export {