@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/esm/sui-notification.entry.js

@@ -0,0 +1,138 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiNotificationCss = () => `@charset "UTF-8";.sc-sui-notification-h{display:block}.sui-notification.sc-sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar.sc-sui-notification{padding:12px;gap:15px;border:none}.sui-notification[data-sui-style=filled].sc-sui-notification{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled].sc-sui-notification .sui-notification__title.sc-sui-notification,.sui-notification[data-sui-style=filled].sc-sui-notification .sui-notification__description.sc-sui-notification{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled].sc-sui-notification .sui-notification__time.sc-sui-notification{color:var(--sui-static-white);opacity:0.72}.sui-notification[data-sui-style=filled].sc-sui-notification .sui-notification__close.sc-sui-notification{color:var(--sui-static-white);opacity:0.72}.sui-notification[data-sui-style=filled].sc-sui-notification .sui-notification__dot.sc-sui-notification{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info].sc-sui-notification{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success].sc-sui-notification{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning].sc-sui-notification{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error].sc-sui-notification{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature].sc-sui-notification{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default].sc-sui-notification{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default].sc-sui-notification .sui-notification__title.sc-sui-notification,.sui-notification[data-sui-style=filled][data-sui-variant=default].sc-sui-notification .sui-notification__description.sc-sui-notification,.sui-notification[data-sui-style=filled][data-sui-variant=default].sc-sui-notification .sui-notification__time.sc-sui-notification,.sui-notification[data-sui-style=filled][data-sui-variant=default].sc-sui-notification .sui-notification__close.sc-sui-notification{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default].sc-sui-notification .sui-notification__dot.sc-sui-notification{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light].sc-sui-notification{border:none}.sui-notification[data-sui-style=light].sc-sui-notification .sui-notification__title.sc-sui-notification,.sui-notification[data-sui-style=light].sc-sui-notification .sui-notification__description.sc-sui-notification{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light].sc-sui-notification .sui-notification__close.sc-sui-notification{opacity:0.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info].sc-sui-notification{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success].sc-sui-notification{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning].sc-sui-notification{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error].sc-sui-notification{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature].sc-sui-notification{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default].sc-sui-notification{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter].sc-sui-notification .sui-notification__title.sc-sui-notification{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter].sc-sui-notification .sui-notification__description.sc-sui-notification{color:var(--sui-text-strong-950);opacity:0.72}.sui-notification[data-sui-style=lighter].sc-sui-notification .sui-notification__close.sc-sui-notification{opacity:0.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info].sc-sui-notification{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success].sc-sui-notification{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning].sc-sui-notification{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error].sc-sui-notification{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature].sc-sui-notification{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default].sc-sui-notification{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification.sc-sui-notification:not([data-sui-style]):not(.sui-notification--has-avatar),.sui-notification[data-sui-style=stroke].sc-sui-notification:not(.sui-notification--has-avatar){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification.sc-sui-notification:not([data-sui-style]) .sui-notification__title.sc-sui-notification,.sui-notification[data-sui-style=stroke].sc-sui-notification .sui-notification__title.sc-sui-notification{color:var(--sui-text-strong-950)}.sui-notification.sc-sui-notification:not([data-sui-style]) .sui-notification__description.sc-sui-notification,.sui-notification[data-sui-style=stroke].sc-sui-notification .sui-notification__description.sc-sui-notification{color:var(--sui-text-sub-600)}.sui-notification.sc-sui-notification:not([data-sui-style]) .sui-notification__close.sc-sui-notification,.sui-notification[data-sui-style=stroke].sc-sui-notification .sui-notification__close.sc-sui-notification{opacity:0.4;color:var(--sui-text-strong-950)}.sui-notification.sc-sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon.sc-sui-notification,.sui-notification[data-sui-style=stroke][data-sui-variant=info].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-information-base)}.sui-notification.sc-sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon.sc-sui-notification,.sui-notification[data-sui-style=stroke][data-sui-variant=success].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-success-base)}.sui-notification.sc-sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon.sc-sui-notification,.sui-notification[data-sui-style=stroke][data-sui-variant=warning].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-warning-base)}.sui-notification.sc-sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon.sc-sui-notification,.sui-notification[data-sui-style=stroke][data-sui-variant=error].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-error-base)}.sui-notification.sc-sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon.sc-sui-notification,.sui-notification[data-sui-style=stroke][data-sui-variant=feature].sc-sui-notification .sui-notification__icon.sc-sui-notification{color:var(--sui-state-feature-base)}.sui-notification__avatar.sc-sui-notification{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar.sc-sui-notification img.sc-sui-notification{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials.sc-sui-notification{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:0.02em;user-select:none}.sui-notification__icon.sc-sui-notification{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content.sc-sui-notification{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header.sc-sui-notification{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title.sc-sui-notification{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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}.sui-notification__dot.sc-sui-notification{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}[data-sui-show-more].sc-sui-notification-h .sui-notification__time.sc-sui-notification{margin-right:32px}.sui-notification__time.sc-sui-notification{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description.sc-sui-notification{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;font-optical-sizing:auto}.sui-notification__actions.sc-sui-notification{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions.sc-sui-notification:empty{display:none}.sui-notification__close.sc-sui-notification{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close.sc-sui-notification:hover{opacity:1 !important}.sui-notification__close.sc-sui-notification{position:relative}.sui-notification__close.sc-sui-notification::before{content:"";position:absolute;inset:-10px}@media (max-width: 767px){.sui-notification__close.sc-sui-notification::before{inset:calc((100% - 44px) / 2)}}.sui-notification--hoverable.sc-sui-notification{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable.sc-sui-notification .sui-notification__more.sc-sui-notification{opacity:0;pointer-events:none;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable.sc-sui-notification:hover,.sui-notification--hoverable.sc-sui-notification:focus-within,.sui-notification--hoverable.sui-notification--active.sc-sui-notification{background:var(--sui-bg-weak-50)}.sui-notification--hoverable.sc-sui-notification:hover .sui-notification__more.sc-sui-notification,.sui-notification--hoverable.sc-sui-notification:focus-within .sui-notification__more.sc-sui-notification,.sui-notification--hoverable.sui-notification--active.sc-sui-notification .sui-notification__more.sc-sui-notification{opacity:1;pointer-events:auto}.sui-notification__description.sc-sui-notification{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time.sc-sui-notification{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep.sc-sui-notification{flex-shrink:0;color:var(--sui-text-soft-400);user-select:none}.sui-notification__company-logo.sc-sui-notification{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo.sc-sui-notification:empty{display:none}.sui-notification__company-logo.sc-sui-notification-s>img,.sui-notification__company-logo .sc-sui-notification-s>img,.sui-notification__company-logo.sc-sui-notification-s>svg,.sui-notification__company-logo .sc-sui-notification-s>svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text.sc-sui-notification{min-width:0}.sui-notification__file.sc-sui-notification{align-self:flex-start;max-width:100%;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-notification__file.sc-sui-notification-s>.sui-notification__file-size,.sui-notification__file .sc-sui-notification-s>.sui-notification__file-size{color:var(--sui-text-soft-400)}.sui-notification__file-icon.sc-sui-notification{flex-shrink:0;color:var(--sui-text-sub-600)}.sui-notification__bubble.sc-sui-notification{align-self:flex-start;max-width:100%;margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px 8px;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-notification__bubble.sc-sui-notification:empty{display:none}.sui-notification__more.sc-sui-notification{position:absolute;top:12px;right:12px;flex-shrink:0}@media (max-width: 767px){.sui-notification__more.sc-sui-notification::before{content:"";position:absolute;inset:calc((100% - 44px) / 2)}}`;
+
+const SuiNotification = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dismissed = createEvent(this, "dismissed");
+        this.moreClicked = createEvent(this, "moreClicked");
+        // ── Status-alert model (preserved) ──────────────────────────────────────
+        /** Variante semántica. Default `default` (sin color semántico). */
+        this.variant = 'default';
+        /**
+         * Estilo visual. Default `stroke`.
+         * NOTA: el @Prop público se llama `variantStyle` (igual al Angular). En HTML
+         * el atributo es `variant-style`.
+         */
+        this.variantStyle = 'stroke';
+        /**
+         * Título / línea principal.
+         * Renombrado desde el `title` del Angular: `title` es un @Prop reservado del
+         * DOM (dispara el tooltip nativo gris). En HTML el atributo es `heading`.
+         */
+        this.heading = null;
+        /** Descripción / texto del cuerpo. */
+        this.description = null;
+        /** Marca temporal (ej. "8 min ago"). */
+        this.timestamp = null;
+        /**
+         * Avatar del item de panel: string (URL = src) o `{ src?, initials? }` (pasar
+         * el objeto como PROPERTY). `null` = sin avatar (modelo status inline). Su
+         * presencia activa el modelo item de panel.
+         */
+        this.avatar = null;
+        /** Muestra el ícono leading de status (solo modelo alert-inline). Default `true`. */
+        this.showIcon = true;
+        /** Muestra el botón X de cierre. Default `false`. */
+        this.dismissible = false;
+        /** Punto de "no leído" (8px, primary-base). Default `false`. */
+        this.unread = false;
+        // ── Notification-item model (Figma "Notifications" panel) ────────────────
+        /** Tipo de cuerpo del item. `basic` mantiene el layout sin slot de cuerpo. */
+        this.type = 'basic';
+        /** Cuando `true`, pinta el bg hover de Figma + revela el botón more-2-line. */
+        this.showMore = false;
+        /** Fuerza visible la affordance hover (ej. fila con foco de teclado). */
+        this.active = false;
+        /** Nombre accesible del punto de no leído (en Angular sale de provideSuiTextos). */
+        this.unreadLabel = 'No leído';
+        /** Nombre accesible del botón ⋮ (en Angular sale de provideSuiTextos). */
+        this.moreLabel = 'Más opciones';
+        /** Nombre accesible de la X (en Angular sale de provideSuiTextos). */
+        this.closeLabel = 'Cerrar';
+        this.onDismiss = () => {
+            this.dismissed.emit();
+        };
+        this.onMore = (event) => {
+            event.stopPropagation();
+            this.moreClicked.emit(event);
+        };
+    }
+    /** Icon map por variante (Remix). */
+    get iconName() {
+        const map = {
+            info: 'information-fill',
+            success: 'checkbox-circle-fill',
+            warning: 'alert-fill',
+            error: 'error-warning-fill',
+            feature: 'sparkling-fill',
+            default: 'notification-3-line',
+        };
+        return map[this.variant];
+    }
+    /** Config resuelta del avatar (string → { src }). */
+    get avatarCfg() {
+        const a = this.avatar;
+        if (!a)
+            return null;
+        return typeof a === 'string' ? { src: a } : a;
+    }
+    /** True cuando hay avatar (modelo notification-item panel). */
+    get hasAvatar() {
+        const cfg = this.avatarCfg;
+        return !!(cfg && (cfg.src || cfg.initials));
+    }
+    componentWillLoad() {
+        const titleAttr = this.el.getAttribute('title');
+        if (titleAttr !== null) {
+            if (this.heading == null)
+                this.heading = titleAttr;
+            this.el.removeAttribute('title');
+        }
+    }
+    /** True cuando se debe pintar el ícono leading de status (alert-inline). */
+    get showLeadingIcon() {
+        return !this.hasAvatar && this.showIcon && this.variant !== 'default';
+    }
+    /**
+     * ARIA role del root.
+     *
+     * Las filas del panel (avatar-led, items estáticos en una lista) NO son live
+     * regions — `role="status"` haría que los lectores de pantalla re-anuncien
+     * cada fila como un status de sistema. Renderizan como `article`.
+     *
+     * El modelo alert-inline (sin avatar) conserva `role="status"` +
+     * `aria-live="polite"`, la semántica correcta para ese uso.
+     */
+    get rootRole() {
+        return this.hasAvatar ? 'article' : 'status';
+    }
+    /** Solo el modelo alert-inline anuncia; las filas del panel quedan silenciosas. */
+    get rootAriaLive() {
+        return this.hasAvatar ? null : 'polite';
+    }
+    render() {
+        var _a;
+        const hasAvatar = this.hasAvatar;
+        const isBasic = this.type === 'basic';
+        // En las filas de panel (avatar) y en los tipos no-basic el timestamp va en
+        // la descripción compuesta; solo el alert-inline basic lo lleva en el header.
+        const metaTime = !!this.timestamp && (!isBasic || hasAvatar);
+        const showDescriptionBlock = !!this.description || metaTime || !isBasic;
+        const avatar = this.avatarCfg;
+        return (h(Host, { key: '790e96d90cf46921764ff51bd8926a546d31934b', "data-sui-variant": this.variant, "data-sui-show-more": this.showMore ? '' : undefined }, h("div", { key: 'd35da21274a784a174901b85e790aeaf1619fc79', class: {
+                'sui-notification': true,
+                'sui-notification--hoverable': this.showMore,
+                'sui-notification--active': this.active,
+                'sui-notification--has-avatar': hasAvatar,
+            }, "data-sui-variant": this.variant, "data-sui-style": this.variantStyle, "data-sui-type": this.type, role: this.rootRole, "aria-live": (_a = this.rootAriaLive) !== null && _a !== void 0 ? _a : undefined }, hasAvatar ? (h("div", { class: "sui-notification__avatar", "aria-hidden": "true" }, avatar.src ? (h("img", { src: avatar.src, alt: "" })) : (h("span", { class: "sui-notification__avatar-initials" }, avatar.initials)))) : this.showLeadingIcon ? (h("div", { class: "sui-notification__icon", "aria-hidden": "true" }, h("sui-icon", { name: this.iconName, size: 20 }))) : null, h("div", { key: '5b929f5f91e962c5f6ef9692b35c9818aeeec206', class: "sui-notification__content" }, h("div", { key: '6d119550f2723c9e769fe0bbd0cf3e498ad06ba3', class: "sui-notification__header" }, this.heading && h("p", { key: '98a604cb47419a398fe436d5cddb5a8531496eb4', class: "sui-notification__title" }, this.heading), this.unread && (h("span", { key: 'a21fab89b270a91e378714b91bc152680a66ad05', class: "sui-notification__dot", "aria-label": this.unreadLabel })), this.timestamp && isBasic && !hasAvatar && (h("span", { key: '4138eec21bef490aa2fbf2c2992c034459f262f3', class: "sui-notification__time" }, this.timestamp))), showDescriptionBlock && (h("p", { key: '3c7ef9f19cb608a92d697ccdd570d3ce4790753b', class: "sui-notification__description" }, metaTime && [
+            h("span", { key: 'bba7a831ed2278c9f08bf24f451b09616d79b8b1', class: "sui-notification__meta-time" }, this.timestamp),
+            h("span", { key: '46f7813377ca5e1226babe96e9e67cc8fb3f4a12', class: "sui-notification__sep", "aria-hidden": "true" }, "\u2219"),
+        ], h("span", { key: 'dfbb9a69076ca3b2e0cb10642a82094a2c6bef69', class: "sui-notification__company-logo" }, h("slot", { key: '802854134be6d383646eca90b90497976cc0f02f', name: "company-logo" })), this.description && (h("span", { key: '30080a63cfa8ab3791f56262668f8d1177c29f59', class: "sui-notification__desc-text" }, this.description)))), this.type === 'file' && (h("div", { key: '8ea2b5ccdcd42868929210226dcebaf737931d8b', class: "sui-notification__file" }, h("sui-icon", { key: 'aeb69a31f9f23e4de6e0ec6f22c17c6e0cdb6712', class: "sui-notification__file-icon", name: "attachment-line", size: 16, "aria-hidden": "true" }), h("slot", { key: 'ab9354e083c2611d98c45f8e85775392469071ae', name: "file" }))), this.type === 'message' && (h("div", { key: 'd4dcd3472767ca8071dc6b215226fd5aa0296c7a', class: "sui-notification__bubble" }, h("slot", { key: '3ea8a22ed1f30ed9762261305829ffe83dc421d9', name: "message" }))), h("slot", { key: 'f4953832ebd0a6176fa3d40e32b75d81eb4fa590' }), h("div", { key: 'e6dd3729fcd7fd63af3a751a9916f84d8e3aff18', class: "sui-notification__actions" }, h("slot", { key: '6cf47627ce3dd43bde7fe864e2cdfdca4fe2e324', name: "actions" }))), this.showMore && (h("sui-compact-button", { key: 'be74fc250fd3f02fb5aaf25cbaa2c50834df3e0c', class: "sui-notification__more", icon: "more-2-line", variantStyle: "ghost", size: "large", ariaLabel: this.moreLabel, onClick: this.onMore })), this.dismissible && (h("sui-compact-button", { key: '5edd9ba557f1411acd79c2e6d362a06578699e97', class: "sui-notification__close", icon: "close-line", variantStyle: "modifiable", size: "medium", ariaLabel: this.closeLabel, onClick: this.onDismiss })))));
+    }
+    get el() { return getElement(this); }
+};
+SuiNotification.style = suiNotificationCss();
+
+export { SuiNotification as sui_notification };

