@oicl/openbridge-webcomponents-svelte 2.0.0-next.12 → 2.0.0-next.121

package/dist/building-blocks/instrument-radial/ObcInstrumentRadial.svelte

@@ -1,11 +1,13 @@
 
   <script lang="ts">
-    export type {InstrumentState, Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
+    export type {RadialFrame} from '@oicl/openbridge-webcomponents/dist/svghelpers/radial-frame.js';
+export type {InstrumentState, Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
 export type {ObcGaugeRadialType, GaugeRadialAdvice} from '@oicl/openbridge-webcomponents/dist/building-blocks/instrument-radial/instrument-radial.js';
 export type {TickmarkStyle} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/watch/tickmark.js';
       import '@oicl/openbridge-webcomponents/dist/building-blocks/instrument-radial/instrument-radial.js';
-      import { setProperties } from "../../util.js";
-      import type {InstrumentState, Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
+      import { setProperties, forwardEvents } from "../../util.js";
+      import type {RadialFrame} from '@oicl/openbridge-webcomponents/dist/svghelpers/radial-frame.js';
+import type {InstrumentState, Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
 import type {ObcGaugeRadialType, GaugeRadialAdvice} from '@oicl/openbridge-webcomponents/dist/building-blocks/instrument-radial/instrument-radial.js';
 import type {TickmarkStyle} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/watch/tickmark.js';
       import type { Snippet } from 'svelte';
@@ -13,6 +15,27 @@ import type {TickmarkStyle} from '@oicl/openbridge-webcomponents/dist/navigation
       export interface Props {
      class?: string;
      style?: string;
+      /** Target setpoint value. `undefined` = no setpoint marker shown. */
+setpoint?: number | undefined;
+      /** Adjustment preview for 2-step interface.
+When defined, two markers are shown: original (dimmed) + new (focus). */
+newSetpoint?: number | undefined;
+      /** Manual at-setpoint override (used when `autoAtSetpoint` is false). */
+atSetpoint?: boolean;
+      /** User is physically interacting with the control.
+Suppresses at-setpoint calculation and triggers focus visual. */
+touching?: boolean;
+      /** When false, uses manual `atSetpoint` boolean instead of auto-calculation. */
+autoAtSetpoint?: boolean;
+      /** Tolerance for auto at-setpoint detection. */
+autoAtSetpointDeadband?: number;
+      /** Tolerance for zero-snap visual state. */
+setpointAtZeroDeadband?: number;
+      /** Override to derive the setpoint color from the instrument's `priority`
+regardless of instrument state. */
+setpointOverride?: boolean;
+      /** Enable CSS-animated confirm transition. */
+animateSetpoint?: boolean;
      state?: InstrumentState;
      priority?: Priority;
      value?: number;
@@ -38,22 +61,34 @@ tertiaryTickmarkInterval?: number | undefined;
      advices?: GaugeRadialAdvice[];
      clipTop?: number;
      clipBottom?: number;
-     zoomToFitArc?: boolean
+     clipLeft?: number;
+     clipRight?: number;
+      /** Place the horizontal end labels (±90°, e.g. min/max) below the tick instead
+of beside it — the "Max-min" placement from the radial label model
+(External / Internal / Max-min). See PR #903 / design discussion. */
+endLabelsMaxMin?: boolean;
+     zoomToFitArc?: boolean;
+      /** Outer-ring diameter in CSS pixels. When set, the instrument renders at a
+fixed intrinsic size derived from the ring, arc shape and label reserve —
+so instruments sharing the same value have identical ring circumference
+regardless of label width or arc extent (like obc-donut-chart's
+fixedHeight). When unset (default), the instrument fills its container. */
+faceDiameter?: number | undefined
    }
       export interface Events {
-    
+    onFrameChanged?: (event: CustomEvent<RadialFrame>) => void
   }
       export interface Slots {
   children?: Snippet
 }
-      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const {onFrameChanged, class: className, style, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-instrument-radial
     use:setProperties={props}
     class={className}
     style={style}
-     >
+    use:forwardEvents={{'frame-changed': onFrameChanged}} >
       
     {#if children}
       {@render children()}

package/dist/building-blocks/instrument-radial/ObcInstrumentRadial.svelte.d.ts

@@ -1,4 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/building-blocks/instrument-radial/instrument-radial.js';
+import type { RadialFrame } from '@oicl/openbridge-webcomponents/dist/svghelpers/radial-frame.js';
 import type { InstrumentState, Priority } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
 import type { ObcGaugeRadialType, GaugeRadialAdvice } from '@oicl/openbridge-webcomponents/dist/building-blocks/instrument-radial/instrument-radial.js';
 import type { TickmarkStyle } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/watch/tickmark.js';
@@ -6,6 +7,27 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
+    /** Target setpoint value. `undefined` = no setpoint marker shown. */
+    setpoint?: number | undefined;
+    /** Adjustment preview for 2-step interface.
+When defined, two markers are shown: original (dimmed) + new (focus). */
+    newSetpoint?: number | undefined;
+    /** Manual at-setpoint override (used when `autoAtSetpoint` is false). */
+    atSetpoint?: boolean;
+    /** User is physically interacting with the control.
+Suppresses at-setpoint calculation and triggers focus visual. */
+    touching?: boolean;
+    /** When false, uses manual `atSetpoint` boolean instead of auto-calculation. */
+    autoAtSetpoint?: boolean;
+    /** Tolerance for auto at-setpoint detection. */
+    autoAtSetpointDeadband?: number;
+    /** Tolerance for zero-snap visual state. */
+    setpointAtZeroDeadband?: number;
+    /** Override to derive the setpoint color from the instrument's `priority`
+regardless of instrument state. */
+    setpointOverride?: boolean;
+    /** Enable CSS-animated confirm transition. */
+    animateSetpoint?: boolean;
     state?: InstrumentState;
     priority?: Priority;
     value?: number;
@@ -31,15 +53,29 @@ When undefined or <= 0, no tertiary tickmarks are shown. */
     advices?: GaugeRadialAdvice[];
     clipTop?: number;
     clipBottom?: number;
+    clipLeft?: number;
+    clipRight?: number;
+    /** Place the horizontal end labels (±90°, e.g. min/max) below the tick instead
+of beside it — the "Max-min" placement from the radial label model
+(External / Internal / Max-min). See PR #903 / design discussion. */
+    endLabelsMaxMin?: boolean;
     zoomToFitArc?: boolean;
+    /** Outer-ring diameter in CSS pixels. When set, the instrument renders at a
+fixed intrinsic size derived from the ring, arc shape and label reserve —
+so instruments sharing the same value have identical ring circumference
+regardless of label width or arc extent (like obc-donut-chart's
+fixedHeight). When unset (default), the instrument fills its container. */
+    faceDiameter?: number | undefined;
 }
 export interface Events {
+    onFrameChanged?: (event: CustomEvent<RadialFrame>) => void;
 }
 export interface Slots {
     children?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcInstrumentRadial: import("svelte").Component<$$ComponentProps, {
+    RadialFrame: typeof RadialFrame;
     InstrumentState: typeof InstrumentState;
     Priority: typeof Priority;
     ObcGaugeRadialType: typeof ObcGaugeRadialType;

package/dist/building-blocks/readout-block/ObcReadoutBlock.svelte

@@ -0,0 +1,81 @@
+
+  <script lang="ts">
+    export type {ReadoutBlockVariant, ReadoutBlockSize, ReadoutBlockDataQuality, ReadoutBlockHidePhase} from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
+export type {ReadoutValueType} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
+export type {ObcTextboxSize, ObcTextboxFontWeight, ObcTextboxAlignment} from '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
+export type {AlertFrameConfig} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+      import '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
+      import { setProperties } from "../../util.js";
+      import type {ReadoutBlockVariant, ReadoutBlockSize, ReadoutBlockDataQuality, ReadoutBlockHidePhase} from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
+import type {ReadoutValueType} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
+import type {ObcTextboxSize, ObcTextboxFontWeight, ObcTextboxAlignment} from '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
+import type {AlertFrameConfig} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+      import type { Snippet } from 'svelte';
+
+      export interface Props {
+     class?: string;
+     style?: string;
+      /** Semantic variant (value / setpoint / advice). */
+variant?: ReadoutBlockVariant;
+      /** [object Object],[object Object],[object Object] */
+value?: string | number | null;
+      /** [object Object],[object Object],[object Object] */
+valueType?: ReadoutValueType;
+      /** Density tier — icon size, gap, degree tier. */
+size?: ReadoutBlockSize;
+      /** Resolved number-typography size. When unset it is derived from `size`
+(small→s, medium→m, large→l), so a parent that de-emphasises a block (e.g.
+a secondary setpoint) can pass a smaller size without changing the tier. */
+valueSize?: ObcTextboxSize | undefined;
+      /** Accent (in-command) colour tone. */
+enhanced?: boolean;
+      /** Number font weight (regular / semibold / bold); colour is independent. */
+weight?: ObcTextboxFontWeight;
+      /** Render the trailing cap-height degree glyph (`°`). */
+hasDegree?: boolean;
+      /** Show the leading marker-icon container (always on for setpoint/advice). */
+hasIcon?: boolean;
+      /** Number of fraction digits. */
+fractionDigits?: number;
+      /** Integer digits to reserve / hint (independent of `fractionDigits`). */
+maxDigits?: number;
+      /** Render muted leading zeros filling the integer part to `maxDigits`. */
+hintedZeros?: boolean;
+      /** Explicit longest string to reserve width for (e.g. `"0000.0"`). */
+spaceReserver?: string | undefined;
+      /** Render `offText` instead of a number (e.g. equipment powered down). */
+off?: boolean;
+      /** Text shown when `off` is true. */
+offText?: string;
+      /** Text alignment of the number within its reserved width. */
+alignment?: ObcTextboxAlignment;
+      /** Per-block measurement quality (outline chip). */
+dataQuality?: ReadoutBlockDataQuality | undefined;
+      /** Per-block alert frame; nests inside any parent alert frame. */
+alert?: boolean | AlertFrameConfig;
+      /** Setpoint focus (touch) state — only meaningful for `role="setpoint"`. */
+touching?: boolean;
+      /** Setpoint pop-up fade phase — only meaningful for `role="setpoint"`. */
+hidePhase?: ReadoutBlockHidePhase
+   }
+      export interface Events {
+    
+  }
+      export interface Slots {
+  icon?: Snippet
+}
+      const { class: className, style, icon, ...props} = $props<Props & Events & Slots>();
+
+    </script>
+    <obc-readout-block
+    use:setProperties={props}
+    class={className}
+    style={style}
+     >
+      
+      {#if icon}
+        <div slot="icon">
+          {@render icon()}
+        </div>
+      {/if}
+    </obc-readout-block>

package/dist/building-blocks/readout-block/ObcReadoutBlock.svelte.d.ts

@@ -0,0 +1,71 @@
+import '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
+import type { ReadoutBlockVariant, ReadoutBlockSize, ReadoutBlockDataQuality, ReadoutBlockHidePhase } from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
+import type { ReadoutValueType } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
+import type { ObcTextboxSize, ObcTextboxFontWeight, ObcTextboxAlignment } from '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
+import type { AlertFrameConfig } from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    style?: string;
+    /** Semantic variant (value / setpoint / advice). */
+    variant?: ReadoutBlockVariant;
+    /** [object Object],[object Object],[object Object] */
+    value?: string | number | null;
+    /** [object Object],[object Object],[object Object] */
+    valueType?: ReadoutValueType;
+    /** Density tier — icon size, gap, degree tier. */
+    size?: ReadoutBlockSize;
+    /** Resolved number-typography size. When unset it is derived from `size`
+(small→s, medium→m, large→l), so a parent that de-emphasises a block (e.g.
+a secondary setpoint) can pass a smaller size without changing the tier. */
+    valueSize?: ObcTextboxSize | undefined;
+    /** Accent (in-command) colour tone. */
+    enhanced?: boolean;
+    /** Number font weight (regular / semibold / bold); colour is independent. */
+    weight?: ObcTextboxFontWeight;
+    /** Render the trailing cap-height degree glyph (`°`). */
+    hasDegree?: boolean;
+    /** Show the leading marker-icon container (always on for setpoint/advice). */
+    hasIcon?: boolean;
+    /** Number of fraction digits. */
+    fractionDigits?: number;
+    /** Integer digits to reserve / hint (independent of `fractionDigits`). */
+    maxDigits?: number;
+    /** Render muted leading zeros filling the integer part to `maxDigits`. */
+    hintedZeros?: boolean;
+    /** Explicit longest string to reserve width for (e.g. `"0000.0"`). */
+    spaceReserver?: string | undefined;
+    /** Render `offText` instead of a number (e.g. equipment powered down). */
+    off?: boolean;
+    /** Text shown when `off` is true. */
+    offText?: string;
+    /** Text alignment of the number within its reserved width. */
+    alignment?: ObcTextboxAlignment;
+    /** Per-block measurement quality (outline chip). */
+    dataQuality?: ReadoutBlockDataQuality | undefined;
+    /** Per-block alert frame; nests inside any parent alert frame. */
+    alert?: boolean | AlertFrameConfig;
+    /** Setpoint focus (touch) state — only meaningful for `role="setpoint"`. */
+    touching?: boolean;
+    /** Setpoint pop-up fade phase — only meaningful for `role="setpoint"`. */
+    hidePhase?: ReadoutBlockHidePhase;
+}
+export interface Events {
+}
+export interface Slots {
+    icon?: Snippet;
+}
+type $$ComponentProps = Props & Events & Slots;
+declare const ObcReadoutBlock: import("svelte").Component<$$ComponentProps, {
+    ReadoutBlockVariant: typeof ReadoutBlockVariant;
+    ReadoutBlockSize: typeof ReadoutBlockSize;
+    ReadoutBlockDataQuality: typeof ReadoutBlockDataQuality;
+    ReadoutBlockHidePhase: typeof ReadoutBlockHidePhase;
+    ReadoutValueType: typeof ReadoutValueType;
+    ObcTextboxSize: typeof ObcTextboxSize;
+    ObcTextboxFontWeight: typeof ObcTextboxFontWeight;
+    ObcTextboxAlignment: typeof ObcTextboxAlignment;
+    AlertFrameConfig: typeof AlertFrameConfig;
+}, "">;
+type ObcReadoutBlock = ReturnType<typeof ObcReadoutBlock>;
+export default ObcReadoutBlock;

package/dist/building-blocks/single-axis-inclinometer/SingleAxisInclinometer.svelte

@@ -0,0 +1,48 @@
+
+  <script lang="ts">
+    export type {Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
+      import '@oicl/openbridge-webcomponents/dist/building-blocks/single-axis-inclinometer/single-axis-inclinometer.js';
+      import { setProperties } from "../../util.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;
+     zoomToFitArc?: boolean;
+      /** When `true`, the centre shows an `<obc-readout>` with the value instead of
+the horizon line, rotating indicator and vessel. Default `false`. */
+hasReadout?: boolean;
+      /** Colour palette for the scale fill / indicator and the readout value:
+`regular` (default) or `enhanced`. */
+priority?: Priority;
+      /** Half-extent of the watch arc in degrees. The arc spans `centre ± arcAngle`
+and values are placed at their true position within it. Default `45`
+reproduces the historical 90°-wide arc.
+
+Smaller values render a narrower arc. Combined with `zoomToFitArc`, the
+narrower arc is enlarged (its radius grows) on its own layer, while the
+vessel image and the rotating indicator line stay at their natural size and
+position on a separate central layer. The two layers are intentionally
+visually disconnected. */
+arcAngle?: number
+   }
+      export interface Events {
+    
+  }
+      export interface Slots {
+  children?: Snippet
+}
+      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+
+    </script>
+    <undefined
+    use:setProperties={props}
+    class={className}
+    style={style}
+     >
+      
+    {#if children}
+      {@render children()}
+    {/if}
+    </undefined>

package/dist/building-blocks/single-axis-inclinometer/SingleAxisInclinometer.svelte.d.ts

@@ -0,0 +1,35 @@
+import '@oicl/openbridge-webcomponents/dist/building-blocks/single-axis-inclinometer/single-axis-inclinometer.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;
+    zoomToFitArc?: boolean;
+    /** When `true`, the centre shows an `<obc-readout>` with the value instead of
+the horizon line, rotating indicator and vessel. Default `false`. */
+    hasReadout?: boolean;
+    /** Colour palette for the scale fill / indicator and the readout value:
+`regular` (default) or `enhanced`. */
+    priority?: Priority;
+    /** Half-extent of the watch arc in degrees. The arc spans `centre ± arcAngle`
+and values are placed at their true position within it. Default `45`
+reproduces the historical 90°-wide arc.
+
+Smaller values render a narrower arc. Combined with `zoomToFitArc`, the
+narrower arc is enlarged (its radius grows) on its own layer, while the
+vessel image and the rotating indicator line stay at their natural size and
+position on a separate central layer. The two layers are intentionally
+visually disconnected. */
+    arcAngle?: number;
+}
+export interface Events {
+}
+export interface Slots {
+    children?: Snippet;
+}
+type $$ComponentProps = Props & Events & Slots;
+declare const SingleAxisInclinometer: import("svelte").Component<$$ComponentProps, {
+    Priority: typeof Priority;
+}, "">;
+type SingleAxisInclinometer = ReturnType<typeof SingleAxisInclinometer>;
+export default SingleAxisInclinometer;

package/dist/components/accordion-card/ObcAccordionCard.svelte

@@ -1,11 +1,13 @@
 
   <script lang="ts">
     export type {Position, AccordionSize} from '@oicl/openbridge-webcomponents/dist/components/accordion-card/accordion-card.js';
-export type {ObcAlertFrameType, ObcAlertFrameThickness, ObcAlertFrameStatus} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+export type {ObcAlertFrameType, ObcAlertFrameThickness} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+export type {AlertType} from '@oicl/openbridge-webcomponents/dist/types.js';
       import '@oicl/openbridge-webcomponents/dist/components/accordion-card/accordion-card.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {Position, AccordionSize} from '@oicl/openbridge-webcomponents/dist/components/accordion-card/accordion-card.js';
-import type {ObcAlertFrameType, ObcAlertFrameThickness, ObcAlertFrameStatus} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+import type {ObcAlertFrameType, ObcAlertFrameThickness} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+import type {AlertType} from '@oicl/openbridge-webcomponents/dist/types.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -47,7 +49,7 @@ See `obc-alert-frame` for available thickness values. */
 alertFrameThickness?: ObcAlertFrameThickness;
       /** Status of the alert frame overlay (used when `hasAlert` is true).
 See `obc-alert-frame` for available statuses. */
-alertFrameStatus?: ObcAlertFrameStatus
+alertFrameStatus?: AlertType
    }
       export interface Events {
     onAccordionToggle?: (event: CustomEvent<{expanded: boolean, cardTitle: string}>) => void
@@ -66,7 +68,7 @@ alertFrameStatus?: ObcAlertFrameStatus
     use:setProperties={props}
     class={className}
     style={style}
-    onaccordion-toggle={onAccordionToggle} >
+    use:forwardEvents={{'accordion-toggle': onAccordionToggle}} >
       
       {#if leadingIcon}
         <div slot="leading-icon">

package/dist/components/accordion-card/ObcAccordionCard.svelte.d.ts

@@ -1,6 +1,7 @@
 import '@oicl/openbridge-webcomponents/dist/components/accordion-card/accordion-card.js';
 import type { Position, AccordionSize } from '@oicl/openbridge-webcomponents/dist/components/accordion-card/accordion-card.js';
-import type { ObcAlertFrameType, ObcAlertFrameThickness, ObcAlertFrameStatus } from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+import type { ObcAlertFrameType, ObcAlertFrameThickness } from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
+import type { AlertType } from '@oicl/openbridge-webcomponents/dist/types.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -41,7 +42,7 @@ See `obc-alert-frame` for available thickness values. */
     alertFrameThickness?: ObcAlertFrameThickness;
     /** Status of the alert frame overlay (used when `hasAlert` is true).
 See `obc-alert-frame` for available statuses. */
-    alertFrameStatus?: ObcAlertFrameStatus;
+    alertFrameStatus?: AlertType;
 }
 export interface Events {
     onAccordionToggle?: (event: CustomEvent<{
@@ -62,7 +63,7 @@ declare const ObcAccordionCard: import("svelte").Component<$$ComponentProps, {
     AccordionSize: typeof AccordionSize;
     ObcAlertFrameType: typeof ObcAlertFrameType;
     ObcAlertFrameThickness: typeof ObcAlertFrameThickness;
-    ObcAlertFrameStatus: typeof ObcAlertFrameStatus;
+    AlertType: typeof AlertType;
 }, "">;
 type ObcAccordionCard = ReturnType<typeof ObcAccordionCard>;
 export default ObcAccordionCard;

package/dist/components/accordion-item/ObcAccordionItem.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     
       import '@oicl/openbridge-webcomponents/dist/components/accordion-item/accordion-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       
       import type { Snippet } from 'svelte';
 
@@ -33,7 +33,7 @@ showDivider?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onaccordion-item-toggle={onAccordionItemToggle} >
+    use:forwardEvents={{'accordion-item-toggle': onAccordionItemToggle}} >
       
       {#if expandedContent}
         <div slot="expanded-content">

package/dist/components/advice-button/ObcAdviceButton.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {AdviceButtonClickEvent, AdviceButtonStyle} from '@oicl/openbridge-webcomponents/dist/components/advice-button/advice-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/advice-button/advice-button.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {AdviceButtonClickEvent, AdviceButtonStyle} from '@oicl/openbridge-webcomponents/dist/components/advice-button/advice-button.js';
       import type { Snippet } from 'svelte';
 
@@ -41,7 +41,7 @@ ariaLabel?: string
     use:setProperties={props}
     class={className}
     style={style}
-    onobc-click={onObcClick} >
+    use:forwardEvents={{'obc-click': onObcClick}} >
       
       {#if icon}
         <div slot="icon">

package/dist/components/advice-floating-item/ObcAdviceFloatingItem.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcFloatingItemType, ObcFloatingItemDirection, ObcFloatingItemLineType} from '@oicl/openbridge-webcomponents/dist/components/floating-item/floating-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/advice-floating-item/advice-floating-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcFloatingItemType, ObcFloatingItemDirection, ObcFloatingItemLineType} from '@oicl/openbridge-webcomponents/dist/components/floating-item/floating-item.js';
       import type { Snippet } from 'svelte';
 
@@ -45,24 +45,21 @@ lineType?: ObcFloatingItemLineType
   }
       export interface Slots {
   primaryIcon?: Snippet;
-  secondaryIcon?: Snippet;
   title?: Snippet;
   description?: Snippet;
   time?: Snippet;
   day?: Snippet;
-  action?: Snippet;
-  action2?: Snippet
+  actionSnippet?: Snippet;
+  action2Snippet?: Snippet
 }
-      const {onActionClick, onAction2Click, onDismissClick, class: className, style, primaryIcon, secondaryIcon, title, description, time, day, action, action2, ...props} = $props<Props & Events & Slots>();
+      const {onActionClick, onAction2Click, onDismissClick, class: className, style, primaryIcon, title, description, time, day, actionSnippet, action2Snippet, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-advice-floating-item
     use:setProperties={props}
     class={className}
     style={style}
-    onaction-click={onActionClick}
-   onaction2-click={onAction2Click}
-   ondismiss-click={onDismissClick} >
+    use:forwardEvents={{'action-click': onActionClick, 'action2-click': onAction2Click, 'dismiss-click': onDismissClick}} >
       
       {#if primaryIcon}
         <div slot="primary-icon">
@@ -70,12 +67,6 @@ lineType?: ObcFloatingItemLineType
         </div>
       {/if}
 
-      {#if secondaryIcon}
-        <div slot="secondary-icon">
-          {@render secondaryIcon()}
-        </div>
-      {/if}
-
       {#if title}
         <div slot="title">
           {@render title()}
@@ -100,15 +91,15 @@ lineType?: ObcFloatingItemLineType
         </div>
       {/if}
 
-      {#if action}
+      {#if actionSnippet}
         <div slot="action">
-          {@render action()}
+          {@render actionSnippet()}
         </div>
       {/if}
 
-      {#if action2}
+      {#if action2Snippet}
         <div slot="action2">
-          {@render action2()}
+          {@render action2Snippet()}
         </div>
       {/if}
     </obc-advice-floating-item>

package/dist/components/advice-floating-item/ObcAdviceFloatingItem.svelte.d.ts

@@ -40,13 +40,12 @@ export interface Events {
 }
 export interface Slots {
     primaryIcon?: Snippet;
-    secondaryIcon?: Snippet;
     title?: Snippet;
     description?: Snippet;
     time?: Snippet;
     day?: Snippet;
-    action?: Snippet;
-    action2?: Snippet;
+    actionSnippet?: Snippet;
+    action2Snippet?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcAdviceFloatingItem: import("svelte").Component<$$ComponentProps, {

package/dist/components/advice-menu-item/ObcAdviceMenuItem.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcMessageMenuItemSize} from '@oicl/openbridge-webcomponents/dist/components/message-menu-item/message-menu-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/advice-menu-item/advice-menu-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcMessageMenuItemSize} from '@oicl/openbridge-webcomponents/dist/components/message-menu-item/message-menu-item.js';
       import type { Snippet } from 'svelte';
 
@@ -36,9 +36,7 @@ size?: ObcMessageMenuItemSize;
     use:setProperties={props}
     class={className}
     style={style}
-    onprimary-action-click={onPrimaryActionClick}
-   onsecondary-action-click={onSecondaryActionClick}
-   onitem-click={onItemClick} >
+    use:forwardEvents={{'primary-action-click': onPrimaryActionClick, 'secondary-action-click': onSecondaryActionClick, 'item-click': onItemClick}} >
       
       {#if icon}
         <div slot="icon">