@magmonium/one 0.4.50 → 0.4.51

package/fesm2022/magmonium-one.mjs

@@ -14,8 +14,8 @@ import { t as InputType } from "./magmonium-one-input-DqHPorA1.mjs";
 import { r as PLACED_CHECKBOX, t as CheckboxInputComponent } from "./magmonium-one-checkbox-CS83TVYG.mjs";
 import { a as ToolTipDirective, c as DragListItemDirective, d as MarginDirective, f as PaddingDirective, i as PositionDirective, l as DragListDirective, n as stringToColor, o as FileUploadDirective, p as SPACING_INWARD, r as HighlightDirective, s as AutosizeDirective, t as MHeroColorDirective, u as DraggableDirective } from "./magmonium-one-directives-O1JyFBc3.mjs";
 import { t as HeaderComponent } from "./magmonium-one-header-7MmiF2rG.mjs";
-import { i as mergeUniqueWith, n as mergeUnique, r as mergeUniqueBy, t as ButtonGroupComponent } from "./magmonium-one-group-CYIO2BE-.mjs";
-import { n as ContextMenuBoxComponent, r as MenuComponent, t as ContextMenuComponent } from "./magmonium-one-menu-Dstqv7P7.mjs";
+import { i as mergeUniqueWith, n as mergeUnique, r as mergeUniqueBy, t as ButtonGroupComponent } from "./magmonium-one-group-BBaepb2P.mjs";
+import { n as ContextMenuBoxComponent, r as MenuComponent, t as ContextMenuComponent } from "./magmonium-one-menu-B8H0Grmb.mjs";
 import { t as BaseInputComponent } from "./magmonium-one-base-input-CsVND89n.mjs";
 import { i as getScrollParent, n as activeElementWithin, r as classListSignal, t as BaseTextInputComponent } from "./magmonium-one-base-text-CWf7J75v.mjs";
 import { t as TextOutputComponent } from "./magmonium-one-text-output-Cg2dT_U_.mjs";
@@ -24,7 +24,7 @@ import { t as RadioInputComponent } from "./magmonium-one-radio-dZL0E4k_.mjs";
 import { t as TextInputComponent } from "./magmonium-one-text-BPThK6-y.mjs";
 import { r as BaseArrayInputComponent, t as MultiRangeInputComponent } from "./magmonium-one-multi-range-OzTdXSHR.mjs";
 import { t as RangeInputComponent } from "./magmonium-one-range-DLu5PhUN.mjs";
-import { n as DROPDOWN_IMPORTS, r as DROPDOWN_TEMPLATE, t as BaseDropdownComponent } from "./magmonium-one-base-dropdown-Dxo8Yd62.mjs";
+import { n as DROPDOWN_IMPORTS, r as DROPDOWN_TEMPLATE, t as BaseDropdownComponent } from "./magmonium-one-base-dropdown-0qlJVp_y.mjs";
 import { o as isEditableImage, s as outputSize } from "./magmonium-one-image-frame-BTSaUSAi.mjs";
 import * as i0 from "@angular/core";
 import { ApplicationRef, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, DOCUMENT, DestroyRef, Directive, ElementRef, EventEmitter, HostAttributeToken, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, Output, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, afterEveryRender, afterNextRender, afterRenderEffect, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, inputBinding, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, outputBinding, provideAppInitializer, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection, reflectComponentType, runInInjectionContext, signal, twoWayBinding, untracked, viewChild, viewChildren } from "@angular/core";
