@beweco/aurora-ui 1.0.0-beta.131 → 1.0.0-beta.133

package/dist/index.cjs.js

@@ -857,6 +857,64 @@ const NAV_END_CLASS = `${CELL_CLASS} w-9 px-0 rounded-e-[12px] rounded-s-none`;
  * `--color-default` de Aurora (falso amigo, decisiones-aceptadas-f1.md D-F1-3).
  */
 const ACTIVE_LINK_CLASS = "rounded-[12px] bg-primary text-primary-foreground hover:bg-primary active:bg-primary";
+/**
+ * Traducciones por defecto en español. Todas son `aria-label`: este componente no tiene más
+ * texto visible que los números de página.
+ */
+const DEFAULT_TRANSLATIONS$f = {
+    previousPageAriaLabel: "Página anterior",
+    nextPageAriaLabel: "Página siguiente",
+    jumpBackwardAriaLabel: "Retroceder {count} páginas",
+    jumpForwardAriaLabel: "Avanzar {count} páginas",
+};
+/**
+ * TECH-2459 · elipsis navegable — páginas que salta la elipsis. Literal de v2:
+ * `dotsJump = 5`, default desestructurado en `@heroui/pagination@2.2.20`
+ * (`dist/use-pagination.js:57`, la versión que traía `@heroui/react@2.7.11`).
+ *
+ * El destino se recorta a `[1, total]` exactamente como allí (`dist/pagination.js:530`):
+ *
+ *   onPress: () => isBefore
+ *     ? setPage(activePage - dotsJump >= 1 ? activePage - dotsJump : 1)
+ *     : setPage(activePage + dotsJump <= total ? activePage + dotsJump : total)
+ *
+ * Aquí lo hace `goTo`, que ya aplica el mismo clamp.
+ */
+const DOTS_JUMP = 5;
+/**
+ * El intercambio de iconos de la elipsis, tal cual lo declaraba el `tv` de v2
+ * (`@heroui/theme@2.4.15`, `dist/components/pagination.js:186-192`):
+ *
+ *   forwardIcon: ["hidden", "group-hover:block",
+ *                 "group-data-[focus-visible=true]:block", "data-[before=true]:rotate-180"]
+ *   ellipsis:    "group-hover:hidden group-data-[focus-visible=true]:hidden"
+ *
+ * `data-focus-visible` SÍ sobrevive a v3 — no es de los atributos que react-aria renombró
+ * (`data-hover` → `data-hovered`, skill `auraui-components` trampa 3): el `Button` de
+ * react-aria-components lo escribe (`dist/private/Button.mjs:101`) y el propio
+ * `.pagination__link` de v3 lo usa (`@heroui/styles/dist/components/pagination.css:51-53`).
+ * El hover va por `group-hover:` (CSS `:hover`), igual que en ese mismo CSS.
+ */
+const DOTS_REST_CLASS = "group-hover:hidden group-data-[focus-visible=true]:hidden";
+const DOTS_JUMP_ICON_CLASS = "hidden group-hover:block group-data-[focus-visible=true]:block data-[before=true]:rotate-180";
+/**
+ * Los tres puntos en reposo: copia literal del `EllipsisIcon` de v2
+ * (`@heroui/shared-icons@2.1.9`, `dist/ellipsis.js`) — tres `circle` de `r=1` en (5,12),
+ * (12,12) y (19,12) sobre un `viewBox` de 24 y `1em` de lado.
+ *
+ * NO vale el `…` (U+2026) que pinta `Pagination.Ellipsis` de v3
+ * (`@heroui/react/dist/components/pagination/pagination.js:231`, children hardcodeado y
+ * posterior al spread de props, o sea imposible de sustituir): ese glifo se apoya en la línea
+ * base y queda más bajo que los puntos de v2. Medido sobre
+ * `vrt/__baselines__/custom-components-pagination--default-light.png`.
+ */
+const EllipsisDotsIcon = () => (jsxRuntime.jsxs("svg", { "aria-hidden": "true", className: DOTS_REST_CLASS, fill: "none", height: "1em", shapeRendering: "geometricPrecision", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", viewBox: "0 0 24 24", width: "1em", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "currentColor", r: "1" }), jsxRuntime.jsx("circle", { cx: "19", cy: "12", fill: "currentColor", r: "1" }), jsxRuntime.jsx("circle", { cx: "5", cy: "12", fill: "currentColor", r: "1" })] }));
+/**
+ * El doble galón que v2 mostraba al pasar el ratón: `ForwardIcon` de
+ * `@heroui/shared-icons@2.1.9` (`dist/forward.js`), los dos trazos `M13 17l5-5-5-5` y
+ * `M6 17l5-5-5-5` → `»`. Con `data-before="true"` gira 180° y se lee `«`, igual que en v2.
+ */
+const JumpIcon = ({ isBefore }) => (jsxRuntime.jsxs("svg", { "aria-hidden": "true", className: DOTS_JUMP_ICON_CLASS, "data-before": isBefore ? "true" : undefined, fill: "none", focusable: "false", height: "1em", role: "presentation", shapeRendering: "geometricPrecision", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", viewBox: "0 0 24 24", width: "1em", children: [jsxRuntime.jsx("path", { d: "M13 17l5-5-5-5" }), jsxRuntime.jsx("path", { d: "M6 17l5-5-5-5" })] }));
 /**
  * Rango de páginas con elipsis, **igual que el algoritmo de HeroUI v2** (v3 no trae ninguno: sus
  * piezas son puramente presentacionales). Reproduce `siblings: 1` y `boundaries: 1`, sus defaults.
@@ -902,14 +960,23 @@ function getPaginationRange(total, current) {
  * `date-picker` en D-G1-3). Esta fachada reconstruye el comportamiento con estado (rango de
  * páginas + elipsis) manteniendo la API pública v2 (`total`/`page`/`onChange`).
  *
+ * Reconstruido además (reportado desde `bewe-analytics`, tabla de 34 páginas):
+ * - **La elipsis vuelve a ser un control**: salta ±`DOTS_JUMP` (5) páginas y al pasar el ratón
+ *   o recibir foco de teclado cambia los tres puntos por el doble galón `«`/`»`, como v2. Las
+ *   apps no pueden arreglarlo por su lado: esta fachada compone la paginación por dentro.
+ * - **Nombre accesible en anterior/siguiente**: sus galones son `aria-hidden` en v3, así que sin
+ *   `aria-label` los dos botones llegaban vacíos al árbol de accesibilidad.
+ *
+
  * ⚠️ `size` se acepta pero no se aplica: mismo bug preexistente que v2 (destructurado, nunca
  * reenviado a HeroUI) — fuera de scope de esta migración, reportado aparte (ver
  * findings/decisiones-aceptadas-g2.md y f5-L7-sueltos.md · P-17). v3 SÍ tiene la prop (emite
  * `.pagination--sm|--md|--lg`), así que arreglarlo es un cambio de tamaño visible: ticket aparte.
  */
-const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm", className, isDisabled, }) => {
+const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm", className, isDisabled, translations = {}, }) => {
     const [internalPage, setInternalPage] = $8WNJc$react.useState(initialPage);
     const currentPage = page ?? internalPage;
+    const t = { ...DEFAULT_TRANSLATIONS$f, ...translations };
     const goTo = (next) => {
         const clamped = Math.min(Math.max(next, 1), total);
         if (page === undefined) {
@@ -918,13 +985,38 @@ const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm"
         onChange?.(clamped);
     };
     const items = getPaginationRange(total, currentPage);
+    // Qué elipsis retrocede y cuál avanza, con el mismo criterio de v2:
+    // `isBefore = index < range.indexOf(activePage)` (`@heroui/pagination@2.2.20`,
+    // `dist/pagination.js:464`). Si `page` viene fuera de rango, `indexOf` da -1 y todas las
+    // elipsis avanzan — también igual que v2, que no protegía ese caso.
+    const activeIndex = items.indexOf(currentPage);
     return (
     // `w-fit` reproduce el `max-w-fit` del wrapper de v2: `.pagination` de v3 es `w-full` +
     // `justify-between`, así que dentro de un `flex justify-center` (como el de AccordionList) la
     // tira se quedaba pegada a la izquierda en vez de centrarse.
-    jsxRuntime.jsx(react.Pagination, { className: ["w-fit", className].filter(Boolean).join(" "), children: jsxRuntime.jsxs(react.Pagination.Content, { className: STRIP_CLASS, children: [jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Previous, { className: NAV_START_CLASS, isDisabled: isDisabled || currentPage <= 1, onPress: () => goTo(currentPage - 1), children: jsxRuntime.jsx(react.Pagination.PreviousIcon, {}) }) }), items.map((item, index) => item === "ellipsis" ? (
-                // biome-ignore lint/suspicious/noArrayIndexKey: solo hay como máximo 2 elipsis, posición estable
-                jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Ellipsis, { className: `${CELL_CLASS} ${INNER_RADIUS_CLASS}` }) }, `ellipsis-${index}`)) : (jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Link, { className: `${CELL_CLASS} ${item === currentPage ? ACTIVE_LINK_CLASS : INNER_RADIUS_CLASS}`, isActive: item === currentPage, isDisabled: isDisabled, onPress: () => goTo(item), children: item }) }, item))), jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Next, { className: NAV_END_CLASS, isDisabled: isDisabled || currentPage >= total, onPress: () => goTo(currentPage + 1), children: jsxRuntime.jsx(react.Pagination.NextIcon, {}) }) })] }) }));
+    jsxRuntime.jsx(react.Pagination, { className: ["w-fit", className].filter(Boolean).join(" "), children: jsxRuntime.jsxs(react.Pagination.Content, { className: STRIP_CLASS, children: [jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Previous
+                    // v3 mete el galón en un `<span aria-hidden="true">`
+                    // (`pagination.js:165`), así que sin esto el botón se queda SIN nombre
+                    // accesible: un lector de pantalla lo anuncia como "botón" a secas. v2 sí
+                    // lo nombraba ("previous page button", `use-pagination.js:213`), pero en
+                    // inglés y hardcodeado; aquí va por `translations` (regla obligatoria de
+                    // i18n del repo, skill `auraui-i18n`).
+                    , { "aria-label": t.previousPageAriaLabel, className: NAV_START_CLASS, isDisabled: isDisabled || currentPage <= 1, onPress: () => goTo(currentPage - 1), children: jsxRuntime.jsx(react.Pagination.PreviousIcon, {}) }) }), items.map((item, index) => {
+                    if (item === "ellipsis") {
+                        const isBefore = index < activeIndex;
+                        const label = isBefore
+                            ? t.jumpBackwardAriaLabel
+                            : t.jumpForwardAriaLabel;
+                        return (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: solo hay como máximo 2 elipsis, posición estable
+                        jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsxs(react.Pagination.Link, { "aria-label": label.replace("{count}", String(DOTS_JUMP)), className: `group ${CELL_CLASS} ${INNER_RADIUS_CLASS}`, isDisabled: isDisabled, onPress: () => goTo(isBefore
+                                    ? currentPage - DOTS_JUMP
+                                    : currentPage + DOTS_JUMP), children: [jsxRuntime.jsx(EllipsisDotsIcon, {}), jsxRuntime.jsx(JumpIcon, { isBefore: isBefore })] }) }, `ellipsis-${index}`));
+                    }
+                    return (jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Link, { className: `${CELL_CLASS} ${item === currentPage ? ACTIVE_LINK_CLASS : INNER_RADIUS_CLASS}`, isActive: item === currentPage, isDisabled: isDisabled, onPress: () => goTo(item), children: item }) }, item));
+                }), jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Next
+                    /* Mismo motivo que en `Previous`: el galón es `aria-hidden`. */
+                    , { "aria-label": t.nextPageAriaLabel, className: NAV_END_CLASS, isDisabled: isDisabled || currentPage >= total, onPress: () => goTo(currentPage + 1), children: jsxRuntime.jsx(react.Pagination.NextIcon, {}) }) })] }) }));
 };
 
 // TECH-2459 · F5 · P-01 — Valores tomados del tema v2 REAL (`@heroui/theme@2.4.15`,
