@starterlib/ui 0.1.1 → 0.3.0

package/fesm2022/starterlib-ui-surfaces.mjs

@@ -0,0 +1,1339 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { DomPortal, CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, signal, DestroyRef, ChangeDetectionStrategy, Component, Directive, InjectionToken, afterNextRender, computed, Injectable, effect, output } from '@angular/core';
+import * as i1 from '@angular/aria/menu';
+import { Menu, MenuItem } from '@angular/aria/menu';
+import { StIcon, ST_LIBELLES, StButton, StIconButton, ST_LOCALE, AnnonceLocale, formaterDuree } from '@starterlib/ui';
+import { CdkDialogContainer, DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
+export { DIALOG_DATA as DONNEES_DE_DIALOGUE } from '@angular/cdk/dialog';
+import { hasModifierKey } from '@angular/cdk/keycodes';
+import { Router, NavigationStart } from '@angular/router';
+import { AriaDescriber } from '@angular/cdk/a11y';
+import { DOCUMENT } from '@angular/common';
+
+const POSITIONS$2 = {
+    debut: [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    ],
+    fin: [
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+    ],
+};
+/**
+ * Menu d'actions. Le declencheur le designe, comme chez Material :
+ *
+ * ```html
+ * <button stMenuTrigger [menu]="compte" stButton>Actions</button>
+ *
+ * <st-menu #compte etiquette="Compte" (selection)="agir($event)">
+ *   <button stMenuItem valeur="profil">Mon profil</button>
+ *   <button stMenuItem valeur="quitter" ton="destructeur">Se deconnecter</button>
+ * </st-menu>
+ * ```
+ *
+ * ⚠️ Pourquoi le declencheur est DEHORS et les elements DEDANS. La primitive
+ * `Menu` d'`@angular/aria` relie ses elements au menu par injection, et un
+ * contenu projete garde l'injecteur de l'endroit ou il est ECRIT — jamais celui
+ * qui le rend. Les elements doivent donc etre ecrits a l'interieur de l'element
+ * qui porte le menu, sans quoi ils ne s'y enregistrent pas : le clavier ne
+ * bouge plus, et rien ne le signale. Le declencheur, lui, n'a rien a faire dans
+ * un `role="menu"`, qui ne contient que des elements de menu.
+ *
+ * Le clavier vient d'Aria, le placement du CDK. Le socle n'ecrit ni l'un ni
+ * l'autre : deux motifs longs, que l'on croit finis avant de les avoir
+ * eprouves au lecteur d'ecran ou au bord de l'ecran.
+ *
+ * ⚠️ A l'ouverture, l'element est DEPLACE dans la couche d'overlay
+ * (`DomPortal`), il n'est pas recree : ses liaisons, son etat et son injecteur
+ * survivent au passage, ce qu'un gabarit reconstruit perdrait.
+ */
+class StMenu {
+    element = inject(ElementRef);
+    overlay = inject(Overlay);
+    aria = inject(Menu);
+    /** Nom du menu pour les technologies d'assistance. */
+    etiquette = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    alignement = input('debut', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alignement" }] : /* istanbul ignore next */ []));
+    ouvertInterne = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ouvertInterne" }] : /* istanbul ignore next */ []));
+    ouvert = this.ouvertInterne.asReadonly();
+    couche = null;
+    declencheur = null;
+    constructor() {
+        // La primitive detecte la selection ; elle ne connait rien de la couche
+        // d'overlay, donc c'est ici que le menu se referme.
+        this.aria.itemSelected.subscribe(() => {
+            this.fermer();
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.detruireLaCouche();
+        });
+    }
+    ouvrirDepuis(declencheur) {
+        if (this.ouvertInterne())
+            return;
+        this.declencheur = declencheur;
+        this.couche = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(declencheur)
+                .withPositions(POSITIONS$2[this.alignement()])
+                .withPush(true),
+            // Le menu suit son declencheur au defilement : le figer le laisserait
+            // seul au milieu de l'ecran, sans lien visible avec ce qu'il commande.
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        this.couche.attach(new DomPortal(this.element));
+        this.ouvertInterne.set(true);
+        this.couche.outsidePointerEvents().subscribe(() => {
+            this.fermer({ rendreLeFocus: false });
+        });
+        // Le panneau prend le focus : la primitive y tient l'indice de tabulation
+        // glissant, donc c'est elle qui decide de l'element actif.
+        this.element.nativeElement.focus();
+    }
+    /**
+     * Ferme, et rend le focus au declencheur : sans cela, le focus retombe sur le
+     * corps du document, et la navigation clavier reprend en haut de page.
+     */
+    fermer(options = {}) {
+        if (!this.ouvertInterne())
+            return;
+        this.ouvertInterne.set(false);
+        this.detruireLaCouche();
+        const declencheur = this.declencheur;
+        this.declencheur = null;
+        if (options.rendreLeFocus !== false)
+            declencheur?.focus();
+    }
+    basculerDepuis(declencheur) {
+        if (this.ouvertInterne())
+            this.fermer();
+        else
+            this.ouvrirDepuis(declencheur);
+    }
+    auClavier(evenement) {
+        if (evenement.key !== 'Escape')
+            return;
+        evenement.preventDefault();
+        this.fermer();
+    }
+    detruireLaCouche() {
+        // `detach` avant `dispose` : le portail rend l'element a sa place d'origine,
+        // et le composant reste utilisable pour une reouverture.
+        this.couche?.detach();
+        this.couche?.dispose();
+        this.couche = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StMenu, isStandalone: true, selector: "st-menu", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, alignement: { classPropertyName: "alignement", publicName: "alignement", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "auClavier($event)" }, properties: { "attr.aria-label": "etiquette()", "attr.data-ouvert": "ouvert() ? \"\" : null" }, classAttribute: "st-menu" }, hostDirectives: [{ directive: i1.Menu, inputs: ["wrap", "wrap", "typeaheadDelay", "typeaheadDelay", "disabled", "disabled"], outputs: ["itemSelected", "selection"] }], ngImport: i0, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:none}:host([data-ouvert]){display:flex;flex-direction:column;gap:2px;min-inline-size:12rem;max-block-size:80vh;padding:var(--st-espacement-1);overflow-y:auto;background:var(--st-couleur-surface-elevee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);box-shadow:var(--st-ombre-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-menu', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: Menu,
+                            inputs: ['wrap', 'typeaheadDelay', 'disabled'],
+                            outputs: ['itemSelected: selection'],
+                        },
+                    ], host: {
+                        class: 'st-menu',
+                        '[attr.aria-label]': 'etiquette()',
+                        '[attr.data-ouvert]': 'ouvert() ? "" : null',
+                        '(keydown)': 'auClavier($event)',
+                    }, 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:none}:host([data-ouvert]){display:flex;flex-direction:column;gap:2px;min-inline-size:12rem;max-block-size:80vh;padding:var(--st-espacement-1);overflow-y:auto;background:var(--st-couleur-surface-elevee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);box-shadow:var(--st-ombre-2)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], alignement: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignement", required: false }] }] } });
+
+/**
+ * Element de menu, pose en ATTRIBUT sur un `<button>` natif — meme raison que
+ * `st-button` : une enveloppe casserait le comportement natif du bouton.
+ *
+ * Le clavier (fleches, Debut, Fin, saisie au vol, indice de tabulation
+ * glissant) vient de la primitive `MenuItem` d'`@angular/aria`, composee en
+ * directive d'hote. Le socle n'en reecrit aucune part : ces motifs sont longs a
+ * ecrire, faciles a croire finis, et c'est la ou l'accessibilite se perd.
+ *
+ * ⚠️ `valeur` est OBLIGATOIRE parce que la primitive l'exige, et c'est un bon
+ * defaut : c'est elle que `st-menu` emet a la selection. Un menu dont les
+ * elements n'ont pas d'identite stable oblige l'appelant a distinguer ses
+ * actions par leur libelle, donc par leur traduction.
+ */
+class StMenuItem {
+    icone = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icone" }] : /* istanbul ignore next */ []));
+    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: StMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StMenuItem, isStandalone: true, selector: "button[stMenuItem]", inputs: { icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.data-ton": "ton()" }, classAttribute: "st-menu-item" }, hostDirectives: [{ directive: i1.MenuItem, inputs: ["value", "valeur", "disabled", "desactive", "role", "role"] }], ngImport: i0, template: "@if (icone(); as nom) {\n  <st-icon [nom]=\"nom\" taille=\"sm\" />\n}\n\n<span class=\"st-menu-item__libelle\"><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:center;inline-size:100%;min-block-size:2.25rem;padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-3);font-family:var(--st-police-base);font-size:var(--st-taille-sm);color:var(--st-couleur-texte);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--st-rayon-sm)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:-2px}:host:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-survol)}:host[data-active=true]{background:var(--st-couleur-surface-survol)}:host[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}@media(any-pointer:coarse){:host{min-block-size:var(--st-cible-tactile-min)}}:host([data-ton=danger]){color:var(--st-couleur-danger)}:host([data-ton=danger]):hover:not([aria-disabled=true]),:host([data-ton=danger])[data-active=true]{background:var(--st-couleur-danger-discret)}.st-menu-item__libelle{flex:1}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StMenuItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[stMenuItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon], hostDirectives: [
+                        { directive: MenuItem, inputs: ['value: valeur', 'disabled: desactive', 'role'] },
+                    ], host: {
+                        class: 'st-menu-item',
+                        type: 'button',
+                        '[attr.data-ton]': 'ton()',
+                    }, template: "@if (icone(); as nom) {\n  <st-icon [nom]=\"nom\" taille=\"sm\" />\n}\n\n<span class=\"st-menu-item__libelle\"><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:center;inline-size:100%;min-block-size:2.25rem;padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-3);font-family:var(--st-police-base);font-size:var(--st-taille-sm);color:var(--st-couleur-texte);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--st-rayon-sm)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:-2px}:host:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-survol)}:host[data-active=true]{background:var(--st-couleur-surface-survol)}:host[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}@media(any-pointer:coarse){:host{min-block-size:var(--st-cible-tactile-min)}}:host([data-ton=danger]){color:var(--st-couleur-danger)}:host([data-ton=danger]):hover:not([aria-disabled=true]),:host([data-ton=danger])[data-active=true]{background:var(--st-couleur-danger-discret)}.st-menu-item__libelle{flex:1}\n"] }]
+        }], propDecorators: { icone: [{ type: i0.Input, args: [{ isSignal: true, alias: "icone", required: false }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }] } });
+
+/**
+ * Controle qui ouvre un menu. Il le DESIGNE, il ne le contient pas :
+ *
+ * ```html
+ * <button stMenuTrigger [menu]="compte" stButton>Actions</button>
+ * <st-menu #compte etiquette="Compte">…</st-menu>
+ * ```
+ *
+ * ⚠️ Le type de `menu` est importe en TYPE seulement : `st-menu` n'a pas besoin
+ * de cette directive, et l'importer dans les deux sens formerait un cycle.
+ */
+class StMenuTrigger {
+    element = inject(ElementRef).nativeElement;
+    menu = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+    basculer() {
+        this.menu().basculerDepuis(this.element);
+    }
+    auClavier(evenement) {
+        // La fleche bas ouvre sans activer : convention des menus, et elle evite
+        // d'ouvrir a chaque frappe sur un controle qui porte deja une action.
+        if (evenement.key !== 'ArrowDown' || this.menu().ouvert())
+            return;
+        evenement.preventDefault();
+        this.menu().ouvrirDepuis(this.element);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StMenuTrigger, isStandalone: true, selector: "[stMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "click": "basculer()", "keydown": "auClavier($event)" }, properties: { "attr.aria-expanded": "menu().ouvert()", "attr.data-ouvert": "menu().ouvert() ? \"\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stMenuTrigger]',
+                    host: {
+                        'aria-haspopup': 'menu',
+                        '[attr.aria-expanded]': 'menu().ouvert()',
+                        '[attr.data-ouvert]': 'menu().ouvert() ? "" : null',
+                        '(click)': 'basculer()',
+                        '(keydown)': 'auClavier($event)',
+                    },
+                }]
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: true }] }] } });
+
+/**
+ * Identifiant du titre du dialogue, decide a l'ouverture et fourni au contenu.
+ *
+ * ⚠️ Il est engendre par le service et non par le composant de titre : c'est la
+ * configuration du dialogue qui doit porter `aria-labelledby`, et elle est
+ * figee a l'ouverture. Un identifiant decide plus tard arriverait apres que le
+ * conteneur a lu sa configuration, et le dialogue s'ouvrirait sans nom.
+ */
+const IDENTIFIANT_DU_TITRE = new InjectionToken('st.dialogue.identifiant-du-titre');
+
+/**
+ * Le panneau du dialogue : sa surface, son arrondi, son ombre.
+ *
+ * ⚠️ Pourquoi ce composant existe. `CdkDialogContainer` n'a **aucune
+ * apparence** : c'est voulu de la part du CDK, qui ne decide d'aucun style. Le
+ * dialogue fonctionnait donc parfaitement — role, nom, piegeage du focus,
+ * Echap — tout en s'affichant SANS FOND, le texte flottant par-dessus la page.
+ * Aucun test ne pouvait le voir : jsdom ne calcule pas la mise en page, et les
+ * tests verifiaient le comportement, pas l'aspect.
+ *
+ * ⚠️ Un conteneur maison plutot qu'une feuille de style globale a importer :
+ * une SPA qui oublierait l'import retrouverait exactement le meme defaut, et
+ * l'oubli ne se verrait qu'a l'ecran. Ici, l'apparence voyage avec le
+ * composant.
+ *
+ * L'encapsulation reste EMULEE : seuls l'hote et le panneau qui l'enveloppe
+ * sont styles, par `:host` et `:host-context()`. Aucun contenu projete n'est
+ * vise, donc rien ne justifie de rendre ces styles globaux.
+ */
+class StDialogContainer extends CdkDialogContainer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDialogContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StDialogContainer, isStandalone: true, selector: "st-dialog-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.role": "_config.role", "attr.aria-modal": "_config.ariaModal", "attr.aria-labelledby": "_config.ariaLabel ? null : _config.ariaLabelledBy", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null" }, classAttribute: "st-dialog-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet />\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;max-block-size:inherit;overflow:hidden;color:var(--st-couleur-texte);background:var(--st-couleur-surface-elevee);border-radius:var(--st-rayon-lg);box-shadow:var(--st-ombre-xl)}:host(:focus){outline:none}:host-context(.st-tiroir){block-size:100%;max-block-size:100%;border-radius:0}:host-context(.st-tiroir--bas){border-start-start-radius:var(--st-rayon-lg);border-start-end-radius:var(--st-rayon-lg)}@media(forced-colors:active){:host{border:1px solid CanvasText}}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDialogContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-dialog-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkPortalOutlet], host: {
+                        class: 'st-dialog-container',
+                        '[attr.role]': '_config.role',
+                        '[attr.aria-modal]': '_config.ariaModal',
+                        '[attr.aria-labelledby]': '_config.ariaLabel ? null : _config.ariaLabelledBy',
+                        '[attr.aria-label]': '_config.ariaLabel',
+                        '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
+                        tabindex: '-1',
+                    }, template: "<ng-template cdkPortalOutlet />\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;max-block-size:inherit;overflow:hidden;color:var(--st-couleur-texte);background:var(--st-couleur-surface-elevee);border-radius:var(--st-rayon-lg);box-shadow:var(--st-ombre-xl)}:host(:focus){outline:none}:host-context(.st-tiroir){block-size:100%;max-block-size:100%;border-radius:0}:host-context(.st-tiroir--bas){border-start-start-radius:var(--st-rayon-lg);border-start-end-radius:var(--st-rayon-lg)}@media(forced-colors:active){:host{border:1px solid CanvasText}}\n"] }]
+        }] });
+
+/**
+ * Titre du dialogue. Il porte l'identifiant que la configuration a designe en
+ * `aria-labelledby` : c'est lui qui NOMME le dialogue.
+ *
+ * ⚠️ Un `h2` et non un `h1` : le dialogue s'ouvre par-dessus une page qui a
+ * deja son titre de niveau 1, et deux `h1` cassent la table des matieres que
+ * les lecteurs d'ecran construisent.
+ */
+class StDialogTitle {
+    identifiant = inject(IDENTIFIANT_DU_TITRE, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StDialogTitle, isStandalone: true, selector: "st-dialog-title", host: { classAttribute: "st-dialog-title" }, ngImport: i0, template: "<h2 class=\"st-dialog-title__texte\" [attr.id]=\"identifiant\"><ng-content /></h2>\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;padding:var(--st-espacement-5) var(--st-espacement-5) 0}.st-dialog-title__texte{margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-xl);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);text-wrap:balance}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDialogTitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-dialog-title', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-dialog-title' }, template: "<h2 class=\"st-dialog-title__texte\" [attr.id]=\"identifiant\"><ng-content /></h2>\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;padding:var(--st-espacement-5) var(--st-espacement-5) 0}.st-dialog-title__texte{margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-xl);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);text-wrap:balance}\n"] }]
+        }] });
+
+/**
+ * Corps du dialogue, defilant quand il deborde.
+ *
+ * ⚠️ Le defilement est ICI et non sur le dialogue entier : titre et actions
+ * doivent rester visibles. Un dialogue long dont les boutons partent hors de
+ * l'ecran est le defaut classique, et il ne se voit qu'a 200 % d'echelle ou sur
+ * un ecran bas.
+ *
+ * ⚠️ **Focalisable seulement quand il defile.** Une zone defilante sans
+ * controle doit recevoir le focus, sinon le clavier ne peut pas la faire
+ * defiler — le texte d'une condition generale, par exemple. Mais la premiere
+ * version posait `tabindex="0"` sans condition : sur un dialogue court, la zone
+ * de texte devenait le premier arret de tabulation, AVANT le bouton
+ * d'annulation, contrairement a ce que `StConfirmDialog` affirmait.
+ */
+class StDialogContent {
+    /** `aucun` pour un contenu qui gere ses propres marges, comme un tableau. */
+    rembourrage = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rembourrage" }] : /* istanbul ignore next */ []));
+    defilante = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defilante" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const element = inject(ElementRef).nativeElement;
+        const destruction = inject(DestroyRef);
+        // Mesure apres le rendu, puis a chaque changement de taille ou de contenu :
+        // des donnees arrivees apres l'ouverture peuvent faire deborder un dialogue
+        // qui ne debordait pas.
+        afterNextRender(() => {
+            const mesurer = () => {
+                this.defilante.set(element.scrollHeight > element.clientHeight + 1);
+            };
+            mesurer();
+            const observateurs = [];
+            if (typeof ResizeObserver !== 'undefined') {
+                const taille = new ResizeObserver(mesurer);
+                taille.observe(element);
+                observateurs.push(taille);
+            }
+            if (typeof MutationObserver !== 'undefined') {
+                const contenu = new MutationObserver(mesurer);
+                contenu.observe(element, { childList: true, subtree: true, characterData: true });
+                observateurs.push(contenu);
+            }
+            destruction.onDestroy(() => {
+                for (const observateur of observateurs)
+                    observateur.disconnect();
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StDialogContent, isStandalone: true, selector: "st-dialog-content", inputs: { rembourrage: { classPropertyName: "rembourrage", publicName: "rembourrage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.tabindex": "defilante() ? 0 : null", "attr.data-rembourrage": "rembourrage()" }, classAttribute: "st-dialog-content" }, ngImport: i0, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:-2px}:host{display:block;overflow-y:auto;max-block-size:60vh;color:var(--st-couleur-texte)}:host([data-rembourrage=md]){padding:var(--st-espacement-4) var(--st-espacement-5)}:host([data-rembourrage=aucun]){padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDialogContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-dialog-content', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'st-dialog-content',
+                        '[attr.tabindex]': 'defilante() ? 0 : null',
+                        '[attr.data-rembourrage]': 'rembourrage()',
+                    }, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:-2px}:host{display:block;overflow-y:auto;max-block-size:60vh;color:var(--st-couleur-texte)}:host([data-rembourrage=md]){padding:var(--st-espacement-4) var(--st-espacement-5)}:host([data-rembourrage=aucun]){padding:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { rembourrage: [{ type: i0.Input, args: [{ isSignal: true, alias: "rembourrage", required: false }] }] } });
+
+/**
+ * Barre d'actions du dialogue.
+ *
+ * ⚠️ L'action de confirmation est a DROITE et l'annulation a gauche, dans cet
+ * ordre dans le DOM : l'ordre de tabulation doit suivre l'ordre visuel, sinon
+ * le clavier et la souris ne donnent pas le meme parcours. Inverser
+ * visuellement par `row-reverse` casserait cette correspondance.
+ */
+class StDialogActions {
+    alignement = input('fin', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alignement" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StDialogActions, isStandalone: true, selector: "st-dialog-actions", inputs: { alignement: { classPropertyName: "alignement", publicName: "alignement", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-alignement": "alignement()" }, classAttribute: "st-dialog-actions" }, ngImport: i0, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center;padding:var(--st-espacement-4) var(--st-espacement-5) var(--st-espacement-5)}:host([data-alignement=fin]){justify-content:flex-end}:host([data-alignement=debut]){justify-content:flex-start}:host([data-alignement=entre]){justify-content:space-between}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDialogActions, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-dialog-actions', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'st-dialog-actions',
+                        '[attr.data-alignement]': 'alignement()',
+                    }, 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;padding:var(--st-espacement-4) var(--st-espacement-5) var(--st-espacement-5)}:host([data-alignement=fin]){justify-content:flex-end}:host([data-alignement=debut]){justify-content:flex-start}:host([data-alignement=entre]){justify-content:space-between}\n"] }]
+        }], propDecorators: { alignement: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignement", required: false }] }] } });
+
+let compteur$3 = 0;
+/**
+ * Dialogue de confirmation.
+ *
+ * ⚠️ **Le bouton de confirmation n'est jamais celui qui recoit le focus.** Le
+ * dialogue entier le recoit (voir `StDialog`), et le premier arret de
+ * tabulation est l'annulation. Un dialogue destructeur dont le bouton dangereux
+ * est deja focalise se valide par une seule touche Entree — c'est-a-dire par le
+ * geste que la personne etait en train de faire quand il s'est ouvert.
+ */
+class StConfirmDialog {
+    reference = inject(DialogRef);
+    libelles = inject(ST_LIBELLES);
+    demande = inject(DIALOG_DATA);
+    saisie = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "saisie" }] : /* istanbul ignore next */ []));
+    /** Unique par instance : deux confirmations empilees dupliqueraient un identifiant fixe. */
+    identifiantDeSaisie = `st-confirmation-saisie-${(compteur$3 += 1).toString()}`;
+    ton = computed(() => this.demande.destructeur === true ? 'danger' : 'primaire', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ton" }] : /* istanbul ignore next */ []));
+    libelleConfirmation = computed(() => this.demande.libelleConfirmation ?? this.libelles().confirmer, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleConfirmation" }] : /* istanbul ignore next */ []));
+    libelleAnnulation = computed(() => this.demande.libelleAnnulation ?? this.libelles().annuler, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleAnnulation" }] : /* istanbul ignore next */ []));
+    libelleRecopie = computed(() => this.libelles().recopierPourConfirmer(this.demande.saisieDeConfirmation ?? ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleRecopie" }] : /* istanbul ignore next */ []));
+    /**
+     * ⚠️ La comparaison ignore la casse et les espaces de bord, mais RIEN
+     * d'autre. Exiger la casse exacte transforme une confirmation en jeu
+     * d'adresse, et pousse a copier-coller — ce qui annule precisement l'effet
+     * recherche.
+     */
+    confirmationPossible = computed(() => {
+        const attendu = this.demande.saisieDeConfirmation;
+        if (attendu === undefined)
+            return true;
+        return this.saisie().trim().toLocaleLowerCase() === attendu.trim().toLocaleLowerCase();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "confirmationPossible" }] : /* istanbul ignore next */ []));
+    auChangement(evenement) {
+        this.saisie.set(evenement.target.value);
+    }
+    confirmer() {
+        if (!this.confirmationPossible())
+            return;
+        this.reference.close(true);
+    }
+    annuler() {
+        this.reference.close(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StConfirmDialog, isStandalone: true, selector: "st-confirm-dialog", host: { classAttribute: "st-confirm-dialog" }, ngImport: i0, template: "<st-dialog-title>{{ demande.titre }}</st-dialog-title>\n\n<st-dialog-content>\n  <p class=\"st-confirm-dialog__message\">{{ demande.message }}</p>\n\n  @if (demande.saisieDeConfirmation !== undefined) {\n    <div class=\"st-confirm-dialog__garde\">\n      <label class=\"st-confirm-dialog__etiquette\" [attr.for]=\"identifiantDeSaisie\">\n        {{ libelleRecopie() }}\n      </label>\n      <input\n        [id]=\"identifiantDeSaisie\"\n        class=\"st-confirm-dialog__champ\"\n        type=\"text\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [value]=\"saisie()\"\n        (input)=\"auChangement($event)\"\n      />\n    </div>\n  }\n</st-dialog-content>\n\n<st-dialog-actions>\n  <button stButton variante=\"secondaire\" type=\"button\" (click)=\"annuler()\">\n    {{ libelleAnnulation() }}\n  </button>\n  <button\n    stButton\n    type=\"button\"\n    [variante]=\"ton() === 'danger' ? 'danger' : 'primaire'\"\n    [indisponible]=\"!confirmationPossible()\"\n    (click)=\"confirmer()\"\n  >\n    {{ libelleConfirmation() }}\n  </button>\n</st-dialog-actions>\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-confirm-dialog__message{margin:0}.st-confirm-dialog__garde{display:flex;flex-direction:column;gap:var(--st-espacement-2);margin-block-start:var(--st-espacement-4)}.st-confirm-dialog__etiquette{font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte)}.st-confirm-dialog__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-confirm-dialog__champ{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);border-radius:var(--st-rayon-sm)}\n"], dependencies: [{ kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }, { kind: "component", type: StDialogTitle, selector: "st-dialog-title" }, { kind: "component", type: StDialogContent, selector: "st-dialog-content", inputs: ["rembourrage"] }, { kind: "component", type: StDialogActions, selector: "st-dialog-actions", inputs: ["alignement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StConfirmDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-confirm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StButton, StDialogTitle, StDialogContent, StDialogActions], host: { class: 'st-confirm-dialog' }, template: "<st-dialog-title>{{ demande.titre }}</st-dialog-title>\n\n<st-dialog-content>\n  <p class=\"st-confirm-dialog__message\">{{ demande.message }}</p>\n\n  @if (demande.saisieDeConfirmation !== undefined) {\n    <div class=\"st-confirm-dialog__garde\">\n      <label class=\"st-confirm-dialog__etiquette\" [attr.for]=\"identifiantDeSaisie\">\n        {{ libelleRecopie() }}\n      </label>\n      <input\n        [id]=\"identifiantDeSaisie\"\n        class=\"st-confirm-dialog__champ\"\n        type=\"text\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [value]=\"saisie()\"\n        (input)=\"auChangement($event)\"\n      />\n    </div>\n  }\n</st-dialog-content>\n\n<st-dialog-actions>\n  <button stButton variante=\"secondaire\" type=\"button\" (click)=\"annuler()\">\n    {{ libelleAnnulation() }}\n  </button>\n  <button\n    stButton\n    type=\"button\"\n    [variante]=\"ton() === 'danger' ? 'danger' : 'primaire'\"\n    [indisponible]=\"!confirmationPossible()\"\n    (click)=\"confirmer()\"\n  >\n    {{ libelleConfirmation() }}\n  </button>\n</st-dialog-actions>\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-confirm-dialog__message{margin:0}.st-confirm-dialog__garde{display:flex;flex-direction:column;gap:var(--st-espacement-2);margin-block-start:var(--st-espacement-4)}.st-confirm-dialog__etiquette{font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte)}.st-confirm-dialog__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-confirm-dialog__champ{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);border-radius:var(--st-rayon-sm)}\n"] }]
+        }] });
+
+let compteur$2 = 0;
+/**
+ * Ouvre des dialogues modaux.
+ *
+ * ⚠️ Monte sur `@angular/cdk/dialog`, et c'est un choix defendu : le piegeage
+ * du focus, sa restauration au declencheur, `aria-modal`, la mise en retrait du
+ * reste de la page, Echap et le blocage du defilement sont longs a ecrire,
+ * faciles a croire finis, et c'est exactement la que l'accessibilite se perd.
+ * Le socle n'en reecrit aucune part.
+ *
+ * Ce qu'il ajoute au CDK : le focus sur le dialogue, `aria-modal`, un fond inerte
+ * qui laisse Echap fermer, et la fermeture a toute navigation du routeur.
+ */
+class StDialog {
+    cdk = inject(Dialog);
+    overlay = inject(Overlay);
+    /** Une fonction de fermeture par dialogue ouvert : c'est tout ce qu'il faut garder. */
+    ouverts = new Set();
+    constructor() {
+        // ⚠️ `closeOnNavigation` du CDK ne couvre que l'HISTORIQUE du navigateur, sa
+        // documentation le dit : ni un lien du routeur, ni une navigation programmee.
+        // Un lien pose dans un tiroir de filtres changeait l'ecran dessous et
+        // laissait le tiroir pose dessus. Le routeur est optionnel : sans lui, il n'y
+        // a pas de navigation a suivre.
+        const routeur = inject(Router, { optional: true });
+        if (routeur === null)
+            return;
+        const abonnement = routeur.events.subscribe((evenement) => {
+            if (!(evenement instanceof NavigationStart))
+                return;
+            for (const fermer of [...this.ouverts])
+                fermer();
+        });
+        inject(DestroyRef).onDestroy(() => {
+            abonnement.unsubscribe();
+        });
+    }
+    /**
+     * Ouvre un composant, ou un GABARIT.
+     *
+     * Un gabarit sert quand le contenu vit deja dans le composant appelant — un
+     * tiroir de navigation qui deplace ses propres liens sur petit ecran. ⚠️ Son
+     * injecteur reste celui de l'endroit ou il est ECRIT : un `st-dialog-title`
+     * pose dedans ne recoit pas l'identifiant de titre, et le dialogue se nomme
+     * alors par `etiquette`.
+     */
+    ouvrir(composant, options = {}) {
+        compteur$2 += 1;
+        const identifiantDuTitre = `st-dialogue-titre-${compteur$2.toString()}`;
+        const fournisseurs = [
+            { provide: IDENTIFIANT_DU_TITRE, useValue: identifiantDuTitre },
+        ];
+        // L'argument de type porte le resultat jusqu'a l'appelant : l'omettre fait
+        // retomber l'inference sur `unknown`, et `fermer(resultat)` n'accepte plus
+        // rien de type.
+        const reference = this.cdk.open(composant, {
+            data: options.donnees,
+            providers: () => fournisseurs,
+            // ⚠️ Le conteneur du CDK n'a AUCUNE apparence : le dialogue s'affichait
+            // sans fond, le texte flottant sur la page. Voir `StDialogContainer`.
+            container: StDialogContainer,
+            ...this.geometrie(options),
+            panelClass: this.classes(options),
+            disableClose: options.fermetureInterdite === true || options.fondInerte === true,
+            // ⚠️ Nomme par son TITRE quand il en a un. Le dialogue sans nom accessible
+            // s'annonce « dialogue » et rien d'autre : la personne sait qu'une couche
+            // s'est ouverte, sans savoir laquelle.
+            ariaLabelledBy: identifiantDuTitre,
+            ariaLabel: options.etiquette ?? null,
+            ariaDescribedBy: options.descriptionDe ?? null,
+            // ⚠️ Pose EN PLUS du `aria-hidden` que le CDK met sur le reste de la page.
+            // Les deux signaux ne sont pas redondants : certaines technologies
+            // d'assistance ne lisent que l'un, et d'autres que l'autre.
+            ariaModal: true,
+            // ⚠️ Le focus va au DIALOGUE, non au premier element focalisable. Le
+            // defaut du CDK (`first-tabbable`) pose souvent le focus sur la croix de
+            // fermeture : le lecteur d'ecran annonce « Fermer », et rien de ce que le
+            // dialogue dit. Sur le conteneur, il lit le nom puis le contenu.
+            autoFocus: options.focusInitial ?? 'dialog',
+            role: options.role ?? 'dialog',
+            // ⚠️ Le focus retourne au declencheur a la fermeture. Sans cela, il
+            // retombe sur le corps du document et la navigation repart du haut.
+            restoreFocus: true,
+            // Une navigation arriere doit fermer la couche : sinon le dialogue reste
+            // pose sur un ecran qui a change dessous.
+            closeOnNavigation: true,
+        });
+        if (options.fondInerte === true && options.fermetureInterdite !== true) {
+            reference.keydownEvents.subscribe((evenement) => {
+                // `key` et non `keyCode`, deprecie — c'est pourtant `keyCode` que teste le
+                // CDK pour sa propre gestion d'Echap, desactivee ici par `disableClose`.
+                if (evenement.key !== 'Escape' || hasModifierKey(evenement))
+                    return;
+                evenement.preventDefault();
+                reference.close();
+            });
+        }
+        const fermerSansResultat = () => {
+            reference.close();
+        };
+        this.ouverts.add(fermerSansResultat);
+        return {
+            ferme: new Promise((resoudre) => {
+                reference.closed.subscribe((resultat) => {
+                    this.ouverts.delete(fermerSansResultat);
+                    resoudre(resultat);
+                });
+            }),
+            fermer: (resultat) => {
+                reference.close(resultat);
+            },
+        };
+    }
+    /**
+     * ⚠️ Un tiroir occupe toute la hauteur du bord ou il s'ancre, et une feuille
+     * inferieure toute la largeur. Sans cela, le panneau flotte au milieu et ne
+     * se lit plus comme un tiroir.
+     */
+    geometrie(options) {
+        const cote = options.cote;
+        if (cote === undefined) {
+            return { width: options.largeur ?? 'min(32rem, calc(100vw - 2rem))' };
+        }
+        const position = this.overlay.position().global();
+        if (cote === 'bas') {
+            position.bottom('0').left('0');
+            return { width: '100%', positionStrategy: position };
+        }
+        // ⚠️ `start` et `end` du CDK, et non `left` et `right` : ils suivent le sens
+        // d'ecriture que le CDK connait deja. Une premiere version resolvait le
+        // sens a la main en lisant `dir` sur `<html>` — alors que le CDK le lit
+        // aussi sur `<body>`. Deux sources de verite pour la meme question finissent
+        // par diverger, et le tiroir s'ouvre alors du mauvais cote.
+        if (cote === 'fin')
+            position.end('0');
+        else
+            position.start('0');
+        position.top('0');
+        return {
+            width: options.largeur ?? 'min(28rem, calc(100vw - 3rem))',
+            height: '100%',
+            positionStrategy: position,
+        };
+    }
+    classes(options) {
+        const classes = ['st-dialogue'];
+        if (options.cote !== undefined)
+            classes.push('st-tiroir', `st-tiroir--${options.cote}`);
+        if (options.classe !== undefined)
+            classes.push(options.classe);
+        return classes;
+    }
+    /**
+     * Demande une confirmation, et rend `true` seulement si elle est donnee.
+     *
+     * ⚠️ La fermeture par Echap ou par le fond rend `false` : quitter n'est pas
+     * confirmer. C'est pourquoi la valeur est comparee explicitement plutot que
+     * testee pour sa veracite — `undefined` doit valoir non.
+     */
+    async confirmer(demande) {
+        const reference = this.ouvrir(StConfirmDialog, {
+            donnees: demande,
+            // ⚠️ Une action destructrice ne se ferme pas d'un clic a cote : le clic
+            // hors de la couche est le geste le plus facile a faire par megarde. Echap,
+            // lui, reste permis — il vaut annuler.
+            fondInerte: demande.destructeur === true,
+        });
+        return (await reference.ferme) === true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDialog, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDialog, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/** Une FORME par ton, jamais la couleur seule. */
+const ICONE = {
+    neutre: 'cercle-info',
+    primaire: 'cercle-info',
+    succes: 'cercle-coche',
+    avertissement: 'triangle-alerte',
+    danger: 'cercle-croix',
+};
+const DUREE_PAR_DEFAUT_MS = 5000;
+/**
+ * ⚠️ Au-dela, les plus anciens messages SANS action sont retires. Une pile qui
+ * grandit sans limite finit par couvrir l'ecran, en poussant hors champ ce qui
+ * vient d'arriver.
+ */
+const MAXIMUM_AFFICHE = 3;
+/**
+ * Meme raison que dans `StAnnonceur` du noyau : la region doit etre observee
+ * avant de recevoir son texte, et un texte identique repose dans la meme tache
+ * ne produit aucune mutation.
+ */
+const DELAI_D_ANNONCE_MS = 120;
+/**
+ * Pile des messages ephemeres. Un seul exemplaire, pose par `StToast`.
+ *
+ * ⚠️ **Les messages visibles ne portent AUCUN role.** L'annonce passe par deux
+ * regions vivantes permanentes, creees vides avec le conteneur. La premiere
+ * version posait `role="status"` sur chaque message insere avec son texte :
+ * c'est la sequence que les lecteurs d'ecran n'annoncent pas de facon fiable,
+ * puisqu'ils rapportent les CHANGEMENTS d'une region deja observee. Les
+ * confirmations — le cas courant — risquaient le silence.
+ *
+ * ⚠️ Il ne prend JAMAIS le focus. Un message qui s'affiche pendant une saisie
+ * et vole le curseur fait perdre la frappe en cours.
+ */
+class StToastContainer {
+    libelles = inject(ST_LIBELLES);
+    pile = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pile" }] : /* istanbul ignore next */ []));
+    minuteries = new Map();
+    // Un minuteur PAR region : partage, une confirmation suivie d'une erreur dans
+    // la meme tache perdait la confirmation.
+    minuteriesDAnnonce = new Map();
+    compteur = 0;
+    messages = this.pile.asReadonly();
+    annoncePolie = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "annoncePolie" }] : /* istanbul ignore next */ []));
+    annonceAssertive = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "annonceAssertive" }] : /* istanbul ignore next */ []));
+    libelleFermeture = computed(() => this.libelles().fermerLeMessage, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleFermeture" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Une micro-SPA federee se demonte : ses minuteries ne doivent pas lui
+        // survivre et agir sur un composant detruit.
+        inject(DestroyRef).onDestroy(() => {
+            for (const minuterie of this.minuteries.values())
+                clearTimeout(minuterie);
+            this.minuteries.clear();
+            for (const minuterie of this.minuteriesDAnnonce.values())
+                clearTimeout(minuterie);
+        });
+    }
+    ajouter(demande) {
+        this.compteur += 1;
+        const identifiant = this.compteur;
+        const toast = { ...demande, identifiant, ton: demande.ton ?? 'neutre' };
+        this.pile.update((existants) => this.borner([...existants, toast]));
+        this.programmer(toast);
+        this.annoncer(toast.message, toast.ton === 'danger' ? 'assertif' : 'poli');
+        return identifiant;
+    }
+    retirer(identifiant) {
+        this.arreterLaMinuterie(identifiant);
+        this.pile.update((existants) => existants.filter((toast) => toast.identifiant !== identifiant));
+    }
+    /**
+     * ⚠️ La minuterie s'arrete au survol ET au focus. Sans la seconde, une
+     * personne qui atteint le bouton au clavier le voit disparaitre sous son
+     * doigt ; sans la premiere, celle qui lit lentement n'a aucun moyen de
+     * retenir le message.
+     */
+    suspendre(identifiant) {
+        this.arreterLaMinuterie(identifiant);
+    }
+    reprendre(identifiant) {
+        const toast = this.pile().find((candidat) => candidat.identifiant === identifiant);
+        if (toast !== undefined)
+            this.programmer(toast);
+    }
+    agir(toast) {
+        toast.action?.faire();
+        this.retirer(toast.identifiant);
+    }
+    iconeDe(toast) {
+        return ICONE[toast.ton];
+    }
+    /**
+     * ⚠️ Un message porteur d'action n'est JAMAIS evince. La premiere version
+     * gardait les trois plus recents sans distinction : trois confirmations
+     * successives faisaient disparaitre un « Annuler » en silence — exactement ce
+     * que WCAG 2.2.1 interdit, et ce que le modele promettait d'eviter.
+     *
+     * Les plus anciens messages sans action partent d'abord. S'il ne reste que des
+     * messages porteurs d'action, la borne cede : mieux vaut une pile haute qu'une
+     * annulation perdue.
+     */
+    borner(pile) {
+        const resultat = [...pile];
+        while (resultat.length > MAXIMUM_AFFICHE) {
+            const indice = resultat.findIndex((toast) => toast.action === undefined);
+            if (indice === -1)
+                break;
+            const [evince] = resultat.splice(indice, 1);
+            if (evince !== undefined)
+                this.arreterLaMinuterie(evince.identifiant);
+        }
+        return resultat;
+    }
+    annoncer(texte, urgence) {
+        const region = urgence === 'assertif' ? this.annonceAssertive : this.annoncePolie;
+        const precedente = this.minuteriesDAnnonce.get(urgence);
+        if (precedente !== undefined)
+            clearTimeout(precedente);
+        region.set('');
+        this.minuteriesDAnnonce.set(urgence, setTimeout(() => {
+            region.set(texte);
+            this.minuteriesDAnnonce.delete(urgence);
+        }, DELAI_D_ANNONCE_MS));
+    }
+    /**
+     * Un message porteur d'action ne s'efface pas seul : voir `DemandeDeToast`,
+     * et WCAG 2.2.1.
+     */
+    programmer(toast) {
+        if (toast.action !== undefined)
+            return;
+        const duree = toast.dureeMs === undefined ? DUREE_PAR_DEFAUT_MS : toast.dureeMs;
+        if (duree === null)
+            return;
+        this.arreterLaMinuterie(toast.identifiant);
+        this.minuteries.set(toast.identifiant, setTimeout(() => {
+            this.retirer(toast.identifiant);
+        }, duree));
+    }
+    arreterLaMinuterie(identifiant) {
+        const minuterie = this.minuteries.get(identifiant);
+        if (minuterie !== undefined)
+            clearTimeout(minuterie);
+        this.minuteries.delete(identifiant);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StToastContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StToastContainer, isStandalone: true, selector: "st-toast-container", host: { classAttribute: "st-toast-container" }, ngImport: i0, template: "<!-- Regions vivantes PERMANENTES, creees vides avec le conteneur : ce sont\n     elles qui annoncent, jamais les messages visibles. -->\n<div class=\"st-toast-container__annonce\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ annoncePolie() }}\n</div>\n<div class=\"st-toast-container__annonce\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">\n  {{ annonceAssertive() }}\n</div>\n\n@for (toast of messages(); track toast.identifiant) {\n  <div\n    class=\"st-toast\"\n    [attr.data-ton]=\"toast.ton\"\n    (mouseenter)=\"suspendre(toast.identifiant)\"\n    (mouseleave)=\"reprendre(toast.identifiant)\"\n    (focusin)=\"suspendre(toast.identifiant)\"\n    (focusout)=\"reprendre(toast.identifiant)\"\n  >\n    <st-icon [nom]=\"iconeDe(toast)\" taille=\"sm\" />\n    <p class=\"st-toast__message\">{{ toast.message }}</p>\n\n    @if (toast.action; as action) {\n      <button stButton variante=\"discret\" taille=\"sm\" type=\"button\" (click)=\"agir(toast)\">\n        {{ action.libelle }}\n      </button>\n    }\n\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]=\"libelleFermeture()\"\n      (click)=\"retirer(toast.identifiant)\"\n    ></button>\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{position:fixed;inset-block-end:var(--st-espacement-4);inset-inline:var(--st-espacement-4);z-index:var(--st-plan-notification);display:flex;flex-direction:column;gap:var(--st-espacement-2);align-items:center;pointer-events:none}.st-toast{display:flex;gap:var(--st-espacement-3);align-items:center;inline-size:100%;max-inline-size:28rem;padding:var(--st-espacement-3) var(--st-espacement-4);color:var(--st-couleur-texte);pointer-events:auto;background:var(--st-couleur-surface-elevee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);box-shadow:var(--st-ombre-lg)}.st-toast__message{flex:1 1 auto;min-inline-size:0;margin:0}.st-toast[data-ton=succes] st-icon{color:var(--st-couleur-succes)}.st-toast[data-ton=avertissement] st-icon{color:var(--st-couleur-avertissement)}.st-toast[data-ton=danger] st-icon{color:var(--st-couleur-danger)}.st-toast[data-ton=primaire] st-icon{color:var(--st-couleur-primaire)}@media(forced-colors:active){.st-toast{border-color:CanvasText}}.st-toast-container__annonce{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"] }, { kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }, { kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StToastContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-toast-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon, StButton, StIconButton], host: { class: 'st-toast-container' }, template: "<!-- Regions vivantes PERMANENTES, creees vides avec le conteneur : ce sont\n     elles qui annoncent, jamais les messages visibles. -->\n<div class=\"st-toast-container__annonce\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ annoncePolie() }}\n</div>\n<div class=\"st-toast-container__annonce\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">\n  {{ annonceAssertive() }}\n</div>\n\n@for (toast of messages(); track toast.identifiant) {\n  <div\n    class=\"st-toast\"\n    [attr.data-ton]=\"toast.ton\"\n    (mouseenter)=\"suspendre(toast.identifiant)\"\n    (mouseleave)=\"reprendre(toast.identifiant)\"\n    (focusin)=\"suspendre(toast.identifiant)\"\n    (focusout)=\"reprendre(toast.identifiant)\"\n  >\n    <st-icon [nom]=\"iconeDe(toast)\" taille=\"sm\" />\n    <p class=\"st-toast__message\">{{ toast.message }}</p>\n\n    @if (toast.action; as action) {\n      <button stButton variante=\"discret\" taille=\"sm\" type=\"button\" (click)=\"agir(toast)\">\n        {{ action.libelle }}\n      </button>\n    }\n\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]=\"libelleFermeture()\"\n      (click)=\"retirer(toast.identifiant)\"\n    ></button>\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{position:fixed;inset-block-end:var(--st-espacement-4);inset-inline:var(--st-espacement-4);z-index:var(--st-plan-notification);display:flex;flex-direction:column;gap:var(--st-espacement-2);align-items:center;pointer-events:none}.st-toast{display:flex;gap:var(--st-espacement-3);align-items:center;inline-size:100%;max-inline-size:28rem;padding:var(--st-espacement-3) var(--st-espacement-4);color:var(--st-couleur-texte);pointer-events:auto;background:var(--st-couleur-surface-elevee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);box-shadow:var(--st-ombre-lg)}.st-toast__message{flex:1 1 auto;min-inline-size:0;margin:0}.st-toast[data-ton=succes] st-icon{color:var(--st-couleur-succes)}.st-toast[data-ton=avertissement] st-icon{color:var(--st-couleur-avertissement)}.st-toast[data-ton=danger] st-icon{color:var(--st-couleur-danger)}.st-toast[data-ton=primaire] st-icon{color:var(--st-couleur-primaire)}@media(forced-colors:active){.st-toast{border-color:CanvasText}}.st-toast-container__annonce{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Messages ephemeres.
+ *
+ * ```ts
+ * const messages = inject(StToast);
+ * messages.montrer({ message: 'Virement enregistre', ton: 'succes' });
+ * messages.montrer({
+ *   message: 'Beneficiaire supprime',
+ *   action: { libelle: 'Annuler', faire: () => this.retablir() },
+ * });
+ * ```
+ *
+ * ⚠️ **Un seul conteneur pour toute l'application**, cree a la premiere
+ * demande. Deux piles superposees se recouvrent, et la seconde masque la
+ * premiere sans que rien ne le signale.
+ *
+ * ⚠️ **A n'employer que pour ce qui peut etre manque.** Un message ephemere
+ * n'est pas une facon d'annoncer une erreur : si l'information compte, elle
+ * doit rester a l'ecran — `st-banner` pour la page, `st-inline-message` pour un
+ * champ. La regle de tri : si la personne qui n'a pas vu le message est
+ * penalisee, ce n'est pas un toast.
+ */
+class StToast {
+    overlay = inject(Overlay);
+    couche = null;
+    conteneur = null;
+    constructor() {
+        // La couche est liberee avec le service : une micro-SPA federee se demonte,
+        // et une couche orpheline resterait posee dans le document de l'hote.
+        inject(DestroyRef).onDestroy(() => {
+            this.couche?.dispose();
+            this.couche = null;
+            this.conteneur = null;
+        });
+    }
+    /** Affiche un message. Rend son identifiant, pour pouvoir le retirer. */
+    montrer(demande) {
+        return this.pile().ajouter(demande);
+    }
+    retirer(identifiant) {
+        this.conteneur?.instance.retirer(identifiant);
+    }
+    pile() {
+        if (this.conteneur !== null)
+            return this.conteneur.instance;
+        // La couche d'overlay du CDK, et non le corps du document : elle est deja
+        // au bon plan, et le socle n'a pas a se disputer le `z-index` avec la page.
+        this.couche = this.overlay.create({ panelClass: 'st-toast-couche' });
+        this.conteneur = this.couche.attach(new ComponentPortal(StToastContainer));
+        return this.conteneur.instance;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StToast, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StToast, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StToast, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Seuils ou le temps restant s'annonce.
+ *
+ * ⚠️ JAMAIS a chaque seconde : une region qui change toutes les secondes
+ * recouvre tout ce que le lecteur d'ecran dit, y compris les deux boutons que la
+ * personne cherche justement a atteindre.
+ */
+const SEUILS_D_ANNONCE = [60, 30, 10];
+/** Contenu du dialogue d'avertissement. Ouvert par `st-idle-warning`, jamais directement. */
+class StIdleWarningPanel {
+    reference = inject(DialogRef);
+    libelles = inject(ST_LIBELLES);
+    locale = inject(ST_LOCALE);
+    donnees = inject(DIALOG_DATA);
+    annonce = new AnnonceLocale(inject(DestroyRef));
+    titre = computed(() => this.libelles().sessionBientotExpiree, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titre" }] : /* istanbul ignore next */ []));
+    message = computed(() => this.libelles().sessionExpireDans(formaterDuree(this.donnees.restant(), this.locale())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    libelleRester = computed(() => this.libelles().resterConnecte, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleRester" }] : /* istanbul ignore next */ []));
+    libelleDeconnecter = computed(() => this.libelles().seDeconnecter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "libelleDeconnecter" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // A l'ouverture, le dialogue d'alerte est lu avec sa description : rien a
+        // annoncer de plus. Ensuite, seul le franchissement d'un seuil s'annonce.
+        let precedent = null;
+        effect(() => {
+            const restant = this.donnees.restant();
+            const franchi = precedent !== null &&
+                SEUILS_D_ANNONCE.some((seuil) => (precedent ?? 0) > seuil && restant <= seuil);
+            precedent = restant;
+            if (franchi)
+                this.annonce.annoncer(this.message());
+        });
+    }
+    rester() {
+        this.reference.close('prolonger');
+    }
+    deconnecter() {
+        this.reference.close('deconnecter');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIdleWarningPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StIdleWarningPanel, isStandalone: true, selector: "st-idle-warning-panel", host: { classAttribute: "st-idle-warning-panel" }, ngImport: i0, template: "<st-dialog-title>{{ titre() }}</st-dialog-title>\n\n<st-dialog-content>\n  <p class=\"st-idle-warning-panel__message\" [id]=\"donnees.identifiantDeDescription\">\n    {{ message() }}\n  </p>\n  <span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n</st-dialog-content>\n\n<!-- L'action destructrice a gauche, la moins destructrice a droite et en\n     primaire : c'est elle qui recoit le focus a l'ouverture. -->\n<st-dialog-actions>\n  <button stButton variante=\"secondaire\" type=\"button\" (click)=\"deconnecter()\">\n    {{ libelleDeconnecter() }}\n  </button>\n  <button\n    class=\"st-idle-warning-panel__rester\"\n    stButton\n    variante=\"primaire\"\n    type=\"button\"\n    (click)=\"rester()\"\n  >\n    {{ libelleRester() }}\n  </button>\n</st-dialog-actions>\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-idle-warning-panel__message{margin:0;font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }, { kind: "component", type: StDialogTitle, selector: "st-dialog-title" }, { kind: "component", type: StDialogContent, selector: "st-dialog-content", inputs: ["rembourrage"] }, { kind: "component", type: StDialogActions, selector: "st-dialog-actions", inputs: ["alignement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIdleWarningPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-idle-warning-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StButton, StDialogTitle, StDialogContent, StDialogActions], host: { class: 'st-idle-warning-panel' }, template: "<st-dialog-title>{{ titre() }}</st-dialog-title>\n\n<st-dialog-content>\n  <p class=\"st-idle-warning-panel__message\" [id]=\"donnees.identifiantDeDescription\">\n    {{ message() }}\n  </p>\n  <span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n</st-dialog-content>\n\n<!-- L'action destructrice a gauche, la moins destructrice a droite et en\n     primaire : c'est elle qui recoit le focus a l'ouverture. -->\n<st-dialog-actions>\n  <button stButton variante=\"secondaire\" type=\"button\" (click)=\"deconnecter()\">\n    {{ libelleDeconnecter() }}\n  </button>\n  <button\n    class=\"st-idle-warning-panel__rester\"\n    stButton\n    variante=\"primaire\"\n    type=\"button\"\n    (click)=\"rester()\"\n  >\n    {{ libelleRester() }}\n  </button>\n</st-dialog-actions>\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-idle-warning-panel__message{margin:0;font-variant-numeric:tabular-nums}\n"] }]
+        }], ctorParameters: () => [] });
+
+let compteur$1 = 0;
+/**
+ * Avertissement avant fermeture de session pour inactivite.
+ *
+ * ```html
+ * <st-idle-warning
+ *   [secondesRestantes]="inactivite.secondesRestantes()"
+ *   (prolonge)="inactivite.prolonger()"
+ *   (deconnecte)="session.deconnecter()"
+ * />
+ * ```
+ *
+ * ⚠️ **Composant de PRESENTATION.** Il n'injecte pas `StInactivite` : `ui` ne
+ * depend pas de `@starterlib/core` (ADR 0003). Il s'ouvre quand
+ * `secondesRestantes` cesse d'etre `null`, et se ferme quand il y revient. La
+ * decision de fermer la session reste au noyau, qui la prend cote serveur.
+ *
+ * ⚠️ **Un `alertdialog`, focus sur « Rester connecte ».** Le motif ARIA veut le
+ * focus sur l'action la moins destructrice : une touche Entree reflexe doit
+ * garder la session, jamais la fermer.
+ *
+ * ⚠️ **Le clic a cote ne prolonge rien**, pour la raison que donne `StInactivite`
+ * du noyau : le dialogue disparaitrait sans que la session ait ete prolongee cote
+ * serveur. Il faut repondre. Echap, geste delibere, vaut « Rester connecte ».
+ */
+class StIdleWarning {
+    dialogues = inject(StDialog);
+    /** `null` : aucun avertissement en cours. */
+    secondesRestantes = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondesRestantes" }] : /* istanbul ignore next */ []));
+    prolonge = output();
+    deconnecte = output();
+    restant = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restant" }] : /* istanbul ignore next */ []));
+    reference = null;
+    identifiantDeDescription = `st-inactivite-${(compteur$1 += 1).toString()}`;
+    constructor() {
+        effect(() => {
+            const secondes = this.secondesRestantes();
+            if (secondes === null) {
+                this.fermerSansReponse();
+                return;
+            }
+            this.restant.set(secondes);
+            if (this.reference === null)
+                this.ouvrir();
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.fermerSansReponse();
+        });
+    }
+    ouvrir() {
+        const donnees = {
+            restant: this.restant.asReadonly(),
+            identifiantDeDescription: this.identifiantDeDescription,
+        };
+        const reference = this.dialogues.ouvrir(StIdleWarningPanel, {
+            donnees,
+            role: 'alertdialog',
+            descriptionDe: this.identifiantDeDescription,
+            focusInitial: '.st-idle-warning-panel__rester',
+            fondInerte: true,
+        });
+        this.reference = reference;
+        void reference.ferme.then((reponse) => {
+            // Fermeture decidee ici — fin du decompte, composant detruit : pas de reponse.
+            if (this.reference !== reference)
+                return;
+            this.reference = null;
+            if (reponse === 'deconnecter')
+                this.deconnecte.emit();
+            // Echap, ou « Rester connecte » : la personne est la.
+            else
+                this.prolonge.emit();
+        });
+    }
+    fermerSansReponse() {
+        const reference = this.reference;
+        this.reference = null;
+        reference?.fermer();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIdleWarning, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIdleWarning, isStandalone: true, selector: "st-idle-warning", inputs: { secondesRestantes: { classPropertyName: "secondesRestantes", publicName: "secondesRestantes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prolonge: "prolonge", deconnecte: "deconnecte" }, host: { classAttribute: "st-idle-warning" }, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIdleWarning, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-idle-warning', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-idle-warning' }, template: "" }]
+        }], ctorParameters: () => [], propDecorators: { secondesRestantes: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondesRestantes", required: false }] }], prolonge: [{ type: i0.Output, args: ["prolonge"] }], deconnecte: [{ type: i0.Output, args: ["deconnecte"] }] } });
+
+/**
+ * Bulle visible d'une infobulle. Posee par `stTooltip`, jamais directement.
+ *
+ * ⚠️ Muette (`aria-hidden`) : le texte est deja lu comme DESCRIPTION du
+ * declencheur, par un noeud persistant. L'exposer aussi ici le ferait lire deux
+ * fois.
+ */
+class StTooltipPanel {
+    texte = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "texte" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StTooltipPanel, isStandalone: true, selector: "st-tooltip-panel", inputs: { texte: { classPropertyName: "texte", publicName: "texte", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, classAttribute: "st-tooltip-panel" }, ngImport: i0, template: "{{ texte() }}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;max-inline-size:18rem;padding:var(--st-espacement-1) var(--st-espacement-2);font-size:var(--st-taille-sm);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte-inverse);pointer-events:auto;background:var(--st-couleur-texte);border-radius:var(--st-rayon-sm);box-shadow:var(--st-ombre-md)}@media(forced-colors:active){:host{border:1px solid CanvasText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTooltipPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-tooltip-panel', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'st-tooltip-panel', 'aria-hidden': 'true' }, template: "{{ texte() }}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;max-inline-size:18rem;padding:var(--st-espacement-1) var(--st-espacement-2);font-size:var(--st-taille-sm);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte-inverse);pointer-events:auto;background:var(--st-couleur-texte);border-radius:var(--st-rayon-sm);box-shadow:var(--st-ombre-md)}@media(forced-colors:active){:host{border:1px solid CanvasText}}\n"] }]
+        }], propDecorators: { texte: [{ type: i0.Input, args: [{ isSignal: true, alias: "texte", required: true }] }] } });
+
+const POSITIONS$1 = {
+    haut: [
+        { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -6 },
+        { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 6 },
+    ],
+    bas: [
+        { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 6 },
+        { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -6 },
+    ],
+};
+/** Delai au survol : sans lui, balayer une barre d'outils fait clignoter chaque bulle. */
+const DELAI_AU_SURVOL_MS = 300;
+/**
+ * Delai avant de masquer quand le pointeur quitte le declencheur : le temps de
+ * le poser sur la bulle, qui doit pouvoir etre survolee (WCAG 1.4.13).
+ */
+const DELAI_DE_GRACE_MS = 120;
+/**
+ * Infobulle : un complement de texte, au survol ET au focus.
+ *
+ * ```html
+ * <button stIconButton icone="corbeille" etiquette="Supprimer" stTooltip="Supprimer le beneficiaire"></button>
+ * ```
+ *
+ * WCAG 1.4.13, les trois exigences, chacune tenue ici :
+ *
+ * - **Refermable** : Echap la masque SANS deplacer le focus, et sans fermer le
+ *   dialogue qui la contiendrait — la premiere touche est pour elle.
+ * - **Survolable** : le pointeur peut passer du declencheur a la bulle sans
+ *   qu'elle disparaisse.
+ * - **Persistante** : elle reste tant que le survol ou le focus dure.
+ *
+ * ⚠️ **Le texte est une DESCRIPTION posee des le depart**, par un noeud
+ * persistant. Un `aria-describedby` qui viserait la bulle elle-meme pointerait
+ * vers un element absent au moment ou le focus arrive : le lecteur d'ecran,
+ * qui calcule la description a cet instant, ne lirait rien.
+ *
+ * ⚠️ **Jamais d'information exclusive, jamais de contenu interactif.** Sur un
+ * ecran tactile, il n'y a ni survol ni focus visible : l'infobulle n'existe pas.
+ * Ce qu'elle dit doit pouvoir manquer. Un lien ou un bouton dedans serait
+ * inatteignable — c'est un `st-popover` qu'il faut alors.
+ */
+class StTooltip {
+    element = inject(ElementRef).nativeElement;
+    overlay = inject(Overlay);
+    descripteur = inject(AriaDescriber);
+    document = inject(DOCUMENT);
+    stTooltip = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stTooltip" }] : /* istanbul ignore next */ []));
+    positionDInfobulle = input('haut', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positionDInfobulle" }] : /* istanbul ignore next */ []));
+    couche = null;
+    minuterie = null;
+    description = null;
+    echap = (evenement) => {
+        if (evenement.key !== 'Escape' || this.couche === null)
+            return;
+        // Echap est pour la bulle d'abord : sans cet arret, il fermerait aussi le
+        // dialogue qui la contient, et la personne perdrait bien plus qu'une bulle.
+        evenement.stopPropagation();
+        this.masquer();
+    };
+    constructor() {
+        effect(() => {
+            const texte = this.stTooltip().trim();
+            this.retirerLaDescription();
+            if (texte === '')
+                return;
+            this.descripteur.describe(this.element, texte);
+            this.description = texte;
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.masquer();
+            this.retirerLaDescription();
+        });
+    }
+    auSurvol() {
+        this.programmer(() => {
+            this.afficher();
+        }, DELAI_AU_SURVOL_MS);
+    }
+    auDepartDuPointeur() {
+        this.programmer(() => {
+            this.masquer();
+        }, DELAI_DE_GRACE_MS);
+    }
+    afficher() {
+        this.annulerLaMinuterie();
+        const texte = this.stTooltip().trim();
+        if (texte === '' || this.couche !== null)
+            return;
+        this.couche = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.element)
+                .withPositions(POSITIONS$1[this.positionDInfobulle()])
+                .withPush(false),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            panelClass: 'st-tooltip-couche',
+        });
+        const bulle = this.couche.attach(new ComponentPortal(StTooltipPanel));
+        bulle.setInput('texte', texte);
+        const noeud = bulle.location.nativeElement;
+        noeud.addEventListener('mouseenter', () => {
+            this.annulerLaMinuterie();
+        });
+        noeud.addEventListener('mouseleave', () => {
+            this.auDepartDuPointeur();
+        });
+        // En capture : l'infobulle entend Echap avant le dialogue qui la contient.
+        this.document.addEventListener('keydown', this.echap, true);
+    }
+    masquer() {
+        this.annulerLaMinuterie();
+        if (this.couche === null)
+            return;
+        this.document.removeEventListener('keydown', this.echap, true);
+        this.couche.dispose();
+        this.couche = null;
+    }
+    programmer(action, delai) {
+        this.annulerLaMinuterie();
+        this.minuterie = setTimeout(action, delai);
+    }
+    annulerLaMinuterie() {
+        if (this.minuterie !== null)
+            clearTimeout(this.minuterie);
+        this.minuterie = null;
+    }
+    retirerLaDescription() {
+        if (this.description === null)
+            return;
+        this.descripteur.removeDescription(this.element, this.description);
+        this.description = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StTooltip, isStandalone: true, selector: "[stTooltip]", inputs: { stTooltip: { classPropertyName: "stTooltip", publicName: "stTooltip", isSignal: true, isRequired: true, transformFunction: null }, positionDInfobulle: { classPropertyName: "positionDInfobulle", publicName: "positionDInfobulle", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "auSurvol()", "mouseleave": "auDepartDuPointeur()", "focusin": "afficher()", "focusout": "masquer()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stTooltip]',
+                    host: {
+                        '(mouseenter)': 'auSurvol()',
+                        '(mouseleave)': 'auDepartDuPointeur()',
+                        '(focusin)': 'afficher()',
+                        '(focusout)': 'masquer()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { stTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "stTooltip", required: true }] }], positionDInfobulle: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionDInfobulle", required: false }] }] } });
+
+const POSITIONS = {
+    debut: [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -6 },
+    ],
+    fin: [
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 6 },
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -6 },
+    ],
+};
+const FOCALISABLES = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), ' +
+    'textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+let compteur = 0;
+/**
+ * Couche NON modale attachee a un declencheur : filtres rapides, detail d'une
+ * ligne, petit formulaire.
+ *
+ * ```html
+ * <button stButton [stPopoverTrigger]="filtres">Filtres</button>
+ * <st-popover #filtres etiquette="Filtres des operations">…</st-popover>
+ * ```
+ *
+ * Distinct de l'infobulle, qui ne contient que du texte, et du dialogue, qui
+ * piege le focus et met la page en retrait.
+ *
+ * ⚠️ **Non modale, donc aucun piege.** La tabulation peut en sortir, et la page
+ * reste utilisable. Mais une couche que le focus a quittee flotterait sans lien
+ * avec ce qu'on fait : elle se ferme quand le focus part ailleurs que sur elle
+ * ou son declencheur.
+ *
+ * ⚠️ **Deux fermetures, deux destinations du focus.** Echap rend le focus au
+ * declencheur : la personne n'a rien choisi d'autre. Un clic a l'exterieur le
+ * laisse la ou il a ete pose : le lui reprendre annulerait ce clic.
+ *
+ * Meme structure que `st-menu` : le declencheur DESIGNE la couche, et l'element
+ * est DEPLACE dans la couche d'overlay a l'ouverture, avec ses liaisons et son
+ * etat.
+ */
+class StPopover {
+    element = inject(ElementRef);
+    overlay = inject(Overlay);
+    /** Nom accessible : sans lui, la couche s'annonce « dialogue » et rien d'autre. */
+    etiquette = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    alignement = input('debut', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alignement" }] : /* istanbul ignore next */ []));
+    identifiant = `st-popover-${(compteur += 1).toString()}`;
+    ouvertInterne = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ouvertInterne" }] : /* istanbul ignore next */ []));
+    ouvert = this.ouvertInterne.asReadonly();
+    couche = null;
+    declencheur = null;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            this.detruireLaCouche();
+        });
+    }
+    basculerDepuis(declencheur) {
+        if (this.ouvertInterne())
+            this.fermer();
+        else
+            this.ouvrirDepuis(declencheur);
+    }
+    ouvrirDepuis(declencheur) {
+        if (this.ouvertInterne())
+            return;
+        this.declencheur = declencheur;
+        this.couche = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(declencheur)
+                .withPositions(POSITIONS[this.alignement()])
+                .withPush(true),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        this.couche.attach(new DomPortal(this.element));
+        this.ouvertInterne.set(true);
+        this.couche.outsidePointerEvents().subscribe((evenement) => {
+            // Le clic sur le declencheur est deja une bascule : le traiter aussi ici
+            // rouvrirait la couche aussitot fermee.
+            if (declencheur.contains(evenement.target))
+                return;
+            this.fermer({ rendreLeFocus: false });
+        });
+        // Le focus entre dans la couche : sur son premier controle s'il en a, sinon
+        // sur la couche elle-meme, pour que son nom soit lu.
+        const hote = this.element.nativeElement;
+        const premier = hote.querySelector(FOCALISABLES);
+        (premier ?? hote).focus();
+    }
+    fermer(options = {}) {
+        if (!this.ouvertInterne())
+            return;
+        this.ouvertInterne.set(false);
+        this.detruireLaCouche();
+        const declencheur = this.declencheur;
+        this.declencheur = null;
+        if (options.rendreLeFocus !== false)
+            declencheur?.focus();
+    }
+    auClavier(evenement) {
+        if (evenement.key !== 'Escape')
+            return;
+        evenement.preventDefault();
+        evenement.stopPropagation();
+        this.fermer();
+    }
+    /**
+     * ⚠️ L'element actif est lu APRES la transition de focus, et non dans
+     * `relatedTarget`. Ce dernier est vide quand le focus part vers un element
+     * sans focus, et n'est pas renseigne partout ; pendant la transition elle-meme,
+     * l'element actif est encore le corps du document.
+     */
+    aLaPerteDuFocus() {
+        setTimeout(() => {
+            if (!this.ouvertInterne())
+                return;
+            const actif = this.element.nativeElement.ownerDocument.activeElement;
+            // Le corps du document : le focus a quitte la page, ou un clic sans cible
+            // focalisable — deja traite comme clic a l'exterieur par la couche.
+            if (actif === null || actif === actif.ownerDocument.body)
+                return;
+            if (this.element.nativeElement.contains(actif))
+                return;
+            if (this.declencheur?.contains(actif) === true)
+                return;
+            this.fermer({ rendreLeFocus: false });
+        });
+    }
+    detruireLaCouche() {
+        this.couche?.dispose();
+        this.couche = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StPopover, isStandalone: true, selector: "st-popover", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, alignement: { classPropertyName: "alignement", publicName: "alignement", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "dialog", "tabindex": "-1" }, listeners: { "keydown": "auClavier($event)", "focusout": "aLaPerteDuFocus()" }, properties: { "id": "identifiant", "attr.aria-label": "etiquette()", "attr.data-ouvert": "ouvert() ? \"\" : null" }, classAttribute: "st-popover" }, ngImport: i0, template: "<ng-content />\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:none}:host([data-ouvert]){display:block;max-inline-size:min(24rem,100vw - 2rem);padding:var(--st-espacement-4);color:var(--st-couleur-texte);background:var(--st-couleur-surface-elevee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);box-shadow:var(--st-ombre-lg)}:host(:focus){outline:none}@media(forced-colors:active){:host([data-ouvert]){border-color:CanvasText}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPopover, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-popover', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'st-popover',
+                        role: 'dialog',
+                        tabindex: '-1',
+                        '[id]': 'identifiant',
+                        '[attr.aria-label]': 'etiquette()',
+                        '[attr.data-ouvert]': 'ouvert() ? "" : null',
+                        '(keydown)': 'auClavier($event)',
+                        '(focusout)': 'aLaPerteDuFocus()',
+                    }, 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:none}:host([data-ouvert]){display:block;max-inline-size:min(24rem,100vw - 2rem);padding:var(--st-espacement-4);color:var(--st-couleur-texte);background:var(--st-couleur-surface-elevee);border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);box-shadow:var(--st-ombre-lg)}:host(:focus){outline:none}@media(forced-colors:active){:host([data-ouvert]){border-color:CanvasText}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], alignement: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignement", required: false }] }] } });
+
+/**
+ * Declencheur d'un `st-popover`.
+ *
+ * ⚠️ `aria-controls` vise la couche meme fermee : le lien entre les deux existe
+ * pour les technologies d'assistance avant l'ouverture, et `aria-expanded` dit
+ * son etat.
+ */
+class StPopoverTrigger {
+    element = inject(ElementRef).nativeElement;
+    stPopoverTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stPopoverTrigger" }] : /* istanbul ignore next */ []));
+    basculer() {
+        this.stPopoverTrigger().basculerDepuis(this.element);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StPopoverTrigger, isStandalone: true, selector: "[stPopoverTrigger]", inputs: { stPopoverTrigger: { classPropertyName: "stPopoverTrigger", publicName: "stPopoverTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "dialog" }, listeners: { "click": "basculer()" }, properties: { "attr.aria-expanded": "stPopoverTrigger().ouvert()", "attr.aria-controls": "stPopoverTrigger().identifiant" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPopoverTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stPopoverTrigger]',
+                    host: {
+                        'aria-haspopup': 'dialog',
+                        '[attr.aria-expanded]': 'stPopoverTrigger().ouvert()',
+                        '[attr.aria-controls]': 'stPopoverTrigger().identifiant',
+                        '(click)': 'basculer()',
+                    },
+                }]
+        }], propDecorators: { stPopoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "stPopoverTrigger", required: true }] }] } });
+
+/**
+ * @starterlib/ui/surfaces — ce qui se pose AU-DESSUS de la page.
+ *
+ * ⚠️ Un point d'entree separe pour une raison de dependance, et non de rangement :
+ * tout ce qui vit ici traine `@angular/cdk/overlay` et `@angular/cdk/portal`.
+ * Laisse dans le tronc, le CDK entrerait dans le train de singletons de CHAQUE
+ * application federee, y compris celles qui n'affichent ni menu ni dialogue.
+ *
+ * Le decoupage suit donc les pairs lourds, pas les familles de composants : un
+ * decoupage par famille multiplierait les points d'entree a tenir sans rien
+ * retirer de plus au chargement.
+ *
+ * ⚠️ En federation, ce point d'entree se partage SEPAREMENT de
+ * `@starterlib/ui` : c'est un specificateur de module distinct.
+ *
+ * ```ts
+ * import { StMenu, StDialog } from '@starterlib/ui/surfaces';
+ * ```
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IDENTIFIANT_DU_TITRE, StConfirmDialog, StDialog, StDialogActions, StDialogContainer, StDialogContent, StDialogTitle, StIdleWarning, StIdleWarningPanel, StMenu, StMenuItem, StMenuTrigger, StPopover, StPopoverTrigger, StToast, StToastContainer, StTooltip, StTooltipPanel };
+//# sourceMappingURL=starterlib-ui-surfaces.mjs.map