@flyos/design-system 3.2.0 → 3.4.0

package/fesm2022/flyos-design-system.mjs

@@ -47,7 +47,7 @@ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 // 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 = '3.2.0';
+const FLY_DS_VERSION = '3.4.0';
 const FLY_DS_REGISTRY_KEY = '__FLY_DS_INSTANCES__';
 /**
  * Records this design-system instance on the shared `scope` and returns the
@@ -1680,6 +1680,9 @@ const DS_BASELINE_LOCALES = {
         'ui.nav.selectModule': 'Select a module',
         'ui.nav.sections': 'Sections',
         'ui.nav.switchModule': 'Switch module',
+        'ui.pager.next': 'Next page',
+        'ui.pager.page': 'Page {{page}}',
+        'ui.pager.previous': 'Previous page',
         'ui.pagination.first': 'First page',
         'ui.pagination.label': 'Pagination',
         'ui.pagination.last': 'Last page',
@@ -2070,6 +2073,9 @@ const DS_BASELINE_LOCALES = {
         'ui.nav.selectModule': 'اختر وحدة',
         'ui.nav.sections': 'الأقسام',
         'ui.nav.switchModule': 'تبديل الوحدة',
+        'ui.pager.next': 'الصفحة التالية',
+        'ui.pager.page': 'الصفحة {{page}}',
+        'ui.pager.previous': 'الصفحة السابقة',
         'ui.pagination.first': 'الصفحة الأولى',
         'ui.pagination.label': 'تقسيم الصفحات',
         'ui.pagination.last': 'الصفحة الأخيرة',
@@ -2460,6 +2466,9 @@ const DS_BASELINE_LOCALES = {
         'ui.nav.selectModule': 'Choisir un module',
         'ui.nav.sections': 'Sections',
         'ui.nav.switchModule': 'Changer de module',
+        'ui.pager.next': 'Page suivante',
+        'ui.pager.page': 'Page {{page}}',
+        'ui.pager.previous': 'Page précédente',
         'ui.pagination.first': 'Première page',
         'ui.pagination.label': 'Pagination',
         'ui.pagination.last': 'Dernière page',
@@ -2849,6 +2858,9 @@ const DS_BASELINE_LOCALES = {
         'ui.nav.selectModule': 'ماڈیول منتخب کریں',
         'ui.nav.sections': 'حصے',
         'ui.nav.switchModule': 'ماڈیول تبدیل کریں',
+        'ui.pager.next': 'اگلا صفحہ',
+        'ui.pager.page': 'صفحہ {{page}}',
+        'ui.pager.previous': 'پچھلا صفحہ',
         'ui.pagination.first': 'پہلا صفحہ',
         'ui.pagination.label': 'صفحہ بندی',
         'ui.pagination.last': 'آخری صفحہ',
@@ -4008,12 +4020,12 @@ function connectRemoteLaunch(opts) {
 const FLY_REMOTE_CONTEXT_STORE_KEY = '__flyRemoteContext__';
 const FLY_REMOTE_CONTEXT_EVENT = 'fly:remote-context';
 /** The single cross-bundle store, lazily created on `globalThis`. */
-function store$1() {
+function store$2() {
     const g = globalThis;
     return (g[FLY_REMOTE_CONTEXT_STORE_KEY] ??= {});
 }
 /** Notify every federated copy of the service that the store changed. */
-function emitSync$1() {
+function emitSync$2() {
     const g = globalThis;
     try {
         g.dispatchEvent?.(new Event(FLY_REMOTE_CONTEXT_EVENT));
@@ -4070,33 +4082,33 @@ function toMap(s) {
  * dispatch is ever needed.
  */
 class FlyRemoteContextService {
-    _byApp = signal(toMap(store$1()), ...(ngDevMode ? [{ debugName: "_byApp" }] : /* istanbul ignore next */ []));
+    _byApp = signal(toMap(store$2()), ...(ngDevMode ? [{ debugName: "_byApp" }] : /* istanbul ignore next */ []));
     /** All currently-published contexts, keyed by app id. Reactive. */
     contexts = this._byApp.asReadonly();
     constructor() {
         // Keep this instance's reactive mirror current when ANOTHER federated copy of
         // the service — or a remote writing the store slot directly — mutates it.
         const g = globalThis;
-        g.addEventListener?.(FLY_REMOTE_CONTEXT_EVENT, () => this._byApp.set(toMap(store$1())));
+        g.addEventListener?.(FLY_REMOTE_CONTEXT_EVENT, () => this._byApp.set(toMap(store$2())));
     }
     /** Publish (or replace) the active route context for an app. */
     publish(ctx) {
-        store$1()[ctx.appId] = ctx;
-        this._byApp.set(toMap(store$1()));
-        emitSync$1();
+        store$2()[ctx.appId] = ctx;
+        this._byApp.set(toMap(store$2()));
+        emitSync$2();
     }
     /** Drop an app's context (remote unmounted / window closed). No-op if absent. */
     clear(appId) {
-        const s = store$1();
+        const s = store$2();
         if (!(appId in s))
             return;
         delete s[appId];
         this._byApp.set(toMap(s));
-        emitSync$1();
+        emitSync$2();
     }
     /** Current context for an app, or `null` when nothing is published. */
     context(appId) {
-        return store$1()[appId] ?? null;
+        return store$2()[appId] ?? null;
     }
     /**
      * Resolve a single route param for an app, e.g. `param('circles', 'id')`.
@@ -4104,7 +4116,7 @@ class FlyRemoteContextService {
      * the caller then degrades (the skill asks for the missing id).
      */
     param(appId, path) {
-        const value = store$1()[appId]?.params[path];
+        const value = store$2()[appId]?.params[path];
         return value != null && value !== '' ? value : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyRemoteContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -6177,6 +6189,24 @@ class FlyClickOutsideDirective {
      * Defaults to always-on for an always-mounted consumer.
      */
     enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), alias: 'flyClickOutsideEnabled' });
+    /**
+     * Extra element(s) that count as INSIDE even though they are not in the host —
+     * the escape hatch for a popover whose TRIGGER cannot be wrapped by the host.
+     *
+     * The docblock's canonical shape puts the host around trigger and panel both, and
+     * that is still the right answer whenever it is available. It is not always: a
+     * panel anchored to a control in the desktop shell's chrome (a magic-bar filter
+     * toggle) has its trigger in another component, another stacking context and
+     * another bundle. Left unlisted, the trigger reads as outside, and because this
+     * directive fires on `pointerdown` — strictly BEFORE the trigger's own `click` —
+     * pressing an open panel's own toggle dismisses it and the toggle then reopens it.
+     * The panel appears not to close at all, which reads as this directive being
+     * broken rather than as an ordering problem.
+     *
+     * A single element or an array; `null`/empty (the default) keeps the host-only
+     * behaviour byte-for-byte.
+     */
+    ignore = input(null, { ...(ngDevMode ? { debugName: "ignore" } : /* istanbul ignore next */ {}), alias: 'flyClickOutsideIgnore' });
     /** Emitted once when a pointer press lands outside the host while enabled. */
     flyClickOutside = output();
     // `pointerdown` (not `click`): fires at the very start of the gesture — before focus
@@ -6192,14 +6222,18 @@ class FlyClickOutsideDirective {
         // even if the target detaches mid-handler (a menu item that removes its own row),
         // and it pierces shadow roots. Fall back to `contains` for any UA without it.
         const path = event.composedPath?.();
-        const inside = path && path.length
-            ? path.includes(host)
-            : host.contains(event.target);
-        if (!inside)
-            this.flyClickOutside.emit();
+        const target = event.target;
+        const within = (el) => !!el && (path && path.length ? path.includes(el) : el.contains(target));
+        if (within(host))
+            return;
+        const ignore = this.ignore();
+        const extras = ignore === null ? [] : Array.isArray(ignore) ? ignore : [ignore];
+        if (extras.some(within))
+            return;
+        this.flyClickOutside.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: FlyClickOutsideDirective, isStandalone: true, selector: "[flyClickOutside]", inputs: { enabled: { classPropertyName: "enabled", publicName: "flyClickOutsideEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { flyClickOutside: "flyClickOutside" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: FlyClickOutsideDirective, isStandalone: true, selector: "[flyClickOutside]", inputs: { enabled: { classPropertyName: "enabled", publicName: "flyClickOutsideEnabled", isSignal: true, isRequired: false, transformFunction: null }, ignore: { classPropertyName: "ignore", publicName: "flyClickOutsideIgnore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { flyClickOutside: "flyClickOutside" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyClickOutsideDirective, decorators: [{
             type: Directive,
@@ -6207,7 +6241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     selector: '[flyClickOutside]',
                     standalone: true,
                 }]
-        }], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "flyClickOutsideEnabled", required: false }] }], flyClickOutside: [{ type: i0.Output, args: ["flyClickOutside"] }], onDocumentPointerDown: [{
+        }], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "flyClickOutsideEnabled", required: false }] }], ignore: [{ type: i0.Input, args: [{ isSignal: true, alias: "flyClickOutsideIgnore", required: false }] }], flyClickOutside: [{ type: i0.Output, args: ["flyClickOutside"] }], onDocumentPointerDown: [{
                 type: HostListener,
                 args: ['document:pointerdown', ['$event']]
             }] } });
