fold-ng 0.4.0 → 0.5.1

package/types/fold-ng.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, ElementRef, Signal, Provider, InjectionToken, Type, Injector, InputSignal, WritableSignal } from '@angular/core';
-import { FormValueControl, ValidationError } from '@angular/forms/signals';
+import { InjectionToken, Provider, TemplateRef, ElementRef, Signal, Type, Injector, InputSignal, WritableSignal } from '@angular/core';
+import { FormValueControl, ValidationError, FormCheckboxControl } from '@angular/forms/signals';
 
 /**
  * `<fold-app-shell>` — the responsive application skeleton.
@@ -847,6 +847,183 @@ 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>;
 }
 
+/**
+ * Every user-facing / accessible string the inline-confirm renders. The
+ * `typePrompt` is a function of the value to match, so a locale can reword the
+ * whole sentence rather than translate a fixed template. All defaults are
+ * English — a non-English app overrides them once via
+ * {@link provideFoldInlineConfirmLabels}, or per instance via the `labels` input.
+ */
+interface FoldInlineConfirmLabels {
+    /** Label of the confirm button. */
+    readonly confirm: string;
+    /** Label of the cancel button. */
+    readonly cancel: string;
+    /** `aria-label` of the icon-only cancel button (`cancelIcon`). */
+    readonly cancelAria: string;
+    /** Confirm-button label while `loading`. */
+    readonly busy: string;
+    /** Accessible name of the confirmation group that replaces the trigger. */
+    readonly group: string;
+    /** Placeholder + prompt for the secret field (`password`, no `match`). */
+    readonly secret: string;
+    /** The type-to-confirm prompt, e.g. `("prod") => "Type prod to confirm"`. */
+    readonly typePrompt: (match: string) => string;
+}
+/** The English defaults — the base every override merges onto. */
+declare const FOLD_INLINE_CONFIRM_DEFAULT_LABELS: FoldInlineConfirmLabels;
+/** App-wide inline-confirm labels; defaults to English. */
+declare const FOLD_INLINE_CONFIRM_LABELS: InjectionToken<FoldInlineConfirmLabels>;
+/**
+ * Provide app-wide inline-confirm labels once at bootstrap. Partial — any key
+ * you omit keeps its English default.
+ *
+ * @example
+ * ```ts
+ * // app.config.ts
+ * providers: [
+ *   provideFoldInlineConfirmLabels({
+ *     confirm: "Confirmer",
+ *     cancel: "Annuler",
+ *     typePrompt: (m) => `Saisissez ${m} pour confirmer`,
+ *   }),
+ * ];
+ * ```
+ */
+declare function provideFoldInlineConfirmLabels(labels: Partial<FoldInlineConfirmLabels>): Provider;
+
+/**
+ * `<fold-inline-confirm>` — an in-place "are you sure?" affordance. The host
+ * projects a **trigger** (a real, focusable control — a `foldButton`, a
+ * `fold-button-icon`); on activation the trigger is replaced *in the same slot*
+ * by a confirm/cancel row, so a destructive action is guarded without a modal
+ * and without the layout jumping. Emits `confirmed` / `cancelled`.
+ *
+ * Three families, chosen by input:
+ *
+ * - **Simple** (default) — trigger → `Confirm` · `Cancel`. `confirmed` emits `""`.
+ * - **Type-to-confirm** — set `match`: the confirm button stays disabled until
+ *   the user types the value (case-insensitive, trimmed). `confirmed` emits the
+ *   typed text.
+ * - **Secret** — set `password` (no `match`): a masked field that confirms once
+ *   non-empty. `confirmed` emits the secret, so a handler can post it to the
+ *   server (which is the only place a password can actually be checked).
+ *
+ * `Escape` cancels; `Enter` in the field confirms when valid. Opening moves
+ * focus to the field (typed families) or the confirm button (simple), and
+ * cancelling returns focus to the trigger.
+ *
+ * @selector `fold-inline-confirm`
+ *
+ * @example
+ * ```html
+ * <!-- simple -->
+ * <fold-inline-confirm (confirmed)="remove()">
+ *   <fold-button-icon icon="trash" tooltip="Delete" />
+ * </fold-inline-confirm>
+ *
+ * <!-- type-to-confirm -->
+ * <fold-inline-confirm [match]="node.name" (confirmed)="archive()">
+ *   <button foldButton emphasis="outline" intent="danger">Delete node</button>
+ * </fold-inline-confirm>
+ *
+ * <!-- password-gated -->
+ * <fold-inline-confirm password (confirmed)="deleteAccount($event)">
+ *   <button foldButton intent="danger">Delete account</button>
+ * </fold-inline-confirm>
+ *
+ * <!-- async: keep it open + show a spinner until the request settles -->
+ * <fold-inline-confirm
+ *   keepOpenOnConfirm
+ *   [loading]="pending()"
+ *   [(open)]="confirmOpen"
+ *   confirmIcon="bin"
+ *   cancelIcon="close"
+ *   (confirmed)="onDelete()">
+ *   <fold-button-icon icon="bin" tooltip="Delete" />
+ * </fold-inline-confirm>
+ * ```
+ */
+declare class FoldInlineConfirmComponent {
+    private readonly defaults;
+    /** Intent (colour) of the confirm button. @default "danger" */
+    readonly intent: _angular_core.InputSignal<FoldButtonIntent>;
+    /** Optional warning shown above the confirm row. */
+    readonly message: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The exact text the user must type to confirm (type-to-confirm family).
+     * Empty → the simple family. Matching is case-insensitive + trimmed.
+     */
+    readonly match: _angular_core.InputSignal<string>;
+    /**
+     * Mask the field and confirm on any non-empty value (secret family). A
+     * password can't be verified in the browser, so this only *collects* it —
+     * `confirmed` emits it for the handler to send to the server. Ignored when
+     * `match` is set.
+     */
+    readonly password: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Placeholder for the typed / secret field. */
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** Pending state — disables the buttons and shows the `busy` label. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Control density. @default "sm" */
+    readonly size: _angular_core.InputSignal<FoldButtonSize>;
+    /** Optional leading icon on the confirm button (e.g. `"bin"` on "Delete"). */
+    readonly confirmIcon: _angular_core.InputSignal<FoldIconName | undefined>;
+    /**
+     * Render the cancel as an icon-only button of the given icon (e.g. `"close"`)
+     * instead of a labelled button. Unset → a labelled cancel. The name is your
+     * choice from the icon registry.
+     */
+    readonly cancelIcon: _angular_core.InputSignal<FoldIconName | undefined>;
+    /**
+     * Keep the affordance open after `confirmed` fires, so an async handler can
+     * show `loading` and then close it via `[(open)]`. Default: close on confirm
+     * (the right behaviour for synchronous / optimistic actions).
+     */
+    readonly keepOpenOnConfirm: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Per-instance label overrides, merged over the app-wide + English defaults. */
+    readonly labels: _angular_core.InputSignal<Partial<FoldInlineConfirmLabels> | undefined>;
+    /** Emitted when the user confirms — carries the typed text (or `""`). */
+    readonly confirmed: _angular_core.OutputEmitterRef<string>;
+    /** Emitted when the user cancels (button or `Escape`). */
+    readonly cancelled: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Whether the confirm affordance (vs. the trigger) is showing. Two-way, so a
+     * parent can drive it — open it programmatically, or close it when an async
+     * `confirmed` handler settles (paired with `keepOpenOnConfirm`).
+     */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** The text currently typed in the field. */
+    protected readonly typed: _angular_core.WritableSignal<string>;
+    private readonly triggerEl;
+    private readonly groupEl;
+    /** SSR-safe id tying the message to the confirm group. */
+    protected readonly msgId: string;
+    /** Effective labels: English defaults ← app-wide provider ← per-instance input. */
+    protected readonly l: _angular_core.Signal<FoldInlineConfirmLabels>;
+    /** True when a value must be typed before confirming. */
+    protected readonly needsInput: _angular_core.Signal<boolean>;
+    /** Whether the typed value satisfies the gate (match, or non-empty secret). */
+    protected readonly inputValid: _angular_core.Signal<boolean>;
+    /** The confirm button is live once the gate is satisfied and nothing pends. */
+    protected readonly canConfirm: _angular_core.Signal<boolean>;
+    protected readonly fieldType: _angular_core.Signal<"text" | "password">;
+    /** Prompt above a typed field: the match sentence, or the secret label. */
+    protected readonly prompt: _angular_core.Signal<string>;
+    /** Has the affordance ever opened? Gates focus-return so mount doesn't steal. */
+    private opened;
+    constructor();
+    /** Start the confirm flow (called by the projected trigger's click). */
+    protected activate(): void;
+    /** Complete the confirmation, emitting the typed value (or `""`). */
+    protected confirm(): void;
+    /** Abort and restore the trigger (focus returns via the render effect). */
+    protected cancel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldInlineConfirmComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldInlineConfirmComponent, "fold-inline-confirm", never, { "intent": { "alias": "intent"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "match": { "alias": "match"; "required": false; "isSignal": true; }; "password": { "alias": "password"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "confirmIcon": { "alias": "confirmIcon"; "required": false; "isSignal": true; }; "cancelIcon": { "alias": "cancelIcon"; "required": false; "isSignal": true; }; "keepOpenOnConfirm": { "alias": "keepOpenOnConfirm"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "confirmed": "confirmed"; "cancelled": "cancelled"; "open": "openChange"; }, 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";
@@ -1600,10 +1777,13 @@ interface FoldTableColumn {
     readonly label: string;
     /** Renders a sort button in the header; emits `sortChange` with `key`. */
     readonly sortable?: boolean;
-    /** Right-align the header + cells (numeric columns). */
-    readonly align?: "right";
+    /** Text alignment of the header + cells. Default left; `right` for numeric. */
+    readonly align?: "right" | "center";
     /** Optional fixed column width (any CSS length). */
     readonly width?: string;
+    /** Clip overflowing text to one line with an ellipsis (pair with `width`).
+     *  Cell templates should set their own `title` for the full-text tooltip. */
+    readonly truncate?: boolean;
     /** Extra class applied to every cell in the column. */
     readonly cellClass?: string;
 }
@@ -1613,12 +1793,66 @@ interface FoldTableEmpty {
     readonly subtitle?: string;
 }
 
+/**
+ * Every user-facing / accessible string {@link FoldDataTableComponent} renders
+ * that isn't supplied per row. Parameterised strings are functions so a locale
+ * can reword, not just translate. All defaults are English — a non-English app
+ * overrides them once via {@link provideFoldDataTableLabels}, or per instance
+ * via the `labels` input. (Per-row names come from the `selectionLabel` input;
+ * {@link FoldDataTableLabels.selectRow} is only the fallback when it's unset.)
+ */
+interface FoldDataTableLabels {
+    /** `aria-label` of the select-all header checkbox. */
+    readonly selectAll: string;
+    /** Fallback `aria-label` of a row checkbox (used when no `selectionLabel`). */
+    readonly selectRow: string;
+    /** A sortable header's button `aria-label`, e.g. `("Name") => "Sort by Name"`. */
+    readonly sortBy: (column: string) => string;
+    /** The loading spinner's accessible label. */
+    readonly loading: string;
+}
+/** The English defaults — the base every override merges onto. */
+declare const FOLD_DATA_TABLE_DEFAULT_LABELS: FoldDataTableLabels;
+/** App-wide data-table labels; defaults to English. */
+declare const FOLD_DATA_TABLE_LABELS: InjectionToken<FoldDataTableLabels>;
+/**
+ * Provide app-wide data-table labels once at bootstrap. Partial — any key you
+ * omit keeps its English default.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   provideFoldDataTableLabels({
+ *     selectAll: "Tout sélectionner",
+ *     sortBy: (c) => `Trier par ${c}`,
+ *   }),
+ * ];
+ * ```
+ */
+declare function provideFoldDataTableLabels(labels: Partial<FoldDataTableLabels>): Provider;
+
 /**
  * `fold-data-table` — a controlled, presentational roster table. The parent
  * supplies already-paged/sorted `rows`, a `columns` definition, and a
  * `<ng-template foldCell="<key>">` per column for the cell content; the table
  * owns the chrome (sticky sortable header, row tone accents, focus/click, the
- * mobile card layout, the empty state).
+ * mobile card layout, the loading + empty states).
+ *
+ * Selection stays controlled too: pass a `selected` set of row keys and handle
+ * `selectionChange` — the table renders the checkbox column, the header
+ * select-all (with an indeterminate state over the current rows), and the
+ * selected-row tint, but never owns the set.
+ *
+ * The narrow-screen behaviour is the parent's choice, not an imposed one, via
+ * `mobileLayout`: `scroll` (default — stay tabular, scroll horizontally),
+ * `auto-cards` (each row stacks into a label/value card), or `custom` (the
+ * parent supplies `<ng-template foldRowCard let-row>` and owns the card).
+ *
+ * Accessible by construction: the first column renders as `<th scope="row">`
+ * (screen readers announce each row by its identity cell), the sort direction
+ * rides on `aria-sort` (the icon is decorative), clickable rows answer Enter and
+ * Space and form a single roving-tabindex group (Arrow/Home/End move between
+ * rows), and `caption` gives the table a visually-hidden name.
  *
  * Generic over the row type `T` so `rowKey`/`rowTone`/`rowClick` stay typed.
  * Cell templates are untyped (`let-row` is `any`) — render through the parent's
@@ -1633,28 +1867,101 @@ declare class FoldDataTableComponent<T> {
     readonly rowTone: _angular_core.InputSignal<((row: T) => FoldTableTone) | undefined>;
     readonly sort: _angular_core.InputSignal<FoldTableSort | null>;
     readonly empty: _angular_core.InputSignal<FoldTableEmpty | undefined>;
+    /** While `true`, shows a spinner instead of the empty state — a table that
+     *  is fetching reads as "loading", never as "no data". */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible table name, rendered as a visually-hidden `<caption>`. Set it
+     *  when the surrounding context does not already name the table for AT. */
+    readonly caption: _angular_core.InputSignal<string | undefined>;
     /** Makes rows focusable + clickable (emits `rowClick`). */
     readonly clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly zebra: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly hover: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly mobileCards: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * How the table behaves on a narrow screen:
+     * - `scroll` (default) — stay tabular; the body scrolls horizontally. The
+     *   table imposes no card layout unless asked.
+     * - `auto-cards` — each row stacks into an auto label/value card.
+     * - `custom` — hide the table and render the projected `foldRowCard` template
+     *   per row, so the parent owns the mobile presentation.
+     */
+    readonly mobileLayout: _angular_core.InputSignal<"scroll" | "auto-cards" | "custom">;
+    /** Row density — `compact` tightens padding for dense rosters. */
+    readonly density: _angular_core.InputSignal<"comfortable" | "compact">;
+    /** Pin the identity column while the body scrolls horizontally (wide tables). */
+    readonly stickyFirst: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Renders the checkbox column + header select-all. */
+    readonly selectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Controlled selection — the set of selected row keys. The parent owns it. */
+    readonly selected: _angular_core.InputSignal<ReadonlySet<string | number>>;
+    /** Accessible label for a row's checkbox, e.g. `(row) => row.name`. */
+    readonly selectionLabel: _angular_core.InputSignal<((row: T) => string) | undefined>;
+    /** Per-instance label overrides (merged over the app-wide / English defaults). */
+    readonly labels: _angular_core.InputSignal<Partial<FoldDataTableLabels> | undefined>;
+    /** Emits the next selection set on any checkbox toggle (never mutates input). */
+    readonly selectionChange: _angular_core.OutputEmitterRef<Set<string | number>>;
     /** Emits the clicked sortable column's `key`. */
     readonly sortChange: _angular_core.OutputEmitterRef<string>;
     readonly rowClick: _angular_core.OutputEmitterRef<T>;
+    /** Key of the row that currently holds the single tab stop (roving tabindex). */
+    private readonly focusedKey;
+    /** True on a narrow viewport — gates the custom mobile-card rendering so the
+     *  desktop never instantiates the (CSS-hidden) per-row cards. */
+    protected readonly isNarrow: _angular_core.WritableSignal<boolean>;
+    private readonly destroyRef;
+    private readonly injectedLabels;
+    /** Effective labels — the app-wide (or English) set, with the `labels` input on top. */
+    protected readonly l: _angular_core.Signal<FoldDataTableLabels>;
+    constructor();
     private readonly cells;
     private readonly cellMap;
+    private readonly rowCard;
+    /** The custom mobile-card template, only when `mobileLayout="custom"`. */
+    readonly rowCardTemplate: _angular_core.Signal<TemplateRef<unknown> | null>;
+    /**
+     * The toolbar's surface level — the "weight" the title bar lends the table.
+     * All four map to fold surface tokens (never a hard-coded colour): `default`
+     * (a subtle header lift), `sunken` / `raised` (a step down / up the elevation
+     * ramp), and `accent` — a brand-filled bar whose projected content
+     * auto-inverts to the on-accent palette per theme (the shared
+     * `[data-surface="accent"]` machinery).
+     */
+    readonly toolbarSurface: _angular_core.InputSignal<"accent" | "default" | "sunken" | "raised">;
     /** The first column is the identity/primary cell (full-width on mobile). */
     readonly primaryKey: _angular_core.Signal<string>;
+    /** Total ARIA column count (data columns + the checkbox column). */
+    readonly colCount: _angular_core.Signal<number>;
+    /** Current row keys, in order — the roving-nav anchor set. */
+    private readonly rowKeys;
+    /** The row that holds the single tab stop: the focused row while it still
+     *  exists, else the first row — so a removed/filtered focus never strands the
+     *  roving group with zero tab stops. */
+    private readonly activeRowKey;
     cellTemplate(key: string): TemplateRef<unknown> | null;
     keyOf(row: T, index: number): string | number;
     toneOf(row: T): FoldTableTone;
     isSorted(key: string): boolean;
-    /** The sort glyph for a column: neutral `↕`, or the active direction. */
-    sortArrow(key: string): string;
+    /** The sort icon for a column: a neutral up/down (`expand-all`) when idle, or
+     *  the active direction chevron. Decorative — `aria-sort` on the `<th>` is the
+     *  accessible carrier, so these icons stay `aria-hidden` (fold-icon default). */
+    sortIcon(key: string): FoldIconName;
     ariaSort(key: string): "ascending" | "descending" | "none";
     onRowActivate(row: T): void;
+    isRowSelected(row: T, index: number): boolean;
+    /** All current rows selected (drives the header checkbox `checked`). */
+    readonly allSelected: _angular_core.Signal<boolean>;
+    /** Some — but not all — current rows selected (header `indeterminate`). */
+    readonly someSelected: _angular_core.Signal<boolean>;
+    toggleRow(row: T, index: number): void;
+    /** Select-all toggles every current row; if all are already in, clears them. */
+    toggleAll(): void;
+    labelFor(row: T): string;
+    /** The single tab stop: the focused (or fallback first) row. */
+    rowTabIndex(row: T, index: number): 0 | -1 | null;
+    onRowFocus(row: T, index: number): void;
+    onRowKeydown(event: KeyboardEvent, row: T): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldDataTableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldDataTableComponent<any>, "fold-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "rowTone": { "alias": "rowTone"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "empty": { "alias": "empty"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "zebra": { "alias": "zebra"; "required": false; "isSignal": true; }; "hover": { "alias": "hover"; "required": false; "isSignal": true; }; "mobileCards": { "alias": "mobileCards"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; "rowClick": "rowClick"; }, ["cells"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldDataTableComponent<any>, "fold-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "rowTone": { "alias": "rowTone"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "empty": { "alias": "empty"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "zebra": { "alias": "zebra"; "required": false; "isSignal": true; }; "hover": { "alias": "hover"; "required": false; "isSignal": true; }; "mobileLayout": { "alias": "mobileLayout"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "stickyFirst": { "alias": "stickyFirst"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectionLabel": { "alias": "selectionLabel"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "toolbarSurface": { "alias": "toolbarSurface"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "sortChange": "sortChange"; "rowClick": "rowClick"; }, ["cells", "rowCard"], ["[foldToolbar]"], true, never>;
 }
 
 /**
@@ -1678,6 +1985,28 @@ declare class FoldDataTableCellDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FoldDataTableCellDirective, "ng-template[foldCell]", never, { "foldCell": { "alias": "foldCell"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Marks the `<ng-template>` that renders a whole row as a **custom mobile card**
+ * inside `<fold-data-table mobileLayout="custom">`:
+ *
+ * ```html
+ * <ng-template foldRowCard let-row let-i="index"> … </ng-template>
+ * ```
+ *
+ * The template context is `{ $implicit: row, index }`. When `mobileLayout` is
+ * `"custom"`, the table hides on narrow screens and this template renders once
+ * per row instead of the auto label/value stack — the parent owns the mobile
+ * presentation entirely (including any interactions it wants inside the card).
+ *
+ * As with cell templates, `let-row` is untyped by design — annotate through the
+ * parent component's typed helpers.
+ */
+declare class FoldDataTableRowCardDirective {
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldDataTableRowCardDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FoldDataTableRowCardDirective, "ng-template[foldRowCard]", never, {}, {}, never, never, true, never>;
+}
+
 /** Where the column pins while the main content scrolls past it. */
 type FoldStickyColumnAnchor = "top" | "center" | "bottom";
 /**
@@ -1731,7 +2060,7 @@ declare class FoldStickyColumnDirective {
      *  flow position: `top`/`center` (which pin the top edge, at 0 / 50%) need the
      *  column at the *top* of its tall row (`start`); `bottom` needs it at the
      *  *bottom* (`end`), else it starts off-screen and only catches mid-scroll. */
-    protected readonly alignSelfStyle: _angular_core.Signal<"end" | "start">;
+    protected readonly alignSelfStyle: _angular_core.Signal<"start" | "end">;
     /** Centre anchoring pins the top edge at 50%, then pulls back half its height. */
     protected readonly transformStyle: _angular_core.Signal<"none" | "translateY(-50%)">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldStickyColumnDirective, never>;
@@ -2122,6 +2451,12 @@ declare class FoldInputComponent implements FormValueControl<string> {
      * @default 'text'
      */
     readonly type: _angular_core.InputSignal<"text" | "email" | "password" | "tel" | "url">;
+    /** On a `password` input, offer a reveal (eye) toggle to show/hide the value. */
+    readonly revealable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name of the reveal control while hidden. @default 'Show password' */
+    readonly revealLabel: _angular_core.InputSignal<string>;
+    /** Accessible name of the reveal control while shown. @default 'Hide password' */
+    readonly hideLabel: _angular_core.InputSignal<string>;
     /**
      * Size preset controlling height, font-size, padding and border-radius.
      * - `sm` — compact (text-sm, tight padding) — inline table edits, compact forms
@@ -2184,13 +2519,22 @@ declare class FoldInputComponent implements FormValueControl<string> {
     protected readonly errorMessage: _angular_core.Signal<string | undefined>;
     /** `aria-describedby` target: the error when shown, else the hint, else none. */
     protected readonly describedBy: _angular_core.Signal<string | null>;
+    /** Is the password currently revealed (shown as plain text)? */
+    protected readonly revealed: _angular_core.WritableSignal<boolean>;
+    /** Whether to render the reveal toggle — a `revealable` password input. */
+    protected readonly showReveal: _angular_core.Signal<boolean>;
+    /** The native `type` to render — `text` while a password is revealed. */
+    protected readonly effectiveType: _angular_core.Signal<"text" | "email" | "password" | "tel" | "url">;
+    /** The reveal control's accessible name, tracking its state. */
+    protected readonly revealAria: _angular_core.Signal<string>;
+    protected toggleReveal(): void;
     /** Handles native input event. `value.set()` also fires the model's
      *  auto `valueChange` output for standalone `(valueChange)` consumers. */
     onInputChange(event: Event): void;
     /** Mark the field touched on blur, so errors can surface. */
     protected onBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldInputComponent, "fold-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "optionalLabel": { "alias": "optionalLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldInputComponent, "fold-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "revealable": { "alias": "revealable"; "required": false; "isSignal": true; }; "revealLabel": { "alias": "revealLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "optionalLabel": { "alias": "optionalLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 /** The increment/decrement glyph: chevrons, `− / +`, or no buttons. */
@@ -2435,50 +2779,690 @@ declare class FoldSelectComponent implements FormValueControl<string> {
 }
 
 /**
- * `<fold-slider>` — a single-value range slider with the design-system track,
- * fill and thumb (a styled native `<input type="range">`). Two-way bound via
- * `[(value)]`.
+ * Zero-dependency placement math for {@link FoldPopoverComponent}. Pure and
+ * framework-free so it unit-tests without a DOM: give it the anchor rect, the
+ * floating size and the viewport, get back the `{ x, y }` to pin the floating
+ * element (viewport coordinates, for `position: fixed`) plus the placement it
+ * actually resolved to after collision handling.
+ *
+ * Three middlewares, in the order a good popover applies them:
+ * 1. **flip** — pick the best-fitting side: keep the preferred one if it fits,
+ *    else its opposite, else whichever has the most room (so a bottom menu opens
+ *    upward near the fold instead of spilling offscreen).
+ * 2. **size** — report the space available on the chosen side (`maxWidth` /
+ *    `maxHeight`), so the caller caps the panel and scrolls the overflow instead
+ *    of letting it run off the viewport.
+ * 3. **shift** — slide along the cross axis to stay within the viewport padding,
+ *    without leaving the anchor's side.
+ *
+ * We deliberately do not depend on Floating UI — fold ships no runtime deps.
+ */
+/** The side of the anchor the floating element sits on. */
+type FoldPopoverSide = "top" | "bottom" | "left" | "right";
+/** Alignment of the floating element along the anchor's cross axis. */
+type FoldPopoverAlign = "start" | "center" | "end";
+/** A full placement: a side, optionally suffixed with an alignment. */
+type FoldPopoverPlacement = FoldPopoverSide | `${FoldPopoverSide}-${FoldPopoverAlign}`;
+/** A rectangle in viewport coordinates (a subset of `DOMRect`). */
+interface FoldRect {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+interface FoldPlacementInput {
+    /** The trigger's bounding rect, in viewport coordinates. */
+    readonly anchor: FoldRect;
+    /** The floating element's measured size. */
+    readonly floating: {
+        readonly width: number;
+        readonly height: number;
+    };
+    /** Preferred placement before collision handling. */
+    readonly placement: FoldPopoverPlacement;
+    /**
+     * Ordered fallbacks tried (after the preferred) when the preferred side can't
+     * fit — the first that fits wins, else the roomiest of all candidates. Each
+     * may change side *and* alignment. Defaults to the opposite side.
+     */
+    readonly fallbackPlacements?: readonly FoldPopoverPlacement[] | undefined;
+    /** Gap between the anchor and the floating element, in px. */
+    readonly offset: number;
+    /** Viewport size (usually `innerWidth` / `innerHeight`). */
+    readonly viewport: {
+        readonly width: number;
+        readonly height: number;
+    };
+    /** Minimum gap kept between the floating element and the viewport edge. */
+    readonly padding: number;
+}
+interface FoldPlacementResult {
+    readonly x: number;
+    readonly y: number;
+    /** The placement after flip — drives the arrow / `data-placement`. */
+    readonly placement: FoldPopoverPlacement;
+    /** Space available to the floating element on the resolved side, minus
+     *  padding — the consumer caps `max-width` / `max-height` to these and lets
+     *  the panel scroll (the `size` middleware). */
+    readonly maxWidth: number;
+    readonly maxHeight: number;
+}
+/**
+ * Resolve `{ x, y, placement, maxWidth, maxHeight }` for a floating element.
+ * Order: **flip** (choose the best-fitting side) → **size** (available space on
+ * that side, for the caller to cap + scroll) → **shift** (slide along the cross
+ * axis to stay in the viewport).
+ */
+declare function computePlacement(input: FoldPlacementInput): FoldPlacementResult;
+
+/**
+ * A data-driven option for the array API of `fold-listbox` / `fold-multiselect`
+ * (`[options]`). Use it — instead of projecting `<fold-option>` — when the list
+ * is data, not markup: the value type is linked to the control's value at compile
+ * time (no projection seam). For rich per-row content, project an
+ * `<ng-template #option let-o>` alongside `[options]`; otherwise `label` renders.
+ */
+interface FoldSelectOption<T> {
+    /** The value written back to the control when the row is chosen. */
+    readonly value: T;
+    /** The row's visible text (also the type-ahead + trigger label). */
+    readonly label: string;
+    /** Skip in keyboard nav and block selection. @default false */
+    readonly disabled?: boolean;
+}
+
+/**
+ * The contract a `fold-option` needs from whatever owns it — the single-select
+ * `fold-listbox` or the multi-select `fold-multiselect`. Injected through a token
+ * (not the concrete class) so an option stays decoupled from either component and
+ * there is no circular import. Generic over the option value type `T`; the token
+ * itself is erased to `unknown` (the option↔owner value link is a runtime
+ * contract — content projection can't carry `T` statically).
+ */
+interface FoldListboxOwner<T> {
+    /** Is this option's value currently selected? (equality vs. membership.) */
+    isSelected(value: T): boolean;
+    /** The keyboard-active option's id — the listbox's `aria-activedescendant`. */
+    readonly activeId: Signal<string | null>;
+}
+
+/**
+ * `<fold-listbox>` — a **styleable** single-select, the richer sibling of the
+ * native-`<select>`-wrapping {@link FoldSelectComponent}. Reach for it when the
+ * options need custom rendering the native popup can't give (an icon, a second
+ * line, a status) — otherwise `fold-select` stays the lighter, mobile-native
+ * default. For picking several values, use `fold-multiselect`.
+ *
+ * Built on {@link FoldPopoverComponent}: the popover owns positioning, the native
+ * top layer, outside-click / `Escape` dismissal and focus return. On top of that
+ * this adds the ARIA select pattern — a `role="listbox"` that holds focus and
+ * drives `aria-activedescendant`, full keyboard (↑/↓, `Home`/`End`, type-ahead,
+ * `Enter`) — and Signal-Forms wiring (`FormValueControl<string>`), so `[formField]`
+ * and `[(value)]` both work, exactly like `fold-input` / `fold-select`.
+ *
+ * ```html
+ * <fold-listbox label="Devise" [(value)]="currency" placeholder="Choisir…">
+ *   <fold-option value="EUR">Euro</fold-option>
+ *   <fold-option value="USD">US Dollar</fold-option>
+ * </fold-listbox>
+ * ```
+ *
+ * @selector `fold-listbox`
+ */
+declare class FoldListboxComponent<T> implements FormValueControl<T | null>, FoldListboxOwner<T> {
+    /** Selected value (the chosen option's `value`), or `null` when nothing is
+     *  picked. A `model()` so `FormField` and `[(value)]` stay in sync. Generic
+     *  over the option value — `string` by inference, but `number`, an `enum` or
+     *  an object all work (objects need {@link compareWith}). */
+    readonly value: _angular_core.ModelSignal<T | null>;
+    /** How two values are compared for selection — supply it for **object** values
+     *  (reference equality won't match); primitives (string/number/enum) don't need
+     *  it. @default `Object.is` */
+    readonly compareWith: _angular_core.InputSignal<((a: T, b: T) => boolean) | undefined>;
+    /** Data-driven options — the alternative to projecting `<fold-option>`. When
+     *  set, the value type is linked to the options at compile time (no projection
+     *  seam). For rich rows, project `<ng-template #option let-o>`. */
+    readonly options: _angular_core.InputSignal<readonly FoldSelectOption<T>[] | undefined>;
+    /** Disabled state — bound automatically by `FormField`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Two-way touched state — set on selection / blur, kept in sync with the field. */
+    readonly touched: _angular_core.ModelSignal<boolean>;
+    /** Validation errors — bound by `FormField`. */
+    readonly errors: _angular_core.InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
+    /** Two-way open state of the popup. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Size preset — see {@link FoldInputComponent.size}. @default 'md' */
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /** Visual variant — see {@link FoldInputComponent.variant}. @default 'default' */
+    readonly variant: _angular_core.InputSignal<"default" | "panel">;
+    /** Optional label displayed above the control. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Show a required marker on the label. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show a lighter `(optional)` marker on the label (ignored when required). */
+    readonly optional: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The word inside the optional marker. @default 'optional' */
+    readonly optionalLabel: _angular_core.InputSignal<string>;
+    /** Optional helper text shown under the control. */
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /** Text shown on the trigger while nothing is selected. */
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** Preferred popup placement. @default 'bottom-start' */
+    readonly placement: _angular_core.InputSignal<FoldPopoverPlacement>;
+    /** Show a clear (×) affordance on the trigger once a value is picked. */
+    readonly allowClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name of the clear button. @default 'Clear' */
+    readonly clearLabel: _angular_core.InputSignal<string>;
+    /** Unique, SSR-safe id for label association (see {@link FoldIdService}). */
+    readonly inputId: string;
+    /** Id of the `role="listbox"` element (own, distinct from the popover panel). */
+    protected readonly listId: string;
+    /** Rich per-row template for the `[options]` array API (`<ng-template #option>`). */
+    protected readonly optionTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: FoldSelectOption<T>;
+    }> | undefined>;
+    private readonly projectedOptions;
+    private readonly renderedOptions;
+    /** The live option instances, from whichever API is in use — the `[options]`
+     *  array (rendered in the view) when set, else the projected `<fold-option>`s. */
+    private readonly allOptions;
+    private readonly list;
+    /** Compare two values — the injected `compareWith`, else `Object.is`. Called
+     *  only where both operands are `T`, so no erasure leaks in. */
+    private eq;
+    /** Shared roving/keyboard core; single-select commits + closes on activation. */
+    private readonly nav;
+    /** `aria-activedescendant`, read by each `fold-option` for its `is-active`. */
+    readonly activeId: _angular_core.Signal<string | null>;
+    /** The selected option's label, for the trigger. */
+    protected readonly selectedLabel: _angular_core.Signal<string | undefined>;
+    /** Whether the clear affordance is currently offered. */
+    protected readonly showClear: _angular_core.Signal<boolean>;
+    /** The message to show under the field: the first error, once touched. */
+    protected readonly errorMessage: _angular_core.Signal<string | undefined>;
+    /** `aria-describedby` target: the error when shown, else the hint, else none. */
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    /** Has the popup been opened at least once this lifetime — so closing it (by
+     *  Escape, outside-click, Tab or a pick) can mark the field touched, exactly as
+     *  a native `<select>` does on blur. Without this a `required` select that the
+     *  user opens and dismisses would never surface its error. */
+    private hasOpened;
+    constructor();
+    /** A value is selected when it equals the current one (via `compareWith`). */
+    isSelected(value: T): boolean;
+    /** Clear the selection (the `allowClear` ×). */
+    protected clear(event: Event): void;
+    /** Open with the keys a native select opens on; otherwise type-ahead picks
+     *  directly without opening — native-`<select>` parity. */
+    protected onTriggerKeydown(event: KeyboardEvent): void;
+    /** Keyboard while the list is open and focused — delegated to the core. */
+    protected onListKeydown(event: KeyboardEvent): void;
+    /** Click on a row selects it (delegated, so projected rows need no wiring). */
+    protected onListClick(event: MouseEvent): void;
+    /** Hover arms the row, so pointer and keyboard share one active row. */
+    protected onListPointermove(event: PointerEvent): void;
+    /** Index of the selected option (or -1) — where the keyboard arms on open. */
+    private selectedIndex;
+    /** The enabled option under an event target, or null. */
+    private enabledOptionFrom;
+    private selectAt;
+    private commit;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldListboxComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldListboxComponent<any>, "fold-listbox", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "optionalLabel": { "alias": "optionalLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "allowClear": { "alias": "allowClear"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "open": "openChange"; }, ["optionTemplate", "projectedOptions"], ["*"], true, never>;
+}
+
+/**
+ * `<fold-multiselect>` — the multi-select sibling of {@link FoldListboxComponent}.
+ * Same styleable popover + `fold-option` rows, but the value is a set: activating
+ * a row **toggles** its membership and the panel **stays open**, so several picks
+ * are one interaction. It's a separate component (not a `multiple` flag) because
+ * the Signal-Forms value type is genuinely different — `readonly string[]`, not
+ * `string` — so `[formField]` and `[(value)]` stay honestly typed.
+ *
+ * `role="listbox"` + `aria-multiselectable`, full keyboard (↑/↓, `Home`/`End`,
+ * type-ahead; `Enter`/`Space` toggle), and each selected row keeps its check. The
+ * trigger summarises the selection (the chosen labels, joined).
+ *
+ * ```html
+ * <fold-multiselect label="Genres" [(value)]="genres" placeholder="Pick a few…">
+ *   <fold-option value="rock">Rock</fold-option>
+ *   <fold-option value="jazz">Jazz</fold-option>
+ * </fold-multiselect>
+ * ```
+ *
+ * @selector `fold-multiselect`
+ */
+declare class FoldMultiselectComponent<T> implements FormValueControl<readonly T[]>, FoldListboxOwner<T> {
+    /** Selected values. A `model()` so `FormField` and `[(value)]` stay in sync.
+     *  Generic over the option value (string by inference; number/enum/object all
+     *  work — objects need {@link compareWith}). */
+    readonly value: _angular_core.ModelSignal<readonly T[]>;
+    /** How two values are compared for membership — supply it for **object**
+     *  values; primitives don't need it. @default `Object.is` */
+    readonly compareWith: _angular_core.InputSignal<((a: T, b: T) => boolean) | undefined>;
+    /** Data-driven options — the alternative to projecting `<fold-option>`. When
+     *  set, the value type is linked to the options at compile time. For rich rows,
+     *  project `<ng-template #option let-o>`. */
+    readonly options: _angular_core.InputSignal<readonly FoldSelectOption<T>[] | undefined>;
+    /** Disabled state — bound automatically by `FormField`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Two-way touched state — set on the first toggle, kept in sync with the field. */
+    readonly touched: _angular_core.ModelSignal<boolean>;
+    /** Validation errors — bound by `FormField`. */
+    readonly errors: _angular_core.InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
+    /** Two-way open state of the popup. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Size preset — see {@link FoldInputComponent.size}. @default 'md' */
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /** Visual variant — see {@link FoldInputComponent.variant}. @default 'default' */
+    readonly variant: _angular_core.InputSignal<"default" | "panel">;
+    /** Optional label displayed above the control. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Show a required marker on the label. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show a lighter `(optional)` marker on the label (ignored when required). */
+    readonly optional: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The word inside the optional marker. @default 'optional' */
+    readonly optionalLabel: _angular_core.InputSignal<string>;
+    /** Optional helper text shown under the control. */
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /** Text shown on the trigger while nothing is selected. */
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** Preferred popup placement. @default 'bottom-start' */
+    readonly placement: _angular_core.InputSignal<FoldPopoverPlacement>;
+    /** Unique, SSR-safe id for label association (see {@link FoldIdService}). */
+    readonly inputId: string;
+    /** Id of the `role="listbox"` element (own, distinct from the popover panel). */
+    protected readonly listId: string;
+    /** Rich per-row template for the `[options]` array API (`<ng-template #option>`). */
+    protected readonly optionTemplate: _angular_core.Signal<TemplateRef<{
+        $implicit: FoldSelectOption<T>;
+    }> | undefined>;
+    private readonly projectedOptions;
+    private readonly renderedOptions;
+    /** The live option instances, from whichever API is in use. */
+    private readonly allOptions;
+    private readonly list;
+    /** Compare two values — the injected `compareWith`, else `Object.is`. */
+    private eq;
+    /** Shared roving/keyboard core; multi-select toggles + stays open on activation. */
+    private readonly nav;
+    /** `aria-activedescendant`, read by each `fold-option` for its `is-active`. */
+    readonly activeId: _angular_core.Signal<string | null>;
+    /** Fast-path membership: a `Set` when values compare by identity (the default,
+     *  O(1) per option), or `null` when a `compareWith` is supplied — then
+     *  membership falls back to a linear `eq` scan (correct for object values). */
+    private readonly selectedSet;
+    /** The chosen labels (in option order) — joined, collapsing to "…, +N" past
+     *  {@link SUMMARY_MAX} so the trigger can't grow unbounded. */
+    protected readonly summaryLabel: _angular_core.Signal<string | undefined>;
+    /** The message to show under the field: the first error, once touched. */
+    protected readonly errorMessage: _angular_core.Signal<string | undefined>;
+    /** `aria-describedby` target: the error when shown, else the hint, else none. */
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    /** Has the popup been opened this lifetime — so any close marks touched (blur
+     *  parity), even one that picked nothing. */
+    private hasOpened;
+    constructor();
+    /** A value is selected when it's in the current set (via `compareWith`). */
+    isSelected(value: T): boolean;
+    /** Open with the keys a native select opens on. */
+    protected onTriggerKeydown(event: KeyboardEvent): void;
+    /** Keyboard while the list is open and focused — delegated to the core. */
+    protected onListKeydown(event: KeyboardEvent): void;
+    /** Click on a row toggles it (delegated, so projected rows need no wiring). */
+    protected onListClick(event: MouseEvent): void;
+    /** Hover arms the row, so pointer and keyboard share one active row. */
+    protected onListPointermove(event: PointerEvent): void;
+    /** Index of the first selected option (or -1) — where the keyboard arms on open. */
+    private firstSelectedIndex;
+    /** Index of the enabled option under an event target, or -1. */
+    private enabledIndexFrom;
+    /** Add or remove the option's value from the set; the panel stays open. */
+    private toggle;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldMultiselectComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldMultiselectComponent<any>, "fold-multiselect", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "optionalLabel": { "alias": "optionalLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "open": "openChange"; }, ["optionTemplate", "projectedOptions"], ["*"], true, never>;
+}
+
+/**
+ * `<fold-option>` — a single choice inside a {@link FoldListboxComponent}. Project
+ * as many as you need; the label is whatever you put inside (plain text, or richer
+ * content — an icon, a description). It reads the parent for its own `is-selected`
+ * / `is-active` state (computed, so nothing is pushed in during change detection —
+ * which would read this required `value` before it is set), and exposes a stable
+ * id the listbox points `aria-activedescendant` at.
+ *
+ * ```html
+ * <fold-listbox [(value)]="currency">
+ *   <fold-option value="EUR">Euro</fold-option>
+ *   <fold-option value="USD" [disabled]="!usdAllowed">US Dollar</fold-option>
+ * </fold-listbox>
+ * ```
+ *
+ * @selector `fold-option`
+ */
+declare class FoldOptionComponent<T> {
+    private readonly host;
+    private readonly owner;
+    /** The value written back to the listbox when this option is chosen. */
+    readonly value: _angular_core.InputSignal<T>;
+    /** Disabled options are skipped by keyboard nav and can't be selected. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Stable, SSR-safe id — the listbox points `aria-activedescendant` at it. */
+    readonly id: string;
+    /** Derived from the parent — evaluated lazily during this option's own render,
+     *  so the required `value` is always set by the time it's read. */
+    readonly selected: _angular_core.Signal<boolean>;
+    readonly active: _angular_core.Signal<boolean>;
+    /** The option's visible text — used for the trigger label and type-ahead. */
+    get label(): string;
+    /** Bring the option into view when it becomes keyboard-active. Optional-chained
+     *  so it's a no-op where `scrollIntoView` is absent (jsdom, non-DOM SSR). */
+    scrollIntoView(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldOptionComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldOptionComponent<any>, "fold-option", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * One password requirement shown as a live-validating dot in
+ * {@link FoldPasswordFieldComponent}. The predicate is deliberately just a
+ * function, so any validation style drops in:
+ *
+ * - **regex** — `foldRegexRule('An uppercase letter', /[A-Z]/)`, or inline
+ *   `{ label, test: (v) => /\d/.test(v) }`.
+ * - **zod** (no dependency added here) —
+ *   `{ label: 'Valid', test: (v) => schema.safeParse(v).success }`.
+ * - **anything** — length, an entropy score, a server-known blocklist, …
+ */
+interface FoldPasswordRule {
+    /** Human-readable requirement, e.g. "At least 8 characters". */
+    readonly label: string;
+    /** Passes when the value satisfies the rule. */
+    readonly test: (value: string) => boolean;
+}
+/** Build a rule from a `RegExp` — the common case. */
+declare function foldRegexRule(label: string, pattern: RegExp): FoldPasswordRule;
+/**
+ * A sensible default policy (English labels): 8+ characters, an uppercase and a
+ * lowercase letter, and a digit. Override via the `rules` input for a different
+ * policy or localised labels.
+ */
+declare function foldDefaultPasswordRules(): readonly FoldPasswordRule[];
+
+/**
+ * `<fold-password-field>` — a password input with a **live requirements
+ * checklist**. Composes `fold-input[type=password][revealable]` (so it inherits
+ * the tokened box, the label/hint/error chrome and the show/hide eye) and renders
+ * a dot per {@link FoldPasswordRule} that turns on as the value satisfies it.
+ *
+ * The rules are **injected**, not hard-coded — a `RegExp` (via `foldRegexRule`),
+ * a `zod` `safeParse`, a length check, anything (see {@link FoldPasswordRule}).
+ * `rules` defaults to {@link foldDefaultPasswordRules}. `validChange` emits
+ * whether every rule passes; Signal-Forms-native (`FormValueControl<string>`).
+ *
+ * ```html
+ * <fold-password-field
+ *   label="New password"
+ *   [(value)]="password"
+ *   (validChange)="ok.set($event)"
+ * />
+ * ```
+ *
+ * @selector `fold-password-field`
+ */
+declare class FoldPasswordFieldComponent implements FormValueControl<string> {
+    /** The password value. A `model()` so `FormField` and `[(value)]` stay in sync. */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Disabled state — bound automatically by `FormField`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Two-way touched state — forwarded to the inner input (set on blur). */
+    readonly touched: _angular_core.ModelSignal<boolean>;
+    /** Validation errors — bound by `FormField`, shown under the input. */
+    readonly errors: _angular_core.InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
+    /** Label above the field. @default 'Password' */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder text. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Helper text under the input (above the rules). */
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /** Show a required marker on the label. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Size preset — see {@link FoldInputComponent.size}. @default 'md' */
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /** Visual variant — see {@link FoldInputComponent.variant}. @default 'default' */
+    readonly variant: _angular_core.InputSignal<"default" | "panel">;
+    /** Native `autocomplete`. @default 'new-password' */
+    readonly autocomplete: _angular_core.InputSignal<string | null>;
+    /** Offer the reveal (eye) toggle. @default true */
+    readonly revealable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `aria-label` of the reveal toggle when hidden — forwarded to the input. */
+    readonly revealLabel: _angular_core.InputSignal<string>;
+    /** `aria-label` of the reveal toggle when shown — forwarded to the input. */
+    readonly hideLabel: _angular_core.InputSignal<string>;
+    /** The requirements to display and validate against. @default the built-ins. */
+    readonly rules: _angular_core.InputSignal<readonly FoldPasswordRule[]>;
+    /** Built-in row marker: a filling `dot`, or a `check` tick on satisfied rows.
+     *  @default 'dot' */
+    readonly marker: _angular_core.InputSignal<"check" | "dot">;
+    /** Accessible name of the requirements list. @default 'Password requirements' */
+    readonly rulesLabel: _angular_core.InputSignal<string>;
+    /** Word prefixed to a satisfied rule for screen readers. @default 'met' */
+    readonly metLabel: _angular_core.InputSignal<string>;
+    /** Word prefixed to an unmet rule for screen readers. @default 'not met' */
+    readonly unmetLabel: _angular_core.InputSignal<string>;
+    /** Emits whether every rule passes, on each change. */
+    readonly validChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Each rule paired with its live pass/fail state. Public + `exportAs`, so a
+     *  custom `[rules]` projection can render its own list off the same state:
+     *  `#pw="foldPasswordField"` then loop `pw.checklist()`. */
+    readonly checklist: _angular_core.Signal<{
+        label: string;
+        met: boolean;
+    }[]>;
+    /** True when every rule passes. */
+    protected readonly allValid: _angular_core.Signal<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldPasswordFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldPasswordFieldComponent, "fold-password-field", ["foldPasswordField"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "revealable": { "alias": "revealable"; "required": false; "isSignal": true; }; "revealLabel": { "alias": "revealLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "hideLabel"; "required": false; "isSignal": true; }; "rules": { "alias": "rules"; "required": false; "isSignal": true; }; "marker": { "alias": "marker"; "required": false; "isSignal": true; }; "rulesLabel": { "alias": "rulesLabel"; "required": false; "isSignal": true; }; "metLabel": { "alias": "metLabel"; "required": false; "isSignal": true; }; "unmetLabel": { "alias": "unmetLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "validChange": "validChange"; }, never, ["[rules]"], true, never>;
+}
+
+/** One segment of a {@link FoldViewToggleComponent}. */
+interface FoldViewToggleOption {
+    /** The value emitted when this segment is chosen. */
+    readonly value: string;
+    /** Optional leading icon. */
+    readonly icon?: FoldIconName;
+    /** Optional visible label. Omit for an icon-only segment (set `ariaLabel`). */
+    readonly label?: string;
+    /** Accessible name — required when there is no visible `label`. */
+    readonly ariaLabel?: string;
+    /** Disable this segment. */
+    readonly disabled?: boolean;
+}
+/**
+ * `<fold-view-toggle>` — a compact **segmented single-select** (Cards / Table, a
+ * density switch, a chart mode…). Generic and zero-domain: pass `options` and
+ * bind `[(value)]`. It's a proper `role="radiogroup"` of `role="radio"` segments
+ * with roving tabindex and arrow-key selection (Home/End too), so it's a real
+ * single-choice control, not two independent toggles.
+ *
+ * ```html
+ * <fold-view-toggle
+ *   ariaLabel="View"
+ *   [options]="[
+ *     { value: 'cards', icon: 'grid', ariaLabel: 'Cards' },
+ *     { value: 'table', icon: 'list', ariaLabel: 'Table' },
+ *   ]"
+ *   [(value)]="view"
+ * />
+ * ```
+ *
+ * @selector `fold-view-toggle`
+ */
+declare class FoldViewToggleComponent {
+    private readonly host;
+    /** The segments, in order. */
+    readonly options: _angular_core.InputSignal<readonly FoldViewToggleOption[]>;
+    /** The selected value. `[(value)]` / `FormField`-friendly. */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Accessible name of the group. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Size preset. @default 'md' */
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    /** How the selected segment reads: a neutral `raised` chip, or an `accent`
+     *  brand tint. @default 'raised' */
+    readonly activeStyle: _angular_core.InputSignal<"accent" | "raised">;
+    /** Hide visible labels, keeping icons only (labels stay as accessible names). */
+    readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    constructor();
+    /** The segment holding the tab stop: the selected one when enabled, else the
+     *  first enabled — never a disabled (unfocusable) segment, so Tab always
+     *  reaches the group even if the selected value is disabled. */
+    protected readonly rovingValue: _angular_core.Signal<string | null>;
+    /** Pick a segment (no-op if disabled or already selected). */
+    protected select(option: FoldViewToggleOption): void;
+    /** Arrow keys move the selection between enabled segments (radiogroup pattern). */
+    protected onKeydown(event: KeyboardEvent): void;
+    /** The value to move to for a nav key, or null if the key isn't one. */
+    private nextValue;
+    private focusValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldViewToggleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldViewToggleComponent, "fold-view-toggle", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "activeStyle": { "alias": "activeStyle"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * `<fold-checkbox>` — the boolean form control. A **native** `<input
+ * type="checkbox">` (so keyboard, focus, the `checkbox` role, form submission
+ * and `indeterminate` all come for free) is visually replaced by a tokenised
+ * box + check/dash mark: best-in-class semantics with full visual control.
+ *
+ * Drive it standalone with `[(checked)]` / `(checkedChange)`, or bind a signal
+ * form field with `[formField]` (it implements `FormCheckboxControl`, whose
+ * value member is `checked` — not `value` — so the field's value **is** the
+ * checked state; `disabled`, `touched` and `errors` are wired by `FormField`).
+ * `indeterminate` renders the mixed state
+ * (e.g. a "select all" over a partial selection); it is a visual cue only —
+ * clicking a mixed box checks it, as natively.
+ *
+ * Accessible by construction: the box is decorative, the native input carries
+ * the semantics; a visible `label` wraps the input (click-to-toggle) and names
+ * it, otherwise pass `ariaLabel`. Focus-visible ring, `prefers-reduced-motion`
+ * and `forced-colors` are all handled.
+ *
+ * @selector `fold-checkbox`
  *
- * The fill is driven by a `--sl-pct` custom property computed from the value, so
+ * @example
+ * ```html
+ * <fold-checkbox label="Remember me" [(checked)]="remember" />
+ * <fold-checkbox ariaLabel="Select row" [checked]="selected" (checkedChange)="toggle()" />
+ * <fold-checkbox label="I accept the terms" required [formField]="form.consent" />
+ * ```
+ */
+declare class FoldCheckboxComponent implements FormCheckboxControl {
+    /** Checked state — the signal-forms field value. Bind with `[(checked)]`,
+     *  `(checkedChange)`, or `[formField]`. */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    /** Disabled state — bound automatically by `FormField`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Two-way touched state — set on blur so `FormField` can surface errors. */
+    readonly touched: _angular_core.ModelSignal<boolean>;
+    /** Validation errors — bound by `FormField` from the field. */
+    readonly errors: _angular_core.InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
+    /** Mixed / tri-state visual (native `indeterminate`, a property not attribute). */
+    readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Optional visible label — wraps the box, so clicking it toggles. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Accessible name when there is no visible `label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Optional helper text shown under the control. */
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /** Show a required marker on the label (and set the native `required`). */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Size preset — `sm` for dense rows/tables, `md` (default) for forms. */
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    /** Unique, SSR-safe id for label + message association. */
+    readonly inputId: string;
+    /** The message under the control: the first error once touched, else the hint. */
+    protected readonly errorMessage: _angular_core.Signal<string | undefined>;
+    protected readonly message: _angular_core.Signal<string | null>;
+    /** `aria-describedby` target: the error when shown, else the hint, else none. */
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    constructor();
+    /** Native change → sync the model (also fires the auto `checkedChange`). */
+    onChange(event: Event): void;
+    protected onBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldCheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldCheckboxComponent, "fold-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touched": "touchedChange"; }, never, never, true, never>;
+}
+
+/**
+ * `<fold-slider>` — a single-value range slider with the design-system track,
+ * fill and thumb (a styled native `<input type="range">`, so keyboard, focus and
+ * the `slider` role are all native). The fill is a `--sl-pct` custom property, so
  * there is no overlay markup. For a min↔max pair, use {@link FoldRangeSliderComponent}.
  *
+ * Integrates with signal forms via `FormValueControl<number>` (bind
+ * `[formField]`), or drive it standalone with `[(value)]` / `(valueChange)`. A
+ * visible `label` is a real `<label for>`; a `valueText` override is announced
+ * to assistive tech through `aria-valuetext` (so a value that _means_ something —
+ * `"off"`, `"12:30"` — reads as that, not the raw number).
+ *
  * @selector `fold-slider`
  *
  * @example
  * ```html
- * <fold-slider label="railWidth" [min]="48" [max]="120" [(value)]="width" />
- * <fold-slider label="min" [max]="10" [valueText]="min() || 'off'" [(value)]="min" />
+ * <fold-slider label="Rail width" [min]="48" [max]="120" [(value)]="width" />
+ * <fold-slider label="Volume" [formField]="form.volume" />
+ * <fold-slider label="Min" [max]="10" [valueText]="min() || 'off'" [(value)]="min" />
  * ```
  */
-declare class FoldSliderComponent {
-    /** The bound value. A `model()` so `[(value)]` keeps it in sync. */
+declare class FoldSliderComponent implements FormValueControl<number> {
+    /** The bound value — a `model()`, so `[(value)]` and signal forms both sync. */
     readonly value: _angular_core.ModelSignal<number>;
-    /** Minimum value. @default 0 */
-    readonly min: _angular_core.InputSignal<number>;
-    /** Maximum value. @default 100 */
-    readonly max: _angular_core.InputSignal<number>;
+    /** Minimum value (also the field's min validator via `FormField`). @default 0 */
+    readonly min: _angular_core.InputSignal<number | undefined>;
+    /** Maximum value (also the field's max validator via `FormField`). @default 100 */
+    readonly max: _angular_core.InputSignal<number | undefined>;
     /** Increment granularity. @default 1 */
-    readonly step: _angular_core.InputSignal<number>;
-    /** Optional label shown above the track (also the `aria-label`). */
+    readonly step: _angular_core.InputSignal<number | undefined>;
+    /** Optional visible label (a real `<label for>`), also the accessible name. */
     readonly label: _angular_core.InputSignal<string | undefined>;
-    /** Override the displayed value text — e.g. `'off'` when the value means "no bound". */
+    /** Accessible name when there is no visible `label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Override the displayed + announced value text — e.g. `'off'` for "no bound". */
     readonly valueText: _angular_core.InputSignal<string | undefined>;
     /** Show the current value next to the label. @default true */
     readonly showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Optional helper text shown under the track. */
+    readonly hint: _angular_core.InputSignal<string | undefined>;
     /** Disable interaction. */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Unique, SSR-safe id for label association (see {@link FoldIdService}). */
+    /** Two-way touched state — set on blur so `FormField` can surface errors. */
+    readonly touched: _angular_core.ModelSignal<boolean>;
+    /** Validation errors — bound by `FormField` from the field. */
+    readonly errors: _angular_core.InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
+    /** Unique, SSR-safe id for label + message association. */
     readonly inputId: string;
+    /** Resolved bounds — the interface types min/max/step as `number | undefined`
+     *  (a `FormField` may leave a bound unset); fall back to the standalone defaults. */
+    protected readonly rMin: _angular_core.Signal<number>;
+    protected readonly rMax: _angular_core.Signal<number>;
+    protected readonly rStep: _angular_core.Signal<number>;
     /** Fill percentage (0–100) of the track, from the value within [min, max]. */
     protected readonly percent: _angular_core.Signal<number>;
     /** The value text to display: the explicit {@link valueText} override, else the number. */
     protected readonly display: _angular_core.Signal<string>;
+    /** The message under the track: the first error once touched, else the hint. */
+    protected readonly errorMessage: _angular_core.Signal<string | undefined>;
+    protected readonly message: _angular_core.Signal<string | null>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
     protected onInput(event: Event): void;
+    protected onBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldSliderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldSliderComponent, "fold-slider", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldSliderComponent, "fold-slider", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
-/** A min↔max pair emitted by {@link FoldRangeSliderComponent}. */
+/** A min↔max pair held by {@link FoldRangeSliderComponent}. */
 type FoldRangeValue = {
     min: number;
     max: number;
@@ -2488,16 +3472,21 @@ type FoldRangeValue = {
  * window over `[min, max]`. Shares the design-system track / fill / thumb with
  * {@link FoldSliderComponent}. For a single value, use `fold-slider`.
  *
+ * Two-way bound via `[(value)]` (a `model()`), or one-way `[value]` +
+ * `(valueChange)`. The thumbs never cross (each clamps against the other). The
+ * pair is a labelled `role="group"`; each thumb announces its formatted value
+ * through `aria-valuetext`, and the thumb names (`minLabel` / `maxLabel`) are
+ * inputs so a non-English app can localise them.
+ *
  * @selector `fold-range-slider`
  *
  * @example
  * ```html
- * <fold-range-slider label="BPM" [min]="60" [max]="220" [step]="5"
- *   [value]="bpm()" (valueChange)="onBpm($event)" />
+ * <fold-range-slider label="BPM" [min]="60" [max]="220" [step]="5" [(value)]="bpm" />
  * ```
  */
 declare class FoldRangeSliderComponent {
-    /** Label shown above the track. */
+    /** Label shown above the track (names the `role="group"`). */
     readonly label: _angular_core.InputSignal<string>;
     /** Lower bound of the selectable range. @default 0 */
     readonly min: _angular_core.InputSignal<number>;
@@ -2505,12 +3494,19 @@ declare class FoldRangeSliderComponent {
     readonly max: _angular_core.InputSignal<number>;
     /** Increment granularity. @default 1 */
     readonly step: _angular_core.InputSignal<number>;
-    /** The current `{ min, max }` window; falls back to the full range when unset. */
-    readonly value: _angular_core.InputSignal<FoldRangeValue | undefined>;
-    /** How the values are formatted for display. @default 'number' */
+    /** The current `{ min, max }` window; falls back to the full range when unset.
+     *  A `model()`, so `[(value)]` and `(valueChange)` both work. */
+    readonly value: _angular_core.ModelSignal<FoldRangeValue | undefined>;
+    /** How the values are formatted for display + `aria-valuetext`. @default 'number' */
     readonly unit: _angular_core.InputSignal<"number" | "duration">;
-    /** Emits the new window whenever either thumb moves. */
-    readonly valueChange: _angular_core.OutputEmitterRef<FoldRangeValue>;
+    /** Disable both thumbs. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name suffix for the lower thumb. @default 'minimum' */
+    readonly minLabel: _angular_core.InputSignal<string>;
+    /** Accessible name suffix for the upper thumb. @default 'maximum' */
+    readonly maxLabel: _angular_core.InputSignal<string>;
+    /** Id of the visible label, so the group can point at it. */
+    readonly labelId: string;
     protected readonly currentMin: _angular_core.Signal<number>;
     protected readonly currentMax: _angular_core.Signal<number>;
     protected readonly fillLeft: _angular_core.Signal<number>;
@@ -2519,7 +3515,7 @@ declare class FoldRangeSliderComponent {
     protected onMinChange(event: Event): void;
     protected onMaxChange(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldRangeSliderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldRangeSliderComponent, "fold-range-slider", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldRangeSliderComponent, "fold-range-slider", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minLabel": { "alias": "minLabel"; "required": false; "isSignal": true; }; "maxLabel": { "alias": "maxLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /** Severity of a {@link FoldCalloutComponent} — colour + default icon. */
@@ -3320,6 +4316,53 @@ declare class FoldHeroSectionComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldHeroSectionComponent, "fold-hero-section", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; "wash": { "alias": "wash"; "required": false; "isSignal": true; }; }, {}, never, ["[heroBackdrop]", "*"], true, never>;
 }
 
+/**
+ * Every user-facing / accessible string the paginator renders. Parameterised
+ * strings (the visible range, a page's aria-label) are functions so a locale
+ * can reorder or reword them, not just translate a fixed template. All defaults
+ * are English — a non-English app overrides them once via
+ * {@link provideFoldPaginatorLabels}, or per instance via the `labels` input.
+ */
+interface FoldPaginatorLabels {
+    /** `aria-label` of the page-size `<select>`. */
+    readonly pageSize: string;
+    /** Trailing text after the size selector, e.g. "per page". */
+    readonly perPage: string;
+    /** `aria-label` of the page-navigation `<nav>`. */
+    readonly nav: string;
+    /** Previous-page button `aria-label`. */
+    readonly previous: string;
+    /** Next-page button `aria-label`. */
+    readonly next: string;
+    /** Shown in place of the range when there are no items. */
+    readonly empty: string;
+    /** A page button's `aria-label`, e.g. `(3) => "Page 3"`. */
+    readonly page: (page: number) => string;
+    /** The visible range label, e.g. `(21, 30, 237) => "21–30 of 237"`. */
+    readonly range: (start: number, end: number, total: number) => string;
+}
+/** The English defaults — the base every override merges onto. */
+declare const FOLD_PAGINATOR_DEFAULT_LABELS: FoldPaginatorLabels;
+/** App-wide paginator labels; defaults to English. */
+declare const FOLD_PAGINATOR_LABELS: InjectionToken<FoldPaginatorLabels>;
+/**
+ * Provide app-wide paginator labels once at bootstrap. Partial — any key you
+ * omit keeps its English default.
+ *
+ * @example
+ * ```ts
+ * // app.config.ts
+ * providers: [
+ *   provideFoldPaginatorLabels({
+ *     perPage: "par page",
+ *     previous: "Page précédente",
+ *     range: (s, e, t) => `${s}–${e} sur ${t}`,
+ *   }),
+ * ];
+ * ```
+ */
+declare function provideFoldPaginatorLabels(labels: Partial<FoldPaginatorLabels>): Provider;
+
 /**
  * Item representing one slot in the page navigation bar.
  * Either a concrete page number (1-indexed) or an ellipsis gap.
@@ -3330,15 +4373,29 @@ type FoldPageItem = {
 } | {
     kind: "gap";
 };
+/** Which control a page change should refocus after the parent re-renders. */
+type RefocusTarget = "active" | "prev" | "next";
 /**
  * `fold-paginator` — presentational, fully controlled.
  *
  * Designed for **server-side pagination** (offset/limit): the parent owns
  * `currentPage`, `pageSize` and `totalItems`, fires the HTTP call on
- * `(pageChange)` / `(pageSizeChange)`, then feeds the new values back in.
+ * `(pageChange)` / `(pageSizeChange)`, then feeds the new values back in. The
+ * component tolerates a lagging or out-of-range `currentPage` — the visible
+ * range, the active button and the prev/next guards all use an internally
+ * clamped page, so a stale value can never render a nonsensical range.
  *
  * Renders: `[page size selector] [items range] [‹ 1 2 3 … N ›]`.
  *
+ * **Accessible:** the `<nav>`, both arrows, each page (`aria-current="page"` on
+ * the active one) and the size selector carry labels, all overridable for i18n
+ * via {@link provideFoldPaginatorLabels} (English by default) or the `labels`
+ * input. After a page change it moves focus to the control the user was on (the
+ * active page, or the prev/next arrow while it stays enabled) so keyboard focus
+ * is never dropped to `<body>`.
+ *
+ * @selector `fold-paginator`
+ *
  * @example
  * ```html
  * <fold-paginator
@@ -3366,13 +4423,28 @@ declare class FoldPaginatorComponent {
      */
     readonly siblingCount: _angular_core.InputSignal<number>;
     /** Disables all controls (both page nav and size selector). */
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Per-instance label overrides (merged over the app-wide / English defaults). */
+    readonly labels: _angular_core.InputSignal<Partial<FoldPaginatorLabels> | undefined>;
     /** Fires with the new 1-indexed page number. */
     readonly pageChange: _angular_core.OutputEmitterRef<number>;
     /** Fires with the newly selected page size. */
     readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    private readonly host;
+    private readonly injectedLabels;
+    /** Effective labels — the app-wide (or English) set, with the `labels` input on top. */
+    readonly l: _angular_core.Signal<FoldPaginatorLabels>;
     /** Total pages, minimum 1 so the UI always shows at least "1 of 1". */
     readonly totalPages: _angular_core.Signal<number>;
+    /** The current page clamped into `[1, totalPages]` — the value everything
+     *  visible derives from, so a lagging/out-of-range parent never shows a
+     *  broken range or highlights a phantom page. */
+    readonly page: _angular_core.Signal<number>;
+    /** Sanitised sibling count — a non-negative integer. */
+    private readonly siblings;
+    /** The rendered size options, always including the current `pageSize` (so the
+     *  `<select>` can never silently show a value the parent isn't using). */
+    readonly sizeOptions: _angular_core.Signal<readonly number[]>;
     /** Zero-indexed start / end of the currently visible range (for the label). */
     readonly rangeStart: _angular_core.Signal<number>;
     readonly rangeEnd: _angular_core.Signal<number>;
@@ -3386,12 +4458,16 @@ declare class FoldPaginatorComponent {
      * any two non-contiguous blocks.
      */
     readonly pageItems: _angular_core.Signal<FoldPageItem[]>;
-    goToPage(page: number): void;
+    private refocus;
+    private lastFocusedPage;
+    constructor();
+    private applyRefocus;
+    goToPage(page: number, via?: RefocusTarget): void;
     prev(): void;
     next(): void;
     onPageSizeChange(raw: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldPaginatorComponent, never>;
-    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>;
+    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; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
 }
 
 type FoldViewNavItem = {
@@ -3468,7 +4544,7 @@ declare class FoldViewNavComponent {
      * - `compact` (default) — inline / popover bars.
      * - `comfortable` — a prominent, page-level bar.
      */
-    readonly size: _angular_core.InputSignal<"compact" | "comfortable">;
+    readonly size: _angular_core.InputSignal<"comfortable" | "compact">;
     /**
      * 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
@@ -3564,7 +4640,7 @@ declare class FoldTabsComponent implements FoldTabsContext {
      */
     readonly direction: _angular_core.InputSignal<"auto" | "vertical" | "horizontal">;
     /** Density — see {@link FoldViewNavComponent} for the same scale. */
-    readonly size: _angular_core.InputSignal<"compact" | "comfortable">;
+    readonly size: _angular_core.InputSignal<"comfortable" | "compact">;
     /** Collapse to icons — see {@link FoldViewNavComponent.collapsed}. */
     readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** `surface` (filled bar, default) or `transparent`. */
@@ -4078,6 +5154,220 @@ interface FoldPanelLabels {
  */
 declare function provideFoldPanelLabels(labels: FoldPanelLabels): Provider;
 
+/**
+ * `<fold-popover>` — an anchored floating layer. Project a trigger
+ * (`[foldPopoverTrigger]`) and any content; the content renders in the native
+ * **top layer** (via the `popover` attribute, so it escapes `overflow: hidden`
+ * and every `z-index`) and is positioned against the trigger with a
+ * dependency-free flip/shift engine ({@link computePlacement}).
+ *
+ * Controlled or uncontrolled through `[(open)]`. Dismissal is owned here
+ * (outside-click + `Escape`) rather than the browser's light-dismiss, so
+ * re-clicking the trigger toggles cleanly instead of reopening. Opening moves
+ * focus into the panel; closing returns it to the trigger. The trigger gets
+ * `aria-haspopup` / `aria-expanded` / `aria-controls` wired automatically.
+ *
+ * For an actions menu with `role="menu"` + keyboard, use `fold-dropdown`, which
+ * is built on this.
+ *
+ * The panel's width is `max-content`; to make it match the trigger (a select-like
+ * dropdown), read the published `--fold-popover-anchor-width` in the panel's CSS
+ * (e.g. `min-width: var(--fold-popover-anchor-width)`) — it tracks the trigger.
+ *
+ * @selector `fold-popover`
+ *
+ * The trigger carries `[foldPopoverTrigger]`; the floating content is marked
+ * `foldPopoverPanel`.
+ *
+ * @example
+ * ```html
+ * <fold-popover placement="bottom-end">
+ *   <button foldButton foldPopoverTrigger>Filters</button>
+ *   <div foldPopoverPanel class="my-panel">…</div>
+ * </fold-popover>
+ * ```
+ */
+declare class FoldPopoverComponent {
+    private readonly renderer;
+    private readonly host;
+    /** Preferred placement before collision handling. @default "bottom-start" */
+    readonly placement: _angular_core.InputSignal<FoldPopoverPlacement>;
+    /** Ordered placements to try when the preferred can't fit (default: the
+     *  opposite side). The first that fits wins, else the roomiest. */
+    readonly fallbackPlacements: _angular_core.InputSignal<readonly FoldPopoverPlacement[] | undefined>;
+    /** Gap between the trigger and the panel, in px. @default 8 */
+    readonly offset: _angular_core.InputSignal<number>;
+    /** Minimum gap kept from the viewport edge, in px. @default 8 */
+    readonly padding: _angular_core.InputSignal<number>;
+    /** Move focus into the panel on open. @default true (a dropdown sets false to
+     *  focus its first item instead). */
+    readonly autoFocus: _angular_core.InputSignal<boolean>;
+    /** Show a small arrow pointing at the trigger. @default false */
+    readonly arrow: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Two-way open state — drive it, or let the trigger toggle it. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** SSR-safe id linking the trigger's `aria-controls` to the panel. */
+    readonly panelId: string;
+    /** Override the trigger's `aria-controls` target — point it at the real
+     *  controlled element (e.g. an inner `role="listbox"`) when the panel is just a
+     *  wrapper. @default the panel's own id. */
+    readonly ariaControls: _angular_core.InputSignal<string | undefined>;
+    private readonly panel;
+    private readonly inner;
+    private readonly arrowEl;
+    /**
+     * The marked trigger — the projected `[foldPopoverTrigger]`. Found by DOM
+     * query on the host (projected content is a DOM descendant of the host), so it
+     * resolves regardless of how deeply it is re-projected (e.g. through
+     * `fold-dropdown`) — a content query would not survive the re-projection. Used
+     * to anchor against and to detect trigger clicks.
+     */
+    private markedTrigger;
+    private static readonly FOCUSABLE;
+    /**
+     * The focusable trigger — the marked element itself if it's focusable, else
+     * the first focusable inside it (e.g. `fold-button-icon`'s inner `<button>`).
+     * This is what receives focus + the aria wiring, so a wrapper trigger is still
+     * fully keyboard-accessible.
+     */
+    private focusableTrigger;
+    constructor();
+    /** Position the panel against the trigger: flip → size (cap + scroll) → shift,
+     *  then place the arrow. */
+    private reposition;
+    /** Set a `max-*` cap in px, but only when positive (skip a degenerate 0). */
+    private applyCap;
+    /** Center the arrow on the anchor along the cross axis, clamped to the panel. */
+    private positionArrow;
+    protected onHostClick(event: MouseEvent): void;
+    protected onArrowDown(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldPopoverComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldPopoverComponent, "fold-popover", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "fallbackPlacements": { "alias": "fallbackPlacements"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "arrow": { "alias": "arrow"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[foldPopoverPanel]"], true, never>;
+}
+
+/**
+ * Marks the element inside a `<fold-popover>` that opens it — apply to a real,
+ * focusable control (a `foldButton`), or a wrapper whose first focusable child
+ * is the control (a `fold-button-icon`). The popover anchors to this element,
+ * and wires `aria-haspopup` / `aria-expanded` / `aria-controls` onto the
+ * focusable control. The value picks the `aria-haspopup` token — it is reflected
+ * to the marker attribute so both `foldPopoverTrigger="menu"` and
+ * `[foldPopoverTrigger]="expr"` work.
+ *
+ * ```html
+ * <fold-popover>
+ *   <button foldButton foldPopoverTrigger="menu">Actions</button>
+ *   …panel…
+ * </fold-popover>
+ * ```
+ *
+ * @selector `[foldPopoverTrigger]`
+ */
+declare class FoldPopoverTriggerDirective {
+    /** The trigger's host element. */
+    readonly el: ElementRef<HTMLElement>;
+    /**
+     * `aria-haspopup` value. @default "dialog" (use "menu" for a dropdown). Bare
+     * `foldPopoverTrigger` (no value) keeps the default.
+     */
+    readonly haspopup: _angular_core.InputSignalWithTransform<FoldTriggerHaspopup, string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldPopoverTriggerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FoldPopoverTriggerDirective, "[foldPopoverTrigger]", never, { "haspopup": { "alias": "foldPopoverTrigger"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+type FoldTriggerHaspopup = "menu" | "dialog" | "listbox" | "true";
+
+/**
+ * `<fold-dropdown>` — an actions menu built on {@link FoldPopoverComponent}.
+ * Project a trigger (`[foldPopoverTrigger]`) and a list of
+ * `<fold-dropdown-item>`s; the menu is a `role="menu"` with full keyboard
+ * support (↑/↓ roving, `Home`/`End`, type-ahead), opens focused on its first
+ * enabled item, and closes — returning focus to the trigger — when an item is
+ * chosen or on `Escape` / outside-click. Give the trigger `foldPopoverTrigger="menu"`
+ * so its `aria-haspopup` reads as a menu.
+ *
+ * @selector `fold-dropdown`
+ *
+ * @example
+ * ```html
+ * <fold-dropdown ariaLabel="Row actions">
+ *   <fold-button-icon icon="more-vertical" tooltip="Actions" foldPopoverTrigger="menu" />
+ *   <fold-dropdown-item icon="edit" (selected)="rename(row)">Rename</fold-dropdown-item>
+ *   <fold-dropdown-item tone="danger" (selected)="remove(row)">Delete</fold-dropdown-item>
+ * </fold-dropdown>
+ * ```
+ */
+declare class FoldDropdownComponent {
+    private readonly renderer;
+    /** Preferred placement. @default "bottom-start" */
+    readonly placement: _angular_core.InputSignal<FoldPopoverPlacement>;
+    /** Gap between trigger and menu, in px. @default 8 */
+    readonly offset: _angular_core.InputSignal<number>;
+    /** Accessible name of the menu. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Two-way open state. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    private readonly items;
+    /** Active row = index into {@link enabled}. Roving state lives here (not read
+     *  from `document.activeElement`), so it stays correct regardless of focus. */
+    private readonly active;
+    constructor();
+    /** Enabled items only — keyboard nav + focus skip disabled rows. */
+    private enabled;
+    private focusIndex;
+    protected onMenuKeydown(event: KeyboardEvent): void;
+    /** Type-ahead buffer (multi-letter): keystrokes within 500 ms accumulate, so
+     *  "de" jumps to "Delete", not just the next "d". */
+    private typeBuffer;
+    private typeAt;
+    private typeahead;
+    /** A menuitem was activated (click / Enter / Space bubbles here) → close. */
+    protected onMenuActivate(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldDropdownComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldDropdownComponent, "fold-dropdown", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["items"], ["[foldPopoverTrigger]", "*"], true, never>;
+}
+
+/**
+ * `<fold-dropdown-item>` — one actionable row inside a {@link FoldDropdownComponent}.
+ * Renders a `role="menuitem"` button; emits `selected` on activation (click,
+ * `Enter` or `Space`) and the parent closes the menu. Roving focus + arrow-key
+ * navigation are owned by the dropdown.
+ *
+ * @selector `fold-dropdown-item`
+ *
+ * @example
+ * ```html
+ * <fold-dropdown-item icon="edit" (selected)="rename()">Rename</fold-dropdown-item>
+ * <fold-dropdown-item tone="danger" (selected)="remove()">Delete</fold-dropdown-item>
+ * ```
+ */
+declare class FoldDropdownItemComponent {
+    /** Disable the row — skipped by keyboard navigation, inert to clicks. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Visual tone. @default "default" */
+    readonly tone: _angular_core.InputSignal<"danger" | "default">;
+    /** Optional leading icon. */
+    readonly icon: _angular_core.InputSignal<FoldIconName | undefined>;
+    /** Emitted on activation (click / Enter / Space). */
+    readonly selected: _angular_core.OutputEmitterRef<void>;
+    private readonly btn;
+    /** The native button — the dropdown reads it for roving focus + typeahead. */
+    get button(): HTMLButtonElement | undefined;
+    focus(): void;
+    protected onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FoldDropdownItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FoldDropdownItemComponent, "fold-dropdown-item", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, { "selected": "selected"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Keep a floating element pinned to its anchor: call `onChange` whenever
+ * anything that could move the anchor or resize either element happens —
+ * scrolling (capture phase, so nested scroll containers count), a window
+ * resize, or a size change of the anchor / floating element (`ResizeObserver`).
+ * Returns a teardown that removes every listener. Mirrors Floating UI's
+ * `autoUpdate`, dependency-free and scoped to fold's needs.
+ */
+declare function autoUpdate(anchor: HTMLElement | null, floating: HTMLElement, onChange: () => void): () => void;
+
 /**
  * Categorical auto-colour palettes + the seed→index hash.
  *
@@ -4145,6 +5435,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, 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 };
+export { FOLD_AUTO_PALETTES, FOLD_BLUR_TOKENS, FOLD_BUILTIN_ICONS, FOLD_DATA_TABLE_DEFAULT_LABELS, FOLD_DATA_TABLE_LABELS, FOLD_INLINE_CONFIRM_DEFAULT_LABELS, FOLD_INLINE_CONFIRM_LABELS, FOLD_MOTION_TOKENS, FOLD_PAGINATOR_DEFAULT_LABELS, FOLD_PAGINATOR_LABELS, 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, FoldCheckboxComponent, FoldChoiceRowComponent, FoldContextCardComponent, FoldDataTableCellDirective, FoldDataTableComponent, FoldDataTableRowCardDirective, FoldDisclosureComponent, FoldDropdownComponent, FoldDropdownItemComponent, FoldElementTitleComponent, FoldElevatedDirective, FoldEmptyStateComponent, FoldFieldComponent, FoldFieldIdDirective, FoldFieldListComponent, FoldFileDropzoneComponent, FoldHeroCardComponent, FoldHeroSectionComponent, FoldIconComponent, FoldIconRegistry, FoldIdService, FoldInlineConfirmComponent, FoldInputComponent, FoldLinkComponent, FoldListboxComponent, FoldLoadingStateComponent, FoldMenuComponent, FoldMenuItemComponent, FoldMenuSectionComponent, FoldMenuSeparatorComponent, FoldMultiselectComponent, FoldNavLauncherComponent, FoldNavLayoutComponent, FoldNavTileComponent, FoldNumberInputComponent, FoldOptionComponent, FoldPageLayoutComponent, FoldPageSectionComponent, FoldPageTitleDirective, FoldPaginatorComponent, FoldPaletteRegistry, FoldPanelComponentOutletDirective, FoldPanelHeaderComponent, FoldPanelHostComponent, FoldPanelHostService, FoldPanelRef, FoldPanelToggle, FoldPasswordFieldComponent, FoldPopoverComponent, FoldPopoverTriggerDirective, FoldRangeSliderComponent, FoldRepeatPressDirective, FoldSearchComponent, FoldSelectComponent, FoldSliderComponent, FoldSpinnerComponent, FoldStatusBadgeComponent, FoldStickyColumnDirective, FoldSurfaceDirective, FoldTabPanelComponent, FoldTabsComponent, FoldTimelineComponent, FoldToastComponent, FoldToastContainerComponent, FoldToastService, FoldToggleIconComponent, FoldViewNavComponent, FoldViewToggleComponent, autoUpdate, computePlacement, foldBlurVar, foldColorProperty, foldColorVar, foldDefaultPasswordRules, foldHashSeed, foldMotionVar, foldRadiusVar, foldRegexRule, foldResolvePalette, foldShadowVar, foldSpaceVar, foldTextVar, observeElementWidth, provideFoldDataTableLabels, provideFoldIcons, provideFoldInlineConfirmLabels, provideFoldPaginatorLabels, 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, FoldDataTableLabels, FoldIconName, FoldIconSet, FoldIconSize, FoldInlineConfirmLabels, FoldMenuItemBadgeTone, FoldMenuLevel, FoldMenuTint, FoldMenuTogglePlacement, FoldMotionToken, FoldNumberControls, FoldNumberSpinner, FoldPageItem, FoldPaginatorLabels, FoldPaletteInput, FoldPanelConfig, FoldPanelContent, FoldPanelDescriptor, FoldPanelHandle, FoldPanelLabels, FoldPanelSide, FoldPasswordRule, FoldPlacementInput, FoldPlacementResult, FoldPopoverAlign, FoldPopoverPlacement, FoldPopoverSide, FoldRadiusToken, FoldRangeValue, FoldRect, FoldSelectOption, FoldSemanticColorToken, FoldShadowToken, FoldSpaceToken, FoldSpinnerSize, FoldStickyColumnAnchor, FoldSurfaceName, FoldTabItem, FoldTableColumn, FoldTableEmpty, FoldTableSort, FoldTableSortDir, FoldTableTone, FoldTabsContext, FoldTemplatePanelDescriptor, FoldTextToken, FoldTimelineDatePlacement, FoldTimelineNode, FoldToast, FoldToastConfig, FoldToastVariant, FoldViewNavItem, FoldViewToggleOption };
 //# sourceMappingURL=fold-ng.d.ts.map