@@ -13782,6 +13782,9 @@ function isNavRowsConfig(entry) {
 function isNavInstanceConfig(entry) {
 	return typeof entry === "object" && "navInstance" in entry;
 }
+function isNavCountConfig(entry) {
+	return typeof entry === "object" && "navCount" in entry;
+}
 function isNavVisibilityConfig(entry) {
 	return typeof entry === "object" && "navVisible" in entry;
 }
@@ -14049,7 +14052,7 @@ const mergeTrail = (derived, override, derivedHeader) => {
 	};
 };
 function deriveBreadcrumb(params) {
-	const { navId, navMap, anchor, breadcrumb, navMenu, hasOwnContent, dynamicRows, routeParams, instances, hidden = EMPTY_HIDDEN, transparent = EMPTY_HIDDEN } = params;
+	const { navId, navMap, anchor, breadcrumb, navMenu, hasOwnContent, dynamicRows, routeParams, instances, hidden = EMPTY_HIDDEN, transparent = EMPTY_HIDDEN, counts } = params;
 	if (!navId) return emptyResult();
 	const instanceOf = (id) => {
 		const nav = navMap[id];
@@ -14088,12 +14091,20 @@ function deriveBreadcrumb(params) {
 		trail: derivedTrail,
 		header: derivedHeader
 	};
+	const withCount = (entry) => {
+		const badge = counts?.[entry.nav ?? entry.id];
+		return badge ? {
+			...entry,
+			badge
+		} : entry;
+	};
+	const menus = navMenu?.length && ownPanel ? navMenu : buildNavMenus(ownerId, navMap, anchor, dynamicRows, routeParams, instances, hidden, transparent);
 	return {
 		breadcrumb: {
-			trail,
-			header
+			trail: (trail ?? []).map(withCount),
+			header: withCount(header)
 		},
-		navMenus: navMenu?.length && ownPanel ? navMenu : buildNavMenus(ownerId, navMap, anchor, dynamicRows, routeParams, instances, hidden, transparent)
+		navMenus: menus.map(withCount)
 	};
 }
 const withOpenOutlets = (router, address) => {
@@ -14228,7 +14239,6 @@ const initialState$3 = {
 	menuNavId: void 0,
 	menuParams: void 0,
 	browsedApp: void 0,
-	keepPanelOnPathChange: false,
 	panelPushed: false,
 	navScrolledDown: false,
 	visibilityAnswers: {},
@@ -14382,6 +14392,11 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 	const hasMurl = computed(() => store.murl().length > 0, ...ngDevMode ? [{ debugName: "hasMurl" }] : /* istanbul ignore next */ []);
 	const isNavOpened = computed(() => hasMurl() || store.navOpenedByUser(), ...ngDevMode ? [{ debugName: "isNavOpened" }] : /* istanbul ignore next */ []);
 	const isMNavOpened = hasMurl;
+	const isSideMenuOpen = computed(() => {
+		if (!isNavOpened()) return false;
+		const navId = id();
+		return menuMounts().some(({ urlMode, link, appNavId }) => urlMode === "outlet" && !!link && (navId === appNavId || navId.startsWith(`${appNavId}_`)));
+	}, ...ngDevMode ? [{ debugName: "isSideMenuOpen" }] : /* istanbul ignore next */ []);
 	const entryAt = (candidate) => {
 		const maps = navWidgetMaps ?? [];
 		const navId = candidate;
@@ -14439,6 +14454,16 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 		}
 		return out;
 	}, ...ngDevMode ? [{ debugName: "dynamicInstances" }] : /* istanbul ignore next */ []);
+	const navCounts = computed(() => {
+		const out = {};
+		for (const nav of Object.values(store.navMap())) {
+			const hit = entryAt(nav.navId);
+			if (!hit || !isNavCountConfig(hit.entry)) continue;
+			const badge = hit.entry.navCount();
+			if (badge) out[nav.navId] = badge;
+		}
+		return out;
+	}, ...ngDevMode ? [{ debugName: "navCounts" }] : /* istanbul ignore next */ []);
 	const visibilityReads = computed(() => {
 		const params = panelParams();
 		const out = [];
@@ -14642,6 +14667,7 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 			hidden: hiddenNavIds(),
 			transparent: transparentNavIds(),
 			routeParams: panelParams(),
+			counts: navCounts(),
 			breadcrumb: menuConfig?.breadcramb?.() ?? (typeof widgetConfig?.breadcramb === "function" ? widgetConfig.breadcramb() : widgetConfig?.breadcramb),
 			navMenu: emittedMenu,
 			hasOwnContent: !!widgetConfig || !!emittedMenu?.length
@@ -14683,6 +14709,7 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 		hasMurl,
 		isNavOpened,
 		isMNavOpened,
+		isSideMenuOpen,
 		resolvedWidget,
 		searchAnswer,
 		searchLabel,
@@ -14718,23 +14745,32 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 	const translateService = inject(TranslateService);
 	const router = store.router;
 	const mountOf = (navId) => mountFor(navId, untracked(() => store.allMounts()));
+	const slotOfMount = (mount) => slotOf(mount.name, mount.appNavId, untracked(() => store.path()), untracked(() => store.outlets()), untracked(() => store.navMap()));
 	const addressFor = (navId, params) => renderAddress(navId, store.navMap(), {
 		navId: store.routeNavId() ?? "root",
 		path: store.path()
 	}, params);
 	const goToNav = (navId, params, options) => {
 		const willOpen = untracked(() => splitNavId(navId, store.navMap()).murl.length > 0);
-		if (options?.keepPanel && !willOpen) patchState(store, {
-			navOpenedByUser: true,
-			keepPanelOnPathChange: true
-		});
+		const keepPanel = !!options?.keepPanel || untracked(() => store.isNavOpened());
+		if (keepPanel && !willOpen) patchState(store, { navOpenedByUser: true });
 		const mount = mountOf(navId);
 		if (mount?.navigate) {
-			if (!options?.keepPanel) patchState(store, {
-				navOpenedByUser: false,
-				menuNavId: void 0,
-				browsedApp: void 0
-			});
+			if (!options?.keepPanel) {
+				const slot = keepPanel && slotOfMount(mount);
+				patchState(store, slot === "side" ? {
+					menuNavId: navId,
+					menuParams: params,
+					browsedApp: {
+						name: mount.name,
+						appNavId: mount.appNavId,
+						slot
+					}
+				} : {
+					menuNavId: void 0,
+					browsedApp: void 0
+				});
+			}
 			const map = untracked(() => store.navMap());
 			const own = navIdToRoutePath(mount.appNavId, map);
 			const full = fillRoutePath(navId, map, params);
@@ -14814,6 +14850,9 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 			menuNavId: void 0,
 			browsedApp: void 0
 		});
+		dropMurl();
+	};
+	const dropMurl = () => {
 		if (!untracked(() => store.hasMurl())) return;
 		if (untracked(() => store.panelPushed())) {
 			patchState(store, { panelPushed: false });
@@ -14843,10 +14882,9 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 		const outlets = outletsOf(router.url);
 		untracked(() => {
 			const pathChanged = path !== store.path();
-			const keepPanel = store.keepPanelOnPathChange();
 			const browsed = store.browsedApp();
 			const slot = browsed && slotOf(browsed.name, browsed.appNavId, path, outlets, store.navMap());
-			const moved = !!browsed && !!slot && slot !== browsed.slot;
+			const kept = !!browsed && !!slot && (slot !== browsed.slot || slot === "side");
 			patchState(store, {
 				path,
 				outlets,
@@ -14856,13 +14894,11 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 				}),
 				routeChain,
 				murl,
-				menuNavId: moved ? store.menuNavId() : void 0,
-				browsedApp: moved && browsed && slot ? {
+				menuNavId: kept ? store.menuNavId() : void 0,
+				browsedApp: kept && browsed && slot ? {
 					...browsed,
 					slot
 				} : void 0,
-				navOpenedByUser: pathChanged && !keepPanel && !moved ? false : store.navOpenedByUser(),
-				keepPanelOnPathChange: false,
 				navScrolledDown: pathChanged ? false : store.navScrolledDown(),
 				panelPushed: murl.length ? store.panelPushed() : false
 			});
@@ -14872,11 +14908,20 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 	const setSelected = (navId, params, options) => {
 		if (!navId) return closePanel();
 		if (!standsOn(navId, params)) return goToNav(navId, params, options);
-		if (!options?.keepPanel) return closePanel();
+		if (options?.keepPanel) {
+			patchState(store, {
+				navOpenedByUser: true,
+				menuNavId: void 0
+			});
+			return;
+		}
+		if (!untracked(() => store.isNavOpened())) return;
 		patchState(store, {
 			navOpenedByUser: true,
-			menuNavId: void 0
+			menuNavId: void 0,
+			browsedApp: void 0
 		});
+		dropMurl();
 	};
 	const toggleMenu = () => {
 		if (untracked(() => store.isNavOpened())) {
@@ -14894,7 +14939,7 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 			[appLink]: config
 		} }));
 	};
-	const loadWcConfig = rxMethod(pipe(filter((appLink) => !!appLink), filter((appLink) => !untracked(() => !!store.wcConfigMap()[appLink])), switchMap((appLink) => getNavService.loadWcConfig(appLink).pipe(tap((config) => untracked(() => setWcConfig(appLink, config)))))));
+	const loadWcConfig = rxMethod(pipe(filter((appLink) => !!appLink), filter((appLink) => !untracked(() => !!store.wcConfigMap()[appLink])), mergeMap((appLink) => getNavService.loadWcConfig(appLink).pipe(tap((config) => untracked(() => setWcConfig(appLink, config)))))));
 	const setIdentity = (identity) => {
 		patchState(store, (state) => ({ identityMap: {
 			...state.identityMap,
@@ -14946,6 +14991,12 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 		settleRoute();
 	};
 	const setMountRoute = (name, route) => {
+		const keyOf = (r) => r && visibilityKey(r.navId, r.params);
+		const browsed = untracked(() => store.browsedApp());
+		if (browsed?.name === name && browsed.slot === "side" && keyOf(route) !== keyOf(untracked(() => store.mountRoutes())[name])) patchState(store, {
+			menuNavId: route ? toHostNavId(route.navId, browsed.appNavId) : browsed.appNavId,
+			menuParams: route?.params
+		});
 		patchState(store, (state) => ({ mountRoutes: route ? {
 			...state.mountRoutes,
 			[name]: route
@@ -14976,7 +15027,7 @@ const NavStore = signalStore({ providedIn: "root" }, withState(initialState$3),
 	};
 	const browseApp = (appNavId) => {
 		const mount = mountOf(appNavId);
-		const slot = mount && slotOf(mount.name, mount.appNavId, untracked(() => store.path()), untracked(() => store.outlets()), untracked(() => store.navMap()));
+		const slot = mount && slotOfMount(mount);
 		patchState(store, {
 			navOpenedByUser: true,
 			menuNavId: appNavId,
@@ -16677,6 +16728,7 @@ var SectionHeaderComponent = class SectionHeaderComponent {
 	extraData = input(...ngDevMode ? [void 0, { debugName: "extraData" }] : /* istanbul ignore next */ []);
 	align = input(void 0, ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
 	alignment = computed(() => this.align() ?? "left", ...ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []);
+	badge = input(...ngDevMode ? [void 0, { debugName: "badge" }] : /* istanbul ignore next */ []);
 	showBack = input(false, ...ngDevMode ? [{ debugName: "showBack" }] : /* istanbul ignore next */ []);
 	actionButton = input(...ngDevMode ? [void 0, { debugName: "actionButton" }] : /* istanbul ignore next */ []);
 	actionLabel = input(...ngDevMode ? [void 0, { debugName: "actionLabel" }] : /* istanbul ignore next */ []);
@@ -16707,6 +16759,11 @@ var SectionHeaderComponent = class SectionHeaderComponent {
 			variant: "ghost"
 		};
 	}, ...ngDevMode ? [{ debugName: "actionConfig" }] : /* istanbul ignore next */ []);
+	badgeConfig = computed(() => {
+		if (!this.badge()?.count) return void 0;
+		return { variant: this.badge()?.variant ?? "danger" };
+	}, ...ngDevMode ? [{ debugName: "badgeConfig" }] : /* istanbul ignore next */ []);
+	badgeText = computed(() => formatBadgeCount(this.badge()?.count), ...ngDevMode ? [{ debugName: "badgeText" }] : /* istanbul ignore next */ []);
 	accordion = computed(() => this.sectionContext?.accordion?.() ?? null, ...ngDevMode ? [{ debugName: "accordion" }] : /* istanbul ignore next */ []);
 	toggleIconName = computed(() => {
 		const accordion = this.accordion();
@@ -16839,6 +16896,13 @@ var SectionHeaderComponent = class SectionHeaderComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			badge: {
+				classPropertyName: "badge",
+				publicName: "badge",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			showBack: {
 				classPropertyName: "showBack",
 				publicName: "showBack",
@@ -16901,8 +16965,8 @@ var SectionHeaderComponent = class SectionHeaderComponent {
 			classAttribute: "m-section-header"
 		},
 		ngImport: i0,
-		template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n     Hoisted into a template rather than written twice: an `<ng-content>` may\n     appear once per selector in a component, so the duplicated copy caught\n     nothing and a header projecting a title rendered it in the `spacing`\n     branch alone. -->\n<ng-template #body>\n  @if (accordion(); as accordionRef) {\n    <div\n      class=\"section-header__toggle\"\n      [class.section-header__toggle--rotate]=\"toggleRotates()\"\n      [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n      [id]=\"accordionRef.headerId\"\n      [attr.aria-expanded]=\"accordionRef.isOpen()\"\n      [attr.aria-controls]=\"accordionRef.bodyId\"\n    >\n      <m-button\n        [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n        (clicked)=\"onToggleClick()\" />\n    </div>\n  }\n  @if (showBack()) {\n    <div class=\"section-header__back\">\n      <m-button\n        [config]=\"{ icon: 'chevron-left', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (!label() && icon(); as iconName) {\n    <!-- Only where no label is written. A header with one hands the icon to\n         `m-header`, which draws it inside the heading's line box and so on the\n         heading's own centre line. Beside a projected title there is no such\n         box to borrow, so the glyph is boxed to the level's line box here and\n         centred in it — otherwise it centres against the whole title column,\n         which on the Canvas is the label slot's drop rect stacked above the\n         heading. -->\n    <div class=\"section-header__icon\">\n      <m-icon [name]=\"iconName\" />\n    </div>\n  }\n  <!-- An AppLogo projected in the icon's place, selected by tag like the\n       FilterGroup below — boxed to the heading's line box the same way. -->\n  <div class=\"section-header__logo\">\n    <ng-content select=\"m-app-logo\" />\n  </div>\n  <div\n    class=\"section-header__title\"\n    [class.section-header__title--reverse]=\"reverse()\"\n  >\n    <!-- The title slot is the catch-all rather than a `[label]` one: every\n         header already projecting a heading writes it unselected, and a\n         selector here would drop that content on the floor. What the design\n         page emits — `<span label>` — is caught by it too, nothing else\n         claiming the node. -->\n    <ng-content />\n    <!-- The written label, drawn beside the slot rather than as its\n         `ng-content` fallback. A fallback renders only while *nothing* is\n         projected, and the design Canvas always projects the slot span —\n         empty until a Control is dropped in it — so a fallback there would\n         blank the label a header is still configured with. `label` answers\n         instead, which no header projecting a title sets. -->\n    @if (label()) {\n      <m-header\n        [level]=\"level()\"\n        [label]=\"label()\"\n        [icon]=\"icon()\"\n        [params]=\"params()\"\n        [noTranslate]=\"noTranslate()\" />\n    }\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\n  </div>\n  <!-- A FilterGroup projected into the header row, selected by tag rather than\n       by an attribute — the same shape a Section catches its `m-action` with.\n       A header has room for one icon and not for a row, so a group landing\n       here is squeezed by placement (ADR 0025); nothing here enforces that,\n       the caller binding `[squeeze]` on the tag it projects. -->\n  <div class=\"section-header__filters\">\n    <ng-content select=\"m-section-filter-group\" />\n  </div>\n  @if (actionConfig(); as action) {\n    <div class=\"section-header__action\">\n      <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n    </div>\n  }\n  @if (hasMenu()) {\n    <div class=\"section-header__menu\">\n      <m-context-menu\n        [config]=\"menu()\"\n        [name]=\"menuName()\"\n        [visibilityRule]=\"visibilityRule()\"\n        [disableRule]=\"disableRule()\"\n        [extraData]=\"extraData()\"\n        (action)=\"action.emit($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n<!-- Always the same two boxes, whether or not a `maxWidth` is in force. The\n     border and the sticky backdrop live on the host and keep spanning the\n     Section's full width; only this container narrows and is placed by the\n     Section's `align`, so the heading lines up with the body under it. -->\n<div class=\"section-header__container\">\n  <div class=\"section-header__inner\">\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </div>\n</div>\n",
-		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;min-width:0;max-width:var(--m-section-header-max-width, none);margin-inline:0 auto}:host(.box-center) .section-header__container{margin-inline:auto}:host(.box-right) .section-header__container{margin-inline:auto 0}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.spacing) .section-header__inner{padding:1rem 1.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:var(--m-section-header-sticky-top, 0);z-index:var(--m-section-header-sticky-z, 10)}:host(.is-sticky){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}:host(.is-accordion){cursor:pointer}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__filters,.section-header__logo{display:contents}.section-header__logo m-section-filter-group{width:auto;flex-shrink:0;border-bottom:none}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;height:var(--m-section-header-icon-box, 1.5125rem)}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"],
+		template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n     Hoisted into a template rather than written twice: an `<ng-content>` may\n     appear once per selector in a component, so the duplicated copy caught\n     nothing and a header projecting a title rendered it in the `spacing`\n     branch alone. -->\n<ng-template #body>\n  @if (accordion(); as accordionRef) {\n    <div\n      class=\"section-header__toggle\"\n      [class.section-header__toggle--rotate]=\"toggleRotates()\"\n      [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n      [id]=\"accordionRef.headerId\"\n      [attr.aria-expanded]=\"accordionRef.isOpen()\"\n      [attr.aria-controls]=\"accordionRef.bodyId\"\n    >\n      <m-button\n        [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n        (clicked)=\"onToggleClick()\" />\n    </div>\n  }\n  @if (showBack()) {\n    <div class=\"section-header__back\">\n      <m-button\n        [config]=\"{ icon: 'chevron-left', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (!label() && icon(); as iconName) {\n    <!-- Only where no label is written. A header with one hands the icon to\n         `m-header`, which draws it inside the heading's line box and so on the\n         heading's own centre line. Beside a projected title there is no such\n         box to borrow, so the glyph is boxed to the level's line box here and\n         centred in it — otherwise it centres against the whole title column,\n         which on the Canvas is the label slot's drop rect stacked above the\n         heading. -->\n    <div class=\"section-header__icon\">\n      <m-icon [name]=\"iconName\" />\n    </div>\n  }\n  <!-- An AppLogo projected in the icon's place, selected by tag like the\n       FilterGroup below — boxed to the heading's line box the same way. -->\n  <div class=\"section-header__logo\">\n    <ng-content select=\"m-app-logo\" />\n  </div>\n  <div\n    class=\"section-header__title\"\n    [class.section-header__title--reverse]=\"reverse()\"\n  >\n    <!-- The title slot is the catch-all rather than a `[label]` one: every\n         header already projecting a heading writes it unselected, and a\n         selector here would drop that content on the floor. What the design\n         page emits — `<span label>` — is caught by it too, nothing else\n         claiming the node. -->\n    <ng-content />\n    <!-- The written label, drawn beside the slot rather than as its\n         `ng-content` fallback. A fallback renders only while *nothing* is\n         projected, and the design Canvas always projects the slot span —\n         empty until a Control is dropped in it — so a fallback there would\n         blank the label a header is still configured with. `label` answers\n         instead, which no header projecting a title sets. -->\n    @if (label()) {\n      <!-- The badge shares the heading's line rather than sitting at the row's\n           end, where a header's `flex: 1` title box would push it: the count\n           belongs to the word it counts. -->\n      <div class=\"section-header__heading\">\n        <m-header\n          [level]=\"level()\"\n          [label]=\"label()\"\n          [icon]=\"icon()\"\n          [params]=\"params()\"\n          [noTranslate]=\"noTranslate()\" />\n        @if (badgeConfig(); as badge) {\n          <m-badge [config]=\"badge\">{{ badgeText() }}</m-badge>\n        }\n      </div>\n    }\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\n  </div>\n  <!-- A FilterGroup projected into the header row, selected by tag rather than\n       by an attribute — the same shape a Section catches its `m-action` with.\n       A header has room for one icon and not for a row, so a group landing\n       here is squeezed by placement (ADR 0025); nothing here enforces that,\n       the caller binding `[squeeze]` on the tag it projects. -->\n  <div class=\"section-header__filters\">\n    <ng-content select=\"m-section-filter-group\" />\n  </div>\n  @if (actionConfig(); as action) {\n    <div class=\"section-header__action\">\n      <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n    </div>\n  }\n  @if (hasMenu()) {\n    <div class=\"section-header__menu\">\n      <m-context-menu\n        [config]=\"menu()\"\n        [name]=\"menuName()\"\n        [visibilityRule]=\"visibilityRule()\"\n        [disableRule]=\"disableRule()\"\n        [extraData]=\"extraData()\"\n        (action)=\"action.emit($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n<!-- Always the same two boxes, whether or not a `maxWidth` is in force. The\n     border and the sticky backdrop live on the host and keep spanning the\n     Section's full width; only this container narrows and is placed by the\n     Section's `align`, so the heading lines up with the body under it. -->\n<div class=\"section-header__container\">\n  <div class=\"section-header__inner\">\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </div>\n</div>\n",
+		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;min-width:0;max-width:var(--m-section-header-max-width, none);margin-inline:0 auto}:host(.box-center) .section-header__container{margin-inline:auto}:host(.box-right) .section-header__container{margin-inline:auto 0}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.spacing) .section-header__inner{padding:1rem 1.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:var(--m-section-header-sticky-top, 0);z-index:var(--m-section-header-sticky-z, 10)}:host(.is-sticky){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}:host(.is-accordion){cursor:pointer}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}.section-header__heading{display:flex;align-items:center;gap:.5rem;min-width:0}.section-header__heading m-badge{--m-badge-height: 1.5em;--m-badge-min-width: 1.5em;--m-badge-padding: 0 .3em;--m-badge-gap: .1em;flex:none}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__filters,.section-header__logo{display:contents}.section-header__logo m-section-filter-group{width:auto;flex-shrink:0;border-bottom:none}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;height:var(--m-section-header-icon-box, 1.5125rem)}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -16961,6 +17025,13 @@ var SectionHeaderComponent = class SectionHeaderComponent {
 				],
 				outputs: ["configChange"]
 			},
+			{
+				kind: "component",
+				type: BadgeComponent,
+				selector: "m-badge",
+				inputs: ["config"],
+				outputs: ["configChange"]
+			},
 			{
 				kind: "component",
 				type: ButtonComponent,
@@ -17013,6 +17084,7 @@ i0.ɵɵngDeclareClassMetadata({
 				ContextMenuComponent,
 				HeaderComponent,
 				IconComponent,
+				BadgeComponent,
 				ButtonComponent
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
@@ -17034,8 +17106,8 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class.is-accordion]": "!!accordion()",
 				"(click)": "onHeaderClick($event)"
 			},
-			template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n     Hoisted into a template rather than written twice: an `<ng-content>` may\n     appear once per selector in a component, so the duplicated copy caught\n     nothing and a header projecting a title rendered it in the `spacing`\n     branch alone. -->\n<ng-template #body>\n  @if (accordion(); as accordionRef) {\n    <div\n      class=\"section-header__toggle\"\n      [class.section-header__toggle--rotate]=\"toggleRotates()\"\n      [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n      [id]=\"accordionRef.headerId\"\n      [attr.aria-expanded]=\"accordionRef.isOpen()\"\n      [attr.aria-controls]=\"accordionRef.bodyId\"\n    >\n      <m-button\n        [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n        (clicked)=\"onToggleClick()\" />\n    </div>\n  }\n  @if (showBack()) {\n    <div class=\"section-header__back\">\n      <m-button\n        [config]=\"{ icon: 'chevron-left', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (!label() && icon(); as iconName) {\n    <!-- Only where no label is written. A header with one hands the icon to\n         `m-header`, which draws it inside the heading's line box and so on the\n         heading's own centre line. Beside a projected title there is no such\n         box to borrow, so the glyph is boxed to the level's line box here and\n         centred in it — otherwise it centres against the whole title column,\n         which on the Canvas is the label slot's drop rect stacked above the\n         heading. -->\n    <div class=\"section-header__icon\">\n      <m-icon [name]=\"iconName\" />\n    </div>\n  }\n  <!-- An AppLogo projected in the icon's place, selected by tag like the\n       FilterGroup below — boxed to the heading's line box the same way. -->\n  <div class=\"section-header__logo\">\n    <ng-content select=\"m-app-logo\" />\n  </div>\n  <div\n    class=\"section-header__title\"\n    [class.section-header__title--reverse]=\"reverse()\"\n  >\n    <!-- The title slot is the catch-all rather than a `[label]` one: every\n         header already projecting a heading writes it unselected, and a\n         selector here would drop that content on the floor. What the design\n         page emits — `<span label>` — is caught by it too, nothing else\n         claiming the node. -->\n    <ng-content />\n    <!-- The written label, drawn beside the slot rather than as its\n         `ng-content` fallback. A fallback renders only while *nothing* is\n         projected, and the design Canvas always projects the slot span —\n         empty until a Control is dropped in it — so a fallback there would\n         blank the label a header is still configured with. `label` answers\n         instead, which no header projecting a title sets. -->\n    @if (label()) {\n      <m-header\n        [level]=\"level()\"\n        [label]=\"label()\"\n        [icon]=\"icon()\"\n        [params]=\"params()\"\n        [noTranslate]=\"noTranslate()\" />\n    }\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\n  </div>\n  <!-- A FilterGroup projected into the header row, selected by tag rather than\n       by an attribute — the same shape a Section catches its `m-action` with.\n       A header has room for one icon and not for a row, so a group landing\n       here is squeezed by placement (ADR 0025); nothing here enforces that,\n       the caller binding `[squeeze]` on the tag it projects. -->\n  <div class=\"section-header__filters\">\n    <ng-content select=\"m-section-filter-group\" />\n  </div>\n  @if (actionConfig(); as action) {\n    <div class=\"section-header__action\">\n      <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n    </div>\n  }\n  @if (hasMenu()) {\n    <div class=\"section-header__menu\">\n      <m-context-menu\n        [config]=\"menu()\"\n        [name]=\"menuName()\"\n        [visibilityRule]=\"visibilityRule()\"\n        [disableRule]=\"disableRule()\"\n        [extraData]=\"extraData()\"\n        (action)=\"action.emit($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n<!-- Always the same two boxes, whether or not a `maxWidth` is in force. The\n     border and the sticky backdrop live on the host and keep spanning the\n     Section's full width; only this container narrows and is placed by the\n     Section's `align`, so the heading lines up with the body under it. -->\n<div class=\"section-header__container\">\n  <div class=\"section-header__inner\">\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </div>\n</div>\n",
-			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;min-width:0;max-width:var(--m-section-header-max-width, none);margin-inline:0 auto}:host(.box-center) .section-header__container{margin-inline:auto}:host(.box-right) .section-header__container{margin-inline:auto 0}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.spacing) .section-header__inner{padding:1rem 1.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:var(--m-section-header-sticky-top, 0);z-index:var(--m-section-header-sticky-z, 10)}:host(.is-sticky){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}:host(.is-accordion){cursor:pointer}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__filters,.section-header__logo{display:contents}.section-header__logo m-section-filter-group{width:auto;flex-shrink:0;border-bottom:none}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;height:var(--m-section-header-icon-box, 1.5125rem)}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"]
+			template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n     Hoisted into a template rather than written twice: an `<ng-content>` may\n     appear once per selector in a component, so the duplicated copy caught\n     nothing and a header projecting a title rendered it in the `spacing`\n     branch alone. -->\n<ng-template #body>\n  @if (accordion(); as accordionRef) {\n    <div\n      class=\"section-header__toggle\"\n      [class.section-header__toggle--rotate]=\"toggleRotates()\"\n      [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n      [id]=\"accordionRef.headerId\"\n      [attr.aria-expanded]=\"accordionRef.isOpen()\"\n      [attr.aria-controls]=\"accordionRef.bodyId\"\n    >\n      <m-button\n        [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n        (clicked)=\"onToggleClick()\" />\n    </div>\n  }\n  @if (showBack()) {\n    <div class=\"section-header__back\">\n      <m-button\n        [config]=\"{ icon: 'chevron-left', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (!label() && icon(); as iconName) {\n    <!-- Only where no label is written. A header with one hands the icon to\n         `m-header`, which draws it inside the heading's line box and so on the\n         heading's own centre line. Beside a projected title there is no such\n         box to borrow, so the glyph is boxed to the level's line box here and\n         centred in it — otherwise it centres against the whole title column,\n         which on the Canvas is the label slot's drop rect stacked above the\n         heading. -->\n    <div class=\"section-header__icon\">\n      <m-icon [name]=\"iconName\" />\n    </div>\n  }\n  <!-- An AppLogo projected in the icon's place, selected by tag like the\n       FilterGroup below — boxed to the heading's line box the same way. -->\n  <div class=\"section-header__logo\">\n    <ng-content select=\"m-app-logo\" />\n  </div>\n  <div\n    class=\"section-header__title\"\n    [class.section-header__title--reverse]=\"reverse()\"\n  >\n    <!-- The title slot is the catch-all rather than a `[label]` one: every\n         header already projecting a heading writes it unselected, and a\n         selector here would drop that content on the floor. What the design\n         page emits — `<span label>` — is caught by it too, nothing else\n         claiming the node. -->\n    <ng-content />\n    <!-- The written label, drawn beside the slot rather than as its\n         `ng-content` fallback. A fallback renders only while *nothing* is\n         projected, and the design Canvas always projects the slot span —\n         empty until a Control is dropped in it — so a fallback there would\n         blank the label a header is still configured with. `label` answers\n         instead, which no header projecting a title sets. -->\n    @if (label()) {\n      <!-- The badge shares the heading's line rather than sitting at the row's\n           end, where a header's `flex: 1` title box would push it: the count\n           belongs to the word it counts. -->\n      <div class=\"section-header__heading\">\n        <m-header\n          [level]=\"level()\"\n          [label]=\"label()\"\n          [icon]=\"icon()\"\n          [params]=\"params()\"\n          [noTranslate]=\"noTranslate()\" />\n        @if (badgeConfig(); as badge) {\n          <m-badge [config]=\"badge\">{{ badgeText() }}</m-badge>\n        }\n      </div>\n    }\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\n  </div>\n  <!-- A FilterGroup projected into the header row, selected by tag rather than\n       by an attribute — the same shape a Section catches its `m-action` with.\n       A header has room for one icon and not for a row, so a group landing\n       here is squeezed by placement (ADR 0025); nothing here enforces that,\n       the caller binding `[squeeze]` on the tag it projects. -->\n  <div class=\"section-header__filters\">\n    <ng-content select=\"m-section-filter-group\" />\n  </div>\n  @if (actionConfig(); as action) {\n    <div class=\"section-header__action\">\n      <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n    </div>\n  }\n  @if (hasMenu()) {\n    <div class=\"section-header__menu\">\n      <m-context-menu\n        [config]=\"menu()\"\n        [name]=\"menuName()\"\n        [visibilityRule]=\"visibilityRule()\"\n        [disableRule]=\"disableRule()\"\n        [extraData]=\"extraData()\"\n        (action)=\"action.emit($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n<!-- Always the same two boxes, whether or not a `maxWidth` is in force. The\n     border and the sticky backdrop live on the host and keep spanning the\n     Section's full width; only this container narrows and is placed by the\n     Section's `align`, so the heading lines up with the body under it. -->\n<div class=\"section-header__container\">\n  <div class=\"section-header__inner\">\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </div>\n</div>\n",
+			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;min-width:0;max-width:var(--m-section-header-max-width, none);margin-inline:0 auto}:host(.box-center) .section-header__container{margin-inline:auto}:host(.box-right) .section-header__container{margin-inline:auto 0}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.spacing) .section-header__inner{padding:1rem 1.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:var(--m-section-header-sticky-top, 0);z-index:var(--m-section-header-sticky-z, 10)}:host(.is-sticky){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}:host(.is-accordion){cursor:pointer}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}.section-header__heading{display:flex;align-items:center;gap:.5rem;min-width:0}.section-header__heading m-badge{--m-badge-height: 1.5em;--m-badge-min-width: 1.5em;--m-badge-padding: 0 .3em;--m-badge-gap: .1em;flex:none}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__filters,.section-header__logo{display:contents}.section-header__logo m-section-filter-group{width:auto;flex-shrink:0;border-bottom:none}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;height:var(--m-section-header-icon-box, 1.5125rem)}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -17151,6 +17223,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		badge: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "badge",
+				required: false
+			}]
+		}],
 		showBack: [{
 			type: i0.Input,
 			args: [{
@@ -21129,7 +21209,7 @@ var ColorPickerBoxComponent = class ColorPickerBoxComponent {
   </m-section>
   </div>`,
 		isInline: true,
-		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.color-picker-box{width:100%;box-sizing:border-box;background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);overflow:hidden;box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:color-picker-in .2s ease-out}.color-picker-box .color-picker-box-header{position:sticky;display:flex;flex-direction:row;top:0;left:0;width:100%;z-index:10;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));border-bottom:1px solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)))}.color-picker-box .color-picker-box-header .color-preview{height:2em;width:2em;border-radius:calc(var(--m-input-radius, .5rem) * .6);margin:.5em}.color-picker-box .color-picker-box-header .color-header{flex:1;padding:0 .5em}.color-picker-box .color-area{position:relative;width:100%;height:5em;overflow:hidden}.color-picker-box .color-area .color-base{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(180deg,#fff,#fff0,#000),linear-gradient(90deg,gray,#fff0);pointer-events:none}.color-picker-box .color-area .saturation-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgb(128,128,128) 0%,transparent 100%)}.color-picker-box .color-area .brightness-gradient{position:absolute;inset:0;background:linear-gradient(180deg,#ffffff 0%,transparent 50%,#000000 100%)}.color-picker-box .color-area .color-pointer{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d;cursor:pointer;z-index:1}.color-picker-box .color-sliders{display:flex;flex-direction:column;gap:.5em;padding:.5em .75em;box-sizing:border-box}.color-picker-box .color-sliders .hue-slider,.color-picker-box .color-sliders .opacity-slider{height:.5em;position:relative;border-radius:.5em}.color-picker-box .color-sliders .hue-slider .pointer,.color-picker-box .color-sliders .opacity-slider .pointer{width:.5em;height:.5em;border-radius:50%;transform:translate(-50%,calc(-50% + 4px));box-shadow:0 1px 3px #0003;cursor:pointer;margin:0;padding:0;border:2px solid white;transition:scale .2s ease}.color-picker-box .color-sliders .hue-slider .pointer:hover,.color-picker-box .color-sliders .opacity-slider .pointer:hover{scale:1.2;box-shadow:0 2px 4px #0003}.color-picker-box .color-sliders .hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker-box .suggested-colors{padding:.375rem;box-sizing:border-box;width:100%}.color-picker-box .suggested-colors .suggested-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375em;padding:.25em .375em;border-bottom:1px solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)))}.color-picker-box .suggested-colors .suggested-header span{font-size:.75em;font-weight:500;color:var(--m-input-color, var(--m-mm));display:flex;align-items:center;gap:.5em}.color-picker-box .suggested-colors .color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:8px;width:100%;padding:.25rem}.color-picker-box .suggested-colors .color-grid .color-option{width:24px;height:24px;border-radius:.25rem;cursor:pointer;border:1px solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));transition:transform .15s ease,box-shadow .15s ease;margin:auto;position:relative;padding:0}.color-picker-box .suggested-colors .color-grid .color-option:hover{transform:scale(1.1);z-index:1;box-shadow:0 2px 4px #0003}.color-picker-box .suggested-colors .color-grid .color-option:active{transform:scale(.95)}.color-picker-box .suggested-colors .color-grid .color-option[data-alpha]{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}@keyframes color-picker-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"],
+		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.color-picker-box{width:100%;box-sizing:border-box;background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);overflow:hidden;box-shadow:0 .75rem 2rem var(--m-backdrop-shadow);animation:color-picker-in .2s ease-out}.color-picker-box .color-picker-box-header{position:sticky;display:flex;flex-direction:row;top:0;left:0;width:100%;z-index:10;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));border-bottom:1px solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)))}.color-picker-box .color-picker-box-header .color-preview{height:2em;width:2em;border-radius:calc(var(--m-input-radius, .5rem) * .6);margin:.5em}.color-picker-box .color-picker-box-header .color-header{flex:1;padding:0 .5em}.color-picker-box .color-area{position:relative;width:100%;height:5em;overflow:hidden}.color-picker-box .color-area .color-base{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(180deg,#fff,#fff0,#000),linear-gradient(90deg,gray,#fff0);pointer-events:none}.color-picker-box .color-area .saturation-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgb(128,128,128) 0%,transparent 100%)}.color-picker-box .color-area .brightness-gradient{position:absolute;inset:0;background:linear-gradient(180deg,#ffffff 0%,transparent 50%,#000000 100%)}.color-picker-box .color-area .color-pointer{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d;cursor:pointer;z-index:1}.color-picker-box .color-sliders{display:flex;flex-direction:column;gap:.5em;padding:.5em .75em;box-sizing:border-box}.color-picker-box .color-sliders .hue-slider,.color-picker-box .color-sliders .opacity-slider{height:.5em;position:relative;border-radius:.5em}.color-picker-box .color-sliders .hue-slider .pointer,.color-picker-box .color-sliders .opacity-slider .pointer{width:.5em;height:.5em;border-radius:50%;transform:translate(-50%,calc(-50% + 4px));box-shadow:0 1px 3px #0003;cursor:pointer;margin:0;padding:0;border:2px solid white;transition:scale .2s ease}.color-picker-box .color-sliders .hue-slider .pointer:hover,.color-picker-box .color-sliders .opacity-slider .pointer:hover{scale:1.2;box-shadow:0 2px 4px #0003}.color-picker-box .color-sliders .hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker-box .suggested-colors{padding:.375rem;box-sizing:border-box;width:100%}.color-picker-box .suggested-colors .suggested-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375em;padding:.25em .375em;border-bottom:1px solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)))}.color-picker-box .suggested-colors .suggested-header span{font-size:.75em;font-weight:500;color:var(--m-input-color, var(--m-mm));display:flex;align-items:center;gap:.5em}.color-picker-box .suggested-colors .color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:8px;width:100%;padding:.25rem}.color-picker-box .suggested-colors .color-grid .color-option{width:24px;height:24px;border-radius:.25rem;cursor:pointer;border:1px solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));transition:transform .15s ease,box-shadow .15s ease;margin:auto;position:relative;padding:0}.color-picker-box .suggested-colors .color-grid .color-option:hover{transform:scale(1.1);z-index:1;box-shadow:0 2px 4px #0003}.color-picker-box .suggested-colors .color-grid .color-option:active{transform:scale(.95)}.color-picker-box .suggested-colors .color-grid .color-option[data-alpha]{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}@keyframes color-picker-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -21190,6 +21270,7 @@ var ColorPickerBoxComponent = class ColorPickerBoxComponent {
 					"disableRule",
 					"extraData",
 					"align",
+					"badge",
 					"showBack",
 					"actionButton",
 					"actionLabel",
@@ -21353,7 +21434,7 @@ i0.ɵɵngDeclareClassMetadata({
   </m-section>
   </div>`,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.color-picker-box{width:100%;box-sizing:border-box;background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);overflow:hidden;box-shadow:0 .75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);animation:color-picker-in .2s ease-out}.color-picker-box .color-picker-box-header{position:sticky;display:flex;flex-direction:row;top:0;left:0;width:100%;z-index:10;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));border-bottom:1px solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)))}.color-picker-box .color-picker-box-header .color-preview{height:2em;width:2em;border-radius:calc(var(--m-input-radius, .5rem) * .6);margin:.5em}.color-picker-box .color-picker-box-header .color-header{flex:1;padding:0 .5em}.color-picker-box .color-area{position:relative;width:100%;height:5em;overflow:hidden}.color-picker-box .color-area .color-base{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(180deg,#fff,#fff0,#000),linear-gradient(90deg,gray,#fff0);pointer-events:none}.color-picker-box .color-area .saturation-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgb(128,128,128) 0%,transparent 100%)}.color-picker-box .color-area .brightness-gradient{position:absolute;inset:0;background:linear-gradient(180deg,#ffffff 0%,transparent 50%,#000000 100%)}.color-picker-box .color-area .color-pointer{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d;cursor:pointer;z-index:1}.color-picker-box .color-sliders{display:flex;flex-direction:column;gap:.5em;padding:.5em .75em;box-sizing:border-box}.color-picker-box .color-sliders .hue-slider,.color-picker-box .color-sliders .opacity-slider{height:.5em;position:relative;border-radius:.5em}.color-picker-box .color-sliders .hue-slider .pointer,.color-picker-box .color-sliders .opacity-slider .pointer{width:.5em;height:.5em;border-radius:50%;transform:translate(-50%,calc(-50% + 4px));box-shadow:0 1px 3px #0003;cursor:pointer;margin:0;padding:0;border:2px solid white;transition:scale .2s ease}.color-picker-box .color-sliders .hue-slider .pointer:hover,.color-picker-box .color-sliders .opacity-slider .pointer:hover{scale:1.2;box-shadow:0 2px 4px #0003}.color-picker-box .color-sliders .hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker-box .suggested-colors{padding:.375rem;box-sizing:border-box;width:100%}.color-picker-box .suggested-colors .suggested-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375em;padding:.25em .375em;border-bottom:1px solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)))}.color-picker-box .suggested-colors .suggested-header span{font-size:.75em;font-weight:500;color:var(--m-input-color, var(--m-mm));display:flex;align-items:center;gap:.5em}.color-picker-box .suggested-colors .color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:8px;width:100%;padding:.25rem}.color-picker-box .suggested-colors .color-grid .color-option{width:24px;height:24px;border-radius:.25rem;cursor:pointer;border:1px solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));transition:transform .15s ease,box-shadow .15s ease;margin:auto;position:relative;padding:0}.color-picker-box .suggested-colors .color-grid .color-option:hover{transform:scale(1.1);z-index:1;box-shadow:0 2px 4px #0003}.color-picker-box .suggested-colors .color-grid .color-option:active{transform:scale(.95)}.color-picker-box .suggested-colors .color-grid .color-option[data-alpha]{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}@keyframes color-picker-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"]
+			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.color-picker-box{width:100%;box-sizing:border-box;background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);overflow:hidden;box-shadow:0 .75rem 2rem var(--m-backdrop-shadow);animation:color-picker-in .2s ease-out}.color-picker-box .color-picker-box-header{position:sticky;display:flex;flex-direction:row;top:0;left:0;width:100%;z-index:10;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));border-bottom:1px solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)))}.color-picker-box .color-picker-box-header .color-preview{height:2em;width:2em;border-radius:calc(var(--m-input-radius, .5rem) * .6);margin:.5em}.color-picker-box .color-picker-box-header .color-header{flex:1;padding:0 .5em}.color-picker-box .color-area{position:relative;width:100%;height:5em;overflow:hidden}.color-picker-box .color-area .color-base{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(180deg,#fff,#fff0,#000),linear-gradient(90deg,gray,#fff0);pointer-events:none}.color-picker-box .color-area .saturation-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgb(128,128,128) 0%,transparent 100%)}.color-picker-box .color-area .brightness-gradient{position:absolute;inset:0;background:linear-gradient(180deg,#ffffff 0%,transparent 50%,#000000 100%)}.color-picker-box .color-area .color-pointer{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d;cursor:pointer;z-index:1}.color-picker-box .color-sliders{display:flex;flex-direction:column;gap:.5em;padding:.5em .75em;box-sizing:border-box}.color-picker-box .color-sliders .hue-slider,.color-picker-box .color-sliders .opacity-slider{height:.5em;position:relative;border-radius:.5em}.color-picker-box .color-sliders .hue-slider .pointer,.color-picker-box .color-sliders .opacity-slider .pointer{width:.5em;height:.5em;border-radius:50%;transform:translate(-50%,calc(-50% + 4px));box-shadow:0 1px 3px #0003;cursor:pointer;margin:0;padding:0;border:2px solid white;transition:scale .2s ease}.color-picker-box .color-sliders .hue-slider .pointer:hover,.color-picker-box .color-sliders .opacity-slider .pointer:hover{scale:1.2;box-shadow:0 2px 4px #0003}.color-picker-box .color-sliders .hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker-box .suggested-colors{padding:.375rem;box-sizing:border-box;width:100%}.color-picker-box .suggested-colors .suggested-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375em;padding:.25em .375em;border-bottom:1px solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)))}.color-picker-box .suggested-colors .suggested-header span{font-size:.75em;font-weight:500;color:var(--m-input-color, var(--m-mm));display:flex;align-items:center;gap:.5em}.color-picker-box .suggested-colors .color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:8px;width:100%;padding:.25rem}.color-picker-box .suggested-colors .color-grid .color-option{width:24px;height:24px;border-radius:.25rem;cursor:pointer;border:1px solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));transition:transform .15s ease,box-shadow .15s ease;margin:auto;position:relative;padding:0}.color-picker-box .suggested-colors .color-grid .color-option:hover{transform:scale(1.1);z-index:1;box-shadow:0 2px 4px #0003}.color-picker-box .suggested-colors .color-grid .color-option:active{transform:scale(.95)}.color-picker-box .suggested-colors .color-grid .color-option[data-alpha]{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}@keyframes color-picker-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -38584,6 +38665,7 @@ var TimelineComponent = class TimelineComponent extends ConfigComponent {
 					"disableRule",
 					"extraData",
 					"align",
+					"badge",
 					"showBack",
 					"actionButton",
 					"actionLabel",
@@ -38972,7 +39054,7 @@ var ScrollComponent = class ScrollComponent {
     <div class="scroll__fade" [class.visible]="_hasFade()"></div>
   `,
 		isInline: true,
-		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;flex:1;min-height:0;position:relative;overflow:hidden}.scroll__inner{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}@media(max-width:1199px){.scroll__inner{scrollbar-width:none}.scroll__inner::-webkit-scrollbar{display:none}}@media(min-width:1200px){.scroll__inner{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.12) transparent}.scroll__inner::-webkit-scrollbar{width:3px}.scroll__inner::-webkit-scrollbar-track{background:transparent}.scroll__inner::-webkit-scrollbar-thumb{background:#0000001f;border-radius:2px;transition:background .2s}.scroll__inner::-webkit-scrollbar-thumb:hover{background:#00000047}}.scroll__fade{position:absolute;bottom:0;left:0;right:0;height:4rem;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.92));pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:1}.scroll__fade.visible{opacity:1}\n"],
+		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;flex:1;min-height:0;position:relative;overflow:hidden}.scroll__inner{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}@media(max-width:1199px){.scroll__inner{scrollbar-width:none}.scroll__inner::-webkit-scrollbar{display:none}}@media(min-width:1200px){.scroll__inner{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.12) transparent}.scroll__inner::-webkit-scrollbar{width:3px}.scroll__inner::-webkit-scrollbar-track{background:transparent}.scroll__inner::-webkit-scrollbar-thumb{background:#0000001f;border-radius:2px;transition:background .2s}.scroll__inner::-webkit-scrollbar-thumb:hover{background:#00000047}}.scroll__fade{position:absolute;bottom:0;left:0;right:0;height:4rem;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--m-background) 92%,transparent));pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:1}.scroll__fade.visible{opacity:1}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -38992,7 +39074,7 @@ i0.ɵɵngDeclareClassMetadata({
     </div>
     <div class="scroll__fade" [class.visible]="_hasFade()"></div>
   `,
-			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;flex:1;min-height:0;position:relative;overflow:hidden}.scroll__inner{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}@media(max-width:1199px){.scroll__inner{scrollbar-width:none}.scroll__inner::-webkit-scrollbar{display:none}}@media(min-width:1200px){.scroll__inner{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.12) transparent}.scroll__inner::-webkit-scrollbar{width:3px}.scroll__inner::-webkit-scrollbar-track{background:transparent}.scroll__inner::-webkit-scrollbar-thumb{background:#0000001f;border-radius:2px;transition:background .2s}.scroll__inner::-webkit-scrollbar-thumb:hover{background:#00000047}}.scroll__fade{position:absolute;bottom:0;left:0;right:0;height:4rem;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.92));pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:1}.scroll__fade.visible{opacity:1}\n"]
+			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;flex:1;min-height:0;position:relative;overflow:hidden}.scroll__inner{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}@media(max-width:1199px){.scroll__inner{scrollbar-width:none}.scroll__inner::-webkit-scrollbar{display:none}}@media(min-width:1200px){.scroll__inner{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.12) transparent}.scroll__inner::-webkit-scrollbar{width:3px}.scroll__inner::-webkit-scrollbar-track{background:transparent}.scroll__inner::-webkit-scrollbar-thumb{background:#0000001f;border-radius:2px;transition:background .2s}.scroll__inner::-webkit-scrollbar-thumb:hover{background:#00000047}}.scroll__fade{position:absolute;bottom:0;left:0;right:0;height:4rem;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--m-background) 92%,transparent));pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:1}.scroll__fade.visible{opacity:1}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -40673,7 +40755,7 @@ var PanelComponent = class PanelComponent {
     </div>
   `,
 		isInline: true,
-		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;height:100%}:host.is-nav-hidden{display:none}.side-panel{height:100%;background:var(--m-background);display:flex;flex-direction:column;overflow:hidden;position:relative;animation:panel-slide-right .3s cubic-bezier(.2,0,0,1) forwards;border-left:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));box-shadow:-.75rem 0 2rem color-mix(in srgb,var(--m-text) 12%,transparent)}.side-panel--docked{border-left:1px dashed var(--m-border);box-shadow:none}.side-panel--left{animation-name:panel-slide-left;border-left:none;border-right:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));box-shadow:.75rem 0 2rem color-mix(in srgb,var(--m-text) 12%,transparent)}.side-panel--left.side-panel--docked{border-left:none;border-right:1px dashed var(--m-border);box-shadow:none}.side-panel__close{position:absolute;top:0;right:0;padding:.25em;z-index:20}.side-panel__content{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto}@media(max-width:767px){.side-panel{animation-name:panel-slide-bottom;border-left:none;border-right:none;border-top:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));box-shadow:0 -.75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);overflow-y:auto}}@keyframes panel-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"],
+		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;height:100%}:host.is-nav-hidden{display:none}.side-panel{height:100%;background:var(--m-background);display:flex;flex-direction:column;overflow:hidden;position:relative;animation:panel-slide-right .3s cubic-bezier(.2,0,0,1) forwards;border-left:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));box-shadow:-.75rem 0 2rem var(--m-backdrop-shadow)}.side-panel--docked{border-left:1px dashed var(--m-border);box-shadow:none}.side-panel--left{animation-name:panel-slide-left;border-left:none;border-right:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));box-shadow:.75rem 0 2rem var(--m-backdrop-shadow)}.side-panel--left.side-panel--docked{border-left:none;border-right:1px dashed var(--m-border);box-shadow:none}.side-panel__close{position:absolute;top:0;right:0;padding:.25em;z-index:20}.side-panel__content{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto}@media(max-width:767px){.side-panel{animation-name:panel-slide-bottom;border-left:none;border-right:none;border-top:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));box-shadow:0 -.75rem 2rem var(--m-backdrop-shadow);overflow-y:auto}}@keyframes panel-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"],
 		dependencies: [{
 			kind: "component",
 			type: ButtonComponent,
@@ -40747,7 +40829,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useValue: true
 			}],
 			host: { "[class.is-nav-hidden]": "navOpen()" },
-			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;height:100%}:host.is-nav-hidden{display:none}.side-panel{height:100%;background:var(--m-background);display:flex;flex-direction:column;overflow:hidden;position:relative;animation:panel-slide-right .3s cubic-bezier(.2,0,0,1) forwards;border-left:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));box-shadow:-.75rem 0 2rem color-mix(in srgb,var(--m-text) 12%,transparent)}.side-panel--docked{border-left:1px dashed var(--m-border);box-shadow:none}.side-panel--left{animation-name:panel-slide-left;border-left:none;border-right:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));box-shadow:.75rem 0 2rem color-mix(in srgb,var(--m-text) 12%,transparent)}.side-panel--left.side-panel--docked{border-left:none;border-right:1px dashed var(--m-border);box-shadow:none}.side-panel__close{position:absolute;top:0;right:0;padding:.25em;z-index:20}.side-panel__content{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto}@media(max-width:767px){.side-panel{animation-name:panel-slide-bottom;border-left:none;border-right:none;border-top:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));box-shadow:0 -.75rem 2rem color-mix(in srgb,var(--m-text) 12%,transparent);overflow-y:auto}}@keyframes panel-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"]
+			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;height:100%}:host.is-nav-hidden{display:none}.side-panel{height:100%;background:var(--m-background);display:flex;flex-direction:column;overflow:hidden;position:relative;animation:panel-slide-right .3s cubic-bezier(.2,0,0,1) forwards;border-left:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));box-shadow:-.75rem 0 2rem var(--m-backdrop-shadow)}.side-panel--docked{border-left:1px dashed var(--m-border);box-shadow:none}.side-panel--left{animation-name:panel-slide-left;border-left:none;border-right:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));box-shadow:.75rem 0 2rem var(--m-backdrop-shadow)}.side-panel--left.side-panel--docked{border-left:none;border-right:1px dashed var(--m-border);box-shadow:none}.side-panel__close{position:absolute;top:0;right:0;padding:.25em;z-index:20}.side-panel__content{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto}@media(max-width:767px){.side-panel{animation-name:panel-slide-bottom;border-left:none;border-right:none;border-top:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));box-shadow:0 -.75rem 2rem var(--m-backdrop-shadow);overflow-y:auto}}@keyframes panel-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -42075,7 +42157,7 @@ var NavHeaderComponent = class NavHeaderComponent {
 			classAttribute: "m-nav-header"
 		},
 		ngImport: i0,
-		template: "<m-section>\n  @if (_isSearch() && _searchOpen()) {\n    <!-- Searching: the field takes the row the trail was on, so the nav is\n         hidden while there is something to type into. -->\n    <m-section-search\n      class=\"nav-header__search\"\n      [(isOpen)]=\"_searchOpen\"\n      [value]=\"_searchStore.query()\"\n      [searchLabel]=\"_searchLabel()\"\n      (searchChange)=\"_searchStore.updateQuery($event)\"\n    />\n  } @else if (_trail() || _isSearch()) {\n    <!-- The nav's row, and the bar's toggle stands in it rather than in a row\n         stacked on top of it. Both slots are written a single `@if` deep: a\n         Section matches its projected slots by tag, and a node nested deeper\n         falls through to the body instead. -->\n    <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n      @if (_trail(); as trail) {\n        <m-nav-trail [config]=\"trail\" />\n      }\n      @if (_isSearch()) {\n        <m-button\n          class=\"nav-header__search-toggle\"\n          [config]=\"_searchToggle\"\n          (clicked)=\"_openSearch()\"\n        />\n      }\n    </m-section-back>\n  }\n\n  @if (_user(); as user) {\n    <m-user class=\"nav-header__user\" [id]=\"user.id\" [user]=\"user\" mRef=\"root_user\">\n      <span class=\"nav-header__username\">&#64;{{ user.username }}</span>\n    </m-user>\n  } @else if (_header(); as h) {\n    @if (h.label) {\n      <!-- The title follows its own Nav, as a menu row naming it would: the\n           panel lists that Nav's rows, so its Page is the one they hang from.\n           `role=\"button\"` also keeps the sheet's drag from starting on it. -->\n      @if (h.appLogo; as logo) {\n        <!-- A mounted app's header draws its AppLogo in the icon's place. -->\n        <m-section-header\n          class=\"nav-header__title\"\n          role=\"button\"\n          tabindex=\"0\"\n          [label]=\"h.label\"\n          (click)=\"_followHeader()\"\n          (keydown.enter)=\"_followHeader()\"\n        >\n          <m-app-logo class=\"nav-header__app-logo\" [glyph]=\"logo.glyph\" [appColor]=\"logo.color\" [name]=\"logo.name\" />\n        </m-section-header>\n      } @else {\n        <m-section-header\n          class=\"nav-header__title\"\n          role=\"button\"\n          tabindex=\"0\"\n          [icon]=\"h.icon\"\n          [label]=\"h.label\"\n          (click)=\"_followHeader()\"\n          (keydown.enter)=\"_followHeader()\"\n        />\n      }\n    }\n  }\n</m-section>\n",
+		template: "<m-section>\n  @if (_isSearch() && _searchOpen()) {\n    <!-- Searching: the field takes the row the trail was on, so the nav is\n         hidden while there is something to type into. -->\n    <m-section-search\n      class=\"nav-header__search\"\n      [(isOpen)]=\"_searchOpen\"\n      [value]=\"_searchStore.query()\"\n      [searchLabel]=\"_searchLabel()\"\n      (searchChange)=\"_searchStore.updateQuery($event)\"\n    />\n  } @else if (_trail() || _isSearch()) {\n    <!-- The nav's row, and the bar's toggle stands in it rather than in a row\n         stacked on top of it. Both slots are written a single `@if` deep: a\n         Section matches its projected slots by tag, and a node nested deeper\n         falls through to the body instead. -->\n    <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n      @if (_trail(); as trail) {\n        <m-nav-trail [config]=\"trail\" />\n      }\n      @if (_isSearch()) {\n        <m-button\n          class=\"nav-header__search-toggle\"\n          [config]=\"_searchToggle\"\n          (clicked)=\"_openSearch()\"\n        />\n      }\n    </m-section-back>\n  }\n\n  @if (_user(); as user) {\n    <m-user class=\"nav-header__user\" [id]=\"user.id\" [user]=\"user\" mRef=\"root_user\">\n      <span class=\"nav-header__username\">&#64;{{ user.username }}</span>\n    </m-user>\n  } @else if (_header(); as h) {\n    @if (h.label) {\n      <!-- The title follows its own Nav, as a menu row naming it would: the\n           panel lists that Nav's rows, so its Page is the one they hang from.\n           `role=\"button\"` also keeps the sheet's drag from starting on it. -->\n      @if (h.appLogo; as logo) {\n        <!-- A mounted app's header draws its AppLogo in the icon's place. -->\n        <m-section-header\n          class=\"nav-header__title\"\n          role=\"button\"\n          tabindex=\"0\"\n          [label]=\"h.label\"\n          [badge]=\"h.badge\"\n          (click)=\"_followHeader()\"\n          (keydown.enter)=\"_followHeader()\"\n        >\n          <m-app-logo class=\"nav-header__app-logo\" [glyph]=\"logo.glyph\" [appColor]=\"logo.color\" [name]=\"logo.name\" />\n        </m-section-header>\n      } @else {\n        <m-section-header\n          class=\"nav-header__title\"\n          role=\"button\"\n          tabindex=\"0\"\n          [icon]=\"h.icon\"\n          [label]=\"h.label\"\n          [badge]=\"h.badge\"\n          (click)=\"_followHeader()\"\n          (keydown.enter)=\"_followHeader()\"\n        />\n      }\n    }\n  }\n</m-section>\n",
 		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.nav-header__user{display:block;padding:1rem}.nav-header__username{font-size:.6875rem;font-weight:600;color:var(--m-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}m-section-search.nav-header__search{--_nav-row-height: var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));min-height:var(--_nav-row-height);padding-block:0;--m-input-clear-height: calc(var(--_nav-row-height) - .5rem);--m-input-clear-min-height: calc(var(--_nav-row-height) - .5rem)}.nav-header__title{cursor:pointer}.nav-header__title:hover,.nav-header__title:focus-visible{background:color-mix(in srgb,var(--m-text) 8%,transparent);outline:none}.nav-header__title .nav-header__app-logo{flex-shrink:0;align-self:flex-start;width:var(--m-section-header-icon-box, 1.5125rem);height:var(--m-section-header-icon-box, 1.5125rem)}\n"],
 		dependencies: [
 			{
@@ -42120,6 +42202,7 @@ var NavHeaderComponent = class NavHeaderComponent {
 					"disableRule",
 					"extraData",
 					"align",
+					"badge",
 					"showBack",
 					"actionButton",
 					"actionLabel",
@@ -42280,7 +42363,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[style.display]": "\"block\"",
 				"[style.--m-section-min-height]": "\"0\""
 			},
-			template: "<m-section>\n  @if (_isSearch() && _searchOpen()) {\n    <!-- Searching: the field takes the row the trail was on, so the nav is\n         hidden while there is something to type into. -->\n    <m-section-search\n      class=\"nav-header__search\"\n      [(isOpen)]=\"_searchOpen\"\n      [value]=\"_searchStore.query()\"\n      [searchLabel]=\"_searchLabel()\"\n      (searchChange)=\"_searchStore.updateQuery($event)\"\n    />\n  } @else if (_trail() || _isSearch()) {\n    <!-- The nav's row, and the bar's toggle stands in it rather than in a row\n         stacked on top of it. Both slots are written a single `@if` deep: a\n         Section matches its projected slots by tag, and a node nested deeper\n         falls through to the body instead. -->\n    <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n      @if (_trail(); as trail) {\n        <m-nav-trail [config]=\"trail\" />\n      }\n      @if (_isSearch()) {\n        <m-button\n          class=\"nav-header__search-toggle\"\n          [config]=\"_searchToggle\"\n          (clicked)=\"_openSearch()\"\n        />\n      }\n    </m-section-back>\n  }\n\n  @if (_user(); as user) {\n    <m-user class=\"nav-header__user\" [id]=\"user.id\" [user]=\"user\" mRef=\"root_user\">\n      <span class=\"nav-header__username\">&#64;{{ user.username }}</span>\n    </m-user>\n  } @else if (_header(); as h) {\n    @if (h.label) {\n      <!-- The title follows its own Nav, as a menu row naming it would: the\n           panel lists that Nav's rows, so its Page is the one they hang from.\n           `role=\"button\"` also keeps the sheet's drag from starting on it. -->\n      @if (h.appLogo; as logo) {\n        <!-- A mounted app's header draws its AppLogo in the icon's place. -->\n        <m-section-header\n          class=\"nav-header__title\"\n          role=\"button\"\n          tabindex=\"0\"\n          [label]=\"h.label\"\n          (click)=\"_followHeader()\"\n          (keydown.enter)=\"_followHeader()\"\n        >\n          <m-app-logo class=\"nav-header__app-logo\" [glyph]=\"logo.glyph\" [appColor]=\"logo.color\" [name]=\"logo.name\" />\n        </m-section-header>\n      } @else {\n        <m-section-header\n          class=\"nav-header__title\"\n          role=\"button\"\n          tabindex=\"0\"\n          [icon]=\"h.icon\"\n          [label]=\"h.label\"\n          (click)=\"_followHeader()\"\n          (keydown.enter)=\"_followHeader()\"\n        />\n      }\n    }\n  }\n</m-section>\n",
+			template: "<m-section>\n  @if (_isSearch() && _searchOpen()) {\n    <!-- Searching: the field takes the row the trail was on, so the nav is\n         hidden while there is something to type into. -->\n    <m-section-search\n      class=\"nav-header__search\"\n      [(isOpen)]=\"_searchOpen\"\n      [value]=\"_searchStore.query()\"\n      [searchLabel]=\"_searchLabel()\"\n      (searchChange)=\"_searchStore.updateQuery($event)\"\n    />\n  } @else if (_trail() || _isSearch()) {\n    <!-- The nav's row, and the bar's toggle stands in it rather than in a row\n         stacked on top of it. Both slots are written a single `@if` deep: a\n         Section matches its projected slots by tag, and a node nested deeper\n         falls through to the body instead. -->\n    <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n      @if (_trail(); as trail) {\n        <m-nav-trail [config]=\"trail\" />\n      }\n      @if (_isSearch()) {\n        <m-button\n          class=\"nav-header__search-toggle\"\n          [config]=\"_searchToggle\"\n          (clicked)=\"_openSearch()\"\n        />\n      }\n    </m-section-back>\n  }\n\n  @if (_user(); as user) {\n    <m-user class=\"nav-header__user\" [id]=\"user.id\" [user]=\"user\" mRef=\"root_user\">\n      <span class=\"nav-header__username\">&#64;{{ user.username }}</span>\n    </m-user>\n  } @else if (_header(); as h) {\n    @if (h.label) {\n      <!-- The title follows its own Nav, as a menu row naming it would: the\n           panel lists that Nav's rows, so its Page is the one they hang from.\n           `role=\"button\"` also keeps the sheet's drag from starting on it. -->\n      @if (h.appLogo; as logo) {\n        <!-- A mounted app's header draws its AppLogo in the icon's place. -->\n        <m-section-header\n          class=\"nav-header__title\"\n          role=\"button\"\n          tabindex=\"0\"\n          [label]=\"h.label\"\n          [badge]=\"h.badge\"\n          (click)=\"_followHeader()\"\n          (keydown.enter)=\"_followHeader()\"\n        >\n          <m-app-logo class=\"nav-header__app-logo\" [glyph]=\"logo.glyph\" [appColor]=\"logo.color\" [name]=\"logo.name\" />\n        </m-section-header>\n      } @else {\n        <m-section-header\n          class=\"nav-header__title\"\n          role=\"button\"\n          tabindex=\"0\"\n          [icon]=\"h.icon\"\n          [label]=\"h.label\"\n          [badge]=\"h.badge\"\n          (click)=\"_followHeader()\"\n          (keydown.enter)=\"_followHeader()\"\n        />\n      }\n    }\n  }\n</m-section>\n",
 			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.nav-header__user{display:block;padding:1rem}.nav-header__username{font-size:.6875rem;font-weight:600;color:var(--m-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}m-section-search.nav-header__search{--_nav-row-height: var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));min-height:var(--_nav-row-height);padding-block:0;--m-input-clear-height: calc(var(--_nav-row-height) - .5rem);--m-input-clear-min-height: calc(var(--_nav-row-height) - .5rem)}.nav-header__title{cursor:pointer}.nav-header__title:hover,.nav-header__title:focus-visible{background:color-mix(in srgb,var(--m-text) 8%,transparent);outline:none}.nav-header__title .nav-header__app-logo{flex-shrink:0;align-self:flex-start;width:var(--m-section-header-icon-box, 1.5125rem);height:var(--m-section-header-icon-box, 1.5125rem)}\n"]
 		}]
 	}],
