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

package/bundle/openbridge-webcomponents.bundle.js

@@ -19087,6 +19087,42 @@ const compentStyle$19 = i$7`* {
   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;
@@ -19147,19 +19183,26 @@ const compentStyle$19 = i$7`* {
   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 */
 }
 
-.root {
+.root.clickable {
   cursor: pointer;
 }
 
-.root:focus {
+.root.clickable:focus {
   outline: none;
 }
 
-.root .halo {
+.root.clickable .halo {
   border-color: var(--flat-enabled-border-color);
   background-color: var(--flat-enabled-background-color);
   border-width: 1px;
@@ -19169,7 +19212,7 @@ const compentStyle$19 = i$7`* {
   --base-background-color: var(--flat-enabled-background-color);
 }
 
-.root.activated .halo {
+.root.clickable.activated .halo {
   border-color: var(--flat-activated-border-color);
   background-color: var(--flat-activated-background-color);
   --base-border-color: var(--flat-activated-border-color);
@@ -19178,18 +19221,18 @@ const compentStyle$19 = i$7`* {
 
 @media (hover:hover) {
 
-.root:hover .halo {
+.root.clickable:hover .halo {
     border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
     background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
   }
 }
 
-.root:active .halo {
+.root.clickable:active .halo {
   border-color: var(--flat-pressed-border-color);
   background-color: var(--flat-pressed-background-color);
 }
 
-.root:focus-visible .halo {
+.root.clickable:focus-visible .halo {
   outline-color: var(--border-focus-color);
   outline-width: var(--global-size-spacing-border-weight-focusframe);
   outline-style: solid;
@@ -19197,28 +19240,50 @@ const compentStyle$19 = i$7`* {
   z-index: 1;
 }
 
-.root:disabled .halo {
+.root.clickable:disabled .halo {
   border-color: var(--flat-disabled-border-color);
   background-color: var(--flat-disabled-background-color);
   cursor: not-allowed;
   color: var(--on-flat-disabled-color) !important;
 }
 
-.root.disabled .halo {
+.root.clickable.disabled .halo {
   border-color: var(--flat-disabled-border-color);
   background-color: var(--flat-disabled-background-color);
   cursor: not-allowed;
   color: var(--on-flat-disabled-color) !important;
 }
 
-.root:disabled {
+.root.clickable:disabled {
   cursor: not-allowed;
 }
 
-.root.disabled {
+.root.clickable.disabled {
   cursor: not-allowed;
 }
 
+/* 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 */
+}
+
+.root:not(.clickable) .halo {
+  border-color: var(--flat-enabled-border-color);
+  background-color: var(--flat-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  --base-border-color: var(--flat-enabled-border-color);
+  --base-background-color: var(--flat-enabled-background-color);
+}
+
 .root:focus {
   outline: none;
 }
@@ -19238,11 +19303,13 @@ const compentStyle$19 = i$7`* {
   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;
 }
 
@@ -19690,9 +19757,22 @@ const compentStyle$19 = i$7`* {
   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%;
 }
@@ -37653,6 +37733,7 @@ let ObcAutomationTank = class extends SetpointMixin(i$4) {
     this.compact = false;
     this.positioning = "button";
     this.static = false;
+    this.clickable = true;
     this.activated = false;
     this.tag = "";
     this.chartMode = "bar";
@@ -38188,26 +38269,41 @@ let ObcAutomationTank = class extends SetpointMixin(i$4) {
     const halo = b`
       <div class="halo">${haloContents}${alertFrameOverlay}</div>
     `;
-    const rootClasses = e$1({ root: true, activated: this.activated });
-    return b`
-      ${this.static ? b`<div
-            class=${rootClasses}
-            role="img"
-            aria-label=${this.tag || "Tank"}
-            aria-live="polite"
-            aria-atomic="true"
-          >
-            ${halo}
-          </div>` : b`<button
-            class=${rootClasses}
-            type="button"
-            aria-label=${this.tag || "Tank"}
-            aria-live="polite"
-            aria-atomic="true"
-          >
-            ${halo}
-          </button>`}
-    `;
+    const isClickable = this.clickable && !this.static;
+    const rootClasses = e$1({
+      root: true,
+      activated: this.activated,
+      clickable: isClickable
+    });
+    if (this.static) {
+      return b`<div
+        class=${rootClasses}
+        role="img"
+        aria-label=${this.tag || "Tank"}
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        ${halo}
+      </div>`;
+    }
+    if (!isClickable) {
+      return b`<div
+        class=${rootClasses}
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        ${halo}
+      </div>`;
+    }
+    return b`<button
+      class=${rootClasses}
+      type="button"
+      aria-label=${this.tag || "Tank"}
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      ${halo}
+    </button>`;
   }
 };
 ObcAutomationTank.styles = r$7(compentStyle$19);
@@ -38238,6 +38334,9 @@ __decorateClass$zk([
 __decorateClass$zk([
   n$3({ type: Boolean, reflect: true })
 ], ObcAutomationTank.prototype, "static", 2);
+__decorateClass$zk([
+  n$3({ type: Boolean, attribute: false })
+], ObcAutomationTank.prototype, "clickable", 2);
 __decorateClass$zk([
   n$3({ type: Boolean })
 ], ObcAutomationTank.prototype, "activated", 2);
@@ -52500,6 +52599,10 @@ const compentStyle$15 = i$7`* {
   overflow: hidden;
 }
 
+svg {
+  display: block;
+}
+
 .label {
   font-family: var(--global-typography-font-family);
   font-weight: var(--global-typography-ui-body-font-weight);
@@ -57317,6 +57420,34 @@ const READOUT_VALUE_TYPES = Object.values(ReadoutValueType);
 function isReadoutValueType(value) {
   return typeof value === "string" && READOUT_VALUE_TYPES.includes(value);
 }
+const READOUT_MAX_DIGITS = 100;
+function effectiveFractionDigits(fractionDigits) {
+  if (fractionDigits === null || fractionDigits === void 0) {
+    return 0;
+  }
+  return Number.isNaN(fractionDigits) ? 0 : Math.trunc(fractionDigits);
+}
+function assertReadoutFractionDigits(tagName, fractionDigits) {
+  const digits = effectiveFractionDigits(fractionDigits);
+  if (Number.isFinite(digits) && digits >= 0 && digits <= READOUT_MAX_DIGITS) {
+    return;
+  }
+  throw new RangeError(
+    // `String`, not `JSON.stringify`: the latter serialises `Infinity` and
+    // `NaN` to `null`, hiding the very value being rejected.
+    `<${tagName}>: fractionDigits must be between 0 and ${READOUT_MAX_DIGITS} (got ${String(fractionDigits)}).`
+  );
+}
+function resolveReadoutDigitCount(count) {
+  const digits = Math.trunc(count ?? 0);
+  if (Number.isNaN(digits) || digits <= 0) {
+    return 0;
+  }
+  return Math.min(digits, READOUT_MAX_DIGITS);
+}
+function isReadoutDigitCountMissing(count) {
+  return count === null || count === void 0 || Number.isNaN(count);
+}
 function isBlank(value) {
   return value.trim() === "";
 }
@@ -57361,9 +57492,10 @@ const READOUT_UNAVAILABLE_DASH = "‒";
 function dashedGenerator({
   showZeroPadding,
   minValueLength,
-  fractionDigits
+  fractionDigits: rawFractionDigits
 }) {
   const visibleDigits = showZeroPadding ? Math.max(minValueLength, 1) : 1;
+  const fractionDigits = Number.isNaN(rawFractionDigits) ? 0 : rawFractionDigits;
   if (fractionDigits < 1) {
     return READOUT_UNAVAILABLE_DASH.repeat(visibleDigits);
   }
@@ -57371,7 +57503,7 @@ function dashedGenerator({
   return READOUT_UNAVAILABLE_DASH.repeat(Math.max(integerDigits, 1)) + "." + READOUT_UNAVAILABLE_DASH.repeat(fractionDigits);
 }
 function formatNumericValue(value, options) {
-  if (value === void 0 || !Number.isFinite(value)) {
+  if (value === void 0 || !Number.isFinite(value) || Number.isNaN(options.fractionDigits)) {
     return dashedGenerator(options);
   }
   return value.toFixed(options.fractionDigits);
@@ -57456,23 +57588,46 @@ let ObcReadoutBlock = class extends i$4 {
         return ObcTextboxSize.s;
     }
   }
+  /**
+   * `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`.
+   */
+  get resolvedMaxDigits() {
+    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.
+   */
+  get digitCountsMissing() {
+    return isReadoutDigitCountMissing(this.fractionDigits) || isReadoutDigitCountMissing(this.maxDigits);
+  }
   get numericFormatOptions() {
     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"`). */
   get reserverText() {
-    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;
   }
   /**
@@ -57536,18 +57691,16 @@ let ObcReadoutBlock = class extends i$4 {
   willUpdate(changed) {
     super.willUpdate(changed);
     assertReadoutValueType("obc-readout-block", this.value, this.valueType);
+    assertReadoutFractionDigits("obc-readout-block", this.fractionDigits);
   }
   render() {
     const valueSize = this.resolvedValueSize;
     const formatOptions = this.numericFormatOptions;
     const isTextMode = this.valueType === ReadoutValueType.text;
-    const valueForFormat = resolveReadoutNumericValue(
-      this.value,
-      this.valueType
-    );
+    const valueForFormat = this.digitCountsMissing ? void 0 : resolveReadoutNumericValue(this.value, this.valueType);
     const textValue = resolveReadoutTextValue(this.value, this.valueType);
     const text = this.off ? this.offText : isTextMode ? textValue ?? READOUT_UNAVAILABLE_DASH : formatNumericValue(valueForFormat, formatOptions);
-    const hintCount = this.off || isTextMode || !this.hintedZeros || valueForFormat === void 0 || valueForFormat < 0 ? 0 : Math.max(this.maxDigits - readoutFormattedInteger(text), 0);
+    const hintCount = this.off || isTextMode || !this.hintedZeros || valueForFormat === void 0 || valueForFormat < 0 ? 0 : Math.max(this.resolvedMaxDigits - readoutFormattedInteger(text), 0);
     const hinted = hintCount > 0 ? "0".repeat(hintCount) : "";
     const reserver = isTextMode ? this.spaceReserver ?? "" : this.hintedZeros ? this.reserverText : this.widerReserver(this.spaceReserver, this.reserverText);
     const block = b`
@@ -59167,7 +59320,17 @@ let ObcReadoutListItem = class extends i$4 {
     return this.fractionDigits ?? 0;
   }
   get resolvedMaxDigits() {
-    return this.maxDigits ?? 0;
+    return resolveReadoutDigitCount(this.maxDigits);
+  }
+  /**
+   * Whether a digit knob failed to arrive (`NaN` / `null` / `undefined`).
+   * The raw knobs are forwarded to the blocks, which render the reading as
+   * the unavailable dash (see `obc-readout-block.digitCountsMissing`); this
+   * getter only keeps the setpoint comparison in agreement with what is
+   * displayed.
+   */
+  get digitCountsMissing() {
+    return isReadoutDigitCountMissing(this.fractionDigits) || isReadoutDigitCountMissing(this.maxDigits);
   }
   get resolvedClickable() {
     const clickable = this.clickable;
@@ -59189,6 +59352,9 @@ let ObcReadoutListItem = class extends i$4 {
     if (!this.hasSetpoint) {
       return false;
     }
+    if (this.digitCountsMissing) {
+      return false;
+    }
     return isDisplayedAtSetpoint(
       resolveReadoutNumericValue(this.value, this.valueType) ?? null,
       this.setpoint,
@@ -59290,8 +59456,8 @@ let ObcReadoutListItem = class extends i$4 {
         .weight=${config.weight}
         .hasDegree=${config.hasDegree ?? false}
         .hasIcon=${config.hasIcon ?? false}
-        .fractionDigits=${this.resolvedFractionDigits}
-        .maxDigits=${this.resolvedMaxDigits}
+        .fractionDigits=${this.fractionDigits}
+        .maxDigits=${this.maxDigits}
         .hintedZeros=${config.hintedZeros}
         .spaceReserver=${config.spaceReserver}
         .off=${config.off ?? false}
@@ -59588,6 +59754,7 @@ let ObcReadoutListItem = class extends i$4 {
   willUpdate(changed) {
     super.willUpdate(changed);
     assertReadoutValueType("obc-readout-list-item", this.value, this.valueType);
+    assertReadoutFractionDigits("obc-readout-list-item", this.fractionDigits);
   }
   updated(changed) {
     super.updated(changed);
@@ -64375,7 +64542,17 @@ let ObcReadout = class extends i$4 {
     return this.fractionDigits ?? 0;
   }
   get resolvedMaxDigits() {
-    return this.maxDigits ?? 0;
+    return resolveReadoutDigitCount(this.maxDigits);
+  }
+  /**
+   * Whether a digit knob failed to arrive (`NaN` / `null` / `undefined`).
+   * The raw knobs are forwarded to the blocks, which render the reading as
+   * the unavailable dash (see `obc-readout-block.digitCountsMissing`); this
+   * getter only keeps the setpoint comparison in agreement with what is
+   * displayed.
+   */
+  get digitCountsMissing() {
+    return isReadoutDigitCountMissing(this.fractionDigits) || isReadoutDigitCountMissing(this.maxDigits);
   }
   get hasSrc() {
     return this.src !== void 0 && this.src.trim() !== "";
@@ -64387,6 +64564,9 @@ let ObcReadout = class extends i$4 {
     if (!this.hasSetpoint) {
       return false;
     }
+    if (this.digitCountsMissing) {
+      return false;
+    }
     return isDisplayedAtSetpoint(
       resolveReadoutNumericValue(this.value, this.valueType) ?? null,
       this.setpoint,
@@ -64497,8 +64677,8 @@ let ObcReadout = class extends i$4 {
         .weight=${config.weight}
         .hasDegree=${config.hasDegree ?? false}
         .hasIcon=${config.hasIcon ?? false}
-        .fractionDigits=${this.resolvedFractionDigits}
-        .maxDigits=${this.resolvedMaxDigits}
+        .fractionDigits=${this.fractionDigits}
+        .maxDigits=${this.maxDigits}
         .hintedZeros=${config.hintedZeros}
         .spaceReserver=${config.spaceReserver}
         .off=${config.off ?? false}
@@ -64971,6 +65151,7 @@ let ObcReadout = class extends i$4 {
   willUpdate(changed) {
     super.willUpdate(changed);
     assertReadoutValueType("obc-readout", this.value, this.valueType);
+    assertReadoutFractionDigits("obc-readout", this.fractionDigits);
   }
   updated(changed) {
     super.updated(changed);
@@ -209868,6 +210049,7 @@ ObcThruster.styles = i$7`
     }
 
     .container > svg {
+      display: block;
       height: 100%;
       width: 100%;
     }
@@ -211331,6 +211513,10 @@ const compentStyle$a = i$7`* {
   box-sizing: border-box;
 }
 
+svg {
+  display: block;
+}
+
 .label {
   font-family: var(--global-typography-font-family);
   font-weight: var(--global-typography-ui-body-font-weight);
@@ -212494,6 +212680,16 @@ const componentStyle$h = i$7`* {
   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;
 }
 `;
 function hdgVectorArt(colorName) {
@@ -227720,9 +227916,12 @@ let ObcReadoutList = class extends i$4 {
       if (hasNumericBlock) {
         maxFractionDigits = Math.max(
           maxFractionDigits,
-          item.fractionDigits ?? 0
+          resolveReadoutDigitCount(item.fractionDigits)
+        );
+        maxIntegerDigits = Math.max(
+          maxIntegerDigits,
+          resolveReadoutDigitCount(item.maxDigits)
         );
-        maxIntegerDigits = Math.max(maxIntegerDigits, item.maxDigits ?? 0);
       }
       maxIntegerDigits = Math.max(
         maxIntegerDigits,