@agnos-ui/svelte-bootstrap 0.4.4 → 0.5.0

package/components/select/Select.svelte

@@ -1,96 +1,72 @@
-<script context="module">
+<script lang="ts" generics="Item">
 import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes, classDirective as __AgnosUISveltePreprocess__classDirective} from '@agnos-ui/svelte-headless/utils/directive';
 import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
-import { Slot } from "@agnos-ui/svelte-headless/slot";
-import { callWidgetFactory } from "../../config";
-import { createSelect } from "./select";
-</script>
 
-<script>export let open = false;
-export let filterText = void 0;
-export let selected = void 0;
-const widget = callWidgetFactory({
-  factory: createSelect,
-  widgetName: "select",
-  $$slots,
-  $$props,
-  events: {
-    onOpenChange: function(isOpen) {
-      open = isOpen;
-    },
-    onSelectedChange: (newSelection) => {
-      selected = newSelection;
-    },
-    onFilterTextChange: (value) => {
-      filterText = value;
-    }
-  }
-});
-export const api = widget.api;
-const {
-  stores: { id$, ariaLabel$, highlighted$, open$, selectedContexts$, badgeLabel$, itemLabel$, visibleItems$, className$, filterText$ },
-  state$,
-  actions: { onInput, onInputKeydown },
-  directives: {
-    floatingDirective,
-    hasFocusDirective,
-    referenceDirective,
-    inputContainerDirective,
-    badgeAttributesDirective,
-    menuAttributesDirective,
-    itemAttributesDirective
-  }
-} = widget;
-$: widget.patchChangedProps($$props);
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+	import {callWidgetFactory} from '../../config';
+	import type {SelectApi, SelectItemContext, SelectProps, SelectWidget} from './select.gen';
+	import {createSelect} from './select.gen';
+
+	let {open = $bindable(false), filterText = $bindable(), selected = $bindable(), ...props}: Partial<SelectProps<Item>> = $props();
+
+	const widget = callWidgetFactory<SelectWidget<Item>>({
+		factory: createSelect,
+		widgetName: 'select',
+		get props() {
+			return {...props, open, filterText, selected};
+		},
+		enablePatchChanged: true,
+		defaultConfig: {badgeLabel, itemLabel},
+		events: {
+			onOpenChange: function (isOpen: boolean): void {
+				open = isOpen;
+			},
+			onSelectedChange: (newSelection) => {
+				selected = newSelection;
+			},
+			onFilterTextChange: (value) => {
+				filterText = value;
+			},
+		},
+	});
+	export const api: SelectApi<Item> = widget.api;
+	const {
+		state,
+		directives: {
+			floatingDirective,
+			hasFocusDirective,
+			referenceDirective,
+			inputContainerDirective,
+			badgeAttributesDirective,
+			menuAttributesDirective,
+			itemAttributesDirective,
+			inputDirective,
+		},
+	} = widget;
 </script>
 
-<div use:referenceDirective use:__AgnosUISveltePreprocess__classDirective={"au-select dropdown border border-1 p-1 mb-3 d-block "+($className$)} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(referenceDirective, [__AgnosUISveltePreprocess__classDirective, "au-select dropdown border border-1 p-1 mb-3 d-block "+($className$)])}>
+{#snippet badgeLabel({itemContext}: SelectItemContext<Item>)}
+	{itemContext.item}
+{/snippet}
+{#snippet itemLabel({itemContext}: SelectItemContext<Item>)}
+	{itemContext.item}
+{/snippet}
+
+<div use:referenceDirective use:__AgnosUISveltePreprocess__classDirective={"au-select dropdown border border-1 p-1 mb-3 d-block "+(state.className)} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(referenceDirective, [__AgnosUISveltePreprocess__classDirective, "au-select dropdown border border-1 p-1 mb-3 d-block "+(state.className)])}>
 	<div use:hasFocusDirective use:inputContainerDirective use:__AgnosUISveltePreprocess__classDirective={"d-flex align-items-center flex-wrap gap-1"} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(hasFocusDirective, inputContainerDirective, [__AgnosUISveltePreprocess__classDirective, "d-flex align-items-center flex-wrap gap-1"])}>
