fold-ng 0.2.1 → 0.4.0

package/fesm2022/fold-ng.mjs

@@ -1,6 +1,7 @@
 import { DOCUMENT, NgTemplateOutlet, NgClass, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, inject, ElementRef, effect, Directive, Injectable, signal, DestroyRef, model, computed, HostListener, Component, InjectionToken, Service, booleanAttribute, numberAttribute, ViewEncapsulation, output, viewChild, afterNextRender, contentChildren, TemplateRef, isDevMode, contentChild, ViewContainerRef, Injector } from '@angular/core';
+import { input, inject, ElementRef, effect, Directive, Injectable, signal, DestroyRef, model, computed, HostListener, Component, InjectionToken, Service, booleanAttribute, linkedSignal, numberAttribute, ViewEncapsulation, output, viewChild, afterNextRender, contentChildren, TemplateRef, isDevMode, contentChild, viewChildren, ViewContainerRef, Injector } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 /**
  * A matched element is only truly focusable if it's rendered — `display:none`
@@ -637,32 +638,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             type: Service
         }] });
 
-/** Ink for text on a light vs dark categorical fill. */
-const DARK_INK = "#1a202c";
-const LIGHT_INK = "#ffffff";
 /**
- * Pick a readable ink for text drawn on `fill`, from its relative luminance —
- * so a custom (dark) palette supplied via `provideFoldPalette` still gets legible
- * initials instead of the fixed dark ink. Non-hex fills fall back to dark ink.
+ * Small WCAG colour-contrast helpers — used to pick a legible ink for text on a
+ * categorical fill (avatar initials), and lockable by a contrast test.
+ *
+ * These operate on plain hex strings (`#rgb` / `#rrggbb`); a categorical palette
+ * is qualitative *data* (hex is allowed there — rule 5.3), so contrast can't be
+ * a token concern and lives here.
  */
