@solid-design-system/components 7.0.0-next.4 → 7.0.0-next.6

package/dist-versioned/chunks/{chunk.SYN6Y7B2.js → chunk.4KUVWN2I.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.ZZYKQTZB.js";
+} from "./chunk.7WPBGXB4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -54,7 +54,7 @@ var SdHeader = class extends SolidElement {
     }
   }
   render() {
-    return html`<header class="w-full sd-7-0-0-next-4-header-color-background sd-7-0-0-next-4-header-padding-bottom relative" role="banner"><div part="main" class="relative mx-auto my-0 box-border"><slot></slot></div></header>`;
+    return html`<header class="w-full sd-7-0-0-next-6-header-color-background sd-7-0-0-next-6-header-padding-bottom relative" role="banner"><div part="main" class="relative mx-auto my-0 box-border"><slot></slot></div></header>`;
   }
 };
 SdHeader.styles = [
@@ -72,7 +72,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "updateCalculatedHeight", 1);
 SdHeader = __decorateClass([
-  customElement("sd-7-0-0-next-4-header")
+  customElement("sd-7-0-0-next-6-header")
 ], SdHeader);
 
 export {

package/dist-versioned/chunks/{chunk.VUBZTPBJ.js → chunk.6ETKGDC3.js}

@@ -1,10 +1,6 @@
-import {
-  getDeepActiveElement,
-  getTabbableBoundary
-} from "./chunk.UMIKFOMI.js";
 import {
   scrollIntoView
-} from "./chunk.WDWV53JP.js";
+} from "./chunk.LTZVVIB2.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -21,7 +17,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.ZZYKQTZB.js";
+} from "./chunk.7WPBGXB4.js";
 import {
   animateTo,
   stopAnimations
@@ -51,6 +47,67 @@ function deepClosestElement(element, selector) {
   return null;
 }
 
+// src/internal/deep-active-element.ts
+function getDeepActiveElement(element = document.activeElement) {
+  if (element == null ? void 0 : element.shadowRoot) {
+    const shadowActiveElement = element.shadowRoot.activeElement;
+    if (shadowActiveElement) {
+      return getDeepActiveElement(shadowActiveElement);
+    }
+  }
+  return element;
+}
+
+// src/internal/tabbable.ts
+function isTabbable(el) {
+  const tag = el.tagName.toLowerCase();
+  if (el.getAttribute("tabindex") === "-1") {
+    return false;
+  }
+  if (el.hasAttribute("disabled")) {
+    return false;
+  }
+  if (el.hasAttribute("aria-disabled") && el.getAttribute("aria-disabled") !== "false") {
+    return false;
+  }
+  if (tag === "input" && el.getAttribute("type") === "radio" && !el.hasAttribute("checked")) {
+    return false;
+  }
+  if (el.offsetParent === null && !(el.getRootNode() instanceof ShadowRoot)) {
+    return false;
+  }
+  if (window.getComputedStyle(el).visibility === "hidden") {
+    return false;
+  }
+  if ((tag === "audio" || tag === "video") && el.hasAttribute("controls")) {
+    return true;
+  }
+  if (el.hasAttribute("tabindex")) {
+    return true;
+  }
+  if (el.hasAttribute("contenteditable") && el.getAttribute("contenteditable") !== "false") {
+    return true;
+  }
+  return ["button", "input", "select", "textarea", "a", "audio", "video", "summary"].includes(tag);
+}
+function getTabbableBoundary(root) {
+  var _a, _b;
+  const allElements = [];
+  function walk(el) {
+    if (el instanceof HTMLElement) {
+      allElements.push(el);
+      if (el.shadowRoot !== null && el.shadowRoot.mode === "open") {
+        walk(el.shadowRoot);
+      }
+    }
+    [...el.children].forEach((e) => walk(e));
+  }
+  walk(root);
+  const start = (_a = allElements.find((el) => isTabbable(el))) != null ? _a : null;
+  const end = (_b = allElements.reverse().find((el) => isTabbable(el))) != null ? _b : null;
+  return { start, end };
+}
+
 // src/components/dropdown/dropdown.ts
 import { property, query } from "lit/decorators.js";
 import cx from "classix";
@@ -97,7 +154,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-7-0-0-next-4-button> is a <button> located inside its shadow root.
+   * e.g. the accessible trigger of an <sd-7-0-0-next-6-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 +165,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-7-0-0-next-4-button":
-        case "sd-7-0-0-next-4-icon-button":
+        case "sd-7-0-0-next-6-button":
+        case "sd-7-0-0-next-6-icon-button":
           target = accessibleTrigger.button;
           break;
-        case "sd-7-0-0-next-4-navigation-item":
+        case "sd-7-0-0-next-6-navigation-item":
           target = accessibleTrigger.button;
           break;
         default:
@@ -136,7 +193,7 @@ var SdDropdown = class extends SolidElement {
     }
   }
   getMenu() {
-    return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sd-7-0-0-next-4-menu");
+    return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sd-7-0-0-next-6-menu");
   }
   handleKeyDown(event) {
     if (this.open && event.key === "Escape") {
@@ -148,7 +205,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-7-0-0-next-4-menu-item") {
+      if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sd-7-0-0-next-6-menu-item") {
         event.preventDefault();
         this.hide();
         this.focusOnTrigger();
@@ -174,7 +231,7 @@ var SdDropdown = class extends SolidElement {
   }
   handlePanelSelect(event) {
     const target = event.target;
-    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sd-7-0-0-next-4-menu") {
+    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sd-7-0-0-next-6-menu") {
       this.hide();
       this.focusOnTrigger();
     }
@@ -263,7 +320,7 @@ var SdDropdown = class extends SolidElement {
   }
   addOpenListeners() {
     this.panel.addEventListener("sd-activate", this.handleMenuItemActivate);
-    this.panel.addEventListener("sd-7-0-0-next-4-select", this.handlePanelSelect);
+    this.panel.addEventListener("sd-7-0-0-next-6-select", this.handlePanelSelect);
     this.panel.addEventListener("keydown", this.handleKeyDown);
     document.addEventListener("keydown", this.handleDocumentKeyDown);
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
@@ -271,7 +328,7 @@ var SdDropdown = class extends SolidElement {
   removeOpenListeners() {
     if (this.panel) {
       this.panel.removeEventListener("sd-activate", this.handleMenuItemActivate);
-      this.panel.removeEventListener("sd-7-0-0-next-4-select", this.handlePanelSelect);
+      this.panel.removeEventListener("sd-7-0-0-next-6-select", this.handlePanelSelect);
       this.panel.removeEventListener("keydown", this.handleKeyDown);
     }
     document.removeEventListener("keydown", this.handleDocumentKeyDown);
@@ -304,13 +361,13 @@ var SdDropdown = class extends SolidElement {
     }
   }
   render() {
-    return html`<sd-7-0-0-next-4-popup part="base" id="dropdown" exportparts="
+    return html`<sd-7-0-0-next-6-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 sd-7-0-0-next-4-dropdown-color-background block",
+      "panel-color-border border shadow sd-7-0-0-next-6-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-7-0-0-next-4-popup>`;
+    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-7-0-0-next-6-popup>`;
   }
 };
 SdDropdown.styles = [
@@ -364,7 +421,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDropdown.prototype, "handleOpenChange", 1);
 SdDropdown = __decorateClass([
-  customElement("sd-7-0-0-next-4-dropdown")
+  customElement("sd-7-0-0-next-6-dropdown")
 ], SdDropdown);
 setDefaultAnimation("dropdown.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],

package/dist-versioned/chunks/{chunk.2MPKSDFV.js → chunk.6O4N7F3K.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.ZZYKQTZB.js";
+} from "./chunk.7WPBGXB4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -228,7 +228,7 @@ var SdTextarea = class extends SolidElement {
       textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "text-black",
       ["invalid", "activeInvalid"].includes(textareaState) && "form-control--invalid-color-background"
     )}"><textarea part="textarea" id="input" class="${cx(
-      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-7-0-0-next-4-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-7-0-0-next-6-icon]:pe-8",
       {
         sm: isFloatingLabelActive ? "pb-1" : "py-2",
         md: isFloatingLabelActive ? "pb-1" : "py-2",
@@ -236,7 +236,7 @@ var SdTextarea = class extends SolidElement {
       }[this.size],
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect === void 0 ? void 0 : this.autocorrect ? "on" : "off")}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-7-0-0-next-4-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-7-0-0-next-4-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-0-0-next-4-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-4-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect === void 0 ? void 0 : this.autocorrect ? "on" : "off")}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-7-0-0-next-6-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-7-0-0-next-6-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-0-0-next-6-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-6-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
       "text-sm mt-1",
       hasHelpText && !this.showInvalidStyle ? "block" : "hidden",
       this.visuallyDisabled || this.disabled ? "text-neutral-500" : "text-neutral-700"
@@ -369,7 +369,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdTextarea.prototype, "handleSizeChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-7-0-0-next-4-textarea")
+  customElement("sd-7-0-0-next-6-textarea")
 ], SdTextarea);
 
 export {

package/dist-versioned/chunks/{chunk.PHDXES2E.js → chunk.6UABH73N.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.UIQBHPD3.js";
 import {
   scrollIntoView
-} from "./chunk.WDWV53JP.js";
+} from "./chunk.LTZVVIB2.js";
 import {
   FormControlController
 } from "./chunk.C3WIBDGG.js";
@@ -35,7 +35,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.ZZYKQTZB.js";
+} from "./chunk.7WPBGXB4.js";
 import {
   animateTo,
   stopAnimations
@@ -98,11 +98,11 @@ var SdCombobox = class extends SolidElement {
       return normalizedOption.includes(normalizedQuery) || normalizedOptionLabel.includes(normalizedQuery);
     };
     this.getTag = (option) => {
-      return html`<sd-7-0-0-next-4-tag class="min-w-0 max-w-full" ?disabled="${this.disabled}" part="tag" exportparts="
+      return html`<sd-7-0-0-next-6-tag class="min-w-0 max-w-full" ?disabled="${this.disabled}" part="tag" exportparts="
               base:tag__base,
               content:tag__content,
               removable-indicator:tag__removable-indicator,
-            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-7-0-0-next-4-tag>`;
+            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-7-0-0-next-6-tag>`;
     };
     this.handleDocumentFocusIn = (event) => {
       const path = event.composedPath();
@@ -241,9 +241,9 @@ var SdCombobox = class extends SolidElement {
       return html`${typeof optionHtml === "string" ? unsafeHTML(optionHtml) : optionHtml}`;
     };
     return this.filteredOptions.map((item) => {
-      if (item.tagName.toLowerCase() === "sd-7-0-0-next-4-optgroup") {
+      if (item.tagName.toLowerCase() === "sd-7-0-0-next-6-optgroup") {
         Array.from(item.children).forEach((option) => {
-          if (option.tagName.toLowerCase() === "sd-7-0-0-next-4-option") {
+          if (option.tagName.toLowerCase() === "sd-7-0-0-next-6-option") {
             renderOption(option);
           }
         });
@@ -263,11 +263,11 @@ var SdCombobox = class extends SolidElement {
       });
     } else {
       return [
-        html`<sd-7-0-0-next-4-tag class="min-w-0 max-w-full" ?disabled="${this.disabled}" part="tag" exportparts="
+        html`<sd-7-0-0-next-6-tag class="min-w-0 max-w-full" ?disabled="${this.disabled}" part="tag" exportparts="
               base:tag__base,
               content:tag__content,
               removable-indicator:tag__removable-indicator,
-            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.localize.term("tagsSelected")}</sd-7-0-0-next-4-tag>`
+            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.localize.term("tagsSelected")}</sd-7-0-0-next-6-tag>`
       ];
     }
   }
@@ -403,7 +403,7 @@ var SdCombobox = class extends SolidElement {
   }
   handleOptionClick(event) {
     const target = event.target;
-    const option = target.closest("sd-7-0-0-next-4-option");
+    const option = target.closest("sd-7-0-0-next-6-option");
     const oldValue = this.value;
     if (option && !option.disabled) {
       if (this.multiple) {
@@ -455,7 +455,7 @@ var SdCombobox = class extends SolidElement {
     scrollIntoView(this.getCurrentOption(), this.listbox, "vertical", "auto");
   }
   getAllFilteredOptions() {
-    return [...this.filteredWrapper.querySelectorAll("sd-7-0-0-next-4-option")];
+    return [...this.filteredWrapper.querySelectorAll("sd-7-0-0-next-6-option")];
   }
   getCurrentOption() {
     return this.getAllFilteredOptions().find((option) => option.current);
@@ -585,7 +585,7 @@ var SdCombobox = class extends SolidElement {
       clonedOption.selected = option.selected;
       clonedOption.checkbox = option.checkbox;
       clonedOption.size = option.size;
-      const hasOptgroup = ((_b = option.parentElement) == null ? void 0 : _b.tagName.toLowerCase()) === "sd-7-0-0-next-4-optgroup";
+      const hasOptgroup = ((_b = option.parentElement) == null ? void 0 : _b.tagName.toLowerCase()) === "sd-7-0-0-next-6-optgroup";
       if (!hasOptgroup) {
         return clonedOption;
       }
@@ -609,7 +609,7 @@ var SdCombobox = class extends SolidElement {
     this.formControlController.emitInvalidEvent(event);
     this.invalidMessage.textContent = event.target.validationMessage;
   }
-  /** Receives incoming event detail from sd-7-0-0-next-4-popup and updates local state for conditional styling. */
+  /** Receives incoming event detail from sd-7-0-0-next-6-popup and updates local state for conditional styling. */
   handleCurrentPlacement(e) {
     const incomingPlacement = e.detail;
     if (incomingPlacement) {
@@ -621,7 +621,7 @@ var SdCombobox = class extends SolidElement {
   }
   handleUseTagsChange() {
     const allOptions = this.getAllFilteredOptions();
-    if (customElements.get("sd-7-0-0-next-4-option")) {
+    if (customElements.get("sd-7-0-0-next-6-option")) {
       allOptions.forEach((option) => {
         option.checkbox = this.multiple;
       });
@@ -750,8 +750,8 @@ var SdCombobox = class extends SolidElement {
     return filterOnlyOptgroups(getAssignedElementsForSlot(this.defaultSlot));
   }
   async handleDefaultSlotChange() {
-    if (!customElements.get("sd-7-0-0-next-4-option")) {
-      customElements.whenDefined("sd-7-0-0-next-4-option").then(() => this.handleDefaultSlotChange());
+    if (!customElements.get("sd-7-0-0-next-6-option")) {
+      customElements.whenDefined("sd-7-0-0-next-6-option").then(() => this.handleDefaultSlotChange());
       return;
     }
     const slottedOptions = this.getSlottedOptions();
@@ -763,10 +763,10 @@ var SdCombobox = class extends SolidElement {
       if (this.multiple) {
         option.checkbox = true;
       }
-      option.id = option.id || `sd-7-0-0-next-4-combobox-option-${index}`;
+      option.id = option.id || `sd-7-0-0-next-6-combobox-option-${index}`;
     });
     slottedOptgroups.forEach((optgroup, index) => {
-      optgroup.id = optgroup.id || `sd-7-0-0-next-4-combobox-optgroup-${index}`;
+      optgroup.id = optgroup.id || `sd-7-0-0-next-6-combobox-optgroup-${index}`;
     });
     await this.syncSelectedOptionsAndValue();
     if (this.multiple) {
@@ -831,7 +831,7 @@ var SdCombobox = class extends SolidElement {
         default: "form-control-color-border"
       }[selectState],
       this.open && (this.currentPlacement === "bottom" ? "rounded-bl-none rounded-br-none" : "rounded-tl-none rounded-tr-none")
-    )}"></div><sd-7-0-0-next-4-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
+    )}"></div><sd-7-0-0-next-6-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
       "inline-flex relative w-full",
       this.currentPlacement === "bottom" ? "origin-top" : "origin-bottom"
     )}" placement="${this.placement}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift sync="width" auto-size="vertical" auto-size-padding="10" exportparts="
@@ -860,18 +860,18 @@ var SdCombobox = class extends SolidElement {
       "flex justify-center",
       iconMarginLeft,
       this.value.length > 0 ? "visible" : "invisible"
-    )}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.preventLoosingFocus}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-7-0-0-next-4-icon class="${cx("text-neutral-700", iconSize)}" name="closing-round" library="_internal"></sd-7-0-0-next-4-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-7-0-0-next-4-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="_internal" name="risk"></sd-7-0-0-next-4-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-0-0-next-4-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle"></sd-7-0-0-next-4-icon>` : ""}<slot name="right" part="right" class="${cx(
+    )}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.preventLoosingFocus}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-7-0-0-next-6-icon class="${cx("text-neutral-700", iconSize)}" name="closing-round" library="_internal"></sd-7-0-0-next-6-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-7-0-0-next-6-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="_internal" name="risk"></sd-7-0-0-next-6-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-0-0-next-6-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle"></sd-7-0-0-next-6-icon>` : ""}<slot name="right" part="right" class="${cx(
       "inline-flex ml-2 leading-[0]",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "form-control-color-icon-fill",
       iconSize
-    )}">${this.type !== "search" ? html`<sd-7-0-0-next-4-icon class="${cx(
+    )}">${this.type !== "search" ? html`<sd-7-0-0-next-6-icon class="${cx(
       "transition-transform duration-medium ease-in-out",
       this.open ? "rotate-180" : "rotate-0"
-    )}" name="chevron-down" part="chevron" library="_internal" color="currentColor" label="${this.localize.term("open")}"></sd-7-0-0-next-4-icon>` : ""}</slot>${this.type === "search" ? html`<button class="${cx("flex items-center", iconMarginLeft)}" type="button" @mousedown="${this.preventLoosingFocus}" @click="${this.handleSearchClick}"><sd-7-0-0-next-4-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-7-0-0-next-4-icon></button>` : html`<button class="combobox-button absolute top-2" tabindex="-1" aria-hidden="true" @keydown="${this.handleComboboxMouseDown}" type="button"><span class="sr-only">${this.localize.term("open")}</span></button>`}</div><div id="listbox" role="${ifDefined(!this.multiple ? "listbox" : void 0)}" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
+    )}" name="chevron-down" part="chevron" library="_internal" color="currentColor" label="${this.localize.term("open")}"></sd-7-0-0-next-6-icon>` : ""}</slot>${this.type === "search" ? html`<button class="${cx("flex items-center", iconMarginLeft)}" type="button" @mousedown="${this.preventLoosingFocus}" @click="${this.handleSearchClick}"><sd-7-0-0-next-6-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-7-0-0-next-6-icon></button>` : html`<button class="combobox-button absolute top-2" tabindex="-1" aria-hidden="true" @keydown="${this.handleComboboxMouseDown}" type="button"><span class="sr-only">${this.localize.term("open")}</span></button>`}</div><div id="listbox" role="${ifDefined(!this.multiple ? "listbox" : void 0)}" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
       "bg-white px-2 py-3 relative border-primary overflow-y-auto",
       this.open && "shadow-listbox transition-shadow duration-medium ease-in-out",
       this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 form-control__listbox-border-bottom-right-radius form-control__listbox-border-bottom-left-radius" : "border-r-2 border-t-2 border-l-2 form-control__listbox-border-top-right-radius form-control__listbox-border-top-left-radius"
