@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,214 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiAvatarCss = () => `@charset "UTF-8";.sc-sui-avatar-h{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:999px;overflow:visible;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));font-weight:500;user-select:none;vertical-align:middle}[data-sui-size=xs].sc-sui-avatar-h{width:20px;height:20px;font-size:12px;line-height:16px;letter-spacing:0}[data-sui-size=sm].sc-sui-avatar-h{width:24px;height:24px;font-size:12px;line-height:16px;letter-spacing:0}[data-sui-size=md].sc-sui-avatar-h{width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:-0.006em}[data-sui-size=lg].sc-sui-avatar-h{width:40px;height:40px;font-size:16px;line-height:24px;letter-spacing:-0.011em}[data-sui-size=xl].sc-sui-avatar-h{width:48px;height:48px;font-size:18px;line-height:24px;letter-spacing:-0.015em}[data-sui-size="2xl"].sc-sui-avatar-h{width:56px;height:56px;font-size:18px;line-height:24px;letter-spacing:-0.015em}[data-sui-size="3xl"].sc-sui-avatar-h{width:64px;height:64px;font-size:24px;line-height:32px;letter-spacing:0}[data-sui-size="4xl"].sc-sui-avatar-h{width:72px;height:72px;font-size:24px;line-height:32px;letter-spacing:0}[data-sui-size="5xl"].sc-sui-avatar-h{width:80px;height:80px;font-size:24px;line-height:32px;letter-spacing:0}.sui-avatar__image.sc-sui-avatar{width:100%;height:100%;border-radius:999px;object-fit:cover;display:block}.sui-avatar__initial.sc-sui-avatar{text-align:center;word-break:break-word;white-space:nowrap}.sui-avatar__icon.sc-sui-avatar{display:inline-flex;color:var(--sui-icon-soft-400, #a3a3a3)}.sui-avatar__placeholder.sc-sui-avatar{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit;overflow:hidden}.sui-avatar__ph-head.sc-sui-avatar{fill:var(--sui-static-white, #fff);opacity:0.9}.sui-avatar__ph-body.sc-sui-avatar{fill:var(--sui-static-white, #fff);opacity:0.72}[data-sui-fallback].sc-sui-avatar-h{background:var(--sui-neutral-50, #f7f7f7);color:var(--sui-neutral-600, #5c5c5c)}[data-sui-placeholder][data-sui-color=slate].sc-sui-avatar-h{background:var(--sui-neutral-200, #ebebeb)}[data-sui-fallback][data-sui-color=slate].sc-sui-avatar-h{background:var(--sui-neutral-50, #f7f7f7);color:var(--sui-neutral-600, #5c5c5c)}[data-sui-fallback][data-sui-color=gray].sc-sui-avatar-h{background:var(--sui-neutral-200, #ebebeb)}[data-sui-fallback][data-sui-color=blue].sc-sui-avatar-h{background:var(--sui-blue-200, #c0d5ff)}[data-sui-fallback][data-sui-color=orange].sc-sui-avatar-h{background:var(--sui-orange-200, #ffd9c0)}[data-sui-fallback][data-sui-color=red].sc-sui-avatar-h{background:var(--sui-red-200, #ffc0c5)}[data-sui-fallback][data-sui-color=green].sc-sui-avatar-h{background:var(--sui-green-200, #c2f5da)}[data-sui-fallback][data-sui-color=yellow].sc-sui-avatar-h{background:var(--sui-yellow-200, #ffecc0)}[data-sui-fallback][data-sui-color=purple].sc-sui-avatar-h{background:var(--sui-purple-200, #cac0ff)}[data-sui-fallback][data-sui-color=sky].sc-sui-avatar-h{background:var(--sui-sky-200, #c0eaff)}[data-sui-fallback][data-sui-color=pink].sc-sui-avatar-h{background:var(--sui-pink-200, #ffc0df)}[data-sui-fallback][data-sui-color=teal].sc-sui-avatar-h{background:var(--sui-teal-200, #c2f5ee)}[data-sui-fallback].sc-sui-avatar-h:not([data-sui-color=slate]){color:var(--sui-static-black, #171717)}.sc-sui-avatar-h{--sui-avatar-ring:2px}[data-sui-size=xs].sc-sui-avatar-h{--sui-avatar-ring:1px}[data-sui-size=sm].sc-sui-avatar-h{--sui-avatar-ring:1.5px}[data-sui-size=md].sc-sui-avatar-h{--sui-avatar-ring:2px}[data-sui-size=lg].sc-sui-avatar-h{--sui-avatar-ring:2px}[data-sui-size=xl].sc-sui-avatar-h{--sui-avatar-ring:2px}[data-sui-size="2xl"].sc-sui-avatar-h{--sui-avatar-ring:2.5px}[data-sui-size="3xl"].sc-sui-avatar-h{--sui-avatar-ring:3px}[data-sui-size="4xl"].sc-sui-avatar-h{--sui-avatar-ring:3px}[data-sui-size="5xl"].sc-sui-avatar-h{--sui-avatar-ring:3.5px}.sui-avatar__status.sc-sui-avatar{position:absolute;bottom:0;right:0;width:25%;height:25%;border-radius:999px;border:var(--sui-avatar-ring) solid var(--sui-bg-white-0, #fff);box-sizing:border-box;background:var(--sui-state-faded-base, #7b7b7b);box-shadow:0 2px 4px 0 rgba(27, 28, 29, 0.0392156863)}[data-sui-status=online].sc-sui-avatar-h .sui-avatar__status.sc-sui-avatar{background:var(--sui-state-success-base, #1fc16b)}[data-sui-status=offline].sc-sui-avatar-h .sui-avatar__status.sc-sui-avatar{background:var(--sui-state-faded-base, #7b7b7b)}[data-sui-status=away].sc-sui-avatar-h .sui-avatar__status.sc-sui-avatar{background:var(--sui-state-away-base, #f6b51e)}[data-sui-status=busy].sc-sui-avatar-h .sui-avatar__status.sc-sui-avatar{background:var(--sui-state-error-base, #fb3748)}.sui-avatar__company.sc-sui-avatar{position:absolute;bottom:0;right:0;width:40%;height:40%;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:var(--sui-avatar-ring) solid var(--sui-bg-white-0, #fff);box-sizing:border-box;background:var(--sui-purple-500, #7d52f4);overflow:hidden;box-shadow:0 2px 4px 0 rgba(27, 28, 29, 0.0392156863)}.sui-avatar__company-img.sc-sui-avatar{width:100%;height:100%;object-fit:cover}.sui-avatar__top-badge.sc-sui-avatar{position:absolute;top:0;right:-10%;width:40%;height:40%;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:var(--sui-avatar-ring) solid var(--sui-bg-white-0, #fff);box-sizing:border-box;color:var(--sui-bg-white-0, #fff);box-shadow:0 2px 4px 0 rgba(27, 28, 29, 0.0392156863)}.sui-avatar__top-badge-glyph.sc-sui-avatar{display:block;width:58%;height:58%;color:var(--sui-bg-white-0, #fff)}.sui-avatar__top-badge--seal.sc-sui-avatar{border:none;background:none !important;box-shadow:none}.sui-avatar__seal.sc-sui-avatar{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 4px rgba(27, 28, 29, 0.0392156863))}.sui-avatar__seal-stroke.sc-sui-avatar{fill:var(--sui-bg-white-0, #fff)}.sui-avatar__seal-bg.sc-sui-avatar{fill:var(--sui-state-verified-base, #47c2ff)}.sui-avatar__seal-check.sc-sui-avatar{fill:var(--sui-bg-white-0, #fff)}[data-sui-top-badge=verified].sc-sui-avatar-h .sui-avatar__top-badge.sc-sui-avatar{background:var(--sui-state-verified-base, #47c2ff)}[data-sui-top-badge=pin].sc-sui-avatar-h .sui-avatar__top-badge.sc-sui-avatar{background:var(--sui-state-feature-base, #7d52f4)}[data-sui-top-badge=favorite].sc-sui-avatar-h .sui-avatar__top-badge.sc-sui-avatar{background:var(--sui-state-success-base, #1fc16b)}[data-sui-top-badge=add].sc-sui-avatar-h .sui-avatar__top-badge.sc-sui-avatar{background:var(--sui-state-faded-base, #7b7b7b)}[data-sui-top-badge=remove].sc-sui-avatar-h .sui-avatar__top-badge.sc-sui-avatar{background:var(--sui-state-error-base, #fb3748)}[data-sui-top-badge=notification].sc-sui-avatar-h .sui-avatar__top-badge.sc-sui-avatar{background:var(--sui-state-error-base, #fb3748)}[data-sui-top-badge=notification].sc-sui-avatar-h .sui-avatar__top-badge.sc-sui-avatar{width:25%;height:25%;right:0}`;
+
+const TOP_BADGE_GLYPH = {
+    // `verified` se renderiza como SEAL escalopado (SVG real de Figma, ver
+    // VERIFIED_SEAL abajo), NO como glyph dentro de un círculo. → null aquí para
+    // que el template tome la rama del seal.
+    verified: null,
+    // pushpin-fill (chincheta DIAGONAL, RemixIcon) — Figma node 245:18702 usa la
+    // versión inclinada (cabeza arriba-derecha, aguja abajo-izquierda), NO la
+    // vertical pushpin-2-fill. Path canónico de remixicon/icons/Map/pushpin-fill.svg.
+    pin: {
+        viewBox: '0 0 24 24',
+        path: 'M22.3126 10.1753L20.8984 11.5895L20.1913 10.8824L15.9486 15.125L15.2415 18.6606L13.8273 20.0748L9.58466 15.8321L4.63492 20.7819L3.2207 19.3677L8.17045 14.4179L3.92781 10.1753L5.34202 8.76107L8.87756 8.05396L13.1202 3.81132L12.4131 3.10422L13.8273 1.69L22.3126 10.1753Z',
+    },
+    // star-fill (estrella, RemixIcon).
+    favorite: {
+        viewBox: '0 0 24 24',
+        path: 'M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z',
+    },
+    // add-line (plus grueso, centrado).
+    add: {
+        viewBox: '0 0 24 24',
+        path: 'M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z',
+    },
+    // close-line (X gruesa, centrada).
+    remove: {
+        viewBox: '0 0 24 24',
+        path: 'M12 10.586l4.95-4.95 1.414 1.414L13.414 12l4.95 4.95-1.414 1.414L12 13.414l-4.95 4.95-1.414-1.414L10.586 12l-4.95-4.95L7.05 5.636z',
+    },
+    notification: null,
+};
+/**
+ * VERIFIED SEAL — assets REALES de Figma (node 245:18698 "Top Status verified").
+ * Reemplaza el clip-path polígono (picos ANGULARES) por los paths con curvas
+ * Bézier (C) reales → ondas REDONDEADAS (skill sui-figma-pixel-perfect, falla #5:
+ * usar assets reales, no aproximar). Son 3 capas que se componen en un SVG con
+ * viewBox unificado `0 0 27.1716 27.1716` (el del stroke, la capa más grande):
+ *
+ *   - stroke: el ring/borde blanco escalopado (viewBox 27.1716, va DETRÁS).
+ *   - bg:     el fondo escalopado azul verified (viewBox 23.1716, centrado dentro
+ *             del stroke → offset (27.1716-23.1716)/2 = 2.0 en x e y).
+ *   - check:  el checkmark blanco (viewBox 10.0809×8.12132, centrado en el conjunto:
+ *             cx 27.1716/2=13.5858 → x = 13.5858-10.0809/2 = 8.54515;
+ *             cy 13.5858 → y = 13.5858-8.12132/2 = 9.52514).
+ *
+ * Cada capa conserva su path EXACTO de Figma y se posiciona con un `transform`
+ * translate (más robusto que re-calcular las coordenadas de cada path a mano).
+ */
+const VERIFIED_SEAL = {
+    /** viewBox del SVG compuesto = el del stroke (la capa más grande). */
+    viewBox: '0 0 27.1716 27.1716',
+    /** Ring/borde blanco escalopado (Figma seal-stroke.svg, viewBox 27.1716). */
+    stroke: 'M17.9289 3.10051L15.7071 0.87868C14.5355 -0.292892 12.636 -0.292895 11.4645 0.878679L9.24264 3.10051H6.10051C4.44365 3.10051 3.10051 4.44365 3.10051 6.1005V9.24264L0.87868 11.4645C-0.292892 12.636 -0.292895 14.5355 0.878679 15.7071L3.10051 17.9289V21.0711C3.10051 22.7279 4.44365 24.0711 6.1005 24.0711H9.24264L11.4645 26.2929C12.636 27.4645 14.5355 27.4645 15.7071 26.2929L17.9289 24.0711H21.0711C22.7279 24.0711 24.0711 22.7279 24.0711 21.0711V17.9289L26.2929 15.7071C27.4645 14.5355 27.4645 12.636 26.2929 11.4645L24.0711 9.24264V6.10051C24.0711 4.44365 22.7279 3.10051 21.0711 3.10051H17.9289ZM16.8076 4.80761C16.9951 4.99515 17.2495 5.1005 17.5147 5.1005H21.0711C21.6234 5.1005 22.0711 5.54822 22.0711 6.10051V9.65685C22.0711 9.92207 22.1764 10.1764 22.364 10.364L24.8787 12.8787C25.2692 13.2692 25.2692 13.9024 24.8787 14.2929L22.364 16.8076C22.1764 16.9951 22.0711 17.2495 22.0711 17.5147V21.0711C22.0711 21.6234 21.6234 22.0711 21.0711 22.0711H17.5147C17.2495 22.0711 16.9951 22.1764 16.8076 22.364L14.2929 24.8787C13.9024 25.2692 13.2692 25.2692 12.8787 24.8787L10.364 22.364C10.1764 22.1764 9.92207 22.0711 9.65685 22.0711H6.1005C5.54822 22.0711 5.10051 21.6234 5.10051 21.0711V17.5147C5.10051 17.2495 4.99515 16.9951 4.80761 16.8076L2.29289 14.2929C1.90237 13.9024 1.90237 13.2692 2.29289 12.8787L4.80761 10.364C4.99515 10.1764 5.10051 9.92207 5.10051 9.65685V6.1005C5.10051 5.54822 5.54822 5.1005 6.10051 5.1005H9.65685C9.92207 5.1005 10.1764 4.99515 10.364 4.80761L12.8787 2.29289C13.2692 1.90237 13.9024 1.90237 14.2929 2.29289L16.8076 4.80761Z',
+    /** Fondo escalopado azul (Figma seal-bg.svg, viewBox 23.1716), offset (2,2). */
+    bg: 'M15.5147 3.10051C15.2495 3.10051 14.9951 2.99515 14.8076 2.80761L12.2929 0.292893C11.9024 -0.0976308 11.2692 -0.0976313 10.8787 0.292893L8.36396 2.80761C8.17642 2.99515 7.92207 3.10051 7.65685 3.10051H4.10051C3.54822 3.10051 3.10051 3.54822 3.10051 4.1005V7.65685C3.10051 7.92207 2.99515 8.17642 2.80761 8.36396L0.292893 10.8787C-0.0976309 11.2692 -0.0976313 11.9024 0.292893 12.2929L2.80761 14.8076C2.99515 14.9951 3.10051 15.2495 3.10051 15.5147V19.0711C3.10051 19.6234 3.54822 20.0711 4.1005 20.0711H7.65685C7.92207 20.0711 8.17642 20.1764 8.36396 20.364L10.8787 22.8787C11.2692 23.2692 11.9024 23.2692 12.2929 22.8787L14.8076 20.364C14.9951 20.1764 15.2495 20.0711 15.5147 20.0711H19.0711C19.6234 20.0711 20.0711 19.6234 20.0711 19.0711V15.5147C20.0711 15.2495 20.1764 14.9951 20.364 14.8076L22.8787 12.2929C23.2692 11.9024 23.2692 11.2692 22.8787 10.8787L20.364 8.36396C20.1764 8.17642 20.0711 7.92207 20.0711 7.65685V4.10051C20.0711 3.54822 19.6234 3.10051 19.0711 3.10051H15.5147Z',
+    /** Checkmark blanco (Figma seal-check.svg, viewBox 10.0809×8.12132), centrado. */
+    check: 'M10.0809 1.41421L3.37377 8.12132L0 4.74755L1.41421 3.33333L3.37377 5.29289L8.66667 0L10.0809 1.41421Z',
+};
+/**
+ * Tamaño del ícono interno del avatar (content-type Icon). Escala con el
+ * diámetro (~50%). Solo aplica cuando se renderea `icon` en fallback.
+ */
+const INNER_ICON_SIZE = {
+    xs: 12,
+    sm: 14,
+    md: 18,
+    lg: 22,
+    xl: 26,
+    '2xl': 30,
+    '3xl': 34,
+    '4xl': 38,
+    '5xl': 42,
+};
+const SuiAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Tamaño. Default `md` (32px). 9 sizes canon SUI. */
+        this.size = 'md';
+        /** URL de la imagen principal. Máxima prioridad en la cascada. */
+        this.src = null;
+        /** Texto alternativo de la imagen. */
+        this.alt = '';
+        /** Iniciales o nombre: 1 letra en xs/sm/md, 2 en lg+ ("Emma Wright" → "EW", "Emma" → "EM"), en mayúscula. */
+        this.initials = '';
+        /** Color del fallback solid-bg (ramp *-200). Default `slate` (neutro). */
+        this.color = 'slate';
+        /** BottomStatus dot/company (online/offline/away/busy/company). Default null. */
+        this.status = null;
+        /**
+         * Content-type Memoji (Figma 👨🏻 Memoji=On): src de un memoji/avatar 3D.
+         * Prioridad sobre `initials`/`icon` pero menor que `src`. Renderiza como
+         * <img> object-fit cover (igual que `src`).
+         */
+        this.memojiSrc = null;
+        /**
+         * Content-type Illustration (Figma 🖌️ Illustration=On): src de una
+         * ilustración custom. Misma cascada que `memojiSrc`.
+         */
+        this.illustrationSrc = null;
+        /**
+         * Content-type Icon (Figma 💠 Icon=On): RemixIcon que reemplaza el placeholder
+         * silhouette por un glifo custom dentro del círculo. Solo en fallback cuando
+         * NO hay src/memoji/illustration/initials. Si vacío, cae al silhouette.
+         */
+        this.icon = null;
+        /** BottomStatus `company`: src del logo de la empresa (mini-avatar adjacente). */
+        this.companyLogoSrc = null;
+        /**
+         * TopStatus badge (top-right corner). 6 tipos canon SUI. Cada tipo tiene
+         * un color por defecto (ver TOP_BADGE_GLYPH). Figma 245:18697.
+         */
+        this.topBadge = null;
+        /**
+         * Override puntual del background-color del fallback (casos donde la entidad
+         * trae su propio color, ej. customers/employees con `color` en firestore). Si
+         * se pasa, `color` se ignora. Acepta cualquier string CSS válido (hex, rgb,
+         * var(--token)). Solo aplica en fallback.
+         */
+        this.bgColor = null;
+        /** True cuando la imagen falla y debe mostrarse el fallback (initials/icon). */
+        this.imageFailed = false;
+        this.onImageError = () => {
+            this.imageFailed = true;
+        };
+        this.onImageLoad = () => {
+            // Reset si re-cargo con un src nuevo válido después de un error previo.
+            if (this.imageFailed)
+                this.imageFailed = false;
+        };
+    }
+    /**
+     * Reset del flag de error cuando cambia cualquier fuente de imagen: un src
+     * nuevo merece un intento fresco de carga. Sin esto, una vez que `imageFailed`
+     * queda true el <img> nunca se vuelve a montar y `onImageLoad` jamás puede
+     * dispararse (el fallback quedaría pegado para siempre).
+     */
+    resetImageFailed() {
+        if (this.imageFailed)
+            this.imageFailed = false;
+    }
+    /**
+     * Iniciales resueltas — el conteo depende del size (canon Figma):
+     *   - xs/sm/md (20/24/32px) → UNA letra
+     *   - lg+      (40px+)      → DOS letras
+     * Nombre con espacio ("Emma Wright") → inicial de cada palabra ("EW"); una sola
+     * palabra ("Emma") → sus 2 primeros chars ("EM"); en sizes de 1 letra, la primera.
+     */
+    get resolvedInitials() {
+        const raw = this.initials.trim();
+        if (!raw)
+            return '';
+        const words = raw.split(/\s+/).filter(Boolean);
+        const two = words.length >= 2 ? (words[0].charAt(0) + words[1].charAt(0)).toUpperCase() : raw.slice(0, 2).toUpperCase();
+        const oneLetter = this.size === 'xs' || this.size === 'sm' || this.size === 'md';
+        return oneLetter ? two.charAt(0) : two;
+    }
+    /**
+     * Src de imagen resuelto en cascada: src → memojiSrc → illustrationSrc.
+     * El primero no-vacío gana. Todos se renderizan como <img> cover.
+     */
+    get resolvedImageSrc() {
+        return this.src || this.memojiSrc || this.illustrationSrc || null;
+    }
+    /** Fallback cuando: no hay imagen resuelta, o cargó con error. */
+    get showFallback() {
+        return !this.resolvedImageSrc || this.imageFailed;
+    }
+    /** Silueta placeholder (último nivel de la cascada): sin imagen, sin iniciales y sin icon. */
+    get showPlaceholder() {
+        return this.showFallback && !this.resolvedInitials && !this.icon;
+    }
+    renderTopBadge() {
+        if (!this.topBadge)
+            return null;
+        const seal = this.topBadge === 'verified';
+        const g = TOP_BADGE_GLYPH[this.topBadge];
+        return (h("span", { class: { 'sui-avatar__top-badge': true, 'sui-avatar__top-badge--seal': seal }, "aria-hidden": "true" }, seal ? (
+        /* SEAL verified = 3 capas reales de Figma (node 245:18698): ring blanco
+           escalopado, fondo azul y check, con curvas Bézier (ondas redondeadas). */
+        h("svg", { class: "sui-avatar__seal", viewBox: VERIFIED_SEAL.viewBox, fill: "none", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg" }, h("path", { class: "sui-avatar__seal-stroke", d: VERIFIED_SEAL.stroke }), h("path", { class: "sui-avatar__seal-bg", d: VERIFIED_SEAL.bg, transform: "translate(2,2)" }), h("path", { class: "sui-avatar__seal-check", d: VERIFIED_SEAL.check, transform: "translate(8.54515,9.52514)", "fill-rule": "evenodd", "clip-rule": "evenodd" }))) : g ? (
+        /* Glyph como SVG inline: escala con el badge (40% del avatar) sin px por size. */
+        h("svg", { class: "sui-avatar__top-badge-glyph", viewBox: g.viewBox, fill: "none", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: g.path, fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }))) : null));
+    }
+    render() {
+        var _a, _b;
+        const imageSrc = this.resolvedImageSrc;
+        const showImage = !!imageSrc && !this.imageFailed;
+        const initials = this.resolvedInitials;
+        /* Sin foto (iniciales, ícono o silueta) el alt no tenía dónde ir y el lector
+           leía la letra suelta: el host pasa a role=img con aria-label=alt. */
+        const labelled = this.showFallback && !!this.alt;
+        return (h(Host, { key: 'bbab900c42f069516fcc834b9f99b4ff6f721f18', "data-sui-size": this.size, "data-sui-color": this.color, "data-sui-status": (_a = this.status) !== null && _a !== void 0 ? _a : null, "data-sui-top-badge": (_b = this.topBadge) !== null && _b !== void 0 ? _b : null, "data-sui-fallback": this.showFallback ? '' : null, "data-sui-placeholder": this.showPlaceholder ? '' : null, role: labelled ? 'img' : null, "aria-label": labelled ? this.alt : null, style: this.showFallback && this.bgColor ? { backgroundColor: this.bgColor } : undefined }, showImage ? (h("img", { class: "sui-avatar__image", src: imageSrc, alt: this.alt, onError: this.onImageError, onLoad: this.onImageLoad })) : initials ? (h("span", { class: "sui-avatar__initial", "aria-hidden": this.alt ? 'true' : null }, initials)) : this.icon ? (h("sui-icon", { class: "sui-avatar__icon", name: this.icon, size: INNER_ICON_SIZE[this.size] })) : (
+        /* Silueta: réplica del SVG de Figma (node 246:7589, viewBox 80×80): cabeza
+           + cuerpo blancos que llenan el avatar y se recortan al círculo. */
+        h("svg", { class: "sui-avatar__placeholder", viewBox: "0 0 80 80", fill: "none", "aria-hidden": "true", preserveAspectRatio: "xMidYMid slice", xmlns: "http://www.w3.org/2000/svg" }, h("ellipse", { class: "sui-avatar__ph-body", cx: "40", cy: "78", rx: "32", ry: "24" }), h("circle", { class: "sui-avatar__ph-head", cx: "40", cy: "32", r: "16" }))), this.status === 'company' ? (h("span", { class: "sui-avatar__company", "aria-hidden": "true" }, this.companyLogoSrc && h("img", { src: this.companyLogoSrc, alt: "", class: "sui-avatar__company-img" }))) : this.status ? (h("span", { class: "sui-avatar__status", "aria-hidden": "true" })) : null, this.renderTopBadge()));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "src": [{
+                "resetImageFailed": 0
+            }],
+        "memojiSrc": [{
+                "resetImageFailed": 0
+            }],
+        "illustrationSrc": [{
+                "resetImageFailed": 0
+            }]
+    }; }
+};
+SuiAvatar.style = suiAvatarCss();
+
+export { SuiAvatar as sui_avatar };

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

