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

package/.storybook/manager.ts

@@ -19,17 +19,20 @@ addons.setConfig({
     collapsedRoots: ['other'],
   },
 
-  // Tag badges for version indicators
+  // Lifecycle badges. These mirror the class-level JSDoc tag on the component
+  // (@beta / @experimental / @deprecated) and are maintained by the
+  // `openbridge/story-lifecycle-tags` ESLint rule — see AGENTS.md § 3.
+  // `@stable` deliberately has no badge, so a badge always means "caveat here".
   tagBadges: [
     {
-      tags: '5.0',
+      tags: 'beta',
       badge: {
-        text: '5.0',
+        text: 'Beta',
         style: {
-          backgroundColor: 'rgb(255, 219, 55)',
-          color: '#000',
+          backgroundColor: 'rgb(66, 113, 179)',
+          color: '#fff',
         },
-        tooltip: 'OpenBridge 5.0',
+        tooltip: 'Feature-complete, but the API may still change.',
       },
       display: {
         sidebar: ['component'],
@@ -37,14 +40,14 @@ addons.setConfig({
       },
     },
     {
-      tags: 'alpha',
+      tags: 'experimental',
       badge: {
-        text: '6.0 Alpha',
+        text: 'Experimental',
         style: {
-          backgroundColor: 'rgb(255, 219, 55)',
+          backgroundColor: 'rgb(255, 219, 66)',
           color: '#000',
         },
-        tooltip: 'Alpha components are still under design and may change.',
+        tooltip: 'Early stage — the API is likely to change.',
       },
       display: {
         sidebar: ['component'],
@@ -52,15 +55,14 @@ addons.setConfig({
       },
     },
     {
-      tags: 'wip',
+      tags: 'deprecated',
       badge: {
-        text: 'WIP',
+        text: 'Deprecated',
         style: {
-          backgroundColor: 'rgb(255, 219, 55)',
-          color: '#000',
+          backgroundColor: 'rgb(227, 0, 25)',
+          color: '#fff',
         },
-        tooltip:
-          'Work in progress components are still under development and may change.',
+        tooltip: 'Slated for removal. Do not use in new work.',
       },
       display: {
         sidebar: ['component'],

package/bundle/openbridge-webcomponents.bundle.js

@@ -14597,6 +14597,7 @@ const compentStyle$1e = i$7`* {
 
 .wrapper.level-critical {
     --bg-color: var(--critical-enabled-background-color);
+    --blink-on: var(--critical-blink-on);
     color: var(--on-critical-active-color);
   }
 
@@ -15220,6 +15221,42 @@ function usesAlarmNoAckIcon(type) {
     AlertType.LevelHigh
   ].includes(type);
 }
+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());
+}
 var __defProp$zL = Object.defineProperty;
 var __getOwnPropDesc$zN = Object.getOwnPropertyDescriptor;
 var __decorateClass$zT = (decorators, target, key, kind) => {
@@ -15289,6 +15326,29 @@ let ObcAlertFrame = class extends i$4 {
       </div>
     `;
   }
+  syncBlinking() {
+    if (this.mode !== "unacked-active" && this._blinkAnimationCancel) {
+      this._blinkAnimationCancel();
+      this._blinkAnimationCancel = void 0;
+    }
+    if (this.mode === "unacked-active" && !this._blinkAnimationCancel) {
+      this._blinkAnimationCancel = blinkingAll(this);
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.syncBlinking();
+    }
+  }
+  updated() {
+    this.syncBlinking();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._blinkAnimationCancel?.();
+    this._blinkAnimationCancel = void 0;
+  }
   flap() {
     if (this.type === "regular") {
       return A;
@@ -70698,9 +70758,13 @@ let ObcAlertButton = class extends i$4 {
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("resize", this.resizeListener);
+    if (this.hasUpdated) {
+      this.installBlinking();
+    }
   }
   disconnectedCallback() {
     window.removeEventListener("resize", this.resizeListener);
+    this._blinkAnimationCancel?.();
     super.disconnectedCallback();
   }
   renderAlertTwotoneIcon() {
@@ -70762,6 +70826,13 @@ let ObcAlertButton = class extends i$4 {
   get showSilenceButtonDynamic() {
     return this.showSilenceButton && this.width >= this.silenceButtonMinBreakpointPx && this.activeType !== "flat";
   }
+  installBlinking() {
+    this._blinkAnimationCancel?.();
+    this._blinkAnimationCancel = blinkingAll(this);
+  }
+  updated() {
+    this.installBlinking();
+  }
   render() {
     const hasAlerts = this.nAlerts > 0;
     const showCounter = this.counter && hasAlerts && this.activeType !== "flat";
@@ -72272,6 +72343,31 @@ let ObcAlertIcon = class extends i$4 {
     }
     return b`<div class="wrapper">${this.renderStaticIcon()}</div>`;
   }
+  syncBlinking() {
+    if (this._blinkAnimationCancel && !supportsBlinking(this._effectiveType, this.acknowledged ?? false)) {
+      this._blinkAnimationCancel();
+      this._blinkAnimationCancel = void 0;
+    }
+    if (!this._blinkAnimationCancel && supportsBlinking(this._effectiveType, this.acknowledged ?? false)) {
+      this._blinkAnimationCancel = blinkingAll(this);
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.syncBlinking();
+    }
+  }
+  updated() {
+    this.syncBlinking();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._blinkAnimationCancel) {
+      this._blinkAnimationCancel();
+      this._blinkAnimationCancel = void 0;
+    }
+  }
 };
 ObcAlertIcon.styles = i$7`
     .wrapper {