@flyos/design-system 1.8.0 → 2.0.0

package/fesm2022/flyos-design-system.mjs

@@ -48,7 +48,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 = '1.8.0';
+const FLY_DS_VERSION = '2.0.0';
 const FLY_DS_REGISTRY_KEY = '__FLY_DS_INSTANCES__';
 /**
  * Records this design-system instance on the shared `scope` and returns the
@@ -4957,10 +4957,10 @@ class FlyRemoteRouterOutletComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyRemoteRouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyRemoteRouterOutletComponent, isStandalone: true, selector: "fly-remote-router-outlet", ngImport: i0, template: `
-    @if (rendered(); as cmp) {
-      <ng-container *ngComponentOutlet="cmp" />
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyRemoteRouterOutletComponent, isStandalone: true, selector: "fly-remote-router-outlet", ngImport: i0, template: `
+    @if (rendered(); as cmp) {
+      <ng-container *ngComponentOutlet="cmp" />
+    }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyRemoteRouterOutletComponent, decorators: [{
@@ -4970,10 +4970,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     standalone: true,
                     imports: [NgComponentOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @if (rendered(); as cmp) {
-      <ng-container *ngComponentOutlet="cmp" />
-    }
+                    template: `
+    @if (rendered(); as cmp) {
+      <ng-container *ngComponentOutlet="cmp" />
+    }
   `,
                 }]
         }], ctorParameters: () => [] });
@@ -7979,11 +7979,11 @@ class ContextMenuComponent {
         this.previouslyFocused = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ContextMenuComponent, isStandalone: true, selector: "fly-context-menu", inputs: { x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: false, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", closed: "closed" }, host: { listeners: { "document:mousedown": "onClickOutside($event)", "document:keydown.escape": "onEscape()", "document:contextmenu": "onContextMenu($event)", "document:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "childMenuRef", first: true, predicate: ["childMenu"], descendants: true }], ngImport: i0, template: "<div\r\n  #contextMenu\r\n  class=\"context-menu\"\r\n  [style.left.px]=\"clampedPos().left\"\r\n  [style.top.px]=\"clampedPos().top\"\r\n  role=\"menu\"\r\n  [attr.aria-label]=\"'shell.context_menu' | translate\">\r\n\r\n  @for (section of sections(); track $index) {\r\n    @if ($index > 0) {\r\n      <div class=\"menu-divider\"></div>\r\n    }\r\n    @if (section.label) {\r\n      <div class=\"menu-section-label\">{{ section.label }}</div>\r\n    }\r\n    @for (item of section.items; track item.id) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fos-btn sm rect menu-item\"\r\n        [class.menu-item--has-children]=\"!!item.children?.length\"\r\n        [class.menu-item--selected]=\"item.selected === true\"\r\n        [attr.role]=\"item.selected === undefined ? 'menuitem' : 'menuitemradio'\"\r\n        [attr.aria-checked]=\"item.selected === undefined ? null : item.selected\"\r\n        [attr.aria-haspopup]=\"item.children?.length ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"item.children?.length ? (openSubmenuId() === item.id) : null\"\r\n        (click)=\"onItemActivate(item, $event)\"\r\n        (mouseenter)=\"onItemMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onItemMouseLeave()\">\r\n        <i [class]=\"'pi ' + item.icon\" aria-hidden=\"true\"></i>\r\n        <span>{{ item.label }}</span>\r\n        @if (item.children?.length) {\r\n          <i\r\n            class=\"pi pi-angle-right menu-item__submenu-caret\"\r\n            [class.is-rtl]=\"anchorRtl()\"\r\n            aria-hidden=\"true\"></i>\r\n        } @else if (item.selected !== undefined) {\r\n          <i\r\n            class=\"pi pi-check menu-item__check\"\r\n            [class.menu-item__check--visible]=\"item.selected\"\r\n            aria-hidden=\"true\"></i>\r\n        }\r\n      </button>\r\n    }\r\n  }\r\n\r\n  @if (openSubmenuSections().length > 0) {\r\n    <fly-context-menu\r\n      #childMenu\r\n      [anchor]=\"openSubmenuAnchorEl()\"\r\n      placement=\"side\"\r\n      [sections]=\"openSubmenuSections()\"\r\n      (action)=\"onSubmenuAction($event)\"\r\n      (closed)=\"onSubmenuClosed()\" />\r\n  }\r\n</div>\r\n", styles: [":host{display:contents}.context-menu{position:fixed;z-index:1000;inline-size:max-content;min-inline-size:14ch;max-inline-size:min(38ch,100vw - 32px);padding:6px;border-radius:14px;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-a),var(--mat-menu-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){.context-menu{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.context-menu:before,.context-menu:after{display:none}}@media(prefers-contrast:more){.context-menu{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.context-menu:after{animation:none}}.context-menu{animation:menuIn .24s var(--nova-ease-structural) both;transform-origin:top left}.menu-section-label{padding:6px 12px 4px;font:var(--nova-font-eyebrow);letter-spacing:var(--nova-tracking-eyebrow);text-transform:uppercase;color:var(--w42);pointer-events:none}.menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:7px 9px;border-radius:8px;color:var(--w95);font:var(--nova-font-menu-item);letter-spacing:var(--nova-tracking-menu-item);justify-content:flex-start;text-align:start}.menu-item span{min-inline-size:0;overflow-wrap:break-word}.menu-item i{flex:0 0 18px;font-size:14px;width:18px;text-align:center;opacity:.7}.menu-item__submenu-caret{flex:0 0 14px;width:14px;font-size:11px;margin-inline-start:auto;opacity:.55}.menu-item__submenu-caret.is-rtl{transform:scaleX(-1)}.menu-item__check{flex:0 0 14px;width:14px;font-size:13px;margin-inline-start:auto;color:var(--accent);opacity:0}.menu-item__check--visible{opacity:1}.menu-item--selected{background:var(--w08);font-weight:600}.menu-item:hover,.menu-item:focus-visible{background:var(--w1)}.menu-item:hover i,.menu-item:focus-visible i{opacity:1}.menu-item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.menu-divider{height:1px;margin:4px 8px;background:var(--glass2-border)}\n"], dependencies: [{ kind: "component", type: ContextMenuComponent, selector: "fly-context-menu", inputs: ["x", "y", "anchor", "align", "placement", "sections", "boundary"], outputs: ["action", "closed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ContextMenuComponent, isStandalone: true, selector: "fly-context-menu", inputs: { x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: false, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", closed: "closed" }, host: { listeners: { "document:mousedown": "onClickOutside($event)", "document:keydown.escape": "onEscape()", "document:contextmenu": "onContextMenu($event)", "document:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "childMenuRef", first: true, predicate: ["childMenu"], descendants: true }], ngImport: i0, template: "<div\r\n  #contextMenu\r\n  class=\"context-menu\"\r\n  [style.left.px]=\"clampedPos().left\"\r\n  [style.top.px]=\"clampedPos().top\"\r\n  role=\"menu\"\r\n  [attr.aria-label]=\"'shell.context_menu' | translate\">\r\n\r\n  @for (section of sections(); track $index) {\r\n    @if ($index > 0) {\r\n      <div class=\"menu-divider\"></div>\r\n    }\r\n    @if (section.label) {\r\n      <div class=\"menu-section-label\">{{ section.label }}</div>\r\n    }\r\n    @for (item of section.items; track item.id) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fos-btn sm rect menu-item\"\r\n        [class.menu-item--has-children]=\"!!item.children?.length\"\r\n        [class.menu-item--selected]=\"item.selected === true\"\r\n        [attr.role]=\"item.selected === undefined ? 'menuitem' : 'menuitemradio'\"\r\n        [attr.aria-checked]=\"item.selected === undefined ? null : item.selected\"\r\n        [attr.aria-haspopup]=\"item.children?.length ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"item.children?.length ? (openSubmenuId() === item.id) : null\"\r\n        (click)=\"onItemActivate(item, $event)\"\r\n        (mouseenter)=\"onItemMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onItemMouseLeave()\">\r\n        <i [class]=\"'pi ' + item.icon\" aria-hidden=\"true\"></i>\r\n        <span>{{ item.label }}</span>\r\n        @if (item.children?.length) {\r\n          <i\r\n            class=\"pi pi-angle-right menu-item__submenu-caret\"\r\n            [class.is-rtl]=\"anchorRtl()\"\r\n            aria-hidden=\"true\"></i>\r\n        } @else if (item.selected !== undefined) {\r\n          <i\r\n            class=\"pi pi-check menu-item__check\"\r\n            [class.menu-item__check--visible]=\"item.selected\"\r\n            aria-hidden=\"true\"></i>\r\n        }\r\n      </button>\r\n    }\r\n  }\r\n\r\n  @if (openSubmenuSections().length > 0) {\r\n    <fly-context-menu\r\n      #childMenu\r\n      [anchor]=\"openSubmenuAnchorEl()\"\r\n      placement=\"side\"\r\n      [sections]=\"openSubmenuSections()\"\r\n      (action)=\"onSubmenuAction($event)\"\r\n      (closed)=\"onSubmenuClosed()\" />\r\n  }\r\n</div>\r\n", styles: [":host{display:contents}.context-menu{position:fixed;z-index:1000;inline-size:max-content;min-inline-size:14ch;max-inline-size:min(38ch,100vw - 32px);padding:6px;border-radius:14px;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-a),var(--mat-menu-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){.context-menu{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.context-menu:before,.context-menu:after{display:none}}@media(prefers-contrast:more){.context-menu{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.context-menu:after{animation:none}}.context-menu{animation:menuIn .24s var(--nova-ease-structural) both;transform-origin:top left}.menu-section-label{padding:6px 12px 4px;font:var(--nova-font-eyebrow);letter-spacing:var(--nova-tracking-eyebrow);text-transform:uppercase;color:var(--w5);pointer-events:none}.menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:7px 9px;border-radius:8px;color:var(--w95);font:var(--nova-font-menu-item);letter-spacing:var(--nova-tracking-menu-item);justify-content:flex-start;text-align:start}.menu-item span{min-inline-size:0;overflow-wrap:break-word}.menu-item i{flex:0 0 18px;font-size:14px;width:18px;text-align:center;opacity:.7}.menu-item__submenu-caret{flex:0 0 14px;width:14px;font-size:11px;margin-inline-start:auto;opacity:.55}.menu-item__submenu-caret.is-rtl{transform:scaleX(-1)}.menu-item__check{flex:0 0 14px;width:14px;font-size:13px;margin-inline-start:auto;color:var(--accent);opacity:0}.menu-item__check--visible{opacity:1}.menu-item--selected{background:var(--w08);font-weight:600}.menu-item:hover,.menu-item:focus-visible{background:var(--w1)}.menu-item:hover i,.menu-item:focus-visible i{opacity:1}.menu-item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.menu-divider{height:1px;margin:4px 8px;background:var(--glass2-border)}@media(pointer:coarse){.menu-item{min-block-size:44px}}\n"], dependencies: [{ kind: "component", type: ContextMenuComponent, selector: "fly-context-menu", inputs: ["x", "y", "anchor", "align", "placement", "sections", "boundary"], outputs: ["action", "closed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-context-menu', standalone: true, imports: [TranslatePipe, ContextMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #contextMenu\r\n  class=\"context-menu\"\r\n  [style.left.px]=\"clampedPos().left\"\r\n  [style.top.px]=\"clampedPos().top\"\r\n  role=\"menu\"\r\n  [attr.aria-label]=\"'shell.context_menu' | translate\">\r\n\r\n  @for (section of sections(); track $index) {\r\n    @if ($index > 0) {\r\n      <div class=\"menu-divider\"></div>\r\n    }\r\n    @if (section.label) {\r\n      <div class=\"menu-section-label\">{{ section.label }}</div>\r\n    }\r\n    @for (item of section.items; track item.id) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fos-btn sm rect menu-item\"\r\n        [class.menu-item--has-children]=\"!!item.children?.length\"\r\n        [class.menu-item--selected]=\"item.selected === true\"\r\n        [attr.role]=\"item.selected === undefined ? 'menuitem' : 'menuitemradio'\"\r\n        [attr.aria-checked]=\"item.selected === undefined ? null : item.selected\"\r\n        [attr.aria-haspopup]=\"item.children?.length ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"item.children?.length ? (openSubmenuId() === item.id) : null\"\r\n        (click)=\"onItemActivate(item, $event)\"\r\n        (mouseenter)=\"onItemMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onItemMouseLeave()\">\r\n        <i [class]=\"'pi ' + item.icon\" aria-hidden=\"true\"></i>\r\n        <span>{{ item.label }}</span>\r\n        @if (item.children?.length) {\r\n          <i\r\n            class=\"pi pi-angle-right menu-item__submenu-caret\"\r\n            [class.is-rtl]=\"anchorRtl()\"\r\n            aria-hidden=\"true\"></i>\r\n        } @else if (item.selected !== undefined) {\r\n          <i\r\n            class=\"pi pi-check menu-item__check\"\r\n            [class.menu-item__check--visible]=\"item.selected\"\r\n            aria-hidden=\"true\"></i>\r\n        }\r\n      </button>\r\n    }\r\n  }\r\n\r\n  @if (openSubmenuSections().length > 0) {\r\n    <fly-context-menu\r\n      #childMenu\r\n      [anchor]=\"openSubmenuAnchorEl()\"\r\n      placement=\"side\"\r\n      [sections]=\"openSubmenuSections()\"\r\n      (action)=\"onSubmenuAction($event)\"\r\n      (closed)=\"onSubmenuClosed()\" />\r\n  }\r\n</div>\r\n", styles: [":host{display:contents}.context-menu{position:fixed;z-index:1000;inline-size:max-content;min-inline-size:14ch;max-inline-size:min(38ch,100vw - 32px);padding:6px;border-radius:14px;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-a),var(--mat-menu-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){.context-menu{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.context-menu:before,.context-menu:after{display:none}}@media(prefers-contrast:more){.context-menu{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.context-menu:after{animation:none}}.context-menu{animation:menuIn .24s var(--nova-ease-structural) both;transform-origin:top left}.menu-section-label{padding:6px 12px 4px;font:var(--nova-font-eyebrow);letter-spacing:var(--nova-tracking-eyebrow);text-transform:uppercase;color:var(--w42);pointer-events:none}.menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:7px 9px;border-radius:8px;color:var(--w95);font:var(--nova-font-menu-item);letter-spacing:var(--nova-tracking-menu-item);justify-content:flex-start;text-align:start}.menu-item span{min-inline-size:0;overflow-wrap:break-word}.menu-item i{flex:0 0 18px;font-size:14px;width:18px;text-align:center;opacity:.7}.menu-item__submenu-caret{flex:0 0 14px;width:14px;font-size:11px;margin-inline-start:auto;opacity:.55}.menu-item__submenu-caret.is-rtl{transform:scaleX(-1)}.menu-item__check{flex:0 0 14px;width:14px;font-size:13px;margin-inline-start:auto;color:var(--accent);opacity:0}.menu-item__check--visible{opacity:1}.menu-item--selected{background:var(--w08);font-weight:600}.menu-item:hover,.menu-item:focus-visible{background:var(--w1)}.menu-item:hover i,.menu-item:focus-visible i{opacity:1}.menu-item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.menu-divider{height:1px;margin:4px 8px;background:var(--glass2-border)}\n"] }]
+            args: [{ selector: 'fly-context-menu', standalone: true, imports: [TranslatePipe, ContextMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #contextMenu\r\n  class=\"context-menu\"\r\n  [style.left.px]=\"clampedPos().left\"\r\n  [style.top.px]=\"clampedPos().top\"\r\n  role=\"menu\"\r\n  [attr.aria-label]=\"'shell.context_menu' | translate\">\r\n\r\n  @for (section of sections(); track $index) {\r\n    @if ($index > 0) {\r\n      <div class=\"menu-divider\"></div>\r\n    }\r\n    @if (section.label) {\r\n      <div class=\"menu-section-label\">{{ section.label }}</div>\r\n    }\r\n    @for (item of section.items; track item.id) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fos-btn sm rect menu-item\"\r\n        [class.menu-item--has-children]=\"!!item.children?.length\"\r\n        [class.menu-item--selected]=\"item.selected === true\"\r\n        [attr.role]=\"item.selected === undefined ? 'menuitem' : 'menuitemradio'\"\r\n        [attr.aria-checked]=\"item.selected === undefined ? null : item.selected\"\r\n        [attr.aria-haspopup]=\"item.children?.length ? 'menu' : null\"\r\n        [attr.aria-expanded]=\"item.children?.length ? (openSubmenuId() === item.id) : null\"\r\n        (click)=\"onItemActivate(item, $event)\"\r\n        (mouseenter)=\"onItemMouseEnter(item, $event)\"\r\n        (mouseleave)=\"onItemMouseLeave()\">\r\n        <i [class]=\"'pi ' + item.icon\" aria-hidden=\"true\"></i>\r\n        <span>{{ item.label }}</span>\r\n        @if (item.children?.length) {\r\n          <i\r\n            class=\"pi pi-angle-right menu-item__submenu-caret\"\r\n            [class.is-rtl]=\"anchorRtl()\"\r\n            aria-hidden=\"true\"></i>\r\n        } @else if (item.selected !== undefined) {\r\n          <i\r\n            class=\"pi pi-check menu-item__check\"\r\n            [class.menu-item__check--visible]=\"item.selected\"\r\n            aria-hidden=\"true\"></i>\r\n        }\r\n      </button>\r\n    }\r\n  }\r\n\r\n  @if (openSubmenuSections().length > 0) {\r\n    <fly-context-menu\r\n      #childMenu\r\n      [anchor]=\"openSubmenuAnchorEl()\"\r\n      placement=\"side\"\r\n      [sections]=\"openSubmenuSections()\"\r\n      (action)=\"onSubmenuAction($event)\"\r\n      (closed)=\"onSubmenuClosed()\" />\r\n  }\r\n</div>\r\n", styles: [":host{display:contents}.context-menu{position:fixed;z-index:1000;inline-size:max-content;min-inline-size:14ch;max-inline-size:min(38ch,100vw - 32px);padding:6px;border-radius:14px;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-a),var(--mat-menu-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){.context-menu{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.context-menu:before,.context-menu:after{display:none}}@media(prefers-contrast:more){.context-menu{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.context-menu:after{animation:none}}.context-menu{animation:menuIn .24s var(--nova-ease-structural) both;transform-origin:top left}.menu-section-label{padding:6px 12px 4px;font:var(--nova-font-eyebrow);letter-spacing:var(--nova-tracking-eyebrow);text-transform:uppercase;color:var(--w5);pointer-events:none}.menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:7px 9px;border-radius:8px;color:var(--w95);font:var(--nova-font-menu-item);letter-spacing:var(--nova-tracking-menu-item);justify-content:flex-start;text-align:start}.menu-item span{min-inline-size:0;overflow-wrap:break-word}.menu-item i{flex:0 0 18px;font-size:14px;width:18px;text-align:center;opacity:.7}.menu-item__submenu-caret{flex:0 0 14px;width:14px;font-size:11px;margin-inline-start:auto;opacity:.55}.menu-item__submenu-caret.is-rtl{transform:scaleX(-1)}.menu-item__check{flex:0 0 14px;width:14px;font-size:13px;margin-inline-start:auto;color:var(--accent);opacity:0}.menu-item__check--visible{opacity:1}.menu-item--selected{background:var(--w08);font-weight:600}.menu-item:hover,.menu-item:focus-visible{background:var(--w1)}.menu-item:hover i,.menu-item:focus-visible i{opacity:1}.menu-item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.menu-divider{height:1px;margin:4px 8px;background:var(--glass2-border)}@media(pointer:coarse){.menu-item{min-block-size:44px}}\n"] }]
         }], propDecorators: { menuEl: [{
                 type: ViewChild,
                 args: ['contextMenu']
@@ -8160,15 +8160,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Whether the host application is currently wearing MOBILE chrome.
+ *
+ * ## Why the DS asks instead of measuring
+ * A second `matchMedia` inside the design system would be a second breakpoint
+ * mechanism, and two predicates that answer "is this a phone" drift the first time
+ * anyone retunes one of them. The shell already owns exactly one such predicate
+ * (`ShellViewportService`, S5.1) and mirrors it three ways — a class on `<html>`, a
+ * signal for templates, and the shell's own inset arithmetic. This token is the
+ * fourth route to that SAME answer, not a new one: the shell binds it to
+ * `ShellViewportService.isMobile` and nothing here evaluates a query.
+ *
+ * ## Default: `false`, deliberately
+ * Unprovided, every DS overlay behaves exactly as it did before this token existed
+ * — desktop geometry, no mobile branch. That matters for two populations:
+ *
+ *  - **Standalone External Apps** (Circles/Thoughts/PPM) render on their own page
+ *    with no FlyOS shell. They opt in by providing this from their own breakpoint
+ *    source; until they do, nothing about them changes.
+ *  - **Tests and Storybook-style harnesses** that construct a DS component bare.
+ *
+ * A default of "measure the window" would have been the opposite trade: silently
+ * correct in the shell, silently surprising everywhere else, and impossible to
+ * override downward.
+ *
+ * ## Consumers
+ * `fly-drawer` (`variant="auto"` → `sheet` on mobile) and `fly-message-box` /
+ * `fly-confirm-dialog` (the full-bleed confirm card). Each reads the signal and
+ * either resolves an input or stamps a host class — none of them re-derive a
+ * width, so retuning the threshold is still a one-line change in the shell.
+ *
+ * @example Shell wiring (`app.config.ts`)
+ * ```ts
+ * {
+ *   provide: FLY_VIEWPORT_IS_MOBILE,
+ *   useFactory: () => inject(ShellViewportService).isMobile,
+ * }
+ * ```
+ */
+const FLY_VIEWPORT_IS_MOBILE = new InjectionToken('FLY_VIEWPORT_IS_MOBILE', { providedIn: 'root', factory: () => signal(false).asReadonly() });
+
 /**
  * Host component for the app-wide alert/confirm dialog surface. It renders whatever the
  * current `MessageBoxService` request describes (icon, message, button set) and resolves that
  * request with the user's choice — the design-system replacement for native `alert()`/`confirm()`
  * dialogs, which the platform disallows (see `feedback_no_native_browser_dialogs`).
+ *
+ * ## The mobile confirm card (S5.4)
+ * On mobile chrome the dialog stops being a fixed 400px plate floating in the middle of
+ * a desktop and becomes the design's **confirm card**: full width less a 16px margin on
+ * each side, one step rounder, and with its actions on a full-width row at the 44px
+ * touch floor. That is a host class, not a media query, so the threshold stays where
+ * S5.1 put it — see {@link FLY_VIEWPORT_IS_MOBILE}.
+ *
+ * This is the confirm surface users actually meet: `MessageBoxService` has ~59 call
+ * sites across the shell and the core apps, while the DS's other confirm surface
+ * (`fly-confirm-dialog`, the standalone business-app kit's port) has none outside the
+ * design lab. Both got the treatment; only this one changes what anyone sees today.
  */
 class MessageBoxComponent {
     injectedService = inject(MessageBoxService);
     elRef = inject(ElementRef);
+    /** Mobile chrome → the full-bleed confirm card. Read by the host class binding. */
+    isMobile = inject(FLY_VIEWPORT_IS_MOBILE);
     /**
      * Optional service override. When bound, the component renders THIS instance's
      * state instead of the root singleton — the mechanism that lets each desktop
@@ -8249,11 +8304,11 @@ class MessageBoxComponent {
         this.previouslyFocused = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: MessageBoxComponent, isStandalone: true, selector: "fly-message-box", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (activeService.visible()) {\r\n  <div class=\"mb-backdrop\">\r\n    <div\r\n      class=\"mb-scrim\"\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      [attr.aria-label]=\"'common.action.cancel' | translate\"\r\n      (click)=\"onBackdropClick()\"\r\n      (keydown.enter)=\"onBackdropClick()\"\r\n      (keydown.space)=\"onBackdropSpace($event)\"></div>\r\n    <div\r\n      class=\"mb-dialog\"\r\n      [class.mb-info]=\"activeService.icon() === MessageBoxIcon.Information\"\r\n      [class.mb-warning]=\"activeService.icon() === MessageBoxIcon.Warning\"\r\n      [class.mb-danger]=\"activeService.icon() === MessageBoxIcon.Error\"\r\n      [class.mb-question]=\"activeService.icon() === MessageBoxIcon.Question\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby=\"mb-title\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\">\r\n\r\n      @if (iconClass()) {\r\n        <div class=\"mb-icon-wrap\">\r\n          <i [class]=\"iconClass() + ' mb-icon'\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"mb-title\" id=\"mb-title\">{{ activeService.title() }}</div>\r\n      <div class=\"mb-message\" id=\"mb-message\">{{ activeService.message() }}</div>\r\n\r\n      @if (dontAskAgainConfig(); as daa) {\r\n        <label class=\"mb-dont-ask-again\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"dontAskAgainChecked()\"\r\n            (change)=\"onDontAskAgainToggle($event)\" />\r\n          <span id=\"mb-dont-ask\">{{ daa.labelKey | translate }}</span>\r\n        </label>\r\n      }\r\n\r\n      <div class=\"mb-actions\">\r\n        @for (btn of activeService.buttons(); track btn.result) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fos-btn sm mb-btn\"\r\n            [class.mb-btn--primary]=\"btn.variant === 'primary'\"\r\n            [class.mb-btn--danger]=\"btn.variant === 'danger'\"\r\n            (click)=\"onButtonClick(btn.result)\">\r\n            {{ btn.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".mb-backdrop{position:absolute;inset:0;z-index:5100;display:flex;align-items:center;justify-content:center}.mb-scrim{position:absolute;inset:0;background:#00000073;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mbFadeIn .15s ease both;border:none;padding:0;margin:0;cursor:pointer}@keyframes mbFadeIn{0%{opacity:0}to{opacity:1}}.mb-dialog{position:relative;z-index:1;background:var(--surface-card, rgba(30, 30, 30, .98));border:1px solid var(--surface-border);border-radius:16px;padding:28px 28px 20px;width:400px;max-width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 20px 60px #0006;animation:mbScaleIn .2s cubic-bezier(.22,1,.36,1) both}@keyframes mbScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mb-icon-wrap{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.mb-icon{font-size:24px}.mb-info .mb-icon-wrap{background:#3b82f61f}.mb-info .mb-icon{color:#3b82f6}.mb-warning .mb-icon-wrap{background:#f59e0b1f}.mb-warning .mb-icon{color:#f59e0b}.mb-danger .mb-icon-wrap{background:#ef44441f}.mb-danger .mb-icon{color:#ef4444}.mb-question .mb-icon-wrap{background:#8b5cf61f}.mb-question .mb-icon{color:#8b5cf6}.mb-title{font-size:15px;font-weight:700;color:var(--text-color)}.mb-message{font-size:13px;color:var(--text-color-secondary);line-height:1.55;max-width:340px;white-space:pre-line}.mb-dont-ask-again{display:flex;align-items:center;gap:8px;margin-block-start:12px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;align-self:flex-start;-webkit-user-select:none;user-select:none}.mb-dont-ask-again input[type=checkbox]{margin:0;cursor:pointer}.mb-dont-ask-again span{line-height:1.3}.mb-actions{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center;flex-wrap:wrap}.mb-btn{min-width:90px}.mb-btn--primary{background:var(--primary-color);color:#fff}.mb-btn--primary:hover{filter:brightness(1.1)}.mb-btn--danger{background:#ef4444;color:#fff}.mb-btn--danger:hover{background:#dc2626}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: MessageBoxComponent, isStandalone: true, selector: "fly-message-box", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.fly-message-box--mobile": "isMobile()" } }, ngImport: i0, template: "@if (activeService.visible()) {\r\n  <div class=\"mb-backdrop\">\r\n    <div\r\n      class=\"mb-scrim\"\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      [attr.aria-label]=\"'common.action.cancel' | translate\"\r\n      (click)=\"onBackdropClick()\"\r\n      (keydown.enter)=\"onBackdropClick()\"\r\n      (keydown.space)=\"onBackdropSpace($event)\"></div>\r\n    <div\r\n      class=\"mb-dialog\"\r\n      [class.mb-info]=\"activeService.icon() === MessageBoxIcon.Information\"\r\n      [class.mb-warning]=\"activeService.icon() === MessageBoxIcon.Warning\"\r\n      [class.mb-danger]=\"activeService.icon() === MessageBoxIcon.Error\"\r\n      [class.mb-question]=\"activeService.icon() === MessageBoxIcon.Question\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby=\"mb-title\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\">\r\n\r\n      @if (iconClass()) {\r\n        <div class=\"mb-icon-wrap\">\r\n          <i [class]=\"iconClass() + ' mb-icon'\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"mb-title\" id=\"mb-title\">{{ activeService.title() }}</div>\r\n      <div class=\"mb-message\" id=\"mb-message\">{{ activeService.message() }}</div>\r\n\r\n      @if (dontAskAgainConfig(); as daa) {\r\n        <label class=\"mb-dont-ask-again\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"dontAskAgainChecked()\"\r\n            (change)=\"onDontAskAgainToggle($event)\" />\r\n          <span id=\"mb-dont-ask\">{{ daa.labelKey | translate }}</span>\r\n        </label>\r\n      }\r\n\r\n      <div class=\"mb-actions\">\r\n        @for (btn of activeService.buttons(); track btn.result) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fos-btn sm mb-btn\"\r\n            [class.mb-btn--primary]=\"btn.variant === 'primary'\"\r\n            [class.mb-btn--danger]=\"btn.variant === 'danger'\"\r\n            (click)=\"onButtonClick(btn.result)\">\r\n            {{ btn.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".mb-backdrop{position:absolute;inset:0;z-index:5100;display:flex;align-items:center;justify-content:center}.mb-scrim{position:absolute;inset:0;background:#00000073;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mbFadeIn .15s ease both;border:none;padding:0;margin:0;cursor:pointer}@keyframes mbFadeIn{0%{opacity:0}to{opacity:1}}.mb-dialog{position:relative;z-index:1;background:var(--surface-card, rgba(30, 30, 30, .98));border:1px solid var(--surface-border);border-radius:16px;padding:28px 28px 20px;width:400px;max-width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 20px 60px #0006;animation:mbScaleIn .2s cubic-bezier(.22,1,.36,1) both}@keyframes mbScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mb-icon-wrap{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.mb-icon{font-size:24px}.mb-info .mb-icon-wrap{background:#3b82f61f}.mb-info .mb-icon{color:#3b82f6}.mb-warning .mb-icon-wrap{background:#f59e0b1f}.mb-warning .mb-icon{color:#f59e0b}.mb-danger .mb-icon-wrap{background:#ef44441f}.mb-danger .mb-icon{color:#ef4444}.mb-question .mb-icon-wrap{background:#8b5cf61f}.mb-question .mb-icon{color:#8b5cf6}.mb-title{font-size:15px;font-weight:700;color:var(--text-color)}.mb-message{font-size:13px;color:var(--text-color-secondary);line-height:1.55;max-width:340px;white-space:pre-line}.mb-dont-ask-again{display:flex;align-items:center;gap:8px;margin-block-start:12px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;align-self:flex-start;-webkit-user-select:none;user-select:none}.mb-dont-ask-again input[type=checkbox]{margin:0;cursor:pointer}.mb-dont-ask-again span{line-height:1.3}.mb-actions{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center;flex-wrap:wrap}.mb-btn{min-width:90px}.mb-btn--primary{background:var(--primary-color);color:#fff}.mb-btn--primary:hover{filter:brightness(1.1)}.mb-btn--danger{background:#ef4444;color:#fff}.mb-btn--danger:hover{background:#dc2626}:host(.fly-message-box--mobile) .mb-backdrop{padding:16px}:host(.fly-message-box--mobile) .mb-dialog{inline-size:100%;max-inline-size:none;border-radius:18px;padding:24px 20px 16px}:host(.fly-message-box--mobile) .mb-actions{gap:8px;flex-wrap:nowrap}:host(.fly-message-box--mobile) .mb-btn{block-size:44px;flex:1 1 0;min-inline-size:0}\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: MessageBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-message-box', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (activeService.visible()) {\r\n  <div class=\"mb-backdrop\">\r\n    <div\r\n      class=\"mb-scrim\"\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      [attr.aria-label]=\"'common.action.cancel' | translate\"\r\n      (click)=\"onBackdropClick()\"\r\n      (keydown.enter)=\"onBackdropClick()\"\r\n      (keydown.space)=\"onBackdropSpace($event)\"></div>\r\n    <div\r\n      class=\"mb-dialog\"\r\n      [class.mb-info]=\"activeService.icon() === MessageBoxIcon.Information\"\r\n      [class.mb-warning]=\"activeService.icon() === MessageBoxIcon.Warning\"\r\n      [class.mb-danger]=\"activeService.icon() === MessageBoxIcon.Error\"\r\n      [class.mb-question]=\"activeService.icon() === MessageBoxIcon.Question\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby=\"mb-title\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\">\r\n\r\n      @if (iconClass()) {\r\n        <div class=\"mb-icon-wrap\">\r\n          <i [class]=\"iconClass() + ' mb-icon'\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"mb-title\" id=\"mb-title\">{{ activeService.title() }}</div>\r\n      <div class=\"mb-message\" id=\"mb-message\">{{ activeService.message() }}</div>\r\n\r\n      @if (dontAskAgainConfig(); as daa) {\r\n        <label class=\"mb-dont-ask-again\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"dontAskAgainChecked()\"\r\n            (change)=\"onDontAskAgainToggle($event)\" />\r\n          <span id=\"mb-dont-ask\">{{ daa.labelKey | translate }}</span>\r\n        </label>\r\n      }\r\n\r\n      <div class=\"mb-actions\">\r\n        @for (btn of activeService.buttons(); track btn.result) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fos-btn sm mb-btn\"\r\n            [class.mb-btn--primary]=\"btn.variant === 'primary'\"\r\n            [class.mb-btn--danger]=\"btn.variant === 'danger'\"\r\n            (click)=\"onButtonClick(btn.result)\">\r\n            {{ btn.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".mb-backdrop{position:absolute;inset:0;z-index:5100;display:flex;align-items:center;justify-content:center}.mb-scrim{position:absolute;inset:0;background:#00000073;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mbFadeIn .15s ease both;border:none;padding:0;margin:0;cursor:pointer}@keyframes mbFadeIn{0%{opacity:0}to{opacity:1}}.mb-dialog{position:relative;z-index:1;background:var(--surface-card, rgba(30, 30, 30, .98));border:1px solid var(--surface-border);border-radius:16px;padding:28px 28px 20px;width:400px;max-width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 20px 60px #0006;animation:mbScaleIn .2s cubic-bezier(.22,1,.36,1) both}@keyframes mbScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mb-icon-wrap{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.mb-icon{font-size:24px}.mb-info .mb-icon-wrap{background:#3b82f61f}.mb-info .mb-icon{color:#3b82f6}.mb-warning .mb-icon-wrap{background:#f59e0b1f}.mb-warning .mb-icon{color:#f59e0b}.mb-danger .mb-icon-wrap{background:#ef44441f}.mb-danger .mb-icon{color:#ef4444}.mb-question .mb-icon-wrap{background:#8b5cf61f}.mb-question .mb-icon{color:#8b5cf6}.mb-title{font-size:15px;font-weight:700;color:var(--text-color)}.mb-message{font-size:13px;color:var(--text-color-secondary);line-height:1.55;max-width:340px;white-space:pre-line}.mb-dont-ask-again{display:flex;align-items:center;gap:8px;margin-block-start:12px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;align-self:flex-start;-webkit-user-select:none;user-select:none}.mb-dont-ask-again input[type=checkbox]{margin:0;cursor:pointer}.mb-dont-ask-again span{line-height:1.3}.mb-actions{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center;flex-wrap:wrap}.mb-btn{min-width:90px}.mb-btn--primary{background:var(--primary-color);color:#fff}.mb-btn--primary:hover{filter:brightness(1.1)}.mb-btn--danger{background:#ef4444;color:#fff}.mb-btn--danger:hover{background:#dc2626}\n"] }]
+            args: [{ selector: 'fly-message-box', standalone: true, imports: [TranslatePipe], host: { '[class.fly-message-box--mobile]': 'isMobile()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (activeService.visible()) {\r\n  <div class=\"mb-backdrop\">\r\n    <div\r\n      class=\"mb-scrim\"\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      [attr.aria-label]=\"'common.action.cancel' | translate\"\r\n      (click)=\"onBackdropClick()\"\r\n      (keydown.enter)=\"onBackdropClick()\"\r\n      (keydown.space)=\"onBackdropSpace($event)\"></div>\r\n    <div\r\n      class=\"mb-dialog\"\r\n      [class.mb-info]=\"activeService.icon() === MessageBoxIcon.Information\"\r\n      [class.mb-warning]=\"activeService.icon() === MessageBoxIcon.Warning\"\r\n      [class.mb-danger]=\"activeService.icon() === MessageBoxIcon.Error\"\r\n      [class.mb-question]=\"activeService.icon() === MessageBoxIcon.Question\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby=\"mb-title\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\">\r\n\r\n      @if (iconClass()) {\r\n        <div class=\"mb-icon-wrap\">\r\n          <i [class]=\"iconClass() + ' mb-icon'\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"mb-title\" id=\"mb-title\">{{ activeService.title() }}</div>\r\n      <div class=\"mb-message\" id=\"mb-message\">{{ activeService.message() }}</div>\r\n\r\n      @if (dontAskAgainConfig(); as daa) {\r\n        <label class=\"mb-dont-ask-again\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"dontAskAgainChecked()\"\r\n            (change)=\"onDontAskAgainToggle($event)\" />\r\n          <span id=\"mb-dont-ask\">{{ daa.labelKey | translate }}</span>\r\n        </label>\r\n      }\r\n\r\n      <div class=\"mb-actions\">\r\n        @for (btn of activeService.buttons(); track btn.result) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fos-btn sm mb-btn\"\r\n            [class.mb-btn--primary]=\"btn.variant === 'primary'\"\r\n            [class.mb-btn--danger]=\"btn.variant === 'danger'\"\r\n            (click)=\"onButtonClick(btn.result)\">\r\n            {{ btn.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".mb-backdrop{position:absolute;inset:0;z-index:5100;display:flex;align-items:center;justify-content:center}.mb-scrim{position:absolute;inset:0;background:#00000073;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mbFadeIn .15s ease both;border:none;padding:0;margin:0;cursor:pointer}@keyframes mbFadeIn{0%{opacity:0}to{opacity:1}}.mb-dialog{position:relative;z-index:1;background:var(--surface-card, rgba(30, 30, 30, .98));border:1px solid var(--surface-border);border-radius:16px;padding:28px 28px 20px;width:400px;max-width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 20px 60px #0006;animation:mbScaleIn .2s cubic-bezier(.22,1,.36,1) both}@keyframes mbScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mb-icon-wrap{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.mb-icon{font-size:24px}.mb-info .mb-icon-wrap{background:#3b82f61f}.mb-info .mb-icon{color:#3b82f6}.mb-warning .mb-icon-wrap{background:#f59e0b1f}.mb-warning .mb-icon{color:#f59e0b}.mb-danger .mb-icon-wrap{background:#ef44441f}.mb-danger .mb-icon{color:#ef4444}.mb-question .mb-icon-wrap{background:#8b5cf61f}.mb-question .mb-icon{color:#8b5cf6}.mb-title{font-size:15px;font-weight:700;color:var(--text-color)}.mb-message{font-size:13px;color:var(--text-color-secondary);line-height:1.55;max-width:340px;white-space:pre-line}.mb-dont-ask-again{display:flex;align-items:center;gap:8px;margin-block-start:12px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;align-self:flex-start;-webkit-user-select:none;user-select:none}.mb-dont-ask-again input[type=checkbox]{margin:0;cursor:pointer}.mb-dont-ask-again span{line-height:1.3}.mb-actions{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center;flex-wrap:wrap}.mb-btn{min-width:90px}.mb-btn--primary{background:var(--primary-color);color:#fff}.mb-btn--primary:hover{filter:brightness(1.1)}.mb-btn--danger{background:#ef4444;color:#fff}.mb-btn--danger:hover{background:#dc2626}:host(.fly-message-box--mobile) .mb-backdrop{padding:16px}:host(.fly-message-box--mobile) .mb-dialog{inline-size:100%;max-inline-size:none;border-radius:18px;padding:24px 20px 16px}:host(.fly-message-box--mobile) .mb-actions{gap:8px;flex-wrap:nowrap}:host(.fly-message-box--mobile) .mb-btn{block-size:44px;flex:1 1 0;min-inline-size:0}\n"] }]
         }], propDecorators: { service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -9333,11 +9388,11 @@ class FlyBlockUiComponent {
         return k && k.length > 0 ? k : 'common.loading';
     }, ...(ngDevMode ? [{ debugName: "resolvedMessageKey" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyBlockUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyBlockUiComponent, isStandalone: true, selector: "fly-block-ui", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (active()) {\n  <div\n    class=\"fly-block-ui\"\n    role=\"status\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\n    <div class=\"fly-block-ui__card\">\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyBlockUiComponent, isStandalone: true, selector: "fly-block-ui", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (active()) {\r\n  <div\r\n    class=\"fly-block-ui\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    aria-busy=\"true\"\r\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\r\n    <div class=\"fly-block-ui__card\">\r\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\r\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\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: FlyBlockUiComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-block-ui', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (active()) {\n  <div\n    class=\"fly-block-ui\"\n    role=\"status\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\n    <div class=\"fly-block-ui__card\">\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"] }]
+            args: [{ selector: 'fly-block-ui', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (active()) {\r\n  <div\r\n    class=\"fly-block-ui\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    aria-busy=\"true\"\r\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\r\n    <div class=\"fly-block-ui__card\">\r\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\r\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"] }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], messageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageKey", required: false }] }] } });
 
 /**
@@ -9967,16 +10022,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 class FlyDrawerComponent {
     host = inject((ElementRef));
     destroyRef = inject(DestroyRef);
+    /** The host app's mobile-chrome flag — the only thing `variant="auto"` consults. */
+    hostIsMobile = inject(FLY_VIEWPORT_IS_MOBILE);
     /** Drives mount + slide. Controlled by the parent. */
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     /** Width tier → inline-size (sm 360 / md 480 / lg 640 / xl min(960px, 94%)). */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Convenience title shown in the default header (ignored if `[flyDrawerHeader]` is projected). Treated as an i18n key. */
     heading = input(null, ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
-    /** Edge to pin to. `end` (default) slides from inline-end; RTL flips it. Ignored when `variant` is `sheet`. */
+    /** Edge to pin to. `end` (default) slides from inline-end; RTL flips it. Ignored when the resolved variant is `sheet`. */
     side = input('end', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-    /** `side` (default, edge-pinned) or `sheet` (bottom-anchored, full-width). See {@link FlyDrawerVariant}. */
-    variant = input('side', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** `auto` (default — sheet on mobile), `side` (edge-pinned) or `sheet` (bottom-anchored). See {@link FlyDrawerVariant}. */
+    variant = input('auto', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** Close when the scrim is clicked. */
     dismissOnScrim = input(true, ...(ngDevMode ? [{ debugName: "dismissOnScrim" }] : /* istanbul ignore next */ []));
     /** Close on Escape. */
@@ -10006,12 +10063,23 @@ class FlyDrawerComponent {
     leaving = signal(false, ...(ngDevMode ? [{ debugName: "leaving" }] : /* istanbul ignore next */ []));
     headingId = 'fly-drawer-heading';
     labelledBy = computed(() => (this.heading() ? this.headingId : null), ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    /**
+     * `variant` with `'auto'` collapsed to the concrete one that renders. Everything
+     * downstream (the panel class, the sheet's own geometry) reads THIS, never the raw
+     * input, so `auto` is resolved in exactly one place.
+     */
+    resolvedVariant = computed(() => {
+        const requested = this.variant();
+        if (requested !== 'auto')
+            return requested;
+        return this.hostIsMobile() ? 'sheet' : 'side';
+    }, ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
     /** Size/side classes as an ngClass map (kept off the `[class]` string binding,
      *  which can race the leaving toggle and stutter the animation). */
     panelClass = computed(() => ({
         ['fly-drawer__panel--' + this.size()]: true,
         ['fly-drawer__panel--side-' + this.side()]: true,
-        'fly-drawer__panel--sheet': this.variant() === 'sheet',
+        'fly-drawer__panel--sheet': this.resolvedVariant() === 'sheet',
     }), ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     /** Exit keyframe names — one per variant — used to ignore bubbled child animationend events. */
     static EXIT_ANIMS = new Set(['fly-drawer-out', 'fly-drawer-sheet-out']);
@@ -10119,11 +10187,11 @@ class FlyDrawerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDrawerComponent, isStandalone: true, selector: "fly-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissOnScrim: { classPropertyName: "dismissOnScrim", publicName: "dismissOnScrim", isSignal: true, isRequired: false, transformFunction: null }, dismissOnEscape: { classPropertyName: "dismissOnEscape", publicName: "dismissOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hideCloseButton: { classPropertyName: "hideCloseButton", publicName: "hideCloseButton", isSignal: true, isRequired: false, transformFunction: null }, bodyPadding: { classPropertyName: "bodyPadding", publicName: "bodyPadding", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.fly-drawer--fixed": "position() === 'fixed'" } }, ngImport: i0, template: "<!--\r\n  Windowed overlay drawer. Renders only while mounted (open or sliding out).\r\n  Scrim + panel are absolutely positioned within the nearest positioned\r\n  ancestor (the consuming app root must be position:relative).\r\n-->\r\n@if (rendered()) {\r\n  <div\r\n    class=\"fly-drawer__scrim\"\r\n    [class.fly-drawer__scrim--leaving]=\"leaving()\"\r\n    (click)=\"onScrimClick()\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n\r\n  <div\r\n    class=\"fly-drawer__panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    [class.fly-drawer__panel--leaving]=\"leaving()\"\r\n    [style.--fly-drawer-width]=\"width()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"labelledBy()\"\r\n    [attr.aria-label]=\"!labelledBy() && ariaLabel() ? (ariaLabel()! | translate) : null\"\r\n    cdkTrapFocus\r\n    (animationend)=\"onPanelAnimationEnd($event.animationName)\"\r\n  >\r\n    <!-- Header: custom slot, else heading + close \u2715. -->\r\n    <ng-content select=\"[flyDrawerHeader]\">\r\n      @if (heading()) {\r\n        <header class=\"fly-drawer__header\">\r\n          <h2 class=\"fly-drawer__title\" [id]=\"headingId\">{{ heading()! | translate }}</h2>\r\n          @if (!hideCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fly-drawer__close\"\r\n              (click)=\"requestClose()\"\r\n              [attr.aria-label]=\"'common.action.close' | translate\"\r\n            >\r\n              <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n        </header>\r\n      }\r\n    </ng-content>\r\n\r\n    <div class=\"fly-drawer__body\" [ngClass]=\"'fly-drawer__body--pad-' + bodyPadding()\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-content select=\"[flyDrawerFooter]\"></ng-content>\r\n  </div>\r\n}\r\n", styles: [":host{position:absolute;inset:0;z-index:60;pointer-events:none}:host(.fly-drawer--fixed){position:fixed;block-size:100dvh;z-index:var(--z-overlay, 100)}.fly-drawer__scrim{position:absolute;inset:0;pointer-events:auto;background:#00000057;opacity:1;animation:fly-drawer-scrim-in .2s var(--nova-ease-micro) both}.fly-drawer__scrim--leaving{animation-name:fly-drawer-scrim-out;animation-duration:.2s}.fly-drawer__panel{position:absolute;inset-block:0;inset-inline-end:0;pointer-events:auto;display:flex;flex-direction:column;min-block-size:0;inline-size:var(--fly-drawer-width, min(480px, 100%));max-inline-size:100%;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(var(--mat-panel),var(--mat-panel));--nova-glass-drawer-shadow-x: -30px;box-shadow:var(--nova-glass-drawer-shadow-x) 0 70px #00000057,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}.fly-drawer__panel:dir(rtl){--nova-glass-drawer-shadow-x: 30px}@media(prefers-reduced-transparency:reduce){.fly-drawer__panel{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-drawer__panel:before,.fly-drawer__panel:after{display:none}}@media(prefers-contrast:more){.fly-drawer__panel{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-drawer__panel:after{animation:none}}.fly-drawer__panel{border-start-start-radius:20px;border-end-start-radius:20px;animation:drawerIn .34s var(--nova-ease-structural) both;will-change:transform}.fly-drawer__panel--sm{inline-size:var(--fly-drawer-width, min(360px, 100%))}.fly-drawer__panel--md{inline-size:var(--fly-drawer-width, min(480px, 100%))}.fly-drawer__panel--lg{inline-size:var(--fly-drawer-width, min(640px, 100%))}.fly-drawer__panel--xl{inline-size:var(--fly-drawer-width, min(960px, 94%))}.fly-drawer__panel--side-start{--nova-drawer-in-x: -28px;--nova-glass-drawer-shadow-x: 30px;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:20px;border-end-end-radius:20px}.fly-drawer__panel--side-start:dir(rtl){--nova-drawer-in-x: 28px;--nova-glass-drawer-shadow-x: -30px}.fly-drawer__panel--leaving{animation-name:fly-drawer-out;animation-duration:.24s;animation-timing-function:var(--nova-ease-structural)}.fly-drawer__panel--sheet{inset-inline:0;inset-block:auto 0;inline-size:100%;max-inline-size:100%;block-size:auto;max-block-size:min(85vh,720px);border-start-start-radius:20px;border-start-end-radius:20px;border-end-start-radius:0;border-end-end-radius:0;box-shadow:0 -16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);animation-name:fly-drawer-sheet-in}.fly-drawer__panel--sheet.fly-drawer__panel--leaving{animation-name:fly-drawer-sheet-out;animation-duration:.24s;animation-timing-function:var(--nova-ease-structural)}@keyframes fly-drawer-out{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(var(--nova-drawer-in-x),0,0)}}@keyframes fly-drawer-sheet-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fly-drawer-sheet-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}@keyframes fly-drawer-scrim-in{0%{opacity:0}to{opacity:1}}@keyframes fly-drawer-scrim-out{0%{opacity:1}to{opacity:0}}.fly-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-block-end:1px solid var(--w08);flex:0 0 auto}.fly-drawer__title{margin:0;font:var(--nova-font-drawer-title);letter-spacing:var(--nova-tracking-drawer-title);color:var(--w95)}.fly-drawer__close{display:inline-flex;align-items:center;justify-content:center;inline-size:30px;block-size:30px;border:none;border-radius:9px;background:transparent;color:var(--chrome-ink);cursor:pointer}.fly-drawer__close:hover{background:var(--w1)}.fly-drawer__body{flex:1 1 auto;min-block-size:0;overflow-y:auto;padding:var(--fly-drawer-body-padding, 16px 18px);container-type:inline-size}.fly-drawer__body--pad-none{--fly-drawer-body-padding: 0}.fly-drawer__body--pad-sm{--fly-drawer-body-padding: 12px 14px}.fly-drawer__body--pad-md{--fly-drawer-body-padding: 16px 18px}.fly-drawer__body--pad-lg{--fly-drawer-body-padding: 20px 22px}:host ::ng-deep [flyDrawerFooter]{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-block-start:1px solid var(--w08);background:var(--w03)}@media(prefers-reduced-motion:reduce){.fly-drawer__scrim,.fly-drawer__panel,.fly-drawer__scrim--leaving,.fly-drawer__panel--leaving{animation:none}}@media(forced-colors:active){.fly-drawer__panel{border:1px solid CanvasText}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDrawerComponent, isStandalone: true, selector: "fly-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissOnScrim: { classPropertyName: "dismissOnScrim", publicName: "dismissOnScrim", isSignal: true, isRequired: false, transformFunction: null }, dismissOnEscape: { classPropertyName: "dismissOnEscape", publicName: "dismissOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hideCloseButton: { classPropertyName: "hideCloseButton", publicName: "hideCloseButton", isSignal: true, isRequired: false, transformFunction: null }, bodyPadding: { classPropertyName: "bodyPadding", publicName: "bodyPadding", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.fly-drawer--fixed": "position() === 'fixed'" } }, ngImport: i0, template: "<!--\r\n  Windowed overlay drawer. Renders only while mounted (open or sliding out).\r\n  Scrim + panel are absolutely positioned within the nearest positioned\r\n  ancestor (the consuming app root must be position:relative).\r\n-->\r\n@if (rendered()) {\r\n  <div\r\n    class=\"fly-drawer__scrim\"\r\n    [class.fly-drawer__scrim--leaving]=\"leaving()\"\r\n    (click)=\"onScrimClick()\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n\r\n  <div\r\n    class=\"fly-drawer__panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    [class.fly-drawer__panel--leaving]=\"leaving()\"\r\n    [style.--fly-drawer-width]=\"width()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"labelledBy()\"\r\n    [attr.aria-label]=\"!labelledBy() && ariaLabel() ? (ariaLabel()! | translate) : null\"\r\n    cdkTrapFocus\r\n    (animationend)=\"onPanelAnimationEnd($event.animationName)\"\r\n  >\r\n    <!-- Header: custom slot, else heading + close \u2715. -->\r\n    <ng-content select=\"[flyDrawerHeader]\">\r\n      @if (heading()) {\r\n        <header class=\"fly-drawer__header\">\r\n          <h2 class=\"fly-drawer__title\" [id]=\"headingId\">{{ heading()! | translate }}</h2>\r\n          @if (!hideCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fly-drawer__close\"\r\n              (click)=\"requestClose()\"\r\n              [attr.aria-label]=\"'common.action.close' | translate\"\r\n            >\r\n              <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n        </header>\r\n      }\r\n    </ng-content>\r\n\r\n    <div class=\"fly-drawer__body\" [ngClass]=\"'fly-drawer__body--pad-' + bodyPadding()\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-content select=\"[flyDrawerFooter]\"></ng-content>\r\n  </div>\r\n}\r\n", styles: [":host{position:absolute;inset:0;z-index:60;pointer-events:none;--fly-drawer-sheet-safe-inset: 0px}:host(.fly-drawer--fixed){position:fixed;block-size:100dvh;z-index:var(--z-overlay, 100);--fly-drawer-sheet-safe-inset: env(safe-area-inset-bottom, 0px)}.fly-drawer__scrim{position:absolute;inset:0;pointer-events:auto;background:#00000057;opacity:1;animation:fly-drawer-scrim-in .2s var(--nova-ease-micro) both}.fly-drawer__scrim--leaving{animation-name:fly-drawer-scrim-out;animation-duration:.2s}.fly-drawer__panel{position:absolute;inset-block:0;inset-inline-end:0;pointer-events:auto;display:flex;flex-direction:column;min-block-size:0;inline-size:var(--fly-drawer-width, min(480px, 100%));max-inline-size:100%;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(var(--mat-panel),var(--mat-panel));--nova-glass-drawer-shadow-x: -30px;box-shadow:var(--nova-glass-drawer-shadow-x) 0 70px #00000057,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}.fly-drawer__panel:dir(rtl){--nova-glass-drawer-shadow-x: 30px}@media(prefers-reduced-transparency:reduce){.fly-drawer__panel{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-drawer__panel:before,.fly-drawer__panel:after{display:none}}@media(prefers-contrast:more){.fly-drawer__panel{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-drawer__panel:after{animation:none}}.fly-drawer__panel{border-start-start-radius:20px;border-end-start-radius:20px;animation:drawerIn .34s var(--nova-ease-structural) both;will-change:transform}.fly-drawer__panel--sm{inline-size:var(--fly-drawer-width, min(360px, 100%))}.fly-drawer__panel--md{inline-size:var(--fly-drawer-width, min(480px, 100%))}.fly-drawer__panel--lg{inline-size:var(--fly-drawer-width, min(640px, 100%))}.fly-drawer__panel--xl{inline-size:var(--fly-drawer-width, min(960px, 94%))}.fly-drawer__panel--side-start{--nova-drawer-in-x: -28px;--nova-glass-drawer-shadow-x: 30px;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:20px;border-end-end-radius:20px}.fly-drawer__panel--side-start:dir(rtl){--nova-drawer-in-x: 28px;--nova-glass-drawer-shadow-x: -30px}.fly-drawer__panel--leaving{animation-name:fly-drawer-out;animation-duration:.24s;animation-timing-function:var(--nova-ease-structural)}.fly-drawer__panel--sheet{inset-inline:0;inset-block:auto 0;inline-size:100%;max-inline-size:100%;block-size:auto;max-block-size:min(85%,85dvh,720px);border-start-start-radius:20px;border-start-end-radius:20px;border-end-start-radius:0;border-end-end-radius:0;padding-block-end:var(--fly-drawer-sheet-safe-inset);box-shadow:0 -16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);animation-name:fly-drawer-sheet-in}.fly-drawer__panel--sheet.fly-drawer__panel--leaving{animation-name:fly-drawer-sheet-out;animation-duration:.24s;animation-timing-function:var(--nova-ease-structural)}@keyframes fly-drawer-out{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(var(--nova-drawer-in-x),0,0)}}@keyframes fly-drawer-sheet-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fly-drawer-sheet-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}@keyframes fly-drawer-scrim-in{0%{opacity:0}to{opacity:1}}@keyframes fly-drawer-scrim-out{0%{opacity:1}to{opacity:0}}.fly-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-block-end:1px solid var(--w08);flex:0 0 auto}.fly-drawer__title{margin:0;font:var(--nova-font-drawer-title);letter-spacing:var(--nova-tracking-drawer-title);color:var(--w95)}.fly-drawer__close{display:inline-flex;align-items:center;justify-content:center;inline-size:30px;block-size:30px;border:none;border-radius:9px;background:transparent;color:var(--chrome-ink);cursor:pointer}.fly-drawer__close:hover{background:var(--w1)}@media(pointer:coarse){.fly-drawer__close{inline-size:44px;block-size:44px}}.fly-drawer__body{flex:1 1 auto;min-block-size:0;overflow-y:auto;padding:var(--fly-drawer-body-padding, 16px 18px);container-type:inline-size}.fly-drawer__body--pad-none{--fly-drawer-body-padding: 0}.fly-drawer__body--pad-sm{--fly-drawer-body-padding: 12px 14px}.fly-drawer__body--pad-md{--fly-drawer-body-padding: 16px 18px}.fly-drawer__body--pad-lg{--fly-drawer-body-padding: 20px 22px}:host ::ng-deep [flyDrawerFooter]{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-block-start:1px solid var(--w08);background:var(--w03)}@media(prefers-reduced-motion:reduce){.fly-drawer__scrim,.fly-drawer__panel,.fly-drawer__scrim--leaving,.fly-drawer__panel--leaving{animation:none}}@media(forced-colors:active){.fly-drawer__panel{border:1px solid CanvasText}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-drawer', standalone: true, imports: [CommonModule, A11yModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.fly-drawer--fixed]': "position() === 'fixed'" }, template: "<!--\r\n  Windowed overlay drawer. Renders only while mounted (open or sliding out).\r\n  Scrim + panel are absolutely positioned within the nearest positioned\r\n  ancestor (the consuming app root must be position:relative).\r\n-->\r\n@if (rendered()) {\r\n  <div\r\n    class=\"fly-drawer__scrim\"\r\n    [class.fly-drawer__scrim--leaving]=\"leaving()\"\r\n    (click)=\"onScrimClick()\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n\r\n  <div\r\n    class=\"fly-drawer__panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    [class.fly-drawer__panel--leaving]=\"leaving()\"\r\n    [style.--fly-drawer-width]=\"width()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"labelledBy()\"\r\n    [attr.aria-label]=\"!labelledBy() && ariaLabel() ? (ariaLabel()! | translate) : null\"\r\n    cdkTrapFocus\r\n    (animationend)=\"onPanelAnimationEnd($event.animationName)\"\r\n  >\r\n    <!-- Header: custom slot, else heading + close \u2715. -->\r\n    <ng-content select=\"[flyDrawerHeader]\">\r\n      @if (heading()) {\r\n        <header class=\"fly-drawer__header\">\r\n          <h2 class=\"fly-drawer__title\" [id]=\"headingId\">{{ heading()! | translate }}</h2>\r\n          @if (!hideCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fly-drawer__close\"\r\n              (click)=\"requestClose()\"\r\n              [attr.aria-label]=\"'common.action.close' | translate\"\r\n            >\r\n              <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n        </header>\r\n      }\r\n    </ng-content>\r\n\r\n    <div class=\"fly-drawer__body\" [ngClass]=\"'fly-drawer__body--pad-' + bodyPadding()\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-content select=\"[flyDrawerFooter]\"></ng-content>\r\n  </div>\r\n}\r\n", styles: [":host{position:absolute;inset:0;z-index:60;pointer-events:none}:host(.fly-drawer--fixed){position:fixed;block-size:100dvh;z-index:var(--z-overlay, 100)}.fly-drawer__scrim{position:absolute;inset:0;pointer-events:auto;background:#00000057;opacity:1;animation:fly-drawer-scrim-in .2s var(--nova-ease-micro) both}.fly-drawer__scrim--leaving{animation-name:fly-drawer-scrim-out;animation-duration:.2s}.fly-drawer__panel{position:absolute;inset-block:0;inset-inline-end:0;pointer-events:auto;display:flex;flex-direction:column;min-block-size:0;inline-size:var(--fly-drawer-width, min(480px, 100%));max-inline-size:100%;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(var(--mat-panel),var(--mat-panel));--nova-glass-drawer-shadow-x: -30px;box-shadow:var(--nova-glass-drawer-shadow-x) 0 70px #00000057,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}.fly-drawer__panel:dir(rtl){--nova-glass-drawer-shadow-x: 30px}@media(prefers-reduced-transparency:reduce){.fly-drawer__panel{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-drawer__panel:before,.fly-drawer__panel:after{display:none}}@media(prefers-contrast:more){.fly-drawer__panel{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-drawer__panel:after{animation:none}}.fly-drawer__panel{border-start-start-radius:20px;border-end-start-radius:20px;animation:drawerIn .34s var(--nova-ease-structural) both;will-change:transform}.fly-drawer__panel--sm{inline-size:var(--fly-drawer-width, min(360px, 100%))}.fly-drawer__panel--md{inline-size:var(--fly-drawer-width, min(480px, 100%))}.fly-drawer__panel--lg{inline-size:var(--fly-drawer-width, min(640px, 100%))}.fly-drawer__panel--xl{inline-size:var(--fly-drawer-width, min(960px, 94%))}.fly-drawer__panel--side-start{--nova-drawer-in-x: -28px;--nova-glass-drawer-shadow-x: 30px;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:20px;border-end-end-radius:20px}.fly-drawer__panel--side-start:dir(rtl){--nova-drawer-in-x: 28px;--nova-glass-drawer-shadow-x: -30px}.fly-drawer__panel--leaving{animation-name:fly-drawer-out;animation-duration:.24s;animation-timing-function:var(--nova-ease-structural)}.fly-drawer__panel--sheet{inset-inline:0;inset-block:auto 0;inline-size:100%;max-inline-size:100%;block-size:auto;max-block-size:min(85vh,720px);border-start-start-radius:20px;border-start-end-radius:20px;border-end-start-radius:0;border-end-end-radius:0;box-shadow:0 -16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);animation-name:fly-drawer-sheet-in}.fly-drawer__panel--sheet.fly-drawer__panel--leaving{animation-name:fly-drawer-sheet-out;animation-duration:.24s;animation-timing-function:var(--nova-ease-structural)}@keyframes fly-drawer-out{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(var(--nova-drawer-in-x),0,0)}}@keyframes fly-drawer-sheet-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fly-drawer-sheet-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}@keyframes fly-drawer-scrim-in{0%{opacity:0}to{opacity:1}}@keyframes fly-drawer-scrim-out{0%{opacity:1}to{opacity:0}}.fly-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-block-end:1px solid var(--w08);flex:0 0 auto}.fly-drawer__title{margin:0;font:var(--nova-font-drawer-title);letter-spacing:var(--nova-tracking-drawer-title);color:var(--w95)}.fly-drawer__close{display:inline-flex;align-items:center;justify-content:center;inline-size:30px;block-size:30px;border:none;border-radius:9px;background:transparent;color:var(--chrome-ink);cursor:pointer}.fly-drawer__close:hover{background:var(--w1)}.fly-drawer__body{flex:1 1 auto;min-block-size:0;overflow-y:auto;padding:var(--fly-drawer-body-padding, 16px 18px);container-type:inline-size}.fly-drawer__body--pad-none{--fly-drawer-body-padding: 0}.fly-drawer__body--pad-sm{--fly-drawer-body-padding: 12px 14px}.fly-drawer__body--pad-md{--fly-drawer-body-padding: 16px 18px}.fly-drawer__body--pad-lg{--fly-drawer-body-padding: 20px 22px}:host ::ng-deep [flyDrawerFooter]{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-block-start:1px solid var(--w08);background:var(--w03)}@media(prefers-reduced-motion:reduce){.fly-drawer__scrim,.fly-drawer__panel,.fly-drawer__scrim--leaving,.fly-drawer__panel--leaving{animation:none}}@media(forced-colors:active){.fly-drawer__panel{border:1px solid CanvasText}}\n"] }]
+            args: [{ selector: 'fly-drawer', standalone: true, imports: [CommonModule, A11yModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.fly-drawer--fixed]': "position() === 'fixed'" }, template: "<!--\r\n  Windowed overlay drawer. Renders only while mounted (open or sliding out).\r\n  Scrim + panel are absolutely positioned within the nearest positioned\r\n  ancestor (the consuming app root must be position:relative).\r\n-->\r\n@if (rendered()) {\r\n  <div\r\n    class=\"fly-drawer__scrim\"\r\n    [class.fly-drawer__scrim--leaving]=\"leaving()\"\r\n    (click)=\"onScrimClick()\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n\r\n  <div\r\n    class=\"fly-drawer__panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    [class.fly-drawer__panel--leaving]=\"leaving()\"\r\n    [style.--fly-drawer-width]=\"width()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"labelledBy()\"\r\n    [attr.aria-label]=\"!labelledBy() && ariaLabel() ? (ariaLabel()! | translate) : null\"\r\n    cdkTrapFocus\r\n    (animationend)=\"onPanelAnimationEnd($event.animationName)\"\r\n  >\r\n    <!-- Header: custom slot, else heading + close \u2715. -->\r\n    <ng-content select=\"[flyDrawerHeader]\">\r\n      @if (heading()) {\r\n        <header class=\"fly-drawer__header\">\r\n          <h2 class=\"fly-drawer__title\" [id]=\"headingId\">{{ heading()! | translate }}</h2>\r\n          @if (!hideCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fly-drawer__close\"\r\n              (click)=\"requestClose()\"\r\n              [attr.aria-label]=\"'common.action.close' | translate\"\r\n            >\r\n              <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n        </header>\r\n      }\r\n    </ng-content>\r\n\r\n    <div class=\"fly-drawer__body\" [ngClass]=\"'fly-drawer__body--pad-' + bodyPadding()\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-content select=\"[flyDrawerFooter]\"></ng-content>\r\n  </div>\r\n}\r\n", styles: [":host{position:absolute;inset:0;z-index:60;pointer-events:none;--fly-drawer-sheet-safe-inset: 0px}:host(.fly-drawer--fixed){position:fixed;block-size:100dvh;z-index:var(--z-overlay, 100);--fly-drawer-sheet-safe-inset: env(safe-area-inset-bottom, 0px)}.fly-drawer__scrim{position:absolute;inset:0;pointer-events:auto;background:#00000057;opacity:1;animation:fly-drawer-scrim-in .2s var(--nova-ease-micro) both}.fly-drawer__scrim--leaving{animation-name:fly-drawer-scrim-out;animation-duration:.2s}.fly-drawer__panel{position:absolute;inset-block:0;inset-inline-end:0;pointer-events:auto;display:flex;flex-direction:column;min-block-size:0;inline-size:var(--fly-drawer-width, min(480px, 100%));max-inline-size:100%;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(var(--mat-panel),var(--mat-panel));--nova-glass-drawer-shadow-x: -30px;box-shadow:var(--nova-glass-drawer-shadow-x) 0 70px #00000057,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}.fly-drawer__panel:dir(rtl){--nova-glass-drawer-shadow-x: 30px}@media(prefers-reduced-transparency:reduce){.fly-drawer__panel{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-drawer__panel:before,.fly-drawer__panel:after{display:none}}@media(prefers-contrast:more){.fly-drawer__panel{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-drawer__panel:after{animation:none}}.fly-drawer__panel{border-start-start-radius:20px;border-end-start-radius:20px;animation:drawerIn .34s var(--nova-ease-structural) both;will-change:transform}.fly-drawer__panel--sm{inline-size:var(--fly-drawer-width, min(360px, 100%))}.fly-drawer__panel--md{inline-size:var(--fly-drawer-width, min(480px, 100%))}.fly-drawer__panel--lg{inline-size:var(--fly-drawer-width, min(640px, 100%))}.fly-drawer__panel--xl{inline-size:var(--fly-drawer-width, min(960px, 94%))}.fly-drawer__panel--side-start{--nova-drawer-in-x: -28px;--nova-glass-drawer-shadow-x: 30px;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:20px;border-end-end-radius:20px}.fly-drawer__panel--side-start:dir(rtl){--nova-drawer-in-x: 28px;--nova-glass-drawer-shadow-x: -30px}.fly-drawer__panel--leaving{animation-name:fly-drawer-out;animation-duration:.24s;animation-timing-function:var(--nova-ease-structural)}.fly-drawer__panel--sheet{inset-inline:0;inset-block:auto 0;inline-size:100%;max-inline-size:100%;block-size:auto;max-block-size:min(85%,85dvh,720px);border-start-start-radius:20px;border-start-end-radius:20px;border-end-start-radius:0;border-end-end-radius:0;padding-block-end:var(--fly-drawer-sheet-safe-inset);box-shadow:0 -16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);animation-name:fly-drawer-sheet-in}.fly-drawer__panel--sheet.fly-drawer__panel--leaving{animation-name:fly-drawer-sheet-out;animation-duration:.24s;animation-timing-function:var(--nova-ease-structural)}@keyframes fly-drawer-out{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(var(--nova-drawer-in-x),0,0)}}@keyframes fly-drawer-sheet-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fly-drawer-sheet-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}@keyframes fly-drawer-scrim-in{0%{opacity:0}to{opacity:1}}@keyframes fly-drawer-scrim-out{0%{opacity:1}to{opacity:0}}.fly-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-block-end:1px solid var(--w08);flex:0 0 auto}.fly-drawer__title{margin:0;font:var(--nova-font-drawer-title);letter-spacing:var(--nova-tracking-drawer-title);color:var(--w95)}.fly-drawer__close{display:inline-flex;align-items:center;justify-content:center;inline-size:30px;block-size:30px;border:none;border-radius:9px;background:transparent;color:var(--chrome-ink);cursor:pointer}.fly-drawer__close:hover{background:var(--w1)}@media(pointer:coarse){.fly-drawer__close{inline-size:44px;block-size:44px}}.fly-drawer__body{flex:1 1 auto;min-block-size:0;overflow-y:auto;padding:var(--fly-drawer-body-padding, 16px 18px);container-type:inline-size}.fly-drawer__body--pad-none{--fly-drawer-body-padding: 0}.fly-drawer__body--pad-sm{--fly-drawer-body-padding: 12px 14px}.fly-drawer__body--pad-md{--fly-drawer-body-padding: 16px 18px}.fly-drawer__body--pad-lg{--fly-drawer-body-padding: 20px 22px}:host ::ng-deep [flyDrawerFooter]{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-block-start:1px solid var(--w08);background:var(--w03)}@media(prefers-reduced-motion:reduce){.fly-drawer__scrim,.fly-drawer__panel,.fly-drawer__scrim--leaving,.fly-drawer__panel--leaving{animation:none}}@media(forced-colors:active){.fly-drawer__panel{border:1px solid CanvasText}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dismissOnScrim: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissOnScrim", required: false }] }], dismissOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hideCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCloseButton", required: false }] }], bodyPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyPadding", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -11037,7 +11105,7 @@ class FlySelectComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlySelectComponent, isStandalone: true, selector: "fly-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, noResultsLabel: { classPropertyName: "noResultsLabel", publicName: "noResultsLabel", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, deselectAllLabel: { classPropertyName: "deselectAllLabel", publicName: "deselectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, summaryFormatter: { classPropertyName: "summaryFormatter", publicName: "summaryFormatter", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", openedChange: "openedChange" }, host: { properties: { "class.fly-select--open": "isOpen()", "class.fly-select--disabled": "effectiveDisabled()" }, classAttribute: "fly-select" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FlySelectComponent), multi: true },
-        ], viewQueries: [{ propertyName: "panelEl", first: true, predicate: ["panelRef"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchRef"], descendants: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerRef"], descendants: true }], ngImport: i0, template: "<!-- \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\u2500\u2500 -->\r\n<button\r\n  #triggerRef\r\n  type=\"button\"\r\n  [id]=\"triggerId\"\r\n  class=\"fly-select__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() || null\"\r\n  [class.fly-select__trigger--placeholder]=\"!hasSelection()\"\r\n  [disabled]=\"effectiveDisabled()\"\r\n  (click)=\"toggleOpen()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  <span class=\"fly-select__trigger-label\">{{ triggerLabel() }}</span>\r\n\r\n  @if (clearable() && hasSelection() && !effectiveDisabled()) {\r\n    <span\r\n      class=\"fly-select__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-select__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\u2500\u2500 -->\r\n<!-- Portaled to <body> by the component (see class docblock) \u2014 position: fixed, computed from\r\n     the trigger. [style.*] bindings null out the unused axis (top XOR bottom, left XOR right)\r\n     rather than leaving a stale 0, which is what lets the flip-above / RTL cases each win\r\n     outright instead of fighting a leftover declaration from the other branch. -->\r\n@if (isOpen()) {\r\n  <div\r\n    #panelRef\r\n    class=\"fly-select__panel\"\r\n    [class.fly-select__panel--flip]=\"panelPosition()?.flipAbove\"\r\n    [style.top.px]=\"panelPosition()?.top\"\r\n    [style.bottom.px]=\"panelPosition()?.bottom\"\r\n    [style.left.px]=\"panelPosition()?.left\"\r\n    [style.right.px]=\"panelPosition()?.right\"\r\n    [style.min-width.px]=\"panelPosition()?.minWidth\"\r\n    [style.max-height.px]=\"panelPosition()?.maxHeight\"\r\n    tabindex=\"-1\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @if (searchable()) {\r\n      <div class=\"fly-select__search\">\r\n        <input\r\n          #searchRef\r\n          type=\"text\"\r\n          class=\"fly-select__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\r\n    @if (multiple() && showSelectAll() && navigableOptions().length > 0) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-select__select-all\"\r\n        (click)=\"toggleSelectAll()\"\r\n      >\r\n        {{ allVisibleSelected() ? deselectAllText() : selectAllText() }}\r\n      </button>\r\n    }\r\n\r\n    <div\r\n      class=\"fly-select__listbox\"\r\n      role=\"listbox\"\r\n      [id]=\"listboxId\"\r\n      [attr.tabindex]=\"searchable() ? null : 0\"\r\n      [attr.aria-multiselectable]=\"multiple() ? true : null\"\r\n      [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n    >\r\n      @for (group of renderGroups(); track group.key) {\r\n        @if (group.key !== null) {\r\n          <div class=\"fly-select__group-label\" role=\"presentation\">{{ group.key }}</div>\r\n        }\r\n        @for (opt of group.options; track opt.value) {\r\n          <div\r\n            class=\"fly-select__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [id]=\"opt.disabled ? null : optionId(navIndexOf(opt.value))\"\r\n            [attr.aria-selected]=\"isSelected(opt.value)\"\r\n            [attr.aria-disabled]=\"opt.disabled ? true : null\"\r\n            [class.fly-select__option--selected]=\"isSelected(opt.value)\"\r\n            [class.fly-select__option--active]=\"!opt.disabled && navIndexOf(opt.value) === activeNavIndex()\"\r\n            [class.fly-select__option--disabled]=\"opt.disabled\"\r\n            (click)=\"onOptionClick(opt)\"\r\n            (keydown.enter)=\"onOptionClick(opt)\"\r\n            (mouseenter)=\"onOptionHover(navIndexOf(opt.value))\"\r\n          >\r\n            @if (multiple()) {\r\n              <span class=\"fly-select__checkbox\" aria-hidden=\"true\">\r\n                @if (isSelected(opt.value)) { <span class=\"fly-select__checkbox-tick\">\u2713</span> }\r\n              </span>\r\n            } @else {\r\n              <span class=\"fly-select__check\" aria-hidden=\"true\">\r\n                @if (isSelected(opt.value)) { \u2713 }\r\n              </span>\r\n            }\r\n            <span class=\"fly-select__option-label\">{{ opt.label }}</span>\r\n          </div>\r\n        }\r\n      }\r\n\r\n      @if (filteredOptions().length === 0) {\r\n        <div class=\"fly-select__empty\" role=\"presentation\">{{ noResultsText() }}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after,.fly-select__panel,.fly-select__panel *,.fly-select__panel *:before,.fly-select__panel *:after{box-sizing:border-box}:host{display:inline-block;inline-size:100%;min-inline-size:12rem}.fly-select__trigger{display:flex;align-items:center;gap:8px;inline-size:100%;block-size:36px;padding-inline:11px;border:1px solid var(--w14);border-radius:10px;background:var(--w05);color:var(--w85);font:500 13px/1.3 var(--font-family);text-align:start;cursor:pointer;transition:border-color var(--nova-duration-hover) var(--nova-ease-micro),background var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__trigger:hover:not(:disabled){background:var(--w07)}.fly-select__trigger:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:inherit}.fly-select__trigger:disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed}:host(.fly-select--open) .fly-select__trigger{border-color:var(--accent);background:var(--w08)}.fly-select__trigger--placeholder .fly-select__trigger-label{color:var(--w42)}.fly-select__trigger-label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-select__clear{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;inline-size:18px;block-size:18px;border-radius:50%;color:var(--w42);font-size:11px;line-height:1;cursor:pointer;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__clear:hover{background:var(--w1);color:var(--w85)}.fly-select__chevron{flex:0 0 auto;color:var(--w45);font-size:10px;transition:transform .22s var(--nova-ease-structural)}:host(.fly-select--open) .fly-select__chevron{transform:rotate(180deg)}@media(pointer:coarse){.fly-select__trigger{min-block-size:44px}.fly-select__clear{inline-size:24px;block-size:24px}}.fly-select__panel{position:fixed;z-index:1000;display:flex;flex-direction:column;inline-size:max-content;max-inline-size:min(420px,90vw);overflow:hidden;padding:6px;border-radius:14px;animation:menuIn .24s var(--nova-ease-structural) both;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-a),var(--mat-menu-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){.fly-select__panel{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-select__panel:before,.fly-select__panel:after{display:none}}@media(prefers-contrast:more){.fly-select__panel{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-select__panel:after{animation:none}}.fly-select__search{padding:6px;border-block-end:1px solid var(--w08)}.fly-select__search-input{inline-size:100%;block-size:30px;padding-inline:9px;border:1px solid var(--w14);border-radius:8px;background:var(--w05);color:var(--w85);font:500 13px/1.3 var(--font-family)}.fly-select__search-input::placeholder{color:var(--w42)}.fly-select__search-input:focus-visible{outline:none;border-color:var(--accent);background:var(--w07)}.fly-select__select-all{display:block;inline-size:100%;padding:7px 9px;border:0;border-block-end:1px solid var(--w08);background:transparent;color:var(--accent);font:600 12.5px/1.3 var(--font-family);text-align:start;cursor:pointer}.fly-select__select-all:hover{background:var(--w1)}.fly-select__listbox{flex:1 1 auto;min-block-size:0;overflow-y:auto;padding-block:4px}.fly-select__listbox:focus-visible{outline:none}.fly-select__group-label{padding:6px 9px 2px;color:var(--w42);font:var(--nova-font-eyebrow);letter-spacing:var(--nova-tracking-eyebrow);text-transform:uppercase}.fly-select__option{display:flex;align-items:center;gap:8px;min-block-size:32px;padding:7px 9px;border-radius:8px;color:var(--w85);font:500 13px/1.3 var(--font-family);cursor:pointer;transition:background var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__option--active{background:var(--w1)}.fly-select__option--selected{background:var(--w08);font-weight:600}.fly-select__option--selected.fly-select__option--active{background:var(--w08);box-shadow:inset 0 0 0 1px var(--accent)}.fly-select__option--disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed;pointer-events:none}.fly-select__option-label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-select__check{flex:0 0 auto;inline-size:16px;color:var(--accent);font-size:14px;font-weight:600;text-align:center}.fly-select__checkbox{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;inline-size:16px;block-size:16px;border:1.5px solid var(--w22);border-radius:4px;transition:background var(--nova-duration-hover) var(--nova-ease-micro),border-color var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__option--selected .fly-select__checkbox{background:var(--accent);border-color:var(--accent)}.fly-select__checkbox-tick{color:var(--on-accent);font-size:10px;line-height:1}.fly-select__empty{padding:16px 9px;text-align:center;color:var(--w42);font:400 12.5px/1.4 var(--font-family)}@media(pointer:coarse){.fly-select__option{min-block-size:44px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "panelEl", first: true, predicate: ["panelRef"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchRef"], descendants: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerRef"], descendants: true }], ngImport: i0, template: "<!-- \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\u2500\u2500 -->\r\n<button\r\n  #triggerRef\r\n  type=\"button\"\r\n  [id]=\"triggerId\"\r\n  class=\"fly-select__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() || null\"\r\n  [class.fly-select__trigger--placeholder]=\"!hasSelection()\"\r\n  [disabled]=\"effectiveDisabled()\"\r\n  (click)=\"toggleOpen()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  <span class=\"fly-select__trigger-label\">{{ triggerLabel() }}</span>\r\n\r\n  @if (clearable() && hasSelection() && !effectiveDisabled()) {\r\n    <span\r\n      class=\"fly-select__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-select__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\u2500\u2500 -->\r\n<!-- Portaled to <body> by the component (see class docblock) \u2014 position: fixed, computed from\r\n     the trigger. [style.*] bindings null out the unused axis (top XOR bottom, left XOR right)\r\n     rather than leaving a stale 0, which is what lets the flip-above / RTL cases each win\r\n     outright instead of fighting a leftover declaration from the other branch. -->\r\n@if (isOpen()) {\r\n  <div\r\n    #panelRef\r\n    class=\"fly-select__panel\"\r\n    [class.fly-select__panel--flip]=\"panelPosition()?.flipAbove\"\r\n    [style.top.px]=\"panelPosition()?.top\"\r\n    [style.bottom.px]=\"panelPosition()?.bottom\"\r\n    [style.left.px]=\"panelPosition()?.left\"\r\n    [style.right.px]=\"panelPosition()?.right\"\r\n    [style.min-width.px]=\"panelPosition()?.minWidth\"\r\n    [style.max-height.px]=\"panelPosition()?.maxHeight\"\r\n    tabindex=\"-1\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @if (searchable()) {\r\n      <div class=\"fly-select__search\">\r\n        <input\r\n          #searchRef\r\n          type=\"text\"\r\n          class=\"fly-select__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\r\n    @if (multiple() && showSelectAll() && navigableOptions().length > 0) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-select__select-all\"\r\n        (click)=\"toggleSelectAll()\"\r\n      >\r\n        {{ allVisibleSelected() ? deselectAllText() : selectAllText() }}\r\n      </button>\r\n    }\r\n\r\n    <div\r\n      class=\"fly-select__listbox\"\r\n      role=\"listbox\"\r\n      [id]=\"listboxId\"\r\n      [attr.tabindex]=\"searchable() ? null : 0\"\r\n      [attr.aria-multiselectable]=\"multiple() ? true : null\"\r\n      [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n    >\r\n      @for (group of renderGroups(); track group.key) {\r\n        @if (group.key !== null) {\r\n          <div class=\"fly-select__group-label\" role=\"presentation\">{{ group.key }}</div>\r\n        }\r\n        @for (opt of group.options; track opt.value) {\r\n          <div\r\n            class=\"fly-select__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [id]=\"opt.disabled ? null : optionId(navIndexOf(opt.value))\"\r\n            [attr.aria-selected]=\"isSelected(opt.value)\"\r\n            [attr.aria-disabled]=\"opt.disabled ? true : null\"\r\n            [class.fly-select__option--selected]=\"isSelected(opt.value)\"\r\n            [class.fly-select__option--active]=\"!opt.disabled && navIndexOf(opt.value) === activeNavIndex()\"\r\n            [class.fly-select__option--disabled]=\"opt.disabled\"\r\n            (click)=\"onOptionClick(opt)\"\r\n            (keydown.enter)=\"onOptionClick(opt)\"\r\n            (mouseenter)=\"onOptionHover(navIndexOf(opt.value))\"\r\n          >\r\n            @if (multiple()) {\r\n              <span class=\"fly-select__checkbox\" aria-hidden=\"true\">\r\n                @if (isSelected(opt.value)) { <span class=\"fly-select__checkbox-tick\">\u2713</span> }\r\n              </span>\r\n            } @else {\r\n              <span class=\"fly-select__check\" aria-hidden=\"true\">\r\n                @if (isSelected(opt.value)) { \u2713 }\r\n              </span>\r\n            }\r\n            <span class=\"fly-select__option-label\">{{ opt.label }}</span>\r\n          </div>\r\n        }\r\n      }\r\n\r\n      @if (filteredOptions().length === 0) {\r\n        <div class=\"fly-select__empty\" role=\"presentation\">{{ noResultsText() }}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after,.fly-select__panel,.fly-select__panel *,.fly-select__panel *:before,.fly-select__panel *:after{box-sizing:border-box}:host{display:inline-block;inline-size:100%;min-inline-size:12rem}.fly-select__trigger{display:flex;align-items:center;gap:8px;inline-size:100%;block-size:36px;padding-inline:11px;border:1px solid var(--w14);border-radius:10px;background:var(--w05);color:var(--w85);font:500 13px/1.3 var(--font-family);text-align:start;cursor:pointer;transition:border-color var(--nova-duration-hover) var(--nova-ease-micro),background var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__trigger:hover:not(:disabled){background:var(--w07)}.fly-select__trigger:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:inherit}.fly-select__trigger:disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed}:host(.fly-select--open) .fly-select__trigger{border-color:var(--accent);background:var(--w08)}.fly-select__trigger--placeholder .fly-select__trigger-label{color:var(--w42)}.fly-select__trigger-label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-select__clear{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;inline-size:18px;block-size:18px;border-radius:50%;color:var(--w42);font-size:11px;line-height:1;cursor:pointer;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__clear:hover{background:var(--w1);color:var(--w85)}.fly-select__chevron{flex:0 0 auto;color:var(--w45);font-size:10px;transition:transform .22s var(--nova-ease-structural)}:host(.fly-select--open) .fly-select__chevron{transform:rotate(180deg)}@media(pointer:coarse){.fly-select__trigger{min-block-size:44px}.fly-select__clear{inline-size:24px;block-size:24px}}.fly-select__panel{position:fixed;z-index:1000;display:flex;flex-direction:column;inline-size:max-content;max-inline-size:min(420px,90vw);overflow:hidden;padding:6px;border-radius:14px;animation:menuIn .24s var(--nova-ease-structural) both;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-a),var(--mat-menu-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){.fly-select__panel{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-select__panel:before,.fly-select__panel:after{display:none}}@media(prefers-contrast:more){.fly-select__panel{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-select__panel:after{animation:none}}.fly-select__search{padding:6px;border-block-end:1px solid var(--w08)}.fly-select__search-input{inline-size:100%;block-size:30px;padding-inline:9px;border:1px solid var(--w14);border-radius:8px;background:var(--w05);color:var(--w85);font:500 13px/1.3 var(--font-family)}.fly-select__search-input::placeholder{color:var(--w42)}.fly-select__search-input:focus-visible{outline:none;border-color:var(--accent);background:var(--w07)}.fly-select__select-all{display:block;inline-size:100%;padding:7px 9px;border:0;border-block-end:1px solid var(--w08);background:transparent;color:var(--accent);font:600 12.5px/1.3 var(--font-family);text-align:start;cursor:pointer}.fly-select__select-all:hover{background:var(--w1)}.fly-select__listbox{flex:1 1 auto;min-block-size:0;overflow-y:auto;padding-block:4px}.fly-select__listbox:focus-visible{outline:none}.fly-select__group-label{padding:6px 9px 2px;color:var(--w5);font:var(--nova-font-eyebrow);letter-spacing:var(--nova-tracking-eyebrow);text-transform:uppercase}.fly-select__option{display:flex;align-items:center;gap:8px;min-block-size:32px;padding:7px 9px;border-radius:8px;color:var(--w85);font:500 13px/1.3 var(--font-family);cursor:pointer;transition:background var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__option--active{background:var(--w1)}.fly-select__option--selected{background:var(--w08);font-weight:600}.fly-select__option--selected.fly-select__option--active{background:var(--w08);box-shadow:inset 0 0 0 1px var(--accent)}.fly-select__option--disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed;pointer-events:none}.fly-select__option-label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-select__check{flex:0 0 auto;inline-size:16px;color:var(--accent);font-size:14px;font-weight:600;text-align:center}.fly-select__checkbox{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;inline-size:16px;block-size:16px;border:1.5px solid var(--w22);border-radius:4px;transition:background var(--nova-duration-hover) var(--nova-ease-micro),border-color var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__option--selected .fly-select__checkbox{background:var(--accent);border-color:var(--accent)}.fly-select__checkbox-tick{color:var(--on-accent);font-size:10px;line-height:1}.fly-select__empty{padding:16px 9px;text-align:center;color:var(--w42);font:400 12.5px/1.4 var(--font-family)}@media(pointer:coarse){.fly-select__option{min-block-size:44px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlySelectComponent, decorators: [{
             type: Component,
@@ -11047,7 +11115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         class: 'fly-select',
                         '[class.fly-select--open]': 'isOpen()',
                         '[class.fly-select--disabled]': 'effectiveDisabled()',
-                    }, template: "<!-- \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\u2500\u2500 -->\r\n<button\r\n  #triggerRef\r\n  type=\"button\"\r\n  [id]=\"triggerId\"\r\n  class=\"fly-select__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() || null\"\r\n  [class.fly-select__trigger--placeholder]=\"!hasSelection()\"\r\n  [disabled]=\"effectiveDisabled()\"\r\n  (click)=\"toggleOpen()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  <span class=\"fly-select__trigger-label\">{{ triggerLabel() }}</span>\r\n\r\n  @if (clearable() && hasSelection() && !effectiveDisabled()) {\r\n    <span\r\n      class=\"fly-select__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-select__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\u2500\u2500 -->\r\n<!-- Portaled to <body> by the component (see class docblock) \u2014 position: fixed, computed from\r\n     the trigger. [style.*] bindings null out the unused axis (top XOR bottom, left XOR right)\r\n     rather than leaving a stale 0, which is what lets the flip-above / RTL cases each win\r\n     outright instead of fighting a leftover declaration from the other branch. -->\r\n@if (isOpen()) {\r\n  <div\r\n    #panelRef\r\n    class=\"fly-select__panel\"\r\n    [class.fly-select__panel--flip]=\"panelPosition()?.flipAbove\"\r\n    [style.top.px]=\"panelPosition()?.top\"\r\n    [style.bottom.px]=\"panelPosition()?.bottom\"\r\n    [style.left.px]=\"panelPosition()?.left\"\r\n    [style.right.px]=\"panelPosition()?.right\"\r\n    [style.min-width.px]=\"panelPosition()?.minWidth\"\r\n    [style.max-height.px]=\"panelPosition()?.maxHeight\"\r\n    tabindex=\"-1\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @if (searchable()) {\r\n      <div class=\"fly-select__search\">\r\n        <input\r\n          #searchRef\r\n          type=\"text\"\r\n          class=\"fly-select__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\r\n    @if (multiple() && showSelectAll() && navigableOptions().length > 0) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-select__select-all\"\r\n        (click)=\"toggleSelectAll()\"\r\n      >\r\n        {{ allVisibleSelected() ? deselectAllText() : selectAllText() }}\r\n      </button>\r\n    }\r\n\r\n    <div\r\n      class=\"fly-select__listbox\"\r\n      role=\"listbox\"\r\n      [id]=\"listboxId\"\r\n      [attr.tabindex]=\"searchable() ? null : 0\"\r\n      [attr.aria-multiselectable]=\"multiple() ? true : null\"\r\n      [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n    >\r\n      @for (group of renderGroups(); track group.key) {\r\n        @if (group.key !== null) {\r\n          <div class=\"fly-select__group-label\" role=\"presentation\">{{ group.key }}</div>\r\n        }\r\n        @for (opt of group.options; track opt.value) {\r\n          <div\r\n            class=\"fly-select__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [id]=\"opt.disabled ? null : optionId(navIndexOf(opt.value))\"\r\n            [attr.aria-selected]=\"isSelected(opt.value)\"\r\n            [attr.aria-disabled]=\"opt.disabled ? true : null\"\r\n            [class.fly-select__option--selected]=\"isSelected(opt.value)\"\r\n            [class.fly-select__option--active]=\"!opt.disabled && navIndexOf(opt.value) === activeNavIndex()\"\r\n            [class.fly-select__option--disabled]=\"opt.disabled\"\r\n            (click)=\"onOptionClick(opt)\"\r\n            (keydown.enter)=\"onOptionClick(opt)\"\r\n            (mouseenter)=\"onOptionHover(navIndexOf(opt.value))\"\r\n          >\r\n            @if (multiple()) {\r\n              <span class=\"fly-select__checkbox\" aria-hidden=\"true\">\r\n                @if (isSelected(opt.value)) { <span class=\"fly-select__checkbox-tick\">\u2713</span> }\r\n              </span>\r\n            } @else {\r\n              <span class=\"fly-select__check\" aria-hidden=\"true\">\r\n                @if (isSelected(opt.value)) { \u2713 }\r\n              </span>\r\n            }\r\n            <span class=\"fly-select__option-label\">{{ opt.label }}</span>\r\n          </div>\r\n        }\r\n      }\r\n\r\n      @if (filteredOptions().length === 0) {\r\n        <div class=\"fly-select__empty\" role=\"presentation\">{{ noResultsText() }}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after,.fly-select__panel,.fly-select__panel *,.fly-select__panel *:before,.fly-select__panel *:after{box-sizing:border-box}:host{display:inline-block;inline-size:100%;min-inline-size:12rem}.fly-select__trigger{display:flex;align-items:center;gap:8px;inline-size:100%;block-size:36px;padding-inline:11px;border:1px solid var(--w14);border-radius:10px;background:var(--w05);color:var(--w85);font:500 13px/1.3 var(--font-family);text-align:start;cursor:pointer;transition:border-color var(--nova-duration-hover) var(--nova-ease-micro),background var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__trigger:hover:not(:disabled){background:var(--w07)}.fly-select__trigger:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:inherit}.fly-select__trigger:disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed}:host(.fly-select--open) .fly-select__trigger{border-color:var(--accent);background:var(--w08)}.fly-select__trigger--placeholder .fly-select__trigger-label{color:var(--w42)}.fly-select__trigger-label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-select__clear{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;inline-size:18px;block-size:18px;border-radius:50%;color:var(--w42);font-size:11px;line-height:1;cursor:pointer;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__clear:hover{background:var(--w1);color:var(--w85)}.fly-select__chevron{flex:0 0 auto;color:var(--w45);font-size:10px;transition:transform .22s var(--nova-ease-structural)}:host(.fly-select--open) .fly-select__chevron{transform:rotate(180deg)}@media(pointer:coarse){.fly-select__trigger{min-block-size:44px}.fly-select__clear{inline-size:24px;block-size:24px}}.fly-select__panel{position:fixed;z-index:1000;display:flex;flex-direction:column;inline-size:max-content;max-inline-size:min(420px,90vw);overflow:hidden;padding:6px;border-radius:14px;animation:menuIn .24s var(--nova-ease-structural) both;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-a),var(--mat-menu-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){.fly-select__panel{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-select__panel:before,.fly-select__panel:after{display:none}}@media(prefers-contrast:more){.fly-select__panel{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-select__panel:after{animation:none}}.fly-select__search{padding:6px;border-block-end:1px solid var(--w08)}.fly-select__search-input{inline-size:100%;block-size:30px;padding-inline:9px;border:1px solid var(--w14);border-radius:8px;background:var(--w05);color:var(--w85);font:500 13px/1.3 var(--font-family)}.fly-select__search-input::placeholder{color:var(--w42)}.fly-select__search-input:focus-visible{outline:none;border-color:var(--accent);background:var(--w07)}.fly-select__select-all{display:block;inline-size:100%;padding:7px 9px;border:0;border-block-end:1px solid var(--w08);background:transparent;color:var(--accent);font:600 12.5px/1.3 var(--font-family);text-align:start;cursor:pointer}.fly-select__select-all:hover{background:var(--w1)}.fly-select__listbox{flex:1 1 auto;min-block-size:0;overflow-y:auto;padding-block:4px}.fly-select__listbox:focus-visible{outline:none}.fly-select__group-label{padding:6px 9px 2px;color:var(--w42);font:var(--nova-font-eyebrow);letter-spacing:var(--nova-tracking-eyebrow);text-transform:uppercase}.fly-select__option{display:flex;align-items:center;gap:8px;min-block-size:32px;padding:7px 9px;border-radius:8px;color:var(--w85);font:500 13px/1.3 var(--font-family);cursor:pointer;transition:background var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__option--active{background:var(--w1)}.fly-select__option--selected{background:var(--w08);font-weight:600}.fly-select__option--selected.fly-select__option--active{background:var(--w08);box-shadow:inset 0 0 0 1px var(--accent)}.fly-select__option--disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed;pointer-events:none}.fly-select__option-label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-select__check{flex:0 0 auto;inline-size:16px;color:var(--accent);font-size:14px;font-weight:600;text-align:center}.fly-select__checkbox{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;inline-size:16px;block-size:16px;border:1.5px solid var(--w22);border-radius:4px;transition:background var(--nova-duration-hover) var(--nova-ease-micro),border-color var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__option--selected .fly-select__checkbox{background:var(--accent);border-color:var(--accent)}.fly-select__checkbox-tick{color:var(--on-accent);font-size:10px;line-height:1}.fly-select__empty{padding:16px 9px;text-align:center;color:var(--w42);font:400 12.5px/1.4 var(--font-family)}@media(pointer:coarse){.fly-select__option{min-block-size:44px}}\n"] }]
+                    }, template: "<!-- \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\u2500\u2500 -->\r\n<button\r\n  #triggerRef\r\n  type=\"button\"\r\n  [id]=\"triggerId\"\r\n  class=\"fly-select__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() || null\"\r\n  [class.fly-select__trigger--placeholder]=\"!hasSelection()\"\r\n  [disabled]=\"effectiveDisabled()\"\r\n  (click)=\"toggleOpen()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  <span class=\"fly-select__trigger-label\">{{ triggerLabel() }}</span>\r\n\r\n  @if (clearable() && hasSelection() && !effectiveDisabled()) {\r\n    <span\r\n      class=\"fly-select__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-select__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\u2500\u2500 -->\r\n<!-- Portaled to <body> by the component (see class docblock) \u2014 position: fixed, computed from\r\n     the trigger. [style.*] bindings null out the unused axis (top XOR bottom, left XOR right)\r\n     rather than leaving a stale 0, which is what lets the flip-above / RTL cases each win\r\n     outright instead of fighting a leftover declaration from the other branch. -->\r\n@if (isOpen()) {\r\n  <div\r\n    #panelRef\r\n    class=\"fly-select__panel\"\r\n    [class.fly-select__panel--flip]=\"panelPosition()?.flipAbove\"\r\n    [style.top.px]=\"panelPosition()?.top\"\r\n    [style.bottom.px]=\"panelPosition()?.bottom\"\r\n    [style.left.px]=\"panelPosition()?.left\"\r\n    [style.right.px]=\"panelPosition()?.right\"\r\n    [style.min-width.px]=\"panelPosition()?.minWidth\"\r\n    [style.max-height.px]=\"panelPosition()?.maxHeight\"\r\n    tabindex=\"-1\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @if (searchable()) {\r\n      <div class=\"fly-select__search\">\r\n        <input\r\n          #searchRef\r\n          type=\"text\"\r\n          class=\"fly-select__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\r\n    @if (multiple() && showSelectAll() && navigableOptions().length > 0) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-select__select-all\"\r\n        (click)=\"toggleSelectAll()\"\r\n      >\r\n        {{ allVisibleSelected() ? deselectAllText() : selectAllText() }}\r\n      </button>\r\n    }\r\n\r\n    <div\r\n      class=\"fly-select__listbox\"\r\n      role=\"listbox\"\r\n      [id]=\"listboxId\"\r\n      [attr.tabindex]=\"searchable() ? null : 0\"\r\n      [attr.aria-multiselectable]=\"multiple() ? true : null\"\r\n      [attr.aria-activedescendant]=\"activeDescendant() || null\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n    >\r\n      @for (group of renderGroups(); track group.key) {\r\n        @if (group.key !== null) {\r\n          <div class=\"fly-select__group-label\" role=\"presentation\">{{ group.key }}</div>\r\n        }\r\n        @for (opt of group.options; track opt.value) {\r\n          <div\r\n            class=\"fly-select__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [id]=\"opt.disabled ? null : optionId(navIndexOf(opt.value))\"\r\n            [attr.aria-selected]=\"isSelected(opt.value)\"\r\n            [attr.aria-disabled]=\"opt.disabled ? true : null\"\r\n            [class.fly-select__option--selected]=\"isSelected(opt.value)\"\r\n            [class.fly-select__option--active]=\"!opt.disabled && navIndexOf(opt.value) === activeNavIndex()\"\r\n            [class.fly-select__option--disabled]=\"opt.disabled\"\r\n            (click)=\"onOptionClick(opt)\"\r\n            (keydown.enter)=\"onOptionClick(opt)\"\r\n            (mouseenter)=\"onOptionHover(navIndexOf(opt.value))\"\r\n          >\r\n            @if (multiple()) {\r\n              <span class=\"fly-select__checkbox\" aria-hidden=\"true\">\r\n                @if (isSelected(opt.value)) { <span class=\"fly-select__checkbox-tick\">\u2713</span> }\r\n              </span>\r\n            } @else {\r\n              <span class=\"fly-select__check\" aria-hidden=\"true\">\r\n                @if (isSelected(opt.value)) { \u2713 }\r\n              </span>\r\n            }\r\n            <span class=\"fly-select__option-label\">{{ opt.label }}</span>\r\n          </div>\r\n        }\r\n      }\r\n\r\n      @if (filteredOptions().length === 0) {\r\n        <div class=\"fly-select__empty\" role=\"presentation\">{{ noResultsText() }}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after,.fly-select__panel,.fly-select__panel *,.fly-select__panel *:before,.fly-select__panel *:after{box-sizing:border-box}:host{display:inline-block;inline-size:100%;min-inline-size:12rem}.fly-select__trigger{display:flex;align-items:center;gap:8px;inline-size:100%;block-size:36px;padding-inline:11px;border:1px solid var(--w14);border-radius:10px;background:var(--w05);color:var(--w85);font:500 13px/1.3 var(--font-family);text-align:start;cursor:pointer;transition:border-color var(--nova-duration-hover) var(--nova-ease-micro),background var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__trigger:hover:not(:disabled){background:var(--w07)}.fly-select__trigger:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:inherit}.fly-select__trigger:disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed}:host(.fly-select--open) .fly-select__trigger{border-color:var(--accent);background:var(--w08)}.fly-select__trigger--placeholder .fly-select__trigger-label{color:var(--w42)}.fly-select__trigger-label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-select__clear{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;inline-size:18px;block-size:18px;border-radius:50%;color:var(--w42);font-size:11px;line-height:1;cursor:pointer;transition:background var(--nova-duration-hover) var(--nova-ease-micro),color var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__clear:hover{background:var(--w1);color:var(--w85)}.fly-select__chevron{flex:0 0 auto;color:var(--w45);font-size:10px;transition:transform .22s var(--nova-ease-structural)}:host(.fly-select--open) .fly-select__chevron{transform:rotate(180deg)}@media(pointer:coarse){.fly-select__trigger{min-block-size:44px}.fly-select__clear{inline-size:24px;block-size:24px}}.fly-select__panel{position:fixed;z-index:1000;display:flex;flex-direction:column;inline-size:max-content;max-inline-size:min(420px,90vw);overflow:hidden;padding:6px;border-radius:14px;animation:menuIn .24s var(--nova-ease-structural) both;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-a),var(--mat-menu-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){.fly-select__panel{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-select__panel:before,.fly-select__panel:after{display:none}}@media(prefers-contrast:more){.fly-select__panel{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-select__panel:after{animation:none}}.fly-select__search{padding:6px;border-block-end:1px solid var(--w08)}.fly-select__search-input{inline-size:100%;block-size:30px;padding-inline:9px;border:1px solid var(--w14);border-radius:8px;background:var(--w05);color:var(--w85);font:500 13px/1.3 var(--font-family)}.fly-select__search-input::placeholder{color:var(--w42)}.fly-select__search-input:focus-visible{outline:none;border-color:var(--accent);background:var(--w07)}.fly-select__select-all{display:block;inline-size:100%;padding:7px 9px;border:0;border-block-end:1px solid var(--w08);background:transparent;color:var(--accent);font:600 12.5px/1.3 var(--font-family);text-align:start;cursor:pointer}.fly-select__select-all:hover{background:var(--w1)}.fly-select__listbox{flex:1 1 auto;min-block-size:0;overflow-y:auto;padding-block:4px}.fly-select__listbox:focus-visible{outline:none}.fly-select__group-label{padding:6px 9px 2px;color:var(--w5);font:var(--nova-font-eyebrow);letter-spacing:var(--nova-tracking-eyebrow);text-transform:uppercase}.fly-select__option{display:flex;align-items:center;gap:8px;min-block-size:32px;padding:7px 9px;border-radius:8px;color:var(--w85);font:500 13px/1.3 var(--font-family);cursor:pointer;transition:background var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__option--active{background:var(--w1)}.fly-select__option--selected{background:var(--w08);font-weight:600}.fly-select__option--selected.fly-select__option--active{background:var(--w08);box-shadow:inset 0 0 0 1px var(--accent)}.fly-select__option--disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed;pointer-events:none}.fly-select__option-label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fly-select__check{flex:0 0 auto;inline-size:16px;color:var(--accent);font-size:14px;font-weight:600;text-align:center}.fly-select__checkbox{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;inline-size:16px;block-size:16px;border:1.5px solid var(--w22);border-radius:4px;transition:background var(--nova-duration-hover) var(--nova-ease-micro),border-color var(--nova-duration-hover) var(--nova-ease-micro)}.fly-select__option--selected .fly-select__checkbox{background:var(--accent);border-color:var(--accent)}.fly-select__checkbox-tick{color:var(--on-accent);font-size:10px;line-height:1}.fly-select__empty{padding:16px 9px;text-align:center;color:var(--w42);font:400 12.5px/1.4 var(--font-family)}@media(pointer:coarse){.fly-select__option{min-block-size:44px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsLabel", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], deselectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deselectAllLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], summaryFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryFormatter", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], searchEl: [{
                 type: ViewChild,
                 args: ['searchRef']
@@ -16544,13 +16612,13 @@ class FlyMagicActionsComponent {
         this.isOverflowing.set(!!el && el.scrollWidth - el.clientWidth > 1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyMagicActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyMagicActionsComponent, isStandalone: true, selector: "fly-magic-actions", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.dir": "i18n.direction()" } }, viewQueries: [{ propertyName: "rowRef", first: true, predicate: ["row"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Icon-only buttons carry the accessible name via [attr.aria-label] \u2014 the SVG\r\n  glyph itself is aria-hidden (decorative, skill \u00A7accessibility rule 5). `kind:\r\n  'text'` actions rely on their own visible text instead. Disabled rows stay\r\n  `aria-disabled` (never native `disabled`) so they remain focusable/hoverable \u2014\r\n  a disabled action's whole point is to explain ITSELF via the auto-suffixed\r\n  tooltip, which native `disabled` would suppress.\r\n\r\n  The glyph is composed from ALLOWLISTED nodes bound as real attributes, never\r\n  from `[innerHTML]`: `iconPath` is publisher-supplied, and an `<svg>` fragment\r\n  is not a closed world (`<foreignObject>` is an HTML integration point, `<a\r\n  xlink:href=\"javascript:\u2026\">` is live under the very click this button invites).\r\n  `magic-actions-icon.ts` carries the full rationale; the shape below is its\r\n  consequence \u2014 an attribute binding cannot introduce an element or a handler,\r\n  so there is nothing left to sanitize.\r\n\r\n  That block is authored ONCE, as `#actionButton`, and stamped by every place a\r\n  contributed action is painted (group items and `primary`). It used to be\r\n  inline in the group loop, which was fine while this component rendered groups\r\n  only; with `primary` here too, a second copy would mean the next edit to the\r\n  SECURITY-CRITICAL binding shape has to be made twice and can be made once.\r\n-->\r\n<ng-template #actionButton let-projected>\r\n  <!--\r\n    `let-projected` is `any` \u2014 Angular infers nothing for an `ngTemplateOutlet`\r\n    context, and there is no built-in way to declare one. `asAction` is an\r\n    identity function whose only job is to give this block a TYPED local, so\r\n    every read below (`.kind`, `.disabled`, `.menu`) is checked by the template\r\n    compiler instead of silently resolving to `undefined` on a typo. Without it\r\n    the one place a `MagicBarActionView` is actually painted would be the one\r\n    place its shape is not verified.\r\n  -->\r\n  @let action = asAction(projected);\r\n  @if (action.kind === 'text') {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fma-btn fma-btn--text\"\r\n      [attr.data-tone]=\"toneAttr(action)\"\r\n      [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\r\n      [attr.aria-pressed]=\"pressedAttr(action)\"\r\n      [flyTooltip]=\"tooltipFor(action)\"\r\n      [flyTooltipDelay]=\"450\"\r\n      (click)=\"activate(action, $event)\"\r\n    >{{ resolvedLabel(action) }}</button>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fma-btn\"\r\n      [class.fma-btn--badge]=\"hasBadge(action)\"\r\n      [attr.data-tone]=\"toneAttr(action)\"\r\n      [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\r\n      [attr.aria-pressed]=\"pressedAttr(action)\"\r\n      [attr.aria-haspopup]=\"action.menu ? 'menu' : null\"\r\n      [attr.aria-expanded]=\"action.menu ? (openMenuActionId() === action.id ? 'true' : 'false') : null\"\r\n      [attr.aria-label]=\"action.menu ? triggerAriaLabel(action) : resolvedLabel(action)\"\r\n      [flyTooltip]=\"tooltipFor(action)\"\r\n      [flyTooltipDelay]=\"450\"\r\n      (click)=\"activate(action, $event)\"\r\n    >\r\n      <svg\r\n        class=\"fma-btn__icon\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.8\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        @for (node of iconNodes(action); track $index) {\r\n          @switch (node.tag) {\r\n            @case ('path') {\r\n              <svg:path\r\n                [attr.d]=\"node.attrs['d']\"\r\n                [attr.fill-rule]=\"node.attrs['fill-rule']\"\r\n                [attr.clip-rule]=\"node.attrs['clip-rule']\"\r\n              />\r\n            }\r\n            @case ('circle') {\r\n              <svg:circle\r\n                [attr.cx]=\"node.attrs['cx']\"\r\n                [attr.cy]=\"node.attrs['cy']\"\r\n                [attr.r]=\"node.attrs['r']\"\r\n              />\r\n            }\r\n            @case ('rect') {\r\n              <svg:rect\r\n                [attr.x]=\"node.attrs['x']\"\r\n                [attr.y]=\"node.attrs['y']\"\r\n                [attr.width]=\"node.attrs['width']\"\r\n                [attr.height]=\"node.attrs['height']\"\r\n                [attr.rx]=\"node.attrs['rx']\"\r\n                [attr.ry]=\"node.attrs['ry']\"\r\n              />\r\n            }\r\n            @case ('ellipse') {\r\n              <svg:ellipse\r\n                [attr.cx]=\"node.attrs['cx']\"\r\n                [attr.cy]=\"node.attrs['cy']\"\r\n                [attr.rx]=\"node.attrs['rx']\"\r\n                [attr.ry]=\"node.attrs['ry']\"\r\n              />\r\n            }\r\n            @case ('line') {\r\n              <svg:line\r\n                [attr.x1]=\"node.attrs['x1']\"\r\n                [attr.y1]=\"node.attrs['y1']\"\r\n                [attr.x2]=\"node.attrs['x2']\"\r\n                [attr.y2]=\"node.attrs['y2']\"\r\n              />\r\n            }\r\n            @case ('polyline') {\r\n              <svg:polyline [attr.points]=\"node.attrs['points']\" />\r\n            }\r\n            @case ('polygon') {\r\n              <svg:polygon [attr.points]=\"node.attrs['points']\" />\r\n            }\r\n          }\r\n        }\r\n      </svg>\r\n      @if (hasBadge(action)) {\r\n        <span class=\"fma-btn__badge\" aria-hidden=\"true\"></span>\r\n      }\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<!--\r\n  `.fma` is the SCROLLING row and holds the contributed groups only. The accent\r\n  CTA is a SIBLING of it, outside the fade mask and outside the scroll container,\r\n  because it is the row's anchor \u2014 a call to action that dissolves into a\r\n  gradient, or that you have to scroll sideways to reach, inverts the affordance.\r\n  It is also what makes `isOverflowing` measurable at all: see the component.\r\n-->\r\n@if (groups().length) {\r\n  <div #row class=\"fma\" [class.fma--overflow]=\"isOverflowing()\">\r\n    @for (group of groups(); track group.id) {\r\n      <div\r\n        class=\"fma-group\"\r\n        [class.fma-group--framed]=\"group.framed\"\r\n        role=\"group\"\r\n        [attr.aria-label]=\"i18n.t(group.labelKey)\"\r\n      >\r\n        @for (action of group.items; track action.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"actionButton\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n          />\r\n        }\r\n      </div>\r\n      @if (group.framed) {\r\n        <span class=\"fma-sep\" aria-hidden=\"true\"></span>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  The accent CTA. The disc is a WRAPPER, not a modifier on the button, and that\r\n  is load-bearing rather than cosmetic: `.fma-btn`'s hover/press feedback is an\r\n  `animation` (`iconWiggle` / `iconBounce`), and an animation that touches\r\n  `transform` beats a declared `transform` \u2014 so a hover lift authored on the\r\n  button itself would simply never render. The wrapper owns the disc, the lift\r\n  and the shadow; the button stays transparent and keeps the DS's own toolbar\r\n  feedback. It re-points `--chrome-ink` rather than styling `.fma-btn` through a\r\n  descendant selector so the glyph colour inherits the way custom properties do.\r\n-->\r\n@if (primary(); as p) {\r\n  <span class=\"fma-primary\" [class.fma-primary--disabled]=\"p.disabled\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"actionButton\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: p }\"\r\n    />\r\n  </span>\r\n}\r\n\r\n<!--\r\n  ONE radio menu, hoisted out of the group loops (S1-review F9). Only one is open\r\n  at a time (`openMenuActionId`), so a single instance is enough \u2014 and rendering\r\n  it beside its button would insert a non-`.fma-btn` element into the group,\r\n  silently shifting every later button's `:nth-child` index and with it the\r\n  `toolbarPopIn` stagger delay the `.fma-btn` rule assigns. Keeping every\r\n  staggered parent's children homogeneous is what makes that rule's comment true.\r\n  It portals itself to <body>, so its position is unaffected by where it is\r\n  declared.\r\n-->\r\n@if (openAction(); as open) {\r\n  <fly-context-menu\r\n    [anchor]=\"menuAnchorEl()\"\r\n    [sections]=\"menuSections(open)\"\r\n    (action)=\"onMenuAction(open, $event)\"\r\n    (closed)=\"closeMenu()\"\r\n  />\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:8px;min-inline-size:0}.fma{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-inline-size:0;overflow:hidden;flex-wrap:nowrap}.fma--overflow{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%)}.fma--overflow::-webkit-scrollbar{display:none}:host([dir=rtl]) .fma--overflow{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent 100%)}.fma-group{display:flex;align-items:center;gap:8px;flex:none}.fma-group--framed{gap:2px}.fma-sep{flex:0 0 auto;inline-size:1px;block-size:18px;background:var(--w14)}.fma-btn{position:relative;flex:0 0 auto;inline-size:30px;block-size:30px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--chrome-ink);cursor:pointer;padding:0;animation:toolbarPopIn .3s var(--nova-ease-structural) both}.fma-btn:nth-child(1){animation-delay:0ms}.fma-btn:nth-child(2){animation-delay:40ms}.fma-btn:nth-child(3){animation-delay:80ms}.fma-btn:nth-child(4){animation-delay:.12s}.fma-btn:nth-child(5){animation-delay:.16s}.fma-btn:nth-child(6){animation-delay:.2s}.fma-btn:nth-child(7){animation-delay:.24s}.fma-btn:nth-child(8){animation-delay:.28s}.fma-btn:nth-child(9){animation-delay:.32s}.fma-btn:nth-child(10){animation-delay:.36s}.fma-btn:nth-child(11){animation-delay:.4s}.fma-btn:nth-child(12){animation-delay:.44s}.fma-btn:nth-child(n+13){animation-delay:.44s}.fma-btn:not([aria-disabled=true]):hover{background:var(--w1);color:var(--chrome-ink-hover);animation:iconWiggle .5s ease}.fma-btn:not([aria-disabled=true]):active{animation:iconBounce .38s var(--nova-ease-overshoot)}.fma-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:inherit}.fma-btn[data-tone=danger]{color:var(--sys-red)}.fma-btn[data-tone=danger]:not([aria-disabled=true]):hover{background:color-mix(in oklab,var(--sys-red) 18%,transparent);color:var(--sys-red)}.fma-btn[data-tone=success]{color:var(--sys-green)}.fma-btn[data-tone=success]:not([aria-disabled=true]):hover{background:color-mix(in oklab,var(--sys-green) 18%,transparent);color:var(--sys-green)}.fma-btn[aria-pressed=true]{background:var(--tint-sel);color:var(--chrome-ink-hover)}.fma-btn[aria-pressed=true][data-tone=success]{background:color-mix(in oklab,var(--sys-green) 22%,transparent);color:var(--sys-green)}.fma-btn[aria-disabled=true]{opacity:.38;filter:saturate(.6);animation:none;cursor:default}.fma-btn__icon{inline-size:16px;block-size:16px;pointer-events:none}.fma-btn__badge{position:absolute;inset-block-start:3px;inset-inline-end:3px;inline-size:7px;block-size:7px;border-radius:50%;background:var(--accent);pointer-events:none}.fma-primary{--chrome-ink: var(--on-accent);--chrome-ink-hover: var(--on-accent);flex:none;display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:50%;background:var(--accent);transition:box-shadow var(--nova-duration-hover) var(--nova-ease-micro),transform var(--nova-duration-hover) var(--nova-ease-micro)}.fma-primary:hover{box-shadow:0 8px 20px var(--tint-sel);transform:translateY(-1px)}.fma-primary--disabled{opacity:.38;filter:saturate(.6)}.fma-primary--disabled:hover{box-shadow:none;transform:none}.fma-btn--text{inline-size:auto;block-size:30px;border-radius:99px;padding-inline:12px;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap}@media(pointer:coarse){.fma-btn,.fma-primary{inline-size:44px;block-size:44px}}\n"], dependencies: [{ kind: "component", type: ContextMenuComponent, selector: "fly-context-menu", inputs: ["x", "y", "anchor", "align", "placement", "sections", "boundary"], outputs: ["action", "closed"] }, { kind: "directive", type: FlyTooltipDirective, selector: "[flyTooltip], [data-tooltip]", inputs: ["flyTooltip", "flyTooltipPlacement", "flyTooltipDisabled", "flyTooltipDelay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyMagicActionsComponent, isStandalone: true, selector: "fly-magic-actions", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.dir": "i18n.direction()" } }, viewQueries: [{ propertyName: "rowRef", first: true, predicate: ["row"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Icon-only buttons carry the accessible name via [attr.aria-label] \u2014 the SVG\r\n  glyph itself is aria-hidden (decorative, skill \u00A7accessibility rule 5). `kind:\r\n  'text'` actions rely on their own visible text instead. Disabled rows stay\r\n  `aria-disabled` (never native `disabled`) so they remain focusable/hoverable \u2014\r\n  a disabled action's whole point is to explain ITSELF via the auto-suffixed\r\n  tooltip, which native `disabled` would suppress.\r\n\r\n  The glyph is composed from ALLOWLISTED nodes bound as real attributes, never\r\n  from `[innerHTML]`: `iconPath` is publisher-supplied, and an `<svg>` fragment\r\n  is not a closed world (`<foreignObject>` is an HTML integration point, `<a\r\n  xlink:href=\"javascript:\u2026\">` is live under the very click this button invites).\r\n  `magic-actions-icon.ts` carries the full rationale; the shape below is its\r\n  consequence \u2014 an attribute binding cannot introduce an element or a handler,\r\n  so there is nothing left to sanitize.\r\n\r\n  That block is authored ONCE, as `#actionButton`, and stamped by every place a\r\n  contributed action is painted (group items and `primary`). It used to be\r\n  inline in the group loop, which was fine while this component rendered groups\r\n  only; with `primary` here too, a second copy would mean the next edit to the\r\n  SECURITY-CRITICAL binding shape has to be made twice and can be made once.\r\n-->\r\n<ng-template #actionButton let-projected>\r\n  <!--\r\n    `let-projected` is `any` \u2014 Angular infers nothing for an `ngTemplateOutlet`\r\n    context, and there is no built-in way to declare one. `asAction` is an\r\n    identity function whose only job is to give this block a TYPED local, so\r\n    every read below (`.kind`, `.disabled`, `.menu`) is checked by the template\r\n    compiler instead of silently resolving to `undefined` on a typo. Without it\r\n    the one place a `MagicBarActionView` is actually painted would be the one\r\n    place its shape is not verified.\r\n  -->\r\n  @let action = asAction(projected);\r\n  @if (action.kind === 'text') {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fma-btn fma-btn--text\"\r\n      [attr.data-tone]=\"toneAttr(action)\"\r\n      [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\r\n      [attr.aria-pressed]=\"pressedAttr(action)\"\r\n      [flyTooltip]=\"tooltipFor(action)\"\r\n      [flyTooltipDelay]=\"450\"\r\n      (click)=\"activate(action, $event)\"\r\n    >{{ resolvedLabel(action) }}</button>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fma-btn\"\r\n      [class.fma-btn--badge]=\"hasBadge(action)\"\r\n      [attr.data-tone]=\"toneAttr(action)\"\r\n      [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\r\n      [attr.aria-pressed]=\"pressedAttr(action)\"\r\n      [attr.aria-haspopup]=\"action.menu ? 'menu' : null\"\r\n      [attr.aria-expanded]=\"action.menu ? (openMenuActionId() === action.id ? 'true' : 'false') : null\"\r\n      [attr.aria-label]=\"action.menu ? triggerAriaLabel(action) : resolvedLabel(action)\"\r\n      [flyTooltip]=\"tooltipFor(action)\"\r\n      [flyTooltipDelay]=\"450\"\r\n      (click)=\"activate(action, $event)\"\r\n    >\r\n      <svg\r\n        class=\"fma-btn__icon\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.8\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        @for (node of iconNodes(action); track $index) {\r\n          @switch (node.tag) {\r\n            @case ('path') {\r\n              <svg:path\r\n                [attr.d]=\"node.attrs['d']\"\r\n                [attr.fill-rule]=\"node.attrs['fill-rule']\"\r\n                [attr.clip-rule]=\"node.attrs['clip-rule']\"\r\n              />\r\n            }\r\n            @case ('circle') {\r\n              <svg:circle\r\n                [attr.cx]=\"node.attrs['cx']\"\r\n                [attr.cy]=\"node.attrs['cy']\"\r\n                [attr.r]=\"node.attrs['r']\"\r\n              />\r\n            }\r\n            @case ('rect') {\r\n              <svg:rect\r\n                [attr.x]=\"node.attrs['x']\"\r\n                [attr.y]=\"node.attrs['y']\"\r\n                [attr.width]=\"node.attrs['width']\"\r\n                [attr.height]=\"node.attrs['height']\"\r\n                [attr.rx]=\"node.attrs['rx']\"\r\n                [attr.ry]=\"node.attrs['ry']\"\r\n              />\r\n            }\r\n            @case ('ellipse') {\r\n              <svg:ellipse\r\n                [attr.cx]=\"node.attrs['cx']\"\r\n                [attr.cy]=\"node.attrs['cy']\"\r\n                [attr.rx]=\"node.attrs['rx']\"\r\n                [attr.ry]=\"node.attrs['ry']\"\r\n              />\r\n            }\r\n            @case ('line') {\r\n              <svg:line\r\n                [attr.x1]=\"node.attrs['x1']\"\r\n                [attr.y1]=\"node.attrs['y1']\"\r\n                [attr.x2]=\"node.attrs['x2']\"\r\n                [attr.y2]=\"node.attrs['y2']\"\r\n              />\r\n            }\r\n            @case ('polyline') {\r\n              <svg:polyline [attr.points]=\"node.attrs['points']\" />\r\n            }\r\n            @case ('polygon') {\r\n              <svg:polygon [attr.points]=\"node.attrs['points']\" />\r\n            }\r\n          }\r\n        }\r\n      </svg>\r\n      @if (hasBadge(action)) {\r\n        <span class=\"fma-btn__badge\" aria-hidden=\"true\"></span>\r\n      }\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<!--\r\n  `.fma` is the SCROLLING row and holds the contributed groups only. The accent\r\n  CTA is a SIBLING of it, outside the fade mask and outside the scroll container,\r\n  because it is the row's anchor \u2014 a call to action that dissolves into a\r\n  gradient, or that you have to scroll sideways to reach, inverts the affordance.\r\n  It is also what makes `isOverflowing` measurable at all: see the component.\r\n-->\r\n@if (groups().length) {\r\n  <div #row class=\"fma\" [class.fma--overflow]=\"isOverflowing()\">\r\n    @for (group of groups(); track group.id) {\r\n      <div\r\n        class=\"fma-group\"\r\n        [class.fma-group--framed]=\"group.framed\"\r\n        role=\"group\"\r\n        [attr.aria-label]=\"i18n.t(group.labelKey)\"\r\n      >\r\n        @for (action of group.items; track action.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"actionButton\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n          />\r\n        }\r\n      </div>\r\n      @if (group.framed) {\r\n        <span class=\"fma-sep\" aria-hidden=\"true\"></span>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  The accent CTA. The disc is a WRAPPER, not a modifier on the button, and that\r\n  is load-bearing rather than cosmetic: `.fma-btn`'s hover/press feedback is an\r\n  `animation` (`iconWiggle` / `iconBounce`), and an animation that touches\r\n  `transform` beats a declared `transform` \u2014 so a hover lift authored on the\r\n  button itself would simply never render. The wrapper owns the disc, the lift\r\n  and the shadow; the button stays transparent and keeps the DS's own toolbar\r\n  feedback. It re-points `--chrome-ink` rather than styling `.fma-btn` through a\r\n  descendant selector so the glyph colour inherits the way custom properties do.\r\n-->\r\n@if (primary(); as p) {\r\n  <span class=\"fma-primary\" [class.fma-primary--disabled]=\"p.disabled\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"actionButton\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: p }\"\r\n    />\r\n  </span>\r\n}\r\n\r\n<!--\r\n  ONE radio menu, hoisted out of the group loops (S1-review F9). Only one is open\r\n  at a time (`openMenuActionId`), so a single instance is enough \u2014 and rendering\r\n  it beside its button would insert a non-`.fma-btn` element into the group,\r\n  silently shifting every later button's `:nth-child` index and with it the\r\n  `toolbarPopIn` stagger delay the `.fma-btn` rule assigns. Keeping every\r\n  staggered parent's children homogeneous is what makes that rule's comment true.\r\n  It portals itself to <body>, so its position is unaffected by where it is\r\n  declared.\r\n-->\r\n@if (openAction(); as open) {\r\n  <fly-context-menu\r\n    [anchor]=\"menuAnchorEl()\"\r\n    [sections]=\"menuSections(open)\"\r\n    (action)=\"onMenuAction(open, $event)\"\r\n    (closed)=\"closeMenu()\"\r\n  />\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:8px;min-inline-size:0}.fma{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-inline-size:0;overflow:hidden;flex-wrap:nowrap}.fma--overflow{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%)}.fma--overflow::-webkit-scrollbar{display:none}:host([dir=rtl]) .fma--overflow{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent 100%)}.fma-group{display:flex;align-items:center;gap:8px;flex:none}.fma-group--framed{gap:2px}.fma-sep{flex:0 0 auto;inline-size:1px;block-size:18px;background:var(--w14)}.fma-btn{position:relative;flex:0 0 auto;inline-size:30px;block-size:30px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--chrome-ink);cursor:pointer;padding:0;animation:toolbarPopIn .3s var(--nova-ease-structural) both}.fma-btn:nth-child(1){animation-delay:0ms}.fma-btn:nth-child(2){animation-delay:40ms}.fma-btn:nth-child(3){animation-delay:80ms}.fma-btn:nth-child(4){animation-delay:.12s}.fma-btn:nth-child(5){animation-delay:.16s}.fma-btn:nth-child(6){animation-delay:.2s}.fma-btn:nth-child(7){animation-delay:.24s}.fma-btn:nth-child(8){animation-delay:.28s}.fma-btn:nth-child(9){animation-delay:.32s}.fma-btn:nth-child(10){animation-delay:.36s}.fma-btn:nth-child(11){animation-delay:.4s}.fma-btn:nth-child(12){animation-delay:.44s}.fma-btn:nth-child(n+13){animation-delay:.44s}.fma-btn:not([aria-disabled=true]):hover{background:var(--w1);color:var(--chrome-ink-hover);animation:iconWiggle .5s ease}.fma-btn:not([aria-disabled=true]):active{animation:iconBounce .38s var(--nova-ease-overshoot)}.fma-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:inherit}.fma-btn[data-tone=danger]{color:var(--sys-red)}.fma-btn[data-tone=danger]:not([aria-disabled=true]):hover{background:color-mix(in oklab,var(--sys-red) 18%,transparent);color:var(--sys-red)}.fma-btn[data-tone=success]{color:var(--sys-green)}.fma-btn[data-tone=success]:not([aria-disabled=true]):hover{background:color-mix(in oklab,var(--sys-green) 18%,transparent);color:var(--sys-green)}.fma-btn[aria-pressed=true]{background:var(--tint-sel);color:var(--chrome-ink-hover)}.fma-btn[aria-pressed=true][data-tone=success]{background:color-mix(in oklab,var(--sys-green) 22%,transparent);color:var(--sys-green)}.fma-btn[aria-disabled=true]{opacity:.38;filter:saturate(.6);animation:none;cursor:default}.fma-btn__icon{inline-size:16px;block-size:16px;pointer-events:none}.fma-btn__badge{position:absolute;inset-block-start:3px;inset-inline-end:3px;inline-size:7px;block-size:7px;border-radius:50%;background:var(--accent);pointer-events:none}.fma-primary{--chrome-ink: var(--on-accent);--chrome-ink-hover: var(--on-accent);flex:none;display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:50%;background:var(--accent);transition:box-shadow var(--nova-duration-hover) var(--nova-ease-micro),transform var(--nova-duration-hover) var(--nova-ease-micro)}.fma-primary:hover{box-shadow:0 8px 20px var(--tint-sel);transform:translateY(-1px)}.fma-primary--disabled{opacity:.38;filter:saturate(.6)}.fma-primary--disabled:hover{box-shadow:none;transform:none}.fma-btn--text{inline-size:auto;block-size:30px;border-radius:99px;padding-inline:12px;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap}@media(pointer:coarse){.fma-btn{inline-size:44px;block-size:44px}.fma-btn--text{inline-size:auto;min-inline-size:44px}.fma-primary{inline-size:44px;block-size:44px}}\n"], dependencies: [{ kind: "component", type: ContextMenuComponent, selector: "fly-context-menu", inputs: ["x", "y", "anchor", "align", "placement", "sections", "boundary"], outputs: ["action", "closed"] }, { kind: "directive", type: FlyTooltipDirective, selector: "[flyTooltip], [data-tooltip]", inputs: ["flyTooltip", "flyTooltipPlacement", "flyTooltipDisabled", "flyTooltipDelay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyMagicActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fly-magic-actions', standalone: true, imports: [ContextMenuComponent, FlyTooltipDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.dir]': 'i18n.direction()',
-                    }, template: "<!--\r\n  Icon-only buttons carry the accessible name via [attr.aria-label] \u2014 the SVG\r\n  glyph itself is aria-hidden (decorative, skill \u00A7accessibility rule 5). `kind:\r\n  'text'` actions rely on their own visible text instead. Disabled rows stay\r\n  `aria-disabled` (never native `disabled`) so they remain focusable/hoverable \u2014\r\n  a disabled action's whole point is to explain ITSELF via the auto-suffixed\r\n  tooltip, which native `disabled` would suppress.\r\n\r\n  The glyph is composed from ALLOWLISTED nodes bound as real attributes, never\r\n  from `[innerHTML]`: `iconPath` is publisher-supplied, and an `<svg>` fragment\r\n  is not a closed world (`<foreignObject>` is an HTML integration point, `<a\r\n  xlink:href=\"javascript:\u2026\">` is live under the very click this button invites).\r\n  `magic-actions-icon.ts` carries the full rationale; the shape below is its\r\n  consequence \u2014 an attribute binding cannot introduce an element or a handler,\r\n  so there is nothing left to sanitize.\r\n\r\n  That block is authored ONCE, as `#actionButton`, and stamped by every place a\r\n  contributed action is painted (group items and `primary`). It used to be\r\n  inline in the group loop, which was fine while this component rendered groups\r\n  only; with `primary` here too, a second copy would mean the next edit to the\r\n  SECURITY-CRITICAL binding shape has to be made twice and can be made once.\r\n-->\r\n<ng-template #actionButton let-projected>\r\n  <!--\r\n    `let-projected` is `any` \u2014 Angular infers nothing for an `ngTemplateOutlet`\r\n    context, and there is no built-in way to declare one. `asAction` is an\r\n    identity function whose only job is to give this block a TYPED local, so\r\n    every read below (`.kind`, `.disabled`, `.menu`) is checked by the template\r\n    compiler instead of silently resolving to `undefined` on a typo. Without it\r\n    the one place a `MagicBarActionView` is actually painted would be the one\r\n    place its shape is not verified.\r\n  -->\r\n  @let action = asAction(projected);\r\n  @if (action.kind === 'text') {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fma-btn fma-btn--text\"\r\n      [attr.data-tone]=\"toneAttr(action)\"\r\n      [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\r\n      [attr.aria-pressed]=\"pressedAttr(action)\"\r\n      [flyTooltip]=\"tooltipFor(action)\"\r\n      [flyTooltipDelay]=\"450\"\r\n      (click)=\"activate(action, $event)\"\r\n    >{{ resolvedLabel(action) }}</button>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fma-btn\"\r\n      [class.fma-btn--badge]=\"hasBadge(action)\"\r\n      [attr.data-tone]=\"toneAttr(action)\"\r\n      [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\r\n      [attr.aria-pressed]=\"pressedAttr(action)\"\r\n      [attr.aria-haspopup]=\"action.menu ? 'menu' : null\"\r\n      [attr.aria-expanded]=\"action.menu ? (openMenuActionId() === action.id ? 'true' : 'false') : null\"\r\n      [attr.aria-label]=\"action.menu ? triggerAriaLabel(action) : resolvedLabel(action)\"\r\n      [flyTooltip]=\"tooltipFor(action)\"\r\n      [flyTooltipDelay]=\"450\"\r\n      (click)=\"activate(action, $event)\"\r\n    >\r\n      <svg\r\n        class=\"fma-btn__icon\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.8\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        @for (node of iconNodes(action); track $index) {\r\n          @switch (node.tag) {\r\n            @case ('path') {\r\n              <svg:path\r\n                [attr.d]=\"node.attrs['d']\"\r\n                [attr.fill-rule]=\"node.attrs['fill-rule']\"\r\n                [attr.clip-rule]=\"node.attrs['clip-rule']\"\r\n              />\r\n            }\r\n            @case ('circle') {\r\n              <svg:circle\r\n                [attr.cx]=\"node.attrs['cx']\"\r\n                [attr.cy]=\"node.attrs['cy']\"\r\n                [attr.r]=\"node.attrs['r']\"\r\n              />\r\n            }\r\n            @case ('rect') {\r\n              <svg:rect\r\n                [attr.x]=\"node.attrs['x']\"\r\n                [attr.y]=\"node.attrs['y']\"\r\n                [attr.width]=\"node.attrs['width']\"\r\n                [attr.height]=\"node.attrs['height']\"\r\n                [attr.rx]=\"node.attrs['rx']\"\r\n                [attr.ry]=\"node.attrs['ry']\"\r\n              />\r\n            }\r\n            @case ('ellipse') {\r\n              <svg:ellipse\r\n                [attr.cx]=\"node.attrs['cx']\"\r\n                [attr.cy]=\"node.attrs['cy']\"\r\n                [attr.rx]=\"node.attrs['rx']\"\r\n                [attr.ry]=\"node.attrs['ry']\"\r\n              />\r\n            }\r\n            @case ('line') {\r\n              <svg:line\r\n                [attr.x1]=\"node.attrs['x1']\"\r\n                [attr.y1]=\"node.attrs['y1']\"\r\n                [attr.x2]=\"node.attrs['x2']\"\r\n                [attr.y2]=\"node.attrs['y2']\"\r\n              />\r\n            }\r\n            @case ('polyline') {\r\n              <svg:polyline [attr.points]=\"node.attrs['points']\" />\r\n            }\r\n            @case ('polygon') {\r\n              <svg:polygon [attr.points]=\"node.attrs['points']\" />\r\n            }\r\n          }\r\n        }\r\n      </svg>\r\n      @if (hasBadge(action)) {\r\n        <span class=\"fma-btn__badge\" aria-hidden=\"true\"></span>\r\n      }\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<!--\r\n  `.fma` is the SCROLLING row and holds the contributed groups only. The accent\r\n  CTA is a SIBLING of it, outside the fade mask and outside the scroll container,\r\n  because it is the row's anchor \u2014 a call to action that dissolves into a\r\n  gradient, or that you have to scroll sideways to reach, inverts the affordance.\r\n  It is also what makes `isOverflowing` measurable at all: see the component.\r\n-->\r\n@if (groups().length) {\r\n  <div #row class=\"fma\" [class.fma--overflow]=\"isOverflowing()\">\r\n    @for (group of groups(); track group.id) {\r\n      <div\r\n        class=\"fma-group\"\r\n        [class.fma-group--framed]=\"group.framed\"\r\n        role=\"group\"\r\n        [attr.aria-label]=\"i18n.t(group.labelKey)\"\r\n      >\r\n        @for (action of group.items; track action.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"actionButton\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n          />\r\n        }\r\n      </div>\r\n      @if (group.framed) {\r\n        <span class=\"fma-sep\" aria-hidden=\"true\"></span>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  The accent CTA. The disc is a WRAPPER, not a modifier on the button, and that\r\n  is load-bearing rather than cosmetic: `.fma-btn`'s hover/press feedback is an\r\n  `animation` (`iconWiggle` / `iconBounce`), and an animation that touches\r\n  `transform` beats a declared `transform` \u2014 so a hover lift authored on the\r\n  button itself would simply never render. The wrapper owns the disc, the lift\r\n  and the shadow; the button stays transparent and keeps the DS's own toolbar\r\n  feedback. It re-points `--chrome-ink` rather than styling `.fma-btn` through a\r\n  descendant selector so the glyph colour inherits the way custom properties do.\r\n-->\r\n@if (primary(); as p) {\r\n  <span class=\"fma-primary\" [class.fma-primary--disabled]=\"p.disabled\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"actionButton\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: p }\"\r\n    />\r\n  </span>\r\n}\r\n\r\n<!--\r\n  ONE radio menu, hoisted out of the group loops (S1-review F9). Only one is open\r\n  at a time (`openMenuActionId`), so a single instance is enough \u2014 and rendering\r\n  it beside its button would insert a non-`.fma-btn` element into the group,\r\n  silently shifting every later button's `:nth-child` index and with it the\r\n  `toolbarPopIn` stagger delay the `.fma-btn` rule assigns. Keeping every\r\n  staggered parent's children homogeneous is what makes that rule's comment true.\r\n  It portals itself to <body>, so its position is unaffected by where it is\r\n  declared.\r\n-->\r\n@if (openAction(); as open) {\r\n  <fly-context-menu\r\n    [anchor]=\"menuAnchorEl()\"\r\n    [sections]=\"menuSections(open)\"\r\n    (action)=\"onMenuAction(open, $event)\"\r\n    (closed)=\"closeMenu()\"\r\n  />\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:8px;min-inline-size:0}.fma{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-inline-size:0;overflow:hidden;flex-wrap:nowrap}.fma--overflow{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%)}.fma--overflow::-webkit-scrollbar{display:none}:host([dir=rtl]) .fma--overflow{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent 100%)}.fma-group{display:flex;align-items:center;gap:8px;flex:none}.fma-group--framed{gap:2px}.fma-sep{flex:0 0 auto;inline-size:1px;block-size:18px;background:var(--w14)}.fma-btn{position:relative;flex:0 0 auto;inline-size:30px;block-size:30px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--chrome-ink);cursor:pointer;padding:0;animation:toolbarPopIn .3s var(--nova-ease-structural) both}.fma-btn:nth-child(1){animation-delay:0ms}.fma-btn:nth-child(2){animation-delay:40ms}.fma-btn:nth-child(3){animation-delay:80ms}.fma-btn:nth-child(4){animation-delay:.12s}.fma-btn:nth-child(5){animation-delay:.16s}.fma-btn:nth-child(6){animation-delay:.2s}.fma-btn:nth-child(7){animation-delay:.24s}.fma-btn:nth-child(8){animation-delay:.28s}.fma-btn:nth-child(9){animation-delay:.32s}.fma-btn:nth-child(10){animation-delay:.36s}.fma-btn:nth-child(11){animation-delay:.4s}.fma-btn:nth-child(12){animation-delay:.44s}.fma-btn:nth-child(n+13){animation-delay:.44s}.fma-btn:not([aria-disabled=true]):hover{background:var(--w1);color:var(--chrome-ink-hover);animation:iconWiggle .5s ease}.fma-btn:not([aria-disabled=true]):active{animation:iconBounce .38s var(--nova-ease-overshoot)}.fma-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:inherit}.fma-btn[data-tone=danger]{color:var(--sys-red)}.fma-btn[data-tone=danger]:not([aria-disabled=true]):hover{background:color-mix(in oklab,var(--sys-red) 18%,transparent);color:var(--sys-red)}.fma-btn[data-tone=success]{color:var(--sys-green)}.fma-btn[data-tone=success]:not([aria-disabled=true]):hover{background:color-mix(in oklab,var(--sys-green) 18%,transparent);color:var(--sys-green)}.fma-btn[aria-pressed=true]{background:var(--tint-sel);color:var(--chrome-ink-hover)}.fma-btn[aria-pressed=true][data-tone=success]{background:color-mix(in oklab,var(--sys-green) 22%,transparent);color:var(--sys-green)}.fma-btn[aria-disabled=true]{opacity:.38;filter:saturate(.6);animation:none;cursor:default}.fma-btn__icon{inline-size:16px;block-size:16px;pointer-events:none}.fma-btn__badge{position:absolute;inset-block-start:3px;inset-inline-end:3px;inline-size:7px;block-size:7px;border-radius:50%;background:var(--accent);pointer-events:none}.fma-primary{--chrome-ink: var(--on-accent);--chrome-ink-hover: var(--on-accent);flex:none;display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:50%;background:var(--accent);transition:box-shadow var(--nova-duration-hover) var(--nova-ease-micro),transform var(--nova-duration-hover) var(--nova-ease-micro)}.fma-primary:hover{box-shadow:0 8px 20px var(--tint-sel);transform:translateY(-1px)}.fma-primary--disabled{opacity:.38;filter:saturate(.6)}.fma-primary--disabled:hover{box-shadow:none;transform:none}.fma-btn--text{inline-size:auto;block-size:30px;border-radius:99px;padding-inline:12px;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap}@media(pointer:coarse){.fma-btn,.fma-primary{inline-size:44px;block-size:44px}}\n"] }]
+                    }, template: "<!--\r\n  Icon-only buttons carry the accessible name via [attr.aria-label] \u2014 the SVG\r\n  glyph itself is aria-hidden (decorative, skill \u00A7accessibility rule 5). `kind:\r\n  'text'` actions rely on their own visible text instead. Disabled rows stay\r\n  `aria-disabled` (never native `disabled`) so they remain focusable/hoverable \u2014\r\n  a disabled action's whole point is to explain ITSELF via the auto-suffixed\r\n  tooltip, which native `disabled` would suppress.\r\n\r\n  The glyph is composed from ALLOWLISTED nodes bound as real attributes, never\r\n  from `[innerHTML]`: `iconPath` is publisher-supplied, and an `<svg>` fragment\r\n  is not a closed world (`<foreignObject>` is an HTML integration point, `<a\r\n  xlink:href=\"javascript:\u2026\">` is live under the very click this button invites).\r\n  `magic-actions-icon.ts` carries the full rationale; the shape below is its\r\n  consequence \u2014 an attribute binding cannot introduce an element or a handler,\r\n  so there is nothing left to sanitize.\r\n\r\n  That block is authored ONCE, as `#actionButton`, and stamped by every place a\r\n  contributed action is painted (group items and `primary`). It used to be\r\n  inline in the group loop, which was fine while this component rendered groups\r\n  only; with `primary` here too, a second copy would mean the next edit to the\r\n  SECURITY-CRITICAL binding shape has to be made twice and can be made once.\r\n-->\r\n<ng-template #actionButton let-projected>\r\n  <!--\r\n    `let-projected` is `any` \u2014 Angular infers nothing for an `ngTemplateOutlet`\r\n    context, and there is no built-in way to declare one. `asAction` is an\r\n    identity function whose only job is to give this block a TYPED local, so\r\n    every read below (`.kind`, `.disabled`, `.menu`) is checked by the template\r\n    compiler instead of silently resolving to `undefined` on a typo. Without it\r\n    the one place a `MagicBarActionView` is actually painted would be the one\r\n    place its shape is not verified.\r\n  -->\r\n  @let action = asAction(projected);\r\n  @if (action.kind === 'text') {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fma-btn fma-btn--text\"\r\n      [attr.data-tone]=\"toneAttr(action)\"\r\n      [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\r\n      [attr.aria-pressed]=\"pressedAttr(action)\"\r\n      [flyTooltip]=\"tooltipFor(action)\"\r\n      [flyTooltipDelay]=\"450\"\r\n      (click)=\"activate(action, $event)\"\r\n    >{{ resolvedLabel(action) }}</button>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fma-btn\"\r\n      [class.fma-btn--badge]=\"hasBadge(action)\"\r\n      [attr.data-tone]=\"toneAttr(action)\"\r\n      [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\r\n      [attr.aria-pressed]=\"pressedAttr(action)\"\r\n      [attr.aria-haspopup]=\"action.menu ? 'menu' : null\"\r\n      [attr.aria-expanded]=\"action.menu ? (openMenuActionId() === action.id ? 'true' : 'false') : null\"\r\n      [attr.aria-label]=\"action.menu ? triggerAriaLabel(action) : resolvedLabel(action)\"\r\n      [flyTooltip]=\"tooltipFor(action)\"\r\n      [flyTooltipDelay]=\"450\"\r\n      (click)=\"activate(action, $event)\"\r\n    >\r\n      <svg\r\n        class=\"fma-btn__icon\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"1.8\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        @for (node of iconNodes(action); track $index) {\r\n          @switch (node.tag) {\r\n            @case ('path') {\r\n              <svg:path\r\n                [attr.d]=\"node.attrs['d']\"\r\n                [attr.fill-rule]=\"node.attrs['fill-rule']\"\r\n                [attr.clip-rule]=\"node.attrs['clip-rule']\"\r\n              />\r\n            }\r\n            @case ('circle') {\r\n              <svg:circle\r\n                [attr.cx]=\"node.attrs['cx']\"\r\n                [attr.cy]=\"node.attrs['cy']\"\r\n                [attr.r]=\"node.attrs['r']\"\r\n              />\r\n            }\r\n            @case ('rect') {\r\n              <svg:rect\r\n                [attr.x]=\"node.attrs['x']\"\r\n                [attr.y]=\"node.attrs['y']\"\r\n                [attr.width]=\"node.attrs['width']\"\r\n                [attr.height]=\"node.attrs['height']\"\r\n                [attr.rx]=\"node.attrs['rx']\"\r\n                [attr.ry]=\"node.attrs['ry']\"\r\n              />\r\n            }\r\n            @case ('ellipse') {\r\n              <svg:ellipse\r\n                [attr.cx]=\"node.attrs['cx']\"\r\n                [attr.cy]=\"node.attrs['cy']\"\r\n                [attr.rx]=\"node.attrs['rx']\"\r\n                [attr.ry]=\"node.attrs['ry']\"\r\n              />\r\n            }\r\n            @case ('line') {\r\n              <svg:line\r\n                [attr.x1]=\"node.attrs['x1']\"\r\n                [attr.y1]=\"node.attrs['y1']\"\r\n                [attr.x2]=\"node.attrs['x2']\"\r\n                [attr.y2]=\"node.attrs['y2']\"\r\n              />\r\n            }\r\n            @case ('polyline') {\r\n              <svg:polyline [attr.points]=\"node.attrs['points']\" />\r\n            }\r\n            @case ('polygon') {\r\n              <svg:polygon [attr.points]=\"node.attrs['points']\" />\r\n            }\r\n          }\r\n        }\r\n      </svg>\r\n      @if (hasBadge(action)) {\r\n        <span class=\"fma-btn__badge\" aria-hidden=\"true\"></span>\r\n      }\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<!--\r\n  `.fma` is the SCROLLING row and holds the contributed groups only. The accent\r\n  CTA is a SIBLING of it, outside the fade mask and outside the scroll container,\r\n  because it is the row's anchor \u2014 a call to action that dissolves into a\r\n  gradient, or that you have to scroll sideways to reach, inverts the affordance.\r\n  It is also what makes `isOverflowing` measurable at all: see the component.\r\n-->\r\n@if (groups().length) {\r\n  <div #row class=\"fma\" [class.fma--overflow]=\"isOverflowing()\">\r\n    @for (group of groups(); track group.id) {\r\n      <div\r\n        class=\"fma-group\"\r\n        [class.fma-group--framed]=\"group.framed\"\r\n        role=\"group\"\r\n        [attr.aria-label]=\"i18n.t(group.labelKey)\"\r\n      >\r\n        @for (action of group.items; track action.id) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"actionButton\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n          />\r\n        }\r\n      </div>\r\n      @if (group.framed) {\r\n        <span class=\"fma-sep\" aria-hidden=\"true\"></span>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  The accent CTA. The disc is a WRAPPER, not a modifier on the button, and that\r\n  is load-bearing rather than cosmetic: `.fma-btn`'s hover/press feedback is an\r\n  `animation` (`iconWiggle` / `iconBounce`), and an animation that touches\r\n  `transform` beats a declared `transform` \u2014 so a hover lift authored on the\r\n  button itself would simply never render. The wrapper owns the disc, the lift\r\n  and the shadow; the button stays transparent and keeps the DS's own toolbar\r\n  feedback. It re-points `--chrome-ink` rather than styling `.fma-btn` through a\r\n  descendant selector so the glyph colour inherits the way custom properties do.\r\n-->\r\n@if (primary(); as p) {\r\n  <span class=\"fma-primary\" [class.fma-primary--disabled]=\"p.disabled\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"actionButton\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: p }\"\r\n    />\r\n  </span>\r\n}\r\n\r\n<!--\r\n  ONE radio menu, hoisted out of the group loops (S1-review F9). Only one is open\r\n  at a time (`openMenuActionId`), so a single instance is enough \u2014 and rendering\r\n  it beside its button would insert a non-`.fma-btn` element into the group,\r\n  silently shifting every later button's `:nth-child` index and with it the\r\n  `toolbarPopIn` stagger delay the `.fma-btn` rule assigns. Keeping every\r\n  staggered parent's children homogeneous is what makes that rule's comment true.\r\n  It portals itself to <body>, so its position is unaffected by where it is\r\n  declared.\r\n-->\r\n@if (openAction(); as open) {\r\n  <fly-context-menu\r\n    [anchor]=\"menuAnchorEl()\"\r\n    [sections]=\"menuSections(open)\"\r\n    (action)=\"onMenuAction(open, $event)\"\r\n    (closed)=\"closeMenu()\"\r\n  />\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:8px;min-inline-size:0}.fma{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-inline-size:0;overflow:hidden;flex-wrap:nowrap}.fma--overflow{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%)}.fma--overflow::-webkit-scrollbar{display:none}:host([dir=rtl]) .fma--overflow{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent 100%)}.fma-group{display:flex;align-items:center;gap:8px;flex:none}.fma-group--framed{gap:2px}.fma-sep{flex:0 0 auto;inline-size:1px;block-size:18px;background:var(--w14)}.fma-btn{position:relative;flex:0 0 auto;inline-size:30px;block-size:30px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--chrome-ink);cursor:pointer;padding:0;animation:toolbarPopIn .3s var(--nova-ease-structural) both}.fma-btn:nth-child(1){animation-delay:0ms}.fma-btn:nth-child(2){animation-delay:40ms}.fma-btn:nth-child(3){animation-delay:80ms}.fma-btn:nth-child(4){animation-delay:.12s}.fma-btn:nth-child(5){animation-delay:.16s}.fma-btn:nth-child(6){animation-delay:.2s}.fma-btn:nth-child(7){animation-delay:.24s}.fma-btn:nth-child(8){animation-delay:.28s}.fma-btn:nth-child(9){animation-delay:.32s}.fma-btn:nth-child(10){animation-delay:.36s}.fma-btn:nth-child(11){animation-delay:.4s}.fma-btn:nth-child(12){animation-delay:.44s}.fma-btn:nth-child(n+13){animation-delay:.44s}.fma-btn:not([aria-disabled=true]):hover{background:var(--w1);color:var(--chrome-ink-hover);animation:iconWiggle .5s ease}.fma-btn:not([aria-disabled=true]):active{animation:iconBounce .38s var(--nova-ease-overshoot)}.fma-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:inherit}.fma-btn[data-tone=danger]{color:var(--sys-red)}.fma-btn[data-tone=danger]:not([aria-disabled=true]):hover{background:color-mix(in oklab,var(--sys-red) 18%,transparent);color:var(--sys-red)}.fma-btn[data-tone=success]{color:var(--sys-green)}.fma-btn[data-tone=success]:not([aria-disabled=true]):hover{background:color-mix(in oklab,var(--sys-green) 18%,transparent);color:var(--sys-green)}.fma-btn[aria-pressed=true]{background:var(--tint-sel);color:var(--chrome-ink-hover)}.fma-btn[aria-pressed=true][data-tone=success]{background:color-mix(in oklab,var(--sys-green) 22%,transparent);color:var(--sys-green)}.fma-btn[aria-disabled=true]{opacity:.38;filter:saturate(.6);animation:none;cursor:default}.fma-btn__icon{inline-size:16px;block-size:16px;pointer-events:none}.fma-btn__badge{position:absolute;inset-block-start:3px;inset-inline-end:3px;inline-size:7px;block-size:7px;border-radius:50%;background:var(--accent);pointer-events:none}.fma-primary{--chrome-ink: var(--on-accent);--chrome-ink-hover: var(--on-accent);flex:none;display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:50%;background:var(--accent);transition:box-shadow var(--nova-duration-hover) var(--nova-ease-micro),transform var(--nova-duration-hover) var(--nova-ease-micro)}.fma-primary:hover{box-shadow:0 8px 20px var(--tint-sel);transform:translateY(-1px)}.fma-primary--disabled{opacity:.38;filter:saturate(.6)}.fma-primary--disabled:hover{box-shadow:none;transform:none}.fma-btn--text{inline-size:auto;block-size:30px;border-radius:99px;padding-inline:12px;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap}@media(pointer:coarse){.fma-btn{inline-size:44px;block-size:44px}.fma-btn--text{inline-size:auto;min-inline-size:44px}.fma-primary{inline-size:44px;block-size:44px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], rowRef: [{ type: i0.ViewChild, args: ['row', { isSignal: true }] }] } });
 
 /**
@@ -16621,6 +16689,13 @@ const ORIGINAL_SAME_CONVENTION = {
     assignRobot: '<rect x="4" y="8" width="16" height="11" rx="3"/><path d="M12 8V4"/><circle cx="12" cy="3" r="1.2"/><path d="M8 13v2M16 13v2"/>',
     /** Task-detail "Add subtask". */
     addSubtask: '<path d="M9 6h11M9 12h11M9 18h7"/><path d="M4 6h.01M4 12h.01"/><path d="M4.5 16h3M6 14.5v3"/>',
+    /**
+     * Calendar magic-bar "View" trigger (S4.2) — a 4-cell grid standing in for the
+     * year/month/week/day/agenda mode switcher behind it. No standalone glyph for
+     * this exists in the UX drop's curated set (`today`/`settings` cover Today and
+     * the settings gear, not the mode switcher).
+     */
+    calendarView: '<rect x="3.5" y="3.5" width="17" height="17" rx="2.5"/><path d="M3.5 12h17M12 3.5v17"/>',
 };
 /**
  * The full curated table. Publishers reference it by name
@@ -18447,11 +18522,11 @@ class FlyPeoplePickerComponent {
         this.selectionChange.emit(this._selected().map((o) => o.id));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyPeoplePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyPeoplePickerComponent, isStandalone: true, selector: "fly-people-picker", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, excludeIds: { classPropertyName: "excludeIds", publicName: "excludeIds", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "fly-people-picker" }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: FlyTypeaheadComponent, descendants: true }], ngImport: i0, template: "@if (selected().length > 0) {\n  <ul class=\"fly-people-picker__chips\" role=\"list\">\n    @for (o of selected(); track o.id) {\n      <li class=\"fly-people-picker__chip\" role=\"listitem\">\n        <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\n          @if (o.avatarUrl) {\n            <img [src]=\"o.avatarUrl\" alt=\"\" />\n          } @else {\n            <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\n          }\n        </span>\n        <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\n        <button\n          type=\"button\"\n          class=\"fly-people-picker__chip-remove\"\n          [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\n          (click)=\"remove(o.id)\">\n          \u2715\n        </button>\n      </li>\n    }\n  </ul>\n}\n\n@if (showSearch()) {\n  <fly-typeahead\n    [searchFn]=\"typeaheadSearchFn\"\n    [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\n    [allowFreeText]=\"false\"\n    (selected)=\"onPicked($event)\" />\n} @else {\n  <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\n    {{ 'people_picker.change' | translate }}\n  </button>\n}\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FlyTypeaheadComponent, selector: "fly-typeahead", inputs: ["searchFn", "debounceMs", "placeholder", "ariaLabel", "value", "allowFreeText", "openOnFocus"], outputs: ["valueChange", "selected", "cleared"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyPeoplePickerComponent, isStandalone: true, selector: "fly-people-picker", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, excludeIds: { classPropertyName: "excludeIds", publicName: "excludeIds", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "fly-people-picker" }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: FlyTypeaheadComponent, descendants: true }], ngImport: i0, template: "@if (selected().length > 0) {\r\n  <ul class=\"fly-people-picker__chips\" role=\"list\">\r\n    @for (o of selected(); track o.id) {\r\n      <li class=\"fly-people-picker__chip\" role=\"listitem\">\r\n        <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\r\n          @if (o.avatarUrl) {\r\n            <img [src]=\"o.avatarUrl\" alt=\"\" />\r\n          } @else {\r\n            <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\r\n          }\r\n        </span>\r\n        <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-people-picker__chip-remove\"\r\n          [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\r\n          (click)=\"remove(o.id)\">\r\n          \u2715\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n\r\n@if (showSearch()) {\r\n  <fly-typeahead\r\n    [searchFn]=\"typeaheadSearchFn\"\r\n    [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\r\n    [allowFreeText]=\"false\"\r\n    (selected)=\"onPicked($event)\" />\r\n} @else {\r\n  <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\r\n    {{ 'people_picker.change' | translate }}\r\n  </button>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FlyTypeaheadComponent, selector: "fly-typeahead", inputs: ["searchFn", "debounceMs", "placeholder", "ariaLabel", "value", "allowFreeText", "openOnFocus"], outputs: ["valueChange", "selected", "cleared"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyPeoplePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-people-picker', standalone: true, imports: [CommonModule, TranslatePipe, FlyTypeaheadComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fly-people-picker' }, template: "@if (selected().length > 0) {\n  <ul class=\"fly-people-picker__chips\" role=\"list\">\n    @for (o of selected(); track o.id) {\n      <li class=\"fly-people-picker__chip\" role=\"listitem\">\n        <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\n          @if (o.avatarUrl) {\n            <img [src]=\"o.avatarUrl\" alt=\"\" />\n          } @else {\n            <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\n          }\n        </span>\n        <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\n        <button\n          type=\"button\"\n          class=\"fly-people-picker__chip-remove\"\n          [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\n          (click)=\"remove(o.id)\">\n          \u2715\n        </button>\n      </li>\n    }\n  </ul>\n}\n\n@if (showSearch()) {\n  <fly-typeahead\n    [searchFn]=\"typeaheadSearchFn\"\n    [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\n    [allowFreeText]=\"false\"\n    (selected)=\"onPicked($event)\" />\n} @else {\n  <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\n    {{ 'people_picker.change' | translate }}\n  </button>\n}\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"] }]
+            args: [{ selector: 'fly-people-picker', standalone: true, imports: [CommonModule, TranslatePipe, FlyTypeaheadComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fly-people-picker' }, template: "@if (selected().length > 0) {\r\n  <ul class=\"fly-people-picker__chips\" role=\"list\">\r\n    @for (o of selected(); track o.id) {\r\n      <li class=\"fly-people-picker__chip\" role=\"listitem\">\r\n        <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\r\n          @if (o.avatarUrl) {\r\n            <img [src]=\"o.avatarUrl\" alt=\"\" />\r\n          } @else {\r\n            <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\r\n          }\r\n        </span>\r\n        <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-people-picker__chip-remove\"\r\n          [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\r\n          (click)=\"remove(o.id)\">\r\n          \u2715\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n\r\n@if (showSearch()) {\r\n  <fly-typeahead\r\n    [searchFn]=\"typeaheadSearchFn\"\r\n    [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\r\n    [allowFreeText]=\"false\"\r\n    (selected)=\"onPicked($event)\" />\r\n} @else {\r\n  <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\r\n    {{ 'people_picker.change' | translate }}\r\n  </button>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], excludeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeIds", required: false }] }], initialSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], typeahead: [{
                 type: ViewChild,
                 args: [FlyTypeaheadComponent]
@@ -20295,7 +20370,7 @@ class FlyStateMessageComponent {
       </button>
     }
     <ng-content />
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:48px;color:var(--ink-3);font-size:var(--text-lg)}.msg__icon{font-size:var(--text-lg)}.msg__text{margin:0}:host([data-kind=empty]){padding:56px 24px;gap:11px}:host([data-kind=empty]) .msg__icon{display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:16px;background:var(--w07);border:1px solid var(--w12);color:var(--w45);font-size:21px}:host([data-kind=empty]) .msg__text{font:600 14px/1.3 var(--font-sans);color:var(--w8)}.msg__note{margin:0;max-inline-size:320px;font:400 12.5px/1.5 var(--font-sans);color:var(--w45);text-wrap:pretty}:host([data-kind=success]) .msg__icon{color:var(--success)}:host([data-kind=warning]) .msg__icon{color:var(--warning)}:host([data-kind=error]){flex-flow:row wrap;justify-content:flex-start;padding:var(--sp-3) var(--sp-4);margin-block-start:var(--sp-3);border-radius:var(--r-lg);background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--ink);font-size:var(--text-base)}:host([data-kind=error]) .msg__icon{color:var(--danger)}.msg__retry{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-family:inherit;font-size:var(--text-base);font-weight:var(--fw-medium);border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;transition:background var(--t-state),border-color var(--t-state),color var(--t-state),box-shadow var(--t-state),filter var(--t-state)}.msg__retry:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.msg__retry:disabled,.msg__retry[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.msg__retry{height:28px;padding-inline:var(--sp-3);font-size:var(--text-sm);background:var(--bg-2);border-color:var(--line);color:var(--ink-2)}.msg__retry:hover{background:var(--bg-3);border-color:var(--line-2);color:var(--ink)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:48px;color:var(--ink-3);font-size:var(--text-lg)}.msg__icon{font-size:var(--text-lg)}.msg__text{margin:0}:host([data-kind=empty]){padding:56px 24px;gap:11px}:host([data-kind=empty]) .msg__icon{display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:16px;background:var(--fill-tertiary);border:1px solid var(--surface-border);color:var(--label-secondary);font-size:21px}:host([data-kind=empty]) .msg__text{font:600 14px/1.3 var(--font-sans);color:var(--label-primary)}.msg__note{margin:0;max-inline-size:320px;font:400 12.5px/1.5 var(--font-sans);color:var(--label-secondary);text-wrap:pretty}:host([data-kind=success]) .msg__icon{color:var(--success)}:host([data-kind=warning]) .msg__icon{color:var(--warning)}:host([data-kind=error]){flex-flow:row wrap;justify-content:flex-start;padding:var(--sp-3) var(--sp-4);margin-block-start:var(--sp-3);border-radius:var(--r-lg);background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--ink);font-size:var(--text-base)}:host([data-kind=error]) .msg__icon{color:var(--danger)}.msg__retry{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-family:inherit;font-size:var(--text-base);font-weight:var(--fw-medium);border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;transition:background var(--t-state),border-color var(--t-state),color var(--t-state),box-shadow var(--t-state),filter var(--t-state)}.msg__retry:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.msg__retry:disabled,.msg__retry[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.msg__retry{height:28px;padding-inline:var(--sp-3);font-size:var(--text-sm);background:var(--bg-2);border-color:var(--line);color:var(--ink-2)}.msg__retry:hover{background:var(--bg-3);border-color:var(--line-2);color:var(--ink)}\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: FlyStateMessageComponent, decorators: [{
             type: Component,
@@ -20317,7 +20392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
       </button>
     }
     <ng-content />
-  `, styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:48px;color:var(--ink-3);font-size:var(--text-lg)}.msg__icon{font-size:var(--text-lg)}.msg__text{margin:0}:host([data-kind=empty]){padding:56px 24px;gap:11px}:host([data-kind=empty]) .msg__icon{display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:16px;background:var(--w07);border:1px solid var(--w12);color:var(--w45);font-size:21px}:host([data-kind=empty]) .msg__text{font:600 14px/1.3 var(--font-sans);color:var(--w8)}.msg__note{margin:0;max-inline-size:320px;font:400 12.5px/1.5 var(--font-sans);color:var(--w45);text-wrap:pretty}:host([data-kind=success]) .msg__icon{color:var(--success)}:host([data-kind=warning]) .msg__icon{color:var(--warning)}:host([data-kind=error]){flex-flow:row wrap;justify-content:flex-start;padding:var(--sp-3) var(--sp-4);margin-block-start:var(--sp-3);border-radius:var(--r-lg);background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--ink);font-size:var(--text-base)}:host([data-kind=error]) .msg__icon{color:var(--danger)}.msg__retry{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-family:inherit;font-size:var(--text-base);font-weight:var(--fw-medium);border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;transition:background var(--t-state),border-color var(--t-state),color var(--t-state),box-shadow var(--t-state),filter var(--t-state)}.msg__retry:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.msg__retry:disabled,.msg__retry[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.msg__retry{height:28px;padding-inline:var(--sp-3);font-size:var(--text-sm);background:var(--bg-2);border-color:var(--line);color:var(--ink-2)}.msg__retry:hover{background:var(--bg-3);border-color:var(--line-2);color:var(--ink)}\n"] }]
+  `, styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:48px;color:var(--ink-3);font-size:var(--text-lg)}.msg__icon{font-size:var(--text-lg)}.msg__text{margin:0}:host([data-kind=empty]){padding:56px 24px;gap:11px}:host([data-kind=empty]) .msg__icon{display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:16px;background:var(--fill-tertiary);border:1px solid var(--surface-border);color:var(--label-secondary);font-size:21px}:host([data-kind=empty]) .msg__text{font:600 14px/1.3 var(--font-sans);color:var(--label-primary)}.msg__note{margin:0;max-inline-size:320px;font:400 12.5px/1.5 var(--font-sans);color:var(--label-secondary);text-wrap:pretty}:host([data-kind=success]) .msg__icon{color:var(--success)}:host([data-kind=warning]) .msg__icon{color:var(--warning)}:host([data-kind=error]){flex-flow:row wrap;justify-content:flex-start;padding:var(--sp-3) var(--sp-4);margin-block-start:var(--sp-3);border-radius:var(--r-lg);background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--ink);font-size:var(--text-base)}:host([data-kind=error]) .msg__icon{color:var(--danger)}.msg__retry{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-family:inherit;font-size:var(--text-base);font-weight:var(--fw-medium);border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;transition:background var(--t-state),border-color var(--t-state),color var(--t-state),box-shadow var(--t-state),filter var(--t-state)}.msg__retry:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.msg__retry:disabled,.msg__retry[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.msg__retry{height:28px;padding-inline:var(--sp-3);font-size:var(--text-sm);background:var(--bg-2);border-color:var(--line);color:var(--ink-2)}.msg__retry:hover{background:var(--bg-3);border-color:var(--line-2);color:var(--ink)}\n"] }]
         }], propDecorators: { kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], messageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageKey", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], noteKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "noteKey", required: false }] }], retryLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryLabelKey", required: false }] }], showRetry: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRetry", required: false }] }], retried: [{ type: i0.Output, args: ["retried"] }] } });
 
 /** Inline busy indicator — spinner glyph plus optional label. */
@@ -21408,30 +21483,30 @@ class FlyDetailCardComponent {
     /** Drop the body padding — for a child that brings its own list/table chrome. */
     flush = input(false, ...(ngDevMode ? [{ debugName: "flush" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailCardComponent, isStandalone: true, selector: "fly-detail-card", inputs: { titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedTitle: { classPropertyName: "hasProjectedTitle", publicName: "hasProjectedTitle", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (titleKey() || hasProjectedTitle()) {
-      <fly-section-header [titleKey]="titleKey()">
-        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
-        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
-      </fly-section-header>
-    }
-    <div class="dc__body" [class.dc__body--flush]="flush()">
-      <ng-content />
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailCardComponent, isStandalone: true, selector: "fly-detail-card", inputs: { titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedTitle: { classPropertyName: "hasProjectedTitle", publicName: "hasProjectedTitle", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (titleKey() || hasProjectedTitle()) {
+      <fly-section-header [titleKey]="titleKey()">
+        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
+        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
+      </fly-section-header>
+    }
+    <div class="dc__body" [class.dc__body--flush]="flush()">
+      <ng-content />
+    </div>
   `, isInline: true, styles: [":host{display:block;background:var(--bg-2);border:1px solid var(--w08);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;animation:itemIn .3s var(--nova-ease-micro) both}.dc__body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.dc__body--flush{padding:0}\n"], dependencies: [{ kind: "component", type: FlySectionHeaderComponent, selector: "fly-section-header", inputs: ["titleKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-detail-card', standalone: true, imports: [FlySectionHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (titleKey() || hasProjectedTitle()) {
-      <fly-section-header [titleKey]="titleKey()">
-        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
-        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
-      </fly-section-header>
-    }
-    <div class="dc__body" [class.dc__body--flush]="flush()">
-      <ng-content />
-    </div>
+            args: [{ selector: 'fly-detail-card', standalone: true, imports: [FlySectionHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (titleKey() || hasProjectedTitle()) {
+      <fly-section-header [titleKey]="titleKey()">
+        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
+        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
+      </fly-section-header>
+    }
+    <div class="dc__body" [class.dc__body--flush]="flush()">
+      <ng-content />
+    </div>
   `, styles: [":host{display:block;background:var(--bg-2);border:1px solid var(--w08);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;animation:itemIn .3s var(--nova-ease-micro) both}.dc__body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.dc__body--flush{padding:0}\n"] }]
         }], propDecorators: { titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], hasProjectedTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasProjectedTitle", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }] } });
 
@@ -21559,108 +21634,108 @@ class FlyDetailShellComponent {
         buttons?.[next]?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailShellComponent, isStandalone: true, selector: "fly-detail-shell", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sectionsLabelKey: { classPropertyName: "sectionsLabelKey", publicName: "sectionsLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, viewQueries: [{ propertyName: "rail", first: true, predicate: ["rail"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="ds__layout">
-      <aside class="ds__aside">
-        <div class="ds__pinned">
-          <ng-content select="[detail-aside]" />
-        </div>
-
-        @if (sections().length > 0) {
-          <div
-            #rail
-            class="ds__rail"
-            role="tablist"
-            tabindex="-1"
-            [attr.aria-orientation]="'vertical'"
-            [attr.aria-label]="sectionsLabelKey() | translate"
-            (keydown)="onKey($event)"
-          >
-            @for (s of sections(); track s.id) {
-              <button
-                type="button"
-                class="ds__tab"
-                role="tab"
-                [id]="tabId(s.id)"
-                [class.ds__tab--active]="activeId() === s.id"
-                [attr.aria-selected]="activeId() === s.id"
-                [attr.aria-controls]="panelId()"
-                [attr.tabindex]="activeId() === s.id ? 0 : -1"
-                [attr.title]="s.labelKey | translate"
-                (click)="select(s.id)"
-              >
-                @if (s.icon) {
-                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
-                }
-                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
-              </button>
-            }
-          </div>
-        }
-      </aside>
-
-      <div
-        class="ds__panel"
-        [id]="panelId()"
-        [attr.role]="sections().length ? 'tabpanel' : null"
-        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
-      >
-        <ng-content />
-      </div>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailShellComponent, isStandalone: true, selector: "fly-detail-shell", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sectionsLabelKey: { classPropertyName: "sectionsLabelKey", publicName: "sectionsLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, viewQueries: [{ propertyName: "rail", first: true, predicate: ["rail"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="ds__layout">
+      <aside class="ds__aside">
+        <div class="ds__pinned">
+          <ng-content select="[detail-aside]" />
+        </div>
+
+        @if (sections().length > 0) {
+          <div
+            #rail
+            class="ds__rail"
+            role="tablist"
+            tabindex="-1"
+            [attr.aria-orientation]="'vertical'"
+            [attr.aria-label]="sectionsLabelKey() | translate"
+            (keydown)="onKey($event)"
+          >
+            @for (s of sections(); track s.id) {
+              <button
+                type="button"
+                class="ds__tab"
+                role="tab"
+                [id]="tabId(s.id)"
+                [class.ds__tab--active]="activeId() === s.id"
+                [attr.aria-selected]="activeId() === s.id"
+                [attr.aria-controls]="panelId()"
+                [attr.tabindex]="activeId() === s.id ? 0 : -1"
+                [attr.title]="s.labelKey | translate"
+                (click)="select(s.id)"
+              >
+                @if (s.icon) {
+                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
+                }
+                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
+              </button>
+            }
+          </div>
+        }
+      </aside>
+
+      <div
+        class="ds__panel"
+        [id]="panelId()"
+        [attr.role]="sections().length ? 'tabpanel' : null"
+        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
+      >
+        <ng-content />
+      </div>
+    </div>
   `, isInline: true, styles: [":host{display:block;container-type:inline-size}.ds__layout{display:grid;grid-template-columns:var(--fly-detail-aside, 300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}.ds__aside{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__aside .ds__rail{order:-1}.ds__pinned{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;align-self:stretch}.ds__panel>:only-child{flex:1}.ds__rail{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-2);border:1px solid var(--w08);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.ds__tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2);border:0;background:transparent;border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:var(--text-sm);text-align:start;white-space:nowrap;overflow:hidden;transition:background var(--t-state),color var(--t-state)}.ds__tab:hover{background:var(--w06);color:var(--ink)}.ds__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ds__tab--active{background:var(--accent-fill);color:var(--on-accent-fill);font-weight:var(--fw-semibold)}.ds__tab-ico{font-size:var(--text-md);flex-shrink:0;width:20px;text-align:center}.ds__tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@container (width <= 980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-flow:row wrap}.ds__tab{width:auto}}@media(width<=980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-flow:row wrap}.ds__tab{width:auto}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-detail-shell', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="ds__layout">
-      <aside class="ds__aside">
-        <div class="ds__pinned">
-          <ng-content select="[detail-aside]" />
-        </div>
-
-        @if (sections().length > 0) {
-          <div
-            #rail
-            class="ds__rail"
-            role="tablist"
-            tabindex="-1"
-            [attr.aria-orientation]="'vertical'"
-            [attr.aria-label]="sectionsLabelKey() | translate"
-            (keydown)="onKey($event)"
-          >
-            @for (s of sections(); track s.id) {
-              <button
-                type="button"
-                class="ds__tab"
-                role="tab"
-                [id]="tabId(s.id)"
-                [class.ds__tab--active]="activeId() === s.id"
-                [attr.aria-selected]="activeId() === s.id"
-                [attr.aria-controls]="panelId()"
-                [attr.tabindex]="activeId() === s.id ? 0 : -1"
-                [attr.title]="s.labelKey | translate"
-                (click)="select(s.id)"
-              >
-                @if (s.icon) {
-                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
-                }
-                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
-              </button>
-            }
-          </div>
-        }
-      </aside>
-
-      <div
-        class="ds__panel"
-        [id]="panelId()"
-        [attr.role]="sections().length ? 'tabpanel' : null"
-        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
-      >
-        <ng-content />
-      </div>
-    </div>
+            args: [{ selector: 'fly-detail-shell', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ds__layout">
+      <aside class="ds__aside">
+        <div class="ds__pinned">
+          <ng-content select="[detail-aside]" />
+        </div>
+
+        @if (sections().length > 0) {
+          <div
+            #rail
+            class="ds__rail"
+            role="tablist"
+            tabindex="-1"
+            [attr.aria-orientation]="'vertical'"
+            [attr.aria-label]="sectionsLabelKey() | translate"
+            (keydown)="onKey($event)"
+          >
+            @for (s of sections(); track s.id) {
+              <button
+                type="button"
+                class="ds__tab"
+                role="tab"
+                [id]="tabId(s.id)"
+                [class.ds__tab--active]="activeId() === s.id"
+                [attr.aria-selected]="activeId() === s.id"
+                [attr.aria-controls]="panelId()"
+                [attr.tabindex]="activeId() === s.id ? 0 : -1"
+                [attr.title]="s.labelKey | translate"
+                (click)="select(s.id)"
+              >
+                @if (s.icon) {
+                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
+                }
+                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
+              </button>
+            }
+          </div>
+        }
+      </aside>
+
+      <div
+        class="ds__panel"
+        [id]="panelId()"
+        [attr.role]="sections().length ? 'tabpanel' : null"
+        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
+      >
+        <ng-content />
+      </div>
+    </div>
   `, styles: [":host{display:block;container-type:inline-size}.ds__layout{display:grid;grid-template-columns:var(--fly-detail-aside, 300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}.ds__aside{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__aside .ds__rail{order:-1}.ds__pinned{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;align-self:stretch}.ds__panel>:only-child{flex:1}.ds__rail{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-2);border:1px solid var(--w08);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.ds__tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2);border:0;background:transparent;border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:var(--text-sm);text-align:start;white-space:nowrap;overflow:hidden;transition:background var(--t-state),color var(--t-state)}.ds__tab:hover{background:var(--w06);color:var(--ink)}.ds__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ds__tab--active{background:var(--accent-fill);color:var(--on-accent-fill);font-weight:var(--fw-semibold)}.ds__tab-ico{font-size:var(--text-md);flex-shrink:0;width:20px;text-align:center}.ds__tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@container (width <= 980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-flow:row wrap}.ds__tab{width:auto}}@media(width<=980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-flow:row wrap}.ds__tab{width:auto}}\n"] }]
         }], propDecorators: { rail: [{ type: i0.ViewChild, args: ['rail', { isSignal: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], sectionsLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionsLabelKey", required: false }] }] } });
 
@@ -23328,6 +23403,8 @@ function enterActivatesNatively(tagName, inputType = null) {
  * focus is trapped while open and returns to the prior element on close.
  */
 class FlyConfirmDialogComponent {
+    /** Mobile chrome → the full-bleed confirm card. Read by the host class binding. */
+    isMobile = inject(FLY_VIEWPORT_IS_MOBILE);
     open = input.required(...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     kind = input('neutral', ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
     titleKey = input.required(...(ngDevMode ? [{ debugName: "titleKey" }] : /* istanbul ignore next */ []));
@@ -23400,14 +23477,18 @@ class FlyConfirmDialogComponent {
         this.confirmed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyConfirmDialogComponent, isStandalone: true, selector: "fly-confirm-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: true, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null }, confirmLabelKey: { classPropertyName: "confirmLabelKey", publicName: "confirmLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelLabelKey: { classPropertyName: "cancelLabelKey", publicName: "cancelLabelKey", isSignal: true, isRequired: false, transformFunction: null }, requireText: { classPropertyName: "requireText", publicName: "requireText", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, host: { listeners: { "document:keydown.escape": "onEscape()", "document:keydown.enter": "onEnter()" } }, ngImport: i0, template: "@if (open()) {\r\n  <div class=\"cf\" role=\"presentation\">\r\n    <div class=\"cf__scrim\" role=\"presentation\" (click)=\"cancel()\"></div>\r\n    <div\r\n      class=\"cf__panel\"\r\n      [attr.data-kind]=\"kind()\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      cdkTrapFocus\r\n      cdkTrapFocusAutoCapture\r\n      [attr.aria-label]=\"titleKey() | translate\"\r\n    >\r\n      <div class=\"cf__head\">\r\n        <div class=\"cf__icon\" [attr.data-kind]=\"kind()\" aria-hidden=\"true\">\r\n          @switch (kind()) {\r\n            @case ('danger') {\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\"/>\r\n                <path d=\"M12 8v5M12 16h.01\"/>\r\n              </svg>\r\n            }\r\n            @case ('warn') {\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 9v4M12 17h.01\"/>\r\n                <path d=\"M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"/>\r\n              </svg>\r\n            }\r\n            @default {\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\"/>\r\n                <path d=\"M12 8v.01M12 11v5\"/>\r\n              </svg>\r\n            }\r\n          }\r\n        </div>\r\n        <h3 class=\"cf__title\">{{ titleKey() | translate }}</h3>\r\n        <button\r\n          type=\"button\"\r\n          class=\"cf__close\"\r\n          (click)=\"cancel()\"\r\n          [attr.aria-label]=\"'ui.action.close' | translate\"\r\n        >\u00D7</button>\r\n      </div>\r\n\r\n      <div class=\"cf__body\">\r\n        @if (messageKey(); as key) {\r\n          <p class=\"cf__msg\">{{ key | translate }}</p>\r\n        }\r\n        <ng-content />\r\n\r\n        @if (requireText(); as text) {\r\n          <label class=\"cf__gate\">\r\n            <span class=\"cf__gate-l\">{{ 'ui.confirm.typeToConfirm' | translate: { text: text } }}</span>\r\n            <input\r\n              class=\"cf__gate-i mono\"\r\n              [value]=\"typed()\"\r\n              (input)=\"typed.set($any($event.target).value)\"\r\n              [placeholder]=\"text\"\r\n              autocomplete=\"off\"\r\n            />\r\n          </label>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"cf__ft\">\r\n        <button type=\"button\" fly-button (click)=\"cancel()\">\r\n          {{ cancelLabelKey() | translate }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          fly-button\r\n          [variant]=\"kind() === 'danger' ? 'danger-fill' : 'primary'\"\r\n          [loading]=\"busy()\"\r\n          [disabled]=\"!allowConfirm()\"\r\n          (click)=\"confirm()\"\r\n        >\r\n          {{ confirmLabelKey() | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";.cf{position:fixed;inset:0;z-index:var(--z-dialog);display:grid;place-items:center;padding:var(--sp-5)}.cf__scrim{position:absolute;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:cf-scrim-in var(--t-overlay)}@keyframes cf-scrim-in{0%{background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.cf__panel{position:relative;width:min(480px,100%);border-radius:var(--r-lg);display:flex;flex-direction:column;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(var(--mat-panel),var(--mat-panel));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){.cf__panel{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.cf__panel:before,.cf__panel:after{display:none}}@media(prefers-contrast:more){.cf__panel{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.cf__panel:after{animation:none}}.cf__panel{animation:menuIn .24s var(--nova-ease-structural) both}.cf__panel[data-kind=danger]{border-color:var(--danger-line)}.cf__panel[data-kind=warn]{border-color:var(--warning)}.cf__head{display:flex;align-items:flex-start;gap:14px;padding:20px 20px 14px}.cf__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--bg-3);color:var(--ink-2);border:1px solid var(--line)}.cf__icon[data-kind=warn]{background:var(--warning-bg);color:var(--warning-fg);border-color:var(--warning)}.cf__icon[data-kind=danger]{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}.cf__title{flex:1;min-width:0;font-size:var(--text-lg);font-weight:var(--fw-semibold);letter-spacing:-.005em;margin:0;padding-block-start:6px;color:var(--ink);line-height:1.35}.cf__close{width:28px;height:28px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:20px;line-height:1;display:grid;place-items:center;flex-shrink:0;margin-block-start:-4px;margin-inline-end:-4px;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.cf__close:hover{color:var(--ink);background:var(--bg-hover)}.cf__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.cf__body{padding:0 20px 18px;display:flex;flex-direction:column;gap:14px}.cf__msg{font-size:var(--text-md);line-height:1.55;color:var(--ink-2);margin:0}.cf__gate{display:flex;flex-direction:column;gap:6px;padding-block-start:var(--sp-1)}.cf__gate-l{font-size:var(--text-2xs);color:var(--ink-2)}.cf__gate-i{width:100%;box-sizing:border-box;padding:var(--sp-2) var(--sp-3);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);font-family:inherit;font-size:var(--text-base);transition:border-color var(--t-state),background var(--t-state)}.cf__gate-i::placeholder{color:var(--ink-4)}.cf__gate-i:hover{border-color:var(--line-2)}.cf__gate-i:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-1px;border-color:transparent}.cf__gate-i:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-3)}.cf__gate-i{height:32px;padding-block:0;font-size:var(--text-sm)}.cf__gate-i.mono{font-family:var(--font-mono)}.cf__ft{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:12px 16px;border-block-start:1px solid var(--w08);background:var(--w03);border-end-start-radius:var(--r-lg);border-end-end-radius:var(--r-lg)}@media(width<=480px){.cf__head{padding:16px 16px 12px}.cf__body{padding:0 16px 14px}.cf__ft{padding:10px 12px;flex-wrap:wrap}.cf__ft [fly-button]{flex:1 1 auto;justify-content:center}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: FlyConfirmDialogComponent, isStandalone: true, selector: "fly-confirm-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: true, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null }, confirmLabelKey: { classPropertyName: "confirmLabelKey", publicName: "confirmLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelLabelKey: { classPropertyName: "cancelLabelKey", publicName: "cancelLabelKey", isSignal: true, isRequired: false, transformFunction: null }, requireText: { classPropertyName: "requireText", publicName: "requireText", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, host: { listeners: { "document:keydown.escape": "onEscape()", "document:keydown.enter": "onEnter()" }, properties: { "class.fly-confirm-dialog--mobile": "isMobile()" } }, ngImport: i0, template: "@if (open()) {\r\n  <div class=\"cf\" role=\"presentation\">\r\n    <div class=\"cf__scrim\" role=\"presentation\" (click)=\"cancel()\"></div>\r\n    <div\r\n      class=\"cf__panel\"\r\n      [attr.data-kind]=\"kind()\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      cdkTrapFocus\r\n      cdkTrapFocusAutoCapture\r\n      [attr.aria-label]=\"titleKey() | translate\"\r\n    >\r\n      <div class=\"cf__head\">\r\n        <div class=\"cf__icon\" [attr.data-kind]=\"kind()\" aria-hidden=\"true\">\r\n          @switch (kind()) {\r\n            @case ('danger') {\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\"/>\r\n                <path d=\"M12 8v5M12 16h.01\"/>\r\n              </svg>\r\n            }\r\n            @case ('warn') {\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 9v4M12 17h.01\"/>\r\n                <path d=\"M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"/>\r\n              </svg>\r\n            }\r\n            @default {\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\"/>\r\n                <path d=\"M12 8v.01M12 11v5\"/>\r\n              </svg>\r\n            }\r\n          }\r\n        </div>\r\n        <h3 class=\"cf__title\">{{ titleKey() | translate }}</h3>\r\n        <button\r\n          type=\"button\"\r\n          class=\"cf__close\"\r\n          (click)=\"cancel()\"\r\n          [attr.aria-label]=\"'ui.action.close' | translate\"\r\n        >\u00D7</button>\r\n      </div>\r\n\r\n      <div class=\"cf__body\">\r\n        @if (messageKey(); as key) {\r\n          <p class=\"cf__msg\">{{ key | translate }}</p>\r\n        }\r\n        <ng-content />\r\n\r\n        @if (requireText(); as text) {\r\n          <label class=\"cf__gate\">\r\n            <span class=\"cf__gate-l\">{{ 'ui.confirm.typeToConfirm' | translate: { text: text } }}</span>\r\n            <input\r\n              class=\"cf__gate-i mono\"\r\n              [value]=\"typed()\"\r\n              (input)=\"typed.set($any($event.target).value)\"\r\n              [placeholder]=\"text\"\r\n              autocomplete=\"off\"\r\n            />\r\n          </label>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"cf__ft\">\r\n        <button type=\"button\" fly-button (click)=\"cancel()\">\r\n          {{ cancelLabelKey() | translate }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          fly-button\r\n          [variant]=\"kind() === 'danger' ? 'danger-fill' : 'primary'\"\r\n          [loading]=\"busy()\"\r\n          [disabled]=\"!allowConfirm()\"\r\n          (click)=\"confirm()\"\r\n        >\r\n          {{ confirmLabelKey() | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";.cf{position:fixed;inset:0;z-index:var(--z-dialog);display:grid;place-items:center;padding:var(--sp-5)}.cf__scrim{position:absolute;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:cf-scrim-in var(--t-overlay)}@keyframes cf-scrim-in{0%{background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.cf__panel{position:relative;width:min(480px,100%);border-radius:var(--r-lg);display:flex;flex-direction:column;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(var(--mat-panel),var(--mat-panel));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){.cf__panel{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.cf__panel:before,.cf__panel:after{display:none}}@media(prefers-contrast:more){.cf__panel{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.cf__panel:after{animation:none}}.cf__panel{animation:menuIn .24s var(--nova-ease-structural) both}.cf__panel[data-kind=danger]{border-color:var(--danger-line)}.cf__panel[data-kind=warn]{border-color:var(--warning)}.cf__head{display:flex;align-items:flex-start;gap:14px;padding:20px 20px 14px}.cf__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--bg-3);color:var(--ink-2);border:1px solid var(--line)}.cf__icon[data-kind=warn]{background:var(--warning-bg);color:var(--warning-fg);border-color:var(--warning)}.cf__icon[data-kind=danger]{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}.cf__title{flex:1;min-width:0;font-size:var(--text-lg);font-weight:var(--fw-semibold);letter-spacing:-.005em;margin:0;padding-block-start:6px;color:var(--ink);line-height:1.35}.cf__close{width:28px;height:28px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:20px;line-height:1;display:grid;place-items:center;flex-shrink:0;margin-block-start:-4px;margin-inline-end:-4px;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.cf__close:hover{color:var(--ink);background:var(--bg-hover)}.cf__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.cf__body{padding:0 20px 18px;display:flex;flex-direction:column;gap:14px}.cf__msg{font-size:var(--text-md);line-height:1.55;color:var(--ink-2);margin:0}.cf__gate{display:flex;flex-direction:column;gap:6px;padding-block-start:var(--sp-1)}.cf__gate-l{font-size:var(--text-2xs);color:var(--ink-2)}.cf__gate-i{width:100%;box-sizing:border-box;padding:var(--sp-2) var(--sp-3);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);font-family:inherit;font-size:var(--text-base);transition:border-color var(--t-state),background var(--t-state)}.cf__gate-i::placeholder{color:var(--ink-4)}.cf__gate-i:hover{border-color:var(--line-2)}.cf__gate-i:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-1px;border-color:transparent}.cf__gate-i:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-3)}.cf__gate-i{height:32px;padding-block:0;font-size:var(--text-sm)}.cf__gate-i.mono{font-family:var(--font-mono)}.cf__ft{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:12px 16px;border-block-start:1px solid var(--w08);background:var(--w03);border-end-start-radius:var(--r-lg);border-end-end-radius:var(--r-lg)}@media(width<=480px){.cf__head{padding:16px 16px 12px}.cf__body{padding:0 16px 14px}.cf__ft{padding:10px 12px;flex-wrap:wrap}.cf__ft [fly-button]{flex:1 1 auto;justify-content:center}}:host(.fly-confirm-dialog--mobile) .cf{padding:16px}:host(.fly-confirm-dialog--mobile) .cf__panel{inline-size:100%;border-radius:18px}:host(.fly-confirm-dialog--mobile) .cf__ft{flex-wrap:nowrap;border-end-start-radius:18px;border-end-end-radius:18px}:host(.fly-confirm-dialog--mobile) .cf__ft [fly-button]{flex:1 1 0;min-inline-size:0;min-block-size:44px}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: FlyButtonComponent, selector: "button[fly-button], a[fly-button]", inputs: ["variant", "size", "loading"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fly-confirm-dialog', standalone: true, imports: [TranslatePipe, CdkTrapFocus, FlyButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(document:keydown.escape)': 'onEscape()',
                         '(document:keydown.enter)': 'onEnter()',
-                    }, template: "@if (open()) {\r\n  <div class=\"cf\" role=\"presentation\">\r\n    <div class=\"cf__scrim\" role=\"presentation\" (click)=\"cancel()\"></div>\r\n    <div\r\n      class=\"cf__panel\"\r\n      [attr.data-kind]=\"kind()\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      cdkTrapFocus\r\n      cdkTrapFocusAutoCapture\r\n      [attr.aria-label]=\"titleKey() | translate\"\r\n    >\r\n      <div class=\"cf__head\">\r\n        <div class=\"cf__icon\" [attr.data-kind]=\"kind()\" aria-hidden=\"true\">\r\n          @switch (kind()) {\r\n            @case ('danger') {\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\"/>\r\n                <path d=\"M12 8v5M12 16h.01\"/>\r\n              </svg>\r\n            }\r\n            @case ('warn') {\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 9v4M12 17h.01\"/>\r\n                <path d=\"M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"/>\r\n              </svg>\r\n            }\r\n            @default {\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\"/>\r\n                <path d=\"M12 8v.01M12 11v5\"/>\r\n              </svg>\r\n            }\r\n          }\r\n        </div>\r\n        <h3 class=\"cf__title\">{{ titleKey() | translate }}</h3>\r\n        <button\r\n          type=\"button\"\r\n          class=\"cf__close\"\r\n          (click)=\"cancel()\"\r\n          [attr.aria-label]=\"'ui.action.close' | translate\"\r\n        >\u00D7</button>\r\n      </div>\r\n\r\n      <div class=\"cf__body\">\r\n        @if (messageKey(); as key) {\r\n          <p class=\"cf__msg\">{{ key | translate }}</p>\r\n        }\r\n        <ng-content />\r\n\r\n        @if (requireText(); as text) {\r\n          <label class=\"cf__gate\">\r\n            <span class=\"cf__gate-l\">{{ 'ui.confirm.typeToConfirm' | translate: { text: text } }}</span>\r\n            <input\r\n              class=\"cf__gate-i mono\"\r\n              [value]=\"typed()\"\r\n              (input)=\"typed.set($any($event.target).value)\"\r\n              [placeholder]=\"text\"\r\n              autocomplete=\"off\"\r\n            />\r\n          </label>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"cf__ft\">\r\n        <button type=\"button\" fly-button (click)=\"cancel()\">\r\n          {{ cancelLabelKey() | translate }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          fly-button\r\n          [variant]=\"kind() === 'danger' ? 'danger-fill' : 'primary'\"\r\n          [loading]=\"busy()\"\r\n          [disabled]=\"!allowConfirm()\"\r\n          (click)=\"confirm()\"\r\n        >\r\n          {{ confirmLabelKey() | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";.cf{position:fixed;inset:0;z-index:var(--z-dialog);display:grid;place-items:center;padding:var(--sp-5)}.cf__scrim{position:absolute;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:cf-scrim-in var(--t-overlay)}@keyframes cf-scrim-in{0%{background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.cf__panel{position:relative;width:min(480px,100%);border-radius:var(--r-lg);display:flex;flex-direction:column;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(var(--mat-panel),var(--mat-panel));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){.cf__panel{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.cf__panel:before,.cf__panel:after{display:none}}@media(prefers-contrast:more){.cf__panel{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.cf__panel:after{animation:none}}.cf__panel{animation:menuIn .24s var(--nova-ease-structural) both}.cf__panel[data-kind=danger]{border-color:var(--danger-line)}.cf__panel[data-kind=warn]{border-color:var(--warning)}.cf__head{display:flex;align-items:flex-start;gap:14px;padding:20px 20px 14px}.cf__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--bg-3);color:var(--ink-2);border:1px solid var(--line)}.cf__icon[data-kind=warn]{background:var(--warning-bg);color:var(--warning-fg);border-color:var(--warning)}.cf__icon[data-kind=danger]{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}.cf__title{flex:1;min-width:0;font-size:var(--text-lg);font-weight:var(--fw-semibold);letter-spacing:-.005em;margin:0;padding-block-start:6px;color:var(--ink);line-height:1.35}.cf__close{width:28px;height:28px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:20px;line-height:1;display:grid;place-items:center;flex-shrink:0;margin-block-start:-4px;margin-inline-end:-4px;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.cf__close:hover{color:var(--ink);background:var(--bg-hover)}.cf__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.cf__body{padding:0 20px 18px;display:flex;flex-direction:column;gap:14px}.cf__msg{font-size:var(--text-md);line-height:1.55;color:var(--ink-2);margin:0}.cf__gate{display:flex;flex-direction:column;gap:6px;padding-block-start:var(--sp-1)}.cf__gate-l{font-size:var(--text-2xs);color:var(--ink-2)}.cf__gate-i{width:100%;box-sizing:border-box;padding:var(--sp-2) var(--sp-3);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);font-family:inherit;font-size:var(--text-base);transition:border-color var(--t-state),background var(--t-state)}.cf__gate-i::placeholder{color:var(--ink-4)}.cf__gate-i:hover{border-color:var(--line-2)}.cf__gate-i:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-1px;border-color:transparent}.cf__gate-i:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-3)}.cf__gate-i{height:32px;padding-block:0;font-size:var(--text-sm)}.cf__gate-i.mono{font-family:var(--font-mono)}.cf__ft{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:12px 16px;border-block-start:1px solid var(--w08);background:var(--w03);border-end-start-radius:var(--r-lg);border-end-end-radius:var(--r-lg)}@media(width<=480px){.cf__head{padding:16px 16px 12px}.cf__body{padding:0 16px 14px}.cf__ft{padding:10px 12px;flex-wrap:wrap}.cf__ft [fly-button]{flex:1 1 auto;justify-content:center}}\n"] }]
+                        // S5.4's mobile confirm card. Same class-not-media-query mechanism, same
+                        // geometry, as `fly-message-box` — the two confirm surfaces of the platform
+                        // must not diverge on a phone just because one of them has no consumers yet.
+                        '[class.fly-confirm-dialog--mobile]': 'isMobile()',
+                    }, template: "@if (open()) {\r\n  <div class=\"cf\" role=\"presentation\">\r\n    <div class=\"cf__scrim\" role=\"presentation\" (click)=\"cancel()\"></div>\r\n    <div\r\n      class=\"cf__panel\"\r\n      [attr.data-kind]=\"kind()\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      cdkTrapFocus\r\n      cdkTrapFocusAutoCapture\r\n      [attr.aria-label]=\"titleKey() | translate\"\r\n    >\r\n      <div class=\"cf__head\">\r\n        <div class=\"cf__icon\" [attr.data-kind]=\"kind()\" aria-hidden=\"true\">\r\n          @switch (kind()) {\r\n            @case ('danger') {\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\"/>\r\n                <path d=\"M12 8v5M12 16h.01\"/>\r\n              </svg>\r\n            }\r\n            @case ('warn') {\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 9v4M12 17h.01\"/>\r\n                <path d=\"M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"/>\r\n              </svg>\r\n            }\r\n            @default {\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"9\"/>\r\n                <path d=\"M12 8v.01M12 11v5\"/>\r\n              </svg>\r\n            }\r\n          }\r\n        </div>\r\n        <h3 class=\"cf__title\">{{ titleKey() | translate }}</h3>\r\n        <button\r\n          type=\"button\"\r\n          class=\"cf__close\"\r\n          (click)=\"cancel()\"\r\n          [attr.aria-label]=\"'ui.action.close' | translate\"\r\n        >\u00D7</button>\r\n      </div>\r\n\r\n      <div class=\"cf__body\">\r\n        @if (messageKey(); as key) {\r\n          <p class=\"cf__msg\">{{ key | translate }}</p>\r\n        }\r\n        <ng-content />\r\n\r\n        @if (requireText(); as text) {\r\n          <label class=\"cf__gate\">\r\n            <span class=\"cf__gate-l\">{{ 'ui.confirm.typeToConfirm' | translate: { text: text } }}</span>\r\n            <input\r\n              class=\"cf__gate-i mono\"\r\n              [value]=\"typed()\"\r\n              (input)=\"typed.set($any($event.target).value)\"\r\n              [placeholder]=\"text\"\r\n              autocomplete=\"off\"\r\n            />\r\n          </label>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"cf__ft\">\r\n        <button type=\"button\" fly-button (click)=\"cancel()\">\r\n          {{ cancelLabelKey() | translate }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          fly-button\r\n          [variant]=\"kind() === 'danger' ? 'danger-fill' : 'primary'\"\r\n          [loading]=\"busy()\"\r\n          [disabled]=\"!allowConfirm()\"\r\n          (click)=\"confirm()\"\r\n        >\r\n          {{ confirmLabelKey() | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";.cf{position:fixed;inset:0;z-index:var(--z-dialog);display:grid;place-items:center;padding:var(--sp-5)}.cf__scrim{position:absolute;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:cf-scrim-in var(--t-overlay)}@keyframes cf-scrim-in{0%{background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.cf__panel{position:relative;width:min(480px,100%);border-radius:var(--r-lg);display:flex;flex-direction:column;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(var(--mat-panel),var(--mat-panel));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset);-webkit-backdrop-filter:var(--glass2-blur);backdrop-filter:var(--glass2-blur)}@media(prefers-reduced-transparency:reduce){.cf__panel{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.cf__panel:before,.cf__panel:after{display:none}}@media(prefers-contrast:more){.cf__panel{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.cf__panel:after{animation:none}}.cf__panel{animation:menuIn .24s var(--nova-ease-structural) both}.cf__panel[data-kind=danger]{border-color:var(--danger-line)}.cf__panel[data-kind=warn]{border-color:var(--warning)}.cf__head{display:flex;align-items:flex-start;gap:14px;padding:20px 20px 14px}.cf__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--bg-3);color:var(--ink-2);border:1px solid var(--line)}.cf__icon[data-kind=warn]{background:var(--warning-bg);color:var(--warning-fg);border-color:var(--warning)}.cf__icon[data-kind=danger]{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}.cf__title{flex:1;min-width:0;font-size:var(--text-lg);font-weight:var(--fw-semibold);letter-spacing:-.005em;margin:0;padding-block-start:6px;color:var(--ink);line-height:1.35}.cf__close{width:28px;height:28px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:20px;line-height:1;display:grid;place-items:center;flex-shrink:0;margin-block-start:-4px;margin-inline-end:-4px;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.cf__close:hover{color:var(--ink);background:var(--bg-hover)}.cf__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.cf__body{padding:0 20px 18px;display:flex;flex-direction:column;gap:14px}.cf__msg{font-size:var(--text-md);line-height:1.55;color:var(--ink-2);margin:0}.cf__gate{display:flex;flex-direction:column;gap:6px;padding-block-start:var(--sp-1)}.cf__gate-l{font-size:var(--text-2xs);color:var(--ink-2)}.cf__gate-i{width:100%;box-sizing:border-box;padding:var(--sp-2) var(--sp-3);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);font-family:inherit;font-size:var(--text-base);transition:border-color var(--t-state),background var(--t-state)}.cf__gate-i::placeholder{color:var(--ink-4)}.cf__gate-i:hover{border-color:var(--line-2)}.cf__gate-i:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-1px;border-color:transparent}.cf__gate-i:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-3)}.cf__gate-i{height:32px;padding-block:0;font-size:var(--text-sm)}.cf__gate-i.mono{font-family:var(--font-mono)}.cf__ft{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:12px 16px;border-block-start:1px solid var(--w08);background:var(--w03);border-end-start-radius:var(--r-lg);border-end-end-radius:var(--r-lg)}@media(width<=480px){.cf__head{padding:16px 16px 12px}.cf__body{padding:0 16px 14px}.cf__ft{padding:10px 12px;flex-wrap:wrap}.cf__ft [fly-button]{flex:1 1 auto;justify-content:center}}:host(.fly-confirm-dialog--mobile) .cf{padding:16px}:host(.fly-confirm-dialog--mobile) .cf__panel{inline-size:100%;border-radius:18px}:host(.fly-confirm-dialog--mobile) .cf__ft{flex-wrap:nowrap;border-end-start-radius:18px;border-end-end-radius:18px}:host(.fly-confirm-dialog--mobile) .cf__ft [fly-button]{flex:1 1 0;min-inline-size:0;min-block-size:44px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: true }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: true }] }], messageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageKey", required: false }] }], confirmLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabelKey", required: false }] }], cancelLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabelKey", required: false }] }], requireText: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireText", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
 
 /**
@@ -24369,5 +24450,5 @@ const AUDIENCE_ERROR_CODES = {
  * Generated bundle index. Do not edit.
  */
 
-export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentActionBus, AgentActionUnsupportedDispatchError, AgentCommandRegistry, AgentDropRegistry, AgentFlightAnimator, AgentLookupRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, BilingualFieldComponent, CRON_MODES, CRON_WEEKDAYS, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DS_BASELINE_LOCALES, DashboardKpiComponent, DialogResult, EntityLookupComponent, FLYOS_LAUNCH_EVENT, FLYOS_LAUNCH_REQUEST_EVENT, FLYOS_REMOTE_ROUTE_EVENT, FLY_ACCENT_PROPERTY, FLY_ADMIN_ROLES, FLY_CHUNK_RELOAD_FLAG, FLY_COMPACT_THRESHOLD, FLY_COUNTRIES, FLY_EMOJI_BY_ID, FLY_EMOJI_CATEGORIES, FLY_EMOJI_CATEGORY_BY_ID, FLY_EMOJI_DEFAULT_CATEGORIES, FLY_EMOJI_PACK, FLY_EMOJI_PACK_MISSING_MESSAGE, FLY_EMOJI_PREVIEW_COUNT, FLY_EMPTY_VALUE, FLY_LOCALE_CATALOG, FLY_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_WINDOW_HELP_HINT_EVENT, FLY_WINDOW_PAGE_TITLE_EVENT, FlyAchievementProgressComponent, FlyActionMenuComponent, FlyActionStackComponent, FlyAgentDraggableDirective, FlyAnimatedEmojiComponent, FlyAppHomeComponent, FlyAppTopbarComponent, FlyAuthLiveRefresh, FlyBadgeWallComponent, FlyBlockUiComponent, FlyBreadcrumbComponent, FlyButtonComponent, FlyBytesPipe, FlyCaptchaComponent, FlyCardActionsComponent, FlyCardBodyComponent, FlyCardComponent, FlyCardFooterComponent, FlyCardGridComponent, FlyCardMediaComponent, FlyCardMetaComponent, FlyCardStatusComponent, FlyCardTitleComponent, FlyCellDirective, FlyCheckboxComponent, FlyChipComponent, FlyChunkReloadErrorHandler, FlyClickOutsideDirective, FlyCollapsibleComponent, FlyCommentThreadComponent, FlyCompactNumberPipe, FlyConfirmDialogComponent, FlyControlDirective, FlyCronBuilderComponent, FlyCurrencySelectorComponent, FlyDataTableComponent, FlyDatePipe, FlyDateTimePipe, FlyDebouncer, FlyDecimalNumberPipe, 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, FlyPaginationComponent, FlyPeoplePickerComponent, FlyPointsTierComponent, FlyProgressComponent, FlyRelativeTimePipe, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySearchInputComponent, FlySectionHeaderComponent, FlySecureSrcDirective, FlySegmentedComponent, FlySelectComponent, FlySkeletonComponent, FlySliderComponent, FlySparklineComponent, FlySpinnerComponent, FlyStandaloneAuthCallbackComponent, FlyStandaloneAuthService, FlyStateMessageComponent, FlyDynamicFormComponent as FlySurveyFormComponent, FlyTabComponent, FlyTabsComponent, FlyTagsInputComponent, FlyThemeService, FlyTimePipe, FlyToastService, FlyToggleComponent, FlyTooltipDirective, FlyTreeNavComponent, FlyTypeaheadComponent, FlyUserDirectoryService, FlyWindowHelpService, FlyWindowTitleService, FlyosPendingLaunchesGlobalKey, FlyosShellHandlesLaunchRequestsGlobalKey, FlyosShellOwnsHistoryGlobalKey, 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, flyFormatTime, flyFullNumber, flyNextEnabledIndex, flyNextSegmentIndex, flyRelativeTime, flyResolveActiveTab, flyRoleGuard, flyScanPendingDelayMs, flyScanRetry, flySignedCompact, flySkinToneLabelKey, flyStandaloneAuthGuard, flyStandaloneAuthInterceptor, flyToDateOnly, flyToPage, flyUnwrap, 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, 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, EntityLookupComponent, FLYOS_LAUNCH_EVENT, FLYOS_LAUNCH_REQUEST_EVENT, FLYOS_REMOTE_ROUTE_EVENT, FLY_ACCENT_PROPERTY, FLY_ADMIN_ROLES, FLY_CHUNK_RELOAD_FLAG, FLY_COMPACT_THRESHOLD, FLY_COUNTRIES, FLY_EMOJI_BY_ID, FLY_EMOJI_CATEGORIES, FLY_EMOJI_CATEGORY_BY_ID, FLY_EMOJI_DEFAULT_CATEGORIES, FLY_EMOJI_PACK, FLY_EMOJI_PACK_MISSING_MESSAGE, FLY_EMOJI_PREVIEW_COUNT, FLY_EMPTY_VALUE, FLY_LOCALE_CATALOG, FLY_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, 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, FlyCurrencySelectorComponent, FlyDataTableComponent, FlyDatePipe, FlyDateTimePipe, FlyDebouncer, FlyDecimalNumberPipe, 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, FlyPaginationComponent, FlyPeoplePickerComponent, FlyPointsTierComponent, FlyProgressComponent, FlyRelativeTimePipe, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySearchInputComponent, FlySectionHeaderComponent, FlySecureSrcDirective, FlySegmentedComponent, FlySelectComponent, FlySkeletonComponent, FlySliderComponent, FlySparklineComponent, FlySpinnerComponent, FlyStandaloneAuthCallbackComponent, FlyStandaloneAuthService, FlyStateMessageComponent, FlyDynamicFormComponent as FlySurveyFormComponent, FlyTabComponent, FlyTabsComponent, FlyTagsInputComponent, FlyThemeService, FlyTimePipe, FlyToastService, FlyToggleComponent, FlyTooltipDirective, FlyTreeNavComponent, FlyTypeaheadComponent, FlyUserDirectoryService, FlyWindowHelpService, FlyWindowTitleService, FlyosPendingLaunchesGlobalKey, FlyosShellHandlesLaunchRequestsGlobalKey, FlyosShellOwnsHistoryGlobalKey, 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, flyFormatTime, flyFullNumber, flyNextEnabledIndex, flyNextSegmentIndex, flyRelativeTime, flyResolveActiveTab, flyRoleGuard, flyScanPendingDelayMs, flyScanRetry, flySignedCompact, flySkinToneLabelKey, flyStandaloneAuthGuard, flyStandaloneAuthInterceptor, flyToDateOnly, flyToPage, flyUnwrap, 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, 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