@spw-ds/spw-stencil-library 1.13.0 → 1.14.0

package/dist/cjs/spw-wizard-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-id_AkABS.js');
+var index = require('./index-DuCXzb-X.js');
 
 const spwWizardItemCss = () => `html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:var(--spw-ds-font-main)}body{margin:0}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host{display:flex;flex:1;flex-direction:column;align-items:center}:host:last-child{flex:0}.spw-wizard-item{display:flex;flex-direction:column;align-items:center;width:100%;cursor:not-allowed}.spw-wizard-item--vertical{position:relative;flex-direction:row;align-items:flex-start;gap:16px}.spw-wizard-item--clickable{cursor:pointer}.spw-wizard-item--clickable .spw-wizard-item__icon:hover{transform:scale(1.05)}.spw-wizard-item--current{cursor:default}.spw-wizard-item__step{display:flex;align-items:center;width:100%;position:relative;justify-content:center;font-size:18px;line-height:1;font-weight:700}.spw-wizard-item__step spw-icon{font-size:16px}.spw-wizard-item--vertical .spw-wizard-item__step{position:static;flex-direction:column;align-items:flex-start;justify-content:start;flex:1}.spw-wizard-item__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid;flex-shrink:0;z-index:1;background-color:white;transition:all 0.3s ease;position:relative}.spw-wizard-item__icon svg{width:24px;height:24px}.spw-wizard-item__connector{position:absolute;left:50%;right:-50%;height:3px;transition:background-color 0.3s ease}.spw-wizard-item--vertical .spw-wizard-item__connector{top:0;left:14px;right:auto;width:3px;height:100%}.spw-wizard-item__label{display:block;margin-top:12px;font-size:16px;font-weight:700;text-align:center;color:var(--spw-color-themes-grey-grey-900);padding:0 8px}.spw-wizard-item--horizontal .spw-wizard-item__label{display:none}@media (min-width: 768px){.spw-wizard-item--horizontal .spw-wizard-item__label{display:block}}.spw-wizard-item--vertical .spw-wizard-item__label{text-align:left}.spw-wizard-item__description{display:block;margin-top:4px;font-size:14px;text-align:center;color:var(--spw-color-themes-grey-grey-700);padding:0 8px}.spw-wizard-item--vertical .spw-wizard-item__description{text-align:left}.spw-wizard-item--horizontal .spw-wizard-item__description{display:none}@media (min-width: 768px){.spw-wizard-item--horizontal .spw-wizard-item__description{display:block}}.spw-wizard-item__additional-info{display:block;margin-top:4px;font-size:12px;text-align:center;font-weight:700;color:var(--spw-ds-primary);padding:0 8px}.spw-wizard-item--horizontal .spw-wizard-item__additional-info{display:none}@media (min-width: 768px){.spw-wizard-item--horizontal .spw-wizard-item__additional-info{display:block}}.spw-wizard-item--vertical .spw-wizard-item__additional-info{text-align:left}.spw-wizard-item--vertical .spw-wizard-item__content{margin-top:-6px;margin-bottom:8px}.spw-wizard-item--inactive .spw-wizard-item__icon{border-color:#d1d5db;background-color:white;color:#d1d5db}.spw-wizard-item--inactive .spw-wizard-item__connector{background-color:#d1d5db}.spw-wizard-item--active .spw-wizard-item__icon{border-color:#16a34a;background-color:white;color:#16a34a}.spw-wizard-item--active .spw-wizard-item__connector{background-color:#d1d5db}.spw-wizard-item--completed .spw-wizard-item__icon{border-color:#16a34a;background-color:white;color:#16a34a}.spw-wizard-item--completed .spw-wizard-item__connector{background-color:#d1d5db}.spw-wizard-item--warning:not(.spw-wizard-item--current):not(.spw-wizard-item--before-current) .spw-wizard-item__icon{border-color:#d1d5db;background-color:white;color:#d1d5db}.spw-wizard-item--warning:not(.spw-wizard-item--current):not(.spw-wizard-item--before-current) .spw-wizard-item__connector{background-color:#d1d5db !important}.spw-wizard-item--error:not(.spw-wizard-item--current):not(.spw-wizard-item--before-current) .spw-wizard-item__icon{border-color:#d1d5db;background-color:white;color:#d1d5db}.spw-wizard-item--error:not(.spw-wizard-item--current):not(.spw-wizard-item--before-current) .spw-wizard-item__connector{background-color:#d1d5db !important}.spw-wizard-item--before-current.spw-wizard-item--completed .spw-wizard-item__connector{background-color:#16a34a !important}.spw-wizard-item--before-current.spw-wizard-item--warning .spw-wizard-item__icon{border-color:#f97316 !important;background-color:white !important;color:#f97316 !important}.spw-wizard-item--before-current.spw-wizard-item--warning .spw-wizard-item__connector{background-color:#f97316 !important}.spw-wizard-item--before-current.spw-wizard-item--error .spw-wizard-item__icon{border-color:#dc2626 !important;background-color:white !important;color:#dc2626 !important}.spw-wizard-item--before-current.spw-wizard-item--error .spw-wizard-item__connector{background-color:#dc2626 !important}.spw-wizard-item--current.spw-wizard-item--completed .spw-wizard-item__icon{border-color:#16a34a !important;background-color:#16a34a !important;color:white !important}.spw-wizard-item--current.spw-wizard-item--active .spw-wizard-item__icon{border-color:#16a34a !important;background-color:#16a34a !important;color:white !important}.spw-wizard-item--current.spw-wizard-item--warning .spw-wizard-item__icon{border-color:#f97316 !important;background-color:#f97316 !important;color:white !important}.spw-wizard-item--current.spw-wizard-item--warning .spw-wizard-item__connector{background-color:#d1d5db !important}.spw-wizard-item--current.spw-wizard-item--error .spw-wizard-item__icon{border-color:#dc2626 !important;background-color:#dc2626 !important;color:white !important}.spw-wizard-item--current.spw-wizard-item--error .spw-wizard-item__connector{background-color:#d1d5db !important}`;
 

