danielgm-ui 0.3.0 → 0.4.0

package/TABLER-LICENSE.txt

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020-2026 Paweł Kuna
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2020-2026 Paweł Kuna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/combobox.js

@@ -11,7 +11,7 @@ import { CheckIcon, ChevronIcon } from './internal/icons.js';
 import { cx, hasContent } from './utils.js';
 import { ScrollHints } from './internal/scroll-hints.js';
 import { useFieldOpen } from './internal/field-open.js';
-import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { OverlayLayerProvider, OverlayScrollBoundary, useOverlayLayer, } from './internal/overlay-layer.js';
 /** Selección única de un catálogo; no permite enviar texto libre como valor. */
 export const Combobox = forwardRef(function Combobox({ label, options, value, defaultValue = '', onValueChange, placeholder, searchPlaceholder, emptyMessage, description, error, name, required, disabled, clearable = false, locale = 'en', id, className, wrapperClassName, }, ref) {
     const [selected, change] = useControllable(value, defaultValue, onValueChange);
@@ -39,16 +39,16 @@ export const Combobox = forwardRef(function Combobox({ label, options, value, de
                     event.preventDefault();
                     setInvalid(true);
                     trigger.current?.focus({ preventScroll: true });
-                }, children: [_jsx("option", { value: "" }), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), _jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { ref: trigger, id: controlId, disabled: disabled, "aria-labelledby": `${controlId}-label ${controlId}-value`, "aria-describedby": describedBy, "aria-invalid": hasContent(message) || undefined, className: cx('dgm-input', 'dgm-combobox-trigger', className), children: [_jsxs("span", { className: "dgm-custom-value", id: `${controlId}-value`, children: [current?.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: current.icon })), current?.label ?? placeholder ?? (es ? 'Seleccionar…' : 'Select…')] }), _jsx("span", { className: "dgm-custom-chevron", children: _jsx(ChevronIcon, {}) })] }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { className: "dgm-combobox-panel", style: layerStyle, sideOffset: 6, collisionPadding: 12, "aria-labelledby": `${controlId}-label`, onInteractOutside: (event) => {
-                                    if (preventTriggerLabelDismiss(event, trigger.current))
-                                        return;
-                                    interactedOutside.current = true;
-                                }, onCloseAutoFocus: (event) => {
-                                    event.preventDefault();
-                                    if (!interactedOutside.current)
-                                        restoreFocus(trigger.current);
-                                    interactedOutside.current = false;
-                                }, children: _jsxs(Command, { defaultValue: selected, className: "dgm-command", label: es ? 'Opciones' : 'Options', loop: true, children: [_jsx(Command.Input, { className: "dgm-command-input", "aria-label": searchPlaceholder ?? (es ? 'Buscar opciones' : 'Search options'), placeholder: searchPlaceholder ?? (es ? 'Buscar…' : 'Search…') }), _jsx(ScrollHints, { children: _jsxs(Command.List, { className: "dgm-command-list", children: [_jsx(Command.Empty, { className: "dgm-command-empty", children: emptyMessage ?? (es ? 'Sin resultados.' : 'No results.') }), options.map((option) => (_jsxs(Command.Item, { value: option.value, keywords: [option.label, ...(option.keywords ?? [])], disabled: disabled || option.disabled, onSelect: () => choose(option.value), className: "dgm-command-item", children: [option.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: option.icon })), _jsx("span", { children: option.label }), option.value === selected && (_jsx("span", { className: "dgm-command-check", "aria-hidden": "true", children: _jsx(CheckIcon, {}) }))] }, option.value)))] }) })] }) }) })] }) }), clearable && selected && (_jsx("button", { type: "button", className: "dgm-text-action", disabled: disabled, onClick: () => {
+                }, children: [_jsx("option", { value: "" }), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), _jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { ref: trigger, id: controlId, disabled: disabled, "aria-labelledby": `${controlId}-label ${controlId}-value`, "aria-describedby": describedBy, "aria-invalid": hasContent(message) || undefined, className: cx('dgm-input', 'dgm-combobox-trigger', className), children: [_jsxs("span", { className: "dgm-custom-value", id: `${controlId}-value`, children: [current?.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: current.icon })), current?.label ?? placeholder ?? (es ? 'Seleccionar…' : 'Select…')] }), _jsx("span", { className: "dgm-custom-chevron", children: _jsx(ChevronIcon, {}) })] }), _jsx(Popover.Portal, { children: _jsx(OverlayScrollBoundary, { children: _jsx(Popover.Content, { className: "dgm-combobox-panel", style: layerStyle, sideOffset: 6, collisionPadding: 12, "aria-labelledby": `${controlId}-label`, onInteractOutside: (event) => {
+                                        if (preventTriggerLabelDismiss(event, trigger.current))
+                                            return;
+                                        interactedOutside.current = true;
+                                    }, onCloseAutoFocus: (event) => {
+                                        event.preventDefault();
+                                        if (!interactedOutside.current)
+                                            restoreFocus(trigger.current);
+                                        interactedOutside.current = false;
+                                    }, children: _jsxs(Command, { defaultValue: selected, className: "dgm-command", label: es ? 'Opciones' : 'Options', loop: true, children: [_jsx(Command.Input, { className: "dgm-command-input", "aria-label": searchPlaceholder ?? (es ? 'Buscar opciones' : 'Search options'), placeholder: searchPlaceholder ?? (es ? 'Buscar…' : 'Search…') }), _jsx(ScrollHints, { children: _jsxs(Command.List, { className: "dgm-command-list", children: [_jsx(Command.Empty, { className: "dgm-command-empty", children: emptyMessage ?? (es ? 'Sin resultados.' : 'No results.') }), options.map((option) => (_jsxs(Command.Item, { value: option.value, keywords: [option.label, ...(option.keywords ?? [])], disabled: disabled || option.disabled, onSelect: () => choose(option.value), className: "dgm-command-item", children: [option.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: option.icon })), _jsx("span", { children: option.label }), option.value === selected && (_jsx("span", { className: "dgm-command-check", "aria-hidden": "true", children: _jsx(CheckIcon, {}) }))] }, option.value)))] }) })] }) }) }) })] }) }), clearable && selected && (_jsx("button", { type: "button", className: "dgm-text-action", disabled: disabled, onClick: () => {
                     choose('');
                     trigger.current?.focus({ preventScroll: true });
                 }, children: es ? 'Borrar selección' : 'Clear selection' })), hasContent(description) && (_jsx("span", { className: "dgm-description", id: `${controlId}-description`, children: description })), hasContent(message) && (_jsx("span", { className: "dgm-error", id: `${controlId}-error`, children: message }))] }));

