@oicl/openbridge-webcomponents 2.0.0-next.102 → 2.0.0-next.104

package/bundle/openbridge-webcomponents.bundle.js

@@ -53844,6 +53844,250 @@ function arcContainsAngle(startDeg, endDeg, testDeg) {
 function round4(n3) {
   return Math.round(n3 * 1e4) / 1e4;
 }
+const OUTER_RING_RADIUS$1 = 368 / 2;
+const RADIAL_VIEWBOX_BASE = 176;
+const LABEL_RADIAL_PAD_UNITS = 3;
+const LABEL_ANCHOR_OFFSET_PX = 9;
+const LABEL_EDGE_PAD_PX = 4;
+const DIGIT_WIDTH_PX = 7;
+const NSWE_LABEL_WIDTH_PX = 16;
+const NORTH_ARROW_WIDTH_PX = 16;
+const LABEL_RESERVE_MAX_FRACTION = 0.45;
+const END_MAXMIN_LABEL_DROP_PX = 21;
+const SIDE_LABEL_DROP_PX = 13;
+function measureContainerPx(host) {
+  let width = host.clientWidth;
+  let height = host.clientHeight;
+  if (width === 0 || height === 0) {
+    const box = host.parentElement?.getBoundingClientRect();
+    if (box) {
+      width = box.width;
+      height = box.height;
+    }
+  }
+  return { width, height };
+}
+function applyPinnedHostSize(host, frame, wasPinned) {
+  if (frame?.hostWidthPx !== void 0 && frame.hostHeightPx !== void 0) {
+    host.style.width = `${frame.hostWidthPx}px`;
+    host.style.height = `${frame.hostHeightPx}px`;
+    host.style.display = "block";
+    return true;
+  }
+  if (wasPinned) {
+    host.style.removeProperty("width");
+    host.style.removeProperty("height");
+    host.style.removeProperty("display");
+  }
+  return false;
+}
+function observeInnerBox(controller, renderRoot) {
+  const box = renderRoot.querySelector("svg, .container");
+  if (box) {
+    controller.observe(box);
+  }
+}
+function estimateLabelWidthPx(texts) {
+  let maxChars = 0;
+  for (const t2 of texts) {
+    if (t2 !== void 0 && t2.length > maxChars) {
+      maxChars = t2.length;
+    }
+  }
+  return maxChars * DIGIT_WIDTH_PX;
+}
+function clipFractions(clips) {
+  if (!clips) {
+    return { fx: 1, fy: 1 };
+  }
+  const fx = 1 - (clips.left + clips.right) / 100;
+  const fy = 1 - (clips.top + clips.bottom) / 100;
+  return { fx: fx > 0 ? fx : 1, fy: fy > 0 ? fy : 1 };
+}
+function buildViewBox(side, clips) {
+  const { fx, fy } = clipFractions(clips);
+  const width = side * fx;
+  const height = side * fy;
+  const x2 = -side / 2 + side * (clips?.left ?? 0) / 100;
+  const y3 = -side / 2 + side * (clips?.top ?? 0) / 100;
+  return {
+    x: x2,
+    y: y3,
+    width,
+    height,
+    viewBox: `${x2} ${y3} ${width} ${height}`,
+    radiusOffset: 0
+  };
+}
+function pinnedScale(opts) {
+  if (opts.faceDiameter === void 0) {
+    return void 0;
+  }
+  const scale = opts.faceDiameter / (2 * OUTER_RING_RADIUS$1);
+  return Number.isFinite(scale) && scale > 0 ? scale : void 0;
+}
+function effectiveContainer(opts, fx, fy) {
+  const w2 = opts.containerPx?.width ?? 0;
+  const h3 = opts.containerPx?.height ?? 0;
+  if (!Number.isFinite(w2) || !Number.isFinite(h3) || w2 <= 0 || h3 <= 0) {
+    return void 0;
+  }
+  return Math.min(w2 / fx, h3 / fy);
+}
+function containerScale(opts, frame) {
+  const w2 = opts.containerPx?.width ?? 0;
+  const h3 = opts.containerPx?.height ?? 0;
+  if (!Number.isFinite(w2) || !Number.isFinite(h3) || w2 <= 0 || h3 <= 0) {
+    return void 0;
+  }
+  const scale = Math.min(w2 / frame.width, h3 / frame.height);
+  return Number.isFinite(scale) && scale > 0 ? scale : void 0;
+}
+function withHostPx(frame, pinned, scale, labelReserve, labelsHidden, clipsAdjusted = false) {
+  const result = {
+    ...frame,
+    scale,
+    labelReserve,
+    labelsHidden,
+    clipsAdjusted
+  };
+  if (pinned) {
+    result.hostWidthPx = frame.width * scale;
+    result.hostHeightPx = frame.height * scale;
+  }
+  return result;
+}
+function solveSide(opts, labelCostPx, clips) {
+  const baseSide = (RADIAL_VIEWBOX_BASE + opts.basePadding) * 2;
+  const { fx, fy } = clipFractions(clips);
+  const labelSideAt = (scale) => 2 * (OUTER_RING_RADIUS$1 + LABEL_RADIAL_PAD_UNITS + labelCostPx / scale);
+  let side = baseSide;
+  let labelsHidden = false;
+  if (labelCostPx > 0) {
+    const pinned = pinnedScale(opts);
+    if (pinned !== void 0) {
+      const grown = Math.max(baseSide, labelSideAt(pinned));
+      labelsHidden = 2 * (labelCostPx / pinned) / grown > LABEL_RESERVE_MAX_FRACTION;
+      side = labelsHidden ? baseSide : grown;
+    } else {
+      const container = effectiveContainer(opts, fx, fy);
+      if (container === void 0) {
+        side = Math.max(baseSide, labelSideAt(1));
+      } else if (2 * labelCostPx / container > LABEL_RESERVE_MAX_FRACTION) {
+        labelsHidden = true;
+      } else {
+        side = Math.max(
+          baseSide,
+          2 * (OUTER_RING_RADIUS$1 + LABEL_RADIAL_PAD_UNITS) / (1 - 2 * labelCostPx / container)
+        );
+      }
+    }
+  }
+  return { side, labelsHidden };
+}
+function adjustClipsForLabelDrop(clips, side, scale, labelDropPx) {
+  const requiredUnits = labelDropPx / scale;
+  const requiredClipPct = Math.max(0, (0.5 - requiredUnits / side) * 100);
+  const bottom = clips.bottom > requiredClipPct ? requiredClipPct : clips.bottom;
+  const top = clips.top > requiredClipPct ? requiredClipPct : clips.top;
+  if (bottom === clips.bottom && top === clips.top) {
+    return clips;
+  }
+  return { ...clips, top, bottom };
+}
+function computeRadialFrame(opts) {
+  const labelWidthPx = opts.labelWidthPx ?? 0;
+  const labelCostPx = labelWidthPx > 0 ? LABEL_ANCHOR_OFFSET_PX + labelWidthPx + LABEL_EDGE_PAD_PX : 0;
+  if (opts.zoomToFitArc && opts.areas && opts.areas.length > 0) {
+    return computeZoomedFrame(opts, labelCostPx);
+  }
+  const baseSide = (RADIAL_VIEWBOX_BASE + opts.basePadding) * 2;
+  let clips = opts.clips;
+  let { side, labelsHidden } = solveSide(opts, labelCostPx, clips);
+  const labelDropPx = opts.labelDropPx ?? 0;
+  if (labelDropPx > 0 && labelCostPx > 0 && !labelsHidden && clips) {
+    for (let i4 = 0; i4 < 2; i4++) {
+      const scale2 = pinnedScale(opts) ?? containerScale(opts, buildViewBox(side, clips)) ?? 1;
+      const adjusted = adjustClipsForLabelDrop(
+        clips,
+        side,
+        scale2,
+        labelDropPx
+      );
+      if (adjusted === clips) {
+        break;
+      }
+      clips = adjusted;
+      const solved = solveSide(opts, labelCostPx, clips);
+      side = solved.side;
+      labelsHidden = solved.labelsHidden;
+    }
+    if (labelsHidden) {
+      clips = opts.clips;
+      const solved = solveSide(opts, labelCostPx, clips);
+      side = solved.side;
+      labelsHidden = solved.labelsHidden;
+    }
+  }
+  const frame = buildViewBox(side, clips);
+  const pinned = pinnedScale(opts);
+  const scale = pinned ?? containerScale(opts, frame) ?? 1;
+  return withHostPx(
+    frame,
+    pinned !== void 0,
+    scale,
+    (side - baseSide) / 2,
+    labelsHidden,
+    clips !== opts.clips
+  );
+}
+function computeZoomedFrame(opts, labelCostPx) {
+  let reserve = 0;
+  let labelsHidden = false;
+  let frame = zoomFrameAt(opts, opts.basePadding);
+  if (labelCostPx > 0) {
+    for (let i4 = 0; i4 < 2; i4++) {
+      const passScale = zoomedScale(opts, frame);
+      const reserveUnits = labelCostPx / passScale;
+      if (2 * reserveUnits / Math.max(frame.width, frame.height) > LABEL_RESERVE_MAX_FRACTION) {
+        labelsHidden = true;
+        reserve = 0;
+        frame = zoomFrameAt(opts, opts.basePadding);
+        break;
+      }
+      reserve = reserveUnits;
+      frame = zoomFrameAt(opts, opts.basePadding + reserve);
+    }
+  }
+  const pinned = pinnedZoomedScale(opts, frame);
+  const scale = pinned ?? containerScale(opts, frame) ?? 1;
+  return withHostPx(
+    frame,
+    pinned !== void 0,
+    scale,
+    labelsHidden ? 0 : reserve,
+    labelsHidden
+  );
+}
+function zoomFrameAt(opts, extension) {
+  return computeZoomToFitArcFrame({
+    areas: opts.areas,
+    outerRadius: OUTER_RING_RADIUS$1,
+    innerRadius: opts.innerRadius ?? OUTER_RING_RADIUS$1,
+    extension,
+    targetSize: (RADIAL_VIEWBOX_BASE + extension) * 2
+  });
+}
+function pinnedZoomedScale(opts, frame) {
+  if (opts.faceDiameter === void 0) {
+    return void 0;
+  }
+  const scale = opts.faceDiameter / (2 * (OUTER_RING_RADIUS$1 + frame.radiusOffset));
+  return Number.isFinite(scale) && scale > 0 ? scale : void 0;
+}
+function zoomedScale(opts, frame) {
+  return pinnedZoomedScale(opts, frame) ?? containerScale(opts, frame) ?? 1;
+}
 var __defProp$vR = Object.defineProperty;
 var __getOwnPropDesc$vU = Object.getOwnPropertyDescriptor;
 var __decorateClass$vV = (decorators, target, key, kind) => {
@@ -53931,6 +54175,8 @@ let ObcWatch = class extends i$4 {
     this._legacyRotationsPerMinute = 0;
     this._resizeController = new h(this, {});
     this._rOff = 0;
+    this._labelsHidden = false;
+    this._hostSizePinned = false;
   }
   set rotationsPerMinute(value) {
     this._legacyRotationsPerMinute = value;
@@ -53952,6 +54198,10 @@ let ObcWatch = class extends i$4 {
     }
     return this._legacyRotationsPerMinute;
   }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
+  }
   willUpdate(changed) {
     super.willUpdate(changed);
     if (this._rotController && (changed.has("rateOfTurnDegreesPerMinute") || changed.has("rotDotAnimationFactor") || changed.has("rotationsPerMinute"))) {
@@ -53976,6 +54226,11 @@ let ObcWatch = class extends i$4 {
   }
   updated(changed) {
     super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this.arcFrame ? void 0 : this._ownFrame,
+      this._hostSizePinned
+    );
     const el = this.rotType ? this.renderRoot.querySelector("#rot-spinner") : null;
     if (!el) {
       this._rotController = disposeRotController(this, this._rotController);
@@ -54273,30 +54528,26 @@ let ObcWatch = class extends i$4 {
     });
   }
   getScale({ width, height }) {
-    let clientWidth = this.clientWidth;
-    let clientHeight = this.clientHeight;
-    if (clientWidth === 0 || clientHeight === 0) {
-      const box = this.parentElement?.getBoundingClientRect();
-      if (box) {
-        clientWidth = box.width;
-        clientHeight = box.height;
-      }
-    }
-    const scale = Math.min(clientWidth / width, clientHeight / height);
+    const container = measureContainerPx(this);
+    const scale = Math.min(container.width / width, container.height / height);
     if (!Number.isFinite(scale) || scale <= 0) {
       return 1;
     }
     return scale;
   }
-  getPadding() {
-    if (this.padding !== void 0) {
-      return this.padding;
+  /**
+   * Pixel width of the widest outside label, feeding the frame's label
+   * reserve (issue #1021). Explicit `padding` is a hard geometry override
+   * and disables the reserve, preserving legacy consumer output.
+   */
+  getLabelWidthPx() {
+    if (this.padding !== void 0 || this.tickmarksInside) {
+      return 0;
     }
-    const hasTickmarksWithText = this.tickmarks.length > 0 && this.tickmarks.some((t2) => t2.text !== void 0);
-    if (hasTickmarksWithText && !this.tickmarksInside) {
-      return 24 * 2.5;
+    if (this.showLabels) {
+      return NSWE_LABEL_WIDTH_PX;
     }
-    return 24;
+    return estimateLabelWidthPx(this.tickmarks.map((t2) => t2.text));
   }
   render() {
     let width;
@@ -54304,31 +54555,33 @@ let ObcWatch = class extends i$4 {
     let viewBox;
     if (this.arcFrame) {
       this._rOff = this.arcFrame.radiusOffset;
+      this._labelsHidden = false;
+      this._ownFrame = void 0;
       width = this.arcFrame.width;
       height = this.arcFrame.height;
       viewBox = this.arcFrame.viewBox;
-    } else if (this.zoomToFitArc && this.areas.length > 0) {
-      const ext = this.getPadding();
-      const targetSize = (176 + ext) * 2;
-      const frame = computeZoomToFitArcFrame({
+    } else {
+      const frame = computeRadialFrame({
+        basePadding: this.padding ?? 24,
+        labelWidthPx: this.getLabelWidthPx(),
+        clips: {
+          top: this.clipTop,
+          bottom: this.clipBottom,
+          left: this.clipLeft,
+          right: this.clipRight
+        },
+        containerPx: measureContainerPx(this),
+        faceDiameter: this.faceDiameter,
+        zoomToFitArc: this.zoomToFitArc,
         areas: this.areas,
-        outerRadius: OUTER_RING_RADIUS,
-        innerRadius: this.innerRingRadius,
-        extension: ext,
-        targetSize
+        innerRadius: this.innerRingRadius
       });
       this._rOff = frame.radiusOffset;
+      this._labelsHidden = frame.labelsHidden;
+      this._ownFrame = frame;
       width = frame.width;
       height = frame.height;
       viewBox = frame.viewBox;
-    } else {
-      this._rOff = 0;
-      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 });
@@ -54342,7 +54595,7 @@ let ObcWatch = class extends i$4 {
         size: t2.type,
         style: this.tickmarkStyle,
         scale,
-        text: this.showLabels ? void 0 : t2.text,
+        text: this.showLabels || this._labelsHidden ? void 0 : t2.text,
         inside: this.tickmarksInside,
         textRadius,
         rotation: this.rotation,
@@ -54353,9 +54606,11 @@ let ObcWatch = class extends i$4 {
       })
     );
     const advices = this.advices ? this.advices.map((a2) => renderAdvice$3(a2, rOff)) : A;
-    const insideLabels = this.tickmarksInside && this.showLabels;
+    const showNsweLabels = this.showLabels && !this._labelsHidden;
+    const showNorthArrow = this.northArrow && !this._labelsHidden;
+    const insideLabels = this.tickmarksInside && showNsweLabels;
     const includeNorth = !this.northArrow;
-    const labelPositions = this.showLabels ? getLabelPositions({
+    const labelPositions = showNsweLabels ? getLabelPositions({
       scale,
       inside: this.tickmarksInside,
       innerRadius: this.innerRingRadius + rOff,
@@ -54368,7 +54623,7 @@ let ObcWatch = class extends i$4 {
       innerRadius: this.innerRingRadius + rOff,
       includeNorth
     }) : A;
-    const northArrowEl = this.northArrow ? renderNorthArrow({
+    const northArrowEl = showNorthArrow ? renderNorthArrow({
       scale,
       rotation: this.rotation,
       inside: this.northArrowInside ?? this.tickmarksInside
@@ -54651,6 +54906,9 @@ __decorateClass$vV([
 __decorateClass$vV([
   n$3({ type: Number })
 ], ObcWatch.prototype, "padding", 2);
+__decorateClass$vV([
+  n$3({ type: Number, attribute: "face-diameter" })
+], ObcWatch.prototype, "faceDiameter", 2);
 __decorateClass$vV([
   n$3({ type: Array, attribute: false })
 ], ObcWatch.prototype, "areas", 2);
@@ -54781,7 +55039,6 @@ var __decorateClass$vU = (decorators, target, key, kind) => {
   if (kind && result) __defProp$vQ(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;
@@ -54850,6 +55107,36 @@ let ObcInstrumentRadial = class extends SetpointMixin(i$4) {
     this.endLabelsMaxMin = false;
     this.zoomToFitArc = false;
     this._radiusOffset = 0;
+    this._lastFrameKey = "";
+    this._resizeController = new h(this, {});
+    this._hostSizePinned = false;
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
+  }
+  /** The frame computed for the current render (viewBox, label reserve …). */
+  get frame() {
+    return this._frame;
+  }
+  updated(changed) {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
+    const frame = this._frame;
+    if (!frame) {
+      return;
+    }
+    const key = `${frame.viewBox}|${frame.labelsHidden}|${frame.hostWidthPx ?? ""}|${frame.hostHeightPx ?? ""}`;
+    if (key !== this._lastFrameKey) {
+      this._lastFrameKey = key;
+      this.dispatchEvent(
+        new CustomEvent("frame-changed", { detail: frame })
+      );
+    }
   }
   get clampedValue() {
     const lowerBound = Math.min(this.minValue, this.maxValue);
@@ -54916,31 +55203,28 @@ 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;
-      const targetSize = (176 + ext) * 2;
-      const frame = computeZoomToFitArcFrame({
-        areas,
-        outerRadius: OUTER_RING_RADIUS,
-        innerRadius: innerRingRadiusFor(watchCircleType),
-        extension: ext,
-        targetSize
-      });
-      this._radiusOffset = frame.radiusOffset;
-      viewBox = frame.viewBox;
-      this._arcFrame = frame;
-    } else {
-      this._radiusOffset = 0;
-      this._arcFrame = void 0;
-      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}`;
-    }
+    const tickmarks = this.tickmarks;
+    const hasHorizontalEndLabels = tickmarks.some((t2) => {
+      if (t2.text === void 0) {
+        return false;
+      }
+      const angle = (t2.angle % 360 + 360) % 360;
+      return Math.abs(angle - 90) < 1 || Math.abs(angle - 270) < 1;
+    });
+    const frame = computeRadialFrame({
+      basePadding: 48,
+      labelWidthPx: this.tickmarksInside ? 0 : estimateLabelWidthPx(tickmarks.map((t2) => t2.text)),
+      labelDropPx: this.tickmarksInside || !hasHorizontalEndLabels ? 0 : this.endLabelsMaxMin ? END_MAXMIN_LABEL_DROP_PX : SIDE_LABEL_DROP_PX,
+      clips: this.zoomToFitArc ? void 0 : this.safeClips,
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter,
+      zoomToFitArc: this.zoomToFitArc,
+      areas,
+      innerRadius: innerRingRadiusFor(watchCircleType)
+    });
+    this._radiusOffset = frame.radiusOffset;
+    this._frame = frame;
+    const shownTickmarks = frame.labelsHidden ? tickmarks.map((t2) => ({ ...t2, text: void 0 })) : tickmarks;
     return b`
       <div class="container">
         <obc-watch
@@ -54952,23 +55236,17 @@ let ObcInstrumentRadial = class extends SetpointMixin(i$4) {
           .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}
           .setpointOverride=${this.setpointOverride}
           .animateSetpoint=${this.animateSetpoint}
-          .padding=${48}
-          .tickmarks=${this.tickmarks}
+          .tickmarks=${shownTickmarks}
           .tickmarksInside=${this.tickmarksInside}
           .tickmarkStyle=${this.tickmarkStyle}
           .advices=${this._advices}
           .areas=${areas}
           .watchCircleType=${watchCircleType}
           .barAreas=${barAreas}
-          .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}
+          .arcFrame=${frame}
         ></obc-watch>
-        <svg class="gauge-radial" viewBox=${viewBox}>${this._needle}</svg>
+        <svg class="gauge-radial" viewBox=${frame.viewBox}>${this._needle}</svg>
       </div>
     `;
   }
@@ -55192,6 +55470,9 @@ __decorateClass$vU([
 __decorateClass$vU([
   n$3({ type: Boolean })
 ], ObcInstrumentRadial.prototype, "zoomToFitArc", 2);
+__decorateClass$vU([
+  n$3({ type: Number, attribute: "face-diameter" })
+], ObcInstrumentRadial.prototype, "faceDiameter", 2);
 ObcInstrumentRadial = __decorateClass$vU([
   customElement("obc-instrument-radial")
 ], ObcInstrumentRadial);
@@ -93657,7 +93938,7 @@ const componentStyle$C = i$7`* {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 407px;
+  max-height: 90vh;
 }
 
 .title-container {
@@ -93716,7 +93997,9 @@ const componentStyle$C = i$7`* {
 }
 
 .content-area {
-  flex: 1 0 0;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 .action-container {
@@ -208683,6 +208966,8 @@ let ObcAzimuthThruster = class extends i$4 {
     this.bottomPropeller = PropellerType.none;
     this.tickmarkStyle = TickmarkStyle$1.regular;
     this.starboardPortIndicator = false;
+    this._hostSizePinned = false;
+    this._resizeController = new h(this, {});
   }
   willUpdate(changed) {
     super.willUpdate(changed);
@@ -208709,6 +208994,18 @@ let ObcAzimuthThruster = class extends i$4 {
       animateSetpoint: this.animateSetpoint
     });
   }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
+  }
+  updated(changed) {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
+  }
   get angleAdviceRaw() {
     return this.angleAdvices.map((advice) => {
       const triggered = this.angleSetpoint !== void 0 && mapAngle0to360$1(this.angleSetpoint - advice.minAngle) < 180 && mapAngle0to360$1(this.angleSetpoint - advice.maxAngle) > 180;
@@ -208780,19 +209077,21 @@ let ObcAzimuthThruster = class extends i$4 {
   render() {
     const rotateAngle = this.angle;
     const tickmarks = this.getTickmarks();
-    let viewBox;
-    if (!this.hasLabelSpacer) {
-      viewBox = "-192 -192 384 384";
-    } else if (this.showLabels && !this.tickmarksInside) {
-      viewBox = "-236 -236 472 472";
-    } else {
-      viewBox = "-200 -200 400 400";
-    }
+    const frame = computeRadialFrame({
+      basePadding: this.hasLabelSpacer ? 24 : 16,
+      labelWidthPx: this.hasLabelSpacer && !this.tickmarksInside ? estimateLabelWidthPx(tickmarks.map((t2) => t2.text)) : 0,
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter
+    });
+    this._frame = frame;
+    const shownTickmarks = frame.labelsHidden ? tickmarks.map((t2) => ({ ...t2, text: void 0 })) : tickmarks;
+    const viewBox = frame.viewBox;
     return b`
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .tickmarks=${tickmarks}
+          .arcFrame=${frame}
+          .tickmarks=${shownTickmarks}
           .state=${this.state}
           .priority=${this.priority}
           .angleSetpoint=${this.angleSetpoint}
@@ -208803,7 +209102,6 @@ let ObcAzimuthThruster = class extends i$4 {
           .animateSetpoint=${this.animateSetpoint}
           .tickmarksInside=${this.tickmarksInside}
           .tickmarkStyle=${this.tickmarkStyle}
-          padding=${o$4(!this.hasLabelSpacer ? 16 : void 0)}
           .advices=${this.angleAdviceRaw}
           .starboardPortIndicator=${this.starboardPortIndicator}
         ></obc-watch>
@@ -208949,6 +209247,9 @@ __decorateClass$K([
 __decorateClass$K([
   n$3({ type: Boolean })
 ], ObcAzimuthThruster.prototype, "starboardPortIndicator", 2);
+__decorateClass$K([
+  n$3({ type: Number, attribute: "face-diameter" })
+], ObcAzimuthThruster.prototype, "faceDiameter", 2);
 ObcAzimuthThruster = __decorateClass$K([
   customElement("obc-azimuth-thruster")
 ], ObcAzimuthThruster);
@@ -210977,6 +211278,7 @@ let ObcCompass = class extends i$4 {
       onAnimationEnd: () => this.requestUpdate()
     });
     this._resizeController = new h(this, {});
+    this._hostSizePinned = false;
   }
   willUpdate(changed) {
     super.willUpdate(changed);
@@ -211005,17 +211307,27 @@ let ObcCompass = class extends i$4 {
   get _effectiveRotDegPerMin() {
     return this.rateOfTurnDegreesPerMinute ?? this.rotationsPerMinute;
   }
-  getPadding() {
-    const size = Math.min(this.clientHeight, this.clientWidth);
-    const deltaWidth = 512 - size;
-    const steps = deltaWidth / 128;
-    let deltaPadding;
-    if (deltaWidth > 0) {
-      deltaPadding = steps * 48;
-    } else {
-      deltaPadding = steps * 6;
+  /**
+   * Pixel cost of the outside decor: the always-rendered north-arrow glyph
+   * plus, only while shown, the NSWE labels (both keep a constant on-screen
+   * size via `1/scale` terms). Feeds the frame's width-aware reserve,
+   * replacing the former empirical `72 + delta(clientSize)` padding.
+   * Wind/current symbols at their default radius are covered by the base
+   * padding of 72.
+   */
+  getOutsideDecorPx() {
+    if (this.tickmarksInside) {
+      return 0;
     }
-    return 72 + deltaPadding;
+    return NORTH_ARROW_WIDTH_PX + (this.showLabels ? NSWE_LABEL_WIDTH_PX : 0);
+  }
+  updated(changed) {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
   }
   get angleAdviceRaw() {
     return this.headingAdvices.map(({ minAngle, maxAngle, hinted, type }) => {
@@ -211047,22 +211359,27 @@ let ObcCompass = class extends i$4 {
       { angle: 180, type: TickmarkType$1.main },
       { angle: 270, type: TickmarkType$1.main }
     ];
-    const padding = this.getPadding();
-    const width = (176 + padding) * 2;
-    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+    const frame = computeRadialFrame({
+      basePadding: 72,
+      labelWidthPx: this.getOutsideDecorPx(),
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter
+    });
+    this._frame = frame;
+    const viewBox = frame.viewBox;
     return b`
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .padding=${padding}
+          .arcFrame=${frame}
           .advices=${this.angleAdviceRaw}
           .tickmarks=${tickmarks}
           .state=${this.state}
           .watchCircleType=${WatchCircleType.triple}
-          .showLabels=${this.showLabels}
+          .showLabels=${this.showLabels && !frame.labelsHidden}
           .tickmarksInside=${this.tickmarksInside}
           .crosshairEnabled=${true}
-          .northArrow=${true}
+          .northArrow=${!frame.labelsHidden}
           .angleSetpoint=${this.headingSetpoint ?? void 0}
           .newAngleSetpoint=${this.newHeadingSetpoint}
           .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}
@@ -211248,6 +211565,9 @@ __decorateClass$D([
 __decorateClass$D([
   n$3({ type: Boolean })
 ], ObcCompass.prototype, "tickmarksInside", 2);
+__decorateClass$D([
+  n$3({ type: Number, attribute: "face-diameter" })
+], ObcCompass.prototype, "faceDiameter", 2);
 ObcCompass = __decorateClass$D([
   customElement("obc-compass")
 ], ObcCompass);
@@ -212895,6 +213215,14 @@ const componentStyle$9 = i$7`* {
   height: 100%;
 }
 
+/* With a pinned face the host shrink-wraps the fixed-size dial, so rows of
+   pinned instruments can sit side by side in flex layouts. */
+
+:host([face-diameter]) {
+  width: fit-content;
+  height: fit-content;
+}
+
 .gauge-radial-root {
   /* Readout vertical placement per layout (% of the cropped box), tuned to the
      watch geometry — re-check if the ring radii or the 448 box change. Which
@@ -212915,7 +213243,10 @@ const componentStyle$9 = i$7`* {
   height: auto;
   max-width: 100%;
   max-height: 100%;
-  aspect-ratio: 1;
+  /* --gauge-radial-aspect is set from TS only when the frame lowered a crop
+     for the label drop (frame.clipsAdjusted); otherwise the static sector
+     aspect below applies. */
+  aspect-ratio: var(--gauge-radial-aspect, 1);
 
   /* Defaults (centered both ways); overridden by the halign-* / valign-*
      classes. Horizontal alignment uses auto margins (which reference the host
@@ -212931,7 +213262,7 @@ const componentStyle$9 = i$7`* {
 }
 
 .gauge-radial-root.sector-180 {
-    aspect-ratio: 448 / 251;
+    aspect-ratio: var(--gauge-radial-aspect, 448 / 251);
   }
 
 .gauge-radial-root.halign-left {
@@ -212964,6 +213295,27 @@ const componentStyle$9 = i$7`* {
     transform: translateY(-100%);
   }
 
+/* faceDiameter pins the dial to a fixed intrinsic size: the inner
+     instrument sets its own px box and the root shrink-wraps it. The host
+     shrink-wraps too, so there is no slack to align within — neutralize the
+     alignment offsets (declared after the valign rules to win the cascade;
+     \`top: 50%\` would resolve to 0 in the auto-height host anyway while the
+     translateY still applied, shifting the dial up by half its height). */
+
+.gauge-radial-root.face-pinned {
+    width: fit-content;
+    height: fit-content;
+    max-width: none;
+    max-height: none;
+    aspect-ratio: auto;
+    top: 0;
+    transform: none;
+  }
+
+.gauge-radial-root.face-pinned.sector-180 {
+      aspect-ratio: auto;
+    }
+
 .gauge-radial-root .gauge-readout-value {
     position: absolute;
     left: 50%;
@@ -213026,6 +213378,9 @@ var __decorateClass$x = (decorators, target, key, kind) => {
   if (kind && result) __defProp$x(target, key, result);
   return result;
 };
+const READOUT_META_Y = 98.56;
+const READOUT_META_Y_NEEDLE = 58.24;
+const READOUT_META_Y_180 = -73.472;
 let ObcGaugeRadial = class extends SetpointMixin(i$4) {
   constructor() {
     super(...arguments);
@@ -213049,6 +213404,28 @@ let ObcGaugeRadial = class extends SetpointMixin(i$4) {
     this.label = "";
     this.unit = "";
     this.fractionDigits = 0;
+    this._onFrameChanged = (e2) => {
+      const frame = e2.detail;
+      const root = this._rootEl;
+      if (!root || !(frame.height > 0)) {
+        return;
+      }
+      const pct = (anchorY) => `${((anchorY - frame.y) / frame.height * 100).toFixed(4)}%`;
+      root.style.setProperty("--readout-meta-top", pct(READOUT_META_Y));
+      root.style.setProperty(
+        "--readout-meta-top-needle",
+        pct(READOUT_META_Y_NEEDLE)
+      );
+      root.style.setProperty("--readout-meta-top-180", pct(READOUT_META_Y_180));
+      if (frame.clipsAdjusted) {
+        root.style.setProperty(
+          "--gauge-radial-aspect",
+          `${frame.width} / ${frame.height}`
+        );
+      } else {
+        root.style.removeProperty("--gauge-radial-aspect");
+      }
+    };
     this.getAngle = (v2) => {
       const { sweep, start } = this.sectorAngles;
       const span = this.maxValue - this.minValue;
@@ -213154,6 +213531,7 @@ let ObcGaugeRadial = class extends SetpointMixin(i$4) {
       <div
         class=${e$1({
       "gauge-radial-root": true,
+      "face-pinned": this.faceDiameter !== void 0,
       "type-needle": this.type === "needle",
       "sector-180": this.sector === "180",
       "sector-90-left": this.sector === "90-left",
@@ -213191,6 +213569,8 @@ let ObcGaugeRadial = class extends SetpointMixin(i$4) {
           .clipLeft=${clips.left}
           .clipRight=${clips.right}
           .endLabelsMaxMin=${this.sector === "180"}
+          .faceDiameter=${this.faceDiameter}
+          @frame-changed=${this._onFrameChanged}
         >
         </obc-instrument-radial>
         ${this.renderReadouts()}
@@ -213259,6 +213639,12 @@ __decorateClass$x([
 __decorateClass$x([
   n$3({ type: Number })
 ], ObcGaugeRadial.prototype, "fractionDigits", 2);
+__decorateClass$x([
+  n$3({ type: Number, attribute: "face-diameter", reflect: true })
+], ObcGaugeRadial.prototype, "faceDiameter", 2);
+__decorateClass$x([
+  e$3(".gauge-radial-root")
+], ObcGaugeRadial.prototype, "_rootEl", 2);
 ObcGaugeRadial = __decorateClass$x([
   customElement("obc-gauge-radial")
 ], ObcGaugeRadial);
@@ -218664,6 +219050,7 @@ let ObcHeading = class extends i$4 {
       onAnimationEnd: () => this.requestUpdate()
     });
     this._resizeController = new h(this, {});
+    this._hostSizePinned = false;
   }
   willUpdate(changed) {
     super.willUpdate(changed);
@@ -218683,17 +219070,25 @@ let ObcHeading = class extends i$4 {
     super.disconnectedCallback();
     this._headingSp.dispose();
   }
-  getPadding() {
-    const size = Math.min(this.clientHeight, this.clientWidth);
-    const deltaWidth = 512 - size;
-    const steps = deltaWidth / 128;
-    let deltaPadding;
-    if (deltaWidth > 0) {
-      deltaPadding = steps * 48;
-    } else {
-      deltaPadding = steps * 6;
+  /**
+   * Pixel cost of the outside decor: the always-rendered north-arrow glyph
+   * plus, only while shown, the NSWE labels (both keep a constant on-screen
+   * size via `1/scale` terms). Feeds the frame's width-aware reserve,
+   * replacing the former empirical `72 + delta(clientSize)` padding.
+   */
+  getOutsideDecorPx() {
+    if (this.tickmarksInside) {
+      return 0;
     }
-    return 72 + deltaPadding;
+    return NORTH_ARROW_WIDTH_PX + (this.showLabels ? NSWE_LABEL_WIDTH_PX : 0);
+  }
+  updated(changed) {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
   }
   get angleAdviceRaw() {
     return this.headingAdvices.map(({ minAngle, maxAngle, hinted, type }) => {
@@ -218722,21 +219117,26 @@ let ObcHeading = class extends i$4 {
       { angle: 180, type: TickmarkType$1.main },
       { angle: 270, type: TickmarkType$1.main }
     ];
-    const padding = this.getPadding();
-    const width = (176 + padding) * 2;
-    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+    const frame = computeRadialFrame({
+      basePadding: 72,
+      labelWidthPx: this.getOutsideDecorPx(),
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter
+    });
+    this._frame = frame;
+    const viewBox = frame.viewBox;
     return b`
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .padding=${padding}
+          .arcFrame=${frame}
           .advices=${this.angleAdviceRaw}
           .tickmarks=${tickmarks}
           .watchCircleType=${WatchCircleType.single}
-          .showLabels=${this.showLabels}
+          .showLabels=${this.showLabels && !frame.labelsHidden}
           .tickmarksInside=${this.tickmarksInside}
           .crosshairEnabled=${true}
-          .northArrow=${true}
+          .northArrow=${!frame.labelsHidden}
           .angleSetpoint=${this.headingSetpoint ?? void 0}
           .newAngleSetpoint=${this.newHeadingSetpoint}
           .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}
@@ -218845,6 +219245,9 @@ __decorateClass$s([
 __decorateClass$s([
   n$3({ type: Boolean })
 ], ObcHeading.prototype, "tickmarksInside", 2);
+__decorateClass$s([
+  n$3({ type: Number, attribute: "face-diameter" })
+], ObcHeading.prototype, "faceDiameter", 2);
 ObcHeading = __decorateClass$s([
   customElement("obc-heading")
 ], ObcHeading);
@@ -223761,6 +224164,20 @@ let ObcRudder = class extends SetpointMixin(i$4) {
     this.advices = [];
     this.zoomToFitArc = false;
     this._radiusOffset = 0;
+    this._hostSizePinned = false;
+    this._resizeController = new h(this, {});
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
+  }
+  updated(changed) {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
   }
   get _needleTransform() {
     const rOff = this._radiusOffset;
@@ -223875,32 +224292,25 @@ let ObcRudder = class extends SetpointMixin(i$4) {
         state
       };
     });
-    let overlayViewBox;
-    if (this.zoomToFitArc) {
-      const ext = 48;
-      const targetSize = (176 + ext) * 2;
-      const frame = computeZoomToFitArcFrame({
-        areas,
-        outerRadius: OUTER_RING_RADIUS,
-        innerRadius: innerRingRadiusFor(WatchCircleType.double),
-        extension: ext,
-        targetSize
-      });
-      overlayViewBox = frame.viewBox;
-      this._radiusOffset = frame.radiusOffset;
-      this._arcFrame = frame;
-    } else {
-      overlayViewBox = "-224 -44.8 448 268.8";
-      this._radiusOffset = 0;
-      this._arcFrame = void 0;
-    }
+    const frame = computeRadialFrame({
+      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,
+      areas,
+      innerRadius: innerRingRadiusFor(WatchCircleType.double)
+    });
+    this._radiusOffset = frame.radiusOffset;
+    this._frame = frame;
+    const shownTickmarks = frame.labelsHidden ? tickmarks.map((t2) => ({ ...t2, text: void 0 })) : tickmarks;
+    const overlayViewBox = frame.viewBox;
     return b`
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .clipTop=${this.zoomToFitArc ? 0 : 40}
-          .zoomToFitArc=${this.zoomToFitArc}
-          .arcFrame=${this._arcFrame}
+          .arcFrame=${frame}
           .areas=${areas}
           .angleSetpoint=${setpointAngle}
           .newAngleSetpoint=${this.newSetpoint !== void 0 ? 180 - this.newSetpoint : void 0}
@@ -223908,8 +224318,7 @@ let ObcRudder = class extends SetpointMixin(i$4) {
           .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}
           .setpointOverride=${this.setpointOverride}
           .animateSetpoint=${this.animateSetpoint}
-          .padding=${48}
-          .tickmarks=${tickmarks}
+          .tickmarks=${shownTickmarks}
           .tickmarksInside=${this.tickmarksInside}
           .tickmarkStyle=${this.tickmarkStyle}
           .watchCircleType=${WatchCircleType.double}
@@ -223972,6 +224381,9 @@ __decorateClass$9([
 __decorateClass$9([
   n$3({ type: Boolean })
 ], ObcRudder.prototype, "zoomToFitArc", 2);
+__decorateClass$9([
+  n$3({ type: Number, attribute: "face-diameter" })
+], ObcRudder.prototype, "faceDiameter", 2);
 ObcRudder = __decorateClass$9([
   customElement("obc-rudder")
 ], ObcRudder);
@@ -224175,8 +224587,22 @@ let ObcSpeedGauge = class extends SetpointMixin(i$4) {
     this.label = "STW";
     this.unit = "KN";
     this.fractionDigits = 1;
+    this._hostSizePinned = false;
+    this._resizeController = new h(this, {});
     this.maxAngle = 180 - 45;
   }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
+  }
+  updated(changed) {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
+  }
   getAngle(v2) {
     return v2 / this.maxSpeed * (180 + 45) - 90;
   }
@@ -224187,6 +224613,15 @@ let ObcSpeedGauge = class extends SetpointMixin(i$4) {
     const barColor = this.priority === Priority.enhanced ? "var(--instrument-enhanced-tertiary-color)" : "var(--instrument-regular-tertiary-color)";
     const setpointAngle = this.setpoint !== void 0 ? this.getAngle(this.setpoint) : void 0;
     const maxDigits = 1;
+    const tickmarks = this.tickmarks;
+    const frame = computeRadialFrame({
+      basePadding: 48,
+      labelWidthPx: this.tickmarksInside ? 0 : estimateLabelWidthPx(tickmarks.map((t2) => t2.text)),
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter
+    });
+    this._frame = frame;
+    const shownTickmarks = frame.labelsHidden ? tickmarks.map((t2) => ({ ...t2, text: void 0 })) : tickmarks;
     return b`
       <div class="container">
         <obc-watch
@@ -224197,8 +224632,8 @@ let ObcSpeedGauge = class extends SetpointMixin(i$4) {
           .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}
           .setpointOverride=${this.setpointOverride}
           .animateSetpoint=${this.animateSetpoint}
-          .padding=${48}
-          .tickmarks=${this.tickmarks}
+          .arcFrame=${frame}
+          .tickmarks=${shownTickmarks}
           .tickmarksInside=${this.tickmarksInside}
           .tickmarkStyle=${this.tickmarkStyle}
           .advices=${this._advices}
@@ -224219,7 +224654,7 @@ let ObcSpeedGauge = class extends SetpointMixin(i$4) {
       }
     ]}
         ></obc-watch>
-        <svg class="rudder" viewBox="-224 -224 448 448">${this.needle}</svg>
+        <svg class="rudder" viewBox=${frame.viewBox}>${this.needle}</svg>
         ${this.hasReadout ? b`
               ${renderInstrumentReadout({
       className: "speed-gauge-value",
@@ -224388,6 +224823,9 @@ __decorateClass$7([
 __decorateClass$7([
   n$3({ type: Number })
 ], ObcSpeedGauge.prototype, "fractionDigits", 2);
+__decorateClass$7([
+  n$3({ type: Number, attribute: "face-diameter" })
+], ObcSpeedGauge.prototype, "faceDiameter", 2);
 ObcSpeedGauge = __decorateClass$7([
   customElement("obc-speed-gauge")
 ], ObcSpeedGauge);