@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.96 → 2.0.0-next.97

package/src/components/keyboard-numeric/keyboard-numeric.ts

@@ -84,6 +84,12 @@ const ALLOWED_CHARS_PATTERN = `^[${ALLOWED_CHARS.map((c) =>
 ).join('')}]*$`;
 
 /**
+ * `<obc-keyboard-numeric>` – An on-screen numeric keyboard with optional calculation and symbol modes.
+ *
+ * @slot leading-icon - Custom leading icon shown inside the input field (rendered when `hasLeadingIcon` is true).
+ * @fires close-click {CustomEvent} Fired when the close button (or Escape) dismisses the keyboard.
+ * @fires value-change {CustomEvent<{value: string}>} Fired whenever the current value changes.
+ * @fires done-click {CustomEvent<{value: string}>} Fired when the DONE button (or Enter) is pressed.
  * @beta
  */
 @customElement('obc-keyboard-numeric')

package/src/components/notification-floating-item/notification-floating-item.ts

@@ -53,8 +53,7 @@ import {
  *
  * | Slot Name       | Renders When...               | Purpose                                                      |
  * |-----------------|------------------------------|--------------------------------------------------------------|
- * | primary-icon    | Always (all types)           | Main icon representing the notification category.            |
- * | secondary-icon  | type="application" only      | Additional icon for application-type notifications.          |
+ * | primary-icon    | type="application" only      | Custom main icon (the built-in notification icon is used otherwise). |
  * | title           | Always                       | Title or heading of the notification.                        |
  * | description     | Always                       | Detailed message text.                                       |
  * | time            | hasTimestamp is true         | Timestamp label (e.g., "09:12:46").                          |
@@ -83,8 +82,7 @@ import {
  * </obc-notification-floating-item>
  * ```
  *
- * @slot primary-icon - Main icon representing the notification category.
- * @slot secondary-icon - Additional icon for application-type notifications.
+ * @slot primary-icon - Custom main icon, projected into the child only when `type="application"` (the built-in notification icon is used otherwise).
  * @slot title - Title or heading of the notification.
  * @slot description - Detailed message text.
  * @slot time - Timestamp label (e.g., "09:12:46").

package/src/components/sequence-card/sequence-card.ts

@@ -97,6 +97,15 @@ export enum ObcSequenceCardState {
  * ```
  *
  * Keywords: timeline, step, progress, sequence, card, event, status.
+ *
+ * @slot leading-icon - Icon before the title (shown when `hasLeadingIcon` is true).
+ * @slot title - Title text (falls back to `cardTitle`).
+ * @slot subtitle - Subtitle/description (falls back to `subtitle`).
+ * @slot time-stamp - Header timestamp (falls back to `timeLabel` + `time`).
+ * @slot header-actions - Optional header actions (e.g., close button).
+ * @slot left-time-stamp - Left rail timestamp (falls back to `leftTime`).
+ * @slot actions - Actions row content (shown when `hasActions` is true).
+ * @slot - Main content area (shown when `hasContent` is true).
  * @experimental
  */
 @customElement('obc-sequence-card')

package/src/components/sequence-item/sequence-item.ts

@@ -32,6 +32,11 @@ export enum SequenceItemState {
  * composing `<obc-sequence-step>` for the visual indicator. Consumers can either
  * configure the built-in step via `step*` props or supply a custom step through
  * the `step` slot.
+ *
+ * @slot title - Title/subtitle block (falls back to the built-in `title`/`subtitle`/inline description).
+ * @slot description - Description text (rendered when `hasDescription` is true and not inlined).
+ * @slot meta - Meta row with timestamp/distance stamps (rendered when `hasMeta` is true — i.e. `hasStamp` with a timestamp or distance stamp enabled).
+ * @slot step - Custom step indicator (falls back to the built-in `<obc-sequence-step>`).
  * @beta
  */
 @customElement('obc-sequence-item')

package/src/components/sequence-modal/sequence-modal.ts

@@ -59,6 +59,10 @@ export enum ObcSequenceModalType {
  * ```
  *
  * Keywords: modal, sequence, step, dialog, progress, actions.
+ *
+ * @slot actions - Actions row content (shown when `hasActions` is true).
+ * @slot - Main content area.
+ * @fires close-click - Fired when the close icon is clicked.
  * @experimental
  */
 @customElement('obc-sequence-modal')

package/src/components/sequence-step/sequence-step.ts

@@ -55,6 +55,9 @@ export enum SequenceVariant {
  * `<obc-sequence-step>` renders the visual node of a sequence diagram.
  * Supports three sizes, multiple styles (regular/point/connector), and can show
  * leading/trailing connectors as well as state-specific icons.
+ *
+ * @slot leading-icon - Custom leading state icon (shown for medium/large regular steps with `hasIcon`, when the value has no built-in icon).
+ * @slot - Step label content (shown for non-small steps).
  */
 export class ObcSequenceStep extends LitElement {
   @property({type: String}) orientation: SequenceOrientation =

package/src/components/slider-double/slider-double.ts

@@ -43,7 +43,7 @@ export type ObcSliderDoubleChangeEvent = CustomEvent<{
  *
  * This component allows users to select a minimum and maximum value by dragging two thumbs along a horizontal track. It is commonly used for filtering or specifying ranges (such as price, speed, or time intervals) in forms and dashboards. The slider supports both interactive and read-only display modes, as well as visual variants for different UI needs.
  *
- * Appears with two draggable handles (thumbs) and labels showing the current low and high values. Optionally, icons can be placed at each end of the slider via slots.
+ * Appears with two draggable handles (thumbs) and labels showing the current low and high values. The low and high readout labels can be customized via slots.
  *
  * ## Features
  * - **Dual-thumb range selection:** Users can adjust both the lower and upper bounds of a numeric interval.
@@ -56,7 +56,7 @@ export type ObcSliderDoubleChangeEvent = CustomEvent<{
  * - **Seeking mode:** Enable `allowSeeking` to let users jump to a value by clicking on the track, with smooth animated transitions controlled by `seekingSpeed`.
  * - **Custom labels:** Display formatted value labels with unit (`labelUnit`), decimal precision (`labelDecimals`), and adjustable label width (`labelWidth`).
  * - **Hug container option:** Remove spacing between slider and container edges with the `hugcontainer` attribute for seamless layout integration.
- * - **Icon slots:** Add icons to the left and right ends of the slider using `icon-left` and `icon-right` slots.
+ * - **Custom readouts:** Replace the low/high value labels with custom content using the `left-readout` and `right-readout` slots.
  *
  * ## Usage Guidelines
  * Use `obc-slider-double` when you need users to specify a numeric range, such as filtering results by minimum and maximum values. Ideal for scenarios like:
@@ -72,8 +72,6 @@ export type ObcSliderDoubleChangeEvent = CustomEvent<{
  *
  * | Slot Name     | Renders When...               | Purpose                                                                                                          |
  * |---------------|-------------------------------|------------------------------------------------------------------------------------------------------------------|
- * | icon-left     | Always                        | Icon or content at the left end of the slider. Example: `<obi-placeholder slot="icon-left"></obi-placeholder>`   |
- * | icon-right    | Always                        | Icon or content at the right end of the slider. Example: `<obi-placeholder slot="icon-right"></obi-placeholder>` |
  * | left-readout  | `showLeftReadout` is true     | Custom content for the left (low) readout label. Falls back to the formatted `low` value.                        |
  * | right-readout | `showRightReadout` is true    | Custom content for the right (high) readout label. Falls back to the formatted `high` value.                     |
  *
@@ -119,15 +117,13 @@ export type ObcSliderDoubleChangeEvent = CustomEvent<{
  *   variant="enhanced"
  *   allowSeeking
  * >
- *   <obi-placeholder slot="icon-left"></obi-placeholder>
- *   <obi-placeholder slot="icon-right"></obi-placeholder>
+ *   <span slot="left-readout">Min</span>
+ *   <span slot="right-readout">Max</span>
  * </obc-slider-double>
  * ```
  *
  * In this example, the slider allows selection of a percentage range from 0 to 100, with 5% increments, enhanced styling, and seeking enabled.
  *
- * @slot icon-left - Slot for the left icon
- * @slot icon-right - Slot for the right icon
  * @slot left-readout - Custom content for the left (low) readout label (rendered when `showLeftReadout` is true)
  * @slot right-readout - Custom content for the right (high) readout label (rendered when `showRightReadout` is true)
  * @fires value {ObcSliderDoubleValueEvent} - Fires when the value is changed

package/src/components/status-indicator/status-indicator.ts

@@ -14,6 +14,7 @@ export enum StatusIndicatorStatus {
 }
 
 /**
+ * @slot - Label content shown next to the status indicator.
  * @beta
  */
 @customElement('obc-status-indicator')

package/src/components/system-menu/system-menu.ts

@@ -97,6 +97,7 @@ export type VolumeChangeEvent = CustomEvent<number>;
  * @fires audio-click - When the Audio button is clicked
  * @fires audio-volume-change - {VolumeChangeEvent} - When the Audio volume is changed
  * @fires microphone-click - When the Microphone button is clicked
+ * @fires push-to-talk-change - When the push-to-talk toggle is changed
  * @fires battery-usage-click - When the Battery usage button is clicked
  * @fires battery-saving-mode-change - When the Battery saving mode is changed
  * @fires battery-mode-change - When the Battery mode is changed
@@ -107,6 +108,7 @@ export type VolumeChangeEvent = CustomEvent<number>;
  * @fires to-sub-menu-click - When the sub menu is clicked
  * @fires wifi-options-click - When the Wi-Fi options are clicked
  * @fires wifi-disconnect-click - When the Wi-Fi disconnect is clicked
+ * @slot battery-status - Custom battery status text (falls back to the built-in charging/battery label).
  * @stable
  */
 @customElement('obc-system-menu')

package/src/components/table-header-item/table-header-item.ts

@@ -20,6 +20,8 @@ export enum ObcTableHeaderItemSortDirection {
 }
 
 /**
+ * @slot leading-icon - Leading icon (shown when `hasLeadingIcon` is true).
+ * @slot - Header label content (hidden when `type` is `IconOnly`).
  * @beta
  */
 @customElement('obc-table-header-item')

package/src/components/tag/tag.ts

@@ -23,6 +23,7 @@ export enum TagSize {
 }
 
 /**
+ * @slot - Leading icon content (shown when `hasIcon` is true).
  * @stable
  */
 @customElement('obc-tag')

package/src/components/toggletip/toggletip.ts

@@ -84,10 +84,10 @@ export enum ToggletipVariant {
  * ## Properties and Configuration
  *
  * - `variant`: Controls the visual style and semantic meaning (see Features above for all options).
- * - `title`: Sets the header text (shown if `hasTitleContainer` is true).
- * - `description`: Sets the main message text (shown if `hasDescription` is true).
- * - `hasTitleContainer`, `hasDescription`, `hasContent`, `hasActions`: Toggle visibility of each section.
- * - `hasLeadingIcon`, `hasTrailingIcon`: Toggle visibility of icon slots.
+ * - `title`: Sets the header text. The header is shown only when `title` is a non-empty string.
+ * - `description`: Sets the main message text. Shown whenever `description` is defined.
+ * - `hasContent`, `hasActions`: Toggle visibility of the custom content area and the action buttons.
+ * - `hasLeadingIcon`, `hasTrailingIcon`: Toggle visibility of icon slots (only effective when a `title` is set).
  * - `primaryButtonLabel`, `secondaryButtonLabel`: Set labels for action buttons (shown if `hasActions` is true).
  * - `customWidth`: Sets a custom width for the toggletip (in pixels).
  *

package/src/components/user-menu/user-menu.ts

@@ -104,6 +104,7 @@ export type ObcUserMenuSignedInAction = {
  * ></obc-user-menu>
  * ```
  *
+ * @slot signed-in-action-icon-<id> - Optional icon for a signed-in action, one per action; `<id>` is the normalized action id (shown in the `signed-in` type).
  * @fires sign-in-click {CustomEvent<{username: string, password: string}>}
  * @fires sign-out-click
  * @fires signed-in-action-click {CustomEvent<{id: string, label: string}>}

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

@@ -3,6 +3,7 @@ import {customElement} from '../../decorator.js';
 import compentStyle from './integration-app-bar.css?inline';
 
 /**
+ * @slot apps - Application buttons; slotted elements are normalized to a uniform width
  * @experimental
  */
 @customElement('obc-integration-app-bar')

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

@@ -30,7 +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
- * @slot vessel-integration-menu - Modal that will appear achored below the fleet/vessel button. Typically an obc-integration-vessel-menu
  * @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

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

@@ -16,18 +16,18 @@ import {property} from 'lit/decorators.js';
  *
  * @fires home-button-clicked - Fired when the home button is clicked
  * @fires dimming-button-clicked - Fired when the dimming button is clicked
- * @fires notification-button-clicked - Firaed when the notification button is clicked
+ * @fires notification-button-clicked - Fired when the notification button is clicked
  * @fires user-button-clicked - Fired when the user button is clicked
  * @fires system-button-clicked - Fired when the system button is clicked
  *
- * @slot vessel-selector
- * @slot status-label-1
- * @slot status-icon-1
- * @slot status-label-2
- * @slot status-icon-2
- * @slot status-label-3
- * @slot status-icon-3
- * @slot clock
+ * @slot vessel-selector - Vessel selector content
+ * @slot status-label-1 - Label for the first status field
+ * @slot status-icon-1 - Icon for the first status field
+ * @slot status-label-2 - Label for the second status field
+ * @slot status-icon-2 - Icon for the second status field
+ * @slot status-label-3 - Label for the third status field
+ * @slot status-icon-3 - Icon for the third status field
+ * @slot clock - Custom clock content, rendered when `showClock` is true
  * @experimental
  */
 @customElement('obc-integration-bar-dropdown')

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

@@ -13,6 +13,7 @@ export interface IntegrationFleetButtonReadout {
 }
 
 /**
+ * @slot alert-topic-icon - Icon shown alongside the alert topic
  * @experimental
  */
 @customElement('obc-integration-fleet-button')

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

@@ -4,6 +4,7 @@ import compentStyle from './integration-tabs.css?inline';
 import {property} from 'lit/decorators.js';
 
 /**
+ * @slot - Tab label content
  * @experimental
  */
 @customElement('obc-integration-tabs')

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

@@ -96,7 +96,6 @@ function normalizeAngle(a: number): number {
  * - Enable `zoomToFitArc` to enlarge the arc to fill the viewport.
  * - For a full‑circle compass, use `<obc-compass>` instead.
  *
- * @fires None
  * @stable
  */
 @customElement('obc-compass-sector')

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

@@ -0,0 +1,99 @@
+import {describe, it, expect} from 'vitest';
+import type {SVGTemplateResult} from 'lit';
+import {tickmark, TickmarkType, TickmarkStyle} from './tickmark.js';
+
+/**
+ * Collect every numeric interpolated value from a `tickmark()` result without
+ * rendering it. `tickmark()` returns Lit `SVGTemplateResult`s (or an array of
+ * them); the interpolated `x`/`y`/coordinate values live on `.values`. This
+ * lets us assert the geometry is finite in a plain Node environment — no DOM.
+ */
+function numericValues(
+  result: SVGTemplateResult | SVGTemplateResult[]
+): number[] {
+  const templates = Array.isArray(result) ? result : [result];
+  const numbers: number[] = [];
+  for (const template of templates) {
+    for (const value of template.values) {
+      if (typeof value === 'number') {
+        numbers.push(value);
+      }
+    }
+  }
+  return numbers;
+}
+
+describe('tickmark label positioning', () => {
+  // On first paint the element is not laid out yet, so obc-watch computes a
+  // scale of 0. A `textOnly` tick still renders a <text>, and dividing by a
+  // zero scale used to yield x/y of ±Infinity — which the browser rejects with
+  // `<text> attribute x: Expected length, "-Infinity"` (issue #1032).
+  it('keeps the zero-value textOnly label finite when the scale is 0', () => {
+    const result = tickmark(-90, {
+      size: TickmarkType.textOnly,
+      style: TickmarkStyle.regular,
+      scale: 0,
+      text: '0',
+      inside: false,
+      textRadius: 184,
+      maxDigits: 1,
+    });
+
+    for (const value of numericValues(result)) {
+      expect(Number.isFinite(value)).toBe(true);
+    }
+  });
+
+  it('keeps labelled ticks finite for a zero scale (inside and outside)', () => {
+    for (const inside of [false, true]) {
+      const result = tickmark(45, {
+        size: TickmarkType.primary,
+        style: TickmarkStyle.regular,
+        scale: 0,
+        text: '50',
+        inside,
+        textRadius: 184,
+        maxDigits: 2,
+      });
+
+      for (const value of numericValues(result)) {
+        expect(Number.isFinite(value)).toBe(true);
+      }
+    }
+  });
+
+  it('keeps rotated labels finite for a zero scale', () => {
+    const result = tickmark(120, {
+      size: TickmarkType.primary,
+      style: TickmarkStyle.regular,
+      scale: 0,
+      text: '12',
+      inside: false,
+      textRadius: 184,
+      rotation: 120,
+      maxDigits: 2,
+    });
+
+    for (const value of numericValues(result)) {
+      expect(Number.isFinite(value)).toBe(true);
+    }
+  });
+
+  it('does not distort geometry for a valid scale', () => {
+    // A settled scale must be untouched: the outside zero tick at -90° sits on
+    // the negative-x axis, so its x is finite and negative and y is ~0.
+    const result = tickmark(-90, {
+      size: TickmarkType.textOnly,
+      style: TickmarkStyle.regular,
+      scale: 1,
+      text: '0',
+      inside: false,
+      textRadius: 184,
+      maxDigits: 1,
+    });
+
+    const numbers = numericValues(result);
+    expect(numbers.every(Number.isFinite)).toBe(true);
+    expect(numbers.some((n) => n < -100)).toBe(true);
+  });
+});

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

@@ -64,14 +64,15 @@ export function tickmark(
     endLabelsMaxMin?: boolean;
   }
 ): SVGTemplateResult | SVGTemplateResult[] {
-  // check if scale is not infinite
-  if (scale === Infinity || scale < 0) {
-    throw new Error('Tick scale is not valid');
-  }
+  // Before layout settles the caller can pass a scale of 0 (or a non-finite
+  // value). Label offsets are computed as `px / scale`, so a 0 scale would emit
+  // ±Infinity coordinates that the browser rejects. Fall back to a 1:1 scale
+  // until a real one is available (issue #1032).
+  const safeScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
   const rOff = radiusOffset;
   let innerRadius: number;
   let outerRadius: number;
-  textRadius = textRadius + (3 / scale + 3) * (inside ? -1 : 1);
+  textRadius = textRadius + (3 / safeScale + 3) * (inside ? -1 : 1);
   const rad = (angle * Math.PI) / 180;
   if (size === TickmarkType.primary) {
     innerRadius = 328 / 2 + rOff;
@@ -90,7 +91,13 @@ export function tickmark(
     outerRadius = 336 / 2 + rOff;
   } else {
     return [
-      textSvg(text ?? '', {angle, inside, scale, textRadius, endLabelsMaxMin}),
+      textSvg(text ?? '', {
+        angle,
+        inside,
+        scale: safeScale,
+        textRadius,
+        endLabelsMaxMin,
+      }),
     ];
   }
 
@@ -121,11 +128,17 @@ export function tickmark(
     if (rotation === undefined) {
       return [
         tick,
-        textSvg(text, {angle, inside, scale, textRadius, endLabelsMaxMin}),
+        textSvg(text, {
+          angle,
+          inside,
+          scale: safeScale,
+          textRadius,
+          endLabelsMaxMin,
+        }),
       ];
     } else {
       const newRadius =
-        textRadius + ((4 / scale + 5) * (inside ? -1 : 1) * maxDigits) / 2;
+        textRadius + ((4 / safeScale + 5) * (inside ? -1 : 1) * maxDigits) / 2;
       const textX = Math.sin(rad) * newRadius;
       const textY = -Math.cos(rad) * newRadius;
       return [

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

@@ -690,8 +690,13 @@ export class ObcWatch extends LitElement {
       }
     }
     const scale = Math.min(clientWidth / width, clientHeight / height);
-    if (scale === Infinity || scale < 0) {
-      throw new Error('Watch scale is not valid');
+    // On first paint the element and its parent can both still be zero-sized, so
+    // the scale is 0 (or non-finite). That value flows into `px / scale` label
+    // math and yields ±Infinity coordinates the browser rejects. Fall back to a
+    // 1:1 scale until a real size is available; the ResizeController re-renders
+    // with the true scale once the element is laid out (issue #1032).
+    if (!Number.isFinite(scale) || scale <= 0) {
+      return 1;
     }
     return scale;
   }

package/src/navigation-instruments/wind-propulsion/wind-propulsion.ts

@@ -58,7 +58,6 @@ export enum WindPropulsionPriorityElement {
  *   proportionally (default 100).
  * - For a full-circle compass, use `<obc-compass>` instead.
  *
- * @fires None
  * @beta
  */
 @customElement('obc-wind-propulsion')

package/src/pages/alert-detail-page/alert-detail-page.ts

@@ -30,6 +30,13 @@ export enum AlertDetailPageType {
 
 @localized()
 /**
+ * @slot note-label - Label for the note section, rendered when `hasNote` is true
+ * @slot note - Note content, rendered when `hasNote` is true
+ * @slot readout-graph-title - Title for the readout graph, rendered when `hasReadoutGraph` is true
+ * @slot readout-graph - Readout graph content, rendered when `hasReadoutGraph` is true
+ * @slot action - Action controls, rendered when `hasActions` is true
+ * @slot <detail>-label - Overrides the label of the `<detail>` field (e.g. `tagId-label`, `category-label`, `time-label`)
+ * @slot <detail>-value - Overrides the value of the `<detail>` field (e.g. `tagId-value`, `category-value`, `time-value`)
  * @beta
  */
 @customElement('obc-alert-detail-page')