@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.55 → 2.0.0-next.57

package/dist/navigation-instruments/rot-sector/rot-sector.js

@@ -1,9 +1,10 @@
-import { LitElement, html } from "lit";
+import { LitElement, nothing, html, css } from "lit";
 import { customElement } from "../../decorator.js";
 import { property } from "lit/decorators.js";
 import { Priority } from "../types.js";
 import { SetpointMixin } from "../../svghelpers/setpoint-mixin.js";
 import "../../building-blocks/instrument-radial/instrument-radial.js";
+import { ReadoutVariant, ReadoutDirection } from "../readout/readout.js";
 import { TickmarkStyle } from "../watch/tickmark.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -37,6 +38,7 @@ let ObcRotSector = class extends SetpointMixin(LitElement) {
     this.advices = [];
     this.zoomToFitArc = false;
     this.rotArcExtent = 60;
+    this.hasReadout = false;
     this.getAngle = (v) => {
       if (!this.maxValue) return 0;
       return v / this.maxValue * this.rotArcExtent;
@@ -71,6 +73,22 @@ let ObcRotSector = class extends SetpointMixin(LitElement) {
     }
     return "var(--instrument-enhanced-tertiary-color)";
   }
+  /**
+   * Vertical position of the readout, in % of the host. In the zoomed view the
+   * arc's lower edge shifts with `rotArcExtent`, so the position is interpolated
+   * between the narrow- and wide-arc anchors to keep a roughly constant gap
+   * between the arc and the readout. The static (unzoomed) arc uses a fixed
+   * position.
+   */
+  get _readoutTopPercent() {
+    if (!this.zoomToFitArc) {
+      return 60;
+    }
+    const narrowTop = 70;
+    const wideTop = 66;
+    const extent = Math.min(60, Math.max(10, this.rotArcExtent));
+    return narrowTop + (wideTop - narrowTop) * (extent - 10) / (60 - 10);
+  }
   render() {
     const barColor = this._barColor;
     return html`
@@ -101,6 +119,19 @@ let ObcRotSector = class extends SetpointMixin(LitElement) {
         .zoomToFitArc=${this.zoomToFitArc}
       >
       </obc-instrument-radial>
+      ${this.hasReadout ? html`<div class="readout" style="top: ${this._readoutTopPercent}%">
+            <obc-readout
+              .variant=${ReadoutVariant.enhanced}
+              .direction=${ReadoutDirection.vertical}
+              .hasSetpoint=${false}
+              .hasAdvice=${false}
+              .value=${this.value}
+              .fractionDigits=${0}
+              .valuePriority=${this.priority}
+              label="ROT"
+              unit="DEG/min"
+            ></obc-readout>
+          </div>` : nothing}
     `;
   }
   get _needleColor() {
@@ -119,6 +150,24 @@ let ObcRotSector = class extends SetpointMixin(LitElement) {
     return "var(--instrument-enhanced-secondary-color)";
   }
 };
+ObcRotSector.styles = css`
+    :host {
+      position: relative;
+      display: block;
+      height: 100%;
+    }
+
+    .readout {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    /* Center the value over the label/unit row instead of right-aligning it. */
+    obc-readout::part(value-wrapper) {
+      justify-self: center;
+    }
+  `;
 __decorateClass([
   property({ type: Number })
 ], ObcRotSector.prototype, "value", 2);
@@ -164,6 +213,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], ObcRotSector.prototype, "rotArcExtent", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcRotSector.prototype, "hasReadout", 2);
 ObcRotSector = __decorateClass([
   customElement("obc-rot-sector")
 ], ObcRotSector);

package/dist/navigation-instruments/rot-sector/rot-sector.js.map

