@oicl/openbridge-webcomponents-svelte 2.0.0-next.14 → 2.0.0-next.140

package/dist/components/elevated-card/ObcElevatedCard.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {ObcElevatedCardPosition, ObcElevatedCardSize, ObcElevatedCardTag} from '@oicl/openbridge-webcomponents/dist/components/elevated-card/elevated-card.js';
       import '@oicl/openbridge-webcomponents/dist/components/elevated-card/elevated-card.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcElevatedCardPosition, ObcElevatedCardSize, ObcElevatedCardTag} from '@oicl/openbridge-webcomponents/dist/components/elevated-card/elevated-card.js';
       import type { Snippet } from 'svelte';
 
@@ -28,42 +28,38 @@ size?: ObcElevatedCardSize;
 - `div`: Renders as a <div> (generic container).
 If not set, the tag is determined automatically based on `href` and `isClickable`. */
 overrideTag?: ObcElevatedCardTag | undefined;
-      /** If true, the card is rendered as a static (non-clickable) element.
-When set, the card uses `<article>` as its tag unless overridden.
-Useful for informational or status cards that should not be interactive. */
-isClickable?: boolean;
-      /** Applies an informational style to the card.
-When true, the card uses the "info" visual style. */
-info?: boolean;
-      /** If true, adds a border below the graphic area (when present).
-Used to visually separate the graphic from the card content. */
-graphicBorder?: boolean;
-      /** If true, adds a border to the card (top or bottom, depending on position).
-Useful for visually separating cards in a stack. */
-border?: boolean;
-      /** If true, displays an action button in the card.
-The button's content is provided via the `action` slot.
-When set, the card is rendered as static (`isClickable` is forced false). */
-hasAction?: boolean;
-      /** If true, displays a leading icon before the label.
-The icon is provided via the `leading-icon` slot. */
-hasLeadingIcon?: boolean;
-      /** If true, displays a trailing icon after the content.
-The icon is provided via the `trailing-icon` slot. */
-hasTrailingIcon?: boolean;
-      /** If true, displays a prominent graphic at the top of the card.
-The graphic is provided via the `graphic` slot. */
-hasGraphic?: boolean;
-      /** If true, displays a status indicator in the card.
-The status content is provided via the `status` slot. */
-hasStatus?: boolean;
+     /** If false, the card is rendered as a static (non-clickable) element and uses `<article>` as its tag unless `overrideTag` is set. Useful for informational or status cards that should not be interactive. */
+     isClickable?: boolean;
+     /** Applies an informational style to the card. When true, the card uses the "info" visual style. */
+     info?: boolean;
+     /**
+      * If true, adds a border below the graphic area (when present). Used to visually separate the graphic from the card content.
+      *
+      * Available when `hasGraphic==true`.
+      */
+     graphicBorder?: boolean;
+     /**
+      * If true, adds a border to the card (top or bottom, depending on position). Useful for visually separating cards in a stack.
+      *
+      * Available when `position!=regular`.
+      */
+     border?: boolean;
+     /** If true, displays an action button in the card. The button's content is provided via the `action` slot. When set, the card is rendered as static (`isClickable` is forced false). */
+     hasAction?: boolean;
+     /** If true, displays a leading icon before the label. The icon is provided via the `leading-icon` slot. */
+     hasLeadingIcon?: boolean;
+     /** If true, displays a trailing icon after the content. The icon is provided via the `trailing-icon` slot. */
+     hasTrailingIcon?: boolean;
+     /** If true, displays a prominent graphic at the top of the card. The graphic is provided via the `graphic` slot. */
+     hasGraphic?: boolean;
+     /** If true, displays a status indicator in the card. The status content is provided via the `status` slot. */
+     hasStatus?: boolean;
      compact?: boolean;
      directAction?: boolean;
