Tabs

Candidate

Tabs permet de passer rapidement entre des contenus apparentes sans changer de page ni perdre le contexte courant.

Preview

Le segment Premium shoppers contient 128 420 profils actifs.

Anatomy

Icone optionnelle : Material Symbols Rounded, affichee en 22 px.
Label : style typographique Label LG.
Status optionnel : signale une information associee a la vue sans remplacer son label.
Indicateur actif : souligne uniquement la vue actuellement affichee.
Panel : contenu relie semantiquement a son onglet.

Properties

Property	Type	Default	Usage
`items`	`TabItem[]`	requis	Labels, icones, statuts et etats disabled
`defaultValue`	`string`	premier onglet actif	Vue selectionnee au chargement
`label`	`string`	`Navigation par onglets`	Nom accessible du groupe
`id`	`string`	genere automatiquement	Prefixe stable pour les relations ARIA
`showIcon`	`boolean`	`true` si une icone existe	Masque ponctuellement l’icone d’un item
`status`	`boolean`	`false`	Affiche le point de statut
`statusLabel`	`string`	aucun	Rend le statut comprehensible par les technologies d’assistance

States

default utilise une couleur discrete pour laisser la priorite au contenu.
hover renforce le label et ajoute une surface neutre legere.
active utilise le texte primaire et un indicateur inferieur sombre.
focus-visible affiche un focus ring independant de l’etat actif.
disabled reste visible mais ne peut pas etre selectionne.

Astro

---
import Tabs from '../components/ui/Tabs.astro';

const tabs = [
  { value: 'overview', label: 'Vue d’ensemble', icon: 'arrow_forward' },
  {
    value: 'destinations',
    label: 'Destinations',
    icon: 'arrow_forward',
    status: true,
    statusLabel: 'Synchronisation requise',
  },
  { value: 'history', label: 'Historique', icon: 'arrow_forward' },
];
---

<Tabs items={tabs} defaultValue="overview" label="Configuration du segment">
  <section slot="panel-overview">Informations principales du segment.</section>
  <section slot="panel-destinations">Destinations connectees.</section>
  <section slot="panel-history">Historique des modifications.</section>
</Tabs>

Chaque panel utilise un slot nomme panel-{value}. La valeur doit etre unique dans le composant et rester exploitable dans un identifiant HTML.

Le composant emet pixel-tab-change. La valeur active est disponible dans event.detail.value.

Tokens

--tab-bg-*, --tab-fg-*, --tab-border-default, --tab-indicator-active, --tab-focus-ring, --tab-status, --tab-padding-*, --tab-content-gap, --tab-border-width, --tab-container-border-width, --tab-icon-size, --tab-status-size, --motion-duration-base.

Les labels utilisent les tokens --text-label-lg-*. L’icone utilise --size-icon-xl, soit 22 px.

Do / Don’t

Do	Don’t
Utiliser Tabs pour des vues de meme niveau.	Utiliser Tabs comme navigation principale de l’application.
Employer des labels courts et distincts.	Faire tenir une phrase complete dans un onglet.
Conserver l’ordre des onglets entre les visites.	Reordonner les onglets selon leur contenu dynamique.
Utiliser le statut pour une information utile.	Ajouter des points decoratifs sans signification.
Prevoir un comportement responsive avec defilement horizontal.	Compresser les labels jusqu’a les rendre illisibles.

Accessibility

Le composant applique les roles tablist, tab et tabpanel, ainsi que les relations aria-controls et aria-labelledby. Les fleches gauche et droite changent d’onglet, Home selectionne le premier et End le dernier. Les onglets desactives sont ignores par cette navigation.

Le statut doit recevoir un statusLabel lorsqu’il transmet une information. L’etat actif ne repose pas uniquement sur la couleur : il est aussi represente par l’indicateur inferieur et aria-selected.

Status

Candidate. La variante line, les icones, les statuts, le disabled et la navigation clavier sont disponibles. Les variantes segmented et verticale restent hors V1.