@solid-design-system/components 6.13.1 → 6.14.1

package/dist-versioned/chunks/{chunk.MXDSQYTJ.js → chunk.C2RQLDNG.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -113,7 +113,7 @@ var SdMenu = class extends SolidElement {
   }
   isMenuItem(item) {
     var _a;
-    return item.tagName.toLowerCase() === "sd-6-13-1-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
+    return item.tagName.toLowerCase() === "sd-6-14-1-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
   }
   /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
   getAllItems() {
@@ -148,13 +148,13 @@ var SdMenu = class extends SolidElement {
 SdMenu.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;display:block;overflow:auto;overscroll-behavior:auto;border-radius:var(--sd-radius-md);padding-inline:var(--sd-spacing-2);padding-block:var(--sd-spacing-3);--tw-shadow:var(--sd-shadow)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}::slotted(sd-6-13-1-divider){padding-block:var(--sd-spacing-3)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`
+:host{position:relative;display:block;overflow:auto;overscroll-behavior:auto;border-radius:var(--sd-radius-md);padding-inline:var(--sd-spacing-2);padding-block:var(--sd-spacing-3);--tw-shadow:var(--sd-shadow)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}::slotted(sd-6-14-1-divider){padding-block:var(--sd-spacing-3)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`
 ];
 __decorateClass([
   query("slot")
 ], SdMenu.prototype, "defaultSlot", 2);
 SdMenu = __decorateClass([
-  customElement("sd-6-13-1-menu")
+  customElement("sd-6-14-1-menu")
 ], SdMenu);
 
 export {

package/dist-versioned/chunks/chunk.C3WIBDGG.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-6-13-1-button";
+      const isButton = this.host.tagName.toLowerCase() === "sd-6-14-1-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-6-13-1-radio-group"
+          (element) => element.tagName.toLowerCase() === "sd-6-14-1-radio-group"
         );
         sdRadioGroups.forEach((radioGroup) => {
           var _a2, _b2;

package/dist-versioned/chunks/{chunk.JMJXCRHX.js → chunk.CJJGSFYP.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -69,7 +69,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-6-13-1-include")
+  customElement("sd-6-14-1-include")
 ], SdInclude);
 
 export {

package/dist-versioned/chunks/{chunk.4QOGDZF7.js → chunk.CYUGTWDW.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -22,7 +22,7 @@ var SdBreadcrumb = class extends SolidElement {
     this.isTruncated = false;
   }
   get items() {
-    return this.querySelectorAll("sd-6-13-1-breadcrumb-item");
+    return this.querySelectorAll("sd-6-14-1-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-6-13-1-icon");
+    const icon = document.createElement("sd-6-14-1-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-6-13-1-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-6-14-1-link")) == null ? void 0 : _c.appendChild(icon);
   }
   handleSlotChange() {
     this.handleMobileChevron();
@@ -87,13 +87,13 @@ 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-6-13-1-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-6-13-1-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-6-14-1-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-6-14-1-dropdown><ol part="list" class="flex items-center"><slot @slotchange="${this.handleSlotChange}"></slot></ol></nav>`;
   }
 };
 SdBreadcrumb.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;display:block}::slotted(sd-6-13-1-breadcrumb-item:not(:last-of-type))::after,sd-6-13-1-dropdown::after{margin-inline:var(--sd-spacing-2);display:none;height:var(--sd-spacing-1);width:var(--sd-spacing-1);border-radius:var(--sd-radius-full);background-color:rgba(var(--sd-breadcrumb__separator-color,rgba(var(--sd-color-neutral-400))));--tw-content:'';content:var(--tw-content)}@media (width >= 64rem){::slotted(sd-6-13-1-breadcrumb-item:not(:last-of-type))::after,sd-6-13-1-dropdown::after{display:inline-block}}::slotted(sd-6-13-1-breadcrumb-item:nth-last-child(2)){display:flex}@media (width >= 64rem){::slotted(sd-6-13-1-breadcrumb-item:nth-last-child(2))::after{background-color:rgba(var(--sd-color-background-accent))}}::slotted(sd-6-13-1-breadcrumb-item),sd-6-13-1-dropdown{display:none;align-items:center;font-size:var(--sd-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (width >= 64rem){::slotted(sd-6-13-1-breadcrumb-item),sd-6-13-1-dropdown{display:flex}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
+:host{position:relative;display:block}::slotted(sd-6-14-1-breadcrumb-item:not(:last-of-type))::after,sd-6-14-1-dropdown::after{margin-inline:var(--sd-spacing-2);display:none;height:var(--sd-spacing-1);width:var(--sd-spacing-1);border-radius:var(--sd-radius-full);background-color:rgba(var(--sd-breadcrumb__separator-color,rgba(var(--sd-color-neutral-400))));--tw-content:'';content:var(--tw-content)}@media (width >= 64rem){::slotted(sd-6-14-1-breadcrumb-item:not(:last-of-type))::after,sd-6-14-1-dropdown::after{display:inline-block}}::slotted(sd-6-14-1-breadcrumb-item:nth-last-child(2)){display:flex}@media (width >= 64rem){::slotted(sd-6-14-1-breadcrumb-item:nth-last-child(2))::after{background-color:rgba(var(--sd-breadcrumb__separator--current-color,rgba(var(--sd-color-accent))))}}::slotted(sd-6-14-1-breadcrumb-item),sd-6-14-1-dropdown{display:none;align-items:center;font-size:var(--sd-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (width >= 64rem){::slotted(sd-6-14-1-breadcrumb-item),sd-6-14-1-dropdown{display:flex}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -117,7 +117,7 @@ __decorateClass([
   state()
 ], SdBreadcrumb.prototype, "isTruncated", 2);
 SdBreadcrumb = __decorateClass([
-  customElement("sd-6-13-1-breadcrumb")
+  customElement("sd-6-14-1-breadcrumb")
 ], SdBreadcrumb);
 
 export {

package/dist-versioned/chunks/{chunk.OJNY7PSR.js → chunk.DGUXEXPL.js}

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

package/dist-versioned/chunks/{chunk.MCPTLXS6.js → chunk.EJTQJNQR.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -53,7 +53,7 @@ var SdNavigationItem = class extends SolidElement {
       }
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = node;
-        return element.tagName.toLowerCase() === "sd-6-13-1-icon";
+        return element.tagName.toLowerCase() === "sd-6-14-1-icon";
       }
       return false;
     });
@@ -126,8 +126,8 @@ var SdNavigationItem = class extends SolidElement {
     const root = html`<${tag} part="base" class="${cx(
       "flex items-center cursor-pointer relative focus-visible:focus-outline group hover:bg-neutral-200 transition-colors duration-fast ease-in-out min-h-[48px] navigable-border-radius",
       { md: "navigable-font-size", lg: "text-lg", sm: "text-[14px]" }[this.size],
-      this.disabled ? "text-neutral-500 pointer-events-none" : "sd-6-13-1-navigation-item-color-text",
-      this.current && "font-bold sd-6-13-1-navigation-item--current-color-text",
+      this.disabled ? "text-neutral-500 pointer-events-none" : "sd-6-14-1-navigation-item-color-text",
+      this.current && "font-bold sd-6-14-1-navigation-item--current-color-text",
       !isAccordion && "w-full",
       this.divider && this.vertical && "mt-0.25",
       !this.vertical && "inline-flex items-center",
@@ -143,19 +143,19 @@ var SdNavigationItem = class extends SolidElement {
       slots["description"] && "pt-3",
       !slots["description"] && !this.separated && horizontalPadding,
       this.calculatePaddingX
-    )}">${this.divider && this.vertical ? html`<sd-6-13-1-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-6-13-1-divider>` : ""} <span id="content" part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline-flex text-start"></slot></span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-6-13-1-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+    )}">${this.divider && this.vertical ? html`<sd-6-14-1-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-6-14-1-divider>` : ""} <span id="content" part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline-flex text-start"></slot></span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-6-14-1-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
       "h-6 w-6 ml-2 transition-all",
       isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-6-13-1-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot id="description" name="description" part="description" class="${cx(
+    )}"></sd-6-14-1-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot id="description" name="description" part="description" class="${cx(
       "inline-block text-sm text-left font-normal text-black pb-3",
       isAccordion || this.separated ? "grow" : "w-full",
       this.calculatePaddingX
     )}"></slot>` : ""}</div></${tag}>`;
     if (this.separated) {
-      return html`<div part="details" id="navigation-item-details" class="relative flex flex-col"><div class="flex items-start">${root} ${slots["children"] && this.vertical ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset -mt-1" @click="${this.handleClickSummary}"><sd-6-13-1-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+      return html`<div part="details" id="navigation-item-details" class="relative flex flex-col"><div class="flex items-start">${root} ${slots["children"] && this.vertical ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset -mt-1" @click="${this.handleClickSummary}"><sd-6-14-1-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
         "m-4 h-6 w-6 transition-all",
         isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-      )}"></sd-6-13-1-icon></button>` : ""}</div>${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
