@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.88 → 2.0.0-next.90

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

@@ -7,6 +7,55 @@
   width: 100%;
 }
 
+/* Bridge the list-item's public colour custom properties onto the block's, so
+   consumers keep theming the value / setpoint / advice / hinted-zero colours via
+   `--obc-readout-list-item-*` even though they now render inside obc-readout-block. */
+obc-readout-block {
+  --obc-readout-block-value-color: var(
+    --obc-readout-list-item-value-color,
+    var(--element-neutral-color)
+  );
+  --obc-readout-block-value-enhanced-color: var(
+    --obc-readout-list-item-value-enhanced-color,
+    var(--element-neutral-enhanced-color)
+  );
+  --obc-readout-block-setpoint-color: var(
+    --obc-readout-list-item-setpoint-color,
+    var(--element-neutral-color)
+  );
+  --obc-readout-block-setpoint-enhanced-color: var(
+    --obc-readout-list-item-setpoint-enhanced-color,
+    var(--instrument-enhanced-secondary-color)
+  );
+  --obc-readout-block-setpoint-touching-outline-color: var(
+    --obc-readout-list-item-setpoint-touching-outline-color,
+    var(--element-neutral-enhanced-color)
+  );
+  --obc-readout-block-setpoint-touching-color: var(
+    --obc-readout-list-item-setpoint-touching-color,
+    var(--base-blue-100)
+  );
+  --obc-readout-block-advice-color: var(
+    --obc-readout-list-item-advice-color,
+    var(--element-neutral-color)
+  );
+  --obc-readout-block-hinted-color: var(
+    --obc-readout-list-item-hinted-color,
+    var(--element-inactive-color)
+  );
+}
+
+/* Size the consumer-provided block icons forwarded into obc-readout-block's
+   `icon` slot (the block sizes the forwarded slot element; this sizes the
+   consumer's icon to fill it). */
+::slotted([slot="value-icon"]),
+::slotted([slot="setpoint-icon"]),
+::slotted([slot="advice-icon"]) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
 /* ---------- Root / surface ----------
  * `.root` is the touch target (a <button> when clickable, otherwise a <div>).
  * `.surface` is the visible box that carries padding, corner radius, the
@@ -140,115 +189,84 @@
   align-items: flex-end;
 }
 
-/* ---------- Readout building block (advice / setpoint / value) ---------- */
-.block {
+/* ---------- Value reading (value + degree + unit) ----------
+ * Groups the value block, its degree column and the trailing unit so the value
+ * alert frame can wrap all three. Layout-neutral: it adds no gap, so the content
+ * sits exactly where it did when these were siblings of `.value-area`. */
+.value-reading {
+  position: relative;
   display: inline-flex;
   align-items: flex-end;
 }
 
-/* Number + its (setpoint/advice) degree glyph, hugging with no gap — the
-   `.block` gap only separates the icon from this group. */
-.block-content {
-  display: inline-flex;
-  align-items: flex-end;
-}
-
-.block-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  color: inherit;
-  /* Centre the icon against the block's text rather than bottom-aligning it (the
-     block is flex-end). Matters for the value block, whose text is taller than
-     the icon, so the value icon lines up with the number like the smaller
-     setpoint/advice icons do. */
-  align-self: center;
+/* ---------- Value data quality (low-integrity / invalid) ----------
+ * The value's per-block data-quality chip, applied to the whole reading (value +
+ * degree + unit) rather than hugging the value alone — the same logic as the
+ * value alert frame, minus its custom padding. Same look as the block/source
+ * chip (1px outline, check radius, alert-quality colours). Uses `outline` (not
+ * `border`) so it never shifts the value's width / cross-row column alignment.
+ * Setpoint/advice keep their own in-block chip; the row-level data quality on
+ * `.surface` is unchanged. */
+.value-reading.data-low-integrity,
+.value-reading.data-invalid {
+  outline: 1px solid;
+  border-radius: var(--global-border-radius-border-radius-check);
 }
-
-.block-icon obi-input-right,
-.block-icon obi-notification-advice,
-.block-icon ::slotted(*) {
-  display: block;
-  inline-size: 100%;
-  block-size: 100%;
+.value-reading.data-low-integrity {
+  background: var(--alert-low-integrity-background-color);
+  outline-color: var(--alert-low-integrity-border-color);
 }
-
-.hinted-zero {
-  color: var(
-    --obc-readout-list-item-hinted-color,
-    var(--element-inactive-color)
-  );
+.value-reading.data-invalid {
+  background: var(--alert-invalid-background-color);
+  outline-color: var(--alert-invalid-border-color);
 }
 
-/* ---------- Text colours (overridable via custom properties) ----------
- * obc-textbox does not set its own colour, so it inherits these. */
-.block-value {
-  color: var(--obc-readout-list-item-value-color, var(--element-neutral-color));
-}
-.block-value.tone-enhanced {
-  color: var(
-    --obc-readout-list-item-value-enhanced-color,
-    var(--element-neutral-enhanced-color)
-  );
-}
-/* The setpoint shares the value's colour state: neutral by default, enhanced
-   (blue) only when the row is enhanced — never a blue setpoint next to a grey
-   value. `--instrument-enhanced-secondary-color` is the same #2d548b as the
-   value's `--element-neutral-enhanced-color`. */
-.block-setpoint {
-  color: var(
-    --obc-readout-list-item-setpoint-color,
-    var(--element-neutral-color)
-  );
-  /* Flip-flop emphasis + pop-up fade animate at 100ms. */
-  transition:
-    opacity 100ms ease,
-    color 100ms ease;
-}
-.block-setpoint.tone-enhanced {
-  color: var(
-    --obc-readout-list-item-setpoint-enhanced-color,
-    var(--instrument-enhanced-secondary-color)
-  );
-}
-/* Pop-up: fade the setpoint out once value === setpoint, keeping its space so
-   the value stays column-aligned. */
-.block-setpoint.is-hiding {
-  opacity: 0;
-}
-.block-setpoint.is-hidden {
-  opacity: 0;
-  visibility: hidden;
-}
-/* Touching / focus state: the setpoint triangle takes the marker's focus look — a
-   pale fill (--base-blue-100) with a dark 1px edge (--element-neutral-enhanced),
-   mirroring `svghelpers/setpoint.ts` focus (fill base-blue-100 + 2px stroke).
-   The glyph icon is `fill: currentColor` and can't take a CSS `stroke`, so the
-   edge is layered drop-shadows. The setpoint number keeps its normal, readable
-   colour. */
-.block-setpoint.touching {
-  --_touching-outline: var(
-    --obc-readout-list-item-setpoint-touching-outline-color,
-    var(--element-neutral-enhanced-color)
-  );
-}
-.block-setpoint.touching .block-icon {
-  color: var(
-    --obc-readout-list-item-setpoint-touching-color,
-    var(--base-blue-100)
-  );
-  filter: drop-shadow(1px 0 0 var(--_touching-outline))
-    drop-shadow(-1px 0 0 var(--_touching-outline))
-    drop-shadow(0 1px 0 var(--_touching-outline))
-    drop-shadow(0 -1px 0 var(--_touching-outline));
-}
-.block-advice {
-  color: var(
-    --obc-readout-list-item-advice-color,
-    var(--element-neutral-color)
-  );
-}
+/* ---------- 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. */
+.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
+      )
+  );
+  /* 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
+   keeps the surrounding row layout below. */
 
 .label {
   color: var(
@@ -266,23 +284,19 @@
   );
 }
 
-/* ---------- Per-block data quality ----------
+/* ---------- Source data quality ----------
  * Independent of (and nests inside) the row-level data-quality frame. Uses
- * `outline` (not `border`) so the chip never shifts the block's width — the
- * value stays column-aligned across rows. */
-.block.data-low-integrity,
-.block.data-invalid,
+ * `outline` (not `border`) so the chip never shifts the source's width. (The
+ * per-block value/setpoint/advice chips live in `obc-readout-block`.) */
 .source.data-low-integrity,
 .source.data-invalid {
   outline: 1px solid;
   border-radius: var(--global-border-radius-border-radius-check);
 }
