@bitforgehq/ui 0.3.2 → 0.4.0

package/fesm2022/bitforgehq-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { Component, DOCUMENT, DestroyRef, Directive, ElementRef, HostAttributeToken, Injectable, InjectionToken, Injector, PLATFORM_ID, TemplateRef, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
+import { Component, DOCUMENT, DestroyRef, Directive, ElementRef, HostAttributeToken, Injectable, InjectionToken, Injector, LOCALE_ID, PLATFORM_ID, TemplateRef, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 const BF_DEFAULT_VALUES = {
 	fieldSize: "md",
@@ -44,6 +44,7 @@ const BF_DEFAULT_LABELS = {
 	notifications: "Notifications",
 	tableSelectAll: "Select all rows",
 	tableSortBy: "Sort by",
+	tableSortNone: "Not sorted",
 	tableSortAscending: (column) => `${column}, ascending`,
 	tableSortDescending: (column) => `${column}, descending`,
 	theme: "Theme",
@@ -95,6 +96,7 @@ const BF_DEFAULT_LABELS = {
 	chartValue: "Value",
 	chartEmpty: "No data to show",
 	chartError: "The data could not be loaded",
+	listItemUnread: "Unread",
 	validation: {
 		required: "Fill in this field",
 		email: "Enter a valid email address",
@@ -145,6 +147,7 @@ function mergeLabels(parent, o) {
 		notifications: o.notifications ?? parent.notifications,
 		tableSelectAll: o.tableSelectAll ?? parent.tableSelectAll,
 		tableSortBy: o.tableSortBy ?? parent.tableSortBy,
+		tableSortNone: o.tableSortNone ?? parent.tableSortNone,
 		tableSortAscending: o.tableSortAscending ?? parent.tableSortAscending,
 		tableSortDescending: o.tableSortDescending ?? parent.tableSortDescending,
 		theme: o.theme ?? parent.theme,
@@ -196,6 +199,7 @@ function mergeLabels(parent, o) {
 		chartValue: o.chartValue ?? parent.chartValue,
 		chartEmpty: o.chartEmpty ?? parent.chartEmpty,
 		chartError: o.chartError ?? parent.chartError,
+		listItemUnread: o.listItemUnread ?? parent.listItemUnread,
 		validation: {
 			required: v.required ?? pv.required,
 			email: v.email ?? pv.email,
@@ -1127,7 +1131,9 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 const LABEL_BASE$1 = "inline-flex items-center rounded-control px-2.5 py-1.25 text-micro font-bold leading-none";
-const COUNT_BASE = "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";
+const COUNT_BASE = "inline-flex h-box min-w-box items-center justify-center rounded-control px-1.75 text-micro font-bold leading-none";
+const COUNT_SOFT = "bg-primary text-on-primary";
+const STRONG_FORCED = "forced-colors:outline forced-colors:outline-[CanvasText]";
 const VARIANT$4 = {
 	neutral: "bg-neutral-soft text-neutral",
 	primary: "bg-primary-soft text-primary-strong",
@@ -1136,16 +1142,25 @@ const VARIANT$4 = {
 	danger: "bg-danger-soft text-danger",
 	info: "bg-info-soft text-info"
 };
+const STRONG = {
+	neutral: "bg-neutral-strong text-on-neutral-strong",
+	primary: "bg-primary text-on-primary",
+	success: "bg-success-strong text-on-success-strong",
+	warning: "bg-warning-strong text-on-warning-strong",
+	danger: "bg-danger-strong text-on-danger-strong",
+	info: "bg-info-strong text-on-info-strong"
+};
 var BfBadgeComponent = class BfBadgeComponent {
 	variant = input("neutral", ...ngDevMode ? [{ debugName: "variant" }] : 	/* istanbul ignore next */ []);
+	emphasis = input("soft", ...ngDevMode ? [{ debugName: "emphasis" }] : 	/* istanbul ignore next */ []);
 	count = input(void 0, ...ngDevMode ? [{ debugName: "count" }] : 	/* istanbul ignore next */ []);
 	countLabel = input("", ...ngDevMode ? [{ debugName: "countLabel" }] : 	/* istanbul ignore next */ []);
-	classes = computed(() => `${LABEL_BASE$1} ${VARIANT$4[this.variant()]}`, ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
+	classes = computed(() => this.emphasis() === "strong" ? `${LABEL_BASE$1} ${STRONG[this.variant()]} ${STRONG_FORCED}` : `${LABEL_BASE$1} ${VARIANT$4[this.variant()]}`, ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
 	countText = computed(() => {
 		const c = this.count();
 		return c === void 0 ? null : c > 99 ? "99+" : String(c);
 	}, ...ngDevMode ? [{ debugName: "countText" }] : 	/* istanbul ignore next */ []);
-	countClasses = COUNT_BASE;
+	countClasses = computed(() => this.emphasis() === "strong" ? `${COUNT_BASE} ${STRONG[this.variant()]} ${STRONG_FORCED}` : `${COUNT_BASE} ${COUNT_SOFT}`, ...ngDevMode ? [{ debugName: "countClasses" }] : 	/* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.1.7",
@@ -1168,6 +1183,13 @@ var BfBadgeComponent = class BfBadgeComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			emphasis: {
+				classPropertyName: "emphasis",
+				publicName: "emphasis",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			count: {
 				classPropertyName: "count",
 				publicName: "count",
@@ -1187,7 +1209,7 @@ var BfBadgeComponent = class BfBadgeComponent {
 		ngImport: i0,
 		template: `
     @if (countText(); as text) {
-      <span [class]="countClasses"
+      <span [class]="countClasses()"
         >{{ text }}
         @if (countLabel()) {
           <span class="sr-only"> {{ countLabel() }}</span>
@@ -1212,7 +1234,7 @@ i0.ɵɵngDeclareClassMetadata({
 			host: { class: "inline-flex" },
 			template: `
     @if (countText(); as text) {
-      <span [class]="countClasses"
+      <span [class]="countClasses()"
         >{{ text }}
         @if (countLabel()) {
           <span class="sr-only"> {{ countLabel() }}</span>
@@ -1233,6 +1255,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		emphasis: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emphasis",
+				required: false
+			}]
+		}],
 		count: [{
 			type: i0.Input,
 			args: [{
@@ -3514,7 +3544,7 @@ const ROW$4 = {
 	md: "min-h-10 pointer-coarse:min-h-hit",
 	lg: "min-h-12"
 };
-const TEXT$3 = {
+const TEXT$4 = {
 	sm: "text-label-sm",
 	md: "text-label",
 	lg: "text-label"
@@ -3591,7 +3621,7 @@ var BfCheckboxComponent = class BfCheckboxComponent {
 		ROW$4[this.resolvedSize()],
 		LABEL_MODE$1[this.mode()]
 	].join(" "), ...ngDevMode ? [{ debugName: "labelClasses" }] : 	/* istanbul ignore next */ []);
-	textClasses = computed(() => `text-text peer-disabled:text-text-disabled font-semibold empty:hidden ${TEXT$3[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "textClasses" }] : 	/* istanbul ignore next */ []);
+	textClasses = computed(() => `text-text peer-disabled:text-text-disabled font-semibold empty:hidden ${TEXT$4[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "textClasses" }] : 	/* istanbul ignore next */ []);
 	errorClasses = computed(() => `text-danger text-micro ${ERROR_INDENT[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "errorClasses" }] : 	/* istanbul ignore next */ []);
 	boxClasses = computed(() => {
 		const state = this.checked() || this.indeterminate() ? this.readonly() ? "readonlyOn" : "on" : this.showError() ? "error" : this.readonly() ? "readonly" : "off";
@@ -3983,7 +4013,7 @@ i0.ɵɵngDeclareClassMetadata({
 const TRACK_BASE$1 = "relative flex shrink-0 items-center rounded-control border-[1.5px] p-[1.5px] transition-colors peer-focus-visible:ring-4 peer-focus-visible:ring-ring peer-focus-visible:outline-hidden";
 const KNOB_BASE = "block rounded-control border-[1.5px] border-transparent shadow-segment transition-transform";
 const ROW$3 = {
-	sm: "min-h-8 pointer-coarse:min-h-hit",
+	sm: "min-h-8 pointer-coarse:min-h-hit pointer-coarse:min-w-hit",
 	md: "min-h-10 pointer-coarse:min-h-hit",
 	lg: "min-h-12"
 };
@@ -4011,7 +4041,7 @@ const KNOB_TRAVEL = {
 		off: "translate-x-0"
 	}
 };
-const TEXT$2 = {
+const TEXT$3 = {
 	sm: "text-label-sm",
 	md: "text-label",
 	lg: "text-label"
@@ -4092,7 +4122,7 @@ var BfToggleComponent = class BfToggleComponent {
 	resolvedSize = computed(() => this.size() ?? this.defaults.controlSize, ...ngDevMode ? [{ debugName: "resolvedSize" }] : 	/* istanbul ignore next */ []);
 	mode = computed(() => this.disabled() ? "disabled" : this.readonly() ? "readonly" : "editable", ...ngDevMode ? [{ debugName: "mode" }] : 	/* istanbul ignore next */ []);
 	labelClasses = computed(() => [
-		this.labelPosition() === "start" ? "flex w-full flex-row-reverse items-center justify-between gap-2.5" : "inline-flex items-center gap-2.5",
+		this.labelPosition() === "start" ? "flex w-full flex-row-reverse items-center justify-between gap-2.5" : "inline-flex items-center justify-center gap-2.5",
 		ROW$3[this.resolvedSize()],
 		LABEL_MODE[this.mode()]
 	].join(" "), ...ngDevMode ? [{ debugName: "labelClasses" }] : 	/* istanbul ignore next */ []);
@@ -4102,7 +4132,7 @@ var BfToggleComponent = class BfToggleComponent {
 		TRACK_FILL$1[this.mode()][this.checked() ? "on" : "off"],
 		TRACK_PRESSED[this.mode()]
 	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "trackClasses" }] : 	/* istanbul ignore next */ []);
-	textClasses = computed(() => `text-text peer-disabled:text-text-disabled min-w-0 font-semibold wrap-anywhere ${TEXT$2[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "textClasses" }] : 	/* istanbul ignore next */ []);
+	textClasses = computed(() => `text-text peer-disabled:text-text-disabled min-w-0 font-semibold wrap-anywhere ${TEXT$3[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "textClasses" }] : 	/* istanbul ignore next */ []);
 	knobClasses = computed(() => {
 		const on = this.checked();
 		const fill = KNOB_FILL[this.mode()][on ? "on" : "off"];
@@ -4516,7 +4546,7 @@ const DOT_SIZE = {
 	md: "size-3",
 	lg: "size-3.5"
 };
-const TEXT$1 = {
+const TEXT$2 = {
 	sm: "text-label-sm",
 	md: "text-label",
 	lg: "text-label"
@@ -4578,7 +4608,7 @@ var BfRadioGroupComponent = class BfRadioGroupComponent {
 	defaults = inject(BF_DEFAULTS);
 	selectedIndex = computed(() => choiceIndex(this.options(), this.value(), this.compareWith()), ...ngDevMode ? [{ debugName: "selectedIndex" }] : 	/* istanbul ignore next */ []);
 	resolvedSize = computed(() => this.size() ?? this.defaults.controlSize, ...ngDevMode ? [{ debugName: "resolvedSize" }] : 	/* istanbul ignore next */ []);
-	textClasses = computed(() => `font-semibold ${TEXT$1[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "textClasses" }] : 	/* istanbul ignore next */ []);
+	textClasses = computed(() => `font-semibold ${TEXT$2[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "textClasses" }] : 	/* istanbul ignore next */ []);
 	errorText = computed(() => fieldErrorText(this.errorMessage(), this.touched(), this.errors(), this.labels.validation), ...ngDevMode ? [{ debugName: "errorText" }] : 	/* istanbul ignore next */ []);
 	showError = computed(() => fieldShowsError(this.errorText(), this.invalid(), this.touched()), ...ngDevMode ? [{ debugName: "showError" }] : 	/* istanbul ignore next */ []);
 	message = heldMessage(this.errorText);
@@ -6441,10 +6471,11 @@ const ACTION$1 = {
 	action: "cursor-pointer hover:bg-surface-muted has-[[data-bf-action]:active]:bg-surface-pressed has-[[data-bf-action]:active]:after:border-text-muted",
 	focused: "cursor-pointer hover:bg-surface-muted has-[[data-bf-action]:active]:bg-surface-pressed has-[[data-bf-action]:active]:after:border-text-muted ring-4 ring-ring"
 };
-const TEXT = {
+const TEXT$1 = {
 	wrap: "wrap-anywhere",
 	truncate: "truncate"
 };
+const UNREAD_DOT = "absolute -start-2.5 mt-[7px] size-1.5 rounded-full bg-primary forced-colors:bg-[CanvasText]";
 const CHEVRON$2 = "after:ms-auto after:h-2.5 after:w-2.5 after:shrink-0 after:-translate-x-1 after:rotate-45 rtl:after:translate-x-1 rtl:after:-rotate-135 after:border-t-[1.5px] after:border-r-[1.5px] after:border-text-subtle after:content-['']";
 var BfListItemComponent = class BfListItemComponent {
 	title = input("", ...ngDevMode ? [{ debugName: "title" }] : 	/* istanbul ignore next */ []);
@@ -6465,15 +6496,26 @@ var BfListItemComponent = class BfListItemComponent {
 		...ngDevMode ? { debugName: "truncate" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
+	unread = input(false, {
+		...ngDevMode ? { debugName: "unread" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	clicked = output();
 	role = inject(BF_LIST, { optional: true }) ? "listitem" : null;
+	labels = inject(BF_LABELS);
+	unreadDot = UNREAD_DOT;
 	actions = signal(0, ...ngDevMode ? [{ debugName: "actions" }] : 	/* istanbul ignore next */ []);
 	actionFocusVisible = signal(false, ...ngDevMode ? [{ debugName: "actionFocusVisible" }] : 	/* istanbul ignore next */ []);
 	actionState = computed(() => {
 		if (this.actions() === 0) return "none";
 		return this.actionFocusVisible() ? "focused" : "action";
 	}, ...ngDevMode ? [{ debugName: "actionState" }] : 	/* istanbul ignore next */ []);
-	textClasses = computed(() => TEXT[this.truncate() ? "truncate" : "wrap"], ...ngDevMode ? [{ debugName: "textClasses" }] : 	/* istanbul ignore next */ []);
+	hasAction = computed(() => this.actions() > 0, ...ngDevMode ? [{ debugName: "hasAction" }] : 	/* istanbul ignore next */ []);
+	unreadIdValue;
+	unreadId = computed(() => this.unread() ? this.unreadIdValue ??= uniqueId("bf-list-item-unread") : null, ...ngDevMode ? [{ debugName: "unreadId" }] : 	/* istanbul ignore next */ []);
+	actionLabelPrefix = computed(() => this.hasAction() ? this.unreadId() : null, ...ngDevMode ? [{ debugName: "actionLabelPrefix" }] : 	/* istanbul ignore next */ []);
+	titleWeight = computed(() => this.unread() ? "font-extrabold" : "font-bold", ...ngDevMode ? [{ debugName: "titleWeight" }] : 	/* istanbul ignore next */ []);
+	textClasses = computed(() => TEXT$1[this.truncate() ? "truncate" : "wrap"], ...ngDevMode ? [{ debugName: "textClasses" }] : 	/* istanbul ignore next */ []);
 	classes = computed(() => [
 		ROW$1,
 		this.interactive() ? INTERACTIVE$1 : ACTION$1[this.actionState()],
@@ -6542,6 +6584,13 @@ var BfListItemComponent = class BfListItemComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			unread: {
+				classPropertyName: "unread",
+				publicName: "unread",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: { clicked: "clicked" },
@@ -6569,11 +6618,20 @@ var BfListItemComponent = class BfListItemComponent {
     }
     <ng-template #content>
       <ng-content select="[bfSlot=leading]" />
-      <span class="flex min-w-0 flex-1 flex-col">
+      <span class="relative flex min-w-0 flex-1 flex-col">
+        @if (unreadId(); as id) {
+          <!-- Read before the title; with a bfAction the link's name takes it (aria-labelledby),
+               so the text itself is hidden from the tree to be read once. -->
+          <span [class]="unreadDot"
+            ><span [id]="id" class="sr-only" [attr.aria-hidden]="hasAction() ? 'true' : null"
+              >{{ labels.listItemUnread }},
+            </span></span
+          >
+        }
         @if (title()) {
-          <span class="text-label font-bold {{ textClasses() }}">{{ title() }}</span>
+          <span class="text-label {{ titleWeight() }} {{ textClasses() }}">{{ title() }}</span>
         }
-        <span class="text-label font-bold empty:hidden {{ textClasses() }}"
+        <span class="text-label {{ titleWeight() }} empty:hidden {{ textClasses() }}"
           ><ng-content select="[bfSlot=title]"
         /></span>
         @if (subtitle()) {
@@ -6633,11 +6691,20 @@ i0.ɵɵngDeclareClassMetadata({
     }
     <ng-template #content>
       <ng-content select="[bfSlot=leading]" />
-      <span class="flex min-w-0 flex-1 flex-col">
+      <span class="relative flex min-w-0 flex-1 flex-col">
+        @if (unreadId(); as id) {
+          <!-- Read before the title; with a bfAction the link's name takes it (aria-labelledby),
+               so the text itself is hidden from the tree to be read once. -->
+          <span [class]="unreadDot"
+            ><span [id]="id" class="sr-only" [attr.aria-hidden]="hasAction() ? 'true' : null"
+              >{{ labels.listItemUnread }},
+            </span></span
+          >
+        }
         @if (title()) {
-          <span class="text-label font-bold {{ textClasses() }}">{{ title() }}</span>
+          <span class="text-label {{ titleWeight() }} {{ textClasses() }}">{{ title() }}</span>
         }
-        <span class="text-label font-bold empty:hidden {{ textClasses() }}"
+        <span class="text-label {{ titleWeight() }} empty:hidden {{ textClasses() }}"
           ><ng-content select="[bfSlot=title]"
         /></span>
         @if (subtitle()) {
@@ -6702,6 +6769,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		unread: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "unread",
+				required: false
+			}]
+		}],
 		clicked: [{
 			type: i0.Output,
 			args: ["clicked"]
@@ -6890,7 +6965,7 @@ const SIZE$1 = {
 	sm: "h-2",
 	md: "h-2.5"
 };
-const TONE = {
+const TONE$1 = {
 	primary: "[&::-webkit-progress-value]:bg-primary-strong [&::-moz-progress-bar]:bg-primary-strong",
 	success: "[&::-webkit-progress-value]:bg-success [&::-moz-progress-bar]:bg-success",
 	warning: "[&::-webkit-progress-value]:bg-warning [&::-moz-progress-bar]:bg-warning",
@@ -6918,7 +6993,7 @@ var BfProgressComponent = class BfProgressComponent {
 		if (raw === void 0 || !Number.isFinite(raw)) return 0;
 		return Math.min(100, Math.max(0, Math.round(raw)));
 	}, ...ngDevMode ? [{ debugName: "percent" }] : 	/* istanbul ignore next */ []);
-	classes = computed(() => `${TRACK} ${SIZE$1[this.size()]} ${TONE[this.tone()]}`, ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
+	classes = computed(() => `${TRACK} ${SIZE$1[this.size()]} ${TONE$1[this.tone()]}`, ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
 	stripeClasses = computed(() => `${STRIPE} ${STRIPE_TONE[this.tone()]}`, ...ngDevMode ? [{ debugName: "stripeClasses" }] : 	/* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -8261,6 +8336,20 @@ var BfActionDirective = class BfActionDirective {
 	host = inject(BF_ACTION_HOST, { optional: true });
 	element = inject(ElementRef).nativeElement;
 	constructor() {
+		const own = this.element.getAttribute("aria-labelledby");
+		let prefixed = false;
+		afterRenderEffect({ write: () => {
+			const prefix = this.host?.actionLabelPrefix?.() ?? null;
+			if (prefix) {
+				this.element.id ||= uniqueId("bf-action");
+				this.element.setAttribute("aria-labelledby", `${prefix} ${own ?? this.element.id}`);
+				prefixed = true;
+			} else if (prefixed) {
+				if (own === null) this.element.removeAttribute("aria-labelledby");
+				else this.element.setAttribute("aria-labelledby", own);
+				prefixed = false;
+			}
+		} });
 		const unregister = this.host?.registerAction();
 		inject(DestroyRef).onDestroy(() => {
 			this.host?.setActionFocusVisible(false);
@@ -9217,7 +9306,13 @@ const BODY_TOUCH = {
 };
 const ALIGN = {
 	start: "text-start",
-	end: "text-end tabular-nums"
+	end: "text-end tabular-nums",
+	center: "text-center"
+};
+const CENTER_CELL = {
+	never: "[&>*]:mx-auto [&>*]:w-fit",
+	narrow: "@min-xl:[&>*]:mx-auto [&>*]:w-fit @max-xl:items-center",
+	coarse: "not-pointer-coarse:[&>*]:mx-auto [&>*]:w-fit pointer-coarse:items-center"
 };
 const HEAD_BASE = "px-3 py-0 align-middle text-label-xs font-bold text-text-muted";
 const BODY_BASE = "px-3 align-middle font-medium text-text";
@@ -9306,9 +9401,15 @@ const STACK_FIRST_CELL = {
 };
 const STACK_CELL = {
 	never: "",
-	narrow: "@max-xl:col-span-full @max-xl:flex @max-xl:h-auto @max-xl:items-baseline @max-xl:justify-between @max-xl:gap-3 @max-xl:px-0 @max-xl:py-1 @max-xl:text-end @max-xl:before:shrink-0 @max-xl:before:text-start @max-xl:before:text-label-xs @max-xl:before:font-bold @max-xl:before:text-text-muted @max-xl:before:content-[attr(data-label)_/_\"\"]",
-	coarse: "pointer-coarse:col-span-full pointer-coarse:flex pointer-coarse:h-auto pointer-coarse:items-baseline pointer-coarse:justify-between pointer-coarse:gap-3 pointer-coarse:px-0 pointer-coarse:py-1 pointer-coarse:text-end pointer-coarse:before:shrink-0 pointer-coarse:before:text-start pointer-coarse:before:text-label-xs pointer-coarse:before:font-bold pointer-coarse:before:text-text-muted pointer-coarse:before:content-[attr(data-label)_/_\"\"]"
+	narrow: "@max-xl:col-span-full @max-xl:flex @max-xl:h-auto @max-xl:justify-between @max-xl:gap-3 @max-xl:px-0 @max-xl:py-1 @max-xl:text-end @max-xl:before:shrink-0 @max-xl:before:text-start @max-xl:before:text-label-xs @max-xl:before:font-bold @max-xl:before:text-text-muted @max-xl:before:content-data-label",
+	coarse: "pointer-coarse:col-span-full pointer-coarse:flex pointer-coarse:h-auto pointer-coarse:justify-between pointer-coarse:gap-3 pointer-coarse:px-0 pointer-coarse:py-1 pointer-coarse:text-end pointer-coarse:before:shrink-0 pointer-coarse:before:text-start pointer-coarse:before:text-label-xs pointer-coarse:before:font-bold pointer-coarse:before:text-text-muted pointer-coarse:before:content-data-label"
+};
+const STACK_CELL_BASELINE = {
+	never: "",
+	narrow: "@max-xl:items-baseline",
+	coarse: "pointer-coarse:items-baseline"
 };
+const SORT_NONE = "";
 const STACK_EMPTY = {
 	never: "",
 	narrow: "@max-xl:block",
@@ -9357,16 +9458,23 @@ var BfTableComponent = class BfTableComponent {
 	}, ...ngDevMode ? [{ debugName: "someSelected" }] : 	/* istanbul ignore next */ []);
 	columnCount = computed(() => this.columns().length + (this.selectable() ? 1 : 0), ...ngDevMode ? [{ debugName: "columnCount" }] : 	/* istanbul ignore next */ []);
 	stacks = computed(() => this.stack() !== "never", ...ngDevMode ? [{ debugName: "stacks" }] : 	/* istanbul ignore next */ []);
-	sortOptions = computed(() => this.columns().filter((column) => column.sortable).flatMap((column) => [{
-		value: `${column.key}:ascending`,
-		label: this.labels.tableSortAscending(column.label)
-	}, {
-		value: `${column.key}:descending`,
-		label: this.labels.tableSortDescending(column.label)
-	}]), ...ngDevMode ? [{ debugName: "sortOptions" }] : 	/* istanbul ignore next */ []);
+	sortOptions = computed(() => {
+		const sortable = this.columns().filter((column) => column.sortable);
+		if (sortable.length === 0) return [];
+		return [{
+			value: SORT_NONE,
+			label: this.labels.tableSortNone
+		}, ...sortable.flatMap((column) => [{
+			value: `${column.key}:ascending`,
+			label: this.labels.tableSortAscending(column.label)
+		}, {
+			value: `${column.key}:descending`,
+			label: this.labels.tableSortDescending(column.label)
+		}])];
+	}, ...ngDevMode ? [{ debugName: "sortOptions" }] : 	/* istanbul ignore next */ []);
 	sortValue = computed(() => {
 		const sort = this.sort();
-		return sort ? `${sort.column}:${sort.direction}` : null;
+		return sort ? `${sort.column}:${sort.direction}` : SORT_NONE;
 	}, ...ngDevMode ? [{ debugName: "sortValue" }] : 	/* istanbul ignore next */ []);
 	hostClasses = computed(() => STACK_HOST[this.stack()], ...ngDevMode ? [{ debugName: "hostClasses" }] : 	/* istanbul ignore next */ []);
 	stackBarClasses = computed(() => `${STACK_BAR[this.stack()]} flex-wrap items-end justify-between gap-x-4 gap-y-2 pb-3`, ...ngDevMode ? [{ debugName: "stackBarClasses" }] : 	/* istanbul ignore next */ []);
@@ -9388,8 +9496,11 @@ var BfTableComponent = class BfTableComponent {
 		return `${HEAD_BASE} ${HEAD_CELL[this.resolvedSize()]} ${ALIGN[column.align ?? "start"]}`;
 	}
 	bodyClasses(column, first) {
-		const stacked = (first ? STACK_FIRST_CELL : STACK_CELL)[this.stack()];
-		return `${BODY_BASE} ${this.bodyHeight()} ${ALIGN[column.align ?? "start"]} ${stacked}`.trim();
+		const stack = this.stack();
+		const align = column.align ?? "start";
+		const center = align === "center" ? CENTER_CELL[stack] : "";
+		const stacked = first ? STACK_FIRST_CELL[stack] : `${STACK_CELL[stack]} ${center ? "" : STACK_CELL_BASELINE[stack]}`;
+		return `${BODY_BASE} ${this.bodyHeight()} ${ALIGN[align]} ${center} ${stacked}`.replace(/\s+/g, " ").trim();
 	}
 	rowClasses(key) {
 		const state = this.selectedKeys().has(key) ? "selected" : this.selectable() ? "selectable" : "static";
@@ -9425,6 +9536,10 @@ var BfTableComponent = class BfTableComponent {
 		});
 	}
 	sortFromOption(value) {
+		if (value === SORT_NONE) {
+			this.sort.set(null);
+			return;
+		}
 		const at = value.lastIndexOf(":");
 		const direction = value.slice(at + 1);
 		if (at > 0 && (direction === "ascending" || direction === "descending")) this.sort.set({
@@ -10394,6 +10509,320 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const TIMELINE_TIME_FORMAT = {
+	dateStyle: "medium",
+	timeStyle: "short"
+};
+const BF_TIMELINE = new InjectionToken("BF_TIMELINE");
+var BfTimelineComponent = class BfTimelineComponent {
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	timeFormat = input(TIMELINE_TIME_FORMAT, ...ngDevMode ? [{ debugName: "timeFormat" }] : 	/* istanbul ignore next */ []);
+	locale = input("", ...ngDevMode ? [{ debugName: "locale" }] : 	/* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfTimelineComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.1.7",
+		type: BfTimelineComponent,
+		isStandalone: true,
+		selector: "bf-timeline",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			timeFormat: {
+				classPropertyName: "timeFormat",
+				publicName: "timeFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "block" },
+		providers: [{
+			provide: BF_TIMELINE,
+			useExisting: BfTimelineComponent
+		}],
+		ngImport: i0,
+		template: `<div role="list" class="flex flex-col" [attr.aria-label]="label() || null">
+    <ng-content />
+  </div>`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfTimelineComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-timeline",
+			host: { class: "block" },
+			providers: [{
+				provide: BF_TIMELINE,
+				useExisting: BfTimelineComponent
+			}],
+			template: `<div role="list" class="flex flex-col" [attr.aria-label]="label() || null">
+    <ng-content />
+  </div>`
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		timeFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timeFormat",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}]
+	}
+});
+const TONE = {
+	neutral: "bg-text-subtle",
+	primary: "bg-primary",
+	success: "bg-success",
+	warning: "bg-warning",
+	danger: "bg-danger",
+	info: "bg-info"
+};
+const DOT = "relative mt-[calc(0.75rem-5px)] size-2.5 shrink-0 rounded-control forced-colors:bg-[CanvasText]";
+const MARKER$1 = "relative flex w-2.5 shrink-0 justify-center before:absolute before:top-3 before:-bottom-3 before:start-[calc(50%-0.5px)] before:border-s before:border-border before:content-[''] group-last/bf-timeline-event:before:hidden";
+const TEXT = "text-body text-text wrap-anywhere [&_a]:rounded-tile [&_a]:text-primary-text [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:decoration-2 [&_a]:focus-visible:ring-4 [&_a]:focus-visible:ring-ring [&_a]:focus-visible:outline-hidden";
+function toDate(time) {
+	if (time === null || time === "") return null;
+	const date = typeof time === "string" ? new Date(time) : time;
+	return Number.isNaN(date.getTime()) ? null : date;
+}
+function formatDate(date, locales, options) {
+	for (const locale of locales) for (const format of [options, TIMELINE_TIME_FORMAT]) try {
+		return new Intl.DateTimeFormat(locale, format).format(date);
+	} catch {}
+	return "";
+}
+var BfTimelineEventComponent = class BfTimelineEventComponent {
+	actor = input("", ...ngDevMode ? [{ debugName: "actor" }] : 	/* istanbul ignore next */ []);
+	time = input(null, ...ngDevMode ? [{ debugName: "time" }] : 	/* istanbul ignore next */ []);
+	timeText = input("", ...ngDevMode ? [{ debugName: "timeText" }] : 	/* istanbul ignore next */ []);
+	tone = input("neutral", ...ngDevMode ? [{ debugName: "tone" }] : 	/* istanbul ignore next */ []);
+	timeline = inject(BF_TIMELINE, { optional: true });
+	appLocale = inject(LOCALE_ID);
+	role = this.timeline ? "listitem" : null;
+	date = computed(() => toDate(this.time()), ...ngDevMode ? [{ debugName: "date" }] : 	/* istanbul ignore next */ []);
+	datetime = computed(() => {
+		const date = this.date();
+		if (!date) return null;
+		const time = this.time();
+		return typeof time === "string" ? time : date.toISOString();
+	}, ...ngDevMode ? [{ debugName: "datetime" }] : 	/* istanbul ignore next */ []);
+	timeLabel = computed(() => {
+		const date = this.date();
+		if (this.timeText()) return this.timeText();
+		if (!date) return "";
+		return formatDate(date, [
+			this.timeline?.locale() ?? "",
+			this.appLocale,
+			"en"
+		].filter(Boolean), this.timeline?.timeFormat() ?? TIMELINE_TIME_FORMAT);
+	}, ...ngDevMode ? [{ debugName: "timeLabel" }] : 	/* istanbul ignore next */ []);
+	markerClasses = MARKER$1;
+	textClasses = TEXT;
+	dotClasses = computed(() => `${DOT} ${TONE[this.tone()]}`, ...ngDevMode ? [{ debugName: "dotClasses" }] : 	/* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfTimelineEventComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfTimelineEventComponent,
+		isStandalone: true,
+		selector: "bf-timeline-event",
+		inputs: {
+			actor: {
+				classPropertyName: "actor",
+				publicName: "actor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			time: {
+				classPropertyName: "time",
+				publicName: "time",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			timeText: {
+				classPropertyName: "timeText",
+				publicName: "timeText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "attr.role": "role" },
+			classAttribute: "group/bf-timeline-event flex gap-3"
+		},
+		ngImport: i0,
+		template: `
+    <span aria-hidden="true" [class]="markerClasses"><span [class]="dotClasses()"></span></span>
+    <!-- The end slot wraps under the text once the text would get narrower than 16rem. -->
+    <div
+      class="flex min-w-0 flex-1 flex-wrap items-start gap-x-3 gap-y-2 pb-5 group-last/bf-timeline-event:pb-0"
+    >
+      <div class="min-w-0 flex-[1_1_16rem]">
+        <div [class]="textClasses"><ng-content /></div>
+        @if (actor() || timeLabel()) {
+          <p class="text-caption text-text-muted mt-0.5 wrap-anywhere">
+            @if (actor()) {
+              <span>{{ actor() }}</span>
+            }
+            @if (actor() && timeLabel()) {
+              <span aria-hidden="true"> · </span>
+            }
+            @if (datetime(); as machine) {
+              <time [attr.datetime]="machine">{{ timeLabel() }}</time>
+            } @else if (timeLabel()) {
+              <span>{{ timeLabel() }}</span>
+            }
+          </p>
+        }
+      </div>
+      <div class="flex shrink-0 items-center gap-2 empty:hidden">
+        <ng-content select="[bfSlot=end]" />
+      </div>
+    </div>
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfTimelineEventComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-timeline-event",
+			host: {
+				class: "group/bf-timeline-event flex gap-3",
+				"[attr.role]": "role"
+			},
+			template: `
+    <span aria-hidden="true" [class]="markerClasses"><span [class]="dotClasses()"></span></span>
+    <!-- The end slot wraps under the text once the text would get narrower than 16rem. -->
+    <div
+      class="flex min-w-0 flex-1 flex-wrap items-start gap-x-3 gap-y-2 pb-5 group-last/bf-timeline-event:pb-0"
+    >
+      <div class="min-w-0 flex-[1_1_16rem]">
+        <div [class]="textClasses"><ng-content /></div>
+        @if (actor() || timeLabel()) {
+          <p class="text-caption text-text-muted mt-0.5 wrap-anywhere">
+            @if (actor()) {
+              <span>{{ actor() }}</span>
+            }
+            @if (actor() && timeLabel()) {
+              <span aria-hidden="true"> · </span>
+            }
+            @if (datetime(); as machine) {
+              <time [attr.datetime]="machine">{{ timeLabel() }}</time>
+            } @else if (timeLabel()) {
+              <span>{{ timeLabel() }}</span>
+            }
+          </p>
+        }
+      </div>
+      <div class="flex shrink-0 items-center gap-2 empty:hidden">
+        <ng-content select="[bfSlot=end]" />
+      </div>
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		actor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actor",
+				required: false
+			}]
+		}],
+		time: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "time",
+				required: false
+			}]
+		}],
+		timeText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timeText",
+				required: false
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}]
+	}
+});
 const BF_BREADCRUMB = new InjectionToken("BF_BREADCRUMB");
 const CONTENT = {
 	ancestor: "inline-flex min-w-0 items-center px-1 wrap-anywhere text-text-muted [&>a]:-mx-1 [&>a]:inline-flex [&>a]:min-h-6 [&>a]:items-center [&>a]:rounded-tile [&>a]:px-1 [&>a]:text-text-muted [&>a]:underline-offset-4 [&>a]:transition-colors [&>a]:hover:text-text [&>a]:hover:underline [&>a]:focus-visible:ring-4 [&>a]:focus-visible:ring-ring [&>a]:focus-visible:outline-hidden [&>a]:pointer-coarse:min-h-hit",
@@ -11277,12 +11706,14 @@ var BfAppFrameComponent = class BfAppFrameComponent {
           headerClasses()
         }}"
       >
-        <div data-brand class="flex min-w-0 items-center empty:hidden">
-          <ng-content select="[bfSlot=brand]" />
-        </div>
+        <!-- The menu at the inline start, then the brand: the top app bar convention, and the
+             menu comes first in the tab order too. -->
         <div data-menu class="flex items-center empty:hidden">
           <ng-content select="[bfSlot=menu]" />
         </div>
+        <div data-brand class="flex min-w-0 items-center empty:hidden">
+          <ng-content select="[bfSlot=brand]" />
+        </div>
         <div data-actions class="ms-auto flex items-center gap-2 empty:hidden">
           <ng-content select="[bfSlot=actions]" />
         </div>
@@ -11340,12 +11771,14 @@ i0.ɵɵngDeclareClassMetadata({
           headerClasses()
         }}"
       >
-        <div data-brand class="flex min-w-0 items-center empty:hidden">
-          <ng-content select="[bfSlot=brand]" />
-        </div>
+        <!-- The menu at the inline start, then the brand: the top app bar convention, and the
+             menu comes first in the tab order too. -->
         <div data-menu class="flex items-center empty:hidden">
           <ng-content select="[bfSlot=menu]" />
         </div>
+        <div data-brand class="flex min-w-0 items-center empty:hidden">
+          <ng-content select="[bfSlot=brand]" />
+        </div>
         <div data-actions class="ms-auto flex items-center gap-2 empty:hidden">
           <ng-content select="[bfSlot=actions]" />
         </div>
@@ -11406,7 +11839,7 @@ const HOST = {
 	rect: `${BAR} block h-[var(--bf-skeleton-height,6rem)] rounded-field`,
 	circle: `${BAR} inline-block size-10 shrink-0 rounded-full`
 };
-const LINE = `${BAR} block h-[var(--bf-skeleton-height,0.75rem)] w-full rounded-full`;
+const LINE$1 = `${BAR} block h-[var(--bf-skeleton-height,0.75rem)] w-full rounded-full`;
 const LAST_LINE = `${BAR} block h-[var(--bf-skeleton-height,0.75rem)] w-3/5 rounded-full`;
 var BfSkeletonComponent = class BfSkeletonComponent {
 	shape = input("text", ...ngDevMode ? [{ debugName: "shape" }] : 	/* istanbul ignore next */ []);
@@ -11416,7 +11849,7 @@ var BfSkeletonComponent = class BfSkeletonComponent {
 	});
 	width = input("", ...ngDevMode ? [{ debugName: "width" }] : 	/* istanbul ignore next */ []);
 	height = input("", ...ngDevMode ? [{ debugName: "height" }] : 	/* istanbul ignore next */ []);
-	lineClasses = LINE;
+	lineClasses = LINE$1;
 	lastLineClasses = LAST_LINE;
 	lineList = computed(() => {
 		const count = Math.max(1, Math.floor(this.lines()) || 1);
@@ -13320,6 +13753,241 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const BF_STEPS = new InjectionToken("BF_STEPS");
+const MARKER = "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]";
+const LINE = "my-1 w-0 flex-1 border-s border-border group-last/bf-step:hidden";
+const TITLE = "pt-0.5 text-label font-bold text-text wrap-anywhere";
+var BfStepComponent = class BfStepComponent {
+	steps = inject(BF_STEPS, { optional: true });
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : 	/* istanbul ignore next */ []);
+	headingLevel = input(void 0, ...ngDevMode ? [{ debugName: "headingLevel" }] : 	/* istanbul ignore next */ []);
+	role = this.steps ? "listitem" : null;
+	markerClasses = MARKER;
+	lineClasses = LINE;
+	titleClasses = TITLE;
+	number = computed(() => {
+		const steps = this.steps;
+		return steps ? steps.start() + Math.max(steps.indexOf(this), 0) : 1;
+	}, ...ngDevMode ? [{ debugName: "number" }] : 	/* istanbul ignore next */ []);
+	positionInSet = computed(() => this.steps && this.steps.start() !== 1 ? this.number() : null, ...ngDevMode ? [{ debugName: "positionInSet" }] : 	/* istanbul ignore next */ []);
+	setSize = computed(() => {
+		const steps = this.steps;
+		return steps && steps.start() !== 1 ? steps.start() - 1 + steps.count() : null;
+	}, ...ngDevMode ? [{ debugName: "setSize" }] : 	/* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfStepComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfStepComponent,
+		isStandalone: true,
+		selector: "bf-step",
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.role": "role",
+				"attr.aria-posinset": "positionInSet()",
+				"attr.aria-setsize": "setSize()"
+			},
+			classAttribute: "group/bf-step block"
+		},
+		ngImport: i0,
+		template: `
+    <div class="flex gap-3">
+      <div class="flex shrink-0 flex-col items-center">
+        <span aria-hidden="true" [class]="markerClasses">{{ number() }}</span>
+        <span [class]="lineClasses"></span>
+      </div>
+      <div class="min-w-0 flex-1 pb-6 group-last/bf-step:pb-0">
+        @if (title()) {
+          @switch (headingLevel()) {
+            @case (2) {
+              <h2 [class]="titleClasses">{{ title() }}</h2>
+            }
+            @case (3) {
+              <h3 [class]="titleClasses">{{ title() }}</h3>
+            }
+            @case (4) {
+              <h4 [class]="titleClasses">{{ title() }}</h4>
+            }
+            @default {
+              <p [class]="titleClasses">{{ title() }}</p>
+            }
+          }
+        }
+        <div class="text-body text-text-secondary mt-1 wrap-anywhere empty:hidden">
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfStepComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-step",
+			host: {
+				class: "group/bf-step block",
+				"[attr.role]": "role",
+				"[attr.aria-posinset]": "positionInSet()",
+				"[attr.aria-setsize]": "setSize()"
+			},
+			template: `
+    <div class="flex gap-3">
+      <div class="flex shrink-0 flex-col items-center">
+        <span aria-hidden="true" [class]="markerClasses">{{ number() }}</span>
+        <span [class]="lineClasses"></span>
+      </div>
+      <div class="min-w-0 flex-1 pb-6 group-last/bf-step:pb-0">
+        @if (title()) {
+          @switch (headingLevel()) {
+            @case (2) {
+              <h2 [class]="titleClasses">{{ title() }}</h2>
+            }
+            @case (3) {
+              <h3 [class]="titleClasses">{{ title() }}</h3>
+            }
+            @case (4) {
+              <h4 [class]="titleClasses">{{ title() }}</h4>
+            }
+            @default {
+              <p [class]="titleClasses">{{ title() }}</p>
+            }
+          }
+        }
+        <div class="text-body text-text-secondary mt-1 wrap-anywhere empty:hidden">
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}]
+	}
+});
+var BfStepsComponent = class BfStepsComponent {
+	start = input(1, {
+		...ngDevMode ? { debugName: "start" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	steps = contentChildren(BfStepComponent, ...ngDevMode ? [{ debugName: "steps" }] : 	/* istanbul ignore next */ []);
+	count = computed(() => this.steps().length, ...ngDevMode ? [{ debugName: "count" }] : 	/* istanbul ignore next */ []);
+	indexOf(step) {
+		return this.steps().findIndex((item) => item === step);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfStepsComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.1.7",
+		type: BfStepsComponent,
+		isStandalone: true,
+		selector: "bf-steps",
+		inputs: { start: {
+			classPropertyName: "start",
+			publicName: "start",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { classAttribute: "block" },
+		providers: [{
+			provide: BF_STEPS,
+			useExisting: BfStepsComponent
+		}],
+		queries: [{
+			propertyName: "steps",
+			predicate: BfStepComponent,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `<div role="list" class="flex flex-col"><ng-content /></div>`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfStepsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-steps",
+			host: { class: "block" },
+			providers: [{
+				provide: BF_STEPS,
+				useExisting: BfStepsComponent
+			}],
+			template: `<div role="list" class="flex flex-col"><ng-content /></div>`
+		}]
+	}],
+	propDecorators: {
+		start: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "start",
+				required: false
+			}]
+		}],
+		steps: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => BfStepComponent), { isSignal: true }]
+		}]
+	}
+});
 function resetBfDocument(document) {
 	document.documentElement.classList.remove("dark", "cdk-global-scrollblock");
 	for (const child of Array.from(document.body.children)) child.removeAttribute("inert");
@@ -13331,6 +13999,6 @@ function provideBfDocumentReset() {
 		inject(DestroyRef).onDestroy(() => resetBfDocument(document));
 	});
 }
-export { BF_COLOR_SCHEME_STORAGE, BF_DEFAULTS, BF_DEFAULT_LABELS, BF_DEFAULT_VALUES, BF_LABELS, BF_SIDEBAR_STATE_STORAGE, BF_TAB_BAR, BF_TAB_BAR_CONTROLLER, BF_TAB_LINKS, BfActionBarComponent, BfActionDirective, BfAlertComponent, BfAppFrameComponent, BfAvatarComponent, BfBadgeComponent, BfBreadcrumbComponent, BfBreadcrumbItemComponent, BfButtonComponent, BfCalendarComponent, BfCardComponent, BfCheckboxComponent, BfChipComponent, BfChipGroupComponent, BfColorSchemeService, BfDescriptionItemComponent, BfDescriptionListComponent, BfEmptyStateComponent, BfFieldComponent, BfIconButtonComponent, BfInputComponent, BfListComponent, BfListItemComponent, BfNavGroupComponent, BfNavItemComponent, BfPageHeaderComponent, BfPaginationComponent, BfProgressComponent, BfRadioGroupComponent, BfSegmentedComponent, BfSelectComponent, BfSidebarComponent, BfSidebarStateService, BfSkeletonComponent, BfSpinnerComponent, BfStatComponent, BfTabBarComponent, BfTabComponent, BfTabGroupComponent, BfTabPanelComponent, BfTableCellDirective, BfTableComponent, BfTextareaComponent, BfThemeSwitchComponent, BfToggleComponent, BfToolbarComponent, BfTopNavComponent, bfFieldControlClass, bfValidationMessage, provideBfColorScheme, provideBfDefaults, provideBfLabels, provideBfSidebarState, BUTTON_CLASSES as ɵBF_BUTTON_CLASSES, ICON_BUTTON_CLASSES as ɵBF_ICON_BUTTON_CLASSES, BF_NAV as ɵBF_NAV, 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 { BF_COLOR_SCHEME_STORAGE, BF_DEFAULTS, BF_DEFAULT_LABELS, BF_DEFAULT_VALUES, BF_LABELS, BF_SIDEBAR_STATE_STORAGE, BF_TAB_BAR, BF_TAB_BAR_CONTROLLER, BF_TAB_LINKS, BfActionBarComponent, BfActionDirective, BfAlertComponent, BfAppFrameComponent, BfAvatarComponent, BfBadgeComponent, BfBreadcrumbComponent, BfBreadcrumbItemComponent, BfButtonComponent, BfCalendarComponent, BfCardComponent, BfCheckboxComponent, BfChipComponent, BfChipGroupComponent, BfColorSchemeService, BfDescriptionItemComponent, BfDescriptionListComponent, BfEmptyStateComponent, BfFieldComponent, BfIconButtonComponent, BfInputComponent, BfListComponent, BfListItemComponent, BfNavGroupComponent, BfNavItemComponent, BfPageHeaderComponent, BfPaginationComponent, BfProgressComponent, BfRadioGroupComponent, BfSegmentedComponent, BfSelectComponent, BfSidebarComponent, BfSidebarStateService, BfSkeletonComponent, BfSpinnerComponent, BfStatComponent, BfStepComponent, BfStepsComponent, BfTabBarComponent, BfTabComponent, BfTabGroupComponent, BfTabPanelComponent, BfTableCellDirective, BfTableComponent, BfTextareaComponent, BfThemeSwitchComponent, BfTimelineComponent, BfTimelineEventComponent, BfToggleComponent, BfToolbarComponent, BfTopNavComponent, bfFieldControlClass, bfValidationMessage, provideBfColorScheme, provideBfDefaults, provideBfLabels, provideBfSidebarState, BUTTON_CLASSES as ɵBF_BUTTON_CLASSES, ICON_BUTTON_CLASSES as ɵBF_ICON_BUTTON_CLASSES, BF_NAV as ɵBF_NAV, 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 };
 
 //# sourceMappingURL=bitforgehq-ui.mjs.map