@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-href/sui-href.js

@@ -0,0 +1,51 @@
+/**
+ * SUI Href — SUI Design System 2.0 (port de la directiva Angular `a[suiHref]`).
+ *
+ * En Stencil no hay directivas ni Router, así que el contrato vive en una
+ * función que cada componente del DS llama desde el `onClick` de su `<a>`:
+ *
+ *   <a href={this.href} target={this.target} onClick={(ev) => suiHrefClick(ev, this.href)}>
+ *
+ * Diferencia con Angular: en vez de `router.navigateByUrl(href)` se despacha el
+ * evento cancelable `suiNavigate` (bubbles + composed, `detail: { href }`). El
+ * router de la app lo escucha y llama `preventDefault()`; recién ahí se cancela
+ * el click y no hay recarga. Si nadie lo escucha, el link se comporta como un
+ * `<a href>` común (= el passthrough "sin Router" del Angular).
+ *
+ *   document.addEventListener('suiNavigate', (e) => {
+ *     e.preventDefault();
+ *     router.navigateByUrl(e.detail.href);
+ *   });
+ *
+ * Mismas guardas que el Angular: solo URLs internas (`/x`, no `//host`), sin
+ * `target` distinto de `_self`, click primario sin cmd/ctrl/shift/alt, y evento
+ * no prevenido antes.
+ */
+/** Nombre del evento que pide la navegación SPA. */
+export const SUI_NAVIGATE_EVENT = 'suiNavigate';
+/**
+ * Intercepta el click de un `<a>` del DS. Devuelve `true` si la navegación la
+ * tomó el router de la app (click cancelado), `false` si sigue el default del
+ * navegador.
+ */
+export function suiHrefClick(ev, href) {
+    if (!href || !href.startsWith('/') || href.startsWith('//'))
+        return false;
+    const a = ev.currentTarget;
+    const target = a === null || a === void 0 ? void 0 : a.getAttribute('target');
+    if (target && target !== '_self')
+        return false;
+    if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
+        return false;
+    const nav = new CustomEvent(SUI_NAVIGATE_EVENT, {
+        detail: { href },
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+    });
+    (a !== null && a !== void 0 ? a : document).dispatchEvent(nav);
+    if (!nav.defaultPrevented)
+        return false;
+    ev.preventDefault();
+    return true;
+}

package/dist/collection/components/sui-icon/sui-custom-icons.js

