@bitforgehq/ui 0.4.0 → 0.5.0-next.4

package/types/bitforgehq-ui.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ElementRef, EnvironmentProviders, InjectionToken, Provider, Signal, TemplateRef } from "@angular/core";
+import { ElementRef, EnvironmentProviders, InjectionToken, Provider, Signal, TemplateRef, Type } from "@angular/core";
 import { FormCheckboxControl, FormValueControl, ValidationError } from "@angular/forms/signals";
 /**
  * The one control-height scale: sm 32 px, md 40 px, lg 48 px.
@@ -517,6 +517,166 @@ interface BfLabels {
    * @default 'Unread'
    */
   readonly listItemUnread: string;
+  /**
+   * bf-file-input's button text.
+   * @default (multiple) => (multiple ? 'Choose files' : 'Choose file')
+   */
+  readonly fileInputChoose: (multiple: boolean) => string;
+  /**
+   * bf-file-input's hint beside the button.
+   * @default (multiple) => (multiple ? 'or drop them here' : 'or drop it here')
+   */
+  readonly fileInputDropHint: (multiple: boolean) => string;
+  /**
+   * bf-file-input's drop zone text.
+   * @default (multiple) => (multiple ? 'Drag files here or browse' : 'Drag a file here or browse')
+   */
+  readonly fileInputDropzone: (multiple: boolean) => string;
+  /**
+   * bf-file-input's text under touch input.
+   * @default (multiple) => (multiple ? 'Tap to choose files' : 'Tap to choose a file')
+   */
+  readonly fileInputTapToChoose: (multiple: boolean) => string;
+  /**
+   * The accessible name of bf-file-input's remove button for a file.
+   * @default (name) => `Remove ${name}`
+   */
+  readonly fileInputRemove: (name: string) => string;
+  /**
+   * The accessible name of bf-file-input's button that dismisses a rejected file.
+   * @default (name) => `Dismiss ${name}`
+   */
+  readonly fileInputDismiss: (name: string) => string;
+  /**
+   * bf-file-input's live announcement after files are added.
+   * @default (count) => (count === 1 ? '1 file added' : `${count} files added`)
+   */
+  readonly fileInputAdded: (count: number) => string;
+  /**
+   * bf-file-input's live announcement for a rejected file.
+   * @default (name, reason) => `${name} was not added: ${reason}`
+   */
+  readonly fileInputNotAdded: (name: string, reason: string) => string;
+  /**
+   * bf-file-input's live announcement after a file is removed.
+   * @default (name) => `${name} removed`
+   */
+  readonly fileInputRemoved: (name: string) => string;
+  /**
+   * bf-file-input's read-only box text for the number of chosen files.
+   * @default (count) => (count === 1 ? '1 file' : `${count} files`)
+   */
+  readonly fileInputCount: (count: number) => string;
+  /**
+   * The message of a file rejected for its type.
+   * @default 'Not an accepted type'
+   */
+  readonly fileRejectedType: string;
+  /**
+   * The message of a file rejected for its size; `max` is the formatted limit.
+   * @default (max) => `Too large, max ${max}`
+   */
+  readonly fileRejectedSize: (max: string) => string;
+  /**
+   * The message of a file rejected because the file limit is reached.
+   * @default (max) => `Too many files, max ${max}`
+   */
+  readonly fileRejectedCount: (max: number) => string;
+  /**
+   * bf-image-input's accessible name for the empty drop target.
+   * @default 'Choose image'
+   */
+  readonly imageInputChoose: string;
+  /**
+   * bf-image-input's text for choosing the first image.
+   * @default 'Upload'
+   */
+  readonly imageInputUpload: string;
+  /**
+   * bf-image-input's text for replacing the image.
+   * @default 'Replace'
+   */
+  readonly imageInputReplace: string;
+  /**
+   * bf-image-input's text for removing the image.
+   * @default 'Remove'
+   */
+  readonly imageInputRemove: string;
+  /**
+   * bf-chat-thread's accessible name (its `role="log"`) when no `label` is set.
+   * @default 'Conversation'
+   */
+  readonly chatThread: string;
+  /**
+   * bf-chat-thread's button that scrolls back to the newest message and follows it again.
+   * @default 'Jump to latest'
+   */
+  readonly chatJumpToLatest: string;
+  /**
+   * bf-chat-message's status line for a reply the user stopped.
+   * @default 'Stopped'
+   */
+  readonly chatMessageStopped: string;
+  /**
+   * bf-chat-message's status line for a message that failed.
+   * @default 'Something went wrong'
+   */
+  readonly chatMessageFailed: string;
+  /**
+   * bf-chat-composer's text field name when no `label` or `ariaLabel` is set.
+   * @default 'Message'
+   */
+  readonly chatComposer: string;
+  /**
+   * bf-chat-composer's send button.
+   * @default 'Send'
+   */
+  readonly chatSend: string;
+  /**
+   * bf-chat-composer's stop button, shown in place of send while a reply runs.
+   * @default 'Stop'
+   */
+  readonly chatStop: string;
+  /**
+   * bf-media-card's select button, read before the card's name ("Select Starfall").
+   * @default 'Select'
+   */
+  readonly mediaCardSelect: string;
+  /**
+   * bf-media-card's, bf-image-tile's and bf-image-viewer's message for an image that failed to load.
+   * @default 'The image could not be loaded'
+   */
+  readonly imageLoadFailed: string;
+  /**
+   * bf-image-tile's placeholder text while it has no image yet.
+   * @default 'No image yet'
+   */
+  readonly imageTileEmpty: string;
+  /**
+   * bf-image-tile's selected state, read before the tile's title ("Selected, Dragon").
+   * @default 'Selected'
+   */
+  readonly imageTileSelected: string;
+  /**
+   * bf-image-viewer's name.
+   * @default 'Image viewer'
+   */
+  readonly imageViewer: string;
+  /**
+   * bf-image-viewer's button that shows the previous image.
+   * @default 'Previous image'
+   */
+  readonly imageViewerPrevious: string;
+  /**
+   * bf-image-viewer's button that shows the next image.
+   * @default 'Next image'
+   */
+  readonly imageViewerNext: string;
+  /**
+   * bf-image-viewer's counter: the shown image's position (1-based) among the images.
+   * @default (position, count) => `${position} of ${count}`
+   */
+  readonly imageViewerPosition: (position: number, count: number) => string;
   /** Default error text per validator kind (see `BfValidationMessages`). */
   readonly validation: BfValidationMessages;
 }
@@ -557,9 +717,17 @@ export declare const BF_LABELS: InjectionToken<BfLabels>;
  * `dateInputUnavailable`, `timeInputHour`, `timeInputMinute`, `timeInputSecond`,
  * `timeInputDayPeriod`, `timeInputOpenList`, `timeInputInvalid`, `timeInputMin`, `timeInputMax`,
  * `chart`, `chartLegend`, `chartValues`, `chartShowData`, `chartHideData`, `chartCategory`,
- * `chartValue`, `chartEmpty`, `chartError`, `listItemUnread`, `validation`); the overlay services (`ok`, `cancel`,
- * `actions`, `sheet`, `modal`, `close`, `expand`, `collapse`, `sheetPosition`, `dialog`,
- * `notifications`) are root singletons and pick it up only when the caller passes its injector:
+ * `chartValue`, `chartEmpty`, `chartError`, `listItemUnread`,
+ * `fileInputChoose`, `fileInputDropHint`, `fileInputDropzone`, `fileInputTapToChoose`, `fileInputRemove`,
+ * `fileInputDismiss`, `fileInputAdded`, `fileInputNotAdded`, `fileInputRemoved`, `fileInputCount`,
+ * `fileRejectedType`, `fileRejectedSize`, `fileRejectedCount`,
+ * `imageInputChoose`, `imageInputUpload`, `imageInputReplace`, `imageInputRemove`,
+ * `chatThread`, `chatJumpToLatest`, `chatMessageStopped`, `chatMessageFailed`, `chatComposer`,
+ * `chatSend`, `chatStop`, `mediaCardSelect`, `imageLoadFailed`, `imageTileEmpty`,
+ * `imageTileSelected`, `validation`); the overlay
+ * services (`ok`, `cancel`, `actions`, `sheet`, `modal`, `close`, `expand`, `collapse`,
+ * `sheetPosition`, `dialog`, `notifications`, `imageViewer`, `imageViewerPrevious`,
+ * `imageViewerNext`, `imageViewerPosition`) are root singletons and pick it up only when the caller passes its injector:
  * `open(…, { injector: inject(Injector) })`.
  *
  * @param overrides The strings to replace; any key left out keeps the parent's.
@@ -568,6 +736,51 @@ export declare const BF_LABELS: InjectionToken<BfLabels>;
  * @since 0.3.0
  */
 export declare function provideBfLabels(overrides: BfLabelsOverrides): Provider;
