@oicl/openbridge-webcomponents 2.0.0-next.88 → 2.0.0-next.89

package/dist/building-blocks/readout-block/readout-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readout-block.js","sources":["../../../src/building-blocks/readout-block/readout-block.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS, type TemplateResult} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './readout-block.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../components/textbox/textbox.js';\nimport {\n  ObcTextboxSize,\n  ObcTextboxFontWeight,\n  ObcTextboxAlignment,\n} from '../../components/textbox/textbox.js';\nimport '../../icons/icon-input-right.js';\nimport '../../icons/icon-notification-advice.js';\nimport {\n  formatNumericValue,\n  readoutFormattedInteger,\n  type ReadoutNumericFormatOptions,\n} from '../../navigation-instruments/readout/readout-formatters.js';\nimport {\n  type AlertFrameConfig,\n  wrapWithAlertFrame,\n} from '../../components/alert-frame/alert-frame.js';\n\n// Re-exported so consumers can configure typography without a second import path.\nexport {\n  ObcTextboxSize,\n  ObcTextboxFontWeight,\n  ObcTextboxAlignment,\n} from '../../components/textbox/textbox.js';\n\n/**\n * Semantic variant of the block. Drives the default marker icon and the\n * colour token; the layout is identical across variants.\n * - `value`: the primary reading (no default marker icon).\n * - `setpoint`: a setpoint reference (default `input-right` marker).\n * - `advice`: an advisory reference (default `notification-advice` marker).\n */\nexport enum ReadoutBlockVariant {\n  value = 'value',\n  setpoint = 'setpoint',\n  advice = 'advice',\n}\n\n/**\n * Density tier of the block — drives icon size, the icon↔number gap, and the\n * degree-column width tier. The number typography size is controlled\n * independently via {@link ObcReadoutBlock.valueSize} so a parent can de-emphasise\n * one block relative to another within the same tier.\n */\nexport enum ReadoutBlockSize {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\n/**\n * Per-block measurement quality, rendered as a non-shifting outline chip.\n * - `low-integrity`: the value is suspect.\n * - `invalid`: the value is invalid.\n */\nexport enum ReadoutBlockDataQuality {\n  lowIntegrity = 'low-integrity',\n  invalid = 'invalid',\n}\n\n/**\n * Pop-up fade phase for a setpoint block. Driven by the parent's setpoint\n * interaction state machine; only meaningful for `role=\"setpoint\"`.\n */\nexport enum ReadoutBlockHidePhase {\n  none = 'none',\n  hiding = 'hiding',\n  hidden = 'hidden',\n}\n\n/**\n * `<obc-readout-block>` – the most atomic readout primitive: a single\n * cap-height-aligned, width-reservable numeric segment (value / setpoint /\n * advice).\n *\n * It renders one `obc-textbox` number with optional hinted leading zeros, a\n * reservable width, an optional leading marker icon (via the `icon` slot or the\n * role default), an optional trailing degree glyph, an `off`/unavailable text\n * state, per-block data-quality and an optional per-block alert frame.\n *\n * This is a building block used inside `obc-readout-list-item` (and, in a future\n * refactor, inside `obc-readout`); it is not normally used on its own. Colour is\n * inherited from the host context (the parent sets the role colour), so the\n * block stays neutral until placed.\n *\n * @experimental Pilot for the new primitives + per-block options Readout API; the\n * API may change in a future release.\n *\n * @slot icon - Replaces the role's default marker icon.\n *\n * @csspart block - The block container (carries role / tone / data-quality).\n * @csspart block-content - The number + degree group.\n * @csspart block-text - The `obc-textbox` rendering the number.\n * @csspart block-icon - The leading marker-icon container.\n * @csspart degree - The trailing degree-glyph column.\n */\n@customElement('obc-readout-block')\nexport class ObcReadoutBlock extends LitElement {\n  /** Semantic variant (value / setpoint / advice). */\n  @property({type: String}) variant: ReadoutBlockVariant =\n    ReadoutBlockVariant.value;\n\n  /** The numeric value; `null`/`undefined` renders a dash. */\n  @property({type: Number}) value: number | null = null;\n\n  /** Density tier — icon size, gap, degree tier. */\n  @property({type: String}) size: ReadoutBlockSize = ReadoutBlockSize.small;\n\n  /**\n   * Resolved number-typography size. When unset it is derived from `size`\n   * (small→s, medium→m, large→l), so a parent that de-emphasises a block (e.g.\n   * a secondary setpoint) can pass a smaller size without changing the tier.\n   */\n  @property({type: String}) valueSize?: ObcTextboxSize;\n\n  /** Accent (in-command) colour tone. */\n  @property({type: Boolean}) enhanced = false;\n\n  /** Number font weight (regular / semibold / bold); colour is independent. */\n  @property({type: String}) weight: ObcTextboxFontWeight =\n    ObcTextboxFontWeight.regular;\n\n  /** Render the trailing cap-height degree glyph (`°`). */\n  @property({type: Boolean}) hasDegree = false;\n\n  /** Show the leading marker-icon container (always on for setpoint/advice). */\n  @property({type: Boolean}) hasIcon = false;\n\n  /** Number of fraction digits. */\n  @property({type: Number}) fractionDigits = 0;\n\n  /** Integer digits to reserve / hint (independent of `fractionDigits`). */\n  @property({type: Number}) maxDigits = 0;\n\n  /** Render muted leading zeros filling the integer part to `maxDigits`. */\n  @property({type: Boolean}) hintedZeros = false;\n\n  /** Explicit longest string to reserve width for (e.g. `\"0000.0\"`). */\n  @property({type: String}) spaceReserver?: string;\n\n  /** Render `offText` instead of a number (e.g. equipment powered down). */\n  @property({type: Boolean}) off = false;\n\n  /** Text shown when `off` is true. */\n  @property({type: String}) offText = 'OFF';\n\n  /** Text alignment of the number within its reserved width. */\n  @property({type: String}) alignment: ObcTextboxAlignment =\n    ObcTextboxAlignment.Right;\n\n  /** Per-block measurement quality (outline chip). */\n  @property({type: String}) dataQuality?: ReadoutBlockDataQuality;\n\n  // `boolean | …` (not `false | …`): the generated Angular wrapper widens a\n  // literal-`false` union to `boolean`. `wrapWithAlertFrame` treats any\n  // non-object as \"no frame\", so accepting `boolean` is harmless.\n  /** Per-block alert frame; nests inside any parent alert frame. */\n  @property({type: Object}) alert: boolean | AlertFrameConfig = false;\n\n  /** Setpoint focus (touch) state — only meaningful for `role=\"setpoint\"`. */\n  @property({type: Boolean}) touching = false;\n\n  /** Setpoint pop-up fade phase — only meaningful for `role=\"setpoint\"`. */\n  @property({type: String}) hidePhase: ReadoutBlockHidePhase =\n    ReadoutBlockHidePhase.none;\n\n  @state() private hasAssignedIcon = false;\n\n  private get resolvedValueSize(): ObcTextboxSize {\n    if (this.valueSize) {\n      return this.valueSize;\n    }\n    switch (this.size) {\n      case ReadoutBlockSize.large:\n        return ObcTextboxSize.l;\n      case ReadoutBlockSize.medium:\n        return ObcTextboxSize.m;\n      default:\n        return ObcTextboxSize.s;\n    }\n  }\n\n  private get numericFormatOptions(): ReadoutNumericFormatOptions {\n    return {\n      showZeroPadding: false,\n      minValueLength: this.maxDigits,\n      fractionDigits: this.fractionDigits,\n    };\n  }\n\n  /** Widest possible value string for width reservation (e.g. `\"000.0\"`). */\n  private get reserverText(): string {\n    const maxDigits = this.maxDigits;\n    if (maxDigits <= 0) {\n      return '';\n    }\n    const integer = '0'.repeat(Math.max(maxDigits, 1));\n    return this.fractionDigits > 0\n      ? `${integer}.${'0'.repeat(this.fractionDigits)}`\n      : integer;\n  }\n\n  /**\n   * Effective width reserver: the wider of the explicit `spaceReserver` and the\n   * `maxDigits`/`fractionDigits`-derived reserve, so an explicit reserver can\n   * never reserve *less* than the formatted value needs. Under tabular-nums the\n   * rendered width is proportional to character count, so \"wider\" compares length.\n   */\n  private widerReserver(explicit: string | undefined, derived: string): string {\n    if (!explicit) {\n      return derived;\n    }\n    if (!derived) {\n      return explicit;\n    }\n    return explicit.length >= derived.length ? explicit : derived;\n  }\n\n  private dataQualityClasses(): Record<string, boolean> {\n    return {\n      'data-low-integrity':\n        this.dataQuality === ReadoutBlockDataQuality.lowIntegrity,\n      'data-invalid': this.dataQuality === ReadoutBlockDataQuality.invalid,\n    };\n  }\n\n  private onIconSlotChange = (event: Event): void => {\n    // `slotchange` fires after the first render once content is (re)assigned,\n    // so it covers the initial state without a firstUpdated re-render.\n    this.hasAssignedIcon =\n      (event.target as HTMLSlotElement).assignedElements({flatten: true})\n        .length > 0;\n  };\n\n  private renderIcon(): TemplateResult | typeof nothing {\n    // Value blocks only show an icon when asked; setpoint/advice always reserve\n    // their marker. The role default is rendered as a direct child (so it sizes\n    // via `.block-icon obi-*`) and hidden once an icon is assigned to the slot —\n    // `{flatten: true}` sees through a forwarded-but-empty parent slot, so the\n    // default still shows when the consumer overrides nothing.\n    const showIcon = this.variant !== ReadoutBlockVariant.value || this.hasIcon;\n    if (!showIcon) {\n      return nothing;\n    }\n    let fallback: TemplateResult | typeof nothing = nothing;\n    if (this.variant === ReadoutBlockVariant.setpoint) {\n      fallback = html`<obi-input-right></obi-input-right>`;\n    } else if (this.variant === ReadoutBlockVariant.advice) {\n      fallback = html`<obi-notification-advice></obi-notification-advice>`;\n    }\n    return html`<span class=\"block-icon\" part=\"block-icon\" aria-hidden=\"true\">\n      <slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot>\n      ${this.hasAssignedIcon ? nothing : fallback}\n    </span>`;\n  }\n\n  /**\n   * A cap-height `°` column whose width scales with the number size. Inherits the\n   * block's colour.\n   */\n  private renderDegreeGlyph(size: ObcTextboxSize): TemplateResult {\n    return html`\n      <span\n        class=${classMap({\n          'degree-column': true,\n          [`degree-${size}`]: true,\n          'degree-inherit': true,\n        })}\n        part=\"degree\"\n      >\n        <obc-textbox class=\"degree-glyph\" .size=${size} alignment=\"center\"\n          >°</obc-textbox\n        >\n      </span>\n    `;\n  }\n\n  override render() {\n    const valueSize = this.resolvedValueSize;\n    const formatOptions = this.numericFormatOptions;\n    const valueForFormat = this.value ?? undefined;\n    const text = this.off\n      ? this.offText\n      : formatNumericValue(valueForFormat, formatOptions);\n    // Hinted zeros pad the INTEGER part up to `maxDigits`, independent of\n    // `fractionDigits` (the decimal point and fraction digits never count toward\n    // `maxDigits`). Negative / dashed values are not padded. Example: value 1.2,\n    // maxDigits 3, fractionDigits 1 → \"001.2\".\n    const hintCount =\n      this.off ||\n      !this.hintedZeros ||\n      valueForFormat === undefined ||\n      valueForFormat < 0\n        ? 0\n        : Math.max(this.maxDigits - readoutFormattedInteger(text), 0);\n    const hinted = hintCount > 0 ? '0'.repeat(hintCount) : '';\n    // Hinted zeros own the width — they already fill to `maxDigits` — so when\n    // `hintedZeros` is enabled an explicit `spaceReserver` is ignored (it has\n    // higher priority). Otherwise the wider of the explicit reserver and the\n    // `maxDigits`-derived reserve wins.\n    const reserver = this.hintedZeros\n      ? this.reserverText\n      : this.widerReserver(this.spaceReserver, this.reserverText);\n\n    const block = html`\n      <div\n        class=${classMap({\n          block: true,\n          [`block-${this.variant}`]: true,\n          [`size-${this.size}`]: true,\n          'tone-enhanced': this.enhanced,\n          touching: this.touching,\n          'is-hiding': this.hidePhase === ReadoutBlockHidePhase.hiding,\n          'is-hidden': this.hidePhase === ReadoutBlockHidePhase.hidden,\n          ...this.dataQualityClasses(),\n        })}\n        part=\"block block-${this.variant}\"\n      >\n        ${this.renderIcon()}\n        <span class=\"block-content\" part=\"block-content\">\n          <obc-textbox\n            class=\"block-text\"\n            part=\"block-text\"\n            .size=${valueSize}\n            .fontWeight=${this.weight}\n            .alignment=${this.alignment}\n            .tabularNums=${true}\n          >\n            ${hinted\n              ? html`<span class=\"hinted-zero\" aria-hidden=\"true\"\n                  >${hinted}</span\n                >`\n              : nothing}${text}\n            ${reserver ? html`<span slot=\"length\">${reserver}</span>` : nothing}\n          </obc-textbox>\n          ${this.hasDegree ? this.renderDegreeGlyph(valueSize) : nothing}\n        </span>\n      </div>\n    `;\n    return wrapWithAlertFrame(this.alert ?? false, block);\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-readout-block': ObcReadoutBlock;\n  }\n}\n"],"names":["ReadoutBlockVariant","ReadoutBlockSize","ReadoutBlockDataQuality","ReadoutBlockHidePhase"],"mappings":"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"}

