@oicl/openbridge-webcomponents-svelte 2.0.0-next.2 → 2.0.0-next.21

package/dist/components/context-menu-input/ObcContextMenuInput.svelte.d.ts

@@ -1,5 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
-import type { ContextMenuOption, ContextMenuType, ColumnGroup } from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
+import type { ObcContextMenuInputChangeEvent, ObcContextMenuInputItemClickEvent, ContextMenuType, ContextMenuOption, ColumnGroup } from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -50,14 +50,8 @@ When enabled, only one option can be selected in each group or column. */
     selectPerGroup?: boolean | undefined;
 }
 export interface Events {
-    onChange?: (event: CustomEvent<{
-        selectedValues: string[];
-        selectedOptions: ContextMenuOption[];
-    }>) => void;
-    onItemClick?: (event: CustomEvent<{
-        value: string;
-        option: ContextMenuOption;
-    }>) => void;
+    onChange?: (event: ObcContextMenuInputChangeEvent) => void;
+    onItemClick?: (event: ObcContextMenuInputItemClickEvent) => void;
     onClose?: (event: CustomEvent<void>) => void;
 }
 export interface Slots {
@@ -65,8 +59,10 @@ export interface Slots {
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcContextMenuInput: import("svelte").Component<$$ComponentProps, {
-    ContextMenuOption: typeof ContextMenuOption;
+    ObcContextMenuInputChangeEvent: typeof ObcContextMenuInputChangeEvent;
+    ObcContextMenuInputItemClickEvent: typeof ObcContextMenuInputItemClickEvent;
     ContextMenuType: typeof ContextMenuType;
+    ContextMenuOption: typeof ContextMenuOption;
     ColumnGroup: typeof ColumnGroup;
 }, "">;
 type ObcContextMenuInput = ReturnType<typeof ObcContextMenuInput>;

package/dist/components/dropdown-button/ObcDropdownButton.svelte

@@ -1,9 +1,9 @@
 
   <script lang="ts">
-    export type {ObcDropdownButtonChangeEvent, DropdownButtonType} from '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
+    export type {ObcDropdownButtonChangeEvent, DropdownButtonOption, DropdownButtonType} from '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
       import { setProperties } from "../../util.js";
-      import type {ObcDropdownButtonChangeEvent, DropdownButtonType} from '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
+      import type {ObcDropdownButtonChangeEvent, DropdownButtonOption, DropdownButtonType} from '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -16,7 +16,7 @@ Example:
   { value: 'volvo', label: 'Volvo' },
   { value: 'xc90', label: 'XC 90', level: 2 }
 ] */
-options?: { value: string; label: string; level?: number | undefined; }[];
+options?: DropdownButtonOption[];
       /** The value of the currently selected option. If not set, defaults to the first option in the list. */
 value?: string | undefined;
      disabled?: boolean;

package/dist/components/dropdown-button/ObcDropdownButton.svelte.d.ts

@@ -1,5 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
-import type { ObcDropdownButtonChangeEvent, DropdownButtonType } from '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
+import type { ObcDropdownButtonChangeEvent, DropdownButtonOption, DropdownButtonType } from '@oicl/openbridge-webcomponents/dist/components/dropdown-button/dropdown-button.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -11,11 +11,7 @@ Example:
 { value: 'volvo', label: 'Volvo' },
 { value: 'xc90', label: 'XC 90', level: 2 }
 ] */
-    options?: {
-        value: string;
-        label: string;
-        level?: number | undefined;
-    }[];
+    options?: DropdownButtonOption[];
     /** The value of the currently selected option. If not set, defaults to the first option in the list. */
     value?: string | undefined;
     disabled?: boolean;
@@ -43,6 +39,7 @@ export interface Slots {
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcDropdownButton: import("svelte").Component<$$ComponentProps, {
     ObcDropdownButtonChangeEvent: typeof ObcDropdownButtonChangeEvent;
+    DropdownButtonOption: typeof DropdownButtonOption;
     DropdownButtonType: typeof DropdownButtonType;
 }, "">;
 type ObcDropdownButton = ReturnType<typeof ObcDropdownButton>;

package/dist/components/elevated-card-radio/ObcElevatedCardRadio.svelte

@@ -39,9 +39,9 @@ required?: boolean
   }
       export interface Slots {
   leadingIcon?: Snippet;
-  label?: Snippet
+  labelSnippet?: Snippet
 }
