@agnos-ui/svelte-bootstrap 0.4.4 → 0.5.0

package/components/modal/modal.gen.d.ts

@@ -7,7 +7,18 @@ import type { TransitionFn } from '@agnos-ui/svelte-headless/services/transition
  */
 declare const export_getModalDefaultConfig: () => ModalProps<any>;
 export { export_getModalDefaultConfig as getModalDefaultConfig };
-export type ModalContext<Data> = WidgetSlotContext<ModalWidget<Data>>;
+/**
+ * Represents the context for a modal component.
+ *
+ * @template Data - The type of data associated with the modal.
+ */
+export interface ModalContext<Data> extends WidgetSlotContext<ModalWidget<Data>> {
+}
+/**
+ * Represents the state of a modal component.
+ *
+ * @template Data - The type of the data associated with the modal.
+ */
 export interface ModalState<Data> {
     /**
      * Whether the backdrop is fully hidden. This can be true either because {@link ModalProps.backdrop|backdrop} is false or
@@ -99,6 +110,11 @@ export interface ModalState<Data> {
      */
     fullscreen: boolean;
 }
+/**
+ * Interface representing the properties for a modal component.
+ *
+ * @template Data - The type of data that the modal will handle.
+ */
 export interface ModalProps<Data> {
     /**
      * The transition to use for the backdrop behind the modal (if present).
@@ -244,6 +260,11 @@ export interface ModalProps<Data> {
      */
     fullscreen: boolean;
 }
+/**
+ * Interface representing the API for a modal component.
+ *
+ * @template Data - The type of data associated with the modal.
+ */
 export interface ModalApi<Data> {
     /**
      * Method to change some modal properties.
@@ -263,7 +284,12 @@ export interface ModalApi<Data> {
      */
     open(): Promise<any>;
 }
-export type ModalWidget<Data> = Widget<ModalProps<Data>, ModalState<Data>, ModalApi<Data>, ModalActions, ModalDirectives>;
+/**
+ * Represents a modal widget with specific data type.
+ *
+ * @template Data - The type of data that the modal widget will handle.
+ */
+export type ModalWidget<Data> = Widget<ModalProps<Data>, ModalState<Data>, ModalApi<Data>, ModalDirectives>;
 /**
  * Creates a new modal widget instance.
  * @param config - config of the modal, either as a store or as an object containing values or stores.
@@ -283,6 +309,9 @@ export { export_modalOutsideClick as modalOutsideClick };
  */
 declare const export_modalCloseButtonClick: typeof modalCloseButtonClick;
 export { export_modalCloseButtonClick as modalCloseButtonClick };
+/**
+ * Type of the parameter of {@link ModalProps.onBeforeClose|onBeforeClose}.
+ */
 export interface ModalBeforeCloseEvent {
     /**
      * Result of the modal, which is the value passed to the {@link ModalApi.close|close} method
@@ -296,21 +325,9 @@ export interface ModalBeforeCloseEvent {
      */
     cancel: boolean;
 }
-export interface ModalActions {
-    /**
-     * Action to be called when the user clicks on the close button. It closes the modal with the {@link modalCloseButtonClick} result.
-     * @param event - mouse event
-     */
-    closeButtonClick(event: Pick<MouseEvent, never>): void;
-    /**
-     * Action to be called when the user clicks on the modal DOM element (which is supposed to have the size of the full viewport).
-     * If the click is not done on a descendant of the modal DOM element, it is considered to be done outside the modal
-     * and, depending on the value of the {@link ModalProps.closeOnOutsideClick|closeOnOutsideClick} prop, the modal is or isn't closed
-     * (with the {@link modalOutsideClick} result).
-     * @param event - mouse event
-     */
-    modalClick(event: Pick<MouseEvent, 'target' | 'currentTarget'>): void;
-}
+/**
+ * Directives of the modal widget.
+ */
 export interface ModalDirectives {
     /**
      * Directive to put on the modal DOM element.
@@ -333,7 +350,7 @@ export interface ModalDirectives {
      */
     closeButtonDirective: Directive;
     /**
-     * Directive to apply to the dialog element when using the native [HTMLDialogElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement)
+     * Directive to apply to the dialog element when using the native {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement | HTMLDialogElement}
      */
     dialogDirective: Directive;
 }

