@starterlib/ui 0.8.0 → 0.9.1

package/fesm2022/starterlib-ui-navigation.mjs

@@ -1,246 +1,509 @@
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, Injector, input, computed, signal, viewChild, effect, DestroyRef, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
-import { RUPTURES } from '@starterlib/tokens';
-import { ST_LIBELLES } from '@starterlib/ui';
-
-/**
- * Au-dela, la navigation tient a cote du contenu. Meme seuil que `st-app-shell`,
- * lu dans les jetons : ecrit en dur ici, il avait deja diverge une fois de la
- * feuille (F7 du plan de la coquille).
- */
+import { BreakpointObserver } from "@angular/cdk/layout";
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, Injector, afterNextRender, booleanAttribute, computed, effect, inject, input, signal, viewChild } from "@angular/core";
+import { RUPTURES } from "@starterlib/tokens";
+import { ST_LIBELLES, ST_LOCALE, StIdentifiants, affichageDiffere } from "@starterlib/ui";
+import { RouterLink, RouterLinkActive } from "@angular/router";
 const ECRAN_LARGE = RUPTURES.lg.requete;
 let compteur = 0;
-/**
- * Navigation laterale : une region a cote du contenu sur grand ecran, un tiroir
- * sur petit ecran.
- *
- * ```html
- * <st-app-shell>
- *   <button entete stButton [stSidenavToggle]="navigation">Menu</button>
- *   <st-sidenav navigation #navigation etiquette="Navigation principale">
- *     <a routerLink="/comptes">Comptes</a>
- *   </st-sidenav>
- *   …
- * </st-app-shell>
- * ```
- *
- * ⚠️ **Deux modes, jamais confondus.** Persistante, c'est une REGION de la page :
- * aucun piege, rien a ouvrir. Modale, c'est un TIROIR, donc un `StDialog` — role,
- * piegeage du focus, Echap, retour du focus au bouton — et non une region
- * glissee par-dessus la page avec un peu de CSS, qui laisserait le clavier
- * parcourir la page cachee dessous.
- *
- * ⚠️ **Elle porte son propre `<nav>`, et un seul a la fois.** Sur petit ecran,
- * la region en ligne DISPARAIT quand le tiroir prend le relais : laissee en
- * place, elle resterait un repere de navigation vide, que le lecteur d'ecran
- * proposerait sans rien y trouver.
- *
- * Un lien suivi dans le tiroir le ferme : `StDialog` se ferme a toute navigation
- * du routeur.
- */
-class StSidenav {
-    // Capture a la construction : apres l'attente du module, le contexte
-    // d'injection n'existe plus, et `inject()` y leverait.
-    injecteur = inject(Injector);
-    libelles = inject(ST_LIBELLES);
-    /**
-     * Nom du repere. `null` : « Navigation principale », du dictionnaire. A
-     * renseigner des qu'une page compte deux navigations, qui doivent se
-     * distinguer.
-     */
-    etiquette = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
-    etiquetteLue = computed(() => this.etiquette() ?? this.libelles().navigationPrincipale, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
-    /** `auto` : persistante sur grand ecran, tiroir en dessous. */
-    mode = input('auto', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    identifiant = `st-sidenav-${(compteur += 1).toString()}`;
-    ecranLarge = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ecranLarge" }] : /* istanbul ignore next */ []));
-    /** Mode reellement applique. Lu par le bouton, qui ne s'affiche qu'en tiroir. */
-    modeEffectif = computed(() => {
-        const mode = this.mode();
-        if (mode !== 'auto')
-            return mode;
-        return this.ecranLarge() ? 'persistant' : 'modal';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "modeEffectif" }] : /* istanbul ignore next */ []));
-    ouvertInterne = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ouvertInterne" }] : /* istanbul ignore next */ []));
-    ouvert = this.ouvertInterne.asReadonly();
-    // Nomme autrement que la variable `#contenu` du gabarit, qui la masquerait.
-    gabarit = viewChild.required('contenu', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "gabarit" }] : /* istanbul ignore next */ []));
-    reference = null;
-    // Pose AVANT l'attente du module de surfaces : sans lui, deux clics rapides
-    // ouvriraient deux tiroirs, `this.reference` etant encore nul pendant le
-    // chargement.
-    ouvertureEnCours = false;
-    // Le composant peut disparaitre PENDANT l'attente — une navigation, un
-    // `@if` qui bascule. `fermer()` ne suffirait pas : il n'y a encore rien a
-    // fermer, et le tiroir se poserait apres coup, orphelin.
-    detruit = false;
-    /**
-     * Le service de dialogue, charge a la PREMIERE ouverture et garde ensuite.
-     * Rend `null` si le composant a ete detruit pendant l'attente.
-     *
-     * ⚠️ Le specificateur etant dans la carte d'importation de l'application
-     * federee, cet import dynamique resout vers l'INSTANCE PARTAGEE du point
-     * d'entree : le tiroir emploie le meme `StDialog`, le meme recouvrement et la
-     * meme pile que le reste de l'application. Un import dynamique ne dedouble
-     * rien ; il decale seulement le moment du telechargement.
-     *
-     * ⚠️ **Le controle de destruction est ICI, avant `injecteur.get`, et non chez
-     * l'appelant.** Un injecteur detruit ne rend pas `undefined` : il LEVE
-     * (NG0205). Le controle place apres la resolution du service arrivait donc
-     * trop tard, et une navigation pendant le chargement du module produisait un
-     * rejet non gere — invisible en developpement, remonte comme erreur
-     * applicative en production, puisque `basculer()` appelle `ouvrir()` sans
-     * attendre sa promesse.
-     */
-    async serviceDeDialogue() {
-        const { StDialog: classe } = await import('@starterlib/ui/surfaces');
-        if (this.detruit)
-            return null;
-        return this.injecteur.get(classe);
-    }
-    constructor() {
-        const abonnement = inject(BreakpointObserver)
-            .observe(ECRAN_LARGE)
-            .subscribe((etat) => {
-            this.ecranLarge.set(etat.matches);
-        });
-        // Un ecran qui s'elargit pendant que le tiroir est ouvert : la navigation
-        // redevient une region, et le tiroir n'a plus de raison d'etre.
-        effect(() => {
-            if (this.modeEffectif() === 'persistant')
-                this.fermer();
-        });
-        inject(DestroyRef).onDestroy(() => {
-            this.detruit = true;
-            abonnement.unsubscribe();
-            this.fermer();
-        });
-    }
-    /**
-     * Ouvre le tiroir. Asynchrone depuis la 0.8.0 : le module du dialogue se
-     * charge a la demande. La promesse est tenue quand le tiroir est a l'ecran —
-     * un test l'attend, l'appelant ordinaire n'a rien a en faire.
-     */
-    async ouvrir() {
-        if (this.modeEffectif() !== 'modal' || this.reference !== null)
-            return;
-        if (this.ouvertureEnCours)
-            return;
-        this.ouvertureEnCours = true;
-        try {
-            const dialogues = await this.serviceDeDialogue();
-            // `null` : le composant a disparu pendant l'attente. L'ecran a pu
-            // s'elargir aussi — ouvrir maintenant poserait un tiroir que plus rien ne
-            // fermerait.
-            if (dialogues === null || this.modeEffectif() !== 'modal')
-                return;
-            const reference = dialogues.ouvrir(this.gabarit(), {
-                cote: 'debut',
-                etiquette: this.etiquetteLue(),
-            });
-            this.reference = reference;
-            this.ouvertInterne.set(true);
-            void reference.ferme.then(() => {
-                if (this.reference !== reference)
-                    return;
-                this.reference = null;
-                this.ouvertInterne.set(false);
-            });
-        }
-        finally {
-            this.ouvertureEnCours = false;
-        }
-    }
-    fermer() {
-        const reference = this.reference;
-        if (reference === null)
-            return;
-        this.reference = null;
-        this.ouvertInterne.set(false);
-        reference.fermer();
-    }
-    /** Reste synchrone : c'est ce que lit la liaison de clic du bouton. */
-    basculer() {
-        if (this.ouvertInterne())
-            this.fermer();
-        else
-            void this.ouvrir();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSidenav, isStandalone: true, selector: "st-sidenav", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-mode": "modeEffectif()" }, classAttribute: "st-sidenav" }, viewQueries: [{ propertyName: "gabarit", first: true, predicate: ["contenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #contenu>\n  <nav class=\"st-sidenav__navigation\" [attr.id]=\"identifiant\" [attr.aria-label]=\"etiquetteLue()\">\n    <ng-content />\n  </nav>\n</ng-template>\n\n@if (modeEffectif() === 'persistant') {\n  <ng-container [ngTemplateOutlet]=\"contenu\" />\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}:host([data-mode=modal]){display:none}.st-sidenav__navigation{display:flex;flex-direction:column;gap:var(--st-espacement-1);padding:var(--st-espacement-4)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSidenav, decorators: [{
-            type: Component,
-            args: [{ selector: 'st-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: {
-                        class: 'st-sidenav',
-                        '[attr.data-mode]': 'modeEffectif()',
-                    }, template: "<ng-template #contenu>\n  <nav class=\"st-sidenav__navigation\" [attr.id]=\"identifiant\" [attr.aria-label]=\"etiquetteLue()\">\n    <ng-content />\n  </nav>\n</ng-template>\n\n@if (modeEffectif() === 'persistant') {\n  <ng-container [ngTemplateOutlet]=\"contenu\" />\n}\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}:host([data-mode=modal]){display:none}.st-sidenav__navigation{display:flex;flex-direction:column;gap:var(--st-espacement-1);padding:var(--st-espacement-4)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], gabarit: [{ type: i0.ViewChild, args: ['contenu', { isSignal: true }] }] } });
-
-/**
- * Bouton qui ouvre la navigation en tiroir.
- *
- * ⚠️ **Masque quand la navigation est persistante.** Un bouton « Menu » qui ne
- * fait rien, parce que la navigation est deja affichee a cote, est un arret de
- * tabulation inutile et une promesse non tenue.
- *
- * ⚠️ `aria-expanded` suit l'ouverture du tiroir : sans lui, rien ne dit a qui
- * n'en voit pas l'effet que le bouton a agi.
- */
-class StSidenavToggle {
-    stSidenavToggle = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "stSidenavToggle" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSidenavToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StSidenavToggle, isStandalone: true, selector: "[stSidenavToggle]", inputs: { stSidenavToggle: { classPropertyName: "stSidenavToggle", publicName: "stSidenavToggle", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "dialog" }, listeners: { "click": "stSidenavToggle().basculer()" }, properties: { "attr.aria-expanded": "stSidenavToggle().ouvert()", "attr.hidden": "stSidenavToggle().modeEffectif() === \"modal\" ? null : \"\"" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSidenavToggle, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[stSidenavToggle]',
-                    host: {
-                        'aria-haspopup': 'dialog',
-                        '[attr.aria-expanded]': 'stSidenavToggle().ouvert()',
-                        '[attr.hidden]': 'stSidenavToggle().modeEffectif() === "modal" ? null : ""',
-                        '(click)': 'stSidenavToggle().basculer()',
-                    },
-                }]
-        }], propDecorators: { stSidenavToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "stSidenavToggle", required: true }] }] } });
-
-/**
- * @starterlib/ui/navigation — la navigation laterale : region a cote du
- * contenu sur grand ecran, tiroir sur petit ecran.
- *
- * ⚠️ Detache de `@starterlib/ui/interactions`, qui agregeait quatre familles
- * derriere UN specificateur (ADR 0031, decision 2). La coquille n'y voulait
- * que `StSidenav`, qui n'a besoin que d'`@angular/cdk/layout` — un observateur
- * de rupture, quelques centaines d'octets —, et payait au passage tout
- * `@angular/aria` amene par les onglets, la selection et l'arbre.
- *
- * Pair lourd de ce point d'entree, et le seul : `@angular/cdk/layout`.
- * L'ouverture du tiroir charge `@starterlib/ui/surfaces` A LA DEMANDE : le
- * dialogue n'est plus une arete statique du chemin de peinture (ADR 0031,
- * decision 3).
- *
- * ⚠️ En federation, ce point d'entree se partage SEPAREMENT : c'est un
- * specificateur de module distinct.
- *
- * ```ts
- * import { StSidenav, StSidenavToggle } from '@starterlib/ui/navigation';
- * ```
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
+var StSidenav = class StSidenav {
+	injecteur = inject(Injector);
+	libelles = inject(ST_LIBELLES);
+	etiquette = input(null, ...ngDevMode ? [{ debugName: "etiquette" }] : 	/* istanbul ignore next */ []);
+	etiquetteLue = computed(() => this.etiquette() ?? this.libelles().navigationPrincipale, ...ngDevMode ? [{ debugName: "etiquetteLue" }] : 	/* istanbul ignore next */ []);
+	mode = input("auto", ...ngDevMode ? [{ debugName: "mode" }] : 	/* istanbul ignore next */ []);
+	identifiant = `st-sidenav-${(compteur += 1).toString()}`;
+	ecranLarge = signal(false, ...ngDevMode ? [{ debugName: "ecranLarge" }] : 	/* istanbul ignore next */ []);
+	modeEffectif = computed(() => {
+		const mode = this.mode();
+		if (mode !== "auto") return mode;
+		return this.ecranLarge() ? "persistant" : "modal";
+	}, ...ngDevMode ? [{ debugName: "modeEffectif" }] : 	/* istanbul ignore next */ []);
+	ouvertInterne = signal(false, ...ngDevMode ? [{ debugName: "ouvertInterne" }] : 	/* istanbul ignore next */ []);
+	ouvert = this.ouvertInterne.asReadonly();
+	chargementDuTiroir = signal(false, ...ngDevMode ? [{ debugName: "chargementDuTiroir" }] : 	/* istanbul ignore next */ []);
+	enAttente = affichageDiffere(() => this.chargementDuTiroir(), { tenue: 0 });
+	gabarit = viewChild.required("contenu", ...ngDevMode ? [{ debugName: "gabarit" }] : 	/* istanbul ignore next */ []);
+	reference = null;
+	ouvertureEnCours = false;
+	detruit = false;
+	async serviceDeDialogue() {
+		const { StDialog: classe } = await import("@starterlib/ui/surfaces");
+		if (this.detruit) return null;
+		return this.injecteur.get(classe);
+	}
+	constructor() {
+		const abonnement = inject(BreakpointObserver).observe(ECRAN_LARGE).subscribe((etat) => {
+			this.ecranLarge.set(etat.matches);
+		});
+		effect(() => {
+			if (this.modeEffectif() !== "modal") this.fermer();
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.detruit = true;
+			abonnement.unsubscribe();
+			this.fermer();
+		});
+	}
+	async ouvrir() {
+		if (this.modeEffectif() !== "modal" || this.reference !== null) return;
+		if (this.ouvertureEnCours) return;
+		this.ouvertureEnCours = true;
+		this.chargementDuTiroir.set(true);
+		try {
+			const dialogues = await this.serviceDeDialogue();
+			if (dialogues === null || this.modeEffectif() !== "modal") return;
+			const reference = dialogues.ouvrir(this.gabarit(), {
+				cote: "debut",
+				etiquette: this.etiquetteLue()
+			});
+			this.reference = reference;
+			this.ouvertInterne.set(true);
+			reference.ferme.then(() => {
+				if (this.reference !== reference) return;
+				this.reference = null;
+				this.ouvertInterne.set(false);
+			});
+		} finally {
+			this.ouvertureEnCours = false;
+			this.chargementDuTiroir.set(false);
+		}
+	}
+	fermer() {
+		const reference = this.reference;
+		if (reference === null) return;
+		this.reference = null;
+		this.ouvertInterne.set(false);
+		reference.fermer();
+	}
+	basculer() {
+		if (this.ouvertInterne()) this.fermer();
+		else this.ouvrir();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StSidenav,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: StSidenav,
+		isStandalone: true,
+		selector: "st-sidenav",
+		inputs: {
+			etiquette: {
+				classPropertyName: "etiquette",
+				publicName: "etiquette",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "attr.data-mode": "modeEffectif()" },
+			classAttribute: "st-sidenav"
+		},
+		viewQueries: [{
+			propertyName: "gabarit",
+			first: true,
+			predicate: ["contenu"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-template #contenu>\n  <nav class=\"st-sidenav__navigation\" [attr.id]=\"identifiant\" [attr.aria-label]=\"etiquetteLue()\">\n    <ng-content />\n  </nav>\n</ng-template>\n\n<!-- En colonne comme en rail (reserve, lot 235), la navigation est une region de la page. -->\n@if (modeEffectif() !== 'modal') {\n  <ng-container [ngTemplateOutlet]=\"contenu\" />\n}\n",
+		styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}:host([data-mode=modal]){display:none}.st-sidenav__navigation{display:flex;flex-direction:column;gap:var(--st-espacement-1);padding:var(--st-espacement-4)}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StSidenav,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "st-sidenav",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [NgTemplateOutlet],
+			host: {
+				class: "st-sidenav",
+				"[attr.data-mode]": "modeEffectif()"
+			},
+			template: "<ng-template #contenu>\n  <nav class=\"st-sidenav__navigation\" [attr.id]=\"identifiant\" [attr.aria-label]=\"etiquetteLue()\">\n    <ng-content />\n  </nav>\n</ng-template>\n\n<!-- En colonne comme en rail (reserve, lot 235), la navigation est une region de la page. -->\n@if (modeEffectif() !== 'modal') {\n  <ng-container [ngTemplateOutlet]=\"contenu\" />\n}\n",
+			styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}:host([data-mode=modal]){display:none}.st-sidenav__navigation{display:flex;flex-direction:column;gap:var(--st-espacement-1);padding:var(--st-espacement-4)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		etiquette: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "etiquette",
+				required: false
+			}]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		gabarit: [{
+			type: i0.ViewChild,
+			args: ["contenu", { isSignal: true }]
+		}]
+	}
+});
+var StSidenavToggle = class StSidenavToggle {
+	stSidenavToggle = input.required(...ngDevMode ? [{ debugName: "stSidenavToggle" }] : 	/* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StSidenavToggle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: StSidenavToggle,
+		isStandalone: true,
+		selector: "[stSidenavToggle]",
+		inputs: { stSidenavToggle: {
+			classPropertyName: "stSidenavToggle",
+			publicName: "stSidenavToggle",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "aria-haspopup": "dialog" },
+			listeners: { "click": "stSidenavToggle().basculer()" },
+			properties: {
+				"attr.aria-expanded": "stSidenavToggle().ouvert()",
+				"attr.aria-busy": "stSidenavToggle().enAttente() ? \"true\" : null",
+				"attr.hidden": "stSidenavToggle().modeEffectif() === \"modal\" ? null : \"\""
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StSidenavToggle,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[stSidenavToggle]",
+			host: {
+				"aria-haspopup": "dialog",
+				"[attr.aria-expanded]": "stSidenavToggle().ouvert()",
+				"[attr.aria-busy]": "stSidenavToggle().enAttente() ? \"true\" : null",
+				"[attr.hidden]": "stSidenavToggle().modeEffectif() === \"modal\" ? null : \"\"",
+				"(click)": "stSidenavToggle().basculer()"
+			}
+		}]
+	}],
+	propDecorators: { stSidenavToggle: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "stSidenavToggle",
+			required: true
+		}]
+	}] }
+});
+var StNavTabs = class StNavTabs {
+	locale = inject(ST_LOCALE);
+	formatDesComptes = computed(() => new Intl.NumberFormat(this.locale()), ...ngDevMode ? [{ debugName: "formatDesComptes" }] : 	/* istanbul ignore next */ []);
+	onglets = input.required(...ngDevMode ? [{ debugName: "onglets" }] : 	/* istanbul ignore next */ []);
+	etiquette = input.required(...ngDevMode ? [{ debugName: "etiquette" }] : 	/* istanbul ignore next */ []);
+	compteDe(compte) {
+		return this.formatDesComptes().format(compte);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StNavTabs,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: StNavTabs,
+		isStandalone: true,
+		selector: "st-nav-tabs",
+		inputs: {
+			onglets: {
+				classPropertyName: "onglets",
+				publicName: "onglets",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			etiquette: {
+				classPropertyName: "etiquette",
+				publicName: "etiquette",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "st-nav-tabs" },
+		ngImport: i0,
+		template: "<nav class=\"st-nav-tabs__nav\" [attr.aria-label]=\"etiquette()\">\n  <!-- `role=\"list\"` : sans puces, Safari ne lit plus une liste comme une liste. -->\n  <ul class=\"st-nav-tabs__liste\" role=\"list\">\n    @for (onglet of onglets(); track $index) {\n      <li class=\"st-nav-tabs__element\">\n        <a\n          class=\"st-nav-tabs__lien\"\n          routerLinkActive=\"st-nav-tabs__lien--actif\"\n          ariaCurrentWhenActive=\"page\"\n          [routerLink]=\"onglet.lien\"\n          [routerLinkActiveOptions]=\"{ exact: onglet.exact ?? false }\"\n        >\n          <span class=\"st-nav-tabs__libelle\">{{ onglet.libelle }}</span>\n          @if (onglet.compte !== undefined && onglet.compte !== null) {\n            <!-- Comme st-tabs : le compte entre dans le NOM par un texte lecteur-seul\n                 (« Documents, 3 ») ; la pastille, collee au libelle, est muette. -->\n            <span class=\"st-vh\">, {{ compteDe(onglet.compte) }}</span>\n            <span class=\"st-nav-tabs__compte\" aria-hidden=\"true\">{{\n              compteDe(onglet.compte)\n            }}</span>\n          }\n        </a>\n      </li>\n    }\n  </ul>\n</nav>\n",
+		styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;min-inline-size:0}.st-nav-tabs__liste{display:flex;gap:var(--st-espacement-4);align-items:center;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--st-espacement-4);list-style:none;scrollbar-width:thin;background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left center/var(--st-espacement-10) 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right center/var(--st-espacement-10) 100% no-repeat local,radial-gradient(farthest-side at 0 50%,var(--st-couleur-ombre),transparent) left center/var(--st-espacement-3) 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,var(--st-couleur-ombre),transparent) right center/var(--st-espacement-3) 100% no-repeat scroll;box-shadow:inset 0 calc(-1 * var(--st-epaisseur-capillaire)) 0 0 var(--st-couleur-bordure)}.st-nav-tabs__element{flex:none}.st-nav-tabs__lien:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:calc(-1 * var(--st-focus-epaisseur))}.st-nav-tabs__lien{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-normal);position:relative;display:flex;gap:var(--st-espacement-1);align-items:center;min-block-size:max(var(--st-hauteur-commande-defaut),var(--st-cible-tactile-min));padding-block:0;padding-inline:var(--st-espacement-4);color:var(--st-couleur-texte-discret);text-decoration:none;white-space:nowrap;scroll-snap-align:start;transition:color var(--st-duree-rapide) var(--st-courbe-standard),background-color var(--st-duree-rapide) var(--st-courbe-standard)}@media(hover:hover){.st-nav-tabs__lien:hover:not([aria-current=page],:active){color:var(--st-couleur-texte);background-color:color-mix(in srgb,var(--st-couleur-surface-conteneur-bas) 70%,transparent);border-start-start-radius:var(--st-rayon-sm);border-start-end-radius:var(--st-rayon-sm)}}.st-nav-tabs__lien:active{color:var(--st-couleur-texte);background-color:var(--st-couleur-surface-active);border-start-start-radius:var(--st-rayon-sm);border-start-end-radius:var(--st-rayon-sm)}.st-nav-tabs__lien[aria-current=page]{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-primaire);background-color:var(--st-couleur-surface-conteneur-bas);border-start-start-radius:var(--st-rayon-sm);border-start-end-radius:var(--st-rayon-sm)}.st-nav-tabs__lien[aria-current=page]:after{position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--st-epaisseur-capillaire));block-size:var(--st-epaisseur-forte);content:\"\";background-color:var(--st-couleur-bordure-selection);forced-color-adjust:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}.st-nav-tabs__compte{margin-inline-start:var(--st-espacement-1-5);padding-block:var(--st-espacement-demi);padding-inline:var(--st-espacement-2);font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);font-variant-numeric:var(--st-chiffres-alignes);letter-spacing:var(--st-interlettrage-capitales);color:var(--st-couleur-texte-discret);background-color:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}@media(forced-colors:active){.st-nav-tabs__liste{border-block-end:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure)}.st-nav-tabs__compte{border:var(--st-epaisseur-fine) solid CanvasText}}@media print{.st-nav-tabs__liste{flex-wrap:wrap;overflow:visible;background:none;border-block-end:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure);box-shadow:none}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: RouterLink,
+			selector: "[routerLink]",
+			inputs: [
+				"target",
+				"queryParams",
+				"fragment",
+				"queryParamsHandling",
+				"state",
+				"info",
+				"relativeTo",
+				"preserveFragment",
+				"skipLocationChange",
+				"replaceUrl",
+				"browserUrl",
+				"routerLink"
+			]
+		}, {
+			kind: "directive",
+			type: RouterLinkActive,
+			selector: "[routerLinkActive]",
+			inputs: [
+				"routerLinkActiveOptions",
+				"ariaCurrentWhenActive",
+				"routerLinkActive"
+			],
+			outputs: ["isActiveChange"],
+			exportAs: ["routerLinkActive"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StNavTabs,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "st-nav-tabs",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [RouterLink, RouterLinkActive],
+			host: { class: "st-nav-tabs" },
+			template: "<nav class=\"st-nav-tabs__nav\" [attr.aria-label]=\"etiquette()\">\n  <!-- `role=\"list\"` : sans puces, Safari ne lit plus une liste comme une liste. -->\n  <ul class=\"st-nav-tabs__liste\" role=\"list\">\n    @for (onglet of onglets(); track $index) {\n      <li class=\"st-nav-tabs__element\">\n        <a\n          class=\"st-nav-tabs__lien\"\n          routerLinkActive=\"st-nav-tabs__lien--actif\"\n          ariaCurrentWhenActive=\"page\"\n          [routerLink]=\"onglet.lien\"\n          [routerLinkActiveOptions]=\"{ exact: onglet.exact ?? false }\"\n        >\n          <span class=\"st-nav-tabs__libelle\">{{ onglet.libelle }}</span>\n          @if (onglet.compte !== undefined && onglet.compte !== null) {\n            <!-- Comme st-tabs : le compte entre dans le NOM par un texte lecteur-seul\n                 (« Documents, 3 ») ; la pastille, collee au libelle, est muette. -->\n            <span class=\"st-vh\">, {{ compteDe(onglet.compte) }}</span>\n            <span class=\"st-nav-tabs__compte\" aria-hidden=\"true\">{{\n              compteDe(onglet.compte)\n            }}</span>\n          }\n        </a>\n      </li>\n    }\n  </ul>\n</nav>\n",
+			styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block;min-inline-size:0}.st-nav-tabs__liste{display:flex;gap:var(--st-espacement-4);align-items:center;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--st-espacement-4);list-style:none;scrollbar-width:thin;background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left center/var(--st-espacement-10) 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right center/var(--st-espacement-10) 100% no-repeat local,radial-gradient(farthest-side at 0 50%,var(--st-couleur-ombre),transparent) left center/var(--st-espacement-3) 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,var(--st-couleur-ombre),transparent) right center/var(--st-espacement-3) 100% no-repeat scroll;box-shadow:inset 0 calc(-1 * var(--st-epaisseur-capillaire)) 0 0 var(--st-couleur-bordure)}.st-nav-tabs__element{flex:none}.st-nav-tabs__lien:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:calc(-1 * var(--st-focus-epaisseur))}.st-nav-tabs__lien{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-normal);position:relative;display:flex;gap:var(--st-espacement-1);align-items:center;min-block-size:max(var(--st-hauteur-commande-defaut),var(--st-cible-tactile-min));padding-block:0;padding-inline:var(--st-espacement-4);color:var(--st-couleur-texte-discret);text-decoration:none;white-space:nowrap;scroll-snap-align:start;transition:color var(--st-duree-rapide) var(--st-courbe-standard),background-color var(--st-duree-rapide) var(--st-courbe-standard)}@media(hover:hover){.st-nav-tabs__lien:hover:not([aria-current=page],:active){color:var(--st-couleur-texte);background-color:color-mix(in srgb,var(--st-couleur-surface-conteneur-bas) 70%,transparent);border-start-start-radius:var(--st-rayon-sm);border-start-end-radius:var(--st-rayon-sm)}}.st-nav-tabs__lien:active{color:var(--st-couleur-texte);background-color:var(--st-couleur-surface-active);border-start-start-radius:var(--st-rayon-sm);border-start-end-radius:var(--st-rayon-sm)}.st-nav-tabs__lien[aria-current=page]{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-primaire);background-color:var(--st-couleur-surface-conteneur-bas);border-start-start-radius:var(--st-rayon-sm);border-start-end-radius:var(--st-rayon-sm)}.st-nav-tabs__lien[aria-current=page]:after{position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--st-epaisseur-capillaire));block-size:var(--st-epaisseur-forte);content:\"\";background-color:var(--st-couleur-bordure-selection);forced-color-adjust:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}.st-nav-tabs__compte{margin-inline-start:var(--st-espacement-1-5);padding-block:var(--st-espacement-demi);padding-inline:var(--st-espacement-2);font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);font-variant-numeric:var(--st-chiffres-alignes);letter-spacing:var(--st-interlettrage-capitales);color:var(--st-couleur-texte-discret);background-color:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}@media(forced-colors:active){.st-nav-tabs__liste{border-block-end:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure)}.st-nav-tabs__compte{border:var(--st-epaisseur-fine) solid CanvasText}}@media print{.st-nav-tabs__liste{flex-wrap:wrap;overflow:visible;background:none;border-block-end:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure);box-shadow:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		onglets: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "onglets",
+				required: true
+			}]
+		}],
+		etiquette: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "etiquette",
+				required: true
+			}]
+		}]
+	}
+});
+const TITRES = "h1, h2, h3, h4, h5, h6";
+var StPageNav = class StPageNav {
+	document = inject(DOCUMENT);
+	libelles = inject(ST_LIBELLES);
+	entrees = input.required(...ngDevMode ? [{ debugName: "entrees" }] : 	/* istanbul ignore next */ []);
+	etiquette = input(null, ...ngDevMode ? [{ debugName: "etiquette" }] : 	/* istanbul ignore next */ []);
+	collee = input(true, {
+		...ngDevMode ? { debugName: "collee" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	nom = computed(() => this.etiquette() ?? this.libelles().sommaire, ...ngDevMode ? [{ debugName: "nom" }] : 	/* istanbul ignore next */ []);
+	idDuTitre = inject(StIdentifiants).prochain("st-page-nav");
+	courante = signal(null, ...ngDevMode ? [{ debugName: "courante" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		const destruction = inject(DestroyRef);
+		let observateur = null;
+		const visibles = /* @__PURE__ */ new Set();
+		const observer = () => {
+			observateur?.disconnect();
+			visibles.clear();
+			const vue = this.document.defaultView;
+			if (vue === null || typeof vue.IntersectionObserver !== "function") return;
+			observateur = new vue.IntersectionObserver((changements) => {
+				for (const changement of changements) {
+					const id = changement.target.id;
+					if (changement.isIntersecting) visibles.add(id);
+					else visibles.delete(id);
+				}
+				const premiere = this.entrees().find((entree) => visibles.has(entree.cible));
+				if (premiere !== void 0) this.courante.set(premiere.cible);
+			}, { rootMargin: "0px 0px -60% 0px" });
+			for (const entree of this.entrees()) {
+				const cible = this.document.getElementById(entree.cible);
+				if (cible !== null) observateur.observe(cible);
+			}
+		};
+		afterNextRender(() => {
+			observer();
+		});
+		effect(() => {
+			this.entrees();
+			observer();
+		});
+		destruction.onDestroy(() => {
+			observateur?.disconnect();
+		});
+	}
+	aller(evenement, cible) {
+		const section = this.document.getElementById(cible);
+		if (section === null) return;
+		evenement.preventDefault();
+		const titre = section.matches(TITRES) ? section : section.querySelector(TITRES) ?? section;
+		if (!titre.hasAttribute("tabindex")) titre.setAttribute("tabindex", "-1");
+		section.scrollIntoView({ block: "start" });
+		titre.focus({ preventScroll: true });
+		this.courante.set(cible);
+		this.document.defaultView?.history.replaceState(null, "", `#${cible}`);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: StPageNav,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: StPageNav,
+		isStandalone: true,
+		selector: "st-page-nav",
+		inputs: {
+			entrees: {
+				classPropertyName: "entrees",
+				publicName: "entrees",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			etiquette: {
+				classPropertyName: "etiquette",
+				publicName: "etiquette",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collee: {
+				classPropertyName: "collee",
+				publicName: "collee",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "attr.data-collee": "collee() ? \"\" : null" },
+			classAttribute: "st-page-nav"
+		},
+		ngImport: i0,
+		template: "<!-- Le titre visible nomme la navigation (relecture du lot 245) : on voit ce qu'est la colonne. -->\n<nav class=\"st-page-nav__nav\" [attr.aria-labelledby]=\"idDuTitre\">\n  <p class=\"st-page-nav__titre\" [id]=\"idDuTitre\">{{ nom() }}</p>\n  <ol class=\"st-page-nav__liste\" role=\"list\">\n    @for (entree of entrees(); track entree.cible) {\n      <li class=\"st-page-nav__element\">\n        <a\n          class=\"st-page-nav__lien\"\n          [attr.href]=\"'#' + entree.cible\"\n          [attr.aria-current]=\"courante() === entree.cible ? 'location' : null\"\n          (click)=\"aller($event, entree.cible)\"\n          >{{ entree.libelle }}</a\n        >\n      </li>\n    }\n  </ol>\n</nav>\n",
+		styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}@media(min-width:64rem){:host([data-collee]){position:sticky;inset-block-start:calc(var(--st-hauteur-entete, 0px) + var(--st-espacement-6));align-self:start}}.st-page-nav__titre{font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);letter-spacing:var(--st-interlettrage-capitales);text-transform:uppercase;margin:0 0 var(--st-espacement-2);padding-inline-start:calc(var(--st-espacement-4) + var(--st-epaisseur-fine));color:var(--st-couleur-texte-discret)}.st-page-nav__liste{display:grid;padding:0;margin:0;list-style:none;border-inline-start:var(--st-epaisseur-fine) solid var(--st-couleur-bordure)}.st-page-nav__lien:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-page-nav__lien{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-normal);display:flex;align-items:center;min-block-size:var(--st-cible-tactile-min);padding-inline:var(--st-espacement-4) var(--st-espacement-2);margin-inline-start:calc(-1 * var(--st-epaisseur-fine));color:var(--st-couleur-texte-discret);text-decoration:none;border-inline-start:var(--st-epaisseur-forte) solid transparent}@media(hover:hover){.st-page-nav__lien:hover{color:var(--st-couleur-texte);border-inline-start-color:var(--st-couleur-bordure-forte)}}.st-page-nav__lien[aria-current=location]{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-primaire);border-inline-start-color:var(--st-couleur-bordure-selection)}@media(forced-colors:active){.st-page-nav__lien[aria-current=location]{border-inline-start-color:Highlight}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: StPageNav,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "st-page-nav",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "st-page-nav",
+				"[attr.data-collee]": "collee() ? \"\" : null"
+			},
+			template: "<!-- Le titre visible nomme la navigation (relecture du lot 245) : on voit ce qu'est la colonne. -->\n<nav class=\"st-page-nav__nav\" [attr.aria-labelledby]=\"idDuTitre\">\n  <p class=\"st-page-nav__titre\" [id]=\"idDuTitre\">{{ nom() }}</p>\n  <ol class=\"st-page-nav__liste\" role=\"list\">\n    @for (entree of entrees(); track entree.cible) {\n      <li class=\"st-page-nav__element\">\n        <a\n          class=\"st-page-nav__lien\"\n          [attr.href]=\"'#' + entree.cible\"\n          [attr.aria-current]=\"courante() === entree.cible ? 'location' : null\"\n          (click)=\"aller($event, entree.cible)\"\n          >{{ entree.libelle }}</a\n        >\n      </li>\n    }\n  </ol>\n</nav>\n",
+			styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}@media(min-width:64rem){:host([data-collee]){position:sticky;inset-block-start:calc(var(--st-hauteur-entete, 0px) + var(--st-espacement-6));align-self:start}}.st-page-nav__titre{font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);letter-spacing:var(--st-interlettrage-capitales);text-transform:uppercase;margin:0 0 var(--st-espacement-2);padding-inline-start:calc(var(--st-espacement-4) + var(--st-epaisseur-fine));color:var(--st-couleur-texte-discret)}.st-page-nav__liste{display:grid;padding:0;margin:0;list-style:none;border-inline-start:var(--st-epaisseur-fine) solid var(--st-couleur-bordure)}.st-page-nav__lien:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-page-nav__lien{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-normal);display:flex;align-items:center;min-block-size:var(--st-cible-tactile-min);padding-inline:var(--st-espacement-4) var(--st-espacement-2);margin-inline-start:calc(-1 * var(--st-epaisseur-fine));color:var(--st-couleur-texte-discret);text-decoration:none;border-inline-start:var(--st-epaisseur-forte) solid transparent}@media(hover:hover){.st-page-nav__lien:hover{color:var(--st-couleur-texte);border-inline-start-color:var(--st-couleur-bordure-forte)}}.st-page-nav__lien[aria-current=location]{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-primaire);border-inline-start-color:var(--st-couleur-bordure-selection)}@media(forced-colors:active){.st-page-nav__lien[aria-current=location]{border-inline-start-color:Highlight}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		entrees: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "entrees",
+				required: true
+			}]
+		}],
+		etiquette: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "etiquette",
+				required: false
+			}]
+		}],
+		collee: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collee",
+				required: false
+			}]
+		}]
+	}
+});
+export { StNavTabs, StPageNav, StSidenav, StSidenavToggle };
 
-export { StSidenav, StSidenavToggle };
-//# sourceMappingURL=starterlib-ui-navigation.mjs.map
+//# sourceMappingURL=starterlib-ui-navigation.mjs.map