+      )}"></sd-6-14-1-icon></button>` : ""}</div>${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
     }
     if (isAccordion) {
       return html`<details aria-expanded="${this.open}" part="details" id="navigation-item-details" ?open="${this.open}" class="relative">${root}<slot name="children"></slot></details>`;
@@ -169,7 +169,7 @@ var SdNavigationItem = class extends SolidElement {
 SdNavigationItem.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}[part=current-indicator]{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-0);--tw-duration:var(--sd-duration-fast, 150ms);transition-duration:var(--sd-duration-fast,150ms);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,opacity var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out var(--sd-duration-fast)}:host([current]) [part=current-indicator]{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-100);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-duration{syntax:"*";inherits:false}`
+:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}.sd-6-14-1-navigation-item--current-color-text{color:rgb(var(--sd-navigation-item--current-color-text,var(--sd-navigation-item-color-text)))}details summary::-webkit-details-marker{display:none}[part=current-indicator]{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-0);--tw-duration:var(--sd-duration-fast, 150ms);transition-duration:var(--sd-duration-fast,150ms);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,opacity var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out var(--sd-duration-fast)}:host([current]) [part=current-indicator]{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-100);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-duration{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -217,7 +217,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdNavigationItem.prototype, "separated", 2);
 SdNavigationItem = __decorateClass([
-  customElement("sd-6-13-1-navigation-item")
+  customElement("sd-6-14-1-navigation-item")
 ], SdNavigationItem);
 
 export {

package/dist-versioned/chunks/{chunk.KVHDJCMW.js → chunk.ENCWCZFA.js}

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

package/dist-versioned/chunks/{chunk.GAFT5WG4.js → chunk.F3XPCSXO.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -57,13 +57,13 @@ var SdTeaser = class extends SolidElement {
       "teaser-has-headline": this.hasSlotController.test("headline")
     };
     return html`<div class="${cx(
