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

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

@@ -1,31 +1,85 @@
 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.
+     *
+     * Available when `type==linear`.
+     */
     mode?: ProgressBarMode;
+    /**
+     * Circular display state: `determinate` (numeric ring), `indeterminate` (animated ring with icon), or `icon` (ring framing the icon slot).
+     *
+     * Available when `type==circular`.
+     */
     circularState?: CircularProgressState;
+    /**
+     * Color emphasis of the bar fill: `regular` (gray) or `enhanced` (blue).
+     *
+     * Available when `type==linear`.
+     */
+    priority?: Priority;
+    /** Progress percentage (0–100); clamped when rendered. */
     value?: number;
+    /**
+     * Shows the value label above the bar (percentage when determinate, "Loading" when indeterminate).
+     *
+     * Available when `type==linear`.
+     */
     showValue?: boolean;
+    /**
+     * Appends a `%` unit next to the centered value.
+     *
+     * Available when `type==circular && (progressiveIndeterminate==true || circularState==determinate)`.
+     */
     showUnit?: boolean;
+    /**
+     * Shows the `description` text below the bar.
+     *
+     * Available when `type==linear`.
+     */
     hasDescription?: boolean;
+    /**
+     * Description text rendered below the bar.
+     *
+     * Available when `type==linear && hasDescription==true`.
+     */
     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.
+     *
+     * Available when `type==linear && showValue==true && mode==determinate && showState==true`.
+     */
     stateLabel?: string;
+    /**
+     * Uses a progressive indeterminate ring (spinning arc that grows with `value`); takes precedence over `circularState`.
+     *
+     * Available when `type==circular`.
+     */
     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,95 @@
 
   <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;
+     /** Layout type of the button: `linear` (label + bar) or `circular` (icon + ring). */
      type?: ProgressButtonType;
+     /**
+      * Elevation style of the button surface.
+      *
+      * Available when `type==linear`.
+      */
      buttonStyle?: ButtonStyle;
+     /**
+      * Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely.
+      *
+      * Available when `showProgress==true`.
+      */
      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.
+      *
+      * Available when `type==linear`.
+      */
      hasLeadingIcon?: boolean;
+     /**
+      * Renders the `trailing-icon` slot.
+      *
+      * Available when `type==linear`.
+      */
      hasTrailingIcon?: boolean;
+     /** Shows an alert (error) ring/border around the button. */
      hasAlert?: boolean;
+     /**
+      * Uses a progressive indeterminate ring that animates while advancing toward `value`.
+      *
+      * Available when `type==circular && showProgress==true`.
+      */
      progressiveIndeterminate?: boolean;
+     /**
+      * Shows the `label` below the circular button.
+      *
+      * Available when `type==circular`.
+      */
      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,69 @@
 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.
+     *
+     * Available when `type==linear`.
+     */
     buttonStyle?: ButtonStyle;
+    /**
+     * Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely.
+     *
+     * Available when `showProgress==true`.
+     */
     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.
+     *
+     * Available when `type==linear`.
+     */
     hasLeadingIcon?: boolean;
+    /**
+     * Renders the `trailing-icon` slot.
+     *
+     * Available when `type==linear`.
+     */
     hasTrailingIcon?: boolean;
+    /** Shows an alert (error) ring/border around the button. */
     hasAlert?: boolean;
+    /**
+     * Uses a progressive indeterminate ring that animates while advancing toward `value`.
+     *
+     * Available when `type==circular && showProgress==true`.
+     */
     progressiveIndeterminate?: boolean;
+    /**
+     * Shows the `label` below the circular button.
+     *
+     * Available when `type==circular`.
+     */
     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/progress-indicator-dots/ObcProgressIndicatorDots.svelte

