@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/esm/sui-file-upload-card.entry.js

@@ -0,0 +1,113 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-CHeoPpKZ.js';
+import { s as soltarToque } from './sui-toque-BKJeFTmQ.js';
+
+const suiFileUploadCardCss = () => `@charset "UTF-8";.sc-sui-file-upload-card-h{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:16px;width:100%;padding:16px 16px 16px 14px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);overflow:clip;box-sizing:border-box;font-family:var(--sui-font-sans, "InterVariable", "Inter", system-ui, sans-serif)}[data-sui-state=error].sc-sui-file-upload-card-h{border-color:var(--sui-state-error-base, #fb3748)}.sui-file-upload-card__row.sc-sui-file-upload-card{display:flex;gap:12px;align-items:flex-start;width:100%}.sui-file-upload-card__file-icon.sc-sui-file-upload-card{flex-shrink:0}.sui-file-upload-card__text.sc-sui-file-upload-card{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;min-width:0;gap:4px}[data-sui-state=error].sc-sui-file-upload-card-h .sui-file-upload-card__text.sc-sui-file-upload-card{gap:8px}.sui-file-upload-card__text-status.sc-sui-file-upload-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-file-upload-card__label.sc-sui-file-upload-card{margin:0;width:100%;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-file-upload-card__desc.sc-sui-file-upload-card{display:flex;align-items:center;gap:4px;width:100%;flex-wrap:wrap}.sui-file-upload-card__desc-text.sc-sui-file-upload-card,.sui-file-upload-card__bullet.sc-sui-file-upload-card{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:var(--sui-type-paragraph-xs-spacing, 0);color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-file-upload-card__status.sc-sui-file-upload-card{display:inline-flex;align-items:center;gap:4px}.sui-file-upload-card__status-icon.sc-sui-file-upload-card{display:inline-flex;width:16px;height:16px;flex-shrink:0}.sui-file-upload-card__status-text.sc-sui-file-upload-card{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:var(--sui-type-paragraph-xs-spacing, 0);color:var(--sui-text-strong-950, #171717);white-space:nowrap;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}[data-sui-state=in-progress].sc-sui-file-upload-card-h .sui-file-upload-card__status-icon.sc-sui-file-upload-card{color:var(--sui-state-information-base, #335cff);animation:sui-fuc-spin 1s linear infinite}[data-sui-state=success].sc-sui-file-upload-card-h .sui-file-upload-card__status-icon.sc-sui-file-upload-card{color:var(--sui-state-success-base, #1fc16b)}[data-sui-state=error].sc-sui-file-upload-card-h .sui-file-upload-card__status-icon.sc-sui-file-upload-card{color:var(--sui-state-error-base, #fb3748)}@keyframes sui-fuc-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){[data-sui-state=in-progress].sc-sui-file-upload-card-h .sui-file-upload-card__status-icon.sc-sui-file-upload-card{animation:none}}.sui-file-upload-card__retry.sc-sui-file-upload-card{flex-shrink:0}.sui-file-upload-card__action.sc-sui-file-upload-card{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:0;background:transparent;border:0;border-radius:var(--sui-radius-6, 6px);cursor:pointer;color:var(--sui-icon-sub-600, #5c5c5c);overflow:clip;transition:background var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, ease-out), color var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, ease-out)}.sui-file-upload-card__action.sc-sui-file-upload-card:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-file-upload-card__action.sc-sui-file-upload-card:active{background:var(--sui-bg-soft-200, #ebebeb)}.sui-file-upload-card__action.sc-sui-file-upload-card:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:1px}[data-sui-state=error].sc-sui-file-upload-card-h .sui-file-upload-card__action.sc-sui-file-upload-card{color:var(--sui-state-error-base, #fb3748)}[data-sui-state=error].sc-sui-file-upload-card-h .sui-file-upload-card__action.sc-sui-file-upload-card:hover{background:var(--sui-state-error-lighter, #ffebec)}[data-sui-state=error].sc-sui-file-upload-card-h .sui-file-upload-card__action.sc-sui-file-upload-card:active{background:var(--sui-state-error-light, #ffc0c5)}[data-sui-state=error].sc-sui-file-upload-card-h .sui-file-upload-card__action.sc-sui-file-upload-card:focus-visible{outline-color:var(--sui-state-error-base, #fb3748)}.sui-file-upload-card__action-icon.sc-sui-file-upload-card{display:inline-flex;width:20px;height:20px}.sui-file-upload-card__progress.sc-sui-file-upload-card{display:block;width:100%;flex-shrink:0}`;
+
+const SuiFileUploadCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.actionClicked = createEvent(this, "actionClicked");
+        this.retryClicked = createEvent(this, "retryClicked");
+        /** Archivo mostrado: string shorthand (= filename) u objeto `{ filename, extension? }`. Default `file.pdf`. */
+        this.file = 'file.pdf';
+        /** Texto secundario izquierdo, ej. "0 KB de 120 KB". */
+        this.description = '0 KB de 120 KB';
+        /** Estado del card. Default `in-progress`. Refleja a `data-sui-state` del host. */
+        this.state = 'in-progress';
+        /** Progreso 0–100 (clamp interno, NaN->0). Solo se muestra si state==='in-progress'. */
+        this.progress = 10;
+        /** Override del label de status. null = default por state. */
+        this.statusText = null;
+        /** Muestra/oculta el bloque de status (icono + texto). Default `true`. */
+        this.showStatus = true;
+        /** Texto del link de error. Si null, «Reintentar». */
+        this.retryLabel = null;
+        /** Nombre accesible del botón en `in-progress`. Si null, «Cancelar subida». */
+        this.cancelLabel = null;
+        /** Nombre accesible del botón en `success` / `error`. Si null, «Quitar archivo». */
+        this.removeLabel = null;
+        /** Nombre accesible de la barra de progreso. Si null, «Progreso de la subida». */
+        this.progressLabel = null;
+        this.onAction = () => {
+            this.actionClicked.emit();
+        };
+        this.onRetry = () => {
+            this.retryClicked.emit();
+        };
+    }
+    /** Status text default por state — override-able vía `statusText`. */
+    get resolvedStatusText() {
+        if (this.statusText)
+            return this.statusText;
+        switch (this.state) {
+            case 'in-progress':
+                return 'Subiendo…';
+            case 'success':
+                return 'Completado';
+            case 'error':
+                return 'Falló';
+        }
+    }
+    /** Status icon name por state (Remix Icons). */
+    get statusIconName() {
+        switch (this.state) {
+            case 'in-progress':
+                return 'loader-2-fill';
+            case 'success':
+                return 'checkbox-circle-fill';
+            case 'error':
+                return 'error-warning-fill';
+        }
+    }
+    /** Compact button (right-side) icon name por state. */
+    get actionIconName() {
+        return this.state === 'in-progress' ? 'close-line' : 'delete-bin-line';
+    }
+    /** Progress 0–100 clamped (NaN->0). Misma lógica que el computed Angular. */
+    get progressPct() {
+        const v = this.progress;
+        if (Number.isNaN(v))
+            return 0;
+        return Math.max(0, Math.min(100, v));
+    }
+    /** Config resuelta del archivo (string → { filename }). */
+    get fileCfg() {
+        var _a;
+        const f = this.file || 'file.pdf';
+        return typeof f === 'string' ? { filename: f, extension: '' } : { filename: f.filename, extension: (_a = f.extension) !== null && _a !== void 0 ? _a : '' };
+    }
+    /* iOS `:active` del botón de acción: listeners PASIVOS en el host (utils/sui-toque.ts). */
+    alTocar() { }
+    alSoltar(event) {
+        soltarToque(event, '.sui-file-upload-card__action');
+    }
+    /** Bloque de status (icono + texto), compartido entre los 3 estados. */
+    renderStatus() {
+        if (!this.showStatus)
+            return null;
+        return [
+            h("span", { class: "sui-file-upload-card__bullet", "aria-hidden": "true" }, "\u2219"),
+            h("span", { class: "sui-file-upload-card__status" }, h("sui-icon", { class: "sui-file-upload-card__status-icon", name: this.statusIconName, size: 16 }), h("span", { class: "sui-file-upload-card__status-text" }, this.resolvedStatusText)),
+        ];
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const isError = this.state === 'error';
+        const isInProgress = this.state === 'in-progress';
+        const file = this.fileCfg;
+        return (h(Host, { key: 'b4b15c7f25326a5833dead913153395c29bbe187', "data-sui-state": this.state }, h("div", { key: '55193451377867f0a0601df78721ada0a40c1553', class: "sui-file-upload-card__row" }, h("sui-file-icon", { key: 'd24d05855026281d1aa404bd840dc1c5cb93b808', class: "sui-file-upload-card__file-icon", size: "medium", filename: file.filename, extension: file.extension }), h("div", { key: '1c9e7a4377c65c9f93df5c91f0728edee1d57e92', class: "sui-file-upload-card__text" }, isError ? (
+        // Error: Text & Status sub-wrap (gap=4) + link «Reintentar» (gap=8 outer).
+        [
+            h("div", { class: "sui-file-upload-card__text-status" }, h("p", { class: "sui-file-upload-card__label" }, file.filename), h("div", { class: "sui-file-upload-card__desc" }, h("span", { class: "sui-file-upload-card__desc-text" }, this.description), this.renderStatus())),
+            h("sui-link-button", { class: "sui-file-upload-card__retry", variant: "error", size: "medium", underline: true, onClicked: this.onRetry }, (_a = this.retryLabel) !== null && _a !== void 0 ? _a : 'Reintentar'),
+        ]) : (
+        // In-progress / Success: label + (description . status).
+        [
+            h("p", { class: "sui-file-upload-card__label" }, file.filename),
+            h("div", { class: "sui-file-upload-card__desc" }, h("span", { class: "sui-file-upload-card__desc-text" }, this.description), this.renderStatus()),
+        ])), h("button", { key: '05afbd17d8d1958a329f036d16aae44abc254e9b', type: "button", class: "sui-file-upload-card__action", "aria-label": isInProgress ? ((_b = this.cancelLabel) !== null && _b !== void 0 ? _b : 'Cancelar subida') : ((_c = this.removeLabel) !== null && _c !== void 0 ? _c : 'Quitar archivo'), onClick: this.onAction }, h("sui-icon", { key: 'e87b85e1699c3a3b26f863e10386036e2ca54267', class: "sui-file-upload-card__action-icon", name: this.actionIconName, size: 20 }))), isInProgress && (h("sui-progress-bar", { key: '0c2fc08cd3cce4aee0e475ea67c9f53afc2fc340', class: "sui-file-upload-card__progress", value: this.progressPct, color: "blue", size: "medium", ariaLabel: (_d = this.progressLabel) !== null && _d !== void 0 ? _d : 'Progreso de la subida' }))));
+    }
+};
+SuiFileUploadCard.style = suiFileUploadCardCss();
+
+export { SuiFileUploadCard as sui_file_upload_card };

