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

package/dist/components/textarea-field/ObcTextareaField.svelte

@@ -3,7 +3,8 @@
     export type {VoiceActionDetail, TextareaFieldType, Attachment} from '@oicl/openbridge-webcomponents/dist/components/textarea-field/textarea-field.js';
 export type {AudioRecordingStatus} from '@oicl/openbridge-webcomponents/dist/components/audio-recording-item/audio-recording-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/textarea-field/textarea-field.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {VoiceActionDetail, TextareaFieldType, Attachment} from '@oicl/openbridge-webcomponents/dist/components/textarea-field/textarea-field.js';
 import type {AudioRecordingStatus} from '@oicl/openbridge-webcomponents/dist/components/audio-recording-item/audio-recording-item.js';
       import type { Snippet } from 'svelte';
@@ -11,57 +12,70 @@ import type {AudioRecordingStatus} from '@oicl/openbridge-webcomponents/dist/com
       export interface Props {
      class?: string;
      style?: string;
-      /** Field type: 'rich' (no send button) or 'message' (with send button). */
-type?: TextareaFieldType;
-      /** The current text value of the input field. */
-value?: string;
-      /** If true, the textarea will not update its value from external changes while focused. */
-rejectUpdatesOnFocus?: boolean;
-      /** If true, the value will only be initially set from the external model and not updated on subsequent changes. */
-rejectUpdates?: boolean;
-      /** If true, the textarea will not update its value if the value is the same as the previous value.
-Useful to avoid React re-rendering resetting the value. */
-rejectDuplicateUpdates?: boolean;
-      /** Placeholder text shown when the input is empty. */
-placeholder?: string;
-      /** Label text displayed above the input field. */
-label?: string;
-      /** Error text displayed below the field when `error` is true. */
-errorText?: string;
-      /** Maximum number of characters allowed in the textarea. */
-maxlength?: number | undefined;
-      /** Disables the input field and all actions. */
-disabled?: boolean;
-      /** Shows error state with visual highlight. */
-error?: boolean;
-      /** Shows a required indicator next to the label. */
-required?: boolean;
-      /** Shows the label above the input field. */
-showLabel?: boolean;
-      /** Shows the toolbar with action buttons. */
-showToolbar?: boolean;
-      /** Shows the voice recording button. */
-showVoiceRecording?: boolean;
-      /** Shows a leading icon before the input field. */
-hasLeadingIcon?: boolean;
-      /** Whether voice recording is currently active.
-When true, shows the audio-recording-item instead of textarea. */
-recording?: boolean;
-      /** Current recording duration in seconds. */
-recordingDuration?: number;
-      /** Array of audio level values (0-1) for waveform visualization.
-New values should be added to the end (right side) and old values shift left. */
-audioLevels?: number[];
-      /** Recording status passed to audio-recording-item.
-Use 'recording' during active recording, and 'playback' when paused
-to allow the user to preview the recorded audio with a slider.
-Automatically reset to 'recording' when `recording` becomes false. */
-recordingStatus?: AudioRecordingStatus;
-      /** Current playback position (0-1) for playback mode.
-Only relevant when recordingStatus is 'playback'. */
-playbackPosition?: number;
-      /** Array of file attachments displayed as removable chips. */
-attachments?: Attachment[]
+     /** Field type: 'rich' (no send button) or 'message' (with send button). */
+     type?: TextareaFieldType;
+     /** The current text value of the input field. */
+     value?: string;
+     /** If true, the textarea will not update its value from external changes while focused. */
+     rejectUpdatesOnFocus?: boolean;
+     /** If true, the value will only be initially set from the external model and not updated on subsequent changes. */
+     rejectUpdates?: boolean;
+     /** If true, the textarea will not update its value if the value is the same as the previous value. Useful to avoid React re-rendering resetting the value. */
+     rejectDuplicateUpdates?: boolean;
+     /** Placeholder text shown when the input is empty. */
+     placeholder?: string;
+     /** Label text displayed above the input field. */
+     label?: string;
+     /**
+      * Error text displayed below the field when `error` is true.
+      *
+      * Available when `error==true`.
+      */
+     errorText?: string;
+     /** Maximum number of characters allowed in the textarea. */
+     maxlength?: number | undefined;
+     /** Disables the input field and all actions. */
+     disabled?: boolean;
+     /** Shows error state with visual highlight. */
+     error?: boolean;
+     /** Shows a required indicator next to the label. */
+     required?: boolean;
+     /** Shows the label above the input field. */
+     showLabel?: boolean;
+     /** Shows the toolbar with action buttons. */
+     showToolbar?: boolean;
+     /** Shows the voice recording button. */
+     showVoiceRecording?: boolean;
+     /** Shows a leading icon before the input field. */
+     hasLeadingIcon?: boolean;
+     /** Whether voice recording is currently active. When true, shows the audio-recording-item instead of textarea. */
+     recording?: boolean;
+     /**
+      * Current recording duration in seconds.
+      *
+      * Available when `recording==true`.
+      */
+     recordingDuration?: number;
+     /**
+      * Array of audio level values (0-1) for waveform visualization. New values should be added to the end (right side) and old values shift left.
+      *
+      * Available when `recording==true`.
+      */
+     audioLevels?: number[];
+     /**
+      * Recording status passed to audio-recording-item. Use 'recording' during active recording, and 'playback' when paused to allow the user to preview the recorded audio with a slider. Automatically reset to 'recording' when `recording` becomes false.
+      *
+      * Available when `recording==true`.
+      */
+     recordingStatus?: AudioRecordingStatus;
+     /**
+      * Current playback position (0-1) for playback mode. Only relevant when recordingStatus is 'playback'.
+      *
+      * Available when `recording==true`.
+      */
+     playbackPosition?: number;
+     /** Array of file attachments displayed as removable chips. */
+     attachments?: Attachment[]
    }
       export interface Events {
     onChange?: (event: CustomEvent<{value: string}>) => void;
@@ -85,20 +99,9 @@ attachments?: Attachment[]
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange}
-   oninput={onInput}
-   onblur={onBlur}
-   onsend-click={onSendClick}
-   onadd-click={onAddClick}
-   onscreenshot-click={onScreenshotClick}
-   onimage-click={onImageClick}
-   onattachment-click={onAttachmentClick}
-   onvoice-action={onVoiceAction}
-   onattachment-remove={onAttachmentRemove} >
+    use:forwardEvents={{'change': onChange, 'input': onInput, 'blur': onBlur, 'send-click': onSendClick, 'add-click': onAddClick, 'screenshot-click': onScreenshotClick, 'image-click': onImageClick, 'attachment-click': onAttachmentClick, 'voice-action': onVoiceAction, 'attachment-remove': onAttachmentRemove}} >
       
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
     </obc-textarea-field>

