qc-trousse-sdg 1.4.5 → 1.4.7

package/public/css/qc-sdg.css

@@ -755,7 +755,7 @@ qc-icon {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMDEuNjkxIDMwMS42OTEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwMS42OTEgMzAxLjY5MTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMTE5LjE1MSwwIDEyOS42LDIxOC40MDYgMTcyLjA2LDIxOC40MDYgMTgyLjU0LDAiIC8+Cgk8cmVjdCB4PSIxMzAuNTYzIiB5PSIyNjEuMTY4IiB3aWR0aD0iNDAuNTI1IiBoZWlnaHQ9IjQwLjUyMyIgLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K");
 }
 
-.icon-external-link, span.qc-ext-link-img, .qc-icon[data-img-type=external-link] {
+.icon-external-link, .qc-ext-link-img, .qc-icon[data-img-type=external-link] {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOS4yMDciIGhlaWdodD0iMjkuNjA4IiB2aWV3Qm94PSIwIDAgMjkuMjA3IDI5LjYwOCI+CiAgPGcgaWQ9Ikdyb3VwZV8zOTQiIGRhdGEtbmFtZT0iR3JvdXBlIDM5NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEzOSAtNTQ1LjYyNCkiPgogICAgPGcgaWQ9Ikdyb3VwZV8zOTAiIGRhdGEtbmFtZT0iR3JvdXBlIDM5MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE3MjIuMDA4IDQzNy41MjQpIj4KICAgICAgPGcgaWQ9Ikdyb3VwZV8zODkiIGRhdGEtbmFtZT0iR3JvdXBlIDM4OSI+CiAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV82NzEiIGRhdGEtbmFtZT0iVHJhY8OpIDY3MSIgZD0iTTE4ODQuMDg3LDEyMC44MTRhMS4xNDUsMS4xNDUsMCwwLDAtMS4xNDUsMS4xNDV2MTMuNDU4SDE4NjMuM3YtMjAuMWgxMy4wNTdhMS4xNDYsMS4xNDYsMCwxLDAsMC0yLjI5MWgtMTUuMzQ4djI0LjY4M2gyNC4yMjVWMTIxLjk1OUExLjE0NiwxLjE0NiwwLDAsMCwxODg0LjA4NywxMjAuODE0WiIgLz4KICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzY3MiIgZGF0YS1uYW1lPSJUcmFjw6kgNjcyIiBkPSJNMTg3OS43OTIsMTA4LjFhMS4xNDYsMS4xNDYsMCwwLDAsMCwyLjI5MWg2LjUzM2wtMTQuMDE5LDE0LjE3YTEuMTQ2LDEuMTQ2LDAsMCwwLDEuNjI5LDEuNjExbDEzLjk4OS0xNC4xNHY2LjM3N2ExLjE0NiwxLjE0NiwwLDAsMCwyLjI5MSwwVjEwOC4xWiIgLz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==");
 }
 
@@ -826,6 +826,10 @@ qc-icon {
 a {
   color: var(--qc-color-link-text);
 }
+a:has(.qc-ext-link-text) {
+  white-space: nowrap;
+  text-decoration: none;
+}
 a:visited {
   color: var(--qc-color-link-visited);
 }
@@ -833,9 +837,17 @@ a:hover {
   color: var(--qc-color-link-hover);
   text-decoration: none;
 }
+a:hover .qc-ext-link-text {
+  text-decoration: none;
+}
 a:focus, a:focus-visible {
   color: var(--qc-color-link-hover);
   text-decoration: none;
+}
+a:focus .qc-ext-link-text, a:focus-visible .qc-ext-link-text {
+  text-decoration: none;
+}
+a:focus, a:focus-visible {
   outline: 2px solid var(--qc-color-link-focus-outline);
   outline-offset: 1px;
 }
@@ -843,33 +855,38 @@ a:active {
   color: var(--qc-color-link-active);
   text-decoration: none;
 }
+a:active .qc-ext-link-text {
+  text-decoration: none;
+}
 a .img-wrap {
   white-space: nowrap;
 }
 
-span.qc-ext-link-img {
+.qc-external-link .qc-ext-link-text {
+  white-space: normal;
+  text-decoration: underline;
+}
+
+.qc-ext-link-img {
   height: 0.6875em;
   width: 0.6875em;
-  display: inline-block;
   background: var(--qc-color-link-text);
   mask-size: 0.6875em;
-  margin-left: 4px;
+  display: inline-block;
+  mask-repeat: no-repeat;
 }
-a:visited span.qc-ext-link-img {
+a:visited .qc-ext-link-img {
   background: var(--qc-color-link-visited);
 }
-a:focus span.qc-ext-link-img {
+a:focus .qc-ext-link-img {
   background: var(--qc-color-link-hover);
 }
-a:hover span.qc-ext-link-img {
+a:hover .qc-ext-link-img {
   background: var(--qc-color-link-hover);
 }
-a:active span.qc-ext-link-img {
+a:active .qc-ext-link-img {
   background: var(--qc-color-link-active);
 }
-.img-wrap + span.qc-ext-link-img {
-  display: none;
-}
 
 p {
   margin-top: 0;
@@ -1270,7 +1287,7 @@ hr {
   line-height: var(--qc-line-height-md);
   font-weight: var(--qc-font-weight-bold);
   color: var(--qc-color-red-regular);
-  margin-left: 0.6rem;
+  margin-left: var(--qc-spacer-xs);
 }
 
 .qc-disabled {
@@ -1372,7 +1389,6 @@ hr {
 
 qc-notice {
   display: block;
-  margin-bottom: 3.2rem;
 }
 qc-notice h1, qc-notice h2, qc-notice h3, qc-notice h4, qc-notice h5, qc-notice h6, qc-notice [role=heading] {
   margin: 0;
@@ -1385,18 +1401,21 @@ qc-notice h1, qc-notice h2, qc-notice h3, qc-notice h4, qc-notice h5, qc-notice
 qc-notice ul {
   padding-left: var(--qc-spacer-sm) !important;
 }
-qc-notice[type=error] ul li {
-  color: var(--qc-color-red-regular);
-}
 qc-notice[type=error] ul li::marker {
   color: var(--qc-color-text-primary);
 }
+qc-notice[type=error] ul li {
+  color: var(--qc-color-red-regular);
+}
 qc-notice[type=error] ul li a {
   color: inherit;
 }
 qc-notice[type=error] ul li a:hover, qc-notice[type=error] ul li a:focus {
   text-decoration: none;
 }
+qc-notice {
+  margin-bottom: 3.2rem;
+}
 
 .qc-piv-header .piv-top .right-section .links ul, qc-piv-header [slot=links], qc-piv-header [slot=links] ul {
   list-style: none;
@@ -1524,9 +1543,6 @@ qc-piv-header a,
   --qc-color-link-text: white;
   --qc-color-link-visited: white;
   --qc-color-link-active: white;
-  font-family: var(--qc-font-family-header);
-  text-decoration: none;
-  font-weight: var(--qc-font-weight-regular);
 }
 qc-piv-header a:hover,
 .qc-piv-header a:hover {
@@ -1537,6 +1553,13 @@ qc-piv-header a:focus-visible:has(img), qc-piv-header a:focus:has(img),
 .qc-piv-header a:focus:has(img) {
   outline-offset: -2px;
 }
+qc-piv-header a, qc-piv-header span,
+.qc-piv-header a,
+.qc-piv-header span {
+  font-family: var(--qc-font-family-header);
+  text-decoration: none;
+  font-weight: var(--qc-font-weight-regular);
+}
 
 .go-to-content {
   display: flex;
@@ -1688,8 +1711,6 @@ qc-piv-footer a:hover {
   z-index: 10;
   background: transparent;
   border: 0;
-  flex-shrink: 0;
-  cursor: pointer;
 }
 .qc-general-alert button::before {
   position: absolute;
@@ -1705,9 +1726,15 @@ qc-piv-footer a:hover {
 .qc-general-alert button:has(input:focus)::before, .qc-general-alert button:focus::before, .qc-general-alert button:has(textarea:focus)::before {
   border: 2px solid var(--qc-color-formfield-focus-border);
 }
+.qc-general-alert button {
+  flex-shrink: 0;
+}
 .qc-general-alert button::before {
   background: transparent;
 }
+.qc-general-alert button {
+  cursor: pointer;
+}
 
 qc-alert {
   display: block;
@@ -1719,6 +1746,11 @@ qc-alert [slot] a, qc-alert:not([slot=content]) a {
   color: var(--qc-color-blue-piv);
 }
 
+.qc-to-top[demo=false] {
+  position: fixed;
+  bottom: 9.6rem;
+  right: 3.2rem;
+}
 .qc-to-top {
   display: flex;
   z-index: 99;
@@ -1733,11 +1765,6 @@ qc-alert [slot] a, qc-alert:not([slot=content]) a {
   background-size: 1.6rem 2rem;
   box-shadow: 0 var(--qc-box_shadow-1-offset) var(--qc-box_shadow-1-blur) var(--qc-color-box_shadow);
 }
-.qc-to-top[demo=false] {
-  position: fixed;
-  bottom: 9.6rem;
-  right: 3.2rem;
-}
 .qc-to-top[style*=block] {
   display: flex !important;
 }
@@ -1783,13 +1810,13 @@ qc-search-input {
 .qc-search-bar::before, .qc-search-input::before {
   border: 1px solid var(--qc-color-formfield-border);
 }
+.qc-search-bar button::before, .qc-search-input button::before {
+  background: transparent;
+}
 .qc-search-bar button, .qc-search-input button {
   width: 4rem;
   flex-shrink: 0;
 }
-.qc-search-bar button::before, .qc-search-input button::before {
-  background: transparent;
-}
 
 .qc-search-input.qc-search-left-icon-disabled qc-icon, .qc-search-input.qc-search-left-icon-disabled::before {
   background-color: var(--qc-color-grey-pale);
@@ -1825,12 +1852,12 @@ qc-search-input {
 .qc-search-input.qc-search-left-icon {
   padding-left: var(--qc-spacer-xs);
 }
-.qc-search-input button {
-  cursor: pointer;
-}
 .qc-search-input button::before {
   background: transparent;
 }
+.qc-search-input button {
+  cursor: pointer;
+}
 qc-search-bar {
   position: relative;
   display: block;
@@ -1893,8 +1920,6 @@ label.qc-selection-button {
   z-index: 10;
   background: transparent;
   border: 0;
-  padding: var(--qc-spacer-sm);
-  min-width: 100%;
 }
 label.qc-selection-button::before {
   position: absolute;
@@ -1910,6 +1935,10 @@ label.qc-selection-button:has(input:focus), label.qc-selection-button:focus, lab
 label.qc-selection-button:has(input:focus)::before, label.qc-selection-button:focus::before, label.qc-selection-button:has(textarea:focus)::before {
   border: 2px solid var(--qc-color-formfield-focus-border);
 }
+label.qc-selection-button {
+  padding: var(--qc-spacer-sm);
+  min-width: 100%;
+}
 label.qc-selection-button::before {
   border-style: solid;
   border-width: 0.1rem;
@@ -2001,9 +2030,9 @@ input[type=radio].qc-choicefield:checked.qc-compact::before {
   justify-items: start;
 }
 .qc-fieldset legend {
-  font-weight: var(--qc-font-weight-content-bold);
   display: inline-block;
   margin-bottom: var(--qc-spacer-md);
+  white-space: nowrap;
 }
 .qc-fieldset.qc-compact {
   margin-bottom: var(--qc-spacer-sm);
@@ -2156,9 +2185,10 @@ input[type=checkbox].qc-choicefield.qc-compact:checked::after {
 }
 .qc-label, qc-textfield label,
 .qc-textfield label {
-  font-weight: var(--qc-font-weight-content-bold);
-  display: block;
+  display: inline-block;
   width: fit-content;
+  white-space: nowrap;
+  margin: 0;
 }
 .qc-label.qc-compact, qc-textfield label.qc-compact,
 .qc-textfield label.qc-compact {
@@ -2174,6 +2204,14 @@ input[type=checkbox].qc-choicefield.qc-compact:checked::after {
   cursor: not-allowed;
 }
 
+.qc-label-text {
+  white-space: wrap;
+  margin: 0;
+  font-size: var(--qc-font-size-md);
+  line-height: var(--qc-line-height-md);
+  font-weight: var(--qc-font-weight-bold);
+}
+
 qc-textfield,
 .qc-textfield {
   display: block;
@@ -2491,9 +2529,6 @@ li[aria-selected=true] {
   z-index: 10;
   background: transparent;
   border: 0;
-  font-size: var(--qc-font-size-md);
-  line-height: var(--qc-line-height-md);
-  font-weight: var(--qc-font-weight-regular);
 }
 .qc-dropdown-button::before {
   position: absolute;
@@ -2509,6 +2544,11 @@ li[aria-selected=true] {
 .qc-dropdown-button:has(input:focus)::before, .qc-dropdown-button:focus::before, .qc-dropdown-button:has(textarea:focus)::before {
   border: 2px solid var(--qc-color-formfield-focus-border);
 }
+.qc-dropdown-button {
+  font-size: var(--qc-font-size-md);
+  line-height: var(--qc-line-height-md);
+  font-weight: var(--qc-font-weight-regular);
+}
 .qc-dropdown-button:hover {
   cursor: pointer;
 }
@@ -2594,15 +2634,16 @@ li[aria-selected=true] {
 
 .qc-dropdown-list-expanded {
   position: absolute;
-  width: calc(100% + 2px);
-  left: -0.1rem;
-  right: -0.1rem;
-  top: 100%;
+  width: calc(100% + 2 * var(--dropdown-button-border) px);
+  left: calc(var(--dropdown-button-border) * 0.1 * -1rem);
+  right: calc(var(--dropdown-button-border) * 0.1 * -1rem);
+  top: calc(var(--dropdown-items-top-offset) * 0.1 * 1rem);
   z-index: 11;
   background-color: var(--qc-color-background);
   border-left: 0.1rem solid var(--qc-color-grey-medium);
   border-right: 0.1rem solid var(--qc-color-grey-medium);
-  border-bottom: 0.1rem solid var(--qc-color-grey-medium);
+  border-bottom: calc(var(--dropdown-items-bottom-border) * 0.1 * 1rem) solid var(--qc-color-grey-medium);
+  border-top: calc(var(--dropdown-items-top-border) * 0.1 * 1rem) solid var(--qc-color-grey-medium);
 }
 
 .qc-dropdown-list-hidden {

package/public/index.html

@@ -600,33 +600,33 @@
 <qc-doc-exemple caption="Exemple de différents liens hypertexte selon leurs états.">
     <dl>
         <dt>Lien interne</dt>
-        <dd><a href="javascript:;" class="not-visited">Lien interne</a></dd>
+        <dd><a href="#" class="not-visited">Lien interne</a></dd>
         <dd>
-            <qc-external-link><a href="javascript:;" class="not-visited">Lien externe</a></qc-external-link>
+            <qc-external-link><a href="#" class="not-visited">Lien externe</a></qc-external-link>
         </dd>
 
         <dt>Lien au survol (pseudo-classe :hover)</dt>
-        <dd><a href="javascript:;" class="pseudo-hover">Lien interne</a></dd>
+        <dd><a href="#" class="pseudo-hover">Lien interne</a></dd>
         <dd>
-            <qc-external-link><a href="javascript:;" class="pseudo-hover">Lien externe</a>
+            <qc-external-link><a href="#" class="pseudo-hover">Lien externe</a>
             </qc-external-link>
         </dd>
         <dt>Lien au focus (pseudo-classe :focus)</dt>
-        <dd><a href="javascript:;" class="pseudo-focus">Lien interne</a></dd>
+        <dd><a href="#" class="pseudo-focus">Lien interne</a></dd>
         <dd>
-            <qc-external-link><a href="javascript:;" class="pseudo-focus">Lien externe</a>
+            <qc-external-link><a href="#" class="pseudo-focus">Lien externe</a>
             </qc-external-link>
         </dd>
         <dt>Lien au clic (pseudo-classe :active)</dt>
-        <dd><a href="javascript:;" class="pseudo-active">Lien interne</a></dd>
+        <dd><a href="#" class="pseudo-active">Lien interne</a></dd>
         <dd>
-            <qc-external-link><a href="javascript:;" class="pseudo-active">Lien externe</a>
+            <qc-external-link><a href="#" class="pseudo-active">Lien externe</a>
             </qc-external-link>
         </dd>
         <dt>Lien visité (pseudo-classe :visited)</dt>
-        <dd><a href="javascript:;" class="pseudo-visited">Lien interne</a></dd>
+        <dd><a href="#" class="pseudo-visited">Lien interne</a></dd>
         <dd>
-            <qc-external-link><a href="javascript:;" class="pseudo-visited">Lien externe</a>
+            <qc-external-link><a href="#" class="pseudo-visited">Lien externe</a>
             </qc-external-link>
         </dd>
     </dl>
@@ -839,7 +839,7 @@
 <h3>Exemples</h3>
 <h4>Alerte jaune</h4>
 <p>
-  <a href="javascript:;"
+  <a href="#"
      id="show-qc-alert"
      hidden
   >
@@ -848,27 +848,26 @@
 </p>
 
 <qc-doc-exemple id="alert-warning"
-                caption="Exemple d’alerte jaune">
+                caption="Exemple d’alerte jaune masquable. Elle reste masquée après rafraîchissement de la page tant que la session courante est active.">
   <qc-alert id="alerte-masquable"
             type="warning"
             maskable="true"
             content="Alerte jaune d’importance élevée"
+            persist-hidden
+            persistence-key="hash-1234"
   >
   </qc-alert>
 </qc-doc-exemple>
-<!--            <qc-code target-id="alert-warning"></qc-code>-->
 
 <h4>Alerte bleue</h4>
 <qc-doc-exemple id="alert-general"
                 caption="Exemple d’alerte générale">
   <qc-alert type="general"
             maskable="false">
-    <p>Alerte bleue d’importance modérée <a href="javascript:;">avec un lien textuel</a></p>
+    <p>Alerte bleue d’importance modérée <a href="#">avec un lien textuel</a></p>
   </qc-alert>
 </qc-doc-exemple>
 
-<!--            <qc-code target-id="alert-general"></qc-code>-->
-
 <h3>Documentation technique</h3>
 
 <h4>Attributs</h4>
@@ -888,12 +887,6 @@
       <td>"general"</td>
       <td>Type de l’alerte : s'il s'agit d’une alerte bleue ou jaune</td>
     </tr>
-    <tr>
-      <td>maskable</td>
-      <td>"true" ou "false"</td>
-      <td>"true"</td>
-      <td>Afficher le bouton de fermeture de l’alerte</td>
-    </tr>
     <tr>
       <td>content</td>
       <td>Texte</td>
@@ -914,6 +907,25 @@
         qc-container-fluid)
       </td>
     </tr>
+      <tr>
+          <td>maskable</td>
+          <td>"true" ou "false"</td>
+          <td>"true"</td>
+          <td>Afficher le bouton de fermeture de l’alerte</td>
+      </tr>
+      <tr>
+          <td>persist-hidden</td>
+          <td>na</td>
+          <td></td>
+          <td>Masque l'alerte de façon persistente une fois qu'elle est masquée par l'internaute, c‑à‑d. qu'elle reste masquée lorsque l'utilisateur rafraîchit la page, pendant tout le temps de sa session.</td>
+      </tr>
+    <tr>
+      <td>persistence-key</td>
+      <td>Chaîne de caractère</td>
+      <td>Id de l'élément, valeur nulle sinon</td>
+      <td>Clé pour le stockage de session (<code>Window.sessionStorage</code>). Si non défini, l'id de l'élément sera utilisé. Si celui-ci non plus n'est pas défini, la persistence du masquage n'aura pas lieu.</td>
+    </tr>
+
   </table>
 </div>
 
@@ -926,7 +938,7 @@
   document.addEventListener(
           'qc.alert.hide',
           (e) => {
-            console.log('Fermeture de l\'alerte id=\'' + e.target.id + '\'');
+            console.log(`Fermeture de l'alerte id='${e.target.id}'`);
           }
   )
 </script>
@@ -1009,13 +1021,13 @@
              title="Des erreurs sont présentes dans le formulaire :">
     <ul>
       <li>
-        <a href="javascript:;">Le champ « Nom de famille » est obligatoire ;</a>
+        <a href="#">Le champ « Nom de famille » est obligatoire ;</a>
       </li>
       <li>
-        <a href="javascript:;">Le champ « Prénom » est obligatoire ;</a>
+        <a href="#">Le champ « Prénom » est obligatoire ;</a>
       </li>
       <li>
-        <a href="javascript:;">Le champ « Numéro de dossier » est obligatoire.</a>
+        <a href="#">Le champ « Numéro de dossier » est obligatoire.</a>
       </li>
     </ul>
   </qc-notice>
@@ -1708,8 +1720,6 @@
   </table>
 </div>
 
-<p>Pour les autres attributs, voir la rubrique de <a href="#selection-button-attributes">boutons de sélection</a>.</p>
-
 <h5>Zone d’ajout de contenu HTML</h5>
 
 <p>Ce composant ne comporte qu'une seule zone d'ajout de contenu par défaut.</p>
@@ -2120,11 +2130,6 @@
   </table>
 </div>
 
-<h4>Champs alignés horizontalement (classe <code>qc-textfield-row</code>)</h4>
-
-<p>Les champs regroupés sur une ligne peuvent être placés dans un div avec la classe <code>qc-textfield-row</code>. De cette façon, les messages d'erreur ne provoquent pas de décalage. <br/>
-    Voir le code des champs Téléphone et Poste dans l'exemple ci-dessus.</p>
-
 <h4>Propriété js</h4>
 <div class="table-overflow">
   <table class="qc-table qc-striped component-attributes-description">
@@ -2432,6 +2437,20 @@
         </select>
     </qc-select>
 
+    <script>
+        const selectElement = document.getElementById("select-single-choice");
+
+        selectElement.addEventListener("change", (event) => {
+            console.log("Option sélectionnée :", event.target.value);
+        });
+        selectElement.addEventListener("qc.select.show", () => {
+            console.log("Options affichées");
+        });
+        selectElement.addEventListener("qc.select.hide", () => {
+            console.log("Options cachées");
+        });
+    </script>
+
     <qc-select id="qc-select-single-choice-search" enable-search>
         <label for="select-single-choice-search">Choix unique avec recherche</label>
         <select id="select-single-choice-search">
@@ -2607,11 +2626,11 @@
 <div class="table-overflow">
     <table class="qc-table qc-striped component-attributes-description">
         <thead>
-        <tr>
-            <th>Nom</th>
-            <th>Type</th>
-            <th>Description</th>
-        </tr>
+            <tr>
+                <th>Nom</th>
+                <th>Type</th>
+                <th>Description</th>
+            </tr>
         </thead>
         <tbody>
             <tr>
@@ -2619,17 +2638,34 @@
                 <td>Tableau de chaîne de caractères</td>
                 <td>Valeur(s) sélectionnée(s) dans la liste déroulante</td>
             </tr>
+            <tr>
+                <td>expanded</td>
+                <td>Booléen</td>
+                <td>Indique que la liste déroulante est ouverte</td>
+            </tr>
         </tbody>
     </table>
 </div>
 
+<h5>Événements JS</h5>
+<ul>
+    <li>Un événement JS <code class="qc-bg-color-grey-pale">change</code> est émis lors du changement de valeur sélectionnée dans la liste déroulante.</li>
+    <li>Un événement JS <code class="qc-bg-color-grey-pale">qc.select.show</code> est émis lorsqu'une liste déroulante est ouverte.</li>
+    <li>Un événement JS <code class="qc-bg-color-grey-pale">qc.select.hide</code> est émis lorsqu'une liste déroulante est fermée.</li>
+</ul>
+
 <h5>Zone d'ajout de contenu HTML</h5>
 <p>Ce composant ne comporte qu'une seule zone d'ajout de contenu.</p>
 
     <hr/>
-    <h3 id="champs-alignes">Champs alignés horizontalement (classe <code>qc‑textfield‑row</code>)</h3>
+    <h3 id="champs-alignes">Champs alignés horizontalement (classe <code>qc‑formfield‑row</code>)</h3>
 
-<p>Les champs regroupés sur une ligne doivent être placés dans un div avec la classe <code>qc-textfield-row</code> pour correctement afficher les messages d’erreur en cas de soumission invalide.</p>
+<p>
+    Les champs regroupés sur une ligne doivent être placés dans un <code>div</code> avec la classe <code>qc-formfield-row</code>.
+    De cette façon, les messages d'erreur ne provoquent pas de décalage.
+    <br/><br/>
+    Voir le code des champs Téléphone et Poste dans l'exemple ci-dessus.
+</p>
 
 <h4>Exemple</h4>
 <qc-doc-exemple caption="Exemple de champs sur une seule ligne">
@@ -2731,11 +2767,6 @@
     });
 </script>
 
-<h4>Documentation technique</h4>
-<p>Placer les champs à regrouper sur une seule ligne dans un div avec la classe <code>qc-formfield-row</code></p>
-
-
-
     <hr/>
     <h2 id="toTop">Haut de page</h2>
 <p>
@@ -2811,7 +2842,7 @@
       <ul>
         <li><a href="#fakeEnglish">English</a>
         </li>
-        <li><a href="javascript:;">Nous joindre</a>
+        <li><a href="#">Nous joindre</a>
         </li>
       </ul>
     </nav>
@@ -2832,7 +2863,7 @@
       <ul slot="links">
         <li><a href="#fakeEnglish">English</a>
         </li>
-        <li><a href="javascript:;">Nous joindre</a>
+        <li><a href="#">Nous joindre</a>
         </li>
       </ul>
 
@@ -3079,7 +3110,7 @@
       <td>Le chemin de l’image en thème clair.</td>
       <td>Le chemin vers l’image dist/img/QUEBEC_couleur.svg de la trousse</td>
       <td>Adresse de l’image du pied de page en thème clair (fond transparent, texte et drapeaux en
-        couleur, voir <a href="#piv-footer-ex-2">l’exemple de pied de page PIV personnalisé</a>).
+        couleur, voir <a href="#piv-footer-ex-2">l’exemple de pied de page du PIV personnalisé</a>).
       </td>
     </tr>
     <tr>
@@ -3087,7 +3118,7 @@
       <td>Le chemin de l’image en thème sombre.</td>
       <td>Le chemin vers l’image dist/img/QUEBEC_blanc.svg de la trousse</td>
       <td>Adresse de l’image du pied de page en thème sombre (fond transparent, texte et drapeaux en
-        blanc, voir <a href="#piv-footer-ex-2">l’exemple de pied de page PIV personnalisé</a>).
+        blanc, voir <a href="#piv-footer-ex-2">l’exemple de pied de page du PIV personnalisé</a>).
       </td>
     </tr>
     <tr>
@@ -3138,7 +3169,7 @@
   </table>
 </div>
 
-<qc-notice type="information">Les images du pied de page PIV doivent respecter
+<qc-notice type="information">Les images du pied de page du PIV doivent respecter
   <qc-external-link><a href="https://www.piv.gouv.qc.ca/fileadmin/documents/guide/section1_general.pdf">les
     normes graphiques du système d’identification visuelle.</a>. Nous vous invitons à privilégier le format
     SVG, qui permet de conserver la lisibilité de l’image en cas de zoom.
@@ -3149,7 +3180,7 @@
 
 <p>Ci-dessous, les zones d’ajout de contenu HTML (balise &lt;slot&gt;) délimitées en pointillé.</p>
 <qc-doc-exemple id="qc-piv-footer-slots"
-                caption="Présentation des zones d’ajout de contenu du pied de page PIV">
+                caption="Présentation des zones d’ajout de contenu du pied de page du PIV">
   <qc-piv-footer>
     <div style="border:2px dashed;padding: var(--qc-spacer-xs);">
       Contenu par défaut