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

package/dist/index.cjs.js

@@ -756,9 +756,44 @@ 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`).
+    dot: "dot",
+};
+// ── `variant="dot"` (TECH-2459, reportado por beweossmbs sobre la .140) ─────────────────────
+//
+// Literal de `@heroui/theme@2.4.15` (`chip.js`) y `@heroui/chip@2.2.25` (`chip.js`):
+//
+//   variant.dot.base = "border-medium border-default text-foreground bg-transparent"
+//   slots.dot        = "w-2 h-2 ml-1 rounded-full"   +   color.<c>.dot = "bg-<c>" (default: "bg-default-400")
+//   render           = `isDot && !startContent` → `<span class={slots.dot}/>` en el hueco de `startContent`
+//
+// O sea: el `color` NO tiñe el chip (no hay ningún `compoundVariant` de `dot` × color), solo el
+// punto; el chip queda neutro con el borde de 2px de `default`. Y el punto NO cuenta como
+// `hasStartContent` (`!!avatar || !!startContent`), así que el texto conserva su sangrado izquierdo
+// normal. El compound `{ isOneChar, variant: "dot" }` (base "w-auto h-7 px-1", content "px-2")
+// anula el cuadrado de un carácter: aquí basta con no aplicarlo.
+//
+// Uso real: `shared/ui/components/page-header` de beweossmbs reenvía un `variant` de su propio tipo
+// que incluye `"dot"` (hoy ningún sitio lo pasa, pero el tipo no compilaba).
+const DOT_BASE_CLASS = "border-2 border-default bg-transparent text-foreground";
+const DOT_SLOT_CLASS = "h-2 w-2 ml-1 shrink-0 rounded-full";
+// Clases literales por color (Tailwind 4 solo genera lo que encuentra escrito). Los 5 colores fijos
+// de Aurora no existían en v2: su punto toma el tono del texto que ya les da `CUSTOM_COLOR_CLASSES`.
+const DOT_COLOR_CLASS = {
+    default: "bg-default-400",
+    primary: "bg-primary",
+    secondary: "bg-secondary",
+    success: "bg-success",
+    warning: "bg-warning",
+    danger: "bg-danger",
+    red: "bg-red-500",
+    purple: "bg-purple-500",
+    blue: "bg-blue-500",
+    green: "bg-green-500",
+    orange: "bg-orange-500",
 };
 // `variant="shadow"` de v2, literal de `@heroui/theme@2.4.15` (`dist/utils/variants.js`,
 // `colorVariants.shadow`): `shadow-lg shadow-<color>/40 bg-<color> text-<color>-foreground`
@@ -876,6 +911,8 @@ const V3_VARIANT_BY_SHAPE = {
     soft: "soft",
     transparent: "tertiary",
     outline: "tertiary",
+    faded: "tertiary",
+    dot: "tertiary",
 };
 /**
  * TECH-2459 · F5 · P-08d — La tabla `flat` de v2, medida contra los PNG congelados y no deducida.
@@ -982,7 +1019,56 @@ 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).
+        return {
+            "--chip-bg": "transparent",
+            "--chip-fg": "var(--color-foreground)",
+        };
+    }
     const t = COLOR_TOKENS[color];
     if (shape === "solid") {
         return { "--chip-bg": t.bg, "--chip-fg": t.fg };
@@ -991,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 };
 }
 /**
@@ -1018,26 +1111,32 @@ const Chip = ({ color = "default", variant = "solid", size = "md", radius = "ful
     const hasEndContent = Boolean(endContent) || Boolean(onClose);
     // `isOneChar` de v2 (`use-chip.js:58`): SOLO si el children es un string de un carácter — un
     // número no cuenta. El cuadrado además exige no llevar nada a los lados (ver `ONE_CHAR_CLASS`).
-    const isSquare = typeof children === "string" &&
+    const isDot = shape === "dot";
+    const isSquare = !isDot &&
+        typeof children === "string" &&
         children.length === 1 &&
         !startContent &&
         !hasEndContent;
     const vars = isStandard
         ? colorStyle(color, shape)
         : undefined;
-    const customClass = !isStandard ? 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
+    // Con `dot` el color no tiñe el chip, tampoco el de los colores fijos.
+    const customClass = isStandard || isDot ? "" : CUSTOM_COLOR_CLASSES[color];
+    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;
@@ -1062,7 +1161,7 @@ const Chip = ({ color = "default", variant = "solid", size = "md", radius = "ful
         className: react.cn(SIZE_CLASS$6[size], 
         // Después de `SIZE_CLASS` a propósito: el cuadrado de un carácter ENCOGE la caja
         // respecto al tamaño normal y tiene que ganar en tailwind-merge.
-        isSquare ? ONE_CHAR_CLASS[size] : "", RADIUS_CLASS$9[radius], outlineClass, shadowClass, flatDarkFgClass, customClass, isDisabled ? "opacity-50 pointer-events-none" : "", classNames?.base, className), style: style, children: [startContent, jsxRuntime.jsx("span", { className: react.cn("flex-1 text-inherit font-normal", startContent
+        isSquare ? ONE_CHAR_CLASS[size] : "", RADIUS_CLASS$9[radius], outlineClass, isDot ? DOT_BASE_CLASS : "", shadowClass, flatDarkFgClass, customClass, isDisabled ? "opacity-50 pointer-events-none" : "", classNames?.base, className), style: style, children: [startContent, isDot && !startContent && (jsxRuntime.jsx("span", { "aria-hidden": "true", "data-slot": "dot", className: react.cn(DOT_SLOT_CLASS, DOT_COLOR_CLASS[color]) })), jsxRuntime.jsx("span", { className: react.cn("flex-1 text-inherit font-normal", startContent
                     ? CONTENT_PADDING[size].leftWithContent
                     : CONTENT_PADDING[size].left, hasEndContent
                     ? CONTENT_PADDING[size].rightWithContent
@@ -1087,7 +1186,11 @@ const sizeMap = {
 const IconComponent = ({ icon, size = "md", className, style, color, hFlip, vFlip, flip, rotate, ...nativeProps }) => {
     // Un número son píxeles tal cual (p. ej. 64): la escala con nombre se queda en 32 y
     // `width`/`height` no son props del componente (caerían en el <span>, sin efecto).
-    const iconSize = typeof size === "number" ? `${size}px` : (sizeMap[size] ?? sizeMap.md);
+    // Un nombre fuera de la escala (`"xs"`, el alias v2 del tipo) cae al default, como en v2
+    // (`sizeMap[size] ?? sizeMap.md`, `@beweco/aurora-ui@0.6.85`): 20px.
+    const iconSize = typeof size === "number"
+        ? `${size}px`
+        : (sizeMap[size] ?? sizeMap.md);
     return (jsxRuntime.jsx("span", { ...nativeProps, children: jsxRuntime.jsx(react$1.Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) }));
 };
 
@@ -1152,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.
  *
@@ -1226,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`
@@ -1345,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) {
@@ -1378,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
@@ -1393,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`,
@@ -1669,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,
@@ -2171,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);
@@ -2214,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);
@@ -2246,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" : "", 
@@ -2263,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";
 
@@ -2385,21 +2558,73 @@ 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";
+// Controles que tienen su propia pulsación. Un clic que nace dentro de uno de ellos es SUYO, no de
+// la card: los `Button` de Aurora (react-aria) ya paran la propagación del `click` (medido en
+// jsdom con el `Button` de la librería), pero un `<button>`/`<a>` nativo o un `<input>` no.
+const CONTROL_INTERNO = 'button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="menuitem"], [role="tab"], [role="option"]';
+function desdeControlInterno(event) {
+    const target = event.target;
+    if (!target || target === event.currentTarget) {
+        return false;
+    }
+    const control = target.closest?.(CONTROL_INTERNO);
+    return (!!control &&
+        control !== event.currentTarget &&
+        event.currentTarget.contains(control));
+}
+/**
+ * Tecla → `PressEvent` con la forma del de react-aria (`pointerType: "keyboard"`, punto en el
+ * centro de la card, como hace `pressEventFromClick` con un click sintético de `detail === 0`).
+ */
+function pressEventFromKey(event) {
+    const target = event.currentTarget;
+    const rect = target.getBoundingClientRect();
+    return {
+        type: "press",
+        pointerType: "keyboard",
+        target,
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        altKey: event.altKey,
+        x: rect.width / 2,
+        y: rect.height / 2,
+        continuePropagation: () => undefined,
+    };
+}
 /**
  * Card genérica siguiendo las reglas de diseño BeweOS basada en HeroUI v3.
  *
@@ -2422,39 +2647,83 @@ const DISABLED_CLASS = "opacity-50 cursor-not-allowed";
  *   `isHoverable`/`isDisabled`/`fullWidth`.
  *
  * `ref` se reenvía con `forwardRef` (patrón de las fachadas de campo del repo, ver
- * `Input.tsx`) y apunta al nodo raíz: el `<div>` o, con `isPressable`, el `<button>`.
+ * `Input.tsx`) y apunta al nodo raíz, que es siempre un `<div>` (con `isPressable`,
+ * `<div role="button">`).
  */
-const Card = $8WNJc$react.forwardRef(({ children, className, shadow = "sm", radius = "sm", padding = "md", isPressable = false, onPress, onClick, disableAnimation = false, disableRipple = false, isHoverable = false, isDisabled = false, fullWidth = false, render, ...props }, ref) => {
+const Card = $8WNJc$react.forwardRef(({ children, className, shadow = "sm", radius = "sm", padding = "md", isPressable = false, onPress, onClick, onKeyDown, onKeyUp, disableAnimation = false, disableRipple = false, isHoverable = false, isDisabled = false, fullWidth = false, render, ...props }, ref) => {
     // Como en v2 (`@heroui/card@2.2.21`, `useCard`): `disableAnimation` apaga también la onda.
     const sinRipple = disableRipple || disableAnimation;
     const { ondas, lanzar, quitar } = useRipple();
+    const pulsable = isPressable && !isDisabled;
+    const press = $8WNJc$react.useCallback((pressEvent) => {
+        onPress?.(pressEvent);
+        if (!sinRipple) {
+            lanzar(pressEvent);
+        }
+    }, [onPress, sinRipple, lanzar]);
     const handleClick = $8WNJc$react.useCallback((event) => {
+        // Card pulsable deshabilitada: ni `onClick` de la app, como el `disabled` nativo del
+        // `<button>` que era hasta la .140.
+        if (isPressable && isDisabled) {
+            return;
+        }
         onClick?.(event);
-        if (!isPressable || isDisabled) {
+        if (!pulsable || desdeControlInterno(event)) {
             return;
         }
-        const pressEvent = pressEventFromClick(event);
-        onPress?.(pressEvent);
-        if (!sinRipple) {
-            lanzar(pressEvent);
+        press(pressEventFromClick(event));
+    }, [onClick, isPressable, isDisabled, pulsable, press]);
+    // Teclado de un `<button>` nativo, que el `<div role="button">` no trae: Enter pulsa al
+    // bajar la tecla y Espacio al soltarla. `preventDefault` en ambos: Espacio haría scroll de
+    // la página y Enter podría enviar un `<form>` que envuelva la card. Solo cuando el foco está
+    // EN la card: una tecla sobre un botón interno es de ese botón (react-aria ya para su
+    // propagación, y esta guarda cubre también a los controles nativos).
+    const handleKeyDown = $8WNJc$react.useCallback((event) => {
+        onKeyDown?.(event);
+        if (!pulsable || event.target !== event.currentTarget) {
+            return;
+        }
+        if (event.key === " ") {
+            event.preventDefault();
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            if (!event.repeat) {
+                press(pressEventFromKey(event));
+            }
         }
-    }, [onClick, isPressable, isDisabled, onPress, sinRipple, lanzar]);
-    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 : "", 
+    }, [onKeyDown, pulsable, press]);
+    const handleKeyUp = $8WNJc$react.useCallback((event) => {
+        onKeyUp?.(event);
+        if (!pulsable ||
+            event.target !== event.currentTarget ||
+            event.key !== " ") {
+            return;
+        }
+        event.preventDefault();
+        press(pressEventFromKey(event));
+    }, [onKeyUp, pulsable, press]);
+    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` (`Component = as || (isPressable
-    // ? "button" : "div")`). v3 lo permite con `render` (DOMRenderProps: basta con conectar
-    // el `ref`, que ya viene en `domProps`), así que se conserva el `CardContext` del
-    // compound y los `Card.Header`/`CardBody` de dentro siguen funcionando.
-    const pressableRender = isPressable
-        ? (domProps) => (jsxRuntime.jsx("button", { ...domProps, type: "button", 
-            // v2 (`useCard`): `{ ...buttonProps, ...focusProps, role: "button" }` y
-            // `tabIndex: isPressable ? 0 : -1`. En un `<button>` nativo el rol ya es
-            // `button` implícito (biome marca el explícito como redundante); el
-            // `tabIndex` se escribe igual que v2.
-            tabIndex: isDisabled ? -1 : 0, disabled: isDisabled }))
-        : render;
-    return (jsxRuntime.jsxs(react.Card, { ...props, ref: ref, className: combinedClassName, "data-pressable": isPressable || undefined, "data-disabled": isDisabled || undefined, onClick: isPressable || onClick ? handleClick : undefined, render: pressableRender, children: [children, isPressable && ondas.length > 0 && (jsxRuntime.jsx(CapaRipple, { ondas: ondas, onFin: quitar }))] }));
+    // v2 cambiaba el ELEMENTO a `<button>` con `isPressable`, y hasta la .140 esta fachada lo
+    // imitaba con el `render` de v3. Se quitó porque las apps meten botones DENTRO de la card
+    // pulsable (`ChannelCard` de smbs, Linda → Compartir: «Compartir»/«Integrar»), y
+    // `<button>` dentro de `<button>` es HTML inválido: React avisa en consola
+    // («cannot be a descendant of <button>», medido en jsdom) y el parser del navegador lo
+    // reparenta. La card se queda en el `<div>` de v3 con la semántica de botón de v2
+    // (`useCard`: `role: "button"` + `tabIndex: isPressable ? 0 : -1`) y el teclado a mano
+    // (ver `handleKeyDown`). El `render` de la app pasa tal cual.
+    const pressableProps = isPressable
+        ? {
+            role: "button",
+            tabIndex: isDisabled ? undefined : 0,
+            "aria-disabled": isDisabled || undefined,
+            onKeyDown: handleKeyDown,
+            onKeyUp: handleKeyUp,
+        }
+        : {};
+    return (jsxRuntime.jsxs(react.Card, { ...props, ...pressableProps, ref: ref, className: combinedClassName, "data-pressable": isPressable || undefined, "data-disabled": isDisabled || undefined, onClick: isPressable || onClick ? handleClick : undefined, render: render, children: [children, isPressable && ondas.length > 0 && (jsxRuntime.jsx(CapaRipple, { ondas: ondas, onFin: quitar }))] }));
 });
 Card.displayName = "Card";
 
