kaizen-lib 0.2.6 → 0.2.8

package/README.md

@@ -242,7 +242,9 @@ Sin `title` no hay nombre accesible propio — pasá `ariaLabel`. `size` (`sm`|`
 fija el ancho máximo del panel; `maxWidth` lo pisa con un valor explícito. `disableClose`
 bloquea la X, el overlay y `Escape` a la vez — para una operación en curso, no para "no
 quiero que cierre nunca". `dismissOnOverlay={false}` sólo desactiva el click afuera, para
-un formulario a medio llenar que sigue queriendo cerrar con la X o `Escape`.
+un formulario a medio llenar que sigue queriendo cerrar con la X o `Escape`. `closeLabel`
+(default `'Cerrar'`) es el nombre accesible de la X — mismo criterio que `etiqueta` de
+`LangSelector`: un consumidor con más de un idioma lo pisa, el resto no lo toca.
 
 Lo que **no** trae: un `placement` lateral (drawer) y un padding compacto de cuerpo son
 casos de un solo consumidor cada uno (`components/ui/Dialog` de valle-verde) — se resuelven

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaizen-lib",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Tokens y componentes compartidos entre los fronts de Kaizen.",
   "license": "MIT",
   "author": "Nicolás Sandobal",

package/src/ui/Modal.tsx

@@ -111,11 +111,20 @@ const Descripcion = styled.p`
   color: ${fg.muted};
 `;
 
-const Body = styled.div<{ $flush: boolean }>`
+const Body = styled.div<{ $flush: boolean; $conFooter: boolean }>`
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
-  padding: ${({ $flush }) => ($flush ? space[6] : `0 ${space[6]} ${space[2]}`)};
+  padding: ${({ $flush, $conFooter }) => {
+    const arriba = $flush ? space[6] : '0';
+    /* Con footer, el aire de abajo lo pone el footer (su propio padding-top);
+       duplicarlo acá deja un salto más grande que el de los costados. Sin
+       footer, el cuerpo es lo último del panel y necesita el mismo aire que
+       los costados — dejarlo en el valor reducido pensado para el otro caso
+       deja un borde inferior visiblemente más fino que el resto. */
+    const abajo = $conFooter ? space[2] : space[6];
+    return `${arriba} ${space[6]} ${abajo}`;
+  }};
 `;
 
 const Footer = styled.footer`
@@ -176,6 +185,12 @@ type Props = {
   maxWidth?: string;
   /** Botón de cierre en la esquina. Default `true`. */
   showClose?: boolean;
+  /**
+   * Nombre accesible del botón de cierre. Default `'Cerrar'` — mismo criterio
+   * que `LangSelector.etiqueta`: un consumidor con más de un idioma lo pisa,
+   * el resto no necesita tocarlo.
+   */
+  closeLabel?: string;
   /** Click afuera del panel cierra. Default `true`. */
   dismissOnOverlay?: boolean;
   /** Operación en curso: ni la X, ni el overlay, ni Escape cierran. */
@@ -208,6 +223,7 @@ export function Modal({
   size = 'md',
   maxWidth,
   showClose = true,
+  closeLabel = 'Cerrar',
   dismissOnOverlay = true,
   disableClose = false,
   ariaLabel,
@@ -318,7 +334,7 @@ export function Modal({
         onKeyDown={manejarTab}
       >
         {showClose ? (
-          <Cerrar type="button" onClick={onClose} disabled={disableClose} aria-label="Cerrar">
+          <Cerrar type="button" onClick={onClose} disabled={disableClose} aria-label={closeLabel}>
             ×
           </Cerrar>
         ) : null}
@@ -332,7 +348,7 @@ export function Modal({
           </Header>
         ) : null}
 
-        <Body $flush={!title}>{children}</Body>
+        <Body $flush={!title} $conFooter={Boolean(footer)}>{children}</Body>
 
         {footer ? <Footer>{footer}</Footer> : null}
       </Panel>