@solid-design-system/components 4.6.7 → 4.6.8

package/dist/chunks/{chunk.EATARJOL.js → chunk.LGYGD6SX.js}

@@ -26,6 +26,7 @@ var SdTab = class extends SolidElement {
     this.variant = "default";
     this.active = false;
     this.disabled = false;
+    this.visuallyDisabled = false;
     this.panel = "";
   }
   connectedCallback() {
@@ -36,7 +37,8 @@ var SdTab = class extends SolidElement {
     this.setAttribute("aria-selected", this.active ? "true" : "false");
   }
   handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    const isDisabled = this.disabled || this.visuallyDisabled;
+    this.setAttribute("aria-disabled", isDisabled ? "true" : "false");
   }
   /** Sets focus to the tab. */
   focus(options) {
@@ -52,17 +54,23 @@ var SdTab = class extends SolidElement {
       left: this.hasSlotController.test("left")
     };
     return html`<div part="base" class="${cx(
-      "inline-flex min-w-max h-12 px-3 leading-none items-center justify-center whitespace-nowrap select-none cursor-pointer group relative focus-visible:focus-outline outline-2 !-outline-offset-2",
+      "inline-flex justify-center min-w-max items-center h-12 px-3 leading-none select-none cursor-pointer group relative focus-visible:focus-outline outline-2 !-outline-offset-2",
       this.variant === "container" && " rounded-[4px_4px_0_0]",
       this.variant === "container" && this.active && "tab--active-container-border bg-white",
-      this.disabled ? "opacity-50 !cursor-not-allowed" : "hover:bg-neutral-200"
-    )}" tabindex="${!this.active || this.disabled ? "-1" : "0"}"><slot name="left" class="${cx(slots.left && "block pr-2", this.disabled ? "text-neutral-500" : "text-primary")}"></slot><slot class="${cx(this.disabled ? "text-neutral-500" : "text-primary")}"></slot><div part="active-tab-indicator" class="${cx(
+      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:bg-neutral-200"
+    )}" tabindex="${!this.active || this.disabled ? "-1" : "0"}"><div class="${cx(
+      "flex h-full items-center justify-center whitespace-nowrap",
+      this.disabled || this.visuallyDisabled && "opacity-50 "
+    )}"><slot name="left" class="${cx(
+      slots.left && "block pr-2",
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary"
+    )}"></slot><slot class="${cx(this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary")}"></slot><div part="active-tab-indicator" class="${cx(
       (!this.active || this.disabled) && "hidden",
       "absolute bottom-0 h-1 bg-accent",
       this.variant === "default" ? "w-full" : "w-3/4 group-hover:w-full transition-all duration-200 ease-in-out"
     )}"></div><div part="hover-bottom-border" class="${cx(
       !this.active && !this.disabled && "absolute w-full h-0.25 bottom-0 border-b border-neutral-400 invisible group-hover:visible"
-    )}"></div></div>`;
+    )}"></div></div></div>`;
   }
 };
 SdTab.styles = [
@@ -81,6 +89,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdTab.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
+], SdTab.prototype, "visuallyDisabled", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], SdTab.prototype, "panel", 2);
@@ -88,7 +99,7 @@ __decorateClass([
   watch("active")
 ], SdTab.prototype, "handleActiveChange", 1);
 __decorateClass([
-  watch("disabled")
+  watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
   customElement("sd-tab")

package/dist/chunks/{chunk.YELMYFWG.js → chunk.PMZLGJKG.js}

@@ -70,8 +70,8 @@ var SdTabGroup = class extends SolidElement {
   }
   getAllTabs(options = { includeDisabled: true }) {
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
-    return [...slot.assignedElements()].filter((el) => {
-      return options.includeDisabled ? el.tagName.toLowerCase() === "sd-tab" : el.tagName.toLowerCase() === "sd-tab" && !el.disabled;
+    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-tab" ? el : el.querySelector("sd-tab")).filter((el) => {
+      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-tab" : el.tagName.toLowerCase() === "sd-tab" && !el.disabled;
     });
   }
   getAllPanels() {
@@ -163,7 +163,7 @@ var SdTabGroup = class extends SolidElement {
       emitEvents: true,
       scrollBehavior: "auto"
     }, options);
-    if (tab !== this.activeTab && !tab.disabled) {
+    if (tab !== this.activeTab && !tab.disabled && !tab.visuallyDisabled) {
       const previousTab = this.activeTab;
       this.activeTab = tab;
       this.tabs.map((el) => el.active = el === this.activeTab);

package/dist/components/tab/tab.d.ts

@@ -7,6 +7,7 @@ export default class SdTab extends SolidElement {
     variant: 'default' | 'container';
     active: boolean;
     disabled: boolean;
+    visuallyDisabled: boolean;
     panel: string;
     connectedCallback(): void;
     handleActiveChange(): void;

package/dist/components/tab/tab.js

@@ -1,6 +1,6 @@
 import {
   SdTab
-} from "../../chunks/chunk.EATARJOL.js";
+} from "../../chunks/chunk.LGYGD6SX.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.TXYWAHFM.js";

package/dist/components/tab-group/tab-group.js

@@ -1,6 +1,6 @@
 import {
   SdTabGroup
-} from "../../chunks/chunk.YELMYFWG.js";
+} from "../../chunks/chunk.PMZLGJKG.js";
 import "../../chunks/chunk.WDWV53JP.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.G4WRYNRZ.js";

package/dist/custom-elements.json

@@ -14472,6 +14472,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "visuallyDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Styles the tab as if it was disabled and enables aria-disabled",
+              "attribute": "visually-disabled",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "panel",
@@ -14581,6 +14592,15 @@
               "description": "Disables the tab and prevents selection.",
               "fieldName": "disabled"
             },
+            {
+              "name": "visually-disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Styles the tab as if it was disabled and enables aria-disabled",
+              "fieldName": "visuallyDisabled"
+            },
             {
               "name": "panel",
               "type": {
@@ -17139,7 +17159,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.6.7",
+    "version": "4.6.8",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -37,10 +37,10 @@ import {
 } from "./chunks/chunk.OJPVJA2S.js";
 import {
   SdTab
-} from "./chunks/chunk.EATARJOL.js";
+} from "./chunks/chunk.LGYGD6SX.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.YELMYFWG.js";
+} from "./chunks/chunk.PMZLGJKG.js";
 import {
   SdNotification
 } from "./chunks/chunk.6WU4LF5Z.js";

package/dist/vscode.html-custom-data.json

@@ -2474,6 +2474,11 @@
           "description": "Disables the tab and prevents selection.",
           "values": []
         },
+        {
+          "name": "visually-disabled",
+          "description": "Styles the tab as if it was disabled and enables aria-disabled",
+          "values": []
+        },
         {
           "name": "panel",
           "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "4.6.7",
+  "version": "4.6.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -5694,6 +5694,11 @@
               "description": "Disables the tab and prevents selection.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the tab as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "panel",
               "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
@@ -5735,6 +5740,11 @@
                 "description": "Disables the tab and prevents selection.",
                 "type": "boolean"
               },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the tab as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
               {
                 "name": "panel",
                 "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",

package/dist-versioned/_components/menu/menu.js

@@ -32,7 +32,7 @@ let SdMenu = class SdMenu extends SolidElement {
         if (item.type === 'checkbox') {
             item.checked = !item.checked;
         }
-        this.emit('sd-4-6-7-select', { detail: { item } });
+        this.emit('sd-4-6-8-select', { detail: { item } });
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {

package/dist-versioned/_components/menu/menu.styles.js

@@ -11,7 +11,7 @@ export default css `
     overscroll-behavior: none;
   }
 
-  ::slotted(sd-4-6-7-divider) {
+  ::slotted(sd-4-6-8-divider) {
     --spacing: var(--sd-spacing-x-small);
   }
 `;

package/dist-versioned/_components/menu-item/menu-item.js

@@ -74,7 +74,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <sd-4-6-7-icon name="check" library="system" aria-hidden="true"></sd-4-6-7-icon>
+          <sd-4-6-8-icon name="check" library="system" aria-hidden="true"></sd-4-6-8-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -84,7 +84,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span class="menu-item__chevron">
-          <sd-4-6-7-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-6-7-icon>
+          <sd-4-6-8-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-6-8-icon>
         </span>
       </div>
     `;

package/dist-versioned/chunks/chunk.3ORZT34X.js

@@ -98,7 +98,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-4-6-7-teaser")
+  customElement("sd-4-6-8-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/chunk.3PS24RCT.js

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

package/dist-versioned/chunks/chunk.6DKXZWRN.js

@@ -10,7 +10,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
     var _a, _b;
     const ul = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("ul");
     ul == null ? void 0 : ul.setAttribute("part", "listbox");
-    const popup = document.createElement("sd-4-6-7-popup");
+    const popup = document.createElement("sd-4-6-8-popup");
     popup.appendChild(ul);
     (_b = sdInput.shadowRoot) == null ? void 0 : _b.appendChild(popup);
     popup == null ? void 0 : popup.setAttribute("exportparts", "popup__content");
@@ -22,7 +22,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
       popup.anchor = sdInput;
       popup.sync = "width";
     }
-    const styles = css`sd-4-6-7-popup::part(popup){border-bottom-left-radius:var(--sd-border-radius-default,.25rem);border-bottom-right-radius:var(--sd-border-radius-default,.25rem);border-width:0 2px 2px;overflow-y:scroll;z-index:var(--sd-z-index-dropdown,900);--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);--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-4-6-7-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-4-6-7-popup li:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--tw-bg-opacity,1))}sd-4-6-7-popup li{list-style-type:""}sd-4-6-7-popup li mark{background-color:transparent;font-weight:700}sd-4-6-7-popup li:not(:has(sd-4-6-7-option)){cursor:pointer;font-size:var(--sd-font-size-base,1rem);padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-4,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity,1))}sd-4-6-7-popup li:not(:has(sd-4-6-7-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-4-6-7-popup li[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}`;
+    const styles = css`sd-4-6-8-popup::part(popup){border-bottom-left-radius:var(--sd-border-radius-default,.25rem);border-bottom-right-radius:var(--sd-border-radius-default,.25rem);border-width:0 2px 2px;overflow-y:scroll;z-index:var(--sd-z-index-dropdown,900);--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);--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-4-6-8-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-4-6-8-popup li:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--tw-bg-opacity,1))}sd-4-6-8-popup li{list-style-type:""}sd-4-6-8-popup li mark{background-color:transparent;font-weight:700}sd-4-6-8-popup li:not(:has(sd-4-6-8-option)){cursor:pointer;font-size:var(--sd-font-size-base,1rem);padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-4,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity,1))}sd-4-6-8-popup li:not(:has(sd-4-6-8-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-4-6-8-popup li[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}`;
     const styleSheet = new CSSStyleSheet();
     styleSheet.replaceSync(styles);
     sdInput.shadowRoot.adoptedStyleSheets = [...sdInput.shadowRoot.adoptedStyleSheets, styleSheet];
@@ -35,13 +35,13 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
   }
   input.addEventListener("open", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-6-7-popup")) == null ? void 0 : _b.setAttribute("active", "true");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-6-8-popup")) == null ? void 0 : _b.setAttribute("active", "true");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.add("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.add("z-50");
   });
   input.addEventListener("close", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-6-7-popup")) == null ? void 0 : _b.removeAttribute("active");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-6-8-popup")) == null ? void 0 : _b.removeAttribute("active");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.remove("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.remove("z-50");
   });

package/dist-versioned/chunks/chunk.6VCNAVH4.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-4-6-7-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-4-6-8-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -144,7 +144,7 @@ var SdCheckbox = class extends SolidElement {
         filled: "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550",
         default: "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
-    )}">${this.checked ? html`<sd-4-6-7-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-6-7-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-4-6-7-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-4-6-7-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}">${this.checked ? html`<sd-4-6-8-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-6-8-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-4-6-8-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-4-6-8-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()}`;
@@ -206,7 +206,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-4-6-7-checkbox")
+  customElement("sd-4-6-8-checkbox")
 ], SdCheckbox);
 
 export {

package/dist-versioned/chunks/chunk.6WU4LF5Z.js

@@ -182,7 +182,7 @@ var SdNotification = class extends SolidElement {
         () => {
           toastStack.removeChild(this);
           resolve();
-          if (toastStack.querySelector("sd-4-6-7-notification") === null) {
+          if (toastStack.querySelector("sd-4-6-8-notification") === null) {
             toastStack.remove();
           }
         },
@@ -199,15 +199,15 @@ var SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-4-6-7-icon name="${{
+    )}"><sd-4-6-8-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-7-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-4-6-8-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-7-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-4-6-7-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-6-7-icon></sd-4-6-7-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-8-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-4-6-8-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-6-8-icon></sd-4-6-8-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 +248,7 @@ __decorateClass([
   watch("duration")
 ], SdNotification.prototype, "handleDurationChange", 1);
 SdNotification = __decorateClass([
-  customElement("sd-4-6-7-notification")
+  customElement("sd-4-6-8-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

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

@@ -137,7 +137,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-4-6-7-brandshape")
+  customElement("sd-4-6-8-brandshape")
 ], SdBrandshape);
 
 export {

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

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

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

@@ -323,7 +323,7 @@ __decorateClass([
   property({ attribute: "auto-size-padding", type: Number })
 ], SdPopup.prototype, "autoSizePadding", 2);
 SdPopup = __decorateClass([
-  customElement("sd-4-6-7-popup")
+  customElement("sd-4-6-8-popup")
 ], SdPopup);
 
 export {

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

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

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

@@ -71,7 +71,7 @@ var SdTag = class extends SolidElement {
         lg: "text-base",
         sm: "text-[12px]"
       }[this.size]
-    )}"><sd-4-6-7-icon library="system" name="close" label="remove"></sd-4-6-7-icon></slot>` : ""}</${tag}>`;
+    )}"><sd-4-6-8-icon library="system" name="close" label="remove"></sd-4-6-8-icon></slot>` : ""}</${tag}>`;
   }
 };
 SdTag.styles = [
@@ -106,7 +106,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdTag.prototype, "download", 2);
 SdTag = __decorateClass([
-  customElement("sd-4-6-7-tag")
+  customElement("sd-4-6-8-tag")
 ], SdTag);
 
 export {

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

@@ -32,7 +32,7 @@ var SdDivider = class extends SolidElement {
  */
 SdDivider.styles = [
   ...SolidElement.styles,
-  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-6-7-divider[orientation=horizontal]){display:block}:host(sd-4-6-7-divider[orientation=vertical]){display:inline-block}`
+  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-6-8-divider[orientation=horizontal]){display:block}:host(sd-4-6-8-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -41,7 +41,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDivider.prototype, "inverted", 2);
 SdDivider = __decorateClass([
-  customElement("sd-4-6-7-divider")
+  customElement("sd-4-6-8-divider")
 ], SdDivider);
 
 export {

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