import { Controls, Canvas, Meta, Source } from '@storybook/addon-docs/blocks';
import * as LangBtnStories from './LangBtn.stories';

<Meta of={LangBtnStories} />

<div className="header">
  <h1>LangBtn</h1>
  <p>Le composant `LangBtn` est utilisé pour afficher une alerte à l’utilisateur.</p>
</div>

{/* func-version-start */}
<p className="func-version-badge">Dernière mise à jour fonctionnelle : V1.1.4 - 05/08/2026</p>
{/* func-version-end */}
{/* a11y-version-start */}
<p className="a11y-version-badge">Dernière mise à jour accessibilité : V1.1.3 - 10/08/2026</p>
{/* a11y-version-end */}


<Canvas of={LangBtnStories.Default} />

# API

<Controls of={LangBtnStories.Default} />

# Exemple d'utilisation

<Source dark code={`
<script setup lang="ts">
 import { LangBtn } from '@cnamts/synapse'
 import { ref } from 'vue'

 const value = ref('fr')
 const items = ['fr', 'en', 'co']
 const ariaLabel = 'Choix de la langue'
</script>

<template>
 <div class="mt-12 ml-12">
  <LangBtn
   v-model="value"
   :available-languages="items"
   :aria-label="ariaLabel"
   hide-down-arrow
  />
 </div>
</template>
`} />