@oicl/openbridge-webcomponents-svelte 2.0.0-next.81 → 2.0.0-next.82

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

@@ -9,25 +9,41 @@
       export interface Props {
      class?: string;
      style?: string;
-     type?: ProgressBarType;
-     mode?: ProgressBarMode;
-     circularState?: CircularProgressState;
-     value?: number;
-     showValue?: boolean;
-     showUnit?: boolean;
-     hasDescription?: boolean;
-     description?: string;
-     showState?: boolean;
-     stateLabel?: string;
-     progressiveIndeterminate?: boolean
+      /** Layout type: `linear` (horizontal bar) or `circular` (ring). */
+type?: ProgressBarType;
+      /** Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely. */
+mode?: ProgressBarMode;
+      /** Circular display state: `determinate` (numeric ring), `indeterminate` (animated ring with
+icon), or `icon` (ring framing the icon slot). */
+circularState?: CircularProgressState;
+      /** Progress percentage (0–100); clamped when rendered. */
+value?: number;
+      /** Shows the value label above the bar (percentage when determinate, "Loading" when indeterminate). */
+showValue?: boolean;
+      /** Appends a `%` unit next to the centered value. */
+showUnit?: boolean;
+      /** Shows the `description` text below the bar. */
+hasDescription?: boolean;
+      /** Description text rendered below the bar. */
+description?: string;
+      /** Shows the `stateLabel` next to the value.
+
+**TODO(designer):** Confirm the intended purpose of the state indicator — the story labels
+this a "future feature". */
+showState?: boolean;
+      /** Text shown alongside the value when `showState` is enabled. */
+stateLabel?: string;
+      /** Uses a progressive indeterminate ring (spinning arc that grows with `value`); takes
+precedence over `circularState`. */
+progressiveIndeterminate?: boolean
    }
       export interface Events {
     
   }
       export interface Slots {
-  children?: Snippet
+  icon?: Snippet
 }
-      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const { class: className, style, icon, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-progress-bar
@@ -36,7 +52,9 @@
     style={style}
      >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if icon}
+        <div slot="icon">
+          {@render icon()}
+        </div>
+      {/if}
     </obc-progress-bar>

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

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-svelte",
-  "version": "2.0.0-next.81",
+  "version": "2.0.0-next.82",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",
@@ -31,7 +31,7 @@
     }
   },
   "dependencies": {
-    "@oicl/openbridge-webcomponents": "^2.0.0-next.80"
+    "@oicl/openbridge-webcomponents": "^2.0.0-next.81"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"