@agnos-ui/svelte-bootstrap 0.8.0-next.0 → 0.8.0

package/components/accordion/Item.svelte

@@ -13,6 +13,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 	const accordionApi = getAccordionApi();
 	const {registerItem} = accordionApi;
 
+	const id = $props.id();
 	let {visible = $bindable(), ...props}: Partial<AccordionItemProps> = $props();
 	const widget = callWidgetFactory({
 		factory: registerItem as WidgetFactory<AccordionItemWidget>,
@@ -20,7 +21,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 			return {...props, visible};
 		},
 		enablePatchChanged: true,
-		defaultConfig: {structure},
+		defaultConfig: {structure, id},
 		events: {
 			onVisibleChange: (event) => {
 				visible = event;

package/components/carousel/Carousel.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" generics="SlideData extends {id: string;}">
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+
+	import type {CarouselProps, CarouselApi, CarouselContext} from './carousel.gen';
+	import {createCarousel} from './carousel.gen';
+	import {callWidgetFactory} from '../../config';
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+	import CarouselDefaultNavigation from './CarouselDefaultNavigation.svelte';
+	import CarouselDefaultStructure from './CarouselDefaultStructure.svelte';
+
+	let props: Partial<CarouselProps<SlideData>> = $props();
+
+	const widget = callWidgetFactory({
+		factory: createCarousel<SlideData>,
+		widgetName: 'collapse',
+		props,
+		enablePatchChanged: true,
+		defaultConfig: {
+			structure,
+			navigation,
+		},
+	});
+	export const api: CarouselApi = widget.api;
+</script>
+
+{#snippet structure(props: CarouselContext<SlideData>)}
+	<CarouselDefaultStructure {...props} />
+{/snippet}
+{#snippet navigation(props: CarouselContext<SlideData>)}
+	<CarouselDefaultNavigation {...props} />
+{/snippet}
+
+<div use:widget.directives.root {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.root)}>
+	<Slot content={widget.state.structure} props={widget} />
+</div>

package/components/carousel/Carousel.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { CarouselProps, CarouselApi } from './carousel.gen';
+declare class __sveltets_Render<SlideData extends {
+    id: string;
+}> {
+    props(): Partial<CarouselProps<SlideData>>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {
+        api: CarouselApi;
+    };
+}
+interface $$IsomorphicComponent {
+    new <SlideData extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<SlideData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<SlideData>['props']>, ReturnType<__sveltets_Render<SlideData>['events']>, ReturnType<__sveltets_Render<SlideData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<SlideData>['bindings']>;
+    } & ReturnType<__sveltets_Render<SlideData>['exports']>;
+    <SlideData extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<SlideData>['props']> & {}): ReturnType<__sveltets_Render<SlideData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Carousel: $$IsomorphicComponent;
+type Carousel<SlideData extends {
+    id: string;
+}> = InstanceType<typeof Carousel<SlideData>>;
+export default Carousel;

package/components/carousel/CarouselDefaultNavigation.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" generics="SlideData extends {id: string;}">
+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 type {CarouselContext} from './carousel.gen';
+
+	let {state, directives}: CarouselContext<SlideData> = $props();
+</script>
+
+{#if state.showNavigationArrows}
+	{#if state.canScrollPrev}
+		{@const prevBtnClassPrefix = state.direction === 'rtl' ? 'carousel-control-next' : 'carousel-control-prev'}
+		<!-- svelte-ignore a11y_consider_explicit_label -->
+		<button use:__AgnosUISveltePreprocess__classDirective={(prevBtnClassPrefix)} use:directives.scrollPrev {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.scrollPrev, [__AgnosUISveltePreprocess__classDirective, (prevBtnClassPrefix)])}>
+			<span class="{prevBtnClassPrefix}-icon"></span>
+		</button>
+	{/if}
+	{#if state.canScrollNext}
+		{@const nextBtnClassPrefix = state.direction === 'ltr' ? 'carousel-control-next' : 'carousel-control-prev'}
+		<!-- svelte-ignore a11y_consider_explicit_label -->
+		<button use:__AgnosUISveltePreprocess__classDirective={(nextBtnClassPrefix)} use:directives.scrollNext {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.scrollNext, [__AgnosUISveltePreprocess__classDirective, (nextBtnClassPrefix)])}>
+			<span class="{nextBtnClassPrefix}-icon"></span>
+		</button>
+	{/if}
+{/if}
+{#if state.showNavigationIndicators}
+	<div use:__AgnosUISveltePreprocess__classDirective={"carousel-indicators"} use:directives.tabList {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.tabList, [__AgnosUISveltePreprocess__classDirective, "carousel-indicators"])}>
+		{#each state.slidesData as { id }, index (id)}
+			<!-- svelte-ignore a11y_consider_explicit_label -->
+			<button data-bs-target use:__AgnosUISveltePreprocess__classDirective={([state.selectedScrollSnap === index && 'active'])} use:directives.tabIndicator={{index, id}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.tabIndicator, {index, id}], [__AgnosUISveltePreprocess__classDirective, ([state.selectedScrollSnap === index && 'active'])])}></button>
+		{/each}
+	</div>
+{/if}

package/components/carousel/CarouselDefaultNavigation.svelte.d.ts

@@ -0,0 +1,25 @@
+declare class __sveltets_Render<SlideData extends {
+    id: string;
+}> {
+    props(): WidgetSlotContext<Widget<import("./carousel.gen").CarouselProps<SlideData_1>, import("./carousel.gen").CarouselState<SlideData_1>, import("./carousel.gen").CarouselApi, import("./carousel.gen").CarouselDirectives>>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <SlideData extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<SlideData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<SlideData>['props']>, ReturnType<__sveltets_Render<SlideData>['events']>, ReturnType<__sveltets_Render<SlideData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<SlideData>['bindings']>;
+    } & ReturnType<__sveltets_Render<SlideData>['exports']>;
+    <SlideData extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<SlideData>['props']> & {}): ReturnType<__sveltets_Render<SlideData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CarouselDefaultNavigation: $$IsomorphicComponent;
+type CarouselDefaultNavigation<SlideData extends {
+    id: string;
+}> = InstanceType<typeof CarouselDefaultNavigation<SlideData>>;
+export default CarouselDefaultNavigation;

package/components/carousel/CarouselDefaultStructure.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" generics="SlideData extends {id: string;}">
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+
+	import type {CarouselContext} from './carousel.gen';
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+
+	let widget: CarouselContext<SlideData> = $props();
+	let {state, directives} = widget;
+</script>
+
+<Slot content={state.navigation} props={widget} />
+<div use:directives.container {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.container)}>
+	{#each state.slidesData as slideData, index (slideData.id)}
+		<div use:directives.slide={{index, id: slideData.id}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.slide, {index, id: slideData.id}])}>
+			<Slot content={state.slide} props={{...slideData, ...widget}} />
+		</div>
+	{/each}
+</div>