@@ -7857,7 +7891,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:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){:host{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}:host:before,:host:after{display:none}}@media(prefers-contrast:more){:host{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){:host:after{animation:none}}:host{--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;border-radius:8px;border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-emoji-picker__tone-menu{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-emoji-picker__tone-menu:before,.fly-emoji-picker__tone-menu:after{display:none}}@media(prefers-contrast:more){.fly-emoji-picker__tone-menu{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-emoji-picker__tone-menu:after{animation:none}}.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 });
+    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:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){:host{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}:host:before,:host:after{display:none}}@media(prefers-contrast:more){:host{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){:host:after{animation:none}}:host{--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;border-radius:8px;border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-emoji-picker__tone-menu{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-emoji-picker__tone-menu:before,.fly-emoji-picker__tone-menu:after{display:none}}@media(prefers-contrast:more){.fly-emoji-picker__tone-menu{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-emoji-picker__tone-menu:after{animation:none}}.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", "flyClickOutsideIgnore"], 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,
@@ -9949,15 +9983,144 @@ class FlyBreadcrumbComponent {
         this.navigate.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyBreadcrumbComponent, isStandalone: true, selector: "fly-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hasCurrentPage: { classPropertyName: "hasCurrentPage", publicName: "hasCurrentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, host: { properties: { "attr.dir": "i18n.direction()" } }, ngImport: i0, template: "<!--\r\n  The CURRENT-PAGE crumb is ALWAYS plain text with aria-current=\"page\" \u2014 never an <a>\r\n  or <button>, even when it carries an href. With [hasCurrentPage]=\"false\" the trail\r\n  lists ancestors only, so no crumb is the current page and every one stays a link.\r\n  The separator is decorative (aria-hidden) and drawn as a CSS mask so it mirrors\r\n  under RTL with no directional glyph baked in.\r\n-->\r\n<nav class=\"fly-breadcrumb\" [attr.aria-label]=\"resolvedAriaLabel()\">\r\n  <ol class=\"fly-breadcrumb__list\">\r\n    @for (entry of renderItems(); track entry.kind === 'item' ? entry.item.id : 'overflow'; let i = $index) {\r\n      @if (i > 0) {\r\n        <li class=\"fly-breadcrumb__separator\" aria-hidden=\"true\"></li>\r\n      }\r\n      @if (entry.kind === 'overflow') {\r\n        <li class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--overflow\">\u2026</li>\r\n      } @else if (entry.isCurrent) {\r\n        <li class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--current\" aria-current=\"page\">\r\n          {{ entry.item.label }}\r\n        </li>\r\n      } @else {\r\n        <li class=\"fly-breadcrumb__crumb\">\r\n          @if (entry.item.href) {\r\n            <a class=\"fly-breadcrumb__link\" [attr.href]=\"entry.item.href\"\r\n               (click)=\"onActivate(entry.item)\">{{ entry.item.label }}</a>\r\n          } @else {\r\n            <button type=\"button\" class=\"fly-breadcrumb__link fly-breadcrumb__link--button\"\r\n                    (click)=\"onActivate(entry.item)\">{{ entry.item.label }}</button>\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  </ol>\r\n</nav>\r\n", styles: [":host{display:block;min-inline-size:0}.fly-breadcrumb{min-inline-size:0}.fly-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;min-inline-size:0}.fly-breadcrumb__crumb{display:flex;align-items:center;min-inline-size:0;font-size:12.5px;line-height:1.4}.fly-breadcrumb__crumb--current{color:var(--text-color);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-breadcrumb__crumb--overflow{color:var(--text-color-secondary);-webkit-user-select:none;user-select:none}.fly-breadcrumb__link{display:inline-flex;align-items:center;block-size:26px;padding-inline:8px;margin:0;border:0;border-radius:8px;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:12.5px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;max-inline-size:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background var(--t-state),color var(--t-state)}.fly-breadcrumb__link:hover{background:var(--w08);color:var(--text-color)}.fly-breadcrumb__link:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.fly-breadcrumb__link--button{display:inline-flex}.fly-breadcrumb__separator{flex:0 0 auto;inline-size:7px;block-size:7px;border-block-start:1.5px solid var(--w28);border-inline-end:1.5px solid var(--w28);transform:rotate(45deg)}:host([dir=rtl]) .fly-breadcrumb__separator{transform:rotate(-135deg)}@media(forced-colors:active){.fly-breadcrumb__separator{border-color:CanvasText}.fly-breadcrumb__link:focus-visible{outline-color:Highlight}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyBreadcrumbComponent, isStandalone: true, selector: "fly-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hasCurrentPage: { classPropertyName: "hasCurrentPage", publicName: "hasCurrentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, host: { properties: { "attr.dir": "i18n.direction()" } }, ngImport: i0, template: "<!--\r\n  The CURRENT-PAGE crumb is ALWAYS plain text with aria-current=\"page\" \u2014 never an <a>\r\n  or <button>, even when it carries an href. With [hasCurrentPage]=\"false\" the trail\r\n  lists ancestors only, so no crumb is the current page and every one stays a link.\r\n  The separator is decorative (aria-hidden) and drawn as a CSS mask so it mirrors\r\n  under RTL with no directional glyph baked in.\r\n-->\r\n<nav class=\"fly-breadcrumb\" [attr.aria-label]=\"resolvedAriaLabel()\">\r\n  @for (entry of renderItems(); track entry.kind === 'item' ? entry.item.id : 'overflow'; let i = $index) {\r\n    @if (i > 0) {\r\n      <svg class=\"fly-breadcrumb__separator\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n           stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n           aria-hidden=\"true\">\r\n        <path d=\"M9 5l7 7-7 7\" />\r\n      </svg>\r\n    }\r\n    @if (entry.kind === 'overflow') {\r\n      <span class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--overflow\">\u2026</span>\r\n    } @else if (entry.isCurrent) {\r\n      <span class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--current\" aria-current=\"page\">\r\n        @if (entry.item.iconPath; as d) {\r\n          <svg class=\"fly-breadcrumb__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n               aria-hidden=\"true\"><path [attr.d]=\"d\" /></svg>\r\n        }\r\n        {{ entry.item.label }}\r\n      </span>\r\n    } @else {\r\n      <span class=\"fly-breadcrumb__crumb\">\r\n        @if (entry.item.href) {\r\n          <a class=\"fly-breadcrumb__link\" [attr.href]=\"entry.item.href\"\r\n             (click)=\"onActivate(entry.item)\">\r\n            @if (entry.item.iconPath; as d) {\r\n              <svg class=\"fly-breadcrumb__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                   stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                   aria-hidden=\"true\"><path [attr.d]=\"d\" /></svg>\r\n            }\r\n            {{ entry.item.label }}\r\n          </a>\r\n        } @else {\r\n          <button type=\"button\" class=\"fly-breadcrumb__link fly-breadcrumb__link--button\"\r\n                  (click)=\"onActivate(entry.item)\">\r\n            @if (entry.item.iconPath; as d) {\r\n              <svg class=\"fly-breadcrumb__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                   stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                   aria-hidden=\"true\"><path [attr.d]=\"d\" /></svg>\r\n            }\r\n            {{ entry.item.label }}\r\n          </button>\r\n        }\r\n      </span>\r\n    }\r\n  }\r\n</nav>\r\n", styles: [":host{display:block;min-inline-size:0}.fly-breadcrumb{display:flex;align-items:center;gap:2px;min-inline-size:0}.fly-breadcrumb__crumb{display:flex;align-items:center;flex:none;min-inline-size:0;font-size:12.5px;line-height:1.4}.fly-breadcrumb__crumb--current{flex:1 1 auto;min-inline-size:0;gap:6px;block-size:26px;padding-inline:4px;font-weight:600;letter-spacing:-.006em;color:var(--text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=rtl]) .fly-breadcrumb__crumb--current{letter-spacing:normal}.fly-breadcrumb__crumb--overflow{color:var(--text-color-secondary);-webkit-user-select:none;user-select:none}.fly-breadcrumb__link{display:inline-flex;align-items:center;gap:6px;block-size:26px;padding-inline:8px;margin:0;border:0;border-radius:8px;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:12.5px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;max-inline-size:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.fly-breadcrumb__link:hover{background:var(--w08);color:var(--text-color)}.fly-breadcrumb__link:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.fly-breadcrumb__link--button{display:inline-flex}.fly-breadcrumb__icon{flex:none}.fly-breadcrumb__separator{flex:none;color:var(--w28)}:host([dir=rtl]) .fly-breadcrumb__separator{transform:scaleX(-1)}@media(forced-colors:active){.fly-breadcrumb__separator{color:CanvasText}.fly-breadcrumb__link:focus-visible{outline-color:Highlight}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fly-breadcrumb', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.dir]': 'i18n.direction()',
-                    }, template: "<!--\r\n  The CURRENT-PAGE crumb is ALWAYS plain text with aria-current=\"page\" \u2014 never an <a>\r\n  or <button>, even when it carries an href. With [hasCurrentPage]=\"false\" the trail\r\n  lists ancestors only, so no crumb is the current page and every one stays a link.\r\n  The separator is decorative (aria-hidden) and drawn as a CSS mask so it mirrors\r\n  under RTL with no directional glyph baked in.\r\n-->\r\n<nav class=\"fly-breadcrumb\" [attr.aria-label]=\"resolvedAriaLabel()\">\r\n  <ol class=\"fly-breadcrumb__list\">\r\n    @for (entry of renderItems(); track entry.kind === 'item' ? entry.item.id : 'overflow'; let i = $index) {\r\n      @if (i > 0) {\r\n        <li class=\"fly-breadcrumb__separator\" aria-hidden=\"true\"></li>\r\n      }\r\n      @if (entry.kind === 'overflow') {\r\n        <li class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--overflow\">\u2026</li>\r\n      } @else if (entry.isCurrent) {\r\n        <li class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--current\" aria-current=\"page\">\r\n          {{ entry.item.label }}\r\n        </li>\r\n      } @else {\r\n        <li class=\"fly-breadcrumb__crumb\">\r\n          @if (entry.item.href) {\r\n            <a class=\"fly-breadcrumb__link\" [attr.href]=\"entry.item.href\"\r\n               (click)=\"onActivate(entry.item)\">{{ entry.item.label }}</a>\r\n          } @else {\r\n            <button type=\"button\" class=\"fly-breadcrumb__link fly-breadcrumb__link--button\"\r\n                    (click)=\"onActivate(entry.item)\">{{ entry.item.label }}</button>\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  </ol>\r\n</nav>\r\n", styles: [":host{display:block;min-inline-size:0}.fly-breadcrumb{min-inline-size:0}.fly-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;min-inline-size:0}.fly-breadcrumb__crumb{display:flex;align-items:center;min-inline-size:0;font-size:12.5px;line-height:1.4}.fly-breadcrumb__crumb--current{color:var(--text-color);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-breadcrumb__crumb--overflow{color:var(--text-color-secondary);-webkit-user-select:none;user-select:none}.fly-breadcrumb__link{display:inline-flex;align-items:center;block-size:26px;padding-inline:8px;margin:0;border:0;border-radius:8px;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:12.5px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;max-inline-size:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background var(--t-state),color var(--t-state)}.fly-breadcrumb__link:hover{background:var(--w08);color:var(--text-color)}.fly-breadcrumb__link:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.fly-breadcrumb__link--button{display:inline-flex}.fly-breadcrumb__separator{flex:0 0 auto;inline-size:7px;block-size:7px;border-block-start:1.5px solid var(--w28);border-inline-end:1.5px solid var(--w28);transform:rotate(45deg)}:host([dir=rtl]) .fly-breadcrumb__separator{transform:rotate(-135deg)}@media(forced-colors:active){.fly-breadcrumb__separator{border-color:CanvasText}.fly-breadcrumb__link:focus-visible{outline-color:Highlight}}\n"] }]
+                    }, template: "<!--\r\n  The CURRENT-PAGE crumb is ALWAYS plain text with aria-current=\"page\" \u2014 never an <a>\r\n  or <button>, even when it carries an href. With [hasCurrentPage]=\"false\" the trail\r\n  lists ancestors only, so no crumb is the current page and every one stays a link.\r\n  The separator is decorative (aria-hidden) and drawn as a CSS mask so it mirrors\r\n  under RTL with no directional glyph baked in.\r\n-->\r\n<nav class=\"fly-breadcrumb\" [attr.aria-label]=\"resolvedAriaLabel()\">\r\n  @for (entry of renderItems(); track entry.kind === 'item' ? entry.item.id : 'overflow'; let i = $index) {\r\n    @if (i > 0) {\r\n      <svg class=\"fly-breadcrumb__separator\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n           stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n           aria-hidden=\"true\">\r\n        <path d=\"M9 5l7 7-7 7\" />\r\n      </svg>\r\n    }\r\n    @if (entry.kind === 'overflow') {\r\n      <span class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--overflow\">\u2026</span>\r\n    } @else if (entry.isCurrent) {\r\n      <span class=\"fly-breadcrumb__crumb fly-breadcrumb__crumb--current\" aria-current=\"page\">\r\n        @if (entry.item.iconPath; as d) {\r\n          <svg class=\"fly-breadcrumb__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n               aria-hidden=\"true\"><path [attr.d]=\"d\" /></svg>\r\n        }\r\n        {{ entry.item.label }}\r\n      </span>\r\n    } @else {\r\n      <span class=\"fly-breadcrumb__crumb\">\r\n        @if (entry.item.href) {\r\n          <a class=\"fly-breadcrumb__link\" [attr.href]=\"entry.item.href\"\r\n             (click)=\"onActivate(entry.item)\">\r\n            @if (entry.item.iconPath; as d) {\r\n              <svg class=\"fly-breadcrumb__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                   stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                   aria-hidden=\"true\"><path [attr.d]=\"d\" /></svg>\r\n            }\r\n            {{ entry.item.label }}\r\n          </a>\r\n        } @else {\r\n          <button type=\"button\" class=\"fly-breadcrumb__link fly-breadcrumb__link--button\"\r\n                  (click)=\"onActivate(entry.item)\">\r\n            @if (entry.item.iconPath; as d) {\r\n              <svg class=\"fly-breadcrumb__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                   stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                   aria-hidden=\"true\"><path [attr.d]=\"d\" /></svg>\r\n            }\r\n            {{ entry.item.label }}\r\n          </button>\r\n        }\r\n      </span>\r\n    }\r\n  }\r\n</nav>\r\n", styles: [":host{display:block;min-inline-size:0}.fly-breadcrumb{display:flex;align-items:center;gap:2px;min-inline-size:0}.fly-breadcrumb__crumb{display:flex;align-items:center;flex:none;min-inline-size:0;font-size:12.5px;line-height:1.4}.fly-breadcrumb__crumb--current{flex:1 1 auto;min-inline-size:0;gap:6px;block-size:26px;padding-inline:4px;font-weight:600;letter-spacing:-.006em;color:var(--text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=rtl]) .fly-breadcrumb__crumb--current{letter-spacing:normal}.fly-breadcrumb__crumb--overflow{color:var(--text-color-secondary);-webkit-user-select:none;user-select:none}.fly-breadcrumb__link{display:inline-flex;align-items:center;gap:6px;block-size:26px;padding-inline:8px;margin:0;border:0;border-radius:8px;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:12.5px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;max-inline-size:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.fly-breadcrumb__link:hover{background:var(--w08);color:var(--text-color)}.fly-breadcrumb__link:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.fly-breadcrumb__link--button{display:inline-flex}.fly-breadcrumb__icon{flex:none}.fly-breadcrumb__separator{flex:none;color:var(--w28)}:host([dir=rtl]) .fly-breadcrumb__separator{transform:scaleX(-1)}@media(forced-colors:active){.fly-breadcrumb__separator{color:CanvasText}.fly-breadcrumb__link:focus-visible{outline-color:Highlight}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hasCurrentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCurrentPage", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
 
+/** Cross-bundle store key + sync event — same shape as `FLY_MAGIC_BAR_STORE_KEY`. */
+const FLY_WINDOW_BREADCRUMBS_STORE_KEY = '__flyWindowBreadcrumbs__';
+const FLY_WINDOW_BREADCRUMBS_EVENT = 'fly:window-breadcrumbs';
+function store$1() {
+    const g = globalThis;
+    return (g[FLY_WINDOW_BREADCRUMBS_STORE_KEY] ??= { trails: {}, revision: 0 });
+}
+function emitSync$1() {
+    const g = globalThis;
+    try {
+        g.dispatchEvent?.(new Event(FLY_WINDOW_BREADCRUMBS_EVENT));
+    }
+    catch {
+        // Non-DOM realm (SSR / a unit env without `Event`) — see the identical note on
+        // `MagicBarRegistry.emitSync`. The instance that mutated the store is
+        // unaffected; any OTHER instance in such a realm stays stale until its own
+        // next mutation calls `sync()` directly.
+    }
+}
+/**
+ * Where an app publishes the breadcrumb trail its window's header strip renders.
+ *
+ * The design puts a trail inside the window
+ * (`UX/FlyOS Desktop-app/MainContent.dc.html`, `nav[aria-label="Breadcrumb"]`), and
+ * the window chrome (`WindowComponent`) renders whatever this registry holds for
+ * its window id, falling back to the plain window title when nothing has published.
+ *
+ * ## Why the state lives on `globalThis`
+ *
+ * Same reasoning as {@link MagicBarRegistry} (`services/magic-bar/`), and the same
+ * direction of travel (remote → shell chrome). This service is `providedIn: 'root'`,
+ * but a root instance is not *reliably* shared across the federation boundary: the
+ * shell builds the design system from workspace source while remotes consume the
+ * published package, and Native Federation collapses those into one runtime
+ * instance only when version negotiation succeeds — a split there is invisible at
+ * build time and would otherwise present as a window whose breadcrumb silently
+ * never appears, for federated apps only. Keeping the state on the one substrate
+ * every bundle shares makes this store fork-proof: whichever copy of this service
+ * publishes, every copy's `trail()` agrees. Each instance mirrors the store into a
+ * local signal and re-reads on the sync event, so `WindowComponent`'s template —
+ * which reads `trail()` inside its own reactive context — repaints whichever
+ * bundle actually published.
+ *
+ * Simpler than `MagicBarRegistry` on purpose: a breadcrumb trail is addressed
+ * directly by the window id its publisher already has (via `WINDOW_DATA`), so
+ * there is no owner-vs-active-window arbitration, no per-action indexing and no
+ * publish-fingerprint dedup to carry — `publish()` just replaces the entry.
+ *
+ * ```ts
+ * const win = inject(WINDOW_DATA);
+ * const crumbs = inject(WindowBreadcrumbsRegistry);
+ * crumbs.publish(win.id, [
+ *   { id: 'root', label: circleName, navigate: () => this.showList() },
+ *   { id: 'trend', label: trend.title },
+ * ]);
+ * ```
+ */
+class WindowBreadcrumbsRegistry {
+    _trails = signal(new Map(), ...(ngDevMode ? [{ debugName: "_trails" }] : /* istanbul ignore next */ []));
+    _syncedStore = null;
+    _syncedRevision = -1;
+    /** Every published trail, keyed by window id. Reactive — read it inside a template/computed/effect. */
+    all = this._trails.asReadonly();
+    constructor() {
+        const g = globalThis;
+        g.addEventListener?.(FLY_WINDOW_BREADCRUMBS_EVENT, () => this.sync());
+        this.sync();
+    }
+    /**
+     * This window's published trail, or an empty array.
+     *
+     * A plain method over a signal read, not a per-id `computed`: it is called from
+     * the window template, where the signal read is tracked whatever the call depth,
+     * and a `computed` cache keyed by a mutable window id would outlive its window.
+     */
+    trail(windowId) {
+        return this._trails().get(windowId) ?? EMPTY_TRAIL;
+    }
+    /**
+     * Replace a window's trail. Publishing an empty array is how an app goes back to
+     * showing the plain window title — it is a state, not a clear.
+     */
+    publish(windowId, crumbs) {
+        const s = store$1();
+        s.trails = { ...s.trails, [windowId]: [...crumbs] };
+        s.revision++;
+        this.sync();
+        emitSync$1();
+    }
+    /** Drop a window's trail entirely. The window chrome calls this when it is destroyed. */
+    clear(windowId) {
+        const s = store$1();
+        if (!(windowId in s.trails))
+            return;
+        const trails = { ...s.trails };
+        delete trails[windowId];
+        s.trails = trails;
+        s.revision++;
+        this.sync();
+        emitSync$1();
+    }
+    /**
+     * Re-read the shared store. Cheap no-op unless a real mutation landed.
+     *
+     * Keys on store IDENTITY as well as revision — see the identical note on
+     * `MagicBarRegistry.sync`: a revision counter alone cannot distinguish "nothing
+     * changed" from "the `globalThis` slot now holds a brand-new store that happens
+     * to be at the same revision" (every spec's `beforeEach` replaces the store).
+     */
+    sync() {
+        const s = store$1();
+        if (s === this._syncedStore && s.revision === this._syncedRevision)
+            return;
+        this._syncedStore = s;
+        this._syncedRevision = s.revision;
+        this._trails.set(new Map(Object.entries(s.trails)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WindowBreadcrumbsRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WindowBreadcrumbsRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WindowBreadcrumbsRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/** Shared empty result — a fresh `[]` per read would re-render every window on every pass. */
+const EMPTY_TRAIL = Object.freeze([]);
+
+/** Public window-breadcrumbs surface — see `window-breadcrumbs-registry.service.ts`. */
+
 /**
  * Headless keyboard-navigation logic — roving focus for menus, radiogroups, and
  * tablists.
@@ -12746,6 +12909,53 @@ function resolveLinks(deps, renderableIds) {
     }
     return out;
 }
+/** Straight run (px) a dependency elbow travels out of a bar edge before it turns. */
+const LINK_STUB = 12;
+/**
+ * Relationship kind implied by the edge a gesture left and the edge it landed on. The name is
+ * literally `<predecessor endpoint><successor endpoint>`, so this is a lookup, not a rule.
+ */
+function linkTypeFor(from, to) {
+    if (from === 'finish')
+        return to === 'start' ? 'FS' : 'FF';
+    return to === 'start' ? 'SS' : 'SF';
+}
+/**
+ * Route a dependency elbow for any of the four relationship kinds (render space).
+ *
+ * The kind names the two endpoints, so it decides both the anchor x's and the direction the
+ * arrow travels: leaving a *finish* edge moves forward in time, leaving a *start* edge moves
+ * backward; entering a *start* edge approaches from behind, entering a *finish* edge from
+ * ahead. `fwd` folds RTL in, so none of that branches on direction.
+ *
+ * One turn suffices when the entry stub lies ahead of the exit stub in the approach
+ * direction. When it does not — overlapping or reversed bars, which SS/FF/SF hit constantly —
+ * a straight drop would cut back through the bars, so the elbow detours via the gap between
+ * the two rows instead.
+ */
+function routeLink(from, to, type, rtl, rowHeight) {
+    const fwd = rtl ? -1 : 1;
+    const fromFinish = type === 'FS' || type === 'FF';
+    const toStart = type === 'FS' || type === 'SS';
+    const x1 = from.shape === 'milestone' ? from.pointX : fromFinish ? from.endX : from.startX;
+    const x2 = to.shape === 'milestone' ? to.pointX : toStart ? to.startX : to.endX;
+    const y1 = from.midY;
+    const y2 = to.midY;
+    const d1 = (fromFinish ? 1 : -1) * fwd; // exit direction
+    const d2 = (toStart ? 1 : -1) * fwd; // approach direction
+    const exit = x1 + LINK_STUB * d1;
+    const entry = x2 - LINK_STUB * d2;
+    if ((entry - exit) * d2 >= 0) {
+        return { path: `M ${x1} ${y1} H ${exit} V ${y2} H ${x2}`, badgeX: exit, badgeY: (y1 + y2) / 2 };
+    }
+    // Distinct rows always differ in y; the guard only keeps a degenerate input off the bar.
+    const yMid = y1 === y2 ? y1 - rowHeight / 2 : (y1 + y2) / 2;
+    return {
+        path: `M ${x1} ${y1} H ${exit} V ${yMid} H ${entry} V ${y2} H ${x2}`,
+        badgeX: entry,
+        badgeY: yMid,
+    };
+}
 // ── RTL coordinate mapping ───────────────────────────────────────────────────
 /** Mirror a logical x into render space. LTR is identity; RTL reflects about the canvas width. */
 function mapX(logicalX, innerWidth, rtl) {
@@ -12846,6 +13056,257 @@ function weekendBands(domain, zoom, pxPerDay) {
     return bands;
 }
 
+/** Label-pane width bounds (px) the splitter clamps to. */
+const GANTT_LABEL_W_MIN = 140;
+const GANTT_LABEL_W_MAX = 720;
+/** Keyboard resize steps (plain arrow / with Shift). */
+const LABEL_STEP = 16;
+const LABEL_STEP_COARSE = 64;
+/** Clamp any candidate label-pane width into the splitter's range. */
+function clampGanttLabelWidth(px) {
+    return Math.max(GANTT_LABEL_W_MIN, Math.min(GANTT_LABEL_W_MAX, Math.round(px)));
+}
+/**
+ * The Gantt's label-pane divider: width state plus the pointer and keyboard resize gestures.
+ *
+ * ## Why this is not in the component
+ * `fly-gantt` is a large component by nature — it owns a two-pane layout, a time scale, four row
+ * shapes, drag/resize/link gestures and dependency routing. The pane divider is the one region
+ * with *no* coupling to any of that: it needs a direction, a fallback width and somewhere to
+ * report a committed value, and nothing else. Keeping it here means the component's remaining
+ * bulk is all chart, and the divider's RTL rules — which are the subtle part — are stated in one
+ * place and unit-testable without rendering an SVG.
+ *
+ * ## The RTL rule, once
+ * The label pane sits on the inline-START side in both directions, so "drag outward = wider"
+ * flips physical sign with direction, and the arrow key that widens is the one pointing AWAY
+ * from the pane (`ArrowRight` in LTR, `ArrowLeft` in RTL). Both facts are encoded here rather
+ * than at each call site, which is what stops one of the two gestures being mirrored and the
+ * other not — the failure this consolidation exists to prevent.
+ */
+class GanttLabelPane {
+    deps;
+    /** True for the duration of a pointer drag — the host paints a resizing affordance. */
+    resizing = signal(false, ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
+    /** The user's dragged width, or `null` while the consumer's input is in charge. */
+    _override = signal(null, ...(ngDevMode ? [{ debugName: "_override" }] : /* istanbul ignore next */ []));
+    /** The width to render: the user's drag when present, else the clamped input. */
+    width = computed(() => clampGanttLabelWidth(this._override() ?? this.deps.inputWidth()), ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    constructor(deps) {
+        this.deps = deps;
+    }
+    /**
+     * Pointer-drag the divider. Forward-in-time is `+x` LTR and `-x` RTL, and the label pane sits
+     * on the inline-start side in both, so the same sign flip that mirrors the timeline also
+     * mirrors "drag outward = wider".
+     *
+     * Listeners go on `document`, not the divider: a fast drag outruns the 8px-wide handle, and a
+     * pointer that leaves it would otherwise strand the gesture mid-resize.
+     */
+    onPointerDown(ev) {
+        if (!this.deps.resizable() || ev.button !== 0)
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        const startClientX = ev.clientX;
+        const startWidth = this.width();
+        const dirSign = this.deps.rtl() ? -1 : 1;
+        this.resizing.set(true);
+        const onMove = (e) => {
+            this._override.set(clampGanttLabelWidth(startWidth + (e.clientX - startClientX) * dirSign));
+        };
+        const onUp = () => {
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
+            this.resizing.set(false);
+            const final = this.width();
+            // Only a width that actually MOVED is committed: a plain click on the divider must not
+            // emit, or a consumer persisting the value would write on every stray press.
+            if (final !== startWidth)
+                this.deps.commit(final);
+        };
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', onUp);
+        this.deps.destroyRef.onDestroy(() => {
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
+        });
+    }
+    /**
+     * Keyboard resize on the focused divider. ArrowRight/Left grow/shrink by the *inline* meaning
+     * of the key, so under RTL the arrow that points away from the pane is still the one that
+     * widens it. `Home`/`End` jump to the bounds, Enter/Escape restore the input width.
+     *
+     * Typed `Event` because Angular's strict template checker types a `(keydown)` `$event` as
+     * `Event`; the cast is done here once rather than at the binding.
+     */
+    onKeydown(ev) {
+        if (!this.deps.resizable())
+            return;
+        const key = ev.key;
+        const coarse = ev.shiftKey;
+        const step = coarse ? LABEL_STEP_COARSE : LABEL_STEP;
+        const rtl = this.deps.rtl();
+        const grow = rtl ? 'ArrowLeft' : 'ArrowRight';
+        const shrink = rtl ? 'ArrowRight' : 'ArrowLeft';
+        let next;
+        if (key === grow)
+            next = this.width() + step;
+        else if (key === shrink)
+            next = this.width() - step;
+        else if (key === 'Home')
+            next = GANTT_LABEL_W_MIN;
+        else if (key === 'End')
+            next = GANTT_LABEL_W_MAX;
+        else if (key === 'Enter' || key === 'Escape') {
+            // Stop the grid-level Enter handler from also activating the selected row.
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.reset();
+            return;
+        }
+        else
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        const clamped = clampGanttLabelWidth(next);
+        // Already at a bound: swallow the key (it was ours) but emit nothing.
+        if (clamped === this.width())
+            return;
+        this._override.set(clamped);
+        this.deps.commit(clamped);
+    }
+    /** Drop the user's dragged width and fall back to the consumer's input width. */
+    reset() {
+        if (this._override() === null)
+            return;
+        this._override.set(null);
+        this.deps.commit(this.width());
+    }
+}
+
+/**
+ * Drawing a dependency by dragging from one end of a bar to another — the gesture, the drop-target
+ * resolution and the resulting relationship type.
+ *
+ * ## Why this is not in the component
+ * `fly-gantt` already owns a two-pane layout, a time scale, four row shapes and bar move/resize.
+ * This is a self-contained second gesture with one output, and its interesting part is a *rule*
+ * rather than any rendering: which end you START on plus which end you DROP nearest decides which
+ * of the four MS-Project relationships you get. Stating that rule beside the hit-testing that
+ * feeds it — rather than in the middle of a 700-line component — is what makes it reviewable.
+ *
+ * ## The selection is here too, and deliberately
+ * `selectedKey` is the link the user has clicked, which is what the delete affordance and the
+ * keyboard's Delete both act on. It lives with the gesture because both are "the user is
+ * manipulating dependencies", and keeping them together stops a click-selection surviving a drag
+ * that replaced the very link it pointed at.
+ */
+class GanttLinkGestures {
+    deps;
+    /** The in-flight drag, or `null`. */
+    gesture = signal(null, ...(ngDevMode ? [{ debugName: "gesture" }] : /* istanbul ignore next */ []));
+    /** The clicked link's key, or `null`. Drives the delete affordance and the Delete key. */
+    selectedKey = signal(null, ...(ngDevMode ? [{ debugName: "selectedKey" }] : /* istanbul ignore next */ []));
+    /** Rubber-band path for the in-flight gesture (render space), or `null` when idle. */
+    path = computed(() => {
+        const g = this.gesture();
+        return g ? `M ${g.x0} ${g.y0} L ${g.x1} ${g.y1}` : null;
+    }, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    constructor(deps) {
+        this.deps = deps;
+    }
+    /** Clear any link selection — the host calls this when the user selects a row instead. */
+    clearSelection() {
+        this.selectedKey.set(null);
+    }
+    /** Toggle the clicked link's selection. */
+    toggleSelection(key) {
+        this.selectedKey.set(this.selectedKey() === key ? null : key);
+    }
+    /**
+     * Start a link gesture from one end of a bar. Which end it started on, plus which end of the
+     * target row it is dropped nearest to, is what selects the dependency type — so all four
+     * MS-Project relationships are reachable with the same single drag.
+     *
+     * Listeners go on `document`, not the connector: the connector is an 8px dot and any real drag
+     * leaves it immediately.
+     */
+    start(ev, row, anchor) {
+        if (this.deps.readonly() || row.flat.row.readonly || ev.button !== 0)
+            return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        const local = this.toBodyPoint(ev.clientX, ev.clientY);
+        const x0 = row.shape === 'milestone' ? row.pointX : anchor === 'finish' ? row.endX : row.startX;
+        this.gesture.set({
+            fromId: row.flat.row.id,
+            anchor,
+            x0,
+            y0: row.midY,
+            x1: local.x,
+            y1: local.y,
+        });
+        const onMove = (e) => {
+            const p = this.toBodyPoint(e.clientX, e.clientY);
+            const g = this.gesture();
+            if (g)
+                this.gesture.set({ ...g, x1: p.x, y1: p.y });
+        };
+        const onUp = (e) => {
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
+            const g = this.gesture();
+            this.gesture.set(null);
+            if (!g)
+                return;
+            const target = this.dropTargetAt(e.clientX, e.clientY);
+            // A row cannot depend on itself; a drop on empty space is simply abandoned.
+            if (target && target.id !== g.fromId) {
+                this.deps.createLink({
+                    fromId: g.fromId,
+                    toId: target.id,
+                    type: linkTypeFor(g.anchor, target.anchor),
+                });
+            }
+        };
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', onUp);
+        this.deps.destroyRef.onDestroy(() => {
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
+        });
+    }
+    /** Convert client coordinates to a point inside the body SVG (render space). */
+    toBodyPoint(clientX, clientY) {
+        const svg = this.deps.bodySvg();
+        if (!svg)
+            return { x: 0, y: 0 };
+        const rect = svg.getBoundingClientRect();
+        return { x: clientX - rect.left, y: clientY - rect.top };
+    }
+    /**
+     * The row a link gesture was dropped on **and which of its ends** the drop landed nearest —
+     * the second half of the type derivation. A milestone has no width, so both of its ends are the
+     * same point and it is reported as `start`, giving the FS/SS pair anyone actually wants.
+     */
+    dropTargetAt(clientX, clientY) {
+        const el = document.elementFromPoint(clientX, clientY);
+        const holder = el?.closest('[data-row-id]');
+        const id = holder?.getAttribute('data-row-id');
+        if (!id)
+            return null;
+        const row = this.deps.rows().find((r) => r.flat.row.id === id);
+        if (!row || row.shape === 'milestone' || row.shape === 'empty')
+            return { id, anchor: 'start' };
+        const x = this.toBodyPoint(clientX, clientY).x;
+        return {
+            id,
+            anchor: Math.abs(x - row.endX) < Math.abs(x - row.startX) ? 'finish' : 'start',
+        };
+    }
+}
+
 /** Process-wide counter so each instance owns a unique arrowhead `<marker>` id. */
 let _flyGanttUid = 0;
 /** Header band heights (two-tier: coarse period over fine period). */
@@ -12856,27 +13317,6 @@ const HEADER_H = HEADER_UPPER_H + HEADER_LOWER_H;
 const BAR_V_PAD = 6;
 /** Edge-handle hit width (px) for resize + the link connector radius. */
 const HANDLE_W = 8;
-/** Label-pane width bounds (px) the splitter clamps to. */
-const MIN_LABEL_W = 140;
-const MAX_LABEL_W = 720;
-/** Keyboard resize steps (plain arrow / with Shift). */
-const LABEL_STEP = 16;
-const LABEL_STEP_COARSE = 64;
-/** Straight run (px) a dependency elbow travels out of a bar edge before it turns. */
-const LINK_STUB = 12;
-/** Clamp any candidate label-pane width into the splitter's range. */
-function clampLabelWidth(px) {
-    return Math.max(MIN_LABEL_W, Math.min(MAX_LABEL_W, Math.round(px)));
-}
-/**
- * Relationship kind implied by the edge a gesture left and the edge it landed on. The name is
- * literally `<predecessor endpoint><successor endpoint>`, so this is a lookup, not a rule.
- */
-function linkTypeFor(from, to) {
-    if (from === 'finish')
-        return to === 'start' ? 'FS' : 'FF';
-    return to === 'start' ? 'SS' : 'SF';
-}
 /**
  * **`fly-gantt`** — the design-system SVG Gantt chart.
  *
@@ -12948,22 +13388,16 @@ class FlyGanttComponent {
     HEADER_UPPER_H = HEADER_UPPER_H;
     HEADER_LOWER_H = HEADER_LOWER_H;
     HANDLE_W = HANDLE_W;
-    MIN_LABEL_W = MIN_LABEL_W;
-    MAX_LABEL_W = MAX_LABEL_W;
+    MIN_LABEL_W = GANTT_LABEL_W_MIN;
+    MAX_LABEL_W = GANTT_LABEL_W_MAX;
     // ── Interaction state ─────────────────────────────────────────────────────────
     selectedId = signal(null, ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
-    /** Key (`from~to~type`) of the dependency arrow the user has selected, if any. */
-    selectedLinkKey = signal(null, ...(ngDevMode ? [{ debugName: "selectedLinkKey" }] : /* istanbul ignore next */ []));
     _collapsed = signal(new Set(), ...(ngDevMode ? [{ debugName: "_collapsed" }] : /* istanbul ignore next */ []));
     /** Live drag preview `{id,start,end}` folded into geometry while a gesture runs. */
     _dragPreview = signal(null, ...(ngDevMode ? [{ debugName: "_dragPreview" }] : /* istanbul ignore next */ []));
-    /** Rubber-band link gesture render-space anchor + cursor, and its origin row + edge. */
-    linkGesture = signal(null, ...(ngDevMode ? [{ debugName: "linkGesture" }] : /* istanbul ignore next */ []));
     dragTooltip = signal(null, ...(ngDevMode ? [{ debugName: "dragTooltip" }] : /* istanbul ignore next */ []));
     /** True while a divider drag is in flight (suppresses text selection host-wide). */
-    resizingLabels = signal(false, ...(ngDevMode ? [{ debugName: "resizingLabels" }] : /* istanbul ignore next */ []));
     /** User-chosen pane width; `null` = still following the {@link labelWidth} input. */
-    _labelWidthOverride = signal(null, ...(ngDevMode ? [{ debugName: "_labelWidthOverride" }] : /* istanbul ignore next */ []));
     bodyRef = viewChild('bodySvg', ...(ngDevMode ? [{ debugName: "bodyRef" }] : /* istanbul ignore next */ []));
     // ── Derived model ──────────────────────────────────────────────────────────────
     rtl = computed(() => this.i18n.isRtl(), ...(ngDevMode ? [{ debugName: "rtl" }] : /* istanbul ignore next */ []));
@@ -12971,7 +13405,6 @@ class FlyGanttComponent {
     domain = computed(() => computeDomain(this.rows(), this.zoom()), ...(ngDevMode ? [{ debugName: "domain" }] : /* istanbul ignore next */ []));
     innerWidth = computed(() => Math.max(1, dateToX(this.domain().end, this.domain().start, this.pxPerDay())), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
     /** Label-pane width actually rendered — the user's dragged width, else the input. */
-    effectiveLabelWidth = computed(() => clampLabelWidth(this._labelWidthOverride() ?? this.labelWidth()), ...(ngDevMode ? [{ debugName: "effectiveLabelWidth" }] : /* istanbul ignore next */ []));
     /** Full visible list after tree flatten/collapse. */
     _flat = computed(() => flattenRows(this.rows(), this._collapsed()), ...(ngDevMode ? [{ debugName: "_flat" }] : /* istanbul ignore next */ []));
     /** Capped list actually rendered. */
@@ -13073,7 +13506,7 @@ class FlyGanttComponent {
             const to = vmById.get(link.toId);
             if (!from || !to)
                 continue;
-            const routed = this._route(from, to, link.type, rtl);
+            const routed = routeLink(from, to, link.type, rtl, this.rowHeight());
             out.push({
                 key: `${link.fromId}~${link.toId}~${link.type}`,
                 fromId: link.fromId,
@@ -13129,85 +13562,31 @@ class FlyGanttComponent {
     }
     // ── Label-pane divider ─────────────────────────────────────────────────────────
     /**
-     * Pointer-drag the divider. Forward-in-time is `+x` LTR and `-x` RTL, and the label pane sits
-     * on the inline-start side in both, so the same sign flip that mirrors the timeline also
-     * mirrors "drag outward = wider".
+     * The divider's own state machine, in {@link GanttLabelPane}. It is composed rather than
+     * inlined because it is the one region of this component with no coupling to the chart: give it
+     * a direction, a fallback width and somewhere to report a committed value and it is complete.
+     * The subtle part — that "wider" flips physical sign under RTL for BOTH the drag and the arrow
+     * keys — is stated once there instead of twice here.
      */
+    _labelPane = new GanttLabelPane({
+        resizable: this.resizableLabels,
+        rtl: this.rtl,
+        inputWidth: this.labelWidth,
+        commit: (width) => this.labelWidthChange.emit(width),
+        destroyRef: this.destroyRef,
+    });
+    /** Painted width of the label pane — the user's dragged value, else the clamped input. */
+    effectiveLabelWidth = this._labelPane.width;
+    /** True mid-drag; drives the host's resizing cursor/affordance. */
+    resizingLabels = this._labelPane.resizing;
     onLabelResizePointerDown(ev) {
-        if (!this.resizableLabels() || ev.button !== 0)
-            return;
-        ev.preventDefault();
-        ev.stopPropagation();
-        const startClientX = ev.clientX;
-        const startWidth = this.effectiveLabelWidth();
-        const dirSign = this.rtl() ? -1 : 1;
-        this.resizingLabels.set(true);
-        const onMove = (e) => {
-            this._labelWidthOverride.set(clampLabelWidth(startWidth + (e.clientX - startClientX) * dirSign));
-        };
-        const onUp = () => {
-            document.removeEventListener('pointermove', onMove);
-            document.removeEventListener('pointerup', onUp);
-            this.resizingLabels.set(false);
-            const final = this.effectiveLabelWidth();
-            if (final !== startWidth)
-                this.labelWidthChange.emit(final);
-        };
-        document.addEventListener('pointermove', onMove);
-        document.addEventListener('pointerup', onUp);
-        this.destroyRef.onDestroy(() => {
-            document.removeEventListener('pointermove', onMove);
-            document.removeEventListener('pointerup', onUp);
-        });
+        this._labelPane.onPointerDown(ev);
     }
-    /**
-     * Keyboard resize on the focused divider. ArrowRight/Left grow/shrink by the *inline* meaning
-     * of the key, so under RTL the arrow that points away from the pane is still the one that
-     * widens it. `Home`/`End` jump to the bounds, Enter/Escape restore the input width.
-     *
-     * Typed `Event` for the same reason as {@link onLabelRowKeydown}: Angular's strict template
-     * checker types `(keydown)` `$event` as `Event`, so the cast is done here once.
-     */
     onLabelResizeKeydown(ev) {
-        if (!this.resizableLabels())
-            return;
-        const key = ev.key;
-        const coarse = ev.shiftKey;
-        const step = coarse ? LABEL_STEP_COARSE : LABEL_STEP;
-        const grow = this.rtl() ? 'ArrowLeft' : 'ArrowRight';
-        const shrink = this.rtl() ? 'ArrowRight' : 'ArrowLeft';
-        let next;
-        if (key === grow)
-            next = this.effectiveLabelWidth() + step;
-        else if (key === shrink)
-            next = this.effectiveLabelWidth() - step;
-        else if (key === 'Home')
-            next = MIN_LABEL_W;
-        else if (key === 'End')
-            next = MAX_LABEL_W;
-        else if (key === 'Enter' || key === 'Escape') {
-            // Stop the grid-level Enter handler from also activating the selected row.
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.resetLabelWidth();
-            return;
-        }
-        else
-            return;
-        ev.preventDefault();
-        ev.stopPropagation();
-        const clamped = clampLabelWidth(next);
-        if (clamped === this.effectiveLabelWidth())
-            return;
-        this._labelWidthOverride.set(clamped);
-        this.labelWidthChange.emit(clamped);
+        this._labelPane.onKeydown(ev);
     }
-    /** Drop the user's dragged width and fall back to the {@link labelWidth} input. */
     resetLabelWidth() {
-        if (this._labelWidthOverride() === null)
-            return;
-        this._labelWidthOverride.set(null);
-        this.labelWidthChange.emit(this.effectiveLabelWidth());
+        this._labelPane.reset();
     }
     // ── Group collapse ─────────────────────────────────────────────────────────────
     isCollapsed(id) {
@@ -13238,7 +13617,7 @@ class FlyGanttComponent {
         this.selectedId.set(id);
         // A row and a link are alternative selections — picking one drops the other, so Delete is
         // never ambiguous about which thing it would remove.
-        this.selectedLinkKey.set(null);
+        this._links.clearSelection();
         this.rowClick.emit(id);
     }
     onRowDblClick(id) {
@@ -13247,14 +13626,14 @@ class FlyGanttComponent {
     // ── Dependency arrow selection + removal ───────────────────────────────────────
     onLinkClick(ev, vm) {
         ev.stopPropagation();
-        this.selectedLinkKey.set(this.selectedLinkKey() === vm.key ? null : vm.key);
+        this._links.toggleSelection(vm.key);
     }
     deleteLink(ev, vm) {
         ev.stopPropagation();
         ev.preventDefault();
         if (this.readonly())
             return;
-        this.selectedLinkKey.set(null);
+        this._links.clearSelection();
         this.dependencyDelete.emit({ fromId: vm.fromId, toId: vm.toId, type: vm.type });
     }
     // ── Keyboard ───────────────────────────────────────────────────────────────────
@@ -13391,54 +13770,27 @@ class FlyGanttComponent {
     }
     // ── Pointer drag: dependency create ──────────────────────────────────────────────
     /**
-     * Start a link gesture from one end of a bar. Which end it started on, plus which end of the
-     * target row it is dropped nearest to, is what selects the {@link GanttDependencyType} — so all
-     * four MS-Project relationships are reachable with the same single drag.
+     * The dependency-drawing gesture, in {@link GanttLinkGestures}. Composed rather than inlined
+     * because it is a self-contained second gesture whose interesting part is a RULE — the end you
+     * start on plus the end you drop nearest, selects the relationship type — which reads far better beside
+     * its own hit-testing than in the middle of this component.
      */
+    _links = new GanttLinkGestures({
+        readonly: this.readonly,
+        rows: this.rowVms,
+        bodySvg: () => this.bodyRef()?.nativeElement ?? null,
+        createLink: (dependency) => this.dependencyCreate.emit(dependency),
+        destroyRef: this.destroyRef,
+    });
+    /** Key (`from~to~type`) of the dependency arrow the user has selected, if any. */
+    selectedLinkKey = this._links.selectedKey;
+    /** The in-flight rubber-band gesture, or `null` — the template draws it when present. */
+    linkGesture = this._links.gesture;
+    /** Rubber-band path for an in-flight link gesture (render space). */
+    linkGesturePath = this._links.path;
     onLinkPointerDown(ev, vm, anchor) {
-        if (this.readonly() || vm.flat.row.readonly || ev.button !== 0)
-            return;
-        ev.preventDefault();
-        ev.stopPropagation();
-        const local = this._toBodyPoint(ev);
-        const x0 = vm.shape === 'milestone' ? vm.pointX : anchor === 'finish' ? vm.endX : vm.startX;
-        this.linkGesture.set({ fromId: vm.flat.row.id, anchor, x0, y0: vm.midY, x1: local.x, y1: local.y });
-        const onMove = (e) => {
-            const p = this._toBodyPoint(e);
-            const g = this.linkGesture();
-            if (g)
-                this.linkGesture.set({ ...g, x1: p.x, y1: p.y });
-        };
-        const onUp = (e) => {
-            document.removeEventListener('pointermove', onMove);
-            document.removeEventListener('pointerup', onUp);
-            const g = this.linkGesture();
-            this.linkGesture.set(null);
-            if (!g)
-                return;
-            const target = this._dropTargetAt(e.clientX, e.clientY);
-            if (target && target.id !== g.fromId) {
-                this.dependencyCreate.emit({
-                    fromId: g.fromId,
-                    toId: target.id,
-                    type: linkTypeFor(g.anchor, target.anchor),
-                });
-            }
-        };
-        document.addEventListener('pointermove', onMove);
-        document.addEventListener('pointerup', onUp);
-        this.destroyRef.onDestroy(() => {
-            document.removeEventListener('pointermove', onMove);
-            document.removeEventListener('pointerup', onUp);
-        });
+        this._links.start(ev, vm, anchor);
     }
-    /** Rubber-band path for an in-flight link gesture (render space). */
-    linkGesturePath = computed(() => {
-        const g = this.linkGesture();
-        if (!g)
-            return null;
-        return `M ${g.x0} ${g.y0} L ${g.x1} ${g.y1}`;
-    }, ...(ngDevMode ? [{ debugName: "linkGesturePath" }] : /* istanbul ignore next */ []));
     // ── Internals ────────────────────────────────────────────────────────────────────
     /**
      * Resolve a row's `backgroundColor` into the low-alpha band colour actually painted.
@@ -13459,70 +13811,6 @@ class FlyGanttComponent {
         // Reflect each cell: its inline-start edge becomes innerWidth - (x + width).
         return ticks.map((t) => ({ ...t, x: w - t.x - t.width }));
     }
-    /**
-     * Route a dependency elbow for any of the four relationship kinds (render space).
-     *
-     * The kind names the two endpoints, so it decides both the anchor x's and the direction the
-     * arrow travels: leaving a *finish* edge moves forward in time, leaving a *start* edge moves
-     * backward; entering a *start* edge approaches from behind, entering a *finish* edge from
-     * ahead. `fwd` folds RTL in, so none of that branches on direction.
-     *
-     * One turn suffices when the entry stub lies ahead of the exit stub in the approach
-     * direction. When it does not — overlapping or reversed bars, which SS/FF/SF hit constantly —
-     * a straight drop would cut back through the bars, so the elbow detours via the gap between
-     * the two rows instead.
-     */
-    _route(from, to, type, rtl) {
-        const fwd = rtl ? -1 : 1;
-        const fromFinish = type === 'FS' || type === 'FF';
-        const toStart = type === 'FS' || type === 'SS';
-        const x1 = from.shape === 'milestone' ? from.pointX : fromFinish ? from.endX : from.startX;
-        const x2 = to.shape === 'milestone' ? to.pointX : toStart ? to.startX : to.endX;
-        const y1 = from.midY;
-        const y2 = to.midY;
-        const d1 = (fromFinish ? 1 : -1) * fwd; // exit direction
-        const d2 = (toStart ? 1 : -1) * fwd; // approach direction
-        const exit = x1 + LINK_STUB * d1;
-        const entry = x2 - LINK_STUB * d2;
-        if ((entry - exit) * d2 >= 0) {
-            return { path: `M ${x1} ${y1} H ${exit} V ${y2} H ${x2}`, badgeX: exit, badgeY: (y1 + y2) / 2 };
-        }
-        // Distinct rows always differ in y; the guard only keeps a degenerate input off the bar.
-        const yMid = y1 === y2 ? y1 - this.rowHeight() / 2 : (y1 + y2) / 2;
-        return {
-            path: `M ${x1} ${y1} H ${exit} V ${yMid} H ${entry} V ${y2} H ${x2}`,
-            badgeX: entry,
-            badgeY: yMid,
-        };
-    }
-    /** Convert a pointer event to a coordinate inside the body SVG (render space). */
-    _toBodyPoint(ev) {
-        const svg = this.bodyRef()?.nativeElement;
-        if (!svg)
-            return { x: 0, y: 0 };
-        const rect = svg.getBoundingClientRect();
-        return { x: ev.clientX - rect.left, y: ev.clientY - rect.top };
-    }
-    /**
-     * The row a link gesture was dropped on **and which of its ends** the drop landed nearest —
-     * the second half of the type derivation. A milestone has no width, so both of its ends are
-     * the same point and it is reported as `start`, giving the FS/SS pair anyone actually wants.
-     */
-    _dropTargetAt(clientX, clientY) {
-        const el = document.elementFromPoint(clientX, clientY);
-        const holder = el?.closest('[data-row-id]');
-        const id = holder?.getAttribute('data-row-id');
-        if (!id)
-            return null;
-        const vm = this.rowVms().find((v) => v.flat.row.id === id);
-        if (!vm || vm.shape === 'milestone' || vm.shape === 'empty')
-            return { id, anchor: 'start' };
-        const x = this._toBodyPoint({ clientX, clientY }).x;
-        return {
-            id,
-            anchor: Math.abs(x - vm.endX) < Math.abs(x - vm.startX) ? 'finish' : 'start',
-        };
-    }
     _ariaFor(row, start, end, shape) {
         const t = (k, p) => this.i18n.t(k, p);
         if (shape === 'milestone') {
@@ -13542,7 +13830,7 @@ class FlyGanttComponent {
             : t('gantt.aria.bar', { label: row.label, start: toIsoDate(start), end: toIsoDate(end), progress });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyGanttComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyGanttComponent, isStandalone: true, selector: "fly-gantt", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, dependencies: { classPropertyName: "dependencies", publicName: "dependencies", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, showToday: { classPropertyName: "showToday", publicName: "showToday", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, resizableLabels: { classPropertyName: "resizableLabels", publicName: "resizableLabels", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDatesChange: "rowDatesChange", dependencyCreate: "dependencyCreate", dependencyDelete: "dependencyDelete", rowClick: "rowClick", rowDblClick: "rowDblClick", labelWidthChange: "labelWidthChange" }, host: { properties: { "class.fly-gantt--rtl": "rtl()", "class.fly-gantt--readonly": "readonly()", "class.fly-gantt--resizing": "resizingLabels()", "attr.dir": "i18n.direction()" }, classAttribute: "fly-gantt" }, viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["bodySvg"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Cross-scrolling canvas: a CSS grid whose header row and label column are sticky, so the\n     time grid scrolls under a pinned header + label tree. All SVG geometry is pre-mirrored for\n     RTL in the component (see gantt-scale mapX), so this template never branches on direction. -->\n<div\n  class=\"fly-gantt__scroll\"\n  role=\"grid\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"'gantt.aria.grid' | translate\"\n  [attr.aria-rowcount]=\"visibleRows().length\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <div\n    class=\"fly-gantt__canvas\"\n    [style.grid-template-columns]=\"effectiveLabelWidth() + 'px ' + innerWidth() + 'px'\"\n    [style.grid-template-rows]=\"HEADER_H + 'px ' + bodyHeight() + 'px'\"\n  >\n    <!-- \u2500\u2500 Corner (pinned both axes) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"fly-gantt__corner\" [style.height.px]=\"HEADER_H\">\n      @if (resizableLabels()) {\n        <!-- The divider lives in the corner because the corner is the one cell pinned on BOTH\n             axes: the grip stays reachable however far the user has scrolled. The full-height\n             strip down the label pane below is the same gesture, presentational only. -->\n        <div\n          class=\"fly-gantt__splitter\"\n          role=\"separator\"\n          tabindex=\"0\"\n          aria-orientation=\"vertical\"\n          [attr.aria-label]=\"'gantt.aria.label_resize' | translate\"\n          [attr.aria-valuenow]=\"effectiveLabelWidth()\"\n          [attr.aria-valuemin]=\"MIN_LABEL_W\"\n          [attr.aria-valuemax]=\"MAX_LABEL_W\"\n          (pointerdown)=\"onLabelResizePointerDown($event)\"\n          (keydown)=\"onLabelResizeKeydown($event)\"\n          (dblclick)=\"resetLabelWidth()\"\n        ></div>\n      }\n    </div>\n\n    <!-- \u2500\u2500 Time header (pinned top) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <svg\n      class=\"fly-gantt__time-header\"\n      [attr.width]=\"innerWidth()\"\n      [attr.height]=\"HEADER_H\"\n      [attr.viewBox]=\"'0 0 ' + innerWidth() + ' ' + HEADER_H\"\n      aria-hidden=\"true\"\n    >\n      @for (b of weekendBands(); track b.key) {\n        <rect class=\"fly-gantt__weekend\" [attr.x]=\"b.x\" [attr.y]=\"HEADER_UPPER_H\" [attr.width]=\"b.width\" [attr.height]=\"HEADER_LOWER_H\" />\n      }\n      @for (t of upperTicks(); track t.key) {\n        <line class=\"fly-gantt__tick-line\" [attr.x1]=\"t.x\" [attr.y1]=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"HEADER_H\" />\n        <text class=\"fly-gantt__tick-label fly-gantt__tick-label--upper\" [attr.x]=\"t.x + t.width / 2\" [attr.y]=\"HEADER_UPPER_H / 2 + 4\">{{ t.label }}</text>\n      }\n      @for (t of lowerTicks(); track t.key) {\n        <line class=\"fly-gantt__tick-line\" [attr.x1]=\"t.x\" [attr.y1]=\"HEADER_UPPER_H\" [attr.x2]=\"t.x\" [attr.y2]=\"HEADER_H\" />\n        <text class=\"fly-gantt__tick-label\" [attr.x]=\"t.x + t.width / 2\" [attr.y]=\"HEADER_UPPER_H + HEADER_LOWER_H / 2 + 4\">{{ t.label }}</text>\n      }\n      @if (todayX() !== null) {\n        <line class=\"fly-gantt__today\" [attr.x1]=\"todayX()\" [attr.y1]=\"HEADER_UPPER_H\" [attr.x2]=\"todayX()\" [attr.y2]=\"HEADER_H\" />\n      }\n    </svg>\n\n    <!-- \u2500\u2500 Label tree (pinned inline-start) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"fly-gantt__labels\" role=\"rowgroup\">\n      @for (vm of rowVms(); track vm.flat.row.id) {\n        <div\n          class=\"fly-gantt__label-row\"\n          role=\"row\"\n          tabindex=\"-1\"\n          [class.fly-gantt__label-row--selected]=\"selectedId() === vm.flat.row.id\"\n          [class.fly-gantt__label-row--tinted]=\"vm.tint !== null\"\n          [style.height.px]=\"rowHeight()\"\n          [style.--fly-gantt-row-tint]=\"vm.tint\"\n          [attr.aria-selected]=\"selectedId() === vm.flat.row.id\"\n          [attr.aria-label]=\"vm.ariaLabel\"\n          (click)=\"onRowClick(vm.flat.row.id)\"\n          (dblclick)=\"onRowDblClick(vm.flat.row.id)\"\n          (keydown.enter)=\"onLabelRowKeydown($event, vm.flat.row.id)\"\n        >\n          <span class=\"fly-gantt__label-inner\" [style.padding-inline-start.px]=\"indentFor(vm.flat.depth)\">\n            @if (vm.flat.hasChildren) {\n              <button\n                type=\"button\"\n                class=\"fly-gantt__chevron\"\n                [class.fly-gantt__chevron--collapsed]=\"isCollapsed(vm.flat.row.id)\"\n                [attr.aria-label]=\"(isCollapsed(vm.flat.row.id) ? 'gantt.expand' : 'gantt.collapse') | translate\"\n                [attr.aria-expanded]=\"!isCollapsed(vm.flat.row.id)\"\n                (click)=\"toggleCollapse(vm.flat.row.id, $event)\"\n              >\u25B8</button>\n            } @else {\n              <span class=\"fly-gantt__chevron-spacer\"></span>\n            }\n            @if (vm.color) {\n              <!-- Colour chip: the row's own colour at full strength, so a milestone stays\n                   identifiable in the label pane where the band tint is deliberately faint. -->\n              <span class=\"fly-gantt__label-swatch\" [style.background]=\"vm.color\" aria-hidden=\"true\"></span>\n            }\n            <span\n              class=\"fly-gantt__label-text\"\n              [class.fly-gantt__label-text--group]=\"vm.shape === 'group'\"\n              [title]=\"vm.flat.row.label\"\n            >{{ vm.flat.row.label }}</span>\n          </span>\n        </div>\n      }\n      @if (resizableLabels()) {\n        <!-- aria-hidden so this presentational twin of the corner separator is not a second\n             (and structurally invalid) child of the rowgroup in the accessibility tree. -->\n        <div\n          class=\"fly-gantt__splitter fly-gantt__splitter--rail\"\n          aria-hidden=\"true\"\n          (pointerdown)=\"onLabelResizePointerDown($event)\"\n          (dblclick)=\"resetLabelWidth()\"\n        ></div>\n      }\n    </div>\n\n    <!-- \u2500\u2500 Time grid body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <svg\n      #bodySvg\n      class=\"fly-gantt__body\"\n      [attr.width]=\"innerWidth()\"\n      [attr.height]=\"bodyHeight()\"\n      [attr.viewBox]=\"'0 0 ' + innerWidth() + ' ' + bodyHeight()\"\n    >\n      <defs>\n        <marker\n          [attr.id]=\"markerId\"\n          markerWidth=\"8\"\n          markerHeight=\"8\"\n          refX=\"6\"\n          refY=\"4\"\n          orient=\"auto\"\n          markerUnits=\"userSpaceOnUse\"\n        >\n          <path class=\"fly-gantt__arrowhead\" d=\"M0,0 L7,4 L0,8 Z\" />\n        </marker>\n      </defs>\n\n      <!-- Row colour bands sit at the very bottom of the stack, so the weekend shading and the\n           gridlines below still read through them. -->\n      @for (vm of tintedRows(); track vm.flat.row.id) {\n        <rect\n          class=\"fly-gantt__row-band\"\n          [attr.x]=\"0\"\n          [attr.y]=\"vm.y\"\n          [attr.width]=\"innerWidth()\"\n          [attr.height]=\"rowHeight()\"\n          [style.fill]=\"vm.tint\"\n        />\n      }\n\n      <!-- Weekend shading + vertical gridlines (behind the bars). -->\n      @for (b of weekendBands(); track b.key) {\n        <rect class=\"fly-gantt__weekend\" [attr.x]=\"b.x\" [attr.y]=\"0\" [attr.width]=\"b.width\" [attr.height]=\"bodyHeight()\" />\n      }\n      @for (t of lowerTicks(); track t.key) {\n        <line class=\"fly-gantt__grid-line\" [attr.x1]=\"t.x\" [attr.y1]=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"bodyHeight()\" />\n      }\n\n      <!-- Rows: a full-width hit rect (click + link drop target) then the shape. -->\n      @for (vm of rowVms(); track vm.flat.row.id) {\n        <g class=\"fly-gantt__row\" [attr.data-row-id]=\"vm.flat.row.id\">\n          <rect\n            class=\"fly-gantt__row-hit\"\n            [class.fly-gantt__row-hit--selected]=\"selectedId() === vm.flat.row.id\"\n            [attr.x]=\"0\"\n            [attr.y]=\"vm.y\"\n            [attr.width]=\"innerWidth()\"\n            [attr.height]=\"rowHeight()\"\n            (pointerdown)=\"onRowClick(vm.flat.row.id)\"\n            (dblclick)=\"onRowDblClick(vm.flat.row.id)\"\n          />\n\n          @switch (vm.shape) {\n            @case ('group') {\n              <path class=\"fly-gantt__group\" [attr.d]=\"groupPath(vm)\" [style.fill]=\"vm.color\" [style.stroke]=\"vm.color\" />\n            }\n            @case ('milestone') {\n              <polygon\n                class=\"fly-gantt__milestone\"\n                [class.fly-gantt__milestone--editable]=\"vm.editable\"\n                [attr.points]=\"diamondPoints(vm)\"\n                [style.fill]=\"vm.color\"\n                (pointerdown)=\"onBarPointerDown($event, vm, 'move')\"\n              />\n              @if (!readonly() && !vm.flat.row.readonly) {\n                <!-- A diamond has no width, so one connector serves it; it reads as the finish\n                     end, which is what makes a milestone\u2192task drag the FS everyone expects. -->\n                <circle\n                  class=\"fly-gantt__connector\"\n                  [attr.cx]=\"milestoneConnectorX(vm)\"\n                  [attr.cy]=\"vm.midY\"\n                  r=\"4\"\n                  [attr.aria-label]=\"'gantt.aria.link_handle' | translate: { label: vm.flat.row.label }\"\n                  (pointerdown)=\"onLinkPointerDown($event, vm, 'finish')\"\n                />\n              }\n            }\n            @case ('bar') {\n              <g class=\"fly-gantt__bar-group\">\n                <rect\n                  class=\"fly-gantt__bar\"\n                  [class.fly-gantt__bar--editable]=\"vm.editable\"\n                  [attr.x]=\"vm.x\"\n                  [attr.y]=\"barTop(vm)\"\n                  [attr.width]=\"vm.width\"\n                  [attr.height]=\"barHeight()\"\n                  rx=\"4\"\n                  [style.fill]=\"vm.color\"\n                  (pointerdown)=\"onBarPointerDown($event, vm, 'move')\"\n                />\n                @if (vm.progressWidth > 0) {\n                  <rect\n                    class=\"fly-gantt__progress\"\n                    [attr.x]=\"vm.x\"\n                    [attr.y]=\"barTop(vm)\"\n                    [attr.width]=\"vm.progressWidth\"\n                    [attr.height]=\"barHeight()\"\n                    rx=\"4\"\n                  />\n                }\n                @if (vm.editable) {\n                  <!-- Resize handles at both edges. -->\n                  <rect\n                    class=\"fly-gantt__handle\"\n                    [attr.x]=\"vm.x\"\n                    [attr.y]=\"barTop(vm)\"\n                    [attr.width]=\"HANDLE_W\"\n                    [attr.height]=\"barHeight()\"\n                    [attr.aria-label]=\"'gantt.aria.resize_start' | translate\"\n                    (pointerdown)=\"onBarPointerDown($event, vm, 'resize-start')\"\n                  />\n                  <rect\n                    class=\"fly-gantt__handle\"\n                    [attr.x]=\"vm.x + vm.width - HANDLE_W\"\n                    [attr.y]=\"barTop(vm)\"\n                    [attr.width]=\"HANDLE_W\"\n                    [attr.height]=\"barHeight()\"\n                    [attr.aria-label]=\"'gantt.aria.resize_end' | translate\"\n                    (pointerdown)=\"onBarPointerDown($event, vm, 'resize-end')\"\n                  />\n                }\n                @if (!readonly() && !vm.flat.row.readonly) {\n                  <!-- One connector per END. Dragging from the start edge yields an SS/SF link\n                       and from the finish edge an FS/FF one \u2014 the drop edge picks which. -->\n                  <circle\n                    class=\"fly-gantt__connector\"\n                    [attr.cx]=\"vm.startX\"\n                    [attr.cy]=\"vm.midY\"\n                    r=\"4\"\n                    [attr.aria-label]=\"'gantt.aria.link_handle_start' | translate: { label: vm.flat.row.label }\"\n                    (pointerdown)=\"onLinkPointerDown($event, vm, 'start')\"\n                  />\n                  <circle\n                    class=\"fly-gantt__connector\"\n                    [attr.cx]=\"vm.endX\"\n                    [attr.cy]=\"vm.midY\"\n                    r=\"4\"\n                    [attr.aria-label]=\"'gantt.aria.link_handle' | translate: { label: vm.flat.row.label }\"\n                    (pointerdown)=\"onLinkPointerDown($event, vm, 'finish')\"\n                  />\n                }\n              </g>\n            }\n          }\n        </g>\n      }\n\n      <!-- Dependency arrows (skipped for missing / collapsed endpoints). Each carries a fat\n           transparent twin so a 1.5px line is still clickable at pointer precision. -->\n      @for (link of linkVms(); track link.key) {\n        <g class=\"fly-gantt__link-group\" [class.fly-gantt__link-group--selected]=\"selectedLinkKey() === link.key\">\n          <path\n            class=\"fly-gantt__link-hit\"\n            [attr.d]=\"link.path\"\n            [attr.aria-label]=\"link.ariaLabel\"\n            (click)=\"onLinkClick($event, link)\"\n          />\n          <path class=\"fly-gantt__link\" [attr.d]=\"link.path\" [attr.marker-end]=\"'url(#' + markerId + ')'\" />\n          @if (selectedLinkKey() === link.key && !readonly()) {\n            <g\n              class=\"fly-gantt__link-delete\"\n              [attr.transform]=\"'translate(' + link.badgeX + ',' + link.badgeY + ')'\"\n              [attr.aria-label]=\"'gantt.aria.delete_link' | translate\"\n              (click)=\"deleteLink($event, link)\"\n            >\n              <circle class=\"fly-gantt__link-delete-bg\" r=\"8\" />\n              <path class=\"fly-gantt__link-delete-x\" d=\"M-3.5,-3.5 L3.5,3.5 M3.5,-3.5 L-3.5,3.5\" />\n            </g>\n          }\n        </g>\n      }\n\n      <!-- In-flight link rubber band. -->\n      @if (linkGesturePath(); as gp) {\n        <path class=\"fly-gantt__link fly-gantt__link--ghost\" [attr.d]=\"gp\" [attr.marker-end]=\"'url(#' + markerId + ')'\" />\n      }\n\n      <!-- Today line (over the bars). -->\n      @if (todayX() !== null) {\n        <line class=\"fly-gantt__today\" [attr.x1]=\"todayX()\" [attr.y1]=\"0\" [attr.x2]=\"todayX()\" [attr.y2]=\"bodyHeight()\" />\n      }\n    </svg>\n  </div>\n\n  @if (visibleRows().length === 0) {\n    <p class=\"fly-gantt__empty\">{{ 'gantt.no_data' | translate }}</p>\n  }\n  @if (overflowCount() > 0) {\n    <p class=\"fly-gantt__overflow\">\n      {{ 'gantt.overflow' | translate: { shown: maxRows(), total: maxRows() + overflowCount() } }}\n    </p>\n  }\n</div>\n\n<!-- Drag candidate tooltip (HTML overlay, follows the cursor). -->\n@if (dragTooltip(); as tip) {\n  <div class=\"fly-gantt__tooltip\" [style.left.px]=\"tip.x\" [style.top.px]=\"tip.y\">{{ tip.text }}</div>\n}\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--bg-2, var(--surface-card, #fff));--_surface-alt: var(--bg-3, var(--glass-bg-elevated, #f8fafc));--_surface-hover: var(--bg-hover, var(--surface-hover, #f1f5f9));--_border: var(--w08, var(--surface-border, #e2e8f0));--_border-strong: var(--w1, var(--surface-border, #cbd5e1));--_grid-line: var(--line-3, var(--surface-border, #eef2f7));--_text: var(--ink, var(--text-color, #0f172a));--_text-subtle: var(--ink-3, var(--text-color-secondary, #64748b));--_text-faint: var(--ink-4, var(--text-color-secondary, #94a3b8));--_accent: var(--accent);--_bar: var(--_accent);--_bar-progress: color-mix(in srgb, var(--_accent) 72%, #000);--_weekend: color-mix(in srgb, var(--_text-subtle) 9%, transparent);--_today: var(--danger, #ef4444);--_link: var(--_text-subtle);--_radius: var(--r-lg, 8px);--_transition: var(--t-state, .12s ease);display:block;inline-size:100%;block-size:100%;min-block-size:200px;color:var(--_text);font-size:13px}:host(.fly-gantt--resizing){cursor:col-resize;-webkit-user-select:none;user-select:none}.fly-gantt__scroll{position:relative;inline-size:100%;block-size:100%;overflow:auto;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);box-shadow:var(--shadow-card, none);outline:none}.fly-gantt__scroll:focus-visible{outline:2px solid var(--_accent);outline-offset:-2px}.fly-gantt__canvas{display:grid;position:relative}.fly-gantt__corner{position:sticky;inset-block-start:0;inset-inline-start:0;z-index:4;background:var(--_surface-alt);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-inline-end:1px solid var(--_border);border-block-end:1px solid var(--_border-strong)}.fly-gantt__time-header{position:sticky;inset-block-start:0;z-index:3;display:block;background:var(--_surface-alt);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-block-end:1px solid var(--_border-strong)}.fly-gantt__tick-line{stroke:var(--_grid-line);stroke-width:1}.fly-gantt__tick-label{fill:var(--_text-subtle);font-size:11px;text-anchor:middle;dominant-baseline:middle}.fly-gantt__tick-label--upper{fill:var(--_text);font-weight:600}.fly-gantt__splitter{position:absolute;inset-block:0;inset-inline-end:-3px;inline-size:7px;z-index:5;cursor:col-resize;touch-action:none}.fly-gantt__splitter:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:3px;inline-size:1px;background:transparent;transition:background var(--_transition)}.fly-gantt__splitter:hover:after,.fly-gantt__splitter:focus-visible:after{background:var(--_accent)}.fly-gantt__splitter:focus-visible{outline:2px solid var(--_accent);outline-offset:-1px}:host(.fly-gantt--resizing) .fly-gantt__splitter:after{background:var(--_accent)}.fly-gantt__labels{position:sticky;inset-inline-start:0;z-index:2;background:var(--_surface);border-inline-end:1px solid var(--_border)}.fly-gantt__label-row{position:relative;display:flex;align-items:center;border-block-end:1px solid var(--_grid-line);cursor:pointer;transition:background var(--_transition)}.fly-gantt__label-row:hover{background:var(--_surface-hover)}.fly-gantt__label-row--selected{background:var(--_surface-hover);box-shadow:inset 3px 0 0 0 var(--_accent)}.fly-gantt__label-row--tinted:before{content:\"\";position:absolute;inset:0;background:var(--fly-gantt-row-tint);pointer-events:none}.fly-gantt__label-inner{position:relative;display:flex;align-items:center;gap:4px;inline-size:100%;min-inline-size:0;padding-inline-end:8px}.fly-gantt__label-swatch{flex:0 0 auto;inline-size:8px;block-size:8px;border-radius:2px}.fly-gantt__chevron{flex:0 0 auto;inline-size:18px;block-size:18px;padding:0;border:none;background:transparent;color:var(--_text-subtle);cursor:pointer;line-height:1;transform:rotate(90deg);transition:transform var(--_transition)}.fly-gantt__chevron--collapsed{transform:rotate(0)}:host(.fly-gantt--rtl) .fly-gantt__chevron--collapsed{transform:rotate(180deg)}.fly-gantt__chevron:focus-visible{outline:2px solid var(--_accent);outline-offset:1px;border-radius:4px}.fly-gantt__chevron-spacer{flex:0 0 auto;inline-size:18px}.fly-gantt__label-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-gantt__label-text--group{font-weight:600}.fly-gantt__body{display:block;touch-action:pan-x pan-y}.fly-gantt__row-band{pointer-events:none}.fly-gantt__weekend{fill:var(--_weekend)}.fly-gantt__grid-line{stroke:var(--_grid-line);stroke-width:1}.fly-gantt__row-hit{fill:transparent}.fly-gantt__row-hit--selected{fill:var(--_surface-hover)}.fly-gantt__bar{fill:var(--_bar);stroke:none}.fly-gantt__bar--editable{cursor:grab}.fly-gantt__progress{fill:var(--_bar-progress);pointer-events:none}.fly-gantt__handle{fill:transparent;cursor:ew-resize}.fly-gantt__connector{fill:var(--_surface);stroke:var(--_accent);stroke-width:1.5;cursor:crosshair;opacity:0;transition:opacity var(--_transition)}.fly-gantt__row:hover .fly-gantt__connector{opacity:1}.fly-gantt__milestone{fill:var(--_accent);stroke:var(--_surface);stroke-width:1}.fly-gantt__milestone--editable{cursor:grab}.fly-gantt__group{fill:var(--_text-subtle);stroke:var(--_text-subtle)}.fly-gantt__link{fill:none;stroke:var(--_link);stroke-width:1.5;pointer-events:none}.fly-gantt__link-hit{fill:none;stroke:transparent;stroke-width:11;pointer-events:stroke;cursor:pointer}.fly-gantt__link-group:hover .fly-gantt__link{stroke:var(--_text)}.fly-gantt__link-group--selected .fly-gantt__link{stroke:var(--_accent);stroke-width:2.5}.fly-gantt__link-delete-bg{fill:var(--_accent)}.fly-gantt__link-delete{cursor:pointer}.fly-gantt__link-delete-x{stroke:var(--_surface);stroke-width:1.75;stroke-linecap:round;fill:none;pointer-events:none}.fly-gantt__link--ghost{stroke-dasharray:4 3;opacity:.8}.fly-gantt__arrowhead{fill:var(--_link)}.fly-gantt__today{stroke:var(--_today);stroke-width:1.5;stroke-dasharray:3 3;pointer-events:none}.fly-gantt__empty,.fly-gantt__overflow{margin:0;padding:12px;color:var(--_text-faint);font-size:12px;text-align:center}.fly-gantt__tooltip{position:fixed;z-index:20;transform:translate(12px,16px);padding:4px 8px;border-radius:6px;background:var(--_text);color:var(--_surface);font-size:12px;white-space:nowrap;pointer-events:none;direction:ltr;unicode-bidi:isolate}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyGanttComponent, isStandalone: true, selector: "fly-gantt", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, dependencies: { classPropertyName: "dependencies", publicName: "dependencies", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, showToday: { classPropertyName: "showToday", publicName: "showToday", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, resizableLabels: { classPropertyName: "resizableLabels", publicName: "resizableLabels", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDatesChange: "rowDatesChange", dependencyCreate: "dependencyCreate", dependencyDelete: "dependencyDelete", rowClick: "rowClick", rowDblClick: "rowDblClick", labelWidthChange: "labelWidthChange" }, host: { properties: { "class.fly-gantt--rtl": "rtl()", "class.fly-gantt--readonly": "readonly()", "class.fly-gantt--resizing": "resizingLabels()", "attr.dir": "i18n.direction()" }, classAttribute: "fly-gantt" }, viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["bodySvg"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Cross-scrolling canvas: a CSS grid whose header row and label column are sticky, so the\r\n     time grid scrolls under a pinned header + label tree. All SVG geometry is pre-mirrored for\r\n     RTL in the component (see gantt-scale mapX), so this template never branches on direction. -->\r\n<div\r\n  class=\"fly-gantt__scroll\"\r\n  role=\"grid\"\r\n  tabindex=\"0\"\r\n  [attr.aria-label]=\"'gantt.aria.grid' | translate\"\r\n  [attr.aria-rowcount]=\"visibleRows().length\"\r\n  (keydown)=\"onGridKeydown($event)\"\r\n>\r\n  <div\r\n    class=\"fly-gantt__canvas\"\r\n    [style.grid-template-columns]=\"effectiveLabelWidth() + 'px ' + innerWidth() + 'px'\"\r\n    [style.grid-template-rows]=\"HEADER_H + 'px ' + bodyHeight() + 'px'\"\r\n  >\r\n    <!-- \u2500\u2500 Corner (pinned both axes) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"fly-gantt__corner\" [style.height.px]=\"HEADER_H\">\r\n      @if (resizableLabels()) {\r\n        <!-- The divider lives in the corner because the corner is the one cell pinned on BOTH\r\n             axes: the grip stays reachable however far the user has scrolled. The full-height\r\n             strip down the label pane below is the same gesture, presentational only. -->\r\n        <div\r\n          class=\"fly-gantt__splitter\"\r\n          role=\"separator\"\r\n          tabindex=\"0\"\r\n          aria-orientation=\"vertical\"\r\n          [attr.aria-label]=\"'gantt.aria.label_resize' | translate\"\r\n          [attr.aria-valuenow]=\"effectiveLabelWidth()\"\r\n          [attr.aria-valuemin]=\"MIN_LABEL_W\"\r\n          [attr.aria-valuemax]=\"MAX_LABEL_W\"\r\n          (pointerdown)=\"onLabelResizePointerDown($event)\"\r\n          (keydown)=\"onLabelResizeKeydown($event)\"\r\n          (dblclick)=\"resetLabelWidth()\"\r\n        ></div>\r\n      }\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Time header (pinned top) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <svg\r\n      class=\"fly-gantt__time-header\"\r\n      [attr.width]=\"innerWidth()\"\r\n      [attr.height]=\"HEADER_H\"\r\n      [attr.viewBox]=\"'0 0 ' + innerWidth() + ' ' + HEADER_H\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      @for (b of weekendBands(); track b.key) {\r\n        <rect class=\"fly-gantt__weekend\" [attr.x]=\"b.x\" [attr.y]=\"HEADER_UPPER_H\" [attr.width]=\"b.width\" [attr.height]=\"HEADER_LOWER_H\" />\r\n      }\r\n      @for (t of upperTicks(); track t.key) {\r\n        <line class=\"fly-gantt__tick-line\" [attr.x1]=\"t.x\" [attr.y1]=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"HEADER_H\" />\r\n        <text class=\"fly-gantt__tick-label fly-gantt__tick-label--upper\" [attr.x]=\"t.x + t.width / 2\" [attr.y]=\"HEADER_UPPER_H / 2 + 4\">{{ t.label }}</text>\r\n      }\r\n      @for (t of lowerTicks(); track t.key) {\r\n        <line class=\"fly-gantt__tick-line\" [attr.x1]=\"t.x\" [attr.y1]=\"HEADER_UPPER_H\" [attr.x2]=\"t.x\" [attr.y2]=\"HEADER_H\" />\r\n        <text class=\"fly-gantt__tick-label\" [attr.x]=\"t.x + t.width / 2\" [attr.y]=\"HEADER_UPPER_H + HEADER_LOWER_H / 2 + 4\">{{ t.label }}</text>\r\n      }\r\n      @if (todayX() !== null) {\r\n        <line class=\"fly-gantt__today\" [attr.x1]=\"todayX()\" [attr.y1]=\"HEADER_UPPER_H\" [attr.x2]=\"todayX()\" [attr.y2]=\"HEADER_H\" />\r\n      }\r\n    </svg>\r\n\r\n    <!-- \u2500\u2500 Label tree (pinned inline-start) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"fly-gantt__labels\" role=\"rowgroup\">\r\n      @for (vm of rowVms(); track vm.flat.row.id) {\r\n        <div\r\n          class=\"fly-gantt__label-row\"\r\n          role=\"row\"\r\n          tabindex=\"-1\"\r\n          [class.fly-gantt__label-row--selected]=\"selectedId() === vm.flat.row.id\"\r\n          [class.fly-gantt__label-row--tinted]=\"vm.tint !== null\"\r\n          [style.height.px]=\"rowHeight()\"\r\n          [style.--fly-gantt-row-tint]=\"vm.tint\"\r\n          [attr.aria-selected]=\"selectedId() === vm.flat.row.id\"\r\n          [attr.aria-label]=\"vm.ariaLabel\"\r\n          (click)=\"onRowClick(vm.flat.row.id)\"\r\n          (dblclick)=\"onRowDblClick(vm.flat.row.id)\"\r\n          (keydown.enter)=\"onLabelRowKeydown($event, vm.flat.row.id)\"\r\n        >\r\n          <span class=\"fly-gantt__label-inner\" [style.padding-inline-start.px]=\"indentFor(vm.flat.depth)\">\r\n            @if (vm.flat.hasChildren) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"fly-gantt__chevron\"\r\n                [class.fly-gantt__chevron--collapsed]=\"isCollapsed(vm.flat.row.id)\"\r\n                [attr.aria-label]=\"(isCollapsed(vm.flat.row.id) ? 'gantt.expand' : 'gantt.collapse') | translate\"\r\n                [attr.aria-expanded]=\"!isCollapsed(vm.flat.row.id)\"\r\n                (click)=\"toggleCollapse(vm.flat.row.id, $event)\"\r\n              >\u25B8</button>\r\n            } @else {\r\n              <span class=\"fly-gantt__chevron-spacer\"></span>\r\n            }\r\n            @if (vm.color) {\r\n              <!-- Colour chip: the row's own colour at full strength, so a milestone stays\r\n                   identifiable in the label pane where the band tint is deliberately faint. -->\r\n              <span class=\"fly-gantt__label-swatch\" [style.background]=\"vm.color\" aria-hidden=\"true\"></span>\r\n            }\r\n            <span\r\n              class=\"fly-gantt__label-text\"\r\n              [class.fly-gantt__label-text--group]=\"vm.shape === 'group'\"\r\n              [title]=\"vm.flat.row.label\"\r\n            >{{ vm.flat.row.label }}</span>\r\n          </span>\r\n        </div>\r\n      }\r\n      @if (resizableLabels()) {\r\n        <!-- aria-hidden so this presentational twin of the corner separator is not a second\r\n             (and structurally invalid) child of the rowgroup in the accessibility tree. -->\r\n        <div\r\n          class=\"fly-gantt__splitter fly-gantt__splitter--rail\"\r\n          aria-hidden=\"true\"\r\n          (pointerdown)=\"onLabelResizePointerDown($event)\"\r\n          (dblclick)=\"resetLabelWidth()\"\r\n        ></div>\r\n      }\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Time grid body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <svg\r\n      #bodySvg\r\n      class=\"fly-gantt__body\"\r\n      [attr.width]=\"innerWidth()\"\r\n      [attr.height]=\"bodyHeight()\"\r\n      [attr.viewBox]=\"'0 0 ' + innerWidth() + ' ' + bodyHeight()\"\r\n    >\r\n      <defs>\r\n        <marker\r\n          [attr.id]=\"markerId\"\r\n          markerWidth=\"8\"\r\n          markerHeight=\"8\"\r\n          refX=\"6\"\r\n          refY=\"4\"\r\n          orient=\"auto\"\r\n          markerUnits=\"userSpaceOnUse\"\r\n        >\r\n          <path class=\"fly-gantt__arrowhead\" d=\"M0,0 L7,4 L0,8 Z\" />\r\n        </marker>\r\n      </defs>\r\n\r\n      <!-- Row colour bands sit at the very bottom of the stack, so the weekend shading and the\r\n           gridlines below still read through them. -->\r\n      @for (vm of tintedRows(); track vm.flat.row.id) {\r\n        <rect\r\n          class=\"fly-gantt__row-band\"\r\n          [attr.x]=\"0\"\r\n          [attr.y]=\"vm.y\"\r\n          [attr.width]=\"innerWidth()\"\r\n          [attr.height]=\"rowHeight()\"\r\n          [style.fill]=\"vm.tint\"\r\n        />\r\n      }\r\n\r\n      <!-- Weekend shading + vertical gridlines (behind the bars). -->\r\n      @for (b of weekendBands(); track b.key) {\r\n        <rect class=\"fly-gantt__weekend\" [attr.x]=\"b.x\" [attr.y]=\"0\" [attr.width]=\"b.width\" [attr.height]=\"bodyHeight()\" />\r\n      }\r\n      @for (t of lowerTicks(); track t.key) {\r\n        <line class=\"fly-gantt__grid-line\" [attr.x1]=\"t.x\" [attr.y1]=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"bodyHeight()\" />\r\n      }\r\n\r\n      <!-- Rows: a full-width hit rect (click + link drop target) then the shape. -->\r\n      @for (vm of rowVms(); track vm.flat.row.id) {\r\n        <g class=\"fly-gantt__row\" [attr.data-row-id]=\"vm.flat.row.id\">\r\n          <rect\r\n            class=\"fly-gantt__row-hit\"\r\n            [class.fly-gantt__row-hit--selected]=\"selectedId() === vm.flat.row.id\"\r\n            [attr.x]=\"0\"\r\n            [attr.y]=\"vm.y\"\r\n            [attr.width]=\"innerWidth()\"\r\n            [attr.height]=\"rowHeight()\"\r\n            (pointerdown)=\"onRowClick(vm.flat.row.id)\"\r\n            (dblclick)=\"onRowDblClick(vm.flat.row.id)\"\r\n          />\r\n\r\n          @switch (vm.shape) {\r\n            @case ('group') {\r\n              <path class=\"fly-gantt__group\" [attr.d]=\"groupPath(vm)\" [style.fill]=\"vm.color\" [style.stroke]=\"vm.color\" />\r\n            }\r\n            @case ('milestone') {\r\n              <polygon\r\n                class=\"fly-gantt__milestone\"\r\n                [class.fly-gantt__milestone--editable]=\"vm.editable\"\r\n                [attr.points]=\"diamondPoints(vm)\"\r\n                [style.fill]=\"vm.color\"\r\n                (pointerdown)=\"onBarPointerDown($event, vm, 'move')\"\r\n              />\r\n              @if (!readonly() && !vm.flat.row.readonly) {\r\n                <!-- A diamond has no width, so one connector serves it; it reads as the finish\r\n                     end, which is what makes a milestone\u2192task drag the FS everyone expects. -->\r\n                <circle\r\n                  class=\"fly-gantt__connector\"\r\n                  [attr.cx]=\"milestoneConnectorX(vm)\"\r\n                  [attr.cy]=\"vm.midY\"\r\n                  r=\"4\"\r\n                  [attr.aria-label]=\"'gantt.aria.link_handle' | translate: { label: vm.flat.row.label }\"\r\n                  (pointerdown)=\"onLinkPointerDown($event, vm, 'finish')\"\r\n                />\r\n              }\r\n            }\r\n            @case ('bar') {\r\n              <g class=\"fly-gantt__bar-group\">\r\n                <rect\r\n                  class=\"fly-gantt__bar\"\r\n                  [class.fly-gantt__bar--editable]=\"vm.editable\"\r\n                  [attr.x]=\"vm.x\"\r\n                  [attr.y]=\"barTop(vm)\"\r\n                  [attr.width]=\"vm.width\"\r\n                  [attr.height]=\"barHeight()\"\r\n                  rx=\"4\"\r\n                  [style.fill]=\"vm.color\"\r\n                  (pointerdown)=\"onBarPointerDown($event, vm, 'move')\"\r\n                />\r\n                @if (vm.progressWidth > 0) {\r\n                  <rect\r\n                    class=\"fly-gantt__progress\"\r\n                    [attr.x]=\"vm.x\"\r\n                    [attr.y]=\"barTop(vm)\"\r\n                    [attr.width]=\"vm.progressWidth\"\r\n                    [attr.height]=\"barHeight()\"\r\n                    rx=\"4\"\r\n                  />\r\n                }\r\n                @if (vm.editable) {\r\n                  <!-- Resize handles at both edges. -->\r\n                  <rect\r\n                    class=\"fly-gantt__handle\"\r\n                    [attr.x]=\"vm.x\"\r\n                    [attr.y]=\"barTop(vm)\"\r\n                    [attr.width]=\"HANDLE_W\"\r\n                    [attr.height]=\"barHeight()\"\r\n                    [attr.aria-label]=\"'gantt.aria.resize_start' | translate\"\r\n                    (pointerdown)=\"onBarPointerDown($event, vm, 'resize-start')\"\r\n                  />\r\n                  <rect\r\n                    class=\"fly-gantt__handle\"\r\n                    [attr.x]=\"vm.x + vm.width - HANDLE_W\"\r\n                    [attr.y]=\"barTop(vm)\"\r\n                    [attr.width]=\"HANDLE_W\"\r\n                    [attr.height]=\"barHeight()\"\r\n                    [attr.aria-label]=\"'gantt.aria.resize_end' | translate\"\r\n                    (pointerdown)=\"onBarPointerDown($event, vm, 'resize-end')\"\r\n                  />\r\n                }\r\n                @if (!readonly() && !vm.flat.row.readonly) {\r\n                  <!-- One connector per END. Dragging from the start edge yields an SS/SF link\r\n                       and from the finish edge an FS/FF one \u2014 the drop edge picks which. -->\r\n                  <circle\r\n                    class=\"fly-gantt__connector\"\r\n                    [attr.cx]=\"vm.startX\"\r\n                    [attr.cy]=\"vm.midY\"\r\n                    r=\"4\"\r\n                    [attr.aria-label]=\"'gantt.aria.link_handle_start' | translate: { label: vm.flat.row.label }\"\r\n                    (pointerdown)=\"onLinkPointerDown($event, vm, 'start')\"\r\n                  />\r\n                  <circle\r\n                    class=\"fly-gantt__connector\"\r\n                    [attr.cx]=\"vm.endX\"\r\n                    [attr.cy]=\"vm.midY\"\r\n                    r=\"4\"\r\n                    [attr.aria-label]=\"'gantt.aria.link_handle' | translate: { label: vm.flat.row.label }\"\r\n                    (pointerdown)=\"onLinkPointerDown($event, vm, 'finish')\"\r\n                  />\r\n                }\r\n              </g>\r\n            }\r\n          }\r\n        </g>\r\n      }\r\n\r\n      <!-- Dependency arrows (skipped for missing / collapsed endpoints). Each carries a fat\r\n           transparent twin so a 1.5px line is still clickable at pointer precision. -->\r\n      @for (link of linkVms(); track link.key) {\r\n        <g class=\"fly-gantt__link-group\" [class.fly-gantt__link-group--selected]=\"selectedLinkKey() === link.key\">\r\n          <path\r\n            class=\"fly-gantt__link-hit\"\r\n            [attr.d]=\"link.path\"\r\n            [attr.aria-label]=\"link.ariaLabel\"\r\n            (click)=\"onLinkClick($event, link)\"\r\n          />\r\n          <path class=\"fly-gantt__link\" [attr.d]=\"link.path\" [attr.marker-end]=\"'url(#' + markerId + ')'\" />\r\n          @if (selectedLinkKey() === link.key && !readonly()) {\r\n            <g\r\n              class=\"fly-gantt__link-delete\"\r\n              [attr.transform]=\"'translate(' + link.badgeX + ',' + link.badgeY + ')'\"\r\n              [attr.aria-label]=\"'gantt.aria.delete_link' | translate\"\r\n              (click)=\"deleteLink($event, link)\"\r\n            >\r\n              <circle class=\"fly-gantt__link-delete-bg\" r=\"8\" />\r\n              <path class=\"fly-gantt__link-delete-x\" d=\"M-3.5,-3.5 L3.5,3.5 M3.5,-3.5 L-3.5,3.5\" />\r\n            </g>\r\n          }\r\n        </g>\r\n      }\r\n\r\n      <!-- In-flight link rubber band. -->\r\n      @if (linkGesturePath(); as gp) {\r\n        <path class=\"fly-gantt__link fly-gantt__link--ghost\" [attr.d]=\"gp\" [attr.marker-end]=\"'url(#' + markerId + ')'\" />\r\n      }\r\n\r\n      <!-- Today line (over the bars). -->\r\n      @if (todayX() !== null) {\r\n        <line class=\"fly-gantt__today\" [attr.x1]=\"todayX()\" [attr.y1]=\"0\" [attr.x2]=\"todayX()\" [attr.y2]=\"bodyHeight()\" />\r\n      }\r\n    </svg>\r\n  </div>\r\n\r\n  @if (visibleRows().length === 0) {\r\n    <p class=\"fly-gantt__empty\">{{ 'gantt.no_data' | translate }}</p>\r\n  }\r\n  @if (overflowCount() > 0) {\r\n    <p class=\"fly-gantt__overflow\">\r\n      {{ 'gantt.overflow' | translate: { shown: maxRows(), total: maxRows() + overflowCount() } }}\r\n    </p>\r\n  }\r\n</div>\r\n\r\n<!-- Drag candidate tooltip (HTML overlay, follows the cursor). -->\r\n@if (dragTooltip(); as tip) {\r\n  <div class=\"fly-gantt__tooltip\" [style.left.px]=\"tip.x\" [style.top.px]=\"tip.y\">{{ tip.text }}</div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--bg-2, var(--surface-card, #fff));--_surface-alt: var(--bg-3, var(--glass-bg-elevated, #f8fafc));--_surface-hover: var(--bg-hover, var(--surface-hover, #f1f5f9));--_border: var(--w08, var(--surface-border, #e2e8f0));--_border-strong: var(--w1, var(--surface-border, #cbd5e1));--_grid-line: var(--line-3, var(--surface-border, #eef2f7));--_text: var(--ink, var(--text-color, #0f172a));--_text-subtle: var(--ink-3, var(--text-color-secondary, #64748b));--_text-faint: var(--ink-4, var(--text-color-secondary, #94a3b8));--_accent: var(--accent);--_bar: var(--_accent);--_bar-progress: color-mix(in srgb, var(--_accent) 72%, #000);--_weekend: color-mix(in srgb, var(--_text-subtle) 9%, transparent);--_today: var(--danger, #ef4444);--_link: var(--_text-subtle);--_radius: var(--r-lg, 8px);--_transition: var(--t-state, .12s ease);display:block;inline-size:100%;block-size:100%;min-block-size:200px;color:var(--_text);font-size:13px}:host(.fly-gantt--resizing){cursor:col-resize;-webkit-user-select:none;user-select:none}.fly-gantt__scroll{position:relative;inline-size:100%;block-size:100%;overflow:auto;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);box-shadow:var(--shadow-card, none);outline:none}.fly-gantt__scroll:focus-visible{outline:2px solid var(--_accent);outline-offset:-2px}.fly-gantt__canvas{display:grid;position:relative}.fly-gantt__corner{position:sticky;inset-block-start:0;inset-inline-start:0;z-index:4;background:var(--_surface-alt);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-inline-end:1px solid var(--_border);border-block-end:1px solid var(--_border-strong)}.fly-gantt__time-header{position:sticky;inset-block-start:0;z-index:3;display:block;background:var(--_surface-alt);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-block-end:1px solid var(--_border-strong)}.fly-gantt__tick-line{stroke:var(--_grid-line);stroke-width:1}.fly-gantt__tick-label{fill:var(--_text-subtle);font-size:11px;text-anchor:middle;dominant-baseline:middle}.fly-gantt__tick-label--upper{fill:var(--_text);font-weight:600}.fly-gantt__splitter{position:absolute;inset-block:0;inset-inline-end:-3px;inline-size:7px;z-index:5;cursor:col-resize;touch-action:none}.fly-gantt__splitter:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:3px;inline-size:1px;background:transparent;transition:background var(--_transition)}.fly-gantt__splitter:hover:after,.fly-gantt__splitter:focus-visible:after{background:var(--_accent)}.fly-gantt__splitter:focus-visible{outline:2px solid var(--_accent);outline-offset:-1px}:host(.fly-gantt--resizing) .fly-gantt__splitter:after{background:var(--_accent)}.fly-gantt__labels{position:sticky;inset-inline-start:0;z-index:2;background:var(--_surface);border-inline-end:1px solid var(--_border)}.fly-gantt__label-row{position:relative;display:flex;align-items:center;border-block-end:1px solid var(--_grid-line);cursor:pointer;transition:background var(--_transition)}.fly-gantt__label-row:hover{background:var(--_surface-hover)}.fly-gantt__label-row--selected{background:var(--_surface-hover);box-shadow:inset 3px 0 0 0 var(--_accent)}.fly-gantt__label-row--tinted:before{content:\"\";position:absolute;inset:0;background:var(--fly-gantt-row-tint);pointer-events:none}.fly-gantt__label-inner{position:relative;display:flex;align-items:center;gap:4px;inline-size:100%;min-inline-size:0;padding-inline-end:8px}.fly-gantt__label-swatch{flex:0 0 auto;inline-size:8px;block-size:8px;border-radius:2px}.fly-gantt__chevron{flex:0 0 auto;inline-size:18px;block-size:18px;padding:0;border:none;background:transparent;color:var(--_text-subtle);cursor:pointer;line-height:1;transform:rotate(90deg);transition:transform var(--_transition)}.fly-gantt__chevron--collapsed{transform:rotate(0)}:host(.fly-gantt--rtl) .fly-gantt__chevron--collapsed{transform:rotate(180deg)}.fly-gantt__chevron:focus-visible{outline:2px solid var(--_accent);outline-offset:1px;border-radius:4px}.fly-gantt__chevron-spacer{flex:0 0 auto;inline-size:18px}.fly-gantt__label-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-gantt__label-text--group{font-weight:600}.fly-gantt__body{display:block;touch-action:pan-x pan-y}.fly-gantt__row-band{pointer-events:none}.fly-gantt__weekend{fill:var(--_weekend)}.fly-gantt__grid-line{stroke:var(--_grid-line);stroke-width:1}.fly-gantt__row-hit{fill:transparent}.fly-gantt__row-hit--selected{fill:var(--_surface-hover)}.fly-gantt__bar{fill:var(--_bar);stroke:none}.fly-gantt__bar--editable{cursor:grab}.fly-gantt__progress{fill:var(--_bar-progress);pointer-events:none}.fly-gantt__handle{fill:transparent;cursor:ew-resize}.fly-gantt__connector{fill:var(--_surface);stroke:var(--_accent);stroke-width:1.5;cursor:crosshair;opacity:0;transition:opacity var(--_transition)}.fly-gantt__row:hover .fly-gantt__connector{opacity:1}.fly-gantt__milestone{fill:var(--_accent);stroke:var(--_surface);stroke-width:1}.fly-gantt__milestone--editable{cursor:grab}.fly-gantt__group{fill:var(--_text-subtle);stroke:var(--_text-subtle)}.fly-gantt__link{fill:none;stroke:var(--_link);stroke-width:1.5;pointer-events:none}.fly-gantt__link-hit{fill:none;stroke:transparent;stroke-width:11;pointer-events:stroke;cursor:pointer}.fly-gantt__link-group:hover .fly-gantt__link{stroke:var(--_text)}.fly-gantt__link-group--selected .fly-gantt__link{stroke:var(--_accent);stroke-width:2.5}.fly-gantt__link-delete-bg{fill:var(--_accent)}.fly-gantt__link-delete{cursor:pointer}.fly-gantt__link-delete-x{stroke:var(--_surface);stroke-width:1.75;stroke-linecap:round;fill:none;pointer-events:none}.fly-gantt__link--ghost{stroke-dasharray:4 3;opacity:.8}.fly-gantt__arrowhead{fill:var(--_link)}.fly-gantt__today{stroke:var(--_today);stroke-width:1.5;stroke-dasharray:3 3;pointer-events:none}.fly-gantt__empty,.fly-gantt__overflow{margin:0;padding:12px;color:var(--_text-faint);font-size:12px;text-align:center}.fly-gantt__tooltip{position:fixed;z-index:20;transform:translate(12px,16px);padding:4px 8px;border-radius:6px;background:var(--_text);color:var(--_surface);font-size:12px;white-space:nowrap;pointer-events:none;direction:ltr;unicode-bidi:isolate}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyGanttComponent, decorators: [{
             type: Component,
@@ -13552,7 +13840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         '[class.fly-gantt--readonly]': 'readonly()',
                         '[class.fly-gantt--resizing]': 'resizingLabels()',
                         '[attr.dir]': 'i18n.direction()',
-                    }, template: "<!-- Cross-scrolling canvas: a CSS grid whose header row and label column are sticky, so the\n     time grid scrolls under a pinned header + label tree. All SVG geometry is pre-mirrored for\n     RTL in the component (see gantt-scale mapX), so this template never branches on direction. -->\n<div\n  class=\"fly-gantt__scroll\"\n  role=\"grid\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"'gantt.aria.grid' | translate\"\n  [attr.aria-rowcount]=\"visibleRows().length\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <div\n    class=\"fly-gantt__canvas\"\n    [style.grid-template-columns]=\"effectiveLabelWidth() + 'px ' + innerWidth() + 'px'\"\n    [style.grid-template-rows]=\"HEADER_H + 'px ' + bodyHeight() + 'px'\"\n  >\n    <!-- \u2500\u2500 Corner (pinned both axes) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"fly-gantt__corner\" [style.height.px]=\"HEADER_H\">\n      @if (resizableLabels()) {\n        <!-- The divider lives in the corner because the corner is the one cell pinned on BOTH\n             axes: the grip stays reachable however far the user has scrolled. The full-height\n             strip down the label pane below is the same gesture, presentational only. -->\n        <div\n          class=\"fly-gantt__splitter\"\n          role=\"separator\"\n          tabindex=\"0\"\n          aria-orientation=\"vertical\"\n          [attr.aria-label]=\"'gantt.aria.label_resize' | translate\"\n          [attr.aria-valuenow]=\"effectiveLabelWidth()\"\n          [attr.aria-valuemin]=\"MIN_LABEL_W\"\n          [attr.aria-valuemax]=\"MAX_LABEL_W\"\n          (pointerdown)=\"onLabelResizePointerDown($event)\"\n          (keydown)=\"onLabelResizeKeydown($event)\"\n          (dblclick)=\"resetLabelWidth()\"\n        ></div>\n      }\n    </div>\n\n    <!-- \u2500\u2500 Time header (pinned top) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <svg\n      class=\"fly-gantt__time-header\"\n      [attr.width]=\"innerWidth()\"\n      [attr.height]=\"HEADER_H\"\n      [attr.viewBox]=\"'0 0 ' + innerWidth() + ' ' + HEADER_H\"\n      aria-hidden=\"true\"\n    >\n      @for (b of weekendBands(); track b.key) {\n        <rect class=\"fly-gantt__weekend\" [attr.x]=\"b.x\" [attr.y]=\"HEADER_UPPER_H\" [attr.width]=\"b.width\" [attr.height]=\"HEADER_LOWER_H\" />\n      }\n      @for (t of upperTicks(); track t.key) {\n        <line class=\"fly-gantt__tick-line\" [attr.x1]=\"t.x\" [attr.y1]=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"HEADER_H\" />\n        <text class=\"fly-gantt__tick-label fly-gantt__tick-label--upper\" [attr.x]=\"t.x + t.width / 2\" [attr.y]=\"HEADER_UPPER_H / 2 + 4\">{{ t.label }}</text>\n      }\n      @for (t of lowerTicks(); track t.key) {\n        <line class=\"fly-gantt__tick-line\" [attr.x1]=\"t.x\" [attr.y1]=\"HEADER_UPPER_H\" [attr.x2]=\"t.x\" [attr.y2]=\"HEADER_H\" />\n        <text class=\"fly-gantt__tick-label\" [attr.x]=\"t.x + t.width / 2\" [attr.y]=\"HEADER_UPPER_H + HEADER_LOWER_H / 2 + 4\">{{ t.label }}</text>\n      }\n      @if (todayX() !== null) {\n        <line class=\"fly-gantt__today\" [attr.x1]=\"todayX()\" [attr.y1]=\"HEADER_UPPER_H\" [attr.x2]=\"todayX()\" [attr.y2]=\"HEADER_H\" />\n      }\n    </svg>\n\n    <!-- \u2500\u2500 Label tree (pinned inline-start) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"fly-gantt__labels\" role=\"rowgroup\">\n      @for (vm of rowVms(); track vm.flat.row.id) {\n        <div\n          class=\"fly-gantt__label-row\"\n          role=\"row\"\n          tabindex=\"-1\"\n          [class.fly-gantt__label-row--selected]=\"selectedId() === vm.flat.row.id\"\n          [class.fly-gantt__label-row--tinted]=\"vm.tint !== null\"\n          [style.height.px]=\"rowHeight()\"\n          [style.--fly-gantt-row-tint]=\"vm.tint\"\n          [attr.aria-selected]=\"selectedId() === vm.flat.row.id\"\n          [attr.aria-label]=\"vm.ariaLabel\"\n          (click)=\"onRowClick(vm.flat.row.id)\"\n          (dblclick)=\"onRowDblClick(vm.flat.row.id)\"\n          (keydown.enter)=\"onLabelRowKeydown($event, vm.flat.row.id)\"\n        >\n          <span class=\"fly-gantt__label-inner\" [style.padding-inline-start.px]=\"indentFor(vm.flat.depth)\">\n            @if (vm.flat.hasChildren) {\n              <button\n                type=\"button\"\n                class=\"fly-gantt__chevron\"\n                [class.fly-gantt__chevron--collapsed]=\"isCollapsed(vm.flat.row.id)\"\n                [attr.aria-label]=\"(isCollapsed(vm.flat.row.id) ? 'gantt.expand' : 'gantt.collapse') | translate\"\n                [attr.aria-expanded]=\"!isCollapsed(vm.flat.row.id)\"\n                (click)=\"toggleCollapse(vm.flat.row.id, $event)\"\n              >\u25B8</button>\n            } @else {\n              <span class=\"fly-gantt__chevron-spacer\"></span>\n            }\n            @if (vm.color) {\n              <!-- Colour chip: the row's own colour at full strength, so a milestone stays\n                   identifiable in the label pane where the band tint is deliberately faint. -->\n              <span class=\"fly-gantt__label-swatch\" [style.background]=\"vm.color\" aria-hidden=\"true\"></span>\n            }\n            <span\n              class=\"fly-gantt__label-text\"\n              [class.fly-gantt__label-text--group]=\"vm.shape === 'group'\"\n              [title]=\"vm.flat.row.label\"\n            >{{ vm.flat.row.label }}</span>\n          </span>\n        </div>\n      }\n      @if (resizableLabels()) {\n        <!-- aria-hidden so this presentational twin of the corner separator is not a second\n             (and structurally invalid) child of the rowgroup in the accessibility tree. -->\n        <div\n          class=\"fly-gantt__splitter fly-gantt__splitter--rail\"\n          aria-hidden=\"true\"\n          (pointerdown)=\"onLabelResizePointerDown($event)\"\n          (dblclick)=\"resetLabelWidth()\"\n        ></div>\n      }\n    </div>\n\n    <!-- \u2500\u2500 Time grid body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <svg\n      #bodySvg\n      class=\"fly-gantt__body\"\n      [attr.width]=\"innerWidth()\"\n      [attr.height]=\"bodyHeight()\"\n      [attr.viewBox]=\"'0 0 ' + innerWidth() + ' ' + bodyHeight()\"\n    >\n      <defs>\n        <marker\n          [attr.id]=\"markerId\"\n          markerWidth=\"8\"\n          markerHeight=\"8\"\n          refX=\"6\"\n          refY=\"4\"\n          orient=\"auto\"\n          markerUnits=\"userSpaceOnUse\"\n        >\n          <path class=\"fly-gantt__arrowhead\" d=\"M0,0 L7,4 L0,8 Z\" />\n        </marker>\n      </defs>\n\n      <!-- Row colour bands sit at the very bottom of the stack, so the weekend shading and the\n           gridlines below still read through them. -->\n      @for (vm of tintedRows(); track vm.flat.row.id) {\n        <rect\n          class=\"fly-gantt__row-band\"\n          [attr.x]=\"0\"\n          [attr.y]=\"vm.y\"\n          [attr.width]=\"innerWidth()\"\n          [attr.height]=\"rowHeight()\"\n          [style.fill]=\"vm.tint\"\n        />\n      }\n\n      <!-- Weekend shading + vertical gridlines (behind the bars). -->\n      @for (b of weekendBands(); track b.key) {\n        <rect class=\"fly-gantt__weekend\" [attr.x]=\"b.x\" [attr.y]=\"0\" [attr.width]=\"b.width\" [attr.height]=\"bodyHeight()\" />\n      }\n      @for (t of lowerTicks(); track t.key) {\n        <line class=\"fly-gantt__grid-line\" [attr.x1]=\"t.x\" [attr.y1]=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"bodyHeight()\" />\n      }\n\n      <!-- Rows: a full-width hit rect (click + link drop target) then the shape. -->\n      @for (vm of rowVms(); track vm.flat.row.id) {\n        <g class=\"fly-gantt__row\" [attr.data-row-id]=\"vm.flat.row.id\">\n          <rect\n            class=\"fly-gantt__row-hit\"\n            [class.fly-gantt__row-hit--selected]=\"selectedId() === vm.flat.row.id\"\n            [attr.x]=\"0\"\n            [attr.y]=\"vm.y\"\n            [attr.width]=\"innerWidth()\"\n            [attr.height]=\"rowHeight()\"\n            (pointerdown)=\"onRowClick(vm.flat.row.id)\"\n            (dblclick)=\"onRowDblClick(vm.flat.row.id)\"\n          />\n\n          @switch (vm.shape) {\n            @case ('group') {\n              <path class=\"fly-gantt__group\" [attr.d]=\"groupPath(vm)\" [style.fill]=\"vm.color\" [style.stroke]=\"vm.color\" />\n            }\n            @case ('milestone') {\n              <polygon\n                class=\"fly-gantt__milestone\"\n                [class.fly-gantt__milestone--editable]=\"vm.editable\"\n                [attr.points]=\"diamondPoints(vm)\"\n                [style.fill]=\"vm.color\"\n                (pointerdown)=\"onBarPointerDown($event, vm, 'move')\"\n              />\n              @if (!readonly() && !vm.flat.row.readonly) {\n                <!-- A diamond has no width, so one connector serves it; it reads as the finish\n                     end, which is what makes a milestone\u2192task drag the FS everyone expects. -->\n                <circle\n                  class=\"fly-gantt__connector\"\n                  [attr.cx]=\"milestoneConnectorX(vm)\"\n                  [attr.cy]=\"vm.midY\"\n                  r=\"4\"\n                  [attr.aria-label]=\"'gantt.aria.link_handle' | translate: { label: vm.flat.row.label }\"\n                  (pointerdown)=\"onLinkPointerDown($event, vm, 'finish')\"\n                />\n              }\n            }\n            @case ('bar') {\n              <g class=\"fly-gantt__bar-group\">\n                <rect\n                  class=\"fly-gantt__bar\"\n                  [class.fly-gantt__bar--editable]=\"vm.editable\"\n                  [attr.x]=\"vm.x\"\n                  [attr.y]=\"barTop(vm)\"\n                  [attr.width]=\"vm.width\"\n                  [attr.height]=\"barHeight()\"\n                  rx=\"4\"\n                  [style.fill]=\"vm.color\"\n                  (pointerdown)=\"onBarPointerDown($event, vm, 'move')\"\n                />\n                @if (vm.progressWidth > 0) {\n                  <rect\n                    class=\"fly-gantt__progress\"\n                    [attr.x]=\"vm.x\"\n                    [attr.y]=\"barTop(vm)\"\n                    [attr.width]=\"vm.progressWidth\"\n                    [attr.height]=\"barHeight()\"\n                    rx=\"4\"\n                  />\n                }\n                @if (vm.editable) {\n                  <!-- Resize handles at both edges. -->\n                  <rect\n                    class=\"fly-gantt__handle\"\n                    [attr.x]=\"vm.x\"\n                    [attr.y]=\"barTop(vm)\"\n                    [attr.width]=\"HANDLE_W\"\n                    [attr.height]=\"barHeight()\"\n                    [attr.aria-label]=\"'gantt.aria.resize_start' | translate\"\n                    (pointerdown)=\"onBarPointerDown($event, vm, 'resize-start')\"\n                  />\n                  <rect\n                    class=\"fly-gantt__handle\"\n                    [attr.x]=\"vm.x + vm.width - HANDLE_W\"\n                    [attr.y]=\"barTop(vm)\"\n                    [attr.width]=\"HANDLE_W\"\n                    [attr.height]=\"barHeight()\"\n                    [attr.aria-label]=\"'gantt.aria.resize_end' | translate\"\n                    (pointerdown)=\"onBarPointerDown($event, vm, 'resize-end')\"\n                  />\n                }\n                @if (!readonly() && !vm.flat.row.readonly) {\n                  <!-- One connector per END. Dragging from the start edge yields an SS/SF link\n                       and from the finish edge an FS/FF one \u2014 the drop edge picks which. -->\n                  <circle\n                    class=\"fly-gantt__connector\"\n                    [attr.cx]=\"vm.startX\"\n                    [attr.cy]=\"vm.midY\"\n                    r=\"4\"\n                    [attr.aria-label]=\"'gantt.aria.link_handle_start' | translate: { label: vm.flat.row.label }\"\n                    (pointerdown)=\"onLinkPointerDown($event, vm, 'start')\"\n                  />\n                  <circle\n                    class=\"fly-gantt__connector\"\n                    [attr.cx]=\"vm.endX\"\n                    [attr.cy]=\"vm.midY\"\n                    r=\"4\"\n                    [attr.aria-label]=\"'gantt.aria.link_handle' | translate: { label: vm.flat.row.label }\"\n                    (pointerdown)=\"onLinkPointerDown($event, vm, 'finish')\"\n                  />\n                }\n              </g>\n            }\n          }\n        </g>\n      }\n\n      <!-- Dependency arrows (skipped for missing / collapsed endpoints). Each carries a fat\n           transparent twin so a 1.5px line is still clickable at pointer precision. -->\n      @for (link of linkVms(); track link.key) {\n        <g class=\"fly-gantt__link-group\" [class.fly-gantt__link-group--selected]=\"selectedLinkKey() === link.key\">\n          <path\n            class=\"fly-gantt__link-hit\"\n            [attr.d]=\"link.path\"\n            [attr.aria-label]=\"link.ariaLabel\"\n            (click)=\"onLinkClick($event, link)\"\n          />\n          <path class=\"fly-gantt__link\" [attr.d]=\"link.path\" [attr.marker-end]=\"'url(#' + markerId + ')'\" />\n          @if (selectedLinkKey() === link.key && !readonly()) {\n            <g\n              class=\"fly-gantt__link-delete\"\n              [attr.transform]=\"'translate(' + link.badgeX + ',' + link.badgeY + ')'\"\n              [attr.aria-label]=\"'gantt.aria.delete_link' | translate\"\n              (click)=\"deleteLink($event, link)\"\n            >\n              <circle class=\"fly-gantt__link-delete-bg\" r=\"8\" />\n              <path class=\"fly-gantt__link-delete-x\" d=\"M-3.5,-3.5 L3.5,3.5 M3.5,-3.5 L-3.5,3.5\" />\n            </g>\n          }\n        </g>\n      }\n\n      <!-- In-flight link rubber band. -->\n      @if (linkGesturePath(); as gp) {\n        <path class=\"fly-gantt__link fly-gantt__link--ghost\" [attr.d]=\"gp\" [attr.marker-end]=\"'url(#' + markerId + ')'\" />\n      }\n\n      <!-- Today line (over the bars). -->\n      @if (todayX() !== null) {\n        <line class=\"fly-gantt__today\" [attr.x1]=\"todayX()\" [attr.y1]=\"0\" [attr.x2]=\"todayX()\" [attr.y2]=\"bodyHeight()\" />\n      }\n    </svg>\n  </div>\n\n  @if (visibleRows().length === 0) {\n    <p class=\"fly-gantt__empty\">{{ 'gantt.no_data' | translate }}</p>\n  }\n  @if (overflowCount() > 0) {\n    <p class=\"fly-gantt__overflow\">\n      {{ 'gantt.overflow' | translate: { shown: maxRows(), total: maxRows() + overflowCount() } }}\n    </p>\n  }\n</div>\n\n<!-- Drag candidate tooltip (HTML overlay, follows the cursor). -->\n@if (dragTooltip(); as tip) {\n  <div class=\"fly-gantt__tooltip\" [style.left.px]=\"tip.x\" [style.top.px]=\"tip.y\">{{ tip.text }}</div>\n}\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--bg-2, var(--surface-card, #fff));--_surface-alt: var(--bg-3, var(--glass-bg-elevated, #f8fafc));--_surface-hover: var(--bg-hover, var(--surface-hover, #f1f5f9));--_border: var(--w08, var(--surface-border, #e2e8f0));--_border-strong: var(--w1, var(--surface-border, #cbd5e1));--_grid-line: var(--line-3, var(--surface-border, #eef2f7));--_text: var(--ink, var(--text-color, #0f172a));--_text-subtle: var(--ink-3, var(--text-color-secondary, #64748b));--_text-faint: var(--ink-4, var(--text-color-secondary, #94a3b8));--_accent: var(--accent);--_bar: var(--_accent);--_bar-progress: color-mix(in srgb, var(--_accent) 72%, #000);--_weekend: color-mix(in srgb, var(--_text-subtle) 9%, transparent);--_today: var(--danger, #ef4444);--_link: var(--_text-subtle);--_radius: var(--r-lg, 8px);--_transition: var(--t-state, .12s ease);display:block;inline-size:100%;block-size:100%;min-block-size:200px;color:var(--_text);font-size:13px}:host(.fly-gantt--resizing){cursor:col-resize;-webkit-user-select:none;user-select:none}.fly-gantt__scroll{position:relative;inline-size:100%;block-size:100%;overflow:auto;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);box-shadow:var(--shadow-card, none);outline:none}.fly-gantt__scroll:focus-visible{outline:2px solid var(--_accent);outline-offset:-2px}.fly-gantt__canvas{display:grid;position:relative}.fly-gantt__corner{position:sticky;inset-block-start:0;inset-inline-start:0;z-index:4;background:var(--_surface-alt);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-inline-end:1px solid var(--_border);border-block-end:1px solid var(--_border-strong)}.fly-gantt__time-header{position:sticky;inset-block-start:0;z-index:3;display:block;background:var(--_surface-alt);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-block-end:1px solid var(--_border-strong)}.fly-gantt__tick-line{stroke:var(--_grid-line);stroke-width:1}.fly-gantt__tick-label{fill:var(--_text-subtle);font-size:11px;text-anchor:middle;dominant-baseline:middle}.fly-gantt__tick-label--upper{fill:var(--_text);font-weight:600}.fly-gantt__splitter{position:absolute;inset-block:0;inset-inline-end:-3px;inline-size:7px;z-index:5;cursor:col-resize;touch-action:none}.fly-gantt__splitter:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:3px;inline-size:1px;background:transparent;transition:background var(--_transition)}.fly-gantt__splitter:hover:after,.fly-gantt__splitter:focus-visible:after{background:var(--_accent)}.fly-gantt__splitter:focus-visible{outline:2px solid var(--_accent);outline-offset:-1px}:host(.fly-gantt--resizing) .fly-gantt__splitter:after{background:var(--_accent)}.fly-gantt__labels{position:sticky;inset-inline-start:0;z-index:2;background:var(--_surface);border-inline-end:1px solid var(--_border)}.fly-gantt__label-row{position:relative;display:flex;align-items:center;border-block-end:1px solid var(--_grid-line);cursor:pointer;transition:background var(--_transition)}.fly-gantt__label-row:hover{background:var(--_surface-hover)}.fly-gantt__label-row--selected{background:var(--_surface-hover);box-shadow:inset 3px 0 0 0 var(--_accent)}.fly-gantt__label-row--tinted:before{content:\"\";position:absolute;inset:0;background:var(--fly-gantt-row-tint);pointer-events:none}.fly-gantt__label-inner{position:relative;display:flex;align-items:center;gap:4px;inline-size:100%;min-inline-size:0;padding-inline-end:8px}.fly-gantt__label-swatch{flex:0 0 auto;inline-size:8px;block-size:8px;border-radius:2px}.fly-gantt__chevron{flex:0 0 auto;inline-size:18px;block-size:18px;padding:0;border:none;background:transparent;color:var(--_text-subtle);cursor:pointer;line-height:1;transform:rotate(90deg);transition:transform var(--_transition)}.fly-gantt__chevron--collapsed{transform:rotate(0)}:host(.fly-gantt--rtl) .fly-gantt__chevron--collapsed{transform:rotate(180deg)}.fly-gantt__chevron:focus-visible{outline:2px solid var(--_accent);outline-offset:1px;border-radius:4px}.fly-gantt__chevron-spacer{flex:0 0 auto;inline-size:18px}.fly-gantt__label-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-gantt__label-text--group{font-weight:600}.fly-gantt__body{display:block;touch-action:pan-x pan-y}.fly-gantt__row-band{pointer-events:none}.fly-gantt__weekend{fill:var(--_weekend)}.fly-gantt__grid-line{stroke:var(--_grid-line);stroke-width:1}.fly-gantt__row-hit{fill:transparent}.fly-gantt__row-hit--selected{fill:var(--_surface-hover)}.fly-gantt__bar{fill:var(--_bar);stroke:none}.fly-gantt__bar--editable{cursor:grab}.fly-gantt__progress{fill:var(--_bar-progress);pointer-events:none}.fly-gantt__handle{fill:transparent;cursor:ew-resize}.fly-gantt__connector{fill:var(--_surface);stroke:var(--_accent);stroke-width:1.5;cursor:crosshair;opacity:0;transition:opacity var(--_transition)}.fly-gantt__row:hover .fly-gantt__connector{opacity:1}.fly-gantt__milestone{fill:var(--_accent);stroke:var(--_surface);stroke-width:1}.fly-gantt__milestone--editable{cursor:grab}.fly-gantt__group{fill:var(--_text-subtle);stroke:var(--_text-subtle)}.fly-gantt__link{fill:none;stroke:var(--_link);stroke-width:1.5;pointer-events:none}.fly-gantt__link-hit{fill:none;stroke:transparent;stroke-width:11;pointer-events:stroke;cursor:pointer}.fly-gantt__link-group:hover .fly-gantt__link{stroke:var(--_text)}.fly-gantt__link-group--selected .fly-gantt__link{stroke:var(--_accent);stroke-width:2.5}.fly-gantt__link-delete-bg{fill:var(--_accent)}.fly-gantt__link-delete{cursor:pointer}.fly-gantt__link-delete-x{stroke:var(--_surface);stroke-width:1.75;stroke-linecap:round;fill:none;pointer-events:none}.fly-gantt__link--ghost{stroke-dasharray:4 3;opacity:.8}.fly-gantt__arrowhead{fill:var(--_link)}.fly-gantt__today{stroke:var(--_today);stroke-width:1.5;stroke-dasharray:3 3;pointer-events:none}.fly-gantt__empty,.fly-gantt__overflow{margin:0;padding:12px;color:var(--_text-faint);font-size:12px;text-align:center}.fly-gantt__tooltip{position:fixed;z-index:20;transform:translate(12px,16px);padding:4px 8px;border-radius:6px;background:var(--_text);color:var(--_surface);font-size:12px;white-space:nowrap;pointer-events:none;direction:ltr;unicode-bidi:isolate}\n"] }]
+                    }, template: "<!-- Cross-scrolling canvas: a CSS grid whose header row and label column are sticky, so the\r\n     time grid scrolls under a pinned header + label tree. All SVG geometry is pre-mirrored for\r\n     RTL in the component (see gantt-scale mapX), so this template never branches on direction. -->\r\n<div\r\n  class=\"fly-gantt__scroll\"\r\n  role=\"grid\"\r\n  tabindex=\"0\"\r\n  [attr.aria-label]=\"'gantt.aria.grid' | translate\"\r\n  [attr.aria-rowcount]=\"visibleRows().length\"\r\n  (keydown)=\"onGridKeydown($event)\"\r\n>\r\n  <div\r\n    class=\"fly-gantt__canvas\"\r\n    [style.grid-template-columns]=\"effectiveLabelWidth() + 'px ' + innerWidth() + 'px'\"\r\n    [style.grid-template-rows]=\"HEADER_H + 'px ' + bodyHeight() + 'px'\"\r\n  >\r\n    <!-- \u2500\u2500 Corner (pinned both axes) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"fly-gantt__corner\" [style.height.px]=\"HEADER_H\">\r\n      @if (resizableLabels()) {\r\n        <!-- The divider lives in the corner because the corner is the one cell pinned on BOTH\r\n             axes: the grip stays reachable however far the user has scrolled. The full-height\r\n             strip down the label pane below is the same gesture, presentational only. -->\r\n        <div\r\n          class=\"fly-gantt__splitter\"\r\n          role=\"separator\"\r\n          tabindex=\"0\"\r\n          aria-orientation=\"vertical\"\r\n          [attr.aria-label]=\"'gantt.aria.label_resize' | translate\"\r\n          [attr.aria-valuenow]=\"effectiveLabelWidth()\"\r\n          [attr.aria-valuemin]=\"MIN_LABEL_W\"\r\n          [attr.aria-valuemax]=\"MAX_LABEL_W\"\r\n          (pointerdown)=\"onLabelResizePointerDown($event)\"\r\n          (keydown)=\"onLabelResizeKeydown($event)\"\r\n          (dblclick)=\"resetLabelWidth()\"\r\n        ></div>\r\n      }\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Time header (pinned top) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <svg\r\n      class=\"fly-gantt__time-header\"\r\n      [attr.width]=\"innerWidth()\"\r\n      [attr.height]=\"HEADER_H\"\r\n      [attr.viewBox]=\"'0 0 ' + innerWidth() + ' ' + HEADER_H\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      @for (b of weekendBands(); track b.key) {\r\n        <rect class=\"fly-gantt__weekend\" [attr.x]=\"b.x\" [attr.y]=\"HEADER_UPPER_H\" [attr.width]=\"b.width\" [attr.height]=\"HEADER_LOWER_H\" />\r\n      }\r\n      @for (t of upperTicks(); track t.key) {\r\n        <line class=\"fly-gantt__tick-line\" [attr.x1]=\"t.x\" [attr.y1]=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"HEADER_H\" />\r\n        <text class=\"fly-gantt__tick-label fly-gantt__tick-label--upper\" [attr.x]=\"t.x + t.width / 2\" [attr.y]=\"HEADER_UPPER_H / 2 + 4\">{{ t.label }}</text>\r\n      }\r\n      @for (t of lowerTicks(); track t.key) {\r\n        <line class=\"fly-gantt__tick-line\" [attr.x1]=\"t.x\" [attr.y1]=\"HEADER_UPPER_H\" [attr.x2]=\"t.x\" [attr.y2]=\"HEADER_H\" />\r\n        <text class=\"fly-gantt__tick-label\" [attr.x]=\"t.x + t.width / 2\" [attr.y]=\"HEADER_UPPER_H + HEADER_LOWER_H / 2 + 4\">{{ t.label }}</text>\r\n      }\r\n      @if (todayX() !== null) {\r\n        <line class=\"fly-gantt__today\" [attr.x1]=\"todayX()\" [attr.y1]=\"HEADER_UPPER_H\" [attr.x2]=\"todayX()\" [attr.y2]=\"HEADER_H\" />\r\n      }\r\n    </svg>\r\n\r\n    <!-- \u2500\u2500 Label tree (pinned inline-start) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"fly-gantt__labels\" role=\"rowgroup\">\r\n      @for (vm of rowVms(); track vm.flat.row.id) {\r\n        <div\r\n          class=\"fly-gantt__label-row\"\r\n          role=\"row\"\r\n          tabindex=\"-1\"\r\n          [class.fly-gantt__label-row--selected]=\"selectedId() === vm.flat.row.id\"\r\n          [class.fly-gantt__label-row--tinted]=\"vm.tint !== null\"\r\n          [style.height.px]=\"rowHeight()\"\r\n          [style.--fly-gantt-row-tint]=\"vm.tint\"\r\n          [attr.aria-selected]=\"selectedId() === vm.flat.row.id\"\r\n          [attr.aria-label]=\"vm.ariaLabel\"\r\n          (click)=\"onRowClick(vm.flat.row.id)\"\r\n          (dblclick)=\"onRowDblClick(vm.flat.row.id)\"\r\n          (keydown.enter)=\"onLabelRowKeydown($event, vm.flat.row.id)\"\r\n        >\r\n          <span class=\"fly-gantt__label-inner\" [style.padding-inline-start.px]=\"indentFor(vm.flat.depth)\">\r\n            @if (vm.flat.hasChildren) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"fly-gantt__chevron\"\r\n                [class.fly-gantt__chevron--collapsed]=\"isCollapsed(vm.flat.row.id)\"\r\n                [attr.aria-label]=\"(isCollapsed(vm.flat.row.id) ? 'gantt.expand' : 'gantt.collapse') | translate\"\r\n                [attr.aria-expanded]=\"!isCollapsed(vm.flat.row.id)\"\r\n                (click)=\"toggleCollapse(vm.flat.row.id, $event)\"\r\n              >\u25B8</button>\r\n            } @else {\r\n              <span class=\"fly-gantt__chevron-spacer\"></span>\r\n            }\r\n            @if (vm.color) {\r\n              <!-- Colour chip: the row's own colour at full strength, so a milestone stays\r\n                   identifiable in the label pane where the band tint is deliberately faint. -->\r\n              <span class=\"fly-gantt__label-swatch\" [style.background]=\"vm.color\" aria-hidden=\"true\"></span>\r\n            }\r\n            <span\r\n              class=\"fly-gantt__label-text\"\r\n              [class.fly-gantt__label-text--group]=\"vm.shape === 'group'\"\r\n              [title]=\"vm.flat.row.label\"\r\n            >{{ vm.flat.row.label }}</span>\r\n          </span>\r\n        </div>\r\n      }\r\n      @if (resizableLabels()) {\r\n        <!-- aria-hidden so this presentational twin of the corner separator is not a second\r\n             (and structurally invalid) child of the rowgroup in the accessibility tree. -->\r\n        <div\r\n          class=\"fly-gantt__splitter fly-gantt__splitter--rail\"\r\n          aria-hidden=\"true\"\r\n          (pointerdown)=\"onLabelResizePointerDown($event)\"\r\n          (dblclick)=\"resetLabelWidth()\"\r\n        ></div>\r\n      }\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Time grid body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <svg\r\n      #bodySvg\r\n      class=\"fly-gantt__body\"\r\n      [attr.width]=\"innerWidth()\"\r\n      [attr.height]=\"bodyHeight()\"\r\n      [attr.viewBox]=\"'0 0 ' + innerWidth() + ' ' + bodyHeight()\"\r\n    >\r\n      <defs>\r\n        <marker\r\n          [attr.id]=\"markerId\"\r\n          markerWidth=\"8\"\r\n          markerHeight=\"8\"\r\n          refX=\"6\"\r\n          refY=\"4\"\r\n          orient=\"auto\"\r\n          markerUnits=\"userSpaceOnUse\"\r\n        >\r\n          <path class=\"fly-gantt__arrowhead\" d=\"M0,0 L7,4 L0,8 Z\" />\r\n        </marker>\r\n      </defs>\r\n\r\n      <!-- Row colour bands sit at the very bottom of the stack, so the weekend shading and the\r\n           gridlines below still read through them. -->\r\n      @for (vm of tintedRows(); track vm.flat.row.id) {\r\n        <rect\r\n          class=\"fly-gantt__row-band\"\r\n          [attr.x]=\"0\"\r\n          [attr.y]=\"vm.y\"\r\n          [attr.width]=\"innerWidth()\"\r\n          [attr.height]=\"rowHeight()\"\r\n          [style.fill]=\"vm.tint\"\r\n        />\r\n      }\r\n\r\n      <!-- Weekend shading + vertical gridlines (behind the bars). -->\r\n      @for (b of weekendBands(); track b.key) {\r\n        <rect class=\"fly-gantt__weekend\" [attr.x]=\"b.x\" [attr.y]=\"0\" [attr.width]=\"b.width\" [attr.height]=\"bodyHeight()\" />\r\n      }\r\n      @for (t of lowerTicks(); track t.key) {\r\n        <line class=\"fly-gantt__grid-line\" [attr.x1]=\"t.x\" [attr.y1]=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"bodyHeight()\" />\r\n      }\r\n\r\n      <!-- Rows: a full-width hit rect (click + link drop target) then the shape. -->\r\n      @for (vm of rowVms(); track vm.flat.row.id) {\r\n        <g class=\"fly-gantt__row\" [attr.data-row-id]=\"vm.flat.row.id\">\r\n          <rect\r\n            class=\"fly-gantt__row-hit\"\r\n            [class.fly-gantt__row-hit--selected]=\"selectedId() === vm.flat.row.id\"\r\n            [attr.x]=\"0\"\r\n            [attr.y]=\"vm.y\"\r\n            [attr.width]=\"innerWidth()\"\r\n            [attr.height]=\"rowHeight()\"\r\n            (pointerdown)=\"onRowClick(vm.flat.row.id)\"\r\n            (dblclick)=\"onRowDblClick(vm.flat.row.id)\"\r\n          />\r\n\r\n          @switch (vm.shape) {\r\n            @case ('group') {\r\n              <path class=\"fly-gantt__group\" [attr.d]=\"groupPath(vm)\" [style.fill]=\"vm.color\" [style.stroke]=\"vm.color\" />\r\n            }\r\n            @case ('milestone') {\r\n              <polygon\r\n                class=\"fly-gantt__milestone\"\r\n                [class.fly-gantt__milestone--editable]=\"vm.editable\"\r\n                [attr.points]=\"diamondPoints(vm)\"\r\n                [style.fill]=\"vm.color\"\r\n                (pointerdown)=\"onBarPointerDown($event, vm, 'move')\"\r\n              />\r\n              @if (!readonly() && !vm.flat.row.readonly) {\r\n                <!-- A diamond has no width, so one connector serves it; it reads as the finish\r\n                     end, which is what makes a milestone\u2192task drag the FS everyone expects. -->\r\n                <circle\r\n                  class=\"fly-gantt__connector\"\r\n                  [attr.cx]=\"milestoneConnectorX(vm)\"\r\n                  [attr.cy]=\"vm.midY\"\r\n                  r=\"4\"\r\n                  [attr.aria-label]=\"'gantt.aria.link_handle' | translate: { label: vm.flat.row.label }\"\r\n                  (pointerdown)=\"onLinkPointerDown($event, vm, 'finish')\"\r\n                />\r\n              }\r\n            }\r\n            @case ('bar') {\r\n              <g class=\"fly-gantt__bar-group\">\r\n                <rect\r\n                  class=\"fly-gantt__bar\"\r\n                  [class.fly-gantt__bar--editable]=\"vm.editable\"\r\n                  [attr.x]=\"vm.x\"\r\n                  [attr.y]=\"barTop(vm)\"\r\n                  [attr.width]=\"vm.width\"\r\n                  [attr.height]=\"barHeight()\"\r\n                  rx=\"4\"\r\n                  [style.fill]=\"vm.color\"\r\n                  (pointerdown)=\"onBarPointerDown($event, vm, 'move')\"\r\n                />\r\n                @if (vm.progressWidth > 0) {\r\n                  <rect\r\n                    class=\"fly-gantt__progress\"\r\n                    [attr.x]=\"vm.x\"\r\n                    [attr.y]=\"barTop(vm)\"\r\n                    [attr.width]=\"vm.progressWidth\"\r\n                    [attr.height]=\"barHeight()\"\r\n                    rx=\"4\"\r\n                  />\r\n                }\r\n                @if (vm.editable) {\r\n                  <!-- Resize handles at both edges. -->\r\n                  <rect\r\n                    class=\"fly-gantt__handle\"\r\n                    [attr.x]=\"vm.x\"\r\n                    [attr.y]=\"barTop(vm)\"\r\n                    [attr.width]=\"HANDLE_W\"\r\n                    [attr.height]=\"barHeight()\"\r\n                    [attr.aria-label]=\"'gantt.aria.resize_start' | translate\"\r\n                    (pointerdown)=\"onBarPointerDown($event, vm, 'resize-start')\"\r\n                  />\r\n                  <rect\r\n                    class=\"fly-gantt__handle\"\r\n                    [attr.x]=\"vm.x + vm.width - HANDLE_W\"\r\n                    [attr.y]=\"barTop(vm)\"\r\n                    [attr.width]=\"HANDLE_W\"\r\n                    [attr.height]=\"barHeight()\"\r\n                    [attr.aria-label]=\"'gantt.aria.resize_end' | translate\"\r\n                    (pointerdown)=\"onBarPointerDown($event, vm, 'resize-end')\"\r\n                  />\r\n                }\r\n                @if (!readonly() && !vm.flat.row.readonly) {\r\n                  <!-- One connector per END. Dragging from the start edge yields an SS/SF link\r\n                       and from the finish edge an FS/FF one \u2014 the drop edge picks which. -->\r\n                  <circle\r\n                    class=\"fly-gantt__connector\"\r\n                    [attr.cx]=\"vm.startX\"\r\n                    [attr.cy]=\"vm.midY\"\r\n                    r=\"4\"\r\n                    [attr.aria-label]=\"'gantt.aria.link_handle_start' | translate: { label: vm.flat.row.label }\"\r\n                    (pointerdown)=\"onLinkPointerDown($event, vm, 'start')\"\r\n                  />\r\n                  <circle\r\n                    class=\"fly-gantt__connector\"\r\n                    [attr.cx]=\"vm.endX\"\r\n                    [attr.cy]=\"vm.midY\"\r\n                    r=\"4\"\r\n                    [attr.aria-label]=\"'gantt.aria.link_handle' | translate: { label: vm.flat.row.label }\"\r\n                    (pointerdown)=\"onLinkPointerDown($event, vm, 'finish')\"\r\n                  />\r\n                }\r\n              </g>\r\n            }\r\n          }\r\n        </g>\r\n      }\r\n\r\n      <!-- Dependency arrows (skipped for missing / collapsed endpoints). Each carries a fat\r\n           transparent twin so a 1.5px line is still clickable at pointer precision. -->\r\n      @for (link of linkVms(); track link.key) {\r\n        <g class=\"fly-gantt__link-group\" [class.fly-gantt__link-group--selected]=\"selectedLinkKey() === link.key\">\r\n          <path\r\n            class=\"fly-gantt__link-hit\"\r\n            [attr.d]=\"link.path\"\r\n            [attr.aria-label]=\"link.ariaLabel\"\r\n            (click)=\"onLinkClick($event, link)\"\r\n          />\r\n          <path class=\"fly-gantt__link\" [attr.d]=\"link.path\" [attr.marker-end]=\"'url(#' + markerId + ')'\" />\r\n          @if (selectedLinkKey() === link.key && !readonly()) {\r\n            <g\r\n              class=\"fly-gantt__link-delete\"\r\n              [attr.transform]=\"'translate(' + link.badgeX + ',' + link.badgeY + ')'\"\r\n              [attr.aria-label]=\"'gantt.aria.delete_link' | translate\"\r\n              (click)=\"deleteLink($event, link)\"\r\n            >\r\n              <circle class=\"fly-gantt__link-delete-bg\" r=\"8\" />\r\n              <path class=\"fly-gantt__link-delete-x\" d=\"M-3.5,-3.5 L3.5,3.5 M3.5,-3.5 L-3.5,3.5\" />\r\n            </g>\r\n          }\r\n        </g>\r\n      }\r\n\r\n      <!-- In-flight link rubber band. -->\r\n      @if (linkGesturePath(); as gp) {\r\n        <path class=\"fly-gantt__link fly-gantt__link--ghost\" [attr.d]=\"gp\" [attr.marker-end]=\"'url(#' + markerId + ')'\" />\r\n      }\r\n\r\n      <!-- Today line (over the bars). -->\r\n      @if (todayX() !== null) {\r\n        <line class=\"fly-gantt__today\" [attr.x1]=\"todayX()\" [attr.y1]=\"0\" [attr.x2]=\"todayX()\" [attr.y2]=\"bodyHeight()\" />\r\n      }\r\n    </svg>\r\n  </div>\r\n\r\n  @if (visibleRows().length === 0) {\r\n    <p class=\"fly-gantt__empty\">{{ 'gantt.no_data' | translate }}</p>\r\n  }\r\n  @if (overflowCount() > 0) {\r\n    <p class=\"fly-gantt__overflow\">\r\n      {{ 'gantt.overflow' | translate: { shown: maxRows(), total: maxRows() + overflowCount() } }}\r\n    </p>\r\n  }\r\n</div>\r\n\r\n<!-- Drag candidate tooltip (HTML overlay, follows the cursor). -->\r\n@if (dragTooltip(); as tip) {\r\n  <div class=\"fly-gantt__tooltip\" [style.left.px]=\"tip.x\" [style.top.px]=\"tip.y\">{{ tip.text }}</div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--bg-2, var(--surface-card, #fff));--_surface-alt: var(--bg-3, var(--glass-bg-elevated, #f8fafc));--_surface-hover: var(--bg-hover, var(--surface-hover, #f1f5f9));--_border: var(--w08, var(--surface-border, #e2e8f0));--_border-strong: var(--w1, var(--surface-border, #cbd5e1));--_grid-line: var(--line-3, var(--surface-border, #eef2f7));--_text: var(--ink, var(--text-color, #0f172a));--_text-subtle: var(--ink-3, var(--text-color-secondary, #64748b));--_text-faint: var(--ink-4, var(--text-color-secondary, #94a3b8));--_accent: var(--accent);--_bar: var(--_accent);--_bar-progress: color-mix(in srgb, var(--_accent) 72%, #000);--_weekend: color-mix(in srgb, var(--_text-subtle) 9%, transparent);--_today: var(--danger, #ef4444);--_link: var(--_text-subtle);--_radius: var(--r-lg, 8px);--_transition: var(--t-state, .12s ease);display:block;inline-size:100%;block-size:100%;min-block-size:200px;color:var(--_text);font-size:13px}:host(.fly-gantt--resizing){cursor:col-resize;-webkit-user-select:none;user-select:none}.fly-gantt__scroll{position:relative;inline-size:100%;block-size:100%;overflow:auto;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);box-shadow:var(--shadow-card, none);outline:none}.fly-gantt__scroll:focus-visible{outline:2px solid var(--_accent);outline-offset:-2px}.fly-gantt__canvas{display:grid;position:relative}.fly-gantt__corner{position:sticky;inset-block-start:0;inset-inline-start:0;z-index:4;background:var(--_surface-alt);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-inline-end:1px solid var(--_border);border-block-end:1px solid var(--_border-strong)}.fly-gantt__time-header{position:sticky;inset-block-start:0;z-index:3;display:block;background:var(--_surface-alt);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-block-end:1px solid var(--_border-strong)}.fly-gantt__tick-line{stroke:var(--_grid-line);stroke-width:1}.fly-gantt__tick-label{fill:var(--_text-subtle);font-size:11px;text-anchor:middle;dominant-baseline:middle}.fly-gantt__tick-label--upper{fill:var(--_text);font-weight:600}.fly-gantt__splitter{position:absolute;inset-block:0;inset-inline-end:-3px;inline-size:7px;z-index:5;cursor:col-resize;touch-action:none}.fly-gantt__splitter:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:3px;inline-size:1px;background:transparent;transition:background var(--_transition)}.fly-gantt__splitter:hover:after,.fly-gantt__splitter:focus-visible:after{background:var(--_accent)}.fly-gantt__splitter:focus-visible{outline:2px solid var(--_accent);outline-offset:-1px}:host(.fly-gantt--resizing) .fly-gantt__splitter:after{background:var(--_accent)}.fly-gantt__labels{position:sticky;inset-inline-start:0;z-index:2;background:var(--_surface);border-inline-end:1px solid var(--_border)}.fly-gantt__label-row{position:relative;display:flex;align-items:center;border-block-end:1px solid var(--_grid-line);cursor:pointer;transition:background var(--_transition)}.fly-gantt__label-row:hover{background:var(--_surface-hover)}.fly-gantt__label-row--selected{background:var(--_surface-hover);box-shadow:inset 3px 0 0 0 var(--_accent)}.fly-gantt__label-row--tinted:before{content:\"\";position:absolute;inset:0;background:var(--fly-gantt-row-tint);pointer-events:none}.fly-gantt__label-inner{position:relative;display:flex;align-items:center;gap:4px;inline-size:100%;min-inline-size:0;padding-inline-end:8px}.fly-gantt__label-swatch{flex:0 0 auto;inline-size:8px;block-size:8px;border-radius:2px}.fly-gantt__chevron{flex:0 0 auto;inline-size:18px;block-size:18px;padding:0;border:none;background:transparent;color:var(--_text-subtle);cursor:pointer;line-height:1;transform:rotate(90deg);transition:transform var(--_transition)}.fly-gantt__chevron--collapsed{transform:rotate(0)}:host(.fly-gantt--rtl) .fly-gantt__chevron--collapsed{transform:rotate(180deg)}.fly-gantt__chevron:focus-visible{outline:2px solid var(--_accent);outline-offset:1px;border-radius:4px}.fly-gantt__chevron-spacer{flex:0 0 auto;inline-size:18px}.fly-gantt__label-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-gantt__label-text--group{font-weight:600}.fly-gantt__body{display:block;touch-action:pan-x pan-y}.fly-gantt__row-band{pointer-events:none}.fly-gantt__weekend{fill:var(--_weekend)}.fly-gantt__grid-line{stroke:var(--_grid-line);stroke-width:1}.fly-gantt__row-hit{fill:transparent}.fly-gantt__row-hit--selected{fill:var(--_surface-hover)}.fly-gantt__bar{fill:var(--_bar);stroke:none}.fly-gantt__bar--editable{cursor:grab}.fly-gantt__progress{fill:var(--_bar-progress);pointer-events:none}.fly-gantt__handle{fill:transparent;cursor:ew-resize}.fly-gantt__connector{fill:var(--_surface);stroke:var(--_accent);stroke-width:1.5;cursor:crosshair;opacity:0;transition:opacity var(--_transition)}.fly-gantt__row:hover .fly-gantt__connector{opacity:1}.fly-gantt__milestone{fill:var(--_accent);stroke:var(--_surface);stroke-width:1}.fly-gantt__milestone--editable{cursor:grab}.fly-gantt__group{fill:var(--_text-subtle);stroke:var(--_text-subtle)}.fly-gantt__link{fill:none;stroke:var(--_link);stroke-width:1.5;pointer-events:none}.fly-gantt__link-hit{fill:none;stroke:transparent;stroke-width:11;pointer-events:stroke;cursor:pointer}.fly-gantt__link-group:hover .fly-gantt__link{stroke:var(--_text)}.fly-gantt__link-group--selected .fly-gantt__link{stroke:var(--_accent);stroke-width:2.5}.fly-gantt__link-delete-bg{fill:var(--_accent)}.fly-gantt__link-delete{cursor:pointer}.fly-gantt__link-delete-x{stroke:var(--_surface);stroke-width:1.75;stroke-linecap:round;fill:none;pointer-events:none}.fly-gantt__link--ghost{stroke-dasharray:4 3;opacity:.8}.fly-gantt__arrowhead{fill:var(--_link)}.fly-gantt__today{stroke:var(--_today);stroke-width:1.5;stroke-dasharray:3 3;pointer-events:none}.fly-gantt__empty,.fly-gantt__overflow{margin:0;padding:12px;color:var(--_text-faint);font-size:12px;text-align:center}.fly-gantt__tooltip{position:fixed;z-index:20;transform:translate(12px,16px);padding:4px 8px;border-radius:6px;background:var(--_text);color:var(--_surface);font-size:12px;white-space:nowrap;pointer-events:none;direction:ltr;unicode-bidi:isolate}\n"] }]
         }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], dependencies: [{ type: i0.Input, args: [{ isSignal: true, alias: "dependencies", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], showToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToday", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], resizableLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableLabels", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], rowDatesChange: [{ type: i0.Output, args: ["rowDatesChange"] }], dependencyCreate: [{ type: i0.Output, args: ["dependencyCreate"] }], dependencyDelete: [{ type: i0.Output, args: ["dependencyDelete"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDblClick: [{ type: i0.Output, args: ["rowDblClick"] }], labelWidthChange: [{ type: i0.Output, args: ["labelWidthChange"] }], bodyRef: [{ type: i0.ViewChild, args: ['bodySvg', { isSignal: true }] }] } });
 
 // ── Bundled ISO 3166-1 country list ──────────────────────────────────────────
@@ -16253,7 +16541,7 @@ function projectSearch(search, handlers) {
             : { filtersActive: search.filtersActive }),
         hasFilters: !!search.onOpenFilters,
         query: (text) => handlers.search()?.onQuery?.(text),
-        openFilters: () => handlers.search()?.onOpenFilters?.(),
+        openFilters: (trigger) => handlers.search()?.onOpenFilters?.(trigger),
     };
 }
 function projectAction(action, handlers) {
@@ -16261,7 +16549,7 @@ function projectAction(action, handlers) {
     return {
         ...stripHandlers(action),
         menu: action.menu ? projectMenu(action, handlers) : null,
-        run: () => handlers.action(id)?.onSelect?.(),
+        run: (trigger) => handlers.action(id)?.onSelect?.(trigger),
     };
 }
 function projectMenu(action, handlers) {
@@ -17255,7 +17543,11 @@ class FlyMagicActionsComponent {
             this.toggleMenu(action.id, event.currentTarget);
             return;
         }
-        action.run();
+        // The button the user pressed, handed to the publisher so an action that opens
+        // an app-owned popover can anchor it to its own trigger — see
+        // `MagicBarActionView.run`. `currentTarget` (not `target`) is the `.fma-btn`
+        // itself rather than whichever `<svg>` node inside it took the pointer.
+        action.run(event.currentTarget);
     }
     onMenuAction(action, value) {
         // Late-bound: `action` is this render's view, but `select()` always resolves
@@ -19344,6 +19636,29 @@ function flyUnwrapCurrencies(res) {
     const data = res?.data;
     return Array.isArray(data) ? data : [];
 }
+/** The platform endpoint serving the CALLING TENANT's default currency. Relative, like its
+ *  catalogue sibling — the host's gateway + auth interceptors apply, and the answer is scoped to
+ *  whatever tenant that auth resolves to. */
+const FLY_CURRENCY_DEFAULT_ENDPOINT = '/api/currencies/default';
+/**
+ * Unwraps the single-row shape of `GET /api/currencies/default`.
+ *
+ * `null` is a SUCCESS answer, not a failure: a tenant with no country has no default currency,
+ * and a platform-scoped caller has no tenant whose currency could be meant. Anything that is not
+ * recognisably a currency row — an envelope with `data: null`, an error body, an HTML login page
+ * from a misrouted request — collapses to `null` for the same reason
+ * {@link flyUnwrapCurrencies} returns `[]`: a picker must degrade to "no preselection", never
+ * preselect something the platform did not vouch for.
+ */
+function flyUnwrapCurrency(res) {
+    const candidate = res !== null && typeof res === 'object' && 'data' in res
+        ? res.data
+        : res;
+    if (candidate === null || typeof candidate !== 'object')
+        return null;
+    const row = candidate;
+    return typeof row.code === 'string' && row.code.length > 0 ? candidate : null;
+}
 /**
  * **`FlyCurrencyCatalogService`** — the one ISO-code → {@link FlyCurrency} adapter for the
  * platform currency catalogue (`GET /api/currencies/brief`).
@@ -19464,6 +19779,8 @@ let _flyCurrencySelectorUid = 0;
  *  Re-exported from {@link FlyCurrencyCatalogService}'s module so the picker and the display-only
  *  catalogue cannot drift on which route serves the rows. */
 const CURRENCIES_BRIEF_ENDPOINT = FLY_CURRENCIES_BRIEF_ENDPOINT;
+/** The platform endpoint behind {@link FlyCurrencySelectorComponent.applyTenantDefault}. */
+const CURRENCY_DEFAULT_ENDPOINT = FLY_CURRENCY_DEFAULT_ENDPOINT;
 /** Cached answer of {@link probeFlagEmojiSupport} — the measurement is stable for a document's lifetime. */
 let _flagEmojiSupport = null;
 /**
@@ -19574,6 +19891,30 @@ class FlyCurrencySelectorComponent {
     currencies = input(null, ...(ngDevMode ? [{ debugName: "currencies" }] : /* istanbul ignore next */ []));
     /** Host-supplied loader, used when `[currencies]` is absent. Falls back to `GET /api/currencies/brief`. */
     fetchFn = input(null, ...(ngDevMode ? [{ debugName: "fetchFn" }] : /* istanbul ignore next */ []));
+    /**
+     * Pre-fill an EMPTY single-select with the calling tenant's default currency
+     * (`GET /api/currencies/default`, or `[tenantDefaultFetchFn]`). On by default.
+     *
+     * An amount is nearly always denominated in the tenant's reporting currency, and a form that
+     * opens empty makes every user restate a fact the platform already holds — while an untouched
+     * field silently saves null, which downstream money formatting cannot render at all.
+     *
+     * Deliberately narrow. It applies only when ALL of these hold, because outside them a
+     * preselection would be a guess rather than a default:
+     *   - `mode="single"` — a multi-select accumulates a SET, and seeding one member of a set
+     *     states something the tenant currency does not say.
+     *   - not `locked()` — a frozen value is authoritative; proposing one contradicts the lock.
+     *   - the control is still empty — a written value always wins.
+     *
+     * It fires at most once per instance: clearing the field by hand latches it off, so the value
+     * cannot reappear and read as the clear having not registered.
+     *
+     * A host that supplied `[currencies]` or `[fetchFn]` is never taken to the platform endpoint —
+     * see {@link tenantDefaultFetchFn}, which is how such a host opts back in.
+     */
+    applyTenantDefault = input(true, ...(ngDevMode ? [{ debugName: "applyTenantDefault" }] : /* istanbul ignore next */ []));
+    /** Host-supplied loader for {@link applyTenantDefault}. Falls back to `GET /api/currencies/default`. */
+    tenantDefaultFetchFn = input(null, ...(ngDevMode ? [{ debugName: "tenantDefaultFetchFn" }] : /* istanbul ignore next */ []));
     /** Restrict the offered set to these ISO 4217 codes (case-insensitive). Empty = offer everything. */
     allowedCodes = input([], ...(ngDevMode ? [{ debugName: "allowedCodes" }] : /* istanbul ignore next */ []));
     /**
@@ -19634,6 +19975,12 @@ class FlyCurrencySelectorComponent {
     _selectedCodes = signal([], ...(ngDevMode ? [{ debugName: "_selectedCodes" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     _fetchStarted = false;
+    /** Guards the once-per-instance tenant-default resolve. */
+    _tenantDefaultStarted = false;
+    /** Latches once the default has been applied, or ruled out by any commit (pick, clear, write). */
+    _tenantDefaultSettled = false;
+    /** The resolved row, kept so a `writeValue(null)` arriving AFTER the fetch can still use it. */
+    _tenantDefaultRow = null;
     searchEl;
     triggerEl;
     _onChange = () => undefined;
@@ -19649,6 +19996,34 @@ class FlyCurrencySelectorComponent {
             this._fetchStarted = true;
             this._load();
         });
+        // A control that HOLDS a value must resolve it, whether or not the user ever opens the
+        // panel: `selected()` maps codes through the loaded rows, so a saved code with no rows
+        // renders as the placeholder — an edit form reading "Select a currency" over a project that
+        // is denominated in AED. The lazy rule is still intact for the case it was written for: an
+        // EMPTY selector on a tab nobody opens fetches nothing.
+        effect(() => {
+            if (this._fetchStarted)
+                return;
+            if (this.currencies() !== null)
+                return;
+            if (this._selectedCodes().length === 0)
+                return;
+            this._fetchStarted = true;
+            this._load();
+        });
+        // The tenant default is resolved EAGERLY, unlike the catalogue: its whole job is to be in
+        // place before the user looks at the field, so deferring it to first open would defeat it.
+        // The cost is bounded - one small request per defaulting selector, against an endpoint that
+        // returns a single row. An effect rather than the constructor body so `applyTenantDefault`
+        // and `locked` are read AFTER the host's bindings are applied, not at their declared values.
+        effect(() => {
+            if (this._tenantDefaultStarted)
+                return;
+            if (!this.applyTenantDefault() || this.isMulti() || this.locked())
+                return;
+            this._tenantDefaultStarted = true;
+            this._loadTenantDefault();
+        });
     }
     // ── Derived view state ─────────────────────────────────────────────────────
     effectiveDisabled = computed(() => this.disabled() || this._cvaDisabled(), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
@@ -19873,13 +20248,69 @@ class FlyCurrencySelectorComponent {
             this._loaded.set(rows);
         });
     }
+    _loadTenantDefault() {
+        const fetch = this.tenantDefaultFetchFn();
+        // A host that took over the CATALOGUE owns the default too: `[currencies]`/`[fetchFn]` are
+        // the "do not reach the platform routes" declaration (offline builds, fixtures, apps that
+        // proxy reference data), and honouring it for the rows while quietly firing a platform
+        // request for the default would break exactly the consumers those inputs exist for. Such a
+        // host opts back in by supplying `[tenantDefaultFetchFn]`.
+        const hostOwnsData = this.currencies() !== null || this.fetchFn() !== null;
+        const source = fetch
+            ? fetch()
+            : this.http && !hostOwnsData
+                ? this.http.get(CURRENCY_DEFAULT_ENDPOINT).pipe(map(flyUnwrapCurrency))
+                : null;
+        // No transport and no loader is not an error state here: an offline surface simply has no
+        // default. Nothing is surfaced to the user - unlike a failed CATALOGUE load, which must be
+        // retryable because it leaves the control unusable.
+        if (!source)
+            return;
+        source.pipe(catchError$1(() => of(null))).subscribe((row) => {
+            this._tenantDefaultRow = row;
+            this._applyTenantDefaultIfEmpty();
+        });
+    }
+    /**
+     * Applies the resolved default to a still-empty control.
+     *
+     * Called from both ends of a race with no fixed winner: the fetch may land before the forms
+     * layer writes, or after it writes the empty value a form is built with.
+     */
+    _applyTenantDefaultIfEmpty() {
+        if (this._tenantDefaultSettled)
+            return;
+        if (!this.applyTenantDefault() || this.isMulti() || this.locked())
+            return;
+        const row = this._tenantDefaultRow;
+        if (!row)
+            return;
+        if (this._selectedCodes().length > 0)
+            return;
+        // Seed the row so the trigger can RENDER the pick straight away. Without this the selection
+        // would be invisible until the catalogue loads - which is lazy, on first open - so the field
+        // would look untouched while its form value said otherwise. `_load` replaces the whole set
+        // on success, and leaves this seed alone on failure.
+        if (this.currencies() === null && this._loaded().length === 0)
+            this._loaded.set([row]);
+        this._commit([row.code]);
+    }
     // ── ControlValueAccessor ───────────────────────────────────────────────────
     writeValue(value) {
         if (value === null || value === undefined) {
             this._selectedCodes.set([]);
+            // An empty write re-tries the default - this is the common `patchValue`-after-load path,
+            // and on a fresh form it is the write that arrives BEFORE the fetch has landed.
+            this._applyTenantDefaultIfEmpty();
             return;
         }
-        this._selectedCodes.set(typeof value === 'string' ? [value] : [...value]);
+        const codes = typeof value === 'string' ? [value] : [...value];
+        this._selectedCodes.set(codes);
+        // A written value is the host's own answer; there is no hole left for a default to fill.
+        if (codes.length > 0)
+            this._tenantDefaultSettled = true;
+        else
+            this._applyTenantDefaultIfEmpty();
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -19896,6 +20327,10 @@ class FlyCurrencySelectorComponent {
         return this.isMulti() ? [...codes] : (codes[0] ?? null);
     }
     _commit(codes) {
+        // Every user-driven change routes through here - pick, toggle, remove, clear - so this is the
+        // one place that has to latch the default off. A cleared field that refilled itself would be
+        // indistinguishable from the clear never having registered.
+        this._tenantDefaultSettled = true;
         this._selectedCodes.set([...codes]);
         this._onChange(this._controlValue());
         this.selectionChange.emit([...codes]);
@@ -19905,13 +20340,13 @@ class FlyCurrencySelectorComponent {
         this._onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyCurrencySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyCurrencySelectorComponent, isStandalone: true, selector: "fly-currency-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, currencies: { classPropertyName: "currencies", publicName: "currencies", isSignal: true, isRequired: false, transformFunction: null }, fetchFn: { classPropertyName: "fetchFn", publicName: "fetchFn", isSignal: true, isRequired: false, transformFunction: null }, allowedCodes: { classPropertyName: "allowedCodes", publicName: "allowedCodes", isSignal: true, isRequired: false, transformFunction: null }, pinnedCodes: { classPropertyName: "pinnedCodes", publicName: "pinnedCodes", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, lockedReasonKey: { classPropertyName: "lockedReasonKey", publicName: "lockedReasonKey", isSignal: true, isRequired: false, transformFunction: null }, lockedReasonParams: { classPropertyName: "lockedReasonParams", publicName: "lockedReasonParams", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", selectionDetailChange: "selectionDetailChange", openedChange: "openedChange" }, host: { properties: { "class.fly-currency-selector--open": "isOpen()", "class.fly-currency-selector--disabled": "effectiveDisabled()", "class.fly-currency-selector--locked": "locked()" }, classAttribute: "fly-currency-selector" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyCurrencySelectorComponent, isStandalone: true, selector: "fly-currency-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, currencies: { classPropertyName: "currencies", publicName: "currencies", isSignal: true, isRequired: false, transformFunction: null }, fetchFn: { classPropertyName: "fetchFn", publicName: "fetchFn", isSignal: true, isRequired: false, transformFunction: null }, applyTenantDefault: { classPropertyName: "applyTenantDefault", publicName: "applyTenantDefault", isSignal: true, isRequired: false, transformFunction: null }, tenantDefaultFetchFn: { classPropertyName: "tenantDefaultFetchFn", publicName: "tenantDefaultFetchFn", isSignal: true, isRequired: false, transformFunction: null }, allowedCodes: { classPropertyName: "allowedCodes", publicName: "allowedCodes", isSignal: true, isRequired: false, transformFunction: null }, pinnedCodes: { classPropertyName: "pinnedCodes", publicName: "pinnedCodes", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, lockedReasonKey: { classPropertyName: "lockedReasonKey", publicName: "lockedReasonKey", isSignal: true, isRequired: false, transformFunction: null }, lockedReasonParams: { classPropertyName: "lockedReasonParams", publicName: "lockedReasonParams", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", selectionDetailChange: "selectionDetailChange", openedChange: "openedChange" }, host: { properties: { "class.fly-currency-selector--open": "isOpen()", "class.fly-currency-selector--disabled": "effectiveDisabled()", "class.fly-currency-selector--locked": "locked()" }, classAttribute: "fly-currency-selector" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FlyCurrencySelectorComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "searchEl", first: true, predicate: ["searchRef"], descendants: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerRef"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"fly-currency-selector__wrap\"\r\n  [flyClickOutsideEnabled]=\"isOpen()\"\r\n  (flyClickOutside)=\"close()\"\r\n>\r\n  @if (locked()) {\r\n    <!-- \u2500\u2500 Locked readout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n         NOT a dimmed `disabled` trigger: there is no dropdown affordance here at all \u2014 the\r\n         value is frozen on purpose, not merely unavailable right now. `role=\"group\"` +\r\n         `aria-label` name the field the way the combobox trigger's `aria-label` does; the\r\n         reason is REAL, always-rendered text (not a `title` attribute, which many screen\r\n         readers never announce and which no sighted user sees without hovering) and is\r\n         additionally wired via `aria-describedby` for AT that reads by relationship rather\r\n         than document order. -->\r\n    <div\r\n      class=\"fly-currency-selector__locked\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"ariaLabel() || placeholderText()\"\r\n      [attr.aria-describedby]=\"lockedReasonId\"\r\n    >\r\n      @if (selected().length === 0) {\r\n        <span class=\"fly-currency-selector__placeholder\">{{ placeholderText() }}</span>\r\n      } @else {\r\n        <span class=\"fly-currency-selector__chips\">\r\n          @for (c of selected(); track c.code) {\r\n            <span class=\"fly-currency-selector__chip\">\r\n              <span class=\"fly-currency-selector__tile\" aria-hidden=\"true\">\r\n                @if (flagsRenderable() && c.flag) {\r\n                  <span class=\"fly-currency-selector__tile-flag\">{{ c.flag }}</span>\r\n                } @else {\r\n                  <span class=\"fly-currency-selector__tile-code\">{{ tileCode(c) }}</span>\r\n                }\r\n              </span>\r\n              <span class=\"fly-currency-selector__chip-code\">{{ c.code }}</span>\r\n              <span class=\"fly-currency-selector__chip-symbol\" aria-hidden=\"true\">{{ c.symbol }}</span>\r\n            </span>\r\n          }\r\n        </span>\r\n      }\r\n      <span class=\"fly-currency-selector__lock-icon\" aria-hidden=\"true\">&#128274;</span>\r\n    </div>\r\n    <p class=\"fly-currency-selector__locked-reason\" [id]=\"lockedReasonId\">{{ lockedReasonText() }}</p>\r\n  } @else {\r\n\r\n  <!-- \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n       `aria-label` is never null: a `combobox` does NOT take its accessible name from its\r\n       contents the way a plain button does, so the chips/placeholder painted inside it name\r\n       nothing. Absent a consumer label the localized placeholder supplies the control's\r\n       purpose; its VALUE is still announced from the contents. -->\r\n  <button\r\n    #triggerRef\r\n    type=\"button\"\r\n    [id]=\"triggerId\"\r\n    class=\"fly-currency-selector__trigger\"\r\n    role=\"combobox\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    [attr.aria-label]=\"ariaLabel() || placeholderText()\"\r\n    [class.fly-currency-selector__trigger--empty]=\"!hasSelection()\"\r\n    [disabled]=\"effectiveDisabled()\"\r\n    (click)=\"toggleOpen()\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n  >\r\n    @if (selected().length === 0) {\r\n      <span class=\"fly-currency-selector__placeholder\">{{ placeholderText() }}</span>\r\n    } @else {\r\n      <span class=\"fly-currency-selector__chips\">\r\n        @for (c of selected(); track c.code) {\r\n          <span class=\"fly-currency-selector__chip\">\r\n            <span class=\"fly-currency-selector__tile\" aria-hidden=\"true\">\r\n              @if (flagsRenderable() && c.flag) {\r\n                <span class=\"fly-currency-selector__tile-flag\">{{ c.flag }}</span>\r\n              } @else {\r\n                <span class=\"fly-currency-selector__tile-code\">{{ tileCode(c) }}</span>\r\n              }\r\n            </span>\r\n            <span class=\"fly-currency-selector__chip-code\">{{ c.code }}</span>\r\n            <span class=\"fly-currency-selector__chip-symbol\" aria-hidden=\"true\">{{ c.symbol }}</span>\r\n            @if (isMulti() && !effectiveDisabled()) {\r\n              <span\r\n                class=\"fly-currency-selector__chip-remove\"\r\n                role=\"button\"\r\n                tabindex=\"-1\"\r\n                [attr.aria-label]=\"'\u2715 ' + c.code\"\r\n                (click)=\"remove(c.code, $event)\"\r\n                (mousedown)=\"$event.preventDefault()\"\r\n              >\u2715</span>\r\n            }\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (clearable() && hasSelection() && !effectiveDisabled()) {\r\n      <span\r\n        class=\"fly-currency-selector__clear\"\r\n        role=\"button\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-label]=\"clearText()\"\r\n        [title]=\"clearText()\"\r\n        (click)=\"clear($event)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n      >\u2715</span>\r\n    }\r\n\r\n    <span class=\"fly-currency-selector__chevron\" aria-hidden=\"true\">\u25BE</span>\r\n  </button>\r\n\r\n  <!-- \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  @if (isOpen()) {\r\n    <div class=\"fly-currency-selector__panel\" tabindex=\"-1\" (keydown)=\"onPanelKeydown($event)\">\r\n      <div class=\"fly-currency-selector__search\">\r\n        <input\r\n          #searchRef\r\n          type=\"text\"\r\n          class=\"fly-currency-selector__search-input\"\r\n          role=\"combobox\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-expanded]=\"true\"\r\n          [attr.aria-controls]=\"listboxId\"\r\n          [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n          [attr.aria-label]=\"searchPlaceholderText()\"\r\n          [placeholder]=\"searchPlaceholderText()\"\r\n          [value]=\"searchTerm()\"\r\n          (input)=\"onSearchInput($any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      @if (loading()) {\r\n        <div class=\"fly-currency-selector__status\" role=\"status\">{{ loadingText() }}</div>\r\n      } @else if (loadFailed()) {\r\n        <div class=\"fly-currency-selector__status fly-currency-selector__status--error\" role=\"alert\">\r\n          <span>{{ errorText() }}</span>\r\n          <button type=\"button\" class=\"fly-currency-selector__retry\" (click)=\"retry()\">\r\n            {{ retryText() }}\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"fly-currency-selector__listbox\"\r\n        role=\"listbox\"\r\n        [id]=\"listboxId\"\r\n        [attr.aria-multiselectable]=\"isMulti() ? true : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n        [attr.aria-label]=\"ariaLabel() || null\"\r\n      >\r\n        @if (pinned().length > 0) {\r\n          <div class=\"fly-currency-selector__group\" role=\"presentation\">{{ pinnedGroupText() }}</div>\r\n          @for (c of pinned(); track c.code) {\r\n            <ng-container *ngTemplateOutlet=\"row; context: { $implicit: c }\" />\r\n          }\r\n          @if (rest().length > 0) {\r\n            <div class=\"fly-currency-selector__group\" role=\"presentation\">{{ allGroupText() }}</div>\r\n          }\r\n        }\r\n        @for (c of rest(); track c.code) {\r\n          <ng-container *ngTemplateOutlet=\"row; context: { $implicit: c }\" />\r\n        }\r\n\r\n        @if (!loading() && !loadFailed() && filtered().length === 0) {\r\n          <div class=\"fly-currency-selector__status\" role=\"presentation\">{{ noResultsText() }}</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  }\r\n</div>\r\n\r\n<!-- \u2500\u2500 One option row, shared by the pinned and full groups \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<ng-template #row let-c>\r\n  <div\r\n    class=\"fly-currency-selector__option\"\r\n    role=\"option\"\r\n    tabindex=\"-1\"\r\n    [id]=\"optionId(navIndexOf(c.code))\"\r\n    [attr.aria-selected]=\"isSelected(c.code)\"\r\n    [class.fly-currency-selector__option--selected]=\"isSelected(c.code)\"\r\n    [class.fly-currency-selector__option--active]=\"navIndexOf(c.code) === activeIndex()\"\r\n    (click)=\"pick(c)\"\r\n    (keydown.enter)=\"pick(c)\"\r\n    (mouseenter)=\"onOptionHover(navIndexOf(c.code))\"\r\n  >\r\n    <span class=\"fly-currency-selector__tile\" aria-hidden=\"true\">\r\n      @if (flagsRenderable() && c.flag) {\r\n        <span class=\"fly-currency-selector__tile-flag\">{{ c.flag }}</span>\r\n      } @else {\r\n        <span class=\"fly-currency-selector__tile-code\">{{ tileCode(c) }}</span>\r\n      }\r\n    </span>\r\n\r\n    <span class=\"fly-currency-selector__option-text\">\r\n      <span class=\"fly-currency-selector__option-code\">{{ c.code }}</span>\r\n      <span class=\"fly-currency-selector__option-name\">{{ c.name }}</span>\r\n    </span>\r\n\r\n    <span class=\"fly-currency-selector__option-symbol\" aria-hidden=\"true\">{{ c.symbol }}</span>\r\n\r\n    <span class=\"fly-currency-selector__check\" aria-hidden=\"true\">\r\n      @if (isSelected(c.code)) { \u2713 }\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-panel: var(--glass-bg-elevated, var(--surface-card, #fff));--_panel-blur: var(--glass-blur, 40px);--_surface-hover: var(--surface-hover, #f1f5f9);--_surface-active: var(--surface-active, #eef2ff);--_border: var(--surface-border, #e2e8f0);--_text: var(--text-color, #0f172a);--_text-subtle: var(--text-color-secondary, #64748b);--_fill: var(--fill-tertiary, #f3f4f6);--_primary: var(--primary-color);--_danger: var(--system-red, #ef4444);--_radius: 8px;display:inline-block;inline-size:100%;min-inline-size:11rem;font-size:13px;color:var(--_text)}.fly-currency-selector__wrap{position:relative;inline-size:100%}.fly-currency-selector__trigger{display:flex;align-items:center;gap:8px;inline-size:100%;min-block-size:2.25rem;padding-block:4px;padding-inline:8px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;text-align:start;cursor:pointer}.fly-currency-selector__trigger:focus-visible{outline:2px solid var(--_primary);outline-offset:2px}.fly-currency-selector__trigger:disabled{opacity:.55;cursor:not-allowed}.fly-currency-selector__placeholder{flex:1 1 auto;padding-inline-start:4px;color:var(--_text-subtle);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-currency-selector__chips{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:4px;min-inline-size:0}.fly-currency-selector__chip{display:inline-flex;align-items:center;gap:5px;padding-block:2px;padding-inline:3px 7px;border-radius:999px;background:var(--_fill);font-size:12px}.fly-currency-selector__chip-code{font-weight:700;letter-spacing:.02em}.fly-currency-selector__chip-symbol{color:var(--_text-subtle)}.fly-currency-selector__chip-remove{padding:1px 3px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer}.fly-currency-selector__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-currency-selector__clear,.fly-currency-selector__chevron{flex:none;color:var(--_text-subtle);font-size:11px;line-height:1}.fly-currency-selector__clear{padding:3px;border-radius:50%;cursor:pointer}.fly-currency-selector__clear:hover{background:var(--_surface-hover);color:var(--_text)}.fly-currency-selector__tile{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:26px;block-size:19px;border-radius:4px;background:var(--_fill);overflow:hidden}.fly-currency-selector__tile-flag{font-size:15px;line-height:1}.fly-currency-selector__tile-code{font-size:9px;font-weight:800;letter-spacing:.04em;color:var(--_text-subtle);direction:ltr;unicode-bidi:isolate}.fly-currency-selector__locked{display:flex;align-items:center;gap:8px;inline-size:100%;min-block-size:2.25rem;padding-block:4px;padding-inline:8px;border:1px dashed var(--_border);border-radius:var(--_radius);background:var(--_fill);color:var(--_text);cursor:default}.fly-currency-selector__lock-icon{flex:none;margin-inline-start:auto;font-size:12px;opacity:.7}.fly-currency-selector__locked-reason{margin:4px 0 0;color:var(--_text-subtle);font-size:11px;line-height:1.4}.fly-currency-selector__panel{position:absolute;z-index:60;inset-inline:0;inset-block-start:calc(100% + 4px);display:flex;flex-direction:column;max-block-size:19rem;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface-panel);-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));box-shadow:0 12px 32px #0000002e;overflow:hidden}.fly-currency-selector__search{padding:6px;border-block-end:1px solid var(--_border)}.fly-currency-selector__search-input{inline-size:100%;padding-block:5px;padding-inline:8px;border:1px solid var(--_border);border-radius:6px;background:var(--_surface);color:var(--_text);font:inherit}.fly-currency-selector__search-input:focus-visible{outline:2px solid var(--_primary);outline-offset:-1px}.fly-currency-selector__listbox{flex:1 1 auto;overflow-y:auto;padding-block:4px}.fly-currency-selector__group{padding-block:6px 3px;padding-inline:10px;color:var(--_text-subtle);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.fly-currency-selector__option{display:flex;align-items:center;gap:9px;padding-block:5px;padding-inline:10px;cursor:pointer}.fly-currency-selector__option--active{background:var(--_surface-hover)}.fly-currency-selector__option--selected{background:var(--_surface-active)}.fly-currency-selector__option-text{display:flex;flex:1 1 auto;align-items:baseline;gap:8px;min-inline-size:0}.fly-currency-selector__option-code{flex:none;font-weight:700;letter-spacing:.02em;direction:ltr;unicode-bidi:isolate}.fly-currency-selector__option-name{flex:1 1 auto;min-inline-size:0;color:var(--_text-subtle);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-currency-selector__option-symbol{flex:none;min-inline-size:2.2em;color:var(--_text);text-align:end}.fly-currency-selector__check{flex:none;inline-size:1em;color:var(--_primary)}.fly-currency-selector__status{display:flex;align-items:center;gap:8px;padding-block:10px;padding-inline:10px;color:var(--_text-subtle)}.fly-currency-selector__status--error{color:var(--_danger)}.fly-currency-selector__retry{border:1px solid var(--_border);border-radius:6px;background:var(--_surface);padding-block:2px;padding-inline:8px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled"], outputs: ["flyClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "searchEl", first: true, predicate: ["searchRef"], descendants: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerRef"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"fly-currency-selector__wrap\"\r\n  [flyClickOutsideEnabled]=\"isOpen()\"\r\n  (flyClickOutside)=\"close()\"\r\n>\r\n  @if (locked()) {\r\n    <!-- \u2500\u2500 Locked readout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n         NOT a dimmed `disabled` trigger: there is no dropdown affordance here at all \u2014 the\r\n         value is frozen on purpose, not merely unavailable right now. `role=\"group\"` +\r\n         `aria-label` name the field the way the combobox trigger's `aria-label` does; the\r\n         reason is REAL, always-rendered text (not a `title` attribute, which many screen\r\n         readers never announce and which no sighted user sees without hovering) and is\r\n         additionally wired via `aria-describedby` for AT that reads by relationship rather\r\n         than document order. -->\r\n    <div\r\n      class=\"fly-currency-selector__locked\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"ariaLabel() || placeholderText()\"\r\n      [attr.aria-describedby]=\"lockedReasonId\"\r\n    >\r\n      @if (selected().length === 0) {\r\n        <span class=\"fly-currency-selector__placeholder\">{{ placeholderText() }}</span>\r\n      } @else {\r\n        <span class=\"fly-currency-selector__chips\">\r\n          @for (c of selected(); track c.code) {\r\n            <span class=\"fly-currency-selector__chip\">\r\n              <span class=\"fly-currency-selector__tile\" aria-hidden=\"true\">\r\n                @if (flagsRenderable() && c.flag) {\r\n                  <span class=\"fly-currency-selector__tile-flag\">{{ c.flag }}</span>\r\n                } @else {\r\n                  <span class=\"fly-currency-selector__tile-code\">{{ tileCode(c) }}</span>\r\n                }\r\n              </span>\r\n              <span class=\"fly-currency-selector__chip-code\">{{ c.code }}</span>\r\n              <span class=\"fly-currency-selector__chip-symbol\" aria-hidden=\"true\">{{ c.symbol }}</span>\r\n            </span>\r\n          }\r\n        </span>\r\n      }\r\n      <span class=\"fly-currency-selector__lock-icon\" aria-hidden=\"true\">&#128274;</span>\r\n    </div>\r\n    <p class=\"fly-currency-selector__locked-reason\" [id]=\"lockedReasonId\">{{ lockedReasonText() }}</p>\r\n  } @else {\r\n\r\n  <!-- \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n       `aria-label` is never null: a `combobox` does NOT take its accessible name from its\r\n       contents the way a plain button does, so the chips/placeholder painted inside it name\r\n       nothing. Absent a consumer label the localized placeholder supplies the control's\r\n       purpose; its VALUE is still announced from the contents. -->\r\n  <button\r\n    #triggerRef\r\n    type=\"button\"\r\n    [id]=\"triggerId\"\r\n    class=\"fly-currency-selector__trigger\"\r\n    role=\"combobox\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    [attr.aria-label]=\"ariaLabel() || placeholderText()\"\r\n    [class.fly-currency-selector__trigger--empty]=\"!hasSelection()\"\r\n    [disabled]=\"effectiveDisabled()\"\r\n    (click)=\"toggleOpen()\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n  >\r\n    @if (selected().length === 0) {\r\n      <span class=\"fly-currency-selector__placeholder\">{{ placeholderText() }}</span>\r\n    } @else {\r\n      <span class=\"fly-currency-selector__chips\">\r\n        @for (c of selected(); track c.code) {\r\n          <span class=\"fly-currency-selector__chip\">\r\n            <span class=\"fly-currency-selector__tile\" aria-hidden=\"true\">\r\n              @if (flagsRenderable() && c.flag) {\r\n                <span class=\"fly-currency-selector__tile-flag\">{{ c.flag }}</span>\r\n              } @else {\r\n                <span class=\"fly-currency-selector__tile-code\">{{ tileCode(c) }}</span>\r\n              }\r\n            </span>\r\n            <span class=\"fly-currency-selector__chip-code\">{{ c.code }}</span>\r\n            <span class=\"fly-currency-selector__chip-symbol\" aria-hidden=\"true\">{{ c.symbol }}</span>\r\n            @if (isMulti() && !effectiveDisabled()) {\r\n              <span\r\n                class=\"fly-currency-selector__chip-remove\"\r\n                role=\"button\"\r\n                tabindex=\"-1\"\r\n                [attr.aria-label]=\"'\u2715 ' + c.code\"\r\n                (click)=\"remove(c.code, $event)\"\r\n                (mousedown)=\"$event.preventDefault()\"\r\n              >\u2715</span>\r\n            }\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (clearable() && hasSelection() && !effectiveDisabled()) {\r\n      <span\r\n        class=\"fly-currency-selector__clear\"\r\n        role=\"button\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-label]=\"clearText()\"\r\n        [title]=\"clearText()\"\r\n        (click)=\"clear($event)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n      >\u2715</span>\r\n    }\r\n\r\n    <span class=\"fly-currency-selector__chevron\" aria-hidden=\"true\">\u25BE</span>\r\n  </button>\r\n\r\n  <!-- \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  @if (isOpen()) {\r\n    <div class=\"fly-currency-selector__panel\" tabindex=\"-1\" (keydown)=\"onPanelKeydown($event)\">\r\n      <div class=\"fly-currency-selector__search\">\r\n        <input\r\n          #searchRef\r\n          type=\"text\"\r\n          class=\"fly-currency-selector__search-input\"\r\n          role=\"combobox\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-expanded]=\"true\"\r\n          [attr.aria-controls]=\"listboxId\"\r\n          [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n          [attr.aria-label]=\"searchPlaceholderText()\"\r\n          [placeholder]=\"searchPlaceholderText()\"\r\n          [value]=\"searchTerm()\"\r\n          (input)=\"onSearchInput($any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      @if (loading()) {\r\n        <div class=\"fly-currency-selector__status\" role=\"status\">{{ loadingText() }}</div>\r\n      } @else if (loadFailed()) {\r\n        <div class=\"fly-currency-selector__status fly-currency-selector__status--error\" role=\"alert\">\r\n          <span>{{ errorText() }}</span>\r\n          <button type=\"button\" class=\"fly-currency-selector__retry\" (click)=\"retry()\">\r\n            {{ retryText() }}\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"fly-currency-selector__listbox\"\r\n        role=\"listbox\"\r\n        [id]=\"listboxId\"\r\n        [attr.aria-multiselectable]=\"isMulti() ? true : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n        [attr.aria-label]=\"ariaLabel() || null\"\r\n      >\r\n        @if (pinned().length > 0) {\r\n          <div class=\"fly-currency-selector__group\" role=\"presentation\">{{ pinnedGroupText() }}</div>\r\n          @for (c of pinned(); track c.code) {\r\n            <ng-container *ngTemplateOutlet=\"row; context: { $implicit: c }\" />\r\n          }\r\n          @if (rest().length > 0) {\r\n            <div class=\"fly-currency-selector__group\" role=\"presentation\">{{ allGroupText() }}</div>\r\n          }\r\n        }\r\n        @for (c of rest(); track c.code) {\r\n          <ng-container *ngTemplateOutlet=\"row; context: { $implicit: c }\" />\r\n        }\r\n\r\n        @if (!loading() && !loadFailed() && filtered().length === 0) {\r\n          <div class=\"fly-currency-selector__status\" role=\"presentation\">{{ noResultsText() }}</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  }\r\n</div>\r\n\r\n<!-- \u2500\u2500 One option row, shared by the pinned and full groups \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<ng-template #row let-c>\r\n  <div\r\n    class=\"fly-currency-selector__option\"\r\n    role=\"option\"\r\n    tabindex=\"-1\"\r\n    [id]=\"optionId(navIndexOf(c.code))\"\r\n    [attr.aria-selected]=\"isSelected(c.code)\"\r\n    [class.fly-currency-selector__option--selected]=\"isSelected(c.code)\"\r\n    [class.fly-currency-selector__option--active]=\"navIndexOf(c.code) === activeIndex()\"\r\n    (click)=\"pick(c)\"\r\n    (keydown.enter)=\"pick(c)\"\r\n    (mouseenter)=\"onOptionHover(navIndexOf(c.code))\"\r\n  >\r\n    <span class=\"fly-currency-selector__tile\" aria-hidden=\"true\">\r\n      @if (flagsRenderable() && c.flag) {\r\n        <span class=\"fly-currency-selector__tile-flag\">{{ c.flag }}</span>\r\n      } @else {\r\n        <span class=\"fly-currency-selector__tile-code\">{{ tileCode(c) }}</span>\r\n      }\r\n    </span>\r\n\r\n    <span class=\"fly-currency-selector__option-text\">\r\n      <span class=\"fly-currency-selector__option-code\">{{ c.code }}</span>\r\n      <span class=\"fly-currency-selector__option-name\">{{ c.name }}</span>\r\n    </span>\r\n\r\n    <span class=\"fly-currency-selector__option-symbol\" aria-hidden=\"true\">{{ c.symbol }}</span>\r\n\r\n    <span class=\"fly-currency-selector__check\" aria-hidden=\"true\">\r\n      @if (isSelected(c.code)) { \u2713 }\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-panel: var(--glass-bg-elevated, var(--surface-card, #fff));--_panel-blur: var(--glass-blur, 40px);--_surface-hover: var(--surface-hover, #f1f5f9);--_surface-active: var(--surface-active, #eef2ff);--_border: var(--surface-border, #e2e8f0);--_text: var(--text-color, #0f172a);--_text-subtle: var(--text-color-secondary, #64748b);--_fill: var(--fill-tertiary, #f3f4f6);--_primary: var(--primary-color);--_danger: var(--system-red, #ef4444);--_radius: 8px;display:inline-block;inline-size:100%;min-inline-size:11rem;font-size:13px;color:var(--_text)}.fly-currency-selector__wrap{position:relative;inline-size:100%}.fly-currency-selector__trigger{display:flex;align-items:center;gap:8px;inline-size:100%;min-block-size:2.25rem;padding-block:4px;padding-inline:8px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;text-align:start;cursor:pointer}.fly-currency-selector__trigger:focus-visible{outline:2px solid var(--_primary);outline-offset:2px}.fly-currency-selector__trigger:disabled{opacity:.55;cursor:not-allowed}.fly-currency-selector__placeholder{flex:1 1 auto;padding-inline-start:4px;color:var(--_text-subtle);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-currency-selector__chips{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:4px;min-inline-size:0}.fly-currency-selector__chip{display:inline-flex;align-items:center;gap:5px;padding-block:2px;padding-inline:3px 7px;border-radius:999px;background:var(--_fill);font-size:12px}.fly-currency-selector__chip-code{font-weight:700;letter-spacing:.02em}.fly-currency-selector__chip-symbol{color:var(--_text-subtle)}.fly-currency-selector__chip-remove{padding:1px 3px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer}.fly-currency-selector__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-currency-selector__clear,.fly-currency-selector__chevron{flex:none;color:var(--_text-subtle);font-size:11px;line-height:1}.fly-currency-selector__clear{padding:3px;border-radius:50%;cursor:pointer}.fly-currency-selector__clear:hover{background:var(--_surface-hover);color:var(--_text)}.fly-currency-selector__tile{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:26px;block-size:19px;border-radius:4px;background:var(--_fill);overflow:hidden}.fly-currency-selector__tile-flag{font-size:15px;line-height:1}.fly-currency-selector__tile-code{font-size:9px;font-weight:800;letter-spacing:.04em;color:var(--_text-subtle);direction:ltr;unicode-bidi:isolate}.fly-currency-selector__locked{display:flex;align-items:center;gap:8px;inline-size:100%;min-block-size:2.25rem;padding-block:4px;padding-inline:8px;border:1px dashed var(--_border);border-radius:var(--_radius);background:var(--_fill);color:var(--_text);cursor:default}.fly-currency-selector__lock-icon{flex:none;margin-inline-start:auto;font-size:12px;opacity:.7}.fly-currency-selector__locked-reason{margin:4px 0 0;color:var(--_text-subtle);font-size:11px;line-height:1.4}.fly-currency-selector__panel{position:absolute;z-index:60;inset-inline:0;inset-block-start:calc(100% + 4px);display:flex;flex-direction:column;max-block-size:19rem;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface-panel);-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));box-shadow:0 12px 32px #0000002e;overflow:hidden}.fly-currency-selector__search{padding:6px;border-block-end:1px solid var(--_border)}.fly-currency-selector__search-input{inline-size:100%;padding-block:5px;padding-inline:8px;border:1px solid var(--_border);border-radius:6px;background:var(--_surface);color:var(--_text);font:inherit}.fly-currency-selector__search-input:focus-visible{outline:2px solid var(--_primary);outline-offset:-1px}.fly-currency-selector__listbox{flex:1 1 auto;overflow-y:auto;padding-block:4px}.fly-currency-selector__group{padding-block:6px 3px;padding-inline:10px;color:var(--_text-subtle);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.fly-currency-selector__option{display:flex;align-items:center;gap:9px;padding-block:5px;padding-inline:10px;cursor:pointer}.fly-currency-selector__option--active{background:var(--_surface-hover)}.fly-currency-selector__option--selected{background:var(--_surface-active)}.fly-currency-selector__option-text{display:flex;flex:1 1 auto;align-items:baseline;gap:8px;min-inline-size:0}.fly-currency-selector__option-code{flex:none;font-weight:700;letter-spacing:.02em;direction:ltr;unicode-bidi:isolate}.fly-currency-selector__option-name{flex:1 1 auto;min-inline-size:0;color:var(--_text-subtle);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-currency-selector__option-symbol{flex:none;min-inline-size:2.2em;color:var(--_text);text-align:end}.fly-currency-selector__check{flex:none;inline-size:1em;color:var(--_primary)}.fly-currency-selector__status{display:flex;align-items:center;gap:8px;padding-block:10px;padding-inline:10px;color:var(--_text-subtle)}.fly-currency-selector__status--error{color:var(--_danger)}.fly-currency-selector__retry{border:1px solid var(--_border);border-radius:6px;background:var(--_surface);padding-block:2px;padding-inline:8px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled", "flyClickOutsideIgnore"], outputs: ["flyClickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyCurrencySelectorComponent, decorators: [{
             type: Component,
@@ -19927,7 +20362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         '[class.fly-currency-selector--disabled]': 'effectiveDisabled()',
                         '[class.fly-currency-selector--locked]': 'locked()',
                     }, template: "<div\r\n  class=\"fly-currency-selector__wrap\"\r\n  [flyClickOutsideEnabled]=\"isOpen()\"\r\n  (flyClickOutside)=\"close()\"\r\n>\r\n  @if (locked()) {\r\n    <!-- \u2500\u2500 Locked readout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n         NOT a dimmed `disabled` trigger: there is no dropdown affordance here at all \u2014 the\r\n         value is frozen on purpose, not merely unavailable right now. `role=\"group\"` +\r\n         `aria-label` name the field the way the combobox trigger's `aria-label` does; the\r\n         reason is REAL, always-rendered text (not a `title` attribute, which many screen\r\n         readers never announce and which no sighted user sees without hovering) and is\r\n         additionally wired via `aria-describedby` for AT that reads by relationship rather\r\n         than document order. -->\r\n    <div\r\n      class=\"fly-currency-selector__locked\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"ariaLabel() || placeholderText()\"\r\n      [attr.aria-describedby]=\"lockedReasonId\"\r\n    >\r\n      @if (selected().length === 0) {\r\n        <span class=\"fly-currency-selector__placeholder\">{{ placeholderText() }}</span>\r\n      } @else {\r\n        <span class=\"fly-currency-selector__chips\">\r\n          @for (c of selected(); track c.code) {\r\n            <span class=\"fly-currency-selector__chip\">\r\n              <span class=\"fly-currency-selector__tile\" aria-hidden=\"true\">\r\n                @if (flagsRenderable() && c.flag) {\r\n                  <span class=\"fly-currency-selector__tile-flag\">{{ c.flag }}</span>\r\n                } @else {\r\n                  <span class=\"fly-currency-selector__tile-code\">{{ tileCode(c) }}</span>\r\n                }\r\n              </span>\r\n              <span class=\"fly-currency-selector__chip-code\">{{ c.code }}</span>\r\n              <span class=\"fly-currency-selector__chip-symbol\" aria-hidden=\"true\">{{ c.symbol }}</span>\r\n            </span>\r\n          }\r\n        </span>\r\n      }\r\n      <span class=\"fly-currency-selector__lock-icon\" aria-hidden=\"true\">&#128274;</span>\r\n    </div>\r\n    <p class=\"fly-currency-selector__locked-reason\" [id]=\"lockedReasonId\">{{ lockedReasonText() }}</p>\r\n  } @else {\r\n\r\n  <!-- \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n       `aria-label` is never null: a `combobox` does NOT take its accessible name from its\r\n       contents the way a plain button does, so the chips/placeholder painted inside it name\r\n       nothing. Absent a consumer label the localized placeholder supplies the control's\r\n       purpose; its VALUE is still announced from the contents. -->\r\n  <button\r\n    #triggerRef\r\n    type=\"button\"\r\n    [id]=\"triggerId\"\r\n    class=\"fly-currency-selector__trigger\"\r\n    role=\"combobox\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    [attr.aria-label]=\"ariaLabel() || placeholderText()\"\r\n    [class.fly-currency-selector__trigger--empty]=\"!hasSelection()\"\r\n    [disabled]=\"effectiveDisabled()\"\r\n    (click)=\"toggleOpen()\"\r\n    (keydown)=\"onTriggerKeydown($event)\"\r\n  >\r\n    @if (selected().length === 0) {\r\n      <span class=\"fly-currency-selector__placeholder\">{{ placeholderText() }}</span>\r\n    } @else {\r\n      <span class=\"fly-currency-selector__chips\">\r\n        @for (c of selected(); track c.code) {\r\n          <span class=\"fly-currency-selector__chip\">\r\n            <span class=\"fly-currency-selector__tile\" aria-hidden=\"true\">\r\n              @if (flagsRenderable() && c.flag) {\r\n                <span class=\"fly-currency-selector__tile-flag\">{{ c.flag }}</span>\r\n              } @else {\r\n                <span class=\"fly-currency-selector__tile-code\">{{ tileCode(c) }}</span>\r\n              }\r\n            </span>\r\n            <span class=\"fly-currency-selector__chip-code\">{{ c.code }}</span>\r\n            <span class=\"fly-currency-selector__chip-symbol\" aria-hidden=\"true\">{{ c.symbol }}</span>\r\n            @if (isMulti() && !effectiveDisabled()) {\r\n              <span\r\n                class=\"fly-currency-selector__chip-remove\"\r\n                role=\"button\"\r\n                tabindex=\"-1\"\r\n                [attr.aria-label]=\"'\u2715 ' + c.code\"\r\n                (click)=\"remove(c.code, $event)\"\r\n                (mousedown)=\"$event.preventDefault()\"\r\n              >\u2715</span>\r\n            }\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (clearable() && hasSelection() && !effectiveDisabled()) {\r\n      <span\r\n        class=\"fly-currency-selector__clear\"\r\n        role=\"button\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-label]=\"clearText()\"\r\n        [title]=\"clearText()\"\r\n        (click)=\"clear($event)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n      >\u2715</span>\r\n    }\r\n\r\n    <span class=\"fly-currency-selector__chevron\" aria-hidden=\"true\">\u25BE</span>\r\n  </button>\r\n\r\n  <!-- \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  @if (isOpen()) {\r\n    <div class=\"fly-currency-selector__panel\" tabindex=\"-1\" (keydown)=\"onPanelKeydown($event)\">\r\n      <div class=\"fly-currency-selector__search\">\r\n        <input\r\n          #searchRef\r\n          type=\"text\"\r\n          class=\"fly-currency-selector__search-input\"\r\n          role=\"combobox\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-expanded]=\"true\"\r\n          [attr.aria-controls]=\"listboxId\"\r\n          [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n          [attr.aria-label]=\"searchPlaceholderText()\"\r\n          [placeholder]=\"searchPlaceholderText()\"\r\n          [value]=\"searchTerm()\"\r\n          (input)=\"onSearchInput($any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      @if (loading()) {\r\n        <div class=\"fly-currency-selector__status\" role=\"status\">{{ loadingText() }}</div>\r\n      } @else if (loadFailed()) {\r\n        <div class=\"fly-currency-selector__status fly-currency-selector__status--error\" role=\"alert\">\r\n          <span>{{ errorText() }}</span>\r\n          <button type=\"button\" class=\"fly-currency-selector__retry\" (click)=\"retry()\">\r\n            {{ retryText() }}\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"fly-currency-selector__listbox\"\r\n        role=\"listbox\"\r\n        [id]=\"listboxId\"\r\n        [attr.aria-multiselectable]=\"isMulti() ? true : null\"\r\n        [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n        [attr.aria-label]=\"ariaLabel() || null\"\r\n      >\r\n        @if (pinned().length > 0) {\r\n          <div class=\"fly-currency-selector__group\" role=\"presentation\">{{ pinnedGroupText() }}</div>\r\n          @for (c of pinned(); track c.code) {\r\n            <ng-container *ngTemplateOutlet=\"row; context: { $implicit: c }\" />\r\n          }\r\n          @if (rest().length > 0) {\r\n            <div class=\"fly-currency-selector__group\" role=\"presentation\">{{ allGroupText() }}</div>\r\n          }\r\n        }\r\n        @for (c of rest(); track c.code) {\r\n          <ng-container *ngTemplateOutlet=\"row; context: { $implicit: c }\" />\r\n        }\r\n\r\n        @if (!loading() && !loadFailed() && filtered().length === 0) {\r\n          <div class=\"fly-currency-selector__status\" role=\"presentation\">{{ noResultsText() }}</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  }\r\n</div>\r\n\r\n<!-- \u2500\u2500 One option row, shared by the pinned and full groups \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<ng-template #row let-c>\r\n  <div\r\n    class=\"fly-currency-selector__option\"\r\n    role=\"option\"\r\n    tabindex=\"-1\"\r\n    [id]=\"optionId(navIndexOf(c.code))\"\r\n    [attr.aria-selected]=\"isSelected(c.code)\"\r\n    [class.fly-currency-selector__option--selected]=\"isSelected(c.code)\"\r\n    [class.fly-currency-selector__option--active]=\"navIndexOf(c.code) === activeIndex()\"\r\n    (click)=\"pick(c)\"\r\n    (keydown.enter)=\"pick(c)\"\r\n    (mouseenter)=\"onOptionHover(navIndexOf(c.code))\"\r\n  >\r\n    <span class=\"fly-currency-selector__tile\" aria-hidden=\"true\">\r\n      @if (flagsRenderable() && c.flag) {\r\n        <span class=\"fly-currency-selector__tile-flag\">{{ c.flag }}</span>\r\n      } @else {\r\n        <span class=\"fly-currency-selector__tile-code\">{{ tileCode(c) }}</span>\r\n      }\r\n    </span>\r\n\r\n    <span class=\"fly-currency-selector__option-text\">\r\n      <span class=\"fly-currency-selector__option-code\">{{ c.code }}</span>\r\n      <span class=\"fly-currency-selector__option-name\">{{ c.name }}</span>\r\n    </span>\r\n\r\n    <span class=\"fly-currency-selector__option-symbol\" aria-hidden=\"true\">{{ c.symbol }}</span>\r\n\r\n    <span class=\"fly-currency-selector__check\" aria-hidden=\"true\">\r\n      @if (isSelected(c.code)) { \u2713 }\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-panel: var(--glass-bg-elevated, var(--surface-card, #fff));--_panel-blur: var(--glass-blur, 40px);--_surface-hover: var(--surface-hover, #f1f5f9);--_surface-active: var(--surface-active, #eef2ff);--_border: var(--surface-border, #e2e8f0);--_text: var(--text-color, #0f172a);--_text-subtle: var(--text-color-secondary, #64748b);--_fill: var(--fill-tertiary, #f3f4f6);--_primary: var(--primary-color);--_danger: var(--system-red, #ef4444);--_radius: 8px;display:inline-block;inline-size:100%;min-inline-size:11rem;font-size:13px;color:var(--_text)}.fly-currency-selector__wrap{position:relative;inline-size:100%}.fly-currency-selector__trigger{display:flex;align-items:center;gap:8px;inline-size:100%;min-block-size:2.25rem;padding-block:4px;padding-inline:8px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;text-align:start;cursor:pointer}.fly-currency-selector__trigger:focus-visible{outline:2px solid var(--_primary);outline-offset:2px}.fly-currency-selector__trigger:disabled{opacity:.55;cursor:not-allowed}.fly-currency-selector__placeholder{flex:1 1 auto;padding-inline-start:4px;color:var(--_text-subtle);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-currency-selector__chips{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:4px;min-inline-size:0}.fly-currency-selector__chip{display:inline-flex;align-items:center;gap:5px;padding-block:2px;padding-inline:3px 7px;border-radius:999px;background:var(--_fill);font-size:12px}.fly-currency-selector__chip-code{font-weight:700;letter-spacing:.02em}.fly-currency-selector__chip-symbol{color:var(--_text-subtle)}.fly-currency-selector__chip-remove{padding:1px 3px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer}.fly-currency-selector__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-currency-selector__clear,.fly-currency-selector__chevron{flex:none;color:var(--_text-subtle);font-size:11px;line-height:1}.fly-currency-selector__clear{padding:3px;border-radius:50%;cursor:pointer}.fly-currency-selector__clear:hover{background:var(--_surface-hover);color:var(--_text)}.fly-currency-selector__tile{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:26px;block-size:19px;border-radius:4px;background:var(--_fill);overflow:hidden}.fly-currency-selector__tile-flag{font-size:15px;line-height:1}.fly-currency-selector__tile-code{font-size:9px;font-weight:800;letter-spacing:.04em;color:var(--_text-subtle);direction:ltr;unicode-bidi:isolate}.fly-currency-selector__locked{display:flex;align-items:center;gap:8px;inline-size:100%;min-block-size:2.25rem;padding-block:4px;padding-inline:8px;border:1px dashed var(--_border);border-radius:var(--_radius);background:var(--_fill);color:var(--_text);cursor:default}.fly-currency-selector__lock-icon{flex:none;margin-inline-start:auto;font-size:12px;opacity:.7}.fly-currency-selector__locked-reason{margin:4px 0 0;color:var(--_text-subtle);font-size:11px;line-height:1.4}.fly-currency-selector__panel{position:absolute;z-index:60;inset-inline:0;inset-block-start:calc(100% + 4px);display:flex;flex-direction:column;max-block-size:19rem;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface-panel);-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));box-shadow:0 12px 32px #0000002e;overflow:hidden}.fly-currency-selector__search{padding:6px;border-block-end:1px solid var(--_border)}.fly-currency-selector__search-input{inline-size:100%;padding-block:5px;padding-inline:8px;border:1px solid var(--_border);border-radius:6px;background:var(--_surface);color:var(--_text);font:inherit}.fly-currency-selector__search-input:focus-visible{outline:2px solid var(--_primary);outline-offset:-1px}.fly-currency-selector__listbox{flex:1 1 auto;overflow-y:auto;padding-block:4px}.fly-currency-selector__group{padding-block:6px 3px;padding-inline:10px;color:var(--_text-subtle);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.fly-currency-selector__option{display:flex;align-items:center;gap:9px;padding-block:5px;padding-inline:10px;cursor:pointer}.fly-currency-selector__option--active{background:var(--_surface-hover)}.fly-currency-selector__option--selected{background:var(--_surface-active)}.fly-currency-selector__option-text{display:flex;flex:1 1 auto;align-items:baseline;gap:8px;min-inline-size:0}.fly-currency-selector__option-code{flex:none;font-weight:700;letter-spacing:.02em;direction:ltr;unicode-bidi:isolate}.fly-currency-selector__option-name{flex:1 1 auto;min-inline-size:0;color:var(--_text-subtle);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-currency-selector__option-symbol{flex:none;min-inline-size:2.2em;color:var(--_text);text-align:end}.fly-currency-selector__check{flex:none;inline-size:1em;color:var(--_primary)}.fly-currency-selector__status{display:flex;align-items:center;gap:8px;padding-block:10px;padding-inline:10px;color:var(--_text-subtle)}.fly-currency-selector__status--error{color:var(--_danger)}.fly-currency-selector__retry{border:1px solid var(--_border);border-radius:6px;background:var(--_surface);padding-block:2px;padding-inline:8px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], currencies: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencies", required: false }] }], fetchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchFn", required: false }] }], allowedCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedCodes", required: false }] }], pinnedCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedCodes", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], lockedReasonKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedReasonKey", required: false }] }], lockedReasonParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedReasonParams", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionDetailChange: [{ type: i0.Output, args: ["selectionDetailChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], searchEl: [{
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], currencies: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencies", required: false }] }], fetchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetchFn", required: false }] }], applyTenantDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyTenantDefault", required: false }] }], tenantDefaultFetchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenantDefaultFetchFn", required: false }] }], allowedCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedCodes", required: false }] }], pinnedCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedCodes", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], lockedReasonKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedReasonKey", required: false }] }], lockedReasonParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedReasonParams", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionDetailChange: [{ type: i0.Output, args: ["selectionDetailChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], searchEl: [{
                 type: ViewChild,
                 args: ['searchRef']
             }], triggerEl: [{
@@ -21785,14 +22220,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ selector: 'fly-meta', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl>\r\n  @for (item of items(); track $index) {\r\n    <div>\r\n      <dt>{{ item.labelKey | translate }}</dt>\r\n      <dd [class.mono]=\"item.mono ?? false\">{{ item.value }}</dd>\r\n    </div>\r\n  }\r\n  <ng-content />\r\n</dl>\r\n", styles: [":host{display:block}dl{margin:0;display:flex;flex-direction:column;gap:10px}dl ::ng-deep>div{display:grid;grid-template-columns:96px 1fr;gap:var(--sp-3);align-items:baseline;font-size:var(--text-sm)}dl ::ng-deep dt{margin:0;font-size:10.5px;font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4)}dl ::ng-deep dd{margin:0;min-width:0;color:var(--ink);word-break:break-word;line-height:1.45}dl ::ng-deep dd.mono,dl ::ng-deep dd .mono{font-size:var(--text-2xs)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
 
-function canGoPrev(page) {
+function canGoPrev$1(page) {
     return page > 1;
 }
-function canGoNext(page, totalPages) {
+function canGoNext$1(page, totalPages) {
     return page < totalPages;
 }
 /** Clamp a requested page into `[1, max(1, totalPages)]`. */
-function clampPage(page, totalPages) {
+function clampPage$1(page, totalPages) {
     return Math.min(Math.max(1, page), Math.max(1, totalPages));
 }
 
@@ -21827,10 +22262,10 @@ class FlyPaginationComponent {
     showEdges = input(false, ...(ngDevMode ? [{ debugName: "showEdges" }] : /* istanbul ignore next */ []));
     /** Emits the target page (already clamped to bounds). */
     pageChange = output();
-    prevEnabled = computed(() => canGoPrev(this.page()), ...(ngDevMode ? [{ debugName: "prevEnabled" }] : /* istanbul ignore next */ []));
-    nextEnabled = computed(() => canGoNext(this.page(), this.totalPages()), ...(ngDevMode ? [{ debugName: "nextEnabled" }] : /* istanbul ignore next */ []));
+    prevEnabled = computed(() => canGoPrev$1(this.page()), ...(ngDevMode ? [{ debugName: "prevEnabled" }] : /* istanbul ignore next */ []));
+    nextEnabled = computed(() => canGoNext$1(this.page(), this.totalPages()), ...(ngDevMode ? [{ debugName: "nextEnabled" }] : /* istanbul ignore next */ []));
     goTo(target) {
-        const next = clampPage(target, this.totalPages());
+        const next = clampPage$1(target, this.totalPages());
         if (next !== this.page())
             this.pageChange.emit(next);
     }
@@ -21842,6 +22277,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ selector: 'fly-pagination', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"pg\" [attr.aria-label]=\"'ui.pagination.label' | translate\">\r\n  @if (rangeText(); as range) {\r\n    <span class=\"pg__range\">{{ range }}</span>\r\n  }\r\n  <div class=\"pg__controls\">\r\n    @if (showEdges()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"pg__btn\"\r\n        [disabled]=\"!prevEnabled()\"\r\n        (click)=\"goTo(1)\"\r\n        [attr.aria-label]=\"'ui.pagination.first' | translate\"\r\n      ><span class=\"pg__chev\" aria-hidden=\"true\">\u00AB</span></button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"pg__btn\"\r\n      [disabled]=\"!prevEnabled()\"\r\n      (click)=\"goTo(page() - 1)\"\r\n      [attr.aria-label]=\"'ui.pagination.previous' | translate\"\r\n    >\r\n      <svg class=\"pg__arrow\" data-arrow=\"prev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <polyline points=\"15 6 9 12 15 18\" />\r\n      </svg>\r\n    </button>\r\n    <span class=\"pg__current\" aria-live=\"polite\">\r\n      {{ 'ui.pagination.pageOf' | translate: { page: page(), total: totalPages() } }}\r\n    </span>\r\n    <button\r\n      type=\"button\"\r\n      class=\"pg__btn\"\r\n      [disabled]=\"!nextEnabled()\"\r\n      (click)=\"goTo(page() + 1)\"\r\n      [attr.aria-label]=\"'ui.pagination.next' | translate\"\r\n    >\r\n      <svg class=\"pg__arrow\" data-arrow=\"next\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <polyline points=\"9 6 15 12 9 18\" />\r\n      </svg>\r\n    </button>\r\n    @if (showEdges()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"pg__btn\"\r\n        [disabled]=\"!nextEnabled()\"\r\n        (click)=\"goTo(totalPages())\"\r\n        [attr.aria-label]=\"'ui.pagination.last' | translate\"\r\n      ><span class=\"pg__chev\" aria-hidden=\"true\">\u00BB</span></button>\r\n    }\r\n  </div>\r\n</nav>\r\n", styles: [".pg{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-block-start:var(--sp-4);font-size:var(--text-sm);color:var(--ink-3)}.pg__range{font-size:var(--text-sm);color:var(--ink-3);direction:ltr;unicode-bidi:isolate}.pg__range b{color:var(--ink);font-weight:var(--fw-medium)}.pg__controls{display:flex;align-items:center;gap:2px;margin-inline-start:auto;font-size:var(--text-sm)}.pg__btn{inline-size:26px;block-size:26px;padding:0;border:1px solid transparent;background:transparent;color:var(--ink-3);border-radius:50%;font-size:var(--text-sm);cursor:pointer;display:inline-grid;place-items:center;transition:background var(--t-state),color var(--t-state)}.pg__btn:hover:not(:disabled){background:var(--w06);color:var(--ink)}.pg__btn:disabled{color:var(--w2);cursor:default}.pg__btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.pg__arrow{inline-size:14px;block-size:14px}:host-context([dir=rtl]) .pg__arrow{transform:scaleX(-1)}.pg__current{font-size:var(--text-sm);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;padding:0 var(--sp-3);background:var(--accent);border:1px solid transparent;border-radius:999px;color:var(--on-accent-fill);height:24px;display:inline-grid;place-items:center;direction:ltr;unicode-bidi:isolate}:host-context(.rtl) .pg__chev,:host-context([dir=rtl]) .pg__chev{display:inline-block;transform:scaleX(-1)}\n"] }]
         }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], rangeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeText", required: false }] }], showEdges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEdges", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
+/** 0-indexed sibling of `pagination.logic.ts` — see `pager.component.ts` for why. */
+function canGoPrev(page) {
+    return page > 0;
+}
+function canGoNext(page, totalPages) {
+    return page < totalPages - 1;
+}
+/** Clamp a requested page into `[0, max(0, totalPages - 1)]`. */
+function clampPage(page, totalPages) {
+    return Math.min(Math.max(0, page), Math.max(0, totalPages - 1));
+}
+
+/**
+ * Numbered list pager — back arrow, one pill per page, forward arrow — for the
+ * lists that want every page as a target rather than `fly-pagination`'s
+ * «prev / page of total / next» band. Shares the list's surface and continues
+ * its border (see `COMPONENTS.md`): pair with a list container that sets
+ * `border-bottom: 0` so the two read as one panel.
+ *
+ *   <fly-pager [page]="page()" [totalPages]="totalPages()" (goToPage)="goTo($event)" />
+ *
+ * `page`/the emitted target are 0-indexed (array-index pagination); buttons
+ * display `page + 1`. This is the opposite convention from `fly-pagination`
+ * (1-indexed) — the two are separate components for separate list shapes, not
+ * a shared base, so pick the one matching how the caller already indexes its
+ * pages rather than converting at the call site.
+ */
+class FlyPagerComponent {
+    page = input.required(...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    totalPages = input.required(...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    /** Emits the target page (already clamped to bounds), 0-indexed. */
+    goToPage = output();
+    prevEnabled = computed(() => canGoPrev(this.page()), ...(ngDevMode ? [{ debugName: "prevEnabled" }] : /* istanbul ignore next */ []));
+    nextEnabled = computed(() => canGoNext(this.page(), this.totalPages()), ...(ngDevMode ? [{ debugName: "nextEnabled" }] : /* istanbul ignore next */ []));
+    pages = computed(() => Array.from({ length: Math.max(0, this.totalPages()) }, (_, i) => i), ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    goTo(target) {
+        const next = clampPage(target, this.totalPages());
+        if (next !== this.page())
+            this.goToPage.emit(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyPagerComponent, isStandalone: true, selector: "fly-pager", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { goToPage: "goToPage" }, ngImport: i0, template: "@if (totalPages() > 1) {\r\n  <nav class=\"pgr\" [attr.aria-label]=\"'ui.pagination.label' | translate\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"pgr__arrow\"\r\n      data-arrow=\"back\"\r\n      [disabled]=\"!prevEnabled()\"\r\n      (click)=\"goTo(page() - 1)\"\r\n      [attr.aria-label]=\"'ui.pager.previous' | translate\"\r\n    >\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"M14.8 5.2L8 12l6.8 6.8\" />\r\n      </svg>\r\n    </button>\r\n    @for (p of pages(); track p) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"pgr__page\"\r\n        [class.pgr__page--current]=\"p === page()\"\r\n        [attr.aria-current]=\"p === page() ? 'page' : null\"\r\n        (click)=\"goTo(p)\"\r\n        [attr.aria-label]=\"'ui.pager.page' | translate: { page: p + 1 }\"\r\n      >{{ p + 1 }}</button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"pgr__arrow\"\r\n      data-arrow=\"forward\"\r\n      [disabled]=\"!nextEnabled()\"\r\n      (click)=\"goTo(page() + 1)\"\r\n      [attr.aria-label]=\"'ui.pager.next' | translate\"\r\n    >\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"M9.2 5.2L16 12l-6.8 6.8\" />\r\n      </svg>\r\n    </button>\r\n  </nav>\r\n}\r\n", styles: [".pgr{flex:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;padding:14px 8px;background:var(--w03);border:1px solid var(--w08);border-top:0}.pgr__arrow{flex:none;inline-size:26px;block-size:26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--w6);cursor:pointer;display:grid;place-items:center;transition:background var(--t-state),color var(--t-state)}.pgr__arrow svg{inline-size:14px;block-size:14px}.pgr__arrow:hover:not(:disabled){background:var(--w06)}.pgr__arrow:disabled{color:var(--w2);cursor:default}.pgr__arrow:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host-context([dir=rtl]) .pgr__arrow[data-arrow] svg{transform:scaleX(-1)}.pgr__page{flex:none;min-inline-size:24px;block-size:24px;padding:0 3px;border:0;border-radius:50%;background:transparent;color:var(--w45);cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;transition:background var(--t-state),color var(--t-state)}.pgr__page:hover{background:var(--w08)}.pgr__page--current{background:var(--accent);color:var(--on-accent-fill)}.pgr__page--current:hover{background:var(--accent)}.pgr__page:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}\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: FlyPagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fly-pager', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (totalPages() > 1) {\r\n  <nav class=\"pgr\" [attr.aria-label]=\"'ui.pagination.label' | translate\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"pgr__arrow\"\r\n      data-arrow=\"back\"\r\n      [disabled]=\"!prevEnabled()\"\r\n      (click)=\"goTo(page() - 1)\"\r\n      [attr.aria-label]=\"'ui.pager.previous' | translate\"\r\n    >\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"M14.8 5.2L8 12l6.8 6.8\" />\r\n      </svg>\r\n    </button>\r\n    @for (p of pages(); track p) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"pgr__page\"\r\n        [class.pgr__page--current]=\"p === page()\"\r\n        [attr.aria-current]=\"p === page() ? 'page' : null\"\r\n        (click)=\"goTo(p)\"\r\n        [attr.aria-label]=\"'ui.pager.page' | translate: { page: p + 1 }\"\r\n      >{{ p + 1 }}</button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"pgr__arrow\"\r\n      data-arrow=\"forward\"\r\n      [disabled]=\"!nextEnabled()\"\r\n      (click)=\"goTo(page() + 1)\"\r\n      [attr.aria-label]=\"'ui.pager.next' | translate\"\r\n    >\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"M9.2 5.2L16 12l-6.8 6.8\" />\r\n      </svg>\r\n    </button>\r\n  </nav>\r\n}\r\n", styles: [".pgr{flex:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;padding:14px 8px;background:var(--w03);border:1px solid var(--w08);border-top:0}.pgr__arrow{flex:none;inline-size:26px;block-size:26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--w6);cursor:pointer;display:grid;place-items:center;transition:background var(--t-state),color var(--t-state)}.pgr__arrow svg{inline-size:14px;block-size:14px}.pgr__arrow:hover:not(:disabled){background:var(--w06)}.pgr__arrow:disabled{color:var(--w2);cursor:default}.pgr__arrow:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host-context([dir=rtl]) .pgr__arrow[data-arrow] svg{transform:scaleX(-1)}.pgr__page{flex:none;min-inline-size:24px;block-size:24px;padding:0 3px;border:0;border-radius:50%;background:transparent;color:var(--w45);cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;transition:background var(--t-state),color var(--t-state)}.pgr__page:hover{background:var(--w08)}.pgr__page--current{background:var(--accent);color:var(--on-accent-fill)}.pgr__page--current:hover{background:var(--accent)}.pgr__page:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}\n"] }]
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], goToPage: [{ type: i0.Output, args: ["goToPage"] }] } });
+
 /**
  * Listing card shell — one anatomy for the three reference card patterns:
  *
@@ -22104,6 +22587,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 }]
         }] });
 
+/** Gap between the trigger and a floating panel, and the breathing room kept at a viewport edge. */
+const ANCHOR_GAP = 10;
+const EDGE_PAD = 16;
+/**
+ * How far the panel's trailing edge overhangs the trigger's, matching the canon
+ * dialog's `right: -4px`. The panel is many times wider than the button, so
+ * aligning the two edges exactly reads as a near-miss; the deliberate overhang
+ * reads as intentional.
+ */
+const ANCHOR_OVERHANG = 4;
 /**
  * Collapsible advanced-filter panel — structural port of the reference
  * `.signals-page-fp` block (head row + optional status section + field area +
@@ -22128,6 +22621,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  *  - Deferred pages set `showSearchButton` true, drop the per-field handlers,
  *    and commit staged criteria on `(search)`.
  *
+ * ## Three placements, and how to pick one
+ *  - **In flow** (neither `anchored` nor `anchorEl`) — a block in the page. Opening
+ *    it pushes the content below it down. Only right for a page whose filters are
+ *    part of its permanent furniture.
+ *  - **`[anchored]`** — a dropdown pinned to the trailing edge of a `position:
+ *    relative` ancestor the page supplies (the wrapper around its search box).
+ *  - **`[anchorEl]`** — a dropdown pinned to a specific ELEMENT anywhere on screen,
+ *    including one outside this component's own DOM subtree. See {@link anchorEl}.
+ *
+ * `anchorEl` wins when both are set, so a page can bind it optionally and fall
+ * back to `anchored` in whichever mode has no element to offer.
+ *
  * Matching the source, the panel renders nothing while `open` is false.
  */
 class FlyFilterPanelComponent {
@@ -22146,18 +22651,66 @@ class FlyFilterPanelComponent {
      * `[expandable]`.
      */
     anchored = input(false, ...(ngDevMode ? [{ debugName: "anchored" }] : /* istanbul ignore next */ []));
+    /**
+     * The element this panel hangs off — a dropdown pinned under a specific trigger
+     * rather than under whichever ancestor happens to be positioned.
+     *
+     * ## The case it exists for
+     * A listing screen's filter toggle does not necessarily live in the screen.
+     * Embedded in the desktop shell, the toggle is a magic-bar action painted by
+     * `fly-magic-actions` in the top-bar pill — the shell's DOM, above the window,
+     * across a federation boundary. `[anchored]` cannot reach it: it pins to a
+     * positioned ancestor, and the nearest one is inside the app's own page header.
+     * PPM's projects register shipped exactly that way, and the result was a panel
+     * floating mid-window while the button that opened it sat in the chrome above,
+     * with nothing tying the two together. `MagicBarActionView.run(trigger)` hands
+     * the publisher that button; binding it here is the other half.
+     *
+     * ## What changes when it is set
+     * The host is **portalled to `<body>`** and switched to `position: fixed`. Both
+     * are forced rather than chosen: a shell window establishes a containing block
+     * (`transform` / `backdrop-filter`) and clips its content box, so a panel left in
+     * the app's subtree resolves `fixed` against the window instead of the viewport
+     * AND is clipped at the window's top edge — which is exactly where a panel
+     * hanging off the chrome above it needs to paint. Placement is then measured from
+     * the anchor's rect on every open, resize and scroll, mirrored under RTL, and
+     * clamped so a trigger near a viewport edge still opens fully on screen.
+     *
+     * ## Lifetime
+     * `null` (the default) restores the in-flow/`anchored` behaviour, and the host
+     * returns to where it was declared. Bind it to a signal your open-state clears —
+     * the element the magic bar hands you is the button AS PAINTED, and a re-publish
+     * or a mode switch destroys it.
+     */
+    anchorEl = input(null, ...(ngDevMode ? [{ debugName: "anchorEl" }] : /* istanbul ignore next */ []));
     /** Clear-filters pressed — the page resets its own filter state. */
     cleared = output();
-    /** Close (×) pressed — the page flips its open flag. */
+    /** Close (×) pressed, or a dismissing press outside — the page flips its open flag. */
     closed = output();
     /** Search pressed — deferred pages commit staged criteria and query. */
     searched = output();
     /** Whether the `[filter-more]` advanced fields are revealed. */
     showMore = signal(false, ...(ngDevMode ? [{ debugName: "showMore" }] : /* istanbul ignore next */ []));
+    /** True while the panel is a `<body>`-portalled, anchor-positioned dropdown. */
+    floating = computed(() => this.open() && this.anchorEl() !== null, ...(ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a press outside the panel should dismiss it.
+     *
+     * Only while the panel FLOATS over the page. In flow it is a block OF the page,
+     * and closing it because the user clicked the table it filters would discard
+     * staged criteria on an unrelated interaction. Floating, the opposite holds: an
+     * overlay that survives a click elsewhere is the "panel will not collapse on
+     * click-away" bug.
+     */
+    dismissable = computed(() => this.open() && (this.anchored() || this.floating()), ...(ngDevMode ? [{ debugName: "dismissable" }] : /* istanbul ignore next */ []));
     _host = inject(ElementRef);
+    _doc = inject(DOCUMENT$1);
     _destroyRef = inject(DestroyRef);
     _clipObserver = null;
     _placeRaf = 0;
+    /** Marks where the host was declared, so un-portalling puts it back exactly. */
+    _portalHome = null;
+    _floatTeardown = null;
     constructor() {
         // Anchored placement: the CSS pins the panel's inline-end to the anchor
         // wrapper, but the wrapper is usually a small search box that can sit
@@ -22168,10 +22721,22 @@ class FlyFilterPanelComponent {
         // with a physical translate + width clamp so the panel always stays inside,
         // whichever side of the window the anchor is on. Physical-pixel deltas are
         // direction-agnostic, so the same clamp holds under RTL.
+        //
+        // Floating placement is the same idea against a different box — the viewport,
+        // and an anchor that need not be anywhere near this component's subtree.
         afterRenderEffect(() => {
-            const active = this.anchored() && this.open();
+            const floating = this.floating();
+            const anchored = this.anchored() && this.open();
             untracked(() => {
-                if (!active) {
+                if (floating) {
+                    this._teardownPlacement();
+                    this._portal();
+                    this._placeFloating();
+                    this._observeFloating();
+                    return;
+                }
+                this._teardownFloating();
+                if (!anchored) {
                     this._teardownPlacement();
                     return;
                 }
@@ -22179,8 +22744,124 @@ class FlyFilterPanelComponent {
                 this._observeClipAncestor();
             });
         });
-        this._destroyRef.onDestroy(() => this._teardownPlacement());
+        this._destroyRef.onDestroy(() => {
+            this._teardownPlacement();
+            this._teardownFloating();
+        });
+    }
+    // ── Floating (anchorEl) placement ───────────────────────────────────────────
+    /**
+     * Move the host to `<body>`, leaving a comment node where it was declared.
+     *
+     * The comment is what makes this reversible. Angular keeps rendering into the
+     * host wherever it sits — relocating a DOM node does not detach a view — but the
+     * component cannot ask the DOM "where were you?" after the fact, and the original
+     * parent may itself be torn down while the panel is open. Un-portalling therefore
+     * re-inserts before the marker while the marker is still attached, and simply
+     * leaves the host where it is otherwise.
+     */
+    _portal() {
+        const host = this._host.nativeElement;
+        const body = this._doc.body;
+        if (!body || host.parentNode === body)
+            return;
+        if (!this._portalHome) {
+            this._portalHome = this._doc.createComment('fly-filter-panel');
+            host.parentNode?.insertBefore(this._portalHome, host);
+        }
+        body.appendChild(host);
+    }
+    _unportal() {
+        const host = this._host.nativeElement;
+        const home = this._portalHome;
+        this._portalHome = null;
+        if (home?.parentNode) {
+            home.parentNode.insertBefore(host, home);
+            home.parentNode.removeChild(home);
+            return;
+        }
+        // Nowhere to go home to: the declaring parent was torn down while the panel was
+        // open (a route change, a closing window). Angular has already destroyed the view,
+        // but the host is OUR node in `<body>` and nothing else will collect it — leaving it
+        // there strands an empty panel element in the document for the rest of the session.
+        if (host.parentNode === this._doc.body)
+            this._doc.body.removeChild(host);
+    }
+    /**
+     * Pin the panel under {@link anchorEl}: {@link ANCHOR_GAP} below its bottom edge,
+     * its trailing edge overhanging the anchor's by {@link ANCHOR_OVERHANG}, clamped
+     * into the viewport on both axes.
+     *
+     * Trailing edge, not "right": the anchor's OWN computed direction decides which
+     * physical side that is, so the panel opens inward from the trigger under both LTR
+     * and RTL with nothing passed by the caller. The final clamp is in physical pixels
+     * and therefore direction-agnostic — a trigger 30px from the viewport edge yields
+     * the same on-screen result either way.
+     */
+    _placeFloating() {
+        const host = this._host.nativeElement;
+        const anchor = this.anchorEl();
+        const win = host.ownerDocument.defaultView;
+        if (!anchor || !win)
+            return;
+        const rect = anchor.getBoundingClientRect();
+        const vw = win.innerWidth;
+        const vh = win.innerHeight;
+        // Clamp the width FIRST: the host's own rect below has to reflect it, and a
+        // panel wider than the viewport makes every horizontal clamp meaningless.
+        host.style.setProperty('--fp-max-w', `${Math.max(240, Math.round(vw - 2 * EDGE_PAD))}px`);
+        const top = Math.min(rect.bottom + ANCHOR_GAP, Math.max(EDGE_PAD, vh - EDGE_PAD));
+        host.style.setProperty('--fp-y', `${Math.round(top)}px`);
+        host.style.setProperty('--fp-max-h', `${Math.max(160, Math.round(vh - top - EDGE_PAD))}px`);
+        // Read AFTER the width clamp and the block start are applied, so the measured
+        // box is the final one.
+        const width = host.getBoundingClientRect().width;
+        const rtl = win.getComputedStyle(anchor).direction === 'rtl';
+        const raw = rtl ? rect.left - ANCHOR_OVERHANG : rect.right + ANCHOR_OVERHANG - width;
+        const maxLeft = Math.max(EDGE_PAD, vw - EDGE_PAD - width);
+        host.style.setProperty('--fp-x', `${Math.round(Math.min(Math.max(raw, EDGE_PAD), maxLeft))}px`);
+    }
+    /**
+     * Re-place on anything that can move the anchor under an already-open panel: the
+     * viewport resizing, the shell window being dragged or resized (which moves or
+     * resizes the anchor's own box), and scrolling ANYWHERE — captured, because the
+     * anchor lives in the chrome and the scroller that shifts it is not necessarily an
+     * ancestor of this host, which is now in `<body>`.
+     */
+    _observeFloating() {
+        if (this._floatTeardown)
+            return;
+        const host = this._host.nativeElement;
+        const win = host.ownerDocument.defaultView;
+        const anchor = this.anchorEl();
+        if (!win)
+            return;
+        const replace = () => {
+            cancelAnimationFrame(this._placeRaf);
+            this._placeRaf = requestAnimationFrame(() => this._placeFloating());
+        };
+        win.addEventListener('resize', replace);
+        win.addEventListener('scroll', replace, true);
+        const observer = anchor && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(replace) : null;
+        if (anchor && observer)
+            observer.observe(anchor);
+        this._floatTeardown = () => {
+            win.removeEventListener('resize', replace);
+            win.removeEventListener('scroll', replace, true);
+            observer?.disconnect();
+            cancelAnimationFrame(this._placeRaf);
+        };
+    }
+    _teardownFloating() {
+        this._floatTeardown?.();
+        this._floatTeardown = null;
+        this._unportal();
+        const host = this._host.nativeElement;
+        for (const prop of ['--fp-x', '--fp-y', '--fp-max-h', '--fp-max-w']) {
+            host.style.removeProperty(prop);
+        }
     }
+    // ── Anchored (positioned-ancestor) placement ────────────────────────────────
     _place() {
         const host = this._host.nativeElement;
         const win = host.ownerDocument.defaultView;
@@ -22191,14 +22872,13 @@ class FlyFilterPanelComponent {
         host.style.removeProperty('--fp-max-w');
         const clipRect = this._clipAncestor(host)?.getBoundingClientRect();
         const bounds = clipRect ?? new DOMRect(0, 0, win.innerWidth, win.innerHeight);
-        const pad = 16;
-        const availableWidth = Math.max(240, bounds.width - 2 * pad);
+        const availableWidth = Math.max(240, bounds.width - 2 * EDGE_PAD);
         host.style.setProperty('--fp-max-w', `${Math.round(availableWidth)}px`);
         // Setting the width clamp above forces layout before this read, so the rect
         // already reflects the clamped size.
         const rect = host.getBoundingClientRect();
-        const minLeft = bounds.left + pad;
-        const maxRight = bounds.right - pad;
+        const minLeft = bounds.left + EDGE_PAD;
+        const maxRight = bounds.right - EDGE_PAD;
         let shift = 0;
         if (rect.left < minLeft)
             shift = minLeft - rect.left;
@@ -22241,12 +22921,15 @@ class FlyFilterPanelComponent {
         host.style.removeProperty('--fp-max-w');
     }
     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: ["@charset \"UTF-8\";:host{display:block;container-type:inline-size}.fp{margin-block-end:var(--sp-4);border-radius:var(--r-lg);overflow:hidden;animation:fly-fp-in var(--t-overlay);border:1px solid var(--glass2-border);background-image:var(--glass2-bg);box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fp{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fp:before,.fp:after{display:none}}@media(prefers-contrast:more){.fp{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fp:after{animation:none}}:host(.fp--anchored){--fp-shift-x: 0px;--fp-max-w: calc(100vw - 2 * var(--sp-4));position:absolute;inset-block-start:calc(100% + var(--sp-2));inset-inline-end:0;z-index:var(--z-overlay);width:min(600px,var(--fp-max-w));transform:translate(var(--fp-shift-x))}:host(.fp--anchored) .fp{margin-block-end:0}: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:.5px solid var(--w1)}.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(--w08)}.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(--w08)}.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:.5px solid var(--w08)}.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:.5px solid var(--w08)}.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(--w08)}.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:.5px solid var(--w08)}.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 }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cleared: "cleared", closed: "closed", searched: "searched" }, host: { properties: { "class.fp--anchored": "anchored() && !floating()", "class.fp--floating": "floating()" } }, ngImport: i0, template: "    @if (open()) {\r\n      <!--\r\n        The dismiss host is `.fp`, and the TRIGGER is listed as ignored rather than\r\n        wrapped: an anchored panel's toggle can live in another component entirely (the\r\n        shell's magic bar), so there is no element that contains both. See the\r\n        directive's `flyClickOutsideIgnore` for what goes wrong without it.\r\n      -->\r\n      <div\r\n        class=\"fp\"\r\n        [attr.data-layout]=\"layout()\"\r\n        [flyClickOutsideEnabled]=\"dismissable()\"\r\n        [flyClickOutsideIgnore]=\"anchorEl()\"\r\n        (flyClickOutside)=\"closed.emit()\"\r\n      >\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);border-radius:var(--r-lg);overflow:hidden;animation:fly-fp-in var(--t-overlay);border:1px solid var(--glass2-border);background-image:var(--glass2-bg);box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fp{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fp:before,.fp:after{display:none}}@media(prefers-contrast:more){.fp{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fp:after{animation:none}}:host(.fp--anchored){--fp-shift-x: 0px;--fp-max-w: calc(100vw - 2 * var(--sp-4));position:absolute;inset-block-start:calc(100% + var(--sp-2));inset-inline-end:0;z-index:var(--z-overlay);width:min(600px,var(--fp-max-w));transform:translate(var(--fp-shift-x))}:host(.fp--floating){--fp-max-w: calc(100vw - 2 * var(--sp-4));--fp-max-h: calc(100vh - 2 * var(--sp-4));--fp-x: 0px;--fp-y: 0px;position:fixed;inset-block-start:var(--fp-y);inset-inline-start:auto;left:var(--fp-x);z-index:var(--z-overlay);width:min(600px,var(--fp-max-w));max-height:var(--fp-max-h)}:host(.fp--floating) .fp{margin-block-end:0;max-height:var(--fp-max-h);display:flex;flex-direction:column}:host(.fp--floating) .fp__body{flex:1 1 auto;min-height:0;overflow-y:auto}:host(.fp--anchored) .fp{margin-block-end:0}: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:.5px solid var(--w1)}.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(--w08)}.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(--w08)}.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:.5px solid var(--w08)}.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:.5px solid var(--w08)}.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(--w08)}.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:.5px solid var(--w08)}.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: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled", "flyClickOutsideIgnore"], outputs: ["flyClickOutside"] }, { 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: ["@charset \"UTF-8\";:host{display:block;container-type:inline-size}.fp{margin-block-end:var(--sp-4);border-radius:var(--r-lg);overflow:hidden;animation:fly-fp-in var(--t-overlay);border:1px solid var(--glass2-border);background-image:var(--glass2-bg);box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fp{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fp:before,.fp:after{display:none}}@media(prefers-contrast:more){.fp{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fp:after{animation:none}}:host(.fp--anchored){--fp-shift-x: 0px;--fp-max-w: calc(100vw - 2 * var(--sp-4));position:absolute;inset-block-start:calc(100% + var(--sp-2));inset-inline-end:0;z-index:var(--z-overlay);width:min(600px,var(--fp-max-w));transform:translate(var(--fp-shift-x))}:host(.fp--anchored) .fp{margin-block-end:0}: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:.5px solid var(--w1)}.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(--w08)}.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(--w08)}.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:.5px solid var(--w08)}.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:.5px solid var(--w08)}.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(--w08)}.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:.5px solid var(--w08)}.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"] }]
-        }], ctorParameters: () => [], 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"] }] } });
+            args: [{ selector: 'fly-filter-panel', standalone: true, imports: [TranslatePipe, FlyButtonComponent, FlyClickOutsideDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.fp--anchored]': 'anchored() && !floating()',
+                        '[class.fp--floating]': 'floating()',
+                    }, template: "    @if (open()) {\r\n      <!--\r\n        The dismiss host is `.fp`, and the TRIGGER is listed as ignored rather than\r\n        wrapped: an anchored panel's toggle can live in another component entirely (the\r\n        shell's magic bar), so there is no element that contains both. See the\r\n        directive's `flyClickOutsideIgnore` for what goes wrong without it.\r\n      -->\r\n      <div\r\n        class=\"fp\"\r\n        [attr.data-layout]=\"layout()\"\r\n        [flyClickOutsideEnabled]=\"dismissable()\"\r\n        [flyClickOutsideIgnore]=\"anchorEl()\"\r\n        (flyClickOutside)=\"closed.emit()\"\r\n      >\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);border-radius:var(--r-lg);overflow:hidden;animation:fly-fp-in var(--t-overlay);border:1px solid var(--glass2-border);background-image:var(--glass2-bg);box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fp{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fp:before,.fp:after{display:none}}@media(prefers-contrast:more){.fp{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fp:after{animation:none}}:host(.fp--anchored){--fp-shift-x: 0px;--fp-max-w: calc(100vw - 2 * var(--sp-4));position:absolute;inset-block-start:calc(100% + var(--sp-2));inset-inline-end:0;z-index:var(--z-overlay);width:min(600px,var(--fp-max-w));transform:translate(var(--fp-shift-x))}:host(.fp--floating){--fp-max-w: calc(100vw - 2 * var(--sp-4));--fp-max-h: calc(100vh - 2 * var(--sp-4));--fp-x: 0px;--fp-y: 0px;position:fixed;inset-block-start:var(--fp-y);inset-inline-start:auto;left:var(--fp-x);z-index:var(--z-overlay);width:min(600px,var(--fp-max-w));max-height:var(--fp-max-h)}:host(.fp--floating) .fp{margin-block-end:0;max-height:var(--fp-max-h);display:flex;flex-direction:column}:host(.fp--floating) .fp__body{flex:1 1 auto;min-height:0;overflow-y:auto}:host(.fp--anchored) .fp{margin-block-end:0}: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:.5px solid var(--w1)}.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(--w08)}.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(--w08)}.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:.5px solid var(--w08)}.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:.5px solid var(--w08)}.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(--w08)}.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:.5px solid var(--w08)}.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"] }]
+        }], ctorParameters: () => [], 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 }] }], anchorEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorEl", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
 
 /**
  * Per-column cell override for {@link FlyDataTableComponent}. Declared on an
@@ -22602,11 +23285,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);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;padding-inline:4px;margin-inline:-4px;border-radius:6px;transition:color var(--t-state),background var(--t-state)}.crumb--link:hover{color:var(--ink);background:var(--w08)}.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:12px 32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1}.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-variant-numeric:tabular-nums;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 (width <= 640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(width<=640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row 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;padding-inline:4px;margin-inline:-4px;border-radius:6px;transition:color var(--t-state),background var(--t-state)}.crumb--link:hover{color:var(--ink);background:var(--w08)}.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:12px 32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1}.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);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-variant-numeric:tabular-nums;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 (width <= 640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(width<=640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row 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);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;padding-inline:4px;margin-inline:-4px;border-radius:6px;transition:color var(--t-state),background var(--t-state)}.crumb--link:hover{color:var(--ink);background:var(--w08)}.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:12px 32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1}.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-variant-numeric:tabular-nums;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 (width <= 640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(width<=640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row 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;padding-inline:4px;margin-inline:-4px;border-radius:6px;transition:color var(--t-state),background var(--t-state)}.crumb--link:hover{color:var(--ink);background:var(--w08)}.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:12px 32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1}.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);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-variant-numeric:tabular-nums;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 (width <= 640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(width<=640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row 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: [{
@@ -23292,14 +23975,14 @@ class FlyAppTopbarComponent {
         this.rows()[index]?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppTopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyAppTopbarComponent, isStandalone: true, selector: "fly-app-topbar", inputs: { brandLabelKey: { classPropertyName: "brandLabelKey", publicName: "brandLabelKey", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, footerLabel: { classPropertyName: "footerLabel", publicName: "footerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { moduleSelected: "moduleSelected", brandSelected: "brandSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.fly-topbar--docked": "docked()" } }, queries: [{ propertyName: "icons", predicate: FlyModuleIconDirective, isSignal: true }], viewQueries: [{ propertyName: "rows", predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "trigger", predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"triggerAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--w1);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}:host(.fly-topbar--docked){flex:1 1 auto;min-inline-size:0;z-index:auto}:host(.fly-topbar--docked) .fly-topbar{padding:0;background:transparent;border-block-end:0}:host(.fly-topbar--docked) .fly-topbar__lead{gap:2px}:host(.fly-topbar--docked) .fly-topbar__brand,:host(.fly-topbar--docked) .fly-topbar__module{block-size:26px;padding-block:0;padding-inline:var(--sp-2);border-radius:var(--r-sm);font-size:var(--text-sm);line-height:1;color:var(--label-secondary)}:host(.fly-topbar--docked) .fly-topbar__brand:hover,:host(.fly-topbar--docked) .fly-topbar__module:hover{background:var(--w08);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module{color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module--on{background:var(--w08)}:host(.fly-topbar--docked) .fly-topbar__brand-name{font-weight:var(--fw-medium)}:host(.fly-topbar--docked) .fly-topbar__module-label{font-weight:var(--fw-semibold)}:host(.fly-topbar--docked) .fly-topbar__sep{color:var(--w28)}:host(.fly-topbar--docked) .fly-topbar__module-icon{inline-size:14px;block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark{max-block-size:22px}:host(.fly-topbar--docked) .fly-topbar__brand-mark ::ng-deep *{max-inline-size:22px;max-block-size:22px}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-topbar__pop{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-topbar__pop:before,.fly-topbar__pop:after{display:none}}@media(prefers-contrast:more){.fly-topbar__pop{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-topbar__pop:after{animation:none}}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--w1)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:.5px solid var(--w08);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"], dependencies: [{ kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled"], outputs: ["flyClickOutside"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyAppTopbarComponent, isStandalone: true, selector: "fly-app-topbar", inputs: { brandLabelKey: { classPropertyName: "brandLabelKey", publicName: "brandLabelKey", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, footerLabel: { classPropertyName: "footerLabel", publicName: "footerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { moduleSelected: "moduleSelected", brandSelected: "brandSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.fly-topbar--docked": "docked()" } }, queries: [{ propertyName: "icons", predicate: FlyModuleIconDirective, isSignal: true }], viewQueries: [{ propertyName: "rows", predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "trigger", predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"triggerAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--w1);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}:host(.fly-topbar--docked){flex:1 1 auto;min-inline-size:0;z-index:auto}:host(.fly-topbar--docked) .fly-topbar{padding:0;background:transparent;border-block-end:0}:host(.fly-topbar--docked) .fly-topbar__lead{gap:2px}:host(.fly-topbar--docked) .fly-topbar__brand,:host(.fly-topbar--docked) .fly-topbar__module{block-size:26px;padding-block:0;padding-inline:var(--sp-2);border-radius:var(--r-md);gap:6px;font-size:var(--text-sm);line-height:1;color:var(--w55)}:host(.fly-topbar--docked) .fly-topbar__brand:hover,:host(.fly-topbar--docked) .fly-topbar__module:hover{background:var(--w08);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module{background:var(--w06);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module--on{background:var(--w08)}:host(.fly-topbar--docked) .fly-topbar__brand-name{font-weight:var(--fw-medium)}:host(.fly-topbar--docked) .fly-topbar__module-label{font-weight:var(--fw-semibold);letter-spacing:-.006em}:host-context([dir=rtl]) :host(.fly-topbar--docked) .fly-topbar__module-label{letter-spacing:normal}:host(.fly-topbar--docked) .fly-topbar__sep{position:relative;display:inline-block;inline-size:7px;block-size:7px;color:transparent;border-block-start:1.5px solid var(--w28);border-inline-end:1.5px solid var(--w28);transform:rotate(45deg)}:host-context([dir=rtl]) :host(.fly-topbar--docked) .fly-topbar__sep{transform:rotate(-135deg)}:host(.fly-topbar--docked) .fly-topbar__actions{display:none}:host(.fly-topbar--docked) .fly-topbar__module-icon{inline-size:14px;block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark{max-block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark ::ng-deep *{max-inline-size:14px;max-block-size:14px}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-topbar__pop{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-topbar__pop:before,.fly-topbar__pop:after{display:none}}@media(prefers-contrast:more){.fly-topbar__pop{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-topbar__pop:after{animation:none}}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--w1)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:.5px solid var(--w08);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"], dependencies: [{ kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled", "flyClickOutsideIgnore"], outputs: ["flyClickOutside"] }, { 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: FlyAppTopbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fly-app-topbar', standalone: true, imports: [TranslatePipe, FlyClickOutsideDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(document:keydown.escape)': 'onEscape()',
                         '[class.fly-topbar--docked]': 'docked()',
-                    }, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"triggerAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--w1);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}:host(.fly-topbar--docked){flex:1 1 auto;min-inline-size:0;z-index:auto}:host(.fly-topbar--docked) .fly-topbar{padding:0;background:transparent;border-block-end:0}:host(.fly-topbar--docked) .fly-topbar__lead{gap:2px}:host(.fly-topbar--docked) .fly-topbar__brand,:host(.fly-topbar--docked) .fly-topbar__module{block-size:26px;padding-block:0;padding-inline:var(--sp-2);border-radius:var(--r-sm);font-size:var(--text-sm);line-height:1;color:var(--label-secondary)}:host(.fly-topbar--docked) .fly-topbar__brand:hover,:host(.fly-topbar--docked) .fly-topbar__module:hover{background:var(--w08);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module{color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module--on{background:var(--w08)}:host(.fly-topbar--docked) .fly-topbar__brand-name{font-weight:var(--fw-medium)}:host(.fly-topbar--docked) .fly-topbar__module-label{font-weight:var(--fw-semibold)}:host(.fly-topbar--docked) .fly-topbar__sep{color:var(--w28)}:host(.fly-topbar--docked) .fly-topbar__module-icon{inline-size:14px;block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark{max-block-size:22px}:host(.fly-topbar--docked) .fly-topbar__brand-mark ::ng-deep *{max-inline-size:22px;max-block-size:22px}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-topbar__pop{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-topbar__pop:before,.fly-topbar__pop:after{display:none}}@media(prefers-contrast:more){.fly-topbar__pop{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-topbar__pop:after{animation:none}}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--w1)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:.5px solid var(--w08);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"] }]
+                    }, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"triggerAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--w1);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}:host(.fly-topbar--docked){flex:1 1 auto;min-inline-size:0;z-index:auto}:host(.fly-topbar--docked) .fly-topbar{padding:0;background:transparent;border-block-end:0}:host(.fly-topbar--docked) .fly-topbar__lead{gap:2px}:host(.fly-topbar--docked) .fly-topbar__brand,:host(.fly-topbar--docked) .fly-topbar__module{block-size:26px;padding-block:0;padding-inline:var(--sp-2);border-radius:var(--r-md);gap:6px;font-size:var(--text-sm);line-height:1;color:var(--w55)}:host(.fly-topbar--docked) .fly-topbar__brand:hover,:host(.fly-topbar--docked) .fly-topbar__module:hover{background:var(--w08);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module{background:var(--w06);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module--on{background:var(--w08)}:host(.fly-topbar--docked) .fly-topbar__brand-name{font-weight:var(--fw-medium)}:host(.fly-topbar--docked) .fly-topbar__module-label{font-weight:var(--fw-semibold);letter-spacing:-.006em}:host-context([dir=rtl]) :host(.fly-topbar--docked) .fly-topbar__module-label{letter-spacing:normal}:host(.fly-topbar--docked) .fly-topbar__sep{position:relative;display:inline-block;inline-size:7px;block-size:7px;color:transparent;border-block-start:1.5px solid var(--w28);border-inline-end:1.5px solid var(--w28);transform:rotate(45deg)}:host-context([dir=rtl]) :host(.fly-topbar--docked) .fly-topbar__sep{transform:rotate(-135deg)}:host(.fly-topbar--docked) .fly-topbar__actions{display:none}:host(.fly-topbar--docked) .fly-topbar__module-icon{inline-size:14px;block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark{max-block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark ::ng-deep *{max-inline-size:14px;max-block-size:14px}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-topbar__pop{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-topbar__pop:before,.fly-topbar__pop:after{display:none}}@media(prefers-contrast:more){.fly-topbar__pop{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-topbar__pop:after{animation:none}}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--w1)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:.5px solid var(--w08);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"] }]
         }], 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 }] }] } });
 
 /**
@@ -23942,13 +24625,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }] } });
 
 /**
- * Segmented radiogroup — one anatomy for form segmented controls (the
- * llm-throttle level picker) and list status-pill filters (the legacy
- * `.signals-page-statusfilter`, which is also the visual source).
+ * Segmented control — one anatomy for form segmented controls (the llm-throttle
+ * level picker), list status-pill filters (the legacy `.signals-page-statusfilter`,
+ * which is also the visual source), and the canon filter-panel status row.
  *
- * a11y: `role="radiogroup"` + `role="radio"` segments, roving tabindex
- * (selected segment is the tab stop), RTL-aware arrow-key navigation with
- * wrap-around; arrows move both selection and focus.
+ * ## Two selection models
+ * Single-select (default) is a `role="radiogroup"` over `role="radio"` segments,
+ * driven by {@link value}. Multi-select ({@link multiple}) is a `role="group"` of
+ * `aria-pressed` toggle buttons, driven by {@link values}. Both are here rather than
+ * split across two components because everything a reader has to learn — the option
+ * list, the count badge, the two variants, the RTL handling — is shared, and a filter
+ * row routinely needs the multi-select one while looking identical.
+ *
+ * The a11y models genuinely differ and the branch is not cosmetic: a radiogroup is
+ * ONE tab stop with arrow keys moving the selection, while a group of toggle buttons
+ * is individually tabbable and arrow keys must not change anything (moving selection
+ * on arrow would silently toggle filters as a keyboard user walked the row).
+ *
+ * a11y: roving tabindex in single-select (the selected segment is the tab stop),
+ * RTL-aware arrow-key navigation with wrap-around; arrows move both selection and
+ * focus. Multi-select leaves the native tab order alone and binds no arrow keys.
  */
 class FlySegmentedComponent {
     i18n = inject(I18nService);
@@ -23959,17 +24655,48 @@ class FlySegmentedComponent {
     value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     ariaLabelKey = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
+    /** See {@link SegmentedVariant}. */
+    variant = input('track', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Switch to multi-select: every pressed option is carried in {@link values} and
+     * clicking one toggles it. {@link value} is ignored in this mode.
+     *
+     * A separate model rather than widening `value` to `string | string[]`: a consumer
+     * would then have to narrow on every read, and every EXISTING consumer's
+     * `[(value)]` binding would stop type-checking — a ds-compat MAJOR for a feature
+     * none of them asked for.
+     */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /**
+     * The pressed options in {@link multiple} mode. Order is the consumer's; this
+     * component appends on select and filters on deselect, so a caller that treats it
+     * as a set is unaffected and one that treats it as a list keeps its ordering.
+     */
+    values = model([], ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
     selectedIndex = computed(() => this.options().findIndex(o => o.value === this.value()), ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    /** Selected in whichever model is active. */
+    isOn(value) {
+        return this.multiple() ? this.values().includes(value) : this.value() === value;
+    }
     tabIndexFor(index) {
         const selected = this.selectedIndex();
         return index === (selected >= 0 ? selected : 0) ? 0 : -1;
     }
     select(value) {
-        if (!this.disabled())
+        if (this.disabled())
+            return;
+        if (!this.multiple()) {
             this.value.set(value);
+            return;
+        }
+        this.values.update(current => current.includes(value) ? current.filter(v => v !== value) : [...current, value]);
     }
     onKey(event) {
-        if (this.disabled())
+        // Multi-select is a group of toggle buttons, each its own tab stop: arrows must
+        // stay unbound. Wiring them the way the radiogroup does would move selection as
+        // well as focus, so walking the row with the keyboard would toggle every filter
+        // it passed through.
+        if (this.disabled() || this.multiple())
             return;
         const next = nextSegmentIndex(this.selectedIndex(), event.key, this.options().length, this.i18n.isRtl());
         if (next === null)
@@ -23979,10 +24706,11 @@ class FlySegmentedComponent {
         this.el.nativeElement.querySelectorAll('[role="radio"]')[next]?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlySegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlySegmentedComponent, isStandalone: true, selector: "fly-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlySegmentedComponent, isStandalone: true, selector: "fly-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, ngImport: i0, template: `
     <div
       class="seg"
-      role="radiogroup"
+      [attr.data-variant]="variant()"
+      [attr.role]="multiple() ? 'group' : 'radiogroup'"
       tabindex="-1"
       [attr.aria-label]="ariaLabelKey() ? (ariaLabelKey()! | translate) : null"
       (keydown)="onKey($event)"
@@ -23991,10 +24719,11 @@ class FlySegmentedComponent {
         <button
           type="button"
           class="seg__btn"
-          role="radio"
-          [class.on]="value() === opt.value"
-          [attr.aria-checked]="value() === opt.value"
-          [attr.tabindex]="tabIndexFor($index)"
+          [attr.role]="multiple() ? null : 'radio'"
+          [class.on]="isOn(opt.value)"
+          [attr.aria-checked]="multiple() ? null : isOn(opt.value)"
+          [attr.aria-pressed]="multiple() ? isOn(opt.value) : null"
+          [attr.tabindex]="multiple() ? null : tabIndexFor($index)"
           [disabled]="disabled()"
           (click)="select(opt.value)"
         >
@@ -24005,14 +24734,15 @@ class FlySegmentedComponent {
         </button>
       }
     </div>
-  `, isInline: true, styles: [":host{display:inline-flex}.seg{display:flex;flex-wrap:wrap;gap:3px;padding:3px;background:var(--w07);border:1px solid var(--w08);border-radius:99px}.seg__btn{display:inline-flex;align-items:center;gap:6px;min-block-size:28px;padding:0 13px;border:0;background:transparent;color:var(--w55);font:500 12.5px/1.3 var(--font-family);font-family:inherit;border-radius:99px;cursor:pointer;white-space:nowrap;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.seg__btn:hover{color:var(--w85)}.seg__btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.seg__btn:disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed}.seg__btn.on{background:var(--w14);color:var(--w95);font-weight:600;box-shadow:var(--shadow-card),var(--glass2-inset)}.seg__count{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;padding:1px 5px;background:var(--w1);border-radius:4px;color:var(--w42)}.seg__btn.on .seg__count{color:var(--w55)}@media(pointer:coarse){.seg__btn{min-block-size:44px}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex}.seg{display:flex;flex-wrap:wrap;gap:3px;padding:3px;background:var(--w07);border:1px solid var(--w08);border-radius:99px}.seg[data-variant=pills]{gap:6px;padding:0;background:transparent;border:0;border-radius:0}.seg__btn{display:inline-flex;align-items:center;gap:6px;min-block-size:28px;padding:0 13px;border:0;background:transparent;color:var(--w55);font:500 12.5px/1.3 var(--font-family);font-family:inherit;border-radius:99px;cursor:pointer;white-space:nowrap;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.seg__btn:hover{color:var(--w85)}.seg__btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.seg__btn:disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed}.seg__btn.on{background:var(--w14);color:var(--w95);font-weight:600;box-shadow:var(--shadow-card),var(--glass2-inset)}.seg__count{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;padding:1px 5px;background:var(--w1);border-radius:4px;color:var(--w42)}.seg__btn.on .seg__count{color:var(--w55)}.seg[data-variant=pills] .seg__btn{min-block-size:30px;padding:0 12px;border:.5px solid var(--w12);background:var(--w04);color:var(--w7);border-radius:99px;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro),border-color var(--nova-duration-hover) var(--nova-ease-micro)}.seg[data-variant=pills] .seg__btn:hover:not(.on){background:var(--w08);border-color:var(--w2);color:var(--ink)}.seg[data-variant=pills] .seg__btn.on{border-color:transparent;background:var(--accent);color:var(--on-accent);font-weight:500;box-shadow:none}.seg[data-variant=pills] .seg__count{padding:2px 6px;border-radius:7px;font-family:var(--font-family);font-size:10.5px;font-weight:var(--fw-semibold);color:inherit}.seg[data-variant=pills] .seg__btn.on .seg__count{background:var(--w22);color:inherit}@media(pointer:coarse){.seg__btn,.seg[data-variant=pills] .seg__btn{min-block-size:44px}}\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: FlySegmentedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fly-segmented', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div
       class="seg"
-      role="radiogroup"
+      [attr.data-variant]="variant()"
+      [attr.role]="multiple() ? 'group' : 'radiogroup'"
       tabindex="-1"
       [attr.aria-label]="ariaLabelKey() ? (ariaLabelKey()! | translate) : null"
       (keydown)="onKey($event)"
@@ -24021,10 +24751,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         <button
           type="button"
           class="seg__btn"
-          role="radio"
-          [class.on]="value() === opt.value"
-          [attr.aria-checked]="value() === opt.value"
-          [attr.tabindex]="tabIndexFor($index)"
+          [attr.role]="multiple() ? null : 'radio'"
+          [class.on]="isOn(opt.value)"
+          [attr.aria-checked]="multiple() ? null : isOn(opt.value)"
+          [attr.aria-pressed]="multiple() ? isOn(opt.value) : null"
+          [attr.tabindex]="multiple() ? null : tabIndexFor($index)"
           [disabled]="disabled()"
           (click)="select(opt.value)"
         >
@@ -24035,8 +24766,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         </button>
       }
     </div>
-  `, styles: [":host{display:inline-flex}.seg{display:flex;flex-wrap:wrap;gap:3px;padding:3px;background:var(--w07);border:1px solid var(--w08);border-radius:99px}.seg__btn{display:inline-flex;align-items:center;gap:6px;min-block-size:28px;padding:0 13px;border:0;background:transparent;color:var(--w55);font:500 12.5px/1.3 var(--font-family);font-family:inherit;border-radius:99px;cursor:pointer;white-space:nowrap;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.seg__btn:hover{color:var(--w85)}.seg__btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.seg__btn:disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed}.seg__btn.on{background:var(--w14);color:var(--w95);font-weight:600;box-shadow:var(--shadow-card),var(--glass2-inset)}.seg__count{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;padding:1px 5px;background:var(--w1);border-radius:4px;color:var(--w42)}.seg__btn.on .seg__count{color:var(--w55)}@media(pointer:coarse){.seg__btn{min-block-size:44px}}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }] } });
+  `, styles: [":host{display:inline-flex}.seg{display:flex;flex-wrap:wrap;gap:3px;padding:3px;background:var(--w07);border:1px solid var(--w08);border-radius:99px}.seg[data-variant=pills]{gap:6px;padding:0;background:transparent;border:0;border-radius:0}.seg__btn{display:inline-flex;align-items:center;gap:6px;min-block-size:28px;padding:0 13px;border:0;background:transparent;color:var(--w55);font:500 12.5px/1.3 var(--font-family);font-family:inherit;border-radius:99px;cursor:pointer;white-space:nowrap;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.seg__btn:hover{color:var(--w85)}.seg__btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.seg__btn:disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed}.seg__btn.on{background:var(--w14);color:var(--w95);font-weight:600;box-shadow:var(--shadow-card),var(--glass2-inset)}.seg__count{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10.5px;padding:1px 5px;background:var(--w1);border-radius:4px;color:var(--w42)}.seg__btn.on .seg__count{color:var(--w55)}.seg[data-variant=pills] .seg__btn{min-block-size:30px;padding:0 12px;border:.5px solid var(--w12);background:var(--w04);color:var(--w7);border-radius:99px;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro),border-color var(--nova-duration-hover) var(--nova-ease-micro)}.seg[data-variant=pills] .seg__btn:hover:not(.on){background:var(--w08);border-color:var(--w2);color:var(--ink)}.seg[data-variant=pills] .seg__btn.on{border-color:transparent;background:var(--accent);color:var(--on-accent);font-weight:500;box-shadow:none}.seg[data-variant=pills] .seg__count{padding:2px 6px;border-radius:7px;font-family:var(--font-family);font-size:10.5px;font-weight:var(--fw-semibold);color:inherit}.seg[data-variant=pills] .seg__btn.on .seg__count{background:var(--w22);color:inherit}@media(pointer:coarse){.seg__btn,.seg[data-variant=pills] .seg__btn{min-block-size:44px}}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }] } });
 
 /**
  * Switch toggle (`role="switch"`). No legacy visual source existed — minimal
@@ -25793,5 +26524,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, ENTITY_LINK_LAUNCHER, 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_CURRENCIES_BRIEF_ENDPOINT, 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_MAGIC_BAR_EVENT, FLY_MAGIC_BAR_ICONS, FLY_MAGIC_BAR_STORE_KEY, FLY_NF_CACHE_HEAL_FLAG, FLY_RELOAD_DEBOUNCE_MS, FLY_RELOAD_REARM_MS, FLY_REMOTE_BASE_PATH, FLY_REMOTE_CONTEXT_EVENT, FLY_REMOTE_CONTEXT_STORE_KEY, FLY_REMOTE_ROUTES, FLY_SCAN_PENDING_DEFAULT_DELAY_MS, FLY_SCAN_PENDING_MAX_RETRIES, FLY_SCAN_PENDING_STATUS, FLY_SEARCH_DEBOUNCE_MS, FLY_SKIN_TONES, FLY_STANDALONE_AUTH_CONFIG, FLY_THEME_MODE_IDS, FLY_VIEWPORT_IS_MOBILE, FLY_WINDOW_HELP_HINT_EVENT, FLY_WINDOW_PAGE_TITLE_EVENT, FlyAchievementProgressComponent, FlyActionMenuComponent, FlyActionStackComponent, FlyAgentDraggableDirective, FlyAnimatedEmojiComponent, FlyAppHomeComponent, FlyAppTopbarComponent, FlyAppUnavailableComponent, 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, FlyCurrencyCatalogService, FlyCurrencySelectorComponent, FlyDataTableComponent, FlyDatePipe, FlyDateTimePipe, FlyDebouncer, FlyDecimalNumberPipe, FlyDeepLinkPrefetchService, FlyDetailCardComponent, FlyDetailShellComponent, FlyDrawerComponent, FlyDurationPipe, FlyDynamicFormComponent, FlyEmojiPickerComponent, FlyFieldComponent, FlyFileDownloadService, FlyFileUploadComponent, FlyFilterPanelComponent, FlyFormBannerComponent, FlyFormFooterComponent, FlyFormGridComponent, FlyFormSectionComponent, FlyFullNumberPipe, FlyGanttComponent, FlyHubClient, FlyIconButtonComponent, FlyIfAdminDirective, FlyIfRoleDirective, FlyImageUploadComponent, FlyLeaderboardComponent, FlyMagicActionsComponent, FlyMetaListComponent, FlyModalComponent, FlyModerationQueueComponent, FlyModuleIconDirective, FlyMoneyPipe, FlyPaginationComponent, FlyPeoplePickerComponent, FlyPointsTierComponent, FlyProgressComponent, FlyRelativeTimePipe, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySearchInputComponent, FlySectionHeaderComponent, FlySecureSrcDirective, FlySegmentedComponent, FlySelectComponent, FlySkeletonComponent, FlySliderComponent, FlySparklineComponent, FlySpinnerComponent, FlyStandaloneAuthCallbackComponent, FlyStandaloneAuthService, FlyStandaloneMagicActionsComponent, FlyStateMessageComponent, FlyDynamicFormComponent as FlySurveyFormComponent, FlyTabComponent, FlyTabsComponent, FlyTagsInputComponent, FlyThemeService, FlyTimePipe, FlyToastService, FlyToggleComponent, FlyTooltipDirective, FlyTreeNavComponent, FlyTypeaheadComponent, FlyUserDirectoryService, FlyWindowHelpService, FlyWindowTitleService, FlyosPendingLaunchesGlobalKey, FlyosShellHandlesLaunchRequestsGlobalKey, FlyosShellOwnsHistoryGlobalKey, GANTT_DEPENDENCY_TYPES, GANTT_ROW_TINT_ALPHA, GANTT_ZOOMS, I18nService, LAUNCH_CONTEXT, MAGIC_BAR_SEARCH_WIDTH_DEFAULT, MAGIC_BAR_SEARCH_WIDTH_MAX, MAGIC_BAR_SEARCH_WIDTH_MIN, MagicBarRegistry, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, NOVA_PRIORITY_TONE, NOVA_STATUS_TONE, NOVA_TONE_FALLBACK, 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, clampMagicBarSearchWidth, clampPage, clampSliderValue, connectRemoteLaunch, enterActivatesNatively, filterGroup, filterSuggestions, findLocaleByDialect, findLocaleByPrefix, firstEnabledIndex, firstModuleIndex, flattenModules, flyAdminGuard, flyApiErrorMessage, flyCaptchaBase64Utf8, flyCaptchaBuildToken, flyCaptchaSha256Hex, flyCompactNumber, flyDebounced, flyDecimalNumber, flyDownloadBlob, flyDuration, flyEmojiFor, flyEmojiIsTonable, flyEmojiPackUrl, flyExportFileName, flyFirstEnabledIndex, flyFormatBytes, flyFormatDate, flyFormatDateTime, flyFormatMoney, flyFormatTime, flyFullNumber, flyNextEnabledIndex, flyNextSegmentIndex, flyRelativeTime, flyResolveActiveTab, flyRoleGuard, flyScanPendingDelayMs, flyScanRetry, flySignedCompact, flySkinToneLabelKey, flyStandaloneAuthGuard, flyStandaloneAuthInterceptor, flyToDateOnly, flyToPage, flyUnwrap, flyUnwrapCurrencies, flyUnwrapLenient, hasAnyRoleIn, healNativeFederationCacheOnce, initialExpanded, isAccentColor, isChunkLoadError, isFlyAuthStorePopulated, isNativeFederationCacheError, isRtlLocale, isRtlLocaleEntry, isValidCron, isValidSingleField, loadRemoteStyles, magicBarOwnerKey, magicBarSearchText, matchFlyRoutePattern, nextEnabledIndex, nextModuleIndex, nextSegmentIndex, nextSort, normalizeFlyTheme, normalizeRoles, novaPriorityToneVar, novaStatusToneVar, overlayStack, parseCron, parseStepUpChallenge, parseTags, prefetchRemoteStyles, 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 };
+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, ENTITY_LINK_LAUNCHER, 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_CURRENCIES_BRIEF_ENDPOINT, FLY_CURRENCY_DEFAULT_ENDPOINT, 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_MAGIC_BAR_EVENT, FLY_MAGIC_BAR_ICONS, FLY_MAGIC_BAR_STORE_KEY, FLY_NF_CACHE_HEAL_FLAG, FLY_RELOAD_DEBOUNCE_MS, FLY_RELOAD_REARM_MS, FLY_REMOTE_BASE_PATH, FLY_REMOTE_CONTEXT_EVENT, FLY_REMOTE_CONTEXT_STORE_KEY, FLY_REMOTE_ROUTES, FLY_SCAN_PENDING_DEFAULT_DELAY_MS, FLY_SCAN_PENDING_MAX_RETRIES, FLY_SCAN_PENDING_STATUS, FLY_SEARCH_DEBOUNCE_MS, FLY_SKIN_TONES, FLY_STANDALONE_AUTH_CONFIG, FLY_THEME_MODE_IDS, FLY_VIEWPORT_IS_MOBILE, FLY_WINDOW_BREADCRUMBS_EVENT, FLY_WINDOW_BREADCRUMBS_STORE_KEY, FLY_WINDOW_HELP_HINT_EVENT, FLY_WINDOW_PAGE_TITLE_EVENT, FlyAchievementProgressComponent, FlyActionMenuComponent, FlyActionStackComponent, FlyAgentDraggableDirective, FlyAnimatedEmojiComponent, FlyAppHomeComponent, FlyAppTopbarComponent, FlyAppUnavailableComponent, 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, FlyCurrencyCatalogService, FlyCurrencySelectorComponent, FlyDataTableComponent, FlyDatePipe, FlyDateTimePipe, FlyDebouncer, FlyDecimalNumberPipe, FlyDeepLinkPrefetchService, FlyDetailCardComponent, FlyDetailShellComponent, FlyDrawerComponent, FlyDurationPipe, FlyDynamicFormComponent, FlyEmojiPickerComponent, FlyFieldComponent, FlyFileDownloadService, FlyFileUploadComponent, FlyFilterPanelComponent, FlyFormBannerComponent, FlyFormFooterComponent, FlyFormGridComponent, FlyFormSectionComponent, FlyFullNumberPipe, FlyGanttComponent, FlyHubClient, FlyIconButtonComponent, FlyIfAdminDirective, FlyIfRoleDirective, FlyImageUploadComponent, FlyLeaderboardComponent, FlyMagicActionsComponent, FlyMetaListComponent, FlyModalComponent, FlyModerationQueueComponent, FlyModuleIconDirective, FlyMoneyPipe, FlyPagerComponent, FlyPaginationComponent, FlyPeoplePickerComponent, FlyPointsTierComponent, FlyProgressComponent, FlyRelativeTimePipe, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySearchInputComponent, FlySectionHeaderComponent, FlySecureSrcDirective, FlySegmentedComponent, FlySelectComponent, FlySkeletonComponent, FlySliderComponent, FlySparklineComponent, FlySpinnerComponent, FlyStandaloneAuthCallbackComponent, FlyStandaloneAuthService, FlyStandaloneMagicActionsComponent, FlyStateMessageComponent, FlyDynamicFormComponent as FlySurveyFormComponent, FlyTabComponent, FlyTabsComponent, FlyTagsInputComponent, FlyThemeService, FlyTimePipe, FlyToastService, FlyToggleComponent, FlyTooltipDirective, FlyTreeNavComponent, FlyTypeaheadComponent, FlyUserDirectoryService, FlyWindowHelpService, FlyWindowTitleService, FlyosPendingLaunchesGlobalKey, FlyosShellHandlesLaunchRequestsGlobalKey, FlyosShellOwnsHistoryGlobalKey, GANTT_DEPENDENCY_TYPES, GANTT_ROW_TINT_ALPHA, GANTT_ZOOMS, I18nService, LAUNCH_CONTEXT, MAGIC_BAR_SEARCH_WIDTH_DEFAULT, MAGIC_BAR_SEARCH_WIDTH_MAX, MAGIC_BAR_SEARCH_WIDTH_MIN, MagicBarRegistry, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, NOVA_PRIORITY_TONE, NOVA_STATUS_TONE, NOVA_TONE_FALLBACK, 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, WindowBreadcrumbsRegistry, WindowManagerService, applySkinTone, applySuggestion, ariaSort, buildCron, canConfirm, canGoNext$1 as canGoNext, canGoPrev$1 as canGoPrev, captureFocus, clampMagicBarSearchWidth, clampPage$1 as clampPage, clampSliderValue, connectRemoteLaunch, enterActivatesNatively, filterGroup, filterSuggestions, findLocaleByDialect, findLocaleByPrefix, firstEnabledIndex, firstModuleIndex, flattenModules, flyAdminGuard, flyApiErrorMessage, flyCaptchaBase64Utf8, flyCaptchaBuildToken, flyCaptchaSha256Hex, flyCompactNumber, flyDebounced, flyDecimalNumber, flyDownloadBlob, flyDuration, flyEmojiFor, flyEmojiIsTonable, flyEmojiPackUrl, flyExportFileName, flyFirstEnabledIndex, flyFormatBytes, flyFormatDate, flyFormatDateTime, flyFormatMoney, flyFormatTime, flyFullNumber, flyNextEnabledIndex, flyNextSegmentIndex, flyRelativeTime, flyResolveActiveTab, flyRoleGuard, flyScanPendingDelayMs, flyScanRetry, flySignedCompact, flySkinToneLabelKey, flyStandaloneAuthGuard, flyStandaloneAuthInterceptor, flyToDateOnly, flyToPage, flyUnwrap, flyUnwrapCurrencies, flyUnwrapCurrency, flyUnwrapLenient, hasAnyRoleIn, healNativeFederationCacheOnce, initialExpanded, isAccentColor, isChunkLoadError, isFlyAuthStorePopulated, isNativeFederationCacheError, isRtlLocale, isRtlLocaleEntry, isValidCron, isValidSingleField, loadRemoteStyles, magicBarOwnerKey, magicBarSearchText, matchFlyRoutePattern, nextEnabledIndex, nextModuleIndex, nextSegmentIndex, nextSort, normalizeFlyTheme, normalizeRoles, novaPriorityToneVar, novaStatusToneVar, overlayStack, canGoNext as pagerCanGoNext, canGoPrev as pagerCanGoPrev, clampPage as pagerClampPage, parseCron, parseStepUpChallenge, parseTags, prefetchRemoteStyles, 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