@@ -3184,7 +3453,7 @@ const CLEAR_GAP_WITH_TRIGGER_UNDERLINED_CLASS = "me-9";
  * ⚠️ `h-4 w-4 p-0` deja el glifo de 16px ocupando la caja entera; el `[&_svg]:m-0` quita los
  * márgenes negativos de v3 para que el centro del glifo coincida con el centro de la caja.
  */
-const CLEAR_BUTTON_CLASS = "h-4 w-4 min-h-0 shrink-0 rounded-full bg-transparent p-0 text-default-500 hover:bg-transparent [&_svg]:m-0";
+const CLEAR_BUTTON_CLASS$2 = "h-4 w-4 min-h-0 shrink-0 rounded-full bg-transparent p-0 text-default-500 hover:bg-transparent [&_svg]:m-0";
 const DEFAULT_ICON = (jsxRuntime.jsx(IconComponent, { icon: "solar:magnifer-outline", className: "text-default-400 pointer-events-none shrink-0", size: "sm", "aria-hidden": true }));
 /**
  * AuraAutocomplete genérico reutilizable, migrado al `ComboBox` compound de HeroUI v3 (el
@@ -3209,7 +3478,9 @@ const AuraAutocomplete = ({ label, id, icon, placeholder, className, children, v
 // limpiarlo. Se reenvían tal cual al `ComboBox`, así que para el consumidor no cambia nada:
 // pasar `undefined` es indistinguible de no pasarlos (react-aria decide controlado/no
 // controlado con `!== undefined`).
-isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelectionChange, translations, radius: _radius, isInvalid, errorMessage, listboxProps, isLoading = false, allowsCustomValue, allowsEmptyCollection, ...props }) => {
+isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelectionChange, translations, radius: _radius, isInvalid, errorMessage, listboxProps, isLoading = false, allowsCustomValue, allowsEmptyCollection, isOpen, onOpenChange, popoverProps, 
+// Aceptada y descartada: ver `AuraAutocompleteProps.labelPlacement`.
+labelPlacement: _labelPlacement, scrollShadowProps, ...props }) => {
     const generatedId = $8WNJc$react.useId();
     const autoId = id || generatedId;
     // Con `isLoading` el spinner ocupa el extremo (ver `SPINNER`): a efectos de maquetación es el
@@ -3225,6 +3496,26 @@ isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelect
     const emptyContent = listboxProps?.emptyContent ?? t.emptyContent;
     /** El `<input>` real, para devolverle el foco tras limpiar (ver `handleClear`). */
     const inputRef = $8WNJc$react.useRef(null);
+    /*
+     * `isOpen` controlado (ver `AuraAutocompleteProps.isOpen`). La fachada sigue el estado de
+     * apertura de react-aria por su `onOpenChange` y decide con él si el popover se ve: visible solo
+     * si react-aria lo tiene abierto Y la app no lo ha cerrado. `ComboBox.Popover` es el `Popover`
+     * de react-aria-components, que con `isOpen` propio usa ese valor en vez del estado del
+     * `ComboBox` (`Popover.mjs`: `props.isOpen != null ? localState : contextState`).
+     */
+    const [ariaOpen, setAriaOpen] = $8WNJc$react.useState(false);
+    const handleOpenChange = (open, menuTrigger) => {
+        setAriaOpen(open);
+        onOpenChange?.(open, menuTrigger);
+    };
+    const handleInputChange = (value) => {
+        // La lista está abierta para react-aria pero la app la cerró: react-aria no volverá a avisar
+        // (para él ya está abierta), así que la fachada pide abrir como hacía v2 al teclear.
+        if (isOpen === false && ariaOpen) {
+            onOpenChange?.(true, "input");
+        }
+        onInputChange?.(value);
+    };
     // `data-visible` de v2, traducido a montar/no montar: `!!state.selectedItem ||
     // state.inputValue?.length > 0` (`chunk-NJJHRP6D.mjs:273`), y apagado por `isDisabled`/
     // `isReadOnly` como en el cálculo de `isClearable` del hook (línea 20 del mismo fichero).