package/components/modal/modalService.d.ts

@@ -1,4 +1,22 @@
-import type { ModalProps } from './modal';
+import type { ModalProps } from './modal.gen';
+/**
+ * Opens a modal dialog with the specified options.
+ *
+ * @template Data - The type of data that the modal will handle.
+ * @param {Partial<ModalProps<Data>>} options - The options to configure the modal.
+ * @param {Object} [context] - Optional context to pass to the modal.
+ * @param {Map<any, any>} [context.context] - A map of context values to pass to the modal.
+ * @returns {Promise<any>} A promise that resolves when the modal is closed.
+ *
+ * @example
+ * ```typescript
+ * const result = await openModal<MyDataType>({
+ *   title: 'My Modal Title',
+ *   content: 'This is the content of the modal.'
+ * });
+ * console.log(result);
+ * ```
+ */
 export declare function openModal<Data>(options: Partial<ModalProps<Data>>, { context }?: {
     context?: Map<any, any>;
 }): Promise<any>;

package/components/modal/modalService.js

@@ -1,7 +1,26 @@
+import { mount, unmount } from 'svelte';
 import Modal from './Modal.svelte';
+/**
+ * Opens a modal dialog with the specified options.
+ *
+ * @template Data - The type of data that the modal will handle.
+ * @param {Partial<ModalProps<Data>>} options - The options to configure the modal.
+ * @param {Object} [context] - Optional context to pass to the modal.
+ * @param {Map<any, any>} [context.context] - A map of context values to pass to the modal.
+ * @returns {Promise<any>} A promise that resolves when the modal is closed.
+ *
+ * @example
+ * ```typescript
+ * const result = await openModal<MyDataType>({
+ *   title: 'My Modal Title',
+ *   content: 'This is the content of the modal.'
+ * });
+ * console.log(result);
+ * ```
+ */
 export async function openModal(options, { context } = {}) {
     const target = document.createElement('div');
-    const component = new Modal({
+    const component = mount(Modal, {
         target,
         props: options,
         context,
@@ -10,6 +29,6 @@ export async function openModal(options, { context } = {}) {
         return await component.api.open();
     }
     finally {
-        component.$destroy();
+        unmount(component);
     }
 }

package/components/pagination/Pagination.svelte

@@ -1,52 +1,44 @@
-<script context="module">import { createPagination } from "./pagination";
-import { toSlotContextWidget } from "@agnos-ui/svelte-headless/types";
-import { Slot } from "@agnos-ui/svelte-headless/slot";
-import { callWidgetFactory } from "../../config";
-import PaginationDefaultPages from "./PaginationDefaultPages.svelte";
-import PaginationDefaultStructure from "./PaginationDefaultStructure.svelte";
-const defaultConfig = {
-  structure: PaginationDefaultStructure,
-  pagesDisplay: PaginationDefaultPages
-};
-</script>
+<script lang="ts">
+	import type {PaginationContext, PaginationNumberContext, PaginationProps} from './pagination.gen';
+	import {createPagination} from './pagination.gen';
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+	import {callWidgetFactory} from '../../config';
+	import PaginationDefaultPages from './PaginationDefaultPages.svelte';
+	import PaginationDefaultStructure from './PaginationDefaultStructure.svelte';
+
+	let {page = $bindable(), ...props}: Partial<PaginationProps> = $props();
 
-<script>export let page = void 0;
-const widget = callWidgetFactory({
-  factory: createPagination,
-  widgetName: "pagination",
-  $$slots,
-  $$props,
-  defaultConfig,
-  events: {
-    onPageChange: (value) => {
-      page = value;
-    }
-  }
-});
-export const api = widget.api;
-const {
-  stores: { structure$, ariaLabel$ },
-  state$
-} = widget;
-$: widget.patchChangedProps($$props);
-$: slotContext = { widget: toSlotContextWidget(widget), state: $state$ };
+	const widget = callWidgetFactory({
+		factory: createPagination,
+		widgetName: 'pagination',
+		get props() {
+			return {...props, page};
+		},
+		enablePatchChanged: true,
+		defaultConfig: {
+			structure,
+			pagesDisplay,
+			numberLabel,
+		},
+		events: {
+			onPageChange: (value: number) => {
+				page = value;
+			},
+		},
+	});
 </script>
 
+{#snippet structure(props: PaginationContext)}
+	<PaginationDefaultStructure {...props} />
+{/snippet}
+{#snippet pagesDisplay(props: PaginationContext)}
+	<PaginationDefaultPages {...props} />
+{/snippet}
+{#snippet numberLabel({displayedPage}: PaginationNumberContext)}
+	{displayedPage}
+{/snippet}
+
 <!-- Should we put nav here ? how to custom the class of ul in this case ?-->
-<nav aria-label={$ariaLabel$}>
-	<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="ellipsisLabel" let:state let:widget><slot name="ellipsisLabel" {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="firstPageLabel" let:state let:widget><slot name="firstPageLabel" {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="lastPageLabel" let:state let:widget><slot name="lastPageLabel" {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="nextPageLabel" let:state let:widget><slot name="nextPageLabel" {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="numberLabel" let:displayedPage let:state let:widget
-				><slot name="numberLabel" {displayedPage} {state} {widget} /></svelte:fragment
-			>
-			<svelte:fragment slot="pagesDisplay" let:state let:widget><slot name="pagesDisplay" {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="previousPageLabel" let:state let:widget><slot name="previousPageLabel" {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-		</svelte:component>
-	</Slot>
+<nav aria-label={widget.state.ariaLabel}>
+	<Slot content={widget.state.structure} props={widget} />
 </nav>

package/components/pagination/Pagination.svelte.d.ts

@@ -1,21 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { PaginationApi, PaginationProps, PaginationSlots } from './pagination';
-declare const __propDef: {
-    props: {
-        api?: PaginationApi;
-    } & Partial<PaginationProps>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: PaginationSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-type PaginationProps_ = typeof __propDef.props;
-export { PaginationProps_ as PaginationProps };
-export type PaginationEvents = typeof __propDef.events;
-type PaginationSlots_ = typeof __propDef.slots;
-export { PaginationSlots_ as PaginationSlots };
-export default class Pagination extends SvelteComponent<PaginationProps_, PaginationEvents, PaginationSlots_> {
-    get api(): PaginationApi;
-}
+import type { PaginationProps } from './pagination.gen';
+declare const Pagination: import("svelte").Component<Partial<PaginationProps>, {}, "page">;
+export default Pagination;

package/components/pagination/PaginationDefaultPages.svelte

@@ -1,56 +1,26 @@
-<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;
+
+	import type {PaginationContext} from './pagination.gen';
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+
+	let widget: PaginationContext = $props();
+	let {state, directives} = widget;
 </script>
 
-{#each state.pages as page, i}
+{#each state.pages as page}
 	<li class="page-item" class:active={page === state.page} class:disabled={page === -1 || state.disabled}>
 		{#if page === -1}
 			<div class="page-link au-ellipsis" aria-hidden="true">
-				<Slot slotContent={state.ellipsisLabel} props={{state, widget}} let:component let:props>
-					<svelte:fragment slot="slot" let:props><slot name="ellipsisLabel" {...props} /></svelte:fragment>
-					<svelte:component this={component} {...props}>
-						<svelte:fragment slot="ellipsisLabel" let:state let:widget><slot name="ellipsisLabel" {state} {widget} /></svelte:fragment>
-						<svelte:fragment slot="firstPageLabel" let:state let:widget><slot name="firstPageLabel" {state} {widget} /></svelte:fragment>
-						<svelte:fragment slot="lastPageLabel" let:state let:widget><slot name="lastPageLabel" {state} {widget} /></svelte:fragment>
-						<svelte:fragment slot="nextPageLabel" let:state let:widget><slot name="nextPageLabel" {state} {widget} /></svelte:fragment>
-						<svelte:fragment slot="numberLabel" let:displayedPage let:state let:widget
-							><slot name="numberLabel" {displayedPage} {state} {widget} /></svelte:fragment
-						>
-						<svelte:fragment slot="pagesDisplay" let:state let:widget><slot name="pagesDisplay" {state} {widget} /></svelte:fragment>
-						<svelte:fragment slot="previousPageLabel" let:state let:widget><slot name="previousPageLabel" {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.ellipsisLabel} props={widget} />
 			</div>
 			<span class="visually-hidden">{state.ariaEllipsisLabel}</span>
 		{:else}
-			<!-- svelte-ignore a11y-missing-attribute -->
-			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:widget.directives.pageLink={{page}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([widget.directives.pageLink, {page}], [__AgnosUISveltePreprocess__classDirective, "page-link"])}
-				><!-- Remove the strange formatting with https://github.com/sveltejs/svelte/issues/3080
-				 --><Slot
-					slotContent={state.numberLabel}
-					props={{state, widget, displayedPage: page}}
-					let:component
-					let:props
-				>
-					<svelte:fragment slot="slot" let:props><slot name="numberLabel" {...props} /></svelte:fragment>
-					<svelte:component this={component} {...props}>
-						<svelte:fragment slot="ellipsisLabel" let:state let:widget><slot name="ellipsisLabel" {state} {widget} /></svelte:fragment>
-						<svelte:fragment slot="firstPageLabel" let:state let:widget><slot name="firstPageLabel" {state} {widget} /></svelte:fragment>
-						<svelte:fragment slot="lastPageLabel" let:state let:widget><slot name="lastPageLabel" {state} {widget} /></svelte:fragment>
-						<svelte:fragment slot="nextPageLabel" let:state let:widget><slot name="nextPageLabel" {state} {widget} /></svelte:fragment>
-						<svelte:fragment slot="numberLabel" let:displayedPage let:state let:widget
-							><slot name="numberLabel" {displayedPage} {state} {widget} /></svelte:fragment
-						>
-						<svelte:fragment slot="pagesDisplay" let:state let:widget><slot name="pagesDisplay" {state} {widget} /></svelte:fragment>
-						<svelte:fragment slot="previousPageLabel" let:state let:widget><slot name="previousPageLabel" {state} {widget} /></svelte:fragment>
-						<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-					</svelte:component>
-				</Slot>{#if state.page === page}<span class="visually-hidden">{state.activeLabel}</span>{/if}
+			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:directives.pageLink={{page}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.pageLink, {page}], [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
+				<Slot content={state.numberLabel} props={{...widget, displayedPage: page}} />{#if state.page === page}
+					<span class="visually-hidden">{state.activeLabel}</span>
+				{/if}
 			</a>
 		{/if}
 	</li>

package/components/pagination/PaginationDefaultPages.svelte.d.ts

@@ -1,17 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { PaginationSlots } from './pagination';
-declare const __propDef: {
-    props: WidgetSlotContext<Widget<import("./pagination.gen").PaginationProps, import("./pagination.gen").PaginationState, import("./pagination.gen").PaginationApi, import("./pagination.gen").PaginationActions, import("./pagination.gen").PaginationDirectives>>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: PaginationSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PaginationDefaultPagesProps = typeof __propDef.props;
-export type PaginationDefaultPagesEvents = typeof __propDef.events;
-export type PaginationDefaultPagesSlots = typeof __propDef.slots;
-export default class PaginationDefaultPages extends SvelteComponent<PaginationDefaultPagesProps, PaginationDefaultPagesEvents, PaginationDefaultPagesSlots> {
-}
-export {};
+import type { PaginationContext } from './pagination.gen';
+declare const PaginationDefaultPages: import("svelte").Component<PaginationContext, {}, "">;
+export default PaginationDefaultPages;

package/components/pagination/PaginationDefaultStructure.svelte

@@ -1,121 +1,50 @@
-<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;
-$: slotContext = { widget, state };
-$: sizeClass = state.size ? `pagination-${state.size}` : "";
+
+	import type {PaginationContext} from './pagination.gen';
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+
+	let widget: PaginationContext = $props();
+	let {state, directives} = widget;
+
+	let sizeClass = $derived(state.size ? `pagination-${state.size}` : '');
 </script>
 
 <ul class="au-pagination pagination {sizeClass} {state.className}">
 	{#if state.boundaryLinks}
 		<li class="page-item" class:disabled={state.previousDisabled}>
-			<!-- svelte-ignore a11y-missing-attribute -->
-			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:widget.directives.pageFirst {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.pageFirst, [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
+			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:directives.pageFirst {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.pageFirst, [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
 				<span aria-hidden="true">
-					<Slot slotContent={state.firstPageLabel} props={slotContext} let:component let:props>
-						<svelte:fragment slot="slot" let:props><slot name="firstPageLabel" {...props} /></svelte:fragment>
-						<svelte:component this={component} {...props}>
-							<svelte:fragment slot="ellipsisLabel" let:state let:widget><slot name="ellipsisLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="firstPageLabel" let:state let:widget><slot name="firstPageLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="lastPageLabel" let:state let:widget><slot name="lastPageLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="nextPageLabel" let:state let:widget><slot name="nextPageLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="numberLabel" let:displayedPage let:state let:widget
-								><slot name="numberLabel" {displayedPage} {state} {widget} /></svelte:fragment
-							>
-							<svelte:fragment slot="pagesDisplay" let:state let:widget><slot name="pagesDisplay" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="previousPageLabel" let:state let:widget><slot name="previousPageLabel" {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.firstPageLabel} props={widget} />
 				</span>
 			</a>
 		</li>
 	{/if}
 	{#if state.directionLinks}
 		<li class="page-item" class:disabled={state.previousDisabled}>
-			<!-- svelte-ignore a11y-missing-attribute -->
-			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:widget.directives.pagePrev {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.pagePrev, [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
+			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:directives.pagePrev {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.pagePrev, [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
 				<span aria-hidden="true">
-					<Slot slotContent={state.previousPageLabel} props={slotContext} let:component let:props>
-						<svelte:fragment slot="slot" let:props><slot name="previousPageLabel" {...props} /></svelte:fragment>
-						<svelte:component this={component} {...props}>
-							<svelte:fragment slot="ellipsisLabel" let:state let:widget><slot name="ellipsisLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="firstPageLabel" let:state let:widget><slot name="firstPageLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="lastPageLabel" let:state let:widget><slot name="lastPageLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="nextPageLabel" let:state let:widget><slot name="nextPageLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="numberLabel" let:displayedPage let:state let:widget
-								><slot name="numberLabel" {displayedPage} {state} {widget} /></svelte:fragment
-							>
-							<svelte:fragment slot="pagesDisplay" let:state let:widget><slot name="pagesDisplay" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="previousPageLabel" let:state let:widget><slot name="previousPageLabel" {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.previousPageLabel} props={widget} />
 				</span>
 			</a>
 		</li>
 	{/if}
-	<Slot slotContent={state.pagesDisplay} props={slotContext} let:component let:props>
-		<svelte:fragment slot="slot" let:props><slot name="pagesDisplay" {...props} /></svelte:fragment>
-		<svelte:component this={component} {...props}>
-			<svelte:fragment slot="ellipsisLabel" let:state let:widget><slot name="ellipsisLabel" {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="firstPageLabel" let:state let:widget><slot name="firstPageLabel" {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="lastPageLabel" let:state let:widget><slot name="lastPageLabel" {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="nextPageLabel" let:state let:widget><slot name="nextPageLabel" {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="numberLabel" let:displayedPage let:state let:widget
-				><slot name="numberLabel" {displayedPage} {state} {widget} /></svelte:fragment
-			>
-			<svelte:fragment slot="pagesDisplay" let:state let:widget><slot name="pagesDisplay" {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="previousPageLabel" let:state let:widget><slot name="previousPageLabel" {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.pagesDisplay} props={widget} />
 	{#if state.directionLinks}
 		<li class="page-item" class:disabled={state.nextDisabled}>
-			<!-- svelte-ignore a11y-missing-attribute -->
-			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:widget.directives.pageNext {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.pageNext, [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
+			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:directives.pageNext {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.pageNext, [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
 				<span aria-hidden="true">
-					<Slot slotContent={state.nextPageLabel} props={slotContext} let:component let:props>
-						<svelte:fragment slot="slot" let:props><slot name="nextPageLabel" {...props} /></svelte:fragment>
-						<svelte:component this={component} {...props}>
-							<svelte:fragment slot="ellipsisLabel" let:state let:widget><slot name="ellipsisLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="firstPageLabel" let:state let:widget><slot name="firstPageLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="lastPageLabel" let:state let:widget><slot name="lastPageLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="nextPageLabel" let:state let:widget><slot name="nextPageLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="numberLabel" let:displayedPage let:state let:widget
-								><slot name="numberLabel" {displayedPage} {state} {widget} /></svelte:fragment
-							>
-							<svelte:fragment slot="pagesDisplay" let:state let:widget><slot name="pagesDisplay" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="previousPageLabel" let:state let:widget><slot name="previousPageLabel" {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.nextPageLabel} props={widget} />
 				</span>
 			</a>
 		</li>
 	{/if}
 	{#if state.boundaryLinks}
 		<li class="page-item" class:disabled={state.nextDisabled}>
-			<!-- svelte-ignore a11y-missing-attribute -->
-			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:widget.directives.pageLast {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.pageLast, [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
+			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:directives.pageLast {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.pageLast, [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
 				<span aria-hidden="true">
-					<Slot slotContent={state.lastPageLabel} props={slotContext} let:component let:props>
-						<svelte:fragment slot="slot" let:props><slot name="lastPageLabel" {...props} /></svelte:fragment>
-						<svelte:component this={component} {...props}>
-							<svelte:fragment slot="ellipsisLabel" let:state let:widget><slot name="ellipsisLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="firstPageLabel" let:state let:widget><slot name="firstPageLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="lastPageLabel" let:state let:widget><slot name="lastPageLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="nextPageLabel" let:state let:widget><slot name="nextPageLabel" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="numberLabel" let:displayedPage let:state let:widget
-								><slot name="numberLabel" {displayedPage} {state} {widget} /></svelte:fragment
-							>
-							<svelte:fragment slot="pagesDisplay" let:state let:widget><slot name="pagesDisplay" {state} {widget} /></svelte:fragment>
-							<svelte:fragment slot="previousPageLabel" let:state let:widget><slot name="previousPageLabel" {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.lastPageLabel} props={widget} />
 				</span>
 			</a>
 		</li>

package/components/pagination/PaginationDefaultStructure.svelte.d.ts

@@ -1,17 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { PaginationSlots } from './pagination';
-declare const __propDef: {
-    props: WidgetSlotContext<Widget<import("./pagination.gen").PaginationProps, import("./pagination.gen").PaginationState, import("./pagination.gen").PaginationApi, import("./pagination.gen").PaginationActions, import("./pagination.gen").PaginationDirectives>>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: PaginationSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PaginationDefaultStructureProps = typeof __propDef.props;
-export type PaginationDefaultStructureEvents = typeof __propDef.events;
-export type PaginationDefaultStructureSlots = typeof __propDef.slots;
-export default class PaginationDefaultStructure extends SvelteComponent<PaginationDefaultStructureProps, PaginationDefaultStructureEvents, PaginationDefaultStructureSlots> {
-}
-export {};
+import type { PaginationContext } from './pagination.gen';
+declare const PaginationDefaultStructure: import("svelte").Component<PaginationContext, {}, "">;
+export default PaginationDefaultStructure;

package/components/pagination/index.d.ts

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

package/components/pagination/index.js

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