# Changelog All notable changes to **fold-ng** are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/); the project follows [Semantic Versioning](https://semver.org/). ## [Unreleased] _Nothing yet._ ## [0.27.2] - 2026-09-11 ### Changed - **Le scrim d'un dialogue FLOUTE, sur écran étroit seulement.** Affaire de proportion, pas de goût : sur une grande fenêtre le dialogue couvre un quart de la surface, et l'assombrissement suffit à dire lequel des deux plans compte. Sur un téléphone il en couvre la quasi-totalité, et les deux centimètres de contenu qui dépassent se lisent comme une page encore atteignable. Le flou tranche : ce qui est derrière est **suspendu**, pas seulement plus sombre. `@media` et non `@container` — le dock d'un dialogue est `fixed`, donc il a la taille de la fenêtre, et un élément ne peut jamais répondre à sa propre requête de conteneur. ## [0.27.1] - 2026-09-11 ### Fixed - 🔴 **Le dialogue centré ne l'était pas.** `side="center"` posait `place-items: center` sur un dock passé en `grid` — mais la règle de base du dock porte `justify-content: flex-end`, pour coller une feuille latérale à son bord, et `place-items` ne la remet pas : elle règle la place de l'élément DANS sa piste, pas celle de la piste dans la grille. Le dialogue restait donc plaqué au bord droit d'un dock pourtant large comme la fenêtre. `place-content: center` par-dessus. Et le cas qui le tient lit la **feuille compilée** : jsdom n'applique aucun style de composant, donc mesurer un rectangle serait passé sur un dialogue décentré. ## [0.27.0] - 2026-09-11 ### Added - **`side="center"` — le dialogue modal, enfin, et sans second composant.** `fold-panel-host` ne savait accoster qu'un BORD. Un « êtes-vous sûr ? », un lecteur de code, un aperçu : ces surfaces-là n'appartiennent pas au bord de l'écran, elles interrompent la page. `llms.txt` disait « pas encore de dialogue modal — prenez un panneau modal » ; c'est désormais le même panneau, avec un côté de plus. Un composant à part aurait fait auditer deux fois la même mécanique : le piège à focus, la barrière `inert`, le verrou de défilement, le nom accessible, `Échap`, la poignée typée `open()`. Tout cela vit déjà ici. Compléter l'axe coûte une valeur d'énumération ; ouvrir un second composant coûte une seconde surface publique à tenir jusqu'à la 1.0. 🔴 **C'est le seul côté qui QUITTE la région de contenu.** Les autres s'ancrent en `absolute` dedans, et c'est juste : une feuille travaille à CÔTÉ de la page, donc elle reste sous la barre de l'app et ses rails. Un dialogue, lui, suspend la page — il est `fixed`, il couvre le chrome, et il couvre aussi ce qu'un consommateur a lui-même épinglé par-dessus la page. Un dock `absolute` à `z-index: 50` ne le pouvait pas : une application qui fait monter sa propre feuille sur un téléphone passait DEVANT le panneau censé l'interrompre. Deux conséquences de la même idée : il porte un **scrim** — c'est la seule forme d'ici qui obscurcit ce qu'elle suspend, là où une feuille latérale laisse lire la page à côté — et il n'a **pas de poignée**, puisqu'il ne vient d'aucun bord. Il arrive sur place, à peine agrandi : « ceci est maintenant devant vous », et non « ceci a voyagé ». ```ts panels.open(ScanPanel, { side: "center", width: "sm" }); ``` ## [0.26.1] - 2026-09-11 ### Fixed - 🔴 **`clickable` n'atteignait que la vue large — une carte ignorait le clic.** `fold-data-table` branche `rowClick` sur son `` ; le `
  • ` de `narrowLayout="cards"` ne portait ni gestionnaire, ni `tabindex`, ni clavier. Une table qui ouvre un détail depuis `rowClick` devenait donc **inerte dès que son conteneur se resserrait** : sur un téléphone, aucune ligne ne s'ouvrait plus. Et la panne était muette. Une carte qui ignore un appui ne lève rien, le typecheck ne voit pas un gabarit, et la vue large — celle qu'on développe — n'a jamais eu le problème. On ne s'en aperçoit qu'en posant le doigt sur un écran étroit. La carte reçoit exactement ce que la rangée avait : le clic, `Enter` et `Espace`, le `tabindex` glissant et les flèches, le curseur et le même anneau de focus à 2 px. **Une bascule de mise en page ne doit pas changer ce que la table FAIT.** Deux corollaires de la même règle, dans la carte : - le **chevron** de `foldRowDetail` arrête le clic — il le faisait déjà en vue large, et sans cela déplier aurait aussi ouvert la ligne ; - la **note** (`foldRowNote`) et le **tiroir** ouvert l'arrêtent aussi. En vue large ce sont des `` séparés, donc les activer n'a jamais activé la rangée ; dans une carte ils vivent à l'intérieur de la coque cliquable, et un bouton posé là aurait ouvert le détail par-dessus son propre geste. Aucun changement d'API : `clickable` veut simplement dire ce qu'il disait. ## [0.26.0] - 2026-09-11 ### Added - **`foldRowNote` — une ligne sous une ligne, et qui ne se replie pas.** `fold-data-table` n'avait qu'une surface sous une rangée : le tiroir `foldRowDetail`. Or projeter ce gabarit fait pousser une colonne de chevrons, parce qu'un tiroir cache quelque chose et qu'il faut de quoi le demander. Un avertissement qui doit se lire EN MÊME TEMPS que sa ligne ne cache rien : le chevron n'y ouvre pas, il obstrue. La note est donc un concept à part, pas une option du tiroir. Aucun état, aucune bascule, aucun `aria-expanded` — il n'y a rien à révéler. Elle se rend en pleine largeur sous sa rangée en vue large, et sous les champs de la carte en vue étroite : même promesse des deux côtés. Elle demande **deux moitiés**, et la seconde n'est pas de la cérémonie : le gabarit dit à quoi une note ressemble, le prédicat `rowNote` dit **quelles** lignes en portent une. Sans lui, chaque rangée émettrait un `` vide — et une rangée vide n'est pas invisible : un lecteur d'écran y entre et annonce une ligne blanche par enregistrement. Les deux moitiés doivent être là ; l'une sans l'autre ne rend rien, ce qui est le silence qu'on attend d'un câblage à moitié fait. ```html … ``` Nouveau : `FoldDataTableRowNoteDirective`, le type `FoldTableRowNote`, l'entrée `rowNote`, et le jeton `--fold-data-table-note-padding`. ### Fixed - **La zébrure se recomptait à chaque rangée intercalée.** `:nth-child(even)` compte TOUS les frères : un tiroir ouvert décalait la parité et retournait les stries sous lui. Le sélecteur compte désormais les seules lignes de données (`:nth-child(even of .folddt-row)`), ce qui est ce que la strie a toujours voulu dire — et sans quoi une note, qui ne se referme jamais, aurait fait tomber toutes les lignes en rang impair : plus une seule strie. ## [0.25.0] - 2026-09-05 ### Added - **`fold-search` devient un contrôle, et non plus un capteur.** Sa `value` est un `model()` : la boîte se pilote donc de l'extérieur. C'est ce qui manquait pour qu'elle remplace une recherche écrite à la main — choisir un filtre ailleurs doit pouvoir VIDER le champ, et une recherche en écriture seule continuait d'afficher un terme que les résultats n'honoraient plus. Deux façons de s'en servir, et elles répondent à deux questions : `[(value)]` donne le terme comme **état**, à chaque frappe — c'est ce que veut un filtrage d'un tableau déjà en mémoire, où l'anti-rebond n'ajoute que de la latence ; `(searchChange)` le donne comme **événement**, une fois posé — c'est ce que veut une requête au serveur. Les deux se composent. Écrire `value` de l'extérieur n'émet jamais : celui qui écrit sait déjà. - **`fold-search` porte enfin sa loupe, sa croix et son compte.** Les trois étaient recopiés dans chaque écran, avec le même oubli à chaque fois : le compte de résultats change sous une recherche, donc il doit être **annoncé**. Il porte `role="status"` et `aria-live="polite"`, et un utilisateur qui ne voit pas la grille apprend enfin que quatre cents lignes sont devenues trois. `resultCount` (rien tant qu'il vaut `null`), `resultLabel` (le mot après le nombre — « pièces », "rows") et `placement` : `top`, `end` ou `bottom`. `end` et non `right` — la bibliothèque se pose en propriétés **logiques**, et le compte doit suivre le sens de lecture plutôt qu'un côté de l'écran. - **`fold-input` gagne deux affixes**, et c'est de là que `fold-search` tire les siens : `leadingIcon` dessine un glyphe DANS la boîte, avant le texte (le champ réserve la place lui-même, et le glyphe ne prend pas le clic) ; `clearable` + `clearLabel` posent un `×` de fin tant qu'il y a quelque chose à effacer, qui vide la valeur **et rend le focus** — sans quoi il faut un second clic pour reprendre la saisie. Les deux sont à `false` par défaut : un champ de formulaire qui s'efface tout seul invite l'accident qu'il ne sait pas défaire. Le `×` ne paraît ni en lecture seule ni désactivé — il promettrait un geste que le contrôle refuse — et un mot de passe `revealable` garde la place de fin : perdre son œil casse la saisie, perdre la croix la rend seulement moins commode. ## [0.24.0] - 2026-08-29 ### Added - **`FoldTableColumn.numeric`** — la colonne tient des NOMBRES, et deux choses suivent : chiffres tabulaires et alignement à droite. C'est la même chose dite deux fois, d'où un drapeau et non deux propriétés — des chiffres proportionnels alignés à droite ne s'alignent toujours pas sous eux-mêmes, et des chiffres tabulaires en drapeau à gauche perdent leur raison d'être. Une colonne de montants en chiffres proportionnels oblige l'œil à lire chaque ligne au lieu de balayer la colonne — ce qui est la seule raison de mettre des nombres dans un tableau. L'en-tête suit sans qu'on le lui dise ; un `align` écrit à la main gagne toujours. ### Docs - **`FoldTableColumn.cellClass` dit enfin où sa classe atterrit** : sur le `` de la table, qui porte l'encapsulation de la TABLE. Les styles de composant du consommateur ne l'atteignent donc jamais — seule une classe globale y fait quelque chose. Pour habiller une cellule depuis sa propre feuille de style, il faut projeter un `` : ce qu'il rend appartient au consommateur, attribut compris. ## [0.23.0] - 2026-08-29 ### Added - **`[foldButton]` : six crochets de thème pour sa VOIX** — `--fold-button-font`, `--fold-button-weight`, `--fold-button-tracking`, `--fold-button-transform`, `--fold-button-radius`, `--fold-button-min-height`. Les boutons d'une marque parlent dans un registre — une famille d'affichage, une graisse, des capitales, un angle, une hauteur plancher — et ce registre est le même sur tous les boutons de l'app. Une app le déclare désormais UNE fois sur une racine. Ils existent parce que l'extérieur PERD toujours : `:host(.md)` porte un attribut et une classe, donc une classe d'app ne peut pas le surclasser. Sans crochet, l'écran qui veut son registre réécrit le bouton à la main — et le système cesse d'être l'endroit où les boutons se décident. `font-size` et `padding` ne sont volontairement PAS des crochets : ils appartiennent aux préréglages de taille. Une voix est un registre, pas une échelle, et une app qui écraserait la taille d'ici aplatirait `sm`/`md`/`lg` en un seul bouton portant trois noms. - **`FoldTableColumn.value`** — une colonne qui ne fait qu'afficher un champ le DIT, au lieu de réclamer un `` pour une interpolation. ```ts { key: "date", label: "Date", value: (row) => row.date } ``` Quatre colonnes sur sept sont de celles-là dans une table réelle, et leur demander un gabarit chacune enterre les deux qui en méritent vraiment un. Le gabarit reste la voie du BALISAGE — une pastille, deux lignes empilées, un lien — et il **gagne** quand les deux sont donnés : une colonne qui porte l'accesseur et le gabarit est une colonne en cours de migration, pas un conflit à arbitrer. `FoldTableColumn` devient générique sur le type de ligne pour que l'accesseur soit typé ; le défaut `unknown` garde un `FoldTableColumn[]` nu valide. Un garde de développement signale la colonne qui ne définit ni l'un ni l'autre : ses cellules se rendent vides, à l'identique sur chaque ligne, ce qui se lit comme une donnée manquante et non comme une définition manquante. ## [0.22.1] - 2026-08-29 ### Fixed - **`--fold-data-table-detail-padding` n'avait aucun effet en vue tableau.** La règle qui peint la rangée du tiroir portait aussi `padding: 0`, et comme elle est plus spécifique que `.folddt-detail`, elle gagnait : le tiroir restait plat quoi que l'appelant demande. Le jeton ne fonctionnait qu'en vue carte, là où cette règle ne s'applique pas. Le zéro s'y était mis pour neutraliser le rembourrage de cellule — qui n'existe pas ici : la cellule du tiroir porte `folddt-detail`, jamais `folddt-cell`. ## [0.22.0] - 2026-08-29 ### Added - **Les trois surfaces du corps de `fold-data-table` se thèment** — `--fold-data-table-row-bg`, `--fold-data-table-row-hover-bg`, `--fold-data-table-detail-bg`. Elles vont ensemble : une table dessinée sur du papier veut que l'interaction CREUSE une rangée, une table posée sur la page veut qu'elle la LÈVE. Le sens dépend de la façon dont le papier de l'app est étagé, et l'app est seule à le savoir — mieux vaut qu'elle le dise que de la voir batailler contre la cascade depuis l'extérieur. Le défaut de `row-bg` est l'absence de fond : la table prend la couleur de ce sur quoi on l'a posée, ce qui est exactement ce qu'une table dans une carte doit faire. ## [0.21.0] - 2026-08-29 ### Added - **`--fold-data-table-detail-padding`** — le rembourrage du tiroir se thème. L'air d'un tiroir appartient à ce qu'on y projette : une fiche clé/valeur en veut, une rangée d'actions n'en veut pas, et seul l'appelant sait ce qu'il a mis dedans. ## [0.20.0] - 2026-08-29 ### Added - **`fold-data-table` : le tiroir de détail**, ouvert EN PLACE sous sa propre ligne. On projette un `` et la table fait le reste : une colonne de bascule en fin de rangée, un tiroir pleine largeur sous la ligne, et — en vue étroite — le même tiroir DANS la carte. Sa présence est l'interrupteur : une table sans gabarit de détail se comporte exactement comme avant. `[(expanded)]` est un modèle à double sens, comme `selected` ; `expandMode` décide si ouvrir une ligne ferme les autres — `single` par défaut, parce qu'un tiroir se lit et ne se compare pas, et que deux tiroirs ouverts chassent le reste de la liste hors de l'écran. Pourquoi en place plutôt qu'un panneau : on ouvre une ligne pour regarder une chose, pas pour quitter l'endroit qu'on a mis du temps à trouver. C'est aussi pourquoi la vue en cartes garde le tiroir dans la carte au lieu de basculer vers une autre surface — même promesse, même geste, quelle que soit la largeur. Le bouton porte `aria-expanded` et **pointe** son tiroir par `aria-controls` : sans lui, un lecteur d'écran annonce « développé » sans dire ce qui s'est ouvert. La colonne de bascule a un en-tête vide à l'œil seulement — le libellé reste dans l'arbre, sinon la dernière colonne s'annonce « colonne 8 ». ### Fixed - **Navigation clavier : les flèches enjambent un tiroir ouvert.** Les aides de focus prenaient le frère IMMÉDIAT ; avec un tiroir intercalé, la flèche visait une rangée sans `tabindex` et le focus ne bougeait plus — la navigation semblait se bloquer exactement sur les lignes qu'on venait d'ouvrir. `Fin` avait le même défaut quand la dernière ligne était ouverte. ## [0.19.0] - 2026-08-28 ### Added - **`fold-element-title` : la variante `caps`** — les capitales à la taille et à l'encre du titre, pour une RÉGION qui s'annonce : un puits, un rail, une bande. `eyebrow` chuchote au-dessus d'une chose, `caps` NOMME la chose — d'où l'encre pleine et non la teinte atténuée. Elle comblait un trou réel : entre un sur-titre de 10 px et un titre en bas de casse, il n'existait aucun registre pour la tête d'une section qui doit se lire d'un bout de l'écran à l'autre. ⚠️ Son interlettrage reste **positif** (`--fold-tracking-caps`). Des capitales ont besoin d'air entre les fûts : le resserrement qui flatte une grande ligne d'affichage les soude à cette taille-là. C'est un défaut qui ne se voit que sur fond clair — sur un fond sombre, la halation du texte le rattrape — et qui fait donc rendre deux titres différemment pour des règles identiques. Le glyphe de tête y reste **plein**, sans la tuile de 40 px du variant `title` : une tuile à côté d'une ligne de capitales de 14 px pèserait plus lourd que les mots qu'elle introduit. ## [0.18.0] - 2026-08-28 ### Added - **`fold-app-shell` : la bande `subheader`**, sous la barre d'en-tête — une sous-barre de navigation, un ruban de contexte, une rangée de filtres. Elle suit **exactement la règle de placement de l'en-tête** : `subheaderLayout="inset"` (par défaut) la pose au-dessus de la colonne de contenu, les rails montant à son flanc ; `"full"` l'étire sur toutes les colonnes, au-dessus des rails. Deux réglages de hauteur l'accompagnent, `subheaderHeight` (52) et `subheaderHeightMobile` (48), avec leurs variables `--fold-shell-subheader-height*` — la même paire entrée typée / variable CSS que le reste de la coque. Comme le pied, elle est **auto-effaçante** : sans rien de projeté, elle ne réclame aucune rangée. Elle est rendue en `
    ` nu — `
    ` est déjà pris, et la sémantique de la bande (un `