@@ -3258,7 +3549,7 @@ isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelect
         onInputChange?.("");
         inputRef.current?.focus();
     };
-    return (jsxRuntime.jsxs(react.ComboBox, { id: autoId, isDisabled: isDisabled, isReadOnly: isReadOnly, inputValue: inputValue, selectedKey: selectedKey, onInputChange: onInputChange, onSelectionChange: onSelectionChange, isInvalid: isInvalid, allowsCustomValue: allowsCustomValue, allowsEmptyCollection: allowsEmptyCollection ?? !hideEmptyContent, className: [FIELD_STACK_CLASS$2, className].filter(Boolean).join(" "), ...props, children: [label && jsxRuntime.jsx(react.Label, { className: LABEL_CLASS$3, children: label }), jsxRuntime.jsxs(react.ComboBox.InputGroup, { className: [
+    return (jsxRuntime.jsxs(react.ComboBox, { id: autoId, isDisabled: isDisabled, isReadOnly: isReadOnly, inputValue: inputValue, selectedKey: selectedKey, onInputChange: handleInputChange, onSelectionChange: onSelectionChange, onOpenChange: handleOpenChange, isInvalid: isInvalid, allowsCustomValue: allowsCustomValue, allowsEmptyCollection: allowsEmptyCollection ?? !hideEmptyContent, className: [FIELD_STACK_CLASS$2, className].filter(Boolean).join(" "), ...props, children: [label && jsxRuntime.jsx(react.Label, { className: LABEL_CLASS$3, children: label }), jsxRuntime.jsxs(react.ComboBox.InputGroup, { className: [
                     SIZE_CLASS$2[size],
                     PADDING_CLASS$1[size],
                     variant === "underlined" ? UNDERLINED_INNER_CLASS[size] : "",
@@ -3307,7 +3598,7 @@ isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelect
                          * su `aria-label` traducido, y alcanzable con teclado como la ✕ de `Input`.
                          */
                         slot: null, "aria-label": t.clearButtonAriaLabel, className: [
-                            CLEAR_BUTTON_CLASS,
+                            CLEAR_BUTTON_CLASS$2,
                             resolvedIcon != null
                                 ? CLEAR_GAP_WITH_ICON_CLASS
                                 : variant === "underlined"
@@ -3321,7 +3612,13 @@ isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelect
                             isDisabled ? ICON_DISABLED_CLASS : "",
                         ]
                             .filter(Boolean)
-                            .join(" "), children: resolvedIcon })), jsxRuntime.jsx(react.ComboBox.Trigger, { className: resolvedIcon != null ? "hidden" : undefined })] }), isInvalid && errorMessage != null && errorMessage !== false && (jsxRuntime.jsx(react.FieldError, { className: ERROR_MESSAGE_CLASS, children: errorMessage })), jsxRuntime.jsx(react.ComboBox.Popover, { children: jsxRuntime.jsx(react.ListBox, { autoFocus: "first", className: OPCIONES_CLASS, renderEmptyState: hideEmptyContent
+                            .join(" "), children: resolvedIcon })), jsxRuntime.jsx(react.ComboBox.Trigger, { className: resolvedIcon != null ? "hidden" : undefined })] }), isInvalid && errorMessage != null && errorMessage !== false && (jsxRuntime.jsx(react.FieldError, { className: ERROR_MESSAGE_CLASS, children: errorMessage })), jsxRuntime.jsx(react.ComboBox.Popover, { ...popoverProps, isOpen: isOpen === undefined ? undefined : isOpen && ariaOpen, children: jsxRuntime.jsx(react.ListBox, { autoFocus: "first", 
+                    // `scrollShadowProps` de v2 al contenedor con scroll (el `ListBox`): la clase
+                    // de la app va al final y gana por `cn`, y `overflow-y-auto` para que un
+                    // `max-h-*` recorte desplazando y no desbordando.
+                    className: scrollShadowProps?.className
+                        ? react.cn(OPCIONES_CLASS, "overflow-y-auto", scrollShadowProps.className)
+                        : OPCIONES_CLASS, style: scrollShadowProps?.style, renderEmptyState: hideEmptyContent
                         ? undefined
                         : () => jsxRuntime.jsx("div", { className: EMPTY_CONTENT_CLASS$1, children: emptyContent }), children: withV2ItemContent(
                     // El normalizador de `utils/` está tipado solo para `ReactNode`; con una
@@ -3572,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)) })] }))] }));
@@ -6588,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:
@@ -8930,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
@@ -9002,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) => {
@@ -9027,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.
@@ -9034,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";
 /**
@@ -9662,7 +9970,98 @@ const SPINNER_CLASS = "pointer-events-none absolute inset-y-0 end-3 my-auto text
  */
 const DEFAULT_TRANSLATIONS$8 = {
     emptyContent: "No hay opciones",
+    searchPlaceholder: "Buscar…",
+    // Mismo literal que la lista vacía de `AuraAutocomplete`: es el mismo caso (un filtro por texto
+    // que no encuentra nada), así que las dos fachadas lo dicen igual.
+    noResults: "No se encontraron resultados",
+    // Mismo literal que la ✕ de `Input` y de `AuraAutocomplete`.
+    clearButtonAriaLabel: "Limpiar",
 };
+/*
+ * EL BUSCADOR Y LA ✕ (TECH-2459, hallazgo beweossmbs 23-sep): `isSearchable` e `isClearable`.
+ *
+ * Con cualquiera de los dos la fachada cambia de RAÍZ: monta el compound `Autocomplete` de v3 en
+ * vez de `Select`. No es un compound distinto por dentro —`AutocompleteRoot` ES el `Select` de
+ * react-aria (`@heroui/react/dist/components/autocomplete/autocomplete.js:50`, `jsx(Select, …)`),
+ * así que `value`/`onChange`/`selectionMode`/`disabledKeys` y la colección funcionan igual y la
+ * traducción de la API v2 de abajo no cambia ni una línea—, pero su disparador sí:
+ *
+ * - `Autocomplete.Trigger` es un `Group` (un `<div>`), no un `<button>`. Es lo que permite meter la
+ *   ✕ DENTRO del campo sin anidar dos botones (trampa nº 4 de `auraui-components`). El botón que
+ *   recibe el foco es el del `Autocomplete.Indicator`, que consume el `ButtonContext` del Select
+ *   (`autocomplete.js`, `jsx(Button, { children: indicator })`): Tab llega al chevron y desde ahí
+ *   las flechas/Enter abren la lista, igual que en el `Select` de siempre.
+ * - `Autocomplete.Filter` (el `Autocomplete` de react-aria) conecta un `SearchField` con el
+ *   `ListBox`: el texto filtra la colección y las flechas mueven el foco virtual de la lista sin
+ *   salir del buscador. Es la receta oficial «Migrating to v3 Autocomplete (searchable select)»
+ *   de la guía de migración, con `useFilter({ sensitivity: "base" })`: sin distinguir mayúsculas
+ *   ni acentos («cancun» encuentra «Cancún»).
+ *
+ * Sin ninguna de las dos props la fachada sigue montando `Select`, exactamente como antes: los
+ * 107 `Select` de beweossmbs que no las pasan no cambian ni un nodo.
+ *
+ * Por qué la ✕ va también por aquí y no sobre el `Select`: el disparador de `Select` es un
+ * `<button>` (no admite otro dentro) y la fachada no alcanza el estado de react-aria para vaciar la
+ * selección de un campo no controlado (`SelectStateContext` no lo reexporta `@heroui/react`, e
+ * importarlo de `react-aria-components` metería una SEGUNDA copia del contexto en el bundle, que no
+ * casaría con la de HeroUI). `Autocomplete.ClearButton` sí lo alcanza: vacía la selección con
+ * `state.selectionManager.setSelectedKeys(new Set())` y llama a `onClear`.
+ */
+/** Hueco del valor cuando la ✕ va a su derecha: el hueco del chevron lo reserva la ✕. */
+const VALUE_ROOM_CLEARABLE_CLASS = "me-1 min-w-0 truncate";
+/*
+ * La ✕. `.autocomplete__clear-button` de v3 ya la pinta como v2 (glifo sin caja, `bg-transparent`,
+ * gris `text-muted`) y la esconde con `opacity-0` cuando no hay nada elegido. v2 no la montaba sin
+ * selección (`@heroui/select@2.4.33`, `chunk-BJWIL32D.mjs:64`: `isClearable &&
+ * state.selectedItems?.length`), así que aquí se retira del flujo en ese estado en vez de dejar un
+ * hueco invisible de 20px.
+ *
+ * `me-5`: el chevron es `absolute end-3` (12px del borde, 16px de ancho) y la ✕ va en flujo, que
+ * acaba en el relleno del trigger (`px-3`, 12px). Sin margen caería ENCIMA del chevron; con 20px su
+ * canto derecho queda a 4px del izquierdo del chevron.
+ */
+const CLEAR_BUTTON_CLASS$1 = "z-10 me-5 data-[empty=true]:hidden";
+/*
+ * EL FOCO DEL TECLADO (hallazgo del coordinador con Playwright, 23-sep). En la raíz `Autocomplete`
+ * el único elemento tabulable es el botón del chevron —el `Button` de react-aria que monta
+ * `Autocomplete.Indicator`, sin clase propia ni forma de pasarle una—, y en el flujo mide **0×0**:
+ * su único hijo es el SVG, que es `absolute`. El foco caía en una caja vacía (el borde del disparador
+ * sí cambiaba, por `focus-within`, pero el elemento enfocado no tenía caja para un lector de
+ * pantalla, un magnificador o un anillo propio).
+ *
+ * Se estira ese botón sobre el disparador entero (`absolute inset-0`, mismo radio): el elemento
+ * enfocado pasa a medir lo mismo que el disparador, como el `<button>` del `Select` normal, y el
+ * SVG sigue en su sitio porque su contenedor posicionado cubre la misma caja. Pulsar en cualquier
+ * punto sigue abriendo (el `Group` ya abría al pulsar, y el botón ya estaba DENTRO del grupo).
+ * La ✕ va por encima (`z-10` en `CLEAR_BUTTON_CLASS`) para seguir recibiendo su clic.
+ *
+ * Se apunta por estructura porque es la única vía: `button:not([data-slot])` es ese botón, ya que
+ * la ✕ lleva `data-slot="autocomplete-clear-button"`.
+ */
+const INDICATOR_BUTTON_OVERLAY_CLASS = [
+    "[&>button:not([data-slot])]:absolute",
+    "[&>button:not([data-slot])]:inset-0",
+    "[&>button:not([data-slot])]:rounded-[inherit]",
+    "[&>button:not([data-slot])]:outline-none",
+    "[&>button:not([data-slot])]:cursor-[inherit]",
+].join(" ");
+/*
+ * El foco en el disparador `Group`. El `FOCUS_BORDER_CLASS` del Select casa `aria-expanded` y
+ * `:focus` del `<button>`; aquí el disparador es un `<div>` que no lleva ninguno de los dos: el foco
+ * lo tiene el botón del chevron, DENTRO (`focus-within`), y el estado abierto lo escribe v3 en la
+ * RAÍZ (`data-open="true"` en `div.autocomplete`), así que va por un `group` con nombre.
+ */
+const FOCUS_BORDER_GROUP_CLASS = "focus-within:border-primary-500! group-data-[open=true]/aura-select:border-primary-500!";
+/*
+ * El buscador del desplegable. `.autocomplete__popover` de v3 ya lo coloca (`[data-slot=
+ * "search-field"] { px-3 py-1 }`, `pt-2` en el popover, `overflow-hidden` + lista con su propio
+ * scroll, de modo que el buscador no se va al desplazar la lista). Solo se retira el anillo de
+ * foco de v3 (`status-focused-field` → `ring-2`), por lo mismo que en todos los campos de la
+ * librería (`FIELD_FOCUS_CLASS`): el foco lo marca el borde, en primario.
+ */
+const SEARCH_GROUP_CLASS = "w-full ring-0 ring-offset-0 outline-0 focus-within:border-primary-500";
+/** El `ListBox` es el contenedor que se desplaza cuando el consumidor le fija alto. */
+const LISTBOX_SCROLL_CLASS = "overflow-y-auto";
 // Medidas del estado vacío. Se toman las del ITEM de v3 (`@heroui/styles`,
 // `dist/components/list-box-item.css:6`: `min-h-9 … px-2 py-1.5`) y no las del slot `emptyContent`
 // de v2, y es una decisión medida: el literal de v2 era
@@ -9934,7 +10333,9 @@ size = "md", variant = "bordered", radius = "md",
 //
 // Por eso este componente sigue sin `SelectTranslations`: la corrección consiste precisamente en
 // que la librería no aporte NINGÚN texto propio, no en traducir el que había.
-placeholder = "", selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys, isInvalid = false, isRequired = false, isDisabled = false, 
+placeholder = "", selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys, isInvalid = false, isRequired = false, 
+// Alias nativo de `isRequired` (ver `SelectProps.required`).
+required = false, isDisabled = false, 
 // `fullWidth` por defecto a `true`: HeroUI v2 lo traía en sus `defaultVariants`
 // (verificado en el paquete v2 compilado, `dist/components/input.js`:
 // `defaultVariants: { variant:"flat", color:"default", size:"md", fullWidth:true, … }`, con
@@ -9944,14 +10345,35 @@ placeholder = "", selectionMode = "single", selectedKeys, defaultSelectedKeys, o
 // columna no se notaba porque el `stretch` del flex lo tapaba — pero afecta a cualquier app.
 fullWidth = true, isLoading = false, 
 // Aceptada y descartada: ver `SelectProps.isVirtualized`.
-isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = false, renderValue, startContent, listboxProps, isOpen, defaultOpen, onOpenChange, className, classNames, translations = {}, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, }) => {
+isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = false, renderValue, startContent, listboxProps, onChange, 
+// Aceptada y descartada: ver `SelectProps.labelPlacement`.
+labelPlacement: _labelPlacement, scrollShadowProps, items, isSearchable = false, searchPlaceholder, isClearable = false, onClear, closeOnSelect, isOpen, defaultOpen, onOpenChange, className, classNames, translations = {}, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, }) => {
     const generatedId = $8WNJc$react.useId();
     const selectId = id || generatedId;
-    const requiredField = isRequired;
+    const requiredField = isRequired || required;
     const t = { ...DEFAULT_TRANSLATIONS$8, ...translations };
+    // Raíz `Autocomplete` (buscador y/o ✕) o `Select` de siempre: ver el bloque «EL BUSCADOR Y LA ✕».
+    const usesAutocompleteShell = isSearchable || isClearable;
+    // Filtro de react-aria sin mayúsculas ni acentos. El hook va fuera de la condición (reglas de
+    // hooks); sin `isSearchable` no se usa.
+    const { contains } = react.useFilter({ sensitivity: "base" });
+    // Texto del buscador, en la fachada para saber qué mensaje poner en la lista vacía y para
+    // vaciarlo al cerrar (abrir de nuevo = lista completa, que es lo que hacía el buscador manual
+    // de `timezone-search-select` con su `onOpenChange`).
+    const [searchText, setSearchText] = $8WNJc$react.useState("");
     // v2 pintaba `listboxProps.emptyContent` en el hueco de la lista vacía; gana a la traducción,
-    // que es el default de la fachada (el de v2 era el literal inglés "No items.").
-    const emptyContent = listboxProps?.emptyContent ?? t.emptyContent;
+    // que es el default de la fachada (el de v2 era el literal inglés "No items."). Con el buscador
+    // escrito, la lista vacía significa «sin resultados», no «sin opciones».
+    const emptyContent = isSearchable && searchText.trim() !== ""
+        ? t.noResults
+        : (listboxProps?.emptyContent ?? t.emptyContent);
+    const resolvedSearchPlaceholder = searchPlaceholder ?? t.searchPlaceholder;
+    const handleOpenChange = (open) => {
+        if (!open) {
+            setSearchText("");
+        }
+        onOpenChange?.(open);
+    };
     // Estado propio SOLO para `multiple` + `disallowEmptySelection` sin controlar: para rechazar el
     // cambio que vaciaría la selección, la fachada tiene que ser dueña del valor. En los demás casos
     // no se lee (el hook va fuera de la condición por las reglas de hooks).
@@ -9963,55 +10385,97 @@ isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = fal
     // 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, 
+    isInvalid
+        ? INVALID_VARIANT_CLASS[variant]
+        : usesAutocompleteShell
+            ? FOCUS_BORDER_GROUP_CLASS
+            : FOCUS_BORDER_CLASS, FIELD_FOCUS_CLASS$1, FIELD_SHADOW_CLASS$1, usesAutocompleteShell ? INDICATOR_BUTTON_OVERLAY_CLASS : "", 
     // 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);
+    // `id`/`textValue` desde la `key` de React: ver `utils/collection-items.ts` — sin esto un select
+    // múltiple no pinta lo elegido y uno controlado arranca vacío. `withV2ItemContent` traduce
+    // `description`/`startContent`/`endContent`/`classNames` del item y `title`/`showDivider` de la
+    // sección a la anatomía de v3 (ver `_internal/v2-collection.tsx` para el orden), y
+    // `withItemIndicator` monta el checkmark del seleccionado, que en v3 es un subcomponente aparte
+    // (ver `_internal/with-item-indicator.tsx`, y ahí por qué va en este orden).
+    const decorate = (nodes) => withItemIndicator(withV2ItemContent(withCollectionItemIds(nodes)));
+    // Colección dinámica (`items` + función, la forma de `Profile.tsx`). La función se envuelve para
+    // decorar lo que devuelva, y el paso de `withCollectionItemIds` importa aquí MÁS que en la forma
+    // estática: react-aria toma la clave de una colección dinámica de `rendered.props.id ??
+    // item.key ?? item.id`, nunca de la `key` de React. Sin reponer el `id` desde la `key`, las
+    // opciones de `Profile.tsx` (objetos `{ value: "es", id: 1 }` con `<SelectItem key={value}>`)
+    // se llamarían `1`/`2` y ni `defaultSelectedKeys={["es"]}` casaría ni `onSelectionChange`
+    // devolvería la clave de la app.
+    const collection = typeof children === "function"
+        ? (item) => decorate(children(item))
+        : decorate(children);
+    const listBox = (jsxRuntime.jsx(react.ListBox
+    // v2 `items`: react-aria recorre la colección y llama a la función de `children`.
+    , { 
+        // v2 `items`: react-aria recorre la colección y llama a la función de `children`.
+        items: items, 
+        // v2: `classNames.listboxWrapper` y `scrollShadowProps.className` iban al mismo slot
+        // (`cn(classNames.listboxWrapper, scrollShadowProps.className)`, `chunk-YFRCT47S.mjs:
+        // 321-331`), en ese orden.
+        className: classNames?.listboxWrapper || scrollShadowProps?.className
+            ? react.cn(LISTBOX_SCROLL_CLASS, classNames?.listboxWrapper, scrollShadowProps?.className)
+            : undefined, style: scrollShadowProps?.style, 
+        // El hueco que v2 llenaba con su `emptyContent` (ver el bloque de
+        // `DEFAULT_TRANSLATIONS`). `renderEmptyState` es la vía de v3: el `ListBox` de
+        // react-aria solo pinta algo con la colección vacía si se le pasa, y envuelve el
+        // resultado en un `<div role="option" style="display:contents">`
+        // (`react-aria-components/dist/private/ListBox.mjs:222-228`), o sea que la caja que se
+        // ve es la nuestra.
+        renderEmptyState: () => (jsxRuntime.jsx("div", { className: EMPTY_CONTENT_CLASS, children: emptyContent })), children: collection }));
+    // Las piezas del disparador son las mismas en las dos raíces; solo cambia de qué compound salen
+    // (ver el bloque «EL BUSCADOR Y LA ✕»). `Autocomplete.Value` y `Select.Value` son el mismo
+    // `SelectValue` de react-aria con otra clase base, así que reciben las mismas props.
+    const ValuePart = usesAutocompleteShell
+        ? react.Autocomplete.Value
+        : react.Select.Value;
+    const triggerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [startContent != null && startContent !== false && (jsxRuntime.jsx("span", { "data-slot": "start-content", className: START_CONTENT_CLASS, children: startContent })), jsxRuntime.jsx(ValuePart, { className: react.cn(SIZE_TEXT_CLASS$1[size], isMultiline
+                    ? MULTILINE_VALUE_ROOM_CLASS
+                    : isClearable
+                        ? VALUE_ROOM_CLEARABLE_CLASS
+                        : VALUE_ROOM_CLASS, HIDE_ITEM_EXTRAS_CLASS, isInvalid ? INVALID_TEXT_CLASS$1 : ""), children: renderValue
+                    ? // `renderValue` de v2 (`chunk-BJWIL32D.mjs`): sin selección, el placeholder;
+                        // con selección, la función con los items en la forma de v2. El nodo de la
+                        // colección de v3 trae los mismos campos que el de v2, así que el mapeo es
+                        // 1:1. `defaultChildren` es aquí el placeholder (o `""`, ver arriba).
+                        ({ state, isPlaceholder, defaultChildren }) => {
+                            if (isPlaceholder) {
+                                return defaultChildren;
+                            }
+                            const items = state.selectedItems.map((item) => ({
+                                key: item.key,
+                                data: item.value,
+                                type: item.type,
+                                props: item.props,
+                                textValue: item.textValue,
+                                rendered: item.rendered,
+                                "aria-label": item["aria-label"],
+                            }));
+                            return renderValue(items);
+                        }
+                    : undefined }), isClearable && (jsxRuntime.jsx(react.Autocomplete.ClearButton, { "aria-label": t.clearButtonAriaLabel, className: CLEAR_BUTTON_CLASS$1 })), usesAutocompleteShell ? (
+            /* En el `Autocomplete` el chevron es el BOTÓN que recibe el foco (ver el bloque
+                «EL BUSCADOR Y LA ✕»), así que el spinner va DENTRO de él en vez de sustituirlo:
+                sin el botón el campo no se alcanzaría con el teclado. `Autocomplete.Indicator` clona
+                su hijo con la clase del indicador (`absolute inset-y-0 end-2 my-auto`), así que el
+                spinner cae en el sitio del chevron sin clase propia. */
+            jsxRuntime.jsx(react.Autocomplete.Indicator, { className: "end-3", children: isLoading ? (jsxRuntime.jsx(react.Spinner, { "aria-hidden": true, "data-slot": "select-spinner", size: "sm", color: "current" })) : undefined })) : isLoading ? (jsxRuntime.jsx(react.Spinner, { "aria-hidden": true, "data-slot": "select-spinner", size: "sm", color: "current", className: SPINNER_CLASS })) : (
+            /* `.select__indicator` de v3 va a `end-2` (8px del borde interior); el
+                `selectorIcon` de v2 iba a `end-3` (12px). Medido en los PNG: la tinta del chevron
+                acaba a 17px del borde derecho en la referencia y a 13px con el valor de v3 — 4px
+                de más. */
+            jsxRuntime.jsx(react.Select.Indicator, { className: "end-3" }))] }));
     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: [startContent != null && startContent !== false && (jsxRuntime.jsx("span", { "data-slot": "start-content", className: START_CONTENT_CLASS, children: startContent })), jsxRuntime.jsx(react.Select.Value, { className: react.cn(SIZE_TEXT_CLASS$1[size], isMultiline ? MULTILINE_VALUE_ROOM_CLASS : VALUE_ROOM_CLASS, HIDE_ITEM_EXTRAS_CLASS, isInvalid ? INVALID_TEXT_CLASS$1 : ""), children: renderValue
-                            ? // `renderValue` de v2 (`chunk-BJWIL32D.mjs`): sin selección, el placeholder;
-                                // con selección, la función con los items en la forma de v2. El nodo de la
-                                // colección de v3 trae los mismos campos que el de v2, así que el mapeo es
-                                // 1:1. `defaultChildren` es aquí el placeholder (o `""`, ver arriba).
-                                ({ state, isPlaceholder, defaultChildren }) => {
-                                    if (isPlaceholder) {
-                                        return defaultChildren;
-                                    }
-                                    const items = state.selectedItems.map((item) => ({
-                                        key: item.key,
-                                        data: item.value,
-                                        type: item.type,
-                                        props: item.props,
-                                        textValue: item.textValue,
-                                        rendered: item.rendered,
-                                        "aria-label": item["aria-label"],
-                                    }));
-                                    return renderValue(items);
-                                }
-                            : undefined }), isLoading ? (jsxRuntime.jsx(react.Spinner, { "aria-hidden": true, "data-slot": "select-spinner", size: "sm", color: "current", className: SPINNER_CLASS })) : (
-                    /* `.select__indicator` de v3 va a `end-2` (8px del borde interior); el
-                    `selectorIcon` de v2 iba a `end-3` (12px). Medido en los PNG: la tinta del chevron
-                    acaba a 17px del borde derecho en la referencia y a 13px con el valor de v3 — 4px
-                    de más. */
-                    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
-                // El hueco que v2 llenaba con su `emptyContent` (ver el bloque de
-                // `DEFAULT_TRANSLATIONS`). `renderEmptyState` es la vía de v3: el `ListBox` de
-                // react-aria solo pinta algo con la colección vacía si se le pasa, y envuelve
-                // el resultado en un `<div role="option" style="display:contents">`
-                // (`react-aria-components/dist/private/ListBox.mjs:222-228`), o sea que la caja
-                // que se ve es la nuestra.
-                , { 
-                    // El hueco que v2 llenaba con su `emptyContent` (ver el bloque de
-                    // `DEFAULT_TRANSLATIONS`). `renderEmptyState` es la vía de v3: el `ListBox` de
-                    // react-aria solo pinta algo con la colección vacía si se le pasa, y envuelve
-                    // el resultado en un `<div role="option" style="display:contents">`
-                    // (`react-aria-components/dist/private/ListBox.mjs:222-228`), o sea que la caja
-                    // que se ve es la nuestra.
-                    renderEmptyState: () => (jsxRuntime.jsx("div", { className: EMPTY_CONTENT_CLASS, children: emptyContent })), children: withItemIndicator(withV2ItemContent(withCollectionItemIds(children))) }) }), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: `${HELPER_CLASS$1} text-left`, children: errorMessage }))] }));
+                    : LABEL_OFFSET_CLASS[size], isInvalid ? INVALID_LABEL_CLASS$1 : "", classNames?.label), children: label })), usesAutocompleteShell ? (jsxRuntime.jsx(react.Autocomplete.Trigger, { className: triggerClassName, children: triggerContent })) : (jsxRuntime.jsx(react.Select.Trigger, { className: triggerClassName, children: triggerContent })), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: `${HELPER_CLASS$1} text-left`, children: description })), usesAutocompleteShell ? (jsxRuntime.jsx(react.Autocomplete.Popover, { className: classNames?.popoverContent, children: isSearchable ? (jsxRuntime.jsxs(react.Autocomplete.Filter, { filter: contains, inputValue: searchText, onInputChange: setSearchText, children: [jsxRuntime.jsx(react.SearchField, { autoFocus: true, "aria-label": resolvedSearchPlaceholder, fullWidth: true, children: jsxRuntime.jsxs(react.SearchField.Group, { className: SEARCH_GROUP_CLASS, children: [jsxRuntime.jsx(react.SearchField.SearchIcon, {}), jsxRuntime.jsx(react.SearchField.Input, { placeholder: resolvedSearchPlaceholder })] }) }), listBox] })) : (listBox) })) : (jsxRuntime.jsx(react.Select.Popover, { className: classNames?.popoverContent, children: listBox })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: `${HELPER_CLASS$1} text-left`, children: errorMessage }))] }));
     const commonProps = {
         id: selectId,
         name,
@@ -10037,7 +10501,14 @@ isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = fal
         isDisabled,
         isOpen,
         defaultOpen,
-        onOpenChange,
+        onOpenChange: handleOpenChange,
+        // v2 `closeOnSelect` → `shouldCloseOnSelect` de react-stately, que ya trae el mismo default
+        // por modo (`useSelectState.mjs:23`: cierra en `single`, se queda abierto en `multiple`).
+        // `undefined` deja ese default intacto.
+        ...(closeOnSelect === undefined
+            ? {}
+            : { shouldCloseOnSelect: closeOnSelect }),
+        onClear,
         fullWidth,
         // `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
@@ -10050,7 +10521,13 @@ isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = fal
         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),
