@ds-autonomie/web-components 1.16.0 → 1.16.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @ds-autonomie/web-components
 
+## 1.16.2
+
+### Patch Changes
+
+- 7172de3: `textarea` : application du style readonly
+- b1cd757: `select`, `combobox`, `filter-select` : améliorations a11y
+- c16da8c: `pagination` : possibilité de personnaliser le aria-label de l'élément `<nav>`
+- 97c7af4: `footer` : affichage du séparateur des mentions obligatoires seulement si les 2 slots ont du contenu
+- 7883203: `accordion`: changement de l'apparence au survol et focus
+- 16213d8: `alert` : restitution des alertes apparaissant suite à action utilisateur
+- 7b49078: `dialog` : prise en compte de l'attribut `no-header`
+
+## 1.16.1
+
+### Patch Changes
+
+- d06ec5a: `radio-group`, `radio-button` : mis à jour du tabindex des boutons lorsque l'un d'entre eux est désactivé dynamiquement
+- f6cffa4: `select`, `combobox` : suppression de la boucle sur les éléments de la liste
+- e6db13e: `checkbox`: ajout d'un attribut `for` sur le label
+- c0da8f9: `step` : suppression de l'imagevide pour les étapes avec un état par défaut
+- 1128755: `combobox`: effacement du champ lorsque la valeur est supprimée
+- cc201ca: `checkbox-group` : ajout des checkbox dans une liste non ordonnée
+- e990316: `table-of-contents`: possibilité d'utiliser des données dynamiques
+- b08a940: `input`, `input-mask`, `input-phone`, `textarea` : changement de l'emplacement de `aria-invalid`
+- 5b1d9eb: `card`, `navbar`, `table-of-contents`: amélioration a11y, suppression de l'attribut `aria-label` de l'élément `card`
+
 ## 1.16.0
 
 ### Minor Changes

package/dist/chunks/{chunk.AWHBPZCA.js → chunk.2UZSRWJ7.js}

@@ -54,7 +54,7 @@ var combobox_styles_default = css`
       var(--dsa-wc-transition-fast) box-shadow,
       var(--dsa-wc-transition-fast) background-color;
     border-radius: var(--dsa-wc-input-border-radius);
-    padding: var(--dsa-wc-input-padding);
+    padding: var(--dsa-wc-select-padding);
   }
 
   .select__display-input {
@@ -71,6 +71,10 @@ var combobox_styles_default = css`
     -webkit-appearance: none;
   }
 
+  .select__display-input::placeholder {
+    color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
+  }
+
   .select__display-input:focus {
     outline: none;
   }
@@ -107,8 +111,9 @@ var combobox_styles_default = css`
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    margin-inline-start: var(--dsa-wc-combobox-tag-margin-inline-start);
+    margin-inline-start: var(--dsa-wc-multiselect-tag-margin-inline-start);
     min-width: 0;
+    order: -1;
   }
 
   .select__tags dsa-tag {
@@ -117,21 +122,11 @@ var combobox_styles_default = css`
   }
 
   .select__tags dsa-tag::part(base) {
-    background: var(--dsa-wc-combobox-tag-background) !important;
-    color: var(--dsa-wc-combobox-tag-color) !important;
-    border: solid 1px var(--dsa-wc-combobox-tag-border-color);
-    border-radius: var(--dsa-wc-combobox-tag-border-radius);
-    padding: 0 var(--dsa-wc-combobox-tag-padding-inline);
-  }
-
-  .select--error .select__tags dsa-tag::part(base) {
-    background: var(--dsa-wc-combobox-tag-error-background) !important;
-    color: var(--dsa-wc-combobox-tag-error-color) !important;
-    border: solid 1px var(--dsa-wc-combobox-tag-error-border-color);
-  }
-
-  .select--error .select__tags dsa-tag::part(remove-button) {
-    color: var(--dsa-wc-combobox-tag-error-color) !important;
+    background: var(--dsa-wc-multiselect-tag-background) !important;
+    color: var(--dsa-wc-multiselect-tag-color) !important;
+    border: solid 1px var(--dsa-wc-multiselect-tag-border-color);
+    border-radius: var(--dsa-wc-multiselect-tag-border-radius);
+    padding: 0 var(--dsa-wc-multiselect-tag-padding-inline);
   }
 
   .select--disabled .select__tags,
