@solid-design-system/components 5.15.2 → 5.15.4

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-5-15-2-menu-item" || ((_a = event.target.role) == null ? void 0 : _a.startsWith("menuitem")))) {
+      } else if (event.target instanceof Element && (event.target.tagName === "sd-5-15-4-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-5-15-2-menu")[0];
+      const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sd-5-15-4-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-5-15-2-menu-item, [role^='menuitem']");
+      menuItems = elt.querySelectorAll("sd-5-15-4-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-5-15-2-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-5-15-2-popup>`;
+    return html`<sd-5-15-4-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-5-15-4-popup>`;
   }
 };
 

package/dist-versioned/chunks/{chunk.NFY6NE6Z.js → chunk.KEPCA2VR.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ var SdRadio = class extends SolidElement {
   }
   render() {
     return html`<span part="base" class="${cx(
-      "sd-5-15-2-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      "sd-5-15-4-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -127,7 +127,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadio.prototype, "handleDisabledChange", 1);
 SdRadio = __decorateClass([
-  customElement("sd-5-15-2-radio")
+  customElement("sd-5-15-4-radio")
 ], SdRadio);
 
 export {

package/dist-versioned/chunks/{chunk.VGC5A42Q.js → chunk.KFCKRUYW.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -55,7 +55,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdLoader.prototype, "color", 2);
 SdLoader = __decorateClass([
-  customElement("sd-5-15-2-loader")
+  customElement("sd-5-15-4-loader")
 ], SdLoader);
 
 export {

package/dist-versioned/chunks/{chunk.WUIOLD72.js → chunk.KGOTQFL4.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -22,7 +22,7 @@ var SdBreadcrumb = class extends SolidElement {
     this.isTruncated = false;
   }
   get items() {
-    return this.querySelectorAll("sd-5-15-2-breadcrumb-item");
+    return this.querySelectorAll("sd-5-15-4-breadcrumb-item");
   }
   cacheItemPositions() {
     this.items.forEach((item) => {
@@ -67,12 +67,12 @@ var SdBreadcrumb = class extends SolidElement {
   }
   handleMobileChevron() {
     var _a, _b, _c;
-    const icon = document.createElement("sd-5-15-2-icon");
+    const icon = document.createElement("sd-5-15-4-icon");
     icon.setAttribute("slot", "icon-left");
     icon.setAttribute("library", "_internal");
     icon.setAttribute("name", "chevron-left");
     icon.setAttribute("class", "text-base me-1 lg:hidden");
-    (_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-5-15-2-link")) == null ? void 0 : _c.appendChild(icon);
+    (_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-5-15-4-link")) == null ? void 0 : _c.appendChild(icon);
   }
   handleSlotChange() {
     this.handleMobileChevron();
@@ -87,12 +87,12 @@ var SdBreadcrumb = class extends SolidElement {
     this.resizeObserver.unobserve(this);
   }
   render() {
-    return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-5-15-2-dropdown part="truncated" class="${cx(!this.isTruncated && "absolute opacity-0 pointer-events-none")}"><button slot="trigger" tabindex="${this.isTruncated ? "0" : "-1"}" aria-label="${this.localize.term("truncatedBreadcrumbs")}" aria-expanded="false" aria-haspopup="true" class="flex sd-interactive">[...]</button><ol part="truncated-dropdown" class="flex flex-col gap-4 px-2 py-3 min-w-40"></ol></sd-5-15-2-dropdown><ol part="list" class="flex items-center"><slot @slotchange="${this.handleSlotChange}"></slot></ol></nav>`;
+    return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-5-15-4-dropdown part="truncated" class="${cx(!this.isTruncated && "absolute opacity-0 pointer-events-none")}"><button slot="trigger" tabindex="${this.isTruncated ? "0" : "-1"}" aria-label="${this.localize.term("truncatedBreadcrumbs")}" aria-expanded="false" aria-haspopup="true" class="flex sd-interactive">[...]</button><ol part="truncated-dropdown" class="flex flex-col gap-4 px-2 py-3 min-w-40"></ol></sd-5-15-4-dropdown><ol part="list" class="flex items-center"><slot @slotchange="${this.handleSlotChange}"></slot></ol></nav>`;
   }
 };
 SdBreadcrumb.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;position:relative}::slotted(sd-5-15-2-breadcrumb-item:not(:last-of-type)):after,sd-5-15-2-dropdown:after{border-radius:var(--sd-border-radius-full,9999px);content:var(--tw-content);display:none;height:var(--sd-spacing-1,.25rem);margin-left:var(--sd-spacing-2,.5rem);margin-right:var(--sd-spacing-2,.5rem);width:var(--sd-spacing-1,.25rem);--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-400,195 195 195)/var(--tw-bg-opacity,1))}@media (min-width:1024px){::slotted(sd-5-15-2-breadcrumb-item:not(:last-of-type)):after,sd-5-15-2-dropdown:after{content:var(--tw-content);display:inline-block}}::slotted(sd-5-15-2-breadcrumb-item:nth-last-child(2)){display:flex}@media (min-width:1024px){::slotted(sd-5-15-2-breadcrumb-item:nth-last-child(2)):after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(var(--sd-color-accent,45 157 0)/var(--tw-bg-opacity,1))}}::slotted(sd-5-15-2-breadcrumb-item),sd-5-15-2-dropdown{align-items:center;display:none}@media (min-width:1024px){::slotted(sd-5-15-2-breadcrumb-item),sd-5-15-2-dropdown{display:flex}}`
+  css`:host{display:block;position:relative}::slotted(sd-5-15-4-breadcrumb-item:not(:last-of-type)):after,sd-5-15-4-dropdown:after{border-radius:var(--sd-border-radius-full,9999px);content:var(--tw-content);display:none;height:var(--sd-spacing-1,.25rem);margin-left:var(--sd-spacing-2,.5rem);margin-right:var(--sd-spacing-2,.5rem);width:var(--sd-spacing-1,.25rem);--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-400,195 195 195)/var(--tw-bg-opacity,1))}@media (min-width:1024px){::slotted(sd-5-15-4-breadcrumb-item:not(:last-of-type)):after,sd-5-15-4-dropdown:after{content:var(--tw-content);display:inline-block}}::slotted(sd-5-15-4-breadcrumb-item:nth-last-child(2)){display:flex}@media (min-width:1024px){::slotted(sd-5-15-4-breadcrumb-item:nth-last-child(2)):after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(var(--sd-color-accent,45 157 0)/var(--tw-bg-opacity,1))}}::slotted(sd-5-15-4-breadcrumb-item),sd-5-15-4-dropdown{align-items:center;display:none}@media (min-width:1024px){::slotted(sd-5-15-4-breadcrumb-item),sd-5-15-4-dropdown{display:flex}}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -116,7 +116,7 @@ __decorateClass([
   state()
 ], SdBreadcrumb.prototype, "isTruncated", 2);
 SdBreadcrumb = __decorateClass([
-  customElement("sd-5-15-2-breadcrumb")
+  customElement("sd-5-15-4-breadcrumb")
 ], SdBreadcrumb);
 
 export {

package/dist-versioned/chunks/{chunk.HMK6KRAR.js → chunk.LFSEKQNM.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.FNYEXUNK.js";
 import {
   SdCarouselItem
-} from "./chunk.RUNTBTHS.js";
+} from "./chunk.64ZTG326.js";
 import {
   AutoplayController
 } from "./chunk.F4VGSDIW.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.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-5-15-2-carousel-item");
+    this.slides = this.getElementsByTagName("sd-5-15-4-carousel-item");
     // determines which slide is displayed
     // A map containing the state of all the slides
     this.intersectionObserverEntries = /* @__PURE__ */ new Map();
@@ -433,7 +433,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-5-15-2-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-5-15-2-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-5-15-4-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-5-15-4-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",
@@ -456,7 +456,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-5-15-2-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-5-15-2-icon></slot></button></div><button class="${cx(
+    } : null}"><slot name="next-icon"><sd-5-15-4-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-5-15-4-icon></slot></button></div><button class="${cx(
       "ml-6 !rounded-sm",
       "!absolute !right-0 sd-interactive",
       this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset",
@@ -466,12 +466,12 @@ var SdCarousel = class extends SolidElement {
       if (e.detail) {
         this.autoplayControls.blur();
       }
-    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-5-15-2-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-5-15-2-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-5-15-2-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-5-15-2-icon></slot></button></div></div>`;
+    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-5-15-4-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-5-15-4-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-5-15-4-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-5-15-4-icon></slot></button></div></div>`;
   }
 };
 SdCarousel.styles = [
   ...SolidElement.styles,
-  css`: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));-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);grid-auto-columns:var(--slide-size);padding-inline:var(--scroll-hint);scroll-padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}:host([fade]){--carousel-height:auto}:host([fade]) .carousel__slides{display:block;height:var(--carousel-height);overflow:hidden;position:relative}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-5-15-2-button::part(label){align-items:center;display:flex;flex:1 1 auto;pointer-events:none}`
+  css`: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));-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);grid-auto-columns:var(--slide-size);padding-inline:var(--scroll-hint);scroll-padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}:host([fade]){--carousel-height:auto}:host([fade]) .carousel__slides{display:block;height:var(--carousel-height);overflow:hidden;position:relative}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-5-15-4-button::part(label){align-items:center;display:flex;flex:1 1 auto;pointer-events:none}`
 ];
 __decorateClass([
   query('[part~="autoplay-controls"]')
@@ -544,7 +544,7 @@ __decorateClass([
   watch("autoplay")
 ], SdCarousel.prototype, "handleAutoplayChange", 1);
 SdCarousel = __decorateClass([
-  customElement("sd-5-15-2-carousel")
+  customElement("sd-5-15-4-carousel")
 ], SdCarousel);
 
 export {

package/dist-versioned/chunks/{chunk.I2LO4IGY.js → chunk.LI5GPRPP.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -97,7 +97,7 @@ var SdMenu = class extends SolidElement {
   }
   isMenuItem(item) {
     var _a;
-    return item.tagName.toLowerCase() === "sd-5-15-2-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
+    return item.tagName.toLowerCase() === "sd-5-15-4-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
   }
   /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
   getAllItems() {
@@ -131,13 +131,13 @@ var SdMenu = class extends SolidElement {
 };
 SdMenu.styles = [
   ...SolidElement.styles,
-  css`:host{border-radius:var(--sd-border-radius-md,.375rem);display:block;overflow:auto;overscroll-behavior:auto;padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);position:relative;--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75))!important;--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}::slotted(sd-5-15-2-divider){padding-bottom:var(--sd-spacing-3,.75rem);padding-top:var(--sd-spacing-3,.75rem)}`
+  css`:host{border-radius:var(--sd-border-radius-md,.375rem);display:block;overflow:auto;overscroll-behavior:auto;padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);position:relative;--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75))!important;--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}::slotted(sd-5-15-4-divider){padding-bottom:var(--sd-spacing-3,.75rem);padding-top:var(--sd-spacing-3,.75rem)}`
 ];
 __decorateClass([
   query("slot")
 ], SdMenu.prototype, "defaultSlot", 2);
 SdMenu = __decorateClass([
-  customElement("sd-5-15-2-menu")
+  customElement("sd-5-15-4-menu")
 ], SdMenu);
 
 export {

package/dist-versioned/chunks/{chunk.26VYQIOD.js → chunk.LK6R445Z.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -398,10 +398,10 @@ var SdRange = class extends SolidElement {
           ariaLabel = this.tooltipFormatter(value);
         }
       }
-      return html`<sd-5-15-2-tooltip hoist trigger="focus" disabled="${ifDefined(this.disabled || this.visuallyDisabled || this.noTooltip ? true : void 0)}"><div id="${id}" part="thumb" role="slider" tabindex="${this.disabled || this.visuallyDisabled ? -1 : 0}" aria-disabled="${ifDefined(this.disabled || this.visuallyDisabled ? "true" : void 0)}" aria-labelledby="${ariaLabeledBy}" aria-label="${ariaLabel}" aria-valuemax="${this.max}" aria-valuemin="${this.min}" aria-valuenow="${value}" aria-valuetext="${this.tooltipFormatter(value)}" data-range-id="${rangeId}" @pointerdown="${this.onClickThumb}" @pointermove="${this.onDragThumb}" @pointerup="${this.onReleaseThumb}" @pointercancel="${this.onReleaseThumb}" @pointerleave="${this.onReleaseThumb}" @keydown="${this.onKeyPress}" @focus="${this.onFocusThumb}" class="${cx(
+      return html`<sd-5-15-4-tooltip hoist trigger="focus" disabled="${ifDefined(this.disabled || this.visuallyDisabled || this.noTooltip ? true : void 0)}"><div id="${id}" part="thumb" role="slider" tabindex="${this.disabled || this.visuallyDisabled ? -1 : 0}" aria-disabled="${ifDefined(this.disabled || this.visuallyDisabled ? "true" : void 0)}" aria-labelledby="${ariaLabeledBy}" aria-label="${ariaLabel}" aria-valuemax="${this.max}" aria-valuemin="${this.min}" aria-valuenow="${value}" aria-valuetext="${this.tooltipFormatter(value)}" data-range-id="${rangeId}" @pointerdown="${this.onClickThumb}" @pointermove="${this.onDragThumb}" @pointerup="${this.onReleaseThumb}" @pointercancel="${this.onReleaseThumb}" @pointerleave="${this.onReleaseThumb}" @keydown="${this.onKeyPress}" @focus="${this.onFocusThumb}" class="${cx(
         "rounded-full absolute top-0 size-4 hover:cursor-grab after:-inset-2",
         this.disabled || this.visuallyDisabled ? "bg-neutral-500 outline-none" : "bg-primary hover:bg-primary-500 cursor-pointer focus-visible:focus-outline"
-      )}"></div></sd-5-15-2-tooltip>`;
+      )}"></div></sd-5-15-4-tooltip>`;
     });
   }
   render() {
@@ -473,7 +473,7 @@ __decorateClass([
   property({ type: String })
 ], SdRange.prototype, "value", 1);
 SdRange = __decorateClass([
-  customElement("sd-5-15-2-range")
+  customElement("sd-5-15-4-range")
 ], SdRange);
 
 export {

package/dist-versioned/chunks/{chunk.XWZNY4BH.js → chunk.M4HHULGJ.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -107,12 +107,12 @@ var SdMenuItem = class extends SolidElement {
     )}" .disabled="${this.disabled}" ?aria-haspopup="${this.isSubmenu()}" ?aria-expanded="${isSubmenuExpanded ? true : false}">${this.type === "checkbox" ? html`<span part="checked-icon" class="${cx(
       "flex items-center justify-center grow-0 shrink-0 basis-auto",
       this.checked ? "visible" : "invisible"
-    )}"><sd-5-15-2-icon name="status-check" library="sd-status-assets" aria-hidden="true"></sd-5-15-2-icon></span>` : ""} ${slots.iconIndent ? html`<slot name="icon-indent" part="icon-indent" class="flex items-center grow-0 shrink-0 basis-auto mr-2"></slot>` : ""}<slot part="label" class="inline-flex grow shrink basis-auto text-ellipsis overflow-hidden" @slotchange="${this.handleDefaultSlotChange}"></slot>${this.chevron || this.isSubmenu() ? html`<span part="submenu-icon" class="flex items-center justify-center grow-0 shrink-0 basis-auto ml-3"><sd-5-15-2-icon name="chevron-right" library="_internal" aria-hidden="true" class="h-6 w-6"></sd-5-15-2-icon></span>` : ""} ${this.submenuController.renderSubmenu()}</div>`;
+    )}"><sd-5-15-4-icon name="status-check" library="sd-status-assets" aria-hidden="true"></sd-5-15-4-icon></span>` : ""} ${slots.iconIndent ? html`<slot name="icon-indent" part="icon-indent" class="flex items-center grow-0 shrink-0 basis-auto mr-2"></slot>` : ""}<slot part="label" class="inline-flex grow shrink basis-auto text-ellipsis overflow-hidden" @slotchange="${this.handleDefaultSlotChange}"></slot>${this.chevron || this.isSubmenu() ? html`<span part="submenu-icon" class="flex items-center justify-center grow-0 shrink-0 basis-auto ml-3"><sd-5-15-4-icon name="chevron-right" library="_internal" aria-hidden="true" class="h-6 w-6"></sd-5-15-4-icon></span>` : ""} ${this.submenuController.renderSubmenu()}</div>`;
   }
 };
 SdMenuItem.styles = [
   ...SolidElement.styles,
-  css`:host{--submenu-offset:-6px;display:block}:host(:focus-visible){outline:2px solid transparent;outline-offset:2px}::slotted(sd-5-15-2-icon){height:var(--sd-spacing-6,1.5rem);width:var(--sd-spacing-6,1.5rem)}[part=checked-icon]{margin-right:var(--sd-spacing-3,.75rem)}.submenu-expanded:after{bottom:var(--sd-spacing-0,0);left:var(--sd-spacing-0,0);position:fixed;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);z-index:calc(var(z-dropdown) - 1);--tw-content:"";clip-path:polygon(var(--safe-triangle-cursor-x,0) var(--safe-triangle-cursor-y,0),var(--safe-triangle-submenu-start-x,0) var(--safe-triangle-submenu-start-y,0),var(--safe-triangle-submenu-end-x,0) var(--safe-triangle-submenu-end-y,0));content:var(--tw-content)}:host(:hover:not([aria-disabled=true],:focus-visible)) [part=base]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1));outline:2px solid transparent;outline-offset:2px}:host(:focus-visible:not([aria-disabled=true])) [part=base]{outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:-2px;outline-style:solid;outline-width:2px}:host(:hover) [part=base]{outline:2px solid transparent;outline-offset:2px}sd-5-15-2-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));margin-left:var(--submenu-offset)}::slotted(sd-5-15-2-menu){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important}`
+  css`:host{--submenu-offset:-6px;display:block}:host(:focus-visible){outline:2px solid transparent;outline-offset:2px}::slotted(sd-5-15-4-icon){height:var(--sd-spacing-6,1.5rem);width:var(--sd-spacing-6,1.5rem)}[part=checked-icon]{margin-right:var(--sd-spacing-3,.75rem)}.submenu-expanded:after{bottom:var(--sd-spacing-0,0);left:var(--sd-spacing-0,0);position:fixed;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);z-index:calc(var(z-dropdown) - 1);--tw-content:"";clip-path:polygon(var(--safe-triangle-cursor-x,0) var(--safe-triangle-cursor-y,0),var(--safe-triangle-submenu-start-x,0) var(--safe-triangle-submenu-start-y,0),var(--safe-triangle-submenu-end-x,0) var(--safe-triangle-submenu-end-y,0));content:var(--tw-content)}:host(:hover:not([aria-disabled=true],:focus-visible)) [part=base]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1));outline:2px solid transparent;outline-offset:2px}:host(:focus-visible:not([aria-disabled=true])) [part=base]{outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:-2px;outline-style:solid;outline-width:2px}:host(:hover) [part=base]{outline:2px solid transparent;outline-offset:2px}sd-5-15-4-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));margin-left:var(--submenu-offset)}::slotted(sd-5-15-4-menu){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -145,7 +145,7 @@ __decorateClass([
   watch("type")
 ], SdMenuItem.prototype, "handleTypeChange", 1);
 SdMenuItem = __decorateClass([
-  customElement("sd-5-15-2-menu-item")
+  customElement("sd-5-15-4-menu-item")
 ], SdMenuItem);
 
 export {

package/dist-versioned/chunks/{chunk.37LBEMXS.js → chunk.ML3YMDJ4.js}

@@ -21,7 +21,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   animateTo,
   stopAnimations
@@ -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-5-15-2-button> is a <button> located inside its shadow root.
+   * e.g. the accessible trigger of an <sd-5-15-4-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-5-15-2-button":
-        case "sd-5-15-2-icon-button":
+        case "sd-5-15-4-button":
+        case "sd-5-15-4-icon-button":
           target = accessibleTrigger.button;
           break;
-        case "sd-5-15-2-navigation-item":
+        case "sd-5-15-4-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-5-15-2-menu");
+    return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sd-5-15-4-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-5-15-2-menu-item") {
+      if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sd-5-15-4-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-5-15-2-menu") {
+    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sd-5-15-4-menu") {
       this.hide();
       this.focusOnTrigger();
     }
@@ -256,7 +256,7 @@ var SdDropdown = class extends SolidElement {
   }
   addOpenListeners() {
     this.panel.addEventListener("sd-activate", this.handleMenuItemActivate);
-    this.panel.addEventListener("sd-5-15-2-select", this.handlePanelSelect);
+    this.panel.addEventListener("sd-5-15-4-select", this.handlePanelSelect);
     this.panel.addEventListener("keydown", this.handleKeyDown);
     document.addEventListener("keydown", this.handleDocumentKeyDown);
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
@@ -264,7 +264,7 @@ var SdDropdown = class extends SolidElement {
   removeOpenListeners() {
     if (this.panel) {
       this.panel.removeEventListener("sd-activate", this.handleMenuItemActivate);
-      this.panel.removeEventListener("sd-5-15-2-select", this.handlePanelSelect);
+      this.panel.removeEventListener("sd-5-15-4-select", this.handlePanelSelect);
       this.panel.removeEventListener("keydown", this.handleKeyDown);
     }
     document.removeEventListener("keydown", this.handleDocumentKeyDown);
@@ -297,13 +297,13 @@ var SdDropdown = class extends SolidElement {
     }
   }
   render() {
-    return html`<sd-5-15-2-popup part="base" id="dropdown" exportparts="
+    return html`<sd-5-15-4-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(
       "shadow bg-white block",
       this.open ? "pointer-events-auto" : "pointer-events-none",
       this.rounded && "rounded-md"
-    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-5-15-2-popup>`;
+    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-5-15-4-popup>`;
   }
 };
 SdDropdown.styles = [
@@ -356,7 +356,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDropdown.prototype, "handleOpenChange", 1);
 SdDropdown = __decorateClass([
-  customElement("sd-5-15-2-dropdown")
+  customElement("sd-5-15-4-dropdown")
 ], SdDropdown);
 setDefaultAnimation("dropdown.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],

package/dist-versioned/chunks/{chunk.ZK4EFZJB.js → chunk.NSGW6FXQ.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -172,7 +172,7 @@ __decorateClass([
   watch(["checked"], { waitUntilFirstUpdate: true })
 ], SdSwitch.prototype, "handleStateChange", 1);
 SdSwitch = __decorateClass([
-  customElement("sd-5-15-2-switch")
+  customElement("sd-5-15-4-switch")
 ], SdSwitch);
 
 export {

package/dist-versioned/chunks/{chunk.KQLO4TZ5.js → chunk.O6LNQC5P.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -18,7 +18,7 @@ var SdTabPanel = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-5-15-2-tab-panel-${this.attrId}`;
+    this.componentId = `sd-5-15-4-tab-panel-${this.attrId}`;
     this.name = "";
     this.active = false;
   }
