@ds-autonomie/web-components 2.18.0 → 2.19.0

package/dist/chunks/{chunk.UKH2D4DL.js → chunk.SGPAUD26.js}

@@ -115,8 +115,12 @@ var DSACheckboxGroup = class extends ShoelaceElement {
         (checkboxValue) => checkboxValue !== target.value
       );
     }
-    this.getAllCheckboxes().forEach((checkbox) => {
-      checkbox.checked = this.value.includes(checkbox.value);
+    const allCheckboxes = this.getAllCheckboxes();
+    allCheckboxes.forEach((checkbox) => {
+      const shouldBeChecked = this.value.includes(checkbox.value);
+      if (checkbox.checked !== shouldBeChecked) {
+        checkbox.checked = shouldBeChecked;
+      }
     });
     this.emit("dsa-change");
     this.emit("dsa-input");
@@ -150,9 +154,16 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     if (customElements.get("dsa-checkbox") || customElements.get("dsa-checkbox-button") || customElements.get("dsa-checkbox-card")) {
       const allCheckboxes = this.getAllCheckboxes();
       allCheckboxes.forEach((checkbox) => {
-        checkbox.checked = this.value.includes(checkbox.value);
-        checkbox.parentDisabled = this.disabled;
-        checkbox.parentReadonly = this.readonly;
+        const shouldBeChecked = this.value.includes(checkbox.value);
+        if (checkbox.checked !== shouldBeChecked) {
+          checkbox.checked = shouldBeChecked;
+        }
+        if (checkbox.parentDisabled !== this.disabled) {
+          checkbox.parentDisabled = this.disabled;
+        }
+        if (checkbox.parentReadonly !== this.readonly) {
+          checkbox.parentReadonly = this.readonly;
+        }
       });
       this.hasCheckboxButtons = allCheckboxes.some(
         (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-button"
@@ -180,20 +191,27 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     return ids.join(" ");
   }
   handleValueChange() {
-    this.getAllCheckboxes().forEach(
-      (checkbox) => checkbox.checked = this.value.includes(checkbox.value)
-    );
+    this.getAllCheckboxes().forEach((checkbox) => {
+      const shouldBeChecked = this.value.includes(checkbox.value);
+      if (checkbox.checked !== shouldBeChecked) {
+        checkbox.checked = shouldBeChecked;
+      }
+    });
     this.formControlController.setValidity(this.validity.valid);
   }
   handleDisabledChange() {
-    this.getAllCheckboxes().forEach(
-      (checkbox) => checkbox.parentDisabled = this.disabled
-    );
+    this.getAllCheckboxes().forEach((checkbox) => {
+      if (checkbox.parentDisabled !== this.disabled) {
+        checkbox.parentDisabled = this.disabled;
+      }
+    });
   }
   handleReadonlyChange() {
-    this.getAllCheckboxes().forEach(
-      (checkbox) => checkbox.parentReadonly = this.readonly
-    );
+    this.getAllCheckboxes().forEach((checkbox) => {
+      if (checkbox.parentReadonly !== this.readonly) {
+        checkbox.parentReadonly = this.readonly;
+      }
+    });
   }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {

package/dist/chunks/{chunk.7WQZIM7N.js → chunk.SGRSRDWP.js}

@@ -1,9 +1,13 @@
 import {
   DSACheckboxGroup
-} from "./chunk.UKH2D4DL.js";
+} from "./chunk.SGPAUD26.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   DSAVisuallyHidden
 } from "./chunk.JIN6PGAK.js";
@@ -15,7 +19,7 @@ import {
 } from "./chunk.6QDM5FUA.js";
 import {
   checkbox_styles_default
-} from "./chunk.JUOYMIGK.js";
+} from "./chunk.KD27MP6C.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -81,7 +85,7 @@ var DSACheckbox = class extends ShoelaceElement {
     super.connectedCallback();
     const parent = this.parentElement;
     if (!this.hasAttribute("role") && parent instanceof DSACheckboxGroup) {
-      this.setAttribute("role", "listitem");
+      setAttributeIfDifferent(this, "role", "listitem");
     }
   }
   firstUpdated() {
@@ -114,23 +118,27 @@ var DSACheckbox = class extends ShoelaceElement {
   }
   handleDeactivatedChange() {
     if (this.readonly || this.parentReadonly) {
-      this.input.setAttribute("aria-disabled", "true");
+      setAttributeIfDifferent(this.input, "aria-disabled", "true");
     } else {
-      this.input.removeAttribute("aria-disabled");
+      removeAttributeIfPresent(this.input, "aria-disabled");
     }
     if (this.disabled || this.parentDisabled)
       this.formControlController.setValidity(this.disabled);
   }
   handleStateChange() {
-    this.input.checked = this.checked;
-    this.input.indeterminate = this.indeterminate;
+    if (this.input.checked !== this.checked) {
+      this.input.checked = this.checked;
+    }
+    if (this.input.indeterminate !== this.indeterminate) {
+      this.input.indeterminate = this.indeterminate;
+    }
     this.formControlController.updateValidity();
   }
   handleErrorChange() {
     if (this.error) {
-      this.input.setAttribute("aria-invalid", "true");
+      setAttributeIfDifferent(this.input, "aria-invalid", "true");
     } else {
-      this.input.removeAttribute("aria-invalid");
+      removeAttributeIfPresent(this.input, "aria-invalid");
     }
   }
   /** Simulates a click on the checkbox. */

package/dist/chunks/{chunk.JFAQ5QOI.js → chunk.SP2SVH7K.js}

@@ -1,15 +1,15 @@
 import {
   DSAInput
-} from "./chunk.T3CLPVPE.js";
+} from "./chunk.QUEYKUIS.js";
 import {
   filter_counter_styles_default
 } from "./chunk.YSCXTTQZ.js";
 import {
   FilterBase
-} from "./chunk.X6SEIMM4.js";
+} from "./chunk.4VSGAJJL.js";
 import {
   DSAButton
-} from "./chunk.UNDVQ2N3.js";
+} from "./chunk.SXFVCR7O.js";
 import {
   DSAIconButton
 } from "./chunk.WNESPUKK.js";