-function readableInk(fill) {
-    const hex = fill.trim().replace(/^#/, "");
-    const full = hex.length === 3
-        ? hex
+/** Parse `#rgb` / `#rrggbb` to `[r, g, b]` (0–255), or `null` if not a hex. */
+function parseHex(hex) {
+    const h = hex.trim().replace(/^#/, "");
+    const full = h.length === 3
+        ? h
             .split("")
             .map((c) => c + c)
             .join("")
-        : hex;
+        : h;
     if (!/^[0-9a-fA-F]{6}$/.test(full)) {
-        return DARK_INK;
+        return null;
     }
-    const channel = (i) => {
-        const c = parseInt(full.slice(i, i + 2), 16) / 255;
-        return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    return [
+        parseInt(full.slice(0, 2), 16),
+        parseInt(full.slice(2, 4), 16),
+        parseInt(full.slice(4, 6), 16),
+    ];
+}
+/** WCAG relative luminance of a hex colour, or `null` if it isn't a hex. */
+function foldLuminance(hex) {
+    const rgb = parseHex(hex);
+    if (!rgb) {
+        return null;
+    }
+    const lin = (c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
     };
-    const luminance = 0.2126 * channel(0) + 0.7152 * channel(2) + 0.0722 * channel(4);
-    return luminance > 0.4 ? DARK_INK : LIGHT_INK;
+    return 0.2126 * lin(rgb[0]) + 0.7152 * lin(rgb[1]) + 0.0722 * lin(rgb[2]);
 }
+/** WCAG contrast ratio between two hex colours (1–21), or `null` if either
+ *  isn't a hex. */
+function foldContrast(a, b) {
+    const la = foldLuminance(a);
+    const lb = foldLuminance(b);
+    if (la === null || lb === null) {
+        return null;
+    }
+    const [hi, lo] = la >= lb ? [la, lb] : [lb, la];
+    return (hi + 0.05) / (lo + 0.05);
+}
+/**
+ * The **more legible** of two inks for text drawn on `fill` — whichever has the
+ * higher WCAG contrast. Picking the max (rather than thresholding luminance)
+ * guarantees the best of the pair for *any* fill: at the black/white crossover
+ * both inks already clear ~4.5:1, so every fill lands at or above it. A non-hex
+ * `fill` falls back to `dark`.
+ */
+function foldReadableInk(fill, dark, light) {
+    const withDark = foldContrast(fill, dark);
+    const withLight = foldContrast(fill, light);
+    if (withDark === null || withLight === null) {
+        return dark;
+    }
+    return withDark >= withLight ? dark : light;
+}
+
+/** Ink for text on a light vs dark categorical fill. */
+const DARK_INK = "#1a202c";
+const LIGHT_INK = "#ffffff";
 /**
  * `<fold-avatar>` — a user/entity avatar with initials or an image.
  *
@@ -671,11 +714,17 @@ function readableInk(fill) {
  * (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
  *
@@ -686,12 +735,19 @@ function readableInk(fill) {
  * | `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" />
+ * ```
  */
 class FoldAvatarComponent {
     palette = inject(FoldPaletteRegistry);
@@ -714,8 +770,20 @@ class FoldAvatarComponent {
     /** Ring line style — `'dotted'` for scheduled / tentative states. */
     ringStyle = input("solid", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ringStyle" }] : /* istanbul ignore next */ []));
-    /** Readable ink for the initials, derived from the fill's luminance. */
-    onColor = computed(() => readableInk(this.color()), /* @ts-ignore */
+    /** True once the `<img>` fails to load. Resets whenever `imageUrl` changes,
+     *  so a corrected URL is retried rather than staying on the fallback. */
+    imageFailed = linkedSignal(() => {
+        this.imageUrl();
+        return false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imageFailed" }] : /* istanbul ignore next */ []));
+    /** 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. */
+    showImage = computed(() => Boolean(this.imageUrl()) && !this.imageFailed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []));
+    /** Readable ink for the initials — the higher-contrast of dark/light ink on
+     *  the fill, so a custom palette stays legible. */
+    onColor = computed(() => foldReadableInk(this.color(), DARK_INK, LIGHT_INK), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "onColor" }] : /* istanbul ignore next */ []));
     initials = computed(() => {
         const n = this.name().trim();
@@ -733,11 +801,11 @@ class FoldAvatarComponent {
     color = computed(() => this.palette.colorFor(this.colorSeed() ?? this.name()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldAvatarComponent, isStandalone: true, selector: "fold-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null }, ring: { classPropertyName: "ring", publicName: "ring", isSignal: true, isRequired: false, transformFunction: null }, ringStyle: { classPropertyName: "ringStyle", publicName: "ringStyle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (imageUrl()) {\n  <div\n    class=\"avatar has-image\"\n    [class.size-sm]=\"size() === 'sm'\"\n    [class.size-md]=\"size() === 'md'\"\n    [class.size-lg]=\"size() === 'lg'\"\n    [class.shape-square]=\"square()\"\n    [class.is-muted]=\"muted()\"\n    [attr.data-ring]=\"ring() === 'none' ? null : ring()\"\n    [attr.data-ring-style]=\"ringStyle()\"\n    [attr.title]=\"name()\"\n  >\n    <img [src]=\"imageUrl()\" [alt]=\"name()\" class=\"avatar-img\" />\n  </div>\n} @else {\n  <div\n    class=\"avatar\"\n    [class.size-sm]=\"size() === 'sm'\"\n    [class.size-md]=\"size() === 'md'\"\n    [class.size-lg]=\"size() === 'lg'\"\n    [class.variant-ghost]=\"variant() === 'ghost'\"\n    [class.shape-square]=\"square()\"\n    [class.is-muted]=\"muted()\"\n    [attr.data-ring]=\"ring() === 'none' ? null : ring()\"\n    [attr.data-ring-style]=\"ringStyle()\"\n    [style.background]=\"variant() === 'solid' ? color() : ''\"\n    [style.color]=\"variant() === 'solid' ? onColor() : ''\"\n    [attr.title]=\"name()\"\n  >\n    {{ initials() }}\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;letter-spacing:.02em;-webkit-user-select:none;user-select:none;border-radius:var(--fold-radius-round)}.avatar.size-sm{width:20px;height:20px;font-size:7px}.avatar.size-md{width:32px;height:32px;font-size:11px}.avatar.size-lg{width:44px;height:44px;font-size:15px}.avatar.variant-ghost{background:var(--fold-color-surface-raised);color:var(--fold-color-text-secondary);border:1px dashed var(--fold-color-border)}.avatar.shape-square{border-radius:var(--fold-radius-sm)}.avatar.has-image{overflow:hidden;background:var(--fold-color-surface-raised);border:1px solid var(--fold-color-border)}.avatar-img{width:100%;height:100%;object-fit:cover}.avatar.is-muted{opacity:.45}.avatar[data-ring]{outline:2px solid var(--avatar-ring, transparent);outline-offset:2px}.avatar[data-ring-style=dotted]{outline-style:dotted}.avatar[data-ring=accent]{--avatar-ring: var(--fold-color-primary)}.avatar[data-ring=info]{--avatar-ring: var(--fold-color-info)}.avatar[data-ring=warning]{--avatar-ring: var(--fold-color-warning)}.avatar[data-ring=alert]{--avatar-ring: var(--fold-color-alert)}.avatar[data-ring=success]{--avatar-ring: var(--fold-color-success)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldAvatarComponent, isStandalone: true, selector: "fold-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null }, ring: { classPropertyName: "ring", publicName: "ring", isSignal: true, isRequired: false, transformFunction: null }, ringStyle: { classPropertyName: "ringStyle", publicName: "ringStyle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showImage()) {\n  <div\n    class=\"avatar has-image\"\n    [class.size-sm]=\"size() === 'sm'\"\n    [class.size-md]=\"size() === 'md'\"\n    [class.size-lg]=\"size() === 'lg'\"\n    [class.variant-ghost]=\"variant() === 'ghost'\"\n    [class.shape-square]=\"square()\"\n    [class.is-muted]=\"muted()\"\n    [attr.data-ring]=\"ring() === 'none' ? null : ring()\"\n    [attr.data-ring-style]=\"ringStyle()\"\n    [attr.title]=\"name()\"\n  >\n    <img\n      [src]=\"imageUrl()\"\n      [alt]=\"name()\"\n      class=\"avatar-img\"\n      (error)=\"imageFailed.set(true)\"\n    />\n  </div>\n} @else {\n  <div\n    class=\"avatar\"\n    [class.size-sm]=\"size() === 'sm'\"\n    [class.size-md]=\"size() === 'md'\"\n    [class.size-lg]=\"size() === 'lg'\"\n    [class.variant-ghost]=\"variant() === 'ghost'\"\n    [class.shape-square]=\"square()\"\n    [class.is-muted]=\"muted()\"\n    [attr.data-ring]=\"ring() === 'none' ? null : ring()\"\n    [attr.data-ring-style]=\"ringStyle()\"\n    [style.background]=\"variant() === 'solid' ? color() : ''\"\n    [style.color]=\"variant() === 'solid' ? onColor() : ''\"\n    [attr.title]=\"name()\"\n  >\n    {{ initials() }}\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;letter-spacing:.02em;-webkit-user-select:none;user-select:none;border-radius:var(--fold-radius-round)}.avatar.size-sm{width:20px;height:20px;font-size:7px}.avatar.size-md{width:32px;height:32px;font-size:11px}.avatar.size-lg{width:44px;height:44px;font-size:15px}.avatar.variant-ghost{background:var(--fold-color-surface-raised);color:var(--fold-color-text-secondary);border:1px dashed var(--fold-color-border)}.avatar.shape-square{border-radius:var(--fold-radius-sm)}.avatar.has-image{overflow:hidden;background:var(--fold-color-surface-raised);border:1px solid var(--fold-color-border)}.avatar.has-image.variant-ghost{border-style:dashed}.avatar-img{width:100%;height:100%;object-fit:cover}.avatar.is-muted{opacity:.45}.avatar[data-ring]{outline:2px solid var(--avatar-ring, transparent);outline-offset:2px}.avatar[data-ring-style=dotted]{outline-style:dotted}.avatar[data-ring=accent]{--avatar-ring: var(--fold-color-primary)}.avatar[data-ring=info]{--avatar-ring: var(--fold-color-info)}.avatar[data-ring=warning]{--avatar-ring: var(--fold-color-warning)}.avatar[data-ring=alert]{--avatar-ring: var(--fold-color-alert)}.avatar[data-ring=success]{--avatar-ring: var(--fold-color-success)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: "fold-avatar", standalone: true, template: "@if (imageUrl()) {\n  <div\n    class=\"avatar has-image\"\n    [class.size-sm]=\"size() === 'sm'\"\n    [class.size-md]=\"size() === 'md'\"\n    [class.size-lg]=\"size() === 'lg'\"\n    [class.shape-square]=\"square()\"\n    [class.is-muted]=\"muted()\"\n    [attr.data-ring]=\"ring() === 'none' ? null : ring()\"\n    [attr.data-ring-style]=\"ringStyle()\"\n    [attr.title]=\"name()\"\n  >\n    <img [src]=\"imageUrl()\" [alt]=\"name()\" class=\"avatar-img\" />\n  </div>\n} @else {\n  <div\n    class=\"avatar\"\n    [class.size-sm]=\"size() === 'sm'\"\n    [class.size-md]=\"size() === 'md'\"\n    [class.size-lg]=\"size() === 'lg'\"\n    [class.variant-ghost]=\"variant() === 'ghost'\"\n    [class.shape-square]=\"square()\"\n    [class.is-muted]=\"muted()\"\n    [attr.data-ring]=\"ring() === 'none' ? null : ring()\"\n    [attr.data-ring-style]=\"ringStyle()\"\n    [style.background]=\"variant() === 'solid' ? color() : ''\"\n    [style.color]=\"variant() === 'solid' ? onColor() : ''\"\n    [attr.title]=\"name()\"\n  >\n    {{ initials() }}\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;letter-spacing:.02em;-webkit-user-select:none;user-select:none;border-radius:var(--fold-radius-round)}.avatar.size-sm{width:20px;height:20px;font-size:7px}.avatar.size-md{width:32px;height:32px;font-size:11px}.avatar.size-lg{width:44px;height:44px;font-size:15px}.avatar.variant-ghost{background:var(--fold-color-surface-raised);color:var(--fold-color-text-secondary);border:1px dashed var(--fold-color-border)}.avatar.shape-square{border-radius:var(--fold-radius-sm)}.avatar.has-image{overflow:hidden;background:var(--fold-color-surface-raised);border:1px solid var(--fold-color-border)}.avatar-img{width:100%;height:100%;object-fit:cover}.avatar.is-muted{opacity:.45}.avatar[data-ring]{outline:2px solid var(--avatar-ring, transparent);outline-offset:2px}.avatar[data-ring-style=dotted]{outline-style:dotted}.avatar[data-ring=accent]{--avatar-ring: var(--fold-color-primary)}.avatar[data-ring=info]{--avatar-ring: var(--fold-color-info)}.avatar[data-ring=warning]{--avatar-ring: var(--fold-color-warning)}.avatar[data-ring=alert]{--avatar-ring: var(--fold-color-alert)}.avatar[data-ring=success]{--avatar-ring: var(--fold-color-success)}\n"] }]
+            args: [{ selector: "fold-avatar", standalone: true, template: "@if (showImage()) {\n  <div\n    class=\"avatar has-image\"\n    [class.size-sm]=\"size() === 'sm'\"\n    [class.size-md]=\"size() === 'md'\"\n    [class.size-lg]=\"size() === 'lg'\"\n    [class.variant-ghost]=\"variant() === 'ghost'\"\n    [class.shape-square]=\"square()\"\n    [class.is-muted]=\"muted()\"\n    [attr.data-ring]=\"ring() === 'none' ? null : ring()\"\n    [attr.data-ring-style]=\"ringStyle()\"\n    [attr.title]=\"name()\"\n  >\n    <img\n      [src]=\"imageUrl()\"\n      [alt]=\"name()\"\n      class=\"avatar-img\"\n      (error)=\"imageFailed.set(true)\"\n    />\n  </div>\n} @else {\n  <div\n    class=\"avatar\"\n    [class.size-sm]=\"size() === 'sm'\"\n    [class.size-md]=\"size() === 'md'\"\n    [class.size-lg]=\"size() === 'lg'\"\n    [class.variant-ghost]=\"variant() === 'ghost'\"\n    [class.shape-square]=\"square()\"\n    [class.is-muted]=\"muted()\"\n    [attr.data-ring]=\"ring() === 'none' ? null : ring()\"\n    [attr.data-ring-style]=\"ringStyle()\"\n    [style.background]=\"variant() === 'solid' ? color() : ''\"\n    [style.color]=\"variant() === 'solid' ? onColor() : ''\"\n    [attr.title]=\"name()\"\n  >\n    {{ initials() }}\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;letter-spacing:.02em;-webkit-user-select:none;user-select:none;border-radius:var(--fold-radius-round)}.avatar.size-sm{width:20px;height:20px;font-size:7px}.avatar.size-md{width:32px;height:32px;font-size:11px}.avatar.size-lg{width:44px;height:44px;font-size:15px}.avatar.variant-ghost{background:var(--fold-color-surface-raised);color:var(--fold-color-text-secondary);border:1px dashed var(--fold-color-border)}.avatar.shape-square{border-radius:var(--fold-radius-sm)}.avatar.has-image{overflow:hidden;background:var(--fold-color-surface-raised);border:1px solid var(--fold-color-border)}.avatar.has-image.variant-ghost{border-style:dashed}.avatar-img{width:100%;height:100%;object-fit:cover}.avatar.is-muted{opacity:.45}.avatar[data-ring]{outline:2px solid var(--avatar-ring, transparent);outline-offset:2px}.avatar[data-ring-style=dotted]{outline-style:dotted}.avatar[data-ring=accent]{--avatar-ring: var(--fold-color-primary)}.avatar[data-ring=info]{--avatar-ring: var(--fold-color-info)}.avatar[data-ring=warning]{--avatar-ring: var(--fold-color-warning)}.avatar[data-ring=alert]{--avatar-ring: var(--fold-color-alert)}.avatar[data-ring=success]{--avatar-ring: var(--fold-color-success)}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], colorSeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorSeed", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], muted: [{ type: i0.Input, args: [{ isSignal: true, alias: "muted", required: false }] }], ring: [{ type: i0.Input, args: [{ isSignal: true, alias: "ring", required: false }] }], ringStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringStyle", required: false }] }] } });
 
 /**
@@ -765,6 +833,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * | `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 />
+ * ```
  */
 class FoldAvatarDetailComponent {
     primary = input.required(/* @ts-ignore */
@@ -1389,7 +1463,7 @@ const FOLD_SEMANTIC_COLOR_TOKENS = [
     "bg-rail-primary",
     /** Rail 2 — the workspace menu. */
     "bg-rail-secondary",
-    /** Rail 3 — tertiary nav (e.g. a `fold-tab-nav` section sidebar). */
+    /** Rail 3 — tertiary nav (e.g. a `fold-view-nav` section sidebar). */
     "bg-rail-tertiary",
     /* ── Primary / accent ─────────────────────────────────────── */
     /** Primary / accent — brand teal (solid). */
@@ -1472,6 +1546,10 @@ const FOLD_TEXT_TOKENS = ["xs", "sm", "md", "lg", "xl"];
 const FOLD_ICON_SIZE_TOKENS = ["xs", "sm", "md", "lg", "xl"];
 /** Space (gap / padding / margin) scale. */
 const FOLD_SPACE_TOKENS = ["xs", "sm", "md", "lg", "xl"];
+/** Rail-width scale — the nav-rail hierarchy's shared widths, named to pair with
+ *  the `--fold-color-bg-rail-*` colours (primary app menu → secondary workspace /
+ *  aside → tertiary in-page nav). */
+const FOLD_RAIL_TOKENS = ["primary", "secondary", "tertiary"];
 /** Motion scale — `transition` shorthands (duration + easing). */
 const FOLD_MOTION_TOKENS = ["fast", "base", "slow"];
 /** Backdrop-blur radii (`--fold-blur-*`). */
@@ -1863,14 +1941,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  *
  * - `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.
@@ -1882,10 +1965,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * 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>
@@ -1897,9 +1988,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * (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>
+ * ```
  */
 class FoldCardComponent {
-    /** Surface tint — `card` (raised, default) or `sunken` (deeper container). */
+    /** 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. */
     surface = input("card", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
     /** Corner radius — `lg` (default), `md`, or `sm`. */
@@ -1909,31 +2012,67 @@ class FoldCardComponent {
      *  set with the `--fold-card-padding` CSS variable. */
     padding = input("md", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
-    /** Add a hover lift for clickable cards. */
-    interactive = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
-    /** Draw a hairline between a projected header/footer and the body. */
-    separators = input(false, { ...(ngDevMode ? { debugName: "separators" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** 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. */
-    raisedBands = input(false, { ...(ngDevMode ? { debugName: "raisedBands" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** 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). */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name for the interactive card, when its content isn't enough. */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Which bands get a hairline against the body — `none` (default), `header`,
+     *  `footer`, or `both`. */
+    separators = input("none", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separators" }] : /* istanbul ignore next */ []));
+    /** Which bands are lifted with a subtle raised tint over the card surface
+     *  (fainter on `sunken`) — `none` (default), `header`, `footer`, or `both`. */
+    raisedBands = input("none", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "raisedBands" }] : /* istanbul ignore next */ []));
+    /** Fires when an `interactive` card is activated (click, Enter, or Space). */
+    activated = output();
+    /** Whether a per-band chrome value applies to the given band. */
+    hasBand(value, band) {
+        return value === band || value === "both";
+    }
+    onActivate(event) {
+        if (this.interactive()) {
+            this.activated.emit(event);
+        }
+    }
+    /** Enter/Space activate the card, matching the native button keyboard contract
+     *  (Space is prevented from scrolling the page). */
+    onKeydown(event) {
+        if (!this.interactive() || (event.key !== "Enter" && event.key !== " ")) {
+            return;
+        }
+        event.preventDefault();
+        this.activated.emit(event);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldCardComponent, isStandalone: true, selector: "fold-card", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, raisedBands: { classPropertyName: "raisedBands", publicName: "raisedBands", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.s-sunken": "surface() === 'sunken'", "class.r-sm": "radius() === 'sm'", "class.r-md": "radius() === 'md'", "class.p-none": "padding() === 'none'", "class.p-sm": "padding() === 'sm'", "class.p-lg": "padding() === 'lg'", "class.is-interactive": "interactive()", "class.has-sep": "separators()", "class.raised-bands": "raisedBands()" } }, ngImport: i0, template: "<header class=\"card-header\"><ng-content select=\"[cardHeader]\" /></header>\n<div class=\"card-body\"><ng-content /></div>\n<footer class=\"card-footer\"><ng-content select=\"[cardFooter]\" /></footer>\n", styles: ["@charset \"UTF-8\";:host{--_pad: 16px;--_chrome: 12px 16px;--_radius: var(--fold-radius-lg);--_band-raise: var(--fold-color-surface-hover);--_sep-line: var(--fold-color-border-subtle);display:flex;flex-direction:column;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--_radius);overflow:var(--fold-card-overflow, clip)}:host(.s-sunken){background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);--_band-raise: var(--fold-color-surface-card)}:host(.r-md){--_radius: var(--fold-radius-md)}:host(.r-sm){--_radius: var(--fold-radius-sm)}:host(.p-none){--_pad: 0}:host(.p-sm){--_pad: 10px}:host(.p-lg){--_pad: 20px}.card-header,.card-footer{position:relative;padding:var(--_chrome)}.card-header:empty,.card-footer:empty{display:none}.card-header{border-radius:var(--_radius) var(--_radius) 0 0}.card-footer{border-radius:0 0 var(--_radius) var(--_radius)}.card-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:var(--fold-card-padding, var(--_pad))}:host(.raised-bands) .card-header:not(:empty),:host(.raised-bands) .card-footer:not(:empty){background-color:var(--_band-raise)}:host(.has-sep) .card-header:not(:empty){border-bottom:1px solid var(--_sep-line)}:host(.has-sep) .card-footer:not(:empty){border-top:1px solid var(--_sep-line)}:host(.is-interactive){cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .1s ease}:host(.is-interactive:hover){transform:translateY(-2px);box-shadow:var(--fold-shadow-md)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldCardComponent, isStandalone: true, selector: "fold-card", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, raisedBands: { classPropertyName: "raisedBands", publicName: "raisedBands", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { listeners: { "click": "onActivate($event)", "keydown": "onKeydown($event)" }, properties: { "class.s-sunken": "surface() === 'sunken'", "class.s-accent": "surface() === 'accent'", "attr.data-surface": "surface() === 'accent' ? 'accent' : null", "class.r-sm": "radius() === 'sm'", "class.r-md": "radius() === 'md'", "class.p-none": "padding() === 'none'", "class.p-sm": "padding() === 'sm'", "class.p-lg": "padding() === 'lg'", "class.is-interactive": "interactive()", "class.sep-header": "hasBand(separators(), 'header')", "class.sep-footer": "hasBand(separators(), 'footer')", "class.raise-header": "hasBand(raisedBands(), 'header')", "class.raise-footer": "hasBand(raisedBands(), 'footer')", "attr.role": "interactive() ? 'button' : null", "attr.tabindex": "interactive() ? 0 : null", "attr.aria-label": "interactive() ? (ariaLabel() ?? null) : null" } }, ngImport: i0, template: "<div class=\"card-header\"><ng-content select=\"[cardHeader]\" /></div>\n<div class=\"card-body\"><ng-content /></div>\n<div class=\"card-footer\"><ng-content select=\"[cardFooter]\" /></div>\n", styles: ["@charset \"UTF-8\";:host{--_pad: 16px;--_chrome: 12px 16px;--_radius: var(--fold-radius-lg);--_band-raise: var(--fold-color-surface-hover);--_sep-line: var(--fold-color-border-subtle);display:flex;flex-direction:column;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--_radius);overflow:var(--fold-card-overflow, clip)}:host(.s-sunken){background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);--_band-raise: var(--fold-color-surface-card)}:host(.r-md){--_radius: var(--fold-radius-md)}:host(.r-sm){--_radius: var(--fold-radius-sm)}:host(.p-none){--_pad: 0}:host(.p-sm){--_pad: 10px}:host(.p-lg){--_pad: 20px}.card-header,.card-footer{position:relative;padding:var(--_chrome)}.card-header:empty,.card-footer:empty{display:none}.card-header{border-radius:var(--_radius) var(--_radius) 0 0}.card-footer{border-radius:0 0 var(--_radius) var(--_radius)}.card-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:var(--fold-card-padding, var(--_pad))}:host(.raise-header) .card-header:not(:empty),:host(.raise-footer) .card-footer:not(:empty){background-color:var(--_band-raise)}:host(.sep-header) .card-header:not(:empty){border-bottom:1px solid var(--_sep-line)}:host(.sep-footer) .card-footer:not(:empty){border-top:1px solid var(--_sep-line)}:host(.is-interactive){cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}:host(.is-interactive:hover){transform:translateY(-2px);box-shadow:var(--fold-shadow-md)}:host(.is-interactive:focus-visible){outline:2px solid var(--fold-color-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host(.is-interactive){transition:none}}:host(.s-accent){background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary);--_band-raise: color-mix( in srgb, var(--_accent-ink) 16%, var(--_accent-fill) );--_sep-line: color-mix(in srgb, var(--_accent-ink) 24%, transparent)}:host(.s-accent.is-interactive:focus-visible){outline-color:var(--fold-color-on-primary)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldCardComponent, decorators: [{
             type: Component,
             args: [{ selector: "fold-card", standalone: true, host: {
                         "[class.s-sunken]": "surface() === 'sunken'",
+                        "[class.s-accent]": "surface() === 'accent'",
+                        "[attr.data-surface]": "surface() === 'accent' ? 'accent' : null",
                         "[class.r-sm]": "radius() === 'sm'",
                         "[class.r-md]": "radius() === 'md'",
                         "[class.p-none]": "padding() === 'none'",
                         "[class.p-sm]": "padding() === 'sm'",
                         "[class.p-lg]": "padding() === 'lg'",
                         "[class.is-interactive]": "interactive()",
-                        "[class.has-sep]": "separators()",
-                        "[class.raised-bands]": "raisedBands()",
-                    }, template: "<header class=\"card-header\"><ng-content select=\"[cardHeader]\" /></header>\n<div class=\"card-body\"><ng-content /></div>\n<footer class=\"card-footer\"><ng-content select=\"[cardFooter]\" /></footer>\n", styles: ["@charset \"UTF-8\";:host{--_pad: 16px;--_chrome: 12px 16px;--_radius: var(--fold-radius-lg);--_band-raise: var(--fold-color-surface-hover);--_sep-line: var(--fold-color-border-subtle);display:flex;flex-direction:column;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--_radius);overflow:var(--fold-card-overflow, clip)}:host(.s-sunken){background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);--_band-raise: var(--fold-color-surface-card)}:host(.r-md){--_radius: var(--fold-radius-md)}:host(.r-sm){--_radius: var(--fold-radius-sm)}:host(.p-none){--_pad: 0}:host(.p-sm){--_pad: 10px}:host(.p-lg){--_pad: 20px}.card-header,.card-footer{position:relative;padding:var(--_chrome)}.card-header:empty,.card-footer:empty{display:none}.card-header{border-radius:var(--_radius) var(--_radius) 0 0}.card-footer{border-radius:0 0 var(--_radius) var(--_radius)}.card-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:var(--fold-card-padding, var(--_pad))}:host(.raised-bands) .card-header:not(:empty),:host(.raised-bands) .card-footer:not(:empty){background-color:var(--_band-raise)}:host(.has-sep) .card-header:not(:empty){border-bottom:1px solid var(--_sep-line)}:host(.has-sep) .card-footer:not(:empty){border-top:1px solid var(--_sep-line)}:host(.is-interactive){cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .1s ease}:host(.is-interactive:hover){transform:translateY(-2px);box-shadow:var(--fold-shadow-md)}\n"] }]
-        }], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], raisedBands: [{ type: i0.Input, args: [{ isSignal: true, alias: "raisedBands", required: false }] }] } });
+                        "[class.sep-header]": "hasBand(separators(), 'header')",
+                        "[class.sep-footer]": "hasBand(separators(), 'footer')",
+                        "[class.raise-header]": "hasBand(raisedBands(), 'header')",
+                        "[class.raise-footer]": "hasBand(raisedBands(), 'footer')",
+                        "[attr.role]": "interactive() ? 'button' : null",
+                        "[attr.tabindex]": "interactive() ? 0 : null",
+                        "[attr.aria-label]": "interactive() ? (ariaLabel() ?? null) : null",
+                        "(click)": "onActivate($event)",
+                        "(keydown)": "onKeydown($event)",
+                    }, template: "<div class=\"card-header\"><ng-content select=\"[cardHeader]\" /></div>\n<div class=\"card-body\"><ng-content /></div>\n<div class=\"card-footer\"><ng-content select=\"[cardFooter]\" /></div>\n", styles: ["@charset \"UTF-8\";:host{--_pad: 16px;--_chrome: 12px 16px;--_radius: var(--fold-radius-lg);--_band-raise: var(--fold-color-surface-hover);--_sep-line: var(--fold-color-border-subtle);display:flex;flex-direction:column;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--_radius);overflow:var(--fold-card-overflow, clip)}:host(.s-sunken){background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle);--_band-raise: var(--fold-color-surface-card)}:host(.r-md){--_radius: var(--fold-radius-md)}:host(.r-sm){--_radius: var(--fold-radius-sm)}:host(.p-none){--_pad: 0}:host(.p-sm){--_pad: 10px}:host(.p-lg){--_pad: 20px}.card-header,.card-footer{position:relative;padding:var(--_chrome)}.card-header:empty,.card-footer:empty{display:none}.card-header{border-radius:var(--_radius) var(--_radius) 0 0}.card-footer{border-radius:0 0 var(--_radius) var(--_radius)}.card-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:var(--fold-card-padding, var(--_pad))}:host(.raise-header) .card-header:not(:empty),:host(.raise-footer) .card-footer:not(:empty){background-color:var(--_band-raise)}:host(.sep-header) .card-header:not(:empty){border-bottom:1px solid var(--_sep-line)}:host(.sep-footer) .card-footer:not(:empty){border-top:1px solid var(--_sep-line)}:host(.is-interactive){cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}:host(.is-interactive:hover){transform:translateY(-2px);box-shadow:var(--fold-shadow-md)}:host(.is-interactive:focus-visible){outline:2px solid var(--fold-color-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host(.is-interactive){transition:none}}:host(.s-accent){background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary);--_band-raise: color-mix( in srgb, var(--_accent-ink) 16%, var(--_accent-fill) );--_sep-line: color-mix(in srgb, var(--_accent-ink) 24%, transparent)}:host(.s-accent.is-interactive:focus-visible){outline-color:var(--fold-color-on-primary)}\n"] }]
+        }], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], raisedBands: [{ type: i0.Input, args: [{ isSignal: true, alias: "raisedBands", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 
 /**
  * `<fold-element-title>` — the label that heads a section, card or panel. Fully
@@ -2034,7 +2173,7 @@ class FoldContextCardComponent {
     subtitle = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldContextCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldContextCardComponent, isStandalone: true, selector: "fold-context-card", 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 } }, ngImport: i0, template: "<fold-card padding=\"none\">\n  <div class=\"cc-head\">\n    <fold-element-title\n      variant=\"title\"\n      [level]=\"3\"\n      [icon]=\"icon()\"\n      [iconTone]=\"iconTone()\"\n      [title]=\"title()\"\n      [subtitle]=\"subtitle()\"\n    />\n  </div>\n  <div class=\"cc-body\"><ng-content /></div>\n  <div class=\"cc-foot\"><ng-content select=\"[footer]\" /></div>\n</fold-card>\n", styles: ["@charset \"UTF-8\";:host{display:block}.cc-head{padding:16px;border-bottom:1px solid var(--fold-color-border-subtle)}.cc-body{padding:2px 16px}.cc-foot{display:flex;justify-content:center;padding:14px 16px;border-top:1px solid var(--fold-color-border-subtle)}.cc-foot:empty{display:none}\n"], dependencies: [{ kind: "component", type: FoldCardComponent, selector: "fold-card", inputs: ["surface", "radius", "padding", "interactive", "separators", "raisedBands"] }, { kind: "component", type: FoldElementTitleComponent, selector: "fold-element-title", inputs: ["icon", "iconTone", "title", "subtitle", "variant", "level", "headingId"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldContextCardComponent, isStandalone: true, selector: "fold-context-card", 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 } }, ngImport: i0, template: "<fold-card padding=\"none\">\n  <div class=\"cc-head\">\n    <fold-element-title\n      variant=\"title\"\n      [level]=\"3\"\n      [icon]=\"icon()\"\n      [iconTone]=\"iconTone()\"\n      [title]=\"title()\"\n      [subtitle]=\"subtitle()\"\n    />\n  </div>\n  <div class=\"cc-body\"><ng-content /></div>\n  <div class=\"cc-foot\"><ng-content select=\"[footer]\" /></div>\n</fold-card>\n", styles: ["@charset \"UTF-8\";:host{display:block}.cc-head{padding:16px;border-bottom:1px solid var(--fold-color-border-subtle)}.cc-body{padding:2px 16px}.cc-foot{display:flex;justify-content:center;padding:14px 16px;border-top:1px solid var(--fold-color-border-subtle)}.cc-foot:empty{display:none}\n"], dependencies: [{ kind: "component", type: FoldCardComponent, selector: "fold-card", inputs: ["surface", "radius", "padding", "interactive", "ariaLabel", "separators", "raisedBands"], outputs: ["activated"] }, { kind: "component", type: FoldElementTitleComponent, selector: "fold-element-title", inputs: ["icon", "iconTone", "title", "subtitle", "variant", "level", "headingId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldContextCardComponent, decorators: [{
             type: Component,
@@ -2283,6 +2422,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * - `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`
  *
@@ -2291,7 +2433,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * <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>
  * ```
  */
 class FoldLinkComponent {
@@ -2307,17 +2451,27 @@ class FoldLinkComponent {
     /** When set, the link renders as an `<a href>` instead of a button. */
     href = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
+    /** Anchor target (e.g. `_blank`). Anchor mode only. */
+    target = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "target" }] : /* istanbul ignore next */ []));
+    /** Anchor `rel`. Anchor mode only. Defaults to `noopener noreferrer` when
+     *  `target="_blank"`; set explicitly to override. */
+    rel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rel" }] : /* istanbul ignore next */ []));
     /** Disable the button form (no effect on the `href` form). */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Fires on click in the button form. */
+    /** Fires on click in the button form; carries the `MouseEvent`. */
     clicked = output();
+    /** Resolved `rel` — the explicit value, or a safe default for a new tab. */
+    resolvedRel = computed(() => this.rel() ?? (this.target() === "_blank" ? "noopener noreferrer" : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldLinkComponent, isStandalone: true, selector: "fold-link", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.tone-muted": "tone() === 'muted'" } }, ngImport: i0, template: "<ng-template #inner>\n  @if (icon(); as i) {\n    <fold-icon [name]=\"i\" size=\"sm\" />\n  }\n  <span class=\"lnk-label\"><ng-content /></span>\n  @if (trailingIcon(); as t) {\n    <fold-icon [name]=\"t\" size=\"sm\" />\n  }\n</ng-template>\n@if (href(); as h) {\n  <a class=\"lnk\" [href]=\"h\">\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"lnk\"\n    [disabled]=\"disabled()\"\n    (click)=\"clicked.emit()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </button>\n}\n", styles: [":host{display:inline-flex;min-width:0}.lnk{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:0;border:0;background:none;font-family:inherit;font-size:var(--fold-text-xs);font-weight:600;color:var(--fold-color-primary);text-decoration:none;cursor:pointer;transition:color var(--fold-motion-fast)}:host(.tone-muted) .lnk{color:var(--fold-color-text-secondary)}.lnk:hover .lnk-label{text-decoration:underline}.lnk:disabled{color:var(--fold-color-text-muted);cursor:not-allowed}.lnk:disabled .lnk-label{text-decoration:none}.lnk-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldLinkComponent, isStandalone: true, selector: "fold-link", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.tone-muted": "tone() === 'muted'" } }, ngImport: i0, template: "<ng-template #inner>\n  @if (icon(); as i) {\n    <fold-icon [name]=\"i\" size=\"sm\" />\n  }\n  <span class=\"lnk-label\"><ng-content /></span>\n  @if (trailingIcon(); as t) {\n    <fold-icon [name]=\"t\" size=\"sm\" />\n  }\n</ng-template>\n@if (href(); as h) {\n  <a\n    class=\"lnk\"\n    [href]=\"h\"\n    [attr.target]=\"target() ?? null\"\n    [attr.rel]=\"resolvedRel()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"lnk\"\n    [disabled]=\"disabled()\"\n    (click)=\"clicked.emit($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </button>\n}\n", styles: [":host{display:inline-flex;min-width:0}.lnk{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:0;border:0;background:none;font-family:inherit;font-size:var(--fold-text-xs);font-weight:600;color:var(--fold-color-primary);text-decoration:none;cursor:pointer;transition:color var(--fold-motion-fast)}:host(.tone-muted) .lnk{color:var(--fold-color-text-secondary)}.lnk:hover .lnk-label{text-decoration:underline}.lnk:disabled{color:var(--fold-color-text-muted);cursor:not-allowed}.lnk:disabled .lnk-label{text-decoration:none}.lnk-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: "fold-link", standalone: true, imports: [NgTemplateOutlet, FoldIconComponent], host: { "[class.tone-muted]": "tone() === 'muted'" }, template: "<ng-template #inner>\n  @if (icon(); as i) {\n    <fold-icon [name]=\"i\" size=\"sm\" />\n  }\n  <span class=\"lnk-label\"><ng-content /></span>\n  @if (trailingIcon(); as t) {\n    <fold-icon [name]=\"t\" size=\"sm\" />\n  }\n</ng-template>\n@if (href(); as h) {\n  <a class=\"lnk\" [href]=\"h\">\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"lnk\"\n    [disabled]=\"disabled()\"\n    (click)=\"clicked.emit()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </button>\n}\n", styles: [":host{display:inline-flex;min-width:0}.lnk{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:0;border:0;background:none;font-family:inherit;font-size:var(--fold-text-xs);font-weight:600;color:var(--fold-color-primary);text-decoration:none;cursor:pointer;transition:color var(--fold-motion-fast)}:host(.tone-muted) .lnk{color:var(--fold-color-text-secondary)}.lnk:hover .lnk-label{text-decoration:underline}.lnk:disabled{color:var(--fold-color-text-muted);cursor:not-allowed}.lnk:disabled .lnk-label{text-decoration:none}.lnk-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+            args: [{ selector: "fold-link", standalone: true, imports: [NgTemplateOutlet, FoldIconComponent], host: { "[class.tone-muted]": "tone() === 'muted'" }, template: "<ng-template #inner>\n  @if (icon(); as i) {\n    <fold-icon [name]=\"i\" size=\"sm\" />\n  }\n  <span class=\"lnk-label\"><ng-content /></span>\n  @if (trailingIcon(); as t) {\n    <fold-icon [name]=\"t\" size=\"sm\" />\n  }\n</ng-template>\n@if (href(); as h) {\n  <a\n    class=\"lnk\"\n    [href]=\"h\"\n    [attr.target]=\"target() ?? null\"\n    [attr.rel]=\"resolvedRel()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"lnk\"\n    [disabled]=\"disabled()\"\n    (click)=\"clicked.emit($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"inner\" />\n  </button>\n}\n", styles: [":host{display:inline-flex;min-width:0}.lnk{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:0;border:0;background:none;font-family:inherit;font-size:var(--fold-text-xs);font-weight:600;color:var(--fold-color-primary);text-decoration:none;cursor:pointer;transition:color var(--fold-motion-fast)}:host(.tone-muted) .lnk{color:var(--fold-color-text-secondary)}.lnk:hover .lnk-label{text-decoration:underline}.lnk:disabled{color:var(--fold-color-text-muted);cursor:not-allowed}.lnk:disabled .lnk-label{text-decoration:none}.lnk-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
  * `<fold-menu>` — a vertical icon navigation rail (the app's primary menu shell).
@@ -2421,7 +2575,7 @@ class FoldMenuComponent {
         this.expanded.update((v) => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldMenuComponent, isStandalone: true, selector: "fold-menu", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, tint: { classPropertyName: "tint", publicName: "tint", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, togglePlacement: { classPropertyName: "togglePlacement", publicName: "togglePlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.expanded": "expanded()", "attr.data-tint": "tint()", "attr.data-level": "level()" } }, viewQueries: [{ propertyName: "headRef", first: true, predicate: ["head"], descendants: true, isSignal: true }, { propertyName: "footRef", first: true, predicate: ["foot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"menu-head\"\n  [class.head-has-toggle]=\"collapsible() && resolvedPlacement() === 'header'\"\n  #head\n>\n  <ng-content select=\"[header]\" />\n  @if (collapsible() && resolvedPlacement() === \"header\") {\n    <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n  }\n</div>\n\n<nav class=\"menu-body\">\n  <ng-content />\n  @if (collapsible() && resolvedPlacement() === \"body\") {\n    <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n  }\n</nav>\n\n<div\n  class=\"menu-foot\"\n  [class.foot-has-toggle]=\"collapsible() && resolvedPlacement() === 'footer'\"\n  #foot\n>\n  @if (collapsible() && resolvedPlacement() === \"footer\") {\n    <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n  }\n  <ng-content select=\"[footer]\" />\n</div>\n\n<ng-template #toggleTpl>\n  <button\n    type=\"button\"\n    class=\"menu-toggle\"\n    [attr.aria-label]=\"expanded() ? 'Collapse menu' : 'Expand menu'\"\n    (click)=\"toggle()\"\n  >\n    <fold-icon\n      [name]=\"expanded() ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"14\"\n    />\n  </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;width:var(--fold-shell-rail-width, 64px);height:100%;box-sizing:border-box;padding:10px 0;gap:4px;background:var(--fold-color-bg-rail-primary);border-right:1px solid var(--fold-color-border);overflow:visible;-webkit-user-select:none;user-select:none;transition:width var(--fold-motion-base)}:host([data-level=secondary]){background:var(--fold-color-bg-rail-secondary)}:host([data-level=tertiary]){background:var(--fold-color-bg-rail-tertiary)}:host([data-elevated]){border-right:none}:host(.expanded){width:max-content;min-width:190px;max-width:260px;align-items:stretch}.menu-head,.menu-foot{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.menu-head:empty,.menu-foot:empty{display:none}.menu-head{padding-bottom:8px;border-bottom:1px solid var(--fold-color-border-subtle)}.menu-foot{padding-top:8px;border-top:1px solid var(--fold-color-border-subtle)}:host(.expanded) .menu-head,:host(.expanded) .menu-foot{align-items:stretch;width:auto;padding-left:8px;padding-right:8px}.menu-body{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}:host(.expanded) .menu-body{align-items:stretch;width:auto;padding:0 8px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.menu-toggle{flex-shrink:0;width:28px;height:28px;display:grid;place-items:center;border:none;border-radius:var(--fold-radius-sm);background:none;color:var(--fold-color-text-muted);cursor:pointer;transition:background var(--fold-motion-fast),color var(--fold-motion-fast)}.menu-toggle:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text-secondary)}:host(.expanded) .menu-toggle{align-self:flex-end;margin-right:8px}:host(.expanded) .menu-head.head-has-toggle,:host(.expanded) .menu-foot.foot-has-toggle{position:relative;padding-right:40px}:host(.expanded) .menu-head.head-has-toggle .menu-toggle,:host(.expanded) .menu-foot.foot-has-toggle .menu-toggle{position:absolute;right:8px;bottom:8px;margin:0}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldMenuComponent, isStandalone: true, selector: "fold-menu", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, tint: { classPropertyName: "tint", publicName: "tint", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, togglePlacement: { classPropertyName: "togglePlacement", publicName: "togglePlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.expanded": "expanded()", "attr.data-tint": "tint()", "attr.data-level": "level()" } }, viewQueries: [{ propertyName: "headRef", first: true, predicate: ["head"], descendants: true, isSignal: true }, { propertyName: "footRef", first: true, predicate: ["foot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"menu-head\"\n  [class.head-has-toggle]=\"collapsible() && resolvedPlacement() === 'header'\"\n  #head\n>\n  <ng-content select=\"[header]\" />\n  @if (collapsible() && resolvedPlacement() === \"header\") {\n    <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n  }\n</div>\n\n<nav class=\"menu-body\">\n  <ng-content />\n  @if (collapsible() && resolvedPlacement() === \"body\") {\n    <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n  }\n</nav>\n\n<div\n  class=\"menu-foot\"\n  [class.foot-has-toggle]=\"collapsible() && resolvedPlacement() === 'footer'\"\n  #foot\n>\n  @if (collapsible() && resolvedPlacement() === \"footer\") {\n    <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n  }\n  <ng-content select=\"[footer]\" />\n</div>\n\n<ng-template #toggleTpl>\n  <button\n    type=\"button\"\n    class=\"menu-toggle\"\n    [attr.aria-label]=\"expanded() ? 'Collapse menu' : 'Expand menu'\"\n    (click)=\"toggle()\"\n  >\n    <fold-icon\n      [name]=\"expanded() ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"14\"\n    />\n  </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;width:var(--fold-shell-rail-width, var(--fold-rail-primary, 64px));height:100%;box-sizing:border-box;padding:10px 0;gap:4px;background:var(--fold-color-bg-rail-primary);border-right:1px solid var(--fold-color-border);overflow:visible;-webkit-user-select:none;user-select:none;transition:width var(--fold-motion-base)}:host([data-level=secondary]){background:var(--fold-color-bg-rail-secondary)}:host([data-level=tertiary]){background:var(--fold-color-bg-rail-tertiary)}:host([data-elevated]){border-right:none}:host(.expanded){width:max-content;min-width:190px;max-width:260px;align-items:stretch}.menu-head,.menu-foot{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.menu-head:empty,.menu-foot:empty{display:none}.menu-head{padding-bottom:8px;border-bottom:1px solid var(--fold-color-border-subtle)}.menu-foot{padding-top:8px;border-top:1px solid var(--fold-color-border-subtle)}:host(.expanded) .menu-head,:host(.expanded) .menu-foot{align-items:stretch;width:auto;padding-left:8px;padding-right:8px}.menu-body{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}:host(.expanded) .menu-body{align-items:stretch;width:auto;padding:0 8px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.menu-toggle{flex-shrink:0;width:28px;height:28px;display:grid;place-items:center;border:none;border-radius:var(--fold-radius-sm);background:none;color:var(--fold-color-text-muted);cursor:pointer;transition:background var(--fold-motion-fast),color var(--fold-motion-fast)}.menu-toggle:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text-secondary)}:host(.expanded) .menu-toggle{align-self:flex-end;margin-right:8px}:host(.expanded) .menu-head.head-has-toggle,:host(.expanded) .menu-foot.foot-has-toggle{position:relative;padding-right:40px}:host(.expanded) .menu-head.head-has-toggle .menu-toggle,:host(.expanded) .menu-foot.foot-has-toggle .menu-toggle{position:absolute;right:8px;bottom:8px;margin:0}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldMenuComponent, decorators: [{
             type: Component,
@@ -2429,7 +2583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         "[class.expanded]": "expanded()",
                         "[attr.data-tint]": "tint()",
                         "[attr.data-level]": "level()",
-                    }, template: "<div\n  class=\"menu-head\"\n  [class.head-has-toggle]=\"collapsible() && resolvedPlacement() === 'header'\"\n  #head\n>\n  <ng-content select=\"[header]\" />\n  @if (collapsible() && resolvedPlacement() === \"header\") {\n    <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n  }\n</div>\n\n<nav class=\"menu-body\">\n  <ng-content />\n  @if (collapsible() && resolvedPlacement() === \"body\") {\n    <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n  }\n</nav>\n\n<div\n  class=\"menu-foot\"\n  [class.foot-has-toggle]=\"collapsible() && resolvedPlacement() === 'footer'\"\n  #foot\n>\n  @if (collapsible() && resolvedPlacement() === \"footer\") {\n    <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n  }\n  <ng-content select=\"[footer]\" />\n</div>\n\n<ng-template #toggleTpl>\n  <button\n    type=\"button\"\n    class=\"menu-toggle\"\n    [attr.aria-label]=\"expanded() ? 'Collapse menu' : 'Expand menu'\"\n    (click)=\"toggle()\"\n  >\n    <fold-icon\n      [name]=\"expanded() ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"14\"\n    />\n  </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;width:var(--fold-shell-rail-width, 64px);height:100%;box-sizing:border-box;padding:10px 0;gap:4px;background:var(--fold-color-bg-rail-primary);border-right:1px solid var(--fold-color-border);overflow:visible;-webkit-user-select:none;user-select:none;transition:width var(--fold-motion-base)}:host([data-level=secondary]){background:var(--fold-color-bg-rail-secondary)}:host([data-level=tertiary]){background:var(--fold-color-bg-rail-tertiary)}:host([data-elevated]){border-right:none}:host(.expanded){width:max-content;min-width:190px;max-width:260px;align-items:stretch}.menu-head,.menu-foot{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.menu-head:empty,.menu-foot:empty{display:none}.menu-head{padding-bottom:8px;border-bottom:1px solid var(--fold-color-border-subtle)}.menu-foot{padding-top:8px;border-top:1px solid var(--fold-color-border-subtle)}:host(.expanded) .menu-head,:host(.expanded) .menu-foot{align-items:stretch;width:auto;padding-left:8px;padding-right:8px}.menu-body{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}:host(.expanded) .menu-body{align-items:stretch;width:auto;padding:0 8px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.menu-toggle{flex-shrink:0;width:28px;height:28px;display:grid;place-items:center;border:none;border-radius:var(--fold-radius-sm);background:none;color:var(--fold-color-text-muted);cursor:pointer;transition:background var(--fold-motion-fast),color var(--fold-motion-fast)}.menu-toggle:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text-secondary)}:host(.expanded) .menu-toggle{align-self:flex-end;margin-right:8px}:host(.expanded) .menu-head.head-has-toggle,:host(.expanded) .menu-foot.foot-has-toggle{position:relative;padding-right:40px}:host(.expanded) .menu-head.head-has-toggle .menu-toggle,:host(.expanded) .menu-foot.foot-has-toggle .menu-toggle{position:absolute;right:8px;bottom:8px;margin:0}\n"] }]
+                    }, template: "<div\n  class=\"menu-head\"\n  [class.head-has-toggle]=\"collapsible() && resolvedPlacement() === 'header'\"\n  #head\n>\n  <ng-content select=\"[header]\" />\n  @if (collapsible() && resolvedPlacement() === \"header\") {\n    <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n  }\n</div>\n\n<nav class=\"menu-body\">\n  <ng-content />\n  @if (collapsible() && resolvedPlacement() === \"body\") {\n    <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n  }\n</nav>\n\n<div\n  class=\"menu-foot\"\n  [class.foot-has-toggle]=\"collapsible() && resolvedPlacement() === 'footer'\"\n  #foot\n>\n  @if (collapsible() && resolvedPlacement() === \"footer\") {\n    <ng-container [ngTemplateOutlet]=\"toggleTpl\" />\n  }\n  <ng-content select=\"[footer]\" />\n</div>\n\n<ng-template #toggleTpl>\n  <button\n    type=\"button\"\n    class=\"menu-toggle\"\n    [attr.aria-label]=\"expanded() ? 'Collapse menu' : 'Expand menu'\"\n    (click)=\"toggle()\"\n  >\n    <fold-icon\n      [name]=\"expanded() ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"14\"\n    />\n  </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;width:var(--fold-shell-rail-width, var(--fold-rail-primary, 64px));height:100%;box-sizing:border-box;padding:10px 0;gap:4px;background:var(--fold-color-bg-rail-primary);border-right:1px solid var(--fold-color-border);overflow:visible;-webkit-user-select:none;user-select:none;transition:width var(--fold-motion-base)}:host([data-level=secondary]){background:var(--fold-color-bg-rail-secondary)}:host([data-level=tertiary]){background:var(--fold-color-bg-rail-tertiary)}:host([data-elevated]){border-right:none}:host(.expanded){width:max-content;min-width:190px;max-width:260px;align-items:stretch}.menu-head,.menu-foot{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.menu-head:empty,.menu-foot:empty{display:none}.menu-head{padding-bottom:8px;border-bottom:1px solid var(--fold-color-border-subtle)}.menu-foot{padding-top:8px;border-top:1px solid var(--fold-color-border-subtle)}:host(.expanded) .menu-head,:host(.expanded) .menu-foot{align-items:stretch;width:auto;padding-left:8px;padding-right:8px}.menu-body{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}:host(.expanded) .menu-body{align-items:stretch;width:auto;padding:0 8px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.menu-toggle{flex-shrink:0;width:28px;height:28px;display:grid;place-items:center;border:none;border-radius:var(--fold-radius-sm);background:none;color:var(--fold-color-text-muted);cursor:pointer;transition:background var(--fold-motion-fast),color var(--fold-motion-fast)}.menu-toggle:hover{background:var(--fold-color-surface-hover);color:var(--fold-color-text-secondary)}:host(.expanded) .menu-toggle{align-self:flex-end;margin-right:8px}:host(.expanded) .menu-head.head-has-toggle,:host(.expanded) .menu-foot.foot-has-toggle{position:relative;padding-right:40px}:host(.expanded) .menu-head.head-has-toggle .menu-toggle,:host(.expanded) .menu-foot.foot-has-toggle .menu-toggle{position:absolute;right:8px;bottom:8px;margin:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], tint: [{ type: i0.Input, args: [{ isSignal: true, alias: "tint", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], togglePlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePlacement", required: false }] }], headRef: [{ type: i0.ViewChild, args: ["head", { isSignal: true }] }], footRef: [{ type: i0.ViewChild, args: ["foot", { isSignal: true }] }] } });
 
 /** Solid accent colour per semantic tone (drives the dot + follow-pill). */
@@ -2861,13 +3015,15 @@ class FoldHeroCardComponent {
     /** Add a primary accent bar down the left edge (composable with any surface). */
     accentBar = input(false, { ...(ngDevMode ? { debugName: "accentBar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldHeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldHeroCardComponent, isStandalone: true, selector: "fold-hero-card", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, accentBar: { classPropertyName: "accentBar", publicName: "accentBar", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.s-sunken": "surface() === 'sunken'", "class.s-primary": "surface() === 'primary'", "class.a-subtle": "accent() === 'subtle'", "class.a-gradient": "accent() === 'gradient'", "class.has-bar": "accentBar()", "class.p-sm": "padding() === 'sm'", "class.p-md": "padding() === 'md'" } }, ngImport: i0, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;overflow:hidden;isolation:isolate;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-lg);padding:20px}:host(.p-sm){padding:10px}:host(.p-md){padding:16px}:host(.s-sunken){background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle)}:host(.s-primary){background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.a-subtle):after,:host(.a-gradient):after{content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none}:host(.a-subtle):after{background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--fold-color-primary) 10%,transparent),transparent 45%),linear-gradient(160deg,transparent 30%,color-mix(in srgb,var(--fold-color-surface-sunken) 50%,transparent))}:host(.a-gradient){border-color:var(--fold-color-primary-border)}:host(.a-gradient):after{background:radial-gradient(260px circle at 90% -10%,color-mix(in srgb,var(--fold-color-primary) 22%,transparent),transparent 68%),linear-gradient(180deg,color-mix(in srgb,var(--fold-color-primary) 8%,transparent),transparent 60%)}:host(.has-bar):before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--fold-color-primary),color-mix(in srgb,var(--fold-color-primary) 30%,transparent))}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldHeroCardComponent, isStandalone: true, selector: "fold-hero-card", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, accentBar: { classPropertyName: "accentBar", publicName: "accentBar", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.s-sunken": "surface() === 'sunken'", "class.s-primary": "surface() === 'primary'", "attr.data-surface": "surface() === 'primary' ? 'accent' : null", "class.a-subtle": "accent() === 'subtle'", "class.a-gradient": "accent() === 'gradient'", "class.has-bar": "accentBar()", "class.p-sm": "padding() === 'sm'", "class.p-md": "padding() === 'md'" } }, ngImport: i0, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;overflow:hidden;isolation:isolate;background:var(--fold-color-surface-card);border:1px solid var(--fold-color-border);border-radius:var(--fold-radius-lg);padding:20px}:host(.p-sm){padding:10px}:host(.p-md){padding:16px}:host(.s-sunken){background:var(--fold-color-surface-sunken);border-color:var(--fold-color-border-subtle)}:host(.s-primary){background:var(--fold-color-primary);border-color:var(--fold-color-primary);color:var(--fold-color-on-primary)}:host(.a-subtle):after,:host(.a-gradient):after{content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none}:host(.a-subtle):after{background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--fold-color-primary) 10%,transparent),transparent 45%),linear-gradient(160deg,transparent 30%,color-mix(in srgb,var(--fold-color-surface-sunken) 50%,transparent))}:host(.a-gradient){border-color:var(--fold-color-primary-border)}:host(.a-gradient):after{background:radial-gradient(260px circle at 90% -10%,color-mix(in srgb,var(--fold-color-primary) 22%,transparent),transparent 68%),linear-gradient(180deg,color-mix(in srgb,var(--fold-color-primary) 8%,transparent),transparent 60%)}:host(.has-bar):before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--fold-color-primary),color-mix(in srgb,var(--fold-color-primary) 30%,transparent))}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldHeroCardComponent, decorators: [{
             type: Component,
             args: [{ selector: "fold-hero-card", standalone: true, host: {
                         "[class.s-sunken]": "surface() === 'sunken'",
                         "[class.s-primary]": "surface() === 'primary'",
+                        // a solid primary ground is an accent surface: auto-invert the content too.
+                        "[attr.data-surface]": "surface() === 'primary' ? 'accent' : null",
                         "[class.a-subtle]": "accent() === 'subtle'",
                         "[class.a-gradient]": "accent() === 'gradient'",
                         "[class.has-bar]": "accentBar()",
@@ -4698,23 +4854,26 @@ class FoldAsideLayoutComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "topOffsetCss" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAsideLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldAsideLayoutComponent, isStandalone: true, selector: "fold-aside-layout", inputs: { stackLeftFirst: { classPropertyName: "stackLeftFirst", publicName: "stackLeftFirst", isSignal: true, isRequired: false, transformFunction: null }, asideLeftLabel: { classPropertyName: "asideLeftLabel", publicName: "asideLeftLabel", isSignal: true, isRequired: false, transformFunction: null }, asideRightLabel: { classPropertyName: "asideRightLabel", publicName: "asideRightLabel", isSignal: true, isRequired: false, transformFunction: null }, topOffset: { classPropertyName: "topOffset", publicName: "topOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--fold-aside-layout-top": "topOffsetCss()", "class.stack-left-first": "stackLeftFirst()" } }, ngImport: i0, template: "<div class=\"al-grid\">\n  <div\n    class=\"al-aside al-aside-left\"\n    [attr.role]=\"asideLeftLabel() ? 'complementary' : null\"\n    [attr.aria-label]=\"asideLeftLabel() || null\"\n  >\n    <ng-content select=\"[asideLeft]\" />\n  </div>\n  <div class=\"al-center\"><ng-content /></div>\n  <div\n    class=\"al-aside al-aside-right\"\n    [attr.role]=\"asideRightLabel() ? 'complementary' : null\"\n    [attr.aria-label]=\"asideRightLabel() || null\"\n  >\n    <ng-content select=\"[asideRight]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;container-type:inline-size}.al-grid{display:grid;grid-template-columns:var(--fold-aside-layout-center-width, minmax(0, 1fr));gap:var(--fold-aside-layout-gap, 28px);max-width:var(--fold-aside-layout-max, 1240px);margin-inline:auto;padding:var(--fold-aside-layout-pad, 28px 28px 64px)}:host:has([asideright]) .al-grid{grid-template-columns:var(--fold-aside-layout-center-width, minmax(0, 1fr)) var(--fold-aside-layout-side-width, 300px)}:host:has([asideleft]) .al-grid{grid-template-columns:var(--fold-aside-layout-rail-width, 220px) var(--fold-aside-layout-center-width, minmax(0, 1fr))}:host:has([asideleft]):has([asideright]) .al-grid{grid-template-columns:var(--fold-aside-layout-rail-width, 220px) var(--fold-aside-layout-center-width, minmax(0, 1fr)) var(--fold-aside-layout-side-width, 300px)}:host:not(:has([asideleft])) .al-aside-left{display:none}:host:not(:has([asideright])) .al-aside-right{display:none}.al-center{min-width:0;display:flex;flex-direction:column;gap:var(--fold-aside-layout-stack, 18px)}.al-aside{--al-rail-top: var(--fold-aside-layout-top, 24px);align-self:start;position:sticky;top:var(--al-rail-top);display:flex;flex-direction:column;gap:var(--fold-aside-layout-rail-gap, 14px);min-width:0;max-height:var(--fold-aside-layout-rail-max, calc(100dvh - var(--al-rail-top) - 2rem));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.al-aside-left{--al-rail-top: var( --fold-aside-layout-left-top, var(--fold-aside-layout-top, 24px) )}.al-aside-right{--al-rail-top: var( --fold-aside-layout-right-top, var(--fold-aside-layout-top, 24px) )}@container (max-width: 1040px){.al-grid,:host:has([asideright]) .al-grid,:host:has([asideleft]) .al-grid,:host:has([asideleft]):has([asideright]) .al-grid{grid-template-columns:minmax(0,1fr)}.al-aside{position:static;max-height:none;overflow:visible}.al-center{order:1}.al-aside-left{order:2}.al-aside-right{order:3}:host(.stack-left-first) .al-aside-left{order:0}}@container (max-width: 700px){.al-grid{padding:var(--fold-aside-layout-pad-sm, 16px 14px 48px);gap:var(--fold-aside-layout-gap-sm, 16px)}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldAsideLayoutComponent, isStandalone: true, selector: "fold-aside-layout", inputs: { stackLeftFirst: { classPropertyName: "stackLeftFirst", publicName: "stackLeftFirst", isSignal: true, isRequired: false, transformFunction: null }, asideLeftLabel: { classPropertyName: "asideLeftLabel", publicName: "asideLeftLabel", isSignal: true, isRequired: false, transformFunction: null }, asideRightLabel: { classPropertyName: "asideRightLabel", publicName: "asideRightLabel", isSignal: true, isRequired: false, transformFunction: null }, topOffset: { classPropertyName: "topOffset", publicName: "topOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--fold-aside-layout-top": "topOffsetCss()", "class.stack-left-first": "stackLeftFirst()" } }, ngImport: i0, template: "<div class=\"al-grid\">\n  <div\n    class=\"al-aside al-aside-left\"\n    [attr.role]=\"asideLeftLabel() ? 'complementary' : null\"\n    [attr.aria-label]=\"asideLeftLabel() || null\"\n  >\n    <ng-content select=\"[asideLeft]\" />\n  </div>\n  <div class=\"al-center\"><ng-content /></div>\n  <div\n    class=\"al-aside al-aside-right\"\n    [attr.role]=\"asideRightLabel() ? 'complementary' : null\"\n    [attr.aria-label]=\"asideRightLabel() || null\"\n  >\n    <ng-content select=\"[asideRight]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;container-type:inline-size}.al-grid{display:grid;grid-template-columns:var(--fold-aside-layout-center-width, minmax(0, 1fr));gap:var(--fold-aside-layout-gap, 28px);max-width:var(--fold-aside-layout-max, 1240px);margin-inline:auto;padding:var(--fold-aside-layout-pad, 28px 28px 64px)}:host:has([asideright]) .al-grid{grid-template-columns:var(--fold-aside-layout-center-width, minmax(0, 1fr)) var(--fold-aside-layout-side-width, 300px)}:host:has([asideleft]) .al-grid{grid-template-columns:var(--fold-aside-layout-rail-width, var(--fold-rail-secondary, 220px)) var(--fold-aside-layout-center-width, minmax(0, 1fr))}:host:has([asideleft]):has([asideright]) .al-grid{grid-template-columns:var(--fold-aside-layout-rail-width, var(--fold-rail-secondary, 220px)) var(--fold-aside-layout-center-width, minmax(0, 1fr)) var(--fold-aside-layout-side-width, 300px)}:host:not(:has([asideleft])) .al-aside-left{display:none}:host:not(:has([asideright])) .al-aside-right{display:none}.al-center{min-width:0;display:flex;flex-direction:column;gap:var(--fold-aside-layout-stack, 18px)}.al-aside{--al-rail-top: var(--fold-aside-layout-top, 24px);align-self:start;position:sticky;top:var(--al-rail-top);display:flex;flex-direction:column;gap:var(--fold-aside-layout-rail-gap, 14px);min-width:0;max-height:var(--fold-aside-layout-rail-max, calc(100dvh - var(--al-rail-top) - 2rem));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.al-aside-left{--al-rail-top: var( --fold-aside-layout-left-top, var(--fold-aside-layout-top, 24px) )}.al-aside-right{--al-rail-top: var( --fold-aside-layout-right-top, var(--fold-aside-layout-top, 24px) )}@container (max-width: 1040px){.al-grid,:host:has([asideright]) .al-grid,:host:has([asideleft]) .al-grid,:host:has([asideleft]):has([asideright]) .al-grid{grid-template-columns:minmax(0,1fr)}.al-aside{position:static;max-height:none;overflow:visible}.al-center{order:1}.al-aside-left{order:2}.al-aside-right{order:3}:host(.stack-left-first) .al-aside-left{order:0}}@container (max-width: 700px){.al-grid{padding:var(--fold-aside-layout-pad-sm, 16px 14px 48px);gap:var(--fold-aside-layout-gap-sm, 16px)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldAsideLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: "fold-aside-layout", standalone: true, host: {
                         "[style.--fold-aside-layout-top]": "topOffsetCss()",
                         "[class.stack-left-first]": "stackLeftFirst()",
-                    }, template: "<div class=\"al-grid\">\n  <div\n    class=\"al-aside al-aside-left\"\n    [attr.role]=\"asideLeftLabel() ? 'complementary' : null\"\n    [attr.aria-label]=\"asideLeftLabel() || null\"\n  >\n    <ng-content select=\"[asideLeft]\" />\n  </div>\n  <div class=\"al-center\"><ng-content /></div>\n  <div\n    class=\"al-aside al-aside-right\"\n    [attr.role]=\"asideRightLabel() ? 'complementary' : null\"\n    [attr.aria-label]=\"asideRightLabel() || null\"\n  >\n    <ng-content select=\"[asideRight]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;container-type:inline-size}.al-grid{display:grid;grid-template-columns:var(--fold-aside-layout-center-width, minmax(0, 1fr));gap:var(--fold-aside-layout-gap, 28px);max-width:var(--fold-aside-layout-max, 1240px);margin-inline:auto;padding:var(--fold-aside-layout-pad, 28px 28px 64px)}:host:has([asideright]) .al-grid{grid-template-columns:var(--fold-aside-layout-center-width, minmax(0, 1fr)) var(--fold-aside-layout-side-width, 300px)}:host:has([asideleft]) .al-grid{grid-template-columns:var(--fold-aside-layout-rail-width, 220px) var(--fold-aside-layout-center-width, minmax(0, 1fr))}:host:has([asideleft]):has([asideright]) .al-grid{grid-template-columns:var(--fold-aside-layout-rail-width, 220px) var(--fold-aside-layout-center-width, minmax(0, 1fr)) var(--fold-aside-layout-side-width, 300px)}:host:not(:has([asideleft])) .al-aside-left{display:none}:host:not(:has([asideright])) .al-aside-right{display:none}.al-center{min-width:0;display:flex;flex-direction:column;gap:var(--fold-aside-layout-stack, 18px)}.al-aside{--al-rail-top: var(--fold-aside-layout-top, 24px);align-self:start;position:sticky;top:var(--al-rail-top);display:flex;flex-direction:column;gap:var(--fold-aside-layout-rail-gap, 14px);min-width:0;max-height:var(--fold-aside-layout-rail-max, calc(100dvh - var(--al-rail-top) - 2rem));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.al-aside-left{--al-rail-top: var( --fold-aside-layout-left-top, var(--fold-aside-layout-top, 24px) )}.al-aside-right{--al-rail-top: var( --fold-aside-layout-right-top, var(--fold-aside-layout-top, 24px) )}@container (max-width: 1040px){.al-grid,:host:has([asideright]) .al-grid,:host:has([asideleft]) .al-grid,:host:has([asideleft]):has([asideright]) .al-grid{grid-template-columns:minmax(0,1fr)}.al-aside{position:static;max-height:none;overflow:visible}.al-center{order:1}.al-aside-left{order:2}.al-aside-right{order:3}:host(.stack-left-first) .al-aside-left{order:0}}@container (max-width: 700px){.al-grid{padding:var(--fold-aside-layout-pad-sm, 16px 14px 48px);gap:var(--fold-aside-layout-gap-sm, 16px)}}\n"] }]
+                    }, template: "<div class=\"al-grid\">\n  <div\n    class=\"al-aside al-aside-left\"\n    [attr.role]=\"asideLeftLabel() ? 'complementary' : null\"\n    [attr.aria-label]=\"asideLeftLabel() || null\"\n  >\n    <ng-content select=\"[asideLeft]\" />\n  </div>\n  <div class=\"al-center\"><ng-content /></div>\n  <div\n    class=\"al-aside al-aside-right\"\n    [attr.role]=\"asideRightLabel() ? 'complementary' : null\"\n    [attr.aria-label]=\"asideRightLabel() || null\"\n  >\n    <ng-content select=\"[asideRight]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;container-type:inline-size}.al-grid{display:grid;grid-template-columns:var(--fold-aside-layout-center-width, minmax(0, 1fr));gap:var(--fold-aside-layout-gap, 28px);max-width:var(--fold-aside-layout-max, 1240px);margin-inline:auto;padding:var(--fold-aside-layout-pad, 28px 28px 64px)}:host:has([asideright]) .al-grid{grid-template-columns:var(--fold-aside-layout-center-width, minmax(0, 1fr)) var(--fold-aside-layout-side-width, 300px)}:host:has([asideleft]) .al-grid{grid-template-columns:var(--fold-aside-layout-rail-width, var(--fold-rail-secondary, 220px)) var(--fold-aside-layout-center-width, minmax(0, 1fr))}:host:has([asideleft]):has([asideright]) .al-grid{grid-template-columns:var(--fold-aside-layout-rail-width, var(--fold-rail-secondary, 220px)) var(--fold-aside-layout-center-width, minmax(0, 1fr)) var(--fold-aside-layout-side-width, 300px)}:host:not(:has([asideleft])) .al-aside-left{display:none}:host:not(:has([asideright])) .al-aside-right{display:none}.al-center{min-width:0;display:flex;flex-direction:column;gap:var(--fold-aside-layout-stack, 18px)}.al-aside{--al-rail-top: var(--fold-aside-layout-top, 24px);align-self:start;position:sticky;top:var(--al-rail-top);display:flex;flex-direction:column;gap:var(--fold-aside-layout-rail-gap, 14px);min-width:0;max-height:var(--fold-aside-layout-rail-max, calc(100dvh - var(--al-rail-top) - 2rem));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.al-aside-left{--al-rail-top: var( --fold-aside-layout-left-top, var(--fold-aside-layout-top, 24px) )}.al-aside-right{--al-rail-top: var( --fold-aside-layout-right-top, var(--fold-aside-layout-top, 24px) )}@container (max-width: 1040px){.al-grid,:host:has([asideright]) .al-grid,:host:has([asideleft]) .al-grid,:host:has([asideleft]):has([asideright]) .al-grid{grid-template-columns:minmax(0,1fr)}.al-aside{position:static;max-height:none;overflow:visible}.al-center{order:1}.al-aside-left{order:2}.al-aside-right{order:3}:host(.stack-left-first) .al-aside-left{order:0}}@container (max-width: 700px){.al-grid{padding:var(--fold-aside-layout-pad-sm, 16px 14px 48px);gap:var(--fold-aside-layout-gap-sm, 16px)}}\n"] }]
         }], propDecorators: { stackLeftFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackLeftFirst", required: false }] }], asideLeftLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideLeftLabel", required: false }] }], asideRightLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideRightLabel", required: false }] }], topOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "topOffset", required: false }] }] } });
 
