@portnet/ui 6.0.1 → 6.0.3

package/dist/v2/components/Field.d.ts

@@ -8,7 +8,47 @@ import type { SxProps, Theme } from "@mui/material/styles";
  * for any form control (Input, Select, Textarea, Autocomplete, Combobox, …).
  *
  * Strict rules enforced:
- *   R-I.1 — Label is associated to the control via `htmlFor` / `id`.
+ *   R-I.1 — Label is associated to the control via `htmlFor` / `id`, plus
+ *           `labelId` for children whose visible surface is NOT labelable.
+ *
+ *           >>> THE SECOND CHANNEL WAS MISSING, AND HALF THE CONTROLS NEED IT.
+ *           >>> `htmlFor` / `id` names LABELABLE elements only — input, select,
+ *           >>> textarea, button, meter, output, progress. `Select` renders its
+ *           >>> visible surface as a `div[role="combobox"]`, which is not one,
+ *           >>> so the pair resolved to NOTHING: the control had no accessible
+ *           >>> name and a screen reader announced "combobox, collapsed"
+ *           >>> without saying which field. WCAG 4.1.2 / 1.3.1, invisible on
+ *           >>> screen, in every filter drawer and every form of every module.
+ *           >>>
+ *           >>> Found by the axe-core suite of
+ *           >>> `autorisation-admis-pour-conforme-fe` (Area 10), failing with
+ *           >>> `aria-input-field-name` on the first `Select` rendered.
+ *
+ *           WHY `labelId` AND NOT `aria-labelledby`. A first attempt passed
+ *           `aria-labelledby` to every child. It does not work and it breaks
+ *           things: MUI spreads unknown props onto its ROOT wrapper, so the
+ *           attribute landed on `div.MuiInputBase-root` — never on the inner
+ *           control. For `Select` the combobox stayed anonymous; for `Input`
+ *           the wrapper became a SECOND element carrying the label, which is
+ *           both wrong for assistive tech and enough to break any
+ *           `getByLabelText` in a host's tests. `labelId` is MUI's own channel:
+ *           `SelectInput` merges it into the combobox's `aria-labelledby`.
+ *
+ *           It is passed only to children that DECLARE they consume it, via
+ *           the `puiLabelTarget` marker (see `Select`). A blanket `labelId`
+ *           would reach `<input>` and MUI text fields, which do not know it —
+ *           React then warns about an unrecognised DOM attribute on every
+ *           render, in every host console.
+ *
+ *           KNOWN LIMITATION, stated because it is asymmetric with R-I.3: a
+ *           consumer-supplied `aria-labelledby` on a non-group child is NOT
+ *           merged into the name. `aria-describedby` is merged, here, by this
+ *           component; naming goes through MUI's `labelId`, and MUI does not
+ *           concatenate the two. Nothing is silently lost — the field is named
+ *           by its own label, which is the name a user should hear — but a host
+ *           wanting to ADD to that name must put it in `label`. Widening this
+ *           would mean interpolating a token list into `labelId`, a prop
+ *           documented as "the ID of an element".
  *   R-I.2 — Required adds the asterisk + `aria-required`.
  *   R-I.3 — Error: `aria-invalid` + `aria-describedby` linking the message.
  *           Field MERGES with the child's existing `aria-describedby` so a
@@ -28,14 +68,82 @@ import type { SxProps, Theme } from "@mui/material/styles";
  * Grouping controls (RadioGroup / CheckboxGroup) — pass `group`:
  *   A native `<label htmlFor>` cannot name an ARIA group (only labelable
  *   elements can be `for`-targeted), so in `group` mode the label is rendered
- *   as a <span> with an id and the child group is associated via
- *   `aria-labelledby` instead. The child must forward `aria-labelledby`
- *   (and `aria-describedby`) onto its `role="group"`/`"radiogroup"` element.
+ *   as a <span> and the child group is associated via `aria-labelledby`
+ *   instead. The child must forward `aria-labelledby` (and
+ *   `aria-describedby`) onto its `role="group"`/`"radiogroup"` element.
+ *
+ *   Since R-I.1 above, `group` keeps its own `aria-labelledby` channel: a
+ *   `role="group"` element is not labelable either, but it is the CHILD's own
+ *   root that carries the role, so the attribute reaches the right element
+ *   there — unlike a MUI control, whose root is a wrapper.
  *
  *   <Field label="Genre" group error={errors.genre}>
  *     <RadioGroup … />
  *   </Field>
