@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.119 → 2.0.0-next.120

package/dist/openbridge.css

@@ -14739,36 +14739,6 @@
   inherits: true;
   initial-value: 0;
 }
-@keyframes warning-blink {
-  0% {
-    --warning-blink-on: 1;
-    --warning-blink-off: 0;
-    --alarm-blink-on: 1;
-    --alarm-blink-off: 0;
-  }
-
-  25% {
-    --alarm-blink-on: 0;
-    --alarm-blink-off: 1;
-  }
-
-  50% {
-    --warning-blink-on: 0;
-    --warning-blink-off: 1;
-    --alarm-blink-on: 1;
-    --alarm-blink-off: 0;
-  }
-
-  75% {
-    --alarm-blink-on: 0;
-    --alarm-blink-off: 1;
-  }
-
-  100% {
-    --warning-blink-on: 1;
-    --warning-blink-off: 0;
-  }
-}
 @property --warning-blink-on {
   syntax: "<number>";
   inherits: true;
@@ -14779,10 +14749,6 @@
   inherits: true;
   initial-value: 0;
 }
-:root {
-  animation: warning-blink 4s infinite;
-  animation-timing-function: steps(1);
-}
 :root[data-obc-theme="day"] {
   --critical-enabled-background-color: rgb(196, 36, 183);
   --critical-enabled-border-color: rgb(153, 0, 143);
@@ -14899,45 +14865,6 @@
   inherits: true;
   initial-value: 0;
 }
