@solid-design-system/components 6.0.0-next.20 → 6.0.0-next.21

package/dist-versioned/chunks/{chunk.AUWFJ6KR.js → chunk.HKXD5IL4.js}

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

package/dist-versioned/chunks/{chunk.XCCVIHHK.js → chunk.J5BE4PHS.js}

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

package/dist-versioned/chunks/{chunk.LZEWZD6Z.js → chunk.JCRS5M2Y.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.AYA7WMLI.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -22,9 +22,9 @@ var SdBadge = class extends SolidElement {
       "inline-flex items-center justify-center gap-x-[1px] text-center font-bold whitespace-nowrap border rounded-full select-none cursor-[inherit]",
       {
         /* variants */
-        blue: !this.inverted ? "text-white bg-primary-500 border-white" : "sd-6-0-0-next-20-badge--blue--inverted-color-text sd-6-0-0-next-20-badge--blue--inverted-color-background border-primary",
-        green: !this.inverted ? "text-white sd-6-0-0-next-20-badge--green-color-background border-white" : "sd-6-0-0-next-20-badge--green-color--inverted-text sd-6-0-0-next-20-badge--green-color--inverted-background border-primary",
-        red: !this.inverted ? "text-white sd-6-0-0-next-20-badge--red-color-background border-white" : "sd-6-0-0-next-20-badge--red--inverted-text sd-6-0-0-next-20-badge--red--inverted-background border-primary"
+        blue: !this.inverted ? "text-white bg-primary-500 border-white" : "sd-6-0-0-next-21-badge--blue--inverted-color-text sd-6-0-0-next-21-badge--blue--inverted-color-background border-primary",
+        green: !this.inverted ? "text-white sd-6-0-0-next-21-badge--green-color-background border-white" : "sd-6-0-0-next-21-badge--green-color--inverted-text sd-6-0-0-next-21-badge--green-color--inverted-background border-primary",
+        red: !this.inverted ? "text-white sd-6-0-0-next-21-badge--red-color-background border-white" : "sd-6-0-0-next-21-badge--red--inverted-text sd-6-0-0-next-21-badge--red--inverted-background border-primary"
       }[this.variant]
     )}"><span id="content" part="content" class="${cx(this.size === "sm" && "sr-only")}"><slot></slot></span></span>`;
   }
