fold-ng 0.2.1 → 0.4.0

package/types/fold-ng.d.ts

@@ -238,11 +238,17 @@ type FoldAvatarRingStyle = "solid" | "dotted";
  * (so the same seed is the same colour everywhere, and one `registry.use(...)`
  * recolours every avatar).
  *
+ * A broken `imageUrl` falls back to the initials rather than the browser's
+ * broken-image glyph (and retries when the URL changes).
+ *
  * Three orthogonal state axes compose: `variant` (fill), `muted` (presence —
  * dim for an absence/inactive person), and `ring` + `ringStyle` (a status
  * outline). The component stays domain-agnostic: a screen maps its own states
  * (e.g. absent → `[muted]`, a scheduled arrival → `ring="accent"`
- * `ringStyle="dotted"`), the avatar just draws the primitives.
+ * `ringStyle="dotted"`), the avatar just draws the primitives. The ring is a
+ * redundant emphasis cue — never the sole carrier of a state — because on a
+ * light page a soft status hue (amber/green) can't clear WCAG 3:1 as a thin
+ * line (status-ring-contrast.spec.ts).
  *
  * ## Inputs
  *
@@ -253,12 +259,19 @@ type FoldAvatarRingStyle = "solid" | "dotted";
  * | `colorSeed` | `string`               | `name`    | String used to pick the deterministic colour.   |
  * | `variant`   | `'solid' \| 'ghost'`   | `'solid'` | `'ghost'` renders a dashed border (for guests). |
  * | `square`    | `boolean`              | `false`   | Square shape with a small radius (for orgs).    |
- * | `imageUrl`  | `string`               | —         | Image/logo URL. Replaces initials when set.     |
+ * | `imageUrl`  | `string`               | —         | Image/logo URL. Replaces initials when set; falls back to initials if it fails to load. |
  * | `muted`     | `boolean`              | `false`   | Dim the avatar (same hue, less intense) — absence / inactive. |
  * | `ring`      | `FoldAvatarRing`        | `'none'`  | A status outline (`accent`/`info`/`warning`/`alert`/`success`). |
  * | `ringStyle` | `'solid' \| 'dotted'`  | `'solid'` | Ring line style — `dotted` for scheduled/tentative states. |
  *
  * @selector `fold-avatar`
