@spw-ds/spw-stencil-library 1.3.0 → 1.3.2

package/dist/collection/stories/organisms/spw-header/spw-header.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-header.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-header/spw-header.stories.ts"],"names":[],"mappings":"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","sourcesContent":["let componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-header';\n\nconst subComponentTags = ['spw-header-lang', 'spw-header-lang-item', 'spw-header-navigation', 'spw-header-navigation-item', 'spw-header-navigation-dropdown', 'spw-header-persona'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Organismes/En-tête de site (header)',\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nSection supérieure d'une page, servant de conteneur pour les éléments de navigation et les informations importantes.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/78fef5-en-tete-de-site-header)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContent(slotArgs) {\n  return /* HTML */ `\n    <div slot=\"top-left\">\n      <spw-header-persona>\n        <option data-link=\"#\" selected value=\"citoyen\">Citoyen</option>\n        <option data-link=\"#\" value=\"entreprise\">Entreprise</option>\n        <option data-link=\"#\" value=\"pouvoirs-locaux\">Pouvoirs locaux</option>\n        <option data-link=\"#\" value=\"non-marchands\">Non-marchands</option>\n      </spw-header-persona>\n    </div>\n\n    <div slot=\"right\">\n      <spw-header-lang>\n        <option data-link=\"#\" selected value=\"fr\">Fr</option>\n        <option data-link=\"#\" value=\"nl\">Nl</option>\n        <option data-link=\"#\" value=\"en\">En</option>\n        <option data-link=\"#\" value=\"de\">De</option>\n      </spw-header-lang>\n    </div>\n\n    <div slot=\"search\">\n      <spw-search-field\n        class=\"mb-4\"\n        size=\"medium\"\n        name=\"search\"\n        items='[\n                    {\"url\": \"http://google.com\", \"label\": \"Banane\"},\n                    {\"label\": \"Pomme\"},\n                    {\"label\": \"Poire\"},\n                    {\"label\": \"Cerise\"},\n                    {\"label\": \"Raisin\"}\n                  ]'\n        placeholder=\"Exemple : un mot-clé...\"\n      ></spw-search-field>\n      <h2 class=\"spw-ds-typography-heading-04 mb-4\">Suggestions de pages :</h2>\n      <spw-group orientation=\"vertical\">\n        <spw-link variant=\"tertiary\">Démarches</spw-link>\n        <spw-link variant=\"tertiary\">Réforme primes énergie</spw-link>\n        <spw-link variant=\"tertiary\">Jobs</spw-link>\n        <spw-link variant=\"tertiary\">Trafiroutes</spw-link>\n      </spw-group>\n    </div>\n\n    <spw-header-navigation>\n      <spw-header-navigation-item is-active=\"${slotArgs.isActive}\">\n        <a href=\"#\">Rubrique 1</a>\n\n        <spw-header-navigation-dropdown>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique niveau 2</a>\n            <spw-header-navigation-dropdown>\n              <spw-header-navigation-item>\n                <a href=\"#\">Sous-rubrique niveau 3</a>\n              </spw-header-navigation-item>\n              <spw-header-navigation-item>\n                <a href=\"#\">Sous-rubrique niveau 3</a>\n              </spw-header-navigation-item>\n            </spw-header-navigation-dropdown>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique</a>\n          </spw-header-navigation-item>\n        </spw-header-navigation-dropdown>\n      </spw-header-navigation-item>\n\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 2</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 3</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 4</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 5</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 6</a>\n      </spw-header-navigation-item>\n    </spw-header-navigation>\n  `;\n}\n\nfunction htmlContentVariant2(slotArgs) {\n  return /* HTML */ `\n    <div slot=\"right\">\n      <spw-header-lang>\n        <option data-link=\"#\" selected value=\"fr\">Fr</option>\n        <option data-link=\"#\" value=\"nl\">Nl</option>\n      </spw-header-lang>\n    </div>\n\n    <div slot=\"search\">\n      <spw-search-field class=\"mb-4\" size=\"medium\" name=\"search\" placeholder=\"Rechercher...\"></spw-search-field>\n      <h2 class=\"spw-ds-typography-heading-04 mb-4\">Accès rapide :</h2>\n      <spw-group orientation=\"vertical\">\n        <spw-link variant=\"tertiary\">Contact</spw-link>\n        <spw-link variant=\"tertiary\">FAQ</spw-link>\n        <spw-link variant=\"tertiary\">Services en ligne</spw-link>\n      </spw-group>\n    </div>\n\n    <spw-header-navigation\n      extra-button=\"true\"\n      extra-button-text=\"Bouton\"\n      extra-button-href=\"#\"\n      extra-button-target=\"_blank\"\n      extra-button-icon=\"fa-arrow-right\"\n      extra-button-variant=\"primary\"\n    >\n      <spw-header-navigation-item is-active=\"${slotArgs.isActive}\">\n        <a href=\"#\">Accueil</a>\n      </spw-header-navigation-item>\n\n      <spw-header-navigation-item>\n        <a href=\"#\">Services</a>\n        <spw-header-navigation-dropdown>\n          <spw-header-navigation-item>\n            <a href=\"#\">Service 1</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Service 2</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Service 3</a>\n          </spw-header-navigation-item>\n        </spw-header-navigation-dropdown>\n      </spw-header-navigation-item>\n\n      <spw-header-navigation-item>\n        <a href=\"#\">Documentation</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Contact</a>\n      </spw-header-navigation-item>\n    </spw-header-navigation>\n  `;\n}\n\nfunction htmlContentVariant3(slotArgs) {\n  return /* HTML */ `\n    <div slot=\"logo\">\n      <img src=\"https://placehold.co/200x80/EEE/31343C?text=Logo\" alt=\"Logo personnalisé\" />\n    </div>\n    <div slot=\"logo-mobile\">\n      <img src=\"https://placehold.co/200x80/EEE/31343C?text=Logo\" alt=\"Logo personnalisé\" />\n    </div>\n    <div slot=\"top-left\">\n      <spw-header-persona>\n        <option data-link=\"#\" selected value=\"particulier\">Particulier</option>\n        <option data-link=\"#\" value=\"professionnel\">Professionnel</option>\n        <option data-link=\"#\" value=\"administration\">Administration</option>\n      </spw-header-persona>\n    </div>\n\n    <div slot=\"right\">\n      <spw-header-lang>\n        <option data-link=\"#\" selected value=\"fr\">Fr</option>\n        <option data-link=\"#\" value=\"nl\">Nl</option>\n        <option data-link=\"#\" value=\"en\">En</option>\n      </spw-header-lang>\n    </div>\n\n    <div slot=\"search\">\n      <spw-search-field\n        class=\"mb-4\"\n        size=\"medium\"\n        name=\"search\"\n        items='[\n                    {\"url\": \"#\", \"label\": \"Formulaires\"},\n                    {\"url\": \"#\", \"label\": \"Aides et subsides\"},\n                    {\"url\": \"#\", \"label\": \"Permis\"},\n                    {\"url\": \"#\", \"label\": \"Attestations\"}\n                  ]'\n        placeholder=\"Que recherchez-vous ?\"\n      ></spw-search-field>\n      <h2 class=\"spw-ds-typography-heading-04 mb-4\">Les plus consultés :</h2>\n      <spw-group orientation=\"vertical\">\n        <spw-link variant=\"tertiary\">Mon compte</spw-link>\n        <spw-link variant=\"tertiary\">Primes habitation</spw-link>\n        <spw-link variant=\"tertiary\">Mobilité et transport</spw-link>\n        <spw-link variant=\"tertiary\">Environnement</spw-link>\n        <spw-link variant=\"tertiary\">Emploi et formation</spw-link>\n      </spw-group>\n    </div>\n\n    <spw-header-navigation>\n      <spw-header-navigation-item is-active=\"${slotArgs.isActive}\">\n        <a href=\"#\">Thématiques</a>\n\n        <spw-header-navigation-dropdown>\n          <spw-header-navigation-item>\n            <a href=\"#\">Aménagement du territoire</a>\n            <spw-header-navigation-dropdown>\n              <spw-header-navigation-item>\n                <a href=\"#\">Urbanisme</a>\n              </spw-header-navigation-item>\n              <spw-header-navigation-item>\n                <a href=\"#\">Patrimoine</a>\n              </spw-header-navigation-item>\n              <spw-header-navigation-item>\n                <a href=\"#\">Lotissements</a>\n              </spw-header-navigation-item>\n            </spw-header-navigation-dropdown>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Mobilité</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Environnement</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Économie</a>\n          </spw-header-navigation-item>\n        </spw-header-navigation-dropdown>\n      </spw-header-navigation-item>\n\n      <spw-header-navigation-item>\n        <a href=\"#\">Démarches</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Actualités</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">À propos</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Mon espace</a>\n      </spw-header-navigation-item>\n    </spw-header-navigation>\n  `;\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContent(args);\n\n  return element;\n};\n\nconst TemplateVariant2: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContentVariant2(args);\n\n  return element;\n};\n\nconst TemplateVariant3: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContentVariant3(args);\n\n  return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  isActive: false,\n  siteTitle: 'Titre du site',\n  borderColor: 'var(--spw-ds-primary)',\n};\n\nexport const Variant2Simplifie = TemplateVariant2.bind({});\nVariant2Simplifie.args = {\n  isActive: false,\n  siteTitle: 'Portail simplifié',\n  borderColor: 'var(--spw-ds-secondary)',\n};\nVariant2Simplifie.storyName = 'Variante bouton supplémentaire';\nVariant2Simplifie.args = {\n  isActive: false,\n  siteTitle: 'Titre du site',\n  borderColor: 'var(--spw-ds-primary)',\n};\n\nexport const Variant3Etendu = TemplateVariant3.bind({});\nVariant3Etendu.args = {\n  isActive: false,\n  siteTitle: '',\n  hasWallonieLogo: false,\n  borderColor: 'var(--spw-ds-tertiary)',\n};\nVariant3Etendu.storyName = 'Variante logo personnalisé';\n"]}
+{"version":3,"file":"spw-header.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-header/spw-header.stories.ts"],"names":[],"mappings":"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","sourcesContent":["let componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-header';\n\nconst subComponentTags = ['spw-header-lang', 'spw-header-lang-item', 'spw-header-navigation', 'spw-header-navigation-item', 'spw-header-navigation-dropdown', 'spw-header-persona'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Organismes/En-tête de site (header)',\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLe composant Header est la section supérieure d'une page web. Il contient le logo, la navigation principale, la recherche, le sélecteur de langue et le sélecteur de persona. C'est un élément crucial pour l'orientation et l'accessibilité du site.\n\n## Structure\n\nLe composant se compose de plusieurs sous-éléments :\n- **spw-header** : Conteneur principal avec gestion responsive\n- **spw-header-navigation** : Menu de navigation principal\n- **spw-header-navigation-item** : Item de menu avec support dropdown\n- **spw-header-navigation-dropdown** : Sous-menu déroulant\n- **spw-header-lang** : Sélecteur de langue\n- **spw-header-persona** : Sélecteur de profil utilisateur\n\n## Slots\n\n- Support des slots logo, logo-mobile, top-left, right, search\n\n## Fonctionnalités\n\n- Navigation multi-niveaux (jusqu'à 3 niveaux)\n- Recherche intégrée avec suggestions\n- Menu mobile responsive avec hamburger\n- Support des boutons d'action supplémentaires\n- Gestion automatique des états actifs\n- Accessibilité complète (ARIA, navigation clavier)\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/78fef5-en-tete-de-site-header)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContent(slotArgs) {\n  return /* HTML */ `\n    <div slot=\"top-left\">\n      <spw-header-persona>\n        <option data-link=\"#\" selected value=\"citoyen\">Citoyen</option>\n        <option data-link=\"#\" value=\"entreprise\">Entreprise</option>\n        <option data-link=\"#\" value=\"pouvoirs-locaux\">Pouvoirs locaux</option>\n        <option data-link=\"#\" value=\"non-marchands\">Non-marchands</option>\n      </spw-header-persona>\n    </div>\n\n    <div slot=\"right\">\n      <spw-header-lang>\n        <option data-link=\"#\" selected value=\"fr\">Fr</option>\n        <option data-link=\"#\" value=\"nl\">Nl</option>\n        <option data-link=\"#\" value=\"en\">En</option>\n        <option data-link=\"#\" value=\"de\">De</option>\n      </spw-header-lang>\n    </div>\n\n    <div slot=\"search\">\n      <spw-search-field\n        class=\"mb-4\"\n        size=\"medium\"\n        name=\"search\"\n        items='[\n                    {\"url\": \"http://google.com\", \"label\": \"Banane\"},\n                    {\"label\": \"Pomme\"},\n                    {\"label\": \"Poire\"},\n                    {\"label\": \"Cerise\"},\n                    {\"label\": \"Raisin\"}\n                  ]'\n        placeholder=\"Exemple : un mot-clé...\"\n      ></spw-search-field>\n      <h2 class=\"spw-ds-typography-heading-04 mb-4\">Suggestions de pages :</h2>\n      <spw-group orientation=\"vertical\">\n        <spw-link variant=\"tertiary\">Démarches</spw-link>\n        <spw-link variant=\"tertiary\">Réforme primes énergie</spw-link>\n        <spw-link variant=\"tertiary\">Jobs</spw-link>\n        <spw-link variant=\"tertiary\">Trafiroutes</spw-link>\n      </spw-group>\n    </div>\n\n    <spw-header-navigation>\n      <spw-header-navigation-item is-active=\"${slotArgs.isActive}\">\n        <a href=\"#\">Rubrique 1</a>\n\n        <spw-header-navigation-dropdown>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique niveau 2</a>\n            <spw-header-navigation-dropdown>\n              <spw-header-navigation-item>\n                <a href=\"#\">Sous-rubrique niveau 3</a>\n              </spw-header-navigation-item>\n              <spw-header-navigation-item>\n                <a href=\"#\">Sous-rubrique niveau 3</a>\n              </spw-header-navigation-item>\n            </spw-header-navigation-dropdown>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique</a>\n          </spw-header-navigation-item>\n        </spw-header-navigation-dropdown>\n      </spw-header-navigation-item>\n\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 2</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 3</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 4</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 5</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 6</a>\n      </spw-header-navigation-item>\n    </spw-header-navigation>\n  `;\n}\n\nfunction htmlContentVariant2(slotArgs) {\n  return /* HTML */ `\n    <div slot=\"right\">\n      <spw-header-lang>\n        <option data-link=\"#\" selected value=\"fr\">Fr</option>\n        <option data-link=\"#\" value=\"nl\">Nl</option>\n      </spw-header-lang>\n    </div>\n\n    <div slot=\"search\">\n      <spw-search-field class=\"mb-4\" size=\"medium\" name=\"search\" placeholder=\"Rechercher...\"></spw-search-field>\n      <h2 class=\"spw-ds-typography-heading-04 mb-4\">Accès rapide :</h2>\n      <spw-group orientation=\"vertical\">\n        <spw-link variant=\"tertiary\">Contact</spw-link>\n        <spw-link variant=\"tertiary\">FAQ</spw-link>\n        <spw-link variant=\"tertiary\">Services en ligne</spw-link>\n      </spw-group>\n    </div>\n\n    <spw-header-navigation\n      extra-button=\"true\"\n      extra-button-text=\"Bouton\"\n      extra-button-href=\"#\"\n      extra-button-target=\"_blank\"\n      extra-button-icon=\"fa-arrow-right\"\n      extra-button-variant=\"primary\"\n    >\n      <spw-header-navigation-item is-active=\"${slotArgs.isActive}\">\n        <a href=\"#\">Accueil</a>\n      </spw-header-navigation-item>\n\n      <spw-header-navigation-item>\n        <a href=\"#\">Services</a>\n        <spw-header-navigation-dropdown>\n          <spw-header-navigation-item>\n            <a href=\"#\">Service 1</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Service 2</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Service 3</a>\n          </spw-header-navigation-item>\n        </spw-header-navigation-dropdown>\n      </spw-header-navigation-item>\n\n      <spw-header-navigation-item>\n        <a href=\"#\">Documentation</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Contact</a>\n      </spw-header-navigation-item>\n    </spw-header-navigation>\n  `;\n}\n\nfunction htmlContentVariant3(slotArgs) {\n  return /* HTML */ `\n    <div slot=\"logo\">\n      <img src=\"https://placehold.co/200x80/EEE/31343C?text=Logo\" alt=\"Logo personnalisé\" />\n    </div>\n    <div slot=\"logo-mobile\">\n      <img src=\"https://placehold.co/200x80/EEE/31343C?text=Logo\" alt=\"Logo personnalisé\" />\n    </div>\n    <div slot=\"top-left\">\n      <spw-header-persona>\n        <option data-link=\"#\" selected value=\"particulier\">Particulier</option>\n        <option data-link=\"#\" value=\"professionnel\">Professionnel</option>\n        <option data-link=\"#\" value=\"administration\">Administration</option>\n      </spw-header-persona>\n    </div>\n\n    <div slot=\"right\">\n      <spw-header-lang>\n        <option data-link=\"#\" selected value=\"fr\">Fr</option>\n        <option data-link=\"#\" value=\"nl\">Nl</option>\n        <option data-link=\"#\" value=\"en\">En</option>\n      </spw-header-lang>\n    </div>\n\n    <div slot=\"search\">\n      <spw-search-field\n        class=\"mb-4\"\n        size=\"medium\"\n        name=\"search\"\n        items='[\n                    {\"url\": \"#\", \"label\": \"Formulaires\"},\n                    {\"url\": \"#\", \"label\": \"Aides et subsides\"},\n                    {\"url\": \"#\", \"label\": \"Permis\"},\n                    {\"url\": \"#\", \"label\": \"Attestations\"}\n                  ]'\n        placeholder=\"Que recherchez-vous ?\"\n      ></spw-search-field>\n      <h2 class=\"spw-ds-typography-heading-04 mb-4\">Les plus consultés :</h2>\n      <spw-group orientation=\"vertical\">\n        <spw-link variant=\"tertiary\">Mon compte</spw-link>\n        <spw-link variant=\"tertiary\">Primes habitation</spw-link>\n        <spw-link variant=\"tertiary\">Mobilité et transport</spw-link>\n        <spw-link variant=\"tertiary\">Environnement</spw-link>\n        <spw-link variant=\"tertiary\">Emploi et formation</spw-link>\n      </spw-group>\n    </div>\n\n    <spw-header-navigation>\n      <spw-header-navigation-item is-active=\"${slotArgs.isActive}\">\n        <a href=\"#\">Thématiques</a>\n\n        <spw-header-navigation-dropdown>\n          <spw-header-navigation-item>\n            <a href=\"#\">Aménagement du territoire</a>\n            <spw-header-navigation-dropdown>\n              <spw-header-navigation-item>\n                <a href=\"#\">Urbanisme</a>\n              </spw-header-navigation-item>\n              <spw-header-navigation-item>\n                <a href=\"#\">Patrimoine</a>\n              </spw-header-navigation-item>\n              <spw-header-navigation-item>\n                <a href=\"#\">Lotissements</a>\n              </spw-header-navigation-item>\n            </spw-header-navigation-dropdown>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Mobilité</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Environnement</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Économie</a>\n          </spw-header-navigation-item>\n        </spw-header-navigation-dropdown>\n      </spw-header-navigation-item>\n\n      <spw-header-navigation-item>\n        <a href=\"#\">Démarches</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Actualités</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">À propos</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Mon espace</a>\n      </spw-header-navigation-item>\n    </spw-header-navigation>\n  `;\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContent(args);\n\n  return element;\n};\n\nconst TemplateVariant2: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContentVariant2(args);\n\n  return element;\n};\n\nconst TemplateVariant3: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContentVariant3(args);\n\n  return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  isActive: false,\n  siteTitle: 'Titre du site',\n  borderColor: 'var(--spw-ds-primary)',\n};\nDefault.parameters = {\n  docs: {\n    description: {\n      story: `\nHeader complet avec toutes les fonctionnalités : sélecteur de persona, navigation multi-niveaux (jusqu'à 3 niveaux), recherche avec suggestions, et sélecteur de langue.\n\nCas d'usage : header principal d'un site institutionnel avec navigation complexe. Inclut 6 rubriques de navigation dont une avec sous-menus imbriqués. La recherche propose des suggestions de pages populaires.\n      `,\n    },\n  },\n};\n\nexport const Variant2Simplifie = TemplateVariant2.bind({});\nVariant2Simplifie.args = {\n  isActive: false,\n  siteTitle: 'Titre du site',\n  borderColor: 'var(--spw-ds-primary)',\n};\nVariant2Simplifie.storyName = 'Variante bouton supplémentaire';\nVariant2Simplifie.parameters = {\n  docs: {\n    description: {\n      story: `\nHeader simplifié avec bouton d'action supplémentaire dans la navigation. Idéal pour mettre en avant une action principale (inscription, connexion, téléchargement).\n\nLe bouton extra peut être configuré avec icône, variant, lien et target. Navigation simplifiée avec 4 rubriques dont une avec dropdown.\n      `,\n    },\n  },\n};\n\nexport const Variant3Etendu = TemplateVariant3.bind({});\nVariant3Etendu.args = {\n  isActive: false,\n  siteTitle: '',\n  hasWallonieLogo: false,\n  borderColor: 'var(--spw-ds-tertiary)',\n};\nVariant3Etendu.storyName = 'Variante logo personnalisé';\nVariant3Etendu.parameters = {\n  docs: {\n    description: {\n      story: `\nHeader avec logo personnalisé (slots logo et logo-mobile). Permet d'utiliser un logo custom au lieu du logo Wallonie par défaut.\n\nConfiguration étendue avec sélecteur de persona à 3 options, recherche avec items prédéfinis, et navigation thématique. Parfait pour les sites spécialisés ou portails métiers nécessitant une identité visuelle distincte.\n      `,\n    },\n  },\n};\n"]}

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

@@ -21,7 +21,23 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Bandeau illustré pour une mise en avant percutante.
+Le composant Hero Banner crée un bandeau visuel impactant en haut de page pour capter l'attention et mettre en avant un message clé, un appel à l'action ou du contenu principal. Il combine image, texte et actions de manière équilibrée.
+
+## Variants disponibles
+
+- **Grey** : Arrière-plan gris avec image latérale
+- **White** : Arrière-plan blanc avec image latérale
+- **Photo** : Image pleine largeur en arrière-plan
+- **Maxi** : Bannière plein écran avec overlay pour page d'accueil
+
+## Fonctionnalités
+
+- Support de multiples layouts et alignements
+- Intégration de vidéos via modal
+- Overlay personnalisable sur l'image
+- Responsive design adaptatif
+- Support du contenu HTML dans le slot par défaut
+- Accessibilité avec gestion du clavier
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/5039a3-bandeau-den-tete-hero-banner)
         `,
@@ -105,6 +121,13 @@ PhotoLeft.args = {
     surface: 'light',
     alignment: 'left',
 };
+PhotoLeft.parameters = {
+    docs: {
+        description: {
+            story: `Hero avec image pleine largeur en arrière-plan et contenu aligné à gauche. L'image couvre toute la surface et le contenu est positionné sur la gauche avec un fond semi-transparent.`,
+        },
+    },
+};
 export const PhotoRight = Template.bind({});
 PhotoRight.args = {
     variant: 'photo',
@@ -113,6 +136,13 @@ PhotoRight.args = {
     surface: 'light',
     alignment: 'right',
 };
+PhotoRight.parameters = {
+    docs: {
+        description: {
+            story: `Hero avec image pleine largeur en arrière-plan et contenu aligné à droite. Idéal pour créer une asymétrie visuelle intéressante.`,
+        },
+    },
+};
 export const PhotoCenter = Template.bind({});
 PhotoCenter.args = {
     variant: 'photo',
@@ -121,6 +151,13 @@ PhotoCenter.args = {
     surface: 'light',
     alignment: 'center',
 };
+PhotoCenter.parameters = {
+    docs: {
+        description: {
+            story: `Hero avec image pleine largeur et contenu centré. Parfait pour les pages d'accueil avec un message principal fort et centralisé.`,
+        },
+    },
+};
 export const Maxi = TemplateMaxi.bind({});
 Maxi.args = {
     variant: 'maxi',
@@ -129,6 +166,13 @@ Maxi.args = {
     surface: 'dark',
     overlayOpacity: 60,
 };
+Maxi.parameters = {
+    docs: {
+        description: {
+            story: `Hero maxi plein écran avec overlay personnalisable, idéal pour les pages d'accueil. Inclut un champ de recherche et des raccourcis d'actions rapides. L'overlay assombrit l'image pour améliorer la lisibilité du contenu.`,
+        },
+    },
+};
 export const GreyLeft = Template.bind({});
 GreyLeft.args = {
     variant: 'grey',
@@ -137,6 +181,13 @@ GreyLeft.args = {
     surface: 'light',
     alignment: 'left',
 };
+GreyLeft.parameters = {
+    docs: {
+        description: {
+            story: `Hero avec arrière-plan gris et image positionnée à droite, contenu aligné à gauche. Le fond gris crée un contraste doux et professionnel.`,
+        },
+    },
+};
 export const GreyRight = Template.bind({});
 GreyRight.args = {
     variant: 'grey',
@@ -145,6 +196,13 @@ GreyRight.args = {
     surface: 'light',
     alignment: 'right',
 };
+GreyRight.parameters = {
+    docs: {
+        description: {
+            story: `Hero avec arrière-plan gris et image positionnée à gauche, contenu aligné à droite. Inverse du GreyLeft pour varier la mise en page.`,
+        },
+    },
+};
 export const WhiteLeft = Template.bind({});
 WhiteLeft.args = {
     variant: 'white',
@@ -153,6 +211,13 @@ WhiteLeft.args = {
     surface: 'light',
     alignment: 'left',
 };
+WhiteLeft.parameters = {
+    docs: {
+        description: {
+            story: `Hero avec arrière-plan blanc et image à droite, contenu à gauche. Le fond blanc crée une atmosphère légère et épurée, parfait pour un contenu institutionnel.`,
+        },
+    },
+};
 export const WhiteRight = Template.bind({});
 WhiteRight.args = {
     variant: 'white',
@@ -161,6 +226,13 @@ WhiteRight.args = {
     surface: 'light',
     alignment: 'right',
 };
+WhiteRight.parameters = {
+    docs: {
+        description: {
+            story: `Hero avec arrière-plan blanc et image à gauche, contenu à droite. Alternative symétrique du WhiteLeft.`,
+        },
+    },
+};
 export const WhiteLeftPictureFull = Template.bind({});
 WhiteLeftPictureFull.args = {
     variant: 'white',
@@ -170,6 +242,13 @@ WhiteLeftPictureFull.args = {
     alignment: 'left',
     hasPictureFull: true,
 };
+WhiteLeftPictureFull.parameters = {
+    docs: {
+        description: {
+            story: `Hero blanc avec image pleine hauteur sans padding. L'image occupe tout l'espace disponible verticalement pour un impact visuel maximal.`,
+        },
+    },
+};
 export const WhiteRightPictureFull = Template.bind({});
 WhiteRightPictureFull.args = {
     variant: 'white',
@@ -179,4 +258,11 @@ WhiteRightPictureFull.args = {
     alignment: 'right',
     hasPictureFull: true,
 };
+WhiteRightPictureFull.parameters = {
+    docs: {
+        description: {
+            story: `Hero blanc avec image pleine hauteur à gauche sans padding. Version inversée du WhiteLeftPictureFull avec contenu à droite.`,
+        },
+    },
+};
 //# sourceMappingURL=spw-hero.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"spw-hero.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-hero/spw-hero.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,UAAU,CAAC;AAE9B,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,4CAA4C;IACnD,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;SAMV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW;IAClB,OAAO,UAAU,CAAC;;;;;;;GAOjB,CAAC;AACJ,CAAC;AAED,SAAS,eAAe;IACtB,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;GAwBjB,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,WAAW,EAAE,CAAC;IAElC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,YAAY,GAAY,IAAI,CAAC,EAAE;IACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,eAAe,EAAE,CAAC;IAEtC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,EAAE;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,IAAI;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,qBAAqB,CAAC,IAAI,GAAG;IAC3B,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,OAAO;IAClB,cAAc,EAAE,IAAI;CACrB,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-hero';\n\nconst subComponentTags = [];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: \"Organismes/Bandeau d'en-tête (hero banner)\",\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nBandeau illustré pour une mise en avant percutante.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/5039a3-bandeau-den-tete-hero-banner)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContent() {\n  return /* HTML */ `\n    <h1 class=\"spw-ds-typography-heading-01 mb-3\">Mon titre</h1>\n    <p class=\"spw-ds-typography-body-1 mb-4\">Ceci est un exemple du hero banner avec une image.</p>\n    <spw-group type=\"buttons\" orientation=\"horizontal\" alignment=\"left\">\n      <spw-button is-full-width-mobile=\"true\" variant=\"primary\">Bouton primaire</spw-button>\n      <spw-button is-full-width-mobile=\"true\" variant=\"tertiary\">Bouton tertiaire</spw-button>\n    </spw-group>\n  `;\n}\n\nfunction htmlContentMaxi() {\n  return /* HTML */ `\n    <h1 class=\"spw-ds-typography-heading-01 mb-4\">Que cherchez-vous ?</h1>\n    <spw-search-field\n      class=\"mb-3\"\n      size=\"large\"\n      name=\"search\"\n      items='[\n                      {\"url\": \"http://google.com\", \"label\": \"Banane\"},\n                      {\"label\": \"Pomme\"},\n                      {\"label\": \"Poire\"},\n                      {\"label\": \"Cerise\"},\n                      {\"label\": \"Raisin\"}\n                    ]'\n      placeholder=\"Exemple : un mot-clé...\"\n    ></spw-search-field>\n    <div class=\"d-flex justify-content-center flex-wrap\">\n      <spw-button class=\"m-2\" variant=\"primary\">Démarches</spw-button>\n      <spw-button class=\"m-2\" variant=\"primary\">Réforme primes énergie</spw-button>\n      <spw-button class=\"m-2\" variant=\"primary\">Jobs</spw-button>\n      <spw-button class=\"m-2\" variant=\"primary\">Trafiroutes</spw-button>\n      <spw-button class=\"m-2\" variant=\"primary\">Précompte immobilier</spw-button>\n      <spw-button class=\"m-2\" variant=\"primary\">Taxes de circulation</spw-button>\n      <spw-button class=\"m-2\" variant=\"primary\">Plan de paiement</spw-button>\n    </div>\n  `;\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContent();\n\n  return element;\n};\n\nconst TemplateMaxi: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContentMaxi();\n\n  return element;\n};\n\nexport const PhotoLeft = Template.bind({});\nPhotoLeft.args = {\n  variant: 'photo',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'left',\n};\n\nexport const PhotoRight = Template.bind({});\nPhotoRight.args = {\n  variant: 'photo',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'right',\n};\n\nexport const PhotoCenter = Template.bind({});\nPhotoCenter.args = {\n  variant: 'photo',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'center',\n};\n\nexport const Maxi = TemplateMaxi.bind({});\nMaxi.args = {\n  variant: 'maxi',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'dark',\n  overlayOpacity: 60,\n};\n\nexport const GreyLeft = Template.bind({});\nGreyLeft.args = {\n  variant: 'grey',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'left',\n};\n\nexport const GreyRight = Template.bind({});\nGreyRight.args = {\n  variant: 'grey',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'right',\n};\n\nexport const WhiteLeft = Template.bind({});\nWhiteLeft.args = {\n  variant: 'white',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'left',\n};\n\nexport const WhiteRight = Template.bind({});\nWhiteRight.args = {\n  variant: 'white',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'right',\n};\n\nexport const WhiteLeftPictureFull = Template.bind({});\nWhiteLeftPictureFull.args = {\n  variant: 'white',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'left',\n  hasPictureFull: true,\n};\n\nexport const WhiteRightPictureFull = Template.bind({});\nWhiteRightPictureFull.args = {\n  variant: 'white',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'right',\n  hasPictureFull: true,\n};\n"]}
+{"version":3,"file":"spw-hero.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-hero/spw-hero.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,UAAU,CAAC;AAE9B,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,4CAA4C;IACnD,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;SAsBV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW;IAClB,OAAO,UAAU,CAAC;;;;;;;GAOjB,CAAC;AACJ,CAAC;AAED,SAAS,eAAe;IACtB,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;GAwBjB,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,WAAW,EAAE,CAAC;IAElC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,YAAY,GAAY,IAAI,CAAC,EAAE;IACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,eAAe,EAAE,CAAC;IAEtC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,MAAM;CAClB,CAAC;AACF,SAAS,CAAC,UAAU,GAAG;IACrB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,sLAAsL;SAC9L;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,OAAO;CACnB,CAAC;AACF,UAAU,CAAC,UAAU,GAAG;IACtB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,kIAAkI;SAC1I;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,QAAQ;CACpB,CAAC;AACF,WAAW,CAAC,UAAU,GAAG;IACvB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,kIAAkI;SAC1I;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,EAAE;CACnB,CAAC;AACF,IAAI,CAAC,UAAU,GAAG;IAChB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,4NAA4N;SACpO;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,MAAM;CAClB,CAAC;AACF,QAAQ,CAAC,UAAU,GAAG;IACpB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,2IAA2I;SACnJ;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,OAAO;CACnB,CAAC;AACF,SAAS,CAAC,UAAU,GAAG;IACrB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,sIAAsI;SAC9I;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,MAAM;CAClB,CAAC;AACF,SAAS,CAAC,UAAU,GAAG;IACrB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,+JAA+J;SACvK;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,OAAO;CACnB,CAAC;AACF,UAAU,CAAC,UAAU,GAAG;IACtB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,wGAAwG;SAChH;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,IAAI;CACrB,CAAC;AACF,oBAAoB,CAAC,UAAU,GAAG;IAChC,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,yIAAyI;SACjJ;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,qBAAqB,CAAC,IAAI,GAAG;IAC3B,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,8DAA8D;IACxE,QAAQ,EAAE,cAAc;IACxB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,OAAO;IAClB,cAAc,EAAE,IAAI;CACrB,CAAC;AACF,qBAAqB,CAAC,UAAU,GAAG;IACjC,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,6HAA6H;SACrI;KACF;CACF,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-hero';\n\nconst subComponentTags = [];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: \"Organismes/Bandeau d'en-tête (hero banner)\",\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLe composant Hero Banner crée un bandeau visuel impactant en haut de page pour capter l'attention et mettre en avant un message clé, un appel à l'action ou du contenu principal. Il combine image, texte et actions de manière équilibrée.\n\n## Variants disponibles\n\n- **Grey** : Arrière-plan gris avec image latérale\n- **White** : Arrière-plan blanc avec image latérale\n- **Photo** : Image pleine largeur en arrière-plan\n- **Maxi** : Bannière plein écran avec overlay pour page d'accueil\n\n## Fonctionnalités\n\n- Support de multiples layouts et alignements\n- Intégration de vidéos via modal\n- Overlay personnalisable sur l'image\n- Responsive design adaptatif\n- Support du contenu HTML dans le slot par défaut\n- Accessibilité avec gestion du clavier\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/5039a3-bandeau-den-tete-hero-banner)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContent() {\n  return /* HTML */ `\n    <h1 class=\"spw-ds-typography-heading-01 mb-3\">Mon titre</h1>\n    <p class=\"spw-ds-typography-body-1 mb-4\">Ceci est un exemple du hero banner avec une image.</p>\n    <spw-group type=\"buttons\" orientation=\"horizontal\" alignment=\"left\">\n      <spw-button is-full-width-mobile=\"true\" variant=\"primary\">Bouton primaire</spw-button>\n      <spw-button is-full-width-mobile=\"true\" variant=\"tertiary\">Bouton tertiaire</spw-button>\n    </spw-group>\n  `;\n}\n\nfunction htmlContentMaxi() {\n  return /* HTML */ `\n    <h1 class=\"spw-ds-typography-heading-01 mb-4\">Que cherchez-vous ?</h1>\n    <spw-search-field\n      class=\"mb-3\"\n      size=\"large\"\n      name=\"search\"\n      items='[\n                      {\"url\": \"http://google.com\", \"label\": \"Banane\"},\n                      {\"label\": \"Pomme\"},\n                      {\"label\": \"Poire\"},\n                      {\"label\": \"Cerise\"},\n                      {\"label\": \"Raisin\"}\n                    ]'\n      placeholder=\"Exemple : un mot-clé...\"\n    ></spw-search-field>\n    <div class=\"d-flex justify-content-center flex-wrap\">\n      <spw-button class=\"m-2\" variant=\"primary\">Démarches</spw-button>\n      <spw-button class=\"m-2\" variant=\"primary\">Réforme primes énergie</spw-button>\n      <spw-button class=\"m-2\" variant=\"primary\">Jobs</spw-button>\n      <spw-button class=\"m-2\" variant=\"primary\">Trafiroutes</spw-button>\n      <spw-button class=\"m-2\" variant=\"primary\">Précompte immobilier</spw-button>\n      <spw-button class=\"m-2\" variant=\"primary\">Taxes de circulation</spw-button>\n      <spw-button class=\"m-2\" variant=\"primary\">Plan de paiement</spw-button>\n    </div>\n  `;\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContent();\n\n  return element;\n};\n\nconst TemplateMaxi: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContentMaxi();\n\n  return element;\n};\n\nexport const PhotoLeft = Template.bind({});\nPhotoLeft.args = {\n  variant: 'photo',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'left',\n};\nPhotoLeft.parameters = {\n  docs: {\n    description: {\n      story: `Hero avec image pleine largeur en arrière-plan et contenu aligné à gauche. L'image couvre toute la surface et le contenu est positionné sur la gauche avec un fond semi-transparent.`,\n    },\n  },\n};\n\nexport const PhotoRight = Template.bind({});\nPhotoRight.args = {\n  variant: 'photo',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'right',\n};\nPhotoRight.parameters = {\n  docs: {\n    description: {\n      story: `Hero avec image pleine largeur en arrière-plan et contenu aligné à droite. Idéal pour créer une asymétrie visuelle intéressante.`,\n    },\n  },\n};\n\nexport const PhotoCenter = Template.bind({});\nPhotoCenter.args = {\n  variant: 'photo',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'center',\n};\nPhotoCenter.parameters = {\n  docs: {\n    description: {\n      story: `Hero avec image pleine largeur et contenu centré. Parfait pour les pages d'accueil avec un message principal fort et centralisé.`,\n    },\n  },\n};\n\nexport const Maxi = TemplateMaxi.bind({});\nMaxi.args = {\n  variant: 'maxi',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'dark',\n  overlayOpacity: 60,\n};\nMaxi.parameters = {\n  docs: {\n    description: {\n      story: `Hero maxi plein écran avec overlay personnalisable, idéal pour les pages d'accueil. Inclut un champ de recherche et des raccourcis d'actions rapides. L'overlay assombrit l'image pour améliorer la lisibilité du contenu.`,\n    },\n  },\n};\n\nexport const GreyLeft = Template.bind({});\nGreyLeft.args = {\n  variant: 'grey',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'left',\n};\nGreyLeft.parameters = {\n  docs: {\n    description: {\n      story: `Hero avec arrière-plan gris et image positionnée à droite, contenu aligné à gauche. Le fond gris crée un contraste doux et professionnel.`,\n    },\n  },\n};\n\nexport const GreyRight = Template.bind({});\nGreyRight.args = {\n  variant: 'grey',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'right',\n};\nGreyRight.parameters = {\n  docs: {\n    description: {\n      story: `Hero avec arrière-plan gris et image positionnée à gauche, contenu aligné à droite. Inverse du GreyLeft pour varier la mise en page.`,\n    },\n  },\n};\n\nexport const WhiteLeft = Template.bind({});\nWhiteLeft.args = {\n  variant: 'white',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'left',\n};\nWhiteLeft.parameters = {\n  docs: {\n    description: {\n      story: `Hero avec arrière-plan blanc et image à droite, contenu à gauche. Le fond blanc crée une atmosphère légère et épurée, parfait pour un contenu institutionnel.`,\n    },\n  },\n};\n\nexport const WhiteRight = Template.bind({});\nWhiteRight.args = {\n  variant: 'white',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'right',\n};\nWhiteRight.parameters = {\n  docs: {\n    description: {\n      story: `Hero avec arrière-plan blanc et image à gauche, contenu à droite. Alternative symétrique du WhiteLeft.`,\n    },\n  },\n};\n\nexport const WhiteLeftPictureFull = Template.bind({});\nWhiteLeftPictureFull.args = {\n  variant: 'white',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'left',\n  hasPictureFull: true,\n};\nWhiteLeftPictureFull.parameters = {\n  docs: {\n    description: {\n      story: `Hero blanc avec image pleine hauteur sans padding. L'image occupe tout l'espace disponible verticalement pour un impact visuel maximal.`,\n    },\n  },\n};\n\nexport const WhiteRightPictureFull = Template.bind({});\nWhiteRightPictureFull.args = {\n  variant: 'white',\n  imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  imageAlt: 'Attribut alt',\n  surface: 'light',\n  alignment: 'right',\n  hasPictureFull: true,\n};\nWhiteRightPictureFull.parameters = {\n  docs: {\n    description: {\n      story: `Hero blanc avec image pleine hauteur à gauche sans padding. Version inversée du WhiteLeftPictureFull avec contenu à droite.`,\n    },\n  },\n};\n"]}

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

@@ -21,7 +21,30 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Organise et présente des informations de manière structurée et facilement lisible. 
+Le composant List organise et présente des informations de manière structurée et facilement lisible. Il permet d'afficher des éléments avec titre, description, catégorie et métadonnées dans un format cohérent.
+
+## Structure
+
+Le composant se compose de quatre éléments :
+- **spw-list** : Conteneur principal avec gestion de l'espacement et de la surface
+- **spw-list-item** : Item individuel avec support lien, catégorie, icône
+- **spw-list-title** : Titre de l'élément avec line-clamp configurable
+- **spw-list-description** : Description avec line-clamp configurable
+
+## Fonctionnalités
+
+- Possibilité de tronquer le texte avec line-clamp
+- Catégories avec icônes personnalisables
+- Liens cliquables sur toute la zone
+- Support des icônes FontAwesome
+- Surface adaptable au contexte visuel
+
+## Cas d'usage
+
+- Listes de résultats de recherche
+- Affichage d'actualités ou d'événements
+- Répertoires de documents ou ressources
+- Accès rapides (variant shortcut)
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/51c7cf-liste)
         `,
@@ -126,4 +149,37 @@ Shortcut.args = {
     icon: 'fa-arrow-up-right-from-square',
     categoryIcon: '',
 };
+Default.parameters = {
+    docs: {
+        description: {
+            story: `
+Liste par défaut avec items contenant titre long et description avec line-clamp à 2 lignes. Chaque item affiche une icône flèche droite et ouvre dans un nouvel onglet.
+
+Cas d'usage : résultats de recherche, liste d'actualités, documents administratifs avec aperçu du contenu. Le line-clamp permet de garder une hauteur cohérente entre les items.
+      `,
+        },
+    },
+};
+Category.parameters = {
+    docs: {
+        description: {
+            story: `
+Liste avec catégories affichées. Chaque item montre une catégorie avec icône (fa-file-signature) permettant de classifier les contenus. Line-clamp à 2 lignes pour titre et description.
+
+Cas d'usage : liste de documents triés par type (formulaires, attestations, décisions), actualités catégorisées (emploi, environnement, mobilité), ressources organisées par thématique.
+      `,
+        },
+    },
+};
+Shortcut.parameters = {
+    docs: {
+        description: {
+            story: `
+Variante shortcut avec line-clamp à 1 ligne et icône d'ouverture externe (fa-arrow-up-right-from-square). Format compact pour les accès rapides.
+
+Cas d'usage : menu d'accès rapides sur homepage, liens vers services externes, raccourcis vers outils fréquemment utilisés. L'icône externe indique clairement l'ouverture dans un nouvel onglet.
+      `,
+        },
+    },
+};
 //# sourceMappingURL=spw-list.stories.js.map

package/dist/collection/stories/organisms/spw-list/spw-list.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-list.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-list/spw-list.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,UAAU,CAAC;AAE9B,MAAM,gBAAgB,GAAG,CAAC,eAAe,EAAE,sBAAsB,EAAE,gBAAgB,CAAC,CAAC;AAErF,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;SAMV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,kBAAkB,CAAC,QAAQ;IAClC,OAAO,UAAU,CAAC;;cAEN,QAAQ,CAAC,IAAI;iBACV,QAAQ,CAAC,OAAO;kBACf,QAAQ,CAAC,QAAQ;uBACZ,QAAQ,CAAC,YAAY;uBACrB,QAAQ,CAAC,YAAY;oBACxB,QAAQ,CAAC,SAAS;cACxB,QAAQ,CAAC,IAAI;gBACX,QAAQ,CAAC,MAAM;cACjB,QAAQ,CAAC,IAAI;;;;;;;;;;;;;;cAcb,QAAQ,CAAC,IAAI;iBACV,QAAQ,CAAC,OAAO;kBACf,QAAQ,CAAC,QAAQ;uBACZ,QAAQ,CAAC,YAAY;uBACrB,QAAQ,CAAC,YAAY;oBACxB,QAAQ,CAAC,SAAS;cACxB,QAAQ,CAAC,IAAI;gBACX,QAAQ,CAAC,MAAM;cACjB,QAAQ,CAAC,IAAI;;;;;;;;;;;;;GAaxB,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAY,IAAI,CAAC,EAAE;IACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,EAAE;IACZ,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,gBAAgB;IACtB,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,WAAW;IACrB,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,EAAE;IACR,YAAY,EAAE,mBAAmB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,EAAE;IACZ,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,+BAA+B;IACrC,YAAY,EAAE,EAAE;CACjB,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-list';\n\nconst subComponentTags = ['spw-list-item', 'spw-list-description', 'spw-list-title'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Organismes/Liste',\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nOrganise et présente des informations de manière structurée et facilement lisible. \n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/51c7cf-liste)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContentDefault(slotArgs) {\n  return /* HTML */ `\n    <spw-list-item\n      icon=\"${slotArgs.icon}\"\n      variant=\"${slotArgs.variant}\"\n      category=\"${slotArgs.category}\"\n      category-link=\"${slotArgs.categoryLink}\"\n      category-icon=\"${slotArgs.categoryIcon}\"\n      line-clamp=\"${slotArgs.lineClamp}\"\n      href=\"${slotArgs.href}\"\n      target=\"${slotArgs.target}\"\n      icon=\"${slotArgs.icon}\"\n    >\n      <spw-list-title\n        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n        orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n        lacinia turpis pharetra pulvinar.\n      </spw-list-title>\n      <spw-list-description\n        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n        orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n        lacinia turpis pharetra pulvinar.\n      </spw-list-description>\n    </spw-list-item>\n    <spw-list-item\n      icon=\"${slotArgs.icon}\"\n      variant=\"${slotArgs.variant}\"\n      category=\"${slotArgs.category}\"\n      category-link=\"${slotArgs.categoryLink}\"\n      category-icon=\"${slotArgs.categoryIcon}\"\n      line-clamp=\"${slotArgs.lineClamp}\"\n      href=\"${slotArgs.href}\"\n      target=\"${slotArgs.target}\"\n      icon=\"${slotArgs.icon}\"\n    >\n      <spw-list-title\n        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n        orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n        lacinia turpis pharetra pulvinar.\n      </spw-list-title>\n      <spw-list-description\n        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n        orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n        lacinia turpis pharetra pulvinar.\n      </spw-list-description>\n    </spw-list-item>\n  `;\n}\n\nconst TemplateDefault: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContentDefault(args);\n\n  return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {\n  variant: 'default',\n  category: '',\n  categoryLink: '',\n  lineClamp: '2',\n  href: 'http://google.com',\n  target: '_blank',\n  icon: 'fa-arrow-right',\n  categoryIcon: '',\n};\n\nexport const Category = TemplateDefault.bind({});\nCategory.args = {\n  variant: 'default',\n  category: 'Catégorie',\n  categoryLink: '',\n  lineClamp: '2',\n  href: 'http://google.com',\n  target: '_blank',\n  icon: '',\n  categoryIcon: 'fa-file-signature',\n};\n\nexport const Shortcut = TemplateDefault.bind({});\nShortcut.args = {\n  variant: 'shortcut',\n  category: '',\n  categoryLink: '',\n  lineClamp: '1',\n  href: 'http://google.com',\n  target: '_blank',\n  icon: 'fa-arrow-up-right-from-square',\n  categoryIcon: '',\n};\n"]}
+{"version":3,"file":"spw-list.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-list/spw-list.stories.ts"],"names":[],"mappings":"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","sourcesContent":["let componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-list';\n\nconst subComponentTags = ['spw-list-item', 'spw-list-description', 'spw-list-title'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Organismes/Liste',\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLe composant List organise et présente des informations de manière structurée et facilement lisible. Il permet d'afficher des éléments avec titre, description, catégorie et métadonnées dans un format cohérent.\n\n## Structure\n\nLe composant se compose de quatre éléments :\n- **spw-list** : Conteneur principal avec gestion de l'espacement et de la surface\n- **spw-list-item** : Item individuel avec support lien, catégorie, icône\n- **spw-list-title** : Titre de l'élément avec line-clamp configurable\n- **spw-list-description** : Description avec line-clamp configurable\n\n## Fonctionnalités\n\n- Possibilité de tronquer le texte avec line-clamp\n- Catégories avec icônes personnalisables\n- Liens cliquables sur toute la zone\n- Support des icônes FontAwesome\n- Surface adaptable au contexte visuel\n\n## Cas d'usage\n\n- Listes de résultats de recherche\n- Affichage d'actualités ou d'événements\n- Répertoires de documents ou ressources\n- Accès rapides (variant shortcut)\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/51c7cf-liste)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContentDefault(slotArgs) {\n  return /* HTML */ `\n    <spw-list-item\n      icon=\"${slotArgs.icon}\"\n      variant=\"${slotArgs.variant}\"\n      category=\"${slotArgs.category}\"\n      category-link=\"${slotArgs.categoryLink}\"\n      category-icon=\"${slotArgs.categoryIcon}\"\n      line-clamp=\"${slotArgs.lineClamp}\"\n      href=\"${slotArgs.href}\"\n      target=\"${slotArgs.target}\"\n      icon=\"${slotArgs.icon}\"\n    >\n      <spw-list-title\n        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n        orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n        lacinia turpis pharetra pulvinar.\n      </spw-list-title>\n      <spw-list-description\n        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n        orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n        lacinia turpis pharetra pulvinar.\n      </spw-list-description>\n    </spw-list-item>\n    <spw-list-item\n      icon=\"${slotArgs.icon}\"\n      variant=\"${slotArgs.variant}\"\n      category=\"${slotArgs.category}\"\n      category-link=\"${slotArgs.categoryLink}\"\n      category-icon=\"${slotArgs.categoryIcon}\"\n      line-clamp=\"${slotArgs.lineClamp}\"\n      href=\"${slotArgs.href}\"\n      target=\"${slotArgs.target}\"\n      icon=\"${slotArgs.icon}\"\n    >\n      <spw-list-title\n        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n        orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n        lacinia turpis pharetra pulvinar.\n      </spw-list-title>\n      <spw-list-description\n        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n        orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n        lacinia turpis pharetra pulvinar.\n      </spw-list-description>\n    </spw-list-item>\n  `;\n}\n\nconst TemplateDefault: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContentDefault(args);\n\n  return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {\n  variant: 'default',\n  category: '',\n  categoryLink: '',\n  lineClamp: '2',\n  href: 'http://google.com',\n  target: '_blank',\n  icon: 'fa-arrow-right',\n  categoryIcon: '',\n};\n\nexport const Category = TemplateDefault.bind({});\nCategory.args = {\n  variant: 'default',\n  category: 'Catégorie',\n  categoryLink: '',\n  lineClamp: '2',\n  href: 'http://google.com',\n  target: '_blank',\n  icon: '',\n  categoryIcon: 'fa-file-signature',\n};\n\nexport const Shortcut = TemplateDefault.bind({});\nShortcut.args = {\n  variant: 'shortcut',\n  category: '',\n  categoryLink: '',\n  lineClamp: '1',\n  href: 'http://google.com',\n  target: '_blank',\n  icon: 'fa-arrow-up-right-from-square',\n  categoryIcon: '',\n};\n\nDefault.parameters = {\n  docs: {\n    description: {\n      story: `\nListe par défaut avec items contenant titre long et description avec line-clamp à 2 lignes. Chaque item affiche une icône flèche droite et ouvre dans un nouvel onglet.\n\nCas d'usage : résultats de recherche, liste d'actualités, documents administratifs avec aperçu du contenu. Le line-clamp permet de garder une hauteur cohérente entre les items.\n      `,\n    },\n  },\n};\n\nCategory.parameters = {\n  docs: {\n    description: {\n      story: `\nListe avec catégories affichées. Chaque item montre une catégorie avec icône (fa-file-signature) permettant de classifier les contenus. Line-clamp à 2 lignes pour titre et description.\n\nCas d'usage : liste de documents triés par type (formulaires, attestations, décisions), actualités catégorisées (emploi, environnement, mobilité), ressources organisées par thématique.\n      `,\n    },\n  },\n};\n\nShortcut.parameters = {\n  docs: {\n    description: {\n      story: `\nVariante shortcut avec line-clamp à 1 ligne et icône d'ouverture externe (fa-arrow-up-right-from-square). Format compact pour les accès rapides.\n\nCas d'usage : menu d'accès rapides sur homepage, liens vers services externes, raccourcis vers outils fréquemment utilisés. L'icône externe indique clairement l'ouverture dans un nouvel onglet.\n      `,\n    },\n  },\n};\n"]}

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

@@ -20,7 +20,22 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Affiche des notifications ou des informations importantes à l'utilisateur.
+Le composant Message affiche des notifications ou des informations importantes à l'utilisateur de manière contextuelle. Il permet de communiquer des messages de succès, d'alerte, d'information ou d'avertissement.
+
+## Variants disponibles
+
+- **Default** : Message standard sans contexte particulier
+- **Success** : Confirmation d'une action réussie (fond vert)
+- **Info** : Information neutre pour l'utilisateur (fond bleu)
+- **Alert** : Message d'erreur ou action échouée (fond rouge)
+- **Warning** : Avertissement nécessitant l'attention (fond jaune)
+
+## Fonctionnalités
+
+- Icône contextuelle automatique selon le variant
+- Option de masquage avec persistance en localStorage
+- Accessibilité avec attributs ARIA (role="alert", aria-live)
+- Support du clavier pour la fermeture
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/039ae1-message)
         `,
@@ -58,12 +73,67 @@ const commonArgs = {
 };
 export const Default = Template.bind({});
 Default.args = Object.assign(Object.assign({}, commonArgs), { messageId: '1', variant: 'default' });
+Default.parameters = {
+    docs: {
+        description: {
+            story: `
+Message par défaut avec un style neutre. Utilisé pour des informations générales qui ne nécessitent pas de contexte spécifique.
+
+Ce variant est approprié pour des messages informatifs sans urgence particulière.
+      `,
+        },
+    },
+};
 export const Success = Template.bind({});
 Success.args = Object.assign(Object.assign({}, commonArgs), { messageId: '2', variant: 'success' });
+Success.parameters = {
+    docs: {
+        description: {
+            story: `
+Message de succès avec fond vert et icône de validation. Utilisé pour confirmer qu'une action s'est déroulée correctement.
+
+Exemples : "Votre demande a été envoyée avec succès", "Données enregistrées"
+      `,
+        },
+    },
+};
 export const Alert = Template.bind({});
 Alert.args = Object.assign(Object.assign({}, commonArgs), { messageId: '3', variant: 'alert' });
+Alert.parameters = {
+    docs: {
+        description: {
+            story: `
+Message d'alerte avec fond rouge et icône d'erreur. Utilisé pour signaler une erreur critique ou un échec d'action.
+
+Exemples : "Erreur lors de la soumission", "Champs obligatoires manquants"
+      `,
+        },
+    },
+};
 export const Info = Template.bind({});
 Info.args = Object.assign(Object.assign({}, commonArgs), { messageId: '4', variant: 'info' });
+Info.parameters = {
+    docs: {
+        description: {
+            story: `
+Message informatif avec fond bleu et icône d'information. Utilisé pour fournir des informations complémentaires ou contextuelles.
+
+Exemples : "Cette fonctionnalité sera bientôt disponible", "Nouveauté disponible"
+      `,
+        },
+    },
+};
 export const Warning = Template.bind({});
 Warning.args = Object.assign(Object.assign({}, commonArgs), { messageId: '5', variant: 'warning' });
+Warning.parameters = {
+    docs: {
+        description: {
+            story: `
+Message d'avertissement avec fond orange et icône d'attention. Utilisé pour prévenir l'utilisateur d'une situation nécessitant vigilance.
+
+Exemples : "Votre session expire bientôt", "Attention aux informations sensibles"
+      `,
+        },
+    },
+};
 //# sourceMappingURL=spw-message.stories.js.map

package/dist/collection/stories/organisms/spw-message/spw-message.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-message.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-message/spw-message.stories.ts"],"names":[],"mappings":"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","sourcesContent":["let componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-message';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Organismes/Message',\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nAffiche des notifications ou des informations importantes à l'utilisateur.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/039ae1-message)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContent(slot) {\n  return /* HTML */ `${slot}`;\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const hasSlot = true;\n  const slottedLabel = 'content';\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    } else {\n      if (key !== slottedLabel) {\n        element.setAttribute(toKebabCase(key), val as string);\n      }\n    }\n  });\n\n  if (hasSlot) {\n    element.innerHTML = htmlContent(args[slottedLabel]);\n  }\n\n  return element;\n};\n\nconst commonArgs = {\n  messageTitle: 'Titre du message',\n  isDismissable: true,\n  content: 'Contenu du message',\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  ...commonArgs,\n  messageId: '1',\n  variant: 'default',\n};\n\nexport const Success = Template.bind({});\nSuccess.args = {\n  ...commonArgs,\n  messageId: '2',\n  variant: 'success',\n};\n\nexport const Alert = Template.bind({});\nAlert.args = {\n  ...commonArgs,\n  messageId: '3',\n  variant: 'alert',\n};\n\nexport const Info = Template.bind({});\nInfo.args = {\n  ...commonArgs,\n  messageId: '4',\n  variant: 'info',\n};\n\nexport const Warning = Template.bind({});\nWarning.args = {\n  ...commonArgs,\n  messageId: '5',\n  variant: 'warning',\n};\n"]}
+{"version":3,"file":"spw-message.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-message/spw-message.stories.ts"],"names":[],"mappings":"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","sourcesContent":["let componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-message';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Organismes/Message',\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLe composant Message affiche des notifications ou des informations importantes à l'utilisateur de manière contextuelle. Il permet de communiquer des messages de succès, d'alerte, d'information ou d'avertissement.\n\n## Variants disponibles\n\n- **Default** : Message standard sans contexte particulier\n- **Success** : Confirmation d'une action réussie (fond vert)\n- **Info** : Information neutre pour l'utilisateur (fond bleu)\n- **Alert** : Message d'erreur ou action échouée (fond rouge)\n- **Warning** : Avertissement nécessitant l'attention (fond jaune)\n\n## Fonctionnalités\n\n- Icône contextuelle automatique selon le variant\n- Option de masquage avec persistance en localStorage\n- Accessibilité avec attributs ARIA (role=\"alert\", aria-live)\n- Support du clavier pour la fermeture\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/039ae1-message)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContent(slot) {\n  return /* HTML */ `${slot}`;\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const hasSlot = true;\n  const slottedLabel = 'content';\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    } else {\n      if (key !== slottedLabel) {\n        element.setAttribute(toKebabCase(key), val as string);\n      }\n    }\n  });\n\n  if (hasSlot) {\n    element.innerHTML = htmlContent(args[slottedLabel]);\n  }\n\n  return element;\n};\n\nconst commonArgs = {\n  messageTitle: 'Titre du message',\n  isDismissable: true,\n  content: 'Contenu du message',\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  ...commonArgs,\n  messageId: '1',\n  variant: 'default',\n};\nDefault.parameters = {\n  docs: {\n    description: {\n      story: `\nMessage par défaut avec un style neutre. Utilisé pour des informations générales qui ne nécessitent pas de contexte spécifique.\n\nCe variant est approprié pour des messages informatifs sans urgence particulière.\n      `,\n    },\n  },\n};\n\nexport const Success = Template.bind({});\nSuccess.args = {\n  ...commonArgs,\n  messageId: '2',\n  variant: 'success',\n};\nSuccess.parameters = {\n  docs: {\n    description: {\n      story: `\nMessage de succès avec fond vert et icône de validation. Utilisé pour confirmer qu'une action s'est déroulée correctement.\n\nExemples : \"Votre demande a été envoyée avec succès\", \"Données enregistrées\"\n      `,\n    },\n  },\n};\n\nexport const Alert = Template.bind({});\nAlert.args = {\n  ...commonArgs,\n  messageId: '3',\n  variant: 'alert',\n};\nAlert.parameters = {\n  docs: {\n    description: {\n      story: `\nMessage d'alerte avec fond rouge et icône d'erreur. Utilisé pour signaler une erreur critique ou un échec d'action.\n\nExemples : \"Erreur lors de la soumission\", \"Champs obligatoires manquants\"\n      `,\n    },\n  },\n};\n\nexport const Info = Template.bind({});\nInfo.args = {\n  ...commonArgs,\n  messageId: '4',\n  variant: 'info',\n};\nInfo.parameters = {\n  docs: {\n    description: {\n      story: `\nMessage informatif avec fond bleu et icône d'information. Utilisé pour fournir des informations complémentaires ou contextuelles.\n\nExemples : \"Cette fonctionnalité sera bientôt disponible\", \"Nouveauté disponible\"\n      `,\n    },\n  },\n};\n\nexport const Warning = Template.bind({});\nWarning.args = {\n  ...commonArgs,\n  messageId: '5',\n  variant: 'warning',\n};\nWarning.parameters = {\n  docs: {\n    description: {\n      story: `\nMessage d'avertissement avec fond orange et icône d'attention. Utilisé pour prévenir l'utilisateur d'une situation nécessitant vigilance.\n\nExemples : \"Votre session expire bientôt\", \"Attention aux informations sensibles\"\n      `,\n    },\n  },\n};\n"]}