danielgm-ui 0.4.3 → 0.4.4

package/dist/command-palette.js

@@ -8,7 +8,9 @@ import { cx } from './utils.js';
 import { ScrollHints } from './internal/scroll-hints.js';
 export function CommandPalette({ open, onOpenChange, actions, title, placeholder, emptyMessage, shortcut = false, locale = 'en', closeLabel, className, }) {
     const searchInput = useRef(null);
+    const results = useRef(null);
     const interacted = useRef(false);
+    const [search, setSearch] = useState('');
     const [active, setActive] = useState('');
     const [inputMode, setInputMode] = useState('idle');
     useEffect(() => {
@@ -18,11 +20,19 @@ export function CommandPalette({ open, onOpenChange, actions, title, placeholder
             setInputMode('idle');
             return;
         }
+        setSearch('');
         // Modal registra primero el disparador para devolverle el foco al cerrar.
         // En el siguiente frame llevamos el foco al buscador sin alterar ese destino.
         const frame = requestAnimationFrame(() => searchInput.current?.focus({ preventScroll: true }));
         return () => cancelAnimationFrame(frame);
     }, [open]);
+    useEffect(() => {
+        // cmdk filtra y reordena las filas antes de este efecto. Cada consulta empieza
+        // arriba, incluso si conserva la misma acción activa; las flechas y la rueda
+        // mantienen su desplazamiento mientras no cambie el texto de búsqueda.
+        if (results.current)
+            results.current.scrollTop = 0;
+    }, [search]);
     const latest = useRef({ open, onOpenChange });
     latest.current = { open, onOpenChange };
     useEffect(() => {
@@ -76,10 +86,11 @@ export function CommandPalette({ open, onOpenChange, actions, title, placeholder
                     interacted.current = true;
                     setInputMode('keyboard');
                 }
-            }, children: [_jsx(Command.Input, { ref: searchInput, onValueChange: () => {
+            }, children: [_jsx(Command.Input, { ref: searchInput, onValueChange: (value) => {
                         interacted.current = true;
                         setInputMode('keyboard');
-                    }, className: "dgm-command-input", "aria-label": placeholder ?? (es ? 'Buscar acciones' : 'Search actions'), placeholder: placeholder ?? (es ? 'Buscar acciones…' : 'Search actions…') }), _jsx(ScrollHints, { children: _jsxs(Command.List, { className: "dgm-command-list", children: [_jsx(Command.Empty, { className: "dgm-command-empty", children: emptyMessage ?? (es ? 'No hay acciones coincidentes.' : 'No matching actions.') }), groups.map(([group, groupActions]) => (_jsx(Command.Group, { heading: group || undefined, children: groupActions.map((action) => (_jsxs(Command.Item, { className: "dgm-command-item", value: action.id, keywords: [action.label, ...(action.keywords ?? [])], disabled: action.disabled, onPointerLeave: () => {
+                        setSearch(value);
+                    }, className: "dgm-command-input", "aria-label": placeholder ?? (es ? 'Buscar acciones' : 'Search actions'), placeholder: placeholder ?? (es ? 'Buscar acciones…' : 'Search actions…') }), _jsx(ScrollHints, { children: _jsxs(Command.List, { ref: results, className: "dgm-command-list", children: [_jsx(Command.Empty, { className: "dgm-command-empty", children: emptyMessage ?? (es ? 'No hay acciones coincidentes.' : 'No matching actions.') }), groups.map(([group, groupActions]) => (_jsx(Command.Group, { heading: group || undefined, children: groupActions.map((action) => (_jsxs(Command.Item, { className: "dgm-command-item", value: action.id, keywords: [action.label, ...(action.keywords ?? [])], disabled: action.disabled, onPointerLeave: () => {
                                         // El hover termina al salir de la fila, aunque el puntero siga en el modal.
                                         if (inputMode === 'pointer')
                                             setActive('');

package/dist/data-table.js

@@ -117,5 +117,5 @@ export function DataTable({ data, columns, getRowId, caption, sorting, sortable
                             ? es
                                 ? 'Cargando…'
                                 : 'Loading…'
-                            : `${filtered.length} ${es ? 'resultados' : 'results'}${selectable ? ` · ${selectedCount} ${es ? 'seleccionados' : 'selected'}` : ''}` }), (!hidePaginationOnSinglePage || pageCount > 1) && (_jsx(Pagination, { page: current, pageCount: pageCount, onPageChange: changePage, disabled: loading, locale: locale }))] })] }));
+                            : `${filtered.length} ${es ? (filtered.length === 1 ? 'resultado' : 'resultados') : 'results'}${selectable ? ` · ${selectedCount} ${es ? 'seleccionados' : 'selected'}` : ''}` }), (!hidePaginationOnSinglePage || pageCount > 1) && (_jsx(Pagination, { page: current, pageCount: pageCount, onPageChange: changePage, disabled: loading, locale: locale }))] })] }));
 }

package/dist/display.d.ts

@@ -4,7 +4,8 @@ export type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 /** Atributos de span con un tono semántico opcional. */
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /**
-     * Paleta de la etiqueta.
+     * Paleta de la etiqueta; el CSS público sigue color-scheme del contenedor.
+     * Los tokens --dgm-tone-<tono>-<fg|bg|border>-<light|dark> permiten personalizarla.
      * @defaultValue 'neutral'
      */
     tone?: Tone;
@@ -30,7 +31,8 @@ export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     /** Anima la entrada al montar un aviso dinámico. Desactivado para contenido estático. @defaultValue false */
     animate?: boolean;
     /**
-     * Intención visual del aviso.
+     * Intención visual del aviso. Comparte con Badge las paletas según color-scheme
+     * y los tokens --dgm-tone-<tono>-<fg|bg|border>-<light|dark>.
      * @defaultValue 'info'
      */
     tone?: Exclude<Tone, 'neutral'>;

package/dist/drawer.js

@@ -3,6 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Diálogo anclado a un borde. Comparte el contrato de Modal y añade side. */
 import { useId, useRef } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
+import { InternalTooltip } from './tooltip.js';
+import { TooltipPolicy } from './internal/tooltip-policy.js';
 import { restoreFocus } from './internal/focus.js';
 import { CloseIcon } from './internal/icons.js';
 import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
@@ -13,18 +15,23 @@ export function Drawer({ open, onOpenChange, title, description, children, foote
     const scrollContainer = useRef(null);
     const returnFocus = useRef(null);
     const descriptionId = useId();
-    return (_jsx(OverlayLayerProvider, { depth: depth, scrollContainer: scrollContainer, children: _jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "dgm-modal-overlay", style: layerStyle }), _jsxs(Dialog.Content, { ref: scrollContainer, style: layerStyle, className: cx('dgm-drawer', `dgm-drawer--${side}`, className), "aria-describedby": hasContent(description) ? descriptionId : undefined, onOpenAutoFocus: () => {
-                            returnFocus.current =
-                                document.activeElement instanceof HTMLElement ? document.activeElement : null;
-                        }, onCloseAutoFocus: (event) => {
-                            if (returnFocus.current?.isConnected) {
-                                event.preventDefault();
-                                restoreFocus(returnFocus.current);
-                            }
-                        }, onPointerDownOutside: (event) => {
-                            if (!closeOnOverlayClick)
-                                event.preventDefault();
-                        }, children: [_jsxs("header", { className: "dgm-modal-header", children: [_jsx(Dialog.Title, { className: "dgm-modal-title", children: title }), hasContent(description) && (_jsx(Dialog.Description, { id: descriptionId, className: "dgm-description", children: description })), _jsx(Dialog.Close, { className: "dgm-icon-close", "aria-label": closeLabel, children: _jsx(CloseIcon, {}) })] }), _jsx("div", { className: "dgm-modal-body", children: children }), hasContent(footer) && _jsx("footer", { className: "dgm-modal-footer", children: footer })] })] }) }) }));
+    const autoFocusing = useRef(false);
+    return (_jsx(OverlayLayerProvider, { depth: depth, scrollContainer: scrollContainer, children: _jsx(TooltipPolicy.Provider, { value: { autoFocusing, depth, dismiss: () => onOpenChange(false) }, children: _jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "dgm-modal-overlay", style: layerStyle }), _jsxs(Dialog.Content, { ref: scrollContainer, style: layerStyle, className: cx('dgm-drawer', `dgm-drawer--${side}`, className), "aria-describedby": hasContent(description) ? descriptionId : undefined, onOpenAutoFocus: () => {
+                                autoFocusing.current = true;
+                                queueMicrotask(() => {
+                                    autoFocusing.current = false;
+                                });
+                                returnFocus.current =
+                                    document.activeElement instanceof HTMLElement ? document.activeElement : null;
+                            }, onCloseAutoFocus: (event) => {
+                                if (returnFocus.current?.isConnected) {
+                                    event.preventDefault();
+                                    restoreFocus(returnFocus.current);
+                                }
+                            }, onPointerDownOutside: (event) => {
+                                if (!closeOnOverlayClick)
+                                    event.preventDefault();
+                            }, children: [_jsxs("header", { className: "dgm-modal-header", children: [_jsx(Dialog.Title, { className: "dgm-modal-title", children: title }), hasContent(description) && (_jsx(Dialog.Description, { id: descriptionId, className: "dgm-description", children: description })), _jsx(InternalTooltip, { content: closeLabel, children: _jsx(Dialog.Close, { className: "dgm-icon-close", "aria-label": closeLabel, children: _jsx(CloseIcon, {}) }) })] }), _jsx("div", { className: "dgm-modal-body", children: children }), hasContent(footer) && _jsx("footer", { className: "dgm-modal-footer", children: footer })] })] }) }) }) }));
 }
 /** Alias de Drawer: Sheet comparte comportamiento y propiedades. */
 export const Sheet = Drawer;

package/dist/fields.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InternalTooltip } from './tooltip.js';
 /**
  * Campos de texto y selección con un contrato común de etiquetas, ayuda y errores.
  * Este módulo agrupa la infraestructura compartida y sus tres controles nativos.
@@ -42,10 +43,17 @@ function Field({ id, label, description, error, wrapperClassName, required, chil
 export const Input = forwardRef(function Input({ label, description, error, wrapperClassName, className, id, required, type = 'text', disabled, visible, defaultVisible = false, onVisibleChange, locale = 'en', 'aria-describedby': describedBy, 'aria-invalid': invalid, ...props }, ref) {
     const field = useField(id, description, error, describedBy);
     const [shown, changeVisibility] = useControllable(visible, defaultVisible, onVisibleChange);
+    const visibilityLabel = locale === 'es'
+        ? shown
+            ? 'Ocultar contraseña'
+            : 'Mostrar contraseña'
+        : shown
+            ? 'Hide password'
+            : 'Show password';
     const password = type === 'password';
     // El mismo nodo input conserva valor, ref y validación al cambiar su presentación.
     const control = (_jsx("input", { ...props, ...field, ref: ref, required: required, disabled: disabled, type: password && shown ? 'text' : type, "aria-invalid": hasContent(error) ? true : invalid, className: cx('dgm-input', password && 'dgm-input--password', className) }));
-    return (_jsx(Field, { label, description, error, wrapperClassName, required, id: field.id, children: _jsxs("div", { className: "dgm-input-control", children: [control, password && (_jsx("button", { type: "button", className: "dgm-password-toggle", disabled: disabled, "aria-label": locale === 'es' ? 'Mostrar contraseña' : 'Show password', "aria-pressed": shown, "aria-controls": field.id, onClick: () => changeVisibility(!shown), children: shown ? _jsx(EyeOffIcon, {}) : _jsx(EyeIcon, {}) }))] }) }));
+    return (_jsx(Field, { label, description, error, wrapperClassName, required, id: field.id, children: _jsxs("div", { className: "dgm-input-control", children: [control, password && (_jsx(InternalTooltip, { content: visibilityLabel, children: _jsx("button", { type: "button", className: "dgm-password-toggle", disabled: disabled, "aria-label": visibilityLabel, "aria-pressed": shown, "aria-controls": field.id, onClick: () => changeVisibility(!shown), children: shown ? _jsx(EyeOffIcon, {}) : _jsx(EyeIcon, {}) }) }))] }) }));
 });
 /**
  * Entrada de varias líneas con ref al HTMLTextAreaElement y altura inicial de 4 filas.

package/dist/internal/tooltip-policy.d.ts

@@ -0,0 +1,11 @@
+/** Política local de autofocus y Escape; los portales conservan el contexto React. */
+import { type RefObject } from 'react';
+export declare const TooltipPolicy: import("react").Context<{
+    /** Solo durante el autofocus síncrono de Radix; se libera en la siguiente microtarea. */
+    autoFocusing?: RefObject<boolean>;
+    /** Toast tiene una base propia que sus ayudas portadas también necesitan. */
+    layerBase?: string;
+    /** Profundidad del propietario: un panel intermedio conserva su propio Escape. */
+    depth?: number;
+    dismiss?: () => void;
+}>;

package/dist/internal/tooltip-policy.js

@@ -0,0 +1,4 @@
+'use client';
+/** Política local de autofocus y Escape; los portales conservan el contexto React. */
+import { createContext } from 'react';
+export const TooltipPolicy = createContext({});

package/dist/modal.d.ts

@@ -12,7 +12,7 @@ export interface ModalProps {
     children: ReactNode;
     /** Acciones que permanecen fuera del área desplazable. */
     footer?: ReactNode;
-    /** Etiqueta accesible localizada del botón X. @defaultValue 'Close dialog' */
+    /** Nombre accesible y Tooltip localizado del botón X. @defaultValue 'Close dialog' */
     closeLabel?: string;
     /** Permite cerrar al pulsar fuera. Escape y X siguen disponibles. @defaultValue true */
     closeOnOverlayClick?: boolean;

package/dist/modal.js

@@ -4,6 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CloseIcon } from './internal/icons.js';
 import { useId, useRef } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
+import { InternalTooltip } from './tooltip.js';
+import { TooltipPolicy } from './internal/tooltip-policy.js';
 import { restoreFocus } from './internal/focus.js';
 import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
 import { cx, hasContent } from './utils.js';
@@ -13,19 +15,24 @@ export function Modal({ open, onOpenChange, title, description, children, footer
     const scrollContainer = useRef(null);
     const returnFocus = useRef(null);
     const descriptionId = useId();
-    return (_jsx(OverlayLayerProvider, { depth: depth, scrollContainer: scrollContainer, children: _jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "dgm-modal-overlay", style: layerStyle }), _jsxs(Dialog.Content, { ref: scrollContainer, style: layerStyle, className: cx('dgm-modal', className), "aria-describedby": hasContent(description) ? descriptionId : undefined, onOpenAutoFocus: () => {
-                            // Se captura antes de que Radix enfoque el contenido, incluso sin Dialog.Trigger.
-                            returnFocus.current =
-                                document.activeElement instanceof HTMLElement ? document.activeElement : null;
-                        }, onCloseAutoFocus: (event) => {
-                            if (returnFocus.current?.isConnected) {
-                                event.preventDefault();
-                                // Restaurar el foco no debe desplazar la página hacia el disparador,
-                                // especialmente si está dentro de una cabecera sticky.
-                                restoreFocus(returnFocus.current);
-                            }
-                        }, onPointerDownOutside: (event) => {
-                            if (!closeOnOverlayClick)
-                                event.preventDefault();
-                        }, children: [_jsxs("header", { className: "dgm-modal-header", children: [_jsx(Dialog.Title, { className: "dgm-modal-title", children: title }), hasContent(description) && (_jsx(Dialog.Description, { id: descriptionId, className: "dgm-description", children: description })), _jsx(Dialog.Close, { className: "dgm-icon-close", "aria-label": closeLabel, children: _jsx(CloseIcon, {}) })] }), _jsx("div", { className: "dgm-modal-body", children: children }), hasContent(footer) && _jsx("footer", { className: "dgm-modal-footer", children: footer })] })] }) }) }));
+    const autoFocusing = useRef(false);
+    return (_jsx(OverlayLayerProvider, { depth: depth, scrollContainer: scrollContainer, children: _jsx(TooltipPolicy.Provider, { value: { autoFocusing, depth, dismiss: () => onOpenChange(false) }, children: _jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "dgm-modal-overlay", style: layerStyle }), _jsxs(Dialog.Content, { ref: scrollContainer, style: layerStyle, className: cx('dgm-modal', className), "aria-describedby": hasContent(description) ? descriptionId : undefined, onOpenAutoFocus: () => {
+                                autoFocusing.current = true;
+                                queueMicrotask(() => {
+                                    autoFocusing.current = false;
+                                });
+                                // Se captura antes de que Radix enfoque el contenido, incluso sin Dialog.Trigger.
+                                returnFocus.current =
+                                    document.activeElement instanceof HTMLElement ? document.activeElement : null;
+                            }, onCloseAutoFocus: (event) => {
+                                if (returnFocus.current?.isConnected) {
+                                    event.preventDefault();
+                                    // Restaurar el foco no debe desplazar la página hacia el disparador,
+                                    // especialmente si está dentro de una cabecera sticky.
+                                    restoreFocus(returnFocus.current);
+                                }
+                            }, onPointerDownOutside: (event) => {
+                                if (!closeOnOverlayClick)
+                                    event.preventDefault();
+                            }, children: [_jsxs("header", { className: "dgm-modal-header", children: [_jsx(Dialog.Title, { className: "dgm-modal-title", children: title }), hasContent(description) && (_jsx(Dialog.Description, { id: descriptionId, className: "dgm-description", children: description })), _jsx(InternalTooltip, { content: closeLabel, children: _jsx(Dialog.Close, { className: "dgm-icon-close", "aria-label": closeLabel, children: _jsx(CloseIcon, {}) }) })] }), _jsx("div", { className: "dgm-modal-body", children: children }), hasContent(footer) && _jsx("footer", { className: "dgm-modal-footer", children: footer })] })] }) }) }) }));
 }

