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

package/dist/components/check-button/ObcCheckButton.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {CheckButtonType, CheckButtonCheckboxAppearance} from '@oicl/openbridge-webcomponents/dist/components/check-button/check-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/check-button/check-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {CheckButtonType, CheckButtonCheckboxAppearance} from '@oicl/openbridge-webcomponents/dist/components/check-button/check-button.js';
       import type { Snippet } from 'svelte';
 
@@ -17,23 +17,34 @@ type?: CheckButtonType;
 
 When clicked, this state toggles and the `check-button-click` event is fired. */
 checked?: boolean;
-      /** Disables the button, preventing user interaction and applying disabled styling. */
-disabled?: boolean;
-      /** If false, button width adapts to its content (fit-content).
-If true, uses the `width` property (if set) or expands to 100% of parent. */
-fullWidth?: boolean;
-      /** Specific width for the button (e.g., "200px", "10rem").
-Only applies when `fullWidth` is true. */
-width?: string;
-      /** Whether to show the icon in regular mode (icon slot).
-Ignored in checkbox mode. */
-showIcon?: boolean;
-      /** If true, uses the `checked-icon` slot for the checked state in checkbox mode.
-Otherwise, uses the default checked icon. */
-hasCheckedIcon?: boolean;
-      /** If true, uses the `unchecked-icon` slot for the unchecked state in checkbox mode.
-Otherwise, uses the default unchecked icon. */
-hasUncheckedIcon?: boolean;
+     /** Disables the button, preventing user interaction and applying disabled styling. */
+     disabled?: boolean;
+     /** If false, button width adapts to its content (fit-content). If true, uses the `width` property (if set) or expands to 100% of parent. */
+     fullWidth?: boolean;
+     /**
+      * Specific width for the button (e.g., "200px", "10rem"). Only applies when `fullWidth` is true.
+      *
+      * Available when `fullWidth==true`.
+      */
+     width?: string;
+     /**
+      * Whether to show the icon in regular mode (icon slot). Ignored in checkbox mode.
+      *
+      * Available when `type==regular`.
+      */
+     showIcon?: boolean;
+     /**
+      * If true, uses the `checked-icon` slot for the checked state in checkbox mode. Otherwise, uses the default checked icon.
+      *
+      * Available when `type==checkbox`.
+      */
+     hasCheckedIcon?: boolean;
+     /**
+      * If true, uses the `unchecked-icon` slot for the unchecked state in checkbox mode. Otherwise, uses the default unchecked icon.
+      *
+      * Available when `type==checkbox`.
+      */
+     hasUncheckedIcon?: boolean;
       /** Optional appearance mode for checkbox type.
 Keep `default` for existing behavior. Use `updated` for the new checkbox visuals. */
 checkboxAppearance?: CheckButtonCheckboxAppearance
@@ -54,7 +65,7 @@ checkboxAppearance?: CheckButtonCheckboxAppearance
     use:setProperties={props}
     class={className}
     style={style}