package/dist/esm/sui-file-upload.entry.js

@@ -0,0 +1,184 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiFileUploadCss = () => `@charset "UTF-8";.sc-sui-file-upload-h{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:100%;box-sizing:border-box;text-align:center;font-family:var(--sui-font-sans, sans-serif);border:1px dashed var(--sui-stroke-sub-300, #d1d1d1);border-radius:var(--sui-radius-12, 12px);background:var(--sui-bg-white-0, #fff);cursor:pointer;transition:border-color var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1)), background var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1))}[data-sui-size=small].sc-sui-file-upload-h{padding:24px;gap:16px}[data-sui-size=medium].sc-sui-file-upload-h{padding:32px}[data-sui-size=large].sc-sui-file-upload-h{padding:40px;gap:24px}[data-sui-size=xlarge].sc-sui-file-upload-h{padding:48px;gap:28px}.sc-sui-file-upload-h:hover:not([data-sui-state=disabled]){background:var(--sui-bg-weak-50, #f7f7f7)}.sc-sui-file-upload-h:has(:focus-visible){outline:none;border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff), 0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, 0.1607843137))}[data-sui-state=dragover].sc-sui-file-upload-h{border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, 0.1019607843))}[data-sui-state=error].sc-sui-file-upload-h{border-color:var(--sui-state-error-base, #fb3748);background:var(--sui-state-error-lighter, #ffebec)}[data-sui-state=disabled].sc-sui-file-upload-h{cursor:not-allowed;opacity:0.5;background:var(--sui-bg-weak-50, #f7f7f7)}.sui-file-upload__icon.sc-sui-file-upload{color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}[data-sui-state=dragover].sc-sui-file-upload-h .sui-file-upload__icon.sc-sui-file-upload{color:var(--sui-primary-base, #fa7319)}[data-sui-state=error].sc-sui-file-upload-h .sui-file-upload__icon.sc-sui-file-upload{color:var(--sui-state-error-base, #fb3748)}.sui-file-upload__text.sc-sui-file-upload{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%}.sui-file-upload__title.sc-sui-file-upload{margin:0;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.084px;color:var(--sui-text-strong-950, #171717);word-break:break-word}.sui-file-upload__subtitle.sc-sui-file-upload{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);word-break:break-word}.sui-file-upload__browse.sc-sui-file-upload{flex-shrink:0}.sui-file-upload__browse[data-sui-size=xsmall].sc-sui-file-upload{padding:6px 8px}.sui-file-upload__error.sc-sui-file-upload{margin:-8px 0 0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-state-error-base, #fb3748)}.sui-file-upload__input.sc-sui-file-upload{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}`;
+
+const SuiFileUpload = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.filesSelected = createEvent(this, "filesSelected");
+        this.errorEvent = createEvent(this, "errorEvent");
+        /** MIME types / extensiones separados por coma (ej. "image/*,.pdf,.docx"). Default vacío = todos. */
+        this.accept = '';
+        /** Permite seleccionar varios archivos. Default `false`. */
+        this.multiple = false;
+        /** Bytes máximo por archivo. `0` = sin límite. */
+        this.maxSize = 0;
+        /**
+         * Label primario (texto grande). Renombrado del `title` del Angular: `title`
+         * es @Prop reservado del DOM (dispara tooltip nativo). En HTML el atributo es
+         * `heading`. Si null, cae al texto por defecto según `multiple`.
+         */
+        this.heading = null;
+        /** Texto secundario. Si null, cae a "o haz clic para seleccionar". */
+        this.subtitle = null;
+        /** Texto del botón. Si null, «Buscar archivo». */
+        this.browseLabel = null;
+        /** Bloquea interacción (click/drag/teclado). Default `false`. */
+        this.disabled = false;
+        /** Estado de error controlado por el consumer (border + bg rojo). Default `false`. */
+        this.error = false;
+        /** Texto de error mostrado debajo. Tiene prioridad sobre el error interno de validación. */
+        this.errorMessage = null;
+        /** Tamaño: small | medium (default) | large | xlarge. Controla padding/gap interno. */
+        this.size = 'medium';
+        /** Estado interno de drag-over (equivale al `signal dragging` del Angular). */
+        this.dragging = false;
+        /** Mensaje de error generado por la validación interna (maxSize / accept). */
+        this.internalError = null;
+        /**
+         * Browse File button — abre el picker. stopPropagation evita doble-open
+         * (el host también es clickeable y burbujearía el click).
+         */
+        this.onBrowseClick = (event) => {
+            event.stopPropagation();
+            this.openPicker();
+        };
+        this.onInputChange = (event) => {
+            var _a;
+            const input = event.target;
+            const files = Array.from((_a = input.files) !== null && _a !== void 0 ? _a : []);
+            this.processFiles(files);
+            /* Reset para que seleccionar el mismo archivo dos veces dispare el change. */
+            input.value = '';
+        };
+    }
+    /* Sin tooltip nativo gris: `title` en el Host del JSX no borra el atributo que
+       puso el consumer (el vdom no lo tenía), así que se quita a mano. */
+    componentWillLoad() {
+        this.el.removeAttribute('title');
+    }
+    /** Estado derivado (driver del SCSS por `data-sui-state`). */
+    get state() {
+        if (this.disabled)
+            return 'disabled';
+        if (this.error || this.internalError)
+            return 'error';
+        if (this.dragging)
+            return 'dragover';
+        return 'default';
+    }
+    get resolvedTitle() {
+        if (this.heading)
+            return this.heading;
+        return this.multiple
+            ? 'Arrastra y suelta los archivos aquí'
+            : 'Arrastra y suelta el archivo aquí';
+    }
+    get resolvedSubtitle() {
+        var _a;
+        return (_a = this.subtitle) !== null && _a !== void 0 ? _a : 'o haz clic para seleccionar';
+    }
+    get resolvedErrorMessage() {
+        var _a;
+        return (_a = this.errorMessage) !== null && _a !== void 0 ? _a : this.internalError;
+    }
+    /** Icon size px. Figma verified = 24 (medium). Escala +4: small 20 · large 28 · xlarge 32. */
+    get iconSize() {
+        var _a;
+        return (_a = { small: 20, medium: 24, large: 28, xlarge: 32 }[this.size]) !== null && _a !== void 0 ? _a : 24;
+    }
+    /* ── Host interaction ──────────────────────────────────────────────────────
+       Sin role=button ni tabindex en el host (fix a11y 04-10-2026): era un control
+       con otro control adentro y Enter sobre «Buscar archivo» pedía el selector dos
+       veces. El control de teclado es el botón interno; el clic en cualquier parte
+       del área sigue abriendo el selector para el mouse y el dedo. */
+    onHostClick() {
+        this.openPicker();
+    }
+    onDragOver(event) {
+        if (this.disabled)
+            return;
+        event.preventDefault();
+        this.dragging = true;
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        this.dragging = false;
+    }
+    onDrop(event) {
+        var _a, _b;
+        event.preventDefault();
+        this.dragging = false;
+        if (this.disabled)
+            return;
+        const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
+        this.processFiles(files);
+    }
+    openPicker() {
+        var _a;
+        if (this.disabled)
+            return;
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    processFiles(files) {
+        if (!files.length)
+            return;
+        const accept = this.accept.trim();
+        const max = this.maxSize;
+        const valid = [];
+        let rejectedReason = null;
+        for (const f of files) {
+            if (max > 0 && f.size > max) {
+                rejectedReason = `"${f.name}" supera el tamaño máximo (${this.formatBytes(max)})`;
+                continue;
+            }
+            if (accept && !this.matchesAccept(f, accept)) {
+                rejectedReason = `"${f.name}" no es un tipo permitido`;
+                continue;
+            }
+            valid.push(f);
+        }
+        if (rejectedReason) {
+            this.internalError = rejectedReason;
+            this.errorEvent.emit(rejectedReason);
+        }
+        else {
+            this.internalError = null;
+        }
+        if (valid.length) {
+            const out = this.multiple ? valid : valid.slice(0, 1);
+            this.filesSelected.emit(out);
+        }
+    }
+    matchesAccept(file, accept) {
+        const tokens = accept
+            .split(',')
+            .map((t) => t.trim().toLowerCase())
+            .filter(Boolean);
+        const fileName = file.name.toLowerCase();
+        const fileType = file.type.toLowerCase();
+        return tokens.some((token) => {
+            if (token.startsWith('.'))
+                return fileName.endsWith(token);
+            if (token.endsWith('/*'))
+                return fileType.startsWith(token.slice(0, -1));
+            return fileType === token;
+        });
+    }
+    formatBytes(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(0)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    render() {
+        var _a;
+        const errMsg = this.resolvedErrorMessage;
+        return (h(Host, { key: '956647b791090dd15091eea8b28d8f0a26d40d9f', "data-sui-size": this.size, "data-sui-state": this.state, "data-sui-disabled": this.disabled ? '' : undefined }, h("sui-icon", { key: 'adb9766d04f1ff2297a4c78c3c0f10adb3203cc1', class: "sui-file-upload__icon", name: "upload-cloud-2-line", size: this.iconSize, "aria-hidden": "true" }), h("div", { key: '679daec7c721e3509c81a7f8d7cfac50f5b1775b', class: "sui-file-upload__text" }, h("p", { key: '8813ef59c0a5b0f8010daddcf2ac3d789a6849b6', class: "sui-file-upload__title" }, this.resolvedTitle), h("p", { key: '6b51f5f973eac1c3dc69188c29697848318d0b12', class: "sui-file-upload__subtitle" }, this.resolvedSubtitle)), h("sui-button", { key: '7d819cff251a1c8baa89b9d0210d387b6c01a585', class: "sui-file-upload__browse", variant: "stroke", color: "neutral", size: "xsmall", disabled: this.disabled, onClick: this.onBrowseClick }, (_a = this.browseLabel) !== null && _a !== void 0 ? _a : 'Buscar archivo'), errMsg && h("p", { key: 'cc4503cd90223e2fa4a22a2a347b5a69b28de43e', class: "sui-file-upload__error" }, errMsg), h("input", { key: '6586cb77aca62fa5098f4c9693ca5de6506cfae6', ref: (el) => (this.inputEl = el), type: "file", class: "sui-file-upload__input", accept: this.accept || undefined, multiple: this.multiple, disabled: this.disabled, onChange: this.onInputChange })));
+    }
+    get el() { return getElement(this); }
+};
+SuiFileUpload.style = suiFileUploadCss();
+
+export { SuiFileUpload as sui_file_upload };

package/dist/esm/sui-filter-bar.entry.js

@@ -0,0 +1,17 @@
+import { r as registerInstance, h, H as Host } from './index-CHeoPpKZ.js';
+
+const suiFilterBarCss = () => `@charset "UTF-8";.sc-sui-filter-bar-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans, "Inter", system-ui, sans-serif)}.sui-filter-bar__side.sc-sui-filter-bar{display:flex;align-items:center;gap:12px;min-width:0}.sui-filter-bar__side--end.sc-sui-filter-bar{margin-left:auto}@media (max-width: 640px){.sc-sui-filter-bar-h{flex-direction:column;align-items:stretch;gap:12px}.sui-filter-bar__side.sc-sui-filter-bar{width:100%;flex-wrap:wrap}.sui-filter-bar__side--end.sc-sui-filter-bar{margin-left:0}}`;
+
+const SuiFilterBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Variante de la toolbar. Solo afecta hints de layout/responsive, no el wiring. */
+        this.variant = 'table';
+    }
+    render() {
+        return (h(Host, { key: 'acc782c637bf357513a902dece80e9f71402083c', "data-sui-variant": this.variant }, h("div", { key: '3ec583afa77b8a3a41e889f4ae64ef454147bc80', class: "sui-filter-bar__side sui-filter-bar__side--start" }, h("slot", { key: '8166c17a629a13d4dad41eb2c4edfe33decd2128', name: "start" })), h("div", { key: 'c04ff2232d3d89075057ac56c7662b108460744b', class: "sui-filter-bar__side sui-filter-bar__side--end" }, h("slot", { key: '49a5ff96c0be9067921677e5a31834f4b0c7e7a8', name: "end" })), h("slot", { key: '1e110527b789c82a32caff5c29d0473a06e00073' })));
+    }
+};
+SuiFilterBar.style = suiFilterBarCss();
+
+export { SuiFilterBar as sui_filter_bar };

