@bitforgehq/ui 0.3.1 → 0.3.2

package/fesm2022/bitforgehq-ui.mjs

@@ -43,6 +43,9 @@ const BF_DEFAULT_LABELS = {
 	dialog: "Dialog",
 	notifications: "Notifications",
 	tableSelectAll: "Select all rows",
+	tableSortBy: "Sort by",
+	tableSortAscending: (column) => `${column}, ascending`,
+	tableSortDescending: (column) => `${column}, descending`,
 	theme: "Theme",
 	themeSystem: "System",
 	themeLight: "Light",
@@ -51,6 +54,9 @@ const BF_DEFAULT_LABELS = {
 	breadcrumbExpand: (count) => count === 1 ? "Show 1 more level" : `Show ${count} more levels`,
 	navigation: "Main",
 	navBadge: (count) => `${count} new`,
+	sidebarCollapse: "Collapse sidebar",
+	sidebarExpand: "Expand sidebar",
+	skipToContent: "Skip to main content",
 	pagination: "Pagination",
 	previousPage: "Previous page",
 	nextPage: "Next page",
@@ -138,6 +144,9 @@ function mergeLabels(parent, o) {
 		dialog: o.dialog ?? parent.dialog,
 		notifications: o.notifications ?? parent.notifications,
 		tableSelectAll: o.tableSelectAll ?? parent.tableSelectAll,
+		tableSortBy: o.tableSortBy ?? parent.tableSortBy,
+		tableSortAscending: o.tableSortAscending ?? parent.tableSortAscending,
+		tableSortDescending: o.tableSortDescending ?? parent.tableSortDescending,
 		theme: o.theme ?? parent.theme,
 		themeSystem: o.themeSystem ?? parent.themeSystem,
 		themeLight: o.themeLight ?? parent.themeLight,
@@ -146,6 +155,9 @@ function mergeLabels(parent, o) {
 		breadcrumbExpand: o.breadcrumbExpand ?? parent.breadcrumbExpand,
 		navigation: o.navigation ?? parent.navigation,
 		navBadge: o.navBadge ?? parent.navBadge,
+		sidebarCollapse: o.sidebarCollapse ?? parent.sidebarCollapse,
+		sidebarExpand: o.sidebarExpand ?? parent.sidebarExpand,
+		skipToContent: o.skipToContent ?? parent.skipToContent,
 		pagination: o.pagination ?? parent.pagination,
 		previousPage: o.previousPage ?? parent.previousPage,
 		nextPage: o.nextPage ?? parent.nextPage,
@@ -199,7 +211,7 @@ function mergeLabels(parent, o) {
 		}
 	};
 }
-const STORAGE_KEY = "bf-theme";
+const STORAGE_KEY$1 = "bf-theme";
 const DARK_QUERY = "(prefers-color-scheme: dark)";
 function createMemoryColorSchemeStorage() {
 	const values = /* @__PURE__ */ new Map();
@@ -221,17 +233,17 @@ const BF_COLOR_SCHEME_STORAGE = new InjectionToken("BF_COLOR_SCHEME_STORAGE", {
 	providedIn: "root",
 	factory: () => browserStorage() ?? createMemoryColorSchemeStorage()
 });
-function readStored(storage) {
+function readStored$1(storage) {
 	try {
-		const stored = storage.getItem(STORAGE_KEY);
+		const stored = storage.getItem(STORAGE_KEY$1);
 		return stored === "light" || stored === "dark" || stored === "system" ? stored : "system";
 	} catch {
 		return "system";
 	}
 }
-function persist(storage, scheme) {
+function persist$1(storage, scheme) {
 	try {
-		storage.setItem(STORAGE_KEY, scheme);
+		storage.setItem(STORAGE_KEY$1, scheme);
 	} catch {}
 }
 var BfColorSchemeService = class BfColorSchemeService {
@@ -239,7 +251,7 @@ var BfColorSchemeService = class BfColorSchemeService {
 	storage = inject(BF_COLOR_SCHEME_STORAGE);
 	injector = inject(Injector);
 	browser = isPlatformBrowser(inject(PLATFORM_ID));
-	scheme = signal(this.browser ? readStored(this.storage) : "system", ...ngDevMode ? [{ debugName: "scheme" }] : 	/* istanbul ignore next */ []);
+	scheme = signal(this.browser ? readStored$1(this.storage) : "system", ...ngDevMode ? [{ debugName: "scheme" }] : 	/* istanbul ignore next */ []);
 	prefersDark = signal(false, ...ngDevMode ? [{ debugName: "prefersDark" }] : 	/* istanbul ignore next */ []);
 	systemDark = this.prefersDark.asReadonly();
 	dark = computed(() => this.scheme() === "system" ? this.prefersDark() : this.scheme() === "dark", ...ngDevMode ? [{ debugName: "dark" }] : 	/* istanbul ignore next */ []);
@@ -252,10 +264,10 @@ var BfColorSchemeService = class BfColorSchemeService {
 		this.claimed = true;
 		const html = this.document.documentElement;
 		html.classList.toggle("dark", this.dark());
-		persist(this.storage, this.scheme());
+		persist$1(this.storage, this.scheme());
 		effect(() => {
 			html.classList.toggle("dark", this.dark());
-			persist(this.storage, this.scheme());
+			persist$1(this.storage, this.scheme());
 		}, { injector: this.injector });
 	}
 	followSystem() {
@@ -299,6 +311,68 @@ function provideBfColorScheme() {
 		inject(BfColorSchemeService).claimDocument();
 	})]);
 }
+const STORAGE_KEY = "bf-sidebar-collapsed";
+const BF_SIDEBAR_STATE_STORAGE = new InjectionToken("BF_SIDEBAR_STATE_STORAGE", {
+	providedIn: "root",
+	factory: () => browserStorage() ?? createMemoryColorSchemeStorage()
+});
+function readStored(storage) {
+	try {
+		return storage.getItem(STORAGE_KEY) === "true";
+	} catch {
+		return false;
+	}
+}
+function persist(storage, collapsed) {
+	try {
+		storage.setItem(STORAGE_KEY, String(collapsed));
+	} catch {}
+}
+var BfSidebarStateService = class BfSidebarStateService {
+	storage = inject(BF_SIDEBAR_STATE_STORAGE);
+	injector = inject(Injector);
+	browser = isPlatformBrowser(inject(PLATFORM_ID));
+	collapsed = signal(this.browser ? readStored(this.storage) : false, ...ngDevMode ? [{ debugName: "collapsed" }] : 	/* istanbul ignore next */ []);
+	claimed = false;
+	claimStorage() {
+		if (this.claimed || !this.browser) return;
+		this.claimed = true;
+		effect(() => {
+			const collapsed = this.collapsed();
+			persist(this.storage, collapsed);
+		}, { injector: this.injector });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfSidebarStateService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfSidebarStateService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfSidebarStateService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+function provideBfSidebarState() {
+	return makeEnvironmentProviders([provideEnvironmentInitializer(() => {
+		inject(BfSidebarStateService).claimStorage();
+	})]);
+}
 function isRecord(value) {
 	return typeof value === "object" && value !== null;
 }
@@ -527,7 +601,7 @@ const SIZE$5 = {
 	md: "h-10 text-label-sm",
 	lg: "h-12 text-label"
 };
-const PADDING$2 = {
+const PADDING$3 = {
 	sm: "px-3.5",
 	md: "px-4.5",
 	lg: "px-6"
@@ -543,7 +617,7 @@ const BUTTON_CLASSES = {
 	pressed: PRESSED$2.button,
 	current: CURRENT,
 	size: SIZE$5,
-	padding: PADDING$2,
+	padding: PADDING$3,
 	textPadding: TEXT_PADDING
 };
 var BfButtonComponent = class BfButtonComponent {
@@ -569,7 +643,7 @@ var BfButtonComponent = class BfButtonComponent {
 	classes = computed(() => {
 		const size = this.resolvedSize();
 		const variant = this.variant();
-		const padding = variant === "text" || variant === "ghost" ? TEXT_PADDING[size] : PADDING$2[size];
+		const padding = variant === "text" || variant === "ghost" ? TEXT_PADDING[size] : PADDING$3[size];
 		const hit = PILL_HIT[size][variant === "outline" ? "bordered" : "plain"];
 		const width = this.fullWidth() ? "w-full" : "";
 		const state = this.loading() && !this.isLink ? "loading" : "idle";
@@ -6641,7 +6715,7 @@ const VARIANT$3 = {
 	ink: "bg-text text-bg",
 	flat: "bg-surface text-text border-[1.5px] border-border-strong"
 };
-const PADDING$1 = {
+const PADDING$2 = {
 	md: "p-card",
 	lg: "p-card-lg"
 };
@@ -6664,7 +6738,7 @@ var BfCardComponent = class BfCardComponent {
 	classes = computed(() => [
 		BASE$4,
 		VARIANT$3[this.variant()],
-		PADDING$1[this.padding()],
+		PADDING$2[this.padding()],
 		this.interactive() ? INTERACTIVE : ACTION[this.actionState()]
 	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
 	actionState = computed(() => {
@@ -7438,10 +7512,16 @@ var BfEmptyStateComponent = class BfEmptyStateComponent {
       >
         <ng-content select="[bfSlot=icon]" />
       </div>
-      @if (headingLevel() === 3) {
-        <h3 class="text-heading text-text">{{ title() }}</h3>
-      } @else {
-        <h2 class="text-heading text-text">{{ title() }}</h2>
+      @switch (headingLevel()) {
+        @case (1) {
+          <h1 class="text-heading text-text">{{ title() }}</h1>
+        }
+        @case (3) {
+          <h3 class="text-heading text-text">{{ title() }}</h3>
+        }
+        @default {
+          <h2 class="text-heading text-text">{{ title() }}</h2>
+        }
       }
       @if (description()) {
         <p class="text-body text-text-muted max-w-sm">{{ description() }}</p>
@@ -7472,10 +7552,16 @@ i0.ɵɵngDeclareClassMetadata({
       >
         <ng-content select="[bfSlot=icon]" />
       </div>
-      @if (headingLevel() === 3) {
-        <h3 class="text-heading text-text">{{ title() }}</h3>
-      } @else {
-        <h2 class="text-heading text-text">{{ title() }}</h2>
+      @switch (headingLevel()) {
+        @case (1) {
+          <h1 class="text-heading text-text">{{ title() }}</h1>
+        }
+        @case (3) {
+          <h3 class="text-heading text-text">{{ title() }}</h3>
+        }
+        @default {
+          <h2 class="text-heading text-text">{{ title() }}</h2>
+        }
       }
       @if (description()) {
         <p class="text-body text-text-muted max-w-sm">{{ description() }}</p>
@@ -8966,10 +9052,19 @@ var BfToolbarComponent = class BfToolbarComponent {
 		template: `
     <ng-content />
     <ng-content select="[bfSlot=view]" />
-    <span role="status" [class]="statusClasses()">{{ status() }}</span>
-    <!-- One flex item, so the actions wrap onto the next row together, never one by one. -->
-    <div class="ms-auto flex max-w-full flex-wrap items-center gap-2 empty:hidden">
-      <ng-content select="[bfSlot=actions]" />
+    <!-- The status and the actions are one flex item that takes the rest of the row: on a narrow
+         row they wrap together, the status at the start and the actions at the inline end, so the
+         actions never sit alone on a row. With no actions the group dissolves (display: contents)
+         and the status is a plain item of the row. -->
+    <div
+      data-end
+      class="flex max-w-full grow flex-wrap items-center gap-2 has-[>div:empty]:contents"
+    >
+      <span role="status" [class]="statusClasses()">{{ status() }}</span>
+      <!-- One flex item, so the actions wrap together, never one by one. -->
+      <div class="ms-auto flex max-w-full flex-wrap items-center gap-2 empty:hidden">
+        <ng-content select="[bfSlot=actions]" />
+      </div>
     </div>
   `,
 		isInline: true
@@ -8993,10 +9088,19 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     <ng-content />
     <ng-content select="[bfSlot=view]" />
-    <span role="status" [class]="statusClasses()">{{ status() }}</span>
-    <!-- One flex item, so the actions wrap onto the next row together, never one by one. -->
-    <div class="ms-auto flex max-w-full flex-wrap items-center gap-2 empty:hidden">
-      <ng-content select="[bfSlot=actions]" />
+    <!-- The status and the actions are one flex item that takes the rest of the row: on a narrow
+         row they wrap together, the status at the start and the actions at the inline end, so the
+         actions never sit alone on a row. With no actions the group dissolves (display: contents)
+         and the status is a plain item of the row. -->
+    <div
+      data-end
+      class="flex max-w-full grow flex-wrap items-center gap-2 has-[>div:empty]:contents"
+    >
+      <span role="status" [class]="statusClasses()">{{ status() }}</span>
+      <!-- One flex item, so the actions wrap together, never one by one. -->
+      <div class="ms-auto flex max-w-full flex-wrap items-center gap-2 empty:hidden">
+        <ng-content select="[bfSlot=actions]" />
+      </div>
     </div>
   `
 		}]
@@ -9102,10 +9206,15 @@ const HEAD_CELL = {
 	lg: "h-12"
 };
 const BODY_CELL = {
-	sm: "h-10 py-1 text-label-sm pointer-coarse:h-hit",
+	sm: "h-10 py-1 text-label-sm",
 	md: "h-12 py-1 text-body",
 	lg: "h-14 py-1 text-body"
 };
+const BODY_TOUCH = {
+	never: "pointer-coarse:h-hit",
+	narrow: "@min-xl:pointer-coarse:h-hit",
+	coarse: ""
+};
 const ALIGN = {
 	start: "text-start",
 	end: "text-end tabular-nums"
@@ -9135,6 +9244,76 @@ const OWN_ARROWS = /* @__PURE__ */ new Set([
 	"menu",
 	"tab"
 ]);
+const STACK_HOST = {
+	never: "block",
+	narrow: "block @container",
+	coarse: "block"
+};
+const STACK_BAR = {
+	never: "hidden",
+	narrow: "hidden @max-xl:flex",
+	coarse: "hidden pointer-coarse:flex"
+};
+const STACK_TABLE = {
+	never: "",
+	narrow: "@max-xl:block",
+	coarse: "pointer-coarse:block"
+};
+const STACK_HEAD = {
+	never: "",
+	narrow: "@max-xl:sr-only",
+	coarse: "pointer-coarse:sr-only"
+};
+const STACK_ONLY = {
+	never: "hidden",
+	narrow: "hidden @max-xl:inline",
+	coarse: "hidden pointer-coarse:inline"
+};
+const STACK_NEVER = {
+	never: "",
+	narrow: "@max-xl:hidden",
+	coarse: "pointer-coarse:hidden"
+};
+const STACK_BODY = {
+	never: "",
+	narrow: "@max-xl:flex @max-xl:flex-col @max-xl:gap-2 @max-xl:divide-y-0",
+	coarse: "pointer-coarse:flex pointer-coarse:flex-col pointer-coarse:gap-2 pointer-coarse:divide-y-0"
+};
+const STACK_ROW = {
+	never: "",
+	narrow: "@max-xl:grid @max-xl:items-center @max-xl:gap-x-3 @max-xl:rounded-tile @max-xl:px-3 @max-xl:py-2",
+	coarse: "pointer-coarse:grid pointer-coarse:items-center pointer-coarse:gap-x-3 pointer-coarse:rounded-tile pointer-coarse:px-3 pointer-coarse:py-2"
+};
+const STACK_ROW_SELECTABLE = {
+	never: "",
+	narrow: "@max-xl:grid-cols-[auto_minmax(0,1fr)]",
+	coarse: "pointer-coarse:grid-cols-[auto_minmax(0,1fr)]"
+};
+const STACK_ROW_FILL = {
+	never: "",
+	narrow: "@max-xl:bg-surface-sunken",
+	coarse: "pointer-coarse:bg-surface-sunken"
+};
+const STACK_SELECT_CELL = {
+	never: "",
+	narrow: "@max-xl:flex @max-xl:h-auto @max-xl:w-auto @max-xl:p-0",
+	coarse: "pointer-coarse:flex pointer-coarse:h-auto pointer-coarse:w-auto pointer-coarse:p-0"
+};
+const STACK_FIRST_CELL = {
+	never: "",
+	narrow: "@max-xl:block @max-xl:h-auto @max-xl:px-0 @max-xl:py-1 @max-xl:text-start @max-xl:font-bold",
+	coarse: "pointer-coarse:block pointer-coarse:h-auto pointer-coarse:px-0 pointer-coarse:py-1 pointer-coarse:text-start pointer-coarse:font-bold"
+};
+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)_/_\"\"]"
+};
+const STACK_EMPTY = {
+	never: "",
+	narrow: "@max-xl:block",
+	coarse: "pointer-coarse:block"
+};
 var BfTableComponent = class BfTableComponent {
 	rows = input.required(...ngDevMode ? [{ debugName: "rows" }] : 	/* istanbul ignore next */ []);
 	columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : 	/* istanbul ignore next */ []);
@@ -9148,11 +9327,13 @@ var BfTableComponent = class BfTableComponent {
 	selection = model([], ...ngDevMode ? [{ debugName: "selection" }] : 	/* istanbul ignore next */ []);
 	selectAllLabel = input("", ...ngDevMode ? [{ debugName: "selectAllLabel" }] : 	/* istanbul ignore next */ []);
 	size = input(void 0, ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
+	stack = input("never", ...ngDevMode ? [{ debugName: "stack" }] : 	/* istanbul ignore next */ []);
 	labels = inject(BF_LABELS);
 	defaults = inject(BF_DEFAULTS);
 	table = viewChild.required("table", ...ngDevMode ? [{ debugName: "table" }] : 	/* istanbul ignore next */ []);
 	cells = contentChildren(BfTableCellDirective, ...ngDevMode ? [{ debugName: "cells" }] : 	/* istanbul ignore next */ []);
 	id = uniqueId("bf-table");
+	captionId = `${this.id}-caption`;
 	resolvedSize = computed(() => this.size() ?? this.defaults.controlSize, ...ngDevMode ? [{ debugName: "resolvedSize" }] : 	/* istanbul ignore next */ []);
 	selectAllName = computed(() => this.selectAllLabel() || this.labels.tableSelectAll, ...ngDevMode ? [{ debugName: "selectAllName" }] : 	/* istanbul ignore next */ []);
 	entries = computed(() => {
@@ -9175,18 +9356,50 @@ var BfTableComponent = class BfTableComponent {
 		return !this.allSelected() && this.entries().some((entry) => selected.has(entry.key));
 	}, ...ngDevMode ? [{ debugName: "someSelected" }] : 	/* istanbul ignore next */ []);
 	columnCount = computed(() => this.columns().length + (this.selectable() ? 1 : 0), ...ngDevMode ? [{ debugName: "columnCount" }] : 	/* istanbul ignore next */ []);
-	sortButton = SORT_BUTTON;
+	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 */ []);
+	sortValue = computed(() => {
+		const sort = this.sort();
+		return sort ? `${sort.column}:${sort.direction}` : null;
+	}, ...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 */ []);
+	tableClasses = computed(() => `w-full border-collapse ${STACK_TABLE[this.stack()]}`, ...ngDevMode ? [{ debugName: "tableClasses" }] : 	/* istanbul ignore next */ []);
+	headClasses = computed(() => STACK_HEAD[this.stack()], ...ngDevMode ? [{ debugName: "headClasses" }] : 	/* istanbul ignore next */ []);
+	bodyGroupClasses = computed(() => `divide-border divide-y ${STACK_BODY[this.stack()]}`, ...ngDevMode ? [{ debugName: "bodyGroupClasses" }] : 	/* istanbul ignore next */ []);
+	sortButtonClasses = computed(() => `${SORT_BUTTON} ${STACK_NEVER[this.stack()]}`, ...ngDevMode ? [{ debugName: "sortButtonClasses" }] : 	/* istanbul ignore next */ []);
+	notStackedClasses = computed(() => STACK_NEVER[this.stack()], ...ngDevMode ? [{ debugName: "notStackedClasses" }] : 	/* istanbul ignore next */ []);
+	stackedOnlyClasses = computed(() => STACK_ONLY[this.stack()], ...ngDevMode ? [{ debugName: "stackedOnlyClasses" }] : 	/* istanbul ignore next */ []);
+	stackEmptyClasses = computed(() => STACK_EMPTY[this.stack()], ...ngDevMode ? [{ debugName: "stackEmptyClasses" }] : 	/* istanbul ignore next */ []);
 	selectHeadClasses = computed(() => `${HEAD_BASE} ${HEAD_CELL[this.resolvedSize()]} ${SELECT_CELL}`, ...ngDevMode ? [{ debugName: "selectHeadClasses" }] : 	/* istanbul ignore next */ []);
-	selectBodyClasses = computed(() => `${BODY_BASE} ${BODY_CELL[this.resolvedSize()]} ${SELECT_CELL}`, ...ngDevMode ? [{ debugName: "selectBodyClasses" }] : 	/* istanbul ignore next */ []);
-	headClasses(column) {
+	selectBodyClasses = computed(() => `${BODY_BASE} ${this.bodyHeight()} ${SELECT_CELL} ${STACK_SELECT_CELL[this.stack()]}`, ...ngDevMode ? [{ debugName: "selectBodyClasses" }] : 	/* istanbul ignore next */ []);
+	bodyHeight = computed(() => {
+		const size = this.resolvedSize();
+		const touch = size === "sm" ? BODY_TOUCH[this.stack()] : "";
+		return touch ? `${BODY_CELL[size]} ${touch}` : BODY_CELL[size];
+	}, ...ngDevMode ? [{ debugName: "bodyHeight" }] : 	/* istanbul ignore next */ []);
+	headCellClasses(column) {
 		return `${HEAD_BASE} ${HEAD_CELL[this.resolvedSize()]} ${ALIGN[column.align ?? "start"]}`;
 	}
-	bodyClasses(column) {
-		return `${BODY_BASE} ${BODY_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();
 	}
 	rowClasses(key) {
 		const state = this.selectedKeys().has(key) ? "selected" : this.selectable() ? "selectable" : "static";
-		return `transition-colors ${ROW[state]}`;
+		const stack = this.stack();
+		const tile = [
+			STACK_ROW[stack],
+			this.selectable() ? STACK_ROW_SELECTABLE[stack] : "",
+			state === "selected" ? "" : STACK_ROW_FILL[stack]
+		].filter(Boolean).join(" ");
+		return `transition-colors ${ROW[state]} ${tile}`.trim();
 	}
 	arrowClasses(key) {
 		const sort = this.sort();
@@ -9211,6 +9424,14 @@ var BfTableComponent = class BfTableComponent {
 			direction
 		});
 	}
+	sortFromOption(value) {
+		const at = value.lastIndexOf(":");
+		const direction = value.slice(at + 1);
+		if (at > 0 && (direction === "ascending" || direction === "descending")) this.sort.set({
+			column: value.slice(0, at),
+			direction
+		});
+	}
 	selectAll(selected) {
 		const keys = this.entries().map((entry) => entry.key);
 		const shown = new Set(keys);
@@ -9238,7 +9459,7 @@ var BfTableComponent = class BfTableComponent {
 		for (let i = rows.indexOf(row) + step; i >= 0 && i < rows.length; i += step) {
 			const controls = [...rows[i]?.cells[cell.cellIndex]?.querySelectorAll(FOCUSABLE) ?? []];
 			const next = controls[Math.min(position, controls.length - 1)];
-			if (next instanceof HTMLElement) {
+			if (next instanceof HTMLElement && next.checkVisibility?.() !== false) {
 				event.preventDefault();
 				next.focus();
 				return;
@@ -9322,6 +9543,13 @@ var BfTableComponent = class BfTableComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			stack: {
+				classPropertyName: "stack",
+				publicName: "stack",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
@@ -9330,7 +9558,7 @@ var BfTableComponent = class BfTableComponent {
 		},
 		host: {
 			listeners: { "keydown": "onKeydown($event)" },
-			classAttribute: "block"
+			properties: { "class": "hostClasses()" }
 		},
 		queries: [{
 			propertyName: "cells",
@@ -9346,20 +9574,53 @@ var BfTableComponent = class BfTableComponent {
 		}],
 		ngImport: i0,
 		template: `
+    @if (stacks() && (selectable() || sortOptions().length > 0)) {
+      <div data-bf-table-stack-bar [class]="stackBarClasses()">
+        @if (selectable()) {
+          <bf-checkbox
+            [size]="resolvedSize()"
+            [label]="selectAllName()"
+            [checked]="allSelected()"
+            [indeterminate]="someSelected()"
+            [disabled]="entries().length === 0"
+            (changed)="selectAll($event)"
+          />
+        }
+        @if (sortOptions().length > 0) {
+          <bf-select
+            class="min-w-0 flex-1 basis-36"
+            [label]="labels.tableSortBy"
+            [options]="sortOptions()"
+            [value]="sortValue()"
+            (changed)="sortFromOption($event)"
+          />
+        }
+      </div>
+    }
     <div data-bf-table-scroller class="max-w-full overflow-x-auto">
-      <table #table class="w-full border-collapse">
+      <table
+        #table
+        [attr.role]="stacks() ? 'table' : null"
+        [attr.aria-labelledby]="stacks() && label() ? captionId : null"
+        [class]="tableClasses()"
+      >
         @if (label()) {
-          <caption class="sr-only">
+          <caption class="sr-only" [attr.id]="stacks() ? captionId : null">
             {{
               label()
             }}
           </caption>
         }
-        <thead>
-          <tr class="border-border border-b">
+        <thead [attr.role]="stacks() ? 'rowgroup' : null" [class]="headClasses()">
+          <tr class="border-border border-b" [attr.role]="stacks() ? 'row' : null">
             @if (selectable()) {
-              <th scope="col" [class]="selectHeadClasses()">
+              <th
+                scope="col"
+                [attr.role]="stacks() ? 'columnheader' : null"
+                [class]="selectHeadClasses()"
+              >
                 <bf-checkbox
+                  [class]="notStackedClasses()"
                   [size]="resolvedSize()"
                   [checked]="allSelected()"
                   [indeterminate]="someSelected()"
@@ -9372,15 +9633,21 @@ var BfTableComponent = class BfTableComponent {
             @for (column of columns(); track column.key) {
               <th
                 scope="col"
+                [attr.role]="stacks() ? 'columnheader' : null"
                 [attr.data-bf-column]="column.key"
                 [attr.aria-sort]="ariaSort(column.key)"
-                [class]="headClasses(column)"
+                [class]="headCellClasses(column)"
               >
                 @if (column.sortable) {
-                  <button type="button" [class]="sortButton" (click)="sortBy(column.key)">
+                  <button type="button" [class]="sortButtonClasses()" (click)="sortBy(column.key)">
                     {{ column.label }}
                     <span aria-hidden="true" [class]="arrowClasses(column.key)"></span>
                   </button>
+                  @if (stacks()) {
+                    <span data-bf-stacked-label [class]="stackedOnlyClasses()">{{
+                      column.label
+                    }}</span>
+                  }
                 } @else {
                   {{ column.label }}
                 }
@@ -9388,11 +9655,15 @@ var BfTableComponent = class BfTableComponent {
             }
           </tr>
         </thead>
-        <tbody class="divide-border divide-y">
+        <tbody [attr.role]="stacks() ? 'rowgroup' : null" [class]="bodyGroupClasses()">
           @for (entry of entries(); track entry.key) {
-            <tr data-bf-table-row [class]="rowClasses(entry.key)">
+            <tr
+              data-bf-table-row
+              [attr.role]="stacks() ? 'row' : null"
+              [class]="rowClasses(entry.key)"
+            >
               @if (selectable()) {
-                <td [class]="selectBodyClasses()">
+                <td [attr.role]="stacks() ? 'cell' : null" [class]="selectBodyClasses()">
                   <bf-checkbox
                     [size]="resolvedSize()"
                     [checked]="selectedKeys().has(entry.key)"
@@ -9404,8 +9675,10 @@ var BfTableComponent = class BfTableComponent {
               @for (column of columns(); track column.key; let first = $first) {
                 <td
                   data-bf-cell
+                  [attr.role]="stacks() ? 'cell' : null"
                   [attr.id]="first ? cellId(entry.index) : null"
-                  [class]="bodyClasses(column)"
+                  [attr.data-label]="stacks() && !first ? column.label : null"
+                  [class]="bodyClasses(column, first)"
                 >
                   @if (templates().get(column.key); as template) {
                     <ng-container
@@ -9421,8 +9694,18 @@ var BfTableComponent = class BfTableComponent {
               }
             </tr>
           } @empty {
-            <tr data-bf-table-empty>
-              <td [attr.colspan]="columnCount()"><ng-content select="[bfSlot=empty]" /></td>
+            <tr
+              data-bf-table-empty
+              [attr.role]="stacks() ? 'row' : null"
+              [class]="stackEmptyClasses()"
+            >
+              <td
+                [attr.role]="stacks() ? 'cell' : null"
+                [attr.colspan]="columnCount()"
+                [class]="stackEmptyClasses()"
+              >
+                <ng-content select="[bfSlot=empty]" />
+              </td>
             </tr>
           }
         </tbody>
@@ -9430,43 +9713,78 @@ var BfTableComponent = class BfTableComponent {
     </div>
   `,
 		isInline: true,
-		dependencies: [{
-			kind: "directive",
-			type: NgTemplateOutlet,
-			selector: "[ngTemplateOutlet]",
-			inputs: [
-				"ngTemplateOutletContext",
-				"ngTemplateOutlet",
-				"ngTemplateOutletInjector"
-			]
-		}, {
-			kind: "component",
-			type: BfCheckboxComponent,
-			selector: "bf-checkbox",
-			inputs: [
-				"checked",
-				"label",
-				"ariaLabel",
-				"ariaLabelledby",
-				"size",
-				"indeterminate",
-				"disabled",
-				"readonly",
-				"required",
-				"invalid",
-				"touched",
-				"errors",
-				"errorMessage",
-				"name",
-				"id"
-			],
-			outputs: [
-				"checkedChange",
-				"indeterminateChange",
-				"changed",
-				"touch"
-			]
-		}]
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: BfCheckboxComponent,
+				selector: "bf-checkbox",
+				inputs: [
+					"checked",
+					"label",
+					"ariaLabel",
+					"ariaLabelledby",
+					"size",
+					"indeterminate",
+					"disabled",
+					"readonly",
+					"required",
+					"invalid",
+					"touched",
+					"errors",
+					"errorMessage",
+					"name",
+					"id"
+				],
+				outputs: [
+					"checkedChange",
+					"indeterminateChange",
+					"changed",
+					"touch"
+				]
+			},
+			{
+				kind: "component",
+				type: BfSelectComponent,
+				selector: "bf-select",
+				inputs: [
+					"value",
+					"options",
+					"compareWith",
+					"size",
+					"label",
+					"ariaLabel",
+					"ariaLabelledby",
+					"placeholder",
+					"helpText",
+					"errorMessage",
+					"disabled",
+					"readonly",
+					"required",
+					"invalid",
+					"touched",
+					"errors",
+					"name",
+					"id"
+				],
+				outputs: [
+					"valueChange",
+					"changed",
+					"focused",
+					"blurred",
+					"touch"
+				]
+			}
+		]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
@@ -9479,25 +9797,62 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "bf-table",
 			host: {
-				class: "block",
+				"[class]": "hostClasses()",
 				"(keydown)": "onKeydown($event)"
 			},
-			imports: [NgTemplateOutlet, BfCheckboxComponent],
+			imports: [
+				NgTemplateOutlet,
+				BfCheckboxComponent,
+				BfSelectComponent
+			],
 			template: `
+    @if (stacks() && (selectable() || sortOptions().length > 0)) {
+      <div data-bf-table-stack-bar [class]="stackBarClasses()">
+        @if (selectable()) {
+          <bf-checkbox
+            [size]="resolvedSize()"
+            [label]="selectAllName()"
+            [checked]="allSelected()"
+            [indeterminate]="someSelected()"
+            [disabled]="entries().length === 0"
+            (changed)="selectAll($event)"
+          />
+        }
+        @if (sortOptions().length > 0) {
+          <bf-select
+            class="min-w-0 flex-1 basis-36"
+            [label]="labels.tableSortBy"
+            [options]="sortOptions()"
+            [value]="sortValue()"
+            (changed)="sortFromOption($event)"
+          />
+        }
+      </div>
+    }
     <div data-bf-table-scroller class="max-w-full overflow-x-auto">
-      <table #table class="w-full border-collapse">
+      <table
+        #table
+        [attr.role]="stacks() ? 'table' : null"
+        [attr.aria-labelledby]="stacks() && label() ? captionId : null"
+        [class]="tableClasses()"
+      >
         @if (label()) {
-          <caption class="sr-only">
+          <caption class="sr-only" [attr.id]="stacks() ? captionId : null">
             {{
               label()
             }}
           </caption>
         }
-        <thead>
-          <tr class="border-border border-b">
+        <thead [attr.role]="stacks() ? 'rowgroup' : null" [class]="headClasses()">
+          <tr class="border-border border-b" [attr.role]="stacks() ? 'row' : null">
             @if (selectable()) {
-              <th scope="col" [class]="selectHeadClasses()">
+              <th
+                scope="col"
+                [attr.role]="stacks() ? 'columnheader' : null"
+                [class]="selectHeadClasses()"
+              >
                 <bf-checkbox
+                  [class]="notStackedClasses()"
                   [size]="resolvedSize()"
                   [checked]="allSelected()"
                   [indeterminate]="someSelected()"
@@ -9510,15 +9865,21 @@ i0.ɵɵngDeclareClassMetadata({
             @for (column of columns(); track column.key) {
               <th
                 scope="col"
+                [attr.role]="stacks() ? 'columnheader' : null"
                 [attr.data-bf-column]="column.key"
                 [attr.aria-sort]="ariaSort(column.key)"
-                [class]="headClasses(column)"
+                [class]="headCellClasses(column)"
               >
                 @if (column.sortable) {
-                  <button type="button" [class]="sortButton" (click)="sortBy(column.key)">
+                  <button type="button" [class]="sortButtonClasses()" (click)="sortBy(column.key)">
                     {{ column.label }}
                     <span aria-hidden="true" [class]="arrowClasses(column.key)"></span>
                   </button>
+                  @if (stacks()) {
+                    <span data-bf-stacked-label [class]="stackedOnlyClasses()">{{
+                      column.label
+                    }}</span>
+                  }
                 } @else {
                   {{ column.label }}
                 }
@@ -9526,11 +9887,15 @@ i0.ɵɵngDeclareClassMetadata({
             }
           </tr>
         </thead>
-        <tbody class="divide-border divide-y">
+        <tbody [attr.role]="stacks() ? 'rowgroup' : null" [class]="bodyGroupClasses()">
           @for (entry of entries(); track entry.key) {
-            <tr data-bf-table-row [class]="rowClasses(entry.key)">
+            <tr
+              data-bf-table-row
+              [attr.role]="stacks() ? 'row' : null"
+              [class]="rowClasses(entry.key)"
+            >
               @if (selectable()) {
-                <td [class]="selectBodyClasses()">
+                <td [attr.role]="stacks() ? 'cell' : null" [class]="selectBodyClasses()">
                   <bf-checkbox
                     [size]="resolvedSize()"
                     [checked]="selectedKeys().has(entry.key)"
@@ -9542,8 +9907,10 @@ i0.ɵɵngDeclareClassMetadata({
               @for (column of columns(); track column.key; let first = $first) {
                 <td
                   data-bf-cell
+                  [attr.role]="stacks() ? 'cell' : null"
                   [attr.id]="first ? cellId(entry.index) : null"
-                  [class]="bodyClasses(column)"
+                  [attr.data-label]="stacks() && !first ? column.label : null"
+                  [class]="bodyClasses(column, first)"
                 >
                   @if (templates().get(column.key); as template) {
                     <ng-container
@@ -9559,8 +9926,18 @@ i0.ɵɵngDeclareClassMetadata({
               }
             </tr>
           } @empty {
-            <tr data-bf-table-empty>
-              <td [attr.colspan]="columnCount()"><ng-content select="[bfSlot=empty]" /></td>
+            <tr
+              data-bf-table-empty
+              [attr.role]="stacks() ? 'row' : null"
+              [class]="stackEmptyClasses()"
+            >
+              <td
+                [attr.role]="stacks() ? 'cell' : null"
+                [attr.colspan]="columnCount()"
+                [class]="stackEmptyClasses()"
+              >
+                <ng-content select="[bfSlot=empty]" />
+              </td>
             </tr>
           }
         </tbody>
@@ -9648,6 +10025,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		stack: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stack",
+				required: false
+			}]
+		}],
 		table: [{
 			type: i0.ViewChild,
 			args: ["table", { isSignal: true }]
@@ -9789,7 +10174,14 @@ i0.ɵɵngDeclareClassMetadata({
 const BASE$1 = "flex h-full items-start gap-3 text-start";
 const VARIANT = {
 	plain: "",
-	card: "rounded-card bg-surface p-card border-[1.5px] border-border-strong"
+	card: "rounded-card bg-surface p-card border-[1.5px] border-border-strong",
+	tile: "rounded-card bg-surface-sunken p-card"
+};
+const ICON_TILE = "rounded-tile text-text-muted flex size-10 shrink-0 items-center justify-center empty:hidden";
+const ICON_TILE_SURFACE = {
+	plain: "bg-surface-sunken",
+	card: "bg-surface-sunken",
+	tile: "bg-surface"
 };
 const DELTA_BASE = "inline-flex items-center gap-1 rounded-control px-2 py-1 text-micro font-bold leading-none tabular-nums";
 const DELTA_TONE = {
@@ -9811,6 +10203,7 @@ var BfStatComponent = class BfStatComponent {
 	trendIntent = input("positive", ...ngDevMode ? [{ debugName: "trendIntent" }] : 	/* istanbul ignore next */ []);
 	labels = inject(BF_LABELS);
 	classes = computed(() => [BASE$1, VARIANT[this.variant()]].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
+	iconTileClasses = computed(() => `${ICON_TILE} ${ICON_TILE_SURFACE[this.variant()]}`, ...ngDevMode ? [{ debugName: "iconTileClasses" }] : 	/* istanbul ignore next */ []);
 	deltaClasses = computed(() => {
 		const trend = this.trend();
 		const tone = trend === void 0 || trend === "flat" ? "neutral" : trend === "up" === (this.trendIntent() === "positive") ? "good" : "bad";
@@ -9891,11 +10284,7 @@ var BfStatComponent = class BfStatComponent {
 		ngImport: i0,
 		template: `
     <div [class]="classes()">
-      <span
-        data-tile
-        class="rounded-tile bg-surface-sunken text-text-muted flex size-10 shrink-0 items-center justify-center empty:hidden"
-        ><ng-content select="[bfSlot=icon]"
-      /></span>
+      <span data-tile [class]="iconTileClasses()"><ng-content select="[bfSlot=icon]" /></span>
       <dl class="flex min-w-0 flex-col gap-1">
         <dt class="text-caption text-text-muted">{{ label() }}</dt>
         <dd
@@ -9931,11 +10320,7 @@ i0.ɵɵngDeclareClassMetadata({
 			host: { class: "block" },
 			template: `
     <div [class]="classes()">
-      <span
-        data-tile
-        class="rounded-tile bg-surface-sunken text-text-muted flex size-10 shrink-0 items-center justify-center empty:hidden"
-        ><ng-content select="[bfSlot=icon]"
-      /></span>
+      <span data-tile [class]="iconTileClasses()"><ng-content select="[bfSlot=icon]" /></span>
       <dl class="flex min-w-0 flex-col gap-1">
         <dt class="text-caption text-text-muted">{{ label() }}</dt>
         <dd
@@ -10303,6 +10688,7 @@ var BfSidebarComponent = class BfSidebarComponent {
 	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	collapsed = model(false, ...ngDevMode ? [{ debugName: "collapsed" }] : 	/* istanbul ignore next */ []);
 	labels = inject(BF_LABELS);
+	navId = uniqueId("bf-sidebar");
 	name = computed(() => this.label() || this.labels.navigation, ...ngDevMode ? [{ debugName: "name" }] : 	/* istanbul ignore next */ []);
 	width = computed(() => this.collapsed() ? "collapsed" : "expanded", ...ngDevMode ? [{ debugName: "width" }] : 	/* istanbul ignore next */ []);
 	hostClasses = computed(() => HOST$2[this.width()], ...ngDevMode ? [{ debugName: "hostClasses" }] : 	/* istanbul ignore next */ []);
@@ -10344,14 +10730,20 @@ var BfSidebarComponent = class BfSidebarComponent {
 		} },
 		providers: [{
 			provide: BF_NAV,
-			useFactory: () => ({
-				layout: "sidebar",
-				collapsed: inject(BfSidebarComponent).collapsed
-			})
+			useFactory: () => {
+				const sidebar = inject(BfSidebarComponent);
+				return {
+					layout: "sidebar",
+					collapsed: sidebar.collapsed,
+					navId: sidebar.navId,
+					setCollapsed: (collapsed) => sidebar.collapsed.set(collapsed)
+				};
+			}
 		}],
 		ngImport: i0,
 		template: `
     <nav
+      [id]="navId"
       [attr.aria-label]="name()"
       class="border-border bg-surface flex min-h-0 flex-1 flex-col gap-6 border-e p-3"
     >
@@ -10387,13 +10779,19 @@ i0.ɵɵngDeclareClassMetadata({
 			},
 			providers: [{
 				provide: BF_NAV,
-				useFactory: () => ({
-					layout: "sidebar",
-					collapsed: inject(BfSidebarComponent).collapsed
-				})
+				useFactory: () => {
+					const sidebar = inject(BfSidebarComponent);
+					return {
+						layout: "sidebar",
+						collapsed: sidebar.collapsed,
+						navId: sidebar.navId,
+						setCollapsed: (collapsed) => sidebar.collapsed.set(collapsed)
+					};
+				}
 			}],
 			template: `
     <nav
+      [id]="navId"
       [attr.aria-label]="name()"
       class="border-border bg-surface flex min-h-0 flex-1 flex-col gap-6 border-e p-3"
     >
@@ -10465,7 +10863,9 @@ var BfTopNavComponent = class BfTopNavComponent {
 			provide: BF_NAV,
 			useFactory: () => ({
 				layout: "top",
-				collapsed: signal(false).asReadonly()
+				collapsed: signal(false).asReadonly(),
+				navId: null,
+				setCollapsed: () => void 0
 			})
 		}],
 		ngImport: i0,
@@ -10491,7 +10891,9 @@ i0.ɵɵngDeclareClassMetadata({
 				provide: BF_NAV,
 				useFactory: () => ({
 					layout: "top",
-					collapsed: signal(false).asReadonly()
+					collapsed: signal(false).asReadonly(),
+					navId: null,
+					setCollapsed: () => void 0
 				})
 			}],
 			template: `
@@ -10596,7 +10998,7 @@ const HEIGHT = {
 	md: "min-h-10 gap-3 text-label-sm pointer-coarse:min-h-hit",
 	lg: "min-h-12 gap-3 text-label pointer-coarse:min-h-hit"
 };
-const PADDING = {
+const PADDING$1 = {
 	sm: "px-3",
 	md: "px-3",
 	lg: "px-4"
@@ -10638,7 +11040,7 @@ var BfNavItemComponent = class BfNavItemComponent {
 		return [
 			BASE,
 			HEIGHT[size],
-			form === "collapsed" ? SQUARE[size] : PADDING[size],
+			form === "collapsed" ? SQUARE[size] : PADDING$1[size],
 			FORM[form]
 		].join(" ");
 	}, ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
@@ -10768,6 +11170,236 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const SIDEBAR = {
+	md: "hidden md:flex",
+	lg: "hidden lg:flex"
+};
+const HEADER = {
+	md: "flex md:hidden",
+	lg: "flex lg:hidden"
+};
+const PADDING = {
+	md: "p-4 md:p-8",
+	lg: "p-4 lg:p-8"
+};
+const WIDTH = {
+	md: "max-w-3xl",
+	lg: "max-w-5xl",
+	xl: "max-w-7xl",
+	full: "max-w-none"
+};
+var BfAppFrameComponent = class BfAppFrameComponent {
+	breakpoint = input("md", ...ngDevMode ? [{ debugName: "breakpoint" }] : 	/* istanbul ignore next */ []);
+	contentWidth = input("xl", ...ngDevMode ? [{ debugName: "contentWidth" }] : 	/* istanbul ignore next */ []);
+	mainId = input(uniqueId("bf-app-frame-main"), ...ngDevMode ? [{ debugName: "mainId" }] : 	/* istanbul ignore next */ []);
+	labels = inject(BF_LABELS);
+	host = inject(ElementRef);
+	main = viewChild.required("main", ...ngDevMode ? [{ debugName: "main" }] : 	/* istanbul ignore next */ []);
+	nested = signal(false, ...ngDevMode ? [{ debugName: "nested" }] : 	/* istanbul ignore next */ []);
+	sidebarClasses = computed(() => SIDEBAR[this.breakpoint()], ...ngDevMode ? [{ debugName: "sidebarClasses" }] : 	/* istanbul ignore next */ []);
+	headerClasses = computed(() => HEADER[this.breakpoint()], ...ngDevMode ? [{ debugName: "headerClasses" }] : 	/* istanbul ignore next */ []);
+	paddingClasses = computed(() => PADDING[this.breakpoint()], ...ngDevMode ? [{ debugName: "paddingClasses" }] : 	/* istanbul ignore next */ []);
+	widthClasses = computed(() => WIDTH[this.contentWidth()], ...ngDevMode ? [{ debugName: "widthClasses" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender({ read: () => this.nested.set(this.host.nativeElement.parentElement?.closest("main, [role=\"main\"]") != null) });
+	}
+	skip(event) {
+		event.preventDefault();
+		this.main().nativeElement.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfAppFrameComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.1.7",
+		type: BfAppFrameComponent,
+		isStandalone: true,
+		selector: "bf-app-frame",
+		inputs: {
+			breakpoint: {
+				classPropertyName: "breakpoint",
+				publicName: "breakpoint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			contentWidth: {
+				classPropertyName: "contentWidth",
+				publicName: "contentWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mainId: {
+				classPropertyName: "mainId",
+				publicName: "mainId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "bg-bg text-text relative flex" },
+		viewQueries: [{
+			propertyName: "main",
+			first: true,
+			predicate: ["main"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <!-- The skip link focuses the content by script: under <base href="/"> a bare "#id" link
+         resolves against the base, so following it would load the root URL instead of moving
+         focus. The href stays for its link semantics and a copied or middle-clicked URL. -->
+    <a
+      data-skip-link
+      [href]="'#' + mainId()"
+      class="bg-surface text-text text-label-sm shadow-floating rounded-control focus-visible:ring-ring absolute start-4 top-4 z-50 px-4 py-2 font-bold not-focus:sr-only focus-visible:ring-4 focus-visible:outline-hidden"
+      (click)="skip($event)"
+      >{{ labels.skipToContent }}</a
+    >
+    <!-- From the breakpoint up the sidebar column sticks to the viewport at its full height (or
+         the frame's, when a consumer gives it one); the bf-sidebar stretches to fill it and
+         scrolls its own destinations. -->
+    <div data-sidebar class="sticky top-0 h-dvh max-h-full shrink-0 {{ sidebarClasses() }}">
+      <ng-content select="[bfSlot=sidebar]" />
+    </div>
+    <div data-column class="flex min-w-0 flex-1 flex-col">
+      <header
+        data-bar
+        class="bg-surface border-border sticky top-0 z-10 min-h-14 items-center gap-3 border-b px-4 py-2 {{
+          headerClasses()
+        }}"
+      >
+        <div data-brand class="flex min-w-0 items-center empty:hidden">
+          <ng-content select="[bfSlot=brand]" />
+        </div>
+        <div data-menu class="flex items-center empty:hidden">
+          <ng-content select="[bfSlot=menu]" />
+        </div>
+        <div data-actions class="ms-auto flex items-center gap-2 empty:hidden">
+          <ng-content select="[bfSlot=actions]" />
+        </div>
+      </header>
+      <!-- A div with the main role rather than <main>: nested inside another page's main (a docs
+           preview) it drops the role, so the document keeps exactly one main landmark. -->
+      <div
+        #main
+        data-main
+        [id]="mainId()"
+        tabindex="-1"
+        [attr.role]="nested() ? null : 'main'"
+        class="min-w-0 flex-1 outline-hidden {{ paddingClasses() }}"
+      >
+        <div data-content class="mx-auto w-full {{ widthClasses() }}">
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfAppFrameComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-app-frame",
+			host: { class: "bg-bg text-text relative flex" },
+			template: `
+    <!-- The skip link focuses the content by script: under <base href="/"> a bare "#id" link
+         resolves against the base, so following it would load the root URL instead of moving
+         focus. The href stays for its link semantics and a copied or middle-clicked URL. -->
+    <a
+      data-skip-link
+      [href]="'#' + mainId()"
+      class="bg-surface text-text text-label-sm shadow-floating rounded-control focus-visible:ring-ring absolute start-4 top-4 z-50 px-4 py-2 font-bold not-focus:sr-only focus-visible:ring-4 focus-visible:outline-hidden"
+      (click)="skip($event)"
+      >{{ labels.skipToContent }}</a
+    >
+    <!-- From the breakpoint up the sidebar column sticks to the viewport at its full height (or
+         the frame's, when a consumer gives it one); the bf-sidebar stretches to fill it and
+         scrolls its own destinations. -->
+    <div data-sidebar class="sticky top-0 h-dvh max-h-full shrink-0 {{ sidebarClasses() }}">
+      <ng-content select="[bfSlot=sidebar]" />
+    </div>
+    <div data-column class="flex min-w-0 flex-1 flex-col">
+      <header
+        data-bar
+        class="bg-surface border-border sticky top-0 z-10 min-h-14 items-center gap-3 border-b px-4 py-2 {{
+          headerClasses()
+        }}"
+      >
+        <div data-brand class="flex min-w-0 items-center empty:hidden">
+          <ng-content select="[bfSlot=brand]" />
+        </div>
+        <div data-menu class="flex items-center empty:hidden">
+          <ng-content select="[bfSlot=menu]" />
+        </div>
+        <div data-actions class="ms-auto flex items-center gap-2 empty:hidden">
+          <ng-content select="[bfSlot=actions]" />
+        </div>
+      </header>
+      <!-- A div with the main role rather than <main>: nested inside another page's main (a docs
+           preview) it drops the role, so the document keeps exactly one main landmark. -->
+      <div
+        #main
+        data-main
+        [id]="mainId()"
+        tabindex="-1"
+        [attr.role]="nested() ? null : 'main'"
+        class="min-w-0 flex-1 outline-hidden {{ paddingClasses() }}"
+      >
+        <div data-content class="mx-auto w-full {{ widthClasses() }}">
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		breakpoint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "breakpoint",
+				required: false
+			}]
+		}],
+		contentWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentWidth",
+				required: false
+			}]
+		}],
+		mainId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mainId",
+				required: false
+			}]
+		}],
+		main: [{
+			type: i0.ViewChild,
+			args: ["main", { isSignal: true }]
+		}]
+	}
+});
 const BAR = "relative overflow-hidden bg-surface-sunken after:absolute after:inset-0 after:bg-linear-to-r after:from-transparent after:via-surface/70 after:to-transparent after:content-[''] after:animate-skeleton-shimmer rtl:after:animate-skeleton-shimmer-rtl motion-reduce:after:hidden forced-colors:border forced-colors:border-[GrayText]";
 const HOST = {
 	text: "flex flex-col gap-2",
@@ -12699,6 +13331,6 @@ function provideBfDocumentReset() {
 		inject(DestroyRef).onDestroy(() => resetBfDocument(document));
 	});
 }
-export { BF_COLOR_SCHEME_STORAGE, BF_DEFAULTS, BF_DEFAULT_LABELS, BF_DEFAULT_VALUES, BF_LABELS, BF_TAB_BAR, BF_TAB_BAR_CONTROLLER, BF_TAB_LINKS, BfActionBarComponent, BfActionDirective, BfAlertComponent, 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, BfSkeletonComponent, BfSpinnerComponent, BfStatComponent, BfTabBarComponent, BfTabComponent, BfTabGroupComponent, BfTabPanelComponent, BfTableCellDirective, BfTableComponent, BfTextareaComponent, BfThemeSwitchComponent, BfToggleComponent, BfToolbarComponent, BfTopNavComponent, bfFieldControlClass, bfValidationMessage, provideBfColorScheme, provideBfDefaults, provideBfLabels, BUTTON_CLASSES as ɵBF_BUTTON_CLASSES, ICON_BUTTON_CLASSES as ɵBF_ICON_BUTTON_CLASSES, 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, 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 };
 
 //# sourceMappingURL=bitforgehq-ui.mjs.map