@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,461 @@
+@charset "UTF-8";
+/* ═══════════════════════════════════════════════════════════════════════
+ *  SUI Avatar — SUI Design System 2.0
+ *  Figma: 8p1k72aKKvzJV4XcvPS4VO (component_set "Avatar")
+ *  Sizes xs..5xl, fallback cascade (image → initials → placeholder),
+ *  status dot opcional, bg color por variant.
+ *  Stencil: mismo archivo que el SUI Angular (fuente de verdad), sin cambios de reglas.
+ * ═════════════════════════════════════════════════════════════════════ */
+:host {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 999px;
+  overflow: visible; /* visible para el status dot */
+  font-family: var(--sui-font-sans, var(--font-sans, sans-serif));
+  font-weight: 500;
+  user-select: none;
+  vertical-align: middle;
+}
+
+/* ── Sizes (diámetro × tipografía del initial) ──────────────────────────
+   9 sizes canon SUI 2.0 (Figma 245:18786). font-size/line-height/
+   letter-spacing homologados a los estilos de Figma (verificados per-variant
+   2026-05-29). El font-family queda en Satoshi global (decisión del proyecto,
+   MEMORY.md) — Figma usa Inter / Inter Display.
+     xs/sm (20/24)  → Label/X Small  12 / 16 / 0
+     md    (32)     → Label/Small    14 / 20 / -0.006em
+     lg    (40)     → Label/Medium   16 / 24 / -0.011em
+     xl/2xl(48/56)  → Label/Large    18 / 24 / -0.015em
+     3xl-5xl(64+)   → Title/H5       24 / 32 / 0
+   `2xs=16` se removió (no existe en Figma). */
+:host([data-sui-size=xs]) {
+  width: 20px;
+  height: 20px;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0;
+}
+
+:host([data-sui-size=sm]) {
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0;
+}
+
+:host([data-sui-size=md]) {
+  width: 32px;
+  height: 32px;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: -0.006em;
+}
+
+:host([data-sui-size=lg]) {
+  width: 40px;
+  height: 40px;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: -0.011em;
+}
+
+:host([data-sui-size=xl]) {
+  width: 48px;
+  height: 48px;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: -0.015em;
+}
+
+:host([data-sui-size="2xl"]) {
+  width: 56px;
+  height: 56px;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: -0.015em;
+}
+
+:host([data-sui-size="3xl"]) {
+  width: 64px;
+  height: 64px;
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: 0;
+}
+
+:host([data-sui-size="4xl"]) {
+  width: 72px;
+  height: 72px;
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: 0;
+}
+
+:host([data-sui-size="5xl"]) {
+  width: 80px;
+  height: 80px;
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: 0;
+}
+
+/* ── Inner content (image / initial / placeholder) ──────────────────── */
+.sui-avatar__image {
+  width: 100%;
+  height: 100%;
+  border-radius: 999px;
+  object-fit: cover;
+  display: block;
+}
+
+.sui-avatar__initial {
+  /* line-height heredado del per-size (Figma usa line-height del token, no 1).
+     Figma muestra DOS letras (ej. "JB") → sin width fija, centrado, no truncar.
+     word-break break-word espeja el `[word-break:break-word]` del node 246:7237. */
+  text-align: center;
+  word-break: break-word;
+  white-space: nowrap;
+}
+
+/* Content-type Icon: glifo custom (RemixIcon) centrado, color hereda del fallback. */
+.sui-avatar__icon {
+  display: inline-flex;
+  color: var(--sui-icon-soft-400, #a3a3a3);
+}
+
+/* ── Placeholder silueta (Figma node 246:7589, viewBox 80×80) ───────────────
+   Réplica EXACTA del SVG de Figma: NO es un glifo centrado, es head+body que
+   LLENAN el avatar y se recortan al círculo. El <svg> ocupa el host completo
+   (inset 0); preserveAspectRatio="slice" garantiza el recorte al círculo.
+     Head: circle cx40 cy32 r16, fill white, opacity 0.9
+     Body: ellipse cx40 cy78 rx32 ry24, fill white, opacity 0.72
+   El bg del host (gray/200 en fallback color=gray, o bg-weak-50 en slate) hace
+   de fondo; las formas blancas dibujan la silueta. */
+.sui-avatar__placeholder {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-radius: inherit;
+  /* clip al círculo (la body ellipse se extiende fuera del viewBox; el host es
+     overflow:visible por los badges, así que el SVG se auto-recorta). */
+  overflow: hidden;
+}
+
+/* Silueta = static-white FIJO (NO bg-white-0, que en dark = #171717 e invertiría
+   la silueta a negra). El avatar de iniciales/silueta NO cambia con el tema —
+   en Figma usa tokens de paleta fija, no semánticos (verificado node 247:3268). */
+.sui-avatar__ph-head {
+  fill: var(--sui-static-white, #fff);
+  opacity: 0.9;
+}
+
+.sui-avatar__ph-body {
+  fill: var(--sui-static-white, #fff);
+  opacity: 0.72;
+}
+
+/* Cuando hay imagen, hide bg (la imagen lo cubre todo). El bg se aplica
+   al :host solo cuando estamos en fallback. */
+:host([data-sui-fallback]) {
+  /* neutral-50/600 FIJOS (= valor light de bg-weak-50/text-sub-600) en vez de los
+     semánticos, que cambian en dark. El avatar no debe verse afectado por el tema. */
+  background: var(--sui-neutral-50, #f7f7f7);
+  color: var(--sui-neutral-600, #5c5c5c);
+}
+
+/* Placeholder silueta: el bg canon Figma (node 246:7589) es gray/200 #ebebeb,
+   NO bg-weak-50. Solo aplica al nivel silueta (sin iniciales/icon). Un `color`
+   explícito (ej. color="blue") sí lo override más abajo via especificidad. */
+:host([data-sui-placeholder][data-sui-color=slate]) {
+  background: var(--sui-neutral-200, #ebebeb);
+}
+
+/* ── Color variants (solo aplican en fallback) ──────────────────────────
+   Canon SUI 2.0 (Figma 245:18786, Avatar Group 581:6177):
+   - Solid BG usa el ramp `*-200` (pastel sólido) — verificado en el group de
+     size 80 (gray/200 #ebebeb, yellow/200 #ffecc0, blue/200 #c0d5ff, sky/200
+     #c0eaff).
+   - Text-color del initial es SIEMPRE `static/static-black` #171717
+     (= --sui-static-black FIJO, NO --sui-text-strong-950 que invierte en dark),
+     NO un shade `*-950` por color. Verificado per-variant en cada Text=On.
+   `slate` es el neutro default sin color asignado → usa neutral-50 + neutral-600
+   FIJOS (= valor light de bg-weak-50/text-sub-600; extra del proyecto, no Figma).
+   ─────────────────────────────────────────────────────────────────────── */
+:host([data-sui-fallback][data-sui-color=slate]) {
+  background: var(--sui-neutral-50, #f7f7f7);
+  color: var(--sui-neutral-600, #5c5c5c);
+}
+
+:host([data-sui-fallback][data-sui-color=gray]) {
+  background: var(--sui-neutral-200, #ebebeb);
+}
+
+:host([data-sui-fallback][data-sui-color=blue]) {
+  background: var(--sui-blue-200, #c0d5ff);
+}
+
+:host([data-sui-fallback][data-sui-color=orange]) {
+  background: var(--sui-orange-200, #ffd9c0);
+}
+
+:host([data-sui-fallback][data-sui-color=red]) {
+  background: var(--sui-red-200, #ffc0c5);
+}
+
+:host([data-sui-fallback][data-sui-color=green]) {
+  background: var(--sui-green-200, #c2f5da);
+}
+
+:host([data-sui-fallback][data-sui-color=yellow]) {
+  background: var(--sui-yellow-200, #ffecc0);
+}
+
+:host([data-sui-fallback][data-sui-color=purple]) {
+  background: var(--sui-purple-200, #cac0ff);
+}
+
+:host([data-sui-fallback][data-sui-color=sky]) {
+  background: var(--sui-sky-200, #c0eaff);
+}
+
+:host([data-sui-fallback][data-sui-color=pink]) {
+  background: var(--sui-pink-200, #ffc0df);
+}
+
+:host([data-sui-fallback][data-sui-color=teal]) {
+  background: var(--sui-teal-200, #c2f5ee);
+}
+
+/* Text del initial: static-black FIJO uniforme para todos los colores no-slate.
+   NO --sui-text-strong-950 (en dark invierte a #ffffff). El texto de iniciales
+   no cambia con el tema — Figma usa static-black (node 247:3268, purple/950 era
+   solo el demo morado; la regla canon per-variant es static-black). */
+:host([data-sui-fallback]:not([data-sui-color=slate])) {
+  color: var(--sui-static-black, #171717);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+ *  STATUS / TOP BADGES — geometría PROPORCIONAL al diámetro (issue 5)
+ *
+ *  Figma compone los símbolos sobre el avatar con posición PORCENTUAL relativa
+ *  al diámetro (node 246:7237), NO en px fijos:
+ *    TopStatus    frame inset = [0 -10% 60% 70%]  → 40% × 40%, top-right, sale -10%
+ *    BottomStatus frame inset = [60% -10% 0 70%]  → 40% × 40%, bottom-right
+ *  → todo se dimensiona en `%` del avatar; UN solo `--sui-avatar-ring` por size
+ *    da el grosor del anillo blanco (lo único que no puede ser % en CSS). Así el
+ *    indicador crece/encoge proporcional sin rampas px de diámetro.
+ *
+ *  Anillo blanco proporcional (espeja los insets internos de Figma): la rampa
+ *  --sui-avatar-ring sigue la regla "más grande el avatar, más grueso el anillo".
+ * ═════════════════════════════════════════════════════════════════════ */
+:host {
+  --sui-avatar-ring: 2px; /* grosor del anillo blanco (override por size abajo) */
+}
+
+:host([data-sui-size=xs]) {
+  --sui-avatar-ring: 1px;
+}
+
+:host([data-sui-size=sm]) {
+  --sui-avatar-ring: 1.5px;
+}
+
+:host([data-sui-size=md]) {
+  --sui-avatar-ring: 2px;
+}
+
+:host([data-sui-size=lg]) {
+  --sui-avatar-ring: 2px;
+}
+
+:host([data-sui-size=xl]) {
+  --sui-avatar-ring: 2px;
+}
+
+:host([data-sui-size="2xl"]) {
+  --sui-avatar-ring: 2.5px;
+}
+
+:host([data-sui-size="3xl"]) {
+  --sui-avatar-ring: 3px;
+}
+
+:host([data-sui-size="4xl"]) {
+  --sui-avatar-ring: 3px;
+}
+
+:host([data-sui-size="5xl"]) {
+  --sui-avatar-ring: 3.5px;
+}
+
+/* ── BottomStatus dot (online/offline/away/busy) — Figma 245:18721 ──────────
+   Frame 40% del avatar; el anillo blanco (Stroke inset 18.75%) deja el dot
+   visible ≈ 25% del avatar. SUI lo modela como un dot de 25% con anillo blanco
+   (border) + drop shadow `regular-shadow/small`. */
+.sui-avatar__status {
+  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;
+  /* base default = faded (= offline); cada [data-sui-status] lo override. */
+  background: var(--sui-state-faded-base, #7b7b7b);
+  box-shadow: 0 2px 4px 0 rgba(27, 28, 29, 0.0392156863); /* regular-shadow/small (radius 4) */
+}
+
+/* Per-type colors (Figma 245:18721, verificado per-type).
+   offline usa `state/faded/base` #7b7b7b, NO neutral-400. */
+:host([data-sui-status=online]) .sui-avatar__status {
+  background: var(--sui-state-success-base, #1fc16b);
+}
+
+:host([data-sui-status=offline]) .sui-avatar__status {
+  background: var(--sui-state-faded-base, #7b7b7b);
+}
+
+:host([data-sui-status=away]) .sui-avatar__status {
+  background: var(--sui-state-away-base, #f6b51e);
+}
+
+:host([data-sui-status=busy]) .sui-avatar__status {
+  background: var(--sui-state-error-base, #fb3748);
+}
+
+/* ── BottomStatus Company (Figma 245:18721 type=🏢 Company) ──────────────
+   Frame 40% del avatar (más grande que el dot porque lleva un logo dentro,
+   Figma usa BG blanco inset 6.25% + logo inset 12.5%). bg purple por default
+   (matchea el Synergy demo) + img cuando se provee `companyLogoSrc`. */
+.sui-avatar__company {
+  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 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ── TopStatus badge (Figma 245:18697) ──────────────────────────────────
+   Frame 40% del avatar, pegado top-right, sobresaliendo -10% a la derecha
+   (espeja inset [0 -10% 60% 70%] del node 246:7237). El glyph SVG interno
+   ocupa ~55% del badge (centrado dentro del anillo blanco). El bg depende del
+   tipo. `verified` usa una máscara SEAL escalopado (no círculo).
+
+   El drop shadow es el token `regular-shadow/small` (0 2px 4 #1B1C1D0A). */
+.sui-avatar__top-badge {
+  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);
+}
+
+/* Glyph SVG interno: ~55% del badge → escala proporcional con el avatar. */
+.sui-avatar__top-badge-glyph {
+  display: block;
+  width: 58%;
+  height: 58%;
+  color: var(--sui-bg-white-0, #fff);
+}
+
+/* `verified` = SEAL escalopado (node 245:18698), NO círculo. Las ONDAS son
+   REDONDEADAS (curvas Bézier de los paths reales de Figma), NO picos angulares
+   de un clip-path polígono. El span NO dibuja nada propio: el SVG interno
+   (`__seal`) lleva las 3 capas (stroke ring blanco + bg azul + check). El
+   anillo blanco viene del path `stroke`, así que el span no necesita `border`
+   ni `box-shadow` de círculo; el drop-shadow del token se aplica al SVG (sigue
+   la silueta escalopada). */
+.sui-avatar__top-badge--seal {
+  border: none;
+  background: none !important; /* el azul lo dibuja el path bg, no el span */
+  box-shadow: none;
+}
+
+/* SVG compuesto del seal: ocupa todo el badge (que ya es 40% del avatar) y
+   escala proporcional. El drop-shadow regular-shadow/small sigue la forma. */
+.sui-avatar__seal {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  filter: drop-shadow(0 2px 4px rgba(27, 28, 29, 0.0392156863));
+}
+
+/* Ring/borde escalopado = static-white (Figma seal-stroke). */
+.sui-avatar__seal-stroke {
+  fill: var(--sui-bg-white-0, #fff);
+}
+
+/* Fondo escalopado = state/verified/base #47c2ff (Figma seal-bg). */
+.sui-avatar__seal-bg {
+  fill: var(--sui-state-verified-base, #47c2ff);
+}
+
+/* Checkmark = static-white (Figma seal-check). */
+.sui-avatar__seal-check {
+  fill: var(--sui-bg-white-0, #fff);
+}
+
+/* Per-type bg color (canon SUI Figma 245:18697, verificado per-type vía
+   get_variable_defs node-by-node). */
+:host([data-sui-top-badge=verified]) .sui-avatar__top-badge {
+  background: var(--sui-state-verified-base, #47c2ff);
+}
+
+:host([data-sui-top-badge=pin]) .sui-avatar__top-badge {
+  background: var(--sui-state-feature-base, #7d52f4);
+}
+
+:host([data-sui-top-badge=favorite]) .sui-avatar__top-badge {
+  background: var(--sui-state-success-base, #1fc16b);
+}
+
+:host([data-sui-top-badge=add]) .sui-avatar__top-badge {
+  background: var(--sui-state-faded-base, #7b7b7b);
+}
+
+:host([data-sui-top-badge=remove]) .sui-avatar__top-badge {
+  background: var(--sui-state-error-base, #fb3748);
+}
+
+:host([data-sui-top-badge=notification]) .sui-avatar__top-badge {
+  background: var(--sui-state-error-base, #fb3748);
+}
+
+/* `notification` es un dot sólido sin glyph (Figma lo dibuja ~25% del avatar,
+   sin anillo grueso). Reducimos el frame a 25% (igual que el bottom dot). */
+:host([data-sui-top-badge=notification]) .sui-avatar__top-badge {
+  width: 25%;
+  height: 25%;
+  right: 0;
+}