@oicl/openbridge-webcomponents-svelte 2.0.0-next.10 → 2.0.0-next.101

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 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}
-     >
+    onobc-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/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

@@ -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}
-     >
+    onclose-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/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 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,22 @@ 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} >
+    onvalue={onValue}
+   onchange={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 type {ObcSliderDoubleValueEvent, ObcSliderDoubleChangeEvent, ObcSliderDoubleVariant} from '@oicl/openbridge-webcomponents/dist/components/slider-double/slider-double.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -46,33 +46,52 @@ labelUnit?: string;
       /** Number of decimal places to display in value labels. */
 labelDecimals?: number;
       /** CSS width for value labels (e.g., "5ch", "60px"). */
-labelWidth?: string
+labelWidth?: string;
+      /** Whether to show the left (low) readout label.
+
+When false, the left readout is hidden entirely. When true, the readout
+renders the formatted `low` value or the content slotted into `left-readout`.
+
+Default is true. Set via JavaScript property (no HTML attribute). */
+showLeftReadout?: boolean;
+      /** Whether to show the right (high) readout label.
+
+When false, the right readout is hidden entirely. When true, the readout
+renders the formatted `high` value or the content slotted into `right-readout`.
+
+Default is true. Set via JavaScript property (no HTML attribute). */
+showRightReadout?: boolean;
+      /** Removes spacing between the slider and its container edges for seamless
+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, ...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} >
+    onvalue={onValue}
+   onchange={onChange} >
       
-      {#if iconLeft}
-        <div slot="icon-left">
-          {@render iconLeft()}
+      {#if leftReadout}
+        <div slot="left-readout">
+          {@render leftReadout()}
         </div>
       {/if}
 
-      {#if iconRight}
-        <div slot="icon-right">
-          {@render iconRight()}
+      {#if rightReadout}
+        <div slot="right-readout">
+          {@render rightReadout()}
         </div>
       {/if}
     </obc-slider-double>

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;
@@ -42,17 +42,36 @@ Default is 1/3 (i.e., 3 seconds for full range). */
     labelDecimals?: number;
     /** CSS width for value labels (e.g., "5ch", "60px"). */
     labelWidth?: string;
+    /** Whether to show the left (low) readout label.
+
+When false, the left readout is hidden entirely. When true, the readout
+renders the formatted `low` value or the content slotted into `left-readout`.
+
+Default is true. Set via JavaScript property (no HTML attribute). */
+    showLeftReadout?: boolean;
+    /** Whether to show the right (high) readout label.
+
+When false, the right readout is hidden entirely. When true, the readout
+renders the formatted `high` value or the content slotted into `right-readout`.
+
+Default is true. Set via JavaScript property (no HTML attribute). */
+    showRightReadout?: boolean;
+    /** Removes spacing between the slider and its container edges for seamless
+layout integration. Reflected to the `hugcontainer` HTML attribute. */
+    hugContainer?: boolean;
 }
 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/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

@@ -16,21 +16,38 @@
 
 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
@@ -38,21 +55,11 @@ disabled?: boolean
     class={className}
     style={style}
     ondown={onDown}
-   onup={onUp} >
+   onup={onUp}
+   oninput={onInput}
+   onchange={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>