fcad-core-dragon 2.0.1-beta.0 → 2.0.1

package/CHANGELOG

@@ -1,3 +1,15 @@
+2.0.1(12 juillet 2025)
+	carroussel : Changement du titre h3 pour une balise p avec une classe
+
+	TOC : Alignement vertical du libellé "terminé"
+
+2.0.1-beta.1(12 mai 2025)
+	Vitepress : La documentation du FCAD 2 est maintenant dans le dossier "documentation"
+
+	Correction de bogues avec les exercices à réponse ouverte, boutons radio et checkbox
+
+	Ajout de classe pour faciliter le css appliqué aux rétroactions
+
 2.0.0(31 mars 2025)
 	Menu : ponctuation des titres selon la langue (fr/en)
 

package/documentation/.vitepress/config.js

@@ -0,0 +1,114 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'FCAD 2',
+  description: 'La documentation technique du FCAD 2',
+  ignoreDeadLinks: true,
+  themeConfig: {
+    /* il8n */
+    lang: 'fr-CA',
+    outline: {
+      label: 'Contenu de la page'
+    },
+    docFooter: {
+      prev: 'Page précédente',
+      next: 'Page suivante'
+    },
+    darkModeSwitchTitle : 'Activer le thème sombre',
+    lightModeSwitchTitle : 'Activer le thème clair',
+    lastUpdated: {
+      text: 'Dernière modification ',
+      formatOptions: {
+        dateStyle: 'short',
+        timeStyle: 'short'
+      }
+    },
+    search: {
+      provider: 'local',
+      options:{
+        locales: {
+          root: {
+            translations: {
+              button: {
+                buttonText: 'Recherche',
+                buttonAriaLabel: 'Recherche'
+              },
+              modal: {
+                displayDetails: 'Afficher la vue détaillée',
+                resetButtonTitle: 'Réinitialiser',
+                backButtonTitle: 'Retour',
+                noResultsText: 'Aucun résultat trouvé pour',
+                footer: {
+                  selectText: 'accéder à la page',
+                  navigateText: 'parcourir les résultats',
+                  closeText: 'quitter la recherche',
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    /* END - il8n */
+
+    nav: [
+      { text: 'Accueil', link: '/' },
+      { text: 'Démarrage', link: '/demarrage' },
+      { text: 'Composants', link: '/composants' },
+      { text: 'Déploiement', link: '/deploiement' },
+      // { text: 'Examples', link: '/markdown-examples' }
+    ],
+    sidebar: [
+      { text: 'Composants critiques',
+        collapsed: true,
+        items: [
+          { text: 'app-base', link: '/composants_critiques/app-base' },
+          { text: 'app-base-module', link: '/composants_critiques/app-base-module' },
+          { text: 'app-base-page', link: '/composants_critiques/app-base-page' },
+          { text: 'main', link: '/composants_critiques/main' },
+        ]
+      },
+      {
+        text: 'Tous les composants',
+        collapsed: true,
+        items: [
+          { text: 'app-base-button', link: '/composants/app-base-button' },
+          { text: 'app-base-error-display', link: '/composants/app-base-error-display' },
+          { text: 'app-base-popover', link: '/composants/app-base-popover' },
+          { text: 'app-comp-audio', link: '/composants/app-comp-audio' },
+          { text: 'app-comp-branch-buttons', link: '/composants/app-comp-branch-buttons' },
+          { text: 'app-comp-button-progress', link: '/composants/app-comp-button-progress' },
+          { text: 'app-comp-carousel', link: '/composants/app-comp-carousel' },
+          { text: 'app-comp-container', link: '/composants/app-comp-container' },
+          { text: 'app-comp-input-checkbox-next', link: '/composants/app-comp-input-checkbox-next' },
+          { text: 'app-comp-input-dropdown-next', link: '/composants/app-comp-input-dropdown-next' },
+          { text: 'app-comp-input-radio-next', link: '/composants/app-comp-input-radio-next' },
+          { text: 'app-comp-input-text-next', link: '/composants/app-comp-input-text-next' },
+          { text: 'app-comp-input-text-table-next', link: '/composants/app-comp-input-text-table-next' },
+          { text: 'app-comp-input-text-to-fill-dropdown-next', link: '/composants/app-comp-input-text-to-fill-dropdown-next' },
+          { text: 'app-comp-input-text-to-fill-next', link: '/composants/app-comp-input-text-to-fill-next' },
+          { text: 'app-comp-jauge', link: '/composants/app-comp-jauge' },
+          { text: 'app-comp-menu', link: '/composants/app-comp-menu' },
+          { text: 'app-comp-menu-item', link: '/composants/app-comp-menu-item' },
+          { text: 'app-comp-navigation', link: '/composants/app-comp-navigation' },
+          { text: 'app-comp-note-call', link: '/composants/app-comp-note-call' },
+          { text: 'app-comp-note-credit', link: '/composants/app-comp-note-credit' },
+          { text: 'app-comp-play-bar-next', link: '/composants/app-comp-play-bar-next' },
+          { text: 'app-comp-play-bar-progress', link: '/composants/app-comp-play-bar-progress' },
+          { text: 'app-comp-pop-up-next', link: '/composants/app-comp-pop-up-next' },
+          { text: 'app-comp-quiz-next', link: '/composants/app-comp-quiz-next' },
+          { text: 'app-comp-quiz-recall', link: '/composants/app-comp-quiz-recall' },
+          // { text: 'app-comp-settings-menu', link: '/composants/app-comp-settings-menu' },
+          { text: 'app-comp-svg-next', link: '/composants/app-comp-svg-next' },
+          { text: 'app-comp-table-of-content', link: '/composants/app-comp-table-of-content' },
+          { text: 'app-comp-video-player', link: '/composants/app-comp-video-player' },
+        ]
+      }
+    ],
+
+    socialLinks: [
+      { icon: 'gitlab', link: 'https://git.crosemont.qc.ca/fcad/core/fcad-core-2' }
+    ]
+  }
+})

package/documentation/api-examples.md

@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

package/documentation/composants/app-base-button.md

@@ -0,0 +1,58 @@
+# Bouton de base
+
+Pour tous les boutons dans votre application, utiliser le bouton du FCAD. 
+
+
+
+## Aperçu
+
+Le FCAD génère un bouton à l'appel de la balise `<app-base-button/>`. Vous pouvez lui appliquer le style désiré en lui ajoutant une classe et/ou un *id*. Permet d'exécuter toute **Fonction** qui lui sera associée.
+
+## Référence du composant
+
+**AppBaseButton** 
+`<app-base-button/>`
+
+## Comportement
+
+De base le composant s'attend à exécuter une fonction. Il déclenche toutes les actions associées et émet l'évènement `click` (écoutable dans toute l'application). L'élément qui a été cliqué est aussi retourné en référence. Au clique, le bouton ajoute ou retire la classe `isClick` (qui peut servir pour créer un effet de toggle).  
+
+::: danger 👁️ Attention!
+
+Le bouton ne réagit pas au hover. Le bouton retourne l'information qu'au clique. Si vous développez un composant réactif au hover. Prenez cette information en compte 
+
+:::
+
+::: tip 💡 Note 
+Lorsque vous utilisez le bouton dans le développement d'un composant, pensez à rajouter son libellé au dictionnaire.
+:::
+
+## Paramètre 
+
+Voici les éléments paramétrables du bouton.
+
+| Propriété | Type             | Description                                                                                                                        | valeur par défaut | modifiable | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|:-------------|
+| name | Props type String | Nom du bouton pour les lecteurs d'écran ce label est fourni par le dictionnaire de l'application et devrait être le même que le label du bouton |   Si vide : Bouton   | oui |
+| type | String | Type d'élément html |  button  | non |
+| class | String | Toutes les classes par défaut du bouton. Si vous désirez en ajouter, ajoutez les lors de l'appelle du composant |  btn  | non |
+| :class | Object | Classe réactive selon les actions demandées |  isClick  | non |
+| :disabled | Props type boolean | Donne état **disabled** au bouton. Utiliser pour désactiver le bouton. Attribut important pour les lecteurs d'écran. |  false  | non |
+| @click | function | Fonction qui émet le clique et retourne l'élément cliqué |  click  | non |
+
+### Évènements
+
+`click`: Événement native émit lorsqu’un bouton actif est cliqué. Retourne l'élément cliqué en référence.
+
+`focus`: Événement native émit lorsqu’un bouton actif est en focus. Retourne l'élément en référence.
+
+## Style
+
+`.btn`[class]
+
+  Par défaut, le composant n'a que la classe `btn`, qui sert à tous les boutons de base de l'application. L'ajout de classe et *id* pour modifier son style devront être ajouter à l'appelle du composant. 
+
+## Accessibilité
+
+Le bouton de base vient avec un niveau d'accessibilité de base. Lors de son usage utilisez ces [paramètres](#parametre) pour respecter le critère du WCAG. 
+

package/documentation/composants/app-base-error-display.md

@@ -0,0 +1,59 @@
+# Error Display
+
+Composant pour l'affichage d'erreurs en environnement de développement. 
+
+## Aperçu
+
+Ce composant n'est pas affiché pour les étudiants. Il sert plutôt à avertir l'intégrateur/développeurs qu'il a une erreur avec l'utilisant de l'application. 
+
+Il y a deux niveaux de couleur pour l`affichage d'erreurs: 
+
+- Rouge (niveau majeur): Indique une erreur qui brise le fonctionnement de l'application (l'application n'est plus navigable ou plus rien ne peut être affiché)
+- Jaune (niveau mineur): Indique la présence d`erreurs qui ne brisent pas l'application (il y a une erreur, mais on peut toujours naviguer dans l'application et certains éléments sont affichables).
+
+## Référence du composant
+
+**AppBaseErrorDisplay** 
+`<app-base-error-display/>`
+
+## Comportement 
+
+Le composant affiche un message avec la liste d`erreurs passées en paramètre lors de son appel.
+ 
+
+::: danger Important
+
+Vous ne devez pas faire la gestion de vos erreurs à l'intérieur du composant. Gérez plutôt vos erreurs dans votre composant et faites-les afficher en utilisant `<app-base-error-display/>`. 
+
+Ajoutez les messages d'erreurs qui conviennent à votre situation. Copiez et collez la structure et modifiez le message pour convenir à votre situation.
+
+:::
+
+::: tip 💡 Note
+
+Si vous jugez qu'utiliser le composant est trop pour l'erreur à afficher, vous pouvez toujours afficher l'erreur dans votre composant. Utilisez les styles présents dans la feuille de style pour garder l'uniformité du look.
+
+:::
+
+## Paramètre 
+
+Voici les éléments paramétrable d'Error Display.
+
+::: details <b>Props</b>
+
+| Propriété | Type  | Description   | valeur par défaut | valeur accepté | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|:-------------|
+| errorMessage | String | Le type de message d'erreur à afficher | ' ' | 404 / errorPage / errorMenu / errorModule   | 
+| errorsList | Array | Liste des valeurs des erreurs que vous voulez afficher | tableau vide | un array de *string*  | 
+| docLink | String | lien url de référence pour plus d`information | [documentation](https://fcaddocumentation.netlify.com/guide/proceduries.html) | *string*  | 
+
+:::
+
+## Style
+
+Les classes et la structure sont déjà faites pour vous, si vous voulez rajouter un type d'erreur dupliquer la section avec sa structure. Vous remarquerez dans la feuille de style ce sont les seules couleurs en dur. Il en est ainsi pour ne pas créer d'erreur avec le style des cours. 
+
+## Accessibilité
+
+Ce composant sert seulement à éviter les codes 18 pour l'intégrateur, il n'est donc pas tenu d'être accessible.  
+

package/documentation/composants/app-base-popover.md

@@ -0,0 +1,68 @@
+# Popover
+
+Une infobulle pouvant être générée automatiquement.
+
+## Aperçu
+
+
+
+## Comportement
+
+Le target doit être reçu et appliqué avant l'ouverture/création du popover. 
+
+## Paramètre 
+
+### Target
+
+**Type:** `String`
+
+**Usage:** Obligatoire.
+
+Définit l'emplacement où pointe la flèche du popover. Doit être initaliser avant le "mounted" du popover.
+
+### Option
+
+**Type:** `Object`
+
+**Usage:** Obligatoire.
+
+Définit le contenu du popover. Il y a plusieurs paramettres de disponible:
+- title
+- content
+- cb_$cancel 
+- cb_$confirm
+
+#### Title
+
+**Type:** `String`
+
+**Usage:** Optionel.
+Le titre du popover.
+
+#### Content
+
+**Type:** `String`
+
+**Usage:** Optionel.
+
+Le contenu du popover en HTML.
+
+#### Cb_$cancel
+
+**Type:** `Function`
+
+**Usage:** Optionel.
+
+La function quand on clique sur le bouton "cancel". N'est pas utilisé par le OnBoarding.
+
+#### Cb_$confirm
+
+**Type:** `Function`
+
+**Usage:** Optionel.
+
+La function quand on clique sur le bouton "confim" qui est mis sur un délai pour le faire sur le "onHidden".
+
+## Style
+
+## Accessibilité

package/documentation/composants/app-comp-audio.md

@@ -0,0 +1,43 @@
+# Lecteur Audio 
+
+Composant pour afficher un audio et sont lecteur.
+
+## Aperçu
+
+Le composant permet d'afficher un lecteur audio et tout ses fonctionalités.
+
+## Comportement
+
+S'affiche dans un  en cadré avec un titre (obligatoire), une image (pas obligatoire), lecteur de média et un tirroire d'accordéon qui contient les sous-titre. 
+
+## Référence du composant
+
+`<app-comp-audio-player :aud-data="audioData2"/>` 
+
+
+## Paramètre 
+
+Aucun paramètre n'est nécessaire pour ce composant.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| id | string | identification unique | N/A |
+| mTitle | string | Titre afficher dans le composant (obligatoire) | N/A |
+| mSources | Objet | deux valeur `type` qui doit être déplacé comme `mp3` et `src` doit être la source du mp3 | N/A |
+| mPoster | n/a | Doit être le lien vers l'affiche de la vidéo (image qui seras visible si le vidéo ne load pas) | N/A |
+| mAlt | string | texte alternatif de l'image (si image il y a ) | N/A |
+| mTranscript | string | Structure html de la transcription afficher dans le composant | N/A |
+
+## Style
+
+`nomde class`[class]
+
+Aucune manipulation requise.
+
+
+## Accessibilité
+
+Aucune manipulation requise.
+

package/documentation/composants/app-comp-branch-buttons.md

@@ -0,0 +1,111 @@
+# Branch Buttons
+
+
+Composant qui génère des boutons d'embranchment dans une page.
+
+## Aperçu
+
+Le composant affiche des boutons ou cartes clicables dans la page. Chaque element est accompagné d'un affichage de l'état de progression dans la branche. 
+
+## Référence du composant
+
+**AppCompBranchButtons**
+`<app-comp-branch-buttons/>` 
+
+## Comportement
+
+Le composant génère des boutons pour chaque branch disponible dans l'activité. Il crée un lien qui ouvre une fenêtre latérale. Son état change de normal à complet, si le bas de la fenêtre latérale est visité. 
+
+Le composant affiche un message d'erreur, lorsque les données passées en reférence, durant la phase de production, ne sont pas valides.
+
+::: tip 💡 Note
+En cas d'erreur, pretez attention au message(s) affiché(s) par le composant dans la console du navigateur et dans la page. Cela vous permettra de savoir ce qui doit être corrigé.
+:::
+
+## Paramètre 
+
+### Props
+
+<table>
+  <thead>
+    <tr>
+      <th>Propriété</th>
+      <th>Type</th>
+      <th>Description</th>
+      <th>valeur par défaut</th>
+      <th>valeur accepté</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>customButtons (optionnelle) </td>
+      <td>Array</td>
+      <td>Tableau d'objets contenant les informations pour chaque bouton d'embranchement.
+      </td>
+      <td>null</td>
+      <td> Un Array d'Object (name, brchName)
+        <br><br>Exemple pour une page avec 2 embranchments chaque objet bouton sera defini comme suit:<br><br>
+        <pre class="code-in-table">
+          <code>
+            [
+              { name: 'bouton_A02_P01_E01', brchName: 'P02_E01' },
+              { name: 'bouton_A02_P01_E02',brchName: 'P02_E02' }
+            ]
+          </code>
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>cards (optionnelle) </td>
+      <td>Array</td>
+      <td>Tableau d'objets contenant les informations pour chaque bouton d'embranchement. Chaque bouton est presenté sous forme d'une carte
+      </td>
+      <td>null</td>
+      <td> Un Array d'Object (imgFile, title, text, brchName, btnTitle)
+        <br><br>Exemple chaque carte d'embranchments sera un objet défini de la forme ci-dessous:<br><br>
+        <pre class="code-in-table">
+          <code>
+            [
+              {
+                imgFile: 'imgCarte.jpg', (l'image doit se trouver dans le dossier src/assets/img du projet)
+                imgAlt: 'Test img 1',
+                title: 'Titre embranchment',
+                text: 'Ceci est un embranchment factice, affiché sous la forme de carte.'
+                brchName: 'P02_E01'
+                btnTitle: ''
+              }
+            ]
+          </code>
+        </pre>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+
+### Slots
+
+Un template custom est disponible pour habiller chaque bouton en faisant reférence au nom de la branch qui le lie. Ceci n'est applicable qu'avec l'utilisation de la propriété `customButtons`
+
+
+
+Exemple:
+
+```vue
+<app-comp-branch-buttons :custom-buttons="buttonData">
+  <template #bouton_A02_P01_E01>
+      <h1>Peu</h1>
+    </template>
+    <template #bouton_A02_P01_E02>
+      <h1>Peut être ici le titre d'une page</h1>
+    </template>
+</app-comp-branch-buttons>
+```
+
+Si le composant est appelée sans prop, les boutons par défaut seront générés.
+
+## Style
+
+
+## Accessibilité
+une variable `imgAlt` est disponible sur chaque objet, pour définir la valeur de l'attribut  `alt` de l'image de la carte.

package/documentation/composants/app-comp-button-progress.md

@@ -0,0 +1,53 @@
+---
+title: Model de page
+
+---
+::: warning  🚩 Important
+  Utilisez ce model comme depart pour écrire la page de votre composant:
+
+  1) Copiez /dubliquez cette page
+  2) Renommez votre copie avec le nom de votre composant
+  3) Édtitez la page en rempliçant les sections qui conserne votre composant.  
+:::
+
+
+Composant pour ....  
+
+## Aperçu
+
+Le composant permet de...
+Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
+
+## Comportement
+
+Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
+
+## Référence du composant
+
+**ModelComposantPage** `<model-composant/>` 
+
+
+## Paramètre 
+
+Aucun paramètre n'est nécessaire pour ce composant.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
+
+### Slots
+`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
+
+
+## Style
+
+`nomde class`[class]
+
+Aucune manipulation requise.
+
+
+## Accessibilité
+Aucune manipulation requise.
+

package/documentation/composants/app-comp-carousel.md

@@ -0,0 +1,53 @@
+---
+title: Model de page
+
+---
+::: warning  🚩 Important
+  Utilisez ce model comme depart pour écrire la page de votre composant:
+
+  1) Copiez /dubliquez cette page
+  2) Renommez votre copie avec le nom de votre composant
+  3) Édtitez la page en rempliçant les sections qui conserne votre composant.  
+:::
+
+
+Composant pour ....  
+
+## Aperçu
+
+Le composant permet de...
+Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
+
+## Comportement
+
+Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
+
+## Référence du composant
+
+**ModelComposantPage** `<model-composant/>` 
+
+
+## Paramètre 
+
+Aucun paramètre n'est nécessaire pour ce composant.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
+
+### Slots
+`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
+
+
+## Style
+
+`nomde class`[class]
+
+Aucune manipulation requise.
+
+
+## Accessibilité
+Aucune manipulation requise.
+

package/documentation/composants/app-comp-container.md

@@ -0,0 +1,53 @@
+---
+title: Model de page
+
+---
+::: warning  🚩 Important
+  Utilisez ce model comme depart pour écrire la page de votre composant:
+
+  1) Copiez /dubliquez cette page
+  2) Renommez votre copie avec le nom de votre composant
+  3) Édtitez la page en rempliçant les sections qui conserne votre composant.  
+:::
+
+
+Composant pour ....  
+
+## Aperçu
+
+Le composant permet de...
+Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
+
+## Comportement
+
+Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
+
+## Référence du composant
+
+**ModelComposantPage** `<model-composant/>` 
+
+
+## Paramètre 
+
+Aucun paramètre n'est nécessaire pour ce composant.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
+
+### Slots
+`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
+
+
+## Style
+
+`nomde class`[class]
+
+Aucune manipulation requise.
+
+
+## Accessibilité
+Aucune manipulation requise.
+