@@ -1501,9 +1593,13 @@ const FIELD_SHADOW_CLASS$2 = "shadow-xs";
 //    borde transparente de 2px NO es inocuo, porque con `box-sizing: border-box` come 2px por
 //    lado y empuja el texto (medido: la sangría salía 14px en vez de los 12px de la referencia).
 // 2. `underlined` usa `!px-1` (4px), no el padding del tamaño, y su sombra es
-//    `0 1px 0 0 rgba(0,0,0,.05)` en vez de `shadow-sm`. Van con `!` porque estas clases NO pasan
-//    por `cn`: se concatenan a pelo, así que entre `px-3` y `px-1` no decide el orden del array
-//    sino el orden del CSS generado (medido: ganaba `px-3`).
+//    `0 1px 0 0 rgba(0,0,0,.05)` en vez de `shadow-sm`. **El `!` sigue siendo imprescindible aunque
+//    estas clases ya pasen por `cn`**: tailwind-merge 3 trata la forma con `!` como un grupo
+//    APARTE de la forma sin `!`, así que NO resuelve `px-3` contra `px-1!` — medido con el `cn`
+//    real del paquete instalado, `cn("px-3","px-1!")` → `"px-3 px-1!"`, las dos en el DOM. Quien
+//    decide es entonces la `!important`, no el orden del array ni el del CSS generado (sin el `!`
+//    ganaba `px-3`; medido computado con el `!`: `padding-inline: 4px`). No lo quites al ver que la
+//    cadena ya se fusiona.
 // 3. `isInvalid` en v2 teñía TODO de `danger` —borde, label y texto/placeholder—, no solo el
 //    borde; y en `flat` cambiaba el fondo a `danger-50`.
 // ⚠️ `bordered` NO lleva fondo, a propósito (TECH-2459 · F5, hallazgo de S2 + queja directa del