@@ -0,0 +1,29 @@
+import { r as registerInstance, h, H as Host } from './index-CHeoPpKZ.js';
+
+const suiBadgeCss = () => `@charset "UTF-8";.sc-sui-badge-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;border-radius:var(--sui-radius-full);font-family:var(--sui-font-sans);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;white-space:nowrap;vertical-align:middle;overflow:clip;font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase}.sui-badge__label.sc-sui-badge{display:inline-flex;align-items:center}.sc-sui-badge-s>[slot=start],.sc-sui-badge-s>[slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-badge__dot.sc-sui-badge{display:block;flex-shrink:0;width:16px;height:16px;background-image:radial-gradient(circle at center, currentColor 0, currentColor 2px, transparent 2.5px)}[data-sui-size=small].sc-sui-badge-h{height:16px}.sc-sui-badge-h[data-sui-size=small].sc-sui-badge-s>[slot=start],.sc-sui-badge-h[data-sui-size=small] .sc-sui-badge-s>[slot=start],.sc-sui-badge-h[data-sui-size=small].sc-sui-badge-s>[slot=end],.sc-sui-badge-h[data-sui-size=small] .sc-sui-badge-s>[slot=end]{width:var(--sui-icon-size-xs);height:var(--sui-icon-size-xs)}[data-sui-size=medium].sc-sui-badge-h{height:20px;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);text-transform:none}.sc-sui-badge-h[data-sui-size=medium].sc-sui-badge-s>[slot=start],.sc-sui-badge-h[data-sui-size=medium] .sc-sui-badge-s>[slot=start],.sc-sui-badge-h[data-sui-size=medium].sc-sui-badge-s>[slot=end],.sc-sui-badge-h[data-sui-size=medium] .sc-sui-badge-s>[slot=end]{width:var(--sui-icon-size-sm);height:var(--sui-icon-size-sm)}[data-sui-size=large].sc-sui-badge-h{height:24px;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);text-transform:none}.sc-sui-badge-h[data-sui-size=large].sc-sui-badge-s>[slot=start],.sc-sui-badge-h[data-sui-size=large] .sc-sui-badge-s>[slot=start],.sc-sui-badge-h[data-sui-size=large].sc-sui-badge-s>[slot=end],.sc-sui-badge-h[data-sui-size=large] .sc-sui-badge-s>[slot=end]{width:var(--sui-icon-size-sm);height:var(--sui-icon-size-sm)}[data-sui-size=xlarge].sc-sui-badge-h{height:28px;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing);text-transform:none}.sc-sui-badge-h[data-sui-size=xlarge].sc-sui-badge-s>[slot=start],.sc-sui-badge-h[data-sui-size=xlarge] .sc-sui-badge-s>[slot=start],.sc-sui-badge-h[data-sui-size=xlarge].sc-sui-badge-s>[slot=end],.sc-sui-badge-h[data-sui-size=xlarge] .sc-sui-badge-s>[slot=end]{width:var(--sui-icon-size-md);height:var(--sui-icon-size-md)}[data-sui-type=basic].sc-sui-badge-h{padding:2px 8px;gap:0}[data-sui-type=left-icon].sc-sui-badge-h{padding:2px 8px 2px 4px;gap:2px}[data-sui-type=right-icon].sc-sui-badge-h{padding:2px 4px 2px 8px;gap:2px}[data-sui-size=medium][data-sui-type=left-icon].sc-sui-badge-h,[data-sui-size=medium][data-sui-type=right-icon].sc-sui-badge-h{gap:4px}[data-sui-size=small][data-sui-type=with-dot].sc-sui-badge-h{padding:0 8px 0 0;gap:0}[data-sui-size=medium][data-sui-type=with-dot].sc-sui-badge-h{padding:2px 8px 2px 2px;gap:0}[data-sui-type=number].sc-sui-badge-h{gap:0;padding:0 4px;justify-content:center}[data-sui-type=number].sc-sui-badge-h .sui-badge__label.sc-sui-badge{display:inline-block;text-align:center}[data-sui-type=number][data-sui-size=small].sc-sui-badge-h{height:16px;min-width:16px}[data-sui-type=number][data-sui-size=medium].sc-sui-badge-h{height:20px;min-width:20px}[data-sui-type=number][data-sui-size=large].sc-sui-badge-h{height:24px;min-width:24px;padding:0 6px}[data-sui-type=number][data-sui-size=xlarge].sc-sui-badge-h{height:28px;min-width:28px;padding:0 8px}[data-sui-size=large][data-sui-type=basic].sc-sui-badge-h{padding:2px 10px}[data-sui-size=xlarge][data-sui-type=basic].sc-sui-badge-h{padding:2px 12px}[data-sui-size=large][data-sui-type=left-icon].sc-sui-badge-h{padding:2px 10px 2px 6px;gap:4px}[data-sui-size=xlarge][data-sui-type=left-icon].sc-sui-badge-h{padding:2px 12px 2px 8px;gap:4px}[data-sui-size=large][data-sui-type=right-icon].sc-sui-badge-h{padding:2px 6px 2px 10px;gap:4px}[data-sui-size=xlarge][data-sui-type=right-icon].sc-sui-badge-h{padding:2px 8px 2px 12px;gap:4px}[data-sui-size=large][data-sui-type=with-dot].sc-sui-badge-h{padding:4px 10px 4px 4px;gap:0}[data-sui-size=xlarge][data-sui-type=with-dot].sc-sui-badge-h{padding:6px 12px 6px 6px;gap:0}[data-sui-color=gray][data-sui-variant=filled].sc-sui-badge-h{background:var(--sui-state-faded-base);border-color:var(--sui-state-faded-base);color:var(--sui-static-white)}[data-sui-color=gray][data-sui-variant=light].sc-sui-badge-h{background:var(--sui-state-faded-light);border-color:transparent;color:var(--sui-state-faded-dark)}[data-sui-color=gray][data-sui-variant=lighter].sc-sui-badge-h{background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}[data-sui-color=gray][data-sui-variant=stroke].sc-sui-badge-h{background:transparent;border-color:var(--sui-state-faded-base);color:var(--sui-state-faded-base)}[data-sui-color=gray][data-sui-variant=dark].sc-sui-badge-h{background:color-mix(in srgb, var(--sui-state-faded-base) 22%, transparent);border-color:color-mix(in srgb, var(--sui-state-faded-base) 45%, transparent);color:var(--sui-static-white)}[data-sui-color=blue][data-sui-variant=filled].sc-sui-badge-h{background:var(--sui-state-information-base);border-color:var(--sui-state-information-base);color:var(--sui-static-white)}[data-sui-color=blue][data-sui-variant=light].sc-sui-badge-h{background:var(--sui-state-information-light);border-color:transparent;color:var(--sui-state-information-dark)}[data-sui-color=blue][data-sui-variant=lighter].sc-sui-badge-h{background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}[data-sui-color=blue][data-sui-variant=stroke].sc-sui-badge-h{background:transparent;border-color:var(--sui-state-information-base);color:var(--sui-state-information-base)}[data-sui-color=blue][data-sui-variant=dark].sc-sui-badge-h{background:color-mix(in srgb, var(--sui-state-information-base) 22%, transparent);border-color:color-mix(in srgb, var(--sui-state-information-base) 45%, transparent);color:var(--sui-static-white)}[data-sui-color=orange][data-sui-variant=filled].sc-sui-badge-h{background:var(--sui-state-warning-base);border-color:var(--sui-state-warning-base);color:var(--sui-static-white)}[data-sui-color=orange][data-sui-variant=light].sc-sui-badge-h{background:var(--sui-state-warning-light);border-color:transparent;color:var(--sui-state-warning-dark)}[data-sui-color=orange][data-sui-variant=lighter].sc-sui-badge-h{background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}[data-sui-color=orange][data-sui-variant=stroke].sc-sui-badge-h{background:transparent;border-color:var(--sui-state-warning-base);color:var(--sui-state-warning-base)}[data-sui-color=orange][data-sui-variant=dark].sc-sui-badge-h{background:color-mix(in srgb, var(--sui-state-warning-base) 22%, transparent);border-color:color-mix(in srgb, var(--sui-state-warning-base) 45%, transparent);color:var(--sui-static-white)}[data-sui-color=red][data-sui-variant=filled].sc-sui-badge-h{background:var(--sui-state-error-base);border-color:var(--sui-state-error-base);color:var(--sui-static-white)}[data-sui-color=red][data-sui-variant=light].sc-sui-badge-h{background:var(--sui-state-error-light);border-color:transparent;color:var(--sui-state-error-dark)}[data-sui-color=red][data-sui-variant=lighter].sc-sui-badge-h{background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}[data-sui-color=red][data-sui-variant=stroke].sc-sui-badge-h{background:transparent;border-color:var(--sui-state-error-base);color:var(--sui-state-error-base)}[data-sui-color=red][data-sui-variant=dark].sc-sui-badge-h{background:color-mix(in srgb, var(--sui-state-error-base) 22%, transparent);border-color:color-mix(in srgb, var(--sui-state-error-base) 45%, transparent);color:var(--sui-static-white)}[data-sui-color=green][data-sui-variant=filled].sc-sui-badge-h{background:var(--sui-state-success-base);border-color:var(--sui-state-success-base);color:var(--sui-static-white)}[data-sui-color=green][data-sui-variant=light].sc-sui-badge-h{background:var(--sui-state-success-light);border-color:transparent;color:var(--sui-state-success-dark)}[data-sui-color=green][data-sui-variant=lighter].sc-sui-badge-h{background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}[data-sui-color=green][data-sui-variant=stroke].sc-sui-badge-h{background:transparent;border-color:var(--sui-state-success-base);color:var(--sui-state-success-base)}[data-sui-color=green][data-sui-variant=dark].sc-sui-badge-h{background:color-mix(in srgb, var(--sui-state-success-base) 22%, transparent);border-color:color-mix(in srgb, var(--sui-state-success-base) 45%, transparent);color:var(--sui-static-white)}[data-sui-color=yellow][data-sui-variant=filled].sc-sui-badge-h{background:var(--sui-state-away-base);border-color:var(--sui-state-away-base);color:var(--sui-static-white)}[data-sui-color=yellow][data-sui-variant=light].sc-sui-badge-h{background:var(--sui-state-away-light);border-color:transparent;color:var(--sui-state-away-dark)}[data-sui-color=yellow][data-sui-variant=lighter].sc-sui-badge-h{background:var(--sui-state-away-lighter);border-color:transparent;color:var(--sui-state-away-base)}[data-sui-color=yellow][data-sui-variant=stroke].sc-sui-badge-h{background:transparent;border-color:var(--sui-state-away-base);color:var(--sui-state-away-base)}[data-sui-color=yellow][data-sui-variant=dark].sc-sui-badge-h{background:color-mix(in srgb, var(--sui-state-away-base) 22%, transparent);border-color:color-mix(in srgb, var(--sui-state-away-base) 45%, transparent);color:var(--sui-static-white)}[data-sui-color=purple][data-sui-variant=filled].sc-sui-badge-h{background:var(--sui-state-feature-base);border-color:var(--sui-state-feature-base);color:var(--sui-static-white)}[data-sui-color=purple][data-sui-variant=light].sc-sui-badge-h{background:var(--sui-state-feature-light);border-color:transparent;color:var(--sui-state-feature-dark)}[data-sui-color=purple][data-sui-variant=lighter].sc-sui-badge-h{background:var(--sui-state-feature-lighter);border-color:transparent;color:var(--sui-state-feature-base)}[data-sui-color=purple][data-sui-variant=stroke].sc-sui-badge-h{background:transparent;border-color:var(--sui-state-feature-base);color:var(--sui-state-feature-base)}[data-sui-color=purple][data-sui-variant=dark].sc-sui-badge-h{background:color-mix(in srgb, var(--sui-state-feature-base) 22%, transparent);border-color:color-mix(in srgb, var(--sui-state-feature-base) 45%, transparent);color:var(--sui-static-white)}[data-sui-color=sky][data-sui-variant=filled].sc-sui-badge-h{background:var(--sui-state-verified-base);border-color:var(--sui-state-verified-base);color:var(--sui-static-white)}[data-sui-color=sky][data-sui-variant=light].sc-sui-badge-h{background:var(--sui-state-verified-light);border-color:transparent;color:var(--sui-state-verified-dark)}[data-sui-color=sky][data-sui-variant=lighter].sc-sui-badge-h{background:var(--sui-state-verified-lighter);border-color:transparent;color:var(--sui-state-verified-base)}[data-sui-color=sky][data-sui-variant=stroke].sc-sui-badge-h{background:transparent;border-color:var(--sui-state-verified-base);color:var(--sui-state-verified-base)}[data-sui-color=sky][data-sui-variant=dark].sc-sui-badge-h{background:color-mix(in srgb, var(--sui-state-verified-base) 22%, transparent);border-color:color-mix(in srgb, var(--sui-state-verified-base) 45%, transparent);color:var(--sui-static-white)}[data-sui-color=pink][data-sui-variant=filled].sc-sui-badge-h{background:var(--sui-state-highlighted-base);border-color:var(--sui-state-highlighted-base);color:var(--sui-static-white)}[data-sui-color=pink][data-sui-variant=light].sc-sui-badge-h{background:var(--sui-state-highlighted-light);border-color:transparent;color:var(--sui-state-highlighted-dark)}[data-sui-color=pink][data-sui-variant=lighter].sc-sui-badge-h{background:var(--sui-state-highlighted-lighter);border-color:transparent;color:var(--sui-state-highlighted-base)}[data-sui-color=pink][data-sui-variant=stroke].sc-sui-badge-h{background:transparent;border-color:var(--sui-state-highlighted-base);color:var(--sui-state-highlighted-base)}[data-sui-color=pink][data-sui-variant=dark].sc-sui-badge-h{background:color-mix(in srgb, var(--sui-state-highlighted-base) 22%, transparent);border-color:color-mix(in srgb, var(--sui-state-highlighted-base) 45%, transparent);color:var(--sui-static-white)}[data-sui-color=teal][data-sui-variant=filled].sc-sui-badge-h{background:var(--sui-state-stable-base);border-color:var(--sui-state-stable-base);color:var(--sui-static-white)}[data-sui-color=teal][data-sui-variant=light].sc-sui-badge-h{background:var(--sui-state-stable-light);border-color:transparent;color:var(--sui-state-stable-dark)}[data-sui-color=teal][data-sui-variant=lighter].sc-sui-badge-h{background:var(--sui-state-stable-lighter);border-color:transparent;color:var(--sui-state-stable-base)}[data-sui-color=teal][data-sui-variant=stroke].sc-sui-badge-h{background:transparent;border-color:var(--sui-state-stable-base);color:var(--sui-state-stable-base)}[data-sui-color=teal][data-sui-variant=dark].sc-sui-badge-h{background:color-mix(in srgb, var(--sui-state-stable-base) 22%, transparent);border-color:color-mix(in srgb, var(--sui-state-stable-base) 45%, transparent);color:var(--sui-static-white)}[data-sui-variant=dark].sc-sui-badge-h:not([data-sui-color]),[data-sui-variant=dark][data-sui-color=gray].sc-sui-badge-h{background:rgba(255, 255, 255, 0.1);border-color:rgba(255, 255, 255, 0.16);color:var(--sui-static-white)}[data-sui-disabled].sc-sui-badge-h{pointer-events:none;color:var(--sui-text-disabled-300)}[data-sui-disabled][data-sui-variant=filled].sc-sui-badge-h{background:var(--sui-state-faded-light);border-color:var(--sui-state-faded-light);color:var(--sui-text-disabled-300)}[data-sui-disabled][data-sui-variant=light].sc-sui-badge-h,[data-sui-disabled][data-sui-variant=lighter].sc-sui-badge-h{background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-text-disabled-300)}[data-sui-disabled][data-sui-variant=stroke].sc-sui-badge-h{background:transparent;border-color:var(--sui-stroke-soft-200);color:var(--sui-text-disabled-300)}[data-sui-disabled][data-sui-variant=dark].sc-sui-badge-h{background:rgba(255, 255, 255, 0.06);border-color:rgba(255, 255, 255, 0.1);color:rgba(255, 255, 255, 0.45)}`;
+
+const SuiBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Color semántico. Default `gray`. `orange` = naranja brand (#fa7319). */
+        this.color = 'gray';
+        /** Estilo visual. Default `lighter`. `dark` es el add-on glass del proyecto. */
+        this.variant = 'lighter';
+        /** Tamaño. Default `small` (16px). `medium` 20 · `large` 24 · `xlarge` 28 (mobile). */
+        this.size = 'small';
+        /** Tipo de contenido. Default `basic`. `with-dot` renderiza el dot built-in. */
+        this.type = 'basic';
+        /** Deshabilitado: tokens grises uniformes, bloquea pointer-events. Default `false`. */
+        this.disabled = false;
+    }
+    /** Internal: true cuando el badge renderiza su dot built-in (type=with-dot). */
+    get showsDot() {
+        return this.type === 'with-dot';
+    }
+    render() {
+        return (h(Host, { key: '88f88e2bbb5056ac3e69d6dda9a0949e4fa2b525', role: "status", "data-sui-color": this.color, "data-sui-variant": this.variant, "data-sui-size": this.size, "data-sui-type": this.type, "data-sui-disabled": this.disabled ? '' : null }, this.showsDot && h("span", { key: 'ca148bcafe4a6973bf98bc82a9ee336c052f4eef', class: "sui-badge__dot", "aria-hidden": "true" }), h("slot", { key: '0d4c286c58803ee72e1e008d57f9a30f7d91a1d7', name: "start" }), h("span", { key: 'f8407a20b483eeb2b22e82fb45e61387ca6a53f6', class: "sui-badge__label" }, h("slot", { key: 'e5aeaa1f941a62636af05a52f74c7e5e729c4d27' })), h("slot", { key: '54f3ac02dedc2e7bff31492770f6fc656ddc10bc', name: "end" })));
+    }
+};
+SuiBadge.style = suiBadgeCss();
+
+export { SuiBadge as sui_badge };

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