@@ -9,17 +9,12 @@
       export interface Props {
      class?: string;
      style?: string;
-      /** Sets the total number of steps/dots to display.
-Must be at least 1. Defaults to 5. */
-totalSteps?: number;
-      /** Indicates the currently active step (1-based index).
-Values outside the valid range are clamped to [1, totalSteps].
-Defaults to 1. */
-currentStep?: number;
-      /** If true, the indicator stretches to fill the container width.
-If false, uses a compact layout sized to its content.
-Defaults to false. */
-fullwidth?: boolean
+     /** Sets the total number of steps/dots to display. Must be at least 1. Defaults to 5. */
+     totalSteps?: number;
+     /** Indicates the currently active step (1-based index). Values outside the valid range are clamped to [1, totalSteps]. Defaults to 1. */
+     currentStep?: number;
+     /** If true, the indicator stretches to fill the container width. If false, uses a compact layout sized to its content. Defaults to false. */
+     fullwidth?: boolean
    }
       export interface Events {
     

package/dist/components/progress-indicator-dots/ObcProgressIndicatorDots.svelte.d.ts

@@ -3,16 +3,11 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** Sets the total number of steps/dots to display.
-Must be at least 1. Defaults to 5. */
+    /** Sets the total number of steps/dots to display. Must be at least 1. Defaults to 5. */
     totalSteps?: number;
-    /** Indicates the currently active step (1-based index).
-Values outside the valid range are clamped to [1, totalSteps].
-Defaults to 1. */
+    /** Indicates the currently active step (1-based index). Values outside the valid range are clamped to [1, totalSteps]. Defaults to 1. */
     currentStep?: number;
-    /** If true, the indicator stretches to fill the container width.
-If false, uses a compact layout sized to its content.
-Defaults to false. */
+    /** If true, the indicator stretches to fill the container width. If false, uses a compact layout sized to its content. Defaults to false. */
     fullwidth?: boolean;
 }
 export interface Events {

package/dist/components/radio/ObcRadio.svelte

@@ -2,32 +2,27 @@
   <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';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** The label text displayed next to the radio button.
-If omitted, the radio renders without a label. */
-label?: string | undefined;
-      /** The name attribute for grouping radios.
-Radios with the same name are grouped, allowing only one to be selected at a time. */
-name?: string | undefined;
-      /** The value submitted with the form when this radio is selected. */
-value?: string | undefined;
-      /** Whether the radio is currently selected.
-Only one radio in a group should be checked at a time. */
-checked?: boolean;
-      /** Disables the radio button, preventing user interaction. */
-disabled?: boolean;
-      /** Marks the radio as required for form validation.
-At least one radio in a group should be required if selection is mandatory. */
-required?: boolean;
-      /** The id attribute for the underlying input element.
-Should be unique within the document and used to associate the label for accessibility. */
-inputId?: string
+     /** The label text displayed next to the radio button. If omitted, the radio renders without a label. */
+     label?: string | undefined;
+     /** The name attribute for grouping radios. Radios with the same name are grouped, allowing only one to be selected at a time. */
+     name?: string | undefined;
+     /** The value submitted with the form when this radio is selected. */
+     value?: string | undefined;
+     /** Whether the radio is currently selected. Only one radio in a group should be checked at a time. */
+     checked?: boolean;
+     /** Disables the radio button, preventing user interaction. */
+     disabled?: boolean;
+     /** Marks the radio as required for form validation. At least one radio in a group should be required if selection is mandatory. */
+     required?: boolean;
+     /** The id attribute for the underlying input element. Should be unique within the document and used to associate the label for accessibility. */
+     inputId?: string
    }
       export interface Events {
     onChange?: (event: CustomEvent<unknown>) => void
@@ -42,7 +37,7 @@ inputId?: string
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
       {#if children}
         {@render children()}

package/dist/components/radio/ObcRadio.svelte.d.ts

@@ -3,24 +3,19 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** The label text displayed next to the radio button.
-If omitted, the radio renders without a label. */
+    /** The label text displayed next to the radio button. If omitted, the radio renders without a label. */
     label?: string | undefined;
-    /** The name attribute for grouping radios.
-Radios with the same name are grouped, allowing only one to be selected at a time. */
+    /** The name attribute for grouping radios. Radios with the same name are grouped, allowing only one to be selected at a time. */
     name?: string | undefined;
     /** The value submitted with the form when this radio is selected. */
     value?: string | undefined;
-    /** Whether the radio is currently selected.
-Only one radio in a group should be checked at a time. */
+    /** Whether the radio is currently selected. Only one radio in a group should be checked at a time. */
     checked?: boolean;
     /** Disables the radio button, preventing user interaction. */
     disabled?: boolean;
-    /** Marks the radio as required for form validation.
-At least one radio in a group should be required if selection is mandatory. */
+    /** Marks the radio as required for form validation. At least one radio in a group should be required if selection is mandatory. */
     required?: boolean;
-    /** The id attribute for the underlying input element.
-Should be unique within the document and used to associate the label for accessibility. */
+    /** The id attribute for the underlying input element. Should be unique within the document and used to associate the label for accessibility. */
     inputId?: string;
 }
 export interface Events {

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';
@@ -11,20 +11,20 @@ import type {RichButtonDirection} from '@oicl/openbridge-webcomponents/dist/comp
       export interface Props {
      class?: string;
      style?: string;
-      /** The main label text displayed on the button (single line, truncated if too long). */
-label?: string | HTMLTemplateResult;
-      /** Optional supporting description text (up to two lines, truncated if too long). */
-description?: string;
+     /** The main label text displayed on the button (single line, truncated if too long). */
+     label?: string | HTMLTemplateResult;
+     /** Optional supporting description text (up to two lines, truncated if too long). */
+     description?: string;
       /** Layout direction for the button content.
 - `vertical` (default): Icons and text are stacked vertically.
 - `horizontal`: Icons and text are arranged side by side. */
 direction?: RichButtonDirection;
-      /** If true, displays the leading icon slot before the label. */
-hasLeadingIcon?: boolean;
-      /** If true, displays the trailing icon slot after the description. */
-hasTrailingIcon?: boolean;
-      /** If true, the button is disabled and cannot be interacted with. */
-disabled?: boolean;
+     /** If true, displays the leading icon slot before the label. */
+     hasLeadingIcon?: boolean;
+     /** If true, displays the trailing icon slot after the description. */
+     hasTrailingIcon?: boolean;
+     /** If true, the button is disabled and cannot be interacted with. */
+     disabled?: boolean;
      fullWidth?: boolean;
      fullHeight?: boolean
    }
@@ -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">

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

@@ -21,25 +21,40 @@ import type {SequenceValue, SequenceType, SequenceStyle} from '@oicl/openbridge-
      showConnector?: boolean;
      hasLeadingIcon?: boolean;
      cardTitle?: string;
+     /** Available when `titleType!=Single`. */
      subtitle?: string;
      hasTimeStamp?: boolean;
+     /** Available when `hasTimeStamp==true`. */
      timeLabel?: string;
+     /** Available when `hasTimeStamp==true`. */
      time?: string;
      hasContent?: boolean;
      hasActions?: boolean;
+     /** Available when `progressType==Centered && (titleType!=Single || indicatorTypeOverride!=undefined)`. */
      progressLabel?: string;
+     /** Available when `(showConnector==true && progressType==Centered && horizontal==false) || (showConnector==true && horizontal==true && progressType!=LeftSide)`. */
      progressValue?: SequenceValue;
+     /** Available when `progressType==LeftSide && horizontal==false && hasTimeStamp==true`. */
      leftTime?: string;
+     /** Available when `progressType==Centered`. */
      indicatorTypeOverride?: SequenceType | undefined;
+     /** Available when `progressType==Centered`. */
      indicatorStyleOverride?: SequenceStyle | undefined
    }
       export interface Events {
     
   }
       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 +63,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

@@ -15,21 +15,36 @@ export interface Props {
     showConnector?: boolean;
     hasLeadingIcon?: boolean;
     cardTitle?: string;
+    /** Available when `titleType!=Single`. */
     subtitle?: string;
     hasTimeStamp?: boolean;
+    /** Available when `hasTimeStamp==true`. */
     timeLabel?: string;
+    /** Available when `hasTimeStamp==true`. */
     time?: string;
     hasContent?: boolean;
     hasActions?: boolean;
+    /** Available when `progressType==Centered && (titleType!=Single || indicatorTypeOverride!=undefined)`. */
     progressLabel?: string;
+    /** Available when `(showConnector==true && progressType==Centered && horizontal==false) || (showConnector==true && horizontal==true && progressType!=LeftSide)`. */
     progressValue?: SequenceValue;
+    /** Available when `progressType==LeftSide && horizontal==false && hasTimeStamp==true`. */
     leftTime?: string;
+    /** Available when `progressType==Centered`. */
     indicatorTypeOverride?: SequenceType | undefined;
+    /** Available when `progressType==Centered`. */
     indicatorStyleOverride?: SequenceStyle | undefined;
 }
 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

@@ -16,21 +16,31 @@ import type {SequenceType, SequenceStyle, SequenceValue} from '@oicl/openbridge-
      state?: SequenceItemState;
      title?: string;
      hasSubtitle?: boolean;
+     /** Available when `hasSubtitle==true`. */
      subtitle?: string;
      hasDescription?: boolean;
+     /** Available when `hasDescription==true`. */
      description?: string;
-      /** Enables the meta stamp container. Without this, timestamp/distance values are
-ignored even if their booleans are true. */
-hasStamp?: boolean;
-      /** Shows a timestamp inside the stamp container when `hasStamp` is true. */
-hasTimeStamp?: boolean;
+     /** Enables the meta stamp container. Without this, timestamp/distance values are ignored even if their booleans are true. */
+     hasStamp?: boolean;
+     /**
+      * Shows a timestamp inside the stamp container when `hasStamp` is true.
+      *
+      * Available when `hasStamp==true`.
+      */
+     hasTimeStamp?: boolean;
+     /** Available when `hasStamp==true && hasTimeStamp==true`. */
      timeStamp?: string;
-      /** Shows a distance stamp alongside the timestamp. Requires `hasStamp` to be true. */
-hasDistanceStamp?: boolean;
+     /**
+      * Shows a distance stamp alongside the timestamp. Requires `hasStamp` to be true.
+      *
+      * Available when `hasStamp==true`.
+      */
+     hasDistanceStamp?: boolean;
+     /** Available when `hasStamp==true && hasDistanceStamp==true`. */
      distanceStamp?: string;
-      /** Optional text used inside the auto-generated step. Defaults to `title` when
-not provided. */
-stepLabel?: string;
+     /** Optional text used inside the auto-generated step. Defaults to `title` when not provided. */
+     stepLabel?: string;
      stepType?: SequenceType;
      stepStyle?: SequenceStyle;
      stepValue?: SequenceValue | undefined;
@@ -42,9 +52,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 +66,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>