@ds-autonomie/web-components 2.0.0-alpha.1 → 2.1.0

package/CHANGELOG.md

@@ -1,22 +1,73 @@
 # @ds-autonomie/web-components
 
-## 2.0.0-alpha.1
+## 2.1.0
+
+### Minor Changes
+
+- 8dbb5e8: `download-card`: déplacement des attributs annexes dans le lien pour les lecteurs d'écran
+  `download-link`: déplacement des attributs annexes dans le lien pour les lecteurs d'écran
+- 2a6ce52: `callout` : remplacement de l'attribut `title` (déprécié) par `callout-title`; `button`, `checkbox` : remplacement des attributs `title` et `aria-label` (dépréciés) par `accessible-name`
+- 11314ee: `header`: ajout d'un attribut permettant de choisir la taille du logo
+  `header-search`: ajout d'un attribut permettant de rendre le composant dans un état ouvert permanent
+- 5f6d3f2: `header-search` : ajout d'un attribut `mobile`
+- ffea5ba: `tab` : ajout de l'attribut close-button-label
+- 2bc49cb: `header` : ajout d'un slot pour le premier logo
+- 151414f: `dialog`: ajout d'un attribut permettant de cacher le titre du header
+
+### Patch Changes
+
+- 5045b7d: `alert`: changement de l'attribut aria-live vers "polite"
+- ba1513b: `input-phone`: ajustement espaces
+- f2e90b5: Adaptation des stories pour améliorer les tests Chromatic
+- ba7b276: `menu-navigation`, `filter-select` : retouches a11y
+- c2407d7: `filter-select` : possibilité de changer d'option avec les flèches du clavier
+- 44be976: `radio-group`, `checkbox-group` : permettre de cacher le label (si redondant)
+
+## 2.0.1
+
+### Patch Changes
+
+- 1e04608: Publication de la version 2
+
+## 2.0.0
 
 ### Major Changes
 
-- 956a8e7: `header`: ajout d'un attribut "mobile" qui détermine son mode d'affichage et remplace les media queries. Sa valeur doit être gérée côté implémentation.
+- 0beedbc: `menu` : suppression du composant dsa-menu (à remplacer par dsa-menu-navigation, qui suit le pattern "disclosure"); `menu-item` : suppression des types "normal" et "checkbox" (le type par défaut est maintenant "button")
+- 0bb4296: `cdn` : possibilité d'utiliser le package via CDN. L'organisation du package a dûe être modifiée, ce qui implique une modification de certains chemins d'import pour les utilisateurs.
+- beb2103: `header`: ajout d'un attribut "mobile" qui détermine son mode d'affichage et remplace les media queries. Sa valeur doit être gérée côté implémentation.
   `footer`: idem
 
-## 2.0.0-alpha.0
+### Patch Changes
+
+- ae56569: `menu-navigation`: ajout d'un attribut role="list" pour l'a11y
+  `menu-item`: ajout d'un attribut role="listitem" pour l'a11y
+- 9042d35: `divider`: retrait du role par défaut, ajout de aria-hidden
+- dff4b70: Mise à jour des dépendances
 
-### Major Changes
+## 1.23.0
+
+### Minor Changes
 
-- e578297: `menu` : suppression du composant dsa-menu (à remplacer par dsa-menu-navigation, qui suit le pattern "disclosure"); `menu-item` : suppression des types "normal" et "checkbox" (le type par défaut est maintenant "button")
-- 0e4c4aa: `cdn` : possibilité d'utiliser le package via CDN. L'organisation du package a dûe être modifiée, ce qui implique une modification de certains chemins d'import pour les utilisateurs.
+- d72ea56: `file-upload`: ajout de la possibilité d'importer un dossier complet
+- 3f12bad: `link css class`: ajout d'une classe css pour les icones en suffixe
+- 1e7e67c: `download-card`: ajout d'un attribut permettant de renommer le document téléchargé
+  `download-link`: ajout d'un attribut permettant de renommer le document téléchargé
+- 6657b26: `button` : ajout d'un mode "toggle" (bouton à basculement)
+  `icon-button` : ajout d'un mode "toggle" (bouton à basculement)
+- ef5fce3: `divers composants`: utilisation de la librairie système pour les icônes
 
 ### Patch Changes
 