package/components/carousel/CarouselDefaultStructure.svelte.d.ts

@@ -0,0 +1,25 @@
+declare class __sveltets_Render<SlideData extends {
+    id: string;
+}> {
+    props(): WidgetSlotContext<Widget<import("./carousel.gen").CarouselProps<SlideData_1>, import("./carousel.gen").CarouselState<SlideData_1>, import("./carousel.gen").CarouselApi, import("./carousel.gen").CarouselDirectives>>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <SlideData extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<SlideData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<SlideData>['props']>, ReturnType<__sveltets_Render<SlideData>['events']>, ReturnType<__sveltets_Render<SlideData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<SlideData>['bindings']>;
+    } & ReturnType<__sveltets_Render<SlideData>['exports']>;
+    <SlideData extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<SlideData>['props']> & {}): ReturnType<__sveltets_Render<SlideData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CarouselDefaultStructure: $$IsomorphicComponent;
+type CarouselDefaultStructure<SlideData extends {
+    id: string;
+}> = InstanceType<typeof CarouselDefaultStructure<SlideData>>;
+export default CarouselDefaultStructure;

package/components/carousel/carousel.gen.d.ts

@@ -0,0 +1,358 @@
+import type { PropsConfig, WidgetSlotContext, SlotContent, Directive, Widget } from '@agnos-ui/svelte-headless/types';
+import type { EmblaPluginType, EmblaPluginsType, EmblaCarouselType } from 'embla-carousel';
+/**
+ * Retrieve a shallow copy of the default Carousel config
+ * @returns the default Carousel config
+ */
+declare const export_getCarouselDefaultConfig: () => CarouselProps<any>;
+export { export_getCarouselDefaultConfig as getCarouselDefaultConfig };
+/**
+ * Create a Carousel with given config props
+ *
+ * @template SlideData - The type of the data for each slide.
+ * @param config - an optional carousel config
+ * @returns a CarouselWidget
+ */
+declare const export_createCarousel: <SlideData extends {
+    id: string;
+}>(config?: PropsConfig<CarouselProps<SlideData>>) => CarouselWidget<SlideData>;
+export { export_createCarousel as createCarousel };
+/**
+ * Represents the context for a carousel.
+ *
+ * @template SlideData - The type of data used by each slide in the carousel.
+ */
+export type CarouselContext<SlideData extends {
+    id: string;
+}> = WidgetSlotContext<CarouselWidget<SlideData>>;
+/**
+ * Represents the context for a carousel slide.
+ *
+ * @template SlideData - The type of data used by each slide in the carousel.
+ */
+export type CarouselSlideContext<SlideData extends {
+    id: string;
+}> = WidgetSlotContext<CarouselWidget<SlideData>> & SlideData;
+/**
+ * Represents the state of a carousel component.
+ *
+ * @template SlideData - The type of data used by each slide in the carousel.
+ */
+export interface CarouselState<SlideData extends {
+    id: string;
+}> {
+    /**
+     * is the carousel currently scrolling
+     */
+    scrolling: boolean;
+    /**
+     * can carousel scroll to previous slide
+     */
+    canScrollPrev: boolean;
+    /**
+     * can carousel scroll to next slide
+     */
+    canScrollNext: boolean;
+    /**
+     * selected scroll snap
+     */
+    selectedScrollSnap: number;
+    /**
+     * is the carousel initialized
+     */
+    initialized: boolean;
+    /**
+     * If `true`, 'previous' and 'next' navigation arrows will be visible.
+     */
+    showNavigationArrows: boolean;
+    /**
+     * If `true`, navigation indicators at the bottom of the slide will be visible.
+     */
+    showNavigationIndicators: boolean;
+    /**
+     * Choose content direction between `ltr` and `rtl`
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#direction}
+     * @defaultValue `'ltr'`
+     */
+    direction: 'ltr' | 'rtl';
+    /**
+     * CSS classes to be applied on the widget main container
+     *
+     * @defaultValue `''`
+     */
+    className: string;
+    /**
+     * Class name to apply to the container of the carousel.
+     *
+     * @defaultValue `''`
+     */
+    containerClass: string;
+    /**
+     * Class name to apply to each slide in the carousel.
+     *
+     * @defaultValue `''`
+     */
+    slideClass: string | ((slideContext: {
+        id: string;
+        index: number;
+        active: boolean;
+    }) => string);
+    /**
+     * The data for each slide in the carousel.
+     *
+     * @defaultValue `[]`
+     */
+    slidesData: SlideData[];
+    /**
+     * The structure of the carousel.
+     *
+     * @defaultValue `undefined`
+     */
+    structure: SlotContent<CarouselContext<SlideData>>;
+    /**
+     * The navigation layer of the carousel.
+     *
+     * @defaultValue `undefined`
+     */
+    navigation: SlotContent<CarouselContext<SlideData>>;
+    /**
+     * The content of each slide in the carousel.
+     *
+     * @defaultValue `undefined`
+     */
+    slide: SlotContent<CarouselSlideContext<SlideData>>;
+    /**
+     * The aria-live attribute value for the carousel container.
+     *
+     * @defaultValue `'polite'`
+     */
+    ariaLive: string;
+}
+/**
+ * Interface representing the properties for a carousel component.
+ *
+ * @template SlideData - The type of data used by each slide in the carousel.
+ */
+export interface CarouselProps<SlideData extends {
+    id: string;
+}> {
+    /**
+     * Plugins to extend the carousel with additional features
+     * @defaultValue `[]`
+     */
+    plugins: EmblaPluginType[];
+    /**
+     * Aria label for navigation indicators
+     */
+    ariaIndicatorLabel: (index: number) => string;
+    /**
+     * Aria label for previous button
+     */
+    ariaPrevLabel: string;
+    /**
+     * Aria label for next button
+     */
+    ariaNextLabel: string;
+    /**
+     * Align the slides relative to the carousel viewport
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#align}
+     * @defaultValue `'center'`
+     */
+    align: 'start' | 'center' | 'end';
+    /**
+     * Enables choosing a custom container element which holds the slides. By default, Embla will choose the first direct child element of the root element. Provide a valid CSS selector string.
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#container}
+     */
+    container: string | null;
+    /**
+     * Clear leading and trailing empty space that causes excessive scrolling
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#containScroll}
+     * @defaultValue `'trimSnaps'`
+     */
+    containScroll: false | 'trimSnaps' | 'keepSnaps';
+    /**
+     * Choose content direction between `ltr` and `rtl`
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#direction}
+     * @defaultValue `'ltr'`
+     */
+    direction: 'ltr' | 'rtl';
+    /**
+     * Enables momentum scrolling
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#dragFree}
+     * @defaultValue `false`
+     */
+    dragFree: boolean;
+    /**
+     * Drag threshold in pixels
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#dragThreshold}
+     * @defaultValue `10`
+     */
+    dragThreshold: number;
+    /**
+     * Set scroll duration when triggered by any of the API methods
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#duration}
+     * @defaultValue `25`
+     */
+    duration: number;
+    /**
+     * Enables infinite looping
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#loop}
+     * @defaultValue `false`
+     */
+    loop: boolean;
+    /**
+     * Allow the carousel to skip scroll snaps if it's dragged vigorously
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#skipsnaps}
+     * @defaultValue `false`
+     */
+    skipSnaps: boolean;
+    /**
+     * If `true`, 'previous' and 'next' navigation arrows will be visible.
+     */
+    showNavigationArrows: boolean;
+    /**
+     * If `true`, navigation indicators at the bottom of the slide will be visible.
+     */
+    showNavigationIndicators: boolean;
+    /**
+     * CSS classes to be applied on the widget main container
+     *
+     * @defaultValue `''`
+     */
+    className: string;
+    /**
+     * Class name to apply to the container of the carousel.
+     *
+     * @defaultValue `''`
+     */
+    containerClass: string;
+    /**
+     * Class name to apply to each slide in the carousel.
+     *
+     * @defaultValue `''`
+     */
+    slideClass: string | ((slideContext: {
+        id: string;
+        index: number;
+        active: boolean;
+    }) => string);
+    /**
+     * The data for each slide in the carousel.
+     *
+     * @defaultValue `[]`
+     */
+    slidesData: SlideData[];
+    /**
+     * The structure of the carousel.
+     *
+     * @defaultValue `undefined`
+     */
+    structure: SlotContent<CarouselContext<SlideData>>;
+    /**
+     * The navigation layer of the carousel.
+     *
+     * @defaultValue `undefined`
+     */
+    navigation: SlotContent<CarouselContext<SlideData>>;
+    /**
+     * The content of each slide in the carousel.
+     *
+     * @defaultValue `undefined`
+     */
+    slide: SlotContent<CarouselSlideContext<SlideData>>;
+    /**
+     * The aria-live attribute value for the carousel container.
+     *
+     * @defaultValue `'polite'`
+     */
+    ariaLive: string;
+}
+/**
+ * Represents the directives for a carousel component.
+ */
+export interface CarouselDirectives {
+    /**
+     * A directive to be applied to each slide in the carousel.
+     */
+    slide: Directive<{
+        id: string;
+        index: number;
+    }>;
+    /**
+     * A directive to be applied to container of the carousel.
+     */
+    container: Directive;
+    /**
+     * the root directive
+     */
+    root: Directive;
+    /**
+     * A directive to be applied to a navigation button allowing to scroll to the previous slide.
+     */
+    scrollPrev: Directive;
+    /**
+     * A directive to be applied to a navigation button allowing to scroll to the next slide.
+     */
+    scrollNext: Directive;
+    /**
+     * A directive to be applied to a tab list allowing to navigate to the corresponding slide.
+     * This directive adds the role `tablist` and is recommended to be used together with {@link tabIndicator}.
+     */
+    tabList: Directive;
+    /**
+     * A directive to be applied to a navigation indicator allowing to scroll to the corresponding slide.
+     * As this directive adds the role `tab` to the element, it is recommended to use it on a button or a link and the parent element should have the {@link tabList} directive attached.
+     */
+    tabIndicator: Directive<{
+        index: number;
+        id: string;
+        jump?: boolean;
+    }>;
+}
+/**
+ * Represents a carousel widget with specific properties, state, API, and directives.
+ *
+ * @template SlideData - The type of the data for each slide.
+ */
+export type CarouselWidget<SlideData extends {
+    id: string;
+}> = Widget<CarouselProps<SlideData>, CarouselState<SlideData>, CarouselApi, CarouselDirectives>;
+/**
+ * Represents the API for a carousel component.
+ */
+export interface CarouselApi {
+    /**
+     * Scroll to the previous snap point if possible.
+     * @param jump - scroll instantly
+     */
+    scrollPrev: (jump?: boolean) => void;
+    /**
+     * Scroll to the next snap point if possible.
+     * @param jump - scroll instantly
+     */
+    scrollNext: (jump?: boolean) => void;
+    /**
+     * Scroll to a snap point by index
+     * @param index - the snap point index
+     * @param jump - scroll instantly
+     */
+    scrollTo: (index: number, jump?: boolean) => void;
+    /**
+     * Retrieve the enabled plugins
+     */
+    plugins: () => EmblaPluginsType | undefined;
+    /**
+     * Retrieve the inner EmblaApi object
+     */
+    emblaApi: () => EmblaCarouselType | undefined;
+}

