@agnos-ui/svelte-bootstrap 0.4.3 → 0.5.0-next.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/@agnos-ui/svelte-bootstrap)](https://www.npmjs.com/package/@agnos-ui/svelte-bootstrap)
 
-[Bootstrap](https://getbootstrap.com/)-based widget library for [Svelte](https://svelte.dev/).
+[Bootstrap](https://getbootstrap.com/)-based component library for [Svelte](https://svelte.dev/).
 
 ## Installation
 
@@ -12,4 +12,4 @@ npm install @agnos-ui/svelte-bootstrap
 
 ## Usage
 
-Please check [our demo site](https://amadeusitgroup.github.io/AgnosUI/latest/) to see all the available widgets and how to use them.
+Please check [our demo site](https://www.agnosui.dev/latest/) to see all the available components and how to use them.

package/components/accordion/Accordion.svelte

@@ -1,23 +1,25 @@
-<script>
+<script lang="ts">
 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 { callWidgetFactory } from "../../config";
-import { createAccordion, setAccordionApi } from "./accordion";
-const widget = callWidgetFactory({
-  factory: createAccordion,
-  widgetName: "accordion",
-  $$slots,
-  $$props,
-  events: {}
-});
-export const api = widget.api;
-const {
-  directives: { accordionDirective }
-} = widget;
-setAccordionApi(widget.api);
-$: widget.patchChangedProps($$props);
+
+	import type {AccordionApi, AccordionProps} from './accordion';
+	import type {Snippet} from 'svelte';
+	import {callWidgetFactory} from '../../config';
+	import {createAccordion, setAccordionApi} from './accordion';
+
+	let {children, ...props}: Partial<AccordionProps> & {children: Snippet} = $props();
+
+	const {directives, api: accordionApi} = callWidgetFactory({
+		factory: createAccordion,
+		widgetName: 'accordion',
+		props,
+		enablePatchChanged: true,
+	});
+	export const api: AccordionApi = accordionApi;
+
+	setAccordionApi(accordionApi);
 </script>
 
-<div use:__AgnosUISveltePreprocess__classDirective={"accordion"} use:accordionDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(accordionDirective, [__AgnosUISveltePreprocess__classDirective, "accordion"])}>
-	<slot />
+<div use:__AgnosUISveltePreprocess__classDirective={"accordion"} use:directives.accordionDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.accordionDirective, [__AgnosUISveltePreprocess__classDirective, "accordion"])}>
+	{@render children()}
 </div>

package/components/accordion/Accordion.svelte.d.ts

@@ -1,23 +1,8 @@
-import { SvelteComponent } from "svelte";
-import type { AccordionApi, AccordionProps, AccordionSlots } from './accordion';
-declare const __propDef: {
-    props: {
-        api?: AccordionApi;
-    } & Partial<AccordionProps>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: Record<string, never>;
-    } & AccordionSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-type AccordionProps_ = typeof __propDef.props;
-export { AccordionProps_ as AccordionProps };
-export type AccordionEvents = typeof __propDef.events;
-type AccordionSlots_ = typeof __propDef.slots;
-export { AccordionSlots_ as AccordionSlots };
-export default class Accordion extends SvelteComponent<AccordionProps_, AccordionEvents, AccordionSlots_> {
-    get api(): AccordionApi;
-}
+import type { AccordionApi, AccordionProps } from './accordion';
+import type { Snippet } from 'svelte';
+declare const Accordion: import("svelte").Component<Partial<AccordionProps> & {
+    children: Snippet;
+}, {
+    api: AccordionApi;
+}, "">;
+export default Accordion;

package/components/accordion/Item.svelte

@@ -1,51 +1,47 @@
-<script context="module">
+<script lang="ts">
 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 { toSlotContextWidget } from "@agnos-ui/svelte-headless/types";
-import { Slot } from "@agnos-ui/svelte-headless/slot";
-import { callWidgetFactory } from "../../config";
-import { onMount } from "svelte";
-import ItemDefaultStructure from "./ItemDefaultStructure.svelte";
-import { getAccordionApi } from "./accordion";
-const defaultConfig = {
-  structure: ItemDefaultStructure
-};
-</script>
 
-<script>const accordionApi = getAccordionApi();
-const { registerItem } = accordionApi;
-export let visible = void 0;
-const widget = callWidgetFactory({
-  factory: registerItem,
-  $$slots,
-  $$props,
-  defaultConfig,
-  events: {
-    onVisibleChange: (event) => {
-      visible = event;
-    }
-  }
-});
-const {
-  stores: { structure$ },
-  directives: { itemDirective },
-  state$
-} = widget;
-export const api = widget.api;
-$: widget.patchChangedProps($$props);
-$: slotContext = { widget: toSlotContextWidget(widget), state: $state$ };
-onMount(() => {
-  widget.api.initDone();
-});
+	import type {AccordionItemApi, AccordionItemContext, AccordionItemProps, AccordionItemWidget} from './accordion';
+	import type {WidgetFactory} from '@agnos-ui/svelte-headless/types';
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+	import {callWidgetFactory} from '../../config';
+	import {onMount} from 'svelte';
+	import ItemDefaultStructure from './ItemDefaultStructure.svelte';
+	import {getAccordionApi} from './accordion';
+
+	const accordionApi = getAccordionApi();
+	const {registerItem} = accordionApi;
+
+	let {visible = $bindable(), ...props}: Partial<AccordionItemProps> = $props();
+	const widget = callWidgetFactory({
+		factory: registerItem as WidgetFactory<AccordionItemWidget>,
+		get props() {
+			return {...props, visible};
+		},
+		enablePatchChanged: true,
+		defaultConfig: {structure},
+		events: {
+			onVisibleChange: (event) => {
+				visible = event;
+			},
+		},
+	});
+	const {
+		state,
+		directives: {itemDirective},
+	} = widget;
+	export const api: AccordionItemApi = widget.api;
+
+	onMount(() => {
+		widget.api.initDone();
+	});
 </script>
 
+{#snippet structure(props: AccordionItemContext)}
+	<ItemDefaultStructure {...props} />
+{/snippet}
+
 <div use:__AgnosUISveltePreprocess__classDirective={"accordion-item"} use:itemDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(itemDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-item"])}>
-	<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 let:state let:widget><slot {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {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/accordion/Item.svelte.d.ts

@@ -1,20 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { AccordionItemApi, AccordionItemProps, AccordionItemSlots } from './accordion';
-declare const __propDef: {
-    props: {
-        api?: AccordionItemApi;
-    } & Partial<AccordionItemProps>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: AccordionItemSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ItemProps = typeof __propDef.props;
-export type ItemEvents = typeof __propDef.events;
-export type ItemSlots = typeof __propDef.slots;
-export default class Item extends SvelteComponent<ItemProps, ItemEvents, ItemSlots> {
-    get api(): AccordionItemApi;
-}
-export {};
+import type { AccordionItemApi, AccordionItemProps } from './accordion';
+declare const Item: import("svelte").Component<Partial<AccordionItemProps>, {
+    api: AccordionItemApi;
+}, "visible">;
+export default Item;

package/components/accordion/ItemDefaultStructure.svelte

@@ -1,37 +1,27 @@
-<script>
+<script lang="ts">
 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";
-export let state;
-export let widget;
-const re = new RegExp("^h[1-6]$");
-$: slotContext = { widget, state };
-$: headingTag = re.test(state.headingTag) ? state.headingTag : "h2";
+
+	import type {AccordionItemContext} from './accordion';
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+
+	let widget: AccordionItemContext = $props();
+	const {state, directives} = widget;
+
+	const re = new RegExp('^h[1-6]$');
+
+	let headingTag = $derived(re.test(state.headingTag) ? state.headingTag : 'h2');
 </script>
 
-<svelte:element this={headingTag} use:__AgnosUISveltePreprocess__classDirective={"accordion-header"} use:slotContext.widget.directives.headerDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(slotContext.widget.directives.headerDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-header"])}>
-	<button use:slotContext.widget.directives.buttonDirective use:__AgnosUISveltePreprocess__classDirective={"accordion-button"} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(slotContext.widget.directives.buttonDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-button"])}>
-		<Slot slotContent={state.header} props={slotContext} let:component let:props>
-			<svelte:fragment slot="slot" let:props><slot name="header" {...props} /></svelte:fragment>
-			<svelte:component this={component} {...props}>
-				<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
-				<svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {widget} /></svelte:fragment>
-				<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-			</svelte:component>
-		</Slot>
+<svelte:element this={headingTag} use:__AgnosUISveltePreprocess__classDirective={"accordion-header"} use:directives.headerDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.headerDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-header"])}>
+	<button use:directives.buttonDirective use:__AgnosUISveltePreprocess__classDirective={"accordion-button"} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.buttonDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-button"])}>
+		<Slot content={state.header} props={widget} />
 	</button>
 </svelte:element>
 {#if state.shouldBeInDOM}
-	<div use:__AgnosUISveltePreprocess__classDirective={"accordion-collapse"} use:widget.directives.bodyContainerDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.bodyContainerDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-collapse"])}>
-		<div use:__AgnosUISveltePreprocess__classDirective={"accordion-body"} use:widget.directives.bodyDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.bodyDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-body"])}>
-			<Slot slotContent={state.children} props={slotContext} let:component let:props>
-				<svelte:fragment slot="slot" let:props><slot {...props} /></svelte:fragment>
-				<svelte:component this={component} {...props}>
-					<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
-					<svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {widget} /></svelte:fragment>
-					<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-				</svelte:component>
-			</Slot>
+	<div use:__AgnosUISveltePreprocess__classDirective={"accordion-collapse"} use:directives.bodyContainerDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.bodyContainerDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-collapse"])}>
+		<div use:__AgnosUISveltePreprocess__classDirective={"accordion-body"} use:directives.bodyDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.bodyDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-body"])}>
+			<Slot content={state.children} props={widget} />
 		</div>
 	</div>
 {/if}

package/components/accordion/ItemDefaultStructure.svelte.d.ts

@@ -1,17 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { AccordionItemSlots } from './accordion';
-declare const __propDef: {
-    props: WidgetSlotContext<Widget<import("./accordion.gen").AccordionItemProps, import("./accordion.gen").AccordionItemState, import("./accordion.gen").AccordionItemApi, import("./accordion.gen").AccordionItemActions, import("./accordion.gen").AccordionItemDirectives>>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: AccordionItemSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ItemDefaultStructureProps = typeof __propDef.props;
-export type ItemDefaultStructureEvents = typeof __propDef.events;
-export type ItemDefaultStructureSlots = typeof __propDef.slots;
-export default class ItemDefaultStructure extends SvelteComponent<ItemDefaultStructureProps, ItemDefaultStructureEvents, ItemDefaultStructureSlots> {
-}
-export {};
+import type { AccordionItemContext } from './accordion';
+declare const ItemDefaultStructure: import("svelte").Component<AccordionItemContext, {}, "">;
+export default ItemDefaultStructure;

package/components/accordion/accordion.d.ts

@@ -1,9 +1,14 @@
-import type { WidgetPropsSlots } from '@agnos-ui/svelte-headless/types';
-import type { AccordionApi, AccordionItemProps, AccordionProps } from './accordion.gen';
+import type { AccordionApi } from './accordion.gen';
 export * from './accordion.gen';
-export interface AccordionSlots extends WidgetPropsSlots<AccordionProps> {
-}
-export interface AccordionItemSlots extends WidgetPropsSlots<AccordionItemProps> {
-}
+/**
+ * Sets the Accordion API in the context.
+ *
+ * @param accordionApi - The Accordion API to be set in the context.
+ */
 export declare function setAccordionApi(accordionApi: AccordionApi): void;
+/**
+ * Retrieves the Accordion API from the Svelte context.
+ *
+ * @returns {AccordionApi} The Accordion API instance.
+ */
 export declare function getAccordionApi(): AccordionApi;

package/components/accordion/accordion.gen.d.ts

@@ -6,7 +6,14 @@ import type { TransitionFn } from '@agnos-ui/svelte-headless/services/transition
  */
 declare const export_getAccordionDefaultConfig: () => AccordionProps;
 export { export_getAccordionDefaultConfig as getAccordionDefaultConfig };
-export type AccordionItemContext = WidgetSlotContext<AccordionItemWidget>;
+/**
+ * Represents the context for an accordion item within the accordion component.
+ */
+export interface AccordionItemContext extends WidgetSlotContext<AccordionItemWidget> {
+}
+/**
+ * Represents the state of an Accordion component.
+ */
 export interface AccordionState {
     /**
      * Array containing all the accordion-items contained in the accordion.
@@ -28,6 +35,9 @@ export interface AccordionState {
      */
     itemStructure: SlotContent<AccordionItemContext>;
 }
+/**
+ * Represents the state of an AccordionItem component.
+ */
 export interface AccordionProps {
     /**
      * The transition to use for the accordion-item body-container when the accordion-item is toggled.
@@ -131,7 +141,13 @@ export interface AccordionProps {
      */
     itemStructure: SlotContent<AccordionItemContext>;
 }
-export type AccordionWidget = Widget<AccordionProps, AccordionState, AccordionApi, object, AccordionDirectives>;
+/**
+ * Represents an Accordion widget type.
+ */
+export type AccordionWidget = Widget<AccordionProps, AccordionState, AccordionApi, AccordionDirectives>;
+/**
+ * Represents the state of an accordion item, extending the core item state and additional properties specific to the accordion item.
+ */
 export interface AccordionItemState {
     /**
      * If `true` the content of the accordion-item collapse should be in DOM. Its value depends on the
@@ -200,6 +216,9 @@ export interface AccordionItemState {
      */
     header: SlotContent<AccordionItemContext>;
 }
+/**
+ * Represents the properties for an Accordion item component.
+ */
 export interface AccordionItemProps {
     /**
      * If `true`, accordion-item will be animated.
@@ -289,7 +308,10 @@ export interface AccordionItemProps {
      */
     header: SlotContent<AccordionItemContext>;
 }
-export type AccordionItemWidget = Widget<AccordionItemProps, AccordionItemState, AccordionItemApi, AccordionItemActions, AccordionItemDirectives>;
+/**
+ * Represents a widget for an accordion item.
+ */
+export type AccordionItemWidget = Widget<AccordionItemProps, AccordionItemState, AccordionItemApi, AccordionItemDirectives>;
 /**
  * Create an AccordionItemWidget with given config props
  * @param config - an optional AccordionItem config
@@ -315,6 +337,9 @@ export { export_createAccordion as createAccordion };
  */
 declare const export_factoryCreateAccordion: (itemFactory?: WidgetFactory<AccordionItemWidget>, accordionItemProps?: string[], accordionConfig?: AccordionProps, accordionValidator?: ConfigValidator<AccordionProps>) => WidgetFactory<AccordionWidget>;
 export { export_factoryCreateAccordion as factoryCreateAccordion };
+/**
+ * Interface representing the API for an accordion component.
+ */
 export interface AccordionApi {
     /**
      * Given the itemId, will expand the corresponding accordion-item.
@@ -349,18 +374,18 @@ export interface AccordionApi {
      */
     registerItem(itemConfig?: PropsConfig<AccordionItemProps>): AccordionItemWidget;
 }
+/**
+ * Interface representing the directives used in the Accordion component.
+ */
 export interface AccordionDirectives {
     /**
      * Directive to put on the accordion DOM element
      */
     accordionDirective: Directive;
 }
-export interface AccordionItemActions {
-    /**
-     * Action to be called when the user clicks on the accordion-item button. If the accordion-item is disabled nothing will happen.
-     */
-    click(): void;
-}
+/**
+ * Interface representing the API for an accordion item.
+ */
 export interface AccordionItemApi {
     /**
      * It will collapse the accordion-item.
@@ -379,6 +404,9 @@ export interface AccordionItemApi {
      */
     initDone(): void;
 }
+/**
+ * Interface representing the directives used in an accordion item.
+ */
 export interface AccordionItemDirectives {
     /**
      * Directive to use in special cases, if the accordion header does not use a button element to control the collapsing.

package/components/accordion/accordion.js

@@ -2,9 +2,19 @@ export * from './accordion.gen';
 // context
 import { getContext, setContext } from 'svelte';
 const contextInjectionKey = Symbol('accordion-api');
+/**
+ * Sets the Accordion API in the context.
+ *
+ * @param accordionApi - The Accordion API to be set in the context.
+ */
 export function setAccordionApi(accordionApi) {
     setContext(contextInjectionKey, accordionApi);
 }
+/**
+ * Retrieves the Accordion API from the Svelte context.
+ *
+ * @returns {AccordionApi} The Accordion API instance.
+ */
 export function getAccordionApi() {
     return getContext(contextInjectionKey);
 }

package/components/alert/Alert.svelte

@@ -1,50 +1,46 @@
-<script context="module">
+<script lang="ts">
 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 { createAlert } from "./alert";
-import { callWidgetFactory } from "../../config";
-import AlertDefaultStructure from "./AlertDefaultStructure.svelte";
-const defaultConfig = {
-  structure: AlertDefaultStructure
-};
-</script>
 
-<script>const widget = callWidgetFactory({
-  factory: createAlert,
-  widgetName: "alert",
-  $$slots,
-  $$props,
-  defaultConfig,
-  events: {
-    onVisibleChange: (event) => {
-      visible = event;
-    }
-  }
-});
-export let visible = void 0;
-export const api = widget.api;
-const {
-  stores: { structure$, hidden$ },
-  directives: { transitionDirective },
-  state$
-} = widget;
-$: widget.patchChangedProps($$props);
-$: slotContext = { widget, state: $state$ };
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+	import {type AlertContext, createAlert, type AlertApi, type AlertProps} from './alert.gen';
+	import {callWidgetFactory} from '../../config';
+	import AlertDefaultStructure from './AlertDefaultStructure.svelte';
+
+	let {visible = $bindable(), ...props}: Partial<AlertProps> = $props();
+
+	const widget = callWidgetFactory({
+		factory: createAlert,
+		widgetName: 'alert',
+		get props() {
+			return {...props, visible};
+		},
+		enablePatchChanged: true,
+		defaultConfig: {structure},
+		events: {
+			onVisibleChange: (event) => {
+				visible = event;
+			},
+		},
+	});
+	export const api: AlertApi = widget.api;
+
+	const {
+		state,
+		directives: {transitionDirective},
+	} = widget;
 </script>
 
-{#if !$hidden$}
+{#snippet structure(props: AlertContext)}
+	<AlertDefaultStructure {...props} />
+{/snippet}
+
+{#if !state.hidden}
 	<div
 		role="alert"
-		use:__AgnosUISveltePreprocess__classDirective={"au-alert alert alert-"+($state$.type)+" "+($state$.className)+" "+($state$.dismissible ? 'alert-dismissible' : '')}
-		use:transitionDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(transitionDirective, [__AgnosUISveltePreprocess__classDirective, "au-alert alert alert-"+($state$.type)+" "+($state$.className)+" "+($state$.dismissible ? 'alert-dismissible' : '')])}
+		use:__AgnosUISveltePreprocess__classDirective={"au-alert alert alert-"+(state.type)+" "+(state.className)+" "+(state.dismissible ? 'alert-dismissible' : '')}
+		use:transitionDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(transitionDirective, [__AgnosUISveltePreprocess__classDirective, "au-alert alert alert-"+(state.type)+" "+(state.className)+" "+(state.dismissible ? 'alert-dismissible' : '')])}
 	>
-		<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 let:state let:widget><slot {state} {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>
 {/if}

package/components/alert/Alert.svelte.d.ts

@@ -1,21 +1,5 @@
-import { SvelteComponent } from "svelte";
-import { type AlertApi, type AlertProps, type AlertSlots } from './alert';
-declare const __propDef: {
-    props: {
-        api?: AlertApi;
-    } & Partial<AlertProps>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: AlertSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-type AlertProps_ = typeof __propDef.props;
-export { AlertProps_ as AlertProps };
-export type AlertEvents = typeof __propDef.events;
-type AlertSlots_ = typeof __propDef.slots;
-export { AlertSlots_ as AlertSlots };
-export default class Alert extends SvelteComponent<AlertProps_, AlertEvents, AlertSlots_> {
-    get api(): AlertApi;
-}
+import { type AlertApi, type AlertProps } from './alert.gen';
+declare const Alert: import("svelte").Component<Partial<AlertProps>, {
+    api: AlertApi;
+}, "visible">;
+export default Alert;

package/components/alert/AlertDefaultStructure.svelte

@@ -1,18 +1,14 @@
-<script>import { Slot } from "@agnos-ui/svelte-headless/slot";
-export let state;
-export let widget;
-$: slotContext = { widget, state };
+<script lang="ts">
+	import type {AlertContext} from './alert.gen';
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+
+	let widget: AlertContext = $props();
+	let state = widget.state;
 </script>
 
 <div class="alert-body">
-	<Slot slotContent={state.children} props={slotContext} let:component let:props>
-		<svelte:fragment slot="slot" let:props><slot {...props} /></svelte:fragment>
-		<svelte:component this={component} {...props}>
-			<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-		</svelte:component>
-	</Slot>
+	<Slot content={state.children} props={widget} />
 </div>
 {#if state.dismissible}
-	<button type="button" class="btn-close" on:click={() => widget.api.close()} aria-label={state.ariaCloseButtonLabel} />
+	<button type="button" class="btn-close" onclick={() => widget.api.close()} aria-label={state.ariaCloseButtonLabel}></button>
 {/if}

package/components/alert/AlertDefaultStructure.svelte.d.ts

@@ -1,17 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { AlertSlots } from './alert';
-declare const __propDef: {
-    props: WidgetSlotContext<Widget<import("./alert.gen").AlertProps, import("./alert.gen").AlertState, import("./alert.gen").AlertApi, object, import("./alert.gen").AlertDirectives>>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: AlertSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type AlertDefaultStructureProps = typeof __propDef.props;
-export type AlertDefaultStructureEvents = typeof __propDef.events;
-export type AlertDefaultStructureSlots = typeof __propDef.slots;
-export default class AlertDefaultStructure extends SvelteComponent<AlertDefaultStructureProps, AlertDefaultStructureEvents, AlertDefaultStructureSlots> {
-}
-export {};
+import type { AlertContext } from './alert.gen';
+declare const AlertDefaultStructure: import("svelte").Component<AlertContext, {}, "">;
+export default AlertDefaultStructure;