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

package/dist/components/notification-badge-button/ObcNotificationBadgeButton.svelte.d.ts

@@ -3,28 +3,23 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** Removes the right border for seamless grouping with adjacent buttons.
-Use when this button is not the last in a horizontal group. */
+    /** Removes the right border for seamless grouping with adjacent buttons. Use when this button is not the last in a horizontal group. */
     openRight?: boolean;
-    /** Removes the left border for seamless grouping with adjacent buttons.
-Use when this button is not the first in a horizontal group. */
+    /** Removes the left border for seamless grouping with adjacent buttons. Use when this button is not the first in a horizontal group. */
     openLeft?: boolean;
-    /** Applies rounded corners to the left side of the button.
-Use for the first button in a group or when aligning to a container's left edge. */
+    /** Applies rounded corners to the left side of the button. Use for the first button in a group or when aligning to a container's left edge. */
     cornerLeft?: boolean;
-    /** Applies rounded corners to the right side of the button.
-Use for the last button in a group or when aligning to a container's right edge. */
+    /** Applies rounded corners to the right side of the button. Use for the last button in a group or when aligning to a container's right edge. */
     cornerRight?: boolean;
-    /** Applies icon-specific styling for icon-only buttons.
-When true, supply an icon in the default slot. */
+    /** Applies icon-specific styling for icon-only buttons. When true, supply an icon in the default slot. */
     icon?: boolean;
     /** Disables the button, preventing user interaction and applying a muted style. */
     disabled?: boolean;
