qc-trousse-sdg 1.4.5 → 1.4.6

package/package.json

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

package/plugins/buildHtmlDoc.js

@@ -29,7 +29,11 @@ function buildHtmlDoc({ input, output }) {
                 if (html.includes(marker)) {
                     html = html.replace(new RegExp(marker, 'g'), content);
                 } else {
-                    this.warn(`⚠️ Le partiel "${partialName}" n'est pas utilisé dans ${inputFileName}`);
+                    const ignoredPartials = ['_dev.html', '_test.html'];
+
+                    if (!ignoredPartials.includes(partialName)) {
+                        this.warn(`⚠️ Le partiel "${partialName}" n'est pas utilisé dans ${inputFileName}`);
+                    }
                 }
             }
 

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

@@ -8,38 +8,17 @@ pre {
   padding: 0;
   white-space: pre-wrap;
   overflow: auto;
+  position: relative;
 }
 pre code, pre .qc-code {
   font-family: var(--qc-font-family-code);
 }
 pre code button, pre .qc-code button {
   float: right;
-  right: var(--qc-spacer-xs);
-  top: var(--qc-spacer-xs);
-  padding: var(--qc-spacer-xs) var(--qc-spacer-sm);
-  color: white;
-  background-color: var(--qc-color-blue-piv);
-  border: 1px solid;
+  position: absolute;
+  right: var(--qc-spacer-sm);
+  top: var(--qc-spacer-sm);
   white-space: nowrap;
-  transition: none !important;
-}
-pre code button .copy, pre .qc-code button .copy {
-  display: inline;
-}
-pre code button .copied, pre .qc-code button .copied {
-  display: none;
-}
-pre code button.copied, pre .qc-code button.copied {
-  background-color: transparent !important;
-  border-color: transparent !important;
-  box-shadow: none !important;
-  color: var(--qc-color-blue-piv) !important;
-}
-pre code button.copied .copy, pre .qc-code button.copied .copy {
-  display: none;
-}
-pre code button.copied .copied, pre .qc-code button.copied .copied {
-  display: inline;
 }
 
 @keyframes fadeout {
@@ -171,6 +150,24 @@ code.hljs {
   font-weight: bold;
 }
 
+.exemple-area > figure {
+  display: block;
+  max-width: var(--qc-max-content-width);
+  width: 100%;
+  margin-bottom: var(--qc-spacer-content-block-mb);
+  padding-bottom: 1px;
+}
+.exemple-area > figure .exemple {
+  padding: var(--qc-spacer-sm) var(--qc-spacer-sm) var(--qc-spacer-sm) var(--qc-spacer-sm);
+  border: 1px solid var(--qc-box_shadow-0-color);
+}
+.exemple-area > figure .exemple > *:last-child {
+  margin-bottom: 0;
+}
+.exemple-area > figure > figcaption {
+  display: block;
+}
+
 table.qc-table {
   margin-bottom: 0;
   background-color: var(--qc-color-white);
@@ -178,9 +175,6 @@ table.qc-table {
   max-width: 100%;
   overflow: auto;
   border-collapse: collapse;
-  /* ----- Striped tables ----- */
-  /* ----- Bordered tables ----- */
-  /* ----- TODO add footer style ----- */
 }
 table.qc-table > thead {
   background-color: var(--qc-color-blue-dark);
@@ -197,12 +191,21 @@ table.qc-table thead th, table.qc-table tbody th, table.qc-table tbody td {
   text-align: left;
   padding: var(--qc-spacer-xs);
 }
+table.qc-table {
+  /* ----- Striped tables ----- */
+}
 table.qc-table.qc-striped tbody tr:nth-of-type(even) {
   background-color: var(--qc-color-grey-pale);
 }
+table.qc-table {
+  /* ----- Bordered tables ----- */
+}
 table.qc-table.qc-bordered tbody th, table.qc-table.qc-bordered tbody td {
   border-bottom: 1px solid var(--qc-color-grey-light);
 }
+table.qc-table {
+  /* ----- TODO add footer style ----- */
+}
 
 .ui-autocomplete {
   max-height: calc(16rem + 2px) !important;

package/public/css/qc-sdg-no-grid.css

@@ -1372,7 +1372,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 +1384,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 +1526,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 +1536,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 +1694,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 +1709,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 +1729,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 +1748,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 +1793,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 +1835,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 +1903,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 +1918,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;
@@ -2491,9 +2503,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 +2518,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;
 }

package/public/css/qc-sdg.css

@@ -1372,7 +1372,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 +1384,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 +1526,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 +1536,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 +1694,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 +1709,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 +1729,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 +1748,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 +1793,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 +1835,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 +1903,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 +1918,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;
@@ -2491,9 +2503,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 +2518,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;
 }

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
   >
@@ -863,7 +863,7 @@
                 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>
 
@@ -1009,13 +1009,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 +1708,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 +2118,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">
@@ -2627,9 +2620,14 @@
 <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 +2729,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 +2804,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 +2825,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>