@sia-ui/cli 0.3.2 → 0.5.0

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

@@ -12,6 +12,7 @@ import "./styles.css";
 import { useOutsideClick } from "@sia-ui/react";
 import { DrawerContext } from "./context";
 import { overlayStack, useDisclosureState } from "@sia-ui/headless";
+import { XIcon } from "../Icons";
 /** Ce que la réf impérative expose — ouvrir un tiroir depuis l'extérieur. */
 export type DrawerRef = {
   open: () => void;
@@ -65,9 +66,10 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
       closeOnOutsideClick = true,
       closeOnEsc = true,
       children,
+      className,
       ...rest
     },
-    ref
+    ref,
   ) => {
     // Ouverture, fermeture et phase de sortie vivent dans @sia-ui/headless :
     // rien là-dedans n'est propre au DOM, et le pendant mobile réutilisera la
@@ -77,6 +79,7 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
       phase: state,
       open: doOpen,
       close: doClose,
+      toggle,
     } = useDisclosureState({
       ...(open !== undefined ? { open } : {}),
       defaultOpen,
@@ -86,6 +89,11 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
 
     const drawerRef = useRef<HTMLDivElement | null>(null);
     const zIndexRef = useRef<number | null>(null);
+    // Lue par l'écouteur d'Échap : la mettre dans ses dépendances le
+    // réabonnerait — et rebasculerait le verrou du body — à chaque rendu où
+    // `onOpenChange` est une fonction en ligne.
+    const fermer = useRef(doClose);
+    fermer.current = doClose;
 
     /* 🔌 API IMPÉRATIVE */
     useImperativeHandle(
@@ -93,10 +101,10 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
       () => ({
         open: doOpen,
         close: doClose,
-        toggle: () => (isOpen ? doClose() : doOpen()),
+        toggle,
         isOpen: () => isOpen,
       }),
-      [isOpen, open]
+      [isOpen, doOpen, doClose, toggle],
     );
 
     /* Overlay stack */
@@ -121,7 +129,7 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
       const onKeyDown = (e: KeyboardEvent) => {
         if (!closeOnEsc || e.key !== "Escape") return;
         if (overlayStack.isTop(zIndexRef.current)) {
-          doClose();
+          fermer.current();
         }
       };
 
@@ -150,6 +158,7 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
         <DrawerContext.Provider value={{ close: doClose }}>
           <div
             className="sia-drawer-root"
+            data-state={state}
             style={{ zIndex: zIndexRef.current ?? undefined }}
           >
             <div className="sia-drawer-overlay" />
@@ -163,7 +172,8 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
                 "sia-drawer",
                 `sia-drawer-${position}`,
                 `sia-drawer-${size}`,
-                state === "closing" && "is-closing"
+                state === "closing" && "is-closing",
+                className,
               )}
               {...rest}
             >
@@ -173,7 +183,7 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
         </DrawerContext.Provider>
       </Portal>
     );
-  }
+  },
 ) as DrawerComponent;
 
 Drawer.displayName = "SiaDrawer";
@@ -205,7 +215,7 @@ export function DrawerClose() {
       onClick={ctx.close}
       aria-label="Fermer"
     >
-      ✕
+      <XIcon aria-hidden="true" />
     </button>
   );
 }

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

@@ -7,17 +7,24 @@
 .sia-drawer-overlay {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  animation: fadeIn var(--sia-duration-base) var(--sia-easing-entrance);
+  z-index: 0;
+  background: rgb(2 6 23 / .52);
+  animation: sia-drawer-fade-in var(--sia-duration-base) var(--sia-easing-entrance) both;
 }