-      const {onChange, class: className, style, leadingIcon, label, ...props} = $props<Props & Events & Slots>();
+      const {onChange, class: className, style, leadingIcon, labelSnippet, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-elevated-card-radio
@@ -56,9 +56,9 @@ required?: boolean
         </div>
       {/if}
 
-      {#if label}
+      {#if labelSnippet}
         <div slot="label">
-          {@render label()}
+          {@render labelSnippet()}
         </div>
       {/if}
     </obc-elevated-card-radio>

package/dist/components/elevated-card-radio/ObcElevatedCardRadio.svelte.d.ts

@@ -34,7 +34,7 @@ export interface Events {
 }
 export interface Slots {
     leadingIcon?: Snippet;
-    label?: Snippet;
+    labelSnippet?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcElevatedCardRadio: import("svelte").Component<$$ComponentProps, {

package/dist/components/elevated-card-radio-group/ObcElevatedCardRadioGroup.svelte

@@ -1,9 +1,9 @@
 
   <script lang="ts">
-    export type {ObcElevatedCardRadioGroupChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
+    export type {ObcElevatedCardRadioGroupChangeEvent, ElevatedCardRadioGroupOption} from '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
       import '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
       import { setProperties } from "../../util.js";
-      import type {ObcElevatedCardRadioGroupChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
+      import type {ObcElevatedCardRadioGroupChangeEvent, ElevatedCardRadioGroupOption} from '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -12,7 +12,7 @@
       /** Array of options to display as card radios. Each option should be an object with a `label` (displayed text) and a `value` (submitted value).
 
 Example: `[{label: 'Option 1', value: '1'}, {label: 'Option 2', value: '2'}]` */
-options?: { label: string; value: string; }[];
+options?: ElevatedCardRadioGroupOption[];
       /** Shared name for all radio inputs in the group. Ensures native radio group behavior and correct form submission.
 
 Default: `'default'` */

package/dist/components/elevated-card-radio-group/ObcElevatedCardRadioGroup.svelte.d.ts

@@ -1,5 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
-import type { ObcElevatedCardRadioGroupChangeEvent } from '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
+import type { ObcElevatedCardRadioGroupChangeEvent, ElevatedCardRadioGroupOption } from '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -7,10 +7,7 @@ export interface Props {
     /** Array of options to display as card radios. Each option should be an object with a `label` (displayed text) and a `value` (submitted value).
 
 Example: `[{label: 'Option 1', value: '1'}, {label: 'Option 2', value: '2'}]` */
-    options?: {
-        label: string;
-        value: string;
-    }[];
+    options?: ElevatedCardRadioGroupOption[];
     /** Shared name for all radio inputs in the group. Ensures native radio group behavior and correct form submission.
 
 Default: `'default'` */
@@ -33,6 +30,7 @@ export interface Slots {
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcElevatedCardRadioGroup: import("svelte").Component<$$ComponentProps, {
     ObcElevatedCardRadioGroupChangeEvent: typeof ObcElevatedCardRadioGroupChangeEvent;
+    ElevatedCardRadioGroupOption: typeof ElevatedCardRadioGroupOption;
 }, "">;
 type ObcElevatedCardRadioGroup = ReturnType<typeof ObcElevatedCardRadioGroup>;
 export default ObcElevatedCardRadioGroup;

package/dist/components/floating-item/ObcFloatingItem.svelte

@@ -54,10 +54,10 @@ lineType?: ObcFloatingItemLineType
   description?: Snippet;
   time?: Snippet;
   day?: Snippet;
-  action?: Snippet;
-  action2?: Snippet
+  actionSnippet?: Snippet;
+  action2Snippet?: Snippet
 }
-      const {onActionClick, onAction2Click, onDismissClick, class: className, style, primaryIcon, secondaryIcon, title, description, time, day, action, action2, ...props} = $props<Props & Events & Slots>();
+      const {onActionClick, onAction2Click, onDismissClick, class: className, style, primaryIcon, secondaryIcon, title, description, time, day, actionSnippet, action2Snippet, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-floating-item
@@ -104,15 +104,15 @@ lineType?: ObcFloatingItemLineType
         </div>
       {/if}
 
-      {#if action}
+      {#if actionSnippet}
         <div slot="action">
-          {@render action()}
+          {@render actionSnippet()}
         </div>
       {/if}
 
-      {#if action2}
+      {#if action2Snippet}
         <div slot="action2">
-          {@render action2()}
+          {@render action2Snippet()}
         </div>
       {/if}
     </obc-floating-item>

package/dist/components/floating-item/ObcFloatingItem.svelte.d.ts

@@ -49,8 +49,8 @@ export interface Slots {
     description?: Snippet;
     time?: Snippet;
     day?: Snippet;
-    action?: Snippet;
-    action2?: Snippet;
+    actionSnippet?: Snippet;
+    action2Snippet?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcFloatingItem: import("svelte").Component<$$ComponentProps, {

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/menu-button/ObcMenuButton.svelte

@@ -1,9 +1,11 @@
 
   <script lang="ts">
-    export type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
+    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 type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.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';
 
       export interface Props {
@@ -64,8 +66,8 @@ Disables both the button and the menu. */
 disabled?: boolean
    }
       export interface Events {
-    onChange?: (event: CustomEvent<{selectedValues: string[], selectedOptions: Array<ContextMenuOption>}>) => void;
-    onItemClick?: (event: CustomEvent<{value: string, option: ContextMenuOption}>) => void;
+    onChange?: (event: ObcSplitButtonChangeEvent) => void;
+    onItemClick?: (event: ObcMenuButtonItemClickEvent) => void;
     onOpen?: (event: CustomEvent<void>) => void;
     onClose?: (event: CustomEvent<void>) => void
   }

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

@@ -1,4 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/menu-button/menu-button.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';
 export interface Props {
@@ -59,14 +60,8 @@ Disables both the button and the menu. */
     disabled?: boolean;
 }
 export interface Events {
-    onChange?: (event: CustomEvent<{
-        selectedValues: string[];
-        selectedOptions: Array<ContextMenuOption>;
-    }>) => void;
-    onItemClick?: (event: CustomEvent<{
-        value: string;
-        option: ContextMenuOption;
-    }>) => void;
+    onChange?: (event: ObcSplitButtonChangeEvent) => void;
+    onItemClick?: (event: ObcMenuButtonItemClickEvent) => void;
     onOpen?: (event: CustomEvent<void>) => void;
     onClose?: (event: CustomEvent<void>) => void;
 }
@@ -75,6 +70,8 @@ export interface Slots {
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcMenuButton: import("svelte").Component<$$ComponentProps, {
+    ObcSplitButtonChangeEvent: typeof ObcSplitButtonChangeEvent;
+    ObcMenuButtonItemClickEvent: typeof ObcMenuButtonItemClickEvent;
     ContextMenuOption: typeof ContextMenuOption;
     ContextMenuType: typeof ContextMenuType;
     ColumnGroup: typeof ColumnGroup;

package/dist/components/message-menu-item/ObcMessageMenuItem.svelte

@@ -31,14 +31,14 @@
     onSecondaryActionClick?: (event: CustomEvent<void>) => void
   }
       export interface Slots {
-  title?: Snippet;
-  description?: Snippet;
+  titleSnippet?: Snippet;
+  descriptionSnippet?: Snippet;
   actionLabel?: Snippet;
   primaryIcon?: Snippet;
   secondaryIcon?: Snippet;
   trailingIcon?: Snippet
 }
-      const {onMessageClick, onPrimaryActionClick, onSecondaryActionClick, class: className, style, title, description, actionLabel, primaryIcon, secondaryIcon, trailingIcon, ...props} = $props<Props & Events & Slots>();
+      const {onMessageClick, onPrimaryActionClick, onSecondaryActionClick, class: className, style, titleSnippet, descriptionSnippet, actionLabel, primaryIcon, secondaryIcon, trailingIcon, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-message-menu-item
@@ -49,15 +49,15 @@
    onprimary-action-click={onPrimaryActionClick}
    onsecondary-action-click={onSecondaryActionClick} >
       
-      {#if title}
+      {#if titleSnippet}
         <div slot="title">
-          {@render title()}
+          {@render titleSnippet()}
         </div>
       {/if}
 
-      {#if description}
+      {#if descriptionSnippet}
         <div slot="description">
-          {@render description()}
+          {@render descriptionSnippet()}
         </div>
       {/if}
 

package/dist/components/message-menu-item/ObcMessageMenuItem.svelte.d.ts

@@ -28,8 +28,8 @@ export interface Events {
     onSecondaryActionClick?: (event: CustomEvent<void>) => void;
 }
 export interface Slots {
-    title?: Snippet;
-    description?: Snippet;
+    titleSnippet?: Snippet;
+    descriptionSnippet?: Snippet;
     actionLabel?: Snippet;
     primaryIcon?: Snippet;
     secondaryIcon?: Snippet;

package/dist/components/notification-floating-item/ObcNotificationFloatingItem.svelte

@@ -50,10 +50,10 @@ lineType?: ObcFloatingItemLineType
   description?: Snippet;
   time?: Snippet;
   day?: Snippet;
-  action?: Snippet;
-  action2?: Snippet
+  actionSnippet?: Snippet;
+  action2Snippet?: Snippet
 }
-      const {onActionClick, onAction2Click, onDismissClick, class: className, style, primaryIcon, secondaryIcon, title, description, time, day, action, action2, ...props} = $props<Props & Events & Slots>();
+      const {onActionClick, onAction2Click, onDismissClick, class: className, style, primaryIcon, secondaryIcon, title, description, time, day, actionSnippet, action2Snippet, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-notification-floating-item
@@ -100,15 +100,15 @@ lineType?: ObcFloatingItemLineType
         </div>
       {/if}
 
-      {#if action}
+      {#if actionSnippet}
         <div slot="action">
-          {@render action()}
+          {@render actionSnippet()}
         </div>
       {/if}
 
-      {#if action2}
+      {#if action2Snippet}
         <div slot="action2">
-          {@render action2()}
+          {@render action2Snippet()}
         </div>
       {/if}
     </obc-notification-floating-item>

package/dist/components/notification-floating-item/ObcNotificationFloatingItem.svelte.d.ts

@@ -45,8 +45,8 @@ export interface Slots {
     description?: Snippet;
     time?: Snippet;
     day?: Snippet;
-    action?: Snippet;
-    action2?: Snippet;
+    actionSnippet?: Snippet;
+    action2Snippet?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcNotificationFloatingItem: import("svelte").Component<$$ComponentProps, {

package/dist/components/slider-double/ObcSliderDouble.svelte

@@ -46,16 +46,35 @@ labelUnit?: string;
       /** Number of decimal places to display in value labels. */
 labelDecimals?: number;
       /** CSS width for value labels (e.g., "5ch", "60px"). */
-labelWidth?: string
+labelWidth?: string;
+      /** Whether to show the left (low) readout label.
+
+When false, the left readout is hidden entirely. When true, the readout
+renders the formatted `low` value or the content slotted into `left-readout`.
+
+Default is true. Set via JavaScript property (no HTML attribute). */
+showLeftReadout?: boolean;
+      /** Whether to show the right (high) readout label.
+
+When false, the right readout is hidden entirely. When true, the readout
+renders the formatted `high` value or the content slotted into `right-readout`.
+
+Default is true. Set via JavaScript property (no HTML attribute). */
+showRightReadout?: boolean;
+      /** Removes spacing between the slider and its container edges for seamless
+layout integration. Reflected to the `hugcontainer` HTML attribute. */
+hugContainer?: boolean
    }
       export interface Events {
     onValue?: (event: ObcSliderDoubleValueEvent) => void
   }
       export interface Slots {
   iconLeft?: Snippet;
-  iconRight?: Snippet
+  iconRight?: Snippet;
+  leftReadout?: Snippet;
+  rightReadout?: Snippet
 }
-      const {onValue, class: className, style, iconLeft, iconRight, ...props} = $props<Props & Events & Slots>();
+      const {onValue, class: className, style, iconLeft, iconRight, leftReadout, rightReadout, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-slider-double
@@ -75,4 +94,16 @@ labelWidth?: string
           {@render iconRight()}
         </div>
       {/if}
+
+      {#if leftReadout}
+        <div slot="left-readout">
+          {@render leftReadout()}
+        </div>
+      {/if}
+
+      {#if rightReadout}
+        <div slot="right-readout">
+          {@render rightReadout()}
+        </div>
+      {/if}
     </obc-slider-double>

package/dist/components/slider-double/ObcSliderDouble.svelte.d.ts

@@ -42,6 +42,23 @@ Default is 1/3 (i.e., 3 seconds for full range). */
     labelDecimals?: number;
     /** CSS width for value labels (e.g., "5ch", "60px"). */
     labelWidth?: string;
+    /** Whether to show the left (low) readout label.
+
+When false, the left readout is hidden entirely. When true, the readout
+renders the formatted `low` value or the content slotted into `left-readout`.
+
+Default is true. Set via JavaScript property (no HTML attribute). */
+    showLeftReadout?: boolean;
+    /** Whether to show the right (high) readout label.
+
+When false, the right readout is hidden entirely. When true, the readout
+renders the formatted `high` value or the content slotted into `right-readout`.
+
+Default is true. Set via JavaScript property (no HTML attribute). */
+    showRightReadout?: boolean;
+    /** Removes spacing between the slider and its container edges for seamless
+layout integration. Reflected to the `hugcontainer` HTML attribute. */
+    hugContainer?: boolean;
 }
 export interface Events {
     onValue?: (event: ObcSliderDoubleValueEvent) => void;
@@ -49,6 +66,8 @@ export interface Events {
 export interface Slots {
     iconLeft?: Snippet;
     iconRight?: Snippet;
+    leftReadout?: Snippet;
+    rightReadout?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcSliderDouble: import("svelte").Component<$$ComponentProps, {

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

@@ -1,9 +1,11 @@
 
   <script lang="ts">
-    export type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
+    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 type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.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';
 
       export interface Props {
@@ -53,8 +55,8 @@ Use instead of `options` for grouped or subtitle layouts. */
 columnGroups?: ColumnGroup[]
    }
       export interface Events {
-    onClick?: (event: CustomEvent<{action: 'primary' | 'dropdown', value?: string, option?: ContextMenuOption}>) => void;
-    onChange?: (event: CustomEvent<{selectedValues: string[], selectedOptions: Array<ContextMenuOption>}>) => void
+    onClick?: (event: ObcSplitButtonClickEvent) => void;
+    onChange?: (event: ObcSplitButtonChangeEvent) => void
   }
       export interface Slots {
   icon?: Snippet

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

@@ -1,4 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/split-button/split-button.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';
 export interface Props {
@@ -48,21 +49,16 @@ Use instead of `options` for grouped or subtitle layouts. */
     columnGroups?: ColumnGroup[];
 }
 export interface Events {
-    onClick?: (event: CustomEvent<{
-        action: 'primary' | 'dropdown';
-        value?: string;
-        option?: ContextMenuOption;
-    }>) => void;
-    onChange?: (event: CustomEvent<{
-        selectedValues: string[];
-        selectedOptions: Array<ContextMenuOption>;
-    }>) => void;
+    onClick?: (event: ObcSplitButtonClickEvent) => void;
+    onChange?: (event: ObcSplitButtonChangeEvent) => void;
 }
 export interface Slots {
     icon?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcSplitButton: import("svelte").Component<$$ComponentProps, {
+    ObcSplitButtonClickEvent: typeof ObcSplitButtonClickEvent;
+    ObcSplitButtonChangeEvent: typeof ObcSplitButtonChangeEvent;
     ContextMenuOption: typeof ContextMenuOption;
     ContextMenuType: typeof ContextMenuType;
     ColumnGroup: typeof ColumnGroup;

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

@@ -93,10 +93,10 @@ 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
@@ -112,9 +112,9 @@ showLeadingBadgeIcon?: boolean
         </div>
       {/if}
 
-      {#if title}
+      {#if titleSnippet}
         <div slot="title">
-          {@render title()}
+          {@render titleSnippet()}
         </div>
       {/if}
 

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

@@ -91,7 +91,7 @@ export interface Events {
 }
 export interface Slots {
     leadingIcon?: Snippet;
-    title?: Snippet;
+    titleSnippet?: Snippet;
     badgeIcon?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;

package/dist/components/title-container/ObcTitleContainer.svelte

@@ -19,10 +19,10 @@
       export interface Slots {
   icon?: Snippet;
   title?: Snippet;
-  label?: Snippet;
+  labelSnippet?: Snippet;
   actions?: Snippet
 }
-      const {onActionClick, class: className, style, icon, title, label, actions, ...props} = $props<Props & Events & Slots>();
+      const {onActionClick, class: className, style, icon, title, labelSnippet, actions, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-title-container
@@ -43,9 +43,9 @@
         </div>
       {/if}
 
-      {#if label}
+      {#if labelSnippet}
         <div slot="label">
-          {@render label()}
+          {@render labelSnippet()}
         </div>
       {/if}
 

package/dist/components/title-container/ObcTitleContainer.svelte.d.ts

@@ -16,7 +16,7 @@ export interface Events {
 export interface Slots {
     icon?: Snippet;
     title?: Snippet;
-    label?: Snippet;
+    labelSnippet?: Snippet;
     actions?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;