fold-ng 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -8,6 +8,30 @@ All notable changes to **fold-ng** are documented here. The format follows
 
 _Nothing yet._
 
+## [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
@@ -2246,7 +2270,8 @@ 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.18.0...HEAD
+[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.19.0...HEAD
+[0.19.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.19.0
 [0.18.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.18.0
 [0.17.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.17.1
 [0.17.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.17.0

package/fesm2022/fold-ng.mjs

@@ -3682,6 +3682,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * - `title` — normal-case, `text-md`, primary. A card/panel heading; a leading
  *   `icon` renders in a tile whose tone is set by `iconTone`
  *   (`neutral` raised · `primary` filled brand · `faded` dim).
+ * - `caps` — uppercase at the title's size and in primary ink. The register for
+ *   a REGION that announces itself: a well, a rail, a band. `eyebrow` whispers
+ *   above a thing, `caps` names the thing — which is why it takes the full text
+ *   colour and not the muted one.
  *
  * A trailing action (edit/add button, lock badge) projects into `[titleAction]`,
  * right-aligned. The title — not the action — is the heading for assistive tech.
@@ -3692,6 +3696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * ```html
  * <fold-element-title title="Documents" variant="bar" />
  * <fold-element-title variant="title" icon="company" title="Contexte" subtitle="Activité de l'espace" />
+ * <fold-element-title variant="caps" title="Mes suivis" subtitle="3 en cours" />
  * <fold-element-title title="Poste">
  *   <button titleAction (click)="edit()">✎</button>
  * </fold-element-title>
@@ -3710,7 +3715,8 @@ class FoldElementTitleComponent {
     /** Optional secondary line under the title. */
     subtitle = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
-    /** Emphasis — `eyebrow` (10px muted), `bar` (11px secondary), `title` (text-md, normal-case). */
+    /** Emphasis — `eyebrow` (10px muted), `bar` (11px secondary), `title` (text-md,
+     *  normal-case), `caps` (title-size uppercase, primary ink). */
     variant = input("eyebrow", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** Heading outline depth exposed to assistive tech (`aria-level`). */
@@ -3723,19 +3729,20 @@ class FoldElementTitleComponent {
     iconSize = computed(() => this.variant() === "title" ? "md" : "sm", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldElementTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldElementTitleComponent, isStandalone: true, selector: "fold-element-title", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, headingId: { classPropertyName: "headingId", publicName: "headingId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.v-bar": "variant() === 'bar'", "class.v-title": "variant() === 'title'", "class.it-primary": "iconTone() === 'primary'", "class.it-faded": "iconTone() === 'faded'", "attr.title": "null" } }, ngImport: i0, template: "@if (icon(); as ic) {\n  <span class=\"et-icon\"><fold-icon [name]=\"ic\" [size]=\"iconSize()\" /></span>\n}\n<span class=\"et-main\">\n  <span class=\"et-row\">\n    <span\n      class=\"et-label\"\n      role=\"heading\"\n      [attr.id]=\"headingId()\"\n      [attr.aria-level]=\"level()\"\n      >{{ title() }}</span\n    >\n    <span class=\"et-action\"><ng-content select=\"[titleAction]\" /></span>\n  </span>\n  @if (subtitle(); as s) {\n    <span class=\"et-sub\">{{ s }}</span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--fold-space-md);margin:0}.et-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.et-row{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-sm)}.et-label{min-width:0;font-family:var(--fold-font-label);font-size:var(--fold-text-2xs);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-caps);text-transform:uppercase;color:var(--fold-color-text-muted)}:host(.v-bar) .et-label{font-size:var(--fold-text-xs);color:var(--fold-color-text-secondary)}:host(.v-title) .et-label{font-size:var(--fold-text-base);letter-spacing:var(--fold-tracking-normal);text-transform:none;color:var(--fold-color-text)}.et-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.et-action{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.et-action:empty{display:none}.et-icon{flex:none;display:grid;place-items:center;color:var(--fold-color-primary)}:host(.v-title) .et-icon{width:40px;height:40px;border-radius:var(--fold-radius-md);border:1px solid var(--fold-color-border);background:var(--fold-color-surface-raised)}:host(.v-title.it-primary) .et-icon{background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.v-title.it-faded) .et-icon{background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);color:var(--fold-color-text-muted)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldElementTitleComponent, isStandalone: true, selector: "fold-element-title", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, headingId: { classPropertyName: "headingId", publicName: "headingId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.v-bar": "variant() === 'bar'", "class.v-title": "variant() === 'title'", "class.v-caps": "variant() === 'caps'", "class.it-primary": "iconTone() === 'primary'", "class.it-faded": "iconTone() === 'faded'", "attr.title": "null" } }, ngImport: i0, template: "@if (icon(); as ic) {\n  <span class=\"et-icon\"><fold-icon [name]=\"ic\" [size]=\"iconSize()\" /></span>\n}\n<span class=\"et-main\">\n  <span class=\"et-row\">\n    <span\n      class=\"et-label\"\n      role=\"heading\"\n      [attr.id]=\"headingId()\"\n      [attr.aria-level]=\"level()\"\n      >{{ title() }}</span\n    >\n    <span class=\"et-action\"><ng-content select=\"[titleAction]\" /></span>\n  </span>\n  @if (subtitle(); as s) {\n    <span class=\"et-sub\">{{ s }}</span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--fold-space-md);margin:0}.et-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.et-row{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-sm)}.et-label{min-width:0;font-family:var(--fold-font-label);font-size:var(--fold-text-2xs);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-caps);text-transform:uppercase;color:var(--fold-color-text-muted)}:host(.v-bar) .et-label{font-size:var(--fold-text-xs);color:var(--fold-color-text-secondary)}:host(.v-caps) .et-label{font-size:var(--fold-text-base);font-weight:var(--fold-weight-extrabold);letter-spacing:var(--fold-tracking-caps);color:var(--fold-color-text)}:host(.v-title) .et-label{font-size:var(--fold-text-base);letter-spacing:var(--fold-tracking-normal);text-transform:none;color:var(--fold-color-text)}.et-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.et-action{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.et-action:empty{display:none}.et-icon{flex:none;display:grid;place-items:center;color:var(--fold-color-primary)}:host(.v-title) .et-icon{width:40px;height:40px;border-radius:var(--fold-radius-md);border:1px solid var(--fold-color-border);background:var(--fold-color-surface-raised)}:host(.v-title.it-primary) .et-icon{background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.v-title.it-faded) .et-icon{background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);color:var(--fold-color-text-muted)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldElementTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: "fold-element-title", standalone: true, imports: [FoldIconComponent], host: {
                         "[class.v-bar]": "variant() === 'bar'",
                         "[class.v-title]": "variant() === 'title'",
+                        "[class.v-caps]": "variant() === 'caps'",
                         "[class.it-primary]": "iconTone() === 'primary'",
                         "[class.it-faded]": "iconTone() === 'faded'",
                         // `title` is a heading input — strip the reflected native attribute so it
                         // never doubles as a browser tooltip.
                         "[attr.title]": "null",
-                    }, template: "@if (icon(); as ic) {\n  <span class=\"et-icon\"><fold-icon [name]=\"ic\" [size]=\"iconSize()\" /></span>\n}\n<span class=\"et-main\">\n  <span class=\"et-row\">\n    <span\n      class=\"et-label\"\n      role=\"heading\"\n      [attr.id]=\"headingId()\"\n      [attr.aria-level]=\"level()\"\n      >{{ title() }}</span\n    >\n    <span class=\"et-action\"><ng-content select=\"[titleAction]\" /></span>\n  </span>\n  @if (subtitle(); as s) {\n    <span class=\"et-sub\">{{ s }}</span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--fold-space-md);margin:0}.et-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.et-row{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-sm)}.et-label{min-width:0;font-family:var(--fold-font-label);font-size:var(--fold-text-2xs);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-caps);text-transform:uppercase;color:var(--fold-color-text-muted)}:host(.v-bar) .et-label{font-size:var(--fold-text-xs);color:var(--fold-color-text-secondary)}:host(.v-title) .et-label{font-size:var(--fold-text-base);letter-spacing:var(--fold-tracking-normal);text-transform:none;color:var(--fold-color-text)}.et-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.et-action{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.et-action:empty{display:none}.et-icon{flex:none;display:grid;place-items:center;color:var(--fold-color-primary)}:host(.v-title) .et-icon{width:40px;height:40px;border-radius:var(--fold-radius-md);border:1px solid var(--fold-color-border);background:var(--fold-color-surface-raised)}:host(.v-title.it-primary) .et-icon{background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.v-title.it-faded) .et-icon{background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);color:var(--fold-color-text-muted)}\n"] }]
+                    }, template: "@if (icon(); as ic) {\n  <span class=\"et-icon\"><fold-icon [name]=\"ic\" [size]=\"iconSize()\" /></span>\n}\n<span class=\"et-main\">\n  <span class=\"et-row\">\n    <span\n      class=\"et-label\"\n      role=\"heading\"\n      [attr.id]=\"headingId()\"\n      [attr.aria-level]=\"level()\"\n      >{{ title() }}</span\n    >\n    <span class=\"et-action\"><ng-content select=\"[titleAction]\" /></span>\n  </span>\n  @if (subtitle(); as s) {\n    <span class=\"et-sub\">{{ s }}</span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--fold-space-md);margin:0}.et-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.et-row{display:flex;align-items:center;justify-content:space-between;gap:var(--fold-space-sm)}.et-label{min-width:0;font-family:var(--fold-font-label);font-size:var(--fold-text-2xs);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-caps);text-transform:uppercase;color:var(--fold-color-text-muted)}:host(.v-bar) .et-label{font-size:var(--fold-text-xs);color:var(--fold-color-text-secondary)}:host(.v-caps) .et-label{font-size:var(--fold-text-base);font-weight:var(--fold-weight-extrabold);letter-spacing:var(--fold-tracking-caps);color:var(--fold-color-text)}:host(.v-title) .et-label{font-size:var(--fold-text-base);letter-spacing:var(--fold-tracking-normal);text-transform:none;color:var(--fold-color-text)}.et-sub{font-size:var(--fold-text-xs);color:var(--fold-color-text-muted)}.et-action{flex:none;display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.et-action:empty{display:none}.et-icon{flex:none;display:grid;place-items:center;color:var(--fold-color-primary)}:host(.v-title) .et-icon{width:40px;height:40px;border-radius:var(--fold-radius-md);border:1px solid var(--fold-color-border);background:var(--fold-color-surface-raised)}:host(.v-title.it-primary) .et-icon{background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.v-title.it-faded) .et-icon{background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);color:var(--fold-color-text-muted)}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], headingId: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingId", required: false }] }] } });
 
 /**