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

package/dist/integration-systems/integration-bar-dropdown/ObcIntegrationBarDropdown.svelte

@@ -3,6 +3,7 @@
     
       import '@oicl/openbridge-webcomponents/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       
       import type { Snippet } from 'svelte';
 
@@ -120,50 +121,34 @@
     use:forwardEvents={{'home-button-clicked': onHomeButtonClicked, 'link-button-clicked': onLinkButtonClicked, 'alert-button-clicked': onAlertButtonClicked, 'dimming-button-clicked': onDimmingButtonClicked, 'notification-button-clicked': onNotificationButtonClicked, 'screen-button-clicked': onScreenButtonClicked, 'user-button-clicked': onUserButtonClicked, 'system-button-clicked': onSystemButtonClicked}} >
       
       {#if vesselSelector}
-        <div slot="vessel-selector">
-          {@render vesselSelector()}
-        </div>
+        <NamedSlot name="vessel-selector" content={vesselSelector} />
       {/if}
 
       {#if statusLabel1}
-        <div slot="status-label-1">
-          {@render statusLabel1()}
-        </div>
+        <NamedSlot name="status-label-1" content={statusLabel1} />
       {/if}
 
       {#if statusIcon1}
-        <div slot="status-icon-1">
-          {@render statusIcon1()}
-        </div>
+        <NamedSlot name="status-icon-1" content={statusIcon1} />
       {/if}
 
       {#if statusLabel2}
-        <div slot="status-label-2">
-          {@render statusLabel2()}
-        </div>
+        <NamedSlot name="status-label-2" content={statusLabel2} />
       {/if}
 
       {#if statusIcon2}
-        <div slot="status-icon-2">
-          {@render statusIcon2()}
-        </div>
+        <NamedSlot name="status-icon-2" content={statusIcon2} />
       {/if}
 
       {#if statusLabel3}
-        <div slot="status-label-3">
-          {@render statusLabel3()}
-        </div>
+        <NamedSlot name="status-label-3" content={statusLabel3} />
       {/if}
 
       {#if statusIcon3}
-        <div slot="status-icon-3">
-          {@render statusIcon3()}
-        </div>
+        <NamedSlot name="status-icon-3" content={statusIcon3} />
       {/if}
 
       {#if clock}
-        <div slot="clock">
-          {@render clock()}
-        </div>
+        <NamedSlot name="clock" content={clock} />
       {/if}
     </obc-integration-bar-dropdown>

package/dist/integration-systems/integration-button/ObcIntegrationButton.svelte

@@ -3,6 +3,7 @@
     export type {IntegrationButtonReadout, IntegrationButtonVariant, IntegrationButtonType} from '@oicl/openbridge-webcomponents/dist/integration-systems/integration-button/integration-button.js';
       import '@oicl/openbridge-webcomponents/dist/integration-systems/integration-button/integration-button.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {IntegrationButtonReadout, IntegrationButtonVariant, IntegrationButtonType} from '@oicl/openbridge-webcomponents/dist/integration-systems/integration-button/integration-button.js';
       import type { Snippet } from 'svelte';
 
@@ -61,50 +62,34 @@
     use:forwardEvents={{'click': onClick}} >
       
       {#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 trailingIcon2}
-        <div slot="trailing-icon2">
-          {@render trailingIcon2()}
-        </div>
+        <NamedSlot name="trailing-icon2" content={trailingIcon2} />
       {/if}
 
       {#if label}
-        <div slot="label">
-          {@render label()}
-        </div>
+        <NamedSlot name="label" content={label} />
       {/if}
 
       {#if status}
-        <div slot="status">
-          {@render status()}
-        </div>
+        <NamedSlot name="status" content={status} />
       {/if}
 
       {#if infoLabel}
-        <div slot="info-label">
-          {@render infoLabel()}
-        </div>
+        <NamedSlot name="info-label" content={infoLabel} />
       {/if}
 
       {#if infoStatus}
-        <div slot="info-status">
-          {@render infoStatus()}
-        </div>
+        <NamedSlot name="info-status" content={infoStatus} />
       {/if}
 
       {#if integrationVesselMenu}
-        <div slot="integration-vessel-menu">
-          {@render integrationVesselMenu()}
-        </div>
+        <NamedSlot name="integration-vessel-menu" content={integrationVesselMenu} />
       {/if}
     </obc-integration-button>

package/dist/integration-systems/integration-dropdown-button/ObcIntegrationDropdownButton.svelte

@@ -3,6 +3,7 @@
     export type {ObcIntegrationDropdownButtonChangeEvent, IntegrationDropdownOption} from '@oicl/openbridge-webcomponents/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.js';
       import '@oicl/openbridge-webcomponents/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcIntegrationDropdownButtonChangeEvent, IntegrationDropdownOption} from '@oicl/openbridge-webcomponents/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.js';
       import type { Snippet } from 'svelte';
 
@@ -44,8 +45,6 @@ options?: IntegrationDropdownOption[];
     use:forwardEvents={{'change': onChange}} >
       
       {#if fleet}
-        <div slot="fleet">
-          {@render fleet()}
-        </div>
+        <NamedSlot name="fleet" content={fleet} />
       {/if}
     </obc-integration-dropdown-button>

package/dist/integration-systems/integration-fleet-button/ObcIntegrationFleetButton.svelte

@@ -3,6 +3,7 @@
     export type {IntegrationFleetButtonReadout} from '@oicl/openbridge-webcomponents/dist/integration-systems/integration-fleet-button/integration-fleet-button.js';
       import '@oicl/openbridge-webcomponents/dist/integration-systems/integration-fleet-button/integration-fleet-button.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {IntegrationFleetButtonReadout} from '@oicl/openbridge-webcomponents/dist/integration-systems/integration-fleet-button/integration-fleet-button.js';
       import type { Snippet } from 'svelte';
 
@@ -33,8 +34,6 @@
     use:forwardEvents={{'click': onClick}} >
       
       {#if alertTopicIcon}
-        <div slot="alert-topic-icon">
-          {@render alertTopicIcon()}
-        </div>
+        <NamedSlot name="alert-topic-icon" content={alertTopicIcon} />
       {/if}
     </obc-integration-fleet-button>

package/dist/integration-systems/integration-vessel-menu/ObcIntegrationVesselMenu.svelte

@@ -3,6 +3,7 @@
     
       import '@oicl/openbridge-webcomponents/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       
       import type { Snippet } from 'svelte';
 
@@ -31,20 +32,14 @@
      >
       
       {#if buttons}
-        <div slot="buttons">
-          {@render buttons()}
-        </div>
+        <NamedSlot name="buttons" content={buttons} />
       {/if}
 
       {#if content}
-        <div slot="content">
-          {@render content()}
-        </div>
+        <NamedSlot name="content" content={content} />
       {/if}
 
       {#if alarms}
-        <div slot="alarms">
-          {@render alarms()}
-        </div>
+        <NamedSlot name="alarms" content={alarms} />
       {/if}
     </obc-integration-vessel-menu>

package/dist/integration-systems/integration-vessel-selector/ObcIntegrationVesselSelector.svelte

@@ -3,6 +3,7 @@
     
       import '@oicl/openbridge-webcomponents/dist/integration-systems/integration-vessel-selector/integration-vessel-selector.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       
       import type { Snippet } from 'svelte';
 
@@ -34,14 +35,10 @@
       {/if}
 
       {#if fleet}
-        <div slot="fleet">
-          {@render fleet()}
-        </div>
+        <NamedSlot name="fleet" content={fleet} />
       {/if}
 
       {#if topbar}
-        <div slot="topbar">
-          {@render topbar()}
-        </div>
+        <NamedSlot name="topbar" content={topbar} />
       {/if}
     </obc-integration-vessel-selector>

package/dist/navigation-instruments/gauge-proportional/ObcGaugeProportional.svelte

@@ -5,6 +5,7 @@ export type {GaugeProportionalSector, GaugeProportionalAlignment, GaugeProportio
 export type {TickmarkStyle} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/watch/tickmark.js';
       import '@oicl/openbridge-webcomponents/dist/navigation-instruments/gauge-proportional/gauge-proportional.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {InstrumentState} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
 import type {GaugeProportionalSector, GaugeProportionalAlignment, GaugeProportionalPriority, GaugeProportionalAdvice} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/gauge-proportional/gauge-proportional.js';
 import type {TickmarkStyle} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/watch/tickmark.js';
@@ -113,14 +114,10 @@ animateSetpoint?: boolean;
      >
       
       {#if icon}
-        <div slot="icon">
-          {@render icon()}
-        </div>
+        <NamedSlot name="icon" content={icon} />
       {/if}
 
       {#if secondaryIcon}
-        <div slot="secondary-icon">
-          {@render secondaryIcon()}
-        </div>
+        <NamedSlot name="secondary-icon" content={secondaryIcon} />
       {/if}
     </obc-gauge-proportional>

package/dist/navigation-instruments/gauge-radial-indicator/ObcGaugeRadialIndicator.svelte

@@ -3,6 +3,7 @@
     export type {GaugeRadialIndicatorStyle} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/gauge-radial-indicator/gauge-radial-indicator.js';
       import '@oicl/openbridge-webcomponents/dist/navigation-instruments/gauge-radial-indicator/gauge-radial-indicator.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {GaugeRadialIndicatorStyle} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/gauge-radial-indicator/gauge-radial-indicator.js';
       import type { Snippet } from 'svelte';
 
@@ -33,8 +34,6 @@
      >
       
       {#if iconSnippet}
-        <div slot="icon">
-          {@render iconSnippet()}
-        </div>
+        <NamedSlot name="icon" content={iconSnippet} />
       {/if}
     </obc-gauge-radial-indicator>

package/dist/navigation-instruments/gauge-trend/ObcGaugeTrend.svelte

@@ -1,13 +1,13 @@
 
   <script lang="ts">
-    export type {ChartLineDataItem, ChartLinePoint, XAxisType, YAxisPosition, ChartLineYAxisConfig, LineMode, TimeDisplay} from '@oicl/openbridge-webcomponents/dist/building-blocks/chart-line/chart-line-base.js';
+    export type {ChartLineDataItem, ChartLinePoint, XAxisType, YAxisPosition, ChartLineYAxisConfig, ChartLineXAxisConfig, RangeLabels, LineMode, TimeDisplay} from '@oicl/openbridge-webcomponents/dist/building-blocks/chart-line/chart-line-base.js';
 export type {ChartDataset} from 'chart.js';
 export type {InstrumentState, Priority, FrameStyle, BorderRadiusPosition} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
 export type {ScaleType, FillMode} from '@oicl/openbridge-webcomponents/dist/building-blocks/bar-vertical/bar-vertical.js';
 export type {LinearAdvice} from '@oicl/openbridge-webcomponents/dist/building-blocks/instrument-linear/advice.js';
       import '@oicl/openbridge-webcomponents/dist/navigation-instruments/gauge-trend/gauge-trend.js';
       import { setProperties } from "../../util.js";
-      import type {ChartLineDataItem, ChartLinePoint, XAxisType, YAxisPosition, ChartLineYAxisConfig, LineMode, TimeDisplay} from '@oicl/openbridge-webcomponents/dist/building-blocks/chart-line/chart-line-base.js';
+      import type {ChartLineDataItem, ChartLinePoint, XAxisType, YAxisPosition, ChartLineYAxisConfig, ChartLineXAxisConfig, RangeLabels, LineMode, TimeDisplay} from '@oicl/openbridge-webcomponents/dist/building-blocks/chart-line/chart-line-base.js';
 import type {ChartDataset} from 'chart.js';
 import type {InstrumentState, Priority, FrameStyle, BorderRadiusPosition} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
 import type {ScaleType, FillMode} from '@oicl/openbridge-webcomponents/dist/building-blocks/bar-vertical/bar-vertical.js';
@@ -64,6 +64,12 @@ animateSetpoint?: boolean;
      yAxisPosition?: YAxisPosition;
      /** Multiple y-axis definitions for complex multi-axis charts. */
      yAxes?: ChartLineYAxisConfig[] | undefined;
+     /**
+      * Pinned x range (`min`/`max`) for time and number axes. Without it the axis spans exactly the data, so a window that is still filling stretches across the full width. In `minutes` display `max` is the `0min` reference.
+      *
+      * Available when `xAxisType!=category`.
+      */
+     xAxis?: ChartLineXAxisConfig | undefined;
      /** Show grid lines. */
      showGrid?: boolean;
      /**
@@ -96,6 +102,12 @@ and never wants to show axis labels (e.g. `obc-automation-tank`).
 Defaults to `true` to preserve existing behavior. Declared with `attribute: false`
 because a `true`-default boolean cannot work as an HTML boolean attribute. */
 hasLabelPadding?: boolean;
+     /**
+      * Labels kept below the 192px threshold, where the axis labels are otherwise hidden: 'y' draws min, max and (inside the range) 0 in a gutter on the y-axis side; 'x' draws the first and last x value in a bottom gutter; 'xy' both. Ignored when `hasLabelPadding` is false.
+      *
+      * Available when `hasLabelPadding==true`.
+      */
+     rangeLabels?: RangeLabels;
      /** Show point markers on data points. Default: false. */
      showPoints?: boolean;
      /** Line drawing style: 'smooth' (curved), 'straight', or 'stepped'. */

package/dist/navigation-instruments/gauge-trend/ObcGaugeTrend.svelte.d.ts

@@ -1,5 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/navigation-instruments/gauge-trend/gauge-trend.js';
-import type { ChartLineDataItem, ChartLinePoint, XAxisType, YAxisPosition, ChartLineYAxisConfig, LineMode, TimeDisplay } from '@oicl/openbridge-webcomponents/dist/building-blocks/chart-line/chart-line-base.js';
+import type { ChartLineDataItem, ChartLinePoint, XAxisType, YAxisPosition, ChartLineYAxisConfig, ChartLineXAxisConfig, RangeLabels, LineMode, TimeDisplay } from '@oicl/openbridge-webcomponents/dist/building-blocks/chart-line/chart-line-base.js';
 import type { ChartDataset } from 'chart.js';
 import type { InstrumentState, Priority, FrameStyle, BorderRadiusPosition } from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
 import type { ScaleType, FillMode } from '@oicl/openbridge-webcomponents/dist/building-blocks/bar-vertical/bar-vertical.js';
@@ -55,6 +55,12 @@ regardless of instrument state. */
     yAxisPosition?: YAxisPosition;
     /** Multiple y-axis definitions for complex multi-axis charts. */
     yAxes?: ChartLineYAxisConfig[] | undefined;
+    /**
+     * Pinned x range (`min`/`max`) for time and number axes. Without it the axis spans exactly the data, so a window that is still filling stretches across the full width. In `minutes` display `max` is the `0min` reference.
+     *
+     * Available when `xAxisType!=category`.
+     */
+    xAxis?: ChartLineXAxisConfig | undefined;
     /** Show grid lines. */
     showGrid?: boolean;
     /**
@@ -87,6 +93,12 @@ and never wants to show axis labels (e.g. `obc-automation-tank`).
 Defaults to `true` to preserve existing behavior. Declared with `attribute: false`
 because a `true`-default boolean cannot work as an HTML boolean attribute. */
     hasLabelPadding?: boolean;
+    /**
+     * Labels kept below the 192px threshold, where the axis labels are otherwise hidden: 'y' draws min, max and (inside the range) 0 in a gutter on the y-axis side; 'x' draws the first and last x value in a bottom gutter; 'xy' both. Ignored when `hasLabelPadding` is false.
+     *
+     * Available when `hasLabelPadding==true`.
+     */
+    rangeLabels?: RangeLabels;
     /** Show point markers on data points. Default: false. */
     showPoints?: boolean;
     /** Line drawing style: 'smooth' (curved), 'straight', or 'stepped'. */
@@ -213,6 +225,8 @@ declare const ObcGaugeTrend: import("svelte").Component<$$ComponentProps, {
     XAxisType: typeof XAxisType;
     YAxisPosition: typeof YAxisPosition;
     ChartLineYAxisConfig: typeof ChartLineYAxisConfig;
+    ChartLineXAxisConfig: typeof ChartLineXAxisConfig;
+    RangeLabels: typeof RangeLabels;
     LineMode: typeof LineMode;
     TimeDisplay: typeof TimeDisplay;
     ChartDataset: typeof ChartDataset;

package/dist/navigation-instruments/instrument-field/ObcInstrumentField.svelte

@@ -3,6 +3,7 @@
     export type {InstrumentFieldSize} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/instrument-field/instrument-field.js';
       import '@oicl/openbridge-webcomponents/dist/navigation-instruments/instrument-field/instrument-field.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {InstrumentFieldSize} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/instrument-field/instrument-field.js';
       import type { Snippet } from 'svelte';
 
@@ -62,8 +63,6 @@
      >
       
       {#if offValue}
-        <div slot="off-value">
-          {@render offValue()}
-        </div>
+        <NamedSlot name="off-value" content={offValue} />
       {/if}
     </obc-instrument-field>

package/dist/navigation-instruments/readout/ObcReadout.svelte

@@ -8,6 +8,7 @@ export type {AlertFrameConfig} from '@oicl/openbridge-webcomponents/dist/compone
 export type {ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutLabelOptions, ReadoutReserverOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
       import '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ReadoutValueType} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
 import type {ReadoutBlockSize, ReadoutBlockDataQuality} from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
 import type {Priority} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/types.js';
@@ -110,32 +111,22 @@ import type {ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions,
     use:forwardEvents={{'source-change': onSourceChange, 'source-flyout-click': onSourceFlyoutClick}} >
       
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
 
       {#if valueIcon}
-        <div slot="value-icon">
-          {@render valueIcon()}
-        </div>
+        <NamedSlot name="value-icon" content={valueIcon} />
       {/if}
 
       {#if setpointIcon}
-        <div slot="setpoint-icon">
-          {@render setpointIcon()}
-        </div>
+        <NamedSlot name="setpoint-icon" content={setpointIcon} />
       {/if}
 
       {#if adviceIcon}
-        <div slot="advice-icon">
-          {@render adviceIcon()}
-        </div>
+        <NamedSlot name="advice-icon" content={adviceIcon} />
       {/if}
 
       {#if srcPickerContent}
-        <div slot="src-picker-content">
-          {@render srcPickerContent()}
-        </div>
+        <NamedSlot name="src-picker-content" content={srcPickerContent} />
       {/if}
     </obc-readout>

package/dist/navigation-instruments/readout-list-item/ObcReadoutListItem.svelte

@@ -6,6 +6,7 @@ export type {ReadoutListItemPriority, ReadoutListItemStacking, ReadoutListItemCl
 export type {AlertFrameConfig} from '@oicl/openbridge-webcomponents/dist/components/alert-frame/alert-frame.js';
       import '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
       import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ReadoutValueType} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout/readout-formatters.js';
 import type {ReadoutBlockSize, ReadoutBlockDataQuality} from '@oicl/openbridge-webcomponents/dist/building-blocks/readout-block/readout-block.js';
 import type {ReadoutListItemPriority, ReadoutListItemStacking, ReadoutListItemClickable, ReadoutValueOptions, ReadoutSetpointOptions, ReadoutAdviceOptions, ReadoutLabelOptions, ReadoutReserverOptions, ReadoutSrcOptions} from '@oicl/openbridge-webcomponents/dist/navigation-instruments/readout-list-item/readout-list-item.js';
@@ -87,26 +88,18 @@ import type {AlertFrameConfig} from '@oicl/openbridge-webcomponents/dist/compone
     use:forwardEvents={{'click': onClick}} >
       
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
 
       {#if valueIcon}
-        <div slot="value-icon">
-          {@render valueIcon()}
-        </div>
+        <NamedSlot name="value-icon" content={valueIcon} />
       {/if}
 
       {#if setpointIcon}
-        <div slot="setpoint-icon">
-          {@render setpointIcon()}
-        </div>
+        <NamedSlot name="setpoint-icon" content={setpointIcon} />
       {/if}
 
       {#if adviceIcon}
-        <div slot="advice-icon">
-          {@render adviceIcon()}
-        </div>
+        <NamedSlot name="advice-icon" content={adviceIcon} />
       {/if}
     </obc-readout-list-item>

package/dist/util.d.ts

@@ -6,4 +6,24 @@ export declare function forwardEvents(node: HTMLElement, handlers: EventHandlers
     update(handlers: EventHandlers): void;
     destroy(): void;
 };
+/**
+ * `slot` value of the markers that delimit a NamedSlot region. It matches no
+ * real slot, so the markers stay unassigned and never affect layout.
+ */
+export declare const SLOT_MARKER = "svelte-slot-marker";
+export interface AssignSlotOptions {
+    name: string;
+    /** Called when the region renders text, which cannot carry a `slot`. */
+    onText: () => void;
+}
+/**
+ * Assigns the elements rendered between this start marker and the next marker
+ * to a named slot by setting their `slot` attribute, so they slot natively
+ * like the web component's documented usage. Nodes are never moved: Svelte
+ * removes blocks by walking their sibling range.
+ */
+export declare function assignSlot(start: HTMLTemplateElement, options: AssignSlotOptions): {
+    update(options: AssignSlotOptions): void;
+    destroy(): void;
+};
 export {};

package/dist/util.js

@@ -39,3 +39,45 @@ export function forwardEvents(node, handlers) {
         },
     };
 }
+/**
+ * `slot` value of the markers that delimit a NamedSlot region. It matches no
+ * real slot, so the markers stay unassigned and never affect layout.
+ */
+export const SLOT_MARKER = "svelte-slot-marker";
+const isMarker = (node) => node instanceof HTMLTemplateElement && node.slot === SLOT_MARKER;
+/**
+ * Assigns the elements rendered between this start marker and the next marker
+ * to a named slot by setting their `slot` attribute, so they slot natively
+ * like the web component's documented usage. Nodes are never moved: Svelte
+ * removes blocks by walking their sibling range.
+ */
+export function assignSlot(start, options) {
+    let current = options;
+    const assign = () => {
+        for (let node = start.nextSibling; node && !isMarker(node); node = node.nextSibling) {
+            if (node instanceof Element) {
+                if (node.slot !== current.name)
+                    node.slot = current.name;
+            }
+            else if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+                current.onText();
+                return;
+            }
+        }
+    };
+    assign();
+    // Re-assign when the snippet's top-level nodes change, e.g. an `{#if}` at
+    // the snippet root. Mutation records are delivered before the next paint.
+    const observer = new MutationObserver(assign);
+    if (start.parentNode)
+        observer.observe(start.parentNode, { childList: true });
+    return {
+        update(options) {
+            current = options;
+            assign();
+        },
+        destroy() {
+            observer.disconnect();
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-svelte",
-  "version": "2.0.0-next.150",
+  "version": "2.0.0-next.152",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",
@@ -31,7 +31,7 @@
     }
   },
   "dependencies": {
-    "@oicl/openbridge-webcomponents": "^2.0.0-next.150"
+    "@oicl/openbridge-webcomponents": "^2.0.0-next.152"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"