-    oncheck-button-click={onCheckButtonClick} >
+    use:forwardEvents={{'check-button-click': onCheckButtonClick}} >
       
       {#if children}
         {@render children()}

package/dist/components/check-button/ObcCheckButton.svelte.d.ts

@@ -14,20 +14,31 @@ When clicked, this state toggles and the `check-button-click` event is fired. */
     checked?: boolean;
     /** Disables the button, preventing user interaction and applying disabled styling. */
     disabled?: boolean;
-    /** If false, button width adapts to its content (fit-content).
-If true, uses the `width` property (if set) or expands to 100% of parent. */
+    /** If false, button width adapts to its content (fit-content). If true, uses the `width` property (if set) or expands to 100% of parent. */
     fullWidth?: boolean;
-    /** Specific width for the button (e.g., "200px", "10rem").
-Only applies when `fullWidth` is true. */
+    /**
+     * Specific width for the button (e.g., "200px", "10rem"). Only applies when `fullWidth` is true.
+     *
+     * Available when `fullWidth==true`.
+     */
     width?: string;
-    /** Whether to show the icon in regular mode (icon slot).
-Ignored in checkbox mode. */
+    /**
+     * Whether to show the icon in regular mode (icon slot). Ignored in checkbox mode.
+     *
+     * Available when `type==regular`.
+     */
     showIcon?: boolean;
-    /** If true, uses the `checked-icon` slot for the checked state in checkbox mode.
-Otherwise, uses the default checked icon. */
+    /**
+     * If true, uses the `checked-icon` slot for the checked state in checkbox mode. Otherwise, uses the default checked icon.
+     *
+     * Available when `type==checkbox`.
+     */
     hasCheckedIcon?: boolean;
-    /** If true, uses the `unchecked-icon` slot for the unchecked state in checkbox mode.
-Otherwise, uses the default unchecked icon. */
+    /**
+     * If true, uses the `unchecked-icon` slot for the unchecked state in checkbox mode. Otherwise, uses the default unchecked icon.
+     *
+     * Available when `type==checkbox`.
+     */
     hasUncheckedIcon?: boolean;
     /** Optional appearance mode for checkbox type.
 Keep `default` for existing behavior. Use `updated` for the new checkbox visuals. */

package/dist/components/checkbox/ObcCheckbox.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcCheckboxChangeEvent, CheckboxStatus, CheckboxState} from '@oicl/openbridge-webcomponents/dist/components/checkbox/checkbox.js';
       import '@oicl/openbridge-webcomponents/dist/components/checkbox/checkbox.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcCheckboxChangeEvent, CheckboxStatus, CheckboxState} from '@oicl/openbridge-webcomponents/dist/components/checkbox/checkbox.js';
       import type { Snippet } from 'svelte';
 
@@ -22,8 +22,8 @@ state?: CheckboxState;
 When `true`, the checkbox is visually styled as disabled and does not respond to user input.
 Interaction is also locked when `state === loading`. */
 disabled?: boolean;
