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

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

@@ -20,7 +20,23 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Le bouton est un élément d’interaction avec l’interface permettant à l’utilisateur d’effectuer une action.
+Le composant Button est un élément d'interaction essentiel permettant à l'utilisateur d'effectuer des actions dans l'interface. Il offre plusieurs variantes visuelles et états pour s'adapter à tous les contextes d'utilisation.
+
+## Variantes disponibles
+
+- **primary** : Action principale, attire l'attention
+- **secondary** : Action secondaire, moins proéminente
+- **tertiary** : Action tertiaire, discrète
+
+## Fonctionnalités
+
+- Support des icônes FontAwesome (gauche, droite ou seule)
+- État de chargement avec loader intégré
+- Mode icône seule pour actions compactes
+- États disabled et hover
+- Tailles configurables (small, medium, large)
+- Attributs href et target pour comportement lien
+
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/9055b6-bouton)
         `,
@@ -88,4 +104,46 @@ IconOnly.args = {
     icon: 'fa-arrow-right',
     label: '',
 };
+Primary.parameters = {
+    docs: {
+        description: {
+            story: `Bouton primary avec fond coloré. C'est le variant le plus proéminent, utilisé pour l'action principale d'une page ou d'un formulaire. Cas d'usage : soumettre un formulaire, confirmer une action importante, accéder à la fonctionnalité principale.`,
+        },
+    },
+};
+Secondary.parameters = {
+    docs: {
+        description: {
+            story: `Bouton secondary avec bordure. Moins proéminent que le primary, idéal pour les actions secondaires. Cas d'usage : annuler, actions alternatives dans un formulaire, boutons d'action dans les modales.`,
+        },
+    },
+};
+Tertiary.parameters = {
+    docs: {
+        description: {
+            story: `Bouton tertiary discret, style texte simple. Pour les actions peu prioritaires ou inline dans le contenu. Cas d'usage : liens d'action dans du texte, actions optionnelles, navigation secondaire.`,
+        },
+    },
+};
+WithIcon.parameters = {
+    docs: {
+        description: {
+            story: `Bouton avec icône positionnée à droite (fa-arrow-right). L'icône renforce visuellement l'action et améliore la compréhension. Cas d'usage : navigation ("Suivant", "Continuer"), téléchargement, actions avec direction.`,
+        },
+    },
+};
+WithLoader.parameters = {
+    docs: {
+        description: {
+            story: `Bouton avec état de chargement (isLoading). Le loader remplace l'icône pendant le traitement. Cas d'usage : soumission de formulaire asynchrone, appels API, actions nécessitant un feedback visuel d'attente.`,
+        },
+    },
+};
+IconOnly.parameters = {
+    docs: {
+        description: {
+            story: `Bouton avec icône seule, sans texte (isIconOnly). Format compact pour les espaces restreints. Cas d'usage : actions dans toolbars, boutons de modification/suppression dans tableaux, actions répétitives où l'icône suffit à la compréhension.`,
+        },
+    },
+};
 //# sourceMappingURL=spw-button.stories.js.map

package/dist/collection/stories/components/spw-button/spw-button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-button.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-button/spw-button.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-button';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Composants/Bouton',\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 bouton est un élément d’interaction avec l’interface permettant à l’utilisateur d’effectuer une action.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/9055b6-bouton)\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 = 'label';\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\nexport const Primary = Template.bind({});\nPrimary.args = {\n  variant: 'primary',\n  label: 'Primary Button',\n};\n\nexport const Secondary = Template.bind({});\nSecondary.args = {\n  variant: 'secondary',\n  label: 'Secondary Button',\n};\n\nexport const Tertiary = Template.bind({});\nTertiary.args = {\n  variant: 'tertiary',\n  label: 'Tertiary Button',\n};\n\nexport const WithIcon = Template.bind({});\nWithIcon.args = {\n  variant: 'primary',\n  label: 'Button with icon',\n  icon: 'fa-arrow-right',\n  iconPosition: 'right',\n};\n\nexport const WithLoader = Template.bind({});\nWithLoader.args = {\n  variant: 'primary',\n  label: 'Button with icon',\n  icon: 'fa-arrow-right',\n  iconPosition: 'right',\n  isLoading: true,\n};\n\nexport const IconOnly = Template.bind({});\nIconOnly.args = {\n  variant: 'primary',\n  isIconOnly: true,\n  icon: 'fa-arrow-right',\n  label: '',\n};\n"]}
+{"version":3,"file":"spw-button.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-button/spw-button.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-button';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Composants/Bouton',\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 Button est un élément d'interaction essentiel permettant à l'utilisateur d'effectuer des actions dans l'interface. Il offre plusieurs variantes visuelles et états pour s'adapter à tous les contextes d'utilisation.\n\n## Variantes disponibles\n\n- **primary** : Action principale, attire l'attention\n- **secondary** : Action secondaire, moins proéminente\n- **tertiary** : Action tertiaire, discrète\n\n## Fonctionnalités\n\n- Support des icônes FontAwesome (gauche, droite ou seule)\n- État de chargement avec loader intégré\n- Mode icône seule pour actions compactes\n- États disabled et hover\n- Tailles configurables (small, medium, large)\n- Attributs href et target pour comportement lien\n\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/9055b6-bouton)\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 = 'label';\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\nexport const Primary = Template.bind({});\nPrimary.args = {\n  variant: 'primary',\n  label: 'Primary Button',\n};\n\nexport const Secondary = Template.bind({});\nSecondary.args = {\n  variant: 'secondary',\n  label: 'Secondary Button',\n};\n\nexport const Tertiary = Template.bind({});\nTertiary.args = {\n  variant: 'tertiary',\n  label: 'Tertiary Button',\n};\n\nexport const WithIcon = Template.bind({});\nWithIcon.args = {\n  variant: 'primary',\n  label: 'Button with icon',\n  icon: 'fa-arrow-right',\n  iconPosition: 'right',\n};\n\nexport const WithLoader = Template.bind({});\nWithLoader.args = {\n  variant: 'primary',\n  label: 'Button with icon',\n  icon: 'fa-arrow-right',\n  iconPosition: 'right',\n  isLoading: true,\n};\n\nexport const IconOnly = Template.bind({});\nIconOnly.args = {\n  variant: 'primary',\n  isIconOnly: true,\n  icon: 'fa-arrow-right',\n  label: '',\n};\n\nPrimary.parameters = {\n  docs: {\n    description: {\n      story: `Bouton primary avec fond coloré. C'est le variant le plus proéminent, utilisé pour l'action principale d'une page ou d'un formulaire. Cas d'usage : soumettre un formulaire, confirmer une action importante, accéder à la fonctionnalité principale.`,\n    },\n  },\n};\n\nSecondary.parameters = {\n  docs: {\n    description: {\n      story: `Bouton secondary avec bordure. Moins proéminent que le primary, idéal pour les actions secondaires. Cas d'usage : annuler, actions alternatives dans un formulaire, boutons d'action dans les modales.`,\n    },\n  },\n};\n\nTertiary.parameters = {\n  docs: {\n    description: {\n      story: `Bouton tertiary discret, style texte simple. Pour les actions peu prioritaires ou inline dans le contenu. Cas d'usage : liens d'action dans du texte, actions optionnelles, navigation secondaire.`,\n    },\n  },\n};\n\nWithIcon.parameters = {\n  docs: {\n    description: {\n      story: `Bouton avec icône positionnée à droite (fa-arrow-right). L'icône renforce visuellement l'action et améliore la compréhension. Cas d'usage : navigation (\"Suivant\", \"Continuer\"), téléchargement, actions avec direction.`,\n    },\n  },\n};\n\nWithLoader.parameters = {\n  docs: {\n    description: {\n      story: `Bouton avec état de chargement (isLoading). Le loader remplace l'icône pendant le traitement. Cas d'usage : soumission de formulaire asynchrone, appels API, actions nécessitant un feedback visuel d'attente.`,\n    },\n  },\n};\n\nIconOnly.parameters = {\n  docs: {\n    description: {\n      story: `Bouton avec icône seule, sans texte (isIconOnly). Format compact pour les espaces restreints. Cas d'usage : actions dans toolbars, boutons de modification/suppression dans tableaux, actions répétitives où l'icône suffit à la compréhension.`,\n    },\n  },\n};\n"]}

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

