@solid-design-system/components 6.22.0 → 6.22.1

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

@@ -42,16 +42,16 @@ var SdAccordionGroup = class extends SolidElement {
 SdAccordionGroup.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}::slotted(sd-6-22-0-accordion:not(:first-of-type)){margin-top:calc(-1 * var(--sd-accordion-border-width))!important}`
+:host{display:block}::slotted(sd-6-22-1-accordion:not(:first-of-type)){margin-top:calc(-1 * var(--sd-accordion-border-width))!important}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-6-22-0-accordion" })
+  queryAssignedElements({ selector: "sd-6-22-1-accordion" })
 ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
 __decorateClass([
   property({ attribute: "close-others", type: Boolean, reflect: true })
 ], SdAccordionGroup.prototype, "closeOthers", 2);
 SdAccordionGroup = __decorateClass([
-  customElement("sd-6-22-0-accordion-group")
+  customElement("sd-6-22-1-accordion-group")
 ], SdAccordionGroup);
 
 export {

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

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

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

@@ -64,7 +64,7 @@ var SdCarousel = class extends SolidElement {
       if (!this.isFocused) this.next();
     });
     this.scrollController = new ScrollController(this);
-    this.slides = this.getElementsByTagName("sd-6-22-0-carousel-item");
+    this.slides = this.getElementsByTagName("sd-6-22-1-carousel-item");
     // determines which slide is displayed
     // A map containing the state of all the slides
     this.intersectionObserverEntries = /* @__PURE__ */ new Map();
@@ -476,7 +476,7 @@ var SdCarousel = class extends SolidElement {
       if (e.detail) {
         this.autoplayControls.blur();
       }
-    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-6-22-0-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-6-22-0-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-6-22-0-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-6-22-0-icon></slot></button><div class="carousel__announcement sr-only" aria-live="${!this.autoplay || this.pausedAutoplay || this.isFocused ? "polite" : "off"}" aria-atomic="true"></div><div id="scroll-container" part="scroll-container" class="${cx(
+    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-6-22-1-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-6-22-1-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-6-22-1-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-6-22-1-icon></slot></button><div class="carousel__announcement sr-only" aria-live="${!this.autoplay || this.pausedAutoplay || this.isFocused ? "polite" : "off"}" aria-atomic="true"></div><div id="scroll-container" part="scroll-container" class="${cx(
       `carousel__slides mb-6 max-h-full w-full items-center justify-items-center`,
       this.inverted ? "focus-visible:focus-outline-inverted" : "focus-visible:focus-outline",
       this.fade ? "relative overflow-hidden" : `grid overflow-auto overscroll-x-contain grid-flow-col auto-rows-[100%] snap-x snap-mandatory overflow-y-hidden`
@@ -490,7 +490,7 @@ var SdCarousel = class extends SolidElement {
     )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? (e) => {
       this.previous();
       this.unblockAutoplay(e, this.previousButton);
-    } : null}"><slot name="previous-icon"><sd-6-22-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-6-22-0-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
+    } : null}"><slot name="previous-icon"><sd-6-22-1-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-6-22-1-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
       const isActive = index + 1 === currentPage;
       return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
         "carousel__pagination-item",
@@ -501,14 +501,14 @@ var SdCarousel = class extends SolidElement {
         this.goToSlide(index * slidesPerMove);
         this.unblockAutoplay(e, this.paginationItems[index]);
       }}"><span class="${cx(
-        "h-4 w-4 block border sd-6-22-0-carousel__pager-dot-border-width rounded-full transition-colors duration-slow hover:duration-fast ease-in-out",
-        this.inverted ? "sd-6-22-0-carousel__pager-dot--inverted-border hover:border-primary-200" : "border-primary hover:border-primary-500",
+        "h-4 w-4 block border sd-6-22-1-carousel__pager-dot-border-width rounded-full transition-colors duration-slow hover:duration-fast ease-in-out",
+        this.inverted ? "sd-6-22-1-carousel__pager-dot--inverted-border hover:border-primary-200" : "border-primary hover:border-primary-500",
         isActive && "border-none",
-        isActive ? this.inverted ? "sd-6-22-0-carousel__pager-dot--inverted-background hover:sd-6-22-0-carousel__pager-dot--inverted--hovered-background" : "sd-6-22-0-carousel__pager-dot-background hover:bg-accent-550" : ""
+        isActive ? this.inverted ? "sd-6-22-1-carousel__pager-dot--inverted-background hover:sd-6-22-1-carousel__pager-dot--inverted--hovered-background" : "sd-6-22-1-carousel__pager-dot-background hover:bg-accent-550" : ""
       )}"></span></button>`;
     })}</div>` : html`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${cx(
       "w-5 text-center border-b-2",
-      this.inverted ? "text-white sd-6-22-0-carousel--active--inverted-color-border" : "text-black sd-6-22-0-carousel--active-color-border"
+      this.inverted ? "text-white sd-6-22-1-carousel--active--inverted-color-border" : "text-black sd-6-22-1-carousel--active-color-border"
     )}">${currentPage}</span> <span part="pagination-divider" class="${cx("scale-y-[1.5]", "text-center", this.inverted ? "text-white" : "text-black")}">/</span> <span part="pagination-item" class="${cx("w-5 text-center", this.inverted ? "text-white" : "text-black")}">${pagesCount}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!nextEnabled ? true : false}" class="${cx(
       "!ml-6 !rounded-sm sd-interactive transition-colors duration-fast ease-in-out",
       !nextEnabled && "sd-interactive--disabled",
