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

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">

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

@@ -5,8 +5,7 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** The label displayed on the button.
-If empty, the button can be rendered as icon-only. */
+    /** 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:
@@ -16,14 +15,11 @@ 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. */
+    /** 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. */
+    /** 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. */
+    /** 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.
@@ -34,29 +30,21 @@ 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`. */
+    /** 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. */
+    /** 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). */
+    /** 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. */
+    /** 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. */
+    /** 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. */
+    /** 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. */
+    /** Whether both parts of the button are disabled. Disables both the button and the menu. */
     disabled?: boolean;
 }
 export interface Events {

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

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcMessageMenuItemSize} from '@oicl/openbridge-webcomponents/dist/components/message-menu-item/message-menu-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/message-menu-item/message-menu-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcMessageMenuItemSize} from '@oicl/openbridge-webcomponents/dist/components/message-menu-item/message-menu-item.js';
       import type { Snippet } from 'svelte';
 
@@ -17,10 +17,14 @@
      description?: string;
      day?: string;
      time?: string;
+     /** Available when `hasActionLabelSlot==false`. */
      primaryActionLabel?: string;
      secondaryActionLabel?: string;
+     enablePrimaryAction?: boolean;
+     enableSecondaryAction?: boolean;
      hasPrimaryIcon?: boolean;
      hasSecondaryIcon?: boolean;
+     /** Available when `stackVertical==false`. */
      hasTrailingIcon?: boolean;
      isShelved?: boolean;
      hasActionLabelSlot?: boolean
@@ -31,33 +35,31 @@
     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
     use:setProperties={props}
     class={className}
     style={style}
-    onmessage-click={onMessageClick}
-   onprimary-action-click={onPrimaryActionClick}
-   onsecondary-action-click={onSecondaryActionClick} >
+    use:forwardEvents={{'message-click': onMessageClick, 'primary-action-click': onPrimaryActionClick, 'secondary-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

@@ -12,10 +12,14 @@ export interface Props {
     description?: string;
     day?: string;
     time?: string;
+    /** Available when `hasActionLabelSlot==false`. */
     primaryActionLabel?: string;
     secondaryActionLabel?: string;
+    enablePrimaryAction?: boolean;
+    enableSecondaryAction?: boolean;
     hasPrimaryIcon?: boolean;
     hasSecondaryIcon?: boolean;
+    /** Available when `stackVertical==false`. */
     hasTrailingIcon?: boolean;
     isShelved?: boolean;
     hasActionLabelSlot?: boolean;
@@ -28,8 +32,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/modal-window/ObcModalWindow.svelte

@@ -2,25 +2,29 @@
   <script lang="ts">
     export type {ObcModalWindowSize} from '@oicl/openbridge-webcomponents/dist/components/modal-window/modal-window.js';
       import '@oicl/openbridge-webcomponents/dist/components/modal-window/modal-window.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcModalWindowSize} from '@oicl/openbridge-webcomponents/dist/components/modal-window/modal-window.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Controls the modal window size and action button layout. */
-size?: ObcModalWindowSize;
-      /** Whether to show an optional third action button. */
-hasOptionalAction?: boolean;
-      /** Whether to show the leading icon slot in the header. */
-hasLeadingIcon?: boolean
+     /** Controls the modal window size and action button layout. */
+     size?: ObcModalWindowSize;
+     /** Whether to show an optional third action button. */
+     hasOptionalAction?: boolean;
+     /** Whether to show the leading icon slot in the header. */
+     hasLeadingIcon?: boolean;
+     /** Whether to show the footer cancel button. */
+     hasCancelAction?: boolean;
+     /** Whether to show the header close (X) button. */
+     hasCloseAction?: boolean
    }
       export interface Events {
-    onCloseClick?: (event: CustomEvent<unknown>) => void;
-    onCancelClick?: (event: CustomEvent<unknown>) => void;
-    onDoneClick?: (event: CustomEvent<unknown>) => void;
-    onOptionClick?: (event: CustomEvent<unknown>) => void
+    onCloseClick?: (event: CustomEvent) => void;
+    onCancelClick?: (event: CustomEvent) => void;
+    onDoneClick?: (event: CustomEvent) => void;
+    onOptionClick?: (event: CustomEvent) => void
   }
       export interface Slots {
   leadingIcon?: Snippet;
@@ -37,10 +41,7 @@ hasLeadingIcon?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onclose-click={onCloseClick}
-   oncancel-click={onCancelClick}
-   ondone-click={onDoneClick}
-   onoption-click={onOptionClick} >
+    use:forwardEvents={{'close-click': onCloseClick, 'cancel-click': onCancelClick, 'done-click': onDoneClick, 'option-click': onOptionClick}} >
       
       {#if leadingIcon}
         <div slot="leading-icon">

package/dist/components/modal-window/ObcModalWindow.svelte.d.ts

@@ -10,12 +10,16 @@ export interface Props {
     hasOptionalAction?: boolean;
     /** Whether to show the leading icon slot in the header. */
     hasLeadingIcon?: boolean;
+    /** Whether to show the footer cancel button. */
+    hasCancelAction?: boolean;
+    /** Whether to show the header close (X) button. */
+    hasCloseAction?: boolean;
 }
 export interface Events {
-    onCloseClick?: (event: CustomEvent<unknown>) => void;
-    onCancelClick?: (event: CustomEvent<unknown>) => void;
-    onDoneClick?: (event: CustomEvent<unknown>) => void;
-    onOptionClick?: (event: CustomEvent<unknown>) => void;
+    onCloseClick?: (event: CustomEvent) => void;
+    onCancelClick?: (event: CustomEvent) => void;
+    onDoneClick?: (event: CustomEvent) => void;
+    onOptionClick?: (event: CustomEvent) => void;
 }
 export interface Slots {
     leadingIcon?: Snippet;