@sia-ui/cli 0.7.0 → 0.8.0

package/dist/registry/package/components/Resource/index.tsx

@@ -22,9 +22,14 @@ import {
   required as regleRequise,
   type Rule,
 } from "@sia-ui/utils/validation";
-import type { PermissionRule, FormValidator } from "@sia-ui/headless";
+import {
+  useSiaLocale,
+  type FormValidator,
+  type PermissionRule,
+  type ResourceMessages,
+} from "@sia-ui/headless";
 import type { ComponentTone } from "@sia-ui/tokens";
-import type { FieldType, FieldValue } from "../Field";
+import type { FieldControlOverrides, FieldType, FieldValue } from "../Field";
 import type { SelectOption } from "../Select";
 import type { FormEntry, FormFieldConfig, FormShape } from "../Form";
 import type { ColumnCardRole, DataTableColumn } from "../DataTable/types";
@@ -118,6 +123,14 @@ export interface ResourceField<T = unknown> {
   /** Le rendu en tableau et en détail. Écrase celui déduit du type. */
   render?: (row: T, index: number) => ReactNode;
 
+  /**
+   * Les props du contrôle de saisie, transmises telles quelles par le
+   * formulaire : `{ searchable: true }` pour un `select` long, `{ maxLength }`
+   * pour un texte. Sans elles, régler le contrôle obligeait à redéclarer tous
+   * les champs dans la page.
+   */
+  controlProps?: FieldControlOverrides;
+
   /**
    * Une valeur calculée plutôt que lue sur la ligne.
    *
@@ -228,9 +241,11 @@ const CHERCHABLES = new Set<FieldType>([
 const NUMERIQUES = new Set<FieldType>(["number", "currency", "slider"]);
 
 /** La règle que le type impose de lui-même. */
-const REGLE_DU_TYPE: Partial<Record<FieldType, () => Rule<never>>> = {
-  email: () => regleEmail() as Rule<never>,
-  phone: () => reglePhone() as Rule<never>,
+const REGLE_DU_TYPE: Partial<
+  Record<FieldType, (messages?: ResourceMessages) => Rule<never>>
+> = {
+  email: (messages) => regleEmail(messages?.invalidEmail) as Rule<never>,
+  phone: (messages) => reglePhone(messages?.invalidPhone) as Rule<never>,
 };
 
 /** « dateEcheance » → « Date echeance ». Un repli, pas une traduction. */
@@ -271,6 +286,45 @@ function entrees<T>(resource: ResourceDefinition<T>) {
   return Object.entries(resource.fields) as Array<[string, ResourceField<T>]>;
 }
 
+/* ─────────────────────────────────────── les valeurs dans la langue */
+
+/*
+  Les rendus par défaut sont des fonctions pures, appelées hors de tout
+  composant : la locale n'y est pas lisible. Ces trois petits composants la
+  lisent au moment où la cellule s'affiche — « Oui » ou « Yes », la date et
+  le nombre au format de la langue.
+*/
+
+function OuiNon({ value }: { value: unknown }) {
+  const locale = useSiaLocale();
+  return <>{value ? locale.yes : locale.no}</>;
+}
+
+function DateLocale({ value, time }: { value: string | Date; time: boolean }) {
+  const { language } = useSiaLocale();
+  return (
+    <>
+      {time
+        ? formatDateTime(value, { locale: language })
+        : formatDate(value, { locale: language })}
+    </>
+  );
+}
+
+function NombreLocale({ value, decimals }: { value: number; decimals?: number | undefined }) {
+  const { language } = useSiaLocale();
+  return (
+    <>
+      {formatNumber(value, {
+        locale: language,
+        ...(decimals !== undefined
+          ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals }
+          : {}),
+      })}
+    </>
+  );
+}
+
 /* ──────────────────────────────────────────────────── les dérivations */
 
 /**
@@ -318,14 +372,14 @@ function renduParDefaut<T>(
   }
 
   if (type === "checkbox" || type === "switch") {
-    return (row) => (lire(row) ? "Oui" : "Non");
+    return (row) => <OuiNon value={lire(row)} />;
   }
 
   if (type === "date" || type === "datetime") {
     return (row) => {
       const valeur = lire(row);
       if (typeof valeur !== "string" && !(valeur instanceof Date)) return null;
-      return type === "date" ? formatDate(valeur) : formatDateTime(valeur);
+      return <DateLocale value={valeur} time={type === "datetime"} />;
     };
   }
 
@@ -333,14 +387,7 @@ function renduParDefaut<T>(
     return (row) => {
       const valeur = lire(row);
       if (typeof valeur !== "number") return null;
-      return formatNumber(valeur, {
-        ...(champ.decimals !== undefined
-          ? {
-              minimumFractionDigits: champ.decimals,
-              maximumFractionDigits: champ.decimals,
-            }
-          : {}),
-      });
+      return <NombreLocale value={valeur} decimals={champ.decimals} />;
     };
   }
 
@@ -450,6 +497,7 @@ export function resourceFormFields<T>(
       ...(champ.description ? { description: champ.description } : {}),
       ...(champ.options ? { options: champ.options } : {}),
       ...(champ.colSpan ? { colSpan: champ.colSpan } : {}),
+      ...(champ.controlProps ? { controlProps: champ.controlProps } : {}),
     };
 
     if (champ.group) {
@@ -472,10 +520,15 @@ export function resourceFormFields<T>(
  *
  * Un champ `email` valide une adresse sans qu'on le demande : le type le dit
  * déjà. Les règles déclarées s'y ajoutent, elles ne les remplacent pas.
+ *
+ * `messages` — `locale.resource`, lu avec `useSiaLocale()` — donne leurs
+ * textes aux règles imposées ; `CrudPage` le passe. À défaut, les messages
+ * par défaut de `@sia-ui/utils/validation`.
  */
 export function resourceValidator<T>(
   resource: ResourceDefinition<T>,
   mode: ResourceFormMode = "create",
+  messages?: ResourceMessages,
 ): FormValidator<FormShape> | undefined {
   const schema: Record<string, Array<Rule<never>>> = {};
 
@@ -484,11 +537,11 @@ export function resourceValidator<T>(
 
     const regles: Array<Rule<never>> = [];
     if (estRequis(champ as ResourceField<never>, mode)) {
-      regles.push(regleRequise() as Rule<never>);
+      regles.push(regleRequise(messages?.required) as Rule<never>);
     }
 
     const duType = REGLE_DU_TYPE[champ.type ?? "text"];
-    if (duType) regles.push(duType());
+    if (duType) regles.push(duType(messages));
 
     if (champ.rules) regles.push(...champ.rules);
     if (regles.length > 0) schema[cle] = regles;

package/dist/registry/package/components/RichTextEditor/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, type HTMLAttributes } from "react";
 import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 export interface RichTextEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> { value?: string; defaultValue?: string; onValueChange?: (html: string) => void; placeholder?: string; disabled?: boolean; }
 /**
@@ -9,4 +10,4 @@ export interface RichTextEditorProps extends Omit<HTMLAttributes<HTMLDivElement>
  * renvoie et s'affiche partout ailleurs sans qu'un convertisseur soit
  * nécessaire.
  */
-export function RichTextEditor({ value, defaultValue = "", onValueChange, placeholder = "Saisir du contenu...", disabled, className, ...props }: RichTextEditorProps) { const editorRef = useRef<HTMLDivElement>(null); useEffect(() => { if (value !== undefined && editorRef.current && editorRef.current.innerHTML !== value) editorRef.current.innerHTML = value; }, [value]); const command = (name: string) => { editorRef.current?.focus(); document.execCommand(name); onValueChange?.(editorRef.current?.innerHTML ?? ""); }; return <div className={cn("sia-rich-text-editor", disabled && "sia-rich-text-editor--disabled", className)}><div className="sia-editor-toolbar"><button type="button" disabled={disabled} aria-label="Gras" onClick={() => command("bold")}><strong>B</strong></button><button type="button" disabled={disabled} aria-label="Italique" onClick={() => command("italic")}><em>I</em></button><button type="button" disabled={disabled} aria-label="Liste" onClick={() => command("insertUnorderedList")}>• Liste</button></div><div {...props} ref={editorRef} role="textbox" aria-multiline="true" contentEditable={!disabled} suppressContentEditableWarning data-placeholder={placeholder} dangerouslySetInnerHTML={value === undefined ? { __html: defaultValue } : undefined} onInput={(event) => onValueChange?.(event.currentTarget.innerHTML)} /></div>; }
+export function RichTextEditor({ value, defaultValue = "", onValueChange, placeholder: placeholderProp, disabled, className, ...props }: RichTextEditorProps) { const messages = useSiaLocale().richTextEditor; const placeholder = placeholderProp ?? messages.placeholder; const editorRef = useRef<HTMLDivElement>(null); useEffect(() => { if (value !== undefined && editorRef.current && editorRef.current.innerHTML !== value) editorRef.current.innerHTML = value; }, [value]); const command = (name: string) => { editorRef.current?.focus(); document.execCommand(name); onValueChange?.(editorRef.current?.innerHTML ?? ""); }; return <div className={cn("sia-rich-text-editor", disabled && "sia-rich-text-editor--disabled", className)}><div className="sia-editor-toolbar"><button type="button" disabled={disabled} aria-label={messages.bold} onClick={() => command("bold")}><strong>B</strong></button><button type="button" disabled={disabled} aria-label={messages.italic} onClick={() => command("italic")}><em>I</em></button><button type="button" disabled={disabled} aria-label={messages.bulletList} onClick={() => command("insertUnorderedList")}>• {messages.bulletList}</button></div><div {...props} ref={editorRef} role="textbox" aria-multiline="true" contentEditable={!disabled} suppressContentEditableWarning data-placeholder={placeholder} dangerouslySetInnerHTML={value === undefined ? { __html: defaultValue } : undefined} onInput={(event) => onValueChange?.(event.currentTarget.innerHTML)} /></div>; }

package/dist/registry/package/components/SearchInput/index.tsx

@@ -26,7 +26,9 @@ export interface SearchInputProps
    */
   searchDelay?: number;
   clearable?: boolean;
+  /** Le nom du champ. Par défaut, `search` de la locale. */
   searchLabel?: string;
+  /** Le bouton qui vide le champ. Par défaut, `searchInput.clear` de la locale. */
   clearLabel?: string;
 }
 
@@ -48,7 +50,7 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
       searchDelay = 0,
       clearable = true,
       searchLabel: searchLabelProp,
-      clearLabel = "Effacer la recherche",
+      clearLabel: clearLabelProp,
       className,
       placeholder: placeholderProp,
       ...props
@@ -58,6 +60,7 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
     const locale = useSiaLocale();
     const placeholder = placeholderProp ?? locale.searchPlaceholder;
     const searchLabel = searchLabelProp ?? locale.search;
+    const clearLabel = clearLabelProp ?? locale.searchInput.clear;
 
     const [internal, setInternal] = useState(defaultValue);
     const current = value ?? internal;

package/dist/registry/package/components/SecretFields/index.tsx

@@ -1,9 +1,10 @@
 import { useId, useMemo, useState, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
-import { Button } from "../Button";
-import { IconButton } from "../IconButton";
-import { Input } from "../Input";
-import { PasswordInput } from "../PasswordInput";
+import { formatMessage, useSiaLocale } from "@sia-ui/headless";
+import { Button, type ButtonProps } from "../Button";
+import { IconButton, type IconButtonProps } from "../IconButton";
+import { Input, type InputProps } from "../Input";
+import { PasswordInput, type PasswordInputProps } from "../PasswordInput";
 import { PlusIcon, TrashIcon } from "../Icons";
 import "./styles.css";
 
@@ -29,12 +30,51 @@ export interface SecretFieldsProps {
   templates?: string[];
   /** La forme d'un nom valide. Par défaut, aucune contrainte. */
   keyPattern?: RegExp;
+  /** Les libellés ci-dessous viennent par défaut du groupe `secretFields` de la locale. */
   keyPatternMessage?: string;
   keyLabel?: string;
   valueLabel?: string;
   addLabel?: ReactNode;
   disabled?: boolean;
   className?: string;
+  /**
+   * Le bouton d'ajout : variante, taille, icône, classe. Son libellé passe
+   * par `addLabel`.
+   */
+  addButtonProps?: Partial<Omit<ButtonProps, "onClick" | "children" | "disabled">>;
+  /**
+   * Le bouton qui retire une ligne : icône, variante, taille.
+   *
+   * Son nom reste calculé ligne par ligne — « Retirer API_KEY » — pour que
+   * chaque bouton dise lequel il retire.
+   */
+  removeButtonProps?: Partial<
+    Omit<IconButtonProps, "onClick" | "label" | "disabled">
+  >;
+  /**
+   * Le champ du nom : placeholder, taille, classe.
+   *
+   * La valeur, la saisie et l'état d'erreur, avec son `aria-describedby`,
+   * restent calculés par ligne.
+   */
+  keyInputProps?: Partial<
+    Omit<
+      InputProps,
+      "value" | "defaultValue" | "onChange" | "disabled" | "invalid" | "aria-describedby"
+    >
+  >;
+  /**
+   * Le champ de la valeur : placeholder, jauge, classe.
+   *
+   * Pas d'`autoComplete` : `new-password` est ce qui empêche le navigateur
+   * de proposer le mot de passe du compte à la place du secret.
+   */
+  valueInputProps?: Partial<
+    Omit<
+      PasswordInputProps,
+      "value" | "defaultValue" | "onChange" | "disabled" | "autoComplete"
+    >
+  >;
 }
 
 /** Les valeurs effacées, les noms gardés — ce qu'on affiche après l'envoi. */
@@ -60,13 +100,22 @@ export function SecretFields({
   storedKeys = [],
   templates = [],
   keyPattern,
-  keyPatternMessage = "Nom invalide",
-  keyLabel = "Nom",
-  valueLabel = "Valeur",
-  addLabel = "Ajouter un secret",
+  keyPatternMessage: keyPatternMessageProp,
+  keyLabel: keyLabelProp,
+  valueLabel: valueLabelProp,
+  addLabel: addLabelProp,
   disabled = false,
   className,
+  addButtonProps,
+  removeButtonProps,
+  keyInputProps,
+  valueInputProps,
 }: SecretFieldsProps) {
+  const m = useSiaLocale().secretFields;
+  const keyPatternMessage = keyPatternMessageProp ?? m.invalidKey;
+  const keyLabel = keyLabelProp ?? m.keyLabel;
+  const valueLabel = valueLabelProp ?? m.valueLabel;
+  const addLabel = addLabelProp ?? m.add;
   const id = useId();
   const [interne, setInterne] = useState<SecretEntry[]>(
     () => defaultValue ?? storedKeys.map((key) => ({ key, value: "" })),
@@ -89,11 +138,11 @@ export function SecretFields({
     return lignes.map((ligne) => {
       const nom = ligne.key.trim();
       if (!nom) return undefined;
-      if ((vus.get(nom) ?? 0) > 1) return "Ce nom est déjà utilisé";
+      if ((vus.get(nom) ?? 0) > 1) return m.duplicateKey;
       if (keyPattern && !keyPattern.test(nom)) return keyPatternMessage;
       return undefined;
     });
-  }, [keyPattern, keyPatternMessage, lignes]);
+  }, [keyPattern, keyPatternMessage, lignes, m]);
 
   const presents = new Set(lignes.map((ligne) => ligne.key.trim()));
   const proposes = templates.filter((nom) => !presents.has(nom));
@@ -119,11 +168,12 @@ export function SecretFields({
           <div className="sia-secrets__row" key={index}>
             <div className="sia-secrets__key">
               <Input
-                value={ligne.key}
                 aria-label={`${keyLabel} ${index + 1}`}
-                placeholder="NOM_DU_SECRET"
+                placeholder={m.keyPlaceholder}
                 autoComplete="off"
                 spellCheck={false}
+                {...keyInputProps}
+                value={ligne.key}
                 disabled={disabled}
                 invalid={Boolean(erreur)}
                 {...(erreur ? { "aria-describedby": idErreur } : {})}
@@ -137,21 +187,23 @@ export function SecretFields({
             </div>
 
             <PasswordInput
-              value={ligne.value}
               aria-label={`${valueLabel} ${ligne.key || index + 1}`}
-              placeholder={garde ? "Inchangée si vide" : "Valeur"}
+              placeholder={garde ? m.unchangedPlaceholder : valueLabel}
+              spellCheck={false}
+              {...valueInputProps}
+              value={ligne.value}
               // `new-password` : le seul réglage que les navigateurs
               // respectent pour ne pas proposer un mot de passe enregistré.
               autoComplete="new-password"
-              spellCheck={false}
               disabled={disabled}
               onChange={(event) => modifier(index, { value: event.target.value })}
             />
 
             <IconButton
-              label={`Retirer ${ligne.key || "la ligne"}`}
               icon={<TrashIcon />}
               variant="ghost"
+              {...removeButtonProps}
+              label={formatMessage(m.removeRow, { name: ligne.key || m.unnamedRow })}
               disabled={disabled}
               onClick={() => changer(lignes.filter((_, i) => i !== index))}
             />
@@ -164,8 +216,9 @@ export function SecretFields({
           type="button"
           variant="outline"
           size="sm"
-          disabled={disabled}
           leftIcon={<PlusIcon />}
+          {...addButtonProps}
+          disabled={disabled}
           onClick={() => changer([...lignes, { key: "", value: "" }])}
         >
           {addLabel}

package/dist/registry/package/components/Select/index.tsx

@@ -11,8 +11,9 @@ import {
   type ReactNode,
 } from "react";
 import { cn, looseIncludes } from "@sia-ui/utils";
-import { Overlay, type OverlayPlacement } from "../Overlay";
-import { Spinner } from "../Spinner";
+import { useSiaLocale } from "@sia-ui/headless";
+import { Overlay, type OverlayPlacement, type OverlayProps } from "../Overlay";
+import { Spinner, type SpinnerProps } from "../Spinner";
 import { ChevronDownIcon, SearchIcon, CheckIcon, XIcon } from "../Icons";
 import "./styles.css";
 
@@ -33,19 +34,31 @@ export interface SelectProps {
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string, option?: SelectOption) => void;
+  /** Le texte du champ vide. Par défaut, `select` de la locale. */
   placeholder?: string;
   searchable?: boolean;
+  /** Le texte indicatif de la recherche. Par défaut, `searchPlaceholder` de la locale. */
   searchPlaceholder?: string;
   fetcher?: (query: string, signal?: AbortSignal) => Promise<SelectOption[]>;
   debounce?: number;
+  /** Pendant le chargement distant. Par défaut, `selectField.loadingOptions` de la locale. */
   loadingText?: ReactNode;
+  /** Quand rien ne correspond. Par défaut, `noResults` de la locale. */
   emptyText?: ReactNode;
+  /** Quand le chargement échoue. Par défaut, `selectField.loadError` de la locale. */
   errorText?: ReactNode;
   clearable?: boolean;
   disabled?: boolean;
   invalid?: boolean;
   required?: boolean;
   placement?: OverlayPlacement;
+  /**
+   * Réglages du panneau de la liste — décalage, marge au bord, classe.
+   * `matchAnchorWidth: false` le laisse prendre la largeur de ses options.
+   */
+  overlayProps?: Partial<Omit<OverlayProps, "open" | "anchorRef" | "onOpenChange" | "children">>;
+  /** Réglages de l'indicateur de chargement des options distantes. */
+  spinnerProps?: Partial<SpinnerProps>;
   /**
    * Ce que montre le déclencheur. Par défaut, le libellé de l'option.
    *
@@ -107,19 +120,21 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
     value,
     defaultValue = "",
     onValueChange,
-    placeholder = "Sélectionner",
+    placeholder: placeholderProp,
     searchable = false,
-    searchPlaceholder = "Rechercher...",
+    searchPlaceholder: searchPlaceholderProp,
     fetcher,
     debounce = 250,
-    loadingText = "Chargement des options...",
-    emptyText = "Aucun résultat",
-    errorText = "Impossible de charger les options",
+    loadingText: loadingTextProp,
+    emptyText: emptyTextProp,
+    errorText: errorTextProp,
     clearable = false,
     disabled = false,
     invalid = false,
     required = false,
     placement = "bottom-start",
+    overlayProps,
+    spinnerProps,
     renderValue,
     variant = "default",
     className,
@@ -129,6 +144,12 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
   },
   forwardedRef,
 ) {
+  const locale = useSiaLocale();
+  const placeholder = placeholderProp ?? locale.select;
+  const searchPlaceholder = searchPlaceholderProp ?? locale.searchPlaceholder;
+  const loadingText = loadingTextProp ?? locale.selectField.loadingOptions;
+  const emptyText = emptyTextProp ?? locale.noResults;
+  const errorText = errorTextProp ?? locale.selectField.loadError;
   const generatedId = useId();
   const controlId = id ?? `sia-select-${generatedId.replace(/:/g, "")}`;
   const listboxId = `${controlId}-listbox`;
@@ -191,6 +212,16 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
     if (searchable || fetcher) window.setTimeout(() => searchRef.current?.focus(), 0);
   }, [currentValue, fetcher, open, searchable, visibleOptions]);
 
+  // L'option active reste visible : au clavier, descendre au-delà du bas de
+  // la liste la laissait hors champ, et l'on choisissait à l'aveugle.
+  // `nearest` ne fait défiler que si elle sort de la zone visible.
+  useEffect(() => {
+    if (!open || activeIndex < 0) return;
+    document
+      .getElementById(`${listboxId}-${activeIndex}`)
+      ?.scrollIntoView?.({ block: "nearest" });
+  }, [activeIndex, listboxId, open]);
+
   const setTriggerRef = (node: HTMLButtonElement | null) => {
     triggerRef.current = node;
     if (typeof forwardedRef === "function") forwardedRef(node);
@@ -285,7 +316,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
             <span
               className="sia-select__clear"
               aria-hidden="true"
-              title="Effacer la sélection"
+              title={locale.selectField.clearSelection}
               onClick={(event) => {
                 event.stopPropagation();
                 changeValue("");
@@ -298,12 +329,13 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
         </span>
       </button>
       <Overlay
+        placement={placement}
+        matchAnchorWidth
+        {...overlayProps}
+        className={cn("sia-select__overlay", overlayProps?.className)}
         open={open}
         anchorRef={triggerRef}
         onOpenChange={setOpen}
-        placement={placement}
-        matchAnchorWidth
-        className="sia-select__overlay"
       >
         <div className="sia-select__panel" onKeyDown={handleKeyDown}>
           {showSearch && (
@@ -317,7 +349,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
                 aria-label={searchPlaceholder}
                 onChange={(event) => setQuery(event.target.value)}
               />
-              {loading && <Spinner size="xs" label="Chargement" />}
+              {loading && <Spinner size="xs" label={locale.loading} {...spinnerProps} />}
             </div>
           )}
           <div id={listboxId} role="listbox" aria-busy={loading || undefined} className="sia-select__options">

package/dist/registry/package/components/Select/styles.css

@@ -12,10 +12,13 @@
 .sia-select__clear:hover { color:var(--sia-foreground); background:var(--sia-surface); }
 .sia-select__chevron { transform:translateY(-.5rem); font-size:1.1rem; }
 .sia-select__overlay { overflow:hidden; border:1px solid var(--sia-border); border-radius:var(--sia-radius); color:var(--sia-foreground); background:var(--sia-background); box-shadow:0 14px 36px rgb(15 23 42 / .16); }
-.sia-select__panel { display:grid; min-width:12rem; max-height:min(22rem,calc(100vh - 1rem)); }
-.sia-select__search-wrap { display:flex; align-items:center; gap:.5rem; padding:.55rem .65rem; color:var(--sia-muted); border-bottom:1px solid var(--sia-border); }
+/* Colonne flex, pas grille : un enfant de grille garde une hauteur minimale
+   égale à son contenu, la liste débordait alors du panneau au lieu de
+   défiler — et l'overlay, en overflow:hidden, la coupait. */
+.sia-select__panel { display:flex; flex-direction:column; min-width:12rem; max-height:min(22rem,calc(100vh - 1rem)); }
+.sia-select__search-wrap { flex:none; display:flex; align-items:center; gap:.5rem; padding:.55rem .65rem; color:var(--sia-muted); border-bottom:1px solid var(--sia-border); }
 .sia-select__search { min-width:0; width:100%; padding:.2rem 0; border:0; outline:0; color:var(--sia-foreground); background:transparent; font:inherit; }
-.sia-select__options { overflow-y:auto; padding:.35rem; }
+.sia-select__options { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:.35rem; }
 .sia-select__option { display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; padding:.55rem .65rem; border:0; border-radius:calc(var(--sia-radius) * .7); color:inherit; background:transparent; font:inherit; text-align:left; cursor:pointer; }
 .sia-select__option:hover:not(:disabled),.sia-select__option--active:not(:disabled) { background:var(--sia-surface); }
 .sia-select__option[aria-selected="true"] { color:var(--sia-primary); background:color-mix(in srgb,var(--sia-primary) 10%,transparent); }

package/dist/registry/package/components/Sidebar/index.tsx

@@ -18,7 +18,7 @@ import {
   type PermissionRule,
 } from "@sia-ui/headless";
 import { ChevronDownIcon } from "../Icons";
-import { Overlay } from "../Overlay";
+import { Overlay, type OverlayProps } from "../Overlay";
 import "./styles.css";
 
 export interface SidebarItem {
@@ -114,6 +114,15 @@ export interface SidebarProps {
   /** De quel côté sortent les volets du rail. */
   side?: "left" | "right";
 
+  /**
+   * Réglages des volets du rail — placement, décalage, classe.
+   *
+   * L'objet descend jusqu'aux nœuds mémoïsés : le passer stable (constante,
+   * `useMemo`) plutôt qu'en littéral, sans quoi l'arbre se redessine à
+   * chaque rendu du parent.
+   */
+  overlayProps?: Partial<Omit<OverlayProps, "open" | "anchorRef" | "onOpenChange" | "children">>;
+
   variant?: "default" | "filled" | "floating";
   size?: "sm" | "md" | "lg";
   tone?: ComponentTone;
@@ -154,6 +163,7 @@ export function Sidebar({
   activeKey,
   collapsed = false,
   side = "left",
+  overlayProps,
   variant = "default",
   size = "md",
   tone = "primary",
@@ -232,6 +242,7 @@ export function Sidebar({
     basculer,
     renderLink,
     onNavigate,
+    overlayProps,
   };
 
   return (
@@ -323,6 +334,7 @@ interface NoeudProps {
   basculer: (cle: string, freres: string[]) => void;
   renderLink: SidebarRenderLink | undefined;
   onNavigate: ((item: SidebarItem) => void) | undefined;
+  overlayProps: SidebarProps["overlayProps"] | undefined;
 }
 
 /**
@@ -413,6 +425,7 @@ function NoeudEnLigne({
   basculer,
   renderLink,
   onNavigate,
+  overlayProps,
 }: NoeudProps) {
   const enfants = item.items ?? [];
   const aDesEnfants = enfants.length > 0;
@@ -523,6 +536,7 @@ function NoeudEnLigne({
                   basculer,
                   renderLink,
                   onNavigate,
+                  overlayProps,
                 }}
               />
             ))}
@@ -542,7 +556,7 @@ function NoeudEnLigne({
  * qu'aux rubriques sans enfant.
  */
 function NoeudRail(props: NoeudProps) {
-  const { item, activeKey, side, renderLink, onNavigate } = props;
+  const { item, activeKey, side, renderLink, onNavigate, overlayProps } = props;
   const enfants = item.items ?? [];
   const ancre = useRef<HTMLDivElement>(null);
   const { open, triggerProps, panelProps, setOpen } = useHoverIntent({
@@ -569,13 +583,14 @@ function NoeudRail(props: NoeudProps) {
       </button>
 
       <Overlay
-        open={open}
-        anchorRef={ancre}
-        onOpenChange={setOpen}
         placement={side === "left" ? "right-start" : "left-start"}
         offset={8}
-        className="sia-sidebar-flyout"
         role="group"
+        {...overlayProps}
+        className={cn("sia-sidebar-flyout", overlayProps?.className)}
+        open={open}
+        anchorRef={ancre}
+        onOpenChange={setOpen}
       >
         <div {...panelProps}>
           <div className="sia-sidebar-flyout__title">
@@ -610,6 +625,7 @@ function NoeudRail(props: NoeudProps) {
                   ouvertes: props.ouvertes,
                   basculer: props.basculer,
                   renderLink,
+                  overlayProps,
                 }}
                 collapsed={false}
                 onNavigate={(cible) => {