@@ -260,6 +255,7 @@ var combobox_styles_default = css`
   /* Sizes */
   .select--small .select__combobox {
     font: var(--dsa-wc-combobox-input-font-small);
+    min-height: var(--dsa-wc-form-input-height-small);
   }
 
   .select--small.select--multiple:not(.select--placeholder-visible)
@@ -274,6 +270,7 @@ var combobox_styles_default = css`
 
   .select--medium .select__combobox {
     font: var(--dsa-wc-combobox-input-font);
+    min-height: var(--dsa-wc-form-input-height);
   }
 
   .select--medium.select--multiple:not(.select--placeholder-visible)
@@ -286,7 +283,9 @@ var combobox_styles_default = css`
     gap: 3px;
   }
   .select--large .select__combobox {
+    padding-block: 3px;
     font: var(--dsa-wc-combobox-input-font-large);
+    min-height: var(--dsa-wc-form-input-height-large);
   }
   .select--large.select--multiple:not(.select--placeholder-visible)
     .select__combobox {

package/dist/chunks/{chunk.MYXTAE6O.js → chunk.43EIYNTL.js}

@@ -37,9 +37,7 @@ var input_phone_styles_default = css`
     height: auto;
   }
 
-  .input-phone--focused:not(.input-phone--disabled):not(
-      .input-phone--readonly
-    ) {
+  .input-phone--focused:not(.input-phone--disabled) {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
   }

package/dist/chunks/{chunk.IJAP6FX7.js → chunk.4DRKFRDB.js}

@@ -43,7 +43,7 @@ var input_mask_styles_default = css`
     color: transparent;
   }
 
-  .input-mask--focused:not(.input-mask--disabled):not(.input-mask--readonly) {
+  .input-mask--focused:not(.input-mask--disabled) {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
   }

package/dist/chunks/{chunk.PXRMLBOK.js → chunk.6FM2GGDB.js}

@@ -24,7 +24,6 @@ var DSANavbar = class extends ShoelaceElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("role", "navigation");
   }
   handleSlotChange() {
     this.getAllChildren().forEach((el) => {

package/dist/chunks/{chunk.PBFXNZVS.js → chunk.6L4HRCFK.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   button_styles_default
-} from "./chunk.XXY24EZH.js";
+} from "./chunk.KZ65ORAL.js";
 import {
   LocalizeController
 } from "./chunk.6L6CZSQX.js";

package/dist/chunks/{chunk.QE5KX6GC.js → chunk.6TASDLIO.js}

@@ -35,10 +35,11 @@ var textarea_styles_default = css`
       var(--dsa-wc-input-on-layer-border-color);
   }
 
