Alert <ar-alert>
Défaut
Alerte sans variant explicite (erreur par défaut), avec titre et corps.
Je suis une alerte par defaut (erreur).
Succès
Rendu en mode succès.
Je suis une alerte de succès.
Dismissible
Rendu d'une alerte qui peut être fermée. L'ID fourni doit être un élément existant dans la page qui recevra le focus à la fermeture du composant.
Je suis une alerte qui peut être fermée.
Breadcrumb <ar-breadcrumb>
Par défaut
Fil d'ariane avec 3 niveaux, le dernier élément actif.
Séparateur personnalisé
Un contenu posé dans le slot separator remplace le « / » par défaut ; il est cloné entre chaque item.
Séparateur en icône
Une icône SVG comme séparateur ; le contenu slotté fixe sa propre taille (width et height).
Char Counter <ar-charcounter>
Par défaut
Compteur lié à un champ texte via `for`. Affiche le nombre de caractères restants. Passe en état `warning` quand il reste ≤ 20 % de la limite (seuil par défaut), puis en état `error` quand la limite est dépassée.
Seuil d'avertissement personnalisé
`warn-threshold="15"` déclenche l'état `warning` quand il reste ≤ 15 caractères. La zone de texte est pré-remplie pour illustrer l'état d'avertissement (45 caractères sur 60).
Icônes dans les slots
Les slots `warning-icon` et `error-icon` permettent d'ajouter un signal non-couleur conforme WCAG 1.4.1. Le contenu du slot est rendu à côté du compteur dans l'état correspondant.
Label personnalisé
La prop `label` accepte la syntaxe `"singulier|pluriel"` — le composant choisit automatiquement la forme selon le nombre de caractères restants. Le même label est utilisé dans les annonces `aria-live` : l'annonce de passage en avertissement dit par exemple _"1 caractère restant"_ ou _"12 caractères restants"_. Sans pipe, le label est utilisé tel quel, quel que soit le nombre.
Collapse <ar-collapse>
Standalone
Collapse simple avec un trigger interne via `slot="trigger"`. L'animation de hauteur est activée via `--ar-collapse-duration`.
Contenu qui se révèle à l'ouverture. Peut contenir n'importe quel HTML.
Ouvert par défaut
L'attribut `open` ouvre le panel sans animation au chargement.
Contenu visible dès le chargement.
Accordéon (name)
Tous les `ar-collapse` partageant le même attribut `name` forment un groupe accordéon : ouvrir un item ferme automatiquement les autres.
Réponse à la question 1.
Réponse à la question 2.
Réponse à la question 3.
Trigger externe (trigger-id)
L'attribut `trigger-id` accepte l'ID d'un bouton natif situé n'importe où dans la page. `aria-expanded` et `aria-controls` sont posés automatiquement sur ce bouton.
Contenu piloté par un trigger externe. Utile quand trigger et panel ne peuvent pas être enveloppés dans un wrapper commun.
Trigger après le contenu
`trigger-position="after"` place le trigger après le contenu dans le DOM (et visuellement). Utile pour les patterns "Lire la suite" où le bouton apparaît sous le texte tronqué.
Les chimpanzés utilisent des outils, communiquent par gestes et sons, vivent en groupes sociaux complexes avec hiérarchies et alliances.
Leur génome est similaire à 98,7 % à celui de l'humain. Ils fabriquent des outils en bois pour extraire des termites, et utilisent des pierres comme enclumes pour casser des noix.
Les femelles transmettent ces techniques à leurs petits, une forme d'apprentissage culturel rare dans le règne animal.
Désactivé
L'attribut `disabled` bloque l'interaction. Le composant pose `disabled` et `aria-disabled="true"` sur le trigger interne.
Ce contenu ne peut pas être révélé.
Datepicker <ar-datepicker>
Par défaut
Date unique avec format français. Le hint par défaut affiche un exemple de date.
Avec erreur
Lorsque le slot "error" est rempli, le composant expose `:state(has-error)`.
Readonly
Valeur affichée non modifiable, soumise au formulaire.
Disabled
Composant désactivé, valeur exclue du formulaire.
Plage de dates
`min` et `max` restreignent les jours sélectionnables. Le hint par défaut annonce la plage.
Dates désactivées
`isDateDisabled` désactive des jours selon une règle libre, ici les week-ends, et rend le champ invalide si l'un d'eux est saisi à la main. Le hint par défaut ne les décrit pas.
Langue et format
L'attribut `lang` pilote les textes et les formats, sauf le label de l'input.
Dialog <ar-dialog>
Modal
Dialog centré avec backdrop. Cliquer sur le bouton pour l'ouvrir.
Votre session expirera dans 5 minutes. Enregistrez votre travail pour ne pas perdre vos modifications.
Drawer droit
Panneau latéral glissant depuis la droite.
Contenu du panneau latéral.
Drawer gauche
Panneau latéral glissant depuis la gauche.
Contenu du panneau latéral gauche.
Fermeture au clic backdrop
Par défaut, le backdrop est statique. Avec close-on-backdrop, un clic sur le fond ferme le dialog.
Cliquez en dehors du dialog pour le fermer.
Avec footer
Zone d'actions en pied de page via slot="footer".
Cette action supprimera définitivement l'élément sélectionné.
Actions dans le header
Le slot header-actions permet d'ajouter des actions additionnelles avant le bouton de fermeture (ex. bouton plein écran).
Contenu du dialog, avec une action additionnelle dans le header.
Header avancé
Un seul enfant slotté dans header-actions peut porter son propre layout — ici des actions à gauche et une pagination compacte à droite, titre du drawer masqué visuellement (sr-only) au profit d'un titre secondaire visible dans le contenu.
Titre secondaire du volet
Contenu du volet
Sans header
without-header retire titre, actions et bouton de fermeture — label reste requis pour le nom accessible (aria-label). Prévoir un moyen de fermeture (ici close-on-backdrop).
Focus initial
Posez `autofocus` sur l'élément qui doit recevoir le focus à l'ouverture — ici un champ de recherche dans un drawer.
Dialogs empilés
Ouverture d'un second dialog depuis le premier — scroll lock et focus sont coordonnés. Le scroll de la page reste verrouillé tant qu'un dialog est ouvert, et n'est relâché qu'à la fermeture du dernier. Escape ne ferme que le dialog au sommet.
Ce dialog peut en ouvrir un second par-dessus.
Dialog empilé. Escape ne ferme que ce dialog, pas le précédent.
Fermeture bloquée
ar-dialog-hide est annulable : le composant secoue le dialog et annonce automatiquement le blocage aux lecteurs d'écran. Seul le bouton Confirmer ferme.
Ce dialog ne peut être fermé que via le bouton Confirmer. Escape et le bouton de fermeture sont interceptés.
Dropdown <ar-dropdown>
Mode menu
Avec des ar-dropdown-item, le panel reçoit automatiquement role="menu" et la navigation clavier est activée (↑↓ Home End Escape Tab).
Séparateur
Un `<hr>` placé entre des `ar-dropdown-item` reçoit automatiquement `role="separator"`. Stylez-le avec votre propre CSS — ici via une variable CSS du token de bordure.
Contenu libre
Sans ar-dropdown-item, le panel est un conteneur libre — aucun role ni navigation clavier n'est ajouté.
Contenu libre — formulaire, liste, texte…
Placement top-end
Le panel s'ouvre au-dessus du trigger, aligné à droite.
Distance personnalisée
Espacement en pixels entre le trigger et le panel (axe principal), piloté par la custom property CSS `--ar-dropdown-distance` (défaut : `var(--ar-anchor-distance)`, 4px).
Offset latéral
Décalage latéral en pixels du panel par rapport au trigger (axe transversal), piloté par la custom property CSS `--ar-dropdown-offset` (défaut : `var(--ar-anchor-offset)`, 0).
Trigger externe
L'attribut `trigger-id` accepte l'ID d'un élément déclencheur situé en dehors du composant. Utile pour les boutons dans une barre d'outils ou une autre zone de la page.
Désactivé
Combine `disabled` sur `ar-dropdown` et `aria-disabled="true"` sur le trigger — voir la section Accessibilité pour le détail. WCAG exempte les composants désactivés des exigences de contraste : `opacity: .5` est donc conforme.
Droits insuffisants pour effectuer cette action.
Pagination <ar-pagination>
Pour les besoins de la démo un script simule une réponse positive aux événements émis par le composant.
Par défaut
Pagination sans attributs (valeurs par défaut du composant).
20 pages
Pagination à 20 pages, page 10 active (milieu de la liste).
20 pages (current en début)
Pagination à 20 pages, page 5 active (début de la liste).
20 pages (current en fin)
Pagination à 20 pages, page 18 active (fin de la liste).
Mode compact
Mode compact — uniquement précédent/suivant et un label de position, identique en mobile et desktop.
Progressbar <ar-progressbar>
Par défaut
Barre de progression sans attribut — affiche l'état 0 % sans label.
Upload
Suivi de l'upload d'un fichier.
mon-document-a-partager.pdf
Spinner <ar-spinner>
Par défaut (moyen)
Spinner sans attribut size (taille md par défaut).
Très petit
Spinner avec size="xs".
Petit
Spinner avec size="sm".
Grand
Spinner avec size="lg".
Toutes les tailles
Les 4 tailles disponibles affichées côte à côte (xs, sm, md, lg).
Stepper <ar-stepper>
Pour les besoins de la démo un script simule une réponse positive aux événements émis par le composant.
Par défaut
Stepper à 3 étapes avec sous-étapes, sous-étape « Mes coordonnées » active.
Mode édition
Même structure en mode édition — toutes les étapes passées sont cliquables.
Information après label
Ajouter une information complémentaire au label d'une sous-étape
Alignement inversé
Inverse l'alignement de la liste d'étapes en mode desktop. S'appuie sur des règles posées sur les parts control et indicator d'ar-stepper-item — un thème qui les redéfinit peut désactiver l'inversion.
Tab Group <ar-tab-group>
Par défaut
Déclarer les onglets avec `<ar-tab panel="nom">` et les panneaux avec `<ar-tab-panel name="nom">`. L'association se fait par correspondance du nom.
Onglet initial
Utilisez l'attribut `active` pour définir l'onglet ouvert par défaut.
Onglet désactivé
L'attribut `disabled` sur un `<ar-tab>` rend l'onglet non sélectionnable et l'exclut de la navigation clavier.
Activation manuelle
Avec `manual-activation`, les flèches déplacent le focus sans changer l'onglet actif — il faut appuyer sur Entrée ou Espace pour confirmer. Utile quand le contenu du panel est coûteux à charger.
Boutons de scroll
La méthode publique `scrollNav(direction, amount?)` permet de piloter facilement le défilement de la tablist sans accéder au shadow DOM. Dans l'exemple suivante, les boutons sont affichés/masqués via CSS `:has()` en fonction des classes `has-overflow-start` / `has-overflow-end`.
Scroll hints
Les classes `has-overflow-start` et `has-overflow-end` sont posées automatiquement sur l'hôte. Cette démo branche un `mask-image` CSS sur ces classes pour signaler l'overflow en temps réel — aucun attribut requis.
Avec thème personnalisé
Les tokens `--ar-tab-*` permettent de changer le style de l'indicateur actif sans modifier le composant. Exemple — indicateur en haut (top border) et style pill.
Top border
Pill
Table Sort <ar-table-sort>
Alphabétique
Tri alphabétique (A → Z / Z → A). Cliquer sur l'entête émet `ar-table-sort-change`. Appeler `confirm()` pour valider le tri ou `reject()` pour annuler.
|
|
|---|
| Alice |
| Bob |
Numérique
Tri numérique (croissant / décroissant).
|
|
|---|
| 10 € |
| 42 € |
Date
Tri chronologique (plus ancien / plus récent).
|
|
|---|
| 2024-01-15 |
| 2024-06-03 |
Multi-colonnes
Plusieurs colonnes triables — la coordination entre elles est manuelle (voir la section « Multi-colonnes »).
|
|
|
|---|---|
| Alice | 42 € |
Tri en échec
Si le tri échoue, appeler `reject()` — le composant revient à son état précédent sans avancer dans le cycle. `reject('Texte')` annonce ce texte tel quel aux lecteurs d'écran, sans le traduire : à localiser par l'application. Sans argument, l'annonce par défaut est utilisée.
|
|
|---|
| Alice |
Tooltip <ar-tooltip>
Par défaut
Passez l'ID du trigger via `trigger-id`. La bulle s'affiche après `show-delay` ms (300 par défaut) et se masque après `hide-delay` ms (150 par défaut).
Placement
Toutes les valeurs Floating UI sont supportées — `top`, `bottom`, `left`, `right` et leurs variantes `-start`/`-end`. Le composant bascule automatiquement si l'espace est insuffisant.
Sans caret
Ajoutez `without-arrow` pour supprimer le caret directionnel — utile quand le tooltip est suffisamment proche du trigger ou dans un contexte visuel dense.
Sur une abréviation
Cas d'usage classique — `<abbr>` n'est pas interactif nativement, donc `tabindex="0"` est nécessaire pour que le tooltip soit accessible au clavier.
Le composant suit WCAG 1.4.13 pour garantir la persistance au survol.
Bouton icône
Complète un bouton sans libellé textuel — le tooltip joue le rôle de description visible. Attention, il ne remplace pas un `aria-label` sur le bouton lui-même.
Délais personnalisés
`show-delay` et `hide-delay` contrôlent les temporisations en ms. Valeurs par défaut : 300 ms / 150 ms (conformes WCAG 1.4.13). Ici `show-delay="0"` pour une réponse immédiate.
Désactivé
L'attribut `disabled` bloque tout déclenchement sans modifier le DOM du trigger. Utile pour désactiver dynamiquement le tooltip selon le contexte.