@solid-design-system/components 5.13.12 → 5.13.13

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

@@ -41,7 +41,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdSpinner.prototype, "color", 2);
 SdSpinner = __decorateClass([
-  customElement("sd-5-13-12-spinner")
+  customElement("sd-5-13-13-spinner")
 ], SdSpinner);
 
 export {

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

@@ -206,15 +206,15 @@ var SdTooltip = class extends SolidElement {
   render() {
     const isStart = this.placement.endsWith("-start");
     const isEnd = this.placement.endsWith("-end");
-    return html`<sd-5-13-12-popup part="base" exportparts="
+    return html`<sd-5-13-13-popup part="base" exportparts="
           popup:base__popup,
           arrow:base__arrow
-        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0">${this.hasCustomTrigger ? html`<slot slot="anchor"></slot>` : html`<button slot="anchor" aria-describedby="tooltip" class="${cx("flex sd-interactive rounded-full", this.size === "lg" ? "text-xl" : "text-base")}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="tooltip"><sd-5-13-12-icon library="_internal" name="info-circle" label="Tooltip" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-5-13-12-icon></button>`}<slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="${this.content}" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-5-13-12-popup>`;
+        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0">${this.hasCustomTrigger ? html`<slot slot="anchor"></slot>` : html`<button slot="anchor" aria-describedby="tooltip" class="${cx("flex sd-interactive rounded-full", this.size === "lg" ? "text-xl" : "text-base")}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="tooltip"><sd-5-13-13-icon library="_internal" name="info-circle" label="Tooltip" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-5-13-13-icon></button>`}<slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="${this.content}" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-5-13-13-popup>`;
   }
 };
 SdTooltip.styles = [
   ...SolidElement.styles,
-  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-5-13-12-popup{--arrow-color:rgb(var(--sd-color-primary,0 53 142)/1);--arrow-size:10px}sd-5-13-12-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-5-13-12-popup::part(arrow){--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-5-13-12-popup[placement^=top]::part(popup){transform-origin:bottom}sd-5-13-12-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`
+  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-5-13-13-popup{--arrow-color:rgb(var(--sd-color-primary,0 53 142)/1);--arrow-size:10px}sd-5-13-13-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-5-13-13-popup::part(arrow){--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-5-13-13-popup[placement^=top]::part(popup){transform-origin:bottom}sd-5-13-13-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -223,7 +223,7 @@ __decorateClass([
   query("#tooltip")
 ], SdTooltip.prototype, "body", 2);
 __decorateClass([
-  query("sd-5-13-12-popup")
+  query("sd-5-13-13-popup")
 ], SdTooltip.prototype, "popup", 2);
 __decorateClass([
   property({ type: String, reflect: true })
@@ -256,7 +256,7 @@ __decorateClass([
   watch("disabled")
 ], SdTooltip.prototype, "handleDisabledChange", 1);
 SdTooltip = __decorateClass([
-  customElement("sd-5-13-12-tooltip")
+  customElement("sd-5-13-13-tooltip")
 ], SdTooltip);
 setDefaultAnimation("tooltip.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],

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

@@ -89,7 +89,7 @@ var SdStep = class extends SolidElement {
       !this.disabled && !this.current && !this.notInteractive && "text-primary group-hover:text-primary-500 group-hover:fill-primary-500",
       this.notInteractive && "text-primary",
       this.size === "lg" ? "text-lg" : "text-sm"
-    )}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-5-13-12-icon name="status-check" library="_internal"></sd-5-13-12-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
+    )}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-5-13-13-icon name="status-check" library="_internal"></sd-5-13-13-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
       this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",
       !this.disabled && !this.current && !this.notInteractive ? " border-primary group-hover:border-primary-500" : "border-neutral-400"
     )}"></div>`}</div><div part="text-container" class="${cx("mt-4 break-words flex flex-col gap-2", this.orientation === "horizontal" ? "text-center w-40" : "w-max text-left", this.disabled && "!text-neutral-700", this.notInteractive ? "ml-3" : "mr-4")}"><div part="label" id="label" class="${cx("!font-bold sd-paragraph", this.disabled && "!text-neutral-700", !this.disabled && !this.current && !this.notInteractive ? "!text-primary group-hover:!text-primary-500 group-hover:cursor-pointer" : "text-black")}"><slot name="label">${this.label}</slot></div><div part="description" id="description" class="${cx("sd-paragraph sd-paragraph--size-sm", this.disabled && "!text-neutral-700")}">${this.description || html`<slot></slot>`}</div></div></div>`;
@@ -139,7 +139,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStep.prototype, "handleInteractivityChange", 1);
 SdStep = __decorateClass([
-  customElement("sd-5-13-12-step")
+  customElement("sd-5-13-13-step")
 ], SdStep);
 
 export {

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

@@ -64,7 +64,7 @@ __decorateClass([
   query('[part="base"]')
 ], SdTeaserMedia.prototype, "teaserMedia", 2);
 SdTeaserMedia = __decorateClass([
-  customElement("sd-5-13-12-teaser-media")
+  customElement("sd-5-13-13-teaser-media")
 ], SdTeaserMedia);
 
 export {

package/dist-versioned/chunks/chunk.H6E4C5UY.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-13-12-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-13-12-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-13-13-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-13-13-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-13-12-option")
+  customElement("sd-5-13-13-option")
 ], SdOption);
 
 export {

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

@@ -71,7 +71,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "updateCalculatedHeight", 1);
 SdHeader = __decorateClass([
-  customElement("sd-5-13-12-header")
+  customElement("sd-5-13-13-header")
 ], SdHeader);
 
 export {

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

@@ -398,10 +398,10 @@ var SdRange = class extends SolidElement {
           ariaLabel = this.tooltipFormatter(value);
         }
       }
-      return html`<sd-5-13-12-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-13-13-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-13-12-tooltip>`;
+      )}"></div></sd-5-13-13-tooltip>`;
     });
   }
   render() {
@@ -473,7 +473,7 @@ __decorateClass([
   property({ type: String })
 ], SdRange.prototype, "value", 1);
 SdRange = __decorateClass([
-  customElement("sd-5-13-12-range")
+  customElement("sd-5-13-13-range")
 ], SdRange);
 
 export {

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

@@ -104,7 +104,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-5-13-12-teaser")
+  customElement("sd-5-13-13-teaser")
 ], SdTeaser);
 
 export {

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

@@ -222,7 +222,7 @@ var SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-5-13-12-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-5-13-12-loader>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-5-13-13-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-5-13-13-loader>` : ""}</${tag}>`;
   }
 };
 /**
@@ -230,13 +230,13 @@ var SdButton = class extends SolidElement {
  */
 SdButton.styles = [
   ...SolidElement.styles,
-  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto);z-index:0}::slotted(sd-5-13-12-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-5-13-12-icon),sd-5-13-12-loader{font-size:calc(var(--tw-varspacing)/2)}`
+  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto);z-index:0}::slotted(sd-5-13-13-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-5-13-13-icon),sd-5-13-13-loader{font-size:calc(var(--tw-varspacing)/2)}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-5-13-12-icon" })
+  queryAssignedElements({ selector: "sd-5-13-13-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -302,7 +302,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-5-13-12-button")
+  customElement("sd-5-13-13-button")
 ], SdButton);
 
 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-5-13-12-menu-item" || ((_a = event.target.role) == null ? void 0 : _a.startsWith("menuitem")))) {
+      } else if (event.target instanceof Element && (event.target.tagName === "sd-5-13-13-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-13-12-menu")[0];
+      const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sd-5-13-13-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-13-12-menu-item, [role^='menuitem']");
+      menuItems = elt.querySelectorAll("sd-5-13-13-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-13-12-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-13-12-popup>`;
+    return html`<sd-5-13-13-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-13-13-popup>`;
   }
 };
 

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

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

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