@@ -21,7 +21,29 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Composant qui permet aux utilisateurs de sélectionner une ou plusieurs options.
+Le composant Checkbox permet aux utilisateurs de sélectionner une ou plusieurs options dans un formulaire. Il existe en deux variantes : case à cocher classique et toggle switch pour des options de type activation/désactivation.
+
+## Variantes disponibles
+
+- **checkbox** : Case à cocher standard (par défaut)
+- **toggle** : Interrupteur pour activer/désactiver une option
+
+## Fonctionnalités
+
+- Sélection multiple indépendante
+- États coché, non coché et indéterminé
+- Label associé cliquable
+- Groupement avec spw-group
+- États disabled et error
+- Support du clavier et accessibilité ARIA
+
+## Cas d'usage
+
+- Sélection de préférences multiples
+- Filtres dans recherches et listes
+- Activation de fonctionnalités optionnelles
+- Consentements et autorisations
+- Choix multiples dans formulaires
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/68897f-case-a-cocher-checkbox)
         `,
@@ -85,4 +107,18 @@ Toggle.args = {
     label: 'Mon label toggle',
     type: 'checkboxes',
 };
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Groupe de checkboxes standard permettant la sélection multiple. Chaque checkbox est indépendante et peut être cochée ou décochée séparément. Cas d'usage : sélection de préférences, acceptation de conditions, filtres multiples, choix d'options dans formulaires.`,
+        },
+    },
+};
+Toggle.parameters = {
+    docs: {
+        description: {
+            story: `Checkbox en mode toggle (interrupteur). Idéal pour activer ou désactiver une fonctionnalité de manière plus visuelle. Cas d'usage : activation de notifications, paramètres on/off, préférences de confidentialité, options de visibilité.`,
+        },
+    },
+};
 //# sourceMappingURL=spw-checkbox.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"spw-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-checkbox/spw-checkbox.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-group';\n\nconst subComponentTags = ['spw-checkbox'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Composants/Case à cocher (input checkbox)',\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\nComposant qui permet aux utilisateurs de sélectionner une ou plusieurs options.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/68897f-case-a-cocher-checkbox)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContent() {\n  return /* HTML */ `\n    <spw-checkbox name=\"checkbox\" value=\"1\">Checkbox 1</spw-checkbox>\n    <spw-checkbox name=\"checkbox\" value=\"2\">Checkbox 2</spw-checkbox>\n  `;\n}\n\nfunction htmlContentToggle() {\n  return /* HTML */ `<spw-checkbox error=\"false\" variant=\"toggle\" value=\"false\" name=\"mon-checkbox-toggle\" id=\"mon-checkbox-toggle\">Mon toggle</spw-checkbox> `;\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const hasSlot = true;\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  if (hasSlot) {\n    element.innerHTML = htmlContent();\n  }\n\n  return element;\n};\n\nconst ToggleTemplate: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const hasSlot = true;\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  if (hasSlot) {\n    element.innerHTML = htmlContentToggle();\n  }\n\n  return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  label: 'Mon label',\n  type: 'checkboxes',\n};\n\nexport const Toggle = ToggleTemplate.bind({});\nToggle.args = {\n  label: 'Mon label toggle',\n  type: 'checkboxes',\n};\n"]}
+{"version":3,"file":"spw-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-checkbox/spw-checkbox.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-group';\n\nconst subComponentTags = ['spw-checkbox'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Composants/Case à cocher (input checkbox)',\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 Checkbox permet aux utilisateurs de sélectionner une ou plusieurs options dans un formulaire. Il existe en deux variantes : case à cocher classique et toggle switch pour des options de type activation/désactivation.\n\n## Variantes disponibles\n\n- **checkbox** : Case à cocher standard (par défaut)\n- **toggle** : Interrupteur pour activer/désactiver une option\n\n## Fonctionnalités\n\n- Sélection multiple indépendante\n- États coché, non coché et indéterminé\n- Label associé cliquable\n- Groupement avec spw-group\n- États disabled et error\n- Support du clavier et accessibilité ARIA\n\n## Cas d'usage\n\n- Sélection de préférences multiples\n- Filtres dans recherches et listes\n- Activation de fonctionnalités optionnelles\n- Consentements et autorisations\n- Choix multiples dans formulaires\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/68897f-case-a-cocher-checkbox)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContent() {\n  return /* HTML */ `\n    <spw-checkbox name=\"checkbox\" value=\"1\">Checkbox 1</spw-checkbox>\n    <spw-checkbox name=\"checkbox\" value=\"2\">Checkbox 2</spw-checkbox>\n  `;\n}\n\nfunction htmlContentToggle() {\n  return /* HTML */ `<spw-checkbox error=\"false\" variant=\"toggle\" value=\"false\" name=\"mon-checkbox-toggle\" id=\"mon-checkbox-toggle\">Mon toggle</spw-checkbox> `;\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const hasSlot = true;\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  if (hasSlot) {\n    element.innerHTML = htmlContent();\n  }\n\n  return element;\n};\n\nconst ToggleTemplate: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const hasSlot = true;\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  if (hasSlot) {\n    element.innerHTML = htmlContentToggle();\n  }\n\n  return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  label: 'Mon label',\n  type: 'checkboxes',\n};\n\nexport const Toggle = ToggleTemplate.bind({});\nToggle.args = {\n  label: 'Mon label toggle',\n  type: 'checkboxes',\n};\n\nDefault.parameters = {\n  docs: {\n    description: {\n      story: `Groupe de checkboxes standard permettant la sélection multiple. Chaque checkbox est indépendante et peut être cochée ou décochée séparément. Cas d'usage : sélection de préférences, acceptation de conditions, filtres multiples, choix d'options dans formulaires.`,\n    },\n  },\n};\n\nToggle.parameters = {\n  docs: {\n    description: {\n      story: `Checkbox en mode toggle (interrupteur). Idéal pour activer ou désactiver une fonctionnalité de manière plus visuelle. Cas d'usage : activation de notifications, paramètres on/off, préférences de confidentialité, options de visibilité.`,\n    },\n  },\n};\n"]}

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

