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

package/dist/NamedSlot.svelte

@@ -0,0 +1,26 @@
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { assignSlot, SLOT_MARKER } from "./util.js";
+
+  interface Props {
+    /** Name of the custom element slot to assign the content to. */
+    name: string;
+    content: Snippet<[any]>;
+    /** Argument for parameterized snippets, e.g. `tab-<id>-icon`. */
+    arg?: unknown;
+  }
+
+  const { name, content, arg }: Props = $props();
+
+  // Text cannot carry a `slot` attribute. Once the snippet renders text, fall
+  // back to a display: contents wrapper that carries it instead.
+  let wrapped = $state(false);
+  const marker = { slot: SLOT_MARKER };
+</script>
+
+{#if wrapped}
+  <span {...{ slot: name }} style="display: contents">{@render content(arg)}</span>
+{:else}
+  <template {...marker} use:assignSlot={{ name, onText: () => (wrapped = true) }}></template>{@render content(arg)}<template {...marker}></template>
+{/if}

package/dist/NamedSlot.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Name of the custom element slot to assign the content to. */
+    name: string;
+    content: Snippet<[any]>;
+    /** Argument for parameterized snippets, e.g. `tab-<id>-icon`. */
+    arg?: unknown;
+}
+declare const NamedSlot: import("svelte").Component<Props, {}, "">;
+type NamedSlot = ReturnType<typeof NamedSlot>;
+export default NamedSlot;

package/dist/ar/building-blocks/poi-header/ObcPoiHeader.svelte

@@ -3,6 +3,7 @@
     export type {ObcPoiHeaderSize, ObcPoiHeaderState, ObcPoiHeaderType} from '@oicl/openbridge-webcomponents/dist/ar/building-blocks/poi-header/poi-header.js';
       import '@oicl/openbridge-webcomponents/dist/ar/building-blocks/poi-header/poi-header.js';
       import { setProperties } from "../../../util.js";
+      import NamedSlot from "../../../NamedSlot.svelte";
       import type {ObcPoiHeaderSize, ObcPoiHeaderState, ObcPoiHeaderType} from '@oicl/openbridge-webcomponents/dist/ar/building-blocks/poi-header/poi-header.js';
       import type { Snippet } from 'svelte';
 
