danielgm-ui 0.4.1 → 0.4.3

package/dist/context-menu.d.ts

@@ -8,6 +8,8 @@ export interface ContextMenuProps {
     children: ReactElement;
     /** Acciones y separadores con IDs únicos. Los atajos son leyendas, no se registran. */
     items: readonly ContextMenuItem[];
+    /** Apariencia de las opciones; no modifica el panel. @defaultValue 'default' */
+    itemVariant?: 'default' | 'ghost';
     /** Encabezado visible y nombre accesible del menú. */
     label: string;
     /** Desactiva únicamente el menú personalizado y conserva el menú nativo. @defaultValue false */
@@ -18,4 +20,4 @@ export interface ContextMenuProps {
     className?: string;
 }
 /** Clic derecho, pulsación prolongada o Shift+F10. El clic izquierdo conserva la acción del hijo. */
-export declare function ContextMenu({ children, items, label, disabled, onOpenChange, className, }: ContextMenuProps): ReactElement;
+export declare function ContextMenu({ children, items, itemVariant, label, disabled, onOpenChange, className, }: ContextMenuProps): ReactElement;

package/dist/context-menu.js

@@ -3,11 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Menú contextual sobre una zona concreta. Radix gestiona el anclaje al puntero y la navegación. */
 import { useId, useRef, useState } from 'react';
 import * as Primitive from '@radix-ui/react-context-menu';
+import { menuItemFocusProps } from './internal/menu-item-focus.js';
 import { restoreFocus } from './internal/focus.js';
 import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
 import { cx } from './utils.js';
 /** Clic derecho, pulsación prolongada o Shift+F10. El clic izquierdo conserva la acción del hijo. */
-export function ContextMenu({ children, items, label, disabled = false, onOpenChange, className, }) {
+export function ContextMenu({ children, items, itemVariant = 'default', label, disabled = false, onOpenChange, className, }) {
     const { depth, style: layerStyle } = useOverlayLayer();
     const trigger = useRef(null);
     const outside = useRef(false);
@@ -34,7 +35,7 @@ export function ContextMenu({ children, items, label, disabled = false, onOpenCh
                             clientX: rect.left + 8,
                             clientY: rect.bottom,
                         }));
-                    }, children: children }), _jsx(Primitive.Portal, { children: _jsxs(Primitive.Content, { style: layerStyle, id: menuId, "aria-label": label, collisionPadding: 12, className: cx('dgm-dropdown', 'dgm-context-menu', className), onContextMenu: (event) => {
+                    }, children: children }), _jsx(Primitive.Portal, { children: _jsxs(Primitive.Content, { ...menuItemFocusProps, style: layerStyle, id: menuId, "aria-label": label, collisionPadding: 12, className: cx('dgm-dropdown', 'dgm-context-menu', className), onContextMenu: (event) => {
                             // El panel ya es el menú contextual: evita superponer el del navegador
                             // o propagar el gesto a otra zona contextual a través del portal.
                             event.preventDefault();
@@ -46,5 +47,5 @@ export function ContextMenu({ children, items, label, disabled = false, onOpenCh
                             if (!outside.current && trigger.current?.isConnected)
                                 restoreFocus(trigger.current);
                             outside.current = false;
-                        }, children: [_jsx(Primitive.Label, { className: "dgm-dropdown-label", children: label }), items.map((item) => item.type === 'separator' ? (_jsx(Primitive.Separator, { className: "dgm-dropdown-separator" }, item.id)) : (_jsxs(Primitive.Item, { textValue: item.label, disabled: item.disabled, onSelect: item.onSelect, className: cx('dgm-dropdown-item', item.danger && 'dgm-dropdown-item--danger'), children: [item.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: item.icon })), _jsx("span", { className: "dgm-dropdown-text", children: item.label }), item.shortcut && (_jsx("span", { className: "dgm-dropdown-shortcut", "aria-hidden": "true", children: item.shortcut }))] }, item.id)))] }) })] }) }));
+                        }, children: [_jsx(Primitive.Label, { className: "dgm-dropdown-label", children: label }), items.map((item) => item.type === 'separator' ? (_jsx(Primitive.Separator, { className: "dgm-dropdown-separator" }, item.id)) : (_jsxs(Primitive.Item, { textValue: item.label, disabled: item.disabled, onSelect: item.onSelect, className: cx('dgm-dropdown-item', (item.variant ?? itemVariant) === 'ghost' && 'dgm-dropdown-item--ghost', item.danger && 'dgm-dropdown-item--danger'), children: [item.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: item.icon })), _jsx("span", { className: "dgm-dropdown-text", children: item.label }), item.shortcut && (_jsx("span", { className: "dgm-dropdown-shortcut", "aria-hidden": "true", children: item.shortcut }))] }, item.id)))] }) })] }) }));
 }

