@oicl/openbridge-webcomponents-svelte 2.0.0-next.13 → 2.0.0-next.131

package/dist/components/notification-floating-item/ObcNotificationFloatingItem.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/notification-floating-item/notification-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';
 
@@ -45,24 +45,21 @@ lineType?: ObcFloatingItemLineType
   }
       export interface Slots {
   primaryIcon?: Snippet;
-  secondaryIcon?: Snippet;
   title?: Snippet;
   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, title, description, time, day, actionSnippet, action2Snippet, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-notification-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">
@@ -70,12 +67,6 @@ lineType?: ObcFloatingItemLineType
         </div>
       {/if}
 
-      {#if secondaryIcon}
-        <div slot="secondary-icon">
-          {@render secondaryIcon()}
-        </div>
-      {/if}
-
       {#if title}
         <div slot="title">
           {@render title()}
@@ -100,15 +91,15 @@ lineType?: ObcFloatingItemLineType
         </div>
       {/if}
 
-      {#if action}
+      {#if actionSnippet}
         <div slot="action">
-          {@render action()}
+          {@render actionSnippet()}
         </div>
       {/if}
 
-      {#if action2}
+      {#if action2Snippet}
         <div slot="action2">
-          {@render action2()}
+          {@render action2Snippet()}
         </div>
       {/if}
     </obc-notification-floating-item>

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

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

package/dist/components/notification-menu-item/ObcNotificationMenuItem.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/notification-menu-item/notification-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';
 
@@ -36,9 +36,7 @@ size?: ObcMessageMenuItemSize;
     use:setProperties={props}
     class={className}
     style={style}
-    onprimary-action-click={onPrimaryActionClick}
-   onsecondary-action-click={onSecondaryActionClick}
-   onitem-click={onItemClick} >
+    use:forwardEvents={{'primary-action-click': onPrimaryActionClick, 'secondary-action-click': onSecondaryActionClick, 'item-click': onItemClick}} >
       
       {#if icon}
         <div slot="icon">

package/dist/components/notification-message-item/ObcNotificationMessageItem.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcNotificationMessageItemType, ObcNotificationMessageItemSize} from '@oicl/openbridge-webcomponents/dist/components/notification-message-item/notification-message-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/notification-message-item/notification-message-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcNotificationMessageItemType, ObcNotificationMessageItemSize} from '@oicl/openbridge-webcomponents/dist/components/notification-message-item/notification-message-item.js';
       import type { Snippet } from 'svelte';
 
@@ -70,8 +70,7 @@ emptyText?: string
     use:setProperties={props}
     class={className}
     style={style}
-    onmessage-click={onMessageClick}
-   onaction-click={onActionClick} >
+    use:forwardEvents={{'message-click': onMessageClick, 'action-click': onActionClick}} >
       
       {#if secondaryIcon}
         <div slot="secondary-icon">

package/dist/components/number-input-field/ObcNumberInputField.svelte

@@ -2,14 +2,14 @@
   <script lang="ts">
     export type {ObcNumberInputFieldTextAlign, ObcNumberInputFieldSize, ObcNumberInputFieldPlacement} from '@oicl/openbridge-webcomponents/dist/components/number-input-field/number-input-field.js';
       import '@oicl/openbridge-webcomponents/dist/components/number-input-field/number-input-field.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcNumberInputFieldTextAlign, ObcNumberInputFieldSize, ObcNumberInputFieldPlacement} from '@oicl/openbridge-webcomponents/dist/components/number-input-field/number-input-field.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-     value?: string;
+     value?: number;
      unit?: string;
      placeholder?: string;
      textAlign?: ObcNumberInputFieldTextAlign;
@@ -40,24 +40,37 @@ minlength?: number | undefined;
      hasHelperIcon?: boolean;
      helperPlacement?: ObcNumberInputFieldPlacement;
       /** Internal property for squared corners, used when input is used in stepper-box */
-squared?: boolean
+squared?: boolean;
+      /** Optional display text override for controlled consumers (e.g. keyboard-numeric)
+that manage formatted strings while the committed value may be NaN. */
+displayOverride?: string;
+     decimalSeparator?: string | undefined;
+     groupSeparator?: string | undefined;
+     minFractionDigits?: number;
+     maxFractionDigits?: number | undefined;
+      /** Optional regex pattern. When set, any keystroke or paste whose resulting
+value does not match this pattern is blocked at the `beforeinput` stage.
+When unset, a permissive numeric filter (digits, sign, active separators,
+whitespace) is applied instead. */
+validationPattern?: string
    }
       export interface Events {
-    onInput?: (event: CustomEvent<unknown>) => void
+    onInput?: (event: CustomEvent<{value: number}>) => void;
+    onChange?: (event: CustomEvent<{value: number}>) => void
   }
       export interface Slots {
   leadingIcon?: Snippet;
   labelIcon?: Snippet;
   helperIcon?: Snippet
 }
-      const {onInput, class: className, style, leadingIcon, labelIcon, helperIcon, ...props} = $props<Props & Events & Slots>();
+      const {onInput, onChange, class: className, style, leadingIcon, labelIcon, helperIcon, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-number-input-field
     use:setProperties={props}
     class={className}
     style={style}
-    oninput={onInput} >
+    use:forwardEvents={{'input': onInput, 'change': onChange}} >
       
       {#if leadingIcon}
         <div slot="leading-icon">

package/dist/components/number-input-field/ObcNumberInputField.svelte.d.ts

@@ -4,7 +4,7 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    value?: string;
+    value?: number;
     unit?: string;
     placeholder?: string;
     textAlign?: ObcNumberInputFieldTextAlign;
@@ -36,9 +36,26 @@ This is useful to avoid React re-rendering to reset the value. */
     helperPlacement?: ObcNumberInputFieldPlacement;
     /** Internal property for squared corners, used when input is used in stepper-box */
     squared?: boolean;
+    /** Optional display text override for controlled consumers (e.g. keyboard-numeric)
+that manage formatted strings while the committed value may be NaN. */
+    displayOverride?: string;
+    decimalSeparator?: string | undefined;
+    groupSeparator?: string | undefined;
+    minFractionDigits?: number;
+    maxFractionDigits?: number | undefined;
+    /** Optional regex pattern. When set, any keystroke or paste whose resulting
+value does not match this pattern is blocked at the `beforeinput` stage.
+When unset, a permissive numeric filter (digits, sign, active separators,
+whitespace) is applied instead. */
+    validationPattern?: string;
 }
 export interface Events {
-    onInput?: (event: CustomEvent<unknown>) => void;
+    onInput?: (event: CustomEvent<{
+        value: number;
+    }>) => void;
+    onChange?: (event: CustomEvent<{
+        value: number;
+    }>) => void;
 }
 export interface Slots {
     leadingIcon?: Snippet;

package/dist/components/pagination/ObcPagination.svelte

@@ -1,9 +1,9 @@
 
   <script lang="ts">
-    export type {ObcPaginationValueChangeEvent, ObcPaginationNavigateEvent, PaginationVariant} from '@oicl/openbridge-webcomponents/dist/components/pagination/pagination.js';
+    export type {ObcPaginationValueChangeEvent, ObcPaginationNavigateEvent, ObcPaginationSelectPageEvent, PaginationVariant} from '@oicl/openbridge-webcomponents/dist/components/pagination/pagination.js';
       import '@oicl/openbridge-webcomponents/dist/components/pagination/pagination.js';
-      import { setProperties } from "../../util.js";
-      import type {ObcPaginationValueChangeEvent, ObcPaginationNavigateEvent, PaginationVariant} from '@oicl/openbridge-webcomponents/dist/components/pagination/pagination.js';
+      import { setProperties, forwardEvents } from "../../util.js";
+      import type {ObcPaginationValueChangeEvent, ObcPaginationNavigateEvent, ObcPaginationSelectPageEvent, PaginationVariant} from '@oicl/openbridge-webcomponents/dist/components/pagination/pagination.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -39,20 +39,20 @@ fullWidth?: boolean;
    }
       export interface Events {
     onValue?: (event: ObcPaginationValueChangeEvent) => void;
-    onNavigate?: (event: ObcPaginationNavigateEvent) => void
+    onNavigate?: (event: ObcPaginationNavigateEvent) => void;
+    onSelectPage?: (event: ObcPaginationSelectPageEvent) => void
   }
       export interface Slots {
   children?: Snippet
 }
-      const {onValue, onNavigate, class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const {onValue, onNavigate, onSelectPage, class: className, style, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-pagination
     use:setProperties={props}
     class={className}
     style={style}
-    onvalue={onValue}
-   onnavigate={onNavigate} >
+    use:forwardEvents={{'value': onValue, 'navigate': onNavigate, 'select-page': onSelectPage}} >
       
     {#if children}
       {@render children()}

package/dist/components/pagination/ObcPagination.svelte.d.ts

@@ -1,5 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/pagination/pagination.js';
-import type { ObcPaginationValueChangeEvent, ObcPaginationNavigateEvent, PaginationVariant } from '@oicl/openbridge-webcomponents/dist/components/pagination/pagination.js';
+import type { ObcPaginationValueChangeEvent, ObcPaginationNavigateEvent, ObcPaginationSelectPageEvent, PaginationVariant } from '@oicl/openbridge-webcomponents/dist/components/pagination/pagination.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -35,6 +35,7 @@ Default: `false` */
 export interface Events {
     onValue?: (event: ObcPaginationValueChangeEvent) => void;
     onNavigate?: (event: ObcPaginationNavigateEvent) => void;
+    onSelectPage?: (event: ObcPaginationSelectPageEvent) => void;
 }
 export interface Slots {
     children?: Snippet;
@@ -43,6 +44,7 @@ type $$ComponentProps = Props & Events & Slots;
 declare const ObcPagination: import("svelte").Component<$$ComponentProps, {
     ObcPaginationValueChangeEvent: typeof ObcPaginationValueChangeEvent;
     ObcPaginationNavigateEvent: typeof ObcPaginationNavigateEvent;
+    ObcPaginationSelectPageEvent: typeof ObcPaginationSelectPageEvent;
     PaginationVariant: typeof PaginationVariant;
 }, "">;
 type ObcPagination = ReturnType<typeof ObcPagination>;

package/dist/components/pivot-item/ObcPivotItem.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcPivotItemDirection} from '@oicl/openbridge-webcomponents/dist/components/pivot-item/pivot-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/pivot-item/pivot-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcPivotItemDirection} from '@oicl/openbridge-webcomponents/dist/components/pivot-item/pivot-item.js';
       import type { Snippet } from 'svelte';
 
@@ -52,7 +52,7 @@ disabled?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onselected={onSelected} >
+    use:forwardEvents={{'selected': onSelected}} >
       
       {#if icon}
         <div slot="icon">

package/dist/components/pivot-item-group/ObcPivotItemGroup.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcPivotItemDirection} from '@oicl/openbridge-webcomponents/dist/components/pivot-item/pivot-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/pivot-item-group/pivot-item-group.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcPivotItemDirection} from '@oicl/openbridge-webcomponents/dist/components/pivot-item/pivot-item.js';
       import type { Snippet } from 'svelte';
 
@@ -33,7 +33,7 @@ allowDeselect?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
       {#if children}
         {@render children()}

package/dist/components/progress-bar/ObcProgressBar.svelte

@@ -1,33 +1,53 @@
 
   <script lang="ts">
     export type {ProgressBarType, ProgressBarMode, CircularProgressState} from '@oicl/openbridge-webcomponents/dist/components/progress-bar/progress-bar.js';
+export type {Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
       import '@oicl/openbridge-webcomponents/dist/components/progress-bar/progress-bar.js';
       import { setProperties } from "../../util.js";
       import type {ProgressBarType, ProgressBarMode, CircularProgressState} from '@oicl/openbridge-webcomponents/dist/components/progress-bar/progress-bar.js';
+import type {Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-     type?: ProgressBarType;
-     mode?: ProgressBarMode;
-     circularState?: CircularProgressState;
-     value?: number;
-     showValue?: boolean;
-     showUnit?: boolean;
-     hasDescription?: boolean;
-     description?: string;
-     showState?: boolean;
-     stateLabel?: string;
-     progressiveIndeterminate?: boolean
+      /** Layout type: `linear` (horizontal bar) or `circular` (ring). */
+type?: ProgressBarType;
+      /** Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely. */
+mode?: ProgressBarMode;
+      /** Circular display state: `determinate` (numeric ring), `indeterminate` (animated ring with
+icon), or `icon` (ring framing the icon slot). */
+circularState?: CircularProgressState;
+      /** Color emphasis of the bar fill: `regular` (gray) or `enhanced` (blue). */
+priority?: Priority;
+      /** Progress percentage (0–100); clamped when rendered. */
+value?: number;
+      /** Shows the value label above the bar (percentage when determinate, "Loading" when indeterminate). */
+showValue?: boolean;
+      /** Appends a `%` unit next to the centered value. */
+showUnit?: boolean;
+      /** Shows the `description` text below the bar. */
+hasDescription?: boolean;
+      /** Description text rendered below the bar. */
+description?: string;
+      /** Shows the `stateLabel` next to the value.
+
+**TODO(designer):** Confirm the intended purpose of the state indicator — the story labels
+this a "future feature". */
+showState?: boolean;
+      /** Text shown alongside the value when `showState` is enabled. */
+stateLabel?: string;
+      /** Uses a progressive indeterminate ring (spinning arc that grows with `value`); takes
+precedence over `circularState`. */
+progressiveIndeterminate?: boolean
    }
       export interface Events {
     
   }
       export interface Slots {
-  children?: Snippet
+  icon?: Snippet
 }
-      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const { class: className, style, icon, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-progress-bar
@@ -36,7 +56,9 @@
     style={style}
      >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if icon}
+        <div slot="icon">
+          {@render icon()}
+        </div>
+      {/if}
     </obc-progress-bar>

package/dist/components/progress-bar/ObcProgressBar.svelte.d.ts

@@ -1,31 +1,51 @@
 import '@oicl/openbridge-webcomponents/dist/components/progress-bar/progress-bar.js';
 import type { ProgressBarType, ProgressBarMode, CircularProgressState } from '@oicl/openbridge-webcomponents/dist/components/progress-bar/progress-bar.js';
+import type { Priority } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
+    /** Layout type: `linear` (horizontal bar) or `circular` (ring). */
     type?: ProgressBarType;
+    /** Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely. */
     mode?: ProgressBarMode;
+    /** Circular display state: `determinate` (numeric ring), `indeterminate` (animated ring with
+icon), or `icon` (ring framing the icon slot). */
     circularState?: CircularProgressState;
+    /** Color emphasis of the bar fill: `regular` (gray) or `enhanced` (blue). */
+    priority?: Priority;
+    /** Progress percentage (0–100); clamped when rendered. */
     value?: number;
+    /** Shows the value label above the bar (percentage when determinate, "Loading" when indeterminate). */
     showValue?: boolean;
+    /** Appends a `%` unit next to the centered value. */
     showUnit?: boolean;
+    /** Shows the `description` text below the bar. */
     hasDescription?: boolean;
+    /** Description text rendered below the bar. */
     description?: string;
+    /** Shows the `stateLabel` next to the value.
+
+**TODO(designer):** Confirm the intended purpose of the state indicator — the story labels
+this a "future feature". */
     showState?: boolean;
+    /** Text shown alongside the value when `showState` is enabled. */
     stateLabel?: string;
+    /** Uses a progressive indeterminate ring (spinning arc that grows with `value`); takes
+precedence over `circularState`. */
     progressiveIndeterminate?: boolean;
 }
 export interface Events {
 }
 export interface Slots {
-    children?: Snippet;
+    icon?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcProgressBar: import("svelte").Component<$$ComponentProps, {
     ProgressBarType: typeof ProgressBarType;
     ProgressBarMode: typeof ProgressBarMode;
     CircularProgressState: typeof CircularProgressState;
+    Priority: typeof Priority;
 }, "">;
 type ObcProgressBar = ReturnType<typeof ObcProgressBar>;
 export default ObcProgressBar;

package/dist/components/progress-button/ObcProgressButton.svelte

@@ -1,43 +1,71 @@
 
   <script lang="ts">
-    export type {ProgressButtonType, ButtonStyle, ProgressMode} from '@oicl/openbridge-webcomponents/dist/components/progress-button/progress-button.js';
+    export type {ProgressButtonClickEvent, ProgressButtonType, ButtonStyle, ProgressMode} from '@oicl/openbridge-webcomponents/dist/components/progress-button/progress-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/progress-button/progress-button.js';
-      import { setProperties } from "../../util.js";
-      import type {ProgressButtonType, ButtonStyle, ProgressMode} from '@oicl/openbridge-webcomponents/dist/components/progress-button/progress-button.js';
+      import { setProperties, forwardEvents } from "../../util.js";
+      import type {ProgressButtonClickEvent, ProgressButtonType, ButtonStyle, ProgressMode} from '@oicl/openbridge-webcomponents/dist/components/progress-button/progress-button.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-     type?: ProgressButtonType;
-     buttonStyle?: ButtonStyle;
-     mode?: ProgressMode;
-     value?: number;
-     label?: string;
-     disabled?: boolean;
-     showProgress?: boolean;
-     hasLeadingIcon?: boolean;
-     hasTrailingIcon?: boolean;
-     hasAlert?: boolean;
-     progressiveIndeterminate?: boolean;
-     showLabel?: boolean
+      /** Layout type of the button: `linear` (label + bar) or `circular` (icon + ring). */
+type?: ProgressButtonType;
+      /** Elevation style of the button surface. */
+buttonStyle?: ButtonStyle;
+      /** Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely. */
+mode?: ProgressMode;
+      /** Progress percentage (0–100); clamped when rendered. */
+value?: number;
+      /** Text shown in the button (linear) or below it (circular, when `showLabel`). */
+label?: string;
+      /** Blocks interaction and suppresses the `obc-click` event. */
+disabled?: boolean;
+      /** Reveals the progress bar/ring. */
+showProgress?: boolean;
+      /** Renders the `leading-icon` slot. */
+hasLeadingIcon?: boolean;
+      /** Renders the `trailing-icon` slot. */
+hasTrailingIcon?: boolean;
+      /** Shows an alert (error) ring/border around the button. */
+hasAlert?: boolean;
+      /** Uses a progressive indeterminate ring that animates while advancing toward `value`. */
+progressiveIndeterminate?: boolean;
+      /** Shows the `label` below the circular button. */
+showLabel?: boolean
    }
       export interface Events {
-    
+    onObcClick?: (event: CustomEvent<ProgressButtonClickEvent>) => void
   }
       export interface Slots {
-  children?: Snippet
+  leadingIcon?: Snippet;
+  trailingIcon?: Snippet;
+  icon?: Snippet
 }
-      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const {onObcClick, class: className, style, leadingIcon, trailingIcon, icon, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-progress-button
     use:setProperties={props}
     class={className}
     style={style}
-     >
+    use:forwardEvents={{'obc-click': onObcClick}} >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if leadingIcon}
+        <div slot="leading-icon">
+          {@render leadingIcon()}
+        </div>
+      {/if}
+
+      {#if trailingIcon}
+        <div slot="trailing-icon">
+          {@render trailingIcon()}
+        </div>
+      {/if}
+
+      {#if icon}
+        <div slot="icon">
+          {@render icon()}
+        </div>
+      {/if}
     </obc-progress-button>

package/dist/components/progress-button/ObcProgressButton.svelte.d.ts

@@ -1,29 +1,45 @@
 import '@oicl/openbridge-webcomponents/dist/components/progress-button/progress-button.js';
-import type { ProgressButtonType, ButtonStyle, ProgressMode } from '@oicl/openbridge-webcomponents/dist/components/progress-button/progress-button.js';
+import type { ProgressButtonClickEvent, ProgressButtonType, ButtonStyle, ProgressMode } from '@oicl/openbridge-webcomponents/dist/components/progress-button/progress-button.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
+    /** Layout type of the button: `linear` (label + bar) or `circular` (icon + ring). */
     type?: ProgressButtonType;
+    /** Elevation style of the button surface. */
     buttonStyle?: ButtonStyle;
+    /** Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely. */
     mode?: ProgressMode;
+    /** Progress percentage (0–100); clamped when rendered. */
     value?: number;
+    /** Text shown in the button (linear) or below it (circular, when `showLabel`). */
     label?: string;
+    /** Blocks interaction and suppresses the `obc-click` event. */
     disabled?: boolean;
+    /** Reveals the progress bar/ring. */
     showProgress?: boolean;
+    /** Renders the `leading-icon` slot. */
     hasLeadingIcon?: boolean;
+    /** Renders the `trailing-icon` slot. */
     hasTrailingIcon?: boolean;
+    /** Shows an alert (error) ring/border around the button. */
     hasAlert?: boolean;
+    /** Uses a progressive indeterminate ring that animates while advancing toward `value`. */
     progressiveIndeterminate?: boolean;
+    /** Shows the `label` below the circular button. */
     showLabel?: boolean;
 }
 export interface Events {
+    onObcClick?: (event: CustomEvent<ProgressButtonClickEvent>) => void;
 }
 export interface Slots {
-    children?: Snippet;
+    leadingIcon?: Snippet;
+    trailingIcon?: Snippet;
+    icon?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcProgressButton: import("svelte").Component<$$ComponentProps, {
+    ProgressButtonClickEvent: typeof ProgressButtonClickEvent;
     ProgressButtonType: typeof ProgressButtonType;
     ButtonStyle: typeof ButtonStyle;
     ProgressMode: typeof ProgressMode;

package/dist/components/radio/ObcRadio.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     
       import '@oicl/openbridge-webcomponents/dist/components/radio/radio.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       
       import type { Snippet } from 'svelte';
 
@@ -42,7 +42,7 @@ inputId?: string
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
       {#if children}
         {@render children()}

package/dist/components/rich-button/ObcRichButton.svelte

@@ -3,7 +3,7 @@
     export type {HTMLTemplateResult} from 'lit';
 export type {RichButtonDirection} from '@oicl/openbridge-webcomponents/dist/components/rich-button/rich-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/rich-button/rich-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {HTMLTemplateResult} from 'lit';
 import type {RichButtonDirection} from '@oicl/openbridge-webcomponents/dist/components/rich-button/rich-button.js';
       import type { Snippet } from 'svelte';
@@ -42,7 +42,7 @@ disabled?: boolean;
     use:setProperties={props}
     class={className}
     style={style}
-    onrich-button-click={onRichButtonClick} >
+    use:forwardEvents={{'rich-button-click': onRichButtonClick}} >
       
       {#if leadingIcon}
         <div slot="leading-icon">