@beweco/aurora-ui 1.0.0-beta.141 → 1.0.0-beta.142

package/dist/index.cjs.js

@@ -756,7 +756,7 @@ const SHAPE_BY_VARIANT = {
     light: "transparent",
     flat: "soft",
     bordered: "outline",
-    faded: "outline",
+    faded: "faded",
     // `shadow` de v2 es `solid` + sombra teñida (ver `SHADOW_CLASS`).
     shadow: "solid",
     // `dot` de v2: chip neutro con un punto de color (ver `DOT_BASE_CLASS`).
@@ -911,6 +911,7 @@ const V3_VARIANT_BY_SHAPE = {
     soft: "soft",
     transparent: "tertiary",
     outline: "tertiary",
+    faded: "tertiary",
     dot: "tertiary",
 };
 /**
@@ -1018,6 +1019,48 @@ const CLOSE_ICON_SIZE_CLASS = {
     md: "size-[18px]",
     lg: "size-5",
 };
+// ── `bordered` y `faded` (TECH-2459, 24-sep: el usuario ve «muy negro» el `bordered default`) ──
+//
+// Antes las dos variantes pintaban borde y texto con `tintFg` (`default-700` = rgb(63,63,70) para
+// `default`): en el selector de tallas del `addon-card` de beweossmbs el chip sin elegir se leía
+// como un bloque casi negro al lado del `solid primary` elegido. Y el mismo `tintFg` dejaba el
+// texto por debajo de AA en otros colores. Medido en `Custom Components/Chip → BorderedColors`
+// (texto contra el fondo real, blanco / tarjeta `content1` oscura):
+//
+//   | color     | antes claro | antes oscuro | ahora claro | ahora oscuro |
+//   |-----------|-------------|--------------|-------------|--------------|
+//   | default   | 10.44 (borde casi negro) | 13.96 (borde casi blanco) | 17.93 | 15.11 |
+//   | primary   |  4.66       |  3.80 ✗      |  6.38       |  7.33        |
+//   | secondary |  9.50       |  5.77        |  9.50       |  5.77        |
+//   | success   |  2.19 ✗     |  8.08        |  5.50       |  8.08        |
+//   | warning   |  2.04 ✗     |  8.68        |  5.20       |  8.68        |
+//   | danger    |  4.14 ✗     |  4.27 ✗      |  6.06       |  5.02        |
+//
+// Criterio (no es volver a v2 por volver, es que se vea bien dentro de los tokens de Aurora):
+//
+// - **Borde**: el color a secas (`border-<color>`). Para `default`, el gris neutro que ya usa el
+//   resto de la familia (`dot` lleva `border-default`, y v2 también en `bordered`/`faded`):
+//   `--color-default`, rgb(212,212,216) en claro y rgb(63,63,70) en oscuro. Se distingue del fondo
+//   (medido: 1.48:1 sobre blanco, 1.70:1 sobre la tarjeta oscura, 2.01:1 sobre el fondo negro) sin
+//   competir con el texto. Input/Select reposan en `default-200`, un paso más claro, porque su borde
+//   enmarca un campo; en un chip el borde ES la forma, y `default-200` (≈1.27:1 sobre blanco,
+//   calculado) la dejaba casi invisible. En oscuro los dos pasos son el mismo rgb(63,63,70).
+// - **Texto**: el mismo paso legible que ya usa `flat` (`flatFg` + su `dark:`), que es el que la
+//   librería ya validó para texto tintado; `default` usa `foreground`.
+// - Van como CLASES y no como `borderColor` inline: un estilo inline le ganaba a cualquier
+//   `border-*` de la app, y así `cn` (tailwind-merge) deja ganar la clase del consumidor.
+// - `faded` conserva lo que lo distinguía en v2 (borde neutro en todos los colores + relleno
+//   `default-100`); hasta ahora era idéntico a `bordered`. Su texto es el `flatFg` SIN el `dark:`
+//   de `flat` (ver `flatDarkFgClass`). Medido: ≥ 4.73:1 en claro y ≥ 4.85:1 en oscuro en los 6
+//   colores. 0 usos en las apps.
+const OUTLINE_BORDER_CLASS = {
+    default: "border-default",
+    primary: "border-primary",
+    secondary: "border-secondary",
+    success: "border-success",
+    warning: "border-warning",
+    danger: "border-danger",
+};
 function colorStyle(color, shape) {
     if (shape === "dot") {
         // `dot`: el chip es neutro para cualquier color (el color va solo en el punto).
@@ -1034,7 +1077,14 @@ function colorStyle(color, shape) {
         // `flat` de v2: pastilla translúcida + texto del paso -600/-700 (P-08d).
         return { "--chip-bg": t.flatBg, "--chip-fg": t.flatFg };
     }
-    // transparent (light) / outline (bordered, faded): sin relleno, texto tinte del color.
+    if (shape === "outline" || shape === "faded") {
+        // `bordered`/`faded`: texto del paso legible de `flat`; `default` en `foreground`.
+        return {
+            "--chip-bg": shape === "faded" ? "var(--color-default-100)" : "transparent",
+            "--chip-fg": color === "default" ? "var(--color-foreground)" : t.flatFg,
+        };
+    }
+    // transparent (light): sin relleno, texto tinte del color.
     return { "--chip-bg": "transparent", "--chip-fg": t.tintFg };
 }
 /**
@@ -1072,18 +1122,21 @@ const Chip = ({ color = "default", variant = "solid", size = "md", radius = "ful
         : undefined;
     // Con `dot` el color no tiñe el chip, tampoco el de los colores fijos.
     const customClass = isStandard || isDot ? "" : CUSTOM_COLOR_CLASSES[color];
-    const outlineClass = shape === "outline" ? "border-2" : "";
-    // El `dark:text-*` que v2 declaraba solo para el texto de `flat` en success/warning/danger
-    // (P-08d). Va como clase porque `--chip-fg` es inline y no puede depender del tema; la capa
+    const hasBorder = shape === "outline" || shape === "faded";
+    const outlineClass = hasBorder
+        ? react.cn("border-2", isStandard
+            ? OUTLINE_BORDER_CLASS[shape === "faded" ? "default" : color]
+            : "")
+        : "";
+    // El `dark:text-*` que v2 declaraba para el texto de `flat` en success/warning/danger (P-08d),
+    // reutilizado por `bordered`, que toma el mismo texto. `faded` NO: sobre su relleno
+    // `default-100` oscuro el `danger-500` se quedaba en 4.22:1; con el paso `-600`/`-700` del
+    // tema oscuro (más claro) todos los colores pasan AA. Va como clase porque `--chip-fg` es inline y no puede depender del tema; la capa
     // `utilities` gana al `color: var(--chip-fg)` de `.chip`, que vive en `components`.
-    const flatDarkFgClass = isStandard && shape === "soft"
+    const flatDarkFgClass = isStandard && (shape === "soft" || shape === "outline")
         ? (COLOR_TOKENS[color].flatFgDarkClass ?? "")
         : "";
-    const baseStyle = vars
-        ? shape === "outline"
-            ? { ...vars, borderColor: vars["--chip-fg"] }
-            : vars
-        : undefined;
+    const baseStyle = vars;
     // El `style` del consumidor va DESPUÉS: pisa el relleno/texto calculados (uso real en
     // beweossmbs: `style={{ backgroundColor, color }}` con el color del agente, 5 sitios).
     const style = baseStyle || consumerStyle ? { ...baseStyle, ...consumerStyle } : undefined;
@@ -1202,6 +1255,20 @@ const STRIP_CLASS = "w-fit gap-0 rounded-[12px] shadow-xs";
 const STRIP_LOOSE_CLASS = "w-fit gap-1";
 /** Controles anterior/siguiente: celda cuadrada, sin el padding lateral de v3. */
 const NAV_CLASS = "w-9 px-0";
+/**
+ * TECH-2459 (beweossmbs, 24-sep) — anterior/siguiente deshabilitados por estar en un EXTREMO
+ * (página 1 / última). v3 los apaga con `status-disabled` (`opacity: var(--disabled-opacity)`,
+ * `@heroui/styles/dist/components/pagination.css:57`), que aquí deja el galón en el
+ * `text-default-foreground` de `CELL_CLASS` al 50 %: medido `rgb(0,0,0)` a opacidad 0.5 sobre
+ * `default-100`, que se lee como un control activo. Se pinta el galón en `default-300` y a
+ * opacidad plena, el gris de «apagado» de la paleta (el mismo que usaba v2,
+ * `data-[disabled=true]:text-default-300` de `@heroui/theme@2.4.15` `pagination.js:489`); el
+ * cursor y el `pointer-events` de v3 se conservan.
+ *
+ * Solo en los extremos: con `isDisabled` en toda la paginación manda el apagado uniforme de v3
+ * (todas las celdas al 50 %), y las flechas no deben verse distintas del resto.
+ */
+const NAV_AT_EDGE_CLASS = "disabled:text-default-300 disabled:opacity-100";
 /**
  * Radio de cada pieza según su posición en la tira.
  *
@@ -1276,6 +1343,33 @@ const DEFAULT_TRANSLATIONS$g = {
     jumpBackwardAriaLabel: "Retroceder {count} páginas",
     jumpForwardAriaLabel: "Avanzar {count} páginas",
 };
+/**
+ * TECH-2459 (beweossmbs, 24-sep) — los mismos textos en inglés, para cuando el idioma de la app es
+ * inglés. El defecto medido: con la interfaz en inglés, «anterior» se anunciaba «Página anterior».
+ * La app SÍ comunica su idioma (`<HeroUIProvider locale="en-US">` → `I18nProvider` de react-aria,
+ * `src/compat/heroui-v2-shims.tsx`), y es el mismo que ya siguen los textos propios de react-aria
+ * (la casilla «Select all» de la tabla, los calendarios…); la fachada lo ignoraba porque solo
+ * miraba `translations`. Ahora el idioma elige la base y `translations` sigue ganando encima.
+ */
+const EN_TRANSLATIONS = {
+    previousPageAriaLabel: "Previous page",
+    nextPageAriaLabel: "Next page",
+    jumpBackwardAriaLabel: "Jump back {count} pages",
+    jumpForwardAriaLabel: "Jump forward {count} pages",
+};
+/**
+ * Base de textos según el idioma de react-aria (`useLocale`): inglés si el locale es `en*`,
+ * español en cualquier otro caso (el default de la librería, regla `auraui-i18n`).
+ *
+ * Sin provider, react-aria resuelve el idioma del NAVEGADOR (`navigator.language`), igual que
+ * para sus propios textos: una app que no declare `locale` sigue al navegador. Para fijarlo, la
+ * app pasa `locale` a `HeroUIProvider` o los textos por `translations`.
+ */
+function baseTranslations(locale) {
+    return locale.toLowerCase().startsWith("en")
+        ? EN_TRANSLATIONS
+        : DEFAULT_TRANSLATIONS$g;
+}
 /**
  * TECH-2459 · elipsis navegable — páginas que salta la elipsis. Literal de v2:
  * `dotsJump = 5`, default desestructurado en `@heroui/pagination@2.2.20`
@@ -1395,7 +1489,8 @@ function getPaginationRange(total, current) {
 const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm", className, isDisabled, showControls = true, isCompact = true, showShadow = false, color = "primary", translations = {}, }) => {
     const [internalPage, setInternalPage] = $8WNJc$react.useState(initialPage);
     const currentPage = page ?? internalPage;
-    const t = { ...DEFAULT_TRANSLATIONS$g, ...translations };
+    const { locale } = react.useLocale();
+    const t = { ...baseTranslations(locale), ...translations };
     const goTo = (next) => {
         const clamped = Math.min(Math.max(next, 1), total);
         if (page === undefined) {
@@ -1428,7 +1523,7 @@ const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm"
                     // 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: react.cn(CELL_CLASS, NAV_CLASS, cellRadius(isCompact, { isFirst: true, isLast: false })), isDisabled: isDisabled || currentPage <= 1, onPress: () => goTo(currentPage - 1), children: jsxRuntime.jsx(react.Pagination.PreviousIcon, {}) }) })), items.map((item, index) => {
+                    , { "aria-label": t.previousPageAriaLabel, className: react.cn(CELL_CLASS, NAV_CLASS, isDisabled ? "" : NAV_AT_EDGE_CLASS, cellRadius(isCompact, { isFirst: true, isLast: false })), 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
@@ -1443,7 +1538,7 @@ const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm"
                     return (jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Link, { className: react.cn(CELL_CLASS, cellRadius(isCompact, itemPosition(index)), item === currentPage ? activeClass : ""), isActive: item === currentPage, isDisabled: isDisabled, onPress: () => goTo(item), children: item }) }, item));
                 }), showControls && (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: react.cn(CELL_CLASS, NAV_CLASS, cellRadius(isCompact, { isFirst: false, isLast: true })), isDisabled: isDisabled || currentPage >= total, onPress: () => goTo(currentPage + 1), children: jsxRuntime.jsx(react.Pagination.NextIcon, {}) }) }))] }) }));
+                    , { "aria-label": t.nextPageAriaLabel, className: react.cn(CELL_CLASS, NAV_CLASS, isDisabled ? "" : NAV_AT_EDGE_CLASS, cellRadius(isCompact, { isFirst: false, isLast: true })), 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`,
@@ -1719,7 +1814,12 @@ const ROOT_HELPER_SPACE_CLASS = {
 };
 const GROUP_PLACEMENT_CLASS = {
     outside: undefined,
-    "outside-left": "relative flex-1",
+    // `min-w-min` (TECH-2459, beweossmbs QA 24-sep, barra de la agenda por debajo de 1440px):
+    // `.date-input-group` de v3 lleva `overflow-hidden`, y un ítem flex con overflow distinto de
+    // `visible` tiene `min-width: auto` = 0. Con `flex-1` el grupo se quedaba con el hueco sobrante
+    // y recortaba su propio botón de calendario (104px con 140 de contenido a 1280px). En v2 el
+    // overflow era visible: el grupo conservaba su contenido y era la etiqueta la que se partía.
+    "outside-left": "relative flex-1 min-w-min",
 };
 const HELPER_PLACEMENT_CLASS = {
     outside: undefined,
@@ -2221,7 +2321,9 @@ labelPlacement: _labelPlacement, isInvalid = false, isRequired = false, isDisabl
 // `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, value, defaultValue, onChange, onValueChange, className, classNames, required, name, type = "text", onKeyDown, ...rest }, ref) => {
+fullWidth = true, value, defaultValue, onChange, onValueChange, className, classNames, required, name, type = "text", onKeyDown, 
+// Nombre y descripción accesibles: van al `TextField`, no al `<input>` (ver abajo).
+"aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
     // El `<input>` real, también para la fachada: v2 devolvía el foco al campo al limpiar
     // (`domRef.current?.focus()` en `handleClear`). Se combina con el `ref` del consumidor.
     const inputRef = $8WNJc$react.useRef(null);
@@ -2264,6 +2366,19 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
     // Solo flota cuando hay label y NO hay placeholder: con placeholder, v2 ya mostraba el label
     // arriba desde el primer render (ver el bloque de arriba).
     const labelFlotante = Boolean(label) && !placeholder;
+    // ── Nombre accesible sin `label` visible ─────────────────────────────────────────────────
+    //
+    // Quien llama a `useLabel` (y avisa «If you do not provide a visible label, you must specify
+    // an aria-label…») es el `TextField` de react-aria, que se los pasa al `<input>` por contexto.
+    // Dejarlos en el spread del `<input>` hacía que avisara AUNQUE la app diera nombre (medido en
+    // beweossmbs: 14/16 avisos al cargar `/clients/table`, del buscador con solo placeholder).
+    // Y `aria-describedby` en el `<input>` pisaba el id de la `Description` propia. v2 no avisaba
+    // nunca: `"aria-label": label ? aria-label : safeAriaLabel(aria-label, placeholder)`
+    // (`@heroui/input@2.4.33`, `dist/use-input.js:119`). Con `aria-labelledby` no se añade el
+    // placeholder: react-aria lo concatenaría al nombre del elemento referido.
+    const accessibleLabel = label || ariaLabelledBy
+        ? ariaLabel
+        : ariaLabel?.trim() || placeholder?.trim() || undefined;
     const handleChange = (event) => {
         onChange?.(event);
         onValueChange?.(event.target.value);
@@ -2296,7 +2411,7 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
             clearValue();
         }
     };
-    return (jsxRuntime.jsxs(react.TextField, { id: inputId, value: currentValue, 
+    return (jsxRuntime.jsxs(react.TextField, { id: inputId, "aria-label": accessibleLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, value: currentValue, 
         // Solo el modo no controlado escribe aquí; en controlado manda el `value` del padre
         // (que se entera por `onChange`/`onValueChange` del `<input>`).
         onChange: isControlled ? undefined : setUncontrolledValue, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: react.cn(FIELD_STACK_CLASS$3[size], fullWidth ? "w-full" : "", 
@@ -2313,7 +2428,15 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
                 // pase el consumidor.
                 "w-full", 
                 // v3 fusiona `innerWrapper` e `inputWrapper` de v2 en este único elemento.
-                classNames?.innerWrapper, 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: setInputRef, onKeyDown: handleKeyDown, required: required, type: type, placeholder: labelFlotante ? " " : placeholder, onChange: handleChange, className: react.cn("bg-transparent p-0", SIZE_TEXT_CLASS$2[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: react.cn("h-4 w-4 min-h-0 p-0.5 mr-1", classNames?.clearButton), 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?.helperWrapper, classNames?.description), children: description })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: react.cn(HELPER_CLASS$2, "text-left", classNames?.helperWrapper, classNames?.errorMessage), children: errorMessage }))] }));
+                classNames?.innerWrapper, 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: setInputRef, onKeyDown: handleKeyDown, required: required, type: type, placeholder: labelFlotante ? " " : placeholder, onChange: handleChange, className: react.cn(
+                        // `w-full min-w-0` (TECH-2459, beweossmbs QA 24-sep): `.input-group__input`
+                        // de v3 es `flex-1` sin ancho, así que el `<input>` aportaba su ancho
+                        // intrínseco (~151px) como min-content y el campo no encogía en una fila
+                        // flex estrecha (hex del color picker de Agenda → Colors: 180px y 35px
+                        // fuera de su fila; en v2, 132px). v2 ponía `w-full` en este slot
+                        // (`@heroui/theme@2.4.15`, `dist/components/input.js:111`), y un ancho
+                        // en porcentaje no cuenta para el min-content de un `<input>`.
+                        "w-full min-w-0 bg-transparent p-0", SIZE_TEXT_CLASS$2[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: react.cn("h-4 w-4 min-h-0 p-0.5 mr-1", classNames?.clearButton), 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?.helperWrapper, classNames?.description), children: description })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: react.cn(HELPER_CLASS$2, "text-left", classNames?.helperWrapper, classNames?.errorMessage), children: errorMessage }))] }));
 });
 Input.displayName = "Input";
 
@@ -2435,18 +2558,36 @@ const SHADOW_CLASS = {
     md: "shadow-[shadow:var(--aurora-shadow-medium)]",
     lg: "shadow-[shadow:var(--aurora-shadow-large)]",
 };
+// Geometría v2 de la raíz (slot `base` de `@heroui/theme@2.4.15`, `dist/components/card.js`):
+// `flex flex-col relative overflow-hidden`, SIN `gap`. v3 (`@heroui/styles/…/card.css:5`) pone
+// `gap-3 overflow-visible`, y eso ROMPE layouts de v2 (medido por beweossmbs con la .141): con
+// tres hijos la card crece 24px (Notificaciones automáticas: 220px frente a 192, y la última card
+// queda cortada por su contenedor), y el texto que no cabe se sale de la card en vez de
+// recortarse (cabecera de recurso de la agenda, vista Semana: 80px frente a 56 y los nombres
+// fuera). Va primero en el `cn`: un `gap-*`/`overflow-*` de la app lo retira por fusión.
+// `overflow-hidden` no quita nada que se viera: la onda ya se recorta en su propia capa
+// (`Card.css`), el anillo de foco es un `ring` (`box-shadow`, no lo recorta el `overflow` de su
+// propio nodo) y la sombra de la card se pinta fuera de su caja. Medido en la story `V2Geometry`: tres
+// hijos de 20px dan 108px (132 con el gap de v3) y el texto que desborda ya no asoma.
+const ROOT_V2_CLASS = "gap-0 overflow-hidden";
 // Literales del `tv` de v2 (`@heroui/theme@2.4.15`, `dist/components/card.js`), con sus tokens
 // traducidos a los que existen en Tailwind 4 + Aurora:
 //   isPressable → `cursor-pointer` + compound `data-[pressed=true]:scale-[0.97]
 //                 tap-highlight-transparent` (el hundido lo hace aquí `:active`, que es lo que
 //                 marcaba `data-pressed` en un botón nativo)
 //   disableAnimation=false → `transition-transform-background motion-reduce:transition-none`
-//   foco → `dataFocusVisibleClasses` (`outline-2 outline-focus outline-offset-2`)
+//   foco → `dataFocusVisibleClasses` (`outline-2 outline-focus outline-offset-2`). Aquí va con el
+//           MISMO anillo que los botones de v3/Aurora (`status-focused` → `focus-ring`:
+//           `ring-2 ring-focus ring-offset-background` + offset 2px), no con `outline`: en
+//           Tailwind 4 `outline-none` fija `--tw-outline-style: none` y `focus-visible:outline-2`
+//           hereda ese estilo, así que el anillo NO se pintaba (regresión de la .141, al pasar de
+//           `<button>` a `<div role="button">`). El `ring` es `box-shadow` fuera de la caja: no lo
+//           recorta el `overflow-hidden` de la raíz y se compone con la sombra de la card.
 //   isHoverable → `data-[hover=true]:bg-content2` (aquí `hover:`, react-aria ya no escribe
 //                 `data-hover` — trampa 3 de la skill `auraui-components`)
 //   isDisabled → `opacity-disabled cursor-not-allowed` (`opacity-disabled` era 0.5 en v2)
 //   fullWidth → `w-full`
-const PRESSABLE_CLASS = "isolate cursor-pointer text-foreground outline-none focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-focus focus-visible:outline-offset-2 [-webkit-tap-highlight-color:transparent]";
+const PRESSABLE_CLASS = "isolate cursor-pointer text-foreground outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background [-webkit-tap-highlight-color:transparent]";
 const PRESS_ANIMATION_CLASS = "transition-[transform,background-color] motion-reduce:transition-none active:scale-[0.97]";
 const HOVERABLE_CLASS = "hover:bg-content2";
 const DISABLED_CLASS = "opacity-50 cursor-not-allowed";
@@ -2562,7 +2703,7 @@ const Card = $8WNJc$react.forwardRef(({ children, className, shadow = "sm", radi
         event.preventDefault();
         press(pressEventFromKey(event));
     }, [onKeyUp, pulsable, press]);
-    const combinedClassName = react.cn(paddingClasses[padding], RADIUS_CLASS$5[radius], SHADOW_CLASS[shadow], fullWidth ? "w-full" : "", isPressable ? PRESSABLE_CLASS : "", isPressable && !disableAnimation ? PRESS_ANIMATION_CLASS : "", isHoverable ? HOVERABLE_CLASS : "", isDisabled ? DISABLED_CLASS : "", 
+    const combinedClassName = react.cn(ROOT_V2_CLASS, paddingClasses[padding], RADIUS_CLASS$5[radius], SHADOW_CLASS[shadow], fullWidth ? "w-full" : "", isPressable ? PRESSABLE_CLASS : "", isPressable && !disableAnimation ? PRESS_ANIMATION_CLASS : "", isHoverable ? HOVERABLE_CLASS : "", isDisabled ? DISABLED_CLASS : "", 
     // El `className` de la app, último: gana por fusión (ver JSDoc).
     className);
     // v2 cambiaba el ELEMENTO a `<button>` con `isPressable`, y hasta la .140 esta fachada lo
@@ -3728,7 +3869,12 @@ const ColorPicker = $8WNJc$react.forwardRef(({ value, onChange, label, required
 							${error
                                     ? "border-danger dark:border-danger-400"
                                     : "border-default-300 dark:border-default-700"}
-						`, "aria-label": t.customColorLabel, title: t.customColorLabel }), jsxRuntime.jsx(Input, { type: "text", value: textValue, onValueChange: handleTextChange, onBlur: handleTextBlur, placeholder: t.placeholder, disabled: disabled, isDisabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", classNames: {
+						`, "aria-label": t.customColorLabel, title: t.customColorLabel }), jsxRuntime.jsx(Input, { type: "text", value: textValue, onValueChange: handleTextChange, onBlur: handleTextBlur, placeholder: t.placeholder, disabled: disabled, isDisabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", 
+                                // `min-w-0` (TECH-2459, beweossmbs QA 24-sep): el campo es un ítem de la fila
+                                // flex de la muestra de color y tiene que poder encoger en huecos estrechos
+                                // (Agenda → Colors: 180px). El `w-full min-w-0` del `<input>` en la fachada
+                                // ya lo arregla; esto es el suelo explícito en la raíz del campo.
+                                className: "min-w-0", classNames: {
                                     input: "uppercase font-mono text-sm",
                                     inputWrapper: "min-h-8 h-8 focus-within:!border-primary-500",
                                 }, startContent: textValue.startsWith("#") ? null : (jsxRuntime.jsx("span", { className: "text-default-400 text-sm", children: "#" })) })] }), (error || isInvalidFormat) && (jsxRuntime.jsx("p", { className: "text-xs text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), showPredefinedColors && predefinedColors.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map((color) => renderColorCircle(color.value, color.name, normalizeHexColor(value) === normalizeHexColor(color.value))) })] })), enableRecentColors && recentColors.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.recentColorsLabel }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: recentColors.map((color) => renderColorCircle(color, color, normalizeHexColor(value) === color)) })] }))] }));
@@ -6744,7 +6890,16 @@ const ITEM_COLLAPSED_CLASS = "w-11 h-11 gap-0 p-0 justify-center";
 // `w-full flex-1`: el slot `title` de v2 era `flex-1 text-small font-normal w-full`, y su slot
 // `wrapper` `w-full` — el título se comía el espacio libre y empujaba el `endContent` al borde.
 // El `[data-slot="label"]` de v3 es `w-fit`, que es la otra mitad de P-14.
-const ITEM_TITLE_CLASS = "w-full flex-1 text-sm font-medium text-default-500 group-data-[selected=true]:text-default-600";
+//
+// `min-w-0 truncate`: v2 le ponía `truncate` al slot `title` siempre que el título fuera texto
+// (`@heroui/theme@2.4.15`, `dist/components/listbox.js`, variante `hasTitleTextChild: { true:
+// { title: "truncate" } }`; en el menú el título es siempre un string). La migración copió el slot
+// base y se dejó la variante. Sin ella, una etiqueta que no cabe no se corta:
+// medido en beweossmbs y en la story `Menu › LongLabelTruncation`, «menu_automations» ocupaba sus
+// 126,8px enteros y empujaba la chip «AI» de x=204,7 a x=222,8, 6px FUERA del ítem. `truncate` solo
+// no basta: un flex item parte de `min-width: auto` (su ancho de contenido) y no encoge por debajo;
+// `min-w-0` es lo que le deja ceder el hueco a la chip, y entonces sí corta con elipsis.
+const ITEM_TITLE_CLASS = "w-full min-w-0 flex-1 truncate text-sm font-medium text-default-500 group-data-[selected=true]:text-default-600";
 // TECH-2459 · G2 · fix de navegación — resolución de un ítem por su clave.
 //
 // `onSelectionChange` del `ListBox` entrega la CLAVE, no el ítem. v2 no necesitaba esto:
@@ -9086,52 +9241,23 @@ const COLOR_VAR = {
     warning: "var(--warning)",
     danger: "var(--danger)",
 };
-/*
- * TECH-2459 · F5 (P6) — El Switch se queda con el ASPECTO DE v3, por decisión del usuario.
- *
- * Historia corta, porque este componente ha cambiado de criterio dos veces y conviene que no
- * vuelva a moverse sin dato:
- *
- *   · F3/G1 aceptó las medidas de v3 como cambio legítimo (P-23).
- *   · F5/R2 las revirtió a las de v2 con un argumento cuantitativo: el tamaño era el 74-77% de
- *     lo que quedaba de diferencia en `schedulerow--alineacion-semana` y el 100% de los 367 px
- *     de `edge-cases-testing` en oscuro.
- *   · Esta ronda las vuelve a v3 porque el usuario, mirando los dos Storybook uno al lado del
- *     otro, pidió expresamente el aspecto de v3 para este componente («al switch hay que
- *     dejarlo como se ve en la v3»). El contrato de la ronda es explícito en que v3 puede verse
- *     distinto y que eso está bien; aquí manda el criterio del usuario, no la cifra.
- *
- * Lo que eso significa, con los literales de los dos lados a la vista:
- *
- *   pista   v2 (`@heroui/theme@2.4.15`, `dist/components/toggle.js`, slot `wrapper`)
- *             sm 40×24 · md 48×28 · lg 56×32, `rounded-full`, `bg-default-200`
- *           v3 (`@heroui/styles/dist/components/switch.css`)
- *             sm 32×16 · md 40×20 · lg 48×24, `rounded-lg`/`rounded-xl`, `--default`
- *   thumb   v2  círculo `bg-white` con `shadow-small`; sm 16 · md 20 · lg 24
- *           v3  rectángulo redondeado; sm 16,5×12 · md 22×16 · lg 27,5×20
- *
- * Ya no se pisa NADA de eso: la pista, el thumb, su radio, su color y su desplazamiento salen de
- * v3. Por eso desaparecieron `TRACK_CLASS`, `THUMB_CLASS`, el `bg-white`/`shadow-small` del thumb
- * y el `--switch-control-bg` que forzaba el gris apagado de v2 — y con ellos la clase `group`,
- * que solo existía para que el thumb pudiera leer el `data-selected` de esta raíz.
- *
- * Lo que SÍ se conserva, y no es aspecto:
- *
- *   · `--switch-control-bg-checked` (ver `COLOR_VAR`): sostiene la prop `color` de la API v2, que
- *     v3 eliminó. Sin ella `color="success"` y compañía dejarían de pintar. El valor de
- *     `primary` coincide con el de v3 (`--accent` = `--color-primary`), así que el aspecto por
- *     defecto es el de v3 igualmente.
- *   · `inline-flex flex-row items-center` en la raíz: es COLOCACIÓN, no aspecto del control. v3
- *     usa `flex flex-col items-start` para poder apilar `description`/`field-error`, slots que
- *     esta fachada no renderiza; al ser **inline**, la caja participa de la línea de texto, y eso
- *     es lo que la sitúa donde la esperan los consumidores (medido: 1px de diferencia en un
- *     contenedor de bloque, y `schedule-row` se apoya en ello). Dentro de un contenedor flex da
- *     igual: un ítem flex se blockifica.
- *
- * Consecuencia asumida: la referencia v2 de las stories con Switch deja de coincidir. Declarado
- * como CAMBIO-V3 en `vrt/classification-overrides.json`, con las cifras en
- * `.bewe/epics/TECH-2459/findings/p6-switch-aspecto-v3.md`.
- */
+// Literales COMPLETOS (sin interpolar): Tailwind de las apps los descubre escaneando `dist`.
+const SIZE_CLASSES = {
+    sm: {
+        control: "h-6 w-10 rounded-full",
+        thumb: "h-4 w-5 ms-1 rounded-full group-data-[selected=true]/switch:ms-[calc(100%-1.5rem)]",
+    },
+    md: {
+        control: "h-7 w-12 rounded-full",
+        thumb: "h-5 w-6 ms-1 rounded-full group-data-[selected=true]/switch:ms-[calc(100%-1.75rem)]",
+    },
+    lg: {
+        control: "h-8 w-14 rounded-full",
+        thumb: "h-6 w-7 ms-1 rounded-full group-data-[selected=true]/switch:ms-[calc(100%-2rem)]",
+    },
+};
+// Thumb ENCENDIDO blanco en cualquier pack y con cualquier `color` (defecto 1 del bloque de arriba).
+const THUMB_ON_CLASS = "group-data-[selected=true]/switch:bg-white";
 // Los subcomponentes compound de v3, adjuntos como estáticos para que la API v3 siga funcionando a
 // través de la fachada (`<Switch><Switch.Content><Switch.Control><Switch.Thumb/>…`). `Root` se deja
 // FUERA a propósito (mismo criterio que `Alert` y `Checkbox`): la raíz de v3 es justo la pieza que
@@ -9158,12 +9284,32 @@ function hasCompoundChildren$2(children) {
  *
  * Dos modos, decididos por los `children`:
  * - **API v2** (`children` como label, `isSelected`/`defaultSelected`, `onValueChange`, `color`,
- *   `size`): la fachada compone `Switch.Content`/`Switch.Control`/`Switch.Thumb` por dentro y
- *   repone `color` pisando `--switch-control-bg-checked`.
+ *   `size`, `classNames`): la fachada compone `Switch.Content`/`Switch.Control`/`Switch.Thumb` por
+ *   dentro, repone `color` pisando `--switch-control-bg-checked`, aplica su escala de tamaños y el
+ *   thumb encendido blanco (ver el bloque de la cabecera).
  * - **API compound v3** (`<Switch><Switch.Content>…`): pasa los children tal cual a la raíz de
- *   HeroUI, sin geometría ni colocación propias.
- */
-const SwitchFacade = ({ id, size = "md", color, children, onChange, onValueChange, className, style, ...props }) => {
+ *   HeroUI, sin geometría ni colocación propias: ahí manda el JSX del consumidor.
+ *
+ * `classNames` (slots de v2 → nodo de v3; las clases de la app van al FINAL y ganan por `cn`):
+ *
+ *   base    → `Switch.Content`, la `<label>` que contiene la pista y la etiqueta: es el MISMO papel
+ *             que tenía `base` en v2 (una `<label>` con esos dos hijos directos, que la app
+ *             coloca con `flex-row-reverse justify-between`, y toda ella clicable). Pero la raíz
+ *             de v3 (`SwitchField`) la envuelve con una caja `inline-flex`, y un `w-full` de la
+ *             app se resolvería contra esa caja encogida. Así que con `base` la raíz pasa a
+ *             `display: contents` (se aparta de la maqueta) y `className` viaja con `base` a la
+ *             `<label>`, como en v2 (`cn(classNames.base, className)`). Lo único de la raíz que
+ *             `contents` pierde es la opacidad de `status-disabled` (el cursor y el
+ *             `pointer-events` se heredan; los tokens de color, también): se repone en la
+ *             `<label>` con su `data-disabled`. Medido en el navegador con el JSX de smbs: la
+ *             fila entera (390×52) conmuta, no solo el texto y la pista. Sin `base` no cambia
+ *             nada.
+ *   wrapper → la pista (`Switch.Control`).
+ *   thumb   → el thumb (`Switch.Thumb`).
+ *   label   → un `<span data-slot="label">` que envuelve los `children`; solo existe si se pasa
+ *             `classNames.label` (sin él los children siguen PELADOS, como hasta ahora).
+ */
+const SwitchFacade = ({ id, size = "md", color, children, onChange, onValueChange, className, classNames, style, ...props }) => {
     const generatedId = $8WNJc$react.useId();
     const autoId = id || generatedId;
     const handleChange = (isSelected) => {
@@ -9183,6 +9329,10 @@ const SwitchFacade = ({ id, size = "md", color, children, onChange, onValueChang
             // a `status` también en compound). Sin `color`, el encendido es el `--accent` de v3.
             style: color === undefined ? style : colorStyle, onChange: handleChange, children: children }));
     }
+    const sizeClasses = SIZE_CLASSES[size] ?? SIZE_CLASSES.md;
+    // Con `classNames.base`, la `<label>` (`Switch.Content`) hace de `base` de v2 y la raíz se
+    // aparta de la maqueta (ver `classNames` en el JSDoc de arriba).
+    const hasBase = Boolean(classNames?.base);
     return (jsxRuntime.jsx(react.Switch, { ...props, id: autoId, size: size, 
         // COLOCACIÓN, no aspecto (ver el bloque de arriba): v3 usa `flex flex-col items-start`
         // para poder apilar `description`/`field-error`, slots que esta fachada no renderiza.
@@ -9190,10 +9340,12 @@ const SwitchFacade = ({ id, size = "md", color, children, onChange, onValueChang
         // (Storybook centra con `#storybook-root` en `display: block`): con `flex` el widget cae
         // en y=346 y con `inline-flex` en y=345, donde lo esperan los consumidores. Dentro de un
         // contenedor flex (el uso real, p. ej. `schedule-row`) da igual: un ítem flex se
-        // blockifica.
-        className: ["inline-flex flex-row items-center", className]
-            .filter(Boolean)
-            .join(" "), style: colorStyle, onChange: handleChange, children: jsxRuntime.jsxs(react.Switch.Content, { children: [jsxRuntime.jsx(react.Switch.Control, { children: jsxRuntime.jsx(react.Switch.Thumb, {}) }), children] }) }));
+        // blockifica. `group/switch`: de aquí lee el thumb el `data-selected`.
+        className: hasBase
+            ? "group/switch contents"
+            : react.cn("group/switch inline-flex flex-row items-center", className), style: colorStyle, onChange: handleChange, children: jsxRuntime.jsxs(react.Switch.Content, { className: hasBase
+                ? react.cn("data-[disabled=true]:opacity-(--disabled-opacity)", classNames?.base, className)
+                : undefined, children: [jsxRuntime.jsx(react.Switch.Control, { className: react.cn(sizeClasses.control, classNames?.wrapper), children: jsxRuntime.jsx(react.Switch.Thumb, { className: react.cn(sizeClasses.thumb, THUMB_ON_CLASS, classNames?.thumb) }) }), classNames?.label && children != null ? (jsxRuntime.jsx("span", { "data-slot": "label", className: classNames.label, children: children })) : (children)] }) }));
 };
 SwitchFacade.displayName = "Aurora.Switch";
 /**
@@ -10919,6 +11071,46 @@ function transformBody(body) {
     return $8WNJc$react.cloneElement(body, undefined, ...spread(mapNodes(children, withSelectionCell)));
 }
 
+/**
+ * TECH-2459 (beweossmbs, 24-sep: «Sessions history» de finanzas) — la celda del ESTADO VACÍO.
+ *
+ * En v3 `renderEmptyState` es un render prop de react-aria que pinta lo que devuelva dentro de
+ * `<tbody data-empty="true"><tr role="row"><td role="rowheader" colspan>`
+ * (`react-aria-components/dist/private/Table.mjs:886-915`), y ese `<td>` NO lleva `.table__cell`:
+ * se queda sin el `bg-surface`, el padding ni el color de las celdas. Medido en la story
+ * `EmptyState` con la cadena pelada que devuelven 12 de las 13 tablas de beweossmbs: 20 px de
+ * alto, `padding: 0`, `text-align: start` (el texto pegado arriba a la izquierda) y fondo
+ * transparente, o sea el gris de la raíz `table-root--primary` asomando.
+ *
+ * No es una regresión de la librería: ni la fachada ni `Table.Content` pintaron nunca ese estado
+ * (`git log -S renderEmptyState|data-empty|emptyContent -- src/components/table` → 0 commits); lo
+ * que se había arreglado era backoffice, en su propia app (TECH-2298, `49f2b35`: cada
+ * `renderEmptyState` devuelve `<div className="flex h-40 items-center justify-center
+ * text-default-500">`). Aquí se resuelve para todas las apps, en la única pieza por la que pasan
+ * todas las tablas.
+ *
+ * Qué se le da a la celda, con tokens de v3 (no se busca la métrica de v2):
+ * - `h-40`: aire. En una celda de tabla `height` actúa de alto MÍNIMO, así que un nodo propio más
+ *   alto sigue mandando, y uno de `h-40` como el de backoffice mide lo mismo (no se suma: por
+ *   eso es alto y no padding vertical).
+ * - `px-4 text-center align-middle`: centrado en los dos ejes; `px-4` es el lateral de `.table__cell`.
+ * - `text-sm text-default-500`: el cuerpo de las celdas de v3 (`text-sm`) en el gris atenuado que
+ *   ya usan las apps para este texto (backoffice), legible sobre el blanco (contraste AA).
+ * - `bg-surface`: el fondo del cuerpo (`.table__cell` de `table.css`), no el gris de la raíz. Las
+ *   esquinas redondeadas ya las pone `table.css` (primera/última celda de la primera/última fila).
+ *
+ * Selector por `data-empty`, que react-aria solo escribe con el cuerpo vacío. Cadenas literales
+ * completas: Tailwind solo emite lo que encuentra escrito entero.
+ */
+const EMPTY_STATE_CLASS = [
+    "[&>tbody[data-empty]>tr>td]:h-40",
+    "[&>tbody[data-empty]>tr>td]:px-4",
+    "[&>tbody[data-empty]>tr>td]:text-center",
+    "[&>tbody[data-empty]>tr>td]:align-middle",
+    "[&>tbody[data-empty]>tr>td]:text-sm",
+    "[&>tbody[data-empty]>tr>td]:text-default-500",
+    "[&>tbody[data-empty]>tr>td]:bg-surface",
+].join(" ");
 /** Default de v2 (`use-table`, `@heroui/table@2.2.32`), sin reinterpretar. */
 function defaultShowCheckboxes(props) {
     const behavior = props.selectionBehavior ?? "toggle";
@@ -10961,7 +11153,8 @@ function TableContent({ children, isHeaderSticky, showSelectionCheckboxes, ...pr
         return child;
     });
     // Esparcido y no `{content}`: ver `spread` (un array como hijo único exigiría claves).
-    return $8WNJc$react.createElement(react.Table.Content, props, ...spread(content));
+    // La clase del estado vacío va delante: la de la app, detrás, gana si pisa el mismo grupo.
+    return $8WNJc$react.createElement(react.Table.Content, { ...props, className: react.cn(EMPTY_STATE_CLASS, props.className) }, ...spread(content));
 }
 TableContent.displayName = "Aurora.Table.Content";
 
