npm - qc-trousse-sdg - Versions diffs - 1.4.1 → 1.4.3 - Mend

qc-trousse-sdg 1.4.1 → 1.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/index.html ADDED Viewed

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta http-equiv="refresh" content="0;url=/public/index.html" />
+</head>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "qc-trousse-sdg",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Trousse de développement du Système de design gouvernemental du Québec",
   "main": "index.js",
   "scripts": {
@@ -8,7 +8,7 @@
     "preversion": "./scripts/check-release-note.sh",
     "version": "./scripts/compile-doc.sh",
     "build": "rollup -c --bundleConfigAsCjs",
-    "start": "sirv public",
+    "start": "sirv .",
     "rewrite-bootstrap": "gulp rewriteBs",
     "build-images-scss-map": "node ./scripts/buildImagesMap.js"
   },

package/plugins/buildSvelteTests.js ADDED Viewed

@@ -0,0 +1,36 @@
+import fs from 'fs';
+import path from 'path';
+import glob from 'glob';
+function buildSvelteTests({input, ignorePathsFile}) {
+    return {
+        name: "build-svelte-tests",
+        buildStart() {
+            const testsRoot = path.resolve(input);
+            const resolvedIgnorePathsFile = ignorePathsFile ? `${testsRoot}/${ignorePathsFile}` : null;
+            const ignorePaths = resolvedIgnorePathsFile ?
+                JSON.parse(fs.readFileSync(resolvedIgnorePathsFile, 'utf-8'))
+                : [];
+            const partialPaths = glob.sync('**/*-baseline.spec.ts', {
+                cwd: testsRoot,
+                absolute: true,
+                ignore: ignorePaths
+            });
+            partialPaths.forEach(partialPath => {
+                this.addWatchFile(partialPath);
+                let testCode = fs.readFileSync(partialPath, 'utf-8');
+                testCode = testCode.replace(/Baseline\.test\.html/g, "Svelte.test.html");
+                testCode = testCode.replace(/baseline/g, "svelte");
+                const outputPath = partialPath.replace(/-baseline\.spec\.ts/g, "-svelte.spec.ts");
+                fs.writeFileSync(outputPath, testCode, 'utf-8');
+            });
+        }
+    }
+}
+export default buildSvelteTests;

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

