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

package/dist/components/sequence-card/ObcSequenceCard.svelte

@@ -37,9 +37,16 @@ import type {SequenceValue, SequenceType, SequenceStyle} from '@oicl/openbridge-
     
   }
       export interface Slots {
+  leadingIcon?: Snippet;
+  title?: Snippet;
+  subtitleSnippet?: Snippet;
+  timeStamp?: Snippet;
+  headerActions?: Snippet;
+  leftTimeStamp?: Snippet;
+  actions?: Snippet;
   children?: Snippet
 }
-      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const { class: className, style, leadingIcon, title, subtitleSnippet, timeStamp, headerActions, leftTimeStamp, actions, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-sequence-card
@@ -48,7 +55,49 @@ import type {SequenceValue, SequenceType, SequenceStyle} from '@oicl/openbridge-
     style={style}
      >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if leadingIcon}
+        <div slot="leading-icon">
+          {@render leadingIcon()}
+        </div>
+      {/if}
+
+      {#if title}
+        <div slot="title">
+          {@render title()}
+        </div>
+      {/if}
+
+      {#if subtitleSnippet}
+        <div slot="subtitle">
+          {@render subtitleSnippet()}
+        </div>
+      {/if}
+
+      {#if timeStamp}
+        <div slot="time-stamp">
+          {@render timeStamp()}
+        </div>
+      {/if}
+
+      {#if headerActions}
+        <div slot="header-actions">
+          {@render headerActions()}
+        </div>
+      {/if}
+
+      {#if leftTimeStamp}
+        <div slot="left-time-stamp">
+          {@render leftTimeStamp()}
+        </div>
+      {/if}
+
+      {#if actions}
+        <div slot="actions">
+          {@render actions()}
+        </div>
+      {/if}
+
+      {#if children}
+        {@render children()}
+      {/if}
     </obc-sequence-card>

package/dist/components/sequence-card/ObcSequenceCard.svelte.d.ts

@@ -30,6 +30,13 @@ export interface Props {
 export interface Events {
 }
 export interface Slots {
+    leadingIcon?: Snippet;
+    title?: Snippet;
+    subtitleSnippet?: Snippet;
+    timeStamp?: Snippet;
+    headerActions?: Snippet;
+    leftTimeStamp?: Snippet;
+    actions?: Snippet;
     children?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;

package/dist/components/sequence-item/ObcSequenceItem.svelte

@@ -42,9 +42,12 @@ stepLabel?: string;
     
   }
       export interface Slots {
-  children?: Snippet
+  titleSnippet?: Snippet;
+  descriptionSnippet?: Snippet;
+  meta?: Snippet;
+  step?: Snippet
 }
-      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const { class: className, style, titleSnippet, descriptionSnippet, meta, step, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-sequence-item
@@ -53,7 +56,27 @@ stepLabel?: string;
     style={style}
      >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if titleSnippet}
+        <div slot="title">
+          {@render titleSnippet()}
+        </div>
+      {/if}
+
+      {#if descriptionSnippet}
+        <div slot="description">
+          {@render descriptionSnippet()}
+        </div>
+      {/if}
+
+      {#if meta}
+        <div slot="meta">
+          {@render meta()}
+        </div>
+      {/if}
+
+      {#if step}
+        <div slot="step">
+          {@render step()}
+        </div>
+      {/if}
     </obc-sequence-item>

package/dist/components/sequence-item/ObcSequenceItem.svelte.d.ts

@@ -35,7 +35,10 @@ not provided. */
 export interface Events {
 }
 export interface Slots {
-    children?: Snippet;
+    titleSnippet?: Snippet;
+    descriptionSnippet?: Snippet;
+    meta?: Snippet;
+    step?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcSequenceItem: import("svelte").Component<$$ComponentProps, {

package/dist/components/sequence-modal/ObcSequenceModal.svelte

@@ -3,7 +3,7 @@
     export type {ObcSequenceModalType} from '@oicl/openbridge-webcomponents/dist/components/sequence-modal/sequence-modal.js';
 export type {SequenceValue} from '@oicl/openbridge-webcomponents/dist/components/sequence-step/sequence-step.js';
       import '@oicl/openbridge-webcomponents/dist/components/sequence-modal/sequence-modal.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcSequenceModalType} from '@oicl/openbridge-webcomponents/dist/components/sequence-modal/sequence-modal.js';
 import type {SequenceValue} from '@oicl/openbridge-webcomponents/dist/components/sequence-step/sequence-step.js';
       import type { Snippet } from 'svelte';
@@ -23,21 +23,28 @@ import type {SequenceValue} from '@oicl/openbridge-webcomponents/dist/components
      closeLabel?: string
    }
       export interface Events {
-    
+    onCloseClick?: (event: CustomEvent<unknown>) => void
   }
       export interface Slots {
+  actions?: Snippet;
   children?: Snippet
 }
-      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const {onCloseClick, class: className, style, actions, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-sequence-modal
     use:setProperties={props}
     class={className}
     style={style}
-     >
+    use:forwardEvents={{'close-click': onCloseClick}} >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if actions}
+        <div slot="actions">
+          {@render actions()}
+        </div>
+      {/if}
+
+      {#if children}
+        {@render children()}
+      {/if}
     </obc-sequence-modal>

package/dist/components/sequence-modal/ObcSequenceModal.svelte.d.ts

@@ -17,8 +17,10 @@ export interface Props {
     closeLabel?: string;
 }
 export interface Events {
+    onCloseClick?: (event: CustomEvent<unknown>) => void;
 }
 export interface Slots {
+    actions?: Snippet;
     children?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;

package/dist/components/sequence-step/ObcSequenceStep.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {SequenceOrientation, SequenceType, SequenceStyle, SequenceValue, SequenceVariant} from '@oicl/openbridge-webcomponents/dist/components/sequence-step/sequence-step.js';
       import '@oicl/openbridge-webcomponents/dist/components/sequence-step/sequence-step.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {SequenceOrientation, SequenceType, SequenceStyle, SequenceValue, SequenceVariant} from '@oicl/openbridge-webcomponents/dist/components/sequence-step/sequence-step.js';
       import type { Snippet } from 'svelte';
 
@@ -23,19 +23,19 @@ Applies only when `hasInputConnector` is true. */
 inputConnectorExtended?: boolean
    }
       export interface Events {
-    
+    onClick?: (event: CustomEvent<unknown>) => void
   }
       export interface Slots {
   children?: Snippet
 }
-      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const {onClick, class: className, style, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-sequence-step
     use:setProperties={props}
     class={className}
     style={style}
-     >
+    use:forwardEvents={{'click': onClick}} >
       
     {#if children}
       {@render children()}

package/dist/components/sequence-step/ObcSequenceStep.svelte.d.ts

@@ -18,6 +18,7 @@ Applies only when `hasInputConnector` is true. */
     inputConnectorExtended?: boolean;
 }
 export interface Events {
+    onClick?: (event: CustomEvent<unknown>) => void;
 }
 export interface Slots {
     children?: Snippet;

package/dist/components/sequence-toolbar/ObcSequenceToolbar.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {SequenceToolbarType} from '@oicl/openbridge-webcomponents/dist/components/sequence-toolbar/sequence-toolbar.js';
       import '@oicl/openbridge-webcomponents/dist/components/sequence-toolbar/sequence-toolbar.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {SequenceToolbarType} from '@oicl/openbridge-webcomponents/dist/components/sequence-toolbar/sequence-toolbar.js';
       import type { Snippet } from 'svelte';
 
@@ -13,9 +13,9 @@
      hasAdd?: boolean
    }
       export interface Events {
-    onPrevClick?: (event: CustomEvent<unknown>) => void;
-    onNextClick?: (event: CustomEvent<unknown>) => void;
-    onAddClick?: (event: CustomEvent<unknown>) => void
+    onPrevClick?: (event: CustomEvent<void>) => void;
+    onNextClick?: (event: CustomEvent<void>) => void;
+    onAddClick?: (event: CustomEvent<void>) => void
   }
       export interface Slots {
   children?: Snippet;
@@ -31,9 +31,7 @@
     use:setProperties={props}
     class={className}
     style={style}
-    onprev-click={onPrevClick}
-   onnext-click={onNextClick}
-   onadd-click={onAddClick} >
+    use:forwardEvents={{'prev-click': onPrevClick, 'next-click': onNextClick, 'add-click': onAddClick}} >
       
       {#if children}
         {@render children()}

package/dist/components/sequence-toolbar/ObcSequenceToolbar.svelte.d.ts

@@ -8,9 +8,9 @@ export interface Props {
     hasAdd?: boolean;
 }
 export interface Events {
-    onPrevClick?: (event: CustomEvent<unknown>) => void;
-    onNextClick?: (event: CustomEvent<unknown>) => void;
-    onAddClick?: (event: CustomEvent<unknown>) => void;
+    onPrevClick?: (event: CustomEvent<void>) => void;
+    onNextClick?: (event: CustomEvent<void>) => void;
+    onAddClick?: (event: CustomEvent<void>) => void;
 }
 export interface Slots {
     children?: Snippet;

package/dist/components/slide-button/ObcSlideButton.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcSlideButtonSlideEvent} from '@oicl/openbridge-webcomponents/dist/components/slide-button/slide-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/slide-button/slide-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcSlideButtonSlideEvent} from '@oicl/openbridge-webcomponents/dist/components/slide-button/slide-button.js';
       import type { Snippet } from 'svelte';
 
@@ -32,7 +32,7 @@ autoDisable?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onslide={onSlide} >
+    use:forwardEvents={{'slide': onSlide}} >
       
       {#if leadingIcon}
         <div slot="leading-icon">

package/dist/components/slider/ObcSlider.svelte

@@ -1,9 +1,9 @@
 
   <script lang="ts">
-    export type {ObcSliderValueEvent, ObcSliderVariant} from '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';
+    export type {ObcSliderValueEvent, ObcSliderChangeEvent, ObcSliderVariant} from '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';
       import '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';
-      import { setProperties } from "../../util.js";
-      import type {ObcSliderValueEvent, ObcSliderVariant} from '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';
+      import { setProperties, forwardEvents } from "../../util.js";
+      import type {ObcSliderValueEvent, ObcSliderChangeEvent, ObcSliderVariant} from '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -50,7 +50,7 @@ hasRightIcon?: boolean;
 
 Default is false. */
 allowSeeking?: boolean;
-      /** The speed of animated seeking (when `allowSeeking` is true).
+      /** The speed of the smooth animation that moves the value to the clicked position (used when `allowSeeking` is false).
 
 Expressed as the inverse of seconds to go from min to max (e.g., 1/3 means 3 seconds for full range).
 Default is 1/3. */
@@ -58,20 +58,21 @@ seekingSpeed?: number;
      disabled?: boolean
    }
       export interface Events {
-    onValue?: (event: ObcSliderValueEvent) => void
+    onValue?: (event: ObcSliderValueEvent) => void;
+    onChange?: (event: ObcSliderChangeEvent) => void
   }
       export interface Slots {
   iconLeft?: Snippet;
   iconRight?: Snippet
 }
-      const {onValue, class: className, style, iconLeft, iconRight, ...props} = $props<Props & Events & Slots>();
+      const {onValue, onChange, class: className, style, iconLeft, iconRight, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-slider
     use:setProperties={props}
     class={className}
     style={style}
-    onvalue={onValue} >
+    use:forwardEvents={{'value': onValue, 'change': onChange}} >
       
       {#if iconLeft}
         <div slot="icon-left">

package/dist/components/slider/ObcSlider.svelte.d.ts

@@ -1,5 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';
-import type { ObcSliderValueEvent, ObcSliderVariant } from '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';
+import type { ObcSliderValueEvent, ObcSliderChangeEvent, ObcSliderVariant } from '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -45,7 +45,7 @@ When true, the `icon-right` slot is rendered as a button. */
 
 Default is false. */
     allowSeeking?: boolean;
-    /** The speed of animated seeking (when `allowSeeking` is true).
+    /** The speed of the smooth animation that moves the value to the clicked position (used when `allowSeeking` is false).
 
 Expressed as the inverse of seconds to go from min to max (e.g., 1/3 means 3 seconds for full range).
 Default is 1/3. */
@@ -54,6 +54,7 @@ Default is 1/3. */
 }
 export interface Events {
     onValue?: (event: ObcSliderValueEvent) => void;
+    onChange?: (event: ObcSliderChangeEvent) => void;
 }
 export interface Slots {
     iconLeft?: Snippet;
@@ -62,6 +63,7 @@ export interface Slots {
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcSlider: import("svelte").Component<$$ComponentProps, {
     ObcSliderValueEvent: typeof ObcSliderValueEvent;
+    ObcSliderChangeEvent: typeof ObcSliderChangeEvent;
     ObcSliderVariant: typeof ObcSliderVariant;
 }, "">;
 type ObcSlider = ReturnType<typeof ObcSlider>;

package/dist/components/slider-double/ObcSliderDouble.svelte

@@ -1,9 +1,9 @@
 
   <script lang="ts">
-    export type {ObcSliderDoubleValueEvent, ObcSliderDoubleVariant} from '@oicl/openbridge-webcomponents/dist/components/slider-double/slider-double.js';
+    export type {ObcSliderDoubleValueEvent, ObcSliderDoubleChangeEvent, ObcSliderDoubleVariant} from '@oicl/openbridge-webcomponents/dist/components/slider-double/slider-double.js';
       import '@oicl/openbridge-webcomponents/dist/components/slider-double/slider-double.js';
-      import { setProperties } from "../../util.js";
-      import type {ObcSliderDoubleValueEvent, ObcSliderDoubleVariant} from '@oicl/openbridge-webcomponents/dist/components/slider-double/slider-double.js';
+      import { setProperties, forwardEvents } from "../../util.js";
+      import type {ObcSliderDoubleValueEvent, ObcSliderDoubleChangeEvent, ObcSliderDoubleVariant} from '@oicl/openbridge-webcomponents/dist/components/slider-double/slider-double.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -66,35 +66,22 @@ layout integration. Reflected to the `hugcontainer` HTML attribute. */
 hugContainer?: boolean
    }
       export interface Events {
-    onValue?: (event: ObcSliderDoubleValueEvent) => void
+    onValue?: (event: ObcSliderDoubleValueEvent) => void;
+    onChange?: (event: ObcSliderDoubleChangeEvent) => void
   }
       export interface Slots {
-  iconLeft?: Snippet;
-  iconRight?: Snippet;
   leftReadout?: Snippet;
   rightReadout?: Snippet
 }
-      const {onValue, class: className, style, iconLeft, iconRight, leftReadout, rightReadout, ...props} = $props<Props & Events & Slots>();
+      const {onValue, onChange, class: className, style, leftReadout, rightReadout, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-slider-double
     use:setProperties={props}
     class={className}
     style={style}
-    onvalue={onValue} >
+    use:forwardEvents={{'value': onValue, 'change': onChange}} >
       
-      {#if iconLeft}
-        <div slot="icon-left">
-          {@render iconLeft()}
-        </div>
-      {/if}
-
-      {#if iconRight}
-        <div slot="icon-right">
-          {@render iconRight()}
-        </div>
-      {/if}
-
       {#if leftReadout}
         <div slot="left-readout">
           {@render leftReadout()}

package/dist/components/slider-double/ObcSliderDouble.svelte.d.ts

@@ -1,5 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/slider-double/slider-double.js';
-import type { ObcSliderDoubleValueEvent, ObcSliderDoubleVariant } from '@oicl/openbridge-webcomponents/dist/components/slider-double/slider-double.js';
+import type { ObcSliderDoubleValueEvent, ObcSliderDoubleChangeEvent, ObcSliderDoubleVariant } from '@oicl/openbridge-webcomponents/dist/components/slider-double/slider-double.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -62,16 +62,16 @@ layout integration. Reflected to the `hugcontainer` HTML attribute. */
 }
 export interface Events {
     onValue?: (event: ObcSliderDoubleValueEvent) => void;
+    onChange?: (event: ObcSliderDoubleChangeEvent) => void;
 }
 export interface Slots {
-    iconLeft?: Snippet;
-    iconRight?: Snippet;
     leftReadout?: Snippet;
     rightReadout?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcSliderDouble: import("svelte").Component<$$ComponentProps, {
     ObcSliderDoubleValueEvent: typeof ObcSliderDoubleValueEvent;
+    ObcSliderDoubleChangeEvent: typeof ObcSliderDoubleChangeEvent;
     ObcSliderDoubleVariant: typeof ObcSliderDoubleVariant;
 }, "">;
 type ObcSliderDouble = ReturnType<typeof ObcSliderDouble>;

package/dist/components/split-button/ObcSplitButton.svelte

@@ -3,7 +3,7 @@
     export type {ObcSplitButtonClickEvent, ObcSplitButtonChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/split-button/split-button.js';
 export type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
       import '@oicl/openbridge-webcomponents/dist/components/split-button/split-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcSplitButtonClickEvent, ObcSplitButtonChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/split-button/split-button.js';
 import type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
       import type { Snippet } from 'svelte';
@@ -68,8 +68,7 @@ columnGroups?: ColumnGroup[]
     use:setProperties={props}
     class={className}
     style={style}
-    onclick={onClick}
-   onchange={onChange} >
+    use:forwardEvents={{'click': onClick, 'change': onChange}} >
       
       {#if icon}
         <div slot="icon">

package/dist/components/start-stop-switch/ObcStartStopSwitch.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcStartStopSwitchChangeEvent, StartStopSwitchVariant, StartStopSwitchSize} from '@oicl/openbridge-webcomponents/dist/components/start-stop-switch/start-stop-switch.js';
       import '@oicl/openbridge-webcomponents/dist/components/start-stop-switch/start-stop-switch.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcStartStopSwitchChangeEvent, StartStopSwitchVariant, StartStopSwitchSize} from '@oicl/openbridge-webcomponents/dist/components/start-stop-switch/start-stop-switch.js';
       import type { Snippet } from 'svelte';
 
@@ -81,7 +81,7 @@ description?: string
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
       {#if checkedStateIcon}
         <div slot="checked-state-icon">

package/dist/components/status-indicator/ObcStatusIndicator.svelte

@@ -26,7 +26,7 @@
     style={style}
      >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if children}
+        {@render children()}
+      {/if}
     </obc-status-indicator>

package/dist/components/stepper-box/ObcStepperBox.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcStepperBoxType} from '@oicl/openbridge-webcomponents/dist/components/stepper-box/stepper-box.js';
       import '@oicl/openbridge-webcomponents/dist/components/stepper-box/stepper-box.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcStepperBoxType} from '@oicl/openbridge-webcomponents/dist/components/stepper-box/stepper-box.js';
       import type { Snippet } from 'svelte';
 
@@ -16,43 +16,47 @@
 
 Changing this property updates the icons and directionality of the stepper buttons. */
 type?: ObcStepperBoxType;
-      /** If true, displays the `helper-text` slot content below the control for additional guidance or status. */
-hasHelperText?: boolean;
       /** If true, the stepper box is disabled and the buttons are not clickable. */
-disabled?: boolean
+disabled?: boolean;
+      /** The current numeric value displayed in the field.
+Pass `null` to clear the value and show the `placeholder` instead. */
+value?: number | null;
+      /** Optional lower bound; decrement button disables at this value. */
+min?: number | undefined;
+      /** Optional upper bound; increment button disables at this value. */
+max?: number | undefined;
+      /** Increment step size (default 1). */
+stepUp?: number;
+      /** Decrement step size (default 1). */
+stepDown?: number;
+      /** Unit text displayed inside the field. */
+unit?: string;
+      /** Helper text displayed below the stepper. When set, the helper text is shown. */
+helperText?: string;
+      /** Placeholder text shown when the input is empty. */
+placeholder?: string;
+      /** If true, the input is non-editable; programmatic value changes still apply. */
+readonly?: boolean
    }
       export interface Events {
-    onDown?: (event: CustomEvent<void>) => void;
-    onUp?: (event: CustomEvent<void>) => void
+    onDown?: (event: CustomEvent<{value: number}>) => void;
+    onUp?: (event: CustomEvent<{value: number}>) => void;
+    onInput?: (event: CustomEvent<{value: string}>) => void;
+    onChange?: (event: CustomEvent<{value: number | null}>) => void
   }
       export interface Slots {
-  children?: Snippet;
-  unit?: Snippet;
-  helperText?: Snippet
+  children?: Snippet
 }
-      const {onDown, onUp, class: className, style, children, unit, helperText, ...props} = $props<Props & Events & Slots>();
+      const {onDown, onUp, onInput, onChange, class: className, style, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-stepper-box
     use:setProperties={props}
     class={className}
     style={style}
-    ondown={onDown}
-   onup={onUp} >
+    use:forwardEvents={{'down': onDown, 'up': onUp, 'input': onInput, 'change': onChange}} >
       
-      {#if children}
-        {@render children()}
-      {/if}
-
-      {#if unit}
-        <div slot="unit">
-          {@render unit()}
-        </div>
-      {/if}
-
-      {#if helperText}
-        <div slot="helper-text">
-          {@render helperText()}
-        </div>
-      {/if}
+    {#if children}
+      {@render children()}
+    {/if}
     </obc-stepper-box>

package/dist/components/stepper-box/ObcStepperBox.svelte.d.ts

@@ -11,19 +11,44 @@ export interface Props {
 
 Changing this property updates the icons and directionality of the stepper buttons. */
     type?: ObcStepperBoxType;
-    /** If true, displays the `helper-text` slot content below the control for additional guidance or status. */
-    hasHelperText?: boolean;
     /** If true, the stepper box is disabled and the buttons are not clickable. */
     disabled?: boolean;
+    /** The current numeric value displayed in the field.
+Pass `null` to clear the value and show the `placeholder` instead. */
+    value?: number | null;
+    /** Optional lower bound; decrement button disables at this value. */
+    min?: number | undefined;
+    /** Optional upper bound; increment button disables at this value. */
+    max?: number | undefined;
+    /** Increment step size (default 1). */
+    stepUp?: number;
+    /** Decrement step size (default 1). */
+    stepDown?: number;
+    /** Unit text displayed inside the field. */
+    unit?: string;
+    /** Helper text displayed below the stepper. When set, the helper text is shown. */
+    helperText?: string;
+    /** Placeholder text shown when the input is empty. */
+    placeholder?: string;
+    /** If true, the input is non-editable; programmatic value changes still apply. */
+    readonly?: boolean;
 }
 export interface Events {
-    onDown?: (event: CustomEvent<void>) => void;
-    onUp?: (event: CustomEvent<void>) => void;
+    onDown?: (event: CustomEvent<{
+        value: number;
+    }>) => void;
+    onUp?: (event: CustomEvent<{
+        value: number;
+    }>) => void;
+    onInput?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
+    onChange?: (event: CustomEvent<{
+        value: number | null;
+    }>) => void;
 }
 export interface Slots {
     children?: Snippet;
-    unit?: Snippet;
-    helperText?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcStepperBox: import("svelte").Component<$$ComponentProps, {