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

package/dist/components/navigation-menu/ObcNavigationMenu.svelte

@@ -3,6 +3,7 @@
     export type {ObcNavigationMenuVariant, ObcNavigationMenuFlyoutVariant} from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
       import '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcNavigationMenuVariant, ObcNavigationMenuFlyoutVariant} from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
       import type { Snippet } from 'svelte';
 
@@ -44,20 +45,14 @@ variant?: ObcNavigationMenuVariant;
      >
       
       {#if main}
-        <div slot="main">
-          {@render main()}
-        </div>
+        <NamedSlot name="main" content={main} />
       {/if}
 
       {#if footer}
-        <div slot="footer">
-          {@render footer()}
-        </div>
+        <NamedSlot name="footer" content={footer} />
       {/if}
 
       {#if logo}
-        <div slot="logo">
-          {@render logo()}
-        </div>
+        <NamedSlot name="logo" content={logo} />
       {/if}
     </obc-navigation-menu>

package/dist/components/notification-button/ObcNotificationButton.svelte

@@ -3,6 +3,7 @@
     export type {NotificationButtonClickEvent, NotificationButtonStyle} from '@oicl/openbridge-webcomponents/dist/components/notification-button/notification-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/notification-button/notification-button.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {NotificationButtonClickEvent, NotificationButtonStyle} from '@oicl/openbridge-webcomponents/dist/components/notification-button/notification-button.js';
       import type { Snippet } from 'svelte';
 
@@ -61,8 +62,6 @@ ariaLabel?: string
     use:forwardEvents={{'obc-click': onObcClick}} >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-notification-button>

package/dist/components/notification-floating-item/ObcNotificationFloatingItem.svelte

@@ -3,6 +3,7 @@
     export type {ObcFloatingItemType, ObcFloatingItemDirection, ObcFloatingItemLineType} from '@oicl/openbridge-webcomponents/dist/components/floating-item/floating-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/notification-floating-item/notification-floating-item.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcFloatingItemType, ObcFloatingItemDirection, ObcFloatingItemLineType} from '@oicl/openbridge-webcomponents/dist/components/floating-item/floating-item.js';
       import type { Snippet } from 'svelte';
 
@@ -57,44 +58,30 @@ lineType?: ObcFloatingItemLineType
     use:forwardEvents={{'action-click': onActionClick, 'action2-click': onAction2Click, 'dismiss-click': onDismissClick}} >
       
       {#if primaryIcon}
-        <div slot="primary-icon">
-          {@render primaryIcon()}
-        </div>
+        <NamedSlot name="primary-icon" content={primaryIcon} />
       {/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 day}
-        <div slot="day">
-          {@render day()}
-        </div>
+        <NamedSlot name="day" content={day} />
       {/if}
 
       {#if actionSnippet}
-        <div slot="action">
-          {@render actionSnippet()}
-        </div>
+        <NamedSlot name="action" content={actionSnippet} />
       {/if}
 
       {#if action2Snippet}
-        <div slot="action2">
-          {@render action2Snippet()}
-        </div>
+        <NamedSlot name="action2" content={action2Snippet} />
       {/if}
     </obc-notification-floating-item>

package/dist/components/notification-menu-item/ObcNotificationMenuItem.svelte

@@ -3,6 +3,7 @@
     export type {ObcMessageMenuItemSize} from '@oicl/openbridge-webcomponents/dist/components/message-menu-item/message-menu-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/notification-menu-item/notification-menu-item.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcMessageMenuItemSize} from '@oicl/openbridge-webcomponents/dist/components/message-menu-item/message-menu-item.js';
       import type { Snippet } from 'svelte';
 
@@ -39,8 +40,6 @@
     use:forwardEvents={{'primary-action-click': onPrimaryActionClick, 'secondary-action-click': onSecondaryActionClick, 'item-click': onItemClick}} >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-notification-menu-item>

package/dist/components/notification-message-item/ObcNotificationMessageItem.svelte

@@ -3,6 +3,7 @@
     export type {ObcNotificationMessageItemType, ObcNotificationMessageItemSize} from '@oicl/openbridge-webcomponents/dist/components/notification-message-item/notification-message-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/notification-message-item/notification-message-item.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcNotificationMessageItemType, ObcNotificationMessageItemSize} from '@oicl/openbridge-webcomponents/dist/components/notification-message-item/notification-message-item.js';
       import type { Snippet } from 'svelte';
 
@@ -107,8 +108,6 @@ size?: ObcNotificationMessageItemSize;
     use:forwardEvents={{'message-click': onMessageClick, 'action-click': onActionClick}} >
       
       {#if secondaryIcon}
-        <div slot="secondary-icon">
-          {@render secondaryIcon()}
-        </div>
+        <NamedSlot name="secondary-icon" content={secondaryIcon} />
       {/if}
     </obc-notification-message-item>

package/dist/components/number-input-field/ObcNumberInputField.svelte

@@ -3,6 +3,7 @@
     export type {ObcNumberInputFieldTextAlign, ObcNumberInputFieldSize, ObcNumberInputFieldPlacement} from '@oicl/openbridge-webcomponents/dist/components/number-input-field/number-input-field.js';
       import '@oicl/openbridge-webcomponents/dist/components/number-input-field/number-input-field.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcNumberInputFieldTextAlign, ObcNumberInputFieldSize, ObcNumberInputFieldPlacement} from '@oicl/openbridge-webcomponents/dist/components/number-input-field/number-input-field.js';
       import type { Snippet } from 'svelte';
 
@@ -73,20 +74,14 @@
     use:forwardEvents={{'input': onInput, 'change': onChange}} >
       
       {#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-number-input-field>

package/dist/components/pivot-item/ObcPivotItem.svelte

@@ -3,6 +3,7 @@
     export type {ObcPivotItemDirection} from '@oicl/openbridge-webcomponents/dist/components/pivot-item/pivot-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/pivot-item/pivot-item.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcPivotItemDirection} from '@oicl/openbridge-webcomponents/dist/components/pivot-item/pivot-item.js';
       import type { Snippet } from 'svelte';
 
@@ -55,8 +56,6 @@ disabled?: boolean
     use:forwardEvents={{'selected': onSelected}} >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-pivot-item>

package/dist/components/progress-bar/ObcProgressBar.svelte

@@ -4,6 +4,7 @@
 export type {Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
       import '@oicl/openbridge-webcomponents/dist/components/progress-bar/progress-bar.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ProgressBarType, ProgressBarMode, CircularProgressState} from '@oicl/openbridge-webcomponents/dist/components/progress-bar/progress-bar.js';
 import type {Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
       import type { Snippet } from 'svelte';
@@ -91,8 +92,6 @@ showState?: boolean;
      >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-progress-bar>

package/dist/components/progress-button/ObcProgressButton.svelte

@@ -3,6 +3,7 @@
     export type {ProgressButtonClickEvent, ProgressButtonType, ButtonStyle, ProgressMode} from '@oicl/openbridge-webcomponents/dist/components/progress-button/progress-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/progress-button/progress-button.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ProgressButtonClickEvent, ProgressButtonType, ButtonStyle, ProgressMode} from '@oicl/openbridge-webcomponents/dist/components/progress-button/progress-button.js';
       import type { Snippet } from 'svelte';
 
@@ -76,20 +77,14 @@
     use:forwardEvents={{'obc-click': onObcClick}} >
       
       {#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 icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
     </obc-progress-button>

package/dist/components/rich-button/ObcRichButton.svelte

@@ -4,6 +4,7 @@
 export type {RichButtonDirection} from '@oicl/openbridge-webcomponents/dist/components/rich-button/rich-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/rich-button/rich-button.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {HTMLTemplateResult} from 'lit';
 import type {RichButtonDirection} from '@oicl/openbridge-webcomponents/dist/components/rich-button/rich-button.js';
       import type { Snippet } from 'svelte';
@@ -45,14 +46,10 @@ direction?: RichButtonDirection;
     use:forwardEvents={{'rich-button-click': onRichButtonClick}} >
       
       {#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}
     </obc-rich-button>

package/dist/components/sequence-card/ObcSequenceCard.svelte

@@ -4,6 +4,7 @@
 export type {SequenceValue, SequenceType, SequenceStyle} from '@oicl/openbridge-webcomponents/dist/components/sequence-step/sequence-step.js';
       import '@oicl/openbridge-webcomponents/dist/components/sequence-card/sequence-card.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcSequenceCardSize, ObcSequenceCardTitleType, ObcSequenceCardProgressType, ObcSequenceCardState} from '@oicl/openbridge-webcomponents/dist/components/sequence-card/sequence-card.js';
 import type {SequenceValue, SequenceType, SequenceStyle} from '@oicl/openbridge-webcomponents/dist/components/sequence-step/sequence-step.js';
       import type { Snippet } from 'svelte';
@@ -64,45 +65,31 @@ import type {SequenceValue, SequenceType, SequenceStyle} from '@oicl/openbridge-
      >
       
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
 
       {#if title}
-        <div slot="title">
-          {@render title()}
-        </div>
+        <NamedSlot name="title" content={title} />
       {/if}
 
       {#if subtitleSnippet}
-        <div slot="subtitle">
-          {@render subtitleSnippet()}
-        </div>
+        <NamedSlot name="subtitle" content={subtitleSnippet} />
       {/if}
 
       {#if timeStamp}
-        <div slot="time-stamp">
-          {@render timeStamp()}
-        </div>
+        <NamedSlot name="time-stamp" content={timeStamp} />
       {/if}
 
       {#if headerActions}
-        <div slot="header-actions">
-          {@render headerActions()}
-        </div>
+        <NamedSlot name="header-actions" content={headerActions} />
       {/if}
 
       {#if leftTimeStamp}
-        <div slot="left-time-stamp">
-          {@render leftTimeStamp()}
-        </div>
+        <NamedSlot name="left-time-stamp" content={leftTimeStamp} />
       {/if}
 
       {#if actions}
-        <div slot="actions">
-          {@render actions()}
-        </div>
+        <NamedSlot name="actions" content={actions} />
       {/if}
 
       {#if children}

package/dist/components/sequence-item/ObcSequenceItem.svelte

@@ -4,6 +4,7 @@
 export type {SequenceType, SequenceStyle, SequenceValue} from '@oicl/openbridge-webcomponents/dist/components/sequence-step/sequence-step.js';
       import '@oicl/openbridge-webcomponents/dist/components/sequence-item/sequence-item.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {SequenceItemOrientation, SequenceItemLabelType, SequenceItemState} from '@oicl/openbridge-webcomponents/dist/components/sequence-item/sequence-item.js';
 import type {SequenceType, SequenceStyle, SequenceValue} from '@oicl/openbridge-webcomponents/dist/components/sequence-step/sequence-step.js';
       import type { Snippet } from 'svelte';
@@ -67,26 +68,18 @@ import type {SequenceType, SequenceStyle, SequenceValue} from '@oicl/openbridge-
      >
       
       {#if titleSnippet}
-        <div slot="title">
-          {@render titleSnippet()}
-        </div>
+        <NamedSlot name="title" content={titleSnippet} />
       {/if}
 
       {#if descriptionSnippet}
-        <div slot="description">
-          {@render descriptionSnippet()}
-        </div>
+        <NamedSlot name="description" content={descriptionSnippet} />
       {/if}
 
       {#if meta}
-        <div slot="meta">
-          {@render meta()}
-        </div>
+        <NamedSlot name="meta" content={meta} />
       {/if}
 
       {#if step}
-        <div slot="step">
-          {@render step()}
-        </div>
+        <NamedSlot name="step" content={step} />
       {/if}
     </obc-sequence-item>

package/dist/components/sequence-modal/ObcSequenceModal.svelte

@@ -4,6 +4,7 @@
 export type {SequenceValue} from '@oicl/openbridge-webcomponents/dist/components/sequence-step/sequence-step.js';
       import '@oicl/openbridge-webcomponents/dist/components/sequence-modal/sequence-modal.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcSequenceModalType} from '@oicl/openbridge-webcomponents/dist/components/sequence-modal/sequence-modal.js';
 import type {SequenceValue} from '@oicl/openbridge-webcomponents/dist/components/sequence-step/sequence-step.js';
       import type { Snippet } from 'svelte';
@@ -39,9 +40,7 @@ import type {SequenceValue} from '@oicl/openbridge-webcomponents/dist/components
     use:forwardEvents={{'close-click': onCloseClick}} >
       
       {#if actions}
-        <div slot="actions">
-          {@render actions()}
-        </div>
+        <NamedSlot name="actions" content={actions} />
       {/if}
 
       {#if children}

package/dist/components/sequence-toolbar/ObcSequenceToolbar.svelte

@@ -3,6 +3,7 @@
     export type {SequenceToolbarType} from '@oicl/openbridge-webcomponents/dist/components/sequence-toolbar/sequence-toolbar.js';
       import '@oicl/openbridge-webcomponents/dist/components/sequence-toolbar/sequence-toolbar.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {SequenceToolbarType} from '@oicl/openbridge-webcomponents/dist/components/sequence-toolbar/sequence-toolbar.js';
       import type { Snippet } from 'svelte';
 
@@ -39,26 +40,18 @@
       {/if}
 
       {#if start}
-        <div slot="start">
-          {@render start()}
-        </div>
+        <NamedSlot name="start" content={start} />
       {/if}
 
       {#if end}
-        <div slot="end">
-          {@render end()}
-        </div>
+        <NamedSlot name="end" content={end} />
       {/if}
 
       {#if condensedCurrent}
-        <div slot="condensed-current">
-          {@render condensedCurrent()}
-        </div>
+        <NamedSlot name="condensed-current" content={condensedCurrent} />
       {/if}
 
       {#if condensedTotal}
-        <div slot="condensed-total">
-          {@render condensedTotal()}
-        </div>
+        <NamedSlot name="condensed-total" content={condensedTotal} />
       {/if}
     </obc-sequence-toolbar>

package/dist/components/slide-button/ObcSlideButton.svelte

@@ -3,6 +3,7 @@
     export type {ObcSlideButtonSlideEvent} from '@oicl/openbridge-webcomponents/dist/components/slide-button/slide-button.js';
       import '@oicl/openbridge-webcomponents/dist/components/slide-button/slide-button.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcSlideButtonSlideEvent} from '@oicl/openbridge-webcomponents/dist/components/slide-button/slide-button.js';
       import type { Snippet } from 'svelte';
 
@@ -35,14 +36,10 @@
     use:forwardEvents={{'slide': onSlide}} >
       
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
 
       {#if label}
-        <div slot="label">
-          {@render label()}
-        </div>
+        <NamedSlot name="label" content={label} />
       {/if}
     </obc-slide-button>

package/dist/components/slider/ObcSlider.svelte

@@ -3,6 +3,7 @@
     export type {ObcSliderValueEvent, ObcSliderChangeEvent, ObcSliderVariant} from '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';
       import '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcSliderValueEvent, ObcSliderChangeEvent, ObcSliderVariant} from '@oicl/openbridge-webcomponents/dist/components/slider/slider.js';
       import type { Snippet } from 'svelte';
 
@@ -75,14 +76,10 @@ seekingSpeed?: number;
     use:forwardEvents={{'value': onValue, 'change': onChange}} >
       
       {#if iconLeft}
-        <div slot="icon-left">
-          {@render iconLeft()}
-        </div>
+        <NamedSlot name="icon-left" content={iconLeft} />
       {/if}
 
       {#if iconRight}
-        <div slot="icon-right">
-          {@render iconRight()}
-        </div>
+        <NamedSlot name="icon-right" content={iconRight} />
       {/if}
     </obc-slider>

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>