@spw-ds/spw-stencil-library 1.14.2 → 1.15.0

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

@@ -67,12 +67,14 @@ const Template = args => {
     return element;
 };
 export const Primary = Template.bind({});
+Primary.storyName = 'Lien standard';
 Primary.args = {
     content: 'Mon super lien',
     href: 'http://google.com',
     target: '_blank',
 };
 export const WithIcon = Template.bind({});
+WithIcon.storyName = 'Lien avec icône';
 WithIcon.args = {
     content: 'Mon super lien avec icône',
     href: 'http://google.com',
@@ -94,3 +96,65 @@ WithIcon.parameters = {
         },
     },
 };
+export const WithIconLeft = Template.bind({});
+WithIconLeft.storyName = 'Lien avec icône à gauche';
+WithIconLeft.args = {
+    content: 'Retour à la liste',
+    href: '#',
+    icon: 'fa-arrow-left',
+    iconPosition: 'left',
+};
+WithIconLeft.parameters = {
+    docs: {
+        description: {
+            story: `Lien avec icône positionnée à gauche du texte. Cas d'usage : bouton retour, navigation précédente, liens de navigation secondaire.`,
+        },
+    },
+};
+export const ExternalLink = Template.bind({});
+ExternalLink.storyName = 'Lien externe';
+ExternalLink.args = {
+    content: 'Consulter le site externe',
+    href: 'https://www.wallonie.be',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+    icon: 'fa-arrow-up-right-from-square',
+    iconPosition: 'right',
+};
+ExternalLink.parameters = {
+    docs: {
+        description: {
+            story: `Lien vers un site externe s'ouvrant dans un nouvel onglet, avec rel="noopener noreferrer" pour la sécurité. L'icône indique visuellement la redirection externe. Cas d'usage : références vers des ressources tierces, portails partenaires.`,
+        },
+    },
+};
+export const Download = Template.bind({});
+Download.storyName = 'Lien de téléchargement';
+Download.args = {
+    content: 'Télécharger le document',
+    href: '/document.pdf',
+    download: 'document.pdf',
+    icon: 'fa-download',
+    iconPosition: 'left',
+};
+Download.parameters = {
+    docs: {
+        description: {
+            story: `Lien déclenchant le téléchargement d'un fichier via l'attribut download. Cas d'usage : téléchargement de PDF, exports de données, ressources à sauvegarder.`,
+        },
+    },
+};
+export const Disabled = Template.bind({});
+Disabled.storyName = 'Lien désactivé';
+Disabled.args = {
+    content: 'Lien non disponible',
+    href: '#',
+    disabled: true,
+};
+Disabled.parameters = {
+    docs: {
+        description: {
+            story: `Lien en état désactivé. Non cliquable et visuellement différencié. Cas d'usage : actions conditionnelles, fonctionnalités non encore disponibles, liens selon droits utilisateur.`,
+        },
+    },
+};

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

