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

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/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;

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

@@ -35,36 +35,38 @@ export enum IntegrationButtonType {
  *
  * @fires click - Fired when the internal button is activated.
  *
- * @property {boolean} hasTrailingIcon - Shows the `trailing-icon` slot.
- * @property {boolean} hasTrailingIcon2 - Shows the `trailing-icon2` slot.
- * @property {boolean} hasLeadingIcon - Shows the `leading-icon` slot.
- * @property {boolean} hasstatus - Shows the `status` slot.
- * @property {IntegrationButtonReadout[]} readouts - List of readout items shown in the rich type.
- * @property {boolean} disabled - Disables the internal button.
- * @property {boolean} activated - Applies active state styling while a selection is pending.
- * @property {boolean} selected - Applies selected state styling.
- * @property {boolean} dividerBottom - Shows a bottom divider under the button.
- * @property {boolean} dividerRight - Shows a right divider to separate from adjacent buttons.
- * @property {IntegrationButtonVariant} variant - Visual variant (`normal` or `flat`).
- * @property {IntegrationButtonType} type - Layout type (`hug`, `regular`, or `rich`).
  * @experimental
  */
 @customElement('obc-integration-button')
 export class ObcIntegrationButton extends LitElement {
+  /** Shows the `trailing-icon` slot. */
   @property({type: Boolean}) hasTrailingIcon = false;
-  /** @availableWhen hasTrailingIcon==true */
+  /**
+   * Shows the `trailing-icon2` slot.
+   * @availableWhen hasTrailingIcon==true
+   */
   @property({type: Boolean}) hasTrailingIcon2 = false;
+  /** Shows the `leading-icon` slot. */
   @property({type: Boolean}) hasLeadingIcon = false;
+  /** Shows the `status` slot. */
   @property({type: Boolean}) hasStatus = false;
+  /** List of readout items shown in the rich type. */
   @property({type: Array, attribute: false})
   readouts: IntegrationButtonReadout[] = [];
+  /** Disables the internal button. */
   @property({type: Boolean}) disabled = false;
+  /** Applies active state styling while a selection is pending. */
   @property({type: Boolean}) activated = false;
+  /** Applies selected state styling. */
   @property({type: Boolean}) selected = false;
+  /** Shows a bottom divider under the button. */
   @property({type: Boolean}) dividerBottom = false;
+  /** Shows a right divider to separate from adjacent buttons. */
   @property({type: Boolean}) dividerRight = false;
+  /** Visual variant (`normal` or `flat`). */
   @property({type: String}) variant: IntegrationButtonVariant =
     IntegrationButtonVariant.normal;
+  /** Layout type (`hug`, `regular`, or `rich`). */
   @property({type: String}) type: IntegrationButtonType =
     IntegrationButtonType.regular;
 

package/src/navigation-instruments/compass/compass.ts

@@ -59,9 +59,9 @@ export enum CompassPriorityElement {
  *   Supports spinning dots (`rotType="dots"`) — the dot animation is
  *   amplified by `rotDotAnimationFactor` so small physical values still
  *   read at a glance — and a banana-shaped arc bar (`rotType="bar"`)
- *   showing the HDG→COG span. Bar extent is driven by the physical value
- *   only (gain is not applied). Position on the outer scale ring or inner
- *   circle via `rotPosition`.
+ *   showing the rate of turn as an arc anchored at the current heading.
+ *   Bar extent is driven by the physical value only (gain is not applied).
+ *   Position on the outer scale ring or inner circle via `rotPosition`.
  * - **Environmental overlays**: Wind speed/direction and current
  *   speed/direction indicators on the watch face.
  * - **Vessel image**: Configurable vessel silhouette centered on the
@@ -94,25 +94,6 @@ export enum CompassPriorityElement {
  * ></obc-compass>
  * ```
  *
- * @property {number} heading - The current heading of the vessel in degrees.
- * @property {number} courseOverGround - The current course over ground in degrees.
- * @property {number | null} headingSetpoint - The set point for the heading in degrees.
- * @property {boolean} atHeadingSetpoint - Indicates if the vessel is at the heading set point.
- * @property {boolean} autoAtHeadingSetpoint - Enables automatic at heading set point calculation.
- * @property {number} autoAtHeadingSetpointDeadband - The deadband for the heading set point in degrees.
- * @property {boolean} touching - Indicates if the compass is being touched.
- * @property {Array<AngleAdvice>} headingAdvices - An array of angle advices for the compass.
- * @property {number | null} currentWindSpeedKnots - The wind speed in knots.
- * @property {number | null} windFromDirection - The direction the wind is coming from in degrees.
- * @property {number | null} currentSpeed - The current speed, number of arrows.
- * @property {number | null} currentFromDirection - The direction the current is coming from in degrees.
- * @property {VesselImage} vesselImage - The image of the vessel.
- * @property {number|undefined} rateOfTurnDegreesPerMinute - Measured rate of turn in degrees per minute (the AIS / ITU-R M.1371 convention). Sign controls direction (positive = starboard / clockwise). Drives both the bar extent and the dot animation.
- * @property {number} rotDotAnimationFactor - Visual amplification for the dot animation only. Default `18` (≈1 rpm at 20°/min).
- * @property {number} rotationsPerMinute - **Deprecated.** Use `rateOfTurnDegreesPerMinute` instead. Kept as a backward-compatible fallback when `rateOfTurnDegreesPerMinute` is `undefined`.
- * @property {RotType} rotType - ROT display mode: `'dots'` (spinning dots, default) or `'bar'` (arc bar from HDG to COG).
- * @property {RotPosition} rotPosition - ROT track position: `'innerCircle'` (default) or `'scale'` (on the outer ring).
- * @property {Priority} priority - Color priority: `Priority.enhanced` uses the blue/enhanced color palette, `Priority.regular` (default) uses the standard palette.
  *
  * @ignition-base-height: 512px
  * @ignition-base-width: 512px
@@ -120,36 +101,65 @@ export enum CompassPriorityElement {
  */
 @customElement('obc-compass')
 export class ObcCompass extends LitElement {
+  /** The current heading of the vessel in degrees. */
   @property({type: Number}) heading = 0;
+  /** The current course over ground in degrees. */
   @property({type: Number}) courseOverGround = 0;
 
+  /** The set point for the heading in degrees. */
   @property({type: Number}) headingSetpoint: number | null = null;
   /** @availableWhen headingSetpoint!=null */
   @property({type: Number}) newHeadingSetpoint: number | undefined;
-  /** @availableWhen headingSetpoint!=null && autoAtHeadingSetpoint==false */
+  /**
+   * Indicates if the vessel is at the heading set point.
+   * @availableWhen headingSetpoint!=null && autoAtHeadingSetpoint==false
+   */
   @property({type: Boolean}) atHeadingSetpoint: boolean = false;
   /** @availableWhen headingSetpoint!=null */
   @property({type: Number}) headingSetpointAtZeroDeadband: number = 0.5;
   /** @availableWhen headingSetpoint!=null */
   @property({type: Boolean}) headingSetpointOverride: boolean = false;
-  /** @availableWhen headingSetpoint!=null */
+  /**
+   * Enables automatic at heading set point calculation.
+   * @availableWhen headingSetpoint!=null
+   */
   @property({type: Boolean, attribute: false}) autoAtHeadingSetpoint: boolean =
     true;
-  /** @availableWhen headingSetpoint!=null && autoAtHeadingSetpoint==true */
+  /**
+   * The deadband for the heading set point in degrees.
+   * @availableWhen headingSetpoint!=null && autoAtHeadingSetpoint==true
+   */
   @property({type: Number}) autoAtHeadingSetpointDeadband: number = 2;
   /** @availableWhen headingSetpoint!=null */
   @property({type: Boolean}) animateSetpoint: boolean = false;
-  /** @availableWhen headingSetpoint!=null */
+  /**
+   * Indicates if the compass is being touched.
+   * @availableWhen headingSetpoint!=null
+   */
   @property({type: Boolean}) touching: boolean = false;
+  /** An array of angle advices for the compass. */
   @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];
-  /** @availableWhen windFromDirection!=null */
+  /**
+   * The wind speed in knots.
+   * @availableWhen windFromDirection!=null
+   */
   @property({type: Number}) currentWindSpeedKnots: number | null = null;
-  /** @availableWhen currentWindSpeedKnots!=null */
+  /**
+   * The direction the wind is coming from in degrees.
+   * @availableWhen currentWindSpeedKnots!=null
+   */
   @property({type: Number}) windFromDirection: number | null = null;
-  /** @availableWhen currentFromDirection!=null */
+  /**
+   * The current speed, number of arrows.
+   * @availableWhen currentFromDirection!=null
+   */
   @property({type: Number}) currentSpeed: number | null = null;
-  /** @availableWhen currentSpeed!=null */
+  /**
+   * The direction the current is coming from in degrees.
+   * @availableWhen currentSpeed!=null
+   */
   @property({type: Number}) currentFromDirection: number | null = null;
+  /** The image of the vessel. */
   @property({type: String}) vesselImage: VesselImage = VesselImage.genericTop;
   /**
    * Measured rate of turn in degrees per minute (positive = starboard).
@@ -166,12 +176,18 @@ export class ObcCompass extends LitElement {
    */
   @property({type: Number}) rotDotAnimationFactor: number = 18;
   /**
+   * Legacy rate-of-turn input, in rotations per minute. When
+   * `rateOfTurnDegreesPerMinute` is `undefined`, this value is used
+   * (unconverted) as the fallback ROT, driving both the spinning dot ring
+   * and the bar extent.
    * @deprecated Use `rateOfTurnDegreesPerMinute` (and optionally
    * `rotDotAnimationFactor`) instead. Takes effect only when
    * `rateOfTurnDegreesPerMinute` is `undefined`.
    */
   @property({type: Number}) rotationsPerMinute: number = 1;
+  /** ROT display mode: `'dots'` (spinning dots, default) or `'bar'` (a rate-of-turn arc anchored at the current heading, its length proportional to the rate of turn). */
   @property({type: String}) rotType: RotType = RotType.dots;
+  /** ROT track position: `'innerCircle'` (default) or `'scale'` (on the outer ring). */
   @property({type: String}) rotPosition: RotPosition = RotPosition.innerCircle;
   /**
    * Bar-extent reference value in **degrees per minute**. The bar fills the
@@ -192,6 +208,7 @@ export class ObcCompass extends LitElement {
   @property({type: String}) direction: CompassDirection =
     CompassDirection.NorthUp;
   @property({type: String}) state: InstrumentState = InstrumentState.active;
+  /** Color priority: `Priority.enhanced` uses the blue/enhanced color palette, `Priority.regular` (default) uses the standard palette. */
   @property({type: String}) priority: Priority = Priority.regular;
   /** @availableWhen priority==enhanced */
   @property({type: Array, attribute: false})

package/src/navigation-instruments/compass-flat/compass-flat.ts

@@ -58,14 +58,6 @@ export interface Label {
  * - **Color priority**: Per-element priority for HDG, COG, and ROT via
  *   `priorityElements`.
  *
- * @property {number} heading - Current heading in degrees.
- * @property {number} courseOverGround - Current COG in degrees.
- * @property {RotType|undefined} rotType - ROT display mode: `'dots'`, `'bar'`, or `undefined` (hidden).
- * @property {number|undefined} rateOfTurnDegreesPerMinute - Measured rate of turn in degrees per minute (positive = starboard). Drives the bar extent and (after `× rotDotAnimationFactor`) the dot animation.
- * @property {number} rotDotAnimationFactor - Visual amplification for the dot animation only. Default `18` (≈1 rpm at 20°/min).
- * @property {number} rotationsPerMinute - **Deprecated.** Use `rateOfTurnDegreesPerMinute` instead.
- * @property {number} rotMaxValue - Bar-extent reference value in **degrees per minute**. Default `60` per ES-TRIN 2025/1 Art. 3.02.
- * @property {number} rotArcExtent - Degrees of bar arc per max-value ROT (default 60).
  *
  * @ignition-base-height: 170px
  * @ignition-base-width: 512px
@@ -74,7 +66,9 @@ export interface Label {
 @customElement('obc-compass-flat')
 export class ObcCompassFlat extends LitElement {
   @property({type: Boolean}) FOVIndicator: boolean = false;
+  /** Current heading in degrees. */
   @property({type: Number}) heading = 0;
+  /** Current COG in degrees. */
   @property({type: Number}) courseOverGround = 0;
   @property({type: Number}) tickInterval = 5;
   @property({type: Number}) FOV = 45;
@@ -85,6 +79,7 @@ export class ObcCompassFlat extends LitElement {
   priorityElements: CompassFlatPriorityElement[] = [
     CompassFlatPriorityElement.hdg,
   ];
+  /** ROT display mode: `'dots'`, `'bar'`, or `undefined` (hidden). */
   @property({type: String}) rotType: RotType | undefined;
   /**
    * Measured rate of turn in degrees per minute (positive = starboard).
@@ -98,6 +93,7 @@ export class ObcCompassFlat extends LitElement {
    */
   @property({type: Number}) rotDotAnimationFactor: number = 18;
   /**
+   * **Deprecated.** Use `rateOfTurnDegreesPerMinute` instead.
    * @deprecated Use `rateOfTurnDegreesPerMinute` instead.
    * @availableWhen rotType!=undefined
    */
@@ -108,7 +104,10 @@ export class ObcCompassFlat extends LitElement {
    * @availableWhen rotType!=undefined
    */
   @property({type: Number}) rotMaxValue: number = 60;
-  /** @availableWhen rotType!=undefined */
+  /**
+   * Degrees of bar arc per max-value ROT (default 60).
+   * @availableWhen rotType!=undefined
+   */
   @property({type: Number}) rotArcExtent: number = 60;
   /** @availableWhen rotType!=undefined */
   @property({type: Boolean}) rotPortStarboard: boolean = false;

package/src/navigation-instruments/gauge-trend/gauge-trend.ts

@@ -115,11 +115,6 @@ export {FillMode, ScaleType};
  * ></obc-gauge-trend>
  * ```
  *
- * @property {number} width - Chart width in pixels (defines aspect ratio)
- * @property {number} height - Chart height in pixels (defines aspect ratio)
- * @property {boolean} enhanced - Use enhanced color palette for chart and scales
- * @property {InstrumentState} state - Instrument state (automatically applied to scale)
- * @property {boolean} chartFill - Enable chart area fill (default: false for line-only)
  *
  * Setpoint properties are inherited from {@link SetpointMixin}.
  * These are forwarded to the internal `obc-bar-vertical` scale:

package/src/navigation-instruments/graph-mini/graph-mini.ts

@@ -8,11 +8,11 @@ import {customElement} from '../../decorator.js';
  * @element obc-graph-mini
  * @description A mini graph component
  *
- * @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values
  * @beta
  */
 @customElement('obc-graph-mini')
 export class ObcGraphMini extends LitElement {
+  /** The data to display in the graph, first array is the x values, second array is the y values */
   @property({type: Array})
   data: [number[], number[]] = [[], []];
 

package/src/navigation-instruments/indicator-graph/indicator-graph.ts

@@ -26,11 +26,11 @@ export interface ObcIndicatorGraphLayout {
  * @element obc-indicator-graph
  * @description A mini graph component
  *
- * @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values
  * @beta
  */
 @customElement('obc-indicator-graph')
 export class ObcIndicatorGraph extends LitElement {
+  /** The data to display in the graph, first array is the x values, second array is the y values */
   @property({type: Array})
   data: [number[], number[]] = [[], []];
 

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

@@ -161,22 +161,6 @@ const RADIAL_SETPOINT_INWARD_ADJUST = 4;
  * `_setpointCssAngle` tracks the accumulated CSS angle to avoid long-way-around
  * transitions across the 0°/360° boundary.
  *
- * @property {InstrumentState} state - Instrument state (active, loading, off)
- * @property {Priority} priority - Color priority (enhanced = blue palette, regular = gray palette)
- * @property {number|undefined} angleSetpoint - Setpoint angle in degrees (0° = 12 o'clock)
- * @property {number|undefined} newAngleSetpoint - New setpoint being adjusted (focus mode)
- * @property {boolean} atAngleSetpoint - Whether value matches setpoint (within deadband)
- * @property {number} angleSetpointAtZeroDeadband - Deadband for zero detection (default 0.5°)
- * @property {boolean} setpointOverride - Override to derive setpoint color from priority regardless of state
- * @property {RotType|undefined} rotType - ROT visualization type: `'dots'` (spinning dots) or `'bar'` (arc bar with clipped dots). Undefined hides the ROT layer.
- * @property {RotPosition} rotPosition - Track on which ROT elements are placed: `'scale'` (on the outer ring) or `'innerCircle'` (default, inside the inner ring)
- * @property {number} rotStartAngle - Start angle of the ROT bar arc in degrees (0° = 12 o'clock, clockwise). Only used when `rotType` is `'bar'`.
- * @property {number} rotEndAngle - End angle of the ROT bar arc in degrees. The bar is hidden when the difference from `rotStartAngle` is less than 0.1°.
- * @property {Priority|undefined} rotPriority - Override priority for ROT color derivation. When set, ROT colors use this instead of the main `priority`. Useful when the ROT element has independent priority (e.g. compass per-element priority).
- * @property {number|undefined} rateOfTurnDegreesPerMinute - Measured rate of turn in degrees per minute (the maritime/AIS convention, see ES-TRIN 2025/1 Art. 3.02 and ITU-R M.1371). Sign controls direction (positive = starboard/clockwise). When defined, this drives both the dot animation (multiplied by `rotDotAnimationFactor`) and the port/starboard direction sign.
- * @property {number} rotDotAnimationFactor - Visual amplification factor applied only to the spinning-dot animation (not to bar extent). Default `18` keeps the legacy visual feel (≈1 rpm at 20°/min).
- * @property {number} rotationsPerMinute - **Deprecated.** Spin speed of the ROT dot ring in rotations per minute. Sign controls direction (positive = clockwise). Use `rateOfTurnDegreesPerMinute` instead.
- * @property {ZoomToFitArcFrame|undefined} arcFrame - Pre-computed zoom-to-fit arc frame. When set, the watch skips its own `computeZoomToFitArcFrame()` call and uses these values directly. Consumer instruments (e.g. rudder, instrument-radial) should compute the frame once and pass it here to avoid redundant computation. If you pass `arcFrame`, you own keeping it in sync with `areas` / `watchCircleType` — obc-watch will NOT recompute it, so a stale frame renders stale geometry.
  * @experimental
  */
 @customElement('obc-watch')
@@ -184,16 +168,23 @@ export class ObcWatch extends LitElement {
   private _setpointId = `watch-setpoint-${Math.random().toString(36).slice(2, 9)}`;
   private _newSetpointId = `watch-new-setpoint-${Math.random().toString(36).slice(2, 9)}`;
 
+  /** Instrument state (active, loading, off) */
   @property({type: String}) state: InstrumentState = InstrumentState.active;
+  /** Color priority (enhanced = blue palette, regular = gray palette) */
   @property({type: String}) priority: Priority = Priority.regular;
   @property({type: String}) watchCircleType: WatchCircleType =
     WatchCircleType.single;
   @property({type: Boolean}) northArrow: boolean = false;
   @property({type: Boolean}) northArrowInside: boolean | undefined;
+  /** Setpoint angle in degrees (0° = 12 o'clock) */
   @property({type: Number}) angleSetpoint: number | undefined;
+  /** New setpoint being adjusted (focus mode) */
   @property({type: Number}) newAngleSetpoint: number | undefined;
+  /** Whether value matches setpoint (within deadband) */
   @property({type: Boolean}) atAngleSetpoint: boolean = false;
+  /** Deadband for zero detection (default 0.5°) */
   @property({type: Number}) angleSetpointAtZeroDeadband: number = 0.5;
+  /** Override to derive setpoint color from priority regardless of state */
   @property({type: Boolean}) setpointOverride: boolean = false;
   @property({type: Boolean}) touching: boolean = false;
 
@@ -250,17 +241,25 @@ export class ObcWatch extends LitElement {
   @property({type: Number}) scaleWindIcon: number = 1;
   @property({type: Number}) rotation: number | undefined;
   @property({type: Boolean}) zoomToFitArc: boolean = false;
+  /** Pre-computed zoom-to-fit arc frame. When set, the watch skips its own `computeZoomToFitArcFrame()` call and uses these values directly. Consumer instruments (e.g. rudder, instrument-radial) should compute the frame once and pass it here to avoid redundant computation. If you pass `arcFrame`, you own keeping it in sync with `areas` / `watchCircleType` — obc-watch will NOT recompute it, so a stale frame renders stale geometry. */
   @property({attribute: false}) arcFrame: ZoomToFitArcFrame | undefined;
   @property({type: Number}) tickFadeAngle: number = 0;
 
+  /** ROT visualization type: `'dots'` (spinning dots) or `'bar'` (arc bar with clipped dots). Undefined hides the ROT layer. */
   @property({type: String}) rotType: RotType | undefined;
+  /** Track on which ROT elements are placed: `'scale'` (on the outer ring) or `'innerCircle'` (default, inside the inner ring) */
   @property({type: String}) rotPosition: RotPosition = RotPosition.innerCircle;
+  /** Start angle of the ROT bar arc in degrees (0° = 12 o'clock, clockwise). Only used when `rotType` is `'bar'`. */
   @property({type: Number}) rotStartAngle: number = 0;
+  /** End angle of the ROT bar arc in degrees. The bar is hidden when the difference from `rotStartAngle` is less than 0.1°. */
   @property({type: Number}) rotEndAngle: number = 0;
+  /** Override priority for ROT color derivation. When set, ROT colors use this instead of the main `priority`. Useful when the ROT element has independent priority (e.g. compass per-element priority). */
   @property({type: String}) rotPriority: Priority | undefined;
   @property({type: Boolean}) rotPortStarboard: boolean = false;
   @property({type: Number}) rotAtZeroDeadband: number = ROT_ZERO_DEADBAND_DEG;
+  /** Measured rate of turn in degrees per minute (the maritime/AIS convention, see ES-TRIN 2025/1 Art. 3.02 and ITU-R M.1371). Sign controls direction (positive = starboard/clockwise). When defined, this drives both the dot animation (multiplied by `rotDotAnimationFactor`) and the port/starboard direction sign. */
   @property({type: Number}) rateOfTurnDegreesPerMinute: number | undefined;
+  /** Visual amplification factor applied only to the spinning-dot animation (not to bar extent). Default `18` keeps the legacy visual feel (≈1 rpm at 20°/min). */
   @property({type: Number}) rotDotAnimationFactor: number = 18;
   /**
    * @deprecated Use `rateOfTurnDegreesPerMinute` (and optionally `rotDotAnimationFactor`) instead.
@@ -271,6 +270,7 @@ export class ObcWatch extends LitElement {
   set rotationsPerMinute(value: number) {
     this._legacyRotationsPerMinute = value;
   }
+  /** Legacy spin speed of the ROT dot ring, in rotations per minute (sign controls direction; positive = clockwise). */
   get rotationsPerMinute() {
     return this._legacyRotationsPerMinute;
   }