package/dist/cjs/spw-wizard.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-id_AkABS.js');
+var index = require('./index-DuCXzb-X.js');
 
 const spwWizardCss = () => `html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:var(--spw-ds-font-main)}body{margin:0}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host{display:block}.spw-wizard{display:flex;gap:0}.spw-wizard--horizontal{flex-direction:row}.spw-wizard--vertical{flex-direction:column;align-items:flex-start}`;
 

package/dist/collection/components/spw-block-content/spw-block-content.css

@@ -557,6 +557,37 @@ template {
   flex-direction: column;
 }
 
+:host(.spw-block-content--newsletter) {
+  background: var(--spw-colors-support-grey-grey-100);
+  border-radius: 20px;
+  overflow: hidden;
+}
+:host(.spw-block-content--newsletter):host(.spw-block-content--bg-primary) {
+  background: var(--spw-ds-primary);
+  color: white;
+}
+:host(.spw-block-content--newsletter):host(.spw-block-content--bg-purple) {
+  background: var(--spw-ds-alt-purple);
+  color: white;
+}
+:host(.spw-block-content--newsletter):host(.spw-block-content--bg-blue) {
+  background: var(--spw-ds-alt-blue);
+  color: white;
+}
+:host(.spw-block-content--newsletter):host(.spw-block-content--bg-petrol) {
+  background: var(--spw-ds-alt-petrol);
+  color: white;
+}
+:host(.spw-block-content--newsletter) .spw-block-content__newsletter {
+  padding: 32px 24px;
+  text-align: center;
+}
+@media (min-width: 1024px) {
+  :host(.spw-block-content--newsletter) .spw-block-content__newsletter {
+    padding: 40px 80px;
+  }
+}
+
 :host(.spw-block-content--callout) {
   background: var(--spw-ds-primary);
   color: white;

package/dist/collection/components/spw-block-content/spw-block-content.js

@@ -25,6 +25,9 @@ export class SpwBlockContent {
         }
         return content;
     }