@@ -21,7 +21,24 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Permet aux utilisateurs de sélectionner une ou plusieurs options dans une liste personnalisée avec recherche, multi-sélection et gestion d’erreurs.
+Le composant Custom Select est une version avancée du select standard, offrant recherche intégrée, multi-sélection et messages de validation enrichis. Idéal pour les listes longues ou les sélections complexes.
+
+## Fonctionnalités
+
+- Sélection simple ou multiple
+- Messages d'état (erreur, succès, warning)
+- Label et placeholder personnalisables
+- Texte d'assistance avec icône
+- Liste d'options dynamiques via JSON
+- Événements personnalisés pour les changements
+
+## Cas d'usage
+
+- Sélection de tags ou catégories multiples
+- Formulaires avec listes longues nécessitant recherche
+- Filtres avancés avec multi-critères
+- Configuration de paramètres complexes
+- Sélection dans une liste étendue
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/7029dd-champ-de-selection-select)
         `,
@@ -105,4 +122,46 @@ AvecSucces.args = Object.assign(Object.assign({}, Default.args), { label: 'Champ
 // --- AVEC WARNING ---
 export const AvecWarning = Template.bind({});
 AvecWarning.args = Object.assign(Object.assign({}, Default.args), { label: 'Champ avec avertissement', warning: 'Cette option peut avoir des conséquences inattendues' });
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Custom Select par défaut avec sélection simple. Liste déroulante stylisée avec options définies via JSON. Cas d'usage : sélection dans listes moyennes, formulaires nécessitant un style cohérent, alternatives au select natif.`,
+        },
+    },
+};
+Multiple.parameters = {
+    docs: {
+        description: {
+            story: `Custom Select avec sélection multiple activée. Les options sélectionnées s'affichent comme tags sous le champ. Cas d'usage : sélection de tags, catégories multiples, destinataires multiples, filtres combinés.`,
+        },
+    },
+};
+AvecRecherche.parameters = {
+    docs: {
+        description: {
+            story: `Custom Select avec recherche intégrée. Filtrage en temps réel des options pendant la saisie. Cas d'usage : listes longues de villes ou pays, recherche de contacts, sélection dans catalogues étendus.`,
+        },
+    },
+};
+AvecErreur.parameters = {
+    docs: {
+        description: {
+            story: `Custom Select en état d'erreur avec message. Affichage visuel distinctif pour indiquer une validation échouée. Cas d'usage : validation de formulaire, indication d'erreur après soumission, champs requis non remplis.`,
+        },
+    },
+};
+AvecSucces.parameters = {
+    docs: {
+        description: {
+            story: `Custom Select avec message de succès. Confirmation visuelle d'une sélection valide ou enregistrée. Cas d'usage : feedback positif après validation, confirmation d'enregistrement, indication de sélection correcte.`,
+        },
+    },
+};
+AvecWarning.parameters = {
+    docs: {
+        description: {
+            story: `Custom Select avec avertissement. Message d'alerte pour signaler une situation particulière sans bloquer l'action. Cas d'usage : options avec conséquences importantes, choix nécessitant attention, informations complémentaires critiques.`,
+        },
+    },
+};
 //# sourceMappingURL=spw-custom-select.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"spw-custom-select.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-custom-select/spw-custom-select.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';\nimport { action } from '@storybook/addon-actions';\n\nconst elementTag = 'spw-custom-select';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Composants/Champ de sélection personnalisé (Custom Select)',\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\nPermet aux utilisateurs de sélectionner une ou plusieurs options dans une liste personnalisée avec recherche, multi-sélection et gestion d’erreurs.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/7029dd-champ-de-selection-select)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\n/* -------------------------------------------------------------------------------------------------\n * TEMPLATE STORY\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  // Application des props du story aux attributs du composant\n  Object.entries(args).forEach(([key, val]) => {\n    if (val === undefined || val === null) return;\n\n    if (key === 'items' && Array.isArray(val)) {\n      // Les arrays doivent être passés en JSON\n      element.setAttribute('items', JSON.stringify(val));\n    } else if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), String(val));\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  // Ajout de l’action Storybook pour suivre les changements de valeur\n  element.addEventListener('valueChanged', (event: CustomEvent) => {\n    action('valueChanged')(event.detail);\n  });\n\n  return element;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * STORIES\n * ------------------------------------------------------------------------------------------------- */\n\n// --- STORY PAR DÉFAUT ---\nexport const Default = Template.bind({});\nDefault.args = {\n  label: 'Sélection simple',\n  name: 'custom-select',\n  placeholder: 'Choisissez une option',\n  hint: 'Ceci est un texte d’aide',\n  showHintIcon: false,\n  size: 'medium',\n  required: false,\n  isSearch: false,\n  multiple: false,\n  items: [\n    { label: 'Option 1', value: '1' },\n    { label: 'Option 2', value: '2' },\n    { label: 'Option 3', value: '3' },\n  ],\n};\n\n// --- MULTI-SÉLECTION ---\nexport const Multiple = Template.bind({});\nMultiple.args = {\n  ...Default.args,\n  label: 'Sélection multiple',\n  multiple: true,\n  placeholder: 'Sélectionnez une ou plusieurs options',\n  items: [\n    { label: 'Pomme', value: 'apple' },\n    { label: 'Banane', value: 'banana' },\n    { label: 'Cerise', value: 'cherry' },\n    { label: 'Mangue', value: 'mango' },\n  ],\n};\n\n// --- AVEC RECHERCHE ---\nexport const AvecRecherche = Template.bind({});\nAvecRecherche.args = {\n  ...Default.args,\n  label: 'Sélection avec recherche',\n  isSearch: true,\n  placeholder: 'Rechercher une option...',\n  items: [\n    { label: 'Paris', value: 'paris' },\n    { label: 'Londres', value: 'london' },\n    { label: 'Berlin', value: 'berlin' },\n    { label: 'Madrid', value: 'madrid' },\n    { label: 'Rome', value: 'rome' },\n  ],\n};\n\n// --- AVEC ERREUR ---\nexport const AvecErreur = Template.bind({});\nAvecErreur.args = {\n  ...Default.args,\n  label: 'Champ avec erreur',\n  error: 'Veuillez sélectionner une option valide',\n};\n\n// --- AVEC MESSAGE DE SUCCÈS ---\nexport const AvecSucces = Template.bind({});\nAvecSucces.args = {\n  ...Default.args,\n  label: 'Champ avec succès',\n  success: 'Sélection enregistrée avec succès !',\n};\n\n// --- AVEC WARNING ---\nexport const AvecWarning = Template.bind({});\nAvecWarning.args = {\n  ...Default.args,\n  label: 'Champ avec avertissement',\n  warning: 'Cette option peut avoir des conséquences inattendues',\n};\n"]}
