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

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

@@ -24,12 +24,12 @@
   position: relative;
   width: 100%;
   height: 100%;
-  border-radius: calc(
-    var(--ui-components-button-border-radius) + var(--thickness) / 2
-  );
+  /* The stroke's centreline follows this radius, like a Figma centre stroke. */
+  border-radius: var(--ui-components-button-border-radius);
   outline: var(--thickness) solid var(--bg-color);
-  outline-offset: 0;
-  /* +2 px outward while on, both thicknesses (Figma Flash=yes: 2 → 4 px). */
+  /* Centre stroke: frames on touching components share one edge. */
+  outline-offset: calc(-1 * var(--thickness) / 2);
+  /* +2 px while on, 1 px each side, both thicknesses (Figma Flash=yes: 2 → 4 px). */
   --blink-width: 2px;
   &.thickness-small {
     --thickness: 2px;
@@ -62,7 +62,9 @@
   --flash-transition: 50ms linear;
 
   &.flash-effect-outline-eased {
-    transition: outline-width var(--flash-transition);
+    transition:
+      outline-width var(--flash-transition),
+      outline-offset var(--flash-transition);
 
     .flap {
       transition: box-shadow var(--flash-transition);
@@ -88,14 +90,10 @@
   &.unacked-active,
   &.unacked-rectified {
     outline-width: calc(var(--thickness) + var(--blink-width-dynamic));
-  }
-
-  &.unacked-active {
-    --flap-grow: var(--blink-width-dynamic);
-  }
-
-  &.unacked-rectified {
-    /* The dashed stroke is centred, so it moves out by half its growth. */
+    outline-offset: calc(
+      -1 * (var(--thickness) + var(--blink-width-dynamic)) / 2
+    );
+    /* The stroke grows on both sides, so its outer edge moves by half. */
     --flap-grow: calc(var(--blink-width-dynamic) / 2);
   }
 
@@ -160,9 +158,9 @@
   gap: 2px;
 
   &.small {
-    top: calc(-1 * var(--thickness));
+    top: calc(-1 * var(--thickness) / 2);
     right: calc(
-      -1 * var(--app-components-alert-frame-icon-size) - var(--thickness) / 2 -
+      -1 * var(--app-components-alert-frame-icon-size) -
         var(--ui-components-badge-padding) * 2
     );
   }
@@ -272,10 +270,10 @@
 
   &.large {
     flex-direction: column;
-    top: calc(-1 * var(--thickness));
-    bottom: calc(-1 * var(--thickness));
+    top: calc(-1 * var(--thickness) / 2);
+    bottom: calc(-1 * var(--thickness) / 2);
     right: calc(
-      -1 * var(--app-components-alert-frame-icon-size) + var(--thickness) / 2 -
+      -1 * var(--app-components-alert-frame-icon-size) + var(--thickness) -
         var(--ui-components-badge-padding) * 2
     );
     border-radius: 0px
@@ -285,13 +283,12 @@
 
   &.bottom,
   &.top {
-    left: calc(-1 * var(--thickness));
-    right: calc(-1 * var(--thickness));
+    left: calc(-1 * var(--thickness) / 2);
+    right: calc(-1 * var(--thickness) / 2);
     padding: var(--app-components-alert-frame-large-flip-padding-vertical)
       var(--app-components-alert-frame-large-flip-4px-padding-horizontal);
     bottom: calc(
-      -1 * var(--thickness) / 2 -
-        var(--global-typography-ui-label-line-height) -
+      -1 * var(--global-typography-ui-label-line-height) -
         var(--app-components-alert-frame-large-flip-padding-vertical) * 2
     );
     border-radius: 0px 0px var(--button-border-radius-bottom-right)
@@ -308,7 +305,7 @@
     .text-size-large & {
       @mixin font-body;
       bottom: calc(
-        var(--thickness) / 2 - var(--global-typography-ui-body-line-height) -
+        var(--thickness) - var(--global-typography-ui-body-line-height) -
           var(--app-components-alert-frame-large-flip-padding-vertical) * 2
       );
 
@@ -321,8 +318,7 @@
   &.top {
     bottom: unset !important;
     top: calc(
-      -1 * var(--thickness) / 2 -
-        var(--global-typography-ui-label-line-height) -
+      -1 * var(--global-typography-ui-label-line-height) -
         var(--app-components-alert-frame-large-flip-padding-vertical) * 2
     );
     border-radius: var(--button-border-radius-bottom-right)
@@ -330,7 +326,7 @@
 
     .text-size-large & {
       top: calc(
-        var(--thickness) / 2 - var(--global-typography-ui-body-line-height) -
+        var(--thickness) - var(--global-typography-ui-body-line-height) -
           var(--app-components-alert-frame-large-flip-padding-vertical) * 2
       );
     }

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

@@ -221,6 +221,21 @@ describe('obc-alert-frame flashing lifecycle', () => {
     expect(midway).toBeLessThan(4);
   });
 
+  it('centres the stroke on the frame edge and grows it 1 px each side while on', async () => {
+    const el = await setup(ObcAlertFrameMode.unackedActive);
+    const wrapper = el.shadowRoot!.querySelector('.wrapper') as HTMLElement;
+    const outline = () => {
+      const style = getComputedStyle(wrapper);
+      return [style.outlineWidth, style.outlineOffset];
+    };
+    const [flash] = el.getAnimations();
+    flash.pause();
+    flash.currentTime = 100;
+    expect(outline()).toEqual(['4px', '-2px']);
+    flash.currentTime = 500;
+    expect(outline()).toEqual(['2px', '-1px']);
+  });
+
   describe('rectified dash', () => {
     it('draws the 12/6 dash as one svg path whose stroke width flashes', async () => {
       const el = await setup(ObcAlertFrameMode.unackedRectified);
@@ -263,7 +278,10 @@ describe('obc-alert-frame flashing lifecycle', () => {
 
       const sharp = path().getAttribute('d')!;
       expect(sharp).not.toBe(rounded);
-      expect(sharp.startsWith('M3 3 H')).toBe(true);
+      // The sharp corner sits on the wrapper corner: the svg is shifted by -pad.
+      expect(sharp.startsWith('M2 2 H')).toBe(true);
+      const svg = el.shadowRoot!.querySelector('svg.dash') as SVGSVGElement;
+      expect(svg.style.getPropertyValue('--dash-pad')).toBe('2px');
     });
 
     it('removes the svg when the mode leaves unacked-rectified', async () => {

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

@@ -290,6 +290,53 @@ export const CriticalUnacked: Story = {
   },
 };
 
+const ADJACENT_FRAMES: {
+  status: AlertType;
+  mode: ObcAlertFrameMode;
+  thickness: ObcAlertFrameThickness;
+}[] = [
+  {
+    status: AlertType.Warning,
+    mode: ObcAlertFrameMode.unackedActive,
+    thickness: ObcAlertFrameThickness.Small,
+  },
+  {
+    status: AlertType.Alarm,
+    mode: ObcAlertFrameMode.ackedActive,
+    thickness: ObcAlertFrameThickness.Small,
+  },
+  {
+    status: AlertType.Caution,
+    mode: ObcAlertFrameMode.ackedActive,
+    thickness: ObcAlertFrameThickness.Large,
+  },
+];
+
+export const AdjacentFrames: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Frames on touching components share one edge: every stroke is centred on the edge of its component. The top frame is in its on phase, so its wider stroke shows on both sides of the thinner one below it.',
+      },
+    },
+  },
+  render: () =>
+    html`<div style="display: grid; width: 240px; padding: 16px">
+      ${ADJACENT_FRAMES.map(
+        (frame) =>
+          html`<div style="position: relative; height: 56px">
+            <obc-alert-frame
+              .type=${ObcAlertFrameType.Regular}
+              .status=${frame.status}
+              .mode=${frame.mode}
+              .thickness=${frame.thickness}
+            ></obc-alert-frame>
+          </div>`
+      )}
+    </div>`,
+};
+
 export const FlashComparison: Story = {
   tags: ['skip-test'],
   render: () => {

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

@@ -66,10 +66,10 @@ export enum ObcAlertFrameMode {
 }
 
 /**
- * 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).
+ * How the frame renders the on phase of a flash: `outline` grows the centred
+ * stroke by 2 px, 1 px on each side, 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',
@@ -94,7 +94,7 @@ interface DashBox {
   radii: RoundedRect['radii'];
 }
 
-/** Room the svg leaves around the box for the stroke's on-phase growth. */
+/** On-phase stroke growth; the svg leaves half of stroke plus growth around the box. */
 const DASH_FLASH_GROWTH_PX = 2;
 
 function sameDashBox(a: DashBox, b: DashBox | undefined): boolean {
@@ -130,6 +130,7 @@ export interface AlertFrameConfig {
  *   - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.
  *   - `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.
+ * - **Centred stroke:** The stroke straddles the frame edge, half over the content and half outside, so frames on touching components share one edge. While flashing it grows by 1 px on each side.
  * - **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, 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.
@@ -202,7 +203,7 @@ export interface AlertFrameConfig {
  *   (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;
+ * @property flashEffect - `outline` (default) grows the outline by 2 px, 1 px each side, 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).
@@ -327,18 +328,16 @@ export class ObcAlertFrame extends LitElement {
     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 pad = (box.thickness + DASH_FLASH_GROWTH_PX) / 2;
+    // The centreline is the wrapper edge, as for the solid outline. 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'],
+      x: pad,
+      y: pad,
+      width: box.width,
+      height: box.height,
+      radii: box.radii,
     };
     const width = box.width + 2 * pad;
     const height = box.height + 2 * pad;

package/src/components/tree-navigation-item/tree-navigation-item.ts

@@ -8,7 +8,8 @@ import '../../icons/icon-chevron-right-google.js';
 import '../../icons/icon-alert-header-aggregated-iec.js';
 import '../../icons/icon-alert-header-group-iec.js';
 import '../badge/badge.js';
-import {AlertType, ALERT_SEVERITY_PRIORITY} from '../../types.js';
+import type {AlertCounts} from '../../types.js';
+import {rankAlertCounts, type RankedAlertCount} from '../../alert-severity.js';
 
 /**
  * Guide line drawn for one indentation column. Normally computed by
@@ -43,36 +44,16 @@ export enum TreeTerminalType {
 }
 
 /**
- * Per-severity alert counts for a tree row's trailing badge(s). Each `count*`
- * is the number of active alerts of that severity at or beneath the row — the
- * level severities `level-critical`, `level-high`, `level-medium`, `level-low`,
- * and `level-diagnostic`, plus the IEC severities `alarm`, `warning`, and
- * `caution`. Badges are ordered and aggregated by the shared
- * `ALERT_SEVERITY_PRIORITY` ranking, most to least severe.
+ * Per-severity alert counts for a tree row's trailing badge(s): the active
+ * alerts at or beneath the row, ordered by `rankAlertCounts`.
  *
  * Set `combine` to collapse the counts into a single badge showing the total,
  * styled as the highest category present; otherwise one badge is rendered per
  * non-zero count.
  */
-export interface TreeNavigationItemAlerts {
+export interface TreeNavigationItemAlerts extends AlertCounts {
   /** Collapse all counts into one badge: total count, highest-severity style. */
   combine?: boolean;
-  /** Number of level-critical alerts. */
-  countLevelCritical?: number;
-  /** Number of alarm alerts. */
-  countAlarm?: number;
-  /** Number of level-high alerts. */
-  countLevelHigh?: number;
-  /** Number of warning alerts. */
-  countWarning?: number;
-  /** Number of level-medium alerts. */
-  countLevelMedium?: number;
-  /** Number of caution alerts. */
-  countCaution?: number;
-  /** Number of level-low alerts. */
-  countLevelLow?: number;
-  /** Number of level-diagnostic alerts. */
-  countLevelDiagnostic?: number;
 }
 
 /**
@@ -177,8 +158,8 @@ export class ObcTreeNavigationItem extends LitElement {
    * every count at 0) for a row with no alerts. See {@link TreeNavigationItemAlerts}.
    *
    * - When `combine` is true, a single badge is shown: its number is the sum
-   *   of all counts and its severity is the highest category present
-   *   (critical → alarm → warning → caution).
+   *   of all counts and its severity is the highest category present, ranked
+   *   by `ALERT_SEVERITY_PRIORITY`.
    * - Otherwise one badge is shown per count greater than 0, ordered most to
    *   least severe and spaced by the alert-counter spacing token.
    */
@@ -193,40 +174,9 @@ export class ObcTreeNavigationItem extends LitElement {
     this.wrapperElement?.focus(options);
   }
 
-  /**
-   * The badge(s) to render from `alerts`, as `{type, count}` pairs already in
-   * severity order, ranked by `ALERT_SEVERITY_PRIORITY`.
-   *
-   * - No `alerts`, or every count 0 → no badges.
-   * - `combine` → a single pair: the summed count typed as the highest
-   *   category that has any alerts.
-   * - Otherwise → one pair per count greater than 0.
-   */
-  private get alertBadges(): {type: AlertType; count: number}[] {
-    const alerts = this.alerts;
-    if (!alerts) return [];
-    const countByType: Partial<Record<AlertType, number>> = {
-      [AlertType.LevelCritical]: alerts.countLevelCritical ?? 0,
-      [AlertType.Alarm]: alerts.countAlarm ?? 0,
-      [AlertType.LevelHigh]: alerts.countLevelHigh ?? 0,
-      [AlertType.Warning]: alerts.countWarning ?? 0,
-      [AlertType.LevelMedium]: alerts.countLevelMedium ?? 0,
-      [AlertType.Caution]: alerts.countCaution ?? 0,
-      [AlertType.LevelLow]: alerts.countLevelLow ?? 0,
-      [AlertType.LevelDiagnostic]: alerts.countLevelDiagnostic ?? 0,
-    };
-    // Order (and, when combining, rank) by the shared severity priority,
-    // keeping only the severities this component exposes.
-    const ranked = ALERT_SEVERITY_PRIORITY.filter(
-      (type) => type in countByType
-    ).map((type) => ({type, count: countByType[type] ?? 0}));
-    if (alerts.combine) {
-      const total = ranked.reduce((sum, b) => sum + b.count, 0);
-      const highest = ranked.find((b) => b.count > 0);
-      if (!highest) return [];
-      return [{type: highest.type, count: total}];
-    }
-    return ranked.filter((b) => b.count > 0);
+  /** The badge(s) to render from `alerts`, ranked by `rankAlertCounts`. */
+  private get alertBadges(): RankedAlertCount[] {
+    return this.alerts ? rankAlertCounts(this.alerts, this.alerts.combine) : [];
   }
 
   /** A root-level row has no ancestor columns, so it draws no connector lines. */

package/src/generated/locales/es-419.ts

@@ -13,10 +13,20 @@
 's8119af112f965c78': `Brillantez`,
 'sa7f8e003ff63ef9f': `No alertas activas`,
 'se0955919920ee87d': `Día`,
+'scd93bdcb7863611a': `Alarm`,
+'s34be76c6b1eadbef': `Warning`,
+'sf11564cc75a8d5a6': `Caution`,
+'sa45f3300b97dabe8': `Critical`,
+'s9deeefd89ca8a81d': `High`,
+'sac6bdc71f750ac96': `Medium`,
+'s24f3a319b88552c1': `Low`,
+'sca9e13f23f0c433e': `Diagnostic`,
+'sf268637d594dacb2': `Shelved`,
+'s88d1c1e15ca1aade': `Alerts`,
+'s68395a4c26a9e8ac': `Silence`,
 'sf993bb199fefbe04': `All`,
 's01b603dddbaba7b6': `Unacked`,
 'se92d11374fcdf768': `No unacknowledged alerts`,
-'sf268637d594dacb2': `Shelved`,
 's2a2488656f97b746': `No shelved alerts`,
 'sf59d9197d2e50c93': `Blocked`,
 's61a9ee872da3a0cd': `No blocked alerts`,
@@ -26,8 +36,6 @@
 's5ba9818f6a39054c': `Go to the 'Alert list' for more details or to manage existing alerts.`,
 'sa45a194b58837e4f': `Active`,
 'sa6ef04345891fb38': `ACK visible`,
-'s68395a4c26a9e8ac': `Silence`,
-'s88d1c1e15ca1aade': `Alerts`,
 's3cf89cb47fdde7e9': `Link`,
 's47278872f6826da8': `Dusk`,
 's9e34794bcfdc6665': `Bright`,

package/src/generated/locales/fi-FI.ts

@@ -41,6 +41,14 @@
 'sf993bb199fefbe04': `Kaikki`,
 'sfa32c219a0764262': `VAHVISTA`,
 'sfbc33dd48f23752c': `Tunnistetunnus`,
+'scd93bdcb7863611a': `Alarm`,
+'s34be76c6b1eadbef': `Warning`,
+'sf11564cc75a8d5a6': `Caution`,
+'sa45f3300b97dabe8': `Critical`,
+'s9deeefd89ca8a81d': `High`,
+'sac6bdc71f750ac96': `Medium`,
+'s24f3a319b88552c1': `Low`,
+'sca9e13f23f0c433e': `Diagnostic`,
 'sa45a194b58837e4f': `Active`,
 'sc5a5b268010fc312': `Audio muted`,
 's740deeebbea89396': `Audio on`,

package/src/navigation-instruments/readout/readout.css

@@ -173,42 +173,17 @@ obc-readout-block {
 }
 
 /* ---------- Value alert overlay ----------
- * A pure overlay around the value reading: it reserves no space, so toggling
- * the frame never shifts content. The box is offset outward by
- * (padding − stroke/2) on each axis so the alert-frame's outline (drawn
- * outside its box) lands CENTRED on the 4px/2px padding line. */
+ * Reserves no space, so toggling the frame never shifts content. The box sits
+ * on the 4px/2px padding line, where obc-alert-frame centres its stroke. */
 .value-alert-overlay {
   --_readout-value-frame-padding-horizontal: 4px;
   --_readout-value-frame-padding-vertical: 2px;
-  /* Must match obc-alert-frame's ACTUAL outline width so the stroke stays
-     centred on the 4px/2px line. `thickness-small` is hard-coded to 2px in
-     alert-frame.css, so use a literal 2px here; `thickness-large` is handled
-     below. */
-  --_readout-value-frame-stroke: 2px;
   position: absolute;
-  inset-inline: calc(
-    -1 *
-      (
-        var(--_readout-value-frame-padding-horizontal) -
-          var(--_readout-value-frame-stroke) / 2
-      )
-  );
-  inset-block: calc(
-    -1 *
-      (
-        var(--_readout-value-frame-padding-vertical) -
-          var(--_readout-value-frame-stroke) / 2
-      )
-  );
+  inset-inline: calc(-1 * var(--_readout-value-frame-padding-horizontal));
+  inset-block: calc(-1 * var(--_readout-value-frame-padding-vertical));
   pointer-events: none;
 }
 
-.value-alert-overlay.thickness-large {
-  --_readout-value-frame-stroke: var(
-    --global-size-spacing-border-weight-alertframe
-  );
-}
-
 /* ---------- Meta zone (label + unit) ----------
  * `.meta` is a row hosting the optional leading icon and `.meta-labels`; the
  * inline/stacked arrangement applies to `.meta-labels` (the label/unit pair). */

package/src/navigation-instruments/readout/readout.ts

@@ -851,15 +851,7 @@ export class ObcReadout extends LitElement {
     }
     const thickness = alert.thickness ?? ObcAlertFrameThickness.Small;
     return html`
-      <div
-        class=${classMap({
-          'value-alert-overlay': true,
-          // The outward offset is thickness-dependent (see the CSS): large frames
-          // draw a wider outline, so the box must sit further out to stay centred.
-          'thickness-large': thickness === ObcAlertFrameThickness.Large,
-        })}
-        aria-hidden="true"
-      >
+      <div class="value-alert-overlay" aria-hidden="true">
         <obc-alert-frame
           part="value-alert-frame"
           .type=${alert.type ?? ObcAlertFrameType.Regular}

package/src/navigation-instruments/readout-list-item/readout-list-item.css

@@ -181,47 +181,19 @@ obc-readout-block {
 }
 
 /* ---------- Value alert overlay ----------
- * A pure overlay around the value reading: it reserves no space, so toggling the
- * frame never changes the row height or breaks cross-row column alignment. The
- * box is offset outward by (padding − stroke/2) on each axis so the alert-frame's
- * outline (drawn outside its box) lands CENTRED on the 4px/2px padding line
- * (half inside / half outside), matching Figma 58:10120. */
+ * Reserves no space, so the frame never changes the row height or the column
+ * alignment. The box sits on the 4px/2px padding line, where obc-alert-frame
+ * centres its stroke (Figma 58:10120). */
 .value-alert-overlay {
   --_obc-readout-value-frame-padding-horizontal: 4px;
   --_obc-readout-value-frame-padding-vertical: 2px;
-  /* Must match obc-alert-frame's ACTUAL outline width so the stroke stays centred
-     on the 4px/2px line. `thickness-small` is hard-coded to 2px in
-     alert-frame.css (it does NOT use the themed stroke-width token), so use a
-     literal 2px here; `thickness-large` is handled below. */
-  --_obc-readout-value-frame-stroke: 2px;
   position: absolute;
-  inset-inline: calc(
-    -1 *
-      (
-        var(--_obc-readout-value-frame-padding-horizontal) -
-          var(--_obc-readout-value-frame-stroke) / 2
-      )
-  );
-  inset-block: calc(
-    -1 *
-      (
-        var(--_obc-readout-value-frame-padding-vertical) -
-          var(--_obc-readout-value-frame-stroke) / 2
-      )
-  );
+  inset-inline: calc(-1 * var(--_obc-readout-value-frame-padding-horizontal));
+  inset-block: calc(-1 * var(--_obc-readout-value-frame-padding-vertical));
   /* Display-only: never intercept clicks on a clickable row. */
   pointer-events: none;
 }
 
-/* thickness=large: obc-alert-frame's large outline uses the alert-frame border
-   weight token, so the overlay's outward offset must use the same width to keep
-   the stroke centred on the padding line. */
-.value-alert-overlay.thickness-large {
-  --_obc-readout-value-frame-stroke: var(
-    --global-size-spacing-border-weight-alertframe
-  );
-}
-
 /* The readout building blocks (advice / setpoint / value) now render inside
    `obc-readout-block`; their layout / colour / hinted-zero / data-quality CSS
    lives there. The list-item only bridges the public colour vars (see top) and

package/src/navigation-instruments/readout-list-item/readout-list-item.ts

@@ -926,15 +926,7 @@ export class ObcReadoutListItem extends LitElement {
     }
     const thickness = alert.thickness ?? ObcAlertFrameThickness.Small;
     return html`
-      <div
-        class=${classMap({
-          'value-alert-overlay': true,
-          // The outward offset is thickness-dependent (see the CSS): large frames
-          // draw a wider outline, so the box must sit further out to stay centred.
-          'thickness-large': thickness === ObcAlertFrameThickness.Large,
-        })}
-        aria-hidden="true"
-      >
+      <div class="value-alert-overlay" aria-hidden="true">
         <obc-alert-frame
           part="value-alert-frame"
           .type=${alert.type ?? ObcAlertFrameType.Regular}

package/src/palettes/blinking.spec.ts

@@ -24,14 +24,14 @@ describe('installFlashing', () => {
   });
 
   it.each(FLASH_TEMPOS)(
-    '%s runs on for its on-time, off for 400 ms, from the document origin',
+    '%s runs on for its on-time, then off for its off-time, from the document origin',
     (tempo) => {
       const el = host();
       const cancel = installFlashing(el, tempo);
       const [anim] = el.getAnimations();
       const effect = anim.effect as KeyframeEffect;
       const timing = effect.getTiming();
-      expect(timing.duration).toBe(FLASH_ON_MS[tempo] + FLASH_OFF_MS);
+      expect(timing.duration).toBe(FLASH_ON_MS[tempo] + FLASH_OFF_MS[tempo]);
       expect(timing.iterations).toBe(Infinity);
       const frames = effect.getKeyframes();
       expect(frames).toHaveLength(3);
@@ -46,32 +46,47 @@ describe('installFlashing', () => {
     }
   );
 
-  it('nests the cycles so every tempo dips together', () => {
+  it('follows the tempo table: on for 400 ms, off for 400, 1200 or 2800 ms', () => {
+    expect(
+      FLASH_TEMPOS.map((tempo) => [FLASH_ON_MS[tempo], FLASH_OFF_MS[tempo]])
+    ).toEqual([
+      [400, 400],
+      [400, 1200],
+      [400, 2800],
+    ]);
+  });
+
+  it('nests the cycles so every tempo lights up together', () => {
     expect(flashPeriodMs(FlashingSpeed.Fast)).toBe(800);
     expect(flashPeriodMs(FlashingSpeed.Slow)).toBe(1600);
     expect(flashPeriodMs(FlashingSpeed.VerySlow)).toBe(3200);
   });
 
-  it('drives the on/off variables in step', () => {
-    const el = host();
-    installFlashing(el, FlashingSpeed.Fast);
-    const [anim] = el.getAnimations();
-    const on = () =>
-      getComputedStyle(el).getPropertyValue(
-        flashVariable(FlashingSpeed.Fast, 'on')
-      );
-    const off = () =>
-      getComputedStyle(el).getPropertyValue(
-        flashVariable(FlashingSpeed.Fast, 'off')
-      );
-    anim.pause();
-    anim.currentTime = 100;
-    expect(on().trim()).toBe('1');
-    expect(off().trim()).toBe('0');
-    anim.currentTime = 500;
-    expect(on().trim()).toBe('0');
-    expect(off().trim()).toBe('1');
-  });
+  it.each(FLASH_TEMPOS)(
+    '%s drives the on/off variables in step, on phase first',
+    (tempo) => {
+      const el = host();
+      installFlashing(el, tempo);
+      const [anim] = el.getAnimations();
+      const read = (phase: 'on' | 'off') =>
+        getComputedStyle(el)
+          .getPropertyValue(flashVariable(tempo, phase))
+          .trim();
+      const period = flashPeriodMs(tempo);
+      anim.pause();
+      for (const [time, lit] of [
+        [100, true],
+        [500, false],
+        [period - 100, false],
+        [period + 100, true],
+      ] as const) {
+        anim.currentTime = time;
+        expect([time, read('on'), read('off')]).toEqual(
+          lit ? [time, '1', '0'] : [time, '0', '1']
+        );
+      }
+    }
+  );
 
   it('blinkingAll installs one animation per tempo and cancels them together', () => {
     const el = host();