package/dist/date-picker.js

@@ -11,7 +11,7 @@ import { useControllable } from './internal/state.js';
 import { restoreFocus } from './internal/focus.js';
 import { preventTriggerLabelDismiss } from './internal/trigger-label.js';
 import { useFieldOpen } from './internal/field-open.js';
-import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { OverlayLayerProvider, OverlayScrollBoundary, useOverlayLayer, } from './internal/overlay-layer.js';
 import { cx, hasContent } from './utils.js';
 /** Conserva la orientación de DayPicker y unifica sus controles con el resto de iconos. */
 function CalendarChevron({ orientation = 'down', size = 18, className, style, }) {
@@ -112,22 +112,22 @@ function CalendarField({ props, from, to, range, onSelect, }) {
                     event.preventDefault();
                     setInvalid(true);
                     trigger.current?.focus({ preventScroll: true });
-                } })), _jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { ref: trigger, id: controlId, disabled: disabled, className: cx('dgm-input', 'dgm-date-trigger', className), "aria-labelledby": `${controlId}-label ${controlId}-value`, "aria-describedby": describedBy, "aria-invalid": hasContent(message) || undefined, children: [_jsx("span", { id: `${controlId}-value`, children: display }), _jsx(CalendarIcon, {})] }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { className: "dgm-calendar-panel", style: layerStyle, sideOffset: 6, collisionPadding: 12, "aria-labelledby": `${controlId}-label`, onInteractOutside: (event) => {
-                                    if (preventTriggerLabelDismiss(event, trigger.current))
-                                        return;
-                                    interactedOutside.current = true;
-                                }, onCloseAutoFocus: (event) => {
-                                    event.preventDefault();
-                                    if (!interactedOutside.current)
-                                        restoreFocus(trigger.current);
-                                    interactedOutside.current = false;
-                                }, children: range ? (_jsx(DayPicker, { ...shared, mode: "range", excludeDisabled: true, selected: first ? { from: first, to: last } : undefined, onSelect: (selection, day) => {
-                                        // El primer clic inicia un intervalo; el segundo lo completa, incluso en el mismo día.
-                                        if (!first || last)
-                                            choose(toDay(day));
-                                        else
-                                            choose(selection?.from ? toDay(selection.from) : undefined, selection?.to ? toDay(selection.to) : undefined);
-                                    } })) : (_jsx(DayPicker, { ...shared, mode: "single", selected: first, onSelect: (selection) => choose(selection ? toDay(selection) : undefined) })) }) })] }) }), clearable && first && (_jsx("button", { type: "button", className: "dgm-text-action", disabled: disabled, onClick: () => {
+                } })), _jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { ref: trigger, id: controlId, disabled: disabled, className: cx('dgm-input', 'dgm-date-trigger', className), "aria-labelledby": `${controlId}-label ${controlId}-value`, "aria-describedby": describedBy, "aria-invalid": hasContent(message) || undefined, children: [_jsx("span", { id: `${controlId}-value`, children: display }), _jsx(CalendarIcon, {})] }), _jsx(Popover.Portal, { children: _jsx(OverlayScrollBoundary, { children: _jsx(Popover.Content, { className: "dgm-calendar-panel", style: layerStyle, sideOffset: 6, collisionPadding: 12, "aria-labelledby": `${controlId}-label`, onInteractOutside: (event) => {
+                                        if (preventTriggerLabelDismiss(event, trigger.current))
+                                            return;
+                                        interactedOutside.current = true;
+                                    }, onCloseAutoFocus: (event) => {
+                                        event.preventDefault();
+                                        if (!interactedOutside.current)
+                                            restoreFocus(trigger.current);
+                                        interactedOutside.current = false;
+                                    }, children: range ? (_jsx(DayPicker, { ...shared, mode: "range", excludeDisabled: true, selected: first ? { from: first, to: last } : undefined, onSelect: (selection, day) => {
+                                            // El primer clic inicia un intervalo; el segundo lo completa, incluso en el mismo día.
+                                            if (!first || last)
+                                                choose(toDay(day));
+                                            else
+                                                choose(selection?.from ? toDay(selection.from) : undefined, selection?.to ? toDay(selection.to) : undefined);
+                                        } })) : (_jsx(DayPicker, { ...shared, mode: "single", selected: first, onSelect: (selection) => choose(selection ? toDay(selection) : undefined) })) }) }) })] }) }), clearable && first && (_jsx("button", { type: "button", className: "dgm-text-action", disabled: disabled, onClick: () => {
                     choose();
                     trigger.current?.focus({ preventScroll: true });
                 }, children: isSpanish ? 'Borrar fecha' : 'Clear date' })), hasContent(description) && (_jsx("span", { className: "dgm-description", id: `${controlId}-description`, children: description })), hasContent(message) && (_jsx("span", { className: "dgm-error", id: `${controlId}-error`, children: message }))] }));