+{"version":3,"file":"spw-custom-select.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-custom-select/spw-custom-select.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,WAAW,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,MAAM,UAAU,GAAG,mBAAmB,CAAC;AAEvC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,4DAA4D;IACnE,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;SAuBV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB;;uGAEuG;AACvG,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,4DAA4D;IAC5D,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,IAAI;YAAE,OAAO;QAE9C,IAAI,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;YAC1C,yCAAyC;YACzC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;QACrD,CAAC;aAAM,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YACrC,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;QACtD,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,oEAAoE;IACpE,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,KAAkB,EAAE,EAAE;QAC9D,MAAM,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF;;uGAEuG;AAEvG,2BAA2B;AAC3B,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,eAAe;IACrB,WAAW,EAAE,uBAAuB;IACpC,IAAI,EAAE,0BAA0B;IAChC,YAAY,EAAE,KAAK;IACnB,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE;QACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;QACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;QACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;KAClC;CACF,CAAC;AAEF,0BAA0B;AAC1B,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,mCACR,OAAO,CAAC,IAAI,KACf,KAAK,EAAE,oBAAoB,EAC3B,QAAQ,EAAE,IAAI,EACd,WAAW,EAAE,uCAAuC,EACpD,KAAK,EAAE;QACL,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACpC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACpC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE;KACpC,GACF,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,mCACb,OAAO,CAAC,IAAI,KACf,KAAK,EAAE,0BAA0B,EACjC,QAAQ,EAAE,IAAI,EACd,WAAW,EAAE,0BAA0B,EACvC,KAAK,EAAE;QACL,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;QACrC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACpC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACpC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;KACjC,GACF,CAAC;AAEF,sBAAsB;AACtB,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,mCACV,OAAO,CAAC,IAAI,KACf,KAAK,EAAE,mBAAmB,EAC1B,KAAK,EAAE,yCAAyC,GACjD,CAAC;AAEF,iCAAiC;AACjC,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,mCACV,OAAO,CAAC,IAAI,KACf,KAAK,EAAE,mBAAmB,EAC1B,OAAO,EAAE,qCAAqC,GAC/C,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,mCACX,OAAO,CAAC,IAAI,KACf,KAAK,EAAE,0BAA0B,EACjC,OAAO,EAAE,sDAAsD,GAChE,CAAC;AAEF,OAAO,CAAC,UAAU,GAAG;IACnB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,kOAAkO;SAC1O;KACF;CACF,CAAC;AAEF,QAAQ,CAAC,UAAU,GAAG;IACpB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,kNAAkN;SAC1N;KACF;CACF,CAAC;AAEF,aAAa,CAAC,UAAU,GAAG;IACzB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,wMAAwM;SAChN;KACF;CACF,CAAC;AAEF,UAAU,CAAC,UAAU,GAAG;IACtB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,yNAAyN;SACjO;KACF;CACF,CAAC;AAEF,UAAU,CAAC,UAAU,GAAG;IACtB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,sNAAsN;SAC9N;KACF;CACF,CAAC;AAEF,WAAW,CAAC,UAAU,GAAG;IACvB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,8OAA8O;SACtP;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, toKebabCase } from '@utils/utils';\nimport { action } from '@storybook/addon-actions';\n\nconst elementTag = 'spw-custom-select';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Composants/Champ de sélection personnalisé (Custom Select)',\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 Custom Select est une version avancée du select standard, offrant recherche intégrée, multi-sélection et messages de validation enrichis. Idéal pour les listes longues ou les sélections complexes.\n\n## Fonctionnalités\n\n- Sélection simple ou multiple\n- Messages d'état (erreur, succès, warning)\n- Label et placeholder personnalisables\n- Texte d'assistance avec icône\n- Liste d'options dynamiques via JSON\n- Événements personnalisés pour les changements\n\n## Cas d'usage\n\n- Sélection de tags ou catégories multiples\n- Formulaires avec listes longues nécessitant recherche\n- Filtres avancés avec multi-critères\n- Configuration de paramètres complexes\n- Sélection dans une liste étendue\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/7029dd-champ-de-selection-select)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\n/* -------------------------------------------------------------------------------------------------\n * TEMPLATE STORY\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  // Application des props du story aux attributs du composant\n  Object.entries(args).forEach(([key, val]) => {\n    if (val === undefined || val === null) return;\n\n    if (key === 'items' && Array.isArray(val)) {\n      // Les arrays doivent être passés en JSON\n      element.setAttribute('items', JSON.stringify(val));\n    } else if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), String(val));\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  // Ajout de l’action Storybook pour suivre les changements de valeur\n  element.addEventListener('valueChanged', (event: CustomEvent) => {\n    action('valueChanged')(event.detail);\n  });\n\n  return element;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * STORIES\n * ------------------------------------------------------------------------------------------------- */\n\n// --- STORY PAR DÉFAUT ---\nexport const Default = Template.bind({});\nDefault.args = {\n  label: 'Sélection simple',\n  name: 'custom-select',\n  placeholder: 'Choisissez une option',\n  hint: 'Ceci est un texte d’aide',\n  showHintIcon: false,\n  size: 'medium',\n  required: false,\n  isSearch: false,\n  multiple: false,\n  items: [\n    { label: 'Option 1', value: '1' },\n    { label: 'Option 2', value: '2' },\n    { label: 'Option 3', value: '3' },\n  ],\n};\n\n// --- MULTI-SÉLECTION ---\nexport const Multiple = Template.bind({});\nMultiple.args = {\n  ...Default.args,\n  label: 'Sélection multiple',\n  multiple: true,\n  placeholder: 'Sélectionnez une ou plusieurs options',\n  items: [\n    { label: 'Pomme', value: 'apple' },\n    { label: 'Banane', value: 'banana' },\n    { label: 'Cerise', value: 'cherry' },\n    { label: 'Mangue', value: 'mango' },\n  ],\n};\n\n// --- AVEC RECHERCHE ---\nexport const AvecRecherche = Template.bind({});\nAvecRecherche.args = {\n  ...Default.args,\n  label: 'Sélection avec recherche',\n  isSearch: true,\n  placeholder: 'Rechercher une option...',\n  items: [\n    { label: 'Paris', value: 'paris' },\n    { label: 'Londres', value: 'london' },\n    { label: 'Berlin', value: 'berlin' },\n    { label: 'Madrid', value: 'madrid' },\n    { label: 'Rome', value: 'rome' },\n  ],\n};\n\n// --- AVEC ERREUR ---\nexport const AvecErreur = Template.bind({});\nAvecErreur.args = {\n  ...Default.args,\n  label: 'Champ avec erreur',\n  error: 'Veuillez sélectionner une option valide',\n};\n\n// --- AVEC MESSAGE DE SUCCÈS ---\nexport const AvecSucces = Template.bind({});\nAvecSucces.args = {\n  ...Default.args,\n  label: 'Champ avec succès',\n  success: 'Sélection enregistrée avec succès !',\n};\n\n// --- AVEC WARNING ---\nexport const AvecWarning = Template.bind({});\nAvecWarning.args = {\n  ...Default.args,\n  label: 'Champ avec avertissement',\n  warning: 'Cette option peut avoir des conséquences inattendues',\n};\n\nDefault.parameters = {\n  docs: {\n    description: {\n      story: `Custom Select par défaut avec sélection simple. Liste déroulante stylisée avec options définies via JSON. Cas d'usage : sélection dans listes moyennes, formulaires nécessitant un style cohérent, alternatives au select natif.`,\n    },\n  },\n};\n\nMultiple.parameters = {\n  docs: {\n    description: {\n      story: `Custom Select avec sélection multiple activée. Les options sélectionnées s'affichent comme tags sous le champ. Cas d'usage : sélection de tags, catégories multiples, destinataires multiples, filtres combinés.`,\n    },\n  },\n};\n\nAvecRecherche.parameters = {\n  docs: {\n    description: {\n      story: `Custom Select avec recherche intégrée. Filtrage en temps réel des options pendant la saisie. Cas d'usage : listes longues de villes ou pays, recherche de contacts, sélection dans catalogues étendus.`,\n    },\n  },\n};\n\nAvecErreur.parameters = {\n  docs: {\n    description: {\n      story: `Custom Select en état d'erreur avec message. Affichage visuel distinctif pour indiquer une validation échouée. Cas d'usage : validation de formulaire, indication d'erreur après soumission, champs requis non remplis.`,\n    },\n  },\n};\n\nAvecSucces.parameters = {\n  docs: {\n    description: {\n      story: `Custom Select avec message de succès. Confirmation visuelle d'une sélection valide ou enregistrée. Cas d'usage : feedback positif après validation, confirmation d'enregistrement, indication de sélection correcte.`,\n    },\n  },\n};\n\nAvecWarning.parameters = {\n  docs: {\n    description: {\n      story: `Custom Select avec avertissement. Message d'alerte pour signaler une situation particulière sans bloquer l'action. Cas d'usage : options avec conséquences importantes, choix nécessitant attention, informations complémentaires critiques.`,\n    },\n  },\n};\n"]}