@@ -118,7 +118,7 @@ var SdCheckbox = class extends SolidElement {
   render() {
     const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
     return html`<label part="base" class="${cx(
-      "sd-5-13-12-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-5-13-13-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -157,7 +157,7 @@ var SdCheckbox = class extends SolidElement {
         filled: "bg-accent group-hover:bg-accent-550",
         default: "hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
-    )}"></div></div>${this.checked ? html`<sd-5-13-12-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-13-12-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-5-13-12-icon part="indeterminate-icon" class="text-white w-3 h-3" library="_internal" name="status-minus"></sd-5-13-12-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}"></div></div>${this.checked ? html`<sd-5-13-13-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-13-13-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-5-13-13-icon part="indeterminate-icon" class="text-white w-3 h-3" library="_internal" name="status-minus"></sd-5-13-13-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
     )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
@@ -219,7 +219,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-5-13-12-checkbox")
+  customElement("sd-5-13-13-checkbox")
 ], SdCheckbox);
 
 export {

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

@@ -25,11 +25,11 @@ var SdOptgroup = class extends SolidElement {
     this.label = "";
   }
   /**
-   * Syncs the disabled prop for all slotted sd-5-13-12-options when it is triggered
+   * Syncs the disabled prop for all slotted sd-5-13-13-options when it is triggered
    */
   handleDisableOptions() {
     const { disabled } = this;
-    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-5-13-12-option").forEach((opt) => {
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-5-13-13-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-5-13-12-divider id="divider" class="pt-2 pb-4" part="divider"></sd-5-13-12-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-5-13-13-divider id="divider" class="pt-2 pb-4" part="divider"></sd-5-13-13-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 = [
@@ -58,7 +58,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdOptgroup.prototype, "handleDisabledChange", 1);
 SdOptgroup = __decorateClass([
-  customElement("sd-5-13-12-optgroup")
+  customElement("sd-5-13-13-optgroup")
 ], SdOptgroup);
 
 export {

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

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

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

@@ -142,7 +142,7 @@ var SdAccordion = class extends SolidElement {
     )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-medium text-xl",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-5-13-12-icon library="_internal" name="chevron-down"></sd-5-13-12-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-13-12-icon library="_internal" name="chevron-down"></sd-5-13-12-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-5-13-13-icon library="_internal" name="chevron-down"></sd-5-13-13-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-13-13-icon library="_internal" name="chevron-down"></sd-5-13-13-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
   }
 };
 SdAccordion.styles = [
@@ -168,7 +168,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-5-13-12-accordion")
+  customElement("sd-5-13-13-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

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

@@ -84,7 +84,7 @@ var SdLink = class extends SolidElement {
 };
 SdLink.styles = [
   ...SolidElement.styles,
-  css`::slotted(sd-5-13-12-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-5-13-12-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-5-13-12-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
+  css`::slotted(sd-5-13-13-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-5-13-13-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-5-13-13-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
 ];
 __decorateClass([
   query("a")
@@ -111,7 +111,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-5-13-12-link")
+  customElement("sd-5-13-13-link")
 ], SdLink);
 
 export {

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

@@ -126,7 +126,7 @@ __decorateClass([
   watch(["name", "src", "library"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-5-13-12-icon")
+  customElement("sd-5-13-13-icon")
 ], SdIcon);
 
 export {

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

@@ -88,7 +88,7 @@ var SdRadioButton = class extends SolidElement {
 };
 SdRadioButton.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;inset:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);outline-color:rgb(var(--sd-color-error,204 25 55)/1);outline-style:dotted;outline-width:1px;position:absolute;z-index:-10}.lg-label,.lg-no-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{padding-left:var(--sd-spacing-5,1.25rem);padding-right:var(--sd-spacing-5,1.25rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{padding-left:var(--sd-spacing-4,1rem);padding-right:var(--sd-spacing-4,1rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{padding-left:var(--sd-spacing-3,.75rem);padding-right:var(--sd-spacing-3,.75rem)}:host([size=lg].sd-5-13-12-button-group__button:not(.sd-5-13-12-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-3,.75rem)*-1)}:host([size=md].sd-5-13-12-button-group__button:not(.sd-5-13-12-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-2,.5rem)*-1)}:host([size=sm].sd-5-13-12-button-group__button:not(.sd-5-13-12-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-1,.25rem)*-1)}:host(.sd-5-13-12-button-group__button--hover){z-index:20}:host(.sd-5-13-12-button-group__button--focus),:host(.sd-5-13-12-button-group__button[checked]){z-index:10}`
+  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;inset:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);outline-color:rgb(var(--sd-color-error,204 25 55)/1);outline-style:dotted;outline-width:1px;position:absolute;z-index:-10}.lg-label,.lg-no-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{padding-left:var(--sd-spacing-5,1.25rem);padding-right:var(--sd-spacing-5,1.25rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{padding-left:var(--sd-spacing-4,1rem);padding-right:var(--sd-spacing-4,1rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{padding-left:var(--sd-spacing-3,.75rem);padding-right:var(--sd-spacing-3,.75rem)}:host([size=lg].sd-5-13-13-button-group__button:not(.sd-5-13-13-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-3,.75rem)*-1)}:host([size=md].sd-5-13-13-button-group__button:not(.sd-5-13-13-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-2,.5rem)*-1)}:host([size=sm].sd-5-13-13-button-group__button:not(.sd-5-13-13-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-1,.25rem)*-1)}:host(.sd-5-13-13-button-group__button--hover){z-index:20}:host(.sd-5-13-13-button-group__button--focus),:host(.sd-5-13-13-button-group__button[checked]){z-index:10}`
 ];
 __decorateClass([
   query(".button")
@@ -118,7 +118,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadioButton.prototype, "handleDisabledChange", 1);
 SdRadioButton = __decorateClass([
-  customElement("sd-5-13-12-radio-button")
+  customElement("sd-5-13-13-radio-button")
 ], SdRadioButton);
 
 export {

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

@@ -68,7 +68,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-5-13-12-include")
+  customElement("sd-5-13-13-include")
 ], SdInclude);
 
 export {

package/dist-versioned/chunks/chunk.QGTSHDWW.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-13-12-carousel-item")
+  customElement("sd-5-13-13-carousel-item")
 ], SdCarouselItem);
 
 export {

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

@@ -22,7 +22,7 @@ var SdBreadcrumb = class extends SolidElement {
     this.isTruncated = false;
   }
   get items() {
-    return this.querySelectorAll("sd-5-13-12-breadcrumb-item");
+    return this.querySelectorAll("sd-5-13-13-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-13-12-icon");
+    const icon = document.createElement("sd-5-13-13-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-13-12-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-13-13-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-13-12-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-13-12-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-13-13-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-13-13-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-13-12-breadcrumb-item:not(:last-of-type)):after,sd-5-13-12-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-13-12-breadcrumb-item:not(:last-of-type)):after,sd-5-13-12-dropdown:after{content:var(--tw-content);display:inline-block}}::slotted(sd-5-13-12-breadcrumb-item:nth-last-child(2)){display:flex}@media (min-width:1024px){::slotted(sd-5-13-12-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-13-12-breadcrumb-item),sd-5-13-12-dropdown{align-items:center;display:none}@media (min-width:1024px){::slotted(sd-5-13-12-breadcrumb-item),sd-5-13-12-dropdown{display:flex}}`
+  css`:host{display:block;position:relative}::slotted(sd-5-13-13-breadcrumb-item:not(:last-of-type)):after,sd-5-13-13-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-13-13-breadcrumb-item:not(:last-of-type)):after,sd-5-13-13-dropdown:after{content:var(--tw-content);display:inline-block}}::slotted(sd-5-13-13-breadcrumb-item:nth-last-child(2)){display:flex}@media (min-width:1024px){::slotted(sd-5-13-13-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-13-13-breadcrumb-item),sd-5-13-13-dropdown{align-items:center;display:none}@media (min-width:1024px){::slotted(sd-5-13-13-breadcrumb-item),sd-5-13-13-dropdown{display:flex}}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -116,7 +116,7 @@ __decorateClass([
   state()
 ], SdBreadcrumb.prototype, "isTruncated", 2);
 SdBreadcrumb = __decorateClass([
-  customElement("sd-5-13-12-breadcrumb")
+  customElement("sd-5-13-13-breadcrumb")
 ], SdBreadcrumb);
 
 export {

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

@@ -26,7 +26,7 @@ var SdCheckboxGroup = class extends SolidElement {
     this.helpText = "";
   }
   getAllCheckboxes() {
-    return [...this.querySelectorAll("sd-5-13-12-checkbox")];
+    return [...this.querySelectorAll("sd-5-13-13-checkbox")];
   }
   async syncCheckboxElements() {
     const checkboxes = this.getAllCheckboxes();
@@ -39,10 +39,10 @@ var SdCheckboxGroup = class extends SolidElement {
     );
   }
   syncCheckboxes() {
-    if (customElements.get("sd-5-13-12-checkbox")) {
+    if (customElements.get("sd-5-13-13-checkbox")) {
       this.syncCheckboxElements();
     } else {
-      customElements.whenDefined("sd-5-13-12-checkbox").then(() => this.syncCheckboxes());
+      customElements.whenDefined("sd-5-13-13-checkbox").then(() => this.syncCheckboxes());
     }
   }
   handleSizeChange() {
@@ -79,7 +79,7 @@ var SdCheckboxGroup = class extends SolidElement {
  */
 SdCheckboxGroup.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-5-13-12-checkbox){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-5-13-12-checkbox:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-5-13-12-checkbox){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-5-13-12-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-5-13-12-checkbox){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-5-13-12-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}`
+  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-5-13-13-checkbox){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-5-13-13-checkbox:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-5-13-13-checkbox){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-5-13-13-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-5-13-13-checkbox){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-5-13-13-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -100,7 +100,7 @@ __decorateClass([
   watch("invalid", { waitUntilFirstUpdate: true })
 ], SdCheckboxGroup.prototype, "handleInvalid", 1);
 SdCheckboxGroup = __decorateClass([
-  customElement("sd-5-13-12-checkbox-group")
+  customElement("sd-5-13-13-checkbox-group")
 ], SdCheckboxGroup);
 
 export {

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

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

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

@@ -18,7 +18,7 @@ var SdTabPanel = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-5-13-12-tab-panel-${this.attrId}`;
+    this.componentId = `sd-5-13-13-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-13-12-tab-panel")
+  customElement("sd-5-13-13-tab-panel")
 ], SdTabPanel);
 
 export {