@@ -10992,6 +11185,24 @@ function isPart$2(node, parts) {
 function withSticky(isHeaderSticky, root) {
     return isHeaderSticky === undefined ? (root) : (jsxRuntime.jsx(TableStickyContext.Provider, { value: isHeaderSticky, children: root }));
 }
+/**
+ * TECH-2459 (beweossmbs, 24-sep) — barra de scroll NATIVA en el contenedor que inserta la fachada.
+ *
+ * `table.css:20` le aplica a `.table__scroll-container` la utilidad `scrollbar` de v3, que con los
+ * tokens de `@heroui/styles` resuelve a `scrollbar-width: thin` y un pulgar al 15 % de opacidad
+ * sobre carril transparente (medido en la story `Overflow`:
+ * `oklch(0.2103 0.0059 285.89 / 0.15) rgba(0,0,0,0)`). Con barras clásicas (Windows, o macOS con
+ * «mostrar barras: siempre») casi no se ve, y el usuario concluye que la tabla no tiene scroll
+ * horizontal aunque lo tenga: es affordance, no estética. `scrollbar-default` (utilidad de la
+ * propia v3, `utilities/index.css:71`) devuelve la barra del sistema; al ser capa `utilities`
+ * gana a la regla de `components` sin `!important`.
+ *
+ * Solo en el contenedor que monta la fachada. Si la app monta su propio `Table.ScrollContainer`
+ * (o un `ResizableContainer`), la fachada no toca nada y manda lo que la app escriba; y una clase
+ * de la app sobre el root dirigida al contenedor (`[&_.table__scroll-container]:scrollbar-thin`)
+ * gana por especificidad.
+ */
+const SCROLL_CONTAINER_CLASS = "scrollbar-default";
 const TableFacade = ({ children, isHeaderSticky, ...props }) => {
     const nodes = $8WNJc$react.Children.toArray(children);
     // Sin hijos, o con un contenedor de scroll ya montado a mano: el root tal cual.
@@ -11000,7 +11211,7 @@ const TableFacade = ({ children, isHeaderSticky, ...props }) => {
     }
     const scrollable = nodes.filter((node) => !isPart$2(node, OUTSIDE_SCROLL));
     const outsideScroll = nodes.filter((node) => isPart$2(node, OUTSIDE_SCROLL));
-    return withSticky(isHeaderSticky, jsxRuntime.jsxs(react.Table, { ...props, children: [jsxRuntime.jsx(react.Table.ScrollContainer, { children: scrollable }), outsideScroll] }));
+    return withSticky(isHeaderSticky, jsxRuntime.jsxs(react.Table, { ...props, children: [jsxRuntime.jsx(react.Table.ScrollContainer, { className: SCROLL_CONTAINER_CLASS, children: scrollable }), outsideScroll] }));
 };
 TableFacade.displayName = "Aurora.Table";
 /**
@@ -13431,7 +13642,7 @@ function readConfirmedMonthDay(container, monthSelector = '[data-type="month"]',
         return { month, day };
     return null;
 }
-const DayMonthPicker = ({ value, onChange, translations, }) => {
+const DayMonthPicker = ({ value, onChange, translations, ariaLabelledBy, }) => {
     const t = {
         dayMonthAriaLabel: "Seleccionar mes y día",
         dayMonthRangeAriaLabel: "Seleccionar rango de mes y día",
@@ -13507,7 +13718,7 @@ const DayMonthPicker = ({ value, onChange, translations, }) => {
             });
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react.RadioGroup, { orientation: "horizontal", value: mode, onChange: handleModeChange, children: [jsxRuntime.jsx(react.Radio, { value: "single", children: jsxRuntime.jsxs(react.Radio.Content, { children: [jsxRuntime.jsx(react.Radio.Control, { children: jsxRuntime.jsx(react.Radio.Indicator, {}) }), t.dayMonthSingleOption] }) }), jsxRuntime.jsx(react.Radio, { value: "range", children: jsxRuntime.jsxs(react.Radio.Content, { children: [jsxRuntime.jsx(react.Radio.Control, { children: jsxRuntime.jsx(react.Radio.Indicator, {}) }), t.dayMonthRangeOption] }) })] }), mode === "single" ? (jsxRuntime.jsx("div", { ref: singleRef, children: jsxRuntime.jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, onFocusChange: handleSingleFocusChange, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: `w-full md:w-auto md:max-w-40 ${NO_YEAR_CLASS}` }, "dmp") })) : (jsxRuntime.jsx("div", { ref: rangeRef, children: jsxRuntime.jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, onFocusChange: handleRangeFocusChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: `w-full md:w-auto md:max-w-xs ${NO_YEAR_CLASS}` }, "dmpr") }))] }));
+    return (jsxRuntime.jsxs("div", { className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react.RadioGroup, { orientation: "horizontal", value: mode, onChange: handleModeChange, "aria-labelledby": ariaLabelledBy, children: [jsxRuntime.jsx(react.Radio, { value: "single", children: jsxRuntime.jsxs(react.Radio.Content, { children: [jsxRuntime.jsx(react.Radio.Control, { children: jsxRuntime.jsx(react.Radio.Indicator, {}) }), t.dayMonthSingleOption] }) }), jsxRuntime.jsx(react.Radio, { value: "range", children: jsxRuntime.jsxs(react.Radio.Content, { children: [jsxRuntime.jsx(react.Radio.Control, { children: jsxRuntime.jsx(react.Radio.Indicator, {}) }), t.dayMonthRangeOption] }) })] }), mode === "single" ? (jsxRuntime.jsx("div", { ref: singleRef, children: jsxRuntime.jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, onFocusChange: handleSingleFocusChange, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: `w-full md:w-auto md:max-w-40 ${NO_YEAR_CLASS}` }, "dmp") })) : (jsxRuntime.jsx("div", { ref: rangeRef, children: jsxRuntime.jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, onFocusChange: handleRangeFocusChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: `w-full md:w-auto md:max-w-xs ${NO_YEAR_CLASS}` }, "dmpr") }))] }));
 };
 
 /**
@@ -13643,7 +13854,8 @@ const RangeFilter = ({ title, description, value, onChange, minValue, maxValue,
                         const [min, max] = newValue;
                         setCurrentValue([min, max]);
                         onChange([min, max]);
-                    }, className: "w-full", isDisabled: false, ...restSliderProps, children: jsxRuntime.jsxs(react.Slider.Track, { children: [jsxRuntime.jsx(react.Slider.Fill, { className: fillClassName }), stepMarks.length > 0 ? (jsxRuntime.jsx(react.Slider.Marks, { children: stepMarks.map((left) => (jsxRuntime.jsx("span", { className: SLIDER_STEP_CLASS, style: { left: `${left}%` } }, left))) })) : null, jsxRuntime.jsx(react.Slider.Thumb, { index: 0, "aria-label": t.minLabel, className: thumbClassName }), jsxRuntime.jsx(react.Slider.Thumb, { index: 1, "aria-label": t.maxLabel, className: thumbClassName })] }) }) }), jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-sm", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-start", children: [jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: t.minLabel }), jsxRuntime.jsx("span", { className: "font-medium text-default-700", children: formatValue(currentValue[0]) })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: t.maxLabel }), jsxRuntime.jsx("span", { className: "font-medium text-default-700", children: formatValue(currentValue[1]) })] })] })] }));
+                    }, className: "w-full", isDisabled: false, "aria-label": restSliderProps["aria-label"] ??
+                        (restSliderProps["aria-labelledby"] ? undefined : t.title), ...restSliderProps, children: jsxRuntime.jsxs(react.Slider.Track, { children: [jsxRuntime.jsx(react.Slider.Fill, { className: fillClassName }), stepMarks.length > 0 ? (jsxRuntime.jsx(react.Slider.Marks, { children: stepMarks.map((left) => (jsxRuntime.jsx("span", { className: SLIDER_STEP_CLASS, style: { left: `${left}%` } }, left))) })) : null, jsxRuntime.jsx(react.Slider.Thumb, { index: 0, "aria-label": t.minLabel, className: thumbClassName }), jsxRuntime.jsx(react.Slider.Thumb, { index: 1, "aria-label": t.maxLabel, className: thumbClassName })] }) }) }), jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-sm", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-start", children: [jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: t.minLabel }), jsxRuntime.jsx("span", { className: "font-medium text-default-700", children: formatValue(currentValue[0]) })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: t.maxLabel }), jsxRuntime.jsx("span", { className: "font-medium text-default-700", children: formatValue(currentValue[1]) })] })] })] }));
 };
 
 /**
@@ -13682,6 +13894,13 @@ const resolveSelectPlaceholder = (translations, title) => (translations?.selectP
 // =========================================================================
 const FilterSection = ({ filter, translations, value, onChange, isExpanded = false, onToggleExpanded, }) => {
     const isDisabled = filter.disabled === true;
+    // TECH-2459 · El título visible de la sección es el NOMBRE ACCESIBLE de su control. Sin él,
+    // react-aria (`useLabel`, vía `useSelect`/`useSlider`/`useListBox`) avisaba en dev «If you do
+    // not provide a visible label, you must specify an aria-label or aria-labelledby» cada vez que
+    // se desplegaba una sección (medido por beweossmbs en el drawer del catálogo con la .141), y el
+    // lector de pantalla anunciaba solo el placeholder («Seleccionar categoría»). El control se
+    // asocia por `aria-labelledby` a este id: sin cambio visual.
+    const titleId = $8WNJc$react.useId();
     const [internalExpanded, setInternalExpanded] = $8WNJc$react.useState(isDisabled ? false : isExpanded);
     const handleToggleExpanded = () => {
         if (isDisabled)
@@ -13778,17 +13997,17 @@ const FilterSection = ({ filter, translations, value, onChange, isExpanded = fal
     const renderFilterContent = () => {
         switch (filter.type) {
             case "select":
-                return (jsxRuntime.jsx(SelectFilter, { filter: filter, value: value, onChange: onChange, translations: translations }));
+                return (jsxRuntime.jsx(SelectFilter, { filter: filter, value: value, onChange: onChange, translations: translations, titleId: titleId }));
             case "multiselect":
-                return (jsxRuntime.jsx(MultiSelectFilter, { filter: filter, value: value, onChange: onChange, translations: translations }));
+                return (jsxRuntime.jsx(MultiSelectFilter, { filter: filter, value: value, onChange: onChange, translations: translations, titleId: titleId }));
             case "range":
-                return (jsxRuntime.jsx(RangeFilterComponent, { filter: filter, value: value, onChange: onChange }));
+                return (jsxRuntime.jsx(RangeFilterComponent, { filter: filter, value: value, onChange: onChange, titleId: titleId }));
             case "date":
-                return (jsxRuntime.jsx(DateFilter, { filter: filter, value: value, onChange: onChange, translations: translations }));
+                return (jsxRuntime.jsx(DateFilter, { filter: filter, value: value, onChange: onChange, translations: translations, titleId: titleId }));
             case "text":
-                return (jsxRuntime.jsx(TextFilter, { filter: filter, value: value, onChange: onChange }));
+                return (jsxRuntime.jsx(TextFilter, { filter: filter, value: value, onChange: onChange, titleId: titleId }));
             case "number":
-                return (jsxRuntime.jsx(NumberFilter, { filter: filter, value: value, onChange: onChange }));
+                return (jsxRuntime.jsx(NumberFilter, { filter: filter, value: value, onChange: onChange, titleId: titleId }));
             default:
                 return null;
         }
@@ -13798,7 +14017,7 @@ const FilterSection = ({ filter, translations, value, onChange, isExpanded = fal
             boxShadow: "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
             "--tw-shadow": "var(--aurora-shadow-medium)",
             "--tw-shadow-colored": "var(--aurora-shadow-medium)",
-        }, children: [jsxRuntime.jsxs("button", { type: "button", className: react.cn("flex items-center justify-between w-full text-left p-4", isDisabled && "cursor-not-allowed"), onClick: handleToggleExpanded, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(H2, { className: "text-base font-normal text-foreground", children: filter.title }), !isDisabled && hasActiveFilter() && (jsxRuntime.jsx("span", { className: "text-xs px-2 py-1 rounded-full text-black dark:text-white", style: {
+        }, children: [jsxRuntime.jsxs("button", { type: "button", className: react.cn("flex items-center justify-between w-full text-left p-4", isDisabled && "cursor-not-allowed"), onClick: handleToggleExpanded, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(H2, { id: titleId, className: "text-base font-normal text-foreground", children: filter.title }), !isDisabled && hasActiveFilter() && (jsxRuntime.jsx("span", { className: "text-xs px-2 py-1 rounded-full text-black dark:text-white", style: {
                                     backgroundColor: "var(--color-default)",
                                 }, children: getActiveFilterCount() }))] }), jsxRuntime.jsx(IconComponent, { icon: internalExpanded
                             ? "solar:alt-arrow-down-outline"
@@ -13807,10 +14026,10 @@ const FilterSection = ({ filter, translations, value, onChange, isExpanded = fal
 // =========================================================================
 // SELECT FILTER
 // =========================================================================
-const SelectFilter = ({ filter, value, onChange, translations }) => {
+const SelectFilter = ({ filter, value, onChange, translations, titleId }) => {
     const currentValue = value?.value || "";
     const triggerPlaceholder = resolveSelectPlaceholder(translations, filter.title);
-    return (jsxRuntime.jsx(Select, { placeholder: triggerPlaceholder, selectedKeys: new Set(currentValue ? [currentValue] : []), onSelectionChange: (keys) => {
+    return (jsxRuntime.jsx(Select, { "aria-labelledby": titleId, placeholder: triggerPlaceholder, selectedKeys: new Set(currentValue ? [currentValue] : []), onSelectionChange: (keys) => {
             const selectedKey = Array.from(keys)[0];
             onChange({ value: selectedKey || "" });
         }, className: "w-full", children: filter.data.map((item) => (
@@ -13824,7 +14043,8 @@ const SelectFilter = ({ filter, value, onChange, translations }) => {
 // =========================================================================
 // MULTISELECT FILTER
 // =========================================================================
-const MultiSelectFilter = ({ filter, value, onChange, translations }) => {
+const MultiSelectFilter = ({ filter, value, onChange, translations, titleId }) => {
+    const valueId = $8WNJc$react.useId();
     const triggerRef = $8WNJc$react.useRef(null);
     const [triggerWidthPx, setTriggerWidthPx] = $8WNJc$react.useState(null);
     const [isOpen, setIsOpen] = $8WNJc$react.useState(false);
@@ -13918,11 +14138,11 @@ const MultiSelectFilter = ({ filter, value, onChange, translations }) => {
             maxWidth: Math.max(triggerWidthPx, 220),
         }
         : undefined;
-    return (jsxRuntime.jsxs(react.Popover, { isOpen: isOpen, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(react.PopoverTrigger, { children: jsxRuntime.jsxs("button", { ref: triggerRef, type: "button", className: react.cn(
+    return (jsxRuntime.jsxs(react.Popover, { isOpen: isOpen, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(react.PopoverTrigger, { "aria-labelledby": titleId, "aria-describedby": valueId, children: jsxRuntime.jsxs("button", { ref: triggerRef, type: "button", "aria-labelledby": titleId, "aria-describedby": valueId, className: react.cn(
                     // TECH-2459 · `bg-transparent` y no `bg-background`: este disparador tiene pinta de campo y vive
                     // DENTRO de un drawer, o sea el escenario del relleno negro sobre tarjeta gris. En oscuro
                     // `--color-background` es negro puro, y el `bordered` de v2 no llevaba ninguna clase `bg-*`.
-                    "flex w-full min-h-12 items-center justify-between gap-2 rounded-[12px] border border-default-200 bg-transparent px-3 py-2.5 text-left text-sm transition-colors", "hover:border-default-300 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background", isOpen && "border-primary"), "aria-expanded": isOpen, "aria-haspopup": "dialog", children: [jsxRuntime.jsx("span", { className: "line-clamp-2 min-w-0 flex-1 text-sm font-medium leading-snug text-foreground", title: triggerSelectionTitle, children: triggerSelection.visible.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [triggerSelection.visible.map((item, index) => (jsxRuntime.jsxs($8WNJc$react.Fragment, { children: [index > 0 ? (jsxRuntime.jsx("span", { className: "font-normal text-default-400", children: ", " })) : null, jsxRuntime.jsx("span", { children: item.label })] }, item.value))), triggerSelection.overflow > 0 ? (jsxRuntime.jsxs("span", { className: "font-normal text-default-500", children: [" ", moreLabelTemplate.replace("{more}", String(triggerSelection.overflow))] })) : null] })) : (jsxRuntime.jsx("span", { className: "font-normal text-default-400", children: triggerPlaceholder })) }), jsxRuntime.jsx(IconComponent, { icon: isOpen
+                    "flex w-full min-h-12 items-center justify-between gap-2 rounded-[12px] border border-default-200 bg-transparent px-3 py-2.5 text-left text-sm transition-colors", "hover:border-default-300 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background", isOpen && "border-primary"), "aria-expanded": isOpen, "aria-haspopup": "dialog", children: [jsxRuntime.jsx("span", { id: valueId, className: "line-clamp-2 min-w-0 flex-1 text-sm font-medium leading-snug text-foreground", title: triggerSelectionTitle, children: triggerSelection.visible.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [triggerSelection.visible.map((item, index) => (jsxRuntime.jsxs($8WNJc$react.Fragment, { children: [index > 0 ? (jsxRuntime.jsx("span", { className: "font-normal text-default-400", children: ", " })) : null, jsxRuntime.jsx("span", { children: item.label })] }, item.value))), triggerSelection.overflow > 0 ? (jsxRuntime.jsxs("span", { className: "font-normal text-default-500", children: [" ", moreLabelTemplate.replace("{more}", String(triggerSelection.overflow))] })) : null] })) : (jsxRuntime.jsx("span", { className: "font-normal text-default-400", children: triggerPlaceholder })) }), jsxRuntime.jsx(IconComponent, { icon: isOpen
                                 ? "solar:alt-arrow-up-outline"
                                 : "solar:alt-arrow-down-outline", className: "shrink-0 text-default-400", size: "sm", "aria-hidden": true })] }) }), jsxRuntime.jsx(react.PopoverContent, { placement: "bottom start", offset: 6, className: "w-full min-w-0 max-w-none box-border border border-default-200 bg-content1 p-0 shadow-medium", style: popoverWidthStyle, children: jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-0 p-2", children: [searchable && (jsxRuntime.jsx("div", { className: "border-b border-default-100 px-1 pb-2", children: jsxRuntime.jsx(Input, { type: "search", placeholder: searchPlaceholder, value: searchQuery, onValueChange: setSearchQuery, className: "w-full", size: "sm", variant: "flat", radius: "full", 
                                 // `InputClassNames` de G1-forms ya no tiene slot `base` (v3 no
@@ -13936,7 +14156,7 @@ const MultiSelectFilter = ({ filter, value, onChange, translations }) => {
 // =========================================================================
 // RANGE FILTER
 // =========================================================================
-const RangeFilterComponent = ({ filter, value, onChange }) => {
+const RangeFilterComponent = ({ filter, value, onChange, titleId }) => {
     const currentValue = value || { min: filter.data.min, max: filter.data.max };
     const rangeValue = [currentValue.min, currentValue.max];
     const handleChange = (newValue) => {
@@ -13951,12 +14171,12 @@ const RangeFilterComponent = ({ filter, value, onChange }) => {
     const data = Array.from({
         length: Math.ceil((filter.data.max - filter.data.min) / (filter.data.step || 1)) + 1,
     }, (_, i) => filter.data.min + i * (filter.data.step || 1));
-    return (jsxRuntime.jsx(RangeFilter, { title: `Rango de ${filter.title.toLowerCase()}`, minValue: filter.data.min, maxValue: filter.data.max, step: filter.data.step || 1, data: data, value: rangeValue, onChange: handleChange, formatValue: formatter, className: "w-full", showHistogramCount: filter.data.showHistogramCount }));
+    return (jsxRuntime.jsx(RangeFilter, { title: `Rango de ${filter.title.toLowerCase()}`, minValue: filter.data.min, maxValue: filter.data.max, step: filter.data.step || 1, data: data, value: rangeValue, onChange: handleChange, formatValue: formatter, className: "w-full", showHistogramCount: filter.data.showHistogramCount, sliderProps: { "aria-labelledby": titleId } }));
 };
 // =========================================================================
 // DATE FILTER
 // =========================================================================
-const DateFilter = ({ filter, value, onChange, translations }) => {
+const DateFilter = ({ filter, value, onChange, translations, titleId }) => {
     if (filter.granularity === "dayMonth") {
         const rawDayMonth = value?.type === "dayMonth" && value.dayMonth && typeof value.dayMonth !== "string"
             ? value.dayMonth
@@ -13975,7 +14195,7 @@ const DateFilter = ({ filter, value, onChange, translations }) => {
                 dayMonthRange: value.type === "dayMonthRange" ? rawDayMonthRange : null,
             }
             : null;
-        return (jsxRuntime.jsx(DayMonthPicker, { value: dayMonthValue, onChange: (v) => onChange({ date: null, dateRange: null, ...v }), translations: translations }));
+        return (jsxRuntime.jsx(DayMonthPicker, { value: dayMonthValue, onChange: (v) => onChange({ date: null, dateRange: null, ...v }), translations: translations, ariaLabelledBy: titleId }));
     }
     const handleDateSelectorChange = (dateSelectorValue) => {
         onChange({
@@ -14047,23 +14267,25 @@ const DateFilter = ({ filter, value, onChange, translations }) => {
         dateSelectorTranslations.selectDateRangeAriaLabel =
             translations.selectDateRangeAriaLabel;
     }
-    return (jsxRuntime.jsx(DateSelector, { initialType: getInitialType(), initialDate: getInitialDate(), initialDateRange: getInitialDateRange(), onChange: handleDateSelectorChange, translations: dateSelectorTranslations, className: "w-full" }));
+    return (jsxRuntime.jsx(DateSelector, { initialType: getInitialType(), initialDate: getInitialDate(), initialDateRange: getInitialDateRange(), onChange: handleDateSelectorChange, translations: dateSelectorTranslations, 
+        // El grupo «Día / Rango» se nombra con el título de la sección (ver `titleId`).
+        radioGroupProps: { "aria-labelledby": titleId }, className: "w-full" }));
 };
 // =========================================================================
 // TEXT FILTER
 // =========================================================================
-const TextFilter = ({ filter, value, onChange }) => {
+const TextFilter = ({ filter, value, onChange, titleId }) => {
     const currentValue = value?.value || "";
-    return (jsxRuntime.jsx(Input, { type: "text", placeholder: filter.data.placeholder || `Ingrese ${filter.title.toLowerCase()}`, value: currentValue, onValueChange: (newValue) => {
+    return (jsxRuntime.jsx(Input, { "aria-labelledby": titleId, type: "text", placeholder: filter.data.placeholder || `Ingrese ${filter.title.toLowerCase()}`, value: currentValue, onValueChange: (newValue) => {
             onChange({ value: newValue });
         }, className: "w-full" }));
 };
 // =========================================================================
 // NUMBER FILTER
 // =========================================================================
-const NumberFilter = ({ filter, value, onChange }) => {
+const NumberFilter = ({ filter, value, onChange, titleId }) => {
     const currentValue = value?.value?.toString() || "";
-    return (jsxRuntime.jsx(Input, { type: "number", placeholder: filter.data.placeholder || `Ingrese ${filter.title.toLowerCase()}`, value: currentValue, onValueChange: (newValue) => {
+    return (jsxRuntime.jsx(Input, { "aria-labelledby": titleId, type: "number", placeholder: filter.data.placeholder || `Ingrese ${filter.title.toLowerCase()}`, value: currentValue, onValueChange: (newValue) => {
             const numValue = newValue === "" ? null : Number(newValue);
             onChange({ value: numValue });
         }, min: filter.data.min, max: filter.data.max, step: filter.data.step, className: "w-full" }));
@@ -16350,13 +16572,19 @@ ModalBody.displayName = "ModalBody";
  * v3 conserva `flex-row justify-end gap-2` pero pierde el padding, y añade un
  * `.modal__body + .modal__footer { mt-5 }` que v2 no tenía (v2 separaba los slots solo
  * con su propio padding) — de ahí el `mt-0`.
+ *
+ * `items-stretch`: v2 no declaraba `items-*` (`align-items: normal`, que en flex estira), y v3
+ * pone `items-center`. En un footer en columna (`className="flex flex-col"`, «Register payment»
+ * de beweossmbs) eso encogía cada fila a su contenido: medido con la .141, Total 83px frente a
+ * 464 y botones `flex-1` 108px frente a 226. En la fila por defecto no cambia nada visible
+ * (los `Button` tienen alto propio). Un `items-*` de la app lo retira por fusión.
  */
 const ModalFooter = ({ className, ...props }) => {
     const { classNames } = $8WNJc$react.useContext(ModalFacadeContext);
     return (jsxRuntime.jsx(react.ModalFooter, { ...props, 
         // v2 `classNames.footer` del `<Modal>` entre la fachada y el `className` propio, que
         // gana (`clsx(classNames.footer, className)` en `@heroui/modal@2.2.19`).
-        className: react.cn("mt-0 px-6 py-4", classNames?.footer, className) }));
+        className: react.cn("mt-0 items-stretch px-6 py-4", classNames?.footer, className) }));
 };
 ModalFooter.displayName = "ModalFooter";
 
