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

package/bundle/openbridge-webcomponents.bundle.js

@@ -696,7 +696,7 @@ function adjustRectHeightForStroke(rectY, rectHeight, viewBoxMinY, viewBoxMaxY,
   }
   return { y: adjustedY, height: shrinkedHeight };
 }
-const componentStyle$1q = i$7`
+const componentStyle$1r = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -975,7 +975,7 @@ let ObcPoiGraphicLine = class extends i$4 {
   }
 };
 ObcPoiGraphicLine._idCounter = 0;
-ObcPoiGraphicLine.styles = r$7(componentStyle$1q);
+ObcPoiGraphicLine.styles = r$7(componentStyle$1r);
 __decorateClass$Ag([
   n$3({ type: Number })
 ], ObcPoiGraphicLine.prototype, "lineHeight", 2);
@@ -1179,7 +1179,7 @@ const e$1 = e$2(class extends i$3 {
     return E;
   }
 });
-const componentStyle$1p = i$7`
+const componentStyle$1q = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -1555,7 +1555,7 @@ let ObcPoiHeader = class extends i$4 {
     `;
   }
 };
-ObcPoiHeader.styles = r$7(componentStyle$1p);
+ObcPoiHeader.styles = r$7(componentStyle$1q);
 __decorateClass$Af([
   n$3({ type: String })
 ], ObcPoiHeader.prototype, "content", 2);
@@ -1577,7 +1577,7 @@ __decorateClass$Af([
 ObcPoiHeader = __decorateClass$Af([
   customElement("obc-poi-header")
 ], ObcPoiHeader);
-const componentStyle$1o = i$7`
+const componentStyle$1p = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -1805,7 +1805,7 @@ let ObcPoiLine = class extends i$4 {
     `;
   }
 };
-ObcPoiLine.styles = r$7(componentStyle$1o);
+ObcPoiLine.styles = r$7(componentStyle$1p);
 __decorateClass$Ae([
   n$3({ type: Number })
 ], ObcPoiLine.prototype, "height", 2);
@@ -1827,7 +1827,7 @@ __decorateClass$Ae([
 ObcPoiLine = __decorateClass$Ae([
   customElement("obc-poi-line")
 ], ObcPoiLine);
-const componentStyle$1n = i$7`
+const componentStyle$1o = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -1998,7 +1998,7 @@ const componentStyle$1n = i$7`
   filter: drop-shadow(0 1px 3px #000);
 }
 `;
-const componentStyle$1m = i$7`
+const componentStyle$1n = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -2319,7 +2319,7 @@ let ObcPoiSelectionFrame = class extends i$4 {
     >`;
   }
 };
-ObcPoiSelectionFrame.styles = r$7(componentStyle$1m);
+ObcPoiSelectionFrame.styles = r$7(componentStyle$1n);
 __decorateClass$Ad([
   n$3({ type: String })
 ], ObcPoiSelectionFrame.prototype, "type", 2);
@@ -2656,7 +2656,7 @@ let ObcPoiPointer = class extends i$4 {
     this.syncBoxFilterTargets();
   }
 };
-ObcPoiPointer.styles = r$7(componentStyle$1n);
+ObcPoiPointer.styles = r$7(componentStyle$1o);
 __decorateClass$Ac([
   n$3({ type: String })
 ], ObcPoiPointer.prototype, "type", 2);
@@ -2672,7 +2672,7 @@ __decorateClass$Ac([
 ObcPoiPointer = __decorateClass$Ac([
   customElement("obc-poi-pointer")
 ], ObcPoiPointer);
-const componentStyle$1l = i$7`
+const componentStyle$1m = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -2774,7 +2774,7 @@ let ObcRulerPointer = class extends i$4 {
     `;
   }
 };
-ObcRulerPointer.styles = r$7(componentStyle$1l);
+ObcRulerPointer.styles = r$7(componentStyle$1m);
 __decorateClass$Ab([
   n$3({ type: String })
 ], ObcRulerPointer.prototype, "type", 2);
@@ -5026,7 +5026,7 @@ const compentStyle$1f = i$7`
   opacity: var(--obc-poi-data-content-opacity, 1);
 }
 `;
-const componentStyle$1k = i$7`
+const componentStyle$1l = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -5616,7 +5616,7 @@ let ObcPoiObject = class extends i$4 {
     `;
   }
 };
-ObcPoiObject.styles = r$7(componentStyle$1k);
+ObcPoiObject.styles = r$7(componentStyle$1l);
 __decorateClass$A9([
   n$3({ type: String })
 ], ObcPoiObject.prototype, "type", 2);
