@starterlib/ui 0.1.1 → 0.3.0

package/fesm2022/starterlib-ui.mjs

@@ -1,8 +1,137 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, computed, ChangeDetectionStrategy, Component, ElementRef, DestroyRef, model, output, signal, LOCALE_ID, afterNextRender, isDevMode } from '@angular/core';
+import { InjectionToken, inject, LOCALE_ID, signal, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, ElementRef, DestroyRef, output, model, afterNextRender, effect, TemplateRef, Directive, contentChild, linkedSignal, isDevMode } from '@angular/core';
+import { masquerIban, masquerTelephone, masquerCarte, quatreDerniers, formaterIban, formaterMontant, CHOIX_DE_THEME, LANGUES } from '@starterlib/util';
+export { ETATS_DE_BLOC } from '@starterlib/util';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
-import { masquerIban, masquerTelephone, masquerCarte, quatreDerniers, formaterIban, formaterMontant } from '@starterlib/util';
+import { RouterLink } from '@angular/router';
 
+/**
+ * Defaut francais, identique mot pour mot aux textes ecrits en dur jusqu'a la
+ * 0.1.1 : une application qui ne fournit rien ne change pas de comportement.
+ *
+ * Il existe pour que le socle reste utilisable sans i18n, pas pour dispenser
+ * d'en avoir une. Une application bilingue DOIT fournir son propre dictionnaire
+ * sous forme de signal — sinon la moitie de l'interface reste en francais quand
+ * l'utilisateur passe a l'anglais, et rien ne le signale.
+ */
+/**
+ * ⚠️ Les textes AFFICHES portent leurs accents. La regle « sans accents » du
+ * depot vise la documentation et les commentaires, jamais ce que lit la
+ * personne qui utilise l'application : « Reessayer » ou « Aucun resultat » sont
+ * des fautes a l'ecran, et une synthese vocale les prononce de travers. La 0.2.0
+ * les a livres ainsi. Les accents s'ecrivent en sequence d'echappement, comme
+ * l'apostrophe typographique, pour garder la source en ASCII.
+ */
+const LIBELLES_FR = {
+    chargementEnCours: 'Chargement en cours',
+    erreurSurvenue: 'Une erreur est survenue',
+    aucunResultat: 'Aucun r\u00e9sultat',
+    horsConnexion: 'Hors connexion',
+    reessayer: 'R\u00e9essayer',
+    identifiantDeTrace: 'Identifiant de trace',
+    codeTechnique: 'Code',
+    copier: 'Copier',
+    copieEffectuee: 'Copi\u00e9',
+    copieImpossible: 'Copie impossible. S\u00e9lectionnez le texte pour le copier.',
+    afficher: 'Afficher',
+    masquer: 'Masquer',
+    valeurMasqueeANouveau: 'Valeur masqu\u00e9e \u00e0 nouveau',
+    natureIban: 'IBAN',
+    natureCarte: 'carte',
+    natureTelephone: 'num\u00e9ro',
+    seTerminantPar: (nature, quatreDerniers) => `${nature} se terminant par ${quatreDerniers}`,
+    nouvelleFenetre: '(nouvelle fen\u00eatre)',
+    retirer: 'Retirer',
+    filDAriane: 'Fil d\u2019Ariane',
+    allerAuContenu: 'Aller au contenu',
+    navigationPrincipale: 'Navigation principale',
+    theme: 'Th\u00e8me',
+    themeSysteme: 'Syst\u00e8me',
+    themeClair: 'Clair',
+    themeSombre: 'Sombre',
+    langue: 'Langue',
+    reessayerDans: (duree) => `Nouvel essai possible dans ${duree}`,
+    reessayerMaintenant: 'Vous pouvez r\u00e9essayer.',
+    sessionBientotExpiree: 'Votre session va expirer',
+    sessionExpireDans: (duree) => `Sans activit\u00e9 de votre part, la session sera ferm\u00e9e dans ${duree}.`,
+    resterConnecte: 'Rester connect\u00e9',
+    seDeconnecter: 'Se d\u00e9connecter',
+    fermerLeMessage: 'Fermer le message',
+    confirmer: 'Confirmer',
+    annuler: 'Annuler',
+    recopierPourConfirmer: (texte) => `Pour confirmer, recopiez \u00ab\u202f${texte}\u202f\u00bb`,
+    aLInstant: "a l'instant",
+};
+/** Traduction anglaise du meme dictionnaire. La paire est obligatoire. */
+const LIBELLES_EN = {
+    chargementEnCours: 'Loading',
+    erreurSurvenue: 'Something went wrong',
+    aucunResultat: 'No results',
+    horsConnexion: 'Offline',
+    reessayer: 'Try again',
+    identifiantDeTrace: 'Trace identifier',
+    codeTechnique: 'Code',
+    copier: 'Copy',
+    copieEffectuee: 'Copied',
+    copieImpossible: 'Could not copy. Select the text to copy it.',
+    afficher: 'Show',
+    masquer: 'Hide',
+    valeurMasqueeANouveau: 'Value hidden again',
+    natureIban: 'IBAN',
+    natureCarte: 'card',
+    natureTelephone: 'number',
+    seTerminantPar: (nature, quatreDerniers) => `${nature} ending in ${quatreDerniers}`,
+    nouvelleFenetre: '(opens in a new window)',
+    retirer: 'Remove',
+    filDAriane: 'Breadcrumb',
+    allerAuContenu: 'Skip to content',
+    navigationPrincipale: 'Main navigation',
+    theme: 'Theme',
+    themeSysteme: 'System',
+    themeClair: 'Light',
+    themeSombre: 'Dark',
+    langue: 'Language',
+    reessayerDans: (duree) => `You can try again in ${duree}`,
+    reessayerMaintenant: 'You can try again now.',
+    sessionBientotExpiree: 'Your session is about to expire',
+    sessionExpireDans: (duree) => `Without any activity, you will be signed out in ${duree}.`,
+    resterConnecte: 'Stay signed in',
+    seDeconnecter: 'Sign out',
+    fermerLeMessage: 'Dismiss message',
+    confirmer: 'Confirm',
+    annuler: 'Cancel',
+    recopierPourConfirmer: (texte) => `To confirm, type \u201c${texte}\u201d`,
+    aLInstant: 'just now',
+};
+
+/**
+ * Locale de formatage des montants, des dates et des nombres, **sous forme de
+ * signal**.
+ *
+ * ⚠️ Pourquoi pas `LOCALE_ID` : il est fige au demarrage de l'application. Or
+ * l'ADR 0014 du backend exige de changer de langue SANS recharger — la coquille
+ * detient la langue, et tout doit basculer d'un coup. Un composant qui lit
+ * `LOCALE_ID` continuerait d'afficher « 1 234,50 € » dans une interface passee
+ * a l'anglais.
+ *
+ * Le defaut lit `LOCALE_ID` : une application qui ne fournit rien garde le
+ * comportement d'avant, simplement sans pouvoir changer de langue a chaud.
+ */
+const ST_LOCALE = new InjectionToken('st.locale', {
+    providedIn: 'root',
+    factory: () => {
+        const locale = inject(LOCALE_ID);
+        return signal(locale).asReadonly();
+    },
+});
+/**
+ * Textes portes par les composants eux-memes, sous forme de signal pour la
+ * meme raison que la locale.
+ */
+const ST_LIBELLES = new InjectionToken('st.libelles', {
+    providedIn: 'root',
+    factory: () => signal(LIBELLES_FR).asReadonly(),
+});
 /**
  * Chemin du sprite SVG des icones, **fourni par l'application**.
  *
@@ -38,6 +167,31 @@ const CHEMIN_DU_SPRITE = new InjectionToken('st.chemin-du-sprite', {
 function fournirCheminDuSprite(chemin) {
     return { provide: CHEMIN_DU_SPRITE, useValue: chemin };
 }
+/**
+ * Configure `@starterlib/ui` pour toute l'application.
+ *
+ * ⚠️ A appeler dans l'HOTE uniquement. Dans un assemblage federe, un remote qui
+ * la rappellerait poserait un second jeu de valeurs dans son injecteur de
+ * route : deux locales, deux dictionnaires, et la moitie de l'ecran resterait
+ * dans l'ancienne langue apres une bascule.
+ */
+function provideStarterUi(configuration) {
+    const fournisseurs = [fournirCheminDuSprite(configuration.cheminDuSprite)];
+    if (configuration.locale !== undefined) {
+        fournisseurs.push({ provide: ST_LOCALE, useValue: enSignal(configuration.locale) });
+    }
+    if (configuration.libelles !== undefined) {
+        fournisseurs.push({ provide: ST_LIBELLES, useValue: enSignal(configuration.libelles) });
+    }
+    if (configuration.fuseau !== undefined) {
+        fournisseurs.push({ provide: FUSEAU_PAR_DEFAUT, useValue: configuration.fuseau });
+    }
+    return fournisseurs;
+}
+/** Une valeur figee reste acceptee : toute application ne change pas de langue. */
+function enSignal(valeur) {
+    return typeof valeur === 'function' ? valeur : signal(valeur).asReadonly();
+}
 /**
  * Marque la presence d'une region vivante possedee par un ancetre, en pratique
  * le composant `st-state`.
@@ -59,13 +213,114 @@ const FUSEAU_PAR_DEFAUT = new InjectionToken('st.fuseau-par-defaut', {
     factory: () => 'Europe/Paris',
 });
 
-const ETATS_DE_BLOC = [
-    'chargement',
-    'erreur',
-    'vide',
-    'hors-ligne',
-    'succes',
-];
+/**
+ * Les cinq etats de bloc vivent dans `@starterlib/util` depuis la 0.2.0 : le
+ * noyau en a besoin pour deriver l'etat d'une ressource, et il ne doit pas
+ * dependre des composants. Reexportes ici pour que `@starterlib/ui` reste le
+ * seul import necessaire a qui n'ecrit que de l'interface.
+ */
+
+/**
+ * Meme raison que `StAnnonceur` du noyau, qu'`ui` ne peut pas importer : la
+ * region doit etre observee avant de recevoir son texte, et un texte identique
+ * repose dans la meme tache ne produit aucune mutation, donc aucune annonce.
+ */
+const DELAI_D_ANNONCE_MS = 120;
+/** Au-dela, le message est retire : relu plus tard hors contexte, il tromperait. */
+const DUREE_D_AFFICHAGE_MS = 3000;
+/**
+ * Texte d'une petite region vivante propre a un composant.
+ *
+ * ```ts
+ * protected readonly annonce = new AnnonceLocale(inject(DestroyRef));
+ * // gabarit : <span class="st-vh" aria-live="polite">{{ annonce.texte() }}</span>
+ * ```
+ *
+ * ⚠️ La region doit exister VIDE dans le gabarit des la creation du composant ;
+ * cette classe ne gere que son texte.
+ *
+ * ⚠️ Nee de deux defauts de `st-code` en 0.2.0 : un `onDestroy` enregistre a
+ * chaque clic, et une confirmation identique reposee dans la meme tache — la
+ * seconde copie n'etait jamais annoncee.
+ */
+class AnnonceLocale {
+    contenu = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contenu" }] : /* istanbul ignore next */ []));
+    minuteries = [];
+    texte = this.contenu.asReadonly();
+    constructor(destruction) {
+        destruction.onDestroy(() => {
+            this.arreter();
+        });
+    }
+    annoncer(message) {
+        this.arreter();
+        this.contenu.set('');
+        this.minuteries.push(setTimeout(() => {
+            this.contenu.set(message);
+            this.minuteries.push(setTimeout(() => {
+                this.contenu.set('');
+            }, DUREE_D_AFFICHAGE_MS));
+        }, DELAI_D_ANNONCE_MS));
+    }
+    arreter() {
+        for (const minuterie of this.minuteries)
+            clearTimeout(minuterie);
+        this.minuteries = [];
+    }
+}
+
+/**
+ * Ecrit un texte dans le presse-papiers.
+ *
+ * ⚠️ Trois issues, et non deux. `navigator.clipboard` n'existe qu'en contexte
+ * securise (HTTPS, ou `localhost`) : absent, c'est `indisponible`. Present, il
+ * peut encore refuser — permission, document sans focus — et c'est `refusee`.
+ * Confondre les deux conduit a cacher un bouton qui aurait fonctionne au clic
+ * suivant, ou a laisser croire qu'une copie a eu lieu.
+ *
+ * ⚠️ Ce qui entre dans le presse-papiers en sort difficilement : les
+ * gestionnaires d'historique le conservent, et la synchronisation entre
+ * appareils le propage. Jamais de secret — mot de passe, jeton, code a usage
+ * unique — et une donnee sensible seulement a la demande explicite de la
+ * personne.
+ */
+async function copierDansLePressePapiers(document, texte) {
+    const presse = document.defaultView?.navigator.clipboard;
+    if (presse === undefined)
+        return 'indisponible';
+    try {
+        await presse.writeText(texte);
+        return 'copie';
+    }
+    catch {
+        return 'refusee';
+    }
+}
+/** Vrai si le navigateur expose un presse-papiers ecrivable par script. */
+function pressePapiersDisponible(document) {
+    return document.defaultView?.navigator.clipboard !== undefined;
+}
+
+/**
+ * Formate une duree en secondes : « 45 s », « 2 min 05 s ».
+ *
+ * Unites courtes de la langue donnee, par `Intl.NumberFormat` : l'ordre, les
+ * espaces et les abreviations suivent la locale, sans table maison.
+ */
+function formaterDuree(totalEnSecondes, locale) {
+    const total = Math.max(0, Math.round(totalEnSecondes));
+    const unite = (valeur, nom) => new Intl.NumberFormat(locale, {
+        style: 'unit',
+        unit: nom,
+        unitDisplay: 'short',
+        // « 2 min 05 s » : les secondes sur deux chiffres quand des minutes precedent.
+        minimumIntegerDigits: nom === 'second' && total >= 60 ? 2 : 1,
+    }).format(valeur);
+    if (total < 60)
+        return unite(total, 'second');
+    return `${unite(Math.floor(total / 60), 'minute')} ${unite(total % 60, 'second')}`;
+}
 
 /**
  * Icone tiree d'un sprite SVG servi en meme origine.
@@ -85,7 +340,7 @@ class StIcon {
     ...(ngDevMode ? [{ debugName: "nom" }] : /* istanbul ignore next */ []));
     taille = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "taille" }] : /* istanbul ignore next */ []));
