@oicl/openbridge-webcomponents-svelte 2.0.0-next.9 → 2.0.0-next.90

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,23 +46,44 @@ 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
+  iconRight?: Snippet;
+  leftReadout?: Snippet;
+  rightReadout?: Snippet
 }
-      const {onValue, class: className, style, iconLeft, iconRight, ...props} = $props<Props & Events & Slots>();
+      const {onValue, onChange, class: className, style, iconLeft, iconRight, 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">
@@ -75,4 +96,16 @@ labelWidth?: string
           {@render iconRight()}
         </div>
       {/if}
+
+      {#if leftReadout}
+        <div slot="left-readout">
+          {@render leftReadout()}
+        </div>
+      {/if}
+
+      {#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,38 @@ 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/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>

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, {

package/dist/components/tab-item/ObcTabItem.svelte

@@ -1,9 +1,9 @@
 
   <script lang="ts">
-    
+    export type {TabItemBadge} from '@oicl/openbridge-webcomponents/dist/components/tab-item/tab-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/tab-item/tab-item.js';
       import { setProperties } from "../../util.js";
-      
+      import type {TabItemBadge} from '@oicl/openbridge-webcomponents/dist/components/tab-item/tab-item.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -44,11 +44,16 @@ Useful for visually separating tabs.
 
 Default: false */
 hasDivider?: boolean;
-      /** Displays a badge (count/status) on the tab.
-Configure badge appearance via `badgeCount`, `badgeType`, `badgeSize`, etc.
+      /** One or more badges (count/status) to display on the tab.
 
-Default: false */
-hasBadge?: boolean;
+When this array is non-empty it takes precedence over the deprecated
+single-badge props (`hasBadge`, `badgeType`, `badgeSize`, `badgeCount`,
+`badgeShowNumber`, `showLeadingBadgeIcon`). When empty, the deprecated
+props are used instead (gated by `hasBadge`).
+
+Default: [] */
+badges?: TabItemBadge[];
+     hasBadge?: boolean;
       /** (Deprecated/Unused) Icon name for the tab.
 Icon content should be provided via the `leading-icon` slot.
 
@@ -59,33 +64,23 @@ Can be overridden by slotting content into the `title` slot.
 
 Default: 'Tab title' */
 title?: string;
-      /** Disables the tab, preventing user interaction and applying disabled styles.
+      /** Shows contextual text below the tab title.
 
 Default: false */
-disabled?: boolean;
-      /** Type of badge to display (e.g., 'regular', 'alarm', 'warning', etc.).
-See `BadgeType` enum for available options.
+showSubtitle?: boolean;
+      /** Contextual text shown below the tab title when `showSubtitle` is true.
 
-Default: 'regular' */
-badgeType?: string;
-      /** Size of the badge ('regular' or 'large').
-See `BadgeSize` enum for available options.
-
-Default: 'regular' */
-badgeSize?: string;
-      /** Shows the badge's numeric value. When false, only the badge background is rendered (for status-only badges).
-
-Default: true */
-badgeShowNumber?: boolean;
-      /** The numeric value to display in the badge (e.g., count of notifications).
-
-Default: 0 */
-badgeCount?: number;
-      /** Shows an icon inside the badge.
-Supply icon content via the `badge-icon` slot.
+Default: '' */
+subtitle?: string;
+      /** Disables the tab, preventing user interaction and applying disabled styles.
 
 Default: false */
-showLeadingBadgeIcon?: boolean
+disabled?: boolean;
+     badgeType?: string;
+     badgeSize?: string;
+     badgeShowNumber?: boolean;
+     badgeCount?: number;
+     showLeadingBadgeIcon?: boolean
    }
       export interface Events {
     onTabClick?: (event: CustomEvent<{title: string}>) => void;
@@ -93,10 +88,10 @@ showLeadingBadgeIcon?: boolean
   }
       export interface Slots {
   leadingIcon?: Snippet;
-  title?: Snippet;
+  titleSnippet?: Snippet;
   badgeIcon?: Snippet
 }
-      const {onTabClick, onTabClose, class: className, style, leadingIcon, title, badgeIcon, ...props} = $props<Props & Events & Slots>();
+      const {onTabClick, onTabClose, class: className, style, leadingIcon, titleSnippet, badgeIcon, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-tab-item
@@ -112,9 +107,9 @@ showLeadingBadgeIcon?: boolean
         </div>
       {/if}
 
-      {#if title}
+      {#if titleSnippet}
         <div slot="title">
-          {@render title()}
+          {@render titleSnippet()}
         </div>
       {/if}
 

package/dist/components/tab-item/ObcTabItem.svelte.d.ts

@@ -1,4 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/tab-item/tab-item.js';
+import type { TabItemBadge } from '@oicl/openbridge-webcomponents/dist/components/tab-item/tab-item.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -38,10 +39,15 @@ Useful for visually separating tabs.
 
 Default: false */
     hasDivider?: boolean;
-    /** Displays a badge (count/status) on the tab.
-Configure badge appearance via `badgeCount`, `badgeType`, `badgeSize`, etc.
+    /** One or more badges (count/status) to display on the tab.
 
-Default: false */
+When this array is non-empty it takes precedence over the deprecated
+single-badge props (`hasBadge`, `badgeType`, `badgeSize`, `badgeCount`,
+`badgeShowNumber`, `showLeadingBadgeIcon`). When empty, the deprecated
+props are used instead (gated by `hasBadge`).
+
+Default: [] */
+    badges?: TabItemBadge[];
     hasBadge?: boolean;
     /** (Deprecated/Unused) Icon name for the tab.
 Icon content should be provided via the `leading-icon` slot.
@@ -53,32 +59,22 @@ Can be overridden by slotting content into the `title` slot.
 
 Default: 'Tab title' */
     title?: string;
+    /** Shows contextual text below the tab title.
+
+Default: false */
+    showSubtitle?: boolean;
+    /** Contextual text shown below the tab title when `showSubtitle` is true.
+
+Default: '' */
+    subtitle?: string;
     /** Disables the tab, preventing user interaction and applying disabled styles.
 
 Default: false */
     disabled?: boolean;
-    /** Type of badge to display (e.g., 'regular', 'alarm', 'warning', etc.).
-See `BadgeType` enum for available options.
-
-Default: 'regular' */
     badgeType?: string;
-    /** Size of the badge ('regular' or 'large').
-See `BadgeSize` enum for available options.
-
-Default: 'regular' */
     badgeSize?: string;
-    /** Shows the badge's numeric value. When false, only the badge background is rendered (for status-only badges).
-
-Default: true */
     badgeShowNumber?: boolean;
-    /** The numeric value to display in the badge (e.g., count of notifications).
-
-Default: 0 */
     badgeCount?: number;
-    /** Shows an icon inside the badge.
-Supply icon content via the `badge-icon` slot.
-
-Default: false */
     showLeadingBadgeIcon?: boolean;
 }
 export interface Events {
@@ -91,10 +87,12 @@ export interface Events {
 }
 export interface Slots {
     leadingIcon?: Snippet;
-    title?: Snippet;
+    titleSnippet?: Snippet;
     badgeIcon?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
-declare const ObcTabItem: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ObcTabItem: import("svelte").Component<$$ComponentProps, {
+    TabItemBadge: typeof TabItemBadge;
+}, "">;
 type ObcTabItem = ReturnType<typeof ObcTabItem>;
 export default ObcTabItem;

package/dist/components/tab-row/ObcTabRow.svelte

@@ -9,17 +9,20 @@
       export interface Props {
      class?: string;
      style?: string;
-      /** The list of tabs to display. Each tab is defined by an object with properties such as `id`, `title`, `hasLeadingIcon`, `hasBadge`, `badgeCount`, `badgeType`, `badgeSize`, `badgeShowNumber`, `showLeadingBadgeIcon`, and `disabled`.
+      /** The list of tabs to display. Each tab is defined by an object with properties such as `id`, `title`, `subtitle`, `showSubtitle`, `hasLeadingIcon`, `hasBadge`, `badgeCount`, `badgeType`, `badgeSize`, `badgeShowNumber`, `showLeadingBadgeIcon`, and `disabled`.
 
 - `id` (string): Unique identifier for the tab.
 - `title` (string): Display label for the tab.
+- `subtitle` (string): Contextual text shown below the title when subtitle display is enabled.
+- `showSubtitle` (boolean): Optional per-tab override for displaying the subtitle.
 - `hasLeadingIcon` (boolean): Whether to show a leading icon (default: true).
-- `hasBadge` (boolean): Whether to show a badge on the tab.
-- `badgeCount` (number): Number to display in the badge.
-- `badgeType` (BadgeType): Visual style of the badge (e.g., notification, alarm, enhance).
-- `badgeSize` (BadgeSize): Size of the badge (e.g., regular, large).
-- `badgeShowNumber` (boolean): If true, shows the badge number.
-- `showLeadingBadgeIcon` (boolean): If true, shows a badge icon.
+- `badges` (TabItemBadge[]): One or more badges to display on the tab. Takes precedence over the deprecated single-badge fields below.
+- `hasBadge` (boolean, deprecated): Whether to show a badge on the tab.
+- `badgeCount` (number, deprecated): Number to display in the badge.
+- `badgeType` (BadgeType, deprecated): Visual style of the badge (e.g., notification, alarm, enhance).
+- `badgeSize` (BadgeSize, deprecated): Size of the badge (e.g., regular, large).
+- `badgeShowNumber` (boolean, deprecated): If true, shows the badge number.
+- `showLeadingBadgeIcon` (boolean, deprecated): If true, shows a badge icon.
 - `disabled` (boolean): If true, disables the tab. */
 tabs?: TabData[];
       /** The `id` of the currently selected tab. Only one tab can be selected at a time.
@@ -30,10 +33,15 @@ selectedTabId?: string;
 
 Default: `false`. */
 hasClose?: boolean;
+     centerContent?: boolean;
       /** Enables "hug" mode for a more compact tab layout with reduced padding.
 
 Default: `false`. */
 hug?: boolean;
+      /** Whether to display subtitle text for each tab. Individual tabs can override this with `tab.showSubtitle`.
+
+Default: `false`. */
+showSubtitle?: boolean;
       /** Whether to display an "add new tab" button at the end of the tab row. When clicked, emits the `add-new-tab` event.
 
 Default: `false`. */
@@ -46,9 +54,9 @@ hasAddNewTab?: boolean
   }
       export interface Slots {
   tabIcon?: Snippet<[any]>;
-  tabBadgeIcon?: Snippet<[any]>
+  tab?: Snippet<[any]>
 }
-      const {onTabSelected, onTabClosed, onAddNewTab, class: className, style, tabIcon, tabBadgeIcon, ...props} = $props<Props & Events & Slots>();
+      const {onTabSelected, onTabClosed, onAddNewTab, class: className, style, tabIcon, tab, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-tab-row
@@ -59,18 +67,18 @@ hasAddNewTab?: boolean
    ontab-closed={onTabClosed}
    onadd-new-tab={onAddNewTab} >
       
-      {#if tabs && tabIcon}
-        {#each tabs as item}
+      {#if props.tabs && tabIcon}
+        {#each props.tabs as item}
           <div slot="tab-{item.id}-icon">
             {@render tabIcon(item)}
           </div>
         {/each}
       {/if}
 
-      {#if tabs && tabBadgeIcon}
-        {#each tabs as item}
-          <div slot="tab-{item.id}-badge-icon">
-            {@render tabBadgeIcon(item)}
+      {#if props.tabs && tab}
+        {#each props.tabs as item}
+          <div slot="tab-{item.id}-<iconSlotName>">
+            {@render tab(item)}
           </div>
         {/each}
       {/if}

package/dist/components/tab-row/ObcTabRow.svelte.d.ts

@@ -4,17 +4,20 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** The list of tabs to display. Each tab is defined by an object with properties such as `id`, `title`, `hasLeadingIcon`, `hasBadge`, `badgeCount`, `badgeType`, `badgeSize`, `badgeShowNumber`, `showLeadingBadgeIcon`, and `disabled`.
+    /** The list of tabs to display. Each tab is defined by an object with properties such as `id`, `title`, `subtitle`, `showSubtitle`, `hasLeadingIcon`, `hasBadge`, `badgeCount`, `badgeType`, `badgeSize`, `badgeShowNumber`, `showLeadingBadgeIcon`, and `disabled`.
 
 - `id` (string): Unique identifier for the tab.
 - `title` (string): Display label for the tab.
+- `subtitle` (string): Contextual text shown below the title when subtitle display is enabled.
+- `showSubtitle` (boolean): Optional per-tab override for displaying the subtitle.
 - `hasLeadingIcon` (boolean): Whether to show a leading icon (default: true).
-- `hasBadge` (boolean): Whether to show a badge on the tab.
-- `badgeCount` (number): Number to display in the badge.
-- `badgeType` (BadgeType): Visual style of the badge (e.g., notification, alarm, enhance).
-- `badgeSize` (BadgeSize): Size of the badge (e.g., regular, large).
-- `badgeShowNumber` (boolean): If true, shows the badge number.
-- `showLeadingBadgeIcon` (boolean): If true, shows a badge icon.
+- `badges` (TabItemBadge[]): One or more badges to display on the tab. Takes precedence over the deprecated single-badge fields below.
+- `hasBadge` (boolean, deprecated): Whether to show a badge on the tab.
+- `badgeCount` (number, deprecated): Number to display in the badge.
+- `badgeType` (BadgeType, deprecated): Visual style of the badge (e.g., notification, alarm, enhance).
+- `badgeSize` (BadgeSize, deprecated): Size of the badge (e.g., regular, large).
+- `badgeShowNumber` (boolean, deprecated): If true, shows the badge number.
+- `showLeadingBadgeIcon` (boolean, deprecated): If true, shows a badge icon.
 - `disabled` (boolean): If true, disables the tab. */
     tabs?: TabData[];
     /** The `id` of the currently selected tab. Only one tab can be selected at a time.
@@ -25,10 +28,15 @@ Changing this property updates the selected tab visually and emits the `tab-sele
 
 Default: `false`. */
     hasClose?: boolean;
+    centerContent?: boolean;
     /** Enables "hug" mode for a more compact tab layout with reduced padding.
 
 Default: `false`. */
     hug?: boolean;
+    /** Whether to display subtitle text for each tab. Individual tabs can override this with `tab.showSubtitle`.
+
+Default: `false`. */
+    showSubtitle?: boolean;
     /** Whether to display an "add new tab" button at the end of the tab row. When clicked, emits the `add-new-tab` event.
 
 Default: `false`. */
@@ -49,7 +57,7 @@ export interface Events {
 }
 export interface Slots {
     tabIcon?: Snippet<[any]>;
-    tabBadgeIcon?: Snippet<[any]>;
+    tab?: Snippet<[any]>;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcTabRow: import("svelte").Component<$$ComponentProps, {

package/dist/components/tag/ObcTag.svelte

@@ -1,9 +1,9 @@
 
   <script lang="ts">
-    export type {TagColor} from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
+    export type {TagColor, TagSize} from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
       import '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
       import { setProperties } from "../../util.js";
-      import type {TagColor} from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
+      import type {TagColor, TagSize} from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -11,6 +11,7 @@
      style?: string;
      label?: string;
      color?: TagColor;
+     size?: TagSize;
      hasIcon?: boolean
    }
       export interface Events {

package/dist/components/tag/ObcTag.svelte.d.ts

@@ -1,11 +1,12 @@
 import '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
-import type { TagColor } from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
+import type { TagColor, TagSize } from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
     label?: string;
     color?: TagColor;
+    size?: TagSize;
     hasIcon?: boolean;
 }
 export interface Events {
@@ -16,6 +17,7 @@ export interface Slots {
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcTag: import("svelte").Component<$$ComponentProps, {
     TagColor: typeof TagColor;
+    TagSize: typeof TagSize;
 }, "">;
 type ObcTag = ReturnType<typeof ObcTag>;
 export default ObcTag;

package/dist/components/textbox/ObcTextbox.svelte

@@ -0,0 +1,42 @@
+
+  <script lang="ts">
+    export type {ObcTextboxAlignment, ObcTextboxSize, ObcTextboxFontWeight} from '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
+      import '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
+      import { setProperties } from "../../util.js";
+      import type {ObcTextboxAlignment, ObcTextboxSize, ObcTextboxFontWeight} from '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
+      import type { Snippet } from 'svelte';
+
+      export interface Props {
+     class?: string;
+     style?: string;
+     alignment?: ObcTextboxAlignment;
+     size?: ObcTextboxSize;
+     fontWeight?: ObcTextboxFontWeight;
+     tabularNums?: boolean
+   }
+      export interface Events {
+    
+  }
+      export interface Slots {
+  children?: Snippet;
+  length?: Snippet
+}
+      const { class: className, style, children, length, ...props} = $props<Props & Events & Slots>();
+
+    </script>
+    <obc-textbox
+    use:setProperties={props}
+    class={className}
+    style={style}
+     >
+      
+      {#if children}
+        {@render children()}
+      {/if}
+
+      {#if length}
+        <div slot="length">
+          {@render length()}
+        </div>
+      {/if}
+    </obc-textbox>