@sentropic/design-system-svelte 0.17.0 → 0.18.0

package/dist/Calendar.svelte

@@ -173,22 +173,56 @@
     return d > rangeStart.getTime() && d < rangeEnd.getTime();
   }
 
-  function previousMonth() {
-    if (viewMonth === 0) {
-      viewMonth = 11;
-      viewYear -= 1;
-    } else {
-      viewMonth -= 1;
+  /**
+   * Retourne le premier jour activable (non-disabled) du mois `year`/`month`,
+   * en partant de `preferred` si celui-ci est dans le bon mois et non-disabled,
+   * sinon en balayant du 1er au dernier jour du mois.
+   * Renvoie `null` si tous les jours sont disabled (cas extrême).
+   */
+  function clampToMonth(preferred: Date, year: number, month: number): Date | null {
+    // Si preferred est dans le bon mois et non-disabled → on le garde.
+    if (
+      preferred.getFullYear() === year &&
+      preferred.getMonth() === month &&
+      !isOutOfBounds(preferred)
+    ) {
+      return preferred;
+    }
+    // Chercher le jour sélectionné dans ce mois en priorité.
+    const sel = !range ? single : rangeStart;
+    if (sel && sel.getFullYear() === year && sel.getMonth() === month && !isOutOfBounds(sel)) {
+      return sel;
+    }
+    // Balayer du 1er au dernier jour du mois.
+    const lastDay = new Date(year, month + 1, 0).getDate();
+    for (let d = 1; d <= lastDay; d++) {
+      const candidate = startOfDay(new Date(year, month, d));
+      if (!isOutOfBounds(candidate)) return candidate;
     }
+    // Aucun jour activable (mois entièrement hors-bornes) : retourner null pour
+    // signaler l'absence de cellule focusable. Les appelants doivent traiter ce cas.
+    return null;
+  }
+
+  function previousMonth() {
+    const targetMonth = viewMonth === 0 ? 11 : viewMonth - 1;
+    const targetYear = viewMonth === 0 ? viewYear - 1 : viewYear;
+    viewMonth = targetMonth;
+    viewYear = targetYear;
+    const clamped = clampToMonth(focusDate, targetYear, targetMonth);
+    if (clamped) focusDate = clamped;
+    // Si clamped === null, le mois est entièrement hors-bornes : focusDate garde
+    // l'ancienne valeur — aucune cellule ne sera tabindex=0 car toutes sont disabled.
   }
 
   function nextMonth() {
-    if (viewMonth === 11) {
-      viewMonth = 0;
-      viewYear += 1;
-    } else {
-      viewMonth += 1;
-    }
+    const targetMonth = viewMonth === 11 ? 0 : viewMonth + 1;
+    const targetYear = viewMonth === 11 ? viewYear + 1 : viewYear;
+    viewMonth = targetMonth;
+    viewYear = targetYear;
+    const clamped = clampToMonth(focusDate, targetYear, targetMonth);
+    if (clamped) focusDate = clamped;
+    // Si clamped === null, le mois est entièrement hors-bornes : idem.
   }
 
   function pickDate(date: Date) {
@@ -217,13 +251,149 @@
 
   const monthLabel = $derived(monthFormatter.format(new Date(viewYear, viewMonth, 1)));
 
+  // --- Roving tabindex : date active dans la grille -------------------------
+  // La "date active" est celle qui a tabindex=0 ; elle suit la sélection ou
+  // se positionne sur le 1er jour activable du mois affiché en l'absence de sélection.
+  // INVARIANT : focusDate est toujours dans le mois affiché ET non-disabled.
+  function initialFocusDate(): Date {
+    const sel = !range ? single : rangeStart;
+    if (sel && sel.getFullYear() === viewYear && sel.getMonth() === viewMonth && !isOutOfBounds(sel)) {
+      return sel;
+    }
+    // Trouver le premier jour activable du mois.
+    const lastDay = new Date(viewYear, viewMonth + 1, 0).getDate();
+    for (let d = 1; d <= lastDay; d++) {
+      const candidate = startOfDay(new Date(viewYear, viewMonth, d));
+      if (!isOutOfBounds(candidate)) return candidate;
+    }
+    // Mois entièrement hors-bornes : retourner le 1er jour quand même pour
+    // initialiser focusDate, mais aucune cellule ne sera tabindex=0 (toutes disabled).
+    return startOfDay(new Date(viewYear, viewMonth, 1));
+  }
+
+  let focusDate = $state<Date>(initialFocusDate());
+
+  // Resynchronise focusDate quand la prop value change (sélection externe).
+  // Si la nouvelle valeur est dans le mois affiché et non-disabled, on la pointe ;
+  // sinon on re-clamp pour garantir l'invariant.
+  $effect(() => {
+    const sel = !range ? single : rangeStart;
+    if (sel) {
+      if (sel.getFullYear() === viewYear && sel.getMonth() === viewMonth && !isOutOfBounds(sel)) {
+        focusDate = sel;
+      } else {
+        const clamped = clampToMonth(focusDate, viewYear, viewMonth);
+        if (clamped) focusDate = clamped;
+        // Si null (mois entièrement hors-bornes), on ne touche pas focusDate :
+        // le tabindex=0 ne sera posé sur aucune cellule disabled.
+      }
+    }
+  });
+
+  // Resynchronise focusDate quand le mois affiché change via la prop `month`
+  // (l'$effect sur `month` dans le bloc précédent met viewYear/viewMonth à jour,
+  //  mais focusDate peut pointer vers l'ancien mois).
+  $effect(() => {
+    // Dépendances explicites : viewYear + viewMonth.
+    const y = viewYear;
+    const m = viewMonth;
+    if (focusDate.getFullYear() !== y || focusDate.getMonth() !== m || isOutOfBounds(focusDate)) {
+      const clamped = clampToMonth(focusDate, y, m);
+      if (clamped) focusDate = clamped;
+      // Si null (mois entièrement hors-bornes), aucune cellule ne reçoit tabindex=0.
+    }
+  });
+
+  // Résoud l'élément DOM du jour actif et y place le focus.
+  let gridEl = $state<HTMLElement | null>(null);
+
+  function focusActiveCell() {
+    if (!gridEl) return;
+    const iso = toISO(focusDate);
+    const btn = gridEl.querySelector<HTMLElement>(`[data-date="${iso}"]`);
+    btn?.focus();
+  }
+
+  // Déplace focusDate de `deltaDays` jours ; change de mois si nécessaire.
+  function moveFocus(deltaDays: number) {
+    const next = new Date(focusDate);
+    next.setDate(next.getDate() + deltaDays);
+    // Si hors mois affiché, on bascule le mois.
+    if (next.getFullYear() !== viewYear || next.getMonth() !== viewMonth) {
+      viewYear = next.getFullYear();
+      viewMonth = next.getMonth();
+    }
+    focusDate = startOfDay(next);
+    // Focus après rendu.
+    setTimeout(focusActiveCell, 0);
+  }
+
   function onKeyDown(event: KeyboardEvent) {
-    if (event.key === "PageUp") {
-      event.preventDefault();
-      previousMonth();
-    } else if (event.key === "PageDown") {
-      event.preventDefault();
-      nextMonth();
+    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": {
+        // Début de la semaine (selon weekStartsOn).
+        event.preventDefault();
+        const dayOfWeek = focusDate.getDay();
+        const offset = (dayOfWeek - weekStartsOn + 7) % 7;
+        moveFocus(-offset);
+        break;
+      }
+      case "End": {
+        // Fin de la semaine.
+        event.preventDefault();
+        const dayOfWeek = focusDate.getDay();
+        const offset = (6 - ((dayOfWeek - weekStartsOn + 7) % 7));
+        moveFocus(offset);
+        break;
+      }
+      case "PageUp": {
+        event.preventDefault();
+        // previousMonth() met à jour viewYear/viewMonth ET clamp focusDate via clampToMonth,
+        // en essayant de conserver le même numéro de jour dans le mois cible.
+        const puDay = focusDate.getDate();
+        const puTargetMonth = viewMonth === 0 ? 11 : viewMonth - 1;
+        const puTargetYear = viewMonth === 0 ? viewYear - 1 : viewYear;
+        // Construit le candidat "même jour" avant d'appeler previousMonth pour que
+        // clampToMonth puisse l'évaluer (il utilise focusDate en argument).
+        const puLastDay = new Date(puTargetYear, puTargetMonth + 1, 0).getDate();
+        focusDate = startOfDay(new Date(puTargetYear, puTargetMonth, Math.min(puDay, puLastDay)));
+        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();
+        focusDate = startOfDay(new Date(pdTargetYear, pdTargetMonth, Math.min(pdDay, pdLastDay)));
+        nextMonth();
+        setTimeout(focusActiveCell, 0);
+        break;
+      }
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        if (!isOutOfBounds(focusDate)) pickDate(focusDate);
+        break;
+      }
     }
   }
 </script>
@@ -248,12 +418,15 @@
       <ChevronRight size={18} aria-hidden="true" />
     </button>
   </div>
+  <!-- svelte-ignore a11y_interactive_supports_focus -->
+  <!-- Faux positif : le grid utilise le roving tabindex (cellules-enfants portent tabindex),
+       pas un tabindex sur le conteneur — conforme ARIA Grid Pattern. -->
   <div
     class="st-calendar__grid"
     role="grid"
-    tabindex="-1"
     aria-label={monthLabel}
     onkeydown={onKeyDown}
+    bind:this={gridEl}
   >
     <div class="st-calendar__weekdays" role="row">
       {#each weekdayLabels as wd (wd)}
@@ -261,28 +434,38 @@
       {/each}
     </div>
     <div class="st-calendar__days">
-      {#each grid as cell, i (i)}
-        {@const oob = isOutOfBounds(cell.date)}
-        {@const selected = isSelected(cell.date)}
-        {@const inRange = isInRange(cell.date)}
-        {@const isToday = isSameDay(cell.date, today)}
-        <button
-          type="button"
-          class="st-calendar__day"
-          class:st-calendar__day--outside={!cell.inMonth}
-          class:st-calendar__day--selected={selected}
-          class:st-calendar__day--inRange={inRange}
-          class:st-calendar__day--today={isToday}
-          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)}
-        >
-          {cell.date.getDate()}
-        </button>
+      {#each { length: 6 } as _, rowIdx (rowIdx)}
+        <div class="st-calendar__week" role="row">
+          {#each grid.slice(rowIdx * 7, rowIdx * 7 + 7) as cell, colIdx (rowIdx * 7 + colIdx)}
+            {@const oob = isOutOfBounds(cell.date)}
+            {@const selected = isSelected(cell.date)}
+            {@const inRange = isInRange(cell.date)}
+            {@const isToday = isSameDay(cell.date, today)}
+            {@const isActive = isSameDay(cell.date, focusDate)}
+            <button
+              type="button"
+              class="st-calendar__day"
+              class:st-calendar__day--outside={!cell.inMonth}
+              class:st-calendar__day--selected={selected}
+              class:st-calendar__day--inRange={inRange}
+              class:st-calendar__day--today={isToday}
+              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={toISO(cell.date)}
+              onclick={() => {
+                focusDate = startOfDay(cell.date);
+                pickDate(cell.date);
+              }}
+            >
+              {cell.date.getDate()}
+            </button>
+          {/each}
+        </div>
       {/each}
     </div>
   </div>
@@ -340,10 +523,22 @@
     gap: var(--st-spacing-1, 0.25rem);
   }
 
-  .st-calendar__weekdays,
+  .st-calendar__weekdays {
+    display: grid;
+    gap: 2px;
+    grid-template-columns: repeat(7, minmax(2rem, 1fr));
+  }
+
   .st-calendar__days {
     display: grid;
     gap: 2px;
+  }
+
+  /* role="row" doit être un vrai nœud exposé à l'arbre a11y.
+     display:contents supprime le nœud → on utilise display:grid à la place. */
+  .st-calendar__week {
+    display: grid;
+    gap: 2px;
     grid-template-columns: repeat(7, minmax(2rem, 1fr));
   }
 

package/dist/Calendar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Calendar.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAI7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAChF,wEAAwE;IACxE,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AA+OJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Calendar.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Calendar.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAI7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAChF,wEAAwE;IACxE,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAmaJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/Popper.svelte

@@ -44,6 +44,23 @@
     class?: string;
     /** Notified whenever the resolved placement changes (after flip). */
     onPlacementChange?: (placement: PopperPlacement) => void;
+    /**
+     * (a11y, opt-in) When true, traps keyboard focus inside the panel while it
+     * is open (Tab cycles through focusable children; Shift+Tab cycles backward).
+     * Intended for modal overlays built on top of Popper. Non-modal usage (menus,
+     * tooltips) should leave this false (default) to keep the natural tab order.
+     */
+    trapFocus?: boolean;
+    /**
+     * (a11y) When true (default when open), pressing Escape calls `onClose` so
+     * the consumer can set `open = false`. Set to false to suppress this behavior.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Called when the panel requests closing (Escape key, or future outside-click).
+     * The consumer is responsible for updating `open` in response.
+     */
+    onClose?: () => void;
     children?: Snippet;
   };
 
@@ -158,6 +175,8 @@
 </script>
 
 <script lang="ts">
+  import { untrack } from "svelte";
+
   let {
     anchor,
     open = false,
@@ -170,6 +189,9 @@
     portal = true,
     class: className,
     onPlacementChange,
+    trapFocus = false,
+    closeOnEscape = true,
+    onClose,
     children
   }: PopperProps = $props();
 
@@ -243,17 +265,152 @@
     };
   });
 