-    ton = input('courant', /* @ts-ignore */
+    ton = input('neutre', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ton" }] : /* istanbul ignore next */ []));
     /** `null` : l'icone est decorative et reste muette pour les lecteurs. */
     etiquette = input(null, /* @ts-ignore */
@@ -95,7 +350,7 @@ class StIcon {
     reference = computed(() => `${this.cheminDuSprite}#${this.nom()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "reference" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIcon, isStandalone: true, selector: "st-icon", inputs: { nom: { classPropertyName: "nom", publicName: "nom", isSignal: true, isRequired: true, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-ton": "ton()" }, classAttribute: "st-icon" }, ngImport: i0, template: "<svg\n  [attr.aria-hidden]=\"estDecorative() ? 'true' : null\"\n  [attr.role]=\"estDecorative() ? null : 'img'\"\n  [attr.aria-label]=\"etiquette()\"\n  focusable=\"false\"\n>\n  <use [attr.href]=\"reference()\" />\n</svg>\n", styles: [":host{display:inline-flex;flex:none;vertical-align:-.125em;color:inherit}svg{inline-size:var(--st-icone-taille, 1.25em);block-size:var(--st-icone-taille, 1.25em)}:host([data-taille=xs]) svg{--st-icone-taille: .75em}:host([data-taille=sm]) svg{--st-icone-taille: 1em}:host([data-taille=lg]) svg{--st-icone-taille: 1.5em}:host([data-taille=xl]) svg{--st-icone-taille: 2em}:host([data-ton=discret]){color:var(--st-couleur-texte-discret)}:host([data-ton=primaire]){color:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-avertissement)}:host([data-ton=danger]){color:var(--st-couleur-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIcon, isStandalone: true, selector: "st-icon", inputs: { nom: { classPropertyName: "nom", publicName: "nom", isSignal: true, isRequired: true, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-ton": "ton()" }, classAttribute: "st-icon" }, ngImport: i0, template: "<svg\n  [attr.aria-hidden]=\"estDecorative() ? 'true' : null\"\n  [attr.role]=\"estDecorative() ? null : 'img'\"\n  [attr.aria-label]=\"etiquette()\"\n  focusable=\"false\"\n>\n  <use [attr.href]=\"reference()\" />\n</svg>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;flex:none;vertical-align:-.125em;color:inherit}svg{inline-size:var(--st-icone-taille, 1.25em);block-size:var(--st-icone-taille, 1.25em)}:host([data-taille=xs]) svg{--st-icone-taille: .75em}:host([data-taille=sm]) svg{--st-icone-taille: 1em}:host([data-taille=lg]) svg{--st-icone-taille: 1.5em}:host([data-taille=xl]) svg{--st-icone-taille: 2em}:host([data-ton=discret]){color:var(--st-couleur-texte-discret)}:host([data-ton=primaire]){color:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-avertissement)}:host([data-ton=danger]){color:var(--st-couleur-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIcon, decorators: [{
             type: Component,
@@ -103,7 +358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'st-icon',
                         '[attr.data-taille]': 'taille()',
                         '[attr.data-ton]': 'ton()',
-                    }, template: "<svg\n  [attr.aria-hidden]=\"estDecorative() ? 'true' : null\"\n  [attr.role]=\"estDecorative() ? null : 'img'\"\n  [attr.aria-label]=\"etiquette()\"\n  focusable=\"false\"\n>\n  <use [attr.href]=\"reference()\" />\n</svg>\n", styles: [":host{display:inline-flex;flex:none;vertical-align:-.125em;color:inherit}svg{inline-size:var(--st-icone-taille, 1.25em);block-size:var(--st-icone-taille, 1.25em)}:host([data-taille=xs]) svg{--st-icone-taille: .75em}:host([data-taille=sm]) svg{--st-icone-taille: 1em}:host([data-taille=lg]) svg{--st-icone-taille: 1.5em}:host([data-taille=xl]) svg{--st-icone-taille: 2em}:host([data-ton=discret]){color:var(--st-couleur-texte-discret)}:host([data-ton=primaire]){color:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-avertissement)}:host([data-ton=danger]){color:var(--st-couleur-danger)}\n"] }]
+                    }, template: "<svg\n  [attr.aria-hidden]=\"estDecorative() ? 'true' : null\"\n  [attr.role]=\"estDecorative() ? null : 'img'\"\n  [attr.aria-label]=\"etiquette()\"\n  focusable=\"false\"\n>\n  <use [attr.href]=\"reference()\" />\n</svg>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;flex:none;vertical-align:-.125em;color:inherit}svg{inline-size:var(--st-icone-taille, 1.25em);block-size:var(--st-icone-taille, 1.25em)}:host([data-taille=xs]) svg{--st-icone-taille: .75em}:host([data-taille=sm]) svg{--st-icone-taille: 1em}:host([data-taille=lg]) svg{--st-icone-taille: 1.5em}:host([data-taille=xl]) svg{--st-icone-taille: 2em}:host([data-ton=discret]){color:var(--st-couleur-texte-discret)}:host([data-ton=primaire]){color:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-avertissement)}:host([data-ton=danger]){color:var(--st-couleur-danger)}\n"] }]
         }], propDecorators: { nom: [{ type: i0.Input, args: [{ isSignal: true, alias: "nom", required: true }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }] } });
 
 /**
@@ -153,8 +408,7 @@ class StText {
     ...(ngDevMode ? [{ debugName: "variante" }] : /* istanbul ignore next */ []));
     graisse = input('normale', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "graisse" }] : /* istanbul ignore next */ []));
-    enLigne = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "enLigne" }] : /* istanbul ignore next */ []));
+    enLigne = input(false, { ...(ngDevMode ? { debugName: "enLigne" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Nombre de lignes au-dela duquel le texte est coupe.
      *
@@ -164,7 +418,7 @@ class StText {
     tronquerA = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tronquerA" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StText, isStandalone: true, selector: "st-text", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, graisse: { classPropertyName: "graisse", publicName: "graisse", isSignal: true, isRequired: false, transformFunction: null }, enLigne: { classPropertyName: "enLigne", publicName: "enLigne", isSignal: true, isRequired: false, transformFunction: null }, tronquerA: { classPropertyName: "tronquerA", publicName: "tronquerA", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-graisse": "graisse()", "attr.data-en-ligne": "enLigne() ? \"\" : null", "attr.data-tronque": "tronquerA() === null ? null : \"\"", "style.--st-text-lignes": "tronquerA()" }, classAttribute: "st-text" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte);max-inline-size:70ch}:host([data-en-ligne]){display:inline;max-inline-size:none}:host([data-variante=corps-sm]){font-size:var(--st-taille-sm)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=legende]){font-size:var(--st-taille-xs);color:var(--st-couleur-texte-discret)}:host([data-variante=mono]){font-family:var(--st-police-mono);font-size:var(--st-taille-sm)}:host([data-graisse=moyenne]){font-weight:var(--st-graisse-moyenne)}:host([data-graisse=semi]){font-weight:var(--st-graisse-semi)}:host([data-tronque]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--st-text-lignes, 2);line-clamp:var(--st-text-lignes, 2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StText, isStandalone: true, selector: "st-text", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, graisse: { classPropertyName: "graisse", publicName: "graisse", isSignal: true, isRequired: false, transformFunction: null }, enLigne: { classPropertyName: "enLigne", publicName: "enLigne", isSignal: true, isRequired: false, transformFunction: null }, tronquerA: { classPropertyName: "tronquerA", publicName: "tronquerA", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-graisse": "graisse()", "attr.data-en-ligne": "enLigne() ? \"\" : null", "attr.data-tronque": "tronquerA() === null ? null : \"\"", "style.--st-text-lignes": "tronquerA()" }, classAttribute: "st-text" }, ngImport: i0, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte);max-inline-size:70ch}:host([data-en-ligne]){display:inline;max-inline-size:none}:host([data-variante=corps-sm]){font-size:var(--st-taille-sm)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=legende]){font-size:var(--st-taille-xs);color:var(--st-couleur-texte-discret)}:host([data-variante=mono]){font-family:var(--st-police-mono);font-size:var(--st-taille-sm)}:host([data-graisse=moyenne]){font-weight:var(--st-graisse-moyenne)}:host([data-graisse=semi]){font-weight:var(--st-graisse-semi)}:host([data-tronque]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--st-text-lignes, 2);line-clamp:var(--st-text-lignes, 2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StText, decorators: [{
             type: Component,
@@ -175,7 +429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-en-ligne]': 'enLigne() ? "" : null',
                         '[attr.data-tronque]': 'tronquerA() === null ? null : ""',
                         '[style.--st-text-lignes]': 'tronquerA()',
-                    }, template: "<ng-content />\n", styles: [":host{display:block;margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte);max-inline-size:70ch}:host([data-en-ligne]){display:inline;max-inline-size:none}:host([data-variante=corps-sm]){font-size:var(--st-taille-sm)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=legende]){font-size:var(--st-taille-xs);color:var(--st-couleur-texte-discret)}:host([data-variante=mono]){font-family:var(--st-police-mono);font-size:var(--st-taille-sm)}:host([data-graisse=moyenne]){font-weight:var(--st-graisse-moyenne)}:host([data-graisse=semi]){font-weight:var(--st-graisse-semi)}:host([data-tronque]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--st-text-lignes, 2);line-clamp:var(--st-text-lignes, 2)}\n"] }]
+                    }, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte);max-inline-size:70ch}:host([data-en-ligne]){display:inline;max-inline-size:none}:host([data-variante=corps-sm]){font-size:var(--st-taille-sm)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=legende]){font-size:var(--st-taille-xs);color:var(--st-couleur-texte-discret)}:host([data-variante=mono]){font-family:var(--st-police-mono);font-size:var(--st-taille-sm)}:host([data-graisse=moyenne]){font-weight:var(--st-graisse-moyenne)}:host([data-graisse=semi]){font-weight:var(--st-graisse-semi)}:host([data-tronque]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--st-text-lignes, 2);line-clamp:var(--st-text-lignes, 2)}\n"] }]
         }], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], graisse: [{ type: i0.Input, args: [{ isSignal: true, alias: "graisse", required: false }] }], enLigne: [{ type: i0.Input, args: [{ isSignal: true, alias: "enLigne", required: false }] }], tronquerA: [{ type: i0.Input, args: [{ isSignal: true, alias: "tronquerA", required: false }] }] } });
 
 const TAILLE_PAR_NIVEAU = {
@@ -209,7 +463,7 @@ class StHeading {
     tailleEffective = computed(() => this.taille() ?? TAILLE_PAR_NIVEAU[this.niveau()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tailleEffective" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StHeading, isStandalone: true, selector: "st-heading", inputs: { niveau: { classPropertyName: "niveau", publicName: "niveau", isSignal: true, isRequired: true, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, identifiant: { classPropertyName: "identifiant", publicName: "identifiant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "heading" }, properties: { "attr.aria-level": "niveau()", "attr.id": "identifiant()", "attr.data-taille": "tailleEffective()" }, classAttribute: "st-heading" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;margin:0 0 var(--st-espacement-3);font-family:var(--st-police-base);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);text-wrap:balance}:host([data-taille=lg]){font-size:var(--st-taille-lg)}:host([data-taille=xl]){font-size:var(--st-taille-xl)}:host([data-taille=\"2xl\"]){font-size:var(--st-taille-2xl)}:host([data-taille=\"3xl\"]){font-size:var(--st-taille-3xl)}:host([data-taille=\"4xl\"]){font-size:var(--st-taille-4xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StHeading, isStandalone: true, selector: "st-heading", inputs: { niveau: { classPropertyName: "niveau", publicName: "niveau", isSignal: true, isRequired: true, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, identifiant: { classPropertyName: "identifiant", publicName: "identifiant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "heading" }, properties: { "attr.aria-level": "niveau()", "attr.id": "identifiant()", "attr.data-taille": "tailleEffective()" }, classAttribute: "st-heading" }, ngImport: i0, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;margin:0 0 var(--st-espacement-3);font-family:var(--st-police-base);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);text-wrap:balance}:host([data-taille=lg]){font-size:var(--st-taille-lg)}:host([data-taille=xl]){font-size:var(--st-taille-xl)}:host([data-taille=\"2xl\"]){font-size:var(--st-taille-2xl)}:host([data-taille=\"3xl\"]){font-size:var(--st-taille-3xl)}:host([data-taille=\"4xl\"]){font-size:var(--st-taille-4xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StHeading, decorators: [{
             type: Component,
@@ -219,7 +473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.aria-level]': 'niveau()',
                         '[attr.id]': 'identifiant()',
                         '[attr.data-taille]': 'tailleEffective()',
-                    }, template: "<ng-content />\n", styles: [":host{display:block;margin:0 0 var(--st-espacement-3);font-family:var(--st-police-base);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);text-wrap:balance}:host([data-taille=lg]){font-size:var(--st-taille-lg)}:host([data-taille=xl]){font-size:var(--st-taille-xl)}:host([data-taille=\"2xl\"]){font-size:var(--st-taille-2xl)}:host([data-taille=\"3xl\"]){font-size:var(--st-taille-3xl)}:host([data-taille=\"4xl\"]){font-size:var(--st-taille-4xl)}\n"] }]
+                    }, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;margin:0 0 var(--st-espacement-3);font-family:var(--st-police-base);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);text-wrap:balance}:host([data-taille=lg]){font-size:var(--st-taille-lg)}:host([data-taille=xl]){font-size:var(--st-taille-xl)}:host([data-taille=\"2xl\"]){font-size:var(--st-taille-2xl)}:host([data-taille=\"3xl\"]){font-size:var(--st-taille-3xl)}:host([data-taille=\"4xl\"]){font-size:var(--st-taille-4xl)}\n"] }]
         }], propDecorators: { niveau: [{ type: i0.Input, args: [{ isSignal: true, alias: "niveau", required: true }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], identifiant: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifiant", required: false }] }] } });
 
 /**
@@ -237,16 +491,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  */
 class StSpinner {
     regionParente = inject(REGION_VIVANTE_PARENTE, { optional: true });
+    libelles = inject(ST_LIBELLES);
     taille = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "taille" }] : /* istanbul ignore next */ []));
     ton = input('primaire', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ton" }] : /* istanbul ignore next */ []));
-    etiquette = input('Chargement en cours', /* @ts-ignore */
+    /** `null` : le texte vient du dictionnaire de l'application. */
+    etiquette = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    etiquetteLue = computed(() => this.etiquette() ?? this.libelles().chargementEnCours, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
     sAnnonce = computed(() => this.regionParente === null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sAnnonce" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StSpinner, isStandalone: true, selector: "st-spinner", inputs: { taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-ton": "ton()", "attr.role": "sAnnonce() ? \"status\" : null", "attr.aria-label": "sAnnonce() ? etiquette() : null" }, classAttribute: "st-spinner" }, ngImport: i0, template: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n  <circle class=\"st-spinner__piste\" cx=\"12\" cy=\"12\" r=\"10\" />\n  <circle class=\"st-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n</svg>\n", styles: [":host{display:inline-flex;flex:none;color:var(--st-couleur-primaire)}svg{inline-size:var(--st-spinner-taille, 1.5rem);block-size:var(--st-spinner-taille, 1.5rem);fill:none;stroke-width:2.5;transform-origin:center;animation:st-spinner-rotation var(--st-anim-chargement, .9s) linear infinite}.st-spinner__piste{stroke:var(--st-couleur-bordure)}.st-spinner__arc{stroke:currentcolor;stroke-linecap:round;stroke-dasharray:16 47}@keyframes st-spinner-rotation{to{transform:rotate(1turn)}}@keyframes st-spinner-pulsation{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){svg{animation:st-spinner-pulsation 1.6s ease-in-out infinite}.st-spinner__arc{stroke-dasharray:none}}:host([data-taille=sm]) svg{--st-spinner-taille: 1rem}:host([data-taille=lg]) svg{--st-spinner-taille: 2.5rem}:host([data-ton=courant]){color:currentcolor}:host([data-ton=inverse]){color:var(--st-couleur-sur-primaire)}:host([data-ton=inverse]) .st-spinner__piste{stroke:color-mix(in srgb,var(--st-couleur-sur-primaire) 30%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StSpinner, isStandalone: true, selector: "st-spinner", inputs: { taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-ton": "ton()", "attr.role": "sAnnonce() ? \"status\" : null", "attr.aria-label": "sAnnonce() ? etiquetteLue() : null" }, classAttribute: "st-spinner" }, ngImport: i0, template: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n  <circle class=\"st-spinner__piste\" cx=\"12\" cy=\"12\" r=\"10\" />\n  <circle class=\"st-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n</svg>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;flex:none;color:var(--st-couleur-primaire)}svg{inline-size:var(--st-spinner-taille, 1.5rem);block-size:var(--st-spinner-taille, 1.5rem);fill:none;stroke-width:2.5;transform-origin:center;animation:st-spinner-rotation var(--st-anim-chargement, .9s) linear infinite}.st-spinner__piste{stroke:var(--st-couleur-bordure)}.st-spinner__arc{stroke:currentcolor;stroke-linecap:round;stroke-dasharray:16 47}@keyframes st-spinner-rotation{to{transform:rotate(1turn)}}@keyframes st-spinner-pulsation{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){svg{animation:st-spinner-pulsation 1.6s ease-in-out infinite}.st-spinner__arc{stroke-dasharray:none}}:host([data-taille=sm]) svg{--st-spinner-taille: 1rem}:host([data-taille=lg]) svg{--st-spinner-taille: 2.5rem}:host([data-ton=neutre]){color:currentcolor}:host([data-ton=inverse]){color:var(--st-couleur-sur-primaire)}:host([data-ton=inverse]) .st-spinner__piste{stroke:color-mix(in srgb,var(--st-couleur-sur-primaire) 30%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSpinner, decorators: [{
             type: Component,
@@ -255,8 +513,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-taille]': 'taille()',
                         '[attr.data-ton]': 'ton()',
                         '[attr.role]': 'sAnnonce() ? "status" : null',
-                        '[attr.aria-label]': 'sAnnonce() ? etiquette() : null',
-                    }, template: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n  <circle class=\"st-spinner__piste\" cx=\"12\" cy=\"12\" r=\"10\" />\n  <circle class=\"st-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n</svg>\n", styles: [":host{display:inline-flex;flex:none;color:var(--st-couleur-primaire)}svg{inline-size:var(--st-spinner-taille, 1.5rem);block-size:var(--st-spinner-taille, 1.5rem);fill:none;stroke-width:2.5;transform-origin:center;animation:st-spinner-rotation var(--st-anim-chargement, .9s) linear infinite}.st-spinner__piste{stroke:var(--st-couleur-bordure)}.st-spinner__arc{stroke:currentcolor;stroke-linecap:round;stroke-dasharray:16 47}@keyframes st-spinner-rotation{to{transform:rotate(1turn)}}@keyframes st-spinner-pulsation{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){svg{animation:st-spinner-pulsation 1.6s ease-in-out infinite}.st-spinner__arc{stroke-dasharray:none}}:host([data-taille=sm]) svg{--st-spinner-taille: 1rem}:host([data-taille=lg]) svg{--st-spinner-taille: 2.5rem}:host([data-ton=courant]){color:currentcolor}:host([data-ton=inverse]){color:var(--st-couleur-sur-primaire)}:host([data-ton=inverse]) .st-spinner__piste{stroke:color-mix(in srgb,var(--st-couleur-sur-primaire) 30%,transparent)}\n"] }]
+                        '[attr.aria-label]': 'sAnnonce() ? etiquetteLue() : null',
+                    }, template: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n  <circle class=\"st-spinner__piste\" cx=\"12\" cy=\"12\" r=\"10\" />\n  <circle class=\"st-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n</svg>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;flex:none;color:var(--st-couleur-primaire)}svg{inline-size:var(--st-spinner-taille, 1.5rem);block-size:var(--st-spinner-taille, 1.5rem);fill:none;stroke-width:2.5;transform-origin:center;animation:st-spinner-rotation var(--st-anim-chargement, .9s) linear infinite}.st-spinner__piste{stroke:var(--st-couleur-bordure)}.st-spinner__arc{stroke:currentcolor;stroke-linecap:round;stroke-dasharray:16 47}@keyframes st-spinner-rotation{to{transform:rotate(1turn)}}@keyframes st-spinner-pulsation{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){svg{animation:st-spinner-pulsation 1.6s ease-in-out infinite}.st-spinner__arc{stroke-dasharray:none}}:host([data-taille=sm]) svg{--st-spinner-taille: 1rem}:host([data-taille=lg]) svg{--st-spinner-taille: 2.5rem}:host([data-ton=neutre]){color:currentcolor}:host([data-ton=inverse]){color:var(--st-couleur-sur-primaire)}:host([data-ton=inverse]) .st-spinner__piste{stroke:color-mix(in srgb,var(--st-couleur-sur-primaire) 30%,transparent)}\n"] }]
         }], propDecorators: { taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }] } });
 
 /**
@@ -297,7 +555,7 @@ class StProgress {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pourcentage" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StProgress, isStandalone: true, selector: "st-progress", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, texteDeValeur: { classPropertyName: "texteDeValeur", publicName: "texteDeValeur", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.data-ton": "ton()", "attr.data-indetermine": "estIndeterminee() ? \"\" : null", "attr.aria-label": "etiquette()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "valeurAnnoncee()", "attr.aria-valuetext": "texteDeValeur()", "style.--st-progress-part.%": "pourcentage()" }, classAttribute: "st-progress" }, ngImport: i0, template: "<span class=\"st-progress__barre\"></span>\n", styles: [":host{display:block;block-size:.5rem;overflow:hidden;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-progress__barre{display:block;block-size:100%;inline-size:var(--st-progress-part, 0%);background:var(--st-couleur-primaire);border-radius:inherit;transition:inline-size var(--st-duree-normale) var(--st-courbe-standard)}:host([data-ton=succes]) .st-progress__barre{background:var(--st-couleur-succes)}:host([data-ton=danger]) .st-progress__barre{background:var(--st-couleur-danger)}:host([data-indetermine]) .st-progress__barre{inline-size:35%;animation:st-progress-va-et-vient var(--st-anim-chargement, 1.4s) ease-in-out infinite}@keyframes st-progress-va-et-vient{0%{transform:translate(-100%)}to{transform:translate(calc(100cqi + 100%))}}@keyframes st-progress-pulsation{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host([data-indetermine]) .st-progress__barre{inline-size:100%;transform:none;animation:st-progress-pulsation 1.6s ease-in-out infinite}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StProgress, isStandalone: true, selector: "st-progress", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, texteDeValeur: { classPropertyName: "texteDeValeur", publicName: "texteDeValeur", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.data-ton": "ton()", "attr.data-indetermine": "estIndeterminee() ? \"\" : null", "attr.aria-label": "etiquette()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "valeurAnnoncee()", "attr.aria-valuetext": "texteDeValeur()", "style.--st-progress-part.%": "pourcentage()" }, classAttribute: "st-progress" }, ngImport: i0, template: "<span class=\"st-progress__barre\"></span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;block-size:.5rem;overflow:hidden;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-progress__barre{display:block;block-size:100%;inline-size:var(--st-progress-part, 0%);background:var(--st-couleur-primaire);border-radius:inherit;transition:inline-size var(--st-duree-normale) var(--st-courbe-standard)}:host([data-ton=succes]) .st-progress__barre{background:var(--st-couleur-succes)}:host([data-ton=danger]) .st-progress__barre{background:var(--st-couleur-danger)}:host([data-indetermine]) .st-progress__barre{inline-size:35%;animation:st-progress-va-et-vient var(--st-anim-chargement, 1.4s) ease-in-out infinite}@keyframes st-progress-va-et-vient{0%{transform:translate(-100%)}to{transform:translate(calc(100cqi + 100%))}}@keyframes st-progress-pulsation{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host([data-indetermine]) .st-progress__barre{inline-size:100%;transform:none;animation:st-progress-pulsation 1.6s ease-in-out infinite}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StProgress, decorators: [{
             type: Component,
@@ -312,7 +570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.aria-valuenow]': 'valeurAnnoncee()',
                         '[attr.aria-valuetext]': 'texteDeValeur()',
                         '[style.--st-progress-part.%]': 'pourcentage()',
-                    }, template: "<span class=\"st-progress__barre\"></span>\n", styles: [":host{display:block;block-size:.5rem;overflow:hidden;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-progress__barre{display:block;block-size:100%;inline-size:var(--st-progress-part, 0%);background:var(--st-couleur-primaire);border-radius:inherit;transition:inline-size var(--st-duree-normale) var(--st-courbe-standard)}:host([data-ton=succes]) .st-progress__barre{background:var(--st-couleur-succes)}:host([data-ton=danger]) .st-progress__barre{background:var(--st-couleur-danger)}:host([data-indetermine]) .st-progress__barre{inline-size:35%;animation:st-progress-va-et-vient var(--st-anim-chargement, 1.4s) ease-in-out infinite}@keyframes st-progress-va-et-vient{0%{transform:translate(-100%)}to{transform:translate(calc(100cqi + 100%))}}@keyframes st-progress-pulsation{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host([data-indetermine]) .st-progress__barre{inline-size:100%;transform:none;animation:st-progress-pulsation 1.6s ease-in-out infinite}}\n"] }]
+                    }, template: "<span class=\"st-progress__barre\"></span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;block-size:.5rem;overflow:hidden;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-progress__barre{display:block;block-size:100%;inline-size:var(--st-progress-part, 0%);background:var(--st-couleur-primaire);border-radius:inherit;transition:inline-size var(--st-duree-normale) var(--st-courbe-standard)}:host([data-ton=succes]) .st-progress__barre{background:var(--st-couleur-succes)}:host([data-ton=danger]) .st-progress__barre{background:var(--st-couleur-danger)}:host([data-indetermine]) .st-progress__barre{inline-size:35%;animation:st-progress-va-et-vient var(--st-anim-chargement, 1.4s) ease-in-out infinite}@keyframes st-progress-va-et-vient{0%{transform:translate(-100%)}to{transform:translate(calc(100cqi + 100%))}}@keyframes st-progress-pulsation{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host([data-indetermine]) .st-progress__barre{inline-size:100%;transform:none;animation:st-progress-pulsation 1.6s ease-in-out infinite}}\n"] }]
         }], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], texteDeValeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "texteDeValeur", required: false }] }] } });
 
 /**
@@ -332,14 +590,13 @@ class StSkeleton {
     ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
     colonnes = input(4, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "colonnes" }] : /* istanbul ignore next */ []));
-    anime = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "anime" }] : /* istanbul ignore next */ []));
+    anime = input(true, { ...(ngDevMode ? { debugName: "anime" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     indicesDeLigne = computed(() => Array.from({ length: Math.max(1, this.lignes()) }, (_, index) => index), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "indicesDeLigne" }] : /* istanbul ignore next */ []));
     indicesDeColonne = computed(() => Array.from({ length: Math.max(1, this.colonnes()) }, (_, index) => index), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "indicesDeColonne" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSkeleton, isStandalone: true, selector: "st-skeleton", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: false, transformFunction: null }, colonnes: { classPropertyName: "colonnes", publicName: "colonnes", isSignal: true, isRequired: false, transformFunction: null }, anime: { classPropertyName: "anime", publicName: "anime", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-variante": "variante()", "attr.data-anime": "anime() ? \"\" : null" }, classAttribute: "st-skeleton" }, ngImport: i0, template: "@switch (variante()) {\n  @case ('tableau') {\n    @for (ligne of indicesDeLigne(); track ligne) {\n      <div class=\"st-skeleton__rangee\">\n        @for (colonne of indicesDeColonne(); track colonne) {\n          <span class=\"st-skeleton__cellule\"></span>\n        }\n      </div>\n    }\n  }\n  @case ('carte') {\n    <span class=\"st-skeleton__media\"></span>\n    @for (ligne of indicesDeLigne(); track ligne) {\n      <span class=\"st-skeleton__ligne\"></span>\n    }\n  }\n  @default {\n    @for (ligne of indicesDeLigne(); track ligne) {\n      <span class=\"st-skeleton__ligne\"></span>\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--st-espacement-2)}.st-skeleton__media,.st-skeleton__cellule,.st-skeleton__ligne{display:block;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}.st-skeleton__ligne{block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__ligne:last-child{inline-size:60%}.st-skeleton__rangee{display:flex;gap:var(--st-espacement-3)}.st-skeleton__cellule{flex:1;block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__media{block-size:8rem;border-radius:var(--st-rayon-md)}:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:linear-gradient(90deg,var(--st-couleur-surface-enfoncee) 25%,var(--st-couleur-surface-survol) 50%,var(--st-couleur-surface-enfoncee) 75%);background-size:200% 100%;animation:st-skeleton-miroitement var(--st-anim-chargement, 1.4s) linear infinite}@keyframes st-skeleton-miroitement{to{background-position:-200% 0}}@keyframes st-skeleton-pulsation{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:var(--st-couleur-surface-enfoncee);animation:st-skeleton-pulsation 1.8s ease-in-out infinite}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSkeleton, isStandalone: true, selector: "st-skeleton", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: false, transformFunction: null }, colonnes: { classPropertyName: "colonnes", publicName: "colonnes", isSignal: true, isRequired: false, transformFunction: null }, anime: { classPropertyName: "anime", publicName: "anime", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-variante": "variante()", "attr.data-anime": "anime() ? \"\" : null" }, classAttribute: "st-skeleton" }, ngImport: i0, template: "@switch (variante()) {\n  @case ('tableau') {\n    @for (ligne of indicesDeLigne(); track ligne) {\n      <div class=\"st-skeleton__rangee\">\n        @for (colonne of indicesDeColonne(); track colonne) {\n          <span class=\"st-skeleton__cellule\"></span>\n        }\n      </div>\n    }\n  }\n  @case ('carte') {\n    <span class=\"st-skeleton__media\"></span>\n    @for (ligne of indicesDeLigne(); track ligne) {\n      <span class=\"st-skeleton__ligne\"></span>\n    }\n  }\n  @default {\n    @for (ligne of indicesDeLigne(); track ligne) {\n      <span class=\"st-skeleton__ligne\"></span>\n    }\n  }\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;flex-direction:column;gap:var(--st-espacement-2)}.st-skeleton__media,.st-skeleton__cellule,.st-skeleton__ligne{display:block;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}.st-skeleton__ligne{block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__ligne:last-child{inline-size:60%}.st-skeleton__rangee{display:flex;gap:var(--st-espacement-3)}.st-skeleton__cellule{flex:1;block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__media{block-size:8rem;border-radius:var(--st-rayon-md)}:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:linear-gradient(90deg,var(--st-couleur-surface-enfoncee) 25%,var(--st-couleur-surface-survol) 50%,var(--st-couleur-surface-enfoncee) 75%);background-size:200% 100%;animation:st-skeleton-miroitement var(--st-anim-chargement, 1.4s) linear infinite}@keyframes st-skeleton-miroitement{to{background-position:-200% 0}}@keyframes st-skeleton-pulsation{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:var(--st-couleur-surface-enfoncee);animation:st-skeleton-pulsation 1.8s ease-in-out infinite}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSkeleton, decorators: [{
             type: Component,
@@ -348,7 +605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         'aria-hidden': 'true',
                         '[attr.data-variante]': 'variante()',
                         '[attr.data-anime]': 'anime() ? "" : null',
-                    }, template: "@switch (variante()) {\n  @case ('tableau') {\n    @for (ligne of indicesDeLigne(); track ligne) {\n      <div class=\"st-skeleton__rangee\">\n        @for (colonne of indicesDeColonne(); track colonne) {\n          <span class=\"st-skeleton__cellule\"></span>\n        }\n      </div>\n    }\n  }\n  @case ('carte') {\n    <span class=\"st-skeleton__media\"></span>\n    @for (ligne of indicesDeLigne(); track ligne) {\n      <span class=\"st-skeleton__ligne\"></span>\n    }\n  }\n  @default {\n    @for (ligne of indicesDeLigne(); track ligne) {\n      <span class=\"st-skeleton__ligne\"></span>\n    }\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--st-espacement-2)}.st-skeleton__media,.st-skeleton__cellule,.st-skeleton__ligne{display:block;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}.st-skeleton__ligne{block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__ligne:last-child{inline-size:60%}.st-skeleton__rangee{display:flex;gap:var(--st-espacement-3)}.st-skeleton__cellule{flex:1;block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__media{block-size:8rem;border-radius:var(--st-rayon-md)}:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:linear-gradient(90deg,var(--st-couleur-surface-enfoncee) 25%,var(--st-couleur-surface-survol) 50%,var(--st-couleur-surface-enfoncee) 75%);background-size:200% 100%;animation:st-skeleton-miroitement var(--st-anim-chargement, 1.4s) linear infinite}@keyframes st-skeleton-miroitement{to{background-position:-200% 0}}@keyframes st-skeleton-pulsation{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:var(--st-couleur-surface-enfoncee);animation:st-skeleton-pulsation 1.8s ease-in-out infinite}}\n"] }]
+                    }, template: "@switch (variante()) {\n  @case ('tableau') {\n    @for (ligne of indicesDeLigne(); track ligne) {\n      <div class=\"st-skeleton__rangee\">\n        @for (colonne of indicesDeColonne(); track colonne) {\n          <span class=\"st-skeleton__cellule\"></span>\n        }\n      </div>\n    }\n  }\n  @case ('carte') {\n    <span class=\"st-skeleton__media\"></span>\n    @for (ligne of indicesDeLigne(); track ligne) {\n      <span class=\"st-skeleton__ligne\"></span>\n    }\n  }\n  @default {\n    @for (ligne of indicesDeLigne(); track ligne) {\n      <span class=\"st-skeleton__ligne\"></span>\n    }\n  }\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;flex-direction:column;gap:var(--st-espacement-2)}.st-skeleton__media,.st-skeleton__cellule,.st-skeleton__ligne{display:block;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}.st-skeleton__ligne{block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__ligne:last-child{inline-size:60%}.st-skeleton__rangee{display:flex;gap:var(--st-espacement-3)}.st-skeleton__cellule{flex:1;block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__media{block-size:8rem;border-radius:var(--st-rayon-md)}:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:linear-gradient(90deg,var(--st-couleur-surface-enfoncee) 25%,var(--st-couleur-surface-survol) 50%,var(--st-couleur-surface-enfoncee) 75%);background-size:200% 100%;animation:st-skeleton-miroitement var(--st-anim-chargement, 1.4s) linear infinite}@keyframes st-skeleton-miroitement{to{background-position:-200% 0}}@keyframes st-skeleton-pulsation{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:var(--st-couleur-surface-enfoncee);animation:st-skeleton-pulsation 1.8s ease-in-out infinite}}\n"] }]
         }], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], lignes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lignes", required: false }] }], colonnes: [{ type: i0.Input, args: [{ isSignal: true, alias: "colonnes", required: false }] }], anime: [{ type: i0.Input, args: [{ isSignal: true, alias: "anime", required: false }] }] } });
 
 /**
@@ -375,8 +632,7 @@ class StButton {
     ...(ngDevMode ? [{ debugName: "variante" }] : /* istanbul ignore next */ []));
     taille = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "taille" }] : /* istanbul ignore next */ []));
-    pleineLargeur = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pleineLargeur" }] : /* istanbul ignore next */ []));
+    pleineLargeur = input(false, { ...(ngDevMode ? { debugName: "pleineLargeur" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     iconeAvant = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconeAvant" }] : /* istanbul ignore next */ []));
     iconeApres = input(null, /* @ts-ignore */
@@ -386,19 +642,29 @@ class StButton {
      * mecanisme d'anti double soumission. L'appelant doit le lever DES la
      * soumission, pas a l'arrivee de la reponse.
      */
-    chargement = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "chargement" }] : /* istanbul ignore next */ []));
+    chargement = input(false, { ...(ngDevMode ? { debugName: "chargement" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * L'action existe mais n'est pas disponible : une condition n'est pas encore
+     * remplie.
+     *
+     * ⚠️ `aria-disabled` et NON l'attribut natif `disabled`, qui retire le bouton
+     * de l'ordre de tabulation. Une personne au clavier ne l'atteindrait plus, et
+     * ne decouvrirait donc jamais la condition qui le bloque — le bouton aurait
+     * simplement disparu de son parcours. Ici il reste atteignable, annonce comme
+     * indisponible, et ses clics sont avales.
+     */
+    indisponible = input(false, { ...(ngDevMode ? { debugName: "indisponible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Le ton suit le FOND du bouton, et non le bouton en general : sur une
      * variante posee sur la surface (`secondaire`, qui est le defaut, et
      * `discret`), un indicateur en ton inverse tombait a 1,00:1 — invisible.
      */
-    tonDuChargement = computed(() => this.variante() === 'primaire' || this.variante() === 'destructeur' ? 'inverse' : 'courant', /* @ts-ignore */
+    tonDuChargement = computed(() => this.variante() === 'primaire' || this.variante() === 'danger' ? 'inverse' : 'neutre', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tonDuChargement" }] : /* istanbul ignore next */ []));
     constructor() {
         const element = inject(ElementRef).nativeElement;
         const garde = (evenement) => {
-            if (!this.chargement())
+            if (!this.chargement() && !this.indisponible())
                 return;
             evenement.preventDefault();
             // `stopImmediatePropagation` et non `stopPropagation` : il faut barrer
@@ -417,7 +683,7 @@ class StButton {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StButton, isStandalone: true, selector: "button[stButton]", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, pleineLargeur: { classPropertyName: "pleineLargeur", publicName: "pleineLargeur", isSignal: true, isRequired: false, transformFunction: null }, iconeAvant: { classPropertyName: "iconeAvant", publicName: "iconeAvant", isSignal: true, isRequired: false, transformFunction: null }, iconeApres: { classPropertyName: "iconeApres", publicName: "iconeApres", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-taille": "taille()", "attr.data-pleine-largeur": "pleineLargeur() ? \"\" : null", "attr.aria-disabled": "chargement() ? \"true\" : null", "attr.aria-busy": "chargement() ? \"true\" : null" }, classAttribute: "st-button" }, ngImport: i0, template: "@if (iconeAvant(); as icone) {\n  <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n<span class=\"st-button__libelle\"><ng-content /></span>\n\n@if (iconeApres(); as icone) {\n  <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n@if (chargement()) {\n  <st-spinner\n    class=\"st-button__chargement\"\n    taille=\"sm\"\n    [ton]=\"tonDuChargement()\"\n    aria-hidden=\"true\"\n  />\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host{position:relative;display:inline-flex;gap:var(--st-espacement-2);align-items:center;justify-content:center;min-block-size:var(--st-cible-tactile-min);padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard),border-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;border-color:var(--st-couleur-bordure)}:host[aria-disabled=true]{cursor:progress}.st-button__libelle{white-space:normal}:host([aria-busy=true])>:not(.st-button__chargement){opacity:0}.st-button__chargement{position:absolute;inset:0;margin:auto}:host([data-variante=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:transparent}:host([data-variante=primaire]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=primaire]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-primaire-survol)}:host([data-variante=destructeur]){color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border-color:transparent}:host([data-variante=destructeur]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=destructeur]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-danger-survol)}:host([data-variante=discret]){color:var(--st-couleur-primaire);background:transparent;border-color:transparent}:host([data-variante=discret]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host([data-taille=sm]){min-block-size:2.25rem;padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm)}@media(pointer:coarse){:host([data-taille=sm]){min-block-size:var(--st-cible-tactile-min)}}:host([data-taille=lg]){min-block-size:3.25rem;padding-inline:var(--st-espacement-6);font-size:var(--st-taille-lg)}:host([data-pleine-largeur]){display:flex;inline-size:100%}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StSpinner, selector: "st-spinner", inputs: ["taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StButton, isStandalone: true, selector: "button[stButton]", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, pleineLargeur: { classPropertyName: "pleineLargeur", publicName: "pleineLargeur", isSignal: true, isRequired: false, transformFunction: null }, iconeAvant: { classPropertyName: "iconeAvant", publicName: "iconeAvant", isSignal: true, isRequired: false, transformFunction: null }, iconeApres: { classPropertyName: "iconeApres", publicName: "iconeApres", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, indisponible: { classPropertyName: "indisponible", publicName: "indisponible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-taille": "taille()", "attr.data-pleine-largeur": "pleineLargeur() ? \"\" : null", "attr.aria-disabled": "chargement() || indisponible() ? \"true\" : null", "attr.aria-busy": "chargement() ? \"true\" : null" }, classAttribute: "st-button" }, ngImport: i0, template: "@if (iconeAvant(); as icone) {\n  <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n<span class=\"st-button__libelle\"><ng-content /></span>\n\n@if (iconeApres(); as icone) {\n  <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n@if (chargement()) {\n  <st-spinner\n    class=\"st-button__chargement\"\n    taille=\"sm\"\n    [ton]=\"tonDuChargement()\"\n    aria-hidden=\"true\"\n  />\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{position:relative;display:inline-flex;gap:var(--st-espacement-2);align-items:center;justify-content:center;min-block-size:var(--st-cible-tactile-min);padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard),border-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;border-color:var(--st-couleur-bordure)}:host[aria-disabled=true]{cursor:progress}.st-button__libelle{white-space:normal}:host([aria-busy=true])>:not(.st-button__chargement){opacity:0}.st-button__chargement{position:absolute;inset:0;margin:auto}:host([data-variante=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:transparent}:host([data-variante=primaire]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=primaire]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-primaire-survol)}:host([data-variante=danger]){color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border-color:transparent}:host([data-variante=danger]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=danger]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-danger-survol)}:host([data-variante=discret]){color:var(--st-couleur-primaire);background:transparent;border-color:transparent}:host([data-variante=discret]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host([data-taille=sm]){min-block-size:2.25rem;padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm)}@media(pointer:coarse){:host([data-taille=sm]){min-block-size:var(--st-cible-tactile-min)}}:host([data-taille=lg]){min-block-size:3.25rem;padding-inline:var(--st-espacement-6);font-size:var(--st-taille-lg)}:host([data-pleine-largeur]){display:flex;inline-size:100%}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StSpinner, selector: "st-spinner", inputs: ["taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StButton, decorators: [{
             type: Component,
@@ -426,10 +692,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-variante]': 'variante()',
                         '[attr.data-taille]': 'taille()',
                         '[attr.data-pleine-largeur]': 'pleineLargeur() ? "" : null',
-                        '[attr.aria-disabled]': 'chargement() ? "true" : null',
+                        '[attr.aria-disabled]': 'chargement() || indisponible() ? "true" : null',
                         '[attr.aria-busy]': 'chargement() ? "true" : null',
-                    }, template: "@if (iconeAvant(); as icone) {\n  <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n<span class=\"st-button__libelle\"><ng-content /></span>\n\n@if (iconeApres(); as icone) {\n  <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n@if (chargement()) {\n  <st-spinner\n    class=\"st-button__chargement\"\n    taille=\"sm\"\n    [ton]=\"tonDuChargement()\"\n    aria-hidden=\"true\"\n  />\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host{position:relative;display:inline-flex;gap:var(--st-espacement-2);align-items:center;justify-content:center;min-block-size:var(--st-cible-tactile-min);padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard),border-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;border-color:var(--st-couleur-bordure)}:host[aria-disabled=true]{cursor:progress}.st-button__libelle{white-space:normal}:host([aria-busy=true])>:not(.st-button__chargement){opacity:0}.st-button__chargement{position:absolute;inset:0;margin:auto}:host([data-variante=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:transparent}:host([data-variante=primaire]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=primaire]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-primaire-survol)}:host([data-variante=destructeur]){color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border-color:transparent}:host([data-variante=destructeur]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=destructeur]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-danger-survol)}:host([data-variante=discret]){color:var(--st-couleur-primaire);background:transparent;border-color:transparent}:host([data-variante=discret]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host([data-taille=sm]){min-block-size:2.25rem;padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm)}@media(pointer:coarse){:host([data-taille=sm]){min-block-size:var(--st-cible-tactile-min)}}:host([data-taille=lg]){min-block-size:3.25rem;padding-inline:var(--st-espacement-6);font-size:var(--st-taille-lg)}:host([data-pleine-largeur]){display:flex;inline-size:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], pleineLargeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "pleineLargeur", required: false }] }], iconeAvant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconeAvant", required: false }] }], iconeApres: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconeApres", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }] } });
+                    }, template: "@if (iconeAvant(); as icone) {\n  <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n<span class=\"st-button__libelle\"><ng-content /></span>\n\n@if (iconeApres(); as icone) {\n  <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n@if (chargement()) {\n  <st-spinner\n    class=\"st-button__chargement\"\n    taille=\"sm\"\n    [ton]=\"tonDuChargement()\"\n    aria-hidden=\"true\"\n  />\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{position:relative;display:inline-flex;gap:var(--st-espacement-2);align-items:center;justify-content:center;min-block-size:var(--st-cible-tactile-min);padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard),border-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;border-color:var(--st-couleur-bordure)}:host[aria-disabled=true]{cursor:progress}.st-button__libelle{white-space:normal}:host([aria-busy=true])>:not(.st-button__chargement){opacity:0}.st-button__chargement{position:absolute;inset:0;margin:auto}:host([data-variante=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:transparent}:host([data-variante=primaire]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=primaire]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-primaire-survol)}:host([data-variante=danger]){color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border-color:transparent}:host([data-variante=danger]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=danger]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-danger-survol)}:host([data-variante=discret]){color:var(--st-couleur-primaire);background:transparent;border-color:transparent}:host([data-variante=discret]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host([data-taille=sm]){min-block-size:2.25rem;padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm)}@media(pointer:coarse){:host([data-taille=sm]){min-block-size:var(--st-cible-tactile-min)}}:host([data-taille=lg]){min-block-size:3.25rem;padding-inline:var(--st-espacement-6);font-size:var(--st-taille-lg)}:host([data-pleine-largeur]){display:flex;inline-size:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], pleineLargeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "pleineLargeur", required: false }] }], iconeAvant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconeAvant", required: false }] }], iconeApres: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconeApres", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], indisponible: [{ type: i0.Input, args: [{ isSignal: true, alias: "indisponible", required: false }] }] } });
 
 /**
  * Bouton reduit a une icone, pose en attribut sur un `<button>` natif.
@@ -448,11 +714,18 @@ class StIconButton {
     ...(ngDevMode ? [{ debugName: "variante" }] : /* istanbul ignore next */ []));
     taille = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "taille" }] : /* istanbul ignore next */ []));
-    /** `null` : le bouton n'est pas a deux etats et n'annonce aucune pression. */
-    enfonce = model(null, /* @ts-ignore */
+    /**
+     * `null` : le bouton n'est pas a deux etats et n'annonce aucune pression.
+     *
+     * ⚠️ Une ENTREE, et non un `model`. Le composant ne bascule rien de lui-meme :
+     * l'etat enfonce reflete une donnee que l'appelant detient. En `model`,
+     * `[(enfonce)]` compilait et ne remontait jamais — une liaison bidirectionnelle
+     * muette est pire qu'absente, puisqu'elle se relit comme fonctionnelle.
+     */
+    enfonce = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "enfonce" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIconButton, isStandalone: true, selector: "button[stIconButton]", inputs: { icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, enfonce: { classPropertyName: "enfonce", publicName: "enfonce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enfonce: "enfonceChange" }, host: { properties: { "attr.data-variante": "variante()", "attr.data-taille": "taille()", "attr.aria-label": "etiquette()", "attr.aria-pressed": "enfonce() === null ? null : enfonce()" }, classAttribute: "st-icon-button" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" [taille]=\"taille() === 'sm' ? 'sm' : 'md'\" />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host{display:inline-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-cible-tactile-min);min-block-size:var(--st-cible-tactile-min);color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not(:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed}:host[aria-pressed=true]{background:var(--st-couleur-surface-enfoncee)}:host([data-variante=secondaire]){background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure-forte)}:host([data-variante=destructeur]){color:var(--st-couleur-danger)}:host([data-variante=destructeur]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIconButton, isStandalone: true, selector: "button[stIconButton]", inputs: { icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, enfonce: { classPropertyName: "enfonce", publicName: "enfonce", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-taille": "taille()", "attr.aria-label": "etiquette()", "attr.aria-pressed": "enfonce() === null ? null : enfonce()" }, classAttribute: "st-icon-button" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" [taille]=\"taille() === 'sm' ? 'sm' : 'md'\" />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-cible-tactile-min);min-block-size:var(--st-cible-tactile-min);color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not(:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed}:host[aria-pressed=true]{background:var(--st-couleur-surface-enfoncee)}:host([data-variante=secondaire]){background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure-forte)}:host([data-variante=danger]){color:var(--st-couleur-danger)}:host([data-variante=danger]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIconButton, decorators: [{
             type: Component,
@@ -462,8 +735,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-taille]': 'taille()',
                         '[attr.aria-label]': 'etiquette()',
                         '[attr.aria-pressed]': 'enfonce() === null ? null : enfonce()',
-                    }, template: "<st-icon [nom]=\"icone()\" [taille]=\"taille() === 'sm' ? 'sm' : 'md'\" />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host{display:inline-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-cible-tactile-min);min-block-size:var(--st-cible-tactile-min);color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not(:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed}:host[aria-pressed=true]{background:var(--st-couleur-surface-enfoncee)}:host([data-variante=secondaire]){background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure-forte)}:host([data-variante=destructeur]){color:var(--st-couleur-danger)}:host([data-variante=destructeur]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}\n"] }]
-        }], propDecorators: { icone: [{ type: i0.Input, args: [{ isSignal: true, alias: "icone", required: true }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], enfonce: [{ type: i0.Input, args: [{ isSignal: true, alias: "enfonce", required: false }] }, { type: i0.Output, args: ["enfonceChange"] }] } });
+                    }, template: "<st-icon [nom]=\"icone()\" [taille]=\"taille() === 'sm' ? 'sm' : 'md'\" />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-cible-tactile-min);min-block-size:var(--st-cible-tactile-min);color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not(:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed}:host[aria-pressed=true]{background:var(--st-couleur-surface-enfoncee)}:host([data-variante=secondaire]){background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure-forte)}:host([data-variante=danger]){color:var(--st-couleur-danger)}:host([data-variante=danger]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}\n"] }]
+        }], propDecorators: { icone: [{ type: i0.Input, args: [{ isSignal: true, alias: "icone", required: true }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], enfonce: [{ type: i0.Input, args: [{ isSignal: true, alias: "enfonce", required: false }] }] } });
 
 /**
  * Lien, pose en attribut sur un `<a>` natif.
@@ -476,16 +749,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * quiconque regarde l'ecran.
  */
 class StLink {
+    libelles = inject(ST_LIBELLES);
     variante = input('texte', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variante" }] : /* istanbul ignore next */ []));
     /** Ouvre dans un nouvel onglet, et l'annonce dans le nom accessible. */
-    externe = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "externe" }] : /* istanbul ignore next */ []));
-    /** Mention lue par les lecteurs d'ecran quand le lien sort du site. */
-    mentionExterne = input('(nouvelle fenetre)', /* @ts-ignore */
+    externe = input(false, { ...(ngDevMode ? { debugName: "externe" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Mention lue par les lecteurs d'ecran quand le lien sort du site.
+     * `null` : le texte vient du dictionnaire de l'application.
+     */
+    mentionExterne = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mentionExterne" }] : /* istanbul ignore next */ []));
+    mentionExterneLue = computed(() => this.mentionExterne() ?? this.libelles().nouvelleFenetre, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mentionExterneLue" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StLink, isStandalone: true, selector: "a[stLink]", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, externe: { classPropertyName: "externe", publicName: "externe", isSignal: true, isRequired: false, transformFunction: null }, mentionExterne: { classPropertyName: "mentionExterne", publicName: "mentionExterne", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.target": "externe() ? \"_blank\" : null", "attr.rel": "externe() ? \"noopener noreferrer\" : null" }, classAttribute: "st-link" }, ngImport: i0, template: "<ng-content />\n@if (externe()) {\n  <st-icon nom=\"lien-externe\" taille=\"xs\" />\n  <span class=\"st-vh\">{{ mentionExterne() }}</span>\n}\n", styles: [":host{display:inline;gap:var(--st-espacement-1);color:var(--st-couleur-primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:var(--st-rayon-xs)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover{color:var(--st-couleur-primaire-survol)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=autonome]){display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);text-decoration:none}:host([data-variante=autonome]):hover{text-decoration:underline}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StLink, isStandalone: true, selector: "a[stLink]", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, externe: { classPropertyName: "externe", publicName: "externe", isSignal: true, isRequired: false, transformFunction: null }, mentionExterne: { classPropertyName: "mentionExterne", publicName: "mentionExterne", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.target": "externe() ? \"_blank\" : null", "attr.rel": "externe() ? \"noopener noreferrer\" : null" }, classAttribute: "st-link" }, ngImport: i0, template: "<ng-content />\n@if (externe()) {\n  <st-icon nom=\"lien-externe\" taille=\"xs\" />\n  <span class=\"st-vh\">{{ mentionExterneLue() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline;gap:var(--st-espacement-1);color:var(--st-couleur-primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:var(--st-rayon-xs)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover{color:var(--st-couleur-primaire-survol)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=autonome]){display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);text-decoration:none}:host([data-variante=autonome]):hover{text-decoration:underline}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StLink, decorators: [{
             type: Component,
@@ -494,7 +772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-variante]': 'variante()',
                         '[attr.target]': 'externe() ? "_blank" : null',
                         '[attr.rel]': 'externe() ? "noopener noreferrer" : null',
-                    }, template: "<ng-content />\n@if (externe()) {\n  <st-icon nom=\"lien-externe\" taille=\"xs\" />\n  <span class=\"st-vh\">{{ mentionExterne() }}</span>\n}\n", styles: [":host{display:inline;gap:var(--st-espacement-1);color:var(--st-couleur-primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:var(--st-rayon-xs)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover{color:var(--st-couleur-primaire-survol)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=autonome]){display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);text-decoration:none}:host([data-variante=autonome]):hover{text-decoration:underline}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
+                    }, template: "<ng-content />\n@if (externe()) {\n  <st-icon nom=\"lien-externe\" taille=\"xs\" />\n  <span class=\"st-vh\">{{ mentionExterneLue() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline;gap:var(--st-espacement-1);color:var(--st-couleur-primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:var(--st-rayon-xs)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover{color:var(--st-couleur-primaire-survol)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=autonome]){display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);text-decoration:none}:host([data-variante=autonome]):hover{text-decoration:underline}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
         }], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], externe: [{ type: i0.Input, args: [{ isSignal: true, alias: "externe", required: false }] }], mentionExterne: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentionExterne", required: false }] }] } });
 
 /**
@@ -512,10 +790,9 @@ class StButtonGroup {
     orientation = input('horizontale', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     /** Boutons jointifs, rayons fusionnes. */
-    attache = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "attache" }] : /* istanbul ignore next */ []));
+    attache = input(false, { ...(ngDevMode ? { debugName: "attache" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StButtonGroup, isStandalone: true, selector: "st-button-group", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, attache: { classPropertyName: "attache", publicName: "attache", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "etiquette()", "attr.data-orientation": "orientation()", "attr.data-attache": "attache() ? \"\" : null" }, classAttribute: "st-button-group" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}:host([data-orientation=verticale]){flex-direction:column;align-items:stretch}:host([data-attache]){flex-wrap:nowrap;gap:0}:host([data-attache]) ::ng-deep>.st-button:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}:host([data-attache]) ::ng-deep>.st-button:not(:last-child){border-start-end-radius:0;border-end-end-radius:0;border-inline-end-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StButtonGroup, isStandalone: true, selector: "st-button-group", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, attache: { classPropertyName: "attache", publicName: "attache", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "etiquette()", "attr.data-orientation": "orientation()", "attr.data-attache": "attache() ? \"\" : null" }, classAttribute: "st-button-group" }, ngImport: i0, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}:host([data-orientation=verticale]){flex-direction:column;align-items:stretch}:host([data-attache]){flex-wrap:nowrap;gap:0}:host([data-attache]) ::ng-deep>.st-button:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}:host([data-attache]) ::ng-deep>.st-button:not(:last-child){border-start-end-radius:0;border-end-end-radius:0;border-inline-end-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StButtonGroup, decorators: [{
             type: Component,
@@ -525,7 +802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.aria-label]': 'etiquette()',
                         '[attr.data-orientation]': 'orientation()',
                         '[attr.data-attache]': 'attache() ? "" : null',
-                    }, template: "<ng-content />\n", styles: [":host{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}:host([data-orientation=verticale]){flex-direction:column;align-items:stretch}:host([data-attache]){flex-wrap:nowrap;gap:0}:host([data-attache]) ::ng-deep>.st-button:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}:host([data-attache]) ::ng-deep>.st-button:not(:last-child){border-start-end-radius:0;border-end-end-radius:0;border-inline-end-width:0}\n"] }]
+                    }, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}:host([data-orientation=verticale]){flex-direction:column;align-items:stretch}:host([data-attache]){flex-wrap:nowrap;gap:0}:host([data-attache]) ::ng-deep>.st-button:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}:host([data-attache]) ::ng-deep>.st-button:not(:last-child){border-start-end-radius:0;border-end-end-radius:0;border-inline-end-width:0}\n"] }]
         }], propDecorators: { etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], attache: [{ type: i0.Input, args: [{ isSignal: true, alias: "attache", required: false }] }] } });
 
 /**
@@ -539,72 +816,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  */
 class StCode {
     document = inject(DOCUMENT);
-    destruction = inject(DestroyRef);
+    libelles = inject(ST_LIBELLES);
     valeur = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valeur" }] : /* istanbul ignore next */ []));
-    etiquette = input('Identifiant de trace', /* @ts-ignore */
+    copiable = input(true, { ...(ngDevMode ? { debugName: "copiable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** `null` : les textes viennent du dictionnaire de l'application. */
+    etiquette = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
-    copiable = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "copiable" }] : /* istanbul ignore next */ []));
-    libelleCopier = input('Copier', /* @ts-ignore */
+    libelleCopier = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "libelleCopier" }] : /* istanbul ignore next */ []));
-    messageDeConfirmation = input('Copie', /* @ts-ignore */
+    messageDeConfirmation = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "messageDeConfirmation" }] : /* istanbul ignore next */ []));
+    etiquetteLue = computed(() => this.etiquette() ?? this.libelles().identifiantDeTrace, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
+    libelleCopierLu = computed(() => this.libelleCopier() ?? this.libelles().copier, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleCopierLu" }] : /* istanbul ignore next */ []));
     copie = output();
-    confirmation = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "confirmation" }] : /* istanbul ignore next */ []));
-    minuterie = null;
-    texteDeConfirmation = this.confirmation.asReadonly();
+    annonce = new AnnonceLocale(inject(DestroyRef));
     /**
      * Le bouton n'apparait que si le navigateur sait copier. Sans presse-papiers,
      * un bouton qui ne fait rien vaut moins que la selection manuelle, que la
      * feuille garde possible (`user-select: all`).
      */
-    copiePossible = computed(() => {
-        if (!this.copiable())
-            return false;
-        const fenetre = this.document.defaultView;
-        return fenetre?.navigator.clipboard !== undefined;
-    }, /* @ts-ignore */
+    copiePossible = computed(() => this.copiable() && pressePapiersDisponible(this.document), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "copiePossible" }] : /* istanbul ignore next */ []));
     async auClicDeCopie() {
-        const presse = this.document.defaultView?.navigator.clipboard;
-        if (presse === undefined)
-            return;
-        try {
-            await presse.writeText(this.valeur());
+        const issue = await copierDansLePressePapiers(this.document, this.valeur());
+        if (issue === 'copie') {
+            this.copie.emit(this.valeur());
+            this.annonce.annoncer(this.messageDeConfirmation() ?? this.libelles().copieEffectuee);
         }
-        catch {
-            // Le refus du presse-papiers n'est pas une erreur applicative : la
-            // valeur reste selectionnable a la main.
-            return;
+        else if (issue === 'refusee') {
+            // Un refus se DIT : se taire laisserait croire que la copie a eu lieu.
+            this.annonce.annoncer(this.libelles().copieImpossible);
         }
-        this.copie.emit(this.valeur());
-        this.confirmation.set(this.messageDeConfirmation());
-        if (this.minuterie !== null)
-            clearTimeout(this.minuterie);
-        this.minuterie = setTimeout(() => {
-            this.confirmation.set('');
-            this.minuterie = null;
-        }, 3000);
-        this.destruction.onDestroy(() => {
-            if (this.minuterie !== null)
-                clearTimeout(this.minuterie);
-        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCode, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StCode, isStandalone: true, selector: "st-code", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, copiable: { classPropertyName: "copiable", publicName: "copiable", isSignal: true, isRequired: false, transformFunction: null }, libelleCopier: { classPropertyName: "libelleCopier", publicName: "libelleCopier", isSignal: true, isRequired: false, transformFunction: null }, messageDeConfirmation: { classPropertyName: "messageDeConfirmation", publicName: "messageDeConfirmation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copie: "copie" }, host: { classAttribute: "st-code" }, ngImport: i0, template: "<code [attr.aria-label]=\"etiquette() + ' ' + valeur()\">{{ valeur() }}</code>\n\n@if (copiePossible()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"copie\"\n    taille=\"sm\"\n    [etiquette]=\"libelleCopier()\"\n    (click)=\"auClicDeCopie()\"\n  ></button>\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ texteDeConfirmation() }}</span>\n", styles: [":host{display:inline-flex;gap:var(--st-espacement-1);align-items:center}code{padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-2);font-family:var(--st-police-mono);font-size:var(--st-taille-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"], outputs: ["enfonceChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StCode, isStandalone: true, selector: "st-code", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, copiable: { classPropertyName: "copiable", publicName: "copiable", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, libelleCopier: { classPropertyName: "libelleCopier", publicName: "libelleCopier", isSignal: true, isRequired: false, transformFunction: null }, messageDeConfirmation: { classPropertyName: "messageDeConfirmation", publicName: "messageDeConfirmation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copie: "copie" }, host: { classAttribute: "st-code" }, ngImport: i0, template: "<code aria-hidden=\"true\">{{ valeur() }}</code>\n<span class=\"st-vh\">{{ etiquetteLue() + ' ' + valeur() }}</span>\n\n@if (copiePossible()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"copie\"\n    taille=\"sm\"\n    [etiquette]=\"libelleCopierLu()\"\n    (click)=\"auClicDeCopie()\"\n  ></button>\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [":host([hidden]){display:none!important}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center}code{padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-2);font-family:var(--st-police-mono);font-size:var(--st-taille-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCode, decorators: [{
             type: Component,
-            args: [{ selector: 'st-code', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIconButton], host: { class: 'st-code' }, template: "<code [attr.aria-label]=\"etiquette() + ' ' + valeur()\">{{ valeur() }}</code>\n\n@if (copiePossible()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"copie\"\n    taille=\"sm\"\n    [etiquette]=\"libelleCopier()\"\n    (click)=\"auClicDeCopie()\"\n  ></button>\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ texteDeConfirmation() }}</span>\n", styles: [":host{display:inline-flex;gap:var(--st-espacement-1);align-items:center}code{padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-2);font-family:var(--st-police-mono);font-size:var(--st-taille-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
-        }], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: true }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], copiable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiable", required: false }] }], libelleCopier: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleCopier", required: false }] }], messageDeConfirmation: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageDeConfirmation", required: false }] }], copie: [{ type: i0.Output, args: ["copie"] }] } });
+            args: [{ selector: 'st-code', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIconButton], host: { class: 'st-code' }, template: "<code aria-hidden=\"true\">{{ valeur() }}</code>\n<span class=\"st-vh\">{{ etiquetteLue() + ' ' + valeur() }}</span>\n\n@if (copiePossible()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"copie\"\n    taille=\"sm\"\n    [etiquette]=\"libelleCopierLu()\"\n    (click)=\"auClicDeCopie()\"\n  ></button>\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [":host([hidden]){display:none!important}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center}code{padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-2);font-family:var(--st-police-mono);font-size:var(--st-taille-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: true }] }], copiable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiable", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], libelleCopier: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleCopier", required: false }] }], messageDeConfirmation: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageDeConfirmation", required: false }] }], copie: [{ type: i0.Output, args: ["copie"] }] } });
 
-const LIBELLE_DU_TYPE = {
-    iban: 'IBAN',
-    carte: 'carte',
-    telephone: 'numero',
-};
 /**
  * Identifiant sensible, masque par defaut.
  *
@@ -617,26 +871,37 @@ const LIBELLE_DU_TYPE = {
  * journal.
  */
 class StMasked {
-    destruction = inject(DestroyRef);
+    libelles = inject(ST_LIBELLES);
     valeur = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valeur" }] : /* istanbul ignore next */ []));
     type = input('iban', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     revele = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "revele" }] : /* istanbul ignore next */ []));
-    revelationAutorisee = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "revelationAutorisee" }] : /* istanbul ignore next */ []));
+    revelationAutorisee = input(false, { ...(ngDevMode ? { debugName: "revelationAutorisee" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     dureeDeRevelationEnSecondes = input(30, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dureeDeRevelationEnSecondes" }] : /* istanbul ignore next */ []));
-    libelleAfficher = input('Afficher', /* @ts-ignore */
+    /** `null` : les textes viennent du dictionnaire de l'application. */
+    libelleAfficher = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "libelleAfficher" }] : /* istanbul ignore next */ []));
-    libelleMasquer = input('Masquer', /* @ts-ignore */
+    libelleMasquer = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "libelleMasquer" }] : /* istanbul ignore next */ []));
     revelation = output();
-    annonce = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "annonce" }] : /* istanbul ignore next */ []));
-    texteDAnnonce = this.annonce.asReadonly();
+    /**
+     * ⚠️ Par `AnnonceLocale`, et non par un signal pose directement. La 0.2.0
+     * reposait « Valeur masquee a nouveau » a l'identique : aucune mutation, donc
+     * une seconde remise en masque jamais annoncee.
+     */
+    annonce = new AnnonceLocale(inject(DestroyRef));
     minuterie = null;
+    constructor() {
+        // Enregistre UNE fois. La 0.2.0 l'enregistrait a chaque revelation, et
+        // chaque clic empilait un rappel de plus.
+        inject(DestroyRef).onDestroy(() => {
+            if (this.minuterie !== null)
+                clearTimeout(this.minuterie);
+        });
+    }
     valeurMasquee = computed(() => {
         const valeur = this.valeur();
         switch (this.type()) {
@@ -651,14 +916,26 @@ class StMasked {
     ...(ngDevMode ? [{ debugName: "valeurMasquee" }] : /* istanbul ignore next */ []));
     valeurAffichee = computed(() => this.revele() ? this.valeurLisible() : this.valeurMasquee(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valeurAffichee" }] : /* istanbul ignore next */ []));
+    /**
+     * La nature et la tournure viennent du dictionnaire : l'ordre des mots change
+     * d'une langue a l'autre, « IBAN se terminant par 2606 » contre « IBAN ending
+     * in 2606 ». Une chaine a trous ne suffirait pas.
+     */
     nomAccessible = computed(() => {
-        const nature = LIBELLE_DU_TYPE[this.type()];
+        const libelles = this.libelles();
+        const nature = {
+            iban: libelles.natureIban,
+            carte: libelles.natureCarte,
+            telephone: libelles.natureTelephone,
+        }[this.type()];
         if (this.revele())
             return `${nature} ${this.valeurLisible()}`;
-        return `${nature} se terminant par ${quatreDerniers(this.valeur())}`;
+        return libelles.seTerminantPar(nature, quatreDerniers(this.valeur()));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nomAccessible" }] : /* istanbul ignore next */ []));
-    libelleDuBouton = computed(() => this.revele() ? this.libelleMasquer() : this.libelleAfficher(), /* @ts-ignore */
+    libelleDuBouton = computed(() => this.revele()
+        ? (this.libelleMasquer() ?? this.libelles().masquer)
+        : (this.libelleAfficher() ?? this.libelles().afficher), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "libelleDuBouton" }] : /* istanbul ignore next */ []));
     valeurLisible() {
         return this.type() === 'iban' ? formaterIban(this.valeur()) : this.valeur();
@@ -670,7 +947,6 @@ class StMasked {
         }
         this.revele.set(true);
         this.revelation.emit({ type: this.type() });
-        this.annonce.set('');
         // Re-masquage automatique : une valeur revelee puis oubliee a l'ecran est
         // lisible par quiconque passe derriere.
         if (this.minuterie !== null)
@@ -678,10 +954,6 @@ class StMasked {
         this.minuterie = setTimeout(() => {
             this.masquer();
         }, this.dureeDeRevelationEnSecondes() * 1000);
-        this.destruction.onDestroy(() => {
-            if (this.minuterie !== null)
-                clearTimeout(this.minuterie);
-        });
     }
     masquer() {
         if (this.minuterie !== null) {
@@ -691,15 +963,15 @@ class StMasked {
         if (!this.revele())
             return;
         this.revele.set(false);
-        this.annonce.set('Valeur masquee a nouveau');
+        this.annonce.annoncer(this.libelles().valeurMasqueeANouveau);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StMasked, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StMasked, isStandalone: true, selector: "st-masked", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, revele: { classPropertyName: "revele", publicName: "revele", isSignal: true, isRequired: false, transformFunction: null }, revelationAutorisee: { classPropertyName: "revelationAutorisee", publicName: "revelationAutorisee", isSignal: true, isRequired: false, transformFunction: null }, dureeDeRevelationEnSecondes: { classPropertyName: "dureeDeRevelationEnSecondes", publicName: "dureeDeRevelationEnSecondes", isSignal: true, isRequired: false, transformFunction: null }, libelleAfficher: { classPropertyName: "libelleAfficher", publicName: "libelleAfficher", isSignal: true, isRequired: false, transformFunction: null }, libelleMasquer: { classPropertyName: "libelleMasquer", publicName: "libelleMasquer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { revele: "reveleChange", revelation: "revelation" }, host: { properties: { "attr.data-type": "type()" }, classAttribute: "st-masked" }, ngImport: i0, template: "<span class=\"st-masked__valeur\" [attr.aria-label]=\"nomAccessible()\">{{ valeurAffichee() }}</span>\n\n@if (revelationAutorisee()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    taille=\"sm\"\n    [icone]=\"revele() ? 'oeil-barre' : 'oeil'\"\n    [etiquette]=\"libelleDuBouton()\"\n    [enfonce]=\"revele()\"\n    (click)=\"basculer()\"\n  ></button>\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ texteDAnnonce() }}</span>\n", styles: [":host{display:inline-flex;gap:var(--st-espacement-2);align-items:center}.st-masked__valeur{font-family:var(--st-police-mono);color:var(--st-couleur-texte);letter-spacing:.02em}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"], outputs: ["enfonceChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StMasked, isStandalone: true, selector: "st-masked", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, revele: { classPropertyName: "revele", publicName: "revele", isSignal: true, isRequired: false, transformFunction: null }, revelationAutorisee: { classPropertyName: "revelationAutorisee", publicName: "revelationAutorisee", isSignal: true, isRequired: false, transformFunction: null }, dureeDeRevelationEnSecondes: { classPropertyName: "dureeDeRevelationEnSecondes", publicName: "dureeDeRevelationEnSecondes", isSignal: true, isRequired: false, transformFunction: null }, libelleAfficher: { classPropertyName: "libelleAfficher", publicName: "libelleAfficher", isSignal: true, isRequired: false, transformFunction: null }, libelleMasquer: { classPropertyName: "libelleMasquer", publicName: "libelleMasquer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { revele: "reveleChange", revelation: "revelation" }, host: { properties: { "attr.data-type": "type()" }, classAttribute: "st-masked" }, ngImport: i0, template: "<span class=\"st-masked__valeur\" aria-hidden=\"true\">{{ valeurAffichee() }}</span>\n<span class=\"st-vh\">{{ nomAccessible() }}</span>\n\n@if (revelationAutorisee()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    taille=\"sm\"\n    [icone]=\"revele() ? 'oeil-barre' : 'oeil'\"\n    [etiquette]=\"libelleDuBouton()\"\n    [enfonce]=\"revele()\"\n    (click)=\"basculer()\"\n  ></button>\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [":host([hidden]){display:none!important}:host{display:inline-flex;gap:var(--st-espacement-2);align-items:center}.st-masked__valeur{font-family:var(--st-police-mono);color:var(--st-couleur-texte);letter-spacing:.02em}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StMasked, decorators: [{
             type: Component,
-            args: [{ selector: 'st-masked', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIconButton], host: { class: 'st-masked', '[attr.data-type]': 'type()' }, template: "<span class=\"st-masked__valeur\" [attr.aria-label]=\"nomAccessible()\">{{ valeurAffichee() }}</span>\n\n@if (revelationAutorisee()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    taille=\"sm\"\n    [icone]=\"revele() ? 'oeil-barre' : 'oeil'\"\n    [etiquette]=\"libelleDuBouton()\"\n    [enfonce]=\"revele()\"\n    (click)=\"basculer()\"\n  ></button>\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ texteDAnnonce() }}</span>\n", styles: [":host{display:inline-flex;gap:var(--st-espacement-2);align-items:center}.st-masked__valeur{font-family:var(--st-police-mono);color:var(--st-couleur-texte);letter-spacing:.02em}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
-        }], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], revele: [{ type: i0.Input, args: [{ isSignal: true, alias: "revele", required: false }] }, { type: i0.Output, args: ["reveleChange"] }], revelationAutorisee: [{ type: i0.Input, args: [{ isSignal: true, alias: "revelationAutorisee", required: false }] }], dureeDeRevelationEnSecondes: [{ type: i0.Input, args: [{ isSignal: true, alias: "dureeDeRevelationEnSecondes", required: false }] }], libelleAfficher: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleAfficher", required: false }] }], libelleMasquer: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleMasquer", required: false }] }], revelation: [{ type: i0.Output, args: ["revelation"] }] } });
+            args: [{ selector: 'st-masked', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIconButton], host: { class: 'st-masked', '[attr.data-type]': 'type()' }, template: "<span class=\"st-masked__valeur\" aria-hidden=\"true\">{{ valeurAffichee() }}</span>\n<span class=\"st-vh\">{{ nomAccessible() }}</span>\n\n@if (revelationAutorisee()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    taille=\"sm\"\n    [icone]=\"revele() ? 'oeil-barre' : 'oeil'\"\n    [etiquette]=\"libelleDuBouton()\"\n    [enfonce]=\"revele()\"\n    (click)=\"basculer()\"\n  ></button>\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [":host([hidden]){display:none!important}:host{display:inline-flex;gap:var(--st-espacement-2);align-items:center}.st-masked__valeur{font-family:var(--st-police-mono);color:var(--st-couleur-texte);letter-spacing:.02em}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], revele: [{ type: i0.Input, args: [{ isSignal: true, alias: "revele", required: false }] }, { type: i0.Output, args: ["reveleChange"] }], revelationAutorisee: [{ type: i0.Input, args: [{ isSignal: true, alias: "revelationAutorisee", required: false }] }], dureeDeRevelationEnSecondes: [{ type: i0.Input, args: [{ isSignal: true, alias: "dureeDeRevelationEnSecondes", required: false }] }], libelleAfficher: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleAfficher", required: false }] }], libelleMasquer: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleMasquer", required: false }] }], revelation: [{ type: i0.Output, args: ["revelation"] }] } });
 
 /**
  * Somme d'argent.
@@ -713,13 +985,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * contraste ne doivent jamais transformer un debit en credit.
  */
 class StMoney {
-    locale = inject(LOCALE_ID);
+    locale = inject(ST_LOCALE);
     valeur = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valeur" }] : /* istanbul ignore next */ []));
-    signeExplicite = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "signeExplicite" }] : /* istanbul ignore next */ []));
-    sansDevise = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sansDevise" }] : /* istanbul ignore next */ []));
+    signeExplicite = input(false, { ...(ngDevMode ? { debugName: "signeExplicite" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    sansDevise = input(false, { ...(ngDevMode ? { debugName: "sansDevise" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     taille = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "taille" }] : /* istanbul ignore next */ []));
     signe = computed(() => {
@@ -732,13 +1002,13 @@ class StMoney {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "signe" }] : /* istanbul ignore next */ []));
     texte = computed(() => formaterMontant(this.valeur(), {
-        locale: this.locale,
+        locale: this.locale(),
         signeExplicite: this.signeExplicite(),
         sansDevise: this.sansDevise(),
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "texte" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StMoney, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StMoney, isStandalone: true, selector: "st-money", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, signeExplicite: { classPropertyName: "signeExplicite", publicName: "signeExplicite", isSignal: true, isRequired: false, transformFunction: null }, sansDevise: { classPropertyName: "sansDevise", publicName: "sansDevise", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-signe": "signe()" }, classAttribute: "st-money" }, ngImport: i0, template: "{{ texte() }}\n", styles: [":host{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-texte);white-space:nowrap}:host([data-signe=negatif]){color:var(--st-couleur-danger)}:host([data-taille=sm]){font-size:var(--st-taille-sm)}:host([data-taille=lg]){font-size:var(--st-taille-lg)}:host([data-taille=xl]){font-size:var(--st-taille-xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StMoney, isStandalone: true, selector: "st-money", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, signeExplicite: { classPropertyName: "signeExplicite", publicName: "signeExplicite", isSignal: true, isRequired: false, transformFunction: null }, sansDevise: { classPropertyName: "sansDevise", publicName: "sansDevise", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-signe": "signe()" }, classAttribute: "st-money" }, ngImport: i0, template: "{{ texte() }}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-texte);white-space:nowrap}:host([data-signe=negatif]){color:var(--st-couleur-danger)}:host([data-taille=sm]){font-size:var(--st-taille-sm)}:host([data-taille=lg]){font-size:var(--st-taille-lg)}:host([data-taille=xl]){font-size:var(--st-taille-xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StMoney, decorators: [{
             type: Component,
@@ -746,7 +1016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'st-money',
                         '[attr.data-taille]': 'taille()',
                         '[attr.data-signe]': 'signe()',
-                    }, template: "{{ texte() }}\n", styles: [":host{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-texte);white-space:nowrap}:host([data-signe=negatif]){color:var(--st-couleur-danger)}:host([data-taille=sm]){font-size:var(--st-taille-sm)}:host([data-taille=lg]){font-size:var(--st-taille-lg)}:host([data-taille=xl]){font-size:var(--st-taille-xl)}\n"] }]
+                    }, template: "{{ texte() }}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-texte);white-space:nowrap}:host([data-signe=negatif]){color:var(--st-couleur-danger)}:host([data-taille=sm]){font-size:var(--st-taille-sm)}:host([data-taille=lg]){font-size:var(--st-taille-lg)}:host([data-taille=xl]){font-size:var(--st-taille-xl)}\n"] }]
         }], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: true }] }], signeExplicite: [{ type: i0.Input, args: [{ isSignal: true, alias: "signeExplicite", required: false }] }], sansDevise: [{ type: i0.Input, args: [{ isSignal: true, alias: "sansDevise", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }] } });
 
 const OPTIONS = {
@@ -773,7 +1043,7 @@ const OPTIONS = {
  * ambigu a l'oral, et l'ordre jour-mois n'est pas universel.
  */
 class StDate {
-    locale = inject(LOCALE_ID);
+    locale = inject(ST_LOCALE);
     fuseauParDefaut = inject(FUSEAU_PAR_DEFAUT);
     valeur = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valeur" }] : /* istanbul ignore next */ []));
@@ -781,6 +1051,20 @@ class StDate {
     ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
     fuseau = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fuseau" }] : /* istanbul ignore next */ []));
+    /**
+     * Une DATE DE CALENDRIER (`2026-09-12`) n'est pas un instant : une date de
+     * naissance, une echeance ou un jour de valeur n'ont pas d'heure, et ne
+     * doivent pas changer de jour selon le fuseau de qui les regarde.
+     *
+     * ⚠️ Le piege est dans la norme : `new Date('2026-09-12')` vaut minuit UTC,
+     * donc le 11 septembre partout a l'ouest de Greenwich. Une echeance affichee
+     * la veille est un defaut que personne ne voit depuis l'Europe.
+     */
+    estDateDeCalendrier = computed(() => {
+        const valeur = this.valeur();
+        return typeof valeur === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(valeur);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "estDateDeCalendrier" }] : /* istanbul ignore next */ []));
     date = computed(() => {
         const valeur = this.valeur();
         return valeur instanceof Date ? valeur : new Date(valeur);
@@ -788,14 +1072,44 @@ class StDate {
     ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
     estValide = computed(() => !Number.isNaN(this.date().getTime()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "estValide" }] : /* istanbul ignore next */ []));
-    iso = computed(() => (this.estValide() ? this.date().toISOString() : null), /* @ts-ignore */
+    /**
+     * Le fuseau de rendu. Pour une date de calendrier, c'est UTC : la valeur a
+     * ete construite a minuit UTC, la relire en UTC rend donc le jour ecrit.
+     */
+    fuseauDeRendu = computed(() => this.estDateDeCalendrier() ? 'UTC' : (this.fuseau() ?? this.fuseauParDefaut), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fuseauDeRendu" }] : /* istanbul ignore next */ []));
+    /**
+     * Une date de calendrier porte `2026-09-12`, sans heure ni decalage : c'est
+     * la forme que la norme HTML attend, et la seule qui ne mente pas.
+     */
+    iso = computed(() => {
+        if (!this.estValide())
+            return null;
+        if (this.estDateDeCalendrier())
+            return this.date().toISOString().slice(0, 10);
+        return this.date().toISOString();
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iso" }] : /* istanbul ignore next */ []));
+    /** Une date sans heure ne peut pas en afficher une. */
+    optionsDeFormat = computed(() => {
+        const options = OPTIONS[this.format()];
+        if (!this.estDateDeCalendrier())
+            return options;
+        // Le format « heure » n'a aucun sens ici : il ne resterait rien a afficher.
+        if (this.format() === 'heure')
+            return OPTIONS.court;
+        const sansHeure = { ...options };
+        delete sansHeure.hour;
+        delete sansHeure.minute;
+        return sansHeure;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionsDeFormat" }] : /* istanbul ignore next */ []));
     texte = computed(() => {
         if (!this.estValide())
             return '';
-        return new Intl.DateTimeFormat(this.locale, {
-            ...OPTIONS[this.format()],
-            timeZone: this.fuseau() ?? this.fuseauParDefaut,
+        return new Intl.DateTimeFormat(this.locale(), {
+            ...this.optionsDeFormat(),
+            timeZone: this.fuseauDeRendu(),
         }).format(this.date());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "texte" }] : /* istanbul ignore next */ []));
@@ -804,20 +1118,20 @@ class StDate {
         if (!this.estValide())
             return '';
         if (this.format() === 'court') {
-            return new Intl.DateTimeFormat(this.locale, {
+            return new Intl.DateTimeFormat(this.locale(), {
                 ...OPTIONS.long,
-                timeZone: this.fuseau() ?? this.fuseauParDefaut,
+                timeZone: this.fuseauDeRendu(),
             }).format(this.date());
         }
         return null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "texteAccessible" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDate, isStandalone: true, selector: "st-date", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, fuseau: { classPropertyName: "fuseau", publicName: "fuseau", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-date" }, ngImport: i0, template: "@if (estValide()) {\n  <time [attr.datetime]=\"iso()\" [attr.aria-label]=\"texteAccessible()\">{{ texte() }}</time>\n}\n", styles: [":host{font-variant-numeric:tabular-nums;color:var(--st-couleur-texte);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDate, isStandalone: true, selector: "st-date", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, fuseau: { classPropertyName: "fuseau", publicName: "fuseau", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-date" }, ngImport: i0, template: "@if (estValide()) {\n  <time [attr.datetime]=\"iso()\" aria-hidden=\"true\">{{ texte() }}</time>\n  @if (texteAccessible(); as lu) {\n    <!-- Rien quand le format affiche se lit deja : un noeud vide ferait\n         croire a un texte de remplacement absent. -->\n    <span class=\"st-vh\">{{ lu }}</span>\n  }\n}\n", styles: [":host([hidden]){display:none!important}:host{font-variant-numeric:tabular-nums;color:var(--st-couleur-texte);white-space:nowrap}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDate, decorators: [{
             type: Component,
-            args: [{ selector: 'st-date', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-date' }, template: "@if (estValide()) {\n  <time [attr.datetime]=\"iso()\" [attr.aria-label]=\"texteAccessible()\">{{ texte() }}</time>\n}\n", styles: [":host{font-variant-numeric:tabular-nums;color:var(--st-couleur-texte);white-space:nowrap}\n"] }]
+            args: [{ selector: 'st-date', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-date' }, template: "@if (estValide()) {\n  <time [attr.datetime]=\"iso()\" aria-hidden=\"true\">{{ texte() }}</time>\n  @if (texteAccessible(); as lu) {\n    <!-- Rien quand le format affiche se lit deja : un noeud vide ferait\n         croire a un texte de remplacement absent. -->\n    <span class=\"st-vh\">{{ lu }}</span>\n  }\n}\n", styles: [":host([hidden]){display:none!important}:host{font-variant-numeric:tabular-nums;color:var(--st-couleur-texte);white-space:nowrap}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
         }], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: true }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], fuseau: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuseau", required: false }] }] } });
 
 const MINUTE = 60_000;
@@ -834,12 +1148,12 @@ const JOUR = 24 * HEURE;
  * vieille de trois jours reveille l'onglet pour rien.
  */
 class StRelativeTime {
-    locale = inject(LOCALE_ID);
+    locale = inject(ST_LOCALE);
+    libelles = inject(ST_LIBELLES);
     fuseau = inject(FUSEAU_PAR_DEFAUT);
     valeur = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valeur" }] : /* istanbul ignore next */ []));
-    rafraichir = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rafraichir" }] : /* istanbul ignore next */ []));
+    rafraichir = input(true, { ...(ngDevMode ? { debugName: "rafraichir" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Au-dela de ce nombre de jours, la date absolue est plus parlante. */
     seuilAbsoluEnJours = input(7, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "seuilAbsoluEnJours" }] : /* istanbul ignore next */ []));
@@ -887,7 +1201,7 @@ class StRelativeTime {
             return '';
         const cible = this.dateEnMillisecondes();
         if (this.depasseLeSeuil()) {
-            return new Intl.DateTimeFormat(this.locale, {
+            return new Intl.DateTimeFormat(this.locale(), {
                 day: 'numeric',
                 month: 'long',
                 year: 'numeric',
@@ -898,8 +1212,8 @@ class StRelativeTime {
         const absolu = Math.abs(ecart);
         // Sous dix secondes, « il y a 0 seconde » est plus deroutant qu'utile.
         if (absolu < 10_000)
-            return "a l'instant";
-        const format = new Intl.RelativeTimeFormat(this.locale, { numeric: 'auto' });
+            return this.libelles().aLInstant;
+        const format = new Intl.RelativeTimeFormat(this.locale(), { numeric: 'auto' });
         if (absolu < MINUTE)
             return format.format(Math.round(ecart / 1000), 'second');
         if (absolu < HEURE)
@@ -912,7 +1226,7 @@ class StRelativeTime {
     texteAccessible = computed(() => {
         if (!this.estValide())
             return '';
-        return new Intl.DateTimeFormat(this.locale, {
+        return new Intl.DateTimeFormat(this.locale(), {
             day: 'numeric',
             month: 'long',
             year: 'numeric',
@@ -923,11 +1237,11 @@ class StRelativeTime {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "texteAccessible" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StRelativeTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StRelativeTime, isStandalone: true, selector: "st-relative-time", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, rafraichir: { classPropertyName: "rafraichir", publicName: "rafraichir", isSignal: true, isRequired: false, transformFunction: null }, seuilAbsoluEnJours: { classPropertyName: "seuilAbsoluEnJours", publicName: "seuilAbsoluEnJours", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-relative-time" }, ngImport: i0, template: "@if (estValide()) {\n  <time [attr.datetime]=\"iso()\" [attr.aria-label]=\"texteAccessible()\">{{ texte() }}</time>\n}\n", styles: [":host{font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StRelativeTime, isStandalone: true, selector: "st-relative-time", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, rafraichir: { classPropertyName: "rafraichir", publicName: "rafraichir", isSignal: true, isRequired: false, transformFunction: null }, seuilAbsoluEnJours: { classPropertyName: "seuilAbsoluEnJours", publicName: "seuilAbsoluEnJours", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-relative-time" }, ngImport: i0, template: "@if (estValide()) {\n  <time [attr.datetime]=\"iso()\" aria-hidden=\"true\">{{ texte() }}</time>\n  @if (texteAccessible(); as lu) {\n    <!-- Rien quand le format affiche se lit deja : un noeud vide ferait\n         croire a un texte de remplacement absent. -->\n    <span class=\"st-vh\">{{ lu }}</span>\n  }\n}\n", styles: [":host([hidden]){display:none!important}:host{font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StRelativeTime, decorators: [{
             type: Component,
-            args: [{ selector: 'st-relative-time', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-relative-time' }, template: "@if (estValide()) {\n  <time [attr.datetime]=\"iso()\" [attr.aria-label]=\"texteAccessible()\">{{ texte() }}</time>\n}\n", styles: [":host{font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}\n"] }]
+            args: [{ selector: 'st-relative-time', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-relative-time' }, template: "@if (estValide()) {\n  <time [attr.datetime]=\"iso()\" aria-hidden=\"true\">{{ texte() }}</time>\n  @if (texteAccessible(); as lu) {\n    <!-- Rien quand le format affiche se lit deja : un noeud vide ferait\n         croire a un texte de remplacement absent. -->\n    <span class=\"st-vh\">{{ lu }}</span>\n  }\n}\n", styles: [":host([hidden]){display:none!important}:host{font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: true }] }], rafraichir: [{ type: i0.Input, args: [{ isSignal: true, alias: "rafraichir", required: false }] }], seuilAbsoluEnJours: [{ type: i0.Input, args: [{ isSignal: true, alias: "seuilAbsoluEnJours", required: false }] }] } });
 
 /**
@@ -940,10 +1254,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * d'information pour qui ecoute la page.
  */
 class StCount {
-    locale = inject(LOCALE_ID);
+    locale = inject(ST_LOCALE);
     valeur = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valeur" }] : /* istanbul ignore next */ []));
-    ton = input('courant', /* @ts-ignore */
+    ton = input('neutre', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ton" }] : /* istanbul ignore next */ []));
     /** `null` : jamais d'abreviation. */
     abregerAuDela = input(1000, /* @ts-ignore */
@@ -953,27 +1267,26 @@ class StCount {
         return seuil !== null && Math.abs(this.valeur()) >= seuil;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "estAbrege" }] : /* istanbul ignore next */ []));
-    texteComplet = computed(() => new Intl.NumberFormat(this.locale).format(this.valeur()), /* @ts-ignore */
+    texteComplet = computed(() => new Intl.NumberFormat(this.locale()).format(this.valeur()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "texteComplet" }] : /* istanbul ignore next */ []));
     texte = computed(() => {
         if (!this.estAbrege())
             return this.texteComplet();
-        return new Intl.NumberFormat(this.locale, {
+        return new Intl.NumberFormat(this.locale(), {
             notation: 'compact',
             maximumFractionDigits: 1,
         }).format(this.valeur());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "texte" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCount, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StCount, isStandalone: true, selector: "st-count", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, abregerAuDela: { classPropertyName: "abregerAuDela", publicName: "abregerAuDela", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ton": "ton()", "attr.aria-label": "estAbrege() ? texteComplet() : null" }, classAttribute: "st-count" }, ngImport: i0, template: "{{ texte() }}\n", styles: [":host{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-texte);white-space:nowrap}:host([data-ton=discret]){color:var(--st-couleur-texte-discret)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StCount, isStandalone: true, selector: "st-count", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, abregerAuDela: { classPropertyName: "abregerAuDela", publicName: "abregerAuDela", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ton": "ton()" }, classAttribute: "st-count" }, ngImport: i0, template: "<span aria-hidden=\"true\">{{ texte() }}</span>\n\n@if (estAbrege()) {\n  <!-- Abrege a l'ecran, entier a l'oral : \u00AB 1,2 k \u00BB ne se lit pas. -->\n  <span class=\"st-vh\">{{ texteComplet() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-texte);white-space:nowrap}:host([data-ton=discret]){color:var(--st-couleur-texte-discret)}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCount, decorators: [{
             type: Component,
             args: [{ selector: 'st-count', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'st-count',
                         '[attr.data-ton]': 'ton()',
-                        '[attr.aria-label]': 'estAbrege() ? texteComplet() : null',
-                    }, template: "{{ texte() }}\n", styles: [":host{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-texte);white-space:nowrap}:host([data-ton=discret]){color:var(--st-couleur-texte-discret)}\n"] }]
+                    }, template: "<span aria-hidden=\"true\">{{ texte() }}</span>\n\n@if (estAbrege()) {\n  <!-- Abrege a l'ecran, entier a l'oral : \u00AB 1,2 k \u00BB ne se lit pas. -->\n  <span class=\"st-vh\">{{ texteComplet() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-texte);white-space:nowrap}:host([data-ton=discret]){color:var(--st-couleur-texte-discret)}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
         }], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: true }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], abregerAuDela: [{ type: i0.Input, args: [{ isSignal: true, alias: "abregerAuDela", required: false }] }] } });
 
 /**
@@ -1000,7 +1313,7 @@ class StStatusPill {
     ton = input('neutre', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ton" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StStatusPill, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StStatusPill, isStandalone: true, selector: "st-status-pill", inputs: { statut: { classPropertyName: "statut", publicName: "statut", isSignal: true, isRequired: true, transformFunction: null }, libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null }, icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: true, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ton": "ton()", "attr.data-statut": "statut()" }, classAttribute: "st-status-pill" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" taille=\"sm\" />\n<span class=\"st-status-pill__libelle\">{{ libelle() }}</span>\n", styles: [":host{display:inline-flex;gap:var(--st-espacement-2);align-items:center;min-block-size:1.5rem;padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}:host([data-ton=info]){color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret)}:host([data-ton=succes]){color:var(--st-couleur-sur-succes-discret);background:var(--st-couleur-succes-discret)}:host([data-ton=avertissement]){color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret)}:host([data-ton=danger]){color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret)}.st-status-pill__libelle{white-space:normal}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StStatusPill, isStandalone: true, selector: "st-status-pill", inputs: { statut: { classPropertyName: "statut", publicName: "statut", isSignal: true, isRequired: true, transformFunction: null }, libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null }, icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: true, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ton": "ton()", "attr.data-statut": "statut()" }, classAttribute: "st-status-pill" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" taille=\"sm\" />\n<span class=\"st-status-pill__libelle\">{{ libelle() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;gap:var(--st-espacement-2);align-items:center;min-block-size:1.5rem;padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}:host([data-ton=primaire]){color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret)}:host([data-ton=succes]){color:var(--st-couleur-sur-succes-discret);background:var(--st-couleur-succes-discret)}:host([data-ton=avertissement]){color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret)}:host([data-ton=danger]){color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret)}.st-status-pill__libelle{white-space:normal}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StStatusPill, decorators: [{
             type: Component,
@@ -1008,7 +1321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'st-status-pill',
                         '[attr.data-ton]': 'ton()',
                         '[attr.data-statut]': 'statut()',
-                    }, template: "<st-icon [nom]=\"icone()\" taille=\"sm\" />\n<span class=\"st-status-pill__libelle\">{{ libelle() }}</span>\n", styles: [":host{display:inline-flex;gap:var(--st-espacement-2);align-items:center;min-block-size:1.5rem;padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}:host([data-ton=info]){color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret)}:host([data-ton=succes]){color:var(--st-couleur-sur-succes-discret);background:var(--st-couleur-succes-discret)}:host([data-ton=avertissement]){color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret)}:host([data-ton=danger]){color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret)}.st-status-pill__libelle{white-space:normal}\n"] }]
+                    }, template: "<st-icon [nom]=\"icone()\" taille=\"sm\" />\n<span class=\"st-status-pill__libelle\">{{ libelle() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;gap:var(--st-espacement-2);align-items:center;min-block-size:1.5rem;padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}:host([data-ton=primaire]){color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret)}:host([data-ton=succes]){color:var(--st-couleur-sur-succes-discret);background:var(--st-couleur-succes-discret)}:host([data-ton=avertissement]){color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret)}:host([data-ton=danger]){color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret)}.st-status-pill__libelle{white-space:normal}\n"] }]
         }], propDecorators: { statut: [{ type: i0.Input, args: [{ isSignal: true, alias: "statut", required: true }] }], libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }], icone: [{ type: i0.Input, args: [{ isSignal: true, alias: "icone", required: true }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }] } });
 
 /**
@@ -1028,8 +1341,7 @@ class StBadge {
     ton = input('danger', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ton" }] : /* istanbul ignore next */ []));
     /** Point seul, sans chiffre : signale une nouveaute sans la quantifier. */
-    point = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "point" }] : /* istanbul ignore next */ []));
+    point = input(false, { ...(ngDevMode ? { debugName: "point" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     texte = computed(() => {
         if (this.point())
             return '';
@@ -1042,7 +1354,7 @@ class StBadge {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "texte" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StBadge, isStandalone: true, selector: "st-badge", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, point: { classPropertyName: "point", publicName: "point", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-ton": "ton()", "attr.data-point": "point() ? \"\" : null" }, classAttribute: "st-badge" }, ngImport: i0, template: "{{ texte() }}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;min-inline-size:1.25rem;block-size:1.25rem;padding-inline:var(--st-espacement-1);font-size:var(--st-taille-xs);font-weight:var(--st-graisse-semi);line-height:1;color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border:2px solid var(--st-couleur-surface);border-radius:var(--st-rayon-pleine)}:host([data-point]){inline-size:.5rem;min-inline-size:0;block-size:.5rem;padding:0}:host([data-ton=neutre]){color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee)}:host([data-ton=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-sur-succes);background:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-sur-avertissement);background:var(--st-couleur-avertissement)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StBadge, isStandalone: true, selector: "st-badge", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, point: { classPropertyName: "point", publicName: "point", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-ton": "ton()", "attr.data-point": "point() ? \"\" : null" }, classAttribute: "st-badge" }, ngImport: i0, template: "{{ texte() }}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;align-items:center;justify-content:center;min-inline-size:1.25rem;block-size:1.25rem;padding-inline:var(--st-espacement-1);font-size:var(--st-taille-xs);font-weight:var(--st-graisse-semi);line-height:1;color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border:2px solid var(--st-couleur-surface);border-radius:var(--st-rayon-pleine)}:host([data-point]){inline-size:.5rem;min-inline-size:0;block-size:.5rem;padding:0}:host([data-ton=neutre]){color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee)}:host([data-ton=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-sur-succes);background:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-sur-avertissement);background:var(--st-couleur-avertissement)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StBadge, decorators: [{
             type: Component,
@@ -1051,7 +1363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         'aria-hidden': 'true',
                         '[attr.data-ton]': 'ton()',
                         '[attr.data-point]': 'point() ? "" : null',
-                    }, template: "{{ texte() }}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;min-inline-size:1.25rem;block-size:1.25rem;padding-inline:var(--st-espacement-1);font-size:var(--st-taille-xs);font-weight:var(--st-graisse-semi);line-height:1;color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border:2px solid var(--st-couleur-surface);border-radius:var(--st-rayon-pleine)}:host([data-point]){inline-size:.5rem;min-inline-size:0;block-size:.5rem;padding:0}:host([data-ton=neutre]){color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee)}:host([data-ton=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-sur-succes);background:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-sur-avertissement);background:var(--st-couleur-avertissement)}\n"] }]
+                    }, template: "{{ texte() }}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;align-items:center;justify-content:center;min-inline-size:1.25rem;block-size:1.25rem;padding-inline:var(--st-espacement-1);font-size:var(--st-taille-xs);font-weight:var(--st-graisse-semi);line-height:1;color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border:2px solid var(--st-couleur-surface);border-radius:var(--st-rayon-pleine)}:host([data-point]){inline-size:.5rem;min-inline-size:0;block-size:.5rem;padding:0}:host([data-ton=neutre]){color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee)}:host([data-ton=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-sur-succes);background:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-sur-avertissement);background:var(--st-couleur-avertissement)}\n"] }]
         }], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], point: [{ type: i0.Input, args: [{ isSignal: true, alias: "point", required: false }] }] } });
 
 /**
@@ -1064,16 +1376,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  */
 class StTag {
     element = inject(ElementRef);
+    libelles = inject(ST_LIBELLES);
     libelle = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []));
-    supprimable = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "supprimable" }] : /* istanbul ignore next */ []));
+    supprimable = input(false, { ...(ngDevMode ? { debugName: "supprimable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     ton = input('neutre', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ton" }] : /* istanbul ignore next */ []));
-    prefixeDeSuppression = input('Retirer', /* @ts-ignore */
+    /** `null` : le texte vient du dictionnaire de l'application. */
+    prefixeDeSuppression = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "prefixeDeSuppression" }] : /* istanbul ignore next */ []));
     supprime = output();
-    libelleDeSuppression = computed(() => `${this.prefixeDeSuppression()} ${this.libelle()}`, /* @ts-ignore */
+    libelleDeSuppression = computed(() => `${this.prefixeDeSuppression() ?? this.libelles().retirer} ${this.libelle()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "libelleDeSuppression" }] : /* istanbul ignore next */ []));
     auRetrait() {
         this.deplacerLeFocus();
@@ -1100,14 +1413,14 @@ class StTag {
             parent.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StTag, isStandalone: true, selector: "st-tag", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null }, supprimable: { classPropertyName: "supprimable", publicName: "supprimable", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, prefixeDeSuppression: { classPropertyName: "prefixeDeSuppression", publicName: "prefixeDeSuppression", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { supprime: "supprime" }, host: { properties: { "attr.data-ton": "ton()" }, classAttribute: "st-tag" }, ngImport: i0, template: "<span class=\"st-tag__libelle\">{{ libelle() }}</span>\n\n@if (supprimable()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"croix\"\n    taille=\"sm\"\n    [etiquette]=\"libelleDeSuppression()\"\n    (click)=\"auRetrait()\"\n  ></button>\n}\n", styles: [":host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:2rem;padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-sm)}:host([data-ton=primaire]){color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret);border-color:transparent}:host ::ng-deep .st-icon-button{min-inline-size:1.5rem;min-block-size:1.5rem}@media(pointer:coarse){:host ::ng-deep .st-icon-button{min-inline-size:var(--st-cible-tactile-min);min-block-size:var(--st-cible-tactile-min)}}\n"], dependencies: [{ kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"], outputs: ["enfonceChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StTag, isStandalone: true, selector: "st-tag", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null }, supprimable: { classPropertyName: "supprimable", publicName: "supprimable", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, prefixeDeSuppression: { classPropertyName: "prefixeDeSuppression", publicName: "prefixeDeSuppression", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { supprime: "supprime" }, host: { properties: { "attr.data-ton": "ton()" }, classAttribute: "st-tag" }, ngImport: i0, template: "<span class=\"st-tag__libelle\">{{ libelle() }}</span>\n\n@if (supprimable()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"croix\"\n    taille=\"sm\"\n    [etiquette]=\"libelleDeSuppression()\"\n    (click)=\"auRetrait()\"\n  ></button>\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:2rem;padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-sm)}:host([data-ton=primaire]){color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret);border-color:transparent}:host ::ng-deep .st-icon-button{min-inline-size:1.5rem;min-block-size:1.5rem}@media(pointer:coarse){:host ::ng-deep .st-icon-button{min-inline-size:var(--st-cible-tactile-min);min-block-size:var(--st-cible-tactile-min)}}\n"], dependencies: [{ kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTag, decorators: [{
             type: Component,
             args: [{ selector: 'st-tag', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIconButton], host: {
                         class: 'st-tag',
                         '[attr.data-ton]': 'ton()',
-                    }, template: "<span class=\"st-tag__libelle\">{{ libelle() }}</span>\n\n@if (supprimable()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"croix\"\n    taille=\"sm\"\n    [etiquette]=\"libelleDeSuppression()\"\n    (click)=\"auRetrait()\"\n  ></button>\n}\n", styles: [":host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:2rem;padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-sm)}:host([data-ton=primaire]){color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret);border-color:transparent}:host ::ng-deep .st-icon-button{min-inline-size:1.5rem;min-block-size:1.5rem}@media(pointer:coarse){:host ::ng-deep .st-icon-button{min-inline-size:var(--st-cible-tactile-min);min-block-size:var(--st-cible-tactile-min)}}\n"] }]
+                    }, template: "<span class=\"st-tag__libelle\">{{ libelle() }}</span>\n\n@if (supprimable()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"croix\"\n    taille=\"sm\"\n    [etiquette]=\"libelleDeSuppression()\"\n    (click)=\"auRetrait()\"\n  ></button>\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:2rem;padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-sm)}:host([data-ton=primaire]){color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret);border-color:transparent}:host ::ng-deep .st-icon-button{min-inline-size:1.5rem;min-block-size:1.5rem}@media(pointer:coarse){:host ::ng-deep .st-icon-button{min-inline-size:var(--st-cible-tactile-min);min-block-size:var(--st-cible-tactile-min)}}\n"] }]
         }], propDecorators: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }], supprimable: [{ type: i0.Input, args: [{ isSignal: true, alias: "supprimable", required: false }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], prefixeDeSuppression: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixeDeSuppression", required: false }] }], supprime: [{ type: i0.Output, args: ["supprime"] }] } });
 
 /**
@@ -1142,8 +1455,7 @@ class StAvatar {
      * `true` quand le nom figure deja a cote de l'avatar, ce qui est le cas
      * courant : l'avatar devient alors decoratif et se tait.
      */
-    nomAdjacent = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "nomAdjacent" }] : /* istanbul ignore next */ []));
+    nomAdjacent = input(true, { ...(ngDevMode ? { debugName: "nomAdjacent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     imageEchouee = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "imageEchouee" }] : /* istanbul ignore next */ []));
     afficheLImage = computed(() => this.sourceImage() !== null && !this.imageEchouee(), /* @ts-ignore */
@@ -1163,7 +1475,7 @@ class StAvatar {
         this.imageEchouee.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StAvatar, isStandalone: true, selector: "st-avatar", inputs: { nom: { classPropertyName: "nom", publicName: "nom", isSignal: true, isRequired: true, transformFunction: null }, sourceImage: { classPropertyName: "sourceImage", publicName: "sourceImage", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, forme: { classPropertyName: "forme", publicName: "forme", isSignal: true, isRequired: false, transformFunction: null }, nomAdjacent: { classPropertyName: "nomAdjacent", publicName: "nomAdjacent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-forme": "forme()" }, classAttribute: "st-avatar" }, ngImport: i0, template: "@if (afficheLImage()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/prefer-ngsrc --\n       NgOptimizedImage exige des dimensions statiques ou un chargeur configure.\n       Une photo de profil vient d'une URL tierce de dimensions inconnues, et\n       optimiser une image de 40 px ne rapporte rien. -->\n  <img [src]=\"sourceImage()\" [alt]=\"texteAlternatif()\" (error)=\"auxEchecsDImage()\" />\n} @else {\n  <span class=\"st-avatar__initiales\" [attr.aria-hidden]=\"nomAdjacent() ? 'true' : null\">{{\n    initiales()\n  }}</span>\n  @if (!nomAdjacent()) {\n    <span class=\"st-vh\">{{ nom() }}</span>\n  }\n}\n", styles: [":host{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:var(--st-avatar-taille, 2.5rem);block-size:var(--st-avatar-taille, 2.5rem);overflow:hidden;color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret);border-radius:var(--st-rayon-pleine)}img{inline-size:100%;block-size:100%;object-fit:cover}.st-avatar__initiales{font-size:.4em;font-weight:var(--st-graisse-semi);line-height:1;letter-spacing:.02em}:host([data-forme=carre]){border-radius:var(--st-rayon-md)}:host([data-taille=xs]){--st-avatar-taille: 1.5rem}:host([data-taille=sm]){--st-avatar-taille: 2rem}:host([data-taille=lg]){--st-avatar-taille: 4rem}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StAvatar, isStandalone: true, selector: "st-avatar", inputs: { nom: { classPropertyName: "nom", publicName: "nom", isSignal: true, isRequired: true, transformFunction: null }, sourceImage: { classPropertyName: "sourceImage", publicName: "sourceImage", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, forme: { classPropertyName: "forme", publicName: "forme", isSignal: true, isRequired: false, transformFunction: null }, nomAdjacent: { classPropertyName: "nomAdjacent", publicName: "nomAdjacent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-forme": "forme()" }, classAttribute: "st-avatar" }, ngImport: i0, template: "@if (afficheLImage()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/prefer-ngsrc --\n       NgOptimizedImage exige des dimensions statiques ou un chargeur configure.\n       Une photo de profil vient d'une URL tierce de dimensions inconnues, et\n       optimiser une image de 40 px ne rapporte rien. -->\n  <img [src]=\"sourceImage()\" [alt]=\"texteAlternatif()\" (error)=\"auxEchecsDImage()\" />\n} @else {\n  <span class=\"st-avatar__initiales\" [attr.aria-hidden]=\"nomAdjacent() ? 'true' : null\">{{\n    initiales()\n  }}</span>\n  @if (!nomAdjacent()) {\n    <span class=\"st-vh\">{{ nom() }}</span>\n  }\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:var(--st-avatar-taille, 2.5rem);block-size:var(--st-avatar-taille, 2.5rem);overflow:hidden;color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret);border-radius:var(--st-rayon-pleine)}img{inline-size:100%;block-size:100%;object-fit:cover}.st-avatar__initiales{font-size:.4em;font-weight:var(--st-graisse-semi);line-height:1;letter-spacing:.02em}:host([data-forme=carre]){border-radius:var(--st-rayon-md)}:host([data-taille=xs]){--st-avatar-taille: 1.5rem}:host([data-taille=sm]){--st-avatar-taille: 2rem}:host([data-taille=lg]){--st-avatar-taille: 4rem}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StAvatar, decorators: [{
             type: Component,
@@ -1171,7 +1483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'st-avatar',
                         '[attr.data-taille]': 'taille()',
                         '[attr.data-forme]': 'forme()',
-                    }, template: "@if (afficheLImage()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/prefer-ngsrc --\n       NgOptimizedImage exige des dimensions statiques ou un chargeur configure.\n       Une photo de profil vient d'une URL tierce de dimensions inconnues, et\n       optimiser une image de 40 px ne rapporte rien. -->\n  <img [src]=\"sourceImage()\" [alt]=\"texteAlternatif()\" (error)=\"auxEchecsDImage()\" />\n} @else {\n  <span class=\"st-avatar__initiales\" [attr.aria-hidden]=\"nomAdjacent() ? 'true' : null\">{{\n    initiales()\n  }}</span>\n  @if (!nomAdjacent()) {\n    <span class=\"st-vh\">{{ nom() }}</span>\n  }\n}\n", styles: [":host{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:var(--st-avatar-taille, 2.5rem);block-size:var(--st-avatar-taille, 2.5rem);overflow:hidden;color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret);border-radius:var(--st-rayon-pleine)}img{inline-size:100%;block-size:100%;object-fit:cover}.st-avatar__initiales{font-size:.4em;font-weight:var(--st-graisse-semi);line-height:1;letter-spacing:.02em}:host([data-forme=carre]){border-radius:var(--st-rayon-md)}:host([data-taille=xs]){--st-avatar-taille: 1.5rem}:host([data-taille=sm]){--st-avatar-taille: 2rem}:host([data-taille=lg]){--st-avatar-taille: 4rem}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
+                    }, template: "@if (afficheLImage()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/prefer-ngsrc --\n       NgOptimizedImage exige des dimensions statiques ou un chargeur configure.\n       Une photo de profil vient d'une URL tierce de dimensions inconnues, et\n       optimiser une image de 40 px ne rapporte rien. -->\n  <img [src]=\"sourceImage()\" [alt]=\"texteAlternatif()\" (error)=\"auxEchecsDImage()\" />\n} @else {\n  <span class=\"st-avatar__initiales\" [attr.aria-hidden]=\"nomAdjacent() ? 'true' : null\">{{\n    initiales()\n  }}</span>\n  @if (!nomAdjacent()) {\n    <span class=\"st-vh\">{{ nom() }}</span>\n  }\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:var(--st-avatar-taille, 2.5rem);block-size:var(--st-avatar-taille, 2.5rem);overflow:hidden;color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret);border-radius:var(--st-rayon-pleine)}img{inline-size:100%;block-size:100%;object-fit:cover}.st-avatar__initiales{font-size:.4em;font-weight:var(--st-graisse-semi);line-height:1;letter-spacing:.02em}:host([data-forme=carre]){border-radius:var(--st-rayon-md)}:host([data-taille=xs]){--st-avatar-taille: 1.5rem}:host([data-taille=sm]){--st-avatar-taille: 2rem}:host([data-taille=lg]){--st-avatar-taille: 4rem}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
         }], propDecorators: { nom: [{ type: i0.Input, args: [{ isSignal: true, alias: "nom", required: true }] }], sourceImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceImage", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], forme: [{ type: i0.Input, args: [{ isSignal: true, alias: "forme", required: false }] }], nomAdjacent: [{ type: i0.Input, args: [{ isSignal: true, alias: "nomAdjacent", required: false }] }] } });
 
 /**
@@ -1191,14 +1503,14 @@ class StEmpty {
     niveauDuTitre = input(3, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "niveauDuTitre" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StEmpty, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StEmpty, isStandalone: true, selector: "st-empty", inputs: { titre: { classPropertyName: "titre", publicName: "titre", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: false, transformFunction: null }, niveauDuTitre: { classPropertyName: "niveauDuTitre", publicName: "niveauDuTitre", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-empty" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" taille=\"xl\" ton=\"discret\" />\n<st-heading [niveau]=\"niveauDuTitre()\" taille=\"lg\">{{ titre() }}</st-heading>\n@if (description(); as texte) {\n  <st-text variante=\"discret\">{{ texte }}</st-text>\n}\n<div class=\"st-empty__action\"><ng-content /></div>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--st-espacement-3);align-items:center;justify-content:center;min-block-size:12rem;padding:var(--st-espacement-8);text-align:center}.st-empty__action:empty{display:none}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StHeading, selector: "st-heading", inputs: ["niveau", "taille", "identifiant"] }, { kind: "component", type: StText, selector: "st-text", inputs: ["variante", "graisse", "enLigne", "tronquerA"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StEmpty, isStandalone: true, selector: "st-empty", inputs: { titre: { classPropertyName: "titre", publicName: "titre", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: false, transformFunction: null }, niveauDuTitre: { classPropertyName: "niveauDuTitre", publicName: "niveauDuTitre", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-empty" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" taille=\"xl\" ton=\"discret\" />\n<st-heading [niveau]=\"niveauDuTitre()\" taille=\"lg\">{{ titre() }}</st-heading>\n@if (description(); as texte) {\n  <st-text variante=\"discret\">{{ texte }}</st-text>\n}\n<div class=\"st-empty__action\"><ng-content /></div>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;flex-direction:column;gap:var(--st-espacement-3);align-items:center;justify-content:center;min-block-size:12rem;padding:var(--st-espacement-8);text-align:center}.st-empty__action:empty{display:none}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StHeading, selector: "st-heading", inputs: ["niveau", "taille", "identifiant"] }, { kind: "component", type: StText, selector: "st-text", inputs: ["variante", "graisse", "enLigne", "tronquerA"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StEmpty, decorators: [{
             type: Component,
-            args: [{ selector: 'st-empty', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon, StHeading, StText], host: { class: 'st-empty' }, template: "<st-icon [nom]=\"icone()\" taille=\"xl\" ton=\"discret\" />\n<st-heading [niveau]=\"niveauDuTitre()\" taille=\"lg\">{{ titre() }}</st-heading>\n@if (description(); as texte) {\n  <st-text variante=\"discret\">{{ texte }}</st-text>\n}\n<div class=\"st-empty__action\"><ng-content /></div>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--st-espacement-3);align-items:center;justify-content:center;min-block-size:12rem;padding:var(--st-espacement-8);text-align:center}.st-empty__action:empty{display:none}\n"] }]
+            args: [{ selector: 'st-empty', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon, StHeading, StText], host: { class: 'st-empty' }, template: "<st-icon [nom]=\"icone()\" taille=\"xl\" ton=\"discret\" />\n<st-heading [niveau]=\"niveauDuTitre()\" taille=\"lg\">{{ titre() }}</st-heading>\n@if (description(); as texte) {\n  <st-text variante=\"discret\">{{ texte }}</st-text>\n}\n<div class=\"st-empty__action\"><ng-content /></div>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;flex-direction:column;gap:var(--st-espacement-3);align-items:center;justify-content:center;min-block-size:12rem;padding:var(--st-espacement-8);text-align:center}.st-empty__action:empty{display:none}\n"] }]
         }], propDecorators: { titre: [{ type: i0.Input, args: [{ isSignal: true, alias: "titre", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icone: [{ type: i0.Input, args: [{ isSignal: true, alias: "icone", required: false }] }], niveauDuTitre: [{ type: i0.Input, args: [{ isSignal: true, alias: "niveauDuTitre", required: false }] }] } });
 
-const ICONE = {
+const ICONE$2 = {
     'hors-ligne': 'hors-ligne',
     serveur: 'serveur',
     client: 'triangle-alerte',
@@ -1217,6 +1529,7 @@ const ICONE = {
  */
 class StError {
     regionParente = inject(REGION_VIVANTE_PARENTE, { optional: true });
+    libelles = inject(ST_LIBELLES);
     variante = input('serveur', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variante" }] : /* istanbul ignore next */ []));
     /** Code machine stable, tel que rendu par le backend. */
@@ -1230,21 +1543,26 @@ class StError {
     ...(ngDevMode ? [{ debugName: "traceId" }] : /* istanbul ignore next */ []));
     niveauDuTitre = input(3, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "niveauDuTitre" }] : /* istanbul ignore next */ []));
-    rejouable = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rejouable" }] : /* istanbul ignore next */ []));
-    libelleRejeu = input('Reessayer', /* @ts-ignore */
+    rejouable = input(true, { ...(ngDevMode ? { debugName: "rejouable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    rejeuEnCours = input(false, { ...(ngDevMode ? { debugName: "rejeuEnCours" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** `null` : les textes viennent du dictionnaire de l'application. */
+    libelleRejeu = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "libelleRejeu" }] : /* istanbul ignore next */ []));
-    rejeuEnCours = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rejeuEnCours" }] : /* istanbul ignore next */ []));
-    etiquetteDeTrace = input('Identifiant de trace', /* @ts-ignore */
+    etiquetteDeTrace = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "etiquetteDeTrace" }] : /* istanbul ignore next */ []));
     rejeu = output();
-    icone = computed(() => ICONE[this.variante()], /* @ts-ignore */
+    libelleRejeuLu = computed(() => this.libelleRejeu() ?? this.libelles().reessayer, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleRejeuLu" }] : /* istanbul ignore next */ []));
+    etiquetteDeTraceLue = computed(() => this.etiquetteDeTrace() ?? this.libelles().identifiantDeTrace, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquetteDeTraceLue" }] : /* istanbul ignore next */ []));
+    etiquetteDuCode = computed(() => this.libelles().codeTechnique, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquetteDuCode" }] : /* istanbul ignore next */ []));
+    icone = computed(() => ICONE$2[this.variante()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "icone" }] : /* istanbul ignore next */ []));
     sAnnonce = computed(() => this.regionParente === null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sAnnonce" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StError, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StError, isStandalone: true, selector: "st-error", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, titre: { classPropertyName: "titre", publicName: "titre", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, traceId: { classPropertyName: "traceId", publicName: "traceId", isSignal: true, isRequired: false, transformFunction: null }, niveauDuTitre: { classPropertyName: "niveauDuTitre", publicName: "niveauDuTitre", isSignal: true, isRequired: false, transformFunction: null }, rejouable: { classPropertyName: "rejouable", publicName: "rejouable", isSignal: true, isRequired: false, transformFunction: null }, libelleRejeu: { classPropertyName: "libelleRejeu", publicName: "libelleRejeu", isSignal: true, isRequired: false, transformFunction: null }, rejeuEnCours: { classPropertyName: "rejeuEnCours", publicName: "rejeuEnCours", isSignal: true, isRequired: false, transformFunction: null }, etiquetteDeTrace: { classPropertyName: "etiquetteDeTrace", publicName: "etiquetteDeTrace", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rejeu: "rejeu" }, host: { properties: { "attr.data-variante": "variante()", "attr.role": "sAnnonce() ? \"alert\" : null" }, classAttribute: "st-error" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" taille=\"lg\" />\n\n<div class=\"st-error__corps\">\n  <st-heading [niveau]=\"niveauDuTitre()\" taille=\"lg\">{{ titre() }}</st-heading>\n  <st-text variante=\"corps-sm\">{{ message() }}</st-text>\n\n  <p class=\"st-error__technique\">\n    <st-code [valeur]=\"code()\" etiquette=\"Code\" [copiable]=\"false\" />\n    @if (traceId(); as trace) {\n      <st-code [valeur]=\"trace\" [etiquette]=\"etiquetteDeTrace()\" />\n    }\n  </p>\n\n  @if (rejouable()) {\n    <button\n      stButton\n      type=\"button\"\n      variante=\"secondaire\"\n      [chargement]=\"rejeuEnCours()\"\n      (click)=\"rejeu.emit()\"\n    >\n      {{ libelleRejeu() }}\n    </button>\n  }\n</div>\n", styles: [":host{display:flex;gap:var(--st-espacement-3);align-items:flex-start;padding:var(--st-espacement-4);color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret);border-inline-start:3px solid var(--st-couleur-danger);border-radius:var(--st-rayon-md)}:host([data-variante=hors-ligne]){color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret);border-inline-start-color:var(--st-couleur-avertissement)}.st-error__corps{display:flex;flex:1;flex-direction:column;gap:var(--st-espacement-2);align-items:flex-start}.st-error__technique{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);margin:0}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StHeading, selector: "st-heading", inputs: ["niveau", "taille", "identifiant"] }, { kind: "component", type: StText, selector: "st-text", inputs: ["variante", "graisse", "enLigne", "tronquerA"] }, { kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement"] }, { kind: "component", type: StCode, selector: "st-code", inputs: ["valeur", "etiquette", "copiable", "libelleCopier", "messageDeConfirmation"], outputs: ["copie"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StError, isStandalone: true, selector: "st-error", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, titre: { classPropertyName: "titre", publicName: "titre", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, traceId: { classPropertyName: "traceId", publicName: "traceId", isSignal: true, isRequired: false, transformFunction: null }, niveauDuTitre: { classPropertyName: "niveauDuTitre", publicName: "niveauDuTitre", isSignal: true, isRequired: false, transformFunction: null }, rejouable: { classPropertyName: "rejouable", publicName: "rejouable", isSignal: true, isRequired: false, transformFunction: null }, rejeuEnCours: { classPropertyName: "rejeuEnCours", publicName: "rejeuEnCours", isSignal: true, isRequired: false, transformFunction: null }, libelleRejeu: { classPropertyName: "libelleRejeu", publicName: "libelleRejeu", isSignal: true, isRequired: false, transformFunction: null }, etiquetteDeTrace: { classPropertyName: "etiquetteDeTrace", publicName: "etiquetteDeTrace", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rejeu: "rejeu" }, host: { properties: { "attr.data-variante": "variante()", "attr.role": "sAnnonce() ? \"alert\" : null" }, classAttribute: "st-error" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" taille=\"lg\" />\n\n<div class=\"st-error__corps\">\n  <st-heading [niveau]=\"niveauDuTitre()\" taille=\"lg\">{{ titre() }}</st-heading>\n  <st-text variante=\"corps-sm\">{{ message() }}</st-text>\n\n  <p class=\"st-error__technique\">\n    <st-code [valeur]=\"code()\" [etiquette]=\"etiquetteDuCode()\" [copiable]=\"false\" />\n    @if (traceId(); as trace) {\n      <st-code [valeur]=\"trace\" [etiquette]=\"etiquetteDeTraceLue()\" />\n    }\n  </p>\n\n  @if (rejouable()) {\n    <button\n      stButton\n      type=\"button\"\n      variante=\"secondaire\"\n      [chargement]=\"rejeuEnCours()\"\n      (click)=\"rejeu.emit()\"\n    >\n      {{ libelleRejeuLu() }}\n    </button>\n  }\n</div>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;gap:var(--st-espacement-3);align-items:flex-start;padding:var(--st-espacement-4);color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret);border-inline-start:3px solid var(--st-couleur-danger);border-radius:var(--st-rayon-md)}:host([data-variante=hors-ligne]){color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret);border-inline-start-color:var(--st-couleur-avertissement)}.st-error__corps{display:flex;flex:1;flex-direction:column;gap:var(--st-espacement-2);align-items:flex-start}.st-error__technique{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);margin:0}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StHeading, selector: "st-heading", inputs: ["niveau", "taille", "identifiant"] }, { kind: "component", type: StText, selector: "st-text", inputs: ["variante", "graisse", "enLigne", "tronquerA"] }, { kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }, { kind: "component", type: StCode, selector: "st-code", inputs: ["valeur", "copiable", "etiquette", "libelleCopier", "messageDeConfirmation"], outputs: ["copie"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StError, decorators: [{
             type: Component,
@@ -1252,8 +1570,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'st-error',
                         '[attr.data-variante]': 'variante()',
                         '[attr.role]': 'sAnnonce() ? "alert" : null',
-                    }, template: "<st-icon [nom]=\"icone()\" taille=\"lg\" />\n\n<div class=\"st-error__corps\">\n  <st-heading [niveau]=\"niveauDuTitre()\" taille=\"lg\">{{ titre() }}</st-heading>\n  <st-text variante=\"corps-sm\">{{ message() }}</st-text>\n\n  <p class=\"st-error__technique\">\n    <st-code [valeur]=\"code()\" etiquette=\"Code\" [copiable]=\"false\" />\n    @if (traceId(); as trace) {\n      <st-code [valeur]=\"trace\" [etiquette]=\"etiquetteDeTrace()\" />\n    }\n  </p>\n\n  @if (rejouable()) {\n    <button\n      stButton\n      type=\"button\"\n      variante=\"secondaire\"\n      [chargement]=\"rejeuEnCours()\"\n      (click)=\"rejeu.emit()\"\n    >\n      {{ libelleRejeu() }}\n    </button>\n  }\n</div>\n", styles: [":host{display:flex;gap:var(--st-espacement-3);align-items:flex-start;padding:var(--st-espacement-4);color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret);border-inline-start:3px solid var(--st-couleur-danger);border-radius:var(--st-rayon-md)}:host([data-variante=hors-ligne]){color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret);border-inline-start-color:var(--st-couleur-avertissement)}.st-error__corps{display:flex;flex:1;flex-direction:column;gap:var(--st-espacement-2);align-items:flex-start}.st-error__technique{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);margin:0}\n"] }]
-        }], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: true }] }], titre: [{ type: i0.Input, args: [{ isSignal: true, alias: "titre", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], traceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "traceId", required: false }] }], niveauDuTitre: [{ type: i0.Input, args: [{ isSignal: true, alias: "niveauDuTitre", required: false }] }], rejouable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejouable", required: false }] }], libelleRejeu: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleRejeu", required: false }] }], rejeuEnCours: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejeuEnCours", required: false }] }], etiquetteDeTrace: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquetteDeTrace", required: false }] }], rejeu: [{ type: i0.Output, args: ["rejeu"] }] } });
+                    }, template: "<st-icon [nom]=\"icone()\" taille=\"lg\" />\n\n<div class=\"st-error__corps\">\n  <st-heading [niveau]=\"niveauDuTitre()\" taille=\"lg\">{{ titre() }}</st-heading>\n  <st-text variante=\"corps-sm\">{{ message() }}</st-text>\n\n  <p class=\"st-error__technique\">\n    <st-code [valeur]=\"code()\" [etiquette]=\"etiquetteDuCode()\" [copiable]=\"false\" />\n    @if (traceId(); as trace) {\n      <st-code [valeur]=\"trace\" [etiquette]=\"etiquetteDeTraceLue()\" />\n    }\n  </p>\n\n  @if (rejouable()) {\n    <button\n      stButton\n      type=\"button\"\n      variante=\"secondaire\"\n      [chargement]=\"rejeuEnCours()\"\n      (click)=\"rejeu.emit()\"\n    >\n      {{ libelleRejeuLu() }}\n    </button>\n  }\n</div>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;gap:var(--st-espacement-3);align-items:flex-start;padding:var(--st-espacement-4);color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret);border-inline-start:3px solid var(--st-couleur-danger);border-radius:var(--st-rayon-md)}:host([data-variante=hors-ligne]){color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret);border-inline-start-color:var(--st-couleur-avertissement)}.st-error__corps{display:flex;flex:1;flex-direction:column;gap:var(--st-espacement-2);align-items:flex-start}.st-error__technique{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);margin:0}\n"] }]
+        }], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: true }] }], titre: [{ type: i0.Input, args: [{ isSignal: true, alias: "titre", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], traceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "traceId", required: false }] }], niveauDuTitre: [{ type: i0.Input, args: [{ isSignal: true, alias: "niveauDuTitre", required: false }] }], rejouable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejouable", required: false }] }], rejeuEnCours: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejeuEnCours", required: false }] }], libelleRejeu: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleRejeu", required: false }] }], etiquetteDeTrace: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquetteDeTrace", required: false }] }], rejeu: [{ type: i0.Output, args: ["rejeu"] }] } });
 
 /**
  * Banniere de perte de connexion.
@@ -1272,64 +1590,1050 @@ class StOfflineBanner {
     ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
     libelleRejeu = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "libelleRejeu" }] : /* istanbul ignore next */ []));