@@ -1531,6 +1627,44 @@ const VARIANT_CLASS$3 = {
 // píxeles del placeholder son `113,113,122` (el gris `default-500`), no el rosa `243,18,96`.
 const INVALID_LABEL_CLASS$2 = "text-danger";
 const INVALID_TEXT_CLASS$2 = "text-danger";
+// ── El `className` del consumidor: FUSIONADO y en la RAÍZ (TECH-2459 · P-?) ──────────────────
+//
+// Dos defectos en uno, y los dos se veían igual: el ancho que pide la app no llegaba nunca.
+//
+// 1. **Se concatenaba en vez de fusionarse.** Esta fachada montaba sus `className` con
+//    `[...].filter(Boolean).join(" ")`, así que `w-full` (de `fullWidth`, que por defecto es
+//    `true`) y el `w-48` del consumidor llegaban LOS DOS al DOM y decidía el orden del CSS
+//    emitido, no el del array — y gana `w-full`. Medido en el banco de pruebas: un campo con
+//    `className="w-48"` dentro de una fila flex de 592px medía 290px, exactamente lo mismo que su
+//    hermano sin `className`; en un bloque de 1287px, un `w-56` medía 1287px.
+//    v2 NO se comportaba así: `useInput` (`@heroui/input@2.4.22`,
+//    `dist/chunk-F2LJ3HQE.mjs:68,166`) metía el `className` del consumidor en
+//    `slots.base({ class: baseStyles })`, y el `tv` de v2 lleva `twMerge: true` por defecto
+//    (`@heroui/theme@2.4.15`, `dist/utils/tv.js:56`) → tailwind-merge BORRABA el `w-full` y el
+//    ancho del consumidor ganaba. Por eso aquí se usa `cn` (mismo tailwind-merge, vía
+//    `tailwind-variants`) con el `className` del consumidor en ÚLTIMA posición, igual que las 33
+//    fachadas del repo que ya lo hacen (`Chip.tsx:398`, `Checkbox.tsx:224`).
+//
+// 2. **Aterrizaba en la pieza equivocada.** El `className` se emitía en el `InputGroup` (el
+//    equivalente del slot `inputWrapper` de v2), no en la raíz. En v2 iba al slot `base`
+//    —`"group flex flex-col data-[hidden=true]:hidden"` + el `w-full` de `fullWidth`
+//    (`@heroui/theme@2.4.15`, `dist/components/input.js:7452`)—, que es justo donde vive el ancho.
+//    Fusionar en el `InputGroup` no habría bastado: la raíz seguiría con su `w-full` y el campo
+//    quedaría a 192px DESBORDANDO un hueco de 83. Así que el `className` se muda a la raíz, que es
+//    donde lo tenía v2; quien quiera tocar la caja del campo sigue teniendo `classNames.inputWrapper`,
+//    el mismo canal que en v2 (10+ usos reales en las apps: `bg-content1`, `h-9`, `shadow-none`…).
+//
+// Consecuencia del punto 2: el `w-full` del `InputGroup` deja de depender de `fullWidth` y pasa a
+// ser incondicional — que es LITERALMENTE lo que tenía v2 (`inputWrapper: "relative w-full
+// inline-flex …"`, sin variante que lo condicione). `fullWidth` decide solo el ancho de la RAÍZ,
+// como en su `tv`. Sin esto, un `fullWidth={false}` con un `w-48` del consumidor dejaría la caja
+// del campo encogida a su contenido dentro de una raíz de 192px.
+//
+// ⚠️ Lo que `cn` NO resuelve, y por eso el `!` de la variante `underlined` sigue siendo necesario:
+// tailwind-merge 3 trata la forma con `!` como un grupo APARTE de la forma sin `!`, así que
+// `px-3` y `px-1!` sobreviven las dos (comprobado con el `cn` real del paquete instalado) y sigue
+// ganando la `!important`. Está anotado también en el punto 2 de `VARIANT_CLASS`, que es donde se
+// lee al tocar esas clases.
 /**
  * Input genérico reutilizable basado en HeroUI v3 (TextField + InputGroup + Input) siguiendo las
  * reglas de diseño BeweOS (TECH-2459 · F3.0).
@@ -1597,45 +1731,14 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
             onChange(fakeEvent);
         }
     };
-    return (jsxRuntime.jsxs(react.TextField, { id: inputId, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: [FIELD_STACK_CLASS$3[size], fullWidth ? "w-full" : ""]
-            .filter(Boolean)
-            .join(" "), children: [label && (jsxRuntime.jsx(react.Label, { className: [
-                    LABEL_CLASS$4,
-                    LABEL_LEFT_CLASS[variant],
-                    variant === "underlined" ? "top-0" : LABEL_OFFSET_CLASS$1[size],
-                    isInvalid ? INVALID_LABEL_CLASS$2 : "",
-                    labelFlotante ? LABEL_INSIDE_CLASS[size] : "",
-                    labelFlotante ? LABEL_FLOAT_CLASS : "",
-                    classNames?.label,
-                ]
-                    .filter(Boolean)
-                    .join(" "), children: label })), jsxRuntime.jsxs(react.InputGroup, { isInvalid: isInvalid, isDisabled: isDisabled, isReadOnly: isReadOnly, className: [
-                    SIZE_CLASS$4[size],
-                    radius === "full" ? PADDING_FULL_CLASS$1[size] : PADDING_CLASS$2[size],
-                    variant === "underlined" ? UNDERLINED_INNER_CLASS$1[size] : "",
-                    RADIUS_CLASS$6[radius],
-                    VARIANT_CLASS$3[variant],
-                    FIELD_FOCUS_CLASS$3,
-                    FIELD_SHADOW_CLASS$2,
-                    fullWidth ? "w-full" : "",
-                    classNames?.inputWrapper,
-                    className,
-                ]
-                    .filter(Boolean)
-                    .join(" "), children: [startContent && (jsxRuntime.jsx(react.InputGroup.Prefix, { className: "border-none bg-transparent px-0", children: startContent })), jsxRuntime.jsx(react.InputGroup.Input, { ...rest, ref: ref, required: required, type: type, placeholder: labelFlotante ? " " : placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, className: [
-                            "bg-transparent p-0",
-                            SIZE_TEXT_CLASS$1[size],
-                            isInvalid ? INVALID_TEXT_CLASS$2 : "",
-                            startContent ? "ps-1.5" : "",
-                            endContent || showClear ? "pe-1.5" : "",
-                            classNames?.input,
-                        ]
-                            .filter(Boolean)
-                            .join(" ") }), showClear && (jsxRuntime.jsx(react.CloseButton, { "aria-label": "Limpiar", className: "h-4 w-4 min-h-0 p-0.5 mr-1", onPress: handleClear })), endContent && (jsxRuntime.jsx(react.InputGroup.Suffix, { className: "border-none bg-transparent px-0", children: endContent }))] }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: [HELPER_CLASS$2, "text-left", classNames?.description]
-                    .filter(Boolean)
-                    .join(" "), children: description })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: [HELPER_CLASS$2, "text-left", classNames?.errorMessage]
-                    .filter(Boolean)
-                    .join(" "), children: errorMessage }))] }));
+    return (jsxRuntime.jsxs(react.TextField, { id: inputId, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: react.cn(FIELD_STACK_CLASS$3[size], fullWidth ? "w-full" : "", 
+        // El `className` del consumidor, en la raíz y en último lugar: el slot `base` de
+        // v2 y la posición que le deja ganar en tailwind-merge (ver bloque de arriba).
+        className), children: [label && (jsxRuntime.jsx(react.Label, { className: react.cn(LABEL_CLASS$4, LABEL_LEFT_CLASS[variant], variant === "underlined" ? "top-0" : LABEL_OFFSET_CLASS$1[size], isInvalid ? INVALID_LABEL_CLASS$2 : "", labelFlotante ? LABEL_INSIDE_CLASS[size] : "", labelFlotante ? LABEL_FLOAT_CLASS : "", classNames?.label), children: label })), jsxRuntime.jsxs(react.InputGroup, { isInvalid: isInvalid, isDisabled: isDisabled, isReadOnly: isReadOnly, className: react.cn(SIZE_CLASS$4[size], radius === "full" ? PADDING_FULL_CLASS$1[size] : PADDING_CLASS$2[size], variant === "underlined" ? UNDERLINED_INNER_CLASS$1[size] : "", RADIUS_CLASS$6[radius], VARIANT_CLASS$3[variant], FIELD_FOCUS_CLASS$3, FIELD_SHADOW_CLASS$2, 
+                // Incondicional, como el `inputWrapper` de v2: la caja del campo llena
+                // siempre su raíz, y es la raíz la que responde a `fullWidth` y al ancho que
+                // pase el consumidor.
+                "w-full", classNames?.inputWrapper), children: [startContent && (jsxRuntime.jsx(react.InputGroup.Prefix, { className: "border-none bg-transparent px-0", children: startContent })), jsxRuntime.jsx(react.InputGroup.Input, { ...rest, ref: ref, required: required, type: type, placeholder: labelFlotante ? " " : placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, className: react.cn("bg-transparent p-0", SIZE_TEXT_CLASS$1[size], isInvalid ? INVALID_TEXT_CLASS$2 : "", startContent ? "ps-1.5" : "", endContent || showClear ? "pe-1.5" : "", classNames?.input) }), showClear && (jsxRuntime.jsx(react.CloseButton, { "aria-label": "Limpiar", className: "h-4 w-4 min-h-0 p-0.5 mr-1", onPress: handleClear })), endContent && (jsxRuntime.jsx(react.InputGroup.Suffix, { className: "border-none bg-transparent px-0", children: endContent }))] }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: react.cn(HELPER_CLASS$2, "text-left", classNames?.description), children: description })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: react.cn(HELPER_CLASS$2, "text-left", classNames?.errorMessage), children: errorMessage }))] }));
 });
 Input.displayName = "Input";
 
@@ -5596,7 +5699,17 @@ const MenuMobileBottomBar = $8WNJc$react.memo(function MenuMobileBottomBar({ ite
 // `flex group gap-2 items-center justify-between … px-2 py-1.5 w-full`). `.list-box-item` de v3
 // es `justify-start gap-3`, así que el `endContent` (el `+`, el chip `New`, el chip numérico)
 // dejaba de irse al borde derecho y quedaba pegado al texto, y la etiqueta se corría 4px.
-const ITEM_BASE_CLASS = "px-3 min-h-11 rounded-[14px] h-[44px] gap-2 justify-between data-[selected=true]:bg-primary-100";
+//
+// TECH-2459 · `group` — misma cita de v2 que la de arriba: su slot `base` empezaba por
+// `flex group …`. Es la pieza de la que dependen los CUATRO `group-data-[selected=true]:*` de
+// este fichero (la etiqueta de primer nivel en `ITEM_TITLE_CLASS` y los tres iconos). Sin un
+// ancestro con la clase `group`, esa variante de Tailwind no casa NUNCA y las cuatro reglas son
+// código muerto: medido en el navegador, el ítem de primer nivel SELECCIONADO se quedaba en
+// `default-500` (#71717a claro / #a1a1aa oscuro) donde v2 lo pintaba en `default-600`
+// (#52525b / #d4d4d8), así que el ítem activo no se distinguía de sus hermanos más que por la
+// píldora de fondo. No lo delata ni el compilador ni un grep del código: la clase está escrita
+// y es correcta, solo le falta el ancla.
+const ITEM_BASE_CLASS = "group px-3 min-h-11 rounded-[14px] h-[44px] gap-2 justify-between data-[selected=true]:bg-primary-100";
 // TECH-2459 · F5 · P-13a — override del ítem COLAPSADO. Venía de `getItemClasses(isCollapsed)`
 // (`MenuNavList.styles.ts` de v2, fichero que la migración eliminó): `w-11 h-11 gap-0 p-0`. Es lo
 // que centraba el icono: un cuadrado exacto de 44×44 SIN padding. Sin él, el ítem colapsado
@@ -5740,7 +5853,7 @@ const MenuNavList = $8WNJc$react.forwardRef(({ items, isCollapsed, defaultSelect
     // `MenuClawNavItem` (HTML semántico + `onClick`, sin `ListBox`).
     const renderSubItem = $8WNJc$react.useCallback((item) => {
         const isSelected = item.key === selectedKey;
-        return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("button", { type: "button", "data-menu-subitem-selected": isSelected ? "true" : "false", "aria-current": isSelected ? "page" : undefined, className: react.cn("flex w-full items-center justify-between gap-2 min-h-9 rounded-[14px] px-3 py-2 menu-nav-list__sub-item text-left", "text-default-500 hover:text-default-700 transition-colors outline-none", "focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-focus focus-visible:outline-offset-2", isSelected && "selected"), onClick: () => handleItemPress(item), children: [jsxRuntime.jsx(react.Label, { children: item.title }), item.endContent ?? null] }) }, item.key));
+        return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("button", { type: "button", "data-menu-subitem-selected": isSelected ? "true" : "false", "aria-current": isSelected ? "page" : undefined, className: react.cn("flex w-full items-center justify-between gap-2 min-h-9 rounded-[14px] px-3 py-2 menu-nav-list__sub-item text-left", "text-default-500 hover:text-default-700 transition-colors outline-none", "focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-focus focus-visible:outline-offset-2", isSelected && "selected"), onClick: () => handleItemPress(item), children: [jsxRuntime.jsx(react.Label, { className: "text-sm font-normal text-inherit", children: item.title }), item.endContent ?? null] }) }, item.key));
     }, [handleItemPress, selectedKey]);
     // Renders a nested item, i.e., an item that has sub-items.
     // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
@@ -8630,9 +8743,11 @@ const FIELD_STACK_CLASS$1 = {
  * metido en un hueco estrecho), no una reposición. El solape del chevron se arregla en
  * `VALUE_ROOM_CLASS`, que es donde v2 lo tenía resuelto.
  *
- * Va antes del `className` del consumidor: quien necesite otro mínimo pasa su propio `min-w-*` y,
- * al declarar las dos la misma propiedad con la misma especificidad, gana la que Tailwind 4 emita
- * después (escala ascendente) — mismo comportamiento que tenía el `min-w-40` del `tv` de v2.
+ * Va antes del `className` del consumidor, y ahora las dos pasan por `cn`: quien necesite otro
+ * mínimo pasa su propio `min-w-*` y tailwind-merge BORRA este — comprobado con el `cn` real
+ * (`cn("min-w-40","min-w-[180px]")` → `"min-w-[180px]"`). Antes las dos llegaban al DOM y decidía
+ * el orden en que Tailwind 4 las emitiera, no el del array; es el mismo mecanismo que tenía el
+ * `min-w-40` del `tv` de v2, que también fusionaba.
  */
 const ROOT_MIN_WIDTH_CLASS = "min-w-40";
 // v3 no tiene el vocabulario `variant` de v2 (solo "primary"/"secondary", sin borde visible por
@@ -8643,9 +8758,13 @@ const ROOT_MIN_WIDTH_CLASS = "min-w-40";
 //    borde transparente de 2px NO es inocuo, porque con `box-sizing: border-box` come 2px por
 //    lado y empuja el texto (medido: la sangría salía 14px en vez de los 12px de la referencia).
 // 2. `underlined` usa `!px-1` (4px), no el padding del tamaño, y su sombra es
-//    `0 1px 0 0 rgba(0,0,0,.05)` en vez de `shadow-sm`. Van con `!` porque estas clases NO pasan
-//    por `cn`: se concatenan a pelo, así que entre `px-3` y `px-1` no decide el orden del array
-//    sino el orden del CSS generado (medido: ganaba `px-3`).
+//    `0 1px 0 0 rgba(0,0,0,.05)` en vez de `shadow-sm`. **El `!` sigue siendo imprescindible aunque
+//    estas clases ya pasen por `cn`**: tailwind-merge 3 trata la forma con `!` como un grupo
+//    APARTE de la forma sin `!`, así que NO resuelve `px-3` contra `px-1!` — medido con el `cn`
+//    real del paquete instalado, `cn("px-3","px-1!")` → `"px-3 px-1!"`, las dos en el DOM. Quien
+//    decide es entonces la `!important`, no el orden del array ni el del CSS generado (sin el `!`
+//    ganaba `px-3`; medido computado con el `!`: `padding-inline: 4px`). No lo quites al ver que la
+//    cadena ya se fusiona.
 // 3. `isInvalid` en v2 teñía TODO de `danger` —borde, label y texto/placeholder—, no solo el
 //    borde; y en `flat` cambiaba el fondo a `danger-50`.
 // ⚠️ `bordered` NO lleva fondo, a propósito (TECH-2459 · F5, hallazgo de S2 + queja directa del
@@ -8781,49 +8900,39 @@ placeholder = "", selectionMode = "single", selectedKeys, defaultSelectedKeys, o
 // `undefined` y el campo dejaba de llenar su contenedor: en una fila flex se encogía al ancho
 // de su contenido (medido por S2: 208px dentro de una fila de 592, 336px de hueco). En una
 // columna no se notaba porque el `stretch` del flex lo tapaba — pero afecta a cualquier app.
-fullWidth = true, isOpen, defaultOpen, onOpenChange, className, classNames, }) => {
+fullWidth = true, isOpen, defaultOpen, onOpenChange, className, classNames, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, }) => {
     const generatedId = $8WNJc$react.useId();
     const selectId = id || generatedId;
     const requiredField = isRequired;
     // Mismo criterio que el `group-data-[has-helper=true]` de v2: cuenta como "con ayuda" el campo
     // que efectivamente PINTA una descripción o un mensaje de error, no el que solo recibe la prop.
     const hasHelper = Boolean((description && !isInvalid) || (isInvalid && errorMessage));
-    const triggerClassName = [
-        SIZE_CLASS$1[size],
-        radius === "full" ? PADDING_FULL_CLASS[size] : PADDING_CLASS[size],
-        TRIGGER_ALIGN_CLASS,
-        RADIUS_CLASS$4[radius],
-        VARIANT_CLASS$1[variant],
-        // En v2 el estado inválido MANDABA también con el campo enfocado
-        // (`group-data-[focus=true]:!border-danger`), así que el borde de foco no se aplica cuando
-        // el campo está en error: se queda el `danger`.
-        isInvalid ? INVALID_VARIANT_CLASS[variant] : FOCUS_BORDER_CLASS,
-        FIELD_FOCUS_CLASS$1,
-        FIELD_SHADOW_CLASS$1,
-        fullWidth ? "w-full" : "",
-        classNames?.trigger,
-    ]
-        .filter(Boolean)
-        .join(" ");
-    const inner = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx(react.Label, { className: [
-                    LABEL_CLASS$1,
-                    hasHelper
-                        ? LABEL_OFFSET_HELPER_CLASS[size]
-                        : LABEL_OFFSET_CLASS[size],
-                    isInvalid ? INVALID_LABEL_CLASS$1 : "",
-                    classNames?.label,
-                ]
-                    .filter(Boolean)
-                    .join(" "), children: label })), jsxRuntime.jsxs(react.Select.Trigger, { className: triggerClassName, children: [jsxRuntime.jsx(react.Select.Value, { className: [
-                            SIZE_TEXT_CLASS[size],
-                            VALUE_ROOM_CLASS,
-                            isInvalid ? INVALID_TEXT_CLASS$1 : "",
-                        ]
-                            .filter(Boolean)
-                            .join(" ") }), jsxRuntime.jsx(react.Select.Indicator, { className: "end-3" })] }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: `${HELPER_CLASS$1} text-left`, children: description })), jsxRuntime.jsx(react.Select.Popover, { className: classNames?.popoverContent, children: jsxRuntime.jsx(react.ListBox, { children: withItemIndicator(withCollectionItemIds(children)) }) }), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: `${HELPER_CLASS$1} text-left`, children: errorMessage }))] }));
+    const triggerClassName = react.cn(SIZE_CLASS$1[size], radius === "full" ? PADDING_FULL_CLASS[size] : PADDING_CLASS[size], TRIGGER_ALIGN_CLASS, RADIUS_CLASS$4[radius], VARIANT_CLASS$1[variant], 
+    // En v2 el estado inválido MANDABA también con el campo enfocado
+    // (`group-data-[focus=true]:!border-danger`), así que el borde de foco no se aplica cuando
+    // el campo está en error: se queda el `danger`.
+    isInvalid ? INVALID_VARIANT_CLASS[variant] : FOCUS_BORDER_CLASS, FIELD_FOCUS_CLASS$1, FIELD_SHADOW_CLASS$1, 
+    // Incondicional, como el slot `trigger` de v2 (`"relative px-3 gap-3 w-full inline-flex …"`,
+    // sin variante que lo condicione): el disparador llena siempre su raíz, y es la raíz la que
+    // responde a `fullWidth` y al ancho que pase el consumidor. v3 hace lo mismo por su cuenta
+    // con `.select__trigger--full-width`, pero esa regla vive en la capa `components` y la pisa
+    // cualquier utilidad.
+    "w-full", classNames?.trigger);
+    const inner = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx(react.Label, { className: react.cn(LABEL_CLASS$1, hasHelper
+                    ? LABEL_OFFSET_HELPER_CLASS[size]
+                    : LABEL_OFFSET_CLASS[size], isInvalid ? INVALID_LABEL_CLASS$1 : "", classNames?.label), children: label })), jsxRuntime.jsxs(react.Select.Trigger, { className: triggerClassName, children: [jsxRuntime.jsx(react.Select.Value, { className: react.cn(SIZE_TEXT_CLASS[size], VALUE_ROOM_CLASS, isInvalid ? INVALID_TEXT_CLASS$1 : "") }), jsxRuntime.jsx(react.Select.Indicator, { className: "end-3" })] }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: `${HELPER_CLASS$1} text-left`, children: description })), jsxRuntime.jsx(react.Select.Popover, { className: classNames?.popoverContent, children: jsxRuntime.jsx(react.ListBox, { children: withItemIndicator(withCollectionItemIds(children)) }) }), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: `${HELPER_CLASS$1} text-left`, children: errorMessage }))] }));
     const commonProps = {
         id: selectId,
         name,
+        // Etiquetado accesible. Va en la RAÍZ y no en el disparador a propósito: el nombre del
+        // disparador lo compone react-aria a partir de las props de la raíz (`useSelect` →
+        // `useLabel`), y puesto en `Select.Trigger` se quedaría como un `aria-label` suelto que
+        // compite con el `aria-labelledby` que esa misma pieza ya emite. Comprobado en el ÁRBOL DE
+        // ACCESIBILIDAD, no reconstruido a mano — ver `Select.test.tsx` y el reporte del lane.
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-details": ariaDetails,
         placeholder,
         disabledKeys,
         isInvalid,
@@ -8833,15 +8942,18 @@ fullWidth = true, isOpen, defaultOpen, onOpenChange, className, classNames, }) =
         defaultOpen,
         onOpenChange,
         fullWidth,
