fold-ng 0.12.1 → 0.14.0

package/CHANGELOG.md

@@ -8,6 +8,283 @@ All notable changes to **fold-ng** are documented here. The format follows
 
 _Nothing yet._
 
+## [0.14.0] - 2026-08-23
+
+### Changed
+
+- **BREAKING — `fold-nav-launcher` a DEUX niveaux.** Une tuile qui contient des
+  tuiles est un **groupe** (`fold-nav-group`) : aucun `level` à piloter, aucun
+  mode à basculer — le lanceur trouve la profondeur par requête de contenu,
+  exactement comme `fold-multiselect` trouve ses `fold-optgroup`. Deux niveaux
+  et pas plus : au troisième ce n'est plus un lanceur, c'est une arborescence.
+
+  Ce qui casse : `icon` devient **facultatif** sur `fold-nav-tile` (une entrée
+  de second niveau n'en a pas toujours ; sans icône, la ligne retombe sur un
+  point de statut plutôt que de décaler son libellé). La cascade d'entrée n'est
+  plus indexée sur `:nth-child` mais sur la **distance à la tuile touchée** —
+  c'est le lanceur qui la calcule, parce qu'aucune tuile ne peut connaître
+  seule sa distance à un doigt posé sur une autre. `variant` gagne `accent`.
+
+  Le lanceur se déclare enfin **surface de chrome** : il peignait le sol du
+  rail tout en lisant l'encre de la PAGE, ce qui donnait du texte sombre sur
+  sombre et des tuiles claires au milieu d'un panneau noir sous tout thème
+  mixte. Peindre le sol d'une famille sans en rejoindre la polarité, c'est en
+  revendiquer la moitié.
+
+  Nouveaux réglages : `eyebrow`, `heading`, `glass`, `closeLabel`, `backLabel`,
+  et un emplacement `footer` pour ce que l'application possède (le compte, la
+  déconnexion) et que la bibliothèque n'a pas à deviner.
+
+  Ce que la transition doit aux technologies d'assistance, parce que le
+  mouvement ne leur dit rien : le **focus suit le niveau** (et ne bouge qu'une
+  fois le niveau peint — pris une frame trop tôt il échouait en silence et le
+  piège retombait sur le bouton de fermeture, donc le curseur atterrissait sur
+  « renvoyer » à chaque descente) ; **Échap devient contextuel** (niveau 2 il
+  remonte, niveau 1 il ferme) ; le **niveau est annoncé** par une région vive.
+  Le balayage double la flèche, il ne la remplace pas.
+
+### Added
+
+- **`fold-menu` — `navLabel`**, le nom du repère `<nav>` du rail. Facultatif
+  pour un rail seul : la seule navigation d'une page n'a rien à distinguer.
+  Il cesse de l'être dès que la coquille en porte **deux** — un rail
+  d'application et un rail d'espace de travail s'annoncent alors tous les deux
+  « navigation », et plus rien ne les sépare. La galerie, qui a exactement ces
+  deux rails, les nomme désormais.
+
+- **`fold-meter`** — une mesure en LECTURE SEULE dans une plage connue (une
+  complétude, un quota, un score). Ce n'est ni une barre de progression ni un
+  `fold-slider` : ce dernier est un `input type="range"`, focalisable,
+  déplaçable, et il s'annonce comme quelque chose qu'on peut changer. Un
+  `role="meter"` annonce une valeur déjà décidée. Le raccourci habituel — un
+  `div` de 4px — ne donne rien du tout à un lecteur d'écran, et c'est la raison
+  d'être du composant. La valeur est **bornée** plutôt que crue : au-delà du max
+  elle peindrait hors de la piste, et une plage inversée diviserait par un
+  négatif.
+
+- **`fold-checklist`** — une liste de conditions et leur état. Troisième
+  apparition du motif (les règles d'un champ mot de passe, les préconditions
+  d'une zone dangereuse, puis une liste de publication), ce qui est le moment où
+  une forme cesse d'être une coïncidence. Chaque état est porté par un **glyphe
+  autant que par une couleur** : un point vert et un point ambre sont le même
+  point en niveaux de gris, en `forced-colors`, et pour une large part des
+  lecteurs. L'état est aussi dit **en toutes lettres** pour un lecteur d'écran,
+  qui ne voit aucun glyphe.
+
+## [0.13.0] - 2026-08-23
+
+### Changed
+
+- **BREAKING — `brand` / `on-brand` entrent au catalogue (48 rôles).** La
+  marque IDENTIFIE, donc contrairement à `primary` elle ne doit pas basculer de
+  polarité : une marque teal sur la page et bleu pâle sur le rail a cessé
+  d'être la marque. `primary` faisait deux métiers contradictoires — porter la
+  marque ET les affordances de premier plan, dont la seconde doit s'éclaircir
+  sur un chrome sombre. Un sous-bloc scopé ne peut **jamais** les redéclarer, et
+  un test le vérifie.
+
+- **BREAKING — `fold-data-table` : `narrowLayout` / `cardsAt` /
+  `rowCardChrome`, et `mobileLayout` déprécié** (retiré avant la 1.0). La
+  bascule se décide sur la largeur du **conteneur** (600px par défaut), pas sur
+  la fenêtre : une table dans un panneau de 480px sur un écran de 1920 restait
+  une table illisible. `custom` était une redondance — projeter un
+  `foldRowCard` disait déjà tout.
+
+- **BREAKING — `surface-band` entre au catalogue (46 rôles).** Une bande ne
+  monte pas, elle **s'écarte**, et la direction dépend de la polarité du thème.
+  `fold-card` la codait en dur (`surface-hover`, et `surface-card` en sunken) —
+  une hypothèse de polarité posée dans un composant. Sur navi la bande valait
+  la couleur de la page sur une carte blanche (1,09:1) ; sur le chrome navi
+  elle valait **exactement** le corps de la carte (1,00:1). Les quatre thèmes
+  non modifiés reprennent la valeur qu'ils avaient déjà : le rendu ne bouge
+  pas, seul le rôle devient explicite. Un thème maison doit le déclarer.
+
+- **Les bordures de navi descendent d'un cran** (`paper-300` / `paper-200`).
+  Sur un fond clair la profondeur vient du **contour**, pas du remplissage : il
+  reste moins de 10% de luminance entre le blanc et une page claire, et trois
+  niveaux n'y tiennent pas. `surface-sunken` ne bouge pas.
+
+- **BREAKING — `justify` sépare la répartition de la densité.** `size` se
+  documentait « pure padding/typography » et décidait en douce du modèle de
+  répartition : `compact` justifiait les onglets, `comfortable` les calait à
+  gauche. Une barre `compact` épouse maintenant son contenu ;
+  `justify="stretch"` restaure l'ancien comportement.
+
+- **BREAKING — `FoldNavLayoutContext` gagne `barCollapsed`.** Le contexte ne
+  parlait que dans un sens : la barre savait tout du layout, le layout rien de
+  la barre. `collapsed` appartient à la barre et la largeur de piste au layout,
+  et le JSDoc disait d'aller poser `--fold-nav-layout-rail-width` à la main, à
+  chaque usage. Une implémentation maison du token doit exposer `barCollapsed`.
+
+- **BREAKING — quatre rôles s'ajoutent au catalogue de couleurs** :
+  `on-info` · `on-warning` · `on-alert` · `on-success` (41 → 45). Un thème
+  maison doit les déclarer, sinon le test de parité échoue.
+
+  Ils ferment un **P0** indépendant de navi : `emphasis="solid"` +
+  `intent="warning"` peignait `on-primary` — du blanc — sur de l'ambre, à
+  **2,4:1 sur umbra et 3,3:1 sur les quatre autres**. Même défaut sur la bulle
+  compteur de `fold-nav-tile`. La combinaison est exprimable depuis que
+  emphasis et intent sont deux axes indépendants ; rien ne la testait, parce
+  que le catalogue n'avait pas d'encre pour un remplissage de statut.
+
+- **BREAKING — les primitives `--fold-ref-navy-*` (9) et `--fold-ref-ivory-50`
+  sont supprimées**, remplacées par les familles `graphite` / `paper` /
+  `signal` / `navyink`. Une app qui référençait une primitive navi directement
+  doit migrer.
+
+- **BREAKING — `--fold-shadow-*` peut être redéclarée par un thème.**
+  L'invariant disait « seul le rayon varie » et rangeait l'ombre avec les
+  mesures. La vraie ligne : un thème peut changer ce à quoi une surface
+  **ressemble**, jamais où elle **se trouve**. Une ombre ne déplace pas une
+  boîte. Un thème maison qui héritait des ombres de base les garde.
+
+- **navi 2 — « Graphite & Signal ».** navi avait deux polarités et un seul jeu
+  de rôles : son sous-bloc chrome en déclarait **17 sur 45** et héritait les 28
+  autres de la page. Le givre blanc de la page posé sur le rail sombre rendait
+  une infobulle à **1,9:1**. Huit échecs WCAG mesurés sont fermés ; `card`,
+  `sunken` et `page` valaient blanc, blanc et ivoire — une table imbriquée dans
+  une carte n'avait aucun bord — et font maintenant trois marches distinctes.
+  Le rayon passe de 1/2/3/4px à 2/4/6/8px : à 1px un coin est un artefact de
+  rendu, pas une intention.
+
+- **BREAKING — `--fold-text-md` vaut 13px ; le corps de texte s'appelle
+  `--fold-text-base`.** Un consommateur non migré rétrécit d'un cran **en
+  silence** : c'est un rechercher/remplacer, `--fold-text-md` →
+  `--fold-text-base`, à faire avant de monter de version.
+
+- **Le bouton `lg` cesse d'être un `md` déguisé.** Les deux préréglages
+  nommaient littéralement la même taille — l'échelle n'avait aucune marche
+  entre le corps et 20px à saisir. `lg` rend maintenant en `--fold-text-lg`.
+
+### Added
+
+- **Un système typographique, au contrat.** La typo était la moitié manquante
+  du design system : cinq tailles, et graisse, interligne, interlettrage et
+  famille écrits en dur composant par composant — 74, 25, 22 déclarations,
+  pour 4, 9 et 11 valeurs distinctes. Personne n'avait décidé qu'il y aurait
+  onze interlettrages ; ils se sont accumulés.
+
+  Quatre échelles nouvelles, toutes dans le test de contrat au même titre que
+  la couleur, donc une marche ne peut plus naître ou disparaître sans que le
+  catalogue le dise :
+
+  - `--fold-font-sans` · `--fold-font-mono` — deux fontes, pas de `display` :
+    rien n'en rend une. Elles restent **hors de l'axe de thème** : changer de
+    fonte re-flow une page, et seul le radius peut varier par thème.
+  - `--fold-text-2xs … 2xl` — l'échelle s'étend vers le bas et vers
+    l'intérieur (10 · 11 · 12 · 13 · 14 · 16 · 20 · 24), là où le code avait
+    des littéraux. Elle s'arrête à 24px parce que rien, ni dans la librairie
+    ni dans la galerie, ne rend plus gros.
+  - `--fold-weight-regular|medium|semibold|bold|extrabold`
+  - `--fold-leading-none|tight|snug|normal|relaxed`
+  - `--fold-tracking-tightest|tighter|tight|normal|wide|caps`
+
+  `extrabold` et `tightest` viennent de la galerie : c'est elle, pas la
+  librairie, qui rend des titres hero — 800 sur treize sites, -0.04em sur
+  cinq, toujours ensemble avec une taille fluide. Un registre d'affichage
+  cohérent que personne n'avait nommé.
+
+- **Un rôle sémantique que rien ne peint est un rôle mort.** Le contrat
+  vérifiait l'orphelinat dans un seul sens — une primitive que rien ne pointe
+  échoue depuis longtemps, mais un rôle que les cinq thèmes déclarent et
+  qu'aucun composant ne peint ne regardait personne. Sur 45 rôles, il y en
+  avait exactement un.
+
+- **`depth-contrast.spec.ts`** — 4,5:1 entre deux **surfaces** ne veut rien
+  dire : personne ne lit un contour. Deux planchers, par le travail que fait la
+  séparation — **structure** (contour de carte, cadre de panneau) ≥ 1,25:1 et
+  **subdivision** (bande, séparateur) ≥ 1,15:1. `lumen` est exempté avec sa
+  raison, et sa valeur épinglée plutôt que passée sous silence.
+
+- **`chrome-contrast.spec.ts`** — douze paires de contraste, chacune un échec
+  mesuré avant la refonte, plus deux invariants structurels. Les alphas sont
+  compositées sur le fond qu'elles rencontrent vraiment : mesurer un
+  `color-mix(…, transparent)` contre rien, c'est comment une surface
+  translucide passe un test qu'elle devrait échouer. Rejoué sur l'ancien
+  navi : 10 échecs sur 14.
+
+- **`status-ink-contrast.spec.ts`** — chaque encre de statut sur son propre
+  fond, à 4,5:1, sur les cinq thèmes. Mesurer plutôt que décréter a payé :
+  `bubbly` type `info` en azure et non en violet, donc le blanc y tombe à
+  2,8:1 et il prend l'encre sombre là où les quatre autres prennent le blanc.
+
+- **Un sous-bloc de thème scopé doit être CLOS.** Le test de parité
+  dédupliquait les sélecteurs `[data-theme]` et ne gardait que le bloc de
+  tête — le sous-bloc chrome de navi n'était vérifié par rien, et son
+  commentaire l'assumait. Une famille se redéclare désormais entière : prendre
+  `primary` sans `on-primary`, c'est poser sur le nouveau remplissage l'encre
+  prévue pour l'autre polarité.
+
+- **`pnpm run lint:typography`** — jumeau de `lint:spacing`, branché en
+  pre-push et dans les deux workflows. Aucun `font-size`, `font-weight`,
+  `line-height` ou `letter-spacing` littéral sous `src/components`. Porte dure
+  d'emblée : le solde est à zéro, **galerie comprise** — elle en portait 276
+  à elle seule, plus que la librairie entière — et le garde-fou lit aussi les
+  styles inline des templates.
+
+  Trois exceptions, chacune pour une raison : les huit tailles qui restent des
+  littéraux sont de la **géométrie de composant**, pas du texte (les initiales
+  d'un avatar suivent son diamètre) ; `clamp()` est du **texte fluide**, une
+  expression qui balaie l'échelle plutôt qu'une marche dessus ; et un
+  commentaire n'est pas du code.
+
+  Les indirections Sass sont **suivies, pas crues** : `_field-box.scss` route
+  ses tailles par une map, donc `font-size: map.get($s, font)` ne porte aucun
+  littéral — il vit à l'entrée de map, qu'aucun motif `font-size:` n'aurait
+  jamais vue. Chaque `map.get(…, clé)` et chaque `$variable` est résolu contre
+  les liaisons du fichier et vérifié là-bas, et une indirection qui ne résout
+  nulle part est elle-même un signalement : une valeur qu'on ne peut pas
+  suivre, c'est exactement le trou.
+
+### Fixed
+
+- **Un clic hors tuile ferme le `fold-nav-launcher`.** Le scrim portait bien
+  `(click)="close()"` et ne pouvait jamais se déclencher : `.nl-dialog` est
+  `position: fixed; inset: 0` par-dessus lui. Le test qui le couvrait cliquait
+  le scrim directement et passait au vert depuis toujours — jsdom n'a pas de
+  mise en page, il n'a jamais vu le recouvrement.
+
+- **Le mode cartes de `fold-data-table` rend une vraie liste.** `auto-cards`
+  était une réécriture CSS du tableau (`display: block` sur le `<tr>`, `flex`
+  sur les cellules) — ce qui **retire le rôle implicite** des éléments de
+  tableau : la table cessait d'être une table sans devenir une liste, et le
+  `<thead>` restait en en-têtes orphelins. Une `<ul>/<li>` maintenant, avec une
+  coquille commune (contour, ton, sélection) et un gabarit par défaut en `<dl>`.
+
+- **Le zébrage se voit sur navi** — 1,07 → 1,15:1. Et les diviseurs de ligne
+  disparaissent dès que le zébrage est actif : la rayure porte déjà la
+  séparation.
+
+- **Une barre d'onglets repliée défile, et son libellé actif n'est plus rogné.**
+  Le repli et le défilement s'excluaient : passé une douzaine d'items, le
+  premier écrasé était l'item actif, le seul qui garde son libellé. L'infobulle
+  d'un item icône passe dans le **top layer** (`popover`), donc elle échappe au
+  débordement du scroller sans qu'il faille lui réserver de la place.
+
+- **La typographie de la barre répond à `size` seul.** L'orientation pilotait
+  taille ET graisse, donc franchir `foldAt` avec `direction="auto"` recomposait
+  les libellés au lieu de déplacer la barre.
+
+- **`background="surface"` + `activeStyle="fill"` : la pilule active n'est plus
+  rognée** contre l'arête basse du bandeau.
+
+- **Le gap d'un `fold-nav-layout` suit sa propre largeur, pas la fenêtre.** Il
+  tenait sur `@media (max-width: 640px)` pendant que le pli tenait sur la
+  largeur du conteneur : un layout étroit sur grand écran gardait 16px alors
+  qu'il était replié.
+
+- **Le header et les rails du `fold-app-shell` peignent enfin leur fond.**
+  `--fold-color-bg-header` était déclaré par les cinq thèmes et consommé par
+  **zéro composant** : le header rendait transparent sur le `:host` du shell,
+  qui peint `bg-page` — résolu **hors** de la région chrome. Sous navi, du
+  texte clair de chrome sur un fond paper ; idem pour toute bande de rail que
+  le `fold-menu` ne recouvre pas. Antérieur à navi 2 — invisible tant que la
+  page et le chrome partageaient la même polarité.
+
+- **`--fold-font-mono` existe.** Neuf déclarations de la galerie le lisaient,
+  aucune ne le déclarait : il ne rendait que par son fallback. Quatorze autres
+  recopiaient la pile à la main.
+
 ## [0.12.1] - 2026-08-22
 
 ### Fixed
@@ -1635,7 +1912,9 @@ design-token stylesheet.
   `currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
   strings localise via inputs / providers (`provideFoldPanelLabels`).
 
-[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.12.1...HEAD
+[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.14.0...HEAD
+[0.14.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.14.0
+[0.13.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.13.0
 [0.12.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.12.1
 [0.12.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.12.0
 [0.11.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.11.1

package/README.md

@@ -99,11 +99,14 @@ is the umbra or lumen block with its primitive families re-pointed. Adding a
 sixth is a new `[data-theme]` block in `semantic.css` plus the primitives it
 names.
 
-`bubbly` and `navi` also change their corners — **radius is the one scale a theme may
-re-declare**, because corner softness is a brand axis (friendly vs
-institutional) and it is the only scale that changes nothing about where a box
-sits. Type, space, motion and elevation stay theme-invariant: retheming must
-never re-flow a page. The contract test enforces that split.
+`bubbly` and `navi` also change their corners, and `navi` its depth — **radius
+and elevation are the two scales a theme may re-declare**. The line is not that
+one scale is special: a theme may change what a surface **looks like**, never
+where it **sits**. Corner softness is a brand axis (friendly vs institutional);
+depth is calibrated against a ground, and a shadow tuned for near-black ink is
+a grey smear on a light page. Neither moves a box by one pixel. Type, space and
+motion stay theme-invariant — those re-flow or re-time a page. The contract
+test enforces that split.
 
 `navi` is the interesting one: mixing chrome and page means one theme needs the
 `text`/`border`/`surface` roles to differ **per region**, which a single set of