package/dist/collection/stories/components/spw-date-picker/spw-date-picker.stories.js

@@ -20,7 +20,24 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Composant de sélection de date avec options simples et avancées, incluant gestion de plages.
+Le composant Date Picker permet aux utilisateurs de sélectionner une date via un calendrier interactif ou une saisie manuelle. Il supporte les sélections simples, les dates avec contraintes et les plages de dates.
+
+## Fonctionnalités
+
+- Calendrier interactif pour sélection visuelle
+- Saisie manuelle de date au format JJ/MM/AAAA
+- Contraintes de dates min et max
+- Mode plage pour sélectionner début et fin
+- Synchronisation automatique des plages
+- État désactivé
+
+## Cas d'usage
+
+- Sélection de date de naissance
+- Réservations et planifications
+- Filtres de dates dans recherches
+- Plages de dates pour rapports
+- Formulaires de demandes avec dates
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/314e53-choix-de-date-date-picker)
         `,
@@ -117,4 +134,46 @@ DateRangeWithValues.args = {
     endPlaceholder: 'Choisissez une date de fin',
     endValue: '2025-06-15',
 };
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Date Picker par défaut avec label et placeholder. Calendrier interactif et saisie manuelle possibles. Cas d'usage : date de naissance, formulaires de demande, sélection de date simple.`,
+        },
+    },
+};
+WithValue.parameters = {
+    docs: {
+        description: {
+            story: `Date Picker avec valeur pré-remplie. Date initiale définie pour modification ou affichage. Cas d'usage : édition de formulaires existants, dates par défaut, affichage de dates enregistrées.`,
+        },
+    },
+};
+WithConstraints.parameters = {
+    docs: {
+        description: {
+            story: `Date Picker avec contraintes de dates min et max. Limite les dates sélectionnables à une plage définie. Cas d'usage : réservations futures, dates limitées à une année, périodes de validité.`,
+        },
+    },
+};
+Disabled.parameters = {
+    docs: {
+        description: {
+            story: `Date Picker en état désactivé. Champ non modifiable pour affichage uniquement. Cas d'usage : dates fixes non modifiables, affichage de dates historiques, champs en lecture seule.`,
+        },
+    },
+};
+DateRange.parameters = {
+    docs: {
+        description: {
+            story: `Date Picker en mode plage avec deux champs synchronisés. Sélection de date de début et de fin liées. Cas d'usage : réservations avec durée, filtres de périodes, rapports sur plages temporelles, séjours ou locations.`,
+        },
+    },
+};
+DateRangeWithValues.parameters = {
+    docs: {
+        description: {
+            story: `Date Picker en mode plage avec valeurs pré-remplies. Plage de dates existante affichée et modifiable. Cas d'usage : édition de réservations, modification de filtres existants, affichage de périodes enregistrées.`,
+        },
+    },
+};
 //# sourceMappingURL=spw-date-picker.stories.js.map

