@starterlib/ui 0.6.0 → 0.7.0

package/types/starterlib-ui.d.ts

@@ -2,6 +2,7 @@ import * as _angular_core from '@angular/core';
 import { InjectionToken, Signal, Provider, DestroyRef, TemplateRef, Resource } from '@angular/core';
 import { Ton, Montant, TonSemantique, DateIso, PlageDeDates, DescriptionDeFichier, ChoixDeTheme, Langue, EtatDeBloc } from '@starterlib/util';
 export { ETATS_DE_BLOC, EtatDeBloc } from '@starterlib/util';
+import * as i1 from '@angular/router';
 import { ValidationError, FormValueControl, FormCheckboxControl } from '@angular/forms/signals';
 import * as _starterlib_ui from '@starterlib/ui';
 
@@ -49,6 +50,22 @@ interface LibellesUi {
     readonly filDAriane: string;
     readonly allerAuContenu: string;
     readonly navigationPrincipale: string;
+    /** Nom du repere de navigation du pied de page. */
+    readonly liensDuPied: string;
+    /** Barre de progression d'une navigation entre pages. */
+    readonly chargement: string;
+    /** Barre d'actions : texte du declencheur replie, et nom de son menu. */
+    readonly plus: string;
+    readonly plusDActions: string;
+    /** Parcours par etapes : nom de la liste, et etat de chaque etape. */
+    readonly etapes: string;
+    readonly etapeTerminee: string;
+    readonly etapeEnCours: string;
+    readonly etapeAVenir: string;
+    /** Tendance d'un indicateur chiffre, lue avant le texte de l'appelant. */
+    readonly tendanceEnHausse: string;
+    readonly tendanceEnBaisse: string;
+    readonly tendanceStable: string;
     /** Transverses */
     readonly theme: string;
     readonly themeSysteme: string;
@@ -322,19 +339,45 @@ type TonDIcone = Exclude<Ton, 'inverse'>;
  * Une icone est **decorative par defaut**. Regle de tri : si la retirer ne
  * retire aucune information, elle est decorative. Une icone posee a cote d'un
  * texte qui dit la meme chose l'est toujours.
+ *
+ * **Deux sprites, deux entrees.** Sans `sprite`, l'icone vient du sprite du
+ * socle (`CHEMIN_DU_SPRITE`, fourni par la coquille), et `nom` est contraint au
+ * type `NomDIcone` : une faute de frappe echoue a la compilation. Avec `sprite`
+ * — le chemin ABSOLU et hache que le manifeste d'un remote annonce —, l'icone
+ * est METIER : `nomMetier` accepte n'importe quel identifiant du sprite donne.
+ *
+ * ```html
+ * <st-icon nom="coche" />
+ * <st-icon [sprite]="manifeste.sprite" nomMetier="virement-instantane" />
+ * ```
+ *
+ * ⚠️ Un `nomMetier` sans `sprite` est refuse : le sprite du socle ne le
+ * contient pas, et une reference `use` qui ne resout pas ne rend RIEN, sans
+ * erreur. Mieux vaut echouer au rendu, une fois, avec la marche a suivre.
  */
 declare class StIcon {
     private readonly cheminDuSprite;
-    readonly nom: _angular_core.InputSignal<"copie" | "boite-vide" | "calendrier" | "cercle" | "cercle-coche" | "cercle-croix" | "cercle-info" | "chevron-bas" | "chevron-droite" | "chevron-gauche" | "chevron-haut" | "coche" | "corbeille" | "croix" | "fichier" | "hors-ligne" | "lien-externe" | "menu" | "oeil" | "oeil-barre" | "plus" | "rafraichir" | "recherche" | "serveur" | "televerser" | "tri" | "triangle-alerte" | "utilisateur">;
+    /** Nom d'un symbole du sprite du socle. Obligatoire sans `sprite`. */
+    readonly nom: _angular_core.InputSignal<"copie" | "boite-vide" | "calendrier" | "cercle" | "cercle-coche" | "cercle-croix" | "cercle-info" | "chevron-bas" | "chevron-droite" | "chevron-gauche" | "chevron-haut" | "coche" | "corbeille" | "croix" | "fichier" | "hors-ligne" | "lien-externe" | "menu" | "oeil" | "oeil-barre" | "plus" | "rafraichir" | "recherche" | "serveur" | "televerser" | "tri" | "triangle-alerte" | "utilisateur" | null>;
+    /**
+     * Chemin absolu d'un sprite METIER, hache, tel que le manifeste du remote le
+     * fournit. Jamais un chemin nu comme `/assets/icones/metier.svg` : le cache
+     * d'un an sur empreinte servirait l'ancien sprite apres un deploiement.
+     */
+    readonly sprite: _angular_core.InputSignal<string | null>;
+    /** Nom d'un symbole du sprite METIER. Hors du type ferme du socle, et l'exige. */
+    readonly nomMetier: _angular_core.InputSignal<string | null>;
     readonly taille: _angular_core.InputSignal<TailleDIcone>;
     readonly ton: _angular_core.InputSignal<TonDIcone>;
     /** `null` : l'icone est decorative et reste muette pour les lecteurs. */
     readonly etiquette: _angular_core.InputSignal<string | null>;
     protected readonly estDecorative: _angular_core.Signal<boolean>;
+    /** Seul le sprite du socle a des chevrons a miroiter : un sprite metier dessine les siens. */
     protected readonly directionnelle: _angular_core.Signal<boolean>;
     protected readonly reference: _angular_core.Signal<string>;
+    private nomDuSocle;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StIcon, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StIcon, "st-icon", never, { "nom": { "alias": "nom"; "required": true; "isSignal": true; }; "taille": { "alias": "taille"; "required": false; "isSignal": true; }; "ton": { "alias": "ton"; "required": false; "isSignal": true; }; "etiquette": { "alias": "etiquette"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StIcon, "st-icon", never, { "nom": { "alias": "nom"; "required": false; "isSignal": true; }; "sprite": { "alias": "sprite"; "required": false; "isSignal": true; }; "nomMetier": { "alias": "nomMetier"; "required": false; "isSignal": true; }; "taille": { "alias": "taille"; "required": false; "isSignal": true; }; "ton": { "alias": "ton"; "required": false; "isSignal": true; }; "etiquette": { "alias": "etiquette"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -425,6 +468,8 @@ declare class StSpinner {
 }
 
 type TonDeProgression = Extract<Ton, 'primaire' | 'succes' | 'danger'>;
+/** `fine` : un trait de l'echelle des epaisseurs, pour une barre posee sous un en-tete. */
+type EpaisseurDeProgression = 'normale' | 'fine';
 /**
  * Barre de progression, determinee ou indeterminee.
  *
@@ -439,6 +484,7 @@ declare class StProgress {
     /** Obligatoire : une barre sans nom accessible n'apprend rien. */
     readonly etiquette: _angular_core.InputSignal<string>;
     readonly ton: _angular_core.InputSignal<TonDeProgression>;
+    readonly epaisseur: _angular_core.InputSignal<EpaisseurDeProgression>;
     /** Texte lu a la place du pourcentage quand celui-ci n'est pas parlant. */
     readonly texteDeValeur: _angular_core.InputSignal<string | null>;
     protected readonly estIndeterminee: _angular_core.Signal<boolean>;
@@ -446,7 +492,7 @@ declare class StProgress {
     protected readonly valeurAnnoncee: _angular_core.Signal<number | null>;
     protected readonly pourcentage: _angular_core.Signal<number>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StProgress, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StProgress, "st-progress", never, { "valeur": { "alias": "valeur"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "etiquette": { "alias": "etiquette"; "required": true; "isSignal": true; }; "ton": { "alias": "ton"; "required": false; "isSignal": true; }; "texteDeValeur": { "alias": "texteDeValeur"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StProgress, "st-progress", never, { "valeur": { "alias": "valeur"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "etiquette": { "alias": "etiquette"; "required": true; "isSignal": true; }; "ton": { "alias": "ton"; "required": false; "isSignal": true; }; "epaisseur": { "alias": "epaisseur"; "required": false; "isSignal": true; }; "texteDeValeur": { "alias": "texteDeValeur"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 type VarianteDeSquelette = 'texte' | 'tableau' | 'carte';
@@ -603,6 +649,40 @@ declare class StButtonGroup {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StButtonGroup, "st-button-group", never, { "etiquette": { "alias": "etiquette"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "attache": { "alias": "attache"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Barre d'actions d'un formulaire, collee en BAS de la zone de defilement.
+ *
+ * ```html
+ * <form (submit)="envoyer()">
+ *   …
+ *   <st-form-actions>
+ *     <a debut stLink routerLink="..">Annuler</a>
+ *     <button stButton type="button">Enregistrer le brouillon</button>
+ *     <button stButton type="submit" variante="primaire">Valider le virement</button>
+ *   </st-form-actions>
+ * </form>
+ * ```
+ *
+ * ⚠️ **`sticky`, JAMAIS `fixed`.** Un element fixe sort du flux : a 200 %
+ * d'echelle il recouvre les derniers champs, et dans une vue embarquee il se
+ * pose sous la barre du systeme. Collee, la barre reste dans le document —
+ * elle suit le formulaire, cede la place a son pied, et respecte la zone sure
+ * du bas de l'ecran (`env(safe-area-inset-bottom)`).
+ *
+ * ⚠️ **L'ordre du document est l'ordre visuel.** Rien n'est inverse par le
+ * style : l'action principale s'ecrit en dernier, elle se lit en dernier et se
+ * tabule en dernier — la ou la personne arrive apres avoir relu ses champs.
+ * L'emplacement `debut` accueille ce qui part a l'oppose (un retour, une
+ * annulation), et vient en premier dans les deux ordres.
+ *
+ * Une seule action principale par formulaire, et elle est un vrai
+ * `type="submit"` : Entree dans un champ l'envoie.
+ */
+declare class StFormActions {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StFormActions, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StFormActions, "st-form-actions", never, {}, {}, never, ["[debut]", "*"], true, never>;
+}
+
 /**
  * Valeur technique courte et copiable : identifiant de trace, reference
  * d'operation, code d'erreur.
@@ -810,6 +890,54 @@ declare class StCount {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StCount, "st-count", never, { "valeur": { "alias": "valeur"; "required": true; "isSignal": true; }; "ton": { "alias": "ton"; "required": false; "isSignal": true; }; "abregerAuDela": { "alias": "abregerAuDela"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type SensDeTendance = 'hausse' | 'baisse' | 'stable';
+/** La tendance d'un indicateur, decrite par l'appelant. Le texte est deja traduit. */
+interface TendanceDeStat {
+    readonly sens: SensDeTendance;
+    /** Ce qui s'affiche a cote de la fleche : « +2,4 % sur un mois ». */
+    readonly texte: string;
+    /**
+     * ⚠️ Choisi par l'appelant, et non deduit du sens : une hausse des frais est
+     * un `danger`, une hausse de l'epargne un `succes`. Le socle ne sait pas
+     * lequel des deux il affiche.
+     */
+    readonly ton?: TonSemantique;
+}
+/**
+ * Indicateur chiffre : un libelle, une valeur, et sa tendance.
+ *
+ * ```html
+ * <st-stat libelle="Solde disponible" [tendance]="{ sens: 'hausse', texte: '+2,4 % sur un mois', ton: 'succes' }">
+ *   <st-money [valeur]="solde" />
+ * </st-stat>
+ * ```
+ *
+ * La valeur est PROJETEE : c'est `st-money`, `st-count` ou `st-date` qui la
+ * formate dans la langue courante, et le socle n'a pas a redire comment.
+ *
+ * ⚠️ **La tendance se lit par un texte ET une icone, jamais par la couleur
+ * seule.** Le texte de l'appelant porte deja le signe ; l'icone porte le sens ;
+ * et un mot lisible par lecteur seulement — « en hausse », « en baisse »,
+ * « stable » — precede le texte, parce qu'un lecteur d'ecran ne lit pas un
+ * chevron.
+ *
+ * Le libelle vient AVANT la valeur dans le document, comme dans une phrase :
+ * « Solde disponible, 1 234,50 € ». A l'ecran, il se pose au-dessus, en petit.
+ */
+declare class StStat {
+    private readonly libelles;
+    /** Texte visible, deja traduit. */
+    readonly libelle: _angular_core.InputSignal<string>;
+    readonly tendance: _angular_core.InputSignal<TendanceDeStat | null>;
+    /** Precision sous la valeur : la periode, la source. Jamais une information critique. */
+    readonly precision: _angular_core.InputSignal<string | null>;
+    protected readonly icone: _angular_core.Signal<"copie" | "boite-vide" | "calendrier" | "cercle" | "cercle-coche" | "cercle-croix" | "cercle-info" | "chevron-bas" | "chevron-droite" | "chevron-gauche" | "chevron-haut" | "coche" | "corbeille" | "croix" | "fichier" | "hors-ligne" | "lien-externe" | "menu" | "oeil" | "oeil-barre" | "plus" | "rafraichir" | "recherche" | "serveur" | "televerser" | "tri" | "triangle-alerte" | "utilisateur" | null>;
+    protected readonly tonDeTendance: _angular_core.Signal<TonSemantique>;
+    protected readonly sensLu: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StStat, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StStat, "st-stat", never, { "libelle": { "alias": "libelle"; "required": true; "isSignal": true; }; "tendance": { "alias": "tendance"; "required": false; "isSignal": true; }; "precision": { "alias": "precision"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /**
  * ⚠️ `primaire` et non « info » : les deux designaient deja la meme couleur
  * d'accent, et rien ne distinguait un statut « info » d'un statut « primaire »
@@ -1192,15 +1320,21 @@ declare class StSkipLink {
 }
 
 /**
- * Coquille d'une application : lien d'evitement, en-tete, navigation, contenu
- * principal, pied de page.
+ * Propriete posee sur `<html>` avec la hauteur mesuree de l'en-tete collant.
+ * La feuille de `@starterlib/tokens` la lit dans `scroll-padding-block-start`.
+ */
+declare const PROPRIETE_HAUTEUR_ENTETE = "--st-hauteur-entete";
+/**
+ * Coquille d'une application : lien d'evitement, en-tete, bannieres globales,
+ * navigation, contenu principal, pied de page.
  *
  * ```html
  * <st-app-shell>
- *   <ng-container entete>…</ng-container>
- *   <ng-container navigation>…</ng-container>
+ *   <st-header entete>…</st-header>
+ *   <st-offline-banner bannieres … />
+ *   <st-sidenav navigation>…</st-sidenav>
  *   <router-outlet />
- *   <ng-container pied>…</ng-container>
+ *   <st-footer pied>…</st-footer>
  * </st-app-shell>
  * ```
  *
@@ -1223,11 +1357,28 @@ declare class StSkipLink {
  * `st-sidenav` qui porte ce repere. Pose ici aussi, il s'imbriquerait — le
  * lecteur d'ecran annoncerait « navigation, navigation » — et resterait vide
  * sur petit ecran, quand le contenu part dans le tiroir.
+ *
+ * ⚠️ **L'en-tete est collant, et la coquille en MESURE la hauteur** (WCAG
+ * 2.4.11). Un element collant recouvre ce que le navigateur fait defiler vers
+ * lui : sans decalage, chaque arret de tabulation qui remonte se cache SOUS
+ * l'en-tete. La hauteur n'est pas connue d'avance — elle change avec le zoom,
+ * la taille de police, le repli des actions — d'ou un `ResizeObserver`, qui
+ * pose `--st-hauteur-entete` sur `<html>` ; la feuille de jetons la lit dans
+ * `scroll-padding-block-start`. Sans navigateur (rendu serveur, jsdom), rien
+ * n'est mesure et le repli de la feuille vaut zero.
+ *
+ * L'emplacement `bannieres` est un conteneur sans role, entre l'en-tete et le
+ * corps : chaque banniere porte sa propre region vivante. Jamais `fixed`.
  */
 declare class StAppShell {
+    private readonly document;
+    private readonly entete;
+    private observateur;
     protected readonly identifiantDuContenu = "contenu-principal";
+    constructor();
+    private mesurerLEntete;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StAppShell, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StAppShell, "st-app-shell", never, {}, {}, never, ["[entete]", "[navigation]", "*", "[pied]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StAppShell, "st-app-shell", never, {}, {}, never, ["[entete]", "[bannieres]", "[navigation]", "*", "[pied]"], true, never>;
 }
 
 /**
@@ -1261,6 +1412,286 @@ declare class StHeader {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StHeader, "st-header", never, {}, {}, never, ["[bascule]", "[marque]", "*"], true, never>;
 }
 
+/**
+ * Contenu du pied de page : mentions, version, statut.
+ *
+ * ```html
+ * <st-app-shell>
+ *   …
+ *   <st-footer pied>
+ *     <a mentions stLink routerLink="/mentions">Mentions legales</a>
+ *     <a mentions stLink routerLink="/aide">Aide</a>
+ *     <span version>Version 1.4.2</span>
+ *     <st-status-pill statut="ok" libelle="Services disponibles" icone="cercle-coche" ton="succes" />
+ *   </st-footer>
+ * </st-app-shell>
+ * ```
+ *
+ * ⚠️ **Aucun repere `contentinfo` ici** : le `footer` de `st-app-shell` le porte
+ * deja, et un second en ferait annoncer deux. Ce composant est le CONTENU du
+ * pied. Ses mentions, elles, forment un repere de navigation nomme — c'est ce
+ * qui permet a un lecteur d'ecran de sauter directement aux liens du pied, et
+ * de les distinguer de la navigation principale.
+ *
+ * ⚠️ L'aide se pose ICI, dans les mentions, et au meme endroit sur le gabarit
+ * pleine page : WCAG 3.2.6 exige qu'un mecanisme d'aide garde sa place d'une
+ * page a l'autre.
+ *
+ * ⚠️ La `version` est un texte affiche : jamais un secret de construction, ni
+ * une empreinte de commit qui dirait a un attaquant exactement quel code tourne.
+ * Le numero de version publie suffit au support.
+ *
+ * Le statut est un `st-status-pill` projete, reconnu a son ELEMENT : `statut`
+ * est le nom d'une de ses entrees, et un attribut nu du meme nom lui passerait
+ * une chaine vide. Icone et texte, jamais la couleur seule ; un autre element
+ * prend sa place par `ngProjectAs="st-status-pill"`.
+ */
+declare class StFooter {
+    private readonly libelles;
+    /** Nom du repere des mentions. `null` : le texte vient du dictionnaire. */
+    readonly etiquette: _angular_core.InputSignal<string | null>;
+    protected readonly etiquetteLue: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StFooter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StFooter, "st-footer", never, { "etiquette": { "alias": "etiquette"; "required": false; "isSignal": true; }; }, {}, never, ["[mentions]", "[version]", "st-status-pill"], true, never>;
+}
+
+/**
+ * Lien de navigation principale, pose en attribut sur un `<a>` natif :
+ * `routerLink`, etat actif, icone et pastille, en un seul geste.
+ *
+ * ```html
+ * <st-sidenav navigation>
+ *   <a stNavLink="/comptes"><st-icon nom="fichier" />Comptes</a>
+ *   <a [stNavLink]="['/messages']">
+ *     Messages<span class="st-vh">, 5 non lus</span>
+ *     <st-badge [valeur]="5" />
+ *   </a>
+ * </st-sidenav>
+ * ```
+ *
+ * **Ou il vit, et pourquoi.** Dans le tronc, a cote de `st-breadcrumb` et non
+ * dans `ui/interactions` avec `st-sidenav` : les points d'entree se decoupent
+ * par pair lourd, et ce lien n'en traine aucun — `@angular/router` est deja
+ * exige par le tronc. Une SPA qui rend sa navigation sans tiroir n'a pas a
+ * charger Aria pour un lien.
+ *
+ * ⚠️ **L'etat actif est porte par `aria-current="page"`**, pose par le routeur,
+ * et c'est sur lui que la feuille se branche — jamais sur la seule couleur : le
+ * lien courant se lit a sa graisse et au marqueur sur son bord de depart, qui
+ * survivent au contraste force. La classe `st-nav-link--actif` accompagne, pour
+ * qui veut y accrocher un style.
+ *
+ * ⚠️ La pastille est `aria-hidden` : le compte qu'elle affiche doit entrer
+ * dans le nom du lien, par un texte lisible par lecteur seulement (`.st-vh`),
+ * compose par l'appelant.
+ *
+ * Un composant et non une directive, parce qu'il RANGE ce qu'on lui projette :
+ * l'icone devant, la pastille derriere, le libelle entre les deux, sans que
+ * l'ordre d'ecriture compte.
+ */
+declare class StNavLink {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StNavLink, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StNavLink, "a[stNavLink]", never, {}, {}, never, ["st-icon", "*", "st-badge"], true, [{ directive: typeof i1.RouterLink; inputs: { "routerLink": "stNavLink"; "queryParams": "queryParams"; "fragment": "fragment"; "queryParamsHandling": "queryParamsHandling"; "replaceUrl": "replaceUrl"; "state": "state"; }; outputs: {}; }, { directive: typeof i1.RouterLinkActive; inputs: { "routerLinkActiveOptions": "optionsDActivation"; }; outputs: {}; }]>;
+}
+
+/**
+ * En-tete de page : fil d'Ariane, titre de niveau 1, actions, onglets.
+ * Premier enfant de la page d'un remote.
+ *
+ * ```html
+ * <st-page-header precision="Trente derniers jours">
+ *   <st-breadcrumb [maillons]="maillons" />
+ *   Mes operations
+ *   <button stButton variante="primaire" actions>Exporter</button>
+ *   <st-tabs etiquette="Vue" [onglets]="onglets" [(selection)]="vue" />
+ * </st-page-header>
+ * ```
+ *
+ * ⚠️ Le fil et les onglets se reconnaissent a leur ELEMENT (`st-breadcrumb`,
+ * `st-tabs`), pas a un attribut : `onglets` est deja le nom d'une entree de
+ * `st-tabs`, et un attribut nu du meme nom lui passerait une chaine vide. Un
+ * autre element prend leur place par `ngProjectAs="st-tabs"`.
+ *
+ * ⚠️ **Un seul `h1` par page, et c'est lui.** `StNavigation` de
+ * `@starterlib/core` y pose le focus apres chaque changement de route — son
+ * selecteur par defaut vise `h1, [role="heading"][aria-level="1"]` —, et le
+ * lecteur d'ecran lit alors la phrase qui dit ou l'on vient d'arriver. Une
+ * page qui titre ailleurs perd ce focus en silence (F14 du plan de la
+ * coquille) ; une page qui titre deux fois le rend ambigu.
+ *
+ * ⚠️ Le fil d'Ariane vient AVANT le titre dans l'ordre du document, comme dans
+ * la lecture : on sait d'ou l'on vient avant de lire ou l'on est. Les onglets
+ * viennent apres : ils decoupent le contenu de la page, pas son identite.
+ *
+ * Il ne rend rien lui-meme d'autre que `st-page-title` : le fil, les actions et
+ * les onglets sont ceux de la page, projetes.
+ */
+declare class StPageHeader {
+    /** Texte secondaire sous le titre. Jamais porteur d'information critique. */
+    readonly precision: _angular_core.InputSignal<string | null>;
+    /** Cible d'un `aria-labelledby` : une region se nomme par son titre. */
+    readonly identifiant: _angular_core.InputSignal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StPageHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StPageHeader, "st-page-header", never, { "precision": { "alias": "precision"; "required": false; "isSignal": true; }; "identifiant": { "alias": "identifiant"; "required": false; "isSignal": true; }; }, {}, never, ["st-breadcrumb", "*", "[actions]", "st-tabs"], true, never>;
+}
+
+/**
+ * Barre fine de progression d'une navigation, sous l'en-tete.
+ *
+ * ```html
+ * <st-header entete>…</st-header>
+ * <st-route-progress entete [actif]="navigation.enCours()" />
+ * ```
+ *
+ * ⚠️ **Rien avant `delaiMs`** (200 ms par defaut). Une navigation qui aboutit
+ * en 80 ms n'a pas a clignoter : la barre apparaitrait et disparaitrait avant
+ * d'etre lue, et l'oeil retiendrait un scintillement a chaque clic. Passe le
+ * delai, elle reste jusqu'a la fin, meme si celle-ci survient juste apres.
+ *
+ * ⚠️ **Aucun `aria-busy` sur `main`**, et ce n'est pas un oubli : `aria-busy`
+ * fait TAIRE les mises a jour de la region qu'il marque, y compris les annonces
+ * de la page qui arrive. La barre est un `progressbar` indetermine et nomme :
+ * c'est ce qu'un lecteur d'ecran trouve s'il la cherche, sans etre interrompu.
+ *
+ * Elle n'occupe aucune hauteur : posee en absolu sous son hote, elle ne fait
+ * pas sauter la page en apparaissant.
+ */
+declare class StRouteProgress {
+    private readonly libelles;
+    /** Vrai entre le debut et la fin d'une navigation. */
+    readonly actif: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Delai avant d'afficher quoi que ce soit. Zero : tout de suite. */
+    readonly delaiMs: _angular_core.InputSignal<number>;
+    /** `null` : « Chargement », du dictionnaire. */
+    readonly etiquette: _angular_core.InputSignal<string | null>;
+    protected readonly etiquetteLue: _angular_core.Signal<string>;
+    private readonly visibleInterne;
+    protected readonly visible: _angular_core.Signal<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StRouteProgress, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StRouteProgress, "st-route-progress", never, { "actif": { "alias": "actif"; "required": false; "isSignal": true; }; "delaiMs": { "alias": "delaiMs"; "required": false; "isSignal": true; }; "etiquette": { "alias": "etiquette"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Gabarit pleine page : connexion, mot de passe oublie, mode embarque.
+ *
+ * ```html
+ * <st-auth-shell>
+ *   <st-logo entete nom="Banque Exemple" clair="/ui/socle/assets/logo.svg" />
+ *   <st-lang-switch entete … />
+ *   <st-theme-toggle entete … />
+ *   <st-banner banniere ton="neutre" [message]="motifDeRedirection()" />
+ *   <router-outlet />
+ *   <a pied stLink routerLink="/mentions">Mentions legales</a>
+ *   <a pied stLink routerLink="/aide">Aide</a>
+ * </st-auth-shell>
+ * ```
+ *
+ * Ce que `st-app-shell` a, et qu'il n'a PAS, volontairement : ni navigation
+ * laterale (rien a naviguer avant d'etre connecte), ni avertissement
+ * d'inactivite (pas de session a fermer), ni messages ephemeres (rien ne se
+ * passe en arriere-plan). Ce qu'il garde : le lien d'evitement — une page de
+ * connexion se traverse aussi au clavier —, un `main` etroit centre a la
+ * mesure de lecture, et les trois reperes, une fois chacun.
+ *
+ * ⚠️ **L'aide au meme endroit que dans l'application** (WCAG 3.2.6) : dans le
+ * pied, comme dans `st-footer`. Une personne qui a trouve l'aide en bas de page
+ * une fois doit la retrouver la, connectee ou non.
+ *
+ * L'emplacement `banniere`, en tete du `main`, recoit le MOTIF d'arrivee :
+ * session expiree, fermee ailleurs, mot de passe reinitialise. Un `st-banner`
+ * neutre y suffit ; jamais un message ephemere, qui serait manque.
+ */
+declare class StAuthShell {
+    protected readonly identifiantDuContenu = "contenu-principal";
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StAuthShell, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StAuthShell, "st-auth-shell", never, {}, {}, never, ["[entete]", "[banniere]", "*", "[pied]"], true, never>;
+}
+
+/** Une etape d'un parcours, decrite par l'appelant. Le texte est deja traduit. */
+interface EtapeDeParcours {
+    readonly libelle: string;
+}
+type EtatDEtape = 'faite' | 'courante' | 'a-venir';
+/**
+ * Parcours par etapes : ou l'on en est, ce qui est fait, ce qui reste.
+ *
+ * ```html
+ * <st-stepper [etapes]="etapes" [etape]="indice()" />
+ * ```
+ *
+ * ⚠️ Une liste ORDONNEE : l'ordre des etapes est l'information, et le lecteur
+ * d'ecran annonce « 2 sur 4 » de lui-meme. L'etape courante porte
+ * `aria-current="step"`, ce qui est exactement le mot de la specification.
+ *
+ * ⚠️ **L'etat de chaque etape se lit par sa forme ET par un texte**, jamais par
+ * la couleur seule : une coche pour ce qui est fait, un numero plein pour
+ * l'etape en cours, un numero cercle pour ce qui vient ; et un mot lisible par
+ * lecteur seulement — « terminee », « en cours », « a venir » — apres chaque
+ * libelle. Sous contraste force, il ne reste que la forme et le mot.
+ *
+ * Il n'est PAS interactif : revenir a une etape est une decision du parcours,
+ * qui la rend par un vrai lien ou un vrai bouton dans la page. Un indicateur
+ * cliquable promettrait un retour que tous les parcours n'autorisent pas.
+ */
+declare class StStepper {
+    private readonly libelles;
+    readonly etapes: _angular_core.InputSignal<readonly EtapeDeParcours[]>;
+    /** Indice de l'etape en cours, a partir de zero. */
+    readonly etape: _angular_core.InputSignal<number>;
+    /** Nom de la liste. `null` : « Etapes », du dictionnaire. */
+    readonly etiquette: _angular_core.InputSignal<string | null>;
+    protected readonly etiquetteLue: _angular_core.Signal<string>;
+    protected readonly lignes: _angular_core.Signal<{
+        libelle: string;
+        numero: number;
+        etat: EtatDEtape;
+        texteDEtat: string;
+    }[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StStepper, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StStepper, "st-stepper", never, { "etapes": { "alias": "etapes"; "required": true; "isSignal": true; }; "etape": { "alias": "etape"; "required": true; "isSignal": true; }; "etiquette": { "alias": "etiquette"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Ligne de reglage : un libelle, une description, et le controle qui les suit.
+ *
+ * ```html
+ * <st-settings-row libelle="Alertes par SMS" description="Un SMS a chaque virement sortant.">
+ *   <st-switch libelle="Activer" [(checked)]="sms" />
+ * </st-settings-row>
+ * ```
+ *
+ * ⚠️ **La ligne est un GROUPE nomme et decrit, et non une etiquette.** Le
+ * controle projete garde son propre nom — celui de son `libelle`, ou un
+ * `aria-label` pour un element natif — et la ligne l'enveloppe d'un
+ * `role="group"` relie a son libelle par `aria-labelledby` et a sa description
+ * par `aria-describedby`. En entrant dans le groupe, le lecteur d'ecran lit le
+ * libelle, puis la description, puis le controle : « Alertes par SMS, groupe,
+ * Un SMS a chaque virement sortant, Activer, interrupteur, desactive ».
+ *
+ * Pourquoi pas un `label for` : la plupart des controles du socle portent deja
+ * leur etiquette, et un controle non natif (un groupe segmente, un declencheur
+ * de menu) n'en accepte aucun. Le groupe, lui, marche pour tous, sans que la
+ * ligne ait a connaitre ce qu'on lui projette.
+ *
+ * ⚠️ Un reglage s'applique IMMEDIATEMENT (c'est le sens de `st-switch`) ou
+ * s'envoie avec un formulaire : la ligne ne tranche pas, le controle le dit.
+ */
+declare class StSettingsRow {
+    /** Texte visible, deja traduit : le socle ne traduit rien. */
+    readonly libelle: _angular_core.InputSignal<string>;
+    /** Ce que le reglage fait, en une phrase. Reliee au groupe par `aria-describedby`. */
+    readonly description: _angular_core.InputSignal<string | null>;
+    /** Identifiants du libelle et de la description, cibles des attributs ARIA. */
+    readonly identifiants: {
+        readonly libelle: `${string}-libelle`;
+        readonly description: `${string}-description`;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StSettingsRow, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StSettingsRow, "st-settings-row", never, { "libelle": { "alias": "libelle"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 type TonDeBanniere = TonSemantique;
 /**
  * Message de page, persistant jusqu'a ce qu'on le ferme.
@@ -3015,5 +3446,5 @@ declare class StChargement {
 /** Toutes les directives de gabarit, a importer d'un coup. */
 declare const GABARITS_D_ETAT: readonly [typeof StSucces, typeof StErreur, typeof StVide, typeof StHorsLigne, typeof StChargement];
 
-export { AnnonceLocale, CHEMIN_DU_SPRITE, ContratDeChamp, ControleDeSaisie, FUSEAU_PAR_DEFAUT, GABARITS_D_ETAT, IDENTIFIANT_DU_CONTENU_PRINCIPAL, LIBELLES_EN, LIBELLES_FR, NOMS_DICONE, REGION_VIVANTE_PARENTE, ST_LIBELLES, ST_LOCALE, StAppShell, StAvatar, StBadge, StBanner, StBreadcrumb, StButton, StButtonGroup, StCalendar, StCard, StCellule, StChargement, StCheckbox, StCode, StControleDeChamp, StCopyButton, StCount, StDataTable, StDate, StDescription, StDescriptionList, StDivider, StElementDeListe, StEmpty, StErreur, StError, StErrorSummary, StFieldset, StFileUpload, StFilterBar, StFilterChip, StFormField, StHeader, StHeading, StHorsLigne, StIbanField, StIcon, StIconButton, StInlineMessage, StInput, StLangSwitch, StLink, StList, StLogo, StMasked, StMoney, StOfflineBanner, StOtpField, StPageTitle, StPagination, StPasswordField, StPhoneField, StProgress, StRadioGroup, StRelativeTime, StSearchField, StSection, StSelect, StSkeleton, StSkipLink, StSortHeader, StSpinner, StState, StStatusPill, StSucces, StSwitch, StTableauVide, StTag, StText, StTextarea, StThemeToggle, StTimer, StVide, cleDeFichier, copierDansLePressePapiers, erreurDate, erreurIban, erreurPlageDeDates, erreurTelephone, erreursDeFichiers, exempleDeDate, filtrerOptions, formaterDuree, fournirCheminDuSprite, fusionnerErreurs, messageDErreur, motifLocal, normaliserPourRecherche, pressePapiersDisponible, provideStarterUi };
-export type { BornesDeDate, ColonneDeTableau, ConfigurationUi, ContexteDElementDeListe, ContexteDeCellule, ContexteDeDescription, DensiteDeTableau, DispositionDeChamp, ElementDeDescription, ElementDeSaisie, ErreurAffichable, EtatDeTeleversementAffiche, FiltreActif, Focalisable, FormatDeDate, GraisseDeTexte, IssueDeCopie, LibellesUi, MaillonDeFil, ModeDePagination, NiveauDeTitre, NomDIcone, OptionDeListe, OptionRadio, OrientationDeSeparateur, ReglesDeFichiers, ReliefDeCarte, RembourrageDeCarte, RemplissageDeTelephone, SensDeTri, TailleDIcone, TailleDeBouton, TailleDeSpinner, TailleDeTitre, TonDIcone, TonDeBadge, TonDeBanniere, TonDeMessage, TonDeProgression, TonDeSpinner, TonDeStatut, TriDeTableau, TypeDeSaisie, TypeMasque, UsageDuMotDePasse, VarianteDErreur, VarianteDeBouton, VarianteDeBoutonIcone, VarianteDeLien, VarianteDeSquelette, VarianteDeTexte };
+export { AnnonceLocale, CHEMIN_DU_SPRITE, ContratDeChamp, ControleDeSaisie, FUSEAU_PAR_DEFAUT, GABARITS_D_ETAT, IDENTIFIANT_DU_CONTENU_PRINCIPAL, LIBELLES_EN, LIBELLES_FR, NOMS_DICONE, PROPRIETE_HAUTEUR_ENTETE, REGION_VIVANTE_PARENTE, ST_LIBELLES, ST_LOCALE, StAppShell, StAuthShell, StAvatar, StBadge, StBanner, StBreadcrumb, StButton, StButtonGroup, StCalendar, StCard, StCellule, StChargement, StCheckbox, StCode, StControleDeChamp, StCopyButton, StCount, StDataTable, StDate, StDescription, StDescriptionList, StDivider, StElementDeListe, StEmpty, StErreur, StError, StErrorSummary, StFieldset, StFileUpload, StFilterBar, StFilterChip, StFooter, StFormActions, StFormField, StHeader, StHeading, StHorsLigne, StIbanField, StIcon, StIconButton, StInlineMessage, StInput, StLangSwitch, StLink, StList, StLogo, StMasked, StMoney, StNavLink, StOfflineBanner, StOtpField, StPageHeader, StPageTitle, StPagination, StPasswordField, StPhoneField, StProgress, StRadioGroup, StRelativeTime, StRouteProgress, StSearchField, StSection, StSelect, StSettingsRow, StSkeleton, StSkipLink, StSortHeader, StSpinner, StStat, StState, StStatusPill, StStepper, StSucces, StSwitch, StTableauVide, StTag, StText, StTextarea, StThemeToggle, StTimer, StVide, cleDeFichier, copierDansLePressePapiers, erreurDate, erreurIban, erreurPlageDeDates, erreurTelephone, erreursDeFichiers, exempleDeDate, filtrerOptions, formaterDuree, fournirCheminDuSprite, fusionnerErreurs, messageDErreur, motifLocal, normaliserPourRecherche, pressePapiersDisponible, provideStarterUi };
+export type { BornesDeDate, ColonneDeTableau, ConfigurationUi, ContexteDElementDeListe, ContexteDeCellule, ContexteDeDescription, DensiteDeTableau, DispositionDeChamp, ElementDeDescription, ElementDeSaisie, EpaisseurDeProgression, ErreurAffichable, EtapeDeParcours, EtatDEtape, EtatDeTeleversementAffiche, FiltreActif, Focalisable, FormatDeDate, GraisseDeTexte, IssueDeCopie, LibellesUi, MaillonDeFil, ModeDePagination, NiveauDeTitre, NomDIcone, OptionDeListe, OptionRadio, OrientationDeSeparateur, ReglesDeFichiers, ReliefDeCarte, RembourrageDeCarte, RemplissageDeTelephone, SensDeTendance, SensDeTri, TailleDIcone, TailleDeBouton, TailleDeSpinner, TailleDeTitre, TendanceDeStat, TonDIcone, TonDeBadge, TonDeBanniere, TonDeMessage, TonDeProgression, TonDeSpinner, TonDeStatut, TriDeTableau, TypeDeSaisie, TypeMasque, UsageDuMotDePasse, VarianteDErreur, VarianteDeBouton, VarianteDeBoutonIcone, VarianteDeLien, VarianteDeSquelette, VarianteDeTexte };