@sentropic/design-system-react 0.12.0 → 0.14.0

package/dist/catalog.js

@@ -1498,7 +1498,11 @@ export function Rating({ value, max = 5, onChange, readonly = false, allowHalf =
     const iconSize = size === "sm" ? 16 : size === "lg" ? 28 : 22;
     const stars = Array.from({ length: max }, (_, i) => i + 1);
     // L'étoile « focusable » (tabindex 0) suit la valeur ; à 0 c'est la première.
+    // En mode entier, focusedStar est toujours >= 1 (pas de radio "0").
     const focusedStar = current > 0 ? Math.ceil(current) : 1;
+    // Refs des boutons radio pour déplacer le focus programmatiquement (mode entier).
+    const radioRefs = React.useRef({});
+    const valueText = `${current} / ${max}`;
     function fill(star) {
         if (current >= star)
             return "full";
@@ -1527,10 +1531,47 @@ export function Rating({ value, max = 5, onChange, readonly = false, allowHalf =
         }
         commit(next);
     }
-    function onKeyDown(event) {
+    function onRadioKeyDown(event) {
         if (readonly)
             return;
-        const step = allowHalf ? 0.5 : 1;
+        const step = 1;
+        let handled = true;
+        let next = null;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                next = Math.min(max, current + step);
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                // En mode entier, ne pas descendre sous 1 (pas de radio "0").
+                next = Math.max(1, current - step);
+                break;
+            case "Home":
+                // Home → première étoile (1), pas 0 (aucun radio "0" n'existe).
+                next = 1;
+                break;
+            case "End":
+                next = max;
+                break;
+            default:
+                handled = false;
+        }
+        if (handled) {
+            event.preventDefault();
+            if (next !== null) {
+                commit(next);
+                // Déplacer le focus DOM vers le radio cible.
+                const targetEl = radioRefs.current[next > 0 ? Math.ceil(next) : 1];
+                if (targetEl)
+                    targetEl.focus();
+            }
+        }
+    }
+    function onSliderKeyDown(event) {
+        if (readonly)
+            return;
+        const step = 0.5;
         let handled = true;
         switch (event.key) {
             case "ArrowRight":
@@ -1553,9 +1594,24 @@ export function Rating({ value, max = 5, onChange, readonly = false, allowHalf =
         if (handled)
             event.preventDefault();
     }
-    return (_jsx("div", { ...rest, className: classNames("st-rating", `st-rating--${size}`, readonly && "st-rating--readonly", className), role: "radiogroup", "aria-label": label, "aria-readonly": readonly ? "true" : undefined, children: stars.map((star) => {
+    // Readonly : rendu non interactif avec role="img" et aria-label global.
+    if (readonly) {
+        return (_jsx("div", { ...rest, className: classNames("st-rating", `st-rating--${size}`, "st-rating--readonly", className), role: "img", "aria-label": label ? `${label} : ${valueText}` : valueText, children: stars.map((star) => {
+                const state = fill(star);
+                return (_jsx("span", { className: classNames("st-rating__star", state === "full" && "st-rating__star--full", state === "half" && "st-rating__star--half"), "aria-hidden": "true", children: state === "half" ? (_jsx(StarHalfIcon, { size: iconSize })) : (_jsx(StarIcon, { size: iconSize, fill: state === "full" ? "currentColor" : "none" })) }, star));
+            }) }));
+    }
+    // allowHalf : slider ARIA — valeurs fractionnaires (0.5 step).
+    if (allowHalf) {
+        return (_jsx("div", { ...rest, className: classNames("st-rating", `st-rating--${size}`, className), role: "slider", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": current, "aria-valuetext": valueText, tabIndex: 0, onKeyDown: onSliderKeyDown, children: stars.map((star) => {
+                const state = fill(star);
+                return (_jsx("span", { className: classNames("st-rating__star", state === "full" && "st-rating__star--full", state === "half" && "st-rating__star--half"), "aria-hidden": "true", onClick: (event) => onStarClick(event, star), children: state === "half" ? (_jsx(StarHalfIcon, { size: iconSize })) : (_jsx(StarIcon, { size: iconSize, fill: state === "full" ? "currentColor" : "none" })) }, star));
+            }) }));
+    }
+    // Mode entier : radiogroup / radio. aria-checked=true uniquement sur l'étoile == value.
+    return (_jsx("div", { ...rest, className: classNames("st-rating", `st-rating--${size}`, className), role: "radiogroup", "aria-label": label, children: stars.map((star) => {
             const state = fill(star);
-            return (_jsx("button", { type: "button", className: classNames("st-rating__star", state === "full" && "st-rating__star--full", state === "half" && "st-rating__star--half"), role: "radio", name: name, "aria-checked": Math.ceil(current) === star ? "true" : "false", "aria-label": `${star} / ${max}`, tabIndex: !readonly && star === focusedStar ? 0 : -1, disabled: readonly, onClick: (event) => onStarClick(event, star), onKeyDown: onKeyDown, children: state === "half" ? (_jsx(StarHalfIcon, { size: iconSize })) : (_jsx(StarIcon, { size: iconSize, fill: state === "full" ? "currentColor" : "none" })) }, star));
+            return (_jsx("button", { ref: (el) => { radioRefs.current[star] = el; }, type: "button", className: classNames("st-rating__star", state === "full" && "st-rating__star--full", state === "half" && "st-rating__star--half"), role: "radio", name: name, "aria-checked": current === star ? "true" : "false", "aria-label": `${star} / ${max}`, tabIndex: star === focusedStar ? 0 : -1, onClick: (event) => onStarClick(event, star), onKeyDown: onRadioKeyDown, children: _jsx(StarIcon, { size: iconSize, fill: state === "full" ? "currentColor" : "none" }) }, star));
         }) }));
 }
 function timeToMinutes(hhmm) {
@@ -1580,8 +1636,12 @@ export function TimePicker({ value, onChange, step = 15, min, max, format = "24"
     const fieldId = id ?? `st-timepicker-${reactId}`;
     const listId = `${fieldId}-list`;
     const hostRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const listRef = React.useRef(null);
     const [open, setOpen] = React.useState(false);
     const [current, setCurrent] = useControlled(value, value ?? "", onChange);
+    /** Index de l'option mise en évidence dans la listbox (-1 = aucune). */
+    const [activeIndex, setActiveIndex] = React.useState(-1);
     function display(hhmm) {
         if (format === "24")
             return hhmm;
@@ -1607,22 +1667,120 @@ export function TimePicker({ value, onChange, step = 15, min, max, format = "24"
         return result;
     }, [step, min, max]);
     const displayValue = current ? display(current) : "";
+    /** Id de l'option active, consommé par aria-activedescendant. */
+    const activeDescendant = open && activeIndex >= 0 ? `${listId}-opt-${activeIndex}` : undefined;
+    function scrollActiveIntoView(idx) {
+        const list = listRef.current;
+        if (!list || idx < 0)
+            return;
+        const optEl = list.querySelector(`#${listId}-opt-${idx}`);
+        if (optEl && typeof optEl.scrollIntoView === "function") {
+            optEl.scrollIntoView({ block: "nearest" });
+        }
+    }
+    function openList() {
+        if (disabled)
+            return;
+        const idx = current ? slots.indexOf(current) : -1;
+        const initIdx = idx >= 0 ? idx : 0;
+        setActiveIndex(initIdx);
+        setOpen(true);
+        // Le focus reste sur l'input (pattern aria-activedescendant).
+        // Scroll après rendu.
+        setTimeout(() => scrollActiveIntoView(initIdx), 0);
+    }
+    function closeList(returnFocus = true) {
+        setOpen(false);
+        setActiveIndex(-1);
+        if (returnFocus && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }
     function toggleOpen() {
         if (disabled)
             return;
-        setOpen((prev) => !prev);
+        if (open)
+            closeList(true);
+        else
+            openList();
     }
     function pick(slot) {
         setCurrent(slot);
-        setOpen(false);
+        closeList(true);
     }
-    useOutsideMouseDown(open, hostRef, () => setOpen(false));
-    return (_jsxs("div", { className: classNames("st-field", className), ref: hostRef, ...rest, children: [_jsxs("div", { className: "st-field__control", children: [label ? (_jsx("label", { className: "st-field__label", htmlFor: fieldId, children: label })) : null, _jsxs("span", { className: classNames("st-timepicker", `st-timepicker--${size}`), children: [_jsx("input", { id: fieldId, type: "text", readOnly: true, className: "st-timepicker__control", value: displayValue, placeholder: format === "24" ? "HH:mm" : "hh:mm AM", disabled: disabled, role: "combobox", "aria-haspopup": "listbox", "aria-controls": listId, "aria-expanded": open ? "true" : "false", onClick: toggleOpen }), _jsx("button", { type: "button", className: "st-timepicker__trigger", "aria-label": "Ouvrir la liste des horaires", "aria-haspopup": "listbox", "aria-expanded": open ? "true" : "false", disabled: disabled, onClick: toggleOpen, children: _jsx(ClockIcon, { size: 16 }) })] })] }), open ? (_jsx("ul", { id: listId, className: "st-timepicker__list", role: "listbox", "aria-label": label ?? "Horaires", tabIndex: -1, onKeyDown: (event) => {
-                    if (event.key === "Escape") {
-                        event.preventDefault();
-                        setOpen(false);
-                    }
-                }, children: slots.map((slot) => (_jsx("li", { role: "presentation", children: _jsx("button", { type: "button", className: classNames("st-timepicker__option", slot === current && "st-timepicker__option--selected"), role: "option", "aria-selected": slot === current ? "true" : "false", onClick: () => pick(slot), children: display(slot) }) }, slot))) })) : null] }));
+    useOutsideMouseDown(open, hostRef, () => closeList(false));
+    function onInputKeyDown(event) {
+        if (disabled)
+            return;
+        switch (event.key) {
+            case "ArrowDown": {
+                event.preventDefault();
+                if (!open) {
+                    openList();
+                }
+                else {
+                    const next = Math.min(activeIndex + 1, slots.length - 1);
+                    setActiveIndex(next);
+                    scrollActiveIntoView(next);
+                }
+                break;
+            }
+            case "ArrowUp": {
+                event.preventDefault();
+                if (!open) {
+                    openList();
+                }
+                else {
+                    const next = Math.max(activeIndex - 1, 0);
+                    setActiveIndex(next);
+                    scrollActiveIntoView(next);
+                }
+                break;
+            }
+            case "Home": {
+                event.preventDefault();
+                if (!open) {
+                    openList();
+                }
+                else {
+                    setActiveIndex(0);
+                    scrollActiveIntoView(0);
+                }
+                break;
+            }
+            case "End": {
+                event.preventDefault();
+                if (!open) {
+                    openList();
+                }
+                else {
+                    const last = slots.length - 1;
+                    setActiveIndex(last);
+                    scrollActiveIntoView(last);
+                }
+                break;
+            }
+            case "Enter":
+            case " ": {
+                event.preventDefault();
+                if (!open) {
+                    openList();
+                }
+                else if (activeIndex >= 0 && activeIndex < slots.length) {
+                    pick(slots[activeIndex]);
+                }
+                break;
+            }
+            case "Escape": {
+                if (open) {
+                    event.preventDefault();
+                    closeList(true);
+                }
+                break;
+            }
+        }
+    }
+    return (_jsxs("div", { className: classNames("st-field", className), ref: hostRef, ...rest, children: [_jsxs("div", { className: "st-field__control", children: [label ? (_jsx("label", { className: "st-field__label", htmlFor: fieldId, children: label })) : null, _jsxs("span", { className: classNames("st-timepicker", `st-timepicker--${size}`), children: [_jsx("input", { ref: inputRef, id: fieldId, type: "text", readOnly: true, className: "st-timepicker__control", value: displayValue, placeholder: format === "24" ? "HH:mm" : "hh:mm AM", disabled: disabled, role: "combobox", "aria-haspopup": "listbox", "aria-controls": listId, "aria-expanded": open ? "true" : "false", "aria-activedescendant": activeDescendant, "aria-autocomplete": "none", onClick: toggleOpen, onKeyDown: onInputKeyDown }), _jsx("button", { type: "button", className: "st-timepicker__trigger", "aria-label": "Ouvrir la liste des horaires", "aria-haspopup": "listbox", "aria-expanded": open ? "true" : "false", tabIndex: -1, disabled: disabled, onClick: toggleOpen, children: _jsx(ClockIcon, { size: 16 }) })] })] }), open ? (_jsx("ul", { ref: listRef, id: listId, className: "st-timepicker__list", role: "listbox", "aria-label": label ?? "Horaires", tabIndex: -1, children: slots.map((slot, i) => (_jsx("li", { role: "presentation", children: _jsx("div", { id: `${listId}-opt-${i}`, className: classNames("st-timepicker__option", slot === current && "st-timepicker__option--selected", i === activeIndex && "st-timepicker__option--active"), role: "option", "aria-selected": slot === current ? "true" : "false", tabIndex: -1, onMouseDown: (e) => e.preventDefault(), onClick: () => pick(slot), onMouseEnter: () => setActiveIndex(i), children: display(slot) }) }, slot))) })) : null] }));
 }
 function ClockIcon({ size }) {
     return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("polyline", { points: "12 6 12 12 16 14" })] }));
@@ -1709,8 +1867,8 @@ export function Calendar({ value, onChange, min, max, range = false, weekStartsO
         }
         return cells;
     }, [viewYear, viewMonth, weekStartsOn]);
-    const minDate = calParseISO(min);
-    const maxDate = calParseISO(max);
+    const minDate = React.useMemo(() => calParseISO(min), [min]);
+    const maxDate = React.useMemo(() => calParseISO(max), [max]);
     function isOutOfBounds(date) {
         const d = calStartOfDay(date).getTime();
         if (minDate && d < minDate.getTime())
@@ -1730,23 +1888,106 @@ export function Calendar({ value, onChange, min, max, range = false, weekStartsO
         const d = calStartOfDay(date).getTime();
         return d > rangeStart.getTime() && d < rangeEnd.getTime();
     }
-    function previousMonth() {
-        if (viewMonth === 0) {
-            setViewMonth(11);
-            setViewYear((y) => y - 1);
+    // --- Roving tabindex : date active dans la grille -------------------------
+    // INVARIANT : focusDate est toujours dans le mois affiché ET non-disabled.
+    function calClampToMonth(preferred, y, m) {
+        if (preferred.getFullYear() === y &&
+            preferred.getMonth() === m &&
+            !isOutOfBounds(preferred)) {
+            return preferred;
         }
-        else {
-            setViewMonth((m) => m - 1);
+        // Chercher le jour sélectionné dans ce mois en priorité.
+        const sel = !range ? single : rangeStart;
+        if (sel && sel.getFullYear() === y && sel.getMonth() === m && !isOutOfBounds(sel)) {
+            return sel;
         }
+        const lastDay = new Date(y, m + 1, 0).getDate();
+        for (let dd = 1; dd <= lastDay; dd++) {
+            const candidate = calStartOfDay(new Date(y, m, dd));
+            if (!isOutOfBounds(candidate))
+                return candidate;
+        }
+        return null;
     }
-    function nextMonth() {
-        if (viewMonth === 11) {
-            setViewMonth(0);
-            setViewYear((y) => y + 1);
+    function calInitialFocusDate() {
+        const sel = !range ? single : rangeStart;
+        if (sel && sel.getFullYear() === viewYear && sel.getMonth() === viewMonth && !isOutOfBounds(sel)) {
+            return sel;
         }
-        else {
-            setViewMonth((m) => m + 1);
+        const lastDay = new Date(viewYear, viewMonth + 1, 0).getDate();
+        for (let dd = 1; dd <= lastDay; dd++) {
+            const candidate = calStartOfDay(new Date(viewYear, viewMonth, dd));
+            if (!isOutOfBounds(candidate))
+                return candidate;
         }
+        return calStartOfDay(new Date(viewYear, viewMonth, 1));
+    }
+    const [focusDate, setFocusDate] = React.useState(calInitialFocusDate);
+    const gridRef = React.useRef(null);
+    // Resynchronise focusDate quand viewYear/viewMonth change.
+    // Utilise une ref pour éviter les dépendances circulaires dans l'effet.
+    const isOutOfBoundsRef = React.useRef(isOutOfBounds);
+    isOutOfBoundsRef.current = isOutOfBounds;
+    const calClampToMonthRef = React.useRef(calClampToMonth);
+    calClampToMonthRef.current = calClampToMonth;
+    React.useEffect(() => {
+        setFocusDate((prev) => {
+            const clamped = calClampToMonthRef.current(prev, viewYear, viewMonth);
+            return clamped ?? prev;
+        });
+    }, [viewYear, viewMonth]);
+    function focusActiveCell() {
+        const grid = gridRef.current;
+        if (!grid)
+            return;
+        const iso = calToISO(focusDate);
+        const btn = grid.querySelector(`[data-date="${iso}"]`);
+        btn?.focus();
+    }
+    function moveFocus(deltaDays) {
+        const next = calStartOfDay(new Date(focusDate));
+        next.setDate(next.getDate() + deltaDays);
+        let nextYear = viewYear;
+        let nextMonth = viewMonth;
+        if (next.getFullYear() !== viewYear || next.getMonth() !== viewMonth) {
+            nextYear = next.getFullYear();
+            nextMonth = next.getMonth();
+            if (nextMonth > viewMonth || nextYear > viewYear) {
+                // Next month
+                if (viewMonth === 11) {
+                    setViewMonth(0);
+                    setViewYear((y) => y + 1);
+                }
+                else {
+                    setViewMonth((m) => m + 1);
+                }
+            }
+            else {
+                // Previous month
+                if (viewMonth === 0) {
+                    setViewMonth(11);
+                    setViewYear((y) => y - 1);
+                }
+                else {
+                    setViewMonth((m) => m - 1);
+                }
+            }
+        }
+        setFocusDate(next);
+        setTimeout(focusActiveCell, 0);
+    }
+    function previousMonth() {
+        const targetMonth = viewMonth === 0 ? 11 : viewMonth - 1;
+        const targetYear = viewMonth === 0 ? viewYear - 1 : viewYear;
+        setViewMonth(targetMonth);
+        setViewYear(targetYear);
+        // focusDate will be re-clamped by the viewYear/viewMonth effect
+    }
+    function nextMonth() {
+        const targetMonth = viewMonth === 11 ? 0 : viewMonth + 1;
+        const targetYear = viewMonth === 11 ? viewYear + 1 : viewYear;
+        setViewMonth(targetMonth);
+        setViewYear(targetYear);
     }
     function pickDate(date) {
         if (isOutOfBounds(date))
@@ -1765,23 +2006,83 @@ export function Calendar({ value, onChange, min, max, range = false, weekStartsO
         }
         setCurrent([calToISO(rangeStart), iso]);
     }
+    function onKeyDown(event) {
+        switch (event.key) {
+            case "ArrowLeft":
+                event.preventDefault();
+                moveFocus(-1);
+                break;
+            case "ArrowRight":
+                event.preventDefault();
+                moveFocus(1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                moveFocus(-7);
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                moveFocus(7);
+                break;
+            case "Home": {
+                event.preventDefault();
+                const dayOfWeek = focusDate.getDay();
+                const offset = (dayOfWeek - weekStartsOn + 7) % 7;
+                moveFocus(-offset);
+                break;
+            }
+            case "End": {
+                event.preventDefault();
+                const dayOfWeek = focusDate.getDay();
+                const offset = 6 - ((dayOfWeek - weekStartsOn + 7) % 7);
+                moveFocus(offset);
+                break;
+            }
+            case "PageUp": {
+                event.preventDefault();
+                const puDay = focusDate.getDate();
+                const puTargetMonth = viewMonth === 0 ? 11 : viewMonth - 1;
+                const puTargetYear = viewMonth === 0 ? viewYear - 1 : viewYear;
+                const puLastDay = new Date(puTargetYear, puTargetMonth + 1, 0).getDate();
+                const puNext = calStartOfDay(new Date(puTargetYear, puTargetMonth, Math.min(puDay, puLastDay)));
+                setFocusDate(puNext);
+                previousMonth();
+                setTimeout(focusActiveCell, 0);
+                break;
+            }
+            case "PageDown": {
+                event.preventDefault();
+                const pdDay = focusDate.getDate();
+                const pdTargetMonth = viewMonth === 11 ? 0 : viewMonth + 1;
+                const pdTargetYear = viewMonth === 11 ? viewYear + 1 : viewYear;
+                const pdLastDay = new Date(pdTargetYear, pdTargetMonth + 1, 0).getDate();
+                const pdNext = calStartOfDay(new Date(pdTargetYear, pdTargetMonth, Math.min(pdDay, pdLastDay)));
+                setFocusDate(pdNext);
+                nextMonth();
+                setTimeout(focusActiveCell, 0);
+                break;
+            }
+            case "Enter":
+            case " ": {
+                event.preventDefault();
+                if (!isOutOfBounds(focusDate))
+                    pickDate(focusDate);
+                break;
+            }
+        }
+    }
     const monthLabel = monthFormatter.format(new Date(viewYear, viewMonth, 1));
-    return (_jsxs("div", { className: classNames("st-calendar", className), ...rest, children: [_jsxs("div", { className: "st-calendar__nav", children: [_jsx("button", { type: "button", className: "st-calendar__navBtn", "aria-label": resolvedPrevLabel, onClick: previousMonth, children: _jsx(ChevronLeftIcon, { size: 18 }) }), _jsx("span", { className: "st-calendar__monthLabel", "aria-live": "polite", children: monthLabel }), _jsx("button", { type: "button", className: "st-calendar__navBtn", "aria-label": resolvedNextLabel, onClick: nextMonth, children: _jsx(ChevronRightIcon, { size: 18 }) })] }), _jsxs("div", { className: "st-calendar__grid", role: "grid", tabIndex: -1, "aria-label": monthLabel, onKeyDown: (event) => {
-                    if (event.key === "PageUp") {
-                        event.preventDefault();
-                        previousMonth();
-                    }
-                    else if (event.key === "PageDown") {
-                        event.preventDefault();
-                        nextMonth();
-                    }
-                }, children: [_jsx("div", { className: "st-calendar__weekdays", role: "row", children: weekdayLabels.map((wd, i) => (_jsx("span", { className: "st-calendar__weekday", role: "columnheader", children: wd }, `${wd}-${i}`))) }), _jsx("div", { className: "st-calendar__days", children: grid.map((cell, i) => {
-                            const oob = isOutOfBounds(cell.date);
-                            const selected = isSelected(cell.date);
-                            const inRange = isInRange(cell.date);
-                            const isToday = calIsSameDay(cell.date, today);
-                            return (_jsx("button", { type: "button", className: classNames("st-calendar__day", !cell.inMonth && "st-calendar__day--outside", selected && "st-calendar__day--selected", inRange && "st-calendar__day--inRange", isToday && "st-calendar__day--today"), role: "gridcell", "aria-label": cellFormatter.format(cell.date), "aria-selected": selected ? "true" : "false", "aria-current": isToday ? "date" : undefined, "aria-disabled": oob ? "true" : undefined, disabled: oob, onClick: () => pickDate(cell.date), children: cell.date.getDate() }, i));
-                        }) })] })] }));
+    return (_jsxs("div", { className: classNames("st-calendar", className), ...rest, children: [_jsxs("div", { className: "st-calendar__nav", children: [_jsx("button", { type: "button", className: "st-calendar__navBtn", "aria-label": resolvedPrevLabel, onClick: previousMonth, children: _jsx(ChevronLeftIcon, { size: 18 }) }), _jsx("span", { className: "st-calendar__monthLabel", "aria-live": "polite", children: monthLabel }), _jsx("button", { type: "button", className: "st-calendar__navBtn", "aria-label": resolvedNextLabel, onClick: nextMonth, children: _jsx(ChevronRightIcon, { size: 18 }) })] }), _jsxs("div", { ref: gridRef, className: "st-calendar__grid", role: "grid", "aria-label": monthLabel, onKeyDown: onKeyDown, children: [_jsx("div", { className: "st-calendar__weekdays", role: "row", children: weekdayLabels.map((wd, i) => (_jsx("span", { className: "st-calendar__weekday", role: "columnheader", children: wd }, `${wd}-${i}`))) }), _jsx("div", { className: "st-calendar__days", children: Array.from({ length: 6 }, (_, rowIdx) => (_jsx("div", { className: "st-calendar__week", role: "row", children: grid.slice(rowIdx * 7, rowIdx * 7 + 7).map((cell, colIdx) => {
+                                const oob = isOutOfBounds(cell.date);
+                                const selected = isSelected(cell.date);
+                                const inRange = isInRange(cell.date);
+                                const isToday = calIsSameDay(cell.date, today);
+                                const isActive = calIsSameDay(cell.date, focusDate);
+                                return (_jsx("button", { type: "button", className: classNames("st-calendar__day", !cell.inMonth && "st-calendar__day--outside", selected && "st-calendar__day--selected", inRange && "st-calendar__day--inRange", isToday && "st-calendar__day--today"), role: "gridcell", "aria-label": cellFormatter.format(cell.date), "aria-selected": selected ? "true" : "false", "aria-current": isToday ? "date" : undefined, "aria-disabled": oob ? "true" : undefined, disabled: oob, tabIndex: isActive && !oob ? 0 : -1, "data-date": calToISO(cell.date), onClick: () => {
+                                        setFocusDate(calStartOfDay(cell.date));
+                                        pickDate(cell.date);
+                                    }, children: cell.date.getDate() }, rowIdx * 7 + colIdx));
+                            }) }, rowIdx))) })] })] }));
 }
 function ChevronLeftIcon({ size }) {
     return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "15 18 9 12 15 6" }) }));
@@ -1791,6 +2092,8 @@ function ChevronRightIcon({ size }) {
 }
 export function SlideIndicator({ count, current = 0, onChange, size = "md", variant = "dots", label = "Diapositive", className, ...rest }) {
     const items = Array.from({ length: Math.max(0, count) }, (_, i) => i);
+    // Refs des boutons pour déplacer le focus programmatiquement lors de la navigation clavier.
+    const buttonRefs = React.useRef({});
     function select(index) {
         if (index < 0 || index >= count || index === current)
             return;
@@ -1817,9 +2120,13 @@ export function SlideIndicator({ count, current = 0, onChange, size = "md", vari
                 return;
         }
         event.preventDefault();
+        // Déplacer le focus DOM vers le bouton cible (roving tabindex correct).
+        const targetEl = buttonRefs.current[target];
+        if (targetEl)
+            targetEl.focus();
         select(target);
     }
-    return (_jsx("div", { ...rest, className: classNames("st-slideIndicator", `st-slideIndicator--${size}`, `st-slideIndicator--${variant}`, className), role: "tablist", "aria-label": label, children: items.map((index) => (_jsx("button", { type: "button", className: classNames("st-slideIndicator__dot", index === current && "st-slideIndicator__dot--current"), role: "tab", "aria-selected": index === current ? "true" : "false", "aria-current": index === current ? "true" : undefined, "aria-label": `${label} ${index + 1}`, tabIndex: index === current ? 0 : -1, onClick: () => select(index), onKeyDown: (event) => onKeyDown(event, index) }, index))) }));
+    return (_jsx("div", { ...rest, className: classNames("st-slideIndicator", `st-slideIndicator--${size}`, `st-slideIndicator--${variant}`, className), role: "group", "aria-label": label, children: items.map((index) => (_jsx("button", { ref: (el) => { buttonRefs.current[index] = el; }, type: "button", className: classNames("st-slideIndicator__dot", index === current && "st-slideIndicator__dot--current"), "aria-current": index === current ? "true" : undefined, "aria-label": `${label} ${index + 1}`, tabIndex: index === current ? 0 : -1, onClick: () => select(index), onKeyDown: (event) => onKeyDown(event, index) }, index))) }));
 }
 export function Autosave({ status = "idle", lastSaved, onRetry, labels, retryLabel, locale = "fr-FR", className, ...rest }) {
     const isFr = (locale ?? "fr-FR").toLowerCase().startsWith("fr");