@bitforgehq/ui 0.3.2 → 0.4.0

package/types/bitforgehq-ui.d.ts

@@ -241,6 +241,11 @@ interface BfLabels {
    * @default 'Sort by'
    */
   readonly tableSortBy: string;
+  /**
+   * A stacked bf-table's first sort option: rows in the order given, no column sorted.
+   * @default 'Not sorted'
+   */
+  readonly tableSortNone: string;
   /**
    * A stacked bf-table's sort option for a column in ascending order.
    * @default (column) => `${column}, ascending`
@@ -507,6 +512,11 @@ interface BfLabels {
    * @default 'The data could not be loaded'
    */
   readonly chartError: string;
+  /**
+   * bf-list-item's visually hidden state text before the title of an `unread` row.
+   * @default 'Unread'
+   */
+  readonly listItemUnread: string;
   /** Default error text per validator kind (see `BfValidationMessages`). */
   readonly validation: BfValidationMessages;
 }
@@ -538,7 +548,7 @@ export declare const BF_LABELS: InjectionToken<BfLabels>;
  * out or set to `undefined` keeps the parent's string. In `ApplicationConfig.providers` it covers
  * every string. In a component's `providers` it covers that sub-tree's widgets and form controls
  * (`loading`, `dismiss`, `tabBar`, `tabBadge`, `back`, `refreshing`, `tableSelectAll`, `tableSortBy`,
- * `tableSortAscending`, `tableSortDescending`, `theme`, `themeSystem`, `themeLight`, `themeDark`,
+ * `tableSortNone`, `tableSortAscending`, `tableSortDescending`, `theme`, `themeSystem`, `themeLight`, `themeDark`,
  * `breadcrumb`, `breadcrumbExpand`, `navigation`, `navBadge`, `sidebarCollapse`, `sidebarExpand`,
  * `skipToContent`, `pagination`, `previousPage`, `nextPage`, `pageOf`, `goToPage`, `tabGroup`,
  * `calendarPreviousMonth`, `calendarNextMonth`, `calendarChooseMonth`, `calendarChooseYear`,
@@ -547,7 +557,7 @@ 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`, `validation`); the overlay services (`ok`, `cancel`,
+ * `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:
  * `open(…, { injector: inject(Injector) })`.
@@ -1007,11 +1017,20 @@ type BfBadgeVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
  * @since 0.3.1
  */
 type BfBadgeAppearance = BfBadgeVariant | 'info';
+/**
+ * How loud a `bf-badge` is: `soft`, a pale tint with tinted text (the default), or `strong`, a
+ * solid fill with contrasting text for the one state that must stand out, such as "Critical".
+ *
+ * @summary The two badge emphases, the soft tint or the solid strong fill
+ * @since 0.4.0
+ */
+type BfBadgeEmphasis = 'soft' | 'strong';
 /**
  * Status label ("On track", "At risk") or, with `count`, a compact numeric pill for unread counts.
  *
  * @example
  * <bf-badge variant="warning">At risk</bf-badge>
+ * <bf-badge variant="danger" emphasis="strong">Critical</bf-badge>
  * <bf-badge [count]="unread()" countLabel="unread messages" />
  * @summary Small status label in semantic tones, or a compact numeric pill for counts
  * @category Data display
@@ -1019,9 +1038,12 @@ type BfBadgeAppearance = BfBadgeVariant | 'info';
  * @slot default The badge text, shown when no `count` is set.
  */
 export declare class BfBadgeComponent {
-  /** Tint for the label style: neutral, primary, success, warning, danger or info. Ignored when
-   * `count` is set. */
+  /** Tint for the label style: neutral, primary, success, warning, danger or info. Ignored by a
+   * soft count pill; a strong one takes its fill from it. */
   readonly variant: import("@angular/core").InputSignal<BfBadgeAppearance>;
+  /** `soft` (a pale tint, the default) or `strong` (a solid fill with contrasting text, also for
+   * the count pill). */
+  readonly emphasis: import("@angular/core").InputSignal<BfBadgeEmphasis>;
   /** Switches to the count pill; values above 99 render as "99+". */
   readonly count: import("@angular/core").InputSignal<number | undefined>;
   /** What the count counts ("unread messages"), read by assistive tech after the number ("99+
@@ -1029,7 +1051,7 @@ export declare class BfBadgeComponent {
   readonly countLabel: import("@angular/core").InputSignal<string>;
   readonly classes: import("@angular/core").Signal<string>;
   readonly countText: import("@angular/core").Signal<string | null>;
-  readonly countClasses = "inline-flex h-box min-w-box items-center justify-center rounded-control bg-primary px-1.75 text-micro font-bold leading-none text-on-primary";
+  readonly countClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<BfBadgeComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<BfBadgeComponent, "bf-badge", never, {
     "variant": {
@@ -1037,6 +1059,11 @@ export declare class BfBadgeComponent {
       "required": false;
       "isSignal": true;
     };
+    "emphasis": {
+      "alias": "emphasis";
+      "required": false;
+      "isSignal": true;
+    };
     "count": {
       "alias": "count";
       "required": false;
@@ -3168,12 +3195,18 @@ interface BfActionHost {
   registerAction(): () => void;
   /** Whether the surface's action has keyboard focus (`:focus-visible`), for the focus ring. */
   setActionFocusVisible(visible: boolean): void;
+  /**
+   * The id of an element whose text starts the action's accessible name (a list row's visually
+   * hidden "Unread"), or `null`; the action then names itself `aria-labelledby="<id> <own id>"`.
+   */
+  readonly actionLabelPrefix?: Signal<string | null>;
 }
 declare const BF_ACTION_HOST: InjectionToken<BfActionHost>;
 /**
  * One row of a list: leading slot (avatar, icon tile), title and subtitle, trailing slot
  * (time, toggle, badge) and an optional chevron for rows that navigate. A navigation row puts a
  * `bfAction` link in the `title` slot, so the row stays a list item and the link covers it.
+ * `unread` marks a row not yet opened with a dot and a bolder title.
  *
  * @example
  * <bf-list-item subtitle="lena@studio.ch" chevron>
@@ -3205,13 +3238,26 @@ export declare class BfListItemComponent implements BfActionHost {
    * default they wrap, so nothing is lost at large text sizes.
    */
   readonly truncate: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Mark the row as not yet opened: a dot at the inline start, a bolder title and a visually
+   * hidden state (the `listItemUnread` label) read before the title. */
+  readonly unread: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Emitted when an interactive row is activated. */
   readonly clicked: import("@angular/core").OutputEmitterRef<Event>;
   /** `listitem` inside a `bf-list`, else no role. */
   protected readonly role: string | null;
+  protected readonly labels: import("@bitforgehq/ui").BfLabels;
+  protected readonly unreadDot = "absolute -start-2.5 mt-[7px] size-1.5 rounded-full bg-primary forced-colors:bg-[CanvasText]";
   private readonly actions;
   private readonly actionFocusVisible;
   private readonly actionState;
+  protected readonly hasAction: import("@angular/core").Signal<boolean>;
+  private unreadIdValue;
+  /** The id of the unread state text, while `unread` is set. */
+  protected readonly unreadId: import("@angular/core").Signal<string | null>;
+  /** @internal The unread state starts the name of the row's `bfAction`. */
+  readonly actionLabelPrefix: import("@angular/core").Signal<string | null>;
+  /** The title weight: bolder on an unread row. */
+  protected readonly titleWeight: import("@angular/core").Signal<"font-extrabold" | "font-bold">;
   /** Wrap or truncate classes of the title, the title slot and the subtitle. */
   protected readonly textClasses: import("@angular/core").Signal<string>;
   readonly classes: import("@angular/core").Signal<string>;
@@ -3251,6 +3297,11 @@ export declare class BfListItemComponent implements BfActionHost {
       "required": false;
       "isSignal": true;
     };
+    "unread": {
+      "alias": "unread";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "clicked": "clicked";
   }, never, ["[bfSlot=leading]", "[bfSlot=title]", "*", "[bfSlot=trailing]"], true, never>;
@@ -3977,7 +4028,9 @@ export declare class BfTabBarComponent implements BfTabBarHost {
  * with the nearest card or row, which then draws the pointer, the hover and, while the action has
  * keyboard focus, the focus ring; a card is never lit by the actions of rows nested in it. Give
  * secondary controls inside the surface `class="relative z-1"` so they stay clickable above the
- * stretched area.
+ * stretched area. When the surface marks a state that belongs in the name (an `unread` list
+ * row), the directive names the element `aria-labelledby="<state id> <own id>"`, so the link reads
+ * "Unread, Account", and restores the element's own `aria-labelledby` when the state goes.
  *
  * @example
  * <bf-card>
@@ -4338,6 +4391,15 @@ export declare class BfTableCellDirective<T = unknown> {
  * @since 0.3.1
  */
 type BfTableAlign = 'start' | 'end';
+/**
+ * Where a `bf-table` column lines up its header and cells: a `BfTableAlign`, or `center` for a
+ * column of controls such as the toggles of a settings matrix. A new type, so `Record`s over the
+ * released `BfTableAlign` keep compiling.
+ *
+ * @summary The inline alignment of a table column: start, end, or centred for controls
+ * @since 0.4.0
+ */
+type BfTableColumnAlign = BfTableAlign | 'center';
 /**
  * The direction of a sorted `bf-table` column, as `aria-sort` names it.
  *
@@ -4371,10 +4433,11 @@ interface BfTableColumn {
    */
   sortable?: boolean;
   /**
-   * The inline alignment of the header and cells; `end` also sets tabular figures.
+   * The inline alignment of the header and cells; `end` also sets tabular figures, `center`
+   * centres a cell's control (a toggle, a checkbox) in the column.
    * @default 'start'
    */
-  align?: BfTableAlign;
+  align?: BfTableColumnAlign;
 }
 /**
  * The column a `bf-table` is sorted by and the direction; the consumer sorts the rows.
@@ -4467,10 +4530,11 @@ export declare class BfTableComponent<T = unknown> {
   /** Whether the table can stack its rows (any `stack` but `never`); it then sets explicit
    * table roles, because some browsers drop a table's semantics once its display changes. */
   protected readonly stacks: import("@angular/core").Signal<boolean>;
-  /** The Sort by select's options: each sortable column ascending and descending. */
+  /** The Sort by select's options: Not sorted (`''`), then each sortable column ascending and
+   * descending; none without a sortable column. */
   protected readonly sortOptions: import("@angular/core").Signal<BfSelectOption<string>[]>;
-  /** The Sort by select's value: the option of `sort`, `null` while unsorted. */
-  protected readonly sortValue: import("@angular/core").Signal<string | null>;
+  /** The Sort by select's value: the option of `sort`, Not sorted while `sort` is null. */
+  protected readonly sortValue: import("@angular/core").Signal<string>;
   protected readonly hostClasses: import("@angular/core").Signal<string>;
   protected readonly stackBarClasses: import("@angular/core").Signal<string>;
   protected readonly tableClasses: import("@angular/core").Signal<string>;
@@ -4526,7 +4590,8 @@ export declare class BfTableComponent<T = unknown> {
    */
   sortBy(key: string): void;
   /**
-   * Sorts by a Sort by option (`<key>:<direction>`) of a stacked table.
+   * Sorts by a Sort by option (`<key>:<direction>`) of a stacked table; Not sorted sets `sort` to
+   * null.
    * @internal
    */
   sortFromOption(value: string): void;
@@ -4783,6 +4848,132 @@ export declare class BfStatComponent {
     };
   }, {}, never, ["[bfSlot=icon]", "*"], true, never>;
 }
+/** The default format of an event's time: a medium date and a short time (12 Oct 2026, 14:30). */
+declare const TIMELINE_TIME_FORMAT: Intl.DateTimeFormatOptions;
+/** What a `bf-timeline-event` reads from its `bf-timeline`. */
+interface BfTimelineHost {
+  /** The `Intl.DateTimeFormat` options of the events' times. */
+  readonly timeFormat: Signal<Intl.DateTimeFormatOptions>;
+  /** The locale of the events' times, `''` for the app's `LOCALE_ID`. */
+  readonly locale: Signal<string>;
+}
+/**
+ * Provided by `bf-timeline` so each `bf-timeline-event` claims `role="listitem"` and formats its
+ * time with the timeline's options, without `timeline-event.component.ts` importing
+ * `timeline.component.ts`.
+ */
+declare const BF_TIMELINE: InjectionToken<BfTimelineHost>;
+/**
+ * A dated history of events, newest first or oldest first as the consumer orders them: who did
+ * what and when, each event a `bf-timeline-event` with a marker on a vertical line.
+ *
+ * @example
+ * <bf-timeline label="History">
+ *   <bf-timeline-event actor="Lena Meier" time="2026-10-28T14:30:00Z" tone="success">
+ *     Marked the finding as fixed
+ *   </bf-timeline-event>
+ * </bf-timeline>
+ * @summary Dated list of events with who did what and when, on a vertical line
+ * @category Data display
+ * @since 0.4.0
+ * @slot default The events, each a `bf-timeline-event`, in the order to show them.
+ */
+export declare class BfTimelineComponent implements BfTimelineHost {
+  /** The list's accessible name, such as "History"; empty leaves the list unnamed (a visible
+   * heading above it already names the section). */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** `Intl.DateTimeFormat` options of every event's time; by default a medium date and a short
+   * time (`dateStyle: 'medium'`, `timeStyle: 'short'`). */
+  readonly timeFormat: import("@angular/core").InputSignal<Intl.DateTimeFormatOptions>;
+  /** BCP 47 locale of the times, such as `de-CH`; empty follows the app's `LOCALE_ID`. */
+  readonly locale: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfTimelineComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfTimelineComponent, "bf-timeline", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "timeFormat": {
+      "alias": "timeFormat";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/**
+ * The colour of a `bf-timeline-event`'s marker: `neutral` (the default), `primary`, or a status
+ * (`success`, `warning`, `danger`, `info`), such as danger for a failed CI run.
+ *
+ * @summary The marker colour of a timeline event, neutral, primary or a status
+ * @since 0.4.0
+ */
+type BfTimelineTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/**
+ * One event of a `bf-timeline`: a marker coloured by `tone`, the event text (the default slot,
+ * which may hold links), then who did it (`actor`) and when (`time`, in a `time` element).
+ *
+ * @example
+ * <bf-timeline-event actor="CI" time="2026-10-28T09:12:00Z" tone="danger">
+ *   CI failed on <a href="/pulls/123">PR #123</a>
+ * </bf-timeline-event>
+ * @summary One timeline event with a coloured marker, its text, actor and time
+ * @category Data display
+ * @since 0.4.0
+ * @slot default The event text; links in it take the link style.
+ * @slot end Content at the inline end on a wide timeline and below the text on a narrow one, such as a button.
+ */
+export declare class BfTimelineEventComponent {
+  /** Who did it, such as a person or a bot; empty for a system event. */
+  readonly actor: import("@angular/core").InputSignal<string>;
+  /** When it happened: a Date or an ISO 8601 string; empty or invalid shows no time. */
+  readonly time: import("@angular/core").InputSignal<string | Date | null>;
+  /** Shown in place of the formatted time, such as "vor 2 Std."; the `time` element's `datetime`
+   * keeps the exact value. */
+  readonly timeText: import("@angular/core").InputSignal<string>;
+  /** The marker's colour. */
+  readonly tone: import("@angular/core").InputSignal<BfTimelineTone>;
+  private readonly timeline;
+  private readonly appLocale;
+  /** `listitem` inside a `bf-timeline`, else no role. */
+  protected readonly role: string | null;
+  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 date formatted with the timeline's options. */
+  protected readonly timeLabel: import("@angular/core").Signal<string>;
+  protected readonly markerClasses: string;
+  protected readonly textClasses: string;
+  readonly dotClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfTimelineEventComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfTimelineEventComponent, "bf-timeline-event", never, {
+    "actor": {
+      "alias": "actor";
+      "required": false;
+      "isSignal": true;
+    };
+    "time": {
+      "alias": "time";
+      "required": false;
+      "isSignal": true;
+    };
+    "timeText": {
+      "alias": "timeText";
+      "required": false;
+      "isSignal": true;
+    };
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*", "[bfSlot=end]"], true, never>;
+}
 /**
  * What a `li[bfBreadcrumbItem]` reads from its enclosing `bf-breadcrumb`, provided through an
  * injection token so `breadcrumb.component.ts` and `breadcrumb-item.component.ts` never import each
@@ -5108,22 +5299,23 @@ type BfAppFrameBreakpoint = 'md' | 'lg';
 type BfAppFrameContentWidth = 'md' | 'lg' | 'xl' | 'full';
 /**
  * The frame of a desktop web app: a skip link, a sticky full-height sidebar column from the
- * breakpoint up, a header bar with the brand, the narrow-screen menu and actions below it, and
+ * breakpoint up, a header bar with the narrow-screen menu, the brand and actions below it, and
  * the `main` landmark with a content column of a set maximum width.
  *
  * @example
  * <bf-app-frame>
  *   <bf-sidebar bfSlot="sidebar" label="Main">…</bf-sidebar>
- *   <span bfSlot="brand" class="text-heading">Atlas</span>
  *   <bf-menu-button bfSlot="menu" [menu]="navMenu">Sections</bf-menu-button>
+ *   <span bfSlot="brand" class="text-heading">Atlas</span>
  *   <router-outlet />
  * </bf-app-frame>
  * @summary Desktop app frame with skip link, sticky sidebar, narrow header and main content
  * @category Navigation
  * @since 0.3.2
  * @slot sidebar The `bf-sidebar`, shown from the breakpoint up; it fills the column's height.
- * @slot brand The app's name or logo in the narrow header bar.
- * @slot menu The narrow-screen navigation: a `bf-menu-button` of `a[bfMenuItem]` links.
+ * @slot brand The app's name or logo in the narrow header bar, after the menu.
+ * @slot menu The narrow-screen navigation: a `bf-menu-button` of `a[bfMenuItem]` links, at the
+ *   header bar's inline start.
  * @slot actions End actions of the narrow header bar, such as the theme menu.
  * @slot default The page: what the router shows, inside the `main` landmark.
  */
@@ -5168,7 +5360,7 @@ export declare class BfAppFrameComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, ["[bfSlot=sidebar]", "[bfSlot=brand]", "[bfSlot=menu]", "[bfSlot=actions]", "*"], true, never>;
+  }, {}, never, ["[bfSlot=sidebar]", "[bfSlot=menu]", "[bfSlot=brand]", "[bfSlot=actions]", "*"], true, never>;
 }
 /**
  * The shape of a `bf-skeleton`: text lines, a rectangle (an image, a chart, a field) or a circle
@@ -5726,6 +5918,102 @@ export declare class BfCalendarComponent implements FormValueControl<string | nu
     "touch": "touch";
   }, never, never, true, never>;
 }
+/**
+ * Provided by `bf-steps` so each `bf-step` knows its number and may claim `role="listitem"`,
+ * without `step.component.ts` importing `steps.component.ts`.
+ */
+interface BfStepsHost {
+  /** The number of the first step. */
+  readonly start: Signal<number>;
+  /** How many steps the list holds. */
+  readonly count: Signal<number>;
+  /** The zero-based position of a step among the list's steps, or -1. */
+  indexOf(step: object): number;
+}
+declare const BF_STEPS: InjectionToken<BfStepsHost>;
+/**
+ * Numbered instructions a user follows in order, such as setting up an app on a phone: an
+ * ordered list of `bf-step` items, each with a numbered marker joined to the next by a line.
+ *
+ * @example
+ * <bf-steps>
+ *   <bf-step title="Install the app">Download it from the App Store or Google Play.</bf-step>
+ *   <bf-step title="Sign in">Use your work email address.</bf-step>
+ *   <bf-step title="Turn on notifications">Allow them when the app asks.</bf-step>
+ * </bf-steps>
+ * @summary Numbered instruction steps a user follows in order, with joined markers
+ * @category Data display
+ * @since 0.4.0
+ * @slot default The steps, each a `bf-step`.
+ */
+export declare class BfStepsComponent implements BfStepsHost {
+  /** The number of the first step, for a list continued from an earlier one. */
+  readonly start: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  private readonly steps;
+  /** @internal How many steps the list holds. */
+  readonly count: import("@angular/core").Signal<number>;
+  /** @internal The zero-based position of a step, read by the step for its number. */
+  indexOf(step: object): number;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfStepsComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfStepsComponent, "bf-steps", never, {
+    "start": {
+      "alias": "start";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["steps"], ["*"], true, never>;
+}
+/**
+ * The heading level of a `bf-step` title, for a guide whose steps hold enough content (screenshots,
+ * code) that a screen-reader user moves between them by heading.
+ *
+ * @summary The heading level a step title can take, two, three or four
+ * @since 0.4.0
+ */
+type BfStepHeadingLevel = 2 | 3 | 4;
+/**
+ * One step of a `bf-steps` list: a numbered marker, a short instruction as its title and the
+ * step's details in the content.
+ *
+ * @example
+ * <bf-steps>
+ *   <bf-step title="Install the app">Download it from the App Store or Google Play.</bf-step>
+ *   <bf-step title="Sign in">Use your work email address.</bf-step>
+ * </bf-steps>
+ * @summary One numbered step of an instruction list, with a title and its details
+ * @category Data display
+ * @since 0.4.0
+ * @slot default The step's details: text, a code snippet, an image or a button.
+ */
+export declare class BfStepComponent {
+  private readonly steps;
+  /** The step's short instruction ("Install the app"), shown next to the number. */
+  readonly title: import("@angular/core").InputSignal<string>;
+  /** Renders the title as a heading of this level instead of text; leave it off for short steps. */
+  readonly headingLevel: import("@angular/core").InputSignal<BfStepHeadingLevel | undefined>;
+  /** `listitem` inside a `bf-steps`, else no role. */
+  protected readonly role: string | null;
+  protected readonly markerClasses = "flex size-6 shrink-0 items-center justify-center rounded-full bg-primary-soft text-label-sm font-bold text-primary-strong forced-colors:outline forced-colors:outline-[CanvasText]";
+  protected readonly lineClasses = "my-1 w-0 flex-1 border-s border-border group-last/bf-step:hidden";
+  protected readonly titleClasses = "pt-0.5 text-label font-bold text-text wrap-anywhere";
+  /** The step's number: the list's `start` plus its position. */
+  protected readonly number: import("@angular/core").Signal<number>;
+  protected readonly positionInSet: import("@angular/core").Signal<number | null>;
+  protected readonly setSize: import("@angular/core").Signal<number | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BfStepComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BfStepComponent, "bf-step", never, {
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, 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'>;
@@ -5844,4 +6132,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 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 BfTabBarController, type BfTabBarHost, type BfTabLinks, type BfTableAlign, type BfTableCellContext, type BfTableColumn, type BfTableRowKey, type BfTableSort, type BfTableSortDirection, type BfTableStack, 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 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 };