-.block.data-low-integrity,
 .source.data-low-integrity {
   background: var(--alert-low-integrity-background-color);
   outline-color: var(--alert-low-integrity-border-color);
 }
-.block.data-invalid,
 .source.data-invalid {
   background: var(--alert-invalid-background-color);
   outline-color: var(--alert-invalid-border-color);
@@ -407,10 +421,6 @@
     --instrument-components-readout-new-list-item-regular-value-container-gap
   );
 }
-.size-small .block {
-  gap: var(--instrument-components-readout-new-general-regular-icon-gap);
-}
-.size-small .block-icon,
 .size-small .leading-icon {
   inline-size: var(
     --instrument-components-readout-new-general-regular-icon-size
@@ -443,10 +453,6 @@
     --instrument-components-readout-new-list-item-medium-value-container-gap
   );
 }
-.size-medium .block {
-  gap: var(--instrument-components-readout-new-general-medium-icon-gap);
-}
-.size-medium .block-icon,
 .size-medium .leading-icon {
   inline-size: var(
     --instrument-components-readout-new-general-medium-icon-size
@@ -474,10 +480,6 @@
 .size-large .value-cluster {
   gap: var(--instrument-components-readout-new-list-item-large-value-gap);
 }
-.size-large .block {
-  gap: var(--instrument-components-readout-new-general-large-icon-gap);
-}
-.size-large .block-icon,
 .size-large .leading-icon {
   inline-size: var(--instrument-components-readout-new-general-large-icon-size);
   block-size: var(--instrument-components-readout-new-general-large-icon-size);
@@ -517,3 +519,22 @@
   );
   --_obc-readout-list-item-data-border: var(--alert-invalid-border-color);
 }
+
+/* ---------- Debug overlay ----------
+ * `showDebugOverlay` outlines each readout building block (red), the degree
+ * columns (blue) and the degree spacer (green) so reserver widths / alignment
+ * are visible. A development aid (mirrors the donut chart's `showDebugOverlay`);
+ * off by default. */
+:host([showDebugOverlay]) obc-readout-block::part(block) {
+  outline: 1px solid rgba(220, 0, 0, 0.7);
+  outline-offset: -1px;
+}
+:host([showDebugOverlay]) obc-readout-block::part(degree),
+:host([showDebugOverlay]) .degree-column {
+  outline: 1px solid rgba(0, 0, 220, 0.7);
+  outline-offset: -1px;
+}
+:host([showDebugOverlay]) .degree-spacer {
+  outline: 1px solid rgba(0, 160, 0, 0.8);
+  outline-offset: -1px;
+}

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

@@ -99,6 +99,7 @@ type ReadoutItemConfig = {
   options?: StoryOptions;
   hasLeadingIcon?: boolean;
   hasValueIcon?: boolean;
+  showDebugOverlay?: boolean;
 };
 
 type ShowcaseCase = {label: string; config: ReadoutItemConfig};
@@ -179,6 +180,7 @@ function renderItem(config: ReadoutItemConfig) {
       .adviceOptions=${o.advice}
       .unitOptions=${o.unit}
       .srcOptions=${o.src}
+      .showDebugOverlay=${config.showDebugOverlay ?? false}
     >
       ${config.hasLeadingIcon
         ? html`<obi-placeholder slot="leading-icon"></obi-placeholder>`
@@ -1260,7 +1262,7 @@ export const PerBlockState: Story = {
                 value: {
                   alert: {
                     status: AlertType.Warning,
-                    mode: ObcAlertFrameMode.unackedActive,
+                    mode: ObcAlertFrameMode.ackedActive,
                     type: ObcAlertFrameType.Regular,
                   },
                 },
@@ -1294,7 +1296,7 @@ export const PerBlockState: Story = {
                 value: {
                   alert: {
                     status: AlertType.Warning,
-                    mode: ObcAlertFrameMode.unackedActive,
+                    mode: ObcAlertFrameMode.ackedActive,
                     type: ObcAlertFrameType.Regular,
                   },
                 },
@@ -1320,7 +1322,7 @@ export const PerBlockState: Story = {
                 dataQuality: ReadoutListItemDataQuality.lowIntegrity,
                 alert: {
                   status: AlertType.Warning,
-                  mode: ObcAlertFrameMode.unackedActive,
+                  mode: ObcAlertFrameMode.ackedActive,
                   type: ObcAlertFrameType.SmallSideFlip,
                   showAlertCategoryIcon: true,
                 },
@@ -1335,7 +1337,7 @@ export const PerBlockState: Story = {
                 dataQuality: ReadoutListItemDataQuality.invalid,
                 alert: {
                   status: AlertType.Alarm,
-                  mode: ObcAlertFrameMode.unackedActive,
+                  mode: ObcAlertFrameMode.ackedActive,
                   type: ObcAlertFrameType.LargeSideFlip,
                   showAlertCategoryIcon: true,
                 },
@@ -1394,6 +1396,94 @@ export const Alarm: Story = {
     }),
 };
 
+// The value alert frame now wraps the whole reading — value + degree + unit — and
+// is drawn as a pure overlay (4px/2px padding, stroke centred on that line), so
+// toggling it changes neither the row height nor the value/unit column positions.
+// Each combo is shown unframed then framed so the constant geometry is obvious;
+// the per-item outline marks the layout box (which the frame never grows).
+const VALUE_FRAME: AlertFrameConfig = {
+  status: AlertType.Warning,
+  mode: ObcAlertFrameMode.ackedActive,
+  type: ObcAlertFrameType.Regular,
+};
+
+const VALUE_FRAME_COMBOS: {label: string; config: ReadoutItemConfig}[] = [
+  {label: 'value + unit', config: {value: 123, unit: 'kn'}},
+  {
+    label: 'value + degree + unit',
+    config: {value: 287, unit: 'T', options: {hasDegree: true}},
+  },
+  {
+    label: 'value + unit + setpoint',
+    config: {value: 123, unit: 'kn', hasSetpoint: true, setpoint: 120},
+  },
+  {
+    label: 'value + unit + advice + setpoint',
+    config: {
+      value: 123,
+      unit: 'kn',
+      hasSetpoint: true,
+      setpoint: 120,
+      hasAdvice: true,
+      advice: 118,
+    },
+  },
+];
+
+export const ValueAlertFrame: Story = {
+  render: () => html`
+    <style>
+      .rli-vf {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        width: 380px;
+      }
+      .rli-vf-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .rli-vf-tag {
+        width: 180px;
+        flex: none;
+        font: 10px/1.2 var(--global-typography-ui-label-font-family, sans-serif);
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: var(--element-neutral-color, #777);
+      }
+      .rli-vf-item {
+        flex: 1;
+        outline: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    </style>
+    <div class="rli-vf">
+      ${VALUE_FRAME_COMBOS.flatMap((combo) =>
+        [false, true].map(
+          (framed) => html`
+            <div class="rli-vf-row">
+              <div class="rli-vf-tag">
+                ${combo.label} ${framed ? '· framed' : '· plain'}
+              </div>
+              <div class="rli-vf-item">
+                ${renderItem({
+                  ...combo.config,
+                  label: 'Heading',
+                  options: {
+                    ...combo.config.options,
+                    size: ReadoutListItemSize.medium,
+                    value: framed ? {alert: VALUE_FRAME} : undefined,
+                  },
+                })}
+              </div>
+            </div>
+          `
+        )
+      )}
+    </div>
+  `,
+};
+
 // Each row drops a different part; the per-row outline makes it obvious that the
 // row height and the bottom baseline stay constant regardless of what's missing.
 const MISSING_PARTS_ROWS: {title: string; config: ReadoutItemConfig}[] = [
@@ -1498,9 +1588,11 @@ export const MissingParts: Story = {
  * value digit edges, not both. Aligning the value edges would need either a
  * constant degree reserve (which widens the smaller rows' `°` — visually
  * undesirable) or pinning the value edge and letting the unit column stagger;
- * left for the designer. Two rows also carry per-block (nested) state — a value
- * `invalid` chip and a value alert frame — to confirm per-block state does not
- * shift the value edge.
+ * left for the designer. Several rows also carry per-block / row state — a value
+ * `invalid` chip (Battery), a value alert frame (Fuel), a `low-integrity` advice
+ * chip (Pressure), and a whole-row `low-integrity` + `invalid` setpoint + a
+ * row-level alert frame with a badge-icon flap (Distance) — to confirm none of
+ * them shift the aligned columns.
  */
 type AlignmentRow = {
   label: string;
@@ -1521,6 +1613,9 @@ type AlignmentRow = {
   hasValueIcon?: boolean;
   valueDataQuality?: ReadoutListItemDataQuality;
   valueAlert?: AlertFrameConfig;
+  setpointDataQuality?: ReadoutListItemDataQuality;
+  adviceDataQuality?: ReadoutListItemDataQuality;
+  alert?: AlertFrameConfig;
 };
 
 const ALIGNMENT_ROWS: AlignmentRow[] = [
@@ -1546,6 +1641,8 @@ const ALIGNMENT_ROWS: AlignmentRow[] = [
     setpoint: 1015,
     hasAdvice: true,
     advice: 1008,
+    // per-block advice low-integrity — the advice chip must not shift the columns
+    adviceDataQuality: ReadoutListItemDataQuality.lowIntegrity,
   },
   // negative value + fraction + low-integrity data quality
   {
@@ -1555,7 +1652,10 @@ const ALIGNMENT_ROWS: AlignmentRow[] = [
     fractionDigits: 1,
     dataQuality: ReadoutListItemDataQuality.lowIntegrity,
   },
-  // long unit + advice + setpoint (the "miles" row)
+  // long unit + advice + setpoint (the "miles" row) — also a "kitchen sink of
+  // state": whole row low-integrity, an invalid setpoint chip, and a row-level
+  // alert frame with a badge-icon flap, all at once, to prove none of them shift
+  // the aligned columns.
   {
     label: 'Distance',
     value: 4.2,
@@ -1565,6 +1665,14 @@ const ALIGNMENT_ROWS: AlignmentRow[] = [
     setpoint: 4.5,
     hasAdvice: true,
     advice: 4,
+    dataQuality: ReadoutListItemDataQuality.lowIntegrity,
+    setpointDataQuality: ReadoutListItemDataQuality.invalid,
+    alert: {
+      status: AlertType.Warning,
+      mode: ObcAlertFrameMode.ackedActive,
+      type: ObcAlertFrameType.SmallSideFlip,
+      showAlertCategoryIcon: true,
+    },
   },
   // kitchen sink: value + setpoint + advice + leading icon + value icon
   {
@@ -1610,7 +1718,7 @@ const ALIGNMENT_ROWS: AlignmentRow[] = [
     unit: '%',
     valueAlert: {
       status: AlertType.Warning,
-      mode: ObcAlertFrameMode.unackedActive,
+      mode: ObcAlertFrameMode.ackedActive,
       type: ObcAlertFrameType.Regular,
     },
   },
@@ -1649,24 +1757,12 @@ const alignmentStyle = `
     text-transform: uppercase; letter-spacing: 0.06em; color: var(--element-neutral-color, #777);
   }
   .rli-align-col {
-    display: flex; flex-direction: column; gap: 2px; width: 480px;
+    display: flex; flex-direction: column; gap: 8px; width: 480px;
     padding: 8px; border: 1px dashed var(--border-divider-color, #ccc); border-radius: 8px;
   }
-  /* Debug aid (temporary): outline each readout building block (red) and the
-     degree column (blue) so reserver widths / alignment are visible. Scoped to
-     this story only via .rli-align-wrap — safe to delete when no longer needed. */
-  .rli-align-wrap obc-readout-list-item::part(block) {
-    outline: 1px solid rgba(220, 0, 0, 0.7); outline-offset: -1px;
-  }
-  .rli-align-wrap obc-readout-list-item::part(degree) {
-    outline: 1px solid rgba(0, 0, 220, 0.7); outline-offset: -1px;
-  }
-  .rli-align-wrap obc-readout-list-item::part(degree-spacer) {
-    outline: 1px solid rgba(0, 160, 0, 0.8); outline-offset: -1px;
-  }
 `;
 
-function renderAlignmentColumn(aligned: boolean) {
+function renderAlignmentColumn(aligned: boolean, showDebugOverlay: boolean) {
   return html`
     <div class="rli-align-col">
       ${ALIGNMENT_ROWS.map((row) =>
@@ -1681,12 +1777,14 @@ function renderAlignmentColumn(aligned: boolean) {
           advice: row.advice,
           hasLeadingIcon: row.hasLeadingIcon,
           hasValueIcon: row.hasValueIcon,
+          showDebugOverlay,
           options: {
             size: row.size ?? ReadoutListItemSize.small,
             hasDegree: row.hasDegree ?? false,
             fractionDigits: row.fractionDigits ?? 0,
             priority: row.priority,
             dataQuality: row.dataQuality,
+            alert: row.alert,
             hasLeadingIcon: row.hasLeadingIcon,
             value: {
               hasIcon: row.hasValueIcon,
@@ -1698,6 +1796,16 @@ function renderAlignmentColumn(aligned: boolean) {
               // independent of each row's own fractionDigits.
               ...(aligned ? {spaceReserver: VALUE_RESERVER} : {}),
             },
+            // Setpoint / advice carry their per-block data quality in both
+            // columns; the shared reserver is added only in the aligned column.
+            setpoint: {
+              dataQuality: row.setpointDataQuality,
+              ...(aligned ? {spaceReserver: VALUE_RESERVER} : {}),
+            },
+            advice: {
+              dataQuality: row.adviceDataQuality,
+              ...(aligned ? {spaceReserver: VALUE_RESERVER} : {}),
+            },
             ...(aligned
               ? {
                   // Non-degree rows reserve the degree column so their digits
@@ -1705,8 +1813,6 @@ function renderAlignmentColumn(aligned: boolean) {
                   hasDegreeSpacer: !(row.hasDegree ?? false),
                   maxDigits: MAX_INTEGER_DIGITS,
                   unit: {spaceReserver: LONGEST_UNIT},
-                  setpoint: {spaceReserver: VALUE_RESERVER},
-                  advice: {spaceReserver: VALUE_RESERVER},
                 }
               : {}),
           },
@@ -1716,8 +1822,18 @@ function renderAlignmentColumn(aligned: boolean) {
   `;
 }
 
-export const ColumnAlignment: Story = {
-  render: () => html`
+export const ColumnAlignment: StoryObj<
+  ReadoutListItemStoryArgs & {showDebugOverlay: boolean}
+> = {
+  args: {showDebugOverlay: true},
+  argTypes: {
+    showDebugOverlay: {
+      name: 'Show Debug Overlay',
+      control: {type: 'boolean'},
+      table: {category: 'Debug'},
+    },
+  },
+  render: (args) => html`
     <style>
       ${alignmentStyle}
     </style>
@@ -1726,13 +1842,13 @@ export const ColumnAlignment: Story = {
         <h3 class="rli-align-section-title">
           Without reservers — columns drift
         </h3>
-        ${renderAlignmentColumn(false)}
+        ${renderAlignmentColumn(false, args.showDebugOverlay)}
       </section>
       <section class="rli-align-section">
         <h3 class="rli-align-section-title">
           With shared reservers — unit column &amp; value right edge aligned
         </h3>
-        ${renderAlignmentColumn(true)}
+        ${renderAlignmentColumn(true, args.showDebugOverlay)}
       </section>
     </div>
   `,