package/dist/esm/sui-filter-item.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiFilterItemCss = () => `@charset "UTF-8";.sc-sui-filter-item-h{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:8px;border-radius:var(--sui-radius-8, 8px);overflow:hidden;box-sizing:border-box;cursor:pointer;user-select:none;outline:none;-webkit-tap-highlight-color:transparent;background:var(--sui-bg-white-0);color:var(--sui-text-sub-600);font-family:var(--sui-font-sans, "Inter", system-ui, sans-serif);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;transition:background-color 0.15s ease, color 0.15s ease, transform 0.12s ease}.sc-sui-filter-item-h:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:-2px}.sc-sui-filter-item-h:active:not([data-sui-disabled]){transform:scale(0.99)}[data-sui-state=default].sc-sui-filter-item-h{background:var(--sui-bg-white-0);color:var(--sui-text-sub-600)}[data-sui-state=default].sc-sui-filter-item-h .sui-filter-item__icon--left.sc-sui-filter-item{color:var(--sui-icon-soft-400)}[data-sui-state=default].sc-sui-filter-item-h:hover{background:var(--sui-bg-weak-50)}[data-sui-state=default].sc-sui-filter-item-h:hover .sui-filter-item__icon--left.sc-sui-filter-item{color:var(--sui-icon-sub-600)}[data-sui-state=active].sc-sui-filter-item-h{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}[data-sui-state=active].sc-sui-filter-item-h .sui-filter-item__icon--left.sc-sui-filter-item{color:var(--sui-primary-base)}[data-sui-state=active].sc-sui-filter-item-h .sui-filter-item__icon--active.sc-sui-filter-item{color:var(--sui-icon-soft-400)}[data-sui-disabled].sc-sui-filter-item-h{opacity:0.4;pointer-events:none;cursor:not-allowed}.sui-filter-item__icon.sc-sui-filter-item{display:inline-flex;flex-shrink:0}.sui-filter-item__label.sc-sui-filter-item{flex:1 1 auto;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.084px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-filter-item__icon--active.sc-sui-filter-item{margin-left:auto}`;
+
+const SuiFilterItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selected = createEvent(this, "selected");
+        /** Fila seleccionada/activa. Default `false`. */
+        this.active = false;
+        /** Deshabilita la fila (sale del tab order, no emite). Default `false`. */
+        this.disabled = false;
+        /** Icono opcional a la izquierda del label (20x20). `null` = sin icono. */
+        this.leftIcon = null;
+        /** Icono que aparece a la derecha cuando está active. Override del default. */
+        this.activeIcon = 'arrow-right-s-line';
+        this.onActivate = (event) => {
+            if (this.disabled) {
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
+            this.selected.emit(event);
+        };
+        this.onKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                this.onActivate(event);
+            }
+            else if (event.key === ' ' || event.key === 'Spacebar') {
+                this.onActivate(event);
+                event.preventDefault();
+            }
+        };
+    }
+    /** Estado derivado: `active` cuando active=true, sino `default`. */
+    get state() {
+        return this.active ? 'active' : 'default';
+    }
+    /* iOS WKWebView :active fix — sin esto el :active queda stuck 300-500ms en
+       pages standalone. La presencia del binding engage el touch pipeline. */
+    onTouchStart() {
+        /* no-op a propósito. */
+    }
+    onTouchEnd() {
+        this.el.blur();
+    }
+    render() {
+        return (h(Host, { key: '538d53e868a13e4712b441931bef52f025c5024a', "data-sui-state": this.state, "data-sui-disabled": this.disabled ? '' : undefined, role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.active ? 'true' : 'false', onClick: this.onActivate, onKeyDown: this.onKeyDown }, this.leftIcon && (h("sui-icon", { key: 'b78c0331f938c2ca9ab386aaf4ebc6775d61cd0c', name: this.leftIcon, size: 20, class: "sui-filter-item__icon sui-filter-item__icon--left" })), h("span", { key: 'a0995a955e82a0e607f9adec0cbb05d92d4c0924', class: "sui-filter-item__label" }, h("slot", { key: '75aff36c8801e2755ec1e93805b3f926f757cb84' })), this.active && (h("sui-icon", { key: '30a9179149455e37338d93fa6ef73227c3b2b1f1', name: this.activeIcon, size: 20, class: "sui-filter-item__icon sui-filter-item__icon--active" }))));
+    }
+    get el() { return getElement(this); }
+};
+SuiFilterItem.style = suiFilterItemCss();
+
+export { SuiFilterItem as sui_filter_item };