-- ad7e31b: Mise à jour des dépendances
+- cba1830: `input-mask`: `patternMismatch` à `false` quand aucune valeur n'est saisie
+- d171346: `radio`: correction d'une couleur rendant le bouton invisible en contraste élevé
+- e3b59b9: `tab` : correction de la largeur d'onglet avec un contenu custom
+- 1367806: `step` : (a11y) amélioration de la restitution des étapes cliquables
+- 498ea04: Communalisation de code pour les éléments de formulaire
+- ef44b36: `select`: ne pas sélectionner une option si son attribut `value` est vide
+- 02bd2c2: `radio-group`, `checkbox-group`: communalisation du code
+- 3f84296: `tab` : (a11y) déplacement du tabindex sur le host
+- 6a17f31: `input-phone`: mise à jour de la valeur après chaque entrée
 
 ## 1.22.2
 

package/cdn/chunks/{chunk.H5G3WI2I.js → chunk.3OPTPDM7.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.LBT6FNPI.js";
 import {
   LocalizeController
-} from "./chunk.X7X3LESZ.js";
+} from "./chunk.ZLWLHLBC.js";
 import {
   ShoelaceElement,
   t

package/cdn/chunks/{chunk.INJMH4ID.js → chunk.3PW6CC5R.js}

@@ -18,16 +18,16 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.X7X3LESZ.js";
+} from "./chunk.ZLWLHLBC.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
 import {
   o
 } from "./chunk.YQLIIKLI.js";
 import {
   e as e2
 } from "./chunk.IKHG7XGO.js";