-      "flex",
+      "flex sd-6-14-1-teaser-border-radius",
       {
         white: "bg-white",
-        "white border-neutral-400": "bg-white border sd-6-13-1-teaser--neutral-400-color-border",
-        "neutral-100": "sd-6-13-1-teaser--neutral-100-color-background",
+        "white border-neutral-400": "bg-white border sd-6-14-1-teaser--neutral-400-color-border",
+        "neutral-100": "sd-6-14-1-teaser--neutral-100-color-background",
         primary: "bg-primary text-white",
-        "primary-100": "sd-6-13-1-teaser--primary-100-color-background"
+        "primary-100": "sd-6-14-1-teaser--primary-100-color-background"
       }[this.variant],
       this._orientation === "vertical" && "flex-col",
       this._orientation === "horizontal" && "flex-row gap-8",
@@ -105,7 +105,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-6-13-1-teaser")
+  customElement("sd-6-14-1-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.BRJFEUPN.js → chunk.G3UJC544.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -40,27 +40,27 @@ var SdTeaserMedia = class extends SolidElement {
     };
     return html`<div class="relative flex flex-col group" part="base"><div class="absolute flex flex-col justify-end h-full w-full pb-4"><div class="${cx(
       "flex-1",
-      this.variant === "gradient-light" && "bg-gradient-to-t from-white/[.8] to-60%",
-      this.variant === "gradient-dark" && "bg-gradient-to-t from-primary-800/[.8] to-60%"
+      this.variant === "gradient-light" && "bg-gradient-to-t from-white/60 to-white/0",
+      this.variant === "gradient-dark" && "bg-gradient-to-t from-primary-800/60 to-primary-800/0"
     )}"></div><div class="${cx("relative", ["primary", "gradient-dark"].includes(this.variant) && "text-white")}"><div class="${cx(
       "absolute inset-0 pointer-events-none",
       {
-        white: "bg-white/[.8] group-hover:bg-white/90",
-        "neutral-100": "sd-6-13-1-teaser-media--neutral-100-color-background group-hover:sd-6-13-1-teaser-media--neutral-100--hover-color-background",
+        white: "sd-6-14-1-teaser-media--white-color-background group-hover:sd-6-14-1-teaser-media--white--hover-color-background ",
+        "neutral-100": "sd-6-14-1-teaser-media--neutral-100-color-background group-hover:sd-6-14-1-teaser-media--neutral-100--hover-color-background",
         primary: "bg-primary/[.8] text-white group-hover:bg-primary/90",
-        "primary-100": "sd-6-13-1-teaser-media--primary-100-color-background group-hover:sd-6-13-1-teaser-media--primary-100--hover-color-background",
-        "gradient-light": "bg-gradient-to-t from-white/90 to-white/[.8]",
-        "gradient-dark": "bg-gradient-to-t from-primary-800/90 to-primary-800/[.8]"
+        "primary-100": "sd-6-14-1-teaser-media--primary-100-color-background group-hover:sd-6-14-1-teaser-media--primary-100--hover-color-background",
+        "gradient-light": "bg-gradient-to-t from-white/75 to-white/60",
+        "gradient-dark": "bg-gradient-to-t from-primary-800/75 to-primary-800/60"
       }[this.variant]
     )}"></div><div class="relative flex flex-col text-left p-4" part="content"><div class="flex flex-col"><div part="headline" class="text-lg font-bold m-0 order-2"><slot name="headline">Always insert one semantically correct heading element here</slot></div><div part="meta" class="${cx("gap-2 mb-2 order-1", !slots["teaser-has-meta"] && "hidden")}"><slot name="meta"></slot></div></div><div part="main" class="${cx(!slots["teaser-has-default"] && "hidden")}"><slot></slot></div><div class="${cx(
       "mt-3 transition-opacity duration-300",
       !this.open && "hidden",
       this.open ? "opacity-100" : "opacity-0"
-    )}" part="expandable" aria-hidden="true"><slot name="expandable"></slot></div>${slots["teaser-has-expandable"] ? html`<button part="toggle" class="sd-interactive sd-interactive--reset mt-2" @click="${this.onToggleClick}" aria-expanded="${this.open}" aria-label="${this.open ? "Collapse content" : "Expand content"}"><div class="h-full justify-start flex items-start"><sd-6-13-1-icon class="${cx(
+    )}" part="expandable" aria-hidden="true"><slot name="expandable"></slot></div>${slots["teaser-has-expandable"] ? html`<button part="toggle" class="sd-interactive sd-interactive--reset mt-2" @click="${this.onToggleClick}" aria-expanded="${this.open}" aria-label="${this.open ? "Collapse content" : "Expand content"}"><div class="h-full justify-start flex items-start"><sd-6-14-1-icon class="${cx(
       "w-6 h-6 transition-transform",
       this.open && "rotate-180",
       ["primary", "gradient-dark"].includes(this.variant) ? "text-white" : "text-primary"
-    )}" library="_internal" name="chevron-down"></sd-6-13-1-icon></div></button>` : null}</div></div></div><div class="${cx("mb-4 -z-10", !slots["teaser-has-media"] && "hidden")}" part="media"><slot name="media"></slot></div></div>`;
+    )}" library="_internal" name="chevron-down"></sd-6-14-1-icon></div></button>` : null}</div></div></div><div class="${cx("mb-4 -z-10", !slots["teaser-has-media"] && "hidden")}" part="media"><slot name="media"></slot></div></div>`;
   }
 };
 SdTeaserMedia.styles = [
@@ -81,7 +81,7 @@ __decorateClass([
   query('[part="base"]')
 ], SdTeaserMedia.prototype, "teaserMedia", 2);
 SdTeaserMedia = __decorateClass([
-  customElement("sd-6-13-1-teaser-media")
+  customElement("sd-6-14-1-teaser-media")
 ], SdTeaserMedia);
 
 export {

package/dist-versioned/chunks/{chunk.J33HOWV3.js → chunk.GCKEV5H2.js}

@@ -21,7 +21,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.HKLHB7GS.js";
 import {
   animateTo,
   stopAnimations
@@ -97,7 +97,7 @@ var SdDropdown = class extends SolidElement {
    * within the slotted trigger. This could be the slotted element itself, a child of the slotted element,
    * or an element within the slotted elements shadow root.
    *
-   * e.g. the accessible trigger of an <sd-6-13-1-button> is a <button> located inside its shadow root.
+   * e.g. the accessible trigger of an <sd-6-14-1-button> is a <button> located inside its shadow root.
    *
    * To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
    * */
@@ -108,11 +108,11 @@ var SdDropdown = class extends SolidElement {
     if (accessibleTrigger) {
       switch (accessibleTrigger.tagName.toLowerCase()) {
         // Solid buttons have to update the internal button so it's announced correctly by screen readers
-        case "sd-6-13-1-button":
-        case "sd-6-13-1-icon-button":
+        case "sd-6-14-1-button":
+        case "sd-6-14-1-icon-button":
           target = accessibleTrigger.button;
           break;
-        case "sd-6-13-1-navigation-item":
+        case "sd-6-14-1-navigation-item":
           target = accessibleTrigger.button;
           break;
         default:
@@ -136,7 +136,7 @@ var SdDropdown = class extends SolidElement {
     }
   }
   getMenu() {
-    return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sd-6-13-1-menu");
+    return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sd-6-14-1-menu");
   }
   handleKeyDown(event) {
     if (this.open && event.key === "Escape") {
@@ -148,7 +148,7 @@ var SdDropdown = class extends SolidElement {
   handleDocumentKeyDown(event) {
     var _a;
     if (event.key === "Tab") {
-      if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sd-6-13-1-menu-item") {
+      if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sd-6-14-1-menu-item") {
         event.preventDefault();
         this.hide();
         this.focusOnTrigger();
@@ -174,7 +174,7 @@ var SdDropdown = class extends SolidElement {
   }
   handlePanelSelect(event) {
     const target = event.target;
-    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sd-6-13-1-menu") {
+    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sd-6-14-1-menu") {
       this.hide();
       this.focusOnTrigger();
     }
@@ -263,7 +263,7 @@ var SdDropdown = class extends SolidElement {
   }
   addOpenListeners() {
     this.panel.addEventListener("sd-activate", this.handleMenuItemActivate);
-    this.panel.addEventListener("sd-6-13-1-select", this.handlePanelSelect);
+    this.panel.addEventListener("sd-6-14-1-select", this.handlePanelSelect);
     this.panel.addEventListener("keydown", this.handleKeyDown);
     document.addEventListener("keydown", this.handleDocumentKeyDown);
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
@@ -271,7 +271,7 @@ var SdDropdown = class extends SolidElement {
   removeOpenListeners() {
     if (this.panel) {
       this.panel.removeEventListener("sd-activate", this.handleMenuItemActivate);
-      this.panel.removeEventListener("sd-6-13-1-select", this.handlePanelSelect);
+      this.panel.removeEventListener("sd-6-14-1-select", this.handlePanelSelect);
       this.panel.removeEventListener("keydown", this.handleKeyDown);
     }
     document.removeEventListener("keydown", this.handleDocumentKeyDown);
@@ -304,13 +304,13 @@ var SdDropdown = class extends SolidElement {
     }
   }
   render() {
-    return html`<sd-6-13-1-popup part="base" id="dropdown" exportparts="
+    return html`<sd-6-14-1-popup part="base" id="dropdown" exportparts="
           popup:base__popup,
         " placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
-      "panel-color-border border shadow bg-white block",
+      "panel-color-border border shadow sd-6-14-1-dropdown-color-background block",
       this.open ? "pointer-events-auto" : "pointer-events-none",
       this.rounded && "rounded-md"
-    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-6-13-1-popup>`;
+    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-6-14-1-popup>`;
   }
 };
 SdDropdown.styles = [
@@ -364,7 +364,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDropdown.prototype, "handleOpenChange", 1);
 SdDropdown = __decorateClass([
-  customElement("sd-6-13-1-dropdown")
+  customElement("sd-6-14-1-dropdown")
 ], SdDropdown);
 setDefaultAnimation("dropdown.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],