package/dist/drawer.js

@@ -10,9 +10,10 @@ import { cx, hasContent } from './utils.js';
 /** Atrapa el foco, bloquea el fondo y mantiene la cabecera y las acciones visibles. */
 export function Drawer({ open, onOpenChange, title, description, children, footer, side = 'right', closeLabel = 'Close drawer', closeOnOverlayClick = true, className, }) {
     const { depth, style: layerStyle } = useOverlayLayer();
+    const scrollContainer = useRef(null);
     const returnFocus = useRef(null);
     const descriptionId = useId();
-    return (_jsx(OverlayLayerProvider, { depth: depth, 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, { style: layerStyle, className: cx('dgm-drawer', `dgm-drawer--${side}`, className), "aria-describedby": hasContent(description) ? descriptionId : undefined, onOpenAutoFocus: () => {
+    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) => {

package/dist/internal/overlay-layer.d.ts

@@ -1,12 +1,23 @@
 /** La profundidad React atraviesa los portales sin cambiar su destino ni su geometría. */
-import { type CSSProperties, type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode, type ReactElement, type RefObject } from 'react';
+/**
+ * El bloqueo superior de Radix excluye los portales hermanos de Dialog.Content.
+ * Este límite registra el panel y conserva el diálogo como región permitida;
+ * no activa el modo modal de Popover, que bloquearía etiquetas y otros controles.
+ * forwardProps evita añadir contenedores que alteren la geometría de Popper.
+ * La ref llega al DOM para que Presence conserve las animaciones de salida.
+ */
+export declare const OverlayScrollBoundary: import("react").ForwardRefExoticComponent<{
+    children: ReactElement;
+} & import("react").RefAttributes<HTMLDivElement>>;
 /** Cada panel pertenece a la siguiente capa del panel que contiene su disparador. */
 export declare function useOverlayLayer(): {
     depth: number;
     style: CSSProperties;
 };
 /** Sin contenedor DOM: los portales siguen escapando del overflow y transform del padre. */
-export declare function OverlayLayerProvider({ depth, children }: {
+export declare function OverlayLayerProvider({ depth, children, scrollContainer, }: {
     depth: number;
     children: ReactNode;
+    scrollContainer?: RefObject<HTMLDivElement | null>;
 }): import("react").JSX.Element;

package/dist/internal/overlay-layer.js

@@ -1,7 +1,20 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 /** La profundidad React atraviesa los portales sin cambiar su destino ni su geometría. */
-import { createContext, useContext } from 'react';
+import { createContext, forwardRef, useContext, } from 'react';
+import { RemoveScroll } from 'react-remove-scroll';
+const OverlayScrollContainer = createContext(undefined);
+/**
+ * El bloqueo superior de Radix excluye los portales hermanos de Dialog.Content.
+ * Este límite registra el panel y conserva el diálogo como región permitida;
+ * no activa el modo modal de Popover, que bloquearía etiquetas y otros controles.
+ * forwardProps evita añadir contenedores que alteren la geometría de Popper.
+ * La ref llega al DOM para que Presence conserve las animaciones de salida.
+ */
+export const OverlayScrollBoundary = forwardRef(function OverlayScrollBoundary({ children }, ref) {
+    const container = useContext(OverlayScrollContainer);
+    return (_jsx(RemoveScroll, { ref: ref, enabled: !!container, shards: container ? [container] : [], forwardProps: true, allowPinchZoom: true, removeScrollBar: false, children: children }));
+});
 const OverlayDepth = createContext(-1);
 /** Cada panel pertenece a la siguiente capa del panel que contiene su disparador. */
 export function useOverlayLayer() {
@@ -9,6 +22,7 @@ export function useOverlayLayer() {
     return { depth, style: { '--dgm-layer-depth': depth } };
 }
 /** Sin contenedor DOM: los portales siguen escapando del overflow y transform del padre. */
-export function OverlayLayerProvider({ depth, children }) {
-    return _jsx(OverlayDepth.Provider, { value: depth, children: children });
+export function OverlayLayerProvider({ depth, children, scrollContainer, }) {
+    const inheritedContainer = useContext(OverlayScrollContainer);
+    return (_jsx(OverlayDepth.Provider, { value: depth, children: _jsx(OverlayScrollContainer.Provider, { value: scrollContainer ?? inheritedContainer, children: children }) }));
 }

package/dist/modal.js

@@ -10,9 +10,10 @@ import { cx, hasContent } from './utils.js';
 /** Portal con cabecera fija y cuerpo desplazable para contenidos largos y pantallas pequeñas. */
 export function Modal({ open, onOpenChange, title, description, children, footer, closeLabel = 'Close dialog', closeOnOverlayClick = true, className, }) {
     const { depth, style: layerStyle } = useOverlayLayer();
+    const scrollContainer = useRef(null);
     const returnFocus = useRef(null);
     const descriptionId = useId();
-    return (_jsx(OverlayLayerProvider, { depth: depth, 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, { style: layerStyle, className: cx('dgm-modal', className), "aria-describedby": hasContent(description) ? descriptionId : undefined, onOpenAutoFocus: () => {
+    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;

package/dist/multi-select.d.ts

@@ -4,8 +4,11 @@ import type { ComboboxOption } from './combobox.js';
 export interface MultiSelectProps {
     label: ReactNode;
     options: readonly ComboboxOption[];
+    /** IDs seleccionados. Controla esta prop para leer y presentar la selección fuera del selector. */
     value?: string[];
+    /** Selección inicial no controlada; los cambios se comunican mediante onValueChange. */
     defaultValue?: string[];
+    /** Notifica los IDs tras cada cambio, sin imponer cómo se representan externamente. */
     onValueChange?: (value: string[]) => void;
     name?: string;
     required?: boolean;

package/dist/multi-select.js

@@ -7,7 +7,7 @@ import { Button } from './button.js';
 import { Input } from './fields.js';
 import { Checkbox } from './toggles.js';
 import { useControllable } from './internal/state.js';
-import { ChevronIcon, CloseIcon } from './internal/icons.js';
+import { ChevronIcon } from './internal/icons.js';
 import { cx, hasContent } from './utils.js';
 import { ScrollHints } from './internal/scroll-hints.js';
 import { useFieldOpen } from './internal/field-open.js';
@@ -56,8 +56,5 @@ export function MultiSelect({ label, options, value, defaultValue = [], onValueC
                                         ? [...selected, option.value]
                                         : selected.filter((item) => item !== option.value)) }, option.value)))) : (_jsx("p", { role: "status", className: "dgm-description", children: emptyMessage ?? (es ? 'Sin resultados.' : 'No results.') })) }) }), _jsx(Button, { variant: "secondary", fullWidth: true, onClick: () => setOpen(false), children: es ? 'Listo' : 'Done' })] }), children: _jsxs("button", { ref: trigger, type: "button", id: fieldId, disabled: disabled, "aria-describedby": describedBy, "aria-invalid": hasContent(message) || undefined, className: "dgm-input dgm-multi-trigger", children: [_jsx("span", { children: current.length
                                 ? `${current.length} ${es ? 'seleccionadas' : 'selected'}`
-                                : (placeholder ?? (es ? 'Seleccionar opciones' : 'Select options')) }), _jsx(ChevronIcon, {})] }) }), current.length > 0 && (_jsx("ul", { className: "dgm-multi-tags", "aria-label": es ? 'Opciones seleccionadas' : 'Selected options', children: current.map((option) => (_jsxs("li", { children: [option.label, _jsx("button", { type: "button", disabled: disabled || option.disabled, "aria-label": `${es ? 'Quitar' : 'Remove'} ${option.label}`, onClick: () => {
-                                update(selected.filter((item) => item !== option.value));
-                                trigger.current?.focus({ preventScroll: true });
-                            }, children: _jsx(CloseIcon, {}) })] }, option.value))) })), hasContent(description) && (_jsx("span", { id: `${fieldId}-description`, className: "dgm-description", children: description })), hasContent(message) && (_jsx("span", { id: `${fieldId}-error`, className: "dgm-error", children: message }))] }));
+                                : (placeholder ?? (es ? 'Seleccionar opciones' : 'Select options')) }), _jsx(ChevronIcon, {})] }) }), hasContent(description) && (_jsx("span", { id: `${fieldId}-description`, className: "dgm-description", children: description })), hasContent(message) && (_jsx("span", { id: `${fieldId}-error`, className: "dgm-error", children: message }))] }));
 }