-    )}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-7-0-0-next-4-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
+    )}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-7-0-0-next-6-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
       "text-sm mt-1",
       hasHelpText ? "block" : "hidden",
       this.visuallyDisabled || this.disabled ? "text-neutral-500" : "text-neutral-700"
@@ -881,10 +881,10 @@ var SdCombobox = class extends SolidElement {
 SdCombobox.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([visually-disabled]) input{caret-color:transparent}:host([size=sm]) .combobox-button{right:var(--sd-spacing-4);height:var(--sd-spacing-4);width:var(--sd-spacing-4)}:host([size=md]) .combobox-button{right:.85rem;height:var(--sd-spacing-6);width:var(--sd-spacing-6)}:host([size=lg]) .combobox-button{right:var(--sd-spacing-3);height:var(--sd-spacing-8);width:var(--sd-spacing-8)}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-7-0-0-next-4-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-7-0-0-next-4-tag::part(base){border-radius:var(--sd-radius);border-width:var(--sd-combobox__tag-border-width,var(--sd-spacing-0\\.25));padding-inline:var(--sd-spacing-1)}sd-7-0-0-next-4-tag::part(content){display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:var(--tag-max-width,15ch)}sd-7-0-0-next-4-tag[size=lg]::part(base){padding-inline:var(--sd-spacing-2)}sd-7-0-0-next-4-tag[disabled=false]::part(base):hover{background-color:rgba(var(--sd-color-background-primary-100))}[part=filtered-listbox] sd-7-0-0-next-4-optgroup:first-of-type{--display-divider:none}mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold);color:inherit}:host([type=search]) sd-7-0-0-next-4-icon[name=magnifying-glass],[part=chevron]{color:rgba(var(--sd-form-control-color-icon-fill))}:host([disabled])::part(chevron),:host([type=search][disabled]) sd-7-0-0-next-4-icon[name=magnifying-glass],:host([type=search][visually-disabled]) sd-7-0-0-next-4-icon[name=magnifying-glass],:host([visually-disabled])::part(chevron){color:rgba(var(--sd-color-icon-fill-neutral-500,--sd-color-neutral-500))}@property --tw-font-weight{syntax:"*";inherits:false}`
+:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([visually-disabled]) input{caret-color:transparent}:host([size=sm]) .combobox-button{right:var(--sd-spacing-4);height:var(--sd-spacing-4);width:var(--sd-spacing-4)}:host([size=md]) .combobox-button{right:.85rem;height:var(--sd-spacing-6);width:var(--sd-spacing-6)}:host([size=lg]) .combobox-button{right:var(--sd-spacing-3);height:var(--sd-spacing-8);width:var(--sd-spacing-8)}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-7-0-0-next-6-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-7-0-0-next-6-tag::part(base){border-radius:var(--sd-radius);border-width:var(--sd-combobox__tag-border-width,var(--sd-spacing-0\\.25));padding-inline:var(--sd-spacing-1)}sd-7-0-0-next-6-tag::part(content){display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:var(--tag-max-width,15ch)}sd-7-0-0-next-6-tag[size=lg]::part(base){padding-inline:var(--sd-spacing-2)}sd-7-0-0-next-6-tag[disabled=false]::part(base):hover{background-color:rgba(var(--sd-color-background-primary-100))}[part=filtered-listbox] sd-7-0-0-next-6-optgroup:first-of-type{--display-divider:none}mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold);color:inherit}:host([type=search]) sd-7-0-0-next-6-icon[name=magnifying-glass],[part=chevron]{color:rgba(var(--sd-form-control-color-icon-fill))}:host([disabled])::part(chevron),:host([type=search][disabled]) sd-7-0-0-next-6-icon[name=magnifying-glass],:host([type=search][visually-disabled]) sd-7-0-0-next-6-icon[name=magnifying-glass],:host([visually-disabled])::part(chevron){color:rgba(var(--sd-color-icon-fill-neutral-500,--sd-color-neutral-500))}@property --tw-font-weight{syntax:"*";inherits:false}`
 ];
 __decorateClass([
-  query("sd-7-0-0-next-4-popup")
+  query("sd-7-0-0-next-6-popup")
 ], SdCombobox.prototype, "popup", 2);
 __decorateClass([
   query('[part="combobox"]')
@@ -1048,7 +1048,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdCombobox.prototype, "handleSizeChange", 1);
 SdCombobox = __decorateClass([
-  customElement("sd-7-0-0-next-4-combobox")
+  customElement("sd-7-0-0-next-6-combobox")
 ], SdCombobox);
 setDefaultAnimation("combobox.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],

package/dist-versioned/chunks/{chunk.DEBCAM5G.js → chunk.742523X2.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.ZZYKQTZB.js";
+} from "./chunk.7WPBGXB4.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -135,23 +135,23 @@ var SdAccordion = class extends SolidElement {
   }
   render() {
     return html`<details part="base"><summary part="header" id="header" class="${cx(
-      "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-7-0-0-next-4-accordion-padding-block focus-visible:focus-outline focus-visible:z-10 relative group transition-colors ease-in-out duration-fast hover:sd-7-0-0-next-4-accordion--hover-color-background"
+      "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-7-0-0-next-6-accordion-padding-block focus-visible:focus-outline focus-visible:z-10 relative group transition-colors ease-in-out duration-fast hover:sd-7-0-0-next-6-accordion--hover-color-background"
     )}" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${cx(
       !this.open && "opacity-0",
-      "w-1 sd-7-0-0-next-4-accordion__indicator-color absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full"
+      "w-1 sd-7-0-0-next-6-accordion__indicator-color absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full"
     )}"></div><slot name="summary" part="summary" class="${cx(
-      this.open ? "sd-7-0-0-next-4-accordion--open-color-text" : "sd-7-0-0-next-4-accordion-color-text",
+      this.open ? "sd-7-0-0-next-6-accordion--open-color-text" : "sd-7-0-0-next-6-accordion-color-text",
       "flex flex-auto items-center text-left"
     )}">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-medium text-xl",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-7-0-0-next-4-icon library="_internal" name="chevron-down"></sd-7-0-0-next-4-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-7-0-0-next-4-icon library="_internal" name="chevron-down"></sd-7-0-0-next-4-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-7-0-0-next-6-icon library="_internal" name="chevron-down"></sd-7-0-0-next-6-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-7-0-0-next-6-icon library="_internal" name="chevron-down"></sd-7-0-0-next-6-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
   }
 };
 SdAccordion.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}[part=header]::-webkit-details-marker{display:none}[part=base]{border-color:rgba(var(--sd-accordion-color-border,var(--sd-accordion-color-text)));border-block-width:var(--sd-accordion-border-width)}[part=summary-icon] sd-7-0-0-next-4-icon{color:rgb(var(--sd-accordion__chevron-color-text,var(--sd-accordion-color-icon-fill)))}`
+:host{display:block}[part=header]::-webkit-details-marker{display:none}[part=base]{border-color:rgba(var(--sd-accordion-color-border,var(--sd-accordion-color-text)));border-block-width:var(--sd-accordion-border-width)}[part=summary-icon] sd-7-0-0-next-6-icon{color:rgb(var(--sd-accordion__chevron-color-text,var(--sd-accordion-color-icon-fill)))}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -172,7 +172,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-7-0-0-next-4-accordion")
+  customElement("sd-7-0-0-next-6-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.5N723KVX.js → chunk.7MHQG3BX.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.ZZYKQTZB.js";
+} from "./chunk.7WPBGXB4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -324,7 +324,7 @@ __decorateClass([
   property({ attribute: "auto-size-padding", type: Number })
 ], SdPopup.prototype, "autoSizePadding", 2);
 SdPopup = __decorateClass([
-  customElement("sd-7-0-0-next-4-popup")
+  customElement("sd-7-0-0-next-6-popup")
 ], SdPopup);
 
 export {

package/dist-versioned/chunks/{chunk.RBFDHNCA.js → chunk.7PKQECKN.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.ZZYKQTZB.js";
+} from "./chunk.7WPBGXB4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -87,7 +87,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-7-0-0-next-4-button part="front-button" size="md" variant="${{
+    )}"></div><sd-7-0-0-next-6-button part="front-button" size="md" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -97,7 +97,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-7-0-0-next-4-icon library="_internal" name="reload" label="Flip to Back"></sd-7-0-0-next-4-icon></sd-7-0-0-next-4-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-7-0-0-next-6-icon library="_internal" name="reload" label="Flip to Back"></sd-7-0-0-next-6-icon></sd-7-0-0-next-6-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",
@@ -130,7 +130,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-7-0-0-next-4-button size="md" part="back-button" variant="${{
+    )}"></div><sd-7-0-0-next-6-button size="md" part="back-button" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -140,7 +140,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-7-0-0-next-4-icon library="_internal" name="reload" label="Flip to Front"></sd-7-0-0-next-4-icon></sd-7-0-0-next-4-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-7-0-0-next-6-icon library="_internal" name="reload" label="Flip to Front"></sd-7-0-0-next-6-icon></sd-7-0-0-next-6-button></div></div>`;
   }
 };
 /**
@@ -176,7 +176,7 @@ __decorateClass([
   state()
 ], SdFlipcard.prototype, "activeSide", 2);
 SdFlipcard = __decorateClass([
-  customElement("sd-7-0-0-next-4-flipcard")
+  customElement("sd-7-0-0-next-6-flipcard")
 ], SdFlipcard);
 
 export {

package/dist-versioned/chunks/{chunk.JBF2NX2O.js → chunk.7QL6Y47O.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.ZZYKQTZB.js";
+} from "./chunk.7WPBGXB4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -22,7 +22,7 @@ var SdDivider = class extends SolidElement {
   }
   render() {
     return html`<hr part="main" aria-orientation="${this.orientation}" class="${cx(
-      this.inverted ? "sd-7-0-0-next-4-divider--inverted-color-border" : "border-neutral-400",
+      this.inverted ? "sd-7-0-0-next-6-divider--inverted-color-border" : "border-neutral-400",
       this.orientation === "horizontal" ? "border-t w-full" : " border-l h-full"
     )}">`;
   }
@@ -33,7 +33,7 @@ var SdDivider = class extends SolidElement {
 SdDivider.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{margin:0}:host(sd-7-0-0-next-4-divider[orientation=horizontal]){display:block}:host(sd-7-0-0-next-4-divider[orientation=vertical]){display:inline-block}`
+:host{margin:0}:host(sd-7-0-0-next-6-divider[orientation=horizontal]){display:block}:host(sd-7-0-0-next-6-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -42,7 +42,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDivider.prototype, "inverted", 2);
 SdDivider = __decorateClass([
-  customElement("sd-7-0-0-next-4-divider")
+  customElement("sd-7-0-0-next-6-divider")
 ], SdDivider);
 
 export {