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

package/dist/components/slider-double/ObcSliderDouble.svelte

@@ -3,6 +3,7 @@
     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, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcSliderDoubleValueEvent, ObcSliderDoubleChangeEvent, ObcSliderDoubleVariant} from '@oicl/openbridge-webcomponents/dist/components/slider-double/slider-double.js';
       import type { Snippet } from 'svelte';
 
@@ -73,14 +74,10 @@ showRightReadout?: boolean;
     use:forwardEvents={{'value': onValue, 'change': onChange}} >
       
       {#if leftReadout}
-        <div slot="left-readout">
-          {@render leftReadout()}
-        </div>
+        <NamedSlot name="left-readout" content={leftReadout} />
       {/if}
 
       {#if rightReadout}
-        <div slot="right-readout">
-          {@render rightReadout()}
-        </div>
+        <NamedSlot name="right-readout" content={rightReadout} />
       {/if}
     </obc-slider-double>

package/dist/components/split-button/ObcSplitButton.svelte

@@ -4,6 +4,7 @@
 export type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
       import '@oicl/openbridge-webcomponents/dist/components/split-button/split-button.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcSplitButtonClickEvent, ObcSplitButtonChangeEvent} from '@oicl/openbridge-webcomponents/dist/components/split-button/split-button.js';
 import type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbridge-webcomponents/dist/components/context-menu-input/context-menu-input.js';
       import type { Snippet } from 'svelte';
@@ -69,8 +70,6 @@ import type {ContextMenuOption, ContextMenuType, ColumnGroup} from '@oicl/openbr
     use:forwardEvents={{'click': onClick, 'change': onChange}} >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-split-button>

package/dist/components/start-stop-switch/ObcStartStopSwitch.svelte

@@ -3,6 +3,7 @@
     export type {ObcStartStopSwitchChangeEvent, StartStopSwitchVariant, StartStopSwitchSize} from '@oicl/openbridge-webcomponents/dist/components/start-stop-switch/start-stop-switch.js';
       import '@oicl/openbridge-webcomponents/dist/components/start-stop-switch/start-stop-switch.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcStartStopSwitchChangeEvent, StartStopSwitchVariant, StartStopSwitchSize} from '@oicl/openbridge-webcomponents/dist/components/start-stop-switch/start-stop-switch.js';
       import type { Snippet } from 'svelte';
 
@@ -84,38 +85,26 @@ description?: string
     use:forwardEvents={{'change': onChange}} >
       
       {#if checkedStateIcon}
-        <div slot="checked-state-icon">
-          {@render checkedStateIcon()}
-        </div>
+        <NamedSlot name="checked-state-icon" content={checkedStateIcon} />
       {/if}
 
       {#if uncheckedStateIcon}
-        <div slot="unchecked-state-icon">
-          {@render uncheckedStateIcon()}
-        </div>
+        <NamedSlot name="unchecked-state-icon" content={uncheckedStateIcon} />
       {/if}
 
       {#if checkedStateLabel}
-        <div slot="checked-state-label">
-          {@render checkedStateLabel()}
-        </div>
+        <NamedSlot name="checked-state-label" content={checkedStateLabel} />
       {/if}
 
       {#if uncheckedStateLabel}
-        <div slot="unchecked-state-label">
-          {@render uncheckedStateLabel()}
-        </div>
+        <NamedSlot name="unchecked-state-label" content={uncheckedStateLabel} />
       {/if}
 
       {#if toCheckedActionLabel}
-        <div slot="to-checked-action-label">
-          {@render toCheckedActionLabel()}
-        </div>
+        <NamedSlot name="to-checked-action-label" content={toCheckedActionLabel} />
       {/if}
 
       {#if toUncheckedActionLabel}
-        <div slot="to-unchecked-action-label">
-          {@render toUncheckedActionLabel()}
-        </div>
+        <NamedSlot name="to-unchecked-action-label" content={toUncheckedActionLabel} />
       {/if}
     </obc-start-stop-switch>

package/dist/components/system-menu/ObcSystemMenu.svelte

@@ -3,6 +3,7 @@
     export type {VolumeChangeEvent, WifiState, AudioState, MicrophoneState, BatteryState, SystemSubMenu} from '@oicl/openbridge-webcomponents/dist/components/system-menu/system-menu.js';
       import '@oicl/openbridge-webcomponents/dist/components/system-menu/system-menu.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {VolumeChangeEvent, WifiState, AudioState, MicrophoneState, BatteryState, SystemSubMenu} from '@oicl/openbridge-webcomponents/dist/components/system-menu/system-menu.js';
       import type { Snippet } from 'svelte';
 
@@ -49,8 +50,6 @@
     use:forwardEvents={{'wifi-click': onWifiClick, 'audio-click': onAudioClick, 'audio-volume-change': onAudioVolumeChange, 'microphone-click': onMicrophoneClick, 'push-to-talk-change': onPushToTalkChange, 'battery-usage-click': onBatteryUsageClick, 'battery-saving-mode-change': onBatterySavingModeChange, 'battery-mode-change': onBatteryModeChange, 'wifi-network-change': onWifiNetworkChange, 'audio-output-change': onAudioOutputChange, 'microphone-input-change': onMicrophoneInputChange, 'settings-click': onSettingsClick, 'to-sub-menu-click': onToSubMenuClick, 'wifi-options-click': onWifiOptionsClick, 'wifi-disconnect-click': onWifiDisconnectClick}} >
       
       {#if batteryStatus}
-        <div slot="battery-status">
-          {@render batteryStatus()}
-        </div>
+        <NamedSlot name="battery-status" content={batteryStatus} />
       {/if}
     </obc-system-menu>

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

@@ -3,6 +3,7 @@
     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, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {TabItemBadge} from '@oicl/openbridge-webcomponents/dist/components/tab-item/tab-item.js';
       import type { Snippet } from 'svelte';
 
@@ -106,20 +107,14 @@ disabled?: boolean;
     use:forwardEvents={{'tab-click': onTabClick, 'tab-close': onTabClose}} >
       
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
 
       {#if titleSnippet}
-        <div slot="title">
-          {@render titleSnippet()}
-        </div>
+        <NamedSlot name="title" content={titleSnippet} />
       {/if}
 
       {#if badgeIcon}
-        <div slot="badge-icon">
-          {@render badgeIcon()}
-        </div>
+        <NamedSlot name="badge-icon" content={badgeIcon} />
       {/if}
     </obc-tab-item>

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

@@ -3,6 +3,7 @@
     export type {TabData} from '@oicl/openbridge-webcomponents/dist/components/tab-row/tab-row.js';
       import '@oicl/openbridge-webcomponents/dist/components/tab-row/tab-row.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {TabData} from '@oicl/openbridge-webcomponents/dist/components/tab-row/tab-row.js';
       import type { Snippet } from 'svelte';
 
@@ -67,17 +68,13 @@ hasAddNewTab?: boolean
       
       {#if props.tabs && tabIcon}
         {#each props.tabs as item}
-          <div slot="tab-{item.id}-icon">
-            {@render tabIcon(item)}
-          </div>
+          <NamedSlot name="tab-{item.id}-icon" content={tabIcon} arg={item} />
         {/each}
       {/if}
 
       {#if props.tabs && tab}
         {#each props.tabs as item}
-          <div slot="tab-{item.id}-<iconSlotName>">
-            {@render tab(item)}
-          </div>
+          <NamedSlot name="tab-{item.id}-<iconSlotName>" content={tab} arg={item} />
         {/each}
       {/if}
     </obc-tab-row>

package/dist/components/tabbed-card/ObcTabbedCard.svelte

@@ -3,6 +3,7 @@
     
       import '@oicl/openbridge-webcomponents/dist/components/tabbed-card/tabbed-card.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       
       import type { Snippet } from 'svelte';
 
@@ -53,92 +54,62 @@
       {/if}
 
       {#if tabTitle0}
-        <div slot="tab-title-0">
-          {@render tabTitle0()}
-        </div>
+        <NamedSlot name="tab-title-0" content={tabTitle0} />
       {/if}
 
       {#if tabContent0}
-        <div slot="tab-content-0">
-          {@render tabContent0()}
-        </div>
+        <NamedSlot name="tab-content-0" content={tabContent0} />
       {/if}
 
       {#if tabTitle1}
-        <div slot="tab-title-1">
-          {@render tabTitle1()}
-        </div>
+        <NamedSlot name="tab-title-1" content={tabTitle1} />
       {/if}
 
       {#if tabContent1}
-        <div slot="tab-content-1">
-          {@render tabContent1()}
-        </div>
+        <NamedSlot name="tab-content-1" content={tabContent1} />
       {/if}
 
       {#if tabTitle2}
-        <div slot="tab-title-2">
-          {@render tabTitle2()}
-        </div>
+        <NamedSlot name="tab-title-2" content={tabTitle2} />
       {/if}
 
       {#if tabContent2}
-        <div slot="tab-content-2">
-          {@render tabContent2()}
-        </div>
+        <NamedSlot name="tab-content-2" content={tabContent2} />
       {/if}
 
       {#if tabTitle3}
-        <div slot="tab-title-3">
-          {@render tabTitle3()}
-        </div>
+        <NamedSlot name="tab-title-3" content={tabTitle3} />
       {/if}
 
       {#if tabContent3}
-        <div slot="tab-content-3">
-          {@render tabContent3()}
-        </div>
+        <NamedSlot name="tab-content-3" content={tabContent3} />
       {/if}
 
       {#if tabTitle4}
-        <div slot="tab-title-4">
-          {@render tabTitle4()}
-        </div>
+        <NamedSlot name="tab-title-4" content={tabTitle4} />
       {/if}
 
       {#if tabContent4}
-        <div slot="tab-content-4">
-          {@render tabContent4()}
-        </div>
+        <NamedSlot name="tab-content-4" content={tabContent4} />
       {/if}
 
       {#if tabIcon0}
-        <div slot="tab-icon-0">
-          {@render tabIcon0()}
-        </div>
+        <NamedSlot name="tab-icon-0" content={tabIcon0} />
       {/if}
 
       {#if tabIcon1}
-        <div slot="tab-icon-1">
-          {@render tabIcon1()}
-        </div>
+        <NamedSlot name="tab-icon-1" content={tabIcon1} />
       {/if}
 
       {#if tabIcon2}
-        <div slot="tab-icon-2">
-          {@render tabIcon2()}
-        </div>
+        <NamedSlot name="tab-icon-2" content={tabIcon2} />
       {/if}
 
       {#if tabIcon3}
-        <div slot="tab-icon-3">
-          {@render tabIcon3()}
-        </div>
+        <NamedSlot name="tab-icon-3" content={tabIcon3} />
       {/if}
 
       {#if tabIcon4}
-        <div slot="tab-icon-4">
-          {@render tabIcon4()}
-        </div>
+        <NamedSlot name="tab-icon-4" content={tabIcon4} />
       {/if}
     </obc-tabbed-card>

package/dist/components/table-header-item/ObcTableHeaderItem.svelte

@@ -3,6 +3,7 @@
     export type {ObcTableHeaderItemType, ObcTableHeaderItemSortDirection} from '@oicl/openbridge-webcomponents/dist/components/table-header-item/table-header-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/table-header-item/table-header-item.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcTableHeaderItemType, ObcTableHeaderItemSortDirection} from '@oicl/openbridge-webcomponents/dist/components/table-header-item/table-header-item.js';
       import type { Snippet } from 'svelte';
 
@@ -35,9 +36,7 @@
      >
       
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
 
       {#if children}

package/dist/components/text-input-field/ObcTextInputField.svelte

@@ -3,6 +3,7 @@
     export type {HTMLInputTypeAttribute, ObcTextInputFieldTextAlign, ObcTextInputFieldSize, ObcTextInputFieldPlacement} from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
       import '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {HTMLInputTypeAttribute, ObcTextInputFieldTextAlign, ObcTextInputFieldSize, ObcTextInputFieldPlacement} from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
       import type { Snippet } from 'svelte';
 
@@ -65,20 +66,14 @@
     use:forwardEvents={{'input': onInput, 'change': onChange, 'clear': onClear, 'blur': onBlur}} >
       
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
 
       {#if labelIcon}
-        <div slot="label-icon">
-          {@render labelIcon()}
-        </div>
+        <NamedSlot name="label-icon" content={labelIcon} />
       {/if}
 
       {#if helperIcon}
-        <div slot="helper-icon">
-          {@render helperIcon()}
-        </div>
+        <NamedSlot name="helper-icon" content={helperIcon} />
       {/if}
     </obc-text-input-field>

package/dist/components/textarea-field/ObcTextareaField.svelte

@@ -4,6 +4,7 @@
 export type {AudioRecordingStatus} from '@oicl/openbridge-webcomponents/dist/components/audio-recording-item/audio-recording-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/textarea-field/textarea-field.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {VoiceActionDetail, TextareaFieldType, Attachment} from '@oicl/openbridge-webcomponents/dist/components/textarea-field/textarea-field.js';
 import type {AudioRecordingStatus} from '@oicl/openbridge-webcomponents/dist/components/audio-recording-item/audio-recording-item.js';
       import type { Snippet } from 'svelte';
@@ -101,8 +102,6 @@ import type {AudioRecordingStatus} from '@oicl/openbridge-webcomponents/dist/com
     use:forwardEvents={{'change': onChange, 'input': onInput, 'blur': onBlur, 'send-click': onSendClick, 'add-click': onAddClick, 'screenshot-click': onScreenshotClick, 'image-click': onImageClick, 'attachment-click': onAttachmentClick, 'voice-action': onVoiceAction, 'attachment-remove': onAttachmentRemove}} >
       
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
     </obc-textarea-field>

package/dist/components/textbox/ObcTextbox.svelte

@@ -3,6 +3,7 @@
     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 NamedSlot from "../../NamedSlot.svelte";
       import type {ObcTextboxAlignment, ObcTextboxSize, ObcTextboxFontWeight} from '@oicl/openbridge-webcomponents/dist/components/textbox/textbox.js';
       import type { Snippet } from 'svelte';
 
@@ -35,8 +36,6 @@
       {/if}
 
       {#if length}
-        <div slot="length">
-          {@render length()}
-        </div>
+        <NamedSlot name="length" content={length} />
       {/if}
     </obc-textbox>

package/dist/components/title-container/ObcTitleContainer.svelte

@@ -3,6 +3,7 @@
     export type {ObcTitleContainerState} from '@oicl/openbridge-webcomponents/dist/components/title-container/title-container.js';
       import '@oicl/openbridge-webcomponents/dist/components/title-container/title-container.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcTitleContainerState} from '@oicl/openbridge-webcomponents/dist/components/title-container/title-container.js';
       import type { Snippet } from 'svelte';
 
@@ -32,26 +33,18 @@
     use:forwardEvents={{'action-click': onActionClick}} >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
 
       {#if title}
-        <div slot="title">
-          {@render title()}
-        </div>
+        <NamedSlot name="title" content={title} />
       {/if}
 
       {#if labelSnippet}
-        <div slot="label">
-          {@render labelSnippet()}
-        </div>
+        <NamedSlot name="label" content={labelSnippet} />
       {/if}
 
       {#if actions}
-        <div slot="actions">
-          {@render actions()}
-        </div>
+        <NamedSlot name="actions" content={actions} />
       {/if}
     </obc-title-container>

package/dist/components/toggle-button-option/ObcToggleButtonOption.svelte

@@ -3,6 +3,7 @@
     export type {ObcToggleButtonOptionType, ObcToggleButtonOptionVariant} from '@oicl/openbridge-webcomponents/dist/components/toggle-button-option/toggle-button-option.js';
       import '@oicl/openbridge-webcomponents/dist/components/toggle-button-option/toggle-button-option.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcToggleButtonOptionType, ObcToggleButtonOptionVariant} from '@oicl/openbridge-webcomponents/dist/components/toggle-button-option/toggle-button-option.js';
       import type { Snippet } from 'svelte';
 
@@ -57,8 +58,6 @@
       {/if}
 
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-toggle-button-option>

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

@@ -3,6 +3,7 @@
     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, 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';
 
@@ -44,8 +45,6 @@ labelPlacement?: ObcToggleButtonLabelPlacement
     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-switch/ObcToggleSwitch.svelte

@@ -3,6 +3,7 @@
     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, 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';
 
@@ -47,8 +48,6 @@
     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/toggletip/ObcToggletip.svelte

@@ -3,6 +3,7 @@
     export type {ToggletipVariant} from '@oicl/openbridge-webcomponents/dist/components/toggletip/toggletip.js';
       import '@oicl/openbridge-webcomponents/dist/components/toggletip/toggletip.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';
 
@@ -73,20 +74,14 @@ variant?: ToggletipVariant;
     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/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

@@ -4,6 +4,7 @@
 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, 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';
@@ -90,26 +91,18 @@ breadcrumbItems?: BreadcrumbItem[]
     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/topbar-message-item/ObcTopbarMessageItem.svelte

@@ -3,6 +3,7 @@
     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, 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';
 
@@ -81,56 +82,38 @@ size?: ObcTopbarMessageItemSize;
     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>