@@ -516,13 +516,13 @@ var SdCarousel = class extends SolidElement {
     )}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @click="${nextEnabled ? (e) => {
       this.next();
       this.unblockAutoplay(e, this.nextButton);
-    } : null}"><slot name="next-icon"><sd-6-22-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-6-22-0-icon></slot></button></div></div></div>`;
+    } : null}"><slot name="next-icon"><sd-6-22-1-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-6-22-1-icon></slot></button></div></div></div>`;
   }
 };
 SdCarousel.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}[part=autoplay-controls]{z-index:1}:host([fade]){--carousel-height:auto}:host([fade]) .carousel__slides{position:relative;display:block;overflow:hidden;height:var(--carousel-height)}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-6-22-0-button::part(label){pointer-events:none;display:flex;flex:auto;align-items:center}`
+:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}[part=autoplay-controls]{z-index:1}:host([fade]){--carousel-height:auto}:host([fade]) .carousel__slides{position:relative;display:block;overflow:hidden;height:var(--carousel-height)}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-6-22-1-button::part(label){pointer-events:none;display:flex;flex:auto;align-items:center}`
 ];
 __decorateClass([
   query('[part~="autoplay-controls"]')
@@ -607,7 +607,7 @@ __decorateClass([
   watch("autoplayInterval")
 ], SdCarousel.prototype, "handleautoplayIntervalChange", 1);
 SdCarousel = __decorateClass([
-  customElement("sd-6-22-0-carousel")
+  customElement("sd-6-22-1-carousel")
 ], SdCarousel);
 
 export {

package/dist-versioned/chunks/chunk.KWD3E7PP.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-22-0-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" title="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" class="mb-4">${this.isPlaying ? html`<slot name="pause-icon"><sd-6-22-0-icon class="text-xl" name="pause" library="_internal"></sd-6-22-0-icon></slot>` : html`<slot name="play-icon"><sd-6-22-0-icon class="text-xl" name="start" library="_internal"></sd-6-22-0-icon></slot>`}</sd-6-22-0-button><div class="flex items-center gap-6 justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" aria-label="${this.isTranscriptOpen ? this.localize.term("transcriptIsOpen") : this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" part="transcript"><sd-6-22-0-icon class="w-6 h-6" name="transcript" library="_internal"></sd-6-22-0-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${!this.isMuted ? this.localize.term("mute") : this.localize.term("unmute")}" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-6-22-0-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-6-22-0-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-22-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-22-1-icon class="text-xl" name="pause" library="_internal"></sd-6-22-1-icon></slot>` : html`<slot name="play-icon"><sd-6-22-1-icon class="text-xl" name="start" library="_internal"></sd-6-22-1-icon></slot>`}</sd-6-22-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-22-1-icon class="w-6 h-6" name="transcript" library="_internal"></sd-6-22-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-22-1-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-6-22-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-22-0-audio__timestamp-color-text")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-22-0-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-22-0-range part="progress-slider" tooltip="hidden" min="0" max="100" step="0.001" label="${this.localize.term("seekBar")}" @mousedown="${this.handleThumbGrab}" @touchstart="${this.handleThumbGrab}" @mouseup="${this.handleThumbRelease}" @touchend="${this.handleThumbRelease}" @sd-6-22-0-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-6-22-0-range></div>${this.hasSlotController.test("transcript") ? html`<sd-6-22-0-drawer><slot name="transcript"></slot></sd-6-22-0-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-6-22-0-theme-listener></sd-6-22-0-theme-listener>`;
+    )}" part="timestamps"><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-22-1-audio__timestamp-color-text")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-22-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-22-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-22-1-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-6-22-1-range></div>${this.hasSlotController.test("transcript") ? html`<sd-6-22-1-drawer><slot name="transcript"></slot></sd-6-22-1-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-6-22-1-theme-listener></sd-6-22-1-theme-listener>`;
   }
 };
 SdAudio.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-sd-6-22-0-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-22-0-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-6-22-0-button::part(label){display:flex;flex-grow:0;align-items:center}sd-6-22-0-range::part(form-control-label){display:none}:host([inverted]) sd-6-22-0-range::part(thumb){outline-color:rgba(var(--sd-color-border-white,var(--sd-color-white)));background-color:rgba(var(--sd-color-icon-fill-white,rgba(var(--sd-color-white))))}:host([animated]) sd-6-22-0-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-6-22-0-range::part(track){background-color:rgba(var(--sd-audio__slide-bar--inverted-color-background,rgba(var(--sd-color-primary-400))))}:host([inverted]:not([animated])) sd-6-22-0-range::part(active-track){background-color:rgba(var(--sd-audio__track-bar--inverted-color-background,rgba(var(--sd-color-white))))}.sd-6-22-0-audio__timestamp-color-text{color:rgb(var(--sd-audio__timestamp-color-text,var(--sd-color-text-neutral-700)))}`
+sd-6-22-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-22-1-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-6-22-1-button::part(label){display:flex;flex-grow:0;align-items:center}sd-6-22-1-range::part(form-control-label){display:none}:host([inverted]) sd-6-22-1-range::part(thumb){outline-color:rgba(var(--sd-color-border-white,var(--sd-color-white)));background-color:rgba(var(--sd-color-icon-fill-white,rgba(var(--sd-color-white))))}:host([animated]) sd-6-22-1-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-6-22-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-22-1-range::part(active-track){background-color:rgba(var(--sd-audio__track-bar--inverted-color-background,rgba(var(--sd-color-white))))}.sd-6-22-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-22-0-drawer")
+  query("sd-6-22-1-drawer")
 ], SdAudio.prototype, "drawer", 2);
 __decorateClass([
   query("canvas")
 ], SdAudio.prototype, "canvas", 2);
 SdAudio = __decorateClass([
-  customElement("sd-6-22-0-audio")
+  customElement("sd-6-22-1-audio")
 ], SdAudio);
 
 export {

package/dist-versioned/chunks/{chunk.C7RAFK2U.js → chunk.LQBN4KWJ.js}

@@ -1,6 +1,11 @@
 import {
   DateUtils
 } from "./chunk.A4LR62QO.js";
+import {
+  disabledDatesConverter,
+  isoDateConverter,
+  viewMonthConverter
+} from "./chunk.TJ2FFWLY.js";
 import {
   FormControlController
 } from "./chunk.C3WIBDGG.js";
@@ -25,84 +30,6 @@ import {
 import { css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import cx from "classix";
-var isoDateConverter = {
-  fromAttribute(value) {
-    if (!value) return null;
-    const cleaned = value.trim().replace(/[./]/g, "-");
-    const match = cleaned.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-    if (!match) return null;
-    const iso = `${match[1]}-${match[2]}-${match[3]}`;
-    const d = new Date(+match[1], +match[2] - 1, +match[3]);
-    if (d.getFullYear() !== +match[1] || d.getMonth() !== +match[2] - 1 || d.getDate() !== +match[3]) {
-      return null;
-    }
-    return iso;
-  },
-  toAttribute(value) {
-    return value != null ? value : "";
-  }
-};
-var viewMonthConverter = {
-  fromAttribute(value) {
-    if (!value) return null;
-    const cleaned = value.trim().replace(/[./]/g, "-");
-    let m = cleaned.match(/^(\d{2})-(\d{4})$/);
-    let month;
-    let year;
-    if (m) {
-      month = Number(m[1]);
-      year = Number(m[2]);
-    } else {
-      m = cleaned.match(/^(\d{4})-(\d{2})$/);
-      if (!m) return null;
-      year = Number(m[1]);
-      month = Number(m[2]);
-    }
-    if (!year || !month || month < 1 || month > 12) return null;
-    return new Date(year, month - 1, 1);
-  },
-  toAttribute(value) {
-    if (!value) return "";
-    const year = value.getFullYear();
-    const month = String(value.getMonth() + 1).padStart(2, "0");
-    return `${year}-${month}`;
-  }
-};
-var disabledDatesConverter = {
-  fromAttribute(value) {
-    if (!value) return [];
-    let rawList = [];
-    const trimmed = value.trim();
-    if (trimmed.startsWith("[")) {
-      try {
-        const parsed = JSON.parse(trimmed);
-        if (Array.isArray(parsed)) {
-          rawList = parsed.map(String);
-        }
-      } catch (e) {
-        return [];
-      }
-    } else {
-      rawList = trimmed.split(/[\s,]+/).map((v) => v.trim()).filter(Boolean);
-    }
-    const result = [];
-    for (const raw of rawList) {
-      const cleaned = raw.replace(/[-/]/g, ".");
-      const parts = cleaned.split(".");
-      if (parts.length !== 3) continue;
-      const [yyyy, mm, dd] = parts.map(Number);
-      if (!yyyy || !mm || !dd) continue;
-      const date = new Date(yyyy, mm - 1, dd);
-      if (date.getFullYear() !== yyyy || date.getMonth() !== mm - 1 || date.getDate() !== dd) continue;
-      const iso = `${yyyy}-${String(mm).padStart(2, "0")}-${String(dd).padStart(2, "0")}`;
-      result.push(iso);
-    }
-    return result;
-  },
-  toAttribute(value) {
-    return value ? value.join(",") : "";
-  }
-};
 var SdDatepicker = class extends SolidElement {
   constructor() {
     super();
@@ -1318,7 +1245,7 @@ var SdDatepicker = class extends SolidElement {
       this.open ? "block shadow-listbox" : "hidden",
       ((_b = this.currentPlacement) == null ? void 0 : _b.startsWith("bottom")) ? "border-r-2 border-b-2 border-l-2 form-control__listbox-border-bottom-right-radius form-control__listbox-border-bottom-left-radius" : "border-r-2 border-t-2 border-l-2 form-control__listbox-border-top-right-radius form-control__listbox-border-top-left-radius",
       "border-primary"
-    )}"><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-22-0-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-6-22-0-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-22-0-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-6-22-0-icon></button></div><div tabindex="-1" class="month-label flex justify-center sd-headline sd-headline--size-base" 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-22-0-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-6-22-0-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-22-0-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-6-22-0-icon></button></div></div><sd-6-22-0-divider></sd-6-22-0-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="${() => {
+    )}"><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-22-1-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-6-22-1-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-22-1-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-6-22-1-icon></button></div><div tabindex="-1" class="month-label flex justify-center sd-headline sd-headline--size-base" 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-22-1-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-6-22-1-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-22-1-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-6-22-1-icon></button></div></div><sd-6-22-1-divider></sd-6-22-1-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>`
@@ -1351,14 +1278,14 @@ var SdDatepicker = class extends SolidElement {
         return html`<button type="button" part="day" class="${cx(
           "cell day flex items-center justify-center focus-visible:outline focus:outline-2 focus:outline-primary -outline-offset-2 rounded w-[36px]",
           this.size === "sm" ? "text-sm h-6" : "text-base h-8",
-          isRangeStart || isRangeEnd ? !isFocused ? "outline-none sd-6-22-0-datepicker__date-item--selected-color-background sd-6-22-0-datepicker__date-item--selected-color-text hover:sd-6-22-0-datepicker__date-item--selected--hover-color-background hover:sd-6-22-0-datepicker__date-item--selected--hover-color-text" : "outline-none sd-6-22-0-datepicker__date-item--selected--hover-color-background sd-6-22-0-datepicker__date-item--selected--hover-color-text" : "hover:sd-6-22-0-datepicker__date-item--hover--default-color-text",
-          !isRangeStart && !isRangeEnd && !inSelectedRange && "hover:sd-6-22-0-datepicker__date-item--hover--default-color-background",
-          isSelectedSingle ? "selected outline-none border-primary sd-6-22-0-datepicker__date-item--selected-color-background sd-6-22-0-datepicker__date-item--selected-color-text hover:sd-6-22-0-datepicker__date-item--selected--hover-color-text hover:sd-6-22-0-datepicker__date-item--selected--hover-color-background" : !inMonth ? this.disabledWeekends && isWeekendDay ? "out-month weekend-day text-neutral-500" : isWeekendDay ? "out-month weekend-day text-neutral-700" : "out-month text-neutral-700 hover:sd-6-22-0-datepicker__date-item--hover--prev-next-color-text hover:sd-6-22-0-datepicker__date-item--hover--prev-next-color-background" : this.isInDisabledDates(day) || !this.inMinMax(day) ? "out-month text-neutral-500" : this.disabledWeekends && isWeekendDay ? "weekend-day text-neutral-500" : "in-month sd-6-22-0-datepicker__date-item--default-color-text",
+          isRangeStart || isRangeEnd ? !isFocused ? "outline-none sd-6-22-1-datepicker__date-item--selected-color-background sd-6-22-1-datepicker__date-item--selected-color-text hover:sd-6-22-1-datepicker__date-item--selected--hover-color-background hover:sd-6-22-1-datepicker__date-item--selected--hover-color-text" : "outline-none sd-6-22-1-datepicker__date-item--selected--hover-color-background sd-6-22-1-datepicker__date-item--selected--hover-color-text" : "hover:sd-6-22-1-datepicker__date-item--hover--default-color-text",
+          !isRangeStart && !isRangeEnd && !inSelectedRange && "hover:sd-6-22-1-datepicker__date-item--hover--default-color-background",
+          isSelectedSingle ? "selected outline-none border-primary sd-6-22-1-datepicker__date-item--selected-color-background sd-6-22-1-datepicker__date-item--selected-color-text hover:sd-6-22-1-datepicker__date-item--selected--hover-color-text hover:sd-6-22-1-datepicker__date-item--selected--hover-color-background" : !inMonth ? this.disabledWeekends && isWeekendDay ? "out-month weekend-day text-neutral-500" : isWeekendDay ? "out-month weekend-day text-neutral-700" : "out-month text-neutral-700 hover:sd-6-22-1-datepicker__date-item--hover--prev-next-color-text hover:sd-6-22-1-datepicker__date-item--hover--prev-next-color-background" : this.isInDisabledDates(day) || !this.inMinMax(day) ? "out-month text-neutral-500" : this.disabledWeekends && isWeekendDay ? "weekend-day text-neutral-500" : "in-month sd-6-22-1-datepicker__date-item--default-color-text",
           isRangeStart ? "rounded-l-md rounded-r-none" : "",
           isRangeEnd ? "range-end rounded-r-md rounded-l-none" : "",
-          inSelectedRange && !isRangeStart && !isRangeEnd ? "in-range selected sd-6-22-0-datepicker__date-item--range-color-background rounded-none hover:sd-6-22-0-datepicker__date-item--selected--hover-color-background hover:sd-6-22-0-datepicker__date-item--selected--hover-color-text" : "",
+          inSelectedRange && !isRangeStart && !isRangeEnd ? "in-range selected sd-6-22-1-datepicker__date-item--range-color-background rounded-none hover:sd-6-22-1-datepicker__date-item--selected--hover-color-background hover:sd-6-22-1-datepicker__date-item--selected--hover-color-text" : "",
           !inSelectedRange && inPreviewRange && !isRangeStart && !isRangeEnd ? "in-preview-range bg-primary-100 text-primary-500 rounded-none" : "",
-          isToday && !isSelectedSingle && !isRangeStart && !isRangeEnd && isFocused ? "today border-[1px] border-primary sd-6-22-0-datepicker__date-item--current-font-weight" : "",
+          isToday && !isSelectedSingle && !isRangeStart && !isRangeEnd && isFocused ? "today border-[1px] border-primary sd-6-22-1-datepicker__date-item--current-font-weight" : "",
           disabled ? "disabled cursor-not-allowed hover:bg-transparent" : "cursor-pointer",
           isFocused && !isToday ? "focused outline outline-2 outline-primary" : ""
         )}" role="gridcell" aria-colindex="${colIndex + 1}" aria-labelledby="${"col-" + (colIndex + 1)}" .tabIndex="${tabIndex}" ?disabled="${disabled || this.disabled || this.readonly}" aria-disabled="${disabled || this.visuallyDisabled || this.disabled || this.readonly ? "true" : "false"}" aria-selected="${isSelectedSingle || inSelectedRange || isRangeStart || isRangeEnd ? "true" : "false"}" aria-current="${isToday ? "date" : nothing}" aria-label="${label}" aria-roledescription="${roleDesc != null ? roleDesc : nothing}" @focus="${() => this.focusedDate = DateUtils.startOfDayLocal(day)}" @mouseenter="${() => this.onDayMouseEnter(day)}" @keydown="${this.onKeyDown}" @click="${() => {
@@ -1420,7 +1347,7 @@ var SdDatepicker = class extends SolidElement {
       "absolute top-0 w-full h-full pointer-events-none border form-control-border-radius z-10 transition-[border] duration-medium ease-in-out",
       borderColor,
       this.open && (((_a = this.currentPlacement) == null ? void 0 : _a.startsWith("bottom")) ? this.open && this.alignment === "left" ? "rounded-bl-none" : "rounded-br-none" : this.open && this.alignment === "left" ? "rounded-tl-none" : "rounded-tr-none")
-    )}"></div><sd-6-22-0-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
+    )}"></div><sd-6-22-1-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
       "inline-flex relative w-full",
       ((_b = this.currentPlacement) == null ? void 0 : _b.startsWith("bottom")) ? "origin-top" : "origin-bottom"
     )}" placement="${this.alignment === "left" ? `${this.placement}-start` : `${this.placement}-end`}" flip shift auto-size="vertical" auto-size-padding="10" exportparts="popup:popup__content,"><div part="base" class="${cx(
@@ -1436,7 +1363,7 @@ var SdDatepicker = class extends SolidElement {
       { sm: "h-8", md: "h-10", lg: "h-12" }[this.size],
       textSize,
       this.floatingLabel && "mt-4"
-    )}" autocomplete="off" spellcheck="false" placeholder="${!this.floatingLabel || isFloatingLabelActive ? this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder") : ""}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly || this.visuallyDisabled}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${this.showInvalidStyle ? html`<sd-6-22-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-22-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-22-0-icon class="${cx("text-success shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-22-0-icon>` : ""}<sd-6-22-0-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-6-22-0-icon></div>${this.renderCalendar()}</sd-6-22-0-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
+    )}" autocomplete="off" spellcheck="false" placeholder="${!this.floatingLabel || isFloatingLabelActive ? this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder") : ""}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly || this.visuallyDisabled}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${this.showInvalidStyle ? html`<sd-6-22-1-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-22-1-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-22-1-icon class="${cx("text-success shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-22-1-icon>` : ""}<sd-6-22-1-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-6-22-1-icon></div>${this.renderCalendar()}</sd-6-22-1-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
       "text-sm mt-1",
       hasHelpText ? "block" : "hidden",
       this.visuallyDisabled || this.disabled ? "text-neutral-500" : "text-neutral-700"
@@ -1566,7 +1493,7 @@ __decorateClass([
   state()
 ], SdDatepicker.prototype, "inputValue", 2);
 __decorateClass([
-  query("sd-6-22-0-popup")
+  query("sd-6-22-1-popup")
 ], SdDatepicker.prototype, "popup", 2);
 __decorateClass([
   query("#invalid-message")
@@ -1600,7 +1527,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdDatepicker.prototype, "handleSizeChange", 1);
 SdDatepicker = __decorateClass([
-  customElement("sd-6-22-0-datepicker")
+  customElement("sd-6-22-1-datepicker")
 ], SdDatepicker);
 
 export {

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

@@ -97,7 +97,7 @@ var SdDropdown = class extends SolidElement {
    * within the slotted trigger. This could be the slotted element itself, a child of the slotted element,
    * or an element within the slotted elements shadow root.
    *
-   * e.g. the accessible trigger of an <sd-6-22-0-button> is a <button> located inside its shadow root.
+   * e.g. the accessible trigger of an <sd-6-22-1-button> is a <button> located inside its shadow root.
    *
    * To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
    * */
@@ -108,11 +108,11 @@ var SdDropdown = class extends SolidElement {
     if (accessibleTrigger) {
       switch (accessibleTrigger.tagName.toLowerCase()) {
         // Solid buttons have to update the internal button so it's announced correctly by screen readers
-        case "sd-6-22-0-button":
-        case "sd-6-22-0-icon-button":
+        case "sd-6-22-1-button":
+        case "sd-6-22-1-icon-button":
           target = accessibleTrigger.button;
           break;
-        case "sd-6-22-0-navigation-item":
+        case "sd-6-22-1-navigation-item":
           target = accessibleTrigger.button;
           break;
         default:
@@ -136,7 +136,7 @@ var SdDropdown = class extends SolidElement {
     }
   }
   getMenu() {
-    return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sd-6-22-0-menu");
+    return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sd-6-22-1-menu");
   }
   handleKeyDown(event) {
     if (this.open && event.key === "Escape") {
@@ -148,7 +148,7 @@ var SdDropdown = class extends SolidElement {
   handleDocumentKeyDown(event) {
     var _a;
     if (event.key === "Tab") {
-      if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sd-6-22-0-menu-item") {
+      if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sd-6-22-1-menu-item") {
         event.preventDefault();
         this.hide();
         this.focusOnTrigger();
@@ -174,7 +174,7 @@ var SdDropdown = class extends SolidElement {
   }
   handlePanelSelect(event) {
     const target = event.target;
-    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sd-6-22-0-menu") {
+    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sd-6-22-1-menu") {
       this.hide();
       this.focusOnTrigger();
     }
@@ -263,7 +263,7 @@ var SdDropdown = class extends SolidElement {
   }
   addOpenListeners() {
     this.panel.addEventListener("sd-activate", this.handleMenuItemActivate);
-    this.panel.addEventListener("sd-6-22-0-select", this.handlePanelSelect);
+    this.panel.addEventListener("sd-6-22-1-select", this.handlePanelSelect);
     this.panel.addEventListener("keydown", this.handleKeyDown);
     document.addEventListener("keydown", this.handleDocumentKeyDown);
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
@@ -271,7 +271,7 @@ var SdDropdown = class extends SolidElement {
   removeOpenListeners() {
     if (this.panel) {
       this.panel.removeEventListener("sd-activate", this.handleMenuItemActivate);
-      this.panel.removeEventListener("sd-6-22-0-select", this.handlePanelSelect);
+      this.panel.removeEventListener("sd-6-22-1-select", this.handlePanelSelect);
       this.panel.removeEventListener("keydown", this.handleKeyDown);
     }
     document.removeEventListener("keydown", this.handleDocumentKeyDown);
@@ -304,13 +304,13 @@ var SdDropdown = class extends SolidElement {
     }
   }
   render() {
-    return html`<sd-6-22-0-popup part="base" id="dropdown" exportparts="
+    return html`<sd-6-22-1-popup part="base" id="dropdown" exportparts="
           popup:base__popup,
         " placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
-      "panel-color-border border shadow sd-6-22-0-dropdown-color-background block",
+      "panel-color-border border shadow sd-6-22-1-dropdown-color-background block",
       this.open ? "pointer-events-auto" : "pointer-events-none",
       this.rounded && "rounded-md"
-    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-6-22-0-popup>`;
+    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-6-22-1-popup>`;
   }
 };
 SdDropdown.styles = [
@@ -364,7 +364,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDropdown.prototype, "handleOpenChange", 1);
 SdDropdown = __decorateClass([
-  customElement("sd-6-22-0-dropdown")
+  customElement("sd-6-22-1-dropdown")
 ], SdDropdown);
 setDefaultAnimation("dropdown.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],

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

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

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

@@ -64,9 +64,9 @@ var SdRadioButton = class extends SolidElement {
     const hasIconSlot = this.hasSlotController.test("icon");
     const buttonSizeClass = `${this.size}-${hasDefaultSlot ? "label" : "no-label"}`;
     return html`<div part="base" role="presentation" class="relative"><button part="${`button${this.checked ? " button--checked" : ""}`}" role="radio" aria-checked="${this.checked}" class="${cx(
-      "relative text-center sd-6-22-0-radio-button-border-radius transition-all ease-in-out duration-100 items-center justify-center focus-visible:focus-outline choice-control-font-weight",
+      "relative text-center sd-6-22-1-radio-button-border-radius transition-all ease-in-out duration-100 items-center justify-center focus-visible:focus-outline choice-control-font-weight",
       this.size === "sm" ? "text-sm" : "text-base",
-      this.checked && !this.disabled && !this.visuallyDisabled ? "sd-6-22-0-button--primary--default-color-background sd-6-22-0-button--primary--default-color-text hover:sd-6-22-0-button--primary--hover-color-background hover:text-primary-100" : !this.checked && (this.disabled || this.visuallyDisabled) ? "text-neutral-500 hover:cursor-not-allowed" : this.checked && (this.disabled || this.visuallyDisabled) ? "bg-neutral-400 text-white hover:cursor-not-allowed " : "bg-transparent sd-6-22-0-radio-button-color-text border-primary cursor-pointer hover:sd-6-22-0-radio-button--hover-color-background hover:sd-6-22-0-radio-button--hover-color-text",
+      this.checked && !this.disabled && !this.visuallyDisabled ? "sd-6-22-1-button--primary--default-color-background sd-6-22-1-button--primary--default-color-text hover:sd-6-22-1-button--primary--hover-color-background hover:text-primary-100" : !this.checked && (this.disabled || this.visuallyDisabled) ? "text-neutral-500 hover:cursor-not-allowed" : this.checked && (this.disabled || this.visuallyDisabled) ? "bg-neutral-400 text-white hover:cursor-not-allowed " : "bg-transparent sd-6-22-1-radio-button-color-text border-primary cursor-pointer hover:sd-6-22-1-radio-button--hover-color-background hover:sd-6-22-1-radio-button--hover-color-text",
       hasDefaultSlot && {
         sm: "px-3",
         md: "px-4",
@@ -89,7 +89,7 @@ var SdRadioButton = class extends SolidElement {
 SdRadioButton.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;position:absolute;inset:calc(var(--sd-spacing-1) * 0);z-index:calc(10 * -1);opacity:var(--sd-opacity-0);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:rgba(var(--sd-color-border-error,var(--sd-color-error)));--tw-outline-style:dotted;outline-style:dotted}.lg-label{height:46px}.lg-no-label{height:46px;padding-inline:calc(var(--sd-spacing-1) * 5)}.md-label{height:38px}.md-no-label{height:38px;padding-inline:var(--sd-spacing-4)}.sm-label{height:30px}.sm-no-label{height:30px;padding-inline:var(--sd-spacing-3)}:host([size=lg].sd-6-22-0-button-group__button:not(.sd-6-22-0-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-3) * -1)}:host([size=md].sd-6-22-0-button-group__button:not(.sd-6-22-0-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-2) * -1)}:host([size=sm].sd-6-22-0-button-group__button:not(.sd-6-22-0-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-1) * -1)}:host(.sd-6-22-0-button-group__button--hover){z-index:20}:host(.sd-6-22-0-button-group__button--focus){z-index:30}:host(.sd-6-22-0-button-group__button[checked]){z-index:40}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
+:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;position:absolute;inset:calc(var(--sd-spacing-1) * 0);z-index:calc(10 * -1);opacity:var(--sd-opacity-0);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:rgba(var(--sd-color-border-error,var(--sd-color-error)));--tw-outline-style:dotted;outline-style:dotted}.lg-label{height:46px}.lg-no-label{height:46px;padding-inline:calc(var(--sd-spacing-1) * 5)}.md-label{height:38px}.md-no-label{height:38px;padding-inline:var(--sd-spacing-4)}.sm-label{height:30px}.sm-no-label{height:30px;padding-inline:var(--sd-spacing-3)}:host([size=lg].sd-6-22-1-button-group__button:not(.sd-6-22-1-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-3) * -1)}:host([size=md].sd-6-22-1-button-group__button:not(.sd-6-22-1-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-2) * -1)}:host([size=sm].sd-6-22-1-button-group__button:not(.sd-6-22-1-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-1) * -1)}:host(.sd-6-22-1-button-group__button--hover){z-index:20}:host(.sd-6-22-1-button-group__button--focus){z-index:30}:host(.sd-6-22-1-button-group__button[checked]){z-index:40}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
 ];
 __decorateClass([
   query(".button")
@@ -119,7 +119,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadioButton.prototype, "handleDisabledChange", 1);
 SdRadioButton = __decorateClass([
-  customElement("sd-6-22-0-radio-button")
+  customElement("sd-6-22-1-radio-button")
 ], SdRadioButton);
 
 export {

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

@@ -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-22-0-icon library="_internal" name="chevron-down" class="text-xl"></sd-6-22-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-22-0-icon library="_internal" name="chevron-down" class="text-xl"></sd-6-22-0-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-22-1-icon library="_internal" name="chevron-down" class="text-xl"></sd-6-22-1-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-22-1-icon library="_internal" name="chevron-down" class="text-xl"></sd-6-22-1-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-22-0-expandable")
+  customElement("sd-6-22-1-expandable")
 ], SdExpandable);
 setDefaultAnimation("expandable.show", {
   keyframes: [{ height: "var(--component-expandable-max-block-size, 90px)" }, { height: "auto" }],

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

@@ -57,13 +57,13 @@ var SdTeaser = class extends SolidElement {
       "teaser-has-headline": this.hasSlotController.test("headline")
     };
     return html`<div class="${cx(
-      "flex sd-6-22-0-teaser-border-radius",
+      "flex sd-6-22-1-teaser-border-radius",
       {
         white: "bg-white",
-        "white border-neutral-400": "bg-white border sd-6-22-0-teaser--neutral-400-color-border",
-        "neutral-100": "sd-6-22-0-teaser--neutral-100-color-background",
+        "white border-neutral-400": "bg-white border sd-6-22-1-teaser--neutral-400-color-border",
+        "neutral-100": "sd-6-22-1-teaser--neutral-100-color-background",
         primary: "bg-primary text-white",
-        "primary-100": "sd-6-22-0-teaser--primary-100-color-background"
+        "primary-100": "sd-6-22-1-teaser--primary-100-color-background"
       }[this.variant],
       this._orientation === "vertical" && "flex-col",
       this._orientation === "horizontal" && "flex-row gap-8",
@@ -105,7 +105,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-6-22-0-teaser")
+  customElement("sd-6-22-1-teaser")
 ], SdTeaser);
 
 export {