@oicl/openbridge-webcomponents-svelte 2.0.0-next.14 → 2.0.0-next.141

package/dist/components/form-container/ObcFormContainer.svelte

@@ -17,11 +17,11 @@
   }
       export interface Slots {
   title?: Snippet;
-  contentTitle?: Snippet;
+  contentTitleSnippet?: Snippet;
   children?: Snippet;
   footer?: Snippet
 }
-      const { class: className, style, title, contentTitle, children, footer, ...props} = $props<Props & Events & Slots>();
+      const { class: className, style, title, contentTitleSnippet, children, footer, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-form-container
@@ -36,9 +36,9 @@
         </div>
       {/if}
 
-      {#if contentTitle}
+      {#if contentTitleSnippet}
         <div slot="content-title">
-          {@render contentTitle()}
+          {@render contentTitleSnippet()}
         </div>
       {/if}
 

package/dist/components/form-container/ObcFormContainer.svelte.d.ts

@@ -11,7 +11,7 @@ export interface Events {
 }
 export interface Slots {
     title?: Snippet;
-    contentTitle?: Snippet;
+    contentTitleSnippet?: Snippet;
     children?: Snippet;
     footer?: Snippet;
 }

package/dist/components/form-footer-container/ObcFormFooterContainer.svelte

@@ -2,15 +2,15 @@
   <script lang="ts">
     export type {ObcFormFooterActionClickEvent} from '@oicl/openbridge-webcomponents/dist/components/form-footer-container/form-footer-container.js';
       import '@oicl/openbridge-webcomponents/dist/components/form-footer-container/form-footer-container.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcFormFooterActionClickEvent} from '@oicl/openbridge-webcomponents/dist/components/form-footer-container/form-footer-container.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Shows the action buttons when true. */
-hasActions?: boolean
+     /** Shows the action buttons when true. */
+     hasActions?: boolean
    }
       export interface Events {
     onActionClick?: (event: ObcFormFooterActionClickEvent) => void
@@ -25,7 +25,7 @@ hasActions?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onaction-click={onActionClick} >
+    use:forwardEvents={{'action-click': onActionClick}} >
       
       {#if children}
         {@render children()}

package/dist/components/form-group/ObcFormGroup.svelte

@@ -3,7 +3,7 @@
     export type {ObcFormItemActionChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/form-item/form-item.js';
 export type {ObcFormGroupType} from '@oicl/openbridge-webcomponents/dist/components/form-group/form-group.js';
       import '@oicl/openbridge-webcomponents/dist/components/form-group/form-group.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcFormItemActionChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/form-item/form-item.js';
 import type {ObcFormGroupType} from '@oicl/openbridge-webcomponents/dist/components/form-group/form-group.js';
       import type { Snippet } from 'svelte';
@@ -28,7 +28,7 @@ import type {ObcFormGroupType} from '@oicl/openbridge-webcomponents/dist/compone
     use:setProperties={props}
     class={className}
     style={style}
-    onaction-change={onActionChange} >
+    use:forwardEvents={{'action-change': onActionChange}} >
       
       {#if subtitle}
         <div slot="subtitle">

package/dist/components/form-item/ObcFormItem.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcFormItemActionChangeEvent, ObcFormItemType, ObcFormItemBasicState, ObcFormItemStatusIcon} from '@oicl/openbridge-webcomponents/dist/components/form-item/form-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/form-item/form-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcFormItemActionChangeEvent, ObcFormItemType, ObcFormItemBasicState, ObcFormItemStatusIcon} from '@oicl/openbridge-webcomponents/dist/components/form-item/form-item.js';
       import type { Snippet } from 'svelte';
 
@@ -10,13 +10,16 @@
      class?: string;
      style?: string;
      type?: ObcFormItemType;
+     /** Available when `type in [EnabledActionFirst, EnabledActionLast]`. */
      itemId?: string;
      hasError?: boolean;
+     /** Available when `type in [EnabledActionFirst, EnabledActionLast] && hasError==true`. */
      errorText?: string;
      hasIcon?: boolean;
      basicState?: ObcFormItemBasicState;
      hasShader?: boolean;
      disabled?: boolean;
+     /** Available when `type in [FilledStatusFirst, FilledStatusLast]`. */
      statusIcon?: ObcFormItemStatusIcon
    }
       export interface Events {
@@ -33,7 +36,7 @@
     use:setProperties={props}
     class={className}
     style={style}
-    onaction-change={onActionChange} >
+    use:forwardEvents={{'action-change': onActionChange}} >
       
       {#if icon}
         <div slot="icon">

package/dist/components/form-item/ObcFormItem.svelte.d.ts

@@ -5,13 +5,16 @@ export interface Props {
     class?: string;
     style?: string;
     type?: ObcFormItemType;
+    /** Available when `type in [EnabledActionFirst, EnabledActionLast]`. */
     itemId?: string;
     hasError?: boolean;
+    /** Available when `type in [EnabledActionFirst, EnabledActionLast] && hasError==true`. */
     errorText?: string;
     hasIcon?: boolean;
     basicState?: ObcFormItemBasicState;
     hasShader?: boolean;
     disabled?: boolean;
+    /** Available when `type in [FilledStatusFirst, FilledStatusLast]`. */
     statusIcon?: ObcFormItemStatusIcon;
 }
 export interface Events {

package/dist/components/icon-button/ObcIconButton.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {IconButtonVariant} from '@oicl/openbridge-webcomponents/dist/components/icon-button/icon-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/icon-button/icon-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {IconButtonVariant} from '@oicl/openbridge-webcomponents/dist/components/icon-button/icon-button.js';
       import type { Snippet } from 'svelte';
 
@@ -14,44 +14,40 @@
 - `raised`: Elevated with shadow.
 - `flat`: Minimal, backgroundless style. */
 variant?: IconButtonVariant;
-      /** Whether the button is in an activated (selected/toggled) state.
-Visually highlights the button to indicate selection. */
-activated?: boolean;
-      /** If true, aligns the button to the left edge and removes left border radius.
-Useful for grouping or edge-aligned layouts. */
-cornerLeft?: boolean;
-      /** If true, aligns the button to the right edge and removes right border radius.
-Useful for grouping or edge-aligned layouts. */
-cornerRight?: boolean;
-      /** Applies an accent color to the button for emphasis.
-Used to visually distinguish active or important actions. */
-activeColor?: boolean;
-      /** Increases the button's width for larger touch targets or visual balance. */
-wide?: boolean;
-      /** Disables the button, preventing user interaction and dimming its appearance. */
-disabled?: boolean;
-      /** Shows a circular progress indicator overlay when set (0–100).
-Use to indicate ongoing actions or loading states.
-If undefined, no progress indicator is shown. */
-progress?: number | undefined;
-      /** If true, displays a label below the icon using the `label` slot. */
-hasLabel?: boolean
+     /** Whether the button is in an activated (selected/toggled) state. Visually highlights the button to indicate selection. */
+     activated?: boolean;
+     /** If true, aligns the button to the left edge and removes left border radius. Useful for grouping or edge-aligned layouts. */
+     cornerLeft?: boolean;
+     /** If true, aligns the button to the right edge and removes right border radius. Useful for grouping or edge-aligned layouts. */
+     cornerRight?: boolean;
+     /** Applies an accent color to the button for emphasis. Used to visually distinguish active or important actions. */
+     activeColor?: boolean;
+     /** Increases the button's width for larger touch targets or visual balance. */
+     wide?: boolean;
+     /** Disables the button, preventing user interaction and dimming its appearance. */
+     disabled?: boolean;
+     /** Shows a circular progress indicator overlay when set (0–100). Use to indicate ongoing actions or loading states. If undefined, no progress indicator is shown. */
+     progress?: number | undefined;
+     /** If true, displays a label below the icon using the `label` slot. */
+     hasLabel?: boolean;
+     /** If false, and cornerLeft or cornerRight is true, the divider is not shown. */
+     showDivider?: boolean
    }
       export interface Events {
-    
+    onClick?: (event: CustomEvent<unknown>) => void
   }
       export interface Slots {
   children?: Snippet;
   label?: Snippet
 }
-      const { class: className, style, children, label, ...props} = $props<Props & Events & Slots>();
+      const {onClick, class: className, style, children, label, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-icon-button
     use:setProperties={props}
     class={className}
     style={style}
-     >
+    use:forwardEvents={{'click': onClick}} >
       
       {#if children}
         {@render children()}

package/dist/components/icon-button/ObcIconButton.svelte.d.ts

@@ -9,30 +9,27 @@ export interface Props {
 - `raised`: Elevated with shadow.
 - `flat`: Minimal, backgroundless style. */
     variant?: IconButtonVariant;
-    /** Whether the button is in an activated (selected/toggled) state.
-Visually highlights the button to indicate selection. */
+    /** Whether the button is in an activated (selected/toggled) state. Visually highlights the button to indicate selection. */
     activated?: boolean;
-    /** If true, aligns the button to the left edge and removes left border radius.
-Useful for grouping or edge-aligned layouts. */
+    /** If true, aligns the button to the left edge and removes left border radius. Useful for grouping or edge-aligned layouts. */
     cornerLeft?: boolean;
-    /** If true, aligns the button to the right edge and removes right border radius.
-Useful for grouping or edge-aligned layouts. */
+    /** If true, aligns the button to the right edge and removes right border radius. Useful for grouping or edge-aligned layouts. */
     cornerRight?: boolean;
-    /** Applies an accent color to the button for emphasis.
-Used to visually distinguish active or important actions. */
+    /** Applies an accent color to the button for emphasis. Used to visually distinguish active or important actions. */
     activeColor?: boolean;
     /** Increases the button's width for larger touch targets or visual balance. */
     wide?: boolean;
     /** Disables the button, preventing user interaction and dimming its appearance. */
     disabled?: boolean;
-    /** Shows a circular progress indicator overlay when set (0–100).
-Use to indicate ongoing actions or loading states.
-If undefined, no progress indicator is shown. */
+    /** Shows a circular progress indicator overlay when set (0–100). Use to indicate ongoing actions or loading states. If undefined, no progress indicator is shown. */
     progress?: number | undefined;
     /** If true, displays a label below the icon using the `label` slot. */
     hasLabel?: boolean;
+    /** If false, and cornerLeft or cornerRight is true, the divider is not shown. */
+    showDivider?: boolean;
 }
 export interface Events {
+    onClick?: (event: CustomEvent<unknown>) => void;
 }
 export interface Slots {
     children?: Snippet;

package/dist/components/icon-check-button/ObcIconCheckButton.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     
       import '@oicl/openbridge-webcomponents/dist/components/icon-check-button/icon-check-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       
       import type { Snippet } from 'svelte';
 
@@ -47,7 +47,7 @@ externalControl?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onicon-check-button-click={onIconCheckButtonClick} >
+    use:forwardEvents={{'icon-check-button-click': onIconCheckButtonClick}} >
       
       {#if icon}
         <div slot="icon">

package/dist/components/input-chip/ObcInputChip.svelte

@@ -2,22 +2,19 @@
   <script lang="ts">
     
       import '@oicl/openbridge-webcomponents/dist/components/input-chip/input-chip.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** The text label displayed inside the chip.
-Represents the chip's content (e.g., tag, filter, or token label). */
-label?: string;
-      /** Disables the chip, preventing removal and interaction.
-When true, the chip appears visually inactive and cannot be removed. */
-disabled?: boolean;
-      /** Controls whether the leading icon slot is shown.
-When true, displays the default slot for an icon/avatar at the start of the chip. */
-showIcon?: boolean
+     /** The text label displayed inside the chip. Represents the chip's content (e.g., tag, filter, or token label). */
+     label?: string;
+     /** Disables the chip, preventing removal and interaction. When true, the chip appears visually inactive and cannot be removed. */
+     disabled?: boolean;
+     /** Controls whether the leading icon slot is shown. When true, displays the default slot for an icon/avatar at the start of the chip. */
+     showIcon?: boolean
    }
       export interface Events {
     onRemoveChip?: (event: CustomEvent<{label: string}>) => void
@@ -32,7 +29,7 @@ showIcon?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onremove-chip={onRemoveChip} >
+    use:forwardEvents={{'remove-chip': onRemoveChip}} >
       
       {#if children}
         {@render children()}

package/dist/components/input-chip/ObcInputChip.svelte.d.ts

@@ -3,14 +3,11 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** The text label displayed inside the chip.
-Represents the chip's content (e.g., tag, filter, or token label). */
+    /** The text label displayed inside the chip. Represents the chip's content (e.g., tag, filter, or token label). */
     label?: string;
-    /** Disables the chip, preventing removal and interaction.
-When true, the chip appears visually inactive and cannot be removed. */
+    /** Disables the chip, preventing removal and interaction. When true, the chip appears visually inactive and cannot be removed. */
     disabled?: boolean;
-    /** Controls whether the leading icon slot is shown.
-When true, displays the default slot for an icon/avatar at the start of the chip. */
+    /** Controls whether the leading icon slot is shown. When true, displays the default slot for an icon/avatar at the start of the chip. */
     showIcon?: boolean;
 }
 export interface Events {

package/dist/components/keyboard-full/ObcKeyboardFull.svelte

@@ -1,11 +1,11 @@
 
   <script lang="ts">
     export type {ObcKeyboardFullType} from '@oicl/openbridge-webcomponents/dist/components/keyboard-full/keyboard-full.js';
-export type {ObcTextInputFieldSize} from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
+export type {ObcTextInputFieldSize, HTMLInputTypeAttribute} from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
       import '@oicl/openbridge-webcomponents/dist/components/keyboard-full/keyboard-full.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcKeyboardFullType} from '@oicl/openbridge-webcomponents/dist/components/keyboard-full/keyboard-full.js';
-import type {ObcTextInputFieldSize} from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
+import type {ObcTextInputFieldSize, HTMLInputTypeAttribute} from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -13,11 +13,14 @@ import type {ObcTextInputFieldSize} from '@oicl/openbridge-webcomponents/dist/co
      style?: string;
      type?: ObcKeyboardFullType;
      showTopBar?: boolean;
+     /** Available when `showTopBar==true`. */
      parameterName?: string;
      value?: string;
      placeholder?: string;
      showNumberRow?: boolean;
-     inputSize?: ObcTextInputFieldSize
+     inputSize?: ObcTextInputFieldSize;
+     /** Input type forwarded to the embedded input field. Set to `password` to mask the entered value (a show/hide toggle is then shown inside the field). */
+     inputType?: HTMLInputTypeAttribute
    }
       export interface Events {
     onValueChange?: (event: CustomEvent<{value: string}>) => void;
@@ -34,9 +37,7 @@ import type {ObcTextInputFieldSize} from '@oicl/openbridge-webcomponents/dist/co
     use:setProperties={props}
     class={className}
     style={style}
-    onvalue-change={onValueChange}
-   ondone-click={onDoneClick}
-   onclose-click={onCloseClick} >
+    use:forwardEvents={{'value-change': onValueChange, 'done-click': onDoneClick, 'close-click': onCloseClick}} >
       
     {#if children}
       {@render children()}

package/dist/components/keyboard-full/ObcKeyboardFull.svelte.d.ts

@@ -1,17 +1,20 @@
 import '@oicl/openbridge-webcomponents/dist/components/keyboard-full/keyboard-full.js';
 import type { ObcKeyboardFullType } from '@oicl/openbridge-webcomponents/dist/components/keyboard-full/keyboard-full.js';
-import type { ObcTextInputFieldSize } from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
+import type { ObcTextInputFieldSize, HTMLInputTypeAttribute } from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
     type?: ObcKeyboardFullType;
     showTopBar?: boolean;
+    /** Available when `showTopBar==true`. */
     parameterName?: string;
     value?: string;
     placeholder?: string;
     showNumberRow?: boolean;
     inputSize?: ObcTextInputFieldSize;
+    /** Input type forwarded to the embedded input field. Set to `password` to mask the entered value (a show/hide toggle is then shown inside the field). */
+    inputType?: HTMLInputTypeAttribute;
 }
 export interface Events {
     onValueChange?: (event: CustomEvent<{
@@ -29,6 +32,7 @@ type $$ComponentProps = Props & Events & Slots;
 declare const ObcKeyboardFull: import("svelte").Component<$$ComponentProps, {
     ObcKeyboardFullType: typeof ObcKeyboardFullType;
     ObcTextInputFieldSize: typeof ObcTextInputFieldSize;
+    HTMLInputTypeAttribute: typeof HTMLInputTypeAttribute;
 }, "">;
 type ObcKeyboardFull = ReturnType<typeof ObcKeyboardFull>;
 export default ObcKeyboardFull;

package/dist/components/keyboard-numeric/ObcKeyboardNumeric.svelte

@@ -3,7 +3,7 @@
     export type {ObcKeyboardNumericType} from '@oicl/openbridge-webcomponents/dist/components/keyboard-numeric/keyboard-numeric.js';
 export type {ObcNumberInputFieldTextAlign} from '@oicl/openbridge-webcomponents/dist/components/number-input-field/number-input-field.js';
       import '@oicl/openbridge-webcomponents/dist/components/keyboard-numeric/keyboard-numeric.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcKeyboardNumericType} from '@oicl/openbridge-webcomponents/dist/components/keyboard-numeric/keyboard-numeric.js';
 import type {ObcNumberInputFieldTextAlign} from '@oicl/openbridge-webcomponents/dist/components/number-input-field/number-input-field.js';
       import type { Snippet } from 'svelte';
@@ -12,43 +12,55 @@ import type {ObcNumberInputFieldTextAlign} from '@oicl/openbridge-webcomponents/
      class?: string;
      style?: string;
      type?: ObcKeyboardNumericType;
-      /** Shows the top bar with label and close button (only applicable for floating type) */
-hasTitleBar?: boolean;
-      /** Label displayed in the top bar */
-label?: string;
-      /** Current input value */
-value?: string;
-      /** Shows the calculation row with +, -, ×, ÷, = buttons */
-hasCalculation?: boolean;
-      /** Shows the #+= / 123 toggle button to switch between numbers and symbols */
-has2Symbols?: boolean;
-      /** Helper text content displayed below the input field */
-helperText?: string;
-      /** Shows a leading icon slot in the input field */
-hasLeadingIcon?: boolean;
-      /** Unit text (%, kg, °C, etc.) */
-unit?: string;
-      /** Text alignment in input field */
-inputFieldTextAlign?: ObcNumberInputFieldTextAlign;
-      /** Optional regex pattern for validation (applies to both keyboard and direct input) */
-validationPattern?: string
+     /**
+      * Shows the top bar with label and close button (only applicable for floating type)
+      *
+      * Available when `type==Floating`.
+      */
+     hasTitleBar?: boolean;
+     /**
+      * Label displayed in the top bar
+      *
+      * Available when `hasTitleBar==true && type==Floating`.
+      */
+     label?: string;
+     /** Current input value */
+     value?: string;
+     /** Shows the calculation row with +, -, ×, ÷, = buttons */
+     hasCalculation?: boolean;
+     /** Shows the #+= / 123 toggle button to switch between numbers and symbols */
+     has2Symbols?: boolean;
+     /** Helper text content displayed below the input field */
+     helperText?: string;
+     /** Shows a leading icon slot in the input field */
+     hasLeadingIcon?: boolean;
+     /** Unit text (%, kg, °C, etc.) */
+     unit?: string;
+     /** Text alignment in input field */
+     inputFieldTextAlign?: ObcNumberInputFieldTextAlign;
+     /** Optional regex pattern for validation (applies to both keyboard and direct input) */
+     validationPattern?: string
    }
       export interface Events {
-    
+    onCloseClick?: (event: CustomEvent<void>) => void;
+    onValueChange?: (event: CustomEvent<{value: string}>) => void;
+    onDoneClick?: (event: CustomEvent<{value: string}>) => void
   }
       export interface Slots {
-  children?: Snippet
+  leadingIcon?: Snippet
 }
-      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const {onCloseClick, onValueChange, onDoneClick, class: className, style, leadingIcon, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-keyboard-numeric
     use:setProperties={props}
     class={className}
     style={style}
-     >
+    use:forwardEvents={{'close-click': onCloseClick, 'value-change': onValueChange, 'done-click': onDoneClick}} >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if leadingIcon}
+        <div slot="leading-icon">
+          {@render leadingIcon()}
+        </div>
+      {/if}
     </obc-keyboard-numeric>

package/dist/components/keyboard-numeric/ObcKeyboardNumeric.svelte.d.ts

@@ -6,9 +6,17 @@ export interface Props {
     class?: string;
     style?: string;
     type?: ObcKeyboardNumericType;
-    /** Shows the top bar with label and close button (only applicable for floating type) */
+    /**
+     * Shows the top bar with label and close button (only applicable for floating type)
+     *
+     * Available when `type==Floating`.
+     */
     hasTitleBar?: boolean;
-    /** Label displayed in the top bar */
+    /**
+     * Label displayed in the top bar
+     *
+     * Available when `hasTitleBar==true && type==Floating`.
+     */
     label?: string;
     /** Current input value */
     value?: string;
@@ -28,9 +36,16 @@ export interface Props {
     validationPattern?: string;
 }
 export interface Events {
+    onCloseClick?: (event: CustomEvent<void>) => void;
+    onValueChange?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+    onDoneClick?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
 }
 export interface Slots {
-    children?: Snippet;
+    leadingIcon?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcKeyboardNumeric: import("svelte").Component<$$ComponentProps, {

package/dist/components/menu-button/ObcMenuButton.svelte

@@ -3,7 +3,7 @@
     export type {ObcSplitButtonChangeEvent, ObcMenuButtonItemClickEvent} from '@oicl/openbridge-webcomponents/dist/components/menu-button/menu-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/menu-button/menu-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcSplitButtonChangeEvent, ObcMenuButtonItemClickEvent} from '@oicl/openbridge-webcomponents/dist/components/menu-button/menu-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,9 +11,8 @@ import type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbr
       export interface Props {
      class?: string;
      style?: string;
-      /** The label displayed on the button.
-If empty, the button can be rendered as icon-only. */
-label?: string;
+     /** The label displayed on the button. If empty, the button can be rendered as icon-only. */
+     label?: string;
       /** Array of menu options with value, label, and optional level, icon, and children.
 Each option can include:
 - `value`: Unique string identifier.
@@ -22,15 +21,12 @@ Each option can include:
 - `children`: Optional array of child options (for nested/flyout menus).
 - `level`: Optional nesting level (for hierarchical menus). */
 options?: ContextMenuOption[];
-      /** Array of currently selected option values.
-Used to control which options are checked/selected in the menu. */
-selectedValues?: string[];
-      /** Whether the button should fill the full width of its container.
-If true, the button stretches to 100% width. */
-fullWidth?: boolean;
-      /** Whether the button should show an icon slot.
-If true, the `icon` slot is rendered at the start of the button. */
-hasIcon?: boolean;
+     /** Array of currently selected option values. Used to control which options are checked/selected in the menu. */
+     selectedValues?: string[];
+     /** Whether the button should fill the full width of its container. If true, the button stretches to 100% width. */
+     fullWidth?: boolean;
+     /** Whether the button should show an icon slot. If true, the `icon` slot is rendered at the start of the button. */
+     hasIcon?: boolean;
       /** The variant type of context menu to display.
 Determines menu layout and selection behavior.
 - `Regular`: Standard single-select.
@@ -40,30 +36,22 @@ Determines menu layout and selection behavior.
 - `Multi`: Multi-column menu.
 - `MultiWithSubtitles`: Multi-column with group subtitles. */
 menuType?: ContextMenuType;
-      /** Whether multiple selections are allowed.
-Overrides the default selection mode for the chosen variant.
-If not explicitly set, defaults based on `menuType`. */
-multiSelect?: boolean | undefined;
-      /** Allows single selection per group (flyout/multi-column only).
-When true, only one item per group/column can be selected. */
-selectPerGroup?: boolean | undefined;
-      /** Whether to show a title bar with close button at the top of the menu.
-If true, the menu displays a title bar (use `menuTitle` for text). */
-hasTitleBar?: boolean;
-      /** Title text displayed in the title bar (if `hasTitleBar` is true). */
-menuTitle?: string;
-      /** Array of column groups for the `multi-with-subtitles` layout.
-Used to define grouped columns with subtitles in multi-column menus. */
-columnGroups?: ColumnGroup[];
-      /** Number of items per column in multi-column layouts.
-Used for `Multi` and `MultiWithSubtitles` menu types. */
-itemsPerColumn?: number;
-      /** Render the dropdown context menu above or below the button.
-If true, the menu opens above the button; otherwise, it opens below. */
-openTop?: boolean;
-      /** Whether both parts of the button are disabled.
-Disables both the button and the menu. */
-disabled?: boolean
+     /** Whether multiple selections are allowed. Overrides the default selection mode for the chosen variant. If not explicitly set, defaults based on `menuType`. */
+     multiSelect?: boolean | undefined;
+     /** Allows single selection per group (flyout/multi-column only). When true, only one item per group/column can be selected. */
+     selectPerGroup?: boolean | undefined;
+     /** Whether to show a title bar with close button at the top of the menu. If true, the menu displays a title bar (use `menuTitle` for text). */
+     hasTitleBar?: boolean;
+     /** Title text displayed in the title bar (if `hasTitleBar` is true). */
+     menuTitle?: string;
+     /** Array of column groups for the `multi-with-subtitles` layout. Used to define grouped columns with subtitles in multi-column menus. */
+     columnGroups?: ColumnGroup[];
+     /** Number of items per column in multi-column layouts. Used for `Multi` and `MultiWithSubtitles` menu types. */
+     itemsPerColumn?: number;
+     /** Render the dropdown context menu above or below the button. If true, the menu opens above the button; otherwise, it opens below. */
+     openTop?: boolean;
+     /** Whether both parts of the button are disabled. Disables both the button and the menu. */
+     disabled?: boolean
    }
       export interface Events {
     onChange?: (event: ObcSplitButtonChangeEvent) => void;
@@ -81,10 +69,7 @@ disabled?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange}
-   onitem-click={onItemClick}
-   onopen={onOpen}
-   onclose={onClose} >
+    use:forwardEvents={{'change': onChange, 'item-click': onItemClick, 'open': onOpen, 'close': onClose}} >
       
       {#if icon}
         <div slot="icon">