-        className: [
-            FIELD_STACK_CLASS$1[size],
-            // `w-full` y `min-w-40` son las dos ramas EXCLUYENTES de `fullWidth` en el `tv` de v2
-            // (ver `ROOT_MIN_WIDTH_CLASS`).
-            fullWidth ? "w-full" : ROOT_MIN_WIDTH_CLASS,
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "),
+        // `cn`, no una concatenación: el `className` del consumidor tiene que GANAR a las clases
+        // de la fachada, y con una cadena suelta llegan las dos al DOM y decide el orden en que
+        // Tailwind 4 las emite. Con `fullWidth` por defecto a `true`, eso dejaba `w-full` ganando
+        // a cualquier ancho que pasara la app: medido, un `className="w-48"` en una fila flex de
+        // 592px daba 290px (lo mismo que sin clase) y un `w-56` en un bloque de 1287px daba 1287.
+        // v2 fusionaba: `useSelect` metía el `className` en `slots.base({ class: baseStyles })`
+        // (`@heroui/select@2.4.22`, `dist/chunk-ONGPOZUT.mjs:171,202`) y el `tv` de v2 lleva
+        // `twMerge: true` por defecto (`@heroui/theme@2.4.15`, `dist/utils/tv.js:56`).
+        className: react.cn(FIELD_STACK_CLASS$1[size], 
+        // `w-full` y `min-w-40` son las dos ramas EXCLUYENTES de `fullWidth` en el `tv` de v2
+        // (ver `ROOT_MIN_WIDTH_CLASS`).
+        fullWidth ? "w-full" : ROOT_MIN_WIDTH_CLASS, className),
     };
     if (selectionMode === "multiple") {
         return (jsxRuntime.jsx(react.Select, { ...commonProps, selectionMode: "multiple", value: toArray(selectedKeys), defaultValue: toArray(defaultSelectedKeys), onChange: (keys) => onSelectionChange?.(new Set(keys)), children: inner }));
@@ -9132,9 +9244,13 @@ const FIELD_STACK_CLASS = "flex flex-col gap-1.5";
 //    borde transparente de 2px NO es inocuo, porque con `box-sizing: border-box` come 2px por
 //    lado y empuja el texto (medido: la sangría salía 14px en vez de los 12px de la referencia).
 // 2. `underlined` usa `!px-1` (4px), no el padding del tamaño, y su sombra es
-//    `0 1px 0 0 rgba(0,0,0,.05)` en vez de `shadow-sm`. Van con `!` porque estas clases NO pasan
-//    por `cn`: se concatenan a pelo, así que entre `px-3` y `px-1` no decide el orden del array
-//    sino el orden del CSS generado (medido: ganaba `px-3`).
+//    `0 1px 0 0 rgba(0,0,0,.05)` en vez de `shadow-sm`. **El `!` sigue siendo imprescindible aunque
+//    estas clases ya pasen por `cn`**: tailwind-merge 3 trata la forma con `!` como un grupo
+//    APARTE de la forma sin `!`, así que NO resuelve `px-3` contra `px-1!` — medido con el `cn`
+//    real del paquete instalado, `cn("px-3","px-1!")` → `"px-3 px-1!"`, las dos en el DOM. Quien
+//    decide es entonces la `!important`, no el orden del array ni el del CSS generado (sin el `!`
+//    ganaba `px-3`; medido computado con el `!`: `padding-inline: 4px`). No lo quites al ver que la
+//    cadena ya se fusiona.
 // 3. `isInvalid` en v2 teñía TODO de `danger` —borde, label y texto/placeholder—, no solo el
 //    borde; y en `flat` cambiaba el fondo a `danger-50`.
 // ⚠️ `bordered` NO lleva fondo, a propósito (TECH-2459 · F5, hallazgo de S2 + queja directa del
@@ -9159,6 +9275,24 @@ const VARIANT_CLASS = {
 // placeholder en el gris `default-500` (`113,113,122`) pese a ser un campo inválido.
 const INVALID_LABEL_CLASS = "text-danger";
 const INVALID_TEXT_CLASS = "text-danger";
+// ── El `className` del consumidor: FUSIONADO y en la RAÍZ ────────────────────────────────────
+//
+// Mismo defecto doble que en `Input.tsx` (ver ahí el razonamiento completo y las medidas), porque
+// en v2 este componente ERA el mismo: el `Textarea` de v2 es el `Input` con `isMultiline`, y pasa
+// por el mismo `useInput` (`@heroui/input@2.4.22`, `dist/chunk-F2LJ3HQE.mjs:68,166`), que mete el
+// `className` del consumidor en `slots.base({ class: baseStyles })` — fusionado con tailwind-merge
+// y en la RAÍZ, no en el elemento del campo.
+//
+// Aquí el `className` se emitía sobre el `<textarea>` y, además, concatenado: `w-full` y el ancho
+// del consumidor llegaban los dos al DOM y ganaba `w-full`. Medido: un `Textarea` con
+// `className="w-48"` en una fila flex de 592px medía 290px, lo mismo que su hermano sin clase.
+//
+// El `w-full` del `<textarea>` pasa a ser incondicional porque también lo era en v2: su slot
+// `input` es `["w-full font-normal bg-transparent …"]`, sin variante que lo condicione
+// (`@heroui/theme@2.4.15`, `dist/components/input.js`). `fullWidth` decide solo el ancho de la raíz.
+//
+// El canal para tocar la caja del campo sigue siendo `classNames.input`/`classNames.inputWrapper`,
+// igual que en v2.
 /**
  * Textarea genérico reutilizable basado en HeroUI v3 (TextField + TextArea) siguiendo las reglas
  * de diseño BeweOS (TECH-2459 · F3 · G1-forms). La API pública v2 (label, description,
@@ -9190,32 +9324,13 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
         onChange?.(event);
         onValueChange?.(event.target.value);
     };
-    return (jsxRuntime.jsxs(react.TextField, { id: textareaId, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: [FIELD_STACK_CLASS, fullWidth ? "w-full" : ""]
-            .filter(Boolean)
-            .join(" "), children: [label && (jsxRuntime.jsx(react.Label, { className: [
-                    LABEL_CLASS,
-                    isInvalid ? INVALID_LABEL_CLASS : "",
-                    classNames?.label,
-                ]
-                    .filter(Boolean)
-                    .join(" "), children: label })), jsxRuntime.jsx(react.TextArea, { ...rest, ref: ref, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, className: [
-                    SIZE_CLASS[size],
-                    RESIZE_CLASS,
-                    RADIUS_CLASS$3[radius],
-                    VARIANT_CLASS[variant],
-                    isInvalid ? INVALID_TEXT_CLASS : "",
-                    FIELD_FOCUS_CLASS,
-                    FIELD_SHADOW_CLASS,
-                    fullWidth ? "w-full" : "",
-                    classNames?.input ?? classNames?.inputWrapper,
-                    className,
-                ]
-                    .filter(Boolean)
-                    .join(" ") }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: [HELPER_CLASS, "text-left", classNames?.description]
-                    .filter(Boolean)
-                    .join(" "), children: description })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: [HELPER_CLASS, "text-left", classNames?.errorMessage]
-                    .filter(Boolean)
-                    .join(" "), children: errorMessage }))] }));
+    return (jsxRuntime.jsxs(react.TextField, { id: textareaId, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: react.cn(FIELD_STACK_CLASS, fullWidth ? "w-full" : "", 
+        // El `className` del consumidor, en la raíz y en último lugar: el slot `base` de
+        // v2 y la posición que le deja ganar en tailwind-merge (ver bloque de arriba).
+        className), children: [label && (jsxRuntime.jsx(react.Label, { className: react.cn(LABEL_CLASS, isInvalid ? INVALID_LABEL_CLASS : "", classNames?.label), children: label })), jsxRuntime.jsx(react.TextArea, { ...rest, ref: ref, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, className: react.cn(SIZE_CLASS[size], RESIZE_CLASS, RADIUS_CLASS$3[radius], VARIANT_CLASS[variant], isInvalid ? INVALID_TEXT_CLASS : "", FIELD_FOCUS_CLASS, FIELD_SHADOW_CLASS, 
+                // Incondicional, como el slot `input` de v2: el campo llena siempre su raíz,
+                // y es la raíz la que responde a `fullWidth` y al ancho del consumidor.
+                "w-full", classNames?.input ?? classNames?.inputWrapper) }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: react.cn(HELPER_CLASS, "text-left", classNames?.description), children: description })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: react.cn(HELPER_CLASS, "text-left", classNames?.errorMessage), children: errorMessage }))] }));
 });
 Textarea.displayName = "Textarea";