@solid-design-system/components 6.0.0-next.12 → 6.0.0-next.13

package/dist-versioned/chunks/{chunk.FP53SHVC.js → chunk.WLZ64OXQ.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XZHOUXTG.js";
+} from "./chunk.LJIVAP6V.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.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-0-0-next-12-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-0-0-next-12-icon class="text-xl" name="pause" library="_internal"></sd-6-0-0-next-12-icon></slot>` : html`<slot name="play-icon"><sd-6-0-0-next-12-icon class="text-xl" name="start" library="_internal"></sd-6-0-0-next-12-icon></slot>`}</sd-6-0-0-next-12-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-0-0-next-12-icon class="w-6 h-6" name="transcript" library="_internal"></sd-6-0-0-next-12-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-0-0-next-12-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-6-0-0-next-12-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-0-0-next-13-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-0-0-next-13-icon class="text-xl" name="pause" library="_internal"></sd-6-0-0-next-13-icon></slot>` : html`<slot name="play-icon"><sd-6-0-0-next-13-icon class="text-xl" name="start" library="_internal"></sd-6-0-0-next-13-icon></slot>`}</sd-6-0-0-next-13-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-0-0-next-13-icon class="w-6 h-6" name="transcript" library="_internal"></sd-6-0-0-next-13-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-0-0-next-13-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-6-0-0-next-13-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-0-0-next-12-audio__timestamp-color-text")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-0-0-next-12-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-0-0-next-12-range part="progress-slider" no-tooltip min="0" max="100" step="0.001" label="${this.localize.term("seekBar")}" @mousedown="${this.handleThumbGrab}" @touchstart="${this.handleThumbGrab}" @mouseup="${this.handleThumbRelease}" @touchend="${this.handleThumbRelease}" @sd-6-0-0-next-12-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-6-0-0-next-12-range></div>${this.hasSlotController.test("transcript") ? html`<sd-6-0-0-next-12-drawer><slot name="transcript"></slot></sd-6-0-0-next-12-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-6-0-0-next-12-theme-listener></sd-6-0-0-next-12-theme-listener>`;
+    )}" part="timestamps"><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-0-0-next-13-audio__timestamp-color-text")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-0-0-next-13-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-0-0-next-13-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-0-0-next-13-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-6-0-0-next-13-range></div>${this.hasSlotController.test("transcript") ? html`<sd-6-0-0-next-13-drawer><slot name="transcript"></slot></sd-6-0-0-next-13-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-6-0-0-next-13-theme-listener></sd-6-0-0-next-13-theme-listener>`;
   }
 };
 SdAudio.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-sd-6-0-0-next-12-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-0-0-next-12-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-6-0-0-next-12-button::part(label){display:flex;flex-grow:0;align-items:center}sd-6-0-0-next-12-range::part(form-control-label){display:none}:host([inverted]) sd-6-0-0-next-12-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-0-0-next-12-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-6-0-0-next-12-range::part(track){background-color:rgba(var(--sd-color-border-primary-400,rgba(var(--sd-color-primary-400))))}:host([inverted]:not([animated])) sd-6-0-0-next-12-range::part(active-track){background-color:rgba(var(--sd-color-border-white,rgba(var(--sd-color-white))))}`
+sd-6-0-0-next-13-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-0-0-next-13-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-6-0-0-next-13-button::part(label){display:flex;flex-grow:0;align-items:center}sd-6-0-0-next-13-range::part(form-control-label){display:none}:host([inverted]) sd-6-0-0-next-13-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-0-0-next-13-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-6-0-0-next-13-range::part(track){background-color:rgba(var(--sd-color-border-primary-400,rgba(var(--sd-color-primary-400))))}:host([inverted]:not([animated])) sd-6-0-0-next-13-range::part(active-track){background-color:rgba(var(--sd-color-border-white,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-6-0-0-next-12-drawer")
+  query("sd-6-0-0-next-13-drawer")
 ], SdAudio.prototype, "drawer", 2);
 __decorateClass([
   query("canvas")
 ], SdAudio.prototype, "canvas", 2);
 SdAudio = __decorateClass([
-  customElement("sd-6-0-0-next-12-audio")
+  customElement("sd-6-0-0-next-13-audio")
 ], SdAudio);
 
 export {

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

@@ -10,7 +10,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
     var _a, _b;
     const ul = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("ul");
     ul == null ? void 0 : ul.setAttribute("part", "listbox");
-    const popup = document.createElement("sd-6-0-0-next-12-popup");
+    const popup = document.createElement("sd-6-0-0-next-13-popup");
     popup.appendChild(ul);
     (_b = sdInput.shadowRoot) == null ? void 0 : _b.appendChild(popup);
     popup == null ? void 0 : popup.setAttribute("exportparts", "popup__content");
@@ -23,7 +23,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
       popup.sync = "width";
     }
     const styles = css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-sd-6-0-0-next-12-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:scroll;border-bottom-right-radius:var(--sd-radius);border-bottom-left-radius:var(--sd-radius);border-style:var(--tw-border-style);border-width:var(--sd-border-width-2);border-top-style:var(--tw-border-style);border-top-width:0;border-color:rgba(var(--sd-color-border-primary));background-color:rgba(var(--sd-color-background-white));padding-inline:var(--sd-spacing-2);padding-block:var(--sd-spacing-3);--tw-shadow:var(--sd-shadow);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}sd-6-0-0-next-12-popup li{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms))}sd-6-0-0-next-12-popup li:hover:not([disabled]){background-color:rgba(var(--sd-color-background-neutral-100))}sd-6-0-0-next-12-popup li{list-style-type:''}sd-6-0-0-next-12-popup li mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold)}sd-6-0-0-next-12-popup li:not(:has(sd-6-0-0-next-12-option)){cursor:pointer;padding-inline:var(--sd-spacing-4);padding-block:var(--sd-spacing-3);font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));color:rgba(var(--sd-color-text-black))}sd-6-0-0-next-12-popup li:not(:has(sd-6-0-0-next-12-option)):hover{background-color:rgba(var(--sd-color-background-neutral-200))}sd-6-0-0-next-12-popup li[aria-selected=true]{background-color:rgba(var(--sd-color-background-neutral-200))}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}`;
