@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/cjs/sui-modal.cjs.entry.js

@@ -0,0 +1,336 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var scrollLock = require('./scroll-lock-CYNmQzYa.js');
+var suiToque = require('./sui-toque-TviBCJ0g.js');
+var enfocables = require('./enfocables-BhbuiUOA.js');
+
+const suiModalCss = () => `.sc-sui-modal-h{display:contents}.sui-modal__backdrop.sc-sui-modal{position:fixed;inset:0;z-index:1000;background-color:rgba(51, 51, 51, 0.24);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1)) both}.sui-modal__backdrop--no-blur.sc-sui-modal{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal.sc-sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container.sc-sui-modal{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, 0.1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;will-change:transform, opacity}.sui-modal__container.sc-sui-modal:focus{outline:none}.sui-modal__container[data-sui-size=small].sc-sui-modal{max-width:400px}.sui-modal__container[data-sui-size=medium].sc-sui-modal{max-width:440px}.sui-modal__container[data-sui-size=large].sc-sui-modal{max-width:560px}.sui-modal__container[data-sui-size=xlarge].sc-sui-modal{max-width:720px}.sui-modal__header.sc-sui-modal{display:flex;align-items:center;flex-shrink:0;gap:16px;padding:16px 56px 16px 20px;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);position:relative;overflow:hidden;box-sizing:border-box;min-height:80px;height:auto}.sui-modal__header.sui-modal__header--with-icon.sc-sui-modal{gap:14px}.sui-modal__header.sui-modal__header--compact.sc-sui-modal{min-height:56px;gap:12px}.sui-modal__header.sui-modal__header--compact.sui-modal__header--with-icon.sc-sui-modal{gap:14px}.sui-modal__header.sui-modal__header--close-only.sc-sui-modal{min-height:0;padding:0;border-bottom:none;background:transparent}.sui-modal__icon.sc-sui-modal{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;padding:10px;border-radius:var(--sui-radius-full, 999px);box-sizing:border-box}.sui-modal__icon[data-variant=error].sc-sui-modal{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__icon[data-variant=warning].sc-sui-modal{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__icon[data-variant=success].sc-sui-modal{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__icon[data-variant=info].sc-sui-modal{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__icon[data-variant=neutral].sc-sui-modal{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__header--compact.sc-sui-modal .sui-modal__icon.sc-sui-modal{padding:0;background:transparent;align-self:center}.sui-modal__titles.sc-sui-modal{display:block;flex:1 1 auto;min-width:0}.sui-modal__title.sc-sui-modal{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -0.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;word-break:break-word}.sui-modal__description.sc-sui-modal{margin:4px 0 0 0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-modal__title.sc-sui-modal+.sui-modal__description.sc-sui-modal{margin-top:4px}.sui-modal__description.sc-sui-modal:first-child{margin-top:0}.sui-modal__close.sc-sui-modal{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;padding:2px;border:none;background:transparent;border-radius:var(--sui-radius-6, 6px);cursor:pointer;color:var(--sui-icon-sub-600, #5c5c5c);box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out), color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out);position:absolute;top:16px;right:16px}.sui-modal__close.sc-sui-modal:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-modal__close.sc-sui-modal:focus{outline:none}.sui-modal__close.sc-sui-modal:focus-visible{outline:none;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-modal__body.sc-sui-modal{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body.sc-sui-modal:empty{display:none}.sui-modal__body--full.sc-sui-modal{padding:0;gap:0}.sui-modal__close-floating.sc-sui-modal{z-index:1}.sui-modal__status.sc-sui-modal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status.sc-sui-modal .sui-modal__icon.sc-sui-modal{align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status--row.sc-sui-modal{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row.sc-sui-modal .sui-modal__icon.sc-sui-modal{align-self:flex-start}.sui-modal__status--row.sc-sui-modal .sui-modal__status-text.sc-sui-modal{align-items:flex-start}.sui-modal__status-text.sc-sui-modal{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title.sc-sui-modal{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -0.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-modal__status-description.sc-sui-modal{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -0.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-modal__footer.sc-sui-modal{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active.sc-sui-modal .sui-modal__footer.sc-sui-modal{box-shadow:0 -4px 8px 0 rgba(14, 18, 27, 0.06)}@keyframes sui-modal-backdrop-in{from{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.sui-modal.sc-sui-modal{align-items:center;justify-content:center;padding:max(16px, env(safe-area-inset-top, 16px)) max(16px, env(safe-area-inset-right, 16px)) max(16px, env(safe-area-inset-bottom, 16px)) max(16px, env(safe-area-inset-left, 16px));box-sizing:border-box}.sui-modal__container.sc-sui-modal{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body.sc-sui-modal{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__header.sc-sui-modal,.sui-modal__footer.sc-sui-modal{flex-shrink:0}.sui-modal.sc-sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top, 0px) + 8px) 8px 8px}html.platform-android.sc-sui-modal-h .sui-modal.sc-sui-modal:has(.sui-modal__container--fullscreen),html.platform-android .sc-sui-modal-h .sui-modal.sc-sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen.sc-sui-modal .sui-modal__footer.sc-sui-modal{border-top:none}.sui-modal__container--fullscreen.sc-sui-modal,.sui-modal__container--fullscreen[data-sui-size=small].sc-sui-modal,.sui-modal__container--fullscreen[data-sui-size=medium].sc-sui-modal,.sui-modal__container--fullscreen[data-sui-size=large].sc-sui-modal,.sui-modal__container--fullscreen[data-sui-size=xlarge].sc-sui-modal{width:100%;max-width:100%;border:none;transform:translateZ(0);height:calc(100dvh - env(safe-area-inset-top, 0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0, close)){.sui-modal__container--fullscreen.sc-sui-modal,.sui-modal__container--fullscreen[data-sui-size=small].sc-sui-modal,.sui-modal__container--fullscreen[data-sui-size=medium].sc-sui-modal,.sui-modal__container--fullscreen[data-sui-size=large].sc-sui-modal,.sui-modal__container--fullscreen[data-sui-size=xlarge].sc-sui-modal{--sq-t:45px;--sq-b:68px;clip-path:shape(from 0 var(--sq-t), curve to var(--sq-t) 0 with 0 0/0 0, hline to calc(100% - var(--sq-t)), curve to 100% var(--sq-t) with 100% 0/100% 0, vline to calc(100% - var(--sq-b)), curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%, hline to var(--sq-b), curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%, close);box-shadow:none;filter:drop-shadow(0 16px 32px rgba(14, 18, 27, 0.1))}}.sui-modal__container--fullscreen.sc-sui-modal,.sui-modal__container--fullscreen[data-sui-size=small].sc-sui-modal,.sui-modal__container--fullscreen[data-sui-size=medium].sc-sui-modal,.sui-modal__container--fullscreen[data-sui-size=large].sc-sui-modal,.sui-modal__container--fullscreen[data-sui-size=xlarge].sc-sui-modal{transition:height 0.22s ease, max-height 0.22s ease}html.platform-android.sc-sui-modal-h .sui-modal__container--fullscreen.sc-sui-modal,html.platform-android .sc-sui-modal-h .sui-modal__container--fullscreen.sc-sui-modal,html.platform-android.sc-sui-modal-h .sui-modal__container--fullscreen[data-sui-size=small].sc-sui-modal,html.platform-android .sc-sui-modal-h .sui-modal__container--fullscreen[data-sui-size=small].sc-sui-modal,html.platform-android.sc-sui-modal-h .sui-modal__container--fullscreen[data-sui-size=medium].sc-sui-modal,html.platform-android .sc-sui-modal-h .sui-modal__container--fullscreen[data-sui-size=medium].sc-sui-modal,html.platform-android.sc-sui-modal-h .sui-modal__container--fullscreen[data-sui-size=large].sc-sui-modal,html.platform-android .sc-sui-modal-h .sui-modal__container--fullscreen[data-sui-size=large].sc-sui-modal,html.platform-android.sc-sui-modal-h .sui-modal__container--fullscreen[data-sui-size=xlarge].sc-sui-modal,html.platform-android .sc-sui-modal-h .sui-modal__container--fullscreen[data-sui-size=xlarge].sc-sui-modal{border-radius:var(--sui-radius-20, 20px);--sq-t:25px;--sq-b:25px;height:calc(100dvh - env(safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body.sc-sui-modal{scrollbar-width:none}.sui-modal__body.sc-sui-modal::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen.sc-sui-modal .sui-modal__body.sc-sui-modal{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}@media (max-width: 767px){.sui-modal__close.sc-sui-modal::before{content:"";position:absolute;inset:calc((100% - 44px) / 2)}}`;
+
+/** ¿Corre dentro de la app nativa? Se lee de la clase que el host pone en
+ *  `<html>` (`platform-ios` / `platform-android`), no del runtime de Capacitor:
+ *  el DS no puede depender de la app que lo usa. */
+function enApp() {
+    if (typeof document === 'undefined')
+        return false;
+    const c = document.documentElement.classList;
+    return c.contains('platform-ios') || c.contains('platform-android');
+}
+const SuiModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChange = index.createEvent(this, "openChange");
+        this.closed = index.createEvent(this, "closed");
+        this._uid = ++SuiModal._nextId;
+        this.titleId = `sui-modal-title-${this._uid}`;
+        this.descId = `sui-modal-desc-${this._uid}`;
+        this._previousFocus = null;
+        // -- Inputs ------------------------------------------------------------------
+        /** Estado abierto/cerrado. Two-way: emite `openChange` al togglear. Default `false`. */
+        this.open = false;
+        /** Ancho maximo del container. Default `medium` (440px). */
+        this.size = 'medium';
+        /**
+         * Titulo del modal. Renombrado de `title` del Angular original (`title` es
+         * reservado del DOM -> tooltip nativo). En HTML el atributo es `heading`.
+         */
+        this.heading = null;
+        /** Subtitulo bajo el titulo (Paragraph/X-Small). Mostrado solo en Medium+. */
+        this.description = null;
+        /** Cierra al hacer click en el overlay. Default `true`. */
+        this.closeOnBackdrop = true;
+        /** Cierra al presionar Escape. Default `true`. */
+        this.closeOnEscape = true;
+        /** Muestra el boton X de cierre. Default `true`. */
+        this.showClose = true;
+        /** Icono circular semantico en el header. Default `null`. */
+        this.iconVariant = null;
+        /**
+         * Icono contextual del header (RemixIcon, ej. 'add-circle-line'). Mutuamente
+         * excluyente con `iconVariant`: si se pasa, se usa con un contenedor circular
+         * bg neutral-lighter + color sub-600. Si NO se pasa y hay `iconVariant`,
+         * fallback al variant semantico. Default `null`.
+         */
+        this.headerIcon = null;
+        /**
+         * Anatomia Status Modal de Figma (set 480:1372). `null` (default) = header
+         * normal (Modal Header 466:4778) con el icono a la izquierda del titulo.
+         * `horizontal` (480:1366): tile + texto en FILA dentro del body, sin header,
+         * con la X flotante. `vertical`: icono centrado arriba + texto centrado en
+         * columna. Requiere `iconVariant` o `headerIcon`. Default `null`.
+         */
+        this.statusAlignment = null;
+        /**
+         * Aplica `backdrop-filter: blur(10px)` al overlay. Por defecto `true` -
+         * extra-feature "glass" del proyecto encima del overlay-gray plano del DS
+         * (rgba(51,51,51,0.24)). Pasar `backdrop-blur=false` lo quita y deja el overlay
+         * plano DS-puro. Default `true`.
+         */
+        this.backdropBlur = true;
+        /**
+         * Solo afecta en mobile (<=768px): card flotante a pantalla completa (inset
+         * 8px, esquinas iOS 36/54 squircle o radius-20 en Android), respeta los
+         * safe-areas y se eleva con el teclado (`--sui-keyboard-h`, solo iOS). En
+         * desktop el modal sigue centrado segun `size`.
+         *
+         * `'auto'` (default) resuelve por plataforma: dentro de la app nativa
+         * (`html.platform-ios` / `html.platform-android`) va a pantalla completa; en
+         * el navegador queda centrado. `true` la fuerza tambien en la web; `false`
+         * la desactiva siempre (confirmaciones de una linea con dos botones).
+         * El atributo sin valor (`<sui-modal fullscreen>`) equivale a `true`.
+         */
+        this.fullscreen = 'auto';
+        /**
+         * Quita el padding del body para contenido full-bleed (mapas, imagenes
+         * grandes). El consumer maneja su propio spacing interno. Default `false`.
+         */
+        this.fullBody = false;
+        // -- State -------------------------------------------------------------------
+        /** True cuando el body tiene overflow pendiente (activa el shadow del footer). */
+        this.scrollActive = false;
+        /** True cuando el consumer proyecto contenido en el slot `footer`. */
+        this.hasFooterSlot = false;
+        /** Plataforma leida al construir CADA modal (no una vez por modulo): si el
+         *  host marca `<html>` despues de cargar la lib, el modal que nace luego ya
+         *  ve la clase. */
+        this.enAppAlNacer = enApp();
+        // -- Event handlers ----------------------------------------------------------
+        this.onBackdropClick = () => {
+            if (this.closeOnBackdrop)
+                this.close();
+        };
+    }
+    /** `fullscreen` ya resuelto (normaliza el atributo string de HTML). */
+    get esFullscreen() {
+        const v = this.fullscreen;
+        if (v === 'auto' || v == null)
+            return this.enAppAlNacer;
+        return v === true || v === '' || v === 'true';
+    }
+    // -- Lifecycle ---------------------------------------------------------------
+    componentWillLoad() {
+        this.hasFooterSlot = !!this.el.querySelector('[slot="footer"]');
+        /* `title` (nombre del input en el SUI Angular) vale como alias de `heading`
+           y se quita del host: si queda, el navegador muestra el tooltip nativo. */
+        const titleAttr = this.el.getAttribute('title');
+        if (titleAttr !== null) {
+            if (this.heading == null)
+                this.heading = titleAttr;
+            this.el.removeAttribute('title');
+        }
+    }
+    componentDidLoad() {
+        this._escapeHandler = (e) => {
+            if (e.key === 'Escape' && this.open && this.closeOnEscape) {
+                this.close();
+            }
+            if (e.key === 'Tab' && this.open)
+                this._trapTab(e);
+        };
+        document.addEventListener('keydown', this._escapeHandler);
+        // Si arranca abierto (open=true en el markup inicial) corre el flow de apertura.
+        if (this.open)
+            this._onOpened();
+    }
+    disconnectedCallback() {
+        if (this._escapeHandler) {
+            document.removeEventListener('keydown', this._escapeHandler);
+            this._escapeHandler = undefined;
+        }
+        this._unlockScroll();
+        this._unbindScrollDetection();
+    }
+    /**
+     * React al cambio de `open` (equivale al `effect(() => open())` del Angular).
+     * Stencil corre @Watch despues del primer render, asi que el caso de arranque
+     * abierto se cubre en componentDidLoad.
+     */
+    onOpenChange(isOpen, wasOpen) {
+        if (isOpen === wasOpen)
+            return;
+        this.openChange.emit(isOpen);
+        if (isOpen) {
+            this._onOpened();
+        }
+        else {
+            this._onClosed();
+        }
+    }
+    _onOpened() {
+        this._previousFocus = document.activeElement;
+        this._lockScroll();
+        // Esperar al render del container + body antes de medir/focusear.
+        setTimeout(() => {
+            this._focusFirst();
+            this._bindScrollDetection();
+        }, 50);
+    }
+    _onClosed() {
+        this._unbindScrollDetection();
+        this._unlockScroll();
+        this.closed.emit();
+        if (this._previousFocus && this._previousFocus.focus) {
+            this._previousFocus.focus();
+        }
+    }
+    /** iOS :active: listeners PASIVOS en el host (homólogo de SuiToque); sueltan el foco de la X. */
+    alTocar() {
+        /* presencia del listener = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    alSoltar(event) {
+        suiToque.soltarToque(event, '.sui-modal__close, .sui-modal__close-floating');
+    }
+    // -- Public API --------------------------------------------------------------
+    /** Cierra el modal. Dispara el watch -> openChange + closed + scroll unlock + focus restore. */
+    async close() {
+        this.open = false;
+    }
+    // -- Scroll lock -------------------------------------------------------------
+    _lockScroll() {
+        scrollLock.lockBodyScroll(this.el);
+    }
+    _unlockScroll() {
+        scrollLock.unlockBodyScroll(this.el);
+    }
+    // -- Scroll detection (shadow del footer cuando hay overflow pendiente) -------
+    _bindScrollDetection() {
+        const elBody = this.bodyRef;
+        if (!elBody)
+            return;
+        const check = () => {
+            const hasOverflow = elBody.scrollHeight > elBody.clientHeight;
+            const notAtBottom = elBody.scrollTop + elBody.clientHeight < elBody.scrollHeight - 1;
+            this.scrollActive = hasOverflow && notAtBottom;
+        };
+        this._bodyScrollListener = check;
+        elBody.addEventListener('scroll', check, { passive: true });
+        if (typeof ResizeObserver !== 'undefined') {
+            this._bodyResizeObserver = new ResizeObserver(check);
+            this._bodyResizeObserver.observe(elBody);
+        }
+        check();
+    }
+    _unbindScrollDetection() {
+        var _a;
+        const elBody = this.bodyRef;
+        if (elBody && this._bodyScrollListener) {
+            elBody.removeEventListener('scroll', this._bodyScrollListener);
+        }
+        this._bodyScrollListener = undefined;
+        (_a = this._bodyResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._bodyResizeObserver = undefined;
+        this.scrollActive = false;
+    }
+    /** Tab / Shift+Tab dan la vuelta dentro del modal: el foco no se escapa al fondo. */
+    _trapTab(e) {
+        const box = this.containerRef;
+        const active = document.activeElement;
+        /* Solo si el foco está en este modal: con dos abiertos, manda el de arriba. */
+        if (!box || !active || !box.contains(active))
+            return;
+        const items = Array.from(box.querySelectorAll(enfocables.ENFOCABLES));
+        if (!items.length) {
+            e.preventDefault();
+            return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        if (e.shiftKey && (active === first || active === box)) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && active === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+    _focusFirst() {
+        var _a;
+        // Focusa el container (tabindex=-1) en vez del primer button: screen readers
+        // leen el contexto del modal pero no destacamos un elemento concreto (evita
+        // el ring naranja en el X al abrir). El Tab/Shift+Tab navega dentro del modal.
+        (_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+    }
+    // -- Derived -----------------------------------------------------------------
+    /** RemixIcon name del header: prefiere `headerIcon`; si no, deriva del `iconVariant`. */
+    get iconName() {
+        const custom = this.headerIcon;
+        if (custom)
+            return custom;
+        switch (this.iconVariant) {
+            case 'error':
+                return 'error-warning-fill';
+            case 'warning':
+                return 'alert-fill';
+            case 'success':
+                return 'checkbox-circle-fill';
+            case 'info':
+                return 'information-fill';
+            default:
+                return 'information-fill';
+        }
+    }
+    /** Si se renderiza el circulo del icono (cualquiera de los dos inputs lo activa). */
+    get hasHeaderIcon() {
+        return !!this.headerIcon || !!this.iconVariant;
+    }
+    /** data-variant del circulo: variant semantico, o 'neutral' si solo hay headerIcon. */
+    get resolvedIconVariant() {
+        var _a;
+        return (_a = this.iconVariant) !== null && _a !== void 0 ? _a : (this.headerIcon ? 'neutral' : 'info');
+    }
+    /** Modo Status Modal (statusAlignment + icono): icono+texto van en el body
+     *  (Figma 480:1372 no tiene header) y solo queda la X flotante. */
+    get isStatus() {
+        return this.statusAlignment != null && this.hasHeaderIcon;
+    }
+    get isStatusVertical() {
+        return this.isStatus && this.statusAlignment === 'vertical';
+    }
+    get isStatusHorizontal() {
+        return this.isStatus && this.statusAlignment === 'horizontal';
+    }
+    /** Header "Small 56" (sin description): icono flat 24px sin circulo. */
+    get isCompactHeader() {
+        return !this.description;
+    }
+    renderClose(extraClass) {
+        return (index.h("button", { type: "button", class: { 'sui-modal__close': true, [extraClass !== null && extraClass !== void 0 ? extraClass : '']: !!extraClass }, "aria-label": "Cerrar", onClick: () => this.close() }, index.h("sui-icon", { name: "close-line", size: 20 })));
+    }
+    render() {
+        if (!this.open) {
+            // Lazy mount: cerrado no renderiza nada (equivale al `@if (open())` del Angular).
+            return index.h(index.Host, null);
+        }
+        const status = this.isStatus;
+        const showHeader = !status && (!!this.heading || this.showClose);
+        const fullscreen = this.esFullscreen;
+        return (index.h(index.Host, { "data-sui-modal-fullscreen": fullscreen ? '' : undefined }, index.h("div", { class: {
+                'sui-modal__backdrop': true,
+                'sui-modal__backdrop--no-blur': !this.backdropBlur,
+            }, onClick: this.onBackdropClick, role: "presentation", "aria-hidden": "true" }), index.h("div", { class: "sui-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? this.titleId : undefined, "aria-describedby": this.description ? this.descId : undefined }, index.h("div", { class: {
+                'sui-modal__container': true,
+                'sui-modal__container--scroll-active': this.scrollActive,
+                'sui-modal__container--fullscreen': fullscreen,
+                'sui-modal__container--status-vertical': this.isStatusVertical,
+            }, "data-sui-size": this.size, tabindex: -1, ref: (el) => (this.containerRef = el) }, status && this.showClose && this.renderClose('sui-modal__close-floating'), showHeader && (index.h("header", { class: {
+                'sui-modal__header': true,
+                'sui-modal__header--with-icon': this.hasHeaderIcon,
+                'sui-modal__header--compact': this.isCompactHeader,
+            } }, this.hasHeaderIcon && (index.h("div", { class: "sui-modal__icon", "data-variant": this.resolvedIconVariant }, index.h("sui-icon", { name: this.iconName, size: this.isCompactHeader ? 24 : 20 }))), index.h("div", { class: "sui-modal__titles" }, this.heading && (index.h("h2", { id: this.titleId, class: "sui-modal__title" }, this.heading)), this.description && (index.h("p", { id: this.descId, class: "sui-modal__description" }, this.description))), this.showClose && this.renderClose())), index.h("div", { class: {
+                'sui-modal__body': true,
+                'sui-modal__body--full': this.fullBody,
+                'sui-modal__body--status': status,
+            }, ref: (el) => (this.bodyRef = el) }, status && (index.h("div", { class: { 'sui-modal__status': true, 'sui-modal__status--row': this.isStatusHorizontal } }, index.h("div", { class: "sui-modal__icon", "data-variant": this.resolvedIconVariant }, index.h("sui-icon", { name: this.iconName, size: 24 })), (this.heading || this.description) && (index.h("div", { class: "sui-modal__status-text" }, this.heading && (index.h("h2", { id: this.titleId, class: "sui-modal__status-title" }, this.heading)), this.description && (index.h("p", { id: this.descId, class: "sui-modal__status-description" }, this.description)))))), index.h("slot", null)), this.hasFooterSlot && (index.h("div", { class: "sui-modal__footer" }, index.h("slot", { name: "footer" })))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+SuiModal._nextId = 0;
+SuiModal.style = suiModalCss();
+
+exports.sui_modal = SuiModal;

package/dist/cjs/sui-notification-footer.cjs.entry.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiNotificationFooterCss = () => `@charset "UTF-8";.sc-sui-notification-footer-h{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;padding:14px 20px;background:var(--sui-bg-white-0, #ffffff);box-sizing:border-box;overflow:clip}.sui-notif-footer__navigate.sc-sui-notification-footer{display:flex;align-items:center;gap:8px;flex:1 0 0;min-width:1px}.sui-notif-footer__label.sc-sui-notification-footer{font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;white-space:nowrap}.sui-notif-footer__manage.sc-sui-notification-footer{flex-shrink:0}`;
+
+const SuiNotificationFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.manageClick = index.createEvent(this, "manageClick");
+        /** Texto antes de las teclas (en Angular sale de provideSuiTextos). */
+        this.usePrefix = 'Usa';
+        /** Texto despues de las teclas. */
+        this.useSuffix = 'para moverte';
+        /**
+         * Link de la derecha. `true` (default) = «Administrar notificaciones»; string =
+         * ese label; objeto `{ label, href?, target?, rel? }` (por property) = `<a>`
+         * real; `false` / `null` = sin link. Como atributo: `manage="false"`.
+         */
+        this.manage = true;
+    }
+    get manageCfg() {
+        var _a;
+        const m = this.manage;
+        /* Como atributo llega string: «false» oculta, «true» / vacío = label default. */
+        if (m == null || m === false || m === 'false')
+            return null;
+        const cfg = m === true || m === 'true' || m === ''
+            ? { label: 'Administrar notificaciones' }
+            : typeof m === 'string'
+                ? { label: m }
+                : m;
+        if (!cfg.label)
+            return null;
+        return Object.assign(Object.assign({}, cfg), { rel: (_a = cfg.rel) !== null && _a !== void 0 ? _a : (cfg.target === '_blank' ? 'noopener noreferrer' : undefined) });
+    }
+    componentWillLoad() {
+        this.el.removeAttribute('title');
+    }
+    render() {
+        var _a, _b, _c;
+        const manage = this.manageCfg;
+        return (index.h(index.Host, { key: '71868b998e29b51d64490d9230dc045389a2d827' }, index.h("div", { key: '0d206d2a0925daf013aac617aa80142061b6bce0', class: "sui-notif-footer__navigate" }, index.h("span", { key: '6023fde00100cc64307be0fa7c64c6ecbb87ded7', class: "sui-notif-footer__label" }, this.usePrefix), index.h("sui-kbd", { key: '489eef8587e4689aefcd8defd5eeaca6f4db1d91', variant: "subtle" }, index.h("sui-icon", { key: 'c60c8932f72099f171cbf8b1b373b8a370ed4049', name: "arrow-up-line", size: 16 })), index.h("sui-kbd", { key: '2d6df5632adcf81824b3895eb9a6be2f1c57df98', variant: "subtle" }, index.h("sui-icon", { key: '06258285a86c32a44a43f0df99a870a55719b8f4', name: "arrow-down-line", size: 16 })), index.h("span", { key: 'cc0517f685eeb4f3b4324052bbb6673d444f0817', class: "sui-notif-footer__label" }, this.useSuffix)), manage && (index.h("sui-link-button", { key: '0b859369ccef5b14145b25b03b3d01d240d10b2c', class: "sui-notif-footer__manage", variant: "gray", size: "small", leftIcon: "settings-2-line", href: (_a = manage.href) !== null && _a !== void 0 ? _a : null, target: (_b = manage.target) !== null && _b !== void 0 ? _b : null, rel: (_c = manage.rel) !== null && _c !== void 0 ? _c : null, onClicked: (e) => this.manageClick.emit(e.detail) }, manage.label))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiNotificationFooter.style = suiNotificationFooterCss();
+
+exports.sui_notification_footer = SuiNotificationFooter;

package/dist/cjs/sui-notification-tab-menu.cjs.entry.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var rovingFocus = require('./roving-focus-J_7U6aRM.js');
+var suiToque = require('./sui-toque-TviBCJ0g.js');
+
+const suiNotificationTabMenuCss = () => `@charset "UTF-8";.sc-sui-notification-tab-menu-h{position:relative;display:flex;align-items:center;gap:20px;padding:14px 20px;border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-sizing:border-box;width:100%}.sui-ntm__tabs.sc-sui-notification-tab-menu{display:flex;align-items:center;align-self:stretch;gap:20px}.sui-ntm__tab.sc-sui-notification-tab-menu{position:relative;display:inline-flex;align-items:center;flex-shrink:0;padding:0;border:none;border-radius:var(--sui-radius-4, 4px);background:transparent;cursor:pointer;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;font-optical-sizing:auto;color:var(--sui-text-sub-600);text-align:center;white-space:nowrap;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-ntm__tab.sc-sui-notification-tab-menu .sui-ntm__text.sc-sui-notification-tab-menu{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-ntm__tab.sc-sui-notification-tab-menu::after{content:"";position:absolute;bottom:-14px;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-ntm__tab.sc-sui-notification-tab-menu:hover:not(.sui-ntm__tab--active){color:var(--sui-text-strong-950)}.sui-ntm__tab.sc-sui-notification-tab-menu:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-primary-alpha-10)}.sui-ntm__tab--active.sc-sui-notification-tab-menu{color:var(--sui-text-strong-950)}.sui-ntm__tab--active.sc-sui-notification-tab-menu::after{background:var(--sui-primary-base)}.sui-ntm__divider.sc-sui-notification-tab-menu{display:block;flex-shrink:0;align-self:stretch;width:1px;background:var(--sui-stroke-soft-200)}.sui-ntm__filter.sc-sui-notification-tab-menu{position:absolute;right:12px;top:50%;transform:translateY(-50%)}`;
+
+const SuiNotificationTabMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tabChange = index.createEvent(this, "tabChange");
+        this.filterClick = index.createEvent(this, "filterClick");
+        /** Lista de tabs a renderizar. Requerido. El orden define el layout. */
+        this.tabs = [];
+        /** Renderiza el botón de filtro absoluto a la derecha (Figma prop `button`). */
+        this.showFilter = true;
+        /** aria-label del botón de filtro (en Angular sale de provideSuiTextos). */
+        this.filterLabel = 'Filtrar';
+        /** ← → mueven el foco y activan (con vuelta); Home/End a los extremos. */
+        this.onKeydown = (event) => {
+            var _a;
+            const tabs = this.tabs;
+            const idx = this.tabStopIndex;
+            const next = rovingFocus.suiRovingIndex(event.key, idx, tabs.length, 'horizontal');
+            if (next === null)
+                return;
+            event.preventDefault();
+            if (next !== idx)
+                this.select(tabs[next]);
+            (_a = this.el.querySelectorAll('.sui-ntm__tab')[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.onFilter = (event) => {
+            this.filterClick.emit(event.detail);
+        };
+    }
+    alTocar() {
+        /* presencia del listener = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    alSoltar(event) {
+        suiToque.soltarToque(event, '.sui-ntm__tab');
+    }
+    /** Índice del único tab con tabindex 0: el activo (o el primero). */
+    get tabStopIndex() {
+        return Math.max(0, this.tabs.findIndex((t) => t.value === this.active));
+    }
+    isActive(tab) {
+        return this.active === tab.value;
+    }
+    select(tab) {
+        this.active = tab.value;
+        this.tabChange.emit(tab.value);
+    }
+    render() {
+        const stop = this.tabStopIndex;
+        return (index.h(index.Host, { key: '6f1290a7dc3d1590c9d1b88146c5d6e2aa2b4e82' }, index.h("div", { key: 'f689b51bfc6731a70feeddd6cd0f3f7ff4d7ea85', class: "sui-ntm__tabs", role: "tablist", onKeyDown: this.onKeydown }, this.tabs.map((tab, i) => {
+            const activeTab = this.isActive(tab);
+            return [
+                tab.dividerBefore ? index.h("span", { class: "sui-ntm__divider", "aria-hidden": "true" }) : undefined,
+                index.h("button", { type: "button", class: { 'sui-ntm__tab': true, 'sui-ntm__tab--active': activeTab }, role: "tab", "aria-selected": activeTab ? 'true' : 'false', tabindex: stop === i ? 0 : -1, onClick: () => this.select(tab) }, index.h("span", { class: "sui-ntm__text" }, index.h("span", { class: "sui-ntm__label" }, tab.label), tab.badge ? (index.h("sui-badge", { color: "red", variant: "filled", type: "number", size: "small" }, tab.badge)) : undefined)),
+            ];
+        })), this.showFilter ? (index.h("sui-compact-button", { class: "sui-ntm__filter", icon: "filter-3-fill", variantStyle: "ghost", size: "large", fullRadius: true, ariaLabel: this.filterLabel, onClicked: this.onFilter })) : undefined));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiNotificationTabMenu.style = suiNotificationTabMenuCss();
+
+exports.sui_notification_tab_menu = SuiNotificationTabMenu;