@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.121 → 2.0.0-next.123

package/src/automation/automation-tank/automation-tank.css

@@ -77,6 +77,39 @@
   min-width: 0;
   min-height: 0;
 }
+
+/* Indefinite-axis fallback.
+ *
+ * `width`/`height: 100%` only resolve when the parent's corresponding axis is
+ * definite. In a flex/grid dashboard slot one axis is very often left to
+ * content — `align-self: center` makes the cross axis shrink-to-fit, and a
+ * parent sized with `min-height`/`max-height` (rather than `height`) leaves the
+ * block axis indefinite. In those cases the percentage computes to `auto` and
+ * the tank would size to its own content, which includes the chart cell — and
+ * the chart sizes itself from the cell it was measured in. That is a circular
+ * constraint, and it resolves as a collapsed cell, unbounded growth or
+ * pixel-level ringing depending on the loop gain (issue #1121).
+ *
+ * `aspect-ratio` supplies the missing axis from the design footprint the
+ * `point` variant uses above, so an indefinite axis lands on a definite value
+ * that no longer depends on the tank's own content. It is inert when the parent
+ * makes both axes definite, so the normal "fill my slot" behavior is unchanged.
+ */
+:host([positioning="button"]) {
+  aspect-ratio: 256 / 376;
+}
+:host([positioning="button"][orientation="horizontal"]) {
+  aspect-ratio: 420 / 256;
+}
+:host([positioning="button"][compact]),
+:host([positioning="button"][static]) {
+  aspect-ratio: 170 / 282;
+}
+:host([positioning="button"][orientation="horizontal"][compact]),
+:host([positioning="button"][orientation="horizontal"][static]) {
+  aspect-ratio: 244 / 208;
+}
+
 :host([positioning="button"]) .root {
   position: static;
   top: auto;
@@ -134,10 +167,30 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
+}
+
+/* Interactive (`clickable`, the default): the full six-state flat mixin —
+ * enabled, activated, hover, pressed, focus-visible, disabled — painted on
+ * `.halo`. */
+.root.clickable {
   cursor: pointer;
   /* prettier-ignore */
   @mixin style style=flat visibleWrapperClass=.halo;
 }
+
+/* Non-interactive (`clickable` is `false`, and `static`, which is display-only
+ * by definition): the mixin's `noClick` variant emits the enabled state ONLY, so
+ * the halo keeps exactly the same resting colors and the same 1px border box
+ * — no layout shift, nothing else in the tank changes — while hover, pressed
+ * and focus-visible disappear. The root is a `<div>` in this case, so there is
+ * no focus ring or tab stop to suppress either. Same split as
+ * `obc-elevated-card`'s `.not-clickable` / `:not(.not-clickable)` pair. */
+.root:not(.clickable) {
+  cursor: default;
+  /* prettier-ignore */
+  @mixin style style=flat noClick visibleWrapperClass=.halo;
+}
+
 .root:focus {
   outline: none;
 }
@@ -156,10 +209,12 @@
   top: auto;
 }
 
-/* Static is display-only: not focusable (rendered as <div>) and not
- * interactive — disable :hover/:active visuals from the flat-mixin rules. */
+/* Static is display-only, so it never gets the `.clickable` class and the
+ * hover/pressed visuals are already gone via the `noClick` rule above. Static
+ * additionally refuses pointer events outright — unlike a non-clickable tank,
+ * which still lets clicks reach the host so a consumer can opt into handling
+ * them. */
 :host([static]) .root {
-  cursor: default;
   pointer-events: none;
 }
 
@@ -510,9 +565,21 @@
   overflow: hidden;
 }
 
+/* The renderers are taken out of flow so the cell sizes them, never the other
+ * way round. Both of them derive a pixel size from the box they are measured
+ * in — `obc-gauge-trend` publishes an inline `--chart-height` computed from its
+ * own measured width, and `obc-bar-vertical` writes `height: 100%; width: auto`
+ * onto its own host — so while they are in flow the cell's content height is a
+ * function of the cell's own height. Absolute positioning severs that return
+ * path: `.bar-container` is `position: relative`, so `inset: 0` pins the
+ * renderer to the cell the tank's grid/flex layout already decided on, and a
+ * rounding difference between the two can no longer relayout the tank
+ * (issue #1121). */
 .bar-container > obc-gauge-trend,
 .bar-container > obc-bar-vertical {
   display: block;
+  position: absolute;
+  inset: 0;
   width: 100%;
   height: 100%;
 }

