fold-ng 0.3.0 → 0.4.0

package/llms.txt

@@ -19,7 +19,7 @@ with a `@selector` and an `@example`.
 
 - [Install & quickstart](https://github.com/hugoheynard/fold-ng#readme): `npm install fold-ng`, import tokens, use standalone components.
 - [Design tokens](https://github.com/hugoheynard/fold-ng#the-two-tier-model): two-tier model — primitives (`--fold-ref-*`) → semantic (`--fold-color-*`); components consume the semantic layer only.
-- [Theming](https://github.com/hugoheynard/fold-ng#consuming-the-tokens): `data-theme="umbra|lumen|bubbly|navi"`; re-theme by re-pointing the semantic layer, never touching a component.
+- [Theming](https://github.com/hugoheynard/fold-ng#consuming-the-tokens): `data-theme="umbra|lumen|bubbly|navi|titan"`; re-theme by re-pointing the semantic layer, never touching a component.
 
 ## Components
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fold-ng",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Accessible, dark-first Angular 22 UI component library & design system — signals-first, standalone, zoneless, SSR-ready. Design tokens + WCAG-minded components, themeable to the bone.",
   "keywords": [
     "angular",

package/tokens/primitives.css

@@ -108,6 +108,25 @@
   --fold-ref-grape-600: #9333ea; /* hover / strong              */
   --fold-ref-grape-700: #7e22ce; /* readable brand text         */
 
+  /* ── Steel / Titanium — the TITAN theme families ──────────────
+     Brushed titanium, light: a cool near-neutral steel ramp for the
+     brushed silver page, the header + rails at its own tint, and the
+     bright polished cards that float on it — plus a HEAT-anodized
+     titanium brand, the copper-orange the metal takes when torched. */
+  --fold-ref-steel-900: #1b1f24; /* graphite body text              */
+  --fold-ref-steel-600: #566069; /* secondary text                 */
+  --fold-ref-steel-500: #7c8894; /* muted text                     */
+  --fold-ref-steel-400: #9aa6b1; /* faded text                     */
+  --fold-ref-steel-300: #c0c8d0; /* solid brushed-steel border     */
+  --fold-ref-steel-200: #d4dae1; /* brushed page ground            */
+  --fold-ref-steel-150: #e2e7ec; /* header · rail 2 · hover · divider */
+  --fold-ref-steel-100: #eef1f5; /* raised rail plate · sunken     */
+  --fold-ref-steel-50: #f8fafc; /* bright polished card             */
+
+  --fold-ref-titanium-700: #863810; /* brand text (burnt copper)    */
+  --fold-ref-titanium-600: #a5451a; /* hover / strong               */
+  --fold-ref-titanium-500: #c2521b; /* brand base (copper-orange · AA w/ white) */
+
   /* ── Pure black — pairs with white for neutral alpha overlays */
   --fold-ref-black: #000000;
 }

package/tokens/scales.css

@@ -112,3 +112,14 @@
   --fold-radius-md: 16px;
   --fold-radius-lg: 24px;
 }
+
+/* ── Theme shape override: TITAN ──────────────────────────────
+   Softened, iPhone-premium: corners rounded a step past the base so a
+   polished-steel card reads like a device, not a slab — but short of
+   bubbly's pill. `pill` and `round` stay: shapes, not scale steps. */
+[data-theme="titan"] {
+  --fold-radius-xs: 5px;
+  --fold-radius-sm: 10px;
+  --fold-radius-md: 14px;
+  --fold-radius-lg: 20px;
+}

package/tokens/semantic.css

@@ -186,6 +186,99 @@
   color: var(--fold-color-text);
 }
 
+/* ── Accent surface — an auto-inverting region ────────────────────────────────
+   `[data-surface="accent"]` (stamped by fold-card's `surface="accent"`, or the
+   `foldSurface` directive) fills with the brand accent and re-points its whole
+   content sub-tree to an on-accent palette — text, borders, band gradation and
+   even nested buttons / links / icon-tiles read on the accent, with no
+   per-component code.
+
+   The move that makes this both theme-agnostic AND able to *swap* the brand pair
+   (`primary` ↔ `on-primary`, needed for a solid button or a filled icon tile)
+   without a CSS custom-property cycle: the accent + its ink are CAPTURED on the
+   surface element (where the tokens still hold their normal values), then the
+   inverted role-set is applied to DESCENDANTS from those captures — so a role can
+   reference the pre-inversion value it is replacing. Every value is a `color-mix`
+   of the captured pair, so it holds on every theme, and the surface and band
+   steps stay a lighter shade of the accent (gradation kept in-hue).
+
+   A theme that needs to diverge overrides any role by nesting a rule for its own
+   `[data-theme=…]` under `[data-surface="accent"]` — the same seam as chrome. */
+[data-surface="accent"] {
+  color: var(--fold-color-on-primary);
+  --_accent-ink: var(--fold-color-on-primary);
+  --_accent-fill: var(--fold-color-primary);
+}
+[data-surface="accent"] * {
+  /* text ramp → the light ink. COMPRESSED vs a normal surface: an accent ground
+     has little contrast headroom (a mid-bright accent caps white text near 3:1),
+     so the accent card is an emphasis surface — its text clears AA-large (3:1),
+     asserted by accent-contrast.spec.ts, and secondary/muted keep more ink than
+     they would on the page. A light accent that still reads thin overrides the
+     ramp per theme (surfaces.md). */
+  --fold-color-text: var(--_accent-ink);
+  --fold-color-text-secondary: color-mix(
+    in srgb,
+    var(--_accent-ink) 96%,
+    transparent
+  );
+  --fold-color-text-muted: color-mix(
+    in srgb,
+    var(--_accent-ink) 74%,
+    transparent
+  );
+  --fold-color-text-faded: color-mix(
+    in srgb,
+    var(--_accent-ink) 58%,
+    transparent
+  );
+  /* borders + separators → thin ink lines */
+  --fold-color-border: color-mix(in srgb, var(--_accent-ink) 24%, transparent);
+  --fold-color-border-subtle: color-mix(
+    in srgb,
+    var(--_accent-ink) 15%,
+    transparent
+  );
+  /* nested surfaces + raised tiles/bands → a lighter step of the ACCENT itself */
+  --fold-color-surface-card: color-mix(
+    in srgb,
+    var(--_accent-ink) 12%,
+    var(--_accent-fill)
+  );
+  --fold-color-surface-raised: color-mix(
+    in srgb,
+    var(--_accent-ink) 16%,
+    var(--_accent-fill)
+  );
+  --fold-color-surface-hover: color-mix(
+    in srgb,
+    var(--_accent-ink) 18%,
+    var(--_accent-fill)
+  );
+  --fold-color-surface-sunken: color-mix(
+    in srgb,
+    var(--_accent-ink) 8%,
+    var(--_accent-fill)
+  );
+  /* the brand pair, SWAPPED from the captures (no cycle): the fill becomes the
+     light ink (link text, glass button, chip ground) and its on-colour becomes
+     the accent — so a filled icon tile or solid button reads accent-on-light. */
+  --fold-color-primary: var(--_accent-ink);
+  --fold-color-on-primary: var(--_accent-fill);
+  --fold-color-primary-text: var(--_accent-ink);
+  --fold-color-primary-strong: var(--_accent-ink);
+  --fold-color-primary-surface: color-mix(
+    in srgb,
+    var(--_accent-ink) 16%,
+    transparent
+  );
+  --fold-color-primary-border: color-mix(
+    in srgb,
+    var(--_accent-ink) 32%,
+    transparent
+  );
+}
+
 /* ── Elevated surfaces ────────────────────────────────────────
    A `[data-elevated]` (stamped by the `[foldElevated]` directive) is a raised
    card: radius + shadow, riding on the element's own background so its colour
@@ -702,3 +795,148 @@
     transparent
   );
 }
+
+/* ── Extra theme: TITAN ───────────────────────────────────────
+   Brushed titanium, light + warm. A cool brushed-steel ground — the
+   header + rails sit at the page's own tint, so the top reads frameless
+   — with bright polished cards that float off it on the shared elevation
+   shadow (that lift is the "raised metal piece", no per-theme shadow
+   needed). The brand is HEAT-anodized titanium: the copper-orange the
+   metal takes when torched, warming the whole steel read. Content borders
+   re-point to a SOLID steel primitive (a palpable machined seam, where
+   the light themes use an alpha hairline); corners soften in scales.css.
+   Status families hold at the lumen (light) tints — only ground + brand
+   move. Uniform-polarity, so no chrome override is needed. */
+[data-theme="titan"] {
+  /* Surfaces — header + rails at the page's own tint (a frameless top) */
+  --fold-color-bg-page: var(--fold-ref-steel-200);
+  --fold-color-bg-header: var(--fold-ref-steel-150);
+  --fold-color-bg-rail-primary: var(--fold-ref-steel-100);
+  --fold-color-bg-rail-secondary: var(--fold-ref-steel-150);
+  --fold-color-bg-rail-tertiary: color-mix(
+    in srgb,
+    var(--fold-ref-black) 3%,
+    transparent
+  );
+
+  /* Primary / accent — heat-anodized copper-orange, deep enough for white */
+  --fold-color-primary: var(--fold-ref-titanium-500);
+  --fold-color-primary-strong: var(--fold-ref-titanium-600);
+  --fold-color-on-primary: var(--fold-ref-white);
+  --fold-color-primary-text: var(--fold-ref-titanium-700);
+  --fold-color-primary-surface: color-mix(
+    in srgb,
+    var(--fold-ref-titanium-500) 10%,
+    transparent
+  );
+  --fold-color-primary-border: color-mix(
+    in srgb,
+    var(--fold-ref-titanium-500) 28%,
+    transparent
+  );
+
+  /* Info (purple) — lumen tint */
+  --fold-color-info: var(--fold-ref-purple-600);
+  --fold-color-info-text: var(--fold-ref-purple-500);
+  --fold-color-info-surface: color-mix(
+    in srgb,
+    var(--fold-ref-purple-600) 8%,
+    transparent
+  );
+  --fold-color-info-border: color-mix(
+    in srgb,
+    var(--fold-ref-purple-600) 22%,
+    transparent
+  );
+
+  /* Warning (amber) */
+  --fold-color-warning: var(--fold-ref-amber-600);
+  --fold-color-warning-text: var(--fold-ref-amber-550);
+  --fold-color-warning-surface: color-mix(
+    in srgb,
+    var(--fold-ref-amber-600) 8%,
+    transparent
+  );
+  --fold-color-warning-border: color-mix(
+    in srgb,
+    var(--fold-ref-amber-600) 22%,
+    transparent
+  );
+
+  /* Alert (red) */
+  --fold-color-alert: var(--fold-ref-red-600);
+  --fold-color-alert-text: var(--fold-ref-red-450);
+  --fold-color-alert-surface: color-mix(
+    in srgb,
+    var(--fold-ref-red-600) 8%,
+    transparent
+  );
+  --fold-color-alert-border: color-mix(
+    in srgb,
+    var(--fold-ref-red-600) 22%,
+    transparent
+  );
+
+  /* Success (green) */
+  --fold-color-success: var(--fold-ref-green-500);
+  --fold-color-success-text: var(--fold-ref-green-550);
+  --fold-color-success-surface: color-mix(
+    in srgb,
+    var(--fold-ref-green-500) 10%,
+    transparent
+  );
+  --fold-color-success-border: color-mix(
+    in srgb,
+    var(--fold-ref-green-500) 25%,
+    transparent
+  );
+
+  /* Text — graphite on the light page (high contrast) */
+  --fold-color-text: var(--fold-ref-steel-900);
+  --fold-color-text-secondary: var(--fold-ref-steel-600);
+  --fold-color-text-muted: var(--fold-ref-steel-500);
+  --fold-color-text-faded: var(--fold-ref-steel-400);
+
+  /* Card — a bright polished-steel plate that floats off the silver ground */
+  --fold-color-surface-card: var(--fold-ref-steel-50);
+  --fold-color-surface-sunken: var(--fold-ref-steel-100);
+
+  /* Neutral surfaces — faint black overlays for hover/raise cues on light */
+  --fold-color-surface-subtle: color-mix(
+    in srgb,
+    var(--fold-ref-black) 3%,
+    transparent
+  );
+  --fold-color-surface-raised: color-mix(
+    in srgb,
+    var(--fold-ref-black) 5%,
+    transparent
+  );
+  --fold-color-surface-hover: var(
+    --fold-ref-steel-150
+  ); /* solid raised hover */
+
+  /* Borders — SOLID brushed-steel seams (the palpable metal edge), where the
+     light themes use an alpha hairline. */
+  --fold-color-border: var(--fold-ref-steel-300);
+  --fold-color-border-subtle: var(--fold-ref-steel-150);
+
+  /* Glass — frosted brushed steel */
+  --fold-color-glass: color-mix(
+    in srgb,
+    var(--fold-ref-steel-50) 66%,
+    transparent
+  );
+  --fold-color-glass-border: color-mix(
+    in srgb,
+    var(--fold-ref-black) 12%,
+    transparent
+  );
+
+  /* Scrim — a darkening veil behind the mobile nav drawer. */
+  --fold-color-scrim: color-mix(
+    in srgb,
+    var(--fold-ref-black) 45%,
+    transparent
+  );
+}

package/types/fold-ng.d.ts

@@ -238,11 +238,17 @@ type FoldAvatarRingStyle = "solid" | "dotted";
  * (so the same seed is the same colour everywhere, and one `registry.use(...)`
  * recolours every avatar).
  *
+ * A broken `imageUrl` falls back to the initials rather than the browser's
+ * broken-image glyph (and retries when the URL changes).
+ *
  * Three orthogonal state axes compose: `variant` (fill), `muted` (presence —
  * dim for an absence/inactive person), and `ring` + `ringStyle` (a status
  * outline). The component stays domain-agnostic: a screen maps its own states
  * (e.g. absent → `[muted]`, a scheduled arrival → `ring="accent"`
- * `ringStyle="dotted"`), the avatar just draws the primitives.
+ * `ringStyle="dotted"`), the avatar just draws the primitives. The ring is a
+ * redundant emphasis cue — never the sole carrier of a state — because on a
+ * light page a soft status hue (amber/green) can't clear WCAG 3:1 as a thin
+ * line (status-ring-contrast.spec.ts).
  *
  * ## Inputs
  *
@@ -253,12 +259,19 @@ type FoldAvatarRingStyle = "solid" | "dotted";
  * | `colorSeed` | `string`               | `name`    | String used to pick the deterministic colour.   |
  * | `variant`   | `'solid' \| 'ghost'`   | `'solid'` | `'ghost'` renders a dashed border (for guests). |
  * | `square`    | `boolean`              | `false`   | Square shape with a small radius (for orgs).    |
- * | `imageUrl`  | `string`               | —         | Image/logo URL. Replaces initials when set.     |
+ * | `imageUrl`  | `string`               | —         | Image/logo URL. Replaces initials when set; falls back to initials if it fails to load. |
  * | `muted`     | `boolean`              | `false`   | Dim the avatar (same hue, less intense) — absence / inactive. |
  * | `ring`      | `FoldAvatarRing`        | `'none'`  | A status outline (`accent`/`info`/`warning`/`alert`/`success`). |
  * | `ringStyle` | `'solid' \| 'dotted'`  | `'solid'` | Ring line style — `dotted` for scheduled/tentative states. |
  *
  * @selector `fold-avatar`
+ *
+ * @example
+ * ```html
+ * <fold-avatar name="Clément Aubry" size="lg" />
+ * <fold-avatar name="Léa Petit" ring="accent" ringStyle="dotted" />
+ * <fold-avatar name="Acme Corp" square imageUrl="/logo.svg" />
+ * ```
  */
 declare class FoldAvatarComponent {
     private readonly palette;
@@ -274,7 +287,14 @@ declare class FoldAvatarComponent {
     readonly ring: _angular_core.InputSignal<FoldAvatarRing>;
     /** Ring line style — `'dotted'` for scheduled / tentative states. */
     readonly ringStyle: _angular_core.InputSignal<FoldAvatarRingStyle>;
-    /** Readable ink for the initials, derived from the fill's luminance. */
+    /** True once the `<img>` fails to load. Resets whenever `imageUrl` changes,
+     *  so a corrected URL is retried rather than staying on the fallback. */
+    protected readonly imageFailed: _angular_core.WritableSignal<boolean>;
+    /** Show the image only when a URL is set AND it has not failed — a broken URL
+     *  falls back to the initials instead of the browser's broken-image glyph. */
+    protected readonly showImage: _angular_core.Signal<boolean>;
+    /** Readable ink for the initials — the higher-contrast of dark/light ink on
+     *  the fill, so a custom palette stays legible. */
     protected readonly onColor: _angular_core.Signal<string>;
     readonly initials: _angular_core.Signal<string>;
     /** Deterministic fill from the active palette (via the shared registry). */
@@ -308,6 +328,12 @@ declare class FoldAvatarComponent {
  * | `ringStyle`  | `'solid' \| 'dotted'`  | `'solid'` | Ring line style (`dotted` = scheduled).      |
  *
  * @selector `fold-avatar-detail`
+ *
+ * @example
+ * ```html
+ * <fold-avatar-detail primary="Alex Rivers" secondary="alex@sh3pherd.dev" />
+ * <fold-avatar-detail primary="Acme Corp" secondary="Organisation" square />
+ * ```
  */
 declare class FoldAvatarDetailComponent {
     readonly primary: _angular_core.InputSignal<string>;
@@ -821,6 +847,9 @@ declare class FoldToggleIconComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldToggleIconComponent, "fold-toggle-icon", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "toggled": "toggled"; }, never, never, true, never>;
 }
 
+/** Which band(s) carry a chrome treatment (a separator hairline or a raised
+ *  tint): neither, just the header, just the footer, or both. */
+type FoldCardBandChrome = "none" | "header" | "footer" | "both";
 /**
  * `<fold-card>` — the canonical raised content surface: a solid
  * `surface-card` background, a hairline border and a consistent radius. Use it
@@ -829,14 +858,19 @@ declare class FoldToggleIconComponent {
  *
  * - `surface` — `card` (the raised card tint, default) · `sunken` (a deeper
  *   surface for large containers, below the card — the ref's second card tint;
- *   pairs with a fainter `border-subtle` hairline).
+ *   pairs with a fainter `border-subtle` hairline) · `accent` (an accent-filled
+ *   card whose content sub-tree auto-inverts to a compatible on-accent palette).
  * - `radius` — `lg` (14px, default) · `md` · `sm`.
  * - `padding` — `md` (16px, default) · `none` · `sm` · `lg`. Sets the *body*
  *   padding; override with a custom value via `--fold-card-padding`.
- * - `interactive` — adds a hover lift (for clickable cards).
- * - `separators` — draw a hairline between a projected header/footer and the body.
- * - `raisedBands` — tint the header/footer bands a step above the surface
- *   (fainter on `sunken`).
+ * - `interactive` — makes the whole card a clickable control (see below).
+ * - `separators` — which bands get a hairline against the body:
+ *   `none` (default) · `header` · `footer` · `both`.
+ * - `raisedBands` — which bands are tinted a step above the surface (fainter on
+ *   `sunken`): `none` (default) · `header` · `footer` · `both`.
+ *
+ * `separators` and `raisedBands` are per-band and independent axes, so a card can
+ * have (say) a raised, un-separated header over a flush footer.
  *
  * Content projection:
  * - default slot → the card body.
@@ -848,10 +882,18 @@ declare class FoldToggleIconComponent {
  * never pads. So the content padding is identical whether or not the bands show —
  * toggling a header/footer never shifts the body.
  *
+ * **Interactive cards.** `interactive` turns the whole card into a real control:
+ * the host gains `role="button"`, `tabindex="0"`, a focus ring and a hover lift,
+ * and Enter / Space (or a click) emit `(activated)`. Give it an accessible name
+ * with `ariaLabel` when the card's text isn't a sufficient label.
+ * A `role="button"` must not wrap other interactive controls — so an interactive
+ * card must NOT contain buttons/links. For a card with its own inner actions,
+ * keep it non-interactive and put a single primary `<a>`/`<button>` inside.
+ *
  * ```html
  * <fold-card>Static content</fold-card>
  * <fold-card surface="sunken" padding="lg">Deep container</fold-card>
- * <fold-card separators>
+ * <fold-card separators="both">
  *   <h3 cardHeader>Title</h3>
  *   Body content
  *   <div cardFooter>Actions</div>
@@ -863,24 +905,49 @@ declare class FoldToggleIconComponent {
  * (default `clip`) lets content escape the rounded corners.
  *
  * @selector `fold-card`
+ *
+ * @example
+ * ```html
+ * <fold-card interactive ariaLabel="Open Acme Records" (activated)="open()">
+ *   <h3>Acme Records</h3>
+ *   <p>128 contracts · 96 active</p>
+ * </fold-card>
+ * ```
  */
 declare class FoldCardComponent {
-    /** Surface tint — `card` (raised, default) or `sunken` (deeper container). */
-    readonly surface: _angular_core.InputSignal<"card" | "sunken">;
+    /** Surface tint — `card` (raised, default), `sunken` (deeper container), or
+     *  `accent` (an **accent-filled** card: the accent colour as ground, with the
+     *  whole content sub-tree auto-inverted to a compatible on-accent role-set —
+     *  text, borders, band gradation, and even nested buttons/links/icon-tiles
+     *  convert automatically). Use it to make a card in a grid stand out. */
+    readonly surface: _angular_core.InputSignal<"accent" | "card" | "sunken">;
     /** Corner radius — `lg` (default), `md`, or `sm`. */
     readonly radius: _angular_core.InputSignal<"sm" | "md" | "lg">;
     /** Body padding — `md` (default), `none`, `sm`, or `lg`; a custom value can be
      *  set with the `--fold-card-padding` CSS variable. */
     readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | "lg">;
-    /** Add a hover lift for clickable cards. */
-    readonly interactive: _angular_core.InputSignal<boolean>;
-    /** Draw a hairline between a projected header/footer and the body. */
-    readonly separators: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Lift the header/footer bands with a subtle raised tint over the card
-     *  surface (fainter on `sunken`), to set the chrome apart from the body. */
-    readonly raisedBands: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Make the whole card a clickable control: `role="button"` + `tabindex`, a
+     *  focus ring, a hover lift, and Enter/Space/click → `(activated)`. Must not
+     *  wrap other interactive controls (see the class docs). */
+    readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name for the interactive card, when its content isn't enough. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Which bands get a hairline against the body — `none` (default), `header`,
+     *  `footer`, or `both`. */
+    readonly separators: _angular_core.InputSignal<FoldCardBandChrome>;
+    /** Which bands are lifted with a subtle raised tint over the card surface
+     *  (fainter on `sunken`) — `none` (default), `header`, `footer`, or `both`. */
+    readonly raisedBands: _angular_core.InputSignal<FoldCardBandChrome>;
+    /** Fires when an `interactive` card is activated (click, Enter, or Space). */
+    readonly activated: _angular_core.OutputEmitterRef<Event>;
+    /** Whether a per-band chrome value applies to the given band. */
+    protected hasBand(value: FoldCardBandChrome, band: "header" | "footer"): boolean;
+    protected onActivate(event: Event): void;
+    /** Enter/Space activate the card, matching the native button keyboard contract
+     *  (Space is prevented from scrolling the page). */
+    protected onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldCardComponent, "fold-card", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "raisedBands": { "alias": "raisedBands"; "required": false; "isSignal": true; }; }, {}, never, ["[cardHeader]", "*", "[cardFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldCardComponent, "fold-card", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "raisedBands": { "alias": "raisedBands"; "required": false; "isSignal": true; }; }, { "activated": "activated"; }, never, ["[cardHeader]", "*", "[cardFooter]"], true, never>;
 }
 
 /**
@@ -1117,6 +1184,9 @@ declare class FoldFieldComponent {
  * - `tone` — `accent` (default, brand link) · `muted` (secondary).
  * - `icon` / `trailingIcon` — optional glyphs around the label.
  * - `disabled` — button mode only.
+ * - `target` / `rel` — anchor mode only. Setting `target="_blank"` auto-applies
+ *   `rel="noopener noreferrer"` (safe by default); override with an explicit
+ *   `rel`.
  *
  * @selector `fold-link`
  *
@@ -1125,7 +1195,9 @@ declare class FoldFieldComponent {
  * <fold-link icon="company" trailingIcon="chevron-right" (clicked)="openOrg()">
  *   Voir l'organigramme
  * </fold-link>
- * <fold-link href="https://sh3pherd.dev/docs" tone="muted">Documentation</fold-link>
+ * <fold-link href="https://sh3pherd.dev/docs" target="_blank" tone="muted">
+ *   Documentation
+ * </fold-link>
  * ```
  */
 declare class FoldLinkComponent {
@@ -1137,12 +1209,19 @@ declare class FoldLinkComponent {
     readonly tone: _angular_core.InputSignal<"accent" | "muted">;
     /** When set, the link renders as an `<a href>` instead of a button. */
     readonly href: _angular_core.InputSignal<string | undefined>;
+    /** Anchor target (e.g. `_blank`). Anchor mode only. */
+    readonly target: _angular_core.InputSignal<string | undefined>;
+    /** Anchor `rel`. Anchor mode only. Defaults to `noopener noreferrer` when
+     *  `target="_blank"`; set explicitly to override. */
+    readonly rel: _angular_core.InputSignal<string | undefined>;
     /** Disable the button form (no effect on the `href` form). */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Fires on click in the button form. */
-    readonly clicked: _angular_core.OutputEmitterRef<void>;
+    /** Fires on click in the button form; carries the `MouseEvent`. */
+    readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** Resolved `rel` — the explicit value, or a safe default for a new tab. */
+    protected readonly resolvedRel: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldLinkComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldLinkComponent, "fold-link", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldLinkComponent, "fold-link", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -1918,10 +1997,12 @@ declare function observeElementWidth(element?: ElementRef<HTMLElement> | HTMLEle
 
 /**
  * A named surface — the ground a subtree paints itself on. `page` is the
- * document body; `chrome` is application furniture (rails, header) that a
- * theme may colour differently from the page.
+ * document body; `chrome` is application furniture (rails, header) that a theme
+ * may colour differently from the page; `accent` is an **auto-inverting** region
+ * filled with the brand accent, whose content re-points to a compatible
+ * on-accent palette (see the `[data-surface="accent"]` block in `semantic.css`).
  */
-type FoldSurfaceName = "page" | "chrome";
+type FoldSurfaceName = "page" | "chrome" | "accent";
 /**
  * `[foldSurface]` — declares the element a **named surface**, so a theme can
  * re-colour it without knowing anything about the component it lives in.
@@ -4065,5 +4146,5 @@ declare class FoldPaletteRegistry {
 }
 
 export { FOLD_AUTO_PALETTES, FOLD_BLUR_TOKENS, FOLD_BUILTIN_ICONS, FOLD_MOTION_TOKENS, FOLD_PALETTE_DEFAULT, FOLD_PANEL_CLOSE_LABEL, FOLD_RADIUS_TOKENS, FOLD_SEMANTIC_COLOR_TOKENS, FOLD_SHADOW_TOKENS, FOLD_SPACE_TOKENS, FOLD_TEXT_TOKENS, FOLD_TOAST_CONFIG, FoldAppShellComponent, FoldAsideLayoutComponent, FoldAvatarComponent, FoldAvatarDetailComponent, FoldAvatarListComponent, FoldBadgeComponent, FoldButtonComponent, FoldButtonIconComponent, FoldCalloutComponent, FoldCardComponent, FoldChoiceRowComponent, FoldContextCardComponent, FoldDataTableCellDirective, FoldDataTableComponent, FoldDisclosureComponent, FoldElementTitleComponent, FoldElevatedDirective, FoldEmptyStateComponent, FoldFieldComponent, FoldFieldIdDirective, FoldFieldListComponent, FoldFileDropzoneComponent, FoldHeroCardComponent, FoldHeroSectionComponent, FoldIconComponent, FoldIconRegistry, FoldIdService, FoldInputComponent, FoldLinkComponent, FoldLoadingStateComponent, FoldMenuComponent, FoldMenuItemComponent, FoldMenuSectionComponent, FoldMenuSeparatorComponent, FoldNavLauncherComponent, FoldNavLayoutComponent, FoldNavTileComponent, FoldNumberInputComponent, FoldPageLayoutComponent, FoldPageSectionComponent, FoldPageTitleDirective, FoldPaginatorComponent, FoldPaletteRegistry, FoldPanelComponentOutletDirective, FoldPanelHeaderComponent, FoldPanelHostComponent, FoldPanelHostService, FoldPanelRef, FoldPanelToggle, FoldRangeSliderComponent, FoldRepeatPressDirective, FoldSearchComponent, FoldSelectComponent, FoldSliderComponent, FoldSpinnerComponent, FoldStatusBadgeComponent, FoldStickyColumnDirective, FoldSurfaceDirective, FoldTabPanelComponent, FoldTabsComponent, FoldTimelineComponent, FoldToastComponent, FoldToastContainerComponent, FoldToastService, FoldToggleIconComponent, FoldViewNavComponent, foldBlurVar, foldColorProperty, foldColorVar, foldHashSeed, foldMotionVar, foldRadiusVar, foldResolvePalette, foldShadowVar, foldSpaceVar, foldTextVar, observeElementWidth, provideFoldIcons, provideFoldPalette, provideFoldPanelLabels, provideFoldToasts };
-export type { FoldAutoPaletteName, FoldAvatarListItem, FoldAvatarRing, FoldAvatarRingStyle, FoldAvatarVariant, FoldBadgeVariant, FoldBlurToken, FoldBuiltinIconName, FoldButtonEmphasis, FoldButtonIconShape, FoldButtonIconSize, FoldButtonIconTone, FoldButtonIntent, FoldButtonShape, FoldButtonSize, FoldCalloutAppearance, FoldCalloutVariant, FoldChoiceOption, FoldComponentPanelDescriptor, FoldIconName, FoldIconSet, FoldIconSize, FoldMenuItemBadgeTone, FoldMenuLevel, FoldMenuTint, FoldMenuTogglePlacement, FoldMotionToken, FoldNumberControls, FoldNumberSpinner, FoldPageItem, FoldPaletteInput, FoldPanelConfig, FoldPanelContent, FoldPanelDescriptor, FoldPanelHandle, FoldPanelLabels, FoldPanelSide, FoldRadiusToken, FoldRangeValue, FoldSemanticColorToken, FoldShadowToken, FoldSpaceToken, FoldSpinnerSize, FoldStickyColumnAnchor, FoldSurfaceName, FoldTabItem, FoldTableColumn, FoldTableEmpty, FoldTableSort, FoldTableSortDir, FoldTableTone, FoldTabsContext, FoldTemplatePanelDescriptor, FoldTextToken, FoldTimelineDatePlacement, FoldTimelineNode, FoldToast, FoldToastConfig, FoldToastVariant, FoldViewNavItem };
+export type { FoldAutoPaletteName, FoldAvatarListItem, FoldAvatarRing, FoldAvatarRingStyle, FoldAvatarVariant, FoldBadgeVariant, FoldBlurToken, FoldBuiltinIconName, FoldButtonEmphasis, FoldButtonIconShape, FoldButtonIconSize, FoldButtonIconTone, FoldButtonIntent, FoldButtonShape, FoldButtonSize, FoldCalloutAppearance, FoldCalloutVariant, FoldCardBandChrome, FoldChoiceOption, FoldComponentPanelDescriptor, FoldIconName, FoldIconSet, FoldIconSize, FoldMenuItemBadgeTone, FoldMenuLevel, FoldMenuTint, FoldMenuTogglePlacement, FoldMotionToken, FoldNumberControls, FoldNumberSpinner, FoldPageItem, FoldPaletteInput, FoldPanelConfig, FoldPanelContent, FoldPanelDescriptor, FoldPanelHandle, FoldPanelLabels, FoldPanelSide, FoldRadiusToken, FoldRangeValue, FoldSemanticColorToken, FoldShadowToken, FoldSpaceToken, FoldSpinnerSize, FoldStickyColumnAnchor, FoldSurfaceName, FoldTabItem, FoldTableColumn, FoldTableEmpty, FoldTableSort, FoldTableSortDir, FoldTableTone, FoldTabsContext, FoldTemplatePanelDescriptor, FoldTextToken, FoldTimelineDatePlacement, FoldTimelineNode, FoldToast, FoldToastConfig, FoldToastVariant, FoldViewNavItem };
 //# sourceMappingURL=fold-ng.d.ts.map