@starterlib/ui 0.6.0 → 0.7.1

package/fesm2022/starterlib-ui.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, LOCALE_ID, signal, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, ElementRef, DestroyRef, output, model, afterNextRender, viewChild, Directive, effect, Injector, linkedSignal, TemplateRef, contentChildren, contentChild, isDevMode } from '@angular/core';
+import { InjectionToken, inject, LOCALE_ID, signal, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, ElementRef, DestroyRef, output, model, afterNextRender, viewChild, effect, Directive, Injector, linkedSignal, TemplateRef, contentChildren, contentChild, isDevMode } from '@angular/core';
 import { masquerIban, masquerTelephone, masquerCarte, quatreDerniers, formaterIban, formaterMontant, formaterTaille, formaterDateLongue, montant, decimalesDe, motifDeDate, formaterDateSaisie, ibanEstValide, normaliserTelephone, typeDeFichierAccepte, normaliserIban, bornerDate, premierJourDeLaSemaine, ajouterJours, semainesDuMois, ajouterMois, jourDeLaSemaine, CHOIX_DE_THEME, LANGUES } from '@starterlib/util';
 export { ETATS_DE_BLOC } from '@starterlib/util';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
-import { RouterLink } from '@angular/router';
+import * as i1 from '@angular/router';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 /**
  * Defaut francais, identique mot pour mot aux textes ecrits en dur jusqu'a la
@@ -45,6 +46,17 @@ const LIBELLES_FR = {
     filDAriane: 'Fil d\u2019Ariane',
     allerAuContenu: 'Aller au contenu',
     navigationPrincipale: 'Navigation principale',
+    liensDuPied: 'Liens de bas de page',
+    chargement: 'Chargement',
+    plus: 'Plus',
+    plusDActions: 'Plus d\u2019actions',
+    etapes: '\u00c9tapes',
+    etapeTerminee: 'termin\u00e9e',
+    etapeEnCours: 'en cours',
+    etapeAVenir: '\u00e0 venir',
+    tendanceEnHausse: 'en hausse',
+    tendanceEnBaisse: 'en baisse',
+    tendanceStable: 'stable',
     theme: 'Th\u00e8me',
     themeSysteme: 'Syst\u00e8me',
     themeClair: 'Clair',
@@ -170,6 +182,17 @@ const LIBELLES_EN = {
     filDAriane: 'Breadcrumb',
     allerAuContenu: 'Skip to content',
     navigationPrincipale: 'Main navigation',
+    liensDuPied: 'Footer links',
+    chargement: 'Loading',
+    plus: 'More',
+    plusDActions: 'More actions',
+    etapes: 'Steps',
+    etapeTerminee: 'completed',
+    etapeEnCours: 'current',
+    etapeAVenir: 'upcoming',
+    tendanceEnHausse: 'up',
+    tendanceEnBaisse: 'down',
+    tendanceStable: 'unchanged',
     theme: 'Theme',
     themeSysteme: 'System',
     themeClair: 'Light',
@@ -507,11 +530,37 @@ const ICONES_DIRECTIONNELLES = new Set(['chevron-gauche', 'chevron-droite']);
  * Une icone est **decorative par defaut**. Regle de tri : si la retirer ne
  * retire aucune information, elle est decorative. Une icone posee a cote d'un
  * texte qui dit la meme chose l'est toujours.
+ *
+ * **Deux sprites, deux entrees.** Sans `sprite`, l'icone vient du sprite du
+ * socle (`CHEMIN_DU_SPRITE`, fourni par la coquille), et `nom` est contraint au
+ * type `NomDIcone` : une faute de frappe echoue a la compilation. Avec `sprite`
+ * — le chemin ABSOLU et hache que le manifeste d'un remote annonce —, l'icone
+ * est METIER : `nomMetier` accepte n'importe quel identifiant du sprite donne.
+ *
+ * ```html
+ * <st-icon nom="coche" />
+ * <st-icon [sprite]="manifeste.sprite" nomMetier="virement-instantane" />
+ * ```
+ *
+ * ⚠️ Un `nomMetier` sans `sprite` est refuse : le sprite du socle ne le
+ * contient pas, et une reference `use` qui ne resout pas ne rend RIEN, sans
+ * erreur. Mieux vaut echouer au rendu, une fois, avec la marche a suivre.
  */
 class StIcon {
     cheminDuSprite = inject(CHEMIN_DU_SPRITE);
-    nom = input.required(/* @ts-ignore */
+    /** Nom d'un symbole du sprite du socle. Obligatoire sans `sprite`. */
+    nom = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nom" }] : /* istanbul ignore next */ []));
+    /**
+     * Chemin absolu d'un sprite METIER, hache, tel que le manifeste du remote le
+     * fournit. Jamais un chemin nu comme `/assets/icones/metier.svg` : le cache
+     * d'un an sur empreinte servirait l'ancien sprite apres un deploiement.
+     */
+    sprite = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sprite" }] : /* istanbul ignore next */ []));
+    /** Nom d'un symbole du sprite METIER. Hors du type ferme du socle, et l'exige. */
+    nomMetier = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nomMetier" }] : /* istanbul ignore next */ []));
     taille = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "taille" }] : /* istanbul ignore next */ []));
     ton = input('neutre', /* @ts-ignore */
@@ -521,12 +570,41 @@ class StIcon {
     ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
     estDecorative = computed(() => this.etiquette() === null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "estDecorative" }] : /* istanbul ignore next */ []));
-    directionnelle = computed(() => ICONES_DIRECTIONNELLES.has(this.nom()), /* @ts-ignore */
+    /** Seul le sprite du socle a des chevrons a miroiter : un sprite metier dessine les siens. */
+    directionnelle = computed(() => {
+        const nom = this.nom();
+        return this.sprite() === null && nom !== null && ICONES_DIRECTIONNELLES.has(nom);
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "directionnelle" }] : /* istanbul ignore next */ []));
-    reference = computed(() => `${this.cheminDuSprite}#${this.nom()}`, /* @ts-ignore */
+    reference = computed(() => {
+        const sprite = this.sprite();
+        if (sprite === null)
+            return `${this.cheminDuSprite}#${this.nomDuSocle()}`;
+        if (!sprite.startsWith('/')) {
+            throw new Error(`st-icon : le sprite « ${sprite} » doit etre un chemin ABSOLU, sous le prefixe de` +
+                ' service, tel que le manifeste du remote le fournit. Un chemin relatif se resout' +
+                " contre l'URL de la page, et change a chaque route.");
+        }
+        const nom = this.nomMetier() ?? this.nom();
+        if (nom === null) {
+            throw new Error('st-icon : avec un `sprite`, `nomMetier` (ou `nom`) est obligatoire.');
+        }
+        return `${sprite}#${nom}`;
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "reference" }] : /* istanbul ignore next */ []));
+    nomDuSocle() {
+        const nom = this.nom();
+        if (nom !== null)
+            return nom;
+        const metier = this.nomMetier();
+        if (metier !== null) {
+            throw new Error(`st-icon : « ${metier} » est un nom metier, absent du sprite du socle.` +
+                ' Fournir le `sprite` du remote qui le dessine.');
+        }
+        throw new Error('st-icon : `nom` est obligatoire — un nom du sprite du socle.');
+    }
     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  [class.st-icon__miroir]=\"directionnelle()\"\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-context([dir=rtl]) .st-icon__miroir{transform:scaleX(-1)}: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: false, transformFunction: null }, sprite: { classPropertyName: "sprite", publicName: "sprite", isSignal: true, isRequired: false, transformFunction: null }, nomMetier: { classPropertyName: "nomMetier", publicName: "nomMetier", isSignal: true, isRequired: false, 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  [class.st-icon__miroir]=\"directionnelle()\"\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-context([dir=rtl]) .st-icon__miroir{transform:scaleX(-1)}: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,
@@ -535,7 +613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-taille]': 'taille()',
                         '[attr.data-ton]': 'ton()',
                     }, template: "<svg\n  [class.st-icon__miroir]=\"directionnelle()\"\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-context([dir=rtl]) .st-icon__miroir{transform:scaleX(-1)}: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 }] }] } });
+        }], propDecorators: { nom: [{ type: i0.Input, args: [{ isSignal: true, alias: "nom", required: false }] }], sprite: [{ type: i0.Input, args: [{ isSignal: true, alias: "sprite", required: false }] }], nomMetier: [{ type: i0.Input, args: [{ isSignal: true, alias: "nomMetier", required: false }] }], 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 }] }] } });
 
 /**
  * Noms du sprite, tenus a l'identique de `assets/icones/sprite.svg` par les
@@ -715,6 +793,8 @@ class StProgress {
     ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
     ton = input('primaire', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ton" }] : /* istanbul ignore next */ []));
+    epaisseur = input('normale', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "epaisseur" }] : /* istanbul ignore next */ []));
     /** Texte lu a la place du pourcentage quand celui-ci n'est pas parlant. */
     texteDeValeur = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "texteDeValeur" }] : /* istanbul ignore next */ []));
