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

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

@@ -1,8 +1,9 @@
 import type { AccordionApi, AccordionProps } from './accordion';
 import type { Snippet } from 'svelte';
-declare const Accordion: import("svelte").Component<Partial<AccordionProps> & {
+type $$ComponentProps = Partial<AccordionProps> & {
     children: Snippet;
-}, {
+};
+declare const Accordion: import("svelte").Component<$$ComponentProps, {
     api: AccordionApi;
 }, "">;
 type Accordion = ReturnType<typeof Accordion>;

package/components/collapse/Collapse.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { CollapseProps, CollapseApi } from './collapse.gen';
 import type { Snippet } from 'svelte';
-declare const Collapse: import("svelte").Component<Partial<CollapseProps> & {
+type $$ComponentProps = Partial<CollapseProps> & {
     children: Snippet;
-}, {
+};
+declare const Collapse: import("svelte").Component<$$ComponentProps, {
     api: CollapseApi;
 }, "visible">;
 type Collapse = ReturnType<typeof Collapse>;

package/components/collapse/collapse.gen.d.ts

@@ -134,6 +134,10 @@ export interface CollapseDirectives {
      * Directive to apply the collapse.
      */
     collapseDirective: Directive;
+    /**
+     * Directive to apply to a trigger;
+     */
+    triggerDirective: Directive;
 }
 /**
  * Represents a widget for handling collapse functionality.

package/components/modal/modalService.js

@@ -28,7 +28,7 @@ export async function openModal(options, { context } = {}) {
     try {
         return await component.api.open();
     }
-    finally {
-        unmount(component);
+    catch (_error) {
+        await unmount(component);
     }
 }

package/components/pagination/PaginationDefaultPages.svelte

@@ -10,7 +10,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 </script>
 
 {#each state.pages as page}
-	<li class="page-item" class:active={page === state.page} class:disabled={page === -1 || state.disabled}>
+	<li class={['page-item', {active: page === state.page, disabled: page === -1 || state.disabled}]}>
 		{#if page === -1}
 			<div class="page-link au-ellipsis" aria-hidden="true">
 				<Slot content={state.ellipsisLabel} props={widget} />

package/components/pagination/PaginationDefaultStructure.svelte

@@ -13,7 +13,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 
 <ul class="au-pagination pagination {sizeClass} {state.className}">
 	{#if state.boundaryLinks}
-		<li class="page-item" class:disabled={state.previousDisabled}>
+		<li class={['page-item', {disabled: state.previousDisabled}]}>
 			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:directives.pageFirst {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.pageFirst, [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
 				<span aria-hidden="true">
 					<Slot content={state.firstPageLabel} props={widget} />
@@ -22,7 +22,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 		</li>
 	{/if}
 	{#if state.directionLinks}
-		<li class="page-item" class:disabled={state.previousDisabled}>
+		<li class={['page-item', {disabled: state.previousDisabled}]}>
 			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:directives.pagePrev {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.pagePrev, [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
 				<span aria-hidden="true">
 					<Slot content={state.previousPageLabel} props={widget} />
@@ -32,7 +32,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 	{/if}
 	<Slot content={state.pagesDisplay} props={widget} />
 	{#if state.directionLinks}
-		<li class="page-item" class:disabled={state.nextDisabled}>
+		<li class={['page-item', {disabled: state.nextDisabled}]}>
 			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:directives.pageNext {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.pageNext, [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
 				<span aria-hidden="true">
 					<Slot content={state.nextPageLabel} props={widget} />
@@ -41,7 +41,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 		</li>
 	{/if}
 	{#if state.boundaryLinks}
-		<li class="page-item" class:disabled={state.nextDisabled}>
+		<li class={['page-item', {disabled: state.nextDisabled}]}>
 			<a use:__AgnosUISveltePreprocess__classDirective={"page-link"} use:directives.pageLast {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.pageLast, [__AgnosUISveltePreprocess__classDirective, "page-link"])}>
 				<span aria-hidden="true">
 					<Slot content={state.lastPageLabel} props={widget} />

package/components/progressbar/ProgressbarDefaultStructure.svelte

@@ -7,9 +7,11 @@
 
 <div class="progress" style:height={state.height}>
 	<div
-		class={`progress-bar ${state.type ? `text-bg-${state.type}` : ''}`}
-		class:progress-bar-striped={state.striped}
-		class:progress-bar-animated={state.animated}
+		class={[
+			'progress-bar',
+			state.type ? `text-bg-${state.type}` : '',
+			{'progress-bar-striped': state.striped, 'progress-bar-animated': state.animated},
+		]}
 		style:width={`${state.percentage}%`}
 	>
 		<Slot content={state.children} props={{state, api, directives}} />

package/components/select/Select.svelte

@@ -65,7 +65,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 		<ul use:hasFocusDirective use:floatingDirective use:menuAttributesDirective use:__AgnosUISveltePreprocess__classDirective={"dropdown-menu show"} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(hasFocusDirective, floatingDirective, menuAttributesDirective, [__AgnosUISveltePreprocess__classDirective, "dropdown-menu show"])}>
 			{#each state.visibleItems as itemContext (itemContext.id)}
 				{@const isHighlighted = itemContext === state.highlighted}
-				<li use:__AgnosUISveltePreprocess__classDirective={"dropdown-item position-relative"} class:text-bg-primary={isHighlighted} use:itemAttributesDirective={itemContext} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([itemAttributesDirective, itemContext], [__AgnosUISveltePreprocess__classDirective, "dropdown-item position-relative"])}>
+				<li use:__AgnosUISveltePreprocess__classDirective={(['dropdown-item position-relative', {'text-bg-primary': isHighlighted}])} use:itemAttributesDirective={itemContext} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([itemAttributesDirective, itemContext], [__AgnosUISveltePreprocess__classDirective, (['dropdown-item position-relative', {'text-bg-primary': isHighlighted}])])}>
 					<Slot content={state.itemLabel} props={{state, directives: widget.directives, api: widget.api, itemContext}} />
 				</li>
 			{/each}

package/components/slider/Slider.svelte

@@ -2,12 +2,13 @@
 import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
 import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 
-	import type {SliderContext, SliderProps, SliderSlotHandleContext, SliderSlotLabelContext} from './slider.gen';
+	import type {SliderContext, SliderProps, SliderSlotHandleContext, SliderSlotLabelContext, SliderSlotTickContext} from './slider.gen';
 	import {createSlider} from './slider.gen';
 	import {Slot} from '@agnos-ui/svelte-headless/slot';
 	import {callWidgetFactory} from '../../config';
 	import SliderDefaultStructure from './SliderDefaultStructure.svelte';
 	import SliderDefaultHandle from './SliderDefaultHandle.svelte';
+	import SliderDefaultTick from './SliderDefaultTick.svelte';
 
 	let {values = $bindable(), ...props}: Partial<SliderProps> = $props();
 
@@ -18,7 +19,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 			return {...props, values};
 		},
 		enablePatchChanged: true,
-		defaultConfig: {structure, handle, label},
+		defaultConfig: {structure, handle, tick, label},
 		events: {
 			onValuesChange: function (newValues: number[]): void {
 				values = newValues;
@@ -37,6 +38,9 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 {#snippet handle(props: SliderSlotHandleContext)}
 	<SliderDefaultHandle {...props} />
 {/snippet}
+{#snippet tick(props: SliderSlotTickContext)}
+	<SliderDefaultTick {...props} />
+{/snippet}
 {#snippet label({value}: SliderSlotLabelContext)}
 	{value}
 {/snippet}

package/components/slider/SliderDefaultHandle.svelte

@@ -5,7 +5,43 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 	import type {SliderSlotHandleContext} from './slider.gen';
 
 	let {item, directives}: SliderSlotHandleContext = $props();
+
+	let refocusElement: HTMLElement | undefined = $state(undefined);
+	let updateTimeout: NodeJS.Timeout;
+
+	// Manually keep focus as scheduling goal elements are re-ordered.
+	// Svelte currently does not retain focus as elements are moved, even when keyed.
+	// See discussion here: https://github.com/sveltejs/svelte/issues/3973
+	$effect(() => {
+		if (refocusElement) {
+			updateTimeout = setTimeout(() => {
+				refocusElement?.focus();
+				refocusElement = undefined;
+			});
+		}
+	});
+
+	/**
+	 * Key handler that sets the refocus element only on the key strokes that move
+	 * the element up the DOM
+	 * @param event object containting key stroke and the target element
+	 */
+	function onkeydown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowUp':
+			case 'ArrowRight':
+			case 'End':
+			case 'ArrowDown':
+			case 'ArrowLeft':
+			case 'Home':
+				refocusElement = event.target as HTMLElement;
+				clearTimeout(updateTimeout);
+				break;
+			default:
+				break;
+		}
+	}
 </script>
 
 <!-- svelte-ignore a11y_consider_explicit_label -->