@@ -0,0 +1,68 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiBannerCss = () => `@charset "UTF-8";.sc-sui-banner-h{display:block;width:100%}.sui-banner.sc-sui-banner{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 48px;width:100%;height:44px;box-sizing:border-box;overflow:clip;color:var(--sui-text-strong-950);font-family:var(--sui-font-sans)}@media (max-width: 767px){.sui-banner.sc-sui-banner{padding:12px 48px 12px 14px;height:auto;min-height:44px;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:4px 8px}}.sui-banner__icon.sc-sui-banner{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.sui-banner__icon-slot.sc-sui-banner{display:inline-flex;align-items:center;justify-content:center}.sui-banner__icon-slot.sc-sui-banner:empty{display:none}.sui-banner__icon-slot.sc-sui-banner:not(:empty)+.sui-banner__icon-default.sc-sui-banner{display:none}.sui-banner__text.sc-sui-banner{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -0.006em);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;white-space:nowrap;word-break:break-word}@media (max-width: 767px){.sui-banner__text.sc-sui-banner{flex:1 1 0;min-width:0;white-space:normal;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px}}.sui-banner__title.sc-sui-banner{font-weight:500}.sui-banner__sep.sc-sui-banner{font-weight:500;opacity:1}@media (max-width: 767px){.sui-banner__sep.sc-sui-banner{display:none}}.sui-banner__description.sc-sui-banner{font-weight:400}.sui-banner__action.sc-sui-banner{flex-shrink:0;display:inline-flex;align-items:center;color:var(--sui-text-strong-950)}.sui-banner__action.sc-sui-banner:empty{display:none}@media (max-width: 767px){.sui-banner__action.sc-sui-banner{flex-basis:100%;padding-left:28px}}@media (max-width: 767px){[data-sui-show-icon=false].sc-sui-banner-h .sui-banner__action.sc-sui-banner{padding-left:0}}.sui-banner__close.sc-sui-banner{position:absolute;right:12px;top:calc(50% + 0.5px);transform:translateY(-50%);opacity:0.48;color:inherit;transition:opacity 120ms}.sui-banner__close.sc-sui-banner:hover{opacity:0.72}@media (max-width: 767px){.sui-banner__close.sc-sui-banner{top:10px;transform:none}}.sui-banner__close.sc-sui-banner::before{content:"";position:absolute;inset:-8px}@media (max-width: 767px){.sui-banner__close.sc-sui-banner::before{inset:-10px -12px -10px -8px}}[data-sui-style=stroke].sc-sui-banner-h .sui-banner.sc-sui-banner,.sc-sui-banner-h:not([data-sui-style]) .sui-banner.sc-sui-banner{background:var(--sui-bg-white-0);border-bottom:1px solid var(--sui-stroke-soft-200)}[data-sui-style=stroke][data-sui-variant=info].sc-sui-banner-h .sui-banner__icon.sc-sui-banner,.sc-sui-banner-h:not([data-sui-style])[data-sui-variant=info] .sui-banner__icon.sc-sui-banner{color:var(--sui-state-information-base)}[data-sui-style=stroke][data-sui-variant=success].sc-sui-banner-h .sui-banner__icon.sc-sui-banner,.sc-sui-banner-h:not([data-sui-style])[data-sui-variant=success] .sui-banner__icon.sc-sui-banner{color:var(--sui-state-success-base)}[data-sui-style=stroke][data-sui-variant=warning].sc-sui-banner-h .sui-banner__icon.sc-sui-banner,.sc-sui-banner-h:not([data-sui-style])[data-sui-variant=warning] .sui-banner__icon.sc-sui-banner{color:var(--sui-state-warning-base)}[data-sui-style=stroke][data-sui-variant=error].sc-sui-banner-h .sui-banner__icon.sc-sui-banner,.sc-sui-banner-h:not([data-sui-style])[data-sui-variant=error] .sui-banner__icon.sc-sui-banner{color:var(--sui-state-error-base)}[data-sui-style=stroke][data-sui-variant=feature].sc-sui-banner-h .sui-banner__icon.sc-sui-banner,.sc-sui-banner-h:not([data-sui-style])[data-sui-variant=feature] .sui-banner__icon.sc-sui-banner{color:var(--sui-state-faded-base)}[data-sui-style=light][data-sui-variant=info].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-information-light)}[data-sui-style=light][data-sui-variant=info].sc-sui-banner-h .sui-banner__icon.sc-sui-banner{color:var(--sui-state-information-base)}[data-sui-style=light][data-sui-variant=success].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-success-light)}[data-sui-style=light][data-sui-variant=success].sc-sui-banner-h .sui-banner__icon.sc-sui-banner{color:var(--sui-state-success-base)}[data-sui-style=light][data-sui-variant=warning].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-warning-light)}[data-sui-style=light][data-sui-variant=warning].sc-sui-banner-h .sui-banner__icon.sc-sui-banner{color:var(--sui-state-warning-base)}[data-sui-style=light][data-sui-variant=error].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-error-light)}[data-sui-style=light][data-sui-variant=error].sc-sui-banner-h .sui-banner__icon.sc-sui-banner{color:var(--sui-state-error-base)}[data-sui-style=light][data-sui-variant=feature].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-faded-light)}[data-sui-style=light][data-sui-variant=feature].sc-sui-banner-h .sui-banner__icon.sc-sui-banner{color:var(--sui-state-faded-base)}[data-sui-style=lighter][data-sui-variant=info].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-information-lighter)}[data-sui-style=lighter][data-sui-variant=info].sc-sui-banner-h .sui-banner__icon.sc-sui-banner{color:var(--sui-state-information-base)}[data-sui-style=lighter][data-sui-variant=success].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-success-lighter)}[data-sui-style=lighter][data-sui-variant=success].sc-sui-banner-h .sui-banner__icon.sc-sui-banner{color:var(--sui-state-success-base)}[data-sui-style=lighter][data-sui-variant=warning].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-warning-lighter)}[data-sui-style=lighter][data-sui-variant=warning].sc-sui-banner-h .sui-banner__icon.sc-sui-banner{color:var(--sui-state-warning-base)}[data-sui-style=lighter][data-sui-variant=error].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-error-lighter)}[data-sui-style=lighter][data-sui-variant=error].sc-sui-banner-h .sui-banner__icon.sc-sui-banner{color:var(--sui-state-error-base)}[data-sui-style=lighter][data-sui-variant=feature].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-faded-lighter)}[data-sui-style=lighter][data-sui-variant=feature].sc-sui-banner-h .sui-banner__icon.sc-sui-banner{color:var(--sui-state-faded-base)}[data-sui-style=filled].sc-sui-banner-h .sui-banner.sc-sui-banner{color:var(--sui-static-white)}[data-sui-style=filled].sc-sui-banner-h .sui-banner__action.sc-sui-banner{color:var(--sui-static-white)}[data-sui-style=filled].sc-sui-banner-h .sui-banner__close.sc-sui-banner{opacity:0.72}[data-sui-style=filled][data-sui-variant=info].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-information-base)}[data-sui-style=filled][data-sui-variant=success].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-success-base)}[data-sui-style=filled][data-sui-variant=warning].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-warning-base)}[data-sui-style=filled][data-sui-variant=error].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-error-base)}[data-sui-style=filled][data-sui-variant=feature].sc-sui-banner-h .sui-banner.sc-sui-banner{background:var(--sui-state-faded-base)}`;
+
+const SuiBanner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closed = createEvent(this, "closed");
+        /** Variante semántica. Default `info`. */
+        this.variant = 'info';
+        /**
+         * Estilo visual. Default `stroke`.
+         * NOTA: el @Prop público se llama `variantStyle` (igual al Angular). En HTML
+         * el atributo es `variant-style`. Se refleja al host como `data-sui-style`.
+         */
+        this.variantStyle = 'stroke';
+        /**
+         * Título / línea principal del banner.
+         * Renombrado desde el `title` del Angular: `title` es un @Prop reservado del
+         * DOM (dispara el tooltip nativo gris). En HTML el atributo es `heading`. Se
+         * expone via `aria-label` del host para accesibilidad.
+         */
+        this.heading = null;
+        /** Descripción (texto secundario tras el separador ∙). */
+        this.description = null;
+        /** Muestra el ícono leading (color del variant). Default `true`. */
+        this.showIcon = true;
+        /** Muestra el botón X de cierre. Default `false`. */
+        this.dismissible = false;
+        /** Texto accesible de la X. Default «Cerrar» (en Angular sale de provideSuiTextos). */
+        this.closeLabel = 'Cerrar';
+        /** Estado interno de cierre (equivale al `signal dismissed` del Angular). */
+        this.dismissed = false;
+        this.onDismiss = () => {
+            this.dismissed = true;
+            this.closed.emit();
+        };
+    }
+    componentWillLoad() {
+        /* `<Host>` no borra un title puesto por el consumer: se quita
+           a mano para que no salga el tooltip nativo gris (en Angular, '[attr.title]': 'null').
+           shortcut: solo al montar; un title agregado después queda, subir a MutationObserver si hace falta. */
+        this.el.removeAttribute('title');
+    }
+    /** Icon map por variante (Remix). */
+    get iconName() {
+        const map = {
+            info: 'information-fill',
+            success: 'checkbox-circle-fill',
+            warning: 'alert-fill',
+            error: 'error-warning-fill',
+            feature: 'magic-fill',
+        };
+        return map[this.variant];
+    }
+    render() {
+        var _a, _b;
+        if (this.dismissed) {
+            // Host queda vacío (equivale al `@if (!dismissed())` del Angular).
+            return (h(Host, { role: "region", "aria-label": (_a = this.heading) !== null && _a !== void 0 ? _a : undefined, "data-sui-variant": this.variant, "data-sui-style": this.variantStyle, "data-sui-show-icon": String(this.showIcon) }));
+        }
+        return (h(Host, { role: "region", "aria-label": (_b = this.heading) !== null && _b !== void 0 ? _b : undefined, "data-sui-variant": this.variant, "data-sui-style": this.variantStyle, "data-sui-show-icon": String(this.showIcon) }, h("div", { class: "sui-banner" }, this.showIcon && (h("div", { class: "sui-banner__icon", "aria-hidden": "true" }, h("span", { class: "sui-banner__icon-slot" }, h("slot", { name: "icon" })), h("sui-icon", { class: "sui-banner__icon-default", name: this.iconName, size: 20 }))), h("div", { class: "sui-banner__text" }, this.heading && h("span", { class: "sui-banner__title" }, this.heading), this.heading && this.description && (h("span", { class: "sui-banner__sep", "aria-hidden": "true" }, "\u2219")), this.description && (h("span", { class: "sui-banner__description" }, this.description))), h("div", { class: "sui-banner__action" }, h("slot", { name: "action" })), this.dismissible && (h("sui-compact-button", { class: "sui-banner__close", icon: "close-line", variantStyle: "modifiable", size: "large", ariaLabel: this.closeLabel, onClicked: this.onDismiss })))));
+    }
+    get el() { return getElement(this); }
+};
+SuiBanner.style = suiBannerCss();
+
+export { SuiBanner as sui_banner };

