@flyos/design-system 3.0.0 → 3.1.0

package/fesm2022/flyos-design-system.mjs

@@ -47,7 +47,7 @@ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 // tools/publish-library.ps1 at bump time, and asserted by the spec beside this file.
 // Used only for the diagnostic message; the duplicate-instance detection itself is
 // version-agnostic, so a stale literal misnames a fork rather than hiding one.
-const FLY_DS_VERSION = '3.0.0';
+const FLY_DS_VERSION = '3.1.0';
 const FLY_DS_REGISTRY_KEY = '__FLY_DS_INSTANCES__';
 /**
  * Records this design-system instance on the shared `scope` and returns the
@@ -1323,6 +1323,15 @@ const DS_BASELINE_LOCALES = {
         'app_unavailable.unreachable.title': 'App unavailable',
         'app_unavailable.unreachable.message': "{{app}} can't be reached right now. Nothing was changed — please try again in a moment.",
         'common.action.cancel': 'Cancel',
+        'common.action.close': 'Close',
+        'common.abort': 'Abort',
+        'common.ignore': 'Ignore',
+        'common.retry': 'Retry',
+        'common.loading': 'Loading…',
+        'common.remove': 'Remove',
+        'common.yes': 'Yes',
+        'common.no': 'No',
+        'common.ok': 'OK',
         'common.label.apply': 'Apply',
         'common.label.formatting_toolbar': 'Formatting toolbar',
         'common.label.https': 'https://…',
@@ -1423,7 +1432,7 @@ const DS_BASELINE_LOCALES = {
         'search.placeholder': 'Search…',
         'search.clear': 'Clear search',
         'search.open': 'Search',
-        'search.filters': "Filters",
+        'search.filters': 'Filters',
         // skeleton (fly-skeleton)
         'skeleton.loading': 'Loading…',
         // typeahead (fly-typeahead)
@@ -1697,6 +1706,15 @@ const DS_BASELINE_LOCALES = {
         'app_unavailable.unreachable.title': 'التطبيق غير متاح',
         'app_unavailable.unreachable.message': 'تعذّر الوصول إلى {{app}} حاليًا. لم يتم تغيير أي شيء — يرجى المحاولة بعد قليل.',
         'common.action.cancel': 'إلغاء',
+        'common.action.close': 'إغلاق',
+        'common.abort': 'إلغاء العملية',
+        'common.ignore': 'تجاهل',
+        'common.retry': 'إعادة المحاولة',
+        'common.loading': 'جارٍ التحميل…',
+        'common.remove': 'إزالة',
+        'common.yes': 'نعم',
+        'common.no': 'لا',
+        'common.ok': 'موافق',
         'common.label.apply': 'تطبيق',
         'common.label.formatting_toolbar': 'شريط أدوات التنسيق',
         'common.label.https': 'https://…',
@@ -1796,7 +1814,7 @@ const DS_BASELINE_LOCALES = {
         'search.placeholder': 'بحث…',
         'search.clear': 'مسح البحث',
         'search.open': 'بحث',
-        'search.filters': "عوامل التصفية",
+        'search.filters': 'عوامل التصفية',
         // skeleton (fly-skeleton)
         'skeleton.loading': 'جارٍ التحميل…',
         // typeahead (fly-typeahead)
@@ -2070,6 +2088,15 @@ const DS_BASELINE_LOCALES = {
         'app_unavailable.unreachable.title': 'Application indisponible',
         'app_unavailable.unreachable.message': '{{app}} est injoignable pour le moment. Rien n’a été modifié — veuillez réessayer dans un instant.',
         'common.action.cancel': 'Annuler',
+        'common.action.close': 'Fermer',
+        'common.abort': 'Abandonner',
+        'common.ignore': 'Ignorer',
+        'common.retry': 'Réessayer',
+        'common.loading': 'Chargement…',
+        'common.remove': 'Supprimer',
+        'common.yes': 'Oui',
+        'common.no': 'Non',
+        'common.ok': 'OK',
         'common.label.apply': 'Appliquer',
         'common.label.formatting_toolbar': "Barre d'outils de mise en forme",
         'common.label.https': 'https://…',
@@ -2169,7 +2196,7 @@ const DS_BASELINE_LOCALES = {
         'search.placeholder': 'Rechercher…',
         'search.clear': 'Effacer la recherche',
         'search.open': 'Rechercher',
-        'search.filters': "Filtres",
+        'search.filters': 'Filtres',
         // skeleton (fly-skeleton)
         'skeleton.loading': 'Chargement…',
         // typeahead (fly-typeahead)
@@ -2387,14 +2414,14 @@ const DS_BASELINE_LOCALES = {
         'chat_composer.label.mention_suggestions': 'Suggestions de mention',
         // app-surface component library (fly-card / -data-table / -pagination /
         // -filter-panel / forms / overlays). Absorbed with the kit from Circles.
-        'ui.action.addMoreOptions': 'Plus d\'options',
+        'ui.action.addMoreOptions': "Plus d'options",
         'ui.action.cancel': 'Annuler',
         'ui.action.clear': 'Effacer',
         'ui.action.clearFilters': 'Effacer les filtres',
         'ui.action.close': 'Fermer',
         'ui.action.confirm': 'Confirmer',
         'ui.action.dismiss': 'Ignorer',
-        'ui.action.fewerOptions': 'Moins d\'options',
+        'ui.action.fewerOptions': "Moins d'options",
         'ui.action.open': 'Ouvrir',
         'ui.action.retry': 'Réessayer',
         'ui.action.save': 'Enregistrer',
@@ -2403,7 +2430,7 @@ const DS_BASELINE_LOCALES = {
         'ui.confirm.typeToConfirm': 'Saisissez {{text}} pour confirmer',
         'ui.filters.title': 'Filtres',
         'ui.form.autoSaving': 'Enregistrement automatique',
-        'ui.nav.breadcrumbs': 'Fil d\'Ariane',
+        'ui.nav.breadcrumbs': "Fil d'Ariane",
         'ui.nav.home': 'Accueil',
         'ui.nav.modules': 'Modules',
         'ui.nav.selectModule': 'Choisir un module',
@@ -2443,6 +2470,15 @@ const DS_BASELINE_LOCALES = {
         'app_unavailable.unreachable.title': 'ایپ دستیاب نہیں',
         'app_unavailable.unreachable.message': '{{app}} تک ابھی رسائی ممکن نہیں۔ کچھ تبدیل نہیں ہوا — براہِ کرم تھوڑی دیر بعد کوشش کریں۔',
         'common.action.cancel': 'منسوخ کریں',
+        'common.action.close': 'بند کریں',
+        'common.abort': 'منسوخ کریں',
+        'common.ignore': 'نظرانداز کریں',
+        'common.retry': 'دوبارہ کوشش کریں',
+        'common.loading': 'لوڈ ہو رہا ہے…',
+        'common.remove': 'ہٹائیں',
+        'common.yes': 'ہاں',
+        'common.no': 'نہیں',
+        'common.ok': 'ٹھیک ہے',
         'common.label.apply': 'لاگو کریں',
         'common.label.formatting_toolbar': 'فارمیٹنگ ٹول بار',
         'common.label.https': 'https://…',
@@ -2541,7 +2577,7 @@ const DS_BASELINE_LOCALES = {
         'search.placeholder': 'تلاش کریں…',
         'search.clear': 'تلاش صاف کریں',
         'search.open': 'تلاش کریں',
-        'search.filters': "فلٹرز",
+        'search.filters': 'فلٹرز',
         // skeleton (fly-skeleton)
         'skeleton.loading': 'لوڈ ہو رہا ہے…',
         // typeahead (fly-typeahead)
@@ -15855,7 +15891,9 @@ function actionFingerprint(action) {
                 paramsFingerprint(menu.titleParams),
                 menu.value,
                 menu.defaultValue,
-                menu.options.map((o) => [o.value, o.labelKey, paramsFingerprint(o.labelParams)]),
+                // `label ?? null` so a RENAMED tenant row (campaign, area) repaints; null keeps a
+                // key-only option's fingerprint byte-identical to what it was before the field existed.
+                menu.options.map((o) => [o.value, o.labelKey, paramsFingerprint(o.labelParams), o.label ?? null]),
                 !!menu.onSelect,
             ]
             : null,
@@ -15945,6 +15983,9 @@ function projectMenu(action, handlers) {
             value: o.value,
             labelKey: o.labelKey,
             ...(o.labelParams === undefined ? {} : { labelParams: o.labelParams }),
+            // Conditional, like every other optional field here: an explicit `label: undefined` is
+            // `in`-visible on the object and would make "absent" and "present but empty" compare equal.
+            ...(o.label === undefined ? {} : { label: o.label }),
         })),
         value: menu.value,
         defaultValue: menu.defaultValue,
@@ -16845,7 +16886,13 @@ class FlyMagicActionsComponent {
         if (!menu)
             return this.resolvedLabel(action);
         const current = menu.options.find((o) => o.value === menu.value);
-        const value = current ? this.i18n.t(current.labelKey, current.labelParams) : menu.value;
+        // Same precedence as the rows — otherwise the trigger would announce a translated
+        // placeholder while the open menu shows the tenant's actual name.
+        const value = current
+            ? current.label?.trim()
+                ? current.label
+                : this.i18n.t(current.labelKey, current.labelParams)
+            : menu.value;
         return this.i18n.t('magic_actions.radio_menu.trigger_label', {
             label: this.resolvedLabel(action),
             value,
@@ -16895,7 +16942,10 @@ class FlyMagicActionsComponent {
             return [];
         const items = menu.options.map((option) => ({
             id: option.value,
-            label: this.i18n.t(option.labelKey, option.labelParams),
+            // Tenant data wins over the key: `label` is a campaign/area name read from the publisher's
+            // own rows, which no locale bundle can contain. Falls back to the key when absent OR when
+            // the data-derived text is empty, so a blank row can never render as a nameless option.
+            label: option.label?.trim() ? option.label : this.i18n.t(option.labelKey, option.labelParams),
             // `selected` is what makes this a real radio menu rather than a list with
             // a tick: `fly-context-menu` renders a selected row as
             // `role="menuitemradio"` + `aria-checked`, with the check indicator and
@@ -16982,13 +17032,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{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 });
+    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: "<!--\n  Icon-only buttons carry the accessible name via [attr.aria-label] \u2014 the SVG\n  glyph itself is aria-hidden (decorative, skill \u00A7accessibility rule 5). `kind:\n  'text'` actions rely on their own visible text instead. Disabled rows stay\n  `aria-disabled` (never native `disabled`) so they remain focusable/hoverable \u2014\n  a disabled action's whole point is to explain ITSELF via the auto-suffixed\n  tooltip, which native `disabled` would suppress.\n\n  The glyph is composed from ALLOWLISTED nodes bound as real attributes, never\n  from `[innerHTML]`: `iconPath` is publisher-supplied, and an `<svg>` fragment\n  is not a closed world (`<foreignObject>` is an HTML integration point, `<a\n  xlink:href=\"javascript:\u2026\">` is live under the very click this button invites).\n  `magic-actions-icon.ts` carries the full rationale; the shape below is its\n  consequence \u2014 an attribute binding cannot introduce an element or a handler,\n  so there is nothing left to sanitize.\n\n  That block is authored ONCE, as `#actionButton`, and stamped by every place a\n  contributed action is painted (group items and `primary`). It used to be\n  inline in the group loop, which was fine while this component rendered groups\n  only; with `primary` here too, a second copy would mean the next edit to the\n  SECURITY-CRITICAL binding shape has to be made twice and can be made once.\n-->\n<!--\n  `data-action` carries the publisher's action `id` verbatim \u2014 the one stable, LOCALE-INDEPENDENT\n  handle on a rendered action. Every other identifying attribute here is translated\n  (`aria-label`, the tooltip), so an e2e suite that targeted them had to assert in one language,\n  and one that targeted a bespoke button lost its hook entirely when the action moved into the\n  bar. That is not hypothetical: PPM's project-closure suite could not adopt the contract for\n  exactly this reason. It is an ATTRIBUTE, not a class, so it never participates in styling, and\n  `id` is already unique across the whole contribution (the projection enforces it), so it is\n  unique in the DOM too.\n-->\n<ng-template #actionButton let-projected>\n  <!--\n    `let-projected` is `any` \u2014 Angular infers nothing for an `ngTemplateOutlet`\n    context, and there is no built-in way to declare one. `asAction` is an\n    identity function whose only job is to give this block a TYPED local, so\n    every read below (`.kind`, `.disabled`, `.menu`) is checked by the template\n    compiler instead of silently resolving to `undefined` on a typo. Without it\n    the one place a `MagicBarActionView` is actually painted would be the one\n    place its shape is not verified.\n  -->\n  @let action = asAction(projected);\n  @if (action.kind === 'text') {\n    <button\n      type=\"button\"\n      class=\"fma-btn fma-btn--text\"\n      [attr.data-action]=\"action.id\"\n      [attr.data-tone]=\"toneAttr(action)\"\n      [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\n      [attr.aria-pressed]=\"pressedAttr(action)\"\n      [flyTooltip]=\"tooltipFor(action)\"\n      [flyTooltipDelay]=\"450\"\n      (click)=\"activate(action, $event)\"\n    >{{ resolvedLabel(action) }}</button>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"fma-btn\"\n      [class.fma-btn--badge]=\"hasBadge(action)\"\n      [attr.data-action]=\"action.id\"\n      [attr.data-tone]=\"toneAttr(action)\"\n      [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\n      [attr.aria-pressed]=\"pressedAttr(action)\"\n      [attr.aria-haspopup]=\"action.menu ? 'menu' : null\"\n      [attr.aria-expanded]=\"action.menu ? (openMenuActionId() === action.id ? 'true' : 'false') : null\"\n      [attr.aria-label]=\"action.menu ? triggerAriaLabel(action) : resolvedLabel(action)\"\n      [flyTooltip]=\"tooltipFor(action)\"\n      [flyTooltipDelay]=\"450\"\n      (click)=\"activate(action, $event)\"\n    >\n      <svg\n        class=\"fma-btn__icon\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.8\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        @for (node of iconNodes(action); track $index) {\n          @switch (node.tag) {\n            @case ('path') {\n              <svg:path\n                [attr.d]=\"node.attrs['d']\"\n                [attr.fill-rule]=\"node.attrs['fill-rule']\"\n                [attr.clip-rule]=\"node.attrs['clip-rule']\"\n              />\n            }\n            @case ('circle') {\n              <svg:circle\n                [attr.cx]=\"node.attrs['cx']\"\n                [attr.cy]=\"node.attrs['cy']\"\n                [attr.r]=\"node.attrs['r']\"\n              />\n            }\n            @case ('rect') {\n              <svg:rect\n                [attr.x]=\"node.attrs['x']\"\n                [attr.y]=\"node.attrs['y']\"\n                [attr.width]=\"node.attrs['width']\"\n                [attr.height]=\"node.attrs['height']\"\n                [attr.rx]=\"node.attrs['rx']\"\n                [attr.ry]=\"node.attrs['ry']\"\n              />\n            }\n            @case ('ellipse') {\n              <svg:ellipse\n                [attr.cx]=\"node.attrs['cx']\"\n                [attr.cy]=\"node.attrs['cy']\"\n                [attr.rx]=\"node.attrs['rx']\"\n                [attr.ry]=\"node.attrs['ry']\"\n              />\n            }\n            @case ('line') {\n              <svg:line\n                [attr.x1]=\"node.attrs['x1']\"\n                [attr.y1]=\"node.attrs['y1']\"\n                [attr.x2]=\"node.attrs['x2']\"\n                [attr.y2]=\"node.attrs['y2']\"\n              />\n            }\n            @case ('polyline') {\n              <svg:polyline [attr.points]=\"node.attrs['points']\" />\n            }\n            @case ('polygon') {\n              <svg:polygon [attr.points]=\"node.attrs['points']\" />\n            }\n          }\n        }\n      </svg>\n      @if (hasBadge(action)) {\n        <span class=\"fma-btn__badge\" aria-hidden=\"true\"></span>\n      }\n    </button>\n  }\n</ng-template>\n\n<!--\n  `.fma` is the SCROLLING row and holds the contributed groups only. The accent\n  CTA is a SIBLING of it, outside the fade mask and outside the scroll container,\n  because it is the row's anchor \u2014 a call to action that dissolves into a\n  gradient, or that you have to scroll sideways to reach, inverts the affordance.\n  It is also what makes `isOverflowing` measurable at all: see the component.\n-->\n@if (groups().length) {\n  <div #row class=\"fma\" [class.fma--overflow]=\"isOverflowing()\">\n    @for (group of groups(); track group.id) {\n      <div\n        class=\"fma-group\"\n        [class.fma-group--framed]=\"group.framed\"\n        role=\"group\"\n        [attr.aria-label]=\"i18n.t(group.labelKey)\"\n      >\n        @for (action of group.items; track action.id) {\n          <ng-container\n            [ngTemplateOutlet]=\"actionButton\"\n            [ngTemplateOutletContext]=\"{ $implicit: action }\"\n          />\n        }\n      </div>\n      @if (group.framed) {\n        <span class=\"fma-sep\" aria-hidden=\"true\"></span>\n      }\n    }\n  </div>\n}\n\n<!--\n  The accent CTA. The disc is a WRAPPER, not a modifier on the button, and that\n  is load-bearing rather than cosmetic: `.fma-btn`'s hover/press feedback is an\n  `animation` (`iconWiggle` / `iconBounce`), and an animation that touches\n  `transform` beats a declared `transform` \u2014 so a hover lift authored on the\n  button itself would simply never render. The wrapper owns the disc, the lift\n  and the shadow; the button stays transparent and keeps the DS's own toolbar\n  feedback. It re-points `--chrome-ink` rather than styling `.fma-btn` through a\n  descendant selector so the glyph colour inherits the way custom properties do.\n-->\n@if (primary(); as p) {\n  <span class=\"fma-primary\" [class.fma-primary--disabled]=\"p.disabled\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionButton\"\n      [ngTemplateOutletContext]=\"{ $implicit: p }\"\n    />\n  </span>\n}\n\n<!--\n  ONE radio menu, hoisted out of the group loops (S1-review F9). Only one is open\n  at a time (`openMenuActionId`), so a single instance is enough \u2014 and rendering\n  it beside its button would insert a non-`.fma-btn` element into the group,\n  silently shifting every later button's `:nth-child` index and with it the\n  `toolbarPopIn` stagger delay the `.fma-btn` rule assigns. Keeping every\n  staggered parent's children homogeneous is what makes that rule's comment true.\n  It portals itself to <body>, so its position is unaffected by where it is\n  declared.\n-->\n@if (openAction(); as open) {\n  <fly-context-menu\n    [anchor]=\"menuAnchorEl()\"\n    [sections]=\"menuSections(open)\"\n    (action)=\"onMenuAction(open, $event)\"\n    (closed)=\"closeMenu()\"\n  />\n}\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{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"] }]
+                    }, template: "<!--\n  Icon-only buttons carry the accessible name via [attr.aria-label] \u2014 the SVG\n  glyph itself is aria-hidden (decorative, skill \u00A7accessibility rule 5). `kind:\n  'text'` actions rely on their own visible text instead. Disabled rows stay\n  `aria-disabled` (never native `disabled`) so they remain focusable/hoverable \u2014\n  a disabled action's whole point is to explain ITSELF via the auto-suffixed\n  tooltip, which native `disabled` would suppress.\n\n  The glyph is composed from ALLOWLISTED nodes bound as real attributes, never\n  from `[innerHTML]`: `iconPath` is publisher-supplied, and an `<svg>` fragment\n  is not a closed world (`<foreignObject>` is an HTML integration point, `<a\n  xlink:href=\"javascript:\u2026\">` is live under the very click this button invites).\n  `magic-actions-icon.ts` carries the full rationale; the shape below is its\n  consequence \u2014 an attribute binding cannot introduce an element or a handler,\n  so there is nothing left to sanitize.\n\n  That block is authored ONCE, as `#actionButton`, and stamped by every place a\n  contributed action is painted (group items and `primary`). It used to be\n  inline in the group loop, which was fine while this component rendered groups\n  only; with `primary` here too, a second copy would mean the next edit to the\n  SECURITY-CRITICAL binding shape has to be made twice and can be made once.\n-->\n<!--\n  `data-action` carries the publisher's action `id` verbatim \u2014 the one stable, LOCALE-INDEPENDENT\n  handle on a rendered action. Every other identifying attribute here is translated\n  (`aria-label`, the tooltip), so an e2e suite that targeted them had to assert in one language,\n  and one that targeted a bespoke button lost its hook entirely when the action moved into the\n  bar. That is not hypothetical: PPM's project-closure suite could not adopt the contract for\n  exactly this reason. It is an ATTRIBUTE, not a class, so it never participates in styling, and\n  `id` is already unique across the whole contribution (the projection enforces it), so it is\n  unique in the DOM too.\n-->\n<ng-template #actionButton let-projected>\n  <!--\n    `let-projected` is `any` \u2014 Angular infers nothing for an `ngTemplateOutlet`\n    context, and there is no built-in way to declare one. `asAction` is an\n    identity function whose only job is to give this block a TYPED local, so\n    every read below (`.kind`, `.disabled`, `.menu`) is checked by the template\n    compiler instead of silently resolving to `undefined` on a typo. Without it\n    the one place a `MagicBarActionView` is actually painted would be the one\n    place its shape is not verified.\n  -->\n  @let action = asAction(projected);\n  @if (action.kind === 'text') {\n    <button\n      type=\"button\"\n      class=\"fma-btn fma-btn--text\"\n      [attr.data-action]=\"action.id\"\n      [attr.data-tone]=\"toneAttr(action)\"\n      [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\n      [attr.aria-pressed]=\"pressedAttr(action)\"\n      [flyTooltip]=\"tooltipFor(action)\"\n      [flyTooltipDelay]=\"450\"\n      (click)=\"activate(action, $event)\"\n    >{{ resolvedLabel(action) }}</button>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"fma-btn\"\n      [class.fma-btn--badge]=\"hasBadge(action)\"\n      [attr.data-action]=\"action.id\"\n      [attr.data-tone]=\"toneAttr(action)\"\n      [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\n      [attr.aria-pressed]=\"pressedAttr(action)\"\n      [attr.aria-haspopup]=\"action.menu ? 'menu' : null\"\n      [attr.aria-expanded]=\"action.menu ? (openMenuActionId() === action.id ? 'true' : 'false') : null\"\n      [attr.aria-label]=\"action.menu ? triggerAriaLabel(action) : resolvedLabel(action)\"\n      [flyTooltip]=\"tooltipFor(action)\"\n      [flyTooltipDelay]=\"450\"\n      (click)=\"activate(action, $event)\"\n    >\n      <svg\n        class=\"fma-btn__icon\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.8\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        @for (node of iconNodes(action); track $index) {\n          @switch (node.tag) {\n            @case ('path') {\n              <svg:path\n                [attr.d]=\"node.attrs['d']\"\n                [attr.fill-rule]=\"node.attrs['fill-rule']\"\n                [attr.clip-rule]=\"node.attrs['clip-rule']\"\n              />\n            }\n            @case ('circle') {\n              <svg:circle\n                [attr.cx]=\"node.attrs['cx']\"\n                [attr.cy]=\"node.attrs['cy']\"\n                [attr.r]=\"node.attrs['r']\"\n              />\n            }\n            @case ('rect') {\n              <svg:rect\n                [attr.x]=\"node.attrs['x']\"\n                [attr.y]=\"node.attrs['y']\"\n                [attr.width]=\"node.attrs['width']\"\n                [attr.height]=\"node.attrs['height']\"\n                [attr.rx]=\"node.attrs['rx']\"\n                [attr.ry]=\"node.attrs['ry']\"\n              />\n            }\n            @case ('ellipse') {\n              <svg:ellipse\n                [attr.cx]=\"node.attrs['cx']\"\n                [attr.cy]=\"node.attrs['cy']\"\n                [attr.rx]=\"node.attrs['rx']\"\n                [attr.ry]=\"node.attrs['ry']\"\n              />\n            }\n            @case ('line') {\n              <svg:line\n                [attr.x1]=\"node.attrs['x1']\"\n                [attr.y1]=\"node.attrs['y1']\"\n                [attr.x2]=\"node.attrs['x2']\"\n                [attr.y2]=\"node.attrs['y2']\"\n              />\n            }\n            @case ('polyline') {\n              <svg:polyline [attr.points]=\"node.attrs['points']\" />\n            }\n            @case ('polygon') {\n              <svg:polygon [attr.points]=\"node.attrs['points']\" />\n            }\n          }\n        }\n      </svg>\n      @if (hasBadge(action)) {\n        <span class=\"fma-btn__badge\" aria-hidden=\"true\"></span>\n      }\n    </button>\n  }\n</ng-template>\n\n<!--\n  `.fma` is the SCROLLING row and holds the contributed groups only. The accent\n  CTA is a SIBLING of it, outside the fade mask and outside the scroll container,\n  because it is the row's anchor \u2014 a call to action that dissolves into a\n  gradient, or that you have to scroll sideways to reach, inverts the affordance.\n  It is also what makes `isOverflowing` measurable at all: see the component.\n-->\n@if (groups().length) {\n  <div #row class=\"fma\" [class.fma--overflow]=\"isOverflowing()\">\n    @for (group of groups(); track group.id) {\n      <div\n        class=\"fma-group\"\n        [class.fma-group--framed]=\"group.framed\"\n        role=\"group\"\n        [attr.aria-label]=\"i18n.t(group.labelKey)\"\n      >\n        @for (action of group.items; track action.id) {\n          <ng-container\n            [ngTemplateOutlet]=\"actionButton\"\n            [ngTemplateOutletContext]=\"{ $implicit: action }\"\n          />\n        }\n      </div>\n      @if (group.framed) {\n        <span class=\"fma-sep\" aria-hidden=\"true\"></span>\n      }\n    }\n  </div>\n}\n\n<!--\n  The accent CTA. The disc is a WRAPPER, not a modifier on the button, and that\n  is load-bearing rather than cosmetic: `.fma-btn`'s hover/press feedback is an\n  `animation` (`iconWiggle` / `iconBounce`), and an animation that touches\n  `transform` beats a declared `transform` \u2014 so a hover lift authored on the\n  button itself would simply never render. The wrapper owns the disc, the lift\n  and the shadow; the button stays transparent and keeps the DS's own toolbar\n  feedback. It re-points `--chrome-ink` rather than styling `.fma-btn` through a\n  descendant selector so the glyph colour inherits the way custom properties do.\n-->\n@if (primary(); as p) {\n  <span class=\"fma-primary\" [class.fma-primary--disabled]=\"p.disabled\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionButton\"\n      [ngTemplateOutletContext]=\"{ $implicit: p }\"\n    />\n  </span>\n}\n\n<!--\n  ONE radio menu, hoisted out of the group loops (S1-review F9). Only one is open\n  at a time (`openMenuActionId`), so a single instance is enough \u2014 and rendering\n  it beside its button would insert a non-`.fma-btn` element into the group,\n  silently shifting every later button's `:nth-child` index and with it the\n  `toolbarPopIn` stagger delay the `.fma-btn` rule assigns. Keeping every\n  staggered parent's children homogeneous is what makes that rule's comment true.\n  It portals itself to <body>, so its position is unaffected by where it is\n  declared.\n-->\n@if (openAction(); as open) {\n  <fly-context-menu\n    [anchor]=\"menuAnchorEl()\"\n    [sections]=\"menuSections(open)\"\n    (action)=\"onMenuAction(open, $event)\"\n    (closed)=\"closeMenu()\"\n  />\n}\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 }] }] } });
 
 /**