-    /** Applies an indented background style for emphasis or grouping.
-Useful for visually separating the button from others or indicating a secondary action. */
+    /** Applies an indented background style for emphasis or grouping. Useful for visually separating the button from others or indicating a secondary action. */
     indent?: boolean;
 }
 export interface Events {
+    onClick?: (event: CustomEvent<unknown>) => void;
 }
 export interface Slots {
     children?: Snippet;

package/dist/components/notification-button/ObcNotificationButton.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {NotificationButtonClickEvent, NotificationButtonStyle} from '@oicl/openbridge-webcomponents/dist/components/notification-button/notification-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/notification-button/notification-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {NotificationButtonClickEvent, NotificationButtonStyle} from '@oicl/openbridge-webcomponents/dist/components/notification-button/notification-button.js';
       import type { Snippet } from 'svelte';
 
@@ -58,7 +58,7 @@ ariaLabel?: string
     use:setProperties={props}
     class={className}
     style={style}
-    onobc-click={onObcClick} >
+    use:forwardEvents={{'obc-click': onObcClick}} >
       
       {#if icon}
         <div slot="icon">

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';
 
@@ -19,19 +19,14 @@ type?: ObcFloatingItemType;
 - `vertical`: Content and actions are stacked.
 Default is `horizontal`. */
 direction?: ObcFloatingItemDirection;
-      /** If true, displays a timestamp label (e.g., "09:12:46") in the notification.
-Default is false. */
-hasTimestamp?: boolean;
-      /** If true (and `hasTimestamp` is also true), displays a day label (e.g., "Yesterday") in the notification.
-Default is false. */
-hasDay?: boolean;
-      /** If true, displays a primary action button (e.g., "Close").
-Default is false. */
-action?: boolean;
-      /** If true, displays a secondary action button (e.g., "Undo").
-Only available if `action` is also true.
-Default is false. */
-action2?: boolean;
+     /** If true, displays a timestamp label (e.g., "09:12:46") in the notification. Default is false. */
+     hasTimestamp?: boolean;
+     /** If true (and `hasTimestamp` is also true), displays a day label (e.g., "Yesterday") in the notification. Default is false. */
+     hasDay?: boolean;
+     /** If true, displays a primary action button (e.g., "Close"). Default is false. */
+     action?: boolean;
+     /** If true, displays a secondary action button (e.g., "Undo"). Only available if `action` is also true. Default is false. */
+     action2?: boolean;
       /** Sets the line type for the notification content.
 - `singleLine`: Compact, single-line layout.
 - `multiLine`: Supports longer, multi-line descriptions.
@@ -45,24 +40,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 +62,6 @@ lineType?: ObcFloatingItemLineType
         </div>
       {/if}
 
-      {#if secondaryIcon}
-        <div slot="secondary-icon">
-          {@render secondaryIcon()}
-        </div>
-      {/if}
-
       {#if title}
         <div slot="title">
           {@render title()}
@@ -100,15 +86,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

@@ -14,18 +14,13 @@ Default is `regular`. */
 - `vertical`: Content and actions are stacked.
 Default is `horizontal`. */
     direction?: ObcFloatingItemDirection;
-    /** If true, displays a timestamp label (e.g., "09:12:46") in the notification.
-Default is false. */
+    /** If true, displays a timestamp label (e.g., "09:12:46") in the notification. Default is false. */
     hasTimestamp?: boolean;
-    /** If true (and `hasTimestamp` is also true), displays a day label (e.g., "Yesterday") in the notification.
-Default is false. */
+    /** If true (and `hasTimestamp` is also true), displays a day label (e.g., "Yesterday") in the notification. Default is false. */
     hasDay?: boolean;
-    /** If true, displays a primary action button (e.g., "Close").
-Default is false. */
+    /** If true, displays a primary action button (e.g., "Close"). Default is false. */
     action?: boolean;
-    /** If true, displays a secondary action button (e.g., "Undo").
-Only available if `action` is also true.
-Default is false. */
+    /** If true, displays a secondary action button (e.g., "Undo"). Only available if `action` is also true. Default is false. */
     action2?: boolean;
     /** Sets the line type for the notification content.
 - `singleLine`: Compact, single-line layout.
@@ -40,13 +35,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,22 +2,22 @@
   <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';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** When true, renders the `icon` slot for a secondary icon. */
-hasIcon?: boolean;
+     /** When true, renders the `icon` slot for a secondary icon. */
+     hasIcon?: boolean;
      title?: string;
      description?: string;
      day?: string;
      time?: string;
      open?: boolean;
-      /** Layout size: `single-line` (default) or `double-line`. */
-size?: ObcMessageMenuItemSize;
+     /** Layout size: `single-line` (default) or `double-line`. */
+     size?: ObcMessageMenuItemSize;
      primaryActionLabel?: string;
      secondaryActionLabel?: string
    }
@@ -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,27 +2,43 @@
   <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';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Title or heading for the notification.
-Shown in the title slot if `hasTitle` is true. */
-title?: string;
-      /** Detailed message text for the notification.
-Shown in the description slot if `hasDescription` is true. */
-description?: string;
-      /** Primary timestamp to display (e.g., "09:12:46").
-Shown in the time slot if `hasTimestamp` is true. */
-time?: string;
-      /** Secondary timestamp (e.g., relative time like "2m ago").
-Shown in the time-secondary slot if `hasTimestamp2` is true. */
-timeSecondary?: string;
-      /** Label for the action button (used when `actionType` is "button"). */
-actionLabel?: string;
+     /**
+      * Title or heading for the notification. Shown in the title slot if `showTitle` is true.
+      *
+      * Available when `showTitle==true && type!=Inactive && empty==false`.
+      */
+     title?: string;
+     /**
+      * Detailed message text for the notification. Shown in the description slot if `showDescription` is true.
+      *
+      * Available when `showDescription==true && type!=Inactive && empty==false`.
+      */
+     description?: string;
+     /**
+      * Primary timestamp to display (e.g., "09:12:46"). Shown in the time slot if `showTimestamp` is true.
+      *
+      * Available when `showTimestamp==true && type!=Inactive && empty==false`.
+      */
+     time?: string;
+     /**
+      * Secondary timestamp (e.g., relative time like "2m ago"). Shown in the time-secondary slot if `hasTimestamp2` is true.
+      *
+      * Available when `hasTimestamp2==true && type!=Inactive && empty==false`.
+      */
+     timeSecondary?: string;
+     /**
+      * Label for the action button (used when `type` is `WithButton`).
+      *
+      * Available when `type==WithButton`.
+      */
+     actionLabel?: string;
       /** Display type of the notification.
 - `simple`: Basic notification (default).
 - `with-button`: Includes a text action button.
@@ -33,28 +49,46 @@ type?: ObcNotificationMessageItemType;
 - `regular`: Standard compact layout (default).
 - `tall`: Expanded layout for longer content. */
 size?: ObcNotificationMessageItemSize;
-      /** Whether to show the title. */
-showTitle?: boolean;
-      /** Whether to show the description.
-If false, the description slot is omitted. */
-showDescription?: boolean;
-      /** Whether to show the primary timestamp. */
-showTimestamp?: boolean;
-      /** Whether to show the secondary timestamp.
-If false, the time-secondary slot is omitted. */
-hasTimestamp2?: boolean;
-      /** Whether to show the secondary icon overlay.
-If true, renders the `secondary-icon` slot. */
-hasSecondaryIcon?: boolean;
-      /** **DEPRECATED** – Use `size="tall"` instead.
-If true, uses the tall layout. */
-large?: boolean;
-      /** **DEPRECATED** – Use `type="inactive"` instead.
-If true, shows the empty/inactive state. */
-empty?: boolean;
-      /** Text to show in the empty/inactive state.
-Used in the `empty` slot when `type="inactive"` or `empty` is true. */
-emptyText?: string
+     /**
+      * Whether to show the title.
+      *
+      * Available when `type!=Inactive && empty==false`.
+      */
+     showTitle?: boolean;
+     /**
+      * Whether to show the description. If false, the description slot is omitted.
+      *
+      * Available when `type!=Inactive && empty==false`.
+      */
+     showDescription?: boolean;
+     /**
+      * Whether to show the primary timestamp.
+      *
+      * Available when `type!=Inactive && empty==false`.
+      */
+     showTimestamp?: boolean;
+     /**
+      * Whether to show the secondary timestamp. If false, the time-secondary slot is omitted.
+      *
+      * Available when `type!=Inactive && empty==false`.
+      */
+     hasTimestamp2?: boolean;
+     /**
+      * Whether to show the secondary icon overlay. If true, renders the `secondary-icon` slot.
+      *
+      * Available when `type!=Inactive && empty==false`.
+      */
+     hasSecondaryIcon?: boolean;
+     /** **DEPRECATED** – Use `size="tall"` instead. If true, uses the tall layout. */
+     large?: boolean;
+     /** **DEPRECATED** – Use `type="inactive"` instead. If true, shows the empty/inactive state. */
+     empty?: boolean;
+     /**
+      * Text to show in the empty/inactive state. Used in the `empty` slot when `type="inactive"` or `empty` is true.
+      *
+      * Available when `type==Inactive || empty==true`.
+      */
+     emptyText?: string
    }
       export interface Events {
     onMessageClick?: (event: CustomEvent<void>) => void;
@@ -70,8 +104,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/notification-message-item/ObcNotificationMessageItem.svelte.d.ts

@@ -4,19 +4,35 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** Title or heading for the notification.
-Shown in the title slot if `hasTitle` is true. */
+    /**
+     * Title or heading for the notification. Shown in the title slot if `showTitle` is true.
+     *
+     * Available when `showTitle==true && type!=Inactive && empty==false`.
+     */
     title?: string;
-    /** Detailed message text for the notification.
-Shown in the description slot if `hasDescription` is true. */
+    /**
+     * Detailed message text for the notification. Shown in the description slot if `showDescription` is true.
+     *
+     * Available when `showDescription==true && type!=Inactive && empty==false`.
+     */
     description?: string;
-    /** Primary timestamp to display (e.g., "09:12:46").
-Shown in the time slot if `hasTimestamp` is true. */
+    /**
+     * Primary timestamp to display (e.g., "09:12:46"). Shown in the time slot if `showTimestamp` is true.
+     *
+     * Available when `showTimestamp==true && type!=Inactive && empty==false`.
+     */
     time?: string;
-    /** Secondary timestamp (e.g., relative time like "2m ago").
-Shown in the time-secondary slot if `hasTimestamp2` is true. */
+    /**
+     * Secondary timestamp (e.g., relative time like "2m ago"). Shown in the time-secondary slot if `hasTimestamp2` is true.
+     *
+     * Available when `hasTimestamp2==true && type!=Inactive && empty==false`.
+     */
     timeSecondary?: string;
-    /** Label for the action button (used when `actionType` is "button"). */
+    /**
+     * Label for the action button (used when `type` is `WithButton`).
+     *
+     * Available when `type==WithButton`.
+     */
     actionLabel?: string;
     /** Display type of the notification.
 - `simple`: Basic notification (default).
@@ -28,27 +44,45 @@ Shown in the time-secondary slot if `hasTimestamp2` is true. */
 - `regular`: Standard compact layout (default).
 - `tall`: Expanded layout for longer content. */
     size?: ObcNotificationMessageItemSize;
-    /** Whether to show the title. */
+    /**
+     * Whether to show the title.
+     *
+     * Available when `type!=Inactive && empty==false`.
+     */
     showTitle?: boolean;
-    /** Whether to show the description.
-If false, the description slot is omitted. */
+    /**
+     * Whether to show the description. If false, the description slot is omitted.
+     *
+     * Available when `type!=Inactive && empty==false`.
+     */
     showDescription?: boolean;
-    /** Whether to show the primary timestamp. */
+    /**
+     * Whether to show the primary timestamp.
+     *
+     * Available when `type!=Inactive && empty==false`.
+     */
     showTimestamp?: boolean;
-    /** Whether to show the secondary timestamp.
-If false, the time-secondary slot is omitted. */
+    /**
+     * Whether to show the secondary timestamp. If false, the time-secondary slot is omitted.
+     *
+     * Available when `type!=Inactive && empty==false`.
+     */
     hasTimestamp2?: boolean;
-    /** Whether to show the secondary icon overlay.
-If true, renders the `secondary-icon` slot. */
+    /**
+     * Whether to show the secondary icon overlay. If true, renders the `secondary-icon` slot.
+     *
+     * Available when `type!=Inactive && empty==false`.
+     */
     hasSecondaryIcon?: boolean;
-    /** **DEPRECATED** – Use `size="tall"` instead.
-If true, uses the tall layout. */
+    /** **DEPRECATED** – Use `size="tall"` instead. If true, uses the tall layout. */
     large?: boolean;
-    /** **DEPRECATED** – Use `type="inactive"` instead.
-If true, shows the empty/inactive state. */
+    /** **DEPRECATED** – Use `type="inactive"` instead. If true, shows the empty/inactive state. */
     empty?: boolean;
-    /** Text to show in the empty/inactive state.
-Used in the `empty` slot when `type="inactive"` or `empty` is true. */
+    /**
+     * Text to show in the empty/inactive state. Used in the `empty` slot when `type="inactive"` or `empty` is true.
+     *
+     * Available when `type==Inactive || empty==true`.
+     */
     emptyText?: string;
 }
 export interface Events {

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

@@ -2,62 +2,75 @@
   <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;
      disabled?: boolean;
      readonly?: boolean;
      error?: boolean;
+     /** Available when `error==true`. */
      errorText?: string;
-      /** If true, the input field will not update its value on focus */
-rejectUpdatesOnFocus?: boolean;
-      /** If true, the value will only be initially set, and not updated on change */
-rejectUpdates?: boolean;
-      /** If true, the input field will not update its value if the value is the same as the previous value
-This is useful to avoid React re-rendering to reset the value. */
-rejectDuplicateUpdates?: boolean;
-      /** Name attribute for form integration */
-name?: string;
-      /** Maximum number of characters allowed */
-maxlength?: number | undefined;
-      /** Minimum number of characters required */
-minlength?: number | undefined;
+     /** If true, the input field will not update its value on focus */
+     rejectUpdatesOnFocus?: boolean;
+     /** If true, the value will only be initially set, and not updated on change */
+     rejectUpdates?: boolean;
+     /** If true, the input field will not update its value if the value is the same as the previous value This is useful to avoid React re-rendering to reset the value. */
+     rejectDuplicateUpdates?: boolean;
+     /** Name attribute for form integration */
+     name?: string;
+     /** Maximum number of characters allowed */
+     maxlength?: number | undefined;
+     /** Minimum number of characters required */
+     minlength?: number | undefined;
      size?: ObcNumberInputFieldSize;
      hasLeadingIcon?: boolean;
      helperText?: string;
      label?: string;
      required?: boolean;
+     /** Available when `label!=''`. */
      hasLabelIcon?: boolean;
+     /** Available when `label!=''`. */
      labelPlacement?: ObcNumberInputFieldPlacement;
+     /** Available when `helperText!='' || (error==true && errorText!='')`. */
      hasHelperIcon?: boolean;
+     /** Available when `helperText!='' || (error==true && errorText!='')`. */
      helperPlacement?: ObcNumberInputFieldPlacement;
-      /** Internal property for squared corners, used when input is used in stepper-box */
-squared?: boolean
+     /** 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;
   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,20 +4,20 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    value?: string;
+    value?: number;
     unit?: string;
     placeholder?: string;
     textAlign?: ObcNumberInputFieldTextAlign;
     disabled?: boolean;
     readonly?: boolean;
     error?: boolean;
+    /** Available when `error==true`. */
     errorText?: string;
     /** If true, the input field will not update its value on focus */
     rejectUpdatesOnFocus?: boolean;
     /** If true, the value will only be initially set, and not updated on change */
     rejectUpdates?: boolean;
-    /** If true, the input field will not update its value if the value is the same as the previous value
-This is useful to avoid React re-rendering to reset the value. */
+    /** If true, the input field will not update its value if the value is the same as the previous value This is useful to avoid React re-rendering to reset the value. */
     rejectDuplicateUpdates?: boolean;
     /** Name attribute for form integration */
     name?: string;
@@ -30,15 +30,32 @@ This is useful to avoid React re-rendering to reset the value. */
     helperText?: string;
     label?: string;
     required?: boolean;
+    /** Available when `label!=''`. */
     hasLabelIcon?: boolean;
+    /** Available when `label!=''`. */
     labelPlacement?: ObcNumberInputFieldPlacement;
+    /** Available when `helperText!='' || (error==true && errorText!='')`. */
     hasHelperIcon?: boolean;
+    /** Available when `helperText!='' || (error==true && errorText!='')`. */
     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;