-<button 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}])}> &nbsp; </button>

package/components/slider/SliderDefaultStructure.svelte

@@ -32,6 +32,9 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 		{/if}
 	</div>
 {/if}
+{#each state.ticks as tick (tick.position)}
+	<Slot content={state.tick} props={{tick, ...widget}} />
+{/each}
 {#each state.sortedHandles as item, i (item.id)}
 	<Slot content={state.handle} props={{item, ...widget}} />
 	{#if state.showValueLabels && !state.combinedLabelDisplay}

package/components/slider/SliderDefaultTick.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+
+	import type {SliderSlotTickContext} from './slider.gen';
+
+	let {tick, directives, state}: SliderSlotTickContext = $props();
+</script>
+
+{#if tick.displayLabel}
+	<span use:directives.tickLabelDirective={{tick}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.tickLabelDirective, {tick}])}>
+		{tick.value}
+	</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}
+</span>

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

@@ -0,0 +1,4 @@
+import type { SliderSlotTickContext } from './slider.gen';
+declare const SliderDefaultTick: import("svelte").Component<SliderSlotTickContext, {}, "">;
+type SliderDefaultTick = ReturnType<typeof SliderDefaultTick>;
+export default SliderDefaultTick;

package/components/slider/slider.gen.d.ts

@@ -31,6 +31,15 @@ export interface SliderSlotHandleContext extends SliderContext {
      */
     item: SliderHandle;
 }
+/**
+ * Represents the context for a slider tick slot
+ */
+export interface SliderSlotTickContext extends SliderContext {
+    /**
+     * tick context
+     */
+    tick: SliderTick;
+}
 /**
  * Represents the state of a slider component.
  */
@@ -75,6 +84,10 @@ export interface SliderState {
      * Check if the slider is interactive, meaning it is not disabled or readonly
      */
     interactive: boolean;
+    /**
+     * Array of ticks to display on the slider component
+     */
+    ticks: SliderTick[];
     /**
      * Minimum value that can be assigned to the slider
      *
@@ -129,6 +142,12 @@ export interface SliderState {
      * @defaultValue `true`
      */
     showMinMaxLabels: boolean;
+    /**
+     * If `true` the ticks are displayed on the slider
+     *
+     * @defaultValue `false`
+     */
+    showTicks: boolean;
     /**
      * It `true` slider display is inversed
      *
@@ -158,6 +177,10 @@ export interface SliderState {
      *  Slot to change the handlers
      */
     handle: SlotContent<SliderSlotHandleContext>;
+    /**
+     * Slot to change the ticks
+     */
+    tick: SlotContent<SliderSlotTickContext>;
 }
 /**
  * Represents the properties for the Slider component.
@@ -165,28 +188,35 @@ export interface SliderState {
 export interface SliderProps {
     /**
      * Return the value for the 'aria-label' attribute for the handle
-     * @param value - value of the handle
      * @param sortedIndex - index of the handle in the sorted list
-     * @param index - index of the handle in the original list
      *
      * @defaultValue
      * ```ts
-     * (value: number) => '' + value
+     * () => 'Value'
+     * ```
+     */
+    ariaLabel: (sortedIndex: number) => string;
+    /**
+     * Return the value for the 'aria-labelledBy' attribute for the handle
+     * @param sortedIndex - index of the handle in the sorted list
+     *
+     * @defaultValue
+     * ```ts
+     * () => ''
      * ```
      */
-    ariaLabelHandle: (value: number, sortedIndex: number, index: number) => string;
+    ariaLabelledBy: (sortedIndex: number) => string;
     /**
      * Return the value for the 'aria-valuetext' attribute for the handle
      * @param value - value of the handle
      * @param sortedIndex - index of the handle in the sorted list
-     * @param index - index of the handle in the original list
      *
      * @defaultValue
      * ```ts
-     * (value: number) => '' + value
+     * (value: number) => ''
      * ```
      */
-    ariaValueText: (value: number, sortedIndex: number, index: number) => string;
+    ariaValueText: (value: number, sortedIndex: number) => string;
     /**
      * An event emitted when slider values are changed
      *
@@ -198,6 +228,19 @@ export interface SliderProps {
      * ```
      */
     onValuesChange: (values: number[]) => void;
+    /**
+     * Unit value between the ticks
+     * If value is set to `0` the {@link stepSize} is used to space the ticks
+     *
+     * @defaultValue `0`
+     */
+    tickInterval: number;
+    /**
+     * If `true` the tick values are displayed on the slider
+     *
+     * @defaultValue `true`
+     */
+    showTickValues: boolean;
     /**
      * Minimum value that can be assigned to the slider
      *
@@ -252,6 +295,12 @@ export interface SliderProps {
      * @defaultValue `true`
      */
     showMinMaxLabels: boolean;
+    /**
+     * If `true` the ticks are displayed on the slider
+     *
+     * @defaultValue `false`
+     */
+    showTicks: boolean;
     /**
      * It `true` slider display is inversed
      *
@@ -281,6 +330,10 @@ export interface SliderProps {
      *  Slot to change the handlers
      */
     handle: SlotContent<SliderSlotHandleContext>;
+    /**
+     * Slot to change the ticks
+     */
+    tick: SlotContent<SliderSlotTickContext>;
 }
 /**
  * Represents a slider widget component.
@@ -354,11 +407,44 @@ export interface SliderHandle {
     /**
      * ariaLabel of the handle
      */