+/** DI handle for the nearest {@link FoldNavLayoutComponent}, if any. */
+const FOLD_NAV_LAYOUT = new InjectionToken("FOLD_NAV_LAYOUT");
+
 /**
  * Dead band (px) between folding and unfolding. Wider than any scrollbar, so the
  * width a fold gives back can never flip the layout straight back.
  */
 const HYSTERESIS = 32;
 /**
- * `<fold-tab-layout>` — pairs a tab bar with the content it drives, and owns the
+ * `<fold-nav-layout>` — pairs a tab bar with the content it drives, and owns the
  * one thing every tabbed page hand-rolls: where the nav sits.
  *
  * - `placement="top"` (default) — the nav above the content.
@@ -4722,39 +4881,62 @@ const HYSTERESIS = 32;
  *   top when the layout gets narrower than {@link foldAt} (so the menu always
  *   precedes the content it drives, never below it).
  *
- * Content projection — the nav stays yours (tabs, active key, events):
- * - `[tabNav]` → the tab bar (an `fold-tab-nav`, or anything else).
- * - default slot → the content for the active tab.
+ * Content projection — the bar stays yours (tabs, active key, events):
+ * - `[tabNav]` → the bar. Project a {@link FoldViewNavComponent} if the tabs
+ *   **navigate** (route between views) or a {@link FoldTabsComponent} if they
+ *   **switch panels in place** — this layout is agnostic, it only places the bar.
+ * - default slot → the content (routed views, or the tabs' `fold-tab-panel`s).
  *
- * **A11y — this owns placement, not the ARIA tabs pattern.** The projected bar
- * carries the `tablist`/`tab` roles; the content is yours. If the tabs switch
- * in-page panels, give that content `role="tabpanel"` named by the active tab;
- * if they navigate between routes, keep plain nav semantics and add no tab
- * roles (the tabs pattern is for panel-switching, not navigation).
+ * **A11y lives in the bar, not here.** `fold-view-nav` brings `<nav>` +
+ * `aria-current`; `fold-tabs` brings the full `role="tablist"` widget with its
+ * `fold-tab-panel`s. This component adds no tab semantics — it only decides where
+ * the bar sits and folds it responsively.
  *
- * A side rail needs a *vertical* bar, a folded one a *horizontal* bar. Rather
- * than guess, the layout exposes {@link stacked} (`exportAs`) so the projected
- * nav follows the layout in one binding:
+ * A side rail needs a *vertical* bar, a folded one a *horizontal* bar. The
+ * projected bar handles that itself with `direction="auto"` (its default) — it
+ * reads this layout through DI ({@link FoldNavLayoutContext}), no wiring:
  *
  * ```html
- * <fold-tab-layout placement="side" #tl="foldTabLayout">
- *   <fold-tab-nav
- *     tabNav
- *     [direction]="tl.stacked() ? 'horizontal' : 'vertical'"
- *     [tabs]="tabs"
- *     [activeKey]="tab()"
- *     (tabChange)="tab.set($event)"
- *   />
- *   <app-tab-content />
- * </fold-tab-layout>
+ * <fold-nav-layout placement="side">
+ *   <fold-view-nav tabNav [items]="items" />
+ *   <router-outlet />
+ * </fold-nav-layout>
  * ```
  *
- * Sizing is CSS custom properties: `--fold-tab-layout-gap` (16px) and
- * `--fold-tab-layout-nav-width` (200px, the side rail track).
+ * The layout also exposes {@link stacked} via `exportAs` for consumers that want
+ * to read the folded state themselves.
+ *
+ * **Two roles — same component, composed differently.**
+ * - **Page scaffold** — the tab rail *is* the page's primary structure: use it
+ *   directly (usually `placement="side"`), the folded bar leading the content.
+ * - **Tabbed section** — a tabbed block *inside* a page, among other sections.
+ *   Don't reach for a new mode — wrap it in a {@link FoldPageSectionComponent}.
+ *   The section owns the title, the `<section>` + heading semantics, the vertical
+ *   rhythm and the optional `bleed`; tab-layout stays pure placement. It paints
+ *   nothing (no card), so it sits **flat** — add `bleed` on the section for an
+ *   edge-to-edge band. The rail folds on the **section's** width (it measures
+ *   itself), not the viewport, so nested tabs collapse on their own.
  *
- * @selector `fold-tab-layout`
+ * ```html
+ * <!-- a tabbed section: flat structure (page-section) + tab placement -->
+ * <fold-page-section title="Settings" bleed>
+ *   <fold-nav-layout placement="side">
+ *     <fold-view-nav tabNav [items]="items" />
+ *     <app-settings-panel />
+ *   </fold-nav-layout>
+ * </fold-page-section>
+ * ```
+ *
+ * Sizing is CSS custom properties: `--fold-nav-layout-gap` (16px) and
+ * `--fold-nav-layout-rail-width` — the side-rail track, defaulting to the shared
+ * `--fold-rail-tertiary` (200px). That's the **tertiary** step of the rail
+ * hierarchy — the same level the `--fold-color-bg-rail-tertiary` colour names
+ * (app menu → workspace → in-page nav) — so every rail in the app stays on one
+ * scale. Override the local var per instance.
+ *
+ * @selector `fold-nav-layout`
  */
