@solid-design-system/components 5.8.2 → 5.8.4

package/dist-versioned/chunks/{chunk.BGJVVJYW.js → chunk.VPMSIODG.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.X6WRFCHO.js";
+} from "./chunk.HY3LORT5.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-8-2-icon")) == null ? void 0 : _c.setAttribute("label", label);
+    (_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-5-8-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-8-2-icon")) == null ? void 0 : _a.setAttribute("label", label);
+    (_a = button.querySelector("sd-5-8-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-8-2-icon library="_internal" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-5-8-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-8-4-icon library="_internal" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-5-8-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-8-2-icon library="_internal" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-5-8-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-8-4-icon library="_internal" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-5-8-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-8-2-icon library="_internal" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-5-8-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-8-4-icon library="_internal" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-5-8-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-8-2-icon library="_internal" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-5-8-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-8-4-icon library="_internal" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-5-8-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-8-2-icon--top{align-self:flex-start}.sd-5-8-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-8-4-icon--top{align-self:flex-start}.sd-5-8-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-8-2-scrollable")
+  customElement("sd-5-8-4-scrollable")
 ], SdScrollable);
 
 export {

package/dist-versioned/chunks/{chunk.PBSF5V4E.js → chunk.WHHDXLGX.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.X6WRFCHO.js";
+} from "./chunk.HY3LORT5.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -17,19 +17,19 @@ var SdButtonGroup = class extends SolidElement {
   }
   handleFocus(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-5-8-2-button-group__button--focus");
+    button == null ? void 0 : button.classList.add("sd-5-8-4-button-group__button--focus");
   }
   handleBlur(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-5-8-2-button-group__button--focus");
+    button == null ? void 0 : button.classList.remove("sd-5-8-4-button-group__button--focus");
   }
   handleMouseOver(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-5-8-2-button-group__button--hover");
+    button == null ? void 0 : button.classList.add("sd-5-8-4-button-group__button--hover");
   }
   handleMouseOut(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-5-8-2-button-group__button--hover");
+    button == null ? void 0 : button.classList.remove("sd-5-8-4-button-group__button--hover");
   }
   handleSlotChange() {
     const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
@@ -37,11 +37,11 @@ var SdButtonGroup = class extends SolidElement {
       const index = slottedElements.indexOf(el);
       const button = findButton(el);
       if (button !== null) {
-        button.classList.add("sd-5-8-2-button-group__button");
-        button.classList.toggle("sd-5-8-2-button-group__button--first", index === 0);
-        button.classList.toggle("sd-5-8-2-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle("sd-5-8-2-button-group__button--last", index === slottedElements.length - 1);
-        button.classList.toggle("sd-5-8-2-button-group__button--radio", button.tagName.toLowerCase() === "sd-5-8-2-radio-button");
+        button.classList.add("sd-5-8-4-button-group__button");
+        button.classList.toggle("sd-5-8-4-button-group__button--first", index === 0);
+        button.classList.toggle("sd-5-8-4-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle("sd-5-8-4-button-group__button--last", index === slottedElements.length - 1);
+        button.classList.toggle("sd-5-8-4-button-group__button--radio", button.tagName.toLowerCase() === "sd-5-8-4-radio-button");
       }
     });
   }
@@ -63,11 +63,11 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdButtonGroup.prototype, "label", 2);
 SdButtonGroup = __decorateClass([
-  customElement("sd-5-8-2-button-group")
+  customElement("sd-5-8-4-button-group")
 ], SdButtonGroup);
 function findButton(el) {
   var _a;
-  const selector = "sd-5-8-2-button, sd-5-8-2-radio-button";
+  const selector = "sd-5-8-4-button, sd-5-8-4-radio-button";
   return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
 }
 