-    ariaLabel: string;
+    ariaLabel: string | undefined;
     /**
      * ariaValueText of the handle
      */
-    ariaValueText: string;
+    ariaValueText: string | undefined;
+    /**
+     * aria-labelledBy of the handle
+     */
+    ariaLabelledBy: string | undefined;
+}
+/**
+ * Represents a tick in a slider component.
+ */
+export interface SliderTick {
+    /**
+     * CSS classes to be applied on the tick
+     */
+    className?: string | null;
+    /**
+     * Visualized optional explanation of the label
+     */
+    legend?: string | null;
+    /**
+     * Position of the tick in percent
+     */
+    position: number;
+    /**
+     * If `true` the tick has selected style
+     */
+    selected: boolean;
+    /**
+     * Value of the tick
+     */
+    value: number;
+    /**
+     * If `true` the tick label is displayed
+     */
+    displayLabel: boolean;
 }
 /**
  * Interface representing various directives used in the slider component.
@@ -410,4 +496,16 @@ export interface SliderDirectives {
     handleLabelDisplayDirective: Directive<{
         index: number;
     }>;
+    /**
+     * Directive to apply to the slider tick
+     */
+    tickDirective: Directive<{
+        tick: SliderTick;
+    }>;
+    /**
+     * Directive to apply to the slider tick label
+     */
+    tickLabelDirective: Directive<{
+        tick: SliderTick;
+    }>;
 }

