@solid-design-system/components 4.6.11 → 4.6.13

package/dist-versioned/chunks/{chunk.CJL7IBJC.js → chunk.LMZE7CWI.js}

@@ -1,7 +1,10 @@
+import {
+  LocalizeController
+} from "./chunk.YKM42GKF.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.TXYWAHFM.js";
+} from "./chunk.ULJ5M2KG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -15,6 +18,7 @@ import cx from "classix";
 var SdTag = class extends SolidElement {
   constructor() {
     super(...arguments);
+    this.localize = new LocalizeController(this);
     this.size = "lg";
     this.selected = false;
     this.toggleable = false;
@@ -48,8 +52,8 @@ var SdTag = class extends SolidElement {
   }
   render() {
     const isLink = this.isLink();
-    const tag = isLink ? literal`a` : literal`button`;
-    return html`<${tag} part="base" type="${ifDefined(isLink ? void 0 : "button")}" href="${ifDefined(isLink ? this.href : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" aria-disabled="${this.disabled ? "true" : "false"}" aria-pressed="${ifDefined(this.toggleable ? this.selected : void 0)}" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" class="${cx(
+    const tag = isLink ? literal`a` : this.removable ? literal`div` : literal`button`;
+    return html`<${tag} part="base" type="${ifDefined(isLink ? void 0 : "button")}" href="${ifDefined(isLink ? this.href : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" aria-labelledby="content" aria-disabled="${this.disabled ? "true" : "false"}" aria-pressed="${ifDefined(this.toggleable ? this.selected : void 0)}" tabindex="${this.disabled || this.removable ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" class="${cx(
       /* basic styles of the wrapper */
       "inline-flex border box-border rounded-full items-center leading-none whitespace-nowrap focus-visible:focus-outline",
       {
@@ -65,21 +69,15 @@ var SdTag = class extends SolidElement {
       /* colors */
       !this.selected ? "border-primary text-primary hover:border-primary-500 hover:bg-neutral-100 hover:text-primary-500  disabled:border-neutral-500 disabled:text-neutral-500" : "bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500 disabled:bg-neutral-500 disabled:border-neutral-500",
       this.disabled && !isLink && "cursor-not-allowed"
-    )}"><slot part="content"></slot>${this.removable ? html`<slot part="removable-indicator" name="removable-indicator" @click="${this.handleRemoveClick}" class="${cx(
-      {
-        /* sizes, fonts */
-        lg: "text-base",
-        sm: "text-[12px]"
-      }[this.size]
-    )}"><sd-4-6-11-icon library="system" name="close" label="remove"></sd-4-6-11-icon></slot>` : ""}</${tag}>`;
+    )}"><slot id="content" part="content"></slot>${this.removable ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemoveClick}"><slot part="removable-indicator" name="removable-indicator"><sd-4-6-13-icon library="system" name="close" label="${this.localize.term("remove")}"></sd-4-6-13-icon></slot></button>` : ""}</${tag}>`;
   }
 };
 SdTag.styles = [
   ...SolidElement.styles,
-  css`:host{display:inline-block}`
+  css`:host{display:inline-block}:host([size=lg])::part(removable-indicator){font-size:var(--sd-font-size-base,1rem)}:host([size=sm])::part(removable-indicator){font-size:.75rem}`
 ];
 __decorateClass([
-  query("a, button")
+  query("a, button, div")
 ], SdTag.prototype, "tag", 2);
 __decorateClass([
   property({ type: String, reflect: true })
@@ -106,7 +104,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdTag.prototype, "download", 2);
 SdTag = __decorateClass([
-  customElement("sd-4-6-11-tag")
+  customElement("sd-4-6-13-tag")
 ], SdTag);
 
 export {

package/dist-versioned/chunks/{chunk.UHYIMTVH.js → chunk.MHSIUMF2.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.TXYWAHFM.js";
+} from "./chunk.ULJ5M2KG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -85,7 +85,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.frontVariant]
-    )}"></div><sd-4-6-11-button part="front-button" size="md" variant="${{
+    )}"></div><sd-4-6-13-button part="front-button" size="md" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -95,7 +95,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-4-6-11-icon library="system" name="reload" label="Flip to Back"></sd-4-6-11-icon></sd-4-6-11-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
+    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-4-6-13-icon library="system" name="reload" label="Flip to Back"></sd-4-6-13-icon></sd-4-6-13-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
       "flip-card__side flip-card__side--back overflow-hidden transition-transform duration-1000 ease-in-out",
       "flex focus-visible:focus-outline",
       "absolute top-0 left-0 w-full h-full justify-end text-left",