-    rejeuEnCours = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rejeuEnCours" }] : /* istanbul ignore next */ []));
+    rejeuEnCours = input(false, { ...(ngDevMode ? { debugName: "rejeuEnCours" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     rejeu = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StOfflineBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StOfflineBanner, isStandalone: true, selector: "st-offline-banner", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, libelleRejeu: { classPropertyName: "libelleRejeu", publicName: "libelleRejeu", isSignal: true, isRequired: false, transformFunction: null }, rejeuEnCours: { classPropertyName: "rejeuEnCours", publicName: "rejeuEnCours", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rejeu: "rejeu" }, host: { attributes: { "role": "status" }, classAttribute: "st-offline-banner" }, ngImport: i0, template: "<st-icon nom=\"hors-ligne\" taille=\"sm\" />\n<span class=\"st-offline-banner__message\">{{ message() }}</span>\n\n@if (libelleRejeu(); as libelle) {\n  <button\n    stButton\n    type=\"button\"\n    variante=\"discret\"\n    taille=\"sm\"\n    [chargement]=\"rejeuEnCours()\"\n    (click)=\"rejeu.emit()\"\n  >\n    {{ libelle }}\n  </button>\n}\n", styles: [":host{position:sticky;inset-block-start:0;z-index:var(--st-plan-entete);display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center;min-block-size:2.5rem;padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret);border-block-end:1px solid var(--st-couleur-avertissement)}.st-offline-banner__message{flex:1;font-size:var(--st-taille-sm)}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StOfflineBanner, isStandalone: true, selector: "st-offline-banner", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, libelleRejeu: { classPropertyName: "libelleRejeu", publicName: "libelleRejeu", isSignal: true, isRequired: false, transformFunction: null }, rejeuEnCours: { classPropertyName: "rejeuEnCours", publicName: "rejeuEnCours", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rejeu: "rejeu" }, host: { attributes: { "role": "status" }, classAttribute: "st-offline-banner" }, ngImport: i0, template: "<st-icon nom=\"hors-ligne\" taille=\"sm\" />\n<span class=\"st-offline-banner__message\">{{ message() }}</span>\n\n@if (libelleRejeu(); as libelle) {\n  <button\n    stButton\n    type=\"button\"\n    variante=\"discret\"\n    taille=\"sm\"\n    [chargement]=\"rejeuEnCours()\"\n    (click)=\"rejeu.emit()\"\n  >\n    {{ libelle }}\n  </button>\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{position:sticky;inset-block-start:0;z-index:var(--st-plan-entete);display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center;min-block-size:2.5rem;padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret);border-block-end:1px solid var(--st-couleur-avertissement)}.st-offline-banner__message{flex:1;font-size:var(--st-taille-sm)}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StOfflineBanner, decorators: [{
             type: Component,
             args: [{ selector: 'st-offline-banner', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon, StButton], host: {
                         class: 'st-offline-banner',
                         role: 'status',
-                    }, template: "<st-icon nom=\"hors-ligne\" taille=\"sm\" />\n<span class=\"st-offline-banner__message\">{{ message() }}</span>\n\n@if (libelleRejeu(); as libelle) {\n  <button\n    stButton\n    type=\"button\"\n    variante=\"discret\"\n    taille=\"sm\"\n    [chargement]=\"rejeuEnCours()\"\n    (click)=\"rejeu.emit()\"\n  >\n    {{ libelle }}\n  </button>\n}\n", styles: [":host{position:sticky;inset-block-start:0;z-index:var(--st-plan-entete);display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center;min-block-size:2.5rem;padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret);border-block-end:1px solid var(--st-couleur-avertissement)}.st-offline-banner__message{flex:1;font-size:var(--st-taille-sm)}\n"] }]
+                    }, template: "<st-icon nom=\"hors-ligne\" taille=\"sm\" />\n<span class=\"st-offline-banner__message\">{{ message() }}</span>\n\n@if (libelleRejeu(); as libelle) {\n  <button\n    stButton\n    type=\"button\"\n    variante=\"discret\"\n    taille=\"sm\"\n    [chargement]=\"rejeuEnCours()\"\n    (click)=\"rejeu.emit()\"\n  >\n    {{ libelle }}\n  </button>\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{position:sticky;inset-block-start:0;z-index:var(--st-plan-entete);display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center;min-block-size:2.5rem;padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret);border-block-end:1px solid var(--st-couleur-avertissement)}.st-offline-banner__message{flex:1;font-size:var(--st-taille-sm)}\n"] }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], libelleRejeu: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleRejeu", required: false }] }], rejeuEnCours: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejeuEnCours", required: false }] }], rejeu: [{ type: i0.Output, args: ["rejeu"] }] } });
 
