@oicl/openbridge-webcomponents 2.0.0-next.161 → 2.0.0-next.162

package/bundle/openbridge-webcomponents.bundle.js

@@ -714,7 +714,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;
 }
 
@@ -992,7 +992,7 @@ let ObcPoiGraphicLine = class extends i$4 {
   }
 };
 ObcPoiGraphicLine._idCounter = 0;
-ObcPoiGraphicLine.styles = r$7(componentStyle$1Q);
+ObcPoiGraphicLine.styles = r$7(componentStyle$1R);
 __decorateClass$Bu([
   n$3({ type: Number })
 ], ObcPoiGraphicLine.prototype, "lineHeight", 2);
@@ -1196,7 +1196,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;
 }
 
@@ -1607,7 +1607,7 @@ let ObcPoiHeader = class extends i$4 {
     `;
   }
 };
-ObcPoiHeader.styles = r$7(componentStyle$1P);
+ObcPoiHeader.styles = r$7(componentStyle$1Q);
 __decorateClass$Bt([
   n$3({ type: String })
 ], ObcPoiHeader.prototype, "content", 2);
@@ -1629,7 +1629,7 @@ __decorateClass$Bt([
 ObcPoiHeader = __decorateClass$Bt([
   customElement("obc-poi-header")
 ], ObcPoiHeader);
-const componentStyle$1O = i$7`* {
+const componentStyle$1P = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -1856,7 +1856,7 @@ let ObcPoiLine = class extends i$4 {
     `;
   }
 };
-ObcPoiLine.styles = r$7(componentStyle$1O);
+ObcPoiLine.styles = r$7(componentStyle$1P);
 __decorateClass$Bs([
   n$3({ type: Number })
 ], ObcPoiLine.prototype, "height", 2);
@@ -1878,7 +1878,7 @@ __decorateClass$Bs([
 ObcPoiLine = __decorateClass$Bs([
   customElement("obc-poi-line")
 ], ObcPoiLine);
-const componentStyle$1N = i$7`* {
+const componentStyle$1O = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -2048,7 +2048,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;
 }
 
@@ -2368,7 +2368,7 @@ let ObcPoiSelectionFrame = class extends i$4 {
     >`;
   }
 };
-ObcPoiSelectionFrame.styles = r$7(componentStyle$1M);
+ObcPoiSelectionFrame.styles = r$7(componentStyle$1N);
 __decorateClass$Br([
   n$3({ type: String })
 ], ObcPoiSelectionFrame.prototype, "type", 2);
@@ -2705,7 +2705,7 @@ let ObcPoiPointer = class extends i$4 {
     this.syncBoxFilterTargets();
   }
 };
-ObcPoiPointer.styles = r$7(componentStyle$1N);
+ObcPoiPointer.styles = r$7(componentStyle$1O);
 __decorateClass$Bq([
   n$3({ type: String })
 ], ObcPoiPointer.prototype, "type", 2);
@@ -2721,7 +2721,7 @@ __decorateClass$Bq([
 ObcPoiPointer = __decorateClass$Bq([
   customElement("obc-poi-pointer")
 ], ObcPoiPointer);
-const componentStyle$1L = i$7`* {
+const componentStyle$1M = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -2822,7 +2822,7 @@ let ObcRulerPointer = class extends i$4 {
     `;
   }
 };
-ObcRulerPointer.styles = r$7(componentStyle$1L);
+ObcRulerPointer.styles = r$7(componentStyle$1M);
 __decorateClass$Bp([
   n$3({ type: String })
 ], ObcRulerPointer.prototype, "type", 2);
@@ -5164,7 +5164,7 @@ const compentStyle$1j = 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;
 }
 
@@ -5753,7 +5753,7 @@ let ObcPoiObject = class extends i$4 {
     `;
   }
 };
-ObcPoiObject.styles = r$7(componentStyle$1K);
+ObcPoiObject.styles = r$7(componentStyle$1L);
 __decorateClass$Bn([
   n$3({ type: String })
 ], ObcPoiObject.prototype, "type", 2);
@@ -6177,7 +6177,7 @@ __decorateClass$Bl([
 __decorateClass$Bl([
   n$3({ type: Boolean })
 ], AbstractPoiObject.prototype, "interactive");
-const componentStyle$1J = i$7`* {
+const componentStyle$1K = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -6679,7 +6679,7 @@ let ObcPoiObjectAton = class extends AbstractPoiObject {
 };
 ObcPoiObjectAton.styles = [
   ...AbstractPoiObject.styles,
-  r$7(componentStyle$1J)
+  r$7(componentStyle$1K)
 ];
 __decorateClass$Bk([
   n$3({ type: String })
@@ -6847,7 +6847,7 @@ __decorateClass$Bh([
 ObcPoiButtonData = __decorateClass$Bh([
   customElement("obc-poi-button-data")
 ], ObcPoiButtonData);
-const componentStyle$1I = i$7`* {
+const componentStyle$1J = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -6962,7 +6962,7 @@ let ObcPoiObjectVessel = class extends AbstractPoiObject {
 };
 ObcPoiObjectVessel.styles = [
   ...AbstractPoiObject.styles,
-  r$7(componentStyle$1I)
+  r$7(componentStyle$1J)
 ];
 __decorateClass$Bg([
   n$3({ type: String })
@@ -7041,7 +7041,7 @@ __decorateClass$Bf([
 ObcPoiButtonVessel = __decorateClass$Bf([
   customElement("obc-poi-button-vessel")
 ], ObcPoiButtonVessel);
-const componentStyle$1H = i$7`* {
+const componentStyle$1I = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -8059,7 +8059,7 @@ let ObcPoiCardHeader = class extends i$4 {
     `;
   }
 };
-ObcPoiCardHeader.styles = r$7(componentStyle$1H);
+ObcPoiCardHeader.styles = r$7(componentStyle$1I);
 __decorateClass$Bc([
   n$3({ type: String })
 ], ObcPoiCardHeader.prototype, "variant", 2);
@@ -8087,7 +8087,7 @@ __decorateClass$Bc([
 ObcPoiCardHeader = __decorateClass$Bc([
   customElement("obc-poi-card-header")
 ], ObcPoiCardHeader);
-const componentStyle$1G = i$7`* {
+const componentStyle$1H = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -8408,7 +8408,7 @@ let ObcPoiCard = class extends i$4 {
     `;
   }
 };
-ObcPoiCard.styles = r$7(componentStyle$1G);
+ObcPoiCard.styles = r$7(componentStyle$1H);
 __decorateClass$Bb([
   n$3({ type: String })
 ], ObcPoiCard.prototype, "pointerDirection", 2);
@@ -8451,7 +8451,7 @@ __decorateClass$Bb([
 ObcPoiCard = __decorateClass$Bb([
   customElement("obc-poi-card")
 ], ObcPoiCard);
-const componentStyle$1F = i$7`* {
+const componentStyle$1G = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -8500,7 +8500,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;
 }
 
@@ -8518,7 +8518,7 @@ const componentStyle$1E = i$7`* {
   display: contents;
 }
 `;
-const componentStyle$1D = i$7`* {
+const componentStyle$1E = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -8644,7 +8644,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;
 }
 
@@ -8862,7 +8862,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;
 }
 
@@ -8908,7 +8908,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;
 }
 
@@ -9559,7 +9559,7 @@ let ObcPoi = class extends i$4 {
     this.syncAttachedHeaderState();
   }
 };
-ObcPoi.styles = r$7(componentStyle$1A);
+ObcPoi.styles = r$7(componentStyle$1B);
 __decorateClass$Ba([
   n$3({ type: String })
 ], ObcPoi.prototype, "type", 2);
@@ -10101,7 +10101,7 @@ const _PoiBase = class _PoiBase extends i$4 {
     `;
   }
 };
-_PoiBase.styles = [r$7(componentStyle$1B)];
+_PoiBase.styles = [r$7(componentStyle$1C)];
 let PoiBase = _PoiBase;
 __decorateClass$B9([
   n$3({ type: String })
@@ -11096,7 +11096,7 @@ let ObcPoiGroup = class extends i$4 {
     return true;
   }
 };
-ObcPoiGroup.styles = r$7(componentStyle$1C);
+ObcPoiGroup.styles = r$7(componentStyle$1D);
 __decorateClass$B6([
   n$3({ type: Boolean })
 ], ObcPoiGroup.prototype, "expand", 2);
@@ -12254,7 +12254,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$B5([
   n$3({ type: String })
 ], ObcPoiLayer.prototype, "label", 2);
@@ -12989,7 +12989,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$B4([
   n$3({ type: String, attribute: "selection-mode" })
 ], ObcPoiLayerStack.prototype, "selectionMode", 2);
@@ -13311,7 +13311,7 @@ let ObcPoiController = class extends i$4 {
     `;
   }
 };
-ObcPoiController.styles = r$7(componentStyle$1F);
+ObcPoiController.styles = r$7(componentStyle$1G);
 __decorateClass$B3([
   n$3({ type: String })
 ], ObcPoiController.prototype, "fit", 2);
@@ -16860,7 +16860,7 @@ __decorateClass$AB([
 ObcButton = __decorateClass$AB([
   customElement("obc-button")
 ], ObcButton);
-const componentStyle$1z = i$7`* {
+const componentStyle$1A = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -17124,7 +17124,7 @@ const componentStyle$1z = i$7`* {
   block-size: var(--obc-readout-block-icon-size, var(--_block-icon-size));
 }
 `;
-const componentStyle$1y = i$7`* {
+const componentStyle$1z = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -17317,7 +17317,7 @@ let ObcTextbox = class extends i$4 {
     `;
   }
 };
-ObcTextbox.styles = r$7(componentStyle$1y);
+ObcTextbox.styles = r$7(componentStyle$1z);
 __decorateClass$AA([
   n$3({ type: String })
 ], ObcTextbox.prototype, "alignment", 2);
@@ -18256,7 +18256,7 @@ let ObcReadoutBlock = class extends i$4 {
     return wrapWithAlertFrame(this.alert ?? false, block);
   }
 };
-ObcReadoutBlock.styles = r$7(componentStyle$1z);
+ObcReadoutBlock.styles = r$7(componentStyle$1A);
 __decorateClass$Ao([
   n$3({ type: String })
 ], ObcReadoutBlock.prototype, "variant", 2);
@@ -18835,7 +18835,7 @@ __decorateClass$An([
 ObcAutomationButtonReadoutStack = __decorateClass$An([
   customElement("obc-automation-button-readout-stack")
 ], ObcAutomationButtonReadoutStack);
-const componentStyle$1x = i$7`* {
+const componentStyle$1y = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -18997,7 +18997,7 @@ let ObcCircularProgress = class extends i$4 {
     `;
   }
 };
-ObcCircularProgress.styles = r$7(componentStyle$1x);
+ObcCircularProgress.styles = r$7(componentStyle$1y);
 __decorateClass$Am([
   n$3({ type: String })
 ], ObcCircularProgress.prototype, "mode", 2);
@@ -22459,7 +22459,7 @@ __decorateClass$A2([
 ObiEnergyBattery = __decorateClass$A2([
   customElement("obi-energy-battery")
 ], ObiEnergyBattery);
-const componentStyle$1w = i$7`* {
+const componentStyle$1x = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -39397,7 +39397,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
   }
 };
 _ObcChartLineBase.styles = [
-  r$7(componentStyle$1w),
+  r$7(componentStyle$1x),
   r$7(chartCommonStyle),
   r$7(chartLegendStyle),
   r$7(chartDebugStyle)
@@ -41793,7 +41793,7 @@ __decorateClass$zO([
 ObcBipolarTransistor = __decorateClass$zO([
   customElement("obc-bipolar-transistor")
 ], ObcBipolarTransistor);
-const componentStyle$1v = i$7`* {
+const componentStyle$1w = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -41940,7 +41940,7 @@ let ObcBus = class extends i$4 {
     `;
   }
 };
-ObcBus.styles = r$7(componentStyle$1v);
+ObcBus.styles = r$7(componentStyle$1w);
 __decorateClass$zN([
   n$3({ type: String })
 ], ObcBus.prototype, "label", 2);
@@ -45135,7 +45135,7 @@ __decorateClass$yY([
 ObiDieselGeneratorDc = __decorateClass$yY([
   customElement("obi-diesel-generator-dc")
 ], ObiDieselGeneratorDc);
-const componentStyle$1u = i$7`* {
+const componentStyle$1v = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -45496,6 +45496,12 @@ svg {
   display: block;
 }
 
+svg.cropped {
+  /* A cropped frame paints its arc outside the viewBox before \`rotation\`
+     swings it into view; the host's overflow rule is what clips. */
+  overflow: visible;
+}
+
 .label {
   font-family: var(--global-typography-font-family);
   font-weight: var(--global-typography-ui-body-font-weight);
@@ -47889,6 +47895,11 @@ const environmentSvgs = {
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7 16.5858L12.2071 11.3787L17.4142 16.5858L16 18L12.2071 14.2071L8.41421 18L7 16.5858Z" fill="var(--instrument-regular-secondary-color)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7 22.5858L12.2071 17.3787L17.4142 22.5858L16 24L12.2071 20.2071L8.41421 24L7 22.5858Z" fill="var(--instrument-regular-secondary-color)"/>`
 };
+var ArcFrameFit = /* @__PURE__ */ ((ArcFrameFit2) => {
+  ArcFrameFit2["square"] = "square";
+  ArcFrameFit2["bbox"] = "bbox";
+  return ArcFrameFit2;
+})(ArcFrameFit || {});
 function normalizeArcAngle(value, fallback) {
   const v2 = Number.isFinite(value) ? value : fallback;
   return Math.min(180, Math.max(2, v2));
@@ -47901,7 +47912,9 @@ function computeZoomToFitArcFrame(options) {
     extension,
     targetSize,
     margin: margin2 = 0.06,
-    includeBox
+    includeBox,
+    fit = "square"
+    /* square */
   } = options;
   if (areas.length === 0) {
     const side2 = targetSize;
@@ -47951,13 +47964,15 @@ function computeZoomToFitArcFrame(options) {
   const rawW = bbox.xMax - bbox.xMin;
   const rawH = bbox.yMax - bbox.yMin;
   const side = Math.max(rawW, rawH);
-  const padded = side * (1 + margin2 * 2);
+  const pad = side * margin2;
   const cx = (bbox.xMin + bbox.xMax) / 2;
   const cy = (bbox.yMin + bbox.yMax) / 2;
-  const x2 = round4(cx - padded / 2);
-  const y3 = round4(cy - padded / 2);
-  const w2 = round4(padded);
-  const h3 = round4(padded);
+  const boxW = fit === "bbox" ? rawW + pad * 2 : side + pad * 2;
+  const boxH = fit === "bbox" ? rawH + pad * 2 : side + pad * 2;
+  const x2 = round4(cx - boxW / 2);
+  const y3 = round4(cy - boxH / 2);
+  const w2 = round4(boxW);
+  const h3 = round4(boxH);
   return {
     radiusOffset,
     x: x2,
@@ -48275,7 +48290,9 @@ function zoomFrameAt(opts, extension) {
     outerRadius: OUTER_RING_RADIUS$1,
     innerRadius: opts.innerRadius ?? OUTER_RING_RADIUS$1,
     extension,
-    targetSize: (RADIAL_VIEWBOX_BASE + extension) * 2
+    targetSize: (RADIAL_VIEWBOX_BASE + extension) * 2,
+    fit: opts.zoomFit,
+    includeBox: opts.zoomIncludeBox
   });
 }
 function pinnedZoomedScale(opts, frame) {
@@ -48889,6 +48906,8 @@ let ObcWatch = class extends i$4 {
   render() {
     let width;
     let height;
+    let frameX;
+    let frameY;
     let viewBox;
     if (this.arcFrame) {
       this._rOff = this.arcFrame.radiusOffset;
@@ -48896,6 +48915,8 @@ let ObcWatch = class extends i$4 {
       this._ownFrame = void 0;
       width = this.arcFrame.width;
       height = this.arcFrame.height;
+      frameX = this.arcFrame.x;
+      frameY = this.arcFrame.y;
       viewBox = this.arcFrame.viewBox;
     } else {
       const frame = computeRadialFrame({
@@ -48918,10 +48939,15 @@ let ObcWatch = class extends i$4 {
       this._ownFrame = frame;
       width = frame.width;
       height = frame.height;
+      frameX = frame.x;
+      frameY = frame.y;
       viewBox = frame.viewBox;
     }
     const rOff = this._rOff;
     const scale = this.getScale({ width, height });
+    const pivotX = width > 0 ? -frameX / width * 100 : 50;
+    const pivotY = height > 0 ? -frameY / height * 100 : 50;
+    const cropped = pivotX !== 50 || pivotY !== 50;
     const angleSetpoint = this.renderSetpoint();
     const textRadius = this.tickmarksInside ? this._bandRadius(this.innerRingRadius) : this._bandRadius(OUTER_RING_RADIUS);
     const maxDigits = Math.max(
@@ -48986,10 +49012,11 @@ let ObcWatch = class extends i$4 {
     }) : A;
     return b`
       <svg
+        class=${cropped ? "cropped" : A}
         width="100%"
         height="100%"
         viewBox=${viewBox}
-        style="--scale: ${scale}"
+        style="--scale: ${scale}; transform-origin: ${pivotX}% ${pivotY}%"
         transform="rotate(${this.rotation ?? 0})"
       >
         ${this.watchCircle()} ${this.renderBars()}
@@ -49431,7 +49458,7 @@ function renderSecondaryLine(options) {
     ${tip}
   `;
 }
-const componentStyle$1t = i$7`* {
+const componentStyle$1u = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -50217,7 +50244,7 @@ obc-readout-block {
   outline-offset: -1px;
 }
 `;
-const componentStyle$1s = i$7`* {
+const componentStyle$1t = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -51671,7 +51698,7 @@ let ObcReadoutListItem = class extends i$4 {
     return wrapWithAlertFrame(alert, root, true);
   }
 };
-ObcReadoutListItem.styles = r$7(componentStyle$1s);
+ObcReadoutListItem.styles = r$7(componentStyle$1t);
 __decorateClass$yj([
   n$3({ type: String })
 ], ObcReadoutListItem.prototype, "label", 2);
@@ -52004,7 +52031,7 @@ __decorateClass$yi([
 ObiArrowFlyoutGoogle = __decorateClass$yi([
   customElement("obi-arrow-flyout-google")
 ], ObiArrowFlyoutGoogle);
-const componentStyle$1r = i$7`* {
+const componentStyle$1s = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -52415,7 +52442,7 @@ __decorateClass$yg([
 ObiCheckGoogle = __decorateClass$yg([
   customElement("obi-check-google")
 ], ObiCheckGoogle);
-const componentStyle$1q = i$7`* {
+const componentStyle$1r = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -52940,7 +52967,7 @@ let ObcCheckbox = class extends i$4 {
     `;
   }
 };
-ObcCheckbox.styles = [r$7(componentStyle$1q)];
+ObcCheckbox.styles = [r$7(componentStyle$1r)];
 __decorateClass$yf([
   n$3({ type: String })
 ], ObcCheckbox.prototype, "status", 2);
@@ -53145,7 +53172,7 @@ let ObcCheckboxItem = class extends i$4 {
     `;
   }
 };
-ObcCheckboxItem.styles = r$7(componentStyle$1r);
+ObcCheckboxItem.styles = r$7(componentStyle$1s);
 __decorateClass$yd([
   n$3({ type: String })
 ], ObcCheckboxItem.prototype, "status", 2);
@@ -53655,7 +53682,7 @@ ol {
   padding: 0;
 }
 `;
-const componentStyle$1p = i$7`* {
+const componentStyle$1q = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -54823,7 +54850,7 @@ let ObcTreeNavigationItem = class extends i$4 {
     `;
   }
 };
-ObcTreeNavigationItem.styles = r$7(componentStyle$1p);
+ObcTreeNavigationItem.styles = r$7(componentStyle$1q);
 __decorateClass$y9([
   n$3({ type: String })
 ], ObcTreeNavigationItem.prototype, "label", 2);
@@ -57286,7 +57313,7 @@ let ObcReadout = class extends i$4 {
     return wrapWithAlertFrame(alert, root);
   }
 };
-ObcReadout.styles = r$7(componentStyle$1t);
+ObcReadout.styles = r$7(componentStyle$1u);
 __decorateClass$y3([
   n$3({ type: String })
 ], ObcReadout.prototype, "label", 2);
@@ -58170,7 +58197,7 @@ let ObcGaugeProportional = class extends SetpointMixin(i$4) {
     `;
   }
 };
-ObcGaugeProportional.styles = [r$7(componentStyle$1u), centerReadoutStyles];
+ObcGaugeProportional.styles = [r$7(componentStyle$1v), centerReadoutStyles];
 __decorateClass$y2([
   n$3({ type: Number })
 ], ObcGaugeProportional.prototype, "value", 2);
@@ -58629,7 +58656,7 @@ const READOUT_ANCHOR = {
   twoWay: 144,
   threeWay: 136
 };
-const BASE_PADDING = {
+const BASE_PADDING$1 = {
   large: 80,
   compact: 9
 };
@@ -58787,7 +58814,7 @@ let ObcGaugeValve = class extends SetpointMixin(i$4) {
   }
   render() {
     const frame = computeRadialFrame({
-      basePadding: this.large ? BASE_PADDING.large : BASE_PADDING.compact,
+      basePadding: this.large ? BASE_PADDING$1.large : BASE_PADDING$1.compact,
       labelWidthPx: this.large ? estimateLabelWidthPx(SCALE_LABEL_VALUES.map(String)) : 0,
       clips: { top: 0, bottom: 0, left: 0, right: 0 },
       containerPx: measureContainerPx(this),
@@ -59319,7 +59346,7 @@ __decorateClass$xS([
 ObiHeatexhanger = __decorateClass$xS([
   customElement("obi-heatexhanger")
 ], ObiHeatexhanger);
-const componentStyle$1o = i$7`* {
+const componentStyle$1p = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -60014,7 +60041,7 @@ const _ObcAbstractSpecialtyTank = class _ObcAbstractSpecialtyTank extends i$4 {
     </button>`;
   }
 };
-_ObcAbstractSpecialtyTank.styles = r$7(componentStyle$1o);
+_ObcAbstractSpecialtyTank.styles = r$7(componentStyle$1p);
 let ObcAbstractSpecialtyTank = _ObcAbstractSpecialtyTank;
 __decorateClass$xR([
   n$3({ type: String })
@@ -60304,7 +60331,7 @@ __decorateClass$xN([
 ObcHorizontalLine = __decorateClass$xN([
   customElement("obc-horizontal-line")
 ], ObcHorizontalLine);
-const componentStyle$1n = i$7`* {
+const componentStyle$1o = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -60518,7 +60545,7 @@ button.thumb.disabled {
   height: 100%;
 }
 `;
-const componentStyle$1m = i$7`* {
+const componentStyle$1n = i$7`* {
   -webkit-tap-highlight-color: transparent
 }
 .thumb {
@@ -60608,7 +60635,7 @@ let ObcHydraulicCheckValve = class extends i$4 {
     `;
   }
 };
-ObcHydraulicCheckValve.styles = [r$7(componentStyle$1n), r$7(componentStyle$1m)];
+ObcHydraulicCheckValve.styles = [r$7(componentStyle$1o), r$7(componentStyle$1n)];
 __decorateClass$xL([
   n$3({ type: String })
 ], ObcHydraulicCheckValve.prototype, "ariaLabel", 2);
@@ -60830,7 +60857,7 @@ const _ObcShuffleButtonBase = class _ObcShuffleButtonBase extends i$4 {
     }
   }
 };
-_ObcShuffleButtonBase.styles = r$7(componentStyle$1n);
+_ObcShuffleButtonBase.styles = r$7(componentStyle$1o);
 let ObcShuffleButtonBase = _ObcShuffleButtonBase;
 __decorateClass$xI([
   n$3({ type: Number })
@@ -61368,7 +61395,7 @@ __decorateClass$xx([
 ObcHydraulicValveX2 = __decorateClass$xx([
   customElement("obc-hydraulic-valve-x-2")
 ], ObcHydraulicValveX2);
-const componentStyle$1l = i$7`* {
+const componentStyle$1m = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -61644,7 +61671,7 @@ let ObcIndicatorBattery = class extends i$4 {
     `;
   }
 };
-ObcIndicatorBattery.styles = r$7(componentStyle$1l);
+ObcIndicatorBattery.styles = r$7(componentStyle$1m);
 __decorateClass$xw([
   n$3({ type: String, reflect: true })
 ], ObcIndicatorBattery.prototype, "direction", 2);
@@ -61666,7 +61693,7 @@ __decorateClass$xw([
 ObcIndicatorBattery = __decorateClass$xw([
   customElement("obc-indicator-battery")
 ], ObcIndicatorBattery);
-const componentStyle$1k = i$7`* {
+const componentStyle$1l = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -61753,7 +61780,7 @@ let ObcIndicatorEngine = class extends i$4 {
     `;
   }
 };
-ObcIndicatorEngine.styles = r$7(componentStyle$1k);
+ObcIndicatorEngine.styles = r$7(componentStyle$1l);
 __decorateClass$xv([
   n$3({ type: String, reflect: true })
 ], ObcIndicatorEngine.prototype, "value", 2);
@@ -61763,7 +61790,7 @@ __decorateClass$xv([
 ObcIndicatorEngine = __decorateClass$xv([
   customElement("obc-indicator-engine")
 ], ObcIndicatorEngine);
-const componentStyle$1j = i$7`* {
+const componentStyle$1k = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -62010,7 +62037,7 @@ let ObcIndicatorGenerator = class extends i$4 {
     `;
   }
 };
-ObcIndicatorGenerator.styles = r$7(componentStyle$1j);
+ObcIndicatorGenerator.styles = r$7(componentStyle$1k);
 __decorateClass$xu([
   n$3({ type: String, reflect: true })
 ], ObcIndicatorGenerator.prototype, "variant", 2);
@@ -62026,7 +62053,7 @@ __decorateClass$xu([
 ObcIndicatorGenerator = __decorateClass$xu([
   customElement("obc-indicator-generator")
 ], ObcIndicatorGenerator);
-const componentStyle$1i = i$7`* {
+const componentStyle$1j = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -62129,7 +62156,7 @@ let ObcIndicatorTankAtmospheric = class extends i$4 {
     `;
   }
 };
-ObcIndicatorTankAtmospheric.styles = r$7(componentStyle$1i);
+ObcIndicatorTankAtmospheric.styles = r$7(componentStyle$1j);
 __decorateClass$xt([
   n$3({ type: String, reflect: true })
 ], ObcIndicatorTankAtmospheric.prototype, "direction", 2);
@@ -67545,7 +67572,7 @@ __decorateClass$w3([
 ObcTransformer = __decorateClass$w3([
   customElement("obc-transformer")
 ], ObcTransformer);
-const componentStyle$1h = i$7`* {
+const componentStyle$1i = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -67784,7 +67811,7 @@ let ObcTransmitterButton = class extends i$4 {
     `;
   }
 };
-ObcTransmitterButton.styles = r$7(componentStyle$1h);
+ObcTransmitterButton.styles = r$7(componentStyle$1i);
 __decorateClass$w2([
   n$3({ type: String })
 ], ObcTransmitterButton.prototype, "variant", 2);
@@ -67836,7 +67863,7 @@ __decorateClass$w2([
 ObcTransmitterButton = __decorateClass$w2([
   customElement("obc-transmitter-button")
 ], ObcTransmitterButton);
-const componentStyle$1g = i$7`* {
+const componentStyle$1h = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -68058,7 +68085,7 @@ let ObcTransmitterStack = class extends i$4 {
     `;
   }
 };
-ObcTransmitterStack.styles = r$7(componentStyle$1g);
+ObcTransmitterStack.styles = r$7(componentStyle$1h);
 __decorateClass$w1([
   n$3({ type: String })
 ], ObcTransmitterStack.prototype, "orientation", 2);
@@ -68071,7 +68098,7 @@ __decorateClass$w1([
 ObcTransmitterStack = __decorateClass$w1([
   customElement("obc-transmitter-stack")
 ], ObcTransmitterStack);
-const componentStyle$1f = i$7`* {
+const componentStyle$1g = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -72929,7 +72956,7 @@ let ObcTransmitter = class extends i$4 {
     `;
   }
 };
-ObcTransmitter.styles = r$7(componentStyle$1f);
+ObcTransmitter.styles = r$7(componentStyle$1g);
 __decorateClass$v$([
   n$3({ type: String })
 ], ObcTransmitter.prototype, "orientation", 2);
@@ -73309,7 +73336,7 @@ __decorateClass$vY([
 ObcAreaGraph = __decorateClass$vY([
   customElement("obc-area-graph")
 ], ObcAreaGraph);
-const componentStyle$1e = i$7`* {
+const componentStyle$1f = i$7`* {
     -webkit-tap-highlight-color: transparent
 }
 /* NOTE: no custom CSS for this component yet */
@@ -73844,7 +73871,7 @@ let ObcDonutChart = class extends i$4 {
   }
 };
 ObcDonutChart.styles = [
-  r$7(componentStyle$1e),
+  r$7(componentStyle$1f),
   r$7(chartCommonStyle),
   r$7(chartLegendStyle),
   r$7(chartDebugStyle)
@@ -73940,7 +73967,7 @@ let ObcLineGraph = class extends ObcChartLineBase {
 ObcLineGraph = __decorateClass$vW([
   customElement("obc-line-graph")
 ], ObcLineGraph);
-const componentStyle$1d = i$7`* {
+const componentStyle$1e = i$7`* {
     -webkit-tap-highlight-color: transparent
 }
 /* NOTE: no custom CSS for this component yet */
@@ -74474,7 +74501,7 @@ let ObcPieChart = class extends i$4 {
   }
 };
 ObcPieChart.styles = [
-  r$7(componentStyle$1d),
+  r$7(componentStyle$1e),
   r$7(chartCommonStyle),
   r$7(chartLegendStyle),
   r$7(chartDebugStyle)
@@ -74537,7 +74564,7 @@ __decorateClass$vV([
 ObcPieChart = __decorateClass$vV([
   customElement("obc-pie-chart")
 ], ObcPieChart);
-const componentStyle$1c = i$7`* {
+const componentStyle$1d = i$7`* {
     -webkit-tap-highlight-color: transparent
 }
 /* NOTE: no custom CSS for this component yet */
@@ -74992,7 +75019,7 @@ let ObcPolarChart = class extends i$4 {
   }
 };
 ObcPolarChart.styles = [
-  r$7(componentStyle$1c),
+  r$7(componentStyle$1d),
   r$7(chartCommonStyle),
   r$7(chartLegendStyle),
   r$7(chartDebugStyle)
@@ -75051,7 +75078,7 @@ __decorateClass$vU([
 ObcPolarChart = __decorateClass$vU([
   customElement("obc-polar-chart")
 ], ObcPolarChart);
-const componentStyle$1b = i$7`* {
+const componentStyle$1c = i$7`* {
     -webkit-tap-highlight-color: transparent
 }
 /* NOTE: no custom CSS for this component yet */
@@ -75410,7 +75437,7 @@ let ObcRadialBarChart = class extends i$4 {
   }
 };
 ObcRadialBarChart.styles = [
-  r$7(componentStyle$1b),
+  r$7(componentStyle$1c),
   r$7(chartCommonStyle),
   r$7(chartLegendStyle),
   r$7(chartDebugStyle)
@@ -77840,7 +77867,7 @@ __decorateClass$vN([
 ObcAccordionCard = __decorateClass$vN([
   customElement("obc-accordion-card")
 ], ObcAccordionCard);
-const componentStyle$1a = i$7`* {
+const componentStyle$1b = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -78130,7 +78157,7 @@ let ObcAccordionItem = class extends i$4 {
     `;
   }
 };
-ObcAccordionItem.styles = r$7(componentStyle$1a);
+ObcAccordionItem.styles = r$7(componentStyle$1b);
 __decorateClass$vM([
   n$3({ type: String })
 ], ObcAccordionItem.prototype, "title", 2);
@@ -78146,7 +78173,7 @@ __decorateClass$vM([
 ObcAccordionItem = __decorateClass$vM([
   customElement("obc-accordion-item")
 ], ObcAccordionItem);
-const componentStyle$19 = i$7`* {
+const componentStyle$1a = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -78492,7 +78519,7 @@ let ObcAdviceButton = class extends i$4 {
     this.dispatchEvent(event);
   }
 };
-ObcAdviceButton.styles = r$7(componentStyle$19);
+ObcAdviceButton.styles = r$7(componentStyle$1a);
 __decorateClass$vL([
   n$3({ type: String })
 ], ObcAdviceButton.prototype, "buttonStyle", 2);
@@ -78511,14 +78538,14 @@ __decorateClass$vL([
 ObcAdviceButton = __decorateClass$vL([
   customElement("obc-advice-button")
 ], ObcAdviceButton);
-const componentStyle$18 = i$7`* {
+const componentStyle$19 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 :host {
   display: block;
 }
 `;
-const componentStyle$17 = i$7`* {
+const componentStyle$18 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -78950,7 +78977,7 @@ let ObcFloatingItem = class extends i$4 {
     `;
   }
 };
-ObcFloatingItem.styles = r$7(componentStyle$17);
+ObcFloatingItem.styles = r$7(componentStyle$18);
 __decorateClass$vK([
   n$3({ type: String })
 ], ObcFloatingItem.prototype, "type", 2);
@@ -79039,7 +79066,7 @@ let ObcAdviceFloatingItem = class extends i$4 {
     `;
   }
 };
-ObcAdviceFloatingItem.styles = r$7(componentStyle$18);
+ObcAdviceFloatingItem.styles = r$7(componentStyle$19);
 __decorateClass$vJ([
   n$3({ type: String })
 ], ObcAdviceFloatingItem.prototype, "type", 2);
@@ -79782,7 +79809,7 @@ __decorateClass$vG([
 ObcAdviceMenuItem = __decorateClass$vG([
   customElement("obc-advice-menu-item")
 ], ObcAdviceMenuItem);
-const componentStyle$16 = i$7`* {
+const componentStyle$17 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 obi-notification-advice-active {
@@ -80471,7 +80498,7 @@ let ObcAdviceMessageItem = class extends i$4 {
     `;
   }
 };
-ObcAdviceMessageItem.styles = r$7(componentStyle$16);
+ObcAdviceMessageItem.styles = r$7(componentStyle$17);
 __decorateClass$vE([
   n$3({ type: String })
 ], ObcAdviceMessageItem.prototype, "title", 2);
@@ -80514,7 +80541,7 @@ __decorateClass$vE([
 ObcAdviceMessageItem = __decorateClass$vE([
   customElement("obc-advice-message-item")
 ], ObcAdviceMessageItem);
-const componentStyle$15 = i$7`* {
+const componentStyle$16 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -82461,7 +82488,7 @@ const u = (e2, s2, t2) => {
     return this.ut = a2, p(s2, v$12), E;
   }
 });
-const componentStyle$14 = i$7`* {
+const componentStyle$15 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -82542,7 +82569,7 @@ let ObcAlertCounterItem = class extends i$4 {
     `;
   }
 };
-ObcAlertCounterItem.styles = r$7(componentStyle$14);
+ObcAlertCounterItem.styles = r$7(componentStyle$15);
 __decorateClass$vw([
   n$3({ type: String })
 ], ObcAlertCounterItem.prototype, "type", 2);
@@ -82706,7 +82733,7 @@ let ObcAlertButtonItem = class extends i$4 {
     `;
   }
 };
-ObcAlertButtonItem.styles = r$7(componentStyle$15);
+ObcAlertButtonItem.styles = r$7(componentStyle$16);
 __decorateClass$vv([
   n$3({ type: String })
 ], ObcAlertButtonItem.prototype, "type", 2);
@@ -83118,7 +83145,7 @@ ObcAlertButton = __decorateClass$vs([
   customElement("obc-alert-button"),
   localized()
 ], ObcAlertButton);
-const componentStyle$13 = i$7`* {
+const componentStyle$14 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 :host {
@@ -83189,7 +83216,7 @@ let ObcAlertFloatingItem = class extends i$4 {
     `;
   }
 };
-ObcAlertFloatingItem.styles = r$7(componentStyle$13);
+ObcAlertFloatingItem.styles = r$7(componentStyle$14);
 __decorateClass$vr([
   n$3({ type: String })
 ], ObcAlertFloatingItem.prototype, "type", 2);
@@ -85562,7 +85589,7 @@ __decorateClass$v8([
 ObcTableHeaderItem = __decorateClass$v8([
   customElement("obc-table-header-item")
 ], ObcTableHeaderItem);
-const componentStyle$12 = i$7`* {
+const componentStyle$13 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -85809,7 +85836,7 @@ let ObcTag = class extends i$4 {
     `;
   }
 };
-ObcTag.styles = r$7(componentStyle$12);
+ObcTag.styles = r$7(componentStyle$13);
 __decorateClass$v7([
   n$3({ type: String })
 ], ObcTag.prototype, "label", 2);
@@ -88414,7 +88441,7 @@ ObcAlertMenu = __decorateClass$v0([
   localized(),
   customElement("obc-alert-menu")
 ], ObcAlertMenu);
-const componentStyle$11 = i$7`* {
+const componentStyle$12 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -88567,7 +88594,7 @@ let ObcAlertSubsystemCounter = class extends i$4 {
     `;
   }
 };
-ObcAlertSubsystemCounter.styles = r$7(componentStyle$11);
+ObcAlertSubsystemCounter.styles = r$7(componentStyle$12);
 __decorateClass$u$([
   n$3({ type: String })
 ], ObcAlertSubsystemCounter.prototype, "label", 2);
@@ -89084,7 +89111,7 @@ const compentStyle$O = i$7`* {
     justify-items: center;
   }
 `;
-const componentStyle$10 = i$7`* {
+const componentStyle$11 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -89911,7 +89938,7 @@ let ObcTextInputField = class extends i$4 {
     `;
   }
 };
-ObcTextInputField.styles = r$7(componentStyle$10);
+ObcTextInputField.styles = r$7(componentStyle$11);
 __decorateClass$uX([
   n$3({ type: String })
 ], ObcTextInputField.prototype, "value", 2);
@@ -90043,7 +90070,7 @@ ObcAppMenu.styles = r$7(compentStyle$O);
 ObcAppMenu = __decorateClass$uW([
   customElement("obc-app-menu")
 ], ObcAppMenu);
-const componentStyle$$ = i$7`* {
+const componentStyle$10 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -90398,7 +90425,7 @@ let ObcAttachmentListItem = class extends i$4 {
     `;
   }
 };
-ObcAttachmentListItem.styles = r$7(componentStyle$$);
+ObcAttachmentListItem.styles = r$7(componentStyle$10);
 __decorateClass$uV([
   n$3({ type: String })
 ], ObcAttachmentListItem.prototype, "label", 2);
@@ -90513,7 +90540,7 @@ __decorateClass$uU([
 ObcAudioOutput = __decorateClass$uU([
   customElement("obc-audio-output")
 ], ObcAudioOutput);
-const componentStyle$_ = i$7`* {
+const componentStyle$$ = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -90627,7 +90654,7 @@ const componentStyle$_ = i$7`* {
   min-width: 0;
 }
 `;
-const componentStyle$Z = i$7`* {
+const componentStyle$_ = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -91248,7 +91275,7 @@ let ObcSlider = class extends i$4 {
     `;
   }
 };
-ObcSlider.styles = r$7(componentStyle$Z);
+ObcSlider.styles = r$7(componentStyle$_);
 __decorateClass$uT([
   n$3({ type: Number })
 ], ObcSlider.prototype, "value", 2);
@@ -91549,7 +91576,7 @@ let ObcAudioRecordingItem = class extends i$4 {
     `;
   }
 };
-ObcAudioRecordingItem.styles = r$7(componentStyle$_);
+ObcAudioRecordingItem.styles = r$7(componentStyle$$);
 __decorateClass$uQ([
   n$3({ type: Array })
 ], ObcAudioRecordingItem.prototype, "audioLevels", 2);
@@ -91948,7 +91975,7 @@ __decorateClass$uO([
 ObcBreadcrumb = __decorateClass$uO([
   customElement("obc-breadcrumb")
 ], ObcBreadcrumb);
-const componentStyle$Y = i$7`* {
+const componentStyle$Z = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -92122,7 +92149,7 @@ const componentStyle$Y = i$7`* {
     width: auto;
   }
 `;
-const componentStyle$X = i$7`* {
+const componentStyle$Y = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -92550,7 +92577,7 @@ let ObcToggleSwitch = class extends i$4 {
     `;
   }
 };
-ObcToggleSwitch.styles = r$7(componentStyle$X);
+ObcToggleSwitch.styles = r$7(componentStyle$Y);
 __decorateClass$uN([
   n$3({ type: String })
 ], ObcToggleSwitch.prototype, "label", 2);
@@ -92578,7 +92605,7 @@ __decorateClass$uN([
 ObcToggleSwitch = __decorateClass$uN([
   customElement("obc-toggle-switch")
 ], ObcToggleSwitch);
-const componentStyle$W = i$7`* {
+const componentStyle$X = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -93167,7 +93194,7 @@ let ObcToggleButtonOption = class extends i$4 {
     `;
   }
 };
-ObcToggleButtonOption.styles = r$7(componentStyle$W);
+ObcToggleButtonOption.styles = r$7(componentStyle$X);
 __decorateClass$uM([
   n$3({ type: String })
 ], ObcToggleButtonOption.prototype, "value", 2);
@@ -93198,7 +93225,7 @@ __decorateClass$uM([
 ObcToggleButtonOption = __decorateClass$uM([
   customElement("obc-toggle-button-option")
 ], ObcToggleButtonOption);
-const componentStyle$V = i$7`* {
+const componentStyle$W = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -93535,7 +93562,7 @@ let ObcToggleButtonGroup = class extends i$4 {
     `;
   }
 };
-ObcToggleButtonGroup.styles = r$7(componentStyle$V);
+ObcToggleButtonGroup.styles = r$7(componentStyle$W);
 __decorateClass$uL([
   n$3({ type: String })
 ], ObcToggleButtonGroup.prototype, "value", 2);
@@ -95192,7 +95219,7 @@ let ObcBrillianceMenu = class extends i$4 {
     this.dispatchEvent(new CustomEvent("screen-control-link-clicked"));
   }
 };
-ObcBrillianceMenu.styles = r$7(componentStyle$Y);
+ObcBrillianceMenu.styles = r$7(componentStyle$Z);
 __decorateClass$uz([
   n$3({ type: String })
 ], ObcBrillianceMenu.prototype, "palette", 2);
@@ -95248,7 +95275,7 @@ ObcBrillianceMenu = __decorateClass$uz([
   localized(),
   customElement("obc-brilliance-menu")
 ], ObcBrillianceMenu);
-const componentStyle$U = i$7`* {
+const componentStyle$V = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -95470,7 +95497,7 @@ const componentStyle$U = i$7`* {
   flex-shrink: 0;
 }
 `;
-const componentStyle$T = i$7`* {
+const componentStyle$U = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -95822,7 +95849,7 @@ let ObcEventItem = class extends i$4 {
     `;
   }
 };
-ObcEventItem.styles = r$7(componentStyle$T);
+ObcEventItem.styles = r$7(componentStyle$U);
 __decorateClass$uy([
   n$3({ type: String })
 ], ObcEventItem.prototype, "title", 2);
@@ -95946,7 +95973,7 @@ function getMonthGrid(year, month, firstDayOfWeek = 1, events, today) {
   }
   return grid2;
 }
-const componentStyle$S = i$7`* {
+const componentStyle$T = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -96761,7 +96788,7 @@ let ObcDateItem = class extends i$4 {
 };
 ObcDateItem._HEADER_HEIGHT = 48;
 ObcDateItem._EVENT_HEIGHT = 48;
-ObcDateItem.styles = r$7(componentStyle$S);
+ObcDateItem.styles = r$7(componentStyle$T);
 __decorateClass$ux([
   n$3({ type: String })
 ], ObcDateItem.prototype, "size", 2);
@@ -96795,7 +96822,7 @@ __decorateClass$ux([
 ObcDateItem = __decorateClass$ux([
   customElement("obc-date-item")
 ], ObcDateItem);
-const componentStyle$R = i$7`* {
+const componentStyle$S = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -96988,7 +97015,7 @@ let ObcEventList = class extends i$4 {
     `;
   }
 };
-ObcEventList.styles = r$7(componentStyle$R);
+ObcEventList.styles = r$7(componentStyle$S);
 __decorateClass$uw([
   n$3({ type: Boolean, attribute: false })
 ], ObcEventList.prototype, "showHeader", 2);
@@ -98213,7 +98240,7 @@ let ObcCalendar = class extends i$4 {
     `;
   }
 };
-ObcCalendar.styles = r$7(componentStyle$U);
+ObcCalendar.styles = r$7(componentStyle$V);
 __decorateClass$up([
   n$3({ type: String })
 ], ObcCalendar.prototype, "type", 2);
@@ -99621,7 +99648,7 @@ __decorateClass$uk([
 ObcCheckButton = __decorateClass$uk([
   customElement("obc-check-button")
 ], ObcCheckButton);
-const componentStyle$Q = i$7`* {
+const componentStyle$R = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -99711,7 +99738,7 @@ let ObcCheckboxList = class extends i$4 {
     </div>`;
   }
 };
-ObcCheckboxList.styles = r$7(componentStyle$Q);
+ObcCheckboxList.styles = r$7(componentStyle$R);
 __decorateClass$uj([
   n$3({ type: String })
 ], ObcCheckboxList.prototype, "hoverStyle", 2);
@@ -100651,7 +100678,7 @@ const compentStyle$D = i$7`* {
     "ss04" on;
   }
 `;
-const componentStyle$P = i$7`* {
+const componentStyle$Q = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -101378,7 +101405,7 @@ let ObcStartStopSwitch = class extends i$4 {
     `;
   }
 };
-ObcStartStopSwitch.styles = r$7(componentStyle$P);
+ObcStartStopSwitch.styles = r$7(componentStyle$Q);
 __decorateClass$ue([
   n$3({ type: Boolean, reflect: true })
 ], ObcStartStopSwitch.prototype, "checked", 2);
@@ -103505,7 +103532,7 @@ __decorateClass$u7([
 ObcFilterChip = __decorateClass$u7([
   customElement("obc-filter-chip")
 ], ObcFilterChip);
-const componentStyle$O = i$7`* {
+const componentStyle$P = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -103705,7 +103732,7 @@ let ObcFormContainer = class extends i$4 {
     `;
   }
 };
-ObcFormContainer.styles = r$7(componentStyle$O);
+ObcFormContainer.styles = r$7(componentStyle$P);
 __decorateClass$u6([
   n$3({ type: String })
 ], ObcFormContainer.prototype, "type", 2);
@@ -103715,7 +103742,7 @@ __decorateClass$u6([
 ObcFormContainer = __decorateClass$u6([
   customElement("obc-form-container")
 ], ObcFormContainer);
-const componentStyle$N = i$7`* {
+const componentStyle$O = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -103819,14 +103846,14 @@ let ObcFormFooterContainer = class extends i$4 {
     `;
   }
 };
-ObcFormFooterContainer.styles = r$7(componentStyle$N);
+ObcFormFooterContainer.styles = r$7(componentStyle$O);
 __decorateClass$u5([
   n$3({ type: Boolean, attribute: "has-actions" })
 ], ObcFormFooterContainer.prototype, "hasActions", 2);
 ObcFormFooterContainer = __decorateClass$u5([
   customElement("obc-form-footer-container")
 ], ObcFormFooterContainer);
-const componentStyle$M = i$7`* {
+const componentStyle$N = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -104046,14 +104073,14 @@ let ObcFormGroup = class extends i$4 {
     `;
   }
 };
-ObcFormGroup.styles = r$7(componentStyle$M);
+ObcFormGroup.styles = r$7(componentStyle$N);
 __decorateClass$u4([
   n$3({ type: String })
 ], ObcFormGroup.prototype, "type", 2);
 ObcFormGroup = __decorateClass$u4([
   customElement("obc-form-group")
 ], ObcFormGroup);
-const componentStyle$L = i$7`* {
+const componentStyle$M = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -104449,7 +104476,7 @@ let ObcFormItem = class extends i$4 {
     `;
   }
 };
-ObcFormItem.styles = r$7(componentStyle$L);
+ObcFormItem.styles = r$7(componentStyle$M);
 __decorateClass$u3([
   n$3({ type: String })
 ], ObcFormItem.prototype, "type", 2);
@@ -105064,7 +105091,7 @@ __decorateClass$u1([
 ObcInputChip = __decorateClass$u1([
   customElement("obc-input-chip")
 ], ObcInputChip);
-const componentStyle$K = i$7`* {
+const componentStyle$L = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -105904,7 +105931,7 @@ let ObcKeyboardFull = class extends i$4 {
     `;
   }
 };
-ObcKeyboardFull.styles = r$7(componentStyle$K);
+ObcKeyboardFull.styles = r$7(componentStyle$L);
 __decorateClass$t_([
   n$3({ type: String })
 ], ObcKeyboardFull.prototype, "type", 2);
@@ -105941,7 +105968,7 @@ __decorateClass$t_([
 ObcKeyboardFull = __decorateClass$t_([
   customElement("obc-keyboard-full")
 ], ObcKeyboardFull);
-const componentStyle$J = i$7`* {
+const componentStyle$K = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -106318,7 +106345,7 @@ __decorateClass$tW([
 ObiEqual = __decorateClass$tW([
   customElement("obi-equal")
 ], ObiEqual);
-const componentStyle$I = i$7`* {
+const componentStyle$J = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -107234,7 +107261,7 @@ let ObcNumberInputField = class extends i$4 {
     `;
   }
 };
-ObcNumberInputField.styles = r$7(componentStyle$I);
+ObcNumberInputField.styles = r$7(componentStyle$J);
 __decorateClass$tV([
   n$3({ type: Number })
 ], ObcNumberInputField.prototype, "value", 2);
@@ -107679,7 +107706,7 @@ let ObcKeyboardNumeric = class extends i$4 {
     `;
   }
 };
-ObcKeyboardNumeric.styles = r$7(componentStyle$J);
+ObcKeyboardNumeric.styles = r$7(componentStyle$K);
 __decorateClass$tU([
   n$3({ type: String })
 ], ObcKeyboardNumeric.prototype, "type", 2);
@@ -108172,7 +108199,7 @@ __decorateClass$tT([
 ObcMenuButton = __decorateClass$tT([
   customElement("obc-menu-button")
 ], ObcMenuButton);
-const componentStyle$H = i$7`* {
+const componentStyle$I = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -108439,7 +108466,7 @@ let ObcModalWindow = class extends i$4 {
     `;
   }
 };
-ObcModalWindow.styles = r$7(componentStyle$H);
+ObcModalWindow.styles = r$7(componentStyle$I);
 __decorateClass$tS([
   n$3({ type: String })
 ], ObcModalWindow.prototype, "size", 2);
@@ -108458,7 +108485,7 @@ __decorateClass$tS([
 ObcModalWindow = __decorateClass$tS([
   customElement("obc-modal-window")
 ], ObcModalWindow);
-const componentStyle$G = i$7`* {
+const componentStyle$H = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -108647,7 +108674,7 @@ let ObcNotificationBadgeButton = class extends i$4 {
     `;
   }
 };
-ObcNotificationBadgeButton.styles = r$7(componentStyle$G);
+ObcNotificationBadgeButton.styles = r$7(componentStyle$H);
 __decorateClass$tR([
   n$3({ type: Boolean })
 ], ObcNotificationBadgeButton.prototype, "openRight", 2);
@@ -108672,7 +108699,7 @@ __decorateClass$tR([
 ObcNotificationBadgeButton = __decorateClass$tR([
   customElement("obc-notification-badge-button")
 ], ObcNotificationBadgeButton);
-const componentStyle$F = i$7`* {
+const componentStyle$G = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -109155,7 +109182,7 @@ let ObcNotificationButton = class extends i$4 {
     this.dispatchEvent(event);
   }
 };
-ObcNotificationButton.styles = r$7(componentStyle$F);
+ObcNotificationButton.styles = r$7(componentStyle$G);
 __decorateClass$tP([
   n$3({ type: String })
 ], ObcNotificationButton.prototype, "buttonStyle", 2);
@@ -109174,7 +109201,7 @@ __decorateClass$tP([
 ObcNotificationButton = __decorateClass$tP([
   customElement("obc-notification-button")
 ], ObcNotificationButton);
-const componentStyle$E = i$7`* {
+const componentStyle$F = i$7`* {
     -webkit-tap-highlight-color: transparent
 }`;
 var __defProp$tM = Object.defineProperty;
@@ -109241,7 +109268,7 @@ let ObcNotificationFloatingItem = class extends i$4 {
     `;
   }
 };
-ObcNotificationFloatingItem.styles = r$7(componentStyle$E);
+ObcNotificationFloatingItem.styles = r$7(componentStyle$F);
 __decorateClass$tO([
   n$3({ type: String })
 ], ObcNotificationFloatingItem.prototype, "type", 2);
@@ -109361,7 +109388,7 @@ __decorateClass$tN([
 ObcNotificationMenuItem = __decorateClass$tN([
   customElement("obc-notification-menu-item")
 ], ObcNotificationMenuItem);
-const componentStyle$D = i$7`* {
+const componentStyle$E = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 obi-notification-filled {
@@ -109459,7 +109486,7 @@ let ObcNotificationMessageItem = class extends i$4 {
     `;
   }
 };
-ObcNotificationMessageItem.styles = r$7(componentStyle$D);
+ObcNotificationMessageItem.styles = r$7(componentStyle$E);
 __decorateClass$tM([
   n$3({ type: String })
 ], ObcNotificationMessageItem.prototype, "title", 2);
@@ -109853,7 +109880,7 @@ __decorateClass$tJ([
 ObcPagination = __decorateClass$tJ([
   customElement("obc-pagination")
 ], ObcPagination);
-const componentStyle$C = i$7`* {
+const componentStyle$D = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -110328,7 +110355,7 @@ let ObcPivotItemGroup = class extends i$4 {
     `;
   }
 };
-ObcPivotItemGroup.styles = r$7(componentStyle$C);
+ObcPivotItemGroup.styles = r$7(componentStyle$D);
 __decorateClass$tH([
   n$3({ type: String })
 ], ObcPivotItemGroup.prototype, "direction", 2);
@@ -110341,7 +110368,7 @@ __decorateClass$tH([
 ObcPivotItemGroup = __decorateClass$tH([
   customElement("obc-pivot-item-group")
 ], ObcPivotItemGroup);
-const componentStyle$B = i$7`* {
+const componentStyle$C = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -110721,7 +110748,7 @@ let ObcProgressBar = class extends i$4 {
     }
   }
 };
-ObcProgressBar.styles = r$7(componentStyle$B);
+ObcProgressBar.styles = r$7(componentStyle$C);
 __decorateClass$tG([
   n$3({ type: String })
 ], ObcProgressBar.prototype, "type", 2);
@@ -110761,7 +110788,7 @@ __decorateClass$tG([
 ObcProgressBar = __decorateClass$tG([
   customElement("obc-progress-bar")
 ], ObcProgressBar);
-const componentStyle$A = i$7`* {
+const componentStyle$B = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -111486,7 +111513,7 @@ let ObcProgressButton = class extends i$4 {
     this.dispatchEvent(event);
   }
 };
-ObcProgressButton.styles = r$7(componentStyle$A);
+ObcProgressButton.styles = r$7(componentStyle$B);
 __decorateClass$tF([
   n$3({ type: String })
 ], ObcProgressButton.prototype, "type", 2);
@@ -111832,7 +111859,7 @@ __decorateClass$tE([
 ObcRichButton = __decorateClass$tE([
   customElement("obc-rich-button")
 ], ObcRichButton);
-const componentStyle$z = i$7`* {
+const componentStyle$A = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 .sequence-card {
@@ -112939,7 +112966,7 @@ button {
   border-color: var(--normal-hover-border-color, currentColor);
 }
 `;
-const componentStyle$y = i$7`* {
+const componentStyle$z = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -113302,7 +113329,7 @@ let ObcSequenceLoadingSpinner = class extends i$4 {
         `;
   }
 };
-ObcSequenceLoadingSpinner.styles = r$7(componentStyle$y);
+ObcSequenceLoadingSpinner.styles = r$7(componentStyle$z);
 __decorateClass$tD([
   n$3({ type: String })
 ], ObcSequenceLoadingSpinner.prototype, "type", 2);
@@ -113945,7 +113972,7 @@ let ObcSequenceCard = class extends i$4 {
     `;
   }
 };
-ObcSequenceCard.styles = r$7(componentStyle$z);
+ObcSequenceCard.styles = r$7(componentStyle$A);
 __decorateClass$tB([
   n$3({ type: String })
 ], ObcSequenceCard.prototype, "size", 2);
@@ -114012,7 +114039,7 @@ __decorateClass$tB([
 ObcSequenceCard = __decorateClass$tB([
   customElement("obc-sequence-card")
 ], ObcSequenceCard);
-const componentStyle$x = i$7`* {
+const componentStyle$y = i$7`* {
     -webkit-tap-highlight-color: transparent;
 }
 .sequence-connector .line {
@@ -114164,7 +114191,7 @@ let ObcSequenceConnector = class extends i$4 {
     `;
   }
 };
-ObcSequenceConnector.styles = r$7(componentStyle$x);
+ObcSequenceConnector.styles = r$7(componentStyle$y);
 __decorateClass$tA([
   n$3({ type: String })
 ], ObcSequenceConnector.prototype, "type", 2);
@@ -114685,7 +114712,7 @@ __decorateClass$tz([
 ObcSequenceItem = __decorateClass$tz([
   customElement("obc-sequence-item")
 ], ObcSequenceItem);
-const componentStyle$w = i$7`* {
+const componentStyle$x = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -114813,7 +114840,7 @@ let ObcSequenceModal = class extends i$4 {
     `;
   }
 };
-ObcSequenceModal.styles = r$7(componentStyle$w);
+ObcSequenceModal.styles = r$7(componentStyle$x);
 __decorateClass$ty([
   n$3({ type: String })
 ], ObcSequenceModal.prototype, "type", 2);
@@ -115097,7 +115124,7 @@ __decorateClass$tx([
 ObcSequenceToolbar = __decorateClass$tx([
   customElement("obc-sequence-toolbar")
 ], ObcSequenceToolbar);
-const componentStyle$v = i$7`* {
+const componentStyle$w = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -115545,7 +115572,7 @@ let ObcSlideButton = class extends i$4 {
     `;
   }
 };
-ObcSlideButton.styles = r$7(componentStyle$v);
+ObcSlideButton.styles = r$7(componentStyle$w);
 __decorateClass$tw([
   n$3({ type: Boolean })
 ], ObcSlideButton.prototype, "disabled", 2);
@@ -115573,7 +115600,7 @@ __decorateClass$tw([
 ObcSlideButton = __decorateClass$tw([
   customElement("obc-slide-button")
 ], ObcSlideButton);
-const componentStyle$u = i$7`* {
+const componentStyle$v = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -116264,7 +116291,7 @@ let ObcSliderDouble = class extends i$4 {
     `;
   }
 };
-ObcSliderDouble.styles = r$7(componentStyle$u);
+ObcSliderDouble.styles = r$7(componentStyle$v);
 __decorateClass$tv([
   n$3({ type: Number })
 ], ObcSliderDouble.prototype, "low", 2);
@@ -120443,7 +120470,7 @@ __decorateClass$ta([
 ObcTabRow = __decorateClass$ta([
   customElement("obc-tab-row")
 ], ObcTabRow);
-const componentStyle$t = i$7`* {
+const componentStyle$u = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -121537,7 +121564,7 @@ let ObcTextareaField = class extends i$4 {
     `;
   }
 };
-ObcTextareaField.styles = r$7(componentStyle$t);
+ObcTextareaField.styles = r$7(componentStyle$u);
 __decorateClass$t5([
   n$3({ type: String })
 ], ObcTextareaField.prototype, "type", 2);
@@ -121629,7 +121656,7 @@ ObcTextareaField = __decorateClass$t5([
   customElement("obc-textarea-field"),
   localized()
 ], ObcTextareaField);
-const componentStyle$s = i$7`* {
+const componentStyle$t = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -121835,7 +121862,7 @@ let ObcTitleContainer = class extends i$4 {
     `;
   }
 };
-ObcTitleContainer.styles = r$7(componentStyle$s);
+ObcTitleContainer.styles = r$7(componentStyle$t);
 __decorateClass$t4([
   n$3({ type: String })
 ], ObcTitleContainer.prototype, "state", 2);
@@ -121848,7 +121875,7 @@ __decorateClass$t4([
 ObcTitleContainer = __decorateClass$t4([
   customElement("obc-title-container")
 ], ObcTitleContainer);
-const componentStyle$r = i$7`* {
+const componentStyle$s = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -121989,7 +122016,7 @@ let ObcToggleButtonThreeState = class extends i$4 {
     `;
   }
 };
-ObcToggleButtonThreeState.styles = r$7(componentStyle$r);
+ObcToggleButtonThreeState.styles = r$7(componentStyle$s);
 __decorateClass$t3([
   n$3({ type: String })
 ], ObcToggleButtonThreeState.prototype, "state", 2);
@@ -123378,7 +123405,7 @@ __decorateClass$t0([
 ObcToggletip = __decorateClass$t0([
   customElement("obc-toggletip")
 ], ObcToggletip);
-const componentStyle$q = i$7`* {
+const componentStyle$r = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -123609,7 +123636,7 @@ let ObcTooltip = class extends i$4 {
     `;
   }
 };
-ObcTooltip.styles = r$7(componentStyle$q);
+ObcTooltip.styles = r$7(componentStyle$r);
 __decorateClass$s$([
   n$3({ type: String })
 ], ObcTooltip.prototype, "type", 2);
@@ -124297,7 +124324,7 @@ __decorateClass$sW([
 ObcTopBar = __decorateClass$sW([
   customElement("obc-top-bar")
 ], ObcTopBar);
-const componentStyle$p = i$7`* {
+const componentStyle$q = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -124374,7 +124401,7 @@ let ObcTreeNavigationGroup = class extends i$4 {
     `;
   }
 };
-ObcTreeNavigationGroup.styles = r$7(componentStyle$p);
+ObcTreeNavigationGroup.styles = r$7(componentStyle$q);
 __decorateClass$sV([
   n$3({ type: String })
 ], ObcTreeNavigationGroup.prototype, "label", 2);
@@ -124408,7 +124435,7 @@ __decorateClass$sV([
 ObcTreeNavigationGroup = __decorateClass$sV([
   customElement("obc-tree-navigation-group")
 ], ObcTreeNavigationGroup);
-const componentStyle$o = i$7`* {
+const componentStyle$p = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -124526,11 +124553,11 @@ let ObcTreeNavigation = class extends i$4 {
     </div>`;
   }
 };
-ObcTreeNavigation.styles = r$7(componentStyle$o);
+ObcTreeNavigation.styles = r$7(componentStyle$p);
 ObcTreeNavigation = __decorateClass$sU([
   customElement("obc-tree-navigation")
 ], ObcTreeNavigation);
-const componentStyle$n = i$7`* {
+const componentStyle$o = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -125284,7 +125311,7 @@ let ObcUserMenu = class extends i$4 {
     `;
   }
 };
-ObcUserMenu.styles = r$7(componentStyle$n);
+ObcUserMenu.styles = r$7(componentStyle$o);
 __decorateClass$sS([
   n$3({ type: String })
 ], ObcUserMenu.prototype, "type", 2);
@@ -222517,7 +222544,7 @@ __decorateClass$Z([
 ObcIntegrationFleetButton = __decorateClass$Z([
   customElement("obc-integration-fleet-button")
 ], ObcIntegrationFleetButton);
-const componentStyle$m = i$7`* {
+const componentStyle$n = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -222685,7 +222712,7 @@ let ObcIntegrationVesselMenu = class extends i$4 {
     `;
   }
 };
-ObcIntegrationVesselMenu.styles = r$7(componentStyle$m);
+ObcIntegrationVesselMenu.styles = r$7(componentStyle$n);
 __decorateClass$Y([
   n$3({ type: Boolean, attribute: false })
 ], ObcIntegrationVesselMenu.prototype, "hasActions", 2);
@@ -224027,7 +224054,7 @@ function thrusterColors(options, state, priority) {
     arrowColor: arrowColor2
   };
 }
-const componentStyle$l = i$7`* {
+const componentStyle$m = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -224289,7 +224316,7 @@ let ObcAzimuthThruster = class extends i$4 {
     this._thrustSp.dispose();
   }
 };
-ObcAzimuthThruster.styles = r$7(componentStyle$l);
+ObcAzimuthThruster.styles = r$7(componentStyle$m);
 __decorateClass$U([
   n$3({ type: Number })
 ], ObcAzimuthThruster.prototype, "angle", 2);
@@ -224722,7 +224749,7 @@ __decorateClass$S([
 ObcBearingIndicator = __decorateClass$S([
   customElement("obc-bearing-indicator")
 ], ObcBearingIndicator);
-const componentStyle$k = i$7`* {
+const componentStyle$l = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -225568,7 +225595,7 @@ ObcCompassFlat.READOUT_RESERVE_PX = 56;
 ObcCompassFlat.styles = [
   r$7(instrumentReadoutStyle),
   centerReadoutStyles,
-  r$7(componentStyle$k)
+  r$7(componentStyle$l)
 ];
 __decorateClass$Q([
   n$3({ type: Boolean })
@@ -225642,7 +225669,7 @@ __decorateClass$Q([
 ObcCompassFlat = __decorateClass$Q([
   customElement("obc-compass-flat")
 ], ObcCompassFlat);
-const componentStyle$j = i$7`* {
+const componentStyle$k = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 svg {
@@ -225959,7 +225986,7 @@ let ObcCompassIndicator = class extends i$4 {
     );
   }
 };
-ObcCompassIndicator.styles = r$7(componentStyle$j);
+ObcCompassIndicator.styles = r$7(componentStyle$k);
 __decorateClass$P([
   n$3({ type: Number })
 ], ObcCompassIndicator.prototype, "angle", 2);
@@ -225975,7 +226002,7 @@ __decorateClass$P([
 ObcCompassIndicator = __decorateClass$P([
   customElement("obc-compass-indicator")
 ], ObcCompassIndicator);
-const componentStyle$i = i$7`* {
+const componentStyle$j = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -225997,6 +226024,13 @@ const componentStyle$i = i$7`* {
   height: 100%;
 }
 
+.container > svg {
+  /* The arc is drawn where it points and rotated into the window, so it paints
+     outside the cropped viewBox; \`transform-origin\` (set inline) keeps that
+     rotation on the compass centre. */
+  overflow: visible;
+}
+
 .container > .readout {
   left: 50%;
   width: auto;
@@ -226006,17 +226040,19 @@ const componentStyle$i = i$7`* {
 
 :host {
   display: block;
-  width: 100%;
-  height: 100%;
-  /* Clips the rotated overlay <svg transform="rotate(...)">, whose corners
-     swing outside the host and leak arc pixels in wide layouts (same
-     protection obc-watch has had since #994). Known trade-off: the HDG/COG
-     arrow apexes previously painted 1-2px past the host's top edge and are
-     now shaved flat at the box edge — imperceptible at normal viewing.
-     TODO(designer): if the shave is unwanted, the frame needs headroom so
-     the arrow tips fit inside the box — see "Host clipping & the arrow-apex
-     shave" in docs/agents/watch-radial-instruments.md before changing
-     (interacts with the #1021/#1049 label-reserve geometry). */
+  /* The element is the cropped canvas, not a square holding one, so the
+     aspect comes from the frame each render — the crop and the label reserve
+     both move it. 448 / 217 is the default crop's box (448 wide × 448·(1 −
+     51.5%) tall); keep in sync with \`SECTOR_CLIP_BOTTOM\` in
+     compass-sector.ts. */
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  aspect-ratio: var(--obc-compass-sector-aspect, 448 / 217);
+
+  /* Both layers paint past their viewBox so the rotation can carry the arc in;
+     this is the edge that bounds the component. */
   overflow: hidden;
 }
 `;
@@ -226195,7 +226231,12 @@ var __decorateClass$O = (decorators, target, key, kind) => {
   if (kind && result) __defProp$O(target, key, result);
   return result;
 };
-const PADDING = 72;
+const BASE_PADDING = 48;
+const SECTOR_CLIP_BOTTOM = 51.5;
+const SECTOR_CLIP_BOTTOM_ROT = 50.4;
+const SECTOR_CLIP_BOTTOM_INSIDE_LABELS = 47.3;
+const SECTOR_CLIP_BOTTOM_READOUT = 44;
+const SECTOR_SIDE_MARGIN = 0;
 const WATCH_TYPE = WatchCircleType.triple;
 const INNER_RADIUS = innerRingRadiusFor(WATCH_TYPE);
 const ARC_HALF_EXTENT = 60;
@@ -226251,11 +226292,16 @@ let ObcCompassSector = class extends i$4 {
     this._halfFOV = 30;
     this._arcHalfExtent = ARC_HALF_EXTENT;
     this._scale = 1;
-    this._radiusOffset = 0;
-    this._cachedViewBox = "";
     this._cachedAreas = [];
     this._cachedTickmarks = [];
     this._cachedAdvices = [];
+    this._resizeController = new h(this, {});
+    this._aspectWidth = 448;
+    this._aspectHeight = 217.28;
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
   }
   willUpdate(changed) {
     super.willUpdate(changed);
@@ -226301,13 +226347,19 @@ let ObcCompassSector = class extends i$4 {
           roundOutsideCut: true
         }
       ];
-      this._computeViewBox();
       this._cachedTickmarks = this._buildTickmarks();
     }
     if (arcInputsChanged || changed.has("headingAdvices")) {
       this._cachedAdvices = this._buildAdvices();
     }
   }
+  updated(changed) {
+    super.updated(changed);
+    this.style.setProperty(
+      "--obc-compass-sector-aspect",
+      `${this._aspectWidth} / ${this._aspectHeight}`
+    );
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this._headingSp.dispose();
@@ -226361,25 +226413,45 @@ let ObcCompassSector = class extends i$4 {
   // ---------------------------------------------------------------------------
   // ViewBox
   // ---------------------------------------------------------------------------
-  _computeViewBox() {
-    if (this.zoomToFitArc) {
-      const targetSize = (176 + PADDING) * 2;
-      const frame = computeZoomToFitArcFrame({
-        areas: this._cachedAreas,
-        outerRadius: OUTER_RING_RADIUS,
-        innerRadius: INNER_RADIUS,
-        extension: PADDING,
-        targetSize
-      });
-      this._radiusOffset = frame.radiusOffset;
-      this._cachedViewBox = frame.viewBox;
-      this._cachedArcFrame = frame;
-    } else {
-      this._radiusOffset = 0;
-      const width = (176 + PADDING) * 2;
-      this._cachedViewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
-      this._cachedArcFrame = void 0;
+  /** Deepest crop the active features need, so none of them is shaved. */
+  _clipBottom() {
+    const clips = [SECTOR_CLIP_BOTTOM];
+    if (this.rotType !== void 0 && this.rotPosition === RotPosition.innerCircle) {
+      clips.push(SECTOR_CLIP_BOTTOM_ROT);
     }
+    if (this.tickmarksInside) {
+      clips.push(SECTOR_CLIP_BOTTOM_INSIDE_LABELS);
+    }
+    if (this.hasReadout) {
+      clips.push(SECTOR_CLIP_BOTTOM_READOUT);
+    }
+    return Math.min(...clips);
+  }
+  /**
+   * One frame per render, feeding both layers: the shared sector box cropped
+   * to the arc. Zoom enlarges the arc rather than the window, so the window
+   * only slides outward by the radius offset and the canvas holds still.
+   */
+  _buildFrame() {
+    const frame = computeRadialFrame({
+      basePadding: BASE_PADDING,
+      labelWidthPx: this.tickmarksInside ? 0 : estimateLabelWidthPx(this._cachedTickmarks.map((t2) => t2.text)),
+      clips: { top: 0, bottom: this._clipBottom(), left: 0, right: 0 },
+      containerPx: measureContainerPx(this)
+    });
+    if (!this.zoomToFitArc) {
+      return frame;
+    }
+    const halfWidth = frame.width / 2 - SECTOR_SIDE_MARGIN;
+    const sin = Math.sin(degToRad(this._arcHalfExtent));
+    const radiusOffset = Math.max(0, halfWidth / sin - OUTER_RING_RADIUS);
+    const y3 = frame.y - radiusOffset;
+    return {
+      ...frame,
+      y: y3,
+      radiusOffset,
+      viewBox: `${frame.x} ${y3} ${frame.width} ${frame.height}`
+    };
   }
   // ---------------------------------------------------------------------------
   // North arrow — rendered in overlay at mapped 0° position
@@ -226432,38 +226504,32 @@ let ObcCompassSector = class extends i$4 {
     return selected.includes(element) ? this.priority : Priority.regular;
   }
   /**
-   * Vertical placement of the readout as a percentage of the host height.
-   *
-   * With `zoomToFitArc` the arc is reframed by `computeZoomToFitArcFrame`, whose
-   * `radiusOffset`/`viewBox` depend on the arc's *absolute* orientation (which
-   * cardinal axes its bounding box crosses), not just its bend. The arc itself
-   * is always rotated back to the top, so it stays put on screen — but a
-   * frame-derived offset would swing wildly as `heading` rotates the bbox around
-   * the circle. So in zoom we use a fixed offset, which keeps the readout steady
-   * under the (stationary) arc regardless of heading.
+   * Vertical placement of the readout as a percentage of the frame height.
    *
-   * Without zoom the viewBox is the fixed, origin-symmetric 120° framing, so the
-   * geometry is orientation-independent: place the readout halfway down the inner
-   * radius from the watch center toward the arc's inner edge.
+   * The anchor sits halfway down the inner radius, below the arc's inner edge.
+   * Zoom pushes that edge out by the radius offset, so the anchor follows it
+   * and the gap under the arc reads the same in both modes.
    */
-  get _readoutTopPercent() {
-    if (this.zoomToFitArc) {
-      return 70;
-    }
-    const [, vy, , vh] = this._cachedViewBox.split(" ").map(Number);
-    if (!vh || Number.isNaN(vy)) {
+  _readoutTopPercent(frame) {
+    if (!frame.height) {
       return 50;
     }
-    const anchorY = -INNER_RADIUS * 0.5;
-    return Math.round((anchorY - vy) / vh * 1e3) / 10;
+    const anchorY = -INNER_RADIUS * 0.5 - frame.radiusOffset;
+    return Math.round((anchorY - frame.y) / frame.height * 1e3) / 10;
   }
   // ---------------------------------------------------------------------------
   // Render
   // ---------------------------------------------------------------------------
   render() {
     const rotation = -this.heading;
-    const viewBox = this._cachedViewBox;
-    const rOff = this._radiusOffset;
+    const frame = this._buildFrame();
+    const viewBox = frame.viewBox;
+    const rOff = frame.radiusOffset;
+    const pivotX = -frame.x / frame.width * 100;
+    const pivotY = -frame.y / frame.height * 100;
+    this._aspectWidth = frame.width;
+    this._aspectHeight = frame.height;
+    const tickmarks = frame.labelsHidden ? this._cachedTickmarks.map((t2) => ({ ...t2, text: void 0 })) : this._cachedTickmarks;
     const mappedCOG = this._mapAngle(this.courseOverGround);
     const mappedSetpoint = this.headingSetpoint != null ? this._mapAngle(this.headingSetpoint) : void 0;
     const mappedNewSetpoint = this.newHeadingSetpoint != null ? this._mapAngle(this.newHeadingSetpoint) : void 0;
@@ -226471,17 +226537,15 @@ let ObcCompassSector = class extends i$4 {
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .padding=${PADDING}
           .advices=${this._cachedAdvices}
-          .tickmarks=${this._cachedTickmarks}
+          .tickmarks=${tickmarks}
           .tickmarkStyle=${TickmarkStyle$1.regular}
           .tickmarksInside=${this.tickmarksInside}
           .state=${this.state}
           .watchCircleType=${WATCH_TYPE}
           .northArrow=${false}
           .areas=${this._cachedAreas}
-          .arcFrame=${this._cachedArcFrame}
-          .zoomToFitArc=${this.zoomToFitArc}
+          .arcFrame=${frame}
           .tickFadeAngle=${this._arcHalfExtent * 0.2}
           .rotation=${rotation}
           .angleSetpoint=${mappedSetpoint}
@@ -226506,7 +226570,11 @@ let ObcCompassSector = class extends i$4 {
           .rotationsPerMinute=${this.rotationsPerMinute}
         >
         </obc-watch>
-        <svg viewBox="${viewBox}" transform="rotate(${rotation})">
+        <svg
+          viewBox="${viewBox}"
+          transform="rotate(${rotation})"
+          style="transform-origin: ${pivotX}% ${pivotY}%"
+        >
           <g transform="rotate(${this.heading})">
             <line
               x1="0"
@@ -226540,7 +226608,7 @@ let ObcCompassSector = class extends i$4 {
         </svg>
         ${this.hasReadout ? b`<div
                 class="readout"
-                style="top: ${this._readoutTopPercent}%"
+                style="top: ${this._readoutTopPercent(frame)}%"
               >
                 ${renderCenterReadouts([
       {
@@ -226565,7 +226633,7 @@ let ObcCompassSector = class extends i$4 {
 ObcCompassSector.styles = [
   r$7(instrumentReadoutStyle),
   centerReadoutStyles,
-  r$7(componentStyle$i)
+  r$7(componentStyle$j)
 ];
 __decorateClass$O([
   n$3({ type: Number })
@@ -227662,7 +227730,7 @@ __decorateClass$L([
 ObcDepthActual = __decorateClass$L([
   customElement("obc-depth-actual")
 ], ObcDepthActual);
-const componentStyle$h = i$7`* {
+const componentStyle$i = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -227829,7 +227897,7 @@ let ObcDepthIndicator = class extends i$4 {
     `;
   }
 };
-ObcDepthIndicator.styles = r$7(componentStyle$h);
+ObcDepthIndicator.styles = r$7(componentStyle$i);
 __decorateClass$K([
   n$3({ type: String })
 ], ObcDepthIndicator.prototype, "variant", 2);
@@ -227839,7 +227907,7 @@ __decorateClass$K([
 ObcDepthIndicator = __decorateClass$K([
   customElement("obc-depth-indicator")
 ], ObcDepthIndicator);
-const componentStyle$g = i$7`* {
+const componentStyle$h = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -227867,7 +227935,7 @@ const componentStyle$g = i$7`* {
   height: 100%;
 }
 `;
-const componentStyle$f = i$7`* {
+const componentStyle$g = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -228027,7 +228095,7 @@ let ObcDepthTopBand = class extends i$4 {
     `;
   }
 };
-ObcDepthTopBand.styles = r$7(componentStyle$f);
+ObcDepthTopBand.styles = r$7(componentStyle$g);
 __decorateClass$J([
   n$3({ type: String })
 ], ObcDepthTopBand.prototype, "type", 2);
@@ -228353,7 +228421,7 @@ let ObcDepth = class extends i$4 {
     `;
   }
 };
-ObcDepth.styles = r$7(componentStyle$g);
+ObcDepth.styles = r$7(componentStyle$h);
 __decorateClass$I([
   n$3({ type: String })
 ], ObcDepth.prototype, "type", 2);
@@ -228576,7 +228644,7 @@ __decorateClass$H([
 ObcDraftTrim = __decorateClass$H([
   customElement("obc-draft-trim")
 ], ObcDraftTrim);
-const componentStyle$e = i$7`* {
+const componentStyle$f = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -228799,7 +228867,7 @@ let ObcGaugeBarIndicator = class extends i$4 {
     `;
   }
 };
-ObcGaugeBarIndicator.styles = r$7(componentStyle$e);
+ObcGaugeBarIndicator.styles = r$7(componentStyle$f);
 __decorateClass$G([
   n$3({ type: Number })
 ], ObcGaugeBarIndicator.prototype, "value", 2);
@@ -229070,7 +229138,7 @@ __decorateClass$F([
 ObcGaugeHorizontal = __decorateClass$F([
   customElement("obc-gauge-horizontal")
 ], ObcGaugeHorizontal);
-const componentStyle$d = i$7`* {
+const componentStyle$e = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -229746,7 +229814,7 @@ let ObcGaugeRadialIndicator = class extends i$4 {
     `;
   }
 };
-ObcGaugeRadialIndicator.styles = r$7(componentStyle$d);
+ObcGaugeRadialIndicator.styles = r$7(componentStyle$e);
 __decorateClass$E([
   n$3({ type: Number })
 ], ObcGaugeRadialIndicator.prototype, "value", 2);
@@ -229771,7 +229839,7 @@ __decorateClass$E([
 ObcGaugeRadialIndicator = __decorateClass$E([
   customElement("obc-gauge-radial-indicator")
 ], ObcGaugeRadialIndicator);
-const componentStyle$c = i$7`* {
+const componentStyle$d = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -229799,12 +229867,8 @@ const componentStyle$c = i$7`* {
 
   position: relative;
 
-  /* The dial is the largest box of its sector's aspect ratio that fits inside
-     *both* the available width and height of the (full-size) host. \`width: auto\`
-     stretches the block to the host width, then \`aspect-ratio\` + \`max-height\`
-     transfer the constraint back, shrinking it to fit a short host too — see
-     issue #992. The host always fills its container, so the gauge can be
-     positioned within the leftover space via the alignment classes below. */
+  /* The host always fills its container, so the gauge can be positioned within
+     the leftover space via the alignment classes below. */
   width: auto;
   height: auto;
   max-width: 100%;
@@ -230144,7 +230208,7 @@ let ObcGaugeRadial = class extends SetpointMixin(i$4) {
     `;
   }
 };
-ObcGaugeRadial.styles = r$7(componentStyle$c);
+ObcGaugeRadial.styles = r$7(componentStyle$d);
 __decorateClass$D([
   n$3({ type: Number })
 ], ObcGaugeRadial.prototype, "value", 2);
@@ -230214,7 +230278,7 @@ __decorateClass$D([
 ObcGaugeRadial = __decorateClass$D([
   customElement("obc-gauge-radial")
 ], ObcGaugeRadial);
-const componentStyle$b = i$7`* {
+const componentStyle$c = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -230566,7 +230630,7 @@ let ObcGaugeTrendIndicator = class extends i$4 {
     `;
   }
 };
-ObcGaugeTrendIndicator.styles = r$7(componentStyle$b);
+ObcGaugeTrendIndicator.styles = r$7(componentStyle$c);
 __decorateClass$C([
   n$3({ type: String })
 ], ObcGaugeTrendIndicator.prototype, "type", 2);
@@ -230997,7 +231061,7 @@ __decorateClass$A([
 ObcGraphMini = __decorateClass$A([
   customElement("obc-graph-mini")
 ], ObcGraphMini);
-const componentStyle$a = i$7`* {
+const componentStyle$b = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -231228,7 +231292,7 @@ let ObcHeadingIndicator = class extends i$4 {
     return this.type === "XTD" ? this.renderXtd() : this.renderHdg();
   }
 };
-ObcHeadingIndicator.styles = r$7(componentStyle$a);
+ObcHeadingIndicator.styles = r$7(componentStyle$b);
 __decorateClass$z([
   n$3({ type: String })
 ], ObcHeadingIndicator.prototype, "type", 2);
@@ -232375,7 +232439,7 @@ var __decorateClass$u = (decorators, target, key, kind) => {
   if (kind && result) __defProp$u(target, key, result);
   return result;
 };
-const componentStyle$9 = `:host {
+const componentStyle$a = `:host {
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -232780,7 +232844,7 @@ let ObcMainEngineIndicator = class extends i$4 {
     `;
   }
 };
-ObcMainEngineIndicator.styles = r$7(componentStyle$9);
+ObcMainEngineIndicator.styles = r$7(componentStyle$a);
 __decorateClass$u([
   n$3({ type: Number })
 ], ObcMainEngineIndicator.prototype, "pitchValue", 1);
@@ -235950,7 +236014,7 @@ var __decorateClass$l = (decorators, target, key, kind) => {
   if (kind && result) __defProp$l(target, key, result);
   return result;
 };
-const componentStyle$8 = `:host {
+const componentStyle$9 = `:host {
   display: inline-block;
   width: var(--global-size-spacing-touch-target-min);
   height: var(--global-size-spacing-touch-target-min);
@@ -236175,7 +236239,7 @@ let ObcTunnelThruster = class extends i$4 {
     `;
   }
 };
-ObcTunnelThruster.styles = r$7(componentStyle$8);
+ObcTunnelThruster.styles = r$7(componentStyle$9);
 __decorateClass$l([
   n$3({ type: Number })
 ], ObcTunnelThruster.prototype, "value", 1);
@@ -236395,7 +236459,7 @@ __decorateClass$k([
 ObcRateOfTurn = __decorateClass$k([
   customElement("obc-rate-of-turn")
 ], ObcRateOfTurn);
-const componentStyle$7 = i$7`* {
+const componentStyle$8 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -236578,7 +236642,7 @@ let ObcReadoutList = class extends i$4 {
     `;
   }
 };
-ObcReadoutList.styles = r$7(componentStyle$7);
+ObcReadoutList.styles = r$7(componentStyle$8);
 __decorateClass$j([
   n$3({ type: Boolean, reflect: true })
 ], ObcReadoutList.prototype, "showDebugOverlay", 2);
@@ -237004,7 +237068,7 @@ __decorateClass$h([
 ObcRoll = __decorateClass$h([
   customElement("obc-roll")
 ], ObcRoll);
-const componentStyle$6 = i$7`* {
+const componentStyle$7 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -237214,7 +237278,7 @@ let ObcRotIndicator = class extends i$4 {
     `;
   }
 };
-ObcRotIndicator.styles = r$7(componentStyle$6);
+ObcRotIndicator.styles = r$7(componentStyle$7);
 __decorateClass$g([
   n$3({ type: String })
 ], ObcRotIndicator.prototype, "type", 2);
@@ -237233,7 +237297,7 @@ __decorateClass$g([
 ObcRotIndicator = __decorateClass$g([
   customElement("obc-rot-indicator")
 ], ObcRotIndicator);
-const componentStyle$5 = i$7`* {
+const componentStyle$6 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -237418,7 +237482,7 @@ let ObcRotLinear = class extends i$4 {
 ObcRotLinear.styles = [
   r$7(instrumentReadoutStyle),
   centerReadoutStyles,
-  r$7(componentStyle$5)
+  r$7(componentStyle$6)
 ];
 __decorateClass$f([
   n$3({ type: Number })
@@ -237664,7 +237728,7 @@ __decorateClass$e([
 ObcRotSector = __decorateClass$e([
   customElement("obc-rot-sector")
 ], ObcRotSector);
-const componentStyle$4 = i$7`* {
+const componentStyle$5 = i$7`* {
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -238057,7 +238121,7 @@ let ObcRudderIndicator = class extends i$4 {
     `;
   }
 };
-ObcRudderIndicator.styles = r$7(componentStyle$4);
+ObcRudderIndicator.styles = r$7(componentStyle$5);
 __decorateClass$d([
   n$3({ type: Number })
 ], ObcRudderIndicator.prototype, "angle", 2);
@@ -238073,6 +238137,41 @@ __decorateClass$d([
 ObcRudderIndicator = __decorateClass$d([
   customElement("obc-rudder-indicator")
 ], ObcRudderIndicator);
+const componentStyle$4 = i$7`* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.container > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:host {
+  display: block;
+  /* The element is the cropped canvas, not a square holding one, so the
+     aspect comes from the frame each render — the top crop and zoom both move
+     it. 448 / 269 is the un-zoomed box (448 wide × 448·(1 − 40%) tall); keep
+     in sync with the \`clips\` top in rudder.ts. */
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  aspect-ratio: var(--obc-rudder-aspect, 448 / 269);
+}
+`;
 var __defProp$c = Object.defineProperty;
 var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
 var __decorateClass$c = (decorators, target, key, kind) => {
@@ -238106,12 +238205,36 @@ let ObcRudder = class extends SetpointMixin(i$4) {
   }
   updated(changed) {
     super.updated(changed);
+    const frame = this._frame;
+    if (frame) {
+      this.style.setProperty(
+        "--obc-rudder-aspect",
+        `${frame.width} / ${frame.height}`
+      );
+    }
     this._hostSizePinned = applyPinnedHostSize(
       this,
       this._frame,
       this._hostSizePinned
     );
   }
+  /** Box the zoomed frame must keep visible, in SVG units. */
+  _needleIncludeBox(radiusOffset) {
+    if (this.variant !== "needle") {
+      return void 0;
+    }
+    const rad = degToRad(this.getAngle(this.angle));
+    const u2 = { x: Math.sin(rad), y: -Math.cos(rad) };
+    const inner = ObcRudder.NEEDLE_INNER_RADIUS + radiusOffset;
+    const outer = ObcRudder.NEEDLE_OUTER_RADIUS + radiusOffset;
+    const w2 = ObcRudder.NEEDLE_HALF_WIDTH;
+    return {
+      xMin: Math.min(inner * u2.x, outer * u2.x) - w2,
+      xMax: Math.max(inner * u2.x, outer * u2.x) + w2,
+      yMin: Math.min(inner * u2.y, outer * u2.y) - w2,
+      yMax: Math.max(inner * u2.y, outer * u2.y) + w2
+    };
+  }
   get _needleTransform() {
     const rOff = this._radiusOffset;
     if (rOff > 0) {
@@ -238225,16 +238348,21 @@ let ObcRudder = class extends SetpointMixin(i$4) {
         state
       };
     });
-    const frame = computeRadialFrame({
+    const frameOptions = {
       basePadding: 48,
       labelWidthPx: this.tickmarksInside ? 0 : estimateLabelWidthPx(tickmarks.map((t2) => t2.text)),
       clips: this.zoomToFitArc ? void 0 : { top: 40, bottom: 0, left: 0, right: 0 },
       containerPx: measureContainerPx(this),
       faceDiameter: this.faceDiameter,
       zoomToFitArc: this.zoomToFitArc,
+      // The zoomed arc is flat; a square box would be mostly empty height.
+      zoomFit: ArcFrameFit.bbox,
       areas,
       innerRadius: innerRingRadiusFor(WatchCircleType.double)
-    });
+    };
+    const probe = computeRadialFrame(frameOptions);
+    const zoomIncludeBox = this.zoomToFitArc ? this._needleIncludeBox(probe.radiusOffset) : void 0;
+    const frame = zoomIncludeBox ? computeRadialFrame({ ...frameOptions, zoomIncludeBox }) : probe;
     this._radiusOffset = frame.radiusOffset;
     this._frame = frame;
     const shownTickmarks = frame.labelsHidden ? tickmarks.map((t2) => ({ ...t2, text: void 0 })) : tickmarks;
@@ -238265,25 +238393,10 @@ let ObcRudder = class extends SetpointMixin(i$4) {
     `;
   }
 };
-ObcRudder.styles = i$7`
-    * {
-      box-sizing: border-box;
-    }
-
-    .container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-    }
-
-    .container > * {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-  `;
+ObcRudder.NEEDLE_INNER_RADIUS = -16.5;
+ObcRudder.NEEDLE_OUTER_RADIUS = 160.65;
+ObcRudder.NEEDLE_HALF_WIDTH = 16.5;
+ObcRudder.styles = r$7(componentStyle$4);
 __decorateClass$c([
   n$3({ type: Number })
 ], ObcRudder.prototype, "angle", 2);