+    renderNewsletter() {
+        return (h("div", { class: "spw-block-content__newsletter" }, h("slot", null)));
+    }
     renderCallout() {
         const style = {};
         if (this.ratio) {
@@ -45,7 +48,7 @@ export class SpwBlockContent {
         return (h("div", { class: "spw-block-content__callout", style: style }, this.imageSrc && (h("div", { class: "spw-block-content__image" }, h("img", { src: this.imageSrc, alt: this.imageAlt || '' }))), h("div", { class: "spw-block-content__content" }, h("slot", null))));
     }
     render() {
-        return (h(Host, { key: '4cffb0875f91f80d9b40d619bc410e83202dfad4', class: this.elementClass }, this.variant === 'blockquote' && this.renderBlockquote(), (this.variant === 'banner-landscape' || this.variant === 'banner-portrait') && this.renderBanner(), this.variant === 'callout' && this.renderCallout()));
+        return (h(Host, { key: '1271eeab40dfa810c4d184ae41f2b5a07fb58b4a', class: this.elementClass }, this.variant === 'blockquote' && this.renderBlockquote(), (this.variant === 'banner-landscape' || this.variant === 'banner-portrait') && this.renderBanner(), this.variant === 'callout' && this.renderCallout(), this.variant === 'newsletter' && this.renderNewsletter()));
     }
     static get is() { return "spw-block-content"; }
     static get encapsulation() { return "shadow"; }
@@ -65,8 +68,8 @@ export class SpwBlockContent {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'blockquote' | 'banner-landscape' | 'banner-portrait' | 'callout'",
-                    "resolved": "\"banner-landscape\" | \"banner-portrait\" | \"blockquote\" | \"callout\"",
+                    "original": "'blockquote' | 'banner-landscape' | 'banner-portrait' | 'callout' | 'newsletter'",
+                    "resolved": "\"banner-landscape\" | \"banner-portrait\" | \"blockquote\" | \"callout\" | \"newsletter\"",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/spw-footer/spw-footer-content/spw-footer-content.css

@@ -388,13 +388,26 @@ template {
 ::slotted(spw-footer-content-col) {
   width: var(--spw-footer-col-width-mobile);
   margin-bottom: 24px !important;
+  padding-bottom: 24px !important;
   position: relative;
 }
+::slotted(spw-footer-content-col):after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--spw-color-themes-grey-grey-800);
+}
 @media (min-width: 768px) {
   ::slotted(spw-footer-content-col) {
     width: var(--spw-footer-col-width-tablet);
     gap: 48px;
   }
+  ::slotted(spw-footer-content-col):after {
+    display: none;
+  }
 }
 @media (min-width: 1024px) {
   ::slotted(spw-footer-content-col) {
@@ -405,14 +418,11 @@ template {
     margin-bottom: 0 !important;
   }
   ::slotted(spw-footer-content-col):after {
-    content: "";
-    position: absolute;
+    display: block;
     top: 0;
-    right: 0;
+    bottom: auto;
     height: 100%;
     width: 1px;
-    background: var(--spw-ds-primary);
-    opacity: 0.6;
   }
 }
 
@@ -423,6 +433,7 @@ template {
 ::slotted(spw-footer-content-col:last-child) {
   padding-right: 0 !important;
   margin-bottom: 0 !important;
+  padding-bottom: 0 !important;
 }
 ::slotted(spw-footer-content-col:last-child):after {
   display: none;

package/dist/collection/components/spw-text-field/spw-text-field.css

@@ -385,6 +385,8 @@ template {
   --spw-input-icon-search-color: var(--spw-color-themes-grey-grey-900);
   /** @prop --spw-input-border: Couleur de la bordure du champ */
   --spw-input-border: var(--spw-color-themes-grey-grey-800);
+  /** @prop --spw-input-shadow: Box shadow du champ de saisie */
+  --spw-input-shadow: none;
 }
 
 .spw-text-field {
@@ -403,6 +405,7 @@ template {
   text-overflow: ellipsis;
   line-height: var(--spw-input-height);
   border-radius: var(--spw-input-radius);
+  box-shadow: var(--spw-input-shadow);
   font-size: var(--spw-input-font-size);
   text-align: var(--spw-input-text-align);
   border: 1px solid var(--spw-input-border);

package/dist/collection/stories/{organisms → components}/spw-block-content/spw-block-content.stories.js

@@ -19,7 +19,7 @@ const argTypes = Object.assign(Object.assign({}, withComponentControls(component
         description: 'Contenu en bas de la citation (pour la variante blockquote).',
     } });
 const meta = {
-    title: 'Organismes/Bloc de contenu (block content)',
+    title: 'Composants/Bloc de contenu',
     component: elementTag,
     argTypes,
     tags: ['autodocs'],
@@ -36,6 +36,7 @@ Le composant Block Content est un conteneur polyvalent qui permet d'afficher dif
 - **Blockquote** : Citation stylisée avec zones top, quote et bottom
 - **Banner Landscape** : Bannière horizontale avec image à droite
 - **Banner Portrait** : Bannière verticale avec image en haut
+- **Newsletter** : Bloc d'inscription centré avec titre, texte et formulaire
 
 ## Structure
 
@@ -50,9 +51,13 @@ Le composant propose différents slots selon la variante :
 - **slot par défaut** : Contenu textuel (titre, description...)
 - **slot="button"** : Bouton d'action
 
+#### Newsletter
+- **slot par défaut** : Contenu libre (titre, texte, formulaire...)
+
 ## Propriétés
 
-- **variant** : Type de bloc ('blockquote', 'banner-landscape', 'banner-portrait')
+- **variant** : Type de bloc ('blockquote', 'banner-landscape', 'banner-portrait', 'newsletter')
+- **background** : Couleur de fond ('primary', 'neutral', 'purple', 'blue', 'petrol') — pour newsletter, 'neutral' par défaut
 - **imageSrc** : URL de l'image (pour les variantes banner)
 - **imageAlt** : Texte alternatif de l'image
 - **href** : URL du lien (rend la bannière cliquable)
@@ -63,6 +68,7 @@ Le composant propose différents slots selon la variante :
 - Citations avec guillemets décoratifs
 - Bannières avec images responsive
 - Support des liens cliquables
+- Bloc newsletter centré avec fond customisable
 - Design adaptatif mobile/desktop
         `,
             },
@@ -205,3 +211,28 @@ BannerPortraitWithLink.parameters = {
         },
     },
 };
+export const Newsletter = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = `
+    <spw-block-content variant="newsletter" background="neutral">
+      <div class="spw-ds-newsletter__content">
+        <h2 class="spw-ds-typography-heading-02 spw-ds-mb-md">Inscrivez-vous à notre newsletter</h2>
+        <p class="spw-ds-typography-body-2 spw-ds-mb-xl">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra arcu at ultrices malesuada. Mauris maximus rhoncus dolor, sed sagittis magna laoreet commodo.
+        </p>
+        <div class="spw-ds-newsletter__form">
+          <spw-text-field placeholder="Votre adresse mail..." type="email" name="newsletter-email"></spw-text-field>
+          <spw-button size="medium" variant="primary">S'inscrire</spw-button>
+        </div>
+      </div>
+    </spw-block-content>
+  `;
+    return wrapper;
+};
+Newsletter.parameters = {
+    docs: {
+        description: {
+            story: `Bloc newsletter centré avec titre, texte et formulaire d'inscription. Le fond est customisable via la prop background. Le layout du formulaire passe en colonne sur mobile et en ligne à partir du breakpoint md.`,
+        },
+    },
+};

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

@@ -11,7 +11,7 @@ const elementTag = 'spw-group';
 const subComponentTags = ['spw-checkbox'];
 const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
 const meta = {
-    title: 'Composants/Case à cocher (input checkbox)',
+    title: 'Composants/Case à cocher (input checkbox, toggle)',
     component: elementTag,
     argTypes,
     tags: ['autodocs'],

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

@@ -10,7 +10,7 @@ import { withComponentControls, toKebabCase } from "../../../utils/utils";
 const elementTag = 'spw-dropdown';
 const argTypes = withComponentControls(componentsData, { tag: elementTag });
 const meta = {
-    title: 'Composants/Menu déroulant (dropdown)',
+    title: 'Composants/Menu déroulant (dropdown menu)',
     component: elementTag,
     argTypes,
     tags: ['autodocs'],

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

@@ -14,7 +14,7 @@ const argTypes = Object.assign(Object.assign(Object.assign({}, withComponentCont
         description: 'Date à afficher dans le contenu de la carte (au format YYYY-MM-DD).',
     } });
 const meta = {
-    title: 'Organismes/Carte',
+    title: 'Organismes/Carte (card)',
     component: elementTag,
     argTypes,
     tags: ['autodocs'],

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

@@ -8,7 +8,7 @@ catch (error) {
 }
 import { withComponentControls, extractArgTypes, toKebabCase } from "../../../utils/utils";
 const elementTag = 'spw-footer';
-const subComponentTags = ['spw-footer-bottom', 'spw-footer-content', 'spw-footer-content-col', 'spw-footer-link'];
+const subComponentTags = ['spw-footer-bottom', 'spw-footer-content', 'spw-footer-content-col', 'spw-footer-link', 'spw-socials'];
 const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
 const meta = {
     title: 'Organismes/Pied de page (footer)',
@@ -25,18 +25,20 @@ Le composant Footer est la section inférieure récurrente d'une page web. Il co
 
 ## Structure
 
-Le composant se compose de quatre sous-éléments :
+Le composant se compose de plusieurs sous-éléments :
 - **spw-footer** : Conteneur principal avec gestion des colonnes responsive
 - **spw-footer-content** : Section supérieure avec colonnes de liens
 - **spw-footer-content-col** : Colonne individuelle avec titre
 - **spw-footer-link** : Lien de navigation dans le footer
 - **spw-footer-bottom** : Barre inférieure avec mentions légales
 
+Le composant **spw-socials** peut être associé au footer en le plaçant **structurellement en dehors** de spw-footer, juste avant lui. Cela permet de conserver une séparation claire entre le bandeau de réseaux sociaux et le footer proprement dit.
+
 ## Fonctionnalités
 
 - Configuration dynamique du nombre de colonnes par breakpoint
 - Support du Shadow DOM pour l'encapsulation
-- Deux versions : complète avec sections ou légère (bottom only)
+- Trois versions : complète avec sections, légère (bottom only), ou avec bandeau de réseaux sociaux
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/91a10d-pied-de-page-footer)
         `,
@@ -45,6 +47,17 @@ Le composant se compose de quatre sous-éléments :
     },
 };
 export default meta;
+function htmlSocials(slotArgs) {
+    return /* HTML */ `
+    <spw-socials main-title="${slotArgs.socialsMainTitle}">
+      <a target="_blank" aria-label="Facebook" title="Facebook" href="#"><spw-icon variant="fa-brands" icon="fa-facebook"></spw-icon></a>
+      <a target="_blank" aria-label="Instagram" title="Instagram" href="#"><spw-icon variant="fa-brands" icon="fa-instagram"></spw-icon></a>
+      <a target="_blank" aria-label="Twitter" title="Twitter" href="#"><spw-icon variant="fa-brands" icon="fa-x-twitter"></spw-icon></a>
+      <a target="_blank" aria-label="YouTube" title="YouTube" href="#"><spw-icon variant="fa-brands" icon="fa-youtube"></spw-icon></a>
+      <a target="_blank" aria-label="LinkedIn" title="LinkedIn" href="#"><spw-icon variant="fa-brands" icon="fa-linkedin-in"></spw-icon></a>
+    </spw-socials>
+  `;
+}
 function htmlContent(slotArgs) {
     return /* HTML */ `
     <spw-footer-content>
@@ -167,3 +180,44 @@ Idéal pour les pages simples, pages de connexion ou applications où un footer
         },
     },
 };
+const TemplateWithSocials = args => {
+    const wrapper = document.createElement('div');
+    const footer = 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)) {
+            footer.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            footer.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    footer.innerHTML = htmlContent(args);
+    wrapper.innerHTML = htmlSocials(args);
+    wrapper.appendChild(footer);
+    return wrapper;
+};
+export const WithSocials = TemplateWithSocials.bind({});
+WithSocials.args = {
+    socialsMainTitle: 'Restez connecté',
+    colTitle1: 'Accès rapides',
+    colTitle2: 'Liens utiles',
+    colTitle3: 'Sites généraux de Wallonie',
+    colTitle4: 'Nous contacter',
+    siteTitle: 'Titre du site',
+    colsDesktop: 4,
+    colsTablet: 2,
+    colsMobile: 1,
+};
+WithSocials.parameters = {
+    docs: {
+        description: {
+            story: `
+Footer complet précédé du bandeau de réseaux sociaux. Le composant spw-socials est placé structurellement **en dehors** de spw-footer, juste avant lui.
+
+Cas d'usage typique : footer d'un site institutionnel avec présence sur les réseaux sociaux mise en avant au-dessus du footer principal.
+      `,
+        },
+    },
+};

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

@@ -11,7 +11,7 @@ const elementTag = 'spw-wizard';
 const subComponentTags = ['spw-wizard-item'];
 const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
 const meta = {
-    title: 'Organismes/Wizard',
+    title: 'Organismes/Barre de progression (stepper, wizard)',
     component: elementTag,
     argTypes,
     tags: ['autodocs'],