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

package/dist/building-blocks/instrument-radial/instrument-radial.js.map

@@ -1 +1 @@
-{"version":3,"file":"instrument-radial.js","sources":["../../../src/building-blocks/instrument-radial/instrument-radial.ts"],"sourcesContent":["import {css, LitElement, html, svg, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  AdviceState,\n  AdviceType,\n  AngleAdviceRaw,\n} from '../../navigation-instruments/watch/advice.js';\nimport {WatchCircleType} from '../../navigation-instruments/watch/watch.js';\nimport {Tickmark} from '../../navigation-instruments/watch/tickmark.js';\nimport {TickmarkType} from '../../navigation-instruments/watch/tickmark.js';\nimport {TickmarkStyle} from '../../navigation-instruments/watch/tickmark.js';\nimport {InstrumentState, Priority} from '../../navigation-instruments/types.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport {\n  OUTER_RING_RADIUS,\n  innerRingRadiusFor,\n} from '../../navigation-instruments/watch/watch.js';\nimport {\n  computeZoomToFitArcFrame,\n  type ZoomToFitArcFrame,\n} from '../../svghelpers/arc-frame.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\nfunction rangeIncludesZero(minValue: number, maxValue: number): boolean {\n  return minValue <= 0 && maxValue >= 0;\n}\n\nfunction strongerTickmarkType(\n  existing: TickmarkType,\n  candidate: TickmarkType\n): TickmarkType {\n  const priority: Record<TickmarkType, number> = {\n    [TickmarkType.zeroLineThick]: 6,\n    [TickmarkType.zeroLine]: 5,\n    [TickmarkType.main]: 4,\n    [TickmarkType.primary]: 3,\n    [TickmarkType.secondary]: 2,\n    [TickmarkType.tertiary]: 1,\n    [TickmarkType.textOnly]: 0,\n  };\n\n  return priority[candidate] > priority[existing] ? candidate : existing;\n}\n\n@customElement('obc-instrument-radial')\nexport class ObcInstrumentRadial extends SetpointMixin(LitElement) {\n  // setpoint, newSetpoint, atSetpoint, touching, autoAtSetpoint,\n  // autoAtSetpointDeadband, setpointAtZeroDeadband, setpointOverride\n  // — all inherited from SetpointMixin\n\n  @property({type: String}) state: InstrumentState = InstrumentState.active;\n  @property({type: String}) priority: Priority = Priority.regular;\n\n  @property({type: Number}) value = 0;\n  @property({type: Number}) maxValue = 100;\n  @property({type: Number}) minValue = 0;\n  @property({attribute: false}) getAngle!: (v: number) => number;\n  @property({type: String}) needleColor: string | undefined;\n  @property({type: String}) barColor: string | undefined;\n  @property({type: Boolean}) showLabels: 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}) type: ObcGaugeRadialType =\n    ObcGaugeRadialType.filled;\n  @property({type: String}) needleType: ObcGaugeRadialType =\n    ObcGaugeRadialType.filled;\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n  @property({type: String}) tickmarkStyle: TickmarkStyle =\n    TickmarkStyle.regular;\n  @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n  @property({type: Number}) clipTop: number = 0; // in percent of height\n  @property({type: Number}) clipBottom: number = 0; // in percent of height\n  @property({type: Boolean}) zoomToFitArc: boolean = false;\n\n  private _radiusOffset = 0;\n  private _arcFrame: ZoomToFitArcFrame | undefined;\n\n  private get clampedValue(): number {\n    const lowerBound = Math.min(this.minValue, this.maxValue);\n    const upperBound = Math.max(this.minValue, this.maxValue);\n    return Math.max(lowerBound, Math.min(this.value, upperBound));\n  }\n\n  private get minAngle(): number {\n    return this.getAngle(this.minValue);\n  }\n\n  private get maxAngle(): number {\n    return this.getAngle(this.maxValue);\n  }\n\n  private get _derivedNeedleColor(): string {\n    if (\n      this.state === InstrumentState.loading ||\n      this.state === InstrumentState.off\n    ) {\n      return 'transparent';\n    }\n    return this.priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-secondary-color)'\n      : 'var(--instrument-regular-secondary-color)';\n  }\n\n  private get _derivedBarColor(): string {\n    if (\n      this.state === InstrumentState.loading ||\n      this.state === InstrumentState.off\n    ) {\n      return 'transparent';\n    }\n    if (this.type === ObcGaugeRadialType.filled) {\n      return this.priority === Priority.enhanced\n        ? 'var(--instrument-enhanced-secondary-color)'\n        : 'var(--instrument-regular-secondary-color)';\n    }\n    return this.priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-tertiary-color)'\n      : 'var(--instrument-regular-tertiary-color)';\n  }\n\n  override render() {\n    const barColor = this.barColor ?? this._derivedBarColor;\n    const barStartValue = Math.max(this.minValue, Math.min(0, this.maxValue));\n    const value = this.clampedValue;\n    const setpointAngle =\n      this.setpoint !== undefined ? this.getAngle(this.setpoint) : undefined;\n    const newSetpointAngle =\n      this.newSetpoint !== undefined\n        ? this.getAngle(this.newSetpoint)\n        : undefined;\n\n    const barAreas =\n      this.type === ObcGaugeRadialType.needle\n        ? []\n        : [\n            {\n              startAngle: this.getAngle(barStartValue),\n              endAngle: this.getAngle(value),\n              fillColor: barColor,\n            },\n          ];\n\n    const areas = [\n      {\n        startAngle: this.minAngle,\n        endAngle: this.maxAngle,\n        roundInsideCut: true,\n        roundOutsideCut: true,\n      },\n    ];\n\n    const watchCircleType =\n      this.type === ObcGaugeRadialType.needle\n        ? WatchCircleType.single\n        : WatchCircleType.double;\n\n    let viewBox: string;\n    if (this.zoomToFitArc) {\n      const ext = 48;\n      const targetSize = (176 + ext) * 2;\n      const frame = computeZoomToFitArcFrame({\n        areas,\n        outerRadius: OUTER_RING_RADIUS,\n        innerRadius: innerRingRadiusFor(watchCircleType),\n        extension: ext,\n        targetSize,\n      });\n      viewBox = frame.viewBox;\n      this._radiusOffset = frame.radiusOffset;\n      this._arcFrame = frame;\n    } else {\n      this._radiusOffset = 0;\n      this._arcFrame = undefined;\n      const width = 448;\n      const height = width * (1 - this.clipTop / 100 - this.clipBottom / 100);\n      const top = -width / 2 + (width * this.clipTop) / 100;\n      viewBox = `${-width / 2} ${top} ${width} ${height}`;\n    }\n\n    return html`\n      <div class=\"container\">\n        <obc-watch\n          .state=${this.state}\n          .priority=${this.priority}\n          .angleSetpoint=${setpointAngle}\n          .newAngleSetpoint=${newSetpointAngle}\n          .atAngleSetpoint=${this.computeAtSetpoint(value)}\n          .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}\n          .setpointOverride=${this.setpointOverride}\n          .animateSetpoint=${this.animateSetpoint}\n          .padding=${48}\n          .tickmarks=${this.tickmarks}\n          .tickmarksInside=${this.tickmarksInside}\n          .tickmarkStyle=${this.tickmarkStyle}\n          .advices=${this._advices}\n          .areas=${areas}\n          .watchCircleType=${watchCircleType}\n          .barAreas=${barAreas}\n          .clipTop=${this.zoomToFitArc ? 0 : this.clipTop}\n          .clipBottom=${this.zoomToFitArc ? 0 : this.clipBottom}\n          .zoomToFitArc=${this.zoomToFitArc}\n          .arcFrame=${this._arcFrame}\n        ></obc-watch>\n        <svg class=\"gauge-radial\" viewBox=${viewBox}>${this._needle}</svg>\n      </div>\n    `;\n  }\n\n  private get _needle() {\n    if (this.type === ObcGaugeRadialType.filled) {\n      return nothing;\n    }\n    const needleColor = this.needleColor ?? this._derivedNeedleColor;\n    const rOff = this._radiusOffset;\n    const value = this.clampedValue;\n    if (this.type === ObcGaugeRadialType.needle) {\n      return svg`<g transform=\"rotate(${this.getAngle(value)}) translate(-256, -256)\">\n      <circle cx=\"256\" cy=\"256\" r=\"14\" fill=${needleColor}/>\n      <rect x=\"250\" y=\"${96 - rOff}\" width=\"12\" height=\"${192 + rOff}\" rx=\"6\" fill=${needleColor}/>\n      <rect x=\"252\" y=\"${98 - rOff}\" width=\"8\" height=\"${188 + rOff}\" rx=\"4\" stroke=${needleColor} fill=${needleColor} stroke-width=\"4\"/>\n      </g>\n`;\n    } else {\n      return svg`<g transform=\"rotate(${this.getAngle(value)}) translate(-256, -256)\">\n<rect x=\"252\" y=\"${96 - rOff}\" width=\"8\" height=\"48\" rx=\"4\" fill=${needleColor} stroke=\"var(--border-silhouette-color)\"/>\n</g>\n      `;\n    }\n  }\n\n  get tickmarks(): Tickmark[] {\n    const tickmarksByValue = new Map<number, Tickmark>();\n    const normalizeValue = (value: number) =>\n      Math.abs(value) < 1e-9 ? 0 : Number(value.toFixed(6));\n\n    const upsertTickmark = (\n      value: number,\n      type: TickmarkType,\n      text?: string\n    ) => {\n      if (\n        !Number.isFinite(value) ||\n        value < this.minValue ||\n        value > this.maxValue\n      ) {\n        return;\n      }\n\n      const normalizedValue = normalizeValue(value);\n      const existing = tickmarksByValue.get(normalizedValue);\n      if (existing) {\n        existing.type = strongerTickmarkType(existing.type, type);\n        if (text !== undefined) {\n          existing.text = text;\n        }\n        return;\n      }\n\n      tickmarksByValue.set(normalizedValue, {\n        angle: this.getAngle(normalizedValue),\n        type,\n        text,\n      });\n    };\n\n    const addTickmarksAtInterval = (\n      interval: number | undefined,\n      type: TickmarkType,\n      withLabels = false\n    ) => {\n      if (\n        interval === undefined ||\n        interval <= 0 ||\n        !Number.isFinite(interval)\n      ) {\n        return;\n      }\n\n      const epsilon = Math.abs(interval) * 1e-6;\n      const startValue =\n        Math.ceil((this.minValue - epsilon) / interval) * interval;\n\n      for (\n        let value = startValue;\n        value < this.maxValue - epsilon;\n        value += interval\n      ) {\n        const normalizedValue = normalizeValue(value);\n        if (\n          normalizedValue <= this.minValue + epsilon ||\n          normalizedValue >= this.maxValue - epsilon\n        ) {\n          continue;\n        }\n\n        upsertTickmark(\n          normalizedValue,\n          type,\n          withLabels && this.showLabels ? normalizedValue.toString() : undefined\n        );\n      }\n    };\n\n    addTickmarksAtInterval(\n      this.primaryTickmarkInterval,\n      TickmarkType.primary,\n      true\n    );\n    addTickmarksAtInterval(\n      this.secondaryTickmarkInterval,\n      TickmarkType.secondary\n    );\n    addTickmarksAtInterval(\n      this.tertiaryTickmarkInterval,\n      TickmarkType.tertiary\n    );\n\n    if (rangeIncludesZero(this.minValue, this.maxValue)) {\n      upsertTickmark(\n        0,\n        this.minValue < 0 ? TickmarkType.main : TickmarkType.textOnly,\n        this.showLabels ? '0' : undefined\n      );\n    }\n\n    if (this.showLabels) {\n      upsertTickmark(\n        this.minValue,\n        TickmarkType.textOnly,\n        this.minValue.toString()\n      );\n      upsertTickmark(\n        this.maxValue,\n        TickmarkType.textOnly,\n        this.maxValue.toString()\n      );\n    }\n\n    return [...tickmarksByValue.values()].sort((a, b) => a.angle - b.angle);\n  }\n\n  private get _advices(): AngleAdviceRaw[] {\n    const value = this.clampedValue;\n\n    return this.advices.map((advice) => {\n      const minAngle = this.getAngle(advice.minValue);\n      const maxAngle = this.getAngle(advice.maxValue);\n      let state = advice.hinted ? AdviceState.hinted : AdviceState.regular;\n      if (value >= advice.minValue && value <= advice.maxValue) {\n        state = AdviceState.triggered;\n      }\n\n      return {\n        minAngle,\n        maxAngle,\n        type: advice.type,\n        state,\n        hideMinTickmark: advice.minValue === this.minValue,\n        hideMaxTickmark: advice.maxValue === this.maxValue,\n      };\n    });\n  }\n\n  static override styles = css`\n    * {\n      box-sizing: border-box;\n    }\n\n    .container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    .container > * {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    obc-watch {\n      anchor-name: --watch;\n    }\n\n    .speed-gauge-value {\n      position: absolute;\n      top: clamp(\n        70%,\n        calc(80% - (anchor-size(--watch height) - 200px) * 0.2),\n        80%\n      );\n      left: 50%;\n      transform: translateX(-50%);\n      width: fit-content;\n      height: fit-content;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-instrument-radial': ObcInstrumentRadial;\n  }\n}\n"],"names":["ObcGaugeRadialType"],"mappings":"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"}
+{"version":3,"file":"instrument-radial.js","sources":["../../../src/building-blocks/instrument-radial/instrument-radial.ts"],"sourcesContent":["import {css, LitElement, html, svg, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  AdviceState,\n  AdviceType,\n  AngleAdviceRaw,\n} from '../../navigation-instruments/watch/advice.js';\nimport {WatchCircleType} from '../../navigation-instruments/watch/watch.js';\nimport {Tickmark} from '../../navigation-instruments/watch/tickmark.js';\nimport {TickmarkType} from '../../navigation-instruments/watch/tickmark.js';\nimport {TickmarkStyle} from '../../navigation-instruments/watch/tickmark.js';\nimport {InstrumentState, Priority} from '../../navigation-instruments/types.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport {\n  OUTER_RING_RADIUS,\n  innerRingRadiusFor,\n} from '../../navigation-instruments/watch/watch.js';\nimport {\n  computeZoomToFitArcFrame,\n  type ZoomToFitArcFrame,\n} from '../../svghelpers/arc-frame.js';\n\n// Must match obc-watch's un-zoomed viewBox `(176 + getPadding()) * 2`\n// (default padding 48 → 448); instrument-radial overlays obc-watch 1:1.\nconst WATCH_DEFAULT_VIEWBOX = 448;\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\nconst NEEDLE_TIP_RADIUS = 160;\nconst NEEDLE_TIP_GAP = 5; // tip stops this far short of the scale\nconst NEEDLE_WIDTH = 8;\nconst NEEDLE_HUB_RADIUS = 16;\n\nfunction rangeIncludesZero(minValue: number, maxValue: number): boolean {\n  return minValue <= 0 && maxValue >= 0;\n}\n\nfunction strongerTickmarkType(\n  existing: TickmarkType,\n  candidate: TickmarkType\n): TickmarkType {\n  const priority: Record<TickmarkType, number> = {\n    [TickmarkType.zeroLineThick]: 6,\n    [TickmarkType.zeroLine]: 5,\n    [TickmarkType.main]: 4,\n    [TickmarkType.primary]: 3,\n    [TickmarkType.secondary]: 2,\n    [TickmarkType.tertiary]: 1,\n    [TickmarkType.textOnly]: 0,\n  };\n\n  return priority[candidate] > priority[existing] ? candidate : existing;\n}\n\ninterface Clips {\n  top: number;\n  bottom: number;\n  left: number;\n  right: number;\n}\n\n/** Clamp a clip percentage to [0, 100]; non-finite returns 0. */\nfunction clampClipPercent(n: number): number {\n  return Number.isFinite(n) ? Math.min(Math.max(n, 0), 100) : 0;\n}\n\n/**\n * Clamp the four clips to [0, 100] and drop any opposite pair that would\n * collapse the viewBox (sum >= 100), so a bad clip can't produce a zero- or\n * negative-size box. Valid clips pass through unchanged.\n */\nfunction normalizeClips(clips: Clips): Clips {\n  let top = clampClipPercent(clips.top);\n  let bottom = clampClipPercent(clips.bottom);\n  let left = clampClipPercent(clips.left);\n  let right = clampClipPercent(clips.right);\n  if (top + bottom >= 100) {\n    top = 0;\n    bottom = 0;\n  }\n  if (left + right >= 100) {\n    left = 0;\n    right = 0;\n  }\n  return {top, bottom, left, right};\n}\n\n/**\n * Fallback value-to-angle mapping when no `getAngle` is supplied: linear over\n * the historical 270° sweep (-135 to 135). Returns -135 for a non-positive or\n * non-finite span.\n */\nfunction defaultGaugeAngle(\n  value: number,\n  minValue: number,\n  maxValue: number\n): number {\n  const span = maxValue - minValue;\n  if (!Number.isFinite(span) || span <= 0) {\n    return -135;\n  }\n  return ((value - minValue) / span) * 270 - 135;\n}\n\n@customElement('obc-instrument-radial')\nexport class ObcInstrumentRadial extends SetpointMixin(LitElement) {\n  // setpoint, newSetpoint, atSetpoint, touching, autoAtSetpoint,\n  // autoAtSetpointDeadband, setpointAtZeroDeadband, setpointOverride\n  // — all inherited from SetpointMixin\n\n  @property({type: String}) state: InstrumentState = InstrumentState.active;\n  @property({type: String}) priority: Priority = Priority.regular;\n\n  @property({type: Number}) value = 0;\n  @property({type: Number}) maxValue = 100;\n  @property({type: Number}) minValue = 0;\n  @property({attribute: false}) getAngle!: (v: number) => number;\n  @property({type: String}) needleColor: string | undefined;\n  @property({type: String}) barColor: string | undefined;\n  @property({type: Boolean}) showLabels: 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}) type: ObcGaugeRadialType =\n    ObcGaugeRadialType.filled;\n  @property({type: String}) needleType: ObcGaugeRadialType =\n    ObcGaugeRadialType.filled;\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n  @property({type: String}) tickmarkStyle: TickmarkStyle =\n    TickmarkStyle.regular;\n  @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n  @property({type: Number}) clipTop: number = 0; // in percent of height\n  @property({type: Number}) clipBottom: number = 0; // in percent of height\n  @property({type: Number}) clipLeft: number = 0; // in percent of width\n  @property({type: Number}) clipRight: number = 0; // in percent of width\n  /**\n   * Place the horizontal end labels (±90°, e.g. min/max) below the tick instead\n   * of beside it — the \"Max-min\" placement from the radial label model\n   * (External / Internal / Max-min). See PR #903 / design discussion.\n   */\n  @property({type: Boolean}) endLabelsMaxMin: boolean = false;\n  @property({type: Boolean}) zoomToFitArc: boolean = false;\n\n  private _radiusOffset = 0;\n  private _arcFrame: ZoomToFitArcFrame | undefined;\n\n  private get clampedValue(): number {\n    const lowerBound = Math.min(this.minValue, this.maxValue);\n    const upperBound = Math.max(this.minValue, this.maxValue);\n    return Math.max(lowerBound, Math.min(this.value, upperBound));\n  }\n\n  private get minAngle(): number {\n    return this.mapAngle(this.minValue);\n  }\n\n  private get maxAngle(): number {\n    return this.mapAngle(this.maxValue);\n  }\n\n  // Map a value to an angle via the consumer's `getAngle`, guarding a missing\n  // or non-finite mapping so a misconfigured consumer can't emit NaN geometry.\n  private mapAngle(value: number): number {\n    const fn = this.getAngle;\n    const angle =\n      typeof fn === 'function'\n        ? fn(value)\n        : defaultGaugeAngle(value, this.minValue, this.maxValue);\n    return Number.isFinite(angle) ? angle : 0;\n  }\n\n  // Clamped clips, reused for the overlay viewBox and the clips forwarded to\n  // obc-watch.\n  private get safeClips(): Clips {\n    return normalizeClips({\n      top: this.clipTop,\n      bottom: this.clipBottom,\n      left: this.clipLeft,\n      right: this.clipRight,\n    });\n  }\n\n  private get _derivedNeedleColor(): string {\n    if (\n      this.state === InstrumentState.loading ||\n      this.state === InstrumentState.off\n    ) {\n      return 'transparent';\n    }\n    return this.priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-secondary-color)'\n      : 'var(--instrument-regular-secondary-color)';\n  }\n\n  private get _derivedBarColor(): string {\n    if (\n      this.state === InstrumentState.loading ||\n      this.state === InstrumentState.off\n    ) {\n      return 'transparent';\n    }\n    if (this.type === ObcGaugeRadialType.filled) {\n      return this.priority === Priority.enhanced\n        ? 'var(--instrument-enhanced-secondary-color)'\n        : 'var(--instrument-regular-secondary-color)';\n    }\n    return this.priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-tertiary-color)'\n      : 'var(--instrument-regular-tertiary-color)';\n  }\n\n  override render() {\n    const barColor = this.barColor ?? this._derivedBarColor;\n    const barStartValue = Math.max(this.minValue, Math.min(0, this.maxValue));\n    const value = this.clampedValue;\n    const setpointAngle =\n      this.setpoint !== undefined ? this.mapAngle(this.setpoint) : undefined;\n    const newSetpointAngle =\n      this.newSetpoint !== undefined\n        ? this.mapAngle(this.newSetpoint)\n        : undefined;\n\n    const barAreas =\n      this.type === ObcGaugeRadialType.needle\n        ? []\n        : [\n            {\n              startAngle: this.mapAngle(barStartValue),\n              endAngle: this.mapAngle(value),\n              fillColor: barColor,\n            },\n          ];\n\n    const areas = [\n      {\n        startAngle: this.minAngle,\n        endAngle: this.maxAngle,\n        roundInsideCut: true,\n        roundOutsideCut: true,\n      },\n    ];\n\n    const watchCircleType =\n      this.type === ObcGaugeRadialType.needle\n        ? WatchCircleType.single\n        : WatchCircleType.double;\n\n    const clips = this.safeClips;\n    let viewBox: string;\n    if (this.zoomToFitArc) {\n      const ext = 48;\n      const targetSize = (176 + ext) * 2;\n      const frame = computeZoomToFitArcFrame({\n        areas,\n        outerRadius: OUTER_RING_RADIUS,\n        innerRadius: innerRingRadiusFor(watchCircleType),\n        extension: ext,\n        targetSize,\n      });\n      this._radiusOffset = frame.radiusOffset;\n      viewBox = frame.viewBox;\n      this._arcFrame = frame;\n    } else {\n      this._radiusOffset = 0;\n      this._arcFrame = undefined;\n      const full = WATCH_DEFAULT_VIEWBOX;\n      const w = full * (1 - clips.left / 100 - clips.right / 100);\n      const h = full * (1 - clips.top / 100 - clips.bottom / 100);\n      const left = -full / 2 + (full * clips.left) / 100;\n      const top = -full / 2 + (full * clips.top) / 100;\n      viewBox = `${left} ${top} ${w} ${h}`;\n    }\n\n    return html`\n      <div class=\"container\">\n        <obc-watch\n          .state=${this.state}\n          .priority=${this.priority}\n          .angleSetpoint=${setpointAngle}\n          .newAngleSetpoint=${newSetpointAngle}\n          .atAngleSetpoint=${this.computeAtSetpoint(value)}\n          .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}\n          .setpointOverride=${this.setpointOverride}\n          .animateSetpoint=${this.animateSetpoint}\n          .padding=${48}\n          .tickmarks=${this.tickmarks}\n          .tickmarksInside=${this.tickmarksInside}\n          .tickmarkStyle=${this.tickmarkStyle}\n          .advices=${this._advices}\n          .areas=${areas}\n          .watchCircleType=${watchCircleType}\n          .barAreas=${barAreas}\n          .clipTop=${this.zoomToFitArc ? 0 : clips.top}\n          .clipBottom=${this.zoomToFitArc ? 0 : clips.bottom}\n          .clipLeft=${this.zoomToFitArc ? 0 : clips.left}\n          .clipRight=${this.zoomToFitArc ? 0 : clips.right}\n          .endLabelsMaxMin=${this.endLabelsMaxMin}\n          .zoomToFitArc=${this.zoomToFitArc}\n          .arcFrame=${this._arcFrame}\n        ></obc-watch>\n        <svg class=\"gauge-radial\" viewBox=${viewBox}>${this._needle}</svg>\n      </div>\n    `;\n  }\n\n  private get _needle() {\n    if (this.type === ObcGaugeRadialType.filled) {\n      return nothing;\n    }\n    const needleColor = this.needleColor ?? this._derivedNeedleColor;\n    const rOff = this._radiusOffset;\n    const value = this.clampedValue;\n    if (this.type === ObcGaugeRadialType.needle) {\n      // Rod runs from the value tip down to the center hub. Width is constant;\n      // the tip shifts outward additively under zoom.\n      const tipY = 256 - (NEEDLE_TIP_RADIUS - NEEDLE_TIP_GAP) - rOff;\n      return svg`<g transform=\"rotate(${this.mapAngle(value)}) translate(-256, -256)\">\n      <rect x=\"${256 - NEEDLE_WIDTH / 2}\" y=\"${tipY}\" width=\"${NEEDLE_WIDTH}\" height=\"${256 - tipY}\" rx=\"${NEEDLE_WIDTH / 2}\" fill=${needleColor} stroke=${needleColor}/>\n      <circle cx=\"256\" cy=\"256\" r=\"${NEEDLE_HUB_RADIUS}\" fill=${needleColor}/>\n      </g>\n`;\n    } else {\n      return svg`<g transform=\"rotate(${this.mapAngle(value)}) translate(-256, -256)\">\n<rect x=\"252\" y=\"${96 - rOff}\" width=\"8\" height=\"48\" rx=\"4\" fill=${needleColor} stroke=\"var(--border-silhouette-color)\"/>\n</g>\n      `;\n    }\n  }\n\n  get tickmarks(): Tickmark[] {\n    const tickmarksByValue = new Map<number, Tickmark>();\n    const normalizeValue = (value: number) =>\n      Math.abs(value) < 1e-9 ? 0 : Number(value.toFixed(6));\n\n    const upsertTickmark = (\n      value: number,\n      type: TickmarkType,\n      text?: string\n    ) => {\n      if (\n        !Number.isFinite(value) ||\n        value < this.minValue ||\n        value > this.maxValue\n      ) {\n        return;\n      }\n\n      const normalizedValue = normalizeValue(value);\n      const existing = tickmarksByValue.get(normalizedValue);\n      if (existing) {\n        existing.type = strongerTickmarkType(existing.type, type);\n        if (text !== undefined) {\n          existing.text = text;\n        }\n        return;\n      }\n\n      tickmarksByValue.set(normalizedValue, {\n        angle: this.mapAngle(normalizedValue),\n        type,\n        text,\n      });\n    };\n\n    const addTickmarksAtInterval = (\n      interval: number | undefined,\n      type: TickmarkType,\n      withLabels = false\n    ) => {\n      if (\n        interval === undefined ||\n        interval <= 0 ||\n        !Number.isFinite(interval)\n      ) {\n        return;\n      }\n\n      const epsilon = Math.abs(interval) * 1e-6;\n      const startValue =\n        Math.ceil((this.minValue - epsilon) / interval) * interval;\n\n      for (\n        let value = startValue;\n        value < this.maxValue - epsilon;\n        value += interval\n      ) {\n        const normalizedValue = normalizeValue(value);\n        if (\n          normalizedValue <= this.minValue + epsilon ||\n          normalizedValue >= this.maxValue - epsilon\n        ) {\n          continue;\n        }\n\n        upsertTickmark(\n          normalizedValue,\n          type,\n          withLabels && this.showLabels ? normalizedValue.toString() : undefined\n        );\n      }\n    };\n\n    addTickmarksAtInterval(\n      this.primaryTickmarkInterval,\n      TickmarkType.primary,\n      true\n    );\n    addTickmarksAtInterval(\n      this.secondaryTickmarkInterval,\n      TickmarkType.secondary\n    );\n    addTickmarksAtInterval(\n      this.tertiaryTickmarkInterval,\n      TickmarkType.tertiary\n    );\n\n    if (rangeIncludesZero(this.minValue, this.maxValue)) {\n      upsertTickmark(\n        0,\n        this.minValue < 0 ? TickmarkType.main : TickmarkType.textOnly,\n        this.showLabels ? '0' : undefined\n      );\n    }\n\n    if (this.showLabels) {\n      upsertTickmark(\n        this.minValue,\n        TickmarkType.textOnly,\n        this.minValue.toString()\n      );\n      upsertTickmark(\n        this.maxValue,\n        TickmarkType.textOnly,\n        this.maxValue.toString()\n      );\n    }\n\n    return [...tickmarksByValue.values()].sort((a, b) => a.angle - b.angle);\n  }\n\n  private get _advices(): AngleAdviceRaw[] {\n    const value = this.clampedValue;\n\n    return this.advices.map((advice) => {\n      const minAngle = this.mapAngle(advice.minValue);\n      const maxAngle = this.mapAngle(advice.maxValue);\n      let state = advice.hinted ? AdviceState.hinted : AdviceState.regular;\n      if (value >= advice.minValue && value <= advice.maxValue) {\n        state = AdviceState.triggered;\n      }\n\n      return {\n        minAngle,\n        maxAngle,\n        type: advice.type,\n        state,\n        hideMinTickmark: advice.minValue === this.minValue,\n        hideMaxTickmark: advice.maxValue === this.maxValue,\n      };\n    });\n  }\n\n  static override styles = css`\n    * {\n      box-sizing: border-box;\n    }\n\n    .container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    .container > * {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    obc-watch {\n      anchor-name: --watch;\n    }\n\n    .speed-gauge-value {\n      position: absolute;\n      top: clamp(\n        70%,\n        calc(80% - (anchor-size(--watch height) - 200px) * 0.2),\n        80%\n      );\n      left: 50%;\n      transform: translateX(-50%);\n      width: fit-content;\n      height: fit-content;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-instrument-radial': ObcInstrumentRadial;\n  }\n}\n"],"names":["ObcGaugeRadialType"],"mappings":"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"}