@@ -6025,7 +6025,7 @@ __decorateClass$A7([
 __decorateClass$A7([
   n$3({ type: Boolean })
 ], AbstractPoiObject.prototype, "interactive");
-const componentStyle$1j = i$7`
+const componentStyle$1k = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -6528,7 +6528,7 @@ let ObcPoiObjectAton = class extends AbstractPoiObject {
 };
 ObcPoiObjectAton.styles = [
   ...AbstractPoiObject.styles,
-  r$7(componentStyle$1j)
+  r$7(componentStyle$1k)
 ];
 __decorateClass$A6([
   n$3({ type: String })
@@ -6696,7 +6696,7 @@ __decorateClass$A3([
 ObcPoiButtonData = __decorateClass$A3([
   customElement("obc-poi-button-data")
 ], ObcPoiButtonData);
-const componentStyle$1i = i$7`
+const componentStyle$1j = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -6812,7 +6812,7 @@ let ObcPoiObjectVessel = class extends AbstractPoiObject {
 };
 ObcPoiObjectVessel.styles = [
   ...AbstractPoiObject.styles,
-  r$7(componentStyle$1i)
+  r$7(componentStyle$1j)
 ];
 __decorateClass$A2([
   n$3({ type: String })
@@ -6891,7 +6891,7 @@ __decorateClass$A1([
 ObcPoiButtonVessel = __decorateClass$A1([
   customElement("obc-poi-button-vessel")
 ], ObcPoiButtonVessel);
-const componentStyle$1h = i$7`
+const componentStyle$1i = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -7906,7 +7906,7 @@ let ObcPoiCardHeader = class extends i$4 {
     `;
   }
 };
-ObcPoiCardHeader.styles = r$7(componentStyle$1h);
+ObcPoiCardHeader.styles = r$7(componentStyle$1i);
 __decorateClass$z_([
   n$3({ type: String })
 ], ObcPoiCardHeader.prototype, "variant", 2);
@@ -7934,7 +7934,7 @@ __decorateClass$z_([
 ObcPoiCardHeader = __decorateClass$z_([
   customElement("obc-poi-card-header")
 ], ObcPoiCardHeader);
-const componentStyle$1g = i$7`
+const componentStyle$1h = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -8256,7 +8256,7 @@ let ObcPoiCard = class extends i$4 {
     `;
   }
 };
-ObcPoiCard.styles = r$7(componentStyle$1g);
+ObcPoiCard.styles = r$7(componentStyle$1h);
 __decorateClass$zZ([
   n$3({ type: String })
 ], ObcPoiCard.prototype, "pointerDirection", 2);
@@ -8299,7 +8299,7 @@ __decorateClass$zZ([
 ObcPoiCard = __decorateClass$zZ([
   customElement("obc-poi-card")
 ], ObcPoiCard);
-const componentStyle$1f = i$7`
+const componentStyle$1g = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -8349,7 +8349,7 @@ const componentStyle$1f = i$7`
   gap: var(--obc-poi-controller-stack-gap, 8px);
 }
 `;
-const componentStyle$1e = i$7`
+const componentStyle$1f = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -8368,7 +8368,7 @@ const componentStyle$1e = i$7`
   display: contents;
 }
 `;
-const componentStyle$1d = i$7`
+const componentStyle$1e = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -8495,7 +8495,7 @@ const componentStyle$1d = i$7`
   --obc-poi-label-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);
 }
 `;
-const componentStyle$1c = i$7`
+const componentStyle$1d = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -8714,7 +8714,7 @@ const componentStyle$1c = i$7`
   transition: opacity 0.1s ease-out;
 }
 `;
-const componentStyle$1b = i$7`
+const componentStyle$1c = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -8761,7 +8761,7 @@ const n$1 = "important", i$1 = " !" + n$1, o$2 = e$2(class extends i$3 {
     return E;
   }
 });
-const componentStyle$1a = i$7`
+const componentStyle$1b = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -9413,7 +9413,7 @@ let ObcPoi = class extends i$4 {
     this.syncAttachedHeaderState();
   }
 };
-ObcPoi.styles = r$7(componentStyle$1a);
+ObcPoi.styles = r$7(componentStyle$1b);
 __decorateClass$zY([
   n$3({ type: String })
 ], ObcPoi.prototype, "type", 2);
@@ -9955,7 +9955,7 @@ const _PoiBase = class _PoiBase extends i$4 {
     `;
   }
 };
-_PoiBase.styles = [r$7(componentStyle$1b)];
+_PoiBase.styles = [r$7(componentStyle$1c)];
 let PoiBase = _PoiBase;
 __decorateClass$zX([
   n$3({ type: String })
@@ -10950,7 +10950,7 @@ let ObcPoiGroup = class extends i$4 {
     return true;
   }
 };
-ObcPoiGroup.styles = r$7(componentStyle$1c);
+ObcPoiGroup.styles = r$7(componentStyle$1d);
 __decorateClass$zU([
   n$3({ type: Boolean })
 ], ObcPoiGroup.prototype, "expand", 2);
@@ -12108,7 +12108,7 @@ let ObcPoiLayer = class extends i$4 {
   }
 };
 ObcPoiLayer.GROUP_LAYER_HOOK_ATTR = "data-in-poi-layer";
-ObcPoiLayer.styles = r$7(componentStyle$1d);
+ObcPoiLayer.styles = r$7(componentStyle$1e);
 __decorateClass$zT([
   n$3({ type: String })
 ], ObcPoiLayer.prototype, "label", 2);
@@ -12843,7 +12843,7 @@ let ObcPoiLayerStack = class extends i$4 {
 };
 ObcPoiLayerStack.STACK_JUMP_DURATION_MS = 100;
 ObcPoiLayerStack.STACK_RETURNING_ATTR = "data-stack-returning";
-ObcPoiLayerStack.styles = r$7(componentStyle$1e);
+ObcPoiLayerStack.styles = r$7(componentStyle$1f);
 __decorateClass$zS([
   n$3({ type: String, attribute: "selection-mode" })
 ], ObcPoiLayerStack.prototype, "selectionMode", 2);
@@ -13165,7 +13165,7 @@ let ObcPoiController = class extends i$4 {
     `;
   }
 };
-ObcPoiController.styles = r$7(componentStyle$1f);
+ObcPoiController.styles = r$7(componentStyle$1g);
 __decorateClass$zR([
   n$3({ type: String })
 ], ObcPoiController.prototype, "fit", 2);
@@ -16057,7 +16057,7 @@ __decorateClass$zp([
 ObcAutomationButtonReadoutStack = __decorateClass$zp([
   customElement("obc-automation-button-readout-stack")
 ], ObcAutomationButtonReadoutStack);
-const componentStyle$19 = i$7`
+const componentStyle$1a = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -16220,7 +16220,7 @@ let ObcCircularProgress = class extends i$4 {
     `;
   }
 };
-ObcCircularProgress.styles = r$7(componentStyle$19);
+ObcCircularProgress.styles = r$7(componentStyle$1a);
 __decorateClass$zo([
   n$3({ type: String })
 ], ObcCircularProgress.prototype, "mode", 2);
@@ -19466,7 +19466,7 @@ __decorateClass$z4([
 ObiEnergyBattery = __decorateClass$z4([
   customElement("obi-energy-battery")
 ], ObiEnergyBattery);
-const componentStyle$18 = i$7`
+const componentStyle$19 = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -32408,7 +32408,8 @@ function tickmark$1(angle, {
   rotation,
   maxDigits,
   color: color2,
-  radiusOffset = 0
+  radiusOffset = 0,
+  endLabelsMaxMin = false
 }) {
   if (scale === Infinity || scale < 0) {
     throw new Error("Tick scale is not valid");
@@ -32434,7 +32435,9 @@ function tickmark$1(angle, {
     innerRadius = 328 / 2 + rOff;
     outerRadius = 336 / 2 + rOff;
   } else {
-    return [textSvg(text ?? "", angle, inside, scale, textRadius)];
+    return [
+      textSvg(text ?? "", { angle, inside, scale, textRadius, endLabelsMaxMin })
+    ];
   }
   if (inside) {
     const outerRingRadius = 368 / 2 + rOff;
@@ -32453,7 +32456,10 @@ function tickmark$1(angle, {
   const tick = w`<line x1=${x1} y1=${y1} x2=${x2} y2=${y22} stroke=${colorName} stroke-width=${strokeWidth} vector-effect="non-scaling-stroke"/>`;
   if (text) {
     if (rotation === void 0) {
-      return [tick, textSvg(text, angle, inside, scale, textRadius)];
+      return [
+        tick,
+        textSvg(text, { angle, inside, scale, textRadius, endLabelsMaxMin })
+      ];
     } else {
       const newRadius = textRadius + (4 / scale + 5) * (inside ? -1 : 1) * maxDigits / 2;
       const textX = Math.sin(rad) * newRadius;
@@ -32466,7 +32472,21 @@ function tickmark$1(angle, {
   }
   return tick;
 }
-function textSvg(text, angle, inside, scale, textRadius) {
+function textSvg(text, {
+  angle,
+  inside,
+  scale,
+  textRadius,
+  endLabelsMaxMin = false
+}) {
+  const radHoriz = angle * Math.PI / 180;
+  if (endLabelsMaxMin && Math.abs(Math.cos(radHoriz)) < 1e-6) {
+    const sin = Math.sin(radHoriz);
+    const inward = inside ? (6 + (text.length - 1) * 2.5) / scale : 14 / scale;
+    const x2 = sin * (textRadius - inward);
+    const y3 = inside ? -(6 / scale) : 12 / scale;
+    return w`<text x=${x2} y=${y3} class="label bottom ${inside ? "inside" : ""}">${text}</text>`;
+  }
   let positionClass;
   if (angle === 0) {
     positionClass = "top";
@@ -35738,7 +35758,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
   }
 };
 _ObcChartLineBase.styles = [
-  r$7(componentStyle$18),
+  r$7(componentStyle$19),
   r$7(chartCommonStyle),
   r$7(chartLegendStyle),
   r$7(chartDebugStyle)
@@ -47044,7 +47064,7 @@ __decorateClass$wx([
 ObcAreaGraph = __decorateClass$wx([
   customElement("obc-area-graph")
 ], ObcAreaGraph);
-const componentStyle$17 = i$7`
+const componentStyle$18 = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -47572,7 +47592,7 @@ let ObcDonutChart = class extends i$4 {
   }
 };
 ObcDonutChart.styles = [
-  r$7(componentStyle$17),
+  r$7(componentStyle$18),
   r$7(chartCommonStyle),
   r$7(chartLegendStyle),
   r$7(chartDebugStyle)
@@ -47668,7 +47688,7 @@ let ObcLineGraph = class extends ObcChartLineBase {
 ObcLineGraph = __decorateClass$wv([
   customElement("obc-line-graph")
 ], ObcLineGraph);
-const componentStyle$16 = i$7`
+const componentStyle$17 = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -48196,7 +48216,7 @@ let ObcPieChart = class extends i$4 {
   }
 };
 ObcPieChart.styles = [
-  r$7(componentStyle$16),
+  r$7(componentStyle$17),
   r$7(chartCommonStyle),
   r$7(chartLegendStyle),
   r$7(chartDebugStyle)
@@ -48259,7 +48279,7 @@ __decorateClass$wu([
 ObcPieChart = __decorateClass$wu([
   customElement("obc-pie-chart")
 ], ObcPieChart);
-const componentStyle$15 = i$7`
+const componentStyle$16 = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -48707,7 +48727,7 @@ let ObcPolarChart = class extends i$4 {
   }
 };
 ObcPolarChart.styles = [
-  r$7(componentStyle$15),
+  r$7(componentStyle$16),
   r$7(chartCommonStyle),
   r$7(chartLegendStyle),
   r$7(chartDebugStyle)
@@ -48766,7 +48786,7 @@ __decorateClass$wt([
 ObcPolarChart = __decorateClass$wt([
   customElement("obc-polar-chart")
 ], ObcPolarChart);
-const componentStyle$14 = i$7`
+const componentStyle$15 = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -49117,7 +49137,7 @@ let ObcRadialBarChart = class extends i$4 {
   }
 };
 ObcRadialBarChart.styles = [
-  r$7(componentStyle$14),
+  r$7(componentStyle$15),
   r$7(chartCommonStyle),
   r$7(chartLegendStyle),
   r$7(chartDebugStyle)
@@ -53123,6 +53143,9 @@ let ObcWatch = class extends i$4 {
     this.starboardPortIndicator = false;
     this.clipTop = 0;
     this.clipBottom = 0;
+    this.clipLeft = 0;
+    this.clipRight = 0;
+    this.endLabelsMaxMin = false;
     this.scaleWindIcon = 1;
     this.zoomToFitArc = false;
     this.tickFadeAngle = 0;
@@ -53196,6 +53219,17 @@ let ObcWatch = class extends i$4 {
   get innerRingRadius() {
     return innerRingRadiusFor(this.watchCircleType);
   }
+  /**
+   * Radius for a dial-band edge under zoom: additive (`base + _rOff`), keeping
+   * band thickness constant in SVG units. INVARIANT: every band-edge radius
+   * (rings, value arc, bars, needles, inside-label `textRadius`) must go through
+   * this — mixing additive and multiplicative offsets misaligns ticks, labels,
+   * advice masks and arcs. The proportional experiments were removed for this
+   * reason (PR #903).
+   */
+  _bandRadius(base) {
+    return base + this._rOff;
+  }
   watchCircle() {
     const rings = [];
     if (this.state !== InstrumentState.off) {
@@ -53203,14 +53237,16 @@ let ObcWatch = class extends i$4 {
         <circle
           cx="0"
           cy="0"
-          r="${172 + this._rOff}"
+          r="${this._bandRadius(172)}"
           stroke="var(--instrument-frame-primary-color)"
           fill="none"
           stroke-width="24"
         />`);
       if (this.watchCircleType !== "single") {
-        const r1 = RING2_RADIUS + this._rOff;
-        const r2 = (this.watchCircleType === "doubleThin" ? RING3B_RADIUS : RING3_RADIUS) + this._rOff;
+        const r1 = this._bandRadius(RING2_RADIUS);
+        const r2 = this._bandRadius(
+          this.watchCircleType === "doubleThin" ? RING3B_RADIUS : RING3_RADIUS
+        );
         const r3 = (r1 + r2) / 2;
         const strokeWidth = r1 - r2;
         rings.push(
@@ -53222,8 +53258,8 @@ let ObcWatch = class extends i$4 {
         );
       }
       if (this.watchCircleType === "triple") {
-        const r1 = RING3_RADIUS + this._rOff;
-        const r2 = RING4_RADIUS + this._rOff;
+        const r1 = this._bandRadius(RING3_RADIUS);
+        const r2 = this._bandRadius(RING4_RADIUS);
         const r3 = (r1 + r2) / 2;
         const strokeWidth = r1 - r2;
         rings.push(
@@ -53238,8 +53274,8 @@ let ObcWatch = class extends i$4 {
         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
         });
@@ -53269,7 +53305,7 @@ let ObcWatch = class extends i$4 {
       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",
@@ -53278,7 +53314,7 @@ let ObcWatch = class extends i$4 {
         );
         result.push(w`
           ${circle("innerRing", {
-          radius: this.innerRingRadius + this._rOff,
+          radius: this._bandRadius(this.innerRingRadius),
           strokeWidth: 1,
           strokeColor: "var(--instrument-frame-tertiary-color)",
           strokePosition: "center",
@@ -53288,7 +53324,7 @@ let ObcWatch = class extends i$4 {
       } else {
         result.push(w`
           ${circle("innerRing", {
-          radius: OUTER_RING_RADIUS + this._rOff,
+          radius: this._bandRadius(OUTER_RING_RADIUS),
           strokeWidth: 1,
           strokeColor: "var(--instrument-frame-tertiary-color)",
           strokePosition: "center",
@@ -53316,7 +53352,7 @@ let ObcWatch = class extends i$4 {
       const largeArc = b2 - a2 > 180 ? 1 : 0;
       return `M 0 0 L ${x1} ${y1} A ${R2} ${R2} 0 ${largeArc} 1 ${x2} ${y22} Z`;
     };
-    const Rm = (OUTER_RING_RADIUS + this.innerRingRadius) / 2 + this._rOff;
+    const Rm = (this._bandRadius(OUTER_RING_RADIUS) + this._bandRadius(this.innerRingRadius)) / 2;
     const gx = (deg) => Rm * Math.sin(toRad(deg));
     const gy = (deg) => -Rm * Math.cos(toRad(deg));
     return w`
@@ -53410,8 +53446,8 @@ let ObcWatch = class extends i$4 {
       const startAngle = Math.min(bar.startAngle, bar.endAngle);
       const endAngle = Math.max(bar.startAngle, bar.endAngle);
       const arc = roundedArch({
-        r: RING3_RADIUS + this._rOff,
-        R: RING2_RADIUS + this._rOff,
+        r: this._bandRadius(RING3_RADIUS),
+        R: this._bandRadius(RING2_RADIUS),
         startAngle,
         endAngle,
         roundInsideCut: false,
@@ -53452,7 +53488,7 @@ let ObcWatch = class extends i$4 {
       return w`
         <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"
@@ -53513,15 +53549,17 @@ let ObcWatch = class extends i$4 {
       viewBox = frame.viewBox;
     } else {
       this._rOff = 0;
-      width = (176 + this.getPadding()) * 2;
-      height = width * (1 - this.clipTop / 100 - this.clipBottom / 100);
-      const top = -width / 2 + width * this.clipTop / 100;
-      viewBox = `-${width / 2} ${top} ${width} ${height}`;
+      const full = (176 + this.getPadding()) * 2;
+      width = full * (1 - this.clipLeft / 100 - this.clipRight / 100);
+      height = full * (1 - this.clipTop / 100 - this.clipBottom / 100);
+      const left = -full / 2 + full * this.clipLeft / 100;
+      const top = -full / 2 + full * this.clipTop / 100;
+      viewBox = `${left} ${top} ${width} ${height}`;
     }
     const rOff = this._rOff;
     const scale = this.getScale({ width, height });
     const angleSetpoint = this.renderSetpoint();
-    const textRadius = (this.tickmarksInside ? this.innerRingRadius : OUTER_RING_RADIUS) + rOff;
+    const textRadius = this.tickmarksInside ? this._bandRadius(this.innerRingRadius) : this._bandRadius(OUTER_RING_RADIUS);
     const maxDigits = Math.max(
       ...this.tickmarks.map((t2) => t2.text?.length ?? 0)
     );
@@ -53536,7 +53574,8 @@ let ObcWatch = class extends i$4 {
         rotation: this.rotation,
         maxDigits,
         color: t2.color,
-        radiusOffset: rOff
+        radiusOffset: rOff,
+        endLabelsMaxMin: this.endLabelsMaxMin
       })
     );
     const advices = this.advices ? this.advices.map((a2) => renderAdvice$3(a2, rOff)) : A;
@@ -53901,6 +53940,15 @@ __decorateClass$vO([
 __decorateClass$vO([
   n$3({ type: Number })
 ], ObcWatch.prototype, "clipBottom", 2);
+__decorateClass$vO([
+  n$3({ type: Number })
+], ObcWatch.prototype, "clipLeft", 2);
+__decorateClass$vO([
+  n$3({ type: Number })
+], ObcWatch.prototype, "clipRight", 2);
+__decorateClass$vO([
+  n$3({ type: Boolean })
+], ObcWatch.prototype, "endLabelsMaxMin", 2);
 __decorateClass$vO([
   n$3({ type: Number })
 ], ObcWatch.prototype, "scaleWindIcon", 2);
@@ -53959,6 +54007,11 @@ var __decorateClass$vN = (decorators, target, key, kind) => {
   if (kind && result) __defProp$vK(target, key, result);
   return result;
 };
+const WATCH_DEFAULT_VIEWBOX = 448;
+const NEEDLE_TIP_RADIUS$1 = 160;
+const NEEDLE_TIP_GAP = 5;
+const NEEDLE_WIDTH = 8;
+const NEEDLE_HUB_RADIUS = 16;
 function rangeIncludesZero(minValue, maxValue) {
   return minValue <= 0 && maxValue >= 0;
 }
@@ -53974,6 +54027,31 @@ function strongerTickmarkType(existing, candidate) {
   };
   return priority[candidate] > priority[existing] ? candidate : existing;
 }
+function clampClipPercent(n3) {
+  return Number.isFinite(n3) ? Math.min(Math.max(n3, 0), 100) : 0;
+}
+function normalizeClips(clips) {
+  let top = clampClipPercent(clips.top);
+  let bottom = clampClipPercent(clips.bottom);
+  let left = clampClipPercent(clips.left);
+  let right = clampClipPercent(clips.right);
+  if (top + bottom >= 100) {
+    top = 0;
+    bottom = 0;
+  }
+  if (left + right >= 100) {
+    left = 0;
+    right = 0;
+  }
+  return { top, bottom, left, right };
+}
+function defaultGaugeAngle(value, minValue, maxValue) {
+  const span = maxValue - minValue;
+  if (!Number.isFinite(span) || span <= 0) {
+    return -135;
+  }
+  return (value - minValue) / span * 270 - 135;
+}
 let ObcInstrumentRadial = class extends SetpointMixin(i$4) {
   constructor() {
     super(...arguments);
@@ -53993,6 +54071,9 @@ let ObcInstrumentRadial = class extends SetpointMixin(i$4) {
     this.advices = [];
     this.clipTop = 0;
     this.clipBottom = 0;
+    this.clipLeft = 0;
+    this.clipRight = 0;
+    this.endLabelsMaxMin = false;
     this.zoomToFitArc = false;
     this._radiusOffset = 0;
   }
@@ -54002,10 +54083,27 @@ let ObcInstrumentRadial = class extends SetpointMixin(i$4) {
     return Math.max(lowerBound, Math.min(this.value, upperBound));
   }
   get minAngle() {
-    return this.getAngle(this.minValue);
+    return this.mapAngle(this.minValue);
   }
   get maxAngle() {
-    return this.getAngle(this.maxValue);
+    return this.mapAngle(this.maxValue);
+  }
+  // Map a value to an angle via the consumer's `getAngle`, guarding a missing
+  // or non-finite mapping so a misconfigured consumer can't emit NaN geometry.
+  mapAngle(value) {
+    const fn = this.getAngle;
+    const angle = typeof fn === "function" ? fn(value) : defaultGaugeAngle(value, this.minValue, this.maxValue);
+    return Number.isFinite(angle) ? angle : 0;
+  }
+  // Clamped clips, reused for the overlay viewBox and the clips forwarded to
+  // obc-watch.
+  get safeClips() {
+    return normalizeClips({
+      top: this.clipTop,
+      bottom: this.clipBottom,
+      left: this.clipLeft,
+      right: this.clipRight
+    });
   }
   get _derivedNeedleColor() {
     if (this.state === InstrumentState.loading || this.state === InstrumentState.off) {
@@ -54026,12 +54124,12 @@ let ObcInstrumentRadial = class extends SetpointMixin(i$4) {
     const barColor = this.barColor ?? this._derivedBarColor;
     const barStartValue = Math.max(this.minValue, Math.min(0, this.maxValue));
     const value = this.clampedValue;
-    const setpointAngle = this.setpoint !== void 0 ? this.getAngle(this.setpoint) : void 0;
-    const newSetpointAngle = this.newSetpoint !== void 0 ? this.getAngle(this.newSetpoint) : void 0;
+    const setpointAngle = this.setpoint !== void 0 ? this.mapAngle(this.setpoint) : void 0;
+    const newSetpointAngle = this.newSetpoint !== void 0 ? this.mapAngle(this.newSetpoint) : void 0;
     const barAreas = this.type === "needle" ? [] : [
       {
-        startAngle: this.getAngle(barStartValue),
-        endAngle: this.getAngle(value),
+        startAngle: this.mapAngle(barStartValue),
+        endAngle: this.mapAngle(value),
         fillColor: barColor
       }
     ];
@@ -54044,6 +54142,7 @@ let ObcInstrumentRadial = class extends SetpointMixin(i$4) {
       }
     ];
     const watchCircleType = this.type === "needle" ? WatchCircleType.single : WatchCircleType.double;
+    const clips = this.safeClips;
     let viewBox;
     if (this.zoomToFitArc) {
       const ext = 48;
@@ -54055,16 +54154,18 @@ let ObcInstrumentRadial = class extends SetpointMixin(i$4) {
         extension: ext,
         targetSize
       });
-      viewBox = frame.viewBox;
       this._radiusOffset = frame.radiusOffset;
+      viewBox = frame.viewBox;
       this._arcFrame = frame;
     } else {
       this._radiusOffset = 0;
       this._arcFrame = void 0;
-      const width = 448;
-      const 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 = WATCH_DEFAULT_VIEWBOX;
+      const w2 = full * (1 - clips.left / 100 - clips.right / 100);
+      const h3 = full * (1 - clips.top / 100 - clips.bottom / 100);
+      const left = -full / 2 + full * clips.left / 100;
+      const top = -full / 2 + full * clips.top / 100;
+      viewBox = `${left} ${top} ${w2} ${h3}`;
     }
     return b`
       <div class="container">
@@ -54085,8 +54186,11 @@ let ObcInstrumentRadial = class extends SetpointMixin(i$4) {
           .areas=${areas}
           .watchCircleType=${watchCircleType}
           .barAreas=${barAreas}
-          .clipTop=${this.zoomToFitArc ? 0 : this.clipTop}
-          .clipBottom=${this.zoomToFitArc ? 0 : this.clipBottom}
+          .clipTop=${this.zoomToFitArc ? 0 : clips.top}
+          .clipBottom=${this.zoomToFitArc ? 0 : clips.bottom}
+          .clipLeft=${this.zoomToFitArc ? 0 : clips.left}
+          .clipRight=${this.zoomToFitArc ? 0 : clips.right}
+          .endLabelsMaxMin=${this.endLabelsMaxMin}
           .zoomToFitArc=${this.zoomToFitArc}
           .arcFrame=${this._arcFrame}
         ></obc-watch>
@@ -54102,14 +54206,14 @@ let ObcInstrumentRadial = class extends SetpointMixin(i$4) {
     const rOff = this._radiusOffset;
     const value = this.clampedValue;
     if (this.type === "needle") {
-      return w`<g transform="rotate(${this.getAngle(value)}) translate(-256, -256)">
-      <circle cx="256" cy="256" r="14" fill=${needleColor}/>
-      <rect x="250" y="${96 - rOff}" width="12" height="${192 + rOff}" rx="6" fill=${needleColor}/>
-      <rect x="252" y="${98 - rOff}" width="8" height="${188 + rOff}" rx="4" stroke=${needleColor} fill=${needleColor} stroke-width="4"/>
+      const tipY = 256 - (NEEDLE_TIP_RADIUS$1 - NEEDLE_TIP_GAP) - rOff;
+      return w`<g transform="rotate(${this.mapAngle(value)}) translate(-256, -256)">
+      <rect x="${256 - NEEDLE_WIDTH / 2}" y="${tipY}" width="${NEEDLE_WIDTH}" height="${256 - tipY}" rx="${NEEDLE_WIDTH / 2}" fill=${needleColor} stroke=${needleColor}/>
+      <circle cx="256" cy="256" r="${NEEDLE_HUB_RADIUS}" fill=${needleColor}/>
       </g>
 `;
     } else {
-      return w`<g transform="rotate(${this.getAngle(value)}) translate(-256, -256)">
+      return w`<g transform="rotate(${this.mapAngle(value)}) translate(-256, -256)">
 <rect x="252" y="${96 - rOff}" width="8" height="48" rx="4" fill=${needleColor} stroke="var(--border-silhouette-color)"/>
 </g>
       `;
@@ -54132,7 +54236,7 @@ let ObcInstrumentRadial = class extends SetpointMixin(i$4) {
         return;
       }
       tickmarksByValue.set(normalizedValue, {
-        angle: this.getAngle(normalizedValue),
+        angle: this.mapAngle(normalizedValue),
         type,
         text
       });
@@ -54192,8 +54296,8 @@ let ObcInstrumentRadial = class extends SetpointMixin(i$4) {
   get _advices() {
     const value = this.clampedValue;
     return this.advices.map((advice) => {
-      const minAngle = this.getAngle(advice.minValue);
-      const maxAngle = this.getAngle(advice.maxValue);
+      const minAngle = this.mapAngle(advice.minValue);
+      const maxAngle = this.mapAngle(advice.maxValue);
       let state = advice.hinted ? AdviceState.hinted : AdviceState.regular;
       if (value >= advice.minValue && value <= advice.maxValue) {
         state = AdviceState.triggered;
@@ -54302,6 +54406,15 @@ __decorateClass$vN([
 __decorateClass$vN([
   n$3({ type: Number })
 ], ObcInstrumentRadial.prototype, "clipBottom", 2);
+__decorateClass$vN([
+  n$3({ type: Number })
+], ObcInstrumentRadial.prototype, "clipLeft", 2);
+__decorateClass$vN([
+  n$3({ type: Number })
+], ObcInstrumentRadial.prototype, "clipRight", 2);
+__decorateClass$vN([
+  n$3({ type: Boolean })
+], ObcInstrumentRadial.prototype, "endLabelsMaxMin", 2);
 __decorateClass$vN([
   n$3({ type: Boolean })
 ], ObcInstrumentRadial.prototype, "zoomToFitArc", 2);
@@ -54771,7 +54884,7 @@ __decorateClass$vM([
 ObcAccordionCard = __decorateClass$vM([
   customElement("obc-accordion-card")
 ], ObcAccordionCard);
-const componentStyle$13 = i$7`
+const componentStyle$14 = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -55062,7 +55175,7 @@ let ObcAccordionItem = class extends i$4 {
     `;
   }
 };
-ObcAccordionItem.styles = r$7(componentStyle$13);
+ObcAccordionItem.styles = r$7(componentStyle$14);
 __decorateClass$vL([
   n$3({ type: String })
 ], ObcAccordionItem.prototype, "title", 2);
@@ -55078,7 +55191,7 @@ __decorateClass$vL([
 ObcAccordionItem = __decorateClass$vL([
   customElement("obc-accordion-item")
 ], ObcAccordionItem);
-const componentStyle$12 = i$7`
+const componentStyle$13 = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -55519,7 +55632,7 @@ let ObcAdviceButton = class extends i$4 {
     this.dispatchEvent(event);
   }
 };
-ObcAdviceButton.styles = r$7(componentStyle$12);
+ObcAdviceButton.styles = r$7(componentStyle$13);
 __decorateClass$vI([
   n$3({ type: String })
 ], ObcAdviceButton.prototype, "buttonStyle", 2);
@@ -55538,7 +55651,7 @@ __decorateClass$vI([
 ObcAdviceButton = __decorateClass$vI([
   customElement("obc-advice-button")
 ], ObcAdviceButton);
-const componentStyle$11 = i$7`
+const componentStyle$12 = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -55546,7 +55659,7 @@ const componentStyle$11 = i$7`
   display: block;
 }
 `;
-const componentStyle$10 = i$7`
+const componentStyle$11 = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -55978,7 +56091,7 @@ let ObcFloatingItem = class extends i$4 {
     `;
   }
 };
-ObcFloatingItem.styles = r$7(componentStyle$10);
+ObcFloatingItem.styles = r$7(componentStyle$11);
 __decorateClass$vH([
   n$3({ type: String })
 ], ObcFloatingItem.prototype, "type", 2);
@@ -56067,7 +56180,7 @@ let ObcAdviceFloatingItem = class extends i$4 {
     `;
   }
 };
-ObcAdviceFloatingItem.styles = r$7(componentStyle$11);
+ObcAdviceFloatingItem.styles = r$7(componentStyle$12);
 __decorateClass$vG([
   n$3({ type: String })
 ], ObcAdviceFloatingItem.prototype, "type", 2);
@@ -56792,7 +56905,7 @@ __decorateClass$vD([
 ObcAdviceMenuItem = __decorateClass$vD([
   customElement("obc-advice-menu-item")
 ], ObcAdviceMenuItem);
-const componentStyle$$ = i$7`
+const componentStyle$10 = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -57480,7 +57593,7 @@ let ObcAdviceMessageItem = class extends i$4 {
     `;
   }
 };
-ObcAdviceMessageItem.styles = r$7(componentStyle$$);
+ObcAdviceMessageItem.styles = r$7(componentStyle$10);
 __decorateClass$vB([
   n$3({ type: String })
 ], ObcAdviceMessageItem.prototype, "title", 2);
@@ -58991,7 +59104,7 @@ __decorateClass$vs([
 ObcAlertButton = __decorateClass$vs([
   customElement("obc-alert-button")
 ], ObcAlertButton);
-const componentStyle$_ = i$7`
+const componentStyle$$ = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -59111,7 +59224,7 @@ let ObcAlertFloatingItem = class extends i$4 {
     `;
   }
 };
-ObcAlertFloatingItem.styles = r$7(componentStyle$_);
+ObcAlertFloatingItem.styles = r$7(componentStyle$$);
 __decorateClass$vq([
   n$3({ type: String })
 ], ObcAlertFloatingItem.prototype, "type", 2);
@@ -60861,7 +60974,7 @@ __decorateClass$ve([
 ObiCheckGoogle = __decorateClass$ve([
   customElement("obi-check-google")
 ], ObiCheckGoogle);
-const componentStyle$Z = i$7`
+const componentStyle$_ = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -61387,7 +61500,7 @@ let ObcCheckbox = class extends i$4 {
     `;
   }
 };
-ObcCheckbox.styles = [r$7(componentStyle$Z)];
+ObcCheckbox.styles = [r$7(componentStyle$_)];
 __decorateClass$vd([
   n$3({ type: String })
 ], ObcCheckbox.prototype, "status", 2);
@@ -61406,7 +61519,7 @@ __decorateClass$vd([
 ObcCheckbox = __decorateClass$vd([
   customElement("obc-checkbox")
 ], ObcCheckbox);
-const componentStyle$Y = i$7`
+const componentStyle$Z = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -61654,7 +61767,7 @@ let ObcTag = class extends i$4 {
     `;
   }
 };
-ObcTag.styles = r$7(componentStyle$Y);
+ObcTag.styles = r$7(componentStyle$Z);
 __decorateClass$vc([
   n$3({ type: String })
 ], ObcTag.prototype, "label", 2);
@@ -64106,7 +64219,7 @@ const compentStyle$S = i$7`
     justify-items: center;
   }
 `;
-const componentStyle$X = i$7`
+const componentStyle$Y = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -64909,7 +65022,7 @@ let ObcTextInputField = class extends i$4 {
     `;
   }
 };
-ObcTextInputField.styles = r$7(componentStyle$X);
+ObcTextInputField.styles = r$7(componentStyle$Y);
 __decorateClass$v1([
   n$3({ type: String })
 ], ObcTextInputField.prototype, "value", 2);
@@ -65087,7 +65200,7 @@ ObcAppMenu.styles = r$7(compentStyle$S);
 ObcAppMenu = __decorateClass$u$([
   customElement("obc-app-menu")
 ], ObcAppMenu);
-const componentStyle$W = i$7`
+const componentStyle$X = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -65443,7 +65556,7 @@ let ObcAttachmentListItem = class extends i$4 {
     `;
   }
 };
-ObcAttachmentListItem.styles = r$7(componentStyle$W);
+ObcAttachmentListItem.styles = r$7(componentStyle$X);
 __decorateClass$u_([
   n$3({ type: String })
 ], ObcAttachmentListItem.prototype, "label", 2);
@@ -65559,7 +65672,7 @@ __decorateClass$uZ([
 ObcAudioOutput = __decorateClass$uZ([
   customElement("obc-audio-output")
 ], ObcAudioOutput);
-const componentStyle$V = i$7`
+const componentStyle$W = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -65674,7 +65787,7 @@ const componentStyle$V = i$7`
   min-width: 0;
 }
 `;
-const componentStyle$U = i$7`
+const componentStyle$V = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -66279,7 +66392,7 @@ let ObcSlider = class extends i$4 {
     `;
   }
 };
-ObcSlider.styles = r$7(componentStyle$U);
+ObcSlider.styles = r$7(componentStyle$V);
 __decorateClass$uY([
   n$3({ type: Number })
 ], ObcSlider.prototype, "value", 2);
@@ -66580,7 +66693,7 @@ let ObcAudioRecordingItem = class extends i$4 {
     `;
   }
 };
-ObcAudioRecordingItem.styles = r$7(componentStyle$V);
+ObcAudioRecordingItem.styles = r$7(componentStyle$W);
 __decorateClass$uV([
   n$3({ type: Array })
 ], ObcAudioRecordingItem.prototype, "audioLevels", 2);
@@ -67409,7 +67522,7 @@ __decorateClass$uR([
 ObcBreadcrumb = __decorateClass$uR([
   customElement("obc-breadcrumb")
 ], ObcBreadcrumb);
-const componentStyle$T = i$7`
+const componentStyle$U = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -67584,7 +67697,7 @@ const componentStyle$T = i$7`
     width: auto;
   }
 `;
-const componentStyle$S = i$7`
+const componentStyle$T = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -67998,7 +68111,7 @@ let ObcToggleSwitch = class extends i$4 {
     `;
   }
 };
-ObcToggleSwitch.styles = r$7(componentStyle$S);
+ObcToggleSwitch.styles = r$7(componentStyle$T);
 __decorateClass$uQ([
   n$3({ type: String })
 ], ObcToggleSwitch.prototype, "label", 2);
@@ -68026,7 +68139,7 @@ __decorateClass$uQ([
 ObcToggleSwitch = __decorateClass$uQ([
   customElement("obc-toggle-switch")
 ], ObcToggleSwitch);
-const componentStyle$R = i$7`
+const componentStyle$S = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -68616,7 +68729,7 @@ let ObcToggleButtonOption = class extends i$4 {
     `;
   }
 };
-ObcToggleButtonOption.styles = r$7(componentStyle$R);
+ObcToggleButtonOption.styles = r$7(componentStyle$S);
 __decorateClass$uP([
   n$3({ type: String })
 ], ObcToggleButtonOption.prototype, "value", 2);
@@ -68647,7 +68760,7 @@ __decorateClass$uP([
 ObcToggleButtonOption = __decorateClass$uP([
   customElement("obc-toggle-button-option")
 ], ObcToggleButtonOption);
-const componentStyle$Q = i$7`
+const componentStyle$R = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -68956,7 +69069,7 @@ let ObcToggleButtonGroup = class extends i$4 {
     `;
   }
 };
-ObcToggleButtonGroup.styles = r$7(componentStyle$Q);
+ObcToggleButtonGroup.styles = r$7(componentStyle$R);
 __decorateClass$uO([
   n$3({ type: String })
 ], ObcToggleButtonGroup.prototype, "value", 2);
@@ -71546,7 +71659,7 @@ let ObcBrillianceMenu = class extends i$4 {
     this.dispatchEvent(new CustomEvent("screen-control-link-clicked"));
   }
 };
-ObcBrillianceMenu.styles = r$7(componentStyle$T);
+ObcBrillianceMenu.styles = r$7(componentStyle$U);
 __decorateClass$uw([
   n$3({ type: String })
 ], ObcBrillianceMenu.prototype, "palette", 2);
@@ -71602,7 +71715,7 @@ ObcBrillianceMenu = __decorateClass$uw([
   localized(),
   customElement("obc-brilliance-menu")
 ], ObcBrillianceMenu);
-const componentStyle$P = i$7`
+const componentStyle$Q = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -71825,7 +71938,7 @@ const componentStyle$P = i$7`
   flex-shrink: 0;
 }
 `;
-const componentStyle$O = i$7`
+const componentStyle$P = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -72178,7 +72291,7 @@ let ObcEventItem = class extends i$4 {
     `;
   }
 };
-ObcEventItem.styles = r$7(componentStyle$O);
+ObcEventItem.styles = r$7(componentStyle$P);
 __decorateClass$uv([
   n$3({ type: String })
 ], ObcEventItem.prototype, "title", 2);
@@ -72302,7 +72415,7 @@ function getMonthGrid(year, month, firstDayOfWeek = 1, events, today) {
   }
   return grid2;
 }
-const componentStyle$N = i$7`
+const componentStyle$O = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -73118,7 +73231,7 @@ let ObcDateItem = class extends i$4 {
 };
 ObcDateItem._HEADER_HEIGHT = 48;
 ObcDateItem._EVENT_HEIGHT = 48;
-ObcDateItem.styles = r$7(componentStyle$N);
+ObcDateItem.styles = r$7(componentStyle$O);
 __decorateClass$uu([
   n$3({ type: String })
 ], ObcDateItem.prototype, "size", 2);
@@ -73152,7 +73265,7 @@ __decorateClass$uu([
 ObcDateItem = __decorateClass$uu([
   customElement("obc-date-item")
 ], ObcDateItem);
-const componentStyle$M = i$7`
+const componentStyle$N = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -73346,7 +73459,7 @@ let ObcEventList = class extends i$4 {
     `;
   }
 };
-ObcEventList.styles = r$7(componentStyle$M);
+ObcEventList.styles = r$7(componentStyle$N);
 __decorateClass$ut([
   n$3({ type: Boolean, attribute: false })
 ], ObcEventList.prototype, "showHeader", 2);
@@ -74595,7 +74708,7 @@ let ObcCalendar = class extends i$4 {
     `;
   }
 };
-ObcCalendar.styles = r$7(componentStyle$P);
+ObcCalendar.styles = r$7(componentStyle$Q);
 __decorateClass$ul([
   n$3({ type: String })
 ], ObcCalendar.prototype, "type", 2);
@@ -76006,7 +76119,7 @@ __decorateClass$ug([
 ObcCheckButton = __decorateClass$ug([
   customElement("obc-check-button")
 ], ObcCheckButton);
-const componentStyle$L = i$7`
+const componentStyle$M = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -76303,7 +76416,7 @@ let ObcCheckboxItem = class extends i$4 {
     `;
   }
 };
-ObcCheckboxItem.styles = r$7(componentStyle$L);
+ObcCheckboxItem.styles = r$7(componentStyle$M);
 __decorateClass$uf([
   n$3({ type: String })
 ], ObcCheckboxItem.prototype, "status", 2);
@@ -77273,7 +77386,7 @@ const compentStyle$E = i$7`
     "ss04" on;
   }
 `;
-const componentStyle$K = i$7`
+const componentStyle$L = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -77991,7 +78104,7 @@ let ObcStartStopSwitch = class extends i$4 {
     `;
   }
 };
-ObcStartStopSwitch.styles = r$7(componentStyle$K);
+ObcStartStopSwitch.styles = r$7(componentStyle$L);
 __decorateClass$ua([
   n$3({ type: Boolean, reflect: true })
 ], ObcStartStopSwitch.prototype, "checked", 2);
@@ -81148,7 +81261,7 @@ __decorateClass$u0([
 ObcFilterChip = __decorateClass$u0([
   customElement("obc-filter-chip")
 ], ObcFilterChip);
-const componentStyle$J = i$7`
+const componentStyle$K = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -81346,7 +81459,7 @@ let ObcFormContainer = class extends i$4 {
     `;
   }
 };
-ObcFormContainer.styles = r$7(componentStyle$J);
+ObcFormContainer.styles = r$7(componentStyle$K);
 __decorateClass$t$([
   n$3({ type: String })
 ], ObcFormContainer.prototype, "type", 2);
@@ -81356,7 +81469,7 @@ __decorateClass$t$([
 ObcFormContainer = __decorateClass$t$([
   customElement("obc-form-container")
 ], ObcFormContainer);
-const componentStyle$I = i$7`
+const componentStyle$J = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -81461,14 +81574,14 @@ let ObcFormFooterContainer = class extends i$4 {
     `;
   }
 };
-ObcFormFooterContainer.styles = r$7(componentStyle$I);
+ObcFormFooterContainer.styles = r$7(componentStyle$J);
 __decorateClass$t_([
   n$3({ type: Boolean, attribute: "has-actions" })
 ], ObcFormFooterContainer.prototype, "hasActions", 2);
 ObcFormFooterContainer = __decorateClass$t_([
   customElement("obc-form-footer-container")
 ], ObcFormFooterContainer);
-const componentStyle$H = i$7`
+const componentStyle$I = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -81689,14 +81802,14 @@ let ObcFormGroup = class extends i$4 {
     `;
   }
 };
-ObcFormGroup.styles = r$7(componentStyle$H);
+ObcFormGroup.styles = r$7(componentStyle$I);
 __decorateClass$tZ([
   n$3({ type: String })
 ], ObcFormGroup.prototype, "type", 2);
 ObcFormGroup = __decorateClass$tZ([
   customElement("obc-form-group")
 ], ObcFormGroup);
-const componentStyle$G = i$7`
+const componentStyle$H = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -82093,7 +82206,7 @@ let ObcFormItem = class extends i$4 {
     `;
   }
 };
-ObcFormItem.styles = r$7(componentStyle$G);
+ObcFormItem.styles = r$7(componentStyle$H);
 __decorateClass$tY([
   n$3({ type: String })
 ], ObcFormItem.prototype, "type", 2);
@@ -82710,7 +82823,7 @@ __decorateClass$tW([
 ObcInputChip = __decorateClass$tW([
   customElement("obc-input-chip")
 ], ObcInputChip);
-const componentStyle$F = i$7`
+const componentStyle$G = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -83542,7 +83655,7 @@ let ObcKeyboardFull = class extends i$4 {
     `;
   }
 };
-ObcKeyboardFull.styles = r$7(componentStyle$F);
+ObcKeyboardFull.styles = r$7(componentStyle$G);
 __decorateClass$tT([
   n$3({ type: String })
 ], ObcKeyboardFull.prototype, "type", 2);
@@ -83576,7 +83689,7 @@ __decorateClass$tT([
 ObcKeyboardFull = __decorateClass$tT([
   customElement("obc-keyboard-full")
 ], ObcKeyboardFull);
-const componentStyle$E = i$7`
+const componentStyle$F = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -83954,7 +84067,7 @@ __decorateClass$tP([
 ObiEqual = __decorateClass$tP([
   customElement("obi-equal")
 ], ObiEqual);
-const componentStyle$D = i$7`
+const componentStyle$E = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -84791,7 +84904,7 @@ let ObcNumberInputField = class extends i$4 {
     `;
   }
 };
-ObcNumberInputField.styles = r$7(componentStyle$D);
+ObcNumberInputField.styles = r$7(componentStyle$E);
 __decorateClass$tO([
   n$3({ type: Number })
 ], ObcNumberInputField.prototype, "value", 2);
@@ -85235,7 +85348,7 @@ let ObcKeyboardNumeric = class extends i$4 {
     `;
   }
 };
-ObcKeyboardNumeric.styles = r$7(componentStyle$E);
+ObcKeyboardNumeric.styles = r$7(componentStyle$F);
 __decorateClass$tN([
   n$3({ type: String })
 ], ObcKeyboardNumeric.prototype, "type", 2);
@@ -85729,7 +85842,7 @@ __decorateClass$tM([
 ObcMenuButton = __decorateClass$tM([
   customElement("obc-menu-button")
 ], ObcMenuButton);
-const componentStyle$C = i$7`
+const componentStyle$D = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -85987,7 +86100,7 @@ let ObcModalWindow = class extends i$4 {
     `;
   }
 };
-ObcModalWindow.styles = r$7(componentStyle$C);
+ObcModalWindow.styles = r$7(componentStyle$D);
 __decorateClass$tL([
   n$3({ type: String })
 ], ObcModalWindow.prototype, "size", 2);
@@ -86006,7 +86119,7 @@ __decorateClass$tL([
 ObcModalWindow = __decorateClass$tL([
   customElement("obc-modal-window")
 ], ObcModalWindow);
-const componentStyle$B = i$7`
+const componentStyle$C = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -86196,7 +86309,7 @@ let ObcNotificationBadgeButton = class extends i$4 {
     `;
   }
 };
-ObcNotificationBadgeButton.styles = r$7(componentStyle$B);
+ObcNotificationBadgeButton.styles = r$7(componentStyle$C);
 __decorateClass$tK([
   n$3({ type: Boolean })
 ], ObcNotificationBadgeButton.prototype, "openRight", 2);
@@ -86221,7 +86334,7 @@ __decorateClass$tK([
 ObcNotificationBadgeButton = __decorateClass$tK([
   customElement("obc-notification-badge-button")
 ], ObcNotificationBadgeButton);
-const componentStyle$A = i$7`
+const componentStyle$B = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -86659,7 +86772,7 @@ let ObcNotificationButton = class extends i$4 {
     this.dispatchEvent(event);
   }
 };
-ObcNotificationButton.styles = r$7(componentStyle$A);
+ObcNotificationButton.styles = r$7(componentStyle$B);
 __decorateClass$tJ([
   n$3({ type: String })
 ], ObcNotificationButton.prototype, "buttonStyle", 2);
@@ -86678,7 +86791,7 @@ __decorateClass$tJ([
 ObcNotificationButton = __decorateClass$tJ([
   customElement("obc-notification-button")
 ], ObcNotificationButton);
-const componentStyle$z = i$7`
+const componentStyle$A = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }`;
@@ -86746,7 +86859,7 @@ let ObcNotificationFloatingItem = class extends i$4 {
     `;
   }
 };
-ObcNotificationFloatingItem.styles = r$7(componentStyle$z);
+ObcNotificationFloatingItem.styles = r$7(componentStyle$A);
 __decorateClass$tI([
   n$3({ type: String })
 ], ObcNotificationFloatingItem.prototype, "type", 2);
@@ -86867,7 +86980,7 @@ __decorateClass$tH([
 ObcNotificationMenuItem = __decorateClass$tH([
   customElement("obc-notification-menu-item")
 ], ObcNotificationMenuItem);
-const componentStyle$y = i$7`
+const componentStyle$z = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -86966,7 +87079,7 @@ let ObcNotificationMessageItem = class extends i$4 {
     `;
   }
 };
-ObcNotificationMessageItem.styles = r$7(componentStyle$y);
+ObcNotificationMessageItem.styles = r$7(componentStyle$z);
 __decorateClass$tG([
   n$3({ type: String })
 ], ObcNotificationMessageItem.prototype, "title", 2);
@@ -87351,7 +87464,7 @@ __decorateClass$tD([
 ObcPagination = __decorateClass$tD([
   customElement("obc-pagination")
 ], ObcPagination);
-const componentStyle$x = i$7`
+const componentStyle$y = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -87828,7 +87941,7 @@ let ObcPivotItemGroup = class extends i$4 {
     `;
   }
 };
-ObcPivotItemGroup.styles = r$7(componentStyle$x);
+ObcPivotItemGroup.styles = r$7(componentStyle$y);
 __decorateClass$tB([
   n$3({ type: String })
 ], ObcPivotItemGroup.prototype, "direction", 2);
@@ -87841,7 +87954,7 @@ __decorateClass$tB([
 ObcPivotItemGroup = __decorateClass$tB([
   customElement("obc-pivot-item-group")
 ], ObcPivotItemGroup);
-const componentStyle$w = i$7`
+const componentStyle$x = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -88209,7 +88322,7 @@ let ObcProgressBar = class extends i$4 {
     }
   }
 };
-ObcProgressBar.styles = r$7(componentStyle$w);
+ObcProgressBar.styles = r$7(componentStyle$x);
 __decorateClass$tA([
   n$3({ type: String })
 ], ObcProgressBar.prototype, "type", 2);
@@ -88246,7 +88359,7 @@ __decorateClass$tA([
 ObcProgressBar = __decorateClass$tA([
   customElement("obc-progress-bar")
 ], ObcProgressBar);
-const componentStyle$v = i$7`
+const componentStyle$w = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -88972,7 +89085,7 @@ let ObcProgressButton = class extends i$4 {
     this.dispatchEvent(event);
   }
 };
-ObcProgressButton.styles = r$7(componentStyle$v);
+ObcProgressButton.styles = r$7(componentStyle$w);
 __decorateClass$tz([
   n$3({ type: String })
 ], ObcProgressButton.prototype, "type", 2);
@@ -89319,7 +89432,7 @@ __decorateClass$ty([
 ObcRichButton = __decorateClass$ty([
   customElement("obc-rich-button")
 ], ObcRichButton);
-const componentStyle$u = i$7`
+const componentStyle$v = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -90428,7 +90541,7 @@ button {
   border-color: var(--normal-hover-border-color, currentColor);
 }
 `;
-const componentStyle$t = i$7`
+const componentStyle$u = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -90792,7 +90905,7 @@ let ObcSequenceLoadingSpinner = class extends i$4 {
         `;
   }
 };
-ObcSequenceLoadingSpinner.styles = r$7(componentStyle$t);
+ObcSequenceLoadingSpinner.styles = r$7(componentStyle$u);
 __decorateClass$tx([
   n$3({ type: String })
 ], ObcSequenceLoadingSpinner.prototype, "type", 2);
@@ -91427,7 +91540,7 @@ let ObcSequenceCard = class extends i$4 {
     `;
   }
 };
-ObcSequenceCard.styles = r$7(componentStyle$u);
+ObcSequenceCard.styles = r$7(componentStyle$v);
 __decorateClass$tv([
   n$3({ type: String })
 ], ObcSequenceCard.prototype, "size", 2);
@@ -91494,7 +91607,7 @@ __decorateClass$tv([
 ObcSequenceCard = __decorateClass$tv([
   customElement("obc-sequence-card")
 ], ObcSequenceCard);
-const componentStyle$s = i$7`
+const componentStyle$t = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -91647,7 +91760,7 @@ let ObcSequenceConnector = class extends i$4 {
     `;
   }
 };
-ObcSequenceConnector.styles = r$7(componentStyle$s);
+ObcSequenceConnector.styles = r$7(componentStyle$t);
 __decorateClass$tu([
   n$3({ type: String })
 ], ObcSequenceConnector.prototype, "type", 2);
@@ -92169,7 +92282,7 @@ __decorateClass$tt([
 ObcSequenceItem = __decorateClass$tt([
   customElement("obc-sequence-item")
 ], ObcSequenceItem);
-const componentStyle$r = i$7`
+const componentStyle$s = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -92298,7 +92411,7 @@ let ObcSequenceModal = class extends i$4 {
     `;
   }
 };
-ObcSequenceModal.styles = r$7(componentStyle$r);
+ObcSequenceModal.styles = r$7(componentStyle$s);
 __decorateClass$ts([
   n$3({ type: String })
 ], ObcSequenceModal.prototype, "type", 2);
@@ -92584,7 +92697,7 @@ __decorateClass$tr([
 ObcSequenceToolbar = __decorateClass$tr([
   customElement("obc-sequence-toolbar")
 ], ObcSequenceToolbar);
-const componentStyle$q = i$7`
+const componentStyle$r = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -92999,7 +93112,7 @@ let ObcSlideButton = class extends i$4 {
     `;
   }
 };
-ObcSlideButton.styles = r$7(componentStyle$q);
+ObcSlideButton.styles = r$7(componentStyle$r);
 __decorateClass$tq([
   n$3({ type: Boolean })
 ], ObcSlideButton.prototype, "disabled", 2);
@@ -93027,7 +93140,7 @@ __decorateClass$tq([
 ObcSlideButton = __decorateClass$tq([
   customElement("obc-slide-button")
 ], ObcSlideButton);
-const componentStyle$p = i$7`
+const componentStyle$q = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -93704,7 +93817,7 @@ let ObcSliderDouble = class extends i$4 {
     `;
   }
 };
-ObcSliderDouble.styles = r$7(componentStyle$p);
+ObcSliderDouble.styles = r$7(componentStyle$q);
 __decorateClass$tp([
   n$3({ type: Number })
 ], ObcSliderDouble.prototype, "low", 2);
@@ -97851,7 +97964,7 @@ __decorateClass$t4([
 ObcTabRow = __decorateClass$t4([
   customElement("obc-tab-row")
 ], ObcTabRow);
-const componentStyle$o = i$7`
+const componentStyle$p = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -98948,7 +99061,7 @@ let ObcTextareaField = class extends i$4 {
     `;
   }
 };
-ObcTextareaField.styles = r$7(componentStyle$o);
+ObcTextareaField.styles = r$7(componentStyle$p);
 __decorateClass$s$([
   n$3({ type: String })
 ], ObcTextareaField.prototype, "type", 2);
@@ -99040,7 +99153,7 @@ ObcTextareaField = __decorateClass$s$([
   customElement("obc-textarea-field"),
   localized()
 ], ObcTextareaField);
-const componentStyle$n = i$7`
+const componentStyle$o = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -99247,7 +99360,7 @@ let ObcTitleContainer = class extends i$4 {
     `;
   }
 };
-ObcTitleContainer.styles = r$7(componentStyle$n);
+ObcTitleContainer.styles = r$7(componentStyle$o);
 __decorateClass$s_([
   n$3({ type: String })
 ], ObcTitleContainer.prototype, "state", 2);
@@ -99260,7 +99373,7 @@ __decorateClass$s_([
 ObcTitleContainer = __decorateClass$s_([
   customElement("obc-title-container")
 ], ObcTitleContainer);
-const componentStyle$m = i$7`
+const componentStyle$n = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -99402,7 +99515,7 @@ let ObcToggleButtonThreeState = class extends i$4 {
     `;
   }
 };
-ObcToggleButtonThreeState.styles = r$7(componentStyle$m);
+ObcToggleButtonThreeState.styles = r$7(componentStyle$n);
 __decorateClass$sZ([
   n$3({ type: String })
 ], ObcToggleButtonThreeState.prototype, "state", 2);
@@ -100767,7 +100880,7 @@ __decorateClass$sW([
 ObcToggletip = __decorateClass$sW([
   customElement("obc-toggletip")
 ], ObcToggletip);
-const componentStyle$l = i$7`
+const componentStyle$m = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -100999,7 +101112,7 @@ let ObcTooltip = class extends i$4 {
     `;
   }
 };
-ObcTooltip.styles = r$7(componentStyle$l);
+ObcTooltip.styles = r$7(componentStyle$m);
 __decorateClass$sV([
   n$3({ type: String })
 ], ObcTooltip.prototype, "type", 2);
@@ -101654,7 +101767,7 @@ __decorateClass$sQ([
 ObcTopBar = __decorateClass$sQ([
   customElement("obc-top-bar")
 ], ObcTopBar);
-const componentStyle$k = i$7`
+const componentStyle$l = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -102349,7 +102462,7 @@ let ObcUserMenu = class extends i$4 {
     `;
   }
 };
-ObcUserMenu.styles = r$7(componentStyle$k);
+ObcUserMenu.styles = r$7(componentStyle$l);
 __decorateClass$sO([
   n$3({ type: String })
 ], ObcUserMenu.prototype, "type", 2);
@@ -199640,7 +199753,7 @@ __decorateClass$R([
 ObcIntegrationFleetButton = __decorateClass$R([
   customElement("obc-integration-fleet-button")
 ], ObcIntegrationFleetButton);
-const componentStyle$j = i$7`
+const componentStyle$k = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -199762,7 +199875,7 @@ let ObcIntegrationVesselMenu = class extends i$4 {
     `;
   }
 };
-ObcIntegrationVesselMenu.styles = r$7(componentStyle$j);
+ObcIntegrationVesselMenu.styles = r$7(componentStyle$k);
 __decorateClass$Q([
   n$3({ type: Number })
 ], ObcIntegrationVesselMenu.prototype, "numberOfButtons", 2);
@@ -201097,7 +201210,7 @@ function thrusterColors(options, state, priority) {
     arrowColor
   };
 }
-const componentStyle$i = i$7`
+const componentStyle$j = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -201345,7 +201458,7 @@ let ObcAzimuthThruster = class extends i$4 {
     this._thrustSp.dispose();
   }
 };
-ObcAzimuthThruster.styles = r$7(componentStyle$i);
+ObcAzimuthThruster.styles = r$7(componentStyle$j);
 __decorateClass$M([
   n$3({ type: Number })
 ], ObcAzimuthThruster.prototype, "angle", 2);
@@ -201451,7 +201564,7 @@ __decorateClass$M([
 ObcAzimuthThruster = __decorateClass$M([
   customElement("obc-azimuth-thruster")
 ], ObcAzimuthThruster);
-const componentStyle$h = i$7`
+const componentStyle$i = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -201845,6 +201958,10 @@ const componentStyle$h = i$7`
   text-align: center;
 }
 
+.readout.stack.vertical.alignment-center .instrument-label-unit-container {
+  align-items: center;
+}
+
 .readout.stack.vertical.alignment-vertical {
   justify-items: end;
 }
@@ -202314,7 +202431,7 @@ const componentStyle$h = i$7`
   z-index: 1;
 }
 `;
-const componentStyle$g = i$7`
+const componentStyle$h = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -202348,7 +202465,7 @@ const componentStyle$g = i$7`
     overflow: hidden;
   }
 `;
-const componentStyle$f = i$7`
+const componentStyle$g = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -203788,7 +203905,7 @@ let ObcReadoutSetpoint = class extends i$4 {
     `;
   }
 };
-ObcReadoutSetpoint.styles = r$7(componentStyle$f);
+ObcReadoutSetpoint.styles = r$7(componentStyle$g);
 __decorateClass$L([
   n$3({ type: String })
 ], ObcReadoutSetpoint.prototype, "variant", 2);
@@ -203951,7 +204068,7 @@ let ObcReadoutAdvice = class extends i$4 {
     `;
   }
 };
-ObcReadoutAdvice.styles = r$7(componentStyle$g);
+ObcReadoutAdvice.styles = r$7(componentStyle$h);
 __decorateClass$K([
   n$3({
     type: String,
@@ -204289,6 +204406,12 @@ var ReadoutDirection = /* @__PURE__ */ ((ReadoutDirection2) => {
   ReadoutDirection2["horizontal"] = "horizontal";
   return ReadoutDirection2;
 })(ReadoutDirection || {});
+var ReadoutStackVerticalAlignment = /* @__PURE__ */ ((ReadoutStackVerticalAlignment2) => {
+  ReadoutStackVerticalAlignment2["left"] = "left";
+  ReadoutStackVerticalAlignment2["center"] = "center";
+  ReadoutStackVerticalAlignment2["vertical"] = "vertical";
+  return ReadoutStackVerticalAlignment2;
+})(ReadoutStackVerticalAlignment || {});
 let ObcReadout = class extends i$4 {
   constructor() {
     super(...arguments);
@@ -204974,7 +205097,7 @@ ObcReadout.READOUT_SETPOINT_SIZE_ORDER = [
   ReadoutSetpointSize.medium,
   ReadoutSetpointSize.large
 ];
-ObcReadout.styles = r$7(componentStyle$h);
+ObcReadout.styles = r$7(componentStyle$i);
 __decorateClass$J([
   n$3({ type: Number })
 ], ObcReadout.prototype, "value", 2);
@@ -205436,7 +205559,7 @@ __decorateClass$H([
 ObcBearingIndicator = __decorateClass$H([
   customElement("obc-bearing-indicator")
 ], ObcBearingIndicator);
-const componentStyle$e = i$7`
+const componentStyle$f = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -206136,7 +206259,7 @@ let ObcCompassFlat = class extends i$4 {
     `;
   }
 };
-ObcCompassFlat.styles = r$7(componentStyle$e);
+ObcCompassFlat.styles = r$7(componentStyle$f);
 __decorateClass$F([
   n$3({ type: Boolean })
 ], ObcCompassFlat.prototype, "FOVIndicator", 2);
@@ -206197,7 +206320,7 @@ __decorateClass$F([
 ObcCompassFlat = __decorateClass$F([
   customElement("obc-compass-flat")
 ], ObcCompassFlat);
-const componentStyle$d = i$7`
+const componentStyle$e = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }`;
@@ -206514,7 +206637,7 @@ let ObcCompassIndicator = class extends i$4 {
     );
   }
 };
-ObcCompassIndicator.styles = r$7(componentStyle$d);
+ObcCompassIndicator.styles = r$7(componentStyle$e);
 __decorateClass$E([
   n$3({ type: Number })
 ], ObcCompassIndicator.prototype, "angle", 2);
@@ -206530,7 +206653,7 @@ __decorateClass$E([
 ObcCompassIndicator = __decorateClass$E([
   customElement("obc-compass-indicator")
 ], ObcCompassIndicator);
-const componentStyle$c = i$7`
+const componentStyle$d = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -206977,7 +207100,7 @@ let ObcCompassSector = class extends i$4 {
     `;
   }
 };
-ObcCompassSector.styles = r$7(componentStyle$c);
+ObcCompassSector.styles = r$7(componentStyle$d);
 __decorateClass$D([
   n$3({ type: Number })
 ], ObcCompassSector.prototype, "heading", 2);
@@ -207649,7 +207772,7 @@ __decorateClass$B([
 ObcDepthActual = __decorateClass$B([
   customElement("obc-depth-actual")
 ], ObcDepthActual);
-const componentStyle$b = i$7`
+const componentStyle$c = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -207817,7 +207940,7 @@ let ObcDepthIndicator = class extends i$4 {
     `;
   }
 };
-ObcDepthIndicator.styles = r$7(componentStyle$b);
+ObcDepthIndicator.styles = r$7(componentStyle$c);
 __decorateClass$A([
   n$3({ type: String })
 ], ObcDepthIndicator.prototype, "variant", 2);
@@ -207827,7 +207950,7 @@ __decorateClass$A([
 ObcDepthIndicator = __decorateClass$A([
   customElement("obc-depth-indicator")
 ], ObcDepthIndicator);
-const componentStyle$a = i$7`
+const componentStyle$b = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -208054,7 +208177,7 @@ let ObcGaugeBarIndicator = class extends i$4 {
     `;
   }
 };
-ObcGaugeBarIndicator.styles = r$7(componentStyle$a);
+ObcGaugeBarIndicator.styles = r$7(componentStyle$b);
 __decorateClass$z([
   n$3({ type: Number })
 ], ObcGaugeBarIndicator.prototype, "value", 2);
@@ -208319,7 +208442,7 @@ __decorateClass$y([
 ObcGaugeHorizontal = __decorateClass$y([
   customElement("obc-gauge-horizontal")
 ], ObcGaugeHorizontal);
-const componentStyle$9 = i$7`
+const componentStyle$a = i$7`
           * {
             -webkit-tap-highlight-color: transparent;
           }
@@ -208999,7 +209122,7 @@ let ObcGaugeRadialIndicator = class extends i$4 {
     `;
   }
 };
-ObcGaugeRadialIndicator.styles = r$7(componentStyle$9);
+ObcGaugeRadialIndicator.styles = r$7(componentStyle$a);
 __decorateClass$x([
   n$3({ type: Number })
 ], ObcGaugeRadialIndicator.prototype, "value", 2);
@@ -209024,6 +209147,100 @@ __decorateClass$x([
 ObcGaugeRadialIndicator = __decorateClass$x([
   customElement("obc-gauge-radial-indicator")
 ], ObcGaugeRadialIndicator);
+const componentStyle$9 = i$7`
+          * {
+            -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;
+  }
+`;
 var __defProp$w = Object.defineProperty;
 var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
 var __decorateClass$w = (decorators, target, key, kind) => {
@@ -209050,45 +209267,166 @@ let ObcGaugeRadial = class extends SetpointMixin(i$4) {
     this.tickmarksInside = false;
     this.tickmarkStyle = TickmarkStyle$1.regular;
     this.advices = [];
+    this.sector = "270";
+    this.showReadout = false;
+    this.label = "";
+    this.unit = "";
+    this.fractionDigits = 0;
+    this.getAngle = (v2) => {
+      const { sweep, start } = this.sectorAngles;
+      const span = this.maxValue - this.minValue;
+      if (!Number.isFinite(span) || span <= 0) {
+        return start;
+      }
+      return (v2 - this.minValue) / span * sweep + start;
+    };
   }
-  getAngle(v2) {
-    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 };
+    }
+  }
+  /**
+   * 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 b`
+      <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 A;
+    }
+    const isNeedle = this.type === "needle";
+    const is90 = this.isSector90;
+    const is180 = this.sector === "180";
+    if (isNeedle && (is180 || is90)) {
+      return A;
+    }
+    if (is90) {
+      return this.renderReadout({
+        className: "gauge-readout-meta",
+        variant: ReadoutVariant.enhanced
+      });
     }
-    return (v2 - this.minValue) / span * 270 - 135;
+    if (isNeedle || is180) {
+      return this.renderReadout({
+        className: "gauge-readout-meta",
+        variant: ReadoutVariant.stack,
+        alignment: ReadoutStackVerticalAlignment.center
+      });
+    }
+    return b`
+      ${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
+    }) : A}
+    `;
   }
   render() {
+    const clips = this.sectorClips;
     return b`
-      <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=${e$1({
+      "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 = r$7(componentStyle$9);
 __decorateClass$w([
   n$3({ type: Number })
 ], ObcGaugeRadial.prototype, "value", 2);
@@ -209128,6 +209466,21 @@ __decorateClass$w([
 __decorateClass$w([
   n$3({ type: Array, attribute: false })
 ], ObcGaugeRadial.prototype, "advices", 2);
+__decorateClass$w([
+  n$3({ type: String, reflect: true })
+], ObcGaugeRadial.prototype, "sector", 2);
+__decorateClass$w([
+  n$3({ type: Boolean })
+], ObcGaugeRadial.prototype, "showReadout", 2);
+__decorateClass$w([
+  n$3({ type: String })
+], ObcGaugeRadial.prototype, "label", 2);
+__decorateClass$w([
+  n$3({ type: String })
+], ObcGaugeRadial.prototype, "unit", 2);
+__decorateClass$w([
+  n$3({ type: Number })
+], ObcGaugeRadial.prototype, "fractionDigits", 2);
 ObcGaugeRadial = __decorateClass$w([
   customElement("obc-gauge-radial")
 ], ObcGaugeRadial);