+ *
+ * ── LARGEUR SEMANTIQUE (gap G-H) ──────────────────────────────
+ *
+ * `width` rattache le champ a l'un des cinq gabarits imposes par la section
+ * « Form Field Width & Layout Standards » des Platform Mandatory UX Patterns.
+ * Le standard y interdit explicitement les « arbitrary input field widths » et
+ * les « jagged alignment fields within forms », et impose de mapper chaque
+ * champ a un gabarit d'apres sa contrainte de CARACTERES :
+ *
+ *   xs  1 a 5 caracteres    code postal, CVV, age
+ *   s   6 a 15              telephone, montant, date, identifiant court
+ *   m   16 a 60             nom, courriel, ville, liste simple
+ *   l   61 a 256            adresse, recherche complexe, longue liste
+ *   xl  257 et plus         zone de texte, description, editeur
+ *
+ * POURQUOI SUR `Field` ET NON SUR CHAQUE CONTROLE. Le gabarit est une
+ * contrainte de MISE EN PAGE, pas une propriete de l'input : c'est la boite du
+ * champ - libelle, controle, indication, erreur - qui doit etre bornee, sinon
+ * le message d'erreur s'etale sur toute la cellule pendant que l'input est
+ * borne. `Field` est le seul endroit qui voit cette boite entiere.
+ *
+ * POURQUOI UN PLAFOND ET NON UNE LARGEUR FIXE. Le standard exige aussi que les
+ * champs soient empiles « 100% grid width » sur mobile, et que des champs
+ * heterogenes s'alignent sur des fractions de colonnes. Un `maxWidth`
+ * n'est donc pose qu'a partir de `sm` : la grille continue de decider des
+ * COLONNES, le gabarit borne le champ DANS sa cellule. Les deux regles
+ * coexistent au lieu de se contredire.
+ *
+ * >>> LES CINQ VALEURS SONT UNE DECISION DE DESIGN, PAS UNE LECTURE. Le
+ * >>> standard donne des FOURCHETTES (« ~80px to 120px max »). J'ai retenu le
+ * >>> HAUT de chaque fourchette, ces largeurs etant des plafonds : prendre le
+ * >>> bas tronquerait des valeurs qui tiennent dans la contrainte de
+ * >>> caracteres annoncee. A confirmer par l'equipe design ; les cinq nombres
+ * >>> sont exposes en variables CSS pour etre revus sans toucher au code. <<<
  */
