@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/cjs/sui-image-upload.cjs.entry.js

@@ -0,0 +1,255 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiToque = require('./sui-toque-TviBCJ0g.js');
+
+/**
+ * Tipos y catálogos compartidos del `<sui-image-upload>`. Viven en este archivo
+ * hermano (no en el `.tsx`) por la regla del proyecto Stencil: en el `.tsx`
+ * SOLO se permite `export class` / `export type` / `export interface`.
+ * Cualquier `export const` / `export function` / `export enum` rompe el build de
+ * TODO el proyecto, así que los catálogos / constantes data-driven se aíslan acá.
+ *
+ * Homologado con el SUI Angular (05-11-2026).
+ */
+/** px values por size token — escalera uniforme (igual al Angular). */
+const SIZE_PX = {
+    sm: 80,
+    md: 120,
+    lg: 160,
+    xl: 200,
+};
+/**
+ * Tipos aceptados. HEIC/HEIF desde el 03-10-2026: la foto del iPhone llega así
+ * cuando se sube desde Android o la compu (en el iPhone el sistema ya la
+ * convierte a JPEG). Chrome suele reportar `file.type` vacío para un .heic,
+ * por eso además se acepta por extensión.
+ */
+const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/webp', 'image/gif', 'image/heic', 'image/heif'];
+const ALLOWED_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.webp', '.gif', '.heic', '.heif'];
+/** Valor del `accept` del input file (tipos + extensiones, por el .heic sin MIME). */
+const SUI_IMAGE_UPLOAD_ACCEPT = [...ALLOWED_TYPES, '.heic', '.heif'].join(',');
+/** ¿Es una imagen que el componente acepta? Por MIME o, si viene vacío, por extensión. */
+function esImagenAceptada(file) {
+    if (file.type && ALLOWED_TYPES.includes(file.type.toLowerCase()))
+        return true;
+    const nombre = file.name.toLowerCase();
+    return ALLOWED_EXTENSIONS.some((ext) => nombre.endsWith(ext)) && (!file.type || file.type.startsWith('image/'));
+}
+
+const suiImageUploadCss = () => `@charset "UTF-8";.sc-sui-image-upload-h{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--sui-font-sans, sans-serif);cursor:pointer;flex-shrink:0}[data-sui-fluid].sc-sui-image-upload-h{display:block;width:100%}[data-sui-fluid].sc-sui-image-upload-h .sui-image-upload__empty.sc-sui-image-upload{height:auto;min-height:132px;padding:20px 16px}[data-sui-fluid].sc-sui-image-upload-h .sui-image-upload__preview.sc-sui-image-upload{height:auto;max-height:320px}[data-sui-fluid].sc-sui-image-upload-h .sui-image-upload__img.sc-sui-image-upload{height:auto;max-height:320px;object-fit:contain;background:var(--sui-bg-weak-50, #f7f7f7)}[data-sui-fluid].sc-sui-image-upload-h .sui-image-upload__remove.sc-sui-image-upload{margin-top:8px}[data-sui-disabled].sc-sui-image-upload-h{cursor:not-allowed;opacity:0.5}.sui-image-upload__empty.sc-sui-image-upload{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, 0.06));text-align:center;padding:12px 8px;box-sizing:border-box;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-shape=circle].sc-sui-image-upload-h .sui-image-upload__empty.sc-sui-image-upload{border-radius:999px}[data-sui-shape=rect].sc-sui-image-upload-h .sui-image-upload__empty.sc-sui-image-upload{border-radius:var(--sui-radius-12, 12px)}.sc-sui-image-upload-h:hover:not([data-sui-disabled]) .sui-image-upload__empty.sc-sui-image-upload{border-color:var(--sui-stroke-sub-300, #d1d1d1);background:var(--sui-bg-weak-50, #f7f7f7)}[data-sui-state=dragover].sc-sui-image-upload-h .sui-image-upload__empty.sc-sui-image-upload{border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, 0.1019607843))}.sui-image-upload__icon.sc-sui-image-upload{width:32px;height:32px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);display:flex;align-items:center;justify-content:center;color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}[data-sui-size=xl].sc-sui-image-upload-h .sui-image-upload__icon.sc-sui-image-upload{width:40px;height:40px}[data-sui-state=dragover].sc-sui-image-upload-h .sui-image-upload__icon.sc-sui-image-upload{background:var(--sui-primary-alpha-16, rgba(250, 115, 25, 0.1607843137));color:var(--sui-primary-base, #fa7319)}.sui-image-upload__text.sc-sui-image-upload{display:flex;flex-direction:column;gap:2px;align-items:center}.sui-image-upload__title.sc-sui-image-upload{margin:0;font-size:12px;font-weight:500;line-height:16px;color:var(--sui-text-strong-950, #171717)}[data-sui-size=xl].sc-sui-image-upload-h .sui-image-upload__title.sc-sui-image-upload{font-size:13px;line-height:18px}.sui-image-upload__subtitle.sc-sui-image-upload{margin:0;font-size:11px;font-weight:400;line-height:15px;color:var(--sui-text-sub-600, #5c5c5c)}[data-sui-size=sm].sc-sui-image-upload-h .sui-image-upload__subtitle.sc-sui-image-upload{display:none}[data-sui-size=xl].sc-sui-image-upload-h .sui-image-upload__subtitle.sc-sui-image-upload{font-size:12px;line-height:16px}.sui-image-upload__error.sc-sui-image-upload{margin:2px 0 0;font-size:10px;line-height:14px;color:var(--sui-state-error-base, #fb3748);text-align:center}.sui-image-upload__preview.sc-sui-image-upload{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, 0.06));flex-shrink:0}[data-sui-shape=circle].sc-sui-image-upload-h .sui-image-upload__preview.sc-sui-image-upload{border-radius:999px}[data-sui-shape=rect].sc-sui-image-upload-h .sui-image-upload__preview.sc-sui-image-upload{border-radius:var(--sui-radius-12, 12px)}.sui-image-upload__img.sc-sui-image-upload{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}.sui-image-upload__overlay.sc-sui-image-upload{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1));cursor:pointer;margin:0;padding:0;border:0;min-height:0;border-radius:inherit;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}.sc-sui-image-upload-h:hover:not([data-sui-disabled]) .sui-image-upload__overlay.sc-sui-image-upload{opacity:1}.sui-image-upload__overlay.sc-sui-image-upload:focus-visible{opacity:1;outline:2px solid var(--sui-stroke-strong-950, #171717);outline-offset:2px}.sui-image-upload__overlay.sc-sui-image-upload:disabled{cursor:not-allowed}.sui-image-upload__overlay-icon.sc-sui-image-upload{width:32px;height:32px;border-radius:999px;background:rgba(255, 255, 255, 0.2);display:flex;align-items:center;justify-content:center;color:var(--sui-static-white, #fff)}.sui-image-upload__preview--editable.sc-sui-image-upload{cursor:default}.sui-image-upload__controls.sc-sui-image-upload{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}[data-sui-shape=circle].sc-sui-image-upload-h .sui-image-upload__controls.sc-sui-image-upload{top:auto;right:auto;left:50%;bottom:20%;transform:translateX(-50%)}.sui-image-upload__ctrl.sc-sui-image-upload{width:40px;height:40px;min-width:0;min-height:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:rgba(0, 0, 0, 0.55);color:var(--sui-static-white, #fff);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 150ms ease, transform 120ms ease}.sui-image-upload__ctrl.sc-sui-image-upload:active{transform:scale(0.92)}.sui-image-upload__ctrl.sc-sui-image-upload:disabled{opacity:0.5;cursor:not-allowed}.sui-image-upload__ctrl--danger.sc-sui-image-upload:active{background:var(--sui-state-error-base, #fb3748)}[data-sui-size=sm].sc-sui-image-upload-h .sui-image-upload__controls.sc-sui-image-upload{top:6px;right:6px;gap:4px}[data-sui-size=sm].sc-sui-image-upload-h .sui-image-upload__ctrl.sc-sui-image-upload{width:32px;height:32px}[data-sui-size=sm][data-sui-shape=circle].sc-sui-image-upload-h .sui-image-upload__controls.sc-sui-image-upload{top:auto;right:auto;bottom:22%}.sui-image-upload__remove.sc-sui-image-upload{flex-shrink:0}@media (max-width: 767px){.sui-image-upload__ctrl.sc-sui-image-upload{position:relative}.sui-image-upload__ctrl.sc-sui-image-upload::before{content:"";position:absolute;top:50%;height:44px;left:-3px;right:-3px;transform:translateY(-50%)}[data-sui-size=sm].sc-sui-image-upload-h .sui-image-upload__ctrl.sc-sui-image-upload::before{left:-2px;right:-2px}.sui-image-upload__remove.sc-sui-image-upload{position:relative}.sui-image-upload__remove.sc-sui-image-upload::before{content:"";position:absolute;top:-4px;bottom:-8px;left:-6px;right:-6px}}.sui-image-upload__input.sc-sui-image-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 SuiImageUpload = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.srcChange = index.createEvent(this, "srcChange");
+        this.imageSelected = index.createEvent(this, "imageSelected");
+        this.removed = index.createEvent(this, "removed");
+        this.editRequested = index.createEvent(this, "editRequested");
+        this.errorEvent = index.createEvent(this, "errorEvent");
+        /** Ocupa el ancho del contenedor en vez del cuadrado fijo de `size`; el alto lo da el contenido. Default `false`. */
+        this.fluid = false;
+        /** Forma del preview. Default `circle`. */
+        this.shape = 'circle';
+        /** Tamaño del cuadro. Default `lg` (160px). */
+        this.size = 'lg';
+        /**
+         * URL (o data-URL) de la imagen actual. Bidireccional vía el evento
+         * `srcChange` (equivale al `model` del Angular).
+         */
+        this.src = null;
+        /** Tamaño máximo en bytes. `0` = sin límite. Default `0`. */
+        this.maxSize = 0;
+        /**
+         * Título del empty state. Default según shape («Sube tu foto» / «Sube tu
+         * logo»). Es el `title` del Angular: `title` es reservado del DOM.
+         */
+        this.heading = null;
+        /** Subtítulo del empty state. Default «JPG, PNG, WebP o HEIC» (+ el máximo si hay `maxSize`). */
+        this.subtitle = null;
+        /** Deshabilitado: bloquea interacción, atenúa, no focusable. Default `false`. */
+        this.disabled = false;
+        /**
+         * Opt-in: con imagen muestra controles de ÍCONO (editar + tacho) en vez del
+         * overlay de re-subir + botón «Quitar». El lápiz emite `editRequested`.
+         */
+        this.editable = false;
+        this.dragging = false;
+        /** Error de validación interno (tipo/tamaño no soportado). */
+        this.internalError = null;
+        this.onChangeClick = (e) => {
+            e.stopPropagation();
+            void this.abrirSelector();
+        };
+        this.onEditClick = (e) => {
+            e.stopPropagation();
+            if (this.disabled)
+                return;
+            this.editRequested.emit();
+        };
+        this.onRemoveClick = (e) => {
+            e.stopPropagation();
+            if (this.disabled)
+                return;
+            this.src = null;
+            this.srcChange.emit(null);
+            this.internalError = null;
+            this.removed.emit();
+        };
+        this.onInputChange = (e) => {
+            var _a;
+            const input = e.target;
+            const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (file)
+                this.processFile(file);
+            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');
+    }
+    // ── derivados ──────────────────────────────────────────────────────────
+    get hasSrc() {
+        return !!this.src;
+    }
+    /** Hay imagen y se muestra el botón «Quitar» debajo (sin `editable`). */
+    get conQuitar() {
+        return this.hasSrc && !this.editable;
+    }
+    get sizePx() {
+        return SIZE_PX[this.size];
+    }
+    get state() {
+        if (this.disabled)
+            return 'disabled';
+        if (this.dragging)
+            return 'dragover';
+        if (this.hasSrc)
+            return 'filled';
+        return 'empty';
+    }
+    get resolvedTitle() {
+        if (this.heading)
+            return this.heading;
+        return this.shape === 'circle' ? 'Sube tu foto' : 'Sube tu logo';
+    }
+    get resolvedSubtitle() {
+        if (this.subtitle)
+            return this.subtitle;
+        const formatos = 'JPG, PNG, WebP o HEIC';
+        return this.maxSize > 0 ? `${formatos} — máx ${this.formatBytes(this.maxSize)}` : formatos;
+    }
+    // ── host listeners ─────────────────────────────────────────────────────
+    /* iOS `:active`: listeners PASIVOS en el host (utils/sui-toque.ts). */
+    alTocar() { }
+    alSoltar(event) {
+        suiToque.soltarToque(event, '.sui-image-upload__ctrl, .sui-image-upload__overlay');
+        this.el.blur();
+    }
+    onHostClick(event) {
+        var _a, _b, _c;
+        if (this.disabled || this.hasSrc)
+            return;
+        /* El click programático del input file burbujea hasta acá: no re-abrir. */
+        if ((_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.sui-image-upload__input'))
+            return;
+        (_c = this.inputRef) === null || _c === void 0 ? void 0 : _c.click();
+    }
+    /**
+     * Enter/Espacio sobre el host vacío. Solo cuenta si el foco está en el host:
+     * un Enter que burbujea desde «Quitar» (que borra la imagen y deja el host
+     * vacío en ese mismo tick) no debe abrir el selector.
+     */
+    onHostKey(event) {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        if (event.target !== this.el)
+            return;
+        event.preventDefault();
+        if (event.repeat)
+            return;
+        this.onHostClick();
+    }
+    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 : []);
+        if (files.length)
+            this.processFile(files[0]);
+    }
+    /**
+     * Reabre el selector de archivo. Público a propósito: en modo `editable` el
+     * lápiz emite `editRequested`, pero no todo caso tiene recortador. Para un
+     * documento, lo que se espera del lápiz es elegir otro archivo.
+     */
+    async abrirSelector() {
+        var _a;
+        if (this.disabled)
+            return;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    fallar(msg) {
+        this.internalError = msg;
+        this.errorEvent.emit(msg);
+    }
+    processFile(file) {
+        if (!esImagenAceptada(file))
+            return this.fallar('Tipo no soportado. Usa JPG, PNG, WebP, GIF o HEIC.');
+        if (this.maxSize > 0 && file.size > this.maxSize) {
+            return this.fallar(`Imagen supera el tamaño máximo (${this.formatBytes(this.maxSize)})`);
+        }
+        this.internalError = null;
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+            var _a, _b;
+            const result = (_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.result) !== null && _b !== void 0 ? _b : null;
+            this.src = result;
+            this.srcChange.emit(result);
+        };
+        reader.readAsDataURL(file);
+        this.imageSelected.emit(file);
+    }
+    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 px = `${this.sizePx}px`;
+        /* En fluido el tamaño lo pone el contenedor. Con «Quitar» debajo el alto
+           deja de ser fijo; el cuadrado del preview conserva su lado. Las claves
+           ausentes se quitan del style (un `undefined` no lo limpia). */
+        const hostStyle = {};
+        if (!this.fluid)
+            hostStyle.width = px;
+        if (!this.fluid && !this.conQuitar)
+            hostStyle.height = px;
+        /* Lápiz y tacho (editable): 20 en botones de 40, 16 en sm (32). */
+        const ctrlIcon = this.size === 'sm' ? 16 : 20;
+        return (index.h(index.Host, { key: '9e0ddb32a258b9372594b74f56cfe5f807af20b2', role: this.hasSrc ? null : 'button', tabindex: this.hasSrc ? null : this.disabled ? '-1' : '0', "data-sui-shape": this.shape, "data-sui-size": this.size, "data-sui-state": this.state, "data-sui-disabled": this.disabled ? '' : null, "data-sui-fluid": this.fluid ? '' : null, style: hostStyle }, !this.hasSrc && (index.h("div", { key: 'f2cef07eb8565cab41485c5f52ab520892ca1501', class: "sui-image-upload__empty" }, index.h("div", { key: '30e066c68cefca786deb7de81688c052a2c4d978', class: "sui-image-upload__icon" }, index.h("sui-icon", { key: '74e07b1ca3bcedb3e877b8c63bd45f269ffeaee9', name: "image-add-line", size: this.size === 'xl' ? 20 : 16, "aria-hidden": "true" })), index.h("div", { key: 'd554aff4d801674855b7bdff90f659a6e27d89c5', class: "sui-image-upload__text" }, index.h("p", { key: 'e5d6ce41984ff8a6f0f539d0ec45afc4c1da560c', class: "sui-image-upload__title" }, this.resolvedTitle), index.h("p", { key: '381c9a0b196552a99df342aefbd97d95e9e3ca2b', class: "sui-image-upload__subtitle" }, this.resolvedSubtitle)), this.internalError && index.h("p", { key: '7a9edf9ba4c5f86ae7e1d9cfde3a4eac02b339ce', class: "sui-image-upload__error" }, this.internalError))), this.hasSrc && (index.h("div", { key: '7e0883b9f4a9836e47a9bc5140cc25acb082d668', class: { 'sui-image-upload__preview': true, 'sui-image-upload__preview--editable': this.editable }, style: !this.fluid && this.conQuitar ? { height: px } : {} }, index.h("img", { key: 'e68a7c2e38cb05bb297edff63564f8405196aec1', class: "sui-image-upload__img", src: (_a = this.src) !== null && _a !== void 0 ? _a : undefined, alt: "Vista previa", draggable: false }), this.editable ? (index.h("div", { class: "sui-image-upload__controls" }, index.h("button", { type: "button", class: "sui-image-upload__ctrl", "aria-label": "Editar imagen", disabled: this.disabled, onClick: this.onEditClick }, index.h("sui-icon", { name: "pencil-line", size: ctrlIcon, "aria-hidden": "true" })), index.h("button", { type: "button", class: "sui-image-upload__ctrl sui-image-upload__ctrl--danger", "aria-label": "Quitar imagen", disabled: this.disabled, onClick: this.onRemoveClick }, index.h("sui-icon", { name: "delete-bin-line", size: ctrlIcon, "aria-hidden": "true" })))) : (
+        /* Overlay de re-subir: un <button> real (antes un div con click, sin foco ni teclado). */
+        index.h("button", { type: "button", class: "sui-image-upload__overlay", "aria-label": "Cambiar imagen", disabled: this.disabled, onClick: this.onChangeClick }, index.h("span", { class: "sui-image-upload__overlay-icon" }, index.h("sui-icon", { name: "pencil-line", size: 16, "aria-hidden": "true" })))))), this.conQuitar && (index.h("sui-button", { key: '39f825f03eaf635d688afbe3638e52a4626fd1fd', class: "sui-image-upload__remove", variant: "stroke", color: "error", size: "xsmall", disabled: this.disabled, onClick: this.onRemoveClick }, "Quitar")), index.h("input", { key: '7760b6ea83ef5179e6b1abebb0fd283a5858b8de', ref: (elInput) => (this.inputRef = elInput), type: "file", class: "sui-image-upload__input", accept: SUI_IMAGE_UPLOAD_ACCEPT, disabled: this.disabled, onChange: this.onInputChange })));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiImageUpload.style = suiImageUploadCss();
+
+exports.sui_image_upload = SuiImageUpload;

package/dist/cjs/sui-img-retry.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiImgRetry_util = require('./sui-img-retry.util-DOmJZIaP.js');
+
+const suiImgRetryCss = () => `.sc-sui-img-retry-h{display:contents}`;
+
+const SuiImgRetry = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.detach = null;
+    }
+    connectedCallback() {
+        const img = this.el.querySelector('img');
+        if (img && !this.detach)
+            this.detach = suiImgRetry_util.suiImgRetry(img);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.detach) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.detach = null;
+    }
+    get el() { return index.getElement(this); }
+};
+SuiImgRetry.style = suiImgRetryCss();
+
+exports.sui_img_retry = SuiImgRetry;

package/dist/cjs/sui-img-retry.util-DOmJZIaP.js

@@ -0,0 +1,93 @@
+'use strict';
+
+/* Vive fuera del .tsx: Stencil solo admite la clase como export de valor en un módulo con @Component. */
+const DELAYS_MS = [1000, 3000, 8000];
+/**
+ * Engancha el reintento a un `<img>` cualquiera y devuelve la función que lo
+ * suelta. Es la lógica de la directiva Angular `img[suiImgRetry]`, sin
+ * framework: el `<sui-img-retry>` la usa con su `<img>` hijo, y quien no quiera
+ * el wrapper puede llamarla directo.
+ *
+ * - Falla la carga → reintenta a 1 s, 3 s y 8 s.
+ * - Desde el 2.º reintento, `fetch(src, { cache: 'reload' })` antes de
+ *   reintentar, para pisar una copia truncada del disk cache.
+ * - Vuelve la red (`online`) → si no cargó, reintento inmediato y contador a 0.
+ * - Carga → clase `sui-img-loaded` y quita `data-sui-img-dead`.
+ * - Se agotan los reintentos → atributo `data-sui-img-dead`.
+ * - Cambia el `src` → el contador arranca de cero para la URL nueva.
+ */
+function suiImgRetry(img) {
+    let retries = 0;
+    let lastFailedSrc = '';
+    let timer = null;
+    const onLoad = () => {
+        retries = 0;
+        img.classList.add('sui-img-loaded');
+        img.removeAttribute('data-sui-img-dead');
+    };
+    const retry = async (src) => {
+        if (img.src !== src)
+            return; // el consumer ya cambió el src — no pisar
+        /* Cache envenenado: un corte a mitad de descarga puede dejar el cuerpo
+           truncado en el disk cache bajo el header immutable. `cache: 'reload'`
+           re-descarga y reemplaza esa entrada. Best effort: si falla, el retry
+           normal corre igual. Requiere CORS GET en el bucket. */
+        if (retries >= 2 && typeof fetch === 'function') {
+            try {
+                await fetch(src, { mode: 'cors', cache: 'reload' });
+            }
+            catch (_a) {
+                /* offline */
+            }
+            if (img.src !== src)
+                return;
+        }
+        /* Re-asignar el MISMO src es no-op en algunos engines: limpiar primero. */
+        img.removeAttribute('src');
+        img.src = src;
+    };
+    const onError = () => {
+        const src = img.src;
+        if (!src)
+            return;
+        if (src !== lastFailedSrc) {
+            retries = 0;
+            lastFailedSrc = src;
+        }
+        img.classList.remove('sui-img-loaded');
+        if (retries >= DELAYS_MS.length) {
+            img.setAttribute('data-sui-img-dead', '');
+            return;
+        }
+        const delay = DELAYS_MS[retries++];
+        if (timer)
+            clearTimeout(timer);
+        timer = setTimeout(() => void retry(src), delay);
+    };
+    const onOnline = () => {
+        if (img.src && (!img.complete || img.naturalWidth === 0)) {
+            retries = 0;
+            void retry(img.src);
+        }
+    };
+    img.addEventListener('error', onError);
+    img.addEventListener('load', onLoad);
+    window.addEventListener('online', onOnline);
+    /* El custom element puede definirse DESPUÉS de que el <img> terminó: se
+       recupera el resultado que ya pasó. */
+    if (img.complete && img.src) {
+        if (img.naturalWidth > 0)
+            onLoad();
+        else
+            onError();
+    }
+    return () => {
+        img.removeEventListener('error', onError);
+        img.removeEventListener('load', onLoad);
+        window.removeEventListener('online', onOnline);
+        if (timer)
+            clearTimeout(timer);
+    };
+}
+
+exports.suiImgRetry = suiImgRetry;

package/dist/cjs/sui-inline-input.cjs.entry.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiToque = require('./sui-toque-TviBCJ0g.js');
+
+const suiInlineInputCss = () => `@charset "UTF-8";.sc-sui-inline-input-h{position:relative;display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;overflow:hidden;padding:8px 36px 8px 10px;border:1px solid transparent;border-radius:var(--sui-radius-8, 8px);background:transparent;font-family:var(--sui-font-sans, sans-serif);font-size:14px;font-weight:400;line-height:20px;letter-spacing:-0.006em;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;color:var(--sui-text-soft-400, #a3a3a3);transition:background 100ms ease-out, border-color 100ms ease-out, box-shadow 100ms ease-out, color 100ms ease-out}.sc-sui-inline-input-h:hover:not([data-sui-editing]):not([data-sui-disabled]){background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sc-sui-inline-input-h:not([data-sui-empty]):not([data-sui-editing]):not([data-sui-disabled]){color:var(--sui-text-strong-950, #171717)}[data-sui-editing].sc-sui-inline-input-h{padding-right:64px;background:var(--sui-bg-white-0, #fff);border-color:var(--sui-stroke-strong-950, #171717);color:var(--sui-text-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-editing][data-sui-error].sc-sui-inline-input-h{border-color:var(--sui-state-error-base, #fb3748);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549))}[data-sui-disabled].sc-sui-inline-input-h{color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;background:transparent}.sui-inline-input__leading.sc-sui-inline-input{flex-shrink:0;color:var(--sui-icon-soft-400, #a3a3a3)}.sc-sui-inline-input-h:hover:not([data-sui-editing]):not([data-sui-disabled]) .sui-inline-input__leading.sc-sui-inline-input{color:var(--sui-icon-sub-600, #5c5c5c)}[data-sui-editing].sc-sui-inline-input-h .sui-inline-input__leading.sc-sui-inline-input{color:var(--sui-icon-strong-950, #171717)}[data-sui-disabled].sc-sui-inline-input-h .sui-inline-input__leading.sc-sui-inline-input{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-inline-input__text.sc-sui-inline-input{flex:1 1 0;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;font:inherit;letter-spacing:inherit}.sui-inline-input__field.sc-sui-inline-input{flex:1 1 0;min-width:0;margin:0;padding:0;border:none;outline:none;background:transparent;color:var(--sui-text-strong-950, #171717);font-family:inherit;font-size:16px;font-weight:400;line-height:20px;letter-spacing:inherit;font-feature-settings:inherit}@media (min-width: 768px){.sui-inline-input__field.sc-sui-inline-input{font-size:14px}}.sui-inline-input__field.sc-sui-inline-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-inline-input__action.sc-sui-inline-input{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;padding:2px;margin:0;border:none;border-radius:var(--sui-radius-6, 6px);background:transparent;cursor:pointer;color:var(--sui-icon-sub-600, #5c5c5c);-webkit-appearance:none;appearance:none;transition:background 100ms ease-out, color 100ms ease-out}.sui-inline-input__action.sc-sui-inline-input:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-icon-strong-950, #171717)}.sui-inline-input__action.sc-sui-inline-input:active{background:var(--sui-bg-surface-800, #262626);color:var(--sui-icon-white-0, #fff)}.sui-inline-input__action.sc-sui-inline-input:disabled{color:var(--sui-icon-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;background:transparent}.sui-inline-input__action--edit.sc-sui-inline-input{right:6px}.sui-inline-input__action--confirm.sc-sui-inline-input{right:5px}.sui-inline-input__action--cancel.sc-sui-inline-input{right:33px}`;
+
+const SuiInlineInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.confirm = index.createEvent(this, "confirm");
+        this.cancel = index.createEvent(this, "cancel");
+        this.edit = index.createEvent(this, "edit");
+        this.valueChange = index.createEvent(this, "valueChange");
+        /** Valor del input. Mutable (two-way via `valueChange`). Default `''`. */
+        this.value = '';
+        /** Placeholder mostrado cuando `value` esta vacio. */
+        this.placeholder = null;
+        /**
+         * Leading icon (RemixIcon name). `false` lo oculta. Default `user-3-line`
+         * (espeja el simbolo Figma). En HTML el atributo es `left-icon`.
+         */
+        this.leftIcon = 'user-3-line';
+        /** Estado de error: borde rojo en modo edicion. Default `false`. */
+        this.error = false;
+        /** Deshabilita la interaccion. Default `false`. */
+        this.disabled = false;
+        /** Texto del boton "editar" para a11y (aria-label). Default `Editar`. */
+        this.editLabel = null;
+        /** Modo edicion activo (Focus / Error state de Figma). */
+        this.editing = false;
+        /** Snapshot del valor al entrar en edicion — para restaurar en cancel. */
+        this._draft = '';
+        /** Flag: enfocar + seleccionar el input en el proximo render tras entrar a edicion. */
+        this._focusOnRender = false;
+        /** Sincroniza el value con el input nativo durante el typing. */
+        this.onInput = (event) => {
+            const v = event.target.value;
+            this.value = v;
+            this.valueChange.emit(v);
+        };
+        /** Enter confirma, Escape cancela (en el input nativo). */
+        this.onKeydown = (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                this.confirmEdit(event);
+            }
+            else if (event.key === 'Escape') {
+                event.preventDefault();
+                this.cancelEdit(event);
+            }
+        };
+    }
+    /* 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');
+    }
+    /** Si se deshabilita estando en edicion, salir del modo edicion. */
+    onDisabledChange(isDisabled) {
+        if (isDisabled && this.editing) {
+            this.editing = false;
+        }
+    }
+    /** Placeholder efectivo: el prop o «Escribe aquí…». */
+    get placeholderTexto() {
+        var _a;
+        return (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Escribe aquí…';
+    }
+    /* iOS `:active` de los botones: listeners PASIVOS en el host (utils/sui-toque.ts).
+       Solo los botones: un blur del campo cerraría el teclado. */
+    alTocar() { }
+    alSoltar(event) {
+        suiToque.soltarToque(event, '.sui-inline-input__action');
+    }
+    /** Texto a mostrar en reposo (value o placeholder). */
+    get displayText() {
+        return this.value || this.placeholderTexto;
+    }
+    /** Icono del leading slot (null si leftIcon === false / "false" / ""). */
+    get leadingIcon() {
+        const v = this.leftIcon;
+        if (!v || v === 'false')
+            return null;
+        return v;
+    }
+    /** Entra en modo edicion (boton lapiz / API publica). */
+    async enterEdit() {
+        this.doEnterEdit();
+    }
+    doEnterEdit(event) {
+        if (this.disabled || this.editing)
+            return;
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        this._draft = this.value;
+        this.editing = true;
+        this.edit.emit();
+        /* Foco + select al input nativo tras el render del template. */
+        this._focusOnRender = true;
+    }
+    /** Confirma la edicion (check / Enter). */
+    confirmEdit(event) {
+        if (this.disabled)
+            return;
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        this.editing = false;
+        this.valueChange.emit(this.value);
+        this.confirm.emit(this.value);
+    }
+    /** Cancela la edicion (close / Escape) — restaura el draft. */
+    cancelEdit(event) {
+        if (this.disabled)
+            return;
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        this.value = this._draft;
+        this.valueChange.emit(this._draft);
+        this.editing = false;
+        this.cancel.emit();
+    }
+    componentDidRender() {
+        var _a, _b;
+        if (this._focusOnRender && this._field) {
+            this._focusOnRender = false;
+            this._field.focus();
+            (_b = (_a = this._field).select) === null || _b === void 0 ? void 0 : _b.call(_a); // mock-doc (spec) no implementa select()
+        }
+    }
+    render() {
+        var _a;
+        const icon = this.leadingIcon;
+        return (index.h(index.Host, { key: 'aa4e3acee5d951f81b2551439aa3223aeb489c94', "data-sui-editing": this.editing ? '' : undefined, "data-sui-error": this.error && this.editing ? '' : undefined, "data-sui-disabled": this.disabled ? '' : undefined, "data-sui-empty": this.value ? undefined : '', "aria-disabled": this.disabled ? 'true' : undefined }, icon && (index.h("sui-icon", { key: '2ec2e85ffabb8b5a2a14609a184d21df823ac7bf', class: "sui-inline-input__leading", name: icon, size: 20 })), this.editing
+            ? [
+                // -- Edit mode (Focus / Error state) --
+                index.h("input", { ref: (el) => (this._field = el), class: "sui-inline-input__field", type: "text", value: this.value, placeholder: this.placeholderTexto, disabled: this.disabled, onInput: this.onInput, onKeyDown: this.onKeydown }),
+                index.h("button", { type: "button", class: "sui-inline-input__action sui-inline-input__action--cancel", "aria-label": "Cancelar", disabled: this.disabled, onClick: (e) => this.cancelEdit(e) }, index.h("sui-icon", { name: "close-line", size: 20 })),
+                index.h("button", { type: "button", class: "sui-inline-input__action sui-inline-input__action--confirm", "aria-label": "Confirmar", disabled: this.disabled, onClick: (e) => this.confirmEdit(e) }, index.h("sui-icon", { name: "check-line", size: 20 })),
+            ]
+            : [
+                // -- Resting mode (Default / Hover / Filled / Disabled state) --
+                index.h("p", { class: "sui-inline-input__text" }, this.displayText),
+                index.h("button", { type: "button", class: "sui-inline-input__action sui-inline-input__action--edit", "aria-label": (_a = this.editLabel) !== null && _a !== void 0 ? _a : 'Editar', disabled: this.disabled, onClick: (e) => this.doEnterEdit(e) }, index.h("sui-icon", { name: "pencil-line", size: 20 })),
+            ]));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
+};
+SuiInlineInput.style = suiInlineInputCss();
+
+exports.sui_inline_input = SuiInlineInput;