-      /** Internal: controls hover effects on the checkbox. Used by wrapper components such as `obc-checkbox-item`. */
-hasHoverEffects?: boolean
+     /** Internal: controls hover effects on the checkbox. Used by wrapper components such as `obc-checkbox-item`. */
+     hasHoverEffects?: boolean
    }
       export interface Events {
     onChange?: (event: ObcCheckboxChangeEvent) => void;
@@ -39,8 +39,7 @@ hasHoverEffects?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange}
-   ondisabled={onDisabled} >
+    use:forwardEvents={{'change': onChange, 'disabled': onDisabled}} >
       
       {#if children}
         {@render children()}

package/dist/components/checkbox-item/ObcCheckboxItem.svelte

@@ -3,7 +3,7 @@
     export type {ObcCheckboxChangeEvent, CheckboxStatus} from '@oicl/openbridge-webcomponents/dist/components/checkbox/checkbox.js';
 export type {ObcCheckboxItemState, ObcCheckboxItemHoverStyle} from '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcCheckboxChangeEvent, CheckboxStatus} from '@oicl/openbridge-webcomponents/dist/components/checkbox/checkbox.js';
 import type {ObcCheckboxItemState, ObcCheckboxItemHoverStyle} from '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
       import type { Snippet } from 'svelte';
@@ -16,7 +16,9 @@ import type {ObcCheckboxItemState, ObcCheckboxItemHoverStyle} from '@oicl/openbr
      disabled?: boolean;
      label?: string;
      isNested?: boolean;
+     /** Available when `isNested==true || hoverStyle==visual-target`. */
      isLevel1?: boolean;
+     /** Available when `isNested==true || hoverStyle==visual-target`. */
      isLevel2?: boolean;
      hoverStyle?: ObcCheckboxItemHoverStyle;
      ariaDescribedBy?: string
@@ -34,7 +36,7 @@ import type {ObcCheckboxItemState, ObcCheckboxItemHoverStyle} from '@oicl/openbr
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
       {#if children}
         {@render children()}

package/dist/components/checkbox-item/ObcCheckboxItem.svelte.d.ts

@@ -10,7 +10,9 @@ export interface Props {
     disabled?: boolean;
     label?: string;
     isNested?: boolean;
+    /** Available when `isNested==true || hoverStyle==visual-target`. */
     isLevel1?: boolean;
+    /** Available when `isNested==true || hoverStyle==visual-target`. */
     isLevel2?: boolean;
     hoverStyle?: ObcCheckboxItemHoverStyle;
     ariaDescribedBy?: string;

package/dist/components/clock/ObcClock.svelte

@@ -9,33 +9,30 @@
       export interface Props {
      class?: string;
      style?: string;
-      /** The ISO date/time string to display in the clock.
-Controls both the time (HH:MM) and the date (if `showDate` is true). */
-date?: string;
+     /** The ISO date/time string to display in the clock. Controls both the time (HH:MM) and the date (if `showDate` is true). */
+     date?: string;
      showSeconds?: boolean;
-      /** If true, displays the date (day and abbreviated month) after the time.
-Defaults to `false`. */
-showDate?: boolean;
-      /** If true, displays the timezone after the time.
-Defaults to `false`. */
-showTimezone?: boolean;
-      /** Timezone offset in hours, from UTC.
-Defaults to `0`. */
-timeZoneOffsetHours?: number;
+     /** If true, displays the date (day and abbreviated month) after the time. Defaults to `false`. */
+     showDate?: boolean;
+     /** If true, displays the timezone after the time. Defaults to `false`. */
+     showTimezone?: boolean;
+     /** Timezone offset in hours, from UTC. Defaults to `0`. */
+     timeZoneOffsetHours?: number;
      isClickable?: boolean;
+     /** Available when `showDate==true`. */
      showYear?: boolean;
+     /** Available when `showDate==true`. */
      showWeekday?: boolean;
+     /** Available when `showDate==true`. */
      locale?: string;
      hour12?: boolean;
      selected?: boolean;
      double?: boolean;
-      /** If true, the clock as a button is activated. For example, when the calendar is open, the clock is activated. */
-activated?: boolean;
+     /** If true, the clock as a button is activated. For example, when the calendar is open, the clock is activated. */
+     activated?: boolean;
      integrationBarMode?: boolean;
-      /** The pixel width at which the component switches to blink-only mode.
-When the viewport width is less than or equal to this value, only the blinking colon is shown.
-Defaults to `0` (never switches to blink-only). */
-blinkOnlyBreakpointPx?: number
+     /** The pixel width at which the component switches to blink-only mode. When the viewport width is less than or equal to this value, only the blinking colon is shown. Defaults to `0` (never switches to blink-only). */
+     blinkOnlyBreakpointPx?: number
    }
       export interface Events {
     

package/dist/components/clock/ObcClock.svelte.d.ts

@@ -3,22 +3,21 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** The ISO date/time string to display in the clock.
-Controls both the time (HH:MM) and the date (if `showDate` is true). */
+    /** The ISO date/time string to display in the clock. Controls both the time (HH:MM) and the date (if `showDate` is true). */
     date?: string;
     showSeconds?: boolean;
-    /** If true, displays the date (day and abbreviated month) after the time.
-Defaults to `false`. */
+    /** If true, displays the date (day and abbreviated month) after the time. Defaults to `false`. */
     showDate?: boolean;
-    /** If true, displays the timezone after the time.
-Defaults to `false`. */
+    /** If true, displays the timezone after the time. Defaults to `false`. */
     showTimezone?: boolean;
-    /** Timezone offset in hours, from UTC.
-Defaults to `0`. */
+    /** Timezone offset in hours, from UTC. Defaults to `0`. */
     timeZoneOffsetHours?: number;
     isClickable?: boolean;
+    /** Available when `showDate==true`. */
     showYear?: boolean;
+    /** Available when `showDate==true`. */
     showWeekday?: boolean;
+    /** Available when `showDate==true`. */
     locale?: string;
     hour12?: boolean;
     selected?: boolean;
@@ -26,9 +25,7 @@ Defaults to `0`. */
     /** If true, the clock as a button is activated. For example, when the calendar is open, the clock is activated. */
     activated?: boolean;
     integrationBarMode?: boolean;
-    /** The pixel width at which the component switches to blink-only mode.
-When the viewport width is less than or equal to this value, only the blinking colon is shown.
-Defaults to `0` (never switches to blink-only). */
+    /** The pixel width at which the component switches to blink-only mode. When the viewport width is less than or equal to this value, only the blinking colon is shown. Defaults to `0` (never switches to blink-only). */
     blinkOnlyBreakpointPx?: number;
 }
 export interface Events {

package/dist/components/command-button/ObcCommandButton.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     
       import '@oicl/openbridge-webcomponents/dist/components/command-button/command-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       
       import type { Snippet } from 'svelte';
 
@@ -18,19 +18,19 @@ Default: `false` */
 inCommand?: boolean
    }
       export interface Events {
-    
+    onClick?: (event: CustomEvent<unknown>) => void
   }
       export interface Slots {
   children?: Snippet
 }
-      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const {onClick, class: className, style, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-command-button
     use:setProperties={props}
     class={className}
     style={style}
-     >
+    use:forwardEvents={{'click': onClick}} >
       
       {#if children}
         {@render children()}

package/dist/components/command-button/ObcCommandButton.svelte.d.ts

@@ -12,6 +12,7 @@ Default: `false` */
     inCommand?: boolean;
 }
 export interface Events {
+    onClick?: (event: CustomEvent<unknown>) => void;
 }
 export interface Slots {
     children?: Snippet;

package/dist/components/command-menu/ObcCommandMenu.svelte

@@ -2,19 +2,17 @@
   <script lang="ts">
     
       import '@oicl/openbridge-webcomponents/dist/components/command-menu/command-menu.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Whether the menu is in the "in command" state.
-Controls the toggle and visual state. */
-inCommand?: boolean;
-      /** Whether to display the location slot.
-If false, the location is omitted from the menu. */
-showLocation?: boolean
+     /** Whether the menu is in the "in command" state. Controls the toggle and visual state. */
+     inCommand?: boolean;
+     /** Whether to display the location slot. If false, the location is omitted from the menu. */
+     showLocation?: boolean
    }
       export interface Events {
     onChange?: (event: CustomEvent<{inCommand: boolean}>) => void
@@ -37,7 +35,7 @@ showLocation?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
       {#if commandIcon}
         <div slot="command-icon">

package/dist/components/command-menu/ObcCommandMenu.svelte.d.ts

@@ -3,11 +3,9 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** Whether the menu is in the "in command" state.
-Controls the toggle and visual state. */
+    /** Whether the menu is in the "in command" state. Controls the toggle and visual state. */
     inCommand?: boolean;
-    /** Whether to display the location slot.
-If false, the location is omitted from the menu. */
+    /** Whether to display the location slot. If false, the location is omitted from the menu. */
     showLocation?: boolean;
 }
 export interface Events {

package/dist/components/communication-table/ObcCommunicationTable.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcCommunicationTableRowClickEvent, ObcCommunicationTableRow} from '@oicl/openbridge-webcomponents/dist/components/communication-table/communication-table.js';
       import '@oicl/openbridge-webcomponents/dist/components/communication-table/communication-table.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcCommunicationTableRowClickEvent, ObcCommunicationTableRow} from '@oicl/openbridge-webcomponents/dist/components/communication-table/communication-table.js';
       import type { Snippet } from 'svelte';
 
@@ -28,7 +28,7 @@
     use:setProperties={props}
     class={className}
     style={style}
-    onrow-click={onRowClick} >
+    use:forwardEvents={{'row-click': onRowClick}} >
       
     {#if children}
       {@render children()}

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

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcContextMenuInputChangeEvent, ObcContextMenuInputItemClickEvent, ContextMenuType, ContextMenuOption, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
       import '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.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';
 
@@ -35,8 +35,12 @@ selectedValues?: string[];
 
 If true, displays the `title` property and a close icon button. */
 hasTitleBar?: boolean;
-      /** Title text displayed in the title bar (if `hasTitleBar` is true). */
-title?: string;
+     /**
+      * Title text displayed in the title bar (if `hasTitleBar` is true).
+      *
+      * Available when `hasTitleBar==true`.
+      */
+     title?: string;
       /** Array of column groups for the `multi-with-subtitles` layout.
 
 Each group defines a `title`, `columns` (number of columns in the group), and `options` (array of options for that group). */
@@ -69,9 +73,7 @@ selectPerGroup?: boolean | undefined
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange}
-   onitem-click={onItemClick}
-   onclose={onClose} >
+    use:forwardEvents={{'change': onChange, 'item-click': onItemClick, 'close': onClose}} >
       
       {#if children}
         {@render children()}

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

@@ -30,7 +30,11 @@ For multi-select variants, can contain multiple values. For single-select, conta
 
 If true, displays the `title` property and a close icon button. */
     hasTitleBar?: boolean;
-    /** Title text displayed in the title bar (if `hasTitleBar` is true). */
+    /**
+     * Title text displayed in the title bar (if `hasTitleBar` is true).
+     *
+     * Available when `hasTitleBar==true`.
+     */
     title?: string;
     /** Array of column groups for the `multi-with-subtitles` layout.
 

package/dist/components/date-item/ObcDateItem.svelte

@@ -3,7 +3,7 @@
     export type {DateItemEvent} from '@oicl/openbridge-webcomponents/dist/components/event-item/event-item.js';
 export type {DateItemSize} from '@oicl/openbridge-webcomponents/dist/components/date-item/date-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/date-item/date-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {DateItemEvent} from '@oicl/openbridge-webcomponents/dist/components/event-item/event-item.js';
 import type {DateItemSize} from '@oicl/openbridge-webcomponents/dist/components/date-item/date-item.js';
       import type { Snippet } from 'svelte';
@@ -15,21 +15,16 @@ import type {DateItemSize} from '@oicl/openbridge-webcomponents/dist/components/
 - `small`: Compact, shows only the date and event dots.
 - `large`: Expands to show event titles and descriptions for up to two events. */
 size?: DateItemSize;
-      /** Whether the date item is disabled. When true, the button is visually muted and not interactive. */
-disabled?: boolean;
-      /** Array of events to display on this date.
-In small size, shows an event dot indicator.
-In large size, displays event details using obc-event-item components. */
-events?: DateItemEvent[];
-      /** Number of events to display from the events array. When 0, shows all events.
-In small size, always caps at 2 dots regardless of this value. */
-eventCount?: number;
-      /** Whether the date item represents today.
-When true, displays the "Today" label (in large size) and uses amplified styling. */
-isToday?: boolean;
-      /** Whether the date item is checked/selected.
-When true, uses selected styling (blue filled background). */
-checked?: boolean;
+     /** Whether the date item is disabled. When true, the button is visually muted and not interactive. */
+     disabled?: boolean;
+     /** Array of events to display on this date. In small size, shows an event dot indicator. In large size, displays event details using obc-event-item components. */
+     events?: DateItemEvent[];
+     /** Number of events to display from the events array. When 0, shows all events. In small size, always caps at 2 dots regardless of this value. */
+     eventCount?: number;
+     /** Whether the date item represents today. When true, displays the "Today" label (in large size) and uses amplified styling. */
+     isToday?: boolean;
+     /** Whether the date item is checked/selected. When true, uses selected styling (blue filled background). */
+     checked?: boolean;
       /** The numeric day of the month to display (1–31). Values outside this range are clamped. */
 date?: number
    }
@@ -46,7 +41,7 @@ date?: number
     use:setProperties={props}
     class={className}
     style={style}
-    ondate-click={onDateClick} >
+    use:forwardEvents={{'date-click': onDateClick}} >
       
       {#if children}
         {@render children()}

package/dist/components/date-item/ObcDateItem.svelte.d.ts

@@ -11,18 +11,13 @@ export interface Props {
     size?: DateItemSize;
     /** Whether the date item is disabled. When true, the button is visually muted and not interactive. */
     disabled?: boolean;
-    /** Array of events to display on this date.
-In small size, shows an event dot indicator.
-In large size, displays event details using obc-event-item components. */
+    /** Array of events to display on this date. In small size, shows an event dot indicator. In large size, displays event details using obc-event-item components. */
     events?: DateItemEvent[];
-    /** Number of events to display from the events array. When 0, shows all events.
-In small size, always caps at 2 dots regardless of this value. */
+    /** Number of events to display from the events array. When 0, shows all events. In small size, always caps at 2 dots regardless of this value. */
     eventCount?: number;
-    /** Whether the date item represents today.
-When true, displays the "Today" label (in large size) and uses amplified styling. */
+    /** Whether the date item represents today. When true, displays the "Today" label (in large size) and uses amplified styling. */
     isToday?: boolean;
-    /** Whether the date item is checked/selected.
-When true, uses selected styling (blue filled background). */
+    /** Whether the date item is checked/selected. When true, uses selected styling (blue filled background). */
     checked?: boolean;
     /** The numeric day of the month to display (1–31). Values outside this range are clamped. */
     date?: number;

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 { setProperties, forwardEvents } from "../../util.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,21 +16,25 @@ Example:
   { value: 'volvo', label: 'Volvo' },
   { value: 'xc90', label: 'XC 90', level: 2 }
 ] */
-options?: { value: string; label: string; level?: number | undefined; }[];
-      /** The value of the currently selected option. If not set, defaults to the first option in the list. */
-value?: string | undefined;
+options?: DropdownButtonOption[];
+     /** The value of the currently selected option. If not set, defaults to the first option in the list unless `allowEmptySelection` is true. */
+     value?: string | undefined;
      disabled?: boolean;
-      /** If true, the select expands to fill the width of its container. Default is false. */
-fullWidth?: boolean;
+     /** If true, the select expands to fill the width of its container. Default is false. */
+     fullWidth?: boolean;
+     /** If true, a `value` that does not match any option leaves the button with no option selected, showing `placeholder` instead of defaulting to the first option. Default is false. */
+     allowEmptySelection?: boolean;
+     /** Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string. */
+     placeholder?: string;
       /** Controls the button's display type.
 - `label`: Text label only (default)
 - `icon`: Icon only, no label
 - `label-icon`: Icon before the label */
 type?: DropdownButtonType;
-      /** If true, the dropdown menu opens above the button. */
-openTop?: boolean;
-      /** If true, the select is integration style. Default is false, only for integration bar. */
-integration?: boolean;
+     /** If true, the dropdown menu opens above the button. */
+     openTop?: boolean;
+     /** If true, the select is integration style. Default is false, only for integration bar. */
+     integration?: boolean;
      flat?: boolean
    }
       export interface Events {
@@ -48,8 +52,7 @@ integration?: boolean;
     use:setProperties={props}
     class={className}
     style={style}
-    ondropdown-change={onDropdownChange}
-   onchange={onChange} >
+    use:forwardEvents={{'dropdown-change': onDropdownChange, 'change': onChange}} >
       
       {#if children}
         {@render children()}

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,16 +11,16 @@ Example:
 { value: 'volvo', label: 'Volvo' },
 { value: 'xc90', label: 'XC 90', level: 2 }
 ] */
-    options?: {
-        value: string;
-        label: string;
-        level?: number | undefined;
-    }[];
-    /** The value of the currently selected option. If not set, defaults to the first option in the list. */
+    options?: DropdownButtonOption[];
+    /** The value of the currently selected option. If not set, defaults to the first option in the list unless `allowEmptySelection` is true. */
     value?: string | undefined;
     disabled?: boolean;
     /** If true, the select expands to fill the width of its container. Default is false. */
     fullWidth?: boolean;
+    /** If true, a `value` that does not match any option leaves the button with no option selected, showing `placeholder` instead of defaulting to the first option. Default is false. */
+    allowEmptySelection?: boolean;
+    /** Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string. */
+    placeholder?: string;
     /** Controls the button's display type.
 - `label`: Text label only (default)
 - `icon`: Icon only, no label
@@ -43,6 +43,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>;