+        fullWidth ? "w-full" : ROOT_MIN_WIDTH_CLASS, 
+        // Grupo con nombre para el borde de foco del disparador `Group` (ver
+        // `FOCUS_BORDER_GROUP_CLASS`). Sin la raíz `Autocomplete` no hace falta.
+        usesAutocompleteShell ? "group/aura-select" : "", 
+        // v2 `classNames.base`: la raíz, igual que `className`, y por eso delante de él (en v2
+        // los dos acababan en `slots.base({ class: cn(classNames?.base, className) })`).
+        classNames?.base, className),
     };
     if (selectionMode === "multiple") {
         // `disallowEmptySelection` en `multiple`: react-stately lo fuerza a `false` en este modo
@@ -10058,7 +10535,12 @@ isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = fal
         // la prop), así que la guarda la pone la fachada: el cambio que dejaría la selección vacía
         // no se propaga. Controlado basta con no avisar; sin controlar, la fachada lleva el valor.
         const ownsValue = disallowEmptySelection && selectedKeys === undefined;
-        return (jsxRuntime.jsx(react.Select, { ...commonProps, selectionMode: "multiple", value: ownsValue ? ownMultiple : toArray(selectedKeys), defaultValue: ownsValue ? undefined : toArray(defaultSelectedKeys), onChange: (keys) => {
+        const multipleProps = {
+            ...commonProps,
+            selectionMode: "multiple",
+            value: ownsValue ? ownMultiple : toArray(selectedKeys),
+            defaultValue: ownsValue ? undefined : toArray(defaultSelectedKeys),
+            onChange: (keys) => {
                 if (disallowEmptySelection && keys.length === 0) {
                     return;
                 }
@@ -10066,7 +10548,10 @@ isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = fal
                     setOwnMultiple(keys);
                 }
                 onSelectionChange?.(new Set(keys));
-            }, children: inner }));
+                onChange?.({ target: { name, value: keys.join(",") } });
+            },
+        };
+        return usesAutocompleteShell ? (jsxRuntime.jsx(react.Autocomplete, { ...multipleProps, children: inner })) : (jsxRuntime.jsx(react.Select, { ...multipleProps, children: inner }));
     }
     // `Array.from` cubre las tres formas de `SelectSelection` sin ramas nuevas: `"all"` sigue
     // cayendo a `null` (v3 no admite "todo" en selección única) y un array se lee igual que un
