@bitforgehq/ui 0.5.0-next.3 → 0.5.0-next.4

package/llms.txt

@@ -68,6 +68,7 @@
 - [div[bfDescriptionItem]](https://bitforge-ui.web.app/ai/components/description-item.md): One label and value pair of a description list, label as term, content as value ([docs](https://bitforge-ui.web.app/components/description-item))
 - [bf-description-list](https://bitforge-ui.web.app/ai/components/description-list.md): Native description list of label-value pairs, as divided rows or a tile grid ([docs](https://bitforge-ui.web.app/components/description-list))
 - [bf-donut-chart](https://bitforge-ui.web.app/ai/components/donut-chart.md): Donut chart of the parts of a whole, with a legend, tooltip and centre slot ([docs](https://bitforge-ui.web.app/components/donut-chart))
+- [bf-image-tile](https://bitforge-ui.web.app/ai/components/image-tile.md): Small card for thumbnail grids: a picture and title that act as one target ([docs](https://bitforge-ui.web.app/components/image-tile))
 - [bf-line-chart](https://bitforge-ui.web.app/ai/components/line-chart.md): Line chart of series over categories, with tooltip, legend and data table ([docs](https://bitforge-ui.web.app/components/line-chart))
 - [bf-list](https://bitforge-ui.web.app/ai/components/list.md): Container for list rows, inset by default with rounded corners on a warm background ([docs](https://bitforge-ui.web.app/components/list))
 - [bf-list-item](https://bitforge-ui.web.app/ai/components/list-item.md): List row with leading slot, title, subtitle, trailing slot and an optional chevron ([docs](https://bitforge-ui.web.app/components/list-item))
@@ -193,6 +194,8 @@
 - [BfFileInputVariant](https://bitforge-ui.web.app/ai/reference/bf-file-input-variant.md): The two looks of a file picker, a compact field or a drop zone ([docs](https://bitforge-ui.web.app/api/bf-file-input-variant))
 - [BfIconButtonVariant](https://bitforge-ui.web.app/ai/reference/bf-icon-button-variant.md): The four visual styles of an icon button, from tonal to plain text ([docs](https://bitforge-ui.web.app/api/bf-icon-button-variant))
 - [BfImageInputShape](https://bitforge-ui.web.app/ai/reference/bf-image-input-shape.md): The two tile shapes of an image picker, a circle or a rounded square ([docs](https://bitforge-ui.web.app/api/bf-image-input-shape))
+- [BfImageTileAspect](https://bitforge-ui.web.app/ai/reference/bf-image-tile-aspect.md): The four aspect ratios of an image tile's picture, square by default ([docs](https://bitforge-ui.web.app/api/bf-image-tile-aspect))
+- [BfImageTileCaptionPlacement](https://bitforge-ui.web.app/ai/reference/bf-image-tile-caption-placement.md): Where an image tile's caption sits, below the picture or over it ([docs](https://bitforge-ui.web.app/api/bf-image-tile-caption-placement))
 - [BfInputAutocapitalize](https://bitforge-ui.web.app/ai/reference/bf-input-autocapitalize.md): A text field's capitalisation setting, a mode or empty to leave it off ([docs](https://bitforge-ui.web.app/api/bf-input-autocapitalize))
 - [BfInputEnterKeyHint](https://bitforge-ui.web.app/ai/reference/bf-input-enter-key-hint.md): A field's Enter key label setting, a label or empty to leave it off ([docs](https://bitforge-ui.web.app/api/bf-input-enter-key-hint))
 - [BfInputInputMode](https://bitforge-ui.web.app/ai/reference/bf-input-input-mode.md): A text field's virtual keyboard setting, a keyboard or empty to leave it off ([docs](https://bitforge-ui.web.app/api/bf-input-input-mode))
@@ -203,6 +206,7 @@
 - [BfMediaCardAspect](https://bitforge-ui.web.app/ai/reference/bf-media-card-aspect.md): The four aspect ratios of a media card's image area, wide to portrait ([docs](https://bitforge-ui.web.app/api/bf-media-card-aspect))
 - [BfMotionListDirective](https://bitforge-ui.web.app/ai/reference/bf-motion-list-directive.md): Glides the items of a list or grid to their new place when it changes ([docs](https://bitforge-ui.web.app/api/bf-motion-list-directive))
 - [BfPageHeaderHeadingLevel](https://bitforge-ui.web.app/ai/reference/bf-page-header-heading-level.md): The heading level of a page header title, one for a page or two ([docs](https://bitforge-ui.web.app/api/bf-page-header-heading-level))
+- [BfPaginationPositionLabel](https://bitforge-ui.web.app/ai/reference/bf-pagination-position-label.md): Function that writes a compact pager's position text, such as "v3 of 7" ([docs](https://bitforge-ui.web.app/api/bf-pagination-position-label))
 - [BfProgressSize](https://bitforge-ui.web.app/ai/reference/bf-progress-size.md): The two track heights of a progress bar, thin and regular ([docs](https://bitforge-ui.web.app/api/bf-progress-size))
 - [BfProgressTone](https://bitforge-ui.web.app/ai/reference/bf-progress-tone.md): The four fill colours of a progress bar, from primary to danger ([docs](https://bitforge-ui.web.app/api/bf-progress-tone))
 - [BfProseDirective](https://bitforge-ui.web.app/ai/reference/bf-prose-directive.md): Styles rendered markdown with the library tokens: headings, lists, code and quotes ([docs](https://bitforge-ui.web.app/api/bf-prose-directive))
@@ -446,6 +450,7 @@
 - [BfFileInputHarness](https://bitforge-ui.web.app/ai/reference/bf-file-input-harness.md): Test harness for the file input: drops files and reads the list and rejections ([docs](https://bitforge-ui.web.app/api/bf-file-input-harness))
 - [BfHarnessFilters](https://bitforge-ui.web.app/ai/reference/bf-harness-filters.md): Filters a library harness query by selector, ancestor and the widget label ([docs](https://bitforge-ui.web.app/api/bf-harness-filters))
 - [BfImageInputHarness](https://bitforge-ui.web.app/ai/reference/bf-image-input-harness.md): Test harness for the image input: drops an image on it and reads the preview ([docs](https://bitforge-ui.web.app/api/bf-image-input-harness))
+- [BfImageTileHarness](https://bitforge-ui.web.app/ai/reference/bf-image-tile-harness.md): Test harness for an image tile: its picture state, title, meta, selection and action ([docs](https://bitforge-ui.web.app/api/bf-image-tile-harness))
 - [BfImageViewerHarness](https://bitforge-ui.web.app/ai/reference/bf-image-viewer-harness.md): Test harness for an image viewer: its image, index, caption, steps and close ([docs](https://bitforge-ui.web.app/api/bf-image-viewer-harness))
 - [BfJsdomShimOptions](https://bitforge-ui.web.app/ai/reference/bf-jsdom-shim-options.md): Options of the jsdom shims: the matchMedia stub and its reduced-motion answer ([docs](https://bitforge-ui.web.app/api/bf-jsdom-shim-options))
 - [BfMediaCardHarness](https://bitforge-ui.web.app/ai/reference/bf-media-card-harness.md): Test harness for a media card: its image state, its messages and its selection ([docs](https://bitforge-ui.web.app/api/bf-media-card-harness))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitforgehq/ui",
-  "version": "0.5.0-next.3",
+  "version": "0.5.0-next.4",
   "description": "Bitforge UI: Angular 22 widgets (Meadow Sage palette with an indigo default primary to override, Tailwind v4, signals-first) and, from v0.2, a Capacitor app shell.",
   "license": "MIT",
   "repository": {

package/types/bitforgehq-ui-overlay.d.ts

@@ -1510,6 +1510,9 @@ export declare class BfMenuButtonComponent {
   readonly label: import("@angular/core").InputSignal<string>;
   /** Square button holding only the projected icon, like `bf-icon-button`; set `label`. */
   readonly iconOnly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Stretches the host and the button to the width of their container, as `bf-button`'s
+   * `fullWidth`; the label and caret stay centred. Ignored with `iconOnly`. */
+  readonly fullWidth: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Disables the button; the menu cannot open. */
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** The menu opened. */
@@ -1518,6 +1521,9 @@ export declare class BfMenuButtonComponent {
   readonly closed: import("@angular/core").OutputEmitterRef<void>;
   /** The size in effect: `size`, else the app's `controlSize` default. */
   protected readonly resolvedSize: import("@angular/core").Signal<BfSize>;
+  /** Full width (not icon-only): the host and the button fill the container. */
+  private readonly stretched;
+  protected readonly hostClasses: import("@angular/core").Signal<"inline-flex max-w-full w-full" | "inline-flex max-w-full">;
   protected readonly labelClasses: import("@angular/core").Signal<"contents" | "max-w-full min-w-0 truncate">;
   protected readonly classes: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<BfMenuButtonComponent, never>;
@@ -1552,6 +1558,11 @@ export declare class BfMenuButtonComponent {
       "required": false;
       "isSignal": true;
     };
+    "fullWidth": {
+      "alias": "fullWidth";
+      "required": false;
+      "isSignal": true;
+    };
     "disabled": {
       "alias": "disabled";
       "required": false;

package/types/bitforgehq-ui-testing.d.ts

@@ -1630,6 +1630,89 @@ export declare class BfMediaCardHarness extends ComponentHarness {
   toggleSelected(): Promise<void>;
   private requireImage;
 }
+/**
+ * Harness for `bf-image-tile`. jsdom never loads images, so `loadImage()` and `failImage()` fire
+ * the picture's `load` and `error` events the way a browser would; `getState()` then tells what
+ * the tile shows. `click()` clicks the tile's `bfAction` link or button.
+ *
+ * @example
+ * const tile = await loader.getHarness(BfImageTileHarness.with({ label: 'Dragon' }));
+ * await tile.loadImage();
+ * expect(await tile.getState()).toBe('loaded');
+ * @summary Test harness for an image tile: its picture state, title, meta, selection and action
+ * @since 0.5.0
+ */
+export declare class BfImageTileHarness extends ComponentHarness {
+  /** The host element's selector. */
+  static hostSelector: string;
+  private readonly tile;
+  private readonly media;
+  private readonly image;
+  private readonly title;
+  private readonly meta;
+  private readonly placeholder;
+  private readonly failed;
+  private readonly action;
+  /**
+   * A predicate for a tile with the given title.
+   * @param filters The title (text or pattern) and the CDK's selector and ancestor filters.
+   * @returns The predicate for `getHarness()` and friends.
+   */
+  static with(filters?: BfHarnessFilters): HarnessPredicate<BfImageTileHarness>;
+  /**
+   * The tile's title: the text of its default slot.
+   * @returns The title, `''` without one.
+   */
+  getTitle(): Promise<string>;
+  /**
+   * The meta line under the title.
+   * @returns Its text, `''` without one.
+   */
+  getMeta(): Promise<string>;
+  /**
+   * What the picture area shows: `empty` (the placeholder), `loading` (the skeleton), `loaded`
+   * (the picture) or `failed` (the failure message).
+   * @returns The state.
+   */
+  getState(): Promise<'empty' | 'loading' | 'loaded' | 'failed'>;
+  /**
+   * The URL of the picture.
+   * @returns Its `src`, `''` while there is no image element.
+   */
+  getSrc(): Promise<string>;
+  /**
+   * The alternative text of the picture.
+   * @returns Its `alt`, `''` for a decorative picture or no picture.
+   */
+  getAlt(): Promise<string>;
+  /**
+   * The placeholder text while there is no picture.
+   * @returns The text, `''` when the tile is not empty.
+   */
+  getPlaceholderText(): Promise<string>;
+  /**
+   * The failure message.
+   * @returns The message, `''` when the picture has not failed.
+   */
+  getFailedMessage(): Promise<string>;
+  /**
+   * Whether the tile is marked selected.
+   * @returns True while `selected` is set.
+   */
+  isSelected(): Promise<boolean>;
+  /**
+   * Whether the tile is clickable (has a `bfAction` link or button).
+   * @returns True with an action.
+   */
+  isClickable(): Promise<boolean>;
+  /** Clicks the tile's `bfAction` link or button. Throws for a tile without one. */
+  click(): Promise<void>;
+  /** Fires the picture's `load` event, as a browser does when it arrives. Throws without one. */
+  loadImage(): Promise<void>;
+  /** Fires the picture's `error` event, as a browser does when it fails. Throws without one. */
+  failImage(): Promise<void>;
+  private requireImage;
+}
 /**
  * Harness for `bf-image-viewer`, the lightbox `BfImageViewerService.open()` renders. It renders
  * in the CDK overlay container outside the tested component, so get it through

package/types/bitforgehq-ui.d.ts

@@ -643,10 +643,20 @@ interface BfLabels {
    */
   readonly mediaCardSelect: string;
   /**
-   * bf-media-card's and bf-image-viewer's message for an image that failed to load.
+   * 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'
@@ -713,7 +723,8 @@ export declare const BF_LABELS: InjectionToken<BfLabels>;
  * `fileRejectedType`, `fileRejectedSize`, `fileRejectedCount`,
  * `imageInputChoose`, `imageInputUpload`, `imageInputReplace`, `imageInputRemove`,
  * `chatThread`, `chatJumpToLatest`, `chatMessageStopped`, `chatMessageFailed`, `chatComposer`,
- * `chatSend`, `chatStop`, `mediaCardSelect`, `imageLoadFailed`, `validation`); the overlay
+ * `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:
@@ -1234,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
@@ -1276,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 {
@@ -3981,6 +3994,29 @@ 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 aspect ratio of a `bf-media-card`'s image area: 16:9 (default), 4:3, square or 3:4.
  *
@@ -3988,8 +4024,6 @@ export declare class BfCardComponent implements BfActionHost {
  * @since 0.5.0
  */
 type BfMediaCardAspect = '16/9' | '4/3' | '1/1' | '3/4';
-/** What the image area shows. */
-type MediaState = 'empty' | 'loading' | 'loaded' | 'failed';
 /**
  * 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
@@ -4051,11 +4085,9 @@ export declare class BfMediaCardComponent implements BfActionHost {
   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's own progress, reset by every new `src`. */
-  private readonly imageStatus;
-  /** True once the skeleton has faded out under a loaded image; reset by every new `src`. */
-  private readonly skeletonGone;
-  protected readonly state: import("@angular/core").Signal<MediaState>;
+  /** 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>;
@@ -4145,6 +4177,160 @@ export declare class BfMediaCardComponent implements BfActionHost {
     "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.
  *
@@ -6292,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
@@ -6318,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>;
@@ -6330,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. */
@@ -6381,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;
@@ -7423,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 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 BfInputAutocapitalize, type BfInputEnterKeyHint, type BfInputInputMode, type BfInputMode, type BfInputType, type BfLabels, type BfLabelsOverrides, type BfMediaCardAspect, type BfPageHeaderHeadingLevel, 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 };
+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 };