package/dist/data-table.d.ts

@@ -40,6 +40,8 @@ export interface DataTableProps<T extends object> {
     searchPlaceholder?: string;
     /** Registros por página. @defaultValue 10 */
     pageSize?: number;
+    /** Oculta solo los controles con cero o una página de resultados filtrados. @defaultValue false */
+    hidePaginationOnSinglePage?: boolean;
     /** Página controlada, comenzando en 1. */
     page?: number;
     onPageChange?: (page: number) => void;
@@ -56,4 +58,4 @@ export interface DataTableProps<T extends object> {
     className?: string;
 }
 /** Paginación y selección conservan IDs reales. El filtrado devuelve a la primera página. */
-export declare function DataTable<T extends object>({ data, columns, getRowId, caption, sorting, sortable, manualSorting, defaultSorting, onSortingChange, searchable, searchPlaceholder, pageSize, page, onPageChange, selectable, selection, defaultSelection, onSelectionChange, loading, emptyMessage, locale, className, }: DataTableProps<T>): ReactElement;
+export declare function DataTable<T extends object>({ data, columns, getRowId, caption, sorting, sortable, manualSorting, defaultSorting, onSortingChange, searchable, searchPlaceholder, pageSize, hidePaginationOnSinglePage, page, onPageChange, selectable, selection, defaultSelection, onSelectionChange, loading, emptyMessage, locale, className, }: DataTableProps<T>): ReactElement;

package/dist/data-table.js

@@ -20,7 +20,7 @@ const features = tableFeatures({
     filterFns: { includesString: filterFn_includesString },
 });
 /** Paginación y selección conservan IDs reales. El filtrado devuelve a la primera página. */
-export function DataTable({ data, columns, getRowId, caption, sorting, sortable = true, manualSorting = false, defaultSorting = [], onSortingChange, searchable = true, searchPlaceholder, pageSize = 10, page, onPageChange, selectable = false, selection, defaultSelection = [], onSelectionChange, loading = false, emptyMessage, locale = 'en', className, }) {
+export function DataTable({ data, columns, getRowId, caption, sorting, sortable = true, manualSorting = false, defaultSorting = [], onSortingChange, searchable = true, searchPlaceholder, pageSize = 10, hidePaginationOnSinglePage = false, page, onPageChange, selectable = false, selection, defaultSelection = [], onSelectionChange, loading = false, emptyMessage, locale = 'en', className, }) {
     const [sort, changeSort] = useControllable(sorting, defaultSorting, onSortingChange);
     const [currentPage, changePage] = useControllable(page, 1, onPageChange);
     const [selected, changeSelection] = useControllable(selection, defaultSelection, onSelectionChange ? (next) => onSelectionChange([...next]) : undefined);
@@ -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'}` : ''}` }), _jsx(Pagination, { page: current, pageCount: pageCount, onPageChange: changePage, disabled: loading, locale: locale })] })] }));
+                            : `${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 }))] })] }));
 }

package/dist/dropdown-menu.d.ts

@@ -14,6 +14,8 @@ export type DropdownMenuItem = {
     /** Leyenda visual: no registra por sí misma un atajo de teclado. */
     shortcut?: string;
     disabled?: boolean;
+    /** Apariencia de esta opción; hereda itemVariant del menú. */
+    variant?: 'default' | 'ghost';
     /** Resalta acciones destructivas sin ejecutarlas automáticamente. */
     danger?: boolean;
     /** Se ejecuta con puntero o teclado. preventDefault mantiene abierto el menú. */
@@ -24,6 +26,8 @@ export interface DropdownMenuProps {
     children: ReactElement;
     /** Acciones y separadores en orden de lectura. IDs únicos. */
     items: readonly DropdownMenuItem[];
+    /** Apariencia de las opciones; no modifica el panel. @defaultValue 'default' */
+    itemVariant?: 'default' | 'ghost';
     /** Encabezado opcional del menú. */
     label?: string;
     /** Apertura controlada, junto con onOpenChange. */
@@ -44,4 +48,4 @@ export interface DropdownMenuProps {
     className?: string;
 }
 /** El menú no bloquea el scroll de la página y devuelve el foco sin desplazarla. */
-export declare function DropdownMenu({ children, items, label, open, defaultOpen, onOpenChange, side, align, sideOffset, disabled, className, }: DropdownMenuProps): ReactElement;
+export declare function DropdownMenu({ children, items, itemVariant, label, open, defaultOpen, onOpenChange, side, align, sideOffset, disabled, className, }: DropdownMenuProps): ReactElement;

package/dist/dropdown-menu.js

@@ -3,15 +3,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Menú de acciones: Radix gestiona teclado, búsqueda por letras, portal y foco. */
 import { useRef } from 'react';
 import * as Primitive from '@radix-ui/react-dropdown-menu';
+import { menuItemFocusProps } from './internal/menu-item-focus.js';
 import { restoreFocus } from './internal/focus.js';
 import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
 import { cx } from './utils.js';
 /** El menú no bloquea el scroll de la página y devuelve el foco sin desplazarla. */
-export function DropdownMenu({ children, items, label, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 6, disabled, className, }) {
+export function DropdownMenu({ children, items, itemVariant = 'default', label, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 6, disabled, className, }) {
     const { depth, style: layerStyle } = useOverlayLayer();
     const trigger = useRef(null);
     const interactedOutside = useRef(false);
-    return (_jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Primitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, modal: false, children: [_jsx(Primitive.Trigger, { asChild: true, ref: trigger, disabled: disabled, children: children }), _jsx(Primitive.Portal, { children: _jsxs(Primitive.Content, { style: layerStyle, side: side, align: align, sideOffset: sideOffset, collisionPadding: 12, className: cx('dgm-dropdown', className), onInteractOutside: () => {
+    return (_jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Primitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, modal: false, children: [_jsx(Primitive.Trigger, { asChild: true, ref: trigger, disabled: disabled, children: children }), _jsx(Primitive.Portal, { children: _jsxs(Primitive.Content, { ...menuItemFocusProps, style: layerStyle, side: side, align: align, sideOffset: sideOffset, collisionPadding: 12, className: cx('dgm-dropdown', className), onInteractOutside: () => {
                             interactedOutside.current = true;
                         }, onCloseAutoFocus: (event) => {
                             // Un clic fuera conserva su destino; Escape o una acción vuelven al botón.
@@ -20,5 +21,5 @@ export function DropdownMenu({ children, items, label, open, defaultOpen, onOpen
                                 restoreFocus(trigger.current);
                             }
                             interactedOutside.current = false;
-                        }, children: [label && _jsx(Primitive.Label, { className: "dgm-dropdown-label", children: label }), items.map((item) => item.type === 'separator' ? (_jsx(Primitive.Separator, { className: "dgm-dropdown-separator" }, item.id)) : (_jsxs(Primitive.Item, { textValue: item.label, disabled: item.disabled, onSelect: item.onSelect, className: cx('dgm-dropdown-item', item.danger && 'dgm-dropdown-item--danger'), children: [item.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: item.icon })), _jsx("span", { className: "dgm-dropdown-text", children: item.label }), item.shortcut && (_jsx("span", { className: "dgm-dropdown-shortcut", "aria-hidden": "true", children: item.shortcut }))] }, item.id)))] }) })] }) }));
+                        }, children: [label && _jsx(Primitive.Label, { className: "dgm-dropdown-label", children: label }), items.map((item) => item.type === 'separator' ? (_jsx(Primitive.Separator, { className: "dgm-dropdown-separator" }, item.id)) : (_jsxs(Primitive.Item, { textValue: item.label, disabled: item.disabled, onSelect: item.onSelect, className: cx('dgm-dropdown-item', (item.variant ?? itemVariant) === 'ghost' && 'dgm-dropdown-item--ghost', item.danger && 'dgm-dropdown-item--danger'), children: [item.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: item.icon })), _jsx("span", { className: "dgm-dropdown-text", children: item.label }), item.shortcut && (_jsx("span", { className: "dgm-dropdown-shortcut", "aria-hidden": "true", children: item.shortcut }))] }, item.id)))] }) })] }) }));
 }

package/dist/internal/menu-item-focus.d.ts

@@ -0,0 +1,5 @@
+export declare const menuItemFocusProps: {
+    onPointerMoveCapture(event: import("react").PointerEvent<HTMLDivElement>): void;
+    onPointerDownCapture(event: import("react").PointerEvent<HTMLDivElement>): void;
+    onKeyDownCapture(event: import("react").KeyboardEvent<HTMLDivElement>): void;
+};

package/dist/internal/menu-item-focus.js

@@ -0,0 +1,11 @@
+export const menuItemFocusProps = {
+    onPointerMoveCapture(event) {
+        event.currentTarget.dataset.inputMode = 'pointer';
+    },
+    onPointerDownCapture(event) {
+        event.currentTarget.dataset.inputMode = 'pointer';
+    },
+    onKeyDownCapture(event) {
+        event.currentTarget.dataset.inputMode = 'keyboard';
+    },
+};

package/dist/navigation-menu.d.ts

@@ -17,10 +17,12 @@ export interface NavigationMenuProps {
     items: readonly NavigationMenuItem[];
     /** href activo exacto; el consumidor conoce la ruta actual. */
     currentHref?: string;
+    /** Apariencia de enlaces y disparadores. @defaultValue 'default' */
+    variant?: 'default' | 'ghost';
     /** Adaptador para routers: devuelve un único enlace que acepte props y ref. */
     renderLink?: (item: NavigationLink) => ReactElement;
     delayDuration?: number;
     className?: string;
 }
 /** En móvil los elementos se distribuyen en filas y los paneles permanecen dentro del ancho disponible. */
-export declare function NavigationMenu({ label, items, currentHref, renderLink, delayDuration, className, }: NavigationMenuProps): ReactElement;
+export declare function NavigationMenu({ label, items, currentHref, variant, renderLink, delayDuration, className, }: NavigationMenuProps): ReactElement;

package/dist/navigation-menu.js

@@ -18,10 +18,10 @@ function NavigationPanel({ label, children }) {
     return (_jsxs(_Fragment, { children: [_jsxs(Primitive.Trigger, { ref: trigger, className: "dgm-navigation-trigger", children: [label, _jsx(ChevronIcon, {})] }), _jsx(Primitive.Content, { ref: contentRef, className: "dgm-navigation-content", children: children })] }));
 }
 /** En móvil los elementos se distribuyen en filas y los paneles permanecen dentro del ancho disponible. */
-export function NavigationMenu({ label, items, currentHref, renderLink, delayDuration = 150, className, }) {
+export function NavigationMenu({ label, items, currentHref, variant = 'default', renderLink, delayDuration = 150, className, }) {
     function link(item) {
         const active = currentHref === item.href;
         return (_jsx(Primitive.Link, { asChild: true, active: active, "aria-current": active ? 'page' : undefined, className: "dgm-navigation-link", children: renderLink ? (renderLink(item)) : (_jsxs("a", { href: item.href, children: [item.icon && _jsx("span", { "aria-hidden": "true", children: item.icon }), _jsxs("span", { children: [item.label, item.description && _jsx("small", { children: item.description })] })] })) }, item.id));
     }
-    return (_jsx(Primitive.Root, { "aria-label": label, delayDuration: delayDuration, className: cx('dgm-navigation', className), children: _jsx(Primitive.List, { className: "dgm-navigation-list", children: items.map((item) => (_jsx(Primitive.Item, { className: "dgm-navigation-item", children: 'items' in item ? (_jsx(NavigationPanel, { label: item.label, children: _jsx("ul", { children: item.items.map((child) => (_jsx("li", { children: link(child) }, child.id))) }) })) : (link(item)) }, item.id))) }) }));
+    return (_jsx(Primitive.Root, { "aria-label": label, delayDuration: delayDuration, className: cx('dgm-navigation', `dgm-navigation--${variant}`, className), children: _jsx(Primitive.List, { className: "dgm-navigation-list", children: items.map((item) => (_jsx(Primitive.Item, { className: "dgm-navigation-item", children: 'items' in item ? (_jsx(NavigationPanel, { label: item.label, children: _jsx("ul", { children: item.items.map((child) => (_jsx("li", { children: link(child) }, child.id))) }) })) : (link(item)) }, item.id))) }) }));
 }

package/dist/slider.d.ts

@@ -10,6 +10,8 @@ export interface SliderBaseProps {
     step?: number;
     disabled?: boolean;
     name?: string;
+    /** Visibilidad visual de los extremos en Slider y RangeSlider; conserva foco y accesibilidad. @defaultValue 'always' */
+    thumbVisibility?: 'always' | 'interaction';
     /** Valor visible y aria-valuetext; útil para porcentajes, unidades o precios. */
     formatValue?: (value: number) => string;
     /** Marcas informativas, sin interacción propia. Deben estar entre min y max. */

package/dist/slider.js

@@ -1,19 +1,27 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Radix mantiene teclado, gestos táctiles y valores de formulario; la librería aporta etiquetas y estilo. */
-import { useId } from 'react';
+import { useId, useState, useEffect } from 'react';
 import * as Primitive from '@radix-ui/react-slider';
 import { useControllable } from './internal/state.js';
 import { cx, hasContent } from './utils.js';
 /** Infraestructura interna; cada API pública mantiene un número fijo de controles. */
-function SliderControl({ label, description, error, min = 0, max = 100, step = 1, disabled, name, formatValue = String, marks = [], className, id, values, change, commit, thumbLabels, }) {
+function SliderControl({ label, description, error, min = 0, max = 100, step = 1, disabled, name, thumbVisibility = 'always', formatValue = String, marks = [], className, id, values, change, commit, thumbLabels, }) {
     const generated = useId();
+    const [activePointer, setActivePointer] = useState(null);
+    useEffect(() => {
+        if (disabled)
+            setActivePointer(null);
+    }, [disabled]);
     const controlId = id ?? `dgm-slider-${generated}`;
     if (![min, max, step].every(Number.isFinite) || min >= max || step <= 0) {
         throw new RangeError('Slider requires finite min < max and step > 0.');
     }
     const describedBy = cx(hasContent(description) && `${controlId}-description`, hasContent(error) && `${controlId}-error`) || undefined;
-    return (_jsxs("div", { className: cx('dgm-field', 'dgm-slider-field', className), id: controlId, children: [_jsxs("div", { className: "dgm-slider-heading", children: [_jsx("span", { className: "dgm-label", id: `${controlId}-label`, children: label }), _jsx("span", { className: "dgm-description", "aria-hidden": "true", children: values.map(formatValue).join(' – ') })] }), _jsxs(Primitive.Root, { className: "dgm-slider", value: values, onValueChange: change, onValueCommit: commit, min: min, max: max, step: step, disabled: disabled, name: name, children: [_jsx(Primitive.Track, { className: "dgm-slider-track", children: _jsx(Primitive.Range, { className: "dgm-slider-range" }) }), values.map((value, index) => (_jsx(Primitive.Thumb, { name: name, className: "dgm-slider-thumb", "aria-labelledby": `${controlId}-label${thumbLabels ? ` ${controlId}-thumb-${index}` : ''}`, "aria-describedby": describedBy, "aria-invalid": hasContent(error) || undefined, "aria-valuetext": formatValue(value) }, index)))] }), thumbLabels?.map((text, index) => (_jsx("span", { id: `${controlId}-thumb-${index}`, className: "dgm-visually-hidden", children: text }, index))), marks.length > 0 && (_jsx("div", { className: "dgm-slider-marks", "aria-hidden": "true", children: marks
+    return (_jsxs("div", { className: cx('dgm-field', 'dgm-slider-field', className), id: controlId, children: [_jsxs("div", { className: "dgm-slider-heading", children: [_jsx("span", { className: "dgm-label", id: `${controlId}-label`, children: label }), _jsx("span", { className: "dgm-description", "aria-hidden": "true", children: values.map(formatValue).join(' – ') })] }), _jsxs(Primitive.Root, { className: "dgm-slider", "data-thumb-visibility": thumbVisibility, "data-dragging": !disabled && activePointer !== null ? '' : undefined, onPointerDownCapture: (event) => {
+                    if (!disabled && event.button === 0)
+                        setActivePointer(event.pointerId);
+                }, onPointerUpCapture: () => setActivePointer(null), onPointerCancelCapture: () => setActivePointer(null), onLostPointerCapture: () => setActivePointer(null), value: values, onValueChange: change, onValueCommit: commit, min: min, max: max, step: step, disabled: disabled, name: name, children: [_jsx(Primitive.Track, { className: "dgm-slider-track", children: _jsx(Primitive.Range, { className: "dgm-slider-range" }) }), values.map((value, index) => (_jsx(Primitive.Thumb, { name: name, className: "dgm-slider-thumb", "aria-labelledby": `${controlId}-label${thumbLabels ? ` ${controlId}-thumb-${index}` : ''}`, "aria-describedby": describedBy, "aria-invalid": hasContent(error) || undefined, "aria-valuetext": formatValue(value) }, index)))] }), thumbLabels?.map((text, index) => (_jsx("span", { id: `${controlId}-thumb-${index}`, className: "dgm-visually-hidden", children: text }, index))), marks.length > 0 && (_jsx("div", { className: "dgm-slider-marks", "aria-hidden": "true", children: marks
                     .filter((mark) => mark.value >= min && mark.value <= max)
                     .map((mark) => (_jsx("span", { style: { left: `${(100 * (mark.value - min)) / (max - min)}%` }, children: mark.label ?? formatValue(mark.value) }, mark.value))) })), hasContent(description) && (_jsx("span", { id: `${controlId}-description`, className: "dgm-description", children: description })), hasContent(error) && (_jsx("span", { id: `${controlId}-error`, className: "dgm-error", children: error }))] }));
 }

package/dist/styles.css

@@ -1609,7 +1609,10 @@ button.dgm-step:hover:not(:disabled),
   cursor: pointer;
   transition: var(--dgm-hover-transition);
 }
-.dgm-dropdown-item[data-highlighted]:not([data-disabled]) {
+/* Ghost distingue el foco de teclado del foco que Radix mueve con el puntero. */
+.dgm-dropdown-item:not(.dgm-dropdown-item--ghost)[data-highlighted]:not([data-disabled]),
+.dgm-dropdown:not([data-input-mode='pointer'])
+  .dgm-dropdown-item--ghost:focus-visible:not([data-disabled]) {
   outline: 2px solid var(--dgm-primary);
   outline-offset: -2px;
 }
@@ -2775,7 +2778,7 @@ button.dgm-step:hover:not(:disabled),
 }
 .dgm-table-sort-icon {
   position: absolute;
-  inset-inline-end: 0;
+  inset-inline-end: 0.5625rem;
   top: 50%;
   width: 0.875rem;
   height: 0.875rem;
@@ -2793,22 +2796,13 @@ button.dgm-step:hover:not(:disabled),
   opacity: 1;
   transform: translateY(-50%) scale(1);
 }
-.dgm-data-table th[data-align='center'] .dgm-table-sort[data-sorted] .dgm-table-sort-label,
-.dgm-data-table th[data-align='end'] .dgm-table-sort[data-sorted] .dgm-table-sort-label {
+.dgm-data-table th .dgm-table-sort[data-sorted] .dgm-table-sort-label {
   transform: translateX(-0.5625rem);
 }
-.dgm-data-table th[data-align='center'] .dgm-table-sort-icon,
-.dgm-data-table th[data-align='end'] .dgm-table-sort-icon {
-  inset-inline-end: 0.5625rem;
-}
 .dgm-data-table th[data-align='start'] .dgm-table-sort {
   margin-inline-start: calc(-1 * var(--dgm-table-sort-space));
 }
-[dir='rtl']
-  .dgm-data-table
-  th:not([data-align='start'])
-  .dgm-table-sort[data-sorted]
-  .dgm-table-sort-label {
+[dir='rtl'] .dgm-data-table th .dgm-table-sort[data-sorted] .dgm-table-sort-label {
   transform: translateX(0.5625rem);
 }
 @media (prefers-reduced-motion: reduce) {
@@ -3139,6 +3133,22 @@ button.dgm-step:disabled {
   box-shadow: 0 2px 5px #0002;
   cursor: grab;
 }
+/* Opacidad conserva la geometría, el área táctil y los controles accesibles. */
+.dgm-slider[data-thumb-visibility='interaction'] .dgm-slider-thumb {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.dgm-slider[data-thumb-visibility='interaction']:not([data-disabled]):focus-within
+  .dgm-slider-thumb,
+.dgm-slider[data-thumb-visibility='interaction']:not([data-disabled])[data-dragging]
+  .dgm-slider-thumb {
+  opacity: 1;
+}
+@media (hover: hover) {
+  .dgm-slider[data-thumb-visibility='interaction']:not([data-disabled]):hover .dgm-slider-thumb {
+    opacity: 1;
+  }
+}
 .dgm-slider-thumb::after {
   content: '';
   position: absolute;
@@ -3331,6 +3341,19 @@ button.dgm-step:disabled {
 .dgm-navigation-trigger[data-state='open'] {
   background: var(--dgm-subtle);
 }
+/* Conserva la geometría y el foco compartidos, también dentro de los submenús. */
+.dgm-navigation--ghost .dgm-navigation-trigger,
+.dgm-navigation--ghost .dgm-navigation-link {
+  background: transparent;
+  border-color: transparent;
+}
+.dgm-navigation--ghost .dgm-navigation-link[data-active],
+.dgm-navigation--ghost .dgm-navigation-trigger[data-state='open'],
+.dgm-navigation--ghost .dgm-navigation-trigger:hover:not(:disabled),
+.dgm-navigation--ghost .dgm-navigation-link:hover:not([aria-disabled='true']) {
+  background: var(--dgm-hover);
+  color: var(--dgm-on-hover);
+}
 .dgm-navigation-content {
   /* Misma separación inicial que Popover y los selectores que lo componen. */
   --dgm-navigation-gap: 8px;
@@ -3584,7 +3607,8 @@ button.dgm-step:disabled {
   .dgm-navigation-content {
     animation: none;
   }
-  .dgm-toggle-item {
+  .dgm-toggle-item,
+  .dgm-slider[data-thumb-visibility='interaction'] .dgm-slider-thumb {
     transition: none;
   }
 }

package/package.json

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