-  .textarea--on-layer:hover:not(.textarea--disabled) {
+  .textarea--on-layer:hover:not(.textarea--disabled):not(.textarea--readonly) {
     border-color: var(--dsa-wc-input-on-layer-border-color-hover);
   }
-  .textarea--on-layer:not(.textarea--disabled) .textarea__control {
+  .textarea--on-layer:not(.textarea--disabled):not(.textarea--readonly)
+    .textarea__control {
     color: var(--dsa-wc-input-on-layer-text-field-input-color);
   }
   .textarea--on-layer .textarea__control::placeholder {
@@ -67,7 +68,9 @@ var textarea_styles_default = css`
     background-color: var(--dsa-wc-input-on-layer-background-color-error);
   }
 
-  .textarea--on-layer.textarea--error:hover:not(.textarea--disabled) {
+  .textarea--on-layer.textarea--error:hover:not(.textarea--disabled):not(
+      .textarea--readonly
+    ) {
     border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
   }
   /* On Base textareas */
@@ -78,7 +81,7 @@ var textarea_styles_default = css`
     color: var(--dsa-wc-input-on-base-text-field-input-color);
   }
 
-  .textarea--on-base:hover:not(.textarea--disabled) {
+  .textarea--on-base:hover:not(.textarea--disabled):not(.textarea--readonly) {
     border-color: var(--dsa-wc-input-on-base-border-color-hover);
   }
 
@@ -88,7 +91,13 @@ var textarea_styles_default = css`
     cursor: not-allowed;
   }
 
-  .textarea--on-base:not(.textarea--disabled) .textarea__control {
+  .textarea--on-base.textarea--readonly {
+    background-color: var(--dsa-wc-input-on-base-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-base-read-only-border-color);
+  }
+
+  .textarea--on-base:not(.textarea--disabled):not(.textarea--readonly)
+    .textarea__control {
     color: var(--dsa-wc-input-on-base-text-field-input-color);
   }
   .textarea--on-base .textarea__control::placeholder {
@@ -101,7 +110,9 @@ var textarea_styles_default = css`
     background-color: var(--dsa-wc-input-on-base-background-color-error);
   }
 
-  .textarea--on-base.textarea--error:hover:not(.textarea--disabled) {
+  .textarea--on-base.textarea--error:hover:not(.textarea--disabled):not(
+      .textarea--readonly
+    ) {
     border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
   }
 

package/dist/chunks/{chunk.WFCZZ5Y7.js → chunk.7DHGAM7P.js}

@@ -1,6 +1,6 @@
 import {
   accordion_styles_default
-} from "./chunk.FYTGBKGY.js";
+} from "./chunk.VDOVUA55.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";

package/dist/chunks/{chunk.5JYA7W3U.js → chunk.AMIXGL74.js}

@@ -1,6 +1,6 @@
 import {
   combobox_styles_default
-} from "./chunk.AWHBPZCA.js";
+} from "./chunk.2UZSRWJ7.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -388,6 +388,11 @@ var DSACombobox = class extends ShoelaceElement {
     }
   }
   handleEnterKey(event) {
+    const target = event.target;
+    const isTag = target.closest("dsa-tag") !== null;
+    if (isTag) {
+      return;
+    }
     event.preventDefault();
     event.stopImmediatePropagation();
     if (this.open && this.currentOption !== void 0 && !this.currentOption.disabled) {
@@ -420,13 +425,15 @@ var DSACombobox = class extends ShoelaceElement {
     }
     switch (event.key) {
       case "ArrowDown":
-        newIndex = (currentIndex + 1) % this.filteredOptions.length;
+        if (currentIndex < this.allOptions.length - 1) {
+          newIndex = currentIndex + 1;
+        }
         break;
       case "ArrowUp":
         if (currentIndex === -1) {
-          newIndex = (currentIndex + this.filteredOptions.length) % this.filteredOptions.length;
-        } else {
-          newIndex = (currentIndex - 1 + this.filteredOptions.length) % this.filteredOptions.length;
+          newIndex = 1;
+        } else if (currentIndex > 0) {
+          newIndex = currentIndex - 1;
         }
         break;
       case "Home":
@@ -465,7 +472,7 @@ var DSACombobox = class extends ShoelaceElement {
     this.setSelectedOptions(
       this.allOptions.filter((el) => value.includes(el.value))
     );
-    if (!this.multiple && this.selectedOptions.length > 0) {
+    if (!this.multiple) {
       this.syncOnSelection();
     }
   }
@@ -639,6 +646,41 @@ var DSACombobox = class extends ShoelaceElement {
       "input-container": true
     })}
               >
+                <input
+                  id="input"
+                  part="display-input"
+                  class="select__display-input"
+                  type="text"
+                  .value=${this.displayLabel}
+                  placeholder=${ifDefinedAndNotEmpty(this.placeholder)}
+                  .disabled=${this.disabled}
+                  size=${selectInputWidth}
+                  autocomplete="off"
+                  spellcheck="false"
+                  autocapitalize="off"
+                  title=${ifDefinedAndNotEmpty(this.title)}
+                  aria-controls="listbox"
+                  aria-autocomplete="list"
+                  aria-expanded=${this.open ? "true" : "false"}
+                  aria-haspopup="listbox"
+                  aria-labelledby=${ifDefinedAndNotEmpty(
+      hasLabel ? "label" : void 0
+    )}
+                  aria-label=${ifDefinedAndNotEmpty(
+      hasLabel ? void 0 : this.title
+    )}
+                  aria-disabled=${this.disabled ? "true" : "false"}
+                  aria-describedby=${this.error ? "error-text help-text" : "help-text"}
+                  aria-activedescendant=${(_b = (_a = this.currentOption) == null ? void 0 : _a.id) != null ? _b : ""}
+                  role="combobox"
+                  tabindex="0"
+                  @change=${this.handleChange}
+                  @input=${this.handleInput}
+                  @focus=${this.handleFocus}
+                  @blur=${this.handleBlur}
+                  @invalid=${this.handleInvalid}
+                />
+
                 ${this.multiple && this.value.length > 0 ? html`
                       <div part="tags" class="select__tags">
                         ${this.selectedOptions.map((option, index) => {
@@ -654,7 +696,6 @@ var DSACombobox = class extends ShoelaceElement {
                               "
                                 size=${this.size}
                                 removable
-                                disable-removable-focus
                                 @dsa-remove=${(event) => this.handleTagRemove(event, option)}
                                 label=${option.getTextLabel()}
                               >
@@ -663,7 +704,6 @@ var DSACombobox = class extends ShoelaceElement {
       } else if (index === this.maxOptionsVisible) {
         return html`
                               <dsa-tag
-                                disable-removable-focus
                                 size=${this.size}
                                 label="+${this.selectedOptions.length - index}"
                               >
@@ -675,41 +715,6 @@ var DSACombobox = class extends ShoelaceElement {
     })}
                       </div>
                     ` : ""}
-
-                <input
-                  id="input"
-                  part="display-input"
-                  class="select__display-input"
-                  type="text"
-                  .value=${this.displayLabel}
-                  placeholder=${ifDefinedAndNotEmpty(this.placeholder)}
-                  .disabled=${this.disabled}
-                  size=${selectInputWidth}
-                  autocomplete="off"
-                  spellcheck="false"
-                  autocapitalize="off"
-                  title=${ifDefinedAndNotEmpty(this.title)}
-                  aria-controls="listbox"
-                  aria-autocomplete="list"
-                  aria-expanded=${this.open ? "true" : "false"}
-                  aria-haspopup="listbox"
-                  aria-labelledby=${ifDefinedAndNotEmpty(
-      hasLabel ? "label" : void 0
-    )}
-                  aria-label=${ifDefinedAndNotEmpty(
-      hasLabel ? void 0 : this.title
-    )}
-                  aria-disabled=${this.disabled ? "true" : "false"}
-                  aria-describedby="help-text"
-                  aria-activedescendant=${(_b = (_a = this.currentOption) == null ? void 0 : _a.id) != null ? _b : ""}
-                  role="combobox"
-                  tabindex="0"
-                  @change=${this.handleChange}
-                  @input=${this.handleInput}
-                  @focus=${this.handleFocus}
-                  @blur=${this.handleBlur}
-                  @invalid=${this.handleInvalid}
-                />
               </div>
 
               <input
@@ -794,6 +799,7 @@ var DSACombobox = class extends ShoelaceElement {
         </slot>
 
         ${this.error && !this.disabled ? 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.YCOCNU2O.js → chunk.BAU3732X.js}

@@ -136,8 +136,10 @@ var DSAOption = class extends ShoelaceElement {
           class="option__label"
           @slotchange=${this.handleDefaultSlotChange}
         ></slot>
-        <dsa-visually-hidden>:</dsa-visually-hidden>
-        <span class="option__amount">${this.amount}</span>
+        ${this.amount ? html`
+              <dsa-visually-hidden>:</dsa-visually-hidden>
+              <span class="option__amount">${this.amount}</span>
+            ` : ""}
         <slot part="suffix" name="suffix" class="option__suffix"></slot>
       </div>
     `;

package/dist/chunks/{chunk.WLBRYFBW.js → chunk.BPPQ62GH.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.XXY24EZH.js";
+} from "./chunk.KZ65ORAL.js";
 
 // src/components/pagination-button/pagination-button.styles.ts
 import { css } from "lit";

package/dist/chunks/{chunk.W6M6II3I.js → chunk.BQ7R6MC6.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.XXY24EZH.js";
+} from "./chunk.KZ65ORAL.js";
 
 // src/components/checkbox-button/checkbox-button.styles.ts
 import { css } from "lit";
@@ -8,8 +8,7 @@ var checkbox_button_styles_default = css`
   ${button_styles_default}
 
   .button__prefix,
-  .button__suffix,
-  .button__label {
+  .button__suffix, {
     display: inline-flex;
     position: relative;
     align-items: center;
@@ -116,21 +115,18 @@ var checkbox_button_styles_default = css`
   }
 
   /* Add padding to keep check icon space if in vertical checkbox-group */