package/dist/esm/sui-otp-input.entry.js

@@ -0,0 +1,197 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiOtpInputCss = () => `@charset "UTF-8";.sc-sui-otp-input-h{display:inline-flex;align-items:flex-start;gap:8px;max-width:100%}.sui-otp-input__cell.sc-sui-otp-input{box-sizing:border-box;width:80px;height:64px;padding:16px 8px;margin:0;flex:0 1 auto;min-width:0;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-10);background-color:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);outline:none;font-family:var(--sui-font-sans);font-size:var(--sui-type-title-h5-size);font-weight:var(--sui-type-title-h5-weight);line-height:var(--sui-type-title-h5-line);letter-spacing:var(--sui-type-title-h5-spacing);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;text-align:center;color:var(--sui-text-strong-950);caret-color:var(--sui-text-strong-950);transition:border-color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease-out), background-color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease-out), box-shadow var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease-out)}.sui-otp-input__cell.sc-sui-otp-input:hover:not(:focus):not(:disabled):not(.sui-otp-input__cell--error){background-color:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-otp-input__cell.sc-sui-otp-input:focus{border-color:var(--sui-stroke-strong-950);background-color:var(--sui-bg-white-0);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-slate-alpha-16)}.sui-otp-input__cell--error.sc-sui-otp-input{border-color:var(--sui-state-error-base)}.sui-otp-input__cell--error.sc-sui-otp-input:focus{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-red-alpha-16)}.sui-otp-input__cell.sc-sui-otp-input:disabled{background-color:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;color:var(--sui-text-disabled-300);cursor:not-allowed}.sui-otp-input__cell.sc-sui-otp-input::placeholder{color:transparent}[data-sui-size=medium].sc-sui-otp-input-h .sui-otp-input__cell.sc-sui-otp-input{width:52px;height:56px;padding:12px 4px}[data-sui-size=small].sc-sui-otp-input-h .sui-otp-input__cell.sc-sui-otp-input{width:44px;height:48px;padding:10px 4px;border-radius:var(--sui-radius-8);font-size:var(--sui-type-title-h6-size);font-weight:var(--sui-type-title-h6-weight);line-height:var(--sui-type-title-h6-line);letter-spacing:var(--sui-type-title-h6-spacing)}`;
+
+const SuiOtpInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange");
+        this.completed = createEvent(this, "completed");
+        /** Cantidad de celdas. Default 6. */
+        this.length = 6;
+        /** Tamaño de la celda: large 80×64 (guía, default) · medium 52×56 · small 44×48. */
+        this.size = 'large';
+        /**
+         * `'number'` restringe a [0-9] e inputmode='numeric'; `'text'` acepta cualquier
+         * char (sin espacios) e inputmode='text'. Default `'number'`.
+         */
+        this.type = 'number';
+        /** Deshabilita todas las celdas. Default `false`. */
+        this.disabled = false;
+        /** Pinta todas las celdas con borde de error. Default `false`. */
+        this.error = false;
+        /** aria-label del grupo. Default 'Código de verificación'. */
+        this.ariaLabel = 'Código de verificación';
+        /**
+         * Valor (string concatenado de todas las celdas). Controlled: el consumer
+         * escucha `valueChange` y reescribe este prop. Equivale al `[(value)]` +
+         * `writeValue` del CVA Angular.
+         */
+        this.value = '';
+        /** Estado interno: un caracter por celda. length === this.length. */
+        this.cells = [];
+        // -- Handlers --------------------------------------------------------------
+        /** input event de una celda — toma el último char válido y auto-avanza. */
+        this.onCellInput = (index, event) => {
+            const target = event.target;
+            const valid = this.filterChars(target.value);
+            // Último char válido tipeado (cubre sobrescribir una celda llena).
+            const char = valid.length > 0 ? valid[valid.length - 1] : '';
+            const next = [...this.cells];
+            next[index] = char;
+            this.cells = next;
+            // Reflejar exactamente el char en el DOM (descarta multi-char e inválidos).
+            target.value = char;
+            this.emit();
+            if (char && index < this.length - 1)
+                this.focusCell(index + 1);
+        };
+        /** keydown — backspace, flechas, y bloqueo de no-dígitos en type='number'. */
+        this.onCellKeydown = (index, event) => {
+            const key = event.key;
+            if (key === 'Backspace') {
+                const cells = this.cells;
+                if (cells[index]) {
+                    // Hay char en la celda actual: bórralo, no retrocedas.
+                    const next = [...cells];
+                    next[index] = '';
+                    this.cells = next;
+                    this.emit();
+                }
+                else if (index > 0) {
+                    // Celda vacía: retrocede y borra la anterior.
+                    const next = [...cells];
+                    next[index - 1] = '';
+                    this.cells = next;
+                    this.emit();
+                    this.focusCell(index - 1);
+                }
+                event.preventDefault();
+                return;
+            }
+            if (key === 'ArrowLeft' && index > 0) {
+                event.preventDefault();
+                this.focusCell(index - 1);
+                return;
+            }
+            if (key === 'ArrowRight' && index < this.length - 1) {
+                event.preventDefault();
+                this.focusCell(index + 1);
+                return;
+            }
+            // Bloquea caracteres no numéricos en type='number' (deja teclas de control).
+            if (this.type === 'number' &&
+                key.length === 1 &&
+                !event.ctrlKey &&
+                !event.metaKey &&
+                !/\d/.test(key)) {
+                event.preventDefault();
+            }
+        };
+        /** paste — distribuye los chars pegados desde la celda enfocada. */
+        this.onCellPaste = (index, event) => {
+            var _a, _b;
+            event.preventDefault();
+            const pasted = this.filterChars((_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '');
+            if (!pasted)
+                return;
+            const next = [...this.cells];
+            let cursor = index;
+            for (const ch of pasted) {
+                if (cursor >= this.length)
+                    break;
+                next[cursor] = ch;
+                cursor++;
+            }
+            this.cells = next;
+            this.emit();
+            // Enfoca la siguiente celda vacía (o la última si se llenó todo).
+            const targetIdx = Math.min(cursor, this.length - 1);
+            this.focusCell(targetIdx);
+        };
+        /** focus — selecciona el contenido para sobrescribir fácil. */
+        this.onCellFocus = (event) => {
+            event.target.select();
+        };
+    }
+    componentWillLoad() {
+        var _a;
+        /* Sin title nativo en el host (tooltip gris): Host title={undefined} no lo borra. */
+        this.el.removeAttribute('title');
+        this.cells = this.normalize((_a = this.value) !== null && _a !== void 0 ? _a : '', this.length);
+    }
+    /** value externo cambió → re-distribuir en celdas (espeja el effect Angular). */
+    onValueChange(next) {
+        const normalized = this.normalize(next !== null && next !== void 0 ? next : '', this.length);
+        if (this.cells.join('') !== normalized.join('') || this.cells.length !== this.length) {
+            this.cells = normalized;
+        }
+    }
+    /** length cambió → re-dimensionar el array de celdas conservando el value. */
+    onLengthChange() {
+        this.cells = this.normalize(this.cells.join(''), this.length);
+    }
+    // -- Normalización ---------------------------------------------------------
+    /** String -> array de `len` celdas, filtrando por type. */
+    normalize(raw, len) {
+        const filtered = this.filterChars(raw).slice(0, len);
+        const arr = new Array(len).fill('');
+        for (let i = 0; i < filtered.length; i++)
+            arr[i] = filtered[i];
+        return arr;
+    }
+    /** number -> solo [0-9]; text -> todo sin espacios. */
+    filterChars(raw) {
+        if (this.type === 'number')
+            return raw.replace(/\D/g, '');
+        return raw.replace(/\s/g, '');
+    }
+    /** inputmode según type. */
+    get inputMode() {
+        return this.type === 'number' ? 'numeric' : 'text';
+    }
+    /** Emite el string concatenado y dispara `completed` si todo está lleno. */
+    emit() {
+        const joined = this.cells.join('');
+        this.value = joined;
+        this.valueChange.emit(joined);
+        const allFilled = joined.length === this.length && !this.cells.includes('');
+        if (allFilled)
+            this.completed.emit(joined);
+    }
+    /** Lista de inputs internos (light DOM, alcanzables desde el host). */
+    cellEls() {
+        return Array.from(this.el.querySelectorAll('input.sui-otp-input__cell'));
+    }
+    focusCell(index) {
+        const target = this.cellEls()[index];
+        if (target) {
+            target.focus();
+            target.select();
+        }
+    }
+    get indices() {
+        return Array.from({ length: this.length }, (_, i) => i);
+    }
+    render() {
+        return (h(Host, { key: '6772e2d2b67040a7f70b536e93197ce5ee1e99fe', role: "group", "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : undefined, "data-sui-size": this.size }, this.indices.map((i) => {
+            var _a;
+            return (h("input", { key: i, class: {
+                    'sui-otp-input__cell': true,
+                    'sui-otp-input__cell--error': this.error,
+                }, type: "text", inputmode: this.inputMode, autoComplete: i === 0 ? 'one-time-code' : 'off', maxLength: 1, "aria-label": `Dígito ${i + 1}`, value: (_a = this.cells[i]) !== null && _a !== void 0 ? _a : '', disabled: this.disabled, onInput: (e) => this.onCellInput(i, e), onKeyDown: (e) => this.onCellKeydown(i, e), onPaste: (e) => this.onCellPaste(i, e), onFocus: this.onCellFocus }));
+        })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "length": [{
+                "onLengthChange": 0
+            }]
+    }; }
+};
+SuiOtpInput.style = suiOtpInputCss();
+
+export { SuiOtpInput as sui_otp_input };