@@ -16453,7 +16681,8 @@ const DrawerFacade = ({ isOpen, defaultOpen, onOpenChange, onClose, placement =
     // Sin `Drawer.Root` (el `DialogTrigger` de react-aria) a propósito: la fachada no tiene
     // disparador propio —lo abre el `isOpen` de la app— y un `DialogTrigger` sin hijo pulsable
     // avisa en consola en CADA montaje («A PressResponder was rendered without a pressable
-    // child», medido en jsdom; `Modal` lo sigue emitiendo). `Drawer.Backdrop` (`ModalOverlay`)
+    // child», medido en jsdom). `Modal` hace lo mismo desde 27958d2 (ya no monta `Modal.Root`) y
+    // `Modal.v2.test.tsx` vigila 0 avisos con modales cerrados. `Drawer.Backdrop` (`ModalOverlay`)
     // ya crea y publica su propio estado de overlay con `isOpen`/`onOpenChange`, y trae todos los
     // slots de `drawerVariants()`, así que el root no aportaba nada.
     return (jsxRuntime.jsx(react.Drawer.Backdrop, { isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: handleOpenChange, variant: backdrop, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, children: jsxRuntime.jsx(react.Drawer.Content, { placement: placement, children: jsxRuntime.jsx(react.Drawer.Dialog, { "aria-labelledby": headerId, className: react.cn(sizeClass(size, placement), "p-0", scrollBehavior === "outside" && "overflow-y-auto", className), children: ({ close }) => (jsxRuntime.jsx(DrawerDialogBody, { close: close, headerId: headerId, scrollBehavior: scrollBehavior, hideCloseButton: hideCloseButton, children: children })) }) }) }));
@@ -16544,9 +16773,11 @@ DrawerBody.displayName = "Aurora.DrawerBody";
  * Geometría v2 del slot `footer`: `flex flex-row gap-2 px-6 py-4 justify-end`
  * (`@heroui/theme@2.4.15`, slot `footer`). v3 conserva `flex-row justify-end gap-2` pero pierde
  * el padding y añade `.drawer__body + .drawer__footer { mt-5 }`, que v2 no tenía — de ahí el
- * `mt-0` (mismo arreglo que `ModalFooter`).
+ * `mt-0` (mismo arreglo que `ModalFooter`). Y `items-stretch` en lugar del `items-center` de
+ * v3: v2 no declaraba `items-*`, así que un footer en columna estiraba sus filas (en «Register
+ * payment» de beweossmbs, Total 83px frente a 464 con la .141; detalle en `ModalFooter`).
  */
-const DrawerFooter = ({ className, children }) => (jsxRuntime.jsx(react.DrawerFooter, { className: react.cn("mt-0 px-6 py-4", className), children: children }));
+const DrawerFooter = ({ className, children }) => (jsxRuntime.jsx(react.DrawerFooter, { className: react.cn("mt-0 items-stretch px-6 py-4", className), children: children }));
 DrawerFooter.displayName = "Aurora.DrawerFooter";
 
 // TECH-2459 — Fachada `Alert` (hallazgo loginos 07-sep: `index.tsx` reexportaba el `Alert` CRUDO de