@spw-ds/spw-stencil-library 1.10.2 → 1.12.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-card/spw-card.stories.js

@@ -20,6 +20,12 @@ const meta = {
     tags: ['autodocs'],
     parameters: {
         docs: {
+            source: {
+                transform: (src) => {
+                    // Retire le wrapper div ajouté pour limiter la largeur du preview
+                    return src.replace(/^<div[^>]*>\n?\s*/i, '').replace(/\n?\s*<\/div>$/i, '');
+                },
+            },
             description: {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
@@ -37,6 +43,7 @@ Le composant Carte est un conteneur cliquable qui affiche un aperçu visuel de c
 - **People** : Carte profil avec avatar rond
 - **Sidebar** : Version pour barre latérale
 - **Highlighted** : Carte mise en avant avec style visuel distinctif
+- **RoundedPicture** : Carte pour une galerie photo avec image arrondie et icône de survol personnalisable
 
 ## Structure
 
@@ -181,6 +188,14 @@ function getHtmlContent(variant, slotArgs) {
             <img alt="${slotArgs.imgAlt || ''}" src="${slotArgs.imgSrc}" />
           </spw-card-image>
         </spw-card-content>
+      `;
+        case 'rounded-picture':
+            return `
+        ${cardImage}
+        <spw-card-content tag="${slotArgs.contentTag}" date="${slotArgs.contentDate}">
+          ${cardTitle}
+          ${cardExcerpt}
+        </spw-card-content>
       `;
         default:
             return `
@@ -194,6 +209,8 @@ function getHtmlContent(variant, slotArgs) {
     }
 }
 const Template = args => {
+    const wrapper = document.createElement('div');
+    wrapper.style.maxWidth = '2000px';
     const element = document.createElement(elementTag);
     const variant = args.variant || 'news';
     const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
@@ -208,7 +225,8 @@ const Template = args => {
         }
     });
     element.innerHTML = getHtmlContent(variant, args);
-    return element;
+    wrapper.appendChild(element);
+    return wrapper;
 };
 export const Default = Template.bind({});
 Default.args = {
@@ -397,3 +415,42 @@ Highlighted.parameters = {
         },
     },
 };
+export const RoundedPicture = () => {
+    const wrapper = document.createElement('div');
+    wrapper.style.maxWidth = '300px';
+    wrapper.innerHTML = /* HTML */ `
+    <spw-card href="#" variant="rounded-picture">
+      <spw-card-image ratio="2/3" hover-icon="fa-magnifying-glass">
+        <img
+          src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
+          alt="Paysage"
+        />
+      </spw-card-image>
+      <spw-card-content>
+        <spw-card-title>Titre</spw-card-title>
+        <spw-card-excerpt>Description</spw-card-excerpt>
+      </spw-card-content>
+    </spw-card>
+  `;
+    return wrapper;
+};
+RoundedPicture.parameters = {
+    docs: {
+        description: {
+            story: `Carte avec image arrondie en haut du contenu. Utilise ratio="2/3" sur spw-card-image et hover-icon pour personnaliser l'icône au survol. Peut servir pour afficher notamment une galerie photo.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-card href="#" variant="rounded-picture">
+          <spw-card-image ratio="2/3" hover-icon="fa-magnifying-glass">
+            <img src="..." alt="..." />
+          </spw-card-image>
+          <spw-card-content>
+            <spw-card-title>Titre</spw-card-title>
+            <spw-card-excerpt>Description</spw-card-excerpt>
+          </spw-card-content>
+        </spw-card>
+      `,
+        },
+    },
+};

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é.`,
+        },
+    },
+};