package/dist/pagination.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon } from './internal/icons.js';
 import { useEffect, useRef, useState } from 'react';
 import { fitPaginationPages } from './internal/pagination.js';
+import { InternalTooltip } from './tooltip.js';
 import { Button } from './button.js';
 import { cx } from './utils.js';
 /** Número acotado de botones incluso con miles de páginas; los saltos no son interactivos. */
@@ -53,8 +54,8 @@ export function Pagination({ page, pageCount, onPageChange, siblings = 1, disabl
         ? fitPaginationPages(current, count, slots)
         : [...pages].filter((value) => value > 0 && value <= count).sort((a, b) => a - b);
     const es = locale === 'es';
-    return (_jsxs("nav", { ref: navigation, style: { '--dgm-page-digits': String(count).length }, "aria-label": label ?? (es ? 'Paginación' : 'Pagination'), className: cx('dgm-pagination', `dgm-pagination--${size}`, fullWidth && 'dgm-pagination--full', className), children: [_jsx(Button, { ref: previousButton, iconOnly: true, size: size, variant: "outline", disabled: disabled || current <= 1 || count === 0, onClick: () => onPageChange(current - 1), "aria-label": es ? 'Página anterior' : 'Previous page', children: _jsx(ChevronLeftIcon, {}) }), ordered.map((value, index) => (_jsxs("span", { className: "dgm-pagination-part", children: [index > 0 && value - ordered[index - 1] > 1 && (_jsx("span", { className: "dgm-pagination-gap", "aria-hidden": "true", children: "\u2026" })), _jsx(Button, { ref: value === ordered[ordered.length - 1] ? lastPageButton : undefined, size: size, variant: value === current ? 'primary' : 'ghost', "aria-label": `${es ? 'Página' : 'Page'} ${value}`, "aria-current": value === current ? 'page' : undefined, disabled: disabled, onClick: () => {
+    return (_jsxs("nav", { ref: navigation, style: { '--dgm-page-digits': String(count).length }, "aria-label": label ?? (es ? 'Paginación' : 'Pagination'), className: cx('dgm-pagination', `dgm-pagination--${size}`, fullWidth && 'dgm-pagination--full', className), children: [_jsx(InternalTooltip, { content: es ? 'Página anterior' : 'Previous page', children: _jsx(Button, { ref: previousButton, iconOnly: true, size: size, variant: "outline", disabled: disabled || current <= 1 || count === 0, onClick: () => onPageChange(current - 1), "aria-label": es ? 'Página anterior' : 'Previous page', children: _jsx(ChevronLeftIcon, {}) }) }), ordered.map((value, index) => (_jsxs("span", { className: "dgm-pagination-part", children: [index > 0 && value - ordered[index - 1] > 1 && (_jsx("span", { className: "dgm-pagination-gap", "aria-hidden": "true", children: "\u2026" })), _jsx(Button, { ref: value === ordered[ordered.length - 1] ? lastPageButton : undefined, size: size, variant: value === current ? 'primary' : 'ghost', "aria-label": `${es ? 'Página' : 'Page'} ${value}`, "aria-current": value === current ? 'page' : undefined, disabled: disabled, onClick: () => {
                             if (value !== current)
                                 onPageChange(value);
-                        }, children: value })] }, value))), _jsx(Button, { iconOnly: true, size: size, variant: "outline", disabled: disabled || current >= count || count === 0, onClick: () => onPageChange(current + 1), "aria-label": es ? 'Página siguiente' : 'Next page', children: _jsx(ChevronRightIcon, {}) })] }));
+                        }, children: value })] }, value))), _jsx(InternalTooltip, { content: es ? 'Página siguiente' : 'Next page', children: _jsx(Button, { iconOnly: true, size: size, variant: "outline", disabled: disabled || current >= count || count === 0, onClick: () => onPageChange(current + 1), "aria-label": es ? 'Página siguiente' : 'Next page', children: _jsx(ChevronRightIcon, {}) }) })] }));
 }

package/dist/styles.css

@@ -727,31 +727,76 @@ button.dgm-step:hover:not(:disabled),
 .dgm-switch:checked::before {
   transform: translateX(1.25rem);
 }
-/* 7. Tonos semánticos compartidos por Badge y Alert. El texto aporta el significado además del color. */
+/* 7. Tonos semánticos compartidos. color-scheme selecciona la paleta; los tokens por tono se heredan. */
 .dgm-tone--neutral {
-  --dgm-tone-fg: #3d4b60;
-  --dgm-tone-bg: #f0f3f7;
-  --dgm-tone-border: #d9e0ea;
+  --dgm-tone-fg: light-dark(
+    var(--dgm-tone-neutral-fg-light, #3d4b60),
+    var(--dgm-tone-neutral-fg-dark, #d1dbea)
+  );
+  --dgm-tone-bg: light-dark(
+    var(--dgm-tone-neutral-bg-light, #f0f3f7),
+    var(--dgm-tone-neutral-bg-dark, #242424)
+  );
+  --dgm-tone-border: light-dark(
+    var(--dgm-tone-neutral-border-light, #d9e0ea),
+    var(--dgm-tone-neutral-border-dark, #474747)
+  );
 }
 .dgm-tone--info {
-  --dgm-tone-fg: #3730a3;
-  --dgm-tone-bg: #eef2ff;
-  --dgm-tone-border: #c7d2fe;
+  --dgm-tone-fg: light-dark(
+    var(--dgm-tone-info-fg-light, #3730a3),
+    var(--dgm-tone-info-fg-dark, #c7d2fe)
+  );
+  --dgm-tone-bg: light-dark(
+    var(--dgm-tone-info-bg-light, #eef2ff),
+    var(--dgm-tone-info-bg-dark, #25254a)
+  );
+  --dgm-tone-border: light-dark(
+    var(--dgm-tone-info-border-light, #c7d2fe),
+    var(--dgm-tone-info-border-dark, #50518c)
+  );
 }
 .dgm-tone--success {
-  --dgm-tone-fg: #166444;
-  --dgm-tone-bg: #edfbf3;
-  --dgm-tone-border: #b9e8cc;
+  --dgm-tone-fg: light-dark(
+    var(--dgm-tone-success-fg-light, #166444),
+    var(--dgm-tone-success-fg-dark, #a7f3d0)
+  );
+  --dgm-tone-bg: light-dark(
+    var(--dgm-tone-success-bg-light, #edfbf3),
+    var(--dgm-tone-success-bg-dark, #12382d)
+  );
+  --dgm-tone-border: light-dark(
+    var(--dgm-tone-success-border-light, #b9e8cc),
+    var(--dgm-tone-success-border-dark, #376f5a)
+  );
 }
 .dgm-tone--warning {
-  --dgm-tone-fg: #854d0e;
-  --dgm-tone-bg: #fff9e8;
-  --dgm-tone-border: #f1d48a;
+  --dgm-tone-fg: light-dark(
+    var(--dgm-tone-warning-fg-light, #854d0e),
+    var(--dgm-tone-warning-fg-dark, #fde68a)
+  );
+  --dgm-tone-bg: light-dark(
+    var(--dgm-tone-warning-bg-light, #fff9e8),
+    var(--dgm-tone-warning-bg-dark, #3c2c13)
+  );
+  --dgm-tone-border: light-dark(
+    var(--dgm-tone-warning-border-light, #f1d48a),
+    var(--dgm-tone-warning-border-dark, #8c6a28)
+  );
 }
 .dgm-tone--danger {
-  --dgm-tone-fg: #a2221a;
-  --dgm-tone-bg: #fff1f0;
-  --dgm-tone-border: #ffc9c5;
+  --dgm-tone-fg: light-dark(
+    var(--dgm-tone-danger-fg-light, #a2221a),
+    var(--dgm-tone-danger-fg-dark, #fca5a5)
+  );
+  --dgm-tone-bg: light-dark(
+    var(--dgm-tone-danger-bg-light, #fff1f0),
+    var(--dgm-tone-danger-bg-dark, #421f27)
+  );
+  --dgm-tone-border: light-dark(
+    var(--dgm-tone-danger-border-light, #ffc9c5),
+    var(--dgm-tone-danger-border-dark, #87434e)
+  );
 }
 /* 8. Composición: etiquetas, tarjetas y avisos. Las cajas y el texto pueden adaptarse al ancho disponible. */
 .dgm-badge {
@@ -1197,6 +1242,40 @@ button.dgm-step:hover:not(:disabled),
   }
 }
 
+/* El wrapper recibe hover incluso cuando Chromium descarta los eventos del botón. */
+.dgm-tooltip-trigger {
+  display: inline-flex;
+  min-width: 0;
+  vertical-align: middle;
+}
+.dgm-tooltip-disabled > :disabled {
+  pointer-events: none;
+}
+.dgm-tooltip-password {
+  position: absolute;
+  inset-inline-end: 0.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.dgm-tooltip-password > .dgm-password-toggle {
+  position: static;
+  transform: none;
+}
+
+/* Los cierres absolutos también necesitan un ancla con su área real. */
+.dgm-tooltip-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.dgm-tooltip-close > .dgm-icon-close {
+  position: static;
+}
+
 /* 13. Tooltip: ayuda flotante que hereda la paleta de la aplicación. */
 .dgm-tooltip {
   z-index: calc(var(--dgm-layer-base) + var(--dgm-layer-depth, 0) * var(--dgm-layer-step) + 1);

package/dist/toast.d.ts

@@ -17,7 +17,7 @@ export interface ToastOptions {
         altText: string;
         onClick: () => void;
     };
-    /** Etiqueta localizada para la X de este aviso; hereda del Provider. */
+    /** Nombre accesible y Tooltip localizado para la X de este aviso; hereda del Provider. */
     closeLabel?: string;
     /** Clase de la notificación, en el portal. */
     className?: string;
@@ -39,7 +39,7 @@ export interface ToastProviderProps {
     label?: string;
     /** Nombre de la región; {hotkey} se sustituye por F8. @defaultValue 'Notifications ({hotkey})' */
     viewportLabel?: string;
-    /** Nombre accesible localizado de las X. @defaultValue 'Dismiss notification' */
+    /** Nombre accesible y Tooltip localizado de las X. @defaultValue 'Dismiss notification' */
     closeLabel?: string;
     /** Clase de la pila fija abajo a la derecha. */
     className?: string;

package/dist/toast.js

@@ -6,6 +6,8 @@ import { createContext, useCallback, useContext, useEffect, useId, useMemo, useR
 import { createPortal } from 'react-dom';
 import * as Primitive from '@radix-ui/react-toast';
 import { Alert } from './display.js';
+import { InternalTooltip } from './tooltip.js';
+import { TooltipPolicy } from './internal/tooltip-policy.js';
 import { Button } from './button.js';
 import { cx, hasContent } from './utils.js';
 const ToastContext = createContext(null);
@@ -69,7 +71,7 @@ function ToastItem({ notice, duration, closeLabel, dismiss, remove, }) {
         }, className: cx('dgm-toast', `dgm-tone--${notice.tone ?? 'info'}`, notice.className), style: { touchAction: 'pan-y' }, onAnimationEnd: (event) => {
             if (!notice.open && event.target === event.currentTarget)
                 remove(notice.id);
-        }, children: [_jsxs(Alert, { tone: notice.tone, title: _jsx(Primitive.Title, { children: notice.title }), children: [hasContent(notice.description) && (_jsx(Primitive.Description, { children: notice.description })), notice.action && (_jsx(Primitive.Action, { asChild: true, altText: notice.action.altText, children: _jsx(Button, { size: "sm", variant: "outline", className: "dgm-toast-action", onClick: notice.action.onClick, children: notice.action.label }) }))] }), _jsx(Primitive.Close, { className: "dgm-icon-close", "aria-label": notice.closeLabel ?? closeLabel, children: _jsx(CloseIcon, {}) })] }));
+        }, children: [_jsxs(Alert, { tone: notice.tone, title: _jsx(Primitive.Title, { children: notice.title }), children: [hasContent(notice.description) && (_jsx(Primitive.Description, { children: notice.description })), notice.action && (_jsx(Primitive.Action, { asChild: true, altText: notice.action.altText, children: _jsx(Button, { size: "sm", variant: "outline", className: "dgm-toast-action", onClick: notice.action.onClick, children: notice.action.label }) }))] }), _jsx(TooltipPolicy.Provider, { value: { dismiss: () => dismiss(notice.id), layerBase: 'var(--dgm-layer-toast)' }, children: _jsx(InternalTooltip, { content: notice.closeLabel ?? closeLabel, children: _jsx(Primitive.Close, { className: "dgm-icon-close", "aria-label": notice.closeLabel ?? closeLabel, children: _jsx(CloseIcon, {}) }) }) })] }));
 }
 /**
  * Monta un único Provider alrededor del área que comparte avisos. En Astro debe

package/dist/tooltip.d.ts

@@ -1,7 +1,7 @@
 /** Ayuda contextual sobre un disparador existente. Radix gestiona foco, hover, Escape y colisiones. */
-import type { ReactElement, ReactNode } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 export interface TooltipProps {
-    /** Un único elemento enfocable que acepte ref y props, como Button. No usar Fragment. */
+    /** Un único elemento que acepte ref y props, como Button. Un ancla inline-flex estable permite hover con disabled/loading sin añadir foco. No usar Fragment. */
     children: ReactElement;
     /** Ayuda breve no interactiva. No colocar aquí enlaces, botones ni información imprescindible. */
     content: ReactNode;
@@ -22,5 +22,7 @@ export interface TooltipProps {
     /** Clase del contenido flotante, no del disparador. */
     className?: string;
 }
-/** Provider local: se puede usar sin instalar un proveedor global en la aplicación. */
-export declare function Tooltip({ children, content, side, align, sideOffset, delayDuration, open, defaultOpen, onOpenChange, className, }: TooltipProps): ReactElement;
+/** Ayuda sobre un elemento que conserva sus props y ref originales. */
+export declare function Tooltip(props: TooltipProps): ReactElement;
+/** Los controles internos delegan Escape en su diálogo o notificación. */
+export declare function InternalTooltip(props: TooltipProps): ReactElement;

package/dist/tooltip.js

@@ -1,16 +1,47 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Ayuda contextual sobre un disparador existente. Radix gestiona foco, hover, Escape y colisiones. */
+import { cloneElement, forwardRef, useContext, } from 'react';
+import { TooltipPolicy } from './internal/tooltip-policy.js';
 import * as Primitive from '@radix-ui/react-tooltip';
 import { isRestoringFocus } from './internal/focus.js';
 import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
 import { cx } from './utils.js';
+/** Un ancla estable conserva el botón y su ref al alternar disabled o loading. */
+const TooltipTrigger = forwardRef(function TooltipTrigger({ children, className, 'aria-describedby': describedBy, ...props }, ref) {
+    const child = children;
+    const unavailable = child.props.disabled || child.props.loading;
+    return (_jsx("span", { ...props, ref: ref, className: cx('dgm-tooltip-trigger', unavailable && 'dgm-tooltip-disabled', child.props.className === 'dgm-password-toggle' && 'dgm-tooltip-password', child.props.className === 'dgm-icon-close' && 'dgm-tooltip-close', child.props.fullWidth && !child.props.iconOnly && 'dgm-full', className), children: cloneElement(child, {
+            'aria-describedby': [child.props['aria-describedby'], describedBy].filter(Boolean).join(' ') || undefined,
+        }) }));
+});
 /** Provider local: se puede usar sin instalar un proveedor global en la aplicación. */
-export function Tooltip({ children, content, side = 'top', align = 'center', sideOffset = 6, delayDuration = 300, open, defaultOpen, onOpenChange, className, }) {
+function TooltipContent({ children, content, side = 'top', align = 'center', sideOffset = 6, delayDuration = 300, open, defaultOpen, onOpenChange, className, internal = false, }) {
+    const policy = useContext(TooltipPolicy);
     const { depth, style: layerStyle } = useOverlayLayer();
     return (_jsx(OverlayLayerProvider, { depth: depth, children: _jsx(Primitive.Provider, { delayDuration: delayDuration, children: _jsxs(Primitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(Primitive.Trigger, { asChild: true, onFocus: (event) => {
                             // El foco sigue llegando al botón y a sus manejadores. Solo se omite
-                            // la apertura automática de Radix al volver desde una capa de la librería.
-                            if (isRestoringFocus(event.currentTarget))
+                            // la apertura de Radix durante el autofocus inicial o el retorno desde otra capa.
+                            if (policy.autoFocusing?.current || isRestoringFocus(event.target))
                                 event.preventDefault();
-                        }, children: children }), _jsx(Primitive.Portal, { children: _jsx(Primitive.Content, { style: layerStyle, side: side, align: align, sideOffset: sideOffset, collisionPadding: 12, className: cx('dgm-tooltip', className), children: content }) })] }) }) }));
+                        }, children: _jsx(TooltipTrigger, { children: children }) }), _jsx(Primitive.Portal, { children: _jsx(Primitive.Content, { onEscapeKeyDown: (event) => {
+                                if (internal &&
+                                    policy.dismiss &&
+                                    (policy.depth === undefined || depth === policy.depth + 1)) {
+                                    // La ayuda no añade otra pulsación antes de cerrar su capa propietaria.
+                                    event.preventDefault();
+                                    policy.dismiss();
+                                }
+                            }, style: {
+                                ...layerStyle,
+                                ...(policy.layerBase ? { '--dgm-layer-base': policy.layerBase } : {}),
+                            }, side: side, align: align, sideOffset: sideOffset, collisionPadding: 12, className: cx('dgm-tooltip', className), children: content }) })] }) }) }));
+}
+/** Ayuda sobre un elemento que conserva sus props y ref originales. */
+export function Tooltip(props) {
+    return _jsx(TooltipContent, { ...props });
+}
+/** Los controles internos delegan Escape en su diálogo o notificación. */
+export function InternalTooltip(props) {
+    return _jsx(TooltipContent, { ...props, internal: true });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danielgm-ui",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Accessible React components for Next.js and the web.",
   "repository": {
     "type": "git",