@@ -0,0 +1,29 @@
+export const SUI_CUSTOM_ICONS = {
+    // info-custom-fill (Figma node 125:279): círculo relleno con "i" SERIF tipográfica.
+    // NO es ri-information-fill (i recta). viewBox -4.5 -4.5 24 24 = vector 15u con
+    // padding 18.75% → a size=20 el vector queda ~12.5px centrado (igual que Figma).
+    'info-custom-fill': {
+        viewBox: '-4.5 -4.5 24 24',
+        path: 'M7.5 15C11.6421 15 15 11.6421 15 7.5C15 3.35786 11.6421 0 7.5 0C3.35786 0 0 3.35786 0 7.5C0 11.6421 3.35786 15 7.5 15ZM8.83901 11.3503L8.95878 10.8607C8.89678 10.8898 8.79684 10.9231 8.65979 10.961C8.52236 10.9988 8.39868 11.0181 8.28998 11.0181C8.05844 11.0181 7.89542 10.9802 7.80078 10.9039C7.70683 10.8276 7.65997 10.6841 7.65997 10.4739C7.65997 10.3906 7.6741 10.2665 7.70368 10.104C7.73233 9.94048 7.76529 9.79513 7.80193 9.668L8.24903 8.0851C8.29282 7.93984 8.32285 7.78013 8.33899 7.60582C8.3555 7.4319 8.36319 7.31021 8.36319 7.24115C8.36319 6.90737 8.24619 6.6365 8.01212 6.42754C7.77804 6.21874 7.44472 6.11435 7.01275 6.11435C6.77238 6.11435 6.51826 6.15706 6.24931 6.24241C5.98036 6.32752 5.6992 6.43008 5.40505 6.54984L5.28498 7.03981C5.37263 7.00739 5.47703 6.97251 5.59918 6.9364C5.72078 6.90045 5.84009 6.88186 5.95616 6.88186C6.19315 6.88186 6.35279 6.92227 6.43645 7.00186C6.5201 7.08167 6.56212 7.22364 6.56212 7.4266C6.56212 7.53883 6.54883 7.66351 6.52126 7.79902C6.49406 7.93538 6.46011 8.07957 6.42016 8.23176L5.97114 9.82102C5.9312 9.98803 5.902 10.1374 5.88364 10.2701C5.86544 10.4026 5.85668 10.5327 5.85668 10.6591C5.85668 10.9858 5.97736 11.255 6.21866 11.4675C6.45995 11.6792 6.79827 11.7857 7.23323 11.7857C7.51647 11.7857 7.76506 11.7487 7.97901 11.6742C8.19272 11.6 8.47972 11.4921 8.83901 11.3503ZM8.75935 4.92024C8.96823 4.72658 9.07216 4.49105 9.07216 4.21526C9.07216 3.94009 8.96838 3.70409 8.75935 3.50797C8.55101 3.31239 8.29989 3.21429 8.00628 3.21429C7.71175 3.21429 7.45962 3.31216 7.24929 3.50797C7.03895 3.70409 6.93355 3.94001 6.93355 4.21526C6.93355 4.49105 7.03895 4.7265 7.24929 4.92024C7.46 5.1146 7.71167 5.21186 8.00628 5.21186C8.29996 5.21186 8.55101 5.1146 8.75935 4.92024Z',
+    },
+    // avatar-placeholder (silueta humana): fallback final del sui-avatar. Path EXACTO
+    // del SVG inline previo (NO ri-user-fill, que difiere). viewBox 24×24, currentColor.
+    'avatar-placeholder': {
+        viewBox: '0 0 24 24',
+        path: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-8 2-8 6v1h16v-1c0-4-4-6-8-6Z',
+    },
+    // building-skyline: placeholder Empty del Image Upload Profile type=Company
+    // (Figma 253:6939). Silueta compuesta de 2 torres + ventanas. El asset DS es un
+    // SVG raster de 13 nodos; este path es la aproximación vectorial más fiel sin
+    // inlinear el raster (más cercana que el RemixIcon building-2-fill de una línea).
+    // viewBox 24×24, currentColor. Torre izquierda (más baja) + torre derecha (alta,
+    // grid de ventanas 2col × 4row recortado por las contraformas evenodd).
+    'building-skyline': {
+        viewBox: '0 0 24 24',
+        path: 'M3 9h7v12H3V9Zm1.75 2v2h1.5v-2h-1.5Zm0 4v2h1.5v-2h-1.5Zm2.5-4v2h1.5v-2h-1.5Zm0 4v2h1.5v-2h-1.5ZM11 3h10v18H11V3Zm2 3v2h2V6h-2Zm4 0v2h2V6h-2Zm-4 4v2h2v-2h-2Zm4 0v2h2v-2h-2Zm-4 4v2h2v-2h-2Zm4 0v2h2v-2h-2Zm-4 4v3h2v-3h-2Zm4 0v3h2v-3h-2Z',
+    },
+    'heart-half-fill': {
+        viewBox: '-2.5 -3.126 20 20',
+        path: 'M10.875 0C9.7 0 8.44375 0.557263 7.50625 1.49021C6.56875 0.557263 5.3 0 4.125 0C1.8125 0 0 1.95981 0 4.47063C0 6.68716 1.025 8.76594 3.05 10.6631C4.5 12.0219 6.0875 12.9548 7.1875 13.5935L7.54375 13.75L7.85625 13.5684C8.84375 12.9924 10.5 12.0219 11.95 10.6631C13.975 8.7722 15 6.68716 15 4.47063C15 1.92224 13.225 0 10.875 0ZM11.1 9.74271C9.9 10.8698 8.53125 11.69 7.50625 12.2974C7.54375 10.563 7.53125 5.5288 7.50625 3.23714L8.38125 2.37933C8.65 2.11635 9.6125 1.25228 10.875 1.25228C12.5125 1.25228 13.75 2.63604 13.75 4.47063C13.75 6.30521 12.8562 8.09597 11.1 9.74271Z',
+    },
+};

package/dist/collection/components/sui-icon/sui-icon.css