@@ -735,7 +815,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: [".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 var(--st-anim-respiration, 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 }, epaisseur: { classPropertyName: "epaisseur", publicName: "epaisseur", 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-epaisseur": "epaisseur()", "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-epaisseur=fine]){block-size:var(--st-epaisseur-forte);border-radius:0}: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 var(--st-anim-respiration, 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,
@@ -743,6 +823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'st-progress',
                         role: 'progressbar',
                         '[attr.data-ton]': 'ton()',
+                        '[attr.data-epaisseur]': 'epaisseur()',
                         '[attr.data-indetermine]': 'estIndeterminee() ? "" : null',
                         '[attr.aria-label]': 'etiquette()',
                         '[attr.aria-valuemin]': '0',
@@ -750,8 +831,8 @@ 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: [".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 var(--st-anim-respiration, 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 }] }] } });
+                    }, 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-epaisseur=fine]){block-size:var(--st-epaisseur-forte);border-radius:0}: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 var(--st-anim-respiration, 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 }] }], epaisseur: [{ type: i0.Input, args: [{ isSignal: true, alias: "epaisseur", required: false }] }], texteDeValeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "texteDeValeur", required: false }] }] } });
 
 /**
  * Silhouette du contenu en cours de chargement.
@@ -863,7 +944,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 }, 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-commande-hauteur, 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-commande-rayon, 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-commande-hauteur, 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%}@media(prefers-reduced-motion:reduce){:host{transition:none}}\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-commande-hauteur, 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-commande-rayon, 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}@media(hover:hover){: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;display:flex;align-items:center;justify-content:center}: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)}@media(hover:hover){: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)}@media(hover:hover){: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}@media(hover:hover){: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-commande-hauteur, 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%}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "sprite", "nomMetier", "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,
@@ -874,7 +955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-pleine-largeur]': 'pleineLargeur() ? "" : 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([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-commande-hauteur, 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-commande-rayon, 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-commande-hauteur, 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%}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
+                    }, 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-commande-hauteur, 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-commande-rayon, 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}@media(hover:hover){: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;display:flex;align-items:center;justify-content:center}: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)}@media(hover:hover){: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)}@media(hover:hover){: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}@media(hover:hover){: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-commande-hauteur, 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%}@media(prefers-reduced-motion:reduce){:host{transition:none}}\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 }] }] } });
 
 /**
@@ -905,7 +986,7 @@ class StIconButton {
     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 } }, 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-commande-hauteur, var(--st-cible-tactile-min));min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-commande-rayon, 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)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\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-commande-hauteur, var(--st-cible-tactile-min));min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-commande-rayon, 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}@media(hover:hover){: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)}@media(hover:hover){:host([data-variante=danger]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "sprite", "nomMetier", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIconButton, decorators: [{
             type: Component,
@@ -915,7 +996,7 @@ 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([hidden]){display:none!important}:host{display:inline-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-commande-rayon, 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)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
+                    }, 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-commande-hauteur, var(--st-cible-tactile-min));min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-commande-rayon, 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}@media(hover:hover){: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)}@media(hover:hover){:host([data-variante=danger]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}}@media(prefers-reduced-motion:reduce){:host{transition:none}}\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 }] }] } });
 
 /**
@@ -943,7 +1024,7 @@ class StLink {
     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\">{{ mentionExterneLue() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline;gap:var(--st-espacement-1);min-block-size:var(--st-cible-min);align-items:center;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);min-block-size:var(--st-cible-min);align-items:center;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}@media(hover:hover){: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}@media(hover:hover){: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", "sprite", "nomMetier", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StLink, decorators: [{
             type: Component,
@@ -952,7 +1033,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\">{{ mentionExterneLue() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline;gap:var(--st-espacement-1);min-block-size:var(--st-cible-min);align-items:center;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);min-block-size:var(--st-cible-min);align-items:center;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}@media(hover:hover){: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}@media(hover:hover){: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 }] }] } });
 
 /**
@@ -985,6 +1066,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     }, 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 }] }] } });
 
+/**
+ * Barre d'actions d'un formulaire, collee en BAS de la zone de defilement.
+ *
+ * ```html
+ * <form (submit)="envoyer()">
+ *   …
+ *   <st-form-actions>
+ *     <a debut stLink routerLink="..">Annuler</a>
+ *     <button stButton type="button">Enregistrer le brouillon</button>
+ *     <button stButton type="submit" variante="primaire">Valider le virement</button>
+ *   </st-form-actions>
+ * </form>
+ * ```
+ *
+ * ⚠️ **`sticky`, JAMAIS `fixed`.** Un element fixe sort du flux : a 200 %
+ * d'echelle il recouvre les derniers champs, et dans une vue embarquee il se
+ * pose sous la barre du systeme. Collee, la barre reste dans le document —
+ * elle suit le formulaire, cede la place a son pied, et respecte la zone sure
+ * du bas de l'ecran (`env(safe-area-inset-bottom)`).
+ *
+ * ⚠️ **L'ordre du document est l'ordre visuel.** Rien n'est inverse par le
+ * style : l'action principale s'ecrit en dernier, elle se lit en dernier et se
+ * tabule en dernier — la ou la personne arrive apres avoir relu ses champs.
+ * L'emplacement `debut` accueille ce qui part a l'oppose (un retour, une
+ * annulation), et vient en premier dans les deux ordres.
+ *
+ * Une seule action principale par formulaire, et elle est un vrai
+ * `type="submit"` : Entree dans un champ l'envoie.
+ */
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class -- composant de mise en page pur : tout est dans son gabarit et sa feuille.
+class StFormActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFormActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StFormActions, isStandalone: true, selector: "st-form-actions", host: { classAttribute: "st-form-actions" }, ngImport: i0, template: "<div class=\"st-form-actions__debut\">\n  <ng-content select=\"[debut]\" />\n</div>\n<div class=\"st-form-actions__fin\">\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{position:sticky;inset-block-end:0;z-index:var(--st-plan-contenu-eleve);display:flex;flex-wrap:wrap;gap:var(--st-espacement-3);align-items:center;justify-content:flex-end;padding-block:var(--st-espacement-3) calc(var(--st-espacement-3) + env(safe-area-inset-bottom,0));margin-block-start:var(--st-espacement-6);background:var(--st-couleur-surface);border-block-start:var(--st-epaisseur-fine) solid var(--st-couleur-bordure)}.st-form-actions__debut{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3);align-items:center;margin-inline-end:auto}.st-form-actions__debut:empty{display:none}.st-form-actions__fin{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3);align-items:center;justify-content:flex-end}@media print{:host{position:static}}@media(forced-colors:active){:host{border-block-start-color:CanvasText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFormActions, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-form-actions', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-form-actions' }, template: "<div class=\"st-form-actions__debut\">\n  <ng-content select=\"[debut]\" />\n</div>\n<div class=\"st-form-actions__fin\">\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{position:sticky;inset-block-end:0;z-index:var(--st-plan-contenu-eleve);display:flex;flex-wrap:wrap;gap:var(--st-espacement-3);align-items:center;justify-content:flex-end;padding-block:var(--st-espacement-3) calc(var(--st-espacement-3) + env(safe-area-inset-bottom,0));margin-block-start:var(--st-espacement-6);background:var(--st-couleur-surface);border-block-start:var(--st-epaisseur-fine) solid var(--st-couleur-bordure)}.st-form-actions__debut{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3);align-items:center;margin-inline-end:auto}.st-form-actions__debut:empty{display:none}.st-form-actions__fin{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3);align-items:center;justify-content:flex-end}@media print{:host{position:static}}@media(forced-colors:active){:host{border-block-start-color:CanvasText}}\n"] }]
+        }] });
+
 /**
  * Valeur technique courte et copiable : identifiant de trace, reference
  * d'operation, code d'erreur.
@@ -1469,6 +1589,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     }, 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 }] }] } });
 
+/**
+ * ⚠️ Une forme par sens, et non une couleur : un chevron vers le haut, un vers
+ * le bas, un point pour ce qui ne bouge pas. Sous contraste force ou a
+ * l'impression, il ne reste que la forme et le texte.
+ */
+const ICONE_DE_TENDANCE = {
+    hausse: 'chevron-haut',
+    baisse: 'chevron-bas',
+    stable: 'cercle',
+};
+/**
+ * Indicateur chiffre : un libelle, une valeur, et sa tendance.
+ *
+ * ```html
+ * <st-stat libelle="Solde disponible" [tendance]="{ sens: 'hausse', texte: '+2,4 % sur un mois', ton: 'succes' }">
+ *   <st-money [valeur]="solde" />
+ * </st-stat>
+ * ```
+ *
+ * La valeur est PROJETEE : c'est `st-money`, `st-count` ou `st-date` qui la
+ * formate dans la langue courante, et le socle n'a pas a redire comment.
+ *
+ * ⚠️ **La tendance se lit par un texte ET une icone, jamais par la couleur
+ * seule.** Le texte de l'appelant porte deja le signe ; l'icone porte le sens ;
+ * et un mot lisible par lecteur seulement — « en hausse », « en baisse »,
+ * « stable » — precede le texte, parce qu'un lecteur d'ecran ne lit pas un
+ * chevron.
+ *
+ * Le libelle vient AVANT la valeur dans le document, comme dans une phrase :
+ * « Solde disponible, 1 234,50 € ». A l'ecran, il se pose au-dessus, en petit.
+ */
+class StStat {
+    libelles = inject(ST_LIBELLES);
+    /** Texte visible, deja traduit. */
+    libelle = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []));
+    tendance = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tendance" }] : /* istanbul ignore next */ []));
+    /** Precision sous la valeur : la periode, la source. Jamais une information critique. */
+    precision = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "precision" }] : /* istanbul ignore next */ []));
+    icone = computed(() => {
+        const tendance = this.tendance();
+        return tendance === null ? null : ICONE_DE_TENDANCE[tendance.sens];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icone" }] : /* istanbul ignore next */ []));
+    tonDeTendance = computed(() => this.tendance()?.ton ?? 'neutre', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tonDeTendance" }] : /* istanbul ignore next */ []));
+    sensLu = computed(() => {
+        const tendance = this.tendance();
+        if (tendance === null)
+            return '';
+        const libelles = this.libelles();
+        if (tendance.sens === 'hausse')
+            return libelles.tendanceEnHausse;
+        if (tendance.sens === 'baisse')
+            return libelles.tendanceEnBaisse;
+        return libelles.tendanceStable;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sensLu" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StStat, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StStat, isStandalone: true, selector: "st-stat", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null }, tendance: { classPropertyName: "tendance", publicName: "tendance", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-stat" }, ngImport: i0, template: "<span class=\"st-stat__libelle\">{{ libelle() }}</span>\n<span class=\"st-stat__valeur\"><ng-content /></span>\n@if (tendance(); as tendance) {\n  <span class=\"st-stat__tendance\" [attr.data-ton]=\"tonDeTendance()\">\n    @if (icone(); as nom) {\n      <st-icon [nom]=\"nom\" taille=\"sm\" />\n    }\n    <span class=\"st-vh\">{{ sensLu() }}, </span>{{ tendance.texte }}\n  </span>\n}\n@if (precision(); as texte) {\n  <span class=\"st-stat__precision\">{{ texte }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:flex;flex-direction:column;gap:var(--st-espacement-1);min-inline-size:0}.st-stat__libelle{font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}.st-stat__valeur{font-size:var(--st-taille-2xl);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.st-stat__tendance{display:inline-flex;gap:var(--st-espacement-1);align-items:center;font-size:var(--st-taille-sm);color:var(--st-couleur-texte)}.st-stat__tendance[data-ton=discret]{color:var(--st-couleur-texte-discret)}.st-stat__tendance[data-ton=primaire]{color:var(--st-couleur-primaire)}.st-stat__tendance[data-ton=succes]{color:var(--st-couleur-succes)}.st-stat__tendance[data-ton=avertissement]{color:var(--st-couleur-avertissement)}.st-stat__tendance[data-ton=danger]{color:var(--st-couleur-danger)}.st-stat__precision{font-size:var(--st-taille-xs);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"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "sprite", "nomMetier", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StStat, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-stat', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon], host: { class: 'st-stat' }, template: "<span class=\"st-stat__libelle\">{{ libelle() }}</span>\n<span class=\"st-stat__valeur\"><ng-content /></span>\n@if (tendance(); as tendance) {\n  <span class=\"st-stat__tendance\" [attr.data-ton]=\"tonDeTendance()\">\n    @if (icone(); as nom) {\n      <st-icon [nom]=\"nom\" taille=\"sm\" />\n    }\n    <span class=\"st-vh\">{{ sensLu() }}, </span>{{ tendance.texte }}\n  </span>\n}\n@if (precision(); as texte) {\n  <span class=\"st-stat__precision\">{{ texte }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:flex;flex-direction:column;gap:var(--st-espacement-1);min-inline-size:0}.st-stat__libelle{font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}.st-stat__valeur{font-size:var(--st-taille-2xl);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.st-stat__tendance{display:inline-flex;gap:var(--st-espacement-1);align-items:center;font-size:var(--st-taille-sm);color:var(--st-couleur-texte)}.st-stat__tendance[data-ton=discret]{color:var(--st-couleur-texte-discret)}.st-stat__tendance[data-ton=primaire]{color:var(--st-couleur-primaire)}.st-stat__tendance[data-ton=succes]{color:var(--st-couleur-succes)}.st-stat__tendance[data-ton=avertissement]{color:var(--st-couleur-avertissement)}.st-stat__tendance[data-ton=danger]{color:var(--st-couleur-danger)}.st-stat__precision{font-size:var(--st-taille-xs);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: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }], tendance: [{ type: i0.Input, args: [{ isSignal: true, alias: "tendance", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }] } });
+
 /**
  * Pastille de statut.
  *
@@ -1493,7 +1681,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: [".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 });
+    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", "sprite", "nomMetier", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StStatusPill, decorators: [{
             type: Component,
@@ -1683,7 +1871,7 @@ 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: [".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 });
+    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", "sprite", "nomMetier", "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,
@@ -1742,7 +1930,7 @@ class StError {
     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 }, 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 });
+    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", "sprite", "nomMetier", "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,
@@ -1773,7 +1961,7 @@ class StOfflineBanner {
     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: [".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 });
+    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", "sprite", "nomMetier", "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,
@@ -1974,11 +2162,11 @@ class StBreadcrumb {
     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 });
+    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)}@media(hover:hover){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"] }]
+            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)}@media(hover:hover){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`. */
@@ -2039,15 +2227,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }], 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.
+ * Propriete posee sur `<html>` avec la hauteur mesuree de l'en-tete collant.
+ * La feuille de `@starterlib/tokens` la lit dans `scroll-padding-block-start`.
+ */
+const PROPRIETE_HAUTEUR_ENTETE = '--st-hauteur-entete';
+/**
+ * Coquille d'une application : lien d'evitement, en-tete, bannieres globales,
+ * navigation, contenu principal, pied de page.
  *
  * ```html
  * <st-app-shell>
- *   <ng-container entete>…</ng-container>
- *   <ng-container navigation>…</ng-container>
+ *   <st-header entete>…</st-header>
+ *   <st-offline-banner bannieres … />
+ *   <st-sidenav navigation>…</st-sidenav>
  *   <router-outlet />
- *   <ng-container pied>…</ng-container>
+ *   <st-footer pied>…</st-footer>
  * </st-app-shell>
  * ```
  *
@@ -2070,16 +2264,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * `st-sidenav` qui porte ce repere. Pose ici aussi, il s'imbriquerait — le
  * lecteur d'ecran annoncerait « navigation, navigation » — et resterait vide
  * sur petit ecran, quand le contenu part dans le tiroir.
+ *
+ * ⚠️ **L'en-tete est collant, et la coquille en MESURE la hauteur** (WCAG
+ * 2.4.11). Un element collant recouvre ce que le navigateur fait defiler vers
+ * lui : sans decalage, chaque arret de tabulation qui remonte se cache SOUS
+ * l'en-tete. La hauteur n'est pas connue d'avance — elle change avec le zoom,
+ * la taille de police, le repli des actions — d'ou un `ResizeObserver`, qui
+ * pose `--st-hauteur-entete` sur `<html>` ; la feuille de jetons la lit dans
+ * `scroll-padding-block-start`. Sans navigateur (rendu serveur, jsdom), rien
+ * n'est mesure et le repli de la feuille vaut zero.
+ *
+ * L'emplacement `bannieres` est un conteneur sans role, entre l'en-tete et le
+ * corps : chaque banniere porte sa propre region vivante. Jamais `fixed`.
  */
 class StAppShell {
+    document = inject(DOCUMENT);
+    entete = viewChild.required('entete', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entete" }] : /* istanbul ignore next */ []));
+    observateur = null;
     identifiantDuContenu = IDENTIFIANT_DU_CONTENU_PRINCIPAL;
+    constructor() {
+        afterNextRender(() => {
+            this.mesurerLEntete();
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.observateur?.disconnect();
+            this.observateur = null;
+            this.document.documentElement.style.removeProperty(PROPRIETE_HAUTEUR_ENTETE);
+        });
+    }
+    mesurerLEntete() {
+        // Lu sur la fenetre du DOCUMENT injecte, jamais sur le global : c'est ce
+        // qui garde la compatibilite avec un rendu serveur, ou l'observateur
+        // n'existe pas et ou il n'y a rien a mesurer.
+        const Observateur = this.document.defaultView?.ResizeObserver;
+        if (Observateur === undefined)
+            return;
+        const entete = this.entete().nativeElement;
+        const racine = this.document.documentElement;
+        this.observateur = new Observateur((entrees) => {
+            // La boite de bordure : c'est elle qui recouvre le contenu, filet et zone
+            // sure compris. Le repli sert aux moteurs qui ne l'exposent pas encore.
+            const hauteur = entrees[0]?.borderBoxSize[0]?.blockSize ?? entete.getBoundingClientRect().height;
+            racine.style.setProperty(PROPRIETE_HAUTEUR_ENTETE, `${Math.ceil(hauteur).toString()}px`);
+        });
+        this.observateur.observe(entete);
+    }
     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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: StAppShell, isStandalone: true, selector: "st-app-shell", host: { classAttribute: "st-app-shell" }, viewQueries: [{ propertyName: "entete", first: true, predicate: ["entete"], descendants: true, isSignal: true }], ngImport: i0, template: "<st-skip-link [cible]=\"identifiantDuContenu\" />\n\n<header #entete class=\"st-app-shell__entete\">\n  <ng-content select=\"[entete]\" />\n</header>\n\n<div class=\"st-app-shell__bannieres\">\n  <ng-content select=\"[bannieres]\" />\n</div>\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);padding-block-start:env(safe-area-inset-top,0);padding-inline:env(safe-area-inset-left,0) env(safe-area-inset-right,0);background:var(--st-couleur-surface);border-block-end:var(--st-epaisseur-fine) solid var(--st-couleur-bordure)}.st-app-shell__bannieres{display:flex;flex-direction:column}.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__bannieres: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);padding-block-end:calc(var(--st-espacement-4) + env(safe-area-inset-bottom,0));color:var(--st-couleur-texte-discret);border-block-start:var(--st-epaisseur-fine) 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:var(--st-epaisseur-fine) solid var(--st-couleur-bordure)}.st-app-shell__contenu{padding:var(--st-espacement-8)}}@media print{.st-app-shell__entete,.st-app-shell__bannieres,.st-app-shell__navigation,.st-app-shell__pied{display:none}.st-app-shell__entete{position:static}.st-app-shell__contenu{padding:0}}\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"] }]
-        }] });
+            args: [{ selector: 'st-app-shell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StSkipLink], host: { class: 'st-app-shell' }, template: "<st-skip-link [cible]=\"identifiantDuContenu\" />\n\n<header #entete class=\"st-app-shell__entete\">\n  <ng-content select=\"[entete]\" />\n</header>\n\n<div class=\"st-app-shell__bannieres\">\n  <ng-content select=\"[bannieres]\" />\n</div>\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);padding-block-start:env(safe-area-inset-top,0);padding-inline:env(safe-area-inset-left,0) env(safe-area-inset-right,0);background:var(--st-couleur-surface);border-block-end:var(--st-epaisseur-fine) solid var(--st-couleur-bordure)}.st-app-shell__bannieres{display:flex;flex-direction:column}.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__bannieres: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);padding-block-end:calc(var(--st-espacement-4) + env(safe-area-inset-bottom,0));color:var(--st-couleur-texte-discret);border-block-start:var(--st-epaisseur-fine) 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:var(--st-epaisseur-fine) solid var(--st-couleur-bordure)}.st-app-shell__contenu{padding:var(--st-espacement-8)}}@media print{.st-app-shell__entete,.st-app-shell__bannieres,.st-app-shell__navigation,.st-app-shell__pied{display:none}.st-app-shell__entete{position:static}.st-app-shell__contenu{padding:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { entete: [{ type: i0.ViewChild, args: ['entete', { isSignal: true }] }] } });
 
 /**
  * Contenu de l'en-tete : bouton de navigation, marque, puis actions.
@@ -2117,6 +2354,377 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             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"] }]
         }] });
 
+/**
+ * Contenu du pied de page : mentions, version, statut.
+ *
+ * ```html
+ * <st-app-shell>
+ *   …
+ *   <st-footer pied>
+ *     <a mentions stLink routerLink="/mentions">Mentions legales</a>
+ *     <a mentions stLink routerLink="/aide">Aide</a>
+ *     <span version>Version 1.4.2</span>
+ *     <st-status-pill statut="ok" libelle="Services disponibles" icone="cercle-coche" ton="succes" />
+ *   </st-footer>
+ * </st-app-shell>
+ * ```
+ *
+ * ⚠️ **Aucun repere `contentinfo` ici** : le `footer` de `st-app-shell` le porte
+ * deja, et un second en ferait annoncer deux. Ce composant est le CONTENU du
+ * pied. Ses mentions, elles, forment un repere de navigation nomme — c'est ce
+ * qui permet a un lecteur d'ecran de sauter directement aux liens du pied, et
+ * de les distinguer de la navigation principale.
+ *
+ * ⚠️ L'aide se pose ICI, dans les mentions, et au meme endroit sur le gabarit
+ * pleine page : WCAG 3.2.6 exige qu'un mecanisme d'aide garde sa place d'une
+ * page a l'autre.
+ *
+ * ⚠️ La `version` est un texte affiche : jamais un secret de construction, ni
+ * une empreinte de commit qui dirait a un attaquant exactement quel code tourne.
+ * Le numero de version publie suffit au support.
+ *
+ * Le statut est un `st-status-pill` projete, reconnu a son ELEMENT : `statut`
+ * est le nom d'une de ses entrees, et un attribut nu du meme nom lui passerait
+ * une chaine vide. Icone et texte, jamais la couleur seule ; un autre element
+ * prend sa place par `ngProjectAs="st-status-pill"`.
+ */
+class StFooter {
+    libelles = inject(ST_LIBELLES);
+    /** Nom du repere des mentions. `null` : le texte vient du dictionnaire. */
+    etiquette = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    etiquetteLue = computed(() => this.etiquette() ?? this.libelles().liensDuPied, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StFooter, isStandalone: true, selector: "st-footer", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-footer" }, ngImport: i0, template: "<nav class=\"st-footer__mentions\" [attr.aria-label]=\"etiquetteLue()\">\n  <ng-content select=\"[mentions]\" />\n</nav>\n<div class=\"st-footer__version\">\n  <ng-content select=\"[version]\" />\n</div>\n<div class=\"st-footer__statut\">\n  <ng-content select=\"st-status-pill\" />\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) var(--st-espacement-6);align-items:center;font-size:var(--st-taille-sm)}.st-footer__mentions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-4);align-items:center}.st-footer__mentions:empty,.st-footer__version:empty,.st-footer__statut:empty{display:none}.st-footer__version{margin-inline-start:auto;font-variant-numeric:tabular-nums}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFooter, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-footer', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-footer' }, template: "<nav class=\"st-footer__mentions\" [attr.aria-label]=\"etiquetteLue()\">\n  <ng-content select=\"[mentions]\" />\n</nav>\n<div class=\"st-footer__version\">\n  <ng-content select=\"[version]\" />\n</div>\n<div class=\"st-footer__statut\">\n  <ng-content select=\"st-status-pill\" />\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) var(--st-espacement-6);align-items:center;font-size:var(--st-taille-sm)}.st-footer__mentions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-4);align-items:center}.st-footer__mentions:empty,.st-footer__version:empty,.st-footer__statut:empty{display:none}.st-footer__version{margin-inline-start:auto;font-variant-numeric:tabular-nums}\n"] }]
+        }], propDecorators: { etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }] } });
+
+/**
+ * Lien de navigation principale, pose en attribut sur un `<a>` natif :
+ * `routerLink`, etat actif, icone et pastille, en un seul geste.
+ *
+ * ```html
+ * <st-sidenav navigation>
+ *   <a stNavLink="/comptes"><st-icon nom="fichier" />Comptes</a>
+ *   <a [stNavLink]="['/messages']">
+ *     Messages<span class="st-vh">, 5 non lus</span>
+ *     <st-badge [valeur]="5" />
+ *   </a>
+ * </st-sidenav>
+ * ```
+ *
+ * **Ou il vit, et pourquoi.** Dans le tronc, a cote de `st-breadcrumb` et non
+ * dans `ui/interactions` avec `st-sidenav` : les points d'entree se decoupent
+ * par pair lourd, et ce lien n'en traine aucun — `@angular/router` est deja
+ * exige par le tronc. Une SPA qui rend sa navigation sans tiroir n'a pas a
+ * charger Aria pour un lien.
+ *
+ * ⚠️ **L'etat actif est porte par `aria-current="page"`**, pose par le routeur,
+ * et c'est sur lui que la feuille se branche — jamais sur la seule couleur : le
+ * lien courant se lit a sa graisse et au marqueur sur son bord de depart, qui
+ * survivent au contraste force. La classe `st-nav-link--actif` accompagne, pour
+ * qui veut y accrocher un style.
+ *
+ * ⚠️ La pastille est `aria-hidden` : le compte qu'elle affiche doit entrer
+ * dans le nom du lien, par un texte lisible par lecteur seulement (`.st-vh`),
+ * compose par l'appelant.
+ *
+ * Un composant et non une directive, parce qu'il RANGE ce qu'on lui projette :
+ * l'icone devant, la pastille derriere, le libelle entre les deux, sans que
+ * l'ordre d'ecriture compte.
+ */
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class -- tout est dans les directives d'hote ; le constructeur ne fait que les regler.
+class StNavLink {
+    constructor() {
+        // Le routeur pose `aria-current` et la classe d'actif : le composant ne
+        // recalcule rien, et ne peut pas diverger du routeur.
+        const actif = inject(RouterLinkActive);
+        actif.routerLinkActive = 'st-nav-link--actif';
+        actif.ariaCurrentWhenActive = 'page';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StNavLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StNavLink, isStandalone: true, selector: "a[stNavLink]", host: { classAttribute: "st-nav-link" }, hostDirectives: [{ directive: i1.RouterLink, inputs: ["routerLink", "stNavLink", "queryParams", "queryParams", "fragment", "fragment", "queryParamsHandling", "queryParamsHandling", "replaceUrl", "replaceUrl", "state", "state"] }, { directive: i1.RouterLinkActive, inputs: ["routerLinkActiveOptions", "optionsDActivation"] }], ngImport: i0, template: "<ng-content select=\"st-icon\" />\n<span class=\"st-nav-link__libelle\"><ng-content /></span>\n<ng-content select=\"st-badge\" />\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:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:flex;gap:var(--st-espacement-3);align-items:center;min-block-size:var(--st-cible-tactile-min);padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-3);color:var(--st-couleur-texte);text-decoration:none;border-inline-start:var(--st-epaisseur-forte) solid transparent;border-radius:var(--st-rayon-sm)}@media(hover:hover){:host:hover{background:var(--st-couleur-surface-survol)}}.st-nav-link__libelle{flex:1 1 auto;min-inline-size:0}:host([aria-current=page]){font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret);border-inline-start-color:var(--st-couleur-primaire)}@media(forced-colors:active){:host([aria-current=page]){border-inline-start-color:Highlight}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StNavLink, decorators: [{
+            type: Component,
+            args: [{ selector: 'a[stNavLink]', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: RouterLink,
+                            inputs: [
+                                'routerLink: stNavLink',
+                                'queryParams',
+                                'fragment',
+                                'queryParamsHandling',
+                                'replaceUrl',
+                                'state',
+                            ],
+                        },
+                        { directive: RouterLinkActive, inputs: ['routerLinkActiveOptions: optionsDActivation'] },
+                    ], host: { class: 'st-nav-link' }, template: "<ng-content select=\"st-icon\" />\n<span class=\"st-nav-link__libelle\"><ng-content /></span>\n<ng-content select=\"st-badge\" />\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:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:flex;gap:var(--st-espacement-3);align-items:center;min-block-size:var(--st-cible-tactile-min);padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-3);color:var(--st-couleur-texte);text-decoration:none;border-inline-start:var(--st-epaisseur-forte) solid transparent;border-radius:var(--st-rayon-sm)}@media(hover:hover){:host:hover{background:var(--st-couleur-surface-survol)}}.st-nav-link__libelle{flex:1 1 auto;min-inline-size:0}:host([aria-current=page]){font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire-discret);background:var(--st-couleur-primaire-discret);border-inline-start-color:var(--st-couleur-primaire)}@media(forced-colors:active){:host([aria-current=page]){border-inline-start-color:Highlight}}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * En-tete de page : fil d'Ariane, titre de niveau 1, actions, onglets.
+ * Premier enfant de la page d'un remote.
+ *
+ * ```html
+ * <st-page-header precision="Trente derniers jours">
+ *   <st-breadcrumb [maillons]="maillons" />
+ *   Mes operations
+ *   <button stButton variante="primaire" actions>Exporter</button>
+ *   <st-tabs etiquette="Vue" [onglets]="onglets" [(selection)]="vue" />
+ * </st-page-header>
+ * ```
+ *
+ * ⚠️ Le fil et les onglets se reconnaissent a leur ELEMENT (`st-breadcrumb`,
+ * `st-tabs`), pas a un attribut : `onglets` est deja le nom d'une entree de
+ * `st-tabs`, et un attribut nu du meme nom lui passerait une chaine vide. Un
+ * autre element prend leur place par `ngProjectAs="st-tabs"`.
+ *
+ * ⚠️ **Un seul `h1` par page, et c'est lui.** `StNavigation` de
+ * `@starterlib/core` y pose le focus apres chaque changement de route — son
+ * selecteur par defaut vise `h1, [role="heading"][aria-level="1"]` —, et le
+ * lecteur d'ecran lit alors la phrase qui dit ou l'on vient d'arriver. Une
+ * page qui titre ailleurs perd ce focus en silence (F14 du plan de la
+ * coquille) ; une page qui titre deux fois le rend ambigu.
+ *
+ * ⚠️ Le fil d'Ariane vient AVANT le titre dans l'ordre du document, comme dans
+ * la lecture : on sait d'ou l'on vient avant de lire ou l'on est. Les onglets
+ * viennent apres : ils decoupent le contenu de la page, pas son identite.
+ *
+ * Il ne rend rien lui-meme d'autre que `st-page-title` : le fil, les actions et
+ * les onglets sont ceux de la page, projetes.
+ */
+class StPageHeader {
+    /** 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: StPageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StPageHeader, isStandalone: true, selector: "st-page-header", 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-header" }, ngImport: i0, template: "<ng-content select=\"st-breadcrumb\" />\n\n<st-page-title [precision]=\"precision()\" [identifiant]=\"identifiant()\">\n  <ng-content />\n  <ng-content select=\"[actions]\" actions />\n</st-page-title>\n\n<div class=\"st-page-header__onglets\">\n  <ng-content select=\"st-tabs\" />\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:block;margin-block-end:var(--st-espacement-6)}.st-page-header__onglets:empty{display:none}\n"], dependencies: [{ kind: "component", type: StPageTitle, selector: "st-page-title", inputs: ["precision", "identifiant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPageHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StPageTitle], host: { class: 'st-page-header' }, template: "<ng-content select=\"st-breadcrumb\" />\n\n<st-page-title [precision]=\"precision()\" [identifiant]=\"identifiant()\">\n  <ng-content />\n  <ng-content select=\"[actions]\" actions />\n</st-page-title>\n\n<div class=\"st-page-header__onglets\">\n  <ng-content select=\"st-tabs\" />\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:block;margin-block-end:var(--st-espacement-6)}.st-page-header__onglets:empty{display:none}\n"] }]
+        }], propDecorators: { precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], identifiant: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifiant", required: false }] }] } });
+
+/**
+ * Barre fine de progression d'une navigation, sous l'en-tete.
+ *
+ * ```html
+ * <st-header entete>…</st-header>
+ * <st-route-progress entete [actif]="navigation.enCours()" />
+ * ```
+ *
+ * ⚠️ **Rien avant `delaiMs`** (200 ms par defaut). Une navigation qui aboutit
+ * en 80 ms n'a pas a clignoter : la barre apparaitrait et disparaitrait avant
+ * d'etre lue, et l'oeil retiendrait un scintillement a chaque clic. Passe le
+ * delai, elle reste jusqu'a la fin, meme si celle-ci survient juste apres.
+ *
+ * ⚠️ **Aucun `aria-busy` sur `main`**, et ce n'est pas un oubli : `aria-busy`
+ * fait TAIRE les mises a jour de la region qu'il marque, y compris les annonces
+ * de la page qui arrive. La barre est un `progressbar` indetermine et nomme :
+ * c'est ce qu'un lecteur d'ecran trouve s'il la cherche, sans etre interrompu.
+ *
+ * Elle n'occupe aucune hauteur : posee en absolu sous son hote, elle ne fait
+ * pas sauter la page en apparaissant.
+ */
+class StRouteProgress {
+    libelles = inject(ST_LIBELLES);
+    /** Vrai entre le debut et la fin d'une navigation. */
+    actif = input(false, { ...(ngDevMode ? { debugName: "actif" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Delai avant d'afficher quoi que ce soit. Zero : tout de suite. */
+    delaiMs = input(200, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "delaiMs" }] : /* istanbul ignore next */ []));
+    /** `null` : « Chargement », du dictionnaire. */
+    etiquette = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    etiquetteLue = computed(() => this.etiquette() ?? this.libelles().chargement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
+    visibleInterne = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleInterne" }] : /* istanbul ignore next */ []));
+    visible = this.visibleInterne.asReadonly();
+    constructor() {
+        effect((auNettoyage) => {
+            if (!this.actif()) {
+                this.visibleInterne.set(false);
+                return;
+            }
+            const delai = this.delaiMs();
+            if (delai <= 0) {
+                this.visibleInterne.set(true);
+                return;
+            }
+            const minuterie = setTimeout(() => {
+                this.visibleInterne.set(true);
+            }, delai);
+            // Une navigation finie avant le delai n'affiche rien : la minuterie part
+            // avec elle.
+            auNettoyage(() => {
+                clearTimeout(minuterie);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StRouteProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StRouteProgress, isStandalone: true, selector: "st-route-progress", inputs: { actif: { classPropertyName: "actif", publicName: "actif", isSignal: true, isRequired: false, transformFunction: null }, delaiMs: { classPropertyName: "delaiMs", publicName: "delaiMs", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-route-progress" }, ngImport: i0, template: "@if (visible()) {\n  <st-progress class=\"st-route-progress__barre\" epaisseur=\"fine\" [etiquette]=\"etiquetteLue()\" />\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:block;block-size:0}.st-route-progress__barre{position:absolute;inset-block-start:0;inset-inline:0;z-index:var(--st-plan-entete)}@media print{:host{display:none}}\n"], dependencies: [{ kind: "component", type: StProgress, selector: "st-progress", inputs: ["valeur", "max", "etiquette", "ton", "epaisseur", "texteDeValeur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StRouteProgress, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-route-progress', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StProgress], host: { class: 'st-route-progress' }, template: "@if (visible()) {\n  <st-progress class=\"st-route-progress__barre\" epaisseur=\"fine\" [etiquette]=\"etiquetteLue()\" />\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:block;block-size:0}.st-route-progress__barre{position:absolute;inset-block-start:0;inset-inline:0;z-index:var(--st-plan-entete)}@media print{:host{display:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { actif: [{ type: i0.Input, args: [{ isSignal: true, alias: "actif", required: false }] }], delaiMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "delaiMs", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }] } });
+
+/**
+ * Gabarit pleine page : connexion, mot de passe oublie, mode embarque.
+ *
+ * ```html
+ * <st-auth-shell>
+ *   <st-logo entete nom="Banque Exemple" clair="/ui/socle/assets/logo.svg" />
+ *   <st-lang-switch entete … />
+ *   <st-theme-toggle entete … />
+ *   <st-banner banniere ton="neutre" [message]="motifDeRedirection()" />
+ *   <router-outlet />
+ *   <a pied stLink routerLink="/mentions">Mentions legales</a>
+ *   <a pied stLink routerLink="/aide">Aide</a>
+ * </st-auth-shell>
+ * ```
+ *
+ * Ce que `st-app-shell` a, et qu'il n'a PAS, volontairement : ni navigation
+ * laterale (rien a naviguer avant d'etre connecte), ni avertissement
+ * d'inactivite (pas de session a fermer), ni messages ephemeres (rien ne se
+ * passe en arriere-plan). Ce qu'il garde : le lien d'evitement — une page de
+ * connexion se traverse aussi au clavier —, un `main` etroit centre a la
+ * mesure de lecture, et les trois reperes, une fois chacun.
+ *
+ * ⚠️ **L'aide au meme endroit que dans l'application** (WCAG 3.2.6) : dans le
+ * pied, comme dans `st-footer`. Une personne qui a trouve l'aide en bas de page
+ * une fois doit la retrouver la, connectee ou non.
+ *
+ * L'emplacement `banniere`, en tete du `main`, recoit le MOTIF d'arrivee :
+ * session expiree, fermee ailleurs, mot de passe reinitialise. Un `st-banner`
+ * neutre y suffit ; jamais un message ephemere, qui serait manque.
+ */
+class StAuthShell {
+    identifiantDuContenu = IDENTIFIANT_DU_CONTENU_PRINCIPAL;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StAuthShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StAuthShell, isStandalone: true, selector: "st-auth-shell", host: { classAttribute: "st-auth-shell" }, ngImport: i0, template: "<st-skip-link [cible]=\"identifiantDuContenu\" />\n\n<header class=\"st-auth-shell__entete\">\n  <ng-content select=\"[entete]\" />\n</header>\n\n<main class=\"st-auth-shell__contenu\" [id]=\"identifiantDuContenu\">\n  <div class=\"st-auth-shell__banniere\">\n    <ng-content select=\"[banniere]\" />\n  </div>\n  <ng-content />\n</main>\n\n<footer class=\"st-auth-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;padding-block:env(safe-area-inset-top,0) env(safe-area-inset-bottom,0);padding-inline:env(safe-area-inset-left,0) env(safe-area-inset-right,0);color:var(--st-couleur-texte);background:var(--st-couleur-fond)}.st-auth-shell__entete{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3);align-items:center;justify-content:space-between;padding:var(--st-espacement-3) var(--st-espacement-4)}.st-auth-shell__entete:empty,.st-auth-shell__banniere:empty,.st-auth-shell__pied:empty{display:none}.st-auth-shell__contenu{flex:1 1 auto;inline-size:min(100%,var(--st-mesure-etroite));margin-inline:auto;padding:var(--st-espacement-6) var(--st-espacement-4)}.st-auth-shell__contenu:focus{outline:none}.st-auth-shell__pied{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-4);align-items:center;justify-content:center;padding:var(--st-espacement-4);font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}@media print{.st-auth-shell__entete,.st-auth-shell__pied{display:none}}\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: StAuthShell, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-auth-shell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StSkipLink], host: { class: 'st-auth-shell' }, template: "<st-skip-link [cible]=\"identifiantDuContenu\" />\n\n<header class=\"st-auth-shell__entete\">\n  <ng-content select=\"[entete]\" />\n</header>\n\n<main class=\"st-auth-shell__contenu\" [id]=\"identifiantDuContenu\">\n  <div class=\"st-auth-shell__banniere\">\n    <ng-content select=\"[banniere]\" />\n  </div>\n  <ng-content />\n</main>\n\n<footer class=\"st-auth-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;padding-block:env(safe-area-inset-top,0) env(safe-area-inset-bottom,0);padding-inline:env(safe-area-inset-left,0) env(safe-area-inset-right,0);color:var(--st-couleur-texte);background:var(--st-couleur-fond)}.st-auth-shell__entete{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3);align-items:center;justify-content:space-between;padding:var(--st-espacement-3) var(--st-espacement-4)}.st-auth-shell__entete:empty,.st-auth-shell__banniere:empty,.st-auth-shell__pied:empty{display:none}.st-auth-shell__contenu{flex:1 1 auto;inline-size:min(100%,var(--st-mesure-etroite));margin-inline:auto;padding:var(--st-espacement-6) var(--st-espacement-4)}.st-auth-shell__contenu:focus{outline:none}.st-auth-shell__pied{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-4);align-items:center;justify-content:center;padding:var(--st-espacement-4);font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}@media print{.st-auth-shell__entete,.st-auth-shell__pied{display:none}}\n"] }]
+        }] });
+
+/**
+ * Parcours par etapes : ou l'on en est, ce qui est fait, ce qui reste.
+ *
+ * ```html
+ * <st-stepper [etapes]="etapes" [etape]="indice()" />
+ * ```
+ *
+ * ⚠️ Une liste ORDONNEE : l'ordre des etapes est l'information, et le lecteur
+ * d'ecran annonce « 2 sur 4 » de lui-meme. L'etape courante porte
+ * `aria-current="step"`, ce qui est exactement le mot de la specification.
+ *
+ * ⚠️ **L'etat de chaque etape se lit par sa forme ET par un texte**, jamais par
+ * la couleur seule : une coche pour ce qui est fait, un numero plein pour
+ * l'etape en cours, un numero cercle pour ce qui vient ; et un mot lisible par
+ * lecteur seulement — « terminee », « en cours », « a venir » — apres chaque
+ * libelle. Sous contraste force, il ne reste que la forme et le mot.
+ *
+ * Il n'est PAS interactif : revenir a une etape est une decision du parcours,
+ * qui la rend par un vrai lien ou un vrai bouton dans la page. Un indicateur
+ * cliquable promettrait un retour que tous les parcours n'autorisent pas.
+ */
+class StStepper {
+    libelles = inject(ST_LIBELLES);
+    etapes = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etapes" }] : /* istanbul ignore next */ []));
+    /** Indice de l'etape en cours, a partir de zero. */
+    etape = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etape" }] : /* istanbul ignore next */ []));
+    /** Nom de la liste. `null` : « Etapes », du dictionnaire. */
+    etiquette = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    etiquetteLue = computed(() => this.etiquette() ?? this.libelles().etapes, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
+    lignes = computed(() => {
+        const courante = this.etape();
+        const libelles = this.libelles();
+        return this.etapes().map((etape, indice) => {
+            const etat = indice < courante ? 'faite' : indice === courante ? 'courante' : 'a-venir';
+            const texteDEtat = etat === 'faite'
+                ? libelles.etapeTerminee
+                : etat === 'courante'
+                    ? libelles.etapeEnCours
+                    : libelles.etapeAVenir;
+            return { libelle: etape.libelle, numero: indice + 1, etat, texteDEtat };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StStepper, isStandalone: true, selector: "st-stepper", inputs: { etapes: { classPropertyName: "etapes", publicName: "etapes", isSignal: true, isRequired: true, transformFunction: null }, etape: { classPropertyName: "etape", publicName: "etape", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-stepper" }, ngImport: i0, template: "<ol class=\"st-stepper__liste\" [attr.aria-label]=\"etiquetteLue()\">\n  @for (ligne of lignes(); track $index) {\n    <li\n      class=\"st-stepper__etape\"\n      [attr.data-etat]=\"ligne.etat\"\n      [attr.aria-current]=\"ligne.etat === 'courante' ? 'step' : null\"\n    >\n      <span class=\"st-stepper__repere\" aria-hidden=\"true\">\n        @if (ligne.etat === 'faite') {\n          <st-icon nom=\"coche\" taille=\"sm\" />\n        } @else {\n          {{ ligne.numero }}\n        }\n      </span>\n      <span class=\"st-stepper__libelle\">{{ ligne.libelle }}</span>\n      <span class=\"st-vh\">, {{ ligne.texteDEtat }}</span>\n    </li>\n  }\n</ol>\n", styles: [":host([hidden]){display:none!important}:host{display:block}.st-stepper__liste{display:flex;flex-direction:column;gap:var(--st-espacement-3);padding:0;margin:0;list-style:none}.st-stepper__etape{display:flex;gap:var(--st-espacement-3);align-items:center;min-block-size:var(--st-cible-min);color:var(--st-couleur-texte-discret)}.st-stepper__repere{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:2rem;block-size:2rem;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);font-variant-numeric:tabular-nums;border:var(--st-epaisseur-moyenne) solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}.st-stepper__etape[data-etat=faite]{color:var(--st-couleur-texte)}.st-stepper__etape[data-etat=faite] .st-stepper__repere{color:var(--st-couleur-sur-succes);background:var(--st-couleur-succes);border-color:var(--st-couleur-succes)}.st-stepper__etape[data-etat=courante]{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte)}.st-stepper__etape[data-etat=courante] .st-stepper__repere{color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(min-width:48rem){.st-stepper__liste{flex-direction:row;flex-wrap:wrap;gap:var(--st-espacement-6)}}@media(forced-colors:active){.st-stepper__etape[data-etat=courante] .st-stepper__repere,.st-stepper__etape[data-etat=faite] .st-stepper__repere{forced-color-adjust:none;color:HighlightText;background:Highlight;border-color:Highlight}}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "sprite", "nomMetier", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StStepper, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon], host: { class: 'st-stepper' }, template: "<ol class=\"st-stepper__liste\" [attr.aria-label]=\"etiquetteLue()\">\n  @for (ligne of lignes(); track $index) {\n    <li\n      class=\"st-stepper__etape\"\n      [attr.data-etat]=\"ligne.etat\"\n      [attr.aria-current]=\"ligne.etat === 'courante' ? 'step' : null\"\n    >\n      <span class=\"st-stepper__repere\" aria-hidden=\"true\">\n        @if (ligne.etat === 'faite') {\n          <st-icon nom=\"coche\" taille=\"sm\" />\n        } @else {\n          {{ ligne.numero }}\n        }\n      </span>\n      <span class=\"st-stepper__libelle\">{{ ligne.libelle }}</span>\n      <span class=\"st-vh\">, {{ ligne.texteDEtat }}</span>\n    </li>\n  }\n</ol>\n", styles: [":host([hidden]){display:none!important}:host{display:block}.st-stepper__liste{display:flex;flex-direction:column;gap:var(--st-espacement-3);padding:0;margin:0;list-style:none}.st-stepper__etape{display:flex;gap:var(--st-espacement-3);align-items:center;min-block-size:var(--st-cible-min);color:var(--st-couleur-texte-discret)}.st-stepper__repere{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:2rem;block-size:2rem;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);font-variant-numeric:tabular-nums;border:var(--st-epaisseur-moyenne) solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}.st-stepper__etape[data-etat=faite]{color:var(--st-couleur-texte)}.st-stepper__etape[data-etat=faite] .st-stepper__repere{color:var(--st-couleur-sur-succes);background:var(--st-couleur-succes);border-color:var(--st-couleur-succes)}.st-stepper__etape[data-etat=courante]{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte)}.st-stepper__etape[data-etat=courante] .st-stepper__repere{color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(min-width:48rem){.st-stepper__liste{flex-direction:row;flex-wrap:wrap;gap:var(--st-espacement-6)}}@media(forced-colors:active){.st-stepper__etape[data-etat=courante] .st-stepper__repere,.st-stepper__etape[data-etat=faite] .st-stepper__repere{forced-color-adjust:none;color:HighlightText;background:Highlight;border-color:Highlight}}\n"] }]
+        }], propDecorators: { etapes: [{ type: i0.Input, args: [{ isSignal: true, alias: "etapes", required: true }] }], etape: [{ type: i0.Input, args: [{ isSignal: true, alias: "etape", required: true }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }] } });
+
+let compteur$9 = 0;
+/**
+ * Ligne de reglage : un libelle, une description, et le controle qui les suit.
+ *
+ * ```html
+ * <st-settings-row libelle="Alertes par SMS" description="Un SMS a chaque virement sortant.">
+ *   <st-switch libelle="Activer" [(checked)]="sms" />
+ * </st-settings-row>
+ * ```
+ *
+ * ⚠️ **La ligne est un GROUPE nomme et decrit, et non une etiquette.** Le
+ * controle projete garde son propre nom — celui de son `libelle`, ou un
+ * `aria-label` pour un element natif — et la ligne l'enveloppe d'un
+ * `role="group"` relie a son libelle par `aria-labelledby` et a sa description
+ * par `aria-describedby`. En entrant dans le groupe, le lecteur d'ecran lit le
+ * libelle, puis la description, puis le controle : « Alertes par SMS, groupe,
+ * Un SMS a chaque virement sortant, Activer, interrupteur, desactive ».
+ *
+ * Pourquoi pas un `label for` : la plupart des controles du socle portent deja
+ * leur etiquette, et un controle non natif (un groupe segmente, un declencheur
+ * de menu) n'en accepte aucun. Le groupe, lui, marche pour tous, sans que la
+ * ligne ait a connaitre ce qu'on lui projette.
+ *
+ * ⚠️ Un reglage s'applique IMMEDIATEMENT (c'est le sens de `st-switch`) ou
+ * s'envoie avec un formulaire : la ligne ne tranche pas, le controle le dit.
+ */
+class StSettingsRow {
+    /** Texte visible, deja traduit : le socle ne traduit rien. */
+    libelle = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []));
+    /** Ce que le reglage fait, en une phrase. Reliee au groupe par `aria-describedby`. */
+    description = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Identifiants du libelle et de la description, cibles des attributs ARIA. */
+    identifiants = (() => {
+        const base = `st-reglage-${(compteur$9 += 1).toString()}`;
+        return { libelle: `${base}-libelle`, description: `${base}-description` };
+    })();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSettingsRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSettingsRow, isStandalone: true, selector: "st-settings-row", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "identifiants.libelle", "attr.aria-describedby": "description() === null ? null : identifiants.description" }, classAttribute: "st-settings-row" }, ngImport: i0, template: "<div class=\"st-settings-row__texte\">\n  <span class=\"st-settings-row__libelle\" [id]=\"identifiants.libelle\">{{ libelle() }}</span>\n  @if (description(); as texte) {\n    <p class=\"st-settings-row__description\" [id]=\"identifiants.description\">{{ texte }}</p>\n  }\n</div>\n<div class=\"st-settings-row__controle\">\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) var(--st-espacement-6);align-items:center;justify-content:space-between;padding-block:var(--st-espacement-4);border-block-end:var(--st-epaisseur-fine) solid var(--st-couleur-bordure)}.st-settings-row__texte{flex:1 1 18rem;min-inline-size:0}.st-settings-row__libelle{display:block;font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-texte)}.st-settings-row__description{max-inline-size:var(--st-mesure-normale);margin:var(--st-espacement-1) 0 0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}.st-settings-row__controle{flex:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSettingsRow, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-settings-row', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'st-settings-row',
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'identifiants.libelle',
+                        '[attr.aria-describedby]': 'description() === null ? null : identifiants.description',
+                    }, template: "<div class=\"st-settings-row__texte\">\n  <span class=\"st-settings-row__libelle\" [id]=\"identifiants.libelle\">{{ libelle() }}</span>\n  @if (description(); as texte) {\n    <p class=\"st-settings-row__description\" [id]=\"identifiants.description\">{{ texte }}</p>\n  }\n</div>\n<div class=\"st-settings-row__controle\">\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) var(--st-espacement-6);align-items:center;justify-content:space-between;padding-block:var(--st-espacement-4);border-block-end:var(--st-epaisseur-fine) solid var(--st-couleur-bordure)}.st-settings-row__texte{flex:1 1 18rem;min-inline-size:0}.st-settings-row__libelle{display:block;font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-texte)}.st-settings-row__description{max-inline-size:var(--st-mesure-normale);margin:var(--st-espacement-1) 0 0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}.st-settings-row__controle{flex:none}\n"] }]
+        }], propDecorators: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+
 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
@@ -2219,7 +2827,7 @@ class StBanner {
             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 });
+    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", "sprite", "nomMetier", "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,
@@ -2263,7 +2871,7 @@ class StInlineMessage {
     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 });
+    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", "sprite", "nomMetier", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StInlineMessage, decorators: [{
             type: Component,
@@ -3169,7 +3777,7 @@ class StErrorSummary {
         this.element.nativeElement.querySelector('.st-error-summary__cadre')?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StErrorSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StErrorSummary, isStandalone: true, selector: "st-error-summary", inputs: { erreurs: { classPropertyName: "erreurs", publicName: "erreurs", isSignal: true, isRequired: true, transformFunction: null }, titre: { classPropertyName: "titre", publicName: "titre", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.hidden": "lignes().length === 0 ? \"\" : null" }, classAttribute: "st-error-summary" }, ngImport: i0, template: "@if (lignes().length > 0) {\n  <div\n    class=\"st-error-summary__cadre\"\n    role=\"region\"\n    tabindex=\"-1\"\n    [attr.aria-labelledby]=\"identifiantDuTitre\"\n  >\n    <h2 class=\"st-error-summary__titre\" [id]=\"identifiantDuTitre\">\n      <st-icon nom=\"cercle-croix\" taille=\"sm\" />\n      {{ titreLu() }}\n    </h2>\n    <ul class=\"st-error-summary__liste\">\n      @for (ligne of lignes(); track $index) {\n        <li>\n          @if (ligne.libelle !== null) {\n            <button type=\"button\" class=\"st-error-summary__lien\" (click)=\"ligne.aller()\">\n              {{ ligne.libelle }} : {{ ligne.message }}\n            </button>\n          } @else {\n            {{ ligne.message }}\n          }\n        </li>\n      }\n    </ul>\n  </div>\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-5)}.st-error-summary__cadre:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-error-summary__cadre{padding:var(--st-espacement-4);color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret);border:2px solid var(--st-couleur-danger);border-radius:var(--st-rayon-md)}.st-error-summary__titre{display:flex;gap:var(--st-espacement-2);align-items:center;margin:0 0 var(--st-espacement-2);font-size:var(--st-taille-lg)}.st-error-summary__liste{padding-inline-start:var(--st-espacement-5);margin:0}.st-error-summary__lien:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-error-summary__lien{padding:0;font:inherit;color:inherit;text-align:start;text-decoration:underline;cursor:pointer;background:none;border:0}@media(forced-colors:active){.st-error-summary__cadre{border-color:CanvasText}}\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: StErrorSummary, isStandalone: true, selector: "st-error-summary", inputs: { erreurs: { classPropertyName: "erreurs", publicName: "erreurs", isSignal: true, isRequired: true, transformFunction: null }, titre: { classPropertyName: "titre", publicName: "titre", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.hidden": "lignes().length === 0 ? \"\" : null" }, classAttribute: "st-error-summary" }, ngImport: i0, template: "@if (lignes().length > 0) {\n  <div\n    class=\"st-error-summary__cadre\"\n    role=\"region\"\n    tabindex=\"-1\"\n    [attr.aria-labelledby]=\"identifiantDuTitre\"\n  >\n    <h2 class=\"st-error-summary__titre\" [id]=\"identifiantDuTitre\">\n      <st-icon nom=\"cercle-croix\" taille=\"sm\" />\n      {{ titreLu() }}\n    </h2>\n    <ul class=\"st-error-summary__liste\">\n      @for (ligne of lignes(); track $index) {\n        <li>\n          @if (ligne.libelle !== null) {\n            <button type=\"button\" class=\"st-error-summary__lien\" (click)=\"ligne.aller()\">\n              {{ ligne.libelle }} : {{ ligne.message }}\n            </button>\n          } @else {\n            {{ ligne.message }}\n          }\n        </li>\n      }\n    </ul>\n  </div>\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-5)}.st-error-summary__cadre:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-error-summary__cadre{padding:var(--st-espacement-4);color:var(--st-couleur-sur-danger-discret);background:var(--st-couleur-danger-discret);border:2px solid var(--st-couleur-danger);border-radius:var(--st-rayon-md)}.st-error-summary__titre{display:flex;gap:var(--st-espacement-2);align-items:center;margin:0 0 var(--st-espacement-2);font-size:var(--st-taille-lg)}.st-error-summary__liste{padding-inline-start:var(--st-espacement-5);margin:0}.st-error-summary__lien:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-error-summary__lien{padding:0;font:inherit;color:inherit;text-align:start;text-decoration:underline;cursor:pointer;background:none;border:0}@media(forced-colors:active){.st-error-summary__cadre{border-color:CanvasText}}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "sprite", "nomMetier", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StErrorSummary, decorators: [{
             type: Component,
@@ -3339,7 +3947,7 @@ class StSearchField extends ControleDeSaisie {
         this.recherche.emit(this.value().trim());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSearchField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StSearchField, isStandalone: true, selector: "st-search-field", outputs: { recherche: "recherche" }, host: { attributes: { "role": "search" }, classAttribute: "st-search-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  libelleMasque\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n>\n  <div class=\"st-search-field__ligne\">\n    <st-icon class=\"st-search-field__loupe\" nom=\"recherche\" taille=\"sm\" />\n    <input\n      #champ\n      class=\"st-search-field__champ\"\n      stControleDeChamp\n      type=\"search\"\n      enterkeyhint=\"search\"\n      [value]=\"value()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      (input)=\"surSaisie($event)\"\n      (keydown.enter)=\"lancer($event)\"\n      (blur)=\"touch.emit()\"\n    />\n    <button stButton type=\"button\" [disabled]=\"disabled()\" (click)=\"lancer()\">\n      {{ libelles().rechercher }}\n    </button>\n  </div>\n</st-form-field>\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}.st-search-field__ligne{position:relative;display:flex;gap:var(--st-espacement-2);align-items:center}.st-search-field__loupe{position:absolute;inset-inline-start:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none}.st-search-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-search-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-search-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-search-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-search-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-search-field__champ{flex:1 1 auto;padding-inline-start:calc(var(--st-espacement-3) * 2 + 1rem)}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StSearchField, isStandalone: true, selector: "st-search-field", outputs: { recherche: "recherche" }, host: { attributes: { "role": "search" }, classAttribute: "st-search-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  libelleMasque\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n>\n  <div class=\"st-search-field__ligne\">\n    <st-icon class=\"st-search-field__loupe\" nom=\"recherche\" taille=\"sm\" />\n    <input\n      #champ\n      class=\"st-search-field__champ\"\n      stControleDeChamp\n      type=\"search\"\n      enterkeyhint=\"search\"\n      [value]=\"value()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled()\"\n      (input)=\"surSaisie($event)\"\n      (keydown.enter)=\"lancer($event)\"\n      (blur)=\"touch.emit()\"\n    />\n    <button stButton type=\"button\" [disabled]=\"disabled()\" (click)=\"lancer()\">\n      {{ libelles().rechercher }}\n    </button>\n  </div>\n</st-form-field>\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}.st-search-field__ligne{position:relative;display:flex;gap:var(--st-espacement-2);align-items:center}.st-search-field__loupe{position:absolute;inset-inline-start:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none}.st-search-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-search-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-search-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-search-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-search-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-search-field__champ{flex:1 1 auto;padding-inline-start:calc(var(--st-espacement-3) * 2 + 1rem)}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "sprite", "nomMetier", "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: StSearchField, decorators: [{
             type: Component,
@@ -3525,7 +4133,7 @@ class StSelect extends ControleDeSaisie {
         this.value.set(element.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSelect, isStandalone: true, selector: "st-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, texteVide: { classPropertyName: "texteVide", publicName: "texteVide", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-select" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div class=\"st-select__cadre\">\n    <select\n      #champ\n      class=\"st-select__champ\"\n      stControleDeChamp\n      [attr.name]=\"name() || null\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n      [disabled]=\"disabled()\"\n      (change)=\"surChoix($event)\"\n      (blur)=\"touch.emit()\"\n    >\n      <option value=\"\" [selected]=\"value() === ''\">{{ texteVide() ?? libelles().choisir }}</option>\n      @for (bloc of blocs(); track $index) {\n        @if (bloc.groupe === null) {\n          @for (option of bloc.options; track option.valeur) {\n            <option\n              [value]=\"option.valeur\"\n              [selected]=\"option.valeur === value()\"\n              [disabled]=\"option.desactivee === true\"\n            >\n              {{ option.libelle }}\n            </option>\n          }\n        } @else {\n          <optgroup [label]=\"bloc.groupe\">\n            @for (option of bloc.options; track option.valeur) {\n              <option\n                [value]=\"option.valeur\"\n                [selected]=\"option.valeur === value()\"\n                [disabled]=\"option.desactivee === true\"\n              >\n                {{ option.libelle }}\n              </option>\n            }\n          </optgroup>\n        }\n      }\n    </select>\n    <st-icon class=\"st-select__chevron\" nom=\"chevron-bas\" taille=\"sm\" />\n  </div>\n</st-form-field>\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}.st-select__cadre{position:relative}.st-select__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-select__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-select__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-select__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-select__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-select__champ{padding-inline-end:calc(var(--st-espacement-3) * 2 + 1rem);cursor:pointer;appearance:none}.st-select__chevron{position:absolute;inset-block-start:50%;inset-inline-end:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none;transform:translateY(-50%)}@media(forced-colors:active){.st-select__chevron{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { 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: StSelect, isStandalone: true, selector: "st-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, texteVide: { classPropertyName: "texteVide", publicName: "texteVide", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-select" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aide()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div class=\"st-select__cadre\">\n    <select\n      #champ\n      class=\"st-select__champ\"\n      stControleDeChamp\n      [attr.name]=\"name() || null\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n      [disabled]=\"disabled()\"\n      (change)=\"surChoix($event)\"\n      (blur)=\"touch.emit()\"\n    >\n      <option value=\"\" [selected]=\"value() === ''\">{{ texteVide() ?? libelles().choisir }}</option>\n      @for (bloc of blocs(); track $index) {\n        @if (bloc.groupe === null) {\n          @for (option of bloc.options; track option.valeur) {\n            <option\n              [value]=\"option.valeur\"\n              [selected]=\"option.valeur === value()\"\n              [disabled]=\"option.desactivee === true\"\n            >\n              {{ option.libelle }}\n            </option>\n          }\n        } @else {\n          <optgroup [label]=\"bloc.groupe\">\n            @for (option of bloc.options; track option.valeur) {\n              <option\n                [value]=\"option.valeur\"\n                [selected]=\"option.valeur === value()\"\n                [disabled]=\"option.desactivee === true\"\n              >\n                {{ option.libelle }}\n              </option>\n            }\n          </optgroup>\n        }\n      }\n    </select>\n    <st-icon class=\"st-select__chevron\" nom=\"chevron-bas\" taille=\"sm\" />\n  </div>\n</st-form-field>\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}.st-select__cadre{position:relative}.st-select__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-select__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-select__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-select__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-select__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-select__champ{padding-inline-end:calc(var(--st-espacement-3) * 2 + 1rem);cursor:pointer;appearance:none}.st-select__chevron{position:absolute;inset-block-start:50%;inset-inline-end:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none;transform:translateY(-50%)}@media(forced-colors:active){.st-select__chevron{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "sprite", "nomMetier", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSelect, decorators: [{
             type: Component,
@@ -3700,14 +4308,14 @@ class StCalendar {
         }, { injector: this.injecteur });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StCalendar, isStandalone: true, selector: "st-calendar", inputs: { selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dateMin: { classPropertyName: "dateMin", publicName: "dateMin", isSignal: true, isRequired: false, transformFunction: null }, dateMax: { classPropertyName: "dateMax", publicName: "dateMax", isSignal: true, isRequired: false, transformFunction: null }, plage: { classPropertyName: "plage", publicName: "plage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { choix: "choix", fermeture: "fermeture" }, host: { listeners: { "keydown": "surTouche($event)" }, classAttribute: "st-calendar" }, ngImport: i0, template: "<div class=\"st-calendar__entete\">\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"chevron-gauche\"\n    [etiquette]=\"libelles().moisPrecedent\"\n    [disabled]=\"!moisPrecedentPossible()\"\n    (click)=\"changerDeMois(-1)\"\n  ></button>\n  <!-- Region vivante : changer de mois a la souris ne deplace pas le focus, et le\n       nouveau mois doit se dire. -->\n  <p class=\"st-calendar__titre\" aria-live=\"polite\" [id]=\"identifiants.titre\">{{ titre() }}</p>\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"chevron-droite\"\n    [etiquette]=\"libelles().moisSuivant\"\n    [disabled]=\"!moisSuivantPossible()\"\n    (click)=\"changerDeMois(1)\"\n  ></button>\n</div>\n\n<table\n  class=\"st-calendar__grille\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"identifiants.titre\"\n  [attr.aria-describedby]=\"identifiants.aide\"\n>\n  <thead>\n    <tr>\n      @for (jour of joursDeLaSemaine(); track $index) {\n        <th class=\"st-calendar__jour-de-semaine\" scope=\"col\" [attr.abbr]=\"jour.long\">\n          {{ jour.court }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (semaine of semaines(); track semaine[0]?.date) {\n      <tr>\n        @for (jour of semaine; track jour.date) {\n          @if (jour.horsDuMois) {\n            <td class=\"st-calendar__vide\"></td>\n          } @else {\n            <td [attr.aria-selected]=\"jour.choisi ? 'true' : null\">\n              <button\n                class=\"st-calendar__jour\"\n                type=\"button\"\n                [attr.data-date]=\"jour.date\"\n                [attr.data-plage]=\"jour.dansLaPlage ? '' : null\"\n                [attr.tabindex]=\"estActive(jour.date) ? 0 : -1\"\n                [attr.aria-label]=\"jour.nom\"\n                [attr.aria-current]=\"jour.aujourdHui ? 'date' : null\"\n                [attr.aria-disabled]=\"jour.horsBornes ? 'true' : null\"\n                (click)=\"choisir(jour)\"\n              >\n                {{ jour.numero }}\n              </button>\n            </td>\n          }\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n\n<p class=\"st-calendar__aide\" [id]=\"identifiants.aide\">{{ libelles().aideDuCalendrier }}</p>\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;padding:var(--st-espacement-3);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-calendar__entete{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;margin-block-end:var(--st-espacement-2)}.st-calendar__titre{margin:0;font-weight:var(--st-graisse-semi);text-transform:capitalize}.st-calendar__grille{border-collapse:collapse}.st-calendar__jour-de-semaine{padding-block-end:var(--st-espacement-1);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);text-align:center}.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-calendar__jour{inline-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));block-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-sm)}.st-calendar__jour:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-current=date]{font-weight:var(--st-graisse-semi);border-color:var(--st-couleur-bordure-forte)}.st-calendar__jour[data-plage]{background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-disabled=true]{color:var(--st-couleur-texte-discret);text-decoration:line-through;cursor:not-allowed}[aria-selected=true]>.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}[aria-selected=true]>.st-calendar__jour{font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire)}.st-calendar__aide{max-inline-size:20rem;margin:var(--st-espacement-2) 0 0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}@media(forced-colors:active){[aria-selected=true]>.st-calendar__jour{forced-color-adjust:none;color:HighlightText;background:Highlight}}\n"], dependencies: [{ kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StCalendar, isStandalone: true, selector: "st-calendar", inputs: { selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dateMin: { classPropertyName: "dateMin", publicName: "dateMin", isSignal: true, isRequired: false, transformFunction: null }, dateMax: { classPropertyName: "dateMax", publicName: "dateMax", isSignal: true, isRequired: false, transformFunction: null }, plage: { classPropertyName: "plage", publicName: "plage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { choix: "choix", fermeture: "fermeture" }, host: { listeners: { "keydown": "surTouche($event)" }, classAttribute: "st-calendar" }, ngImport: i0, template: "<div class=\"st-calendar__entete\">\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"chevron-gauche\"\n    [etiquette]=\"libelles().moisPrecedent\"\n    [disabled]=\"!moisPrecedentPossible()\"\n    (click)=\"changerDeMois(-1)\"\n  ></button>\n  <!-- Region vivante : changer de mois a la souris ne deplace pas le focus, et le\n       nouveau mois doit se dire. -->\n  <p class=\"st-calendar__titre\" aria-live=\"polite\" [id]=\"identifiants.titre\">{{ titre() }}</p>\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"chevron-droite\"\n    [etiquette]=\"libelles().moisSuivant\"\n    [disabled]=\"!moisSuivantPossible()\"\n    (click)=\"changerDeMois(1)\"\n  ></button>\n</div>\n\n<table\n  class=\"st-calendar__grille\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"identifiants.titre\"\n  [attr.aria-describedby]=\"identifiants.aide\"\n>\n  <thead>\n    <tr>\n      @for (jour of joursDeLaSemaine(); track $index) {\n        <th class=\"st-calendar__jour-de-semaine\" scope=\"col\" [attr.abbr]=\"jour.long\">\n          {{ jour.court }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (semaine of semaines(); track semaine[0]?.date) {\n      <tr>\n        @for (jour of semaine; track jour.date) {\n          @if (jour.horsDuMois) {\n            <td class=\"st-calendar__vide\"></td>\n          } @else {\n            <td [attr.aria-selected]=\"jour.choisi ? 'true' : null\">\n              <button\n                class=\"st-calendar__jour\"\n                type=\"button\"\n                [attr.data-date]=\"jour.date\"\n                [attr.data-plage]=\"jour.dansLaPlage ? '' : null\"\n                [attr.tabindex]=\"estActive(jour.date) ? 0 : -1\"\n                [attr.aria-label]=\"jour.nom\"\n                [attr.aria-current]=\"jour.aujourdHui ? 'date' : null\"\n                [attr.aria-disabled]=\"jour.horsBornes ? 'true' : null\"\n                (click)=\"choisir(jour)\"\n              >\n                {{ jour.numero }}\n              </button>\n            </td>\n          }\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n\n<p class=\"st-calendar__aide\" [id]=\"identifiants.aide\">{{ libelles().aideDuCalendrier }}</p>\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;padding:var(--st-espacement-3);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-calendar__entete{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;margin-block-end:var(--st-espacement-2)}.st-calendar__titre{margin:0;font-weight:var(--st-graisse-semi);text-transform:capitalize}.st-calendar__grille{border-collapse:collapse}.st-calendar__jour-de-semaine{padding-block-end:var(--st-espacement-1);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);text-align:center}.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-calendar__jour{inline-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));block-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-sm)}@media(hover:hover){.st-calendar__jour:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-enfoncee)}}.st-calendar__jour[aria-current=date]{font-weight:var(--st-graisse-semi);border-color:var(--st-couleur-bordure-forte)}.st-calendar__jour[data-plage]{background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-disabled=true]{color:var(--st-couleur-texte-discret);text-decoration:line-through;cursor:not-allowed}[aria-selected=true]>.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}[aria-selected=true]>.st-calendar__jour{font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire)}.st-calendar__aide{max-inline-size:20rem;margin:var(--st-espacement-2) 0 0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}@media(forced-colors:active){[aria-selected=true]>.st-calendar__jour{forced-color-adjust:none;color:HighlightText;background:Highlight}}\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: StCalendar, decorators: [{
             type: Component,
             args: [{ selector: 'st-calendar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIconButton], host: {
                         class: 'st-calendar',
                         '(keydown)': 'surTouche($event)',
-                    }, template: "<div class=\"st-calendar__entete\">\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"chevron-gauche\"\n    [etiquette]=\"libelles().moisPrecedent\"\n    [disabled]=\"!moisPrecedentPossible()\"\n    (click)=\"changerDeMois(-1)\"\n  ></button>\n  <!-- Region vivante : changer de mois a la souris ne deplace pas le focus, et le\n       nouveau mois doit se dire. -->\n  <p class=\"st-calendar__titre\" aria-live=\"polite\" [id]=\"identifiants.titre\">{{ titre() }}</p>\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"chevron-droite\"\n    [etiquette]=\"libelles().moisSuivant\"\n    [disabled]=\"!moisSuivantPossible()\"\n    (click)=\"changerDeMois(1)\"\n  ></button>\n</div>\n\n<table\n  class=\"st-calendar__grille\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"identifiants.titre\"\n  [attr.aria-describedby]=\"identifiants.aide\"\n>\n  <thead>\n    <tr>\n      @for (jour of joursDeLaSemaine(); track $index) {\n        <th class=\"st-calendar__jour-de-semaine\" scope=\"col\" [attr.abbr]=\"jour.long\">\n          {{ jour.court }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (semaine of semaines(); track semaine[0]?.date) {\n      <tr>\n        @for (jour of semaine; track jour.date) {\n          @if (jour.horsDuMois) {\n            <td class=\"st-calendar__vide\"></td>\n          } @else {\n            <td [attr.aria-selected]=\"jour.choisi ? 'true' : null\">\n              <button\n                class=\"st-calendar__jour\"\n                type=\"button\"\n                [attr.data-date]=\"jour.date\"\n                [attr.data-plage]=\"jour.dansLaPlage ? '' : null\"\n                [attr.tabindex]=\"estActive(jour.date) ? 0 : -1\"\n                [attr.aria-label]=\"jour.nom\"\n                [attr.aria-current]=\"jour.aujourdHui ? 'date' : null\"\n                [attr.aria-disabled]=\"jour.horsBornes ? 'true' : null\"\n                (click)=\"choisir(jour)\"\n              >\n                {{ jour.numero }}\n              </button>\n            </td>\n          }\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n\n<p class=\"st-calendar__aide\" [id]=\"identifiants.aide\">{{ libelles().aideDuCalendrier }}</p>\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;padding:var(--st-espacement-3);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-calendar__entete{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;margin-block-end:var(--st-espacement-2)}.st-calendar__titre{margin:0;font-weight:var(--st-graisse-semi);text-transform:capitalize}.st-calendar__grille{border-collapse:collapse}.st-calendar__jour-de-semaine{padding-block-end:var(--st-espacement-1);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);text-align:center}.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-calendar__jour{inline-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));block-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-sm)}.st-calendar__jour:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-current=date]{font-weight:var(--st-graisse-semi);border-color:var(--st-couleur-bordure-forte)}.st-calendar__jour[data-plage]{background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-disabled=true]{color:var(--st-couleur-texte-discret);text-decoration:line-through;cursor:not-allowed}[aria-selected=true]>.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}[aria-selected=true]>.st-calendar__jour{font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire)}.st-calendar__aide{max-inline-size:20rem;margin:var(--st-espacement-2) 0 0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}@media(forced-colors:active){[aria-selected=true]>.st-calendar__jour{forced-color-adjust:none;color:HighlightText;background:Highlight}}\n"] }]
+                    }, template: "<div class=\"st-calendar__entete\">\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"chevron-gauche\"\n    [etiquette]=\"libelles().moisPrecedent\"\n    [disabled]=\"!moisPrecedentPossible()\"\n    (click)=\"changerDeMois(-1)\"\n  ></button>\n  <!-- Region vivante : changer de mois a la souris ne deplace pas le focus, et le\n       nouveau mois doit se dire. -->\n  <p class=\"st-calendar__titre\" aria-live=\"polite\" [id]=\"identifiants.titre\">{{ titre() }}</p>\n  <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n       Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"chevron-droite\"\n    [etiquette]=\"libelles().moisSuivant\"\n    [disabled]=\"!moisSuivantPossible()\"\n    (click)=\"changerDeMois(1)\"\n  ></button>\n</div>\n\n<table\n  class=\"st-calendar__grille\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"identifiants.titre\"\n  [attr.aria-describedby]=\"identifiants.aide\"\n>\n  <thead>\n    <tr>\n      @for (jour of joursDeLaSemaine(); track $index) {\n        <th class=\"st-calendar__jour-de-semaine\" scope=\"col\" [attr.abbr]=\"jour.long\">\n          {{ jour.court }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (semaine of semaines(); track semaine[0]?.date) {\n      <tr>\n        @for (jour of semaine; track jour.date) {\n          @if (jour.horsDuMois) {\n            <td class=\"st-calendar__vide\"></td>\n          } @else {\n            <td [attr.aria-selected]=\"jour.choisi ? 'true' : null\">\n              <button\n                class=\"st-calendar__jour\"\n                type=\"button\"\n                [attr.data-date]=\"jour.date\"\n                [attr.data-plage]=\"jour.dansLaPlage ? '' : null\"\n                [attr.tabindex]=\"estActive(jour.date) ? 0 : -1\"\n                [attr.aria-label]=\"jour.nom\"\n                [attr.aria-current]=\"jour.aujourdHui ? 'date' : null\"\n                [attr.aria-disabled]=\"jour.horsBornes ? 'true' : null\"\n                (click)=\"choisir(jour)\"\n              >\n                {{ jour.numero }}\n              </button>\n            </td>\n          }\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n\n<p class=\"st-calendar__aide\" [id]=\"identifiants.aide\">{{ libelles().aideDuCalendrier }}</p>\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;padding:var(--st-espacement-3);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-calendar__entete{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;margin-block-end:var(--st-espacement-2)}.st-calendar__titre{margin:0;font-weight:var(--st-graisse-semi);text-transform:capitalize}.st-calendar__grille{border-collapse:collapse}.st-calendar__jour-de-semaine{padding-block-end:var(--st-espacement-1);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);text-align:center}.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-calendar__jour{inline-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));block-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-sm)}@media(hover:hover){.st-calendar__jour:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-enfoncee)}}.st-calendar__jour[aria-current=date]{font-weight:var(--st-graisse-semi);border-color:var(--st-couleur-bordure-forte)}.st-calendar__jour[data-plage]{background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-disabled=true]{color:var(--st-couleur-texte-discret);text-decoration:line-through;cursor:not-allowed}[aria-selected=true]>.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}[aria-selected=true]>.st-calendar__jour{font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire)}.st-calendar__aide{max-inline-size:20rem;margin:var(--st-espacement-2) 0 0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}@media(forced-colors:active){[aria-selected=true]>.st-calendar__jour{forced-color-adjust:none;color:HighlightText;background:Highlight}}\n"] }]
         }], propDecorators: { selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], dateMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateMin", required: false }] }], dateMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateMax", required: false }] }], plage: [{ type: i0.Input, args: [{ isSignal: true, alias: "plage", required: false }] }], choix: [{ type: i0.Output, args: ["choix"] }], fermeture: [{ type: i0.Output, args: ["fermeture"] }] } });
 
 /**
@@ -3860,7 +4468,7 @@ class StFileUpload extends ContratDeChamp {
         this.annonce.annoncer(this.libelles().nombreDeFichiers(liste.length));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFileUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StFileUpload, isStandalone: true, selector: "st-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, tailleMax: { classPropertyName: "tailleMax", publicName: "tailleMax", isSignal: true, isRequired: false, transformFunction: null }, etats: { classPropertyName: "etats", publicName: "etats", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", annulation: "annulation" }, host: { listeners: { "focusout": "aLaSortie($event)" }, classAttribute: "st-file-upload" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div\n    class=\"st-file-upload__zone\"\n    [attr.data-survol]=\"survol() ? '' : null\"\n    [attr.data-desactive]=\"disabled() ? '' : null\"\n    (dragover)=\"surSurvol($event)\"\n    (dragleave)=\"survol.set(false)\"\n    (drop)=\"surDepot($event)\"\n  >\n    <input\n      #champ\n      class=\"st-file-upload__natif\"\n      stControleDeChamp\n      type=\"file\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled() || readonly()\"\n      (change)=\"surChoix($event)\"\n    />\n    <!-- Voie de la souris vers le champ natif. Masque au lecteur d'ecran et hors\n         tabulation : le clavier et le lecteur d'ecran passent par le champ natif,\n         deja nomme par l'etiquette du champ. -->\n    <span class=\"st-file-upload__bouton\" aria-hidden=\"true\" (click)=\"champ.click()\">\n      <st-icon nom=\"televerser\" taille=\"sm\" />\n      {{ multiple() ? libelles().choisirDesFichiers : libelles().choisirUnFichier }}\n    </span>\n    @if (multiple()) {\n      <span class=\"st-file-upload__depot\" aria-hidden=\"true\">{{ libelles().ouDeposerIci }}</span>\n    }\n  </div>\n\n  @if (lignes().length > 0) {\n    <ul class=\"st-file-upload__liste\">\n      @for (ligne of lignes(); track ligne.cle; let indice = $index) {\n        <li class=\"st-file-upload__fichier\" [attr.data-etape]=\"ligne.etat?.etape\">\n          <st-icon nom=\"fichier\" taille=\"sm\" />\n          <span class=\"st-file-upload__nom\">{{ ligne.fichier.name }}</span>\n          <span class=\"st-file-upload__taille\">{{ ligne.taille }}</span>\n\n          @if (ligne.etat; as etat) {\n            @switch (etat.etape) {\n              @case ('en-cours') {\n                <st-progress\n                  class=\"st-file-upload__progression\"\n                  [valeur]=\"etat.progression ?? null\"\n                  [etiquette]=\"libelles().televersementDe(ligne.fichier.name)\"\n                />\n              }\n              @case ('depose') {\n                <span class=\"st-file-upload__etat\">\n                  <st-icon nom=\"cercle-coche\" taille=\"sm\" ton=\"succes\" />\n                  {{ libelles().fichierDepose(ligne.fichier.name) }}\n                </span>\n              }\n              @case ('refuse') {\n                <span class=\"st-file-upload__etat\" data-refuse>\n                  <st-icon nom=\"triangle-alerte\" taille=\"sm\" ton=\"danger\" />\n                  {{ etat.message ?? libelles().fichierRefuse(ligne.fichier.name) }}\n                </span>\n              }\n            }\n          }\n\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n               Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n          <button\n            class=\"st-file-upload__retrait\"\n            stIconButton\n            type=\"button\"\n            taille=\"sm\"\n            [icone]=\"ligne.etat?.etape === 'en-cours' ? 'croix' : 'corbeille'\"\n            [etiquette]=\"\n              ligne.etat?.etape === 'en-cours'\n                ? libelles().annulerLeTeleversement(ligne.fichier.name)\n                : libelles().retirerLeFichier(ligne.fichier.name)\n            \"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"\n              ligne.etat?.etape === 'en-cours' ? annulation.emit(ligne.fichier) : retirer(indice)\n            \"\n          ></button>\n        </li>\n      }\n    </ul>\n  }\n</st-form-field>\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:block}.st-file-upload__zone{position:relative;display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-3);align-items:center;padding:var(--st-espacement-3);border:1px dashed var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-file-upload__zone[data-survol]{background:var(--st-couleur-surface-enfoncee);border-style:solid}.st-file-upload__natif{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.st-file-upload__bouton{display:inline-flex;gap:var(--st-espacement-2);align-items:center;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-4);font-weight:var(--st-graisse-semi);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-sm)}.st-file-upload__natif:focus-visible+.st-file-upload__bouton{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}[aria-invalid=true]+.st-file-upload__bouton{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-file-upload__natif:disabled+.st-file-upload__bouton{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-file-upload__depot{color:var(--st-couleur-texte-discret)}.st-file-upload__liste{display:grid;gap:var(--st-espacement-1);padding:0;margin:var(--st-espacement-2) 0 0;list-style:none}.st-file-upload__fichier{display:flex;gap:var(--st-espacement-2);align-items:center}.st-file-upload__nom{min-inline-size:0;overflow-wrap:anywhere}.st-file-upload__progression{flex:1 1 8rem;max-inline-size:12rem}.st-file-upload__etat{display:inline-flex;gap:var(--st-espacement-1);align-items:center;color:var(--st-couleur-texte-discret)}.st-file-upload__etat[data-refuse]{color:var(--st-couleur-danger)}.st-file-upload__taille{flex:none;color:var(--st-couleur-texte-discret);font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { 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"] }, { kind: "component", type: StProgress, selector: "st-progress", inputs: ["valeur", "max", "etiquette", "ton", "texteDeValeur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StFileUpload, isStandalone: true, selector: "st-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, tailleMax: { classPropertyName: "tailleMax", publicName: "tailleMax", isSignal: true, isRequired: false, transformFunction: null }, etats: { classPropertyName: "etats", publicName: "etats", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", annulation: "annulation" }, host: { listeners: { "focusout": "aLaSortie($event)" }, classAttribute: "st-file-upload" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n  [libelle]=\"libelle()\"\n  [aide]=\"aideLue()\"\n  [erreurs]=\"errors()\"\n  [afficherErreurs]=\"touched()\"\n  [obligatoire]=\"required()\"\n>\n  <div\n    class=\"st-file-upload__zone\"\n    [attr.data-survol]=\"survol() ? '' : null\"\n    [attr.data-desactive]=\"disabled() ? '' : null\"\n    (dragover)=\"surSurvol($event)\"\n    (dragleave)=\"survol.set(false)\"\n    (drop)=\"surDepot($event)\"\n  >\n    <input\n      #champ\n      class=\"st-file-upload__natif\"\n      stControleDeChamp\n      type=\"file\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"disabled() || readonly()\"\n      (change)=\"surChoix($event)\"\n    />\n    <!-- Voie de la souris vers le champ natif. Masque au lecteur d'ecran et hors\n         tabulation : le clavier et le lecteur d'ecran passent par le champ natif,\n         deja nomme par l'etiquette du champ. -->\n    <span class=\"st-file-upload__bouton\" aria-hidden=\"true\" (click)=\"champ.click()\">\n      <st-icon nom=\"televerser\" taille=\"sm\" />\n      {{ multiple() ? libelles().choisirDesFichiers : libelles().choisirUnFichier }}\n    </span>\n    @if (multiple()) {\n      <span class=\"st-file-upload__depot\" aria-hidden=\"true\">{{ libelles().ouDeposerIci }}</span>\n    }\n  </div>\n\n  @if (lignes().length > 0) {\n    <ul class=\"st-file-upload__liste\">\n      @for (ligne of lignes(); track ligne.cle; let indice = $index) {\n        <li class=\"st-file-upload__fichier\" [attr.data-etape]=\"ligne.etat?.etape\">\n          <st-icon nom=\"fichier\" taille=\"sm\" />\n          <span class=\"st-file-upload__nom\">{{ ligne.fichier.name }}</span>\n          <span class=\"st-file-upload__taille\">{{ ligne.taille }}</span>\n\n          @if (ligne.etat; as etat) {\n            @switch (etat.etape) {\n              @case ('en-cours') {\n                <st-progress\n                  class=\"st-file-upload__progression\"\n                  [valeur]=\"etat.progression ?? null\"\n                  [etiquette]=\"libelles().televersementDe(ligne.fichier.name)\"\n                />\n              }\n              @case ('depose') {\n                <span class=\"st-file-upload__etat\">\n                  <st-icon nom=\"cercle-coche\" taille=\"sm\" ton=\"succes\" />\n                  {{ libelles().fichierDepose(ligne.fichier.name) }}\n                </span>\n              }\n              @case ('refuse') {\n                <span class=\"st-file-upload__etat\" data-refuse>\n                  <st-icon nom=\"triangle-alerte\" taille=\"sm\" ton=\"danger\" />\n                  {{ etat.message ?? libelles().fichierRefuse(ligne.fichier.name) }}\n                </span>\n              }\n            }\n          }\n\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n               Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n          <button\n            class=\"st-file-upload__retrait\"\n            stIconButton\n            type=\"button\"\n            taille=\"sm\"\n            [icone]=\"ligne.etat?.etape === 'en-cours' ? 'croix' : 'corbeille'\"\n            [etiquette]=\"\n              ligne.etat?.etape === 'en-cours'\n                ? libelles().annulerLeTeleversement(ligne.fichier.name)\n                : libelles().retirerLeFichier(ligne.fichier.name)\n            \"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"\n              ligne.etat?.etape === 'en-cours' ? annulation.emit(ligne.fichier) : retirer(indice)\n            \"\n          ></button>\n        </li>\n      }\n    </ul>\n  }\n</st-form-field>\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:block}.st-file-upload__zone{position:relative;display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-3);align-items:center;padding:var(--st-espacement-3);border:1px dashed var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-file-upload__zone[data-survol]{background:var(--st-couleur-surface-enfoncee);border-style:solid}.st-file-upload__natif{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.st-file-upload__bouton{display:inline-flex;gap:var(--st-espacement-2);align-items:center;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-4);font-weight:var(--st-graisse-semi);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-sm)}.st-file-upload__natif:focus-visible+.st-file-upload__bouton{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}[aria-invalid=true]+.st-file-upload__bouton{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-file-upload__natif:disabled+.st-file-upload__bouton{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-file-upload__depot{color:var(--st-couleur-texte-discret)}.st-file-upload__liste{display:grid;gap:var(--st-espacement-1);padding:0;margin:var(--st-espacement-2) 0 0;list-style:none}.st-file-upload__fichier{display:flex;gap:var(--st-espacement-2);align-items:center}.st-file-upload__nom{min-inline-size:0;overflow-wrap:anywhere}.st-file-upload__progression{flex:1 1 8rem;max-inline-size:12rem}.st-file-upload__etat{display:inline-flex;gap:var(--st-espacement-1);align-items:center;color:var(--st-couleur-texte-discret)}.st-file-upload__etat[data-refuse]{color:var(--st-couleur-danger)}.st-file-upload__taille{flex:none;color:var(--st-couleur-texte-discret);font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "sprite", "nomMetier", "taille", "ton", "etiquette"] }, { kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }, { kind: "component", type: StProgress, selector: "st-progress", inputs: ["valeur", "max", "etiquette", "ton", "epaisseur", "texteDeValeur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFileUpload, decorators: [{
             type: Component,
@@ -4030,11 +4638,11 @@ class StDescriptionList {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDescriptionList, isStandalone: true, selector: "st-description-list", inputs: { elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "st-description-list" }, queries: [{ propertyName: "gabarits", predicate: StDescription, isSignal: true }], ngImport: i0, template: "<dl class=\"st-description-list__liste\">\n  @for (ligne of lignes(); track ligne.element.cle ?? ligne.element.terme) {\n    <div class=\"st-description-list__groupe\">\n      <dt class=\"st-description-list__terme\">{{ ligne.element.terme }}</dt>\n      <dd class=\"st-description-list__valeur\">\n        @if (ligne.gabarit; as gabarit) {\n          <ng-container *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne.element }\" />\n        } @else if (ligne.element.description === null) {\n          <span aria-hidden=\"true\">&#8212;</span>\n          <span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n        } @else {\n          {{ ligne.element.description }}\n        }\n      </dd>\n    </div>\n  }\n</dl>\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;container-type:inline-size}.st-description-list__liste{margin:0}.st-description-list__groupe{display:grid;gap:var(--st-espacement-1);padding-block:var(--st-espacement-2);border-block-end:1px solid var(--st-couleur-bordure)}.st-description-list__terme{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret)}.st-description-list__valeur{margin:0;overflow-wrap:anywhere}@container (min-width: 32rem){.st-description-list__groupe{grid-template-columns:minmax(10rem,1fr) 2fr;gap:var(--st-espacement-4)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDescriptionList, isStandalone: true, selector: "st-description-list", inputs: { elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "st-description-list" }, queries: [{ propertyName: "gabarits", predicate: StDescription, isSignal: true }], ngImport: i0, template: "<dl class=\"st-description-list__liste\">\n  @for (ligne of lignes(); track ligne.element.cle ?? ligne.element.terme) {\n    <div class=\"st-description-list__groupe\">\n      <dt class=\"st-description-list__terme\">{{ ligne.element.terme }}</dt>\n      <dd class=\"st-description-list__valeur\">\n        @if (ligne.gabarit; as gabarit) {\n          <ng-container *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne.element }\" />\n        } @else if (ligne.element.description === null) {\n          <span aria-hidden=\"true\">&#8212;</span>\n          <span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n        } @else {\n          {{ ligne.element.description }}\n        }\n      </dd>\n    </div>\n  }\n</dl>\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;container-type:inline-size}.st-description-list__liste{margin:0}.st-description-list__groupe{display:grid;gap:var(--st-espacement-1);padding-block:var(--st-espacement-2);border-block-end:1px solid var(--st-couleur-bordure)}.st-description-list__terme{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret)}.st-description-list__valeur{margin:0;overflow-wrap:anywhere}@container (min-width: st.$rupture-sm){.st-description-list__groupe{grid-template-columns:minmax(10rem,1fr) 2fr;gap:var(--st-espacement-4)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescriptionList, decorators: [{
             type: Component,
-            args: [{ selector: 'st-description-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'st-description-list' }, template: "<dl class=\"st-description-list__liste\">\n  @for (ligne of lignes(); track ligne.element.cle ?? ligne.element.terme) {\n    <div class=\"st-description-list__groupe\">\n      <dt class=\"st-description-list__terme\">{{ ligne.element.terme }}</dt>\n      <dd class=\"st-description-list__valeur\">\n        @if (ligne.gabarit; as gabarit) {\n          <ng-container *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne.element }\" />\n        } @else if (ligne.element.description === null) {\n          <span aria-hidden=\"true\">&#8212;</span>\n          <span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n        } @else {\n          {{ ligne.element.description }}\n        }\n      </dd>\n    </div>\n  }\n</dl>\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;container-type:inline-size}.st-description-list__liste{margin:0}.st-description-list__groupe{display:grid;gap:var(--st-espacement-1);padding-block:var(--st-espacement-2);border-block-end:1px solid var(--st-couleur-bordure)}.st-description-list__terme{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret)}.st-description-list__valeur{margin:0;overflow-wrap:anywhere}@container (min-width: 32rem){.st-description-list__groupe{grid-template-columns:minmax(10rem,1fr) 2fr;gap:var(--st-espacement-4)}}\n"] }]
+            args: [{ selector: 'st-description-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'st-description-list' }, template: "<dl class=\"st-description-list__liste\">\n  @for (ligne of lignes(); track ligne.element.cle ?? ligne.element.terme) {\n    <div class=\"st-description-list__groupe\">\n      <dt class=\"st-description-list__terme\">{{ ligne.element.terme }}</dt>\n      <dd class=\"st-description-list__valeur\">\n        @if (ligne.gabarit; as gabarit) {\n          <ng-container *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne.element }\" />\n        } @else if (ligne.element.description === null) {\n          <span aria-hidden=\"true\">&#8212;</span>\n          <span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n        } @else {\n          {{ ligne.element.description }}\n        }\n      </dd>\n    </div>\n  }\n</dl>\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;container-type:inline-size}.st-description-list__liste{margin:0}.st-description-list__groupe{display:grid;gap:var(--st-espacement-1);padding-block:var(--st-espacement-2);border-block-end:1px solid var(--st-couleur-bordure)}.st-description-list__terme{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret)}.st-description-list__valeur{margin:0;overflow-wrap:anywhere}@container (min-width: st.$rupture-sm){.st-description-list__groupe{grid-template-columns:minmax(10rem,1fr) 2fr;gap:var(--st-espacement-4)}}\n"] }]
         }], propDecorators: { elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: true }] }], gabarits: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StDescription), { isSignal: true }] }] } });
 
 /**
@@ -4156,7 +4764,7 @@ class StSortHeader {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "icone" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StSortHeader, isStandalone: true, selector: "button[stSortHeader]", inputs: { sens: { classPropertyName: "sens", publicName: "sens", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.data-sens": "sens()" }, classAttribute: "st-sort-header" }, ngImport: i0, template: "<span class=\"st-sort-header__libelle\"><ng-content /></span>\n<st-icon class=\"st-sort-header__icone\" taille=\"sm\" [nom]=\"icone()\" />\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:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-min);padding:0;font:inherit;font-weight:inherit;color:inherit;text-align:inherit;cursor:pointer;background:none;border:0}.st-sort-header__icone{flex:none;color:var(--st-couleur-texte-discret)}:host([data-sens]) .st-sort-header__icone{color:inherit}\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: StSortHeader, isStandalone: true, selector: "button[stSortHeader]", inputs: { sens: { classPropertyName: "sens", publicName: "sens", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.data-sens": "sens()" }, classAttribute: "st-sort-header" }, ngImport: i0, template: "<span class=\"st-sort-header__libelle\"><ng-content /></span>\n<st-icon class=\"st-sort-header__icone\" taille=\"sm\" [nom]=\"icone()\" />\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:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-min);padding:0;font:inherit;font-weight:inherit;color:inherit;text-align:inherit;cursor:pointer;background:none;border:0}.st-sort-header__icone{flex:none;color:var(--st-couleur-texte-discret)}:host([data-sens]) .st-sort-header__icone{color:inherit}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "sprite", "nomMetier", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSortHeader, decorators: [{
             type: Component,
@@ -4393,7 +5001,7 @@ class StDataTable {
         return texteDe(ligne[colonne.cle]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDataTable, isStandalone: true, selector: "st-data-table", inputs: { legende: { classPropertyName: "legende", publicName: "legende", isSignal: true, isRequired: true, transformFunction: null }, legendeMasquee: { classPropertyName: "legendeMasquee", publicName: "legendeMasquee", isSignal: true, isRequired: false, transformFunction: null }, colonnes: { classPropertyName: "colonnes", publicName: "colonnes", isSignal: true, isRequired: true, transformFunction: null }, lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: true, transformFunction: null }, cle: { classPropertyName: "cle", publicName: "cle", isSignal: true, isRequired: true, transformFunction: null }, enTeteDeLigne: { classPropertyName: "enTeteDeLigne", publicName: "enTeteDeLigne", isSignal: true, isRequired: false, transformFunction: null }, premiereColonneFigee: { classPropertyName: "premiereColonneFigee", publicName: "premiereColonneFigee", isSignal: true, isRequired: false, transformFunction: null }, hauteurMax: { classPropertyName: "hauteurMax", publicName: "hauteurMax", isSignal: true, isRequired: false, transformFunction: null }, densite: { classPropertyName: "densite", publicName: "densite", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, selectionnable: { classPropertyName: "selectionnable", publicName: "selectionnable", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, tri: { classPropertyName: "tri", publicName: "tri", isSignal: true, isRequired: false, transformFunction: null }, texteVide: { classPropertyName: "texteVide", publicName: "texteVide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", tri: "triChange" }, host: { properties: { "attr.data-densite": "densite()", "attr.data-figee": "premiereColonneFigee() ? \"\" : null" }, classAttribute: "st-data-table" }, queries: [{ propertyName: "gabarits", predicate: StCellule, isSignal: true }, { propertyName: "gabaritVide", first: true, predicate: StTableauVide, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "zone", first: true, predicate: ["zone"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- UN seul ng-content : la projection se decide a la compilation, et un second\n     emplacement de meme selecteur, dans une autre branche, ne recevrait jamais\n     rien. -->\n<div class=\"st-data-table__barre\">\n  @if (selectionnable()) {\n    <p class=\"st-data-table__selection\" role=\"status\" [id]=\"identifiants.selection\">\n      {{ selection().length > 0 ? libelles().lignesSelectionnees(selection().length) : '' }}\n    </p>\n  }\n  <div class=\"st-data-table__actions\">\n    <ng-content select=\"[stActionsDeTableau]\" />\n  </div>\n</div>\n\n<!-- UX-6 : zone nommee par la legende ; focalisable quand elle deborde, et par\n     programme toujours, pour recevoir le focus apres un changement de page. -->\n<div\n  #zone\n  class=\"st-data-table__zone\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"identifiants.legende\"\n  [attr.tabindex]=\"deborde() ? 0 : -1\"\n  [attr.data-deborde]=\"deborde() ? '' : null\"\n  [style.max-block-size]=\"hauteurMax()\"\n  [style.scroll-padding-inline-start.px]=\"largeurFigee()\"\n>\n  <table class=\"st-data-table__tableau\" [attr.aria-busy]=\"chargement() ? 'true' : null\">\n    <caption\n      class=\"st-data-table__legende\"\n      [id]=\"identifiants.legende\"\n      [class.st-vh]=\"legendeMasquee()\"\n    >\n      {{\n        legende()\n      }}\n    </caption>\n    <thead>\n      <tr>\n        @if (selectionnable()) {\n          <th class=\"st-data-table__case\" scope=\"col\" data-figee>\n            <input\n              class=\"st-data-table__cocher\"\n              type=\"checkbox\"\n              [checked]=\"toutesChoisies()\"\n              [indeterminate]=\"quelquesChoisies()\"\n              [disabled]=\"rangees().length === 0\"\n              [attr.aria-label]=\"libelles().selectionnerLaPage(rangees().length)\"\n              (change)=\"basculerTout()\"\n            />\n          </th>\n        }\n        @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n          <th\n            scope=\"col\"\n            [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n            [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n            [attr.aria-sort]=\"ariaSort(cellule.colonne)\"\n          >\n            @if (cellule.colonne.triable) {\n              <button\n                stSortHeader\n                type=\"button\"\n                [sens]=\"sensDe(cellule.colonne)\"\n                (click)=\"trier(cellule.colonne)\"\n              >\n                {{ cellule.colonne.libelle }}\n              </button>\n            } @else if (cellule.colonne.libelleMasque) {\n              <span class=\"st-vh\">{{ cellule.colonne.libelle }}</span>\n            } @else {\n              {{ cellule.colonne.libelle }}\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (rang of squelette(); track rang) {\n        <tr class=\"st-data-table__squelette\" aria-hidden=\"true\">\n          @for (colonne of colonnesDeSquelette(); track colonne) {\n            <td><span class=\"st-data-table__barre-de-squelette\"></span></td>\n          }\n        </tr>\n      }\n      @for (rangee of rangees(); track rangee.identifiant) {\n        <tr [attr.data-choisie]=\"rangee.choisie ? '' : null\">\n          @if (selectionnable()) {\n            <td class=\"st-data-table__case\" data-figee>\n              <input\n                class=\"st-data-table__cocher\"\n                type=\"checkbox\"\n                [checked]=\"rangee.choisie\"\n                [attr.aria-label]=\"libelles().selectionnerLaLigne(rangee.nom ?? rangee.identifiant)\"\n                (change)=\"basculer(rangee.identifiant)\"\n              />\n            </td>\n          }\n          @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n            @if (cellule.enTete) {\n              <th\n                scope=\"row\"\n                [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n                [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valeur;\n                    context: { $implicit: rangee.valeur, cellule: cellule }\n                  \"\n                />\n              </th>\n            } @else {\n              <td\n                [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n                [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valeur;\n                    context: { $implicit: rangee.valeur, cellule: cellule }\n                  \"\n                />\n              </td>\n            }\n          }\n        </tr>\n      } @empty {\n        @if (!chargement()) {\n          <tr>\n            <td class=\"st-data-table__vide\" [attr.colspan]=\"nombreDeColonnes()\">\n              @if (gabaritVide(); as vide) {\n                <ng-container *ngTemplateOutlet=\"vide.gabarit\" />\n              } @else {\n                {{ texteVide() ?? libelles().tableauVide }}\n              }\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n\n<ng-template #valeur let-ligne let-cellule=\"cellule\">\n  @if (cellule.gabarit; as gabarit) {\n    <ng-container\n      *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne, colonne: cellule.colonne }\"\n    />\n  } @else if (texteDe(ligne, cellule.colonne); as texte) {\n    {{ texte }}\n  } @else {\n    <span aria-hidden=\"true\">&#8212;</span><span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n  }\n</ng-template>\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{--st-tableau-plan-figee: 1;--st-tableau-plan-entete: 2;--st-tableau-plan-coin: 3;display:block}.st-data-table__barre,.st-data-table__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-data-table__barre{justify-content:space-between}.st-data-table__barre:has(.st-data-table__selection,.st-data-table__actions:not(:empty)){min-block-size:var(--st-cible-tactile-min);margin-block-end:var(--st-espacement-2)}.st-data-table__actions{margin-inline-start:auto}.st-data-table__actions:empty{display:none}.st-data-table__selection{margin:0;font-weight:var(--st-graisse-semi)}.st-data-table__zone:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__zone{position:relative;overflow:auto;border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left/2rem 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right/2rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.2),transparent) left/.75rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) right/.75rem 100% no-repeat scroll,var(--st-couleur-surface)}.st-data-table__tableau{inline-size:100%;font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0}.st-data-table__legende{padding:var(--st-espacement-3);font-weight:var(--st-graisse-semi);text-align:start}th,td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-3));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-3));text-align:start;vertical-align:top;overflow-wrap:anywhere;border-block-end:1px solid var(--st-couleur-bordure)}thead th{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);white-space:nowrap;background:var(--st-couleur-surface-enfoncee)}thead th{position:sticky;inset-block-start:0;z-index:var(--st-tableau-plan-entete)}tbody th{font-weight:var(--st-graisse-semi)}tbody tr:last-child>*{border-block-end:0}tbody tr:hover>*{background:var(--st-couleur-surface-survol)}tbody tr[data-choisie]>*{background:var(--st-couleur-primaire-discret)}tbody tr[data-choisie]>:first-child{box-shadow:inset 3px 0 0 var(--st-couleur-primaire)}:host-context([dir=rtl]) tbody tr[data-choisie]>:first-child{box-shadow:inset -3px 0 0 var(--st-couleur-primaire)}[data-alignement=fin]{text-align:end}.st-data-table__case{inline-size:var(--st-tableau-largeur-case, 3rem);min-inline-size:var(--st-tableau-largeur-case, 3rem);text-align:center;vertical-align:middle}:host([data-densite=compacte]) th,:host([data-densite=compacte]) td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-1));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-2))}.st-data-table__cocher:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__cocher{inline-size:var(--st-cible-min);block-size:var(--st-cible-min);margin:0;accent-color:var(--st-couleur-primaire);cursor:pointer}:host([data-figee]) [data-figee]{position:sticky;inset-inline-start:0;z-index:var(--st-tableau-plan-figee);background:var(--st-couleur-surface)}:host([data-figee]) .st-data-table__case+[data-figee]{inset-inline-start:var(--st-tableau-largeur-case, 3rem)}:host([data-figee]) thead [data-figee]{z-index:var(--st-tableau-plan-coin);background:var(--st-couleur-surface-enfoncee)}.st-data-table__vide{padding:var(--st-espacement-5);color:var(--st-couleur-texte-discret);text-align:center}.st-data-table__barre-de-squelette{display:block;block-size:1em;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}@media(prefers-reduced-motion:no-preference){.st-data-table__barre-de-squelette{animation:st-tableau-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}@keyframes st-tableau-pulsation{50%{opacity:.5}}.st-data-table__tableau[aria-busy=true]{cursor:progress}@media(forced-colors:active){tbody tr[data-choisie]>:first-child{box-shadow:none;border-inline-start:3px solid Highlight}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StSortHeader, selector: "button[stSortHeader]", inputs: ["sens"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDataTable, isStandalone: true, selector: "st-data-table", inputs: { legende: { classPropertyName: "legende", publicName: "legende", isSignal: true, isRequired: true, transformFunction: null }, legendeMasquee: { classPropertyName: "legendeMasquee", publicName: "legendeMasquee", isSignal: true, isRequired: false, transformFunction: null }, colonnes: { classPropertyName: "colonnes", publicName: "colonnes", isSignal: true, isRequired: true, transformFunction: null }, lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: true, transformFunction: null }, cle: { classPropertyName: "cle", publicName: "cle", isSignal: true, isRequired: true, transformFunction: null }, enTeteDeLigne: { classPropertyName: "enTeteDeLigne", publicName: "enTeteDeLigne", isSignal: true, isRequired: false, transformFunction: null }, premiereColonneFigee: { classPropertyName: "premiereColonneFigee", publicName: "premiereColonneFigee", isSignal: true, isRequired: false, transformFunction: null }, hauteurMax: { classPropertyName: "hauteurMax", publicName: "hauteurMax", isSignal: true, isRequired: false, transformFunction: null }, densite: { classPropertyName: "densite", publicName: "densite", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, selectionnable: { classPropertyName: "selectionnable", publicName: "selectionnable", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, tri: { classPropertyName: "tri", publicName: "tri", isSignal: true, isRequired: false, transformFunction: null }, texteVide: { classPropertyName: "texteVide", publicName: "texteVide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", tri: "triChange" }, host: { properties: { "attr.data-densite": "densite()", "attr.data-figee": "premiereColonneFigee() ? \"\" : null" }, classAttribute: "st-data-table" }, queries: [{ propertyName: "gabarits", predicate: StCellule, isSignal: true }, { propertyName: "gabaritVide", first: true, predicate: StTableauVide, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "zone", first: true, predicate: ["zone"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- UN seul ng-content : la projection se decide a la compilation, et un second\n     emplacement de meme selecteur, dans une autre branche, ne recevrait jamais\n     rien. -->\n<div class=\"st-data-table__barre\">\n  @if (selectionnable()) {\n    <p class=\"st-data-table__selection\" role=\"status\" [id]=\"identifiants.selection\">\n      {{ selection().length > 0 ? libelles().lignesSelectionnees(selection().length) : '' }}\n    </p>\n  }\n  <div class=\"st-data-table__actions\">\n    <ng-content select=\"[stActionsDeTableau]\" />\n  </div>\n</div>\n\n<!-- UX-6 : zone nommee par la legende ; focalisable quand elle deborde, et par\n     programme toujours, pour recevoir le focus apres un changement de page. -->\n<div\n  #zone\n  class=\"st-data-table__zone\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"identifiants.legende\"\n  [attr.tabindex]=\"deborde() ? 0 : -1\"\n  [attr.data-deborde]=\"deborde() ? '' : null\"\n  [style.max-block-size]=\"hauteurMax()\"\n  [style.scroll-padding-inline-start.px]=\"largeurFigee()\"\n>\n  <table class=\"st-data-table__tableau\" [attr.aria-busy]=\"chargement() ? 'true' : null\">\n    <caption\n      class=\"st-data-table__legende\"\n      [id]=\"identifiants.legende\"\n      [class.st-vh]=\"legendeMasquee()\"\n    >\n      {{\n        legende()\n      }}\n    </caption>\n    <thead>\n      <tr>\n        @if (selectionnable()) {\n          <th class=\"st-data-table__case\" scope=\"col\" data-figee>\n            <input\n              class=\"st-data-table__cocher\"\n              type=\"checkbox\"\n              [checked]=\"toutesChoisies()\"\n              [indeterminate]=\"quelquesChoisies()\"\n              [disabled]=\"rangees().length === 0\"\n              [attr.aria-label]=\"libelles().selectionnerLaPage(rangees().length)\"\n              (change)=\"basculerTout()\"\n            />\n          </th>\n        }\n        @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n          <th\n            scope=\"col\"\n            [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n            [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n            [attr.aria-sort]=\"ariaSort(cellule.colonne)\"\n          >\n            @if (cellule.colonne.triable) {\n              <button\n                stSortHeader\n                type=\"button\"\n                [sens]=\"sensDe(cellule.colonne)\"\n                (click)=\"trier(cellule.colonne)\"\n              >\n                {{ cellule.colonne.libelle }}\n              </button>\n            } @else if (cellule.colonne.libelleMasque) {\n              <span class=\"st-vh\">{{ cellule.colonne.libelle }}</span>\n            } @else {\n              {{ cellule.colonne.libelle }}\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (rang of squelette(); track rang) {\n        <tr class=\"st-data-table__squelette\" aria-hidden=\"true\">\n          @for (colonne of colonnesDeSquelette(); track colonne) {\n            <td><span class=\"st-data-table__barre-de-squelette\"></span></td>\n          }\n        </tr>\n      }\n      @for (rangee of rangees(); track rangee.identifiant) {\n        <tr [attr.data-choisie]=\"rangee.choisie ? '' : null\">\n          @if (selectionnable()) {\n            <td class=\"st-data-table__case\" data-figee>\n              <input\n                class=\"st-data-table__cocher\"\n                type=\"checkbox\"\n                [checked]=\"rangee.choisie\"\n                [attr.aria-label]=\"libelles().selectionnerLaLigne(rangee.nom ?? rangee.identifiant)\"\n                (change)=\"basculer(rangee.identifiant)\"\n              />\n            </td>\n          }\n          @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n            @if (cellule.enTete) {\n              <th\n                scope=\"row\"\n                [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n                [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valeur;\n                    context: { $implicit: rangee.valeur, cellule: cellule }\n                  \"\n                />\n              </th>\n            } @else {\n              <td\n                [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n                [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valeur;\n                    context: { $implicit: rangee.valeur, cellule: cellule }\n                  \"\n                />\n              </td>\n            }\n          }\n        </tr>\n      } @empty {\n        @if (!chargement()) {\n          <tr>\n            <td class=\"st-data-table__vide\" [attr.colspan]=\"nombreDeColonnes()\">\n              @if (gabaritVide(); as vide) {\n                <ng-container *ngTemplateOutlet=\"vide.gabarit\" />\n              } @else {\n                {{ texteVide() ?? libelles().tableauVide }}\n              }\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n\n<ng-template #valeur let-ligne let-cellule=\"cellule\">\n  @if (cellule.gabarit; as gabarit) {\n    <ng-container\n      *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne, colonne: cellule.colonne }\"\n    />\n  } @else if (texteDe(ligne, cellule.colonne); as texte) {\n    {{ texte }}\n  } @else {\n    <span aria-hidden=\"true\">&#8212;</span><span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n  }\n</ng-template>\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{--st-tableau-plan-figee: 1;--st-tableau-plan-entete: 2;--st-tableau-plan-coin: 3;display:block}.st-data-table__barre,.st-data-table__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-data-table__barre{justify-content:space-between}.st-data-table__barre:has(.st-data-table__selection,.st-data-table__actions:not(:empty)){min-block-size:var(--st-cible-tactile-min);margin-block-end:var(--st-espacement-2)}.st-data-table__actions{margin-inline-start:auto}.st-data-table__actions:empty{display:none}.st-data-table__selection{margin:0;font-weight:var(--st-graisse-semi)}.st-data-table__zone:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__zone{position:relative;overflow:auto;border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left/2rem 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right/2rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.2),transparent) left/.75rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) right/.75rem 100% no-repeat scroll,var(--st-couleur-surface)}.st-data-table__tableau{inline-size:100%;font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0}.st-data-table__legende{padding:var(--st-espacement-3);font-weight:var(--st-graisse-semi);text-align:start}th,td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-3));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-3));text-align:start;vertical-align:top;overflow-wrap:anywhere;border-block-end:1px solid var(--st-couleur-bordure)}thead th{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);white-space:nowrap;background:var(--st-couleur-surface-enfoncee)}thead th{position:sticky;inset-block-start:0;z-index:var(--st-tableau-plan-entete)}tbody th{font-weight:var(--st-graisse-semi)}tbody tr:last-child>*{border-block-end:0}@media(hover:hover){tbody tr:hover>*{background:var(--st-couleur-surface-survol)}}tbody tr[data-choisie]>*{background:var(--st-couleur-primaire-discret)}tbody tr[data-choisie]>:first-child{box-shadow:inset 3px 0 0 var(--st-couleur-primaire)}:host-context([dir=rtl]) tbody tr[data-choisie]>:first-child{box-shadow:inset -3px 0 0 var(--st-couleur-primaire)}[data-alignement=fin]{text-align:end}.st-data-table__case{inline-size:var(--st-tableau-largeur-case, 3rem);min-inline-size:var(--st-tableau-largeur-case, 3rem);text-align:center;vertical-align:middle}:host([data-densite=compacte]) th,:host([data-densite=compacte]) td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-1));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-2))}.st-data-table__cocher:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__cocher{inline-size:var(--st-cible-min);block-size:var(--st-cible-min);margin:0;accent-color:var(--st-couleur-primaire);cursor:pointer}:host([data-figee]) [data-figee]{position:sticky;inset-inline-start:0;z-index:var(--st-tableau-plan-figee);background:var(--st-couleur-surface)}:host([data-figee]) .st-data-table__case+[data-figee]{inset-inline-start:var(--st-tableau-largeur-case, 3rem)}:host([data-figee]) thead [data-figee]{z-index:var(--st-tableau-plan-coin);background:var(--st-couleur-surface-enfoncee)}.st-data-table__vide{padding:var(--st-espacement-5);color:var(--st-couleur-texte-discret);text-align:center}.st-data-table__barre-de-squelette{display:block;block-size:1em;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}@media(prefers-reduced-motion:no-preference){.st-data-table__barre-de-squelette{animation:st-tableau-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}@keyframes st-tableau-pulsation{50%{opacity:.5}}.st-data-table__tableau[aria-busy=true]{cursor:progress}@media(forced-colors:active){tbody tr[data-choisie]>:first-child{box-shadow:none;border-inline-start:3px solid Highlight}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StSortHeader, selector: "button[stSortHeader]", inputs: ["sens"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDataTable, decorators: [{
             type: Component,
@@ -4401,7 +5009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'st-data-table',
                         '[attr.data-densite]': 'densite()',
                         '[attr.data-figee]': 'premiereColonneFigee() ? "" : null',
-                    }, template: "<!-- UN seul ng-content : la projection se decide a la compilation, et un second\n     emplacement de meme selecteur, dans une autre branche, ne recevrait jamais\n     rien. -->\n<div class=\"st-data-table__barre\">\n  @if (selectionnable()) {\n    <p class=\"st-data-table__selection\" role=\"status\" [id]=\"identifiants.selection\">\n      {{ selection().length > 0 ? libelles().lignesSelectionnees(selection().length) : '' }}\n    </p>\n  }\n  <div class=\"st-data-table__actions\">\n    <ng-content select=\"[stActionsDeTableau]\" />\n  </div>\n</div>\n\n<!-- UX-6 : zone nommee par la legende ; focalisable quand elle deborde, et par\n     programme toujours, pour recevoir le focus apres un changement de page. -->\n<div\n  #zone\n  class=\"st-data-table__zone\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"identifiants.legende\"\n  [attr.tabindex]=\"deborde() ? 0 : -1\"\n  [attr.data-deborde]=\"deborde() ? '' : null\"\n  [style.max-block-size]=\"hauteurMax()\"\n  [style.scroll-padding-inline-start.px]=\"largeurFigee()\"\n>\n  <table class=\"st-data-table__tableau\" [attr.aria-busy]=\"chargement() ? 'true' : null\">\n    <caption\n      class=\"st-data-table__legende\"\n      [id]=\"identifiants.legende\"\n      [class.st-vh]=\"legendeMasquee()\"\n    >\n      {{\n        legende()\n      }}\n    </caption>\n    <thead>\n      <tr>\n        @if (selectionnable()) {\n          <th class=\"st-data-table__case\" scope=\"col\" data-figee>\n            <input\n              class=\"st-data-table__cocher\"\n              type=\"checkbox\"\n              [checked]=\"toutesChoisies()\"\n              [indeterminate]=\"quelquesChoisies()\"\n              [disabled]=\"rangees().length === 0\"\n              [attr.aria-label]=\"libelles().selectionnerLaPage(rangees().length)\"\n              (change)=\"basculerTout()\"\n            />\n          </th>\n        }\n        @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n          <th\n            scope=\"col\"\n            [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n            [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n            [attr.aria-sort]=\"ariaSort(cellule.colonne)\"\n          >\n            @if (cellule.colonne.triable) {\n              <button\n                stSortHeader\n                type=\"button\"\n                [sens]=\"sensDe(cellule.colonne)\"\n                (click)=\"trier(cellule.colonne)\"\n              >\n                {{ cellule.colonne.libelle }}\n              </button>\n            } @else if (cellule.colonne.libelleMasque) {\n              <span class=\"st-vh\">{{ cellule.colonne.libelle }}</span>\n            } @else {\n              {{ cellule.colonne.libelle }}\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (rang of squelette(); track rang) {\n        <tr class=\"st-data-table__squelette\" aria-hidden=\"true\">\n          @for (colonne of colonnesDeSquelette(); track colonne) {\n            <td><span class=\"st-data-table__barre-de-squelette\"></span></td>\n          }\n        </tr>\n      }\n      @for (rangee of rangees(); track rangee.identifiant) {\n        <tr [attr.data-choisie]=\"rangee.choisie ? '' : null\">\n          @if (selectionnable()) {\n            <td class=\"st-data-table__case\" data-figee>\n              <input\n                class=\"st-data-table__cocher\"\n                type=\"checkbox\"\n                [checked]=\"rangee.choisie\"\n                [attr.aria-label]=\"libelles().selectionnerLaLigne(rangee.nom ?? rangee.identifiant)\"\n                (change)=\"basculer(rangee.identifiant)\"\n              />\n            </td>\n          }\n          @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n            @if (cellule.enTete) {\n              <th\n                scope=\"row\"\n                [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n                [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valeur;\n                    context: { $implicit: rangee.valeur, cellule: cellule }\n                  \"\n                />\n              </th>\n            } @else {\n              <td\n                [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n                [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valeur;\n                    context: { $implicit: rangee.valeur, cellule: cellule }\n                  \"\n                />\n              </td>\n            }\n          }\n        </tr>\n      } @empty {\n        @if (!chargement()) {\n          <tr>\n            <td class=\"st-data-table__vide\" [attr.colspan]=\"nombreDeColonnes()\">\n              @if (gabaritVide(); as vide) {\n                <ng-container *ngTemplateOutlet=\"vide.gabarit\" />\n              } @else {\n                {{ texteVide() ?? libelles().tableauVide }}\n              }\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n\n<ng-template #valeur let-ligne let-cellule=\"cellule\">\n  @if (cellule.gabarit; as gabarit) {\n    <ng-container\n      *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne, colonne: cellule.colonne }\"\n    />\n  } @else if (texteDe(ligne, cellule.colonne); as texte) {\n    {{ texte }}\n  } @else {\n    <span aria-hidden=\"true\">&#8212;</span><span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n  }\n</ng-template>\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{--st-tableau-plan-figee: 1;--st-tableau-plan-entete: 2;--st-tableau-plan-coin: 3;display:block}.st-data-table__barre,.st-data-table__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-data-table__barre{justify-content:space-between}.st-data-table__barre:has(.st-data-table__selection,.st-data-table__actions:not(:empty)){min-block-size:var(--st-cible-tactile-min);margin-block-end:var(--st-espacement-2)}.st-data-table__actions{margin-inline-start:auto}.st-data-table__actions:empty{display:none}.st-data-table__selection{margin:0;font-weight:var(--st-graisse-semi)}.st-data-table__zone:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__zone{position:relative;overflow:auto;border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left/2rem 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right/2rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.2),transparent) left/.75rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) right/.75rem 100% no-repeat scroll,var(--st-couleur-surface)}.st-data-table__tableau{inline-size:100%;font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0}.st-data-table__legende{padding:var(--st-espacement-3);font-weight:var(--st-graisse-semi);text-align:start}th,td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-3));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-3));text-align:start;vertical-align:top;overflow-wrap:anywhere;border-block-end:1px solid var(--st-couleur-bordure)}thead th{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);white-space:nowrap;background:var(--st-couleur-surface-enfoncee)}thead th{position:sticky;inset-block-start:0;z-index:var(--st-tableau-plan-entete)}tbody th{font-weight:var(--st-graisse-semi)}tbody tr:last-child>*{border-block-end:0}tbody tr:hover>*{background:var(--st-couleur-surface-survol)}tbody tr[data-choisie]>*{background:var(--st-couleur-primaire-discret)}tbody tr[data-choisie]>:first-child{box-shadow:inset 3px 0 0 var(--st-couleur-primaire)}:host-context([dir=rtl]) tbody tr[data-choisie]>:first-child{box-shadow:inset -3px 0 0 var(--st-couleur-primaire)}[data-alignement=fin]{text-align:end}.st-data-table__case{inline-size:var(--st-tableau-largeur-case, 3rem);min-inline-size:var(--st-tableau-largeur-case, 3rem);text-align:center;vertical-align:middle}:host([data-densite=compacte]) th,:host([data-densite=compacte]) td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-1));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-2))}.st-data-table__cocher:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__cocher{inline-size:var(--st-cible-min);block-size:var(--st-cible-min);margin:0;accent-color:var(--st-couleur-primaire);cursor:pointer}:host([data-figee]) [data-figee]{position:sticky;inset-inline-start:0;z-index:var(--st-tableau-plan-figee);background:var(--st-couleur-surface)}:host([data-figee]) .st-data-table__case+[data-figee]{inset-inline-start:var(--st-tableau-largeur-case, 3rem)}:host([data-figee]) thead [data-figee]{z-index:var(--st-tableau-plan-coin);background:var(--st-couleur-surface-enfoncee)}.st-data-table__vide{padding:var(--st-espacement-5);color:var(--st-couleur-texte-discret);text-align:center}.st-data-table__barre-de-squelette{display:block;block-size:1em;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}@media(prefers-reduced-motion:no-preference){.st-data-table__barre-de-squelette{animation:st-tableau-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}@keyframes st-tableau-pulsation{50%{opacity:.5}}.st-data-table__tableau[aria-busy=true]{cursor:progress}@media(forced-colors:active){tbody tr[data-choisie]>:first-child{box-shadow:none;border-inline-start:3px solid Highlight}}\n"] }]
+                    }, template: "<!-- UN seul ng-content : la projection se decide a la compilation, et un second\n     emplacement de meme selecteur, dans une autre branche, ne recevrait jamais\n     rien. -->\n<div class=\"st-data-table__barre\">\n  @if (selectionnable()) {\n    <p class=\"st-data-table__selection\" role=\"status\" [id]=\"identifiants.selection\">\n      {{ selection().length > 0 ? libelles().lignesSelectionnees(selection().length) : '' }}\n    </p>\n  }\n  <div class=\"st-data-table__actions\">\n    <ng-content select=\"[stActionsDeTableau]\" />\n  </div>\n</div>\n\n<!-- UX-6 : zone nommee par la legende ; focalisable quand elle deborde, et par\n     programme toujours, pour recevoir le focus apres un changement de page. -->\n<div\n  #zone\n  class=\"st-data-table__zone\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"identifiants.legende\"\n  [attr.tabindex]=\"deborde() ? 0 : -1\"\n  [attr.data-deborde]=\"deborde() ? '' : null\"\n  [style.max-block-size]=\"hauteurMax()\"\n  [style.scroll-padding-inline-start.px]=\"largeurFigee()\"\n>\n  <table class=\"st-data-table__tableau\" [attr.aria-busy]=\"chargement() ? 'true' : null\">\n    <caption\n      class=\"st-data-table__legende\"\n      [id]=\"identifiants.legende\"\n      [class.st-vh]=\"legendeMasquee()\"\n    >\n      {{\n        legende()\n      }}\n    </caption>\n    <thead>\n      <tr>\n        @if (selectionnable()) {\n          <th class=\"st-data-table__case\" scope=\"col\" data-figee>\n            <input\n              class=\"st-data-table__cocher\"\n              type=\"checkbox\"\n              [checked]=\"toutesChoisies()\"\n              [indeterminate]=\"quelquesChoisies()\"\n              [disabled]=\"rangees().length === 0\"\n              [attr.aria-label]=\"libelles().selectionnerLaPage(rangees().length)\"\n              (change)=\"basculerTout()\"\n            />\n          </th>\n        }\n        @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n          <th\n            scope=\"col\"\n            [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n            [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n            [attr.aria-sort]=\"ariaSort(cellule.colonne)\"\n          >\n            @if (cellule.colonne.triable) {\n              <button\n                stSortHeader\n                type=\"button\"\n                [sens]=\"sensDe(cellule.colonne)\"\n                (click)=\"trier(cellule.colonne)\"\n              >\n                {{ cellule.colonne.libelle }}\n              </button>\n            } @else if (cellule.colonne.libelleMasque) {\n              <span class=\"st-vh\">{{ cellule.colonne.libelle }}</span>\n            } @else {\n              {{ cellule.colonne.libelle }}\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (rang of squelette(); track rang) {\n        <tr class=\"st-data-table__squelette\" aria-hidden=\"true\">\n          @for (colonne of colonnesDeSquelette(); track colonne) {\n            <td><span class=\"st-data-table__barre-de-squelette\"></span></td>\n          }\n        </tr>\n      }\n      @for (rangee of rangees(); track rangee.identifiant) {\n        <tr [attr.data-choisie]=\"rangee.choisie ? '' : null\">\n          @if (selectionnable()) {\n            <td class=\"st-data-table__case\" data-figee>\n              <input\n                class=\"st-data-table__cocher\"\n                type=\"checkbox\"\n                [checked]=\"rangee.choisie\"\n                [attr.aria-label]=\"libelles().selectionnerLaLigne(rangee.nom ?? rangee.identifiant)\"\n                (change)=\"basculer(rangee.identifiant)\"\n              />\n            </td>\n          }\n          @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n            @if (cellule.enTete) {\n              <th\n                scope=\"row\"\n                [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n                [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valeur;\n                    context: { $implicit: rangee.valeur, cellule: cellule }\n                  \"\n                />\n              </th>\n            } @else {\n              <td\n                [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n                [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    valeur;\n                    context: { $implicit: rangee.valeur, cellule: cellule }\n                  \"\n                />\n              </td>\n            }\n          }\n        </tr>\n      } @empty {\n        @if (!chargement()) {\n          <tr>\n            <td class=\"st-data-table__vide\" [attr.colspan]=\"nombreDeColonnes()\">\n              @if (gabaritVide(); as vide) {\n                <ng-container *ngTemplateOutlet=\"vide.gabarit\" />\n              } @else {\n                {{ texteVide() ?? libelles().tableauVide }}\n              }\n            </td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n\n<ng-template #valeur let-ligne let-cellule=\"cellule\">\n  @if (cellule.gabarit; as gabarit) {\n    <ng-container\n      *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne, colonne: cellule.colonne }\"\n    />\n  } @else if (texteDe(ligne, cellule.colonne); as texte) {\n    {{ texte }}\n  } @else {\n    <span aria-hidden=\"true\">&#8212;</span><span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n  }\n</ng-template>\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{--st-tableau-plan-figee: 1;--st-tableau-plan-entete: 2;--st-tableau-plan-coin: 3;display:block}.st-data-table__barre,.st-data-table__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-data-table__barre{justify-content:space-between}.st-data-table__barre:has(.st-data-table__selection,.st-data-table__actions:not(:empty)){min-block-size:var(--st-cible-tactile-min);margin-block-end:var(--st-espacement-2)}.st-data-table__actions{margin-inline-start:auto}.st-data-table__actions:empty{display:none}.st-data-table__selection{margin:0;font-weight:var(--st-graisse-semi)}.st-data-table__zone:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__zone{position:relative;overflow:auto;border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left/2rem 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right/2rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.2),transparent) left/.75rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) right/.75rem 100% no-repeat scroll,var(--st-couleur-surface)}.st-data-table__tableau{inline-size:100%;font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0}.st-data-table__legende{padding:var(--st-espacement-3);font-weight:var(--st-graisse-semi);text-align:start}th,td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-3));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-3));text-align:start;vertical-align:top;overflow-wrap:anywhere;border-block-end:1px solid var(--st-couleur-bordure)}thead th{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);white-space:nowrap;background:var(--st-couleur-surface-enfoncee)}thead th{position:sticky;inset-block-start:0;z-index:var(--st-tableau-plan-entete)}tbody th{font-weight:var(--st-graisse-semi)}tbody tr:last-child>*{border-block-end:0}@media(hover:hover){tbody tr:hover>*{background:var(--st-couleur-surface-survol)}}tbody tr[data-choisie]>*{background:var(--st-couleur-primaire-discret)}tbody tr[data-choisie]>:first-child{box-shadow:inset 3px 0 0 var(--st-couleur-primaire)}:host-context([dir=rtl]) tbody tr[data-choisie]>:first-child{box-shadow:inset -3px 0 0 var(--st-couleur-primaire)}[data-alignement=fin]{text-align:end}.st-data-table__case{inline-size:var(--st-tableau-largeur-case, 3rem);min-inline-size:var(--st-tableau-largeur-case, 3rem);text-align:center;vertical-align:middle}:host([data-densite=compacte]) th,:host([data-densite=compacte]) td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-1));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-2))}.st-data-table__cocher:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__cocher{inline-size:var(--st-cible-min);block-size:var(--st-cible-min);margin:0;accent-color:var(--st-couleur-primaire);cursor:pointer}:host([data-figee]) [data-figee]{position:sticky;inset-inline-start:0;z-index:var(--st-tableau-plan-figee);background:var(--st-couleur-surface)}:host([data-figee]) .st-data-table__case+[data-figee]{inset-inline-start:var(--st-tableau-largeur-case, 3rem)}:host([data-figee]) thead [data-figee]{z-index:var(--st-tableau-plan-coin);background:var(--st-couleur-surface-enfoncee)}.st-data-table__vide{padding:var(--st-espacement-5);color:var(--st-couleur-texte-discret);text-align:center}.st-data-table__barre-de-squelette{display:block;block-size:1em;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}@media(prefers-reduced-motion:no-preference){.st-data-table__barre-de-squelette{animation:st-tableau-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}@keyframes st-tableau-pulsation{50%{opacity:.5}}.st-data-table__tableau[aria-busy=true]{cursor:progress}@media(forced-colors:active){tbody tr[data-choisie]>:first-child{box-shadow:none;border-inline-start:3px solid Highlight}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { legende: [{ type: i0.Input, args: [{ isSignal: true, alias: "legende", required: true }] }], legendeMasquee: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendeMasquee", required: false }] }], colonnes: [{ type: i0.Input, args: [{ isSignal: true, alias: "colonnes", required: true }] }], lignes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lignes", required: true }] }], cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cle", required: true }] }], enTeteDeLigne: [{ type: i0.Input, args: [{ isSignal: true, alias: "enTeteDeLigne", required: false }] }], premiereColonneFigee: [{ type: i0.Input, args: [{ isSignal: true, alias: "premiereColonneFigee", required: false }] }], hauteurMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "hauteurMax", required: false }] }], densite: [{ type: i0.Input, args: [{ isSignal: true, alias: "densite", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], selectionnable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionnable", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], tri: [{ type: i0.Input, args: [{ isSignal: true, alias: "tri", required: false }] }, { type: i0.Output, args: ["triChange"] }], texteVide: [{ type: i0.Input, args: [{ isSignal: true, alias: "texteVide", required: false }] }], gabarits: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StCellule), { isSignal: true }] }], gabaritVide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StTableauVide), { isSignal: true }] }], zone: [{ type: i0.ViewChild, args: ['zone', { isSignal: true }] }] } });
 /** Texte d'une valeur ; `null` quand elle est absente, pour le dire (UX de la vague 4). */
 function texteDe(valeur) {
@@ -4434,7 +5042,7 @@ class StFilterChip {
     nom = computed(() => this.libelles().retirerLeFiltre(this.libelle()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nom" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StFilterChip, isStandalone: true, selector: "button[stFilterChip]", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.aria-label": "nom()" }, classAttribute: "st-filter-chip" }, ngImport: i0, template: "<span class=\"st-filter-chip__libelle\">{{ libelle() }}</span>\n<st-icon class=\"st-filter-chip__croix\" nom=\"croix\" taille=\"sm\" />\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:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:calc(var(--st-cible-min) + var(--st-espacement-2));padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3) var(--st-espacement-2);font:inherit;color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}:host:hover{background:var(--st-couleur-surface-survol)}.st-filter-chip__croix{flex:none}\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: StFilterChip, isStandalone: true, selector: "button[stFilterChip]", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.aria-label": "nom()" }, classAttribute: "st-filter-chip" }, ngImport: i0, template: "<span class=\"st-filter-chip__libelle\">{{ libelle() }}</span>\n<st-icon class=\"st-filter-chip__croix\" nom=\"croix\" taille=\"sm\" />\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:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:calc(var(--st-cible-min) + var(--st-espacement-2));padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3) var(--st-espacement-2);font:inherit;color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}@media(hover:hover){:host:hover{background:var(--st-couleur-surface-survol)}}.st-filter-chip__croix{flex:none}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "sprite", "nomMetier", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterChip, decorators: [{
             type: Component,
