@starterlib/ui 0.7.2 → 0.8.0

package/types/starterlib-ui-listes.d.ts

@@ -0,0 +1,432 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _starterlib_ui from '@starterlib/ui';
+import { AnnonceLocale } from '@starterlib/ui';
+
+/**
+ * `pages` : page precedente et suivante, pour un tableau.
+ * `suite` : « Afficher plus », pour une liste qui s'allonge.
+ */
+type ModeDePagination = 'pages' | 'suite';
+/** Ce qui peut recevoir le focus apres un changement de page. */
+interface Focalisable {
+    focus(options?: FocusOptions): void;
+}
+/**
+ * Pagination d'une liste par curseur.
+ *
+ * ```html
+ * <st-data-table #tableau … />
+ * <st-pagination
+ *   [numero]="navigation.numeroDePage()"
+ *   [precedenteDisponible]="navigation.precedenteDisponible()"
+ *   [suivanteDisponible]="page.value()?.hasMore ?? false"
+ *   [chargement]="page.isLoading()"
+ *   [cible]="tableau"
+ *   (precedente)="navigation.precedente()"
+ *   (suivante)="navigation.suivante(page.value())"
+ * />
+ * ```
+ *
+ * ⚠️ **Ni total, ni numeros cliquables** : le backend ne compte pas et ne va que
+ * vers l'avant (audit de la vague 4, V4-2). « Page 3 » se dit ; « page 3 sur 12 »
+ * serait invente.
+ *
+ * ⚠️ **Boutons indisponibles, jamais desactives** : sur la derniere page, « Page
+ * suivante » garde le focus qu'il avait. Desactive, il le perdrait, et le lecteur
+ * d'ecran retomberait sur le debut du document.
+ *
+ * ⚠️ **Apres un changement de page, le focus va a la `cible`** — la legende du
+ * tableau — et « Page 2 » s'annonce (UX-13). Sans cela, la personne au clavier
+ * reste en bas, sur « Page suivante », sans savoir que le contenu au-dessus a
+ * change.
+ */
+declare class StPagination {
+    protected readonly libelles: _angular_core.Signal<_starterlib_ui.LibellesUi>;
+    private readonly injecteur;
+    readonly mode: _angular_core.InputSignal<ModeDePagination>;
+    /** A partir de 1. */
+    readonly numero: _angular_core.InputSignal<number>;
+    readonly precedenteDisponible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly suivanteDisponible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly chargement: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Nom de la navigation, quand une page en porte plusieurs. */
+    readonly etiquette: _angular_core.InputSignal<string | null>;
+    /** Tailles proposees ; vide, pas de choix. Plafonnees a 100. */
+    readonly taillesDePage: _angular_core.InputSignal<readonly number[]>;
+    readonly taille: _angular_core.ModelSignal<number>;
+    /** Recoit le focus apres un changement de page. */
+    readonly cible: _angular_core.InputSignal<Focalisable | (() => Focalisable | null) | null>;
+    readonly precedente: _angular_core.OutputEmitterRef<void>;
+    readonly suivante: _angular_core.OutputEmitterRef<void>;
+    protected readonly annonce: AnnonceLocale;
+    protected readonly tailles: _angular_core.Signal<number[]>;
+    protected readonly etiquetteLue: _angular_core.Signal<string>;
+    constructor();
+    protected surTaille(evenement: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StPagination, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StPagination, "st-pagination", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "numero": { "alias": "numero"; "required": false; "isSignal": true; }; "precedenteDisponible": { "alias": "precedenteDisponible"; "required": false; "isSignal": true; }; "suivanteDisponible": { "alias": "suivanteDisponible"; "required": false; "isSignal": true; }; "chargement": { "alias": "chargement"; "required": false; "isSignal": true; }; "etiquette": { "alias": "etiquette"; "required": false; "isSignal": true; }; "taillesDePage": { "alias": "taillesDePage"; "required": false; "isSignal": true; }; "taille": { "alias": "taille"; "required": false; "isSignal": true; }; "cible": { "alias": "cible"; "required": false; "isSignal": true; }; }, { "taille": "tailleChange"; "precedente": "precedente"; "suivante": "suivante"; }, never, never, true, never>;
+}
+
+/** Une paire terme et valeur. `description` nulle : « Non renseigne ». */
+interface ElementDeDescription {
+    /** Relie l'element a un gabarit `stDescription`. Par defaut : le terme. */
+    readonly cle?: string;
+    readonly terme: string;
+    readonly description: string | null;
+}
+/** Contexte d'un gabarit de description. */
+interface ContexteDeDescription {
+    readonly $implicit: ElementDeDescription;
+}
+/**
+ * Valeur riche d'un element : montant, date, valeur masquee.
+ *
+ * ```html
+ * <ng-template stDescription="iban" let-element>
+ *   <st-masked nature="iban" [valeur]="compte().iban" />
+ * </ng-template>
+ * ```
+ */
+declare class StDescription {
+    readonly cle: _angular_core.InputSignal<string>;
+    readonly gabarit: TemplateRef<ContexteDeDescription>;
+    static ngTemplateContextGuard(_directive: StDescription, _contexte: unknown): _contexte is ContexteDeDescription;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StDescription, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StDescription, "ng-template[stDescription]", never, { "cle": { "alias": "stDescription"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Liste de descriptions : les proprietes d'un objet, sur une page de detail.
+ *
+ * ```html
+ * <st-description-list [elements]="[
+ *   { terme: 'Reference', description: commande().reference },
+ *   { cle: 'montant', terme: 'Montant', description: null },
+ * ]">
+ *   <ng-template stDescription="montant"><st-money [valeur]="commande().montant" /></ng-template>
+ * </st-description-list>
+ * ```
+ *
+ * ⚠️ **Un vrai `dl`, rendu par le composant.** Le lecteur d'ecran annonce « liste de
+ * descriptions, 4 elements » et lit chaque terme avec sa valeur. Ecrits par
+ * l'application et projetes, `dt` et `dd` echapperaient aux styles du composant,
+ * et un `div` mal place rendrait la liste invalide.
+ *
+ * ⚠️ **Une valeur absente se dit** : « — » a l'ecran, « Non renseigne » au lecteur
+ * d'ecran. Une cellule vide ne distingue pas « aucun » de « pas encore charge ».
+ *
+ * En colonnes quand la place le permet, empile en dessous : la largeur est celle
+ * du CONTENEUR, pas de l'ecran — la meme liste dans une carte etroite s'empile
+ * aussi sur un grand ecran (UX-18).
+ */
+declare class StDescriptionList {
+    protected readonly libelles: _angular_core.Signal<_starterlib_ui.LibellesUi>;
+    readonly elements: _angular_core.InputSignal<readonly ElementDeDescription[]>;
+    private readonly gabarits;
+    protected readonly lignes: _angular_core.Signal<{
+        element: ElementDeDescription;
+        gabarit: TemplateRef<ContexteDeDescription> | null;
+    }[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StDescriptionList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StDescriptionList, "st-description-list", never, { "elements": { "alias": "elements"; "required": true; "isSignal": true; }; }, {}, ["gabarits"], never, true, never>;
+}
+
+/** Contexte d'un gabarit d'element de liste. */
+interface ContexteDElementDeListe<T> {
+    readonly $implicit: T;
+    readonly indice: number;
+}
+/**
+ * Rendu d'un element, type par `[stElementDeListeDe]` :
+ *
+ * ```html
+ * <ng-template stElementDeListe [stElementDeListeDe]="expeditions()" let-expedition>
+ *   <a [routerLink]="['/expeditions', expedition.id]">{{ expedition.reference }}</a>
+ * </ng-template>
+ * ```
+ */
+declare class StElementDeListe<T> {
+    /** Sert seulement au typage du contexte ; nom de l'attribut, d'ou l'absence d'alias. */
+    readonly stElementDeListeDe: _angular_core.InputSignal<readonly T[] | null | undefined>;
+    readonly gabarit: TemplateRef<ContexteDElementDeListe<T>>;
+    static ngTemplateContextGuard<T>(_directive: StElementDeListe<T>, _contexte: unknown): _contexte is ContexteDElementDeListe<T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StElementDeListe<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StElementDeListe<any>, "ng-template[stElementDeListe]", never, { "stElementDeListeDe": { "alias": "stElementDeListeDe"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Liste d'objets : expeditions, notifications, documents. La forme mobile d'un
+ * tableau (UX-5).
+ *
+ * ```html
+ * <st-list #liste etiquette="Mes expeditions" [elements]="expeditions()" cle="id">
+ *   <ng-template stElementDeListe [stElementDeListeDe]="expeditions()" let-expedition>…</ng-template>
+ * </st-list>
+ * <st-pagination mode="suite" [cible]="liste" … />
+ * ```
+ *
+ * ⚠️ **Un lien DANS l'element, jamais un element cliquable** (UX-3) : le lien a un
+ * nom, s'ouvre dans un onglet, et laisse les autres boutons de l'element
+ * atteignables.
+ *
+ * ⚠️ **`focus()` va au premier element AJOUTE** depuis le dernier affichage : apres
+ * « Afficher plus », la lecture reprend la ou la liste s'est allongee, et non en
+ * tete. Apres un filtre, la liste raccourcit, et le focus va au premier element.
+ *
+ * `track` par la cle : un rafraichissement garde le focus sur le bon element.
+ */
+declare class StList<T> {
+    private readonly element;
+    readonly elements: _angular_core.InputSignal<readonly T[]>;
+    /** Propriete qui identifie un element. */
+    readonly cle: _angular_core.InputSignal<keyof T & string>;
+    /** Nom de la liste, lu a l'entree. */
+    readonly etiquette: _angular_core.InputSignal<string | null>;
+    /** `ol` quand l'ordre a un sens : etapes, classement. */
+    readonly ordonnee: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Contenu en cours de remplacement : `aria-busy`. */
+    readonly chargement: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly gabarit: _angular_core.Signal<StElementDeListe<any> | undefined>;
+    private indiceDuPremierAjout;
+    protected readonly lignes: _angular_core.Signal<{
+        valeur: T;
+        indice: number;
+        identifiant: string;
+    }[]>;
+    constructor();
+    /** Focus sur le premier element ajoute, ou sur le premier. */
+    focus(options?: FocusOptions): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StList<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StList<any>, "st-list", never, { "elements": { "alias": "elements"; "required": true; "isSignal": true; }; "cle": { "alias": "cle"; "required": true; "isSignal": true; }; "etiquette": { "alias": "etiquette"; "required": false; "isSignal": true; }; "ordonnee": { "alias": "ordonnee"; "required": false; "isSignal": true; }; "chargement": { "alias": "chargement"; "required": false; "isSignal": true; }; }, {}, ["gabarit"], never, true, never>;
+}
+
+type SensDeTri = 'croissant' | 'decroissant';
+/**
+ * Bouton de tri d'une colonne, pose DANS l'en-tete : `<th><button stSortHeader>`.
+ *
+ * ⚠️ **Le bouton, pas l'en-tete cliquable** : un `th` n'est ni focalisable ni
+ * annonce comme actionnable. Et l'etat se porte par `aria-sort` sur le `th`, que
+ * `st-data-table` pose sur la SEULE colonne triee (FE-3).
+ *
+ * ⚠️ **Ne trie rien.** Il dit l'intention ; c'est le serveur qui trie, et le
+ * contrat actuel ne le fait pas (audit de la vague 4, V4-3). Trier la page
+ * affichee ferait croire a un tri de toute la liste.
+ *
+ * Une colonne non triee montre deux chevrons, pour se signaler triable sans
+ * attendre le survol ; l'icone est decorative, l'etat est lu par `aria-sort`.
+ */
+declare class StSortHeader {
+    readonly sens: _angular_core.InputSignal<SensDeTri | null>;
+    protected readonly icone: _angular_core.Signal<"menu" | "boite-vide" | "calendrier" | "cercle" | "cercle-coche" | "cercle-croix" | "cercle-info" | "chevron-bas" | "chevron-droite" | "chevron-gauche" | "chevron-haut" | "coche" | "copie" | "corbeille" | "croix" | "fichier" | "hors-ligne" | "lien-externe" | "oeil" | "oeil-barre" | "plus" | "rafraichir" | "recherche" | "serveur" | "televerser" | "tri" | "triangle-alerte" | "utilisateur">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StSortHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StSortHeader, "button[stSortHeader]", never, { "sens": { "alias": "sens"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** Une colonne, decrite en donnees. */
+interface ColonneDeTableau {
+    /** Identifie la colonne ; par defaut, la propriete affichee. */
+    readonly cle: string;
+    readonly libelle: string;
+    /** `fin` pour les nombres et les montants (UX-4). */
+    readonly alignement?: 'debut' | 'fin';
+    /** Seulement si le SERVEUR trie sur cette colonne (V4-3). */
+    readonly triable?: boolean;
+    /** Libelle lu mais non affiche : colonne d'actions. Jamais vide. */
+    readonly libelleMasque?: boolean;
+}
+interface TriDeTableau {
+    readonly cle: string;
+    readonly sens: SensDeTri;
+}
+type DensiteDeTableau = 'confortable' | 'compacte';
+/** Contexte d'un gabarit de cellule. */
+interface ContexteDeCellule<T> {
+    readonly $implicit: T;
+    readonly colonne: ColonneDeTableau;
+}
+/**
+ * Rendu d'une cellule, type par `[stCelluleDe]` :
+ *
+ * ```html
+ * <ng-template stCellule="montant" [stCelluleDe]="lignes()" let-ligne>
+ *   <st-money [valeur]="ligne.montant" />
+ * </ng-template>
+ * ```
+ */
+declare class StCellule<T> {
+    readonly cle: _angular_core.InputSignal<string>;
+    /** Sert seulement au typage du contexte ; nom de l'attribut, d'ou l'absence d'alias. */
+    readonly stCelluleDe: _angular_core.InputSignal<readonly T[] | null | undefined>;
+    readonly gabarit: TemplateRef<ContexteDeCellule<T>>;
+    static ngTemplateContextGuard<T>(_directive: StCellule<T>, _contexte: unknown): _contexte is ContexteDeCellule<T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StCellule<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StCellule<any>, "ng-template[stCellule]", never, { "cle": { "alias": "stCellule"; "required": true; "isSignal": true; }; "stCelluleDe": { "alias": "stCelluleDe"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Contenu du tableau vide : un `st-empty`, avec son action. */
+declare class StTableauVide {
+    readonly gabarit: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StTableauVide, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StTableauVide, "ng-template[stTableauVide]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Tableau de donnees, sur un `<table>` NATIF.
+ *
+ * ```html
+ * <st-data-table #tableau legende="Expeditions" [colonnes]="colonnes" [lignes]="lignes()"
+ *   cle="id" selectionnable [(selection)]="choisies" [chargement]="page.isLoading()">
+ *   <ng-template stCellule="reference" [stCelluleDe]="lignes()" let-ligne>
+ *     <a [routerLink]="['/expeditions', ligne.id]">{{ ligne.reference }}</a>
+ *   </ng-template>
+ *   <button stButton stActionsDeTableau (click)="exporter()">Exporter</button>
+ * </st-data-table>
+ * ```
+ *
+ * ⚠️ **Un tableau, pas une grille** (audit de la vague 4, V4-1). Le lecteur d'ecran
+ * sait parcourir un `<table>` de cellule en cellule ; une grille ARIA remplacerait
+ * ce parcours par les fleches, et rendrait les liens des cellules plus durs a
+ * atteindre. Ni Material, ni `CdkTable` : pas de pair dans le tronc.
+ *
+ * - **Legende obligatoire** (UX-1), et une colonne d'en-tete de ligne — la premiere
+ *   par defaut — pour que chaque cellule se lise avec sa ligne (UX-2).
+ * - **Zone de defilement nommee** : focalisable quand le tableau deborde (UX-6),
+ *   colonne figee sans masquer le focus (UX-7), en-tete fige seulement avec
+ *   `hauteurMax` (UX-8).
+ * - **Selection de la PAGE, par cle** (V4-4) : elle ne garde que les lignes encore
+ *   affichees, et se vide donc au changement de page.
+ * - **Tri PILOTE** : le tableau dit la demande et l'annonce, il ne reordonne
+ *   jamais les lignes (V4-3).
+ * - **Chargement** : squelette au premier, lignes gardees et `aria-busy` ensuite
+ *   (UX-11).
+ * - Export, actions de masse : zone `stActionsDeTableau`, et le SERVEUR fait le
+ *   travail (V4-5, SEC-4, SEC-5).
+ */
+declare class StDataTable<T> {
+    protected readonly libelles: _angular_core.Signal<_starterlib_ui.LibellesUi>;
+    readonly legende: _angular_core.InputSignal<string>;
+    /** Lue mais non affichee, quand un titre visible nomme deja le tableau. */
+    readonly legendeMasquee: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly colonnes: _angular_core.InputSignal<readonly ColonneDeTableau[]>;
+    readonly lignes: _angular_core.InputSignal<readonly T[]>;
+    /** Propriete qui identifie une ligne. Jamais l'indice (FE-1). */
+    readonly cle: _angular_core.InputSignal<keyof T & string>;
+    /** Colonne lue comme en-tete de chaque ligne. Par defaut : la premiere. */
+    readonly enTeteDeLigne: _angular_core.InputSignal<string | null>;
+    readonly premiereColonneFigee: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Hauteur maximale, `32rem` : l'en-tete se fige, le corps defile. */
+    readonly hauteurMax: _angular_core.InputSignal<string | null>;
+    readonly densite: _angular_core.InputSignal<DensiteDeTableau>;
+    readonly chargement: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly selectionnable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly selection: _angular_core.ModelSignal<readonly string[]>;
+    readonly tri: _angular_core.ModelSignal<TriDeTableau | null>;
+    /** Texte du tableau vide, sans gabarit `stTableauVide`. */
+    readonly texteVide: _angular_core.InputSignal<string | null>;
+    private readonly gabarits;
+    protected readonly gabaritVide: _angular_core.Signal<StTableauVide | undefined>;
+    private readonly zone;
+    protected readonly annonce: AnnonceLocale;
+    protected readonly deborde: _angular_core.WritableSignal<boolean>;
+    protected readonly largeurFigee: _angular_core.WritableSignal<number>;
+    protected readonly identifiants: {
+        readonly legende: `${string}-legende`;
+        readonly selection: `${string}-selection`;
+    };
+    protected readonly cleDEnTete: _angular_core.Signal<string>;
+    protected readonly cellules: _angular_core.Signal<{
+        colonne: ColonneDeTableau;
+        gabarit: TemplateRef<ContexteDeCellule<any>> | null;
+        enTete: boolean;
+    }[]>;
+    protected readonly rangees: _angular_core.Signal<{
+        valeur: T;
+        identifiant: string;
+        nom: string | null;
+        choisie: boolean;
+    }[]>;
+    protected readonly squelette: _angular_core.Signal<number[]>;
+    protected readonly nombreDeColonnes: _angular_core.Signal<number>;
+    protected readonly colonnesDeSquelette: _angular_core.Signal<number[]>;
+    protected readonly toutesChoisies: _angular_core.Signal<boolean>;
+    protected readonly quelquesChoisies: _angular_core.Signal<boolean>;
+    constructor();
+    /** Amene le focus sur le tableau : sa legende est lue (UX-13). */
+    focus(options?: FocusOptions): void;
+    protected sensDe(colonne: ColonneDeTableau): SensDeTri | null;
+    protected ariaSort(colonne: ColonneDeTableau): string | null;
+    protected trier(colonne: ColonneDeTableau): void;
+    protected basculerTout(): void;
+    protected basculer(identifiant: string): void;
+    protected texteDe(ligne: T, colonne: ColonneDeTableau): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StDataTable<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StDataTable<any>, "st-data-table", never, { "legende": { "alias": "legende"; "required": true; "isSignal": true; }; "legendeMasquee": { "alias": "legendeMasquee"; "required": false; "isSignal": true; }; "colonnes": { "alias": "colonnes"; "required": true; "isSignal": true; }; "lignes": { "alias": "lignes"; "required": true; "isSignal": true; }; "cle": { "alias": "cle"; "required": true; "isSignal": true; }; "enTeteDeLigne": { "alias": "enTeteDeLigne"; "required": false; "isSignal": true; }; "premiereColonneFigee": { "alias": "premiereColonneFigee"; "required": false; "isSignal": true; }; "hauteurMax": { "alias": "hauteurMax"; "required": false; "isSignal": true; }; "densite": { "alias": "densite"; "required": false; "isSignal": true; }; "chargement": { "alias": "chargement"; "required": false; "isSignal": true; }; "selectionnable": { "alias": "selectionnable"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "tri": { "alias": "tri"; "required": false; "isSignal": true; }; "texteVide": { "alias": "texteVide"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "tri": "triChange"; }, ["gabarits", "gabaritVide"], ["[stActionsDeTableau]"], true, never>;
+}
+
+/**
+ * Filtre actif, retirable : « Statut : Expediee ✕ ».
+ *
+ * ```html
+ * <button stFilterChip libelle="Statut : Expediee" (click)="retirer('statut')"></button>
+ * ```
+ *
+ * ⚠️ **Toute la puce est le bouton**, et son nom CONTIENT le texte visible —
+ * « Retirer le filtre Statut : Expediee » (WCAG 2.5.3) : une commande vocale
+ * « cliquer Statut » l'atteint. Une croix seule, a cote d'un texte inerte, serait
+ * une cible de quelques pixels sans nom.
+ */
+declare class StFilterChip {
+    private readonly libelles;
+    readonly libelle: _angular_core.InputSignal<string>;
+    protected readonly nom: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StFilterChip, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StFilterChip, "button[stFilterChip]", never, { "libelle": { "alias": "libelle"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Un filtre en vigueur, tel qu'il se lit : « Statut : Expediee ». */
+interface FiltreActif {
+    readonly cle: string;
+    readonly libelle: string;
+}
+/**
+ * Barre de filtres : les champs, puis les filtres en vigueur, retirables.
+ *
+ * ```html
+ * <st-filter-bar [filtresActifs]="actifs()" (retrait)="retirer($event)" (effacement)="effacer()">
+ *   <st-select libelle="Statut" [options]="statuts" [(value)]="statut" />
+ * </st-filter-bar>
+ * ```
+ *
+ * Un formulaire NOMME : repere « Filtres » dans la liste des reperes du lecteur
+ * d'ecran. Pas un repere `search` : un `st-search-field` pose dedans en porte deja
+ * un, et deux reperes imbriques se liraient en double.
+ *
+ * ⚠️ **Les filtres s'appliquent au changement**, par l'application : Entree dans
+ * un champ n'envoie rien, et ne recharge pas la page.
+ *
+ * ⚠️ **Retirer un filtre rend le focus a la puce suivante**, sinon a la
+ * precedente, sinon au formulaire ; « Effacer les filtres » le rend au formulaire
+ * (UX-14). Le focus ne tombe jamais sur le document, et le retrait s'annonce.
+ *
+ * ⚠️ **Dans l'adresse, des valeurs d'enumeration seulement** (SEC-2) : un texte
+ * cherche, un nom, un IBAN n'y vont pas. Le composant ne touche pas a l'adresse ;
+ * la regle est pour l'application qui le ferait.
+ */
+declare class StFilterBar {
+    protected readonly libelles: _angular_core.Signal<_starterlib_ui.LibellesUi>;
+    private readonly element;
+    private readonly injecteur;
+    /** Nom du formulaire. Par defaut : « Filtres ». */
+    readonly etiquette: _angular_core.InputSignal<string | null>;
+    readonly filtresActifs: _angular_core.InputSignal<readonly FiltreActif[]>;
+    readonly retrait: _angular_core.OutputEmitterRef<string>;
+    readonly effacement: _angular_core.OutputEmitterRef<void>;
+    protected readonly annonce: AnnonceLocale;
+    protected readonly identifiantActifs: string;
+    protected readonly etiquetteLue: _angular_core.Signal<string>;
+    protected retirer(filtre: FiltreActif, indice: number): void;
+    protected effacer(): void;
+    private apresLeRendu;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StFilterBar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StFilterBar, "st-filter-bar", never, { "etiquette": { "alias": "etiquette"; "required": false; "isSignal": true; }; "filtresActifs": { "alias": "filtresActifs"; "required": false; "isSignal": true; }; }, { "retrait": "retrait"; "effacement": "effacement"; }, never, ["*"], true, never>;
+}
+
+export { StCellule, StDataTable, StDescription, StDescriptionList, StElementDeListe, StFilterBar, StFilterChip, StList, StPagination, StSortHeader, StTableauVide };
+export type { ColonneDeTableau, ContexteDElementDeListe, ContexteDeCellule, ContexteDeDescription, DensiteDeTableau, ElementDeDescription, FiltreActif, Focalisable, ModeDePagination, SensDeTri, TriDeTableau };

package/types/starterlib-ui-navigation.d.ts

@@ -0,0 +1,104 @@
+import * as _angular_core from '@angular/core';
+
+type ModeDeNavigation = 'auto' | 'persistant' | 'modal';
+/**
+ * Navigation laterale : une region a cote du contenu sur grand ecran, un tiroir
+ * sur petit ecran.
+ *
+ * ```html
+ * <st-app-shell>
+ *   <button entete stButton [stSidenavToggle]="navigation">Menu</button>
+ *   <st-sidenav navigation #navigation etiquette="Navigation principale">
+ *     <a routerLink="/comptes">Comptes</a>
+ *   </st-sidenav>
+ *   …
+ * </st-app-shell>
+ * ```
+ *
+ * ⚠️ **Deux modes, jamais confondus.** Persistante, c'est une REGION de la page :
+ * aucun piege, rien a ouvrir. Modale, c'est un TIROIR, donc un `StDialog` — role,
+ * piegeage du focus, Echap, retour du focus au bouton — et non une region
+ * glissee par-dessus la page avec un peu de CSS, qui laisserait le clavier
+ * parcourir la page cachee dessous.
+ *
+ * ⚠️ **Elle porte son propre `<nav>`, et un seul a la fois.** Sur petit ecran,
+ * la region en ligne DISPARAIT quand le tiroir prend le relais : laissee en
+ * place, elle resterait un repere de navigation vide, que le lecteur d'ecran
+ * proposerait sans rien y trouver.
+ *
+ * Un lien suivi dans le tiroir le ferme : `StDialog` se ferme a toute navigation
+ * du routeur.
+ */
+declare class StSidenav {
+    private readonly injecteur;
+    private readonly libelles;
+    /**
+     * Nom du repere. `null` : « Navigation principale », du dictionnaire. A
+     * renseigner des qu'une page compte deux navigations, qui doivent se
+     * distinguer.
+     */
+    readonly etiquette: _angular_core.InputSignal<string | null>;
+    protected readonly etiquetteLue: _angular_core.Signal<string>;
+    /** `auto` : persistante sur grand ecran, tiroir en dessous. */
+    readonly mode: _angular_core.InputSignal<ModeDeNavigation>;
+    readonly identifiant: string;
+    private readonly ecranLarge;
+    /** Mode reellement applique. Lu par le bouton, qui ne s'affiche qu'en tiroir. */
+    readonly modeEffectif: _angular_core.Signal<"persistant" | "modal">;
+    private readonly ouvertInterne;
+    readonly ouvert: _angular_core.Signal<boolean>;
+    private readonly gabarit;
+    private reference;
+    private ouvertureEnCours;
+    private detruit;
+    /**
+     * Le service de dialogue, charge a la PREMIERE ouverture et garde ensuite.
+     * Rend `null` si le composant a ete detruit pendant l'attente.
+     *
+     * ⚠️ Le specificateur etant dans la carte d'importation de l'application
+     * federee, cet import dynamique resout vers l'INSTANCE PARTAGEE du point
+     * d'entree : le tiroir emploie le meme `StDialog`, le meme recouvrement et la
+     * meme pile que le reste de l'application. Un import dynamique ne dedouble
+     * rien ; il decale seulement le moment du telechargement.
+     *
+     * ⚠️ **Le controle de destruction est ICI, avant `injecteur.get`, et non chez
+     * l'appelant.** Un injecteur detruit ne rend pas `undefined` : il LEVE
+     * (NG0205). Le controle place apres la resolution du service arrivait donc
+     * trop tard, et une navigation pendant le chargement du module produisait un
+     * rejet non gere — invisible en developpement, remonte comme erreur
+     * applicative en production, puisque `basculer()` appelle `ouvrir()` sans
+     * attendre sa promesse.
+     */
+    private serviceDeDialogue;
+    constructor();
+    /**
+     * Ouvre le tiroir. Asynchrone depuis la 0.8.0 : le module du dialogue se
+     * charge a la demande. La promesse est tenue quand le tiroir est a l'ecran —
+     * un test l'attend, l'appelant ordinaire n'a rien a en faire.
+     */
+    ouvrir(): Promise<void>;
+    fermer(): void;
+    /** Reste synchrone : c'est ce que lit la liaison de clic du bouton. */
+    basculer(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StSidenav, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StSidenav, "st-sidenav", never, { "etiquette": { "alias": "etiquette"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Bouton qui ouvre la navigation en tiroir.
+ *
+ * ⚠️ **Masque quand la navigation est persistante.** Un bouton « Menu » qui ne
+ * fait rien, parce que la navigation est deja affichee a cote, est un arret de
+ * tabulation inutile et une promesse non tenue.
+ *
+ * ⚠️ `aria-expanded` suit l'ouverture du tiroir : sans lui, rien ne dit a qui
+ * n'en voit pas l'effet que le bouton a agi.
+ */
+declare class StSidenavToggle {
+    readonly stSidenavToggle: _angular_core.InputSignal<StSidenav>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StSidenavToggle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StSidenavToggle, "[stSidenavToggle]", never, { "stSidenavToggle": { "alias": "stSidenavToggle"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { StSidenav, StSidenavToggle };
+export type { ModeDeNavigation };

package/types/starterlib-ui-onglets.d.ts

@@ -0,0 +1,89 @@
+import * as _angular_core from '@angular/core';
+import * as i1 from '@angular/aria/tabs';
+
+/** Un onglet, decrit par l'appelant. */
+interface Onglet {
+    /** Identifiant stable, qui relie l'onglet a son `st-tab-panel`. */
+    readonly valeur: string;
+    readonly libelle: string;
+    readonly desactive?: boolean;
+}
+type ActivationDOnglet = 'manuelle' | 'automatique';
+type OrientationDOnglets = 'horizontale' | 'verticale';
+/**
+ * Onglets, sur les primitives `@angular/aria/tabs`.
+ *
+ * ```html
+ * <st-tabs etiquette="Compte" [onglets]="onglets" [(selection)]="onglet">
+ *   <st-tab-panel valeur="operations">
+ *     <ng-template stTabContent><app-operations /></ng-template>
+ *   </st-tab-panel>
+ *   <st-tab-panel valeur="virements">
+ *     <ng-template stTabContent><app-virements /></ng-template>
+ *   </st-tab-panel>
+ * </st-tabs>
+ * ```
+ *
+ * ⚠️ **La liste d'onglets est rendue par le composant, a partir de donnees**, et
+ * non projetee. Les primitives d'Aria relient un onglet a sa liste par
+ * INJECTION, et un contenu projete garde l'injecteur de l'endroit ou il est
+ * ecrit : c'est la lecon de `st-menu`, ou des elements projetes ne
+ * s'enregistraient jamais. Rendue ici, la liste est a coup sur sous la bonne
+ * primitive — et ses valeurs peuvent etre dites en francais.
+ *
+ * Les PANNEAUX, eux, sont projetes : ecrits directement sous `st-tabs`, leur
+ * injecteur parent est celui de l'hote, qui porte la primitive `Tabs`.
+ *
+ * ⚠️ **Activation manuelle par defaut.** En activation automatique, chaque
+ * fleche SELECTIONNE l'onglet atteint ; son contenu differe se rend, et charge
+ * ses donnees. Parcourir cinq onglets au clavier lancerait cinq requetes pour en
+ * lire un. En manuelle, les fleches deplacent le focus et Entree ou Espace
+ * selectionne. `automatique` reste le bon choix quand les panneaux sont deja la
+ * et s'affichent sans delai.
+ */
+declare class StTabs {
+    readonly onglets: _angular_core.InputSignal<readonly Onglet[]>;
+    /** Nom accessible de la liste : sans lui, plusieurs listes d'onglets se confondent. */
+    readonly etiquette: _angular_core.InputSignal<string>;
+    readonly activation: _angular_core.InputSignal<ActivationDOnglet>;
+    readonly orientation: _angular_core.InputSignal<OrientationDOnglets>;
+    /** Valeur de l'onglet selectionne. `undefined` : le premier onglet disponible. */
+    readonly selection: _angular_core.ModelSignal<string | undefined>;
+    /**
+     * ⚠️ Toujours un onglet selectionne. Le motif ARIA l'exige : une liste sans
+     * selection n'affiche aucun panneau, et la page parait vide sans raison.
+     */
+    protected readonly selectionEffective: _angular_core.Signal<string | undefined>;
+    protected readonly modeAria: _angular_core.Signal<"follow" | "explicit">;
+    protected readonly orientationAria: _angular_core.Signal<"vertical" | "horizontal">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StTabs, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StTabs, "st-tabs", never, { "onglets": { "alias": "onglets"; "required": true; "isSignal": true; }; "etiquette": { "alias": "etiquette"; "required": true; "isSignal": true; }; "activation": { "alias": "activation"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; }, never, ["*"], true, [{ directive: typeof i1.Tabs; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * Panneau d'un onglet, relie par sa `valeur`.
+ *
+ * ⚠️ La primitive d'Aria ne masque RIEN : elle pose `inert` sur le panneau
+ * inactif, ce qui le retire de l'arbre d'accessibilite et du clavier, mais le
+ * laisse a l'ecran. Sa documentation le dit en une ligne. Sans le style de ce
+ * composant, tous les panneaux s'affichaient empiles, muets et intouchables.
+ */
+declare class StTabPanel {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StTabPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StTabPanel, "st-tab-panel", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.TabPanel; inputs: { "value": "valeur"; }; outputs: {}; }]>;
+}
+
+/**
+ * Contenu differe d'un panneau : rendu a la premiere selection de son onglet.
+ *
+ * Un ecran a cinq onglets ne charge ainsi que celui qu'on regarde. Voir
+ * l'activation manuelle de `st-tabs` : c'est ce qui empeche qu'un simple
+ * parcours au clavier les rende tous.
+ */
+declare class StTabContent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StTabContent, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StTabContent, "ng-template[stTabContent]", never, {}, {}, never, never, true, [{ directive: typeof i1.TabContent; inputs: {}; outputs: {}; }]>;
+}
+
+export { StTabContent, StTabPanel, StTabs };
+export type { ActivationDOnglet, Onglet, OrientationDOnglets };