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

package/dist/components/alert-frame/alert-frame.css.js

@@ -22,7 +22,9 @@ const compentStyle = css`* {
 .wrapper {
   --bg-color: var(--alert-alarm-color);
   --thickness: var(--global-size-spacing-border-weight-alertframe);
-  --blink-on: var(--alarm-blink-on);
+  /* 0/1 from the flash-<tempo> classes below; steady when no class applies. */
+  --blink-on: 0;
+  --blink-off: 1;
   color: var(--on-alarm-active-color);
   position: relative;
   width: 100%;
@@ -32,12 +34,12 @@ const compentStyle = css`* {
   );
   outline: var(--thickness) solid var(--bg-color);
   outline-offset: 0;
+  /* +2 px outward while on, both thicknesses (Figma Flash=yes: 2 → 4 px). */
   --blink-width: 2px;
 }
 
 .wrapper.thickness-small {
     --thickness: 2px;
-    --blink-width: 1px;
   }
 
 .wrapper.wrap-content {
@@ -49,17 +51,69 @@ const compentStyle = css`* {
     width: 100%;
   }
 
+.wrapper.flash-fast {
+    --blink-on: var(--flash-fast-on);
+    --blink-off: var(--flash-fast-off);
+  }
+
+.wrapper.flash-slow {
+    --blink-on: var(--flash-slow-on);
+    --blink-off: var(--flash-slow-off);
+  }
+
+.wrapper.flash-very-slow {
+    --blink-on: var(--flash-very-slow-on);
+    --blink-off: var(--flash-very-slow-off);
+  }
+
+.wrapper {
+
+  --flash-transition: 50ms linear;
+}
+
+.wrapper.flash-effect-outline-eased {
+    transition: outline-width var(--flash-transition);
+  }
+
+.wrapper.flash-effect-outline-eased .flap {
+      transition: box-shadow var(--flash-transition);
+    }
+
+.wrapper.flash-effect-outline-eased .mask {
+      transition:
+        top var(--flash-transition),
+        bottom var(--flash-transition),
+        left var(--flash-transition),
+        right var(--flash-transition);
+    }
+
+.wrapper.flash-effect-outline-eased .dash path {
+      transition: stroke-width var(--flash-transition);
+    }
+
 .wrapper {
 
   --blink-width-dynamic: calc(var(--blink-width) * var(--blink-on));
+  /* One knob for flap and masks, so they cannot drift apart from the outline. */
+  --flap-grow: 0px;
 }
 
-.wrapper.unacked-active {
+.wrapper.unacked-active,.wrapper.unacked-rectified {
     outline-width: calc(var(--thickness) + var(--blink-width-dynamic));
   }
 
+.wrapper.unacked-active {
+    --flap-grow: var(--blink-width-dynamic);
+  }
+
 .wrapper.unacked-rectified {
-    outline-style: dashed;
+    /* The dashed stroke is centred, so it moves out by half its growth. */
+    --flap-grow: calc(var(--blink-width-dynamic) / 2);
+  }
+
+.wrapper.unacked-rectified {
+    /* The dash pattern (12/6) needs an SVG stroke; outlines have no dash array. */
+    outline-style: none;
   }
 
 .wrapper.alarm,.wrapper.level-high {
@@ -69,23 +123,16 @@ const compentStyle = css`* {
 
 .wrapper.warning,.wrapper.level-medium {
     --bg-color: var(--alert-warning-color);
-    --blink-on: var(--warning-blink-on);
     color: var(--on-warning-active-color);
   }
 
 .wrapper.caution,.wrapper.level-low {
     --bg-color: var(--alert-caution-color);
-    --blink-on: 1;
     color: var(--on-caution-active-color);
   }
 
-.wrapper.level-low {
-    --blink-on: var(--low-blink-on);
-  }
-
 .wrapper.level-critical {
     --bg-color: var(--critical-enabled-background-color);
-    --blink-on: var(--critical-blink-on);
     color: var(--on-critical-active-color);
   }
 
@@ -140,7 +187,7 @@ const compentStyle = css`* {
       width: calc(
         var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
       );
-      top: 0;
+      top: calc(-1 * var(--flap-grow));
       left: calc(
         -1 * var(--ui-components-button-border-radius) - var(--thickness)
       );
@@ -153,15 +200,11 @@ const compentStyle = css`* {
       );
     }
 
-.unacked-active .up:is(.flap .mask) {
-        top: calc(-1 * var(--blink-width-dynamic));
-      }
-
 .down:is(.flap .mask) {
       width: calc(
         var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
       );
-      bottom: 0;
+      bottom: calc(-1 * var(--flap-grow));
       left: calc(
         -1 * var(--ui-components-button-border-radius) - var(--thickness)
       );
@@ -174,10 +217,6 @@ const compentStyle = css`* {
       );
     }
 
-.unacked-active .down:is(.flap .mask) {
-        bottom: calc(-1 * var(--blink-width-dynamic));
-      }
-
 .left:is(.flap .mask) {
       height: calc(
         var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
@@ -185,7 +224,7 @@ const compentStyle = css`* {
       top: calc(
         -1 * var(--ui-components-button-border-radius) - var(--thickness)
       );
-      left: 0;
+      left: calc(-1 * var(--flap-grow));
       clip-path: polygon(
         0 0,
         0 100%,
@@ -195,10 +234,6 @@ const compentStyle = css`* {
       );
     }
 
-.unacked-active .left:is(.flap .mask) {
-        left: calc(-1 * var(--blink-width-dynamic));
-      }
-
 .top .left:is(.flap .mask) {
         top: unset;
         bottom: calc(
@@ -220,7 +255,7 @@ const compentStyle = css`* {
       top: calc(
         -1 * var(--ui-components-button-border-radius) - var(--thickness)
       );
-      right: 0;
+      right: calc(-1 * var(--flap-grow));
       clip-path: polygon(
         100% 0,
         100% 100%,
@@ -244,10 +279,6 @@ const compentStyle = css`* {
         );
       }
 
-.unacked-active .right:is(.flap .mask) {
-        right: calc(-1 * var(--blink-width-dynamic));
-      }
-
 .flap.large {
     flex-direction: column;
     top: calc(-1 * var(--thickness));
@@ -345,8 +376,35 @@ const compentStyle = css`* {
     overflow: hidden;
   }
 
-.unacked-active .flap {
-  outline: var(--bg-color) solid var(--blink-width-dynamic);
+/* Grows the flap outward with the outline, never toward the content: shifted
+   copies leave the inner edge where it is (an outline would cross it). */
+
+.flap.small,
+.flap.large {
+  box-shadow:
+    var(--flap-grow) 0 0 0 var(--bg-color),
+    0 calc(-1 * var(--flap-grow)) 0 0 var(--bg-color),
+    0 var(--flap-grow) 0 0 var(--bg-color),
+    var(--flap-grow) calc(-1 * var(--flap-grow)) 0 0 var(--bg-color),
+    var(--flap-grow) var(--flap-grow) 0 0 var(--bg-color);
+}
+
+.flap.bottom {
+  box-shadow:
+    0 var(--flap-grow) 0 0 var(--bg-color),
+    calc(-1 * var(--flap-grow)) 0 0 0 var(--bg-color),
+    var(--flap-grow) 0 0 0 var(--bg-color),
+    calc(-1 * var(--flap-grow)) var(--flap-grow) 0 0 var(--bg-color),
+    var(--flap-grow) var(--flap-grow) 0 0 var(--bg-color);
+}
+
+.flap.top {
+  box-shadow:
+    0 calc(-1 * var(--flap-grow)) 0 0 var(--bg-color),
+    calc(-1 * var(--flap-grow)) 0 0 0 var(--bg-color),
+    var(--flap-grow) 0 0 0 var(--bg-color),
+    calc(-1 * var(--flap-grow)) calc(-1 * var(--flap-grow)) 0 0 var(--bg-color),
+    var(--flap-grow) calc(-1 * var(--flap-grow)) 0 0 var(--bg-color);
 }
 
 ::slotted([slot="label"]) {
@@ -361,6 +419,24 @@ const compentStyle = css`* {
   display: block;
   flex-shrink: 0;
 }
+
+.dash {
+  /* Overridden inline per render from the measured thickness. */
+  --dash-pad: 0px;
+  position: absolute;
+  top: calc(-1 * var(--dash-pad));
+  left: calc(-1 * var(--dash-pad));
+  overflow: visible;
+  pointer-events: none;
+  fill: none;
+  stroke: var(--bg-color);
+  stroke-dasharray: 12 6;
+}
+
+.dash path {
+  /* Animated on the one path: a wider second path would drift its dashes. */
+  stroke-width: calc(var(--thickness) + var(--blink-width-dynamic));
+}
 `;
 export {
   compentStyle as default

package/dist/components/alert-frame/alert-frame.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-frame.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert-frame.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/alert-frame/alert-frame.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult, HTMLTemplateResult } from 'lit';
-import { AlertType } from '../../types.js';
+import { AlertType, FlashingSpeed, ResolvedFlashingSpeed } from '../../types.js';
+import { FlashingController } from '../../palettes/flashing-controller.js';
 import '../../icons/icon-alarm-badge.js';
 import '../../icons/icon-warning-badge.js';
 import '../../icons/icon-caution-badge.js';
@@ -35,6 +36,16 @@ export declare enum ObcAlertFrameMode {
     unackedActive = "unacked-active",
     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 declare enum ObcAlertFrameFlashEffect {
+    Outline = "outline",
+    OutlineEased = "outline-eased"
+}
 /**
  * Text size options for flip-flap typography.
  * - `regular`: Standard text size (default).
@@ -49,6 +60,7 @@ export interface AlertFrameConfig {
     thickness?: ObcAlertFrameThickness;
     status?: AlertType;
     mode?: ObcAlertFrameMode;
+    flashingSpeed?: FlashingSpeed;
     textSize?: AlertFrameTextSize;
     showIcon?: boolean;
     showAlertCategoryIcon?: boolean;
@@ -66,7 +78,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.
@@ -133,6 +145,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).
@@ -171,6 +189,20 @@ export declare class ObcAlertFrame extends LitElement {
      * - `unacked-rectified`: Condition cleared but not yet acknowledged.
      */
     mode: ObcAlertFrameMode;
+    /** 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. */
+    flashingSpeed: FlashingSpeed;
+    /** `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. */
+    flashEffect: ObcAlertFrameFlashEffect;
+    protected readonly flashing: FlashingController;
+    private dashBox?;
+    private wrapper?;
+    private dashObserver?;
+    private measureDash;
+    connectedCallback(): void;
+    updated(): void;
+    disconnectedCallback(): void;
+    private renderDash;
+    get resolvedFlashingSpeed(): ResolvedFlashingSpeed;
     /** When true, the frame wraps and sizes itself to its slotted content instead of overlaying a fixed region. Reflected to an attribute for CSS styling. */
     wrapContent: boolean;
     /** When true, the frame stretches to fill the full width of its container instead of hugging its content. Reflected to an attribute for CSS styling. */
@@ -187,11 +219,6 @@ export declare class ObcAlertFrame extends LitElement {
     showIcon: boolean;
     showAlertCategoryIcon: boolean;
     render(): TemplateResult<1>;
-    private _blinkAnimationCancel?;
-    private syncBlinking;
-    connectedCallback(): void;
-    updated(): void;
-    disconnectedCallback(): void;
     private flap;
     private renderBadgeIcon;
     static styles: import('lit').CSSResult;

package/dist/components/alert-frame/alert-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-frame.d.ts","sourceRoot":"","sources":["../../../src/components/alert-frame/alert-frame.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,kBAAkB,EACnB,MAAM,KAAK,CAAC;AAIb,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAOzC,OAAO,EAAC,SAAS,IAAI,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAEhE;;;;;;;GAOG;AACH,oBAAY,iBAAiB;IAC3B,OAAO,YAAY;IACnB,aAAa,oBAAoB;IACjC,aAAa,oBAAoB;IACjC,UAAU,gBAAgB;IAC1B,OAAO,aAAa;CACrB;AAED;;;;GAIG;AACH,oBAAY,sBAAsB;IAChC,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,iBAAiB;IAC3B,WAAW,iBAAiB;IAC5B,aAAa,mBAAmB;IAChC,gBAAgB,sBAAsB;CACvC;AAED;;;;GAIG;AACH,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;;;;OAQG;IACuB,IAAI,EAAE,iBAAiB,CACf;IAElC;;;;OAIG;IACuB,SAAS,EAAE,sBAAsB,CAC5B;IAE/B;;;;;;OAMG;IACuB,MAAM,EAAE,SAAS,CAAmB;IAE9D;;;;;OAKG;IACuB,IAAI,EAAE,iBAAiB,CACjB;IAEU,WAAW,EAAE,OAAO,CAAS;IAE7B,SAAS,EAAE,OAAO,CAAS;IAE1C,gBAAgB,EAAE,OAAO,CAAS;IAElC,iBAAiB,EAAE,OAAO,CAAS;IAEnC,mBAAmB,EAAE,OAAO,CAAS;IAErC,oBAAoB,EAAE,OAAO,CAAS;IAEvC,QAAQ,EAAE,kBAAkB,CACzB;IAEF,QAAQ,EAAE,OAAO,CAAS;IACR,qBAAqB,EAAE,OAAO,CACpE;IAEE,MAAM;IAwBf,OAAO,CAAC,qBAAqB,CAAC,CAAa;IAE3C,OAAO,CAAC,YAAY;IAiBX,iBAAiB;IAOjB,OAAO;IAIP,oBAAoB;IAM7B,OAAO,CAAC,IAAI;IAmEZ,OAAO,CAAC,eAAe;IAmBvB,OAAgB,MAAM,0BAA2B;CAClD;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,gBAAgB,GAAG,OAAO,GAAG,SAAS,EAC/C,OAAO,EAAE,kBAAkB,EAC3B,SAAS,GAAE,OAAe,GACzB,kBAAkB,CAepB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"alert-frame.d.ts","sourceRoot":"","sources":["../../../src/components/alert-frame/alert-frame.ts"],"names":[],"mappings":"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"}

package/dist/components/alert-frame/alert-frame.js

@@ -1,5 +1,5 @@
-import { unsafeCSS, LitElement, html, nothing } from "lit";
-import { property } from "lit/decorators.js";
+import { unsafeCSS, LitElement, nothing, html } from "lit";
+import { property, state, query } from "lit/decorators.js";
 import compentStyle from "./alert-frame.css.js";
 import { classMap } from "lit/directives/class-map.js";
 import "../../icons/icon-alarm-badge.js";
@@ -8,9 +8,10 @@ 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 { getAlertBadgeComponent, AlertBadgeComponent } from "../../alert-severity.js";
-import { blinkingAll } from "../../palettes/blinking.js";
+import { AlertType, FlashingSpeed } from "../../types.js";
+import { resolveFlashingSpeed, AlertFlashPhase, getAlertBadgeComponent, AlertBadgeComponent } from "../../alert-severity.js";
+import { FlashingController } from "../../palettes/flashing-controller.js";
+import { roundedRectPath } from "../../svghelpers/rounded-rect.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -40,11 +41,20 @@ var ObcAlertFrameMode = /* @__PURE__ */ ((ObcAlertFrameMode2) => {
   ObcAlertFrameMode2["unackedRectified"] = "unacked-rectified";
   return ObcAlertFrameMode2;
 })(ObcAlertFrameMode || {});
+var ObcAlertFrameFlashEffect = /* @__PURE__ */ ((ObcAlertFrameFlashEffect2) => {
+  ObcAlertFrameFlashEffect2["Outline"] = "outline";
+  ObcAlertFrameFlashEffect2["OutlineEased"] = "outline-eased";
+  return ObcAlertFrameFlashEffect2;
+})(ObcAlertFrameFlashEffect || {});
 var AlertFrameTextSize = /* @__PURE__ */ ((AlertFrameTextSize2) => {
   AlertFrameTextSize2["Regular"] = "regular";
   AlertFrameTextSize2["Large"] = "large";
   return AlertFrameTextSize2;
 })(AlertFrameTextSize || {});
+const DASH_FLASH_GROWTH_PX = 2;
+function sameDashBox(a, b) {
+  return b !== void 0 && a.width === b.width && a.height === b.height && a.thickness === b.thickness && a.radii.every((r, i) => r === b.radii[i]);
+}
 let ObcAlertFrame = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -52,6 +62,34 @@ let ObcAlertFrame = class extends LitElement {
     this.thickness = "small";
     this.status = AlertType.Alarm;
     this.mode = "acked-active";
+    this.flashingSpeed = FlashingSpeed.Default;
+    this.flashEffect = "outline";
+    this.flashing = new FlashingController(
+      this,
+      () => this.resolvedFlashingSpeed
+    );
+    this.measureDash = () => {
+      const wrapper = this.wrapper;
+      if (!wrapper) {
+        return;
+      }
+      const style = getComputedStyle(wrapper);
+      const px = (value) => parseFloat(value) || 0;
+      const box = {
+        width: wrapper.offsetWidth,
+        height: wrapper.offsetHeight,
+        thickness: px(style.getPropertyValue("--thickness")),
+        radii: [
+          px(style.borderTopLeftRadius),
+          px(style.borderTopRightRadius),
+          px(style.borderBottomRightRadius),
+          px(style.borderBottomLeftRadius)
+        ]
+      };
+      if (!sameDashBox(box, this.dashBox)) {
+        this.dashBox = box;
+      }
+    };
     this.wrapContent = false;
     this.fullWidth = false;
     this.sharpEdgeTopLeft = false;
@@ -62,6 +100,79 @@ let ObcAlertFrame = class extends LitElement {
     this.showIcon = false;
     this.showAlertCategoryIcon = true;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.requestUpdate();
+    }
+  }
+  updated() {
+    const wantsDash = this.mode === "unacked-rectified" && this.isConnected;
+    if (wantsDash && !this.dashObserver && this.wrapper) {
+      this.dashObserver = new ResizeObserver(this.measureDash);
+      this.dashObserver.observe(this.wrapper);
+    }
+    if (wantsDash) {
+      this.measureDash();
+    }
+    if (!wantsDash && this.dashObserver) {
+      this.dashObserver.disconnect();
+      this.dashObserver = void 0;
+      this.dashBox = void 0;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.dashObserver?.disconnect();
+    this.dashObserver = void 0;
+  }
+  renderDash() {
+    const box = this.dashBox;
+    if (this.mode !== "unacked-rectified" || !box) {
+      return nothing;
+    }
+    const pad = box.thickness + DASH_FLASH_GROWTH_PX;
+    const centreline = {
+      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
+      )
+    };
+    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() {
+    switch (this.mode) {
+      case "unacked-active":
+        return resolveFlashingSpeed(
+          this.flashingSpeed,
+          this.status,
+          AlertFlashPhase.Active
+        );
+      case "unacked-rectified":
+        return resolveFlashingSpeed(
+          this.flashingSpeed,
+          this.status,
+          AlertFlashPhase.Rectified
+        );
+      default:
+        return FlashingSpeed.Fixed;
+    }
+  }
   render() {
     return html`
       <div
@@ -77,37 +188,16 @@ let ObcAlertFrame = class extends LitElement {
       "sharp-edge-top-right": this.sharpEdgeTopRight,
       "sharp-edge-bottom-left": this.sharpEdgeBottomLeft,
       "sharp-edge-bottom-right": this.sharpEdgeBottomRight,
-      [this.mode]: true
+      [this.mode]: true,
+      ["flash-" + this.resolvedFlashingSpeed]: true,
+      ["flash-effect-" + this.flashEffect]: true
     })}
       >
         <slot></slot>
-        ${this.flap()}
+        ${this.renderDash()} ${this.flap()}
       </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 nothing;
@@ -186,6 +276,18 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], ObcAlertFrame.prototype, "mode", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertFrame.prototype, "flashingSpeed", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertFrame.prototype, "flashEffect", 2);
+__decorateClass([
+  state()
+], ObcAlertFrame.prototype, "dashBox", 2);
+__decorateClass([
+  query(".wrapper")
+], ObcAlertFrame.prototype, "wrapper", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], ObcAlertFrame.prototype, "wrapContent", 2);
@@ -225,6 +327,7 @@ function wrapWithAlertFrame(options, content, fullWidth = false) {
     .thickness=${options.thickness ?? "small"}
     .status=${options.status ?? AlertType.Alarm}
     .mode=${options.mode ?? "acked-active"}
+    .flashingSpeed=${options.flashingSpeed ?? FlashingSpeed.Default}
     .showIcon=${options.showIcon ?? false}
     .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}
     .wrapContent=${true}
@@ -235,6 +338,7 @@ function wrapWithAlertFrame(options, content, fullWidth = false) {
 export {
   AlertFrameTextSize,
   ObcAlertFrame,
+  ObcAlertFrameFlashEffect,
   ObcAlertFrameMode,
   AlertType as ObcAlertFrameStatus,
   ObcAlertFrameThickness,