@@ -48,7 +48,7 @@ __decorateClass([
   watch("active")
 ], SdTabPanel.prototype, "handleActiveChange", 1);
 SdTabPanel = __decorateClass([
-  customElement("sd-5-15-2-tab-panel")
+  customElement("sd-5-15-4-tab-panel")
 ], SdTabPanel);
 
 export {

package/dist-versioned/chunks/{chunk.C332XERU.js → chunk.OCYR7QTC.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -93,7 +93,7 @@ var SdOption = class extends SolidElement {
     )}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
       "relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4 mr-2",
       this.disabled ? "border-neutral-500" : this.selected ? "bg-accent border-accent" : "bg-white border-neutral-800"
-    )}">${this.selected ? html`<sd-5-15-2-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-15-2-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
+    )}">${this.selected ? html`<sd-5-15-4-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-15-4-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
   }
 };
 /**
@@ -140,7 +140,7 @@ __decorateClass([
   watch("value")
 ], SdOption.prototype, "handleValueChange", 1);
 SdOption = __decorateClass([
-  customElement("sd-5-15-2-option")
+  customElement("sd-5-15-4-option")
 ], SdOption);
 
 export {

package/dist-versioned/chunks/{chunk.B4AW33FC.js → chunk.OF3Y52K7.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -323,7 +323,7 @@ __decorateClass([
   property({ attribute: "auto-size-padding", type: Number })
 ], SdPopup.prototype, "autoSizePadding", 2);
 SdPopup = __decorateClass([
-  customElement("sd-5-15-2-popup")
+  customElement("sd-5-15-4-popup")
 ], SdPopup);
 
 export {

package/dist-versioned/chunks/{chunk.SMMMT4SZ.js → chunk.OIHNIS5V.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.NXS7DO7N.js";
+} from "./chunk.RM5CDV7K.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -129,7 +129,7 @@ var SdScrollable = class extends SolidElement {
       down: this.upButton
     }[direction];
     const label = reachedStart ? `${this.localize.term("scrolled")}. ${this.localize.term("scrollToEnd")}` : `${this.localize.term("scrolled")}. ${this.localize.term("scrollToStart")}`;
-    (_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-5-15-2-icon")) == null ? void 0 : _c.setAttribute("label", label);
+    (_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-5-15-4-icon")) == null ? void 0 : _c.setAttribute("label", label);
     if (isKeyboardTriggered) {
       oppositeButton == null ? void 0 : oppositeButton.focus();
     } else {
@@ -141,7 +141,7 @@ var SdScrollable = class extends SolidElement {
     const scrollTo = ["left", "up"].includes(direction) ? "start" : "end";
     const label = scrollTo === "start" ? this.localize.term("scrollToStart") : this.localize.term("scrollToEnd");
     const button = e.target;
-    (_a = button.querySelector("sd-5-15-2-icon")) == null ? void 0 : _a.setAttribute("label", label);
+    (_a = button.querySelector("sd-5-15-4-icon")) == null ? void 0 : _a.setAttribute("label", label);
   }
   render() {
     const scrollButtonClasses = "relative p-0 border-0 bg-transparent cursor-pointer w-5 h-5 flex items-center justify-center sd-interactive rounded-md flex text-lg";
@@ -158,16 +158,16 @@ var SdScrollable = class extends SolidElement {
     )}" @scroll="${this.handleContainerScroll}" tabindex="0"><div id="announcement-container" role="status" class="sr-only"></div><div part="scroll-content" class="flex-1"><slot></slot></div></div>${this.buttons ? html`${this.isScrollHorizontalEnabled ? html`<div part="button-left" class="${cx(
       "absolute z-10 flex items-center justify-center top-0 left-0 h-full w-8 transition-opacity duration-medium ease-in-out",
       !this.canScroll.left && "opacity-0 pointer-events-none"
-    )}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.left || void 0)}" tabindex="${ifDefined(!this.canScroll.left ? -1 : void 0)}" @click="${(e) => this.handleScroll("left", e)}" @blur="${(e) => this.handleButtonBlur("left", e)}"><slot name="icon-start"><sd-5-15-2-icon library="_internal" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-5-15-2-icon></slot></button></div><div part="button-right" class="${cx(
+    )}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.left || void 0)}" tabindex="${ifDefined(!this.canScroll.left ? -1 : void 0)}" @click="${(e) => this.handleScroll("left", e)}" @blur="${(e) => this.handleButtonBlur("left", e)}"><slot name="icon-start"><sd-5-15-4-icon library="_internal" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-5-15-4-icon></slot></button></div><div part="button-right" class="${cx(
       "absolute z-10 flex items-center justify-center top-0 right-0 h-full w-8 transition-opacity duration-medium ease-in-out",
       !this.canScroll.right && "opacity-0 pointer-events-none"
-    )}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.right || void 0)}" tabindex="${ifDefined(!this.canScroll.right ? -1 : void 0)}" @click="${(e) => this.handleScroll("right", e)}" @blur="${(e) => this.handleButtonBlur("right", e)}"><slot name="icon-end"><sd-5-15-2-icon library="_internal" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-5-15-2-icon></slot></button></div>` : null} ${this.isScrollVerticalEnabled ? html`<div part="button-top" class="${cx(
+    )}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.right || void 0)}" tabindex="${ifDefined(!this.canScroll.right ? -1 : void 0)}" @click="${(e) => this.handleScroll("right", e)}" @blur="${(e) => this.handleButtonBlur("right", e)}"><slot name="icon-end"><sd-5-15-4-icon library="_internal" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-5-15-4-icon></slot></button></div>` : null} ${this.isScrollVerticalEnabled ? html`<div part="button-top" class="${cx(
       "absolute z-10 flex items-center justify-center top-0 left-0 w-full h-8 transition-opacity duration-medium ease-in-out",
       !this.canScroll.up && "opacity-0 pointer-events-none"
-    )}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.up || void 0)}" tabindex="${ifDefined(!this.canScroll.up ? -1 : void 0)}" @click="${(e) => this.handleScroll("up", e)}" @blur="${(e) => this.handleButtonBlur("up", e)}"><slot name="icon-start"><sd-5-15-2-icon library="_internal" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-5-15-2-icon></slot></button></div><div part="button-bottom" class="${cx(
+    )}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.up || void 0)}" tabindex="${ifDefined(!this.canScroll.up ? -1 : void 0)}" @click="${(e) => this.handleScroll("up", e)}" @blur="${(e) => this.handleButtonBlur("up", e)}"><slot name="icon-start"><sd-5-15-4-icon library="_internal" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-5-15-4-icon></slot></button></div><div part="button-bottom" class="${cx(
       "absolute z-10 flex items-center justify-center bottom-0 left-0 w-full h-8 transition-opacity duration-medium ease-in-out",
       !this.canScroll.down && "opacity-0 pointer-events-none"
-    )}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.down || void 0)}" tabindex="${ifDefined(!this.canScroll.down ? -1 : void 0)}" @click="${(e) => this.handleScroll("down", e)}" @blur="${(e) => this.handleButtonBlur("down", e)}"><slot name="icon-end"><sd-5-15-2-icon library="_internal" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-5-15-2-icon></slot></button></div>` : null}` : null} ${this.shadows ? html`${this.isScrollHorizontalEnabled ? html`<div part="shadow-left" class="${cx(
+    )}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.down || void 0)}" tabindex="${ifDefined(!this.canScroll.down ? -1 : void 0)}" @click="${(e) => this.handleScroll("down", e)}" @blur="${(e) => this.handleButtonBlur("down", e)}"><slot name="icon-end"><sd-5-15-4-icon library="_internal" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-5-15-4-icon></slot></button></div>` : null}` : null} ${this.shadows ? html`${this.isScrollHorizontalEnabled ? html`<div part="shadow-left" class="${cx(
       "left top-0 left-0 w-[6px] h-full",
       scrollShadowClasses,
       this.canScroll.left ? "opacity-100" : "opacity-0"
@@ -188,7 +188,7 @@ var SdScrollable = class extends SolidElement {
 };
 SdScrollable.styles = [
   ...SolidElement.styles,
-  css`:host{--gradient-color:hsla(0,0%,100%,0);--gradient:var(--gradient-color) 0%,#fff 80%,#fff 100%;display:flex;overflow:hidden;position:relative}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-border-radius-sm,.125rem)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1,.25rem);width:var(--sd-spacing-1,.25rem)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-right]{background:linear-gradient(90deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-top]{background:linear-gradient(0deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-bottom]{background:linear-gradient(180deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}.sd-5-15-2-icon--top{align-self:flex-start}.sd-5-15-2-icon--down{align-self:flex-end}`
+  css`:host{--gradient-color:hsla(0,0%,100%,0);--gradient:var(--gradient-color) 0%,#fff 80%,#fff 100%;display:flex;overflow:hidden;position:relative}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-border-radius-sm,.125rem)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1,.25rem);width:var(--sd-spacing-1,.25rem)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-right]{background:linear-gradient(90deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-top]{background:linear-gradient(0deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-bottom]{background:linear-gradient(180deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}.sd-5-15-4-icon--top{align-self:flex-start}.sd-5-15-4-icon--down{align-self:flex-end}`
 ];
 __decorateClass([
   query('[part="button-right"] button')
@@ -236,7 +236,7 @@ __decorateClass([
   state()
 ], SdScrollable.prototype, "isScrollVerticalEnabled", 2);
 SdScrollable = __decorateClass([
-  customElement("sd-5-15-2-scrollable")
+  customElement("sd-5-15-4-scrollable")
 ], SdScrollable);
 
 export {