@@ -128,7 +128,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.backVariant]
-    )}"></div><sd-4-6-11-button size="md" part="back-button" variant="${{
+    )}"></div><sd-4-6-13-button size="md" part="back-button" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -138,7 +138,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-4-6-11-icon library="system" name="reload" label="Flip to Front"></sd-4-6-11-icon></sd-4-6-11-button></div></div>`;
+    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-4-6-13-icon library="system" name="reload" label="Flip to Front"></sd-4-6-13-icon></sd-4-6-13-button></div></div>`;
   }
 };
 /**
@@ -170,7 +170,7 @@ __decorateClass([
   state()
 ], SdFlipcard.prototype, "activeSide", 2);
 SdFlipcard = __decorateClass([
-  customElement("sd-4-6-11-flipcard")
+  customElement("sd-4-6-13-flipcard")
 ], SdFlipcard);
 
 export {

package/dist-versioned/chunks/{chunk.XLKZYB73.js → chunk.N4PCVM2O.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.TXYWAHFM.js";
+} from "./chunk.ULJ5M2KG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -90,7 +90,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "onResize", 1);
 SdHeader = __decorateClass([
-  customElement("sd-4-6-11-header")
+  customElement("sd-4-6-13-header")
 ], SdHeader);
 
 export {

package/dist-versioned/chunks/{chunk.AOWIHO7B.js → chunk.PAMIVTVZ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.TXYWAHFM.js";
+} from "./chunk.ULJ5M2KG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -137,7 +137,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-4-6-11-brandshape")
+  customElement("sd-4-6-13-brandshape")
 ], SdBrandshape);
 
 export {

package/dist-versioned/chunks/{chunk.ZDKRIMUK.js → chunk.QB4ZOKFD.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.TXYWAHFM.js";
+} from "./chunk.ULJ5M2KG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -27,14 +27,26 @@ import {
 import { css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import cx from "classix";
-var toastStackDefault = Object.assign(document.createElement("div"), {
-  role: "region",
-  className: "sd-toast-stack sd-toast-stack--top-right"
-});
-var toastStackBottomCenter = Object.assign(document.createElement("div"), {
-  role: "region",
-  className: "sd-toast-stack sd-toast-stack--bottom-center"
-});
+var stacks = {
+  "top-right": null,
+  "bottom-center": null
+};
+var loadStacks = () => {
+  Object.entries(stacks).forEach(([name]) => {
+    const stack = document.querySelector(`#sd-toast-stack--${name}`);
+    if (stack) {
+      stack.setAttribute("role", "region");
+      stacks[name] = stack;
+      return;
+    }
+    stacks[name] = Object.assign(document.createElement("div"), {
+      role: "region",
+      id: `sd-toast-stack--${name}`,
+      className: `sd-toast-stack sd-toast-stack--${name}`
+    });
+  });
+};
+loadStacks();
 var SdNotification = class extends SolidElement {
   constructor() {
     super(...arguments);
@@ -47,14 +59,9 @@ var SdNotification = class extends SolidElement {
     this.toastStack = "top-right";
     this.remainingDuration = this.duration;
     this.startTime = Date.now();
-    this.tabDirection = "forward";
-    this.focused = false;
   }
   get stack() {
-    return {
-      "top-right": toastStackDefault,
-      "bottom-center": toastStackBottomCenter
-    }[this.toastStack];
+    return stacks[this.toastStack];
   }
   connectedCallback() {
     super.connectedCallback();
@@ -62,12 +69,9 @@ var SdNotification = class extends SolidElement {
       document.body.append(this.stack);
       this.stack.ariaLabel = this.localize.term("notifications");
     }
-    this.handleFocusIn = this.handleFocusIn.bind(this);
-    document.addEventListener("focusin", this.handleFocusIn);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    document.removeEventListener("focusin", this.handleFocusIn);
   }
   firstUpdated() {
     this.base.hidden = !this.open;
@@ -98,28 +102,10 @@ var SdNotification = class extends SolidElement {
   handleCloseClick() {
     this.hide();
   }
-  checkFocus() {
-    if (!this.focused || !this.closable) return;
-    if (!this.matches(":focus-within")) {
-      const target = this.tabDirection === "forward" ? this.base : this.close;
-      if (typeof (target == null ? void 0 : target.focus) === "function") {
-        target.focus({ preventScroll: true });
-      }
-    }
-  }
-  handleFocusIn() {
-    this.focused = true;
-  }
   handleKeyDown(event) {
-    this.tabDirection = "forward";
     if (this.closable && event.key === "Escape") {
       this.hide();
-      return;
-    }
-    if (event.key === "Tab" && event.shiftKey) {
-      this.tabDirection = "backwards";
     }
-    requestAnimationFrame(() => this.checkFocus());
   }
   async handleOpenChange() {
     if (this.open) {
@@ -168,11 +154,10 @@ var SdNotification = class extends SolidElement {
    */
   async toast() {
     return new Promise((resolve) => {
-      const toastStack = this.toastStack === "bottom-center" ? toastStackBottomCenter : toastStackDefault;
-      if (toastStack.parentElement === null) {
-        document.body.append(toastStack);
+      if (this.stack.parentElement === null) {
+        document.body.append(this.stack);
       }
-      toastStack.appendChild(this);
+      this.stack.appendChild(this);
       requestAnimationFrame(() => {
         this.clientWidth;
         this.show();
@@ -180,18 +165,15 @@ var SdNotification = class extends SolidElement {
       this.addEventListener(
         "sd-after-hide",
         () => {
-          toastStack.removeChild(this);
+          this.stack.removeChild(this);
           resolve();
-          if (toastStack.querySelector("sd-4-6-11-notification") === null) {
-            toastStack.remove();
-          }
         },
         { once: true }
       );
     });
   }
   render() {
-    return html`<div part="base" class="${cx("w-full overflow-hidden flex items-stretch relative m-2 focus-visible:focus-outline")}" role="alert" id="notification" tabindex="0" aria-labelledby="message" aria-hidden="${this.open ? "false" : "true"}" @mouseenter="${this.onHover}" @mouseleave="${this.onHoverEnd}" @keydown="${this.handleKeyDown}"><slot name="icon" part="icon" class="${cx(
+    return html`<div part="base" class="${cx("w-full overflow-hidden flex items-stretch relative m-2 focus-visible:focus-outline")}" id="notification" tabindex="0" role="alert" aria-labelledby="message" aria-hidden="${this.open ? "false" : "true"}" @mouseenter="${this.onHover}" @mouseleave="${this.onHoverEnd}" @keydown="${this.handleKeyDown}"><slot name="icon" part="icon" class="${cx(
       "min-w-min flex items-center px-3 justify-center",
       {
         info: "bg-info",
@@ -199,15 +181,15 @@ var SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-4-6-11-icon name="${{
+    )}"><sd-4-6-13-icon name="${{
       info: "info-circle",
       success: "confirm-circle",
       warning: "exclamation-circle",
       error: "warning"
-    }[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-4-6-11-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-4-6-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-4-6-11-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-4-6-11-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-6-11-icon></sd-4-6-11-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>`;
+    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-4-6-13-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-4-6-13-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-6-13-icon></sd-4-6-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>`;
   }
 };
 /**
@@ -248,7 +230,7 @@ __decorateClass([
   watch("duration")
 ], SdNotification.prototype, "handleDurationChange", 1);
 SdNotification = __decorateClass([
-  customElement("sd-4-6-11-notification")
+  customElement("sd-4-6-13-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.HP5TMUCE.js → chunk.QGTHHUEP.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.TXYWAHFM.js";
+} from "./chunk.ULJ5M2KG.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-4-6-11-button-group__button--focus");
+    button == null ? void 0 : button.classList.add("sd-4-6-13-button-group__button--focus");
   }
   handleBlur(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-4-6-11-button-group__button--focus");
+    button == null ? void 0 : button.classList.remove("sd-4-6-13-button-group__button--focus");
   }
   handleMouseOver(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-4-6-11-button-group__button--hover");
+    button == null ? void 0 : button.classList.add("sd-4-6-13-button-group__button--hover");
   }
   handleMouseOut(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-4-6-11-button-group__button--hover");
+    button == null ? void 0 : button.classList.remove("sd-4-6-13-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-4-6-11-button-group__button");
-        button.classList.toggle("sd-4-6-11-button-group__button--first", index === 0);
-        button.classList.toggle("sd-4-6-11-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle("sd-4-6-11-button-group__button--last", index === slottedElements.length - 1);
-        button.classList.toggle("sd-4-6-11-button-group__button--radio", button.tagName.toLowerCase() === "sd-4-6-11-radio-button");
+        button.classList.add("sd-4-6-13-button-group__button");
+        button.classList.toggle("sd-4-6-13-button-group__button--first", index === 0);
+        button.classList.toggle("sd-4-6-13-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle("sd-4-6-13-button-group__button--last", index === slottedElements.length - 1);
+        button.classList.toggle("sd-4-6-13-button-group__button--radio", button.tagName.toLowerCase() === "sd-4-6-13-radio-button");
       }
     });
   }
@@ -63,11 +63,11 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdButtonGroup.prototype, "label", 2);
 SdButtonGroup = __decorateClass([
-  customElement("sd-4-6-11-button-group")
+  customElement("sd-4-6-13-button-group")
 ], SdButtonGroup);
 function findButton(el) {
   var _a;
-  const selector = "sd-4-6-11-button, sd-4-6-11-radio-button";
+  const selector = "sd-4-6-13-button, sd-4-6-13-radio-button";
   return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
 }
 

package/dist-versioned/chunks/{chunk.KXI7DQT7.js → chunk.QJSVVX5A.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.TXYWAHFM.js";
+} from "./chunk.ULJ5M2KG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -116,16 +116,16 @@ var SdNavigationItem = class extends SolidElement {
       isAccordion ? "grow" : "w-full",
       slots["description"] || this.separated ? "pb-1" : horizontalPaddingBottom,
       this.calculatePaddingX
-    )}">${this.divider && this.vertical ? html`<sd-4-6-11-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-4-6-11-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated ? html`<a class="${cx(
+    )}">${this.divider && this.vertical ? html`<sd-4-6-13-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-4-6-13-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated ? html`<a class="${cx(
       "mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-all min-h-[48px]",
       !slots["description"] && "py-4"
-    )}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline"></slot></a>` : html`<slot part="content" class="inline"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-4-6-11-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
+    )}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline"></slot></a>` : html`<slot part="content" class="inline"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-4-6-13-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
       "mr-4 h-6 w-6 transition-all",
       isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-4-6-11-icon></button>` : html`<sd-4-6-11-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
+    )}"></sd-4-6-13-icon></button>` : html`<sd-4-6-13-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
       "h-6 w-6 ml-2 transition-all",
       isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-4-6-11-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(
+    )}"></sd-4-6-13-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(
       "inline-block text-sm text-left text-black",
       isAccordion || this.separated ? "grow" : "w-full",
       this.separated ? "px-4" : this.calculatePaddingX,
@@ -190,7 +190,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdNavigationItem.prototype, "separated", 2);
 SdNavigationItem = __decorateClass([
-  customElement("sd-4-6-11-navigation-item")
+  customElement("sd-4-6-13-navigation-item")
 ], SdNavigationItem);
 
 export {

package/dist-versioned/chunks/{chunk.Q7SDLREI.js → chunk.RSBV2TUF.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.TXYWAHFM.js";
+} from "./chunk.ULJ5M2KG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -41,16 +41,16 @@ var SdAccordionGroup = class extends SolidElement {
 };
 SdAccordionGroup.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}::slotted(sd-4-6-11-accordion:not(:first-of-type)){margin-top:-1px}`
+  css`:host{display:block}::slotted(sd-4-6-13-accordion:not(:first-of-type)){margin-top:-1px}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-4-6-11-accordion" })
+  queryAssignedElements({ selector: "sd-4-6-13-accordion" })
 ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
 __decorateClass([
   property({ attribute: "close-others", type: Boolean, reflect: true })
 ], SdAccordionGroup.prototype, "closeOthers", 2);
 SdAccordionGroup = __decorateClass([
-  customElement("sd-4-6-11-accordion-group")
+  customElement("sd-4-6-13-accordion-group")
 ], SdAccordionGroup);
 
 export {

package/dist-versioned/chunks/{chunk.ZQJKVTOP.js → chunk.RX6EYXKU.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.TXYWAHFM.js";
+} from "./chunk.ULJ5M2KG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -43,7 +43,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdBadge.prototype, "inverted", 2);
 SdBadge = __decorateClass([
-  customElement("sd-4-6-11-badge")
+  customElement("sd-4-6-13-badge")
 ], SdBadge);
 
 export {

package/dist-versioned/chunks/{chunk.CKKINYND.js → chunk.SA5CVRAH.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.TXYWAHFM.js";
+} from "./chunk.ULJ5M2KG.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -64,7 +64,7 @@ __decorateClass([
   query('[part="base"]')
 ], SdTeaserMedia.prototype, "teaserMedia", 2);
 SdTeaserMedia = __decorateClass([
-  customElement("sd-4-6-11-teaser-media")
+  customElement("sd-4-6-13-teaser-media")
 ], SdTeaserMedia);
 
 export {