+/**
+ * The rule a refused file broke: `type` (not accepted), `size` (over `maxSize`) or `count` (over
+ * the limit).
+ *
+ * @summary The rule a refused file broke, its type, its size or the file count
+ * @since 0.5.0
+ */
+type BfRejectedFileReason = 'type' | 'size' | 'count';
+/**
+ * A picked or dropped file that broke a rule, with the rule and its message.
+ *
+ * @summary A picked or dropped file that broke a rule, with the rule and its message
+ * @since 0.5.0
+ */
+interface BfRejectedFile {
+  /** The file that was not added. */
+  readonly file: File;
+  /** The rule it broke: `type` (not accepted), `size` (over `maxSize`) or `count` (over the limit). */
+  readonly reason: BfRejectedFileReason;
+  /** The user-facing text for the rule, from the labels. */
+  readonly message: string;
+}
+/** The rules a file picker applies to what the user picks or drops. */
+interface FileRules {
+  readonly accept: string;
+  readonly maxSize: number | undefined;
+  readonly maxFiles: number | undefined;
+  readonly multiple: boolean;
+}
+/** Whether `file` satisfies an `accept` string (MIME types, `type/*` wildcards and `.ext` tokens). */
+declare function matchesAccept(file: File, accept: string): boolean;
+/**
+ * Formats a byte count with base 1024: whole KB, one decimal (no trailing `.0`) for MB and GB.
+ * The unit is chosen after rounding, so a value that rounds up to 1024 shows as 1 of the next unit.
+ */
+declare function formatFileSize(bytes: number): string;
+/**
+ * Applies the rules to `incoming` in order and returns the new value and what was rejected.
+ * A file is checked for type, then size, then count. In single mode the first valid file
+ * replaces `current`; later valid ones are rejected as `count` with a max of 1.
+ */
+declare function applyFileRules(current: readonly File[], incoming: readonly File[], rules: FileRules, labels: BfLabels): {
+  value: File[];
+  rejected: BfRejectedFile[];
+};
 /**
  * The app's colour scheme choice: follow the system, or force light or dark.
  *
@@ -1032,10 +1245,12 @@ type BfBadgeEmphasis = 'soft' | 'strong';
  * <bf-badge variant="warning">At risk</bf-badge>
  * <bf-badge variant="danger" emphasis="strong">Critical</bf-badge>
  * <bf-badge [count]="unread()" countLabel="unread messages" />
+ * <bf-badge variant="success"><bf-icon bfSlot="icon-start" [icon]="Check" />Reference</bf-badge>
  * @summary Small status label in semantic tones, or a compact numeric pill for counts
  * @category Data display
  * @since 0.1.0
  * @slot default The badge text, shown when no `count` is set.
+ * @slot icon-start An icon before the text, drawn at 12 px; not shown on a count pill.
  */
 export declare class BfBadgeComponent {
   /** Tint for the label style: neutral, primary, success, warning, danger or info. Ignored by a
@@ -1074,7 +1289,7 @@ export declare class BfBadgeComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["*"], true, never>;
+  }, {}, never, ["[bfSlot=icon-start]", "*"], true, never>;
 }
 /** A message paragraph that never moves the layout under a pressed pointer. */
 interface HeldMessage {
@@ -1126,6 +1341,9 @@ export declare class BfFieldComponent {
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** The id of the control inside the default slot. */
   readonly controlId: import("@angular/core").InputSignal<string>;
+  /** The label's id (`"<controlId>-label"`), for a control a `<label for>` cannot name, such as a
+   * `div[role=combobox]` that names itself with `aria-labelledby`. */
+  readonly labelId: import("@angular/core").Signal<string>;
   readonly helpId: import("@angular/core").Signal<string>;
   readonly errorId: import("@angular/core").Signal<string>;
   /** The error paragraph: `error`, visually hidden while a press holds the layout. */
@@ -1786,173 +2004,255 @@ export declare class BfTextareaComponent implements FormValueControl<string> {
   }, never, never, true, never>;
 }
 /**
- * Equality that matches a bound value to an option's value (`compareWith` of the choice controls).
- * Called as `compareWith(optionValue, value)`: the option's value first, the bound value second.
- *
- * @summary Equality of choice values, for options that are objects rather than primitives
- * @since 0.3.0
- */
-type BfCompareWith<T> = (optionValue: T, value: T) => boolean;
-/**
- * Index of the option whose value matches `value` under `compare`; `-1` for `null` (nothing
- * selected) or a value no option matches. An option whose value is `null` therefore never shows as
- * selected.
- */
-declare function choiceIndex<T>(options: readonly {
-  readonly value: T;
-}[], value: T | null, compare: BfCompareWith<T>): number;
-/**
- * The native `value` of an option (`<option>`, radio): `String(value)` for a string, number or
- * boolean, so native reads, form posts and browser tests see the real value; the option index for
- * anything else (objects). The controls map a choice back by position, never by this key, so
- * duplicate keys still resolve to the right option.
- */
-declare function choiceKey(value: unknown, index: number): string;
-/**
- * One choice of `bf-select`; `value` is any type (a string by default).
+ * The look of a `bf-file-input`: a compact field with a pick button (`field`), or a drop zone
+ * (`dropzone`). Both have the same API and behaviour.
  *
- * @summary One choice of a select with its value, its label and a disabled flag
- * @since 0.1.0
+ * @summary The two looks of a file picker, a compact field or a drop zone
+ * @since 0.5.0
  */
-interface BfSelectOption<T = string> {
-  /** The value the select's `value` takes when this option is chosen. */
-  value: T;
-  /** The text of the native `option`. */
-  label: string;
-  /** Whether this option cannot be chosen. */
-  disabled?: boolean;
+type BfFileInputVariant = 'field' | 'dropzone';
+/** A chosen file as listed: its preview URL (images) or extension, and its formatted size. */
+interface BfFileInputRow {
+  readonly file: File;
+  readonly preview: string | null;
+  readonly extension: string;
+  readonly size: string;
 }
+/** The upper-case extension of `name`, at most 4 characters; empty without one. */
+declare function extensionOf(name: string): string;
 /**
- * Native single-choice dropdown styled like the text field, with a placeholder option and
- * Signal Forms binding. Generic over the option value (a string by default); `null` means nothing
- * is selected.
+ * File picker field: a tonal "Choose file" button inside a field box that also takes dropped
+ * files, with the chosen files listed under it (thumbnail, name, size, remove button). `accept`,
+ * `maxSize` and `maxFiles` decide what is added; a file that breaks one is listed in red with the
+ * reason until the next pick and emitted through `rejected`, and never enters the value. The value
+ * is always a `File[]` (one file at most while `multiple` is off). It only picks: uploading the
+ * files is the app's job. Bind `[(value)]` directly or `[formField]` from a signal form.
  *
  * @example
- * <bf-select label="Project" placeholder="Pick a project" [options]="projects" [(value)]="projectId" />
- * <bf-select label="Team" placeholder="Pick a team" [options]="teams" [formField]="task.teamId" />
- * @summary Native single-choice dropdown styled like the text field, with Signal Forms binding
+ * <bf-file-input label="Attachments" multiple accept=".pdf,image/*" [maxSize]="10485760" [(value)]="files" />
+ * <bf-file-input label="Contract" accept=".pdf" [formField]="signup.contract" />
+ * @summary File picker field that lists picked or dropped files and checks type, size and count
  * @category Forms
- * @since 0.1.0
- */
-export declare class BfSelectComponent<T = string> implements FormValueControl<T | null> {
-  /** The selected option's value, `null` while nothing is selected; two-way bindable and bound by
-   * `[formField]`. */
-  readonly value: import("@angular/core").ModelSignal<T | null>;
-  /** The options to choose from. */
-  readonly options: import("@angular/core").InputSignal<readonly BfSelectOption<T>[]>;
-  /** Equality for matching `value` to an option (default `Object.is`); pass one for object values. */
-  readonly compareWith: import("@angular/core").InputSignal<BfCompareWith<T>>;
-  /** Height step: sm 32, md 40, lg 48 px; unset follows `provideBfDefaults()` (`fieldSize`, `md`
-   * by default). */
+ * @since 0.5.0
+ */
+export declare class BfFileInputComponent implements FormValueControl<File[]> {
+  /** The chosen files; two-way bindable and bound by `[formField]`. Empty while nothing is chosen,
+   * at most one file while `multiple` is off. */
+  readonly value: import("@angular/core").ModelSignal<File[]>;
+  /** The look: `field` (a compact field with a pick button, the default) or `dropzone`. */
+  readonly variant: import("@angular/core").InputSignal<BfFileInputVariant>;
+  /** Allows several files: new picks and drops are added to the list. Off, a new file replaces
+   * the one chosen. */
+  readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** The accepted file types, in the native `accept` syntax: MIME types, `type/*` wildcards and
+   * `.ext` extensions, comma-separated (`'.pdf,image/*'`). Empty accepts every file. Dropped files
+   * are checked against it too. */
+  readonly accept: import("@angular/core").InputSignal<string>;
+  /** Largest file size in bytes; a larger file is rejected. Unset allows any size. */
+  readonly maxSize: import("@angular/core").InputSignal<number | undefined>;
+  /** Most files in the value with `multiple`, counting those already chosen; files past it are
+   * rejected. Unset allows any number. */
+  readonly maxFiles: import("@angular/core").InputSignal<number | undefined>;
+  /** Height step of the field box: sm 32, md 40, lg 48 px; unset follows `provideBfDefaults()`
+   * (`fieldSize`, `md` by default). */
   readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
   /** Visible label above the control. */
   readonly label: import("@angular/core").InputSignal<string>;
   /**
-   * Accessible name when no visible label is rendered (e.g. a table filter). Ignored when `label`
-   * is set.
+   * Accessible name when no visible label is rendered, read before the control's visible text
+   * ("Attachments, Choose files"). Ignored when `label` is set.
    */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /**
-   * Id(s) of the element(s) that name the field when no visible label is rendered. Ignored when
-   * `label` is set.
+   * Id(s) of the element(s) that name the field when no visible label is rendered, read before the
+   * control's visible text. Ignored when `label` is set.
    */
   readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
-  /** Disabled first option shown while nothing is selected. */
-  readonly placeholder: import("@angular/core").InputSignal<string>;
   /** Helper text under the control. */
   readonly helpText: import("@angular/core").InputSignal<string>;
   /** Explicit error text; takes precedence over Signal Forms errors. */
   readonly errorMessage: import("@angular/core").InputSignal<string>;
-  /** Disables the control. */
+  /** Disables the control: no picking, dropping or removing, and the pick button is not focusable. */
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Shows the value but blocks changes; the select stays focusable and exposes `aria-readonly`. */
+  /** Makes the control read-only: the files stay listed, with no pick button, drop or remove. */
   readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Marks the control required. */
+  /** Marks the control required (label marker). */
   readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Field validity from Signal Forms. */
   readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Whether the user has left the field. */
+  /** Whether the user has left the field; errors show only once touched. */
   readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Validation errors from Signal Forms. */
+  /** Validation errors from Signal Forms; the first message is shown once touched. */
   readonly errors: import("@angular/core").InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
-  /** Native name attribute. */
+  /** Native name attribute; set, the hidden native file input carries the chosen files, so a
+   * plain HTML form post includes them. */
   readonly name: import("@angular/core").InputSignal<string>;
-  /** Control id; generated when not set. */
+  /** Control id (the pick button's); generated when not set. */
   readonly id: import("@angular/core").InputSignal<string>;
-  /** Emitted with the chosen value after a user change (never `null`). */
-  readonly changed: import("@angular/core").OutputEmitterRef<T>;
-  /** Emitted when the control gains focus. */
+  /** Emitted with the new files right after the user adds or removes one, not on a model write. */
+  readonly changed: import("@angular/core").OutputEmitterRef<File[]>;
+  /** Emitted once per pick or drop in which at least one file broke a rule, with those files. */
+  readonly rejected: import("@angular/core").OutputEmitterRef<BfRejectedFile[]>;
+  /** Emitted when the pick button gains focus. */
   readonly focused: import("@angular/core").OutputEmitterRef<FocusEvent>;
-  /** Emitted when the control loses focus. */
+  /** Emitted when the pick button loses focus. */
   readonly blurred: import("@angular/core").OutputEmitterRef<FocusEvent>;
   /** Emitted on blur so Signal Forms marks the field touched. */
   readonly touch: import("@angular/core").OutputEmitterRef<void>;
-  private readonly el;
+  private readonly pick;
+  private readonly native;
+  private readonly removeButtons;
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
   private readonly defaults;
+  private readonly injector;
+  private readonly document;
+  /** Whether the primary pointer is coarse (touch), from `matchMedia`: the drop zone then says
+   * "tap" and takes less padding. */
+  protected readonly coarse: import("@angular/core").WritableSignal<boolean>;
+  /** The files of the last pick or drop that broke a rule, until the next one or a dismiss. */
+  protected readonly rejectedFiles: import("@angular/core").WritableSignal<readonly BfRejectedFile[]>;
+  /** The polite live message after an add, a rejection or a remove. */
+  protected readonly announcement: import("@angular/core").WritableSignal<string>;
+  /** The pending write of the next live message. */
+  private announceTimer;
+  /** Whether a drag is over the box. */
+  private readonly dragging;
+  /** The object URL of each image file in the value, for its thumbnail. */
+  private readonly previews;
+  protected readonly thumbClasses: string;
+  protected readonly removeClasses: string;
+  protected readonly crossClasses: string;
+  protected readonly rejectedRowClasses = "grid grid-cols-[2.5rem_minmax(0,1fr)_auto] items-center gap-3 rounded-tile border border-border bg-surface py-1.5 ps-2 pe-1.5";
+  protected readonly extensionOf: typeof extensionOf;
+  protected readonly badgeClasses = "grid size-11 place-items-center rounded-full bg-primary-soft text-primary-strong";
+  protected readonly arrowClasses: string;
   /** The size in effect: `size`, else the app's `fieldSize` default. */
   protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
-  readonly wrapperClasses: import("@angular/core").Signal<string>;
-  /** Index of the option matching `value`, `-1` while nothing (or `null`) is selected. */
-  readonly selectedIndex: import("@angular/core").Signal<number>;
-  readonly showEmptyOption: import("@angular/core").Signal<boolean>;
-  private readonly labels;
+  /** Whether the user can pick, drop and remove files. */
+  protected readonly editable: import("@angular/core").Signal<boolean>;
   readonly errorText: import("@angular/core").Signal<string>;
   readonly showError: import("@angular/core").Signal<boolean>;
-  readonly describedBy: import("@angular/core").Signal<string | null>;
+  /** `aria-describedby` of the pick button: the text beside it (hint or file name), then the help
+   * and error paragraphs. */
+  readonly describedBy: import("@angular/core").Signal<string>;
   /** `aria-errormessage`: the error paragraph while `aria-invalid` is set. */
   readonly errorMessageId: import("@angular/core").Signal<string | null>;
-  /**
-   * `aria-label` value: only when there is no visible label, so the label stays the sole accessible
-   * name.
-   */
+  /** `ariaLabel` in effect: only when there is no visible label. It names the control through a
+   * hidden element, never `aria-label`, so the visible text stays part of the name. */
   readonly ariaLabelAttr: import("@angular/core").Signal<string | null>;
-  /** `aria-labelledby` value, under the same rule as `ariaLabelAttr`. */
-  readonly ariaLabelledbyAttr: import("@angular/core").Signal<string | null>;
-  readonly classes: import("@angular/core").Signal<string>;
-  /** Native `value` of an option: its value for a primitive, its index for an object. */
-  protected readonly key: typeof choiceKey;
+  /** `aria-labelledby` of the pick button or drop zone: the field's name (the visible label, else
+   * `ariaLabelledby`, else `ariaLabel`), then the control's visible text ("Contract, Choose file"),
+   * so a speech-input user can say what they see (WCAG 2.5.3). */
+  readonly ariaLabelledbyAttr: import("@angular/core").Signal<string>;
+  /** The drop zone's `aria-describedby`: the help and error paragraphs (its text is its name). */
+  protected readonly zoneDescribedBy: import("@angular/core").Signal<string | null>;
+  /** The drop zone's text: the drop prompt, or the tap prompt under a coarse pointer. */
+  protected readonly zoneText: import("@angular/core").Signal<string>;
+  /** The text in the box: the file name (one file, single mode), the file count (read-only with
+   * `multiple`), else the drop hint. */
+  protected readonly boxText: import("@angular/core").Signal<string>;
+  protected readonly rows: import("@angular/core").Signal<BfFileInputRow[]>;
+  readonly boxClasses: import("@angular/core").Signal<string>;
+  protected readonly zoneClasses: import("@angular/core").Signal<string>;
+  protected readonly pickClasses: import("@angular/core").Signal<string>;
+  protected readonly hintClasses: import("@angular/core").Signal<string>;
+  protected readonly rowClasses: import("@angular/core").Signal<string>;
+  constructor();
   /**
-   * Focuses the native select; Signal Forms calls it from `focusBoundControl()`.
+   * Focuses the pick button; Signal Forms calls it from `focusBoundControl()`. Read-only has no
+   * pick button, so nothing is focused.
    * @param options Passed on to the native `focus()`, such as `{ preventScroll: true }`.
    */
   focus(options?: FocusOptions): void;
   /**
-   * Read-only: no picker on a mouse press. Cancelling the press also cancels its focus, so the
-   * select is focused explicitly, like any other read-only control. Touch screens open the
-   * platform picker without a cancellable press; a choice made there is reverted by `onChange`.
+   * Opens the native picker from the drop zone while the control is editable.
    * @internal
    */
-  onMousedown(event: MouseEvent): void;
+  openPicker(): void;
   /**
-   * Read-only: no picker or value change from the keyboard (arrows, Enter, Space, F4, type-ahead).
+   * Enter and Space on the drop zone open the picker (and do not scroll the page).
    * @internal
    */
-  onKeydown(event: KeyboardEvent): void;
+  onZoneKey(event: Event): void;
   /**
-   * Writes the chosen option's value to the model and emits `changed`; while read-only, restores
-   * the shown option instead.
+   * Adds the native input's files, then empties it so picking the same file again fires `change`.
    * @internal
    */
-  onChange(el: HTMLSelectElement): void;
+  onPicked(input: HTMLInputElement): void;
+  /**
+   * Allows a drop on the box and highlights it while the control is editable.
+   * @internal
+   */
+  onDragOver(event: DragEvent): void;
+  /**
+   * Ends the highlight when the drag leaves the box (not when it moves onto a child).
+   * @internal
+   */
+  onDragLeave(event: DragEvent, box: HTMLElement): void;
+  /**
+   * Adds the dropped files through the same rules as a pick; ignores them (but still keeps the
+   * browser from opening them) while the control cannot be edited.
+   * @internal
+   */
+  onDrop(event: DragEvent): void;
   /**
    * Marks the field touched and emits `blurred`.
    * @internal
    */
   onBlur(event: FocusEvent): void;
-  static ɵfac: i0.ɵɵFactoryDeclaration<BfSelectComponent<any>, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<BfSelectComponent<any>, "bf-select", never, {
+  /**
+   * Removes the file at `index`, then focuses the next remove button, else the previous one,
+   * else the pick button.
+   * @internal
+   */
+  removeAt(index: number): void;
+  /**
+   * Dismisses the rejected file at `index` and returns focus to the pick button.
+   * @internal
+   */
+  dismissAt(index: number): void;
+  /** Runs `files` through the rules: accepted ones join the value, rejected ones are listed. */
+  private add;
+  /**
+   * Puts `text` in the live region. The region is emptied first and the text follows after
+   * `ANNOUNCE_DELAY`, so a message equal to the last one ("1 file added" twice) still changes the
+   * DOM in a separate update and is announced again.
+   */
+  private announce;
+  /** Keeps one object URL per image in `files`: creates the missing ones, revokes the rest. */
+  private syncPreviews;
+  /** With a `name`, puts the current files on the hidden native input, so a plain form post sends
+   * them. */
+  private writeNativeFiles;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfFileInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfFileInputComponent, "bf-file-input", never, {
     "value": {
       "alias": "value";
       "required": false;
       "isSignal": true;
     };
-    "options": {
-      "alias": "options";
-      "required": true;
+    "variant": {
+      "alias": "variant";
+      "required": false;
       "isSignal": true;
     };
-    "compareWith": {
-      "alias": "compareWith";
+    "multiple": {
+      "alias": "multiple";
+      "required": false;
+      "isSignal": true;
+    };
+    "accept": {
+      "alias": "accept";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxSize": {
+      "alias": "maxSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxFiles": {
+      "alias": "maxFiles";
       "required": false;
       "isSignal": true;
     };
@@ -1976,11 +2276,6 @@ export declare class BfSelectComponent<T = string> implements FormValueControl<T
       "required": false;
       "isSignal": true;
     };
-    "placeholder": {
-      "alias": "placeholder";
-      "required": false;
-      "isSignal": true;
-    };
     "helpText": {
       "alias": "helpText";
       "required": false;
@@ -2034,60 +2329,373 @@ export declare class BfSelectComponent<T = string> implements FormValueControl<T
   }, {
     "value": "valueChange";
     "changed": "changed";
+    "rejected": "rejected";
     "focused": "focused";
     "blurred": "blurred";
     "touch": "touch";
   }, never, never, true, never>;
 }
 /**
- * Checkbox with a 22 px rounded box and an optional label, implementing the Signal Forms
- * checkbox contract so `[formField]` binds `checked`.
+ * The shape of a `bf-image-input` tile: a circle (`round`, for avatars) or a rounded square
+ * (`square`, for logos and covers).
+ *
+ * @summary The two tile shapes of an image picker, a circle or a rounded square
+ * @since 0.5.0
+ */
+type BfImageInputShape = 'round' | 'square';
+/**
+ * Single-image picker for an avatar, logo or cover: a round or square tile that shows the image
+ * (or a camera glyph while empty), with the label, help text and Upload/Replace and Remove buttons
+ * beside it. Clicking the tile or Upload opens the native picker; an image dropped on the tile is
+ * taken too. `src` shows an image the app already has until the user picks a new one or removes
+ * it. A pick that breaks `accept` or `maxSize` keeps the current image, shows the reason under the
+ * buttons and is emitted through `rejected`. It only picks: uploading is the app's job. Bind
+ * `[(value)]` directly or `[formField]` from a signal form.
  *
  * @example
- * <bf-checkbox [(checked)]="agree">I agree to the terms</bf-checkbox>
- * <bf-checkbox label="Notify me" [formField]="prefs.notify" />
- * @summary Rounded checkbox with an optional label that binds to Signal Forms
+ * <bf-image-input label="Profile picture" [(value)]="avatar" [(src)]="avatarUrl" />
+ * <bf-image-input label="Logo" shape="square" [maxSize]="2097152" [formField]="company.logo" />
+ * @summary Single-image picker with a round or square preview tile and replace or remove
  * @category Forms
- * @since 0.1.0
- * @slot default Rich label content next to the box, before the `label` text.
- */
-export declare class BfCheckboxComponent implements FormCheckboxControl {
-  /** Whether the box is checked; two-way bindable and bound by `[formField]`. */
-  readonly checked: import("@angular/core").ModelSignal<boolean>;
-  /** Label text; the default slot works too. */
+ * @since 0.5.0
+ */
+export declare class BfImageInputComponent implements FormValueControl<File | null> {
+  /** The picked image; two-way bindable and bound by `[formField]`. Null while none is picked. */
+  readonly value: import("@angular/core").ModelSignal<File | null>;
+  /** URL of an image the app already has (the current avatar), shown while `value` is null. Remove
+   * sets it to null; two-way bindable. */
+  readonly src: import("@angular/core").ModelSignal<string | null>;
+  /** The tile's shape: `round` (a circle, the default) or `square` (a rounded square). */
+  readonly shape: import("@angular/core").InputSignal<BfImageInputShape>;
+  /** Tile size: sm 64, md 96, lg 128 px; unset follows `provideBfDefaults()` (`fieldSize`, `md` by
+   * default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** The accepted file types, in the native `accept` syntax (`'image/png,image/jpeg'`); dropped
+   * files are checked against it too. */
+  readonly accept: import("@angular/core").InputSignal<string>;
+  /** Largest file size in bytes; a larger image is rejected. Unset allows any size. */
+  readonly maxSize: import("@angular/core").InputSignal<number | undefined>;
+  /** Visible label beside the tile. */
   readonly label: import("@angular/core").InputSignal<string>;
-  /** Accessible name when there is no visible `label`, e.g. a row-selection box. */
+  /** Accessible name of the tile when no visible label is rendered, in place of "Choose image".
+   * Ignored when `label` is set. */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
-  /** Id(s) of the element(s) that name the control when no visible label is rendered (e.g. a
-   * table column header). */
+  /** Id(s) of the element(s) that name the tile when no visible label is rendered. Ignored when
+   * `label` is set. */
   readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
-  /** Height step of the row: sm 32, md 40, lg 48 px (44 px under a coarse pointer for sm and md);
-   * unset follows `provideBfDefaults()` (`controlSize`, `md` by default). */
-  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
-  /** Shows the mixed state (e.g. "select all" with some rows selected); two-way bindable. A user
-   * change clears it, like the native checkbox, so the box and `aria-checked` agree. */
-  readonly indeterminate: import("@angular/core").ModelSignal<boolean>;
-  /** Disables the control. */
+  /** Helper text under the label. */
+  readonly helpText: import("@angular/core").InputSignal<string>;
+  /** Explicit error text; takes precedence over Signal Forms errors. */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /** Disables the control: the tile and buttons are disabled and drops are ignored. */
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Shows the state but blocks changes; the box stays focusable and exposes `aria-readonly`. */
+  /** Makes the control read-only: the image shows in a plain tile, with no buttons or drop. */
   readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Marks the control required. */
+  /** Marks the control required (label marker). A `value` or a `src` fills it; see the docs for a
+   * validator that counts `src`. */
   readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Field validity from Signal Forms. */
   readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Whether the user has left the field. */
+  /** Whether the user has left the field; errors show only once touched. */
   readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Validation errors from Signal Forms. */
+  /** Validation errors from Signal Forms; the first message is shown once touched. */
   readonly errors: import("@angular/core").InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
-  /** Explicit error text; takes precedence over Signal Forms errors. */
-  readonly errorMessage: import("@angular/core").InputSignal<string>;
-  /** Native name attribute. */
+  /** Native name attribute; set, the hidden native file input carries the picked image, so a plain
+   * HTML form post includes it. */
   readonly name: import("@angular/core").InputSignal<string>;
-  /** Control id; generated when not set. */
+  /** Control id (the tile's); generated when not set. */
   readonly id: import("@angular/core").InputSignal<string>;
-  /** Emitted with the new checked state after a user change. */
-  readonly changed: import("@angular/core").OutputEmitterRef<boolean>;
-  /** Emitted on blur so Signal Forms marks the field touched. */
+  /** Emitted with the new image (or null after Remove) right after a user change, not on a model
+   * write. */
+  readonly changed: import("@angular/core").OutputEmitterRef<File | null>;
+  /** Emitted once per pick or drop in which a file broke a rule, with those files. */
+  readonly rejected: import("@angular/core").OutputEmitterRef<BfRejectedFile[]>;
+  /** Emitted when the tile gains focus. */
+  readonly focused: import("@angular/core").OutputEmitterRef<FocusEvent>;
+  /** Emitted when the tile loses focus. */
+  readonly blurred: import("@angular/core").OutputEmitterRef<FocusEvent>;
+  /** Emitted on blur of the tile or a button so Signal Forms marks the field touched. */
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  private readonly tile;
+  private readonly native;
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  private readonly defaults;
+  /** Whether a drag is over the tile. */
+  protected readonly dragging: import("@angular/core").WritableSignal<boolean>;
+  /** The reason the last pick or drop was refused, until the next one or Remove. */
+  protected readonly rejection: import("@angular/core").WritableSignal<string>;
+  /** The polite live message: the rejection reason, written after a pause. */
+  protected readonly announcement: import("@angular/core").WritableSignal<string>;
+  /** The pending write of the live message. */
+  private announceTimer;
+  /** The object URL of the picked image, with the file it was made for. */
+  private readonly objectUrl;
+  protected readonly uploadClasses: string;
+  protected readonly removeClasses: string;
+  /** The size in effect: `size`, else the app's `fieldSize` default. */
+  protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
+  /** Whether the user can pick, drop and remove. */
+  protected readonly editable: import("@angular/core").Signal<boolean>;
+  /** What the tile shows: the picked image's object URL, else `src`, else nothing. */
+  protected readonly preview: import("@angular/core").Signal<string | null>;
+  /** Whether an image (picked or existing) is set: Upload reads Replace and Remove shows. */
+  protected readonly shows: import("@angular/core").Signal<boolean>;
+  readonly errorText: import("@angular/core").Signal<string>;
+  readonly showError: import("@angular/core").Signal<boolean>;
+  /** `aria-describedby` of the tile: the label (the tile's name is the action), then the help and
+   * error paragraphs. */
+  readonly describedBy: import("@angular/core").Signal<string | null>;
+  /** `aria-errormessage`: the error paragraph while `aria-invalid` is set. */
+  readonly errorMessageId: import("@angular/core").Signal<string | null>;
+  /** The tile's `aria-labelledby`: `ariaLabelledby` while there is no visible label. */
+  protected readonly tileLabelledby: import("@angular/core").Signal<string | null>;
+  /** The tile's `aria-label`: "Choose image", or `ariaLabel` while there is no visible label. */
+  protected readonly tileLabel: import("@angular/core").Signal<string | null>;
+  /** The buttons' `aria-describedby`: the label, so "Remove" says what it removes. */
+  protected readonly actionDescribedBy: import("@angular/core").Signal<string | null>;
+  protected readonly tileClasses: import("@angular/core").Signal<string>;
+  protected readonly glyphClasses: import("@angular/core").Signal<string>;
+  constructor();
+  /**
+   * Focuses the tile; Signal Forms calls it from `focusBoundControl()`. Read-only has no button, so
+   * nothing is focused.
+   * @param options Passed on to the native `focus()`, such as `{ preventScroll: true }`.
+   */
+  focus(options?: FocusOptions): void;
+  /**
+   * Takes the native input's file, then empties it so picking the same file again fires `change`.
+   * @internal
+   */
+  onPicked(input: HTMLInputElement): void;
+  /**
+   * Allows a drop on the tile and highlights it while the control is editable. Otherwise it still
+   * cancels the event, so the browser does not open a dropped file and leave the page.
+   * @internal
+   */
+  onDragOver(event: DragEvent): void;
+  /**
+   * Takes the dropped file through the same rules as a pick; ignores it (but still keeps the
+   * browser from opening it) while the control cannot be edited.
+   * @internal
+   */
+  onDrop(event: DragEvent): void;
+  /**
+   * Marks the field touched and emits `blurred`.
+   * @internal
+   */
+  onBlur(event: FocusEvent): void;
+  /**
+   * Clears the picked and the existing image, then focuses the tile.
+   * @internal
+   */
+  remove(): void;
+  /** Runs `files` through the rules: the first accepted one replaces the image; a refusal keeps it
+   * and shows the reason. */
+  private take;
+  /**
+   * Writes `text` to the rejection line at once and announces it through the live region. The
+   * region is emptied first and the text follows after `ANNOUNCE_DELAY`, so the same reason twice
+   * is still announced again.
+   */
+  private showRejection;
+  /** Keeps one object URL for `file`: makes it when the file changes, revokes the previous one. */
+  private syncObjectUrl;
+  /** With a `name`, puts the picked image on the hidden native input, so a plain form post sends
+   * it. */
+  private writeNativeFiles;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfImageInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfImageInputComponent, "bf-image-input", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "shape": {
+      "alias": "shape";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "accept": {
+      "alias": "accept";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxSize": {
+      "alias": "maxSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "helpText": {
+      "alias": "helpText";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorMessage": {
+      "alias": "errorMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+    "errors": {
+      "alias": "errors";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "id": {
+      "alias": "id";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "src": "srcChange";
+    "changed": "changed";
+    "rejected": "rejected";
+    "focused": "focused";
+    "blurred": "blurred";
+    "touch": "touch";
+  }, never, never, true, never>;
+}
+/**
+ * Equality that matches a bound value to an option's value (`compareWith` of the choice controls).
+ * Called as `compareWith(optionValue, value)`: the option's value first, the bound value second.
+ *
+ * @summary Equality of choice values, for options that are objects rather than primitives
+ * @since 0.3.0
+ */
+type BfCompareWith<T> = (optionValue: T, value: T) => boolean;
+/**
+ * Index of the option whose value matches `value` under `compare`; `-1` for `null` (nothing
+ * selected) or a value no option matches. An option whose value is `null` therefore never shows as
+ * selected.
+ */
+declare function choiceIndex<T>(options: readonly {
+  readonly value: T;
+}[], value: T | null, compare: BfCompareWith<T>): number;
+/**
+ * The native `value` of an option (`<option>`, radio): `String(value)` for a string, number or
+ * boolean, so native reads, form posts and browser tests see the real value; the option index for
+ * anything else (objects). The controls map a choice back by position, never by this key, so
+ * duplicate keys still resolve to the right option.
+ */
+declare function choiceKey(value: unknown, index: number): string;
+/**
+ * One choice of `bf-select`; `value` is any type (a string by default).
+ *
+ * @summary One choice of a select with its value, its label and a disabled flag
+ * @since 0.1.0
+ */
+interface BfSelectOption<T = string> {
+  /** The value the select's `value` takes when this option is chosen. */
+  value: T;
+  /** The text of the native `option`. */
+  label: string;
+  /** Whether this option cannot be chosen. */
+  disabled?: boolean;
+}
+/**
+ * Checkbox with a 22 px rounded box and an optional label, implementing the Signal Forms
+ * checkbox contract so `[formField]` binds `checked`.
+ *
+ * @example
+ * <bf-checkbox [(checked)]="agree">I agree to the terms</bf-checkbox>
+ * <bf-checkbox label="Notify me" [formField]="prefs.notify" />
+ * @summary Rounded checkbox with an optional label that binds to Signal Forms
+ * @category Forms
+ * @since 0.1.0
+ * @slot default Rich label content next to the box, before the `label` text.
+ */
+export declare class BfCheckboxComponent implements FormCheckboxControl {
+  /** Whether the box is checked; two-way bindable and bound by `[formField]`. */
+  readonly checked: import("@angular/core").ModelSignal<boolean>;
+  /** Label text; the default slot works too. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Accessible name when there is no visible `label`, e.g. a row-selection box. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Id(s) of the element(s) that name the control when no visible label is rendered (e.g. a
+   * table column header). */
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
+  /** Height step of the row: sm 32, md 40, lg 48 px (44 px under a coarse pointer for sm and md);
+   * unset follows `provideBfDefaults()` (`controlSize`, `md` by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** Shows the mixed state (e.g. "select all" with some rows selected); two-way bindable. A user
+   * change clears it, like the native checkbox, so the box and `aria-checked` agree. */
+  readonly indeterminate: import("@angular/core").ModelSignal<boolean>;
+  /** Disables the control. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the state but blocks changes; the box stays focusable and exposes `aria-readonly`. */
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Marks the control required. */
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Field validity from Signal Forms. */
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Whether the user has left the field. */
+  readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Validation errors from Signal Forms. */
+  readonly errors: import("@angular/core").InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
+  /** Explicit error text; takes precedence over Signal Forms errors. */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /** Native name attribute. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** Control id; generated when not set. */
+  readonly id: import("@angular/core").InputSignal<string>;
+  /** Emitted with the new checked state after a user change. */
+  readonly changed: import("@angular/core").OutputEmitterRef<boolean>;
+  /** Emitted on blur so Signal Forms marks the field touched. */
   readonly touch: import("@angular/core").OutputEmitterRef<void>;
   private readonly el;
   private readonly labels;
@@ -2939,6 +3547,8 @@ export declare class BfSegmentedComponent<T = string> implements FormValueContro
   readonly touch: import("@angular/core").OutputEmitterRef<void>;
   /** The rendered radio buttons, in option order; used to move focus after keyboard selection. */
   readonly radios: import("@angular/core").Signal<readonly ElementRef<HTMLButtonElement>[]>;
+  private readonly track;
+  private readonly indicator;
   /** Index of the option matching `value`, `-1` while nothing (or `null`) is selected. */
   readonly selectedIndex: import("@angular/core").Signal<number>;
   /** Index of the option that owns the roving tab stop: the selected enabled option, or the first
@@ -2963,6 +3573,12 @@ export declare class BfSegmentedComponent<T = string> implements FormValueContro
   private readonly mode;
   /** The classes of the scroller around the track. */
   protected readonly scrollerClasses: import("@angular/core").Signal<string>;
+  /** Whether the sliding pill has been measured and placed, so it, not the item, paints the
+   * selection. */
+  private readonly placed;
+  /** The classes of the sliding pill: hidden until placed and while nothing is selected, the
+   * disabled outline on a disabled selected segment. */
+  protected readonly indicatorClasses: import("@angular/core").Signal<string>;
   readonly trackClasses: import("@angular/core").Signal<string>;
   /**
    * The classes of the segment at `index`.
@@ -3378,46 +3994,383 @@ export declare class BfCardComponent implements BfActionHost {
     "clicked": "clicked";
   }, never, ["[bfSlot=header]", "*", "[bfSlot=footer]"], true, never>;
 }
+/** What an image area shows: nothing yet, the skeleton, the picture, or the failure message. */
+type ImageLoadPhase = 'empty' | 'loading' | 'loaded' | 'failed';
+/**
+ * The loading state of one picture in a fixed image area, shared by `bf-media-card` and
+ * `bf-image-tile` so the two never drift: a skeleton while there is no `src` yet (with `loading`)
+ * or while it loads, the picture fading in on top (`bfFadeIn`), the skeleton leaving the DOM once
+ * it has faded out, and the failure message on `failed` or a load error. A new `src` starts over.
+ */
+interface ImageLoadState {
+  readonly phase: Signal<ImageLoadPhase>;
+  /** The `src` to render as an `<img>`, keyed by URL in a `@for` so a new one fades in afresh. */
+  readonly sources: Signal<string[]>;
+  /** The skeleton layer is in the DOM: while loading, and while it fades out over the picture. */
+  readonly skeletonShown: Signal<boolean>;
+  /** The `<img>`'s load event. */
+  loaded(): void;
+  /** The `<img>`'s error event. */
+  errored(): void;
+  /** The skeleton layer's `transitionend`: once it has faded out over the picture it leaves. */
+  skeletonFaded(event: TransitionEvent): void;
+}
+/** Creates the loading state of an image area from its `src`, `loading` and `failed` inputs. */
+declare function imageLoadState(src: Signal<string>, loading: Signal<boolean>, failed: Signal<boolean>): ImageLoadState;
 /**
- * The track height of a `bf-progress`: sm or md.
- *
- * @summary The two track heights of a progress bar, thin and regular
- * @since 0.1.0
- */
-type BfProgressSize = 'sm' | 'md';
-/**
- * The fill colour of a `bf-progress`: primary, success, warning or danger.
+ * The aspect ratio of a `bf-media-card`'s image area: 16:9 (default), 4:3, square or 3:4.
  *
- * @summary The four fill colours of a progress bar, from primary to danger
- * @since 0.1.0
+ * @summary The four aspect ratios of a media card's image area, wide to portrait
+ * @since 0.5.0
  */
-type BfProgressTone = 'primary' | 'success' | 'warning' | 'danger';
+type BfMediaCardAspect = '16/9' | '4/3' | '1/1' | '3/4';
 /**
- * Progress bar for completion and quotas, determinate by default, or `indeterminate` while the
- * amount of work is unknown.
+ * Card for a picture and its story: a game pitch, a generated image, a product. The top is an
+ * image area at a fixed aspect ratio that shows a shimmering skeleton while the picture loads
+ * (also while it does not exist yet: set `loading`), fades the picture in when it arrives, and
+ * shows a message with a Retry slot when it fails. Below it sit a body and a footer. Make the card
+ * clickable with a `bfAction` link or button in its title, as on `bf-card`, and selectable with
+ * `selectable` and `[(selected)]`.
  *
  * @example
- * <bf-progress [value]="68" label="Atlas rebrand" valueText="12 of 18 tasks" />
- * <bf-progress indeterminate label="Uploading" />
- * @summary Progress bar in two sizes and four tones for completion, quotas and unknown waits
+ * <bf-media-card [src]="pitch.cover" alt="Neon city skyline" loadingLabel="Drawing…" selectable [(selected)]="picked">
+ *   <h3 class="text-heading"><a bfAction [routerLink]="['/pitches', pitch.id]">Starfall</a></h3>
+ *   <p class="text-body text-text-secondary">A roguelike in a falling city.</p>
+ *   <bf-button bfSlot="failed-action" size="sm" variant="tonal" (clicked)="retry()">Retry</bf-button>
+ * </bf-media-card>
+ * @summary Card with an image that loads, fades in or fails, plus a body and actions
  * @category Data display
- * @since 0.1.0
+ * @since 0.5.0
+ * @slot default The card body: a title (with an optional bfAction link or button) and text.
+ * @slot footer Content below the body, such as chips and buttons; it sits on the card's bottom edge.
+ * @slot failed-action An action shown under the failure message, such as a Retry button.
  */
-export declare class BfProgressComponent {
-  /** Completion in percent; clamped to 0–100. Without it (and without `indeterminate`) the bar
-   * shows 0 %. Ignored while `indeterminate`. */
-  readonly value: import("@angular/core").InputSignal<number | undefined>;
-  /** The amount of work is unknown: the native bar carries no value (assistive tech announces it
-   * as busy) and a stripe runs across the track, a static 40 % bar under reduced motion. */
-  readonly indeterminate: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** The value in words for assistive tech (`aria-valuetext`), such as "12 of 18 tasks"; the
-   * percentage is announced while it is empty. */
-  readonly valueText: import("@angular/core").InputSignal<string>;
-  /** Accessible name of the bar ("Atlas rebrand"). */
+export declare class BfMediaCardComponent implements BfActionHost {
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  /** URL of the image; empty shows the skeleton while `loading`, else an empty area. A new URL
+   * starts over: skeleton, fade-in, and a failed load is forgotten. */
+  readonly src: import("@angular/core").InputSignal<string>;
+  /** Alternative text of the image; empty marks it decorative. */
+  readonly alt: import("@angular/core").InputSignal<string>;
+  /** Aspect ratio of the image area: `16/9` (default), `4/3`, `1/1` or `3/4`. */
+  readonly aspect: import("@angular/core").InputSignal<BfMediaCardAspect>;
+  /** Shows the skeleton while there is no `src` yet (a picture that is still being made). */
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the failure message (the app could not make the picture); the app clears it. A load
+   * error of `src` shows it too, until `src` changes. */
+  readonly failed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Caption shown over the skeleton while loading ("Drawing…"); empty shows none and tells
+   * screen readers `provideBfLabels()`'s `loading` ("Loading"). */
+  readonly loadingLabel: import("@angular/core").InputSignal<string>;
+  /** Failure message; empty uses `provideBfLabels()`'s `imageLoadFailed`. */
+  readonly failedLabel: import("@angular/core").InputSignal<string>;
+  /** Adds a select button (a toggle with `aria-pressed`): the whole card toggles `selected`,
+   * or, with a `bfAction` in the card, a round check button in the image's corner does. */
+  readonly selectable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Whether the card is selected (a ring around it and a filled check); two-way bindable. Drawn
+   * only on a `selectable` card. */
+  readonly selected: import("@angular/core").ModelSignal<boolean>;
+  /** The card's name in its select button ("Select Starfall"); empty names it by the body's text. */
   readonly label: import("@angular/core").InputSignal<string>;
-  /** Bar height: sm 8 px (default), md 10 px. */
-  readonly size: import("@angular/core").InputSignal<BfProgressSize>;
-  /** Fill color by meaning. */
+  /** The user selected or cleared the card; emits the new `selected`. */
+  readonly changed: import("@angular/core").OutputEmitterRef<boolean>;
+  /** The image of `src` has loaded. */
+  readonly loaded: import("@angular/core").OutputEmitterRef<void>;
+  /** The image of `src` failed to load (the card shows the failure message). */
+  readonly errored: import("@angular/core").OutputEmitterRef<void>;
+  private readonly actions;
+  private readonly actionFocusVisible;
+  private readonly selectFocusVisible;
+  protected readonly bodyId: string;
+  protected readonly selectTextId: string;
+  protected readonly labelId: string;
+  protected readonly skeletonLayerClasses = "absolute inset-0 transition-opacity duration-slow ease-md motion-reduce:transition-none";
+  /** The image area's loading state, shared with bf-image-tile. */
+  private readonly image;
+  protected readonly state: import("@angular/core").Signal<ImageLoadPhase>;
+  /** The image, keyed by URL so a new `src` gets a fresh element (and a fresh fade). */
+  protected readonly imageSources: import("@angular/core").Signal<string[]>;
+  protected readonly skeletonShown: import("@angular/core").Signal<boolean>;
+  /** The body names the select button (no `label`): only then does it carry its id, so a plain
+   * card renders no counter-made id. */
+  protected readonly bodyNamesSelect: import("@angular/core").Signal<boolean>;
+  protected readonly failedText: import("@angular/core").Signal<string>;
+  /** The select button stretches over the card unless the card has its own bfAction. */
+  private readonly selectMode;
+  private readonly cue;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  protected readonly mediaClasses: import("@angular/core").Signal<string>;
+  protected readonly selectClasses: import("@angular/core").Signal<string>;
+  protected readonly discClasses: import("@angular/core").Signal<string>;
+  /** @internal Called by a `bfAction` in the card. */
+  registerAction(): () => void;
+  /** @internal Called by the card's `bfAction` on focus and blur. */
+  setActionFocusVisible(visible: boolean): void;
+  /** @internal The image's load event. */
+  imageLoaded(): void;
+  /** @internal The image's error event. */
+  imageFailed(): void;
+  /** @internal The skeleton layer's fade-out ended: it leaves the DOM (its shimmer stops). */
+  skeletonFaded(event: TransitionEvent): void;
+  /** @internal The select button was clicked. */
+  toggle(): void;
+  /** @internal The select button took focus. */
+  selectFocused(event: FocusEvent): void;
+  /** @internal The select button lost focus. */
+  selectBlurred(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfMediaCardComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfMediaCardComponent, "bf-media-card", never, {
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "alt": {
+      "alias": "alt";
+      "required": false;
+      "isSignal": true;
+    };
+    "aspect": {
+      "alias": "aspect";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "failed": {
+      "alias": "failed";
+      "required": false;
+      "isSignal": true;
+    };
+    "loadingLabel": {
+      "alias": "loadingLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "failedLabel": {
+      "alias": "failedLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectable": {
+      "alias": "selectable";
+      "required": false;
+      "isSignal": true;
+    };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selected": "selectedChange";
+    "changed": "changed";
+    "loaded": "loaded";
+    "errored": "errored";
+  }, never, ["[bfSlot=failed-action]", "*", "[bfSlot=footer]"], true, never>;
+}
+/**
+ * The aspect ratio of a `bf-image-tile`'s picture: square (default), 4:3, 16:9 or 3:4.
+ *
+ * @summary The four aspect ratios of an image tile's picture, square by default
+ * @since 0.5.0
+ */
+type BfImageTileAspect = '1/1' | '4/3' | '16/9' | '3/4';
+/**
+ * Where a `bf-image-tile`'s title and meta line sit: `below` the picture (default), or `overlay`,
+ * on a soft gradient over the bottom of the picture.
+ *
+ * @summary Where an image tile's caption sits, below the picture or over it
+ * @since 0.5.0
+ */
+type BfImageTileCaptionPlacement = 'below' | 'overlay';
+/**
+ * Small card for a grid of thumbnails: mostly picture, at a fixed aspect ratio (square by
+ * default), with a title and an optional meta line below it or, with `captionPlacement="overlay"`,
+ * on a soft gradient over its bottom. Without a picture yet it shows a placeholder (an icon and a
+ * text); while one loads a shimmering skeleton; the picture fades in when it arrives; a failed load
+ * shows a short message. Make the whole tile one link or button with a `bfAction` in its title, as
+ * on `bf-card`: it then lifts on hover, zooms the picture slightly and shows the focus ring.
+ * `selected` draws a ring. The title clamps to two lines and always takes two, so tiles in a grid
+ * row are as tall whatever their titles.
+ *
+ * @example
+ * <bf-image-tile [src]="model.thumbnail" [selected]="model.id === current()">
+ *   <h3><a bfAction [routerLink]="['/models', model.id]">{{ model.name }}</a></h3>
+ *   <span bfSlot="meta">{{ model.updated }}</span>
+ *   <bf-badge bfSlot="badge" variant="info">3 versions</bf-badge>
+ * </bf-image-tile>
+ * @summary Small card for thumbnail grids: a picture and title that act as one target
+ * @category Data display
+ * @since 0.5.0
+ * @slot default The title: a heading holding the tile's `bfAction` link or button.
+ * @slot meta A short line under the title, such as a date or a count.
+ * @slot badge A `bf-badge` in the picture's top start corner.
+ * @slot placeholder-icon The placeholder's icon, shown with its text while there is no picture.
+ */
+export declare class BfImageTileComponent implements BfActionHost {
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  /** URL of the picture; empty shows the placeholder, or the skeleton while `loading`. A new URL
+   * starts over: skeleton, fade-in, and a failed load is forgotten. */
+  readonly src: import("@angular/core").InputSignal<string>;
+  /** Alternative text of the picture; empty marks it decorative (the title names the tile). */
+  readonly alt: import("@angular/core").InputSignal<string>;
+  /** Aspect ratio of the picture: `1/1` (default), `4/3`, `16/9` or `3/4`. */
+  readonly aspect: import("@angular/core").InputSignal<BfImageTileAspect>;
+  /** Where the title and the meta line sit: `below` the picture (default) or `overlay`, on a
+   * gradient over its bottom. */
+  readonly captionPlacement: import("@angular/core").InputSignal<BfImageTileCaptionPlacement>;
+  /** Shows the skeleton while there is no `src` yet (a picture that is still being made). */
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the failure message (the app could not make the picture); the app clears it. A load
+   * error of `src` shows it too, until `src` changes. */
+  readonly failed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Marks the tile as the selected one: a ring around it, and "Selected" read before its title. */
+  readonly selected: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Placeholder text while there is no picture; empty uses `provideBfLabels()`'s
+   * `imageTileEmpty` ("No image yet"). */
+  readonly placeholderLabel: import("@angular/core").InputSignal<string>;
+  /** Failure message; empty uses `provideBfLabels()`'s `imageLoadFailed`. */
+  readonly failedLabel: import("@angular/core").InputSignal<string>;
+  /** The picture of `src` has loaded. */
+  readonly loaded: import("@angular/core").OutputEmitterRef<void>;
+  /** The picture of `src` failed to load (the tile shows the failure message). */
+  readonly errored: import("@angular/core").OutputEmitterRef<void>;
+  private readonly actions;
+  private readonly actionFocusVisible;
+  /** The picture's loading state, shared with bf-media-card. */
+  private readonly image;
+  protected readonly state: import("@angular/core").Signal<ImageLoadPhase>;
+  /** The picture, keyed by URL so a new `src` gets a fresh element (and a fresh fade). */
+  protected readonly imageSources: import("@angular/core").Signal<string[]>;
+  protected readonly skeletonShown: import("@angular/core").Signal<boolean>;
+  protected readonly skeletonLayerClasses = "absolute inset-0 transition-opacity duration-slow ease-md motion-reduce:transition-none";
+  protected readonly titleClasses: string;
+  protected readonly metaClasses = "text-caption text-text-muted empty:hidden";
+  protected readonly hasAction: import("@angular/core").Signal<boolean>;
+  private selectedIdValue;
+  /** The id of the selected state text, while `selected` is set. */
+  protected readonly selectedId: import("@angular/core").Signal<string | null>;
+  /** @internal The selected state starts the name of the tile's `bfAction`. */
+  readonly actionLabelPrefix: import("@angular/core").Signal<string | null>;
+  protected readonly placeholderText: import("@angular/core").Signal<string>;
+  protected readonly failedText: import("@angular/core").Signal<string>;
+  private readonly cue;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  protected readonly mediaClasses: import("@angular/core").Signal<string>;
+  protected readonly zoomClasses: import("@angular/core").Signal<"absolute inset-0" | "absolute inset-0 motion-safe:transition-[scale] motion-safe:duration-slow motion-safe:ease-md motion-safe:group-hover/tile:scale-105">;
+  protected readonly statusClasses: import("@angular/core").Signal<string>;
+  protected readonly captionClasses: import("@angular/core").Signal<string>;
+  /** @internal Called by a `bfAction` in the tile. */
+  registerAction(): () => void;
+  /** @internal Called by the tile's `bfAction` on focus and blur. */
+  setActionFocusVisible(visible: boolean): void;
+  /** @internal The picture's load event. */
+  imageLoaded(): void;
+  /** @internal The picture's error event. */
+  imageFailed(): void;
+  /** @internal The skeleton layer's fade-out ended: it leaves the DOM (its shimmer stops). */
+  skeletonFaded(event: TransitionEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfImageTileComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfImageTileComponent, "bf-image-tile", never, {
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "alt": {
+      "alias": "alt";
+      "required": false;
+      "isSignal": true;
+    };
+    "aspect": {
+      "alias": "aspect";
+      "required": false;
+      "isSignal": true;
+    };
+    "captionPlacement": {
+      "alias": "captionPlacement";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "failed": {
+      "alias": "failed";
+      "required": false;
+      "isSignal": true;
+    };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholderLabel": {
+      "alias": "placeholderLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "failedLabel": {
+      "alias": "failedLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "loaded": "loaded";
+    "errored": "errored";
+  }, never, ["[bfSlot=placeholder-icon]", "[bfSlot=badge]", "*", "[bfSlot=meta]"], true, never>;
+}
+/**
+ * The track height of a `bf-progress`: sm or md.
+ *
+ * @summary The two track heights of a progress bar, thin and regular
+ * @since 0.1.0
+ */
+type BfProgressSize = 'sm' | 'md';
+/**
+ * The fill colour of a `bf-progress`: primary, success, warning or danger.
+ *
+ * @summary The four fill colours of a progress bar, from primary to danger
+ * @since 0.1.0
+ */
+type BfProgressTone = 'primary' | 'success' | 'warning' | 'danger';
+/**
+ * Progress bar for completion and quotas, determinate by default, or `indeterminate` while the
+ * amount of work is unknown.
+ *
+ * @example
+ * <bf-progress [value]="68" label="Atlas rebrand" valueText="12 of 18 tasks" />
+ * <bf-progress indeterminate label="Uploading" />
+ * @summary Progress bar in two sizes and four tones for completion, quotas and unknown waits
+ * @category Data display
+ * @since 0.1.0
+ */
+export declare class BfProgressComponent {
+  /** Completion in percent; clamped to 0–100. Without it (and without `indeterminate`) the bar
+   * shows 0 %. Ignored while `indeterminate`. */
+  readonly value: import("@angular/core").InputSignal<number | undefined>;
+  /** The amount of work is unknown: the native bar carries no value (assistive tech announces it
+   * as busy) and a stripe runs across the track, a static 40 % bar under reduced motion. */
+  readonly indeterminate: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** The value in words for assistive tech (`aria-valuetext`), such as "12 of 18 tasks"; the
+   * percentage is announced while it is empty. */
+  readonly valueText: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the bar ("Atlas rebrand"). */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Bar height: sm 8 px (default), md 10 px. */
+  readonly size: import("@angular/core").InputSignal<BfProgressSize>;
+  /** Fill color by meaning. */
   readonly tone: import("@angular/core").InputSignal<BfProgressTone>;
   readonly percent: import("@angular/core").Signal<number>;
   readonly classes: import("@angular/core").Signal<string>;
@@ -4056,6 +5009,61 @@ export declare class BfActionDirective {
   static ɵfac: i0.ɵɵFactoryDeclaration<BfActionDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<BfActionDirective, "a[bfAction], button[bfAction]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Fades an image in when it has loaded instead of letting it pop in line by line: put
+ * `bfFadeIn` on the `<img>`. The image stays transparent until its `load` (or `error`) event,
+ * then fades in over 260 ms (`duration-slow`), at once under `prefers-reduced-motion: reduce`. An
+ * image that is already loaded when it renders (from the cache) shows straight away. Reserve its
+ * space (`width`/`height` attributes or an aspect ratio) so the layout does not move when it
+ * arrives; for a placeholder while it loads, put a `bf-skeleton` behind it.
+ *
+ * @example
+ * <img bfFadeIn [src]="cover.url" alt="Game cover" width="640" height="360" />
+ * @summary Fades an image in once it has loaded instead of popping in
+ * @since 0.5.0
+ */
+export declare class BfFadeInDirective {
+  private readonly image;
+  /** True once the image has loaded or failed: it is opaque from then on. */
+  protected readonly shown: import("@angular/core").WritableSignal<boolean>;
+  constructor();
+  /**
+   * Shows the image: its load or error event.
+   *
+   * @internal
+   */
+  show(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfFadeInDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<BfFadeInDirective, "img[bfFadeIn]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Glides the items of an app's list or grid to their new place when items are added, removed or
+ * reordered, instead of letting them jump (the FLIP technique). Put `bfMotionList` on the element
+ * whose direct children are the items, usually the one around an `@for`. Each item remembers
+ * where it was; after the DOM changes, every item that moved slides from its old place to its new
+ * one over 200 ms (`--bf-duration-layout`, on the settle curve). Pair it with Angular's
+ * `animate.enter="motion-safe:animate-item-enter"` and
+ * `animate.leave="motion-safe:animate-item-leave"` on the items, so new items fade and rise in and
+ * removed ones fade out before the rest close the gap. Nothing moves under
+ * `prefers-reduced-motion: reduce`, and nothing glides when the container is resized. It moves
+ * items within one container: an item moved to another list leaves one and enters the other.
+ *
+ * @example
+ * <ul bfMotionList class="grid grid-cols-3 gap-4">
+ *   @for (card of cards(); track card.id) {
+ *     <li animate.enter="motion-safe:animate-item-enter" animate.leave="motion-safe:animate-item-leave">
+ *       <app-card [card]="card" />
+ *     </li>
+ *   }
+ * </ul>
+ * @summary Glides the items of a list or grid to their new place when it changes
+ * @since 0.5.0
+ */
+export declare class BfMotionListDirective {
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfMotionListDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<BfMotionListDirective, "[bfMotionList]", never, {}, {}, never, never, true, never>;
+}
 /** What a `bf-tab-panel` reads from its `bf-tab-group`; a token so the two files never import each
  * other. Internal: not exported from the package. */
 interface BfTabGroupHost {
@@ -4108,6 +5116,10 @@ export declare class BfTabPanelComponent {
   readonly isSelected: import("@angular/core").Signal<boolean>;
   /** Latches once the panel has been shown. */
   private readonly visited;
+  /** True while this panel is shown because the selection moved to it (not the panel shown on
+   * the first render): it fades in. */
+  protected readonly switchedTo: import("@angular/core").WritableSignal<boolean>;
+  protected readonly motionClasses: import("@angular/core").Signal<"" | "motion-safe:animate-panel-in">;
   /** Whether the `ng-template` content exists: while selected, or once visited with `keepAlive`.
    * `visited` is read first on every run, so the latch sees each selection. */
   protected readonly rendered: import("@angular/core").Signal<boolean>;
@@ -4173,6 +5185,8 @@ export declare class BfTabGroupComponent implements BfTabGroupHost {
   /** The `bf-tab-panel` children, in document order. */
   readonly panels: import("@angular/core").Signal<readonly BfTabPanelComponent[]>;
   private readonly tabs;
+  private readonly list;
+  private readonly indicator;
   private readonly labels;
   private readonly defaults;
   /** The size in effect: `size`, else the app's `controlSize` default. */
@@ -4187,8 +5201,14 @@ export declare class BfTabGroupComponent implements BfTabGroupHost {
   /** The panel whose tab owns the roving tab stop: the shown one, else (it is disabled) the first
    * enabled one. */
   protected readonly tabStop: import("@angular/core").Signal<BfTabPanelComponent | undefined>;
+  /** Whether the sliding underline has been measured and placed, so it, not the tab, draws the
+   * selection. */
+  private readonly placed;
+  /** The classes of the sliding underline: hidden until placed, `text-disabled` on a disabled
+   * selected tab. */
+  protected readonly indicatorClasses: import("@angular/core").Signal<string>;
   protected readonly scrollerClasses = "-m-1 overflow-x-auto p-1";
-  protected readonly listClasses = "flex w-max min-w-full border-b border-border";
+  protected readonly listClasses = "relative flex w-max min-w-full border-b border-border";
   protected readonly badgeClasses = "flex h-5 min-w-5 shrink-0 items-center justify-center rounded-control bg-primary px-1.5 text-micro font-bold text-on-primary";
   /**
    * The classes of a panel's tab.
@@ -4302,7 +5322,7 @@ export declare class BfPageHeaderComponent {
  * @summary Dense row of search, filters, view switch, result count and actions
  * @category Actions
  * @since 0.3.1
- * @slot default The search field and the filters (bf-input, bf-select, bf-chip-group), in order.
+ * @slot default The search field and the filters (bf-input, bf-chip-group, bf-select from /overlay), in order.
  * @slot view A view switch after the filters, such as a bf-segmented of list and grid.
  * @slot actions The trailing actions, kept together at the inline end of the row, beside the status.
  */
@@ -4508,6 +5528,11 @@ export declare class BfTableComponent<T = unknown> {
   protected readonly labels: import("@bitforgehq/ui").BfLabels;
   private readonly defaults;
   private readonly table;
+  /** The Sort by select from `provideBfSelect()` (`BF_TABLE_SORT_SELECT`); null renders the
+   * native one. */
+  protected readonly sortSelectType: import("@angular/core").Type<unknown> | null;
+  /** Where the provided Sort by select goes; set only while the stack bar shows it. */
+  private readonly sortSelectAnchor;
   private readonly cells;
   private readonly id;
   /** The caption's id, which names the table while it can stack. */
@@ -4548,6 +5573,7 @@ export declare class BfTableComponent<T = unknown> {
   protected readonly selectBodyClasses: import("@angular/core").Signal<string>;
   /** A body cell's height step, with the coarse-pointer height unless the table stacks there. */
   private readonly bodyHeight;
+  constructor();
   /**
    * The classes of a column's header cell.
    * @internal
@@ -4669,6 +5695,19 @@ export declare class BfTableComponent<T = unknown> {
     "selection": "selectionChange";
   }, ["cells"], ["[bfSlot=empty]"], true, never>;
 }
+/**
+ * The component a stacked `bf-table` renders as its Sort by select; `null` (the default) keeps the
+ * built-in native `<select>`. `provideBfSelect()` from `@bitforgehq/ui/overlay` sets it to the
+ * styled `bf-select`, so the core entry never imports the overlay entry. A component given here
+ * must take the inputs `label` (string), `options` (`BfSelectOption<string>[]`) and `value`
+ * (string) and emit the picked value from the output `changed`. The table adds its layout classes
+ * to the component's host with `classList`, so the component must not overwrite its host
+ * `className` or `class` attribute directly.
+ *
+ * @summary The component a stacked table renders as its Sort by select
+ * @since 0.5.0
+ */
+export declare const BF_TABLE_SORT_SELECT: InjectionToken<Type<unknown> | null>;
 /**
  * The layout of a `bf-description-list`: `rows` (label beside value, divided) or `grid` (tiles).
  *
@@ -5132,7 +6171,11 @@ export declare class BfSidebarComponent {
    * screen readers and becomes a tooltip. A `bf-sidebar-toggle` inside flips it; bind
    * `[(collapsed)]` to keep it in your state. */
   readonly collapsed: import("@angular/core").ModelSignal<boolean>;
+  private readonly defaults;
   private readonly labels;
+  /** True after the first render: from then on collapsing and expanding animate.
+   * @internal */
+  readonly animated: import("@angular/core").WritableSignal<boolean>;
   /** The `nav` element's id, which `bf-sidebar-toggle` points `aria-controls` at.
    * @internal */
   readonly navId: string;
@@ -5140,7 +6183,7 @@ export declare class BfSidebarComponent {
   protected readonly name: import("@angular/core").Signal<string>;
   private readonly width;
   readonly hostClasses: import("@angular/core").Signal<string>;
-  protected readonly regionClasses: import("@angular/core").Signal<string>;
+  constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<BfSidebarComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<BfSidebarComponent, "bf-sidebar", never, {
     "label": {
@@ -5210,7 +6253,6 @@ export declare class BfNavGroupComponent {
   /** The heading's id, referenced by the group's `aria-labelledby`. */
   protected readonly headingId: string;
   private readonly form;
-  readonly hostClasses: import("@angular/core").Signal<string>;
   protected readonly headingClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<BfNavGroupComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<BfNavGroupComponent, "bf-nav-group", never, {
@@ -5257,11 +6299,17 @@ export declare class BfNavItemComponent {
   /** True while the enclosing sidebar is collapsed to an icon rail. */
   protected readonly collapsed: import("@angular/core").Signal<boolean>;
   private readonly form;
+  /** True in a sidebar (or on its own), where the item can collapse to an icon rail. */
+  protected readonly railable: import("@angular/core").Signal<boolean>;
+  /** True once the enclosing sidebar has rendered: collapsing and expanding animate. */
+  private readonly animated;
   /** The size in effect: `size`, else the app's `controlSize` default. */
   private readonly resolvedSize;
   readonly classes: import("@angular/core").Signal<string>;
+  private readonly fade;
   protected readonly labelClasses: import("@angular/core").Signal<string>;
   protected readonly badgeClasses: import("@angular/core").Signal<string>;
+  protected readonly dotClasses: import("@angular/core").Signal<string>;
   /** The badge as screen readers hear it after the label. */
   protected readonly badgeAnnouncement: import("@angular/core").Signal<string>;
   /** Collapsed, the label as the pointer tooltip; else the consumer's own `title`, if any. */
@@ -5430,15 +6478,27 @@ export declare class BfSkeletonComponent {
 /** One slot of the page row: a page number, or a gap before or after the current page's run. */
 type BfPaginationItem = number | 'gap-start' | 'gap-end';
 type BfPaginationDirection = 'previous' | 'next';
+/**
+ * Writes a compact `bf-pagination`'s position text from the current page and the page count, such
+ * as "v3 of 7" for page 3 of 7.
+ *
+ * @summary Function that writes a compact pager's position text, such as "v3 of 7"
+ * @since 0.5.0
+ */
+type BfPaginationPositionLabel = (page: number, count: number) => string;
 /**
  * Page navigation for a long list or table: Previous and Next buttons around the page numbers,
  * the current one marked, the hidden runs shown as an ellipsis. `compact` shows "Page 3 of 12"
  * between the arrows instead, for narrow screens. The page count comes from `pageCount`, or from
- * `total` and `pageSize`; the consumer shows the rows of `page`.
+ * `total` and `pageSize`; the consumer shows the rows of `page`. A compact pagination with its own
+ * `positionLabel`, `previousLabel` and `nextLabel` steps through anything numbered, such as the
+ * versions of a model ("‹ v3 of 7 ›").
  *
  * @example
  * <bf-pagination [(page)]="page" [pageCount]="12" />
  * <bf-pagination [(page)]="page" [total]="invoices().length" [pageSize]="10" compact />
+ * <bf-pagination [(page)]="version" [pageCount]="7" compact [positionLabel]="versionOf"
+ *   label="Versions" previousLabel="Previous version" nextLabel="Next version" />
  * @summary Previous, next and numbered page buttons for a long list or table
  * @category Navigation
  * @since 0.3.1
@@ -5456,6 +6516,16 @@ export declare class BfPaginationComponent {
   readonly siblings: import("@angular/core").InputSignalWithTransform<number, unknown>;
   /** Shows "Page 3 of 12" between the arrows instead of the page buttons, for narrow screens. */
   readonly compact: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Writes the compact position text from the page and the count, such as
+   * "v3 of 7"; unset uses `provideBfLabels()`'s `pageOf`
+   * ("Page 3 of 12"). Only used with `compact`. */
+  readonly positionLabel: import("@angular/core").InputSignal<BfPaginationPositionLabel | undefined>;
+  /** Accessible name of the previous button, such as "Previous version"; empty falls back to
+   * `provideBfLabels()`'s `previousPage` ("Previous page"). */
+  readonly previousLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the next button, such as "Next version"; empty falls back to
+   * `provideBfLabels()`'s `nextPage` ("Next page"). */
+  readonly nextLabel: import("@angular/core").InputSignal<string>;
   /** Button height step: sm 32, md 40, lg 48 px (44 px hit area under a coarse pointer); unset
    * follows `provideBfDefaults()` (`controlSize`, `md` by default). */
   readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
@@ -5468,6 +6538,10 @@ export declare class BfPaginationComponent {
   protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
   /** The navigation's name: `label`, else the `pagination` label. */
   protected readonly name: import("@angular/core").Signal<string>;
+  protected readonly previousName: import("@angular/core").Signal<string>;
+  protected readonly nextName: import("@angular/core").Signal<string>;
+  /** The compact position text: `positionLabel`, else the `pageOf` label. */
+  protected readonly position: import("@angular/core").Signal<string>;
   /** The page count in effect, at least 1: `pageCount`, else `total` over `pageSize`. */
   protected readonly count: import("@angular/core").Signal<number>;
   /** The page shown as current: `page`, clamped to 1…count. */
@@ -5519,6 +6593,21 @@ export declare class BfPaginationComponent {
       "required": false;
       "isSignal": true;
     };
+    "positionLabel": {
+      "alias": "positionLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "previousLabel": {
+      "alias": "previousLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "nextLabel": {
+      "alias": "nextLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "size": {
       "alias": "size";
       "required": false;
@@ -6014,6 +7103,215 @@ export declare class BfStepComponent {
     };
   }, {}, never, ["*"], true, never>;
 }
+/** What a `bf-chat-message` asks of the `bf-chat-thread` around it. */
+interface BfChatThreadHost {
+  /** True once the thread's first render is done: a message created after that animates in, the
+   * ones the thread opened with do not. */
+  hasSettled(): boolean;
+}
+/**
+ * Provided by `bf-chat-thread` so a `bf-chat-message` knows whether it arrived after the first
+ * render, without `chat-message.component.ts` importing `chat-thread.component.ts`.
+ */
+declare const BF_CHAT_THREAD: InjectionToken<BfChatThreadHost>;
+/**
+ * The scrolling message list of a chat: a `role="log"` around `bf-chat-message` elements that
+ * stays pinned to the newest message while text arrives. When the user scrolls up it stops
+ * following and shows a "Jump to latest" button, which scrolls back down (smoothly, at once under
+ * reduced motion) and follows again. While a message streams the log is `aria-busy`, so a screen
+ * reader announces the reply once it is complete, not piece by piece. Messages added after the
+ * first render rise and fade in; the ones it opens with do not. Give it a height (or `flex-1` in a
+ * column): it scrolls inside.
+ *
+ * @example
+ * <bf-chat-thread class="h-[32rem]">
+ *   @for (message of messages(); track message.id) {
+ *     <bf-chat-message [role]="message.role" [streaming]="message.streaming">{{ message.text }}</bf-chat-message>
+ *   }
+ * </bf-chat-thread>
+ * @summary Scrolling chat message log that follows new text and offers a jump to latest
+ * @category Data display
+ * @since 0.5.0
+ * @slot default The messages, each a `bf-chat-message` (in order, oldest first).
+ * @slot jump-icon An icon before the "Jump to latest" text, such as an arrow down.
+ */
+export declare class BfChatThreadComponent implements BfChatThreadHost {
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  private readonly document;
+  /** The log's accessible name; empty uses the `chatThread` label ("Conversation"). */
+  readonly label: import("@angular/core").InputSignal<string>;
+  private readonly scroller;
+  private readonly content;
+  private readonly messages;
+  /** Pinned to the newest message: new text scrolls the log down. */
+  protected readonly following: import("@angular/core").WritableSignal<boolean>;
+  /** Bumped when the content or the log changes size, so the follow scroll runs again. */
+  private readonly resized;
+  private settled;
+  /** A smooth jump is under way: its own scroll events neither stop nor restart the follow. */
+  private jumping;
+  private jumpTimer;
+  /** A finger is on the log: the follow does not move the content under it. */
+  protected touching: boolean;
+  protected readonly name: import("@angular/core").Signal<string>;
+  /** A message is still streaming, so the log holds its announcement until it is done. */
+  protected readonly busy: import("@angular/core").Signal<boolean>;
+  protected readonly jumpClasses: string;
+  constructor();
+  /**
+   * True once the first render is done, so only later messages animate in.
+   * @internal
+   */
+  hasSettled(): boolean;
+  /** Scrolls to the newest message (smoothly, at once under reduced motion) and follows it again. */
+  jumpToLatest(): void;
+  /** @internal */
+  onScroll(): void;
+  /** @internal */
+  onWheel(event: WheelEvent): void;
+  /** @internal */
+  onKeydown(event: KeyboardEvent): void;
+  /**
+   * Ends a smooth jump and catches up with text that arrived during it.
+   * @internal
+   */
+  endJump(): void;
+  /** The user scrolls up: stop at once, so the next follow scroll cannot pull the log back. */
+  private stopFollowing;
+  private clearJumpTimer;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfChatThreadComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfChatThreadComponent, "bf-chat-thread", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["messages"], ["*", "[bfSlot=jump-icon]"], true, never>;
+}
+/**
+ * Who wrote a `bf-chat-message`: `user` (a tinted bubble at the inline end) or `assistant` (full
+ * width, no bubble).
+ *
+ * @summary Who wrote a chat message, the user or the assistant
+ * @since 0.5.0
+ */
+type BfChatMessageRole = 'user' | 'assistant';
+/**
+ * How a `bf-chat-message` ended: `done` (the default, no status line), `stopped` (the user
+ * stopped the reply) or `failed` (it did not arrive or was not sent).
+ *
+ * @summary How a chat message ended: done, stopped by the user, or failed
+ * @since 0.5.0
+ */
+type BfChatMessageStatus = 'done' | 'stopped' | 'failed';
+/**
+ * One message of a `bf-chat-thread`. A `user` message is a tinted bubble at the inline end; an
+ * `assistant` message is full width with no bubble. The default slot is the message text, styled
+ * as prose (`bfProse`) for markdown the app renders. An optional header names the `author` and
+ * the `time`. While `streaming`, a caret pulses at the end of the text and the message is
+ * `aria-busy`, so the thread announces it once, when it is done. A `stopped` or `failed` message
+ * shows a short status line, with the `action` slot beside it (a Retry button).
+ *
+ * @example
+ * <bf-chat-message role="assistant" author="Assistant" [streaming]="writing()">
+ *   <div [innerHTML]="replyHtml()"></div>
+ * </bf-chat-message>
+ * <bf-chat-message role="user" author="You" time="2026-11-06T09:30:00Z">Three names for a cafe?</bf-chat-message>
+ * @summary One chat message, a user bubble or a full-width assistant reply that can stream
+ * @category Data display
+ * @since 0.5.0
+ * @slot default The message text: plain text or the app's rendered markdown, styled as prose.
+ * @slot content Inline content below the text, such as cards, images or chips (not styled as prose).
+ * @slot action Beside the status line, such as a Retry button.
+ */
+export declare class BfChatMessageComponent {
+  private readonly labels;
+  private readonly appLocale;
+  private readonly thread;
+  /** Who wrote it: `user` (a bubble at the inline end) or `assistant` (full width, no bubble). */
+  readonly role: import("@angular/core").InputSignal<BfChatMessageRole>;
+  /** Whose message it is, shown in the header, such as "You" or the assistant's name; empty
+   * shows none. */
+  readonly author: import("@angular/core").InputSignal<string>;
+  /** When it was written: a Date or an ISO 8601 string, shown as hours and minutes; empty or
+   * invalid shows no time. */
+  readonly time: import("@angular/core").InputSignal<string | Date | null>;
+  /** Shown in place of the formatted time, such as "just now"; the `time` element's `datetime`
+   * keeps the exact value. */
+  readonly timeText: import("@angular/core").InputSignal<string>;
+  /** The text is still arriving: a caret pulses at its end and the message is `aria-busy`. */
+  readonly streaming: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** How it ended: `done` (no status line), `stopped` or `failed`. */
+  readonly status: import("@angular/core").InputSignal<BfChatMessageStatus>;
+  /** Shown in place of the built-in status line (`chatMessageStopped`, `chatMessageFailed`),
+   * such as the error the server returned. */
+  readonly statusMessage: import("@angular/core").InputSignal<string>;
+  /** Rises and fades in: only for a message added to a thread after its first render. */
+  protected readonly entering: import("@angular/core").WritableSignal<boolean>;
+  private readonly date;
+  /** The `time` element's machine value: the ISO string as given, a Date's ISO string, else null. */
+  protected readonly datetime: import("@angular/core").Signal<string | null>;
+  /** The visible time: `timeText`, else the time formatted as hours and minutes. */
+  protected readonly timeLabel: import("@angular/core").Signal<string>;
+  /** The status line's text: `statusMessage`, else the label of `stopped` or `failed`. */
+  protected readonly statusLine: import("@angular/core").Signal<string>;
+  protected readonly statusClasses: import("@angular/core").Signal<string>;
+  protected readonly hostClasses: import("@angular/core").Signal<string>;
+  protected readonly bodyClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfChatMessageComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfChatMessageComponent, "bf-chat-message", never, {
+    "role": {
+      "alias": "role";
+      "required": false;
+      "isSignal": true;
+    };
+    "author": {
+      "alias": "author";
+      "required": false;
+      "isSignal": true;
+    };
+    "time": {
+      "alias": "time";
+      "required": false;
+      "isSignal": true;
+    };
+    "timeText": {
+      "alias": "timeText";
+      "required": false;
+      "isSignal": true;
+    };
+    "streaming": {
+      "alias": "streaming";
+      "required": false;
+      "isSignal": true;
+    };
+    "status": {
+      "alias": "status";
+      "required": false;
+      "isSignal": true;
+    };
+    "statusMessage": {
+      "alias": "statusMessage";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*", "[bfSlot=content]", "[bfSlot=action]"], true, never>;
+}
+/**
+ * Styles rendered markdown inside its element: headings, paragraphs, lists, links, inline code,
+ * code blocks, quotes and rules, through the semantic tokens only (so a theme override restyles
+ * it). The app renders the markdown to HTML itself (and sanitises it); `bfProse` only styles it.
+ * A `bf-chat-message` body is a `bfProse` element already.
+ *
+ * @example
+ * <article bfProse [innerHTML]="renderedMarkdown()"></article>
+ * @summary Styles rendered markdown with the library tokens: headings, lists, code and quotes
+ * @since 0.5.0
+ */
+export declare class BfProseDirective {
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfProseDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<BfProseDirective, "[bfProse]", never, {}, {}, never, never, true, never>;
+}
 /** An error as a field reads it: its kind and optional message; limit fields (`minLength`,
  * `context.requiredLength`, …) are read through type guards by `bfValidationMessage`. */
 type FieldErrorLike = Pick<ValidationError, 'kind' | 'message'>;
@@ -6040,6 +7338,223 @@ declare function fieldErrorMessageId(id: string, errorText: string, showError: b
  * Hydration-stable ids are decided before 1.0.
  */
 declare function uniqueId(prefix: string): string;
+/**
+ * Internal native single-choice dropdown styled like the text field, with a placeholder option and
+ * Signal Forms binding. Generic over the option value (a string by default); `null` means nothing
+ * is selected.
+ *
+ * @example
+ * <bf-native-select label="Project" placeholder="Pick a project" [options]="projects" [(value)]="projectId" />
+ * <bf-native-select label="Team" placeholder="Pick a team" [options]="teams" [formField]="task.teamId" />
+ * @summary Native single-choice dropdown styled like the text field, with Signal Forms binding
+ * @category Forms
+ * @since 0.1.0
+ */
+declare class BfNativeSelectComponent<T = string> implements FormValueControl<T | null> {
+  /** The selected option's value, `null` while nothing is selected; two-way bindable and bound by
+   * `[formField]`. */
+  readonly value: import("@angular/core").ModelSignal<T | null>;
+  /** The options to choose from. */
+  readonly options: import("@angular/core").InputSignal<readonly BfSelectOption<T>[]>;
+  /** Equality for matching `value` to an option (default `Object.is`); pass one for object values. */
+  readonly compareWith: import("@angular/core").InputSignal<BfCompareWith<T>>;
+  /** Height step: sm 32, md 40, lg 48 px; unset follows `provideBfDefaults()` (`fieldSize`, `md`
+   * by default). */
+  readonly size: import("@angular/core").InputSignal<BfSize | undefined>;
+  /** Visible label above the control. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /**
+   * Accessible name when no visible label is rendered (e.g. a table filter). Ignored when `label`
+   * is set.
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Id(s) of the element(s) that name the field when no visible label is rendered. Ignored when
+   * `label` is set.
+   */
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string>;
+  /** Disabled first option shown while nothing is selected. */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** Helper text under the control. */
+  readonly helpText: import("@angular/core").InputSignal<string>;
+  /** Explicit error text; takes precedence over Signal Forms errors. */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /** Disables the control. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shows the value but blocks changes; the select stays focusable and exposes `aria-readonly`. */
+  readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Marks the control required. */
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Field validity from Signal Forms. */
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Whether the user has left the field. */
+  readonly touched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Validation errors from Signal Forms. */
+  readonly errors: import("@angular/core").InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
+  /** Native name attribute. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** Control id; generated when not set. */
+  readonly id: import("@angular/core").InputSignal<string>;
+  /** Emitted with the chosen value after a user change (never `null`). */
+  readonly changed: import("@angular/core").OutputEmitterRef<T>;
+  /** Emitted when the control gains focus. */
+  readonly focused: import("@angular/core").OutputEmitterRef<FocusEvent>;
+  /** Emitted when the control loses focus. */
+  readonly blurred: import("@angular/core").OutputEmitterRef<FocusEvent>;
+  /** Emitted on blur so Signal Forms marks the field touched. */
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  private readonly el;
+  private readonly defaults;
+  /** The size in effect: `size`, else the app's `fieldSize` default. */
+  protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
+  readonly wrapperClasses: import("@angular/core").Signal<string>;
+  /** Index of the option matching `value`, `-1` while nothing (or `null`) is selected. */
+  readonly selectedIndex: import("@angular/core").Signal<number>;
+  readonly showEmptyOption: import("@angular/core").Signal<boolean>;
+  private readonly labels;
+  readonly errorText: import("@angular/core").Signal<string>;
+  readonly showError: import("@angular/core").Signal<boolean>;
+  readonly describedBy: import("@angular/core").Signal<string | null>;
+  /** `aria-errormessage`: the error paragraph while `aria-invalid` is set. */
+  readonly errorMessageId: import("@angular/core").Signal<string | null>;
+  /**
+   * `aria-label` value: only when there is no visible label, so the label stays the sole accessible
+   * name.
+   */
+  readonly ariaLabelAttr: import("@angular/core").Signal<string | null>;
+  /** `aria-labelledby` value, under the same rule as `ariaLabelAttr`. */
+  readonly ariaLabelledbyAttr: import("@angular/core").Signal<string | null>;
+  readonly classes: import("@angular/core").Signal<string>;
+  /** Native `value` of an option: its value for a primitive, its index for an object. */
+  protected readonly key: typeof choiceKey;
+  /**
+   * Focuses the native select; Signal Forms calls it from `focusBoundControl()`.
+   * @param options Passed on to the native `focus()`, such as `{ preventScroll: true }`.
+   */
+  focus(options?: FocusOptions): void;
+  /**
+   * Read-only: no picker on a mouse press. Cancelling the press also cancels its focus, so the
+   * select is focused explicitly, like any other read-only control. Touch screens open the
+   * platform picker without a cancellable press; a choice made there is reverted by `onChange`.
+   * @internal
+   */
+  onMousedown(event: MouseEvent): void;
+  /**
+   * Read-only: no picker or value change from the keyboard (arrows, Enter, Space, F4, type-ahead).
+   * @internal
+   */
+  onKeydown(event: KeyboardEvent): void;
+  /**
+   * Writes the chosen option's value to the model and emits `changed`; while read-only, restores
+   * the shown option instead.
+   * @internal
+   */
+  onChange(el: HTMLSelectElement): void;
+  /**
+   * Marks the field touched and emits `blurred`.
+   * @internal
+   */
+  onBlur(event: FocusEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfNativeSelectComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfNativeSelectComponent<any>, "bf-native-select", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": true;
+      "isSignal": true;
+    };
+    "compareWith": {
+      "alias": "compareWith";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "helpText": {
+      "alias": "helpText";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorMessage": {
+      "alias": "errorMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+    "errors": {
+      "alias": "errors";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "id": {
+      "alias": "id";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "changed": "changed";
+    "focused": "focused";
+    "blurred": "blurred";
+    "touch": "touch";
+  }, never, never, true, never>;
+}
 /** One plain date's parts; `month` is 1–12. */
 interface CalendarDate {
   readonly year: number;
@@ -6112,6 +7627,9 @@ interface BfNavHost {
   readonly layout: BfNavLayout;
   /** True while the sidebar is collapsed to an icon rail; always false in a top nav. */
   readonly collapsed: Signal<boolean>;
+  /** True once the host has rendered, so collapsing and expanding animate but the first render
+   * (a restored collapsed state) does not; always false in a top nav. */
+  readonly animated: Signal<boolean>;
   /** The id of the host's `nav` element (for a toggle's `aria-controls`); null in a top nav. */
   readonly navId: string | null;
   /** Writes the sidebar's `collapsed` model, as a user change; does nothing in a top nav. */
@@ -6132,4 +7650,4 @@ declare const BF_NAV: InjectionToken<BfNavHost>;
 declare function resetBfDocument(document: Document): void;
 /** Runs `resetBfDocument()` when the environment injector that holds it is destroyed. Internal. */
 declare function provideBfDocumentReset(): EnvironmentProviders;
-export { type BfAlertVariant, type BfAppFrameBreakpoint, type BfAppFrameContentWidth, type BfAutocapitalize, type BfAvatarSize, type BfAvatarVariant, type BfBadgeAppearance, type BfBadgeEmphasis, type BfBadgeVariant, type BfButtonAppearance, type BfButtonSize, type BfButtonType, type BfButtonVariant, type BfCalendarDisabledDate, type BfCalendarWeekday, type BfCardPadding, type BfCardVariant, type BfChipGroupMode, type BfChipVariant, type BfColorScheme, type BfCompareWith, type BfDefaults, type BfDefaultsOptions, type BfDescriptionListLayout, type BfEmptyStateHeading, type BfEmptyStateHeadingLevel, type BfEnterKeyHint, type BfFieldControlState, type BfFieldSize, type BfIconButtonVariant, type BfInputAutocapitalize, type BfInputEnterKeyHint, type BfInputInputMode, type BfInputMode, type BfInputType, type BfLabels, type BfLabelsOverrides, type BfPageHeaderHeadingLevel, type BfProgressSize, type BfProgressTone, type BfRadioGroupOrientation, type BfRadioOption, type BfSegmentOption, type BfSegmentedSize, type BfSelectOption, type BfSize, type BfSkeletonShape, type BfSpinnerSize, type BfStatAppearance, type BfStatTrend, type BfStatTrendIntent, type BfStatVariant, type BfStepHeadingLevel, type BfTabBarController, type BfTabBarHost, type BfTabLinks, type BfTableAlign, type BfTableCellContext, type BfTableColumn, type BfTableColumnAlign, type BfTableRowKey, type BfTableSort, type BfTableSortDirection, type BfTableStack, type BfTimelineTone, type BfToggleLabelPosition, type BfValidationMessages, BUTTON_CLASSES as ɵBF_BUTTON_CLASSES, ICON_BUTTON_CLASSES as ɵBF_ICON_BUTTON_CLASSES, BF_NAV as ɵBF_NAV, type BfNavHost as ɵBfNavHost, FIELD_BOX as ɵFIELD_BOX, FIELD_ICON_END as ɵFIELD_ICON_END, FIELD_ICON_START as ɵFIELD_ICON_START, FIELD_PADDING_END as ɵFIELD_PADDING_END, FIELD_PADDING_START as ɵFIELD_PADDING_START, PILL_HIT as ɵPILL_HIT, compareIso as ɵcompareIso, createMemoryColorSchemeStorage as ɵcreateMemoryColorSchemeStorage, daysInMonth as ɵdaysInMonth, fieldDescribedBy as ɵfieldDescribedBy, fieldErrorMessageId as ɵfieldErrorMessageId, fieldErrorText as ɵfieldErrorText, fieldShowsError as ɵfieldShowsError, formatIsoDate as ɵformatIsoDate, localIsoDate as ɵlocalIsoDate, parseIsoDate as ɵparseIsoDate, provideBfDocumentReset as ɵprovideBfDocumentReset, uniqueId as ɵuniqueId, validIsoDate as ɵvalidIsoDate };
+export { type BfAlertVariant, type BfAppFrameBreakpoint, type BfAppFrameContentWidth, type BfAutocapitalize, type BfAvatarSize, type BfAvatarVariant, type BfBadgeAppearance, type BfBadgeEmphasis, type BfBadgeVariant, type BfButtonAppearance, type BfButtonSize, type BfButtonType, type BfButtonVariant, type BfCalendarDisabledDate, type BfCalendarWeekday, type BfCardPadding, type BfCardVariant, type BfChatMessageRole, type BfChatMessageStatus, type BfChipGroupMode, type BfChipVariant, type BfColorScheme, type BfCompareWith, type BfDefaults, type BfDefaultsOptions, type BfDescriptionListLayout, type BfEmptyStateHeading, type BfEmptyStateHeadingLevel, type BfEnterKeyHint, type BfFieldControlState, type BfFieldSize, type BfFileInputVariant, type BfIconButtonVariant, type BfImageInputShape, type BfImageTileAspect, type BfImageTileCaptionPlacement, type BfInputAutocapitalize, type BfInputEnterKeyHint, type BfInputInputMode, type BfInputMode, type BfInputType, type BfLabels, type BfLabelsOverrides, type BfMediaCardAspect, type BfPageHeaderHeadingLevel, type BfPaginationPositionLabel, type BfProgressSize, type BfProgressTone, type BfRadioGroupOrientation, type BfRadioOption, type BfRejectedFile, type BfRejectedFileReason, type BfSegmentOption, type BfSegmentedSize, type BfSelectOption, type BfSize, type BfSkeletonShape, type BfSpinnerSize, type BfStatAppearance, type BfStatTrend, type BfStatTrendIntent, type BfStatVariant, type BfStepHeadingLevel, type BfTabBarController, type BfTabBarHost, type BfTabLinks, type BfTableAlign, type BfTableCellContext, type BfTableColumn, type BfTableColumnAlign, type BfTableRowKey, type BfTableSort, type BfTableSortDirection, type BfTableStack, type BfTimelineTone, type BfToggleLabelPosition, type BfValidationMessages, BUTTON_CLASSES as ɵBF_BUTTON_CLASSES, ICON_BUTTON_CLASSES as ɵBF_ICON_BUTTON_CLASSES, BF_NAV as ɵBF_NAV, BfNativeSelectComponent as ɵBfNativeSelectComponent, type BfNavHost as ɵBfNavHost, FIELD_BOX as ɵFIELD_BOX, FIELD_ICON_END as ɵFIELD_ICON_END, FIELD_ICON_START as ɵFIELD_ICON_START, FIELD_PADDING_END as ɵFIELD_PADDING_END, FIELD_PADDING_START as ɵFIELD_PADDING_START, PILL_HIT as ɵPILL_HIT, choiceIndex as ɵchoiceIndex, choiceKey as ɵchoiceKey, compareIso as ɵcompareIso, createMemoryColorSchemeStorage as ɵcreateMemoryColorSchemeStorage, daysInMonth as ɵdaysInMonth, fieldDescribedBy as ɵfieldDescribedBy, fieldErrorMessageId as ɵfieldErrorMessageId, fieldErrorText as ɵfieldErrorText, fieldShowsError as ɵfieldShowsError, formatIsoDate as ɵformatIsoDate, localIsoDate as ɵlocalIsoDate, parseIsoDate as ɵparseIsoDate, provideBfDocumentReset as ɵprovideBfDocumentReset, uniqueId as ɵuniqueId, validIsoDate as ɵvalidIsoDate };