+  // ─── a11y: focus management ────────────────────────────────────────────────
+  // Capture the element that had focus before the panel opened so we can
+  // restore it when the panel closes (only when trapFocus is active).
+  // SSR-safe (guarded by typeof window).
+  // Use a plain variable (not $state) so reads inside the effect are not
+  // tracked and don't cause the effect to re-run on every preFocusEl write.
+  let preFocusEl: HTMLElement | null = null;
+
+  $effect(() => {
+    if (typeof window === "undefined") return;
+    if (open && anchor) {
+      untrack(() => {
+        // Snapshot the active element at open time only when trapFocus is active,
+        // so restoreFocus doesn't steal focus on non-modal usage.
+        if (trapFocus) {
+          preFocusEl = document.activeElement as HTMLElement | null;
+        }
+      });
+    } else {
+      // Panel just closed: restore focus only if trapFocus was active and the
+      // original element is still connected to the DOM.
+      untrack(() => {
+        if (
+          trapFocus &&
+          preFocusEl &&
+          typeof preFocusEl.focus === "function" &&
+          document.contains(preFocusEl)
+        ) {
+          preFocusEl.focus();
+        }
+        preFocusEl = null;
+      });
+    }
+  });
+
+  /** Returns all keyboard-focusable children of `container`. */
+  function getFocusable(container: HTMLElement): HTMLElement[] {
+    if (typeof window === "undefined") return [];
+    return Array.from(
+      container.querySelectorAll<HTMLElement>(
+        'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),' +
+        'textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]'
+      )
+    ).filter((el) => !el.closest("[disabled]"));
+  }
+
+  // ─── a11y: move focus into the panel on open (trapFocus only) ─────────────
+  $effect(() => {
+    if (typeof window === "undefined") return;
+    if (!open || !trapFocus || !panel) return;
+    // Wait for the panel to be mounted before moving focus.
+    untrack(() => {
+      const focusable = getFocusable(panel!);
+      if (focusable.length > 0) {
+        focusable[0].focus();
+      } else {
+        // If no focusable children, focus the panel itself so Escape works.
+        panel!.focus();
+      }
+    });
+  });
+
+  // ─── a11y: recapture focus that escapes the trap (focusin on document) ─────
+  $effect(() => {
+    if (typeof window === "undefined") return;
+    if (!open || !trapFocus) return;
+
+    function handleFocusIn(e: FocusEvent) {
+      if (!panel) return;
+      const target = e.target as Node | null;
+      // If focus landed outside the panel, bring it back to the first focusable.
+      if (target && !panel.contains(target)) {
+        const focusable = getFocusable(panel);
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        } else {
+          panel.focus();
+        }
+      }
+    }
+
+    document.addEventListener("focusin", handleFocusIn);
+    return () => {
+      document.removeEventListener("focusin", handleFocusIn);
+    };
+  });
+
+  // ─── a11y: Escape on document (closeOnEscape) ─────────────────────────────
+  // Listen on document so the Escape shortcut works even when focus is outside
+  // the panel (e.g. before the first Tab, or in an edge case where focus escaped).
+  $effect(() => {
+    if (typeof window === "undefined") return;
+    if (!open || !closeOnEscape) return;
+
+    function handleDocKeydown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose?.();
+      }
+    }
+
+    document.addEventListener("keydown", handleDocKeydown);
+    return () => {
+      document.removeEventListener("keydown", handleDocKeydown);
+    };
+  });
+
+  /** Keyboard handler attached to the panel for Tab-trap cycling. */
+  function handlePanelKeydown(e: KeyboardEvent) {
+    if (typeof window === "undefined") return;
+
+    // Tab trap: cycle focus within the panel.
+    if (e.key === "Tab" && trapFocus && panel) {
+      const focusable = getFocusable(panel);
+      if (focusable.length === 0) { e.preventDefault(); return; }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
+  }
+
   const panelStyle = () =>
     `position: ${strategy}; top: ${top}px; left: ${left}px;`;
   const panelSide = () => splitPlacement(resolvedPlacement).side;
 </script>
 
 {#snippet floating()}
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={panel}
     class={className ? `st-popper ${className}` : "st-popper"}
     data-popper-placement={resolvedPlacement}
     style={panelStyle()}
+    tabindex={trapFocus ? -1 : undefined}
+    onkeydown={trapFocus ? handlePanelKeydown : undefined}
   >
     {@render children?.()}
     {#if arrow}

package/dist/Popper.svelte.d.ts

@@ -26,6 +26,23 @@ export type PopperProps = {
     class?: string;
     /** Notified whenever the resolved placement changes (after flip). */
     onPlacementChange?: (placement: PopperPlacement) => void;
+    /**
+     * (a11y, opt-in) When true, traps keyboard focus inside the panel while it
+     * is open (Tab cycles through focusable children; Shift+Tab cycles backward).
+     * Intended for modal overlays built on top of Popper. Non-modal usage (menus,
+     * tooltips) should leave this false (default) to keep the natural tab order.
+     */
+    trapFocus?: boolean;
+    /**
+     * (a11y) When true (default when open), pressing Escape calls `onClose` so
+     * the consumer can set `open = false`. Set to false to suppress this behavior.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Called when the panel requests closing (Escape key, or future outside-click).
+     * The consumer is responsible for updating `open` in response.
+     */
+    onClose?: () => void;
     children?: Snippet;
 };
 /** Split a placement into its side and (optional) alignment. */

package/dist/Popper.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Popper.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,WAAW,GACX,SAAS,GACT,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,aAAa,GACb,WAAW,CAAC;AAEhB,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;IACxB,yDAAyD;IACzD,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4DAA4D;IAC5D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,gEAAgE;AAChE,wBAAgB,cAAc,CAAC,SAAS,EAAE,eAAe,GAAG;IAC1D,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACpB,CAGA;AAED,4DAA4D;AAC5D,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,GAAG,eAAe,CAEnF;AASD,MAAM,MAAM,IAAI,GAAG;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE;IACP,SAAS,EAAE,eAAe,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CACxB,GACA;IAAE,SAAS,EAAE,eAAe,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAwD3D;AAsHH,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Popper.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,WAAW,GACX,SAAS,GACT,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,aAAa,GACb,WAAW,CAAC;AAEhB,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;IACxB,yDAAyD;IACzD,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4DAA4D;IAC5D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACzD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,gEAAgE;AAChE,wBAAgB,cAAc,CAAC,SAAS,EAAE,eAAe,GAAG;IAC1D,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACpB,CAGA;AAED,4DAA4D;AAC5D,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,GAAG,eAAe,CAEnF;AASD,MAAM,MAAM,IAAI,GAAG;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE;IACP,SAAS,EAAE,eAAe,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CACxB,GACA;IAAE,SAAS,EAAE,eAAe,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAwD3D;AAmQH,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/Rating.svelte

@@ -49,8 +49,21 @@
   const stars = $derived(Array.from({ length: max }, (_, i) => i + 1));
 
   // L'étoile « focusable » (tabindex 0) suit la valeur ; à 0 c'est la première.
+  // En mode allowHalf, la valeur peut être un demi-entier : on focus l'étoile plafond.
   const focusedStar = $derived(value > 0 ? Math.ceil(value) : 1);
 
+  // Refs des boutons radio pour déplacer le focus programmatiquement.
+  let radioRefs = $state<Record<number, HTMLElement | null>>({});
+
+  // Texte accessible décrivant la valeur courante (utilisé pour aria-valuetext et aria-label readonly).
+  const valueText = $derived(
+    value === 0
+      ? `0 / ${max}`
+      : allowHalf && value % 1 !== 0
+        ? `${value} / ${max}`
+        : `${value} / ${max}`
+  );
+
   function fill(star: number): "full" | "half" | "empty" {
     if (value >= star) return "full";
     if (allowHalf && value >= star - 0.5) return "half";
@@ -85,64 +98,140 @@
     if (readonly) return;
     const step = allowHalf ? 0.5 : 1;
     let handled = true;
+    let next: number | null = null;
     switch (event.key) {
       case "ArrowRight":
       case "ArrowUp":
-        commit(Math.min(max, value + step));
+        next = Math.min(max, value + step);
         break;
       case "ArrowLeft":
       case "ArrowDown":
-        commit(Math.max(0, value - step));
+        // En mode entier, ne pas descendre sous 1 (pas de radio "0").
+        next = allowHalf ? Math.max(0, value - step) : Math.max(1, value - step);
         break;
       case "Home":
-        commit(0);
+        // Home → première étoile (1), pas 0 (aucun radio "0" n'existe).
+        next = allowHalf ? 0 : 1;
         break;
       case "End":
-        commit(max);
+        next = max;
         break;
       default:
         handled = false;
     }
-    if (handled) event.preventDefault();
+    if (handled) {
+      event.preventDefault();
+      if (next !== null) {
+        commit(next);
+        // En mode entier, déplacer le focus DOM vers le radio cible.
+        if (!allowHalf) {
+          const targetStar = next > 0 ? Math.ceil(next) : 1;
+          const targetEl = radioRefs[targetStar];
+          if (targetEl) targetEl.focus();
+        }
+      }
+    }
   }
+
+  // En mode allowHalf, on expose un slider ARIA (valeurs fractionnaires non représentables
+  // fidèlement par un radiogroup). En mode entier, on garde radiogroup/radio.
+  // Readonly : rendu non interactif avec span + aria-label global pour éviter les boutons disabled
+  // qui disparaissent de l'arbre d'accessibilité interactif.
 </script>
 
-<div
-  {...rest}
-  class={classes}
-  role="radiogroup"
-  aria-label={label}
-  aria-readonly={readonly ? "true" : undefined}
->
-  {#each stars as star (star)}
-    {@const state = fill(star)}
-    <button
-      type="button"
-      class="st-rating__star"
-      class:st-rating__star--full={state === "full"}
-      class:st-rating__star--half={state === "half"}
-      role="radio"
-      name={name}
-      aria-checked={Math.ceil(value) === star ? "true" : "false"}
-      aria-label={`${star} / ${max}`}
-      tabindex={!readonly && star === focusedStar ? 0 : -1}
-      disabled={readonly}
-      onclick={(event) => onStarClick(event, star)}
-      onkeydown={onKeyDown}
-    >
-      {#if state === "half"}
-        <StarHalf size={iconSize} strokeWidth={1.75} aria-hidden="true" />
-      {:else}
+{#if readonly}
+  <!-- Readonly : pas d'éléments interactifs disabled — on expose la note via aria-label sur le groupe. -->
+  <div
+    {...rest}
+    class={classes}
+    role="img"
+    aria-label={label ? `${label} : ${valueText}` : valueText}
+  >
+    {#each stars as star (star)}
+      {@const state = fill(star)}
+      <span class="st-rating__star" class:st-rating__star--full={state === "full"} class:st-rating__star--half={state === "half"} aria-hidden="true">
+        {#if state === "half"}
+          <StarHalf size={iconSize} strokeWidth={1.75} aria-hidden="true" />
+        {:else}
+          <Star
+            size={iconSize}
+            strokeWidth={1.75}
+            fill={state === "full" ? "currentColor" : "none"}
+            aria-hidden="true"
+          />
+        {/if}
+      </span>
+    {/each}
+  </div>
+{:else if allowHalf}
+  <!-- allowHalf : slider ARIA — valeurs fractionnaires (0.5 step), plus fidèle que radiogroup. -->
+  <div
+    {...rest}
+    class={classes}
+    role="slider"
+    aria-label={label}
+    aria-valuemin={0}
+    aria-valuemax={max}
+    aria-valuenow={value}
+    aria-valuetext={valueText}
+    tabindex={0}
+    onkeydown={onKeyDown}
+  >
+    {#each stars as star (star)}
+      {@const state = fill(star)}
+      <span
+        class="st-rating__star"
+        class:st-rating__star--full={state === "full"}
+        class:st-rating__star--half={state === "half"}
+        aria-hidden="true"
+        onclick={(event) => onStarClick(event, star)}
+      >
+        {#if state === "half"}
+          <StarHalf size={iconSize} strokeWidth={1.75} aria-hidden="true" />
+        {:else}
+          <Star
+            size={iconSize}
+            strokeWidth={1.75}
+            fill={state === "full" ? "currentColor" : "none"}
+            aria-hidden="true"
+          />
+        {/if}
+      </span>
+    {/each}
+  </div>
+{:else}
+  <!-- Mode entier : radiogroup / radio. aria-checked=true uniquement sur l'étoile == value. -->
+  <div
+    {...rest}
+    class={classes}
+    role="radiogroup"
+    aria-label={label}
+  >
+    {#each stars as star (star)}
+      {@const state = fill(star)}
+      <button
+        type="button"
+        class="st-rating__star"
+        class:st-rating__star--full={state === "full"}
+        role="radio"
+        name={name}
+        aria-checked={value === star ? "true" : "false"}
+        aria-label={`${star} / ${max}`}
+        tabindex={star === focusedStar ? 0 : -1}
+        bind:this={radioRefs[star]}
+        onclick={(event) => onStarClick(event, star)}
+        onkeydown={onKeyDown}
+      >
         <Star
           size={iconSize}
           strokeWidth={1.75}
           fill={state === "full" ? "currentColor" : "none"}
           aria-hidden="true"
         />
-      {/if}
-    </button>
-  {/each}
-</div>
+      </button>
+    {/each}
+  </div>
+{/if}
 
 <style>
   .st-rating {
@@ -186,4 +275,10 @@
   .st-rating--readonly .st-rating__star {
     cursor: default;
   }
+
+  /* Mode allowHalf : le slider (conteneur) doit afficher un focus-visible. */
+  [role="slider"].st-rating:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 2px;
+  }
 </style>

package/dist/Rating.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Rating.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAI9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9E,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA2GJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Rating.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Rating.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAI9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9E,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsKJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/SelectableList.svelte

@@ -60,7 +60,7 @@
 
   // --- Row registry: ordered by DOM position so arrow nav matches the visual
   //     order regardless of registration timing. -------------------------------
-  type Entry = { el: HTMLElement; value: string | undefined };
+  type Entry = { el: HTMLElement; value: string | undefined; disabled?: boolean };
   let entries = $state<Entry[]>([]);
 
   // The element that currently holds the roving tab stop (tabindex 0). Null until
@@ -79,9 +79,14 @@
   // register/unregister are called from each row's $effect. They read AND write
   // `entries`, so the read must be untracked — otherwise the calling effect would
   // subscribe to `entries`, and writing it would re-run the effect forever.
-  function register(el: HTMLElement, rowValue: string | undefined): () => void {
+  // Disabled rows are registered with disabled:true so navigate() can skip them
+  // explicitly, making the skip correct even when disabled state changes mid-session.
+  function register(el: HTMLElement, rowValue: string | undefined, rowDisabled = false): () => void {
     untrack(() => {
-      entries = sortByDom([...entries.filter((e) => e.el !== el), { el, value: rowValue }]);
+      entries = sortByDom([
+        ...entries.filter((e) => e.el !== el),
+        { el, value: rowValue, disabled: rowDisabled }
+      ]);
     });
     return () => {
       untrack(() => {
@@ -91,8 +96,30 @@
     };
   }
 
-  // Default roving stop = first registered (DOM-ordered) row when none focused.
-  const effectiveTabStop = $derived(tabStopEl ?? entries[0]?.el ?? null);
+  // Default roving stop = first non-disabled DOM-ordered row when none focused,
+  // or when the current tabStopEl has become disabled.
+  const effectiveTabStop = $derived.by((): HTMLElement | null => {
+    if (tabStopEl) {
+      const entry = entries.find((e) => e.el === tabStopEl);
+      if (entry && !entry.disabled) return tabStopEl;
+    }
+    return entries.find((e) => !e.disabled)?.el ?? null;
+  });
+
+  // Si la row qui détient le focus DOM devient disabled (in-place, sans unmount),
+  // transférer le focus vers la nouvelle cible de roving tabindex.
+  // Note : le cas du cycle unregister/register est géré dans SelectableRow via
+  // l'$effect sur `disabled` qui appelle navigate() AVANT le cleanup.
+  $effect(() => {
+    const newStop = effectiveTabStop;
+    if (!newStop) return;
+    if (tabStopEl !== null) {
+      const disabledEntry = entries.find((e) => e.el === tabStopEl && e.disabled);
+      if (disabledEntry && tabStopEl.contains(document.activeElement ?? null)) {
+        newStop.focus();
+      }
+    }
+  });
 
   function valueOf(el: HTMLElement): string | undefined {
     return entries.find((e) => e.el === el)?.value;
@@ -137,13 +164,34 @@
     if (entries.length === 0) return;
     const idx = entries.findIndex((e) => e.el === el);
     if (idx === -1) return;
-    let targetIdx = idx;
-    if (key === "ArrowDown" || key === "ArrowRight") targetIdx = idx + 1;
-    else if (key === "ArrowUp" || key === "ArrowLeft") targetIdx = idx - 1;
-    else if (key === "Home") targetIdx = 0;
-    else if (key === "End") targetIdx = entries.length - 1;
-    // Clamp (no wrap) so Home/End and arrows stay within bounds.
-    targetIdx = Math.max(0, Math.min(entries.length - 1, targetIdx));
+
+    let targetIdx: number | null = null;
+
+    if (key === "ArrowDown" || key === "ArrowRight") {
+      // Walk forward from current position, find the next non-disabled entry.
+      for (let i = idx + 1; i < entries.length; i++) {
+        if (!entries[i].disabled) { targetIdx = i; break; }
+      }
+    } else if (key === "ArrowUp" || key === "ArrowLeft") {
+      // Walk backward from current position, find the previous non-disabled entry.
+      for (let i = idx - 1; i >= 0; i--) {
+        if (!entries[i].disabled) { targetIdx = i; break; }
+      }
+    } else if (key === "Home") {
+      // First non-disabled entry.
+      for (let i = 0; i < entries.length; i++) {
+        if (!entries[i].disabled) { targetIdx = i; break; }
+      }
+    } else if (key === "End") {
+      // Last non-disabled entry.
+      for (let i = entries.length - 1; i >= 0; i--) {
+        if (!entries[i].disabled) { targetIdx = i; break; }
+      }
+    }
+
+    // If no target found (all remaining are disabled, or already at boundary), stay put.
+    if (targetIdx === null) return;
+
     const target = entries[targetIdx]?.el;
     if (target) {
       tabStopEl = target;

package/dist/SelectableList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableList.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,mBAAmB,GAAG;IAChC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0JJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SelectableList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableList.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,mBAAmB,GAAG;IAChC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0MJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/SelectableRow.svelte

@@ -16,8 +16,8 @@
     readonly managed: true;
     /** listbox role for the wrapper → rows are "option". */
     readonly itemRole: "option";
-    /** Register a row element; returns an unregister callback. */
-    register: (el: HTMLElement, value: string | undefined) => () => void;
+    /** Register a row element; returns an unregister callback. disabled is forwarded so the list can skip it during keyboard navigation. */
+    register: (el: HTMLElement, value: string | undefined, disabled?: boolean) => () => void;
     /** Is the row with this element currently selected? */
     isSelected: (el: HTMLElement) => boolean;
     /** Should the row with this element be the roving-tabindex stop (tabindex 0)? */
@@ -44,8 +44,9 @@
     /** Stable value, surfaced as `data-value` and used by the list for `value`. */
     value?: string;
     /**
-     * ARIA role for the standalone row. Defaults to "option" so a lone row still
-     * reads as a selectable item. Inside a list the role is forced to "option".
+     * ARIA role for the standalone row. Defaults to "button" for standalone use —
+     * "option" is only valid inside a listbox and would be invalid without one.
+     * Inside a SelectableList the role is always forced to "option".
      */
     role?: string;
     /**
@@ -71,7 +72,7 @@
     onselect,
     disabled = false,
     value,
-    role = "option",
+    role = "button",
     accentBar = false,
     leading,
     trailing,
@@ -86,10 +87,23 @@
   let el: HTMLElement | null = $state(null);
 
   // Register with the parent list (if any) so it can order rows for arrow nav
-  // and compute the roving tab stop. The effect re-registers if value changes.
+  // and compute the roving tab stop. Disabled rows are registered too so the
+  // list can skip them during navigation; the list owns the skip logic.
   $effect(() => {
-    if (!list || !el || disabled) return;
-    return list.register(el, value);
+    if (!list || !el) return;
+    return list.register(el, value, disabled);
+  });
+
+  // A11y edge-case : quand cette row passe à disabled=true ET qu'elle détient le
+  // focus DOM, transférer le focus vers la prochaine row enabled via navigate().
+  // On le fait ici (dans SelectableRow) pour avoir accès au focus DOM AVANT que
+  // le cycle unregister/register dans SelectableList ne perturbe l'état.
+  $effect(() => {
+    if (!disabled || !list || !el) return;
+    if (!el.contains(document.activeElement ?? null)) return;
+    // Déléguer via navigate ArrowDown (cherche prochaine row enabled vers l'avant,
+    // puis vers l'arrière si aucune). navigate appelle target.focus() directement.
+    list.navigate(el, "ArrowDown");
   });
 
   // Effective selected state: list-managed rows read the list; standalone rows
@@ -165,6 +179,7 @@
   class={classes}
   role={effectiveRole}
   aria-selected={effectiveRole === "option" ? isSelected : undefined}
+  aria-pressed={effectiveRole === "button" ? isSelected : undefined}
   aria-disabled={disabled ? "true" : undefined}
   data-value={value}
   {tabindex}

package/dist/SelectableRow.svelte.d.ts

@@ -13,8 +13,8 @@ export type SelectableListContext = {
     readonly managed: true;
     /** listbox role for the wrapper → rows are "option". */
     readonly itemRole: "option";
-    /** Register a row element; returns an unregister callback. */
-    register: (el: HTMLElement, value: string | undefined) => () => void;
+    /** Register a row element; returns an unregister callback. disabled is forwarded so the list can skip it during keyboard navigation. */
+    register: (el: HTMLElement, value: string | undefined, disabled?: boolean) => () => void;
     /** Is the row with this element currently selected? */
     isSelected: (el: HTMLElement) => boolean;
     /** Should the row with this element be the roving-tabindex stop (tabindex 0)? */
@@ -40,8 +40,9 @@ export type SelectableRowProps = {
     /** Stable value, surfaced as `data-value` and used by the list for `value`. */
     value?: string;
     /**
-     * ARIA role for the standalone row. Defaults to "option" so a lone row still
-     * reads as a selectable item. Inside a list the role is forced to "option".
+     * ARIA role for the standalone row. Defaults to "button" for standalone use —
+     * "option" is only valid inside a listbox and would be invalid without one.
+     * Inside a SelectableList the role is always forced to "option".
      */
     role?: string;
     /**

package/dist/SelectableRow.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableRow.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableRow.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,eAA+B,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG;IAClC,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,8DAA8D;IAC9D,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,IAAI,CAAC;IACrE,uDAAuD;IACvD,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,iFAAiF;IACjF,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoHJ,QAAA,MAAM,aAAa,gEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SelectableRow.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableRow.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,eAA+B,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG;IAClC,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,wIAAwI;IACxI,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;IACzF,uDAAuD;IACvD,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,iFAAiF;IACjF,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiIJ,QAAA,MAAM,aAAa,gEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/SlideIndicator.svelte

@@ -43,6 +43,9 @@
 
   const items = $derived(Array.from({ length: Math.max(0, count) }, (_, i) => i));
 
+  // Refs des boutons pour déplacer le focus programmatiquement lors de la navigation clavier.
+  let buttonRefs = $state<Record<number, HTMLElement | null>>({});
+
   function select(index: number) {
     if (index < 0 || index >= count || index === current) return;
     onChange?.(index);
@@ -69,21 +72,32 @@
         return;
     }
     event.preventDefault();
+    // Déplacer le focus DOM vers le bouton cible (roving tabindex correct).
+    const targetEl = buttonRefs[target];
+    if (targetEl) targetEl.focus();
     select(target);
   }
 </script>
 
-<div {...rest} class={classes} role="tablist" aria-label={label}>
+<!--
+  Choix de pattern : role="group" + boutons avec aria-current.
+  Justification : un indicateur de carrousel/pagination n'est PAS un tablist — il n'y a pas de
+  tabpanel associé. Utiliser role="tab" sans aria-controls/tabpanel trompe les lecteurs d'écran
+  qui annoncent « onglet X sur N » sans panneau contrôlé.
+  Pattern retenu (ARIA Authoring Practices Guide — Carousel) : role="group" nommé + boutons natifs
+  avec aria-current="true" sur le point courant + roving tabindex.
+  Le SR annonce « Groupe [label] — [label] 1, bouton ; [label] 2, courant, bouton ; … »
+-->
+<div {...rest} class={classes} role="group" aria-label={label}>
   {#each items as index (index)}
     <button
       type="button"
       class="st-slideIndicator__dot"
       class:st-slideIndicator__dot--current={index === 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}
+      bind:this={buttonRefs[index]}
       onclick={() => select(index)}
       onkeydown={(event) => onKeyDown(event, index)}
     ></button>

package/dist/SlideIndicator.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SlideIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,CAAC;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtF,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuEJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SlideIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SlideIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,CAAC;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtF,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA8EJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/TimePicker.svelte

@@ -87,24 +87,167 @@
 
   let open = $state(false);
   let hostEl = $state<HTMLDivElement | null>(null);
+  let inputEl = $state<HTMLInputElement | null>(null);
+  let listEl = $state<HTMLUListElement | null>(null);
+
+  /** Index de l'option mise en évidence dans la listbox (-1 = aucune). */
+  let activeIndex = $state(-1);
 
   const displayValue = $derived(value ? display(value) : "");
 
+  /** Id de l'option active, consommé par aria-activedescendant. */
+  const activeDescendant = $derived(
+    open && activeIndex >= 0 ? `${listId}-opt-${activeIndex}` : undefined
+  );
+
+  function openList() {
+    if (disabled) return;
+    open = true;
+    // À l'ouverture : se positionner sur la valeur sélectionnée ou la première option.
+    const idx = value ? slots.indexOf(value) : -1;
+    activeIndex = idx >= 0 ? idx : 0;
+    // Le focus reste sur l'input (pattern aria-activedescendant).
+  }
+
+  function closeList(returnFocus = true) {
+    open = false;
+    activeIndex = -1;
+    if (returnFocus && inputEl) {
+      inputEl.focus();
+    }
+  }
+
   function toggleOpen() {
     if (disabled) return;
-    open = !open;
+    if (open) {
+      closeList(true);
+    } else {
+      openList();
+    }
   }
 
   function pick(slot: string) {
     value = slot;
     onChange?.(slot);
-    open = false;
+    closeList(true);
   }
 
-  function onPanelKeyDown(event: KeyboardEvent) {
-    if (event.key === "Escape" && open) {
-      event.preventDefault();
-      open = false;
+  /** Fait défiler la listbox pour que l'option active soit visible. */
+  function scrollActiveIntoView() {
+    if (!listEl || activeIndex < 0) return;
+    const optEl = listEl.querySelector<HTMLElement>(`#${listId}-opt-${activeIndex}`);
+    if (optEl && typeof optEl.scrollIntoView === "function") {
+      optEl.scrollIntoView({ block: "nearest" });
+    }
+  }
+
+  function onInputKeyDown(event: KeyboardEvent) {
+    if (disabled) return;
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        if (!open) {
+          openList();
+        } else {
+          // ArrowDown avec liste déjà ouverte → descendre d'une option.
+          activeIndex = Math.min(activeIndex + 1, slots.length - 1);
+          scrollActiveIntoView();
+        }
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        if (!open) {
+          openList();
+        } else {
+          // ArrowUp avec liste déjà ouverte → remonter d'une option.
+          activeIndex = Math.max(activeIndex - 1, 0);
+          scrollActiveIntoView();
+        }
+        break;
+      }
+      case "Home": {
+        event.preventDefault();
+        if (!open) {
+          openList();
+        } else {
+          activeIndex = 0;
+          scrollActiveIntoView();
+        }
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        if (!open) {
+          openList();
+        } else {
+          activeIndex = slots.length - 1;
+          scrollActiveIntoView();
+        }
+        break;
+      }
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        if (!open) {
+          openList();
+        } else {
+          // Enter / Space sur l'input avec liste déjà ouverte → sélectionner l'actif.
+          if (activeIndex >= 0 && activeIndex < slots.length) {
+            pick(slots[activeIndex]);
+          }
+        }
+        break;
+      }
+      case "Escape": {
+        if (open) {
+          event.preventDefault();
+          closeList(true);
+        }
+        break;
+      }
+    }
+  }
+
+  function onListKeyDown(event: KeyboardEvent) {
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        activeIndex = Math.min(activeIndex + 1, slots.length - 1);
+        scrollActiveIntoView();
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        activeIndex = Math.max(activeIndex - 1, 0);
+        scrollActiveIntoView();
+        break;
+      }
+      case "Home": {
+        event.preventDefault();
+        activeIndex = 0;
+        scrollActiveIntoView();
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        activeIndex = slots.length - 1;
+        scrollActiveIntoView();
+        break;
+      }
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        if (activeIndex >= 0 && activeIndex < slots.length) {
+          pick(slots[activeIndex]);
+        }
+        break;
+      }
+      case "Escape": {
+        event.preventDefault();
+        closeList(true);
+        break;
+      }
     }
   }
 
@@ -112,7 +255,7 @@
     if (!open) return;
     const target = event.target as Node | null;
     if (hostEl && target && !hostEl.contains(target)) {
-      open = false;
+      closeList(false);
     }
   }
 
@@ -129,6 +272,7 @@
     <span class={groupClasses}>
       <input
         id={fieldId}
+        bind:this={inputEl}
         type="text"
         readonly
         class="st-timepicker__control"
@@ -139,7 +283,10 @@
         aria-haspopup="listbox"
         aria-controls={listId}
         aria-expanded={open ? "true" : "false"}
+        aria-activedescendant={activeDescendant}
+        aria-autocomplete="none"
         onclick={toggleOpen}
+        onkeydown={onInputKeyDown}
       />
       <button
         type="button"
@@ -147,6 +294,7 @@
         aria-label="Ouvrir la liste des horaires"
         aria-haspopup="listbox"
         aria-expanded={open ? "true" : "false"}
+        tabindex="-1"
         {disabled}
         onclick={toggleOpen}
       >
@@ -157,24 +305,33 @@
   {#if open}
     <ul
       id={listId}
+      bind:this={listEl}
       class="st-timepicker__list"
       role="listbox"
       aria-label={label ?? "Horaires"}
       tabindex="-1"
-      onkeydown={onPanelKeyDown}
+      onkeydown={onListKeyDown}
     >
-      {#each slots as slot (slot)}
+      {#each slots as slot, i (slot)}
         <li role="presentation">
-          <button
-            type="button"
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <!-- Faux positif : la navigation clavier est gérée par le combobox via
+               aria-activedescendant + onkeydown sur le listbox parent (onListKeyDown).
+               Les options n'ont pas besoin de leur propre gestionnaire keydown. -->
+          <div
+            id="{listId}-opt-{i}"
             class="st-timepicker__option"
             class:st-timepicker__option--selected={slot === value}
+            class:st-timepicker__option--active={i === activeIndex}
             role="option"
             aria-selected={slot === value ? "true" : "false"}
-            onclick={() => pick(slot)}
+            tabindex="-1"
+            onmousedown={(e) => { e.preventDefault(); }}
+            onclick={() => { pick(slot); }}
+            onmouseenter={() => { activeIndex = i; }}
           >
             {display(slot)}
-          </button>
+          </div>
         </li>
       {/each}
     </ul>
@@ -332,4 +489,10 @@
     background: var(--st-component-dropdown-selectedBackground, var(--st-semantic-action-primary));
     color: var(--st-component-dropdown-selectedText, var(--st-semantic-action-primaryText));
   }
+
+  .st-timepicker__option--active:not(.st-timepicker__option--selected) {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: -2px;
+  }
 </style>

package/dist/TimePicker.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TimePicker.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAI7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAClF,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAoIJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"TimePicker.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TimePicker.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAI7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAClF,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAqRJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-svelte",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "publishConfig": {
     "access": "public"