@ds-autonomie/web-components 2.18.0 → 2.20.0

package/dist/chunks/{chunk.64EGGLHL.js → chunk.QWPEXQZX.js}

@@ -35,9 +35,8 @@ var menu_item_styles_default = css`
   .menu-item--highlight::after {
     content: '';
     position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
+    inset-block: 0;
+    inset-inline-start: 0;
     width: 4px;
     background-color: var(--dsa-wc-menu-navigation-item-current-color);
   }
@@ -82,31 +81,26 @@ var menu_item_styles_default = css`
     cursor: not-allowed;
   }
 
-  .menu-item .menu-item__label {
+  .menu-item__label {
     flex: 1 1 auto;
     display: inline-flex;
   }
 
-  .menu-item .menu-item__prefix {
+  .menu-item__prefix,
+  .menu-item__suffix {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
   }
 
-  .menu-item .menu-item__prefix::slotted(*) {
+  .menu-item__prefix::slotted(*) {
     margin-inline-end: var(--dsa-wc-menu-item-margin-inline-end);
     display: inherit;
     height: 1.25em;
     width: 1.25em;
   }
 
-  .menu-item .menu-item__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .menu-item .menu-item__suffix::slotted(*) {
+  .menu-item__suffix::slotted(*) {
     margin-inline-start: var(--dsa-wc-menu-item-margin-inline-start);
     display: inherit;
   }

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.UKH2D4DL.js → chunk.RPOIITDC.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.JIN6PGAK.js";
 import {
   DSAErrorText
-} from "./chunk.5NSAEDEE.js";
+} from "./chunk.M2QIFDAP.js";
 import {
   renderFormElementErrors
 } from "./chunk.6QDM5FUA.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.RIMN7NRW.js → chunk.RRR5BCCP.js}

@@ -3,28 +3,28 @@ import {
 } from "./chunk.2LB4AUIL.js";
 import {
   DSAInput
-} from "./chunk.T3CLPVPE.js";
+} from "./chunk.IRBKALXJ.js";
 import {
   FilterBase
-} from "./chunk.X6SEIMM4.js";
+} from "./chunk.IRPNCLE5.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
-import {
-  normalizeStr
-} from "./chunk.FLRB45SF.js";
 import {
   DSAOption
-} from "./chunk.H7L4YNKB.js";
+} from "./chunk.NPMNFNR7.js";
 import {
   DSAVisuallyHidden
 } from "./chunk.JIN6PGAK.js";
 import {
   DSAButton
-} from "./chunk.UNDVQ2N3.js";
+} from "./chunk.B6XSS23Y.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
+import {
+  normalizeStr
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -50,6 +50,8 @@ var DSAFilterSelect = class extends FilterBase {
     this.nbOptions = 0;
     this.seeAll = false;
     this.debounceTimerId = null;
+    this.optionsByValue = /* @__PURE__ */ new Map();
+    this.normalizedLabelsByValue = /* @__PURE__ */ new Map();
     this.value = "";
     this.multiple = false;
     this.maxVisibleListLength = 5;
@@ -64,6 +66,13 @@ var DSAFilterSelect = class extends FilterBase {
     this.nbOptions = this.allOptions.length;
     this.filterOptions();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.debounceTimerId !== null) {
+      clearTimeout(this.debounceTimerId);
+      this.debounceTimerId = null;
+    }
+  }
   handleKeyDown(event) {
     super.handleKeyDown(event);
     const path = event.composedPath();
@@ -142,16 +151,16 @@ var DSAFilterSelect = class extends FilterBase {
           () => this.filterTrigger.focus({ preventScroll: true })
         );
         this.hide();
-        this.filterTrigger.focus({ preventScroll: true });
       }
     }
   }
   filterOptions() {
     if (this.searchValue.length > 0) {
+      const normalizedSearchValue = normalizeStr(this.searchValue);
       this.displayedOptions = this.allOptions.filter((option) => {
-        return normalizeStr(option.innerText).includes(
-          normalizeStr(this.searchValue)
-        );
+        var _a;
+        const normalizedLabel = (_a = this.normalizedLabelsByValue.get(option.value)) != null ? _a : normalizeStr(option.innerText);
+        return normalizedLabel.includes(normalizedSearchValue);
       });
     } else if (!this.seeAll && this.maxVisibleListLength > 0) {
       this.displayedOptions = this.allOptions.slice(
@@ -198,6 +207,8 @@ var DSAFilterSelect = class extends FilterBase {
   getAllOptions() {
     const optionsNodeList = this.querySelectorAll(OPTION_TAG);
     const allOptions = [];
+    this.optionsByValue.clear();
+    this.normalizedLabelsByValue.clear();
     optionsNodeList.forEach((option) => {
       option.role = this.multiple ? "checkbox" : "radio";
       const clonedOption = option.cloneNode(true);
@@ -207,6 +218,11 @@ var DSAFilterSelect = class extends FilterBase {
       clonedOption.classList.add("filter-select__option");
       clonedOption.onfocus = this.handleOptionFocus.bind(this);
       allOptions.push(clonedOption);
+      this.optionsByValue.set(option.value, option);
+      this.normalizedLabelsByValue.set(
+        option.value,
+        normalizeStr(clonedOption.innerText)
+      );
     });
     return allOptions;
   }
@@ -231,17 +247,22 @@ var DSAFilterSelect = class extends FilterBase {
     this.allOptions.forEach((el) => el.selected = false);
     if (newSelectedOptions.length) {
       newSelectedOptions.forEach((el) => {
+        const rootOption = this.optionsByValue.get(el.value);
+        if (!rootOption) {
+          return;
+        }
         el.selected = true;
-        this.allOptions.find(
-          (rootOption) => rootOption.value === el.value
-        ).selected = true;
+        rootOption.selected = true;
       });
     }
     this.selectionChanged();
   }
   // Toggles an option's selected state
   toggleOptionSelection(option, force) {
-    const rootOption = this.allOptions.find((el) => el.value === option.value);
+    const rootOption = this.optionsByValue.get(option.value);
+    if (!rootOption) {
+      return;
+    }
     if (force === true || force === false) {
       rootOption.selected = force;
     } else {
@@ -254,8 +275,9 @@ var DSAFilterSelect = class extends FilterBase {
     var _a, _b;
     this.selectedOptions = this.allOptions.filter((el) => el.selected);
     this.filterOptions();
+    const selectedValues = new Set(this.selectedOptions.map((el) => el.value));
     this.displayedOptions.forEach((option) => {
-      option.selected = this.selectedOptions.map((el) => el.value).includes(option.value);
+      option.selected = selectedValues.has(option.value);
     });
     if (this.multiple) {
       this.value = this.selectedOptions.map((el) => el.value);

package/dist/chunks/{chunk.5T4IWZR2.js → chunk.SC6ST3JE.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -151,6 +151,7 @@ var DSAInternalDateField = class extends ShoelaceElement {
     this.lastPressedKey = "";
     this.internalValueChange = false;
     this.previousTentativeDate = "";
+    this.previousSpinbuttonValue = /* @__PURE__ */ new WeakMap();
     this.parentName = "";
     this.description = "";
     this.name = "";
@@ -237,10 +238,11 @@ var DSAInternalDateField = class extends ShoelaceElement {
     const tentativeDate = `${tempSelectedYear}-${tempSelectedMonth}-${tempSelectedDay}`;
     const allFilled = tempSelectedDay !== "" && tempSelectedMonth !== "" && tempSelectedYear !== "";
     const allEmpty = tempSelectedDay === "" && tempSelectedMonth === "" && tempSelectedYear === "";
+    const isTentativeDateValid = isValidDate(tentativeDate);
     if (allEmpty) {
       this.setCustomValidity("");
       this.value = "";
-    } else if (!isValidDate(tentativeDate)) {
+    } else if (!isTentativeDateValid) {
       this.setCustomValidity(this.localize.term("invalidDate"));
       this.value = "";
     } else {
@@ -249,7 +251,7 @@ var DSAInternalDateField = class extends ShoelaceElement {
     }
     this.internalValueChange = true;
     this.formControlController.updateValidity();
-    if (!isValidDate(tentativeDate)) {
+    if (!isTentativeDateValid) {
       this.formControlController.emitInvalidEvent(event);
     }
     if (this.value !== previousValue || tentativeDate !== this.previousTentativeDate && (allFilled || allEmpty)) {
@@ -274,6 +276,7 @@ var DSAInternalDateField = class extends ShoelaceElement {
   }
   handleSpinbuttonKeydown(event2) {
     const currentInput = event2.currentTarget;
+    this.previousSpinbuttonValue.set(currentInput, currentInput.value);
     this.lastPressedKey = event2.key;
     if (event2.key === "Dead") {
       currentInput.blur();
@@ -298,12 +301,17 @@ var DSAInternalDateField = class extends ShoelaceElement {
     }
   }
   handleSpinbuttonInput(event2) {
+    var _a;
     event2.stopPropagation();
     const currentTarget = event2.currentTarget;
+    const previousSpinbuttonValue = (_a = this.previousSpinbuttonValue.get(currentTarget)) != null ? _a : "";
     if (Number(currentTarget.value) > Number(currentTarget.max)) {
-      currentTarget.value = currentTarget.value.slice(-1);
+      const shouldKeepPreviousValue = currentTarget === this.yearInput && previousSpinbuttonValue !== "";
+      currentTarget.value = shouldKeepPreviousValue ? previousSpinbuttonValue : currentTarget.value.slice(-1);
       event2.preventDefault();
-      this.focusNextSpinbutton(currentTarget);
+      if (!shouldKeepPreviousValue) {
+        this.focusNextSpinbutton(currentTarget);
+      }
     }
     if (currentTarget.value !== "") {
       currentTarget.value = parseInt(currentTarget.value).toString();
@@ -323,7 +331,8 @@ var DSAInternalDateField = class extends ShoelaceElement {
         this.selectedYear = currentTarget.value;
         break;
     }
-    if (!["ArrowUp", "ArrowDown"].includes(this.lastPressedKey) && Number(`${currentTarget.value}0`) > Number(currentTarget.max)) {
+    const shouldMoveToNextBecauseLeadingZero = currentTarget !== this.yearInput && previousSpinbuttonValue === "00" && currentTarget.value !== "00" && currentTarget.value.startsWith("0");
+    if (!["ArrowUp", "ArrowDown"].includes(this.lastPressedKey) && (shouldMoveToNextBecauseLeadingZero || Number(`${currentTarget.value}0`) > Number(currentTarget.max))) {
       this.focusNextSpinbutton(currentTarget);
     }
     this.setCustomValidity("");
@@ -370,14 +379,10 @@ var DSAInternalDateField = class extends ShoelaceElement {
       this.selectedMonth = "";
       this.selectedYear = "";
     } else {
-      this.selectedDay = `${getDateFromISO(this.value).getDate()}`.padStart(
-        2,
-        "0"
-      );
-      this.selectedMonth = `${getDateFromISO(this.value).getMonth() + 1}`.padStart(2, "0");
-      this.selectedYear = `${getDateFromISO(
-        this.value
-      ).getFullYear()}`.padStart(4, "0");
+      const parsedDate = getDateFromISO(this.value);
+      this.selectedDay = `${parsedDate.getDate()}`.padStart(2, "0");
+      this.selectedMonth = `${parsedDate.getMonth() + 1}`.padStart(2, "0");
+      this.selectedYear = `${parsedDate.getFullYear()}`.padStart(4, "0");
     }
     await this.updateComplete;
     this.setCustomValidity("");

package/dist/chunks/{chunk.CFBX4SXO.js → chunk.SEMHY47B.js}

@@ -1,6 +1,6 @@
 import {
   footer_mandatory_mentions_styles_default
-} from "./chunk.K27SKJCO.js";
+} from "./chunk.74CLWWSO.js";
 import {
   DSADivider
 } from "./chunk.QGI766JC.js";

package/dist/chunks/{chunk.6TDKZD7U.js → chunk.SUX4XQKB.js}

@@ -1,12 +1,12 @@
 import {
   DSATableRow
-} from "./chunk.DMQJ4GLL.js";
+} from "./chunk.5WXGUCD2.js";
 import {
   DSATableHeaderCell
-} from "./chunk.TURUUPFG.js";
+} from "./chunk.EDEPWRFC.js";
 import {
   table_header_row_styles_default
-} from "./chunk.WLP7MATK.js";
+} from "./chunk.VO73SGIU.js";
 import {
   DSAVisuallyHidden
 } from "./chunk.JIN6PGAK.js";
@@ -58,6 +58,18 @@ var DSATableHeaderRow = class extends DSATableRow {
       </dsa-table-header-cell>
     `;
   }
+  renderReorderButton() {
+    if (!this.reorderable) {
+      return html``;
+    }
+    return html`
+      <dsa-table-header-cell aria-hidden=${this.loading}>
+        <dsa-visually-hidden>
+          ${this.localize.term("reorderTableRowsHeader")}
+        </dsa-visually-hidden>
+      </dsa-table-header-cell>
+    `;
+  }
 };
 DSATableHeaderRow.styles = table_header_row_styles_default;
 DSATableHeaderRow.dependencies = __spreadProps(__spreadValues({}, DSATableRow.dependencies), {

package/dist/chunks/{chunk.QKT5LLDM.js → chunk.T4XADGK3.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.J476JEKY.js → chunk.T7O6NKFH.js}

@@ -42,7 +42,7 @@ var DSANavbarLink = class extends ShoelaceElement {
       "navbar-link--desktop": !this.mobile
     })}
         href=${this.href}
-        target="${ifDefined(this.target)}"
+        target=${ifDefined(this.target)}
         rel=${ifDefined(this.rel)}
         aria-current=${ifDefinedAndNotEmpty(this.current)}
         @focus=${this.handleFocus}

package/dist/chunks/{chunk.63ACYDSJ.js → chunk.TGQQJI2E.js}

@@ -1,18 +1,18 @@
 import {
   input_date_styles_default
-} from "./chunk.UHF3BDIM.js";
+} from "./chunk.M2RDCDKZ.js";
 import {
   InputBase
-} from "./chunk.WMFEJDPX.js";
+} from "./chunk.DE3HY2DW.js";
 import {
   DSAInternalDateField
-} from "./chunk.5T4IWZR2.js";
+} from "./chunk.SC6ST3JE.js";
 import {
   DSAPopup
 } from "./chunk.GYWU4AAB.js";
 import {
   DSACalendar
-} from "./chunk.5A6XLOZY.js";
+} from "./chunk.DN3K2GHZ.js";
 import {
   formatDateRange,
   getDateFromISO,
@@ -21,7 +21,7 @@ import {
 } from "./chunk.OYVF3HNG.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.MWPOWC6N.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -35,7 +35,10 @@ import {
 } from "./chunk.HPDCOGLH.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
+import {
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -125,9 +128,14 @@ var DSAInputDate = class extends InputBase {
     this.shouldDisableDate = this.shouldDisableDate.bind(this);
   }
   async firstUpdated() {
-    var _a;
     await this.updateComplete;
-    (_a = this.datepickerButton) == null ? void 0 : _a.button.setAttribute("aria-expanded", "false");
+    if (this.datepickerButton) {
+      setAttributeIfDifferent(
+        this.datepickerButton.button,
+        "aria-expanded",
+        "false"
+      );
+    }
     this.formControlController.updateValidity();
   }
   addOpenListeners() {
@@ -298,7 +306,11 @@ var DSAInputDate = class extends InputBase {
       this.addOpenListeners();
       await stopAnimations(this);
       this.popup.active = true;
-      this.datepickerButton.button.setAttribute("aria-expanded", "true");
+      setAttributeIfDifferent(
+        this.datepickerButton.button,
+        "aria-expanded",
+        "true"
+      );
       const { keyframes, options } = getAnimation(this, "date-popup.show", {
         dir: this.localize.dir()
       });
@@ -309,7 +321,11 @@ var DSAInputDate = class extends InputBase {
       this.removeOpenListeners();
       await stopAnimations(this);
       this.popup.active = false;
-      this.datepickerButton.button.setAttribute("aria-expanded", "false");
+      setAttributeIfDifferent(
+        this.datepickerButton.button,
+        "aria-expanded",
+        "false"
+      );
       this.datepickerButton.focus({ preventScroll: true });
       const { keyframes, options } = getAnimation(this, "date-popup.hide", {
         dir: this.localize.dir()

package/dist/chunks/{chunk.KIN7BJ2S.js → chunk.TILFUJJ2.js}

@@ -17,7 +17,6 @@ var progress_ring_styles_default = css`
     gap: var(--dsa-wc-progress-bar-small-gap);
     height: var(--size);
   }
-
   .progress-ring.progress-ring--medium {
     --size: var(--dsa-wc-progress-bar-size);
     --track-width: var(--dsa-wc-progress-bar-track-width);
@@ -39,6 +38,7 @@ var progress_ring_styles_default = css`
     rotate: -90deg;
     transform-origin: 50% 50%;
     flex-shrink: 0;
+    will-change: transform;
   }
 
   .progress-ring__track,
@@ -57,18 +57,17 @@ var progress_ring_styles_default = css`
     stroke: var(--dsa-wc-progress-ring-track-color);
     stroke-width: var(--track-width);
   }
-
   .progress-ring__indicator {
     stroke: var(--dsa-wc-progress-ring-content-color);
     stroke-width: var(--indicator-width);
     stroke-linecap: round;
-    transition-property: stroke-dashoffset;
-    transition-duration: var(--indicator-transition-duration);
+    transition: stroke-dashoffset var(--indicator-transition-duration);
     stroke-dasharray: var(--circumference) var(--circumference);
     /* stylelint-disable-next-line */
     stroke-dashoffset: calc(
       var(--circumference) - var(--percentage) * var(--circumference)
     );
+    will-change: stroke-dashoffset;
   }
 
   .progress-ring__label {