-		{#each $selectedContexts$ as itemContext (itemContext.id)}
+		{#each state.selectedContexts as itemContext (itemContext.id)}
 			<div use:badgeAttributesDirective={itemContext} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([badgeAttributesDirective, itemContext])}>
-				<Slot slotContent={$badgeLabel$} props={{state: $state$, widget, itemContext}} let:component let:props>
-					<svelte:fragment slot="slot" let:props><slot name="badgeLabel" {...props} /></svelte:fragment>
-					<svelte:component this={component} {...props}>
-						<svelte:fragment slot="badgeLabel" let:itemContext let:state let:widget
-							><slot name="badgeLabel" {itemContext} {state} {widget} /></svelte:fragment
-						>
-						<svelte:fragment slot="itemLabel" let:itemContext let:state let:widget
-							><slot name="itemLabel" {itemContext} {state} {widget} /></svelte:fragment
-						>
-					</svelte:component>
-				</Slot>
+				<Slot content={state.badgeLabel} props={{state, directives: widget.directives, api: widget.api, itemContext}} />
 			</div>
 		{/each}
-		<input
-			id={$id$}
-			aria-label={$ariaLabel$}
-			type="text"
-			class="au-select-input flex-grow-1 border-0"
-			value={$filterText$}
-			aria-autocomplete="list"
-			autoCorrect="off"
-			autoCapitalize="none"
-			autoComplete="off"
-			on:input={onInput}
-			on:keydown={onInputKeydown}
-		/>
+		<input value={state.filterText} use:inputDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(inputDirective)} />
 	</div>