package/dist/esm/sui-filter-panel-footer.entry.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-CHeoPpKZ.js';
+
+const suiFilterPanelFooterCss = () => `@charset "UTF-8";.sc-sui-filter-panel-footer-h{display:flex;align-items:center;gap:12px;width:100%;padding:16px 20px;border-top:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);overflow:hidden;box-sizing:border-box}.sui-filter-panel-footer__btn.sc-sui-filter-panel-footer{flex:1 1 0;display:flex !important;justify-content:center}`;
+
+const SuiFilterPanelFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clear = createEvent(this, "clear");
+        this.apply = createEvent(this, "apply");
+        /** Botón «Limpiar» (stroke neutral): string (label) o `SuiFooterButtonConfig`. Default «Limpiar». */
+        this.clearButton = null;
+        /** Botón «Aplicar» (filled primary): string (label) o `SuiFooterButtonConfig`. Default «Aplicar». */
+        this.applyButton = null;
+        /**
+         * Tamaño de los botones. Default `medium` (40, la computadora). `large` (48)
+         * para el teléfono y la tablet táctil. `small` (36, el que dibuja Figma) queda
+         * por compatibilidad.
+         */
+        this.size = 'medium';
+    }
+    cfg(b, fallback) {
+        const v = b !== null && b !== void 0 ? b : fallback;
+        return typeof v === 'string' ? { label: v } : v;
+    }
+    render() {
+        var _a, _b;
+        const clear = this.cfg(this.clearButton, 'Limpiar');
+        const apply = this.cfg(this.applyButton, 'Aplicar');
+        return (h(Host, { key: '38902296514bcf3b876c66df0b4917823d585bc8' }, h("sui-button", { key: '74ac5239ed951af0f4a5f52cc00c0fd3ec1de8c9', class: "sui-filter-panel-footer__btn", variant: "stroke", color: "neutral", size: this.size, disabled: (_a = clear.disabled) !== null && _a !== void 0 ? _a : false, onClick: () => !clear.disabled && this.clear.emit() }, clear.label), h("sui-button", { key: 'acb27b9f85ba5040fbb565078272136faac3e6a3', class: "sui-filter-panel-footer__btn", variant: "filled", color: "primary", size: this.size, disabled: (_b = apply.disabled) !== null && _b !== void 0 ? _b : false, onClick: () => !apply.disabled && this.apply.emit() }, apply.label)));
+    }
+};
+SuiFilterPanelFooter.style = suiFilterPanelFooterCss();
+
+export { SuiFilterPanelFooter as sui_filter_panel_footer };

