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

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 { setProperties, forwardEvents } from "../../util.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,19 +12,19 @@
       /** 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'` */
 name?: string;
-      /** The currently selected value. Setting this will pre-select the corresponding card radio. */
-value?: string;
-      /** Disables all options in the group when true. */
-disabled?: boolean;
-      /** Marks the group as required for form validation. */
-required?: boolean;
-      /** If true, applies "top" styling to the first card (e.g., for rounded corners). The last card always receives "bottom" styling. */
-top?: boolean
+     /** The currently selected value. Setting this will pre-select the corresponding card radio. */
+     value?: string;
+     /** Disables all options in the group when true. */
+     disabled?: boolean;
+     /** Marks the group as required for form validation. */
+     required?: boolean;
+     /** If true, applies "top" styling to the first card (e.g., for rounded corners). The last card always receives "bottom" styling. */
+     top?: boolean
    }
       export interface Events {
     onChange?: (event: ObcElevatedCardRadioGroupChangeEvent) => void
@@ -39,7 +39,7 @@ top?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
       {#if children}
         {@render children()}

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/event-item/ObcEventItem.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {EventItemType} from '@oicl/openbridge-webcomponents/dist/components/event-item/event-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/event-item/event-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {EventItemType} from '@oicl/openbridge-webcomponents/dist/components/event-item/event-item.js';
       import type { Snippet } from 'svelte';
 
@@ -10,13 +10,16 @@
      class?: string;
      style?: string;
      title?: string;
+     /** Available when `eventItemType==DoubleLine`. */
      description?: string;
      startTime?: string;
      endTime?: string;
      eventItemType?: EventItemType;
      hasArrow?: boolean;
      hasTime?: boolean;
+     /** Available when `hasTime==true`. */
      hasEndTime?: boolean;
+     /** Available when `eventItemType==Aggregated`. */
      aggregatedCount?: number;
      colorCoded?: boolean;
      disabled?: boolean
@@ -34,7 +37,7 @@
     use:setProperties={props}
     class={className}
     style={style}
-    onevent-click={onEventClick} >
+    use:forwardEvents={{'event-click': onEventClick}} >
       
       {#if children}
         {@render children()}

package/dist/components/event-item/ObcEventItem.svelte.d.ts

@@ -5,13 +5,16 @@ export interface Props {
     class?: string;
     style?: string;
     title?: string;
+    /** Available when `eventItemType==DoubleLine`. */
     description?: string;
     startTime?: string;
     endTime?: string;
     eventItemType?: EventItemType;
     hasArrow?: boolean;
     hasTime?: boolean;
+    /** Available when `hasTime==true`. */
     hasEndTime?: boolean;
+    /** Available when `eventItemType==Aggregated`. */
     aggregatedCount?: number;
     colorCoded?: boolean;
     disabled?: boolean;

package/dist/components/event-list/ObcEventList.svelte

@@ -9,14 +9,12 @@
       export interface Props {
      class?: string;
      style?: string;
-      /** Whether to hide the date header. */
-showHeader?: boolean;
-      /** The date to display in the header. The component will extract
-day name, month name, date number, and year from this Date object.
-Also accepts a timestamp (number) for compatibility with Storybook. */
-date?: number | Date;
-      /** Array of events to display in the list. */
-events?: DateItemEvent[];
+     /** Whether to show the date header. */
+     showHeader?: boolean;
+     /** The date to display in the header. The component will extract day name, month name, date number, and year from this Date object. Also accepts a timestamp (number) for compatibility with Storybook. */
+     date?: number | Date;
+     /** Array of events to display in the list. */
+     events?: DateItemEvent[];
       /** Locale for date formatting. Uses browser default if not specified. */
 locale?: string | undefined
    }

package/dist/components/event-list/ObcEventList.svelte.d.ts

@@ -4,11 +4,9 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** Whether to hide the date header. */
+    /** Whether to show the date header. */
     showHeader?: boolean;
-    /** The date to display in the header. The component will extract
-day name, month name, date number, and year from this Date object.
-Also accepts a timestamp (number) for compatibility with Storybook. */
+    /** The date to display in the header. The component will extract day name, month name, date number, and year from this Date object. Also accepts a timestamp (number) for compatibility with Storybook. */
     date?: number | Date;
     /** Array of events to display in the list. */
     events?: DateItemEvent[];

package/dist/components/filter-chip/ObcFilterChip.svelte

@@ -2,21 +2,21 @@
   <script lang="ts">
     export type {ObcFilterChipChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/filter-chip/filter-chip.js';
       import '@oicl/openbridge-webcomponents/dist/components/filter-chip/filter-chip.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcFilterChipChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/filter-chip/filter-chip.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Whether the chip is disabled (non-interactive). When true, the chip cannot be toggled and appears muted. */
-disabled?: boolean;
-      /** The text label displayed on the chip. Should clearly describe the filter criterion. */
-label?: string;
-      /** Whether the chip is currently checked (selected/active). Toggles when the chip is clicked. */
-checked?: boolean;
-      /** Whether to show a leading icon. If true, displays the icon placed in the default slot. */
-showIcon?: boolean
+     /** Whether the chip is disabled (non-interactive). When true, the chip cannot be toggled and appears muted. */
+     disabled?: boolean;
+     /** The text label displayed on the chip. Should clearly describe the filter criterion. */
+     label?: string;
+     /** Whether the chip is currently checked (selected/active). Toggles when the chip is clicked. */
+     checked?: boolean;
+     /** Whether to show a leading icon. If true, displays the icon placed in the default slot. */
+     showIcon?: boolean
    }
       export interface Events {
     onChipToggle?: (event: ObcFilterChipChangeEvent) => void
@@ -31,7 +31,7 @@ showIcon?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onchip-toggle={onChipToggle} >
+    use:forwardEvents={{'chip-toggle': onChipToggle}} >
       
       {#if children}
         {@render children()}

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

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcFloatingItemType, ObcFloatingItemDirection, ObcFloatingItemLineType} from '@oicl/openbridge-webcomponents/dist/components/floating-item/floating-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/floating-item/floating-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcFloatingItemType, ObcFloatingItemDirection, ObcFloatingItemLineType} from '@oicl/openbridge-webcomponents/dist/components/floating-item/floating-item.js';
       import type { Snippet } from 'svelte';
 
@@ -21,20 +21,22 @@ type?: ObcFloatingItemType;
 
 Choose `vertical` for narrow containers or when space is limited. */
 direction?: ObcFloatingItemDirection;
-      /** Shows a timestamp (slot `time`) when `true`.
-Enable to display a time label next to the title. */
-hasTimestamp?: boolean;
-      /** Shows a day chip (slot `day`) next to the timestamp when `true`.
-Only applied when `hasTimestamp` is also `true`.
-Use to provide additional context for the timestamp. */
-hasDay?: boolean;
-      /** Renders a primary action button (slot `action`) when `true`.
-Use for the main action the user can take in response to the message. */
-action?: boolean;
-      /** Enables a secondary action button (slot `action2`).
-Only applied when `action` is also `true`.
-Use sparingly for secondary actions (e.g., "Undo"). */
-action2?: boolean;
+     /** Shows a timestamp (slot `time`) when `true`. Enable to display a time label next to the title. */
+     hasTimestamp?: boolean;
+     /**
+      * Shows a day chip (slot `day`) next to the timestamp when `true`. Only applied when `hasTimestamp` is also `true`. Use to provide additional context for the timestamp.
+      *
+      * Available when `hasTimestamp==true`.
+      */
+     hasDay?: boolean;
+     /** Renders a primary action button (slot `action`) when `true`. Use for the main action the user can take in response to the message. */
+     action?: boolean;
+     /**
+      * Enables a secondary action button (slot `action2`). Only applied when `action` is also `true`. Use sparingly for secondary actions (e.g., "Undo").
+      *
+      * Available when `action==true`.
+      */
+     action2?: boolean;
       /** Line wrapping style for the message content.
 - `single-line` (default): Truncates to one line.
 - `multi-line`: Allows up to 8 lines of content.
@@ -54,19 +56,17 @@ 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
     use:setProperties={props}
     class={className}
     style={style}
-    onaction-click={onActionClick}
-   onaction2-click={onAction2Click}
-   ondismiss-click={onDismissClick} >
+    use:forwardEvents={{'action-click': onActionClick, 'action2-click': onAction2Click, 'dismiss-click': onDismissClick}} >
       
       {#if primaryIcon}
         <div slot="primary-icon">
@@ -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

@@ -16,19 +16,21 @@ Use `application` when you want to visually distinguish system-level or applicat
 
 Choose `vertical` for narrow containers or when space is limited. */
     direction?: ObcFloatingItemDirection;
-    /** Shows a timestamp (slot `time`) when `true`.
-Enable to display a time label next to the title. */
+    /** Shows a timestamp (slot `time`) when `true`. Enable to display a time label next to the title. */
     hasTimestamp?: boolean;
-    /** Shows a day chip (slot `day`) next to the timestamp when `true`.
-Only applied when `hasTimestamp` is also `true`.
-Use to provide additional context for the timestamp. */
+    /**
+     * Shows a day chip (slot `day`) next to the timestamp when `true`. Only applied when `hasTimestamp` is also `true`. Use to provide additional context for the timestamp.
+     *
+     * Available when `hasTimestamp==true`.
+     */
     hasDay?: boolean;
-    /** Renders a primary action button (slot `action`) when `true`.
-Use for the main action the user can take in response to the message. */
+    /** Renders a primary action button (slot `action`) when `true`. Use for the main action the user can take in response to the message. */
     action?: boolean;
-    /** Enables a secondary action button (slot `action2`).
-Only applied when `action` is also `true`.
-Use sparingly for secondary actions (e.g., "Undo"). */
+    /**
+     * Enables a secondary action button (slot `action2`). Only applied when `action` is also `true`. Use sparingly for secondary actions (e.g., "Undo").
+     *
+     * Available when `action==true`.
+     */
     action2?: boolean;
     /** Line wrapping style for the message content.
 - `single-line` (default): Truncates to one line.
@@ -49,8 +51,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/form-footer-container/ObcFormFooterContainer.svelte

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

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

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

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

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

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

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

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

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

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

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

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

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