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

package/dist/components/toggle-button-vertical-group/ObcToggleButtonVerticalGroup.svelte.d.ts

@@ -16,6 +16,14 @@ One of: "flat", "regular", "normal". */
 
 Defaults to false. */
     hugWidth?: boolean;
+    /** If true, a `value` that does not match any enabled option leaves the group with no option selected
+instead of defaulting to the first enabled option.
+
+This also applies when the currently selected option becomes disabled: the group clears its selection
+rather than falling back to another option.
+
+Defaults to false (the first enabled option is selected when the value does not match). */
+    allowEmptySelection?: boolean;
     /** Disables the entire group and all contained options.
 
 When set to true, all options become non-interactive, regardless of their individual disabled state.
@@ -28,6 +36,9 @@ export interface Events {
         value: string;
         previousValue: string;
     }>) => void;
+    onChange?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
 }
 export interface Slots {
     children?: Snippet;

package/dist/components/toggle-button-vertical-option/ObcToggleButtonVerticalOption.svelte

@@ -2,31 +2,28 @@
   <script lang="ts">
     export type {ObcToggleButtonVerticalOptionType, ObcToggleButtonLabelPlacement} from '@oicl/openbridge-webcomponents/dist/components/toggle-button-vertical-option/toggle-button-vertical-option.js';
       import '@oicl/openbridge-webcomponents/dist/components/toggle-button-vertical-option/toggle-button-vertical-option.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcToggleButtonVerticalOptionType, ObcToggleButtonLabelPlacement} from '@oicl/openbridge-webcomponents/dist/components/toggle-button-vertical-option/toggle-button-vertical-option.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Value associated with this option. Used in selection events. */
-value?: string;
-      /** Whether this option is currently selected (toggles visual state). */
-selected?: boolean;
-      /** The visual variant of the toggle button option.
-One of: "flat", "regular", "normal". */
-type?: ObcToggleButtonVerticalOptionType;
-      /** If true, renders the divider after this option.
-Managed by the parent group. */
-showDivider?: boolean;
-      /** If true, the option expects icon content in the icon slot.
-Controls layout and spacing for icon display. */
-hasIcon?: boolean;
-      /** Text label for the option.
-Displayed next to or below the icon based on labelPlacement. */
-label?: string;
-      /** If true, the option is disabled and cannot be interacted with. */
-disabled?: boolean;
+     /** Value associated with this option. Used in selection events. */
+     value?: string;
+     /** Whether this option is currently selected (toggles visual state). */
+     selected?: boolean;
+     /** The visual variant of the toggle button option. One of: "flat", "regular", "normal". */
+     type?: ObcToggleButtonVerticalOptionType;
+     /** If true, renders the divider after this option. Managed by the parent group. */
+     showDivider?: boolean;
+     /** If true, the option expects icon content in the icon slot. Controls layout and spacing for icon display. */
+     hasIcon?: boolean;
+     /** Text label for the option. Displayed next to or below the icon based on labelPlacement. */
+     label?: string;
+     /** If true, the option is disabled and cannot be interacted with. */
+     disabled?: boolean;
       /** Controls the layout of icon and label.
 - `inline`: Icon and label displayed side-by-side.
 - `under`: Label displayed below the icon. */
@@ -45,11 +42,9 @@ labelPlacement?: ObcToggleButtonLabelPlacement
     use:setProperties={props}
     class={className}
     style={style}
-    onselected={onSelected} >
+    use:forwardEvents={{'selected': onSelected}} >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-toggle-button-vertical-option>

package/dist/components/toggle-button-vertical-option/ObcToggleButtonVerticalOption.svelte.d.ts

