ngwr 11.1.0 → 12.0.0

package/fesm2022/ngwr-speed-dial.mjs

@@ -1,6 +1,6 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, model, output, viewChild, effect, computed, ViewEncapsulation, Component } from '@angular/core';
+import { input, model, output, viewChild, inject, ElementRef, effect, computed, ViewEncapsulation, Component } from '@angular/core';
 import { useI18nText } from 'ngwr/i18n';
 import { WrIcon } from 'ngwr/icon';
 
@@ -10,10 +10,11 @@ import { WrIcon } from 'ngwr/icon';
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
+let menuUid = 0;
 /**
- * Floating action button that expands into a fan of secondary actions on
- * click / hover. Place inside a positioned container or near `position: fixed`
- * — the component itself doesn't pin to the viewport.
+ * Floating action button that expands into a fan of secondary actions on click.
+ * Place inside a positioned container or near `position: fixed` — the component
+ * itself doesn't pin to the viewport.
  *
  * @example
  * ```html
@@ -28,7 +29,6 @@ import { WrIcon } from 'ngwr/icon';
  *
  * @see https://ngwr.dev/reference/components/speed-dial
  */
-let menuUid = 0;
 class WrSpeedDial {
     actions = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
@@ -62,6 +62,7 @@ class WrSpeedDial {
     menuId = `wr-speed-dial-menu-${++menuUid}`;
     triggerEl = viewChild('trigger', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
     constructor() {
         // A disabled trigger cannot be pressed, and the trigger is the only way to close
         // the dial — so being disabled while open left it fanned out with no way back.
@@ -90,12 +91,26 @@ class WrSpeedDial {
         if (this.disabled())
             return;
         this.open.set(false);
+        // Take the focus back before the action goes — the collapsed wrapper turns
+        // `visibility: hidden`, and a browser blurs an element it hides, so the caret
+        // landed on `<body>` and the next Tab restarted at the top of the document.
+        // Escape already did this; the SUCCESS path did not.
+        //
+        // Before the emit, not after: `pick` is where a consumer opens a dialog or
+        // navigates, and such a handler moves focus itself — focusing afterwards would
+        // yank the caret back onto the trigger. `wr-dropdown` sequences it the same way.
+        //
+        // Only when the caret is inside the dial: Safari does not focus a button on
+        // mouse-down, so an unguarded call would steal it from wherever the user is.
+        if (this.host.nativeElement.contains(this.host.nativeElement.ownerDocument.activeElement)) {
+            this.triggerEl()?.nativeElement.focus();
+        }
         this.pick.emit(action);
     }
     /**
-     * `role="menu"` promises a way out, and the actions are ordinary buttons in the tab
-     * order — without this a keyboard user who opened the dial had to tab through every
-     * action to leave it.
+     * Escape closes the dial and hands the caret back. The actions are ordinary buttons
+     * in the tab order, so without this a keyboard user who opened the dial had to tab
+     * through every action to leave it.
      */
     onKeydown(event) {
         if (event.key !== 'Escape' || !this.open())
@@ -112,12 +127,12 @@ class WrSpeedDial {
     initial(label) {
         return [...label][0] ?? '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSpeedDial, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrSpeedDial, isStandalone: true, selector: "wr-speed-dial", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, safeArea: { classPropertyName: "safeArea", publicName: "safeArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", pick: "pick" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"wr-speed-dial__trigger\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"menuId\"\n  aria-haspopup=\"menu\"\n  [attr.aria-label]=\"resolvedTriggerLabel()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onTrigger()\"\n>\n  <wr-icon [name]=\"icon()\" />\n</button>\n\n<ul class=\"wr-speed-dial__actions\" role=\"menu\" [attr.id]=\"menuId\">\n  @for (action of actions(); track action.id) {\n    <!--\n      role=\"none\" is load-bearing: role=\"menu\" on the <ul> strips the implicit\n      list semantics from its children, so an unroled <li> sits between the menu\n      and its menuitem and breaks the required menu -> menuitem parentage.\n      Marking it presentational restores the direct relationship.\n    -->\n    <li class=\"wr-speed-dial__action-wrap\" role=\"none\" [style.--wr-speed-dial-i]=\"$index + 1\">\n      <button\n        type=\"button\"\n        class=\"wr-speed-dial__action\"\n        role=\"menuitem\"\n        [attr.aria-label]=\"action.label\"\n        [title]=\"action.label\"\n        [disabled]=\"disabled()\"\n        (click)=\"onPick(action)\"\n      >\n        @if (action.icon) {\n          <wr-icon [name]=\"action.icon\" />\n        } @else {\n          <span>{{ initial(action.label) }}</span>\n        }\n      </button>\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrSpeedDial, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrSpeedDial, isStandalone: true, selector: "wr-speed-dial", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, safeArea: { classPropertyName: "safeArea", publicName: "safeArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", pick: "pick" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"wr-speed-dial__trigger\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"menuId\"\n  [attr.aria-label]=\"resolvedTriggerLabel()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onTrigger()\"\n>\n  <wr-icon [name]=\"icon()\" />\n</button>\n\n<!--\n  A LIST of buttons, deliberately not a `role=\"menu\"`. The dial used to announce\n  aria-haspopup=\"menu\" over role=\"menuitem\" buttons while handling no menu key at\n  all \u2014 no arrows, no Home/End, no focus moving in on open \u2014 and the actions were\n  N tab stops rather than the pattern's one. That role also puts a screen reader\n  into focus mode, so the arrow keys it promises stop reading the page and then do\n  nothing here. The structure now says what the component does: a disclosure\n  button (aria-expanded / aria-controls) revealing ordinary buttons that Tab\n  reaches and Enter activates, with Escape as the way back.\n\n  `role=\"list\"` is written out because `list-style: none` (styles/_index.scss)\n  drops the implicit list semantics in Safari.\n-->\n<ul class=\"wr-speed-dial__actions\" role=\"list\" [attr.id]=\"menuId\">\n  @for (action of actions(); track action.id) {\n    <li class=\"wr-speed-dial__action-wrap\" [style.--wr-speed-dial-i]=\"$index + 1\">\n      <button\n        type=\"button\"\n        class=\"wr-speed-dial__action\"\n        [attr.aria-label]=\"action.label\"\n        [title]=\"action.label\"\n        [disabled]=\"disabled()\"\n        (click)=\"onPick(action)\"\n      >\n        @if (action.icon) {\n          <wr-icon [name]=\"action.icon\" />\n        } @else {\n          <span>{{ initial(action.label) }}</span>\n        }\n      </button>\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSpeedDial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrSpeedDial, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-speed-dial', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()', '(keydown)': 'onKeydown($event)' }, imports: [WrIcon], template: "<button\n  #trigger\n  type=\"button\"\n  class=\"wr-speed-dial__trigger\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"menuId\"\n  aria-haspopup=\"menu\"\n  [attr.aria-label]=\"resolvedTriggerLabel()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onTrigger()\"\n>\n  <wr-icon [name]=\"icon()\" />\n</button>\n\n<ul class=\"wr-speed-dial__actions\" role=\"menu\" [attr.id]=\"menuId\">\n  @for (action of actions(); track action.id) {\n    <!--\n      role=\"none\" is load-bearing: role=\"menu\" on the <ul> strips the implicit\n      list semantics from its children, so an unroled <li> sits between the menu\n      and its menuitem and breaks the required menu -> menuitem parentage.\n      Marking it presentational restores the direct relationship.\n    -->\n    <li class=\"wr-speed-dial__action-wrap\" role=\"none\" [style.--wr-speed-dial-i]=\"$index + 1\">\n      <button\n        type=\"button\"\n        class=\"wr-speed-dial__action\"\n        role=\"menuitem\"\n        [attr.aria-label]=\"action.label\"\n        [title]=\"action.label\"\n        [disabled]=\"disabled()\"\n        (click)=\"onPick(action)\"\n      >\n        @if (action.icon) {\n          <wr-icon [name]=\"action.icon\" />\n        } @else {\n          <span>{{ initial(action.label) }}</span>\n        }\n      </button>\n    </li>\n  }\n</ul>\n" }]
+            args: [{ selector: 'wr-speed-dial', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()', '(keydown)': 'onKeydown($event)' }, imports: [WrIcon], template: "<button\n  #trigger\n  type=\"button\"\n  class=\"wr-speed-dial__trigger\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"menuId\"\n  [attr.aria-label]=\"resolvedTriggerLabel()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onTrigger()\"\n>\n  <wr-icon [name]=\"icon()\" />\n</button>\n\n<!--\n  A LIST of buttons, deliberately not a `role=\"menu\"`. The dial used to announce\n  aria-haspopup=\"menu\" over role=\"menuitem\" buttons while handling no menu key at\n  all \u2014 no arrows, no Home/End, no focus moving in on open \u2014 and the actions were\n  N tab stops rather than the pattern's one. That role also puts a screen reader\n  into focus mode, so the arrow keys it promises stop reading the page and then do\n  nothing here. The structure now says what the component does: a disclosure\n  button (aria-expanded / aria-controls) revealing ordinary buttons that Tab\n  reaches and Enter activates, with Escape as the way back.\n\n  `role=\"list\"` is written out because `list-style: none` (styles/_index.scss)\n  drops the implicit list semantics in Safari.\n-->\n<ul class=\"wr-speed-dial__actions\" role=\"list\" [attr.id]=\"menuId\">\n  @for (action of actions(); track action.id) {\n    <li class=\"wr-speed-dial__action-wrap\" [style.--wr-speed-dial-i]=\"$index + 1\">\n      <button\n        type=\"button\"\n        class=\"wr-speed-dial__action\"\n        [attr.aria-label]=\"action.label\"\n        [title]=\"action.label\"\n        [disabled]=\"disabled()\"\n        (click)=\"onPick(action)\"\n      >\n        @if (action.icon) {\n          <wr-icon [name]=\"action.icon\" />\n        } @else {\n          <span>{{ initial(action.label) }}</span>\n        }\n      </button>\n    </li>\n  }\n</ul>\n" }]
         }], ctorParameters: () => [], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], safeArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "safeArea", required: false }] }], pick: [{ type: i0.Output, args: ["pick"] }], triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 /**

package/fesm2022/ngwr-speed-dial.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-speed-dial.mjs","sources":["../../../projects/lib/speed-dial/speed-dial.ts","../../../projects/lib/speed-dial/speed-dial.html","../../../projects/lib/speed-dial/ngwr-speed-dial.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  type ElementRef,\n  ViewEncapsulation,\n  computed,\n  effect,\n  input,\n  model,\n  output,\n  viewChild,\n} from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\n\nimport type { WrSpeedDialAction, WrSpeedDialDirection } from './interfaces';\n\n/**\n * Floating action button that expands into a fan of secondary actions on\n * click / hover. Place inside a positioned container or near `position: fixed`\n * — the component itself doesn't pin to the viewport.\n *\n * @example\n * ```html\n * <wr-speed-dial\n *   [actions]=\"[\n *     { id: 'new', label: 'New', icon: 'add' },\n *     { id: 'edit', label: 'Edit', icon: 'cog' }\n *   ]\"\n *   (pick)=\"onPick($event)\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/speed-dial\n */\nlet menuUid = 0;\n\n@Component({\n  selector: 'wr-speed-dial',\n  templateUrl: './speed-dial.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()', '(keydown)': 'onKeydown($event)' },\n  imports: [WrIcon],\n})\nexport class WrSpeedDial {\n  readonly actions = input<readonly WrSpeedDialAction[]>([]);\n\n  /**\n   * Accessible name of the trigger. Falls back to `speedDial.label`, then\n   * `'Actions'` — the trigger is icon-only, so without this it has no name at all.\n   */\n  readonly triggerLabel = input<string | null>(null);\n\n  protected readonly resolvedTriggerLabel = useI18nText(this.triggerLabel, 'speedDial.label', 'Actions');\n\n  /** Direction the actions fan out. @default 'up' */\n  readonly direction = input<WrSpeedDialDirection>('up');\n\n  /** Two-way bindable open state. @default false */\n  readonly open = model(false);\n\n  /** Icon for the main trigger button. @default 'add' */\n  readonly icon = input<WrIconName>('add');\n\n  /** Disable interaction. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Pad the host toward the dial `direction` with `env(safe-area-inset-*)`.\n   * Only matters when the consumer pins the dial to that edge of the\n   * viewport; otherwise it has no effect. @default false\n   */\n  readonly safeArea = input(false, { transform: coerceBooleanProperty });\n\n  /** Fires when the user picks one of the actions. */\n  readonly pick = output<WrSpeedDialAction>();\n\n  /** Id the trigger's `aria-controls` points at. */\n  protected readonly menuId = `wr-speed-dial-menu-${++menuUid}`;\n\n  protected readonly triggerEl = viewChild<ElementRef<HTMLButtonElement>>('trigger');\n\n  constructor() {\n    // A disabled trigger cannot be pressed, and the trigger is the only way to close\n    // the dial — so being disabled while open left it fanned out with no way back.\n    effect(() => {\n      if (this.disabled() && this.open()) this.open.set(false);\n    });\n  }\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-speed-dial', `wr-speed-dial--${this.direction()}`];\n    if (this.open()) parts.push('wr-speed-dial--open');\n    if (this.disabled()) parts.push('wr-speed-dial--disabled');\n    if (this.safeArea()) parts.push('wr-speed-dial--safe-area');\n    return parts.join(' ');\n  });\n\n  protected onTrigger(): void {\n    if (this.disabled()) return;\n    this.open.update(v => !v);\n  }\n\n  protected onPick(action: WrSpeedDialAction): void {\n    if (this.disabled()) return;\n    this.open.set(false);\n    this.pick.emit(action);\n  }\n\n  /**\n   * `role=\"menu\"` promises a way out, and the actions are ordinary buttons in the tab\n   * order — without this a keyboard user who opened the dial had to tab through every\n   * action to leave it.\n   */\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Escape' || !this.open()) return;\n    event.preventDefault();\n    this.open.set(false);\n    this.triggerEl()?.nativeElement.focus();\n  }\n\n  /**\n   * First GLYPH of the label, for an action with no icon. `charAt(0)` returns one\n   * UTF-16 code unit, which cuts an astral character (an emoji) in half and renders a\n   * replacement character.\n   */\n  protected initial(label: string): string {\n    return [...label][0] ?? '';\n  }\n}\n\nexport type { WrSpeedDialAction, WrSpeedDialDirection } from './interfaces';\n","<button\n  #trigger\n  type=\"button\"\n  class=\"wr-speed-dial__trigger\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"menuId\"\n  aria-haspopup=\"menu\"\n  [attr.aria-label]=\"resolvedTriggerLabel()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onTrigger()\"\n>\n  <wr-icon [name]=\"icon()\" />\n</button>\n\n<ul class=\"wr-speed-dial__actions\" role=\"menu\" [attr.id]=\"menuId\">\n  @for (action of actions(); track action.id) {\n    <!--\n      role=\"none\" is load-bearing: role=\"menu\" on the <ul> strips the implicit\n      list semantics from its children, so an unroled <li> sits between the menu\n      and its menuitem and breaks the required menu -> menuitem parentage.\n      Marking it presentational restores the direct relationship.\n    -->\n    <li class=\"wr-speed-dial__action-wrap\" role=\"none\" [style.--wr-speed-dial-i]=\"$index + 1\">\n      <button\n        type=\"button\"\n        class=\"wr-speed-dial__action\"\n        role=\"menuitem\"\n        [attr.aria-label]=\"action.label\"\n        [title]=\"action.label\"\n        [disabled]=\"disabled()\"\n        (click)=\"onPick(action)\"\n      >\n        @if (action.icon) {\n          <wr-icon [name]=\"action.icon\" />\n        } @else {\n          <span>{{ initial(action.label) }}</span>\n        }\n      </button>\n    </li>\n  }\n</ul>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-speed-dial.mjs","sources":["../../../projects/lib/speed-dial/speed-dial.ts","../../../projects/lib/speed-dial/speed-dial.html","../../../projects/lib/speed-dial/ngwr-speed-dial.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  viewChild,\n} from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon, type WrIconName } from 'ngwr/icon';\n\nimport type { WrSpeedDialAction, WrSpeedDialDirection } from './interfaces';\n\nlet menuUid = 0;\n\n/**\n * Floating action button that expands into a fan of secondary actions on click.\n * Place inside a positioned container or near `position: fixed` — the component\n * itself doesn't pin to the viewport.\n *\n * @example\n * ```html\n * <wr-speed-dial\n *   [actions]=\"[\n *     { id: 'new', label: 'New', icon: 'add' },\n *     { id: 'edit', label: 'Edit', icon: 'cog' }\n *   ]\"\n *   (pick)=\"onPick($event)\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/speed-dial\n */\n@Component({\n  selector: 'wr-speed-dial',\n  templateUrl: './speed-dial.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()', '(keydown)': 'onKeydown($event)' },\n  imports: [WrIcon],\n})\nexport class WrSpeedDial {\n  readonly actions = input<readonly WrSpeedDialAction[]>([]);\n\n  /**\n   * Accessible name of the trigger. Falls back to `speedDial.label`, then\n   * `'Actions'` — the trigger is icon-only, so without this it has no name at all.\n   */\n  readonly triggerLabel = input<string | null>(null);\n\n  protected readonly resolvedTriggerLabel = useI18nText(this.triggerLabel, 'speedDial.label', 'Actions');\n\n  /** Direction the actions fan out. @default 'up' */\n  readonly direction = input<WrSpeedDialDirection>('up');\n\n  /** Two-way bindable open state. @default false */\n  readonly open = model(false);\n\n  /** Icon for the main trigger button. @default 'add' */\n  readonly icon = input<WrIconName>('add');\n\n  /** Disable interaction. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Pad the host toward the dial `direction` with `env(safe-area-inset-*)`.\n   * Only matters when the consumer pins the dial to that edge of the\n   * viewport; otherwise it has no effect. @default false\n   */\n  readonly safeArea = input(false, { transform: coerceBooleanProperty });\n\n  /** Fires when the user picks one of the actions. */\n  readonly pick = output<WrSpeedDialAction>();\n\n  /** Id the trigger's `aria-controls` points at. */\n  protected readonly menuId = `wr-speed-dial-menu-${++menuUid}`;\n\n  protected readonly triggerEl = viewChild<ElementRef<HTMLButtonElement>>('trigger');\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  constructor() {\n    // A disabled trigger cannot be pressed, and the trigger is the only way to close\n    // the dial — so being disabled while open left it fanned out with no way back.\n    effect(() => {\n      if (this.disabled() && this.open()) this.open.set(false);\n    });\n  }\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-speed-dial', `wr-speed-dial--${this.direction()}`];\n    if (this.open()) parts.push('wr-speed-dial--open');\n    if (this.disabled()) parts.push('wr-speed-dial--disabled');\n    if (this.safeArea()) parts.push('wr-speed-dial--safe-area');\n    return parts.join(' ');\n  });\n\n  protected onTrigger(): void {\n    if (this.disabled()) return;\n    this.open.update(v => !v);\n  }\n\n  protected onPick(action: WrSpeedDialAction): void {\n    if (this.disabled()) return;\n    this.open.set(false);\n    // Take the focus back before the action goes — the collapsed wrapper turns\n    // `visibility: hidden`, and a browser blurs an element it hides, so the caret\n    // landed on `<body>` and the next Tab restarted at the top of the document.\n    // Escape already did this; the SUCCESS path did not.\n    //\n    // Before the emit, not after: `pick` is where a consumer opens a dialog or\n    // navigates, and such a handler moves focus itself — focusing afterwards would\n    // yank the caret back onto the trigger. `wr-dropdown` sequences it the same way.\n    //\n    // Only when the caret is inside the dial: Safari does not focus a button on\n    // mouse-down, so an unguarded call would steal it from wherever the user is.\n    if (this.host.nativeElement.contains(this.host.nativeElement.ownerDocument.activeElement)) {\n      this.triggerEl()?.nativeElement.focus();\n    }\n    this.pick.emit(action);\n  }\n\n  /**\n   * Escape closes the dial and hands the caret back. The actions are ordinary buttons\n   * in the tab order, so without this a keyboard user who opened the dial had to tab\n   * through every action to leave it.\n   */\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Escape' || !this.open()) return;\n    event.preventDefault();\n    this.open.set(false);\n    this.triggerEl()?.nativeElement.focus();\n  }\n\n  /**\n   * First GLYPH of the label, for an action with no icon. `charAt(0)` returns one\n   * UTF-16 code unit, which cuts an astral character (an emoji) in half and renders a\n   * replacement character.\n   */\n  protected initial(label: string): string {\n    return [...label][0] ?? '';\n  }\n}\n\nexport type { WrSpeedDialAction, WrSpeedDialDirection } from './interfaces';\n","<button\n  #trigger\n  type=\"button\"\n  class=\"wr-speed-dial__trigger\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"menuId\"\n  [attr.aria-label]=\"resolvedTriggerLabel()\"\n  [disabled]=\"disabled()\"\n  (click)=\"onTrigger()\"\n>\n  <wr-icon [name]=\"icon()\" />\n</button>\n\n<!--\n  A LIST of buttons, deliberately not a `role=\"menu\"`. The dial used to announce\n  aria-haspopup=\"menu\" over role=\"menuitem\" buttons while handling no menu key at\n  all — no arrows, no Home/End, no focus moving in on open — and the actions were\n  N tab stops rather than the pattern's one. That role also puts a screen reader\n  into focus mode, so the arrow keys it promises stop reading the page and then do\n  nothing here. The structure now says what the component does: a disclosure\n  button (aria-expanded / aria-controls) revealing ordinary buttons that Tab\n  reaches and Enter activates, with Escape as the way back.\n\n  `role=\"list\"` is written out because `list-style: none` (styles/_index.scss)\n  drops the implicit list semantics in Safari.\n-->\n<ul class=\"wr-speed-dial__actions\" role=\"list\" [attr.id]=\"menuId\">\n  @for (action of actions(); track action.id) {\n    <li class=\"wr-speed-dial__action-wrap\" [style.--wr-speed-dial-i]=\"$index + 1\">\n      <button\n        type=\"button\"\n        class=\"wr-speed-dial__action\"\n        [attr.aria-label]=\"action.label\"\n        [title]=\"action.label\"\n        [disabled]=\"disabled()\"\n        (click)=\"onPick(action)\"\n      >\n        @if (action.icon) {\n          <wr-icon [name]=\"action.icon\" />\n        } @else {\n          <span>{{ initial(action.label) }}</span>\n        }\n      </button>\n    </li>\n  }\n</ul>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-spinner.mjs

@@ -42,10 +42,10 @@ class WrSpinner {
         return size === 'md' ? 'wr-spinner' : `wr-spinner wr-spinner--${size}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrSpinner, isStandalone: true, selector: "wr-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class": "classes()" } }, ngImport: i0, template: "<svg viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n  <circle class=\"wr-spinner__path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\" />\n</svg>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: WrSpinner, isStandalone: true, selector: "wr-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class": "classes()" } }, ngImport: i0, template: "<svg viewBox=\"0 0 50 50\" aria-hidden=\"true\">\n  <circle class=\"wr-spinner__path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"5\" />\n</svg>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSpinner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrSpinner, decorators: [{
             type: Component,
             args: [{ selector: 'wr-spinner', encapsulation: ViewEncapsulation.None, host: {
                         role: 'status',

package/fesm2022/ngwr-splash-cursor-testing.mjs

@@ -0,0 +1,89 @@
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Test harness for `<wr-splash-cursor>` — a WebGL fluid that splashes dye under the
+ * pointer.
+ *
+ * **This is a deliberately small surface, and the reason is the component.** The
+ * simulation is GL programs and framebuffers driven by `window` pointer listeners; the
+ * layout is `position: fixed`, `inset: 0`, `z-index: 50` and a `100dvh` canvas, all of
+ * it in the stylesheet. A unit test gets no WebGL context — the simulation is never
+ * constructed — and loads no stylesheet, so asking `getCssValue('position')` would
+ * answer `static` about a component whose whole layout contract is `fixed`. Three
+ * questions survive that, and they are the three below.
+ *
+ * There is no `isSimulating()`, `getSplatCount()` or `splat()`: the simulation returns
+ * `null` the moment the context is refused, so every one of those would report on
+ * something that was never built. No `moveMouse()` either — the listeners live on
+ * `window` and are only attached once a context exists, so a dispatched move reaches
+ * nothing. And no `isReducedMotion()` or `hasWebGL()`: the component renders
+ * byte-identical DOM whether it is running, standing down for reduced motion, or on a
+ * machine with no WebGL at all, so any answer would be the same for a working component
+ * and a broken one.
+ *
+ * @example
+ * ```ts
+ * const splash = await loader.getHarness(WrSplashCursorHarness);
+ *
+ * expect(await splash.isFullscreen()).toBe(true);
+ * expect(await splash.isDecorative()).toBe(true);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrSplashCursorHarness extends ComponentHarness {
+    static hostSelector = 'wr-splash-cursor';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrSplashCursorHarness, options).addOption('fullscreen', options.fullscreen, async (harness, fullscreen) => (await harness.isFullscreen()) === fullscreen);
+    }
+    /**
+     * Whether the effect covers the whole viewport, rather than filling the nearest
+     * positioned ancestor.
+     *
+     * The component's one behavioural switch: fullscreen is a fixed, click-through
+     * overlay above the page, contained is an absolutely positioned box whose walls the
+     * dye collides with. Note what is being read — there is no `--fullscreen` class, only
+     * a `--contained` one written from a NEGATED binding, so this method answers the
+     * absence of a class. That inversion is exactly the kind that gets flipped in a
+     * refactor and looks fine on a page where the effect is full-viewport anyway, which
+     * is the whole reason the method exists.
+     */
+    async isFullscreen() {
+        return !(await (await this.host()).hasClass('wr-splash-cursor--contained'));
+    }
+    /**
+     * Whether the effect is hidden from assistive tech.
+     *
+     * It has no text and nothing to say, and at full size it sits in front of the entire
+     * page — so losing this puts a nameless graphic over everything a screen reader is
+     * trying to get through.
+     */
+    async isDecorative() {
+        return (await (await this.locatorFor('.wr-splash-cursor__canvas')()).getAttribute('aria-hidden')) === 'true';
+    }
+    /**
+     * Whether the drawing surface is in the markup.
+     *
+     * It is there in all three states where nothing is ever drawn on it — prerendered on
+     * the server, WebGL refused, or reduced motion — because the documented contract is
+     * that the component renders nothing VISIBLE and stops, never that it renders no
+     * element and never that it throws on a null context.
+     */
+    async hasCanvas() {
+        return (await this.locatorForOptional('.wr-splash-cursor__canvas')()) !== null;
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrSplashCursorHarness };
+//# sourceMappingURL=ngwr-splash-cursor-testing.mjs.map

package/fesm2022/ngwr-splash-cursor-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-splash-cursor-testing.mjs","sources":["../../../projects/lib/splash-cursor/testing/wr-splash-cursor-harness.ts","../../../projects/lib/splash-cursor/testing/ngwr-splash-cursor-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrSplashCursorHarnessFilters } from './interfaces';\n\n/**\n * Test harness for `<wr-splash-cursor>` — a WebGL fluid that splashes dye under the\n * pointer.\n *\n * **This is a deliberately small surface, and the reason is the component.** The\n * simulation is GL programs and framebuffers driven by `window` pointer listeners; the\n * layout is `position: fixed`, `inset: 0`, `z-index: 50` and a `100dvh` canvas, all of\n * it in the stylesheet. A unit test gets no WebGL context — the simulation is never\n * constructed — and loads no stylesheet, so asking `getCssValue('position')` would\n * answer `static` about a component whose whole layout contract is `fixed`. Three\n * questions survive that, and they are the three below.\n *\n * There is no `isSimulating()`, `getSplatCount()` or `splat()`: the simulation returns\n * `null` the moment the context is refused, so every one of those would report on\n * something that was never built. No `moveMouse()` either — the listeners live on\n * `window` and are only attached once a context exists, so a dispatched move reaches\n * nothing. And no `isReducedMotion()` or `hasWebGL()`: the component renders\n * byte-identical DOM whether it is running, standing down for reduced motion, or on a\n * machine with no WebGL at all, so any answer would be the same for a working component\n * and a broken one.\n *\n * @example\n * ```ts\n * const splash = await loader.getHarness(WrSplashCursorHarness);\n *\n * expect(await splash.isFullscreen()).toBe(true);\n * expect(await splash.isDecorative()).toBe(true);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrSplashCursorHarness extends ComponentHarness {\n  static hostSelector = 'wr-splash-cursor';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrSplashCursorHarnessFilters = {}): HarnessPredicate<WrSplashCursorHarness> {\n    return new HarnessPredicate(WrSplashCursorHarness, options).addOption(\n      'fullscreen',\n      options.fullscreen,\n      async (harness, fullscreen) => (await harness.isFullscreen()) === fullscreen\n    );\n  }\n\n  /**\n   * Whether the effect covers the whole viewport, rather than filling the nearest\n   * positioned ancestor.\n   *\n   * The component's one behavioural switch: fullscreen is a fixed, click-through\n   * overlay above the page, contained is an absolutely positioned box whose walls the\n   * dye collides with. Note what is being read — there is no `--fullscreen` class, only\n   * a `--contained` one written from a NEGATED binding, so this method answers the\n   * absence of a class. That inversion is exactly the kind that gets flipped in a\n   * refactor and looks fine on a page where the effect is full-viewport anyway, which\n   * is the whole reason the method exists.\n   */\n  async isFullscreen(): Promise<boolean> {\n    return !(await (await this.host()).hasClass('wr-splash-cursor--contained'));\n  }\n\n  /**\n   * Whether the effect is hidden from assistive tech.\n   *\n   * It has no text and nothing to say, and at full size it sits in front of the entire\n   * page — so losing this puts a nameless graphic over everything a screen reader is\n   * trying to get through.\n   */\n  async isDecorative(): Promise<boolean> {\n    return (await (await this.locatorFor('.wr-splash-cursor__canvas')()).getAttribute('aria-hidden')) === 'true';\n  }\n\n  /**\n   * Whether the drawing surface is in the markup.\n   *\n   * It is there in all three states where nothing is ever drawn on it — prerendered on\n   * the server, WebGL refused, or reduced motion — because the documented contract is\n   * that the component renders nothing VISIBLE and stops, never that it renders no\n   * element and never that it throws on a null context.\n   */\n  async hasCanvas(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-splash-cursor__canvas')()) !== null;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAMH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;AACG,MAAO,qBAAsB,SAAQ,gBAAgB,CAAA;AACzD,IAAA,OAAO,YAAY,GAAG,kBAAkB;;AAGxC,IAAA,OAAO,IAAI,CAAC,OAAA,GAAwC,EAAE,EAAA;AACpD,QAAA,OAAO,IAAI,gBAAgB,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAC,SAAS,CACnE,YAAY,EACZ,OAAO,CAAC,UAAU,EAClB,OAAO,OAAO,EAAE,UAAU,KAAK,CAAC,MAAM,OAAO,CAAC,YAAY,EAAE,MAAM,UAAU,CAC7E;IACH;AAEA;;;;;;;;;;;AAWG;AACH,IAAA,MAAM,YAAY,GAAA;AAChB,QAAA,OAAO,EAAE,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAC,6BAA6B,CAAC,CAAC;IAC7E;AAEA;;;;;;AAMG;AACH,IAAA,MAAM,YAAY,GAAA;QAChB,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,EAAE,EAAE,YAAY,CAAC,aAAa,CAAC,MAAM,MAAM;IAC9G;AAEA;;;;;;;AAOG;AACH,IAAA,MAAM,SAAS,GAAA;AACb,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,kBAAkB,CAAC,2BAA2B,CAAC,EAAE,MAAM,IAAI;IAChF;;;AC3FF;;AAEG;;;;"}

package/fesm2022/ngwr-splash-cursor.mjs

@@ -951,10 +951,10 @@ class WrSplashCursor {
                 onCleanup(teardown);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSplashCursor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: WrSplashCursor, isStandalone: true, selector: "wr-splash-cursor", inputs: { fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, simResolution: { classPropertyName: "simResolution", publicName: "simResolution", isSignal: true, isRequired: false, transformFunction: null }, dyeResolution: { classPropertyName: "dyeResolution", publicName: "dyeResolution", isSignal: true, isRequired: false, transformFunction: null }, densityDissipation: { classPropertyName: "densityDissipation", publicName: "densityDissipation", isSignal: true, isRequired: false, transformFunction: null }, velocityDissipation: { classPropertyName: "velocityDissipation", publicName: "velocityDissipation", isSignal: true, isRequired: false, transformFunction: null }, pressure: { classPropertyName: "pressure", publicName: "pressure", isSignal: true, isRequired: false, transformFunction: null }, pressureIterations: { classPropertyName: "pressureIterations", publicName: "pressureIterations", isSignal: true, isRequired: false, transformFunction: null }, curl: { classPropertyName: "curl", publicName: "curl", isSignal: true, isRequired: false, transformFunction: null }, splatRadius: { classPropertyName: "splatRadius", publicName: "splatRadius", isSignal: true, isRequired: false, transformFunction: null }, splatForce: { classPropertyName: "splatForce", publicName: "splatForce", isSignal: true, isRequired: false, transformFunction: null }, shading: { classPropertyName: "shading", publicName: "shading", isSignal: true, isRequired: false, transformFunction: null }, colorUpdateSpeed: { classPropertyName: "colorUpdateSpeed", publicName: "colorUpdateSpeed", isSignal: true, isRequired: false, transformFunction: null }, rainbow: { classPropertyName: "rainbow", publicName: "rainbow", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-splash-cursor--contained": "!fullscreen()" }, classAttribute: "wr-splash-cursor" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas class="wr-splash-cursor__canvas" aria-hidden="true"></canvas>', isInline: true, styles: [".wr-splash-cursor{position:fixed;inset:0;z-index:50;display:block;pointer-events:none}.wr-splash-cursor__canvas{display:block;width:100vw;height:100vh;height:100dvh}.wr-splash-cursor--contained{position:absolute;z-index:0}.wr-splash-cursor--contained .wr-splash-cursor__canvas{width:100%;height:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrSplashCursor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: WrSplashCursor, isStandalone: true, selector: "wr-splash-cursor", inputs: { fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, simResolution: { classPropertyName: "simResolution", publicName: "simResolution", isSignal: true, isRequired: false, transformFunction: null }, dyeResolution: { classPropertyName: "dyeResolution", publicName: "dyeResolution", isSignal: true, isRequired: false, transformFunction: null }, densityDissipation: { classPropertyName: "densityDissipation", publicName: "densityDissipation", isSignal: true, isRequired: false, transformFunction: null }, velocityDissipation: { classPropertyName: "velocityDissipation", publicName: "velocityDissipation", isSignal: true, isRequired: false, transformFunction: null }, pressure: { classPropertyName: "pressure", publicName: "pressure", isSignal: true, isRequired: false, transformFunction: null }, pressureIterations: { classPropertyName: "pressureIterations", publicName: "pressureIterations", isSignal: true, isRequired: false, transformFunction: null }, curl: { classPropertyName: "curl", publicName: "curl", isSignal: true, isRequired: false, transformFunction: null }, splatRadius: { classPropertyName: "splatRadius", publicName: "splatRadius", isSignal: true, isRequired: false, transformFunction: null }, splatForce: { classPropertyName: "splatForce", publicName: "splatForce", isSignal: true, isRequired: false, transformFunction: null }, shading: { classPropertyName: "shading", publicName: "shading", isSignal: true, isRequired: false, transformFunction: null }, colorUpdateSpeed: { classPropertyName: "colorUpdateSpeed", publicName: "colorUpdateSpeed", isSignal: true, isRequired: false, transformFunction: null }, rainbow: { classPropertyName: "rainbow", publicName: "rainbow", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-splash-cursor--contained": "!fullscreen()" }, classAttribute: "wr-splash-cursor" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas class="wr-splash-cursor__canvas" aria-hidden="true"></canvas>', isInline: true, styles: [".wr-splash-cursor{position:fixed;inset:0;z-index:50;display:block;pointer-events:none}.wr-splash-cursor__canvas{display:block;width:100vw;height:100vh;height:100dvh}.wr-splash-cursor--contained{position:absolute;z-index:0}.wr-splash-cursor--contained .wr-splash-cursor__canvas{width:100%;height:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSplashCursor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrSplashCursor, decorators: [{
             type: Component,
             args: [{ selector: 'wr-splash-cursor', template: '<canvas #canvas class="wr-splash-cursor__canvas" aria-hidden="true"></canvas>', encapsulation: ViewEncapsulation.None, host: {
                         class: 'wr-splash-cursor',

package/fesm2022/ngwr-split-text-testing.mjs

@@ -0,0 +1,224 @@
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** The animated pieces — one per character or per word, whitespace excluded. */
+const PIECE = '.wr-split-text__piece';
+/** The whitespace runs between them, rendered but never staggered. */
+const SPACE = '.wr-split-text__space';
+/** The readable copy of the string, carried once and hidden with CSS. */
+const SR_ONLY = '.wr-split-text__sr-only';
+/**
+ * An inline `opacity` declaration — written on every piece the tween touches.
+ *
+ * `motionToStyle` always produces an opacity, whether or not `from` declared one, and
+ * the same property is re-committed when the tween finishes. Matched off the `style`
+ * ATTRIBUTE, never through `getCssValue`: a computed style answers `1` for a piece
+ * nothing was ever written to, which is the exact case this has to distinguish.
+ */
+const INLINE_OPACITY = /(?:^|;)\s*opacity\s*:/;
+/** The host's own alignment declaration, as the host binding wrote it. */
+const INLINE_TEXT_ALIGN = /(?:^|;)\s*text-align\s*:\s*([^;]+)/;
+/** Exactly what the element holds — untrimmed, unlike `TestElement.text()`. */
+async function rawText(element) {
+    return (await element.getProperty('textContent')) ?? '';
+}
+/**
+ * Test harness for `<wr-split-text>`.
+ *
+ * **The tween is unreadable from a test, and the absent methods are absent for that
+ * reason.** Each piece is animated from a `from` motion state to a `to` one through the
+ * Web Animations API, started by an `IntersectionObserver`. A unit test has no layout,
+ * no compositor and no WAAPI, so there is no `getOpacity()` and no `getTransform()`:
+ * both would report the frozen staged value in jsdom and a value the compositor is not
+ * painting in a browser. There is no `getFromState()` / `getToState()` either — those
+ * objects only reach the DOM as staged inline styles, on the one path that throws here,
+ * so reporting them would mean re-deriving an input from a string the component may
+ * never have written. No `isAnimating()`, no `whenAnimationComplete()`: nothing in the
+ * document says a tween is running, and completion is the `animationComplete` OUTPUT,
+ * which the host binds. No `enterViewport()` / `trigger()`, because an observer is not
+ * reachable from a `TestElement` — and observation here is additionally gated behind
+ * `document.fonts.ready`, which jsdom does not have, so a `waitForFonts()` would resolve
+ * instantly and prove nothing about the gating it claimed to test. Nothing measures
+ * either: `getLineCount()` / `didItWrap()` would need layout (and `lines` is not a split
+ * this port supports), and the `overflow: hidden` mask with its descender compensation
+ * is a stylesheet, which a test runs none of.
+ *
+ * **What is real is the split, the accessible layer and the alignment.** The string is
+ * carried once in a visually-hidden span and every drawn piece is `aria-hidden`, so
+ * {@link getAccessibleText} is what is heard while {@link getPieces} is what is drawn —
+ * two questions, and a spec asserting only the second would pass on a component that
+ * spells the text out letter by letter. {@link getRenderedText} closes the loop by
+ * putting the pieces and the spaces back together: the split has to be lossless, and
+ * that comparison is what catches a dropped space or a halved surrogate pair. Whether
+ * the hidden copy is genuinely off-screen is CSS, so nothing here claims to know.
+ *
+ * **{@link getTextAlign} is the one input this component reflects**, written straight
+ * onto the host as an inline style — an honest read with no layout involved, unlike
+ * anything else about how the text is arranged. And {@link hasStagedMotion} is the one
+ * fact about the tween worth pinning: that the pieces were taken over, not that anything
+ * is moving.
+ *
+ * Driving the reveal is the spec's job — jsdom supplies neither half of it, and the font
+ * gate defers observation by a microtask:
+ *
+ * ```ts
+ * // Before TestBed.createComponent — keep the callbacks so the spec can fire them.
+ * vi.stubGlobal('IntersectionObserver', StubObserver);
+ * // Otherwise `el.animate(...)` throws mid-stagger and leaves the DOM half-staged.
+ * Reflect.set(Element.prototype, 'animate', () => ({ cancel: () => undefined, onfinish: null }));
+ * // …and always settle before tearing down: observation is queued off a promise, and
+ * // landing after destroy() registers a teardown on a dead DestroyRef (NG0911).
+ * await fixture.whenStable();
+ * ```
+ *
+ * @example
+ * ```ts
+ * const hero = await loader.getHarness(WrSplitTextHarness.with({ textAlign: 'center' }));
+ *
+ * expect(await hero.getPieces()).toEqual(['H', 'e', 'l', 'l', 'o']);
+ * expect(await hero.getRenderedText()).toBe(await hero.getAccessibleText());
+ * expect(await hero.isTextHidden()).toBe(true);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrSplitTextHarness extends ComponentHarness {
+    static hostSelector = 'wr-split-text';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrSplitTextHarness, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getAccessibleText(), text))
+            .addOption('pieceCount', options.pieceCount, async (harness, count) => (await harness.getPieceCount()) === count)
+            .addOption('textAlign', options.textAlign, async (harness, align) => (await harness.getTextAlign()) === align);
+    }
+    pieces = this.locatorForAll(PIECE);
+    spaces = this.locatorForAll(SPACE);
+    /**
+     * The whole string, as the one readable copy holds it.
+     *
+     * All a screen reader gets, since every drawn piece is out of the tree — lose this
+     * span and the component becomes a nameless pile of hidden spans, with no other
+     * symptom anywhere in the DOM.
+     *
+     * Untrimmed, deliberately: leading and trailing whitespace is content the split has to
+     * carry, and {@link getRenderedText} is meant to compare equal to this. A trimmed read
+     * on one side of that comparison would forgive the case it exists to catch.
+     */
+    async getAccessibleText() {
+        return rawText(await this.locatorFor(SR_ONLY)());
+    }
+    /**
+     * The animated pieces, in document order — one per character, or one per word.
+     *
+     * The split the stagger runs over: `['H', 'i']` at the default `splitType="chars"`
+     * against `['Hi', 'there']` for `"words"`, and `['a', '🚀']` for a surrogate pair the
+     * code-point split kept whole instead of halving into two broken glyphs. Whitespace is
+     * not here — it is drawn separately and never staggered, so see {@link getSpaceCount}.
+     */
+    async getPieces() {
+        return Promise.all((await this.pieces()).map(rawText));
+    }
+    /**
+     * How many pieces the stagger runs over.
+     *
+     * `delay` × this is the real length of the effect, and the only number about the
+     * animation present in the document.
+     */
+    async getPieceCount() {
+        return (await this.pieces()).length;
+    }
+    /**
+     * How many whitespace runs sit between the pieces.
+     *
+     * Its own method because whitespace is deliberately excluded from the animated set:
+     * reclassifying spaces as pieces would leave {@link getRenderedText} identical, change
+     * the stagger count and the rhythm of the reveal, and show up nowhere else.
+     */
+    async getSpaceCount() {
+        return (await this.spaces()).length;
+    }
+    /**
+     * Everything the component drew, pieces and spaces together, in document order.
+     *
+     * The assertion this exists for is `getRenderedText() === getAccessibleText()`: the
+     * split must be lossless. A swallowed space, a re-split that dropped a character or a
+     * surrogate pair cut in half all leave the accessible copy intact and are invisible
+     * from anywhere else.
+     */
+    async getRenderedText() {
+        const parts = await this.locatorForAll(`${PIECE}, ${SPACE}`)();
+        return (await Promise.all(parts.map(rawText))).join('');
+    }
+    /**
+     * Whether every drawn piece is out of the accessibility tree.
+     *
+     * The defect this component exists to avoid is a screen reader reading
+     * `H. e. l. l. o.`, and one piece missing `aria-hidden` brings it back — so this is
+     * all-or-nothing, across both element kinds: a readable space is heard as a pause in
+     * the middle of a word.
+     *
+     * Throws when the split produced nothing at all. An empty run of elements satisfies
+     * "every one of them is hidden" without anything being hidden, which is also what a
+     * component that stopped rendering its pieces would report.
+     */
+    async isTextHidden() {
+        const parts = await this.locatorForAll(`${PIECE}, ${SPACE}`)();
+        if (parts.length === 0) {
+            throw new Error('WrSplitTextHarness.isTextHidden(): this <wr-split-text> drew no pieces, so there is nothing to be ' +
+                'hidden from a screen reader and "true" would be a vacuous answer — the same one a component that ' +
+                'stopped splitting its text would give. Check `text` is set, or ask getPieceCount().');
+        }
+        const hidden = await Promise.all(parts.map(part => part.getAttribute('aria-hidden')));
+        return hidden.every(value => value === 'true');
+    }
+    /**
+     * The alignment the host was given, as the component wrote it.
+     *
+     * Off the inline `style` attribute rather than through `getCssValue`, and the
+     * difference is not pedantry: computed style answers for an element nobody wrote to —
+     * with the inherited or user-agent value — so a host that stopped reflecting the input
+     * altogether would keep reporting a plausible `left` or `start`. The attribute is the
+     * fact being asserted.
+     *
+     * `null` means the host carries no alignment at all, which the component never does:
+     * the binding is unconditional and the input defaults to `'center'`.
+     */
+    async getTextAlign() {
+        const match = INLINE_TEXT_ALIGN.exec((await (await this.host()).getAttribute('style')) ?? '');
+        return match ? match[1].trim() : null;
+    }
+    /**
+     * Whether the reveal has taken the pieces over — NOT whether anything is animating.
+     *
+     * Read off the inline `style` attribute the component writes itself, so it stays
+     * `true` once the reveal has finished: the tween commits its end state back to the
+     * same inline properties on `onfinish`. Anyone reaching for `isAnimating()` wants a
+     * frame, and there are no frames here.
+     *
+     * `false` is the answer worth asserting. It means no piece was written to, which is
+     * both the pre-trigger state and the reduced-motion promise — the component returns
+     * before staging anything, so a reader who asked for less motion cannot be left with
+     * text parked at `from.opacity: 0` by a tween that never runs.
+     *
+     * ANY piece counts, not all of them, and that is the conservative reading rather than
+     * a loose one: a stagger that stages the first piece and then throws leaves exactly
+     * one glyph invisible, which is a real failure — and one jsdom reproduces every time
+     * `Element.prototype.animate` is missing.
+     */
+    async hasStagedMotion() {
+        const styles = await Promise.all((await this.pieces()).map(piece => piece.getAttribute('style')));
+        return styles.some(style => INLINE_OPACITY.test(style ?? ''));
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrSplitTextHarness };
+//# sourceMappingURL=ngwr-split-text-testing.mjs.map

package/fesm2022/ngwr-split-text-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-split-text-testing.mjs","sources":["../../../projects/lib/split-text/testing/wr-split-text-harness.ts","../../../projects/lib/split-text/testing/ngwr-split-text-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate, type TestElement } from '@angular/cdk/testing';\n\nimport type { WrSplitTextHarnessFilters } from './interfaces';\n\n/** The animated pieces — one per character or per word, whitespace excluded. */\nconst PIECE = '.wr-split-text__piece';\n\n/** The whitespace runs between them, rendered but never staggered. */\nconst SPACE = '.wr-split-text__space';\n\n/** The readable copy of the string, carried once and hidden with CSS. */\nconst SR_ONLY = '.wr-split-text__sr-only';\n\n/**\n * An inline `opacity` declaration — written on every piece the tween touches.\n *\n * `motionToStyle` always produces an opacity, whether or not `from` declared one, and\n * the same property is re-committed when the tween finishes. Matched off the `style`\n * ATTRIBUTE, never through `getCssValue`: a computed style answers `1` for a piece\n * nothing was ever written to, which is the exact case this has to distinguish.\n */\nconst INLINE_OPACITY = /(?:^|;)\\s*opacity\\s*:/;\n\n/** The host's own alignment declaration, as the host binding wrote it. */\nconst INLINE_TEXT_ALIGN = /(?:^|;)\\s*text-align\\s*:\\s*([^;]+)/;\n\n/** Exactly what the element holds — untrimmed, unlike `TestElement.text()`. */\nasync function rawText(element: TestElement): Promise<string> {\n  return (await element.getProperty<string | null>('textContent')) ?? '';\n}\n\n/**\n * Test harness for `<wr-split-text>`.\n *\n * **The tween is unreadable from a test, and the absent methods are absent for that\n * reason.** Each piece is animated from a `from` motion state to a `to` one through the\n * Web Animations API, started by an `IntersectionObserver`. A unit test has no layout,\n * no compositor and no WAAPI, so there is no `getOpacity()` and no `getTransform()`:\n * both would report the frozen staged value in jsdom and a value the compositor is not\n * painting in a browser. There is no `getFromState()` / `getToState()` either — those\n * objects only reach the DOM as staged inline styles, on the one path that throws here,\n * so reporting them would mean re-deriving an input from a string the component may\n * never have written. No `isAnimating()`, no `whenAnimationComplete()`: nothing in the\n * document says a tween is running, and completion is the `animationComplete` OUTPUT,\n * which the host binds. No `enterViewport()` / `trigger()`, because an observer is not\n * reachable from a `TestElement` — and observation here is additionally gated behind\n * `document.fonts.ready`, which jsdom does not have, so a `waitForFonts()` would resolve\n * instantly and prove nothing about the gating it claimed to test. Nothing measures\n * either: `getLineCount()` / `didItWrap()` would need layout (and `lines` is not a split\n * this port supports), and the `overflow: hidden` mask with its descender compensation\n * is a stylesheet, which a test runs none of.\n *\n * **What is real is the split, the accessible layer and the alignment.** The string is\n * carried once in a visually-hidden span and every drawn piece is `aria-hidden`, so\n * {@link getAccessibleText} is what is heard while {@link getPieces} is what is drawn —\n * two questions, and a spec asserting only the second would pass on a component that\n * spells the text out letter by letter. {@link getRenderedText} closes the loop by\n * putting the pieces and the spaces back together: the split has to be lossless, and\n * that comparison is what catches a dropped space or a halved surrogate pair. Whether\n * the hidden copy is genuinely off-screen is CSS, so nothing here claims to know.\n *\n * **{@link getTextAlign} is the one input this component reflects**, written straight\n * onto the host as an inline style — an honest read with no layout involved, unlike\n * anything else about how the text is arranged. And {@link hasStagedMotion} is the one\n * fact about the tween worth pinning: that the pieces were taken over, not that anything\n * is moving.\n *\n * Driving the reveal is the spec's job — jsdom supplies neither half of it, and the font\n * gate defers observation by a microtask:\n *\n * ```ts\n * // Before TestBed.createComponent — keep the callbacks so the spec can fire them.\n * vi.stubGlobal('IntersectionObserver', StubObserver);\n * // Otherwise `el.animate(...)` throws mid-stagger and leaves the DOM half-staged.\n * Reflect.set(Element.prototype, 'animate', () => ({ cancel: () => undefined, onfinish: null }));\n * // …and always settle before tearing down: observation is queued off a promise, and\n * // landing after destroy() registers a teardown on a dead DestroyRef (NG0911).\n * await fixture.whenStable();\n * ```\n *\n * @example\n * ```ts\n * const hero = await loader.getHarness(WrSplitTextHarness.with({ textAlign: 'center' }));\n *\n * expect(await hero.getPieces()).toEqual(['H', 'e', 'l', 'l', 'o']);\n * expect(await hero.getRenderedText()).toBe(await hero.getAccessibleText());\n * expect(await hero.isTextHidden()).toBe(true);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrSplitTextHarness extends ComponentHarness {\n  static hostSelector = 'wr-split-text';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrSplitTextHarnessFilters = {}): HarnessPredicate<WrSplitTextHarness> {\n    return new HarnessPredicate(WrSplitTextHarness, options)\n      .addOption('text', options.text, (harness, text) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleText(), text)\n      )\n      .addOption('pieceCount', options.pieceCount, async (harness, count) => (await harness.getPieceCount()) === count)\n      .addOption('textAlign', options.textAlign, async (harness, align) => (await harness.getTextAlign()) === align);\n  }\n\n  private readonly pieces = this.locatorForAll(PIECE);\n  private readonly spaces = this.locatorForAll(SPACE);\n\n  /**\n   * The whole string, as the one readable copy holds it.\n   *\n   * All a screen reader gets, since every drawn piece is out of the tree — lose this\n   * span and the component becomes a nameless pile of hidden spans, with no other\n   * symptom anywhere in the DOM.\n   *\n   * Untrimmed, deliberately: leading and trailing whitespace is content the split has to\n   * carry, and {@link getRenderedText} is meant to compare equal to this. A trimmed read\n   * on one side of that comparison would forgive the case it exists to catch.\n   */\n  async getAccessibleText(): Promise<string> {\n    return rawText(await this.locatorFor(SR_ONLY)());\n  }\n\n  /**\n   * The animated pieces, in document order — one per character, or one per word.\n   *\n   * The split the stagger runs over: `['H', 'i']` at the default `splitType=\"chars\"`\n   * against `['Hi', 'there']` for `\"words\"`, and `['a', '🚀']` for a surrogate pair the\n   * code-point split kept whole instead of halving into two broken glyphs. Whitespace is\n   * not here — it is drawn separately and never staggered, so see {@link getSpaceCount}.\n   */\n  async getPieces(): Promise<string[]> {\n    return Promise.all((await this.pieces()).map(rawText));\n  }\n\n  /**\n   * How many pieces the stagger runs over.\n   *\n   * `delay` × this is the real length of the effect, and the only number about the\n   * animation present in the document.\n   */\n  async getPieceCount(): Promise<number> {\n    return (await this.pieces()).length;\n  }\n\n  /**\n   * How many whitespace runs sit between the pieces.\n   *\n   * Its own method because whitespace is deliberately excluded from the animated set:\n   * reclassifying spaces as pieces would leave {@link getRenderedText} identical, change\n   * the stagger count and the rhythm of the reveal, and show up nowhere else.\n   */\n  async getSpaceCount(): Promise<number> {\n    return (await this.spaces()).length;\n  }\n\n  /**\n   * Everything the component drew, pieces and spaces together, in document order.\n   *\n   * The assertion this exists for is `getRenderedText() === getAccessibleText()`: the\n   * split must be lossless. A swallowed space, a re-split that dropped a character or a\n   * surrogate pair cut in half all leave the accessible copy intact and are invisible\n   * from anywhere else.\n   */\n  async getRenderedText(): Promise<string> {\n    const parts = await this.locatorForAll(`${PIECE}, ${SPACE}`)();\n    return (await Promise.all(parts.map(rawText))).join('');\n  }\n\n  /**\n   * Whether every drawn piece is out of the accessibility tree.\n   *\n   * The defect this component exists to avoid is a screen reader reading\n   * `H. e. l. l. o.`, and one piece missing `aria-hidden` brings it back — so this is\n   * all-or-nothing, across both element kinds: a readable space is heard as a pause in\n   * the middle of a word.\n   *\n   * Throws when the split produced nothing at all. An empty run of elements satisfies\n   * \"every one of them is hidden\" without anything being hidden, which is also what a\n   * component that stopped rendering its pieces would report.\n   */\n  async isTextHidden(): Promise<boolean> {\n    const parts = await this.locatorForAll(`${PIECE}, ${SPACE}`)();\n\n    if (parts.length === 0) {\n      throw new Error(\n        'WrSplitTextHarness.isTextHidden(): this <wr-split-text> drew no pieces, so there is nothing to be ' +\n          'hidden from a screen reader and \"true\" would be a vacuous answer — the same one a component that ' +\n          'stopped splitting its text would give. Check `text` is set, or ask getPieceCount().'\n      );\n    }\n\n    const hidden = await Promise.all(parts.map(part => part.getAttribute('aria-hidden')));\n    return hidden.every(value => value === 'true');\n  }\n\n  /**\n   * The alignment the host was given, as the component wrote it.\n   *\n   * Off the inline `style` attribute rather than through `getCssValue`, and the\n   * difference is not pedantry: computed style answers for an element nobody wrote to —\n   * with the inherited or user-agent value — so a host that stopped reflecting the input\n   * altogether would keep reporting a plausible `left` or `start`. The attribute is the\n   * fact being asserted.\n   *\n   * `null` means the host carries no alignment at all, which the component never does:\n   * the binding is unconditional and the input defaults to `'center'`.\n   */\n  async getTextAlign(): Promise<string | null> {\n    const match = INLINE_TEXT_ALIGN.exec((await (await this.host()).getAttribute('style')) ?? '');\n    return match ? match[1].trim() : null;\n  }\n\n  /**\n   * Whether the reveal has taken the pieces over — NOT whether anything is animating.\n   *\n   * Read off the inline `style` attribute the component writes itself, so it stays\n   * `true` once the reveal has finished: the tween commits its end state back to the\n   * same inline properties on `onfinish`. Anyone reaching for `isAnimating()` wants a\n   * frame, and there are no frames here.\n   *\n   * `false` is the answer worth asserting. It means no piece was written to, which is\n   * both the pre-trigger state and the reduced-motion promise — the component returns\n   * before staging anything, so a reader who asked for less motion cannot be left with\n   * text parked at `from.opacity: 0` by a tween that never runs.\n   *\n   * ANY piece counts, not all of them, and that is the conservative reading rather than\n   * a loose one: a stagger that stages the first piece and then throws leaves exactly\n   * one glyph invisible, which is a real failure — and one jsdom reproduces every time\n   * `Element.prototype.animate` is missing.\n   */\n  async hasStagedMotion(): Promise<boolean> {\n    const styles = await Promise.all((await this.pieces()).map(piece => piece.getAttribute('style')));\n    return styles.some(style => INLINE_OPACITY.test(style ?? ''));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}