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

package/src/automation/automation-tank/automation-tank.ts

@@ -94,25 +94,6 @@ export enum TankChartMode {
   graphAndBar = 'graph-and-bar',
 }
 
-/**
- * A single detail row rendered in the tank's `readout` rich list (below the
- * main percent / value block, separated by a divider). Each row is rendered
- * as `<label>` on the left and `<value><degree?><percent?><unit>` on the
- * right, all on a single line.
- */
-export interface TankReadoutItem {
-  /** Left-aligned label text (e.g. `Temperature`). */
-  label: string;
-  /** Numeric value, formatted with the tank's `percentFractionDigits`. */
-  value: number;
-  /** Append a `°` glyph directly after the value with no gap. */
-  hasDegree?: boolean;
-  /** Append a `%` glyph directly after the value with no gap. */
-  hasPercentage?: boolean;
-  /** Unit text (e.g. `C`, `Pa`, `m/s`). Rendered after the value/glyph. */
-  unit: string;
-}
-
 /**
  *
  *
@@ -122,7 +103,11 @@ export interface TankReadoutItem {
  * @slot max-value - Content for the capacity value.
  * @slot unit - Content for the unit of measurement.
  * @slot current-value - Content for the current level value.
- * @slot rich - Content for additional detail rows.
+ * @slot rich - Detail rows below the main readout, shown in the regular
+ *   (non-compact, non-static) layout. Slot an `<obc-readout-list>` of
+ *   `<obc-readout-list-item>` rows — it owns the row typography and cross-row
+ *   column alignment; the tank renders a divider above it automatically when
+ *   the slot is filled.
  * @slot alert-icon - Custom icon for the alert frame.
  * @slot alert-label - Label for the alert frame.
  * @slot alert-timer - Timer for the alert frame.
@@ -249,21 +234,6 @@ export class ObcAutomationTank extends LitElement {
    */
   @property({type: Number}) percentFractionDigits: number = 0;
 
-  /**
-   * Rich detail rows shown below the main percent/value block in the regular
-   * (non-compact, non-static) layout, separated by a divider. When empty (the
-   * default), nothing is rendered — neither the divider nor the list. In
-   * vertical orientation the chart cell shrinks to make room; in horizontal
-   * orientation the readout column already has reserved whitespace so the
-   * chart is unaffected.
-   *
-   * Values are formatted using `percentFractionDigits`. Consumers that need
-   * full control over the markup can replace the entire fallback by slotting
-   * arbitrary content into `slot="rich"` (note: this is a different name from
-   * the existing `slot="readout"` which replaces the whole readout block).
-   */
-  @property({type: Array, attribute: false}) readout: TankReadoutItem[] = [];
-
   /**
    * Enum-driven badges rendered inside the `badges` cell. Mirrors the API
    * introduced for `ObcAbstractAutomationButton` in PR #839 (#829). When set
@@ -297,6 +267,13 @@ export class ObcAutomationTank extends LitElement {
    */
   @state() private _hasBadges = false;
   @state() private _hasTagSlot = false;
+  /**
+   * Tracks whether the `rich` slot has assigned content, so the regular
+   * (non-compact) layout only draws the rich divider when a consumer has
+   * slotted detail rows (canonically an `<obc-readout-list>`). Mirrors
+   * `_hasBadges` / `_hasTagSlot`.
+   */
+  @state() private _hasRichSlot = false;
   private _chartResizeObserver?: ResizeObserver;
   private _observedCell?: Element;
 
@@ -396,6 +373,17 @@ export class ObcAutomationTank extends LitElement {
       );
   }
 