package/dist-versioned/chunks/{chunk.L7XW5PYI.js → chunk.X2MHTR7J.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.X6WRFCHO.js";
+} from "./chunk.HY3LORT5.js";
 import {
   __decorateClass,
   __spreadValues
@@ -29,8 +29,8 @@ var SdTabGroup = class extends SolidElement {
   }
   connectedCallback() {
     const whenAllDefined = Promise.all([
-      customElements.whenDefined("sd-5-8-2-tab"),
-      customElements.whenDefined("sd-5-8-2-tab-panel")
+      customElements.whenDefined("sd-5-8-4-tab"),
+      customElements.whenDefined("sd-5-8-4-tab-panel")
     ]);
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => {
@@ -70,20 +70,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-5-8-2-tab" ? el : el.querySelector("sd-5-8-2-tab")).filter((el) => {
-      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-5-8-2-tab" : el.tagName.toLowerCase() === "sd-5-8-2-tab" && !el.disabled;
+    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-5-8-4-tab" ? el : el.querySelector("sd-5-8-4-tab")).filter((el) => {
+      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-5-8-4-tab" : el.tagName.toLowerCase() === "sd-5-8-4-tab" && !el.disabled;
     });
   }
   getAllPanels() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-8-2-tab-panel");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-8-4-tab-panel");
   }
   getActiveTab() {
     return this.tabs.find((t) => t.matches(":focus"));
   }
   handleClick(event) {
     const target = event.target;
-    const tab = target.closest("sd-5-8-2-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-8-2-tab-group");
+    const tab = target.closest("sd-5-8-4-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-8-4-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -93,8 +93,8 @@ var SdTabGroup = class extends SolidElement {
   }
   handleKeyDown(event) {
     const target = event.target;
-    const tab = target.closest("sd-5-8-2-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-8-2-tab-group");
+    const tab = target.closest("sd-5-8-4-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-8-4-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -119,7 +119,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-5-8-2-tab") {
+      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-5-8-4-tab") {
         let index = this.tabs.indexOf(activeEl);
         if (event.key === "Home") {
           index = 0;
@@ -215,15 +215,15 @@ 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" 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-5-8-2-icon library="_internal" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-8-2-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"><div part="separation" class="w-full border-[0.25px] border-neutral-400 absolute bottom-0"></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" class="${cx(
+    )}" @click="${this.handleScrollToStart}"><sd-5-8-4-icon library="_internal" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-8-4-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"><div part="separation" class="w-full border-[0.25px] border-neutral-400 absolute bottom-0"></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" 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-5-8-2-icon library="_internal" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-8-2-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-5-8-4-icon library="_internal" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-8-4-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`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}:focus-within::slotted(sd-5-8-2-tab-panel){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}::slotted(sd-5-8-2-tab-panel){--padding:1rem 0}`
+  css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}:focus-within::slotted(sd-5-8-4-tab-panel){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}::slotted(sd-5-8-4-tab-panel){--padding:1rem 0}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -244,7 +244,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdTabGroup.prototype, "activation", 2);
 SdTabGroup = __decorateClass([
-  customElement("sd-5-8-2-tab-group")
+  customElement("sd-5-8-4-tab-group")
 ], SdTabGroup);
 
 export {

package/dist-versioned/chunks/{chunk.WK2T7YB4.js → chunk.XEXGLMT2.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.X6WRFCHO.js";
+} from "./chunk.HY3LORT5.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -25,7 +25,7 @@ SdCarouselItem.styles = [
   css`:host{align-items:center;aspect-ratio:var(--aspect-ratio);display:flex;flex-direction:column;height:100%;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;width:100%}::slotted(img){height:100%;-o-object-fit:cover;object-fit:cover;width:100%}`
 ];
 SdCarouselItem = __decorateClass([
-  customElement("sd-5-8-2-carousel-item")
+  customElement("sd-5-8-4-carousel-item")
 ], SdCarouselItem);
 
 export {

package/dist-versioned/chunks/{chunk.VTMF55NN.js → chunk.XVD3XEUF.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.X6WRFCHO.js";
+} from "./chunk.HY3LORT5.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-8-2-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      "sd-5-8-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-8-2-radio")
+  customElement("sd-5-8-4-radio")
 ], SdRadio);
 
 export {

package/dist-versioned/chunks/{chunk.Z7IN7NPU.js → chunk.Z4FH3THI.js}

@@ -85,7 +85,10 @@ var icons = {
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 17C13 17.552 12.552 18 12 18C11.448 18 11 17.552 11 17C11 16.448 11.448 16 12 16C12.552 16 13 16.448 13 17Z"/><path d="M12 6C11.448 6 11 6.448 11 7V13C11 13.552 11.448 14 12 14C12.552 14 13 13.552 13 13V7C13 6.448 12.552 6 12 6Z"/><path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12 20C7.582 20 4 16.418 4 12C4 7.582 7.582 4 12 4C16.418 4 20 7.582 20 12C20 16.418 16.418 20 12 20Z"/></svg>`,
   "magnifying-glass": `
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.707 20.293l-6.967-6.96c-0.046-0.046-0.096-0.087-0.15-0.124l-0.004-0.002c0.882-1.162 1.413-2.632 1.413-4.227 0-3.881-3.146-7.027-7.027-7.027s-7.027 3.146-7.027 7.027c0 3.881 3.146 7.027 7.027 7.027 1.594 0 3.065-0.531 4.244-1.426l-0.017 0.013c0.039 0.057 0.081 0.107 0.127 0.153l6.967 6.967c0.181 0.181 0.431 0.292 0.707 0.292s0.526-0.112 0.707-0.292v0c0.183-0.181 0.296-0.432 0.296-0.71s-0.113-0.529-0.296-0.71l-0-0zM9 14c-2.761 0-5-2.239-5-5s2.239-5 5-5c2.761 0 5 2.239 5 5v0c0 2.761-2.239 5-5 5v0z"></path></svg>`,
-  transcript: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <path d="M19 22H5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h9a1 1 0 0 1 .707.293l5 5c.186.187.293.444.293.707v13a1 1 0 0 1-1 1ZM6 20h12V8.413L13.587 4H6v16Z"/> <path d="M19 10h-6a1 1 0 0 1-1-1V3a1 1 0 1 1 2 0v5h5a1 1 0 1 1 0 2Zm-3 4H8a1 1 0 1 1 0-2h8a1 1 0 1 1 0 2Zm-2 4H8a1 1 0 1 1 0-2h6a1 1 0 1 1 0 2Z"/></svg>`,
+  transcript: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M15 20H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h9a1 1 0 0 1 .707.293l5 5c.186.187.293.444.293.707v13a1 1 0 0 1-1 1ZM2 18h12V6.413L9.587 2H2v16Z"/>
+    <path fill="currentColor" d="M15 8H9a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v5h5a1 1 0 1 1 0 2Zm-3 4H4a1 1 0 1 1 0-2h8a1 1 0 1 1 0 2Zm-2 4H4a1 1 0 1 1 0-2h6a1 1 0 1 1 0 2Z"/>
+  </svg>`,
   mute: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
   <path d="M10.717 4.077a.997.997 0 0 0-1.09.217L5.92 8.001H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.92l3.707 3.707a.997.997 0 0 0 .707.293h.007a.953.953 0 0 0 .382-.079l-.006.002c.365-.154.617-.509.617-.923v-14a1 1 0 0 0-.61-.921l-.007-.002v-.001ZM4 10h1.333v4H4v-4Zm5.333 6.587-2-2V9.414l2-2v9.173Zm12.374-8.96a1 1 0 0 0-1.414 0l-2.96 2.96-2.96-2.96a1 1 0 0 0-1.413 1.414l-.001-.001 2.96 2.96-2.96 2.96a1 1 0 0 0 1.414 1.414l2.96-2.96 2.96 2.96a1 1 0 0 0 1.414-1.414L18.747 12l2.96-2.96a1 1 0 0 0 0-1.414v.001Z"/></svg>`,
   volume: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">

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

@@ -21,6 +21,6 @@ export default class SdAccordion extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-8-2-accordion': SdAccordion;
+        'sd-5-8-4-accordion': SdAccordion;
     }
 }

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

@@ -1,20 +1,20 @@
 import {
   SdAccordion
-} from "../../chunks/chunk.7ZNUQOKK.js";
+} from "../../chunks/chunk.LH3FOXUD.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.W5UEXEFA.js";
-import "../../chunks/chunk.T2B2M67W.js";
-import "../../chunks/chunk.Z7IN7NPU.js";
+import "../../chunks/chunk.2PJVN4WQ.js";
+import "../../chunks/chunk.7TFT5VTM.js";
+import "../../chunks/chunk.7VPFFNHR.js";
+import "../../chunks/chunk.Z4FH3THI.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
-import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.2G46ORZ2.js";
 import "../../chunks/chunk.ZC7XGWJ6.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.X6WRFCHO.js";
+import "../../chunks/chunk.HY3LORT5.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -11,6 +11,6 @@ export default class SdAccordionGroup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-8-2-accordion-group': SdAccordionGroup;
+        'sd-5-8-4-accordion-group': SdAccordionGroup;
     }
 }

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

@@ -1,21 +1,21 @@
 import {
   SdAccordionGroup
-} from "../../chunks/chunk.GWQANU5I.js";
-import "../../chunks/chunk.7ZNUQOKK.js";
+} from "../../chunks/chunk.2S3WUQ6C.js";
+import "../../chunks/chunk.LH3FOXUD.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.W5UEXEFA.js";
-import "../../chunks/chunk.T2B2M67W.js";
-import "../../chunks/chunk.Z7IN7NPU.js";
+import "../../chunks/chunk.2PJVN4WQ.js";
+import "../../chunks/chunk.7TFT5VTM.js";
+import "../../chunks/chunk.7VPFFNHR.js";
+import "../../chunks/chunk.Z4FH3THI.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
-import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.2G46ORZ2.js";
 import "../../chunks/chunk.ZC7XGWJ6.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.X6WRFCHO.js";
+import "../../chunks/chunk.HY3LORT5.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -34,6 +34,6 @@ export default class SdAnimation extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-8-2-animation': SdAnimation;
+        'sd-5-8-4-animation': SdAnimation;
     }
 }

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

@@ -1,9 +1,9 @@
 import {
   SdAnimation
-} from "../../chunks/chunk.374V27WG.js";
+} from "../../chunks/chunk.LMZP2HEH.js";
 import "../../chunks/chunk.TJOP7HQP.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.X6WRFCHO.js";
+import "../../chunks/chunk.HY3LORT5.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -54,6 +54,6 @@ export default class SdAudio extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-8-2-audio': SdAudio;
+        'sd-5-8-4-audio': SdAudio;
     }
 }

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

@@ -1,29 +1,29 @@
 import {
   SdAudio
-} from "../../chunks/chunk.VOSWJX2Z.js";
-import "../../chunks/chunk.DHECGUIH.js";
+} from "../../chunks/chunk.SS3CZ5NU.js";
+import "../../chunks/chunk.PQDBG4AZ.js";
 import "../../chunks/chunk.SF6AUNJF.js";
 import "../../chunks/chunk.EDMG7C5H.js";
 import "../../chunks/chunk.UMIKFOMI.js";
 import "../../chunks/chunk.WDWV53JP.js";
-import "../../chunks/chunk.3IFUYWCQ.js";
-import "../../chunks/chunk.XNHIGD4G.js";
+import "../../chunks/chunk.FKBZQOFQ.js";
+import "../../chunks/chunk.5UKTWIKN.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.W5UEXEFA.js";
-import "../../chunks/chunk.T2B2M67W.js";
-import "../../chunks/chunk.Z7IN7NPU.js";
+import "../../chunks/chunk.2PJVN4WQ.js";
+import "../../chunks/chunk.7TFT5VTM.js";
+import "../../chunks/chunk.7VPFFNHR.js";
+import "../../chunks/chunk.Z4FH3THI.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
-import "../../chunks/chunk.7VPFFNHR.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.2G46ORZ2.js";
 import "../../chunks/chunk.ZC7XGWJ6.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.X6WRFCHO.js";
+import "../../chunks/chunk.HY3LORT5.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.S3NI7NKU.js";

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

@@ -8,6 +8,6 @@ export default class SdBadge extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-8-2-badge': SdBadge;
+        'sd-5-8-4-badge': SdBadge;
     }
 }

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

@@ -1,7 +1,7 @@
 import {
   SdBadge
-} from "../../chunks/chunk.C3QUN3CW.js";
-import "../../chunks/chunk.X6WRFCHO.js";
+} from "../../chunks/chunk.O73ZT3UW.js";
+import "../../chunks/chunk.HY3LORT5.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -25,7 +25,7 @@ export default class SdBrandshape extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-8-2-brandshape': SdBrandshape;
+        'sd-5-8-4-brandshape': SdBrandshape;
     }
 }
 export {};

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

@@ -1,7 +1,7 @@
 import {
   SdBrandshape
-} from "../../chunks/chunk.ONBBO64D.js";
-import "../../chunks/chunk.X6WRFCHO.js";
+} from "../../chunks/chunk.DHRBNSPZ.js";
+import "../../chunks/chunk.HY3LORT5.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -22,6 +22,6 @@ export default class SdBreadcrumb extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-8-2-breadcrumb': SdBreadcrumb;
+        'sd-5-8-4-breadcrumb': SdBreadcrumb;
     }
 }

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

@@ -1,10 +1,10 @@
 import {
   SdBreadcrumb
-} from "../../chunks/chunk.PCHDKK7W.js";
+} from "../../chunks/chunk.TLWBSIPQ.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.2G46ORZ2.js";
 import "../../chunks/chunk.ZC7XGWJ6.js";
-import "../../chunks/chunk.X6WRFCHO.js";
+import "../../chunks/chunk.HY3LORT5.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/components/breadcrumb-item/breadcrumb-item.d.ts

@@ -14,6 +14,6 @@ export default class SdBreadcrumbItem extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-8-2-breadcrumb-item': SdBreadcrumbItem;
+        'sd-5-8-4-breadcrumb-item': SdBreadcrumbItem;
     }
 }

package/dist-versioned/components/breadcrumb-item/breadcrumb-item.js

@@ -1,11 +1,11 @@
 import {
   SdBreadcrumbItem
-} from "../../chunks/chunk.ECTYRNKF.js";
+} from "../../chunks/chunk.UVVLW7XN.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.2G46ORZ2.js";
 import "../../chunks/chunk.ZC7XGWJ6.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.X6WRFCHO.js";
+import "../../chunks/chunk.HY3LORT5.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -48,6 +48,6 @@ export default class SdButton extends SolidElement implements SolidFormControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-8-2-button': SdButton;
+        'sd-5-8-4-button': SdButton;
     }
 }

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

@@ -1,14 +1,14 @@
 import {
   SdButton
-} from "../../chunks/chunk.3IFUYWCQ.js";
-import "../../chunks/chunk.XNHIGD4G.js";
+} from "../../chunks/chunk.FKBZQOFQ.js";
+import "../../chunks/chunk.5UKTWIKN.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.2G46ORZ2.js";
 import "../../chunks/chunk.ZC7XGWJ6.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.X6WRFCHO.js";
+import "../../chunks/chunk.HY3LORT5.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -13,6 +13,6 @@ export default class SdButtonGroup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-8-2-button-group': SdButtonGroup;
+        'sd-5-8-4-button-group': SdButtonGroup;
     }
 }

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

@@ -1,7 +1,7 @@
 import {
   SdButtonGroup
-} from "../../chunks/chunk.PBSF5V4E.js";
-import "../../chunks/chunk.X6WRFCHO.js";
+} from "../../chunks/chunk.WHHDXLGX.js";
+import "../../chunks/chunk.HY3LORT5.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -61,6 +61,6 @@ export default class SdCarousel extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-8-2-carousel': SdCarousel;
+        'sd-5-8-4-carousel': SdCarousel;
     }
 }