@@ -44,7 +44,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdBadge.prototype, "inverted", 2);
 SdBadge = __decorateClass([
-  customElement("sd-6-0-0-next-20-badge")
+  customElement("sd-6-0-0-next-21-badge")
 ], SdBadge);
 
 export {

package/dist-versioned/chunks/{chunk.RZYPRKWX.js → chunk.JDH5QDD4.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AYA7WMLI.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -24,7 +24,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-6-0-0-next-20-tab-${this.attrId}`;
+    this.componentId = `sd-6-0-0-next-21-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.localize = new LocalizeController(this);
     this.variant = "default";
@@ -73,7 +73,7 @@ var SdTab = class extends SolidElement {
     )}"></slot><slot class="${cx(this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary")}"></slot>${this.variant === "container" ? html`<div part="active-tab-indicator" class="${cx(
       "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-0-0-next-20-tab-color-border"
+      !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-6-0-0-next-21-tab-color-border"
     )}"></div></div></div>`;
   }
 };
@@ -110,7 +110,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-6-0-0-next-20-tab")
+  customElement("sd-6-0-0-next-21-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.G4LU2DPT.js → chunk.JRJ4LNBT.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.FNYEXUNK.js";
 import {
   SdCarouselItem
-} from "./chunk.JE5DROBO.js";
+} from "./chunk.ST34ZDUW.js";
 import {
   AutoplayController
 } from "./chunk.F4VGSDIW.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AYA7WMLI.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   prefersReducedMotion
 } from "./chunk.HQWAKJBV.js";
@@ -60,7 +60,7 @@ var SdCarousel = class extends SolidElement {
     this.pausedAutoplay = false;
     this.autoplayController = new AutoplayController(this, () => this.next());
     this.scrollController = new ScrollController(this);
-    this.slides = this.getElementsByTagName("sd-6-0-0-next-20-carousel-item");
+    this.slides = this.getElementsByTagName("sd-6-0-0-next-21-carousel-item");
     // determines which slide is displayed
     // A map containing the state of all the slides
     this.intersectionObserverEntries = /* @__PURE__ */ new Map();
@@ -449,7 +449,7 @@ var SdCarousel = class extends SolidElement {
     )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${prevEnabled ? (e) => {
       this.previous();
       this.unblockAutoplay(e, this.previousButton);
-    } : null}"><slot name="previous-icon"><sd-6-0-0-next-20-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-6-0-0-next-20-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-0-0-next-21-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-6-0-0-next-21-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",
@@ -460,7 +460,7 @@ var SdCarousel = class extends SolidElement {
         this.goToSlide(index * slidesPerMove);
         this.unblockAutoplay(e, this.paginationItems[index]);
       }}" @keydown="${this.handleKeyDown}"><span class="${cx(
-        "h-4 w-4 block border sd-6-0-0-next-20-carousel__pager-dot-border-width hover:border-primary-500 rounded-full transition-colors duration-slow hover:duration-fast ease-in-out",
+        "h-4 w-4 block border sd-6-0-0-next-21-carousel__pager-dot-border-width hover:border-primary-500 rounded-full transition-colors duration-slow hover:duration-fast ease-in-out",
         this.inverted ? "border-white hover:border-primary-500" : "border-primary",
         isActive && "bg-accent border-none",
         isActive ? this.inverted ? "hover:bg-accent-300" : "hover:bg-accent-550" : ""
@@ -472,7 +472,7 @@ var SdCarousel = class extends SolidElement {
     )}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${nextEnabled ? (e) => {
       this.next();
       this.unblockAutoplay(e, this.nextButton);
-    } : null}"><slot name="next-icon"><sd-6-0-0-next-20-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-6-0-0-next-20-icon></slot></button></div><button class="${cx(
+    } : null}"><slot name="next-icon"><sd-6-0-0-next-21-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-6-0-0-next-21-icon></slot></button></div><button class="${cx(
       "ml-6 !rounded-sm",
       "!absolute !right-0 sd-interactive",
       this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset",
@@ -482,13 +482,13 @@ var SdCarousel = class extends SolidElement {
       if (e.detail) {
         this.autoplayControls.blur();
       }
-    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-6-0-0-next-20-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-6-0-0-next-20-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-6-0-0-next-20-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-6-0-0-next-20-icon></slot></button></div></div>`;
+    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-6-0-0-next-21-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-6-0-0-next-21-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-6-0-0-next-21-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-6-0-0-next-21-icon></slot></button></div></div>`;
   }
 };
 SdCarousel.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.1.17 | 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}: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-0-0-next-20-button::part(label){pointer-events:none;display:flex;flex:auto;align-items:center}#carousel__navigation-button--next,#carousel__navigation-button--previous{color:rgba(var(--sd-color-icon-fill-primary))}#carousel__navigation-button--next:disabled,#carousel__navigation-button--previous:disabled{color:rgba(var(--sd-color-icon-fill-neutral-500))}:host([inverted]) #carousel__navigation-button--next,:host([inverted]) #carousel__navigation-button--previous{color:rgba(var(--sd-color-icon-fill-white))}:host([inverted]) #carousel__navigation-button--next:disabled,:host([inverted]) #carousel__navigation-button--previous:disabled{color:rgba(var(--sd-color-icon-fill-neutral-600))}`
+: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}: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-0-0-next-21-button::part(label){pointer-events:none;display:flex;flex:auto;align-items:center}#carousel__navigation-button--next,#carousel__navigation-button--previous{color:rgba(var(--sd-color-icon-fill-primary))}#carousel__navigation-button--next:disabled,#carousel__navigation-button--previous:disabled{color:rgba(var(--sd-color-icon-fill-neutral-500))}:host([inverted]) #carousel__navigation-button--next,:host([inverted]) #carousel__navigation-button--previous{color:rgba(var(--sd-color-icon-fill-white))}:host([inverted]) #carousel__navigation-button--next:disabled,:host([inverted]) #carousel__navigation-button--previous:disabled{color:rgba(var(--sd-color-icon-fill-neutral-600))}`
 ];
 __decorateClass([
   query('[part~="autoplay-controls"]')
@@ -561,7 +561,7 @@ __decorateClass([
   watch("autoplay")
 ], SdCarousel.prototype, "handleAutoplayChange", 1);
 SdCarousel = __decorateClass([
-  customElement("sd-6-0-0-next-20-carousel")
+  customElement("sd-6-0-0-next-21-carousel")
 ], SdCarousel);
 
 export {

package/dist-versioned/chunks/{chunk.ULHJFA5A.js → chunk.JST4Y73L.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AYA7WMLI.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -25,11 +25,11 @@ var SdOptgroup = class extends SolidElement {
     this.label = "";
   }
   /**
-   * Syncs the disabled prop for all slotted sd-6-0-0-next-20-options when it is triggered
+   * Syncs the disabled prop for all slotted sd-6-0-0-next-21-options when it is triggered
    */
   handleDisableOptions() {
     const { disabled } = this;
-    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-6-0-0-next-20-option").forEach((opt) => {
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-6-0-0-next-21-option").forEach((opt) => {
       opt.disabled = disabled;
     });
   }
@@ -38,7 +38,7 @@ var SdOptgroup = class extends SolidElement {
   }
   render() {
     const { disabled } = this;
-    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-6-0-0-next-20-divider id="divider" class="pt-2 pb-4" part="divider"></sd-6-0-0-next-20-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
+    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-6-0-0-next-21-divider id="divider" class="pt-2 pb-4" part="divider"></sd-6-0-0-next-21-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="listbox" part="options" aria-label="${this.localize.term("optionGroup")}"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
   }
 };
 SdOptgroup.styles = [
@@ -59,7 +59,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdOptgroup.prototype, "handleDisabledChange", 1);
 SdOptgroup = __decorateClass([
-  customElement("sd-6-0-0-next-20-optgroup")
+  customElement("sd-6-0-0-next-21-optgroup")
 ], SdOptgroup);
 
 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-0-0-next-20-menu-item" || ((_a = event.target.role) == null ? void 0 : _a.startsWith("menuitem")))) {
+      } else if (event.target instanceof Element && (event.target.tagName === "sd-6-0-0-next-21-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-0-0-next-20-menu")[0];
+      const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sd-6-0-0-next-21-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-0-0-next-20-menu-item, [role^='menuitem']");
+      menuItems = elt.querySelectorAll("sd-6-0-0-next-21-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-0-0-next-20-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-0-0-next-20-popup>`;
+    return html`<sd-6-0-0-next-21-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-0-0-next-21-popup>`;
   }
 };