fold-ng 0.2.1 → 0.3.0

package/llms.txt

@@ -26,8 +26,8 @@ with a `@selector` and an `@example`.
 - Actions: `[foldButton]` (on a real `<button>`/`<a>`; `emphasis` × `intent` axes; `loading`), `fold-button-icon` (momentary), `fold-toggle-icon` (toggle), `fold-link`.
 - Forms: `fold-input`, `fold-number-input`, `fold-select`, `fold-search`, `fold-slider`, `fold-range-slider`, `fold-file-dropzone` (Angular Signal Forms — no `ngModel`/`ReactiveFormsModule`).
 - Overlays: `fold-panel-host` / `fold-panel-header` (modal side panels with accessible name, `inert` background barrier, focus trap, scroll-lock; imperative `open<TData,TResult>()` → typed `FoldPanelRef`).
-- Navigation: `fold-menu`, `fold-nav-launcher`, `fold-tab-nav`.
-- Layout: `fold-app-shell`, `fold-page-layout`, `fold-aside-layout`, `fold-tab-layout`, `fold-hero-section`.
+- Navigation: `fold-menu`, `fold-nav-launcher`, `fold-view-nav` (tab-styled nav bar; items with a `link` render real `<a routerLink>` with `aria-current` + auto active state, else buttons; `direction="auto"`, `collapsed` icon rail), `fold-tabs` + `fold-tab-panel` (the in-page ARIA Tabs widget — `role="tablist"`, roving arrow keys).
+- Layout: `fold-app-shell`, `fold-page-layout`, `fold-aside-layout`, `fold-nav-layout` (places a nav/tabs bar + content, folds side↔top), `fold-hero-section`.
 - Content: `fold-card`, `fold-hero-card`, `fold-badge`, `fold-status-badge`, `fold-avatar`, `fold-avatar-list`, `fold-timeline`, `fold-data-table`, `fold-paginator`, `fold-field`.
 - Feedback: `fold-callout`, `fold-disclosure`, `fold-toast`, `fold-loading`, `fold-empty-state`.
 - Foundations: `fold-icon` (114 built-in SVGs + registry), `fold-spinner`.

package/package.json

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

package/tokens/scales.css

@@ -55,6 +55,14 @@
   --fold-space-lg: 16px;
   --fold-space-xl: 20px;
 
+  /* Rail-width scale — the shared widths for the nav-rail hierarchy, named to
+     pair 1:1 with the `--fold-color-bg-rail-*` colour tokens (primary app menu →
+     secondary workspace/aside → tertiary in-page nav). Retune once, every rail
+     follows; each layout's own `--fold-<layout>-rail-*` var still overrides. */
+  --fold-rail-primary: 64px; /* app menu — the compact icon rail (fold-app-shell) */
+  --fold-rail-secondary: 220px; /* workspace / content aside (fold-aside-layout) */
+  --fold-rail-tertiary: 200px; /* in-page / section nav (fold-nav-layout) */
+
   /* Motion scale — transition shorthands (duration + easing bundled, matching
      the app so `--t-*` bridge onto these 1:1). One knob per interaction speed. */
   --fold-motion-fast: 0.1s ease;

package/types/fold-ng.d.ts

@@ -2954,7 +2954,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 +2976,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 +3055,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 +3098,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 +3130,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 +3313,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 +3322,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).
+ *
+ * **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 />
  * ```
  */
-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 +4064,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, 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