+sd-6-0-0-next-13-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:scroll;border-bottom-right-radius:var(--sd-radius);border-bottom-left-radius:var(--sd-radius);border-style:var(--tw-border-style);border-width:var(--sd-border-width-2);border-top-style:var(--tw-border-style);border-top-width:0;border-color:rgba(var(--sd-color-border-primary));background-color:rgba(var(--sd-color-background-white));padding-inline:var(--sd-spacing-2);padding-block:var(--sd-spacing-3);--tw-shadow:var(--sd-shadow);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}sd-6-0-0-next-13-popup li{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms))}sd-6-0-0-next-13-popup li:hover:not([disabled]){background-color:rgba(var(--sd-color-background-neutral-100))}sd-6-0-0-next-13-popup li{list-style-type:''}sd-6-0-0-next-13-popup li mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold)}sd-6-0-0-next-13-popup li:not(:has(sd-6-0-0-next-13-option)){cursor:pointer;padding-inline:var(--sd-spacing-4);padding-block:var(--sd-spacing-3);font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));color:rgba(var(--sd-color-text-black))}sd-6-0-0-next-13-popup li:not(:has(sd-6-0-0-next-13-option)):hover{background-color:rgba(var(--sd-color-background-neutral-200))}sd-6-0-0-next-13-popup li[aria-selected=true]{background-color:rgba(var(--sd-color-background-neutral-200))}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}`;
     const styleSheet = new CSSStyleSheet();
     styleSheet.replaceSync(styles);
     sdInput.shadowRoot.adoptedStyleSheets = [...sdInput.shadowRoot.adoptedStyleSheets, styleSheet];
@@ -36,13 +36,13 @@ sd-6-0-0-next-12-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overf
   }
   input.addEventListener("open", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-6-0-0-next-12-popup")) == null ? void 0 : _b.setAttribute("active", "true");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-6-0-0-next-13-popup")) == null ? void 0 : _b.setAttribute("active", "true");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.add("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.add("z-50");
   });
   input.addEventListener("close", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-6-0-0-next-12-popup")) == null ? void 0 : _b.removeAttribute("active");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-6-0-0-next-13-popup")) == null ? void 0 : _b.removeAttribute("active");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.remove("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.remove("z-50");
   });

package/dist-versioned/chunks/{chunk.2LOD5KZ2.js → chunk.WTA5BTJL.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XZHOUXTG.js";
+} from "./chunk.LJIVAP6V.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -32,7 +32,7 @@ var SdDatepicker = class extends SolidElement {
     this.localize = new LocalizeController(this);
     this.hasSlotController = new HasSlotController(this, "label", "help-text", "tooltip");
     this.formControlController = new FormControlController(this, {
-      assumeInteractionOn: ["sd-blur", "sd-6-0-0-next-12-input"]
+      assumeInteractionOn: ["sd-blur", "sd-6-0-0-next-13-input"]
     });
     this.locale = "en-US";
     this.value = null;
@@ -1132,7 +1132,7 @@ var SdDatepicker = class extends SolidElement {
       return DateUtils.isBetweenInclusive(day, rs, pe);
     };
     const tabTarget = this.getTabTargetDayForCurrentView(weeks);
-    return html`<div part="datepicker" class="w-[284px] z-50 absolute top-full bg-white border-2 border-t-0 border-primary py-3 px-4 ${this.open ? "block rounded-bl-default rounded-br-default" : "hidden"} ${this.alignment === "left" ? "left-0" : "right-0"}"><div class="flex flex-row items-center w-full justify-between mb-3" part="header"><div class="flex items-center"><button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-year-button" @click="${() => this.setYear(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", -1, false)}" aria-label="${this.localize.term("previousYear")}"><sd-6-0-0-next-12-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-6-0-0-next-12-icon></button> <button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-month-button" @click="${() => this.setMonth(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", -1, false)}" aria-label="${this.localize.term("previousMonth")}"><sd-6-0-0-next-12-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-6-0-0-next-12-icon></button></div><div tabindex="-1" class="month-label flex justify-center sd-headline sd-headline--size-base !text-primary" part="month-label" aria-live="polite">${monthLabel}</div><div class="flex items-center"><button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-month-button" @click="${() => this.setMonth(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", 1, false)}" aria-label="${this.localize.term("nextMonth")}"><sd-6-0-0-next-12-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-6-0-0-next-12-icon></button> <button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-year-button" @click="${() => this.setYear(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", 1, true)}" aria-label="${this.localize.term("nextYear")}"><sd-6-0-0-next-12-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-6-0-0-next-12-icon></button></div></div><sd-6-0-0-next-12-divider></sd-6-0-0-next-12-divider><div class="sr-only" aria-live="polite" aria-atomic="true">${this.statusNavText}</div><div class="sr-only" aria-live="assertive" aria-atomic="true">${this.statusSelectText}</div><div class="sr-only" id="keyboard-hint">${this.localize.term("datePickerInfo")}</div><div class="grid mt-2" role="grid" aria-describedby="keyboard-hint" aria-label="${monthLabel}" part="grid" @mouseleave="${this.onGridMouseLeave}" @focusin="${() => {
+    return html`<div part="datepicker" class="w-[284px] z-50 absolute top-full bg-white border-2 border-t-0 border-primary py-3 px-4 ${this.open ? "block rounded-bl-default rounded-br-default" : "hidden"} ${this.alignment === "left" ? "left-0" : "right-0"}"><div class="flex flex-row items-center w-full justify-between mb-3" part="header"><div class="flex items-center"><button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-year-button" @click="${() => this.setYear(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", -1, false)}" aria-label="${this.localize.term("previousYear")}"><sd-6-0-0-next-13-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-6-0-0-next-13-icon></button> <button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-month-button" @click="${() => this.setMonth(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", -1, false)}" aria-label="${this.localize.term("previousMonth")}"><sd-6-0-0-next-13-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-6-0-0-next-13-icon></button></div><div tabindex="-1" class="month-label flex justify-center sd-headline sd-headline--size-base !text-primary" part="month-label" aria-live="polite">${monthLabel}</div><div class="flex items-center"><button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-month-button" @click="${() => this.setMonth(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", 1, false)}" aria-label="${this.localize.term("nextMonth")}"><sd-6-0-0-next-13-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-6-0-0-next-13-icon></button> <button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-year-button" @click="${() => this.setYear(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", 1, true)}" aria-label="${this.localize.term("nextYear")}"><sd-6-0-0-next-13-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-6-0-0-next-13-icon></button></div></div><sd-6-0-0-next-13-divider></sd-6-0-0-next-13-divider><div class="sr-only" aria-live="polite" aria-atomic="true">${this.statusNavText}</div><div class="sr-only" aria-live="assertive" aria-atomic="true">${this.statusSelectText}</div><div class="sr-only" id="keyboard-hint">${this.localize.term("datePickerInfo")}</div><div class="grid mt-2" role="grid" aria-describedby="keyboard-hint" aria-label="${monthLabel}" part="grid" @mouseleave="${this.onGridMouseLeave}" @focusin="${() => {
       this.tabbingIntoGrid = false;
     }}"><div class="grid-row grid-head grid grid-cols-7 gap-y-[1px]" role="row">${weekdays.map(
       (w, colIndex) => html`<div role="columnheader" aria-colindex="${colIndex + 1}" part="weekday" class="cell head flex items-center justify-center font-bold text-black text-sm leading-none h-8" aria-label="${w}" title="${w}" id="${"col-" + (colIndex + 1)}">${w}</div>`
@@ -1207,7 +1207,7 @@ var SdDatepicker = class extends SolidElement {
       default: "border-neutral-800"
     }[inputState];
     const textSize = this.size === "sm" ? "text-sm" : "text-base";
-    return html`<div part="form-control" class="${cx("w-[370px]", this.open && "z-50", (this.disabled || this.visuallyDisabled) && "cursor-not-allowed")}">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "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(
+    return html`<div part="form-control" class="${cx("w-[370px]", this.open && "z-50", (this.disabled || this.visuallyDisabled) && "cursor-not-allowed")}">${hasLabel || 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 w-full",
       this.disabled && "pointer-events-none",
       this.visuallyDisabled && "cursor-not-allowed"
@@ -1216,17 +1216,17 @@ var SdDatepicker = class extends SolidElement {
       borderColor,
       this.open && this.alignment === "left" ? "rounded-bl-none" : "",
       this.open && this.alignment === "right" ? "rounded-br-none" : ""
-    )}"></div><sd-6-0-0-next-12-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx("inline-flex relative w-full")}" sync="width" auto-size="vertical" auto-size-padding="10" exportparts="popup:popup__content,"><div part="base" class="${cx(
+    )}"></div><sd-6-0-0-next-13-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx("inline-flex relative w-full")}" sync="width" auto-size="vertical" auto-size-padding="10" exportparts="popup:popup__content,"><div part="base" class="${cx(
       "px-4 flex flex-row items-center rounded-default transition-colors ease-in-out duration-medium hover:duration-fast w-full",
       !this.disabled && !this.readonly && !this.visuallyDisabled ? "hover:bg-neutral-200" : "",
       this.readonly ? "bg-neutral-100" : "bg-white",
       inputState === "disabled" || inputState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}" slot="anchor"><input id="input" type="text" role="combobox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="dialog" aria-controls="calendar-grid" aria-describedby="${hasHelpText ? "help-text" : void 0}" aria-invalid="${this.showInvalidStyle ? "true" : "false"}" aria-label="${this.range ? "Select date range" : "Select a date"}" class="${cx(
-      "min-w-0 flex-grow focus:outline-none bg-transparent",
+      "min-w-0 flex-grow focus:outline-none bg-transparent form-control-color-text",
       this.visuallyDisabled || this.disabled ? "placeholder-neutral-500 cursor-not-allowed" : "placeholder-neutral-700",
       { sm: "h-8", md: "h-10", lg: "h-12" }[this.size],
       textSize
-    )}" placeholder="${this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder")}" ?disabled="${this.disabled || this.disabled}" ?readonly="${this.readonly}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${this.showInvalidStyle ? html`<sd-6-0-0-next-12-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-0-0-next-12-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-0-0-next-12-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-0-0-next-12-icon>` : ""}<sd-6-0-0-next-12-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-6-0-0-next-12-icon>${this.renderCalendar()}</div></sd-6-0-0-next-12-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" placeholder="${this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder")}" ?disabled="${this.disabled || this.disabled}" ?readonly="${this.readonly}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${this.showInvalidStyle ? html`<sd-6-0-0-next-13-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-0-0-next-13-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-0-0-next-13-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-0-0-next-13-icon>` : ""}<sd-6-0-0-next-13-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-6-0-0-next-13-icon>${this.renderCalendar()}</div></sd-6-0-0-next-13-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdDatepicker.styles = [
@@ -1368,7 +1368,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdDatepicker.prototype, "handleDisabledChange", 1);
 SdDatepicker = __decorateClass([
-  customElement("sd-6-0-0-next-12-datepicker")
+  customElement("sd-6-0-0-next-13-datepicker")
 ], SdDatepicker);
 
 export {

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

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

package/dist-versioned/chunks/{chunk.IR5S4ZJW.js → chunk.XTHUPXCS.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XZHOUXTG.js";
+} from "./chunk.LJIVAP6V.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -210,15 +210,21 @@ var SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-6-0-0-next-12-icon name="${{
+    )}"><sd-6-0-0-next-13-icon name="${{
       info: "info-circle",
       success: "confirm-circle",
       warning: "exclamation-circle",
       error: "warning"
-    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-6-0-0-next-12-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-6-0-0-next-13-icon></slot><div part="content" class="${cx(
       "h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
-      "border-solid border-[1px] border-l-0 border-neutral-400"
-    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-6-0-0-next-12-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-6-0-0-next-12-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-0-0-next-12-icon></sd-6-0-0-next-12-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div></div>`;
+      "border-solid border-[1px] border-l-0 border-neutral-400",
+      {
+        info: "sd-6-0-0-next-13-notification--info-color-background",
+        success: "sd-6-0-0-next-13-notification--success-color-background",
+        warning: "sd-6-0-0-next-13-notification--warning-color-background",
+        error: "sd-6-0-0-next-13-notification--error-color-background"
+      }[this.variant]
+    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-6-0-0-next-13-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-6-0-0-next-13-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-0-0-next-13-icon></sd-6-0-0-next-13-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div></div>`;
   }
 };
 /**
@@ -263,7 +269,7 @@ __decorateClass([
   watch("duration")
 ], SdNotification.prototype, "handleDurationChange", 1);
 SdNotification = __decorateClass([
-  customElement("sd-6-0-0-next-12-notification")
+  customElement("sd-6-0-0-next-13-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.Q4FPANWO.js → chunk.XTNHNEFI.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XZHOUXTG.js";
+} from "./chunk.LJIVAP6V.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -94,7 +94,7 @@ var SdExpandable = class extends SolidElement {
     )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}"><span part="toggle-icon" class="${cx(
       "flex items-center mr-2 transition-transform duration-medium ease-in-out",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-0-0-next-12-icon library="_internal" name="chevron-down" class="text-xl"></sd-6-0-0-next-12-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-0-0-next-12-icon library="_internal" name="chevron-down" class="text-xl"></sd-6-0-0-next-12-icon></slot></span><slot name="toggle-closed" class="${cx(this.open && "hidden")}">${this.localize.term("showMore")}</slot><slot name="toggle-open" class="${cx(!this.open && "hidden")}">${this.localize.term("showLess")}</slot></div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-0-0-next-13-icon library="_internal" name="chevron-down" class="text-xl"></sd-6-0-0-next-13-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-0-0-next-13-icon library="_internal" name="chevron-down" class="text-xl"></sd-6-0-0-next-13-icon></slot></span><slot name="toggle-closed" class="${cx(this.open && "hidden")}">${this.localize.term("showMore")}</slot><slot name="toggle-open" class="${cx(!this.open && "hidden")}">${this.localize.term("showLess")}</slot></div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
   }
   firstUpdated() {
     this.cloneContentToLightDOM();
@@ -139,7 +139,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdExpandable.prototype, "onOpenChange", 1);
 SdExpandable = __decorateClass([
-  customElement("sd-6-0-0-next-12-expandable")
+  customElement("sd-6-0-0-next-13-expandable")
 ], SdExpandable);
 setDefaultAnimation("expandable.show", {
   keyframes: [{ height: "var(--component-expandable-max-block-size, 90px)" }, { height: "auto" }],

package/dist-versioned/chunks/{chunk.45QURS66.js → chunk.YHJOW7S3.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XZHOUXTG.js";
+} from "./chunk.LJIVAP6V.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -84,7 +84,7 @@ var SdLink = class extends SolidElement {
 SdLink.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-::slotted(sd-6-0-0-next-12-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-6-0-0-next-12-icon){font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}:host([size=lg][standalone]) ::slotted(sd-6-0-0-next-12-icon){font-size:var(--sd-text-xl);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}`
+::slotted(sd-6-0-0-next-13-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-6-0-0-next-13-icon){font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}:host([size=lg][standalone]) ::slotted(sd-6-0-0-next-13-icon){font-size:var(--sd-text-xl);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}`
 ];
 __decorateClass([
   query("a")
@@ -111,7 +111,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-6-0-0-next-12-link")
+  customElement("sd-6-0-0-next-13-link")
 ], SdLink);
 
 export {

package/dist-versioned/chunks/{chunk.OOQJUJ6I.js → chunk.YIIMAPVO.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XZHOUXTG.js";
+} from "./chunk.LJIVAP6V.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -54,7 +54,7 @@ var SdHeader = class extends SolidElement {
     }
   }
   render() {
-    return html`<header class="w-full sd-6-0-0-next-12-header-color-background relative" role="banner"><div part="main" class="relative mx-auto my-0 box-border"><slot></slot></div></header>`;
+    return html`<header class="w-full sd-6-0-0-next-13-header-color-background relative" role="banner"><div part="main" class="relative mx-auto my-0 box-border"><slot></slot></div></header>`;
   }
 };
 SdHeader.styles = [
@@ -72,7 +72,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "updateCalculatedHeight", 1);
 SdHeader = __decorateClass([
-  customElement("sd-6-0-0-next-12-header")
+  customElement("sd-6-0-0-next-13-header")
 ], SdHeader);
 
 export {

package/dist-versioned/chunks/{chunk.RNGYBTSG.js → chunk.YSE5ZECP.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XZHOUXTG.js";
+} from "./chunk.LJIVAP6V.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -69,7 +69,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-6-0-0-next-12-include")
+  customElement("sd-6-0-0-next-13-include")
 ], SdInclude);
 
 export {

package/dist-versioned/chunks/{chunk.KV6O4JKY.js → chunk.Z32LVC6A.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XZHOUXTG.js";
+} from "./chunk.LJIVAP6V.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -135,14 +135,15 @@ var SdAccordion = class extends SolidElement {
   }
   render() {
     return html`<details part="base" class="border-neutral-400"><summary part="header" id="header" class="${cx(
-      "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-6-0-0-next-12-accordion-padding-block focus-visible:focus-outline sd-6-0-0-next-12-accordion-color-text relative group transition-colors ease-in-out duration-fast sd-6-0-0-next-12-accordion-color-background hover:bg-neutral-200"
+      "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-6-0-0-next-13-accordion-padding-block focus-visible:focus-outline focus-visible:z-10 sd-6-0-0-next-13-accordion-color-text relative group transition-colors ease-in-out duration-fast hover:bg-neutral-200",
+      this.open && "sd-6-0-0-next-13-accordion-color-background"
     )}" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${cx(
       !this.open && "opacity-0",
-      "w-1 sd-6-0-0-next-12-accordion__indicator-color absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full"
+      "w-1 sd-6-0-0-next-13-accordion__indicator-color absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full"
     )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-medium text-xl",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-0-0-next-12-icon library="_internal" name="chevron-down"></sd-6-0-0-next-12-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-0-0-next-12-icon library="_internal" name="chevron-down"></sd-6-0-0-next-12-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-0-0-next-13-icon library="_internal" name="chevron-down"></sd-6-0-0-next-13-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-0-0-next-13-icon library="_internal" name="chevron-down"></sd-6-0-0-next-13-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
   }
 };
 SdAccordion.styles = [
@@ -169,7 +170,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-6-0-0-next-12-accordion")
+  customElement("sd-6-0-0-next-13-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.RW2CZCB6.js → chunk.ZHEFFMES.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.XZHOUXTG.js";
+} from "./chunk.LJIVAP6V.js";
 import {
   __decorateClass,
   __spreadValues
@@ -364,7 +364,7 @@ var SdInput = class extends SolidElement {
       md: "text-lg",
       lg: "text-xl"
     }[this.size];
-    return html`<div part="form-control" class="${cx((this.disabled || this.visuallyDisabled) && "cursor-not-allowed")}">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "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(
+    return html`<div part="form-control" class="${cx((this.disabled || this.visuallyDisabled) && "cursor-not-allowed")}">${hasLabel || 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 w-full",
       this.disabled && "pointer-events-none",
       this.visuallyDisabled && "cursor-not-allowed"
@@ -378,14 +378,15 @@ var SdInput = class extends SolidElement {
       // States
       !this.disabled && !this.readonly && !this.visuallyDisabled ? "hover:bg-neutral-200" : "",
       this.readonly ? "bg-neutral-100" : "bg-white",
-      inputState === "disabled" || inputState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
+      ["disabled", "visuallyDisabled"].includes(inputState) ? "text-neutral-500" : "form-control-color-text",
+      ["invalid", "activeInvalid"].includes(inputState) && "form-control--invalid-color-background"
     )}">${slots["left"] ? html`<slot name="left" part="left" class="${cx("inline-flex", this.size === "sm" ? "mr-1" : "mr-2", iconColor, iconSize)}"></slot>` : ""} <input part="input" id="input" class="${cx(
       "min-w-0 flex-grow focus:outline-none bg-transparent",
       this.visuallyDisabled || this.disabled ? "placeholder:text-neutral-500 cursor-not-allowed" : "placeholder:text-neutral-700",
       this.size === "sm" ? "h-6" : "h-8",
       textSize
     )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${// eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-6-0-0-next-12-icon class="${cx("text-neutral-700", iconSize)}" library="_internal" name="closing-round"></sd-6-0-0-next-12-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-6-0-0-next-12-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-6-0-0-next-12-icon></slot>` : html`<slot name="hide-password-icon"><sd-6-0-0-next-12-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-6-0-0-next-12-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-6-0-0-next-12-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-6-0-0-next-12-icon>` : ""} ${this.type === "time" ? html`<sd-6-0-0-next-12-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-6-0-0-next-12-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-6-0-0-next-12-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-6-0-0-next-12-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-6-0-0-next-12-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-0-0-next-12-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-0-0-next-12-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-0-0-next-12-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-6-0-0-next-12-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-6-0-0-next-12-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-6-0-0-next-12-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-6-0-0-next-12-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-6-0-0-next-13-icon class="${cx("text-neutral-700", iconSize)}" library="_internal" name="closing-round"></sd-6-0-0-next-13-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-6-0-0-next-13-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-6-0-0-next-13-icon></slot>` : html`<slot name="hide-password-icon"><sd-6-0-0-next-13-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-6-0-0-next-13-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-6-0-0-next-13-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-6-0-0-next-13-icon>` : ""} ${this.type === "time" ? html`<sd-6-0-0-next-13-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-6-0-0-next-13-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-6-0-0-next-13-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-6-0-0-next-13-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-6-0-0-next-13-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-0-0-next-13-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-0-0-next-13-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-0-0-next-13-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-6-0-0-next-13-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-6-0-0-next-13-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-6-0-0-next-13-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-6-0-0-next-13-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -394,7 +395,7 @@ var SdInput = class extends SolidElement {
 SdInput.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) #label::after{content:' *'}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-6-0-0-next-12-icon{color:rgba(var(--sd-color-text-neutral-500))}`
+:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) #label::after{content:' *'}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-6-0-0-next-13-icon{color:rgba(var(--sd-color-text-neutral-500))}`
 ];
 __decorateClass([
   query("#input")
@@ -524,7 +525,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdInput.prototype, "handleValueChange", 1);
 SdInput = __decorateClass([
-  customElement("sd-6-0-0-next-12-input")
+  customElement("sd-6-0-0-next-13-input")
 ], SdInput);
 
 export {

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

@@ -21,6 +21,6 @@ export default class SdAccordion extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-6-0-0-next-12-accordion': SdAccordion;
+        'sd-6-0-0-next-13-accordion': SdAccordion;
     }
 }

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

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "../../chunks/chunk.KV6O4JKY.js";
+} from "../../chunks/chunk.Z32LVC6A.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.TGCVGSDV.js";
-import "../../chunks/chunk.OLT4C7IW.js";
+import "../../chunks/chunk.2NCOG3MU.js";
+import "../../chunks/chunk.UVPXOOB4.js";
 import "../../chunks/chunk.2BO5LK23.js";
-import "../../chunks/chunk.O6MXNSO7.js";
+import "../../chunks/chunk.LS3MCK4L.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -14,7 +14,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.ID6DABAJ.js";
 import "../../chunks/chunk.3S7EW72P.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.XZHOUXTG.js";
+import "../../chunks/chunk.LJIVAP6V.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -11,6 +11,6 @@ export default class SdAccordionGroup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-6-0-0-next-12-accordion-group': SdAccordionGroup;
+        'sd-6-0-0-next-13-accordion-group': SdAccordionGroup;
     }
 }

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

@@ -1,13 +1,13 @@
 import {
   SdAccordionGroup
-} from "../../chunks/chunk.J7R664XW.js";
-import "../../chunks/chunk.KV6O4JKY.js";
+} from "../../chunks/chunk.SZ7IRQY4.js";
+import "../../chunks/chunk.Z32LVC6A.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.TGCVGSDV.js";
-import "../../chunks/chunk.OLT4C7IW.js";
+import "../../chunks/chunk.2NCOG3MU.js";
+import "../../chunks/chunk.UVPXOOB4.js";
 import "../../chunks/chunk.2BO5LK23.js";
-import "../../chunks/chunk.O6MXNSO7.js";
+import "../../chunks/chunk.LS3MCK4L.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -15,7 +15,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.ID6DABAJ.js";
 import "../../chunks/chunk.3S7EW72P.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.XZHOUXTG.js";
+import "../../chunks/chunk.LJIVAP6V.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -34,6 +34,6 @@ export default class SdAnimation extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-6-0-0-next-12-animation': SdAnimation;
+        'sd-6-0-0-next-13-animation': SdAnimation;
     }
 }