package/src/automation/automation-tank/automation-tank.stories.ts

@@ -99,6 +99,7 @@ const renderTankEl = (args: StoryArgs, richReadout: unknown = nothing) => html`
     .compact=${args.compact}
     .static=${args.static}
     ?activated=${args.activated}
+    .clickable=${args.clickable}
     .positioning=${args.positioning}
     .chartMode=${args.chartMode}
     .chartData=${args.chartData}
@@ -142,6 +143,7 @@ const meta: Meta<StoryArgs> = {
     compact: false,
     static: false,
     activated: false,
+    clickable: true,
     positioning: TankPositioning.point,
     chartMode: TankChartMode.bar,
     chartData: SAMPLE_DATA,
@@ -200,7 +202,12 @@ const meta: Meta<StoryArgs> = {
     activated: {
       control: {type: 'boolean'},
       description:
-        'Enables the activated background color, used to indicate that the tank is activated/selected.',
+        'Enables the activated background color, used to indicate that the tank is activated/selected. Requires `clickable` — a non-clickable tank only paints the resting enabled state.',
+    },
+    clickable: {
+      control: {type: 'boolean'},
+      description:
+        'Whether the tank is interactive. Default `true`. Set to `false` for a display-only tank that still shows live data: the resting appearance, chart, badges, readout, tag and alert frame are unchanged, but hover / pressed / focus states are removed and the tank leaves the tab order. Unlike `static`, the chart keeps rendering.',
     },
     hasAdvice: {
       control: {type: 'boolean'},
@@ -330,6 +337,32 @@ export const CompactActivated: Story = {
   },
 };
 
+/**
+ * Display-only tank — `.clickable=${false}`. `clickable` is property-only
+ * (`attribute: false`), so it has to be set as a property; a
+ * `clickable="false"` attribute in plain HTML is not observed. The root
+ * renders as a `<div>`
+ * instead of a `<button>`, so there is no hover, pressed or focus-visible
+ * state and the tank is out of the tab order. Everything else is untouched:
+ * the resting surface keeps the same colors and the same 1px border box (the
+ * flat mixin's `noClick` variant paints the enabled state only), and the
+ * chart, badges, readout and tag all render exactly as on a clickable tank.
+ *
+ * Use this for a tank that aggregates the ones beside it — a row total that
+ * still shows live data but has nothing to open. Contrast with `static`,
+ * which represents "device present, current state unknown": that one also
+ * hides the chart, swaps the percent for capacity, and shrinks to the compact
+ * footprint.
+ */
+export const NotClickable: Story = {
+  args: {
+    type: TankType.atmospheric,
+    chartMode: TankChartMode.graphAndBar,
+    tag: 'TOTAL',
+    clickable: false,
+  },
+};
+
 export const CompactAtmospheric: Story = {
   args: {compact: true, type: TankType.atmospheric},
 };
@@ -523,6 +556,7 @@ export const WithFractionDigits: Story = {
       .orientation=${args.orientation}
       .compact=${args.compact}
       .static=${args.static}
+      .clickable=${args.clickable}
       .positioning=${args.positioning}
       .chartMode=${args.chartMode}
       .chartData=${args.chartData}
@@ -562,6 +596,7 @@ export const WithAlertAlarm: Story = {
       .orientation=${args.orientation}
       .compact=${args.compact}
       .static=${args.static}
+      .clickable=${args.clickable}
       .positioning=${args.positioning}
       .chartMode=${args.chartMode}
       .chartData=${args.chartData}
@@ -583,6 +618,24 @@ export const WithAlertAlarm: Story = {
   `,
 };
 