@@ -950,7 +950,7 @@ dd {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
-  src: url("../../dist/fonts/open-sans-v43-latin-regular.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-regular.woff2") format("woff2");
 }
 /* open-sans-italic - latin */
 @font-face {
@@ -958,7 +958,7 @@ dd {
   font-family: "Open Sans";
   font-style: italic;
   font-weight: 400;
-  src: url("../../dist/fonts/open-sans-v43-latin-italic.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-italic.woff2") format("woff2");
 }
 /* open-sans-500 - latin */
 @font-face {
@@ -966,7 +966,7 @@ dd {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 500;
-  src: url("../../dist/fonts/open-sans-v43-latin-500.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-500.woff2") format("woff2");
 }
 /* open-sans-500italic - latin */
 @font-face {
@@ -974,7 +974,7 @@ dd {
   font-family: "Open Sans";
   font-style: italic;
   font-weight: 500;
-  src: url("../../dist/fonts/open-sans-v43-latin-500italic.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-500italic.woff2") format("woff2");
 }
 /* open-sans-600 - latin */
 @font-face {
@@ -982,7 +982,7 @@ dd {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 600;
-  src: url("../../dist/fonts/open-sans-v43-latin-600.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-600.woff2") format("woff2");
 }
 /* open-sans-600italic - latin */
 @font-face {
@@ -990,7 +990,7 @@ dd {
   font-family: "Open Sans";
   font-style: italic;
   font-weight: 600;
-  src: url("../../dist/fonts/open-sans-v43-latin-600italic.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-600italic.woff2") format("woff2");
 }
 /* open-sans-700 - latin */
 @font-face {
@@ -998,7 +998,7 @@ dd {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 700;
-  src: url("../../dist/fonts/open-sans-v43-latin-700.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-700.woff2") format("woff2");
 }
 /* open-sans-700italic - latin */
 @font-face {
@@ -1006,7 +1006,7 @@ dd {
   font-family: "Open Sans";
   font-style: italic;
   font-weight: 700;
-  src: url("../../dist/fonts/open-sans-v43-latin-700italic.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-700italic.woff2") format("woff2");
 }
 /* roboto-regular - latin */
 @font-face {
@@ -1014,7 +1014,7 @@ dd {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 400;
-  src: url("../../dist/fonts/roboto-v48-latin-regular.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-regular.woff2") format("woff2");
 }
 /* roboto-italic - latin */
 @font-face {
@@ -1022,7 +1022,7 @@ dd {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 400;
-  src: url("../../dist/fonts/roboto-v48-latin-italic.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-italic.woff2") format("woff2");
 }
 /* roboto-500 - latin */
 @font-face {
@@ -1030,7 +1030,7 @@ dd {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 500;
-  src: url("../../dist/fonts/roboto-v48-latin-500.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-500.woff2") format("woff2");
 }
 /* roboto-500italic - latin */
 @font-face {
@@ -1038,7 +1038,7 @@ dd {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 500;
-  src: url("../../dist/fonts/roboto-v48-latin-500italic.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-500italic.woff2") format("woff2");
 }
 /* roboto-600 - latin */
 @font-face {
@@ -1046,7 +1046,7 @@ dd {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 600;
-  src: url("../../dist/fonts/roboto-v48-latin-600.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-600.woff2") format("woff2");
 }
 /* roboto-600italic - latin */
 @font-face {
@@ -1054,7 +1054,7 @@ dd {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 600;
-  src: url("../../dist/fonts/roboto-v48-latin-600italic.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-600italic.woff2") format("woff2");
 }
 /* roboto-700 - latin */
 @font-face {
@@ -1062,7 +1062,7 @@ dd {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 700;
-  src: url("../../dist/fonts/roboto-v48-latin-700.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-700.woff2") format("woff2");
 }
 /* roboto-700italic - latin */
 @font-face {
@@ -1070,7 +1070,7 @@ dd {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 700;
-  src: url("../../dist/fonts/roboto-v48-latin-700italic.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-700italic.woff2") format("woff2");
 }
 hr {
   margin: var(--qc-spacer-lg) 0;
@@ -1732,6 +1732,7 @@ qc-alert [slot] a, qc-alert:not([slot=content]) a {
   background-color: var(--qc-color-blue-regular);
   outline: 2px solid var(--qc-color-blue-light);
   border: 2px solid var(--qc-color-blue-dark);
+  outline-offset: 0;
   box-shadow: 0 var(--qc-box_shadow-2-offset) var(--qc-box_shadow-2-blur) var(--qc-color-box_shadow);
 }
 .qc-to-top:active {
@@ -1903,6 +1904,10 @@ label.qc-selection-button:hover::before {
 }
 label.qc-selection-button:has(input:checked)::before {
   background-color: var(--qc-color-blue-pale);
+  border-color: var(--qc-color-blue-light);
+}
+label.qc-selection-button:focus, label.qc-selection-button:has(input:focus)::before {
+  border-color: inherit;
 }
 label.qc-selection-button:has(input:disabled)::before {
   background-color: var(--qc-color-grey-pale);
@@ -2110,7 +2115,7 @@ input[type=checkbox].qc-choicefield.qc-compact:checked::after {
 }
 .qc-label, qc-textfield label,
 .qc-textfield label {
-  font-weight: var(--qc-font-weight-content-medium);
+  font-weight: var(--qc-font-weight-content-bold);
   display: block;
 }
 .qc-label.qc-compact, qc-textfield label.qc-compact,
@@ -2151,7 +2156,7 @@ qc-textfield textarea {
   position: relative;
   color: var(--qc-color-text-primary);
   background-color: var(--qc-color-background);
-  padding: 0.8rem;
+  padding: 0.7rem;
   text-overflow: ellipsis;
   overflow: hidden;
   margin-top: 0.4rem;
@@ -2170,7 +2175,7 @@ qc-textfield textarea:focus,
 qc-textfield textarea:focus-visible {
   outline: 2px solid var(--qc-color-formfield-focus-outline);
   border: 2px solid var(--qc-color-formfield-focus-border);
-  padding: 0.7rem;
+  padding: 0.6rem;
 }
 .qc-textfield input:disabled, qc-textfield input:disabled,
 .qc-textfield textarea:disabled,
@@ -2183,7 +2188,7 @@ qc-textfield textarea:disabled {
 [invalid] > textarea {
   border-color: var(--qc-color-red-regular);
   border-width: 2px;
-  padding: 0.7rem;
+  padding: 0.6rem;
 }
 .qc-textfield input, qc-textfield input,
@@ -2428,7 +2433,7 @@ li[aria-selected=true] {
   display: flex;
   width: 100%;
   justify-content: space-between;
-  height: 4rem;
+  height: 3.8rem;
   align-items: center;
   background-color: var(--qc-color-background);
   border: none;
@@ -2544,6 +2549,9 @@ li[aria-selected=true] {
 .qc-dropdown-list.qc-dropdown-list-invalid {
   border: 0.2rem solid var(--qc-color-red-regular) !important;
 }
+.qc-dropdown-list.qc-dropdown-list-invalid > .qc-dropdown-button {
+  height: 3.6rem;
+}
 .qc-dropdown-list-search {
   margin: var(--qc-spacer-xs);
@@ -2582,11 +2590,10 @@ li[aria-selected=true] {
   min-width: 11.2rem;
   max-width: 36rem;
   min-height: 5.6rem;
-  padding: 1.6rem 2.4rem;
+  padding: 1.4rem 2.2rem;
   vertical-align: middle;
-  border: 2px solid transparent;
+  border: 0.2rem solid transparent;
   cursor: pointer;
-  margin-right: 3.2rem;
   margin-bottom: var(--qc-spacer-md);
 }
 .qc-button:focus, .qc-button:focus-visible {
@@ -2596,9 +2603,8 @@ li[aria-selected=true] {
   font-weight: var(--qc-font-weight-semi-bold);
   min-width: 8rem;
   min-height: 4rem;
-  padding: 0.8rem 1.6rem;
-  border-width: 1px;
-  margin-right: var(--qc-spacer-md);
+  padding: 0.7rem 1.5rem;
+  border-width: 0.1rem;
   margin-bottom: var(--qc-spacer-sm);
 }
 .qc-button.qc-button-rounded {
@@ -2719,4 +2725,13 @@ li[aria-selected=true] {
 }
 a.qc-button {
   text-decoration: none;
+}
+.qc-button-group {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 3.2rem;
+}
+.qc-button-group.qc-compact {
+  column-gap: var(--qc-spacer-md);
 }

package/public/css/qc-sdg.css CHANGED Viewed

@@ -950,7 +950,7 @@ dd {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
-  src: url("../../dist/fonts/open-sans-v43-latin-regular.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-regular.woff2") format("woff2");
 }
 /* open-sans-italic - latin */
 @font-face {
@@ -958,7 +958,7 @@ dd {
   font-family: "Open Sans";
   font-style: italic;
   font-weight: 400;
-  src: url("../../dist/fonts/open-sans-v43-latin-italic.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-italic.woff2") format("woff2");
 }
 /* open-sans-500 - latin */
 @font-face {
@@ -966,7 +966,7 @@ dd {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 500;
-  src: url("../../dist/fonts/open-sans-v43-latin-500.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-500.woff2") format("woff2");
 }
 /* open-sans-500italic - latin */
 @font-face {
@@ -974,7 +974,7 @@ dd {
   font-family: "Open Sans";
   font-style: italic;
   font-weight: 500;
-  src: url("../../dist/fonts/open-sans-v43-latin-500italic.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-500italic.woff2") format("woff2");
 }
 /* open-sans-600 - latin */
 @font-face {
@@ -982,7 +982,7 @@ dd {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 600;
-  src: url("../../dist/fonts/open-sans-v43-latin-600.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-600.woff2") format("woff2");
 }
 /* open-sans-600italic - latin */
 @font-face {
@@ -990,7 +990,7 @@ dd {
   font-family: "Open Sans";
   font-style: italic;
   font-weight: 600;
-  src: url("../../dist/fonts/open-sans-v43-latin-600italic.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-600italic.woff2") format("woff2");
 }
 /* open-sans-700 - latin */
 @font-face {
@@ -998,7 +998,7 @@ dd {
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 700;
-  src: url("../../dist/fonts/open-sans-v43-latin-700.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-700.woff2") format("woff2");
 }
 /* open-sans-700italic - latin */
 @font-face {
@@ -1006,7 +1006,7 @@ dd {
   font-family: "Open Sans";
   font-style: italic;
   font-weight: 700;
-  src: url("../../dist/fonts/open-sans-v43-latin-700italic.woff2") format("woff2");
+  src: url("../fonts/open-sans-v43-latin-700italic.woff2") format("woff2");
 }
 /* roboto-regular - latin */
 @font-face {
@@ -1014,7 +1014,7 @@ dd {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 400;
-  src: url("../../dist/fonts/roboto-v48-latin-regular.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-regular.woff2") format("woff2");
 }
 /* roboto-italic - latin */
 @font-face {
@@ -1022,7 +1022,7 @@ dd {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 400;
-  src: url("../../dist/fonts/roboto-v48-latin-italic.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-italic.woff2") format("woff2");
 }
 /* roboto-500 - latin */
 @font-face {
@@ -1030,7 +1030,7 @@ dd {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 500;
-  src: url("../../dist/fonts/roboto-v48-latin-500.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-500.woff2") format("woff2");
 }
 /* roboto-500italic - latin */
 @font-face {
@@ -1038,7 +1038,7 @@ dd {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 500;
-  src: url("../../dist/fonts/roboto-v48-latin-500italic.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-500italic.woff2") format("woff2");
 }
 /* roboto-600 - latin */
 @font-face {
@@ -1046,7 +1046,7 @@ dd {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 600;
-  src: url("../../dist/fonts/roboto-v48-latin-600.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-600.woff2") format("woff2");
 }
 /* roboto-600italic - latin */
 @font-face {
@@ -1054,7 +1054,7 @@ dd {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 600;
-  src: url("../../dist/fonts/roboto-v48-latin-600italic.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-600italic.woff2") format("woff2");
 }
 /* roboto-700 - latin */
 @font-face {
@@ -1062,7 +1062,7 @@ dd {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 700;
-  src: url("../../dist/fonts/roboto-v48-latin-700.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-700.woff2") format("woff2");
 }
 /* roboto-700italic - latin */
 @font-face {
@@ -1070,7 +1070,7 @@ dd {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 700;
-  src: url("../../dist/fonts/roboto-v48-latin-700italic.woff2") format("woff2");
+  src: url("../fonts/roboto-v48-latin-700italic.woff2") format("woff2");
 }
 hr {
   margin: var(--qc-spacer-lg) 0;
@@ -1732,6 +1732,7 @@ qc-alert [slot] a, qc-alert:not([slot=content]) a {
   background-color: var(--qc-color-blue-regular);
   outline: 2px solid var(--qc-color-blue-light);
   border: 2px solid var(--qc-color-blue-dark);
+  outline-offset: 0;
   box-shadow: 0 var(--qc-box_shadow-2-offset) var(--qc-box_shadow-2-blur) var(--qc-color-box_shadow);
 }
 .qc-to-top:active {
@@ -1903,6 +1904,10 @@ label.qc-selection-button:hover::before {
 }
 label.qc-selection-button:has(input:checked)::before {
   background-color: var(--qc-color-blue-pale);
+  border-color: var(--qc-color-blue-light);
+}
+label.qc-selection-button:focus, label.qc-selection-button:has(input:focus)::before {
+  border-color: inherit;
 }
 label.qc-selection-button:has(input:disabled)::before {
   background-color: var(--qc-color-grey-pale);
@@ -2110,7 +2115,7 @@ input[type=checkbox].qc-choicefield.qc-compact:checked::after {
 }
 .qc-label, qc-textfield label,
 .qc-textfield label {
-  font-weight: var(--qc-font-weight-content-medium);
+  font-weight: var(--qc-font-weight-content-bold);
   display: block;
 }
 .qc-label.qc-compact, qc-textfield label.qc-compact,
@@ -2151,7 +2156,7 @@ qc-textfield textarea {
   position: relative;
   color: var(--qc-color-text-primary);
   background-color: var(--qc-color-background);
-  padding: 0.8rem;
+  padding: 0.7rem;
   text-overflow: ellipsis;
   overflow: hidden;
   margin-top: 0.4rem;
@@ -2170,7 +2175,7 @@ qc-textfield textarea:focus,
 qc-textfield textarea:focus-visible {
   outline: 2px solid var(--qc-color-formfield-focus-outline);
   border: 2px solid var(--qc-color-formfield-focus-border);
-  padding: 0.7rem;
+  padding: 0.6rem;
 }
 .qc-textfield input:disabled, qc-textfield input:disabled,
 .qc-textfield textarea:disabled,
@@ -2183,7 +2188,7 @@ qc-textfield textarea:disabled {
 [invalid] > textarea {
   border-color: var(--qc-color-red-regular);
   border-width: 2px;
-  padding: 0.7rem;
+  padding: 0.6rem;
 }
 .qc-textfield input, qc-textfield input,
@@ -2428,7 +2433,7 @@ li[aria-selected=true] {
   display: flex;
   width: 100%;
   justify-content: space-between;
-  height: 4rem;
+  height: 3.8rem;
   align-items: center;
   background-color: var(--qc-color-background);
   border: none;
@@ -2544,6 +2549,9 @@ li[aria-selected=true] {
 .qc-dropdown-list.qc-dropdown-list-invalid {
   border: 0.2rem solid var(--qc-color-red-regular) !important;
 }
+.qc-dropdown-list.qc-dropdown-list-invalid > .qc-dropdown-button {
+  height: 3.6rem;
+}
 .qc-dropdown-list-search {
   margin: var(--qc-spacer-xs);
@@ -2582,11 +2590,10 @@ li[aria-selected=true] {
   min-width: 11.2rem;
   max-width: 36rem;
   min-height: 5.6rem;
-  padding: 1.6rem 2.4rem;
+  padding: 1.4rem 2.2rem;
   vertical-align: middle;
-  border: 2px solid transparent;
+  border: 0.2rem solid transparent;
   cursor: pointer;
-  margin-right: 3.2rem;
   margin-bottom: var(--qc-spacer-md);
 }
 .qc-button:focus, .qc-button:focus-visible {
@@ -2596,9 +2603,8 @@ li[aria-selected=true] {
   font-weight: var(--qc-font-weight-semi-bold);
   min-width: 8rem;
   min-height: 4rem;
-  padding: 0.8rem 1.6rem;
-  border-width: 1px;
-  margin-right: var(--qc-spacer-md);
+  padding: 0.7rem 1.5rem;
+  border-width: 0.1rem;
   margin-bottom: var(--qc-spacer-sm);
 }
 .qc-button.qc-button-rounded {
@@ -2721,6 +2727,15 @@ a.qc-button {
   text-decoration: none;
 }
+.qc-button-group {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 3.2rem;
+}
+.qc-button-group.qc-compact {
+  column-gap: var(--qc-spacer-md);
+}
 .qc-container,
 .qc-container-fluid,
 .qc-container-lg,

package/public/index.html CHANGED Viewed

@@ -402,7 +402,7 @@
             <td>label</td>
             <td>Texte</td>
             <td>""</td>
-            <td>Texte alternatif pour l’accessibilité. Sert de libellé pour les lecteurs d’écran.</td>
+            <td>Texte alternatif pour l’accessibilité. Sert de libellé pour les lecteurs d’écran. Si absent, l'icône sera masquée au lecteur d'écran (via l'attribut <code>aria-hidden</code></td>
         </tr>
         <tr>
             <td>rotate</td>
@@ -1301,7 +1301,7 @@
         </div>
     </div>
-    <div>
+    <div class="qc-button-group">
         <button class="qc-button qc-simple">
             <qc-icon type="information"></qc-icon>
             Action
@@ -1312,7 +1312,7 @@
             Action
         </button>
     </div>
-    <div>
+    <div class="qc-button-group qc-compact">
         <button class="qc-button qc-simple qc-compact">
             <qc-icon type="information"></qc-icon>
             Action
@@ -1327,7 +1327,7 @@
 </qc-doc-exemple>
 <qc-doc-exemple caption="Exemples de boutons avec icône.<br/>NB: voir la section <a href='#icons'>Icônes</a> pour plus de détails concernant le composant <code>qc-icon</code>.">
-    <div>
+    <div class="qc-button-group">
         <button class="qc-button qc-primary">
             <qc-icon type="arrow-up" rotate="-90"></qc-icon>
             Précédent
@@ -1341,6 +1341,7 @@
 </qc-doc-exemple>
 <qc-doc-exemple caption="Exemples avec un lien et un bouton de soumission.">
+    <div class="qc-button-group">
         <a href="javascript:void(0);"
            class="qc-button qc-primary"
            role="button"
@@ -1348,11 +1349,13 @@
             Action
         </a>
         <input type="submit" value="Action" class="qc-button qc-primary" />
+    </div>
 </qc-doc-exemple>
 <h3>Classes CSS</h3>
+<h4>Classes de boutons</h4>
 <div class="table-overflow">
     <table class="qc-table qc-striped">
         <thead>
@@ -1398,6 +1401,28 @@
     </table>
 </div>
+<h4>Classes pour le contenant parent d'un groupe de boutons</h4>
+<div class="table-overflow">
+    <table class="qc-table qc-striped">
+        <thead>
+        <tr>
+            <th>Classe / Attribut</th>
+            <th>Description</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td><code>qc‑button-group</code></td>
+            <td>Gère les espacements horizontaux entre les boutons en groupe</td>
+        </tr>
+        <tr>
+            <td><code>qc‑compact</code></td>
+            <td>Espacements au format compact des boutons en groupe</td>
+        </tr>
+        </tbody>
+    </table>
+</div>
     <hr/>
     <h2 id="formulaires">Formulaires</h2>
     <h3 id="radios-checkboxes">Boutons radios et cases à cocher</h3>