-import {
-  watch
-} from "./chunk.4FQJ3QJK.js";
 import {
   ShoelaceElement,
   e,

package/cdn/chunks/{chunk.QTUCYPM5.js → chunk.3TUFAITJ.js}

@@ -4,6 +4,7 @@ var icons = {
   add_box: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z"/></svg>`,
   arrow_upward: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`,
   calendar_today: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z"/></svg>`,
+  cancel: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>`,
   check: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>`,
   chevron_left: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/></svg>`,
   chevron_right: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>`,
@@ -24,6 +25,23 @@ var icons = {
   error_outline: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>`,
   expand_more: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>`,
   filter_list: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>`,
+  french_flag: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <g clip-path="url(#clip0_24022_31892)">
+    <rect x="0.25" y="0.25" width="23.5" height="23.5" rx="1.75" fill="white" stroke="#F5F5F5" stroke-width="0.5"/>
+    <mask id="mask0_24022_31892" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+      <rect x="0.25" y="0.25" width="23.5" height="23.5" rx="1.75" fill="white" stroke="white" stroke-width="0.5"/>
+    </mask>
+    <g mask="url(#mask0_24022_31892)">
+      <rect x="16" width="8" height="24" fill="#F44653"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 24H8V0H0V24Z" fill="#1035BB"/>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="clip0_24022_31892">
+      <rect width="24" height="24" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>`,
   horizontal_rule: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4 11h16v2H4z"/></svg>`,
   indeterminate_check_box: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 11h10v2H7z"/></svg>`,
   info: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>`,

package/cdn/chunks/{chunk.ZSVXKM24.js → chunk.45JVH3EU.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.X3MRO4MI.js";
 import {
   LocalizeController
-} from "./chunk.X7X3LESZ.js";
+} from "./chunk.ZLWLHLBC.js";
 import {
   ShoelaceElement,
   e,

package/cdn/chunks/{chunk.BLYM2Y2T.js → chunk.5AFQZ4HE.js}

@@ -1,6 +1,6 @@
 import {
   FormToggleButton
-} from "./chunk.RSUDGY7S.js";
+} from "./chunk.J3A7VDK5.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.IWLB2I5P.js → chunk.5BF76EO7.js}

@@ -1,15 +1,15 @@
 import {
   option_styles_default
-} from "./chunk.VR6U4JFG.js";
+} from "./chunk.CUCCBQJX.js";
 import {
   LocalizeController
-} from "./chunk.X7X3LESZ.js";
-import {
-  e as e2
-} from "./chunk.IKHG7XGO.js";
+} from "./chunk.ZLWLHLBC.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
 import {
   ShoelaceElement,
   e,

package/cdn/chunks/{chunk.7LNFF4Z7.js → chunk.5BL6KECM.js}

@@ -4,19 +4,19 @@ import {
 } from "./chunk.3BJMFOLF.js";
 import {
   header_styles_default
-} from "./chunk.M5TPHPSC.js";
+} from "./chunk.XLX7QTXT.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.X7X3LESZ.js";
-import {
-  e as e2
-} from "./chunk.IKHG7XGO.js";
+} from "./chunk.ZLWLHLBC.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
 import {
   ShoelaceElement,
   e,
@@ -45,7 +45,9 @@ var DSAHeader = class extends ShoelaceElement {
     this.localize = new LocalizeController(this);
     this.firstLogo = "public";
     this.logoHref = "/";
+    this.logoSize = "default";
     this.searchExpanded = false;
+    this.mobile = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -73,10 +75,25 @@ var DSAHeader = class extends ShoelaceElement {
       }
     }
   }
+  handleMobile() {
+    if (this.hasSlotController.test("search")) {
+      const search = this.querySelector("dsa-header-search");
+      if (search !== null && this.mobile !== void 0) {
+        search.mobile = this.mobile;
+      }
+    }
+  }
   render() {
     const hasBrand = this.hasSlotController.test("second-logo") || this.hasSlotController.test("site-name");
     return x`
-      <header part="base" role="banner">
+      <header
+        part="base"
+        role="banner"
+        class=${e2({
+      "header--mobile": this.mobile === true,
+      "header--desktop": this.mobile === false
+    })}
+      >
         ${this.hasSlotController.test("external-links") ? x`
               <ul class="external-links__container">
                 <slot name="external-links" part="external-links"></slot>
@@ -90,11 +107,22 @@ var DSAHeader = class extends ShoelaceElement {
       "header--search-expanded": this.hasSlotController.test("search") && this.searchExpanded
     })}
           >
-            <a href=${this.logoHref} part="first-logo" class="logo dsa-link">
-              ${this.firstLogo === "public" ? dsaLogoSvg(this.localize.term("dsaGoToHomepage")) : cnsaLogoSvg(this.localize.term("cnsaGoToHomepage"))}
-            </a>
+            <slot
+              name="first-logo"
+              part="first-logo"
+              class="logo ${this.logoSize === "large" && "logo-large"}"
+            >
+              <a href=${this.logoHref} class="logo-link">
+                ${this.firstLogo === "public" ? dsaLogoSvg(this.localize.term("dsaGoToHomepage")) : cnsaLogoSvg(this.localize.term("cnsaGoToHomepage"))}
+              </a>
+            </slot>
             <div part="brand">
-              ${this.hasSlotController.test("second-logo") ? x` <slot name="second-logo" class="logo"></slot> ` : ""}
+              ${this.hasSlotController.test("second-logo") ? x`
+                    <slot
+                      name="second-logo"
+                      class="logo ${this.logoSize === "large" && "logo-large"}"
+                    ></slot>
+                  ` : ""}
               ${this.hasSlotController.test("site-name") || this.hasSlotController.test("baseline") ? x`
                     <div class="site-info">
                       <slot name="site-name" part="site-name"></slot>
@@ -122,12 +150,21 @@ __decorateClass([
 __decorateClass([
   n({ reflect: true, attribute: "logo-href" })
 ], DSAHeader.prototype, "logoHref", 2);
+__decorateClass([
+  n({ attribute: "logo-size" })
+], DSAHeader.prototype, "logoSize", 2);
 __decorateClass([
   n({ reflect: true, type: Boolean, attribute: "search-expanded" })
 ], DSAHeader.prototype, "searchExpanded", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAHeader.prototype, "mobile", 2);
 __decorateClass([
   watch("searchExpanded")
 ], DSAHeader.prototype, "handleSearchExpanded", 1);
+__decorateClass([
+  watch("mobile")
+], DSAHeader.prototype, "handleMobile", 1);
 DSAHeader = __decorateClass([
   t("dsa-header")
 ], DSAHeader);

package/cdn/chunks/{chunk.BIFW3FS4.js → chunk.6CF6SXDF.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.4HCR3FZE.js";
 import {
   LocalizeController
-} from "./chunk.X7X3LESZ.js";
-import {
-  e as e2
-} from "./chunk.IKHG7XGO.js";
+} from "./chunk.ZLWLHLBC.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
 import {
   ShoelaceElement,
   e,
@@ -71,8 +71,7 @@ var DSATableRow = class extends ShoelaceElement {
             class="checkbox"
             size="small"
             name=${this.selectionName}
-            title=${this.selectionLabel !== "" ? this.selectionLabel : this.localize.term("selectRow")}
-            aria-label=${this.selectionLabel !== "" ? this.selectionLabel : this.localize.term("selectRow")}
+            accessible-name=${this.selectionLabel !== "" ? this.selectionLabel : this.localize.term("selectRow")}
             value=${this.selectionValue}
             ?checked=${this.selected}
             @click=${(e3) => e3.stopPropagation()}

package/cdn/chunks/{chunk.4FTCF6LD.js → chunk.6H5KLQNT.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.DTSCRQ4P.js";
 import {
   LocalizeController
-} from "./chunk.X7X3LESZ.js";
-import {
-  o
-} from "./chunk.YQLIIKLI.js";
+} from "./chunk.ZLWLHLBC.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
+import {
+  o
+} from "./chunk.YQLIIKLI.js";
 import {
   ShoelaceElement,
   e,

package/cdn/chunks/{chunk.WLU2CZZM.js → chunk.6V2FRFCB.js}

@@ -24,6 +24,7 @@ var DSAMenuNavigation = class extends ShoelaceElement {
         menuItem.classList.add("level-2");
       });
     }
+    this.setAttribute("role", "list");
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -36,7 +37,7 @@ var DSAMenuNavigation = class extends ShoelaceElement {
   }
   // A change of attributes on the slotted elements does not trigger the "slotchange" event, so we add an observer
   render() {
-    return x`<slot role="list" @keydown=${this.handleKeyDown}></slot>`;
+    return x`<slot @keydown=${this.handleKeyDown}></slot>`;
   }
 };
 DSAMenuNavigation.styles = menu_navigation_styles_default;

package/cdn/chunks/{chunk.KQ5BQRHA.js → chunk.77CWRZEL.js}

@@ -300,6 +300,9 @@ var input_phone_styles_default = i`
       var(--dsa-wc-input-phone-height) - var(--dsa-wc-input-border-width) * 2
     );
   }
+  .form-control--medium .input-phone__flag {
+    width: 1.25rem;
+  }
 
   .form-control--large {
     --input-phone__select__min-width: 68px;
@@ -316,6 +319,9 @@ var input_phone_styles_default = i`
         2
     );
   }
+  .form-control--large .input-phone__flag {
+    width: 1.5rem;
+  }
 
   /*
    *  Clearable

package/cdn/chunks/{chunk.AAZDDJJ5.js → chunk.77JWQ5MT.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.EMIT7S33.js";
 import {
   LocalizeController
-} from "./chunk.X7X3LESZ.js";
-import {
-  e as e2
-} from "./chunk.IKHG7XGO.js";
+} from "./chunk.ZLWLHLBC.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
 import {
   ShoelaceElement,
   e,
@@ -194,7 +194,7 @@ var DSATabGroup = class extends ShoelaceElement {
       this.tabs.map((el) => {
         const isActive = el === this.activeTab;
         el.active = isActive;
-        el.tab.tabIndex = isActive ? 0 : -1;
+        el.tabIndex = isActive ? 0 : -1;
         return el;
       });
       this.panels.map((el) => {
@@ -265,9 +265,9 @@ var DSATabGroup = class extends ShoelaceElement {
     this.panels = this.getAllPanels();
     let activeIndex = -1;
     this.tabs.forEach((tab, index) => {
-      tab.tab.tabIndex = -1;
+      tab.tabIndex = -1;
       if (tab.active) {
-        tab.tab.tabIndex = 0;
+        tab.tabIndex = 0;
         activeIndex = index;
       }
     });

package/cdn/chunks/{chunk.KC5IRCKL.js → chunk.7CIXFYLV.js}

@@ -15,13 +15,13 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.X7X3LESZ.js";
-import {
-  e as e2
-} from "./chunk.IKHG7XGO.js";
+} from "./chunk.ZLWLHLBC.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
 import {
   ShoelaceElement,
   e,

package/cdn/chunks/{chunk.KTUVO7HC.js → chunk.7KCFANDH.js}

@@ -4,12 +4,12 @@ import {
 import {
   o
 } from "./chunk.6OFBSNBH.js";
+import {
+  LocalizeController
+} from "./chunk.ZLWLHLBC.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.B6GVVW66.js";
-import {
-  LocalizeController
-} from "./chunk.X7X3LESZ.js";
 import {
   e
 } from "./chunk.IKHG7XGO.js";

package/cdn/chunks/{chunk.NPKLECQZ.js → chunk.APACKBZF.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.PRSVL22E.js";
 import {
   LocalizeController
-} from "./chunk.X7X3LESZ.js";
+} from "./chunk.ZLWLHLBC.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.DJZD3RZP.js → chunk.BE7PKTJW.js}

@@ -8,15 +8,15 @@ import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.3E6XVTWL.js";
+} from "./chunk.P45DWAWT.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
 import {
   e,
   i,
   t as t2
 } from "./chunk.3VUJFXU2.js";
-import {
-  watch
-} from "./chunk.4FQJ3QJK.js";
 import {
   ShoelaceElement,
   n,