@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.151 → 2.0.0-next.152

package/src/components/alert-frame/alert-frame.ts

@@ -6,7 +6,7 @@ import {
   TemplateResult,
   HTMLTemplateResult,
 } from 'lit';
-import {property} from 'lit/decorators.js';
+import {property, query, state} from 'lit/decorators.js';
 import compentStyle from './alert-frame.css?inline';
 import {classMap} from 'lit/directives/class-map.js';
 import '../../icons/icon-alarm-badge.js';
@@ -15,12 +15,21 @@ import '../../icons/icon-caution-badge.js';
 import '../../icons/icon-critical-badge.js';
 import './diagnostic-badge.js';
 import {customElement} from '../../decorator.js';
-import {AlertType} from '../../types.js';
+import {
+  AlertType,
+  FlashingSpeed,
+  type ResolvedFlashingSpeed,
+} from '../../types.js';
 import {
   getAlertBadgeComponent,
   AlertBadgeComponent,
 } from '../../alert-severity.js';
-import {blinkingAll} from '../../palettes/blinking.js';
+import {FlashingController} from '../../palettes/flashing-controller.js';
+import {
+  roundedRectPath,
+  type RoundedRect,
+} from '../../svghelpers/rounded-rect.js';
+import {AlertFlashPhase, resolveFlashingSpeed} from '../../alert-severity.js';
 
 export {AlertType as ObcAlertFrameStatus} from '../../types.js';
 
@@ -56,6 +65,17 @@ export enum ObcAlertFrameMode {
   unackedRectified = 'unacked-rectified',
 }
 