package/dist/navigation-instruments/gauge-radial/gauge-radial.css.js

@@ -0,0 +1,99 @@
+import { css } from "lit";
+const componentStyle = css`
+          * {
+            -webkit-tap-highlight-color: transparent;
+          }
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Host takes each sector's crop aspect (see \`sectorClips\`): 270/90 square, 180
+   wide — so the dial is the same size at any width. */
+
+:host([sector="270"]),
+:host([sector="90-left"]),
+:host([sector="90-right"]) {
+  height: auto;
+  aspect-ratio: 1;
+}
+
+/* 448 / 251 = the 180° crop's aspect (448 wide × 448·(1 − 44%) tall); keep in
+   sync with \`sectorClips\` bottom=44 in gauge-radial.ts. */
+
+:host([sector="180"]) {
+  height: auto;
+  aspect-ratio: 448 / 251;
+}
+
+.gauge-radial-root {
+  /* Readout vertical placement per layout (% of the cropped host), tuned to the
+     watch geometry — re-check if the ring radii or the 448 box change. Which
+     layout uses which is in renderReadouts(). */
+  --readout-meta-top: 72%;
+  --readout-meta-top-needle: 63%;
+  --readout-meta-top-180: 60%;
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.gauge-radial-root .gauge-readout-value {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+
+.gauge-radial-root .gauge-readout-meta {
+    position: absolute;
+    left: 50%;
+    top: var(--readout-meta-top);
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+
+.gauge-radial-root.type-needle .gauge-readout-meta {
+    top: var(--readout-meta-top-needle);
+  }
+
+.gauge-radial-root.sector-180 .gauge-readout-meta {
+    top: var(--readout-meta-top-180);
+  }
+
+/* Nudge the corner readout inward (up + toward center) so it sits inside the
+     open quadrant rather than hugging the box corner. Symmetric for both
+     orientations — only the horizontal edge differs. */
+
+.gauge-radial-root.sector-90-left .gauge-readout-meta,.gauge-radial-root.sector-90-right .gauge-readout-meta {
+    --readout-90-inset: 6%;
+    bottom: var(--readout-90-inset);
+    top: auto;
+    transform: none;
+  }
+
+.gauge-radial-root.sector-90-left .gauge-readout-meta {
+    left: auto;
+    right: var(--readout-90-inset);
+  }
+
+.gauge-radial-root.sector-90-right .gauge-readout-meta {
+    left: var(--readout-90-inset);
+    right: auto;
+  }
+
+/* 90-right readout sits in the bottom-left corner, so left-align the value
+     under the label (enhanced readouts right-align the value by default). */
+
+.gauge-radial-root.sector-90-right .gauge-readout-meta::part(value-wrapper) {
+    justify-self: start;
+  }
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=gauge-radial.css.js.map

package/dist/navigation-instruments/gauge-radial/gauge-radial.css.js.map

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

package/dist/navigation-instruments/gauge-radial/gauge-radial.d.ts

@@ -1,13 +1,20 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import { AdviceType } from '../watch/advice.js';
 import { InstrumentState, 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",
     needle = "needle"
 }
+export declare enum GaugeRadialSector {
+    deg270 = "270",
+    deg180 = "180",
+    deg90Left = "90-left",
+    deg90Right = "90-right"
+}
 export interface GaugeRadialAdvice {
     minValue: number;
     maxValue: number;
@@ -29,14 +36,17 @@ declare const ObcGaugeRadial_base: (new (...args: any[]) => import('../../svghel
  *
  * - **Three display types**: `filled` (solid arc), `bar` (thinner arc), and
  *   `needle` (pointer indicator) via the `type` property.
- * - **Full-range mapping**: The configured `minValue..maxValue` always spans
- *   the full 270° sweep. Symmetric ranges still place `0` at 12 o'clock.
+ * - **Sector sweep**: `sector` selects the arc span (`270`, `180`, `90-left`, or `90-right`).
+ *   The configured `minValue..maxValue` always spans the full sector. For the
+ *   centered sectors (`270`, `180`) a symmetric range places `0` at 12 o'clock;
+ *   for `90-left`/`90-right` the range midpoint sits at the middle of the quadrant.
  * - **Setpoint via mixin**: `setpoint`, `newSetpoint`, `touching`,
  *   `autoAtSetpointDeadband`, `setpointOverride`, and all other setpoint
  *   properties are provided by `SetpointMixin` and forwarded to the inner
  *   `<obc-instrument-radial>`.
  * - **Advice zones**: Pass an array of {@link GaugeRadialAdvice} objects to
- *   render caution/alert arcs on the gauge.
+ *   render caution/alert arcs on the gauge. Not shown on the `90-left` /
+ *   `90-right` sectors.
  *
  * ## Usage Guidelines
  *
@@ -45,6 +55,12 @@ declare const ObcGaugeRadial_base: (new (...args: any[]) => import('../../svghel
  * - Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to
  *   control tickmark density.
  * - Enable `showLabels` to show numeric labels at primary tickmarks.
+ * - Enable `showReadout` with optional `label` and `unit`. Layout depends on `sector`
+ *   and `type`: **270** filled/bar — value at center + a label-only `meta` row in
+ *   the bottom gap (two separate readouts); **180** filled/bar — a single centered
+ *   stack (value + label/unit) at the bottom; **270** needle — bottom stack;
+ *   **180** needle — no readout; **90-left** / **90-right** filled/bar — corner
+ *   readout in a square host; **90** needle — no readout.
  *
  * ## Best Practices
  *
@@ -61,7 +77,7 @@ declare const ObcGaugeRadial_base: (new (...args: any[]) => import('../../svghel
  *   minValue="0"
  *   maxValue="100"
  *   type="filled"
- *   enhanced
+ *   priority="enhanced"
  *   showLabels
  *   primaryTickmarkInterval="25"
  *   secondaryTickmarkInterval="5"
@@ -89,9 +105,28 @@ export declare class ObcGaugeRadial extends ObcGaugeRadial_base {
     type: ObcGaugeRadialType;
     tickmarksInside: boolean;
     tickmarkStyle: TickmarkStyle;
+    /** Caution/alert arcs. Ignored on `sector: 90-left` / `90-right`. */
     advices: GaugeRadialAdvice[];
-    getAngle(v: number): number;
-    render(): import('lit-html').TemplateResult<1>;
+    sector: GaugeRadialSector;
+    showReadout: boolean;
+    label: string;
+    unit: string;
+    fractionDigits: number;
+    private get sectorAngles();
+    /**
+     * Per-edge crop (%) of the shared, origin-centered 448 SVG box each sector
+     * shows. All sectors render at the same natural scale, so the dial stays the
+     * same size; the sector only windows a different part (270 whole, 180 wide,
+     * 90 a quadrant).
+     */
+    private get sectorClips();
+    private get isSector90();
+    getAngle: (v: number) => number;
+    /** Renders one gauge readout; `withMeta`/`labelOnly` pick parts. */
+    private renderReadout;
+    private renderReadouts;
+    render(): TemplateResult<1>;
+    static styles: import('lit').CSSResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/navigation-instruments/gauge-radial/gauge-radial.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gauge-radial.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/gauge-radial/gauge-radial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AAEtD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,qBACa,cAAe,SAAQ,mBAAyB;IACjC,KAAK,SAAK;IACV,QAAQ,SAAO;IACf,QAAQ,SAAK;IACZ,UAAU,EAAE,OAAO,CAAS;IAC7B,uBAAuB,SAAM;IAC7B,yBAAyB,SAAM;IACzD;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IACtC,IAAI,EAAE,kBAAkB,CACtB;IACD,eAAe,EAAE,OAAO,CAAS;IAClC,aAAa,EAAE,aAAa,CAC9B;IACmB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAE7E,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IASlB,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"gauge-radial.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/gauge-radial/gauge-radial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAK9E,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AAEtD,OAAO,8DAA8D,CAAC;AACtE,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AACnD,OAAO,uBAAuB,CAAC;AAM/B,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,oBAAY,iBAAiB;IAC3B,MAAM,QAAQ;IACd,MAAM,QAAQ;IACd,SAAS,YAAY;IACrB,UAAU,aAAa;CACxB;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,qBACa,cAAe,SAAQ,mBAAyB;IACjC,KAAK,SAAK;IACV,QAAQ,SAAO;IACf,QAAQ,SAAK;IACZ,UAAU,EAAE,OAAO,CAAS;IAC7B,uBAAuB,SAAM;IAC7B,yBAAyB,SAAM;IACzD;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IACtC,IAAI,EAAE,kBAAkB,CACtB;IACD,eAAe,EAAE,OAAO,CAAS;IAClC,aAAa,EAAE,aAAa,CAC9B;IACxB,qEAAqE;IAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAM;IACpC,MAAM,EAAE,iBAAiB,CACvC;IACA,WAAW,UAAS;IACrB,KAAK,SAAM;IACX,IAAI,SAAM;IACV,cAAc,SAAK;IAE7C,OAAO,KAAK,YAAY,GAYvB;IAED;;;;;OAKG;IACH,OAAO,KAAK,WAAW,GAiBtB;IAED,OAAO,KAAK,UAAU,GAKrB;IAID,QAAQ,GAAI,GAAG,MAAM,KAAG,MAAM,CAQ5B;IAEF,oEAAoE;IACpE,OAAO,CAAC,aAAa;IA+BrB,OAAO,CAAC,cAAc;IAiDb,MAAM;IAgDf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/navigation-instruments/gauge-radial/gauge-radial.js

@@ -1,10 +1,13 @@
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import componentStyle from "./gauge-radial.css.js";
 import { customElement } from "../../decorator.js";
 import { property } from "lit/decorators.js";
 import { InstrumentState, Priority } from "../types.js";
 import { SetpointMixin } from "../../svghelpers/setpoint-mixin.js";
 import "../../building-blocks/instrument-radial/instrument-radial.js";
 import { TickmarkStyle } from "../watch/tickmark.js";
+import { ReadoutStackVerticalAlignment, ReadoutVariant } from "../readout/readout.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -21,6 +24,13 @@ var ObcGaugeRadialType = /* @__PURE__ */ ((ObcGaugeRadialType2) => {
   ObcGaugeRadialType2["needle"] = "needle";
   return ObcGaugeRadialType2;
 })(ObcGaugeRadialType || {});
+var GaugeRadialSector = /* @__PURE__ */ ((GaugeRadialSector2) => {
+  GaugeRadialSector2["deg270"] = "270";
+  GaugeRadialSector2["deg180"] = "180";
+  GaugeRadialSector2["deg90Left"] = "90-left";
+  GaugeRadialSector2["deg90Right"] = "90-right";
+  return GaugeRadialSector2;
+})(GaugeRadialSector || {});
 let ObcGaugeRadial = class extends SetpointMixin(LitElement) {
   constructor() {
     super(...arguments);
@@ -37,45 +47,166 @@ let ObcGaugeRadial = class extends SetpointMixin(LitElement) {
     this.tickmarksInside = false;
     this.tickmarkStyle = TickmarkStyle.regular;
     this.advices = [];
+    this.sector = "270";
+    this.showReadout = false;
+    this.label = "";
+    this.unit = "";
+    this.fractionDigits = 0;
+    this.getAngle = (v) => {
+      const { sweep, start } = this.sectorAngles;
+      const span = this.maxValue - this.minValue;
+      if (!Number.isFinite(span) || span <= 0) {
+        return start;
+      }
+      return (v - this.minValue) / span * sweep + start;
+    };
   }
-  getAngle(v) {
-    const span = this.maxValue - this.minValue;
-    if (!Number.isFinite(span) || span <= 0) {
-      return -135;
+  get sectorAngles() {
+    switch (this.sector) {
+      case "180":
+        return { sweep: 180, start: -90 };
+      case "90-left":
+        return { sweep: 90, start: -90 };
+      case "90-right":
+        return { sweep: 90, start: 0 };
+      case "270":
+      default:
+        return { sweep: 270, start: -135 };
     }
-    return (v - this.minValue) / span * 270 - 135;
+  }
+  /**
+   * Per-edge crop (%) of the shared, origin-centered 448 SVG box each sector
+   * shows. All sectors render at the same natural scale, so the dial stays the
+   * same size; the sector only windows a different part (270 whole, 180 wide,
+   * 90 a quadrant).
+   */
+  get sectorClips() {
+    switch (this.sector) {
+      case "180":
+        return { top: 0, bottom: 44, left: 0, right: 0 };
+      case "90-left":
+        return { top: 0, bottom: 45, left: 0, right: 45 };
+      case "90-right":
+        return { top: 0, bottom: 45, left: 45, right: 0 };
+      case "270":
+      default:
+        return { top: 0, bottom: 0, left: 0, right: 0 };
+    }
+  }
+  get isSector90() {
+    return this.sector === "90-left" || this.sector === "90-right";
+  }
+  /** Renders one gauge readout; `withMeta`/`labelOnly` pick parts. */
+  renderReadout({
+    className,
+    variant,
+    alignment = ReadoutStackVerticalAlignment.vertical,
+    withMeta = true,
+    labelOnly = false
+  }) {
+    const withValue = !labelOnly;
+    return html`
+      <obc-readout
+        class=${className}
+        direction="vertical"
+        ?labelOnly=${labelOnly}
+        .variant=${variant}
+        .alignment=${alignment}
+        .valuePriority=${withValue ? this.priority : void 0}
+        .value=${withValue ? this.value : void 0}
+        .fractionDigits=${this.fractionDigits}
+        .label=${withMeta ? this.label : ""}
+        .unit=${withMeta ? this.unit : ""}
+      ></obc-readout>
+    `;
+  }
+  renderReadouts() {
+    if (!this.showReadout) {
+      return nothing;
+    }
+    const isNeedle = this.type === "needle";
+    const is90 = this.isSector90;
+    const is180 = this.sector === "180";
+    if (isNeedle && (is180 || is90)) {
+      return nothing;
+    }
+    if (is90) {
+      return this.renderReadout({
+        className: "gauge-readout-meta",
+        variant: ReadoutVariant.enhanced
+      });
+    }
+    if (isNeedle || is180) {
+      return this.renderReadout({
+        className: "gauge-readout-meta",
+        variant: ReadoutVariant.stack,
+        alignment: ReadoutStackVerticalAlignment.center
+      });
+    }
+    return html`
+      ${this.renderReadout({
+      className: "gauge-readout-value",
+      variant: ReadoutVariant.enhanced,
+      withMeta: false
+    })}
+      ${this.label || this.unit ? this.renderReadout({
+      className: "gauge-readout-meta",
+      variant: ReadoutVariant.stack,
+      alignment: ReadoutStackVerticalAlignment.center,
+      labelOnly: true
+    }) : nothing}
+    `;
   }
   render() {
+    const clips = this.sectorClips;
     return html`
