@starterlib/ui 0.10.14 → 0.11.1

package/styles/amorce.css

@@ -14,7 +14,13 @@
 
    Elle reprend la mise en page de st-splash-screen (variante clair) : le passage de
    l'une a l'autre ne fait pas sauter le nom. Les jetons sont lus s'ils sont charges
-   (starter-tokens.css, AVANT cette feuille), avec des replis systeme sinon. */
+   (starter-tokens.css, AVANT cette feuille), avec des replis systeme sinon.
+
+   Parties FACULTATIVES (0.11.1), celles d'un ecran de demarrage : la tuile du symbole (un
+   SVG EN LIGNE de l'hote, jamais une image chargee), le sous-titre de la marque et le pied ;
+   le surtitre, la scene (la tuile devant un decor, SVG en ligne de l'hote lui aussi) et la
+   pastille du bas de page. La variante `st-amorce--ample` en fait l'ecran de demarrage d'une
+   marque qui tient tout l'ecran. Sans elles, l'amorce est celle d'avant. */
 
 .st-amorce {
   position: fixed;
@@ -40,8 +46,29 @@
   background-color: var(--st-couleur-primaire, CanvasText);
 }
 
+/* La tuile du symbole, comme celle de l'ecran de demarrage : 48 px, le symbole a 32. */
+.st-amorce__tuile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--st-espacement-12, 3rem);
+  block-size: var(--st-espacement-12, 3rem);
+  margin-block-end: var(--st-espacement-2, 0.5rem);
+  color: var(--st-couleur-texte-primaire, CanvasText);
+  background-color: var(--st-couleur-surface-conteneur-bas, Canvas);
+  border: var(--st-epaisseur-fine, 1px) solid var(--st-couleur-surface-enfoncee, CanvasText);
+  border-radius: var(--st-rayon-lg, 0.75rem);
+  box-shadow: var(--st-ombre-repos, none);
+}
+
+.st-amorce__tuile > svg {
+  inline-size: var(--st-espacement-8, 2rem);
+  block-size: var(--st-espacement-8, 2rem);
+}
+
 .st-amorce__nom {
   margin: 0;
+  font-family: var(--st-police-titre, inherit);
   font-size: var(--st-taille-lg, 1.125rem);
   font-weight: var(--st-graisse-semi, 600);
   line-height: var(--st-interligne-md, 1.5rem);
@@ -56,10 +83,285 @@
   color: var(--st-couleur-texte-discret, CanvasText);
 }
 
