@ds-autonomie/web-components 2.18.0 → 2.19.0

package/dist/chunks/{chunk.AECIJYFZ.js → chunk.Q4BEX42U.js}

@@ -1,12 +1,12 @@
 import {
   select_styles_default
-} from "./chunk.ACM36IFE.js";
+} from "./chunk.WAEFCPAX.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
 import {
   DSATag
-} from "./chunk.A6WS4GML.js";
+} from "./chunk.KPVDLRVV.js";
 import {
   FormControlLayout
 } from "./chunk.RVUUZ3KA.js";
@@ -35,7 +35,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";
@@ -60,6 +60,7 @@ var DSASelect = class extends FormControlLayout {
       assumeInteractionOn: ["dsa-blur", "dsa-input"]
     });
     this.localize = new LocalizeController(this);
+    this.allOptions = [];
     this.typeToSelectString = "";
     this.hasFocus = false;
     this.displayLabel = "";
@@ -90,6 +91,9 @@ var DSASelect = class extends FormControlLayout {
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
     this.open = false;
   }
+  firstUpdated() {
+    this.handleDefaultSlotChange();
+  }
   addOpenListeners() {
     document.addEventListener("focusin", this.handleDocumentFocusIn);
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
@@ -153,8 +157,7 @@ var DSASelect = class extends FormControlLayout {
       return;
     }
     if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
-      const allOptions = this.getAllOptions();
-      const currentIndex = this.currentOption ? allOptions.indexOf(this.currentOption) : -1;
+      const currentIndex = this.currentOption ? this.allOptions.indexOf(this.currentOption) : -1;
       let newIndex = Math.max(0, currentIndex);
       event.preventDefault();
       if (!this.open) {
@@ -163,19 +166,18 @@ var DSASelect = class extends FormControlLayout {
           return;
         }
       }
-      if (event.key === "ArrowDown" && currentIndex < allOptions.length - 1) {
+      if (event.key === "ArrowDown" && currentIndex < this.allOptions.length - 1) {
         newIndex = currentIndex + 1;
       } else if (event.key === "ArrowUp" && currentIndex > 0) {
         newIndex = currentIndex - 1;
       } else if (event.key === "Home") {
         newIndex = 0;
       } else if (event.key === "End") {
-        newIndex = allOptions.length - 1;
+        newIndex = this.allOptions.length - 1;
       }
-      this.setCurrentOption(allOptions[newIndex]);
+      this.setCurrentOption(this.allOptions[newIndex]);
     }
     if (event.key.length === 1 || event.key === "Backspace") {
-      const allOptions = this.getAllOptions();
       if (event.metaKey || event.ctrlKey || event.altKey) {
         return;
       }
@@ -197,7 +199,7 @@ var DSASelect = class extends FormControlLayout {
       } else {
         this.typeToSelectString += event.key.toLowerCase();
       }
-      for (const option of allOptions) {
+      for (const option of this.allOptions) {
         const label = option.getTextLabel().toLowerCase();
         if (label.startsWith(this.typeToSelectString)) {
           this.setCurrentOption(option);
@@ -266,16 +268,18 @@ var DSASelect = class extends FormControlLayout {
     }
   }
   handleDefaultSlotChange() {
-    const allOptions = this.getAllOptions();
+    this.refreshOptionsCache();
     const value = Array.isArray(this.value) ? this.value : [this.value];
-    const values = [];
     if (customElements.get("dsa-option")) {
-      allOptions.forEach((option) => {
-        option.multiple = this.multiple;
-        values.push(option.value);
+      this.allOptions.forEach((option) => {
+        if (option.multiple !== this.multiple) {
+          option.multiple = this.multiple;
+        }
       });
       this.setSelectedOptions(
-        allOptions.filter((el) => el.value !== "" && value.includes(el.value))
+        this.allOptions.filter(
+          (el) => el.value !== "" && value.includes(el.value)
+        )
       );
     } else {
       customElements.whenDefined("dsa-option").then(() => this.handleDefaultSlotChange());
@@ -302,21 +306,29 @@ var DSASelect = class extends FormControlLayout {
     }
   }
   // Gets an array of all <dsa-option> elements
-  getAllOptions() {
-    return [...this.querySelectorAll("dsa-option")];
+  refreshOptionsCache() {
+    this.allOptions = [...this.querySelectorAll("dsa-option")];
   }
   // Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
   // option may be "current" at a time.
   setCurrentOption(option) {
-    const allOptions = this.getAllOptions();
-    allOptions.forEach((el) => {
-      el.current = false;
-      el.tabIndex = -1;
-    });
+    const previousOption = this.currentOption;
+    if (previousOption && previousOption !== option) {
+      if (previousOption.current) {
+        previousOption.current = false;
+      }
+      if (previousOption.tabIndex !== -1) {
+        previousOption.tabIndex = -1;
+      }
+    }
     if (option) {
       this.currentOption = option;
-      option.current = true;
-      option.tabIndex = 0;
+      if (!option.current) {
+        option.current = true;
+      }
+      if (option.tabIndex !== 0) {
+        option.tabIndex = 0;
+      }
       option.focus();
     } else {
       this.currentOption = void 0;
@@ -324,12 +336,14 @@ var DSASelect = class extends FormControlLayout {
   }
   // Sets the selected option(s)
   setSelectedOptions(option) {
-    const allOptions = this.getAllOptions();
     const newSelectedOptions = Array.isArray(option) ? option : [option];
-    allOptions.forEach((el) => el.selected = false);
-    if (newSelectedOptions.length) {
-      newSelectedOptions.forEach((el) => el.selected = true);
-    }
+    const selectedOptionsSet = new Set(newSelectedOptions);
+    this.allOptions.forEach((el) => {
+      const shouldBeSelected = selectedOptionsSet.has(el);
+      if (el.selected !== shouldBeSelected) {
+        el.selected = shouldBeSelected;
+      }
+    });
     this.selectionChanged();
   }
   // Toggles an option's selected state
@@ -345,7 +359,7 @@ var DSASelect = class extends FormControlLayout {
   // value, and the display value
   selectionChanged() {
     var _a, _b, _c, _d;
-    this.selectedOptions = this.getAllOptions().filter((el) => el.selected);
+    this.selectedOptions = this.allOptions.filter((el) => el.selected);
     if (this.multiple) {
       this.value = this.selectedOptions.map((el) => el.value);
       this.displayLabel = "";
@@ -374,10 +388,12 @@ var DSASelect = class extends FormControlLayout {
     }
   }
   handleValueChange() {
-    const allOptions = this.getAllOptions();
+    this.refreshOptionsCache();
     const value = Array.isArray(this.value) ? this.value : [this.value];
     this.setSelectedOptions(
-      allOptions.filter((el) => el.value !== "" && value.includes(el.value))
+      this.allOptions.filter(
+        (el) => el.value !== "" && value.includes(el.value)
+      )
     );
   }
   async handleOpenChange() {

package/dist/chunks/{chunk.HPAWBSR5.js → chunk.Q7YCE4UA.js}

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

package/dist/chunks/{chunk.ABJLUGLR.js → chunk.QKUUHXNR.js}

@@ -4,6 +4,10 @@ import {
 import {
   wrapIndex
 } from "./chunk.HV63L5BF.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   DSAVisuallyHidden
 } from "./chunk.JIN6PGAK.js";
@@ -142,10 +146,14 @@ var DSARadioGroup = class extends ShoelaceElement {
     if (this.disabled || this.readonly) {
       return;
     }
-    const focusableRadios = this.getAllRadios().filter(
+    const allRadios = this.getAllRadios();
+    const focusableRadios = allRadios.filter(
       (radio) => !this.disabled && !radio.disabled && (!radio.readonly || radio.checked)
     );
     const focusableRadiosLength = focusableRadios.length;
+    if (focusableRadiosLength === 0) {
+      return;
+    }
     const focusedRadioIndex = focusableRadios.findIndex(
       (t) => t.matches(":focus")
     );
@@ -153,12 +161,19 @@ var DSARadioGroup = class extends ShoelaceElement {
     const oldValue = this.value;
     let index = focusedRadioIndex + incr;
     index = wrapIndex(index, focusableRadiosLength);
-    this.getAllRadios().forEach((radio) => {
-      radio.checked = false;
+    allRadios.forEach((radio) => {
+      if (radio.checked) {
+        radio.checked = false;
+      }
       if (this.hasRadioButtons || this.hasRadioCards) {
-        radio.button.tabIndex = -1;
+        const button = radio.button;
+        if (button.tabIndex !== -1) {
+          button.tabIndex = -1;
+        }
       } else {
-        radio.tabIndex = -1;
+        if (radio.tabIndex !== -1) {
+          radio.tabIndex = -1;
+        }
       }
     });
     if (incr === 0) {
@@ -188,20 +203,25 @@ var DSARadioGroup = class extends ShoelaceElement {
   handleSlotChange() {
     if (customElements.get("dsa-radio") || customElements.get("dsa-radio-button") || customElements.get("dsa-radio-card")) {
       const radios = this.getAllRadios();
-      let hasAtLeastOneCheckedRadio = false;
+      this.readonlyRadioButtonValue.clear();
       radios.forEach((radio) => {
-        radio.error = this.error;
+        if (radio.error !== this.error) {
+          radio.error = this.error;
+        }
         if (this.required) {
-          radio.setAttribute("aria-required", "true");
+          setAttributeIfDifferent(radio, "aria-required", "true");
         } else {
-          radio.removeAttribute("aria-required");
+          removeAttributeIfPresent(radio, "aria-required");
         }
         if ((this.hasRadioButtons || this.hasRadioCards) && radio.readonly) {
           this.readonlyRadioButtonValue.set(radio.value, true);
         }
-        hasAtLeastOneCheckedRadio = radio.checked || hasAtLeastOneCheckedRadio;
-        radio.parentDisabled = this.disabled;
-        radio.parentReadonly = this.readonly;
+        if (radio.parentDisabled !== this.disabled) {
+          radio.parentDisabled = this.disabled;
+        }
+        if (radio.parentReadonly !== this.readonly) {
+          radio.parentReadonly = this.readonly;
+        }
       });
       this.updateCheckedRadio();
     } else {
@@ -221,15 +241,21 @@ var DSARadioGroup = class extends ShoelaceElement {
     const radios = this.getAllRadios();
     radios.forEach((radio) => {
       var _a;
-      radio.checked = radio.value === this.value;
+      const shouldBeChecked = radio.value === this.value;
+      if (radio.checked !== shouldBeChecked) {
+        radio.checked = shouldBeChecked;
+      }
       if (!this.value && this.required) {
-        radio.setAttribute("aria-invalid", "true");
+        setAttributeIfDifferent(radio, "aria-invalid", "true");
       } else {
-        radio.removeAttribute("aria-invalid");
+        removeAttributeIfPresent(radio, "aria-invalid");
       }
       if (this.hasRadioButtons || this.hasRadioCards) {
         const radioButton = radio;
-        radioButton.readonly = (_a = this.readonlyRadioButtonValue.get(this.value)) != null ? _a : radioButton.readonly;
+        const nextReadonly = (_a = this.readonlyRadioButtonValue.get(this.value)) != null ? _a : radioButton.readonly;
+        if (radioButton.readonly !== nextReadonly) {
+          radioButton.readonly = nextReadonly;
+        }
       }
     });
     this.updateTabIndexes();
@@ -258,10 +284,16 @@ var DSARadioGroup = class extends ShoelaceElement {
         customElements.whenDefined(
           this.hasRadioButtons ? "dsa-radio-button" : "dsa-radio-card"
         ).then(() => {
-          radioButton.button.tabIndex = shouldFocus ? 0 : -1;
+          const tabIndexValue = shouldFocus ? 0 : -1;
+          if (radioButton.button.tabIndex !== tabIndexValue) {
+            radioButton.button.tabIndex = tabIndexValue;
+          }
         });
       } else {
-        radio.tabIndex = shouldFocus ? 0 : -1;
+        const tabIndexValue = shouldFocus ? 0 : -1;
+        if (radio.tabIndex !== tabIndexValue) {
+          radio.tabIndex = tabIndexValue;
+        }
       }
     });
   }
@@ -271,17 +303,25 @@ var DSARadioGroup = class extends ShoelaceElement {
     }
   }
   handleErrorChange() {
-    this.getAllRadios().forEach((radio) => radio.error = this.error);
+    this.getAllRadios().forEach((radio) => {
+      if (radio.error !== this.error) {
+        radio.error = this.error;
+      }
+    });
   }
   handleDisabledChange() {
-    this.getAllRadios().forEach(
-      (radio) => radio.parentDisabled = this.disabled
-    );
+    this.getAllRadios().forEach((radio) => {
+      if (radio.parentDisabled !== this.disabled) {
+        radio.parentDisabled = this.disabled;
+      }
+    });
   }
   handleReadonlyChange() {
-    this.getAllRadios().forEach(
-      (radio) => radio.parentReadonly = this.readonly
-    );
+    this.getAllRadios().forEach((radio) => {
+      if (radio.parentReadonly !== this.readonly) {
+        radio.parentReadonly = this.readonly;
+      }
+    });
     this.updateTabIndexes();
   }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */

package/dist/chunks/{chunk.T3CLPVPE.js → chunk.QUEYKUIS.js}

@@ -1,15 +1,15 @@
 import {
   DSAInputTime
-} from "./chunk.6JFNUOJL.js";
+} from "./chunk.M47KXEXM.js";
 import {
   DSAInputNative
-} from "./chunk.WDPZ4NSH.js";
+} from "./chunk.V4SDZV6L.js";
 import {
   DSAInputDate
-} from "./chunk.63ACYDSJ.js";
+} from "./chunk.YI6BUIUL.js";
 import {
   DSAInputAmount
-} from "./chunk.BO3GUSFS.js";
+} from "./chunk.TCW77JY3.js";
 import {
   InputBase
 } from "./chunk.WMFEJDPX.js";

package/dist/chunks/{chunk.XJCHW2GZ.js → chunk.RG7MUNLM.js}

@@ -5,12 +5,16 @@ import {
 import {
   header_styles_default
 } from "./chunk.QAYPY3FQ.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -67,26 +71,32 @@ var DSAHeader = class extends ShoelaceElement {
     }
     return cnsaLogoSvg(this.localize.term("cnsaGoToHomepage"));
   }
+  getHeaderSearch() {
+    if (!this.hasSlotController.test("search")) {
+      return null;
+    }
+    return this.querySelector("dsa-header-search");
+  }
   handleSearchExpanded() {
-    if (this.hasSlotController.test("search")) {
-      const search = this.querySelector("dsa-header-search");
-      if (!search) return;
-      if (this.searchExpanded) {
-        search.setAttribute("expanded", "true");
-      } else {
-        search.removeAttribute("expanded");
-      }
+    const search = this.getHeaderSearch();
+    if (!search) {
+      return;
+    }
+    if (this.searchExpanded) {
+      setAttributeIfDifferent(search, "expanded", "true");
+    } else {
+      removeAttributeIfPresent(search, "expanded");
     }
   }
   handleMobile() {
-    if (this.hasSlotController.test("search")) {
-      const search = this.querySelector("dsa-header-search");
-      if (!search) return;
-      if (this.mobile) {
-        search.setAttribute("mobile", "true");
-      } else {
-        search.removeAttribute("mobile");
-      }
+    const search = this.getHeaderSearch();
+    if (!search) {
+      return;
+    }
+    if (this.mobile) {
+      setAttributeIfDifferent(search, "mobile", "true");
+    } else {
+      removeAttributeIfPresent(search, "mobile");
     }
   }
   render() {

package/dist/chunks/{chunk.6NRREKDF.js → chunk.RK2WN36C.js}

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

package/dist/chunks/{chunk.ZZ67C4V2.js → chunk.RZRBWZ7K.js}

@@ -1,9 +1,13 @@
 import {
   radio_styles_default
-} from "./chunk.ANOLAL4B.js";
+} from "./chunk.BUGXYS34.js";
 import {
   DSAInternalRadioIcon
 } from "./chunk.GUKOZGE3.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -36,10 +40,11 @@ var DSARadio = class extends ShoelaceElement {
     this.handleClick = this.handleClick.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.addEventListeners();
-    this.setAttribute("role", "radio");
+    setAttributeIfDifferent(this, "role", "radio");
   }
   disconnectedCallback() {
     this.removeEventListeners();
+    super.disconnectedCallback();
   }
   addEventListeners() {
     this.addEventListener("blur", this.handleBlur);
@@ -66,13 +71,17 @@ var DSARadio = class extends ShoelaceElement {
     this.emit("dsa-focus");
   }
   handleCheckedChange() {
-    this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    setAttributeIfDifferent(
+      this,
+      "aria-checked",
+      this.checked ? "true" : "false"
+    );
   }
   handleDeactivatedChange() {
     if (this.disabled || this.readonly || this.parentDisabled || this.parentReadonly) {
-      this.setAttribute("aria-disabled", "true");
+      setAttributeIfDifferent(this, "aria-disabled", "true");
     } else {
-      this.removeAttribute("aria-disabled");
+      removeAttributeIfPresent(this, "aria-disabled");
     }
   }
   render() {

package/dist/chunks/{chunk.QZC7F7NX.js → chunk.SAKI57GG.js}

@@ -21,7 +21,7 @@ import {
 } from "./chunk.DJLJEQST.js";
 import {
   DSAAlert
-} from "./chunk.M5X6QE4H.js";
+} from "./chunk.ERMNNF77.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -30,7 +30,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.H7L4YNKB.js → chunk.SAQFLKP7.js}

@@ -1,12 +1,16 @@
 import {
   option_styles_default
-} from "./chunk.7NJP4D2X.js";
+} from "./chunk.LLOSO7FC.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   DSAVisuallyHidden
 } from "./chunk.JIN6PGAK.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
 } from "./chunk.CKJJ4MSU.js";
@@ -39,14 +43,19 @@ var DSAOption = class extends ShoelaceElement {
     this.role = "option";
     this.multiple = false;
   }
+  syncSelectionAriaAttribute() {
+    const attributeName = this.role === "option" ? "aria-selected" : "aria-checked";
+    setAttributeIfDifferent(
+      this,
+      attributeName,
+      this.selected ? "true" : "false"
+    );
+    const oppositeAttributeName = attributeName === "aria-selected" ? "aria-checked" : "aria-selected";
+    removeAttributeIfPresent(this, oppositeAttributeName);
+  }
   connectedCallback() {
     super.connectedCallback();
-    if (this.role === "option") {
-      this.setAttribute("aria-selected", "false");
-    } else {
-      this.setAttribute("aria-checked", "false");
-      this.removeAttribute("aria-selected");
-    }
+    this.syncSelectionAriaAttribute();
   }
   handleDefaultSlotChange() {
     const textLabel = this.getTextLabel();
@@ -64,22 +73,34 @@ var DSAOption = class extends ShoelaceElement {
     }
   }
   handleMouseEnter() {
-    this.hasHover = true;
+    if (!this.hasHover) {
+      this.hasHover = true;
+    }
   }
   handleMouseLeave() {
-    this.hasHover = false;
+    if (this.hasHover) {
+      this.hasHover = false;
+    }
   }
   handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    setAttributeIfDifferent(
+      this,
+      "aria-disabled",
+      this.disabled ? "true" : "false"
+    );
   }
   handleSelectedChange() {
-    this.setAttribute(
-      this.role === "option" ? "aria-selected" : "aria-checked",
-      this.selected ? "true" : "false"
-    );
+    this.syncSelectionAriaAttribute();
+  }
+  handleRoleChange() {
+    this.syncSelectionAriaAttribute();
   }
   handleErrorChange() {
-    this.setAttribute("aria-invalid", this.error ? "true" : "false");
+    setAttributeIfDifferent(
+      this,
+      "aria-invalid",
+      this.error ? "true" : "false"
+    );
   }
   handleValueChange() {
     if (typeof this.value !== "string") {
@@ -202,6 +223,9 @@ __decorateClass([
 __decorateClass([
   watch("selected")
 ], DSAOption.prototype, "handleSelectedChange", 1);
+__decorateClass([
+  watch("role")
+], DSAOption.prototype, "handleRoleChange", 1);
 __decorateClass([
   watch("error")
 ], DSAOption.prototype, "handleErrorChange", 1);