@spw-ds/spw-stencil-library 1.10.2 → 1.11.0

package/dist/collection/stories/components/spw-box/spw-box.stories.js

@@ -0,0 +1,312 @@
+let componentsData;
+try {
+    componentsData = require('../../../../dist/components_json.json');
+}
+catch (error) {
+    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
+    componentsData = {};
+}
+import { withComponentControls, toKebabCase } from "../../../utils/utils";
+const elementTag = 'spw-box';
+const argTypes = withComponentControls(componentsData, { tag: elementTag });
+const meta = {
+    title: 'Composants/Box',
+    component: elementTag,
+    argTypes,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
+
+La Box est un conteneur générique servant de structure d'accueil pour différents types de contenus. Elle permet de cadrer visuellement une information, de la détacher du reste de la page et de faciliter la lecture, sans imposer de contenu ou de hiérarchie prédéfinie.
+
+## Styles
+
+- **Avec fond** : fond blanc, coins arrondis et ombre légère (has-radius + has-shadow + padding). Détache clairement le contenu du reste de la page et crée un point de focalisation visuel.
+- **Sans fond** : sans fond, sans ombre, sans bord arrondi, sans padding. S'intègre directement dans le flux de la page. À utiliser quand le cadre visuel n'est pas nécessaire mais qu'une structuration logique reste utile.
+
+## Fonctionnalités
+
+- Padding configurable (none, small, medium, large)
+- Ombre portée et border-radius optionnels
+- Position sticky à partir du breakpoint lg (1024px)
+- Mode collapsible avec animation et breakpoint configurable (sm, md, lg, xl, xxl, always)
+- Slot header pour le titre, toujours visible même en mode collapsible
+- Icône chevron animée au collapse/expand
+
+[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/225c31-box)
+        `,
+            },
+        },
+    },
+};
+export default meta;
+const Template = args => {
+    const element = document.createElement(elementTag);
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
+    Object.entries(args).forEach(([key, val]) => {
+        if (masterProps.includes(key)) {
+            element.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    element.innerHTML = /* HTML */ `
+    <div slot="header">
+      <h2 class="spw-ds-typography-heading-03 mb-0">Titre de la box</h2>
+    </div>
+    <div class="spw-ds-typography-body-01 mt-3">
+      <p class="mb-3">Contenu de la box. Ce composant est un conteneur polyvalent qui peut accueillir n'importe quel type de contenu : texte, listes, composants, etc.</p>
+      <spw-group orientation="vertical">
+        <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
+        <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
+      </spw-group>
+    </div>
+  `;
+    return element;
+};
+export const Default = Template.bind({});
+Default.args = {
+    padding: 'medium',
+    hasRadius: true,
+    hasShadow: true,
+};
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Box de base avec padding medium, border-radius et ombre portée. Cas d'usage type : widget de sidebar, encart de contenu secondaire.`,
+        },
+    },
+};
+export const Styles = () => {
+    const container = document.createElement('div');
+    container.style.cssText = 'display: flex; flex-direction: column; gap: 24px;';
+    container.innerHTML = /* HTML */ `
+    <spw-box padding="medium" has-radius="true" has-shadow="true">
+      <div slot="header">
+        <h3 class="spw-ds-typography-heading-04 mb-0">Style avec fond</h3>
+      </div>
+      <div class="mt-3">
+        <p class="spw-ds-typography-body-01 mb-3">
+          Fond blanc, coins arrondis et ombre légère. Détache clairement le contenu du reste de la page et crée un point de focalisation visuel.
+        </p>
+        <spw-group orientation="vertical">
+          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
+          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
+        </spw-group>
+      </div>
+    </spw-box>
+    <spw-box>
+      <div slot="header">
+        <h3 class="spw-ds-typography-heading-04 mb-0">Style sans fond</h3>
+      </div>
+      <div class="mt-3">
+        <p class="spw-ds-typography-body-01 mb-3">
+          Sans fond, sans ombre, sans border-radius, sans padding. S'intègre directement dans le flux de la page. À utiliser quand le cadre visuel n'est pas nécessaire mais qu'une
+          structuration logique reste utile.
+        </p>
+        <spw-group orientation="vertical">
+          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
+          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
+        </spw-group>
+      </div>
+    </spw-box>
+  `;
+    return container;
+};
+Styles.parameters = {
+    docs: {
+        description: {
+            story: `Les deux styles principaux de la box. Style avec fond (has-radius + has-shadow + padding) : crée un point de focalisation visuel fort. Style sans fond (aucune prop de décoration) : structuration logique discrète, intégrée dans le flux de la page.`,
+        },
+    },
+};
+export const PaddingVariants = () => {
+    const container = document.createElement('div');
+    container.style.cssText = 'display: flex; flex-direction: column; gap: 16px;';
+    container.innerHTML = /* HTML */ `
+    <spw-box has-radius="true" has-shadow="false" padding="none">
+      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Padding none (défaut)</h3></div>
+      <p class="spw-ds-typography-body-01">Aucun padding interne. Utile quand le contenu gère lui-même son espacement.</p>
+    </spw-box>
+    <spw-box has-radius="true" has-shadow="true" padding="small">
+      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Padding small — 16px</h3></div>
+      <p class="spw-ds-typography-body-01">Padding compact pour les widgets ou encarts de taille réduite.</p>
+    </spw-box>
+    <spw-box has-radius="true" has-shadow="true" padding="medium">
+      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Padding medium — 24px</h3></div>
+      <p class="spw-ds-typography-body-01">Padding standard, recommandé pour la majorité des cas d'usage.</p>
+    </spw-box>
+    <spw-box has-radius="true" has-shadow="true" padding="large">
+      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Padding large — 48px</h3></div>
+      <p class="spw-ds-typography-body-01">Padding généreux pour des sections mises en avant ou des contenus éditoriaux.</p>
+    </spw-box>
+  `;
+    return container;
+};
+PaddingVariants.parameters = {
+    docs: {
+        description: {
+            story: `Les quatre valeurs de padding disponibles : none, small (16px), medium (24px), large (48px).`,
+        },
+    },
+};
+export const WithShadowAndRadius = () => {
+    const container = document.createElement('div');
+    container.style.cssText = 'display: grid; grid-template-columns: 1fr 1fr; gap: 16px;';
+    container.innerHTML = /* HTML */ `
+    <spw-box padding="medium">
+      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Sans shadow ni radius</h3></div>
+      <p class="spw-ds-typography-body-01">Box sans décoration visuelle. Le contenu définit ses propres bordures.</p>
+    </spw-box>
+    <spw-box padding="medium" has-shadow="true">
+      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Shadow seul</h3></div>
+      <p class="spw-ds-typography-body-01">Ombre portée sans border-radius.</p>
+    </spw-box>
+    <spw-box padding="medium" has-radius="true" has-shadow="true">
+      <div slot="header"><h3 class="spw-ds-typography-heading-04 mb-0">Shadow + Radius</h3></div>
+      <p class="spw-ds-typography-body-01">Combinaison recommandée pour les widgets de sidebar et encarts.</p>
+    </spw-box>
+  `;
+    return container;
+};
+WithShadowAndRadius.parameters = {
+    docs: {
+        description: {
+            story: `Combinaisons de has-shadow et has-radius. La combinaison shadow + radius est recommandée pour les widgets de sidebar.`,
+        },
+    },
+};
+export const Collapsible = () => {
+    const container = document.createElement('div');
+    container.style.cssText = 'display: flex; flex-direction: column; gap: 16px; max-width: 400px;';
+    container.innerHTML = /* HTML */ `
+    <spw-box padding="medium" has-radius="true" has-shadow="true" is-collapsible="true" collapsible-breakpoint="always">
+      <div slot="header">
+        <h3 class="spw-ds-typography-heading-04 mb-0">Toujours collapsible</h3>
+      </div>
+      <div class="mt-3">
+        <p class="spw-ds-typography-body-01 mb-3">Ce contenu est collapsible quelle que soit la largeur du viewport.</p>
+        <spw-group orientation="vertical">
+          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
+          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
+        </spw-group>
+      </div>
+    </spw-box>
+    <spw-box padding="medium" has-radius="true" has-shadow="true" is-collapsible="true" collapsible-breakpoint="md">
+      <div slot="header">
+        <h3 class="spw-ds-typography-heading-04 mb-0">Collapsible sur mobile</h3>
+      </div>
+      <div class="mt-3">
+        <p class="spw-ds-typography-body-01 mb-3">Ce contenu est collapsible uniquement en dessous de 768px. Au-dessus, il est toujours visible.</p>
+        <spw-group orientation="vertical">
+          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
+          <spw-link variant="primary" icon="fa-arrow-right" icon-position="right" href="#">Lien d'action</spw-link>
+        </spw-group>
+      </div>
+    </spw-box>
+  `;
+    return container;
+};
+Collapsible.parameters = {
+    docs: {
+        description: {
+            story: `Mode collapsible avec animation chevron. always : collapsible quelle que soit la résolution. md (768px) : collapsible uniquement sur mobile, contenu toujours visible au-dessus.`,
+        },
+    },
+};
+export const StickyWithContent = () => {
+    const container = document.createElement('div');
+    container.innerHTML = /* HTML */ `
+    <div style="display: flex; gap: 24px; align-items: flex-start;">
+      <div style="flex: 1; min-width: 0;">
+        <p class="spw-ds-typography-body-01 mb-4">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam. Ut
+          malesuada ante et scelerisque eleifend.
+        </p>
+        <p class="spw-ds-typography-body-01 mb-4">
+          Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet
+          diam.
+        </p>
+        <p class="spw-ds-typography-body-01 mb-4">
+          Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium.
+        </p>
+        <p class="spw-ds-typography-body-01 mb-4">Praesent lacinia laoreet ipsum, at mattis magna cursus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <p class="spw-ds-typography-body-01 mb-4">
+          Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam. Ut malesuada ante et scelerisque eleifend. Curabitur luctus
+          faucibus pretium.
+        </p>
+      </div>
+      <div style="width: 280px; flex-shrink: 0;">
+        <spw-box padding="medium" has-radius="true" has-shadow="true" is-sticky="true" sticky-top="24px">
+          <div slot="header">
+            <h3 class="spw-ds-typography-heading-04 mb-0">Box sticky</h3>
+          </div>
+          <div class="mt-3">
+            <p class="spw-ds-typography-body-01 mb-3">Cette box reste visible lors du scroll à partir du breakpoint lg.</p>
+            <spw-group orientation="vertical">
+              <spw-link variant="primary" icon="fa-phone" icon-position="left" href="tel:081654449">081 / 65 44 49</spw-link>
+              <spw-link variant="primary" icon="fa-envelope" icon-position="left" href="mailto:mail@mail.be">mail@mail.be</spw-link>
+            </spw-group>
+            <spw-button is-full-width="true" class="mt-4" variant="primary">Formulaire en ligne</spw-button>
+          </div>
+        </spw-box>
+      </div>
+    </div>
+  `;
+    return container;
+};
+StickyWithContent.parameters = {
+    docs: {
+        description: {
+            story: `Box sticky dans un layout deux colonnes. La box reste ancrée lors du scroll à partir du breakpoint lg (1024px). Cas d'usage : sidebar de contact, sommaire, actions rapides. Utiliser sticky-top pour ajuster la position selon la hauteur du header fixe de la page.`,
+        },
+    },
+};
+export const SidebarPattern = () => {
+    const container = document.createElement('div');
+    container.innerHTML = /* HTML */ `
+    <div style="display: flex; flex-direction: column; gap: 16px; max-width: 320px;">
+      <spw-box padding="medium" has-radius="true" has-shadow="true">
+        <div slot="header">
+          <h3 class="spw-ds-typography-heading-04 mb-0">Sommaire</h3>
+        </div>
+        <div class="mt-3">
+          <spw-group orientation="vertical">
+            <spw-link variant="primary" href="#">Introduction</spw-link>
+            <spw-link variant="primary" href="#">Premiers pas</spw-link>
+            <spw-link variant="primary" href="#">Fonctionnalités avancées</spw-link>
+            <spw-link variant="primary" href="#">FAQ</spw-link>
+          </spw-group>
+        </div>
+      </spw-box>
+      <spw-box padding="medium" has-radius="true" has-shadow="true" is-collapsible="true" collapsible-breakpoint="always">
+        <div slot="header">
+          <h3 class="spw-ds-typography-heading-04 mb-0">Besoin d'aide ?</h3>
+        </div>
+        <div class="mt-3">
+          <p class="spw-ds-typography-body-01 mb-3">Contactez-nous si vous ne trouvez pas la réponse à votre question.</p>
+          <spw-separator class="my-3"></spw-separator>
+          <spw-group orientation="vertical">
+            <spw-link variant="primary" icon="fa-phone" icon-position="left" href="tel:081654449">081 / 65 44 49</spw-link>
+            <spw-link variant="primary" icon="fa-envelope" icon-position="left" href="mailto:mail@mail.be">mail@mail.be</spw-link>
+            <spw-link variant="primary" icon="fa-globe" icon-position="left" href="#">www.wallonie.be</spw-link>
+          </spw-group>
+          <spw-button is-full-width="true" class="mt-4" variant="primary">Formulaire en ligne</spw-button>
+        </div>
+      </spw-box>
+    </div>
+  `;
+    return container;
+};
+SidebarPattern.parameters = {
+    docs: {
+        description: {
+            story: `Pattern sidebar avec deux box : une pour la navigation (sommaire) et une pour les informations de contact collapsible.`,
+        },
+    },
+};