package/dist/collection/stories/components/spw-date-picker/spw-date-picker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-date-picker.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-date-picker/spw-date-picker.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-date-picker';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Composants/Choix de date (date picker)',\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\nComposant de sélection de date avec options simples et avancées, incluant gestion de plages.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/314e53-choix-de-date-date-picker)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\n// Stories template\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\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  return element;\n};\n\n// Default\nexport const Default = Template.bind({});\nDefault.args = {\n  label: 'Date de naissance',\n  placeholder: 'JJ/MM/AAAA',\n};\n\n// WithValue\nexport const WithValue = Template.bind({});\nWithValue.args = {\n  label: 'Date avec valeur',\n  value: '2025-06-30',\n  placeholder: 'JJ/MM/AAAA',\n};\n\n// WithConstraints\nexport const WithConstraints = Template.bind({});\nWithConstraints.args = {\n  label: 'Date limitée',\n  placeholder: 'JJ/MM/AAAA',\n  min: '2025-01-01',\n  max: '2025-12-31',\n};\n\n// Disabled\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  label: 'Date désactivée',\n  placeholder: 'Non disponible',\n  disabled: true,\n};\n\n// Range template (nécessite deux datepickers)\nconst RangeTemplate: StoryFn = args => {\n  const container = document.createElement('div');\n\n  // Créer le datepicker de début\n  const startPicker = document.createElement(elementTag);\n  startPicker.setAttribute('range', 'true');\n  startPicker.setAttribute('range-id', args.rangeId || '1');\n  startPicker.setAttribute('is-start', 'true');\n  startPicker.setAttribute('label', args.startLabel || 'Date de début');\n  startPicker.setAttribute('placeholder', args.startPlaceholder || 'Choisissez une date de début');\n  if (args.startValue) startPicker.setAttribute('value', args.startValue);\n  startPicker.classList.add('mb-3');\n\n  // Créer le datepicker de fin\n  const endPicker = document.createElement(elementTag);\n  endPicker.setAttribute('range', 'true');\n  endPicker.setAttribute('range-id', args.rangeId || '1');\n  endPicker.setAttribute('label', args.endLabel || 'Date de fin');\n  endPicker.setAttribute('placeholder', args.endPlaceholder || 'Choisissez une date de fin');\n  if (args.endValue) endPicker.setAttribute('value', args.endValue);\n\n  container.appendChild(startPicker);\n  container.appendChild(endPicker);\n\n  return container;\n};\n\n// DateRange\nexport const DateRange = RangeTemplate.bind({});\nDateRange.args = {\n  rangeId: 'range-story-1',\n  startLabel: 'Date de début',\n  startPlaceholder: 'Choisissez une date de début',\n  endLabel: 'Date de fin',\n  endPlaceholder: 'Choisissez une date de fin',\n};\n\n// DateRangeWithValues\nexport const DateRangeWithValues = RangeTemplate.bind({});\nDateRangeWithValues.args = {\n  rangeId: 'range-story-2',\n  startLabel: 'Date de début',\n  startPlaceholder: 'Choisissez une date de début',\n  startValue: '2025-06-01',\n  endLabel: 'Date de fin',\n  endPlaceholder: 'Choisissez une date de fin',\n  endValue: '2025-06-15',\n};\n"]}
+{"version":3,"file":"spw-date-picker.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-date-picker/spw-date-picker.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-date-picker';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Composants/Choix de date (date picker)',\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 Date Picker permet aux utilisateurs de sélectionner une date via un calendrier interactif ou une saisie manuelle. Il supporte les sélections simples, les dates avec contraintes et les plages de dates.\n\n## Fonctionnalités\n\n- Calendrier interactif pour sélection visuelle\n- Saisie manuelle de date au format JJ/MM/AAAA\n- Contraintes de dates min et max\n- Mode plage pour sélectionner début et fin\n- Synchronisation automatique des plages\n- État désactivé\n\n## Cas d'usage\n\n- Sélection de date de naissance\n- Réservations et planifications\n- Filtres de dates dans recherches\n- Plages de dates pour rapports\n- Formulaires de demandes avec dates\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/314e53-choix-de-date-date-picker)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\n// Stories template\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\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  return element;\n};\n\n// Default\nexport const Default = Template.bind({});\nDefault.args = {\n  label: 'Date de naissance',\n  placeholder: 'JJ/MM/AAAA',\n};\n\n// WithValue\nexport const WithValue = Template.bind({});\nWithValue.args = {\n  label: 'Date avec valeur',\n  value: '2025-06-30',\n  placeholder: 'JJ/MM/AAAA',\n};\n\n// WithConstraints\nexport const WithConstraints = Template.bind({});\nWithConstraints.args = {\n  label: 'Date limitée',\n  placeholder: 'JJ/MM/AAAA',\n  min: '2025-01-01',\n  max: '2025-12-31',\n};\n\n// Disabled\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  label: 'Date désactivée',\n  placeholder: 'Non disponible',\n  disabled: true,\n};\n\n// Range template (nécessite deux datepickers)\nconst RangeTemplate: StoryFn = args => {\n  const container = document.createElement('div');\n\n  // Créer le datepicker de début\n  const startPicker = document.createElement(elementTag);\n  startPicker.setAttribute('range', 'true');\n  startPicker.setAttribute('range-id', args.rangeId || '1');\n  startPicker.setAttribute('is-start', 'true');\n  startPicker.setAttribute('label', args.startLabel || 'Date de début');\n  startPicker.setAttribute('placeholder', args.startPlaceholder || 'Choisissez une date de début');\n  if (args.startValue) startPicker.setAttribute('value', args.startValue);\n  startPicker.classList.add('mb-3');\n\n  // Créer le datepicker de fin\n  const endPicker = document.createElement(elementTag);\n  endPicker.setAttribute('range', 'true');\n  endPicker.setAttribute('range-id', args.rangeId || '1');\n  endPicker.setAttribute('label', args.endLabel || 'Date de fin');\n  endPicker.setAttribute('placeholder', args.endPlaceholder || 'Choisissez une date de fin');\n  if (args.endValue) endPicker.setAttribute('value', args.endValue);\n\n  container.appendChild(startPicker);\n  container.appendChild(endPicker);\n\n  return container;\n};\n\n// DateRange\nexport const DateRange = RangeTemplate.bind({});\nDateRange.args = {\n  rangeId: 'range-story-1',\n  startLabel: 'Date de début',\n  startPlaceholder: 'Choisissez une date de début',\n  endLabel: 'Date de fin',\n  endPlaceholder: 'Choisissez une date de fin',\n};\n\n// DateRangeWithValues\nexport const DateRangeWithValues = RangeTemplate.bind({});\nDateRangeWithValues.args = {\n  rangeId: 'range-story-2',\n  startLabel: 'Date de début',\n  startPlaceholder: 'Choisissez une date de début',\n  startValue: '2025-06-01',\n  endLabel: 'Date de fin',\n  endPlaceholder: 'Choisissez une date de fin',\n  endValue: '2025-06-15',\n};\n\nDefault.parameters = {\n  docs: {\n    description: {\n      story: `Date Picker par défaut avec label et placeholder. Calendrier interactif et saisie manuelle possibles. Cas d'usage : date de naissance, formulaires de demande, sélection de date simple.`,\n    },\n  },\n};\n\nWithValue.parameters = {\n  docs: {\n    description: {\n      story: `Date Picker avec valeur pré-remplie. Date initiale définie pour modification ou affichage. Cas d'usage : édition de formulaires existants, dates par défaut, affichage de dates enregistrées.`,\n    },\n  },\n};\n\nWithConstraints.parameters = {\n  docs: {\n    description: {\n      story: `Date Picker avec contraintes de dates min et max. Limite les dates sélectionnables à une plage définie. Cas d'usage : réservations futures, dates limitées à une année, périodes de validité.`,\n    },\n  },\n};\n\nDisabled.parameters = {\n  docs: {\n    description: {\n      story: `Date Picker en état désactivé. Champ non modifiable pour affichage uniquement. Cas d'usage : dates fixes non modifiables, affichage de dates historiques, champs en lecture seule.`,\n    },\n  },\n};\n\nDateRange.parameters = {\n  docs: {\n    description: {\n      story: `Date Picker en mode plage avec deux champs synchronisés. Sélection de date de début et de fin liées. Cas d'usage : réservations avec durée, filtres de périodes, rapports sur plages temporelles, séjours ou locations.`,\n    },\n  },\n};\n\nDateRangeWithValues.parameters = {\n  docs: {\n    description: {\n      story: `Date Picker en mode plage avec valeurs pré-remplies. Plage de dates existante affichée et modifiable. Cas d'usage : édition de réservations, modification de filtres existants, affichage de périodes enregistrées.`,\n    },\n  },\n};\n"]}

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