package/dist/esm/sui-page-header.entry.js

@@ -0,0 +1,33 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiPageHeaderCss = () => `@charset "UTF-8";.sc-sui-page-header-h{display:block;position:relative;z-index:5}[data-sui-sticky].sc-sui-page-header-h{position:sticky;top:0;background:var(--sui-bg-white-0, #fff)}.sui-page-header.sc-sui-page-header{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:24px 0}@media (min-width: 767px){.sui-page-header.sc-sui-page-header{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;padding:32px 0 16px}}.sui-page-header__text.sc-sui-page-header{flex:1 1 auto;min-width:0}.sui-page-header__title.sc-sui-page-header{margin:0;font-family:var(--sui-font-sans);font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-0.012em;color:var(--sui-text-strong-950, #0e121b)}@media (min-width: 767px){.sui-page-header__title.sc-sui-page-header{font-size:28px}}.sui-page-header__subtitle.sc-sui-page-header{margin:4px 0 0;font-family:var(--sui-font-sans);font-size:14px;font-weight:400;line-height:1.4;color:var(--sui-text-sub-600, #525866)}.sui-page-header__actions.sc-sui-page-header{display:flex;align-items:center;gap:8px;flex-shrink:0}.sui-page-header__actions.sc-sui-page-header:empty{display:none}`;
+
+const SuiPageHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Texto secundario opcional debajo del título. Default `null`. */
+        this.subtitle = null;
+        /**
+         * Si `true`, el header queda `position: sticky` top 0 mientras se scrollea
+         * (con fondo blanco). Default `false`: scrollea con el contenido.
+         */
+        this.sticky = false;
+    }
+    componentWillLoad() {
+        /* `title` (nombre del input en el SUI Angular) vale como `heading` y se quita:
+           Host title={undefined} no borra el atributo y quedaba el tooltip nativo gris. */
+        const titleAttr = this.el.getAttribute('title');
+        if (titleAttr !== null) {
+            if (this.heading == null)
+                this.heading = titleAttr;
+            this.el.removeAttribute('title');
+        }
+    }
+    render() {
+        return (h(Host, { key: '32802331886364dc8eb7834a5b9bd8d6bf26a035', "data-sui-sticky": this.sticky ? '' : null }, h("header", { key: '439dcb294503ca5ab144a4c95e10c4e453024280', class: "sui-page-header" }, h("div", { key: 'cafea798d31e543475c9f4f957251eabb57d84d0', class: "sui-page-header__text" }, h("h1", { key: 'c638bebc8a556e9a865a9c9b670fdaafa9eb50ed', class: "sui-page-header__title" }, this.heading), this.subtitle && h("p", { key: '42e2a641f661db8d87e43161f55541519a18a494', class: "sui-page-header__subtitle" }, this.subtitle)), h("div", { key: '43fff76683a938feb0800998ca9456c7c4f14fa3', class: "sui-page-header__actions" }, h("slot", { key: '90eac3b7bc43881eb8aee8df9b8b09a7c69f4566', name: "actions" }))), h("slot", { key: 'e5adf6cf5bd6f9ea2928240610df4a36396eb4e6' })));
+    }
+    get el() { return getElement(this); }
+};
+SuiPageHeader.style = suiPageHeaderCss();
+
+export { SuiPageHeader as sui_page_header };