-	{#if $open$ && $visibleItems$.length > 0}
+	{#if state.open && state.visibleItems.length > 0}
 		<ul use:hasFocusDirective use:floatingDirective use:menuAttributesDirective use:__AgnosUISveltePreprocess__classDirective={"dropdown-menu show"} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(hasFocusDirective, floatingDirective, menuAttributesDirective, [__AgnosUISveltePreprocess__classDirective, "dropdown-menu show"])}>
-			{#each $visibleItems$ as itemContext (itemContext.id)}
-				{@const isHighlighted = itemContext === $highlighted$}
+			{#each state.visibleItems as itemContext (itemContext.id)}
+				{@const isHighlighted = itemContext === state.highlighted}
 				<li use:__AgnosUISveltePreprocess__classDirective={"dropdown-item position-relative"} class:text-bg-primary={isHighlighted} use:itemAttributesDirective={itemContext} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([itemAttributesDirective, itemContext], [__AgnosUISveltePreprocess__classDirective, "dropdown-item position-relative"])}>
-					<Slot slotContent={$itemLabel$} props={{state: $state$, widget, itemContext}} let:component let:props>
-						<svelte:fragment slot="slot" let:props><slot name="itemLabel" {...props} /></svelte:fragment>
-						<svelte:component this={component} {...props}>
-							<svelte:fragment slot="badgeLabel" let:itemContext let:state let:widget
-								><slot name="badgeLabel" {itemContext} {state} {widget} /></svelte:fragment
-							>
-							<svelte:fragment slot="itemLabel" let:itemContext let:state let:widget
-								><slot name="itemLabel" {itemContext} {state} {widget} /></svelte:fragment
-							>
-						</svelte:component>
-					</Slot>
+					<Slot content={state.itemLabel} props={{state, directives: widget.directives, api: widget.api, itemContext}} />
 				</li>
 			{/each}
 		</ul>

package/components/select/Select.svelte.d.ts

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-import type { SelectApi, SelectProps, SelectSlots } from './select';
+import type { SelectApi, SelectProps } from './select.gen';
 declare class __sveltets_Render<Item> {
-    props(): {
-        api?: SelectApi<Item> | undefined;
-    } & Partial<SelectProps<Item>>;
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
+    props(): Partial<SelectProps<Item>>;
+    events(): {};
+    slots(): {};
+    bindings(): "open" | "selected" | "filterText";
+    exports(): {
+        api: SelectApi<Item>;
     };
-    slots(): SelectSlots<Item>;
 }
-export type SelectProps_<Item> = ReturnType<__sveltets_Render<Item>['props']>;
-export type SelectEvents<Item> = ReturnType<__sveltets_Render<Item>['events']>;
-export type SelectSlots_<Item> = ReturnType<__sveltets_Render<Item>['slots']>;
-export default class Select<Item> extends SvelteComponent<SelectProps_<Item>, SelectEvents<Item>, SelectSlots_<Item>> {
-    get api(): SelectApi<Item>;
+interface $$IsomorphicComponent {
+    new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-export {};
+declare const Select: $$IsomorphicComponent;
+type Select<Item> = InstanceType<typeof Select<Item>>;
+export default Select;

package/components/select/index.d.ts

@@ -1,3 +1,3 @@
 import Select from './Select.svelte';
-export * from './select';
+export * from './select.gen';
 export { Select };

package/components/select/index.js

@@ -1,3 +1,3 @@
 import Select from './Select.svelte';
-export * from './select';
+export * from './select.gen';
 export { Select };

package/components/select/select.gen.d.ts

@@ -9,15 +9,28 @@ import type { FloatingUI } from '@agnos-ui/svelte-headless/services/floatingUI';
 declare const export_getSelectDefaultConfig: () => SelectProps<any>;
 export { export_getSelectDefaultConfig as getSelectDefaultConfig };
 /**
- * A type for the slot context of the pagination widget
+ * Interface for the slot context of the pagination widget
+ * @template Item - The type of the items in the Select component.
  */
-export type SelectContext<Item> = WidgetSlotContext<SelectWidget<Item>>;
-export type SelectItemContext<Item> = SelectContext<Item> & {
+export interface SelectContext<Item> extends WidgetSlotContext<SelectWidget<Item>> {
+}
+/**
+ * Represents the context for a select item, extending the base `SelectContext` with additional
+ * contextual data specific to an item.
+ *
+ * @template Item - The type of the item within the select context.
+ */
+export interface SelectItemContext<Item> extends SelectContext<Item> {
     /**
      * Contextual data related to an item
      */
     itemContext: ItemContext<Item>;
-};
+}
+/**
+ * Represents the state of a Select component.
+ *
+ * @template Item - The type of the items in the select component.
+ */
 export interface SelectState<Item> {
     /**
      * List of item contexts, to be displayed in the menu
@@ -121,6 +134,11 @@ export interface SelectState<Item> {
      */
     itemLabel: SlotContent<SelectItemContext<Item>>;
 }
+/**
+ * Represents the properties for the Select component.
+ *
+ * @template Item - The type of the items in the select component.
+ */
 export interface SelectProps<Item> {
     /**
      * List of available items for the dropdown
@@ -273,7 +291,12 @@ export interface SelectProps<Item> {
      */
     itemLabel: SlotContent<SelectItemContext<Item>>;
 }
-export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectActions<Item>, SelectDirectives<Item>>;
+/**
+ * Represents a Select widget component.
+ *
+ * @template Item - The type of the items that the select widget will handle.
+ */
+export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectDirectives<Item>>;
 /**
  * Creates a new select widget instance.
  * @param config - config of the modal, either as a store or as an object containing values or stores.
@@ -281,6 +304,9 @@ export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, Se
  */
 declare const export_createSelect: <Item>(config?: PropsConfig<SelectProps<Item>>) => SelectWidget<Item>;
 export { export_createSelect as createSelect };
+/**
+ * Item representation built from the items provided in parameters
+ */
 export interface ItemContext<T> {
     /**
      * Original item given in the parameters
@@ -295,6 +321,9 @@ export interface ItemContext<T> {
      */
     selected: boolean;
 }
+/**
+ * Interface representing the API for a Select component.
+ */
 export interface SelectApi<Item> {
     /**
      * Clear all the selected items
@@ -357,6 +386,9 @@ export interface SelectApi<Item> {
      */
     toggle(isOpen?: boolean): void;
 }
+/**
+ * Interface representing the directives used in the Select component.
+ */
 export interface SelectDirectives<Item> {
     /**
      * Directive to be used in the input group and the menu containers
@@ -386,28 +418,12 @@ export interface SelectDirectives<Item> {
      * A directive that applies all the necessary attributes to the dropdown item
      */
     itemAttributesDirective: Directive<ItemContext<Item>>;
-}
-export interface SelectActions<Item> {
     /**
-     * Method to be plugged to on the 'input' event. The input text will be used as the filter text.
+     * A directive to be applied to the input
      */
-    onInput: (e: {
-        target: any;
-    }) => void;
+    inputDirective: Directive;
     /**
-     * Method to be attached to the node element to close a badge on click.
-     */
-    onRemoveBadgeClick: (event: MouseEvent, item: Item) => void;
-    /**
-     * Method to be plugged to on an keydown event of the main input, in order to control the keyboard interactions with the highlighted item.
-     * It manages arrow keys to move the highlighted item, or enter to toggle the item.
-     */
-    onInputKeydown: (event: KeyboardEvent) => void;
-    /**
-     * Method to be plugged to on an keydown event of a badge container, in order to manage main actions on badges.
-     *
-     * @param event - keyboard event
-     * @param item - corresponding item
+     * A directive to be applied to a button that closes a badge
      */
-    onBadgeKeydown: (event: KeyboardEvent, item: Item) => void;
+    badgeCloseButtonDirective: Directive<ItemContext<Item>>;
 }

package/components/slider/Slider.svelte

@@ -1,48 +1,47 @@
-<script context="module">
+<script lang="ts">
 import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
 import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
-import { createSlider } from "./slider";
-import { Slot } from "@agnos-ui/svelte-headless/slot";
-import { callWidgetFactory } from "../../config";
-import SliderDefaultStructure from "./SliderDefaultStructure.svelte";
-import SliderDefaultHandle from "./SliderDefaultHandle.svelte";
-const defaultConfig = {
-  structure: SliderDefaultStructure,
-  handle: SliderDefaultHandle
-};
-</script>
 
-<script>export let values = void 0;
-const widget = callWidgetFactory({
-  factory: createSlider,
-  widgetName: "slider",
-  $$slots,
-  $$props,
-  defaultConfig,
-  events: {
-    onValuesChange: function(newValues) {
-      values = newValues;
-    }
-  }
-});
-export const api = widget.api;
-const {
-  stores: { structure$ },
-  directives: { sliderDirective },
-  state$
-} = widget;
-$: widget.patchChangedProps($$props);
-$: slotContext = { widget, state: $state$ };
+	import type {SliderContext, SliderProps, SliderSlotHandleContext, SliderSlotLabelContext} from './slider.gen';
+	import {createSlider} from './slider.gen';
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+	import {callWidgetFactory} from '../../config';
+	import SliderDefaultStructure from './SliderDefaultStructure.svelte';
+	import SliderDefaultHandle from './SliderDefaultHandle.svelte';
+
+	let {values = $bindable(), ...props}: Partial<SliderProps> = $props();
+
+	const widget = callWidgetFactory({
+		factory: createSlider,
+		widgetName: 'slider',
+		get props() {
+			return {...props, values};
+		},
+		enablePatchChanged: true,
+		defaultConfig: {structure, handle, label},
+		events: {
+			onValuesChange: function (newValues: number[]): void {
+				values = newValues;
+			},
+		},
+	});
+	const {
+		directives: {sliderDirective},
+		state,
+	} = widget;
 </script>
 
+{#snippet structure(props: SliderContext)}
+	<SliderDefaultStructure {...props} />
+{/snippet}
+{#snippet handle(props: SliderSlotHandleContext)}
+	<SliderDefaultHandle {...props} />
+{/snippet}
+{#snippet label({value}: SliderSlotLabelContext)}
+	{value}
+{/snippet}
+
 <!-- on:blur={onTouched} ?? -->
 <div use:sliderDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(sliderDirective)}>
-	<Slot slotContent={$structure$} props={slotContext} let:component let:props>
-		<svelte:fragment slot="slot" let:props><slot name="structure" {...props} /></svelte:fragment>
-		<svelte:component this={component} {...props}>
-			<svelte:fragment slot="handle" let:item let:state let:widget><slot name="handle" {item} {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="label" let:state let:value let:widget><slot name="label" {state} {value} {widget} /></svelte:fragment>
-			<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-		</svelte:component>
-	</Slot>
+	<Slot content={state.structure} props={widget} />
 </div>

package/components/slider/Slider.svelte.d.ts

@@ -1,21 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { SliderApi, SliderProps, SliderSlots } from './slider';
-declare const __propDef: {
-    props: {
-        api?: SliderApi;
-    } & Partial<SliderProps>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: SliderSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-type SliderProps_ = typeof __propDef.props;
-export { SliderProps_ as SliderProps };
-export type SliderEvents = typeof __propDef.events;
-type SliderSlots_ = typeof __propDef.slots;
-export { SliderSlots_ as SliderSlots };
-export default class Slider extends SvelteComponent<SliderProps_, SliderEvents, SliderSlots_> {
-    get api(): SliderApi;
-}
+import type { SliderProps } from './slider.gen';
+declare const Slider: import("svelte").Component<Partial<SliderProps>, {}, "values">;
+export default Slider;

package/components/slider/SliderDefaultHandle.svelte

@@ -1,8 +1,11 @@
-<script>
+<script lang="ts">
 import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
 import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
-export let item;
-export let widget;
+
+	import type {SliderSlotHandleContext} from './slider.gen';
+
+	let {item, directives}: SliderSlotHandleContext = $props();
 </script>
 
-<button use:widget.directives.handleDirective={{item}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([widget.directives.handleDirective, {item}])}> &nbsp; </button>
+<!-- svelte-ignore a11y_consider_explicit_label -->
+<button use:directives.handleDirective={{item}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.handleDirective, {item}])}> &nbsp; </button>

package/components/slider/SliderDefaultHandle.svelte.d.ts

@@ -1,17 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { SliderSlots } from './slider';
-declare const __propDef: {
-    props: any;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: SliderSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SliderDefaultHandleProps = typeof __propDef.props;
-export type SliderDefaultHandleEvents = typeof __propDef.events;
-export type SliderDefaultHandleSlots = typeof __propDef.slots;
-export default class SliderDefaultHandle extends SvelteComponent<SliderDefaultHandleProps, SliderDefaultHandleEvents, SliderDefaultHandleSlots> {
-}
-export {};
+import type { SliderSlotHandleContext } from './slider.gen';
+declare const SliderDefaultHandle: import("svelte").Component<SliderSlotHandleContext, {}, "">;
+export default SliderDefaultHandle;

package/components/slider/SliderDefaultStructure.svelte

@@ -1,96 +1,42 @@
-<script>
+<script lang="ts">
 import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
 import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
-import { Slot } from "@agnos-ui/svelte-headless/slot";
-export let state;
-export let widget;
-$: slotContext = { widget, state };
+
+	import type {SliderContext} from './slider.gen';
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+
+	let widget: SliderContext = $props();
+	let {state, directives} = widget;
 </script>
 
 {#each state.progressDisplayOptions as option}
-	<div use:widget.directives.progressDisplayDirective={{option}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([widget.directives.progressDisplayDirective, {option}])} />
+	<div use:directives.progressDisplayDirective={{option}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.progressDisplayDirective, {option}])}></div>
 {/each}
-<div use:widget.directives.clickableAreaDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.clickableAreaDirective)} />
+<div use:directives.clickableAreaDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.clickableAreaDirective)}></div>
 {#if state.showMinMaxLabels}
-	<div use:widget.directives.minLabelDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.minLabelDirective)}>
-		<Slot slotContent={state.label} props={{value: state.min, ...slotContext}} let:component let:props>
-			<svelte:fragment slot="slot" let:props><slot name="label" {...props} /></svelte:fragment>
-			<svelte:component this={component} {...props}>
-				<svelte:fragment slot="handle" let:item let:state let:widget><slot name="handle" {item} {state} {widget} /></svelte:fragment>
-				<svelte:fragment slot="label" let:state let:value let:widget><slot name="label" {state} {value} {widget} /></svelte:fragment>
-				<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-			</svelte:component>
-		</Slot>
+	<div use:directives.minLabelDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.minLabelDirective)}>
+		<Slot content={state.label} props={{value: state.min, ...widget}} />
 	</div>
