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

package/src/navigation-instruments/readout-list-item/readout-list-item.css

@@ -228,58 +228,25 @@
     }
   }
 
-  &:is(
-    .alert-low-integrity,
-    .alert-invalid,
-    .alert-caution,
-    .alert-warning,
-    .alert-alarm
-  ) {
-    background: var(--_obc-readout-list-item-alert-background);
-    border: 1px solid var(--_obc-readout-list-item-alert-border);
+  &:is(.data-low-integrity, .data-invalid) {
+    background: var(--_obc-readout-list-item-data-background);
+    border: 1px solid var(--_obc-readout-list-item-data-border);
     border-radius: 4px;
   }
 
-  &.alert-low-integrity {
-    --_obc-readout-list-item-alert-background: var(
+  &.data-low-integrity {
+    --_obc-readout-list-item-data-background: var(
       --alert-low-integrity-background-color
     );
-    --_obc-readout-list-item-alert-border: var(
+    --_obc-readout-list-item-data-border: var(
       --alert-low-integrity-border-color
     );
   }
 
-  &.alert-invalid {
-    --_obc-readout-list-item-alert-background: var(
+  &.data-invalid {
+    --_obc-readout-list-item-data-background: var(
       --alert-invalid-background-color
     );
-    --_obc-readout-list-item-alert-border: var(--alert-invalid-border-color);
-  }
-
-  &.alert-caution {
-    --_obc-readout-list-item-alert-background: var(
-      --alert-caution-container-background-color
-    );
-    --_obc-readout-list-item-alert-border: var(
-      --alert-caution-container-border-color
-    );
-  }
-
-  &.alert-warning {
-    --_obc-readout-list-item-alert-background: var(
-      --alert-warning-container-background-color
-    );
-    --_obc-readout-list-item-alert-border: var(
-      --alert-warning-container-border-color
-    );
-  }
-
-  &.alert-alarm {
-    --_obc-readout-list-item-alert-background: var(
-      --alert-alarm-container-background-color
-    );
-    --_obc-readout-list-item-alert-border: var(
-      --alert-alarm-container-border-color
-    );
+    --_obc-readout-list-item-data-border: var(--alert-invalid-border-color);
   }
 }

package/src/navigation-instruments/readout-list-item/readout-list-item.stories.ts

@@ -4,9 +4,15 @@ import {useArgs} from 'storybook/preview-api';
 import {
   ReadoutListItemSize,
   ReadoutListItemStacking,
-  ReadoutListItemAlertState,
+  ReadoutListItemDataState,
   ReadoutListItemPriority,
 } from './readout-list-item.js';
+import type {AlertFrameConfig} from '../../components/alert-frame/alert-frame.js';
+import {
+  ObcAlertFrameMode,
+  ObcAlertFrameType,
+} from '../../components/alert-frame/alert-frame.js';
+import {AlertType} from '../../types.js';
 import './readout-list-item.js';
 import '../../icons/icon-placeholder.js';
 
@@ -14,7 +20,8 @@ type ReadoutListItemStoryArgs = {
   size: ReadoutListItemSize;
   stacking: ReadoutListItemStacking;
   priority: ReadoutListItemPriority;
-  alertState: ReadoutListItemAlertState;
+  dataState: ReadoutListItemDataState;
+  alert: AlertFrameConfig | false;
   hasSetpoint: boolean;
   setpointValue: number;
   hasLabel: boolean;
@@ -132,7 +139,8 @@ const defaultArgs: ReadoutListItemStoryArgs = {
   size: ReadoutListItemSize.base,
   stacking: ReadoutListItemStacking.trailingUnit,
   priority: ReadoutListItemPriority.regular,
-  alertState: ReadoutListItemAlertState.none,
+  dataState: ReadoutListItemDataState.none,
+  alert: false,
   hasSetpoint: false,
   setpointValue: 123,
   hasDegree: true,
@@ -149,6 +157,7 @@ const defaultArgs: ReadoutListItemStoryArgs = {
   value: 123,
   fractionDigits: 0,
   showZeroPadding: false,
+  labelOnly: false,
 };
 
 function renderReadoutListItem(args: Partial<ReadoutListItemStoryArgs>) {
@@ -158,7 +167,8 @@ function renderReadoutListItem(args: Partial<ReadoutListItemStoryArgs>) {
       .size=${resolved.size}
       .stacking=${resolved.stacking}
       .priority=${resolved.priority}
-      .alertState=${resolved.alertState}
+      .dataState=${resolved.dataState}
+      .alert=${resolved.alert}
       .hasSetpoint=${resolved.hasSetpoint}
       .setpointValue=${resolved.setpointValue}
       .hasLabel=${resolved.hasLabel}
@@ -260,10 +270,10 @@ const meta = {
       options: Object.values(ReadoutListItemPriority),
       table: {category: 'Readout'},
     },
-    alertState: {
-      name: 'Alert State',
+    dataState: {
+      name: 'Data State',
       control: {type: 'select'},
-      options: Object.values(ReadoutListItemAlertState),
+      options: Object.values(ReadoutListItemDataState),
       table: {category: 'Readout'},
     },
     hasSetpoint: {
@@ -386,7 +396,7 @@ function renderStackingMatrix({
             stacking,
             priority,
             hasSetpoint,
-            alertState: ReadoutListItemAlertState.none,
+            dataState: ReadoutListItemDataState.none,
             hasUnit,
             hasSource,
             value: 123,
@@ -429,20 +439,53 @@ export const LeadingSrc: Story = {
     }),
 };
 
-export const AlertStates: Story = {
+export const DataStates: Story = {
   render: () => {
-    const alerts = Object.values(ReadoutListItemAlertState);
-    const cases: ReadoutShowcaseCase[] = alerts.map((alertState) => ({
-      label: `${alertState}`,
+    const dataStates = Object.values(ReadoutListItemDataState);
+    const cases: ReadoutShowcaseCase[] = dataStates.map((dataState) => ({
+      label: `${dataState}`,
       args: {
         size: ReadoutListItemSize.base,
         stacking: ReadoutListItemStacking.trailingUnit,
         priority: ReadoutListItemPriority.regular,
-        alertState,
+        dataState,
         value: 123,
       },
     }));
 
-    return renderShowcaseSections([{title: 'Alert States', cases}]);
+    return renderShowcaseSections([{title: 'Data States', cases}]);
+  },
+};
+
+export const Alarm: Story = {
+  args: {
+    value: 123,
+    alert: {
+      status: AlertType.Alarm,
+      mode: ObcAlertFrameMode.ackedActive,
+      type: ObcAlertFrameType.Regular,
+    },
+  },
+};
+
+export const IsaCritical: Story = {
+  args: {
+    value: 123,
+    alert: {
+      status: AlertType.IsaCritical,
+      mode: ObcAlertFrameMode.unackedActive,
+      type: ObcAlertFrameType.Regular,
+    },
+  },
+};
+
+export const IsaLowUnackedRectified: Story = {
+  args: {
+    value: 123,
+    alert: {
+      status: AlertType.IsaLow,
+      mode: ObcAlertFrameMode.unackedRectified,
+      type: ObcAlertFrameType.Regular,
+    },
   },
 };

package/src/navigation-instruments/readout-list-item/readout-list-item.ts

@@ -9,14 +9,15 @@ import {Priority} from '../types.js';
 import '../readout-setpoint/readout-setpoint.js';
 import '../../icons/icon-input-right.js';
 import {ReadoutSetpointMode} from '../readout-setpoint/readout-setpoint.js';
+import {
+  type AlertFrameConfig,
+  wrapWithAlertFrame,
+} from '../../components/alert-frame/alert-frame.js';
 
-export enum ReadoutListItemAlertState {
+export enum ReadoutListItemDataState {
   none = 'none',
   lowIntegrity = 'low-integrity',
   invalid = 'invalid',
-  caution = 'caution',
-  warning = 'warning',
-  alarm = 'alarm',
 }
 
 export enum ReadoutListItemSize {
@@ -47,7 +48,8 @@ export enum ReadoutListItemPriority {
  * - **Sizes:** `base`, `priority`, and `enhanced` typography/padding scales.
  * - **Stacking modes:** `trailing-unit`, `leading-unit`, and `leading-src` control where unit/source appear relative to the label/value.
  * - **Priority styling:** `priority` controls emphasis and setpoint presentation (`regular`, `enhanced`, `setpoint`, `setpoint-flip-flop`).
- * - **Alert states:** Supports `alertState` styling for integrity/invalid and attention states (`caution`, `warning`, `alarm`).
+ * - **Data states:** Supports `dataState` styling for `low-integrity` and `invalid` data quality.
+ * - **Alert frame:** Optional `alert` wrapper for caution, warning, alarm, and other alert-frame statuses.
  * - **Formatting:** Supports numeric formatting, fixed-length width templates, hinted zeros, and optional degree suffix (`°`).
  *
  * ### Usage Guidelines
@@ -71,7 +73,9 @@ export class ObcReadoutListItem extends LitElement {
   @property({type: String})
   priority: ReadoutListItemPriority = ReadoutListItemPriority.regular;
   @property({type: String})
-  alertState: ReadoutListItemAlertState = ReadoutListItemAlertState.none;
+  dataState: ReadoutListItemDataState = ReadoutListItemDataState.none;
+
+  @property({type: Object}) alert: AlertFrameConfig | boolean = false;
 
   @property({type: String}) label = '';
   @property({type: String}) unit = '';
@@ -369,46 +373,52 @@ export class ObcReadoutListItem extends LitElement {
   }
 
   override render() {
-    return html`
-      <div
-        class=${classMap({
-          root: true,
-          [`size-${this.size}`]: true,
-          [`stacking-${this.stacking}`]: true,
-          'priority-enhanced':
-            this.priority === ReadoutListItemPriority.enhanced,
-          'priority-setpoint':
-            this.priority === ReadoutListItemPriority.setpoint,
-          'priority-setpoint-flip-flop':
-            this.priority === ReadoutListItemPriority.setpointFlipFlop,
-          [`alert-${this.alertState}`]: true,
-          'has-leading-icon': this.hasLeadingIcon,
-          'has-value-icon': this.hasValueIcon,
-        })}
-        part="root"
-      >
-        <div class="content" part="content">
-          <div class="label-container" part="label-container">
-            ${this.hasLeadingIcon
-              ? html`<span class="leading-icon" aria-hidden="true"
-                  ><slot name="leading-icon"></slot
-                ></span>`
-              : nothing}
-            ${this.renderLabelContainer()}
+    return wrapWithAlertFrame(
+      this.alert,
+      html`
+        <div
+          class=${classMap({
+            root: true,
+            [`size-${this.size}`]: true,
+            [`stacking-${this.stacking}`]: true,
+            'priority-enhanced':
+              this.priority === ReadoutListItemPriority.enhanced,
+            'priority-setpoint':
+              this.priority === ReadoutListItemPriority.setpoint,
+            'priority-setpoint-flip-flop':
+              this.priority === ReadoutListItemPriority.setpointFlipFlop,
+            'data-none': this.dataState === ReadoutListItemDataState.none,
+            'data-low-integrity':
+              this.dataState === ReadoutListItemDataState.lowIntegrity,
+            'data-invalid': this.dataState === ReadoutListItemDataState.invalid,
+            'has-leading-icon': this.hasLeadingIcon,
+            'has-value-icon': this.hasValueIcon,
+          })}
+          part="root"
+        >
+          <div class="content" part="content">
+            <div class="label-container" part="label-container">
+              ${this.hasLeadingIcon
+                ? html`<span class="leading-icon" aria-hidden="true"
+                    ><slot name="leading-icon"></slot
+                  ></span>`
+                : nothing}
+              ${this.renderLabelContainer()}
+            </div>
+
+            ${this.labelOnly
+              ? nothing
+              : html`
+                  <div class="value-container" part="value-container">
+                    ${this.renderValue()} ${this.renderTrailingUnit()}
+                  </div>
+
+                  ${this.renderTrailingSource()}
+                `}
           </div>
-
-          ${this.labelOnly
-            ? nothing
-            : html`
-                <div class="value-container" part="value-container">
-                  ${this.renderValue()} ${this.renderTrailingUnit()}
-                </div>
-
-                ${this.renderTrailingSource()}
-              `}
         </div>
-      </div>
-    `;
+      `
+    );
   }
 
   static override styles = unsafeCSS(componentStyle);

package/src/navigation-instruments/watch/tickmark.ts

@@ -49,6 +49,7 @@ export function tickmark(
     maxDigits,
     color,
     radiusOffset = 0,
+    endLabelsMaxMin = false,
   }: {
     size: TickmarkType;
     style: TickmarkStyle;
@@ -60,6 +61,7 @@ export function tickmark(
     maxDigits: number;
     color?: string;
     radiusOffset?: number;
+    endLabelsMaxMin?: boolean;
   }
 ): SVGTemplateResult | SVGTemplateResult[] {
   // check if scale is not infinite
@@ -87,7 +89,9 @@ export function tickmark(
     innerRadius = 328 / 2 + rOff;
     outerRadius = 336 / 2 + rOff;
   } else {
-    return [textSvg(text ?? '', angle, inside, scale, textRadius)];
+    return [
+      textSvg(text ?? '', {angle, inside, scale, textRadius, endLabelsMaxMin}),
+    ];
   }
 
   // When inside, anchor ticks at the outer ring edge and grow inward,
@@ -115,7 +119,10 @@ export function tickmark(
   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 === undefined) {
-      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;
@@ -132,11 +139,31 @@ export function tickmark(
 
 function textSvg(
   text: string,
-  angle: number,
-  inside: boolean,
-  scale: number,
-  textRadius: number
+  {
+    angle,
+    inside,
+    scale,
+    textRadius,
+    endLabelsMaxMin = false,
+  }: {
+    angle: number;
+    inside: boolean;
+    scale: number;
+    textRadius: number;
+    endLabelsMaxMin?: boolean;
+  }
 ) {
+  const radHoriz = (angle * Math.PI) / 180;
+  // "Max-min" placement: horizontal end labels (±90°) sit off the dead-center
+  // tick (below outside / lifted inside), inset inward by label width.
+  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/src/navigation-instruments/watch/watch.ts

@@ -176,7 +176,7 @@ const RADIAL_SETPOINT_INWARD_ADJUST = 4;
  * @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.
  */
 @customElement('obc-watch')
 export class ObcWatch extends LitElement {
@@ -231,8 +231,21 @@ export class ObcWatch extends LitElement {
   @property({type: Number}) currentSymbolRadius: number | null = null;
   @property({type: String}) currentColor: string | undefined;
   @property({type: Boolean}) starboardPortIndicator: boolean = false;
-  @property({type: Number}) clipTop: number = 0; // in percent of height
-  @property({type: Number}) clipBottom: number = 0; // in percent of height
+  /** Top clip, % of height. Ignored when `zoomToFitArc` is true. */
+  @property({type: Number}) clipTop: number = 0;
+  /** Bottom clip, % of height. Ignored when `zoomToFitArc` is true. */
+  @property({type: Number}) clipBottom: number = 0;
+  /** Left clip, % of width — horizontal counterpart of clipTop/bottom (90° sectors). Ignored when `zoomToFitArc`. */
+  @property({type: Number}) clipLeft: number = 0;
+  /** Right clip, % of width — horizontal counterpart of clipTop/bottom (90° sectors). Ignored when `zoomToFitArc`. */
+  @property({type: Number}) clipRight: number = 0;
+  /**
+   * 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`.
+   */
+  @property({type: Boolean}) endLabelsMaxMin: boolean = false;
   @property({type: Number}) scaleWindIcon: number = 1;
   @property({type: Number}) rotation: number | undefined;
   @property({type: Boolean}) zoomToFitArc: boolean = false;
@@ -342,6 +355,18 @@ export class ObcWatch extends LitElement {
 
   private _rOff = 0;
 
+  /**
+   * 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(base: number): number {
+    return base + this._rOff;
+  }
+
   private watchCircle(): SVGTemplateResult | SVGTemplateResult[] {
     const rings = [];
     if (this.state !== InstrumentState.off) {
@@ -349,18 +374,19 @@ export class ObcWatch 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 !== WatchCircleType.single) {
-        const r1 = RING2_RADIUS + this._rOff;
-        const r2 =
-          (this.watchCircleType === WatchCircleType.doubleThin
+        const r1 = this._bandRadius(RING2_RADIUS);
+        const r2 = this._bandRadius(
+          this.watchCircleType === WatchCircleType.doubleThin
             ? RING3B_RADIUS
-            : RING3_RADIUS) + this._rOff;
+            : RING3_RADIUS
+        );
         const r = (r1 + r2) / 2;
         const strokeWidth = r1 - r2;
         rings.push(
@@ -372,8 +398,8 @@ export class ObcWatch extends LitElement {
         );
       }
       if (this.watchCircleType === 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(
@@ -389,8 +415,8 @@ export class ObcWatch 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,
         });
@@ -422,7 +448,7 @@ export class ObcWatch 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',
@@ -432,7 +458,7 @@ export class ObcWatch 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',
@@ -442,7 +468,7 @@ export class ObcWatch 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',
@@ -476,7 +502,10 @@ export class ObcWatch extends LitElement {
       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: number) => Rm * Math.sin(toRad(deg));
     const gy = (deg: number) => -Rm * Math.cos(toRad(deg));
 
@@ -594,8 +623,8 @@ export class ObcWatch 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: startAngle,
         endAngle: endAngle,
         roundInsideCut: false,
@@ -638,7 +667,7 @@ export class ObcWatch 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"
@@ -705,17 +734,22 @@ export class ObcWatch 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;
+    // Route through _bandRadius so inside labels track the (zoom-shifted) inner
+    // band edge; the coupling is intentional (see _bandRadius INVARIANT).
+    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)
     );
@@ -731,6 +765,7 @@ export class ObcWatch extends LitElement {
         maxDigits,
         color: t.color,
         radiusOffset: rOff,
+        endLabelsMaxMin: this.endLabelsMaxMin,
       })
     );
     const advices = this.advices