@@ -20,7 +20,25 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Affiche une liste d'options qui se déploie lorsque l'utilisateur interagit avec un élément déclencheur.
+Le composant Dropdown affiche une liste d'actions ou d'options qui se déploie au clic sur un élément déclencheur. Il offre un moyen compact d'organiser plusieurs actions contextuelles.
+
+## Fonctionnalités
+
+- Déclencheur personnalisable (bouton, icône, texte)
+- Contenu flexible via slot
+- Fermeture au clic extérieur
+- Positionnement automatique
+- Support de contenu complexe (boutons, liens, séparateurs)
+- Compatible avec spw-group pour organisation verticale
+
+## Cas d'usage
+
+- Menus d'actions contextuelles (modifier, supprimer, partager)
+- Menus utilisateur avec profil et déconnexion
+- Options supplémentaires dans cartes ou tableaux
+- Actions groupées dans toolbars
+- Menus de navigation compacts
+- Filtres et tris dans listes
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/135010-menu-deroulant-dropdown-menu)
         `,

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

@@ -1 +1 @@
-{"version":3,"file":"spw-dropdown.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-dropdown/spw-dropdown.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,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sCAAsC;IAC7C,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;IACzB,OAAO,UAAU,CAAC;;;;;;;;;;GAUjB,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,EAAE,CAAC;IAEzC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG,EAAE,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, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-dropdown';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Composants/Menu déroulant (dropdown)',\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 une liste d'options qui se déploie lorsque l'utilisateur interagit avec un élément déclencheur.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/135010-menu-deroulant-dropdown-menu)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContentDefault() {\n  return /* HTML */ `\n    <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n      <div slot=\"dropdownContent\">\n        <spw-group orientation=\"vertical\" is-full-width>\n          <spw-button is-full-width variant=\"secondary\" size=\"small\">Action 1</spw-button>\n          <spw-button is-full-width variant=\"secondary\" size=\"small\">Action 2</spw-button>\n          <spw-button is-full-width variant=\"primary\" size=\"small\">Validation</spw-button>\n        </spw-group>\n      </div>\n    </spw-button>\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();\n\n  return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {};\n"]}
+{"version":3,"file":"spw-dropdown.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-dropdown/spw-dropdown.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,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;SAwBV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,kBAAkB;IACzB,OAAO,UAAU,CAAC;;;;;;;;;;GAUjB,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,EAAE,CAAC;IAEzC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG,EAAE,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, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-dropdown';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Composants/Menu déroulant (dropdown)',\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 Dropdown affiche une liste d'actions ou d'options qui se déploie au clic sur un élément déclencheur. Il offre un moyen compact d'organiser plusieurs actions contextuelles.\n\n## Fonctionnalités\n\n- Déclencheur personnalisable (bouton, icône, texte)\n- Contenu flexible via slot\n- Fermeture au clic extérieur\n- Positionnement automatique\n- Support de contenu complexe (boutons, liens, séparateurs)\n- Compatible avec spw-group pour organisation verticale\n\n## Cas d'usage\n\n- Menus d'actions contextuelles (modifier, supprimer, partager)\n- Menus utilisateur avec profil et déconnexion\n- Options supplémentaires dans cartes ou tableaux\n- Actions groupées dans toolbars\n- Menus de navigation compacts\n- Filtres et tris dans listes\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/135010-menu-deroulant-dropdown-menu)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContentDefault() {\n  return /* HTML */ `\n    <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n      <div slot=\"dropdownContent\">\n        <spw-group orientation=\"vertical\" is-full-width>\n          <spw-button is-full-width variant=\"secondary\" size=\"small\">Action 1</spw-button>\n          <spw-button is-full-width variant=\"secondary\" size=\"small\">Action 2</spw-button>\n          <spw-button is-full-width variant=\"primary\" size=\"small\">Validation</spw-button>\n        </spw-group>\n      </div>\n    </spw-button>\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();\n\n  return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {};\n"]}

package/dist/collection/stories/components/spw-field-message/spw-field-message.stories.js