package/dist/collection/stories/components/spw-custom-select/spw-custom-select.stories.js

@@ -69,10 +69,15 @@ const Template = args => {
             element.addEventListener(key.substring(2).toLowerCase(), val);
         }
     });
-    // Ajout de l’action Storybook pour suivre les changements de valeur
     element.addEventListener('valueChanged', (event) => {
         action('valueChanged')(event.detail);
     });
+    element.addEventListener('optionCreated', (event) => {
+        action('optionCreated')(event.detail);
+    });
+    element.addEventListener('optionRemoved', (event) => {
+        action('optionRemoved')(event.detail);
+    });
     return element;
 };
 /* -------------------------------------------------------------------------------------------------
@@ -84,7 +89,7 @@ Default.args = {
     label: 'Sélection simple',
     name: 'custom-select',
     placeholder: 'Choisissez une option',
-    hint: 'Ceci est un texte d’aide',
+    hint: "Ceci est un texte d'aide",
     showHintIcon: false,
     size: 'medium',
     required: false,
@@ -164,3 +169,19 @@ AvecWarning.parameters = {
         },
     },
 };
+// --- CRÉATION À LA VOLÉE (MULTIPLE) ---
+export const AllowCreateMultiple = Template.bind({});
+AllowCreateMultiple.args = Object.assign(Object.assign({}, Default.args), { label: 'Mots-clés', multiple: true, isSearch: true, allowCreate: true, isClear: true, searchPlaceholder: 'Rechercher ou créer un mot-clé...', noResultsText: 'Aucun mot-clé existant.', placeholder: 'Sélectionnez ou créez des mots-clés', hint: 'Saisissez un mot-clé absent de la liste et cliquez sur + pour le créer.', showHintIcon: false, items: [
+        { label: 'Angular', value: 'angular' },
+        { label: 'React', value: 'react' },
+        { label: 'Stencil', value: 'stencil' },
+        { label: 'Vue', value: 'vue' },
+        { label: 'Svelte', value: 'svelte' },
+    ] });
+AllowCreateMultiple.parameters = {
+    docs: {
+        description: {
+            story: `Custom Select avec création d'options à la volée et sélection multiple. Lorsque la saisie ne correspond à aucune option existante, un bouton + apparaît pour ajouter l'option directement. Les options créées sont marquées d'une icône de suppression. Les events optionCreated et optionRemoved sont émis pour permettre la synchronisation avec le backend. Cas d'usage : saisie de tags libres, mots-clés personnalisés, listes extensibles.`,
+        },
+    },
+};

package/dist/collection/stories/organisms/spw-hero/spw-hero.stories.js

@@ -30,6 +30,7 @@ Le composant Hero Banner crée un bandeau visuel impactant en haut de page pour
 - **Photo** : Image pleine largeur en arrière-plan
 - **Maxi** : Bannière plein écran avec overlay pour page d'accueil
 - **Mini** : Version compacte du hero banner
+- **Featured** : Image pleine largeur sans slot de contenu. Le ratio de l'image est contrôlable via featured-ratio, featured-ratio-mobile, featured-ratio-tablet, featured-ratio-desktop
 
 ## Fonctionnalités
 
@@ -312,3 +313,63 @@ MiniDark.parameters = {
         },
     },
 };
+const TemplateFeatured = args => {
+    const element = document.createElement(elementTag);
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
+    Object.entries(args).forEach(([key, val]) => {
+        if (masterProps.includes(key)) {
+            element.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    return element;
+};
+export const Featured = TemplateFeatured.bind({});
+Featured.args = {
+    variant: 'featured',
+    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
+    imageAlt: 'Image featured',
+    surface: 'light',
+    featuredRatio: '16/9',
+};
+Featured.parameters = {
+    docs: {
+        description: {
+            story: `Hero featured avec image pleine largeur, sans slot de contenu. Le ratio de l'image est uniforme sur tous les breakpoints via featured-ratio.`,
+        },
+    },
+};
+export const FeaturedResponsiveRatio = TemplateFeatured.bind({});
+FeaturedResponsiveRatio.args = {
+    variant: 'featured',
+    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
+    imageAlt: 'Image featured',
+    surface: 'light',
+    featuredRatioMobile: '4/3',
+    featuredRatioTablet: '16/9',
+    featuredRatioDesktop: '3/1',
+};
+FeaturedResponsiveRatio.parameters = {
+    docs: {
+        description: {
+            story: `Hero featured avec ratio d'image adaptatif selon le breakpoint : 4/3 sur mobile, 16/9 sur tablette, 3/1 sur desktop. Utiliser featured-ratio-mobile, featured-ratio-tablet et featured-ratio-desktop pour un contrôle granulaire.`,
+        },
+    },
+};
+export const FeaturedNaturalSize = TemplateFeatured.bind({});
+FeaturedNaturalSize.args = {
+    variant: 'featured',
+    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
+    imageAlt: 'Image featured',
+    surface: 'light',
+};
+FeaturedNaturalSize.parameters = {
+    docs: {
+        description: {
+            story: `Hero featured sans ratio défini : l'image s'affiche à sa taille naturelle. À utiliser quand les dimensions de l'image sont maîtrisées et qu'aucun recadrage n'est souhaité.`,
+        },
+    },
+};

package/dist/collection/stories/organisms/spw-toc/spw-toc.stories.js

@@ -30,6 +30,11 @@ Le composant se compose de trois parties :
 - spw-toc-container : Contient le contenu avec les titres à indexer
 - spw-toc-navigation : Affiche la navigation générée automatiquement
 
+## Variants de spw-toc-navigation
+
+- **progress** (défaut) : affiche une barre de progression par section h2 et un indicateur de section active
+- **simple** : navigation épurée sans barre de progression, uniquement les liens de navigation
+
 ## Fonctionnalités
 
 - Génération automatique des liens de navigation basée sur les titres h2-h6
@@ -138,22 +143,30 @@ function htmlContentWithAccordions() {
               </spw-toc-container>
             </div>
 
-            <aside class="spw-ds-template-generic__aside spw-ds-template-generic__aside--top-mobile spw-ds-template-generic__aside--is-sticky">
-              <div class="spw-ds-template-generic__aside-content spw-ds-template-generic__aside-content--top mb-4">
-                <h2 class="spw-ds-typography-heading-03 mb-3">Sommaire</h2>
-                <spw-toc-navigation></spw-toc-navigation>
-              </div>
-              <div class="spw-ds-template-generic__aside-content spw-ds-template-generic__aside-content--bottom">
-                <h2 class="spw-ds-typography-heading-03 mb-3">Besoin d'aide ?</h2>
-                <p class="spw-ds-typography-body-01 mb-3">Contactez-nous si vous ne trouvez pas la réponse à votre question.</p>
-                <spw-separator class="my-3"></spw-separator>
-                <spw-group orientation="vertical">
-                  <spw-link variant="primary" icon="fa-phone" icon-position="left" href="tel:081654449">081 / 65 44 49</spw-link>
-                  <spw-link variant="primary" icon="fa-envelope" icon-position="left" href="mailto:mail@mail.be">mail@mail.be</spw-link>
-                  <spw-link variant="primary" icon="fa-globe" icon-position="left" href="#">www.wallonie.be</spw-link>
-                </spw-group>
-                <spw-button is-full-width class="mt-4 w-100" variant="primary">Formulaire en ligne</spw-button>
-              </div>
+            <aside class="spw-ds-template-generic__aside">
+              <spw-box is-sticky="false" padding="medium" has-radius="true" has-shadow="true" class="mb-4">
+                <div slot="header">
+                  <h2 class="spw-ds-typography-heading-03 mb-0">Sommaire</h2>
+                </div>
+                <div class="mt-3">
+                  <spw-toc-navigation></spw-toc-navigation>
+                </div>
+              </spw-box>
+              <spw-box is-sticky="true" padding="medium" has-radius="true" has-shadow="true" class="mb-4">
+                <div slot="header">
+                  <h2 class="spw-ds-typography-heading-03 mb-0">Besoin d'aide ?</h2>
+                </div>
+                <div class="mt-3">
+                  <p class="spw-ds-typography-body-01 mb-3">Contactez-nous si vous ne trouvez pas la réponse à votre question.</p>
+                  <spw-separator class="my-3"></spw-separator>
+                  <spw-group orientation="vertical">
+                    <spw-link variant="primary" icon="fa-phone" icon-position="left" href="tel:081654449">081 / 65 44 49</spw-link>
+                    <spw-link variant="primary" icon="fa-envelope" icon-position="left" href="mailto:mail@mail.be">mail@mail.be</spw-link>
+                    <spw-link variant="primary" icon="fa-globe" icon-position="left" href="#">www.wallonie.be</spw-link>
+                  </spw-group>
+                  <spw-button is-full-width class="mt-4 w-100" variant="primary">Formulaire en ligne</spw-button>
+                </div>
+              </spw-box>
             </aside>
           </div>
         </div>
@@ -204,11 +217,15 @@ function htmlContentSimple() {
               </spw-toc-container>
             </div>
 
-            <aside class="spw-ds-template-generic__aside spw-ds-template-generic__aside--is-sticky">
-              <div class="spw-ds-template-generic__aside-content">
-                <h2 class="spw-ds-typography-heading-03 mb-3">Sommaire</h2>
-                <spw-toc-navigation></spw-toc-navigation>
-              </div>
+            <aside class="spw-ds-template-generic__aside">
+              <spw-box is-sticky="false" padding="medium" has-radius="true" has-shadow="true" class="mb-4">
+                <div slot="header">
+                  <h2 class="spw-ds-typography-heading-03 mb-0">Sommaire</h2>
+                </div>
+                <div class="mt-3">
+                  <spw-toc-navigation variant="simple"></spw-toc-navigation>
+                </div>
+              </spw-box>
             </aside>
           </div>
         </div>
@@ -230,14 +247,7 @@ export const FAQ = TemplateFAQ.bind({});
 FAQ.parameters = {
     docs: {
         description: {
-            story: `
-Exemple complet d'une page FAQ avec Table of Contents. Le composant génère automatiquement la navigation basée sur les titres h2 présents dans le contenu.
-
-La navigation affiche :
-- Les sections principales (h2) avec une barre de progression
-- Un indicateur visuel de la section active
-- Un smooth scroll vers la section cliquée
-      `,
+            story: `Variant progress (défaut) — page FAQ avec accordéons. La navigation affiche une barre de progression par section h2, un indicateur de section active et un smooth scroll vers la section cliquée.`,
         },
     },
 };
@@ -245,11 +255,7 @@ export const Simple = TemplateSimple.bind({});
 Simple.parameters = {
     docs: {
         description: {
-            story: `
-Exemple simplifié avec un guide utilisateur. La table des matières génère automatiquement les liens pour tous les niveaux de titres (h2, h3, h4, etc.).
-
-Les titres sans ID se voient attribuer automatiquement un ID slugifié basé sur leur contenu textuel.
-      `,
+            story: `Variant simple — navigation épurée sans barre de progression. Les liens h2 et h3 sont générés automatiquement, les titres sans ID reçoivent un ID slugifié basé sur leur contenu textuel.`,
         },
     },
 };

package/dist/collection/utils/animation.js

@@ -1,8 +1,13 @@
 export function animationTo(element, keyframes, options) {
     const animated = element.animate(keyframes, Object.assign(Object.assign({}, options), { fill: 'both' }));
     animated.addEventListener('finish', () => {
-        // @ts-ignore
-        animated.commitStyles();
+        try {
+            // @ts-ignore
+            animated.commitStyles();
+        }
+        catch (_a) {
+            // Element may not be rendered (e.g. rapid open/close), safe to ignore
+        }
         animated.cancel();
     });
     return animated;