package/dist/chunks/{chunk.UNDVQ2N3.js → chunk.SXFVCR7O.js}

@@ -1,6 +1,6 @@
 import {
   DSASpinner
-} from "./chunk.C6UENJ2Y.js";
+} from "./chunk.2WW7OJZT.js";
 import {
   FormControlController,
   validValidityState
@@ -13,7 +13,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";

package/dist/chunks/{chunk.2O3KAV2X.js → chunk.T6OAGTAP.js}

@@ -1,6 +1,6 @@
 import {
   DSATooltip
-} from "./chunk.TP5XEQ2O.js";
+} from "./chunk.ELOLGOFM.js";
 import {
   copy_button_styles_default
 } from "./chunk.MTRAJSQ5.js";
@@ -10,7 +10,7 @@ import {
 } from "./chunk.HPDCOGLH.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";

package/dist/chunks/{chunk.BO3GUSFS.js → chunk.TCW77JY3.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   __decorateClass,
   __spreadProps,

package/dist/chunks/{chunk.IAJLX5AF.js → chunk.TPO64PVN.js}

@@ -1,6 +1,9 @@
 import {
   skip_link_item_styles_default
 } from "./chunk.AXDAWBNN.js";
+import {
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";
@@ -11,6 +14,7 @@ import {
 // src/components/skip-link-item/skip-link-item.ts
 import { html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 var DSASkipLinkItem = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
@@ -24,16 +28,18 @@ var DSASkipLinkItem = class extends ShoelaceElement {
   }
   /** Sets focus on the anchor. */
   focus(options) {
-    this.anchor.focus(options);
+    var _a;
+    (_a = this.anchor) == null ? void 0 : _a.focus(options);
   }
   /** Removes focus from the anchor. */
   blur() {
-    this.anchor.blur();
+    var _a;
+    (_a = this.anchor) == null ? void 0 : _a.blur();
   }
   connectedCallback() {
     super.connectedCallback();
     if (!this.hasAttribute("role")) {
-      this.setAttribute("role", "listitem");
+      setAttributeIfDifferent(this, "role", "listitem");
     }
   }
   render() {
@@ -41,7 +47,7 @@ var DSASkipLinkItem = class extends ShoelaceElement {
       <a
         part="base"
         class="skip-link-item"
-        href=${this.href}
+        href=${ifDefined(this.href || void 0)}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
       >
@@ -52,7 +58,7 @@ var DSASkipLinkItem = class extends ShoelaceElement {
 };
 DSASkipLinkItem.styles = skip_link_item_styles_default;
 __decorateClass([
-  query("[part~='base']")
+  query(".skip-link-item")
 ], DSASkipLinkItem.prototype, "anchor", 2);
 __decorateClass([
   property()

package/dist/chunks/{chunk.ZQ56PQ6F.js → chunk.U4W57NV6.js}

@@ -1,9 +1,9 @@
 import {
   DSARadioGroup
-} from "./chunk.ABJLUGLR.js";
+} from "./chunk.QKUUHXNR.js";
 import {
   FormSelectableCard
-} from "./chunk.SOF3BQCV.js";
+} from "./chunk.XMBQRPGX.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -19,7 +19,10 @@ var DSARadioCard = class extends FormSelectableCard {
     this.type = "radio";
   }
   handleClick() {
-    if (!this.readonly) {
+    if (this.disabled || this.readonly || this.parentDisabled || this.parentReadonly) {
+      return;
+    }
+    if (!this.checked) {
       this.checked = true;
     }
   }

package/dist/chunks/{chunk.DMSUKPJE.js → chunk.UESIZCBP.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.LZOGVU7B.js → chunk.UQ7ZIOBO.js}

@@ -24,7 +24,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";

package/dist/chunks/{chunk.2K5QPKBA.js → chunk.V26NK6TM.js}

@@ -1,6 +1,6 @@
 import {
   DSAMenuAccordion
-} from "./chunk.MGW4E3VW.js";
+} from "./chunk.47AQXN3U.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -20,7 +20,6 @@ import {
 // src/components/sidenav-info-accordion/sidenav-info-accordion.ts
 import { html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 var DSASidenavInfoAccordion = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
@@ -33,7 +32,9 @@ var DSASidenavInfoAccordion = class extends ShoelaceElement {
     this.collapsed = false;
   }
   handleToggle() {
-    this.open = this.accordion.open;
+    if (this.open !== this.accordion.open) {
+      this.open = this.accordion.open;
+    }
   }
   /** Shows the accordion. */
   async show() {
@@ -69,7 +70,7 @@ var DSASidenavInfoAccordion = class extends ShoelaceElement {
     return html`
       <dsa-menu-accordion
         ?open=${this.open}
-        ?collapsed=${ifDefined(this.collapsed)}
+        ?collapsed=${this.collapsed}
         sidenav-info
         @dsa-show=${this.handleToggle}
         @dsa-hide=${this.handleToggle}

package/dist/chunks/{chunk.APWZSSG6.js → chunk.V2HQ7IVJ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.VHSA53PH.js → chunk.V3LWOWUB.js}

@@ -33,7 +33,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.WDPZ4NSH.js → chunk.V4SDZV6L.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";

package/dist/chunks/{chunk.BHEY6E7D.js → chunk.VJMPU2K5.js}

@@ -4,6 +4,10 @@ import {
 import {
   LoadingStateElement
 } from "./chunk.YROTOHU3.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   DSAVisuallyHidden
 } from "./chunk.JIN6PGAK.js";
@@ -12,7 +16,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -115,35 +119,25 @@ var DSATableContainer = class extends LoadingStateElement {
     if (!tableCaption || !tableElement || tableCaption.id || tableElement.getAttribute("aria-labelledby"))
       return;
     const randomId = Math.floor(Math.random() * 999999999).toString();
-    tableCaption.setAttribute("id", randomId);
-    tableElement.setAttribute("aria-labelledby", randomId);
+    setAttributeIfDifferent(tableCaption, "id", randomId);
+    setAttributeIfDifferent(tableElement, "aria-labelledby", randomId);
   }
   handleShowTableActions() {
     const { actionBar, toolbar } = this.getActionBarAndToolbar();
     if (actionBar !== null) {
       if (this.showTableActions) {
-        if (!actionBar.hasAttribute("show")) {
-          actionBar.setAttribute("show", "true");
-        }
-      } else if (actionBar.hasAttribute("show")) {
-        actionBar.removeAttribute("show");
+        setAttributeIfDifferent(actionBar, "show", "true");
+      } else {
+        removeAttributeIfPresent(actionBar, "show");
       }
     }
     if (toolbar !== null) {
       if (this.showTableActions) {
-        if (toolbar.getAttribute("tabindex") !== "-1") {
-          toolbar.setAttribute("tabindex", "-1");
-        }
-        if (toolbar.getAttribute("aria-hidden") !== "true") {
-          toolbar.setAttribute("aria-hidden", "true");
-        }
+        setAttributeIfDifferent(toolbar, "tabindex", "-1");
+        setAttributeIfDifferent(toolbar, "aria-hidden", "true");
       } else {
-        if (toolbar.hasAttribute("tabindex")) {
-          toolbar.removeAttribute("tabindex");
-        }
-        if (toolbar.hasAttribute("aria-hidden")) {
-          toolbar.removeAttribute("aria-hidden");
-        }
+        removeAttributeIfPresent(toolbar, "tabindex");
+        removeAttributeIfPresent(toolbar, "aria-hidden");
       }
     }
   }
@@ -151,14 +145,14 @@ var DSATableContainer = class extends LoadingStateElement {
     const childrenElements = this.getLoadingTargets();
     if (this.loading) {
       childrenElements.forEach((element) => {
-        if (element && element.getAttribute("loading") !== "true") {
-          element.setAttribute("loading", "true");
+        if (element) {
+          setAttributeIfDifferent(element, "loading", "true");
         }
       });
     } else {
       childrenElements.forEach((element) => {
-        if (element == null ? void 0 : element.hasAttribute("loading")) {
-          element.removeAttribute("loading");
+        if (element) {
+          removeAttributeIfPresent(element, "loading");
         }
       });
     }
@@ -166,8 +160,12 @@ var DSATableContainer = class extends LoadingStateElement {
   handleSkeletonEffectChange() {
     const childrenElements = this.getLoadingTargets();
     childrenElements.forEach((element) => {
-      if (element && element.getAttribute("skeleton-effect") !== this.skeletonEffect) {
-        element.setAttribute("skeleton-effect", this.skeletonEffect);
+      if (element) {
+        setAttributeIfDifferent(
+          element,
+          "skeleton-effect",
+          this.skeletonEffect
+        );
       }
     });
   }

package/dist/chunks/{chunk.HFTU6LUQ.js → chunk.VNGKMC5T.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.TGEREFOF.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.WLP7MATK.js → chunk.VO73SGIU.js}

@@ -1,6 +1,6 @@
 import {
   table_row_base_styles_default
-} from "./chunk.MVDMKWDN.js";
+} from "./chunk.ZHPIA4F4.js";
 
 // src/components/table-header-row/table-header-row.styles.ts
 import { css } from "lit";

package/dist/chunks/{chunk.FQZVV2TO.js → chunk.VOKBXFKF.js}

@@ -1,9 +1,12 @@
 import {
   step_styles_default
-} from "./chunk.6RDA3XLH.js";
+} from "./chunk.YF2V46J3.js";
 import {
   getStepIcon
 } from "./chunk.CCTWXABH.js";
+import {
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   DSAVisuallyHidden
 } from "./chunk.JIN6PGAK.js";
@@ -15,7 +18,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";
@@ -61,7 +64,7 @@ var DSAStep = class extends ShoelaceElement {
     this.button.blur();
   }
   connectedCallback() {
-    this.setAttribute("role", "listitem");
+    setAttributeIfDifferent(this, "role", "listitem");
     super.connectedCallback();
   }
   getTag() {
@@ -88,6 +91,7 @@ var DSAStep = class extends ShoelaceElement {
   render() {
     const hasTitleSlot = this.hasSlotController.test("title");
     const hasContentSlot = this.hasSlotController.test("content");
+    const hasTooltipSlot = this.hasSlotController.test("tooltip");
     const hasTitle = this.stepTitle ? true : !!hasTitleSlot;
     const hasContent = this.content ? true : !!hasContentSlot;
     const isStaticStep = !this.clickable;
@@ -185,7 +189,7 @@ var DSAStep = class extends ShoelaceElement {
                 >${this.stepTitle}</slot
               >
             </${tag}>
-            ${this.hasSlotController.test("tooltip") ? html` <slot name="tooltip" class="step-tooltip"></slot> ` : ""}
+            ${hasTooltipSlot ? html` <slot name="tooltip" class="step-tooltip"></slot> ` : ""}
           </div>
           <slot name="content" class="step-content">${this.content}</slot>
         </div>

package/dist/chunks/{chunk.2SQ6UBOQ.js → chunk.VPBDM3F2.js}

@@ -1,6 +1,10 @@
 import {
   FormSelectableCard
-} from "./chunk.SOF3BQCV.js";
+} from "./chunk.XMBQRPGX.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -18,17 +22,20 @@ var DSACheckboxCard = class extends FormSelectableCard {
   connectedCallback() {
     super.connectedCallback();
     if (!this.hasAttribute("role")) {
-      this.setAttribute("role", "listitem");
+      setAttributeIfDifferent(this, "role", "listitem");
     }
   }
   handleClick() {
+    if (this.readonly || this.disabled || this.parentDisabled || this.parentReadonly) {
+      return;
+    }
     this.checked = !this.checked;
   }
   handleErrorChange() {
     if (this.error) {
-      this.button.setAttribute("aria-invalid", "true");
+      setAttributeIfDifferent(this.button, "aria-invalid", "true");
     } else {
-      this.button.removeAttribute("aria-invalid");
+      removeAttributeIfPresent(this.button, "aria-invalid");
     }
   }
 };

package/dist/chunks/{chunk.LZPAAWTZ.js → chunk.VPZ2H23V.js}

@@ -77,16 +77,6 @@ var tab_group_styles_default = css`
     right: 0;
   }
 
-  .tab-group--rtl .tab-group__scroll-button--start {
-    left: auto;
-    right: 0;
-  }
-
-  .tab-group--rtl .tab-group__scroll-button--end {
-    left: 0;
-    right: auto;
-  }
-
   /*
    * Top
    */
@@ -210,11 +200,6 @@ var tab_group_styles_default = css`
       var(--dsa-wc-tab-group-indicator-color);
   }
 
-  .tab-group--start.tab-group--rtl .tab-group__indicator {
-    right: auto;
-    left: calc(-1 * var(--dsa-wc-tab-group-track-width));
-  }
-
   .tab-group--start .tab-group__body {
     flex: 1 1 auto;
     order: 2;
@@ -251,11 +236,6 @@ var tab_group_styles_default = css`
       var(--dsa-wc-tab-group-indicator-color);
   }
 
-  .tab-group--end.tab-group--rtl .tab-group__indicator {
-    right: calc(-1 * var(--dsa-wc-tab-group-track-width));
-    left: auto;
-  }
-
   .tab-group--end .tab-group__body {
     flex: 1 1 auto;
     order: 1;

package/dist/chunks/{chunk.BSSSDSVK.js → chunk.VYX5ZSFI.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk.QGI766JC.js";
 import {
   DSAButton
-} from "./chunk.UNDVQ2N3.js";
+} from "./chunk.SXFVCR7O.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";

package/dist/chunks/{chunk.ACM36IFE.js → chunk.WAEFCPAX.js}

@@ -193,13 +193,13 @@ var select_styles_default = css`
     color: var(--dsa-wc-input-on-base-text-field-input-color);
   }
 
-  .select--error.select--on-base:not(.select--disabled):not(.select--readonly)
+  .select--on-base.select--error:not(.select--disabled):not(.select--readonly)
     .select__combobox {
     background-color: var(--dsa-wc-input-on-base-background-color-error);
     border-color: var(--dsa-wc-input-on-base-border-color-error);
   }
 
-  .select--error.select--on-base:hover:not(.select--disabled):not(
+  .select--on-base.select--error:hover:not(.select--disabled):not(
       .select--readonly
     )
     .select__combobox {
@@ -250,12 +250,12 @@ var select_styles_default = css`
     color: var(--dsa-wc-input-on-layer-text-field-input-color);
   }
 
-  .select--error.select--on-layer:not(.select--disabled) .select__combobox {
+  .select--on-layer.select--error:not(.select--disabled) .select__combobox {
     background-color: var(--dsa-wc-input-on-layer-background-color-error);
     border-color: var(--dsa-wc-input-on-layer-border-color-error);
   }
 
-  .select--error.select--on-layer:hover:not(.select--disabled)
+  .select--on-layer.select--error:hover:not(.select--disabled)
     .select__combobox {
     border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
   }
@@ -328,8 +328,8 @@ var select_styles_default = css`
     font-size: var(--dsa-wc-select-icon-size);
   }
 
-  :not(.select--disabled) .select__clear:hover,
-  :not(.select--disabled) .select__expand-icon:hover {
+  .select:not(.select--disabled) .select__clear:hover,
+  .select:not(.select--disabled) .select__expand-icon:hover {
     color: var(--dsa-wc-input-icon-color-hover);
   }