+/**
+ * Gabarits de largeur semantique (G-H). Voir la note en tete de fichier.
+ *
+ * Les valeurs passent par des variables CSS pour que l'equipe design puisse
+ * les revoir sans modification de code. Les replis sont le HAUT de chaque
+ * fourchette du standard, ces largeurs etant des plafonds.
+ */
+export type FieldWidth = "xs" | "s" | "m" | "l" | "xl";
+/**
+ * Exporte pour etre TESTABLE : le plafond ne s'applique qu'a partir de `sm`,
+ * donc via une requete media qu'`emotion` injecte dans la feuille de style et
+ * que jsdom ne resout pas. Un test de rendu ne peut donc pas lire la largeur
+ * effective ; il peut en revanche epingler les cinq valeurs, ce qui est le
+ * point sensible (elles sont une decision de design, voir la note ci-dessus).
+ *
+ * ─── Les variables CSS EXISTENT desormais ─────────────────────────
+ *
+ * La note ci-dessus affirmait que les cinq nombres etaient "exposes en
+ * variables CSS pour etre revus sans toucher au code". C'etait FAUX jusqu'a
+ * l'audit Area 4 d'addm-fe : `cssVariables` n'emettait aucun `--field-w-*`,
+ * donc seuls les REPLIS ci-dessous rendaient, et la revision annoncee
+ * n'existait pas.
+ *
+ * Les valeurs vivent maintenant dans `tokens.layout.fieldWidth` et sont
+ * emises. Les replis restent : un hote qui n'appelle jamais
+ * `injectCssVariables` doit continuer a rendre des largeurs correctes. Les
+ * deux doivent donc rester d'accord, ce qu'epingle le test de contrat.
+ */
+export declare const FIELD_MAX_WIDTH: Record<FieldWidth, string>;
 export interface FieldProps {
     label?: React.ReactNode | undefined;
     required?: boolean | undefined;
@@ -50,6 +158,14 @@ export interface FieldProps {
      * instead of `htmlFor` / `id`.
      */
     group?: boolean | undefined;
+    /**
+     * Gabarit de largeur semantique (G-H) : `xs` | `s` | `m` | `l` | `xl`,
+     * choisi d'apres la contrainte de CARACTERES du champ. Voir la note en tete
+     * de fichier. Omis = aucun plafond, la cellule de grille decide seule -
+     * c'est le comportement d'avant G-H, donc rien ne change pour les appelants
+     * existants.
+     */
+    width?: FieldWidth | undefined;
     /** Optional <FieldHelp> element rendered next to the label. */
     helpAdornment?: React.ReactNode | undefined;
     /** The single form-control element to wrap. */
@@ -57,7 +173,7 @@ export interface FieldProps {
     sx?: SxProps<Theme> | undefined;
     className?: string | undefined;
 }
-declare function Field({ label, required, hint, error, htmlFor, fullWidth, disabled, group, children, helpAdornment, // optional <FieldHelp> element
+declare function Field({ label, required, hint, error, htmlFor, fullWidth, disabled, group, width, children, helpAdornment, // optional <FieldHelp> element
 sx, className, }: FieldProps): React.JSX.Element;
 export default Field;
 //# sourceMappingURL=Field.d.ts.map

package/dist/v2/components/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/lib/v2/components/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAG3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,+DAA+D;IAC/D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAC5C,+CAA+C;IAC/C,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,SAAgB,EAChB,QAAQ,EACR,KAAa,EACb,QAAQ,EACR,aAAa,EAAE,+BAA+B;AAC9C,EAAE,EACF,SAAS,GACV,EAAE,UAAU,qBAkJZ;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/lib/v2/components/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAG3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkHG;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMtD,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,+DAA+D;IAC/D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAC5C,+CAA+C;IAC/C,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,SAAgB,EAChB,QAAQ,EACR,KAAa,EACb,KAAK,EACL,QAAQ,EACR,aAAa,EAAE,+BAA+B;AAC9C,EAAE,EACF,SAAS,GACV,EAAE,UAAU,qBA8LZ;AAED,eAAe,KAAK,CAAC"}

package/dist/v2/components/Field.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = exports.FIELD_MAX_WIDTH = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 var _FormLabel = _interopRequireDefault(require("@mui/material/FormLabel"));
@@ -11,15 +11,9 @@ var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperTe
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _FieldError = _interopRequireDefault(require("./FieldError"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /**
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
  * Field — Portnet UI v2
  *
  * Charter §03 · Component "Input · Field".
@@ -27,7 +21,47 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * for any form control (Input, Select, Textarea, Autocomplete, Combobox, …).
  *
  * Strict rules enforced:
- *   R-I.1 — Label is associated to the control via `htmlFor` / `id`.
+ *   R-I.1 — Label is associated to the control via `htmlFor` / `id`, plus
+ *           `labelId` for children whose visible surface is NOT labelable.
+ *
+ *           >>> THE SECOND CHANNEL WAS MISSING, AND HALF THE CONTROLS NEED IT.
+ *           >>> `htmlFor` / `id` names LABELABLE elements only — input, select,
+ *           >>> textarea, button, meter, output, progress. `Select` renders its
+ *           >>> visible surface as a `div[role="combobox"]`, which is not one,
+ *           >>> so the pair resolved to NOTHING: the control had no accessible
+ *           >>> name and a screen reader announced "combobox, collapsed"
+ *           >>> without saying which field. WCAG 4.1.2 / 1.3.1, invisible on
+ *           >>> screen, in every filter drawer and every form of every module.
+ *           >>>
+ *           >>> Found by the axe-core suite of
+ *           >>> `autorisation-admis-pour-conforme-fe` (Area 10), failing with
+ *           >>> `aria-input-field-name` on the first `Select` rendered.
+ *
+ *           WHY `labelId` AND NOT `aria-labelledby`. A first attempt passed
+ *           `aria-labelledby` to every child. It does not work and it breaks
+ *           things: MUI spreads unknown props onto its ROOT wrapper, so the
+ *           attribute landed on `div.MuiInputBase-root` — never on the inner
+ *           control. For `Select` the combobox stayed anonymous; for `Input`
+ *           the wrapper became a SECOND element carrying the label, which is
+ *           both wrong for assistive tech and enough to break any
+ *           `getByLabelText` in a host's tests. `labelId` is MUI's own channel:
+ *           `SelectInput` merges it into the combobox's `aria-labelledby`.
+ *
+ *           It is passed only to children that DECLARE they consume it, via
+ *           the `puiLabelTarget` marker (see `Select`). A blanket `labelId`
+ *           would reach `<input>` and MUI text fields, which do not know it —
+ *           React then warns about an unrecognised DOM attribute on every
+ *           render, in every host console.
+ *
+ *           KNOWN LIMITATION, stated because it is asymmetric with R-I.3: a
+ *           consumer-supplied `aria-labelledby` on a non-group child is NOT
+ *           merged into the name. `aria-describedby` is merged, here, by this
+ *           component; naming goes through MUI's `labelId`, and MUI does not
+ *           concatenate the two. Nothing is silently lost — the field is named
+ *           by its own label, which is the name a user should hear — but a host
+ *           wanting to ADD to that name must put it in `label`. Widening this
+ *           would mean interpolating a token list into `labelId`, a prop
+ *           documented as "the ID of an element".
  *   R-I.2 — Required adds the asterisk + `aria-required`.
  *   R-I.3 — Error: `aria-invalid` + `aria-describedby` linking the message.
  *           Field MERGES with the child's existing `aria-describedby` so a
@@ -47,61 +81,165 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * Grouping controls (RadioGroup / CheckboxGroup) — pass `group`:
  *   A native `<label htmlFor>` cannot name an ARIA group (only labelable
  *   elements can be `for`-targeted), so in `group` mode the label is rendered
- *   as a <span> with an id and the child group is associated via
- *   `aria-labelledby` instead. The child must forward `aria-labelledby`
- *   (and `aria-describedby`) onto its `role="group"`/`"radiogroup"` element.
+ *   as a <span> and the child group is associated via `aria-labelledby`
+ *   instead. The child must forward `aria-labelledby` (and
+ *   `aria-describedby`) onto its `role="group"`/`"radiogroup"` element.
+ *
+ *   Since R-I.1 above, `group` keeps its own `aria-labelledby` channel: a
+ *   `role="group"` element is not labelable either, but it is the CHILD's own
+ *   root that carries the role, so the attribute reaches the right element
+ *   there — unlike a MUI control, whose root is a wrapper.
  *
  *   <Field label="Genre" group error={errors.genre}>
  *     <RadioGroup … />
  *   </Field>
+ *
+ * ── LARGEUR SEMANTIQUE (gap G-H) ──────────────────────────────
+ *
+ * `width` rattache le champ a l'un des cinq gabarits imposes par la section
+ * « Form Field Width & Layout Standards » des Platform Mandatory UX Patterns.
+ * Le standard y interdit explicitement les « arbitrary input field widths » et
+ * les « jagged alignment fields within forms », et impose de mapper chaque
+ * champ a un gabarit d'apres sa contrainte de CARACTERES :
+ *
+ *   xs  1 a 5 caracteres    code postal, CVV, age
+ *   s   6 a 15              telephone, montant, date, identifiant court
+ *   m   16 a 60             nom, courriel, ville, liste simple
+ *   l   61 a 256            adresse, recherche complexe, longue liste
+ *   xl  257 et plus         zone de texte, description, editeur
+ *
+ * POURQUOI SUR `Field` ET NON SUR CHAQUE CONTROLE. Le gabarit est une
+ * contrainte de MISE EN PAGE, pas une propriete de l'input : c'est la boite du
+ * champ - libelle, controle, indication, erreur - qui doit etre bornee, sinon
+ * le message d'erreur s'etale sur toute la cellule pendant que l'input est
+ * borne. `Field` est le seul endroit qui voit cette boite entiere.
+ *
+ * POURQUOI UN PLAFOND ET NON UNE LARGEUR FIXE. Le standard exige aussi que les
+ * champs soient empiles « 100% grid width » sur mobile, et que des champs
+ * heterogenes s'alignent sur des fractions de colonnes. Un `maxWidth`
+ * n'est donc pose qu'a partir de `sm` : la grille continue de decider des
+ * COLONNES, le gabarit borne le champ DANS sa cellule. Les deux regles
+ * coexistent au lieu de se contredire.
+ *
+ * >>> LES CINQ VALEURS SONT UNE DECISION DE DESIGN, PAS UNE LECTURE. Le
+ * >>> standard donne des FOURCHETTES (« ~80px to 120px max »). J'ai retenu le
+ * >>> HAUT de chaque fourchette, ces largeurs etant des plafonds : prendre le
+ * >>> bas tronquerait des valeurs qui tiennent dans la contrainte de
+ * >>> caracteres annoncee. A confirmer par l'equipe design ; les cinq nombres
+ * >>> sont exposes en variables CSS pour etre revus sans toucher au code. <<<
+ */
+
+/**
+ * Gabarits de largeur semantique (G-H). Voir la note en tete de fichier.
+ *
+ * Les valeurs passent par des variables CSS pour que l'equipe design puisse
+ * les revoir sans modification de code. Les replis sont le HAUT de chaque
+ * fourchette du standard, ces largeurs etant des plafonds.
  */
-function Field(_ref) {
-  var label = _ref.label,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required,
-    hint = _ref.hint,
-    error = _ref.error,
-    htmlFor = _ref.htmlFor,
-    _ref$fullWidth = _ref.fullWidth,
-    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
-    disabled = _ref.disabled,
-    _ref$group = _ref.group,
-    group = _ref$group === void 0 ? false : _ref$group,
-    children = _ref.children,
-    helpAdornment = _ref.helpAdornment,
-    sx = _ref.sx,
-    className = _ref.className;
+
+/**
+ * Exporte pour etre TESTABLE : le plafond ne s'applique qu'a partir de `sm`,
+ * donc via une requete media qu'`emotion` injecte dans la feuille de style et
+ * que jsdom ne resout pas. Un test de rendu ne peut donc pas lire la largeur
+ * effective ; il peut en revanche epingler les cinq valeurs, ce qui est le
+ * point sensible (elles sont une decision de design, voir la note ci-dessus).
+ *
+ * ─── Les variables CSS EXISTENT desormais ─────────────────────────
+ *
+ * La note ci-dessus affirmait que les cinq nombres etaient "exposes en
+ * variables CSS pour etre revus sans toucher au code". C'etait FAUX jusqu'a
+ * l'audit Area 4 d'addm-fe : `cssVariables` n'emettait aucun `--field-w-*`,
+ * donc seuls les REPLIS ci-dessous rendaient, et la revision annoncee
+ * n'existait pas.
+ *
+ * Les valeurs vivent maintenant dans `tokens.layout.fieldWidth` et sont
+ * emises. Les replis restent : un hote qui n'appelle jamais
+ * `injectCssVariables` doit continuer a rendre des largeurs correctes. Les
+ * deux doivent donc rester d'accord, ce qu'epingle le test de contrat.
+ */
+const FIELD_MAX_WIDTH = exports.FIELD_MAX_WIDTH = {
+  xs: "var(--field-w-xs, 120px)",
+  s: "var(--field-w-s, 200px)",
+  m: "var(--field-w-m, 400px)",
+  l: "var(--field-w-l, 600px)",
+  xl: "100%"
+};
+function Field({
+  label,
+  required = false,
+  hint,
+  error,
+  htmlFor,
+  fullWidth = true,
+  disabled,
+  group = false,
+  width,
+  children,
+  helpAdornment,
+  // optional <FieldHelp> element
+  sx,
+  className
+}) {
   // R-I.1 — useId provides SSR-safe, per-instance, stable IDs.
   // Replaces the previous module-scoped counter (`let __uid = 0`) which broke
   // hydration and Concurrent Mode.
-  var reactId = React.useId();
-  var auto = "pui-".concat(reactId.replace(/:/g, ""));
-  var inputId = htmlFor || auto;
-  var hintId = "".concat(inputId, "-h");
-  var errorId = "".concat(inputId, "-e");
-  var labelId = "".concat(inputId, "-l");
-  var hasError = !!error;
-  var child = React.Children.only(children);
+  const reactId = React.useId();
+  const auto = `pui-${reactId.replace(/:/g, "")}`;
+  const inputId = htmlFor || auto;
+  const hintId = `${inputId}-h`;
+  const errorId = `${inputId}-e`;
+  const labelId = `${inputId}-l`;
+  const hasError = !!error;
+  const child = React.Children.only(children);
+
+  /**
+   * Does this child consume `labelId` (R-I.1)?
+   *
+   * A component whose visible surface is a `div[role="combobox"]` cannot be
+   * named by `htmlFor`/`id`, and cannot receive `aria-labelledby` through
+   * props either — MUI spreads unknown props onto its root WRAPPER. Those
+   * components therefore declare a static marker and take MUI's own `labelId`
+   * channel instead. See the R-I.1 note at the head of this file for the
+   * attempt that did not work.
+   *
+   * A marker rather than a type check: `Field` must not import `Select` (a
+   * cycle, and it would pull the whole control into every `Field` call site),
+   * and it cannot infer from the element what its rendered DOM will be.
+   */
+  const childType = child.type;
+  const wantsLabelId = childType?.puiLabelTarget === "labelId";
   // The wrapped control is polymorphic (Input/Select/NumberInput/Combobox/…);
   // type only the props Field reads/merges, replacing React's `props: any`.
-  var childProps = child.props;
+  const childProps = child.props;
 
   // R-I.3 — MERGE the child's existing aria-describedby with our hint/error
   // ids. cloneElement replaces props, so without an explicit merge any
   // consumer-supplied describedby was silently discarded.
-  var describedBy = [childProps["aria-describedby"], hint && !hasError ? hintId : null, hasError ? errorId : null].filter(Boolean).join(" ") || undefined;
+  const describedBy = [childProps["aria-describedby"], hint && !hasError ? hintId : null, hasError ? errorId : null].filter(Boolean).join(" ") || undefined;
 
-  // CC-6 — in group mode the label names the group via aria-labelledby.
-  // Merge with any consumer-supplied labelledby so it is never lost.
-  var labelledBy = group ? [childProps["aria-labelledby"], label ? labelId : null].filter(Boolean).join(" ") || undefined : undefined;
-  var enhanced = /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({
+  /**
+   * R-I.1 — `group` mode only.
+   *
+   * The child's own root carries `role="group"`, so an `aria-labelledby`
+   * passed through props reaches the element that needs it. That is NOT true
+   * of a MUI control, whose root is a wrapper div — hence `labelId` for those.
+   * Merged with any consumer-supplied value so it is never lost.
+   */
+  const labelledBy = group ? [childProps["aria-labelledby"], label ? labelId : null].filter(Boolean).join(" ") || undefined : undefined;
+  const enhanced = /*#__PURE__*/React.cloneElement(child, {
     id: childProps.id || inputId,
     "aria-invalid": hasError ? "true" : undefined,
     "aria-required": required ? "true" : undefined,
-    "aria-describedby": describedBy
-  }, group ? {
-    "aria-labelledby": labelledBy
-  } : {}), {}, {
+    "aria-describedby": describedBy,
+    ...(group ? {
+      "aria-labelledby": labelledBy
+    } : {}),
+    /* R-I.1 — MUI's own labelling channel, for the controls that declare they
+       consume it. `SelectInput` merges this into the combobox's
+       `aria-labelledby`; nothing else in the tree is touched. */
+    ...(wantsLabelId && label ? {
+      labelId
+    } : {}),
     // `error` / `disabled` are broadcast by FormControl via context for MUI
     // inputs, but several v2 inputs (NumberInput, Combobox renderInput) are
     // not pure MUI children and read the props directly — keep them explicit.
@@ -111,17 +249,17 @@ function Field(_ref) {
     // inline filter input). Only fall back to Field's value when the child
     // hasn't expressed an opinion.
     fullWidth: childProps.fullWidth !== undefined ? childProps.fullWidth : fullWidth
-  }));
+  });
 
   // R-I.6 — RTL-safe margin reset. `marginLeft: 0` only zeroes the LTR
   // inline-start; in [dir="rtl"] the helper picks up MUI's default on
   // the (now physical-right but logical-start) side and is mis-aligned.
   // `marginInlineStart` resets the correct edge in both directions.
-  var helperResetSx = {
+  const helperResetSx = {
     marginInlineStart: 0,
     fontSize: "var(--text-xs)"
   };
-  var LABEL_SX = {
+  const LABEL_SX = {
     display: "flex",
     alignItems: "center",
     gap: "var(--s-1)",
@@ -138,8 +276,13 @@ function Field(_ref) {
   };
 
   // Shared label content (text + required marker + optional help adornment).
-  var labelContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [label, required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+  //
+  // NO wrapper span around `{label}`: an earlier attempt added one to anchor
+  // the id on the text alone, and it changed what `getByText("…")` returns —
+  // a host test expecting the `<label>` element got the inner span instead.
+  // The id stays on the label element, as it always has in `group` mode.
+  const labelContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [label, required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       component: "span",
       "aria-hidden": "true",
       sx: {
@@ -149,33 +292,49 @@ function Field(_ref) {
       children: "*"
     }), helpAdornment]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl["default"], {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
     error: hasError,
     required: required,
     disabled: disabled,
     fullWidth: fullWidth,
     className: className,
-    sx: sx,
+    sx: {
+      /* G-H — plafond a partir de `sm` seulement : sur mobile le standard
+       * impose 100% de la largeur de grille. */
+      ...(width ? {
+        maxWidth: {
+          xs: "100%",
+          sm: FIELD_MAX_WIDTH[width]
+        }
+      } : {}),
+      ...sx
+    },
     children: [label && (group ?
     /*#__PURE__*/
     // Group mode: render as a <span> carrying an id (no <label for>),
     // referenced by the group's aria-labelledby.
-    (0, _jsxRuntime.jsx)(_FormLabel["default"], {
+    (0, _jsxRuntime.jsx)(_FormLabel.default, {
       component: "span",
       id: labelId,
       required: false,
       sx: LABEL_SX,
       children: labelContent
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel["default"], {
+    }) :
+    /*#__PURE__*/
+    // The id is present here too: a child declaring `puiLabelTarget`
+    // points MUI's `labelId` at this element.
+    (0, _jsxRuntime.jsx)(_FormLabel.default, {
       htmlFor: inputId,
+      id: labelId,
       required: false /* we render the * ourselves */,
       sx: LABEL_SX,
       children: labelContent
-    })), enhanced, hint && !hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormHelperText["default"], {
+    })), enhanced, hint && !hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormHelperText.default, {
       id: hintId,
-      sx: _objectSpread(_objectSpread({}, helperResetSx), {}, {
+      sx: {
+        ...helperResetSx,
         color: "var(--fg-subtle)"
-      }),
+      },
       children: hint
     }), hasError &&
     /*#__PURE__*/
@@ -191,7 +350,7 @@ function Field(_ref) {
      * Dropping FormHelperText also removed a `color: … !important` that
      * only existed to beat MUI's own `Mui-error` colour.
      */
-    (0, _jsxRuntime.jsx)(_FieldError["default"], {
+    (0, _jsxRuntime.jsx)(_FieldError.default, {
       id: errorId,
       sx: {
         marginTop: "var(--s-1)"
@@ -200,5 +359,5 @@ function Field(_ref) {
     })]
   });
 }
-var _default = exports["default"] = Field;
+var _default = exports.default = Field;
 //# sourceMappingURL=Field.js.map