fold-ng 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -8,6 +8,239 @@ All notable changes to **fold-ng** are documented here. The format follows
 
 _Nothing yet._
 
+## [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
+
+- **A panel body no longer crushes a child that clips its own overflow.**
+  `fold-panel-body` laid its children out as a flex column, where every child
+  may shrink and a child whose `overflow` is not `visible` has an automatic
+  minimum size of **zero**. `fold-danger-zone` clips its overflow to keep its
+  dividers flush with its rounded corners, so in a full panel it was measured
+  at **2px** — its two borders — with the destructive action, its heading and
+  its explanation all erased. The box reported barely any overflow, so there
+  was nothing to scroll to either: the panel looked finished and was not.
+
+  The body is now a single-column grid with `grid-auto-rows: max-content`:
+  rows are sized by their content and the box overflows, which is what a
+  scrolling column is for. Every child is protected, not only the ones we
+  thought of. `fold-danger-zone` also asks for its content-based minimum back
+  explicitly, so it survives a hand-rolled flex column too.
+
 ## [0.12.0] - 2026-08-22
 
 ### Added
@@ -1616,7 +1849,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.0...HEAD
+[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.13.0...HEAD
+[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
 [0.11.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.11.0

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