@@ -10081,7 +10566,17 @@ isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = fal
         : defaultSelectedKeys === "all"
             ? null
             : (Array.from(defaultSelectedKeys)[0] ?? null);
-    return (jsxRuntime.jsx(react.Select, { ...commonProps, value: singleValue, defaultValue: singleDefault, onChange: (key) => onSelectionChange?.(key == null ? new Set() : new Set([key])), children: inner }));
+    const singleProps = {
+        ...commonProps,
+        value: singleValue,
+        defaultValue: singleDefault,
+        onChange: (key) => {
+            onSelectionChange?.(key == null ? new Set() : new Set([key]));
+            // v2 llamaba a `onChange` después de `onSelectionChange` (ver `SelectChangeEvent`).
+            onChange?.({ target: { name, value: key == null ? "" : String(key) } });
+        },
+    };
+    return usesAutocompleteShell ? (jsxRuntime.jsx(react.Autocomplete, { ...singleProps, children: inner })) : (jsxRuntime.jsx(react.Select, { ...singleProps, children: inner }));
 };
 
 const defaultTranslations$4 = {
@@ -10576,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";
@@ -10618,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";
 
@@ -10649,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.
@@ -10657,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";
 /**
@@ -11122,6 +11676,28 @@ 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";
+// ── `isClearable` / `onClear` / `classNames.clearButton` (API v2, repuesta) ──────────────────
+//
+// El `Textarea` de v2 ES el `Input` con `isMultiline` (mismo `useInput`), así que heredaba su botón
+// de limpiar: `isClearable = !!onClear || originalProps.isClearable` y `handleClear` pone el valor
+// a "" (lo que dispara `onValueChange("")`), llama a `onClear` y devuelve el foco
+// (`@heroui/input@2.4.33`, `dist/chunk-KQW2TNLT.mjs`); Escape con valor también limpia. Uso real:
+// `campaigns/**/AudienceReachStep.tsx` en beweossmbs (`isClearable` + `onClear` +
+// `classNames.clearButton`), el único de los 33 `Textarea` de la app que lo pide.
+//
+// Posición, literal del `tv` de v2 (`@heroui/theme@2.4.15`, `dist/components/input.js`):
+//   · `isMultiline.clearButton`  → "absolute top-2 right-2 rtl:right-auto rtl:left-2 z-10": la X va
+//     ARRIBA a la derecha, no centrada como en el campo de una línea (aquí `end-2` = right/left
+//     según la dirección, lo mismo que el par `right-2 rtl:left-2`);
+//   · `isClearable.input`        → "pe-6": el texto deja sitio a la X aunque todavía no se vea,
+//     para que no salte al aparecer.
+// Lo relativo en v2 era el `inputWrapper`, que aquí no existe (el `<textarea>` es la caja), así que
+// se añade un envoltorio `relative` SOLO cuando el campo es limpiable: sin la prop el DOM no cambia.
+// El glifo es el `CloseButton` de v3, el mismo que ya usa la fachada `Input` (§9.1: verse como v3),
+// y `classNames.clearButton` va el último para que las clases del consumidor ganen.
+const CLEAR_WRAPPER_CLASS = "relative w-full";
+const CLEAR_BUTTON_CLASS = "absolute top-2 end-2 z-10 h-4 w-4 min-h-0 p-0.5";
+const CLEARABLE_FIELD_CLASS = "pe-6";
 // ── 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
@@ -11164,7 +11740,10 @@ minRows, rows,
 // llegue al DOM (antes viajaba en `...rest` y React avisaba de un atributo desconocido).
 maxRows = DEFAULT_MAX_ROWS, 
 // Compat v2: `true` apaga el autocrecimiento y deja la caja fija en su alto mínimo.
-disableAutosize = false, placeholder, isInvalid = false, isRequired = false, isDisabled = false, isReadOnly = false, 
+disableAutosize = false, placeholder, isClearable: isClearableProp = false, onClear, 
+// Sin efecto (ver `TextareaProps.labelPlacement`): fuera del spread para que no llegue
+// al `<textarea>` como atributo desconocido.
+labelPlacement: _labelPlacement, isInvalid = false, isRequired = false, isDisabled = false, isReadOnly = false, 
 // `fullWidth` por defecto a `true`: HeroUI v2 lo traía en sus `defaultVariants`
 // (verificado en el paquete v2 compilado, `dist/components/input.js`:
 // `defaultVariants: { variant:"flat", color:"default", size:"md", fullWidth:true, … }`, con
@@ -11172,7 +11751,7 @@ disableAutosize = false, placeholder, isInvalid = false, isRequired = false, isD
 // `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, name, style, ...rest }, ref) => {
+fullWidth = true, value, defaultValue, onChange, onValueChange, className, classNames, name, style, onKeyDown, ...rest }, ref) => {
     const generatedId = $8WNJc$react.useId();
     const textareaId = id || generatedId;
     const requestedRows = resolveRows(minRows, rows);
@@ -11209,6 +11788,46 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
         minHeight: `${fieldRows * SIZE_LINE_HEIGHT[size] + FIELD_PADDING_Y + FIELD_BORDER_Y}px`,
         ...style,
     };