-      /** If set, the card is rendered as a link (`<a>`) with this URL as the `href`.
-When present, the card is clickable and navigates to the specified URL. */
-href?: string | undefined;
-      /** Specifies the target for the link when `href` is set (e.g., `_blank`). */
-target?: string | undefined
+     /** URL the card links to. It applies whenever the rendered tag is `<a>` — the default for a clickable card with an `href`, or `overrideTag="a"`; `isClickable=false`, `hasAction` or another `overrideTag` render a tag on which the URL has no effect. */
+     href?: string | undefined;
+     /** Specifies the target for the link when `href` is set (e.g., `_blank`). */
+     target?: string | undefined
    }
       export interface Events {
     onActionClick?: (event: CustomEvent<unknown>) => void
@@ -84,7 +80,7 @@ target?: string | undefined
     use:setProperties={props}
     class={className}
     style={style}
-    onaction-click={onActionClick} >
+    use:forwardEvents={{'action-click': onActionClick}} >
       
       {#if graphic}
         <div slot="graphic">

package/dist/components/elevated-card/ObcElevatedCard.svelte.d.ts

@@ -23,39 +23,35 @@ Default is `single-line`. */
 - `div`: Renders as a <div> (generic container).
 If not set, the tag is determined automatically based on `href` and `isClickable`. */
     overrideTag?: ObcElevatedCardTag | undefined;
-    /** If true, the card is rendered as a static (non-clickable) element.
-When set, the card uses `<article>` as its tag unless overridden.
-Useful for informational or status cards that should not be interactive. */
+    /** If false, the card is rendered as a static (non-clickable) element and uses `<article>` as its tag unless `overrideTag` is set. Useful for informational or status cards that should not be interactive. */
     isClickable?: boolean;
-    /** Applies an informational style to the card.
-When true, the card uses the "info" visual style. */
+    /** Applies an informational style to the card. When true, the card uses the "info" visual style. */
     info?: boolean;
-    /** If true, adds a border below the graphic area (when present).
-Used to visually separate the graphic from the card content. */
+    /**
+     * If true, adds a border below the graphic area (when present). Used to visually separate the graphic from the card content.
+     *
+     * Available when `hasGraphic==true`.
+     */
     graphicBorder?: boolean;
-    /** If true, adds a border to the card (top or bottom, depending on position).
-Useful for visually separating cards in a stack. */
+    /**
+     * If true, adds a border to the card (top or bottom, depending on position). Useful for visually separating cards in a stack.
+     *
+     * Available when `position!=regular`.
+     */
     border?: boolean;
-    /** If true, displays an action button in the card.
-The button's content is provided via the `action` slot.
-When set, the card is rendered as static (`isClickable` is forced false). */
+    /** If true, displays an action button in the card. The button's content is provided via the `action` slot. When set, the card is rendered as static (`isClickable` is forced false). */
     hasAction?: boolean;
-    /** If true, displays a leading icon before the label.
-The icon is provided via the `leading-icon` slot. */
+    /** If true, displays a leading icon before the label. The icon is provided via the `leading-icon` slot. */
     hasLeadingIcon?: boolean;
-    /** If true, displays a trailing icon after the content.
-The icon is provided via the `trailing-icon` slot. */
+    /** If true, displays a trailing icon after the content. The icon is provided via the `trailing-icon` slot. */
     hasTrailingIcon?: boolean;
-    /** If true, displays a prominent graphic at the top of the card.
-The graphic is provided via the `graphic` slot. */
+    /** If true, displays a prominent graphic at the top of the card. The graphic is provided via the `graphic` slot. */
     hasGraphic?: boolean;
-    /** If true, displays a status indicator in the card.
-The status content is provided via the `status` slot. */
+    /** If true, displays a status indicator in the card. The status content is provided via the `status` slot. */
     hasStatus?: boolean;
     compact?: boolean;
     directAction?: boolean;
-    /** If set, the card is rendered as a link (`<a>`) with this URL as the `href`.
-When present, the card is clickable and navigates to the specified URL. */
+    /** URL the card links to. It applies whenever the rendered tag is `<a>` — the default for a clickable card with an `href`, or `overrideTag="a"`; `isClickable=false`, `hasAction` or another `overrideTag` render a tag on which the URL has no effect. */
     href?: string | undefined;
     /** Specifies the target for the link when `href` is set (e.g., `_blank`). */
     target?: string | undefined;

package/dist/components/elevated-card-radio/ObcElevatedCardRadio.svelte

@@ -2,63 +2,50 @@
   <script lang="ts">
     export type {ObcElevatedCardPosition, ObcElevatedCardSize} from '@oicl/openbridge-webcomponents/dist/components/elevated-card/elevated-card.js';
       import '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio/elevated-card-radio.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcElevatedCardPosition, ObcElevatedCardSize} from '@oicl/openbridge-webcomponents/dist/components/elevated-card/elevated-card.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Controls the card's layout position. Accepts values from `ObcElevatedCardPosition` enum.
-Default is `Regular`. */
-position?: ObcElevatedCardPosition;
-      /** Sets the card's size. Accepts values from `ObcElevatedCardSize` enum.
-Default is `SingleLine`. */
-size?: ObcElevatedCardSize;
-      /** If true, displays a graphic border around the card for emphasis.
-Default is false. */
-graphicBorder?: boolean;
-      /** If true, displays a standard border around the card.
-Default is false. */
-border?: boolean;
-      /** The radio group name. Radios with the same name are grouped and only one can be selected at a time. */
-name?: string;
-      /** The value submitted with the form when this radio is selected. */
-value?: string;
-      /** The label text displayed next to the radio button. */
-label?: string;
-      /** Whether this radio is currently selected. */
-checked?: boolean;
-      /** Disables the radio button and prevents user interaction. */
-disabled?: boolean;
-      /** Marks the radio as required for form validation. */
-required?: boolean
+     /** Controls the card's layout position. Accepts values from `ObcElevatedCardPosition` enum. Default is `Regular`. */
+     position?: ObcElevatedCardPosition;
+     /** Sets the card's size. Accepts values from `ObcElevatedCardSize` enum. Default is `SingleLine`. */
+     size?: ObcElevatedCardSize;
+     /** If true, displays a graphic border around the card for emphasis. Default is false. */
+     graphicBorder?: boolean;
+     /** If true, displays a standard border around the card. Default is false. */
+     border?: boolean;
+     /** The radio group name. Radios with the same name are grouped and only one can be selected at a time. */
+     name?: string;
+     /** The value submitted with the form when this radio is selected. */
+     value?: string;
+     /** The label text displayed next to the radio button. */
+     label?: string;
+     /** Whether this radio is currently selected. */
+     checked?: boolean;
+     /** Disables the radio button and prevents user interaction. */
+     disabled?: boolean;
+     /** Marks the radio as required for form validation. */
+     required?: boolean
    }
       export interface Events {
     onChange?: (event: CustomEvent<unknown>) => void
   }
       export interface Slots {
-  leadingIcon?: Snippet;
-  label?: Snippet
+  children?: Snippet
 }
-      const {onChange, class: className, style, leadingIcon, label, ...props} = $props<Props & Events & Slots>();
+      const {onChange, class: className, style, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-elevated-card-radio
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
-      {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
-      {/if}
-
-      {#if label}
-        <div slot="label">
-          {@render label()}
-        </div>
-      {/if}
+    {#if children}
+      {@render children()}
+    {/if}
     </obc-elevated-card-radio>

package/dist/components/elevated-card-radio/ObcElevatedCardRadio.svelte.d.ts

@@ -4,17 +4,13 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** Controls the card's layout position. Accepts values from `ObcElevatedCardPosition` enum.
-Default is `Regular`. */
+    /** Controls the card's layout position. Accepts values from `ObcElevatedCardPosition` enum. Default is `Regular`. */
     position?: ObcElevatedCardPosition;
-    /** Sets the card's size. Accepts values from `ObcElevatedCardSize` enum.
-Default is `SingleLine`. */
+    /** Sets the card's size. Accepts values from `ObcElevatedCardSize` enum. Default is `SingleLine`. */
     size?: ObcElevatedCardSize;
-    /** If true, displays a graphic border around the card for emphasis.
-Default is false. */
+    /** If true, displays a graphic border around the card for emphasis. Default is false. */
     graphicBorder?: boolean;
-    /** If true, displays a standard border around the card.
-Default is false. */
+    /** If true, displays a standard border around the card. Default is false. */
     border?: boolean;
     /** The radio group name. Radios with the same name are grouped and only one can be selected at a time. */
     name?: string;
@@ -33,8 +29,7 @@ export interface Events {
     onChange?: (event: CustomEvent<unknown>) => void;
 }
 export interface Slots {
-    leadingIcon?: Snippet;
-    label?: Snippet;
+    children?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcElevatedCardRadio: import("svelte").Component<$$ComponentProps, {

package/dist/components/elevated-card-radio-group/ObcElevatedCardRadioGroup.svelte

@@ -1,9 +1,9 @@
 
   <script lang="ts">
-    export type {ObcElevatedCardRadioGroupChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
+    export type {ObcElevatedCardRadioGroupChangeEvent, ElevatedCardRadioGroupOption} from '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
       import '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
-      import { setProperties } from "../../util.js";
-      import type {ObcElevatedCardRadioGroupChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
+      import { setProperties, forwardEvents } from "../../util.js";
+      import type {ObcElevatedCardRadioGroupChangeEvent, ElevatedCardRadioGroupOption} from '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -12,19 +12,19 @@
       /** Array of options to display as card radios. Each option should be an object with a `label` (displayed text) and a `value` (submitted value).
 
 Example: `[{label: 'Option 1', value: '1'}, {label: 'Option 2', value: '2'}]` */
-options?: { label: string; value: string; }[];
+options?: ElevatedCardRadioGroupOption[];
       /** Shared name for all radio inputs in the group. Ensures native radio group behavior and correct form submission.
 
 Default: `'default'` */
 name?: string;
-      /** The currently selected value. Setting this will pre-select the corresponding card radio. */
-value?: string;
-      /** Disables all options in the group when true. */
-disabled?: boolean;
-      /** Marks the group as required for form validation. */
-required?: boolean;
-      /** If true, applies "top" styling to the first card (e.g., for rounded corners). The last card always receives "bottom" styling. */
-top?: boolean
+     /** The currently selected value. Setting this will pre-select the corresponding card radio. */
+     value?: string;
+     /** Disables all options in the group when true. */
+     disabled?: boolean;
+     /** Marks the group as required for form validation. */
+     required?: boolean;
+     /** If true, applies "top" styling to the first card (e.g., for rounded corners). The last card always receives "bottom" styling. */
+     top?: boolean
    }
       export interface Events {
     onChange?: (event: ObcElevatedCardRadioGroupChangeEvent) => void
@@ -39,7 +39,7 @@ top?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onchange={onChange} >
+    use:forwardEvents={{'change': onChange}} >
       
       {#if children}
         {@render children()}

package/dist/components/elevated-card-radio-group/ObcElevatedCardRadioGroup.svelte.d.ts

@@ -1,5 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
-import type { ObcElevatedCardRadioGroupChangeEvent } from '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
+import type { ObcElevatedCardRadioGroupChangeEvent, ElevatedCardRadioGroupOption } from '@oicl/openbridge-webcomponents/dist/components/elevated-card-radio-group/elevated-card-radio-group.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -7,10 +7,7 @@ export interface Props {
     /** Array of options to display as card radios. Each option should be an object with a `label` (displayed text) and a `value` (submitted value).
 
 Example: `[{label: 'Option 1', value: '1'}, {label: 'Option 2', value: '2'}]` */
-    options?: {
-        label: string;
-        value: string;
-    }[];
+    options?: ElevatedCardRadioGroupOption[];
     /** Shared name for all radio inputs in the group. Ensures native radio group behavior and correct form submission.
 
 Default: `'default'` */
@@ -33,6 +30,7 @@ export interface Slots {
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcElevatedCardRadioGroup: import("svelte").Component<$$ComponentProps, {
     ObcElevatedCardRadioGroupChangeEvent: typeof ObcElevatedCardRadioGroupChangeEvent;
+    ElevatedCardRadioGroupOption: typeof ElevatedCardRadioGroupOption;
 }, "">;
 type ObcElevatedCardRadioGroup = ReturnType<typeof ObcElevatedCardRadioGroup>;
 export default ObcElevatedCardRadioGroup;

package/dist/components/event-item/ObcEventItem.svelte

@@ -2,7 +2,7 @@
   <script lang="ts">
     export type {EventItemType} from '@oicl/openbridge-webcomponents/dist/components/event-item/event-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/event-item/event-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {EventItemType} from '@oicl/openbridge-webcomponents/dist/components/event-item/event-item.js';
       import type { Snippet } from 'svelte';
 
@@ -10,13 +10,16 @@
      class?: string;
      style?: string;
      title?: string;
+     /** Available when `eventItemType==DoubleLine`. */
      description?: string;
      startTime?: string;
      endTime?: string;
      eventItemType?: EventItemType;
      hasArrow?: boolean;
      hasTime?: boolean;
+     /** Available when `hasTime==true`. */
      hasEndTime?: boolean;
+     /** Available when `eventItemType==Aggregated`. */
      aggregatedCount?: number;
      colorCoded?: boolean;
      disabled?: boolean
@@ -34,7 +37,7 @@
     use:setProperties={props}
     class={className}
     style={style}
-    onevent-click={onEventClick} >
+    use:forwardEvents={{'event-click': onEventClick}} >
       
       {#if children}
         {@render children()}

package/dist/components/event-item/ObcEventItem.svelte.d.ts

@@ -5,13 +5,16 @@ export interface Props {
     class?: string;
     style?: string;
     title?: string;
+    /** Available when `eventItemType==DoubleLine`. */
     description?: string;
     startTime?: string;
     endTime?: string;
     eventItemType?: EventItemType;
     hasArrow?: boolean;
     hasTime?: boolean;
+    /** Available when `hasTime==true`. */
     hasEndTime?: boolean;
+    /** Available when `eventItemType==Aggregated`. */
     aggregatedCount?: number;
     colorCoded?: boolean;
     disabled?: boolean;

package/dist/components/event-list/ObcEventList.svelte

@@ -9,14 +9,12 @@
       export interface Props {
      class?: string;
      style?: string;
-      /** Whether to hide the date header. */
-showHeader?: boolean;
-      /** The date to display in the header. The component will extract
-day name, month name, date number, and year from this Date object.
-Also accepts a timestamp (number) for compatibility with Storybook. */
-date?: number | Date;
-      /** Array of events to display in the list. */
-events?: DateItemEvent[];
+     /** Whether to show the date header. */
+     showHeader?: boolean;
+     /** The date to display in the header. The component will extract day name, month name, date number, and year from this Date object. Also accepts a timestamp (number) for compatibility with Storybook. */
+     date?: number | Date;
+     /** Array of events to display in the list. */
+     events?: DateItemEvent[];
       /** Locale for date formatting. Uses browser default if not specified. */
 locale?: string | undefined
    }

package/dist/components/event-list/ObcEventList.svelte.d.ts

@@ -4,11 +4,9 @@ import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
-    /** Whether to hide the date header. */
+    /** Whether to show the date header. */
     showHeader?: boolean;
-    /** The date to display in the header. The component will extract
-day name, month name, date number, and year from this Date object.
-Also accepts a timestamp (number) for compatibility with Storybook. */
+    /** The date to display in the header. The component will extract day name, month name, date number, and year from this Date object. Also accepts a timestamp (number) for compatibility with Storybook. */
     date?: number | Date;
     /** Array of events to display in the list. */
     events?: DateItemEvent[];

package/dist/components/filter-chip/ObcFilterChip.svelte

@@ -2,21 +2,21 @@
   <script lang="ts">
     export type {ObcFilterChipChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/filter-chip/filter-chip.js';
       import '@oicl/openbridge-webcomponents/dist/components/filter-chip/filter-chip.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
       import type {ObcFilterChipChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/filter-chip/filter-chip.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Whether the chip is disabled (non-interactive). When true, the chip cannot be toggled and appears muted. */
-disabled?: boolean;
-      /** The text label displayed on the chip. Should clearly describe the filter criterion. */
-label?: string;
-      /** Whether the chip is currently checked (selected/active). Toggles when the chip is clicked. */
-checked?: boolean;
-      /** Whether to show a leading icon. If true, displays the icon placed in the default slot. */
-showIcon?: boolean
+     /** Whether the chip is disabled (non-interactive). When true, the chip cannot be toggled and appears muted. */
+     disabled?: boolean;
+     /** The text label displayed on the chip. Should clearly describe the filter criterion. */
+     label?: string;
+     /** Whether the chip is currently checked (selected/active). Toggles when the chip is clicked. */
+     checked?: boolean;
+     /** Whether to show a leading icon. If true, displays the icon placed in the default slot. */
+     showIcon?: boolean
    }
       export interface Events {
     onChipToggle?: (event: ObcFilterChipChangeEvent) => void
@@ -31,7 +31,7 @@ showIcon?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onchip-toggle={onChipToggle} >
+    use:forwardEvents={{'chip-toggle': onChipToggle}} >
       
       {#if children}
         {@render children()}

package/dist/components/floating-item/ObcFloatingItem.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/floating-item/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';
 
@@ -21,20 +21,22 @@ type?: ObcFloatingItemType;
 
 Choose `vertical` for narrow containers or when space is limited. */
 direction?: ObcFloatingItemDirection;
-      /** Shows a timestamp (slot `time`) when `true`.
-Enable to display a time label next to the title. */
-hasTimestamp?: boolean;
-      /** Shows a day chip (slot `day`) next to the timestamp when `true`.
-Only applied when `hasTimestamp` is also `true`.
-Use to provide additional context for the timestamp. */
-hasDay?: boolean;
-      /** Renders a primary action button (slot `action`) when `true`.
-Use for the main action the user can take in response to the message. */
-action?: boolean;
-      /** Enables a secondary action button (slot `action2`).
-Only applied when `action` is also `true`.
-Use sparingly for secondary actions (e.g., "Undo"). */
-action2?: boolean;
+     /** Shows a timestamp (slot `time`) when `true`. Enable to display a time label next to the title. */
+     hasTimestamp?: boolean;
+     /**
+      * Shows a day chip (slot `day`) next to the timestamp when `true`. Only applied when `hasTimestamp` is also `true`. Use to provide additional context for the timestamp.
+      *
+      * Available when `hasTimestamp==true`.
+      */
+     hasDay?: boolean;
+     /** Renders a primary action button (slot `action`) when `true`. Use for the main action the user can take in response to the message. */
+     action?: boolean;
+     /**
+      * Enables a secondary action button (slot `action2`). Only applied when `action` is also `true`. Use sparingly for secondary actions (e.g., "Undo").
+      *
+      * Available when `action==true`.
+      */
+     action2?: boolean;
       /** Line wrapping style for the message content.
 - `single-line` (default): Truncates to one line.
 - `multi-line`: Allows up to 8 lines of content.
@@ -54,19 +56,17 @@ lineType?: ObcFloatingItemLineType
   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, secondaryIcon, title, description, time, day, actionSnippet, action2Snippet, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-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">
@@ -104,15 +104,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-floating-item>

package/dist/components/floating-item/ObcFloatingItem.svelte.d.ts

@@ -16,19 +16,21 @@ Use `application` when you want to visually distinguish system-level or applicat
 
 Choose `vertical` for narrow containers or when space is limited. */
     direction?: ObcFloatingItemDirection;
-    /** Shows a timestamp (slot `time`) when `true`.
-Enable to display a time label next to the title. */
+    /** Shows a timestamp (slot `time`) when `true`. Enable to display a time label next to the title. */
     hasTimestamp?: boolean;
-    /** Shows a day chip (slot `day`) next to the timestamp when `true`.
-Only applied when `hasTimestamp` is also `true`.
-Use to provide additional context for the timestamp. */
+    /**
+     * Shows a day chip (slot `day`) next to the timestamp when `true`. Only applied when `hasTimestamp` is also `true`. Use to provide additional context for the timestamp.
+     *
+     * Available when `hasTimestamp==true`.
+     */
     hasDay?: boolean;
-    /** Renders a primary action button (slot `action`) when `true`.
-Use for the main action the user can take in response to the message. */
+    /** Renders a primary action button (slot `action`) when `true`. Use for the main action the user can take in response to the message. */
     action?: boolean;
-    /** Enables a secondary action button (slot `action2`).
-Only applied when `action` is also `true`.
-Use sparingly for secondary actions (e.g., "Undo"). */
+    /**
+     * Enables a secondary action button (slot `action2`). Only applied when `action` is also `true`. Use sparingly for secondary actions (e.g., "Undo").
+     *
+     * Available when `action==true`.
+     */
     action2?: boolean;
     /** Line wrapping style for the message content.
 - `single-line` (default): Truncates to one line.
@@ -49,8 +51,8 @@ export interface Slots {
     description?: Snippet;
     time?: Snippet;
     day?: Snippet;
-    action?: Snippet;
-    action2?: Snippet;
+    actionSnippet?: Snippet;
+    action2Snippet?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcFloatingItem: import("svelte").Component<$$ComponentProps, {