+/**
+ * How the frame renders the on phase of a flash: `outline` grows the outline
+ * outward by 2 px in one step (the design); `outline-eased` grows it the same
+ * way over a 50 ms transition. The eased variant exists for design evaluation
+ * and may be removed (#1224).
+ */
+export enum ObcAlertFrameFlashEffect {
+  Outline = 'outline',
+  OutlineEased = 'outline-eased',
+}
+
 /**
  * Text size options for flip-flap typography.
  * - `regular`: Standard text size (default).
@@ -66,11 +86,33 @@ export enum AlertFrameTextSize {
   Large = 'large',
 }
 
+/** Wrapper geometry the dashed overlay is drawn from; measured, never derived from props. */
+interface DashBox {
+  width: number;
+  height: number;
+  thickness: number;
+  radii: RoundedRect['radii'];
+}
+
+/** Room the svg leaves around the box for the stroke's on-phase growth. */
+const DASH_FLASH_GROWTH_PX = 2;
+
+function sameDashBox(a: DashBox, b: DashBox | undefined): boolean {
+  return (
+    b !== undefined &&
+    a.width === b.width &&
+    a.height === b.height &&
+    a.thickness === b.thickness &&
+    a.radii.every((r, i) => r === b.radii[i])
+  );
+}
+
 export interface AlertFrameConfig {
   type?: ObcAlertFrameType;
   thickness?: ObcAlertFrameThickness;
   status?: AlertType;
   mode?: ObcAlertFrameMode;
+  flashingSpeed?: FlashingSpeed;
   textSize?: AlertFrameTextSize;
   showIcon?: boolean;
   showAlertCategoryIcon?: boolean;
@@ -89,7 +131,7 @@ export interface AlertFrameConfig {
  *   - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.
  * - **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.
  * - **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the level statuses (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`).
- * - **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default), `unacked-active`, and `unacked-rectified` — driving the blinking/animation treatment of the frame.
+ * - **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default, steady), `unacked-active` (flashes) and `unacked-rectified` (dashed, flashes) — and `flashingSpeed` picks the tempo.
  * - **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.
  * - **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.
  * - **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.
@@ -156,6 +198,12 @@ export interface AlertFrameConfig {
  * @property sharpEdgeTopRight - If true, the top-right corner will be sharp (not rounded).
  * @property sharpEdgeBottomLeft - If true, the bottom-left corner will be sharp (not rounded).
  * @property sharpEdgeBottomRight - If true, the bottom-right corner will be sharp (not rounded).
+ * @property flashingSpeed - Flash tempo: `default` resolves from the alert type and mode
+ *   (critical/alarm/high fast, warning/medium slow, low very slow, every rectified alert very
+ *   slow, caution and diagnostic fixed), `fast`, `slow`, `very-slow` force a tempo, `fixed`
+ *   never flashes. Acknowledged frames are always steady.
+ * @property flashEffect - `outline` (default) grows the outline by 2 px while on in one step;
+ *   `outline-eased` grows it over a 50 ms transition, a design-evaluation option.
  * @slot - Default slot for main alert content.
  * @slot icon - Custom icon for the flap (large-side-flip, bottom-flip).
  * @slot label - Label text for the bottom flap (bottom-flip only).
@@ -202,6 +250,129 @@ export class ObcAlertFrame extends LitElement {
   @property({type: String}) mode: ObcAlertFrameMode =
     ObcAlertFrameMode.ackedActive;
 
+  @property({type: String}) flashingSpeed: FlashingSpeed =
+    FlashingSpeed.Default;
+
+  @property({type: String}) flashEffect: ObcAlertFrameFlashEffect =
+    ObcAlertFrameFlashEffect.Outline;
+
+  protected readonly flashing = new FlashingController(
+    this,
+    () => this.resolvedFlashingSpeed
+  );
+
+  @state() private dashBox?: DashBox;
+
+  @query('.wrapper') private wrapper?: HTMLElement;
+
+  private dashObserver?: ResizeObserver;
+
+  private measureDash = (): void => {
+    const wrapper = this.wrapper;
+    if (!wrapper) {
+      return;
+    }
+    const style = getComputedStyle(wrapper);
+    const px = (value: string) => parseFloat(value) || 0;
+    const box: DashBox = {
+      width: wrapper.offsetWidth,
+      height: wrapper.offsetHeight,
+      thickness: px(style.getPropertyValue('--thickness')),
+      radii: [
+        px(style.borderTopLeftRadius),
+        px(style.borderTopRightRadius),
+        px(style.borderBottomRightRadius),
+        px(style.borderBottomLeftRadius),
+      ],
+    };
+    // Setting state from updated() re-renders; only do it for a real change.
+    if (!sameDashBox(box, this.dashBox)) {
+      this.dashBox = box;
+    }
+  };
+
+  override connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.requestUpdate();
+    }
+  }
+
+  override updated() {
+    const wantsDash =
+      this.mode === ObcAlertFrameMode.unackedRectified && this.isConnected;
+    if (wantsDash && !this.dashObserver && this.wrapper) {
+      this.dashObserver = new ResizeObserver(this.measureDash);
+      this.dashObserver.observe(this.wrapper);
+    }
+    if (wantsDash) {
+      // thickness and sharpEdge* change the radii without a resize.
+      this.measureDash();
+    }
+    if (!wantsDash && this.dashObserver) {
+      this.dashObserver.disconnect();
+      this.dashObserver = undefined;
+      this.dashBox = undefined;
+    }
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.dashObserver?.disconnect();
+    this.dashObserver = undefined;
+  }
+
+  private renderDash(): TemplateResult | typeof nothing {
+    const box = this.dashBox;
+    if (this.mode !== ObcAlertFrameMode.unackedRectified || !box) {
+      return nothing;
+    }
+    const pad = box.thickness + DASH_FLASH_GROWTH_PX;
+    // A second, wider path for the on phase would have longer corner arcs
+    // and its dashes would drift around the frame.
+    const centreline: RoundedRect = {
+      x: pad - box.thickness / 2,
+      y: pad - box.thickness / 2,
+      width: box.width + box.thickness,
+      height: box.height + box.thickness,
+      // A radius of 0 is a sharp edge and must stay square.
+      radii: box.radii.map((r) =>
+        r > 0 ? r + box.thickness / 2 : 0
+      ) as RoundedRect['radii'],
+    };
+    const width = box.width + 2 * pad;
+    const height = box.height + 2 * pad;
+    return html`<svg
+      class="dash"
+      aria-hidden="true"
+      width=${width}
+      height=${height}
+      viewBox="0 0 ${width} ${height}"
+      style="--dash-pad: ${pad}px"
+    >
+      <path d=${roundedRectPath(centreline)}></path>
+    </svg>`;
+  }
+
+  get resolvedFlashingSpeed(): ResolvedFlashingSpeed {
+    switch (this.mode) {
+      case ObcAlertFrameMode.unackedActive:
+        return resolveFlashingSpeed(
+          this.flashingSpeed,
+          this.status,
+          AlertFlashPhase.Active
+        );
+      case ObcAlertFrameMode.unackedRectified:
+        return resolveFlashingSpeed(
+          this.flashingSpeed,
+          this.status,
+          AlertFlashPhase.Rectified
+        );
+      default:
+        return FlashingSpeed.Fixed;
+    }
+  }
+
   @property({type: Boolean, reflect: true}) wrapContent: boolean = false;
 
   @property({type: Boolean, reflect: true}) fullWidth: boolean = false;
@@ -237,50 +408,16 @@ export class ObcAlertFrame extends LitElement {
           'sharp-edge-bottom-left': this.sharpEdgeBottomLeft,
           'sharp-edge-bottom-right': this.sharpEdgeBottomRight,
           [this.mode]: true,
+          ['flash-' + this.resolvedFlashingSpeed]: true,
+          ['flash-effect-' + this.flashEffect]: true,
         })}
       >
         <slot></slot>
-        ${this.flap()}
+        ${this.renderDash()} ${this.flap()}
       </div>
     `;
   }
 
-  private _blinkAnimationCancel?: () => void;
-
-  private syncBlinking() {
-    if (
-      this.mode !== ObcAlertFrameMode.unackedActive &&
-      this._blinkAnimationCancel
-    ) {
-      this._blinkAnimationCancel();
-      this._blinkAnimationCancel = undefined;
-    }
-
-    if (
-      this.mode === ObcAlertFrameMode.unackedActive &&
-      !this._blinkAnimationCancel
-    ) {
-      this._blinkAnimationCancel = blinkingAll(this);
-    }
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    if (this.hasUpdated) {
-      this.syncBlinking();
-    }
-  }
-
-  override updated() {
-    this.syncBlinking();
-  }
-
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-    this._blinkAnimationCancel?.();
-    this._blinkAnimationCancel = undefined;
-  }
-
   private flap() {
     if (this.type === ObcAlertFrameType.Regular) {
       return nothing;
@@ -383,6 +520,7 @@ export function wrapWithAlertFrame(
     .thickness=${options.thickness ?? ObcAlertFrameThickness.Small}
     .status=${options.status ?? AlertType.Alarm}
     .mode=${options.mode ?? ObcAlertFrameMode.ackedActive}
+    .flashingSpeed=${options.flashingSpeed ?? FlashingSpeed.Default}
     .showIcon=${options.showIcon ?? false}
     .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}
     .wrapContent=${true}

package/src/components/alert-icon/alert-icon.spec.ts

@@ -3,74 +3,129 @@ import './alert-icon.js';
 import {ObcAlertIcon} from './alert-icon.js';
 import {render} from 'vitest-browser-lit';
 import {html} from 'lit';
-import {AlertType} from '../../types.js';
-
-describe('obc-alert-icon blinking lifecycle', () => {
-  async function setup(acknowledged = false) {
+import {AlertType, FlashingSpeed} from '../../types.js';
+
+function durations(el: HTMLElement): number[] {
+  return el
+    .getAnimations()
+    .map((a) => (a.effect as KeyframeEffect).getTiming().duration as number);
+}
+
+describe('obc-alert-icon flashing lifecycle', () => {
+  async function setup(
+    props: Partial<
+      Pick<
+        ObcAlertIcon,
+        'alertType' | 'acknowledged' | 'active' | 'flashingSpeed'
+      >
+    > = {}
+  ) {
     const screen = render(
       html`<obc-alert-icon
-        .alertType=${AlertType.Alarm}
-        .acknowledged=${acknowledged}
+        .alertType=${props.alertType ?? AlertType.Alarm}
+        .acknowledged=${props.acknowledged ?? false}
+        .active=${props.active}
+        .flashingSpeed=${props.flashingSpeed ?? FlashingSpeed.Default}
       ></obc-alert-icon>`
     );
-    const el = screen.baseElement.querySelector(
-      'obc-alert-icon'
-    ) as ObcAlertIcon;
+    const el = screen.container.querySelector('obc-alert-icon') as ObcAlertIcon;
     await el.updateComplete;
     return el;
   }
 
-  function wrapperAnimations(el: ObcAlertIcon) {
-    return el.getAnimations();
-  }
-
-  it('blinks for an unacknowledged blinking alert type', async () => {
+  it('flashes fast for an unacknowledged alarm', async () => {
     const el = await setup();
 
-    expect(wrapperAnimations(el).length).toBeGreaterThan(0);
+    expect(durations(el)).toEqual([800]);
+    expect(el.shadowRoot!.querySelector('.wrapper.flash-fast')).not.toBeNull();
+  });
+
+  it('flashes slow for a warning and very slow for level-low', async () => {
+    expect(durations(await setup({alertType: AlertType.Warning}))).toEqual([
+      1600,
+    ]);
+    expect(durations(await setup({alertType: AlertType.LevelLow}))).toEqual([
+      3200,
+    ]);
+  });
+
+  it('flashes very slow while rectified and unacknowledged', async () => {
+    expect(durations(await setup({active: false}))).toEqual([3200]);
+  });
+
+  it('never flashes caution or diagnostic', async () => {
+    expect(durations(await setup({alertType: AlertType.Caution}))).toEqual([]);
+    expect(
+      durations(await setup({alertType: AlertType.LevelDiagnostic}))
+    ).toEqual([]);
+  });
+
+  it('stays static for caution and diagnostic even with an explicit speed', async () => {
+    for (const alertType of [AlertType.Caution, AlertType.LevelDiagnostic]) {
+      const el = await setup({alertType, flashingSpeed: FlashingSpeed.Fast});
+      expect(el.getAnimations()).toHaveLength(0);
+      expect(el.shadowRoot!.querySelector('.wrapper .a')).toBeNull();
+      expect(el.shadowRoot!.querySelector('.wrapper')!.children).toHaveLength(
+        1
+      );
+    }
+  });
+
+  it('honours an explicit flashingSpeed unless acknowledged', async () => {
+    expect(durations(await setup({flashingSpeed: FlashingSpeed.Slow}))).toEqual(
+      [1600]
+    );
+    expect(
+      durations(await setup({flashingSpeed: FlashingSpeed.Fixed}))
+    ).toEqual([]);
+    expect(
+      durations(
+        await setup({flashingSpeed: FlashingSpeed.Fast, acknowledged: true})
+      )
+    ).toEqual([]);
   });
 
-  it('does not blink once acknowledged', async () => {
-    const el = await setup(true);
+  it('does not flash once acknowledged', async () => {
+    const el = await setup({acknowledged: true});
 
-    expect(wrapperAnimations(el)).toHaveLength(0);
+    expect(el.getAnimations()).toHaveLength(0);
   });
 
-  it('stops blinking when the alert is acknowledged', async () => {
+  it('stops flashing when the alert is acknowledged', async () => {
     const el = await setup();
-    expect(wrapperAnimations(el).length).toBeGreaterThan(0);
+    expect(el.getAnimations().length).toBeGreaterThan(0);
 
     el.acknowledged = true;
     await el.updateComplete;
 
-    expect(wrapperAnimations(el)).toHaveLength(0);
+    expect(el.getAnimations()).toHaveLength(0);
   });
 
-  it('resumes blinking after disconnect and reconnect', async () => {
+  it('resumes flashing after disconnect and reconnect', async () => {
     const el = await setup();
     const parent = el.parentElement!;
-    const initial = wrapperAnimations(el).length;
+    const initial = el.getAnimations().length;
     expect(initial).toBeGreaterThan(0);
 
     parent.removeChild(el);
-    expect(wrapperAnimations(el)).toHaveLength(0);
+    expect(el.getAnimations()).toHaveLength(0);
 
     // Reconnect without touching any property, so no Lit update is scheduled.
     parent.appendChild(el);
     await el.updateComplete;
 
-    expect(wrapperAnimations(el)).toHaveLength(initial);
+    expect(el.getAnimations()).toHaveLength(initial);
   });
 
   it('does not accumulate animations across repeated updates', async () => {
     const el = await setup();
-    const initial = wrapperAnimations(el).length;
+    const initial = el.getAnimations().length;
 
     el.active = true;
     await el.updateComplete;
     el.silenced = true;
     await el.updateComplete;
 
-    expect(wrapperAnimations(el)).toHaveLength(initial);
+    expect(el.getAnimations()).toHaveLength(initial);
   });
 });

package/src/components/alert-icon/alert-icon.stories.ts

@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/web-components-vite';
 import {ObcAlertIcon} from './alert-icon.js';
 import './alert-icon.js';
 import {html} from 'lit';
-import {AlertType} from '../../types.js';
+import {AlertType, FlashingSpeed} from '../../types.js';
 
 const meta: Meta<typeof ObcAlertIcon> = {
   title: 'Application Components/Alerts/Alert Icon',
@@ -13,8 +13,13 @@ const meta: Meta<typeof ObcAlertIcon> = {
     acknowledged: false,
     active: true,
     outline: false,
+    flashingSpeed: FlashingSpeed.Default,
   },
   argTypes: {
+    flashingSpeed: {
+      options: Object.values(FlashingSpeed),
+      control: {type: 'select'},
+    },
     type: {
       control: {type: 'select', options: Object.values(AlertType)},
     },
@@ -31,6 +36,7 @@ const meta: Meta<typeof ObcAlertIcon> = {
         .type=${args.type}
         .acknowledged=${args.acknowledged}
         .active=${args.active}
+        .flashingSpeed=${args.flashingSpeed}
       ></obc-alert-icon>
     </div>`,
 } satisfies Meta<ObcAlertIcon>;

package/src/components/alert-icon/alert-icon.ts

@@ -3,11 +3,15 @@ import {property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import '../../icons/icon-caution-color-iec.js';
 import {customElement} from '../../decorator.js';
-import {AlertType} from '../../types.js';
 import {
-  getAlertBlinkMode,
+  AlertType,
+  FlashingSpeed,
+  type ResolvedFlashingSpeed,
+} from '../../types.js';
+import {
+  AlertFlashPhase,
   getBamAlertTypeForBlinking,
-  supportsBlinking,
+  resolveFlashingSpeed,
 } from '../../alert-severity.js';
 import '../../icons/icon-alarm-badge-outline.js';
 import '../../icons/icon-warning-badge-outline.js';
@@ -50,7 +54,7 @@ import {
 import {lowSilencedA, lowSilencedB} from './icons/icon-low-silenced.js';
 import {lowRectifiedA, lowRectifiedB} from './icons/icon-low-rectified.js';
 import {lowAcknowledged} from './icons/icon-low-acknowledged.js';
-import {blinkingAll} from '../../palettes/blinking.js';
+import {FlashingController} from '../../palettes/flashing-controller.js';
 
 enum AlertIconState {
   Silenced = 'silenced',
@@ -156,7 +160,7 @@ const mapping = {
  *
  * ## Features
  * - **Multiple Icon Types:** Supports all alarm and warning types.
- * - **Blinking Animation:** Uses two SVG layers with alternating opacity to create a blinking effect, visually emphasizing the alert or warning state.
+ * - **Flashing:** Two SVG layers alternate at the design tempo (fast for critical/alarm/high, slow for warning/medium, very slow for low and for every rectified alert); acknowledged icons are steady.
  * - **Adaptive Styling:** Applies different CSS variables for alarm and warning types to allow for distinct visual cues (e.g., color, blink timing).
  * - **Scalable:** Designed to fit any container size; scales with its parent element.
  *
@@ -179,6 +183,9 @@ const mapping = {
  * <obc-alert-icon .alarmType=${alarm.type} .alarmStatus=${alarm.status}></obc-alert-icon>
  * ```
  *
+ * @property flashingSpeed - Flash tempo: `default` resolves from the alert type and state,
+ *   `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes. Acknowledged icons are
+ *   always steady.
  * @availableWhen acknowledged type in [Alarm, Warning, LevelCritical, LevelHigh, LevelMedium, LevelLow]
  * @availableWhen active type in [Alarm, Warning, LevelCritical, LevelHigh, LevelMedium, LevelLow]
  * @stable
@@ -192,6 +199,26 @@ export class ObcAlertIcon extends LitElement {
   @property({type: Boolean}) active?: boolean;
   @property({type: Boolean}) silenced?: boolean;
 
+  @property({type: String}) flashingSpeed: FlashingSpeed =
+    FlashingSpeed.Default;
+
+  protected readonly flashing = new FlashingController(
+    this,
+    () => this.resolvedFlashingSpeed
+  );
+
+  get resolvedFlashingSpeed(): ResolvedFlashingSpeed {
+    // Caution and diagnostic have no flashing glyph pair, whatever the speed.
+    if (this.acknowledged || !this.icon) {
+      return FlashingSpeed.Fixed;
+    }
+    return resolveFlashingSpeed(
+      this.flashingSpeed,
+      this._effectiveType,
+      this.active === false ? AlertFlashPhase.Rectified : AlertFlashPhase.Active
+    );
+  }
+
   private get _effectiveType(): AlertType {
     if (this.type) {
       return this.type;
@@ -319,19 +346,11 @@ export class ObcAlertIcon extends LitElement {
     if (!this._effectiveType) {
       return html`<div>No alarm</div>`;
     }
-    if (supportsBlinking(this._effectiveType, this.acknowledged ?? false)) {
-      const icons = this.icon;
-      if (!icons) {
-        throw new Error('No icon found');
-      }
-      const blinkMode = getAlertBlinkMode(this._effectiveType);
+    const tempo = this.resolvedFlashingSpeed;
+    const icons = this.icon;
+    if (tempo !== FlashingSpeed.Fixed && icons) {
       return html`
-        <div
-          class=${classMap({
-            wrapper: true,
-            [`blink-${blinkMode}`]: true,
-          })}
-        >
+        <div class=${classMap({wrapper: true, [`flash-${tempo}`]: true})}>
           <span class="a">${icons.a}</span>
           <span class="b">${icons.b}</span>
         </div>
@@ -340,43 +359,6 @@ export class ObcAlertIcon extends LitElement {
     return html`<div class="wrapper">${this.renderStaticIcon()}</div>`;
   }
 
-  private _blinkAnimationCancel?: () => void;
-
-  private syncBlinking(): void {
-    if (
-      this._blinkAnimationCancel &&
-      !supportsBlinking(this._effectiveType, this.acknowledged ?? false)
-    ) {
-      this._blinkAnimationCancel();
-      this._blinkAnimationCancel = undefined;
-    }
-    if (
-      !this._blinkAnimationCancel &&
-      supportsBlinking(this._effectiveType, this.acknowledged ?? false)
-    ) {
-      this._blinkAnimationCancel = blinkingAll(this);
-    }
-  }
-
-  override connectedCallback(): void {
-    super.connectedCallback();
-    if (this.hasUpdated) {
-      this.syncBlinking();
-    }
-  }
-
-  override updated(): void {
-    this.syncBlinking();
-  }
-
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this._blinkAnimationCancel) {
-      this._blinkAnimationCancel();
-      this._blinkAnimationCancel = undefined;
-    }
-  }
-
   static override styles = css`
     .wrapper {
       height: 100%;
@@ -402,36 +384,28 @@ export class ObcAlertIcon extends LitElement {
         top: 0;
         left: 0;
       }
-      &.blink-alarm .a {
-        opacity: var(--alarm-blink-on);
-      }
-
-      &.blink-alarm .b {
-        opacity: var(--alarm-blink-off);
-      }
-
-      &.blink-critical .a {
-        opacity: var(--critical-blink-on);
+      &.flash-fast .a {
+        opacity: var(--flash-fast-on);
       }
 
-      &.blink-critical .b {
-        opacity: var(--critical-blink-off);
+      &.flash-fast .b {
+        opacity: var(--flash-fast-off);
       }
 
-      &.blink-warning .a {
-        opacity: var(--warning-blink-on);
+      &.flash-slow .a {
+        opacity: var(--flash-slow-on);
       }
 
-      &.blink-warning .b {
-        opacity: var(--warning-blink-off);
+      &.flash-slow .b {
+        opacity: var(--flash-slow-off);
       }
 
-      &.blink-low .a {
-        opacity: var(--low-blink-on);
+      &.flash-very-slow .a {
+        opacity: var(--flash-very-slow-on);
       }
 
-      &.blink-low .b {
-        opacity: var(--low-blink-off);
+      &.flash-very-slow .b {
+        opacity: var(--flash-very-slow-off);
       }
     }
   `;

package/src/components/alert-menu-item/alert-menu-item.css

@@ -1,9 +1,6 @@
 :host {
   --action-width: 82px;
-  --trailing-icon-size: var(
-    --app-components-alert-components-general-notification-item-icon-size-large,
-    32px
-  );
+  --trailing-icon-size: var(--app-components-message-menu-item-icon-size-large);
   display: block;
 }