+    // v2: `isClearable = !!onClear || originalProps.isClearable`.
+    const isClearable = isClearableProp || Boolean(onClear);
+    // Limpiar en modo NO controlado tiene que poder vaciar el valor, y el estado interno del
+    // `TextField` no se puede escribir desde fuera: en ese caso (y solo en ese) la fachada lleva
+    // el valor en su propio estado, igual que `Input.tsx`. Sin `isClearable` nada cambia: el
+    // valor no controlado sigue siendo del `TextField` (y su `reset`, de `useFormReset`).
+    const isControlled = value !== undefined;
+    const ownsValue = isClearable && !isControlled;
+    const [ownValue, setOwnValue] = $8WNJc$react.useState(defaultValue ?? "");
+    const currentValue = isControlled ? value : ownsValue ? ownValue : "";
+    const showClear = isClearable && !isDisabled && !isReadOnly && Boolean(currentValue);
+    // Orden de v2 (`handleClear`): el valor a "" —que en v2 disparaba `onValueChange`—, luego
+    // `onClear`. El `onChange` recibe un evento de valor vacío, como en `Input.tsx`, para que un
+    // consumidor que solo escucha `onChange` (p. ej. `field.onChange` de react-hook-form) se entere.
+    const clearValue = () => {
+        if (ownsValue) {
+            setOwnValue("");
+        }
+        onValueChange?.("");
+        if (onChange) {
+            const emptyEvent = {
+                target: { value: "" },
+                currentTarget: { value: "" },
+            };
+            onChange(emptyEvent);
+        }
+        onClear?.();
+    };
+    const handleClear = () => {
+        clearValue();
+        innerRef.current?.focus();
+    };
+    // Escape limpia, igual que v2 (con valor, limpiable y no de solo lectura). El `onKeyDown` del
+    // consumidor se llama primero.
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.key === "Escape" && showClear) {
+            clearValue();
+        }
+    };
     // El estado del valor lo actualiza el `TextField` con su propio `onChange` (llega al
     // `<textarea>` por contexto y `mergeProps` encadena los dos). Aquí: medir —el nodo ya trae
     // el valor nuevo, y en modo no controlado la fachada no se re-renderiza— y avisar.
