@oicl/openbridge-webcomponents 2.0.0-next.56 → 2.0.0-next.58

package/dist/navigation-instruments/rot-sector/rot-sector.d.ts

@@ -3,6 +3,7 @@ import { AdviceType } from '../watch/advice.js';
 import { Priority } from '../types.js';
 import { TickmarkStyle } from '../watch/tickmark.js';
 import '../../building-blocks/instrument-radial/instrument-radial.js';
+import '../readout/readout.js';
 export declare enum ObcGaugeRadialType {
     filled = "filled",
     bar = "bar",
@@ -120,11 +121,25 @@ export declare class ObcRotSector extends ObcRotSector_base {
     advices: GaugeRadialAdvice[];
     zoomToFitArc: boolean;
     rotArcExtent: number;
+    /**
+     * When `true`, shows a centered `<obc-readout>` (label `ROT`, unit `DEG/min`)
+     * under the arc with the current rate-of-turn value. Default `false`.
+     */
+    hasReadout: boolean;
     getAngle: (v: number) => number;
     get _type(): ObcGaugeRadialType;
     private get _barColor();
+    /**
+     * 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.
+     */
+    private get _readoutTopPercent();
     render(): import('lit-html').TemplateResult<1>;
     private get _needleColor();
+    static styles: import('lit').CSSResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/navigation-instruments/rot-sector/rot-sector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rot-sector.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/rot-sector/rot-sector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAErC,OAAO,8DAA8D,CAAC;AACtE,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAEnD,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,qBACa,YAAa,SAAQ,iBAAyB;IAC/B,KAAK,SAAK;IACV,QAAQ,SAAO;IAEzC;;;;;OAKG;IACH,IACI,UAAU,CAAC,CAAC,EAAE,MAAM,EAEvB;IACD,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED;;;;OAIG;IACH,IACI,aAAa,CAAC,CAAC,EAAE,MAAM,EAE1B;IACD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAC0B,UAAU,EAAE,OAAO,CAAS;IACvD,mDAAmD;IACxB,eAAe,EAAE,OAAO,CAAS;IAC5D;;;OAGG;IACuB,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC3E;;;OAGG;IACuB,yBAAyB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC7E;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,QAAQ,EAAE,QAAQ,CAAoB;IACrC,aAAa,EAAE,OAAO,CAAS;IAChC,aAAa,EAAE,aAAa,CAC9B;IACmB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClD,YAAY,EAAE,OAAO,CAAS;IAC/B,YAAY,EAAE,MAAM,CAAM;IAEpD,QAAQ,GAAI,GAAG,MAAM,KAAG,MAAM,CAG5B;IAEF,IAAI,KAAK,IAAI,kBAAkB,CAE9B;IAED,OAAO,KAAK,SAAS,GAepB;IAEQ,MAAM;IAkCf,OAAO,KAAK,YAAY,GAgBvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"rot-sector.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/rot-sector/rot-sector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAGnD,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAErC,OAAO,8DAA8D,CAAC;AACtE,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAEnD,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,qBACa,YAAa,SAAQ,iBAAyB;IAC/B,KAAK,SAAK;IACV,QAAQ,SAAO;IAEzC;;;;;OAKG;IACH,IACI,UAAU,CAAC,CAAC,EAAE,MAAM,EAEvB;IACD,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED;;;;OAIG;IACH,IACI,aAAa,CAAC,CAAC,EAAE,MAAM,EAE1B;IACD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAC0B,UAAU,EAAE,OAAO,CAAS;IACvD,mDAAmD;IACxB,eAAe,EAAE,OAAO,CAAS;IAC5D;;;OAGG;IACuB,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC3E;;;OAGG;IACuB,yBAAyB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC7E;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,QAAQ,EAAE,QAAQ,CAAoB;IACrC,aAAa,EAAE,OAAO,CAAS;IAChC,aAAa,EAAE,aAAa,CAC9B;IACmB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClD,YAAY,EAAE,OAAO,CAAS;IAC/B,YAAY,EAAE,MAAM,CAAM;IACpD;;;OAGG;IACwB,UAAU,EAAE,OAAO,CAAS;IAEvD,QAAQ,GAAI,GAAG,MAAM,KAAG,MAAM,CAG5B;IAEF,IAAI,KAAK,IAAI,kBAAkB,CAE9B;IAED,OAAO,KAAK,SAAS,GAepB;IAED;;;;;;OAMG;IACH,OAAO,KAAK,kBAAkB,GAQ7B;IAEQ,MAAM;IAiDf,OAAO,KAAK,YAAY,GAgBvB;IAED,OAAgB,MAAM,0BAiBpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

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/dist/navigation-instruments/watch/tickmark.d.ts

@@ -19,7 +19,7 @@ export declare enum TickmarkStyle {
     enhanced = "enhanced"
 }
 export declare function tickmarkColor(style: TickmarkStyle, tickmarkType?: TickmarkType): string;
-export declare function tickmark(angle: number, { size, style, scale, text, inside, textRadius, rotation, maxDigits, color, radiusOffset, }: {
+export declare function tickmark(angle: number, { size, style, scale, text, inside, textRadius, rotation, maxDigits, color, radiusOffset, endLabelsMaxMin, }: {
     size: TickmarkType;
     style: TickmarkStyle;
     scale: number;
@@ -30,5 +30,6 @@ export declare function tickmark(angle: number, { size, style, scale, text, insi
     maxDigits: number;
     color?: string;
     radiusOffset?: number;
+    endLabelsMaxMin?: boolean;
 }): SVGTemplateResult | SVGTemplateResult[];
 //# sourceMappingURL=tickmark.d.ts.map

package/dist/navigation-instruments/watch/tickmark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tickmark.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/tickmark.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAM,MAAM,KAAK,CAAC;AAE3C,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,oBAAY,YAAY;IACtB,aAAa,kBAAkB;IAC/B,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,wBAAgB,aAAa,CAC3B,KAAK,EAAE,aAAa,EACpB,YAAY,CAAC,EAAE,YAAY,GAC1B,MAAM,CASR;AAED,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,EACb,EACE,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,MAAM,EACN,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAgB,GACjB,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GACA,iBAAiB,GAAG,iBAAiB,EAAE,CAmEzC"}
+{"version":3,"file":"tickmark.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/tickmark.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAM,MAAM,KAAK,CAAC;AAE3C,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,oBAAY,YAAY;IACtB,aAAa,kBAAkB;IAC/B,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,wBAAgB,aAAa,CAC3B,KAAK,EAAE,aAAa,EACpB,YAAY,CAAC,EAAE,YAAY,GAC1B,MAAM,CASR;AAED,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,EACb,EACE,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,MAAM,EACN,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAgB,EAChB,eAAuB,GACxB,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GACA,iBAAiB,GAAG,iBAAiB,EAAE,CAwEzC"}

package/dist/navigation-instruments/watch/tickmark.js

@@ -34,7 +34,8 @@ function tickmark(angle, {
   rotation,
   maxDigits,
   color,
-  radiusOffset = 0
+  radiusOffset = 0,
+  endLabelsMaxMin = false
 }) {
   if (scale === Infinity || scale < 0) {
     throw new Error("Tick scale is not valid");
@@ -60,7 +61,9 @@ function tickmark(angle, {
     innerRadius = 328 / 2 + rOff;
     outerRadius = 336 / 2 + rOff;
   } else {
-    return [textSvg(text ?? "", angle, inside, scale, textRadius)];
+    return [
+      textSvg(text ?? "", { angle, inside, scale, textRadius, endLabelsMaxMin })
+    ];
   }
   if (inside) {
     const outerRingRadius = 368 / 2 + rOff;
@@ -79,7 +82,10 @@ function tickmark(angle, {
   const tick = svg`<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke=${colorName} stroke-width=${strokeWidth} vector-effect="non-scaling-stroke"/>`;
   if (text) {
     if (rotation === void 0) {
-      return [tick, textSvg(text, angle, inside, scale, textRadius)];
+      return [
+        tick,
+        textSvg(text, { angle, inside, scale, textRadius, endLabelsMaxMin })
+      ];
     } else {
       const newRadius = textRadius + (4 / scale + 5) * (inside ? -1 : 1) * maxDigits / 2;
       const textX = Math.sin(rad) * newRadius;
@@ -92,7 +98,21 @@ function tickmark(angle, {
   }
   return tick;
 }
-function textSvg(text, angle, inside, scale, textRadius) {
+function textSvg(text, {
+  angle,
+  inside,
+  scale,
+  textRadius,
+  endLabelsMaxMin = false
+}) {
+  const radHoriz = angle * Math.PI / 180;
+  if (endLabelsMaxMin && Math.abs(Math.cos(radHoriz)) < 1e-6) {
+    const sin = Math.sin(radHoriz);
+    const inward = inside ? (6 + (text.length - 1) * 2.5) / scale : 14 / scale;
+    const x = sin * (textRadius - inward);
+    const y = inside ? -(6 / scale) : 12 / scale;
+    return svg`<text x=${x} y=${y} class="label bottom ${inside ? "inside" : ""}">${text}</text>`;
+  }
   let positionClass;
   if (angle === 0) {
     positionClass = "top";

package/dist/navigation-instruments/watch/tickmark.js.map

@@ -1 +1 @@
-{"version":3,"file":"tickmark.js","sources":["../../../src/navigation-instruments/watch/tickmark.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\n\nexport interface Tickmark {\n  angle: number;\n  type: TickmarkType;\n  text?: string;\n  color?: string;\n}\n\nexport enum TickmarkType {\n  zeroLineThick = 'zeroLineThick',\n  zeroLine = 'zeroLine',\n  main = 'main',\n  primary = 'primary',\n  secondary = 'secondary',\n  tertiary = 'tertiary',\n  textOnly = 'textOnly',\n}\n\nexport enum TickmarkStyle {\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport function tickmarkColor(\n  style: TickmarkStyle,\n  tickmarkType?: TickmarkType\n): string {\n  if (style === TickmarkStyle.regular) {\n    return 'var(--instrument-tick-mark-tertiary-color)';\n  } else {\n    if (tickmarkType === TickmarkType.tertiary) {\n      return 'var(--instrument-tick-mark-secondary-color)';\n    }\n    return 'var(--instrument-tick-mark-primary-color)';\n  }\n}\n\nexport function tickmark(\n  angle: number,\n  {\n    size,\n    style,\n    scale,\n    text,\n    inside,\n    textRadius,\n    rotation,\n    maxDigits,\n    color,\n    radiusOffset = 0,\n  }: {\n    size: TickmarkType;\n    style: TickmarkStyle;\n    scale: number;\n    text?: string;\n    inside: boolean;\n    textRadius: number;\n    rotation?: number;\n    maxDigits: number;\n    color?: string;\n    radiusOffset?: number;\n  }\n): SVGTemplateResult | SVGTemplateResult[] {\n  // check if scale is not infinite\n  if (scale === Infinity || scale < 0) {\n    throw new Error('Tick scale is not valid');\n  }\n  const rOff = radiusOffset;\n  let innerRadius: number;\n  let outerRadius: number;\n  textRadius = textRadius + (3 / scale + 3) * (inside ? -1 : 1);\n  const rad = (angle * Math.PI) / 180;\n  if (size === TickmarkType.primary) {\n    innerRadius = 328 / 2 + rOff;\n    outerRadius = 368 / 2 + rOff;\n  } else if (size === TickmarkType.secondary) {\n    innerRadius = 328 / 2 + rOff;\n    outerRadius = 344 / 2 + rOff;\n  } else if (size === TickmarkType.main || size === TickmarkType.zeroLine) {\n    innerRadius = 320 / 2 + rOff;\n    outerRadius = 368 / 2 + rOff;\n  } else if (size === TickmarkType.zeroLineThick) {\n    innerRadius = 224 / 2 + rOff;\n    outerRadius = 368 / 2 + rOff;\n  } else if (size === TickmarkType.tertiary) {\n    innerRadius = 328 / 2 + rOff;\n    outerRadius = 336 / 2 + rOff;\n  } else {\n    return [textSvg(text ?? '', angle, inside, scale, textRadius)];\n  }\n\n  // When inside, anchor ticks at the outer ring edge and grow inward,\n  // preserving the same gap from the ring edge as the outside case.\n  // Outside: gap = innerRadius - RING2 (320/2). E.g. secondary: 164 - 160 = 4px gap.\n  // Inside: mirror that gap from the outer ring (368/2).\n  if (inside) {\n    const outerRingRadius = 368 / 2 + rOff;\n    const ring2Radius = 320 / 2 + rOff;\n    const tickLength = outerRadius - innerRadius;\n    const gapFromRingEdge = Math.max(0, innerRadius - ring2Radius);\n    outerRadius = outerRingRadius - gapFromRingEdge;\n    innerRadius = outerRadius - tickLength;\n  }\n  const colorName = color ?? tickmarkColor(style, size);\n\n  const x1 = Math.sin(rad) * innerRadius;\n  const y1 = -Math.cos(rad) * innerRadius;\n  const x2 = Math.sin(rad) * outerRadius;\n  const y2 = -Math.cos(rad) * outerRadius;\n  const strokeWidth =\n    size === TickmarkType.zeroLine || size === TickmarkType.zeroLineThick\n      ? 4\n      : 1;\n  const tick = svg`<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke=${colorName} stroke-width=${strokeWidth} vector-effect=\"non-scaling-stroke\"/>`;\n  if (text) {\n    if (rotation === undefined) {\n      return [tick, textSvg(text, angle, inside, scale, textRadius)];\n    } else {\n      const newRadius =\n        textRadius + ((4 / scale + 5) * (inside ? -1 : 1) * maxDigits) / 2;\n      const textX = Math.sin(rad) * newRadius;\n      const textY = -Math.cos(rad) * newRadius;\n      return [\n        tick,\n        svg`<text x=${textX} y=${textY} class=\"label rotate ${inside ? 'inside' : ''}\" transform=\"rotate(${-rotation})\" transform-origin=\"${textX} ${textY}\">${text}</text>`,\n      ];\n    }\n  }\n  return tick;\n}\n\nfunction textSvg(\n  text: string,\n  angle: number,\n  inside: boolean,\n  scale: number,\n  textRadius: number\n) {\n  let positionClass;\n  if (angle === 0) {\n    positionClass = 'top';\n  } else if (angle < 180 && angle > 0) {\n    positionClass = 'right';\n  } else if (angle === 180) {\n    positionClass = 'bottom';\n  } else {\n    positionClass = 'left';\n  }\n  const rad = (angle * Math.PI) / 180;\n  const insideGain = inside ? -1 : 1;\n  const yOffset = (7 / scale) * insideGain;\n  const xOffset = (6 / scale) * insideGain;\n\n  let textX = Math.sin(rad) * (textRadius + xOffset);\n  if (angle > 180) {\n    textX += (4 / scale) * insideGain;\n  } else if (angle < 180 && angle > 0) {\n    textX -= (4 / scale) * insideGain;\n  }\n  const textY = -Math.cos(rad) * (textRadius + yOffset);\n  return svg`<text x=${textX} y=${textY} class=\"label ${positionClass} ${inside ? 'inside' : ''}\">${text}</text>`;\n}\n"],"names":["TickmarkType","TickmarkStyle"],"mappings":"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"}
+{"version":3,"file":"tickmark.js","sources":["../../../src/navigation-instruments/watch/tickmark.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\n\nexport interface Tickmark {\n  angle: number;\n  type: TickmarkType;\n  text?: string;\n  color?: string;\n}\n\nexport enum TickmarkType {\n  zeroLineThick = 'zeroLineThick',\n  zeroLine = 'zeroLine',\n  main = 'main',\n  primary = 'primary',\n  secondary = 'secondary',\n  tertiary = 'tertiary',\n  textOnly = 'textOnly',\n}\n\nexport enum TickmarkStyle {\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport function tickmarkColor(\n  style: TickmarkStyle,\n  tickmarkType?: TickmarkType\n): string {\n  if (style === TickmarkStyle.regular) {\n    return 'var(--instrument-tick-mark-tertiary-color)';\n  } else {\n    if (tickmarkType === TickmarkType.tertiary) {\n      return 'var(--instrument-tick-mark-secondary-color)';\n    }\n    return 'var(--instrument-tick-mark-primary-color)';\n  }\n}\n\nexport function tickmark(\n  angle: number,\n  {\n    size,\n    style,\n    scale,\n    text,\n    inside,\n    textRadius,\n    rotation,\n    maxDigits,\n    color,\n    radiusOffset = 0,\n    endLabelsMaxMin = false,\n  }: {\n    size: TickmarkType;\n    style: TickmarkStyle;\n    scale: number;\n    text?: string;\n    inside: boolean;\n    textRadius: number;\n    rotation?: number;\n    maxDigits: number;\n    color?: string;\n    radiusOffset?: number;\n    endLabelsMaxMin?: boolean;\n  }\n): SVGTemplateResult | SVGTemplateResult[] {\n  // check if scale is not infinite\n  if (scale === Infinity || scale < 0) {\n    throw new Error('Tick scale is not valid');\n  }\n  const rOff = radiusOffset;\n  let innerRadius: number;\n  let outerRadius: number;\n  textRadius = textRadius + (3 / scale + 3) * (inside ? -1 : 1);\n  const rad = (angle * Math.PI) / 180;\n  if (size === TickmarkType.primary) {\n    innerRadius = 328 / 2 + rOff;\n    outerRadius = 368 / 2 + rOff;\n  } else if (size === TickmarkType.secondary) {\n    innerRadius = 328 / 2 + rOff;\n    outerRadius = 344 / 2 + rOff;\n  } else if (size === TickmarkType.main || size === TickmarkType.zeroLine) {\n    innerRadius = 320 / 2 + rOff;\n    outerRadius = 368 / 2 + rOff;\n  } else if (size === TickmarkType.zeroLineThick) {\n    innerRadius = 224 / 2 + rOff;\n    outerRadius = 368 / 2 + rOff;\n  } else if (size === TickmarkType.tertiary) {\n    innerRadius = 328 / 2 + rOff;\n    outerRadius = 336 / 2 + rOff;\n  } else {\n    return [\n      textSvg(text ?? '', {angle, inside, scale, textRadius, endLabelsMaxMin}),\n    ];\n  }\n\n  // When inside, anchor ticks at the outer ring edge and grow inward,\n  // preserving the same gap from the ring edge as the outside case.\n  // Outside: gap = innerRadius - RING2 (320/2). E.g. secondary: 164 - 160 = 4px gap.\n  // Inside: mirror that gap from the outer ring (368/2).\n  if (inside) {\n    const outerRingRadius = 368 / 2 + rOff;\n    const ring2Radius = 320 / 2 + rOff;\n    const tickLength = outerRadius - innerRadius;\n    const gapFromRingEdge = Math.max(0, innerRadius - ring2Radius);\n    outerRadius = outerRingRadius - gapFromRingEdge;\n    innerRadius = outerRadius - tickLength;\n  }\n  const colorName = color ?? tickmarkColor(style, size);\n\n  const x1 = Math.sin(rad) * innerRadius;\n  const y1 = -Math.cos(rad) * innerRadius;\n  const x2 = Math.sin(rad) * outerRadius;\n  const y2 = -Math.cos(rad) * outerRadius;\n  const strokeWidth =\n    size === TickmarkType.zeroLine || size === TickmarkType.zeroLineThick\n      ? 4\n      : 1;\n  const tick = svg`<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke=${colorName} stroke-width=${strokeWidth} vector-effect=\"non-scaling-stroke\"/>`;\n  if (text) {\n    if (rotation === undefined) {\n      return [\n        tick,\n        textSvg(text, {angle, inside, scale, textRadius, endLabelsMaxMin}),\n      ];\n    } else {\n      const newRadius =\n        textRadius + ((4 / scale + 5) * (inside ? -1 : 1) * maxDigits) / 2;\n      const textX = Math.sin(rad) * newRadius;\n      const textY = -Math.cos(rad) * newRadius;\n      return [\n        tick,\n        svg`<text x=${textX} y=${textY} class=\"label rotate ${inside ? 'inside' : ''}\" transform=\"rotate(${-rotation})\" transform-origin=\"${textX} ${textY}\">${text}</text>`,\n      ];\n    }\n  }\n  return tick;\n}\n\nfunction textSvg(\n  text: string,\n  {\n    angle,\n    inside,\n    scale,\n    textRadius,\n    endLabelsMaxMin = false,\n  }: {\n    angle: number;\n    inside: boolean;\n    scale: number;\n    textRadius: number;\n    endLabelsMaxMin?: boolean;\n  }\n) {\n  const radHoriz = (angle * Math.PI) / 180;\n  // \"Max-min\" placement: horizontal end labels (±90°) sit off the dead-center\n  // tick (below outside / lifted inside), inset inward by label width.\n  if (endLabelsMaxMin && Math.abs(Math.cos(radHoriz)) < 1e-6) {\n    const sin = Math.sin(radHoriz);\n    const inward = inside ? (6 + (text.length - 1) * 2.5) / scale : 14 / scale;\n    const x = sin * (textRadius - inward);\n    const y = inside ? -(6 / scale) : 12 / scale;\n    return svg`<text x=${x} y=${y} class=\"label bottom ${inside ? 'inside' : ''}\">${text}</text>`;\n  }\n\n  let positionClass;\n  if (angle === 0) {\n    positionClass = 'top';\n  } else if (angle < 180 && angle > 0) {\n    positionClass = 'right';\n  } else if (angle === 180) {\n    positionClass = 'bottom';\n  } else {\n    positionClass = 'left';\n  }\n  const rad = (angle * Math.PI) / 180;\n  const insideGain = inside ? -1 : 1;\n  const yOffset = (7 / scale) * insideGain;\n  const xOffset = (6 / scale) * insideGain;\n\n  let textX = Math.sin(rad) * (textRadius + xOffset);\n  if (angle > 180) {\n    textX += (4 / scale) * insideGain;\n  } else if (angle < 180 && angle > 0) {\n    textX -= (4 / scale) * insideGain;\n  }\n  const textY = -Math.cos(rad) * (textRadius + yOffset);\n  return svg`<text x=${textX} y=${textY} class=\"label ${positionClass} ${inside ? 'inside' : ''}\">${text}</text>`;\n}\n"],"names":["TickmarkType","TickmarkStyle"],"mappings":"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"}

package/dist/navigation-instruments/watch/watch.d.ts

@@ -100,7 +100,7 @@ export declare function innerRingRadiusFor(type: WatchCircleType): number;
  * @property {number|undefined} rateOfTurnDegreesPerMinute - Measured rate of turn in degrees per minute (the maritime/AIS convention, see ES-TRIN 2025/1 Art. 3.02 and ITU-R M.1371). Sign controls direction (positive = starboard/clockwise). When defined, this drives both the dot animation (multiplied by `rotDotAnimationFactor`) and the port/starboard direction sign.
  * @property {number} rotDotAnimationFactor - Visual amplification factor applied only to the spinning-dot animation (not to bar extent). Default `18` keeps the legacy visual feel (≈1 rpm at 20°/min).
  * @property {number} rotationsPerMinute - **Deprecated.** Spin speed of the ROT dot ring in rotations per minute. Sign controls direction (positive = clockwise). Use `rateOfTurnDegreesPerMinute` instead.
- * @property {ZoomToFitArcFrame|undefined} arcFrame - Pre-computed zoom-to-fit arc frame. When set, the watch skips its own `computeZoomToFitArcFrame()` call and uses these values directly. Consumer instruments (e.g. rudder, instrument-radial) should compute the frame once and pass it here to avoid redundant computation.
+ * @property {ZoomToFitArcFrame|undefined} arcFrame - Pre-computed zoom-to-fit arc frame. When set, the watch skips its own `computeZoomToFitArcFrame()` call and uses these values directly. Consumer instruments (e.g. rudder, instrument-radial) should compute the frame once and pass it here to avoid redundant computation. If you pass `arcFrame`, you own keeping it in sync with `areas` / `watchCircleType` — obc-watch will NOT recompute it, so a stale frame renders stale geometry.
  */
 export declare class ObcWatch extends LitElement {
     private _setpointId;
@@ -147,8 +147,21 @@ export declare class ObcWatch extends LitElement {
     currentSymbolRadius: number | null;
     currentColor: string | undefined;
     starboardPortIndicator: boolean;
+    /** Top clip, % of height. Ignored when `zoomToFitArc` is true. */
     clipTop: number;
+    /** Bottom clip, % of height. Ignored when `zoomToFitArc` is true. */
     clipBottom: number;
+    /** Left clip, % of width — horizontal counterpart of clipTop/bottom (90° sectors). Ignored when `zoomToFitArc`. */
+    clipLeft: number;
+    /** Right clip, % of width — horizontal counterpart of clipTop/bottom (90° sectors). Ignored when `zoomToFitArc`. */
+    clipRight: number;
+    /**
+     * Place the horizontal end labels (±90°, e.g. min/max) below the tick instead
+     * of beside it. This is the "Max-min" label placement from the radial label
+     * model (External / Internal / Max-min) — see PR #903 / design discussion.
+     * Currently only used by the 180° sector of `obc-gauge-radial`.
+     */
+    endLabelsMaxMin: boolean;
     scaleWindIcon: number;
     rotation: number | undefined;
     zoomToFitArc: boolean;
@@ -186,6 +199,15 @@ export declare class ObcWatch extends LitElement {
     updated(changed: PropertyValues): void;
     private get innerRingRadius();
     private _rOff;
+    /**
+     * Radius for a dial-band edge under zoom: additive (`base + _rOff`), keeping
+     * band thickness constant in SVG units. INVARIANT: every band-edge radius
+     * (rings, value arc, bars, needles, inside-label `textRadius`) must go through
+     * this — mixing additive and multiplicative offsets misaligns ticks, labels,
+     * advice masks and arcs. The proportional experiments were removed for this
+     * reason (PR #903).
+     */
+    private _bandRadius;
     private watchCircle;
     private _renderTickFadeDefs;
     private renderCrosshair;

package/dist/navigation-instruments/watch/watch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"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"}

package/dist/navigation-instruments/watch/watch.js

@@ -88,6 +88,9 @@ let ObcWatch = class extends LitElement {
     this.starboardPortIndicator = false;
     this.clipTop = 0;
     this.clipBottom = 0;
+    this.clipLeft = 0;
+    this.clipRight = 0;
+    this.endLabelsMaxMin = false;
     this.scaleWindIcon = 1;
     this.zoomToFitArc = false;
     this.tickFadeAngle = 0;
@@ -161,6 +164,17 @@ let ObcWatch = class extends LitElement {
   get innerRingRadius() {
     return innerRingRadiusFor(this.watchCircleType);
   }
+  /**
+   * Radius for a dial-band edge under zoom: additive (`base + _rOff`), keeping
+   * band thickness constant in SVG units. INVARIANT: every band-edge radius
+   * (rings, value arc, bars, needles, inside-label `textRadius`) must go through
+   * this — mixing additive and multiplicative offsets misaligns ticks, labels,
+   * advice masks and arcs. The proportional experiments were removed for this
+   * reason (PR #903).
+   */
+  _bandRadius(base) {
+    return base + this._rOff;
+  }
   watchCircle() {
     const rings = [];
     if (this.state !== InstrumentState.off) {
@@ -168,14 +182,16 @@ let ObcWatch = class extends LitElement {
         <circle
           cx="0"
           cy="0"
-          r="${172 + this._rOff}"
+          r="${this._bandRadius(172)}"
           stroke="var(--instrument-frame-primary-color)"
           fill="none"
           stroke-width="24"
         />`);
       if (this.watchCircleType !== "single") {
-        const r1 = RING2_RADIUS + this._rOff;
-        const r2 = (this.watchCircleType === "doubleThin" ? RING3B_RADIUS : RING3_RADIUS) + this._rOff;
+        const r1 = this._bandRadius(RING2_RADIUS);
+        const r2 = this._bandRadius(
+          this.watchCircleType === "doubleThin" ? RING3B_RADIUS : RING3_RADIUS
+        );
         const r = (r1 + r2) / 2;
         const strokeWidth = r1 - r2;
         rings.push(
@@ -187,8 +203,8 @@ let ObcWatch = class extends LitElement {
         );
       }
       if (this.watchCircleType === "triple") {
-        const r1 = RING3_RADIUS + this._rOff;
-        const r2 = RING4_RADIUS + this._rOff;
+        const r1 = this._bandRadius(RING3_RADIUS);
+        const r2 = this._bandRadius(RING4_RADIUS);
         const r = (r1 + r2) / 2;
         const strokeWidth = r1 - r2;
         rings.push(
@@ -203,8 +219,8 @@ let ObcWatch = class extends LitElement {
         const svgPath = roundedArch({
           startAngle: area.startAngle,
           endAngle: area.endAngle,
-          R: OUTER_RING_RADIUS + this._rOff,
-          r: this.innerRingRadius + this._rOff,
+          R: this._bandRadius(OUTER_RING_RADIUS),
+          r: this._bandRadius(this.innerRingRadius),
           roundOutsideCut: area.roundOutsideCut,
           roundInsideCut: area.roundInsideCut
         });
@@ -234,7 +250,7 @@ let ObcWatch = class extends LitElement {
       if (this.state !== InstrumentState.off) {
         result.push(
           circle("outerRing", {
-            radius: OUTER_RING_RADIUS + this._rOff,
+            radius: this._bandRadius(OUTER_RING_RADIUS),
             strokeWidth: 1,
             strokeColor: "var(--instrument-frame-tertiary-color)",
             strokePosition: "center",
@@ -243,7 +259,7 @@ let ObcWatch = class extends LitElement {
         );
         result.push(svg`
           ${circle("innerRing", {
-          radius: this.innerRingRadius + this._rOff,
+          radius: this._bandRadius(this.innerRingRadius),
           strokeWidth: 1,
           strokeColor: "var(--instrument-frame-tertiary-color)",
           strokePosition: "center",
@@ -253,7 +269,7 @@ let ObcWatch = class extends LitElement {
       } else {
         result.push(svg`
           ${circle("innerRing", {
-          radius: OUTER_RING_RADIUS + this._rOff,
+          radius: this._bandRadius(OUTER_RING_RADIUS),
           strokeWidth: 1,
           strokeColor: "var(--instrument-frame-tertiary-color)",
           strokePosition: "center",
@@ -281,7 +297,7 @@ let ObcWatch = class extends LitElement {
       const largeArc = b - a > 180 ? 1 : 0;
       return `M 0 0 L ${x1} ${y1} A ${R} ${R} 0 ${largeArc} 1 ${x2} ${y2} Z`;
     };
-    const Rm = (OUTER_RING_RADIUS + this.innerRingRadius) / 2 + this._rOff;
+    const Rm = (this._bandRadius(OUTER_RING_RADIUS) + this._bandRadius(this.innerRingRadius)) / 2;
     const gx = (deg) => Rm * Math.sin(toRad(deg));
     const gy = (deg) => -Rm * Math.cos(toRad(deg));
     return svg`
@@ -375,8 +391,8 @@ let ObcWatch = class extends LitElement {
       const startAngle = Math.min(bar.startAngle, bar.endAngle);
       const endAngle = Math.max(bar.startAngle, bar.endAngle);
       const arc = roundedArch({
-        r: RING3_RADIUS + this._rOff,
-        R: RING2_RADIUS + this._rOff,
+        r: this._bandRadius(RING3_RADIUS),
+        R: this._bandRadius(RING2_RADIUS),
         startAngle,
         endAngle,
         roundInsideCut: false,
@@ -417,7 +433,7 @@ let ObcWatch = class extends LitElement {
       return svg`
         <rect 
           transform="rotate(${needle.angle})" 
-          x="-4" y="${-(RING2_RADIUS + this._rOff)}" width="8" height="48" rx="4" 
+          x="-4" y="${-this._bandRadius(RING2_RADIUS)}" width="8" height="48" rx="4"
           fill=${needle.fillColor} 
           stroke=${needle.strokeColor}
           stroke-width="1"
@@ -478,15 +494,17 @@ let ObcWatch = class extends LitElement {
       viewBox = frame.viewBox;
     } else {
       this._rOff = 0;
-      width = (176 + this.getPadding()) * 2;
-      height = width * (1 - this.clipTop / 100 - this.clipBottom / 100);
-      const top = -width / 2 + width * this.clipTop / 100;
-      viewBox = `-${width / 2} ${top} ${width} ${height}`;
+      const full = (176 + this.getPadding()) * 2;
+      width = full * (1 - this.clipLeft / 100 - this.clipRight / 100);
+      height = full * (1 - this.clipTop / 100 - this.clipBottom / 100);
+      const left = -full / 2 + full * this.clipLeft / 100;
+      const top = -full / 2 + full * this.clipTop / 100;
+      viewBox = `${left} ${top} ${width} ${height}`;
     }
     const rOff = this._rOff;
     const scale = this.getScale({ width, height });
     const angleSetpoint = this.renderSetpoint();
-    const textRadius = (this.tickmarksInside ? this.innerRingRadius : OUTER_RING_RADIUS) + rOff;
+    const textRadius = this.tickmarksInside ? this._bandRadius(this.innerRingRadius) : this._bandRadius(OUTER_RING_RADIUS);
     const maxDigits = Math.max(
       ...this.tickmarks.map((t) => t.text?.length ?? 0)
     );
@@ -501,7 +519,8 @@ let ObcWatch = class extends LitElement {
         rotation: this.rotation,
         maxDigits,
         color: t.color,
-        radiusOffset: rOff
+        radiusOffset: rOff,
+        endLabelsMaxMin: this.endLabelsMaxMin
       })
     );
     const advices = this.advices ? this.advices.map((a) => renderAdvice(a, rOff)) : nothing;
@@ -866,6 +885,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], ObcWatch.prototype, "clipBottom", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatch.prototype, "clipLeft", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatch.prototype, "clipRight", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcWatch.prototype, "endLabelsMaxMin", 2);
 __decorateClass([
   property({ type: Number })
 ], ObcWatch.prototype, "scaleWindIcon", 2);