-const ANNONCES_PAR_DEFAUT = {
-    chargement: 'Chargement en cours',
-    erreur: 'Une erreur est survenue',
-    vide: 'Aucun resultat',
-    'hors-ligne': 'Hors connexion',
-    succes: '',
+/**
+ * Surface qui regroupe un contenu.
+ *
+ * ⚠️ **Elle n'est jamais cliquable en entier**, et c'est un refus delibere. Une
+ * carte munie d'un `(click)` produit, pour qui ecoute la page, UN seul controle
+ * dont le nom accessible est tout le texte de la carte — titre, montant, date,
+ * mention legale d'un trait. Elle est aussi injoignable au clavier sans
+ * `tabindex`, qui la ferait alors annoncer deux fois.
+ *
+ * Le motif correct : un lien ou un bouton unique DANS la carte, etendu
+ * visuellement a toute sa surface par la classe `st-carte__lien-etendu`. Le
+ * nom accessible reste celui du lien, le clavier fonctionne sans rien ajouter,
+ * et la zone cliquable est la meme.
+ *
+ * ```html
+ * <st-card>
+ *   <st-heading [niveau]="3">
+ *     <a class="st-carte__lien-etendu" routerLink="/comptes/12">Compte courant</a>
+ *   </st-heading>
+ *   <st-money [montant]="solde" />
+ * </st-card>
+ * ```
+ */
+class StCard {
+    relief = input('pose', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "relief" }] : /* istanbul ignore next */ []));
+    rembourrage = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rembourrage" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StCard, isStandalone: true, selector: "st-card", inputs: { relief: { classPropertyName: "relief", publicName: "relief", isSignal: true, isRequired: false, transformFunction: null }, rembourrage: { classPropertyName: "rembourrage", publicName: "rembourrage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-relief": "relief()", "attr.data-rembourrage": "rembourrage()" }, classAttribute: "st-card" }, ngImport: i0, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{position:relative;display:block;color:var(--st-couleur-texte);background:var(--st-carte-fond, var(--st-couleur-surface));border-radius:var(--st-carte-rayon, var(--st-rayon-lg))}:host([data-relief=plat]){box-shadow:var(--st-ombre-none)}:host([data-relief=pose]){border:1px solid var(--st-couleur-bordure);box-shadow:var(--st-ombre-sm)}:host([data-relief=flottant]){box-shadow:var(--st-ombre-md)}:host([data-rembourrage=aucun]){padding:0}:host([data-rembourrage=sm]){padding:var(--st-espacement-3)}:host([data-rembourrage=md]){padding:var(--st-espacement-4)}:host([data-rembourrage=lg]){padding:var(--st-espacement-6)}@media(forced-colors:active){:host{border:1px solid CanvasText}}:host ::ng-deep .st-carte__lien-etendu:after{position:absolute;inset:0;content:\"\"}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-card', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'st-card',
+                        '[attr.data-relief]': 'relief()',
+                        '[attr.data-rembourrage]': 'rembourrage()',
+                    }, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{position:relative;display:block;color:var(--st-couleur-texte);background:var(--st-carte-fond, var(--st-couleur-surface));border-radius:var(--st-carte-rayon, var(--st-rayon-lg))}:host([data-relief=plat]){box-shadow:var(--st-ombre-none)}:host([data-relief=pose]){border:1px solid var(--st-couleur-bordure);box-shadow:var(--st-ombre-sm)}:host([data-relief=flottant]){box-shadow:var(--st-ombre-md)}:host([data-rembourrage=aucun]){padding:0}:host([data-rembourrage=sm]){padding:var(--st-espacement-3)}:host([data-rembourrage=md]){padding:var(--st-espacement-4)}:host([data-rembourrage=lg]){padding:var(--st-espacement-6)}@media(forced-colors:active){:host{border:1px solid CanvasText}}:host ::ng-deep .st-carte__lien-etendu:after{position:absolute;inset:0;content:\"\"}\n"] }]
+        }], propDecorators: { relief: [{ type: i0.Input, args: [{ isSignal: true, alias: "relief", required: false }] }], rembourrage: [{ type: i0.Input, args: [{ isSignal: true, alias: "rembourrage", required: false }] }] } });
+
+/**
+ * Regroupement de contenu, expose comme REPERE de navigation quand il porte un
+ * nom.
+ *
+ * ⚠️ Le point qui decide de tout : `role="region"` n'est expose comme repere
+ * que s'il a un NOM ACCESSIBLE. Sans nom, la plupart des lecteurs d'ecran
+ * l'ignorent purement et simplement — la balise est la, le repere n'existe pas,
+ * et rien ne le signale. Le composant refuse donc de poser le role quand il ne
+ * peut pas le nommer : une section anonyme reste un simple bloc, ce qu'elle est
+ * reellement.
+ *
+ * Deux facons de la nommer, et la seconde vaut mieux : `titreDe` pointe le
+ * titre deja affiche, ce qui garde un seul texte a traduire et a maintenir.
+ *
+ * ```html
+ * <st-heading [niveau]="2" identifiant="titre-operations">Operations</st-heading>
+ * <st-section titreDe="titre-operations">…</st-section>
+ * ```
+ */
+class StSection {
+    /** Nom accessible ecrit a la main. A preferer `titreDe` quand un titre existe. */
+    etiquette = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    /** Identifiant du titre qui nomme la section. Prime sur `etiquette`. */
+    titreDe = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titreDe" }] : /* istanbul ignore next */ []));
+    espacement = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "espacement" }] : /* istanbul ignore next */ []));
+    estUnRepere = computed(() => this.titreDe() !== null || this.etiquette() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "estUnRepere" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StSection, isStandalone: true, selector: "st-section", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, titreDe: { classPropertyName: "titreDe", publicName: "titreDe", isSignal: true, isRequired: false, transformFunction: null }, espacement: { classPropertyName: "espacement", publicName: "espacement", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "estUnRepere() ? \"region\" : null", "attr.aria-label": "titreDe() === null ? etiquette() : null", "attr.aria-labelledby": "titreDe()", "attr.data-espacement": "espacement()" }, classAttribute: "st-section" }, ngImport: i0, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}:host([data-espacement=aucun]){margin-block-end:0}:host([data-espacement=sm]){margin-block-end:var(--st-espacement-4)}:host([data-espacement=md]){margin-block-end:var(--st-espacement-6)}:host([data-espacement=lg]){margin-block-end:var(--st-espacement-8)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-section', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'st-section',
+                        '[attr.role]': 'estUnRepere() ? "region" : null',
+                        '[attr.aria-label]': 'titreDe() === null ? etiquette() : null',
+                        '[attr.aria-labelledby]': 'titreDe()',
+                        '[attr.data-espacement]': 'espacement()',
+                    }, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}:host([data-espacement=aucun]){margin-block-end:0}:host([data-espacement=sm]){margin-block-end:var(--st-espacement-4)}:host([data-espacement=md]){margin-block-end:var(--st-espacement-6)}:host([data-espacement=lg]){margin-block-end:var(--st-espacement-8)}\n"] }]
+        }], propDecorators: { etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], titreDe: [{ type: i0.Input, args: [{ isSignal: true, alias: "titreDe", required: false }] }], espacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "espacement", required: false }] }] } });
+
+/**
+ * Trait de separation.
+ *
+ * ⚠️ **Decoratif par defaut, et c'est le bon defaut.** Un `<hr>` porte le role
+ * `separator` de facon implicite, que les lecteurs d'ecran annoncent. Sur une
+ * page qui en compte huit — ce qui est courant dans une liste de reglages — la
+ * lecture est ponctuee de huit « separateur » qui n'apprennent rien.
+ *
+ * Le role ne se pose que lorsque le trait porte vraiment du sens : il separe
+ * alors deux GROUPES que rien d'autre ne distingue, comme les sections d'un
+ * menu. Regle de tri : si le retirer ne retire aucune information, il est
+ * decoratif.
+ */
+class StDivider {
+    orientation = input('horizontale', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Le trait separe deux groupes distincts, et doit donc etre annonce. */
+    porteurDeSens = input(false, { ...(ngDevMode ? { debugName: "porteurDeSens" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StDivider, isStandalone: true, selector: "st-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, porteurDeSens: { classPropertyName: "porteurDeSens", publicName: "porteurDeSens", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "porteurDeSens() ? \"separator\" : \"none\"", "attr.aria-hidden": "porteurDeSens() ? null : \"true\"", "attr.aria-orientation": "porteurDeSens() && orientation() === \"verticale\" ? \"vertical\" : null", "attr.data-orientation": "orientation()" }, classAttribute: "st-divider" }, ngImport: i0, template: "", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;flex:none;background:var(--st-couleur-bordure);border:0}:host([data-orientation=horizontale]){inline-size:100%;block-size:var(--st-separateur-epaisseur, 1px);margin-block:var(--st-separateur-marge, var(--st-espacement-4))}:host([data-orientation=verticale]){inline-size:var(--st-separateur-epaisseur, 1px);align-self:stretch;margin-inline:var(--st-separateur-marge, var(--st-espacement-4))}@media(forced-colors:active){:host{background:CanvasText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDivider, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-divider', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'st-divider',
+                        '[attr.role]': 'porteurDeSens() ? "separator" : "none"',
+                        '[attr.aria-hidden]': 'porteurDeSens() ? null : "true"',
+                        // ⚠️ Annonce seulement quand elle differe du defaut d'ARIA, qui est
+                        // horizontal : un `aria-orientation="horizontal"` partout est du bruit.
+                        '[attr.aria-orientation]': 'porteurDeSens() && orientation() === "verticale" ? "vertical" : null',
+                        '[attr.data-orientation]': 'orientation()',
+                    }, template: "", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;flex:none;background:var(--st-couleur-bordure);border:0}:host([data-orientation=horizontale]){inline-size:100%;block-size:var(--st-separateur-epaisseur, 1px);margin-block:var(--st-separateur-marge, var(--st-espacement-4))}:host([data-orientation=verticale]){inline-size:var(--st-separateur-epaisseur, 1px);align-self:stretch;margin-inline:var(--st-separateur-marge, var(--st-espacement-4))}@media(forced-colors:active){:host{background:CanvasText}}\n"] }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], porteurDeSens: [{ type: i0.Input, args: [{ isSignal: true, alias: "porteurDeSens", required: false }] }] } });
+
+/**
+ * Titre de page : le `h1`, et les actions qui lui sont attachees.
+ *
+ * ⚠️ Il rend une **vraie balise `h1`**, la ou `st-heading` porte
+ * `role="heading"` sur son hote. La raison est precise : `StNavigation` de
+ * `@starterlib/core` vise le titre de niveau 1 pour y poser le focus apres une
+ * navigation, et une vraie balise est ce que trouvent aussi les extensions, le
+ * mode lecture et les outils d'audit. Un `h1` par page, jamais deux.
+ *
+ * ⚠️ **Il ne gere PAS le focus**, et ce n'est pas un oubli. Le noyau le fait
+ * deja a chaque changement de route. Deux mecanismes qui deplacent le focus a
+ * la meme milliseconde ne se completent pas : ils se battent, et le gagnant
+ * depend de l'ordre de rendu — donc du hasard.
+ *
+ * ```html
+ * <st-page-title>
+ *   Mes operations
+ *   <button stButton variante="primaire" actions>Exporter</button>
+ * </st-page-title>
+ * ```
+ */
+class StPageTitle {
+    /** Texte secondaire sous le titre. Jamais porteur d'information critique. */
+    precision = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "precision" }] : /* istanbul ignore next */ []));
+    /** Cible d'un `aria-labelledby` : une region se nomme par son titre. */
+    identifiant = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "identifiant" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPageTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StPageTitle, isStandalone: true, selector: "st-page-title", inputs: { precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, identifiant: { classPropertyName: "identifiant", publicName: "identifiant", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-page-title" }, ngImport: i0, template: "<div class=\"st-page-title__ligne\">\n  <h1 class=\"st-page-title__titre\" [attr.id]=\"identifiant()\"><ng-content /></h1>\n  <div class=\"st-page-title__actions\"><ng-content select=\"[actions]\" /></div>\n</div>\n@if (precision() !== null) {\n  <p class=\"st-page-title__precision\">{{ precision() }}</p>\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;margin-block-end:var(--st-espacement-6)}.st-page-title__ligne{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3);align-items:flex-start;justify-content:space-between}.st-page-title__titre:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-page-title__titre{margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-3xl);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);text-wrap:balance}.st-page-title__actions:empty{display:none}.st-page-title__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-page-title__precision{margin:var(--st-espacement-2) 0 0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPageTitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-page-title', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-page-title' }, template: "<div class=\"st-page-title__ligne\">\n  <h1 class=\"st-page-title__titre\" [attr.id]=\"identifiant()\"><ng-content /></h1>\n  <div class=\"st-page-title__actions\"><ng-content select=\"[actions]\" /></div>\n</div>\n@if (precision() !== null) {\n  <p class=\"st-page-title__precision\">{{ precision() }}</p>\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;margin-block-end:var(--st-espacement-6)}.st-page-title__ligne{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3);align-items:flex-start;justify-content:space-between}.st-page-title__titre:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-page-title__titre{margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-3xl);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);text-wrap:balance}.st-page-title__actions:empty{display:none}.st-page-title__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-page-title__precision{margin:var(--st-espacement-2) 0 0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}\n"] }]
+        }], propDecorators: { precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], identifiant: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifiant", required: false }] }] } });
+
+/**
+ * Fil d'Ariane.
+ *
+ * ⚠️ **Le dernier maillon n'est pas un lien.** C'est la page courante : un lien
+ * vers l'endroit ou l'on se trouve deja n'apporte rien, et il ajoute un arret
+ * de tabulation sur chaque page du site. Il porte `aria-current="page"`, qui
+ * est ce que le lecteur d'ecran annonce a sa place.
+ *
+ * ⚠️ **Les separateurs sont poses en `aria-hidden`.** Un chevron ou une barre
+ * oblique laisses dans l'arbre d'accessibilite se lit « barre oblique » entre
+ * chaque maillon : « Accueil barre oblique Comptes barre oblique Operations ».
+ * Les poser en contenu engendre par CSS ne suffit pas — Chrome et Firefox
+ * exposent `content` a l'arbre d'accessibilite.
+ *
+ * ⚠️ La liste est ORDONNEE (`ol`) : l'ordre des maillons est l'information.
+ *
+ * ⚠️ **Les liens passent par le routeur.** La premiere version posait des
+ * `href` bruts : dans une SPA, un clic quittait l'application, repassait par la
+ * coquille du BFF et perdait tout l'etat en memoire — sur le composant de
+ * navigation le plus clique apres le menu.
+ */
+class StBreadcrumb {
+    libelles = inject(ST_LIBELLES);
+    maillons = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maillons" }] : /* istanbul ignore next */ []));
+    /** `null` : le texte vient du dictionnaire de l'application. */
+    etiquette = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    /** Caractere de separation. Muet pour les technologies d'assistance. */
+    separateur = input('/', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separateur" }] : /* istanbul ignore next */ []));
+    etiquetteLue = computed(() => this.etiquette() ?? this.libelles().filDAriane, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
+    /** Le dernier maillon est la page courante, jamais un lien. */
+    derniereIndice = computed(() => this.maillons().length - 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "derniereIndice" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StBreadcrumb, isStandalone: true, selector: "st-breadcrumb", inputs: { maillons: { classPropertyName: "maillons", publicName: "maillons", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, separateur: { classPropertyName: "separateur", publicName: "separateur", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-breadcrumb" }, ngImport: i0, template: "<nav [attr.aria-label]=\"etiquetteLue()\">\n  <ol class=\"st-breadcrumb__liste\">\n    @for (maillon of maillons(); track $index; let indice = $index, premier = $first) {\n      <li class=\"st-breadcrumb__maillon\">\n        @if (!premier) {\n          <span class=\"st-breadcrumb__separateur\" aria-hidden=\"true\">{{ separateur() }}</span>\n        }\n        @if (indice === derniereIndice() || maillon.lien === undefined) {\n          <span aria-current=\"page\">{{ maillon.libelle }}</span>\n        } @else {\n          <a [routerLink]=\"maillon.lien\">{{ maillon.libelle }}</a>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;margin-block-end:var(--st-espacement-4);font-size:var(--st-taille-sm)}.st-breadcrumb__liste{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center;padding:0;margin:0;list-style:none}.st-breadcrumb__maillon{display:flex;gap:var(--st-espacement-2);align-items:center;color:var(--st-couleur-texte-discret)}.st-breadcrumb__separateur{color:var(--st-couleur-texte-discret)}a:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}a{color:var(--st-couleur-texte-discret);text-decoration:underline;border-radius:var(--st-rayon-xs)}a:hover{color:var(--st-couleur-texte)}[aria-current=page]{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StBreadcrumb, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], host: { class: 'st-breadcrumb' }, template: "<nav [attr.aria-label]=\"etiquetteLue()\">\n  <ol class=\"st-breadcrumb__liste\">\n    @for (maillon of maillons(); track $index; let indice = $index, premier = $first) {\n      <li class=\"st-breadcrumb__maillon\">\n        @if (!premier) {\n          <span class=\"st-breadcrumb__separateur\" aria-hidden=\"true\">{{ separateur() }}</span>\n        }\n        @if (indice === derniereIndice() || maillon.lien === undefined) {\n          <span aria-current=\"page\">{{ maillon.libelle }}</span>\n        } @else {\n          <a [routerLink]=\"maillon.lien\">{{ maillon.libelle }}</a>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;margin-block-end:var(--st-espacement-4);font-size:var(--st-taille-sm)}.st-breadcrumb__liste{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center;padding:0;margin:0;list-style:none}.st-breadcrumb__maillon{display:flex;gap:var(--st-espacement-2);align-items:center;color:var(--st-couleur-texte-discret)}.st-breadcrumb__separateur{color:var(--st-couleur-texte-discret)}a:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}a{color:var(--st-couleur-texte-discret);text-decoration:underline;border-radius:var(--st-rayon-xs)}a:hover{color:var(--st-couleur-texte)}[aria-current=page]{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte)}\n"] }]
+        }], propDecorators: { maillons: [{ type: i0.Input, args: [{ isSignal: true, alias: "maillons", required: true }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], separateur: [{ type: i0.Input, args: [{ isSignal: true, alias: "separateur", required: false }] }] } });
+
+/** Identifiant par defaut du contenu principal, pose par `st-app-shell`. */
+const IDENTIFIANT_DU_CONTENU_PRINCIPAL = 'contenu-principal';
+/**
+ * Lien d'evitement : aller au contenu sans traverser la navigation.
+ *
+ * WCAG 2.4.1. Sans lui, chaque page impose a qui navigue au clavier de
+ * traverser l'en-tete et tout le menu avant d'atteindre ce qu'il est venu lire —
+ * trente arrets de tabulation, a chaque changement de page.
+ *
+ * ⚠️ **Le focus est pose par script, et la navigation par ancre est annulee.**
+ * Deux raisons, et chacune suffit :
+ *
+ * 1. Un `href="#contenu"` se resout contre `<base href>`. Sous
+ *    `/ui/<interface>/`, il vise `/ui/<interface>/#contenu` : un rechargement
+ *    complet de la coquille, au lieu d'un saut dans la page.
+ * 2. Suivre une ancre deplace la vue sans toujours deplacer le FOCUS. La
+ *    tabulation suivante repart alors du lien d'evitement, et le saut n'a servi
+ *    a rien.
+ *
+ * Le `href` reste pose : c'est lui qui fait du lien un lien, pour le lecteur
+ * d'ecran comme pour le clic du milieu.
+ *
+ * ⚠️ Il doit etre le PREMIER element focalisable du document. Le composant ne
+ * peut pas l'imposer ; `st-app-shell` le fait.
+ */
+class StSkipLink {
+    document = inject(DOCUMENT);
+    libelles = inject(ST_LIBELLES);
+    /** Identifiant de l'element a atteindre. */
+    cible = input(IDENTIFIANT_DU_CONTENU_PRINCIPAL, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cible" }] : /* istanbul ignore next */ []));
+    /** `null` : le texte vient du dictionnaire de l'application. */
+    libelle = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []));
+    libelleLu = computed(() => this.libelle() ?? this.libelles().allerAuContenu, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleLu" }] : /* istanbul ignore next */ []));
+    ancre = computed(() => `#${this.cible()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ancre" }] : /* istanbul ignore next */ []));
+    aller(evenement) {
+        const cible = this.document.getElementById(this.cible());
+        if (cible === null)
+            return;
+        evenement.preventDefault();
+        // `tabindex="-1"` : un `main` n'est pas focalisable, et `focus()` sur un
+        // element qui ne l'est pas ne fait rien — en silence.
+        if (!cible.hasAttribute('tabindex'))
+            cible.setAttribute('tabindex', '-1');
+        cible.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSkipLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StSkipLink, isStandalone: true, selector: "st-skip-link", inputs: { cible: { classPropertyName: "cible", publicName: "cible", isSignal: true, isRequired: false, transformFunction: null }, libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-skip-link" }, ngImport: i0, template: "<a class=\"st-skip-link__lien\" [attr.href]=\"ancre()\" (click)=\"aller($event)\">{{ libelleLu() }}</a>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}.st-skip-link__lien{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.st-skip-link__lien:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-skip-link__lien:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;position:fixed;inset-block-start:var(--st-espacement-2);inset-inline-start:var(--st-espacement-2);z-index:var(--st-plan-notification);padding:var(--st-espacement-2) var(--st-espacement-4);font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-radius:var(--st-rayon-md)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSkipLink, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-skip-link', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-skip-link' }, template: "<a class=\"st-skip-link__lien\" [attr.href]=\"ancre()\" (click)=\"aller($event)\">{{ libelleLu() }}</a>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}.st-skip-link__lien{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.st-skip-link__lien:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-skip-link__lien:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;position:fixed;inset-block-start:var(--st-espacement-2);inset-inline-start:var(--st-espacement-2);z-index:var(--st-plan-notification);padding:var(--st-espacement-2) var(--st-espacement-4);font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-radius:var(--st-rayon-md)}\n"] }]
+        }], propDecorators: { cible: [{ type: i0.Input, args: [{ isSignal: true, alias: "cible", required: false }] }], libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: false }] }] } });
+
+/**
+ * Coquille d'une application : lien d'evitement, en-tete, navigation, contenu
+ * principal, pied de page.
+ *
+ * ```html
+ * <st-app-shell>
+ *   <ng-container entete>…</ng-container>
+ *   <ng-container navigation>…</ng-container>
+ *   <router-outlet />
+ *   <ng-container pied>…</ng-container>
+ * </st-app-shell>
+ * ```
+ *
+ * ⚠️ Son role est de garantir les REPERES, et un seul de chaque. Une page qui
+ * compte deux `main` — frequent quand une micro-SPA pose le sien dans celui de
+ * la coquille — prive le lecteur d'ecran du raccourci « aller au contenu
+ * principal » : il ne sait plus lequel viser. Les remotes ne posent donc
+ * jamais de `main`, `header` ni `footer` de premier niveau.
+ *
+ * ⚠️ Le lien d'evitement est rendu EN PREMIER, avant l'en-tete : c'est la seule
+ * place ou il sert. Place apres, il faut deja avoir traverse ce qu'il permet
+ * d'eviter.
+ *
+ * Le contenu principal porte l'identifiant vise par le lien d'evitement.
+ * Le focus de navigation, lui, vise le titre de niveau 1 : voir `StNavigation`
+ * de `@starterlib/core`. Les deux se completent — l'un au chargement d'une
+ * page, l'autre a chaque changement de route.
+ *
+ * ⚠️ La coquille ne pose PAS de `<nav>` autour de la navigation : c'est
+ * `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.
+ */
+class StAppShell {
+    identifiantDuContenu = IDENTIFIANT_DU_CONTENU_PRINCIPAL;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StAppShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StAppShell, isStandalone: true, selector: "st-app-shell", host: { classAttribute: "st-app-shell" }, ngImport: i0, template: "<st-skip-link [cible]=\"identifiantDuContenu\" />\n\n<header class=\"st-app-shell__entete\">\n  <ng-content select=\"[entete]\" />\n</header>\n\n<div class=\"st-app-shell__corps\">\n  <div class=\"st-app-shell__navigation\">\n    <ng-content select=\"[navigation]\" />\n  </div>\n\n  <main class=\"st-app-shell__contenu\" [id]=\"identifiantDuContenu\">\n    <ng-content />\n  </main>\n</div>\n\n<footer class=\"st-app-shell__pied\">\n  <ng-content select=\"[pied]\" />\n</footer>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;flex-direction:column;min-block-size:100dvh;color:var(--st-couleur-texte);background:var(--st-couleur-fond)}.st-app-shell__entete{position:sticky;inset-block-start:0;z-index:var(--st-plan-entete);background:var(--st-couleur-surface);border-block-end:1px solid var(--st-couleur-bordure)}.st-app-shell__corps{display:flex;flex:1 1 auto;flex-direction:column}.st-app-shell__navigation:empty,.st-app-shell__entete:empty,.st-app-shell__pied:empty{display:none}.st-app-shell__contenu{flex:1 1 auto;min-inline-size:0;padding:var(--st-espacement-6) var(--st-espacement-4)}.st-app-shell__contenu:focus{outline:none}.st-app-shell__pied{padding:var(--st-espacement-4);color:var(--st-couleur-texte-discret);border-block-start:1px solid var(--st-couleur-bordure)}@media(min-width:64rem){.st-app-shell__corps{flex-direction:row}.st-app-shell__navigation{flex:none;inline-size:var(--st-coquille-largeur-navigation, 16rem);border-inline-end:1px solid var(--st-couleur-bordure)}.st-app-shell__contenu{padding:var(--st-espacement-8)}}\n"], dependencies: [{ kind: "component", type: StSkipLink, selector: "st-skip-link", inputs: ["cible", "libelle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StAppShell, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-app-shell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StSkipLink], host: { class: 'st-app-shell' }, template: "<st-skip-link [cible]=\"identifiantDuContenu\" />\n\n<header class=\"st-app-shell__entete\">\n  <ng-content select=\"[entete]\" />\n</header>\n\n<div class=\"st-app-shell__corps\">\n  <div class=\"st-app-shell__navigation\">\n    <ng-content select=\"[navigation]\" />\n  </div>\n\n  <main class=\"st-app-shell__contenu\" [id]=\"identifiantDuContenu\">\n    <ng-content />\n  </main>\n</div>\n\n<footer class=\"st-app-shell__pied\">\n  <ng-content select=\"[pied]\" />\n</footer>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;flex-direction:column;min-block-size:100dvh;color:var(--st-couleur-texte);background:var(--st-couleur-fond)}.st-app-shell__entete{position:sticky;inset-block-start:0;z-index:var(--st-plan-entete);background:var(--st-couleur-surface);border-block-end:1px solid var(--st-couleur-bordure)}.st-app-shell__corps{display:flex;flex:1 1 auto;flex-direction:column}.st-app-shell__navigation:empty,.st-app-shell__entete:empty,.st-app-shell__pied:empty{display:none}.st-app-shell__contenu{flex:1 1 auto;min-inline-size:0;padding:var(--st-espacement-6) var(--st-espacement-4)}.st-app-shell__contenu:focus{outline:none}.st-app-shell__pied{padding:var(--st-espacement-4);color:var(--st-couleur-texte-discret);border-block-start:1px solid var(--st-couleur-bordure)}@media(min-width:64rem){.st-app-shell__corps{flex-direction:row}.st-app-shell__navigation{flex:none;inline-size:var(--st-coquille-largeur-navigation, 16rem);border-inline-end:1px solid var(--st-couleur-bordure)}.st-app-shell__contenu{padding:var(--st-espacement-8)}}\n"] }]
+        }] });
+
+/**
+ * Contenu de l'en-tete : bouton de navigation, marque, puis actions.
+ *
+ * ```html
+ * <st-app-shell>
+ *   <st-header entete>
+ *     <button bascule stButton [stSidenavToggle]="navigation">Menu</button>
+ *     <a marque routerLink="/"><st-logo nom="Banque Exemple" clair="/logo.svg" /></a>
+ *     <st-lang-switch [courante]="langue.courante()" (choisie)="langue.changer($event)" />
+ *     <button stButton [stMenuTrigger]="compte">Mon compte</button>
+ *   </st-header>
+ * </st-app-shell>
+ * ```
+ *
+ * ⚠️ **Aucun repere pose ici.** Le `header` de `st-app-shell` est deja le
+ * repere « banniere » ; en ajouter un second dans le premier ferait annoncer
+ * deux bannieres.
+ *
+ * ⚠️ **Composition, pas assemblage.** Il ne cree ni menu, ni bascule, ni logo :
+ * il les place. C'est ce qui le garde dans le tronc — importer `st-menu` l'aurait
+ * fait sortir vers un point d'entree secondaire — et qui laisse chaque SPA
+ * choisir ses actions.
+ *
+ * L'ordre du DOM est l'ordre de lecture et de tabulation : bouton de
+ * navigation, marque, actions. Il n'est jamais inverse par le style.
+ */
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class -- composant de mise en page pur : tout est dans son gabarit et sa feuille.
+class StHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StHeader, isStandalone: true, selector: "st-header", host: { classAttribute: "st-header" }, ngImport: i0, template: "<div class=\"st-header__debut\">\n  <ng-content select=\"[bascule]\" />\n  <ng-content select=\"[marque]\" />\n</div>\n<div class=\"st-header__actions\">\n  <ng-content />\n</div>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3);align-items:center;justify-content:space-between;min-block-size:3.5rem;padding:var(--st-espacement-2) var(--st-espacement-4)}.st-header__debut,.st-header__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-header__actions:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-header', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-header' }, template: "<div class=\"st-header__debut\">\n  <ng-content select=\"[bascule]\" />\n  <ng-content select=\"[marque]\" />\n</div>\n<div class=\"st-header__actions\">\n  <ng-content />\n</div>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3);align-items:center;justify-content:space-between;min-block-size:3.5rem;padding:var(--st-espacement-2) var(--st-espacement-4)}.st-header__debut,.st-header__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-header__actions:empty{display:none}\n"] }]
+        }] });
+
+const FOCALISABLES = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), ' +
+    'textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+// Valeurs de `Node.DOCUMENT_POSITION_*`, ecrites en clair : `Node` n'existe pas
+// au rendu serveur, et la comparaison ne doit pas en dependre au chargement.
+const PRECEDE = 2;
+const SUIT = 4;
+/**
+ * ⚠️ L'icone doit differer par sa FORME d'un ton a l'autre, et non seulement
+ * par sa couleur : un message porte par la seule couleur est illisible pour une
+ * personne daltonienne, a l'impression, et sous un theme a fort contraste.
+ */
+const ICONE$1 = {
+    neutre: 'cercle-info',
+    primaire: 'cercle-info',
+    succes: 'cercle-coche',
+    avertissement: 'triangle-alerte',
+    danger: 'cercle-croix',
+};
+/**
+ * Message de page, persistant jusqu'a ce qu'on le ferme.
+ *
+ * Distinct de `st-offline-banner`, qui dit un fait qu'on ne peut pas fermer, et
+ * de `st-error`, qui remplace un contenu au lieu de l'accompagner.
+ *
+ * ⚠️ **Elle est une region vivante, et ce n'est pas redondant au chargement.**
+ * Un lecteur d'ecran annonce les MUTATIONS d'une region qu'il observe deja :
+ * une banniere presente des l'affichage est lue avec la page, une fois, puis
+ * son apparition ulterieure est annoncee. Le meme mecanisme sert les deux cas.
+ *
+ * ⚠️ Le ton `danger` passe en `alert` (assertif) : une operation qui vient
+ * d'echouer doit interrompre. Les autres restent en `status`, sinon une
+ * confirmation couperait la lecture en cours et ferait perdre sa place.
+ *
+ * ⚠️ Comme `st-spinner` et `st-error`, elle se tait dans une region vivante
+ * existante : sans cela, le lecteur annonce deux fois le meme message.
+ */
+class StBanner {
+    element = inject(ElementRef);
+    regionParente = inject(REGION_VIVANTE_PARENTE, { optional: true });
+    libelles = inject(ST_LIBELLES);
+    ton = input('neutre', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ton" }] : /* istanbul ignore next */ []));
+    message = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** Titre court au-dessus du message. Le message seul suffit le plus souvent. */
+    titre = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titre" }] : /* istanbul ignore next */ []));
+    fermable = input(false, { ...(ngDevMode ? { debugName: "fermable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** `null` : le texte vient du dictionnaire de l'application. */
+    libelleFermeture = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleFermeture" }] : /* istanbul ignore next */ []));
+    ferme = output();
+    icone = computed(() => ICONE$1[this.ton()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icone" }] : /* istanbul ignore next */ []));
+    libelleFermetureLu = computed(() => this.libelleFermeture() ?? this.libelles().fermerLeMessage, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleFermetureLu" }] : /* istanbul ignore next */ []));
+    roleLu = computed(() => {
+        if (this.regionParente !== null)
+            return null;
+        return this.ton() === 'danger' ? 'alert' : 'status';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roleLu" }] : /* istanbul ignore next */ []));
+    /**
+     * ⚠️ Le focus est DEPLACE avant l'emission. Sans cela, le bouton disparait
+     * sous le doigt de l'utilisateur clavier, le focus retombe sur le corps du
+     * document, et la navigation repart du haut de la page — le meme defaut que
+     * sur une liste d'etiquettes, et l'un des plus frequents.
+     */
+    fermer() {
+        this.deplacerLeFocus();
+        this.ferme.emit();
+    }
+    /**
+     * Cible, dans l'ordre : le premier element focalisable qui SUIT la banniere
+     * dans le document, sinon le dernier qui la precede, sinon le conteneur s'il
+     * est focalisable par script.
+     *
+     * ⚠️ L'ordre du DOCUMENT, et non les descendants du voisin. La premiere
+     * version cherchait dans `nextElementSibling` : un bouton pose directement
+     * apres la banniere n'etait pas trouve, puisqu'il n'est pas son propre
+     * descendant, et le focus retombait sur le corps du document.
+     */
+    deplacerLeFocus() {
+        const hote = this.element.nativeElement;
+        const candidats = [...hote.ownerDocument.querySelectorAll(FOCALISABLES)].filter((candidat) => !hote.contains(candidat));
+        const suivant = candidats.find((candidat) => (hote.compareDocumentPosition(candidat) & SUIT) !== 0);
+        if (suivant !== undefined) {
+            suivant.focus();
+            return;
+        }
+        const precedent = candidats
+            .reverse()
+            .find((candidat) => (hote.compareDocumentPosition(candidat) & PRECEDE) !== 0);
+        if (precedent !== undefined) {
+            precedent.focus();
+            return;
+        }
+        const parent = hote.parentElement;
+        if (parent?.hasAttribute('tabindex') === true)
+            parent.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StBanner, isStandalone: true, selector: "st-banner", inputs: { ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, titre: { classPropertyName: "titre", publicName: "titre", isSignal: true, isRequired: false, transformFunction: null }, fermable: { classPropertyName: "fermable", publicName: "fermable", isSignal: true, isRequired: false, transformFunction: null }, libelleFermeture: { classPropertyName: "libelleFermeture", publicName: "libelleFermeture", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ferme: "ferme" }, host: { properties: { "attr.data-ton": "ton()", "attr.role": "roleLu()" }, classAttribute: "st-banner" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" taille=\"sm\" />\n<div class=\"st-banner__corps\">\n  @if (titre() !== null) {\n    <p class=\"st-banner__titre\">{{ titre() }}</p>\n  }\n  <p class=\"st-banner__message\">{{ message() }}</p>\n  <ng-content />\n</div>\n@if (fermable()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"croix\"\n    taille=\"sm\"\n    [etiquette]=\"libelleFermetureLu()\"\n    (click)=\"fermer()\"\n  ></button>\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;gap:var(--st-espacement-3);align-items:flex-start;padding:var(--st-espacement-3) var(--st-espacement-4);margin-block-end:var(--st-espacement-4);border:1px solid transparent;border-radius:var(--st-rayon-md)}.st-banner__corps{flex:1 1 auto;min-inline-size:0}.st-banner__titre{margin:0 0 var(--st-espacement-1);font-weight:var(--st-graisse-semi)}.st-banner__message{margin:0}:host([data-ton=neutre]){color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border-color:var(--st-couleur-bordure)}:host([data-ton=primaire]){color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret)}:host([data-ton=succes]){color:var(--st-couleur-sur-succes-discret);background:var(--st-couleur-succes-discret)}:host([data-ton=avertissement]){color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret)}:host([data-ton=danger]){color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret)}@media(forced-colors:active){:host{border-color:CanvasText}}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StBanner, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-banner', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon, StIconButton], host: {
+                        class: 'st-banner',
+                        '[attr.data-ton]': 'ton()',
+                        '[attr.role]': 'roleLu()',
+                    }, template: "<st-icon [nom]=\"icone()\" taille=\"sm\" />\n<div class=\"st-banner__corps\">\n  @if (titre() !== null) {\n    <p class=\"st-banner__titre\">{{ titre() }}</p>\n  }\n  <p class=\"st-banner__message\">{{ message() }}</p>\n  <ng-content />\n</div>\n@if (fermable()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton. Le nom accessible est\n       impose par le type (`etiquette` est requis) et verifie par axe. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"croix\"\n    taille=\"sm\"\n    [etiquette]=\"libelleFermetureLu()\"\n    (click)=\"fermer()\"\n  ></button>\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;gap:var(--st-espacement-3);align-items:flex-start;padding:var(--st-espacement-3) var(--st-espacement-4);margin-block-end:var(--st-espacement-4);border:1px solid transparent;border-radius:var(--st-rayon-md)}.st-banner__corps{flex:1 1 auto;min-inline-size:0}.st-banner__titre{margin:0 0 var(--st-espacement-1);font-weight:var(--st-graisse-semi)}.st-banner__message{margin:0}:host([data-ton=neutre]){color:var(--st-couleur-texte);background:var(--st-couleur-surface-enfoncee);border-color:var(--st-couleur-bordure)}:host([data-ton=primaire]){color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret)}:host([data-ton=succes]){color:var(--st-couleur-sur-succes-discret);background:var(--st-couleur-succes-discret)}:host([data-ton=avertissement]){color:var(--st-couleur-sur-avertissement-discret);background:var(--st-couleur-avertissement-discret)}:host([data-ton=danger]){color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret)}@media(forced-colors:active){:host{border-color:CanvasText}}\n"] }]
+        }], propDecorators: { ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], titre: [{ type: i0.Input, args: [{ isSignal: true, alias: "titre", required: false }] }], fermable: [{ type: i0.Input, args: [{ isSignal: true, alias: "fermable", required: false }] }], libelleFermeture: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelleFermeture", required: false }] }], ferme: [{ type: i0.Output, args: ["ferme"] }] } });
+
+/** Une FORME par ton, jamais la couleur seule. */
+const ICONE = {
+    neutre: 'cercle-info',
+    primaire: 'cercle-info',
+    succes: 'cercle-coche',
+    avertissement: 'triangle-alerte',
+    danger: 'cercle-croix',
 };
+/**
+ * Message court attache a une zone precise : une aide sous un champ, une
+ * consequence sous un choix, une contrainte au-dessus d'un bouton.
+ *
+ * Distinct de `st-banner`, qui parle de la PAGE et se ferme.
+ *
+ * ⚠️ **Aucun role, aucune region vivante**, et c'est la difference qui compte.
+ * Un message en ligne est lu quand on atteint l'endroit auquel il se rattache ;
+ * en faire une region vivante le ferait annoncer hors contexte, et une
+ * vingtaine de champs produiraient vingt annonces a l'ouverture de l'ecran.
+ *
+ * ⚠️ Pour une erreur de SAISIE, ce composant ne suffit pas : le champ doit
+ * porter `aria-describedby` vers l'identifiant du message, sans quoi le lien
+ * entre les deux n'existe que visuellement. C'est `st-form-field` de la
+ * vague 3 qui posera ce lien.
+ */
+class StInlineMessage {
+    ton = input('neutre', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ton" }] : /* istanbul ignore next */ []));
+    /** Cible d'un `aria-describedby` pose par le champ decrit. */
+    identifiant = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "identifiant" }] : /* istanbul ignore next */ []));
+    icone = computed(() => ICONE[this.ton()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icone" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StInlineMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StInlineMessage, isStandalone: true, selector: "st-inline-message", inputs: { ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, identifiant: { classPropertyName: "identifiant", publicName: "identifiant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ton": "ton()", "attr.id": "identifiant()" }, classAttribute: "st-inline-message" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" taille=\"xs\" />\n<span class=\"st-inline-message__texte\"><ng-content /></span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;gap:var(--st-espacement-2);align-items:flex-start;font-size:var(--st-taille-sm);line-height:var(--st-interligne-normal)}:host([data-ton=neutre]){color:var(--st-couleur-texte-discret)}:host([data-ton=primaire]){color:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-avertissement)}:host([data-ton=danger]){color:var(--st-couleur-danger)}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StInlineMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-inline-message', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon], host: {
+                        class: 'st-inline-message',
+                        '[attr.data-ton]': 'ton()',
+                        '[attr.id]': 'identifiant()',
+                    }, template: "<st-icon [nom]=\"icone()\" taille=\"xs\" />\n<span class=\"st-inline-message__texte\"><ng-content /></span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;gap:var(--st-espacement-2);align-items:flex-start;font-size:var(--st-taille-sm);line-height:var(--st-interligne-normal)}:host([data-ton=neutre]){color:var(--st-couleur-texte-discret)}:host([data-ton=primaire]){color:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-avertissement)}:host([data-ton=danger]){color:var(--st-couleur-danger)}\n"] }]
+        }], propDecorators: { ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], identifiant: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifiant", required: false }] }] } });
+
+let compteur$1 = 0;
+/**
+ * Choix du theme : systeme, clair, sombre.
+ *
+ * ⚠️ **Trois etats, donc PAS un interrupteur.** `role="switch"` et
+ * `aria-pressed` sont binaires : poses sur un choix a trois valeurs, ils
+ * annoncent « active » ou « desactive » sans jamais dire lequel des trois est
+ * retenu. Un groupe de boutons radio dit exactement « Sombre, bouton radio,
+ * coche, 3 sur 3 ».
+ *
+ * ⚠️ **Composant de PRESENTATION.** Il n'injecte pas `StTheme` : `ui` ne depend
+ * pas de `@starterlib/core` (ADR 0003). La coquille le relie au noyau :
+ *
+ * ```html
+ * <st-theme-toggle [choix]="theme.choix()" (choisi)="theme.choisir($event)" />
+ * ```
+ */
+class StThemeToggle {
+    libelles = inject(ST_LIBELLES);
+    choix = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "choix" }] : /* istanbul ignore next */ []));
+    /** Legende visible. Masquee par defaut, mais toujours lue : elle nomme le groupe. */
+    legendeVisible = input(false, { ...(ngDevMode ? { debugName: "legendeVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    choisi = output();
+    /** Unique par instance : deux bascules sur la meme page partageraient leur groupe radio. */
+    nom = `st-theme-${(compteur$1 += 1).toString()}`;
+    legende = computed(() => this.libelles().theme, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legende" }] : /* istanbul ignore next */ []));
+    options = computed(() => {
+        const libelles = this.libelles();
+        const texte = {
+            systeme: libelles.themeSysteme,
+            clair: libelles.themeClair,
+            sombre: libelles.themeSombre,
+        };
+        return CHOIX_DE_THEME.map((valeur) => ({ valeur, libelle: texte[valeur] }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StThemeToggle, isStandalone: true, selector: "st-theme-toggle", inputs: { choix: { classPropertyName: "choix", publicName: "choix", isSignal: true, isRequired: true, transformFunction: null }, legendeVisible: { classPropertyName: "legendeVisible", publicName: "legendeVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { choisi: "choisi" }, host: { classAttribute: "st-theme-toggle" }, ngImport: i0, template: "<fieldset class=\"st-theme-toggle__groupe\">\n  <legend [class.st-vh]=\"!legendeVisible()\">{{ legende() }}</legend>\n  @for (option of options(); track option.valeur) {\n    <label>\n      <input\n        type=\"radio\"\n        [name]=\"nom\"\n        [value]=\"option.valeur\"\n        [checked]=\"option.valeur === choix()\"\n        (change)=\"choisi.emit(option.valeur)\"\n      />\n      <span>{{ option.libelle }}</span>\n    </label>\n  }\n</fieldset>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-block}.st-theme-toggle__groupe{display:inline-flex;flex-wrap:wrap;gap:0;padding:0;margin:0;border:0}.st-theme-toggle__groupe legend{padding:0;margin-block-end:var(--st-espacement-2);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi)}.st-theme-toggle__groupe input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.st-theme-toggle__groupe label{display:inline-flex;align-items:center;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-1) var(--st-espacement-3);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte)}.st-theme-toggle__groupe label+label{margin-inline-start:-1px}.st-theme-toggle__groupe label:first-of-type{border-start-start-radius:var(--st-rayon-md);border-end-start-radius:var(--st-rayon-md)}.st-theme-toggle__groupe label:last-of-type{border-start-end-radius:var(--st-rayon-md);border-end-end-radius:var(--st-rayon-md)}.st-theme-toggle__groupe label:has(input:checked){position:relative;font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}.st-theme-toggle__groupe label:has(input:focus-visible){position:relative;z-index:1;outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}@media(forced-colors:active){.st-theme-toggle__groupe label:has(input:checked){forced-color-adjust:none;color:HighlightText;background:Highlight}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StThemeToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-theme-toggle', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-theme-toggle' }, template: "<fieldset class=\"st-theme-toggle__groupe\">\n  <legend [class.st-vh]=\"!legendeVisible()\">{{ legende() }}</legend>\n  @for (option of options(); track option.valeur) {\n    <label>\n      <input\n        type=\"radio\"\n        [name]=\"nom\"\n        [value]=\"option.valeur\"\n        [checked]=\"option.valeur === choix()\"\n        (change)=\"choisi.emit(option.valeur)\"\n      />\n      <span>{{ option.libelle }}</span>\n    </label>\n  }\n</fieldset>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-block}.st-theme-toggle__groupe{display:inline-flex;flex-wrap:wrap;gap:0;padding:0;margin:0;border:0}.st-theme-toggle__groupe legend{padding:0;margin-block-end:var(--st-espacement-2);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi)}.st-theme-toggle__groupe input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.st-theme-toggle__groupe label{display:inline-flex;align-items:center;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-1) var(--st-espacement-3);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte)}.st-theme-toggle__groupe label+label{margin-inline-start:-1px}.st-theme-toggle__groupe label:first-of-type{border-start-start-radius:var(--st-rayon-md);border-end-start-radius:var(--st-rayon-md)}.st-theme-toggle__groupe label:last-of-type{border-start-end-radius:var(--st-rayon-md);border-end-end-radius:var(--st-rayon-md)}.st-theme-toggle__groupe label:has(input:checked){position:relative;font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}.st-theme-toggle__groupe label:has(input:focus-visible){position:relative;z-index:1;outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}@media(forced-colors:active){.st-theme-toggle__groupe label:has(input:checked){forced-color-adjust:none;color:HighlightText;background:Highlight}}\n"] }]
+        }], propDecorators: { choix: [{ type: i0.Input, args: [{ isSignal: true, alias: "choix", required: true }] }], legendeVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendeVisible", required: false }] }], choisi: [{ type: i0.Output, args: ["choisi"] }] } });
+
+/**
+ * Nom de chaque langue ECRIT DANS CETTE LANGUE, et jamais traduit.
+ *
+ * ⚠️ Une personne qui ne lit pas le francais ne cherche pas « Anglais » : elle
+ * cherche « English ». Traduire le nom des langues dans la langue courante rend
+ * le selecteur illisible precisement pour qui en a besoin.
+ */
+const ENDONYMES = {
+    fr: 'Français',
+    en: 'English',
+};
+let compteur = 0;
+/**
+ * Choix de la langue de l'interface.
+ *
+ * ⚠️ **Chaque option porte son propre `lang`.** Sans lui, un lecteur d'ecran
+ * regle en francais lit « English » avec une voix francaise, et le mot devient
+ * incomprehensible pour la personne anglophone qui cherchait justement a
+ * l'entendre.
+ *
+ * ⚠️ **Composant de PRESENTATION.** Il n'injecte pas `StLangue` : `ui` ne depend
+ * pas de `@starterlib/core` (ADR 0003). La coquille le relie au noyau :
+ *
+ * ```html
+ * <st-lang-switch [courante]="langue.courante()" (choisie)="langue.changer($event)" />
+ * ```
+ */
+class StLangSwitch {
+    libelles = inject(ST_LIBELLES);
+    courante = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "courante" }] : /* istanbul ignore next */ []));
+    langues = input(LANGUES, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "langues" }] : /* istanbul ignore next */ []));
+    legendeVisible = input(false, { ...(ngDevMode ? { debugName: "legendeVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    choisie = output();
+    nom = `st-langue-${(compteur += 1).toString()}`;
+    legende = computed(() => this.libelles().langue, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legende" }] : /* istanbul ignore next */ []));
+    options = computed(() => this.langues().map((code) => ({ code, endonyme: ENDONYMES[code] })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StLangSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StLangSwitch, isStandalone: true, selector: "st-lang-switch", inputs: { courante: { classPropertyName: "courante", publicName: "courante", isSignal: true, isRequired: true, transformFunction: null }, langues: { classPropertyName: "langues", publicName: "langues", isSignal: true, isRequired: false, transformFunction: null }, legendeVisible: { classPropertyName: "legendeVisible", publicName: "legendeVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { choisie: "choisie" }, host: { classAttribute: "st-lang-switch" }, ngImport: i0, template: "<fieldset class=\"st-lang-switch__groupe\">\n  <legend [class.st-vh]=\"!legendeVisible()\">{{ legende() }}</legend>\n  @for (option of options(); track option.code) {\n    <label>\n      <input\n        type=\"radio\"\n        [name]=\"nom\"\n        [value]=\"option.code\"\n        [checked]=\"option.code === courante()\"\n        (change)=\"choisie.emit(option.code)\"\n      />\n      <span [attr.lang]=\"option.code\">{{ option.endonyme }}</span>\n    </label>\n  }\n</fieldset>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-block}.st-lang-switch__groupe{display:inline-flex;flex-wrap:wrap;gap:0;padding:0;margin:0;border:0}.st-lang-switch__groupe legend{padding:0;margin-block-end:var(--st-espacement-2);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi)}.st-lang-switch__groupe input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.st-lang-switch__groupe label{display:inline-flex;align-items:center;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-1) var(--st-espacement-3);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte)}.st-lang-switch__groupe label+label{margin-inline-start:-1px}.st-lang-switch__groupe label:first-of-type{border-start-start-radius:var(--st-rayon-md);border-end-start-radius:var(--st-rayon-md)}.st-lang-switch__groupe label:last-of-type{border-start-end-radius:var(--st-rayon-md);border-end-end-radius:var(--st-rayon-md)}.st-lang-switch__groupe label:has(input:checked){position:relative;font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}.st-lang-switch__groupe label:has(input:focus-visible){position:relative;z-index:1;outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}@media(forced-colors:active){.st-lang-switch__groupe label:has(input:checked){forced-color-adjust:none;color:HighlightText;background:Highlight}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StLangSwitch, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-lang-switch', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-lang-switch' }, template: "<fieldset class=\"st-lang-switch__groupe\">\n  <legend [class.st-vh]=\"!legendeVisible()\">{{ legende() }}</legend>\n  @for (option of options(); track option.code) {\n    <label>\n      <input\n        type=\"radio\"\n        [name]=\"nom\"\n        [value]=\"option.code\"\n        [checked]=\"option.code === courante()\"\n        (change)=\"choisie.emit(option.code)\"\n      />\n      <span [attr.lang]=\"option.code\">{{ option.endonyme }}</span>\n    </label>\n  }\n</fieldset>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-block}.st-lang-switch__groupe{display:inline-flex;flex-wrap:wrap;gap:0;padding:0;margin:0;border:0}.st-lang-switch__groupe legend{padding:0;margin-block-end:var(--st-espacement-2);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi)}.st-lang-switch__groupe input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.st-lang-switch__groupe label{display:inline-flex;align-items:center;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-1) var(--st-espacement-3);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte)}.st-lang-switch__groupe label+label{margin-inline-start:-1px}.st-lang-switch__groupe label:first-of-type{border-start-start-radius:var(--st-rayon-md);border-end-start-radius:var(--st-rayon-md)}.st-lang-switch__groupe label:last-of-type{border-start-end-radius:var(--st-rayon-md);border-end-end-radius:var(--st-rayon-md)}.st-lang-switch__groupe label:has(input:checked){position:relative;font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}.st-lang-switch__groupe label:has(input:focus-visible){position:relative;z-index:1;outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}@media(forced-colors:active){.st-lang-switch__groupe label:has(input:checked){forced-color-adjust:none;color:HighlightText;background:Highlight}}\n"] }]
+        }], propDecorators: { courante: [{ type: i0.Input, args: [{ isSignal: true, alias: "courante", required: true }] }], langues: [{ type: i0.Input, args: [{ isSignal: true, alias: "langues", required: false }] }], legendeVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendeVisible", required: false }] }], choisie: [{ type: i0.Output, args: ["choisie"] }] } });
+
+/**
+ * Bouton qui copie une valeur : reference de virement, adresse de depot, lien
+ * de partage.
+ *
+ * ⚠️ **Un element, et non un attribut pose sur un `<button>`.** La confirmation
+ * passe par une region vivante voisine du bouton ; posee DANS le bouton, elle
+ * entrerait dans son nom accessible, qui deviendrait « Copier Copie ».
+ *
+ * ⚠️ **Le libelle du bouton ne change pas** apres la copie, pour la raison que
+ * donne `st-code` : le lecteur d'ecran annoncerait un autre controle que celui
+ * qu'il a sous le doigt.
+ *
+ * ⚠️ **Jamais de secret.** Ce qui entre dans le presse-papiers est conserve par
+ * les gestionnaires d'historique et synchronise entre appareils : ni mot de
+ * passe, ni jeton, ni code a usage unique.
+ *
+ * Sans presse-papiers — hors contexte securise — le bouton n'est pas rendu : un
+ * controle qui ne peut rien faire ne doit pas s'offrir.
+ */
+class StCopyButton {
+    document = inject(DOCUMENT);
+    libelles = inject(ST_LIBELLES);
+    valeur = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valeur" }] : /* istanbul ignore next */ []));
+    /**
+     * `null` : le texte vient du dictionnaire de l'application.
+     *
+     * ⚠️ En icone seule, c'est le nom accessible du bouton : il doit dire CE qui
+     * est copie quand la page en offre plusieurs — « Copier l'IBAN » et non
+     * « Copier » repete cinq fois.
+     */
+    libelle = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []));
+    iconeSeule = input(false, { ...(ngDevMode ? { debugName: "iconeSeule" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    messageDeConfirmation = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messageDeConfirmation" }] : /* istanbul ignore next */ []));
+    copie = output();
+    annonce = new AnnonceLocale(inject(DestroyRef));
+    disponible = pressePapiersDisponible(this.document);
+    libelleLu = computed(() => this.libelle() ?? this.libelles().copier, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleLu" }] : /* istanbul ignore next */ []));
+    async copier() {
+        const issue = await copierDansLePressePapiers(this.document, this.valeur());
+        if (issue === 'copie') {
+            this.copie.emit(this.valeur());
+            this.annonce.annoncer(this.messageDeConfirmation() ?? this.libelles().copieEffectuee);
+        }
+        else if (issue === 'refusee') {
+            this.annonce.annoncer(this.libelles().copieImpossible);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StCopyButton, isStandalone: true, selector: "st-copy-button", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: true, transformFunction: null }, libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: false, transformFunction: null }, iconeSeule: { classPropertyName: "iconeSeule", publicName: "iconeSeule", isSignal: true, isRequired: false, transformFunction: null }, messageDeConfirmation: { classPropertyName: "messageDeConfirmation", publicName: "messageDeConfirmation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copie: "copie" }, host: { classAttribute: "st-copy-button" }, ngImport: i0, template: "@if (disponible) {\n  @if (iconeSeule()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n         Le contenu vient du gabarit de stIconButton. Le nom accessible est\n         impose par le type (`etiquette` est requis) et verifie par axe. -->\n    <button\n      stIconButton\n      type=\"button\"\n      icone=\"copie\"\n      taille=\"sm\"\n      [etiquette]=\"libelleLu()\"\n      (click)=\"copier()\"\n    ></button>\n  } @else {\n    <button\n      stButton\n      type=\"button\"\n      variante=\"secondaire\"\n      taille=\"sm\"\n      iconeAvant=\"copie\"\n      (click)=\"copier()\"\n    >\n      {{ libelleLu() }}\n    </button>\n  }\n}\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }, { kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCopyButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-copy-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StButton, StIconButton], host: { class: 'st-copy-button' }, template: "@if (disponible) {\n  @if (iconeSeule()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n         Le contenu vient du gabarit de stIconButton. Le nom accessible est\n         impose par le type (`etiquette` est requis) et verifie par axe. -->\n    <button\n      stIconButton\n      type=\"button\"\n      icone=\"copie\"\n      taille=\"sm\"\n      [etiquette]=\"libelleLu()\"\n      (click)=\"copier()\"\n    ></button>\n  } @else {\n    <button\n      stButton\n      type=\"button\"\n      variante=\"secondaire\"\n      taille=\"sm\"\n      iconeAvant=\"copie\"\n      (click)=\"copier()\"\n    >\n      {{ libelleLu() }}\n    </button>\n  }\n}\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;align-items:center}\n"] }]
+        }], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: true }] }], libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: false }] }], iconeSeule: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconeSeule", required: false }] }], messageDeConfirmation: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageDeConfirmation", required: false }] }], copie: [{ type: i0.Output, args: ["copie"] }] } });
+
+/**
+ * Compte a rebours avant un nouvel essai, pour une reponse `429` et son en-tete
+ * `Retry-After`.
+ *
+ * ```html
+ * @if (erreur.reessayerDans !== null) {
+ *   <st-timer [secondes]="erreur.reessayerDans" (termine)="reessayable.set(true)" />
+ * }
+ * ```
+ *
+ * ⚠️ **Il n'annonce PAS chaque seconde.** Une region vivante qui change toutes les
+ * secondes recouvre tout ce que le lecteur d'ecran essaie de dire, et empeche de
+ * lire le formulaire que la personne est justement en train de garder pret. Le
+ * decompte porte `role="timer"`, dont la valeur implicite est
+ * `aria-live="off"` : il se LIT quand on l'atteint. Seule la fin s'annonce.
+ *
+ * ⚠️ **Le temps restant se calcule contre l'horloge, pas en comptant les
+ * battements.** Un onglet en arriere-plan voit ses minuteries ralenties a une par
+ * minute : un compteur decremente a chaque battement afficherait encore
+ * « 45 s » a son retour, bien apres que le serveur a leve la limite.
+ */
+class StTimer {
+    libelles = inject(ST_LIBELLES);
+    locale = inject(ST_LOCALE);
+    /** Duree d'attente en secondes, telle que `Retry-After` la donne. */
+    secondes = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondes" }] : /* istanbul ignore next */ []));
+    termine = output();
+    annonce = new AnnonceLocale(inject(DestroyRef));
+    restant = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restant" }] : /* istanbul ignore next */ []));
+    echeance = 0;
+    minuterie = null;
+    texte = computed(() => {
+        const restant = this.restant();
+        const libelles = this.libelles();
+        return restant > 0
+            ? libelles.reessayerDans(formaterDuree(restant, this.locale()))
+            : libelles.reessayerMaintenant;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "texte" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destruction = inject(DestroyRef);
+        destruction.onDestroy(() => {
+            this.arreter();
+        });
+        // Une nouvelle duree relance le decompte : un second 429 repousse l'echeance.
+        // Demarre apres le rendu, jamais au rendu serveur, ou une minuterie
+        // empecherait la page de se stabiliser.
+        let pret = false;
+        afterNextRender(() => {
+            pret = true;
+            this.demarrer(this.secondes());
+        });
+        effect(() => {
+            const secondes = this.secondes();
+            if (pret)
+                this.demarrer(secondes);
+        });
+    }
+    demarrer(secondes) {
+        this.arreter();
+        this.echeance = Date.now() + Math.max(0, secondes) * 1000;
+        this.battre();
+        this.minuterie = setInterval(() => {
+            this.battre();
+        }, 1000);
+    }
+    battre() {
+        const restant = Math.max(0, Math.ceil((this.echeance - Date.now()) / 1000));
+        this.restant.set(restant);
+        if (restant > 0)
+            return;
+        this.arreter();
+        this.annonce.annoncer(this.libelles().reessayerMaintenant);
+        this.termine.emit();
+    }
+    arreter() {
+        if (this.minuterie !== null)
+            clearInterval(this.minuterie);
+        this.minuterie = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTimer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StTimer, isStandalone: true, selector: "st-timer", inputs: { secondes: { classPropertyName: "secondes", publicName: "secondes", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { termine: "termine" }, host: { classAttribute: "st-timer" }, ngImport: i0, template: "<span class=\"st-timer__decompte\" role=\"timer\">{{ texte() }}</span>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-block;color:var(--st-couleur-texte-discret);font-variant-numeric:tabular-nums}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTimer, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-timer', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-timer' }, template: "<span class=\"st-timer__decompte\" role=\"timer\">{{ texte() }}</span>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-block;color:var(--st-couleur-texte-discret);font-variant-numeric:tabular-nums}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { secondes: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondes", required: true }] }], termine: [{ type: i0.Output, args: ["termine"] }] } });
+
+/**
+ * Logo de l'organisation, en variante claire, sombre et monochrome.
+ *
+ * ⚠️ **Le texte alternatif est le NOM de l'organisation, jamais « logo ».** Un
+ * lecteur d'ecran annonce deja « image » : « Logo Banque Exemple » se lit
+ * « image, logo Banque Exemple ». Pose dans un lien vers l'accueil, ce nom
+ * devient celui du lien — il doit donc dire ou il mene.
+ *
+ * ⚠️ **Decoratif quand le nom est ecrit a cote.** Le repeter ferait lire
+ * « Banque Exemple Banque Exemple ».
+ *
+ * La variante suit le theme EFFECTIF pose par `StTheme` sur `<html data-theme>`,
+ * et non `prefers-color-scheme` : une personne qui a choisi le clair sur un
+ * systeme sombre doit voir le logo clair. Sous contraste force, la variante
+ * monochrome prend le relais — un logo en couleurs peut y disparaitre sur le
+ * fond impose.
+ *
+ * Les images viennent de la meme origine : la politique de securite du contenu
+ * n'autorise pas d'autre source d'image sans extension explicite cote BFF.
+ */
+class StLogo {
+    /** Nom de l'organisation : c'est le texte alternatif. */
+    nom = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nom" }] : /* istanbul ignore next */ []));
+    clair = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clair" }] : /* istanbul ignore next */ []));
+    /** `null` : la variante claire sert aussi sur fond sombre. */
+    sombre = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sombre" }] : /* istanbul ignore next */ []));
+    /** `null` : aucune variante dediee au contraste force. */
+    monochrome = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monochrome" }] : /* istanbul ignore next */ []));
+    decoratif = input(false, { ...(ngDevMode ? { debugName: "decoratif" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hauteur = input('2rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hauteur" }] : /* istanbul ignore next */ []));
+    texteAlternatif = computed(() => (this.decoratif() ? '' : this.nom()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "texteAlternatif" }] : /* istanbul ignore next */ []));
+    sourceSombre = computed(() => this.sombre() ?? this.clair(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceSombre" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StLogo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StLogo, isStandalone: true, selector: "st-logo", inputs: { nom: { classPropertyName: "nom", publicName: "nom", isSignal: true, isRequired: true, transformFunction: null }, clair: { classPropertyName: "clair", publicName: "clair", isSignal: true, isRequired: true, transformFunction: null }, sombre: { classPropertyName: "sombre", publicName: "sombre", isSignal: true, isRequired: false, transformFunction: null }, monochrome: { classPropertyName: "monochrome", publicName: "monochrome", isSignal: true, isRequired: false, transformFunction: null }, decoratif: { classPropertyName: "decoratif", publicName: "decoratif", isSignal: true, isRequired: false, transformFunction: null }, hauteur: { classPropertyName: "hauteur", publicName: "hauteur", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-monochrome": "monochrome() === null ? null : \"\"", "style.--st-logo-hauteur": "hauteur()" }, classAttribute: "st-logo" }, ngImport: i0, template: "<!-- `loading=\"lazy\"` : la variante masquee n'est pas telechargee, la visible\n     l'est aussitot puisqu'elle est a l'ecran.\n\n     `prefer-ngsrc` ecarte pour les trois images : NgOptimizedImage exige une\n     largeur et une hauteur fixes, or un logo n'a qu'une hauteur \u2014 sa largeur\n     suit ses proportions, propres a chaque organisation. Et un logo est presque\n     toujours un SVG, pour lequel un jeu de resolutions ne rapporte rien. -->\n<!-- eslint-disable-next-line @angular-eslint/template/prefer-ngsrc -- voir ci-dessus -->\n<img class=\"st-logo__clair\" loading=\"lazy\" [src]=\"clair()\" [alt]=\"texteAlternatif()\" />\n<!-- eslint-disable-next-line @angular-eslint/template/prefer-ngsrc -- voir ci-dessus -->\n<img class=\"st-logo__sombre\" loading=\"lazy\" [src]=\"sourceSombre()\" [alt]=\"texteAlternatif()\" />\n@if (monochrome(); as source) {\n  <!-- eslint-disable-next-line @angular-eslint/template/prefer-ngsrc -- voir ci-dessus -->\n  <img class=\"st-logo__monochrome\" loading=\"lazy\" [src]=\"source\" [alt]=\"texteAlternatif()\" />\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;align-items:center}img{inline-size:auto;block-size:var(--st-logo-hauteur, 2rem);max-inline-size:100%}.st-logo__sombre,.st-logo__monochrome{display:none}:host-context([data-theme=sombre]) .st-logo__clair{display:none}:host-context([data-theme=sombre]) .st-logo__sombre{display:inline}@media(forced-colors:active){:host([data-monochrome]) .st-logo__clair,:host([data-monochrome]) .st-logo__sombre{display:none}:host([data-monochrome]) .st-logo__monochrome{display:inline}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StLogo, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-logo', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'st-logo',
+                        '[attr.data-monochrome]': 'monochrome() === null ? null : ""',
+                        '[style.--st-logo-hauteur]': 'hauteur()',
+                    }, template: "<!-- `loading=\"lazy\"` : la variante masquee n'est pas telechargee, la visible\n     l'est aussitot puisqu'elle est a l'ecran.\n\n     `prefer-ngsrc` ecarte pour les trois images : NgOptimizedImage exige une\n     largeur et une hauteur fixes, or un logo n'a qu'une hauteur \u2014 sa largeur\n     suit ses proportions, propres a chaque organisation. Et un logo est presque\n     toujours un SVG, pour lequel un jeu de resolutions ne rapporte rien. -->\n<!-- eslint-disable-next-line @angular-eslint/template/prefer-ngsrc -- voir ci-dessus -->\n<img class=\"st-logo__clair\" loading=\"lazy\" [src]=\"clair()\" [alt]=\"texteAlternatif()\" />\n<!-- eslint-disable-next-line @angular-eslint/template/prefer-ngsrc -- voir ci-dessus -->\n<img class=\"st-logo__sombre\" loading=\"lazy\" [src]=\"sourceSombre()\" [alt]=\"texteAlternatif()\" />\n@if (monochrome(); as source) {\n  <!-- eslint-disable-next-line @angular-eslint/template/prefer-ngsrc -- voir ci-dessus -->\n  <img class=\"st-logo__monochrome\" loading=\"lazy\" [src]=\"source\" [alt]=\"texteAlternatif()\" />\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:inline-flex;align-items:center}img{inline-size:auto;block-size:var(--st-logo-hauteur, 2rem);max-inline-size:100%}.st-logo__sombre,.st-logo__monochrome{display:none}:host-context([data-theme=sombre]) .st-logo__clair{display:none}:host-context([data-theme=sombre]) .st-logo__sombre{display:inline}@media(forced-colors:active){:host([data-monochrome]) .st-logo__clair,:host([data-monochrome]) .st-logo__sombre{display:none}:host([data-monochrome]) .st-logo__monochrome{display:inline}}\n"] }]
+        }], propDecorators: { nom: [{ type: i0.Input, args: [{ isSignal: true, alias: "nom", required: true }] }], clair: [{ type: i0.Input, args: [{ isSignal: true, alias: "clair", required: true }] }], sombre: [{ type: i0.Input, args: [{ isSignal: true, alias: "sombre", required: false }] }], monochrome: [{ type: i0.Input, args: [{ isSignal: true, alias: "monochrome", required: false }] }], decoratif: [{ type: i0.Input, args: [{ isSignal: true, alias: "decoratif", required: false }] }], hauteur: [{ type: i0.Input, args: [{ isSignal: true, alias: "hauteur", required: false }] }] } });
+
+/**
+ * Les gabarits des cinq etats, declares DANS `<st-state>`.
+ *
+ * ⚠️ Pourquoi des directives de contenu plutot que des entrees `TemplateRef` :
+ * un `<ng-template>` declare a l'exterieur du composant appartient a
+ * l'injecteur de l'endroit ou il est ECRIT, pas de celui qui le rend. Les
+ * fournisseurs de `st-state` — dont `REGION_VIVANTE_PARENTE`, qui fait taire
+ * les annonces en double — ne l'atteignaient donc pas, et l'erreur etait
+ * annoncee deux fois. Passer par le contenu rend la declaration a l'exterieur
+ * impossible : le defaut ne peut plus revenir.
+ */
+class StSucces {
+    gabarit = inject(TemplateRef);
+    /**
+     * La ressource n'est lue nulle part : elle porte le TYPE de la valeur, pour
+     * que `let-valeur` soit type dans le gabarit au lieu d'etre `unknown`.
+     */
+    stSucces = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stSucces" }] : /* istanbul ignore next */ []));
+    /**
+     * `Exclude<T, undefined>` : une ressource sans valeur initiale se type
+     * `T | undefined`, mais st-state ne rend ce gabarit QUE lorsqu'une valeur
+     * existe. Sans cela, chaque gabarit de succes devrait ecrire `page?.length`
+     * pour un cas qui ne se produit pas.
+     */
+    static ngTemplateContextGuard(_directive, _contexte) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSucces, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StSucces, isStandalone: true, selector: "ng-template[stSucces]", inputs: { stSucces: { classPropertyName: "stSucces", publicName: "stSucces", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSucces, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[stSucces]' }]
+        }], propDecorators: { stSucces: [{ type: i0.Input, args: [{ isSignal: true, alias: "stSucces", required: false }] }] } });
+/** Erreur. Le contexte porte l'erreur elle-meme, pour l'afficher ou la traduire. */
+class StErreur {
+    gabarit = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, _contexte) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StErreur, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: StErreur, isStandalone: true, selector: "ng-template[stErreur]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StErreur, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[stErreur]' }]
+        }] });
+class StVide {
+    gabarit = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StVide, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: StVide, isStandalone: true, selector: "ng-template[stVide]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StVide, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[stVide]' }]
+        }] });
+class StHorsLigne {
+    gabarit = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StHorsLigne, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: StHorsLigne, isStandalone: true, selector: "ng-template[stHorsLigne]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StHorsLigne, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[stHorsLigne]' }]
+        }] });
+/** Chargement sur mesure. Sans lui, `st-state` rend sa silhouette par defaut. */
+class StChargement {
+    gabarit = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StChargement, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: StChargement, isStandalone: true, selector: "ng-template[stChargement]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StChargement, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[stChargement]' }]
+        }] });
+/** Toutes les directives de gabarit, a importer d'un coup. */
+const GABARITS_D_ETAT = [StSucces, StErreur, StVide, StHorsLigne, StChargement];
+
+/**
+ * Delai avant d'afficher un chargement. En dessous, l'attente ne se voit pas,
+ * et faire clignoter une silhouette coute plus en confort qu'elle ne rapporte
+ * en information.
+ */
+const DELAI_AVANT_AFFICHAGE_MS = 200;
+/**
+ * Duree minimale d'affichage une fois la silhouette montree. Sans elle, une
+ * reponse arrivant a 210 ms produit un eclair : apparition, disparition.
+ */
+const DUREE_MINIMALE_MS = 400;
+/** Vrai pour une collection vide, une valeur absente, ou une page sans element. */
+function estVideParDefaut(valeur) {
+    if (valeur === null || valeur === undefined)
+        return true;
+    if (Array.isArray(valeur))
+        return valeur.length === 0;
+    // Les pages du socle backend portent leurs elements dans `content`.
+    if (typeof valeur === 'object' && 'content' in valeur) {
+        const { content: contenu } = valeur;
+        return Array.isArray(contenu) && contenu.length === 0;
+    }
+    return false;
+}
 /**
  * Impose les cinq etats a un bloc qui consomme l'API, et centralise leur
  * annonce.
  *
+ * Deux usages. Le plus courant passe la ressource, et l'etat s'en deduit :
+ *
+ * ```html
+ * <st-state [ressource]="operations">
+ *   <ng-template [stSucces]="operations" let-page>…</ng-template>
+ *   <ng-template stErreur let-erreur><st-error … /></ng-template>
+ *   <ng-template stVide><st-empty … /></ng-template>
+ * </st-state>
+ * ```
+ *
+ * L'autre pose `[etat]` a la main, pour un bloc qui ne vient pas d'une
+ * ressource — une soumission de formulaire, par exemple.
+ *
+ * ⚠️ Un RECHARGEMENT garde le contenu affiche. Revenir a la silhouette a chaque
+ * changement de filtre fait clignoter la page entiere et perd la position de
+ * lecture ; seul le premier chargement n'a rien a montrer.
+ *
  * ⚠️ L'hote ne porte PAS `role="status"`, contrairement a ce qu'on attendrait :
  * un remplacement de contenu A L'INTERIEUR d'une region vivante fait relire
  * tout le sous-arbre par le lecteur d'ecran a chaque bascule d'etat. Seule une
- * petite zone masquee porte l'annonce, qui tient en quelques mots. L'hote se
- * contente d'`aria-busy`.
- *
- * Il fournit `REGION_VIVANTE_PARENTE` : les composants qu'il rend (indicateur
- * de chargement, erreur) detectent sa presence et se taisent, au lieu
- * d'annoncer une deuxieme fois le meme fait.
+ * petite zone masquee porte l'annonce, qui tient en quelques mots.
  */
 class StState {
-    etat = input.required(/* @ts-ignore */
+    libelles = inject(ST_LIBELLES);
+    /** La ressource dont l'etat se deduit. */
+    ressource = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ressource" }] : /* istanbul ignore next */ []));
+    /** Etat pose a la main. Il prime sur la ressource quand les deux existent. */
+    etat = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "etat" }] : /* istanbul ignore next */ []));
-    /** Le chemin nominal. Obligatoire : un bloc sans succes n'a pas de raison d'etre. */
-    succes = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "succes" }] : /* istanbul ignore next */ []));
-    chargement = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "chargement" }] : /* istanbul ignore next */ []));
-    erreur = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "erreur" }] : /* istanbul ignore next */ []));
-    vide = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "vide" }] : /* istanbul ignore next */ []));
-    horsLigne = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "horsLigne" }] : /* istanbul ignore next */ []));
+    /** Ce qui compte comme « vide » : par defaut, une collection sans element. */
+    estVide = input(estVideParDefaut, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "estVide" }] : /* istanbul ignore next */ []));
     /** Silhouette par defaut du chargement. `null` : un indicateur tournant. */
     squelette = input('texte', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "squelette" }] : /* istanbul ignore next */ []));
     lignesDeSquelette = input(3, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "lignesDeSquelette" }] : /* istanbul ignore next */ []));