package/components/carousel/carousel.gen.js

@@ -0,0 +1,16 @@
+import { getCarouselDefaultConfig, createCarousel } from '@agnos-ui/core-bootstrap/components/carousel';
+/**
+ * Retrieve a shallow copy of the default Carousel config
+ * @returns the default Carousel config
+ */
+const export_getCarouselDefaultConfig = getCarouselDefaultConfig;
+export { export_getCarouselDefaultConfig as getCarouselDefaultConfig };
+/**
+ * Create a Carousel with given config props
+ *
+ * @template SlideData - The type of the data for each slide.
+ * @param config - an optional carousel config
+ * @returns a CarouselWidget
+ */
+const export_createCarousel = createCarousel;
+export { export_createCarousel as createCarousel };

package/components/carousel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './carousel.gen';
+import Carousel from './Carousel.svelte';
+export { Carousel };

package/components/carousel/index.js

@@ -0,0 +1,3 @@
+export * from './carousel.gen';
+import Carousel from './Carousel.svelte';
+export { Carousel };

package/components/collapse/Collapse.svelte

@@ -7,6 +7,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 	import {callWidgetFactory} from '../../config';
 	import type {Snippet} from 'svelte';
 
+	const id = $props.id();
 	let {children, visible = $bindable(), ...props}: Partial<CollapseProps> & {children: Snippet} = $props();
 
 	const {
@@ -18,6 +19,9 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 		get props() {
 			return {...props, visible};
 		},
+		defaultConfig: {
+			id,
+		},
 		events: {
 			onVisibleChange: (event) => {
 				visible = event;

package/components/slider/SliderDefaultHandle.svelte

@@ -44,4 +44,4 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 </script>
 
 <!-- svelte-ignore a11y_consider_explicit_label -->
-<button {onkeydown} use:directives.handleDirective={{item}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.handleDirective, {item}])}> &nbsp; </button>
+<button {onkeydown} use:directives.handleDirective={{item}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.handleDirective, {item}])}></button>