@@ -11217,6 +11836,10 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
         onChange?.(event);
         onValueChange?.(event.target.value);
     };
+    const field = (jsxRuntime.jsx(react.TextArea, { ...rest, ref: setRefs, rows: fieldRows, style: fieldStyle, placeholder: placeholder, onChange: handleChange, onKeyDown: handleKeyDown, className: react.cn(SIZE_TEXT_CLASS[size], RESIZE_CLASS, RADIUS_CLASS$2[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", isClearable ? CLEARABLE_FIELD_CLASS : "", classNames?.input ?? classNames?.inputWrapper) }));
     return (
     // ── `value` / `defaultValue` van al `TextField`, NO al `<textarea>` ─────────────────────
     //
@@ -11231,13 +11854,12 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
     //     pero el estado interno del `TextField` seguía en "".
     // Ahora el `TextField` tiene el valor en los dos modos, y el `reset` del formulario también
     // es suyo (`useFormReset` devuelve el estado al `defaultValue`; el autosize lo escucha).
-    jsxRuntime.jsxs(react.TextField, { id: textareaId, value: value, defaultValue: defaultValue, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: react.cn(FIELD_STACK_CLASS, fullWidth ? "w-full" : "", 
+    jsxRuntime.jsxs(react.TextField, { id: textareaId, value: ownsValue ? ownValue : value, defaultValue: ownsValue ? undefined : defaultValue, 
+        // Solo cuando la fachada es dueña del valor (limpiable y no controlado).
+        onChange: ownsValue ? setOwnValue : undefined, 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: setRefs, rows: fieldRows, style: fieldStyle, placeholder: placeholder, onChange: handleChange, className: react.cn(SIZE_TEXT_CLASS[size], RESIZE_CLASS, RADIUS_CLASS$2[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 }))] }));
+        className), children: [label && (jsxRuntime.jsx(react.Label, { className: react.cn(LABEL_CLASS, isInvalid ? INVALID_LABEL_CLASS : "", classNames?.label), children: label })), isClearable ? (jsxRuntime.jsxs("div", { className: CLEAR_WRAPPER_CLASS, children: [field, showClear && (jsxRuntime.jsx(react.CloseButton, { "aria-label": "Limpiar", className: react.cn(CLEAR_BUTTON_CLASS, classNames?.clearButton), onPress: handleClear }))] })) : (field), 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";
 
@@ -12990,8 +13612,8 @@ const DrawerFiltersFooter = ({ onClearFilters, onCancel, onApplyFilters, transla
 /**
  * Header of the DrawerFilters with title and description.
  */
-const DrawerFiltersHeader = ({ title, description, }) => {
-    return (jsxRuntime.jsxs("div", { className: "px-6 pt-10", children: [jsxRuntime.jsx(H2, { className: "text-xl font-semibold text-foreground mb-2", children: title }), jsxRuntime.jsx(P, { className: "text-default-500", children: description })] }));
+const DrawerFiltersHeader = ({ titleId, title, description, }) => {
+    return (jsxRuntime.jsxs("div", { className: "px-6 pt-10", children: [jsxRuntime.jsx(H2, { id: titleId, className: "text-xl font-semibold text-foreground mb-2", children: title }), jsxRuntime.jsx(P, { className: "text-default-500", children: description })] }));
 };
 
 const NO_YEAR_CLASS = "[&_[data-type='year']]:hidden [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
@@ -13020,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",
@@ -13096,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") }))] }));
 };
 
 /**
@@ -13232,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]) })] })] })] }));
 };
 
 /**
@@ -13271,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)
@@ -13367,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;
         }
@@ -13387,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"
@@ -13396,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) => (
@@ -13413,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);
@@ -13507,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
@@ -13525,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) => {
@@ -13540,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
@@ -13564,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({
@@ -13636,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" }));
@@ -13670,6 +14303,11 @@ const NumberFilter = ({ filter, value, onChange }) => {
  */
 const DrawerFilters = ({ isOpen, onOpenChange, config, onApplyFilters, onClearFilters, onCancel, className, translations, initialValues, }) => {
     const [filterValues, setFilterValues] = $8WNJc$react.useState(initialValues ?? {});
+    // Nombre accesible del panel: su título. Con `Drawer.Root`, el `DialogTrigger` nombraba el
+    // diálogo con el id de su disparador (que aquí no existe); sin root nadie lo nombra y
+    // react-aria avisa en cada apertura («A dialog must have a title for accessibility», medido en
+    // jsdom). Mismo arreglo que `headerId` en la fachada `Drawer`.
+    const titleId = $8WNJc$react.useId();
     // Handle changes in individual filters
     const handleFilterChange = $8WNJc$react.useCallback((filterKey, value) => {
         setFilterValues((prev) => ({
@@ -13782,9 +14420,16 @@ const DrawerFilters = ({ isOpen, onOpenChange, config, onApplyFilters, onClearFi
         onApplyFilters(processedFilters);
         onOpenChange(false);
     }, [filterValues, config.data, onApplyFilters, onOpenChange]);
-    return (jsxRuntime.jsx(react.Drawer, { children: jsxRuntime.jsx(react.Drawer.Backdrop, { isOpen: isOpen, onOpenChange: handleOpenChange, isDismissable: false, children: jsxRuntime.jsx(react.Drawer.Content, { placement: "right", className: react.cn("drawer-filters", className), children: jsxRuntime.jsxs(react.Drawer.Dialog, { className: "w-full p-0 sm:max-w-md", children: [jsxRuntime.jsx(react.Drawer.CloseTrigger, {}), jsxRuntime.jsx(DrawerFiltersHeader, { title: config.title, description: config.description }), jsxRuntime.jsx(react.Drawer.Body, { className: "px-6 py-10", children: jsxRuntime.jsx("div", { className: "space-y-3", children: config.data.map((filter) => {
-                                    return (jsxRuntime.jsx(FilterSection, { filter: filter, translations: translations, value: filterValues[filter.key], onChange: (value) => handleFilterChange(filter.key, value) }, filter.key));
-                                }) }) }), jsxRuntime.jsx(DrawerFiltersFooter, { onClearFilters: handleClearFilters, onCancel: handleCancel, onApplyFilters: handleApplyFilters, translations: translations })] }) }) }) }));
+    // Sin `Drawer.Root` (el `DialogTrigger` de react-aria) a propósito, igual que la fachada
+    // `Drawer` (`src/components/drawer/Drawer.tsx`): aquí no hay disparador —lo abre el `isOpen`
+    // de la app— y un `DialogTrigger` sin hijo pulsable avisa en consola en CADA montaje, abierto o
+    // cerrado («A PressResponder was rendered without a pressable child», medido en jsdom y por
+    // beweossmbs con la .140). `Drawer.Backdrop` (`ModalOverlay`) ya crea su propio estado de
+    // overlay con `isOpen`/`onOpenChange` y calcula todos los slots de `drawerVariants()`, así que
+    // el root no aportaba nada.
+    return (jsxRuntime.jsx(react.Drawer.Backdrop, { isOpen: isOpen, onOpenChange: handleOpenChange, isDismissable: false, children: jsxRuntime.jsx(react.Drawer.Content, { placement: "right", className: react.cn("drawer-filters", className), children: jsxRuntime.jsxs(react.Drawer.Dialog, { "aria-labelledby": titleId, className: "w-full p-0 sm:max-w-md", children: [jsxRuntime.jsx(react.Drawer.CloseTrigger, {}), jsxRuntime.jsx(DrawerFiltersHeader, { titleId: titleId, title: config.title, description: config.description }), jsxRuntime.jsx(react.Drawer.Body, { className: "px-6 py-10", children: jsxRuntime.jsx("div", { className: "space-y-3", children: config.data.map((filter) => {
+                                return (jsxRuntime.jsx(FilterSection, { filter: filter, translations: translations, value: filterValues[filter.key], onChange: (value) => handleFilterChange(filter.key, value) }, filter.key));
+                            }) }) }), jsxRuntime.jsx(DrawerFiltersFooter, { onClearFilters: handleClearFilters, onCancel: handleCancel, onApplyFilters: handleApplyFilters, translations: translations })] }) }) }));
 };
 DrawerFilters.displayName = "DrawerFilters";
 
@@ -15927,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";
 
@@ -16030,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 })) }) }) }));
@@ -16121,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
@@ -16929,21 +17583,66 @@ function hasIndicator(children) {
         return node.type === $8WNJc$react.Fragment && hasIndicator(node.props.children);
     });
 }
+// ---------------------------------------------------------------------------------------------
+// `size` de v2 → medidas de pestaña de v2
+// ---------------------------------------------------------------------------------------------
+/**
+ * Medidas de pestaña por `size`, **copiadas del oráculo** `@heroui/theme@2.4.15`
+ * `dist/components/tabs.js` (slot `tab`, `px-3` en la base y `size.{sm,md,lg}.tab` para la altura y
+ * el cuerpo), traducidas a clases de Tailwind 4 con el MISMO valor. Las `text-tiny` /
+ * `text-small` / `text-medium` de v2 son del plugin `heroui()` y en TW4 no existen
+ * (`default-layout.js:32-40`):
+ *
+ *   | size | v2                     | aquí           | cuerpo / interlineado |
+ *   |------|------------------------|----------------|-----------------------|
+ *   | sm   | `h-7 text-tiny` + px-3 | `h-7 px-3 text-xs`   | 0.75rem / 1rem   |
+ *   | md   | `h-8 text-small` + px-3 | `h-8 px-3 text-sm`  | 0.875rem / 1.25rem |
+ *   | lg   | `h-9 text-medium` + px-3 | `h-9 px-3 text-base` | 1rem / 1.5rem   |
+ *
+ * Por qué se mapea, cuando `radius` y `color` se ignoran (§9.1): `size` no es estética, es
+ * TAMAÑO, y descartarlo provoca un desbordamiento medido. linda-business embebido en el host v1 con
+ * la `.140`: con `size="sm"` descartado, el texto pasaba de 12 px a 14 px y cada pestaña salía de 6
+ * a 17 px más ancha. El carril medía 352 px en una columna de 287 px y el chevron del scroller
+ * tapaba la última pestaña. smbs tiene 10 `size="sm"`.
+ *
+ * Lo que NO se copia: el peso (v3 pone `font-medium`, v2 no ponía nada) y el radio (`rounded-small`),
+ * que siguen como v3 por §9.1. Tampoco el `py-1` de v2: con altura fija y `items-center` no
+ * cambia nada.
+ *
+ * Las clases van ANTES de `classNames.tab` y del `className` del `Tab` en un `cn`
+ * (tailwind-merge): lo de la app gana. El `h-7 px-2` de linda-business sigue mandando sobre el
+ * `px-3`. Clases literales en el fuente (no construidas), para que Tailwind las genere.
+ */
+const TAB_SIZE_CLASS = {
+    sm: "h-7 px-3 text-xs",
+    md: "h-8 px-3 text-sm",
+    lg: "h-9 px-3 text-base",
+};
+/**
+ * El `size` del root llega a los `Tabs.Tab` de la forma v3 por contexto, porque esas pestañas las
+ * escribe la app dentro de su `Tabs.List` y la fachada no las recorre. Sin `size` el valor es
+ * `undefined` y la pestaña sale byte a byte como antes.
+ */
+const TabSizeContext = $8WNJc$react.createContext(undefined);
 const TabFacade = ({ children: ownChildren, title, 
 // `titleValue` es de v2 y no tiene destino en v3: se consume para que no llegue al DOM.
 titleValue: _titleValue, ...props }) => {
     // En la forma v3 la etiqueta son los `children`; si solo viene el `title` de v2 (un `Tab` con
     // `title` dentro de `Tabs.List`), hace de etiqueta. Con los dos, mandan los `children`.
     const children = ownChildren ?? title;
+    const sizeClass = $8WNJc$react.useContext(TabSizeContext);
+    const tabProps = sizeClass
+        ? { ...props, className: react.cn(sizeClass, props.className) }
+        : props;
     // `children` como función es la forma de render props de react-aria (`TabRenderProps`). No se
     // puede inspeccionar, y menos aún combinar con un hermano —React rechaza una función como
     // hijo junto a un elemento—, así que se pasa tal cual. Un consumidor que la use monta el
     // indicador él (es la vía de escape de este caso). Exposición hoy: 0 usos en los 6 repos.
     if (typeof children === "function") {
-        return jsxRuntime.jsx(react.Tabs.Tab, { ...props, children: children });
+        return jsxRuntime.jsx(react.Tabs.Tab, { ...tabProps, children: children });
     }
     if (hasIndicator(children)) {
-        return jsxRuntime.jsx(react.Tabs.Tab, { ...props, children: children });
+        return jsxRuntime.jsx(react.Tabs.Tab, { ...tabProps, children: children });
     }
     // El indicador va PRIMERO por legibilidad del marcado, no por efecto: es `position:absolute`
     // con `z-index:-1`, o sea fuera del flujo y detrás del texto, así que el orden no cambia el
@@ -16953,7 +17652,7 @@ titleValue: _titleValue, ...props }) => {
     // `{children}` se pasa SIN normalizar (nada de `Children.toArray`) para no reescribir las
     // keys del consumidor: hacerlo cambiaría la reconciliación de una lista de pestañas
     // condicional. Verificado en el navegador que la anidación no produce aviso de key.
-    return (jsxRuntime.jsxs(react.Tabs.Tab, { ...props, children: [jsxRuntime.jsx(react.Tabs.Indicator, {}), children] }));
+    return (jsxRuntime.jsxs(react.Tabs.Tab, { ...tabProps, children: [jsxRuntime.jsx(react.Tabs.Indicator, {}), children] }));
 };
 TabFacade.displayName = "Aurora.Tab";
 /**
@@ -17064,8 +17763,10 @@ function hasPanelContent(children) {
 }
 const TabsFacade = (allProps) => {
     const { children, classNames, className, variant, fullWidth, items, isVertical, placement, orientation, destroyInactiveTabPanel = true, 
+    // v2: medidas de pestaña (ver `TAB_SIZE_CLASS`).
+    size, 
     // Sin equivalente en v3: se consumen para que no lleguen al DOM (ver README, «Props v2»).
-    size: _size, radius: _radius, color: _color, disableAnimation: _disableAnimation, disableCursorAnimation: _disableCursorAnimation, shouldSelectOnPressUp: _shouldSelectOnPressUp, ...rest } = allProps;
+    radius: _radius, color: _color, disableAnimation: _disableAnimation, disableCursorAnimation: _disableCursorAnimation, shouldSelectOnPressUp: _shouldSelectOnPressUp, ...rest } = allProps;
     const v3Variant = toV3Variant(variant);
     const v3Orientation = orientation ??
         (isVertical || placement === "start" || placement === "end"
@@ -17126,7 +17827,7 @@ const TabsFacade = (allProps) => {
         // `.tabs[data-orientation="horizontal"] > .tabs__list-container { align-self: start }` de
         // neutralize, que no hace falta: dentro de una fila el carril ya mide su contenido.
         const orientationAttr = v3Orientation ?? "horizontal";
-        return (jsxRuntime.jsxs(react.Tabs, { ...rootProps, orientation: v3Orientation, variant: v3Variant, children: [jsxRuntime.jsx("div", { className: react.cn("flex", v3Variant === "secondary" && "tabs--secondary", fullWidth && "w-full", classNames?.base, className), "data-orientation": orientationAttr, "data-slot": "tabs-base", children: jsxRuntime.jsx(react.Tabs.ListContainer, { className: react.cn(fullWidth && "w-full"), children: jsxRuntime.jsx(react.Tabs.List, { "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: react.cn(classNames?.tabList), children: tabs.map(({ id, title, tabClassName, tabProps }) => ($8WNJc$react.createElement(react.Tabs.Tab, { ...tabProps, className: react.cn(classNames?.tab, tabClassName), id: id, key: id },
+        return (jsxRuntime.jsxs(react.Tabs, { ...rootProps, orientation: v3Orientation, variant: v3Variant, children: [jsxRuntime.jsx("div", { className: react.cn("flex", v3Variant === "secondary" && "tabs--secondary", fullWidth && "w-full", classNames?.base, className), "data-orientation": orientationAttr, "data-slot": "tabs-base", children: jsxRuntime.jsx(react.Tabs.ListContainer, { className: react.cn(fullWidth && "w-full"), children: jsxRuntime.jsx(react.Tabs.List, { "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: react.cn(classNames?.tabList), children: tabs.map(({ id, title, tabClassName, tabProps }) => ($8WNJc$react.createElement(react.Tabs.Tab, { ...tabProps, className: react.cn(size && TAB_SIZE_CLASS[size], classNames?.tab, tabClassName), id: id, key: id },
                                 jsxRuntime.jsx(react.Tabs.Indicator, { className: react.cn(classNames?.cursor) }),
                                 classNames?.tabContent ? (jsxRuntime.jsx("span", { className: classNames.tabContent, children: title })) : (title)))) }) }) }), tabs
                     .filter(({ panel }) => hasPanelContent(panel))
@@ -17145,7 +17846,9 @@ const TabsFacade = (allProps) => {
         orientation: v3Orientation,
         variant: v3Variant,
     };
-    return jsxRuntime.jsx(TabsV3, { ...v3Props, children: v3Children });
+    const v3Tabs = jsxRuntime.jsx(TabsV3, { ...v3Props, children: v3Children });
+    // Sin `size` no se monta el provider: el árbol queda idéntico al de antes.
+    return size ? (jsxRuntime.jsx(TabSizeContext.Provider, { value: TAB_SIZE_CLASS[size], children: v3Tabs })) : (v3Tabs);
 };
 const TabsV3 = ({ children, ...props }) => {
     const nodes = $8WNJc$react.Children.toArray(children);