+.sia-drawer-root[data-state="closing"] .sia-drawer-overlay { animation:sia-drawer-fade-out var(--sia-duration-base) var(--sia-easing-exit) both; }
 
 .sia-drawer {
   position: absolute;
-  background: var(--sia-color-white);
+  z-index: 1;
+  color: var(--sia-foreground, #0f172a);
+  background: var(--sia-background, #fff);
+  border: 1px solid var(--sia-border, #e2e8f0);
   display: flex;
   flex-direction: column;
-  width: var(--sia-drawer-width);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  width: min(var(--sia-drawer-width), calc(100vw - 2rem));
+  overflow: hidden;
+  isolation: isolate;
+  box-shadow: 0 20px 50px rgb(2 6 23 / .24);
   will-change: transform;
 }
 
@@ -27,7 +34,7 @@
   right: 0;
   top: 0;
   height: 100%;
-  animation: slideInRight var(--sia-duration-slow) var(--sia-easing-entrance);
+  animation: sia-drawer-in-right var(--sia-duration-slow) var(--sia-easing-entrance) both;
 }
 
 /* LEFT */
@@ -35,7 +42,7 @@
   left: 0;
   top: 0;
   height: 100%;
-  animation: slideInLeft var(--sia-duration-slow) var(--sia-easing-entrance);
+  animation: sia-drawer-in-left var(--sia-duration-slow) var(--sia-easing-entrance) both;
 }
 
 /* TOP */
@@ -43,9 +50,11 @@
   top: 0;
   left: 0;
   right: 0;
-  height: auto;
+  width: 100%;
+  max-width: 100%;
+  max-height: min(80vh, 48rem);
   --sia-drawer-width: 100% !important;
-  animation: slideInTop var(--sia-duration-slow) var(--sia-easing-entrance);
+  animation: sia-drawer-in-top var(--sia-duration-slow) var(--sia-easing-entrance) both;
 }
 
 /* BOTTOM */
@@ -53,9 +62,11 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: auto;
+  width: 100%;
+  max-width: 100%;
+  max-height: min(80vh, 48rem);
   --sia-drawer-width: 100% !important;
-  animation: slideInBottom var(--sia-duration-slow) var(--sia-easing-entrance);
+  animation: sia-drawer-in-bottom var(--sia-duration-slow) var(--sia-easing-entrance) both;
 }
 
 
