@flyos/design-system 1.1.0 → 1.3.0

package/fesm2022/flyos-design-system.mjs

@@ -44,9 +44,11 @@ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
  * See skills/business-app-angular-remote.md § "Design-system singleton across
  * the federation boundary".
  */
-// Keep in sync with projects/design-system/package.json "version". Used only for
-// the diagnostic message — the duplicate-instance detection is version-agnostic.
-const FLY_DS_VERSION = '1.0.0';
+// Kept in sync with projects/design-system/package.json "version" — rewritten by
+// tools/publish-library.ps1 at bump time, and asserted by the spec beside this file.
+// Used only for the diagnostic message; the duplicate-instance detection itself is
+// version-agnostic, so a stale literal misnames a fork rather than hiding one.
+const FLY_DS_VERSION = '1.3.0';
 const FLY_DS_REGISTRY_KEY = '__FLY_DS_INSTANCES__';
 /**
  * Records this design-system instance on the shared `scope` and returns the
@@ -1583,6 +1585,7 @@ const DS_BASELINE_LOCALES = {
         'ui.action.confirm': 'Confirm',
         'ui.action.dismiss': 'Dismiss',
         'ui.action.fewerOptions': 'Fewer options',
+        'ui.action.open': 'Open',
         'ui.action.retry': 'Retry',
         'ui.action.save': 'Save',
         'ui.action.search': 'Search',
@@ -1592,7 +1595,9 @@ const DS_BASELINE_LOCALES = {
         'ui.form.autoSaving': 'Auto-saving',
         'ui.nav.breadcrumbs': 'Breadcrumbs',
         'ui.nav.home': 'Home',
+        'ui.nav.modules': 'Modules',
         'ui.nav.selectModule': 'Select a module',
+        'ui.nav.sections': 'Sections',
         'ui.nav.switchModule': 'Switch module',
         'ui.pagination.first': 'First page',
         'ui.pagination.label': 'Pagination',
@@ -1928,6 +1933,7 @@ const DS_BASELINE_LOCALES = {
         'ui.action.confirm': 'تأكيد',
         'ui.action.dismiss': 'تجاهل',
         'ui.action.fewerOptions': 'خيارات أقل',
+        'ui.action.open': 'فتح',
         'ui.action.retry': 'إعادة المحاولة',
         'ui.action.save': 'حفظ',
         'ui.action.search': 'بحث',
@@ -1937,7 +1943,9 @@ const DS_BASELINE_LOCALES = {
         'ui.form.autoSaving': 'حفظ تلقائي',
         'ui.nav.breadcrumbs': 'مسار التنقل',
         'ui.nav.home': 'الرئيسية',
+        'ui.nav.modules': 'الوحدات',
         'ui.nav.selectModule': 'اختر وحدة',
+        'ui.nav.sections': 'الأقسام',
         'ui.nav.switchModule': 'تبديل الوحدة',
         'ui.pagination.first': 'الصفحة الأولى',
         'ui.pagination.label': 'تقسيم الصفحات',
@@ -2273,6 +2281,7 @@ const DS_BASELINE_LOCALES = {
         'ui.action.confirm': 'Confirmer',
         'ui.action.dismiss': 'Ignorer',
         'ui.action.fewerOptions': 'Moins d\'options',
+        'ui.action.open': 'Ouvrir',
         'ui.action.retry': 'Réessayer',
         'ui.action.save': 'Enregistrer',
         'ui.action.search': 'Rechercher',
@@ -2282,7 +2291,9 @@ const DS_BASELINE_LOCALES = {
         'ui.form.autoSaving': 'Enregistrement automatique',
         'ui.nav.breadcrumbs': 'Fil d\'Ariane',
         'ui.nav.home': 'Accueil',
+        'ui.nav.modules': 'Modules',
         'ui.nav.selectModule': 'Choisir un module',
+        'ui.nav.sections': 'Sections',
         'ui.nav.switchModule': 'Changer de module',
         'ui.pagination.first': 'Première page',
         'ui.pagination.label': 'Pagination',
@@ -2617,6 +2628,7 @@ const DS_BASELINE_LOCALES = {
         'ui.action.confirm': 'تصدیق کریں',
         'ui.action.dismiss': 'مسترد کریں',
         'ui.action.fewerOptions': 'کم اختیارات',
+        'ui.action.open': 'کھولیں',
         'ui.action.retry': 'دوبارہ کوشش کریں',
         'ui.action.save': 'محفوظ کریں',
         'ui.action.search': 'تلاش کریں',
@@ -2626,7 +2638,9 @@ const DS_BASELINE_LOCALES = {
         'ui.form.autoSaving': 'خودکار محفوظ ہو رہا ہے',
         'ui.nav.breadcrumbs': 'بریڈکرمب',
         'ui.nav.home': 'ہوم',
+        'ui.nav.modules': 'ماڈیولز',
         'ui.nav.selectModule': 'ماڈیول منتخب کریں',
+        'ui.nav.sections': 'حصے',
         'ui.nav.switchModule': 'ماڈیول تبدیل کریں',
         'ui.pagination.first': 'پہلا صفحہ',
         'ui.pagination.label': 'صفحہ بندی',
@@ -5357,6 +5371,22 @@ const MARGIN = 4;
  * host's `getBoundingClientRect()`, so it escapes every overflow-clip and app-window
  * bound. It flips placement + clamps to the viewport so it's always fully visible.
  *
+ * ## `data-tooltip` is the SAME primitive now (the global clipping fix)
+ * `[data-tooltip]` used to be a CSS-only `::before`/`::after` pair in
+ * `_app-surface-utilities.scss`. A pseudo-element is a child box of its host, so it is
+ * clipped by ANY scrolling / `overflow: hidden` ancestor — which is why the boards
+ * toolbar rail (a `overflow-y: auto` plate) rendered every tool tip cut off inside its
+ * own 47px-wide column. No z-index can fix that: clipping is not a stacking question.
+ * `position: fixed` on the pseudo would not fix it either, because the same plates carry
+ * `backdrop-filter`, and a filtered ancestor is a containing block for fixed descendants.
+ *
+ * The fix is to have ONE tooltip implementation, and it is this one: the selector now
+ * also matches `[data-tooltip]`, and when no `flyTooltip` text is bound the directive
+ * reads the host's `data-tooltip` attribute at show time. Reading it lazily (rather than
+ * binding it) is what lets components that write the attribute IMPERATIVELY — the DS icon
+ * button resolves an i18n key into it — participate by simply listing this directive in
+ * `hostDirectives`, with no input to keep in sync.
+ *
  * ## Behaviour
  * - Shows on `mouseenter` AND `focus` (keyboard users), after `flyTooltipDelay` ms.
  * - Hides immediately on `mouseleave` / `blur` / `Escape` / scroll / wheel / destroy.
@@ -5423,9 +5453,19 @@ class FlyTooltipDirective {
         // Belt-and-braces alongside DestroyRef (a plain `new` in a test won't run the effect).
         this.hide();
     }
-    /** Trimmed text, or `''` when there's nothing meaningful to show. */
+    /**
+     * Trimmed text, or `''` when there's nothing meaningful to show.
+     *
+     * Falls back to the host's `data-tooltip` attribute — read from the DOM rather than through an
+     * input, because the DS icon button writes it imperatively from a resolved i18n key (and re-writes
+     * it on every locale change). A signal input could not see that; an attribute read at show time
+     * always reports the current label.
+     */
     normalizedText() {
-        return (this.text() ?? '').trim();
+        const bound = (this.text() ?? '').trim();
+        if (bound)
+            return bound;
+        return (this.host.nativeElement.getAttribute('data-tooltip') ?? '').trim();
     }
     scheduleShow() {
         if (this.flyTooltipDisabled() || !this.normalizedText())
@@ -5593,12 +5633,12 @@ class FlyTooltipDirective {
         this.doc.head.appendChild(style);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: FlyTooltipDirective, isStandalone: true, selector: "[flyTooltip]", inputs: { text: { classPropertyName: "text", publicName: "flyTooltip", isSignal: true, isRequired: false, transformFunction: null }, flyTooltipPlacement: { classPropertyName: "flyTooltipPlacement", publicName: "flyTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, flyTooltipDisabled: { classPropertyName: "flyTooltipDisabled", publicName: "flyTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, flyTooltipDelay: { classPropertyName: "flyTooltipDelay", publicName: "flyTooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "scheduleShow()", "focus": "scheduleShow()", "mouseleave": "hide()", "blur": "hide()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: FlyTooltipDirective, isStandalone: true, selector: "[flyTooltip], [data-tooltip]", inputs: { text: { classPropertyName: "text", publicName: "flyTooltip", isSignal: true, isRequired: false, transformFunction: null }, flyTooltipPlacement: { classPropertyName: "flyTooltipPlacement", publicName: "flyTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, flyTooltipDisabled: { classPropertyName: "flyTooltipDisabled", publicName: "flyTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, flyTooltipDelay: { classPropertyName: "flyTooltipDelay", publicName: "flyTooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "scheduleShow()", "focus": "scheduleShow()", "mouseleave": "hide()", "blur": "hide()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyTooltipDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[flyTooltip]',
+                    selector: '[flyTooltip], [data-tooltip]',
                     standalone: true,
                     host: {
                         '(mouseenter)': 'scheduleShow()',
@@ -6913,7 +6953,7 @@ class FlyEmojiPickerComponent {
         this.selectionChange.emit(next);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyEmojiPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyEmojiPickerComponent, isStandalone: true, selector: "fly-emoji-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, defaultCategory: { classPropertyName: "defaultCategory", publicName: "defaultCategory", isSignal: true, isRequired: false, transformFunction: null }, skinTones: { classPropertyName: "skinTones", publicName: "skinTones", isSignal: true, isRequired: false, transformFunction: null }, skinTone: { classPropertyName: "skinTone", publicName: "skinTone", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, previewCount: { classPropertyName: "previewCount", publicName: "previewCount", isSignal: true, isRequired: false, transformFunction: null }, emojiAnimation: { classPropertyName: "emojiAnimation", publicName: "emojiAnimation", isSignal: true, isRequired: false, transformFunction: null }, dismissOnOutsidePress: { classPropertyName: "dismissOnOutsidePress", publicName: "dismissOnOutsidePress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stickerPicked: "stickerPicked", toggled: "toggled", selectionChange: "selectionChange", skinToneChange: "skinToneChange", dismissed: "dismissed" }, host: { properties: { "class.fly-emoji-picker--small": "size() === 'small'", "class.fly-emoji-picker--medium": "size() === 'medium'", "class.fly-emoji-picker--large": "size() === 'large'" } }, viewQueries: [{ propertyName: "searchRef", first: true, predicate: ["searchRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"fly-emoji-picker\"\r\n  [flyClickOutsideEnabled]=\"dismissOnOutsidePress()\"\r\n  (flyClickOutside)=\"dismissed.emit()\"\r\n  [attr.aria-label]=\"'common.label.emoji_picker' | translate\">\r\n  <!-- Stickers mode only: the emoji grid is unchanged, stickers are an ADDITIONAL surface. -->\r\n  @if (showTabs()) {\r\n    <div\r\n      class=\"fly-emoji-picker__tabs\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"'common.label.emoji_tabs' | translate\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-emoji-picker__tab\"\r\n        role=\"tab\"\r\n        id=\"fly-emoji-tab-emoji\"\r\n        aria-controls=\"fly-emoji-panel-emoji\"\r\n        [class.is-active]=\"activeTab() === 'emoji'\"\r\n        [attr.aria-selected]=\"activeTab() === 'emoji'\"\r\n        [attr.tabindex]=\"activeTab() === 'emoji' ? 0 : -1\"\r\n        (keydown)=\"onTabKeydown($event)\"\r\n        (click)=\"selectTab('emoji')\">\r\n        {{ 'common.label.emoji_tab_emoji' | translate }}\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-emoji-picker__tab\"\r\n        role=\"tab\"\r\n        id=\"fly-emoji-tab-stickers\"\r\n        aria-controls=\"fly-emoji-panel-stickers\"\r\n        [class.is-active]=\"activeTab() === 'stickers'\"\r\n        [attr.aria-selected]=\"activeTab() === 'stickers'\"\r\n        [attr.tabindex]=\"activeTab() === 'stickers' ? 0 : -1\"\r\n        (keydown)=\"onTabKeydown($event)\"\r\n        (click)=\"selectTab('stickers')\">\r\n        {{ 'common.label.emoji_tab_stickers' | translate }}\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (showTabs() && activeTab() === 'stickers') {\r\n    <div\r\n      class=\"fly-emoji-picker__stickers\"\r\n      id=\"fly-emoji-panel-stickers\"\r\n      role=\"tabpanel\"\r\n      aria-labelledby=\"fly-emoji-tab-stickers\">\r\n      @for (entry of stickers(); track entry.id) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-emoji-picker__sticker\"\r\n          [flyTooltip]=\"entry.label\"\r\n          [attr.aria-label]=\"entry.label\"\r\n          (pointerenter)=\"onCellHover(sticker)\"\r\n          (pointerleave)=\"cancelHover()\"\r\n          (click)=\"pickSticker(entry)\">\r\n          <fly-animated-emoji #sticker [id]=\"entry.id\" [size]=\"64\" />\r\n        </button>\r\n      } @empty {\r\n        <p class=\"fly-emoji-picker__empty\">{{ 'agent.lookup.no_results' | translate }}</p>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (!showTabs() || activeTab() === 'emoji') {\r\n  <!-- Search + tone sit together as one chrome bar: the tone swatches are hands, and on their own row\r\n       above the grid they read as pickable content rather than a setting. -->\r\n  <div class=\"fly-emoji-picker__bar\">\r\n    <input\r\n      class=\"fly-emoji-picker__search\"\r\n      type=\"text\"\r\n      #searchRef\r\n      [value]=\"query()\"\r\n      (input)=\"onQueryInput(searchRef.value)\"\r\n      [placeholder]=\"'common.label.search_emoji' | translate\"\r\n      [attr.aria-label]=\"'common.label.search_emoji' | translate\"\r\n      spellcheck=\"false\"\r\n      autocomplete=\"off\" />\r\n\r\n    @if (showToneStrip()) {\r\n      <!-- Escape-to-close listener only \u2014 every actual control inside (trigger + options) is its\r\n           own focusable button, so this wrapper itself doesn't need to be. -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        class=\"fly-emoji-picker__tones\"\r\n        [flyClickOutsideEnabled]=\"toneMenuOpen()\"\r\n        (flyClickOutside)=\"toneMenuOpen.set(false)\"\r\n        (keydown.escape)=\"toneMenuOpen.set(false)\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-emoji-picker__tone-trigger\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-expanded]=\"toneMenuOpen()\"\r\n          [attr.aria-label]=\"'common.label.skin_tone' | translate\"\r\n          [flyTooltip]=\"toneLabelKey(effectiveTone()) | translate\"\r\n          (click)=\"toneMenuOpen.set(!toneMenuOpen())\">\r\n          <span class=\"fly-emoji-picker__tone-glyph\">{{ toneSwatch(effectiveTone()) }}</span>\r\n          <i class=\"pi pi-chevron-down fly-emoji-picker__tone-caret\" aria-hidden=\"true\"></i>\r\n        </button>\r\n\r\n        @if (toneMenuOpen()) {\r\n          <div\r\n            class=\"fly-emoji-picker__tone-menu\"\r\n            role=\"listbox\"\r\n            [attr.aria-label]=\"'common.label.skin_tone' | translate\">\r\n            @for (tone of tones; track tone) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"fly-emoji-picker__tone-option\"\r\n                role=\"option\"\r\n                [class.is-active]=\"effectiveTone() === tone\"\r\n                [attr.aria-selected]=\"effectiveTone() === tone\"\r\n                [flyTooltip]=\"toneLabelKey(tone) | translate\"\r\n                (click)=\"onToneOptionClick(tone)\">\r\n                {{ toneSwatch(tone) }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- ONE scrolling list; each category is a separator label over its own grid. Tabs wrapped to three\r\n       rows in a sidebar drawer and cost a click to reach any group. -->\r\n  <div\r\n    class=\"fly-emoji-picker__list\"\r\n    role=\"listbox\"\r\n    [attr.id]=\"showTabs() ? 'fly-emoji-panel-emoji' : null\"\r\n    [attr.aria-labelledby]=\"showTabs() ? 'fly-emoji-tab-emoji' : null\"\r\n    [attr.aria-multiselectable]=\"selectionMode() === 'multi'\">\r\n    @for (section of sections(); track section.id) {\r\n      <div class=\"fly-emoji-picker__section\" role=\"group\" [attr.aria-label]=\"sectionLabel(section)\">\r\n        <h4 class=\"fly-emoji-picker__heading\">{{ sectionLabel(section) }}</h4>\r\n        <div class=\"fly-emoji-picker__grid\">\r\n          @for (cell of section.cells; track cell.entry.id) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fly-emoji-picker__cell\"\r\n              role=\"option\"\r\n              [class.is-active]=\"cell.selected\"\r\n              [attr.aria-selected]=\"cell.selected\"\r\n              [flyTooltip]=\"cell.entry.label\"\r\n              [attr.aria-label]=\"cell.entry.label\"\r\n              (click)=\"pick(cell.entry)\">\r\n              @if (section.animated) {\r\n                <!-- Hover lives on the animated element, not the button: a template reference\r\n                     declared inside a control-flow block isn't visible to the block's parent. -->\r\n                <fly-animated-emoji\r\n                  #anim\r\n                  class=\"fly-emoji-picker__glyph\"\r\n                  [id]=\"cell.entry.id\"\r\n                  [size]=\"20\"\r\n                  (pointerenter)=\"onCellHover(anim)\"\r\n                  (pointerleave)=\"cancelHover()\" />\r\n              } @else {\r\n                <span class=\"fly-emoji-picker__glyph\">{{ cell.glyph }}</span>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @empty {\r\n      <p class=\"fly-emoji-picker__empty\">{{ 'agent.lookup.no_results' | translate }}</p>\r\n    }\r\n\r\n    <!-- Lives INSIDE the scroller, as the last row, rather than pinned below it \u2014 a static\r\n         footer row permanently ate into the vertical space actual emoji rows could use;\r\n         scrolled into view instead, it only costs space once you reach the end. -->\r\n    @if (hasMore()) {\r\n      <button type=\"button\" class=\"fly-emoji-picker__more\" (click)=\"toggleExpanded()\">\r\n        {{ (isExpanded() ? 'common.label.emoji_show_less' : 'common.label.emoji_show_more') | translate }}\r\n      </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;block-size:100%;-webkit-backdrop-filter:blur(24px) saturate(130%);backdrop-filter:blur(24px) saturate(130%);--fly-emoji-cell: 36px;--fly-emoji-cell-gap: 6px;--fly-emoji-glyph: 17px;--fly-emoji-section-gap: 14px;--fly-emoji-bar-gap: 8px;--fly-emoji-search-font: 12px;--fly-emoji-search-padding: 8px 10px;--fly-emoji-heading-display: block}:host(.fly-emoji-picker--medium){--fly-emoji-cell: 30px;--fly-emoji-cell-gap: 5px;--fly-emoji-glyph: 16px;--fly-emoji-section-gap: 10px;--fly-emoji-bar-gap: 6px;--fly-emoji-search-font: 11.5px;--fly-emoji-search-padding: 6px 9px}:host(.fly-emoji-picker--small){--fly-emoji-cell: 24px;--fly-emoji-cell-gap: 3px;--fly-emoji-glyph: 15px;--fly-emoji-section-gap: 6px;--fly-emoji-bar-gap: 5px;--fly-emoji-search-font: 11px;--fly-emoji-search-padding: 4px 7px;--fly-emoji-heading-display: none;--fly-emoji-picker-list-max: 132px}.fly-emoji-picker{display:flex;flex-direction:column;gap:var(--fly-emoji-bar-gap);box-sizing:border-box;block-size:100%;color:var(--text-color, inherit)}.fly-emoji-picker__bar{display:flex;align-items:center;gap:10px}.fly-emoji-picker__search{flex:1 1 auto;min-inline-size:0;box-sizing:border-box;padding:var(--fly-emoji-search-padding);font:inherit;font-size:var(--fly-emoji-search-font);border:1px solid var(--surface-border, rgba(255, 255, 255, .12));border-radius:5px;background:transparent;color:var(--text-color, inherit);outline:none}.fly-emoji-picker__search:focus{border-color:var(--primary-color)}.fly-emoji-picker__list{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--fly-emoji-section-gap);min-block-size:0;max-block-size:var(--fly-emoji-picker-list-max, 320px);overflow-y:auto;padding-inline-end:4px}.fly-emoji-picker__section{display:flex;flex-direction:column;gap:6px}.fly-emoji-picker__heading{display:var(--fly-emoji-heading-display);position:sticky;inset-block-start:0;z-index:1;margin:0;padding-block:3px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-color-secondary, rgba(235, 235, 245, .55));background:var(--surface-overlay, var(--surface-card, #1c1c1e))}.fly-emoji-picker__tones{position:relative;flex:0 0 auto}.fly-emoji-picker__tone-trigger{display:flex;align-items:center;gap:2px;inline-size:auto;block-size:22px;padding:0 4px;font-size:14px;line-height:1;border:1px solid var(--surface-border, rgba(255, 255, 255, .12));border-radius:5px;background:transparent;color:var(--text-color-secondary, rgba(235, 235, 245, .55));cursor:pointer;transition:background .1s ease,border-color .1s ease}.fly-emoji-picker__tone-trigger:hover{background:var(--surface-hover, rgba(255, 255, 255, .08))}.fly-emoji-picker__tone-trigger:focus-visible{outline:2px solid var(--primary-color);outline-offset:-1px}.fly-emoji-picker__tone-glyph{line-height:1}.fly-emoji-picker__tone-caret{font-size:8px}.fly-emoji-picker__tone-menu{position:absolute;inset-block-start:calc(100% + 4px);inset-inline-end:0;z-index:21;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:4px;background:var(--surface-overlay-strong, var(--surface-overlay, var(--surface-card, #1c1c1e)));border:1px solid var(--surface-border, rgba(255, 255, 255, .12));border-radius:8px;box-shadow:0 8px 24px #00000047}.fly-emoji-picker__tone-option{display:grid;place-items:center;inline-size:26px;block-size:26px;padding:0;font-size:15px;line-height:1;border:1px solid transparent;border-radius:5px;background:transparent;cursor:pointer;transition:background .1s ease,border-color .1s ease}.fly-emoji-picker__tone-option:hover{background:var(--surface-hover, rgba(255, 255, 255, .08))}.fly-emoji-picker__tone-option:focus-visible{outline:2px solid var(--primary-color);outline-offset:-1px}.fly-emoji-picker__tone-option.is-active{border-color:var(--primary-color);background:var(--surface-hover, rgba(255, 255, 255, .1))}.fly-emoji-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--fly-emoji-cell),1fr));gap:var(--fly-emoji-cell-gap)}.fly-emoji-picker__cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-block-size:var(--fly-emoji-cell);padding:4px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-color, inherit);cursor:pointer;transition:background .1s ease,border-color .1s ease}.fly-emoji-picker__cell:hover{background:var(--surface-hover, rgba(255, 255, 255, .08));border-color:var(--surface-border, rgba(255, 255, 255, .12))}.fly-emoji-picker__cell:focus-visible{outline:2px solid var(--primary-color);outline-offset:-1px}.fly-emoji-picker__cell.is-active{border-color:var(--primary-color);background:var(--selection-bg, rgba(0, 113, 227, .24))}.fly-emoji-picker__glyph{direction:ltr;font-size:var(--fly-emoji-glyph);line-height:1}.fly-emoji-picker__more{align-self:flex-start;padding:3px 8px;font:inherit;font-size:11px;border:none;border-radius:999px;background:transparent;color:var(--primary-color);cursor:pointer}.fly-emoji-picker__more:hover{background:var(--surface-hover, rgba(255, 255, 255, .06))}.fly-emoji-picker__more:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.fly-emoji-picker__empty{margin:0;padding:12px 4px;text-align:center;font-size:12px;color:var(--text-color-secondary, rgba(235, 235, 245, .5))}.fly-emoji-picker__tabs{display:flex;gap:4px;border-block-end:1px solid var(--surface-border, rgba(255, 255, 255, .12))}.fly-emoji-picker__tab{appearance:none;padding:6px 12px;font:inherit;font-size:12px;border:none;border-block-end:2px solid transparent;background:transparent;color:var(--text-color-secondary, rgba(235, 235, 245, .6));cursor:pointer}.fly-emoji-picker__tab.is-active{color:var(--text-color, inherit);border-block-end-color:var(--primary-color)}.fly-emoji-picker__tab:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.fly-emoji-picker__stickers{flex:1 1 auto;min-block-size:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;padding:4px}.fly-emoji-picker__sticker{appearance:none;display:flex;align-items:center;justify-content:center;padding:4px;border:none;border-radius:10px;background:transparent;cursor:pointer}.fly-emoji-picker__sticker:hover,.fly-emoji-picker__sticker:focus-visible{background:var(--surface-hover, rgba(255, 255, 255, .08))}.fly-emoji-picker__sticker:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}\n"], dependencies: [{ kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled"], outputs: ["flyClickOutside"] }, { kind: "directive", type: FlyTooltipDirective, selector: "[flyTooltip]", inputs: ["flyTooltip", "flyTooltipPlacement", "flyTooltipDisabled", "flyTooltipDelay"] }, { kind: "component", type: FlyAnimatedEmojiComponent, selector: "fly-animated-emoji", inputs: ["id", "size", "autoplayOnFirstVisible", "playOnHover"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyEmojiPickerComponent, isStandalone: true, selector: "fly-emoji-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, defaultCategory: { classPropertyName: "defaultCategory", publicName: "defaultCategory", isSignal: true, isRequired: false, transformFunction: null }, skinTones: { classPropertyName: "skinTones", publicName: "skinTones", isSignal: true, isRequired: false, transformFunction: null }, skinTone: { classPropertyName: "skinTone", publicName: "skinTone", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, previewCount: { classPropertyName: "previewCount", publicName: "previewCount", isSignal: true, isRequired: false, transformFunction: null }, emojiAnimation: { classPropertyName: "emojiAnimation", publicName: "emojiAnimation", isSignal: true, isRequired: false, transformFunction: null }, dismissOnOutsidePress: { classPropertyName: "dismissOnOutsidePress", publicName: "dismissOnOutsidePress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stickerPicked: "stickerPicked", toggled: "toggled", selectionChange: "selectionChange", skinToneChange: "skinToneChange", dismissed: "dismissed" }, host: { properties: { "class.fly-emoji-picker--small": "size() === 'small'", "class.fly-emoji-picker--medium": "size() === 'medium'", "class.fly-emoji-picker--large": "size() === 'large'" } }, viewQueries: [{ propertyName: "searchRef", first: true, predicate: ["searchRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"fly-emoji-picker\"\r\n  [flyClickOutsideEnabled]=\"dismissOnOutsidePress()\"\r\n  (flyClickOutside)=\"dismissed.emit()\"\r\n  [attr.aria-label]=\"'common.label.emoji_picker' | translate\">\r\n  <!-- Stickers mode only: the emoji grid is unchanged, stickers are an ADDITIONAL surface. -->\r\n  @if (showTabs()) {\r\n    <div\r\n      class=\"fly-emoji-picker__tabs\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"'common.label.emoji_tabs' | translate\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-emoji-picker__tab\"\r\n        role=\"tab\"\r\n        id=\"fly-emoji-tab-emoji\"\r\n        aria-controls=\"fly-emoji-panel-emoji\"\r\n        [class.is-active]=\"activeTab() === 'emoji'\"\r\n        [attr.aria-selected]=\"activeTab() === 'emoji'\"\r\n        [attr.tabindex]=\"activeTab() === 'emoji' ? 0 : -1\"\r\n        (keydown)=\"onTabKeydown($event)\"\r\n        (click)=\"selectTab('emoji')\">\r\n        {{ 'common.label.emoji_tab_emoji' | translate }}\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-emoji-picker__tab\"\r\n        role=\"tab\"\r\n        id=\"fly-emoji-tab-stickers\"\r\n        aria-controls=\"fly-emoji-panel-stickers\"\r\n        [class.is-active]=\"activeTab() === 'stickers'\"\r\n        [attr.aria-selected]=\"activeTab() === 'stickers'\"\r\n        [attr.tabindex]=\"activeTab() === 'stickers' ? 0 : -1\"\r\n        (keydown)=\"onTabKeydown($event)\"\r\n        (click)=\"selectTab('stickers')\">\r\n        {{ 'common.label.emoji_tab_stickers' | translate }}\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (showTabs() && activeTab() === 'stickers') {\r\n    <div\r\n      class=\"fly-emoji-picker__stickers\"\r\n      id=\"fly-emoji-panel-stickers\"\r\n      role=\"tabpanel\"\r\n      aria-labelledby=\"fly-emoji-tab-stickers\">\r\n      @for (entry of stickers(); track entry.id) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-emoji-picker__sticker\"\r\n          [flyTooltip]=\"entry.label\"\r\n          [attr.aria-label]=\"entry.label\"\r\n          (pointerenter)=\"onCellHover(sticker)\"\r\n          (pointerleave)=\"cancelHover()\"\r\n          (click)=\"pickSticker(entry)\">\r\n          <fly-animated-emoji #sticker [id]=\"entry.id\" [size]=\"64\" />\r\n        </button>\r\n      } @empty {\r\n        <p class=\"fly-emoji-picker__empty\">{{ 'agent.lookup.no_results' | translate }}</p>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (!showTabs() || activeTab() === 'emoji') {\r\n  <!-- Search + tone sit together as one chrome bar: the tone swatches are hands, and on their own row\r\n       above the grid they read as pickable content rather than a setting. -->\r\n  <div class=\"fly-emoji-picker__bar\">\r\n    <input\r\n      class=\"fly-emoji-picker__search\"\r\n      type=\"text\"\r\n      #searchRef\r\n      [value]=\"query()\"\r\n      (input)=\"onQueryInput(searchRef.value)\"\r\n      [placeholder]=\"'common.label.search_emoji' | translate\"\r\n      [attr.aria-label]=\"'common.label.search_emoji' | translate\"\r\n      spellcheck=\"false\"\r\n      autocomplete=\"off\" />\r\n\r\n    @if (showToneStrip()) {\r\n      <!-- Escape-to-close listener only \u2014 every actual control inside (trigger + options) is its\r\n           own focusable button, so this wrapper itself doesn't need to be. -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        class=\"fly-emoji-picker__tones\"\r\n        [flyClickOutsideEnabled]=\"toneMenuOpen()\"\r\n        (flyClickOutside)=\"toneMenuOpen.set(false)\"\r\n        (keydown.escape)=\"toneMenuOpen.set(false)\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-emoji-picker__tone-trigger\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-expanded]=\"toneMenuOpen()\"\r\n          [attr.aria-label]=\"'common.label.skin_tone' | translate\"\r\n          [flyTooltip]=\"toneLabelKey(effectiveTone()) | translate\"\r\n          (click)=\"toneMenuOpen.set(!toneMenuOpen())\">\r\n          <span class=\"fly-emoji-picker__tone-glyph\">{{ toneSwatch(effectiveTone()) }}</span>\r\n          <i class=\"pi pi-chevron-down fly-emoji-picker__tone-caret\" aria-hidden=\"true\"></i>\r\n        </button>\r\n\r\n        @if (toneMenuOpen()) {\r\n          <div\r\n            class=\"fly-emoji-picker__tone-menu\"\r\n            role=\"listbox\"\r\n            [attr.aria-label]=\"'common.label.skin_tone' | translate\">\r\n            @for (tone of tones; track tone) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"fly-emoji-picker__tone-option\"\r\n                role=\"option\"\r\n                [class.is-active]=\"effectiveTone() === tone\"\r\n                [attr.aria-selected]=\"effectiveTone() === tone\"\r\n                [flyTooltip]=\"toneLabelKey(tone) | translate\"\r\n                (click)=\"onToneOptionClick(tone)\">\r\n                {{ toneSwatch(tone) }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- ONE scrolling list; each category is a separator label over its own grid. Tabs wrapped to three\r\n       rows in a sidebar drawer and cost a click to reach any group. -->\r\n  <div\r\n    class=\"fly-emoji-picker__list\"\r\n    role=\"listbox\"\r\n    [attr.id]=\"showTabs() ? 'fly-emoji-panel-emoji' : null\"\r\n    [attr.aria-labelledby]=\"showTabs() ? 'fly-emoji-tab-emoji' : null\"\r\n    [attr.aria-multiselectable]=\"selectionMode() === 'multi'\">\r\n    @for (section of sections(); track section.id) {\r\n      <div class=\"fly-emoji-picker__section\" role=\"group\" [attr.aria-label]=\"sectionLabel(section)\">\r\n        <h4 class=\"fly-emoji-picker__heading\">{{ sectionLabel(section) }}</h4>\r\n        <div class=\"fly-emoji-picker__grid\">\r\n          @for (cell of section.cells; track cell.entry.id) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fly-emoji-picker__cell\"\r\n              role=\"option\"\r\n              [class.is-active]=\"cell.selected\"\r\n              [attr.aria-selected]=\"cell.selected\"\r\n              [flyTooltip]=\"cell.entry.label\"\r\n              [attr.aria-label]=\"cell.entry.label\"\r\n              (click)=\"pick(cell.entry)\">\r\n              @if (section.animated) {\r\n                <!-- Hover lives on the animated element, not the button: a template reference\r\n                     declared inside a control-flow block isn't visible to the block's parent. -->\r\n                <fly-animated-emoji\r\n                  #anim\r\n                  class=\"fly-emoji-picker__glyph\"\r\n                  [id]=\"cell.entry.id\"\r\n                  [size]=\"20\"\r\n                  (pointerenter)=\"onCellHover(anim)\"\r\n                  (pointerleave)=\"cancelHover()\" />\r\n              } @else {\r\n                <span class=\"fly-emoji-picker__glyph\">{{ cell.glyph }}</span>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @empty {\r\n      <p class=\"fly-emoji-picker__empty\">{{ 'agent.lookup.no_results' | translate }}</p>\r\n    }\r\n\r\n    <!-- Lives INSIDE the scroller, as the last row, rather than pinned below it \u2014 a static\r\n         footer row permanently ate into the vertical space actual emoji rows could use;\r\n         scrolled into view instead, it only costs space once you reach the end. -->\r\n    @if (hasMore()) {\r\n      <button type=\"button\" class=\"fly-emoji-picker__more\" (click)=\"toggleExpanded()\">\r\n        {{ (isExpanded() ? 'common.label.emoji_show_less' : 'common.label.emoji_show_more') | translate }}\r\n      </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;block-size:100%;-webkit-backdrop-filter:blur(24px) saturate(130%);backdrop-filter:blur(24px) saturate(130%);--fly-emoji-cell: 36px;--fly-emoji-cell-gap: 6px;--fly-emoji-glyph: 17px;--fly-emoji-section-gap: 14px;--fly-emoji-bar-gap: 8px;--fly-emoji-search-font: 12px;--fly-emoji-search-padding: 8px 10px;--fly-emoji-heading-display: block}:host(.fly-emoji-picker--medium){--fly-emoji-cell: 30px;--fly-emoji-cell-gap: 5px;--fly-emoji-glyph: 16px;--fly-emoji-section-gap: 10px;--fly-emoji-bar-gap: 6px;--fly-emoji-search-font: 11.5px;--fly-emoji-search-padding: 6px 9px}:host(.fly-emoji-picker--small){--fly-emoji-cell: 24px;--fly-emoji-cell-gap: 3px;--fly-emoji-glyph: 15px;--fly-emoji-section-gap: 6px;--fly-emoji-bar-gap: 5px;--fly-emoji-search-font: 11px;--fly-emoji-search-padding: 4px 7px;--fly-emoji-heading-display: none;--fly-emoji-picker-list-max: 132px}.fly-emoji-picker{display:flex;flex-direction:column;gap:var(--fly-emoji-bar-gap);box-sizing:border-box;block-size:100%;color:var(--text-color, inherit)}.fly-emoji-picker__bar{display:flex;align-items:center;gap:10px}.fly-emoji-picker__search{flex:1 1 auto;min-inline-size:0;box-sizing:border-box;padding:var(--fly-emoji-search-padding);font:inherit;font-size:var(--fly-emoji-search-font);border:1px solid var(--surface-border, rgba(255, 255, 255, .12));border-radius:5px;background:transparent;color:var(--text-color, inherit);outline:none}.fly-emoji-picker__search:focus{border-color:var(--primary-color)}.fly-emoji-picker__list{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--fly-emoji-section-gap);min-block-size:0;max-block-size:var(--fly-emoji-picker-list-max, 320px);overflow-y:auto;padding-inline-end:4px}.fly-emoji-picker__section{display:flex;flex-direction:column;gap:6px}.fly-emoji-picker__heading{display:var(--fly-emoji-heading-display);position:sticky;inset-block-start:0;z-index:1;margin:0;padding-block:3px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-color-secondary, rgba(235, 235, 245, .55));background:var(--surface-overlay, var(--surface-card, #1c1c1e))}.fly-emoji-picker__tones{position:relative;flex:0 0 auto}.fly-emoji-picker__tone-trigger{display:flex;align-items:center;gap:2px;inline-size:auto;block-size:22px;padding:0 4px;font-size:14px;line-height:1;border:1px solid var(--surface-border, rgba(255, 255, 255, .12));border-radius:5px;background:transparent;color:var(--text-color-secondary, rgba(235, 235, 245, .55));cursor:pointer;transition:background .1s ease,border-color .1s ease}.fly-emoji-picker__tone-trigger:hover{background:var(--surface-hover, rgba(255, 255, 255, .08))}.fly-emoji-picker__tone-trigger:focus-visible{outline:2px solid var(--primary-color);outline-offset:-1px}.fly-emoji-picker__tone-glyph{line-height:1}.fly-emoji-picker__tone-caret{font-size:8px}.fly-emoji-picker__tone-menu{position:absolute;inset-block-start:calc(100% + 4px);inset-inline-end:0;z-index:21;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:4px;background:var(--surface-overlay-strong, var(--surface-overlay, var(--surface-card, #1c1c1e)));border:1px solid var(--surface-border, rgba(255, 255, 255, .12));border-radius:8px;box-shadow:0 8px 24px #00000047}.fly-emoji-picker__tone-option{display:grid;place-items:center;inline-size:26px;block-size:26px;padding:0;font-size:15px;line-height:1;border:1px solid transparent;border-radius:5px;background:transparent;cursor:pointer;transition:background .1s ease,border-color .1s ease}.fly-emoji-picker__tone-option:hover{background:var(--surface-hover, rgba(255, 255, 255, .08))}.fly-emoji-picker__tone-option:focus-visible{outline:2px solid var(--primary-color);outline-offset:-1px}.fly-emoji-picker__tone-option.is-active{border-color:var(--primary-color);background:var(--surface-hover, rgba(255, 255, 255, .1))}.fly-emoji-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--fly-emoji-cell),1fr));gap:var(--fly-emoji-cell-gap)}.fly-emoji-picker__cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-block-size:var(--fly-emoji-cell);padding:4px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-color, inherit);cursor:pointer;transition:background .1s ease,border-color .1s ease}.fly-emoji-picker__cell:hover{background:var(--surface-hover, rgba(255, 255, 255, .08));border-color:var(--surface-border, rgba(255, 255, 255, .12))}.fly-emoji-picker__cell:focus-visible{outline:2px solid var(--primary-color);outline-offset:-1px}.fly-emoji-picker__cell.is-active{border-color:var(--primary-color);background:var(--selection-bg, rgba(0, 113, 227, .24))}.fly-emoji-picker__glyph{direction:ltr;font-size:var(--fly-emoji-glyph);line-height:1}.fly-emoji-picker__more{align-self:flex-start;padding:3px 8px;font:inherit;font-size:11px;border:none;border-radius:999px;background:transparent;color:var(--primary-color);cursor:pointer}.fly-emoji-picker__more:hover{background:var(--surface-hover, rgba(255, 255, 255, .06))}.fly-emoji-picker__more:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.fly-emoji-picker__empty{margin:0;padding:12px 4px;text-align:center;font-size:12px;color:var(--text-color-secondary, rgba(235, 235, 245, .5))}.fly-emoji-picker__tabs{display:flex;gap:4px;border-block-end:1px solid var(--surface-border, rgba(255, 255, 255, .12))}.fly-emoji-picker__tab{appearance:none;padding:6px 12px;font:inherit;font-size:12px;border:none;border-block-end:2px solid transparent;background:transparent;color:var(--text-color-secondary, rgba(235, 235, 245, .6));cursor:pointer}.fly-emoji-picker__tab.is-active{color:var(--text-color, inherit);border-block-end-color:var(--primary-color)}.fly-emoji-picker__tab:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.fly-emoji-picker__stickers{flex:1 1 auto;min-block-size:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;padding:4px}.fly-emoji-picker__sticker{appearance:none;display:flex;align-items:center;justify-content:center;padding:4px;border:none;border-radius:10px;background:transparent;cursor:pointer}.fly-emoji-picker__sticker:hover,.fly-emoji-picker__sticker:focus-visible{background:var(--surface-hover, rgba(255, 255, 255, .08))}.fly-emoji-picker__sticker:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}\n"], dependencies: [{ kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled"], outputs: ["flyClickOutside"] }, { kind: "directive", type: FlyTooltipDirective, selector: "[flyTooltip], [data-tooltip]", inputs: ["flyTooltip", "flyTooltipPlacement", "flyTooltipDisabled", "flyTooltipDelay"] }, { kind: "component", type: FlyAnimatedEmojiComponent, selector: "fly-animated-emoji", inputs: ["id", "size", "autoplayOnFirstVisible", "playOnHover"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyEmojiPickerComponent, decorators: [{
             type: Component,
@@ -17316,8 +17356,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * Circular 34px icon-only button (ported from the legacy global
  * `.circles-iconbtn` disc — both render identically until the P6 sweep).
  *
- * `tooltipKey` resolves through {@link I18nService} and wires BOTH
- * `data-tooltip` (CSS tooltip) and `aria-label`, re-resolving on locale change.
+ * `tooltipKey` resolves through {@link I18nService} and wires BOTH `data-tooltip` and
+ * `aria-label`, re-resolving on locale change.
+ *
+ * The label is FLOATED by {@link FlyTooltipDirective} (a body-parented `position: fixed`
+ * node), listed here as a host directive. It used to be a CSS `::before` on
+ * `[data-tooltip]`, which any scrolling or `overflow: hidden` ancestor clipped — the
+ * boards toolbar rail cut every tip off inside its own column. The directive reads the
+ * attribute this component writes, so there is no input to keep in sync.
  */
 class FlyIconButtonComponent {
     i18n = inject(I18nService);
@@ -17350,11 +17396,11 @@ class FlyIconButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: FlyIconButtonComponent, isStandalone: true, selector: "button[fly-icon-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, tooltipKey: { classPropertyName: "tooltipKey", publicName: "tooltipKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "class.on": "active()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;padding:0;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;font-family:inherit;transition:background var(--t-state),border-color var(--t-state),color var(--t-state)}:host:hover{background:var(--bg-3);color:var(--ink);border-color:var(--line-2)}:host:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host:disabled{opacity:.5;cursor:not-allowed}:host ::ng-deep svg{width:16px;height:16px}:host .pi,:host ::ng-deep .pi{font-size:16px}:host(.on){background:var(--bg-3);border-color:var(--line-2);color:var(--ink)}:host([data-variant=primary]){background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}:host([data-variant=primary]):hover{background:var(--grad);border:0;color:var(--ink-inverse);filter:brightness(1.05);box-shadow:var(--shadow-accent)}:host([data-variant=danger]){color:var(--danger)}:host([data-variant=danger]):hover{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: FlyIconButtonComponent, isStandalone: true, selector: "button[fly-icon-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, tooltipKey: { classPropertyName: "tooltipKey", publicName: "tooltipKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "class.on": "active()" } }, hostDirectives: [{ directive: FlyTooltipDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;padding:0;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;font-family:inherit;transition:background var(--t-state),border-color var(--t-state),color var(--t-state)}:host:hover{background:var(--bg-3);color:var(--ink);border-color:var(--line-2)}:host:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host:disabled{opacity:.5;cursor:not-allowed}:host ::ng-deep svg{width:16px;height:16px}:host .pi,:host ::ng-deep .pi{font-size:16px}:host(.on){background:var(--bg-3);border-color:var(--line-2);color:var(--ink)}:host([data-variant=primary]){background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}:host([data-variant=primary]):hover{background:var(--grad);border:0;color:var(--ink-inverse);filter:brightness(1.05);box-shadow:var(--shadow-accent)}:host([data-variant=danger]){color:var(--danger)}:host([data-variant=danger]):hover{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[fly-icon-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'button[fly-icon-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [FlyTooltipDirective], host: {
                         '[attr.data-variant]': 'variant()',
                         '[class.on]': 'active()',
                     }, template: '<ng-content />', styles: [":host{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;padding:0;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;font-family:inherit;transition:background var(--t-state),border-color var(--t-state),color var(--t-state)}:host:hover{background:var(--bg-3);color:var(--ink);border-color:var(--line-2)}:host:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host:disabled{opacity:.5;cursor:not-allowed}:host ::ng-deep svg{width:16px;height:16px}:host .pi,:host ::ng-deep .pi{font-size:16px}:host(.on){background:var(--bg-3);border-color:var(--line-2);color:var(--ink)}:host([data-variant=primary]){background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}:host([data-variant=primary]):hover{background:var(--grad);border:0;color:var(--ink-inverse);filter:brightness(1.05);box-shadow:var(--shadow-accent)}:host([data-variant=danger]){color:var(--danger)}:host([data-variant=danger]):hover{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}\n"] }]
@@ -17513,11 +17559,11 @@ class StatusBadgeComponent {
         return `common.status.${this.status().toLowerCase()}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: StatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: StatusBadgeComponent, isStandalone: true, selector: "fly-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, domain: { classPropertyName: "domain", publicName: "domain", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (dot()) {\r\n  <!-- \"Status light\": a colour-coded dot with a soft concentric halo in the\r\n       status colour. The label is shown on hover (global [data-tooltip]) and\r\n       read by screen readers (aria-label) \u2014 compact, glanceable, and modern. -->\r\n  <span\r\n    class=\"status-dot\"\r\n    [ngClass]=\"'status-dot--' + statusClass()\"\r\n    [attr.data-tooltip]=\"labelKey() | translate\"\r\n    [attr.aria-label]=\"labelKey() | translate\"\r\n    role=\"img\"\r\n    tabindex=\"0\"\r\n  ></span>\r\n} @else {\r\n  <span class=\"status-badge\" [ngClass]=\"'status-badge--' + statusClass()\">\r\n    {{ labelKey() | translate }}\r\n  </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";.status-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:var(--fw-medium)}.status-dot{display:inline-block;inline-size:10px;block-size:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent);cursor:default;transition:transform var(--t-state),box-shadow var(--t-state)}.status-dot:hover,.status-dot:focus-visible{transform:scale(1.18);box-shadow:0 0 0 4px color-mix(in srgb,currentColor 26%,transparent);outline:none}.status-dot--draft{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--review{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--approved{color:var(--color-aegreen-800, var(--success))}.status-dot--published{color:var(--color-techblue-800, var(--st-approved))}.status-dot--archived{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--planned{color:var(--color-techblue-800, var(--st-approved))}.status-dot--inprogress{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--completed{color:var(--color-aegreen-800, var(--success))}.status-dot--onhold{color:var(--color-aeorange-800, var(--warning-fg))}.status-dot--cancelled{color:var(--color-aered-800, var(--danger))}.status-badge--draft{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-700, var(--st-draft))}.status-badge--review{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--approved{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--published{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--archived{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-500, var(--ink-3))}.status-badge--planned{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--inprogress{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--completed{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--onhold{background:var(--color-aeorange-200, var(--warning-bg));color:var(--color-aeorange-800, var(--warning-fg))}.status-badge--cancelled{background:var(--color-aered-100, var(--danger-bg));color:var(--color-aered-800, var(--danger))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: StatusBadgeComponent, isStandalone: true, selector: "fly-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, domain: { classPropertyName: "domain", publicName: "domain", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (dot()) {\r\n  <!-- \"Status light\": a colour-coded dot with a soft concentric halo in the\r\n       status colour. The label is shown on hover (`flyTooltip`) and read by screen readers\r\n       (aria-label) \u2014 compact, glanceable, and modern.\r\n       `[flyTooltip]` and NOT `[attr.data-tooltip]`: Angular does not selector-match a directive\r\n       against an `attr.`-prefixed binding, so the attribute form compiles to a bare attribute with\r\n       nothing listening \u2014 which, now that the CSS pseudo-element tooltip is gone, would show no\r\n       label at all. `data-tooltip` stays alongside it as the styling/test hook it always was. -->\r\n  <span\r\n    class=\"status-dot\"\r\n    [ngClass]=\"'status-dot--' + statusClass()\"\r\n    [flyTooltip]=\"labelKey() | translate\"\r\n    [attr.data-tooltip]=\"labelKey() | translate\"\r\n    [attr.aria-label]=\"labelKey() | translate\"\r\n    role=\"img\"\r\n    tabindex=\"0\"\r\n  ></span>\r\n} @else {\r\n  <span class=\"status-badge\" [ngClass]=\"'status-badge--' + statusClass()\">\r\n    {{ labelKey() | translate }}\r\n  </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";.status-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:var(--fw-medium)}.status-dot{display:inline-block;inline-size:10px;block-size:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent);cursor:default;transition:transform var(--t-state),box-shadow var(--t-state)}.status-dot:hover,.status-dot:focus-visible{transform:scale(1.18);box-shadow:0 0 0 4px color-mix(in srgb,currentColor 26%,transparent);outline:none}.status-dot--draft{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--review{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--approved{color:var(--color-aegreen-800, var(--success))}.status-dot--published{color:var(--color-techblue-800, var(--st-approved))}.status-dot--archived{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--planned{color:var(--color-techblue-800, var(--st-approved))}.status-dot--inprogress{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--completed{color:var(--color-aegreen-800, var(--success))}.status-dot--onhold{color:var(--color-aeorange-800, var(--warning-fg))}.status-dot--cancelled{color:var(--color-aered-800, var(--danger))}.status-badge--draft{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-700, var(--st-draft))}.status-badge--review{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--approved{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--published{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--archived{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-500, var(--ink-3))}.status-badge--planned{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--inprogress{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--completed{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--onhold{background:var(--color-aeorange-200, var(--warning-bg));color:var(--color-aeorange-800, var(--warning-fg))}.status-badge--cancelled{background:var(--color-aered-100, var(--danger-bg));color:var(--color-aered-800, var(--danger))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FlyTooltipDirective, selector: "[flyTooltip], [data-tooltip]", inputs: ["flyTooltip", "flyTooltipPlacement", "flyTooltipDisabled", "flyTooltipDelay"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: StatusBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-status-badge', standalone: true, imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (dot()) {\r\n  <!-- \"Status light\": a colour-coded dot with a soft concentric halo in the\r\n       status colour. The label is shown on hover (global [data-tooltip]) and\r\n       read by screen readers (aria-label) \u2014 compact, glanceable, and modern. -->\r\n  <span\r\n    class=\"status-dot\"\r\n    [ngClass]=\"'status-dot--' + statusClass()\"\r\n    [attr.data-tooltip]=\"labelKey() | translate\"\r\n    [attr.aria-label]=\"labelKey() | translate\"\r\n    role=\"img\"\r\n    tabindex=\"0\"\r\n  ></span>\r\n} @else {\r\n  <span class=\"status-badge\" [ngClass]=\"'status-badge--' + statusClass()\">\r\n    {{ labelKey() | translate }}\r\n  </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";.status-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:var(--fw-medium)}.status-dot{display:inline-block;inline-size:10px;block-size:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent);cursor:default;transition:transform var(--t-state),box-shadow var(--t-state)}.status-dot:hover,.status-dot:focus-visible{transform:scale(1.18);box-shadow:0 0 0 4px color-mix(in srgb,currentColor 26%,transparent);outline:none}.status-dot--draft{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--review{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--approved{color:var(--color-aegreen-800, var(--success))}.status-dot--published{color:var(--color-techblue-800, var(--st-approved))}.status-dot--archived{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--planned{color:var(--color-techblue-800, var(--st-approved))}.status-dot--inprogress{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--completed{color:var(--color-aegreen-800, var(--success))}.status-dot--onhold{color:var(--color-aeorange-800, var(--warning-fg))}.status-dot--cancelled{color:var(--color-aered-800, var(--danger))}.status-badge--draft{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-700, var(--st-draft))}.status-badge--review{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--approved{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--published{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--archived{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-500, var(--ink-3))}.status-badge--planned{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--inprogress{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--completed{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--onhold{background:var(--color-aeorange-200, var(--warning-bg));color:var(--color-aeorange-800, var(--warning-fg))}.status-badge--cancelled{background:var(--color-aered-100, var(--danger-bg));color:var(--color-aered-800, var(--danger))}\n"] }]
+            args: [{ selector: 'fly-status-badge', standalone: true, imports: [NgClass, TranslatePipe, FlyTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (dot()) {\r\n  <!-- \"Status light\": a colour-coded dot with a soft concentric halo in the\r\n       status colour. The label is shown on hover (`flyTooltip`) and read by screen readers\r\n       (aria-label) \u2014 compact, glanceable, and modern.\r\n       `[flyTooltip]` and NOT `[attr.data-tooltip]`: Angular does not selector-match a directive\r\n       against an `attr.`-prefixed binding, so the attribute form compiles to a bare attribute with\r\n       nothing listening \u2014 which, now that the CSS pseudo-element tooltip is gone, would show no\r\n       label at all. `data-tooltip` stays alongside it as the styling/test hook it always was. -->\r\n  <span\r\n    class=\"status-dot\"\r\n    [ngClass]=\"'status-dot--' + statusClass()\"\r\n    [flyTooltip]=\"labelKey() | translate\"\r\n    [attr.data-tooltip]=\"labelKey() | translate\"\r\n    [attr.aria-label]=\"labelKey() | translate\"\r\n    role=\"img\"\r\n    tabindex=\"0\"\r\n  ></span>\r\n} @else {\r\n  <span class=\"status-badge\" [ngClass]=\"'status-badge--' + statusClass()\">\r\n    {{ labelKey() | translate }}\r\n  </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";.status-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:var(--fw-medium)}.status-dot{display:inline-block;inline-size:10px;block-size:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent);cursor:default;transition:transform var(--t-state),box-shadow var(--t-state)}.status-dot:hover,.status-dot:focus-visible{transform:scale(1.18);box-shadow:0 0 0 4px color-mix(in srgb,currentColor 26%,transparent);outline:none}.status-dot--draft{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--review{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--approved{color:var(--color-aegreen-800, var(--success))}.status-dot--published{color:var(--color-techblue-800, var(--st-approved))}.status-dot--archived{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--planned{color:var(--color-techblue-800, var(--st-approved))}.status-dot--inprogress{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--completed{color:var(--color-aegreen-800, var(--success))}.status-dot--onhold{color:var(--color-aeorange-800, var(--warning-fg))}.status-dot--cancelled{color:var(--color-aered-800, var(--danger))}.status-badge--draft{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-700, var(--st-draft))}.status-badge--review{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--approved{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--published{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--archived{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-500, var(--ink-3))}.status-badge--planned{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--inprogress{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--completed{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--onhold{background:var(--color-aeorange-200, var(--warning-bg));color:var(--color-aeorange-800, var(--warning-fg))}.status-badge--cancelled{background:var(--color-aered-100, var(--danger-bg));color:var(--color-aered-800, var(--danger))}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], domain: [{ type: i0.Input, args: [{ isSignal: true, alias: "domain", required: false }] }] } });
 
 // Class name and selector kept as `DashboardKpiComponent` / `fly-dashboard-kpi`
@@ -18017,11 +18063,11 @@ class FlyFilterPanelComponent {
     /** Whether the `[filter-more]` advanced fields are revealed. */
     showMore = signal(false, ...(ngDevMode ? [{ debugName: "showMore" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyFilterPanelComponent, isStandalone: true, selector: "fly-filter-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, showSearchButton: { classPropertyName: "showSearchButton", publicName: "showSearchButton", isSignal: true, isRequired: false, transformFunction: null }, anchored: { classPropertyName: "anchored", publicName: "anchored", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cleared: "cleared", closed: "closed", searched: "searched" }, host: { properties: { "class.fp--anchored": "anchored()" } }, ngImport: i0, template: "    @if (open()) {\r\n      <div class=\"fp\" [attr.data-layout]=\"layout()\">\r\n        <div class=\"fp__head\">\r\n          <div class=\"fp__title\">{{ titleKey() | translate }}</div>\r\n          <div class=\"fp__actions\">\r\n            <button type=\"button\" class=\"fp__clear\" (click)=\"cleared.emit()\">\r\n              {{ 'ui.action.clearFilters' | translate }}\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fp__close\"\r\n              (click)=\"closed.emit()\"\r\n              [attr.aria-label]=\"'ui.action.close' | translate\"\r\n            >\u00D7</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"fp__body\">\r\n          <ng-content select=\"[filter-status]\" />\r\n\r\n          <div class=\"fp__grid\">\r\n            <ng-content />\r\n          </div>\r\n\r\n          @if (hasMore()) {\r\n            <div class=\"fp__more\" [hidden]=\"!showMore()\">\r\n              <div class=\"fp__grid\">\r\n                <ng-content select=\"[filter-more]\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"fp__morebar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"fp__morebtn\"\r\n                (click)=\"showMore.set(!showMore())\"\r\n                [attr.aria-expanded]=\"showMore()\"\r\n              >\r\n                <svg class=\"fp__moreico\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n                  <path [attr.d]=\"showMore() ? 'M3.5 8h9' : 'M8 3.5v9M3.5 8h9'\" />\r\n                </svg>\r\n                {{ (showMore() ? 'ui.action.fewerOptions' : 'ui.action.addMoreOptions') | translate }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (showSearchButton()) {\r\n          <div class=\"fp__footer\">\r\n            <button type=\"button\" fly-button variant=\"primary\" (click)=\"searched.emit()\">\r\n              {{ 'ui.action.search' | translate }}\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  \r\n", styles: [":host{display:block}.fp{margin-block-end:var(--sp-4);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);overflow:hidden;animation:fly-fp-in var(--t-overlay)}:host(.fp--anchored){position:absolute;inset-block-start:calc(100% + var(--sp-2));inset-inline-end:0;z-index:var(--z-overlay);width:min(600px,100vw - 2 * var(--sp-4))}:host(.fp--anchored) .fp{margin-block-end:0;box-shadow:var(--shadow-filter)}:host(.fp--anchored) .fp__body{max-height:min(320px,44vh);overflow-y:auto}.fp__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--line-3);background:var(--bg-3)}.fp__title{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.fp__actions{display:flex;align-items:center;gap:var(--sp-1)}.fp__clear{border:0;background:transparent;font-size:12px;color:var(--ink-3);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);cursor:pointer;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.fp__clear:hover{color:var(--ink);background:var(--bg-hover)}.fp__clear:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__close{width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:var(--text-xl);line-height:1;display:grid;place-items:center}.fp__close:hover{color:var(--ink);background:var(--bg-hover)}.fp__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp ::ng-deep [filter-status]{display:flex;flex-direction:column;gap:var(--sp-2);padding:14px var(--sp-4);border-block-end:1px solid var(--line-3)}.fp__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px var(--sp-4);padding:var(--sp-4)}@media(width<=1180px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(width<=820px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.fp[data-layout=rows] .fp__grid{grid-template-columns:1fr;gap:var(--sp-2)}.fp[data-layout=rows] ::ng-deep .fld{display:grid;grid-template-columns:minmax(110px,168px) 1fr;align-items:center;gap:var(--sp-1) var(--sp-4)}.fp[data-layout=rows] ::ng-deep .fld__l{margin:0;color:var(--ink-2)}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:2}@media(width<=640px){.fp[data-layout=rows] ::ng-deep .fld{grid-template-columns:1fr}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:1}}.fp__more{border-block-start:1px solid var(--line-3)}.fp__more .fp__grid{padding-block-start:var(--sp-3)}.fp__morebar{padding:0 var(--sp-4) var(--sp-3)}.fp__morebtn{display:inline-flex;align-items:center;gap:var(--sp-1);border:0;background:transparent;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);font-family:inherit;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--accent);cursor:pointer;transition:background var(--t-state)}.fp__morebtn:hover{background:var(--bg-hover)}.fp__morebtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__moreico{width:14px;height:14px;flex-shrink:0}.fp__footer{display:flex;justify-content:flex-end;padding:var(--sp-3) var(--sp-4);border-block-start:1px solid var(--line-3);background:var(--bg-3)}.fp__footer button{background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}.fp__footer button:hover{background:var(--grad);border:0;filter:brightness(1.05);box-shadow:var(--shadow-accent)}@keyframes fly-fp-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}\n"], dependencies: [{ kind: "component", type: FlyButtonComponent, selector: "button[fly-button], a[fly-button]", inputs: ["variant", "size", "loading"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyFilterPanelComponent, isStandalone: true, selector: "fly-filter-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, showSearchButton: { classPropertyName: "showSearchButton", publicName: "showSearchButton", isSignal: true, isRequired: false, transformFunction: null }, anchored: { classPropertyName: "anchored", publicName: "anchored", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cleared: "cleared", closed: "closed", searched: "searched" }, host: { properties: { "class.fp--anchored": "anchored()" } }, ngImport: i0, template: "    @if (open()) {\r\n      <div class=\"fp\" [attr.data-layout]=\"layout()\">\r\n        <div class=\"fp__head\">\r\n          <div class=\"fp__title\">{{ titleKey() | translate }}</div>\r\n          <div class=\"fp__actions\">\r\n            <button type=\"button\" class=\"fp__clear\" (click)=\"cleared.emit()\">\r\n              {{ 'ui.action.clearFilters' | translate }}\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fp__close\"\r\n              (click)=\"closed.emit()\"\r\n              [attr.aria-label]=\"'ui.action.close' | translate\"\r\n            >\u00D7</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"fp__body\">\r\n          <ng-content select=\"[filter-status]\" />\r\n\r\n          <div class=\"fp__grid\">\r\n            <ng-content />\r\n          </div>\r\n\r\n          @if (hasMore()) {\r\n            <div class=\"fp__more\" [hidden]=\"!showMore()\">\r\n              <div class=\"fp__grid\">\r\n                <ng-content select=\"[filter-more]\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"fp__morebar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"fp__morebtn\"\r\n                (click)=\"showMore.set(!showMore())\"\r\n                [attr.aria-expanded]=\"showMore()\"\r\n              >\r\n                <svg class=\"fp__moreico\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n                  <path [attr.d]=\"showMore() ? 'M3.5 8h9' : 'M8 3.5v9M3.5 8h9'\" />\r\n                </svg>\r\n                {{ (showMore() ? 'ui.action.fewerOptions' : 'ui.action.addMoreOptions') | translate }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (showSearchButton()) {\r\n          <div class=\"fp__footer\">\r\n            <button type=\"button\" fly-button variant=\"primary\" (click)=\"searched.emit()\">\r\n              {{ 'ui.action.search' | translate }}\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  \r\n", styles: ["@charset \"UTF-8\";:host{display:block;container-type:inline-size}.fp{margin-block-end:var(--sp-4);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);overflow:hidden;animation:fly-fp-in var(--t-overlay)}:host(.fp--anchored){position:absolute;inset-block-start:calc(100% + var(--sp-2));inset-inline-end:0;z-index:var(--z-overlay);width:min(600px,100vw - 2 * var(--sp-4))}:host(.fp--anchored) .fp{margin-block-end:0;box-shadow:var(--shadow-filter)}:host(.fp--anchored) .fp__body{max-height:min(320px,44vh);overflow-y:auto}.fp__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--line-3);background:var(--bg-3)}.fp__title{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.fp__actions{display:flex;align-items:center;gap:var(--sp-1)}.fp__clear{border:0;background:transparent;font-size:12px;color:var(--ink-3);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);cursor:pointer;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.fp__clear:hover{color:var(--ink);background:var(--bg-hover)}.fp__clear:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__close{width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:var(--text-xl);line-height:1;display:grid;place-items:center}.fp__close:hover{color:var(--ink);background:var(--bg-hover)}.fp__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp ::ng-deep [filter-status]{display:flex;flex-direction:column;gap:var(--sp-2);padding:14px var(--sp-4);border-block-end:1px solid var(--line-3)}.fp__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px var(--sp-4);padding:var(--sp-4)}@container (width <= 1180px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(width<=1180px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@container (width <= 820px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width<=820px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.fp[data-layout=rows] .fp__grid{grid-template-columns:1fr;gap:var(--sp-2)}.fp[data-layout=rows] ::ng-deep .fld{display:grid;grid-template-columns:minmax(110px,168px) 1fr;align-items:center;gap:var(--sp-1) var(--sp-4)}.fp[data-layout=rows] ::ng-deep .fld__l{margin:0;color:var(--ink-2)}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:2}@container (width <= 640px){.fp[data-layout=rows] ::ng-deep .fld{grid-template-columns:1fr}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:1}}@media(width<=640px){.fp[data-layout=rows] ::ng-deep .fld{grid-template-columns:1fr}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:1}}.fp__more{border-block-start:1px solid var(--line-3)}.fp__more .fp__grid{padding-block-start:var(--sp-3)}.fp__morebar{padding:0 var(--sp-4) var(--sp-3)}.fp__morebtn{display:inline-flex;align-items:center;gap:var(--sp-1);border:0;background:transparent;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);font-family:inherit;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--accent);cursor:pointer;transition:background var(--t-state)}.fp__morebtn:hover{background:var(--bg-hover)}.fp__morebtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__moreico{width:14px;height:14px;flex-shrink:0}.fp__footer{display:flex;justify-content:flex-end;padding:var(--sp-3) var(--sp-4);border-block-start:1px solid var(--line-3);background:var(--bg-3)}.fp__footer button{background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}.fp__footer button:hover{background:var(--grad);border:0;filter:brightness(1.05);box-shadow:var(--shadow-accent)}@keyframes fly-fp-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}\n"], dependencies: [{ kind: "component", type: FlyButtonComponent, selector: "button[fly-button], a[fly-button]", inputs: ["variant", "size", "loading"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyFilterPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-filter-panel', standalone: true, imports: [TranslatePipe, FlyButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.fp--anchored]': 'anchored()' }, template: "    @if (open()) {\r\n      <div class=\"fp\" [attr.data-layout]=\"layout()\">\r\n        <div class=\"fp__head\">\r\n          <div class=\"fp__title\">{{ titleKey() | translate }}</div>\r\n          <div class=\"fp__actions\">\r\n            <button type=\"button\" class=\"fp__clear\" (click)=\"cleared.emit()\">\r\n              {{ 'ui.action.clearFilters' | translate }}\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fp__close\"\r\n              (click)=\"closed.emit()\"\r\n              [attr.aria-label]=\"'ui.action.close' | translate\"\r\n            >\u00D7</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"fp__body\">\r\n          <ng-content select=\"[filter-status]\" />\r\n\r\n          <div class=\"fp__grid\">\r\n            <ng-content />\r\n          </div>\r\n\r\n          @if (hasMore()) {\r\n            <div class=\"fp__more\" [hidden]=\"!showMore()\">\r\n              <div class=\"fp__grid\">\r\n                <ng-content select=\"[filter-more]\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"fp__morebar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"fp__morebtn\"\r\n                (click)=\"showMore.set(!showMore())\"\r\n                [attr.aria-expanded]=\"showMore()\"\r\n              >\r\n                <svg class=\"fp__moreico\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n                  <path [attr.d]=\"showMore() ? 'M3.5 8h9' : 'M8 3.5v9M3.5 8h9'\" />\r\n                </svg>\r\n                {{ (showMore() ? 'ui.action.fewerOptions' : 'ui.action.addMoreOptions') | translate }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (showSearchButton()) {\r\n          <div class=\"fp__footer\">\r\n            <button type=\"button\" fly-button variant=\"primary\" (click)=\"searched.emit()\">\r\n              {{ 'ui.action.search' | translate }}\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  \r\n", styles: [":host{display:block}.fp{margin-block-end:var(--sp-4);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);overflow:hidden;animation:fly-fp-in var(--t-overlay)}:host(.fp--anchored){position:absolute;inset-block-start:calc(100% + var(--sp-2));inset-inline-end:0;z-index:var(--z-overlay);width:min(600px,100vw - 2 * var(--sp-4))}:host(.fp--anchored) .fp{margin-block-end:0;box-shadow:var(--shadow-filter)}:host(.fp--anchored) .fp__body{max-height:min(320px,44vh);overflow-y:auto}.fp__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--line-3);background:var(--bg-3)}.fp__title{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.fp__actions{display:flex;align-items:center;gap:var(--sp-1)}.fp__clear{border:0;background:transparent;font-size:12px;color:var(--ink-3);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);cursor:pointer;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.fp__clear:hover{color:var(--ink);background:var(--bg-hover)}.fp__clear:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__close{width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:var(--text-xl);line-height:1;display:grid;place-items:center}.fp__close:hover{color:var(--ink);background:var(--bg-hover)}.fp__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp ::ng-deep [filter-status]{display:flex;flex-direction:column;gap:var(--sp-2);padding:14px var(--sp-4);border-block-end:1px solid var(--line-3)}.fp__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px var(--sp-4);padding:var(--sp-4)}@media(width<=1180px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(width<=820px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.fp[data-layout=rows] .fp__grid{grid-template-columns:1fr;gap:var(--sp-2)}.fp[data-layout=rows] ::ng-deep .fld{display:grid;grid-template-columns:minmax(110px,168px) 1fr;align-items:center;gap:var(--sp-1) var(--sp-4)}.fp[data-layout=rows] ::ng-deep .fld__l{margin:0;color:var(--ink-2)}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:2}@media(width<=640px){.fp[data-layout=rows] ::ng-deep .fld{grid-template-columns:1fr}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:1}}.fp__more{border-block-start:1px solid var(--line-3)}.fp__more .fp__grid{padding-block-start:var(--sp-3)}.fp__morebar{padding:0 var(--sp-4) var(--sp-3)}.fp__morebtn{display:inline-flex;align-items:center;gap:var(--sp-1);border:0;background:transparent;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);font-family:inherit;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--accent);cursor:pointer;transition:background var(--t-state)}.fp__morebtn:hover{background:var(--bg-hover)}.fp__morebtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__moreico{width:14px;height:14px;flex-shrink:0}.fp__footer{display:flex;justify-content:flex-end;padding:var(--sp-3) var(--sp-4);border-block-start:1px solid var(--line-3);background:var(--bg-3)}.fp__footer button{background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}.fp__footer button:hover{background:var(--grad);border:0;filter:brightness(1.05);box-shadow:var(--shadow-accent)}@keyframes fly-fp-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}\n"] }]
+            args: [{ selector: 'fly-filter-panel', standalone: true, imports: [TranslatePipe, FlyButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.fp--anchored]': 'anchored()' }, template: "    @if (open()) {\r\n      <div class=\"fp\" [attr.data-layout]=\"layout()\">\r\n        <div class=\"fp__head\">\r\n          <div class=\"fp__title\">{{ titleKey() | translate }}</div>\r\n          <div class=\"fp__actions\">\r\n            <button type=\"button\" class=\"fp__clear\" (click)=\"cleared.emit()\">\r\n              {{ 'ui.action.clearFilters' | translate }}\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fp__close\"\r\n              (click)=\"closed.emit()\"\r\n              [attr.aria-label]=\"'ui.action.close' | translate\"\r\n            >\u00D7</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"fp__body\">\r\n          <ng-content select=\"[filter-status]\" />\r\n\r\n          <div class=\"fp__grid\">\r\n            <ng-content />\r\n          </div>\r\n\r\n          @if (hasMore()) {\r\n            <div class=\"fp__more\" [hidden]=\"!showMore()\">\r\n              <div class=\"fp__grid\">\r\n                <ng-content select=\"[filter-more]\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"fp__morebar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"fp__morebtn\"\r\n                (click)=\"showMore.set(!showMore())\"\r\n                [attr.aria-expanded]=\"showMore()\"\r\n              >\r\n                <svg class=\"fp__moreico\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n                  <path [attr.d]=\"showMore() ? 'M3.5 8h9' : 'M8 3.5v9M3.5 8h9'\" />\r\n                </svg>\r\n                {{ (showMore() ? 'ui.action.fewerOptions' : 'ui.action.addMoreOptions') | translate }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (showSearchButton()) {\r\n          <div class=\"fp__footer\">\r\n            <button type=\"button\" fly-button variant=\"primary\" (click)=\"searched.emit()\">\r\n              {{ 'ui.action.search' | translate }}\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  \r\n", styles: ["@charset \"UTF-8\";:host{display:block;container-type:inline-size}.fp{margin-block-end:var(--sp-4);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);overflow:hidden;animation:fly-fp-in var(--t-overlay)}:host(.fp--anchored){position:absolute;inset-block-start:calc(100% + var(--sp-2));inset-inline-end:0;z-index:var(--z-overlay);width:min(600px,100vw - 2 * var(--sp-4))}:host(.fp--anchored) .fp{margin-block-end:0;box-shadow:var(--shadow-filter)}:host(.fp--anchored) .fp__body{max-height:min(320px,44vh);overflow-y:auto}.fp__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--line-3);background:var(--bg-3)}.fp__title{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.fp__actions{display:flex;align-items:center;gap:var(--sp-1)}.fp__clear{border:0;background:transparent;font-size:12px;color:var(--ink-3);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);cursor:pointer;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.fp__clear:hover{color:var(--ink);background:var(--bg-hover)}.fp__clear:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__close{width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:var(--text-xl);line-height:1;display:grid;place-items:center}.fp__close:hover{color:var(--ink);background:var(--bg-hover)}.fp__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp ::ng-deep [filter-status]{display:flex;flex-direction:column;gap:var(--sp-2);padding:14px var(--sp-4);border-block-end:1px solid var(--line-3)}.fp__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px var(--sp-4);padding:var(--sp-4)}@container (width <= 1180px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(width<=1180px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@container (width <= 820px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width<=820px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.fp[data-layout=rows] .fp__grid{grid-template-columns:1fr;gap:var(--sp-2)}.fp[data-layout=rows] ::ng-deep .fld{display:grid;grid-template-columns:minmax(110px,168px) 1fr;align-items:center;gap:var(--sp-1) var(--sp-4)}.fp[data-layout=rows] ::ng-deep .fld__l{margin:0;color:var(--ink-2)}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:2}@container (width <= 640px){.fp[data-layout=rows] ::ng-deep .fld{grid-template-columns:1fr}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:1}}@media(width<=640px){.fp[data-layout=rows] ::ng-deep .fld{grid-template-columns:1fr}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:1}}.fp__more{border-block-start:1px solid var(--line-3)}.fp__more .fp__grid{padding-block-start:var(--sp-3)}.fp__morebar{padding:0 var(--sp-4) var(--sp-3)}.fp__morebtn{display:inline-flex;align-items:center;gap:var(--sp-1);border:0;background:transparent;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);font-family:inherit;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--accent);cursor:pointer;transition:background var(--t-state)}.fp__morebtn:hover{background:var(--bg-hover)}.fp__morebtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__moreico{width:14px;height:14px;flex-shrink:0}.fp__footer{display:flex;justify-content:flex-end;padding:var(--sp-3) var(--sp-4);border-block-start:1px solid var(--line-3);background:var(--bg-3)}.fp__footer button{background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}.fp__footer button:hover{background:var(--grad);border:0;filter:brightness(1.05);box-shadow:var(--shadow-accent)}@keyframes fly-fp-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}\n"] }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: true }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], showSearchButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearchButton", required: false }] }], anchored: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchored", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
 
 /**
@@ -18161,11 +18207,11 @@ class FlyDataTableComponent {
         this.sortChange.emit(nextSort(this.sort(), col.id));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDataTableComponent, isStandalone: true, selector: "fly-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyKey: { classPropertyName: "emptyKey", publicName: "emptyKey", isSignal: true, isRequired: false, transformFunction: null }, emptyIconClass: { classPropertyName: "emptyIconClass", publicName: "emptyIconClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", rowActivated: "rowActivated" }, queries: [{ propertyName: "cellTemplates", predicate: FlyCellDirective, isSignal: true }], ngImport: i0, template: "<table class=\"dt\" [attr.aria-label]=\"ariaLabelKey() ? (ariaLabelKey()! | translate) : null\">\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns(); track col.id) {\r\n        <th\r\n          scope=\"col\"\r\n          [class.dt__th--end]=\"col.align === 'end'\"\r\n          [attr.aria-sort]=\"headerAriaSort(col)\"\r\n        >\r\n          @if (col.sortable) {\r\n            <button type=\"button\" class=\"dt__sort\" (click)=\"onHeaderClick(col)\">\r\n              <span>{{ col.headerKey | translate }}</span>\r\n              <span class=\"dt__sort-icon\" [attr.data-dir]=\"sortDirFor(col)\" aria-hidden=\"true\"></span>\r\n            </button>\r\n          } @else {\r\n            {{ col.headerKey | translate }}\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      @for (i of skeletonRows; track i) {\r\n        <tr class=\"dt__row dt__row--skel\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <!-- shape=\"lines\" is the DS skeleton's no-chrome text shimmer\r\n                 (the kit's former shape=\"text\"); one line per collapsed row.\r\n                 No backticks in here: this is an INLINE template literal. -->\r\n            <fly-skeleton shape=\"lines\" [lines]=\"1\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n    } @else {\r\n      @for (row of rows(); track $index) {\r\n        <tr\r\n          class=\"dt__row\"\r\n          tabindex=\"0\"\r\n          (click)=\"onRowActivate($event, row)\"\r\n          (keydown.enter)=\"onRowActivate($event, row)\"\r\n        >\r\n          @for (col of columns(); track col.id) {\r\n            <td\r\n              [class.dt__td--end]=\"col.align === 'end'\"\r\n              [class.mono]=\"col.kind === 'mono'\"\r\n              [class.dt__td--date]=\"col.kind === 'date'\"\r\n              [class.dt__td--num]=\"col.kind === 'number'\"\r\n              [attr.data-label]=\"col.headerKey | translate\"\r\n            >\r\n              @if (templateFor(col.id); as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: row }\" />\r\n              } @else {\r\n                @switch (col.kind ?? 'text') {\r\n                  @case ('date') {\r\n                    @if (cellValue(row, col); as value) {\r\n                      {{ $any(value) | date: 'yyyy-MM-dd' : 'UTC' }}\r\n                    } @else { \u2014 }\r\n                  }\r\n                  @default {\r\n                    {{ displayValue(row, col) }}\r\n                  }\r\n                }\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n@if (!loading() && rows().length === 0 && emptyKey()) {\r\n  <fly-state-message kind=\"empty\" [messageKey]=\"emptyKey()\" [iconClass]=\"emptyIconClass()\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card)}.dt{width:100%;border-collapse:collapse;font-size:var(--text-base)}.dt thead th{text-align:start;padding:var(--sp-2) var(--sp-3);font-size:12px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);background:var(--bg-3);border-block-end:1px solid var(--line)}.dt__th--end{text-align:end}.dt__sort{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}.dt__sort:hover{color:var(--ink)}.dt__sort:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dt__sort-icon{inline-size:0;block-size:0;border-inline:4px solid transparent;border-block-start:5px solid var(--ink-4);opacity:.45;transition:transform var(--t-state),opacity var(--t-state)}.dt__sort-icon[data-dir=asc]{opacity:1;border-block-start-color:var(--accent);transform:rotate(180deg)}.dt__sort-icon[data-dir=desc]{opacity:1;border-block-start-color:var(--accent)}.dt tbody td{height:var(--row-h);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line-3);color:var(--ink);transition:background var(--t-state)}.dt tbody tr:last-child td{border-block-end:0}.dt__row{cursor:pointer}.dt__row:hover td{background:var(--bg-hover)}.dt__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.dt__row--skel{cursor:default}.dt__row--skel:hover td{background:transparent}.dt__td--end{text-align:end}.dt__td--date,.dt__td--num{color:var(--ink-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}@media(width<=720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FlyStateMessageComponent, selector: "fly-state-message", inputs: ["kind", "messageKey", "iconClass", "retryLabelKey", "showRetry"], outputs: ["retried"] }, { kind: "component", type: FlySkeletonComponent, selector: "fly-skeleton", inputs: ["layout", "shape", "count", "lines", "animation", "fill", "messageKey", "announce"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDataTableComponent, isStandalone: true, selector: "fly-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyKey: { classPropertyName: "emptyKey", publicName: "emptyKey", isSignal: true, isRequired: false, transformFunction: null }, emptyIconClass: { classPropertyName: "emptyIconClass", publicName: "emptyIconClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", rowActivated: "rowActivated" }, queries: [{ propertyName: "cellTemplates", predicate: FlyCellDirective, isSignal: true }], ngImport: i0, template: "<table class=\"dt\" [attr.aria-label]=\"ariaLabelKey() ? (ariaLabelKey()! | translate) : null\">\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns(); track col.id) {\r\n        <th\r\n          scope=\"col\"\r\n          [class.dt__th--end]=\"col.align === 'end'\"\r\n          [attr.aria-sort]=\"headerAriaSort(col)\"\r\n        >\r\n          @if (col.sortable) {\r\n            <button type=\"button\" class=\"dt__sort\" (click)=\"onHeaderClick(col)\">\r\n              <span>{{ col.headerKey | translate }}</span>\r\n              <span class=\"dt__sort-icon\" [attr.data-dir]=\"sortDirFor(col)\" aria-hidden=\"true\"></span>\r\n            </button>\r\n          } @else {\r\n            {{ col.headerKey | translate }}\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      @for (i of skeletonRows; track i) {\r\n        <tr class=\"dt__row dt__row--skel\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <!-- shape=\"lines\" is the DS skeleton's no-chrome text shimmer\r\n                 (the kit's former shape=\"text\"); one line per collapsed row.\r\n                 No backticks in here: this is an INLINE template literal. -->\r\n            <fly-skeleton shape=\"lines\" [lines]=\"1\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n    } @else {\r\n      @for (row of rows(); track $index) {\r\n        <tr\r\n          class=\"dt__row\"\r\n          tabindex=\"0\"\r\n          (click)=\"onRowActivate($event, row)\"\r\n          (keydown.enter)=\"onRowActivate($event, row)\"\r\n        >\r\n          @for (col of columns(); track col.id) {\r\n            <td\r\n              [class.dt__td--end]=\"col.align === 'end'\"\r\n              [class.mono]=\"col.kind === 'mono'\"\r\n              [class.dt__td--date]=\"col.kind === 'date'\"\r\n              [class.dt__td--num]=\"col.kind === 'number'\"\r\n              [attr.data-label]=\"col.headerKey | translate\"\r\n            >\r\n              @if (templateFor(col.id); as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: row }\" />\r\n              } @else {\r\n                @switch (col.kind ?? 'text') {\r\n                  @case ('date') {\r\n                    @if (cellValue(row, col); as value) {\r\n                      {{ $any(value) | date: 'yyyy-MM-dd' : 'UTC' }}\r\n                    } @else { \u2014 }\r\n                  }\r\n                  @default {\r\n                    {{ displayValue(row, col) }}\r\n                  }\r\n                }\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n@if (!loading() && rows().length === 0 && emptyKey()) {\r\n  <fly-state-message kind=\"empty\" [messageKey]=\"emptyKey()\" [iconClass]=\"emptyIconClass()\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);container-type:inline-size}.dt{width:100%;border-collapse:collapse;font-size:var(--text-base)}.dt thead th{text-align:start;padding:var(--sp-2) var(--sp-3);font-size:12px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);background:var(--bg-3);border-block-end:1px solid var(--line)}.dt__th--end{text-align:end}.dt__sort{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}.dt__sort:hover{color:var(--ink)}.dt__sort:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dt__sort-icon{inline-size:0;block-size:0;border-inline:4px solid transparent;border-block-start:5px solid var(--ink-4);opacity:.45;transition:transform var(--t-state),opacity var(--t-state)}.dt__sort-icon[data-dir=asc]{opacity:1;border-block-start-color:var(--accent);transform:rotate(180deg)}.dt__sort-icon[data-dir=desc]{opacity:1;border-block-start-color:var(--accent)}.dt tbody td{height:var(--row-h);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line-3);color:var(--ink);transition:background var(--t-state)}.dt tbody tr:last-child td{border-block-end:0}.dt__row{cursor:pointer}.dt__row:hover td{background:var(--bg-hover)}.dt__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.dt__row--skel{cursor:default}.dt__row--skel:hover td{background:transparent}.dt__td--end{text-align:end}.dt__td--date,.dt__td--num{color:var(--ink-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}@container (width <= 720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}@media(width<=720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FlyStateMessageComponent, selector: "fly-state-message", inputs: ["kind", "messageKey", "iconClass", "retryLabelKey", "showRetry"], outputs: ["retried"] }, { kind: "component", type: FlySkeletonComponent, selector: "fly-skeleton", inputs: ["layout", "shape", "count", "lines", "animation", "fill", "messageKey", "announce"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-data-table', standalone: true, imports: [DatePipe, NgTemplateOutlet, TranslatePipe, FlyStateMessageComponent, FlySkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"dt\" [attr.aria-label]=\"ariaLabelKey() ? (ariaLabelKey()! | translate) : null\">\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns(); track col.id) {\r\n        <th\r\n          scope=\"col\"\r\n          [class.dt__th--end]=\"col.align === 'end'\"\r\n          [attr.aria-sort]=\"headerAriaSort(col)\"\r\n        >\r\n          @if (col.sortable) {\r\n            <button type=\"button\" class=\"dt__sort\" (click)=\"onHeaderClick(col)\">\r\n              <span>{{ col.headerKey | translate }}</span>\r\n              <span class=\"dt__sort-icon\" [attr.data-dir]=\"sortDirFor(col)\" aria-hidden=\"true\"></span>\r\n            </button>\r\n          } @else {\r\n            {{ col.headerKey | translate }}\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      @for (i of skeletonRows; track i) {\r\n        <tr class=\"dt__row dt__row--skel\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <!-- shape=\"lines\" is the DS skeleton's no-chrome text shimmer\r\n                 (the kit's former shape=\"text\"); one line per collapsed row.\r\n                 No backticks in here: this is an INLINE template literal. -->\r\n            <fly-skeleton shape=\"lines\" [lines]=\"1\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n    } @else {\r\n      @for (row of rows(); track $index) {\r\n        <tr\r\n          class=\"dt__row\"\r\n          tabindex=\"0\"\r\n          (click)=\"onRowActivate($event, row)\"\r\n          (keydown.enter)=\"onRowActivate($event, row)\"\r\n        >\r\n          @for (col of columns(); track col.id) {\r\n            <td\r\n              [class.dt__td--end]=\"col.align === 'end'\"\r\n              [class.mono]=\"col.kind === 'mono'\"\r\n              [class.dt__td--date]=\"col.kind === 'date'\"\r\n              [class.dt__td--num]=\"col.kind === 'number'\"\r\n              [attr.data-label]=\"col.headerKey | translate\"\r\n            >\r\n              @if (templateFor(col.id); as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: row }\" />\r\n              } @else {\r\n                @switch (col.kind ?? 'text') {\r\n                  @case ('date') {\r\n                    @if (cellValue(row, col); as value) {\r\n                      {{ $any(value) | date: 'yyyy-MM-dd' : 'UTC' }}\r\n                    } @else { \u2014 }\r\n                  }\r\n                  @default {\r\n                    {{ displayValue(row, col) }}\r\n                  }\r\n                }\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n@if (!loading() && rows().length === 0 && emptyKey()) {\r\n  <fly-state-message kind=\"empty\" [messageKey]=\"emptyKey()\" [iconClass]=\"emptyIconClass()\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card)}.dt{width:100%;border-collapse:collapse;font-size:var(--text-base)}.dt thead th{text-align:start;padding:var(--sp-2) var(--sp-3);font-size:12px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);background:var(--bg-3);border-block-end:1px solid var(--line)}.dt__th--end{text-align:end}.dt__sort{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}.dt__sort:hover{color:var(--ink)}.dt__sort:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dt__sort-icon{inline-size:0;block-size:0;border-inline:4px solid transparent;border-block-start:5px solid var(--ink-4);opacity:.45;transition:transform var(--t-state),opacity var(--t-state)}.dt__sort-icon[data-dir=asc]{opacity:1;border-block-start-color:var(--accent);transform:rotate(180deg)}.dt__sort-icon[data-dir=desc]{opacity:1;border-block-start-color:var(--accent)}.dt tbody td{height:var(--row-h);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line-3);color:var(--ink);transition:background var(--t-state)}.dt tbody tr:last-child td{border-block-end:0}.dt__row{cursor:pointer}.dt__row:hover td{background:var(--bg-hover)}.dt__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.dt__row--skel{cursor:default}.dt__row--skel:hover td{background:transparent}.dt__td--end{text-align:end}.dt__td--date,.dt__td--num{color:var(--ink-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}@media(width<=720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}\n"] }]
+            args: [{ selector: 'fly-data-table', standalone: true, imports: [DatePipe, NgTemplateOutlet, TranslatePipe, FlyStateMessageComponent, FlySkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"dt\" [attr.aria-label]=\"ariaLabelKey() ? (ariaLabelKey()! | translate) : null\">\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns(); track col.id) {\r\n        <th\r\n          scope=\"col\"\r\n          [class.dt__th--end]=\"col.align === 'end'\"\r\n          [attr.aria-sort]=\"headerAriaSort(col)\"\r\n        >\r\n          @if (col.sortable) {\r\n            <button type=\"button\" class=\"dt__sort\" (click)=\"onHeaderClick(col)\">\r\n              <span>{{ col.headerKey | translate }}</span>\r\n              <span class=\"dt__sort-icon\" [attr.data-dir]=\"sortDirFor(col)\" aria-hidden=\"true\"></span>\r\n            </button>\r\n          } @else {\r\n            {{ col.headerKey | translate }}\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      @for (i of skeletonRows; track i) {\r\n        <tr class=\"dt__row dt__row--skel\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <!-- shape=\"lines\" is the DS skeleton's no-chrome text shimmer\r\n                 (the kit's former shape=\"text\"); one line per collapsed row.\r\n                 No backticks in here: this is an INLINE template literal. -->\r\n            <fly-skeleton shape=\"lines\" [lines]=\"1\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n    } @else {\r\n      @for (row of rows(); track $index) {\r\n        <tr\r\n          class=\"dt__row\"\r\n          tabindex=\"0\"\r\n          (click)=\"onRowActivate($event, row)\"\r\n          (keydown.enter)=\"onRowActivate($event, row)\"\r\n        >\r\n          @for (col of columns(); track col.id) {\r\n            <td\r\n              [class.dt__td--end]=\"col.align === 'end'\"\r\n              [class.mono]=\"col.kind === 'mono'\"\r\n              [class.dt__td--date]=\"col.kind === 'date'\"\r\n              [class.dt__td--num]=\"col.kind === 'number'\"\r\n              [attr.data-label]=\"col.headerKey | translate\"\r\n            >\r\n              @if (templateFor(col.id); as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: row }\" />\r\n              } @else {\r\n                @switch (col.kind ?? 'text') {\r\n                  @case ('date') {\r\n                    @if (cellValue(row, col); as value) {\r\n                      {{ $any(value) | date: 'yyyy-MM-dd' : 'UTC' }}\r\n                    } @else { \u2014 }\r\n                  }\r\n                  @default {\r\n                    {{ displayValue(row, col) }}\r\n                  }\r\n                }\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n@if (!loading() && rows().length === 0 && emptyKey()) {\r\n  <fly-state-message kind=\"empty\" [messageKey]=\"emptyKey()\" [iconClass]=\"emptyIconClass()\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);container-type:inline-size}.dt{width:100%;border-collapse:collapse;font-size:var(--text-base)}.dt thead th{text-align:start;padding:var(--sp-2) var(--sp-3);font-size:12px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);background:var(--bg-3);border-block-end:1px solid var(--line)}.dt__th--end{text-align:end}.dt__sort{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}.dt__sort:hover{color:var(--ink)}.dt__sort:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dt__sort-icon{inline-size:0;block-size:0;border-inline:4px solid transparent;border-block-start:5px solid var(--ink-4);opacity:.45;transition:transform var(--t-state),opacity var(--t-state)}.dt__sort-icon[data-dir=asc]{opacity:1;border-block-start-color:var(--accent);transform:rotate(180deg)}.dt__sort-icon[data-dir=desc]{opacity:1;border-block-start-color:var(--accent)}.dt tbody td{height:var(--row-h);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line-3);color:var(--ink);transition:background var(--t-state)}.dt tbody tr:last-child td{border-block-end:0}.dt__row{cursor:pointer}.dt__row:hover td{background:var(--bg-hover)}.dt__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.dt__row--skel{cursor:default}.dt__row--skel:hover td{background:transparent}.dt__td--end{text-align:end}.dt__td--date,.dt__td--num{color:var(--ink-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}@container (width <= 720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}@media(width<=720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowActivated: [{ type: i0.Output, args: ["rowActivated"] }], emptyKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyKey", required: false }] }], emptyIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIconClass", required: false }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FlyCellDirective), { isSignal: true }] }] } });
 
 /**
@@ -18378,11 +18424,11 @@ class PageHeaderComponent {
         return '#';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PageHeaderComponent, isStandalone: true, selector: "fly-page-header", inputs: { variant: "variant", title: "title", titleKey: "titleKey", subtitle: "subtitle", subtitleKey: "subtitleKey", titleAr: "titleAr", eyebrow: "eyebrow", eyebrowKey: "eyebrowKey", metricValue: "metricValue", metricLabel: "metricLabel", metricLabelKey: "metricLabelKey", breadcrumbs: "breadcrumbs" }, outputs: { crumbClick: "crumbClick" }, ngImport: i0, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6)}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;transition:color var(--t-state)}.crumb--link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1;min-width:0}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@media(max-width:980px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PageHeaderComponent, isStandalone: true, selector: "fly-page-header", inputs: { variant: "variant", title: "title", titleKey: "titleKey", subtitle: "subtitle", subtitleKey: "subtitleKey", titleAr: "titleAr", eyebrow: "eyebrow", eyebrowKey: "eyebrowKey", metricValue: "metricValue", metricLabel: "metricLabel", metricLabelKey: "metricLabelKey", breadcrumbs: "breadcrumbs" }, outputs: { crumbClick: "crumbClick" }, ngImport: i0, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6);container-type:inline-size}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;transition:color var(--t-state)}.crumb--link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1;min-width:0}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@container (max-width: 980px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(max-width:980px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-page-header', standalone: true, imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6)}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;transition:color var(--t-state)}.crumb--link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1;min-width:0}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@media(max-width:980px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"] }]
+            args: [{ selector: 'fly-page-header', standalone: true, imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6);container-type:inline-size}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;transition:color var(--t-state)}.crumb--link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1;min-width:0}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@container (max-width: 980px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(max-width:980px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], title: [{
@@ -18461,6 +18507,302 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
   `, styles: [":host{display:block}.sh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-block-end:1px solid var(--line-3)}.sh__t{margin:0;font-size:13px;font-weight:var(--fw-semibold);color:var(--ink);letter-spacing:-.005em;min-width:0}.sh__a{display:inline-flex;align-items:center;gap:var(--sp-1);flex-shrink:0}.sh__a ::ng-deep a:not([fly-button]),.sh__a ::ng-deep button:not([fly-button],[fly-icon-button]){display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;color:var(--accent);font-size:12px;font-weight:var(--fw-medium);cursor:pointer;padding:4px 6px;border-radius:var(--r-sm);font-family:inherit;text-decoration:none;transition:background var(--t-state)}.sh__a ::ng-deep a:not([fly-button]):hover,.sh__a ::ng-deep button:not([fly-button],[fly-icon-button]):hover{background:color-mix(in srgb,var(--accent-soft) 50%,transparent)}.sh__a ::ng-deep a:not([fly-button]):focus-visible,.sh__a ::ng-deep button:not([fly-button],[fly-icon-button]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}\n"] }]
         }], propDecorators: { titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }] } });
 
+/**
+ * Detail-page content card — the surface every panel and sidebar block on a detail
+ * screen sits on: `card-surface` fill/hairline/radius/shadow, an optional
+ * `fly-section-header`, and a padded body.
+ *
+ * Extracted because four detail screens (Circles signal + trend, Thoughts idea +
+ * the six sibling detail pages) had each hand-rolled the identical
+ * `.card` / `.card__body` / `.card__body--flush` recipe, and they drifted: some
+ * carried the shadow, some didn't, and on the shell's translucent glass the ones
+ * without it lost their edge and read as a lighter surface than their neighbours.
+ *
+ * ```html
+ * <fly-detail-card titleKey="common.label.metadata">
+ *   <fly-meta [items]="rows()" />
+ * </fly-detail-card>
+ *
+ * <!-- A child with its own list chrome shouldn't sit inside body padding. -->
+ * <fly-detail-card titleKey="common.label.evidence" [flush]="true">
+ *   <button card-actions type="button" (click)="add()">Add</button>
+ *   <fly-evidence-panel [hideHeader]="true" />
+ * </fly-detail-card>
+ * ```
+ *
+ * With no `titleKey` and nothing projected into `[card-title]` the header is
+ * omitted entirely, so the card also serves as a bare framed surface (a cover
+ * image, a chart) without an empty header rule above it.
+ */
+class FlyDetailCardComponent {
+    /** i18n key for the card title; alternatively project `[card-title]`. */
+    titleKey = input(...(ngDevMode ? [undefined, { debugName: "titleKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Set when the title arrives through `[card-title]` rather than `titleKey`.
+     * Content projection cannot be *queried* for presence without a `contentChild`
+     * on a directive the caller would also have to import, so this stays an
+     * explicit flag — a header with neither is omitted rather than rendered empty.
+     */
+    hasProjectedTitle = input(false, ...(ngDevMode ? [{ debugName: "hasProjectedTitle" }] : /* istanbul ignore next */ []));
+    /** Drop the body padding — for a child that brings its own list/table chrome. */
+    flush = input(false, ...(ngDevMode ? [{ debugName: "flush" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailCardComponent, isStandalone: true, selector: "fly-detail-card", inputs: { titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedTitle: { classPropertyName: "hasProjectedTitle", publicName: "hasProjectedTitle", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (titleKey() || hasProjectedTitle()) {
+      <fly-section-header [titleKey]="titleKey()">
+        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
+        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
+      </fly-section-header>
+    }
+    <div class="dc__body" [class.dc__body--flush]="flush()">
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}.dc__body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.dc__body--flush{padding:0}\n"], dependencies: [{ kind: "component", type: FlySectionHeaderComponent, selector: "fly-section-header", inputs: ["titleKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fly-detail-card', standalone: true, imports: [FlySectionHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (titleKey() || hasProjectedTitle()) {
+      <fly-section-header [titleKey]="titleKey()">
+        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
+        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
+      </fly-section-header>
+    }
+    <div class="dc__body" [class.dc__body--flush]="flush()">
+      <ng-content />
+    </div>
+  `, styles: [":host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}.dc__body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.dc__body--flush{padding:0}\n"] }]
+        }], propDecorators: { titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], hasProjectedTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasProjectedTitle", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }] } });
+
+/**
+ * Roving-focus target for a radiogroup keydown. Pure so the wrap-around and
+ * RTL mirroring are unit-testable without the DOM.
+ *
+ * - ArrowRight/ArrowDown advance, ArrowLeft/ArrowUp go back — horizontal
+ *   arrows mirror under RTL (visual "right" stays visual "right").
+ * - Home/End jump to the edges.
+ * - Returns null for any other key (caller must not preventDefault).
+ * - With no current selection (current < 0) navigation starts from index 0.
+ */
+function nextSegmentIndex(current, key, length, rtl) {
+    if (length === 0)
+        return null;
+    if (key === 'Home')
+        return 0;
+    if (key === 'End')
+        return length - 1;
+    const forward = key === 'ArrowDown' || key === (rtl ? 'ArrowLeft' : 'ArrowRight');
+    const backward = key === 'ArrowUp' || key === (rtl ? 'ArrowRight' : 'ArrowLeft');
+    if (!forward && !backward)
+        return null;
+    const base = current < 0 ? 0 : current;
+    return forward ? (base + 1) % length : (base - 1 + length) % length;
+}
+
+/**
+ * Resolve which section is active.
+ *
+ * The fallback is the point of this function. A detail page's section list is
+ * derived from the record — a scorecard tab only exists while the record has a
+ * scorecard, an approvals tab only while an approval is open — so a selection made
+ * on one record can name a section the NEXT record does not have. The remote-router
+ * outlet reuses the component instance across `/x/:id` → `/x/:id` navigations, so
+ * that is a routine occurrence, not an edge case, and the symptom is an empty panel
+ * with no indication why.
+ *
+ * Returns the selection when it still exists, otherwise the first section, or null
+ * when there are none.
+ */
+function resolveActiveSection(sections, selected) {
+    if (sections.length === 0)
+        return null;
+    if (selected !== undefined && sections.some(s => s.id === selected))
+        return selected;
+    return sections[0].id;
+}
+
+let nextShellUid = 0;
+/**
+ * Detail-page body scaffold — an aside (icon rail + pinned cards) beside a panel
+ * showing the active section.
+ *
+ * The anatomy comes from the Circles signal-detail screen and had been hand-copied
+ * onto every detail page that wanted it, CSS and all. Each copy re-derived the same
+ * four decisions and got a different subset right, so this owns them:
+ *
+ *  - **The rail sits at the top of the aside, but AFTER the content in the DOM** —
+ *    a screen reader meets the record before its navigation, while sighted readers
+ *    get the rail where a sidebar nav belongs. `order` does the visual half.
+ *  - **The panel stretches to the grid row** (already `max(aside, panel)`), so a
+ *    short section's card ends where the aside ends at every window size. A `vh`
+ *    floor cannot do this — it ignores the aside and mismatches at every size.
+ *  - **Below 980px the rail becomes a horizontal bar** above the panel rather than
+ *    a 300px column squeezing the content.
+ *  - **The active tab is a solid accent plate with `--on-accent-fill` ink** — NOT
+ *    `--accent` on `--accent-soft`: the shell paints `--accent-soft` as a tint of
+ *    `--accent`, so that pairing renders the label in its own background colour.
+ *
+ * It also supplies the tablist a11y both hand-rolled rails were missing: proper
+ * `role="tablist"`/`tab`/`tabpanel` wiring, a roving tabindex, and RTL-aware arrow
+ * keys with Home/End (shared with `fly-tabs` via `nextSegmentIndex`).
+ *
+ * ```html
+ * <fly-detail-shell [sections]="sections()" [(selected)]="section">
+ *   <ng-container detail-aside>
+ *     <fly-detail-card titleKey="common.label.summary">…</fly-detail-card>
+ *   </ng-container>
+ *
+ *   @switch (activeSection()) {
+ *     @case ('metadata') { <fly-detail-card …/> }
+ *   }
+ * </fly-detail-shell>
+ * ```
+ *
+ * The default slot is the panel. Read back the resolved section with the two-way
+ * `selected` — it self-corrects when the bound id names a section that no longer
+ * exists (see {@link resolveActiveSection}).
+ */
+class FlyDetailShellComponent {
+    i18n = inject(I18nService);
+    uid = `fly-detail-shell-${nextShellUid++}`;
+    rail = viewChild('rail', ...(ngDevMode ? [{ debugName: "rail" }] : /* istanbul ignore next */ []));
+    /** The rail's sections, in order. Empty renders the aside + panel with no rail. */
+    sections = input([], ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    /** Active section id (two-way). Unset/unknown resolves to the first section. */
+    selected = model(...(ngDevMode ? [undefined, { debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** i18n key for the rail's `aria-label`. */
+    sectionsLabelKey = input('ui.nav.sections', ...(ngDevMode ? [{ debugName: "sectionsLabelKey" }] : /* istanbul ignore next */ []));
+    /** The section actually rendered — self-corrects, see {@link resolveActiveSection}. */
+    activeId = computed(() => resolveActiveSection(this.sections(), this.selected()), ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    tabId(id) {
+        return `${this.uid}-tab-${id}`;
+    }
+    panelId() {
+        return `${this.uid}-panel`;
+    }
+    select(id) {
+        this.selected.set(id);
+    }
+    onKey(event) {
+        const sections = this.sections();
+        const current = sections.findIndex(s => s.id === this.activeId());
+        // The rail is a vertical tablist that turns horizontal below 980px, and
+        // nextSegmentIndex already serves both: Up/Down step unmirrored, Left/Right
+        // mirror under RTL. Home/End jump to the edges.
+        const next = nextSegmentIndex(current, event.key, sections.length, this.i18n.isRtl());
+        if (next === null)
+            return;
+        event.preventDefault();
+        this.select(sections[next].id);
+        const buttons = this.rail()?.nativeElement.querySelectorAll('[role="tab"]');
+        buttons?.[next]?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailShellComponent, isStandalone: true, selector: "fly-detail-shell", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sectionsLabelKey: { classPropertyName: "sectionsLabelKey", publicName: "sectionsLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, viewQueries: [{ propertyName: "rail", first: true, predicate: ["rail"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="ds__layout">
+      <aside class="ds__aside">
+        <div class="ds__pinned">
+          <ng-content select="[detail-aside]" />
+        </div>
+
+        @if (sections().length > 0) {
+          <div
+            #rail
+            class="ds__rail"
+            role="tablist"
+            tabindex="-1"
+            [attr.aria-orientation]="'vertical'"
+            [attr.aria-label]="sectionsLabelKey() | translate"
+            (keydown)="onKey($event)"
+          >
+            @for (s of sections(); track s.id) {
+              <button
+                type="button"
+                class="ds__tab"
+                role="tab"
+                [id]="tabId(s.id)"
+                [class.ds__tab--active]="activeId() === s.id"
+                [attr.aria-selected]="activeId() === s.id"
+                [attr.aria-controls]="panelId()"
+                [attr.tabindex]="activeId() === s.id ? 0 : -1"
+                [attr.title]="s.labelKey | translate"
+                (click)="select(s.id)"
+              >
+                @if (s.icon) {
+                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
+                }
+                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
+              </button>
+            }
+          </div>
+        }
+      </aside>
+
+      <div
+        class="ds__panel"
+        [id]="panelId()"
+        [attr.role]="sections().length ? 'tabpanel' : null"
+        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
+      >
+        <ng-content />
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;container-type:inline-size}.ds__layout{display:grid;grid-template-columns:var(--fly-detail-aside, 300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}.ds__aside{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__aside .ds__rail{order:-1}.ds__pinned{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;align-self:stretch}.ds__panel>:only-child{flex:1}.ds__rail{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.ds__tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2);border:0;background:transparent;border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:var(--text-sm);text-align:start;white-space:nowrap;overflow:hidden;transition:background var(--t-state),color var(--t-state)}.ds__tab:hover{background:var(--bg-hover);color:var(--ink)}.ds__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ds__tab--active{background:var(--accent-fill);color:var(--on-accent-fill);font-weight:var(--fw-semibold)}.ds__tab-ico{font-size:var(--text-md);flex-shrink:0;width:20px;text-align:center}.ds__tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@container (max-width: 980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}@media(max-width:980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fly-detail-shell', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ds__layout">
+      <aside class="ds__aside">
+        <div class="ds__pinned">
+          <ng-content select="[detail-aside]" />
+        </div>
+
+        @if (sections().length > 0) {
+          <div
+            #rail
+            class="ds__rail"
+            role="tablist"
+            tabindex="-1"
+            [attr.aria-orientation]="'vertical'"
+            [attr.aria-label]="sectionsLabelKey() | translate"
+            (keydown)="onKey($event)"
+          >
+            @for (s of sections(); track s.id) {
+              <button
+                type="button"
+                class="ds__tab"
+                role="tab"
+                [id]="tabId(s.id)"
+                [class.ds__tab--active]="activeId() === s.id"
+                [attr.aria-selected]="activeId() === s.id"
+                [attr.aria-controls]="panelId()"
+                [attr.tabindex]="activeId() === s.id ? 0 : -1"
+                [attr.title]="s.labelKey | translate"
+                (click)="select(s.id)"
+              >
+                @if (s.icon) {
+                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
+                }
+                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
+              </button>
+            }
+          </div>
+        }
+      </aside>
+
+      <div
+        class="ds__panel"
+        [id]="panelId()"
+        [attr.role]="sections().length ? 'tabpanel' : null"
+        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
+      >
+        <ng-content />
+      </div>
+    </div>
+  `, styles: [":host{display:block;container-type:inline-size}.ds__layout{display:grid;grid-template-columns:var(--fly-detail-aside, 300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}.ds__aside{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__aside .ds__rail{order:-1}.ds__pinned{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;align-self:stretch}.ds__panel>:only-child{flex:1}.ds__rail{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.ds__tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2);border:0;background:transparent;border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:var(--text-sm);text-align:start;white-space:nowrap;overflow:hidden;transition:background var(--t-state),color var(--t-state)}.ds__tab:hover{background:var(--bg-hover);color:var(--ink)}.ds__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ds__tab--active{background:var(--accent-fill);color:var(--on-accent-fill);font-weight:var(--fw-semibold)}.ds__tab-ico{font-size:var(--text-md);flex-shrink:0;width:20px;text-align:center}.ds__tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@container (max-width: 980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}@media(max-width:980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}\n"] }]
+        }], propDecorators: { rail: [{ type: i0.ViewChild, args: ['rail', { isSignal: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], sectionsLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionsLabelKey", required: false }] }] } });
+
 /** Every module across every section, in visual order. */
 function flattenModules(sections) {
     return sections.flatMap(s => s.modules);
@@ -18695,29 +19037,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }], ctorParameters: () => [], propDecorators: { brandLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLabelKey", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], footerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerLabel", required: false }] }], moduleSelected: [{ type: i0.Output, args: ["moduleSelected"] }], brandSelected: [{ type: i0.Output, args: ["brandSelected"] }], icons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FlyModuleIconDirective), { isSignal: true }] }], rows: [{ type: i0.ViewChildren, args: ['row', { isSignal: true }] }], trigger: [{ type: i0.ViewChildren, args: ['trigger', { isSignal: true }] }] } });
 
 /**
- * Roving-focus target for a radiogroup keydown. Pure so the wrap-around and
- * RTL mirroring are unit-testable without the DOM.
+ * The section's card shape, applying the default when it declares none: the FIRST
+ * section is the app's front door and gets tall feature cards; everything after it is
+ * secondary and gets compact rows.
  *
- * - ArrowRight/ArrowDown advance, ArrowLeft/ArrowUp go back — horizontal
- *   arrows mirror under RTL (visual "right" stays visual "right").
- * - Home/End jump to the edges.
- * - Returns null for any other key (caller must not preventDefault).
- * - With no current selection (current < 0) navigation starts from index 0.
+ * Positional rather than required because the common case — one prominent section plus
+ * a "supporting" tail — should need no configuration at all, and an app that wants
+ * something else says so explicitly.
  */
-function nextSegmentIndex(current, key, length, rtl) {
-    if (length === 0)
-        return null;
-    if (key === 'Home')
-        return 0;
-    if (key === 'End')
-        return length - 1;
-    const forward = key === 'ArrowDown' || key === (rtl ? 'ArrowLeft' : 'ArrowRight');
-    const backward = key === 'ArrowUp' || key === (rtl ? 'ArrowRight' : 'ArrowLeft');
-    if (!forward && !backward)
+function sectionLayout(section, index) {
+    return section.layout ?? (index === 0 ? 'feature' : 'compact');
+}
+/**
+ * Which sections start expanded: every non-collapsible one, plus none of the
+ * collapsible ones.
+ *
+ * Returned as a `Set` of indices rather than mutating the sections, so the input array
+ * stays the app's immutable declaration and re-rendering with new data cannot resurrect
+ * a stale open/closed state.
+ */
+function initialExpanded(sections) {
+    const open = new Set();
+    sections.forEach((s, i) => {
+        if (!s.collapsible)
+            open.add(i);
+    });
+    return open;
+}
+/**
+ * The hint key for a collapsible section in its current state, or null when it has none.
+ *
+ * `collapsedHintKey` falls back to `hintKey` so an app that wants one message in both
+ * states declares one key. A non-collapsible section never shows a hint — the hint
+ * exists to explain what is hidden.
+ */
+function sectionHintKey(section, expanded) {
+    if (!section.collapsible)
         return null;
-    const base = current < 0 ? 0 : current;
-    return forward ? (base + 1) % length : (base - 1 + length) % length;
+    return (expanded ? section.hintKey : (section.collapsedHintKey ?? section.hintKey)) ?? null;
+}
+
+/**
+ * `<fly-app-home>` — a business app's landing page: brand strip, hero, and one card
+ * per module.
+ *
+ * The sibling of {@link FlyAppTopbarComponent}, and deliberately fed by the SAME
+ * `FlyAppModuleSection[]`. An app declares its modules once; the switcher is how you
+ * move between them once you are inside, this is the front door you arrive at. Two
+ * registries would drift, and the drift would show as a module reachable from one and
+ * not the other.
+ *
+ * ```html
+ * <fly-app-home
+ *   brandLabelKey="common.label.thoughts"
+ *   titleKey="thoughts.home.title"
+ *   subtitleKey="thoughts.home.subtitle"
+ *   [sections]="navSections"
+ *   (moduleSelected)="open($event)">
+ *   <span app-home-brand><fly-thoughts-logo /></span>
+ *   <div app-home-actions><!-- locale / theme / profile --></div>
+ *   <ng-template flyModuleIcon="ideas"><svg …></svg></ng-template>
+ * </fly-app-home>
+ * ```
+ *
+ * Generalized from the Circles landing, whose layout was sound but whose content was
+ * hardcoded — one inline `<svg>` and one `@if` per module, plus a bespoke card for each
+ * non-module destination. Here every card is data, and a destination that is not really
+ * a module (a gallery, a cross-cutting control room) is just another {@link FlyAppModule}
+ * with a projected icon. That was the test of whether this abstraction was real.
+ *
+ * Icons reuse `flyModuleIcon` — the SAME directive the topbar takes — so an app that
+ * renders both declares its icon templates once per surface, in the same syntax.
+ *
+ * a11y: cards are real `<button>`s in a labelled group; a collapsible section is a
+ * disclosure (`aria-expanded` + `aria-controls`), and the region carries the section
+ * heading. Layout is logical-property only, so it mirrors under `dir="rtl"` on its own —
+ * the one exception is the chevron/arrow glyphs, which are directional by meaning and
+ * flip explicitly.
+ */
+class FlyAppHomeComponent {
+    /** i18n key for the brand name beside the mark. Omit to render the mark alone. */
+    brandLabelKey = input(...(ngDevMode ? [undefined, { debugName: "brandLabelKey" }] : /* istanbul ignore next */ []));
+    /** i18n key for the hero headline. */
+    titleKey = input(...(ngDevMode ? [undefined, { debugName: "titleKey" }] : /* istanbul ignore next */ []));
+    /** i18n key for the hero sub-line. */
+    subtitleKey = input(...(ngDevMode ? [undefined, { debugName: "subtitleKey" }] : /* istanbul ignore next */ []));
+    /** The app's modules, grouped. Same array the topbar takes. */
+    sections = input([], ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    /** i18n key for the card group's `aria-label`. */
+    modulesLabelKey = input('ui.nav.modules', ...(ngDevMode ? [{ debugName: "modulesLabelKey" }] : /* istanbul ignore next */ []));
+    /** Emits the selected module's `key`. Disabled modules never emit. */
+    moduleSelected = output();
+    /** Emits when the brand is activated. */
+    brandSelected = output();
+    icons = contentChildren(FlyModuleIconDirective, ...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
+    /**
+     * Expanded section indices. Seeded from the inputs and then owned by the user —
+     * `linkedSignal` semantics on purpose: re-declaring `sections` (a locale switch
+     * re-evaluating labels, say) must not slam a section the user opened shut again.
+     */
+    userToggled = signal(null, ...(ngDevMode ? [{ debugName: "userToggled" }] : /* istanbul ignore next */ []));
+    expandedSet = computed(() => this.userToggled() ?? initialExpanded(this.sections()), ...(ngDevMode ? [{ debugName: "expandedSet" }] : /* istanbul ignore next */ []));
+    /** Presentation-resolved sections, so the template stays declarative. */
+    rows = computed(() => this.sections().map((section, index) => ({
+        index,
+        section,
+        layout: sectionLayout(section, index),
+        expanded: this.expandedSet().has(index),
+        hintKey: sectionHintKey(section, this.expandedSet().has(index)),
+    })), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    iconFor(key) {
+        return this.icons().find(d => d.flyModuleIcon() === key)?.template;
+    }
+    toggle(index) {
+        const next = new Set(this.expandedSet());
+        if (!next.delete(index))
+            next.add(index);
+        this.userToggled.set(next);
+    }
+    select(module) {
+        if (module.disabled)
+            return;
+        this.moduleSelected.emit(module.key);
+    }
+    sectionId(index) {
+        return `fly-app-home-sec-${index}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyAppHomeComponent, isStandalone: true, selector: "fly-app-home", inputs: { brandLabelKey: { classPropertyName: "brandLabelKey", publicName: "brandLabelKey", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, subtitleKey: { classPropertyName: "subtitleKey", publicName: "subtitleKey", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, modulesLabelKey: { classPropertyName: "modulesLabelKey", publicName: "modulesLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { moduleSelected: "moduleSelected", brandSelected: "brandSelected" }, queries: [{ propertyName: "icons", predicate: FlyModuleIconDirective, isSignal: true }], ngImport: i0, template: "<div class=\"ah\">\n  <header class=\"ah__util\">\n    <button type=\"button\" class=\"ah__brand\" (click)=\"brandSelected.emit()\">\n      <span class=\"ah__brand-mark\"><ng-content select=\"[app-home-brand]\" /></span>\n      @if (brandLabelKey(); as key) {\n        <span class=\"ah__brand-name\">{{ key | translate }}</span>\n      }\n    </button>\n    <ng-content select=\"[app-home-actions]\" />\n  </header>\n\n  <main class=\"ah__main\">\n    @if (titleKey() || subtitleKey()) {\n      <section class=\"ah__hero\">\n        @if (titleKey(); as key) {\n          <h1 class=\"ah__title\">{{ key | translate }}</h1>\n        }\n        @if (subtitleKey(); as key) {\n          <p class=\"ah__sub\">{{ key | translate }}</p>\n        }\n      </section>\n    }\n\n    @for (row of rows(); track row.index) {\n      <section\n        class=\"ah__sec\"\n        [class.ah__sec--secondary]=\"row.index > 0\"\n        [attr.aria-label]=\"row.section.titleKey ? null : (modulesLabelKey() | translate)\"\n      >\n        @if (row.section.titleKey; as titleKey) {\n          @if (row.section.collapsible) {\n            <button\n              type=\"button\"\n              class=\"ah__sec-hd\"\n              (click)=\"toggle(row.index)\"\n              [attr.aria-expanded]=\"row.expanded\"\n              [attr.aria-controls]=\"sectionId(row.index)\"\n            >\n              <!-- Points end-ward when shut, down when open. `--open` wins over the RTL\n                   flip below because a downward chevron has no direction to mirror. -->\n              <svg\n                class=\"ah__sec-chev\"\n                [class.ah__sec-chev--open]=\"row.expanded\"\n                width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\n              >\n                <polyline points=\"9 6 15 12 9 18\" />\n              </svg>\n              <span class=\"ah__sec-title\">{{ titleKey | translate }}</span>\n              <span class=\"ah__sec-count\">{{ row.section.modules.length }}</span>\n              @if (row.hintKey; as hint) {\n                <span class=\"ah__sec-hint\">{{ hint | translate }}</span>\n              }\n            </button>\n          } @else {\n            <h2 class=\"ah__sec-title ah__sec-title--static\">{{ titleKey | translate }}</h2>\n          }\n        }\n\n        @if (row.expanded) {\n          <div class=\"ah__grid\" [class.ah__grid--compact]=\"row.layout === 'compact'\" [id]=\"sectionId(row.index)\">\n            @for (mod of row.section.modules; track mod.key) {\n              <button\n                type=\"button\"\n                class=\"ah__card\"\n                [class.ah__card--compact]=\"row.layout === 'compact'\"\n                [disabled]=\"mod.disabled\"\n                (click)=\"select(mod)\"\n              >\n                <span class=\"ah__card-ico\">\n                  @if (iconFor(mod.key); as tpl) {\n                    <ng-container *ngTemplateOutlet=\"tpl\" />\n                  } @else if (mod.iconClass) {\n                    <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\n                  }\n                </span>\n\n                @if (row.layout === 'compact') {\n                  <span class=\"ah__card-main\">\n                    <span class=\"ah__card-title\">{{ mod.labelKey | translate }}</span>\n                    @if (mod.descKey; as descKey) {\n                      <span class=\"ah__card-desc\">{{ descKey | translate }}</span>\n                    }\n                  </span>\n                  <svg\n                    class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\n                    stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" aria-hidden=\"true\"\n                  >\n                    <polyline points=\"9 6 15 12 9 18\" />\n                  </svg>\n                } @else {\n                  <span class=\"ah__card-title ah__card-title--feature\">{{ mod.labelKey | translate }}</span>\n                  @if (mod.descKey; as descKey) {\n                    <span class=\"ah__card-desc ah__card-desc--feature\">{{ descKey | translate }}</span>\n                  }\n                  <span class=\"ah__card-open\">\n                    {{ 'ui.action.open' | translate }}\n                    <svg\n                      class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\n                      stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\" aria-hidden=\"true\"\n                    >\n                      <polyline points=\"9 6 15 12 9 18\" />\n                    </svg>\n                  </span>\n                }\n              </button>\n            }\n          </div>\n        }\n      </section>\n    }\n  </main>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-height:100%;container-type:inline-size}.ah{display:flex;flex-direction:column;flex:1;min-height:100%}.ah__util{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6)}.ah__brand{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0;border:0;background:none;color:var(--ink);font-family:inherit;cursor:pointer}.ah__brand:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__brand-name{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__main{flex:1;inline-size:100%;max-inline-size:1120px;margin-inline:auto;padding:56px 40px;display:flex;flex-direction:column;justify-content:center;gap:44px}.ah__hero{max-inline-size:640px}.ah__title{margin:0 0 var(--sp-3);font-size:44px;font-weight:var(--fw-semibold);letter-spacing:-.03em;text-wrap:balance;background:linear-gradient(180deg,var(--ink),var(--ink-2));-webkit-background-clip:text;background-clip:text;color:transparent}.ah__sub{margin:0;max-inline-size:560px;font-size:var(--text-lg);line-height:1.55;color:var(--ink-3);text-wrap:pretty}.ah__sec{display:flex;flex-direction:column;gap:var(--sp-4)}.ah__sec--secondary{padding-block-start:28px;border-block-start:1px solid var(--line)}.ah__sec-hd{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;color:var(--ink);text-align:start}.ah__sec-hd:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__sec-chev{flex-shrink:0;color:var(--ink-3);transition:transform var(--t-overlay)}.ah__sec-title{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__sec-title--static{margin:0;color:var(--ink-3);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}.ah__sec-count{display:inline-grid;place-items:center;min-inline-size:22px;block-size:20px;padding-inline:6px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);font-size:var(--text-2xs);font-weight:var(--fw-medium);color:var(--ink-3)}.ah__sec-hint{margin-inline-start:auto;font-size:var(--text-xs);color:var(--ink-3)}.ah__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}.ah__card{display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;text-align:start;padding:22px 22px 18px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);color:inherit;font-family:inherit;cursor:pointer;transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-overlay)}.ah__card:before{content:\"\";position:absolute;inset:0;pointer-events:none;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--t-overlay)}.ah__card:hover:not(:disabled){transform:translateY(-2px);border-color:transparent;box-shadow:var(--shadow-filter)}.ah__card:hover:not(:disabled):before{opacity:1}.ah__card:focus-visible{outline:0;border-color:transparent;box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-filter)}.ah__card:focus-visible:before{opacity:1}.ah__card:disabled{cursor:default;opacity:.5}.ah__card-ico{display:grid;place-items:center;inline-size:40px;block-size:40px;margin-block-end:18px;border-radius:11px;background:var(--bg-3);border:0;color:var(--ink);font-size:var(--icon-lg);transition:background var(--t-overlay),color var(--t-overlay)}.ah__card:hover:not(:disabled) .ah__card-ico,.ah__card:focus-visible .ah__card-ico{background:var(--grad);color:var(--ink-inverse)}.ah__card-title{font-size:var(--text-sm);font-weight:var(--fw-semibold);letter-spacing:-.01em;color:var(--ink)}.ah__card-title--feature{margin-block-end:4px;font-size:18px;letter-spacing:-.015em}.ah__card-desc{font-size:var(--text-xs);line-height:1.45;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ah__card-desc--feature{margin-block-end:18px;font-size:var(--text-sm);line-height:1.5;text-wrap:pretty;overflow:visible;white-space:normal}.ah__card-open{display:inline-flex;align-items:center;gap:4px;margin-block-start:auto;font-size:var(--text-2xs);color:var(--ink-3);transition:color var(--t-overlay),gap var(--t-overlay)}.ah__card:hover:not(:disabled) .ah__card-open,.ah__card:focus-visible .ah__card-open{color:var(--accent);gap:8px}.ah__card-arrow{flex-shrink:0;transition:color var(--t-overlay),transform var(--t-overlay)}.ah__card--compact{flex-direction:row;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}.ah__card--compact .ah__card-ico{inline-size:34px;block-size:34px;margin-block-end:0;flex-shrink:0;border-radius:9px;font-size:var(--icon-md)}.ah__card-main{display:flex;flex-direction:column;gap:2px;flex:1;min-inline-size:0}.ah__card--compact .ah__card-arrow{color:var(--ink-4)}.ah__card--compact:hover:not(:disabled) .ah__card-arrow{color:var(--accent);transform:translate(2px)}:host-context([dir=rtl]) .ah__card-arrow{transform:scaleX(-1)}:host-context([dir=rtl]) .ah__sec-chev:not(.ah__sec-chev--open){transform:scaleX(-1)}:host-context([dir=rtl]) .ah__card--compact:hover:not(:disabled) .ah__card-arrow{transform:scaleX(-1) translate(2px)}.ah__sec-chev--open{transform:rotate(90deg)}@container (width <= 900px){.ah__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@media(width<=900px){.ah__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@container (width <= 560px){.ah__grid{grid-template-columns:1fr}.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}@media(width<=560px){.ah__grid{grid-template-columns:1fr}.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppHomeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fly-app-home', standalone: true, imports: [NgTemplateOutlet, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ah\">\n  <header class=\"ah__util\">\n    <button type=\"button\" class=\"ah__brand\" (click)=\"brandSelected.emit()\">\n      <span class=\"ah__brand-mark\"><ng-content select=\"[app-home-brand]\" /></span>\n      @if (brandLabelKey(); as key) {\n        <span class=\"ah__brand-name\">{{ key | translate }}</span>\n      }\n    </button>\n    <ng-content select=\"[app-home-actions]\" />\n  </header>\n\n  <main class=\"ah__main\">\n    @if (titleKey() || subtitleKey()) {\n      <section class=\"ah__hero\">\n        @if (titleKey(); as key) {\n          <h1 class=\"ah__title\">{{ key | translate }}</h1>\n        }\n        @if (subtitleKey(); as key) {\n          <p class=\"ah__sub\">{{ key | translate }}</p>\n        }\n      </section>\n    }\n\n    @for (row of rows(); track row.index) {\n      <section\n        class=\"ah__sec\"\n        [class.ah__sec--secondary]=\"row.index > 0\"\n        [attr.aria-label]=\"row.section.titleKey ? null : (modulesLabelKey() | translate)\"\n      >\n        @if (row.section.titleKey; as titleKey) {\n          @if (row.section.collapsible) {\n            <button\n              type=\"button\"\n              class=\"ah__sec-hd\"\n              (click)=\"toggle(row.index)\"\n              [attr.aria-expanded]=\"row.expanded\"\n              [attr.aria-controls]=\"sectionId(row.index)\"\n            >\n              <!-- Points end-ward when shut, down when open. `--open` wins over the RTL\n                   flip below because a downward chevron has no direction to mirror. -->\n              <svg\n                class=\"ah__sec-chev\"\n                [class.ah__sec-chev--open]=\"row.expanded\"\n                width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\n              >\n                <polyline points=\"9 6 15 12 9 18\" />\n              </svg>\n              <span class=\"ah__sec-title\">{{ titleKey | translate }}</span>\n              <span class=\"ah__sec-count\">{{ row.section.modules.length }}</span>\n              @if (row.hintKey; as hint) {\n                <span class=\"ah__sec-hint\">{{ hint | translate }}</span>\n              }\n            </button>\n          } @else {\n            <h2 class=\"ah__sec-title ah__sec-title--static\">{{ titleKey | translate }}</h2>\n          }\n        }\n\n        @if (row.expanded) {\n          <div class=\"ah__grid\" [class.ah__grid--compact]=\"row.layout === 'compact'\" [id]=\"sectionId(row.index)\">\n            @for (mod of row.section.modules; track mod.key) {\n              <button\n                type=\"button\"\n                class=\"ah__card\"\n                [class.ah__card--compact]=\"row.layout === 'compact'\"\n                [disabled]=\"mod.disabled\"\n                (click)=\"select(mod)\"\n              >\n                <span class=\"ah__card-ico\">\n                  @if (iconFor(mod.key); as tpl) {\n                    <ng-container *ngTemplateOutlet=\"tpl\" />\n                  } @else if (mod.iconClass) {\n                    <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\n                  }\n                </span>\n\n                @if (row.layout === 'compact') {\n                  <span class=\"ah__card-main\">\n                    <span class=\"ah__card-title\">{{ mod.labelKey | translate }}</span>\n                    @if (mod.descKey; as descKey) {\n                      <span class=\"ah__card-desc\">{{ descKey | translate }}</span>\n                    }\n                  </span>\n                  <svg\n                    class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\n                    stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\" aria-hidden=\"true\"\n                  >\n                    <polyline points=\"9 6 15 12 9 18\" />\n                  </svg>\n                } @else {\n                  <span class=\"ah__card-title ah__card-title--feature\">{{ mod.labelKey | translate }}</span>\n                  @if (mod.descKey; as descKey) {\n                    <span class=\"ah__card-desc ah__card-desc--feature\">{{ descKey | translate }}</span>\n                  }\n                  <span class=\"ah__card-open\">\n                    {{ 'ui.action.open' | translate }}\n                    <svg\n                      class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\n                      stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\" aria-hidden=\"true\"\n                    >\n                      <polyline points=\"9 6 15 12 9 18\" />\n                    </svg>\n                  </span>\n                }\n              </button>\n            }\n          </div>\n        }\n      </section>\n    }\n  </main>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-height:100%;container-type:inline-size}.ah{display:flex;flex-direction:column;flex:1;min-height:100%}.ah__util{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6)}.ah__brand{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0;border:0;background:none;color:var(--ink);font-family:inherit;cursor:pointer}.ah__brand:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__brand-name{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__main{flex:1;inline-size:100%;max-inline-size:1120px;margin-inline:auto;padding:56px 40px;display:flex;flex-direction:column;justify-content:center;gap:44px}.ah__hero{max-inline-size:640px}.ah__title{margin:0 0 var(--sp-3);font-size:44px;font-weight:var(--fw-semibold);letter-spacing:-.03em;text-wrap:balance;background:linear-gradient(180deg,var(--ink),var(--ink-2));-webkit-background-clip:text;background-clip:text;color:transparent}.ah__sub{margin:0;max-inline-size:560px;font-size:var(--text-lg);line-height:1.55;color:var(--ink-3);text-wrap:pretty}.ah__sec{display:flex;flex-direction:column;gap:var(--sp-4)}.ah__sec--secondary{padding-block-start:28px;border-block-start:1px solid var(--line)}.ah__sec-hd{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;color:var(--ink);text-align:start}.ah__sec-hd:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__sec-chev{flex-shrink:0;color:var(--ink-3);transition:transform var(--t-overlay)}.ah__sec-title{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__sec-title--static{margin:0;color:var(--ink-3);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}.ah__sec-count{display:inline-grid;place-items:center;min-inline-size:22px;block-size:20px;padding-inline:6px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);font-size:var(--text-2xs);font-weight:var(--fw-medium);color:var(--ink-3)}.ah__sec-hint{margin-inline-start:auto;font-size:var(--text-xs);color:var(--ink-3)}.ah__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}.ah__card{display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;text-align:start;padding:22px 22px 18px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);color:inherit;font-family:inherit;cursor:pointer;transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-overlay)}.ah__card:before{content:\"\";position:absolute;inset:0;pointer-events:none;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--t-overlay)}.ah__card:hover:not(:disabled){transform:translateY(-2px);border-color:transparent;box-shadow:var(--shadow-filter)}.ah__card:hover:not(:disabled):before{opacity:1}.ah__card:focus-visible{outline:0;border-color:transparent;box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-filter)}.ah__card:focus-visible:before{opacity:1}.ah__card:disabled{cursor:default;opacity:.5}.ah__card-ico{display:grid;place-items:center;inline-size:40px;block-size:40px;margin-block-end:18px;border-radius:11px;background:var(--bg-3);border:0;color:var(--ink);font-size:var(--icon-lg);transition:background var(--t-overlay),color var(--t-overlay)}.ah__card:hover:not(:disabled) .ah__card-ico,.ah__card:focus-visible .ah__card-ico{background:var(--grad);color:var(--ink-inverse)}.ah__card-title{font-size:var(--text-sm);font-weight:var(--fw-semibold);letter-spacing:-.01em;color:var(--ink)}.ah__card-title--feature{margin-block-end:4px;font-size:18px;letter-spacing:-.015em}.ah__card-desc{font-size:var(--text-xs);line-height:1.45;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ah__card-desc--feature{margin-block-end:18px;font-size:var(--text-sm);line-height:1.5;text-wrap:pretty;overflow:visible;white-space:normal}.ah__card-open{display:inline-flex;align-items:center;gap:4px;margin-block-start:auto;font-size:var(--text-2xs);color:var(--ink-3);transition:color var(--t-overlay),gap var(--t-overlay)}.ah__card:hover:not(:disabled) .ah__card-open,.ah__card:focus-visible .ah__card-open{color:var(--accent);gap:8px}.ah__card-arrow{flex-shrink:0;transition:color var(--t-overlay),transform var(--t-overlay)}.ah__card--compact{flex-direction:row;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}.ah__card--compact .ah__card-ico{inline-size:34px;block-size:34px;margin-block-end:0;flex-shrink:0;border-radius:9px;font-size:var(--icon-md)}.ah__card-main{display:flex;flex-direction:column;gap:2px;flex:1;min-inline-size:0}.ah__card--compact .ah__card-arrow{color:var(--ink-4)}.ah__card--compact:hover:not(:disabled) .ah__card-arrow{color:var(--accent);transform:translate(2px)}:host-context([dir=rtl]) .ah__card-arrow{transform:scaleX(-1)}:host-context([dir=rtl]) .ah__sec-chev:not(.ah__sec-chev--open){transform:scaleX(-1)}:host-context([dir=rtl]) .ah__card--compact:hover:not(:disabled) .ah__card-arrow{transform:scaleX(-1) translate(2px)}.ah__sec-chev--open{transform:rotate(90deg)}@container (width <= 900px){.ah__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@media(width<=900px){.ah__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@container (width <= 560px){.ah__grid{grid-template-columns:1fr}.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}@media(width<=560px){.ah__grid{grid-template-columns:1fr}.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}\n"] }]
+        }], propDecorators: { brandLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLabelKey", required: false }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], subtitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleKey", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], modulesLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "modulesLabelKey", required: false }] }], moduleSelected: [{ type: i0.Output, args: ["moduleSelected"] }], brandSelected: [{ type: i0.Output, args: ["brandSelected"] }], icons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FlyModuleIconDirective), { isSignal: true }] }] } });
 
 /**
  * Resolve which tab is active: the selected id when it exists in the tab set,
@@ -20947,5 +21399,5 @@ const AUDIENCE_ERROR_CODES = {
  * Generated bundle index. Do not edit.
  */
 
-export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentActionBus, AgentActionUnsupportedDispatchError, AgentCommandRegistry, AgentDropRegistry, AgentFlightAnimator, AgentLookupRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, BilingualFieldComponent, CRON_MODES, CRON_WEEKDAYS, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DS_BASELINE_LOCALES, DashboardKpiComponent, DialogResult, EntityLookupComponent, FLYOS_LAUNCH_EVENT, FLYOS_LAUNCH_REQUEST_EVENT, FLYOS_REMOTE_ROUTE_EVENT, FLY_ACCENT_PROPERTY, FLY_ADMIN_ROLES, FLY_CHUNK_RELOAD_FLAG, FLY_COMPACT_THRESHOLD, FLY_COUNTRIES, FLY_EMOJI_BY_ID, FLY_EMOJI_CATEGORIES, FLY_EMOJI_CATEGORY_BY_ID, FLY_EMOJI_DEFAULT_CATEGORIES, FLY_EMOJI_PACK, FLY_EMOJI_PACK_MISSING_MESSAGE, FLY_EMOJI_PREVIEW_COUNT, FLY_EMPTY_VALUE, FLY_LOCALE_CATALOG, FLY_NF_CACHE_HEAL_FLAG, FLY_RELOAD_DEBOUNCE_MS, FLY_REMOTE_BASE_PATH, FLY_REMOTE_CONTEXT_EVENT, FLY_REMOTE_CONTEXT_STORE_KEY, FLY_REMOTE_ROUTES, FLY_SEARCH_DEBOUNCE_MS, FLY_SKIN_TONES, FLY_STANDALONE_AUTH_CONFIG, FLY_THEME_MODE_IDS, FLY_WINDOW_HELP_HINT_EVENT, FLY_WINDOW_PAGE_TITLE_EVENT, FlyAchievementProgressComponent, FlyActionMenuComponent, FlyActionStackComponent, FlyAgentDraggableDirective, FlyAnimatedEmojiComponent, FlyAppTopbarComponent, FlyAuthLiveRefresh, FlyBadgeWallComponent, FlyBlockUiComponent, FlyBreadcrumbComponent, FlyButtonComponent, FlyBytesPipe, FlyCaptchaComponent, FlyCardActionsComponent, FlyCardBodyComponent, FlyCardComponent, FlyCardFooterComponent, FlyCardGridComponent, FlyCardMediaComponent, FlyCardMetaComponent, FlyCardStatusComponent, FlyCardTitleComponent, FlyCellDirective, FlyCheckboxComponent, FlyChipComponent, FlyChunkReloadErrorHandler, FlyClickOutsideDirective, FlyCollapsibleComponent, FlyCommentThreadComponent, FlyCompactNumberPipe, FlyConfirmDialogComponent, FlyControlDirective, FlyCronBuilderComponent, FlyDataTableComponent, FlyDatePipe, FlyDateTimePipe, FlyDebouncer, FlyDecimalNumberPipe, FlyDrawerComponent, FlyDurationPipe, FlyDynamicFormComponent, FlyEmojiPickerComponent, FlyFieldComponent, FlyFileUploadComponent, FlyFilterPanelComponent, FlyFormBannerComponent, FlyFormFooterComponent, FlyFormGridComponent, FlyFormSectionComponent, FlyFullNumberPipe, FlyGanttComponent, FlyHubClient, FlyIconButtonComponent, FlyIfAdminDirective, FlyIfRoleDirective, FlyImageUploadComponent, FlyLeaderboardComponent, FlyMetaListComponent, FlyModalComponent, FlyModerationQueueComponent, FlyModuleIconDirective, FlyPaginationComponent, FlyPeoplePickerComponent, FlyPointsTierComponent, FlyProgressComponent, FlyRelativeTimePipe, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySearchInputComponent, FlySectionHeaderComponent, FlySecureSrcDirective, FlySegmentedComponent, FlySelectComponent, FlySkeletonComponent, FlySliderComponent, FlySparklineComponent, FlySpinnerComponent, FlyStandaloneAuthCallbackComponent, FlyStandaloneAuthService, FlyStateMessageComponent, FlyDynamicFormComponent as FlySurveyFormComponent, FlyTabComponent, FlyTabsComponent, FlyTagsInputComponent, FlyThemeService, FlyTimePipe, FlyToastService, FlyToggleComponent, FlyTooltipDirective, FlyTreeNavComponent, FlyTypeaheadComponent, FlyWindowHelpService, FlyWindowTitleService, FlyosPendingLaunchesGlobalKey, FlyosShellHandlesLaunchRequestsGlobalKey, FlyosShellOwnsHistoryGlobalKey, GANTT_ZOOMS, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, OverlayStack, PRESENCE_COLORS, PageHeaderComponent, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, STATE_DEFAULT_ICONS, STATE_DEFAULT_MESSAGE_KEYS, STEP_UP_CODE, STEP_UP_REAUTH_HANDLER, STEP_UP_RETURN_KEY, SUPPORTED_AGENT_PAYLOAD_VERSIONS, SharePanelComponent, SourceAppResolver, StandaloneWindowManagerService, StatusBadgeComponent, StepUpService, ToastHostComponent, TranslatePipe, WINDOW_DATA, WINDOW_HELP_HINT, WindowManagerService, applySkinTone, applySuggestion, ariaSort, buildCron, canConfirm, canGoNext, canGoPrev, captureFocus, clampPage, clampSliderValue, connectRemoteLaunch, enterActivatesNatively, filterGroup, filterSuggestions, findLocaleByDialect, findLocaleByPrefix, firstEnabledIndex, firstModuleIndex, flattenModules, flyAdminGuard, flyCaptchaBase64Utf8, flyCaptchaBuildToken, flyCaptchaSha256Hex, flyCompactNumber, flyDebounced, flyDecimalNumber, flyDownloadBlob, flyDuration, flyEmojiFor, flyEmojiIsTonable, flyEmojiPackUrl, flyExportFileName, flyFirstEnabledIndex, flyFormatBytes, flyFormatDate, flyFormatDateTime, flyFormatTime, flyFullNumber, flyNextEnabledIndex, flyNextSegmentIndex, flyRelativeTime, flyResolveActiveTab, flyRoleGuard, flySignedCompact, flySkinToneLabelKey, flyStandaloneAuthGuard, flyStandaloneAuthInterceptor, flyToDateOnly, hasAnyRoleIn, healNativeFederationCacheOnce, isAccentColor, isChunkLoadError, isFlyAuthStorePopulated, isNativeFederationCacheError, isRtlLocale, isRtlLocaleEntry, isValidCron, isValidSingleField, loadRemoteStyles, matchFlyRoutePattern, nextEnabledIndex, nextModuleIndex, nextSegmentIndex, nextSort, normalizeFlyTheme, normalizeRoles, overlayStack, parseCron, parseStepUpChallenge, parseTags, presenceColorFor, printConsoleSecurityWarning, provideFlyChunkReloadRecovery, provideFlyEmojiPack, provideFlyStandaloneAuth, reloadOnceForChunkError, requestAppLaunch, resolveActiveModule, resolveActiveTab, resolveCellValue, resolveStateIcon, resolveStateMessageKey, restoreFocus, sameTags, sliderTrackGradient, sparklinePath, sparklinePoints, stepUpInterceptor, stepUpReturnKey, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload, warnIfEmbeddedSessionMissing };
+export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentActionBus, AgentActionUnsupportedDispatchError, AgentCommandRegistry, AgentDropRegistry, AgentFlightAnimator, AgentLookupRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, BilingualFieldComponent, CRON_MODES, CRON_WEEKDAYS, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DS_BASELINE_LOCALES, DashboardKpiComponent, DialogResult, EntityLookupComponent, FLYOS_LAUNCH_EVENT, FLYOS_LAUNCH_REQUEST_EVENT, FLYOS_REMOTE_ROUTE_EVENT, FLY_ACCENT_PROPERTY, FLY_ADMIN_ROLES, FLY_CHUNK_RELOAD_FLAG, FLY_COMPACT_THRESHOLD, FLY_COUNTRIES, FLY_EMOJI_BY_ID, FLY_EMOJI_CATEGORIES, FLY_EMOJI_CATEGORY_BY_ID, FLY_EMOJI_DEFAULT_CATEGORIES, FLY_EMOJI_PACK, FLY_EMOJI_PACK_MISSING_MESSAGE, FLY_EMOJI_PREVIEW_COUNT, FLY_EMPTY_VALUE, FLY_LOCALE_CATALOG, FLY_NF_CACHE_HEAL_FLAG, FLY_RELOAD_DEBOUNCE_MS, FLY_REMOTE_BASE_PATH, FLY_REMOTE_CONTEXT_EVENT, FLY_REMOTE_CONTEXT_STORE_KEY, FLY_REMOTE_ROUTES, FLY_SEARCH_DEBOUNCE_MS, FLY_SKIN_TONES, FLY_STANDALONE_AUTH_CONFIG, FLY_THEME_MODE_IDS, FLY_WINDOW_HELP_HINT_EVENT, FLY_WINDOW_PAGE_TITLE_EVENT, FlyAchievementProgressComponent, FlyActionMenuComponent, FlyActionStackComponent, FlyAgentDraggableDirective, FlyAnimatedEmojiComponent, FlyAppHomeComponent, FlyAppTopbarComponent, FlyAuthLiveRefresh, FlyBadgeWallComponent, FlyBlockUiComponent, FlyBreadcrumbComponent, FlyButtonComponent, FlyBytesPipe, FlyCaptchaComponent, FlyCardActionsComponent, FlyCardBodyComponent, FlyCardComponent, FlyCardFooterComponent, FlyCardGridComponent, FlyCardMediaComponent, FlyCardMetaComponent, FlyCardStatusComponent, FlyCardTitleComponent, FlyCellDirective, FlyCheckboxComponent, FlyChipComponent, FlyChunkReloadErrorHandler, FlyClickOutsideDirective, FlyCollapsibleComponent, FlyCommentThreadComponent, FlyCompactNumberPipe, FlyConfirmDialogComponent, FlyControlDirective, FlyCronBuilderComponent, FlyDataTableComponent, FlyDatePipe, FlyDateTimePipe, FlyDebouncer, FlyDecimalNumberPipe, FlyDetailCardComponent, FlyDetailShellComponent, FlyDrawerComponent, FlyDurationPipe, FlyDynamicFormComponent, FlyEmojiPickerComponent, FlyFieldComponent, FlyFileUploadComponent, FlyFilterPanelComponent, FlyFormBannerComponent, FlyFormFooterComponent, FlyFormGridComponent, FlyFormSectionComponent, FlyFullNumberPipe, FlyGanttComponent, FlyHubClient, FlyIconButtonComponent, FlyIfAdminDirective, FlyIfRoleDirective, FlyImageUploadComponent, FlyLeaderboardComponent, FlyMetaListComponent, FlyModalComponent, FlyModerationQueueComponent, FlyModuleIconDirective, FlyPaginationComponent, FlyPeoplePickerComponent, FlyPointsTierComponent, FlyProgressComponent, FlyRelativeTimePipe, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySearchInputComponent, FlySectionHeaderComponent, FlySecureSrcDirective, FlySegmentedComponent, FlySelectComponent, FlySkeletonComponent, FlySliderComponent, FlySparklineComponent, FlySpinnerComponent, FlyStandaloneAuthCallbackComponent, FlyStandaloneAuthService, FlyStateMessageComponent, FlyDynamicFormComponent as FlySurveyFormComponent, FlyTabComponent, FlyTabsComponent, FlyTagsInputComponent, FlyThemeService, FlyTimePipe, FlyToastService, FlyToggleComponent, FlyTooltipDirective, FlyTreeNavComponent, FlyTypeaheadComponent, FlyWindowHelpService, FlyWindowTitleService, FlyosPendingLaunchesGlobalKey, FlyosShellHandlesLaunchRequestsGlobalKey, FlyosShellOwnsHistoryGlobalKey, GANTT_ZOOMS, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, OverlayStack, PRESENCE_COLORS, PageHeaderComponent, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, STATE_DEFAULT_ICONS, STATE_DEFAULT_MESSAGE_KEYS, STEP_UP_CODE, STEP_UP_REAUTH_HANDLER, STEP_UP_RETURN_KEY, SUPPORTED_AGENT_PAYLOAD_VERSIONS, SharePanelComponent, SourceAppResolver, StandaloneWindowManagerService, StatusBadgeComponent, StepUpService, ToastHostComponent, TranslatePipe, WINDOW_DATA, WINDOW_HELP_HINT, WindowManagerService, applySkinTone, applySuggestion, ariaSort, buildCron, canConfirm, canGoNext, canGoPrev, captureFocus, clampPage, clampSliderValue, connectRemoteLaunch, enterActivatesNatively, filterGroup, filterSuggestions, findLocaleByDialect, findLocaleByPrefix, firstEnabledIndex, firstModuleIndex, flattenModules, flyAdminGuard, flyCaptchaBase64Utf8, flyCaptchaBuildToken, flyCaptchaSha256Hex, flyCompactNumber, flyDebounced, flyDecimalNumber, flyDownloadBlob, flyDuration, flyEmojiFor, flyEmojiIsTonable, flyEmojiPackUrl, flyExportFileName, flyFirstEnabledIndex, flyFormatBytes, flyFormatDate, flyFormatDateTime, flyFormatTime, flyFullNumber, flyNextEnabledIndex, flyNextSegmentIndex, flyRelativeTime, flyResolveActiveTab, flyRoleGuard, flySignedCompact, flySkinToneLabelKey, flyStandaloneAuthGuard, flyStandaloneAuthInterceptor, flyToDateOnly, hasAnyRoleIn, healNativeFederationCacheOnce, initialExpanded, isAccentColor, isChunkLoadError, isFlyAuthStorePopulated, isNativeFederationCacheError, isRtlLocale, isRtlLocaleEntry, isValidCron, isValidSingleField, loadRemoteStyles, matchFlyRoutePattern, nextEnabledIndex, nextModuleIndex, nextSegmentIndex, nextSort, normalizeFlyTheme, normalizeRoles, overlayStack, parseCron, parseStepUpChallenge, parseTags, presenceColorFor, printConsoleSecurityWarning, provideFlyChunkReloadRecovery, provideFlyEmojiPack, provideFlyStandaloneAuth, reloadOnceForChunkError, requestAppLaunch, resolveActiveModule, resolveActiveSection, resolveActiveTab, resolveCellValue, resolveStateIcon, resolveStateMessageKey, restoreFocus, sameTags, sectionHintKey, sectionLayout, sliderTrackGradient, sparklinePath, sparklinePoints, stepUpInterceptor, stepUpReturnKey, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload, warnIfEmbeddedSessionMissing };
 //# sourceMappingURL=flyos-design-system.mjs.map