-      <obc-instrument-radial
-        .value=${this.value}
-        .state=${this.state}
-        .priority=${this.priority}
-        .setpoint=${this.setpoint}
-        .newSetpoint=${this.newSetpoint}
-        .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}
-        .setpointOverride=${this.setpointOverride}
-        .touching=${this.touching}
-        .autoAtSetpoint=${this.autoAtSetpoint}
-        .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}
-        .animateSetpoint=${this.animateSetpoint}
-        .maxValue=${this.maxValue}
-        .minValue=${this.minValue}
-        .getAngle=${this.getAngle}
-        .showLabels=${this.showLabels}
-        .primaryTickmarkInterval=${this.primaryTickmarkInterval}
-        .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}
-        .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}
-        .type=${this.type}
-        .needleType=${this.type}
-        .tickmarksInside=${this.tickmarksInside}
-        .tickmarkStyle=${this.tickmarkStyle}
-        .advices=${this.advices}
+      <div
+        class=${classMap({
+      "gauge-radial-root": true,
+      "type-needle": this.type === "needle",
+      "sector-180": this.sector === "180",
+      "sector-90-left": this.sector === "90-left",
+      "sector-90-right": this.sector === "90-right"
+      /* deg90Right */
+    })}
       >
-      </obc-instrument-radial>
+        <obc-instrument-radial
+          .value=${this.value}
+          .state=${this.state}
+          .priority=${this.priority}
+          .setpoint=${this.setpoint}
+          .newSetpoint=${this.newSetpoint}
+          .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}
+          .setpointOverride=${this.setpointOverride}
+          .touching=${this.touching}
+          .autoAtSetpoint=${this.autoAtSetpoint}
+          .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}
+          .animateSetpoint=${this.animateSetpoint}
+          .maxValue=${this.maxValue}
+          .minValue=${this.minValue}
+          .getAngle=${this.getAngle}
+          .showLabels=${this.showLabels}
+          .primaryTickmarkInterval=${this.primaryTickmarkInterval}
+          .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}
+          .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}
+          .type=${this.type}
+          .needleType=${this.type}
+          .tickmarksInside=${this.tickmarksInside}
+          .tickmarkStyle=${this.tickmarkStyle}
+          .advices=${this.isSector90 ? [] : this.advices}
+          .clipTop=${clips.top}
+          .clipBottom=${clips.bottom}
+          .clipLeft=${clips.left}
+          .clipRight=${clips.right}
+          .endLabelsMaxMin=${this.sector === "180"}
+        >
+        </obc-instrument-radial>
+        ${this.renderReadouts()}
+      </div>
     `;
   }
 };
+ObcGaugeRadial.styles = unsafeCSS(componentStyle);
 __decorateClass([
   property({ type: Number })
 ], ObcGaugeRadial.prototype, "value", 2);
@@ -115,10 +246,26 @@ __decorateClass([
 __decorateClass([
   property({ type: Array, attribute: false })
 ], ObcGaugeRadial.prototype, "advices", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], ObcGaugeRadial.prototype, "sector", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcGaugeRadial.prototype, "showReadout", 2);
+__decorateClass([
+  property({ type: String })
+], ObcGaugeRadial.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], ObcGaugeRadial.prototype, "unit", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcGaugeRadial.prototype, "fractionDigits", 2);
 ObcGaugeRadial = __decorateClass([
   customElement("obc-gauge-radial")
 ], ObcGaugeRadial);
 export {
+  GaugeRadialSector,
   ObcGaugeRadial,
   ObcGaugeRadialType
 };

package/dist/navigation-instruments/gauge-radial/gauge-radial.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge-radial.js","sources":["../../../src/navigation-instruments/gauge-radial/gauge-radial.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 {InstrumentState, 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-gauge-radial>` — Configurable radial gauge for generic numeric values.\n *\n * `ObcGaugeRadial` is a thin wrapper around `<obc-instrument-radial>` that adds\n * domain-independent value-to-angle mapping with automatic range handling for\n * both positive-only and bipolar (negative-to-positive) scales. It inherits a\n * full setpoint property bundle from {@link SetpointMixin}, including\n * auto at-setpoint detection, dual-marker adjustment preview, and deadband\n * tuning — no manual wiring required.\n *\n * ## Features\n *\n * - **Three display types**: `filled` (solid arc), `bar` (thinner arc), and\n *   `needle` (pointer indicator) via the `type` property.\n * - **Full-range mapping**: The configured `minValue..maxValue` always spans\n *   the full 270° sweep. Symmetric ranges still place `0` at 12 o'clock.\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 `minValue` / `maxValue` to define the scale range.\n * - Use `priority` to switch between regular and enhanced color palettes.\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 * - Keep domain-specific logic (units, formatting) in the parent view; this\n *   component is intentionally unit-agnostic.\n *\n * ## Example\n *\n * ```html\n * <obc-gauge-radial\n *   value=\"42\"\n *   minValue=\"0\"\n *   maxValue=\"100\"\n *   type=\"filled\"\n *   enhanced\n *   showLabels\n *   primaryTickmarkInterval=\"25\"\n *   secondaryTickmarkInterval=\"5\"\n *   setpoint=\"60\"\n * ></obc-gauge-radial>\n * ```\n *\n * @element obc-gauge-radial\n * @typedef {import('./gauge-radial.js').GaugeRadialAdvice} GaugeRadialAdvice\n */\n@customElement('obc-gauge-radial')\nexport class ObcGaugeRadial extends SetpointMixin(LitElement) {\n  @property({type: Number}) value = 0;\n  @property({type: Number}) maxValue = 100;\n  @property({type: Number}) minValue = 0;\n  @property({type: Boolean}) showLabels: boolean = false;\n  @property({type: Number}) primaryTickmarkInterval = 50;\n  @property({type: Number}) secondaryTickmarkInterval = 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}) state: InstrumentState = InstrumentState.active;\n  @property({type: String}) priority: Priority = Priority.regular;\n  @property({type: String}) type: ObcGaugeRadialType =\n    ObcGaugeRadialType.filled;\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n  @property({type: String}) tickmarkStyle: TickmarkStyle =\n    TickmarkStyle.regular;\n  @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n\n  getAngle(v: number): number {\n    const span = this.maxValue - this.minValue;\n    if (!Number.isFinite(span) || span <= 0) {\n      return -135;\n    }\n\n    return ((v - this.minValue) / span) * 270 - 135;\n  }\n\n  override render() {\n    return html`\n      <obc-instrument-radial\n        .value=${this.value}\n        .state=${this.state}\n        .priority=${this.priority}\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        .animateSetpoint=${this.animateSetpoint}\n        .maxValue=${this.maxValue}\n        .minValue=${this.minValue}\n        .getAngle=${this.getAngle}\n        .showLabels=${this.showLabels}\n        .primaryTickmarkInterval=${this.primaryTickmarkInterval}\n        .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}\n        .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}\n        .type=${this.type}\n        .needleType=${this.type}\n        .tickmarksInside=${this.tickmarksInside}\n        .tickmarkStyle=${this.tickmarkStyle}\n        .advices=${this.advices}\n      >\n      </obc-instrument-radial>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-gauge-radial': ObcGaugeRadial;\n  }\n}\n"],"names":["ObcGaugeRadialType"],"mappings":"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"}
+{"version":3,"file":"gauge-radial.js","sources":["../../../src/navigation-instruments/gauge-radial/gauge-radial.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS, type TemplateResult} from 'lit';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './gauge-radial.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {property} from 'lit/decorators.js';\nimport {AdviceType} from '../watch/advice.js';\nimport {InstrumentState, 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';\nimport '../readout/readout.js';\nimport {\n  ReadoutStackVerticalAlignment,\n  ReadoutVariant,\n} from '../readout/readout.js';\n\nexport enum ObcGaugeRadialType {\n  filled = 'filled',\n  bar = 'bar',\n  needle = 'needle',\n}\n\nexport enum GaugeRadialSector {\n  deg270 = '270',\n  deg180 = '180',\n  deg90Left = '90-left',\n  deg90Right = '90-right',\n}\n\nexport interface GaugeRadialAdvice {\n  minValue: number;\n  maxValue: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\n/**\n * `<obc-gauge-radial>` — Configurable radial gauge for generic numeric values.\n *\n * `ObcGaugeRadial` is a thin wrapper around `<obc-instrument-radial>` that adds\n * domain-independent value-to-angle mapping with automatic range handling for\n * both positive-only and bipolar (negative-to-positive) scales. It inherits a\n * full setpoint property bundle from {@link SetpointMixin}, including\n * auto at-setpoint detection, dual-marker adjustment preview, and deadband\n * tuning — no manual wiring required.\n *\n * ## Features\n *\n * - **Three display types**: `filled` (solid arc), `bar` (thinner arc), and\n *   `needle` (pointer indicator) via the `type` property.\n * - **Sector sweep**: `sector` selects the arc span (`270`, `180`, `90-left`, or `90-right`).\n *   The configured `minValue..maxValue` always spans the full sector. For the\n *   centered sectors (`270`, `180`) a symmetric range places `0` at 12 o'clock;\n *   for `90-left`/`90-right` the range midpoint sits at the middle of the quadrant.\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. Not shown on the `90-left` /\n *   `90-right` sectors.\n *\n * ## Usage Guidelines\n *\n * - Set `minValue` / `maxValue` to define the scale range.\n * - Use `priority` to switch between regular and enhanced color palettes.\n * - Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to\n *   control tickmark density.\n * - Enable `showLabels` to show numeric labels at primary tickmarks.\n * - Enable `showReadout` with optional `label` and `unit`. Layout depends on `sector`\n *   and `type`: **270** filled/bar — value at center + a label-only `meta` row in\n *   the bottom gap (two separate readouts); **180** filled/bar — a single centered\n *   stack (value + label/unit) at the bottom; **270** needle — bottom stack;\n *   **180** needle — no readout; **90-left** / **90-right** filled/bar — corner\n *   readout in a square host; **90** needle — no readout.\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 * - Keep domain-specific logic (units, formatting) in the parent view; this\n *   component is intentionally unit-agnostic.\n *\n * ## Example\n *\n * ```html\n * <obc-gauge-radial\n *   value=\"42\"\n *   minValue=\"0\"\n *   maxValue=\"100\"\n *   type=\"filled\"\n *   priority=\"enhanced\"\n *   showLabels\n *   primaryTickmarkInterval=\"25\"\n *   secondaryTickmarkInterval=\"5\"\n *   setpoint=\"60\"\n * ></obc-gauge-radial>\n * ```\n *\n * @element obc-gauge-radial\n * @typedef {import('./gauge-radial.js').GaugeRadialAdvice} GaugeRadialAdvice\n */\n@customElement('obc-gauge-radial')\nexport class ObcGaugeRadial extends SetpointMixin(LitElement) {\n  @property({type: Number}) value = 0;\n  @property({type: Number}) maxValue = 100;\n  @property({type: Number}) minValue = 0;\n  @property({type: Boolean}) showLabels: boolean = false;\n  @property({type: Number}) primaryTickmarkInterval = 50;\n  @property({type: Number}) secondaryTickmarkInterval = 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}) state: InstrumentState = InstrumentState.active;\n  @property({type: String}) priority: Priority = Priority.regular;\n  @property({type: String}) type: ObcGaugeRadialType =\n    ObcGaugeRadialType.filled;\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n  @property({type: String}) tickmarkStyle: TickmarkStyle =\n    TickmarkStyle.regular;\n  /** Caution/alert arcs. Ignored on `sector: 90-left` / `90-right`. */\n  @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n  @property({type: String, reflect: true}) sector: GaugeRadialSector =\n    GaugeRadialSector.deg270;\n  @property({type: Boolean}) showReadout = false;\n  @property({type: String}) label = '';\n  @property({type: String}) unit = '';\n  @property({type: Number}) fractionDigits = 0;\n\n  private get sectorAngles(): {sweep: number; start: number} {\n    switch (this.sector) {\n      case GaugeRadialSector.deg180:\n        return {sweep: 180, start: -90};\n      case GaugeRadialSector.deg90Left:\n        return {sweep: 90, start: -90};\n      case GaugeRadialSector.deg90Right:\n        return {sweep: 90, start: 0};\n      case GaugeRadialSector.deg270:\n      default:\n        return {sweep: 270, start: -135};\n    }\n  }\n\n  /**\n   * Per-edge crop (%) of the shared, origin-centered 448 SVG box each sector\n   * shows. All sectors render at the same natural scale, so the dial stays the\n   * same size; the sector only windows a different part (270 whole, 180 wide,\n   * 90 a quadrant).\n   */\n  private get sectorClips(): {\n    top: number;\n    bottom: number;\n    left: number;\n    right: number;\n  } {\n    switch (this.sector) {\n      case GaugeRadialSector.deg180:\n        return {top: 0, bottom: 44, left: 0, right: 0};\n      case GaugeRadialSector.deg90Left:\n        return {top: 0, bottom: 45, left: 0, right: 45};\n      case GaugeRadialSector.deg90Right:\n        return {top: 0, bottom: 45, left: 45, right: 0};\n      case GaugeRadialSector.deg270:\n      default:\n        return {top: 0, bottom: 0, left: 0, right: 0};\n    }\n  }\n\n  private get isSector90(): boolean {\n    return (\n      this.sector === GaugeRadialSector.deg90Left ||\n      this.sector === GaugeRadialSector.deg90Right\n    );\n  }\n\n  // Arrow form so `this` binds when passed as `.getAngle=${this.getAngle}`\n  // to <obc-instrument-radial>. Do not convert to a method.\n  getAngle = (v: number): number => {\n    const {sweep, start} = this.sectorAngles;\n    const span = this.maxValue - this.minValue;\n    if (!Number.isFinite(span) || span <= 0) {\n      return start;\n    }\n\n    return ((v - this.minValue) / span) * sweep + start;\n  };\n\n  /** Renders one gauge readout; `withMeta`/`labelOnly` pick parts. */\n  private renderReadout({\n    className,\n    variant,\n    alignment = ReadoutStackVerticalAlignment.vertical,\n    withMeta = true,\n    labelOnly = false,\n  }: {\n    className: string;\n    variant: ReadoutVariant;\n    alignment?: ReadoutStackVerticalAlignment;\n    withMeta?: boolean;\n    labelOnly?: boolean;\n  }): TemplateResult {\n    // `labelOnly` already means \"no value\", so derive it instead of passing both.\n    const withValue = !labelOnly;\n    return html`\n      <obc-readout\n        class=${className}\n        direction=\"vertical\"\n        ?labelOnly=${labelOnly}\n        .variant=${variant}\n        .alignment=${alignment}\n        .valuePriority=${withValue ? this.priority : undefined}\n        .value=${withValue ? this.value : undefined}\n        .fractionDigits=${this.fractionDigits}\n        .label=${withMeta ? this.label : ''}\n        .unit=${withMeta ? this.unit : ''}\n      ></obc-readout>\n    `;\n  }\n\n  private renderReadouts() {\n    if (!this.showReadout) {\n      return nothing;\n    }\n\n    const isNeedle = this.type === ObcGaugeRadialType.needle;\n    const is90 = this.isSector90;\n    const is180 = this.sector === GaugeRadialSector.deg180;\n\n    if (isNeedle && (is180 || is90)) {\n      return nothing;\n    }\n\n    // 90 filled/bar: enhanced corner readout (bold value + label/unit).\n    if (is90) {\n      return this.renderReadout({\n        className: 'gauge-readout-meta',\n        variant: ReadoutVariant.enhanced,\n      });\n    }\n\n    // 270 needle and 180 filled/bar: centered stack (value weight follows `priority`).\n    if (isNeedle || is180) {\n      return this.renderReadout({\n        className: 'gauge-readout-meta',\n        variant: ReadoutVariant.stack,\n        alignment: ReadoutStackVerticalAlignment.center,\n      });\n    }\n\n    // 270 filled/bar: the value sits at the circle center and the label/unit row\n    // lower in the bottom gap, so they are two separately-positioned readouts.\n    return html`\n      ${this.renderReadout({\n        className: 'gauge-readout-value',\n        variant: ReadoutVariant.enhanced,\n        withMeta: false,\n      })}\n      ${this.label || this.unit\n        ? this.renderReadout({\n            className: 'gauge-readout-meta',\n            variant: ReadoutVariant.stack,\n            alignment: ReadoutStackVerticalAlignment.center,\n            labelOnly: true,\n          })\n        : nothing}\n    `;\n  }\n\n  override render() {\n    const clips = this.sectorClips;\n    return html`\n      <div\n        class=${classMap({\n          'gauge-radial-root': true,\n          'type-needle': this.type === ObcGaugeRadialType.needle,\n          'sector-180': this.sector === GaugeRadialSector.deg180,\n          'sector-90-left': this.sector === GaugeRadialSector.deg90Left,\n          'sector-90-right': this.sector === GaugeRadialSector.deg90Right,\n        })}\n      >\n        <obc-instrument-radial\n          .value=${this.value}\n          .state=${this.state}\n          .priority=${this.priority}\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          .animateSetpoint=${this.animateSetpoint}\n          .maxValue=${this.maxValue}\n          .minValue=${this.minValue}\n          .getAngle=${this.getAngle}\n          .showLabels=${this.showLabels}\n          .primaryTickmarkInterval=${this.primaryTickmarkInterval}\n          .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}\n          .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}\n          .type=${this.type}\n          .needleType=${this.type}\n          .tickmarksInside=${this.tickmarksInside}\n          .tickmarkStyle=${this.tickmarkStyle}\n          .advices=${this.isSector90 ? [] : this.advices}\n          .clipTop=${clips.top}\n          .clipBottom=${clips.bottom}\n          .clipLeft=${clips.left}\n          .clipRight=${clips.right}\n          .endLabelsMaxMin=${this.sector === GaugeRadialSector.deg180}\n        >\n        </obc-instrument-radial>\n        ${this.renderReadouts()}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-gauge-radial': ObcGaugeRadial;\n  }\n}\n"],"names":["ObcGaugeRadialType","GaugeRadialSector"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBO,IAAK,uCAAAA,wBAAL;AACLA,sBAAA,QAAA,IAAS;AACTA,sBAAA,KAAA,IAAM;AACNA,sBAAA,QAAA,IAAS;AAHC,SAAAA;AAAA,GAAA,sBAAA,CAAA,CAAA;AAML,IAAK,sCAAAC,uBAAL;AACLA,qBAAA,QAAA,IAAS;AACTA,qBAAA,QAAA,IAAS;AACTA,qBAAA,WAAA,IAAY;AACZA,qBAAA,YAAA,IAAa;AAJH,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAiFL,IAAM,iBAAN,cAA6B,cAAc,UAAU,EAAE;AAAA,EAAvD,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,QAAQ;AACR,SAAA,WAAW;AACX,SAAA,WAAW;AACV,SAAA,aAAsB;AACvB,SAAA,0BAA0B;AAC1B,SAAA,4BAA4B;AAK5B,SAAA,2BACxB;AACwB,SAAA,QAAyB,gBAAgB;AACzC,SAAA,WAAqB,SAAS;AAC9B,SAAA,OACxB;AACyB,SAAA,kBAA2B;AAC5B,SAAA,gBACxB,cAAc;AAE2B,SAAA,UAA+B,CAAA;AACjC,SAAA,SACvC;AACyB,SAAA,cAAc;AACf,SAAA,QAAQ;AACR,SAAA,OAAO;AACP,SAAA,iBAAiB;AAkD3C,SAAA,WAAW,CAAC,MAAsB;AAChC,YAAM,EAAC,OAAO,MAAA,IAAS,KAAK;AAC5B,YAAM,OAAO,KAAK,WAAW,KAAK;AAClC,UAAI,CAAC,OAAO,SAAS,IAAI,KAAK,QAAQ,GAAG;AACvC,eAAO;AAAA,MACT;AAEA,cAAS,IAAI,KAAK,YAAY,OAAQ,QAAQ;AAAA,IAChD;AAAA,EAAA;AAAA,EAxDA,IAAY,eAA+C;AACzD,YAAQ,KAAK,QAAA;AAAA,MACX,KAAK;AACH,eAAO,EAAC,OAAO,KAAK,OAAO,IAAA;AAAA,MAC7B,KAAK;AACH,eAAO,EAAC,OAAO,IAAI,OAAO,IAAA;AAAA,MAC5B,KAAK;AACH,eAAO,EAAC,OAAO,IAAI,OAAO,EAAA;AAAA,MAC5B,KAAK;AAAA,MACL;AACE,eAAO,EAAC,OAAO,KAAK,OAAO,KAAA;AAAA,IAAI;AAAA,EAErC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAY,cAKV;AACA,YAAQ,KAAK,QAAA;AAAA,MACX,KAAK;AACH,eAAO,EAAC,KAAK,GAAG,QAAQ,IAAI,MAAM,GAAG,OAAO,EAAA;AAAA,MAC9C,KAAK;AACH,eAAO,EAAC,KAAK,GAAG,QAAQ,IAAI,MAAM,GAAG,OAAO,GAAA;AAAA,MAC9C,KAAK;AACH,eAAO,EAAC,KAAK,GAAG,QAAQ,IAAI,MAAM,IAAI,OAAO,EAAA;AAAA,MAC/C,KAAK;AAAA,MACL;AACE,eAAO,EAAC,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA;AAAA,IAAC;AAAA,EAElD;AAAA,EAEA,IAAY,aAAsB;AAChC,WACE,KAAK,WAAW,aAChB,KAAK,WAAW;AAAA,EAEpB;AAAA;AAAA,EAeQ,cAAc;AAAA,IACpB;AAAA,IACA;AAAA,IACA,YAAY,8BAA8B;AAAA,IAC1C,WAAW;AAAA,IACX,YAAY;AAAA,EAAA,GAOK;AAEjB,UAAM,YAAY,CAAC;AACnB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA;AAAA,qBAEJ,SAAS;AAAA,mBACX,OAAO;AAAA,qBACL,SAAS;AAAA,yBACL,YAAY,KAAK,WAAW,MAAS;AAAA,iBAC7C,YAAY,KAAK,QAAQ,MAAS;AAAA,0BACzB,KAAK,cAAc;AAAA,iBAC5B,WAAW,KAAK,QAAQ,EAAE;AAAA,gBAC3B,WAAW,KAAK,OAAO,EAAE;AAAA;AAAA;AAAA,EAGvC;AAAA,EAEQ,iBAAiB;AACvB,QAAI,CAAC,KAAK,aAAa;AACrB,aAAO;AAAA,IACT;AAEA,UAAM,WAAW,KAAK,SAAS;AAC/B,UAAM,OAAO,KAAK;AAClB,UAAM,QAAQ,KAAK,WAAW;AAE9B,QAAI,aAAa,SAAS,OAAO;AAC/B,aAAO;AAAA,IACT;AAGA,QAAI,MAAM;AACR,aAAO,KAAK,cAAc;AAAA,QACxB,WAAW;AAAA,QACX,SAAS,eAAe;AAAA,MAAA,CACzB;AAAA,IACH;AAGA,QAAI,YAAY,OAAO;AACrB,aAAO,KAAK,cAAc;AAAA,QACxB,WAAW;AAAA,QACX,SAAS,eAAe;AAAA,QACxB,WAAW,8BAA8B;AAAA,MAAA,CAC1C;AAAA,IACH;AAIA,WAAO;AAAA,QACH,KAAK,cAAc;AAAA,MACnB,WAAW;AAAA,MACX,SAAS,eAAe;AAAA,MACxB,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,QACA,KAAK,SAAS,KAAK,OACjB,KAAK,cAAc;AAAA,MACjB,WAAW;AAAA,MACX,SAAS,eAAe;AAAA,MACxB,WAAW,8BAA8B;AAAA,MACzC,WAAW;AAAA,IAAA,CACZ,IACD,OAAO;AAAA;AAAA,EAEf;AAAA,EAES,SAAS;AAChB,UAAM,QAAQ,KAAK;AACnB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,qBAAqB;AAAA,MACrB,eAAe,KAAK,SAAS;AAAA,MAC7B,cAAc,KAAK,WAAW;AAAA,MAC9B,kBAAkB,KAAK,WAAW;AAAA,MAClC,mBAAmB,KAAK,WAAW;AAAA;AAAA,IAAA,CACpC,CAAC;AAAA;AAAA;AAAA,mBAGS,KAAK,KAAK;AAAA,mBACV,KAAK,KAAK;AAAA,sBACP,KAAK,QAAQ;AAAA,sBACb,KAAK,QAAQ;AAAA,yBACV,KAAK,WAAW;AAAA,oCACL,KAAK,sBAAsB;AAAA,8BACjC,KAAK,gBAAgB;AAAA,sBAC7B,KAAK,QAAQ;AAAA,4BACP,KAAK,cAAc;AAAA,oCACX,KAAK,sBAAsB;AAAA,6BAClC,KAAK,eAAe;AAAA,sBAC3B,KAAK,QAAQ;AAAA,sBACb,KAAK,QAAQ;AAAA,sBACb,KAAK,QAAQ;AAAA,wBACX,KAAK,UAAU;AAAA,qCACF,KAAK,uBAAuB;AAAA,uCAC1B,KAAK,yBAAyB;AAAA,sCAC/B,KAAK,wBAAwB;AAAA,kBACjD,KAAK,IAAI;AAAA,wBACH,KAAK,IAAI;AAAA,6BACJ,KAAK,eAAe;AAAA,2BACtB,KAAK,aAAa;AAAA,qBACxB,KAAK,aAAa,CAAA,IAAK,KAAK,OAAO;AAAA,qBACnC,MAAM,GAAG;AAAA,wBACN,MAAM,MAAM;AAAA,sBACd,MAAM,IAAI;AAAA,uBACT,MAAM,KAAK;AAAA,6BACL,KAAK,WAAW,KAAA;AAAA;AAAA;AAAA,UAGnC,KAAK,gBAAgB;AAAA;AAAA;AAAA,EAG7B;AAGF;AAzNa,eAwNK,SAAS,UAAU,cAAc;AAvNvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,eACe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,eAEe,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,eAGe,WAAA,YAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAJd,eAIgB,WAAA,cAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GALb,eAKe,WAAA,2BAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,eAMe,WAAA,6BAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAXb,eAWe,WAAA,4BAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAbb,eAae,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAdb,eAce,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,eAee,WAAA,QAAA,CAAA;AAEC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAjBd,eAiBgB,WAAA,mBAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAlBb,eAkBe,WAAA,iBAAA,CAAA;AAGiB,gBAAA;AAAA,EAA1C,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GArB9B,eAqBgC,WAAA,WAAA,CAAA;AACF,gBAAA;AAAA,EAAxC,SAAS,EAAC,MAAM,QAAQ,SAAS,MAAK;AAAA,GAtB5B,eAsB8B,WAAA,UAAA,CAAA;AAEd,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAxBd,eAwBgB,WAAA,eAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAzBb,eAyBe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA1Bb,eA0Be,WAAA,QAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA3Bb,eA2Be,WAAA,kBAAA,CAAA;AA3Bf,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}

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

@@ -393,6 +393,10 @@ const componentStyle = css`
   text-align: center;
 }
 
+.readout.stack.vertical.alignment-center .instrument-label-unit-container {
+  align-items: center;
+}
+
 .readout.stack.vertical.alignment-vertical {
   justify-items: end;
 }