@@ -42344,6 +42427,7 @@ var NavMenuComponent = class NavMenuComponent {
 	browse = (item) => {
 		if (item.nav) this._navRef?.browse?.(item.nav, item.navParams);
 	};
+	formatBadgeCount = (count, max = 99) => formatBadgeCount(count, max);
 	rows = computed(() => (this.navList() ?? []).map((item, index) => ({
 		id: `${item.nav ?? item.href ?? item.label}-${index}`,
 		row: item
@@ -42395,6 +42479,18 @@ var NavMenuComponent = class NavMenuComponent {
         <m-icon [name]="item.icon || 'menu'" [baseUrl]="baseUrl()" />
       }
     </ng-template>
+    <!-- A row's count, drawn beside the row's own word rather than pushed to
+         the row's end: it is the same figure the panel's header wears and part
+         of the label, not a column of figures the list is scanned by. -->
+    <ng-template #badgeTemplate let-item>
+      @if (item.badge; as badge) {
+        <m-badge
+          class="nav-menu__badge"
+          [config]="{ variant: badge.variant ?? 'danger' }"
+          >{{ formatBadgeCount(badge.count) }}</m-badge
+        >
+      }
+    </ng-template>
     <ng-template #menuTemplate let-item="row">
       <div class="nav-menu__item">
         @if (item.nav; as nav) {
@@ -42410,7 +42506,10 @@ var NavMenuComponent = class NavMenuComponent {
             <span class="nav-menu__icon">
               <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: item }" />
             </span>
-            <span class="nav-menu__label">{{ item.label | translate }}</span>
+            <span class="nav-menu__label">
+              {{ item.label | translate }}
+              <ng-container *ngTemplateOutlet="badgeTemplate; context: { $implicit: item }" />
+            </span>
           </a>
           <!-- The row follows the Nav; the chevron only Browses into it. -->
           @if (item.browsable) {
@@ -42428,7 +42527,10 @@ var NavMenuComponent = class NavMenuComponent {
             <span class="nav-menu__icon">
               <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: item }" />
             </span>
-            <span class="nav-menu__label">{{ item.label | translate }}</span>
+            <span class="nav-menu__label">
+              {{ item.label | translate }}
+              <ng-container *ngTemplateOutlet="badgeTemplate; context: { $implicit: item }" />
+            </span>
           </a>
         } @else {
           <span class="nav-menu__icon">
@@ -42436,6 +42538,7 @@ var NavMenuComponent = class NavMenuComponent {
           </span>
           <span class="nav-menu__label">
             <span class="nav-menu__text">{{ item.label | translate }}</span>
+            <ng-container *ngTemplateOutlet="badgeTemplate; context: { $implicit: item }" />
           </span>
         }
       </div>
@@ -42445,7 +42548,7 @@ var NavMenuComponent = class NavMenuComponent {
     </div>
   `,
 		isInline: true,
-		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.nav-menu{padding:0;margin:0}.nav-menu ul{display:flex;flex-direction:column;gap:0;padding:0;margin:0}.nav-menu li{padding:0;list-style:none;width:100%;border-bottom:1px solid rgba(0,0,0,.02)}.nav-menu li:last-child{border-bottom:none}.nav-menu__item{display:flex;align-items:center;gap:.75rem;width:100%;position:relative;color:var(--m-text-secondary);background:transparent}.nav-menu__item:not(:has(.nav-menu__link)){padding:.625rem 1rem}.nav-menu__link{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;border-radius:0;transition:all .15s cubic-bezier(.4,0,.2,1);cursor:pointer;width:100%;color:inherit;text-decoration:none}.nav-menu__link:hover{background:#00000008;color:var(--m-text)}.nav-menu__link:hover .nav-menu__icon{color:var(--m-text)}.nav-menu__link:hover .nav-menu__label{color:var(--m-text);font-weight:600}.nav-menu__browse{flex:none;margin-inline-end:.5rem;color:var(--m-text-tertiary)}.nav-menu__icon{display:flex;align-items:center;justify-content:center;color:var(--m-text-tertiary);transition:color .15s ease;width:1.15rem;height:1.15rem}.nav-menu__app-logo{display:block;width:100%;height:100%}.nav-menu__icon .m-icon{display:flex;align-items:center}.nav-menu__label{flex:1;display:block;width:100%;font-size:.8125rem;font-weight:500;letter-spacing:.01em;color:inherit;text-decoration:none}.nav-menu__item:has(.active){background:linear-gradient(90deg,color-mix(in srgb,var(--m-mm) 6%,transparent) 0%,color-mix(in srgb,var(--m-mm) 2%,transparent) 60%,transparent 100%);color:var(--m-mm);border-radius:0}.nav-menu__item:has(.active):after{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.05) 50%,transparent 100%);z-index:3}.nav-menu__item:has(.active) .nav-menu__icon{color:var(--m-mm);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--m-mm) 20%,transparent))}.nav-menu__item:has(.active) .nav-menu__label{color:var(--m-mm);font-weight:700;letter-spacing:.015em}\n"],
+		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.nav-menu{padding:0;margin:0}.nav-menu ul{display:flex;flex-direction:column;gap:0;padding:0;margin:0}.nav-menu li{padding:0;list-style:none;width:100%;border-bottom:1px solid rgba(0,0,0,.02)}.nav-menu li:last-child{border-bottom:none}.nav-menu__item{display:flex;align-items:center;gap:.75rem;width:100%;position:relative;color:var(--m-text-secondary);background:transparent}.nav-menu__item:not(:has(.nav-menu__link)){padding:.625rem 1rem}.nav-menu__link{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;border-radius:0;transition:all .15s cubic-bezier(.4,0,.2,1);cursor:pointer;width:100%;color:inherit;text-decoration:none}.nav-menu__link:hover{background:#00000008;color:var(--m-text)}.nav-menu__link:hover .nav-menu__icon{color:var(--m-text)}.nav-menu__link:hover .nav-menu__label{color:var(--m-text);font-weight:600}.nav-menu__browse{flex:none;margin-inline-end:.5rem;color:var(--m-text-tertiary)}.nav-menu__icon{display:flex;align-items:center;justify-content:center;color:var(--m-text-tertiary);transition:color .15s ease;width:1.15rem;height:1.15rem}.nav-menu__app-logo{display:block;width:100%;height:100%}.nav-menu__icon .m-icon{display:flex;align-items:center}.nav-menu__label{flex:1;display:block;width:100%;font-size:.8125rem;font-weight:500;letter-spacing:.01em;color:inherit;text-decoration:none}.nav-menu__badge{--m-badge-height: 1.5em;--m-badge-min-width: 1.5em;--m-badge-padding: 0 .3em;--m-badge-gap: .1em;vertical-align:middle;margin-inline-start:.15rem}.nav-menu__item:has(.active){background:linear-gradient(90deg,color-mix(in srgb,var(--m-mm) 6%,transparent) 0%,color-mix(in srgb,var(--m-mm) 2%,transparent) 60%,transparent 100%);color:var(--m-mm);border-radius:0}.nav-menu__item:has(.active):after{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.05) 50%,transparent 100%);z-index:3}.nav-menu__item:has(.active) .nav-menu__icon{color:var(--m-mm);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--m-mm) 20%,transparent))}.nav-menu__item:has(.active) .nav-menu__label{color:var(--m-mm);font-weight:700;letter-spacing:.015em}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -42487,6 +42590,13 @@ var NavMenuComponent = class NavMenuComponent {
 					"size"
 				]
 			},
+			{
+				kind: "component",
+				type: BadgeComponent,
+				selector: "m-badge",
+				inputs: ["config"],
+				outputs: ["configChange"]
+			},
 			{
 				kind: "directive",
 				type: MRefDirective,
@@ -42576,6 +42686,18 @@ i0.ɵɵngDeclareClassMetadata({
         <m-icon [name]="item.icon || 'menu'" [baseUrl]="baseUrl()" />
       }
     </ng-template>
+    <!-- A row's count, drawn beside the row's own word rather than pushed to
+         the row's end: it is the same figure the panel's header wears and part
+         of the label, not a column of figures the list is scanned by. -->
+    <ng-template #badgeTemplate let-item>
+      @if (item.badge; as badge) {
+        <m-badge
+          class="nav-menu__badge"
+          [config]="{ variant: badge.variant ?? 'danger' }"
+          >{{ formatBadgeCount(badge.count) }}</m-badge
+        >
+      }
+    </ng-template>
     <ng-template #menuTemplate let-item="row">
       <div class="nav-menu__item">
         @if (item.nav; as nav) {
@@ -42591,7 +42713,10 @@ i0.ɵɵngDeclareClassMetadata({
             <span class="nav-menu__icon">
               <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: item }" />
             </span>
-            <span class="nav-menu__label">{{ item.label | translate }}</span>
+            <span class="nav-menu__label">
+              {{ item.label | translate }}
+              <ng-container *ngTemplateOutlet="badgeTemplate; context: { $implicit: item }" />
+            </span>
           </a>
           <!-- The row follows the Nav; the chevron only Browses into it. -->
           @if (item.browsable) {
@@ -42609,7 +42734,10 @@ i0.ɵɵngDeclareClassMetadata({
             <span class="nav-menu__icon">
               <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: item }" />
             </span>
-            <span class="nav-menu__label">{{ item.label | translate }}</span>
+            <span class="nav-menu__label">
+              {{ item.label | translate }}
+              <ng-container *ngTemplateOutlet="badgeTemplate; context: { $implicit: item }" />
+            </span>
           </a>
         } @else {
           <span class="nav-menu__icon">
@@ -42617,6 +42745,7 @@ i0.ɵɵngDeclareClassMetadata({
           </span>
           <span class="nav-menu__label">
             <span class="nav-menu__text">{{ item.label | translate }}</span>
+            <ng-container *ngTemplateOutlet="badgeTemplate; context: { $implicit: item }" />
           </span>
         }
       </div>
@@ -42630,12 +42759,13 @@ i0.ɵɵngDeclareClassMetadata({
 				NgTemplateOutlet,
 				IconComponent,
 				AppLogoComponent,
+				BadgeComponent,
 				MRefDirective,
 				TranslatePipe,
 				ListComponent,
 				ButtonComponent
 			],
-			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.nav-menu{padding:0;margin:0}.nav-menu ul{display:flex;flex-direction:column;gap:0;padding:0;margin:0}.nav-menu li{padding:0;list-style:none;width:100%;border-bottom:1px solid rgba(0,0,0,.02)}.nav-menu li:last-child{border-bottom:none}.nav-menu__item{display:flex;align-items:center;gap:.75rem;width:100%;position:relative;color:var(--m-text-secondary);background:transparent}.nav-menu__item:not(:has(.nav-menu__link)){padding:.625rem 1rem}.nav-menu__link{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;border-radius:0;transition:all .15s cubic-bezier(.4,0,.2,1);cursor:pointer;width:100%;color:inherit;text-decoration:none}.nav-menu__link:hover{background:#00000008;color:var(--m-text)}.nav-menu__link:hover .nav-menu__icon{color:var(--m-text)}.nav-menu__link:hover .nav-menu__label{color:var(--m-text);font-weight:600}.nav-menu__browse{flex:none;margin-inline-end:.5rem;color:var(--m-text-tertiary)}.nav-menu__icon{display:flex;align-items:center;justify-content:center;color:var(--m-text-tertiary);transition:color .15s ease;width:1.15rem;height:1.15rem}.nav-menu__app-logo{display:block;width:100%;height:100%}.nav-menu__icon .m-icon{display:flex;align-items:center}.nav-menu__label{flex:1;display:block;width:100%;font-size:.8125rem;font-weight:500;letter-spacing:.01em;color:inherit;text-decoration:none}.nav-menu__item:has(.active){background:linear-gradient(90deg,color-mix(in srgb,var(--m-mm) 6%,transparent) 0%,color-mix(in srgb,var(--m-mm) 2%,transparent) 60%,transparent 100%);color:var(--m-mm);border-radius:0}.nav-menu__item:has(.active):after{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.05) 50%,transparent 100%);z-index:3}.nav-menu__item:has(.active) .nav-menu__icon{color:var(--m-mm);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--m-mm) 20%,transparent))}.nav-menu__item:has(.active) .nav-menu__label{color:var(--m-mm);font-weight:700;letter-spacing:.015em}\n"]
+			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.nav-menu{padding:0;margin:0}.nav-menu ul{display:flex;flex-direction:column;gap:0;padding:0;margin:0}.nav-menu li{padding:0;list-style:none;width:100%;border-bottom:1px solid rgba(0,0,0,.02)}.nav-menu li:last-child{border-bottom:none}.nav-menu__item{display:flex;align-items:center;gap:.75rem;width:100%;position:relative;color:var(--m-text-secondary);background:transparent}.nav-menu__item:not(:has(.nav-menu__link)){padding:.625rem 1rem}.nav-menu__link{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;border-radius:0;transition:all .15s cubic-bezier(.4,0,.2,1);cursor:pointer;width:100%;color:inherit;text-decoration:none}.nav-menu__link:hover{background:#00000008;color:var(--m-text)}.nav-menu__link:hover .nav-menu__icon{color:var(--m-text)}.nav-menu__link:hover .nav-menu__label{color:var(--m-text);font-weight:600}.nav-menu__browse{flex:none;margin-inline-end:.5rem;color:var(--m-text-tertiary)}.nav-menu__icon{display:flex;align-items:center;justify-content:center;color:var(--m-text-tertiary);transition:color .15s ease;width:1.15rem;height:1.15rem}.nav-menu__app-logo{display:block;width:100%;height:100%}.nav-menu__icon .m-icon{display:flex;align-items:center}.nav-menu__label{flex:1;display:block;width:100%;font-size:.8125rem;font-weight:500;letter-spacing:.01em;color:inherit;text-decoration:none}.nav-menu__badge{--m-badge-height: 1.5em;--m-badge-min-width: 1.5em;--m-badge-padding: 0 .3em;--m-badge-gap: .1em;vertical-align:middle;margin-inline-start:.15rem}.nav-menu__item:has(.active){background:linear-gradient(90deg,color-mix(in srgb,var(--m-mm) 6%,transparent) 0%,color-mix(in srgb,var(--m-mm) 2%,transparent) 60%,transparent 100%);color:var(--m-mm);border-radius:0}.nav-menu__item:has(.active):after{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.05) 50%,transparent 100%);z-index:3}.nav-menu__item:has(.active) .nav-menu__icon{color:var(--m-mm);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--m-mm) 20%,transparent))}.nav-menu__item:has(.active) .nav-menu__label{color:var(--m-mm);font-weight:700;letter-spacing:.015em}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -47118,16 +47248,16 @@ const platformNavWidgets = () => ({
 });
 const providePlatformNavWidgets = () => provideNavWidgets(platformNavWidgets());
 function provideAppContext() {
-	const navStore = inject(NavStore);
+	const ownAppLink = inject(APP_LINK);
 	const authStore = inject(AuthStore);
 	const agreementGate = inject(AgreementGate);
 	const relationType = signal(null, ...ngDevMode ? [{ debugName: "relationType" }] : /* istanbul ignore next */ []);
 	effect(() => {
-		const appLink = navStore.appLink();
+		const appLink = ownAppLink();
 		const isLoggedIn = authStore.isLoggedIn();
 		agreementGate.revision();
 		if (appLink && isLoggedIn) {
-			const current = () => untracked(navStore.appLink) === appLink;
+			const current = () => untracked(ownAppLink) === appLink;
 			agreementGate.view(appLink).then((view) => current() && relationType.set(view.type), () => current() && relationType.set(null));
 		} else relationType.set(null);
 	});
@@ -48594,6 +48724,7 @@ var SvgGeneratorToolBoxComponent = class SvgGeneratorToolBoxComponent {
 					"disableRule",
 					"extraData",
 					"align",
+					"badge",
 					"showBack",
 					"actionButton",
 					"actionLabel",
@@ -51697,6 +51828,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ACCESS_DOMAINS, APP_CONTEXT_REF, APP_LINK, APP_LOGO_ICON, APP_LOGO_SOURCE, APP_THEME_COLOR, ASSET_BASE_URL, AUDIENCE_ICONS, AUDIENCE_LEVELS, AccordionBodyDirective, AccordionComponent, AccordionGroupComponent, ActionComponent, AnimatedGraphsComponent, AppAvailability, AppCardComponent, AppIdentityService, AppLogoComponent, AppLogoState, AppRelationType, AppTileComponent, AssetStore, AssetUrlPipe, Assets, AudiencePickerBoxComponent, AudiencePickerComponent, AuthActivityPageComponent, AuthApiService, AuthStore, AutosizeDirective, BadgeComponent, BandingComponent, BaseArrayInputComponent, BaseRootWebComponent, BaseWebComponent, BrowserLocaleService, ButtonComponent, ButtonGroupComponent, CALLING_APP_HEADER, COMPONENT_INPUT_REGISTRY, CardComponent, CardWrapperComponent, CarouselComponent, ChartComponent, ChatBubbleComponent, CheckboxGroupComponent, CheckboxInputComponent, ClearableInputComponent, ClipboardService, ColComponent, ColorPickerInputComponent, CommentItemComponent, CommentsApiService, CommentsComponent, CommentsStore, CompactNumberPipe, ComponentInputComponent, ComponentStepperComponent, ConfigComponent, ConfirmComponent, ContextMenuComponent, CustomIconClass, CustomIconEditComponent, DEFAULT_AUDIENCE, DEFAULT_DENIAL, DEFAULT_DOC_ALIGN, DEFAULT_DOC_DENSITY, DEFAULT_DOC_VARIANT, DEFAULT_FILTER_RANGE_MODE, DEFAULT_FILTER_VARIANT, DEFAULT_NAV_PARAM, DEFAULT_NAV_SEGMENT, DEFAULT_SIZE, DOCK_MIN_PAGE_REMAINDER, DOCS_FOLDER, DOC_ACTION_ICONS, DOC_ALIGNS, DOC_DENSITIES, DOC_EDIT_ACTIONS, DOC_TOOLBAR_GROUPS, DOC_VARIANTS, DashboardCardComponent, DateInputComponent, DatePickerComponent, DeviceService, DocComponent, DocEditorComponent, DomService, Domain, DotGridComponent, DragListDirective, DragListItemDirective, DraggableDirective, DropdownInputComponent, FILTER_GROUP_CONTEXT, FILTER_RANGE_MODES, FILTER_VARIANTS, FLEX_VARIANTS, FOLDER_PICK_LISTENER, FORM_ASSET_FOLDER, FileService, FileUploadDirective, FileUploadInputComponent, FlexComponent, FlexItemComponent, FormGroupComponent, FrameComponent, FreezeService, GRID_BREAKPOINTS, GetNavService, HOST_SESSION, HeaderComponent, HighlightDirective, HttpService, HttpSharingClient, ICON_SOURCE, IS_DESIGN_MODE, IS_SIDE_PANEL, IconComponent, ImgComponent, InputType, InstrumentScoreComponent, InterceptorObservables, JumbotronComponent, KeyValueComponent, LAYOUT_ASSET_FOLDER, LOADING_ACTIONS_REF, LOGIN_COMPONENT, LOGIN_STORE, LOGO_GLYPH_MAX_BYTES, LanguageComponent, ListComponent, LogoComponent, LogoGlyphInputComponent, MAG_SOCKET_EVENT, MHeroColorDirective, MHeroComponent, MODAL_REF, MODAL_STORE_REF, MOUNT_STATIC_SEGMENT, MOUNT_TOKEN, MRefDirective, MStepComponent, MURL_PARAM, MURL_SEP, ManifestEnrichmentService, MarginDirective, MenuComponent, ModalDirective, ModalRef, ModalStore, MoneyPipe, MultiRangeInputComponent, MultiselectInputComponent, MurlUrlSerializer, NAV_DEFAULT_MURL, NAV_ID_SEP, NAV_MAIN_BUTTONS, NAV_SEGMENT_RE, NAV_STORE_REF, NAV_WC_COMPONENTS, NAV_WIDGET_MAP, NavComponent, NavDetailsComponent, NavHeaderComponent, NavMenuComponent, NavStore, NavTrailComponent, NothingComponent, NotificationElementComponent, NotificationGroupComponent, NotificationPopupComponent, NotificationService, NotificationStore, NotificationType, NotificationWidgetComponent, ONE_ASSET_BASE_URL, OPTIONS_SOURCE, OVERLAY_WIDGETS, OneApp, OptionsSourceDirective, OverlayBodyComponent, OverlayRef, OverlayService, PLATFORM_BUTTON_NAV_IDS, PLATFORM_EXTENSIBLE_NAV_IDS, PLATFORM_NAV_MAP, PLATFORM_ROOT_CHILDREN, PLUGIN_FALLBACK_LANG, PLUGIN_OUTPUT_EVENT, PLUGIN_SCREENS, PaddingDirective, PaginationComponent, PanelComponent, PercentagePipe, PlaygroundComponent, PluginComponent, PluginInputComponent, PluginOutputComponent, PositionDirective, PwaInstallComponent, RECENT_SEARCH_LIMIT, REMOTE_BOOT_TIMEOUT_MS, REMOTE_PAGE_RELOAD, ROOT_NAV, RadioGroupComponent, RadioInputComponent, RangeInputComponent, RatingInputComponent, ReactiveElementComponent, RemoteComponent, RemoteLoaderService, ResizeElementComponent, RouteContainer, RowComponent, SEARCH_ANSWER_KEY, SEARCH_LABEL_KEY, SEARCH_QUERY, SEARCH_RESULTS_EVENT, SECTION_ACCORDION_GROUP, SECTION_FORM_CONTEXT, SECTION_TABLE_VARIANTS, SHARED_ICONS, SHARING_CLIENT, SIZE_CONTEXT, SPACING_INWARD, SPLASH_ID, ScoreComponent, ScrollComponent, ScrollService, SearchPanelComponent, SearchStore, SearchUserPanelComponent, SectionAccordionDirective, SectionAccordionGroupDirective, SectionBackComponent, SectionBadgesComponent, SectionButtonGroupComponent, SectionCardComponent, SectionCarouselComponent, SectionComponent, SectionFilterComponent, SectionFilterGroupComponent, SectionFilterMenuComponent, SectionFilterPanelComponent, SectionFilterRangePanelComponent, SectionFooterComponent, SectionFormComponent, SectionFormItemComponent, SectionHeaderComponent, SectionHeroComponent, SectionPaginationComponent, SectionSearchComponent, SectionStepperComponent, SectionTableCellComponent, SectionTableComponent, SectionTableRowComponent, SectionTableSortPipe, SectionTabsComponent, SectionToggleComponent, SectionToggleItemDirective, SelectableCardInputComponent, SelectorDirective, SettingsSearchBarComponent, SettingsSearchService, ShapeComponent, SharedStoreRegistry, SidePanelDirective, Size, SocketStore, SortComponent, StatComponent, StepComponent, StepperComponent, StepsComponent, StorageService, StrokeLinecap, StrokeLinejoin, SummaryComponent, SvgGeneratorComponent, SvgGeneratorService, SvgService, TOTAL_COLUMNS, TRANSLATION_SOURCE, TableComponent, TechnicalMeterComponent, TextInputComponent, TextOutputComponent, TextareaInputComponent, ThemeComponent, ThemeDataService, ThemeService, ThemeStore, TimeAgoPipe, TimelineComponent, ToggleButtonComponent, ToggleInputComponent, ToggleRadioInputComponent, ToolTipDirective, TooltipComponent, TranslatePipe, TranslateService, TreeGridComponent, URL_SEP, USER_STORE_REF, USER_TAB_MAP, UniverseComponent, UserApiService, UserAvatarComponent, UserComponent, UserNavComponent, UserSettingsComponent, UserStore, WC_BUNDLE, WC_NAVIGATE_EVENT, WC_ROUTE_CHANGED_EVENT, WC_SEARCH_GROUPS, WIN_USER_TAB_HOOK, WIN_USER_TAB_KEY, WatermarkComponent, WcRouterStore, WrapperInputComponent, activeElementWithin, allowedCodes, anchorNavId, appColorBrand, appLogoShadowColor, appThemeColorFactory, applyColorsToElement, applyDocEdit, assetOptions, baseUnderHost, bootstrapMagApp, bootstrapPwaInstall, browserLocale, buildWcBaseUrl, calculateLuminance, calculateRanks, cellText, checkDoc, checkFilterCondition, childNavId, claimDenial, classListSignal, coerceSize, cornerEdge, cornerSide, createLoadingState, createMap, createPlatformNavMap, createPluginElement, definePluginScreens, definedWcBundleOf, definedWcTierOf, deriveAvatarGradient, deriveContrastColor, deriveOppositeColor, derivePropertyName, docActionKey, docAssetCandidates, docProblemKey, docRemotePath, emailValidation, escapeHtml, evaluate, evaluateBool, exposeScreens, exposedScreensOf, fieldBoolean, fieldNumber, fieldString, filterHoldsList, filterHoldsOneBound, filterHoldsOptions, filterHoldsRange, filterList, filterNumber, filterNumberList, filterOne, filterPanelOf, filterPanelWidth, filterRange, filterTreeGridRows, filterValueList, filterValues, flattenTreeGridRows, formatBadgeCount, fullName, generateClipPath, generateTransform, getClassList, getProperty, getScrollParent, getTierFromPreviewPath, getTreeGridRow, getUniqueId, getValue, hasErrorComputed, hexToRgb, hslToRgb, initMagmoniumApp, initialNotificationState, initialState, initials, injectAuthenticate, injectDefaultDenial, injectInstallApp, injectParentSize, injectScrollSticky, isBootRedirect, isButtonName, isCancelledComputed, isExtensiblePlatformNavId, isJson, isLightAppColor, isLoadingComputed, isLocalhost, isNavInstanceConfig, isNavMenuConfig, isNavRowsConfig, isNavVisibilityConfig, isPlatformNavId, isPlatformPanelNavId, isReadableOn, isSize, isTierPreview, isUrlLocalhost, isValidNavId, isValidNavSegment, isWebComponent, linkToId, linkToNav, loadingActions, logoGlyphMaskUrl, mInterceptor, manualValidation, matchFieldValidation, matchMount, maxLengthValidation, maxValidation, mergePlatformNav, mergeUnique, mergeUniqueBy, mergeUniqueWith, minAgeValidation, minLengthValidation, minValidation, miniMarkInlineToHtml, miniMarkToHtml, mountFor, mountPatternProblem, mountPatternText, mountSegmentOf, mountTokenOf, navIdChain, navIdFor, navIdSegment, navIdToRoutePath, navIdToSegments, navParamOf, navTailMatcher, navToId, navVisibilityGuard, nextSectionTableSort, normalizeAppColor, normalizeAssetOptions, offsetOfLine, outletPathOf, outletSegmentsOf, paintAppColor, parentNavId, parseAddress, parseColor, parseMountPattern, parsePatternNames, patternValidation, patternsValidation, permissionRefusal, pickCount, pickSupportedLanguage, picksMembers, platformNavWidgets, pluginTag, presetDefaultOption, privateGuard, processImageToSvg, provideAppContext, provideMagAppConfig, provideMagWcConfig, provideMagWcRoutes, provideModalComponents, provideMurlUrlSerializer, provideNavWidgets, provideOverlayWidgets, providePlatformNavWidgets, providePluginRuntime, provideSearch, provideSizeContext, provideUserTabs, publicGuard, readFieldPatterns, readableAppColor, rebuildLogoGlyph, recordDefinedWcTier, registerSessionRenewal, remoteOutletRoute, renderAddress, renderDocument, requiredValidation, resolveConfigAsset, resolveIconSize, resolvePallet, resolvePatternRules, resolveSize, resolveSpacing, rgbToHex, rgbToHsl, rowHasChildren, samePatterns, sectionTableColumnId, sectionTableColumnWidths, sectionTableFrozenCount, segmentsToNavId, setProperty, setTreeGridChildren, setWcLocalPort, setWcTier, settingsWidgets, shouldShowBadge, sortSectionTableRows, splashHtml, splitNavId, splitOnMatch, splitPath, stringToColor, tailRouteOf, toAttrBool, toAttrNumber, toCssLength, toHostNavId, toLength, toLocalNavId, toggleGroup, toggleTreeGridRow, toggleUid, unfetchedPlatformNav, ungroupedDocActions, urlValidation, wcLocalBaseOf, wcTierOf, withLevel };
+export { ACCESS_DOMAINS, APP_CONTEXT_REF, APP_LINK, APP_LOGO_ICON, APP_LOGO_SOURCE, APP_THEME_COLOR, ASSET_BASE_URL, AUDIENCE_ICONS, AUDIENCE_LEVELS, AccordionBodyDirective, AccordionComponent, AccordionGroupComponent, ActionComponent, AnimatedGraphsComponent, AppAvailability, AppCardComponent, AppIdentityService, AppLogoComponent, AppLogoState, AppRelationType, AppTileComponent, AssetStore, AssetUrlPipe, Assets, AudiencePickerBoxComponent, AudiencePickerComponent, AuthActivityPageComponent, AuthApiService, AuthStore, AutosizeDirective, BadgeComponent, BandingComponent, BaseArrayInputComponent, BaseRootWebComponent, BaseWebComponent, BrowserLocaleService, ButtonComponent, ButtonGroupComponent, CALLING_APP_HEADER, COMPONENT_INPUT_REGISTRY, CardComponent, CardWrapperComponent, CarouselComponent, ChartComponent, ChatBubbleComponent, CheckboxGroupComponent, CheckboxInputComponent, ClearableInputComponent, ClipboardService, ColComponent, ColorPickerInputComponent, CommentItemComponent, CommentsApiService, CommentsComponent, CommentsStore, CompactNumberPipe, ComponentInputComponent, ComponentStepperComponent, ConfigComponent, ConfirmComponent, ContextMenuComponent, CustomIconClass, CustomIconEditComponent, DEFAULT_AUDIENCE, DEFAULT_DENIAL, DEFAULT_DOC_ALIGN, DEFAULT_DOC_DENSITY, DEFAULT_DOC_VARIANT, DEFAULT_FILTER_RANGE_MODE, DEFAULT_FILTER_VARIANT, DEFAULT_NAV_PARAM, DEFAULT_NAV_SEGMENT, DEFAULT_SIZE, DOCK_MIN_PAGE_REMAINDER, DOCS_FOLDER, DOC_ACTION_ICONS, DOC_ALIGNS, DOC_DENSITIES, DOC_EDIT_ACTIONS, DOC_TOOLBAR_GROUPS, DOC_VARIANTS, DashboardCardComponent, DateInputComponent, DatePickerComponent, DeviceService, DocComponent, DocEditorComponent, DomService, Domain, DotGridComponent, DragListDirective, DragListItemDirective, DraggableDirective, DropdownInputComponent, FILTER_GROUP_CONTEXT, FILTER_RANGE_MODES, FILTER_VARIANTS, FLEX_VARIANTS, FOLDER_PICK_LISTENER, FORM_ASSET_FOLDER, FileService, FileUploadDirective, FileUploadInputComponent, FlexComponent, FlexItemComponent, FormGroupComponent, FrameComponent, FreezeService, GRID_BREAKPOINTS, GetNavService, HOST_SESSION, HeaderComponent, HighlightDirective, HttpService, HttpSharingClient, ICON_SOURCE, IS_DESIGN_MODE, IS_SIDE_PANEL, IconComponent, ImgComponent, InputType, InstrumentScoreComponent, InterceptorObservables, JumbotronComponent, KeyValueComponent, LAYOUT_ASSET_FOLDER, LOADING_ACTIONS_REF, LOGIN_COMPONENT, LOGIN_STORE, LOGO_GLYPH_MAX_BYTES, LanguageComponent, ListComponent, LogoComponent, LogoGlyphInputComponent, MAG_SOCKET_EVENT, MHeroColorDirective, MHeroComponent, MODAL_REF, MODAL_STORE_REF, MOUNT_STATIC_SEGMENT, MOUNT_TOKEN, MRefDirective, MStepComponent, MURL_PARAM, MURL_SEP, ManifestEnrichmentService, MarginDirective, MenuComponent, ModalDirective, ModalRef, ModalStore, MoneyPipe, MultiRangeInputComponent, MultiselectInputComponent, MurlUrlSerializer, NAV_DEFAULT_MURL, NAV_ID_SEP, NAV_MAIN_BUTTONS, NAV_SEGMENT_RE, NAV_STORE_REF, NAV_WC_COMPONENTS, NAV_WIDGET_MAP, NavComponent, NavDetailsComponent, NavHeaderComponent, NavMenuComponent, NavStore, NavTrailComponent, NothingComponent, NotificationElementComponent, NotificationGroupComponent, NotificationPopupComponent, NotificationService, NotificationStore, NotificationType, NotificationWidgetComponent, ONE_ASSET_BASE_URL, OPTIONS_SOURCE, OVERLAY_WIDGETS, OneApp, OptionsSourceDirective, OverlayBodyComponent, OverlayRef, OverlayService, PLATFORM_BUTTON_NAV_IDS, PLATFORM_EXTENSIBLE_NAV_IDS, PLATFORM_NAV_MAP, PLATFORM_ROOT_CHILDREN, PLUGIN_FALLBACK_LANG, PLUGIN_OUTPUT_EVENT, PLUGIN_SCREENS, PaddingDirective, PaginationComponent, PanelComponent, PercentagePipe, PlaygroundComponent, PluginComponent, PluginInputComponent, PluginOutputComponent, PositionDirective, PwaInstallComponent, RECENT_SEARCH_LIMIT, REMOTE_BOOT_TIMEOUT_MS, REMOTE_PAGE_RELOAD, ROOT_NAV, RadioGroupComponent, RadioInputComponent, RangeInputComponent, RatingInputComponent, ReactiveElementComponent, RemoteComponent, RemoteLoaderService, ResizeElementComponent, RouteContainer, RowComponent, SEARCH_ANSWER_KEY, SEARCH_LABEL_KEY, SEARCH_QUERY, SEARCH_RESULTS_EVENT, SECTION_ACCORDION_GROUP, SECTION_FORM_CONTEXT, SECTION_TABLE_VARIANTS, SHARED_ICONS, SHARING_CLIENT, SIZE_CONTEXT, SPACING_INWARD, SPLASH_ID, ScoreComponent, ScrollComponent, ScrollService, SearchPanelComponent, SearchStore, SearchUserPanelComponent, SectionAccordionDirective, SectionAccordionGroupDirective, SectionBackComponent, SectionBadgesComponent, SectionButtonGroupComponent, SectionCardComponent, SectionCarouselComponent, SectionComponent, SectionFilterComponent, SectionFilterGroupComponent, SectionFilterMenuComponent, SectionFilterPanelComponent, SectionFilterRangePanelComponent, SectionFooterComponent, SectionFormComponent, SectionFormItemComponent, SectionHeaderComponent, SectionHeroComponent, SectionPaginationComponent, SectionSearchComponent, SectionStepperComponent, SectionTableCellComponent, SectionTableComponent, SectionTableRowComponent, SectionTableSortPipe, SectionTabsComponent, SectionToggleComponent, SectionToggleItemDirective, SelectableCardInputComponent, SelectorDirective, SettingsSearchBarComponent, SettingsSearchService, ShapeComponent, SharedStoreRegistry, SidePanelDirective, Size, SocketStore, SortComponent, StatComponent, StepComponent, StepperComponent, StepsComponent, StorageService, StrokeLinecap, StrokeLinejoin, SummaryComponent, SvgGeneratorComponent, SvgGeneratorService, SvgService, TOTAL_COLUMNS, TRANSLATION_SOURCE, TableComponent, TechnicalMeterComponent, TextInputComponent, TextOutputComponent, TextareaInputComponent, ThemeComponent, ThemeDataService, ThemeService, ThemeStore, TimeAgoPipe, TimelineComponent, ToggleButtonComponent, ToggleInputComponent, ToggleRadioInputComponent, ToolTipDirective, TooltipComponent, TranslatePipe, TranslateService, TreeGridComponent, URL_SEP, USER_STORE_REF, USER_TAB_MAP, UniverseComponent, UserApiService, UserAvatarComponent, UserComponent, UserNavComponent, UserSettingsComponent, UserStore, WC_BUNDLE, WC_NAVIGATE_EVENT, WC_ROUTE_CHANGED_EVENT, WC_SEARCH_GROUPS, WIN_USER_TAB_HOOK, WIN_USER_TAB_KEY, WatermarkComponent, WcRouterStore, WrapperInputComponent, activeElementWithin, allowedCodes, anchorNavId, appColorBrand, appLogoShadowColor, appThemeColorFactory, applyColorsToElement, applyDocEdit, assetOptions, baseUnderHost, bootstrapMagApp, bootstrapPwaInstall, browserLocale, buildWcBaseUrl, calculateLuminance, calculateRanks, cellText, checkDoc, checkFilterCondition, childNavId, claimDenial, classListSignal, coerceSize, cornerEdge, cornerSide, createLoadingState, createMap, createPlatformNavMap, createPluginElement, definePluginScreens, definedWcBundleOf, definedWcTierOf, deriveAvatarGradient, deriveContrastColor, deriveOppositeColor, derivePropertyName, docActionKey, docAssetCandidates, docProblemKey, docRemotePath, emailValidation, escapeHtml, evaluate, evaluateBool, exposeScreens, exposedScreensOf, fieldBoolean, fieldNumber, fieldString, filterHoldsList, filterHoldsOneBound, filterHoldsOptions, filterHoldsRange, filterList, filterNumber, filterNumberList, filterOne, filterPanelOf, filterPanelWidth, filterRange, filterTreeGridRows, filterValueList, filterValues, flattenTreeGridRows, formatBadgeCount, fullName, generateClipPath, generateTransform, getClassList, getProperty, getScrollParent, getTierFromPreviewPath, getTreeGridRow, getUniqueId, getValue, hasErrorComputed, hexToRgb, hslToRgb, initMagmoniumApp, initialNotificationState, initialState, initials, injectAuthenticate, injectDefaultDenial, injectInstallApp, injectParentSize, injectScrollSticky, isBootRedirect, isButtonName, isCancelledComputed, isExtensiblePlatformNavId, isJson, isLightAppColor, isLoadingComputed, isLocalhost, isNavCountConfig, isNavInstanceConfig, isNavMenuConfig, isNavRowsConfig, isNavVisibilityConfig, isPlatformNavId, isPlatformPanelNavId, isReadableOn, isSize, isTierPreview, isUrlLocalhost, isValidNavId, isValidNavSegment, isWebComponent, linkToId, linkToNav, loadingActions, logoGlyphMaskUrl, mInterceptor, manualValidation, matchFieldValidation, matchMount, maxLengthValidation, maxValidation, mergePlatformNav, mergeUnique, mergeUniqueBy, mergeUniqueWith, minAgeValidation, minLengthValidation, minValidation, miniMarkInlineToHtml, miniMarkToHtml, mountFor, mountPatternProblem, mountPatternText, mountSegmentOf, mountTokenOf, navIdChain, navIdFor, navIdSegment, navIdToRoutePath, navIdToSegments, navParamOf, navTailMatcher, navToId, navVisibilityGuard, nextSectionTableSort, normalizeAppColor, normalizeAssetOptions, offsetOfLine, outletPathOf, outletSegmentsOf, paintAppColor, parentNavId, parseAddress, parseColor, parseMountPattern, parsePatternNames, patternValidation, patternsValidation, permissionRefusal, pickCount, pickSupportedLanguage, picksMembers, platformNavWidgets, pluginTag, presetDefaultOption, privateGuard, processImageToSvg, provideAppContext, provideMagAppConfig, provideMagWcConfig, provideMagWcRoutes, provideModalComponents, provideMurlUrlSerializer, provideNavWidgets, provideOverlayWidgets, providePlatformNavWidgets, providePluginRuntime, provideSearch, provideSizeContext, provideUserTabs, publicGuard, readFieldPatterns, readableAppColor, rebuildLogoGlyph, recordDefinedWcTier, registerSessionRenewal, remoteOutletRoute, renderAddress, renderDocument, requiredValidation, resolveConfigAsset, resolveIconSize, resolvePallet, resolvePatternRules, resolveSize, resolveSpacing, rgbToHex, rgbToHsl, rowHasChildren, samePatterns, sectionTableColumnId, sectionTableColumnWidths, sectionTableFrozenCount, segmentsToNavId, setProperty, setTreeGridChildren, setWcLocalPort, setWcTier, settingsWidgets, shouldShowBadge, sortSectionTableRows, splashHtml, splitNavId, splitOnMatch, splitPath, stringToColor, tailRouteOf, toAttrBool, toAttrNumber, toCssLength, toHostNavId, toLength, toLocalNavId, toggleGroup, toggleTreeGridRow, toggleUid, unfetchedPlatformNav, ungroupedDocActions, urlValidation, wcLocalBaseOf, wcTierOf, withLevel };
 
 //# sourceMappingURL=magmonium-one.mjs.map