+/* Le sous-titre de la marque, sous le nom : capitales discretes a l'encre primaire. */
+.st-amorce__sous-titre {
+  margin: var(--st-espacement-demi, 0.125rem) 0 0;
+  font-size: var(--st-taille-2xs, 0.6875rem);
+  font-weight: var(--st-graisse-moyenne, 500);
+  line-height: var(--st-interligne-2xs, 1rem);
+  letter-spacing: var(--st-interlettrage-surtitre, 0.08em);
+  color: var(--st-couleur-texte-primaire, CanvasText);
+  text-transform: uppercase;
+}
+
+/* Le surtitre, au-dessus du symbole : capitales espacees entre deux points d'accent. */
+.st-amorce__surtitre {
+  display: flex;
+  align-items: center;
+  gap: var(--st-espacement-2, 0.5rem);
+  margin: 0 0 var(--st-espacement-4, 1rem);
+  font-size: var(--st-taille-2xs, 0.6875rem);
+  font-weight: var(--st-graisse-moyenne, 500);
+  line-height: var(--st-interligne-2xs, 1rem);
+  letter-spacing: var(--st-interlettrage-surtitre, 0.1em);
+  color: var(--st-couleur-texte-discret, CanvasText);
+  text-transform: uppercase;
+}
+
+.st-amorce__surtitre::before,
+.st-amorce__surtitre::after {
+  inline-size: var(--st-espacement-1-5, 0.375rem);
+  block-size: var(--st-espacement-1-5, 0.375rem);
+  content: '';
+  background-color: var(--st-couleur-accent, CanvasText);
+  border-radius: var(--st-rayon-pleine, 50%);
+}
+
+/* La scene : la tuile au centre d'un carre de 256 px (288 depuis md en ample), devant le decor
+   que l'hote dessine en SVG en ligne (cercles, axes, points), decoratif, a l'encre attenuee. */
+.st-amorce__scene {
+  position: relative;
+  display: grid;
+  place-items: center;
+  inline-size: 16rem;
+  block-size: 16rem;
+}
+
+.st-amorce__scene > .st-amorce__tuile {
+  position: relative;
+  margin: 0;
+}
+
+.st-amorce__decor {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  color: color-mix(in srgb, var(--st-couleur-primaire-attenue, GrayText) 70%, transparent);
+}
+
+/* La pastille du bas de page : un point de succes, puis des mentions courtes (l'hote les
+   separe d'un point median tu au lecteur d'ecran). */
+.st-amorce__pastille {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--st-espacement-1, 0.25rem) var(--st-espacement-2, 0.5rem);
+  max-inline-size: 32rem;
+  margin: var(--st-espacement-6, 1.5rem) 0 0;
+  padding: var(--st-espacement-2, 0.5rem) var(--st-espacement-4, 1rem);
+  font-size: var(--st-taille-2xs, 0.6875rem);
+  font-weight: var(--st-graisse-moyenne, 500);
+  line-height: var(--st-interligne-2xs, 1rem);
+  letter-spacing: var(--st-interlettrage-capitales, 0.05em);
+  color: var(--st-couleur-texte-discret, CanvasText);
+  background-color: color-mix(in srgb, var(--st-couleur-surface, Canvas) 80%, transparent);
+  border-radius: var(--st-rayon-lg, 0.75rem);
+  box-shadow: var(--st-ombre-repos, none);
+}
+
+.st-amorce__pastille::before {
+  inline-size: var(--st-espacement-2, 0.5rem);
+  block-size: var(--st-espacement-2, 0.5rem);
+  content: '';
+  background-color: var(--st-couleur-succes, CanvasText);
+  border-radius: var(--st-rayon-pleine, 50%);
+}
+
+/* Le separateur que l'hote tait au lecteur d'ecran, plus pale que les mentions ; pose a la fin de la
+   mention qu'il suit, il ne commence jamais une ligne, et l'ecart de la pastille le suit. */
+.st-amorce__pastille [aria-hidden='true'] {
+  margin-inline-start: var(--st-espacement-2, 0.5rem);
+  color: var(--st-couleur-texte-desactive, GrayText);
+}
+
+/* Ample : l'ecran de demarrage d'une marque qui tient tout l'ecran (recette d'Aplomb du
+   2026-10-07). Fond en degrade et halos, sans liseret ; le bloc central pose sur la pastille,
+   l'espace libre au-dessus ; tuile encadree a fond primaire (le symbole de l'hote s'y dessine
+   en clair), nom a l'encre primaire la plus profonde, sous-titre en phrase, statut sur un filet
+   en degrade. */
+.st-amorce--ample {
+  justify-content: flex-start;
+  overflow-y: auto;
+  padding-block-end: var(--st-espacement-12, 3rem);
+  background-color: var(--st-couleur-surface-conteneur-bas, Canvas);
+  background-image:
+    radial-gradient(
+      circle 16rem at 50% 4rem,
+      color-mix(in srgb, var(--st-couleur-primaire-attenue, Canvas) 55%, transparent),
+      transparent
+    ),
+    radial-gradient(
+      circle 12rem at 50% calc(100% - 12rem),
+      color-mix(in srgb, var(--st-couleur-accent, Canvas) 5%, transparent),
+      transparent
+    ),
+    radial-gradient(
+      ellipse at top,
+      var(--st-couleur-primaire-discret, Canvas),
+      var(--st-couleur-surface-conteneur-bas, Canvas) 50%
+    );
+}
+
+.st-amorce--ample::before {
+  display: none;
+}
+
+.st-amorce--ample > :first-child {
+  margin-block-start: auto;
+}
+
+.st-amorce--ample .st-amorce__surtitre {
+  margin-block-end: var(--st-espacement-8, 2rem);
+}
+
+.st-amorce--ample .st-amorce__tuile {
+  inline-size: 9rem;
+  block-size: 9rem;
+  padding: var(--st-espacement-2, 0.5rem);
+  margin-block-end: var(--st-espacement-6, 1.5rem);
+  background-color: var(--st-couleur-surface, Canvas);
+  border: 0;
+  border-radius: var(--st-rayon-lg, 0.75rem);
+  box-shadow: var(--st-ombre-flottante, none);
+}
+
+.st-amorce--ample .st-amorce__scene {
+  margin-block-end: var(--st-espacement-6, 1.5rem);
+}
+
+.st-amorce--ample .st-amorce__scene > .st-amorce__tuile {
+  margin: 0;
+}
+
+/* Le fond primaire de la tuile, du plus profond en haut au primaire en bas, sous de fines
+   lignes de balayage ; en sombre, les primaires sont clairs : la tuile garde un bleu profond. */
+.st-amorce--ample .st-amorce__tuile > svg {
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  padding: var(--st-espacement-8, 2rem);
+  background-image:
+    repeating-linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--st-couleur-sur-primaire, Canvas) 4%, transparent) 0 0.0625rem,
+      transparent 0.0625rem 0.25rem
+    ),
+    linear-gradient(
+      to bottom,
+      light-dark(
+        var(--st-couleur-primaire-actif, CanvasText),
+        var(--st-couleur-primaire-discret, Canvas)
+      ),
+      light-dark(var(--st-couleur-primaire, CanvasText), var(--st-couleur-primaire-attenue, Canvas))
+    );
+  border-radius: var(--st-rayon-lg, 0.75rem);
+}
+
+.st-amorce--ample .st-amorce__nom {
+  font-size: var(--st-taille-3xl, 2rem);
+  line-height: var(--st-interligne-3xl, 2.5rem);
+  letter-spacing: var(--st-approche-3xl, -0.02em);
+  color: light-dark(
+    var(--st-couleur-primaire-actif, CanvasText),
+    var(--st-couleur-texte-primaire, CanvasText)
+  );
+}
+
+.st-amorce--ample .st-amorce__sous-titre {
+  max-inline-size: 24rem;
+  margin-block-start: var(--st-espacement-2, 0.5rem);
+  font-size: var(--st-taille-md, 1rem);
+  font-weight: var(--st-graisse-normale, 400);
+  line-height: 1.625;
+  letter-spacing: normal;
+  color: var(--st-couleur-texte-discret, CanvasText);
+  text-transform: none;
+}
+
+/* Le statut, au-dessus d'un filet en degrade de la largeur du bloc : le filet est un ornement
+   (rien ne mesure le telechargement avant le JavaScript), jamais une progression. */
+.st-amorce--ample .st-amorce__statut {
+  inline-size: min(100%, 20rem);
+  margin-block-start: var(--st-espacement-8, 2rem);
+  font-size: var(--st-taille-2xs, 0.6875rem);
+  font-weight: var(--st-graisse-semi, 600);
+  line-height: var(--st-interligne-2xs, 1rem);
+  letter-spacing: var(--st-interlettrage-large, 0.02em);
+  color: var(--st-couleur-texte-primaire, CanvasText);
+  text-align: start;
+}
+
+.st-amorce--ample .st-amorce__statut::after {
+  display: block;
+  block-size: var(--st-espacement-1-5, 0.375rem);
+  margin-block-start: var(--st-espacement-2-5, 0.625rem);
+  content: '';
+  background-image:
+    linear-gradient(
+      to right,
+      transparent 25%,
+      color-mix(in srgb, var(--st-couleur-sur-primaire, Canvas) 35%, transparent),
+      transparent 75%
+    ),
+    linear-gradient(
+      to right,
+      var(--st-couleur-primaire-actif, CanvasText),
+      var(--st-couleur-primaire-survol, CanvasText)
+    );
+  border-radius: var(--st-rayon-pleine, 50rem);
+}
+
+.st-amorce--ample .st-amorce__pastille {
+  margin-block-start: var(--st-espacement-8, 2rem);
+}
+
+/* Depuis md (48rem) : la scene a 288 px et la tuile a 160 px, comme la maquette de bureau. */
+@media (min-width: 48rem) {
+  .st-amorce--ample .st-amorce__scene {
+    inline-size: 18rem;
+    block-size: 18rem;
+  }
+
+  .st-amorce--ample .st-amorce__tuile {
+    inline-size: 10rem;
+    block-size: 10rem;
+  }
+}
+
+/* Le pied : une ligne discrete au bas de la page, centree. */
+.st-amorce__pied {
+  position: absolute;
+  inset: auto var(--st-espacement-4, 1rem) var(--st-espacement-4, 1rem);
+  margin: 0;
+  font-size: var(--st-taille-xs, 0.75rem);
+  line-height: var(--st-interligne-xs, 1rem);
+  color: var(--st-couleur-texte-attenue, CanvasText);
+}
+
+/* Bureau assez haut : le cadre de la maquette, 85 % de la hauteur centres dans la page, et
+   4,5 rem entre le statut et la pastille. */
+@media (min-width: 48rem) and (min-height: 45rem) {
+  .st-amorce--ample {
+    padding-block: calc(7.5vh + var(--st-espacement-8, 2rem));
+  }
+
+  .st-amorce--ample .st-amorce__pastille {
+    margin-block-start: 4.5rem;
+  }
+}
+
 @media (forced-colors: active) {
-  .st-amorce::before {
+  .st-amorce::before,
+  .st-amorce__decor {
     display: none;
   }
+
+  /* Le symbole garde son fond : dessine en clair, il disparaitrait sur la toile. */
+  .st-amorce--ample .st-amorce__tuile > svg {
+    forced-color-adjust: none;
+  }
 }
 
 @media print {

package/types/starterlib-ui-donnees.d.ts

@@ -1,5 +1,6 @@
-import { AnnonceLocale, Icone, TailleDAvatar, TailleDIconeFixe, TonDAvatar } from "@starterlib/ui";
+import { AnnonceLocale, CatalogueDuPointDEntree, Icone, TailleDAvatar, TailleDIconeFixe, TonDAvatar } from "@starterlib/ui";
 import * as i0 from "@angular/core";
+import { InjectionToken, Provider, Signal } from "@angular/core";
 import { Ton, TonSemantique } from "@starterlib/util";
 import { BlocDeDocument, DocumentStructure, EmphaseDeDocument, LienDeDocument, Montant, MorceauDeTexte } from "@starterlib/util/valeurs";
 export type TypeMasque = 'iban' | 'carte' | 'telephone' | 'reference';
@@ -195,11 +196,13 @@ export declare class StMasked {
 export type TailleDeMontant = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'hero';
 /**
  * Couleur choisie par l'appelant : `discret` pour un solde nul ou clos, `primaire` pour la
- * ligne choisie d'un tableau, `succes` et `danger` pour un statut de ligne (execute, rejete).
+ * ligne choisie d'un tableau, `succes` et `erreur` pour un statut de ligne (execute, rejete) ;
+ * `danger` reste pour une ligne a detruire ou une urgence (et pour le rejet ecrit avant le role
+ * `erreur`, P08-03, qui en a la couleur par defaut).
  * ⚠️ Un statut, jamais un sens : un debit n'est pas une erreur (D30). Le sens d'une
  * VARIATION se dit par `variation`, qui lit `positif` et `negatif`.
  */
-export type TonDeMontant = Extract<Ton, 'neutre' | 'discret' | 'primaire' | 'succes' | 'danger'>;
+export type TonDeMontant = Extract<Ton, 'neutre' | 'discret' | 'primaire' | 'succes' | 'erreur' | 'danger'>;
 /** `mono` : colonne de chasse fixe des tableaux (planche 4, D19). */
 export type PoliceDeMontant = 'base' | 'mono';
 /** `fin` : cellule numerique, les virgules s'alignent en colonne. */
@@ -580,7 +583,7 @@ export type DecimalesDeNombre = number | {
   readonly max: number;
 };
 /** Les tons de `st-money` : un statut choisi par l'appelant, jamais deduit du signe. */
-export type TonDeNombre = Extract<Ton, 'neutre' | 'discret' | 'primaire' | 'succes' | 'danger'>;
+export type TonDeNombre = Extract<Ton, 'neutre' | 'discret' | 'primaire' | 'succes' | 'erreur' | 'danger'>;
 /**
  * Un nombre qui n'est ni un montant (`st-money`) ni un compte (`st-count`) : un taux, un TAEG, une
  * quantite decimale, une grandeur avec son unite (lot 256).
@@ -1565,7 +1568,7 @@ export declare class StCode {
   protected readonly annonce: AnnonceLocale;
   protected readonly copieConfirmee: import("@angular/core").WritableSignal<boolean>;
   protected readonly copieRefusee: import("@angular/core").WritableSignal<boolean>;
-  protected readonly iconeDeCopie: import("@angular/core").Signal<"iban" | "chargement" | "message" | "devise" | "cle" | "accessibilite" | "appareils" | "arborescence" | "asterisque" | "badge-coche" | "banque" | "batiment" | "bifurcation" | "billets" | "billets-envoi" | "billets-pile" | "boite" | "boite-de-reception" | "bouclier" | "bouclier-alerte" | "bouclier-coche" | "bouclier-coeur" | "bouclier-croix" | "bouclier-moitie" | "bouclier-recherche" | "bouclier-utilisateur" | "boussole" | "bouton-curseur" | "bulle-question" | "cadenas" | "cadenas-horloge" | "cadenas-ouvert" | "cadre-pied" | "cadre-texte" | "calendrier" | "calendrier-evenement" | "calendrier-horloge" | "calendrier-jour" | "calques" | "carte-bancaire" | "carte-bancaire-barre" | "carte-bancaire-cadenas" | "carte-contact" | "carte-identite" | "cartes-empilees" | "case-cochee" | "casse" | "cercle" | "cercle-alerte" | "cercle-chevron-bas" | "cercle-coche" | "cercle-coche-ouvert" | "cercle-croix" | "cercle-info" | "cercle-moins" | "cercle-plus" | "cercle-question" | "certificat" | "chandelier" | "cheque" | "chevron-bas" | "chevron-droite" | "chevron-gauche" | "chevron-haut" | "chevrons-droite" | "chevrons-haut-bas" | "cloche" | "cloche-sonnerie" | "coche" | "code" | "code-qr" | "code-qr-scanner" | "coffre-fort" | "colonnes" | "connexion" | "contraste" | "copie" | "corbeille" | "corbeille-croix" | "courriel" | "crayon" | "croix" | "curseur-clic" | "deconnexion" | "disposition" | "dollar" | "dossier" | "dossier-barre" | "dossier-ouvert" | "double-coche" | "echange" | "eclair" | "empreinte-digitale" | "enregistrer" | "entree" | "envoyer" | "epaisseur-de-trait" | "epingle" | "etoile" | "euro" | "fichier" | "fichier-image" | "fichier-pdf" | "fichier-texte" | "filtre" | "filtre-barre" | "filtre-lignes" | "fleche-bas" | "fleche-bas-gauche" | "fleche-bas-ligne" | "fleche-droite" | "fleche-gauche" | "fleche-haut" | "fleche-haut-droite" | "fleche-haut-ligne" | "fleche-large-haut" | "fleches-gauche-droite" | "flocon" | "flou" | "formes" | "globe" | "graphique-anneau" | "graphique-barres" | "graphique-barres-cadre" | "graphique-camembert" | "graphique-ligne" | "graphique-lignes" | "grille" | "grille-lignes" | "hexagone" | "historique" | "horloge" | "horloge-fleche" | "imprimer" | "interdit" | "jalons" | "jauge" | "lien" | "lien-externe" | "lignes" | "lignes-crayon" | "liste" | "liste-coche" | "liste-controle" | "liste-numerotee" | "luminosite" | "lune" | "maillet" | "maison" | "marque-page" | "menu" | "menu-ouvert" | "minuteur" | "mise-au-point" | "mise-en-page-image" | "moins" | "nuage-barre" | "nuage-televerser" | "octogone-alerte" | "oeil" | "oeil-barre" | "panneau-gauche" | "parametres" | "parapluie" | "parchemin" | "pieces" | "plus" | "pointeur" | "points" | "points-verticaux" | "portefeuille" | "portefeuille-cartes" | "presse-papiers-coche" | "presse-papiers-horloge" | "priorite-haute" | "rafraichir" | "recherche" | "recherche-barre" | "recherche-texte" | "rectangle-points" | "recu" | "redemarrer" | "reglages" | "regle" | "reseau-jauge" | "rotation-arriere" | "routeur" | "sablier" | "sablier-bas" | "sablier-haut" | "sac-argent" | "sans-contact" | "serveur" | "soleil" | "style-de-trait" | "synchro" | "synchro-probleme" | "tableau" | "tableau-de-bord" | "tableau-de-bord-plus" | "tablette" | "tabulation" | "telecharger" | "telephone-mobile" | "televerser" | "tendance-baisse" | "tendance-hausse" | "terminal" | "tirelire" | "triangle-alerte" | "triangle-bas" | "triangle-haut" | "trombone" | "utilisateur" | "utilisateur-crayon" | "utilisateurs" | "wifi" | "wifi-barre">;
+  protected readonly iconeDeCopie: import("@angular/core").Signal<"iban" | "chargement" | "pause" | "message" | "essai" | "devise" | "cle" | "accessibilite" | "alimentation" | "appareil-photo" | "appareils" | "arborescence" | "asterisque" | "badge-coche" | "balance" | "banque" | "batiment" | "bifurcation" | "billets" | "billets-envoi" | "billets-pile" | "boite" | "boite-de-reception" | "bouclier" | "bouclier-alerte" | "bouclier-coche" | "bouclier-coeur" | "bouclier-croix" | "bouclier-moitie" | "bouclier-recherche" | "bouclier-utilisateur" | "boussole" | "bouton-curseur" | "bulle-question" | "cadenas" | "cadenas-horloge" | "cadenas-ouvert" | "cadre-pied" | "cadre-texte" | "calendrier" | "calendrier-evenement" | "calendrier-horloge" | "calendrier-jour" | "calques" | "carte-bancaire" | "carte-bancaire-barre" | "carte-bancaire-cadenas" | "carte-contact" | "carte-identite" | "cartes-empilees" | "case-cochee" | "casse" | "cercle" | "cercle-alerte" | "cercle-chevron-bas" | "cercle-coche" | "cercle-coche-ouvert" | "cercle-croix" | "cercle-info" | "cercle-moins" | "cercle-plus" | "cercle-question" | "certificat" | "chandelier" | "cheque" | "chevron-bas" | "chevron-droite" | "chevron-gauche" | "chevron-haut" | "chevrons-droite" | "chevrons-haut-bas" | "cible" | "cloche" | "cloche-sonnerie" | "coche" | "code" | "code-qr" | "code-qr-scanner" | "coffre-fort" | "colonnes" | "comparer" | "connexion" | "contraste" | "copie" | "corbeille" | "corbeille-croix" | "courriel" | "crayon" | "croix" | "curseur-clic" | "deconnexion" | "disposition" | "dollar" | "dossier" | "dossier-barre" | "dossier-ouvert" | "double-coche" | "drapeau" | "echange" | "eclair" | "empreinte-digitale" | "enregistrer" | "entree" | "envoyer" | "epaisseur-de-trait" | "epingle" | "etoile" | "euro" | "fichier" | "fichier-image" | "fichier-pdf" | "fichier-texte" | "filtre" | "filtre-barre" | "filtre-lignes" | "fleche-bas" | "fleche-bas-gauche" | "fleche-bas-ligne" | "fleche-droite" | "fleche-gauche" | "fleche-haut" | "fleche-haut-droite" | "fleche-haut-ligne" | "fleche-large-haut" | "fleches-gauche-droite" | "flocon" | "flou" | "formes" | "globe" | "graphique-anneau" | "graphique-barres" | "graphique-barres-cadre" | "graphique-camembert" | "graphique-ligne" | "graphique-lignes" | "grille" | "grille-lignes" | "hexagone" | "historique" | "horloge" | "horloge-fleche" | "imprimer" | "interdit" | "jalons" | "jauge" | "lecture" | "lien" | "lien-externe" | "lignes" | "lignes-crayon" | "liste" | "liste-coche" | "liste-controle" | "liste-numerotee" | "luminosite" | "lune" | "maillet" | "maison" | "marque-page" | "menu" | "menu-ouvert" | "minuteur" | "mise-au-point" | "mise-en-page-image" | "moins" | "nuage-barre" | "nuage-televerser" | "octogone-alerte" | "oeil" | "oeil-barre" | "panneau-gauche" | "parametres" | "parapluie" | "parchemin" | "passerelle" | "pieces" | "plus" | "pointeur" | "points" | "points-verticaux" | "portefeuille" | "portefeuille-cartes" | "presse-papiers-coche" | "presse-papiers-horloge" | "priorite-haute" | "rafraichir" | "recherche" | "recherche-barre" | "recherche-texte" | "rectangle-points" | "recu" | "redemarrer" | "reglages" | "regle" | "reseau" | "reseau-jauge" | "robot" | "rotation-arriere" | "routeur" | "sablier" | "sablier-bas" | "sablier-haut" | "sac-argent" | "sans-contact" | "serveur" | "soleil" | "style-de-trait" | "synchro" | "synchro-probleme" | "tableau" | "tableau-de-bord" | "tableau-de-bord-plus" | "tablette" | "tabulation" | "telecharger" | "telephone-mobile" | "televerser" | "tendance-baisse" | "tendance-hausse" | "terminal" | "tirelire" | "triangle-alerte" | "triangle-bas" | "triangle-haut" | "trombone" | "utilisateur" | "utilisateur-crayon" | "utilisateurs" | "visage" | "wifi" | "wifi-barre">;
   protected readonly messageDeRefus: import("@angular/core").Signal<string>;
   private minuterieDeConfirmation;
   constructor();
@@ -1669,5 +1672,228 @@ export declare class StDocument {
     };
   }, {}, never, never, true, never>;
 }
+/** Les bornes de l'opacite : visible sur l'ecran comme a l'impression, jamais au point de gener la lecture. */
+export declare const OPACITE_DE_FILIGRANE: {
+  readonly min: 0.04;
+  readonly defaut: 0.08;
+  readonly max: 0.2;
+};
+/**
+ * Le motif d'une tuile : le texte en diagonale (-30 degres), centre. Une image SVG `data:` (permise
+ * par `img-src 'self' data:`), servie en MASQUE : la couleur est celle du theme (`texte`), lue par la
+ * feuille, et non ecrite dans l'image.
+ */
+export declare function motifDeFiligrane(texte: string): string;
+/**
+ * Filigrane (P08-04) : un texte repete en diagonale sur une zone, pour des resultats d'essai ou un
+ * dossier imprimable (« Donnees fictives », « Specimen »). Le texte est fourni par l'application,
+ * deja traduit.
+ *
+ * ```html
+ * <section class="resultats">
+ *   <st-watermark texte="Donnees fictives" />
+ *   ...
+ * </section>
+ * ```
+ *
+ * - Il COUVRE son conteneur, que l'appelant positionne (`position: relative`), par-dessus son
+ *   contenu, a faible opacite (`opacite`, de 0,04 a 0,2 ; 0,08 par defaut) : le texte reste lisible,
+ *   a l'ecran comme a l'impression.
+ * - Absent de l'arbre d'accessibilite : aucun noeud de texte (le motif est un masque CSS de l'hote,
+ *   `aria-hidden`), ce que la page dit deja en mots (banniere, titre). Il ne capte aucun pointeur.
+ * - Motif SVG en ligne, sans requete ni reference `url(#...)` (que `<base href>` perd sous Safari et
+ *   Firefox), et sans attribut `style` statique : la politique de securite du contenu du socle suffit.
+ * - Imprime par defaut (couleurs exactes) ; `[imprime]="false"` le retire du papier.
+ */
+export declare class StWatermark {
+  /** Le texte repete, deja traduit (« Donnees fictives »). */
+  readonly texte: import("@angular/core").InputSignal<string>;
+  /** Present a l'impression (defaut) ; `false` le retire du papier. */
+  readonly imprime: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Opacite du texte, ramenee entre 0,04 et 0,2 ; 0,08 par defaut. */
+  readonly opacite: import("@angular/core").InputSignalWithTransform<number, number | `${number}`>;
+  protected readonly motif: import("@angular/core").Signal<string>;
+  protected readonly opaciteLue: import("@angular/core").Signal<number>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StWatermark, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StWatermark, "st-watermark", never, {
+    "texte": {
+      "alias": "texte";
+      "required": true;
+      "isSignal": true;
+    };
+    "imprime": {
+      "alias": "imprime";
+      "required": false;
+      "isSignal": true;
+    };
+    "opacite": {
+      "alias": "opacite";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Lu jusqu'au bout (P08-08) : exige la lecture d'un document jusqu'a sa fin SANS exclure le clavier
+ * ni le lecteur d'ecran, ce que ferait un simple detecteur de defilement.
+ *
+ * ```html
+ * <section stLuJusquAuBout #lecture="stLuJusquAuBout" (atteint)="journaliser()">
+ *   <st-document [document]="conditions()" />
+ * </section>
+ * <button
+ *   stButton
+ *   [indisponible]="!lecture.lu()"
+ *   [raisonIndisponible]="lecture.lu() ? null : t('lireJusquAuBout')"
+ * >
+ *   Accepter
+ * </button>
+ * ```
+ *
+ * - **Une sentinelle focalisable** « Fin du document » (`libelleDeFin` la remplace) suit le
+ *   contenu, dans le conteneur : un conteneur qui defile (`overflow: auto`) la cache jusqu'a la fin.
+ * - **Trois voies** : la sentinelle visible a l'ecran (observateur d'intersection, au-dessus de la
+ *   barre inferieure et de l'action flottante) ; la tabulation jusqu'a elle ; le lecteur d'ecran,
+ *   dont le curseur fait defiler la page jusqu'a elle ou y pose le focus (VoiceOver).
+ * - **Une seule emission** de `atteint` ; `lu()` reste vrai ensuite. Un autre document se lit dans
+ *   un autre conteneur (`@for ... track version`).
+ * - **Aucun acces global** : la fenetre est celle du `DOCUMENT` injecte, et rien n'est observe
+ *   avant le rendu au navigateur ; un prerendu ne produit aucun effet.
+ *
+ * Pose sur un element du gabarit (`section`, `div`), jamais sur un composant : un element ne porte
+ * qu'un composant. Recette : `docs/recettes/accepter-apres-lecture.md`.
+ */
+export declare class StLuJusquAuBout {
+  private readonly document;
+  protected readonly catalogue: import("@angular/core").Signal<import("@starterlib/ui").CatalogueDuPointDEntree<import("@starterlib/ui/donnees").LibellesDonnees>>;
+  /** Le texte de la sentinelle, deja traduit ; `null` : « Fin du document ». */
+  readonly libelleDeFin: import("@angular/core").InputSignal<string | null>;
+  /** Emise UNE fois, quand la fin du document est atteinte. */
+  readonly atteint: import("@angular/core").OutputEmitterRef<void>;
+  private readonly etat;
+  /** Vrai des que la fin est atteinte : a lire pour l'indisponibilite du bouton qui suit. */
+  readonly lu: import("@angular/core").Signal<boolean>;
+  protected readonly libelleLu: import("@angular/core").Signal<string>;
+  /** `lang` de la sentinelle quand son texte vient du catalogue de repli (D-29). */
+  protected readonly langueLue: import("@angular/core").Signal<string | null>;
+  private readonly sentinelle;
+  private observateur;
+  private surveillant;
+  constructor();
+  /** La fin est atteinte : une seule emission, et plus rien a observer. */
+  protected atteindre(): void;
+  /**
+   * Observe la sentinelle dans la fenetre, le bas de la fenetre retranche de ce qui le recouvre ;
+   * re-arme quand la coquille change ces hauteurs (attribut `style` de `<html>`).
+   */
+  private observer;
+  private arreter;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StLuJusquAuBout, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StLuJusquAuBout, "[stLuJusquAuBout]", ["stLuJusquAuBout"], {
+    "libelleDeFin": {
+      "alias": "libelleDeFin";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "atteint": "atteint";
+  }, never, ["*"], true, never>;
+}
+/**
+ * La fraicheur d'une donnee dont l'AGE compte (P08-12) : « A jour, il y a 12 s » ou « Perimee
+ * depuis 2 min 05 s », en MOT et en FORME (une coche, un triangle), jamais par la couleur seule.
+ *
+ * ```html
+ * <st-freshness [instant]="positions.lueA()" [seuil]="60" [libelle]="t('positions.titre')"
+ *   (perimee)="signaler()" />
+ * ```
+ *
+ * - `instant` : la derniere lecture reussie (`lueA()` d'une `ressourceRafraichie`) ; `seuil` : l'age,
+ *   en secondes, au-dela duquel la donnee est perimee, fourni par le serveur ou l'application.
+ * - **L'age se relit chaque seconde, onglet visible seulement** ; a son retour, le texte est juste.
+ * - **Aucune region vivante** : le texte se reecrit chaque seconde, et une region l'annoncerait en
+ *   boucle. L'application annonce, elle, ce qui compte (`perimee`).
+ * - **`perimee`** est emise une fois a chaque franchissement du seuil (et des la premiere lecture si
+ *   la donnee est deja perimee) ; une donnee rafraichie repasse « a jour ».
+ */
+export declare class StFreshness {
+  private readonly document;
+  private readonly locale;
+  private readonly fuseau;
+  protected readonly catalogue: import("@angular/core").Signal<import("@starterlib/ui").CatalogueDuPointDEntree<import("@starterlib/ui/donnees").LibellesDonnees>>;
+  /** L'instant de la donnee : `Date`, chaine ISO ou millisecondes. */
+  readonly instant: import("@angular/core").InputSignal<string | number | Date>;
+  /** L'age, en secondes, au-dela duquel la donnee est perimee. */
+  readonly seuil: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Ce qu'est la donnee (« Positions »), deja traduit ; `null` : rien devant l'etat. */
+  readonly libelle: import("@angular/core").InputSignal<string | null>;
+  /** Emise a chaque franchissement du seuil. */
+  readonly perimee: import("@angular/core").OutputEmitterRef<void>;
+  private readonly maintenant;
+  private readonly enMillisecondes;
+  protected readonly estValide: import("@angular/core").Signal<boolean>;
+  /** L'age en secondes, jamais negatif (une horloge du poste en retard sur le serveur). */
+  private readonly age;
+  protected readonly estPerimee: import("@angular/core").Signal<boolean>;
+  protected readonly icone: import("@angular/core").Signal<"iban" | "chargement" | "pause" | "message" | "essai" | "devise" | "cle" | "accessibilite" | "alimentation" | "appareil-photo" | "appareils" | "arborescence" | "asterisque" | "badge-coche" | "balance" | "banque" | "batiment" | "bifurcation" | "billets" | "billets-envoi" | "billets-pile" | "boite" | "boite-de-reception" | "bouclier" | "bouclier-alerte" | "bouclier-coche" | "bouclier-coeur" | "bouclier-croix" | "bouclier-moitie" | "bouclier-recherche" | "bouclier-utilisateur" | "boussole" | "bouton-curseur" | "bulle-question" | "cadenas" | "cadenas-horloge" | "cadenas-ouvert" | "cadre-pied" | "cadre-texte" | "calendrier" | "calendrier-evenement" | "calendrier-horloge" | "calendrier-jour" | "calques" | "carte-bancaire" | "carte-bancaire-barre" | "carte-bancaire-cadenas" | "carte-contact" | "carte-identite" | "cartes-empilees" | "case-cochee" | "casse" | "cercle" | "cercle-alerte" | "cercle-chevron-bas" | "cercle-coche" | "cercle-coche-ouvert" | "cercle-croix" | "cercle-info" | "cercle-moins" | "cercle-plus" | "cercle-question" | "certificat" | "chandelier" | "cheque" | "chevron-bas" | "chevron-droite" | "chevron-gauche" | "chevron-haut" | "chevrons-droite" | "chevrons-haut-bas" | "cible" | "cloche" | "cloche-sonnerie" | "coche" | "code" | "code-qr" | "code-qr-scanner" | "coffre-fort" | "colonnes" | "comparer" | "connexion" | "contraste" | "copie" | "corbeille" | "corbeille-croix" | "courriel" | "crayon" | "croix" | "curseur-clic" | "deconnexion" | "disposition" | "dollar" | "dossier" | "dossier-barre" | "dossier-ouvert" | "double-coche" | "drapeau" | "echange" | "eclair" | "empreinte-digitale" | "enregistrer" | "entree" | "envoyer" | "epaisseur-de-trait" | "epingle" | "etoile" | "euro" | "fichier" | "fichier-image" | "fichier-pdf" | "fichier-texte" | "filtre" | "filtre-barre" | "filtre-lignes" | "fleche-bas" | "fleche-bas-gauche" | "fleche-bas-ligne" | "fleche-droite" | "fleche-gauche" | "fleche-haut" | "fleche-haut-droite" | "fleche-haut-ligne" | "fleche-large-haut" | "fleches-gauche-droite" | "flocon" | "flou" | "formes" | "globe" | "graphique-anneau" | "graphique-barres" | "graphique-barres-cadre" | "graphique-camembert" | "graphique-ligne" | "graphique-lignes" | "grille" | "grille-lignes" | "hexagone" | "historique" | "horloge" | "horloge-fleche" | "imprimer" | "interdit" | "jalons" | "jauge" | "lecture" | "lien" | "lien-externe" | "lignes" | "lignes-crayon" | "liste" | "liste-coche" | "liste-controle" | "liste-numerotee" | "luminosite" | "lune" | "maillet" | "maison" | "marque-page" | "menu" | "menu-ouvert" | "minuteur" | "mise-au-point" | "mise-en-page-image" | "moins" | "nuage-barre" | "nuage-televerser" | "octogone-alerte" | "oeil" | "oeil-barre" | "panneau-gauche" | "parametres" | "parapluie" | "parchemin" | "passerelle" | "pieces" | "plus" | "pointeur" | "points" | "points-verticaux" | "portefeuille" | "portefeuille-cartes" | "presse-papiers-coche" | "presse-papiers-horloge" | "priorite-haute" | "rafraichir" | "recherche" | "recherche-barre" | "recherche-texte" | "rectangle-points" | "recu" | "redemarrer" | "reglages" | "regle" | "reseau" | "reseau-jauge" | "robot" | "rotation-arriere" | "routeur" | "sablier" | "sablier-bas" | "sablier-haut" | "sac-argent" | "sans-contact" | "serveur" | "soleil" | "style-de-trait" | "synchro" | "synchro-probleme" | "tableau" | "tableau-de-bord" | "tableau-de-bord-plus" | "tablette" | "tabulation" | "telecharger" | "telephone-mobile" | "televerser" | "tendance-baisse" | "tendance-hausse" | "terminal" | "tirelire" | "triangle-alerte" | "triangle-bas" | "triangle-haut" | "trombone" | "utilisateur" | "utilisateur-crayon" | "utilisateurs" | "visage" | "wifi" | "wifi-barre">;
+  protected readonly texte: import("@angular/core").Signal<string>;
+  /** L'instant lisible par la machine (`<time datetime>`). */
+  protected readonly iso: import("@angular/core").Signal<string | null>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<StFreshness, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StFreshness, "st-freshness", never, {
+    "instant": {
+      "alias": "instant";
+      "required": true;
+      "isSignal": true;
+    };
+    "seuil": {
+      "alias": "seuil";
+      "required": true;
+      "isSignal": true;
+    };
+    "libelle": {
+      "alias": "libelle";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "perimee": "perimee";
+  }, never, never, true, never>;
+}
+/**
+ * Les libelles de `@starterlib/ui/donnees` (P08-08) : le catalogue par point d'entree (AD-10, D154),
+ * comme ceux de la navigation et des formulaires. La langue suit celle du dictionnaire du tronc.
+ */
+export interface LibellesDonnees {
+  /** La sentinelle de `stLuJusquAuBout`, apres le dernier mot d'un document (« Fin du document »). */
+  readonly finDuDocument: string;
+  /** `st-freshness` a jour, son age relatif en argument (« A jour, il y a 12 s »). */
+  readonly aJour: (age: string) => string;
+  /** `st-freshness` perimee, la duree depuis le seuil en argument (« Perimee depuis 2 min 05 s »). */
+  readonly perimeeDepuis: (duree: string) => string;
+  /** Le nom de la donnee devant son etat, espace finale comprise (« Positions : »). */
+  readonly libelleDeLaDonnee: (libelle: string) => string;
+}
+export declare const LIBELLES_DONNEES_FR: LibellesDonnees;
+export declare const LIBELLES_DONNEES_EN: LibellesDonnees;
+/**
+ * Les catalogues des donnees par langue (sous-etiquette primaire : `fr`, `en`). Une application qui
+ * ajoute une langue au dictionnaire du tronc ajoute la sienne ici, par
+ * `fournirLibellesDonnees({ de: ... })`.
+ */
+export declare const ST_LIBELLES_DONNEES: InjectionToken<Readonly<Record<string, LibellesDonnees>>>;
+/** Ajoute (ou remplace) des catalogues des donnees, par langue. */
+export declare function fournirLibellesDonnees(catalogues: Readonly<Record<string, LibellesDonnees>>): Provider;
+/**
+ * Le catalogue de la langue du dictionnaire du tronc ; le francais quand la langue n'en a pas, un
+ * repli signale en developpement (D-29). A appeler dans un contexte d'injection.
+ */
+export declare function libellesDesDonnees(): Signal<LibellesDonnees>;
+/**
+ * Le catalogue des donnees ET la langue de son repli (`catalogueDuPointDEntree`) : `lang` de ce
+ * qu'il ecrit seul (D-29). A appeler dans un contexte d'injection.
+ */
+export declare function catalogueDesDonnees(): Signal<CatalogueDuPointDEntree<LibellesDonnees>>;
 
 export {};

package/types/starterlib-ui-force.d.ts

@@ -0,0 +1,19 @@
+import { EstimateurDeForce } from "@starterlib/ui/saisie";
+/** Les dictionnaires de langue que l'estimateur sait ajouter au dictionnaire commun. */
+export type LangueDuDictionnaire = 'fr' | 'en';
+/**
+ * Charge l'estimateur zxcvbn-ts (ADR web 0011) : son noyau, le dictionnaire commun et les claviers,
+ * puis un dictionnaire par langue demandee. Chaque morceau est un import DYNAMIQUE : l'outil de
+ * construction de l'application en fait des fichiers a part, et seuls les dictionnaires demandes se
+ * telechargent. Poids mesures (brotli 11, 2026-10-07) : noyau et commun 213 Ko ; avec le francais
+ * 471 Ko ; avec l'anglais 755 Ko ; les deux 1 009 Ko.
+ *
+ * Distance de Levenshtein active : un mot du dictionnaire a une ou deux lettres pres reste un mot du
+ * dictionnaire, et la jauge en devient plus prudente (`Motdepasse1!` passe de 2 a 1). Aucun appel
+ * reseau : le matcher des mots de passe divulgues (`@zxcvbn-ts/matcher-pwned`) n'est PAS branche,
+ * cette verification reste au serveur. Aucune traduction : le retour de la bibliotheque n'est pas
+ * montre.
+ */
+export declare function chargerEstimateurZxcvbn(langues?: readonly LangueDuDictionnaire[]): Promise<EstimateurDeForce>;
+
+export {};