-class FoldTabLayoutComponent {
+class FoldNavLayoutComponent {
     /** Where the nav sits: above the content, or as a rail beside it. */
     placement = input("top", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
@@ -4795,14 +4977,40 @@ class FoldTabLayoutComponent {
             this.folded.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldTabLayoutComponent, isStandalone: true, selector: "fold-tab-layout", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, foldAt: { classPropertyName: "foldAt", publicName: "foldAt", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-row": "!stacked()" } }, exportAs: ["foldTabLayout"], ngImport: i0, template: "<div class=\"tl-nav\"><ng-content select=\"[tabNav]\" /></div>\n<div class=\"tl-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-tab-layout-gap, 16px);min-width:0}:host(.is-row){flex-direction:row}.tl-nav{display:grid;min-width:0}:host(.is-row) .tl-nav{flex:0 0 var(--fold-tab-layout-nav-width, 200px)}.tl-body{flex:1 1 auto;min-width:0}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNavLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldNavLayoutComponent, isStandalone: true, selector: "fold-nav-layout", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, foldAt: { classPropertyName: "foldAt", publicName: "foldAt", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-row": "!stacked()" } }, providers: [
+            { provide: FOLD_NAV_LAYOUT, useExisting: FoldNavLayoutComponent },
+        ], exportAs: ["foldNavLayout"], ngImport: i0, template: "<div class=\"tl-nav\"><ng-content select=\"[tabNav]\" /></div>\n<div class=\"tl-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-nav-layout-gap, 16px);min-width:0}:host(.is-row){flex-direction:row}.tl-nav{display:grid;min-width:0}:host(.is-row) .tl-nav{flex:0 0 var(--fold-nav-layout-rail-width, var(--fold-rail-tertiary, 200px))}.tl-body{flex:1 1 auto;min-width:0}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldNavLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: "fold-tab-layout", standalone: true, exportAs: "foldTabLayout", host: { "[class.is-row]": "!stacked()" }, template: "<div class=\"tl-nav\"><ng-content select=\"[tabNav]\" /></div>\n<div class=\"tl-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-tab-layout-gap, 16px);min-width:0}:host(.is-row){flex-direction:row}.tl-nav{display:grid;min-width:0}:host(.is-row) .tl-nav{flex:0 0 var(--fold-tab-layout-nav-width, 200px)}.tl-body{flex:1 1 auto;min-width:0}\n"] }]
+            args: [{ selector: "fold-nav-layout", standalone: true, exportAs: "foldNavLayout", host: { "[class.is-row]": "!stacked()" }, providers: [
+                        { provide: FOLD_NAV_LAYOUT, useExisting: FoldNavLayoutComponent },
+                    ], template: "<div class=\"tl-nav\"><ng-content select=\"[tabNav]\" /></div>\n<div class=\"tl-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-nav-layout-gap, 16px);min-width:0}:host(.is-row){flex-direction:row}.tl-nav{display:grid;min-width:0}:host(.is-row) .tl-nav{flex:0 0 var(--fold-nav-layout-rail-width, var(--fold-rail-tertiary, 200px))}.tl-body{flex:1 1 auto;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], foldAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "foldAt", required: false }] }] } });
 
+/**
+ * Marks a custom page title projected into {@link FoldPageLayoutComponent} — put
+ * it on inline heading content when the plain `icon` + `title` inputs aren't
+ * enough (an avatar, a two-tone title, a live status). It renders inside the
+ * page's `<h1>`, so keep it inline and text-like. Its presence switches the
+ * header on in place of the input-driven title.
+ *
+ * @example
+ * ```html
+ * <fold-page-layout>
+ *   <span pageTitle><fold-avatar … /> Acme Records</span>
+ * </fold-page-layout>
+ * ```
+ */
+class FoldPageTitleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPageTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: FoldPageTitleDirective, isStandalone: true, selector: "[pageTitle]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPageTitleDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[pageTitle]", standalone: true }]
+        }] });
 /**
  * `<fold-page-layout>` — the vertical scaffold for a settings/admin-style page:
  * an optional `icon` + `title` header with a description slot, an optional
@@ -4824,6 +5032,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  *
  * Content projection:
  * - default slot → the page body (sections, cards, banners…).
+ * - `[pageTitle]` ({@link FoldPageTitleDirective}) → a custom title, rendered
+ *   inside the `<h1>` in place of the `icon` + `title` inputs, for when a plain
+ *   string won't do (an avatar, a two-tone title). Its presence alone switches
+ *   the header on.
  * - `[titleBadge]` → an inline pill beside the title (e.g. a status/kind badge).
  * - `p[description]` → the intro under the title. A **slot**, not a string
  *   input: a description that needs a `<code>`, a link or a second sentence is
@@ -4854,13 +5066,17 @@ class FoldPageLayoutComponent {
     /** An optional leading icon shown beside the title. */
     icon = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** A projected `[pageTitle]`, if any — switches the header on for a custom