package/components/toast/Toast.svelte

@@ -37,14 +37,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 {/snippet}
 
 {#if !state.hidden}
-	<div
-		use:__AgnosUISveltePreprocess__classDirective={"toast"}
-		class:toast-dismissible={state.dismissible}
-		class:d-flex={!state.header}
-		use:transitionDirective
-		use:autoHideDirective
-		use:bodyDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(transitionDirective, autoHideDirective, bodyDirective, [__AgnosUISveltePreprocess__classDirective, "toast"])}
-	>
+	<div use:__AgnosUISveltePreprocess__classDirective={({'toast-dismissible': state.dismissible, 'd-flex': !state.header})} use:transitionDirective use:autoHideDirective use:bodyDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(transitionDirective, autoHideDirective, bodyDirective, [__AgnosUISveltePreprocess__classDirective, ({'toast-dismissible': state.dismissible, 'd-flex': !state.header})])}>
 		<Slot content={state.structure} props={widget} />
 	</div>
 {/if}

package/generated/index.d.ts

@@ -5,6 +5,7 @@ export * from './config';
 export * from './utils/widget.svelte';
 export * from './utils/writables';
 export * from './utils/stores';
+export * from './utils/func';
 export * from './utils/directive';
 export * from './services/siblingsInert';
 export * from './services/resizeObserver';

package/generated/index.js

@@ -5,6 +5,7 @@ export * from './config';
 export * from './utils/widget.svelte';
 export * from './utils/writables';
 export * from './utils/stores';
+export * from './utils/func';
 export * from './utils/directive';
 export * from './services/siblingsInert';
 export * from './services/resizeObserver';

package/generated/utils/func.d.ts

@@ -0,0 +1 @@
+export * from '@agnos-ui/svelte-headless/utils/func';

package/generated/utils/func.js

@@ -0,0 +1 @@
+export * from '@agnos-ui/svelte-headless/utils/func';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/svelte-bootstrap",
 	"description": "Bootstrap-based component library for Svelte.",
-	"version": "0.7.0",
+	"version": "0.8.0-next.0",
 	"type": "module",
 	"main": "./index.js",
 	"module": "./index.js",
@@ -49,13 +49,13 @@
 		}
 	},
 	"dependencies": {
-		"@agnos-ui/core-bootstrap": "0.7.0",
-		"@agnos-ui/svelte-headless": "0.7.0"
+		"@agnos-ui/core-bootstrap": "0.8.0-next.0",
+		"@agnos-ui/svelte-headless": "0.8.0-next.0"
 	},
 	"peerDependencies": {
 		"@amadeus-it-group/tansu": "^2.0.0",
 		"esm-env": "^1.2.1",
-		"svelte": "^5.0.0"
+		"svelte": "^5.16.0"
 	},
 	"sideEffects": false,
 	"homepage": "https://www.agnosui.dev/latest/",