+  private _onRichSlotChange(e: Event): void {
+    const slot = e.target as HTMLSlotElement;
+    this._hasRichSlot = slot
+      .assignedNodes({flatten: true})
+      .some(
+        (n) =>
+          n.nodeType === Node.ELEMENT_NODE ||
+          (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim())
+      );
+  }
+
   override disconnectedCallback(): void {
     super.disconnectedCallback();
     this._chartResizeObserver?.disconnect();
@@ -756,36 +744,8 @@ export class ObcAutomationTank extends LitElement {
                     <slot class="unit" name="unit">m<sup>3</sup></slot>
                   </div>
                 </div>
-                <slot name="rich">
-                  ${this.readout.length > 0
-                    ? html`
-                        <div class="rich-divider"></div>
-                        <div class="rich">
-                          ${this.readout.map(
-                            (row) => html`
-                              <div class="rich-row">
-                                <span class="rich-label">${row.label}</span>
-                                <span class="rich-value"
-                                  >${row.value.toFixed(
-                                    this.percentFractionDigits
-                                  )}</span
-                                >
-                                <span class="rich-suffix"
-                                  >${row.hasDegree
-                                    ? html`<span class="rich-glyph">°</span>`
-                                    : nothing}${row.hasPercentage
-                                    ? html`<span class="rich-glyph">%</span>`
-                                    : nothing}<span class="rich-unit"
-                                    >${row.unit}</span
-                                  ></span
-                                >
-                              </div>
-                            `
-                          )}
-                        </div>
-                      `
-                    : nothing}
-                </slot>
+                <div class="rich-divider" ?hidden=${!this._hasRichSlot}></div>
+                <slot name="rich" @slotchange=${this._onRichSlotChange}></slot>
               </slot>
             </div>
           `;

package/src/building-blocks/alert-list/alert-list.ts

@@ -7,6 +7,10 @@ import {ObcScrollbar} from '../../components/scrollbar/scrollbar.js';
 import {ObcAlertMenuItem} from '../../components/alert-menu-item/alert-menu-item.js';
 
 /**
+ * @slot - Default slot for the alert list items.
+ * @slot empty-icon - Icon shown when the list is empty.
+ * @slot empty-title - Title shown when the list is empty.
+ * @slot empty-description - Description shown when the list is empty.
  * @stable
  */
 @customElement('obc-alert-list')

package/src/building-blocks/bar-horizontal/bar-horizontal.ts

@@ -63,6 +63,8 @@ export {
  * Set `priority` to `Priority.enhanced` to use the blue/enhanced color palette
  * for bar fill and setpoint instead of the default gray/regular palette
  * (default: `Priority.regular`).
+ *
+ * @fires scale-dimensions-changed {CustomEvent} Fired when the scale's computed layout thickness changes; a parent chart listens for this to reserve space for the scale. Bubbles and is composed.
  * @beta
  */
 @customElement('obc-bar-horizontal')

package/src/building-blocks/bar-vertical/bar-vertical.ts

@@ -61,6 +61,8 @@ export {
  * Set `priority` to `Priority.enhanced` to use the blue/enhanced color palette
  * for bar fill and setpoint instead of the default gray/regular palette
  * (default: `Priority.regular`).
+ *
+ * @fires scale-dimensions-changed {CustomEvent} Fired when the scale's computed layout thickness changes; a parent chart listens for this to reserve space for the scale. Bubbles and is composed.
  * @beta
  */
 @customElement('obc-bar-vertical')

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

@@ -43,8 +43,7 @@ import {
  * ## Slots
  * | Slot Name      | Renders When...                      | Purpose                                                      |
  * | -------------- | ------------------------------------ | ------------------------------------------------------------ |
- * | primary-icon   | Always (unless overridden)           | Main advice icon (default: `<obi-notification-advice-active>`) or custom icon. |
- * | secondary-icon | Only when `type="application"`       | Additional icon for application-type advice messages.         |
+ * | primary-icon   | Only when `type="application"`       | Custom main icon (the built-in advice icon is used otherwise). |
  * | title          | Always                               | Title or heading of the advice message.                      |
  * | description    | Always                               | Detailed advice or message text.                             |
  * | time           | If `hasTimestamp` is true            | Timestamp label (e.g., "09:12:46").                          |
@@ -75,8 +74,7 @@ import {
  * </obc-advice-floating-item>
  * ```
  *
- * @slot primary-icon - Main advice icon (default: `<obi-notification-advice-active>`), or custom icon.
- * @slot secondary-icon - Additional icon for application-type advice messages.
+ * @slot primary-icon - Custom main icon, projected into the child only when `type="application"` (the built-in advice icon is used otherwise).
  * @slot title - Title or heading of the advice message.
  * @slot description - Detailed advice or message text.
  * @slot time - Timestamp label (e.g., "09:12:46").

package/src/components/advice-message-item/advice-message-item.ts

@@ -62,17 +62,12 @@ export enum ObcAdviceMessageItemSize {
  * ---
  *
  * ### Slots
- * | Slot Name         | Renders When...                                 | Purpose                                                      |
- * |-------------------|------------------------------------------------|--------------------------------------------------------------|
- * | `primary-icon`    | Always                                          | Main icon representing the advice (default: advice icon).    |
- * | `secondary-icon`  | `hasSecondaryIcon` is true                     | Optional overlay icon for additional status or category.      |
- * | `title`           | `hasTitle` is true and `title` is set          | Title or heading of the advice message.                      |
- * | `description`     | `hasDescription` is true and `description` set | Detailed message text.                                       |
- * | `time`            | `hasTimestamp` is true and `time` is set       | Primary timestamp (e.g., time of advice).                    |
- * | `time-secondary`  | `hasTimestamp2` is true and `timeSecondary` set| Secondary timestamp (e.g., duration, relative time).         |
- * | `action-text`     | `type="with-button"`                           | Label for the primary action button.                         |
- * | `action-icon`     | `type="with-icon-button"`                      | Icon for the action button (default: close icon).            |
- * | `empty`           | `type="inactive"` or `empty` is true           | Text to display in the empty/inactive state.                 |
+ * | Slot Name         | Renders When...            | Purpose                                                  |
+ * |-------------------|----------------------------|----------------------------------------------------------|
+ * | `secondary-icon`  | `hasSecondaryIcon` is true | Optional overlay icon for additional status or category. |
+ *
+ * All other content (title, description, timestamps, action label/icon, empty-state
+ * text) is driven by properties and rendered internally; it is not exposed as slots.
  *
  * ---
  *
@@ -104,15 +99,7 @@ export enum ObcAdviceMessageItemSize {
  *
  * In this example, the advice message displays a title, description, timestamp, and a "View" action button.
  *
- * @slot primary-icon - Main icon representing the advice (always present)
  * @slot secondary-icon - Optional overlay icon for additional status/category (shown when `hasSecondaryIcon` is true)
- * @slot title - Title or heading of the advice (shown when `hasTitle` is true)
- * @slot description - Detailed message text (shown when `hasDescription` is true)
- * @slot time - Primary timestamp (shown when `hasTimestamp` is true)
- * @slot time-secondary - Secondary timestamp (shown when `hasTimestamp2` is true)
- * @slot action-text - Label for the action button (when `type="with-button"`)
- * @slot action-icon - Icon for the action button (when `type="with-icon-button"`)
- * @slot empty - Text to display in the empty/inactive state (when `type="inactive"` or `empty` is true)
  * @fires message-click {CustomEvent<void>} When the main message area is clicked
  * @fires action-click {CustomEvent<void>} When the action button (text or icon) is clicked
  * @beta

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

@@ -12,6 +12,18 @@ import {
 } from '../floating-item/floating-item.js';
 
 /**
+ * `<obc-alert-floating-item>` – A floating alert message that overlays the interface with a built-in alert icon.
+ *
+ * @slot primary-icon - Custom main icon, projected into the child only when `type="application"` (the built-in alert icon is used otherwise).
+ * @slot title - Title or heading of the alert message.
+ * @slot description - Detailed message text.
+ * @slot time - Timestamp label (e.g., "09:12:46").
+ * @slot day - Day label (e.g., "Yesterday").
+ * @slot action - Primary action button label/content.
+ * @slot action2 - Secondary action button label/content.
+ * @fires action-click {CustomEvent} When the primary action button is clicked.
+ * @fires action2-click {CustomEvent} When the secondary action button is clicked.
+ * @fires dismiss-click {CustomEvent} When the alert message is dismissed.
  * @stable
  */
 @customElement('obc-alert-floating-item')

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

@@ -50,15 +50,9 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
  * | Slot Name                        | Renders When...                  | Purpose                                                        |
  * |----------------------------------|----------------------------------|----------------------------------------------------------------|
  * | (default)                        | Always                           | Place one or more `<obc-alert-menu-item>` elements as alert rows. |
- * | empty-unacked-title              | Unacked tab, when empty          | Custom title for empty unacknowledged alerts.                  |
- * | empty-unacked-description        | Unacked tab, when empty          | Custom description for empty unacknowledged alerts.            |
- * | empty-unacked-icon               | Unacked tab, when empty          | Custom icon for empty unacknowledged alerts.                   |
- * | empty-all-title                  | Active tab, when empty    | Custom title for empty active alerts.                          |
- * | empty-all-description            | Active tab, when empty    | Custom description for empty active alerts.                    |
- * | empty-all-icon                   | Active tab, when empty    | Custom icon for empty active alerts.                           |
- * | empty-shelved-title              | Shelved tab, when empty          | Custom title for empty shelved alerts.                         |
- * | empty-shelved-description        | Shelved tab, when empty          | Custom description for empty shelved alerts.                   |
- * | empty-shelved-icon               | Shelved tab, when empty          | Custom icon for empty shelved alerts.                          |
+ * | empty-<tab>-title                | Selected tab is empty            | Custom title for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |
+ * | empty-<tab>-description          | Selected tab is empty            | Custom description for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |
+ * | empty-<tab>-icon                 | Selected tab is empty            | Custom icon for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |
  *
  * ### Properties
  * - `hasShelved` (boolean): If true, displays the "Shelved" tab and enables shelving support. Default: false.
@@ -68,7 +62,6 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
  *
  * ### Events
  * - **ack-all-visible-click** – Fired when the "ACK visible" button is clicked. The event detail includes the list of visible alert elements and the current tab name.
- * - **alert-list-click** – Fired when the "Alerts" navigation button is clicked.
  * - **silence-click** – Fired when the "Silence" button is clicked.
  * - **go-to-alert-list-click** – Fired when the "Alerts" navigation button is clicked.
  *
@@ -92,17 +85,10 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
  * ```
  *
  * @slot - The alerts items as ObcAlertMenuItem
- * @slot empty-unacked-title - Custom title for empty unacknowledged alerts (Unacked tab)
- * @slot empty-unacked-description - Custom description for empty unacknowledged alerts (Unacked tab)
- * @slot empty-unacked-icon - Custom icon for empty unacknowledged alerts (Unacked tab)
- * @slot empty-all-title - Custom title for empty active alerts (Active tab)
- * @slot empty-all-description - Custom description for empty active alerts (Active tab)
- * @slot empty-all-icon - Custom icon for empty active alerts (Active tab)
- * @slot empty-shelved-title - Custom title for empty shelved alerts (Shelved tab)
- * @slot empty-shelved-description - Custom description for empty shelved alerts (Shelved tab)
- * @slot empty-shelved-icon - Custom icon for empty shelved alerts (Shelved tab)
+ * @slot empty-<tab>-title - Custom empty-state title for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)
+ * @slot empty-<tab>-description - Custom empty-state description for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)
+ * @slot empty-<tab>-icon - Custom empty-state icon for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)
  * @fires ack-all-visible-click {ObcAckAllVisibleClickEvent} - Fired when the ack all visible button is clicked
- * @fires alert-list-click {CustomEvent} - Fired when the alert list button is clicked
  * @fires silence-click {CustomEvent} - Fired when the silence button is clicked
  * @fires go-to-alert-list-click {CustomEvent} - Fired when the go to alert list button is clicked
  */

package/src/components/alert-menu-item/alert-menu-item.ts

@@ -65,6 +65,8 @@ export enum ObcAlertMenuItemActionState {
  * | Slot Name     | Renders When...                | Purpose                                              |
  * |---------------|-------------------------------|------------------------------------------------------|
  * | alert-icon    | Always                        | Main alert icon representing the alert type.         |
+ * | title         | Always                        | Title content; falls back to the `title` property.   |
+ * | description   | Always                        | Description content; falls back to the `description` property. |
  * | icon          | If `hasIcon` is true          | Secondary icon (e.g., system/source of alert).       |
  *
  * ### Events
@@ -94,6 +96,8 @@ export enum ObcAlertMenuItemActionState {
  * ```
  *
  * @slot alert-icon - The main alert icon representing the alert type.
+ * @slot title - Title content; falls back to the `title` property when empty.
+ * @slot description - Description content; falls back to the `description` property when empty.
  * @slot icon - Optional secondary icon (e.g., source/system).
  *
  * @fires ack-click {CustomEvent<void>} Fired when the ACK action button is clicked.

package/src/components/chat-message/chat-message.ts

@@ -12,6 +12,9 @@ export enum ObcChatMessagePosition {
 }
 
 /**
+ * `<obc-chat-message>` – A single chat message bubble with optional name and date header.
+ *
+ * @slot - The message content (body of the chat bubble).
  * @stable
  */
 @customElement('obc-chat-message')

package/src/components/elevated-card-radio/elevated-card-radio.ts

@@ -38,10 +38,8 @@ import {ObcRadio} from '../radio/radio.js';
  * ---
  *
  * ### Slots
- * | Slot Name     | Renders When... | Purpose                                 |
- * |-------------- |-----------------|-----------------------------------------|
- * | leading-icon  | Always          | Contains the radio button itself.       |
- * | label         | Always          | Displays the label text for the option. |
+ * This component exposes no slots. The radio input and its label are rendered
+ * internally from the `label`, `value`, `checked`, and related properties.
  *
  * ---
  *
@@ -82,8 +80,6 @@ import {ObcRadio} from '../radio/radio.js';
  * ```
  * In this example, two card radios form a group; only one can be selected at a time.
  *
- * @slot leading-icon - Contains the radio button input.
- * @slot label - Displays the label text for the radio option.
  * @fires change - Fired when the radio is changed.
  * @stable
  */

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')