@@ -67,6 +67,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Chargement par défaut';
 Default.args = {};
 Default.parameters = {
     docs: {
@@ -76,6 +77,7 @@ Default.parameters = {
     },
 };
 export const WithoutText = Template.bind({});
+WithoutText.storyName = 'Chargement sans texte';
 WithoutText.args = { text: '' };
 WithoutText.parameters = {
     docs: {
@@ -86,6 +88,7 @@ WithoutText.parameters = {
 };
 // --- TAILLES ---
 export const Small = Template.bind({});
+Small.storyName = 'Chargement petit';
 Small.args = { size: 'small' };
 Small.parameters = {
     docs: {
@@ -95,6 +98,7 @@ Small.parameters = {
     },
 };
 export const Medium = Template.bind({});
+Medium.storyName = 'Chargement moyen';
 Medium.args = { size: 'medium' };
 Medium.parameters = {
     docs: {
@@ -104,6 +108,7 @@ Medium.parameters = {
     },
 };
 export const Large = Template.bind({});
+Large.storyName = 'Chargement grand';
 Large.args = { size: 'large' };
 Large.parameters = {
     docs: {
@@ -113,6 +118,7 @@ Large.parameters = {
     },
 };
 export const ExtraLarge = Template.bind({});
+ExtraLarge.storyName = 'Chargement très grand';
 ExtraLarge.args = { size: 'extra-large' };
 ExtraLarge.parameters = {
     docs: {
@@ -122,6 +128,7 @@ ExtraLarge.parameters = {
     },
 };
 export const SurfaceDark = Template.bind({});
+SurfaceDark.storyName = 'Chargement sur fond sombre';
 SurfaceDark.args = { surface: 'dark' };
 SurfaceDark.parameters = {
     backgrounds: { default: 'dark' },
@@ -132,6 +139,7 @@ SurfaceDark.parameters = {
     },
 };
 export const Vertical = Template.bind({});
+Vertical.storyName = 'Chargement vertical';
 Vertical.args = { orientation: 'vertical' };
 Vertical.parameters = {
     docs: {

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

@@ -81,12 +81,14 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Pagination par boutons';
 Default.args = {
     totalItems: 90,
     itemsPerPage: 10,
     label: '',
 };
 export const Input = Template.bind({});
+Input.storyName = 'Pagination par champ de saisie';
 Input.args = {
     totalItems: 90,
     itemsPerPage: 10,

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

@@ -70,8 +70,78 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Boutons radio horizontaux';
 Default.args = {
     label: 'Mon label',
     type: 'checkboxes',
     name: 'radio',
+    orientation: 'horizontal',
+};
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Groupe de boutons radio en orientation horizontale. Les options sont disposées côte à côte sur une même ligne. Cas d'usage : choix courts (Oui / Non, 2-3 options), filtres rapides, sélection inline dans un formulaire compact.`,
+        },
+    },
+};
+export const Vertical = Template.bind({});
+Vertical.storyName = 'Boutons radio verticaux';
+Vertical.args = {
+    label: 'Mon label',
+    type: 'checkboxes',
+    name: 'radio-vertical',
+    orientation: 'vertical',
+};
+Vertical.parameters = {
+    docs: {
+        description: {
+            story: `Groupe de boutons radio en orientation verticale. Les options sont empilées les unes sous les autres. Cas d'usage : listes d'options longues, labels multi-mots, formulaires standards.`,
+        },
+    },
+};
+export const WithHint = Template.bind({});
+WithHint.storyName = 'Boutons radio avec indice (hint)';
+WithHint.args = {
+    label: 'Mon label',
+    type: 'checkboxes',
+    name: 'radio-hint',
+    orientation: 'vertical',
+    hint: "Ceci est un texte d'aide.",
+    showHintIcon: true,
+};
+WithHint.parameters = {
+    docs: {
+        description: {
+            story: `Groupe de boutons radio avec un message d'aide (hint) affiché sous les options. Cas d'usage : préciser les critères de sélection, donner un contexte supplémentaire à l'utilisateur.`,
+        },
+    },
+};
+export const WithHintExpandable = () => {
+    const element = document.createElement('spw-group');
+    element.setAttribute('label', 'Mon label');
+    element.setAttribute('type', 'checkboxes');
+    element.setAttribute('name', 'radio-hint-expandable');
+    element.setAttribute('orientation', 'vertical');
+    element.setAttribute('hint', "Ceci est un texte d'aide.");
+    element.setAttribute('show-hint-icon', 'true');
+    element.setAttribute('is-expandable', 'true');
+    element.setAttribute('expand-label', 'En savoir plus');
+    element.setAttribute('collapse-label', 'Réduire');
+    element.innerHTML = `
+    <spw-radio name="radio-hint-expandable" value="1">Radio 1</spw-radio>
+    <spw-radio name="radio-hint-expandable" value="2">Radio 2</spw-radio>
+  `;
+    const details = document.createElement('div');
+    details.setAttribute('slot', 'details');
+    details.innerHTML = '<div class="spw-ds-wysiwyg">Ceci est un message avec du <strong>texte en gras</strong>. Ainsi qu\'un <a href="#">lien</a></div>';
+    element.appendChild(details);
+    return element;
+};
+WithHintExpandable.storyName = 'Boutons radio avec indice dépliable';
+WithHintExpandable.parameters = {
+    docs: {
+        description: {
+            story: `Groupe de boutons radio avec hint dépliable. Le message d'aide est masqué par défaut et révélé au clic via isExpandable. Le slot details permet d'afficher du contenu riche dans le panneau déplié. Cas d'usage : explications détaillées sur les options, règles de sélection complexes.`,
+        },
+    },
 };

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

@@ -79,14 +79,17 @@ const Template = args => {
     return container;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Retour en haut par défaut';
 Default.args = {
     threshold: 300,
 };
 export const LowThreshold = Template.bind({});
+LowThreshold.storyName = "Retour en haut à seuil bas";
 LowThreshold.args = {
     threshold: 100,
 };
 export const HighThreshold = Template.bind({});
+HighThreshold.storyName = 'Retour en haut à seuil élevé';
 HighThreshold.args = {
     threshold: 500,
 };

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

@@ -239,6 +239,7 @@ const defaultItems = [
     { label: 'Environnement', value: 'environnement', url: '/nature/environnement', category: 'Nature', disabled: true },
 ];
 export const Default = Template.bind({});
+Default.storyName = 'Champ de recherche par défaut';
 Default.args = {
     size: 'medium',
     name: 'search-basic',
@@ -253,6 +254,7 @@ Default.parameters = {
     },
 };
 export const ViewMore = Template.bind({});
+ViewMore.storyName = 'Recherche avec lien « Voir plus »';
 ViewMore.args = {
     size: 'medium',
     name: 'search-with-links',
@@ -269,6 +271,7 @@ ViewMore.parameters = {
     },
 };
 export const FormSubmission = Template.bind({});
+FormSubmission.storyName = 'Recherche avec soumission de formulaire';
 FormSubmission.args = {
     size: 'medium',
     name: 'q',
@@ -284,6 +287,7 @@ FormSubmission.parameters = {
     },
 };
 export const HeroRounded = Template.bind({});
+HeroRounded.storyName = 'Recherche bannière arrondie';
 HeroRounded.args = {
     size: 'large',
     name: 'search-hero',
@@ -302,6 +306,7 @@ HeroRounded.parameters = {
     },
 };
 export const WithLabelAndHelp = Template.bind({});
+WithLabelAndHelp.storyName = "Recherche avec label et aide";
 WithLabelAndHelp.args = {
     size: 'medium',
     name: 'search-required',
@@ -319,6 +324,7 @@ WithLabelAndHelp.parameters = {
     },
 };
 export const Disabled = Template.bind({});
+Disabled.storyName = 'Recherche désactivée';
 Disabled.args = {
     size: 'medium',
     name: 'search-disabled',

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

@@ -72,6 +72,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Liste déroulante native';
 Default.args = {
     placeholder: 'Mon placeholder',
     label: 'Mon label',
@@ -80,3 +81,32 @@ Default.args = {
     required: true,
     showHintIcon: false,
 };
+export const HintExpandable = () => {
+    const element = document.createElement('spw-select');
+    element.setAttribute('label', 'Mon label');
+    element.setAttribute('name', 'select-hint-expandable');
+    element.setAttribute('hint', "Ceci est un texte d'aide.");
+    element.setAttribute('is-expandable', 'true');
+    element.setAttribute('expand-label', 'En savoir plus');
+    element.setAttribute('collapse-label', 'Réduire');
+    element.setAttribute('show-hint-icon', 'true');
+    element.innerHTML = `
+    <option value="">Choisissez une option</option>
+    <option value="1">Option 1</option>
+    <option value="2">Option 2</option>
+    <option value="3">Option 3</option>
+  `;
+    const details = document.createElement('div');
+    details.setAttribute('slot', 'details');
+    details.innerHTML = '<div class="spw-ds-wysiwyg">Ceci est un message avec du <strong>texte en gras</strong>. Ainsi qu\'un <a href="#">lien</a></div>';
+    element.appendChild(details);
+    return element;
+};
+HintExpandable.storyName = 'Liste déroulante avec indice dépliable';
+HintExpandable.parameters = {
+    docs: {
+        description: {
+            story: `Liste déroulante avec hint dépliable. Le message d'aide est masqué par défaut et révélé au clic via isExpandable. Le slot details permet d'afficher du contenu riche (HTML) dans le panneau déplié. Cas d'usage : explications longues, règles de sélection, aides contextuelles facultatives.`,
+        },
+    },
+};

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

@@ -69,11 +69,13 @@ const Template = args => {
     return element;
 };
 export const Horizontal = Template.bind({});
+Horizontal.storyName = 'Séparateur horizontal';
 Horizontal.args = {
     direction: 'horizontal',
     thickness: '1',
 };
 export const Vertical = Template.bind({});
+Vertical.storyName = 'Séparateur vertical';
 Vertical.args = {
     direction: 'vertical',
     thickness: '1',

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

@@ -103,29 +103,34 @@ const VariantsTemplate = () => {
 };
 // Story par défaut
 export const Default = Template.bind({});
+Default.storyName = 'Squelette par défaut';
 Default.args = {
     blocks: 3,
 };
 // Story pour la variante texte
 export const VarianteTexte = Template.bind({});
+VarianteTexte.storyName = 'Squelette de texte';
 VarianteTexte.args = {
     blocks: 5,
     variant: 'text',
 };
 // Story pour la variante article
 export const VarianteArticle = Template.bind({});
+VarianteArticle.storyName = "Squelette d'article";
 VarianteArticle.args = {
     blocks: 6,
     variant: 'article',
 };
 // Story pour la variante layout
 export const VarianteLayout = Template.bind({});
+VarianteLayout.storyName = 'Squelette de mise en page';
 VarianteLayout.args = {
     blocks: 8,
     variant: 'layout',
 };
 // Story pour toutes les variantes ensemble
 export const VarianteMosaique = VariantsTemplate.bind({});
+VarianteMosaique.storyName = 'Squelette en mosaïque';
 Default.parameters = {
     docs: {
         description: {

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

@@ -73,42 +73,49 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Étiquette par défaut';
 Default.args = {
     variant: 'default',
     size: 'small',
     content: 'Mon tag',
 };
 export const Grey = Template.bind({});
+Grey.storyName = 'Étiquette grise';
 Grey.args = {
     variant: 'grey',
     size: 'small',
     content: 'Mon tag',
 };
 export const Blue = Template.bind({});
+Blue.storyName = 'Étiquette bleue';
 Blue.args = {
     variant: 'blue',
     size: 'small',
     content: 'Mon tag',
 };
 export const Green = Template.bind({});
+Green.storyName = 'Étiquette verte';
 Green.args = {
     variant: 'green',
     size: 'small',
     content: 'Mon tag',
 };
 export const Orange = Template.bind({});
+Orange.storyName = 'Étiquette orange';
 Orange.args = {
     variant: 'orange',
     size: 'small',
     content: 'Mon tag',
 };
 export const Red = Template.bind({});
+Red.storyName = 'Étiquette rouge';
 Red.args = {
     variant: 'red',
     size: 'small',
     content: 'Mon tag',
 };
 export const Purple = Template.bind({});
+Purple.storyName = 'Étiquette violette';
 Purple.args = {
     variant: 'purple',
     size: 'small',

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

@@ -77,6 +77,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Champ de texte par défaut';
 Default.args = {
     placeholder: 'Mon placeholder',
     label: 'Mon label',
@@ -96,6 +97,7 @@ Default.parameters = {
  * AVEC WARNING
  * ------------------------------------------------------------------------------------------------- */
 export const AvecWarning = Template.bind({});
+AvecWarning.storyName = 'Champ avec avertissement';
 AvecWarning.args = {
     placeholder: 'Entrez une valeur',
     label: 'Champ avec avertissement',
@@ -114,6 +116,7 @@ AvecWarning.parameters = {
  * AVEC ERREUR
  * ------------------------------------------------------------------------------------------------- */
 export const AvecErreur = Template.bind({});
+AvecErreur.storyName = 'Champ avec erreur';
 AvecErreur.args = {
     placeholder: 'Entrez votre email',
     label: 'Adresse email',
@@ -134,6 +137,7 @@ AvecErreur.parameters = {
  * AVEC MASQUE
  * ------------------------------------------------------------------------------------------------- */
 export const AvecMasque = Template.bind({});
+AvecMasque.storyName = 'Champ avec masque de saisie';
 AvecMasque.args = {
     placeholder: '__ /__ /____',
     label: 'Date de naissance',
@@ -153,6 +157,7 @@ AvecMasque.parameters = {
  * AVEC TOOLTIP
  * ------------------------------------------------------------------------------------------------- */
 export const AvecTooltip = Template.bind({});
+AvecTooltip.storyName = 'Champ avec infobulle';
 AvecTooltip.args = {
     placeholder: 'Entrez votre IBAN',
     label: 'Numéro IBAN',
@@ -175,6 +180,7 @@ AvecTooltip.parameters = {
  * TYPE NUMBER
  * ------------------------------------------------------------------------------------------------- */
 export const TypeNumber = Template.bind({});
+TypeNumber.storyName = 'Champ numérique';
 TypeNumber.args = {
     placeholder: '0',
     label: 'Quantité',
@@ -198,6 +204,7 @@ TypeNumber.parameters = {
  * TYPE NUMBER AVEC INDICATEUR
  * ------------------------------------------------------------------------------------------------- */
 export const TypeNumberAvecIndicateur = Template.bind({});
+TypeNumberAvecIndicateur.storyName = 'Champ numérique avec unité';
 TypeNumberAvecIndicateur.args = {
     placeholder: '0',
     label: 'Prix unitaire',
@@ -215,3 +222,26 @@ TypeNumberAvecIndicateur.parameters = {
         },
     },
 };
+export const HintExpandable = () => {
+    const element = document.createElement(elementTag);
+    element.setAttribute('label', 'Mon label');
+    element.setAttribute('name', 'text-field-hint-expandable');
+    element.setAttribute('hint', "Ceci est un texte d'aide.");
+    element.setAttribute('is-expandable', 'true');
+    element.setAttribute('expand-label', 'En savoir plus');
+    element.setAttribute('collapse-label', 'Réduire');
+    element.setAttribute('show-hint-icon', 'true');
+    const details = document.createElement('div');
+    details.setAttribute('slot', 'details');
+    details.innerHTML = '<div class="spw-ds-wysiwyg">Ceci est un message avec du <strong>texte en gras</strong>. Ainsi qu\'un <a href="#">lien</a></div>';
+    element.appendChild(details);
+    return element;
+};
+HintExpandable.storyName = 'Champ avec indice dépliable';
+HintExpandable.parameters = {
+    docs: {
+        description: {
+            story: `Champ avec hint dépliable. Le message d'aide est masqué par défaut et révélé au clic via isExpandable. Le slot details permet d'afficher du contenu riche (HTML) dans le panneau déplié. Cas d'usage : explications longues, règles de saisie détaillées, aides contextuelles facultatives.`,
+        },
+    },
+};

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

@@ -66,6 +66,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Zone de texte';
 Default.args = {
     placeholder: 'Mon placeholder',
     label: 'Mon label',
@@ -74,3 +75,124 @@ Default.args = {
     required: true,
     showHintIcon: false,
 };
+export const HintExpandable = () => {
+    const element = document.createElement('spw-textarea');
+    element.setAttribute('label', 'Mon label');
+    element.setAttribute('name', 'textarea-hint-expandable');
+    element.setAttribute('hint', "Ceci est un texte d'aide.");
+    element.setAttribute('is-expandable', 'true');
+    element.setAttribute('expand-label', 'En savoir plus');
+    element.setAttribute('collapse-label', 'Réduire');
+    element.setAttribute('show-hint-icon', 'true');
+    const details = document.createElement('div');
+    details.setAttribute('slot', 'details');
+    details.innerHTML = '<div class="spw-ds-wysiwyg">Ceci est un message avec du <strong>texte en gras</strong>. Ainsi qu\'un <a href="#">lien</a></div>';
+    element.appendChild(details);
+    return element;
+};
+HintExpandable.storyName = 'Zone de texte avec indice dépliable';
+HintExpandable.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte avec hint dépliable. Le message d'aide est masqué par défaut et révélé au clic via isExpandable. Le slot details permet d'afficher du contenu riche (HTML) dans le panneau déplié. Cas d'usage : explications longues, instructions de saisie détaillées, aides contextuelles facultatives.`,
+        },
+    },
+};
+export const WithError = Template.bind({});
+WithError.storyName = 'Zone de texte avec erreur';
+WithError.args = {
+    placeholder: 'Mon placeholder',
+    label: 'Mon label',
+    name: 'textarea-error',
+    error: 'Ce champ est obligatoire.',
+    required: true,
+};
+WithError.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte en état d'erreur. Le message d'erreur est affiché sous le champ avec un style visuel distinctif. Cas d'usage : validation de formulaire, champ obligatoire non rempli, format de saisie incorrect.`,
+        },
+    },
+};
+export const WithSuccess = Template.bind({});
+WithSuccess.storyName = 'Zone de texte avec succès';
+WithSuccess.args = {
+    placeholder: 'Mon placeholder',
+    label: 'Mon label',
+    name: 'textarea-success',
+    value: 'Mon texte valide.',
+    success: 'Le contenu est valide.',
+};
+WithSuccess.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte en état de succès. Un message de confirmation est affiché sous le champ. Cas d'usage : validation en temps réel, confirmation après vérification du contenu saisi.`,
+        },
+    },
+};
+export const WithWarning = Template.bind({});
+WithWarning.storyName = 'Zone de texte avec avertissement';
+WithWarning.args = {
+    placeholder: 'Mon placeholder',
+    label: 'Mon label',
+    name: 'textarea-warning',
+    value: 'Mon texte.',
+    warning: 'Ce contenu pourrait être incomplet.',
+};
+WithWarning.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte avec avertissement. Le message d'avertissement signale un problème non bloquant. Cas d'usage : contenu trop court, risque de perte de données, suggestion de compléter la saisie.`,
+        },
+    },
+};
+export const Disabled = Template.bind({});
+Disabled.storyName = 'Zone de texte désactivée';
+Disabled.args = {
+    placeholder: 'Mon placeholder',
+    label: 'Mon label',
+    name: 'textarea-disabled',
+    value: 'Contenu non modifiable.',
+    disabled: true,
+};
+Disabled.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte désactivée. Le champ est en lecture seule et non interactif. Cas d'usage : affichage d'un contenu figé, champ conditionnel non applicable, données non éditables dans un formulaire.`,
+        },
+    },
+};
+export const WithMaxLength = Template.bind({});
+WithMaxLength.storyName = 'Zone de texte avec limite de caractères';
+WithMaxLength.args = {
+    placeholder: 'Mon placeholder',
+    label: 'Mon label',
+    name: 'textarea-maxlength',
+    maxLength: 200,
+    hint: '200 caractères maximum.',
+    showHintIcon: false,
+};
+WithMaxLength.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte avec limite de caractères (maxLength). Cas d'usage : champs de description courts, bio utilisateur, résumés, commentaires limités.`,
+        },
+    },
+};
+export const WithTooltip = Template.bind({});
+WithTooltip.storyName = 'Zone de texte avec infobulle';
+WithTooltip.args = {
+    placeholder: 'Mon placeholder',
+    label: 'Mon label',
+    name: 'textarea-tooltip',
+    tooltipTitle: 'Aide à la saisie',
+    tooltipText: 'Décrivez votre demande de manière précise pour obtenir une réponse adaptée.',
+    tooltipDirection: 'top',
+};
+WithTooltip.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte avec infobulle (tooltip) sur le label. Fournit une aide contextuelle sans encombrer l'interface. Cas d'usage : champs dont le sens n'est pas immédiatement évident, consignes de saisie complémentaires.`,
+        },
+    },
+};