package/dist/components/textarea-field/ObcTextareaField.svelte.d.ts

@@ -13,14 +13,17 @@ export interface Props {
     rejectUpdatesOnFocus?: boolean;
     /** If true, the value will only be initially set from the external model and not updated on subsequent changes. */
     rejectUpdates?: boolean;
-    /** If true, the textarea will not update its value if the value is the same as the previous value.
-Useful to avoid React re-rendering resetting the value. */
+    /** If true, the textarea will not update its value if the value is the same as the previous value. Useful to avoid React re-rendering resetting the value. */
     rejectDuplicateUpdates?: boolean;
     /** Placeholder text shown when the input is empty. */
     placeholder?: string;
     /** Label text displayed above the input field. */
     label?: string;
-    /** Error text displayed below the field when `error` is true. */
+    /**
+     * Error text displayed below the field when `error` is true.
+     *
+     * Available when `error==true`.
+     */
     errorText?: string;
     /** Maximum number of characters allowed in the textarea. */
     maxlength?: number | undefined;
@@ -38,21 +41,31 @@ Useful to avoid React re-rendering resetting the value. */
     showVoiceRecording?: boolean;
     /** Shows a leading icon before the input field. */
     hasLeadingIcon?: boolean;
-    /** Whether voice recording is currently active.
-When true, shows the audio-recording-item instead of textarea. */
+    /** Whether voice recording is currently active. When true, shows the audio-recording-item instead of textarea. */
     recording?: boolean;
-    /** Current recording duration in seconds. */
+    /**
+     * Current recording duration in seconds.
+     *
+     * Available when `recording==true`.
+     */
     recordingDuration?: number;
-    /** Array of audio level values (0-1) for waveform visualization.
-New values should be added to the end (right side) and old values shift left. */
+    /**
+     * Array of audio level values (0-1) for waveform visualization. New values should be added to the end (right side) and old values shift left.
+     *
+     * Available when `recording==true`.
+     */
     audioLevels?: number[];
-    /** Recording status passed to audio-recording-item.
-Use 'recording' during active recording, and 'playback' when paused
-to allow the user to preview the recorded audio with a slider.
-Automatically reset to 'recording' when `recording` becomes false. */
+    /**
+     * Recording status passed to audio-recording-item. Use 'recording' during active recording, and 'playback' when paused to allow the user to preview the recorded audio with a slider. Automatically reset to 'recording' when `recording` becomes false.
+     *
+     * Available when `recording==true`.
+     */
     recordingStatus?: AudioRecordingStatus;
-    /** Current playback position (0-1) for playback mode.
-Only relevant when recordingStatus is 'playback'. */
+    /**
+     * Current playback position (0-1) for playback mode. Only relevant when recordingStatus is 'playback'.
+     *
+     * Available when `recording==true`.
+     */
     playbackPosition?: number;
     /** Array of file attachments displayed as removable chips. */
     attachments?: Attachment[];

package/dist/components/textbox/ObcTextbox.svelte

@@ -0,0 +1,41 @@
+
+  <script lang="ts">
+    export type {ObcTextboxAlignment, ObcTextboxSize, ObcTextboxFontWeight} from '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
+      import '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
+      import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
+      import type {ObcTextboxAlignment, ObcTextboxSize, ObcTextboxFontWeight} from '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
+      import type { Snippet } from 'svelte';
+
+      export interface Props {
+     class?: string;
+     style?: string;
+     alignment?: ObcTextboxAlignment;
+     size?: ObcTextboxSize;
+     fontWeight?: ObcTextboxFontWeight;
+     tabularNums?: boolean
+   }
+      export interface Events {
+    
+  }
+      export interface Slots {
+  children?: Snippet;
+  length?: Snippet
+}
+      const { class: className, style, children, length, ...props} = $props<Props & Events & Slots>();
+
+    </script>
+    <obc-textbox
+    use:setProperties={props}
+    class={className}
+    style={style}
+     >
+      
+      {#if children}
+        {@render children()}
+      {/if}
+
+      {#if length}
+        <NamedSlot name="length" content={length} />
+      {/if}
+    </obc-textbox>

package/dist/components/textbox/ObcTextbox.svelte.d.ts

@@ -0,0 +1,25 @@
+import '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
+import type { ObcTextboxAlignment, ObcTextboxSize, ObcTextboxFontWeight } from '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    style?: string;
+    alignment?: ObcTextboxAlignment;
+    size?: ObcTextboxSize;
+    fontWeight?: ObcTextboxFontWeight;
+    tabularNums?: boolean;
+}
+export interface Events {
+}
+export interface Slots {
+    children?: Snippet;
+    length?: Snippet;
+}
+type $$ComponentProps = Props & Events & Slots;
+declare const ObcTextbox: import("svelte").Component<$$ComponentProps, {
+    ObcTextboxAlignment: typeof ObcTextboxAlignment;
+    ObcTextboxSize: typeof ObcTextboxSize;
+    ObcTextboxFontWeight: typeof ObcTextboxFontWeight;
+}, "">;
+type ObcTextbox = ReturnType<typeof ObcTextbox>;
+export default ObcTextbox;

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

@@ -2,7 +2,8 @@
   <script lang="ts">
     export type {ObcTitleContainerState} from '@oicl/openbridge-webcomponents/dist/components/title-container/title-container.js';
       import '@oicl/openbridge-webcomponents/dist/components/title-container/title-container.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcTitleContainerState} from '@oicl/openbridge-webcomponents/dist/components/title-container/title-container.js';
       import type { Snippet } from 'svelte';
 
@@ -19,39 +20,31 @@
       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
     use:setProperties={props}
     class={className}
     style={style}
-    onaction-click={onActionClick} >
+    use:forwardEvents={{'action-click': onActionClick}} >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
 
       {#if title}
-        <div slot="title">
-          {@render title()}
-        </div>
+        <NamedSlot name="title" content={title} />
       {/if}
 
-      {#if label}
-        <div slot="label">
-          {@render label()}
-        </div>
+      {#if labelSnippet}
+        <NamedSlot name="label" content={labelSnippet} />
       {/if}
 
       {#if actions}
-        <div slot="actions">
-          {@render actions()}
-        </div>
+        <NamedSlot name="actions" content={actions} />
       {/if}
     </obc-title-container>

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;

package/dist/components/toggle-button-group/ObcToggleButtonGroup.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcToggleButtonOptionType, ObcToggleButtonOptionVariant} from '@oicl/openbridge-webcomponents/dist/components/toggle-button-option/toggle-button-option.js';
       import '@oicl/openbridge-webcomponents/dist/components/toggle-button-group/toggle-button-group.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcToggleButtonOptionType, ObcToggleButtonOptionVariant} from '@oicl/openbridge-webcomponents/dist/components/toggle-button-option/toggle-button-option.js';
       import type { Snippet } from 'svelte';
 
@@ -47,6 +47,14 @@ When true, the group will not update its selection when the `value` property cha
 
 Defaults to false. */
 externalControl?: boolean;
+      /** If true, a `value` that does not match any enabled option leaves the group with no option selected
+instead of defaulting to the first enabled option.
+
+This also applies when the currently selected option becomes disabled: the group clears its selection
+rather than falling back to another option.
+
+Defaults to false (the first enabled option is selected when the value does not match). */
+allowEmptySelection?: boolean;
       /** Disables the entire toggle button group and all contained options when true.
 
 When disabled, no option can be selected or interacted with. */
@@ -57,19 +65,20 @@ This setting is propagated to all child `<obc-toggle-button-option>` elements. *
 large?: boolean
    }
       export interface Events {
-    onValue?: (event: CustomEvent<{value: string, previousValue: string}>) => void
+    onValue?: (event: CustomEvent<{value: string, previousValue: string}>) => void;
+    onChange?: (event: CustomEvent<{value: string}>) => void
   }
       export interface Slots {
   children?: Snippet
 }
-      const {onValue, class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const {onValue, onChange, class: className, style, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-toggle-button-group
     use:setProperties={props}
     class={className}
     style={style}
-    onvalue={onValue} >
+    use:forwardEvents={{'value': onValue, 'change': onChange}} >
       
       {#if children}
         {@render children()}

package/dist/components/toggle-button-group/ObcToggleButtonGroup.svelte.d.ts

@@ -42,6 +42,14 @@ When true, the group will not update its selection when the `value` property cha
 
 Defaults to false. */
     externalControl?: boolean;
+    /** If true, a `value` that does not match any enabled option leaves the group with no option selected
+instead of defaulting to the first enabled option.
+
+This also applies when the currently selected option becomes disabled: the group clears its selection
+rather than falling back to another option.
+
+Defaults to false (the first enabled option is selected when the value does not match). */
+    allowEmptySelection?: boolean;
     /** Disables the entire toggle button group and all contained options when true.
 
 When disabled, no option can be selected or interacted with. */
@@ -56,6 +64,9 @@ export interface Events {
         value: string;
         previousValue: string;
     }>) => void;
+    onChange?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
 }
 export interface Slots {
     children?: Snippet;

package/dist/components/toggle-button-option/ObcToggleButtonOption.svelte

@@ -2,34 +2,40 @@
   <script lang="ts">
     export type {ObcToggleButtonOptionType, ObcToggleButtonOptionVariant} from '@oicl/openbridge-webcomponents/dist/components/toggle-button-option/toggle-button-option.js';
       import '@oicl/openbridge-webcomponents/dist/components/toggle-button-option/toggle-button-option.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcToggleButtonOptionType, ObcToggleButtonOptionVariant} from '@oicl/openbridge-webcomponents/dist/components/toggle-button-option/toggle-button-option.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Value associated with this option. Used in selection events. */
-value?: string;
-      /** Whether this option is currently selected (toggles visual state). */
-selected?: boolean;
-      /** Whether this option is currently activated (toggles visual state). */
-activated?: boolean;
-      /** Layout of icon and label.
-One of: "icon", "text", "icon-text-under", "text-icon".
-Controls which slots/content are displayed and their arrangement. */
-type?: ObcToggleButtonOptionType;
-      /** The visual variant of the toggle button option.
-One of: "flat", "regular", "normal". */
-variant?: ObcToggleButtonOptionVariant;
-      /** If true, button width shrinks to fit label content. */
-hugText?: boolean;
-      /** If true, renders the divider between options. */
-showDivider?: boolean;
-      /** If true, the option is disabled and cannot be interacted with. */
-disabled?: boolean;
-      /** If true, the option uses a larger size. */
-large?: boolean
+     /** Value associated with this option. Used in selection events. */
+     value?: string;
+     /** Whether this option is currently selected (toggles visual state). */
+     selected?: boolean;
+     /** Whether this option is currently activated (toggles visual state). */
+     activated?: boolean;
+     /** Layout of icon and label. One of: "icon", "text", "icon-text-under", "text-icon". Controls which slots/content are displayed and their arrangement. */
+     type?: ObcToggleButtonOptionType;
+     /** The visual variant of the toggle button option. One of: "flat", "regular", "normal". */
+     variant?: ObcToggleButtonOptionVariant;
+     /**
+      * If true, button width shrinks to fit label content.
+      *
+      * Available when `type!=icon-text-under`.
+      */
+     hugText?: boolean;
+     /** If true, renders the divider between options. */
+     showDivider?: boolean;
+     /** If true, the option is disabled and cannot be interacted with. */
+     disabled?: boolean;
+     /**
+      * If true, the option uses a larger size.
+      *
+      * Available when `type!=icon-text-under`.
+      */
+     large?: boolean
    }
       export interface Events {
     onSelected?: (event: CustomEvent<{value: string}>) => void
@@ -45,15 +51,13 @@ large?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onselected={onSelected} >
+    use:forwardEvents={{'selected': onSelected}} >
       
       {#if children}
         {@render children()}
       {/if}
 
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-toggle-button-option>

package/dist/components/toggle-button-option/ObcToggleButtonOption.svelte.d.ts

@@ -10,20 +10,25 @@ export interface Props {
     selected?: boolean;
     /** Whether this option is currently activated (toggles visual state). */
     activated?: boolean;
-    /** Layout of icon and label.
-One of: "icon", "text", "icon-text-under", "text-icon".
-Controls which slots/content are displayed and their arrangement. */
+    /** Layout of icon and label. One of: "icon", "text", "icon-text-under", "text-icon". Controls which slots/content are displayed and their arrangement. */
     type?: ObcToggleButtonOptionType;
-    /** The visual variant of the toggle button option.
-One of: "flat", "regular", "normal". */
+    /** The visual variant of the toggle button option. One of: "flat", "regular", "normal". */
     variant?: ObcToggleButtonOptionVariant;
-    /** If true, button width shrinks to fit label content. */
+    /**
+     * If true, button width shrinks to fit label content.
+     *
+     * Available when `type!=icon-text-under`.
+     */
     hugText?: boolean;
     /** If true, renders the divider between options. */
     showDivider?: boolean;
     /** If true, the option is disabled and cannot be interacted with. */
     disabled?: boolean;
-    /** If true, the option uses a larger size. */
+    /**
+     * If true, the option uses a larger size.
+     *
+     * Available when `type!=icon-text-under`.
+     */
     large?: boolean;
 }
 export interface Events {

package/dist/components/toggle-button-three-state/ObcToggleButtonThreeState.svelte

@@ -2,17 +2,17 @@
   <script lang="ts">
     export type {ObcToggleButtonThreeStateChangeEvent, ObcToggleButtonThreeStateValue} from '@oicl/openbridge-webcomponents/dist/components/toggle-button-three-state/toggle-button-three-state.js';
       import '@oicl/openbridge-webcomponents/dist/components/toggle-button-three-state/toggle-button-three-state.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcToggleButtonThreeStateChangeEvent, ObcToggleButtonThreeStateValue} from '@oicl/openbridge-webcomponents/dist/components/toggle-button-three-state/toggle-button-three-state.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Current state of the toggle. */
-state?: ObcToggleButtonThreeStateValue;
-      /** Disables interaction when true. */
-disabled?: boolean
+     /** Current state of the toggle. */
+     state?: ObcToggleButtonThreeStateValue;
+     /** Disables interaction when true. */
+     disabled?: boolean
    }
       export interface Events {
     onChange?: (event: ObcToggleButtonThreeStateChangeEvent) => void
@@ -27,7 +27,7 @@ disabled?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
     {#if children}
       {@render children()}

package/dist/components/toggle-button-vertical-group/ObcToggleButtonVerticalGroup.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcToggleButtonVerticalOptionType} from '@oicl/openbridge-webcomponents/dist/components/toggle-button-vertical-option/toggle-button-vertical-option.js';
       import '@oicl/openbridge-webcomponents/dist/components/toggle-button-vertical-group/toggle-button-vertical-group.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcToggleButtonVerticalOptionType} from '@oicl/openbridge-webcomponents/dist/components/toggle-button-vertical-option/toggle-button-vertical-option.js';
       import type { Snippet } from 'svelte';
 
@@ -21,6 +21,14 @@ type?: ObcToggleButtonVerticalOptionType;
 
 Defaults to false. */
 hugWidth?: boolean;
+      /** If true, a `value` that does not match any enabled option leaves the group with no option selected
+instead of defaulting to the first enabled option.
+
+This also applies when the currently selected option becomes disabled: the group clears its selection
+rather than falling back to another option.
+
+Defaults to false (the first enabled option is selected when the value does not match). */
+allowEmptySelection?: boolean;
       /** Disables the entire group and all contained options.
 
 When set to true, all options become non-interactive, regardless of their individual disabled state.
@@ -29,19 +37,20 @@ Defaults to false. */
 disabled?: boolean
    }
       export interface Events {
-    onValue?: (event: CustomEvent<{value: string, previousValue: string}>) => void
+    onValue?: (event: CustomEvent<{value: string, previousValue: string}>) => void;
+    onChange?: (event: CustomEvent<{value: string}>) => void
   }
       export interface Slots {
   children?: Snippet
 }
-      const {onValue, class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const {onValue, onChange, class: className, style, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-toggle-button-vertical-group
     use:setProperties={props}
     class={className}
     style={style}
-    onvalue={onValue} >
+    use:forwardEvents={{'value': onValue, 'change': onChange}} >
       
       {#if children}
         {@render children()}