-@keyframes critical-blink {
-  0% {
-    --critical-blink-on: 1;
-    --critical-blink-off: 0;
-  }
-
-  50% {
-    --critical-blink-on: 0;
-    --critical-blink-off: 1;
-  }
-
-  100% {
-    --critical-blink-on: 1;
-    --critical-blink-off: 0;
-  }
-}
-@keyframes low-blink {
-  0% {
-    --low-blink-on: 1;
-    --low-blink-off: 0;
-  }
-
-  50% {
-    --low-blink-on: 0;
-    --low-blink-off: 1;
-  }
-
-  100% {
-    --low-blink-on: 1;
-    --low-blink-off: 0;
-  }
-}
-:root {
-  animation:
-    warning-blink 4s infinite,
-    critical-blink 1s infinite,
-    low-blink 8s infinite;
-  animation-timing-function: steps(1);
-}
 .obc-radio-button {
   user-select: none;
 

package/dist/palettes/blinking.d.ts

@@ -0,0 +1,6 @@
+export declare function blinkingCritical(el: HTMLElement): () => void;
+export declare function blinkingAlarm(el: HTMLElement): () => void;
+export declare function blinkingWarning(el: HTMLElement): () => void;
+export declare function blinkingLow(el: HTMLElement): () => void;
+export declare function blinkingAll(el: HTMLElement): () => void;
+//# sourceMappingURL=blinking.d.ts.map

package/dist/palettes/blinking.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blinking.d.ts","sourceRoot":"","sources":["../../src/palettes/blinking.ts"],"names":[],"mappings":"AAqBA,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,IAAI,CAE5D;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,IAAI,CAEzD;AAED,wBAAgB,eAAe,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,IAAI,CAE3D;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,IAAI,CAEvD;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,IAAI,CAQvD"}

package/dist/palettes/blinking.js

@@ -0,0 +1,44 @@
+const CRITICAL_PERIOD = 1e3;
+const ALARM_PERIOD = 2e3;
+const WARNING_PERIOD = 4e3;
+const LOW_PERIOD = 8e3;
+function blinkingInstall(el, period, label) {
+  const anim = el.animate(
+    [
+      { [label + "-on"]: 1, [label + "-off"]: 0 },
+      { [label + "-on"]: 0, [label + "-off"]: 1 }
+    ],
+    { duration: period, iterations: Infinity, easing: "steps(2, jump-none)" }
+  );
+  anim.startTime = 0;
+  return () => anim.cancel();
+}
+function blinkingCritical(el) {
+  return blinkingInstall(el, CRITICAL_PERIOD, "--critical-blink");
+}
+function blinkingAlarm(el) {
+  return blinkingInstall(el, ALARM_PERIOD, "--alarm-blink");
+}
+function blinkingWarning(el) {
+  return blinkingInstall(el, WARNING_PERIOD, "--warning-blink");
+}
+function blinkingLow(el) {
+  return blinkingInstall(el, LOW_PERIOD, "--low-blink");
+}
+function blinkingAll(el) {
+  const animes = [
+    blinkingCritical(el),
+    blinkingAlarm(el),
+    blinkingWarning(el),
+    blinkingLow(el)
+  ];
+  return () => animes.forEach((anim) => anim());
+}
+export {
+  blinkingAlarm,
+  blinkingAll,
+  blinkingCritical,
+  blinkingLow,
+  blinkingWarning
+};
+//# sourceMappingURL=blinking.js.map

package/dist/palettes/blinking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blinking.js","sources":["../../src/palettes/blinking.ts"],"sourcesContent":["const CRITICAL_PERIOD = 1000; // ms\nconst ALARM_PERIOD = 2000; // ms\nconst WARNING_PERIOD = 4000; // ms\nconst LOW_PERIOD = 8000; // ms\n\nfunction blinkingInstall(\n  el: HTMLElement,\n  period: number,\n  label: string\n): () => void {\n  const anim = el.animate(\n    [\n      {[label + '-on']: 1, [label + '-off']: 0},\n      {[label + '-on']: 0, [label + '-off']: 1},\n    ],\n    {duration: period, iterations: Infinity, easing: 'steps(2, jump-none)'}\n  );\n  anim.startTime = 0; // Common time origin for all animations, so they blink in sync.\n  return () => anim.cancel();\n}\n\nexport function blinkingCritical(el: HTMLElement): () => void {\n  return blinkingInstall(el, CRITICAL_PERIOD, '--critical-blink');\n}\n\nexport function blinkingAlarm(el: HTMLElement): () => void {\n  return blinkingInstall(el, ALARM_PERIOD, '--alarm-blink');\n}\n\nexport function blinkingWarning(el: HTMLElement): () => void {\n  return blinkingInstall(el, WARNING_PERIOD, '--warning-blink');\n}\n\nexport function blinkingLow(el: HTMLElement): () => void {\n  return blinkingInstall(el, LOW_PERIOD, '--low-blink');\n}\n\nexport function blinkingAll(el: HTMLElement): () => void {\n  const animes = [\n    blinkingCritical(el),\n    blinkingAlarm(el),\n    blinkingWarning(el),\n    blinkingLow(el),\n  ];\n  return () => animes.forEach((anim) => anim());\n}\n"],"names":[],"mappings":"AAAA,MAAM,kBAAkB;AACxB,MAAM,eAAe;AACrB,MAAM,iBAAiB;AACvB,MAAM,aAAa;AAEnB,SAAS,gBACP,IACA,QACA,OACY;AACZ,QAAM,OAAO,GAAG;AAAA,IACd;AAAA,MACE,EAAC,CAAC,QAAQ,KAAK,GAAG,GAAG,CAAC,QAAQ,MAAM,GAAG,EAAA;AAAA,MACvC,EAAC,CAAC,QAAQ,KAAK,GAAG,GAAG,CAAC,QAAQ,MAAM,GAAG,EAAA;AAAA,IAAC;AAAA,IAE1C,EAAC,UAAU,QAAQ,YAAY,UAAU,QAAQ,sBAAA;AAAA,EAAqB;AAExE,OAAK,YAAY;AACjB,SAAO,MAAM,KAAK,OAAA;AACpB;AAEO,SAAS,iBAAiB,IAA6B;AAC5D,SAAO,gBAAgB,IAAI,iBAAiB,kBAAkB;AAChE;AAEO,SAAS,cAAc,IAA6B;AACzD,SAAO,gBAAgB,IAAI,cAAc,eAAe;AAC1D;AAEO,SAAS,gBAAgB,IAA6B;AAC3D,SAAO,gBAAgB,IAAI,gBAAgB,iBAAiB;AAC9D;AAEO,SAAS,YAAY,IAA6B;AACvD,SAAO,gBAAgB,IAAI,YAAY,aAAa;AACtD;AAEO,SAAS,YAAY,IAA6B;AACvD,QAAM,SAAS;AAAA,IACb,iBAAiB,EAAE;AAAA,IACnB,cAAc,EAAE;AAAA,IAChB,gBAAgB,EAAE;AAAA,IAClB,YAAY,EAAE;AAAA,EAAA;AAEhB,SAAO,MAAM,OAAO,QAAQ,CAAC,SAAS,MAAM;AAC9C;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.119",
+  "version": "2.0.0-next.120",
   "type": "module",
   "repository": {
     "type": "git",

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

@@ -0,0 +1,58 @@
+import {describe, expect, it} from 'vitest';
+import './alert-button.js';
+import {ObcAlertButton} from './alert-button.js';
+import {render} from 'vitest-browser-lit';
+import {html} from 'lit';
+
+describe('obc-alert-button blinking lifecycle', () => {
+  async function setup() {
+    const screen = render(html`<obc-alert-button></obc-alert-button>`);
+    const el = screen.baseElement.querySelector(
+      'obc-alert-button'
+    ) as ObcAlertButton;
+    await el.updateComplete;
+    return el;
+  }
+
+  it('installs the blink animations on first render', async () => {
+    const el = await setup();
+
+    expect(el.getAnimations().length).toBeGreaterThan(0);
+  });
+
+  it('cancels the blink animations on disconnect', async () => {
+    const el = await setup();
+
+    el.parentElement!.removeChild(el);
+
+    expect(el.getAnimations()).toHaveLength(0);
+  });
+
+  it('resumes blinking after disconnect and reconnect', async () => {
+    const el = await setup();
+    const parent = el.parentElement!;
+    const initial = el.getAnimations().length;
+
+    parent.removeChild(el);
+    expect(el.getAnimations()).toHaveLength(0);
+
+    // Reconnect without touching any property. firstUpdated() will not run
+    // again, so this only passes if blinking is reinstalled on update.
+    parent.appendChild(el);
+    await el.updateComplete;
+
+    expect(el.getAnimations()).toHaveLength(initial);
+  });
+
+  it('does not accumulate animations across repeated updates', async () => {
+    const el = await setup();
+    const initial = el.getAnimations().length;
+
+    el.nAlerts = 3;
+    await el.updateComplete;
+    el.nAlerts = 5;
+    await el.updateComplete;
+
+    expect(el.getAnimations()).toHaveLength(initial);
+  });
+});

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

@@ -20,6 +20,7 @@ import {
 } from '../../alert-severity.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {customElement} from '../../decorator.js';
+import {blinkingAll} from '../../palettes/blinking.js';
 
 /**
  * `ObcAlertButtonType` – Enum for alert button visual and behavioral variants.
@@ -202,10 +203,14 @@ export class ObcAlertButton extends LitElement {
   override connectedCallback() {
     super.connectedCallback();
     window.addEventListener('resize', this.resizeListener);
+    if (this.hasUpdated) {
+      this.installBlinking();
+    }
   }
 
   override disconnectedCallback() {
     window.removeEventListener('resize', this.resizeListener);
+    this._blinkAnimationCancel?.();
     super.disconnectedCallback();
   }
 
@@ -280,6 +285,17 @@ export class ObcAlertButton extends LitElement {
     );
   }
 
+  private _blinkAnimationCancel?: () => void;
+
+  private installBlinking() {
+    this._blinkAnimationCancel?.();
+    this._blinkAnimationCancel = blinkingAll(this);
+  }
+
+  override updated() {
+    this.installBlinking();
+  }
+
   override render() {
     const hasAlerts = this.nAlerts > 0;
     const showCounter =

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

@@ -78,6 +78,7 @@
 
   &.level-critical {
     --bg-color: var(--critical-enabled-background-color);
+    --blink-on: var(--critical-blink-on);
     color: var(--on-critical-active-color);
   }
 

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

@@ -0,0 +1,122 @@
+import {describe, expect, it} from 'vitest';
+import './alert-frame.js';
+import {ObcAlertFrame, ObcAlertFrameMode} from './alert-frame.js';
+import {render} from 'vitest-browser-lit';
+import {html} from 'lit';
+
+describe('obc-alert-frame blinking lifecycle', () => {
+  async function setup(mode: ObcAlertFrameMode) {
+    const screen = render(
+      html`<obc-alert-frame .mode=${mode}></obc-alert-frame>`
+    );
+    const el = screen.baseElement.querySelector(
+      'obc-alert-frame'
+    ) as ObcAlertFrame;
+    await el.updateComplete;
+    return el;
+  }
+
+  it('blinks while mode is unacked-active', async () => {
+    const el = await setup(ObcAlertFrameMode.unackedActive);
+
+    expect(el.getAnimations().length).toBeGreaterThan(0);
+  });
+
+  it('does not blink in other modes', async () => {
+    const el = await setup(ObcAlertFrameMode.ackedActive);
+
+    expect(el.getAnimations()).toHaveLength(0);
+  });
+
+  describe('mode transitions', () => {
+    it('starts blinking when mode becomes unacked-active', async () => {
+      const el = await setup(ObcAlertFrameMode.ackedActive);
+      expect(el.getAnimations()).toHaveLength(0);
+
+      el.mode = ObcAlertFrameMode.unackedActive;
+      await el.updateComplete;
+
+      expect(el.getAnimations().length).toBeGreaterThan(0);
+    });
+
+    it('stops blinking when mode leaves unacked-active', async () => {
+      const el = await setup(ObcAlertFrameMode.unackedActive);
+      expect(el.getAnimations().length).toBeGreaterThan(0);
+
+      el.mode = ObcAlertFrameMode.ackedActive;
+      await el.updateComplete;
+
+      expect(el.getAnimations()).toHaveLength(0);
+    });
+
+    it('stops blinking when mode becomes unacked-rectified', async () => {
+      const el = await setup(ObcAlertFrameMode.unackedActive);
+
+      el.mode = ObcAlertFrameMode.unackedRectified;
+      await el.updateComplete;
+
+      expect(el.getAnimations()).toHaveLength(0);
+    });
+
+    it('does not accumulate animations across repeated updates', async () => {
+      const el = await setup(ObcAlertFrameMode.unackedActive);
+      const initial = el.getAnimations().length;
+
+      el.fullWidth = true;
+      await el.updateComplete;
+      el.showIcon = true;
+      await el.updateComplete;
+
+      expect(el.getAnimations()).toHaveLength(initial);
+    });
+  });
+
+  describe('reconnection', () => {
+    it('resumes blinking after disconnect and reconnect', async () => {
+      const el = await setup(ObcAlertFrameMode.unackedActive);
+      const parent = el.parentElement!;
+      expect(el.getAnimations().length).toBeGreaterThan(0);
+
+      parent.removeChild(el);
+      expect(el.getAnimations()).toHaveLength(0);
+
+      // Reconnect without touching any property. firstUpdated() will not run
+      // again, so this only passes if blinking is reinstalled on update.
+      parent.appendChild(el);
+      await el.updateComplete;
+
+      expect(el.getAnimations().length).toBeGreaterThan(0);
+    });
+
+    it('does not resume blinking on reconnect when mode is not unacked-active', async () => {
+      const el = await setup(ObcAlertFrameMode.ackedActive);
+      const parent = el.parentElement!;
+
+      parent.removeChild(el);
+      parent.appendChild(el);
+      await el.updateComplete;
+
+      expect(el.getAnimations()).toHaveLength(0);
+    });
+
+    it('does not blink after disconnection when mode became unacked-active while detached', async () => {
+      const el = await setup(ObcAlertFrameMode.ackedActive);
+      const parent = el.parentElement!;
+
+      parent.removeChild(el);
+      await el.updateComplete;
+
+      expect(el.getAnimations().length).toBe(0);
+
+      el.mode = ObcAlertFrameMode.unackedActive;
+      await el.updateComplete;
+
+      expect(el.getAnimations().length).toBe(0);
+
+      parent.appendChild(el);
+      await el.updateComplete;
+
+      expect(el.getAnimations().length).toBeGreaterThan(0);
+    });
+  });
+});

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

@@ -261,3 +261,15 @@ export const RectifiedUnactive: Story = {
     mode: ObcAlertFrameMode.unackedRectified,
   },
 };
+
+export const CriticalUnacked: Story = {
+  args: {
+    type: ObcAlertFrameType.SmallSideFlip,
+    thickness: ObcAlertFrameThickness.Small,
+    status: ObcAlertFrameStatus.LevelCritical,
+    mode: ObcAlertFrameMode.unackedActive,
+    demoWidth: 200,
+    showIcon: true,
+    showAlertCategoryIcon: true,
+  },
+};

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

@@ -20,6 +20,7 @@ import {
   getAlertBadgeComponent,
   AlertBadgeComponent,
 } from '../../alert-severity.js';
+import {blinkingAll} from '../../palettes/blinking.js';
 
 export {AlertType as ObcAlertFrameStatus} from '../../types.js';
 
@@ -256,6 +257,42 @@ export class ObcAlertFrame extends LitElement {
     `;
   }
 
+  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;

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

@@ -0,0 +1,76 @@
+import {describe, expect, it} from 'vitest';
+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) {
+    const screen = render(
+      html`<obc-alert-icon
+        .alertType=${AlertType.Alarm}
+        .acknowledged=${acknowledged}
+      ></obc-alert-icon>`
+    );
+    const el = screen.baseElement.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 () => {
+    const el = await setup();
+
+    expect(wrapperAnimations(el).length).toBeGreaterThan(0);
+  });
+
+  it('does not blink once acknowledged', async () => {
+    const el = await setup(true);
+
+    expect(wrapperAnimations(el)).toHaveLength(0);
+  });
+
+  it('stops blinking when the alert is acknowledged', async () => {
+    const el = await setup();
+    expect(wrapperAnimations(el).length).toBeGreaterThan(0);
+
+    el.acknowledged = true;
+    await el.updateComplete;
+
+    expect(wrapperAnimations(el)).toHaveLength(0);
+  });
+
+  it('resumes blinking after disconnect and reconnect', async () => {
+    const el = await setup();
+    const parent = el.parentElement!;
+    const initial = wrapperAnimations(el).length;
+    expect(initial).toBeGreaterThan(0);
+
+    parent.removeChild(el);
+    expect(wrapperAnimations(el)).toHaveLength(0);
+
+    // Reconnect without touching any property, so no Lit update is scheduled.
+    parent.appendChild(el);
+    await el.updateComplete;
+
+    expect(wrapperAnimations(el)).toHaveLength(initial);
+  });
+
+  it('does not accumulate animations across repeated updates', async () => {
+    const el = await setup();
+    const initial = wrapperAnimations(el).length;
+
+    el.active = true;
+    await el.updateComplete;
+    el.silenced = true;
+    await el.updateComplete;
+
+    expect(wrapperAnimations(el)).toHaveLength(initial);
+  });
+});

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

@@ -50,6 +50,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';
 
 enum AlertIconState {
   Silenced = 'silenced',
@@ -343,6 +344,43 @@ 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%;

package/src/palettes/blinking.ts

@@ -0,0 +1,46 @@
+const CRITICAL_PERIOD = 1000; // ms
+const ALARM_PERIOD = 2000; // ms
+const WARNING_PERIOD = 4000; // ms
+const LOW_PERIOD = 8000; // ms
+
+function blinkingInstall(
+  el: HTMLElement,
+  period: number,
+  label: string
+): () => void {
+  const anim = el.animate(
+    [
+      {[label + '-on']: 1, [label + '-off']: 0},
+      {[label + '-on']: 0, [label + '-off']: 1},
+    ],
+    {duration: period, iterations: Infinity, easing: 'steps(2, jump-none)'}
+  );
+  anim.startTime = 0; // Common time origin for all animations, so they blink in sync.
+  return () => anim.cancel();
+}
+
+export function blinkingCritical(el: HTMLElement): () => void {
+  return blinkingInstall(el, CRITICAL_PERIOD, '--critical-blink');
+}
+
+export function blinkingAlarm(el: HTMLElement): () => void {
+  return blinkingInstall(el, ALARM_PERIOD, '--alarm-blink');
+}
+
+export function blinkingWarning(el: HTMLElement): () => void {
+  return blinkingInstall(el, WARNING_PERIOD, '--warning-blink');
+}
+
+export function blinkingLow(el: HTMLElement): () => void {
+  return blinkingInstall(el, LOW_PERIOD, '--low-blink');
+}
+
+export function blinkingAll(el: HTMLElement): () => void {
+  const animes = [
+    blinkingCritical(el),
+    blinkingAlarm(el),
+    blinkingWarning(el),
+    blinkingLow(el),
+  ];
+  return () => animes.forEach((anim) => anim());
+}

package/src/palettes/manual.css

@@ -121,45 +121,3 @@
   inherits: true;
   initial-value: 0;
 }
-
-@keyframes critical-blink {
-  0% {
-    --critical-blink-on: 1;
-    --critical-blink-off: 0;
-  }
-
-  50% {
-    --critical-blink-on: 0;
-    --critical-blink-off: 1;
-  }
-
-  100% {
-    --critical-blink-on: 1;
-    --critical-blink-off: 0;
-  }
-}
-
-@keyframes low-blink {
-  0% {
-    --low-blink-on: 1;
-    --low-blink-off: 0;
-  }
-
-  50% {
-    --low-blink-on: 0;
-    --low-blink-off: 1;
-  }
-
-  100% {
-    --low-blink-on: 1;
-    --low-blink-off: 0;
-  }
-}
-
-:root {
-  animation:
-    warning-blink 4s infinite,
-    critical-blink 1s infinite,
-    low-blink 8s infinite;
-  animation-timing-function: steps(1);
-}