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

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

@@ -9,7 +9,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 	let {state, directives} = widget;
 </script>
 
-{#each state.progressDisplayOptions as option}
+{#each state.progressDisplayOptions as option (option.id)}
 	<div use:directives.progressDisplayDirective={{option}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.progressDisplayDirective, {option}])}></div>
 {/each}
 <div use:directives.clickableAreaDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.clickableAreaDirective)}></div>

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

@@ -165,28 +165,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'
      * ```
      */
-    ariaLabelHandle: (value: number, sortedIndex: number, index: number) => string;
+    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
+     * () => ''
+     * ```
+     */
+    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
      *
@@ -318,9 +325,13 @@ export interface ProgressDisplayOptions {
      */
     width: number;
     /**
-     * Height of hte progress in %
+     * Height of the progress in %
      */
     height: number;
+    /**
+     * Id of the progress
+     */
+    id: number;
 }
 /**
  * Options for displaying a handle in a slider component.
@@ -350,11 +361,15 @@ 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;
 }
 /**
  * Interface representing various directives used in the slider component.

package/components/tree/tree.gen.d.ts

@@ -91,7 +91,7 @@ export interface TreeProps {
      * (node: HTMLElement) => node.querySelectorAll('button')
      * ```
      */
-    navSelector(node: HTMLElement): NodeListOf<HTMLButtonElement>;
+    navSelector(node: HTMLElement): NodeListOf<HTMLElement>;
     /**
      * Return the value for the 'aria-label' attribute of the toggle
      * @param label - tree item label

package/package.json

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