qc-trousse-sdg 1.4.6 → 1.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qc-trousse-sdg",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "description": "Trousse de développement du Système de design gouvernemental du Québec",
   "main": "index.js",
   "scripts": {

package/public/css/qc-doc-sdg.css

@@ -167,6 +167,9 @@ code.hljs {
 .exemple-area > figure > figcaption {
   display: block;
 }
+.exemple-area > figure:has(qc-select) {
+  overflow-x: visible;
+}
 
 table.qc-table {
   margin-bottom: 0;
@@ -352,39 +355,68 @@ h1, h2, h3, h4, h5, h6 {
   border: 1px solid var(--qc-color-grey-light);
 }
 
+a.pseudo-visited {
+  color: var(--qc-color-link-visited);
+}
+a.pseudo-visited > .qc-ext-link-img {
+  background-color: var(--qc-color-link-visited);
+}
 a.pseudo-hover {
   color: var(--qc-color-link-hover);
   text-decoration: none;
 }
+a.pseudo-hover .qc-ext-link-text {
+  text-decoration: none;
+}
+a.pseudo-hover > .qc-ext-link-img {
+  background-color: var(--qc-color-link-hover);
+}
 a.pseudo-active {
   color: var(--qc-color-link-active);
   text-decoration: none;
 }
+a.pseudo-active .qc-ext-link-text {
+  text-decoration: none;
+}
+a.pseudo-active > .qc-ext-link-img {
+  background-color: var(--qc-color-link-active);
+}
 a.pseudo-focus {
   color: var(--qc-color-link-hover);
   text-decoration: none;
+}
+a.pseudo-focus .qc-ext-link-text {
+  text-decoration: none;
+}
+a.pseudo-focus {
   outline: 2px solid var(--qc-color-link-focus-outline);
   outline-offset: 1px;
 }
-a.pseudo-visited {
-  color: var(--qc-color-link-visited) !important;
+a.pseudo-focus > .qc-ext-link-img {
+  background-color: var(--qc-color-link-text);
 }
 a.not-visited:visited:not(:hover) {
   color: var(--qc-color-link-text);
 }
+a.not-visited:visited:not(:hover) > .qc-ext-link-text {
+  color: var(--qc-color-link-text);
+}
 
-a.pseudo-visited span.qc-ext-link-img {
+a.pseudo-visited div.qc-ext-link-img {
   background: var(--qc-color-link-visited) !important;
 }
-a.pseudo-focus span.qc-ext-link-img {
+a.pseudo-focus div.qc-ext-link-img {
   background: var(--qc-color-link-hover) !important;
 }
-a.pseudo-hover span.qc-ext-link-img {
+a.pseudo-hover div.qc-ext-link-img {
   background: var(--qc-color-link-hover) !important;
 }
-a.pseudo-active span.qc-ext-link-img {
+a.pseudo-active div.qc-ext-link-img {
   background: var(--qc-color-link-active) !important;
 }
+a.not-visited:visited:not(:hover) div.qc-ext-link-img {
+  background: var(--qc-color-link-text) !important;
+}
 
 p, h1, h2, h3, h4, h5, h6 {
   hyphens: auto;

package/public/css/qc-sdg-no-grid.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 {
@@ -2013,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);
@@ -2168,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 {
@@ -2186,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;
@@ -2608,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/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 {
@@ -2013,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);
@@ -2168,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 {
@@ -2186,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;
@@ -2608,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

@@ -848,15 +848,16 @@
 </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"
@@ -867,8 +868,6 @@
   </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>
@@ -2425,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">
@@ -2600,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>
@@ -2612,10 +2638,22 @@
                 <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>
 
@@ -3072,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>
@@ -3080,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>
@@ -3131,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.
@@ -3142,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