package/dist/popover.js

@@ -6,7 +6,7 @@ import * as Primitive from '@radix-ui/react-popover';
 import { restoreFocus } from './internal/focus.js';
 import { preventTriggerLabelDismiss } from './internal/trigger-label.js';
 import { CloseIcon } from './internal/icons.js';
-import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { OverlayLayerProvider, OverlayScrollBoundary, useOverlayLayer, } from './internal/overlay-layer.js';
 import { cx } from './utils.js';
 /** El panel no bloquea la página; un clic fuera conserva su destino de foco. */
 export function Popover({ children, title, content, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 8, disabled, closeLabel = 'Close popover', className, }) {
@@ -14,14 +14,14 @@ export function Popover({ children, title, content, open, defaultOpen, onOpenCha
     const titleId = useId();
     const trigger = useRef(null);
     const outside = useRef(false);
-    return (_jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Primitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, 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, "aria-labelledby": titleId, className: cx('dgm-popover', className), onInteractOutside: (event) => {
-                            if (preventTriggerLabelDismiss(event, trigger.current))
-                                return;
-                            outside.current = true;
-                        }, onCloseAutoFocus: (event) => {
-                            event.preventDefault();
-                            if (!outside.current)
-                                restoreFocus(trigger.current);
-                            outside.current = false;
-                        }, children: [_jsx("div", { className: "dgm-popover-heading", id: titleId, children: title }), _jsx(Primitive.Close, { className: "dgm-icon-close", "aria-label": closeLabel, children: _jsx(CloseIcon, {}) }), _jsx("div", { className: "dgm-popover-body", children: content })] }) })] }) }));
+    return (_jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Primitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(Primitive.Trigger, { asChild: true, ref: trigger, disabled: disabled, children: children }), _jsx(Primitive.Portal, { children: _jsx(OverlayScrollBoundary, { children: _jsxs(Primitive.Content, { style: layerStyle, side: side, align: align, sideOffset: sideOffset, collisionPadding: 12, "aria-labelledby": titleId, className: cx('dgm-popover', className), onInteractOutside: (event) => {
+                                if (preventTriggerLabelDismiss(event, trigger.current))
+                                    return;
+                                outside.current = true;
+                            }, onCloseAutoFocus: (event) => {
+                                event.preventDefault();
+                                if (!outside.current)
+                                    restoreFocus(trigger.current);
+                                outside.current = false;
+                            }, children: [_jsx("div", { className: "dgm-popover-heading", id: titleId, children: title }), _jsx(Primitive.Close, { className: "dgm-icon-close", "aria-label": closeLabel, children: _jsx(CloseIcon, {}) }), _jsx("div", { className: "dgm-popover-body", children: content })] }) }) })] }) }));
 }