package/dist/esm/sui-filter-panel-header.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiFilterPanelHeaderCss = () => `@charset "UTF-8";.sc-sui-filter-panel-header-h{display:flex;align-items:center;gap:8px;width:100%;padding:16px 20px;border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);overflow:hidden;box-sizing:border-box;font-family:var(--sui-font-sans, "Inter", system-ui, sans-serif)}.sui-filter-panel-header__icon.sc-sui-filter-panel-header{display:inline-flex;flex-shrink:0;color:var(--sui-icon-sub-600)}.sui-filter-panel-header__label.sc-sui-filter-panel-header{flex:1 1 auto;min-width:0;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.084px;color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-filter-panel-header__clear.sc-sui-filter-panel-header{flex-shrink:0;margin-left:auto}`;
+
+const SuiFilterPanelHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clearClick = createEvent(this, "clearClick");
+        /** Texto del header. */
+        this.label = '';
+        /** Icono opcional a la izquierda del label (20x20). `null` = sin icono. */
+        this.leftIcon = null;
+        /**
+         * Link de limpieza a la derecha: `true` = label default «Limpiar», string =
+         * label custom, `false` (default) o '' = oculto. Como atributo: `clear="true"`
+         * muestra «Limpiar» y `clear="Borrar"` cambia el label. Ojo: `clear` sin valor
+         * llega como '' y queda oculto (misma regla que el SUI Angular).
+         */
+        this.clear = false;
+    }
+    /** Label resuelto del link (null = oculto). */
+    get clearLabel() {
+        const c = this.clear;
+        if (c === true || c === 'true')
+            return 'Limpiar';
+        return typeof c === 'string' && c && c !== 'false' ? c : null;
+    }
+    /** Strip del `title` nativo (evita el tooltip gris del browser). `title={undefined}` en el Host no lo saca. */
+    componentDidRender() {
+        this.el.removeAttribute('title');
+    }
+    render() {
+        const clearLabel = this.clearLabel;
+        return (h(Host, { key: 'd3fac12fffa352e5e2e1bc1c80ad33e5c075660f' }, this.leftIcon && (h("sui-icon", { key: '94650516c59705eb6fbcef0ca9f433357b6da122', name: this.leftIcon, size: 20, class: "sui-filter-panel-header__icon" })), h("span", { key: 'b7aa033e93b380e0fba447e49a475d83123cf1b7', class: "sui-filter-panel-header__label" }, this.label), clearLabel && (h("sui-link-button", { key: '2c1d1d842de5749294098ee4602a1f040c597eff', class: "sui-filter-panel-header__clear", variant: "gray", size: "small", underline: true, onClicked: () => this.clearClick.emit() }, clearLabel))));
+    }
+    get el() { return getElement(this); }
+};
+SuiFilterPanelHeader.style = suiFilterPanelHeaderCss();
+
+export { SuiFilterPanelHeader as sui_filter_panel_header };

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