@@ -20,7 +20,30 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Conseil ou info supplémentaire pour guider l’utilisateur.
+Le composant Field Message affiche des messages d'aide, d'erreur, de succès ou d'avertissement associés aux champs de formulaire. Il guide l'utilisateur et fournit un feedback visuel sur la validation.
+
+## Variantes disponibles
+
+- **hint** : Message d'aide neutre (par défaut)
+- **error** : Message d'erreur en rouge
+- **success** : Message de succès en vert
+- **warning** : Message d'avertissement en orange
+
+## Fonctionnalités
+
+- Icônes contextuelles selon le type
+- Couleurs distinctives par variante
+- Intégration dans les champs de formulaire
+- Texte personnalisable
+
+## Cas d'usage
+
+- Texte d'aide sous les champs de formulaire
+- Messages d'erreur de validation
+- Confirmation de saisie correcte
+- Avertissements sur des contraintes
+- Instructions de remplissage
+- Feedback utilisateur en temps réel
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/99862d-indice-de-champ-hint)
         `,
@@ -71,4 +94,32 @@ Warning.args = {
     label: 'Mon texte',
     variant: 'warning',
 };
+Hint.parameters = {
+    docs: {
+        description: {
+            story: `Message d'aide neutre sous un champ de formulaire. Fournit des instructions ou conseils pour aider la saisie. Cas d'usage : format attendu, exemples de saisie, informations complémentaires sur le champ.`,
+        },
+    },
+};
+Error.parameters = {
+    docs: {
+        description: {
+            story: `Message d'erreur affiché en rouge avec icône. Indique un problème de validation ou une saisie incorrecte. Cas d'usage : erreurs de validation, format invalide, champs obligatoires manquants.`,
+        },
+    },
+};
+Success.parameters = {
+    docs: {
+        description: {
+            story: `Message de succès affiché en vert avec icône. Confirme une saisie valide ou une action réussie. Cas d'usage : validation réussie, confirmation d'enregistrement, saisie correcte.`,
+        },
+    },
+};
+Warning.parameters = {
+    docs: {
+        description: {
+            story: `Message d'avertissement affiché en orange avec icône. Alerte sur une situation particulière sans bloquer. Cas d'usage : contraintes importantes, informations critiques, précautions à prendre.`,
+        },
+    },
+};
 //# sourceMappingURL=spw-field-message.stories.js.map

package/dist/collection/stories/components/spw-field-message/spw-field-message.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-field-message.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-field-message/spw-field-message.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,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,mBAAmB,CAAC;AAEvC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,mCAAmC;IAC1C,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,CAAC,IAAI;IACvB,OAAO,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,IAAI,CAAC;IACrB,MAAM,YAAY,GAAG,OAAO,CAAC;IAE7B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,KAAK,YAAY,EAAE,CAAC;gBACzB,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;YACxD,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,IAAI,CAAC,IAAI,GAAG;IACV,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,MAAM;CAChB,CAAC;AACF,KAAK,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,OAAO;CACjB,CAAC;AACF,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,SAAS;CACnB,CAAC;AACF,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,SAAS;CACnB,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, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-field-message';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Composants/Indice de champ (hint)',\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\nConseil ou info supplémentaire pour guider l’utilisateur.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/99862d-indice-de-champ-hint)\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 = 'label';\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\nexport const Hint = Template.bind({});\nexport const Error = Template.bind({});\nexport const Success = Template.bind({});\nexport const Warning = Template.bind({});\nHint.args = {\n  label: 'Mon texte',\n  variant: 'hint',\n};\nError.args = {\n  label: 'Mon texte',\n  variant: 'error',\n};\nSuccess.args = {\n  label: 'Mon texte',\n  variant: 'success',\n};\nWarning.args = {\n  label: 'Mon texte',\n  variant: 'warning',\n};\n"]}
+{"version":3,"file":"spw-field-message.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-field-message/spw-field-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-field-message';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Composants/Indice de champ (hint)',\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 Field Message affiche des messages d'aide, d'erreur, de succès ou d'avertissement associés aux champs de formulaire. Il guide l'utilisateur et fournit un feedback visuel sur la validation.\n\n## Variantes disponibles\n\n- **hint** : Message d'aide neutre (par défaut)\n- **error** : Message d'erreur en rouge\n- **success** : Message de succès en vert\n- **warning** : Message d'avertissement en orange\n\n## Fonctionnalités\n\n- Icônes contextuelles selon le type\n- Couleurs distinctives par variante\n- Intégration dans les champs de formulaire\n- Texte personnalisable\n\n## Cas d'usage\n\n- Texte d'aide sous les champs de formulaire\n- Messages d'erreur de validation\n- Confirmation de saisie correcte\n- Avertissements sur des contraintes\n- Instructions de remplissage\n- Feedback utilisateur en temps réel\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/99862d-indice-de-champ-hint)\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 = 'label';\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\nexport const Hint = Template.bind({});\nexport const Error = Template.bind({});\nexport const Success = Template.bind({});\nexport const Warning = Template.bind({});\nHint.args = {\n  label: 'Mon texte',\n  variant: 'hint',\n};\nError.args = {\n  label: 'Mon texte',\n  variant: 'error',\n};\nSuccess.args = {\n  label: 'Mon texte',\n  variant: 'success',\n};\nWarning.args = {\n  label: 'Mon texte',\n  variant: 'warning',\n};\n\nHint.parameters = {\n  docs: {\n    description: {\n      story: `Message d'aide neutre sous un champ de formulaire. Fournit des instructions ou conseils pour aider la saisie. Cas d'usage : format attendu, exemples de saisie, informations complémentaires sur le champ.`,\n    },\n  },\n};\n\nError.parameters = {\n  docs: {\n    description: {\n      story: `Message d'erreur affiché en rouge avec icône. Indique un problème de validation ou une saisie incorrecte. Cas d'usage : erreurs de validation, format invalide, champs obligatoires manquants.`,\n    },\n  },\n};\n\nSuccess.parameters = {\n  docs: {\n    description: {\n      story: `Message de succès affiché en vert avec icône. Confirme une saisie valide ou une action réussie. Cas d'usage : validation réussie, confirmation d'enregistrement, saisie correcte.`,\n    },\n  },\n};\n\nWarning.parameters = {\n  docs: {\n    description: {\n      story: `Message d'avertissement affiché en orange avec icône. Alerte sur une situation particulière sans bloquer. Cas d'usage : contraintes importantes, informations critiques, précautions à prendre.`,\n    },\n  },\n};\n"]}

package/dist/collection/stories/components/spw-file-upload/spw-file-upload.stories.js

@@ -20,7 +20,26 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Sélectionner et télécharger des fichiers depuis vers une application web.
+Le composant File Upload permet aux utilisateurs de sélectionner et télécharger un ou plusieurs fichiers vers l'application. Il intègre validation de type, taille et nombre de fichiers avec feedback visuel.
+
+## Fonctionnalités
+
+- Sélection de fichiers unique ou multiple
+- Drag and drop pour déposer des fichiers
+- Validation des types de fichiers acceptés
+- Limitation de taille par fichier (Mo)
+- Limitation du nombre de fichiers
+- Aperçu des fichiers sélectionnés
+- Suppression individuelle des fichiers
+- Messages d'erreur détaillés
+
+## Cas d'usage
+
+- Upload de documents
+- Envoi de photos ou images
+- Ajout de pièces jointes dans formulaires
+- Import de fichiers de données (CSV, Excel)
+- Téléchargement de fichiers multiples
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/934c31-envoi-de-fichiers-upload)
         `,