package/components/slider/SliderDefaultTick.svelte

@@ -13,29 +13,10 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 	</span>
 {/if}
 <span use:directives.tickDirective={{tick}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.tickDirective, {tick}])}>
-	{#if tick.selected}
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			style="width: var(--bs-slider-tick-secondary-size); height: var(--bs-slider-tick-primary-size)"
-			fill="none"
-		>
-			<circle cx="50%" cy="50%" r="50%" fill={state.disabled ? 'var(--bs-slider-tick-disabled-color)' : 'var(--bs-slider-tick-selected-color)'} />
-			<circle cx="50%" cy="50%" r="25%" fill="white" />
-		</svg>
-	{:else}
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			style="width: var(--bs-slider-tick-secondary-size); height: var(--bs-slider-tick-primary-size)"
-			fill="none"
-		>
-			<circle
-				cx="50%"
-				cy="50%"
-				r="45%"
-				fill="white"
-				stroke={state.disabled ? 'var(--bs-slider-tick-disabled-color)' : 'var(--bs-slider-tick-neutral-color)'}
-				stroke-width="1.5"
-			/>
-		</svg>
-	{/if}
+	<svg xmlns="http://www.w3.org/2000/svg">
+		<circle class="au-slider-tick-outer" class:au-slider-tick-disabled={state.disabled} class:au-slider-tick-selected={tick.selected} />
+		{#if tick.selected}
+			<circle class="au-slider-tick-inner au-slider-tick-selected" />
+		{/if}
+	</svg>
 </span>

package/components/toast/Toaster.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+
+	const toaster = new ToasterService();
+	const {addToast, removeToast, closeAll, eventsDirective} = toaster;
+	export {addToast, removeToast, closeAll};
+</script>
+
+<script lang="ts">
+	import Toast from './Toast.svelte';
+	import {toastPositions, type ToasterProps} from './toast.gen';
+	import {ToasterService} from './toasterService';
+	let {duration, position, limit, pauseOnHover, dismissible, closeAll, closeAllLabel}: ToasterProps = $props();
+	$effect(() => {
+		toaster.options.current = {duration, position, limit, pauseOnHover, dismissible, closeAll, closeAllLabel};
+	});
+</script>
+
+<div class="au-toaster" aria-live="polite" aria-atomic="true">
+	<div class={`au-toaster-container toast-container ${toastPositions[toaster.options.current.position]}`}>
+		{#if toaster.options.current.closeAll && toaster.toasts.current.length > 1}
+			<div class="d-flex position-relative align-items-end pb-2">
+				<button class="au-toaster-closeAll btn btn-secondary me-0 ms-auto pe-auto" onclick={() => toaster.closeAll()}
+					>{toaster.options.current.closeAllLabel || 'Close all'}</button
+				>
+			</div>
+		{/if}
+		{#each toaster.toasts.current as { id, props: { className, visible, structure, children, header, dismissible, ariaCloseButtonLabel, animated, animatedOnInit, onShown, onHidden, onVisibleChange, transition } } (id)}
+			<div use:eventsDirective={id} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([eventsDirective, id])}>
+				<Toast
+					{animated}
+					{animatedOnInit}
+					autoHide={false}
+					{className}
+					dismissible={dismissible ?? toaster.options.current.dismissible}
+					{ariaCloseButtonLabel}
+					{structure}
+					{children}
+					{header}
+					{onShown}
+					onHidden={() => {
+						removeToast(id);
+						onHidden?.();
+					}}
+					{onVisibleChange}
+					{visible}
+					{transition}
+				/>
+			</div>
+		{/each}
+	</div>
+</div>

package/components/toast/Toaster.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const addToast: any, removeToast: any, closeAll: any;
+export { addToast, removeToast, closeAll };
+import { type ToasterProps } from './toast.gen';
+declare const Toaster: import("svelte").Component<ToasterProps, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/components/toast/index.d.ts

@@ -1,3 +1,7 @@
 import Toast from './Toast.svelte';
+export * from './Toaster.svelte';
+import Toaster from './Toaster.svelte';
 export * from './toast.gen';
 export { Toast };
+export { Toaster };
+export * from './toasterService';

package/components/toast/index.js

@@ -1,3 +1,7 @@
 import Toast from './Toast.svelte';
+export * from './Toaster.svelte';
+import Toaster from './Toaster.svelte';
 export * from './toast.gen';
 export { Toast };
+export { Toaster };
+export * from './toasterService';

package/components/toast/toast.gen.d.ts

@@ -188,6 +188,21 @@ export type ToastWidget = Widget<ToastProps, ToastState, ToastApi, ToastDirectiv
  */
 declare const export_createToast: WidgetFactory<ToastWidget>;
 export { export_createToast as createToast };
+/**
+ * A mapping of toast position keys to their corresponding CSS class strings of bootstrap.
+ * These classes define the positioning of toast notifications on the screen.
+ *
+ * The keys represent various positions on the screen, such as top-left, top-center,
+ * middle-right, etc., and the values are the CSS classes of bootstrap that apply the respective
+ * positioning styles.
+ *
+ * Example usage:
+ * ```typescript
+ * const positionClass = toastPositions.topLeft; // "top-0 start-0"
+ * ```
+ */
+declare const export_toastPositions: Record<ToastPositions, string>;
+export { export_toastPositions as toastPositions };
 /**
  * Represents the API for the toast component.
  */
@@ -222,3 +237,73 @@ export interface ToastDirectives {
      */
     closeButtonDirective: Directive;
 }
+/**
+ * Represents the possible positions for displaying a toast notification.
+ *
+ * The positions are defined based on a grid layout with three horizontal
+ * alignments (left, center, right) and three vertical alignments (top, middle, bottom).
+ *
+ * Available positions:
+ * - `topLeft`: Top-left corner of the screen.
+ * - `topCenter`: Top-center of the screen.
+ * - `topRight`: Top-right corner of the screen.
+ * - `middleLeft`: Middle-left side of the screen.
+ * - `middleCenter`: Center of the screen.
+ * - `middleRight`: Middle-right side of the screen.
+ * - `bottomLeft`: Bottom-left corner of the screen.
+ * - `bottomCenter`: Bottom-center of the screen.
+ * - `bottomRight`: Bottom-right corner of the screen.
+ */
+export type ToastPositions = 'topLeft' | 'topCenter' | 'topRight' | 'middleLeft' | 'middleCenter' | 'middleRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
+/**
+ * Props of the toaster
+ */
+export interface ToasterProps {
+    /** How much time (ms) a toast is displayed; 0 means it won't be removed until a manual action */
+    duration: number;
+    /** Where to position the toasts */
+    position: ToastPositions;
+    /** Maximum number of toasts displayed */
+    limit?: number;
+    /**  Pause toast when hover */
+    pauseOnHover?: boolean;
+    /** Display a dismiss button on each toast. When duration = 0, this is enforced to true */
+    dismissible: boolean;
+    /** Add a button to close all the toasts at once */
+    closeAll?: boolean;
+    /** Close all label */
+    closeAllLabel?: string;
+}
+/**
+ * Toast object
+ * @template Props Type of the toast properties.
+ */
+export interface ToasterToast<Props> {
+    /** Identifier of the toasts in the toaster */
+    id: number;
+    /** Properties of the toast */
+    props: Props;
+}
+/**
+ * Represents a timer used by the toaster service.
+ */
+export interface ToasterTimer {
+    /**
+     * The timeout identifier returned by `setTimeout`.
+     */
+    timeout: ReturnType<typeof setTimeout> | null;
+    /**
+     * The timestamp when the timer was started.
+     */
+    started: number;
+    /**
+     * The timestamp when the timer was paused (optional).
+     */
+    paused?: number;
+    /**
+     * The duration for which the timer is set (optional). Used internally to compute the remaining time.
+     */
+    duration: number;
+}
+declare const export_defaultToasterProps: ToasterProps;
+export { export_defaultToasterProps as defaultToasterProps };

package/components/toast/toast.gen.js

@@ -1,4 +1,4 @@
-import { getToastDefaultConfig, createToast } from '@agnos-ui/core-bootstrap/components/toast';
+import { getToastDefaultConfig, createToast, toastPositions, defaultToasterProps } from '@agnos-ui/core-bootstrap/components/toast';
 /**
  * Retrieve a shallow copy of the default Toast config
  * @returns the default Toast config
@@ -12,3 +12,20 @@ export { export_getToastDefaultConfig as getToastDefaultConfig };
  */
 const export_createToast = createToast;
 export { export_createToast as createToast };
+/**
+ * A mapping of toast position keys to their corresponding CSS class strings of bootstrap.
+ * These classes define the positioning of toast notifications on the screen.
+ *
+ * The keys represent various positions on the screen, such as top-left, top-center,
+ * middle-right, etc., and the values are the CSS classes of bootstrap that apply the respective
+ * positioning styles.
+ *
+ * Example usage:
+ * ```typescript
+ * const positionClass = toastPositions.topLeft; // "top-0 start-0"
+ * ```
+ */
+const export_toastPositions = toastPositions;
+export { export_toastPositions as toastPositions };
+const export_defaultToasterProps = defaultToasterProps;
+export { export_defaultToasterProps as defaultToasterProps };

package/components/toast/toasterService.d.ts

@@ -0,0 +1,4 @@
+import type { ToastProps } from './toast.gen';
+import { Toaster as headlessToaster } from '@agnos-ui/svelte-headless/components/toast';
+export declare class ToasterService extends headlessToaster<Partial<ToastProps>> {
+}

package/components/toast/toasterService.js

@@ -0,0 +1,3 @@
+import { Toaster as headlessToaster } from '@agnos-ui/svelte-headless/components/toast';
+export class ToasterService extends headlessToaster {
+}

package/config.gen.d.ts

@@ -1,5 +1,6 @@
 import type { AccordionProps } from './components/accordion';
 import type { AlertProps } from './components/alert';
+import type { CarouselProps } from './components/carousel';
 import type { CollapseProps } from './components/collapse';
 import type { ModalProps } from './components/modal';
 import type { PaginationProps } from './components/pagination';
@@ -18,6 +19,10 @@ export type WidgetsConfig = {
      * the alert widget config
      */
     alert: AlertProps;
+    /**
+     * the carousel widget config
+     */
+    carousel: CarouselProps<any>;
     /**
      * the collapse widget config
      */

package/generated/types.d.ts

@@ -1 +1 @@
-export * from '@agnos-ui/svelte-headless/types';
+export * from './../types';

package/generated/types.js

@@ -1 +1 @@
-export * from '@agnos-ui/svelte-headless/types';
+export * from './../types';

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/accordion';
 export * from './components/alert';
+export * from './components/carousel';
 export * from './components/collapse';
 export * from './components/modal';
 export * from './components/pagination';

package/index.js

@@ -1,5 +1,6 @@
 export * from './components/accordion';
 export * from './components/alert';
+export * from './components/carousel';
 export * from './components/collapse';
 export * from './components/modal';
 export * from './components/pagination';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/svelte-bootstrap",
 	"description": "Bootstrap-based component library for Svelte.",
-	"version": "0.8.0-next.0",
+	"version": "0.8.0",
 	"type": "module",
 	"main": "./index.js",
 	"module": "./index.js",
@@ -49,8 +49,8 @@
 		}
 	},
 	"dependencies": {
-		"@agnos-ui/core-bootstrap": "0.8.0-next.0",
-		"@agnos-ui/svelte-headless": "0.8.0-next.0"
+		"@agnos-ui/core-bootstrap": "0.8.0",
+		"@agnos-ui/svelte-headless": "0.8.0"
 	},
 	"peerDependencies": {
 		"@amadeus-it-group/tansu": "^2.0.0",
@@ -72,6 +72,7 @@
 		"accordion",
 		"AgnosUI",
 		"alert",
+		"carousel",
 		"collapse",
 		"components",
 		"modal",
@@ -80,6 +81,7 @@
 		"rating",
 		"slider",
 		"toast",
+		"tree",
 		"widgets"
 	]
 }

package/types.d.ts

@@ -0,0 +1,2 @@
+export * from '@agnos-ui/svelte-headless/types';
+export * from '@agnos-ui/core-bootstrap/types';

package/types.js

@@ -0,0 +1,2 @@
+export * from '@agnos-ui/svelte-headless/types';
+export * from '@agnos-ui/core-bootstrap/types';