@ds-autonomie/web-components 1.16.0 → 1.16.2

package/dist/chunks/{chunk.4D4BPJPS.js → chunk.CWHNW2T5.js}

@@ -1,6 +1,6 @@
 import {
   checkbox_group_styles_default
-} from "./chunk.ZPNMHACP.js";
+} from "./chunk.QEVAFNHA.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -36,6 +36,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     this.customValidityMessage = "";
     this.hasCheckboxButtons = false;
     this.defaultValue = [];
+    this.allCheckboxes = [];
     this.label = "";
     this.helpText = "";
     this.name = "option";
@@ -76,13 +77,38 @@ var DSACheckboxGroup = class extends ShoelaceElement {
   }
   firstUpdated() {
     this.formControlController.updateValidity();
+    this.allCheckboxes = this.getAllCheckboxes();
+    this.observeAttributeChanges();
+  }
+  // A change of attributes on the slotted elements does not trigger the "slotchange" event, so we add an observer
+  observeAttributeChanges() {
+    const observer = new MutationObserver((mutationsList) => {
+      mutationsList.forEach((mutation) => {
+        if (mutation.type === "attributes") {
+          this.allCheckboxes = this.getAllCheckboxes();
+        }
+      });
+    });
+    [...this.defaultSlot.assignedElements({ flatten: true })].forEach(
+      (element) => {
+        observer.observe(element, { attributes: true });
+      }
+    );
   }
   getAllCheckboxes() {
-    return [
-      ...this.querySelectorAll(
-        "dsa-checkbox, dsa-checkbox-button"
-      )
-    ];
+    const checboxNodeList = this.querySelectorAll("dsa-checkbox, dsa-checkbox-button");
+    const allCheckboxes = [];
+    checboxNodeList.forEach((checkbox) => {
+      const clonedCheckbox = checkbox.cloneNode(true);
+      if (this.disabled) {
+        clonedCheckbox.disabled = true;
+      }
+      if (this.readonly) {
+        clonedCheckbox.readonly = true;
+      }
+      allCheckboxes.push(clonedCheckbox);
+    });
+    return allCheckboxes;
   }
   handleCheckboxClick(event) {
     if (event.target.tagName.toLowerCase() === "a") {
@@ -98,7 +124,6 @@ var DSACheckboxGroup = class extends ShoelaceElement {
       return;
     }
     const oldValue = this.value;
-    const checkboxes = this.getAllCheckboxes();
     if (!oldValue.includes(target.value)) {
       this.value = [...this.value, target.value];
     } else {
@@ -106,7 +131,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
         (checkboxValue) => checkboxValue !== target.value
       );
     }
-    checkboxes.forEach((checkbox) => {
+    this.allCheckboxes.forEach((checkbox) => {
       checkbox.checked = this.value.includes(checkbox.value);
     });
     this.emit("dsa-input");
@@ -123,7 +148,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
         return;
       }
       target.checked = !target.checked;
-      const checkedCheckboxes = this.getAllCheckboxes().filter(
+      const checkedCheckboxes = this.allCheckboxes.filter(
         (checkbox) => checkbox.checked
       );
       this.value = checkedCheckboxes.map((checkbox) => checkbox.value);
@@ -132,7 +157,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     }
   }
   handleLabelClick() {
-    const availableCheckboxes = this.getAllCheckboxes().filter(
+    const availableCheckboxes = this.allCheckboxes.filter(
       (checkbox) => !checkbox.disabled && !checkbox.readonly
     );
     const checkboxToFocus = availableCheckboxes.find((checkbox) => checkbox.checked) || availableCheckboxes[0];
@@ -143,8 +168,8 @@ var DSACheckboxGroup = class extends ShoelaceElement {
   handleSlotChange() {
     var _a;
     if (customElements.get("dsa-checkbox") || customElements.get("dsa-checkbox-button")) {
-      const checkboxes = this.getAllCheckboxes();
-      checkboxes.forEach((checkbox) => {
+      this.allCheckboxes = this.getAllCheckboxes();
+      this.allCheckboxes.forEach((checkbox) => {
         if (this.disabled) {
           checkbox.disabled = true;
         }
@@ -153,7 +178,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
         }
         checkbox.checked = this.value.includes(checkbox.value);
       });
-      this.hasCheckboxButtons = checkboxes.some(
+      this.hasCheckboxButtons = this.allCheckboxes.some(
         (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-button"
       );
       if (this.hasCheckboxButtons) {
@@ -164,6 +189,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
           buttonGroup.disableRole = true;
         }
       }
+      this.observeAttributeChanges();
     } else {
       customElements.whenDefined("dsa-checkbox").then(() => this.handleSlotChange());
       customElements.whenDefined("dsa-checkbox-button").then(() => this.handleSlotChange());
@@ -174,8 +200,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     this.formControlController.emitInvalidEvent(event);
   }
   updateCheckedCheckbox() {
-    const checkboxes = this.getAllCheckboxes();
-    checkboxes.forEach(
+    this.allCheckboxes.forEach(
       (checkbox) => checkbox.checked = this.value.includes(checkbox.value)
     );
     this.formControlController.setValidity(this.validity.valid);
@@ -279,26 +304,32 @@ var DSACheckboxGroup = class extends ShoelaceElement {
             </label>
           </div>
 
-          ${this.hasCheckboxButtons ? html`
-                <dsa-internal-button-group
-                  part="button-group"
-                  exportparts="base:button-group__base"
-                  @click=${this.handleCheckboxClick}
-                  @slotchange=${this.handleSlotChange}
-                  role="presentation"
-                  ?horizontal=${this.horizontal}
+          <div class="checkbox-group__list-container">
+            <div
+              role="list"
+              class=${classMap({
+      "form-control__options": true,
+      "checkbox-group__list--checkbox-buttons": this.hasCheckboxButtons
+    })}
+              @click=${this.handleCheckboxClick}
+              @keydown=${this.handleKeyDown}
+            >
+              ${this.allCheckboxes.map(
+      (checkbox) => html` <div
+                  part="form-control-options"
+                  class="checkbox-group__listitem"
+                  role="listitem"
                 >
-                  <slot></slot>
-                </dsa-internal-button-group>
-              ` : html`
-                <slot
-                  @click=${this.handleCheckboxClick}
-                  @slotchange=${this.handleSlotChange}
-                  @keydown=${this.handleKeyDown}
-                  role="presentation"
-                  class="form-control__options"
-                ></slot>
-              `}
+                  ${checkbox}
+                </div>`
+    )}
+            </div>
+          </div>
+          <slot
+            @click=${this.handleCheckboxClick}
+            @slotchange=${this.handleSlotChange}
+            class="checkbox-group__default-slot"
+          ></slot>
         </div>
         <slot
           name="help-text"
@@ -333,6 +364,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSACheckboxGroup.prototype, "defaultValue", 2);
+__decorateClass([
+  state()
+], DSACheckboxGroup.prototype, "allCheckboxes", 2);
 __decorateClass([
   property()
 ], DSACheckboxGroup.prototype, "label", 2);

package/dist/chunks/{chunk.EXL2RATE.js → chunk.EAP74BQL.js}

@@ -1,6 +1,6 @@
 import {
   DSASelect
-} from "./chunk.SEDCBZRC.js";
+} from "./chunk.PNTPO2DN.js";
 import {
   frenchFlagOption,
   frenchFlagSelect,
@@ -17,7 +17,7 @@ import {
 } from "./chunk.65HTBW2L.js";
 import {
   input_phone_styles_default
-} from "./chunk.MYXTAE6O.js";
+} from "./chunk.43EIYNTL.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -244,13 +244,6 @@ var DSAInputPhone = class extends ShoelaceElement {
     await this.updateComplete;
     this.formControlController.updateValidity();
   }
-  handleErrorChange() {
-    if (this.error) {
-      this.setAttribute("aria-invalid", "true");
-    } else {
-      this.removeAttribute("aria-invalid");
-    }
-  }
   /** Sets focus on the input. */
   focus(options) {
     this.inputEl.focus(options);
@@ -431,6 +424,7 @@ var DSAInputPhone = class extends ShoelaceElement {
       hasLabel ? void 0 : this.title
     )}
             aria-describedby=${this.error ? "input-phone error-text help-text" : "input-phone help-text"}
+            aria-invalid=${ifDefined(this.error ? "true" : void 0)}
             @change=${this.handleChange}
             @keyup=${this.handleDocumentKeyUp}
             @keydown=${this.handleKeyDown}
@@ -564,9 +558,6 @@ __decorateClass([
 __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], DSAInputPhone.prototype, "handleValueChange", 1);
-__decorateClass([
-  watch("error")
-], DSAInputPhone.prototype, "handleErrorChange", 1);
 DSAInputPhone = __decorateClass([
   customElement("dsa-input-phone")
 ], DSAInputPhone);

package/dist/chunks/{chunk.VFWCJMJG.js → chunk.IDAQJSVV.js}

@@ -36,6 +36,7 @@ var DSAAlert = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
+    this.title = "";
     this.open = false;
     this.closable = false;
     this.variant = "primary";
@@ -147,9 +148,10 @@ var DSAAlert = class extends ShoelaceElement {
   }
   render() {
     return html`
-      <div
-        part="base"
-        class=${classMap({
+      <div role="alert">
+        <div
+          part="base"
+          class=${classMap({
       alert: true,
       "alert--open": this.open,
       "alert--closable": this.closable,
@@ -159,31 +161,31 @@ var DSAAlert = class extends ShoelaceElement {
       "alert--warning": this.variant === "warning",
       "alert--danger": this.variant === "danger"
     })}
-        role="alert"
-        aria-hidden=${this.open ? "false" : "true"}
-        @mousemove=${this.handleMouseMove}
-      >
-        <dsa-icon
-          class="alert__icon"
-          name=${this.getPrefixIconName()}
-        ></dsa-icon>
-        <div class="alert__text">
-          <div class="alert__title">${this.title}</div>
-          <slot part="message" class="alert__message" aria-live="polite"></slot>
-        </div>
+          aria-hidden=${this.open ? "false" : "true"}
+          @mousemove=${this.handleMouseMove}
+        >
+          <dsa-icon
+            class="alert__icon"
+            name=${this.getPrefixIconName()}
+          ></dsa-icon>
+          <div class="alert__text">
+            <div class="alert__title">${this.title}</div>
+            <slot part="message" class="alert__message"></slot>
+          </div>
 
-        <slot part="actions" class="alert__action" name="action"></slot>
+          <slot part="actions" class="alert__action" name="action"></slot>
 
-        ${this.closable ? html`
-              <dsa-icon-button
-                part="close-button"
-                class="alert__close-button"
-                size="xlarge"
-                name="close"
-                label=${this.localize.term("close")}
-                @click=${this.handleCloseClick}
-              ></dsa-icon-button>
-            ` : ""}
+          ${this.closable ? html`
+                <dsa-icon-button
+                  part="close-button"
+                  class="alert__close-button"
+                  size="xlarge"
+                  name="close"
+                  label=${this.localize.term("close")}
+                  @click=${this.handleCloseClick}
+                ></dsa-icon-button>
+              ` : ""}
+        </div>
       </div>
     `;
   }
@@ -192,6 +194,9 @@ DSAAlert.styles = alert_styles_default;
 __decorateClass([
   query('[part~="base"]')
 ], DSAAlert.prototype, "base", 2);
+__decorateClass([
+  property()
+], DSAAlert.prototype, "title", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAAlert.prototype, "open", 2);

package/dist/chunks/{chunk.EOOFG4A2.js → chunk.JHPIOVRD.js}

@@ -21,6 +21,7 @@ import {
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 var DSAStep = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
@@ -47,7 +48,7 @@ var DSAStep = class extends ShoelaceElement {
         return this.localize.term("stepError");
       case "default":
       default:
-        return this.localize.term("step");
+        return void 0;
     }
   }
   render() {
@@ -80,11 +81,12 @@ var DSAStep = class extends ShoelaceElement {
         >
           ${this.status === "in-progress" || this.status === "active" ? html`<span class="step-icon--in-progress"
                 ><dsa-visually-hidden>${stepLabel}</dsa-visually-hidden></span
-              >` : html`<dsa-icon
+              >` : ""}
+          ${this.status === "complete" || this.status === "error" ? html`<dsa-icon
                 class="step-icon"
-                name="${stepIconName}"
-                label=${stepLabel}
-              ></dsa-icon>`}
+                name="${ifDefined(stepIconName)}"
+                label=${ifDefined(stepLabel)}
+              ></dsa-icon>` : ""}
         </div>
 
         <div class="step-content-container">

package/dist/chunks/{chunk.IT6MNAIC.js → chunk.KKAOTWJY.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.XXY24EZH.js";
+} from "./chunk.KZ65ORAL.js";
 
 // src/components/radio-button/radio-button.styles.ts
 import { css } from "lit";
@@ -8,8 +8,7 @@ var radio_button_styles_default = css`
   ${button_styles_default}
 
   .button__prefix,
-  .button__suffix,
-  .button__label {
+  .button__suffix {
     display: inline-flex;
     position: relative;
     align-items: center;

package/dist/chunks/{chunk.XXY24EZH.js → chunk.KZ65ORAL.js}

@@ -78,6 +78,8 @@ var button_styles_default = css`
 
   .button__label {
     display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .button__label::slotted(dsa-icon) {
@@ -1058,11 +1060,6 @@ var button_styles_default = css`
   :host(.dsa-button-group__button--vertical) {
     max-width: 400px;
   }
-  :host(.dsa-button-group__button--vertical) .button__label {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
 `;
 
 export {

package/dist/chunks/{chunk.ZVIBE4XH.js → chunk.MJ3ZLDHO.js}

@@ -1,6 +1,9 @@
 import {
   footer_mandatory_mentions_styles_default
 } from "./chunk.G4ODEI4O.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -12,11 +15,19 @@ import {
 import { html } from "lit";
 import { customElement } from "lit/decorators.js";
 var DSAFooterMandatoryMentions = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "text-left",
+      "text-right"
+    );
+  }
   render() {
     return html`
       <div part="base">
         <slot part="text-left" name="text-left"></slot>
-        <dsa-divider part="divider" vertical></dsa-divider>
+        ${this.hasSlotController.test("text-left") && this.hasSlotController.test("text-right") ? html`<dsa-divider part="divider" vertical></dsa-divider>` : ""}
         <slot part="text-right" name="text-right"></slot>
       </div>
     `;

package/dist/chunks/{chunk.3BQTEMB3.js → chunk.MWQ3CXZP.js}

@@ -1,6 +1,6 @@
 import {
   pagination_button_styles_default
-} from "./chunk.WLBRYFBW.js";
+} from "./chunk.BPPQ62GH.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";

package/dist/chunks/{chunk.UDXQ2LSX.js → chunk.MXDA7QXL.js}

@@ -27,7 +27,6 @@ var DSACard = class extends ShoelaceElement {
     );
     this.href = "";
     this.rel = "noreferrer noopener";
-    this.ariaLabel = "";
   }
   isLink() {
     return this.href ? true : false;
@@ -49,7 +48,6 @@ var DSACard = class extends ShoelaceElement {
         target=${ifDefined(isLink ? this.target : void 0)}
         download=${ifDefined(isLink ? this.download : void 0)}
         rel=${ifDefined(isLink ? this.rel : void 0)}
-        aria-label=${ifDefined(isLink ? this.ariaLabel : void 0)}
       >
         <slot name="header" part="header" class="card__header"></slot>
         <slot name="image" part="image" class="card__image"></slot>
@@ -75,9 +73,6 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSACard.prototype, "download", 2);
-__decorateClass([
-  property({ attribute: "aria-label" })
-], DSACard.prototype, "ariaLabel", 2);
 DSACard = __decorateClass([
   customElement("dsa-card")
 ], DSACard);

package/dist/chunks/{chunk.XGAVBPJO.js → chunk.MZF7MK5G.js}

@@ -120,7 +120,7 @@ var table_of_contents_styles_default = css`
     }
   }
 
-  .slotted_items {
+  [part='items'] {
     display: none;
   }
 `;

package/dist/chunks/{chunk.I7SW3V2A.js → chunk.NXQ42SSB.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.YOLAIUYX.js";
 import {
   DSAOption
-} from "./chunk.YCOCNU2O.js";
+} from "./chunk.BAU3732X.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";

package/dist/chunks/{chunk.SEDCBZRC.js → chunk.PNTPO2DN.js}

@@ -1,6 +1,6 @@
 import {
   select_styles_default
-} from "./chunk.ULHEP5Y6.js";
+} from "./chunk.ZWVWEQGL.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -125,8 +125,8 @@ var DSASelect = class extends ShoelaceElement {
   handleKeyDown(event) {
     const target = event.target;
     const isClearButton = target.closest(".select__clear") !== null;
-    const isIconButton = target.closest("dsa-icon-button") !== null;
-    if (isClearButton || isIconButton) {
+    const isTag = target.closest("dsa-tag") !== null;
+    if (isClearButton || isTag) {
       return;
     }
     if (this.open && (event.key === "Tab" || event.key === "Escape")) {
@@ -172,14 +172,10 @@ var DSASelect = class extends ShoelaceElement {
           return;
         }
       }
-      if (event.key === "ArrowDown") {
+      if (event.key === "ArrowDown" && currentIndex < allOptions.length - 1) {
         newIndex = currentIndex + 1;
-        if (newIndex > allOptions.length - 1)
-          newIndex = 0;
-      } else if (event.key === "ArrowUp") {
+      } else if (event.key === "ArrowUp" && currentIndex > 0) {
         newIndex = currentIndex - 1;
-        if (newIndex < 0)
-          newIndex = allOptions.length - 1;
       } else if (event.key === "Home") {
         newIndex = 0;
       } else if (event.key === "End") {
@@ -558,7 +554,7 @@ var DSASelect = class extends ShoelaceElement {
                 class="select__display-input"
                 type="text"
                 placeholder=${this.placeholder}
-                .disabled=${isDisabledOrReadonly}
+                .disabled=${this.disabled}
                 .value=${this.displayValue ? this.value : this.displayLabel}
                 size=${ifDefined(selectInputWidth)}
                 autocomplete="off"
@@ -576,7 +572,7 @@ var DSASelect = class extends ShoelaceElement {
       hasLabel ? void 0 : this.title
     )}
                 aria-disabled=${isDisabledOrReadonly ? "true" : "false"}
-                aria-describedby="help-text"
+                aria-describedby=${this.error ? "error-text help-text" : "help-text"}
                 role="combobox"
                 tabindex="0"
                 @focus=${this.handleFocus}
@@ -598,7 +594,6 @@ var DSASelect = class extends ShoelaceElement {
                               "
                               size=${this.size}
                               removable
-                              disable-removable-focus
                               @dsa-remove=${(event) => this.handleTagRemove(event, option)}
                               label=${option.getTextLabel()}
                             >
@@ -607,7 +602,6 @@ var DSASelect = class extends ShoelaceElement {
       } else if (index === this.maxOptionsVisible) {
         return html`
                             <dsa-tag
-                              disable-removable-focus
                               size=${this.size}
                               label="+${this.selectedOptions.length - index}"
                             >
@@ -676,6 +670,7 @@ var DSASelect = class extends ShoelaceElement {
         </slot>
 
         ${this.error && !isDisabledOrReadonly ? html`<dsa-error-text
+              id="error-text"
               part="form-control-error-text"
               class="form-control__error-text"
               >${this.errorMessage}</dsa-error-text

package/dist/chunks/{chunk.352FP4B2.js → chunk.QDXCYEAZ.js}

@@ -1,6 +1,6 @@
 import {
   input_mask_styles_default
-} from "./chunk.IJAP6FX7.js";
+} from "./chunk.4DRKFRDB.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,
@@ -167,13 +167,6 @@ var DSAInputMask = class extends ShoelaceElement {
     await this.updateComplete;
     this.formControlController.updateValidity();
   }
-  handleErrorChange() {
-    if (this.error) {
-      this.setAttribute("aria-invalid", "true");
-    } else {
-      this.removeAttribute("aria-invalid");
-    }
-  }
   /** Sets focus on the input. */
   focus(options) {
     this.input.focus(options);
@@ -309,6 +302,7 @@ var DSAInputMask = class extends ShoelaceElement {
       hasLabel ? void 0 : this.title
     )}
               aria-describedby=${this.error ? "input-mask error-text help-text" : "input-mask help-text"}
+              aria-invalid=${ifDefined(this.error ? "true" : void 0)}
               @change=${this.handleChange}
               @invalid=${this.handleInvalid}
               @keyup=${this.handleDocumentKeyUp}
@@ -444,9 +438,6 @@ __decorateClass([
 __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], DSAInputMask.prototype, "handleValueChange", 1);
-__decorateClass([
-  watch("error")
-], DSAInputMask.prototype, "handleErrorChange", 1);
 DSAInputMask = __decorateClass([
   customElement("dsa-input-mask")
 ], DSAInputMask);

package/dist/chunks/{chunk.ZPNMHACP.js → chunk.QEVAFNHA.js}

@@ -26,6 +26,32 @@ var checkbox_group_styles_default = css`
     white-space: nowrap;
     border: 0;
   }
+
+  .checkbox-group__default-slot {
+    display: none;
+  }
+
+  .checkbox-group__list-container {
+    display: inline-block;
+  }
+  .form-control__options.checkbox-group__list--checkbox-buttons {
+    gap: var(--dsa-spacing-8);
+  }
+
+  :not(.form-control--options-horizontal)
+    .checkbox-group__list--checkbox-buttons {
+    flex-wrap: wrap;
+    min-width: 120px;
+    max-width: 400px;
+  }
+
+  .checkbox-group__listitem {
+    display: contents;
+  }
+
+  :not(form-control--options-horizontal) dsa-checkbox-button {
+    max-width: 400px;
+  }
 `;
 
 export {

package/dist/chunks/{chunk.T3EUQIE2.js → chunk.RG342A22.js}

@@ -156,6 +156,7 @@ var DSACheckbox = class extends ShoelaceElement {
     })}
       >
         <label
+          for="input"
           class=${classMap({
       checkbox: true,
       "checkbox--checked": this.checked,
@@ -171,6 +172,7 @@ var DSACheckbox = class extends ShoelaceElement {
     })}
         >
           <input
+            id="input"
             class="checkbox__input"
             type="checkbox"
             title=${ifDefinedAndNotEmpty(this.title)}