package/dist/navigation-instruments/readout-list/readout-list.css.js

@@ -0,0 +1,24 @@
+import { css } from "lit";
+const componentStyle = css`* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* Vertical stack of rows. The 4px row gap matches the rich detail rows in
+   \`obc-automation-tank\`; override via \`--obc-readout-list-row-gap\`. */
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--obc-readout-list-row-gap, 4px);
+  width: 100%;
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=readout-list.css.js.map

package/dist/navigation-instruments/readout-list/readout-list.css.js.map

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

package/dist/navigation-instruments/readout-list/readout-list.d.ts

@@ -0,0 +1,70 @@
+import { LitElement, PropertyValues } from 'lit';
+import '../readout-list-item/readout-list-item.js';
+/**
+ * `<obc-readout-list>` – A container that groups `<obc-readout-list-item>` rows
+ * and **auto-aligns their columns**.
+ *
+ * Because each row is its own custom element, cross-row column alignment is not
+ * automatic. This container inspects its rows and pushes shared width reservers
+ * down so the unit column, the value / setpoint / advice columns and the source
+ * column all line up — the same effect the `Readout List Item → ColumnAlignment`
+ * story achieves by hand, done for you. Alignment is always on.
+ *
+ * What it equalizes — derived from each row's data and broadcast to every row, so
+ * the widest value / unit / source is never clipped:
+ * - **Unit:** the longest `unit` becomes every row's unit space-reserver.
+ * - **Value / setpoint / advice:** the widest numeric width (max integer digits +
+ *   max fraction digits across rows, derived from each row's `maxDigits` /
+ *   `fractionDigits` / current values) is reserved on every row's numeric blocks.
+ *   Reserving off digit counts keeps it stable as live values update.
+ * - **Source:** the longest `src` becomes every row's source space-reserver.
+ * - **Degree:** if any row has a degree, non-degree rows reserve the degree column
+ *   (`hasDegreeSpacer`) so their digits line up with the degree rows; the spacer is
+ *   cleared once no degree rows remain.
+ *
+ * The list **owns** these reservers: it recomputes them from the rows' data on
+ * every pass (and clears stale reservers / spacers when rows change), so a
+ * `spaceReserver` set directly on a row inside the list is overwritten. Drive the
+ * data (`maxDigits` / `fractionDigits` / `unit` / `src`) rather than setting a
+ * manual reserver when a row lives in a list.
+ *
+ * Alignment runs on `slotchange` and on child mutations (added/removed rows and
+ * HTML-attribute changes). When rows are updated via JS **properties** only (no
+ * attribute/DOM mutation), call {@link align} to recompute.
+ *
+ * @experimental Pilot for the new primitives + per-block options Readout API; the
+ * API may change in a future release.
+ *
+ * @slot - The `<obc-readout-list-item>` rows.
+ *
+ * @csspart list - The vertical stack container.
+ */
+export declare class ObcReadoutList extends LitElement {
+    /**
+     * Development aid: outline each row's readout building blocks (red), degree
+     * columns (blue) and degree spacer (green) so the reserved column widths are
+     * visible. Propagated to every row. Off by default.
+     */
+    showDebugOverlay: boolean;
+    private mutationObserver?;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    /** The `obc-readout-list-item` rows, including those nested in wrapper elements. */
+    private get items();
+    /**
+     * Recompute and apply the shared column reservers across all rows. Call this
+     * after updating rows via JS properties only (attribute/DOM changes are picked
+     * up automatically).
+     */
+    align(): void;
+    private observeChildren;
+    private handleSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-readout-list': ObcReadoutList;
+    }
+}
+//# sourceMappingURL=readout-list.d.ts.map

package/dist/navigation-instruments/readout-list/readout-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"readout-list.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/readout-list/readout-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAmB,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAIrE,OAAO,2CAA2C,CAAC;AA2BnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C;;;;OAIG;IACuC,gBAAgB,UAAS;IAEnE,OAAO,CAAC,gBAAgB,CAAC,CAAmB;cAEzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAShD,oBAAoB,IAAI,IAAI;IAMrC,oFAAoF;IACpF,OAAO,KAAK,KAAK,GAQhB;IAED;;;;OAIG;IACH,KAAK,IAAI,IAAI;IAuEb,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,gBAAgB,CAGtB;IAEO,MAAM;IAQf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/navigation-instruments/readout-list/readout-list.js

@@ -0,0 +1,154 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import componentStyle from "./readout-list.css.js";
+import { customElement } from "../../decorator.js";
+import "../readout-list-item/readout-list-item.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const ITEM_TAG = "obc-readout-list-item";
+const OBSERVED_ATTRIBUTES = [
+  "unit",
+  "src",
+  "value",
+  "setpoint",
+  "advice",
+  "max-digits",
+  "fraction-digits",
+  "has-degree",
+  "has-setpoint",
+  "has-advice"
+];
+function integerDigitCount(value) {
+  if (value === null || value === void 0 || Number.isNaN(value)) {
+    return 0;
+  }
+  return String(Math.trunc(Math.abs(value))).length;
+}
+let ObcReadoutList = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.showDebugOverlay = false;
+    this.handleSlotChange = () => {
+      this.align();
+      this.observeChildren();
+    };
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("showDebugOverlay")) {
+      this.align();
+    }
+  }
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
+    this.mutationObserver = void 0;
+    super.disconnectedCallback();
+  }
+  /** The `obc-readout-list-item` rows, including those nested in wrapper elements. */
+  get items() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    const assigned = slot?.assignedElements({ flatten: true }) ?? [];
+    return assigned.flatMap(
+      (el) => el.tagName.toLowerCase() === ITEM_TAG ? [el] : Array.from(el.querySelectorAll(ITEM_TAG))
+    );
+  }
+  /**
+   * Recompute and apply the shared column reservers across all rows. Call this
+   * after updating rows via JS properties only (attribute/DOM changes are picked
+   * up automatically).
+   */
+  align() {
+    const items = this.items;
+    if (items.length === 0) {
+      return;
+    }
+    let maxIntegerDigits = 0;
+    let maxFractionDigits = 0;
+    let longestUnit = "";
+    let longestSrc = "";
+    let anyDegree = false;
+    for (const item of items) {
+      maxFractionDigits = Math.max(maxFractionDigits, item.fractionDigits ?? 0);
+      maxIntegerDigits = Math.max(
+        maxIntegerDigits,
+        item.maxDigits ?? 0,
+        integerDigitCount(item.value),
+        item.hasSetpoint ? integerDigitCount(item.setpoint) : 0,
+        item.hasAdvice ? integerDigitCount(item.advice) : 0
+      );
+      if (item.unit && item.unit.length > longestUnit.length) {
+        longestUnit = item.unit;
+      }
+      if (item.src && item.src.length > longestSrc.length) {
+        longestSrc = item.src;
+      }
+      if (item.hasDegree) {
+        anyDegree = true;
+      }
+    }
+    const numericReserver = maxIntegerDigits > 0 ? "0".repeat(maxIntegerDigits) + (maxFractionDigits > 0 ? `.${"0".repeat(maxFractionDigits)}` : "") : void 0;
+    this.mutationObserver?.disconnect();
+    for (const item of items) {
+      item.valueOptions = {
+        ...item.valueOptions,
+        spaceReserver: numericReserver
+      };
+      item.setpointOptions = {
+        ...item.setpointOptions,
+        spaceReserver: numericReserver
+      };
+      item.adviceOptions = {
+        ...item.adviceOptions,
+        spaceReserver: numericReserver
+      };
+      item.unitOptions = {
+        ...item.unitOptions,
+        spaceReserver: longestUnit || void 0
+      };
+      item.srcOptions = {
+        ...item.srcOptions,
+        spaceReserver: longestSrc || void 0
+      };
+      item.hasDegreeSpacer = anyDegree && !item.hasDegree;
+      item.showDebugOverlay = this.showDebugOverlay;
+    }
+    this.observeChildren();
+  }
+  observeChildren() {
+    if (!this.mutationObserver) {
+      this.mutationObserver = new MutationObserver(() => this.align());
+    }
+    this.mutationObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: OBSERVED_ATTRIBUTES
+    });
+  }
+  render() {
+    return html`
+      <div class="list" part="list">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+ObcReadoutList.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ObcReadoutList.prototype, "showDebugOverlay", 2);
+ObcReadoutList = __decorateClass([
+  customElement("obc-readout-list")
+], ObcReadoutList);
+export {
+  ObcReadoutList
+};
+//# sourceMappingURL=readout-list.js.map