@@ -32,8 +33,6 @@
      >
       
       {#if indicator}
-        <div slot="indicator">
-          {@render indicator()}
-        </div>
+        <NamedSlot name="indicator" content={indicator} />
       {/if}
     </obc-poi-header>

package/dist/ar/chart-object-vessel-button/ObcChartObjectVesselButton.svelte

@@ -4,6 +4,7 @@
 export type {VesselImage} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/watch/vessel.js';
       import '@oicl/openbridge-webcomponents/dist/ar/chart-object-vessel-button/chart-object-vessel-button.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {SpeedIndicator, State, Type} from '@oicl/openbridge-webcomponents/dist/ar/chart-object-vessel-button/chart-object-vessel-button.js';
 import type {VesselImage} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/watch/vessel.js';
       import type { Snippet } from 'svelte';
@@ -57,26 +58,18 @@ import type {VesselImage} from '@oicl/openbridge-webcomponents/dist/navigation-i
       {/if}
 
       {#if silhouette}
-        <div slot="silhouette">
-          {@render silhouette()}
-        </div>
+        <NamedSlot name="silhouette" content={silhouette} />
       {/if}
 
       {#if numberSnippet}
-        <div slot="number">
-          {@render numberSnippet()}
-        </div>
+        <NamedSlot name="number" content={numberSnippet} />
       {/if}
 
       {#if nameSnippet}
-        <div slot="name">
-          {@render nameSnippet()}
-        </div>
+        <NamedSlot name="name" content={nameSnippet} />
       {/if}
 
       {#if vesselImageSnippet}
-        <div slot="vessel-image">
-          {@render vesselImageSnippet()}
-        </div>
+        <NamedSlot name="vessel-image" content={vesselImageSnippet} />
       {/if}
     </obc-chart-object-vessel-button>

package/dist/ar/poi/ObcPoi.svelte

@@ -5,6 +5,7 @@ export type {ObcPoiButtonType, ObcPoiButtonDataItem} from '@oicl/openbridge-webc
 export type {ObcPoiPointerType, ObcPoiPointerState} from '@oicl/openbridge-webcomponents/dist/ar/building-blocks/poi-pointer/poi-pointer.js';
       import '@oicl/openbridge-webcomponents/dist/ar/poi/poi.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcPoiType, ObcPoiValue, ObcPoiState} from '@oicl/openbridge-webcomponents/dist/ar/poi/poi.js';
 import type {ObcPoiButtonType, ObcPoiButtonDataItem} from '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button.js';
 import type {ObcPoiPointerType, ObcPoiPointerState} from '@oicl/openbridge-webcomponents/dist/ar/building-blocks/poi-pointer/poi-pointer.js';
@@ -65,14 +66,10 @@ import type {ObcPoiPointerType, ObcPoiPointerState} from '@oicl/openbridge-webco
       {/if}
 
       {#if button}
-        <div slot="button">
-          {@render button()}
-        </div>
+        <NamedSlot name="button" content={button} />
       {/if}
 
       {#if header}
-        <div slot="header">
-          {@render header()}
-        </div>
+        <NamedSlot name="header" content={header} />
       {/if}
     </obc-poi>

package/dist/ar/poi/ObcPoiAton.svelte

@@ -7,6 +7,7 @@ export type {ObcPoiObjectAtonType, ObcPoiObjectAtonStyle} from '@oicl/openbridge
 export type {ObcPoiObjectState} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object.js';
       import '@oicl/openbridge-webcomponents/dist/ar/poi/poi-aton.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcPoiType, ObcPoiValue, ObcPoiState} from '@oicl/openbridge-webcomponents/dist/ar/poi/poi.js';
 import type {ObcPoiButtonType, ObcPoiButtonDataItem} from '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button.js';
 import type {ObcPoiPointerType, ObcPoiPointerState} from '@oicl/openbridge-webcomponents/dist/ar/building-blocks/poi-pointer/poi-pointer.js';
@@ -66,8 +67,6 @@ import type {ObcPoiObjectState} from '@oicl/openbridge-webcomponents/dist/ar/poi
       {/if}
 
       {#if header}
-        <div slot="header">
-          {@render header()}
-        </div>
+        <NamedSlot name="header" content={header} />
       {/if}
     </obc-poi-aton>

package/dist/ar/poi/ObcPoiData.svelte

@@ -6,6 +6,7 @@ export type {ObcPoiPointerType, ObcPoiPointerState} from '@oicl/openbridge-webco
 export type {ObcPoiObjectStyle, ObcPoiObjectState} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object.js';
       import '@oicl/openbridge-webcomponents/dist/ar/poi/poi-data.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcPoiType, ObcPoiValue, ObcPoiState} from '@oicl/openbridge-webcomponents/dist/ar/poi/poi.js';
 import type {ObcPoiButtonType, ObcPoiButtonDataItem} from '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button.js';
 import type {ObcPoiPointerType, ObcPoiPointerState} from '@oicl/openbridge-webcomponents/dist/ar/building-blocks/poi-pointer/poi-pointer.js';
@@ -63,8 +64,6 @@ import type {ObcPoiObjectStyle, ObcPoiObjectState} from '@oicl/openbridge-webcom
       {/if}
 
       {#if header}
-        <div slot="header">
-          {@render header()}
-        </div>
+        <NamedSlot name="header" content={header} />
       {/if}
     </obc-poi-data>

package/dist/ar/poi/ObcPoiVessel.svelte

@@ -6,6 +6,7 @@ export type {ObcPoiPointerType, ObcPoiPointerState} from '@oicl/openbridge-webco
 export type {ObcPoiObjectVesselType, ObcPoiObjectVesselStyle, ObcPoiObjectVesselState} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object-vessel.js';
       import '@oicl/openbridge-webcomponents/dist/ar/poi/poi-vessel.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcPoiType, ObcPoiValue, ObcPoiState} from '@oicl/openbridge-webcomponents/dist/ar/poi/poi.js';
 import type {ObcPoiButtonType, ObcPoiButtonDataItem} from '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button.js';
 import type {ObcPoiPointerType, ObcPoiPointerState} from '@oicl/openbridge-webcomponents/dist/ar/building-blocks/poi-pointer/poi-pointer.js';
@@ -66,20 +67,14 @@ import type {ObcPoiObjectVesselType, ObcPoiObjectVesselStyle, ObcPoiObjectVessel
       {/if}
 
       {#if turnIndicator}
-        <div slot="turn-indicator">
-          {@render turnIndicator()}
-        </div>
+        <NamedSlot name="turn-indicator" content={turnIndicator} />
       {/if}
 
       {#if speedIndicator}
-        <div slot="speed-indicator">
-          {@render speedIndicator()}
-        </div>
+        <NamedSlot name="speed-indicator" content={speedIndicator} />
       {/if}
 
       {#if header}
-        <div slot="header">
-          {@render header()}
-        </div>
+        <NamedSlot name="header" content={header} />
       {/if}
     </obc-poi-vessel>

package/dist/ar/poi-button/ObcPoiButton.svelte

@@ -3,6 +3,7 @@
     export type {ObcPoiButtonLayout, ObcPoiButtonState, PoiButtonVisualState, ObcPoiButtonType, ObcPoiButtonDataItem} from '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button.js';
       import '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcPoiButtonLayout, ObcPoiButtonState, PoiButtonVisualState, ObcPoiButtonType, ObcPoiButtonDataItem} from '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button.js';
       import type { Snippet } from 'svelte';
 
@@ -44,14 +45,10 @@
       {/if}
 
       {#if header}
-        <div slot="header">
-          {@render header()}
-        </div>
+        <NamedSlot name="header" content={header} />
       {/if}
 
       {#if relation}
-        <div slot="relation">
-          {@render relation()}
-        </div>
+        <NamedSlot name="relation" content={relation} />
       {/if}
     </obc-poi-button>

package/dist/ar/poi-button/ObcPoiButtonAton.svelte

@@ -5,6 +5,7 @@ export type {ObcPoiObjectAtonType, ObcPoiObjectAtonStyle} from '@oicl/openbridge
 export type {ObcPoiObjectState} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object.js';
       import '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button-aton.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcPoiButtonLayout, ObcPoiButtonState, PoiButtonVisualState, ObcPoiButtonType, ObcPoiButtonDataItem} from '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button.js';
 import type {ObcPoiObjectAtonType, ObcPoiObjectAtonStyle} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object-aton.js';
 import type {ObcPoiObjectState} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object.js';
@@ -53,14 +54,10 @@ import type {ObcPoiObjectState} from '@oicl/openbridge-webcomponents/dist/ar/poi
       {/if}
 
       {#if header}
-        <div slot="header">
-          {@render header()}
-        </div>
+        <NamedSlot name="header" content={header} />
       {/if}
 
       {#if relation}
-        <div slot="relation">
-          {@render relation()}
-        </div>
+        <NamedSlot name="relation" content={relation} />
       {/if}
     </obc-poi-button-aton>

package/dist/ar/poi-button/ObcPoiButtonData.svelte

@@ -4,6 +4,7 @@
 export type {ObcPoiObjectStyle, ObcPoiObjectState} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object.js';
       import '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button-data.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcPoiButtonLayout, ObcPoiButtonState, PoiButtonVisualState, ObcPoiButtonType, ObcPoiButtonDataItem} from '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button.js';
 import type {ObcPoiObjectStyle, ObcPoiObjectState} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object.js';
       import type { Snippet } from 'svelte';
@@ -50,14 +51,10 @@ import type {ObcPoiObjectStyle, ObcPoiObjectState} from '@oicl/openbridge-webcom
       {/if}
 
       {#if header}
-        <div slot="header">
-          {@render header()}
-        </div>
+        <NamedSlot name="header" content={header} />
       {/if}
 
       {#if relation}
-        <div slot="relation">
-          {@render relation()}
-        </div>
+        <NamedSlot name="relation" content={relation} />
       {/if}
     </obc-poi-button-data>

package/dist/ar/poi-button/ObcPoiButtonVessel.svelte

@@ -4,6 +4,7 @@
 export type {ObcPoiObjectVesselType, ObcPoiObjectVesselStyle, ObcPoiObjectVesselState} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object-vessel.js';
       import '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button-vessel.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcPoiButtonLayout, ObcPoiButtonState, PoiButtonVisualState, ObcPoiButtonType, ObcPoiButtonDataItem} from '@oicl/openbridge-webcomponents/dist/ar/poi-button/poi-button.js';
 import type {ObcPoiObjectVesselType, ObcPoiObjectVesselStyle, ObcPoiObjectVesselState} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object-vessel.js';
       import type { Snippet } from 'svelte';
@@ -53,26 +54,18 @@ import type {ObcPoiObjectVesselType, ObcPoiObjectVesselStyle, ObcPoiObjectVessel
       {/if}
 
       {#if turnIndicator}
-        <div slot="turn-indicator">
-          {@render turnIndicator()}
-        </div>
+        <NamedSlot name="turn-indicator" content={turnIndicator} />
       {/if}
 
       {#if speedIndicator}
-        <div slot="speed-indicator">
-          {@render speedIndicator()}
-        </div>
+        <NamedSlot name="speed-indicator" content={speedIndicator} />
       {/if}
 
       {#if header}
-        <div slot="header">
-          {@render header()}
-        </div>
+        <NamedSlot name="header" content={header} />
       {/if}
 
       {#if relation}
-        <div slot="relation">
-          {@render relation()}
-        </div>
+        <NamedSlot name="relation" content={relation} />
       {/if}
     </obc-poi-button-vessel>

package/dist/ar/poi-card/ObcPoiCard.svelte

@@ -4,6 +4,7 @@
 export type {ObcPoiCardHeaderVariant} from '@oicl/openbridge-webcomponents/dist/ar/poi-card-header/poi-card-header.js';
       import '@oicl/openbridge-webcomponents/dist/ar/poi-card/poi-card.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {PoiCardClickDetail, PointerDirection} from '@oicl/openbridge-webcomponents/dist/ar/poi-card/poi-card.js';
 import type {ObcPoiCardHeaderVariant} from '@oicl/openbridge-webcomponents/dist/ar/poi-card-header/poi-card-header.js';
       import type { Snippet } from 'svelte';
@@ -81,14 +82,10 @@ import type {ObcPoiCardHeaderVariant} from '@oicl/openbridge-webcomponents/dist/
       {/if}
 
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
 
       {#if poiIcon}
-        <div slot="poi-icon">
-          {@render poiIcon()}
-        </div>
+        <NamedSlot name="poi-icon" content={poiIcon} />
       {/if}
     </obc-poi-card>

package/dist/ar/poi-card-header/ObcPoiCardHeader.svelte

@@ -3,6 +3,7 @@
     export type {ObcPoiCardHeaderVariant} from '@oicl/openbridge-webcomponents/dist/ar/poi-card-header/poi-card-header.js';
       import '@oicl/openbridge-webcomponents/dist/ar/poi-card-header/poi-card-header.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcPoiCardHeaderVariant} from '@oicl/openbridge-webcomponents/dist/ar/poi-card-header/poi-card-header.js';
       import type { Snippet } from 'svelte';
 
@@ -61,14 +62,10 @@
     use:forwardEvents={{'close-click': onCloseClick}} >
       
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
 
       {#if poiIcon}
-        <div slot="poi-icon">
-          {@render poiIcon()}
-        </div>
+        <NamedSlot name="poi-icon" content={poiIcon} />
       {/if}
     </obc-poi-card-header>

package/dist/ar/poi-controller/ObcPoiController.svelte

@@ -3,6 +3,7 @@
     export type {PoiFitMode, PoiFrame, PoiDetection, PoiKeyFn} from '@oicl/openbridge-webcomponents/dist/ar/poi-controller/poi-controller.js';
       import '@oicl/openbridge-webcomponents/dist/ar/poi-controller/poi-controller.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {PoiFitMode, PoiFrame, PoiDetection, PoiKeyFn} from '@oicl/openbridge-webcomponents/dist/ar/poi-controller/poi-controller.js';
       import type { Snippet } from 'svelte';
 
@@ -34,14 +35,10 @@
      >
       
       {#if media}
-        <div slot="media">
-          {@render media()}
-        </div>
+        <NamedSlot name="media" content={media} />
       {/if}
 
       {#if stack}
-        <div slot="stack">
-          {@render stack()}
-        </div>
+        <NamedSlot name="stack" content={stack} />
       {/if}
     </obc-poi-controller>

package/dist/ar/poi-object/ObcPoiObjectVessel.svelte

@@ -4,6 +4,7 @@
 export type {ObcPoiObjectVesselType} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object-vessel.js';
       import '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object-vessel.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcPoiObjectStyle, ObcPoiObjectState} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object.js';
 import type {ObcPoiObjectVesselType} from '@oicl/openbridge-webcomponents/dist/ar/poi-object/poi-object-vessel.js';
       import type { Snippet } from 'svelte';
@@ -38,14 +39,10 @@ import type {ObcPoiObjectVesselType} from '@oicl/openbridge-webcomponents/dist/a
       {/if}
 
       {#if turnIndicator}
-        <div slot="turn-indicator">
-          {@render turnIndicator()}
-        </div>
+        <NamedSlot name="turn-indicator" content={turnIndicator} />
       {/if}
 
       {#if speedIndicator}
-        <div slot="speed-indicator">
-          {@render speedIndicator()}
-        </div>
+        <NamedSlot name="speed-indicator" content={speedIndicator} />
       {/if}
     </obc-poi-object-vessel>

package/dist/automation/automation-badge/ObcAutomationBadge.svelte

@@ -3,6 +3,7 @@
     export type {ObcAutomationBadgeMode, ObcAutomationBadgeType} from '@oicl/openbridge-webcomponents/dist/automation/automation-badge/automation-badge.js';
       import '@oicl/openbridge-webcomponents/dist/automation/automation-badge/automation-badge.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcAutomationBadgeMode, ObcAutomationBadgeType} from '@oicl/openbridge-webcomponents/dist/automation/automation-badge/automation-badge.js';
       import type { Snippet } from 'svelte';
 
@@ -29,9 +30,7 @@
      >
       
       {#if iconSilhouette}
-        <div slot="icon-silhouette">
-          {@render iconSilhouette()}
-        </div>
+        <NamedSlot name="icon-silhouette" content={iconSilhouette} />
       {/if}
 
       {#if children}

package/dist/automation/automation-button/ObcAutomationButton.svelte

@@ -7,6 +7,7 @@ export type {AlertType} from '@oicl/openbridge-webcomponents/dist/types.js';
 export type {CircularProgressMode} from '@oicl/openbridge-webcomponents/dist/building-blocks/circular-progress/circular-progress.js';
       import '@oicl/openbridge-webcomponents/dist/automation/automation-button/automation-button.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {AutomationButtonVariant, AutomationButtonState, AutomationButtonReadoutPosition, AutomationButtonDirection, AutomationButtonPositioning, AutomationButtonOrientation} from '@oicl/openbridge-webcomponents/dist/automation/automation-button/automation-button.js';
 import type {AutomationButtonReadoutStack, AutomationButtonReadoutStackSize} from '@oicl/openbridge-webcomponents/dist/components/automation-button-readout-stack/automation-button-readout-stack.js';
 import type {ObcAlertFrameType, ObcAlertFrameThickness, ObcAlertFrameMode} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
@@ -80,56 +81,38 @@ import type {CircularProgressMode} from '@oicl/openbridge-webcomponents/dist/bui
     use:forwardEvents={{'click': onClick}} >
       
       {#if badgeTopRight}
-        <div slot="badge-top-right">
-          {@render badgeTopRight()}
-        </div>
+        <NamedSlot name="badge-top-right" content={badgeTopRight} />
       {/if}
 
       {#if badgeTopLeft}
-        <div slot="badge-top-left">
-          {@render badgeTopLeft()}
-        </div>
+        <NamedSlot name="badge-top-left" content={badgeTopLeft} />
       {/if}
 
       {#if badgeBottomLeft}
-        <div slot="badge-bottom-left">
-          {@render badgeBottomLeft()}
-        </div>
+        <NamedSlot name="badge-bottom-left" content={badgeBottomLeft} />
       {/if}
 
       {#if badgeBottomRight}
-        <div slot="badge-bottom-right">
-          {@render badgeBottomRight()}
-        </div>
+        <NamedSlot name="badge-bottom-right" content={badgeBottomRight} />
       {/if}
 
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
 
       {#if iconSilhouette}
-        <div slot="icon-silhouette">
-          {@render iconSilhouette()}
-        </div>
+        <NamedSlot name="icon-silhouette" content={iconSilhouette} />
       {/if}
 
       {#if alertIcon}
-        <div slot="alert-icon">
-          {@render alertIcon()}
-        </div>
+        <NamedSlot name="alert-icon" content={alertIcon} />
       {/if}
 
       {#if alertLabel}
-        <div slot="alert-label">
-          {@render alertLabel()}
-        </div>
+        <NamedSlot name="alert-label" content={alertLabel} />
       {/if}
 
       {#if alertTimer}
-        <div slot="alert-timer">
-          {@render alertTimer()}
-        </div>
+        <NamedSlot name="alert-timer" content={alertTimer} />
       {/if}
     </obc-automation-button>

package/dist/automation/automation-input-modal/ObcAutomationInputModal.svelte

@@ -3,6 +3,7 @@
     
       import '@oicl/openbridge-webcomponents/dist/automation/automation-input-modal/automation-input-modal.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       
       import type { Snippet } from 'svelte';
 
@@ -30,26 +31,18 @@
      >
       
       {#if header}
-        <div slot="header">
-          {@render header()}
-        </div>
+        <NamedSlot name="header" content={header} />
       {/if}
 
       {#if preview}
-        <div slot="preview">
-          {@render preview()}
-        </div>
+        <NamedSlot name="preview" content={preview} />
       {/if}
 
       {#if actionPrimary}
-        <div slot="action-primary">
-          {@render actionPrimary()}
-        </div>
+        <NamedSlot name="action-primary" content={actionPrimary} />
       {/if}
 
       {#if actionSecondary}
-        <div slot="action-secondary">
-          {@render actionSecondary()}
-        </div>
+        <NamedSlot name="action-secondary" content={actionSecondary} />
       {/if}
     </obc-automation-input-modal>

package/dist/automation/automation-tank/ObcAutomationTank.svelte

@@ -11,6 +11,7 @@ export type {AlertType} from '@oicl/openbridge-webcomponents/dist/types.js';
 export type {AutomationButtonBadgeControl, AutomationButtonBadgeAlert, AutomationButtonBadgeInterlock, AutomationButtonBadgeCommandLocked} from '@oicl/openbridge-webcomponents/dist/automation/automation-button/abstract-automation-button.js';
       import '@oicl/openbridge-webcomponents/dist/automation/automation-tank/automation-tank.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {LineMedium} from '@oicl/openbridge-webcomponents/dist/automation/index.js';
 import type {TankTrend, TankType, TankOrientation, TankChartMode} from '@oicl/openbridge-webcomponents/dist/automation/automation-tank/automation-tank.js';
 import type {TankPositioning} from '@oicl/openbridge-webcomponents/dist/automation/automation-tank/tank-positioning.js';
@@ -175,62 +176,42 @@ badgeControl?: AutomationButtonBadgeControl;
     use:forwardEvents={{'click': onClick}} >
       
       {#if badges}
-        <div slot="badges">
-          {@render badges()}
-        </div>
+        <NamedSlot name="badges" content={badges} />
       {/if}
 
       {#if tagSnippet}
-        <div slot="tag">
-          {@render tagSnippet()}
-        </div>
+        <NamedSlot name="tag" content={tagSnippet} />
       {/if}
 
       {#if readout}
-        <div slot="readout">
-          {@render readout()}
-        </div>
+        <NamedSlot name="readout" content={readout} />
       {/if}
 
       {#if maxValue}
-        <div slot="max-value">
-          {@render maxValue()}
-        </div>
+        <NamedSlot name="max-value" content={maxValue} />
       {/if}
 
       {#if unit}
-        <div slot="unit">
-          {@render unit()}
-        </div>
+        <NamedSlot name="unit" content={unit} />
       {/if}
 
       {#if currentValue}
-        <div slot="current-value">
-          {@render currentValue()}
-        </div>
+        <NamedSlot name="current-value" content={currentValue} />
       {/if}
 
       {#if rich}
-        <div slot="rich">
-          {@render rich()}
-        </div>
+        <NamedSlot name="rich" content={rich} />
       {/if}
 
       {#if alertIcon}
-        <div slot="alert-icon">
-          {@render alertIcon()}
-        </div>
+        <NamedSlot name="alert-icon" content={alertIcon} />
       {/if}
 
       {#if alertLabel}
-        <div slot="alert-label">
-          {@render alertLabel()}
-        </div>
+        <NamedSlot name="alert-label" content={alertLabel} />
       {/if}
 
       {#if alertTimer}
-        <div slot="alert-timer">
-          {@render alertTimer()}
-        </div>
+        <NamedSlot name="alert-timer" content={alertTimer} />
       {/if}
     </obc-automation-tank>