@@ -4442,7 +5050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'st-filter-chip',
                         type: 'button',
                         '[attr.aria-label]': 'nom()',
-                    }, template: "<span class=\"st-filter-chip__libelle\">{{ libelle() }}</span>\n<st-icon class=\"st-filter-chip__croix\" nom=\"croix\" taille=\"sm\" />\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:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:calc(var(--st-cible-min) + var(--st-espacement-2));padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3) var(--st-espacement-2);font:inherit;color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}:host:hover{background:var(--st-couleur-surface-survol)}.st-filter-chip__croix{flex:none}\n"] }]
+                    }, template: "<span class=\"st-filter-chip__libelle\">{{ libelle() }}</span>\n<st-icon class=\"st-filter-chip__croix\" nom=\"croix\" taille=\"sm\" />\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:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:calc(var(--st-cible-min) + var(--st-espacement-2));padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3) var(--st-espacement-2);font:inherit;color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}@media(hover:hover){:host:hover{background:var(--st-couleur-surface-survol)}}.st-filter-chip__croix{flex:none}\n"] }]
         }], propDecorators: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }] } });
 
 let compteur$2 = 0;
@@ -5149,5 +5757,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AnnonceLocale, CHEMIN_DU_SPRITE, ContratDeChamp, ControleDeSaisie, FUSEAU_PAR_DEFAUT, GABARITS_D_ETAT, IDENTIFIANT_DU_CONTENU_PRINCIPAL, LIBELLES_EN, LIBELLES_FR, NOMS_DICONE, REGION_VIVANTE_PARENTE, ST_LIBELLES, ST_LOCALE, StAppShell, StAvatar, StBadge, StBanner, StBreadcrumb, StButton, StButtonGroup, StCalendar, StCard, StCellule, StChargement, StCheckbox, StCode, StControleDeChamp, StCopyButton, StCount, StDataTable, StDate, StDescription, StDescriptionList, StDivider, StElementDeListe, StEmpty, StErreur, StError, StErrorSummary, StFieldset, StFileUpload, StFilterBar, StFilterChip, StFormField, StHeader, StHeading, StHorsLigne, StIbanField, StIcon, StIconButton, StInlineMessage, StInput, StLangSwitch, StLink, StList, StLogo, StMasked, StMoney, StOfflineBanner, StOtpField, StPageTitle, StPagination, StPasswordField, StPhoneField, StProgress, StRadioGroup, StRelativeTime, StSearchField, StSection, StSelect, StSkeleton, StSkipLink, StSortHeader, StSpinner, StState, StStatusPill, StSucces, StSwitch, StTableauVide, StTag, StText, StTextarea, StThemeToggle, StTimer, StVide, cleDeFichier, copierDansLePressePapiers, erreurDate, erreurIban, erreurPlageDeDates, erreurTelephone, erreursDeFichiers, exempleDeDate, filtrerOptions, formaterDuree, fournirCheminDuSprite, fusionnerErreurs, messageDErreur, motifLocal, normaliserPourRecherche, pressePapiersDisponible, provideStarterUi };
+export { AnnonceLocale, CHEMIN_DU_SPRITE, ContratDeChamp, ControleDeSaisie, FUSEAU_PAR_DEFAUT, GABARITS_D_ETAT, IDENTIFIANT_DU_CONTENU_PRINCIPAL, LIBELLES_EN, LIBELLES_FR, NOMS_DICONE, PROPRIETE_HAUTEUR_ENTETE, REGION_VIVANTE_PARENTE, ST_LIBELLES, ST_LOCALE, StAppShell, StAuthShell, StAvatar, StBadge, StBanner, StBreadcrumb, StButton, StButtonGroup, StCalendar, StCard, StCellule, StChargement, StCheckbox, StCode, StControleDeChamp, StCopyButton, StCount, StDataTable, StDate, StDescription, StDescriptionList, StDivider, StElementDeListe, StEmpty, StErreur, StError, StErrorSummary, StFieldset, StFileUpload, StFilterBar, StFilterChip, StFooter, StFormActions, StFormField, StHeader, StHeading, StHorsLigne, StIbanField, StIcon, StIconButton, StInlineMessage, StInput, StLangSwitch, StLink, StList, StLogo, StMasked, StMoney, StNavLink, StOfflineBanner, StOtpField, StPageHeader, StPageTitle, StPagination, StPasswordField, StPhoneField, StProgress, StRadioGroup, StRelativeTime, StRouteProgress, StSearchField, StSection, StSelect, StSettingsRow, StSkeleton, StSkipLink, StSortHeader, StSpinner, StStat, StState, StStatusPill, StStepper, StSucces, StSwitch, StTableauVide, StTag, StText, StTextarea, StThemeToggle, StTimer, StVide, cleDeFichier, copierDansLePressePapiers, erreurDate, erreurIban, erreurPlageDeDates, erreurTelephone, erreursDeFichiers, exempleDeDate, filtrerOptions, formaterDuree, fournirCheminDuSprite, fusionnerErreurs, messageDErreur, motifLocal, normaliserPourRecherche, pressePapiersDisponible, provideStarterUi };
 //# sourceMappingURL=starterlib-ui.mjs.map