@@ -68,14 +79,15 @@
 .sia-drawer-header,
 .sia-drawer-footer {
   padding: 16px;
-  border-bottom: 1px solid var(--sia-color-border);
+  border-bottom: 1px solid var(--sia-border, #e2e8f0);
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
 .sia-drawer-footer {
-  border-top: 1px solid var(--sia-color-border);
+  border-top: 1px solid var(--sia-border, #e2e8f0);
+  border-bottom: 0;
   margin-top: auto;
 }
 
@@ -85,67 +97,80 @@
 }
 
 .sia-drawer-title {
+  margin: 0;
   font-size: 1.1rem;
   font-weight: 600;
 }
 
 .sia-drawer-close {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 2.25rem;
+  height: 2.25rem;
   margin-left: auto;
-  background: none;
-  border: none;
+  padding: 0;
+  color: var(--sia-muted, #64748b);
+  background: transparent;
+  border: 0;
+  border-radius: var(--sia-radius, .375rem);
   cursor: pointer;
-  font-size: 1.2rem;
 }
+.sia-drawer-close:hover { color:var(--sia-foreground,#0f172a); background:var(--sia-surface,#f8fafc); }
+.sia-drawer-close:focus-visible { outline:2px solid var(--sia-primary,#2563eb); outline-offset:2px; }
+.sia-drawer-close svg { width:1.125rem; height:1.125rem; }
 
 .sia-drawer-right.is-closing {
-  animation: slideOutRight var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  animation: sia-drawer-out-right var(--sia-duration-base) var(--sia-easing-exit) both;
 }
 
 .sia-drawer-left.is-closing {
-  animation: slideOutLeft var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  animation: sia-drawer-out-left var(--sia-duration-base) var(--sia-easing-exit) both;
 }
 
 .sia-drawer-top.is-closing {
-  animation: slideOutTop var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  animation: sia-drawer-out-top var(--sia-duration-base) var(--sia-easing-exit) both;
 }
 
 .sia-drawer-bottom.is-closing {
-  animation: slideOutBottom var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  animation: sia-drawer-out-bottom var(--sia-duration-base) var(--sia-easing-exit) both;
 }
 
 /* Animations */
-@keyframes slideInRight {
+@keyframes sia-drawer-fade-in { from { opacity:0; } to { opacity:1; } }
+@keyframes sia-drawer-fade-out { to { opacity:0; } }
+@keyframes sia-drawer-in-right {
   from { transform: translateX(100%); }
   to   { transform: translateX(0); }
 }
 
-@keyframes slideInLeft {
+@keyframes sia-drawer-in-left {
   from { transform: translateX(-100%); }
   to   { transform: translateX(0); }
 }
 
-@keyframes slideInTop {
+@keyframes sia-drawer-in-top {
   from { transform: translateY(-100%); }
   to   { transform: translateY(0); }
 }
 
-@keyframes slideInBottom {
+@keyframes sia-drawer-in-bottom {
   from { transform: translateY(100%); }
   to   { transform: translateY(0); }
 }
 
-@keyframes slideOutRight {
+@keyframes sia-drawer-out-right {
   to { transform: translateX(100%); }
 }
 
-@keyframes slideOutLeft {
+@keyframes sia-drawer-out-left {
   to { transform: translateX(-100%); }
 }
 
-@keyframes slideOutTop {
+@keyframes sia-drawer-out-top {
   to { transform: translateY(-100%); }
 }
 
-@keyframes slideOutBottom {
+@keyframes sia-drawer-out-bottom {
   to { transform: translateY(100%); }
 }

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

@@ -1,10 +1,15 @@
-import { type CSSProperties, type ReactNode } from "react";
+import { useState, type CSSProperties, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
 import {
+  readSubmitError,
   useLocalForm,
+  useSiaLocale,
   type FormAdapter,
+  type FormErrors,
+  type FormSubmitResult,
   type FormValidator,
 } from "@sia-ui/headless";
+import { Alert } from "../Alert";
 import { Button, type ButtonProps } from "../Button";
 import { Field, type FieldProps, type FieldValue } from "../Field";
 import "./styles.css";
@@ -32,6 +37,16 @@ function isGroup(entry: FormEntry): entry is FormFieldGroup {
   return "group" in entry;
 }
 
+/** Les noms de champs, groupes aplatis. */
+export function formFieldNames(fields: FormEntry[]): string[] {
+  const noms: string[] = [];
+  for (const entree of fields) {
+    if (isGroup(entree)) noms.push(...entree.fields.map((f) => f.name));
+    else noms.push(entree.name);
+  }
+  return noms;
+}
+
 /**
  * Les valeurs qu'un formulaire déclaratif peut porter.
  *
@@ -54,7 +69,16 @@ export interface FormProps<TValues extends FormShape = FormShape> {
   defaultValues?: TValues;
   /** La validation. Un schéma Zod s'y branche en cinq lignes. */
   validate?: FormValidator<TValues>;
-  onSubmit?: (values: TValues) => void | Promise<void>;
+  /**
+   * L'envoi.
+   *
+   * Rendre des erreurs par champ les pose sous les champs. Lever une erreur
+   * l'affiche dans une alerte en tête des boutons — et une `HttpError` de
+   * `@sia-ui/api` voit en plus ses erreurs de champ posées à leur place.
+   */
+  onSubmit?: (
+    values: TValues,
+  ) => FormSubmitResult<TValues> | Promise<FormSubmitResult<TValues>>;
   columns?: number;
   submitText?: ReactNode;
   clearText?: ReactNode;
@@ -118,6 +142,38 @@ export function Form<TValues extends FormShape = FormShape>({
     ...(onSubmit ? { onSubmit } : {}),
   });
   const form = adapter ?? interne;
+  const locale = useSiaLocale();
+
+  /**
+   * L'échec du dernier envoi, quand il ne se range pas sous un champ.
+   *
+   * Sans lui, un 409 ou un 500 devenait une promesse rejetée que personne ne
+   * lisait : le bouton se relâchait, et rien ne disait pourquoi.
+   */
+  const [echec, setEchec] = useState<string | null>(null);
+
+  const envoyer = () => {
+    setEchec(null);
+    form.submit().catch((error: unknown) => {
+      const { fields: erreurs, message } = readSubmitError(error);
+      const connus = new Set(formFieldNames(fields));
+      const sousLesChamps: Record<string, string> = {};
+      const ailleurs: string[] = [];
+
+      for (const [nom, texte] of Object.entries(erreurs)) {
+        if (connus.has(nom)) sousLesChamps[nom] = texte;
+        else ailleurs.push(texte);
+      }
+
+      form.setErrors(sousLesChamps as FormErrors<TValues>);
+      // Ce que les champs affichent déjà n'est pas répété dans l'alerte ; ce
+      // qui vise un champ absent du formulaire, si.
+      if (ailleurs.length > 0) setEchec(ailleurs.join(" "));
+      else if (Object.keys(sousLesChamps).length === 0) {
+        setEchec(message ?? locale.submitError);
+      }
+    });
+  };
 
   const busy = loading || form.state.isSubmitting;
   const submitDisabled =
@@ -157,7 +213,7 @@ export function Form<TValues extends FormShape = FormShape>({
       noValidate
       onSubmit={(event) => {
         event.preventDefault();
-        void form.submit();
+        envoyer();
       }}
     >
       <div className="sia-form-grid" style={grille(columns)}>
@@ -184,6 +240,16 @@ export function Form<TValues extends FormShape = FormShape>({
         )}
       </div>
 
+      {echec && (
+        <Alert
+          tone="danger"
+          className="sia-form-error"
+          onDismiss={() => setEchec(null)}
+        >
+          {echec}
+        </Alert>
+      )}
+
       {actions ?? (
         <div className="sia-form-actions">
           {showClear && (

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

@@ -182,6 +182,15 @@ export function InfoIcon(props: IconProps) {
     </IconBase>
   );
 }
+
+export function SettingsIcon(props: IconProps) {
+  return (
+    <IconBase {...props}>
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3v-.2h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" />
+    </IconBase>
+  );
+}
 export function EyeIcon(props: IconProps) {
   return (
     <IconBase {...props}>

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

@@ -1,7 +1,15 @@
-import { useEffect, useId, useState, type FormEvent } from "react";
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type FormEvent,
+  type ReactNode,
+} from "react";
 import { cn } from "@sia-ui/utils";
 import { paginationItems, useSiaLocale } from "@sia-ui/headless";
 import { ChevronLeftIcon, ChevronRightIcon } from "../Icons";
+import { Select } from "../Select";
 import "./styles.css";
 
 export interface PaginationProps {
@@ -22,10 +30,46 @@ export interface PaginationProps {
   showTotal?: boolean;
   /** Masque les libellés et ne garde que les flèches. */
   compact?: boolean;
+
+  /* ─────────────────────────────────────────────── taille de page */
+
+  /** Le nombre de lignes par page en vigueur. */
+  pageSize?: number;
+  /**
+   * Fourni avec `pageSize`, ajoute le choix du nombre de lignes par page.
+   *
+   * Seul le nouveau nombre est remonté : revenir en page 1 est l'affaire de
+   * qui tient l'état — `setPerPage` de `useTableQuery` le fait déjà.
+   */
+  onPageSizeChange?: (pageSize: number) => void;
+  /**
+   * Les tailles proposées. Par défaut `10, 20, 50, 100`. Une taille en
+   * vigueur absente de la liste y est ajoutée, pour que le champ ne paraisse
+   * jamais vide.
+   */
+  pageSizeOptions?: number[];
+  /** Le libellé du choix. Par défaut `locale.perPage` — « Par page ». */
+  pageSizeLabel?: string;
+  /**
+   * Remplace entièrement le contrôle — des boutons segmentés, un champ libre.
+   * Le choix des tailles et leur tri sont déjà faits.
+   */
+  renderPageSize?: (context: PageSizeContext) => ReactNode;
+
   ariaLabel?: string;
   className?: string;
 }
 
+/** Ce que reçoit `renderPageSize`. */
+export interface PageSizeContext {
+  pageSize: number;
+  options: number[];
+  onChange: (pageSize: number) => void;
+  label: string;
+}
+
+export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+
 /**
  * La navigation entre les pages.
  *
@@ -42,6 +86,11 @@ export function Pagination({
   jumpTo = false,
   showTotal = false,
   compact = false,
+  pageSize,
+  onPageSizeChange,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  pageSizeLabel,
+  renderPageSize,
   ariaLabel,
   className,
 }: PaginationProps) {
@@ -59,9 +108,25 @@ export function Pagination({
   // un retour arrière du navigateur.
   useEffect(() => setDraft(String(current)), [current]);
 
-  if (totalPages <= 1) return null;
+  const tailles = useMemo(() => {
+    if (pageSize === undefined || pageSizeOptions.includes(pageSize)) {
+      return pageSizeOptions;
+    }
+    return [...pageSizeOptions, pageSize].sort((a, b) => a - b);
+  }, [pageSize, pageSizeOptions]);
+
+  const choixTaille =
+    pageSize !== undefined && onPageSizeChange && tailles.length > 0;
+  const plusieursPages = totalPages > 1;
+  const tailleLibelle = pageSizeLabel ?? locale.perPage;
 
-  const items = paginationItems(current, totalPages, siblingCount);
+  // Une seule page n'a rien à paginer — sauf si l'on peut encore changer de
+  // taille : après avoir choisi 100 lignes, il faut pouvoir revenir à 10.
+  if (!plusieursPages && !choixTaille) return null;
+
+  const items = plusieursPages
+    ? paginationItems(current, totalPages, siblingCount)
+    : [];
 
   const jump = (event: FormEvent) => {
     event.preventDefault();
@@ -84,71 +149,113 @@ export function Pagination({
       )}
       aria-label={ariaLabel ?? "Pagination"}
     >
-      <button
-        type="button"
-        className="sia-pagination__step"
-        disabled={current === 1}
-        aria-label={previousLabel}
-        onClick={() => onPageChange(current - 1)}
-      >
-        <ChevronLeftIcon />
-        {!compact && <span>{previousLabel}</span>}
-      </button>
-
-      {items.map((item) =>
-        typeof item === "number" ? (
+      {/*
+        Deux groupes, qui passent à la ligne chacun d'un seul tenant : la
+        navigation d'un côté, les réglages de l'autre. Sans eux, un écran un
+        peu étroit renvoyait « Par page » seul sur une seconde ligne, loin de
+        son champ.
+      */}
+      {plusieursPages && (
+        <div className="sia-pagination__pages">
           <button
             type="button"
-            key={item}
-            className="sia-pagination__page"
-            aria-current={item === current ? "page" : undefined}
-            onClick={() => onPageChange(item)}
+            className="sia-pagination__step"
+            disabled={current === 1}
+            aria-label={previousLabel}
+            onClick={() => onPageChange(current - 1)}
           >
-            {item}
+            <ChevronLeftIcon />
+            {!compact && <span>{previousLabel}</span>}
           </button>
-        ) : (
-          <span key={item} className="sia-pagination__gap" aria-hidden="true">
-            …
-          </span>
-        ),
-      )}
 
-      <button
-        type="button"
-        className="sia-pagination__step"
-        disabled={current === totalPages}
-        aria-label={nextLabel}
-        onClick={() => onPageChange(current + 1)}
-      >
-        {!compact && <span>{nextLabel}</span>}
-        <ChevronRightIcon />
-      </button>
-
-      {showTotal && (
-        <span className="sia-pagination__total">
-          {locale.page} {current} / {totalPages}
-        </span>
+          {items.map((item) =>
+            typeof item === "number" ? (
+              <button
+                type="button"
+                key={item}
+                className="sia-pagination__page"
+                aria-current={item === current ? "page" : undefined}
+                onClick={() => onPageChange(item)}
+              >
+                {item}
+              </button>
+            ) : (
+              <span key={item} className="sia-pagination__gap" aria-hidden="true">
+                …
+              </span>
+            ),
+          )}
+
+          <button
+            type="button"
+            className="sia-pagination__step"
+            disabled={current === totalPages}
+            aria-label={nextLabel}
+            onClick={() => onPageChange(current + 1)}
+          >
+            {!compact && <span>{nextLabel}</span>}
+            <ChevronRightIcon />
+          </button>
+        </div>
       )}
 
-      {jumpTo && (
-        <form className="sia-pagination__jump" onSubmit={jump}>
-          <label htmlFor={jumpId}>{locale.goToPage}</label>
-          <input
-            id={jumpId}
-            // `text` plutôt que `number` : le champ numérique natif accepte
-            // « 1e5 » et « -- », et vide sa valeur sans prévenir quand elle
-            // ne lui plaît pas.
-            type="text"
-            inputMode="numeric"
-            value={draft}
-            aria-label={locale.goToPage}
-            onChange={(event) => setDraft(event.target.value.replace(/\D/g, ""))}
-            onBlur={jump}
-          />
-          <span className="sia-pagination__jump-total" aria-hidden="true">
-            / {totalPages}
-          </span>
-        </form>
+      {(choixTaille || (plusieursPages && (showTotal || jumpTo))) && (
+        <div className="sia-pagination__settings">
+          {plusieursPages && showTotal && (
+            <span className="sia-pagination__total">
+              {locale.page} {current} / {totalPages}
+            </span>
+          )}
+
+          {choixTaille && (
+            <div className="sia-pagination__size">
+              {renderPageSize ? (
+                renderPageSize({
+                  pageSize,
+                  options: tailles,
+                  onChange: onPageSizeChange,
+                  label: tailleLibelle,
+                })
+              ) : (
+                <>
+                  <span aria-hidden="true">{tailleLibelle}</span>
+                  <Select
+                    variant="embedded"
+                    aria-label={tailleLibelle}
+                    placement="top-end"
+                    value={String(pageSize)}
+                    options={tailles.map((taille) => ({
+                      value: String(taille),
+                      label: String(taille),
+                    }))}
+                    onValueChange={(valeur) => onPageSizeChange(Number(valeur))}
+                  />
+                </>
+              )}
+            </div>
+          )}
+
+          {plusieursPages && jumpTo && (
+            <form className="sia-pagination__jump" onSubmit={jump}>
+              <label htmlFor={jumpId}>{locale.goToPage}</label>
+              <input
+                id={jumpId}
+                // `text` plutôt que `number` : le champ numérique natif accepte
+                // « 1e5 » et « -- », et vide sa valeur sans prévenir quand elle
+                // ne lui plaît pas.
+                type="text"
+                inputMode="numeric"
+                value={draft}
+                aria-label={locale.goToPage}
+                onChange={(event) => setDraft(event.target.value.replace(/\D/g, ""))}
+                onBlur={jump}
+              />
+              <span className="sia-pagination__jump-total" aria-hidden="true">
+                / {totalPages}
+              </span>
+            </form>
+          )}
+        </div>
       )}
     </nav>
   );