-  :host(.dsa-button-group__button--vertical)
-    .button--small:not(.button--checked)
-    .button__label {
-    padding-right: 16px;
-  }
-  :host(.dsa-button-group__button--vertical)
-    .button--medium:not(.button--checked)
-    .button__label {
-    padding-right: 18px;
-  }
-  :host(.dsa-button-group__button--vertical)
-    .button--large:not(.button--checked)
-    .button__label {
+
+  .button--small:not(.button--checked) .button__label {
+    padding-right: 22px;
+  }
+
+  .button--medium:not(.button--checked) .button__label {
     padding-right: 20px;
   }
+
+  .button--large:not(.button--checked) .button__label {
+    padding-right: 24px;
+  }
 `;
 
 export {

package/dist/chunks/{chunk.M6LJDR7Y.js → chunk.CKBRIIGV.js}

@@ -233,24 +233,26 @@ var DSADialog = class extends ShoelaceElement {
           aria-labelledby=${ifDefined(!this.noHeader ? "title" : void 0)}
           tabindex="0"
         >
-          <header part="header" class="dialog__header">
-            <h1 part="title" class="dialog__title" id="title">
-              <slot name="label">
-                ${this.label.length > 0 ? this.label : String.fromCharCode(65279)}
-              </slot>
-            </h1>
-            <div part="header-actions" class="dialog__header-actions">
-              <slot name="header-actions"></slot>
-              <dsa-icon-button
-                part="close-button"
-                exportparts="base:close-button__base"
-                class="dialog__close"
-                name="close"
-                label=${this.localize.term("close")}
-                @click="${() => this.requestClose("close-button")}"
-              ></dsa-icon-button>
-            </div>
-          </header>
+          ${!this.noHeader ? html`
+                <header part="header" class="dialog__header">
+                  <h1 part="title" class="dialog__title" id="title">
+                    <slot name="label">
+                      ${this.label.length > 0 ? this.label : String.fromCharCode(65279)}
+                    </slot>
+                  </h1>
+                  <div part="header-actions" class="dialog__header-actions">
+                    <slot name="header-actions"></slot>
+                    <dsa-icon-button
+                      part="close-button"
+                      exportparts="base:close-button__base"
+                      class="dialog__close"
+                      name="close"
+                      label=${this.localize.term("close")}
+                      @click="${() => this.requestClose("close-button")}"
+                    ></dsa-icon-button>
+                  </div>
+                </header>
+              ` : ""}
           <div class="dialog__body-container" tabindex="0">
             <slot part="body" class="dialog__body"></slot>
           </div>