@solid-design-system/components 4.5.3 → 4.6.1

package/dist-versioned/chunks/{chunk.EON7Z22N.js → chunk.CWDRTJP6.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -154,7 +154,6 @@ var SdButton = class extends SolidElement {
         border transition-colors duration-200 ease-in-out rounded-default
         select-none cursor-[inherit]`,
       !this.inverted ? "focus-visible:focus-outline" : "focus-visible:focus-outline-inverted",
-      this.visuallyDisabled && "focus-visible:outline-none",
       this.loading && "relative cursor-wait",
       (this.disabled || this.visuallyDisabled) && "cursor-not-allowed",
       slots["icon-only"] && "px-0 w-varspacing",
@@ -191,7 +190,8 @@ var SdButton = class extends SolidElement {
         lg: "mr-2"
       }[this.size]
     )}"></slot><slot part="label" id="content" class="${cx(
-      slots["icon-only"] ? "flex flex-auto items-center pointer-events-none" : "inline-block",
+      "inline-flex items-center justify-center",
+      slots["icon-only"] && "pointer-events-none",
       this.loading && "invisible"
     )}"></slot><slot name="icon-right" part="icon-right" class="${cx(
       "flex flex-auto items-center pointer-events-none",
@@ -202,7 +202,7 @@ var SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-4-5-3-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-4-5-3-spinner>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-4-6-1-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-4-6-1-spinner>` : ""}</${tag}>`;
   }
 };
 /**
@@ -210,13 +210,13 @@ var SdButton = class extends SolidElement {
  */
 SdButton.styles = [
   ...SolidElement.styles,
-  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto)}sd-4-5-3-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-4-5-3-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-4-5-3-icon),sd-4-5-3-spinner{font-size:calc(var(--tw-varspacing)/2)}`
+  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto)}sd-4-6-1-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-4-6-1-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-4-6-1-icon),sd-4-6-1-spinner{font-size:calc(var(--tw-varspacing)/2)}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-4-5-3-icon" })
+  queryAssignedElements({ selector: "sd-4-6-1-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -282,7 +282,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-4-5-3-button")
+  customElement("sd-4-6-1-button")
 ], SdButton);
 
 export {

package/dist-versioned/chunks/{chunk.KCUUHR5D.js → chunk.DTROPLWA.js}

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

package/dist-versioned/chunks/{chunk.JIG7HDOK.js → chunk.DWJJNVK4.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -21,7 +21,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-4-5-3-tab-${this.attrId}`;
+    this.componentId = `sd-4-6-1-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.variant = "default";
     this.active = false;
@@ -91,7 +91,7 @@ __decorateClass([
   watch("disabled")
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-4-5-3-tab")
+  customElement("sd-4-6-1-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.ONBGPY5D.js → chunk.DXNE63DE.js}

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

package/dist-versioned/chunks/{chunk.NF4TXS55.js → chunk.EEZURJVH.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -92,7 +92,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdMapMarker.prototype, "label", 2);
 SdMapMarker = __decorateClass([
-  customElement("sd-4-5-3-map-marker")
+  customElement("sd-4-6-1-map-marker")
 ], SdMapMarker);
 
 export {

package/dist-versioned/chunks/{chunk.FRPVDR6Z.js → chunk.FHD45LNI.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -41,7 +41,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdSpinner.prototype, "color", 2);
 SdSpinner = __decorateClass([
-  customElement("sd-4-5-3-spinner")
+  customElement("sd-4-6-1-spinner")
 ], SdSpinner);
 
 export {

package/dist-versioned/chunks/{chunk.AWASHA2T.js → chunk.G22VBGDU.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -25,7 +25,7 @@ SdCarouselItem.styles = [
   css`:host{align-items:center;aspect-ratio:var(--aspect-ratio);display:flex;flex-direction:column;height:100%;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;width:100%}::slotted(img){height:100%;-o-object-fit:cover;object-fit:cover;width:100%}`
 ];
 SdCarouselItem = __decorateClass([
-  customElement("sd-4-5-3-carousel-item")
+  customElement("sd-4-6-1-carousel-item")
 ], SdCarouselItem);
 
 export {

package/dist-versioned/chunks/{chunk.6S3CCHLZ.js → chunk.GE2RNW2L.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -208,7 +208,7 @@ __decorateClass([
   watch("playbackRate")
 ], SdAnimation.prototype, "handlePlaybackRateChange", 1);
 SdAnimation = __decorateClass([
-  customElement("sd-4-5-3-animation")
+  customElement("sd-4-6-1-animation")
 ], SdAnimation);
 
 export {

package/dist-versioned/chunks/{chunk.2SYIHQWC.js → chunk.HGCAGKAN.js}

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

package/dist-versioned/chunks/{chunk.GAUAMVUZ.js → chunk.HGTEA7ZU.js}

@@ -1,9 +1,9 @@
 import {
   SdTag
-} from "./chunk.PLM7YZ2S.js";
+} from "./chunk.JFUXDVSP.js";
 import {
   SdPopup
-} from "./chunk.7VNCOUWO.js";
+} from "./chunk.2BTNPIIA.js";
 import {
   defaultValue
 } from "./chunk.GI7VDIWX.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk.N4LHE3QK.js";
 import {
   SdIcon
-} from "./chunk.SH45GYZL.js";
+} from "./chunk.4FGGIABU.js";
 import {
   animateTo,
   stopAnimations
@@ -48,7 +48,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -62,11 +62,10 @@ var SdCombobox = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
-      assumeInteractionOn: ["sd-blur", "sd-4-5-3-input"]
+      assumeInteractionOn: ["sd-blur", "sd-4-6-1-input"]
     });
     this.hasSlotController = new HasSlotController(this, "help-text", "label");
     this.localize = new LocalizeController(this);
-    this.hasHover = false;
     this.hasFocus = false;
     this.displayInputValue = "";
     this.selectedTextLabel = "";
@@ -104,11 +103,11 @@ var SdCombobox = class extends SolidElement {
       return normalizedOption.includes(normalizedQuery) || normalizedOptionLabel.includes(normalizedQuery);
     };
     this.getTag = (option) => {
-      return html`<sd-4-5-3-tag ?disabled="${this.disabled}" part="tag" exportparts="
+      return html`<sd-4-6-1-tag ?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-4-5-3-tag>`;
+            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-4-6-1-tag>`;
     };
     this.handleDocumentFocusIn = (event) => {
       const path = event.composedPath();
@@ -235,9 +234,9 @@ var SdCombobox = class extends SolidElement {
       return html`${typeof optionHtml === "string" ? unsafeHTML(optionHtml) : optionHtml}`;
     };
     return this.filteredOptions.map((item) => {
-      if (item.tagName.toLowerCase() === "sd-4-5-3-optgroup") {
+      if (item.tagName.toLowerCase() === "sd-4-6-1-optgroup") {
         Array.from(item.children).forEach((option) => {
-          if (option.tagName.toLowerCase() === "sd-4-5-3-option") {
+          if (option.tagName.toLowerCase() === "sd-4-6-1-option") {
             renderOption(option);
           }
         });
@@ -257,11 +256,11 @@ var SdCombobox = class extends SolidElement {
       });
     } else {
       return [
-        html`<sd-4-5-3-tag ?disabled="${this.disabled}" part="tag" exportparts="
+        html`<sd-4-6-1-tag ?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-4-5-3-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-4-6-1-tag>`
       ];
     }
   }
@@ -378,7 +377,7 @@ var SdCombobox = class extends SolidElement {
   }
   handleOptionClick(event) {
     const target = event.target;
-    const option = target.closest("sd-4-5-3-option");
+    const option = target.closest("sd-4-6-1-option");
     const oldValue = this.value;
     if (option && !option.disabled) {
       if (this.multiple) {
@@ -430,7 +429,7 @@ var SdCombobox = class extends SolidElement {
     scrollIntoView(this.getCurrentOption(), this.listbox, "vertical", "auto");
   }
   getAllFilteredOptions() {
-    return [...this.filteredWrapper.querySelectorAll("sd-4-5-3-option")];
+    return [...this.filteredWrapper.querySelectorAll("sd-4-6-1-option")];
   }
   getCurrentOption() {
     return this.getAllFilteredOptions().find((option) => option.current);
@@ -556,7 +555,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-4-5-3-optgroup";
+      const hasOptgroup = ((_b = option.parentElement) == null ? void 0 : _b.tagName.toLowerCase()) === "sd-4-6-1-optgroup";
       if (!hasOptgroup) {
         return clonedOption;
       }
@@ -580,13 +579,7 @@ var SdCombobox = class extends SolidElement {
     this.formControlController.emitInvalidEvent(event);
     this.invalidMessage.textContent = event.target.validationMessage;
   }
-  handleMouseEnter() {
-    this.hasHover = true;
-  }
-  handleMouseLeave() {
-    this.hasHover = false;
-  }
-  /** Receives incoming event detail from sd-4-5-3-popup and updates local state for conditional styling. */
+  /** Receives incoming event detail from sd-4-6-1-popup and updates local state for conditional styling. */
   handleCurrentPlacement(e) {
     const incomingPlacement = e.detail;
     if (incomingPlacement) {
@@ -598,7 +591,7 @@ var SdCombobox = class extends SolidElement {
   }
   handleUseTagsChange() {
     const allOptions = this.getAllFilteredOptions();
-    if (customElements.get("sd-4-5-3-option")) {
+    if (customElements.get("sd-4-6-1-option")) {
       allOptions.forEach((option) => {
         option.checkbox = this.multiple;
       });
@@ -724,8 +717,8 @@ var SdCombobox = class extends SolidElement {
     return filterOnlyOptgroups(getAssignedElementsForSlot(this.defaultSlot));
   }
   async handleDefaultSlotChange() {
-    if (!customElements.get("sd-4-5-3-option")) {
-      customElements.whenDefined("sd-4-5-3-option").then(() => this.handleDefaultSlotChange());
+    if (!customElements.get("sd-4-6-1-option")) {
+      customElements.whenDefined("sd-4-6-1-option").then(() => this.handleDefaultSlotChange());
       return;
     }
     const slottedOptions = this.getSlottedOptions();
@@ -737,10 +730,10 @@ var SdCombobox = class extends SolidElement {
       if (this.multiple) {
         option.checkbox = true;
       }
-      option.id = option.id || `sd-4-5-3-combobox-option-${index}`;
+      option.id = option.id || `sd-4-6-1-combobox-option-${index}`;
     });
     slottedOptgroups.forEach((optgroup, index) => {
-      optgroup.id = optgroup.id || `sd-4-5-3-combobox-optgroup-${index}`;
+      optgroup.id = optgroup.id || `sd-4-6-1-combobox-optgroup-${index}`;
     });
     await this.syncSelectedOptionsAndValue();
     if (this.multiple) {
@@ -775,8 +768,7 @@ var SdCombobox = class extends SolidElement {
       this.size === "sm" ? "text-sm" : "text-base",
       this.open && "z-50"
     )}"><label id="label" part="form-control-label" class="${hasLabel && "inline-block mb-2"}" aria-hidden="${!hasLabel}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="relative w-full bg-white text-black"><div part="border" class="${cx(
-      "absolute top-0 w-full h-full pointer-events-none border rounded-default",
-      this.hasHover && !this.disabled && !this.visuallyDisabled && "bg-neutral-200",
+      "absolute top-0 w-full h-full pointer-events-none border rounded-default z-10",
       {
         disabled: "border-neutral-500",
         visuallyDisabled: "border-neutral-500",
@@ -789,20 +781,21 @@ var SdCombobox = class extends SolidElement {
         default: "border-neutral-800"
       }[selectState],
       this.open && (this.currentPlacement === "bottom" ? "rounded-bl-none rounded-br-none" : "rounded-tl-none rounded-tr-none")
-    )}"></div><sd-4-5-3-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
+    )}"></div><sd-4-6-1-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="
               popup:popup__content,
             "><div part="combobox" class="${cx(
       "relative w-full px-4 flex flex-row items-center rounded-default",
+      this.visuallyDisabled || this.disabled ? "hover:bg-transparent" : "hover:bg-neutral-200",
       this.open && "shadow",
       {
         sm: "py-1 min-h-[32px]",
         md: "py-1 min-h-[40px]",
         lg: "py-2 min-h-[48px]"
       }[this.size]
-    )}" slot="anchor" @keydown="${this.handleComboboxKeyDown}" @mousedown="${this.handleComboboxMouseDown}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}">${slots["left"] ? html`<slot part="left" name="left" class="${cx("inline-flex", iconMarginRight, iconColor, iconSize)}"></slot>` : ""} ${this.multiple && this.useTags && this.tags.length > 0 ? html`<div part="tags" class="${cx("flex items-center gap-1", iconMarginRight)}">${this.tags}</div>` : null} <input id="display-input" name="${this.name}" form="${this.form}" part="display-input" class="${cx(
+    )}" slot="anchor" @keydown="${this.handleComboboxKeyDown}" @mousedown="${this.handleComboboxMouseDown}">${slots["left"] ? html`<slot part="left" name="left" class="${cx("inline-flex", iconMarginRight, iconColor, iconSize)}"></slot>` : ""} ${this.multiple && this.useTags && this.tags.length > 0 ? html`<div part="tags" class="${cx("flex items-center gap-1", iconMarginRight)}">${this.tags}</div>` : null} <input id="display-input" name="${this.name}" form="${this.form}" part="display-input" class="${cx(
       "appearance-none outline-none bg-transparent flex-auto min-w-0",
       cursorStyles,
       this.selectedTextLabel && !this.multiple ? "placeholder-black" : "placeholder-neutral-700"
@@ -810,28 +803,28 @@ 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-4-5-3-icon class="${cx("text-icon-fill-neutral-800", iconSize)}" name="closing-round" library="system"></sd-4-5-3-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-4-5-3-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="system" name="risk"></sd-4-5-3-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-5-3-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-4-5-3-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-4-6-1-icon class="${cx("text-icon-fill-neutral-800", iconSize)}" name="closing-round" library="system"></sd-4-6-1-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-4-6-1-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="system" name="risk"></sd-4-6-1-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-6-1-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-4-6-1-icon>` : ""}<slot name="right" part="right" class="${cx(
       "inline-flex ml-2 leading-[0]",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary",
       iconSize
-    )}"><sd-4-5-3-icon class="${cx("transition-all", this.open ? "rotate-180" : "rotate-0")}" name="chevron-down" part="chevron" library="system" color="currentColor"></sd-4-5-3-icon></slot></div><div id="listbox" role="listbox" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
+    )}"><sd-4-6-1-icon class="${cx("transition-all", this.open ? "rotate-180" : "rotate-0")}" name="chevron-down" part="chevron" library="system" color="currentColor"></sd-4-6-1-icon></slot></div><div id="listbox" role="listbox" 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",
       this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default" : "border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default"
-    )}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox" class="overflow-y-scroll">${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-4-5-3-popup></div><div part="form-control-help-text" id="help-text" class="text-sm text-neutral-700 mt-2" aria-hidden="${!hasHelpText}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox" class="overflow-y-scroll">${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-4-6-1-popup></div><div part="form-control-help-text" id="help-text" class="text-sm text-neutral-700 mt-2" aria-hidden="${!hasHelpText}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdCombobox.dependencies = {
-  "sd-4-5-3-icon": SdIcon,
-  "sd-4-5-3-popup": SdPopup,
-  "sd-4-5-3-tag": SdTag
+  "sd-4-6-1-icon": SdIcon,
+  "sd-4-6-1-popup": SdPopup,
+  "sd-4-6-1-tag": SdTag
 };
 SdCombobox.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;position:relative;width:100%}:host([required]) #label:after{content:" *"}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-4-5-3-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-4-5-3-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-4-5-3-tag::part(content){display:inline-block;max-width:var(--tag-max-width,15ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-4-5-3-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-4-5-3-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-bg-opacity,1))}[part=filtered-listbox] sd-4-5-3-optgroup:first-of-type{--display-divider:none}mark{background-color:transparent;color:inherit;font-weight:700}`
+  css`:host{display:block;position:relative;width:100%}:host([required]) #label:after{content:" *"}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-4-6-1-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-4-6-1-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-4-6-1-tag::part(content){display:inline-block;max-width:var(--tag-max-width,15ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-4-6-1-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-4-6-1-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-bg-opacity,1))}[part=filtered-listbox] sd-4-6-1-optgroup:first-of-type{--display-divider:none}mark{background-color:transparent;color:inherit;font-weight:700}`
 ];
 __decorateClass([
-  query("sd-4-5-3-popup")
+  query("sd-4-6-1-popup")
 ], SdCombobox.prototype, "popup", 2);
 __decorateClass([
   query('[part="combobox"]')
@@ -857,9 +850,6 @@ __decorateClass([
 __decorateClass([
   query("#invalid-message")
 ], SdCombobox.prototype, "invalidMessage", 2);
-__decorateClass([
-  state()
-], SdCombobox.prototype, "hasHover", 2);
 __decorateClass([
   state()
 ], SdCombobox.prototype, "hasFocus", 2);
@@ -986,7 +976,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdCombobox.prototype, "handleOpenChange", 1);
 SdCombobox = __decorateClass([
-  customElement("sd-4-5-3-combobox")
+  customElement("sd-4-6-1-combobox")
 ], SdCombobox);
 setDefaultAnimation("combobox.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.KX2TPV2P.js → chunk.HVQFYN4Q.js}

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

package/dist-versioned/chunks/{chunk.KSYD4JIL.js → chunk.IBGXHO4B.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.VFC3SCSY.js";
+} from "./chunk.ODT6T47Z.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.T5VRGBLR.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -64,10 +64,10 @@ var SdQuickfact = class extends SdAccordion {
       !this.expandable && "hidden"
     )}
             ><slot name="expand-icon" class=${cx(this.open && "hidden")}>
-              <sd-4-5-3-icon library="system" name="chevron-down"></sd-4-5-3-icon>
+              <sd-4-6-1-icon library="system" name="chevron-down"></sd-4-6-1-icon>
             </slot>
             <slot name="collapse-icon" class=${cx(!this.open && "hidden")}>
-              <sd-4-5-3-icon library="system" name="chevron-down"></sd-4-5-3-icon> </slot
+              <sd-4-6-1-icon library="system" name="chevron-down"></sd-4-6-1-icon> </slot
           ></span>
         </${header}>
         <div part="content" id="content" class=${cx("overflow-hidden", !this.expandable && "hidden")}>
@@ -85,7 +85,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdQuickfact.prototype, "expandable", 2);
 SdQuickfact = __decorateClass([
-  customElement("sd-4-5-3-quickfact")
+  customElement("sd-4-6-1-quickfact")
 ], SdQuickfact);
 setDefaultAnimation("quickfact.show", {
   keyframes: [