+ *
+ * @example
+ * ```html
+ * <fold-avatar name="Clément Aubry" size="lg" />
+ * <fold-avatar name="Léa Petit" ring="accent" ringStyle="dotted" />
+ * <fold-avatar name="Acme Corp" square imageUrl="/logo.svg" />
+ * ```
  */
 declare class FoldAvatarComponent {
     private readonly palette;
@@ -274,7 +287,14 @@ declare class FoldAvatarComponent {
     readonly ring: _angular_core.InputSignal<FoldAvatarRing>;
     /** Ring line style — `'dotted'` for scheduled / tentative states. */
     readonly ringStyle: _angular_core.InputSignal<FoldAvatarRingStyle>;
-    /** Readable ink for the initials, derived from the fill's luminance. */
+    /** True once the `<img>` fails to load. Resets whenever `imageUrl` changes,
+     *  so a corrected URL is retried rather than staying on the fallback. */
+    protected readonly imageFailed: _angular_core.WritableSignal<boolean>;
+    /** Show the image only when a URL is set AND it has not failed — a broken URL
+     *  falls back to the initials instead of the browser's broken-image glyph. */
+    protected readonly showImage: _angular_core.Signal<boolean>;
+    /** Readable ink for the initials — the higher-contrast of dark/light ink on
+     *  the fill, so a custom palette stays legible. */
     protected readonly onColor: _angular_core.Signal<string>;
     readonly initials: _angular_core.Signal<string>;
     /** Deterministic fill from the active palette (via the shared registry). */
@@ -308,6 +328,12 @@ declare class FoldAvatarComponent {
  * | `ringStyle`  | `'solid' \| 'dotted'`  | `'solid'` | Ring line style (`dotted` = scheduled).      |
  *
  * @selector `fold-avatar-detail`
+ *
+ * @example
+ * ```html
+ * <fold-avatar-detail primary="Alex Rivers" secondary="alex@sh3pherd.dev" />
+ * <fold-avatar-detail primary="Acme Corp" secondary="Organisation" square />
+ * ```
  */
 declare class FoldAvatarDetailComponent {
     readonly primary: _angular_core.InputSignal<string>;
@@ -821,6 +847,9 @@ declare class FoldToggleIconComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldToggleIconComponent, "fold-toggle-icon", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; "toggled": "toggled"; }, never, never, true, never>;
 }
 
+/** Which band(s) carry a chrome treatment (a separator hairline or a raised
+ *  tint): neither, just the header, just the footer, or both. */
+type FoldCardBandChrome = "none" | "header" | "footer" | "both";
 /**
  * `<fold-card>` — the canonical raised content surface: a solid
  * `surface-card` background, a hairline border and a consistent radius. Use it
@@ -829,14 +858,19 @@ declare class FoldToggleIconComponent {
  *
  * - `surface` — `card` (the raised card tint, default) · `sunken` (a deeper
  *   surface for large containers, below the card — the ref's second card tint;
- *   pairs with a fainter `border-subtle` hairline).
+ *   pairs with a fainter `border-subtle` hairline) · `accent` (an accent-filled
+ *   card whose content sub-tree auto-inverts to a compatible on-accent palette).
  * - `radius` — `lg` (14px, default) · `md` · `sm`.
  * - `padding` — `md` (16px, default) · `none` · `sm` · `lg`. Sets the *body*
  *   padding; override with a custom value via `--fold-card-padding`.
- * - `interactive` — adds a hover lift (for clickable cards).
- * - `separators` — draw a hairline between a projected header/footer and the body.
- * - `raisedBands` — tint the header/footer bands a step above the surface
- *   (fainter on `sunken`).
+ * - `interactive` — makes the whole card a clickable control (see below).
+ * - `separators` — which bands get a hairline against the body:
+ *   `none` (default) · `header` · `footer` · `both`.
+ * - `raisedBands` — which bands are tinted a step above the surface (fainter on
+ *   `sunken`): `none` (default) · `header` · `footer` · `both`.
+ *
+ * `separators` and `raisedBands` are per-band and independent axes, so a card can
+ * have (say) a raised, un-separated header over a flush footer.
  *
  * Content projection:
  * - default slot → the card body.
@@ -848,10 +882,18 @@ declare class FoldToggleIconComponent {
  * never pads. So the content padding is identical whether or not the bands show —
  * toggling a header/footer never shifts the body.
  *
+ * **Interactive cards.** `interactive` turns the whole card into a real control:
+ * the host gains `role="button"`, `tabindex="0"`, a focus ring and a hover lift,
+ * and Enter / Space (or a click) emit `(activated)`. Give it an accessible name
+ * with `ariaLabel` when the card's text isn't a sufficient label.
+ * A `role="button"` must not wrap other interactive controls — so an interactive
+ * card must NOT contain buttons/links. For a card with its own inner actions,
+ * keep it non-interactive and put a single primary `<a>`/`<button>` inside.
+ *
  * ```html
  * <fold-card>Static content</fold-card>
  * <fold-card surface="sunken" padding="lg">Deep container</fold-card>
- * <fold-card separators>
+ * <fold-card separators="both">
  *   <h3 cardHeader>Title</h3>
  *   Body content
  *   <div cardFooter>Actions</div>
@@ -863,24 +905,49 @@ declare class FoldToggleIconComponent {
  * (default `clip`) lets content escape the rounded corners.
  *
  * @selector `fold-card`
+ *
+ * @example
+ * ```html
+ * <fold-card interactive ariaLabel="Open Acme Records" (activated)="open()">
+ *   <h3>Acme Records</h3>
+ *   <p>128 contracts · 96 active</p>
+ * </fold-card>
+ * ```
  */
 declare class FoldCardComponent {
-    /** Surface tint — `card` (raised, default) or `sunken` (deeper container). */
-    readonly surface: _angular_core.InputSignal<"card" | "sunken">;
+    /** Surface tint — `card` (raised, default), `sunken` (deeper container), or
+     *  `accent` (an **accent-filled** card: the accent colour as ground, with the
+     *  whole content sub-tree auto-inverted to a compatible on-accent role-set —
+     *  text, borders, band gradation, and even nested buttons/links/icon-tiles
+     *  convert automatically). Use it to make a card in a grid stand out. */
+    readonly surface: _angular_core.InputSignal<"accent" | "card" | "sunken">;
     /** Corner radius — `lg` (default), `md`, or `sm`. */
     readonly radius: _angular_core.InputSignal<"sm" | "md" | "lg">;
     /** Body padding — `md` (default), `none`, `sm`, or `lg`; a custom value can be
      *  set with the `--fold-card-padding` CSS variable. */
     readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | "lg">;
-    /** Add a hover lift for clickable cards. */
-    readonly interactive: _angular_core.InputSignal<boolean>;
-    /** Draw a hairline between a projected header/footer and the body. */
-    readonly separators: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Lift the header/footer bands with a subtle raised tint over the card
-     *  surface (fainter on `sunken`), to set the chrome apart from the body. */
-    readonly raisedBands: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Make the whole card a clickable control: `role="button"` + `tabindex`, a
+     *  focus ring, a hover lift, and Enter/Space/click → `(activated)`. Must not
+     *  wrap other interactive controls (see the class docs). */
+    readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name for the interactive card, when its content isn't enough. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Which bands get a hairline against the body — `none` (default), `header`,
+     *  `footer`, or `both`. */
+    readonly separators: _angular_core.InputSignal<FoldCardBandChrome>;
+    /** Which bands are lifted with a subtle raised tint over the card surface
+     *  (fainter on `sunken`) — `none` (default), `header`, `footer`, or `both`. */
+    readonly raisedBands: _angular_core.InputSignal<FoldCardBandChrome>;
+    /** Fires when an `interactive` card is activated (click, Enter, or Space). */
+    readonly activated: _angular_core.OutputEmitterRef<Event>;
+    /** Whether a per-band chrome value applies to the given band. */
+    protected hasBand(value: FoldCardBandChrome, band: "header" | "footer"): boolean;
+    protected onActivate(event: Event): void;
+    /** Enter/Space activate the card, matching the native button keyboard contract
+     *  (Space is prevented from scrolling the page). */
+    protected onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldCardComponent, "fold-card", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "raisedBands": { "alias": "raisedBands"; "required": false; "isSignal": true; }; }, {}, never, ["[cardHeader]", "*", "[cardFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldCardComponent, "fold-card", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "raisedBands": { "alias": "raisedBands"; "required": false; "isSignal": true; }; }, { "activated": "activated"; }, never, ["[cardHeader]", "*", "[cardFooter]"], true, never>;
 }
 
 /**
@@ -1117,6 +1184,9 @@ declare class FoldFieldComponent {
  * - `tone` — `accent` (default, brand link) · `muted` (secondary).
  * - `icon` / `trailingIcon` — optional glyphs around the label.
  * - `disabled` — button mode only.
+ * - `target` / `rel` — anchor mode only. Setting `target="_blank"` auto-applies
+ *   `rel="noopener noreferrer"` (safe by default); override with an explicit
+ *   `rel`.
  *
  * @selector `fold-link`
  *
@@ -1125,7 +1195,9 @@ declare class FoldFieldComponent {
  * <fold-link icon="company" trailingIcon="chevron-right" (clicked)="openOrg()">
  *   Voir l'organigramme
  * </fold-link>
- * <fold-link href="https://sh3pherd.dev/docs" tone="muted">Documentation</fold-link>
+ * <fold-link href="https://sh3pherd.dev/docs" target="_blank" tone="muted">
+ *   Documentation
+ * </fold-link>
  * ```
  */
 declare class FoldLinkComponent {
@@ -1137,12 +1209,19 @@ declare class FoldLinkComponent {
     readonly tone: _angular_core.InputSignal<"accent" | "muted">;
     /** When set, the link renders as an `<a href>` instead of a button. */
     readonly href: _angular_core.InputSignal<string | undefined>;
+    /** Anchor target (e.g. `_blank`). Anchor mode only. */
+    readonly target: _angular_core.InputSignal<string | undefined>;
+    /** Anchor `rel`. Anchor mode only. Defaults to `noopener noreferrer` when
+     *  `target="_blank"`; set explicitly to override. */
+    readonly rel: _angular_core.InputSignal<string | undefined>;
     /** Disable the button form (no effect on the `href` form). */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Fires on click in the button form. */
-    readonly clicked: _angular_core.OutputEmitterRef<void>;
+    /** Fires on click in the button form; carries the `MouseEvent`. */
+    readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** Resolved `rel` — the explicit value, or a safe default for a new tab. */
+    protected readonly resolvedRel: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldLinkComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldLinkComponent, "fold-link", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldLinkComponent, "fold-link", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -1918,10 +1997,12 @@ declare function observeElementWidth(element?: ElementRef<HTMLElement> | HTMLEle
 
 /**
  * A named surface — the ground a subtree paints itself on. `page` is the
- * document body; `chrome` is application furniture (rails, header) that a
- * theme may colour differently from the page.
+ * document body; `chrome` is application furniture (rails, header) that a theme
+ * may colour differently from the page; `accent` is an **auto-inverting** region
+ * filled with the brand accent, whose content re-points to a compatible
+ * on-accent palette (see the `[data-surface="accent"]` block in `semantic.css`).
  */
-type FoldSurfaceName = "page" | "chrome";
+type FoldSurfaceName = "page" | "chrome" | "accent";
 /**
  * `[foldSurface]` — declares the element a **named surface**, so a theme can
  * re-colour it without knowing anything about the component it lives in.
@@ -2954,7 +3035,21 @@ declare class FoldAsideLayoutComponent {
 }
 
 /**
- * `<fold-tab-layout>` — pairs a tab bar with the content it drives, and owns the
+ * The slice of a {@link FoldNavLayoutComponent} that a projected bar reads to
+ * follow the layout — exposed through DI so a `fold-view-nav` / `fold-tabs` with
+ * `direction="auto"` orients itself without the consumer wiring `tl.stacked()`.
+ */
+interface FoldNavLayoutContext {
+    /**
+     * True when the layout currently stacks the bar **above** the content (a `top`
+     * placement, or a `side` rail that has folded) — i.e. the bar should be
+     * horizontal. False when it sits as a vertical rail beside the content.
+     */
+    readonly stacked: Signal<boolean>;
+}
+
+/**
+ * `<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.
@@ -2962,39 +3057,62 @@ declare class FoldAsideLayoutComponent {
  *   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>
+ * ```
+ *
+ * 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.
+ *
+ * ```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-tab-layout-gap` (16px) and
- * `--fold-tab-layout-nav-width` (200px, the side rail track).
+ * 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-tab-layout`
+ * @selector `fold-nav-layout`
  */
-declare class FoldTabLayoutComponent {
+declare class FoldNavLayoutComponent implements FoldNavLayoutContext {
     /** Where the nav sits: above the content, or as a rail beside it. */
     readonly placement: _angular_core.InputSignal<"top" | "side">;
     /** Width (px) at or below which a `side` nav folds back on top. */
@@ -3018,10 +3136,28 @@ declare class FoldTabLayoutComponent {
      * forever. A dead band wider than any scrollbar breaks that loop.
      */
     private measure;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldTabLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldTabLayoutComponent, "fold-tab-layout", ["foldTabLayout"], { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "foldAt": { "alias": "foldAt"; "required": false; "isSignal": true; }; }, {}, never, ["[tabNav]", "*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldNavLayoutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldNavLayoutComponent, "fold-nav-layout", ["foldNavLayout"], { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "foldAt": { "alias": "foldAt"; "required": false; "isSignal": true; }; }, {}, never, ["[tabNav]", "*"], true, never>;
 }
 
+/**
+ * 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>
+ * ```
+ */
+declare class FoldPageTitleDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldPageTitleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FoldPageTitleDirective, "[pageTitle]", never, {}, {}, never, never, true, never>;
+}
 /**
  * `<fold-page-layout>` — the vertical scaffold for a settings/admin-style page:
  * an optional `icon` + `title` header with a description slot, an optional
@@ -3043,6 +3179,10 @@ declare class FoldTabLayoutComponent {
  *
  * 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
@@ -3071,8 +3211,11 @@ declare class FoldPageLayoutComponent {
     readonly title: _angular_core.InputSignal<string | undefined>;
     /** An optional leading icon shown beside the title. */
     readonly icon: _angular_core.InputSignal<FoldIconName | undefined>;
+    /** A projected `[pageTitle]`, if any — switches the header on for a custom
+     *  title even without the `title` input. */
+    protected readonly customTitle: _angular_core.Signal<FoldPageTitleDirective | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldPageLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldPageLayoutComponent, "fold-page-layout", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["[titleBadge]", "p[description]", "[pageActions]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldPageLayoutComponent, "fold-page-layout", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, ["customTitle"], ["[pageTitle]", "[titleBadge]", "p[description]", "[pageActions]", "*"], true, never>;
 }
 
 /**
@@ -3251,8 +3394,8 @@ declare class FoldPaginatorComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldPaginatorComponent, "fold-paginator", never, { "currentPage": { "alias": "currentPage"; "required": true; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": true; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "siblingCount": { "alias": "siblingCount"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
 }
 
-type FoldTabNavItem = {
-    /** Unique key — identifies the tab and is emitted on click. */
+type FoldViewNavItem = {
+    /** Unique key — identifies the item and is emitted by `activeChange`. */
     key: string;
     /** Display label. */
     label: string;
@@ -3260,55 +3403,222 @@ type FoldTabNavItem = {
     icon?: FoldIconName;
     /** Optional trailing badge (e.g. a count). `undefined`/`null` hides it. */
     badge?: string | number | null;
+    /**
+     * Router target — makes this item a real `routerLink` `<a>`: cmd/middle-click
+     * opens a new tab, the URL is a deep link, and the active state is driven
+     * automatically by `routerLinkActive` (no `activeKey` needed). Accepts the
+     * same value as `[routerLink]` — a path string or a commands array.
+     */
+    link?: string | unknown[];
+    /** External URL — renders a plain `<a href>` (no router). */
+    href?: string;
+    /** Disable the item: non-interactive + dimmed. */
+    disabled?: boolean;
 };
 /**
- * `<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).
  *
- * - `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).
+ * **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`).
  *
- * @selector `fold-tab-nav`
+ * - `activeStyle` — `underline` (accent border) or `fill` (accent pill).
+ * - `direction` — `auto` (default: follows a wrapping `fold-nav-layout`, else
+ *   vertical), `vertical`, or `horizontal`.
+ *
+ * @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 />
  * ```
  */
-declare class FoldTabNavComponent {
-    /** The tabs to render, in order. */
-    readonly tabs: _angular_core.InputSignal<FoldTabNavItem[]>;
-    /** The `key` of the currently active tab. */
+declare class FoldViewNavComponent {
+    /** The items to render, in order. */
+    readonly items: _angular_core.InputSignal<FoldViewNavItem[]>;
+    /**
+     * The active item's `key` — for **button** items (no `link`). Link items ignore
+     * it: their active state comes from the URL via `routerLinkActive`.
+     */
     readonly activeKey: _angular_core.InputSignal<string>;
-    /** How the active tab reads: accent underline, or accent fill. */
+    /** How the active item reads: accent underline, or accent fill. */
     readonly activeStyle: _angular_core.InputSignal<"fill" | "underline">;
-    /** Bar orientation (vertical auto-collapses to horizontal on mobile). */
-    readonly direction: _angular_core.InputSignal<"vertical" | "horizontal">;
     /**
-     * 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.
+     * 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.
+     */
+    readonly direction: _angular_core.InputSignal<"auto" | "vertical" | "horizontal">;
+    /**
+     * Density — pure padding/typography:
      * - `compact` (default) — inline / popover bars.
      * - `comfortable` — a prominent, page-level bar.
      */
-    readonly size: _angular_core.InputSignal<"reduce" | "compact" | "comfortable">;
-    /** `surface` (filled bar, default) or `transparent` (blends with the app). */
+    readonly size: _angular_core.InputSignal<"compact" | "comfortable">;
+    /**
+     * 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.
+     */
+    readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * `transparent` (default — blends with the app, so the items read directly) or
+     * `surface` (a filled bar that carries its own rail background).
+     */
     readonly background: _angular_core.InputSignal<"transparent" | "surface">;
-    /** Emits the `key` of the clicked tab. */
+    /** Emits the `key` of a clicked **button** item (link items just navigate). */
+    readonly activeChange: _angular_core.OutputEmitterRef<string>;
+    /** The nearest layout, if any — lets `direction="auto"` follow it. */
+    private readonly layout;
+    /** `direction` with `auto` resolved against the wrapping layout. */
+    protected readonly resolvedDirection: _angular_core.Signal<"vertical" | "horizontal">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldViewNavComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldViewNavComponent, "fold-view-nav", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "activeKey": { "alias": "activeKey"; "required": false; "isSignal": true; }; "activeStyle": { "alias": "activeStyle"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; }, { "activeChange": "activeChange"; }, never, never, true, never>;
+}
+
+/** A tab in a {@link FoldTabsComponent} bar. */
+type FoldTabItem = {
+    /** Unique key — identifies the tab / its panel, emitted on change. */
+    key: string;
+    /** Display label. */
+    label: string;
+    /** Optional leading icon. */
+    icon?: FoldIconName;
+    /** Optional trailing count badge. `undefined`/`null` hides it. */
+    badge?: string | number | null;
+};
+/**
+ * The read side a {@link FoldTabPanelComponent} needs to wire itself to a tab —
+ * exposed by `fold-tabs` via `exportAs="foldTabs"`. Decouples the panel from the
+ * concrete component.
+ */
+interface FoldTabsContext {
+    /** The active tab's key. */
+    activeKey(): string;
+    /** The DOM id of the tab for `key` (a panel's `aria-labelledby`). */
+    tabId(key: string): string;
+    /** The DOM id of the panel for `key` (a tab's `aria-controls`). */
+    panelId(key: string): string;
+}
+/**
+ * `<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`
+ */
+declare class FoldTabsComponent implements FoldTabsContext {
+    /** The tabs to render, in order. */
+    readonly tabs: _angular_core.InputSignal<FoldTabItem[]>;
+    /** The `key` of the active tab (the shown panel). */
+    readonly activeKey: _angular_core.InputSignal<string>;
+    /** How the active tab reads: accent underline, or accent fill. */
+    readonly activeStyle: _angular_core.InputSignal<"fill" | "underline">;
+    /**
+     * Bar orientation (drives `aria-orientation`). Defaults to `auto`: follows a
+     * wrapping `fold-nav-layout`, else `horizontal`.
+     */
+    readonly direction: _angular_core.InputSignal<"auto" | "vertical" | "horizontal">;
+    /** Density — see {@link FoldViewNavComponent} for the same scale. */
+    readonly size: _angular_core.InputSignal<"compact" | "comfortable">;
+    /** Collapse to icons — see {@link FoldViewNavComponent.collapsed}. */
+    readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `surface` (filled bar, default) or `transparent`. */
+    readonly background: _angular_core.InputSignal<"transparent" | "surface">;
+    /** Emits the newly-selected tab's `key`. */
     readonly tabChange: _angular_core.OutputEmitterRef<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldTabNavComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldTabNavComponent, "fold-tab-nav", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "activeKey": { "alias": "activeKey"; "required": true; "isSignal": true; }; "activeStyle": { "alias": "activeStyle"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
+    /** The nearest layout, if any — lets `direction="auto"` follow it. */
+    private readonly layout;
+    /** `direction` with `auto` resolved against the wrapping layout. */
+    protected readonly resolvedDirection: _angular_core.Signal<"vertical" | "horizontal">;
+    /** Per-instance id root, so ids are unique + stable across SSR. */
+    private readonly uid;
+    private readonly tabButtons;
+    tabId(key: string): string;
+    panelId(key: string): string;
+    protected select(key: string): void;
+    /**
+     * 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.
+     */
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldTabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldTabsComponent, "fold-tabs", ["foldTabs"], { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "activeKey": { "alias": "activeKey"; "required": true; "isSignal": true; }; "activeStyle": { "alias": "activeStyle"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
+}
+
+/**
+ * `<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`
+ */
+declare class FoldTabPanelComponent {
+    /** The owning `fold-tabs`, read via its template ref (`#t="foldTabs"`). */
+    readonly tabs: _angular_core.InputSignal<FoldTabsContext>;
+    /** This panel's tab key — must match one tab in the bar. */
+    readonly key: _angular_core.InputSignal<string>;
+    protected readonly isActive: _angular_core.Signal<boolean>;
+    protected readonly panelId: _angular_core.Signal<string>;
+    protected readonly labelledBy: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldTabPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldTabPanelComponent, "fold-tab-panel", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "key": { "alias": "key"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** The tone of a toast — drives its accent color + icon. */
@@ -3835,6 +4145,6 @@ declare class FoldPaletteRegistry {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<FoldPaletteRegistry>;
 }
 
-export { FOLD_AUTO_PALETTES, FOLD_BLUR_TOKENS, FOLD_BUILTIN_ICONS, FOLD_MOTION_TOKENS, FOLD_PALETTE_DEFAULT, FOLD_PANEL_CLOSE_LABEL, FOLD_RADIUS_TOKENS, FOLD_SEMANTIC_COLOR_TOKENS, FOLD_SHADOW_TOKENS, FOLD_SPACE_TOKENS, FOLD_TEXT_TOKENS, FOLD_TOAST_CONFIG, FoldAppShellComponent, FoldAsideLayoutComponent, FoldAvatarComponent, FoldAvatarDetailComponent, FoldAvatarListComponent, FoldBadgeComponent, FoldButtonComponent, FoldButtonIconComponent, FoldCalloutComponent, FoldCardComponent, FoldChoiceRowComponent, FoldContextCardComponent, FoldDataTableCellDirective, FoldDataTableComponent, FoldDisclosureComponent, FoldElementTitleComponent, FoldElevatedDirective, FoldEmptyStateComponent, FoldFieldComponent, FoldFieldIdDirective, FoldFieldListComponent, FoldFileDropzoneComponent, FoldHeroCardComponent, FoldHeroSectionComponent, FoldIconComponent, FoldIconRegistry, FoldIdService, FoldInputComponent, FoldLinkComponent, FoldLoadingStateComponent, FoldMenuComponent, FoldMenuItemComponent, FoldMenuSectionComponent, FoldMenuSeparatorComponent, FoldNavLauncherComponent, 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 type { FoldAutoPaletteName, FoldAvatarListItem, FoldAvatarRing, FoldAvatarRingStyle, FoldAvatarVariant, FoldBadgeVariant, FoldBlurToken, FoldBuiltinIconName, FoldButtonEmphasis, FoldButtonIconShape, FoldButtonIconSize, FoldButtonIconTone, FoldButtonIntent, FoldButtonShape, FoldButtonSize, FoldCalloutAppearance, FoldCalloutVariant, FoldChoiceOption, FoldComponentPanelDescriptor, FoldIconName, FoldIconSet, FoldIconSize, FoldMenuItemBadgeTone, FoldMenuLevel, FoldMenuTint, FoldMenuTogglePlacement, FoldMotionToken, FoldNumberControls, FoldNumberSpinner, FoldPageItem, FoldPaletteInput, FoldPanelConfig, FoldPanelContent, FoldPanelDescriptor, FoldPanelHandle, FoldPanelLabels, FoldPanelSide, FoldRadiusToken, FoldRangeValue, FoldSemanticColorToken, FoldShadowToken, FoldSpaceToken, FoldSpinnerSize, FoldStickyColumnAnchor, FoldSurfaceName, FoldTabNavItem, FoldTableColumn, FoldTableEmpty, FoldTableSort, FoldTableSortDir, FoldTableTone, FoldTemplatePanelDescriptor, FoldTextToken, FoldTimelineDatePlacement, FoldTimelineNode, FoldToast, FoldToastConfig, FoldToastVariant };
+export { FOLD_AUTO_PALETTES, FOLD_BLUR_TOKENS, FOLD_BUILTIN_ICONS, FOLD_MOTION_TOKENS, FOLD_PALETTE_DEFAULT, FOLD_PANEL_CLOSE_LABEL, FOLD_RADIUS_TOKENS, FOLD_SEMANTIC_COLOR_TOKENS, FOLD_SHADOW_TOKENS, FOLD_SPACE_TOKENS, FOLD_TEXT_TOKENS, FOLD_TOAST_CONFIG, FoldAppShellComponent, FoldAsideLayoutComponent, FoldAvatarComponent, FoldAvatarDetailComponent, FoldAvatarListComponent, FoldBadgeComponent, FoldButtonComponent, FoldButtonIconComponent, FoldCalloutComponent, FoldCardComponent, FoldChoiceRowComponent, FoldContextCardComponent, FoldDataTableCellDirective, FoldDataTableComponent, FoldDisclosureComponent, FoldElementTitleComponent, FoldElevatedDirective, FoldEmptyStateComponent, FoldFieldComponent, FoldFieldIdDirective, FoldFieldListComponent, FoldFileDropzoneComponent, FoldHeroCardComponent, FoldHeroSectionComponent, FoldIconComponent, FoldIconRegistry, FoldIdService, FoldInputComponent, FoldLinkComponent, FoldLoadingStateComponent, FoldMenuComponent, FoldMenuItemComponent, FoldMenuSectionComponent, FoldMenuSeparatorComponent, FoldNavLauncherComponent, FoldNavLayoutComponent, FoldNavTileComponent, FoldNumberInputComponent, FoldPageLayoutComponent, FoldPageSectionComponent, FoldPageTitleDirective, FoldPaginatorComponent, FoldPaletteRegistry, FoldPanelComponentOutletDirective, FoldPanelHeaderComponent, FoldPanelHostComponent, FoldPanelHostService, FoldPanelRef, FoldPanelToggle, FoldRangeSliderComponent, FoldRepeatPressDirective, FoldSearchComponent, FoldSelectComponent, FoldSliderComponent, FoldSpinnerComponent, FoldStatusBadgeComponent, FoldStickyColumnDirective, FoldSurfaceDirective, FoldTabPanelComponent, FoldTabsComponent, FoldTimelineComponent, FoldToastComponent, FoldToastContainerComponent, FoldToastService, FoldToggleIconComponent, FoldViewNavComponent, foldBlurVar, foldColorProperty, foldColorVar, foldHashSeed, foldMotionVar, foldRadiusVar, foldResolvePalette, foldShadowVar, foldSpaceVar, foldTextVar, observeElementWidth, provideFoldIcons, provideFoldPalette, provideFoldPanelLabels, provideFoldToasts };
+export type { FoldAutoPaletteName, FoldAvatarListItem, FoldAvatarRing, FoldAvatarRingStyle, FoldAvatarVariant, FoldBadgeVariant, FoldBlurToken, FoldBuiltinIconName, FoldButtonEmphasis, FoldButtonIconShape, FoldButtonIconSize, FoldButtonIconTone, FoldButtonIntent, FoldButtonShape, FoldButtonSize, FoldCalloutAppearance, FoldCalloutVariant, FoldCardBandChrome, FoldChoiceOption, FoldComponentPanelDescriptor, FoldIconName, FoldIconSet, FoldIconSize, FoldMenuItemBadgeTone, FoldMenuLevel, FoldMenuTint, FoldMenuTogglePlacement, FoldMotionToken, FoldNumberControls, FoldNumberSpinner, FoldPageItem, FoldPaletteInput, FoldPanelConfig, FoldPanelContent, FoldPanelDescriptor, FoldPanelHandle, FoldPanelLabels, FoldPanelSide, FoldRadiusToken, FoldRangeValue, FoldSemanticColorToken, FoldShadowToken, FoldSpaceToken, FoldSpinnerSize, FoldStickyColumnAnchor, FoldSurfaceName, FoldTabItem, FoldTableColumn, FoldTableEmpty, FoldTableSort, FoldTableSortDir, FoldTableTone, FoldTabsContext, FoldTemplatePanelDescriptor, FoldTextToken, FoldTimelineDatePlacement, FoldTimelineNode, FoldToast, FoldToastConfig, FoldToastVariant, FoldViewNavItem };
 //# sourceMappingURL=fold-ng.d.ts.map