-	<div use:widget.directives.maxLabelDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.maxLabelDirective)}>
-		<Slot slotContent={state.label} props={{value: state.max, ...slotContext}} let:component let:props>
-			<svelte:fragment slot="slot" let:props><slot name="label" {...props} /></svelte:fragment>
-			<svelte:component this={component} {...props}>
-				<svelte:fragment slot="handle" let:item let:state let:widget><slot name="handle" {item} {state} {widget} /></svelte:fragment>
-				<svelte:fragment slot="label" let:state let:value let:widget><slot name="label" {state} {value} {widget} /></svelte:fragment>
-				<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-			</svelte:component>
-		</Slot>
+	<div use:directives.maxLabelDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.maxLabelDirective)}>
+		<Slot content={state.label} props={{value: state.max, ...widget}} />
 	</div>
 {/if}
 {#if state.showValueLabels && state.combinedLabelDisplay}
-	<div use:widget.directives.combinedHandleLabelDisplayDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.combinedHandleLabelDisplayDirective)}>
+	<div use:directives.combinedHandleLabelDisplayDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.combinedHandleLabelDisplayDirective)}>
 		{#if state.rtl}
-			<Slot slotContent={state.label} props={{value: state.sortedValues[1], ...slotContext}} let:component let:props>
-				<svelte:fragment slot="slot" let:props><slot name="label" {...props} /></svelte:fragment>
-				<svelte:component this={component} {...props}>
-					<svelte:fragment slot="handle" let:item let:state let:widget><slot name="handle" {item} {state} {widget} /></svelte:fragment>
-					<svelte:fragment slot="label" let:state let:value let:widget><slot name="label" {state} {value} {widget} /></svelte:fragment>
-					<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-				</svelte:component>
-			</Slot> -
-			<Slot slotContent={state.label} props={{value: state.sortedValues[0], ...slotContext}} let:component let:props>
-				<svelte:fragment slot="slot" let:props><slot name="label" {...props} /></svelte:fragment>
-				<svelte:component this={component} {...props}>
-					<svelte:fragment slot="handle" let:item let:state let:widget><slot name="handle" {item} {state} {widget} /></svelte:fragment>
-					<svelte:fragment slot="label" let:state let:value let:widget><slot name="label" {state} {value} {widget} /></svelte:fragment>
-					<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-				</svelte:component>
-			</Slot>
+			<Slot content={state.label} props={{value: state.sortedValues[1], ...widget}} /> -
+			<Slot content={state.label} props={{value: state.sortedValues[0], ...widget}} />
 		{:else}
-			<Slot slotContent={state.label} props={{value: state.sortedValues[0], ...slotContext}} let:component let:props>
-				<svelte:fragment slot="slot" let:props><slot name="label" {...props} /></svelte:fragment>
-				<svelte:component this={component} {...props}>
-					<svelte:fragment slot="handle" let:item let:state let:widget><slot name="handle" {item} {state} {widget} /></svelte:fragment>
-					<svelte:fragment slot="label" let:state let:value let:widget><slot name="label" {state} {value} {widget} /></svelte:fragment>
-					<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-				</svelte:component>
-			</Slot> -
-			<Slot slotContent={state.label} props={{value: state.sortedValues[1], ...slotContext}} let:component let:props>
-				<svelte:fragment slot="slot" let:props><slot name="label" {...props} /></svelte:fragment>
-				<svelte:component this={component} {...props}>
-					<svelte:fragment slot="handle" let:item let:state let:widget><slot name="handle" {item} {state} {widget} /></svelte:fragment>
-					<svelte:fragment slot="label" let:state let:value let:widget><slot name="label" {state} {value} {widget} /></svelte:fragment>
-					<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-				</svelte:component>
-			</Slot>
+			<Slot content={state.label} props={{value: state.sortedValues[0], ...widget}} /> -
+			<Slot content={state.label} props={{value: state.sortedValues[1], ...widget}} />
 		{/if}
 	</div>
 {/if}
 {#each state.sortedHandles as item, i (item.id)}
-	<Slot slotContent={state.handle} props={{item, ...slotContext}} let:component let:props>
-		<svelte:fragment slot="slot" let:props><slot name="handle" {...props} /></svelte:fragment>
-		<svelte:component this={component} {...props}>
-			<svelte:fragment slot="handle" let:item let:state let:widget><slot name="handle" {item} {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="label" let:state let:value let:widget><slot name="label" {state} {value} {widget} /></svelte:fragment>
-			<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-		</svelte:component>
-	</Slot>
+	<Slot content={state.handle} props={{item, ...widget}} />
 	{#if state.showValueLabels && !state.combinedLabelDisplay}
-		<div use:widget.directives.handleLabelDisplayDirective={{index: i}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([widget.directives.handleLabelDisplayDirective, {index: i}])}>
-			<Slot slotContent={state.label} props={{value: state.values[i], ...slotContext}} let:component let:props>
-				<svelte:fragment slot="slot" let:props><slot name="label" {...props} /></svelte:fragment>
-				<svelte:component this={component} {...props}>
-					<svelte:fragment slot="handle" let:item let:state let:widget><slot name="handle" {item} {state} {widget} /></svelte:fragment>
-					<svelte:fragment slot="label" let:state let:value let:widget><slot name="label" {state} {value} {widget} /></svelte:fragment>
-					<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-				</svelte:component>
-			</Slot>
+		<div use:directives.handleLabelDisplayDirective={{index: i}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.handleLabelDisplayDirective, {index: i}])}>
+			<Slot content={state.label} props={{value: state.values[i], ...widget}} />
 		</div>
 	{/if}
 {/each}

package/components/slider/SliderDefaultStructure.svelte.d.ts

@@ -1,17 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { SliderSlots } from './slider';
-declare const __propDef: {
-    props: WidgetSlotContext<Widget<import("./slider.gen").SliderProps, import("./slider.gen").SliderState, import("./slider.gen").SliderApi, import("./slider.gen").SliderActions, import("./slider.gen").SliderDirectives>>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: SliderSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SliderDefaultStructureProps = typeof __propDef.props;
-export type SliderDefaultStructureEvents = typeof __propDef.events;
-export type SliderDefaultStructureSlots = typeof __propDef.slots;
-export default class SliderDefaultStructure extends SvelteComponent<SliderDefaultStructureProps, SliderDefaultStructureEvents, SliderDefaultStructureSlots> {
-}
-export {};
+import type { SliderContext } from './slider.gen';
+declare const SliderDefaultStructure: import("svelte").Component<SliderContext, {}, "">;
+export default SliderDefaultStructure;

package/components/slider/index.d.ts

@@ -1,3 +1,3 @@
 import Slider from './Slider.svelte';
-export * from './slider';
+export * from './slider.gen';
 export { Slider };

package/components/slider/index.js

@@ -1,3 +1,3 @@
 import Slider from './Slider.svelte';
-export * from './slider';
+export * from './slider.gen';
 export { Slider };