package/dist/navigation-instruments/readout-list/readout-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readout-list.js","sources":["../../../src/navigation-instruments/readout-list/readout-list.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, type PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport componentStyle from './readout-list.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../readout-list-item/readout-list-item.js';\nimport {ObcReadoutListItem} from '../readout-list-item/readout-list-item.js';\n\nconst ITEM_TAG = 'obc-readout-list-item';\n\n/** Child attributes whose change should re-trigger alignment (HTML-attribute usage). */\nconst OBSERVED_ATTRIBUTES = [\n  'unit',\n  'src',\n  'value',\n  'setpoint',\n  'advice',\n  'max-digits',\n  'fraction-digits',\n  'has-degree',\n  'has-setpoint',\n  'has-advice',\n];\n\n/** Integer-digit count of a numeric value (sign and fraction excluded). */\nfunction integerDigitCount(value: number | null | undefined): number {\n  if (value === null || value === undefined || Number.isNaN(value)) {\n    return 0;\n  }\n  return String(Math.trunc(Math.abs(value))).length;\n}\n\n/**\n * `<obc-readout-list>` – A container that groups `<obc-readout-list-item>` rows\n * and **auto-aligns their columns**.\n *\n * Because each row is its own custom element, cross-row column alignment is not\n * automatic. This container inspects its rows and pushes shared width reservers\n * down so the unit column, the value / setpoint / advice columns and the source\n * column all line up — the same effect the `Readout List Item → ColumnAlignment`\n * story achieves by hand, done for you. Alignment is always on.\n *\n * What it equalizes — derived from each row's data and broadcast to every row, so\n * the widest value / unit / source is never clipped:\n * - **Unit:** the longest `unit` becomes every row's unit space-reserver.\n * - **Value / setpoint / advice:** the widest numeric width (max integer digits +\n *   max fraction digits across rows, derived from each row's `maxDigits` /\n *   `fractionDigits` / current values) is reserved on every row's numeric blocks.\n *   Reserving off digit counts keeps it stable as live values update.\n * - **Source:** the longest `src` becomes every row's source space-reserver.\n * - **Degree:** if any row has a degree, non-degree rows reserve the degree column\n *   (`hasDegreeSpacer`) so their digits line up with the degree rows; the spacer is\n *   cleared once no degree rows remain.\n *\n * The list **owns** these reservers: it recomputes them from the rows' data on\n * every pass (and clears stale reservers / spacers when rows change), so a\n * `spaceReserver` set directly on a row inside the list is overwritten. Drive the\n * data (`maxDigits` / `fractionDigits` / `unit` / `src`) rather than setting a\n * manual reserver when a row lives in a list.\n *\n * Alignment runs on `slotchange` and on child mutations (added/removed rows and\n * HTML-attribute changes). When rows are updated via JS **properties** only (no\n * attribute/DOM mutation), call {@link align} to recompute.\n *\n * @experimental Pilot for the new primitives + per-block options Readout API; the\n * API may change in a future release.\n *\n * @slot - The `<obc-readout-list-item>` rows.\n *\n * @csspart list - The vertical stack container.\n */\n@customElement('obc-readout-list')\nexport class ObcReadoutList extends LitElement {\n  /**\n   * Development aid: outline each row's readout building blocks (red), degree\n   * columns (blue) and degree spacer (green) so the reserved column widths are\n   * visible. Propagated to every row. Off by default.\n   */\n  @property({type: Boolean, reflect: true}) showDebugOverlay = false;\n\n  private mutationObserver?: MutationObserver;\n\n  protected override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    // A host-property change is not seen by the child MutationObserver, so\n    // re-propagate `showDebugOverlay` (and re-align) when it toggles.\n    if (changed.has('showDebugOverlay')) {\n      this.align();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    this.mutationObserver = undefined;\n    super.disconnectedCallback();\n  }\n\n  /** The `obc-readout-list-item` rows, including those nested in wrapper elements. */\n  private get items(): ObcReadoutListItem[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    const assigned = slot?.assignedElements({flatten: true}) ?? [];\n    return assigned.flatMap((el) =>\n      el.tagName.toLowerCase() === ITEM_TAG\n        ? [el as ObcReadoutListItem]\n        : Array.from(el.querySelectorAll<ObcReadoutListItem>(ITEM_TAG))\n    );\n  }\n\n  /**\n   * Recompute and apply the shared column reservers across all rows. Call this\n   * after updating rows via JS properties only (attribute/DOM changes are picked\n   * up automatically).\n   */\n  align(): void {\n    const items = this.items;\n    if (items.length === 0) {\n      return;\n    }\n\n    let maxIntegerDigits = 0;\n    let maxFractionDigits = 0;\n    let longestUnit = '';\n    let longestSrc = '';\n    let anyDegree = false;\n\n    for (const item of items) {\n      maxFractionDigits = Math.max(maxFractionDigits, item.fractionDigits ?? 0);\n      maxIntegerDigits = Math.max(\n        maxIntegerDigits,\n        item.maxDigits ?? 0,\n        integerDigitCount(item.value),\n        item.hasSetpoint ? integerDigitCount(item.setpoint) : 0,\n        item.hasAdvice ? integerDigitCount(item.advice) : 0\n      );\n      if (item.unit && item.unit.length > longestUnit.length) {\n        longestUnit = item.unit;\n      }\n      if (item.src && item.src.length > longestSrc.length) {\n        longestSrc = item.src;\n      }\n      if (item.hasDegree) {\n        anyDegree = true;\n      }\n    }\n\n    const numericReserver =\n      maxIntegerDigits > 0\n        ? '0'.repeat(maxIntegerDigits) +\n          (maxFractionDigits > 0 ? `.${'0'.repeat(maxFractionDigits)}` : '')\n        : undefined;\n\n    // Our writes are properties (no reflected attributes), so they do not trigger\n    // the MutationObserver; disconnecting around them is belt-and-suspenders.\n    this.mutationObserver?.disconnect();\n    for (const item of items) {\n      // Recompute every reserver / spacer on every pass (do not gate on a value\n      // being present), so stale state clears when rows change — e.g. when the\n      // last degree row, the last unit, or the last source is removed.\n      item.valueOptions = {\n        ...item.valueOptions,\n        spaceReserver: numericReserver,\n      };\n      item.setpointOptions = {\n        ...item.setpointOptions,\n        spaceReserver: numericReserver,\n      };\n      item.adviceOptions = {\n        ...item.adviceOptions,\n        spaceReserver: numericReserver,\n      };\n      item.unitOptions = {\n        ...item.unitOptions,\n        spaceReserver: longestUnit || undefined,\n      };\n      item.srcOptions = {\n        ...item.srcOptions,\n        spaceReserver: longestSrc || undefined,\n      };\n      item.hasDegreeSpacer = anyDegree && !item.hasDegree;\n      item.showDebugOverlay = this.showDebugOverlay;\n    }\n    this.observeChildren();\n  }\n\n  private observeChildren(): void {\n    if (!this.mutationObserver) {\n      this.mutationObserver = new MutationObserver(() => this.align());\n    }\n    this.mutationObserver.observe(this, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: OBSERVED_ATTRIBUTES,\n    });\n  }\n\n  private handleSlotChange = (): void => {\n    this.align();\n    this.observeChildren();\n  };\n\n  override render() {\n    return html`\n      <div class=\"list\" part=\"list\">\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-readout-list': ObcReadoutList;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/navigation-instruments/readout-list-item/readout-list-item.css.js

@@ -12,6 +12,57 @@ const componentStyle = css`* {
   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
@@ -222,129 +273,10 @@ const componentStyle = css`* {
   align-items: flex-end;
 }
 
-/* ---------- Readout building block (advice / setpoint / value) ---------- */
-
-.block {
-  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;
-}
-
-.block-icon obi-input-right,
-.block-icon obi-notification-advice,
-.block-icon ::slotted(*) {
-  display: block;
-  inline-size: 100%;
-  block-size: 100%;
-}
-
-.hinted-zero {
-  color: var(
-    --obc-readout-list-item-hinted-color,
-    var(--element-inactive-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)
-  );
-}
+/* 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(
@@ -364,26 +296,22 @@ const componentStyle = css`* {
   );
 }
 
-/* ---------- 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. */
+ * \`outline\` (not \`border\`) so the chip never shifts the source's width. (The
+ * per-block value/setpoint/advice chips live in \`obc-readout-block\`.) */
 
-.block.data-low-integrity,
-.block.data-invalid,
 .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);
@@ -525,11 +453,6 @@ const componentStyle = css`* {
   );
 }
 
-.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
@@ -566,11 +489,6 @@ const componentStyle = css`* {
   );
 }
 
-.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
@@ -602,11 +520,6 @@ const componentStyle = css`* {
   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);
@@ -651,6 +564,28 @@ const componentStyle = css`* {
   );
   --_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;
+}
 `;
 export {
   componentStyle as default

package/dist/navigation-instruments/readout-list-item/readout-list-item.css.js.map

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