package/dist/esm/sui-brand-logo.entry.js

@@ -0,0 +1,107 @@
+import { r as registerInstance, d as getAssetPath, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+import { s as suiHrefClick } from './sui-href-CtltTdNy.js';
+
+const suiBrandLogoCss = () => `@charset "UTF-8";.sc-sui-brand-logo-h{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:var(--sui-brand-logo-size, 24px);height:var(--sui-brand-logo-size, 24px);flex-shrink:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.sui-brand-logo__el.sc-sui-brand-logo{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:inherit;color:inherit;text-decoration:none;cursor:default;outline:none}a.sui-brand-logo__el.sc-sui-brand-logo{cursor:pointer;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}a.sui-brand-logo__el.sc-sui-brand-logo:hover{opacity:0.85}a.sui-brand-logo__el.sc-sui-brand-logo:active{transform:scale(0.97)}a.sui-brand-logo__el.sc-sui-brand-logo:active,a.sui-brand-logo__el.sc-sui-brand-logo:focus-visible{border-radius:var(--sui-radius-4, 4px);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-primary-alpha-10)}.sui-brand-logo__img.sc-sui-brand-logo{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}[data-sui-disabled].sc-sui-brand-logo-h .sui-brand-logo__el.sc-sui-brand-logo{cursor:not-allowed;pointer-events:none}[data-sui-disabled].sc-sui-brand-logo-h .sui-brand-logo__img.sc-sui-brand-logo{opacity:0.4;filter:grayscale(100%)}`;
+
+/** Default labels para accesibilidad. Override via `aria-label`. */
+const BRAND_DISPLAY_NAMES = {
+    adobe: 'Adobe',
+    amazon: 'Amazon',
+    apple: 'Apple',
+    bitcoin: 'Bitcoin',
+    discord: 'Discord',
+    dropbox: 'Dropbox',
+    facebook: 'Facebook',
+    figma: 'Figma',
+    framer: 'Framer',
+    github: 'GitHub',
+    google: 'Google',
+    instagram: 'Instagram',
+    linkedin: 'LinkedIn',
+    microsoft: 'Microsoft',
+    netflix: 'Netflix',
+    notion: 'Notion',
+    paypal: 'PayPal',
+    pinterest: 'Pinterest',
+    slack: 'Slack',
+    spotify: 'Spotify',
+    stripe: 'Stripe',
+    telegram: 'Telegram',
+    twitch: 'Twitch',
+    webflow: 'Webflow',
+    whatsapp: 'WhatsApp',
+    wise: 'Wise',
+    'x-twitter': 'X / Twitter',
+    youtube: 'YouTube',
+};
+/** Sizes canon — alineados con sui-flag / sui-emoji. */
+const SIZE_PX = {
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 32,
+    xl: 40,
+    /* 48px — leading Brand del Content Label size Large (Figma 2945:5652). Aditivo,
+       no es un size del set Major Brand Logos (nativo 32×32, escala vectorial). */
+    '2xl': 48,
+};
+const SuiBrandLogo = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Estilo del logo. Default `original` (full color). */
+        this.variant = 'original';
+        /** Tamaño. Default `md` (24px). */
+        this.size = 'md';
+        /** Si se provee, renderiza un <a> clickeable en vez de un <span>. Default `null`. */
+        this.href = null;
+        /** Atributo target del <a> (ej. `_blank`). Solo aplica con `href`. Default `null`. */
+        this.target = null;
+        /** Atributo rel del <a>. Default `noopener noreferrer` (seguro para target=_blank). */
+        this.rel = 'noopener noreferrer';
+        /** Deshabilitado: grayscale + opacidad, sin click. No es focusable como link. Default `false`. */
+        this.disabled = false;
+        /**
+         * Aria-label. Override del default derivado del nombre de marca
+         * (ej. "Google logo"). Aplica al elemento interno (<a> o <span>).
+         */
+        this.ariaLabel = null;
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` fuerza al
+     * browser a engage el touch event pipeline, lo cual hace que `:active`
+     * dispare y se libere correctamente. Sin esto, `:active` "stickea" 300-500ms
+     * en pages standalone. Solo relevante cuando el logo es un link.
+     */
+    onTouchStart() {
+        /* presencia del binding = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd() {
+        const anchor = this.el.querySelector('a.sui-brand-logo__el');
+        anchor === null || anchor === void 0 ? void 0 : anchor.blur();
+    }
+    /** URL absoluta al SVG, resuelta contra el base path del componente. */
+    get src() {
+        return getAssetPath(`assets/brand-logos/${this.company}-${this.variant}.svg`);
+    }
+    /** Alt/label auto-derivado del nombre de marca. Override via `ariaLabel`. */
+    get alt() {
+        var _a;
+        return (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : `Logo de ${BRAND_DISPLAY_NAMES[this.company]}`;
+    }
+    /** Renderiza <a> solo si hay href y no está disabled. */
+    get isAnchor() {
+        return !!this.href && !this.disabled;
+    }
+    render() {
+        var _a, _b, _c;
+        const { alt } = this;
+        const img = h("img", { key: '656bfd4dcd5a7534c5e2db2fc977ffe20327afca', class: "sui-brand-logo__img", src: this.src, alt: alt, loading: "lazy", decoding: "async" });
+        return (h(Host, { key: 'd32119a0c20acfd2c5a1e76e41577e94df6dc640', style: { '--sui-brand-logo-size': `${SIZE_PX[this.size]}px` }, "data-sui-company": this.company, "data-sui-variant": this.variant, "data-sui-size": this.size, "data-sui-disabled": this.disabled ? '' : null }, this.isAnchor ? (h("a", { class: "sui-brand-logo__el", href: (_a = this.href) !== null && _a !== void 0 ? _a : undefined, target: (_b = this.target) !== null && _b !== void 0 ? _b : undefined, rel: (_c = this.rel) !== null && _c !== void 0 ? _c : undefined, "aria-label": alt, onClick: (ev) => suiHrefClick(ev, this.href) }, img)) : (h("span", { class: "sui-brand-logo__el", "aria-label": alt }, img))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+};
+SuiBrandLogo.style = suiBrandLogoCss();
+
+export { SuiBrandLogo as sui_brand_logo };

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

@@ -0,0 +1,94 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+import { s as suiHrefClick } from './sui-href-CtltTdNy.js';
+
+const suiBreadcrumbItemCss = () => `@charset "UTF-8";.sc-sui-breadcrumb-item-h{display:inline-flex;align-items:center;font-family:var(--sui-font-sans);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-breadcrumb-item__inner.sc-sui-breadcrumb-item{display:inline-flex;align-items:center;gap:0;padding:0;margin:0;background:transparent;border:none;appearance:none;font:inherit;text-align:left;text-decoration:none;cursor:pointer;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), text-decoration var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}[data-sui-text][data-sui-icon].sc-sui-breadcrumb-item-h .sui-breadcrumb-item__inner.sc-sui-breadcrumb-item{gap:6px}a.sui-breadcrumb-item__inner.sc-sui-breadcrumb-item:hover,button.sui-breadcrumb-item__inner.sc-sui-breadcrumb-item:hover{color:var(--sui-text-strong-950);font-feature-settings:"cv09" 1, "ss11" 1, "calt" 0, "liga" 0;text-decoration:underline;text-decoration-style:solid;text-decoration-thickness:from-font;text-decoration-skip-ink:none;text-underline-position:from-font}a.sui-breadcrumb-item__inner.sc-sui-breadcrumb-item:focus-visible,button.sui-breadcrumb-item__inner.sc-sui-breadcrumb-item:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px;border-radius:2px}button.sui-breadcrumb-item__inner.sc-sui-breadcrumb-item:active{transform:none}[data-sui-state=active].sc-sui-breadcrumb-item-h .sui-breadcrumb-item__inner.sc-sui-breadcrumb-item{color:var(--sui-text-strong-950);cursor:default;text-decoration:none}.sui-breadcrumb-item__icon.sc-sui-breadcrumb-item{flex-shrink:0}.sui-breadcrumb-item__label.sc-sui-breadcrumb-item{white-space:nowrap}`;
+
+const SuiBreadcrumbItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clicked = createEvent(this, "clicked");
+        /** Texto visible del item. Omitible para render icon-only. Default ''. */
+        this.label = '';
+        /** Nombre del icono Remix (sin prefijo `ri-`). Omitible para render text-only. Default ''. */
+        this.icon = '';
+        /**
+         * URL del item. Si presente → renderiza `<a>`. Sin → `<button>`.
+         * `null` se resuelve a undefined al bindear el atributo HTML `href`.
+         * Default ''.
+         */
+        this.href = '';
+        /**
+         * Marca este item como current page (no clickable, color strong-950).
+         * Default false. El contrato visual del host es `data-sui-state` (no un
+         * atributo `active` reflexionado), igual que el Angular original.
+         */
+        this.active = false;
+        /** aria-label para items icon-only (a11y). Default ''. */
+        this.ariaLabel = '';
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo cual hace que `:active` dispare y se libere bien.
+     * Sin esto, `:active` "stickea" 300-500ms en pages standalone.
+     */
+    onTouchStart() {
+        /* presencia del binding = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd() {
+        var _a;
+        (_a = this.el.querySelector('.sui-breadcrumb-item__inner')) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    get hasText() {
+        return this.label.trim().length > 0;
+    }
+    get hasIcon() {
+        return this.icon.trim().length > 0;
+    }
+    get state() {
+        return this.active ? 'active' : 'default';
+    }
+    get hrefValue() {
+        var _a;
+        return ((_a = this.href) !== null && _a !== void 0 ? _a : '').trim();
+    }
+    onClick(ev) {
+        if (this.active) {
+            ev.preventDefault();
+            return;
+        }
+        // Si no hay href, prevenimos default (es un button "fake link").
+        // Con href: emitimos y un href interno navega por `suiNavigate` (sui-href)
+        // si la app lo escucha; si no, el browser navega.
+        if (!this.hrefValue)
+            ev.preventDefault();
+        this.clicked.emit();
+        if (this.hrefValue)
+            suiHrefClick(ev, this.hrefValue);
+    }
+    /** Contenido interno compartido por las 3 ramas (span / a / button). */
+    renderInner() {
+        return [
+            this.hasIcon && (h("sui-icon", { class: "sui-breadcrumb-item__icon", name: this.icon, size: 20 })),
+            this.hasText && h("span", { class: "sui-breadcrumb-item__label" }, this.label),
+        ];
+    }
+    render() {
+        const ariaLabel = this.ariaLabel || undefined;
+        let inner;
+        if (this.active) {
+            inner = (h("span", { key: '54769e9d9bdc0141b2019a5f8c23770b889b7037', class: "sui-breadcrumb-item__inner", "aria-current": "page", "aria-label": ariaLabel }, this.renderInner()));
+        }
+        else if (this.hrefValue) {
+            inner = (h("a", { key: '4c1a8511b24edebfa5261bd83d018a9f21b070d4', class: "sui-breadcrumb-item__inner", href: this.hrefValue, "aria-label": ariaLabel, onClick: (ev) => this.onClick(ev) }, this.renderInner()));
+        }
+        else {
+            inner = (h("button", { key: 'ba3a69d87647778f56dbe7e3eb5c3dee83dec4b4', type: "button", class: "sui-breadcrumb-item__inner", "aria-label": ariaLabel, onClick: (ev) => this.onClick(ev) }, this.renderInner()));
+        }
+        return (h(Host, { key: 'c0b8a59a462c990d3b07ba639878e2e4a161868b', "data-sui-state": this.state, "data-sui-text": this.hasText ? '' : null, "data-sui-icon": this.hasIcon ? '' : null }, inner));
+    }
+    get el() { return getElement(this); }
+};
+SuiBreadcrumbItem.style = suiBreadcrumbItemCss();
+
+export { SuiBreadcrumbItem as sui_breadcrumb_item };