qc-trousse-sdg 1.4.7 → 1.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qc-trousse-sdg",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "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

@@ -355,12 +355,6 @@ 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;
@@ -368,8 +362,8 @@ a.pseudo-hover {
 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-hover {
+  --qc-color-link-visited: var(--qc-color-link-hover);
 }
 a.pseudo-active {
   color: var(--qc-color-link-active);
@@ -378,8 +372,10 @@ a.pseudo-active {
 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-active {
+  --qc-color-link-visited: var(--qc-color-link-active);
+  --qc-color-link-focus: var(--qc-color-link-active);
+  --qc-color-link-hover: var(--qc-color-link-active );
 }
 a.pseudo-focus {
   color: var(--qc-color-link-hover);
@@ -391,31 +387,13 @@ a.pseudo-focus .qc-ext-link-text {
 a.pseudo-focus {
   outline: 2px solid var(--qc-color-link-focus-outline);
   outline-offset: 1px;
+  --qc-color-link-visited: var(--qc-color-link-focus);
 }
-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 div.qc-ext-link-img {
-  background: var(--qc-color-link-visited) !important;
-}
-a.pseudo-focus div.qc-ext-link-img {
-  background: var(--qc-color-link-hover) !important;
-}
-a.pseudo-hover div.qc-ext-link-img {
-  background: var(--qc-color-link-hover) !important;
-}
-a.pseudo-active div.qc-ext-link-img {
-  background: var(--qc-color-link-active) !important;
+a.pseudo-visited {
+  --qc-color-link-text: var(--qc-color-link-visited);
 }
-a.not-visited:visited:not(:hover) div.qc-ext-link-img {
-  background: var(--qc-color-link-text) !important;
+a.not-visited {
+  --qc-color-link-visited: var(--qc-color-link-text);
 }
 
 p, h1, h2, h3, h4, h5, h6 {

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .qc-search-input, .qc-search-input button, .qc-search-bar, .qc-search-bar button {
   position: relative;
   z-index: 10;
@@ -755,7 +756,7 @@ qc-icon {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMDEuNjkxIDMwMS42OTEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwMS42OTEgMzAxLjY5MTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMTE5LjE1MSwwIDEyOS42LDIxOC40MDYgMTcyLjA2LDIxOC40MDYgMTgyLjU0LDAiIC8+Cgk8cmVjdCB4PSIxMzAuNTYzIiB5PSIyNjEuMTY4IiB3aWR0aD0iNDAuNTI1IiBoZWlnaHQ9IjQwLjUyMyIgLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K");
 }
 
-.icon-external-link, .qc-ext-link-img, .qc-icon[data-img-type=external-link] {
+.icon-external-link, div.qc-ext-link-img, .qc-icon[data-img-type=external-link] {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOS4yMDciIGhlaWdodD0iMjkuNjA4IiB2aWV3Qm94PSIwIDAgMjkuMjA3IDI5LjYwOCI+CiAgPGcgaWQ9Ikdyb3VwZV8zOTQiIGRhdGEtbmFtZT0iR3JvdXBlIDM5NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEzOSAtNTQ1LjYyNCkiPgogICAgPGcgaWQ9Ikdyb3VwZV8zOTAiIGRhdGEtbmFtZT0iR3JvdXBlIDM5MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE3MjIuMDA4IDQzNy41MjQpIj4KICAgICAgPGcgaWQ9Ikdyb3VwZV8zODkiIGRhdGEtbmFtZT0iR3JvdXBlIDM4OSI+CiAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV82NzEiIGRhdGEtbmFtZT0iVHJhY8OpIDY3MSIgZD0iTTE4ODQuMDg3LDEyMC44MTRhMS4xNDUsMS4xNDUsMCwwLDAtMS4xNDUsMS4xNDV2MTMuNDU4SDE4NjMuM3YtMjAuMWgxMy4wNTdhMS4xNDYsMS4xNDYsMCwxLDAsMC0yLjI5MWgtMTUuMzQ4djI0LjY4M2gyNC4yMjVWMTIxLjk1OUExLjE0NiwxLjE0NiwwLDAsMCwxODg0LjA4NywxMjAuODE0WiIgLz4KICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzY3MiIgZGF0YS1uYW1lPSJUcmFjw6kgNjcyIiBkPSJNMTg3OS43OTIsMTA4LjFhMS4xNDYsMS4xNDYsMCwwLDAsMCwyLjI5MWg2LjUzM2wtMTQuMDE5LDE0LjE3YTEuMTQ2LDEuMTQ2LDAsMCwwLDEuNjI5LDEuNjExbDEzLjk4OS0xNC4xNHY2LjM3N2ExLjE0NiwxLjE0NiwwLDAsMCwyLjI5MSwwVjEwOC4xWiIgLz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==");
 }
 
@@ -826,10 +827,6 @@ 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);
 }
@@ -862,31 +859,36 @@ a .img-wrap {
   white-space: nowrap;
 }
 
-.qc-external-link .qc-ext-link-text {
-  white-space: normal;
-  text-decoration: underline;
-}
-
-.qc-ext-link-img {
+div.qc-ext-link-img {
   height: 0.6875em;
   width: 0.6875em;
+  display: inline-block;
   background: var(--qc-color-link-text);
   mask-size: 0.6875em;
-  display: inline-block;
-  mask-repeat: no-repeat;
+  margin-left: 4px;
 }
-a:visited .qc-ext-link-img {
+a:visited div.qc-ext-link-img {
   background: var(--qc-color-link-visited);
 }
-a:focus .qc-ext-link-img {
+a:focus div.qc-ext-link-img {
   background: var(--qc-color-link-hover);
 }
-a:hover .qc-ext-link-img {
+a:hover div.qc-ext-link-img {
   background: var(--qc-color-link-hover);
 }
-a:active .qc-ext-link-img {
+a:active div.qc-ext-link-img {
   background: var(--qc-color-link-active);
 }
+.img-wrap + div.qc-ext-link-img {
+  display: none;
+}
+
+.qc-external-link .qc-button {
+  gap: 0;
+}
+.qc-external-link .qc-button > .img-wrap::before {
+  content: " ";
+}
 
 p {
   margin-top: 0;
@@ -1802,6 +1804,26 @@ qc-search-input {
   width: 100%;
   max-width: 54.8rem;
 }
+qc-search-input[size=xs] {
+  max-width: 100%;
+  width: 6.3rem;
+}
+qc-search-input[size=sm] {
+  max-width: 100%;
+  width: 15.6rem;
+}
+qc-search-input[size=md] {
+  max-width: 100%;
+  width: 24.9rem;
+}
+qc-search-input[size=lg] {
+  max-width: 100%;
+  width: 52.8rem;
+}
+qc-search-input[size=xl] {
+  max-width: 100%;
+  width: 82.5rem;
+}
 
 .qc-search-bar, .qc-search-input {
   display: flex;
@@ -2271,26 +2293,6 @@ qc-textfield textarea:disabled {
   padding: 0.6rem;
 }
 
-[size=xs] {
-  max-width: 100%;
-}
-
-[size=sm] {
-  max-width: 100%;
-}
-
-[size=md] {
-  max-width: 100%;
-}
-
-[size=lg] {
-  max-width: 100%;
-}
-
-[size=xl] {
-  max-width: 100%;
-}
-
 [size=xs] input, [size=xs] input + .qc-textfield-charcount,
 [size=xs] textarea,
 [size=xs] textarea + .qc-textfield-charcount {
@@ -2657,6 +2659,9 @@ li[aria-selected=true] {
 }
 
 .qc-button {
+  --qc-color-link-focus: var(--qc-color-link-text);
+  --qc-color-link-hover: var(--qc-color-link-text);
+  --qc-color-link-visited: var(--qc-color-link-text);
   font-family: var(--qc-font-family-content);
   font-size: var(--qc-font-size-md);
   font-weight: var(--qc-font-weight-bold);
@@ -2664,7 +2669,7 @@ li[aria-selected=true] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.8rem;
+  gap: var(--qc-spacer-xs);
   box-sizing: border-box;
   min-width: 11.2rem;
   max-width: 36rem;
@@ -2690,6 +2695,7 @@ li[aria-selected=true] {
   border-radius: 0.4rem;
 }
 .qc-button.qc-primary {
+  --qc-color-link-text: var(--qc-color-white);
   color: var(--qc-color-white);
   background-color: var(--qc-color-blue-piv);
   border-color: var(--qc-color-blue-piv);
@@ -2714,40 +2720,42 @@ li[aria-selected=true] {
   color: var(--qc-color-white);
 }
 .qc-button.qc-secondary {
+  --qc-color-link-text: var(--qc-color-blue-piv);
   color: var(--qc-color-blue-piv);
   background-color: var(--qc-color-white);
   border-color: var(--qc-color-blue-piv);
 }
 .qc-button.qc-secondary:hover:not(:disabled), .qc-button.qc-secondary:focus:not(:disabled), .qc-button.qc-secondary:active:not(:disabled), .qc-button.qc-secondary.qc-hover, .qc-button.qc-secondary.qc-focus, .qc-button.qc-secondary.qc-active {
-  background-color: rgba(9, 87, 151, 0.16);
+  background-color: rgba(var(--qc-color-blue-piv-rgb), 0.16);
 }
 .qc-button.qc-secondary:focus:not(:disabled), .qc-button.qc-secondary.qc-focus {
   border-color: var(--qc-color-blue-dark);
   box-shadow: 0 0 0 2px var(--qc-color-blue-light);
 }
 .qc-button.qc-secondary:active:not(:disabled), .qc-button.qc-secondary.qc-active {
-  background-color: rgba(9, 87, 151, 0.08);
+  background-color: rgba(var(--qc-color-blue-piv-rgb), 0.08);
 }
 .qc-button.qc-secondary:disabled, .qc-button.qc-secondary.qc-disabled {
   border-color: var(--qc-color-grey-regular);
   color: var(--qc-color-grey-regular);
 }
 .qc-button.qc-tertiary {
+  --qc-color-link-text: var(--qc-color-blue-piv);
   color: var(--qc-color-blue-piv);
   background-color: var(--qc-color-white);
   border-color: var(--qc-color-white);
 }
 .qc-button.qc-tertiary:hover:not(:disabled), .qc-button.qc-tertiary.qc-hover {
-  background-color: rgba(197, 202, 210, 0.24);
+  background-color: rgba(var(--qc-color-grey-light-rgb), 0.24);
   text-decoration: underline;
 }
 .qc-button.qc-tertiary:focus:not(:disabled), .qc-button.qc-tertiary.qc-focus {
-  background-color: rgba(197, 202, 210, 0.24);
+  background-color: rgba(var(--qc-color-grey-light-rgb), 0.24);
   border-color: var(--qc-color-blue-dark);
   box-shadow: 0 0 0 2px var(--qc-color-blue-light);
 }
 .qc-button.qc-tertiary:active:not(:disabled), .qc-button.qc-tertiary.qc-active {
-  background-color: rgba(197, 202, 210, 0.16);
+  background-color: rgba(var(--qc-color-grey-light-rgb), 0.16);
 }
 .qc-button.qc-tertiary:disabled, .qc-button.qc-tertiary.qc-disabled {
   color: var(--qc-color-grey-regular);

package/public/css/qc-sdg.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .qc-search-input, .qc-search-input button, .qc-search-bar, .qc-search-bar button {
   position: relative;
   z-index: 10;
@@ -755,7 +756,7 @@ qc-icon {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMDEuNjkxIDMwMS42OTEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwMS42OTEgMzAxLjY5MTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMTE5LjE1MSwwIDEyOS42LDIxOC40MDYgMTcyLjA2LDIxOC40MDYgMTgyLjU0LDAiIC8+Cgk8cmVjdCB4PSIxMzAuNTYzIiB5PSIyNjEuMTY4IiB3aWR0aD0iNDAuNTI1IiBoZWlnaHQ9IjQwLjUyMyIgLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K");
 }
 
-.icon-external-link, .qc-ext-link-img, .qc-icon[data-img-type=external-link] {
+.icon-external-link, div.qc-ext-link-img, .qc-icon[data-img-type=external-link] {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOS4yMDciIGhlaWdodD0iMjkuNjA4IiB2aWV3Qm94PSIwIDAgMjkuMjA3IDI5LjYwOCI+CiAgPGcgaWQ9Ikdyb3VwZV8zOTQiIGRhdGEtbmFtZT0iR3JvdXBlIDM5NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEzOSAtNTQ1LjYyNCkiPgogICAgPGcgaWQ9Ikdyb3VwZV8zOTAiIGRhdGEtbmFtZT0iR3JvdXBlIDM5MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE3MjIuMDA4IDQzNy41MjQpIj4KICAgICAgPGcgaWQ9Ikdyb3VwZV8zODkiIGRhdGEtbmFtZT0iR3JvdXBlIDM4OSI+CiAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV82NzEiIGRhdGEtbmFtZT0iVHJhY8OpIDY3MSIgZD0iTTE4ODQuMDg3LDEyMC44MTRhMS4xNDUsMS4xNDUsMCwwLDAtMS4xNDUsMS4xNDV2MTMuNDU4SDE4NjMuM3YtMjAuMWgxMy4wNTdhMS4xNDYsMS4xNDYsMCwxLDAsMC0yLjI5MWgtMTUuMzQ4djI0LjY4M2gyNC4yMjVWMTIxLjk1OUExLjE0NiwxLjE0NiwwLDAsMCwxODg0LjA4NywxMjAuODE0WiIgLz4KICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzY3MiIgZGF0YS1uYW1lPSJUcmFjw6kgNjcyIiBkPSJNMTg3OS43OTIsMTA4LjFhMS4xNDYsMS4xNDYsMCwwLDAsMCwyLjI5MWg2LjUzM2wtMTQuMDE5LDE0LjE3YTEuMTQ2LDEuMTQ2LDAsMCwwLDEuNjI5LDEuNjExbDEzLjk4OS0xNC4xNHY2LjM3N2ExLjE0NiwxLjE0NiwwLDAsMCwyLjI5MSwwVjEwOC4xWiIgLz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==");
 }
 
@@ -826,10 +827,6 @@ 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);
 }
@@ -862,31 +859,36 @@ a .img-wrap {
   white-space: nowrap;
 }
 
-.qc-external-link .qc-ext-link-text {
-  white-space: normal;
-  text-decoration: underline;
-}
-
-.qc-ext-link-img {
+div.qc-ext-link-img {
   height: 0.6875em;
   width: 0.6875em;
+  display: inline-block;
   background: var(--qc-color-link-text);
   mask-size: 0.6875em;
-  display: inline-block;
-  mask-repeat: no-repeat;
+  margin-left: 4px;
 }
-a:visited .qc-ext-link-img {
+a:visited div.qc-ext-link-img {
   background: var(--qc-color-link-visited);
 }
-a:focus .qc-ext-link-img {
+a:focus div.qc-ext-link-img {
   background: var(--qc-color-link-hover);
 }
-a:hover .qc-ext-link-img {
+a:hover div.qc-ext-link-img {
   background: var(--qc-color-link-hover);
 }
-a:active .qc-ext-link-img {
+a:active div.qc-ext-link-img {
   background: var(--qc-color-link-active);
 }
+.img-wrap + div.qc-ext-link-img {
+  display: none;
+}
+
+.qc-external-link .qc-button {
+  gap: 0;
+}
+.qc-external-link .qc-button > .img-wrap::before {
+  content: " ";
+}
 
 p {
   margin-top: 0;
@@ -1802,6 +1804,26 @@ qc-search-input {
   width: 100%;
   max-width: 54.8rem;
 }
+qc-search-input[size=xs] {
+  max-width: 100%;
+  width: 6.3rem;
+}
+qc-search-input[size=sm] {
+  max-width: 100%;
+  width: 15.6rem;
+}
+qc-search-input[size=md] {
+  max-width: 100%;
+  width: 24.9rem;
+}
+qc-search-input[size=lg] {
+  max-width: 100%;
+  width: 52.8rem;
+}
+qc-search-input[size=xl] {
+  max-width: 100%;
+  width: 82.5rem;
+}
 
 .qc-search-bar, .qc-search-input {
   display: flex;
@@ -2271,26 +2293,6 @@ qc-textfield textarea:disabled {
   padding: 0.6rem;
 }
 
-[size=xs] {
-  max-width: 100%;
-}
-
-[size=sm] {
-  max-width: 100%;
-}
-
-[size=md] {
-  max-width: 100%;
-}
-
-[size=lg] {
-  max-width: 100%;
-}
-
-[size=xl] {
-  max-width: 100%;
-}
-
 [size=xs] input, [size=xs] input + .qc-textfield-charcount,
 [size=xs] textarea,
 [size=xs] textarea + .qc-textfield-charcount {
@@ -2657,6 +2659,9 @@ li[aria-selected=true] {
 }
 
 .qc-button {
+  --qc-color-link-focus: var(--qc-color-link-text);
+  --qc-color-link-hover: var(--qc-color-link-text);
+  --qc-color-link-visited: var(--qc-color-link-text);
   font-family: var(--qc-font-family-content);
   font-size: var(--qc-font-size-md);
   font-weight: var(--qc-font-weight-bold);
@@ -2664,7 +2669,7 @@ li[aria-selected=true] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.8rem;
+  gap: var(--qc-spacer-xs);
   box-sizing: border-box;
   min-width: 11.2rem;
   max-width: 36rem;
@@ -2690,6 +2695,7 @@ li[aria-selected=true] {
   border-radius: 0.4rem;
 }
 .qc-button.qc-primary {
+  --qc-color-link-text: var(--qc-color-white);
   color: var(--qc-color-white);
   background-color: var(--qc-color-blue-piv);
   border-color: var(--qc-color-blue-piv);
@@ -2714,40 +2720,42 @@ li[aria-selected=true] {
   color: var(--qc-color-white);
 }
 .qc-button.qc-secondary {
+  --qc-color-link-text: var(--qc-color-blue-piv);
   color: var(--qc-color-blue-piv);
   background-color: var(--qc-color-white);
   border-color: var(--qc-color-blue-piv);
 }
 .qc-button.qc-secondary:hover:not(:disabled), .qc-button.qc-secondary:focus:not(:disabled), .qc-button.qc-secondary:active:not(:disabled), .qc-button.qc-secondary.qc-hover, .qc-button.qc-secondary.qc-focus, .qc-button.qc-secondary.qc-active {
-  background-color: rgba(9, 87, 151, 0.16);
+  background-color: rgba(var(--qc-color-blue-piv-rgb), 0.16);
 }
 .qc-button.qc-secondary:focus:not(:disabled), .qc-button.qc-secondary.qc-focus {
   border-color: var(--qc-color-blue-dark);
   box-shadow: 0 0 0 2px var(--qc-color-blue-light);
 }
 .qc-button.qc-secondary:active:not(:disabled), .qc-button.qc-secondary.qc-active {
-  background-color: rgba(9, 87, 151, 0.08);
+  background-color: rgba(var(--qc-color-blue-piv-rgb), 0.08);
 }
 .qc-button.qc-secondary:disabled, .qc-button.qc-secondary.qc-disabled {
   border-color: var(--qc-color-grey-regular);
   color: var(--qc-color-grey-regular);
 }
 .qc-button.qc-tertiary {
+  --qc-color-link-text: var(--qc-color-blue-piv);
   color: var(--qc-color-blue-piv);
   background-color: var(--qc-color-white);
   border-color: var(--qc-color-white);
 }
 .qc-button.qc-tertiary:hover:not(:disabled), .qc-button.qc-tertiary.qc-hover {
-  background-color: rgba(197, 202, 210, 0.24);
+  background-color: rgba(var(--qc-color-grey-light-rgb), 0.24);
   text-decoration: underline;
 }
 .qc-button.qc-tertiary:focus:not(:disabled), .qc-button.qc-tertiary.qc-focus {
-  background-color: rgba(197, 202, 210, 0.24);
+  background-color: rgba(var(--qc-color-grey-light-rgb), 0.24);
   border-color: var(--qc-color-blue-dark);
   box-shadow: 0 0 0 2px var(--qc-color-blue-light);
 }
 .qc-button.qc-tertiary:active:not(:disabled), .qc-button.qc-tertiary.qc-active {
-  background-color: rgba(197, 202, 210, 0.16);
+  background-color: rgba(var(--qc-color-grey-light-rgb), 0.16);
 }
 .qc-button.qc-tertiary:disabled, .qc-button.qc-tertiary.qc-disabled {
   color: var(--qc-color-grey-regular);

package/public/index.html

@@ -599,7 +599,7 @@
     <h2 id="liens">Liens</h2>
 <qc-doc-exemple caption="Exemple de différents liens hypertexte selon leurs états.">
     <dl>
-        <dt>Lien interne</dt>
+        <dt>Lien non visité</dt>
         <dd><a href="#" class="not-visited">Lien interne</a></dd>
         <dd>
             <qc-external-link><a href="#" class="not-visited">Lien externe</a></qc-external-link>
@@ -1952,10 +1952,10 @@
 <qc-doc-exemple caption="Exemples 1 - différents champs de texte. Soumettre le formulaire pour voir les messages d'erreur.">
   <form id="formulaire-champs-textes">
     <qc-textfield
-            label="Nom complet"
             size="md"
             required
     >
+      <label>Nom complet</label>
       <input type="text"
              name="code-postal"
              placeholder="ex : Jean Tremblay"
@@ -2191,6 +2191,16 @@
             left-icon
             clear-aria-label="Effacer le texte"
     ></qc-search-input>
+
+    <br>
+
+    <qc-search-input
+            label="Nom de l'article"
+            size="md"
+            placeholder="Rechercher un article"
+            clear-aria-label="Effacer le texte"
+            left-icon
+    ></qc-search-input>
 </qc-doc-exemple>
 
 <h3>Documentation technique</h3>
@@ -2238,10 +2248,16 @@
             <td>Désactive le champ.</td>
         </tr>
         <tr>
-            <td>name</td>
+            <td>label</td>
             <td>Texte</td>
             <td>""</td>
-            <td>Nom du champ utilisé lors de la soumission du formulaire.</td>
+            <td>Texte du libellé du champ. Remplace automatiquement l'aria-label lorsqu'il est défini.</td>
+        </tr>
+        <tr>
+            <td>size</td>
+            <td>"xs", "sm", "md", "lg", "xl"</td>
+            <td>""</td>
+            <td>Largeur du champ</td>
         </tr>
         </tbody>
     </table>