@@ -0,0 +1,22 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* line-height: 1 evita que el host herede el line-height del padre
+     (ej. paragraph-sm = 20px en sui-input). Sin esto, un sui-icon size=16
+     dentro de un container con line-height 20 ocupa 20px verticales
+     aunque el icon mida 16, empujando la altura del flex container y
+     causando layout shift al emerger (ej. clear button del input al
+     escribir). El <i> interno ya define su line-height = font-size. */
+  line-height: 1;
+}
+
+i {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+svg {
+  display: block;
+}

package/dist/collection/components/sui-icon/sui-icon.js

@@ -0,0 +1,136 @@
+import { h } from "@stencil/core";
+import { SUI_CUSTOM_ICONS } from "./sui-custom-icons";
+/**
+ * `<sui-icon>` — wrapper de iconos del SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-icon/). Misma API
+ * pública, mismo comportamiento, mismos valores (tokens, no hex).
+ *
+ * Dos modos de render:
+ *  1. Si `name` matchea una key de SUI_CUSTOM_ICONS → SVG inline (forma propia
+ *     del DS que NO existe en RemixIcon: info-custom-fill, avatar-placeholder,
+ *     building-skyline).
+ *  2. Cualquier otro `name` → `<i class="ri-${name}">` del font RemixIcon
+ *     (ej. 'home-line', 'search-line', 'shopping-bag-fill').
+ *
+ * `scoped: true` (light DOM, NO shadow): así hereda el `@font-face` + las
+ * 3245 clases `.ri-*` del global `sui-tokens.css` sin re-incluir los 157KB
+ * por instancia. Igual estrategia que el Angular original (sin shadow DOM).
+ *
+ * Color: por defecto hereda `currentColor` del contexto (text/icon token del
+ * padre). Pasar `color` con cualquier valor CSS — preferir tokens del DS,
+ * ej. `var(--sui-icon-sub-600)`, `var(--sui-primary-base)`,
+ * `var(--sui-state-error-base)`, NO hex sueltos.
+ */
+export class SuiIcon {
+    constructor() {
+        /** Tamaño en px (number) o cualquier valor CSS (string). Default: 20. */
+        this.size = 20;
+        /** Valor CSS de color. Default: '' → hereda (currentColor). Preferir tokens `--sui-icon-*`. */
+        this.color = '';
+    }
+    /** SVG custom del DS si `name` está registrado; null → cae a RemixIcon font. */
+    get customIcon() {
+        var _a;
+        return (_a = SUI_CUSTOM_ICONS[this.name]) !== null && _a !== void 0 ? _a : null;
+    }
+    /** Clase del font RemixIcon. */
+    get iconClass() {
+        return `ri-${this.name}`;
+    }
+    /** Normaliza size: number → 'Npx', string → tal cual. */
+    get sizeValue() {
+        return typeof this.size === 'number' ? `${this.size}px` : this.size;
+    }
+    render() {
+        const ci = this.customIcon;
+        if (ci) {
+            return (h("svg", { viewBox: ci.viewBox, style: {
+                    width: this.sizeValue,
+                    height: this.sizeValue,
+                    color: this.color || undefined,
+                }, fill: "none", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: ci.path, fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" })));
+        }
+        return (h("i", { class: this.iconClass, style: {
+                fontSize: this.sizeValue,
+                color: this.color || undefined,
+                lineHeight: this.sizeValue,
+            }, "aria-hidden": "true" }));
+    }
+    static get is() { return "sui-icon"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre RemixIcon sin prefijo, ej. 'home-line', 'search-line', 'shopping-bag-fill'. Requerido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o en px (number) o cualquier valor CSS (string). Default: 20."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "20"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor CSS de color. Default: '' \u2192 hereda (currentColor). Preferir tokens `--sui-icon-*`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/sui-image-upload/sui-image-upload.css

@@ -0,0 +1,363 @@
+@charset "UTF-8";
+/* ═══════════════════════════════════════════════════════════════════════
+ *  SUI Image Upload — SUI Design System 2.0
+ *  Upload + preview de UNA imagen. Shapes: circle | rect.
+ *  Estados: empty / filled / dragover / disabled.
+ *  1:1 con el SUI Angular (05-11-2026).
+ * ═════════════════════════════════════════════════════════════════════ */
+:host {
+  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;
+}
+
+/* ── Modo fluido ──────────────────────────────────────────────────────
+ * El ancho lo manda el contenedor y el alto lo da el contenido, con un tope
+ * para que una captura muy larga no empuje el resto del formulario fuera de
+ * la vista. `block` en vez de `inline-flex`: un inline-flex se encoge al
+ * contenido y por eso el preview quedaba angosto en un contenedor ancho. */
+:host([data-sui-fluid]) {
+  display: block;
+  width: 100%;
+}
+:host([data-sui-fluid]) .sui-image-upload__empty {
+  height: auto;
+  min-height: 132px;
+  padding: 20px 16px;
+}
+:host([data-sui-fluid]) .sui-image-upload__preview {
+  height: auto;
+  max-height: 320px;
+}
+:host([data-sui-fluid]) .sui-image-upload__img {
+  /* `contain` y no `cover`: un comprobante recortado no sirve de comprobante. */
+  height: auto;
+  max-height: 320px;
+  object-fit: contain;
+  background: var(--sui-bg-weak-50, #f7f7f7);
+}
+:host([data-sui-fluid]) {
+  /* El botón queda debajo, dentro del flujo. Con el alto fijo del modo normal
+     se salía de la caja y se montaba sobre lo que viniera después. */
+}
+:host([data-sui-fluid]) .sui-image-upload__remove {
+  margin-top: 8px;
+}
+
+:host([data-sui-disabled]) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* ── Empty dropzone ──────────────────────────────────────────────────── */
+.sui-image-upload__empty {
+  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));
+  /* Shape variants */
+}
+:host([data-sui-shape=circle]) .sui-image-upload__empty {
+  border-radius: 999px;
+}
+:host([data-sui-shape=rect]) .sui-image-upload__empty {
+  border-radius: var(--sui-radius-12, 12px);
+}
+.sui-image-upload__empty {
+  /* Hover */
+}
+:host(:hover:not([data-sui-disabled])) .sui-image-upload__empty {
+  border-color: var(--sui-stroke-sub-300, #d1d1d1);
+  background: var(--sui-bg-weak-50, #f7f7f7);
+}
+.sui-image-upload__empty {
+  /* Dragover */
+}
+:host([data-sui-state=dragover]) .sui-image-upload__empty {
+  border-color: var(--sui-primary-base, #fa7319);
+  background: var(--sui-primary-alpha-10, rgba(250, 115, 25, 0.1019607843));
+}
+
+/* ── Icon ─────────────────────────────────────────────────────────────── */
+.sui-image-upload__icon {
+  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;
+}
+:host([data-sui-size=xl]) .sui-image-upload__icon {
+  width: 40px;
+  height: 40px;
+}
+:host([data-sui-state=dragover]) .sui-image-upload__icon {
+  background: var(--sui-primary-alpha-16, rgba(250, 115, 25, 0.1607843137));
+  color: var(--sui-primary-base, #fa7319);
+}
+
+/* ── Text ─────────────────────────────────────────────────────────────── */
+.sui-image-upload__text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: center;
+}
+
+.sui-image-upload__title {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--sui-text-strong-950, #171717);
+}
+:host([data-sui-size=xl]) .sui-image-upload__title {
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sui-image-upload__subtitle {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 15px;
+  color: var(--sui-text-sub-600, #5c5c5c);
+}
+:host([data-sui-size=sm]) .sui-image-upload__subtitle {
+  display: none;
+}
+:host([data-sui-size=xl]) .sui-image-upload__subtitle {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.sui-image-upload__error {
+  margin: 2px 0 0;
+  font-size: 10px;
+  line-height: 14px;
+  color: var(--sui-state-error-base, #fb3748);
+  text-align: center;
+}
+
+/* ── Preview (filled state) ──────────────────────────────────────────── */
+.sui-image-upload__preview {
+  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;
+}
+:host([data-sui-shape=circle]) .sui-image-upload__preview {
+  border-radius: 999px;
+}
+:host([data-sui-shape=rect]) .sui-image-upload__preview {
+  border-radius: var(--sui-radius-12, 12px);
+}
+
+.sui-image-upload__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* ── Overlay hover (pencil icon) ─────────────────────────────────────── */
+.sui-image-upload__overlay {
+  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;
+  /* Reset de <button> (desde 04-10-2026 el overlay es un botón real). */
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-height: 0;
+  border-radius: inherit;
+  font: inherit;
+  color: inherit;
+  -webkit-tap-highlight-color: transparent;
+}
+:host(:hover:not([data-sui-disabled])) .sui-image-upload__overlay {
+  opacity: 1;
+}
+.sui-image-upload__overlay:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--sui-stroke-strong-950, #171717);
+  outline-offset: 2px;
+}
+.sui-image-upload__overlay:disabled {
+  cursor: not-allowed;
+}
+
+.sui-image-upload__overlay-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* sui-icon hereda currentColor → blanco sobre el overlay oscuro. */
+  color: var(--sui-static-white, #fff);
+}
+
+/* ── Controles modo editable (ícono editar + tacho, esquina sup. der.) ──── */
+.sui-image-upload__preview--editable {
+  cursor: default;
+}
+
+.sui-image-upload__controls {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 6px;
+  z-index: 2;
+}
+
+/* Círculo (fix 03-10-2026): en la esquina superior derecha el borde del círculo
+   recortaba el tacho. Van centrados abajo, a un 20 % del borde: ahí la cuerda
+   del círculo mide más que los dos botones (40 + 6 + 40 = 86) desde md (120). */
+:host([data-sui-shape=circle]) .sui-image-upload__controls {
+  top: auto;
+  right: auto;
+  left: 50%;
+  bottom: 20%;
+  transform: translateX(-50%);
+}
+
+/* Lápiz y tacho de 40 (extensión SUI, 03-10-2026): en mobile se tocan con el
+   dedo; antes medían 34. En sm (80 de lado) no entran dos de 40: quedan en 32. */
+.sui-image-upload__ctrl {
+  width: 40px;
+  height: 40px;
+  /* El global mobile `button { min-height: 44px }` de la app no debe inflarlos. */
+  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:active {
+  transform: scale(0.92);
+}
+.sui-image-upload__ctrl:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.sui-image-upload__ctrl--danger:active {
+  background: var(--sui-state-error-base, #fb3748);
+}
+
+/* Botones chicos en sm (80): dos de 32 con 4 de separación entran en el lado. */
+:host([data-sui-size=sm]) .sui-image-upload__controls {
+  top: 6px;
+  right: 6px;
+  gap: 4px;
+}
+
+:host([data-sui-size=sm]) .sui-image-upload__ctrl {
+  width: 32px;
+  height: 32px;
+}
+
+:host([data-sui-size=sm][data-sui-shape=circle]) .sui-image-upload__controls {
+  top: auto;
+  right: auto;
+  bottom: 22%;
+}
+
+/* ── Remove button ───────────────────────────────────────────────────────
+ *  <sui-button variant="stroke" color="error" size="xsmall"> (32; era 2xsmall
+ *  de 28 hasta el 03-10-2026) — toda
+ *  la apariencia (border/radius/padding/hover/focus/disabled) vive en el propio
+ *  sui-button. Aquí sólo lo mantenemos como item flex sin estirarse. */
+.sui-image-upload__remove {
+  flex-shrink: 0;
+}
+
+/* ── Área táctil de 44 en el teléfono — 04-10-2026 ──────────────────────
+ * Dueño: el piso táctil en el teléfono es 44. Aquí el `size` (sm/md/lg/xl) es
+ * el tamaño de la FOTO, no el de los botones: un size más grande agrandaría la
+ * imagen sin que nadie lo pida. Por eso no se agrega size: en ≤767 px los
+ * botones ganan un ::before invisible que lleva lo que se toca a 44 sin
+ * cambiar cómo se ven.
+ *  - Lápiz y tacho (40; 32 en sm): 44 de alto. A los lados solo crecen la
+ *    mitad del gap (6 → 3; en sm 4 → 2) para que uno no pise al otro.
+ *  - «Quitar» (sui-button xsmall, 32): 44 × (ancho + 12). Arriba crece 4 (la
+ *    mitad del gap de 8 con la foto) y abajo 8, para no tapar la foto. */
+@media (max-width: 767px) {
+  .sui-image-upload__ctrl {
+    position: relative;
+  }
+  .sui-image-upload__ctrl::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    height: 44px;
+    left: -3px;
+    right: -3px;
+    transform: translateY(-50%);
+  }
+  :host([data-sui-size=sm]) .sui-image-upload__ctrl::before {
+    left: -2px;
+    right: -2px;
+  }
+  .sui-image-upload__remove {
+    position: relative;
+  }
+  .sui-image-upload__remove::before {
+    content: "";
+    position: absolute;
+    top: -4px;
+    bottom: -8px;
+    left: -6px;
+    right: -6px;
+  }
+}
+/* ── Hidden native input ─────────────────────────────────────────────── */
+.sui-image-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/collection/components/sui-image-upload/sui-image-upload.data.js

@@ -0,0 +1,33 @@
+/**
+ * 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). */
+export 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.
+ */
+export 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). */
+export 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. */
+export 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/'));
+}