-    annonces = input(ANNONCES_PAR_DEFAUT, /* @ts-ignore */
+    /** `null` : les annonces viennent du dictionnaire de l'application. */
+    annonces = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "annonces" }] : /* istanbul ignore next */ []));
-    annonce = computed(() => this.annonces()[this.etat()], /* @ts-ignore */
+    gabaritSucces = contentChild(StSucces, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gabaritSucces" }] : /* istanbul ignore next */ []));
+    gabaritErreur = contentChild(StErreur, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gabaritErreur" }] : /* istanbul ignore next */ []));
+    gabaritVide = contentChild(StVide, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gabaritVide" }] : /* istanbul ignore next */ []));
+    gabaritHorsLigne = contentChild(StHorsLigne, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gabaritHorsLigne" }] : /* istanbul ignore next */ []));
+    gabaritChargement = contentChild(StChargement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gabaritChargement" }] : /* istanbul ignore next */ []));
+    instantane = computed(() => {
+        const ressource = this.ressource();
+        if (ressource === null)
+            return { statut: 'idle', valeur: undefined };
+        return {
+            statut: ressource.status(),
+            valeur: ressource.hasValue() ? ressource.value() : undefined,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "instantane" }] : /* istanbul ignore next */ []));
+    /**
+     * La derniere valeur connue, gardee pendant qu'une autre se charge.
+     *
+     * ⚠️ Necessaire, et pas seulement confortable : un changement de PARAMETRE
+     * n'est pas un `reload`. Angular traite le premier comme une nouvelle
+     * requete — statut « loading », valeur videe. Sans cette memoire, changer un
+     * filtre ou tourner une page ferait donc disparaitre le tableau, clignoter la
+     * page, et perdre la position de lecture. Une erreur, elle, ne garde rien :
+     * afficher des donnees perimees sous un message d'erreur serait mentir.
+     */
+    valeurRetenue = linkedSignal({ ...(ngDevMode ? { debugName: "valeurRetenue" } : /* istanbul ignore next */ {}), source: () => this.instantane(),
+        computation: (source, precedent) => {
+            if (source.valeur !== undefined)
+                return source.valeur;
+            const enCoursDeChargement = source.statut === 'loading' || source.statut === 'reloading';
+            return enCoursDeChargement ? precedent?.value : undefined;
+        } });
+    /** Etat deduit de la ressource, valeur retenue comprise. */
+    etatDeLaRessource = computed(() => {
+        if (this.ressource() === null)
+            return null;
+        const { statut } = this.instantane();
+        if (statut === 'error') {
+            // Une requete qui n'a jamais atteint le serveur rend le statut 0 : c'est
+            // une perte de reseau, pas une panne serveur. Lu par forme plutot que par
+            // type, pour ne pas lier les composants au client HTTP.
+            const erreur = this.ressource()?.error();
+            return erreur?.status === 0 ? 'hors-ligne' : 'erreur';
+        }
+        const valeur = this.valeurRetenue();
+        if (valeur === undefined)
+            return statut === 'idle' || statut === 'loading' ? 'chargement' : 'vide';
+        return this.estVide()(valeur) ? 'vide' : 'succes';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etatDeLaRessource" }] : /* istanbul ignore next */ []));
+    etatEffectif = computed(() => this.etat() ?? this.etatDeLaRessource() ?? 'chargement', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etatEffectif" }] : /* istanbul ignore next */ []));
+    /**
+     * Une valeur est affichee, et une autre arrive — par rappel explicite ou par
+     * changement de parametre.
+     */
+    enRechargement = computed(() => {
+        const { statut } = this.instantane();
+        if (statut !== 'loading' && statut !== 'reloading')
+            return false;
+        return this.valeurRetenue() !== undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enRechargement" }] : /* istanbul ignore next */ []));
+    enAttente = computed(() => this.etatEffectif() === 'chargement' || this.enRechargement(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enAttente" }] : /* istanbul ignore next */ []));
+    annoncesLues = computed(() => {
+        const fournies = this.annonces();
+        if (fournies !== null)
+            return fournies;
+        const libelles = this.libelles();
+        return {
+            chargement: libelles.chargementEnCours,
+            erreur: libelles.erreurSurvenue,
+            vide: libelles.aucunResultat,
+            'hors-ligne': libelles.horsConnexion,
+            // Le succes ne s'annonce pas : c'est le contenu lui-meme qui parle.
+            succes: '',
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "annoncesLues" }] : /* istanbul ignore next */ []));
+    annonce = computed(() => this.annoncesLues()[this.etatEffectif()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "annonce" }] : /* istanbul ignore next */ []));
+    /** Contexte passe au gabarit : la valeur en succes, l'erreur en erreur. */
+    contexte = computed(() => {
+        const ressource = this.ressource();
+        if (ressource === null)
+            return { $implicit: undefined };
+        if (this.etatEffectif() === 'erreur' || this.etatEffectif() === 'hors-ligne') {
+            return { $implicit: ressource.error() };
+        }
+        return { $implicit: this.valeurRetenue() };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contexte" }] : /* istanbul ignore next */ []));
     /**
      * Les etats degrades n'ont pas de rendu par defaut : afficher un texte
      * generique a la place d'un vrai ecran vide ou d'une vraie erreur donnerait
@@ -1337,43 +2641,83 @@ class StState {
      * voie, en developpement.
      */
     gabaritDeLEtat = computed(() => {
-        switch (this.etat()) {
+        switch (this.etatEffectif()) {
             case 'erreur':
-                return this.signalerSiAbsent(this.erreur(), 'erreur');
+                return this.signalerSiAbsent(this.gabaritErreur()?.gabarit, 'erreur');
             case 'vide':
-                return this.signalerSiAbsent(this.vide(), 'vide');
+                return this.signalerSiAbsent(this.gabaritVide()?.gabarit, 'vide');
             case 'hors-ligne':
-                return this.signalerSiAbsent(this.horsLigne() ?? this.erreur(), 'hors-ligne');
+                return this.signalerSiAbsent(this.gabaritHorsLigne()?.gabarit ?? this.gabaritErreur()?.gabarit, 'hors-ligne');
             case 'chargement':
-                return this.chargement();
+                return this.gabaritChargement()?.gabarit ?? null;
             default:
-                return this.succes();
+                return this.signalerSiAbsent(this.gabaritSucces()?.gabarit, 'succes');
         }
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "gabaritDeLEtat" }] : /* istanbul ignore next */ []));
-    montreLaSilhouetteParDefaut = computed(() => this.etat() === 'chargement' && this.chargement() === null, /* @ts-ignore */
+    chargementVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chargementVisible" }] : /* istanbul ignore next */ []));
+    /** La silhouette par defaut, une fois le delai anti-clignotement passe. */
+    montreLaSilhouetteParDefaut = computed(() => this.etatEffectif() === 'chargement' &&
+        this.gabaritChargement() === undefined &&
+        this.chargementVisible(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "montreLaSilhouetteParDefaut" }] : /* istanbul ignore next */ []));
+    constructor() {
+        let minuterie = null;
+        let afficheDepuis = 0;
+        const arreter = () => {
+            if (minuterie !== null)
+                clearTimeout(minuterie);
+            minuterie = null;
+        };
+        effect(() => {
+            const charge = this.etatEffectif() === 'chargement';
+            arreter();
+            if (charge) {
+                if (this.chargementVisible())
+                    return;
+                minuterie = setTimeout(() => {
+                    afficheDepuis = Date.now();
+                    this.chargementVisible.set(true);
+                }, DELAI_AVANT_AFFICHAGE_MS);
+                return;
+            }
+            if (!this.chargementVisible())
+                return;
+            // Deja affichee : elle reste le temps minimal, sinon elle clignote.
+            const reste = DUREE_MINIMALE_MS - (Date.now() - afficheDepuis);
+            if (reste <= 0) {
+                this.chargementVisible.set(false);
+                return;
+            }
+            minuterie = setTimeout(() => {
+                this.chargementVisible.set(false);
+            }, reste);
+        });
+        inject(DestroyRef).onDestroy(arreter);
+    }
     signalerSiAbsent(gabarit, nom) {
-        if (gabarit === null && isDevMode()) {
+        if (gabarit === undefined && isDevMode()) {
             // Volontairement un avertissement et non une exception : casser l'ecran
             // entier pour un etat degrade non traite aggraverait la panne en
             // production. En developpement, le message est impossible a manquer.
             console.warn(`[st-state] Etat « ${nom} » atteint sans gabarit. Les cinq etats doivent etre traites : ` +
-                'fournir [erreur], [vide] et [horsLigne].');
+                'declarer <ng-template stErreur>, <ng-template stVide> et <ng-template stHorsLigne>.');
         }
-        return gabarit;
+        return gabarit ?? null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StState, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StState, isStandalone: true, selector: "st-state", inputs: { etat: { classPropertyName: "etat", publicName: "etat", isSignal: true, isRequired: true, transformFunction: null }, succes: { classPropertyName: "succes", publicName: "succes", isSignal: true, isRequired: true, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, erreur: { classPropertyName: "erreur", publicName: "erreur", isSignal: true, isRequired: false, transformFunction: null }, vide: { classPropertyName: "vide", publicName: "vide", isSignal: true, isRequired: false, transformFunction: null }, horsLigne: { classPropertyName: "horsLigne", publicName: "horsLigne", isSignal: true, isRequired: false, transformFunction: null }, squelette: { classPropertyName: "squelette", publicName: "squelette", isSignal: true, isRequired: false, transformFunction: null }, lignesDeSquelette: { classPropertyName: "lignesDeSquelette", publicName: "lignesDeSquelette", isSignal: true, isRequired: false, transformFunction: null }, annonces: { classPropertyName: "annonces", publicName: "annonces", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-etat": "etat()", "attr.aria-busy": "etat() === \"chargement\" ? \"true\" : null" }, classAttribute: "st-state" }, providers: [{ provide: REGION_VIVANTE_PARENTE, useValue: true }], ngImport: i0, template: "@if (montreLaSilhouetteParDefaut()) {\n  @if (squelette(); as variante) {\n    <st-skeleton [variante]=\"variante\" [lignes]=\"lignesDeSquelette()\" />\n  } @else {\n    <st-spinner />\n  }\n} @else if (gabaritDeLEtat(); as gabarit) {\n  <ng-container [ngTemplateOutlet]=\"gabarit\" />\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce() }}</span>\n", styles: [":host{display:block}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StSkeleton, selector: "st-skeleton", inputs: ["variante", "lignes", "colonnes", "anime"] }, { kind: "component", type: StSpinner, selector: "st-spinner", inputs: ["taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StState, isStandalone: true, selector: "st-state", inputs: { ressource: { classPropertyName: "ressource", publicName: "ressource", isSignal: true, isRequired: false, transformFunction: null }, etat: { classPropertyName: "etat", publicName: "etat", isSignal: true, isRequired: false, transformFunction: null }, estVide: { classPropertyName: "estVide", publicName: "estVide", isSignal: true, isRequired: false, transformFunction: null }, squelette: { classPropertyName: "squelette", publicName: "squelette", isSignal: true, isRequired: false, transformFunction: null }, lignesDeSquelette: { classPropertyName: "lignesDeSquelette", publicName: "lignesDeSquelette", isSignal: true, isRequired: false, transformFunction: null }, annonces: { classPropertyName: "annonces", publicName: "annonces", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-etat": "etatEffectif()", "attr.data-rechargement": "enRechargement() ? \"\" : null", "attr.aria-busy": "enAttente() ? \"true\" : null" }, classAttribute: "st-state" }, providers: [{ provide: REGION_VIVANTE_PARENTE, useValue: true }], queries: [{ propertyName: "gabaritSucces", first: true, predicate: StSucces, descendants: true, isSignal: true }, { propertyName: "gabaritErreur", first: true, predicate: StErreur, descendants: true, isSignal: true }, { propertyName: "gabaritVide", first: true, predicate: StVide, descendants: true, isSignal: true }, { propertyName: "gabaritHorsLigne", first: true, predicate: StHorsLigne, descendants: true, isSignal: true }, { propertyName: "gabaritChargement", first: true, predicate: StChargement, descendants: true, isSignal: true }], ngImport: i0, template: "@if (montreLaSilhouetteParDefaut()) {\n  @if (squelette(); as variante) {\n    <st-skeleton [variante]=\"variante\" [lignes]=\"lignesDeSquelette()\" />\n  } @else {\n    <st-spinner />\n  }\n} @else if (gabaritDeLEtat(); as gabarit) {\n  <ng-container [ngTemplateOutlet]=\"gabarit\" [ngTemplateOutletContext]=\"contexte()\" />\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce() }}</span>\n", styles: [":host([hidden]){display:none!important}:host{display:block}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StSkeleton, selector: "st-skeleton", inputs: ["variante", "lignes", "colonnes", "anime"] }, { kind: "component", type: StSpinner, selector: "st-spinner", inputs: ["taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StState, decorators: [{
             type: Component,
             args: [{ selector: 'st-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, StSkeleton, StSpinner], providers: [{ provide: REGION_VIVANTE_PARENTE, useValue: true }], host: {
                         class: 'st-state',
-                        '[attr.data-etat]': 'etat()',
-                        '[attr.aria-busy]': 'etat() === "chargement" ? "true" : null',
-                    }, template: "@if (montreLaSilhouetteParDefaut()) {\n  @if (squelette(); as variante) {\n    <st-skeleton [variante]=\"variante\" [lignes]=\"lignesDeSquelette()\" />\n  } @else {\n    <st-spinner />\n  }\n} @else if (gabaritDeLEtat(); as gabarit) {\n  <ng-container [ngTemplateOutlet]=\"gabarit\" />\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce() }}</span>\n", styles: [":host{display:block}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
-        }], propDecorators: { etat: [{ type: i0.Input, args: [{ isSignal: true, alias: "etat", required: true }] }], succes: [{ type: i0.Input, args: [{ isSignal: true, alias: "succes", required: true }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], erreur: [{ type: i0.Input, args: [{ isSignal: true, alias: "erreur", required: false }] }], vide: [{ type: i0.Input, args: [{ isSignal: true, alias: "vide", required: false }] }], horsLigne: [{ type: i0.Input, args: [{ isSignal: true, alias: "horsLigne", required: false }] }], squelette: [{ type: i0.Input, args: [{ isSignal: true, alias: "squelette", required: false }] }], lignesDeSquelette: [{ type: i0.Input, args: [{ isSignal: true, alias: "lignesDeSquelette", required: false }] }], annonces: [{ type: i0.Input, args: [{ isSignal: true, alias: "annonces", required: false }] }] } });
+                        '[attr.data-etat]': 'etatEffectif()',
+                        '[attr.data-rechargement]': 'enRechargement() ? "" : null',
+                        '[attr.aria-busy]': 'enAttente() ? "true" : null',
+                    }, template: "@if (montreLaSilhouetteParDefaut()) {\n  @if (squelette(); as variante) {\n    <st-skeleton [variante]=\"variante\" [lignes]=\"lignesDeSquelette()\" />\n  } @else {\n    <st-spinner />\n  }\n} @else if (gabaritDeLEtat(); as gabarit) {\n  <ng-container [ngTemplateOutlet]=\"gabarit\" [ngTemplateOutletContext]=\"contexte()\" />\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce() }}</span>\n", styles: [":host([hidden]){display:none!important}:host{display:block}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ressource: [{ type: i0.Input, args: [{ isSignal: true, alias: "ressource", required: false }] }], etat: [{ type: i0.Input, args: [{ isSignal: true, alias: "etat", required: false }] }], estVide: [{ type: i0.Input, args: [{ isSignal: true, alias: "estVide", required: false }] }], squelette: [{ type: i0.Input, args: [{ isSignal: true, alias: "squelette", required: false }] }], lignesDeSquelette: [{ type: i0.Input, args: [{ isSignal: true, alias: "lignesDeSquelette", required: false }] }], annonces: [{ type: i0.Input, args: [{ isSignal: true, alias: "annonces", required: false }] }], gabaritSucces: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StSucces), { isSignal: true }] }], gabaritErreur: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StErreur), { isSignal: true }] }], gabaritVide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StVide), { isSignal: true }] }], gabaritHorsLigne: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StHorsLigne), { isSignal: true }] }], gabaritChargement: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StChargement), { isSignal: true }] }] } });
 
 /**
  * @starterlib/ui — bibliotheque de composants du socle frontal.
@@ -1387,5 +2731,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHEMIN_DU_SPRITE, ETATS_DE_BLOC, FUSEAU_PAR_DEFAUT, NOMS_DICONE, REGION_VIVANTE_PARENTE, StAvatar, StBadge, StButton, StButtonGroup, StCode, StCount, StDate, StEmpty, StError, StHeading, StIcon, StIconButton, StLink, StMasked, StMoney, StOfflineBanner, StProgress, StRelativeTime, StSkeleton, StSpinner, StState, StStatusPill, StTag, StText, fournirCheminDuSprite };
+export { AnnonceLocale, CHEMIN_DU_SPRITE, 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, StCard, StChargement, StCode, StCopyButton, StCount, StDate, StDivider, StEmpty, StErreur, StError, StHeader, StHeading, StHorsLigne, StIcon, StIconButton, StInlineMessage, StLangSwitch, StLink, StLogo, StMasked, StMoney, StOfflineBanner, StPageTitle, StProgress, StRelativeTime, StSection, StSkeleton, StSkipLink, StSpinner, StState, StStatusPill, StSucces, StTag, StText, StThemeToggle, StTimer, StVide, copierDansLePressePapiers, formaterDuree, fournirCheminDuSprite, pressePapiersDisponible, provideStarterUi };
 //# sourceMappingURL=starterlib-ui.mjs.map