@@ -0,0 +1,29 @@
+import { r as registerInstance, d as getAssetPath, h, H as Host } from './index-CHeoPpKZ.js';
+
+const suiFlagCss = () => `@charset "UTF-8";.sc-sui-flag-h{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;line-height:1}.sui-flag__img.sc-sui-flag{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}[data-size=xs].sc-sui-flag-h{width:16px;height:16px}[data-size=sm].sc-sui-flag-h{width:20px;height:20px}[data-size=md].sc-sui-flag-h{width:24px;height:24px}[data-size=lg].sc-sui-flag-h{width:32px;height:32px}[data-size=xl].sc-sui-flag-h{width:48px;height:48px}[data-size=full].sc-sui-flag-h{width:100%;height:100%}`;
+
+const SuiFlag = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Tamaño del flag. Default `md` (24px) — matchea el viewBox nativo del SVG. */
+        this.size = 'md';
+        /**
+         * Aria-label opcional. Si se provee, el flag se anuncia como `<img>` con ese
+         * label (`role="img"`). Si no, se considera decorativo (`aria-hidden="true"`).
+         */
+        this.ariaLabel = null;
+    }
+    /** URL absoluta al SVG, resuelta contra el base path del componente. */
+    get src() {
+        return getAssetPath(`assets/flags/${this.name}.svg`);
+    }
+    render() {
+        var _a, _b;
+        const labelled = !!this.ariaLabel;
+        return (h(Host, { key: 'a98f18909213cd576dca5c989ff17e54eb42f317', "data-size": this.size, role: labelled ? 'img' : null, "aria-hidden": labelled ? null : 'true', "aria-label": (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : null }, h("img", { key: '789bdecded3f8230bd6c80adb303e00b4a12c9b7', class: "sui-flag__img", src: this.src, alt: (_b = this.ariaLabel) !== null && _b !== void 0 ? _b : '', loading: "lazy", decoding: "async" })));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+SuiFlag.style = suiFlagCss();
+
+export { SuiFlag as sui_flag };