@oicl/openbridge-webcomponents-svelte 2.0.0-next.15 → 2.0.0-next.150

package/dist/components/split-button/ObcSplitButton.svelte

@@ -3,7 +3,7 @@
     export type {ObcSplitButtonClickEvent, ObcSplitButtonChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/split-button/split-button.js';
 export type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
       import '@oicl/openbridge-webcomponents/dist/components/split-button/split-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcSplitButtonClickEvent, ObcSplitButtonChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/split-button/split-button.js';
 import type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
       import type { Snippet } from 'svelte';
@@ -11,48 +11,46 @@ import type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbr
       export interface Props {
      class?: string;
      style?: string;
-      /** The label displayed on the main (primary) button. */
-label?: string;
-      /** Whether the main button should show a leading icon slot.
-When true, content in the `icon` slot is rendered before the label. */
-hasIcon?: boolean;
-      /** Array of menu options for the dropdown.
-Each option should be a `ContextMenuOption` object.
-For grouped or multi-column menus, use `columnGroups` instead. */
-options?: ContextMenuOption[];
-      /** Array of currently selected option values in the dropdown.
-Used to control the checked/selected state of menu items. */
-selectedValues?: string[];
-      /** The variant type of context menu to display in the dropdown.
-Accepts values from the `ContextMenuType` enum (e.g., 'regular', 'checkboxes', 'flyout', 'multi', 'multiWithSubtitles'). */
-menuType?: ContextMenuType;
-      /** Whether multiple selections are allowed in the dropdown.
-If true, users can select more than one option (e.g., for checkboxes or multi-column). */
-multiSelect?: boolean | undefined;
-      /** Allows single selection per group/column (matches context-menu-input).
-When true, only one option can be selected per group/column. */
-selectPerGroup?: boolean | undefined;
-      /** Number of items per column in multi-column layouts.
-Used when `menuType` is 'multi' or 'multiWithSubtitles'. */
-itemsPerColumn?: number;
-      /** Whether to show a title bar with close button in the dropdown.
-When true, a title bar appears at the top of the menu. */
-hasTitleBar?: boolean;
-      /** Title text for the dropdown menu.
-Displayed in the title bar when `hasTitleBar` is true. */
-menuTitle?: string;
-      /** Whether the split button should fill the full width of its container.
-When true, the component stretches horizontally. */
-fullWidth?: boolean;
-      /** Whether both parts of the button are disabled.
-When true, disables both the primary and dropdown buttons. */
-disabled?: boolean;
-      /** Open context menu dropdown above (`true`) or below (`false`) the button.
-Useful for placement near the bottom of the viewport. */
-openTop?: boolean;
-      /** Array of column group definitions for multi-column/grouped menus.
-Use instead of `options` for grouped or subtitle layouts. */
-columnGroups?: ColumnGroup[]
+     /** The label displayed on the main (primary) button. */
+     label?: string;
+     /** Whether the main button should show a leading icon slot. When true, content in the `icon` slot is rendered before the label. */
+     hasIcon?: boolean;
+     /** Array of menu options for the dropdown. Each option should be a `ContextMenuOption` object. For grouped or multi-column menus, use `columnGroups` instead. */
+     options?: ContextMenuOption[];
+     /** Array of currently selected option values in the dropdown. Used to control the checked/selected state of menu items. */
+     selectedValues?: string[];
+     /** The variant type of context menu to display in the dropdown. Accepts values from the `ContextMenuType` enum (e.g., 'regular', 'checkboxes', 'flyout', 'multi', 'multiWithSubtitles'). */
+     menuType?: ContextMenuType;
+     /** Whether multiple selections are allowed in the dropdown. If true, users can select more than one option (e.g., for checkboxes or multi-column). */
+     multiSelect?: boolean | undefined;
+     /** Allows single selection per group/column (matches context-menu-input). When true, only one option can be selected per group/column. */
+     selectPerGroup?: boolean | undefined;
+     /**
+      * Number of items per column in multi-column layouts. Used when `menuType` is 'multi' or 'multiWithSubtitles'.
+      *
+      * Available when `menuType in [Multi, MultiWithSubtitles]`.
+      */
+     itemsPerColumn?: number;
+     /** Whether to show a title bar with close button in the dropdown. When true, a title bar appears at the top of the menu. */
+     hasTitleBar?: boolean;
+     /**
+      * Title text for the dropdown menu. Displayed in the title bar when `hasTitleBar` is true.
+      *
+      * Available when `hasTitleBar==true`.
+      */
+     menuTitle?: string;
+     /** Whether the split button should fill the full width of its container. When true, the component stretches horizontally. */
+     fullWidth?: boolean;
+     /** Whether both parts of the button are disabled. When true, disables both the primary and dropdown buttons. */
+     disabled?: boolean;
+     /** Open context menu dropdown above (`true`) or below (`false`) the button. Useful for placement near the bottom of the viewport. */
+     openTop?: boolean;
+     /**
+      * Array of column group definitions for multi-column/grouped menus. Use instead of `options` for grouped or subtitle layouts.
+      *
+      * Available when `menuType==MultiWithSubtitles`.
+      */
+     columnGroups?: ColumnGroup[]
    }
       export interface Events {
     onClick?: (event: ObcSplitButtonClickEvent) => void;
@@ -68,8 +66,7 @@ columnGroups?: ColumnGroup[]
     use:setProperties={props}
     class={className}
     style={style}
-    onclick={onClick}
-   onchange={onChange} >
+    use:forwardEvents={{'click': onClick, 'change': onChange}} >
       
       {#if icon}
         <div slot="icon">

package/dist/components/split-button/ObcSplitButton.svelte.d.ts

@@ -7,45 +7,43 @@ export interface Props {
     style?: string;
     /** The label displayed on the main (primary) button. */
     label?: string;
-    /** Whether the main button should show a leading icon slot.
-When true, content in the `icon` slot is rendered before the label. */
+    /** Whether the main button should show a leading icon slot. When true, content in the `icon` slot is rendered before the label. */
     hasIcon?: boolean;
-    /** Array of menu options for the dropdown.
-Each option should be a `ContextMenuOption` object.
-For grouped or multi-column menus, use `columnGroups` instead. */
+    /** Array of menu options for the dropdown. Each option should be a `ContextMenuOption` object. For grouped or multi-column menus, use `columnGroups` instead. */
     options?: ContextMenuOption[];
-    /** Array of currently selected option values in the dropdown.
-Used to control the checked/selected state of menu items. */
+    /** Array of currently selected option values in the dropdown. Used to control the checked/selected state of menu items. */
     selectedValues?: string[];
-    /** The variant type of context menu to display in the dropdown.
-Accepts values from the `ContextMenuType` enum (e.g., 'regular', 'checkboxes', 'flyout', 'multi', 'multiWithSubtitles'). */
+    /** The variant type of context menu to display in the dropdown. Accepts values from the `ContextMenuType` enum (e.g., 'regular', 'checkboxes', 'flyout', 'multi', 'multiWithSubtitles'). */
     menuType?: ContextMenuType;
-    /** Whether multiple selections are allowed in the dropdown.
-If true, users can select more than one option (e.g., for checkboxes or multi-column). */
+    /** Whether multiple selections are allowed in the dropdown. If true, users can select more than one option (e.g., for checkboxes or multi-column). */
     multiSelect?: boolean | undefined;
-    /** Allows single selection per group/column (matches context-menu-input).
-When true, only one option can be selected per group/column. */
+    /** Allows single selection per group/column (matches context-menu-input). When true, only one option can be selected per group/column. */
     selectPerGroup?: boolean | undefined;
-    /** Number of items per column in multi-column layouts.
-Used when `menuType` is 'multi' or 'multiWithSubtitles'. */
+    /**
+     * Number of items per column in multi-column layouts. Used when `menuType` is 'multi' or 'multiWithSubtitles'.
+     *
+     * Available when `menuType in [Multi, MultiWithSubtitles]`.
+     */
     itemsPerColumn?: number;
-    /** Whether to show a title bar with close button in the dropdown.
-When true, a title bar appears at the top of the menu. */
+    /** Whether to show a title bar with close button in the dropdown. When true, a title bar appears at the top of the menu. */
     hasTitleBar?: boolean;
-    /** Title text for the dropdown menu.
-Displayed in the title bar when `hasTitleBar` is true. */
+    /**
+     * Title text for the dropdown menu. Displayed in the title bar when `hasTitleBar` is true.
+     *
+     * Available when `hasTitleBar==true`.
+     */
     menuTitle?: string;
-    /** Whether the split button should fill the full width of its container.
-When true, the component stretches horizontally. */
+    /** Whether the split button should fill the full width of its container. When true, the component stretches horizontally. */
     fullWidth?: boolean;
-    /** Whether both parts of the button are disabled.
-When true, disables both the primary and dropdown buttons. */
+    /** Whether both parts of the button are disabled. When true, disables both the primary and dropdown buttons. */
     disabled?: boolean;
-    /** Open context menu dropdown above (`true`) or below (`false`) the button.
-Useful for placement near the bottom of the viewport. */
+    /** Open context menu dropdown above (`true`) or below (`false`) the button. Useful for placement near the bottom of the viewport. */
     openTop?: boolean;
-    /** Array of column group definitions for multi-column/grouped menus.
-Use instead of `options` for grouped or subtitle layouts. */
+    /**
+     * Array of column group definitions for multi-column/grouped menus. Use instead of `options` for grouped or subtitle layouts.
+     *
+     * Available when `menuType==MultiWithSubtitles`.
+     */
     columnGroups?: ColumnGroup[];
 }
 export interface Events {

package/dist/components/start-stop-switch/ObcStartStopSwitch.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcStartStopSwitchChangeEvent, StartStopSwitchVariant, StartStopSwitchSize} from '@oicl/openbridge-webcomponents/dist/components/start-stop-switch/start-stop-switch.js';
       import '@oicl/openbridge-webcomponents/dist/components/start-stop-switch/start-stop-switch.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcStartStopSwitchChangeEvent, StartStopSwitchVariant, StartStopSwitchSize} from '@oicl/openbridge-webcomponents/dist/components/start-stop-switch/start-stop-switch.js';
       import type { Snippet } from 'svelte';
 
@@ -81,7 +81,7 @@ description?: string
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
       {#if checkedStateIcon}
         <div slot="checked-state-icon">

package/dist/components/status-indicator/ObcStatusIndicator.svelte

@@ -26,7 +26,7 @@
     style={style}
      >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if children}
+        {@render children()}
+      {/if}
     </obc-status-indicator>

package/dist/components/stepper-box/ObcStepperBox.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcStepperBoxType} from '@oicl/openbridge-webcomponents/dist/components/stepper-box/stepper-box.js';
       import '@oicl/openbridge-webcomponents/dist/components/stepper-box/stepper-box.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcStepperBoxType} from '@oicl/openbridge-webcomponents/dist/components/stepper-box/stepper-box.js';
       import type { Snippet } from 'svelte';
 
@@ -16,43 +16,46 @@
 
 Changing this property updates the icons and directionality of the stepper buttons. */
 type?: ObcStepperBoxType;
-      /** If true, displays the `helper-text` slot content below the control for additional guidance or status. */
-hasHelperText?: boolean;
-      /** If true, the stepper box is disabled and the buttons are not clickable. */
-disabled?: boolean
+     /** If true, the stepper box is disabled and the buttons are not clickable. */
+     disabled?: boolean;
+     /** The current numeric value displayed in the field. Pass `null` to clear the value and show the `placeholder` instead. */
+     value?: number | null;
+     /** Optional lower bound; decrement button disables at this value. */
+     min?: number | undefined;
+     /** Optional upper bound; increment button disables at this value. */
+     max?: number | undefined;
+     /** Increment step size (default 1). */
+     stepUp?: number;
+     /** Decrement step size (default 1). */
+     stepDown?: number;
+     /** Unit text displayed inside the field. */
+     unit?: string;
+     /** Helper text displayed below the stepper. When set, the helper text is shown. */
+     helperText?: string;
+     /** Placeholder text shown when the input is empty. */
+     placeholder?: string;
+     /** If true, the input is non-editable; programmatic value changes still apply. */
+     readonly?: boolean
    }
       export interface Events {
-    onDown?: (event: CustomEvent<void>) => void;
-    onUp?: (event: CustomEvent<void>) => void
+    onDown?: (event: CustomEvent<{value: number}>) => void;
+    onUp?: (event: CustomEvent<{value: number}>) => void;
+    onInput?: (event: CustomEvent<{value: string}>) => void;
+    onChange?: (event: CustomEvent<{value: number | null}>) => void
   }
       export interface Slots {
-  children?: Snippet;
-  unit?: Snippet;
-  helperText?: Snippet
+  children?: Snippet
 }
-      const {onDown, onUp, class: className, style, children, unit, helperText, ...props} = $props<Props & Events & Slots>();
+      const {onDown, onUp, onInput, onChange, class: className, style, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-stepper-box
     use:setProperties={props}
     class={className}
     style={style}
-    ondown={onDown}
-   onup={onUp} >
+    use:forwardEvents={{'down': onDown, 'up': onUp, 'input': onInput, 'change': onChange}} >
       
-      {#if children}
-        {@render children()}
-      {/if}
-
-      {#if unit}
-        <div slot="unit">
-          {@render unit()}
-        </div>
-      {/if}
-
-      {#if helperText}
-        <div slot="helper-text">
-          {@render helperText()}
-        </div>
-      {/if}
+    {#if children}
+      {@render children()}
+    {/if}
     </obc-stepper-box>

package/dist/components/stepper-box/ObcStepperBox.svelte.d.ts

@@ -11,19 +11,43 @@ export interface Props {
 
 Changing this property updates the icons and directionality of the stepper buttons. */
     type?: ObcStepperBoxType;
-    /** If true, displays the `helper-text` slot content below the control for additional guidance or status. */
-    hasHelperText?: boolean;
     /** If true, the stepper box is disabled and the buttons are not clickable. */
     disabled?: boolean;
+    /** The current numeric value displayed in the field. Pass `null` to clear the value and show the `placeholder` instead. */
+    value?: number | null;
+    /** Optional lower bound; decrement button disables at this value. */
+    min?: number | undefined;
+    /** Optional upper bound; increment button disables at this value. */
+    max?: number | undefined;
+    /** Increment step size (default 1). */
+    stepUp?: number;
+    /** Decrement step size (default 1). */
+    stepDown?: number;
+    /** Unit text displayed inside the field. */
+    unit?: string;
+    /** Helper text displayed below the stepper. When set, the helper text is shown. */
+    helperText?: string;
+    /** Placeholder text shown when the input is empty. */
+    placeholder?: string;
+    /** If true, the input is non-editable; programmatic value changes still apply. */
+    readonly?: boolean;
 }
 export interface Events {
-    onDown?: (event: CustomEvent<void>) => void;
-    onUp?: (event: CustomEvent<void>) => void;
+    onDown?: (event: CustomEvent<{
+        value: number;
+    }>) => void;
+    onUp?: (event: CustomEvent<{
+        value: number;
+    }>) => void;
+    onInput?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+    onChange?: (event: CustomEvent<{
+        value: number | null;
+    }>) => void;
 }
 export interface Slots {
     children?: Snippet;
-    unit?: Snippet;
-    helperText?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcStepperBox: import("svelte").Component<$$ComponentProps, {

package/dist/components/system-button/ObcSystemButton.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {SystemState, SystemButtonVariant, ActivePanel} from '@oicl/openbridge-webcomponents/dist/components/system-button/system-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/system-button/system-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {SystemState, SystemButtonVariant, ActivePanel} from '@oicl/openbridge-webcomponents/dist/components/system-button/system-button.js';
       import type { Snippet } from 'svelte';
 
@@ -17,19 +17,18 @@
 
 Default: `condensed` */
 variant?: SystemButtonVariant;
-      /** Disables all interactions and renders the button(s) in a disabled state. */
-disabled?: boolean;
+     /** Disables all interactions and renders the button(s) in a disabled state. */
+     disabled?: boolean;
       /** Object describing the enabled state and current value for each system indicator (WiFi, audio, microphone, battery, GPS).
 
 Each sub-property (e.g., `wifi.enabled`, `audio.volume`) controls the presence and state of its corresponding icon.
 
 Default: all indicators disabled except WiFi (connected), audio (volume 65), microphone (sensitivity 80), battery (level 78), GPS (quality medium). */
 systemState?: SystemState;
-      /** Indicates whether a system panel is currently open (used internally for expanded/actions variants). */
-menuOpen?: boolean;
-      /** Indicates which panel (if any) is currently active.
-One of: `'microphone'`, `'volume'`, `'system-icons'`, or `null`. */
-activePanel?: ActivePanel | null
+     /** Indicates whether a system panel is currently open (used internally for expanded/actions variants). */
+     menuOpen?: boolean;
+     /** Indicates which panel (if any) is currently active. One of: `'microphone'`, `'volume'`, `'system-icons'`, or `null`. */
+     activePanel?: ActivePanel | null
    }
       export interface Events {
     onMenuToggle?: (event: CustomEvent<{open: boolean}>) => void;
@@ -48,11 +47,7 @@ activePanel?: ActivePanel | null
     use:setProperties={props}
     class={className}
     style={style}
-    onmenu-toggle={onMenuToggle}
-   onsystem-state-change={onSystemStateChange}
-   onmicrophone-panel-open={onMicrophonePanelOpen}
-   onvolume-panel-open={onVolumePanelOpen}
-   onsystem-icons-panel-open={onSystemIconsPanelOpen} >
+    use:forwardEvents={{'menu-toggle': onMenuToggle, 'system-state-change': onSystemStateChange, 'microphone-panel-open': onMicrophonePanelOpen, 'volume-panel-open': onVolumePanelOpen, 'system-icons-panel-open': onSystemIconsPanelOpen}} >
       
     {#if children}
       {@render children()}

package/dist/components/system-button/ObcSystemButton.svelte.d.ts

@@ -22,8 +22,7 @@ Default: all indicators disabled except WiFi (connected), audio (volume 65), mic
     systemState?: SystemState;
     /** Indicates whether a system panel is currently open (used internally for expanded/actions variants). */
     menuOpen?: boolean;
-    /** Indicates which panel (if any) is currently active.
-One of: `'microphone'`, `'volume'`, `'system-icons'`, or `null`. */
+    /** Indicates which panel (if any) is currently active. One of: `'microphone'`, `'volume'`, `'system-icons'`, or `null`. */
     activePanel?: ActivePanel | null;
 }
 export interface Events {

package/dist/components/system-menu/ObcSystemMenu.svelte

@@ -1,9 +1,9 @@
 
   <script lang="ts">
-    export type {WifiState, AudioState, MicrophoneState, BatteryState, SystemSubMenu} from '@oicl/openbridge-webcomponents/dist/components/system-menu/system-menu.js';
+    export type {VolumeChangeEvent, WifiState, AudioState, MicrophoneState, BatteryState, SystemSubMenu} from '@oicl/openbridge-webcomponents/dist/components/system-menu/system-menu.js';
       import '@oicl/openbridge-webcomponents/dist/components/system-menu/system-menu.js';
-      import { setProperties } from "../../util.js";
-      import type {WifiState, AudioState, MicrophoneState, BatteryState, SystemSubMenu} from '@oicl/openbridge-webcomponents/dist/components/system-menu/system-menu.js';
+      import { setProperties, forwardEvents } from "../../util.js";
+      import type {VolumeChangeEvent, WifiState, AudioState, MicrophoneState, BatteryState, SystemSubMenu} from '@oicl/openbridge-webcomponents/dist/components/system-menu/system-menu.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -22,8 +22,9 @@
       export interface Events {
     onWifiClick?: (event: CustomEvent<unknown>) => void;
     onAudioClick?: (event: CustomEvent<unknown>) => void;
-    onAudioVolumeChange?: (event: CustomEvent<unknown>) => void;
+    onAudioVolumeChange?: (event: VolumeChangeEvent) => void;
     onMicrophoneClick?: (event: CustomEvent<unknown>) => void;
+    onPushToTalkChange?: (event: CustomEvent<unknown>) => void;
     onBatteryUsageClick?: (event: CustomEvent<unknown>) => void;
     onBatterySavingModeChange?: (event: CustomEvent<unknown>) => void;
     onBatteryModeChange?: (event: CustomEvent<unknown>) => void;
@@ -36,31 +37,20 @@
     onWifiDisconnectClick?: (event: CustomEvent<unknown>) => void
   }
       export interface Slots {
-  children?: Snippet
+  batteryStatus?: Snippet
 }
-      const {onWifiClick, onAudioClick, onAudioVolumeChange, onMicrophoneClick, onBatteryUsageClick, onBatterySavingModeChange, onBatteryModeChange, onWifiNetworkChange, onAudioOutputChange, onMicrophoneInputChange, onSettingsClick, onToSubMenuClick, onWifiOptionsClick, onWifiDisconnectClick, class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const {onWifiClick, onAudioClick, onAudioVolumeChange, onMicrophoneClick, onPushToTalkChange, onBatteryUsageClick, onBatterySavingModeChange, onBatteryModeChange, onWifiNetworkChange, onAudioOutputChange, onMicrophoneInputChange, onSettingsClick, onToSubMenuClick, onWifiOptionsClick, onWifiDisconnectClick, class: className, style, batteryStatus, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-system-menu
     use:setProperties={props}
     class={className}
     style={style}
-    onwifi-click={onWifiClick}
-   onaudio-click={onAudioClick}
-   onaudio-volume-change={onAudioVolumeChange}
-   onmicrophone-click={onMicrophoneClick}
-   onbattery-usage-click={onBatteryUsageClick}
-   onbattery-saving-mode-change={onBatterySavingModeChange}
-   onbattery-mode-change={onBatteryModeChange}
-   onwifi-network-change={onWifiNetworkChange}
-   onaudio-output-change={onAudioOutputChange}
-   onmicrophone-input-change={onMicrophoneInputChange}
-   onsettings-click={onSettingsClick}
-   onto-sub-menu-click={onToSubMenuClick}
-   onwifi-options-click={onWifiOptionsClick}
-   onwifi-disconnect-click={onWifiDisconnectClick} >
+    use:forwardEvents={{'wifi-click': onWifiClick, 'audio-click': onAudioClick, 'audio-volume-change': onAudioVolumeChange, 'microphone-click': onMicrophoneClick, 'push-to-talk-change': onPushToTalkChange, 'battery-usage-click': onBatteryUsageClick, 'battery-saving-mode-change': onBatterySavingModeChange, 'battery-mode-change': onBatteryModeChange, 'wifi-network-change': onWifiNetworkChange, 'audio-output-change': onAudioOutputChange, 'microphone-input-change': onMicrophoneInputChange, 'settings-click': onSettingsClick, 'to-sub-menu-click': onToSubMenuClick, 'wifi-options-click': onWifiOptionsClick, 'wifi-disconnect-click': onWifiDisconnectClick}} >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if batteryStatus}
+        <div slot="battery-status">
+          {@render batteryStatus()}
+        </div>
+      {/if}
     </obc-system-menu>

package/dist/components/system-menu/ObcSystemMenu.svelte.d.ts

@@ -1,5 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/system-menu/system-menu.js';
-import type { WifiState, AudioState, MicrophoneState, BatteryState, SystemSubMenu } from '@oicl/openbridge-webcomponents/dist/components/system-menu/system-menu.js';
+import type { VolumeChangeEvent, WifiState, AudioState, MicrophoneState, BatteryState, SystemSubMenu } from '@oicl/openbridge-webcomponents/dist/components/system-menu/system-menu.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -17,8 +17,9 @@ export interface Props {
 export interface Events {
     onWifiClick?: (event: CustomEvent<unknown>) => void;
     onAudioClick?: (event: CustomEvent<unknown>) => void;
-    onAudioVolumeChange?: (event: CustomEvent<unknown>) => void;
+    onAudioVolumeChange?: (event: VolumeChangeEvent) => void;
     onMicrophoneClick?: (event: CustomEvent<unknown>) => void;
+    onPushToTalkChange?: (event: CustomEvent<unknown>) => void;
     onBatteryUsageClick?: (event: CustomEvent<unknown>) => void;
     onBatterySavingModeChange?: (event: CustomEvent<unknown>) => void;
     onBatteryModeChange?: (event: CustomEvent<unknown>) => void;
@@ -31,10 +32,11 @@ export interface Events {
     onWifiDisconnectClick?: (event: CustomEvent<unknown>) => void;
 }
 export interface Slots {
-    children?: Snippet;
+    batteryStatus?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcSystemMenu: import("svelte").Component<$$ComponentProps, {
+    VolumeChangeEvent: typeof VolumeChangeEvent;
     WifiState: typeof WifiState;
     AudioState: typeof AudioState;
     MicrophoneState: typeof MicrophoneState;

package/dist/components/tab-item/ObcTabItem.svelte

@@ -1,9 +1,9 @@
 
   <script lang="ts">
-    
+    export type {TabItemBadge} from '@oicl/openbridge-webcomponents/dist/components/tab-item/tab-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/tab-item/tab-item.js';
-      import { setProperties } from "../../util.js";
-      
+      import { setProperties, forwardEvents } from "../../util.js";
+      import type {TabItemBadge} from '@oicl/openbridge-webcomponents/dist/components/tab-item/tab-item.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -44,11 +44,16 @@ Useful for visually separating tabs.
 
 Default: false */
 hasDivider?: boolean;
-      /** Displays a badge (count/status) on the tab.
-Configure badge appearance via `badgeCount`, `badgeType`, `badgeSize`, etc.
+      /** One or more badges (count/status) to display on the tab.
 
-Default: false */
-hasBadge?: boolean;
+When this array is non-empty it takes precedence over the deprecated
+single-badge props (`hasBadge`, `badgeType`, `badgeSize`, `badgeCount`,
+`badgeShowNumber`, `showLeadingBadgeIcon`). When empty, the deprecated
+props are used instead (gated by `hasBadge`).
+
+Default: [] */
+badges?: TabItemBadge[];
+     hasBadge?: boolean;
       /** (Deprecated/Unused) Icon name for the tab.
 Icon content should be provided via the `leading-icon` slot.
 
@@ -59,33 +64,28 @@ Can be overridden by slotting content into the `title` slot.
 
 Default: 'Tab title' */
 title?: string;
-      /** Disables the tab, preventing user interaction and applying disabled styles.
+      /** Shows contextual text below the tab title.
 
 Default: false */
-disabled?: boolean;
-      /** Type of badge to display (e.g., 'regular', 'alarm', 'warning', etc.).
-See `BadgeType` enum for available options.
+showSubtitle?: boolean;
+      /** Contextual text shown below the tab title when `showSubtitle` is true.
 
-Default: 'regular' */
-badgeType?: string;
-      /** Size of the badge ('regular' or 'large').
-See `BadgeSize` enum for available options.
-
-Default: 'regular' */
-badgeSize?: string;
-      /** Shows the badge's numeric value. When false, only the badge background is rendered (for status-only badges).
-
-Default: true */
-badgeShowNumber?: boolean;
-      /** The numeric value to display in the badge (e.g., count of notifications).
-
-Default: 0 */
-badgeCount?: number;
-      /** Shows an icon inside the badge.
-Supply icon content via the `badge-icon` slot.
+Default: '' */
+subtitle?: string;
+      /** Disables the tab, preventing user interaction and applying disabled styles.
 
 Default: false */
-showLeadingBadgeIcon?: boolean
+disabled?: boolean;
+     /** Available when `hasBadge==true`. */
+     badgeType?: string;
+     /** Available when `hasBadge==true`. */
+     badgeSize?: string;
+     /** Available when `hasBadge==true`. */
+     badgeShowNumber?: boolean;
+     /** Available when `hasBadge==true`. */
+     badgeCount?: number;
+     /** Available when `hasBadge==true`. */
+     showLeadingBadgeIcon?: boolean
    }
       export interface Events {
     onTabClick?: (event: CustomEvent<{title: string}>) => void;
@@ -93,18 +93,17 @@ showLeadingBadgeIcon?: boolean
   }
       export interface Slots {
   leadingIcon?: Snippet;
-  title?: Snippet;
+  titleSnippet?: Snippet;
   badgeIcon?: Snippet
 }
-      const {onTabClick, onTabClose, class: className, style, leadingIcon, title, badgeIcon, ...props} = $props<Props & Events & Slots>();
+      const {onTabClick, onTabClose, class: className, style, leadingIcon, titleSnippet, badgeIcon, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-tab-item
     use:setProperties={props}
     class={className}
     style={style}
-    ontab-click={onTabClick}
-   ontab-close={onTabClose} >
+    use:forwardEvents={{'tab-click': onTabClick, 'tab-close': onTabClose}} >
       
       {#if leadingIcon}
         <div slot="leading-icon">
@@ -112,9 +111,9 @@ showLeadingBadgeIcon?: boolean
         </div>
       {/if}
 
-      {#if title}
+      {#if titleSnippet}
         <div slot="title">
-          {@render title()}
+          {@render titleSnippet()}
         </div>
       {/if}