package/dist/esm/sui-pagination.entry.js

@@ -0,0 +1,227 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+/**
+ * Datos / catalogos / helpers de `<sui-pagination>`.
+ *
+ * Separado del .tsx porque Stencil prohibe `export const/function/enum` junto al
+ * `@Component` (rompe el build entero). Aqui viven los catalogos de variantes y
+ * el algoritmo puro de elipsis; el .tsx importa lo que necesita sin re-exportar
+ * con llaves.
+ *
+ * Portado 1:1 desde el Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-pagination/).
+ */
+/** Sizes soportados (extraFeature SUI): medium (footprint 32) / small (28). */
+/**
+ * Algoritmo de elipsis dinamicas (puro, portado 1:1 del computed `displayPages`
+ * del Angular). Retorna un array de numeros de pagina, donde `null` representa
+ * una celda de elipsis.
+ *
+ * Ejemplos:
+ *   [1, 2, 3, 4, 5]                     (cuando totalPages <= maxVisible)
+ *   [1, null, 4, 5, 6, null, 20]        (elipsis en ambos lados)
+ *   [1, 2, 3, 4, 5, null, 20]           (elipsis solo a la derecha)
+ *   [1, null, 16, 17, 18, 19, 20]       (elipsis solo a la izquierda)
+ *
+ * @param total    total de paginas (>= 1)
+ * @param current  pagina actual (1-indexed)
+ * @param siblings paginas a cada lado del actual
+ */
+function computeDisplayPages(total, current, siblings) {
+    // Si hay pocas paginas, mostrar todas.
+    const maxVisible = siblings * 2 + 5; // 2 extremos + elipsis x 2 + siblings x 2 + current
+    if (total <= maxVisible) {
+        return Array.from({ length: total }, (_v, i) => i + 1);
+    }
+    const leftSibling = Math.max(current - siblings, 1);
+    const rightSibling = Math.min(current + siblings, total);
+    const showLeftEllipsis = leftSibling > 2;
+    const showRightEllipsis = rightSibling < total - 1;
+    const firstPage = 1;
+    const lastPage = total;
+    if (!showLeftEllipsis && showRightEllipsis) {
+        // Inicio expandido.
+        const leftRange = Array.from({ length: 3 + 2 * siblings }, (_v, i) => i + 1);
+        return [...leftRange, null, lastPage];
+    }
+    if (showLeftEllipsis && !showRightEllipsis) {
+        // Fin expandido.
+        const rightRange = Array.from({ length: 3 + 2 * siblings }, (_v, i) => total - (3 + 2 * siblings) + 1 + i);
+        return [firstPage, null, ...rightRange];
+    }
+    // Elipsis en ambos lados.
+    const middleRange = Array.from({ length: rightSibling - leftSibling + 1 }, (_v, i) => leftSibling + i);
+    return [firstPage, null, ...middleRange, null, lastPage];
+}
+
+const suiPaginationCss = () => `@charset "UTF-8";.sc-sui-pagination-h{display:block}.sui-pagination.sc-sui-pagination{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:var(--sui-font-sans);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-pagination__info.sc-sui-pagination{margin:0;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-pagination__info.sc-sui-pagination strong.sc-sui-pagination{font-weight:500;color:var(--sui-text-strong-950)}.sui-pagination__nav.sc-sui-pagination{display:flex;align-items:center;gap:8px}.sui-pagination__advanced.sc-sui-pagination{display:flex;align-items:center}.sui-pagination__btn.sc-sui-pagination{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;background:transparent;cursor:pointer;flex-shrink:0;user-select:none;outline:none;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-weight:var(--sui-type-label-sm-weight);letter-spacing:var(--sui-type-label-sm-spacing);line-height:1;color:var(--sui-text-sub-600)}.sui-pagination__btn.sc-sui-pagination:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-primary-alpha-10)}.sc-sui-pagination-h:not([data-sui-type=group]) .sui-pagination__btn--page.sc-sui-pagination:not(.sui-pagination__btn--active),.sc-sui-pagination-h:not([data-sui-type=group]) .sui-pagination__btn--ellipsis.sc-sui-pagination{border-color:var(--sui-stroke-soft-200)}[data-sui-size=medium].sc-sui-pagination-h .sui-pagination__btn.sc-sui-pagination{height:32px;min-width:32px;border-radius:var(--sui-radius-8);padding:6px;font-size:var(--sui-type-label-sm-size)}[data-sui-size=small].sc-sui-pagination-h .sui-pagination__btn.sc-sui-pagination{height:28px;min-width:28px;border-radius:var(--sui-radius-8);padding:4px;font-size:var(--sui-type-label-xs-size)}[data-sui-type=full-radius].sc-sui-pagination-h .sui-pagination__btn--page.sc-sui-pagination,[data-sui-type=full-radius].sc-sui-pagination-h .sui-pagination__btn--ellipsis.sc-sui-pagination{border-radius:var(--sui-radius-full)}.sui-pagination__btn--page.sc-sui-pagination:hover:not(:disabled){background:var(--sui-bg-weak-50)}.sui-pagination__btn--page.sui-pagination__btn--active.sc-sui-pagination{background:var(--sui-bg-weak-50);color:var(--sui-text-sub-600);cursor:default}.sui-pagination__btn--nav.sc-sui-pagination sui-icon.sc-sui-pagination{font-size:20px;line-height:1}.sui-pagination__btn--nav.sc-sui-pagination:hover:not(:disabled){background:var(--sui-bg-weak-50)}.sc-sui-pagination-h:not([data-sui-type=group]) .sui-pagination__btn--page.sc-sui-pagination:not(.sui-pagination__btn--active):hover:not(:disabled){border-color:transparent}.sui-pagination__btn--ellipsis.sc-sui-pagination{background:var(--sui-bg-white-0);color:var(--sui-text-sub-600);cursor:default;pointer-events:none}.sui-pagination__btn--disabled.sc-sui-pagination,.sui-pagination__btn.sc-sui-pagination:disabled{color:var(--sui-text-disabled-300);background:transparent;cursor:not-allowed;pointer-events:none}[data-sui-type=group].sc-sui-pagination-h .sui-pagination__nav.sc-sui-pagination{gap:0;overflow:clip;border-radius:var(--sui-radius-8);isolation:isolate}[data-sui-type=group].sc-sui-pagination-h .sui-pagination__nav.sc-sui-pagination .sui-pagination__btn.sc-sui-pagination{border-color:var(--sui-stroke-soft-200);border-radius:0}[data-sui-type=group].sc-sui-pagination-h .sui-pagination__nav.sc-sui-pagination .sui-pagination__btn.sc-sui-pagination:not(:first-child){margin-left:-1px}[data-sui-type=group].sc-sui-pagination-h .sui-pagination__nav.sc-sui-pagination .sui-pagination__btn.sc-sui-pagination:hover:not(:disabled),[data-sui-type=group].sc-sui-pagination-h .sui-pagination__nav.sc-sui-pagination .sui-pagination__btn.sui-pagination__btn--active.sc-sui-pagination,[data-sui-type=group].sc-sui-pagination-h .sui-pagination__nav.sc-sui-pagination .sui-pagination__btn.sc-sui-pagination:focus-visible{position:relative;z-index:1}[data-sui-type=group].sc-sui-pagination-h .sui-pagination__nav.sc-sui-pagination .sui-pagination__btn--page.sc-sui-pagination{padding-inline:14px}`;
+
+const SuiPagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pageChange = createEvent(this, "pageChange");
+        this.pageSizeChange = createEvent(this, "pageSizeChange");
+        /** Total de items. Default `0`. */
+        this.total = 0;
+        /** Items por pagina. Two-way: reflejar el cambio via `pageSizeChange`. Default `10`. */
+        this.pageSize = 10;
+        /** Pagina actual (1-indexed). Two-way: reflejar el cambio via `pageChange`. Default `1`. */
+        this.currentPage = 1;
+        /** Cuantas paginas a cada lado del actual (extraFeature SUI). Default `1`. */
+        this.siblingCount = 1;
+        /** Muestra el texto informativo (extraFeature SUI). Default `true`. */
+        this.showInfo = true;
+        /** Tamano (extraFeature SUI). Default `medium`. */
+        this.size = 'medium';
+        /** Variant visual homologado Figma. Default `basic`. */
+        this.type = 'basic';
+        /** Muestra los botones ir-a-primera / ir-a-ultima. Default `false`. */
+        this.firstLast = false;
+        /** Muestra los chevrons prev / next. Default `true`. */
+        this.nextPrevious = true;
+        /** Formato del texto informativo. Default `items`. */
+        this.infoFormat = 'items';
+        /**
+         * Opciones del compact-select de page size. Si vacio, NO se renderea el panel
+         * advanced. Pasar como array via la propiedad `.pageSizeOptions` (NO atributo
+         * string). Default `[]`.
+         */
+        this.pageSizeOptions = [];
+        /* ── Actions ── */
+        this.goTo = (page) => {
+            const total = this.totalPages;
+            if (page < 1 || page > total || page === this.currentPage)
+                return;
+            this.currentPage = page;
+            this.pageChange.emit(page);
+        };
+        this.prev = () => this.goTo(this.currentPage - 1);
+        this.next = () => this.goTo(this.currentPage + 1);
+        this.first = () => this.goTo(1);
+        this.last = () => this.goTo(this.totalPages);
+        /** Cambio de page size desde el compact-select del panel advanced. */
+        this.onPageSizeSelected = (event) => {
+            const item = event.detail;
+            if (!item)
+                return;
+            const next = Number(item.value);
+            if (Number.isNaN(next) || next === this.pageSize)
+                return;
+            // Reclampar la pagina actual al nuevo rango. Se mide ANTES de asignar
+            // pageSize: su @Watch reclampa en silencio y el pageChange se perdia.
+            const total = Math.max(1, Math.ceil(this.total / next));
+            const reclampa = this.currentPage > total;
+            this.pageSize = next;
+            this.pageSizeChange.emit(next);
+            if (reclampa) {
+                this.currentPage = total;
+                this.pageChange.emit(total);
+            }
+        };
+        /** Keyboard navigation entre botones de pagina (Enter / Space). */
+        this.onKeydown = (event, page) => {
+            if (page === null)
+                return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.goTo(page);
+            }
+        };
+    }
+    /* ── iOS :active fix (presencia del binding engage el touch pipeline) ── */
+    onTouchStart() {
+        /* no-op a proposito; la presencia del listener engage el touch pipeline iOS. */
+    }
+    onTouchEnd(event) {
+        const t = event.target;
+        const btn = t === null || t === void 0 ? void 0 : t.closest('button');
+        if (btn)
+            btn.blur();
+    }
+    /* ── Clamp defensivo cuando cambia el total/pageSize desde fuera ── */
+    onPagingInputsChange() {
+        const total = this.totalPages;
+        if (this.currentPage > total) {
+            this.currentPage = total;
+        }
+    }
+    /* ── Derived ── */
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.total / this.pageSize));
+    }
+    get rangeStart() {
+        return (this.currentPage - 1) * this.pageSize + 1;
+    }
+    get rangeEnd() {
+        return Math.min(this.currentPage * this.pageSize, this.total);
+    }
+    get hasPrev() {
+        return this.currentPage > 1;
+    }
+    get hasNext() {
+        return this.currentPage < this.totalPages;
+    }
+    get displayPages() {
+        return computeDisplayPages(this.totalPages, this.currentPage, this.siblingCount);
+    }
+    /** Items del compact-select de page size (value string para la version Stencil). */
+    get pageSizeItems() {
+        return this.pageSizeOptions.map((n) => ({ value: String(n), label: `${n} / página` }));
+    }
+    /** Item actualmente seleccionado en el compact-select (matchea pageSize). */
+    get selectedPageSizeItem() {
+        var _a;
+        const ps = String(this.pageSize);
+        return (_a = this.pageSizeItems.find((i) => i.value === ps)) !== null && _a !== void 0 ? _a : null;
+    }
+    /* ── Render helpers ── */
+    renderNavButton(icon, disabled, onClick, label) {
+        return (h("button", { type: "button", class: {
+                'sui-pagination__btn': true,
+                'sui-pagination__btn--nav': true,
+                'sui-pagination__btn--disabled': disabled,
+            }, disabled: disabled, onClick: onClick, "aria-label": label }, h("sui-icon", { name: icon, size: 20 })));
+    }
+    render() {
+        var _a, _b;
+        const total = this.total;
+        const totalPages = this.totalPages;
+        const current = this.currentPage;
+        const hasPrev = this.hasPrev;
+        const hasNext = this.hasNext;
+        const items = this.pageSizeItems;
+        return (h(Host, { key: 'ab645872644923c8c5bfcae74813a6908b873edf', "data-sui-size": this.size, "data-sui-type": this.type }, h("div", { key: 'a21ebf39efc6018964ee31fbead6b8846234ce75', class: "sui-pagination" }, this.showInfo && total > 0 && (h("p", { key: '6eeba769782b72244e5677cb401a42c572079faa', class: "sui-pagination__info" }, this.infoFormat === 'pages'
+            ? [
+                'Página ',
+                h("strong", null, current),
+                ' de ',
+                h("strong", null, totalPages),
+            ]
+            : [
+                'Mostrando ',
+                h("strong", null, this.rangeStart, "-", this.rangeEnd),
+                ' de ',
+                h("strong", null, total),
+            ])), h("nav", { key: '694288857642b53ba07ef2150f5b805d702ba7ad', class: "sui-pagination__nav", "aria-label": "Paginaci\u00F3n" }, this.firstLast &&
+            this.renderNavButton('arrow-left-double-line', !hasPrev, this.first, 'Primera página'), this.nextPrevious &&
+            this.renderNavButton('arrow-left-s-line', !hasPrev, this.prev, 'Página anterior'), this.displayPages.map((page) => page === null ? (h("span", { class: "sui-pagination__btn sui-pagination__btn--ellipsis", "aria-hidden": "true" }, "\u2026")) : (h("button", { type: "button", class: {
+                'sui-pagination__btn': true,
+                'sui-pagination__btn--page': true,
+                'sui-pagination__btn--active': page === current,
+            }, onClick: () => this.goTo(page), onKeyDown: (e) => this.onKeydown(e, page), "aria-current": page === current ? 'page' : undefined, "aria-label": 'Página ' + page }, page))), this.nextPrevious &&
+            this.renderNavButton('arrow-right-s-line', !hasNext, this.next, 'Página siguiente'), this.firstLast &&
+            this.renderNavButton('arrow-right-double-line', !hasNext, this.last, 'Última página')), items.length > 0 && (h("div", { key: '114016c15c4412d76ba464b19d4fc58154bf626e', class: "sui-pagination__advanced" }, h("sui-compact-select", { key: 'ecb6d76217b656bffc7de93ce44f3c83d8b3cd6d', size: "xsmall", value: (_b = (_a = this.selectedPageSizeItem) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : undefined, items: items, onSelectedChange: this.onPageSizeSelected }))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "total": [{
+                "onPagingInputsChange": 0
+            }],
+        "pageSize": [{
+                "onPagingInputsChange": 0
+            }]
+    }; }
+};
+SuiPagination.style = suiPaginationCss();
+
+export { SuiPagination as sui_pagination };