@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.101 → 2.0.0-next.103

package/src/bars-graphs/polar-chart/polar-chart.ts

@@ -158,27 +158,15 @@ export type PolarChartDataItem = {
  * </script>
  * ```
  *
- * @property {Array<{label: string, value: number}>} data - Chart data segments (set via JavaScript)
- * @property {string[]} colors - Custom segment colors (set via JavaScript) with fallback to theme palette
- * @property {boolean} monochrome - Use single color for all sectors (uses first color from array, default: false)
- * @property {boolean} discreteColorStops - Draw sectors as radial color bands from center outward using the colors array as threshold steps (default: false)
- * @property {boolean} trimToDiscreteStops - When true, visually trim sectors to the nearest discrete color band boundary. When false, show exact values with partial band fills (default: true)
- * @property {boolean} showSectorLabels - When true, display sector labels from data (e.g. "Sector A"). When false, display angle values (0°, 30°, etc.). Default: false
- * @property {boolean} showUnit - Whether to show unit in angle or outer labels, default: false
- * @property {boolean} showOuterLabels - Show outer labels, default: false
- * @property {string} outerLabelUnit - Unit string to append to outer labels, default: ""
- * @property {number} outerLabelMaxLength - Maximum character length for labels before trim (0 = no limit), default: 0
- * @property {number} outerLabelDecimalPlaces - Number of decimal places in labels, default: 0
- * @property {boolean} showDebugOverlay - Show debug overlay for development, default: false
- * @property {number} fixedHeight - Fixed height of the chart in pixels (mandatory, determines chart circumference), default: 320. The chart's circumference is always based on this fixed height to match other radial instruments.
- * @property {boolean} legend - Whether to display the legend below the chart, default: false
  * @beta
  */
 @customElement('obc-polar-chart')
 export class ObcPolarChart extends LitElement {
+  /** Chart data segments (set via JavaScript) */
   @property({type: Array, attribute: false})
   data: PolarChartDataItem[] = [];
 
+  /** Custom segment colors (set via JavaScript) with fallback to theme palette */
   @property({type: Array, attribute: false}) colors: string[] = [];
 
   /** @internal */
@@ -187,30 +175,45 @@ export class ObcPolarChart extends LitElement {
   @property({type: String})
   priority: Priority = Priority.regular;
 
-  /** @availableWhen discreteColorStops==false */
+  /**
+   * Use single color for all sectors (uses first color from array, default: false)
+   * @availableWhen discreteColorStops==false
+   */
   @property({type: Boolean}) monochrome = false;
+  /** Draw sectors as radial color bands from center outward using the colors array as threshold steps (default: false) */
   @property({type: Boolean})
   discreteColorStops = false;
+  /** When true, display sector labels from data (e.g. "Sector A"). When false, display angle values (0°, 30°, etc.). Default: false */
   @property({type: Boolean})
   showSectorLabels = false; // Default: false (angles shown by default)
+  /** Whether to show unit in angle or outer labels, default: false */
   @property({type: Boolean})
   showUnit = false;
+  /** Show outer labels, default: false */
   @property({type: Boolean})
   showOuterLabels = false;
+  /** Unit string to append to outer labels, default: "°" */
   @property({type: String})
   outerLabelUnit = '°';
-  /** @availableWhen showOuterLabels==true */
+  /**
+   * Maximum character length for labels before trim (0 = no limit), default: 0
+   * @availableWhen showOuterLabels==true
+   */
   @property({type: Number})
   outerLabelMaxLength = 0;
+  /** Number of decimal places in labels, default: 0 */
   @property({type: Number})
   outerLabelDecimalPlaces = 0;
 
+  /** Fixed height of the chart in pixels (determines chart circumference), default: 320. The chart's circumference is always based on this fixed height to match other radial instruments. */
   @property({type: Number, reflect: true})
   fixedHeight = 320;
 
+  /** Whether to display the legend below the chart, default: false */
   @property({type: Boolean, reflect: true})
   legend = false;
 
+  /** Show debug overlay for development, default: false */
   @property({type: Boolean, reflect: true})
   showDebugOverlay = false;
 

package/src/bars-graphs/radial-bar-chart/radial-bar-chart.ts

@@ -125,32 +125,32 @@ const RADIAL_BAR_WATCHED_PROP_NAMES = [
  * </script>
  * ```
  *
- * @property {number[]} data - Array of values for each ring (set via JavaScript)
- * @property {string[]} colors - Custom ring colors (set via JavaScript) with fallback to theme palette
- * @property {number} max - Maximum value for calculating remaining empty area, default: 100
- * @property {number} circumference - Arc span in degrees: 360 for full circle, 270 for 3/4 circle, default: 270
- * @property {boolean} showDebugOverlay - Show debug overlay for development, default: false
- * @property {number} fixedHeight - Fixed height of the chart in pixels (mandatory, determines chart circumference), default: 320. The chart's circumference is always based on this fixed height to match other radial instruments.
- * @property {number} minRingThickness - Minimum thickness of each ring in pixels, excluding borders, default: 16
- * @property {boolean} legend - Whether to display the legend below the chart, default: false
  * @beta
  */
 @customElement('obc-radial-bar-chart')
 export class ObcRadialBarChart extends LitElement {
+  /** Array of values for each ring (set via JavaScript) */
   @property({type: Array, attribute: false}) data: number[] = [];
+  /** Custom ring colors (set via JavaScript) with fallback to theme palette */
   @property({type: Array, attribute: false}) colors: string[] = [];
   @property({type: String})
   priority: Priority = Priority.regular;
+  /** Maximum value for calculating remaining empty area, default: 100 */
   @property({type: Number})
   max = 100;
+  /** Arc span in degrees: 360 for full circle, 270 for 3/4 circle, default: 270 */
   @property({type: Number})
   circumference = 270;
+  /** Whether to display the legend below the chart, default: false */
   @property({type: Boolean, reflect: true})
   legend = false;
+  /** Show debug overlay for development, default: false */
   @property({type: Boolean, reflect: true})
   showDebugOverlay = false;
+  /** Fixed height of the chart in pixels (determines chart circumference), default: 320. The chart's circumference is always based on this fixed height to match other radial instruments. */
   @property({type: Number, reflect: true})
   fixedHeight = 320;
+  /** Minimum thickness of each ring in pixels, excluding borders, default: 16 */
   @property({
     type: Number,
   })

package/src/building-blocks/chart-line/chart-line-base.ts

@@ -311,32 +311,15 @@ const LINE_GRAPH_RECREATE_PROP_NAMES = [
  * </script>
  * ```
  *
- * @property {Array<{label?: string, x?: number|string|Date|TemporalLike, value: number}>} data - Single-series data array. In `category` mode each item needs `label`; in `time`/`number` mode each item needs `x` (epoch ms, ISO string, Date, or Temporal object — `label` is parsed as a fallback). Used when `datasets` is not provided. Points are drawn in array order (no sorting); Temporal Plain* values are interpreted in the system time zone.
- * @property {ChartDataset<'line', (number | {x: number|string|Date|TemporalLike; y: number})[]>[]} datasets - Multi-series Chart.js datasets. Takes precedence over `data`. Each dataset can have `label`, `data` (numeric array or `{x, y}` points), and visual properties like `borderColor`, `backgroundColor`, `fill`, etc. In `time`/`number` mode point x-values are normalized like single-series `x`.
- * @property {(string|number)[]} labels - Explicit labels for category x-axis. If omitted, labels are derived from `data` property or dataset x-values.
- * @property {string[]} colors - Custom color palette (CSS variable names or color strings). Falls back to theme default colors if not provided.
- * @property {'category'|'time'|'number'} xAxisType - X-axis mode. `'category'` for labeled, evenly spaced data points; `'time'` for time-based data positioned proportionally (numbers are always epoch ms — `xStepSize`/`xTicksLimit` operate in ms); `'number'` for plain numeric x-values. Default: `'category'`.
- * @property {'minutes'|'date'} timeDisplay - Time axis label format when `xAxisType='time'`. `'date'` shows a locale date, `'minutes'` shows minutes relative to the latest data point. Default: `'date'`.
- * @property {'left'|'right'} yAxisPosition - Single y-axis position. Use this for simple charts with one y-axis. For multiple y-axes, use `yAxes` property instead. Default: `'left'`.
- * @property {Array<{id?: string; position?: 'left'|'right'; min?: number; max?: number; grid?: boolean}>} yAxes - Multiple y-axis definitions for complex charts. Each axis can specify `id` (referenced by dataset `yAxisID`), `position`, `min`/`max` range, and `grid` visibility.
- * @property {boolean} showGrid - Show vertical grid lines (x-axis). When combined with `showGridX` and `showGridY`, controls full grid visibility. Default: `false`.
- * @property {boolean} showGridX - Show vertical grid lines (x-axis). Set to `false` to hide only vertical lines while keeping horizontal lines. Default: `false`.
- * @property {boolean} showGridY - Show horizontal grid lines (y-axis). Set to `false` to hide only horizontal lines while keeping vertical lines. Default: `false`.
- * @property {boolean} showTickMarks - Show axis tick marks and labels. Automatically hidden below 192px height threshold. Default: `false`.
- * @property {boolean} showPoints - Show point markers on data points. Default: `false`.
- * @property {boolean} fill - Enable area fill under/between lines. Use with `fillMode` to control fill style. Default: `false`.
- * @property {'semitransparent'|'solid'|'threshold'} fillMode - Fill rendering mode. `'semitransparent'` uses 50% alpha, `'solid'` uses opaque fill, `'threshold'` (single-series only) fills above/below midpoint with red/blue gradient. Default: `'semitransparent'`.
- * @property {'smooth'|'straight'|'stepped'} lineMode - Line drawing style. `'smooth'` applies bezier curve tension, `'straight'` draws straight lines, `'stepped'` creates step-like lines. Default: `'smooth'`.
- * @property {boolean} stacked - Stack multi-series datasets vertically on y-axis. Ignored for single-series and threshold fill mode. Default: `false`.
- * @property {string} unit - Unit label displayed in tooltips (e.g., 'kW', 'kg', '%'). Default: empty string.
- * @property {number} xTicksLimit - Maximum number of x-axis ticks/grid lines. Useful for matching external axes. Optional.
- * @property {number} xStepSize - Force specific interval between x-axis ticks (e.g., 1, 2, 5). Useful for matching external axes. Optional.
- * @property {number} yTicksLimit - Maximum number of y-axis ticks/grid lines. Useful for matching external axes. Optional.
- * @property {number} yStepSize - Force specific interval between y-axis ticks (e.g., 2, 5, 10). Useful for matching external axes. Optional.
- * @property {boolean} legend - Show HTML legend below chart with series labels and colors. Default: `false`.
- * @property {number} height - Chart height in pixels. Determines chart size with 1.5:1 aspect ratio (width = height × 1.5). Default: `320`.
- * @property {boolean} showDebugOverlay - Development mode: show visual debug overlay with dimension guides. Shows blue border around canvas (axis area) and red border around chart grid (data area). Default: `false`.
+ * TODO(maintainer): `fill` is documented here as a class-level `@property` tag
+ * only because tooling (the manifest, lit-analyzer, story controls) still
+ * depends on it, yet no `@property`-decorated field backs it and no render path
+ * reads `this.fill` (fill is decided by the abstract `shouldApplyFill()`). Decide
+ * whether `fill` is a real public property (add a decorated field) or obsolete
+ * (remove this tag and the `.fill=` usages in the stories/wrappers). Kept as-is
+ * here to avoid changing the public API surface in a docs-only cleanup.
  *
+ * @property {boolean} fill - Enable area fill under/between lines. Use with `fillMode` to control fill style. Default: `false`.
  * @ignore This is an abstract base class. Use concrete implementations like ObcLineGraph or ObcAreaGraph instead.
  * @experimental
  */

package/src/building-blocks/instrument-radial/instrument-radial.stories.ts

@@ -1,11 +1,27 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
 import {ObcInstrumentRadial, ObcGaugeRadialType} from './instrument-radial.js';
 import './instrument-radial.js';
-import {widthDecorator} from '../../storybook-util.js';
+import {
+  playgroundColumn,
+  resizableStoryBox,
+  storyHint,
+  widthDecorator,
+} from '../../storybook-util.js';
 import {AdviceType} from '../../navigation-instruments/watch/advice.js';
 import {InstrumentState, Priority} from '../../navigation-instruments/types.js';
 
-const meta: Meta<typeof ObcInstrumentRadial> = {
+type InstrumentRadialStoryArgs = Partial<ObcInstrumentRadial> & {
+  width?: number;
+  height?: number;
+  /** Story-only: apply faceDiameter to every playground instance. */
+  lockFaceDiameter?: boolean;
+  // Manifest-derived entries that only exist to be hidden from the panel.
+  minAngle?: unknown;
+  maxAngle?: unknown;
+};
+
+const meta: Meta<InstrumentRadialStoryArgs> = {
   title: 'Building Blocks/Instrument Radial',
   tags: ['6.0'],
   component: 'obc-instrument-radial',
@@ -19,16 +35,21 @@ const meta: Meta<typeof ObcInstrumentRadial> = {
     priority: {control: 'select', options: Object.values(Priority)},
     tickmarksInside: {control: 'boolean'},
     showLabels: {control: 'boolean'},
-    minAngle: {control: false, table: {disable: true}},
-    maxAngle: {control: false, table: {disable: true}},
+    faceDiameter: {
+      control: {type: 'range', min: 100, max: 600, step: 10},
+      description:
+        'Pins the outer-ring diameter in px (fixed intrinsic size, equal circumference across instruments). Clear to return to fill-the-container sizing.',
+    },
+    minAngle: {table: {disable: true}},
+    maxAngle: {table: {disable: true}},
     // Only acts on labels at the horizontal ends (±90°), i.e. a 180° sweep.
     // Hidden by default; the MaxMinEndLabels story re-enables it.
     endLabelsMaxMin: {table: {disable: true}},
   },
-} satisfies Meta<ObcInstrumentRadial>;
+} satisfies Meta<InstrumentRadialStoryArgs>;
 
 export default meta;
-type Story = StoryObj<ObcInstrumentRadial>;
+type Story = StoryObj<InstrumentRadialStoryArgs>;
 
 export const Positive: Story = {
   args: {
@@ -135,3 +156,163 @@ export const WithAdvices: Story = {
     ],
   },
 };
+
+/**
+ * The issue #1021 behavior at the building-block level: each dial reserves
+ * room for its own labels when squeezed, so the 4-digit dial gets a wider
+ * margin (and a smaller ring) than the 2-digit one — nothing is clipped.
+ * Shrink further and labels hide entirely instead (the content-aware cap in
+ * `svghelpers/radial-frame.ts`). See Instruments/Gauge Radial → *Label Room*
+ * stories for the full dashboard scenario.
+ */
+export const LabelRoomFlexRow: Story = {
+  name: 'Label Room — 2-Digit Vs 4-Digit Flex Row (#1021)',
+  args: {
+    width: 500,
+    height: 220,
+  },
+  render: () => html`
+    <div style="display: flex; gap: 8px; width: 100%; height: 100%;">
+      ${[
+        {max: 99, interval: 33},
+        {max: 3600, interval: 900},
+      ].map(
+        (g) => html`
+          <div style="flex: 1; min-width: 0;">
+            <obc-instrument-radial
+              .value=${g.max * 0.6}
+              .maxValue=${g.max}
+              .getAngle=${(v: number) => (v / g.max) * 270 - 135}
+              .showLabels=${true}
+              .primaryTickmarkInterval=${g.interval}
+            ></obc-instrument-radial>
+          </div>
+        `
+      )}
+    </div>
+  `,
+};
+
+/**
+ * Same `faceDiameter` on both dials pins their ring circumference: the rings
+ * are pixel-identical while the 4-digit dial's box grows wider for its
+ * labels. This is the equal-circumference contract shared by all radial
+ * instruments (and `obc-donut-chart`'s `fixedHeight`).
+ */
+export const EqualCircumferenceMixedDigits: Story = {
+  name: 'Equal Circumference — Same FaceDiameter, Different Labels',
+  args: {
+    width: 600,
+    height: 280,
+    faceDiameter: 200,
+  },
+  render: (args) => html`
+    <div style="display: flex; gap: 8px; align-items: center;">
+      ${[
+        {max: 99, interval: 33},
+        {max: 3600, interval: 900},
+      ].map(
+        (g) => html`
+          <obc-instrument-radial
+            style="display: block;"
+            .value=${g.max * 0.6}
+            .maxValue=${g.max}
+            .getAngle=${(v: number) => (v / g.max) * 270 - 135}
+            .faceDiameter=${args.faceDiameter ?? 200}
+            .showLabels=${true}
+            .primaryTickmarkInterval=${g.interval}
+          ></obc-instrument-radial>
+        `
+      )}
+    </div>
+  `,
+};
+
+/**
+ * Interactive sizing playground for the building block: drag the dashed box's
+ * bottom-right corner to resize it. The first dial is pinned to a fixed
+ * intrinsic size by the `faceDiameter` control, while the 4-digit dial and
+ * the 180° sector adapt to the remaining flex space, reserving room for their
+ * labels adaptively (issue #1021). Enable `lockFaceDiameter` to pin all three
+ * to the same circumference — full circle and partial arcs alike. Related:
+ * *Sizing Playground* stories under Building Blocks/Watch and
+ * Instruments/Gauge Radial.
+ */
+export const SizingPlayground: Story = {
+  name: 'Sizing Playground — FaceDiameter + Resizable (Manual)',
+  tags: ['skip-test'],
+  parameters: {widthDecorator: false},
+  args: {
+    faceDiameter: 200,
+    lockFaceDiameter: false,
+  },
+  argTypes: {
+    lockFaceDiameter: {
+      control: 'boolean',
+      description:
+        'Apply faceDiameter to every instance (equal circumference) instead of only the first.',
+    },
+  },
+  render: (args) => {
+    const instances = [
+      {
+        label: '2-digit, 270°',
+        max: 99,
+        interval: 33,
+        getAngle: (v: number) => (v / 99) * 270 - 135,
+        clipBottom: 0,
+        endLabelsMaxMin: false,
+      },
+      {
+        label: '4-digit, 270°',
+        max: 3600,
+        interval: 900,
+        getAngle: (v: number) => (v / 3600) * 270 - 135,
+        clipBottom: 0,
+        endLabelsMaxMin: false,
+      },
+      {
+        label: '2-digit, 180° sector',
+        max: 99,
+        interval: 33,
+        getAngle: (v: number) => (v / 99) * 180 - 90,
+        clipBottom: 44,
+        endLabelsMaxMin: true,
+      },
+    ];
+    const fd = (index: number) =>
+      index === 0 || args.lockFaceDiameter ? args.faceDiameter : undefined;
+    const caption = (index: number, label: string) =>
+      fd(index) !== undefined
+        ? `${label} — pinned ${fd(index)}px`
+        : `${label} — adaptive (flex)`;
+    return html`
+      ${storyHint(
+        'Drag the bottom-right corner of the dashed box to resize it. The first dial is pinned by the faceDiameter control; the 4-digit dial and the 180° sector adapt to the remaining flex space. Enable lockFaceDiameter to pin all three to the same circumference.'
+      )}
+      ${resizableStoryBox(
+        html`
+          ${instances.map((g, index) =>
+            playgroundColumn(
+              caption(index, g.label),
+              html`
+                <obc-instrument-radial
+                  .value=${g.max * 0.6}
+                  .maxValue=${g.max}
+                  .getAngle=${g.getAngle}
+                  .clipBottom=${g.clipBottom}
+                  .endLabelsMaxMin=${g.endLabelsMaxMin}
+                  .showLabels=${true}
+                  .primaryTickmarkInterval=${g.interval}
+                  .faceDiameter=${fd(index)}
+                ></obc-instrument-radial>
+              `,
+              {pinned: fd(index) !== undefined}
+            )
+          )}
+        `,
+        {width: 760, height: 300}
+      )}
+    `;
+  },
+};

package/src/building-blocks/instrument-radial/instrument-radial.ts

@@ -1,5 +1,6 @@
-import {css, LitElement, html, svg, nothing} from 'lit';
+import {css, LitElement, PropertyValues, html, svg, nothing} from 'lit';
 import {property} from 'lit/decorators.js';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {customElement} from '../../decorator.js';
 import {
   AdviceState,
@@ -12,18 +13,17 @@ import {TickmarkType} from '../../navigation-instruments/watch/tickmark.js';
 import {TickmarkStyle} from '../../navigation-instruments/watch/tickmark.js';
 import {InstrumentState, Priority} from '../../navigation-instruments/types.js';
 import {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';
+import {innerRingRadiusFor} from '../../navigation-instruments/watch/watch.js';
 import {
-  OUTER_RING_RADIUS,
-  innerRingRadiusFor,
-} from '../../navigation-instruments/watch/watch.js';
-import {
-  computeZoomToFitArcFrame,
-  type ZoomToFitArcFrame,
-} from '../../svghelpers/arc-frame.js';
-
-// Must match obc-watch's un-zoomed viewBox `(176 + getPadding()) * 2`
-// (default padding 48 → 448); instrument-radial overlays obc-watch 1:1.
-const WATCH_DEFAULT_VIEWBOX = 448;
+  applyPinnedHostSize,
+  computeRadialFrame,
+  END_MAXMIN_LABEL_DROP_PX,
+  estimateLabelWidthPx,
+  measureContainerPx,
+  observeInnerBox,
+  SIDE_LABEL_DROP_PX,
+  type RadialFrame,
+} from '../../svghelpers/radial-frame.js';
 
 export enum ObcGaugeRadialType {
   filled = 'filled',
@@ -115,6 +115,9 @@ function defaultGaugeAngle(
 }
 
 /**
+ * @fires frame-changed {CustomEvent<RadialFrame>} Fired after render when the
+ *   computed radial frame changed (viewBox, label visibility, or pinned host
+ *   size). Wrappers use it to align sibling overlays/readouts with the dial.
  * @experimental
  */
 @customElement('obc-instrument-radial')
@@ -174,9 +177,54 @@ export class ObcInstrumentRadial extends SetpointMixin(LitElement) {
    */
   @property({type: Boolean}) endLabelsMaxMin: boolean = false;
   @property({type: Boolean}) zoomToFitArc: boolean = false;
+  /**
+   * Outer-ring diameter in CSS pixels. When set, the instrument renders at a
+   * fixed intrinsic size derived from the ring, arc shape and label reserve —
+   * so instruments sharing the same value have identical ring circumference
+   * regardless of label width or arc extent (like obc-donut-chart's
+   * fixedHeight). When unset (default), the instrument fills its container.
+   */
+  @property({type: Number, attribute: 'face-diameter'})
+  faceDiameter: number | undefined;
 
   private _radiusOffset = 0;
-  private _arcFrame: ZoomToFitArcFrame | undefined;
+  private _frame: RadialFrame | undefined;
+  private _lastFrameKey = '';
+
+  private _resizeController = new ResizeController(this, {});
+
+  override firstUpdated(changed: PropertyValues): void {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
+  }
+
+  /** The frame computed for the current render (viewBox, label reserve …). */
+  get frame(): RadialFrame | undefined {
+    return this._frame;
+  }
+
+  /** Whether the host size styles were set by applyPinnedHostSize. */
+  private _hostSizePinned = false;
+
+  override updated(changed: PropertyValues): void {
+    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<RadialFrame>('frame-changed', {detail: frame})
+      );
+    }
+  }
 
   private get clampedValue(): number {
     const lowerBound = Math.min(this.minValue, this.maxValue);
@@ -279,31 +327,40 @@ export class ObcInstrumentRadial extends SetpointMixin(LitElement) {
         ? WatchCircleType.single
         : WatchCircleType.double;
 
-    const clips = this.safeClips;
-    let viewBox: string;
-    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 = undefined;
-      const full = WATCH_DEFAULT_VIEWBOX;
-      const w = full * (1 - clips.left / 100 - clips.right / 100);
-      const h = 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} ${w} ${h}`;
-    }
+    const tickmarks = this.tickmarks;
+    // Labels hang past the ±90° line only when a labeled tick actually sits
+    // there (e.g. the 180°/90° sector ends) — a ±60° sector like rot-sector
+    // must not reserve a drop it never uses.
+    const hasHorizontalEndLabels = tickmarks.some((t) => {
+      if (t.text === undefined) {
+        return false;
+      }
+      const angle = ((t.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((t) => t.text)),
+      labelDropPx:
+        this.tickmarksInside || !hasHorizontalEndLabels
+          ? 0
+          : this.endLabelsMaxMin
+            ? END_MAXMIN_LABEL_DROP_PX
+            : SIDE_LABEL_DROP_PX,
+      clips: this.zoomToFitArc ? undefined : 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((t) => ({...t, text: undefined}))
+      : tickmarks;
 
     return html`
       <div class="container">
@@ -316,23 +373,17 @@ export class ObcInstrumentRadial extends SetpointMixin(LitElement) {
           .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>
     `;
   }

package/src/integration-systems/integration-bar/integration-bar.ts

@@ -30,30 +30,6 @@ import {classMap} from 'lit/directives/class-map.js';
  * @slot clock - Custom clock content, rendered when `showClock` is true
  * @slot integration-buttons - Regular vessel integration buttons
  * @slot hug-buttons - Compact vessel integration buttons; slotted integration buttons are forced to hug type
- * @property {IntegrationBarType} type - Integration bar mode for fleet/vessel presentation
- * @property {boolean} hideHomeButton - Hides the home button when true
- * @property {boolean} showClock - Toggles rendering of the clock slot
- * @property {boolean} showLinkButton - Toggles visibility of link button
- * @property {boolean} linkButtonActivated - Activated state of link button
- * @property {boolean} showUserButton - Toggles visibility of user button
- * @property {boolean} userButtonActivated - Activated state of user button
- * @property {boolean} showDimmingButton - Toggles visibility of dimming button
- * @property {boolean} dimmingButtonActivated - Activated state of dimming button
- * @property {boolean} showSystemButton - Toggles visibility of system button
- * @property {boolean} systemButtonActivated - Activated state of system button
- * @property {boolean} showScreenButton - Toggles visibility of screen button
- * @property {boolean} screenButtonActivated - Activated state of screen button
- * @property {boolean} showNotificationButton - Toggles visibility of notification button
- * @property {boolean} notificationButtonActivated - Activated state of notification button
- * @property {boolean} showAlertButton - Toggles visibility of alert button
- * @property {boolean} alertButtonActivated - Activated state of alert button
- * @property {boolean} showFleetButton - Toggles visibility of fleet button
- * @property {boolean} fleetButtonSelected - Selected state of fleet button
- * @property {boolean} fleetButtonActivated - Active state of fleet button while selection is pending
- * @property {string} fleetButtonLabel - Label for the fleet button
- * @property {string} selectedVesselValue - Selected vessel value
- * @property {string} activeVesselValue - Active vessel value while selection is pending
- * @property {{value: string; label: string}[]} vesselSelectorOptions - Available vessel options
  * @fires fleet-button-click - Fired when the fleet button is clicked
  * @fires link-button-clicked - Fired when the link button is clicked
  * @fires alert-button-clicked - Fired when the alert button is clicked
@@ -66,25 +42,45 @@ import {classMap} from 'lit/directives/class-map.js';
  */
 @customElement('obc-integration-bar')
 export class ObcIntegrationBar extends LitElement {
+  /** Hides the home button when true */
   @property({type: Boolean}) hideHomeButton = false;
+  /** Toggles rendering of the clock slot */
   @property({type: Boolean}) showClock = false;
+  /** Toggles visibility of link button */
   @property({type: Boolean}) showLinkButton = false;
+  /** Activated state of link button */
   @property({type: Boolean}) linkButtonActivated = false;
+  /** Toggles visibility of user button */
   @property({type: Boolean}) showUserButton = false;
+  /** Activated state of user button */
   @property({type: Boolean}) userButtonActivated = false;
+  /** Toggles visibility of dimming button */
   @property({type: Boolean}) showDimmingButton = false;
+  /** Activated state of dimming button */
   @property({type: Boolean}) dimmingButtonActivated = false;
+  /** Toggles visibility of system button */
   @property({type: Boolean}) showSystemButton = false;
+  /** Activated state of system button */
   @property({type: Boolean}) systemButtonActivated = false;
+  /** Toggles visibility of screen button */
   @property({type: Boolean}) showScreenButton = false;
+  /** Activated state of screen button */
   @property({type: Boolean}) screenButtonActivated = false;
+  /** Toggles visibility of notification button */
   @property({type: Boolean}) showNotificationButton = false;
+  /** Activated state of notification button */
   @property({type: Boolean}) notificationButtonActivated = false;
+  /** Toggles visibility of alert button */
   @property({type: Boolean}) showAlertButton = false;
+  /** Activated state of alert button */
   @property({type: Boolean}) alertButtonActivated = false;
+  /** Toggles visibility of fleet button */
   @property({type: Boolean}) showFleetButton = false;
+  /** Selected state of fleet button */
   @property({type: Boolean}) fleetButtonSelected = false;
+  /** Active state of fleet button while selection is pending */
   @property({type: Boolean}) fleetButtonActivated = false;
+  /** Label for the fleet button */
   @property({type: String}) fleetButtonLabel = 'Fleet';
 
   @state() private buttonsOnBar = false;