+     *  title even without the `title` input. */
+    customTitle = contentChild(FoldPageTitleDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customTitle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPageLayoutComponent, isStandalone: true, selector: "fold-page-layout", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title()) {\n  <header class=\"page-head\">\n    <div class=\"page-head-text\">\n      @if (title()) {\n        <h1 class=\"page-title\">\n          @if (icon(); as ic) {\n            <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n          }\n          <span>{{ title() }}</span>\n          <span class=\"page-title-badge\"\n            ><ng-content select=\"[titleBadge]\"\n          /></span>\n        </h1>\n      }\n      <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n    </div>\n    <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n  </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.page-head-text{display:flex;flex-direction:column;gap:5px;min-width:0}.page-title{margin:0;display:flex;align-items:center;gap:10px;font-size:var(--fold-text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:6px}.page-title-badge:empty{display:none}.page-desc{font-size:var(--fold-text-sm);line-height:1.5;max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;gap:8px}.page-actions:empty{display:none}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPageLayoutComponent, isStandalone: true, selector: "fold-page-layout", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "customTitle", first: true, predicate: FoldPageTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (title() || customTitle()) {\n  <header class=\"page-head\">\n    <div class=\"page-head-text\">\n      <h1 class=\"page-title\">\n        @if (title(); as t) {\n          @if (icon(); as ic) {\n            <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n          }\n          <span>{{ t }}</span>\n        }\n        <ng-content select=\"[pageTitle]\" />\n        <span class=\"page-title-badge\"\n          ><ng-content select=\"[titleBadge]\"\n        /></span>\n      </h1>\n      <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n    </div>\n    <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n  </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.page-head-text{display:flex;flex-direction:column;gap:5px;min-width:0}.page-title{margin:0;display:flex;align-items:center;gap:10px;font-size:var(--fold-text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:6px}.page-title-badge:empty{display:none}.page-desc{font-size:var(--fold-text-sm);line-height:1.5;max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;gap:8px}.page-actions:empty{display:none}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPageLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: "fold-page-layout", standalone: true, imports: [FoldIconComponent], template: "@if (title()) {\n  <header class=\"page-head\">\n    <div class=\"page-head-text\">\n      @if (title()) {\n        <h1 class=\"page-title\">\n          @if (icon(); as ic) {\n            <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n          }\n          <span>{{ title() }}</span>\n          <span class=\"page-title-badge\"\n            ><ng-content select=\"[titleBadge]\"\n          /></span>\n        </h1>\n      }\n      <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n    </div>\n    <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n  </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.page-head-text{display:flex;flex-direction:column;gap:5px;min-width:0}.page-title{margin:0;display:flex;align-items:center;gap:10px;font-size:var(--fold-text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:6px}.page-title-badge:empty{display:none}.page-desc{font-size:var(--fold-text-sm);line-height:1.5;max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;gap:8px}.page-actions:empty{display:none}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+            args: [{ selector: "fold-page-layout", standalone: true, imports: [FoldIconComponent], template: "@if (title() || customTitle()) {\n  <header class=\"page-head\">\n    <div class=\"page-head-text\">\n      <h1 class=\"page-title\">\n        @if (title(); as t) {\n          @if (icon(); as ic) {\n            <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n          }\n          <span>{{ t }}</span>\n        }\n        <ng-content select=\"[pageTitle]\" />\n        <span class=\"page-title-badge\"\n          ><ng-content select=\"[titleBadge]\"\n        /></span>\n      </h1>\n      <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n    </div>\n    <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n  </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.page-head-text{display:flex;flex-direction:column;gap:5px;min-width:0}.page-title{margin:0;display:flex;align-items:center;gap:10px;font-size:var(--fold-text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:6px}.page-title-badge:empty{display:none}.page-desc{font-size:var(--fold-text-sm);line-height:1.5;max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;gap:8px}.page-actions:empty{display:none}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], customTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FoldPageTitleDirective), { isSignal: true }] }] } });
 
 /**
  * `<fold-page-section>` — a titled, semantic **`<section>`** grouping of page
@@ -5128,64 +5344,285 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: true }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
 
 /**
- * `<fold-tab-nav>` — a tab navigation bar (buttons only; the parent renders the
- * content for the active key).
+ * `<fold-view-nav>` — a **navigation** bar styled as tabs: a `<nav>` whose items
+ * *go somewhere*. Give each item a `link` (or `href`) and it renders a real
+ * `<a>` — so cmd/middle-click opens a new tab, the URL is a deep link, and the
+ * active item is driven automatically by `routerLinkActive` +
+ * `aria-current="page"`. Without a link an item is a `<button>` that emits
+ * `activeChange` and reads its active state from `activeKey` (view switching
+ * with no route).
+ *
+ * **Navigation, not the tabs widget.** Reach for this when a tab routes / switches
+ * views. When tabs toggle **layered panels in place** (same URL), use
+ * {@link FoldTabsComponent} — same look, but the ARIA Tabs pattern
+ * (`role="tablist"`, arrow keys, `tabpanel`).
  *
- * - `activeStyle` — `underline` (accent border on the active tab) or `fill`
- *   (accent background pill, good for sidebars).
- * - `direction` — `horizontal` (row, equal-width) or `vertical` (stacked
- *   sidebar; auto-collapses to a horizontal icon-accordion at ≤768px).
+ * - `activeStyle` — `underline` (accent border) or `fill` (accent pill).
+ * - `direction` — `auto` (default: follows a wrapping `fold-nav-layout`, else
+ *   vertical), `vertical`, or `horizontal`.
  *
- * @selector `fold-tab-nav`
+ * @selector `fold-view-nav`
  *
  * @example
  * ```html
- * <fold-tab-nav
- *   [tabs]="[{ key: 'members', label: 'Members', badge: 3 }, { key: 'settings', label: 'Settings' }]"
- *   [activeKey]="tab()"
- *   activeStyle="underline"
- *   direction="horizontal"
- *   (tabChange)="tab.set($event)"
- * />
+ * <!-- real navigation: link items, active state automatic -->
+ * <fold-view-nav [items]="[
+ *   { key: 'members', label: 'Members', link: 'members', badge: 3 },
+ *   { key: 'settings', label: 'Settings', link: 'settings' },
+ * ]" />
+ * <router-outlet />
+ * ```
+ */
+class FoldViewNavComponent {
+    /** The items to render, in order. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /**
+     * The active item's `key` — for **button** items (no `link`). Link items ignore
+     * it: their active state comes from the URL via `routerLinkActive`.
+     */
+    activeKey = input("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    /** How the active item reads: accent underline, or accent fill. */
+    activeStyle = input("underline", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Bar orientation. Defaults to `auto`: inside a `fold-nav-layout` it follows
+     * the layout (vertical rail, horizontal once folded) with no wiring; on its
+     * own it is `vertical` — the readable-first shape, reading as the app's
+     * **third navigation rail** (app menu → workspace → in-page views, the
+     * `--fold-rail-tertiary` level). Force `horizontal` for a page-level top bar.
+     */
+    direction = input("auto", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /**
+     * Density — pure padding/typography:
+     * - `compact` (default) — inline / popover bars.
+     * - `comfortable` — a prominent, page-level bar.
+     */
+    size = input("compact", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Collapse the bar to icons (independent of {@link size}). **Horizontal**, an
+     * icon accordion: every item but the active one drops to its icon, the active
+     * one keeps its label. **Vertical**, a collapsed icon rail (like a folded
+     * menu): every item shows just its icon, its label a hover/focus tooltip and
+     * its count a corner bubble — narrow the layout's `--fold-nav-layout-rail-width`
+     * to match. An item with no icon falls back to a square glyph of its label's
+     * initial, so the rail stays icon-width whether or not items carry icons.
+     * Toggle it from your own breakpoint when the bar is too tight.
+     */
+    collapsed = input(false, { ...(ngDevMode ? { debugName: "collapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * `transparent` (default — blends with the app, so the items read directly) or
+     * `surface` (a filled bar that carries its own rail background).
+     */
+    background = input("transparent", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
+    /** Emits the `key` of a clicked **button** item (link items just navigate). */
+    activeChange = output();
+    /** The nearest layout, if any — lets `direction="auto"` follow it. */
+    layout = inject(FOLD_NAV_LAYOUT, { optional: true });
+    /** `direction` with `auto` resolved against the wrapping layout. */
+    resolvedDirection = computed(() => {
+        const d = this.direction();
+        if (d !== "auto") {
+            return d;
+        }
+        return this.layout?.stacked() ? "horizontal" : "vertical";
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDirection" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldViewNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldViewNavComponent, isStandalone: true, selector: "fold-view-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange" }, ngImport: i0, template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeChange.emit(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:4px 8px 0}.bg-surface.dir-vertical{padding:12px 8px}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 8px;background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:10px;padding:11px 16px;font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:12px 14px;font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:9px 12px;gap:10px;border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:7px}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:4px 8px;border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}@media(max-width:768px){.dir-vertical{flex-direction:row;align-items:center}.dir-vertical .tab-bar-item{flex:0 0 auto;justify-content:center;text-align:center;padding:8px;gap:0;font-size:var(--fold-text-xs);font-weight:600}.dir-vertical .tab-bar-item .tab-bar-label{display:none}.dir-vertical .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:6px;padding:8px 12px}.dir-vertical .tab-bar-item.is-active .tab-bar-label{display:inline;overflow:hidden;text-overflow:ellipsis}.dir-vertical .tab-bar-badge{display:none}.dir-vertical.style-underline{border-right:none;border-bottom:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-left:none;border-bottom:2px solid transparent;margin-right:0;margin-bottom:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-bottom-color:var(--fold-color-primary)}.dir-vertical.style-fill{border-right:none}}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldViewNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "fold-view-nav", standalone: true, imports: [
+                        NgTemplateOutlet,
+                        FoldIconComponent,
+                        FoldBadgeComponent,
+                        RouterLink,
+                        RouterLinkActive,
+                    ], template: "<nav\n  class=\"tab-bar\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (item of items(); track item.key) {\n    @if (item.disabled) {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item is-disabled\"\n        disabled\n        aria-disabled=\"true\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: false }\"\n        />\n      </button>\n    } @else if (item.link !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [routerLink]=\"item.link\"\n        routerLinkActive=\"is-active\"\n        #rla=\"routerLinkActive\"\n        [attr.aria-current]=\"rla.isActive ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, active: rla.isActive }\"\n        />\n      </a>\n    } @else if (item.href !== undefined) {\n      <a\n        class=\"tab-bar-item\"\n        [href]=\"item.href\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"tab-bar-item\"\n        [class.is-active]=\"activeKey() === item.key\"\n        [attr.aria-current]=\"activeKey() === item.key ? 'page' : null\"\n        (click)=\"activeChange.emit(item.key)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"body\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            active: activeKey() === item.key,\n          }\"\n        />\n      </button>\n    }\n  }\n</nav>\n\n<!-- One item's inner content, shared by the link / button branches. -->\n<ng-template #body let-item let-active=\"active\">\n  @if (item.icon; as ic) {\n    <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n  } @else if (collapsed()) {\n    <!-- Collapsed needs a fixed glyph; an icon-less item falls back to its\n         initial so the rail stays icon-width and the label still tooltips. -->\n    <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n      item.label.charAt(0)\n    }}</span>\n  }\n  <span class=\"tab-bar-label\">{{ item.label }}</span>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <fold-badge\n      class=\"tab-bar-badge\"\n      [content]=\"item.badge + ''\"\n      [variant]=\"active ? 'accent' : 'neutral'\"\n    />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:4px 8px 0}.bg-surface.dir-vertical{padding:12px 8px}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 8px;background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:10px;padding:11px 16px;font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:12px 14px;font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:9px 12px;gap:10px;border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:7px}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:4px 8px;border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}@media(max-width:768px){.dir-vertical{flex-direction:row;align-items:center}.dir-vertical .tab-bar-item{flex:0 0 auto;justify-content:center;text-align:center;padding:8px;gap:0;font-size:var(--fold-text-xs);font-weight:600}.dir-vertical .tab-bar-item .tab-bar-label{display:none}.dir-vertical .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:6px;padding:8px 12px}.dir-vertical .tab-bar-item.is-active .tab-bar-label{display:inline;overflow:hidden;text-overflow:ellipsis}.dir-vertical .tab-bar-badge{display:none}.dir-vertical.style-underline{border-right:none;border-bottom:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-left:none;border-bottom:2px solid transparent;margin-right:0;margin-bottom:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-bottom-color:var(--fold-color-primary)}.dir-vertical.style-fill{border-right:none}}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], activeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStyle", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }] } });
+
+/**
+ * `<fold-tabs>` — the **in-page tabs widget** (the ARIA Tabs pattern): a
+ * `role="tablist"` of `role="tab"` buttons that switch layered panels **without
+ * navigating**. Arrow keys move between tabs (roving tabindex — only the active
+ * tab is in the Tab order), `Home`/`End` jump to the ends, and each tab is wired
+ * to its panel via `aria-controls` ↔ `aria-labelledby`.
+ *
+ * Pair it with one {@link FoldTabPanelComponent} per key, handed the bar via a
+ * template ref so the two coordinate across slots (e.g. inside a
+ * `fold-nav-layout`). Same visual as {@link FoldViewNavComponent}; the
+ * difference is **semantics** — use `fold-tabs` for in-page panel switching, and
+ * `fold-view-nav` when the tabs actually navigate (route) between views.
+ *
+ * ```html
+ * <fold-nav-layout>
+ *   <fold-tabs
+ *     nav
+ *     #t="foldTabs"
+ *     [tabs]="tabs"
+ *     [activeKey]="tab()"
+ *     (tabChange)="tab.set($event)"
+ *   />
+ *   <fold-tab-panel [tabs]="t" key="overview">…</fold-tab-panel>
+ *   <fold-tab-panel [tabs]="t" key="settings">…</fold-tab-panel>
+ * </fold-nav-layout>
  * ```
+ *
+ * Same visual knobs as `fold-view-nav` (`activeStyle` · `direction` · `size` ·
+ * `background`). Sizing shares the tab-bar tokens.
+ *
+ * @selector `fold-tabs`
  */
-class FoldTabNavComponent {
+class FoldTabsComponent {
     /** The tabs to render, in order. */
     tabs = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
-    /** The `key` of the currently active tab. */
+    /** The `key` of the active tab (the shown panel). */
     activeKey = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
     /** How the active tab reads: accent underline, or accent fill. */
     activeStyle = input("underline", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeStyle" }] : /* istanbul ignore next */ []));
-    /** Bar orientation (vertical auto-collapses to horizontal on mobile). */
-    direction = input("horizontal", /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
     /**
-     * Density, from tightest to roomiest:
-     * - `reduce` — an icon accordion: every tab but the active one drops its label
-     *   (and badge) to just its icon, while the active tab keeps its label and
-     *   takes the remaining room. A tab with no icon keeps its label, so nothing
-     *   is left unlabelled. Swap to it from your own breakpoint when the bar is
-     *   too tight for every label.
-     * - `compact` (default) — inline / popover bars.
-     * - `comfortable` — a prominent, page-level bar.
+     * Bar orientation (drives `aria-orientation`). Defaults to `auto`: follows a
+     * wrapping `fold-nav-layout`, else `horizontal`.
      */
+    direction = input("auto", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Density — see {@link FoldViewNavComponent} for the same scale. */
     size = input("compact", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /** `surface` (filled bar, default) or `transparent` (blends with the app). */
+    /** Collapse to icons — see {@link FoldViewNavComponent.collapsed}. */
+    collapsed = input(false, { ...(ngDevMode ? { debugName: "collapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** `surface` (filled bar, default) or `transparent`. */
     background = input("surface", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
-    /** Emits the `key` of the clicked tab. */
+    /** Emits the newly-selected tab's `key`. */
     tabChange = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldTabNavComponent, isStandalone: true, selector: "fold-tab-nav", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: "<nav\n  class=\"tab-nav\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"direction() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.size-reduce]=\"size() === 'reduce'\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (tab of tabs(); track tab.key) {\n    <button\n      type=\"button\"\n      class=\"tab-nav-item\"\n      [class.is-active]=\"activeKey() === tab.key\"\n      (click)=\"tabChange.emit(tab.key)\"\n    >\n      @if (tab.icon; as ic) {\n        <fold-icon class=\"tab-nav-icon\" [name]=\"ic\" size=\"sm\" />\n      }\n      <span class=\"tab-nav-label\">{{ tab.label }}</span>\n      @if (tab.badge !== undefined && tab.badge !== null) {\n        <fold-badge\n          class=\"tab-nav-badge\"\n          [content]=\"tab.badge + ''\"\n          [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n        />\n      }\n    </button>\n  }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-nav{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:4px 8px 0}.bg-surface.dir-vertical{padding:12px 8px}.tab-nav-item{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 8px;background:none;border:none;color:var(--fold-color-text-muted);font-size:10px;font-weight:600;cursor:pointer;text-align:center;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-nav-item:hover{color:var(--fold-color-text-secondary)}.size-comfortable .tab-nav-item{flex:0 1 auto;gap:10px;padding:11px 16px;font-size:var(--fold-text-sm)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-nav-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-nav-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-nav-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-nav-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-nav-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-nav-item{flex:none;justify-content:flex-start;text-align:left;padding:9px 12px;gap:10px;border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-nav-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-nav-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-nav-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.size-reduce .tab-nav-item{flex:0 0 auto;gap:0}.size-reduce .tab-nav-item:not(.is-active) .tab-nav-icon~.tab-nav-label,.size-reduce .tab-nav-item:not(.is-active) .tab-nav-badge{display:none}.size-reduce .tab-nav-item.is-active{flex:1 1 auto;min-width:0;gap:7px}.size-reduce .tab-nav-item.is-active .tab-nav-label{overflow:hidden;text-overflow:ellipsis}@media(max-width:768px){.dir-vertical{flex-direction:row;align-items:center}.dir-vertical .tab-nav-item{flex:0 0 auto;justify-content:center;text-align:center;padding:8px;gap:0;font-size:var(--fold-text-xs);font-weight:600}.dir-vertical .tab-nav-item .tab-nav-label{display:none}.dir-vertical .tab-nav-item.is-active{flex:1 1 auto;min-width:0;gap:6px;padding:8px 12px}.dir-vertical .tab-nav-item.is-active .tab-nav-label{display:inline;overflow:hidden;text-overflow:ellipsis}.dir-vertical .tab-nav-badge{display:none}.dir-vertical.style-underline{border-right:none;border-bottom:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-nav-item{border-left:none;border-bottom:2px solid transparent;margin-right:0;margin-bottom:-1px}.dir-vertical.style-underline .tab-nav-item.is-active{border-bottom-color:var(--fold-color-primary)}.dir-vertical.style-fill{border-right:none}}.tab-nav-icon{flex-shrink:0}.tab-nav-badge{flex-shrink:0;font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }] });
+    /** The nearest layout, if any — lets `direction="auto"` follow it. */
+    layout = inject(FOLD_NAV_LAYOUT, { optional: true });
+    /** `direction` with `auto` resolved against the wrapping layout. */
+    resolvedDirection = computed(() => {
+        const d = this.direction();
+        if (d !== "auto") {
+            return d;
+        }
+        return this.layout?.stacked() ? "horizontal" : "vertical";
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDirection" }] : /* istanbul ignore next */ []));
+    /** Per-instance id root, so ids are unique + stable across SSR. */
+    uid = inject(FoldIdService).next("fold-tabs");
+    tabButtons = viewChildren("tabBtn", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabButtons" }] : /* istanbul ignore next */ []));
+    tabId(key) {
+        return `${this.uid}-tab-${key}`;
+    }
+    panelId(key) {
+        return `${this.uid}-panel-${key}`;
+    }
+    select(key) {
+        this.tabChange.emit(key);
+    }
+    /**
+     * Roving-tabindex keyboard model (APG Tabs, automatic activation): arrows move
+     * — and select — the adjacent tab, `Home`/`End` the ends. Both axes work, so
+     * it stays correct whether the bar is horizontal, vertical, or a
+     * mobile-collapsed vertical.
+     */
+    onKeydown(event) {
+        const keys = this.tabs().map((t) => t.key);
+        if (keys.length === 0) {
+            return;
+        }
+        const current = keys.indexOf(this.activeKey());
+        let target;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+                target = (current + 1) % keys.length;
+                break;
+            case "ArrowLeft":
+            case "ArrowUp":
+                target = (current - 1 + keys.length) % keys.length;
+                break;
+            case "Home":
+                target = 0;
+                break;
+            case "End":
+                target = keys.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const key = keys[target];
+        if (key === undefined) {
+            return;
+        }
+        this.tabChange.emit(key);
+        this.tabButtons()[target]?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldTabsComponent, isStandalone: true, selector: "fold-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: true, transformFunction: null }, activeStyle: { classPropertyName: "activeStyle", publicName: "activeStyle", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabBtn"], descendants: true, isSignal: true }], exportAs: ["foldTabs"], ngImport: i0, template: "<div\n  class=\"tab-bar\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"\n    resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n  \"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (tab of tabs(); track tab.key) {\n    <button\n      #tabBtn\n      type=\"button\"\n      role=\"tab\"\n      class=\"tab-bar-item\"\n      [id]=\"tabId(tab.key)\"\n      [class.is-active]=\"activeKey() === tab.key\"\n      [attr.aria-selected]=\"activeKey() === tab.key\"\n      [attr.aria-controls]=\"panelId(tab.key)\"\n      [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n      (click)=\"select(tab.key)\"\n    >\n      @if (tab.icon; as ic) {\n        <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n      } @else if (collapsed()) {\n        <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n          tab.label.charAt(0)\n        }}</span>\n      }\n      <span class=\"tab-bar-label\">{{ tab.label }}</span>\n      @if (tab.badge !== undefined && tab.badge !== null) {\n        <fold-badge\n          class=\"tab-bar-badge\"\n          [content]=\"tab.badge + ''\"\n          [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n        />\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:4px 8px 0}.bg-surface.dir-vertical{padding:12px 8px}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 8px;background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:10px;padding:11px 16px;font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:12px 14px;font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:9px 12px;gap:10px;border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:7px}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:4px 8px;border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}@media(max-width:768px){.dir-vertical{flex-direction:row;align-items:center}.dir-vertical .tab-bar-item{flex:0 0 auto;justify-content:center;text-align:center;padding:8px;gap:0;font-size:var(--fold-text-xs);font-weight:600}.dir-vertical .tab-bar-item .tab-bar-label{display:none}.dir-vertical .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:6px;padding:8px 12px}.dir-vertical .tab-bar-item.is-active .tab-bar-label{display:inline;overflow:hidden;text-overflow:ellipsis}.dir-vertical .tab-bar-badge{display:none}.dir-vertical.style-underline{border-right:none;border-bottom:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-left:none;border-bottom:2px solid transparent;margin-right:0;margin-bottom:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-bottom-color:var(--fold-color-primary)}.dir-vertical.style-fill{border-right:none}}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "title"] }, { kind: "component", type: FoldBadgeComponent, selector: "fold-badge", inputs: ["content", "radius", "variant"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "fold-tabs", standalone: true, exportAs: "foldTabs", imports: [FoldIconComponent, FoldBadgeComponent], template: "<div\n  class=\"tab-bar\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"\n    resolvedDirection() === 'vertical' ? 'vertical' : 'horizontal'\n  \"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"resolvedDirection() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.is-collapsed]=\"collapsed()\"\n  [class.bg-surface]=\"background() === 'surface'\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (tab of tabs(); track tab.key) {\n    <button\n      #tabBtn\n      type=\"button\"\n      role=\"tab\"\n      class=\"tab-bar-item\"\n      [id]=\"tabId(tab.key)\"\n      [class.is-active]=\"activeKey() === tab.key\"\n      [attr.aria-selected]=\"activeKey() === tab.key\"\n      [attr.aria-controls]=\"panelId(tab.key)\"\n      [tabindex]=\"activeKey() === tab.key ? 0 : -1\"\n      (click)=\"select(tab.key)\"\n    >\n      @if (tab.icon; as ic) {\n        <fold-icon class=\"tab-bar-icon\" [name]=\"ic\" size=\"sm\" />\n      } @else if (collapsed()) {\n        <span class=\"tab-bar-icon tab-bar-initial\" aria-hidden=\"true\">{{\n          tab.label.charAt(0)\n        }}</span>\n      }\n      <span class=\"tab-bar-label\">{{ tab.label }}</span>\n      @if (tab.badge !== undefined && tab.badge !== null) {\n        <fold-badge\n          class=\"tab-bar-badge\"\n          [content]=\"tab.badge + ''\"\n          [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n        />\n      }\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-bar{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:4px 8px 0}.bg-surface.dir-vertical{padding:12px 8px}.tab-bar-item{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 8px;background:none;border:none;color:var(--fold-color-text-muted);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-bar-item:hover{color:var(--fold-color-text-secondary)}.tab-bar-item.is-disabled{opacity:.5;cursor:default;pointer-events:none}.size-comfortable .tab-bar-item{flex:0 1 auto;gap:10px;padding:11px 16px;font-size:var(--fold-text-sm)}.dir-vertical.size-comfortable .tab-bar-item{padding:12px 14px;font-size:var(--fold-text-md)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-bar-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-bar-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-bar-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-bar-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-bar-item{flex:none;justify-content:flex-start;text-align:left;padding:9px 12px;gap:10px;border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-bar-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.is-collapsed .tab-bar-item{position:relative;flex:0 0 auto;gap:0}.is-collapsed .tab-bar-item:not(.is-active) .tab-bar-badge{display:none}.is-collapsed .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:7px}.is-collapsed .tab-bar-item.is-active .tab-bar-label{overflow:hidden;text-overflow:ellipsis}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{position:absolute;padding:4px 8px;border-radius:var(--fold-radius-sm);background:var(--fold-color-glass);border:1px solid var(--fold-color-glass-border);color:var(--fold-color-text);font-size:var(--fold-text-xs);font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--fold-shadow-md);transition:opacity var(--fold-motion-fast);z-index:100}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-icon~.tab-bar-label{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active) .tab-bar-icon~.tab-bar-label{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.dir-vertical.is-collapsed .tab-bar-item:hover .tab-bar-icon~.tab-bar-label,.dir-vertical.is-collapsed .tab-bar-item:focus-visible .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):hover .tab-bar-icon~.tab-bar-label,.is-collapsed:not(.dir-vertical) .tab-bar-item:not(.is-active):focus-visible .tab-bar-icon~.tab-bar-label{opacity:1}.dir-vertical.is-collapsed{align-items:center}.dir-vertical.is-collapsed .tab-bar-item,.dir-vertical.is-collapsed .tab-bar-item.is-active{justify-content:center;gap:0}.dir-vertical.is-collapsed .tab-bar-item .tab-bar-badge{display:block;position:absolute;top:-2px;right:-2px;transform:scale(.85);transform-origin:top right;pointer-events:none}:host:has(.is-collapsed){overflow:visible}@media(max-width:768px){.dir-vertical{flex-direction:row;align-items:center}.dir-vertical .tab-bar-item{flex:0 0 auto;justify-content:center;text-align:center;padding:8px;gap:0;font-size:var(--fold-text-xs);font-weight:600}.dir-vertical .tab-bar-item .tab-bar-label{display:none}.dir-vertical .tab-bar-item.is-active{flex:1 1 auto;min-width:0;gap:6px;padding:8px 12px}.dir-vertical .tab-bar-item.is-active .tab-bar-label{display:inline;overflow:hidden;text-overflow:ellipsis}.dir-vertical .tab-bar-badge{display:none}.dir-vertical.style-underline{border-right:none;border-bottom:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-bar-item{border-left:none;border-bottom:2px solid transparent;margin-right:0;margin-bottom:-1px}.dir-vertical.style-underline .tab-bar-item.is-active{border-bottom-color:var(--fold-color-primary)}.dir-vertical.style-fill{border-right:none}}.tab-bar-icon{flex-shrink:0}.tab-bar-initial{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--fold-radius-sm);font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.tab-bar-badge{flex-shrink:0;font-variant-numeric:tabular-nums}.tab-bar-item:focus-visible{outline:2px solid var(--fold-color-primary);outline-offset:-2px;border-radius:var(--fold-radius-sm)}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: true }] }], activeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStyle", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], tabButtons: [{ type: i0.ViewChildren, args: ["tabBtn", { isSignal: true }] }] } });
+
+/**
+ * `<fold-tab-panel>` — one panel of a {@link FoldTabsComponent}. Handed the bar
+ * via a template ref (`[tabs]="t"`, where `#t="foldTabs"`) plus its `key`, it
+ * becomes a `role="tabpanel"` named by its tab (`aria-labelledby`), reachable by
+ * `aria-controls` from that tab, focusable while active, and `hidden` otherwise.
+ *
+ * The ref pairing is what lets the tabs bar and its panels sit in **different**
+ * slots (e.g. the bar in a `fold-nav-layout`'s nav slot, the panels in its
+ * content) and still coordinate.
+ *
+ * ```html
+ * <fold-tabs #t="foldTabs" [tabs]="tabs" [activeKey]="tab()" (tabChange)="tab.set($event)" />
+ * <fold-tab-panel [tabs]="t" key="overview">…</fold-tab-panel>
+ * ```
+ *
+ * @selector `fold-tab-panel`
+ */
+class FoldTabPanelComponent {
+    /** The owning `fold-tabs`, read via its template ref (`#t="foldTabs"`). */
+    tabs = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    /** This panel's tab key — must match one tab in the bar. */
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    isActive = computed(() => this.tabs().activeKey() === this.key(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    panelId = computed(() => this.tabs().panelId(this.key()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.tabs().tabId(this.key()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: FoldTabPanelComponent, isStandalone: true, selector: "fold-tab-panel", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "id": "panelId()", "attr.aria-labelledby": "labelledBy()", "attr.tabindex": "isActive() ? 0 : null", "hidden": "!isActive()" } }, ngImport: i0, template: "<ng-content />", isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldTabPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: "fold-tab-nav", standalone: true, imports: [FoldIconComponent, FoldBadgeComponent], template: "<nav\n  class=\"tab-nav\"\n  [class.style-underline]=\"activeStyle() === 'underline'\"\n  [class.style-fill]=\"activeStyle() === 'fill'\"\n  [class.dir-vertical]=\"direction() === 'vertical'\"\n  [class.size-comfortable]=\"size() === 'comfortable'\"\n  [class.size-reduce]=\"size() === 'reduce'\"\n  [class.bg-surface]=\"background() === 'surface'\"\n>\n  @for (tab of tabs(); track tab.key) {\n    <button\n      type=\"button\"\n      class=\"tab-nav-item\"\n      [class.is-active]=\"activeKey() === tab.key\"\n      (click)=\"tabChange.emit(tab.key)\"\n    >\n      @if (tab.icon; as ic) {\n        <fold-icon class=\"tab-nav-icon\" [name]=\"ic\" size=\"sm\" />\n      }\n      <span class=\"tab-nav-label\">{{ tab.label }}</span>\n      @if (tab.badge !== undefined && tab.badge !== null) {\n        <fold-badge\n          class=\"tab-nav-badge\"\n          [content]=\"tab.badge + ''\"\n          [variant]=\"activeKey() === tab.key ? 'accent' : 'neutral'\"\n        />\n      }\n    </button>\n  }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100%;max-width:100%;overflow:hidden}.tab-nav{flex:1;display:flex;max-width:100%;gap:2px;-webkit-user-select:none;user-select:none}.bg-surface{background:var(--fold-color-bg-rail-tertiary);padding:4px 8px 0}.bg-surface.dir-vertical{padding:12px 8px}.tab-nav-item{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 8px;background:none;border:none;color:var(--fold-color-text-muted);font-size:10px;font-weight:600;cursor:pointer;text-align:center;transition:color .1s ease,background .1s ease,border-color .1s ease;white-space:nowrap}.tab-nav-item:hover{color:var(--fold-color-text-secondary)}.size-comfortable .tab-nav-item{flex:0 1 auto;gap:10px;padding:11px 16px;font-size:var(--fold-text-sm)}.style-underline{border-bottom:1px solid var(--fold-color-border)}.style-underline .tab-nav-item{border-bottom:2px solid transparent;margin-bottom:-1px}.style-underline .tab-nav-item.is-active{color:var(--fold-color-text);border-bottom-color:var(--fold-color-primary)}.style-fill .tab-nav-item{border-radius:var(--fold-radius-sm);border:1px solid transparent}.style-fill .tab-nav-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.style-fill .tab-nav-item:hover:not(.is-active){background:var(--fold-color-surface-hover);color:var(--fold-color-text)}.dir-vertical{flex-direction:column}.dir-vertical .tab-nav-item{flex:none;justify-content:flex-start;text-align:left;padding:9px 12px;gap:10px;border-radius:var(--fold-radius-sm);font-size:var(--fold-text-sm);font-weight:500}.dir-vertical.style-underline{border-bottom:none;border-right:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-nav-item{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;margin-right:-1px}.dir-vertical.style-underline .tab-nav-item.is-active{border-left-color:var(--fold-color-primary)}.dir-vertical.style-fill .tab-nav-item.is-active{background:var(--fold-color-primary-surface);color:var(--fold-color-primary-text);font-weight:600}.size-reduce .tab-nav-item{flex:0 0 auto;gap:0}.size-reduce .tab-nav-item:not(.is-active) .tab-nav-icon~.tab-nav-label,.size-reduce .tab-nav-item:not(.is-active) .tab-nav-badge{display:none}.size-reduce .tab-nav-item.is-active{flex:1 1 auto;min-width:0;gap:7px}.size-reduce .tab-nav-item.is-active .tab-nav-label{overflow:hidden;text-overflow:ellipsis}@media(max-width:768px){.dir-vertical{flex-direction:row;align-items:center}.dir-vertical .tab-nav-item{flex:0 0 auto;justify-content:center;text-align:center;padding:8px;gap:0;font-size:var(--fold-text-xs);font-weight:600}.dir-vertical .tab-nav-item .tab-nav-label{display:none}.dir-vertical .tab-nav-item.is-active{flex:1 1 auto;min-width:0;gap:6px;padding:8px 12px}.dir-vertical .tab-nav-item.is-active .tab-nav-label{display:inline;overflow:hidden;text-overflow:ellipsis}.dir-vertical .tab-nav-badge{display:none}.dir-vertical.style-underline{border-right:none;border-bottom:1px solid var(--fold-color-border)}.dir-vertical.style-underline .tab-nav-item{border-left:none;border-bottom:2px solid transparent;margin-right:0;margin-bottom:-1px}.dir-vertical.style-underline .tab-nav-item.is-active{border-bottom-color:var(--fold-color-primary)}.dir-vertical.style-fill{border-right:none}}.tab-nav-icon{flex-shrink:0}.tab-nav-badge{flex-shrink:0;font-variant-numeric:tabular-nums}\n"] }]
-        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: true }] }], activeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStyle", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
+            args: [{
+                    selector: "fold-tab-panel",
+                    standalone: true,
+                    host: {
+                        role: "tabpanel",
+                        "[id]": "panelId()",
+                        "[attr.aria-labelledby]": "labelledBy()",
+                        "[attr.tabindex]": "isActive() ? 0 : null",
+                        "[hidden]": "!isActive()",
+                    },
+                    template: "<ng-content />",
+                }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }] } });
 
 /** Variant → leading status icon. */
 const VARIANT_ICON = {
@@ -5816,5 +6253,5 @@ class FoldPanelToggle {
  * Generated bundle index. Do not edit.
  */
 
-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, FoldNavTileComponent, FoldNumberInputComponent, FoldPageLayoutComponent, FoldPageSectionComponent, FoldPaginatorComponent, FoldPaletteRegistry, FoldPanelComponentOutletDirective, FoldPanelHeaderComponent, FoldPanelHostComponent, FoldPanelHostService, FoldPanelRef, FoldPanelToggle, FoldRangeSliderComponent, FoldRepeatPressDirective, FoldSearchComponent, FoldSelectComponent, FoldSliderComponent, FoldSpinnerComponent, FoldStatusBadgeComponent, FoldStickyColumnDirective, FoldSurfaceDirective, FoldTabLayoutComponent, FoldTabNavComponent, FoldTimelineComponent, FoldToastComponent, FoldToastContainerComponent, FoldToastService, FoldToggleIconComponent, foldBlurVar, foldColorProperty, foldColorVar, foldHashSeed, foldMotionVar, foldRadiusVar, foldResolvePalette, foldShadowVar, foldSpaceVar, foldTextVar, observeElementWidth, provideFoldIcons, provideFoldPalette, provideFoldPanelLabels, provideFoldToasts };
+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 };
 //# sourceMappingURL=fold-ng.mjs.map