@@ -1 +1 @@
-{"version":3,"file":"rot-sector.js","sources":["../../../src/navigation-instruments/rot-sector/rot-sector.ts"],"sourcesContent":["import {LitElement, html} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {property} from 'lit/decorators.js';\nimport {AdviceType} from '../watch/advice.js';\nimport {Priority} from '../types.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport '../../building-blocks/instrument-radial/instrument-radial.js';\nimport {TickmarkStyle} from '../watch/tickmark.js';\n\nexport enum ObcGaugeRadialType {\n  filled = 'filled',\n  bar = 'bar',\n  needle = 'needle',\n}\n\nexport interface GaugeRadialAdvice {\n  minValue: number;\n  maxValue: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\n/**\n * `<obc-rot-sector>` — Rate-of-turn sector gauge for rotational velocity.\n *\n * `ObcRotSector` is a thin wrapper around `<obc-instrument-radial>` that\n * displays a bipolar sector gauge showing rate of turn. The arc extent is\n * configurable via `rotArcExtent` (default 60°), mapping the value range\n * (−maxValue to +maxValue) to ±rotArcExtent degrees. The bottom 50% of the\n * circle is clipped, producing a compact sector arc. When `zoomToFitArc`\n * is enabled, clipping is bypassed and the arc is enlarged to fill the\n * available space. It inherits\n * a full setpoint property bundle from {@link SetpointMixin}, including\n * auto at-setpoint detection, dual-marker adjustment preview, and deadband\n * tuning.\n *\n * ## Features\n *\n * - **Bipolar sector**: Value range is symmetric around zero (−maxValue to\n *   +maxValue), mapped to a ±`rotArcExtent`° arc (default 60°).\n * - **Port/starboard coloring**: When `portStarboard` is true, positive\n *   values render in starboard (green) and negative in port (red).\n * - **Bar display**: Always renders as a `bar` type — no needle or filled\n *   variants.\n * - **Setpoint via mixin**: `setpoint`, `newSetpoint`, `touching`,\n *   `autoAtSetpointDeadband`, `setpointOverride`, and all other setpoint\n *   properties are provided by `SetpointMixin` and forwarded to the inner\n *   `<obc-instrument-radial>`.\n * - **Advice zones**: Pass an array of {@link GaugeRadialAdvice} objects to\n *   render caution/alert arcs on the gauge.\n *\n * ## Usage Guidelines\n *\n * - Set `maxValue` to define the symmetric ± range.\n * - Use `priority` to switch between regular and enhanced color palettes.\n * - Enable `portStarboard` to show directional coloring.\n * - Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to\n *   control tickmark density.\n * - Enable `showLabels` to show numeric labels at primary tickmarks.\n *\n * ## Best Practices\n *\n * - Prefer `SetpointMixin` properties (`setpoint`, `touching`, etc.) over\n *   any legacy aliases — the mixin is the single source of truth.\n * - The sector is always bottom-clipped at 50%; do not change `clipBottom`\n *   externally.\n *\n * ## Example\n *\n * ```html\n * <obc-rot-sector\n *   value=\"15\"\n *   maxValue=\"60\"\n *   enhanced\n *   portStarboard\n *   showLabels\n *   primaryTickmarkInterval=\"20\"\n *   secondaryTickmarkInterval=\"10\"\n *   setpoint=\"30\"\n * ></obc-rot-sector>\n * ```\n *\n * @element obc-rot-sector\n * @typedef {import('./rot-sector.js').GaugeRadialAdvice} GaugeRadialAdvice\n */\n@customElement('obc-rot-sector')\nexport class ObcRotSector extends SetpointMixin(LitElement) {\n  @property({type: Number}) value = 0;\n  @property({type: Number}) maxValue = 100;\n\n  /**\n   * Measured rate of turn in degrees per minute (positive = starboard).\n   * Alias for `value` provided for cross-component consistency with\n   * `obc-compass`, `obc-compass-sector`, `obc-compass-flat`, and\n   * `obc-rate-of-turn`. Setting this updates `value`.\n   */\n  @property({type: Number})\n  set rateOfTurn(v: number) {\n    this.value = v;\n  }\n  get rateOfTurn(): number {\n    return this.value;\n  }\n\n  /**\n   * Maximum measured rate of turn in degrees per minute. Alias for\n   * `maxValue` provided for cross-component consistency. Setting this\n   * updates `maxValue`.\n   */\n  @property({type: Number})\n  set rateOfTurnMax(v: number) {\n    this.maxValue = v;\n  }\n  get rateOfTurnMax(): number {\n    return this.maxValue;\n  }\n  @property({type: Boolean}) showLabels: boolean = false;\n  /** Whether to render tickmarks inside the ring. */\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n  /**\n   * Interval for primary tickmarks in value units.\n   * When undefined or <= 0, no primary tickmarks are shown.\n   */\n  @property({type: Number}) primaryTickmarkInterval: number | undefined = 50;\n  /**\n   * Interval for secondary tickmarks in value units.\n   * When undefined or <= 0, no secondary tickmarks are shown.\n   */\n  @property({type: Number}) secondaryTickmarkInterval: number | undefined = 10;\n  /**\n   * Interval for tertiary tickmarks in value units.\n   * When undefined or <= 0, no tertiary tickmarks are shown.\n   */\n  @property({type: Number}) tertiaryTickmarkInterval: number | undefined =\n    undefined;\n  @property({type: String}) priority: Priority = Priority.regular;\n  @property({type: Boolean}) portStarboard: boolean = false;\n  @property({type: String}) tickmarkStyle: TickmarkStyle =\n    TickmarkStyle.regular;\n  @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n  @property({type: Boolean}) zoomToFitArc: boolean = false;\n  @property({type: Number}) rotArcExtent: number = 60;\n\n  getAngle = (v: number): number => {\n    if (!this.maxValue) return 0;\n    return (v / this.maxValue) * this.rotArcExtent;\n  };\n\n  get _type(): ObcGaugeRadialType {\n    return ObcGaugeRadialType.bar;\n  }\n\n  private get _barColor(): string {\n    if (this.portStarboard) {\n      if (this.value > 0) {\n        return 'var(--instrument-starboard-secondary-color)';\n      }\n      if (this.value < 0) {\n        return 'var(--instrument-port-secondary-color)';\n      }\n    }\n\n    if (this.priority !== Priority.enhanced) {\n      return 'var(--instrument-regular-tertiary-color)';\n    }\n\n    return 'var(--instrument-enhanced-tertiary-color)';\n  }\n\n  override render() {\n    const barColor = this._barColor;\n\n    return html`\n      <obc-instrument-radial\n        .value=${this.value}\n        .setpoint=${this.setpoint}\n        .newSetpoint=${this.newSetpoint}\n        .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}\n        .setpointOverride=${this.setpointOverride}\n        .touching=${this.touching}\n        .autoAtSetpoint=${this.autoAtSetpoint}\n        .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}\n        .maxValue=${this.maxValue}\n        .minValue=${-this.maxValue}\n        .getAngle=${this.getAngle}\n        .needleColor=${this._needleColor}\n        .barColor=${barColor}\n        .showLabels=${this.showLabels}\n        .tickmarksInside=${this.tickmarksInside}\n        .tickmarkStyle=${this.tickmarkStyle}\n        .primaryTickmarkInterval=${this.primaryTickmarkInterval}\n        .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}\n        .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}\n        .type=${this._type}\n        .needleType=${this._type}\n        .advices=${this.advices}\n        .clipBottom=${50}\n        .zoomToFitArc=${this.zoomToFitArc}\n      >\n      </obc-instrument-radial>\n    `;\n  }\n\n  private get _needleColor(): string {\n    if (this.portStarboard) {\n      if (this.value > 0) {\n        return 'var(--instrument-starboard-primary-color)';\n      }\n      if (this.value < 0) {\n        return 'var(--instrument-port-primary-color)';\n      }\n      return 'var(--instrument-regular-secondary-color)';\n    }\n\n    if (this.priority !== Priority.enhanced) {\n      return 'var(--instrument-regular-secondary-color)';\n    }\n\n    return 'var(--instrument-enhanced-secondary-color)';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-rot-sector': ObcRotSector;\n  }\n}\n"],"names":["ObcGaugeRadialType"],"mappings":"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"}
+{"version":3,"file":"rot-sector.js","sources":["../../../src/navigation-instruments/rot-sector/rot-sector.ts"],"sourcesContent":["import {LitElement, html, css, nothing} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {property} from 'lit/decorators.js';\nimport {AdviceType} from '../watch/advice.js';\nimport {Priority} from '../types.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport '../../building-blocks/instrument-radial/instrument-radial.js';\nimport '../readout/readout.js';\nimport {ReadoutDirection, ReadoutVariant} from '../readout/readout.js';\nimport {TickmarkStyle} from '../watch/tickmark.js';\n\nexport enum ObcGaugeRadialType {\n  filled = 'filled',\n  bar = 'bar',\n  needle = 'needle',\n}\n\nexport interface GaugeRadialAdvice {\n  minValue: number;\n  maxValue: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\n/**\n * `<obc-rot-sector>` — Rate-of-turn sector gauge for rotational velocity.\n *\n * `ObcRotSector` is a thin wrapper around `<obc-instrument-radial>` that\n * displays a bipolar sector gauge showing rate of turn. The arc extent is\n * configurable via `rotArcExtent` (default 60°), mapping the value range\n * (−maxValue to +maxValue) to ±rotArcExtent degrees. The bottom 50% of the\n * circle is clipped, producing a compact sector arc. When `zoomToFitArc`\n * is enabled, clipping is bypassed and the arc is enlarged to fill the\n * available space. It inherits\n * a full setpoint property bundle from {@link SetpointMixin}, including\n * auto at-setpoint detection, dual-marker adjustment preview, and deadband\n * tuning.\n *\n * ## Features\n *\n * - **Bipolar sector**: Value range is symmetric around zero (−maxValue to\n *   +maxValue), mapped to a ±`rotArcExtent`° arc (default 60°).\n * - **Port/starboard coloring**: When `portStarboard` is true, positive\n *   values render in starboard (green) and negative in port (red).\n * - **Bar display**: Always renders as a `bar` type — no needle or filled\n *   variants.\n * - **Setpoint via mixin**: `setpoint`, `newSetpoint`, `touching`,\n *   `autoAtSetpointDeadband`, `setpointOverride`, and all other setpoint\n *   properties are provided by `SetpointMixin` and forwarded to the inner\n *   `<obc-instrument-radial>`.\n * - **Advice zones**: Pass an array of {@link GaugeRadialAdvice} objects to\n *   render caution/alert arcs on the gauge.\n *\n * ## Usage Guidelines\n *\n * - Set `maxValue` to define the symmetric ± range.\n * - Use `priority` to switch between regular and enhanced color palettes.\n * - Enable `portStarboard` to show directional coloring.\n * - Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to\n *   control tickmark density.\n * - Enable `showLabels` to show numeric labels at primary tickmarks.\n *\n * ## Best Practices\n *\n * - Prefer `SetpointMixin` properties (`setpoint`, `touching`, etc.) over\n *   any legacy aliases — the mixin is the single source of truth.\n * - The sector is always bottom-clipped at 50%; do not change `clipBottom`\n *   externally.\n *\n * ## Example\n *\n * ```html\n * <obc-rot-sector\n *   value=\"15\"\n *   maxValue=\"60\"\n *   enhanced\n *   portStarboard\n *   showLabels\n *   primaryTickmarkInterval=\"20\"\n *   secondaryTickmarkInterval=\"10\"\n *   setpoint=\"30\"\n * ></obc-rot-sector>\n * ```\n *\n * @element obc-rot-sector\n * @typedef {import('./rot-sector.js').GaugeRadialAdvice} GaugeRadialAdvice\n */\n@customElement('obc-rot-sector')\nexport class ObcRotSector extends SetpointMixin(LitElement) {\n  @property({type: Number}) value = 0;\n  @property({type: Number}) maxValue = 100;\n\n  /**\n   * Measured rate of turn in degrees per minute (positive = starboard).\n   * Alias for `value` provided for cross-component consistency with\n   * `obc-compass`, `obc-compass-sector`, `obc-compass-flat`, and\n   * `obc-rate-of-turn`. Setting this updates `value`.\n   */\n  @property({type: Number})\n  set rateOfTurn(v: number) {\n    this.value = v;\n  }\n  get rateOfTurn(): number {\n    return this.value;\n  }\n\n  /**\n   * Maximum measured rate of turn in degrees per minute. Alias for\n   * `maxValue` provided for cross-component consistency. Setting this\n   * updates `maxValue`.\n   */\n  @property({type: Number})\n  set rateOfTurnMax(v: number) {\n    this.maxValue = v;\n  }\n  get rateOfTurnMax(): number {\n    return this.maxValue;\n  }\n  @property({type: Boolean}) showLabels: boolean = false;\n  /** Whether to render tickmarks inside the ring. */\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n  /**\n   * Interval for primary tickmarks in value units.\n   * When undefined or <= 0, no primary tickmarks are shown.\n   */\n  @property({type: Number}) primaryTickmarkInterval: number | undefined = 50;\n  /**\n   * Interval for secondary tickmarks in value units.\n   * When undefined or <= 0, no secondary tickmarks are shown.\n   */\n  @property({type: Number}) secondaryTickmarkInterval: number | undefined = 10;\n  /**\n   * Interval for tertiary tickmarks in value units.\n   * When undefined or <= 0, no tertiary tickmarks are shown.\n   */\n  @property({type: Number}) tertiaryTickmarkInterval: number | undefined =\n    undefined;\n  @property({type: String}) priority: Priority = Priority.regular;\n  @property({type: Boolean}) portStarboard: boolean = false;\n  @property({type: String}) tickmarkStyle: TickmarkStyle =\n    TickmarkStyle.regular;\n  @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n  @property({type: Boolean}) zoomToFitArc: boolean = false;\n  @property({type: Number}) rotArcExtent: number = 60;\n  /**\n   * When `true`, shows a centered `<obc-readout>` (label `ROT`, unit `DEG/min`)\n   * under the arc with the current rate-of-turn value. Default `false`.\n   */\n  @property({type: Boolean}) hasReadout: boolean = false;\n\n  getAngle = (v: number): number => {\n    if (!this.maxValue) return 0;\n    return (v / this.maxValue) * this.rotArcExtent;\n  };\n\n  get _type(): ObcGaugeRadialType {\n    return ObcGaugeRadialType.bar;\n  }\n\n  private get _barColor(): string {\n    if (this.portStarboard) {\n      if (this.value > 0) {\n        return 'var(--instrument-starboard-secondary-color)';\n      }\n      if (this.value < 0) {\n        return 'var(--instrument-port-secondary-color)';\n      }\n    }\n\n    if (this.priority !== Priority.enhanced) {\n      return 'var(--instrument-regular-tertiary-color)';\n    }\n\n    return 'var(--instrument-enhanced-tertiary-color)';\n  }\n\n  /**\n   * Vertical position of the readout, in % of the host. In the zoomed view the\n   * arc's lower edge shifts with `rotArcExtent`, so the position is interpolated\n   * between the narrow- and wide-arc anchors to keep a roughly constant gap\n   * between the arc and the readout. The static (unzoomed) arc uses a fixed\n   * position.\n   */\n  private get _readoutTopPercent(): number {\n    if (!this.zoomToFitArc) {\n      return 60;\n    }\n    const narrowTop = 70; // rotArcExtent ~10\n    const wideTop = 66; // rotArcExtent ~60\n    const extent = Math.min(60, Math.max(10, this.rotArcExtent));\n    return narrowTop + ((wideTop - narrowTop) * (extent - 10)) / (60 - 10);\n  }\n\n  override render() {\n    const barColor = this._barColor;\n\n    return html`\n      <obc-instrument-radial\n        .value=${this.value}\n        .setpoint=${this.setpoint}\n        .newSetpoint=${this.newSetpoint}\n        .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}\n        .setpointOverride=${this.setpointOverride}\n        .touching=${this.touching}\n        .autoAtSetpoint=${this.autoAtSetpoint}\n        .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}\n        .maxValue=${this.maxValue}\n        .minValue=${-this.maxValue}\n        .getAngle=${this.getAngle}\n        .needleColor=${this._needleColor}\n        .barColor=${barColor}\n        .showLabels=${this.showLabels}\n        .tickmarksInside=${this.tickmarksInside}\n        .tickmarkStyle=${this.tickmarkStyle}\n        .primaryTickmarkInterval=${this.primaryTickmarkInterval}\n        .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}\n        .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}\n        .type=${this._type}\n        .needleType=${this._type}\n        .advices=${this.advices}\n        .clipBottom=${50}\n        .zoomToFitArc=${this.zoomToFitArc}\n      >\n      </obc-instrument-radial>\n      ${this.hasReadout\n        ? html`<div class=\"readout\" style=\"top: ${this._readoutTopPercent}%\">\n            <obc-readout\n              .variant=${ReadoutVariant.enhanced}\n              .direction=${ReadoutDirection.vertical}\n              .hasSetpoint=${false}\n              .hasAdvice=${false}\n              .value=${this.value}\n              .fractionDigits=${0}\n              .valuePriority=${this.priority}\n              label=\"ROT\"\n              unit=\"DEG/min\"\n            ></obc-readout>\n          </div>`\n        : nothing}\n    `;\n  }\n\n  private get _needleColor(): string {\n    if (this.portStarboard) {\n      if (this.value > 0) {\n        return 'var(--instrument-starboard-primary-color)';\n      }\n      if (this.value < 0) {\n        return 'var(--instrument-port-primary-color)';\n      }\n      return 'var(--instrument-regular-secondary-color)';\n    }\n\n    if (this.priority !== Priority.enhanced) {\n      return 'var(--instrument-regular-secondary-color)';\n    }\n\n    return 'var(--instrument-enhanced-secondary-color)';\n  }\n\n  static override styles = css`\n    :host {\n      position: relative;\n      display: block;\n      height: 100%;\n    }\n\n    .readout {\n      position: absolute;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    /* Center the value over the label/unit row instead of right-aligning it. */\n    obc-readout::part(value-wrapper) {\n      justify-self: center;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-rot-sector': ObcRotSector;\n  }\n}\n"],"names":["ObcGaugeRadialType"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.55",
+  "version": "2.0.0-next.57",
   "type": "module",
   "repository": {
     "type": "git",

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

@@ -116,6 +116,17 @@ export interface TankReadoutItem {
 /**
  *
  *
+ * @slot badges - Custom badges to be displayed in the badge area.
+ * @slot tag - Text or element for the tank's tag/label.
+ * @slot readout - Replaces the entire readout content block.
+ * @slot max-value - Content for the capacity value.
+ * @slot unit - Content for the unit of measurement.
+ * @slot current-value - Content for the current level value.
+ * @slot rich - Content for additional detail rows.
+ * @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.
+ *
  * @ignition-base-height: 173px
  * @ignition-base-width: 168px
  * @ignition-center-horizontal

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

@@ -16,6 +16,18 @@
   height: 100%;
 }
 
+.container > .readout {
+  left: 50%;
+  width: auto;
+  height: auto;
+  transform: translate(-50%, -50%);
+}
+
+obc-readout::part(value-wrapper),
+obc-readout::part(meta-wrapper) {
+  justify-self: center;
+}
+
 :host {
   display: block;
   width: 100%;

package/src/navigation-instruments/compass-sector/compass-sector.stories.ts

@@ -133,6 +133,13 @@ export const WithSetpoint: Story = {
   },
 };
 
+export const WithReadout: Story = {
+  args: {
+    headingSetpoint: 311,
+    hasReadout: true,
+  },
+};
+
 export const TickmarksInside: Story = {
   args: {
     headingSetpoint: 311,

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

@@ -2,6 +2,8 @@ import {LitElement, PropertyValues, html, svg, unsafeCSS, nothing} from 'lit';
 import {property} from 'lit/decorators.js';
 import componentStyle from './compass-sector.css?inline';
 import '../watch/watch.js';
+import '../readout/readout.js';
+import {ReadoutDirection, ReadoutVariant} from '../readout/readout.js';
 import {Tickmark, TickmarkType, TickmarkStyle} from '../watch/tickmark.js';
 import {arrow, ArrowStyle} from '../compass/arrow.js';
 import {AdviceState, AngleAdvice, AngleAdviceRaw} from '../watch/advice.js';
@@ -155,6 +157,12 @@ export class ObcCompassSector extends LitElement {
   ];
   @property({type: Boolean}) tickmarksInside: boolean = false;
   @property({type: Boolean}) zoomToFitArc: boolean = false;
+  /**
+   * When `true`, shows a centered `<obc-readout>` under the arc displaying the
+   * heading (label `HDG`, unit `DEG`). The value color follows the HDG entry in
+   * `priorityElements`, matching the HDG arrow.
+   */
+  @property({type: Boolean}) hasReadout: boolean = false;
 
   private _headingSp = new SetpointBundle({
     angularWraparound: true,
@@ -396,6 +404,33 @@ export class ObcCompassSector extends LitElement {
     return selected.includes(element) ? this.priority : Priority.regular;
   }
 
+  /**
+   * Vertical placement of the readout as a percentage of the host height.
+   *
+   * With `zoomToFitArc` the arc is reframed by `computeZoomToFitArcFrame`, whose
+   * `radiusOffset`/`viewBox` depend on the arc's *absolute* orientation (which
+   * cardinal axes its bounding box crosses), not just its bend. The arc itself
+   * is always rotated back to the top, so it stays put on screen — but a
+   * frame-derived offset would swing wildly as `heading` rotates the bbox around
+   * the circle. So in zoom we use a fixed offset, which keeps the readout steady
+   * under the (stationary) arc regardless of heading.
+   *
+   * Without zoom the viewBox is the fixed, origin-symmetric 120° framing, so the
+   * geometry is orientation-independent: place the readout halfway down the inner
+   * radius from the watch center toward the arc's inner edge.
+   */
+  private get _readoutTopPercent(): number {
+    if (this.zoomToFitArc) {
+      return 70;
+    }
+    const [, vy, , vh] = this._cachedViewBox.split(' ').map(Number);
+    if (!vh || Number.isNaN(vy)) {
+      return 50;
+    }
+    const anchorY = -INNER_RADIUS * 0.5;
+    return Math.round(((anchorY - vy) / vh) * 1000) / 10;
+  }
+
   // ---------------------------------------------------------------------------
   // Render
   // ---------------------------------------------------------------------------
@@ -477,6 +512,23 @@ export class ObcCompassSector extends LitElement {
             rOff
           )}
         </svg>
+        ${this.hasReadout
+          ? html`<div class="readout" style="top: ${this._readoutTopPercent}%">
+              <obc-readout
+                .variant=${ReadoutVariant.enhanced}
+                .direction=${ReadoutDirection.vertical}
+                .hasSetpoint=${false}
+                .hasAdvice=${false}
+                .value=${this.heading}
+                .fractionDigits=${0}
+                .valuePriority=${this.priorityFor(
+                  CompassSectorPriorityElement.hdg
+                )}
+                label="HDG"
+                unit="DEG"
+              ></obc-readout>
+            </div>`
+          : nothing}
       </div>
     `;
   }

package/src/navigation-instruments/pitch/pitch.stories.ts

@@ -1,6 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
-import {ObcPitch} from './pitch.js';
+import {ObcPitch, ObcPitchType} from './pitch.js';
 import './pitch.js';
+import {Priority} from '../types.js';
 import {widthDecorator} from '../../storybook-util.js';
 import {sideVessels} from '../watch/vessels/storybook-helper.js';
 
@@ -23,6 +24,8 @@ const meta: Meta<typeof ObcPitch> = {
       control: 'select',
       options: sideVessels,
     },
+    type: {control: 'select', options: Object.values(ObcPitchType)},
+    priority: {control: 'select', options: Object.values(Priority)},
   },
   decorators: [widthDecorator],
 } satisfies Meta<ObcPitch>;
@@ -50,3 +53,22 @@ export const ZoomedInNarrow: Story = {
     maxPitchAdvice: 10,
   },
 };
+
+export const WithReadout: Story = {
+  args: {
+    hasReadout: true,
+  },
+};
+
+export const DualScale: Story = {
+  args: {
+    type: ObcPitchType.dualScale,
+    hasReadout: true,
+  },
+};
+
+export const Enhanced: Story = {
+  args: {
+    priority: Priority.enhanced,
+  },
+};