@@ -8,17 +8,13 @@ export interface Props {
     value?: string;
     /** Whether this option is currently selected (toggles visual state). */
     selected?: boolean;
-    /** The visual variant of the toggle button option.
-One of: "flat", "regular", "normal". */
+    /** The visual variant of the toggle button option. One of: "flat", "regular", "normal". */
     type?: ObcToggleButtonVerticalOptionType;
-    /** If true, renders the divider after this option.
-Managed by the parent group. */
+    /** If true, renders the divider after this option. Managed by the parent group. */
     showDivider?: boolean;
-    /** If true, the option expects icon content in the icon slot.
-Controls layout and spacing for icon display. */
+    /** If true, the option expects icon content in the icon slot. Controls layout and spacing for icon display. */
     hasIcon?: boolean;
-    /** Text label for the option.
-Displayed next to or below the icon based on labelPlacement. */
+    /** Text label for the option. Displayed next to or below the icon based on labelPlacement. */
     label?: string;
     /** If true, the option is disabled and cannot be interacted with. */
     disabled?: boolean;

package/dist/components/toggle-switch/ObcToggleSwitch.svelte

@@ -1,54 +1,53 @@
 
   <script lang="ts">
-    
+    export type {ObcToggleSwitchInputEvent, ObcToggleSwitchChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/toggle-switch/toggle-switch.js';
       import '@oicl/openbridge-webcomponents/dist/components/toggle-switch/toggle-switch.js';
-      import { setProperties } from "../../util.js";
-      
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
+      import type {ObcToggleSwitchInputEvent, ObcToggleSwitchChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/toggle-switch/toggle-switch.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Main label for the toggle switch. Should clearly describe the setting being toggled. */
-label?: string;
-      /** Whether the toggle is in the "on" (checked) state.
-Set to true to display as active/on. */
-checked?: boolean;
-      /** Disables the toggle, preventing user interaction and applying a disabled style. */
-disabled?: boolean;
-      /** If true, displays the description text below the label. */
-hasDescription?: boolean;
-      /** Supplementary description text shown when `hasDescription` is true.
-Use to clarify the effect or details of the toggle. */
-description?: string;
-      /** If true, renders a divider below the toggle switch.
-Useful for visually separating items in a list. */
-hasBottomDivider?: boolean;
-      /** If true, displays a leading icon before the label.
-Provide icon content via the `icon` slot. */
-hasIcon?: boolean;
-      /** If true, the toggle is controlled externally.
-Use to control the toggle state from outside the component. */
-externalControl?: boolean
+     /** Main label for the toggle switch. Should clearly describe the setting being toggled. */
+     label?: string;
+     /** Whether the toggle is in the "on" (checked) state. Set to true to display as active/on. */
+     checked?: boolean;
+     /** Disables the toggle, preventing user interaction and applying a disabled style. */
+     disabled?: boolean;
+     /** If true, displays the description text below the label. */
+     hasDescription?: boolean;
+     /**
+      * Supplementary description text shown when `hasDescription` is true. Use to clarify the effect or details of the toggle.
+      *
+      * Available when `hasDescription==true`.
+      */
+     description?: string;
+     /** If true, renders a divider below the toggle switch. Useful for visually separating items in a list. */
+     hasBottomDivider?: boolean;
+     /** If true, displays a leading icon before the label. Provide icon content via the `icon` slot. */
+     hasIcon?: boolean;
+     /** If true, the toggle is controlled externally. Use to control the toggle state from outside the component. */
+     externalControl?: boolean
    }
       export interface Events {
-    onInput?: (event: CustomEvent<unknown>) => void
+    onInput?: (event: ObcToggleSwitchInputEvent) => void;
+    onChange?: (event: ObcToggleSwitchChangeEvent) => void
   }
       export interface Slots {
   icon?: Snippet
 }
-      const {onInput, class: className, style, icon, ...props} = $props<Props & Events & Slots>();
+      const {onInput, onChange, class: className, style, icon, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-toggle-switch
     use:setProperties={props}
     class={className}
     style={style}
-    oninput={onInput} >
+    use:forwardEvents={{'input': onInput, 'change': onChange}} >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-toggle-switch>

package/dist/components/toggle-switch/ObcToggleSwitch.svelte.d.ts

@@ -1,37 +1,41 @@
 import '@oicl/openbridge-webcomponents/dist/components/toggle-switch/toggle-switch.js';
+import type { ObcToggleSwitchInputEvent, ObcToggleSwitchChangeEvent } from '@oicl/openbridge-webcomponents/dist/components/toggle-switch/toggle-switch.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
     /** Main label for the toggle switch. Should clearly describe the setting being toggled. */
     label?: string;
-    /** Whether the toggle is in the "on" (checked) state.
-Set to true to display as active/on. */
+    /** Whether the toggle is in the "on" (checked) state. Set to true to display as active/on. */
     checked?: boolean;
     /** Disables the toggle, preventing user interaction and applying a disabled style. */
     disabled?: boolean;
     /** If true, displays the description text below the label. */
     hasDescription?: boolean;
-    /** Supplementary description text shown when `hasDescription` is true.
-Use to clarify the effect or details of the toggle. */
+    /**
+     * Supplementary description text shown when `hasDescription` is true. Use to clarify the effect or details of the toggle.
+     *
+     * Available when `hasDescription==true`.
+     */
     description?: string;
-    /** If true, renders a divider below the toggle switch.
-Useful for visually separating items in a list. */
+    /** If true, renders a divider below the toggle switch. Useful for visually separating items in a list. */
     hasBottomDivider?: boolean;
-    /** If true, displays a leading icon before the label.
-Provide icon content via the `icon` slot. */
+    /** If true, displays a leading icon before the label. Provide icon content via the `icon` slot. */
     hasIcon?: boolean;
-    /** If true, the toggle is controlled externally.
-Use to control the toggle state from outside the component. */
+    /** If true, the toggle is controlled externally. Use to control the toggle state from outside the component. */
     externalControl?: boolean;
 }
 export interface Events {
-    onInput?: (event: CustomEvent<unknown>) => void;
+    onInput?: (event: ObcToggleSwitchInputEvent) => void;
+    onChange?: (event: ObcToggleSwitchChangeEvent) => void;
 }
 export interface Slots {
     icon?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;
-declare const ObcToggleSwitch: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ObcToggleSwitch: import("svelte").Component<$$ComponentProps, {
+    ObcToggleSwitchInputEvent: typeof ObcToggleSwitchInputEvent;
+    ObcToggleSwitchChangeEvent: typeof ObcToggleSwitchChangeEvent;
+}, "">;
 type ObcToggleSwitch = ReturnType<typeof ObcToggleSwitch>;
 export default ObcToggleSwitch;

package/dist/components/toggletip/ObcToggletip.svelte

@@ -2,7 +2,8 @@
   <script lang="ts">
     export type {ToggletipVariant} from '@oicl/openbridge-webcomponents/dist/components/toggletip/toggletip.js';
       import '@oicl/openbridge-webcomponents/dist/components/toggletip/toggletip.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ToggletipVariant} from '@oicl/openbridge-webcomponents/dist/components/toggletip/toggletip.js';
       import type { Snippet } from 'svelte';
 
@@ -19,32 +20,40 @@
 - `warning`: Highlights warnings or potential problems.
 - `alarm`: Signals critical or urgent conditions. */
 variant?: ToggletipVariant;
-      /** Title text displayed in the header. */
-title?: string;
-      /** Description text shown in the content area. */
-description?: string | undefined;
-      /** If true, shows the content slot area.
-Use the `content` slot to provide custom content. */
-hasContent?: boolean;
-      /** If true, shows the action buttons container.
-Both primary and secondary buttons are shown if labels are provided.
-TODO(designer): Should both buttons always be shown, or is one preferred as primary? */
-hasActions?: boolean;
-      /** If true, shows the leading icon in the header.
-The icon adapts to the current `variant` by default, or can be overridden via the `leading-icon` slot. */
-hasLeadingIcon?: boolean;
-      /** If true, shows the trailing icon in the header.
-Use the `trailing-icon` slot to provide a custom icon. */
-hasTrailingIcon?: boolean;
-      /** Sets a custom width for the toggletip in pixels.
-If not set, defaults to 400px. */
-customWidth?: number | undefined;
-      /** Label for the primary action button.
-Only shown if `hasActions` is true. */
-primaryButtonLabel?: string;
-      /** Label for the secondary action button.
-Only shown if `hasActions` is true. */
-secondaryButtonLabel?: string
+     /** Title text displayed in the header. */
+     title?: string;
+     /** Description text shown in the content area. */
+     description?: string | undefined;
+     /** If true, shows the content slot area. Use the `content` slot to provide custom content. */
+     hasContent?: boolean;
+     /** If true, shows the action buttons container. Both primary and secondary buttons are shown if labels are provided. TODO(designer): Should both buttons always be shown, or is one preferred as primary? */
+     hasActions?: boolean;
+     /**
+      * If true, shows the leading icon in the header. The icon adapts to the current `variant` by default, or can be overridden via the `leading-icon` slot.
+      *
+      * Available when `title!=''`.
+      */
+     hasLeadingIcon?: boolean;
+     /**
+      * If true, shows the trailing icon in the header. Use the `trailing-icon` slot to provide a custom icon.
+      *
+      * Available when `title!=''`.
+      */
+     hasTrailingIcon?: boolean;
+     /** Sets a custom width for the toggletip in pixels. If not set, defaults to 400px. */
+     customWidth?: number | undefined;
+     /**
+      * Label for the primary action button. Only shown if `hasActions` is true.
+      *
+      * Available when `hasActions==true`.
+      */
+     primaryButtonLabel?: string;
+     /**
+      * Label for the secondary action button. Only shown if `hasActions` is true.
+      *
+      * Available when `hasActions==true`.
+      */
+     secondaryButtonLabel?: string
    }
       export interface Events {
     onPrimaryAction?: (event: CustomEvent) => void;
@@ -62,24 +71,17 @@ secondaryButtonLabel?: string
     use:setProperties={props}
     class={className}
     style={style}
-    onprimary-action={onPrimaryAction}
-   onsecondary-action={onSecondaryAction} >
+    use:forwardEvents={{'primary-action': onPrimaryAction, 'secondary-action': onSecondaryAction}} >
       
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
 
       {#if trailingIcon}
-        <div slot="trailing-icon">
-          {@render trailingIcon()}
-        </div>
+        <NamedSlot name="trailing-icon" content={trailingIcon} />
       {/if}
 
       {#if content}
-        <div slot="content">
-          {@render content()}
-        </div>
+        <NamedSlot name="content" content={content} />
       {/if}
     </obc-toggletip>

package/dist/components/toggletip/ObcToggletip.svelte.d.ts

@@ -18,27 +18,35 @@ export interface Props {
     title?: string;
     /** Description text shown in the content area. */
     description?: string | undefined;
-    /** If true, shows the content slot area.
-Use the `content` slot to provide custom content. */
+    /** If true, shows the content slot area. Use the `content` slot to provide custom content. */
     hasContent?: boolean;
-    /** If true, shows the action buttons container.
-Both primary and secondary buttons are shown if labels are provided.
-TODO(designer): Should both buttons always be shown, or is one preferred as primary? */
+    /** If true, shows the action buttons container. Both primary and secondary buttons are shown if labels are provided. TODO(designer): Should both buttons always be shown, or is one preferred as primary? */
     hasActions?: boolean;
-    /** If true, shows the leading icon in the header.
-The icon adapts to the current `variant` by default, or can be overridden via the `leading-icon` slot. */
+    /**
+     * If true, shows the leading icon in the header. The icon adapts to the current `variant` by default, or can be overridden via the `leading-icon` slot.
+     *
+     * Available when `title!=''`.
+     */
     hasLeadingIcon?: boolean;
-    /** If true, shows the trailing icon in the header.
-Use the `trailing-icon` slot to provide a custom icon. */
+    /**
+     * If true, shows the trailing icon in the header. Use the `trailing-icon` slot to provide a custom icon.
+     *
+     * Available when `title!=''`.
+     */
     hasTrailingIcon?: boolean;
-    /** Sets a custom width for the toggletip in pixels.
-If not set, defaults to 400px. */
+    /** Sets a custom width for the toggletip in pixels. If not set, defaults to 400px. */
     customWidth?: number | undefined;
-    /** Label for the primary action button.
-Only shown if `hasActions` is true. */
+    /**
+     * Label for the primary action button. Only shown if `hasActions` is true.
+     *
+     * Available when `hasActions==true`.
+     */
     primaryButtonLabel?: string;
-    /** Label for the secondary action button.
-Only shown if `hasActions` is true. */
+    /**
+     * Label for the secondary action button. Only shown if `hasActions` is true.
+     *
+     * Available when `hasActions==true`.
+     */
     secondaryButtonLabel?: string;
 }
 export interface Events {

package/dist/components/tooltip/ObcTooltip.svelte

@@ -3,6 +3,7 @@
     export type {TooltipType, TooltipVariant} from '@oicl/openbridge-webcomponents/dist/components/tooltip/tooltip.js';
       import '@oicl/openbridge-webcomponents/dist/components/tooltip/tooltip.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {TooltipType, TooltipVariant} from '@oicl/openbridge-webcomponents/dist/components/tooltip/tooltip.js';
       import type { Snippet } from 'svelte';
 
@@ -54,8 +55,6 @@ showIcon?: boolean
      >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-tooltip>

package/dist/components/top-bar/ObcTopBar.svelte

@@ -3,7 +3,8 @@
     export type {BreadcrumbClickEvent, BreadcrumbItem} from '@oicl/openbridge-webcomponents/dist/components/breadcrumb/breadcrumb.js';
 export type {ObcTopBarMenuButtonIcon} from '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js';
       import '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {BreadcrumbClickEvent, BreadcrumbItem} from '@oicl/openbridge-webcomponents/dist/components/breadcrumb/breadcrumb.js';
 import type {ObcTopBarMenuButtonIcon} from '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js';
       import type { Snippet } from 'svelte';
@@ -15,6 +16,7 @@ import type {ObcTopBarMenuButtonIcon} from '@oicl/openbridge-webcomponents/dist/
 appTitle?: string;
       /** Sets the current page or section name displayed in the top bar. */
 pageName?: string;
+     /** Available when `settings==false && inactive==false`. */
      menuButtonIcon?: ObcTopBarMenuButtonIcon;
       /** Highlights the menu button as active. */
 menuButtonActivated?: boolean;
@@ -86,38 +88,21 @@ breadcrumbItems?: BreadcrumbItem[]
     use:setProperties={props}
     class={className}
     style={style}
-    onmenu-button-clicked={onMenuButtonClicked}
-   ondimming-button-clicked={onDimmingButtonClicked}
-   onapps-button-clicked={onAppsButtonClicked}
-   onleft-more-button-clicked={onLeftMoreButtonClicked}
-   onuser-button-clicked={onUserButtonClicked}
-   onclose={onClose}
-   onback={onBack}
-   onemergency-brightness-start={onEmergencyBrightnessStart}
-   onemergency-brightness-stop={onEmergencyBrightnessStop}
-   onbreadcrumb-click={onBreadcrumbClick} >
+    use:forwardEvents={{'menu-button-clicked': onMenuButtonClicked, 'dimming-button-clicked': onDimmingButtonClicked, 'apps-button-clicked': onAppsButtonClicked, 'left-more-button-clicked': onLeftMoreButtonClicked, 'user-button-clicked': onUserButtonClicked, 'close': onClose, 'back': onBack, 'emergency-brightness-start': onEmergencyBrightnessStart, 'emergency-brightness-stop': onEmergencyBrightnessStop, 'breadcrumb-click': onBreadcrumbClick}} >
       
       {#if appIcon}
-        <div slot="app-icon">
-          {@render appIcon()}
-        </div>
+        <NamedSlot name="app-icon" content={appIcon} />
       {/if}
 
       {#if commandButton}
-        <div slot="command-button">
-          {@render commandButton()}
-        </div>
+        <NamedSlot name="command-button" content={commandButton} />
       {/if}
 
       {#if alerts}
-        <div slot="alerts">
-          {@render alerts()}
-        </div>
+        <NamedSlot name="alerts" content={alerts} />
       {/if}
 
       {#if clock}
-        <div slot="clock">
-          {@render clock()}
-        </div>
+        <NamedSlot name="clock" content={clock} />
       {/if}
     </obc-top-bar>

package/dist/components/top-bar/ObcTopBar.svelte.d.ts

@@ -9,6 +9,7 @@ export interface Props {
     appTitle?: string;
     /** Sets the current page or section name displayed in the top bar. */
     pageName?: string;
+    /** Available when `settings==false && inactive==false`. */
     menuButtonIcon?: ObcTopBarMenuButtonIcon;
     /** Highlights the menu button as active. */
     menuButtonActivated?: boolean;

package/dist/components/topbar-message-item/ObcTopbarMessageItem.svelte

@@ -2,7 +2,8 @@
   <script lang="ts">
     export type {ObcTopbarMessageItemType, ObcTopbarMessageItemSize} from '@oicl/openbridge-webcomponents/dist/components/topbar-message-item/topbar-message-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/topbar-message-item/topbar-message-item.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcTopbarMessageItemType, ObcTopbarMessageItemSize} from '@oicl/openbridge-webcomponents/dist/components/topbar-message-item/topbar-message-item.js';
       import type { Snippet } from 'svelte';
 
@@ -25,16 +26,36 @@ type?: ObcTopbarMessageItemType;
 
 Defaults to `regular`. */
 size?: ObcTopbarMessageItemSize;
-      /** Whether to show the title slot. */
-showTitle?: boolean;
-      /** Whether to show the description slot. */
-showDescription?: boolean;
-      /** Whether to show the primary timestamp slot. */
-showTimestamp?: boolean;
-      /** Whether to display the secondary timestamp slot. */
-hasTimestamp2?: boolean;
-      /** Whether to display the secondary icon slot. */
-hasSecondaryIcon?: boolean
+     /**
+      * Whether to show the title slot.
+      *
+      * Available when `type!=Inactive`.
+      */
+     showTitle?: boolean;
+     /**
+      * Whether to show the description slot.
+      *
+      * Available when `type!=Inactive`.
+      */
+     showDescription?: boolean;
+     /**
+      * Whether to show the primary timestamp slot.
+      *
+      * Available when `type!=Inactive`.
+      */
+     showTimestamp?: boolean;
+     /**
+      * Whether to display the secondary timestamp slot.
+      *
+      * Available when `type!=Inactive`.
+      */
+     hasTimestamp2?: boolean;
+     /**
+      * Whether to display the secondary icon slot.
+      *
+      * Available when `type!=Inactive`.
+      */
+     hasSecondaryIcon?: boolean
    }
       export interface Events {
     onMessageClick?: (event: CustomEvent<void>) => void;
@@ -58,60 +79,41 @@ hasSecondaryIcon?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    onmessage-click={onMessageClick}
-   onaction-click={onActionClick} >
+    use:forwardEvents={{'message-click': onMessageClick, 'action-click': onActionClick}} >
       
       {#if primaryIcon}
-        <div slot="primary-icon">
-          {@render primaryIcon()}
-        </div>
+        <NamedSlot name="primary-icon" content={primaryIcon} />
       {/if}
 
       {#if secondaryIcon}
-        <div slot="secondary-icon">
-          {@render secondaryIcon()}
-        </div>
+        <NamedSlot name="secondary-icon" content={secondaryIcon} />
       {/if}
 
       {#if title}
-        <div slot="title">
-          {@render title()}
-        </div>
+        <NamedSlot name="title" content={title} />
       {/if}
 
       {#if description}
-        <div slot="description">
-          {@render description()}
-        </div>
+        <NamedSlot name="description" content={description} />
       {/if}
 
       {#if time}
-        <div slot="time">
-          {@render time()}
-        </div>
+        <NamedSlot name="time" content={time} />
       {/if}
 
       {#if timeSecondary}
-        <div slot="time-secondary">
-          {@render timeSecondary()}
-        </div>
+        <NamedSlot name="time-secondary" content={timeSecondary} />
       {/if}
 
       {#if actionText}
-        <div slot="action-text">
-          {@render actionText()}
-        </div>
+        <NamedSlot name="action-text" content={actionText} />
       {/if}
 
       {#if actionIcon}
-        <div slot="action-icon">
-          {@render actionIcon()}
-        </div>
+        <NamedSlot name="action-icon" content={actionIcon} />
       {/if}
 
       {#if empty}
-        <div slot="empty">
-          {@render empty()}
-        </div>
+        <NamedSlot name="empty" content={empty} />
       {/if}
     </obc-topbar-message-item>