+/**
+ * A non-clickable tank still raises its alert frame — `clickable` governs the
+ * interaction surface only, not what the tank is allowed to display. The chart
+ * keeps rendering too, which is the difference from `static`.
+ */
+export const NotClickableWithAlert: Story = {
+  ...WithAlertAlarm,
+  args: {
+    type: TankType.atmospheric,
+    chartMode: TankChartMode.graphAndBar,
+    tag: 'TOTAL',
+    clickable: false,
+    alert: true,
+    alertFrameStatus: ObcAlertFrameStatus.Warning,
+    alertFrameType: ObcAlertFrameType.SmallSideFlip,
+  },
+};
+
 /**
  * Warning-status alert on a horizontal atmospheric tank — demonstrates the
  * ring tracks the tank's host orientation correctly.
@@ -650,6 +703,91 @@ export const WithAlertLevelDiagnostic: Story = {
  * story, which gives the host fixed default dimensions and a P&ID
  * top-center anchor for placement on a pipe-grid coordinate.
  */
+/**
+ * A dashboard row of tanks in a flex container — the layout family that
+ * `positioning="button"` exists for, and the one that regressed in issue #1121.
+ *
+ * Each cell is a flex item sized with `min-height` / `max-height` rather than
+ * `height`, and the tank inside it is centered on the cross axis. Both of those
+ * leave an axis indefinite, so the tank cannot take its size from the parent
+ * alone; it falls back to the design aspect ratio instead of sizing to its own
+ * content. Sizing to content would be circular — the chart derives its pixel
+ * size from the cell it was measured in — and used to surface as tanks that
+ * collapsed, grew without bound, or oscillated by a few pixels forever.
+ *
+ * Pin both axes on the parent whenever the exact footprint matters; the
+ * fallback keeps the layout stable, it does not guess the size you wanted.
+ */
+export const DashboardRow: Story = {
+  args: {
+    type: TankType.generic,
+    chartMode: TankChartMode.graphAndBar,
+    positioning: TankPositioning.button,
+    showTrendSymbol: false,
+    percentFractionDigits: 1,
+  },
+  decorators: [],
+  render(args) {
+    const tanks = [
+      {tag: 'FO TOT', value: 61.4, max: 76.21},
+      {tag: 'FO SERV SB', value: 0.82, max: 1.06},
+      {tag: 'FO SERV PS', value: 0.41, max: 1.06},
+      {tag: 'OVERFLOW', value: 2.3, max: 17.4},
+      {tag: 'AFT SB FO', value: 14.9, max: 17.4},
+      {tag: 'UREA', value: 3.9, max: 5.5},
+    ];
+    // Each tank has its own capacity, so the series has to be built on that
+    // tank's scale — a shared fixture would render off-axis.
+    const series = (value: number, max: number, seed: number) =>
+      Array.from({length: 16}, (_, i) => ({
+        label: String(i).padStart(2, '0'),
+        value: Math.min(
+          max,
+          Math.max(0, value * (0.55 + 0.03 * ((i + seed) % 15)))
+        ),
+      }));
+    // `position: static` opts out of the shared `crossDecorator`'s
+    // `position: absolute; top: 50%; left: 50%`, which would push a full-width
+    // row into the bottom-right quadrant.
+    return html`
+      <div
+        style="position: static; display: flex; align-items: stretch; gap: 8px;"
+      >
+        ${tanks.map(
+          (tank, index) => html`
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                flex: 1 1 auto;
+                min-width: 0;
+                min-height: 340px;
+                max-height: 340px;
+                border: 1px solid var(--border-divider-color);
+              "
+            >
+              <obc-automation-tank
+                style="align-self: center; flex: 1 1 auto; min-width: 0;"
+                .value=${tank.value}
+                .max=${tank.max}
+                .tag=${tank.tag}
+                .type=${args.type}
+                .positioning=${args.positioning}
+                .chartMode=${args.chartMode}
+                .chartData=${series(tank.value, tank.max, index)}
+                .showTrendSymbol=${args.showTrendSymbol}
+                .percentFractionDigits=${args.percentFractionDigits}
+                .priority=${args.priority}
+              ></obc-automation-tank>
+            </div>
+          `
+        )}
+      </div>
+    `;
+  },
+};
+
 export const Responsive: Story = {
   args: {
     type: TankType.atmospheric,
@@ -684,6 +822,7 @@ export const Responsive: Story = {
           .orientation=${args.orientation}
           .compact=${args.compact}
           .static=${args.static}
+          .clickable=${args.clickable}
           .positioning=${args.positioning}
           .chartMode=${args.chartMode}
           .chartData=${args.chartData}

package/src/automation/automation-tank/automation-tank.ts

@@ -82,6 +82,22 @@ export enum TankOrientation {
  *   slot — the parent controls the footprint and the tank renders
  *   responsively inside it, just like a regular button. Compact / static
  *   inner layout still applies; only the host box is changed.
+ *
+ *   If the parent leaves *one* axis indefinite — a flex/grid slot sized with
+ *   `min-height`/`max-height` rather than `height`, or a cross axis freed by
+ *   `align-self: center` — the corresponding `100%` computes to `auto` and the
+ *   tank derives that axis from the other one through the design aspect ratio
+ *   of the matching `point` footprint (256×376 vertical, 420×256 horizontal,
+ *   170×282 compact/static, 244×208 horizontal compact/static). The size then
+ *   does not depend on the chart cell, which takes its own size from the cell
+ *   it was measured in and would otherwise make the constraint circular
+ *   (issue #1121).
+ *
+ *   If *both* axes are indefinite (a shrink-to-fit parent, e.g. an unsized
+ *   `inline-block`) there is no axis left to derive from, so the host falls
+ *   back to its text content. That is stable and non-circular, but much
+ *   smaller than the design footprint — give the parent a definite size on at
+ *   least one axis, and on both whenever the exact footprint matters.
  */
 export enum TankPositioning {
   point = 'point',
@@ -122,7 +138,7 @@ export enum TankChartMode {
  * @slot alert-icon - Custom icon for the alert frame.
  * @slot alert-label - Label for the alert frame.
  * @slot alert-timer - Timer for the alert frame.
- * @fires click - Fired when the tank is clicked. In `static` mode the tank renders a `<div role="img">` instead of a `<button>`, so it is not focusable or keyboard-activatable; pointer clicks still reach the host.
+ * @fires click - Fired when the tank is clicked. When `clickable` is `false` the tank renders a plain `<div>`, and in `static` mode a `<div role="img">`, instead of a `<button>` — in both cases it is not focusable or keyboard-activatable; pointer clicks still reach the host.
  * @beta
  */
 @customElement('obc-automation-tank')
@@ -137,9 +153,10 @@ export class ObcAutomationTank extends SetpointMixin(LitElement) {
   @property({type: Boolean, reflect: true}) compact: boolean = false;
   /**
    * Host positioning model — see `TankPositioning` for details. Defaults to
-   * `button` (host fills parent container, 100% × 100%, no anchor offset).
-   * Set to `point` for the legacy P&ID canvas mode (fixed default dimensions
-   * + top-center anchor offset).
+   * `button` (host fills parent container, 100% × 100%, falling back to the
+   * design aspect ratio on any axis the parent leaves indefinite, no anchor
+   * offset). Set to `point` for the legacy P&ID canvas mode (fixed default
+   * dimensions + top-center anchor offset).
    */
   @property({type: String, reflect: true}) positioning: TankPositioning =
     TankPositioning.button;
@@ -156,7 +173,38 @@ export class ObcAutomationTank extends SetpointMixin(LitElement) {
    * activatable controls.
    */
   @property({type: Boolean, reflect: true}) static: boolean = false;
-  /** Enables the activated background color, used to indicate that the tank is activated/selected. */
+  /**
+   * Whether the tank is interactive. `true` (default) renders the root as a
+   * `<button>` with the full flat-mixin interaction surface. `false` renders a
+   * non-interactive `<div>` — the resting appearance is unchanged (same
+   * enabled-state colors and the same 1px border box, via the mixin's
+   * `noClick` variant), but the hover / pressed / focus-visible states are
+   * gone and the tank leaves the tab order.
+   *
+   * Everything else keeps rendering: the chart / bar, badges, readout, tag and
+   * the `alert` frame all behave exactly as they do on a clickable tank. Use
+   * this for a display-only tank that still shows live data — e.g. a row total
+   * aggregating the tanks beside it. For "device present, current state
+   * unknown" use `static` instead, which also hides the chart and shrinks to
+   * the compact footprint.
+   *
+   * `static` is already non-interactive, so this has no effect there.
+   *
+   * Property-only (`attribute: false`, per the repo's positive-default-true
+   * boolean convention — a `true` default cannot round-trip through an HTML
+   * boolean attribute). Set it as a property: `el.clickable = false`,
+   * `.clickable=${false}` in a Lit template, or the equivalent binding in the
+   * React / Vue / Angular / Svelte wrappers. A `clickable="false"` attribute in
+   * plain HTML is **not** observed and leaves the tank interactive.
+   */
+  @property({type: Boolean, attribute: false}) clickable: boolean = true;
+  /**
+   * Enables the activated background color, used to indicate that the tank is
+   * activated/selected. Requires an interactive tank — the `noClick` mixin
+   * variant used when `clickable` is `false` only paints the enabled state, so
+   * a non-clickable tank ignores this (matching `obc-elevated-card`).
+   * @availableWhen clickable==true
+   */
   @property({type: Boolean}) activated: boolean = false;
   @property({type: String}) tag: string = '';
 
@@ -1001,7 +1049,18 @@ export class ObcAutomationTank extends SetpointMixin(LitElement) {
     // The `activated` class goes on the interactive `.root` so the shared
     // `flat` style mixin paints the activated background/border on `.halo`
     // (its `visibleWrapperClass`), same as the mixin's hover/pressed states.
-    const rootClasses = classMap({root: true, activated: this.activated});
+    //
+    // `.clickable` selects between the two flat-mixin variants in CSS: the
+    // full six-state one, or the `noClick` one that paints only the resting
+    // enabled state. `static` is already display-only, so it never counts as
+    // clickable. Same shape as `obc-elevated-card`'s `.not-clickable` split
+    // and `obc-readout-list-item`'s `.root.clickable`.
+    const isClickable = this.clickable && !this.static;
+    const rootClasses = classMap({
+      root: true,
+      activated: this.activated,
+      clickable: isClickable,
+    });
 
     // `aria-live="polite"` + `aria-atomic="true"` on the root so the
     // slotted alert label (and any state change of the alert frame) is
@@ -1010,27 +1069,47 @@ export class ObcAutomationTank extends SetpointMixin(LitElement) {
     // TODO(a11y): the rest of the automation component family still lacks
     // this live-region announcement; consolidate when alert support is
     // factored into a shared mixin.
-    return html`
-      ${this.static
-        ? html`<div
-            class=${rootClasses}
-            role="img"
-            aria-label=${this.tag || 'Tank'}
-            aria-live="polite"
-            aria-atomic="true"
-          >
-            ${halo}
-          </div>`
-        : html`<button
-            class=${rootClasses}
-            type="button"
-            aria-label=${this.tag || 'Tank'}
-            aria-live="polite"
-            aria-atomic="true"
-          >
-            ${halo}
-          </button>`}
-    `;
+    // Three root shapes:
+    //   - static:            <div role="img"> — an opaque graphic standing in
+    //     for a device whose state is unknown, named by its tag.
+    //   - clickable false:  a plain <div>. Deliberately no `role="img"` and no
+    //     `aria-label` here: unlike a static tank this one still shows live
+    //     data, and both would collapse the readout into a single opaque name
+    //     and hide the percent / value / tag from screen readers. The visible
+    //     content is the accessible content. (Same reasoning as the non-
+    //     clickable branch of `obc-readout-list-item`.)
+    //   - default:           <button>.
+    // The live region stays on all three so an `alert` label is announced
+    // regardless of interactivity.
+    if (this.static) {
+      return html`<div
+        class=${rootClasses}
+        role="img"
+        aria-label=${this.tag || 'Tank'}
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        ${halo}
+      </div>`;
+    }
+    if (!isClickable) {
+      return html`<div
+        class=${rootClasses}
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        ${halo}
+      </div>`;
+    }
+    return html`<button
+      class=${rootClasses}
+      type="button"
+      aria-label=${this.tag || 'Tank'}
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      ${halo}
+    </button>`;
   }
 
   static override styles = unsafeCSS(compentStyle);

package/src/building-blocks/readout-block/readout-block.stories.ts

@@ -481,6 +481,19 @@ const UNAVAILABLE_CASES: {
     label: 'null · no fraction digits',
     args: {value: null, maxDigits: 3},
   },
+  // The knobs, not the value: a `fractionDigits` written by a failed runtime
+  // (`NaN`) must not silently format with zero decimals — a critical 0.4
+  // printed as a plausible-looking "0" reads as healthy. The reading dashes
+  // instead. A missing `maxDigits` dashes too, for consistency; with the
+  // precision still known, the placeholder keeps its fraction shape.
+  {
+    label: 'value 0.4 · fractionDigits NaN — precision failed to arrive',
+    args: {value: 0.4, maxDigits: 3, fractionDigits: Number.NaN},
+  },
+  {
+    label: 'value 0.4 · maxDigits NaN — same, for consistency',
+    args: {value: 0.4, maxDigits: Number.NaN, fractionDigits: 1},
+  },
 ];
 
 // Stacked in one column under identical settings so the decimal points and the
@@ -509,6 +522,13 @@ const ALIGNMENT_CASES: Partial<BlockArgs>[] = [
  *    runtime data condition (sensor dropout, `0/0`, a bad parse) rather than a
  *    programmer error, so they resolve to the dash rather than throwing.
  *
+ * 4. **A digit knob that never arrived dashes the reading too.** `NaN`,
+ *    `null` or `undefined` in `fractionDigits` / `maxDigits` is a runtime
+ *    failure of the writing system, and formatting with a default the author
+ *    never chose would let a critical `0.4` pass for a healthy `0`. Finite
+ *    out-of-range values are different: `fractionDigits` throws (programmer
+ *    error), `maxDigits` clamps (width-only).
+ *
  * Hinted zeros are suppressed for an unavailable value, so the two "not
  * available" rows are identical and nothing reads `----Na.N`.
  *

package/src/building-blocks/readout-block/readout-block.ts

@@ -15,6 +15,9 @@ import {
   formatNumericValue,
   readoutFormattedInteger,
   assertReadoutValueType,
+  assertReadoutFractionDigits,
+  isReadoutDigitCountMissing,
+  resolveReadoutDigitCount,
   resolveReadoutNumericValue,
   resolveReadoutTextValue,
   READOUT_UNAVAILABLE_DASH,
@@ -152,13 +155,23 @@ export class ObcReadoutBlock extends LitElement {
   @property({type: Boolean}) hasIcon = false;
 
   /**
-   * Number of fraction digits.
+   * Number of fraction digits. Must be between 0 and 100 — the range
+   * `Number.prototype.toFixed` accepts; outside it throws a `RangeError`.
+   * A fractional count truncates (`2.7` → `2`). A count that never arrived
+   * (`NaN`, `null` or unset) renders the reading as the unavailable dash —
+   * formatting with a precision the author never chose would let a critical
+   * `0.4` pass for a healthy `0`.
    * @availableWhen valueType==number
    */
   @property({type: Number}) fractionDigits = 0;
 
   /**
    * Integer digits to reserve / hint (independent of `fractionDigits`).
+   * Bounded before use: a fractional count
+   * truncates (`2.7` → `2`), anything above 100 — including `Infinity` —
+   * caps at 100, and a negative count reserves nothing. A count that never
+   * arrived (`NaN`, `null` or unset) renders the reading as the unavailable
+   * dash, consistent with `fractionDigits`.
    * @availableWhen valueType==number
    */
   @property({type: Number}) maxDigits = 0;
@@ -214,24 +227,54 @@ export class ObcReadoutBlock extends LitElement {
     }
   }
 
+  /**
+   * `maxDigits` bounded to a usable count. Every width calculation below goes
+   * through this rather than the raw property, so an `Infinity` (or absurdly
+   * large) value cannot reach `String.prototype.repeat`.
+   */
+  private get resolvedMaxDigits(): number {
+    return resolveReadoutDigitCount(this.maxDigits);
+  }
+
+  /**
+   * Whether a digit knob failed to arrive (`NaN` / `null` / `undefined`).
+   * The reading then renders as the unavailable dash rather than silently
+   * formatting with a default the author never chose — a critical `0.4`
+   * formatted with a failed `fractionDigits` would otherwise print as a
+   * plausible-looking `0`. A missing `maxDigits` dashes too, for consistency:
+   * either knob arriving broken means the row's configuration cannot be
+   * trusted.
+   */
+  private get digitCountsMissing(): boolean {
+    return (
+      isReadoutDigitCountMissing(this.fractionDigits) ||
+      isReadoutDigitCountMissing(this.maxDigits)
+    );
+  }
+
   private get numericFormatOptions(): ReadoutNumericFormatOptions {
     return {
       // The unavailable placeholder stays short (`\u2012.\u2012\u2012`) rather than
       // spelling out every reserved digit position — `maxDigits` already
       // reserves the width, so it simply sits at the right edge of it.
       showZeroPadding: false,
-      minValueLength: this.maxDigits,
-      fractionDigits: this.fractionDigits,
+      minValueLength: this.resolvedMaxDigits,
+      // A missing precision shapes the placeholder as zero fraction digits (a
+      // single dash) — and keeps a runtime `undefined`/`null` out of the
+      // options object, which is typed `number` throughout the formatters.
+      fractionDigits: isReadoutDigitCountMissing(this.fractionDigits)
+        ? 0
+        : this.fractionDigits,
     };
   }
 
   /** Widest possible value string for width reservation (e.g. `"000.0"`). */
   private get reserverText(): string {
-    const maxDigits = this.maxDigits;
+    const maxDigits = this.resolvedMaxDigits;
     if (maxDigits <= 0) {
       return '';
     }
-    const integer = '0'.repeat(Math.max(maxDigits, 1));
+    const integer = '0'.repeat(maxDigits);
     return this.fractionDigits > 0
       ? `${integer}.${'0'.repeat(this.fractionDigits)}`
       : integer;
@@ -322,16 +365,19 @@ export class ObcReadoutBlock extends LitElement {
     // `changed`, skip the check, and render the invalid value as a plain dash:
     // exactly the silent failure this assertion exists to prevent.
     assertReadoutValueType('obc-readout-block', this.value, this.valueType);
+    assertReadoutFractionDigits('obc-readout-block', this.fractionDigits);
   }
 
   override render() {
     const valueSize = this.resolvedValueSize;
     const formatOptions = this.numericFormatOptions;
     const isTextMode = this.valueType === ReadoutValueType.text;
-    const valueForFormat = resolveReadoutNumericValue(
-      this.value,
-      this.valueType
-    );
+    // A missing digit knob makes the reading untrustworthy, so it resolves to
+    // "no reading" and renders the dash (see `digitCountsMissing`). Text mode
+    // is unaffected — it ignores the numeric knobs entirely.
+    const valueForFormat = this.digitCountsMissing
+      ? undefined
+      : resolveReadoutNumericValue(this.value, this.valueType);
     const textValue = resolveReadoutTextValue(this.value, this.valueType);
     // Text mode renders verbatim and ignores the numeric format options; a
     // blank / missing text value still falls back to the unavailable dash.
@@ -351,7 +397,7 @@ export class ObcReadoutBlock extends LitElement {
       valueForFormat === undefined ||
       valueForFormat < 0
         ? 0
-        : Math.max(this.maxDigits - readoutFormattedInteger(text), 0);
+        : Math.max(this.resolvedMaxDigits - readoutFormattedInteger(text), 0);
     const hinted = hintCount > 0 ? '0'.repeat(hintCount) : '';
     // Hinted zeros own the width — they already fill to `maxDigits` — so when
     // `hintedZeros` is enabled an explicit `spaceReserver` is ignored (it has

package/src/navigation-instruments/compass-sector/compass-sector.css

@@ -27,4 +27,14 @@
   display: block;
   width: 100%;
   height: 100%;
+  /* Clips the rotated overlay <svg transform="rotate(...)">, whose corners
+     swing outside the host and leak arc pixels in wide layouts (same
+     protection obc-watch has had since #994). Known trade-off: the HDG/COG
+     arrow apexes previously painted 1-2px past the host's top edge and are
+     now shaved flat at the box edge — imperceptible at normal viewing.
+     TODO(designer): if the shave is unwanted, the frame needs headroom so
+     the arrow tips fit inside the box — see "Host clipping & the arrow-apex
+     shave" in docs/agents/watch-radial-instruments.md before changing
+     (interacts with the #1021/#1049 label-reserve geometry). */
+  overflow: hidden;
 }