@editora/ui-core 0.1.9 → 0.1.12

package/dist/avatar.esm.js

@@ -0,0 +1,513 @@
+import { E as g } from "./ElementBase-909688f3.mjs";
+const p = `
+  :host {
+    display: inline-block;
+    --ui-avatar-size: var(--base-avatar-size-md, 40px);
+    --ui-avatar-radius: var(--base-avatar-radius, 999px);
+    --ui-avatar-bg-base: var(--base-avatar-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-avatar-bg: var(--ui-avatar-bg-base);
+    --ui-avatar-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 78%, var(--ui-color-text, #0f172a) 22%);
+    --ui-avatar-muted: var(--ui-color-muted, #64748b);
+    --ui-avatar-border: var(--base-avatar-border, 1px solid color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.14)) 82%, transparent));
+    --ui-avatar-ring: var(--base-avatar-shadow, 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.12));
+    --ui-avatar-font-size: var(--ui-default-font-size, 14px);
+    --ui-avatar-font-weight: 650;
+    --ui-avatar-status-size: 11px;
+    --ui-avatar-status-border: var(--base-avatar-status-border, 2px solid var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-avatar-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    --ui-avatar-accent: var(--ui-color-primary, #2563eb);
+    --ui-avatar-badge-bg: color-mix(in srgb, var(--ui-avatar-accent) 14%, var(--ui-color-surface, #ffffff));
+    --ui-avatar-badge-color: color-mix(in srgb, var(--ui-avatar-accent) 82%, var(--ui-color-text, #0f172a) 18%);
+    --ui-avatar-badge-radius: var(--base-avatar-badge-radius, 999px);
+    color-scheme: light dark;
+  }
+
+  :host([size='1']),
+  :host([size='sm']) {
+    --ui-avatar-size: var(--base-avatar-size-sm, 30px);
+    --ui-avatar-font-size: 12px;
+    --ui-avatar-status-size: 10px;
+  }
+
+  :host([size='2']),
+  :host([size='md']) {
+    --ui-avatar-size: var(--base-avatar-size-md, 40px);
+  }
+
+  :host([size='3']),
+  :host([size='lg']) {
+    --ui-avatar-size: var(--base-avatar-size-lg, 52px);
+    --ui-avatar-font-size: 16px;
+    --ui-avatar-status-size: 13px;
+  }
+
+  :host([tone="info"]) {
+    --ui-avatar-accent: var(--ui-color-primary, #2563eb);
+  }
+
+  :host([tone="success"]) {
+    --ui-avatar-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-avatar-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-avatar-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([variant="surface"]) {
+    --ui-avatar-bg: var(--ui-avatar-bg-base);
+    --ui-avatar-color: color-mix(in srgb, var(--ui-avatar-accent) 78%, var(--ui-color-text, #0f172a) 22%);
+  }
+
+  :host([variant="soft"]) {
+    --ui-avatar-bg: linear-gradient(
+      145deg,
+      color-mix(in srgb, var(--ui-avatar-bg-base) 92%, var(--ui-avatar-accent) 8%),
+      color-mix(in srgb, var(--ui-color-surface-alt, #f8fafc) 62%, var(--ui-avatar-accent) 12%)
+    );
+  }
+
+  :host([variant="solid"]) {
+    --ui-avatar-bg: var(--ui-avatar-accent);
+    --ui-avatar-color: #ffffff;
+  }
+
+  :host([variant="outline"]) {
+    --ui-avatar-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 88%, transparent);
+    --ui-avatar-border: 1px solid color-mix(in srgb, var(--ui-avatar-accent) 45%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
+    --ui-avatar-color: color-mix(in srgb, var(--ui-avatar-accent) 82%, var(--ui-color-text, #0f172a) 18%);
+    --ui-avatar-ring: none;
+  }
+
+  :host([elevation="none"]) {
+    --ui-avatar-ring: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-avatar-ring: var(--base-avatar-shadow, 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.12));
+  }
+
+  :host([elevation="high"]) {
+    --ui-avatar-ring: 0 2px 6px rgba(15, 23, 42, 0.08), 0 18px 34px rgba(15, 23, 42, 0.18);
+  }
+
+  .avatar {
+    position: relative;
+    box-sizing: border-box;
+    width: var(--ui-avatar-size);
+    height: var(--ui-avatar-size);
+    border-radius: var(--ui-avatar-radius);
+    border: var(--ui-avatar-border);
+    background: var(--ui-avatar-bg);
+    color: var(--ui-avatar-color);
+    box-shadow: var(--ui-avatar-ring);
+    overflow: visible;
+    user-select: none;
+    display: grid;
+    place-items: center;
+    transition: border-color var(--ui-avatar-transition), box-shadow var(--ui-avatar-transition), transform var(--ui-avatar-transition);
+  }
+
+  .avatar::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background:
+      radial-gradient(95% 70% at 100% 0%, color-mix(in srgb, var(--ui-avatar-accent) 18%, transparent), transparent 58%),
+      linear-gradient(180deg, color-mix(in srgb, #ffffff 34%, transparent), transparent 32%);
+    border-radius: var(--ui-avatar-radius);
+  }
+
+  :host([ring]) .avatar {
+    --ui-avatar-ring: 0 0 0 3px color-mix(in srgb, var(--ui-avatar-accent) 24%, transparent), 0 10px 24px color-mix(in srgb, var(--ui-avatar-accent) 20%, rgba(15, 23, 42, 0.2));
+  }
+
+  :host([interactive]) .avatar {
+    cursor: pointer;
+  }
+
+  :host([interactive]):focus-visible {
+    outline: none;
+  }
+
+  :host([interactive]):focus-visible .avatar {
+    border-color: color-mix(in srgb, var(--ui-avatar-accent) 52%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-avatar-accent) 26%, transparent),
+      0 10px 26px color-mix(in srgb, var(--ui-avatar-accent) 20%, rgba(15, 23, 42, 0.18));
+  }
+
+  :host([interactive]):hover .avatar {
+    transform: translateY(-1px);
+    border-color: color-mix(in srgb, var(--ui-avatar-accent) 32%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
+    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 16px 30px rgba(15, 23, 42, 0.16);
+  }
+
+  :host([interactive]:active:not([disabled])) .avatar {
+    transform: translateY(0) scale(0.985);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 18px rgba(15, 23, 42, 0.14);
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([disabled]) .avatar {
+    opacity: 0.58;
+    filter: saturate(0.78);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+
+  :host([state="loading"]) .avatar {
+    border-color: color-mix(in srgb, var(--ui-avatar-accent) 46%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
+  }
+
+  :host([state="loading"]) .avatar::after {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    border-radius: var(--ui-avatar-radius);
+    border: 2px solid color-mix(in srgb, var(--ui-avatar-accent) 16%, transparent);
+    border-top-color: color-mix(in srgb, var(--ui-avatar-accent) 86%, #0f172a);
+    animation: ui-avatar-spin 900ms linear infinite;
+    pointer-events: none;
+  }
+
+  :host([state="loading"]) img,
+  :host([state="loading"]) .fallback,
+  :host([state="loading"]) .overlay,
+  :host([state="loading"]) .status,
+  :host([state="loading"]) .badge {
+    opacity: 0.52;
+  }
+
+  :host([state="error"]) {
+    --ui-avatar-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([state="error"]) .avatar {
+    border-color: color-mix(in srgb, var(--ui-avatar-accent) 44%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 18%, transparent), 0 12px 24px rgba(15, 23, 42, 0.12);
+  }
+
+  :host([state="success"]) {
+    --ui-avatar-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([state="success"]) .avatar {
+    border-color: color-mix(in srgb, var(--ui-avatar-accent) 46%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 20%, transparent), 0 12px 24px rgba(15, 23, 42, 0.12);
+  }
+
+  :host([shape="rounded"]) .avatar {
+    --ui-avatar-radius: 12px;
+  }
+
+  :host([shape="square"]) .avatar {
+    --ui-avatar-radius: 8px;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    border-radius: var(--ui-avatar-radius);
+  }
+
+  .overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-avatar-accent) 10%, transparent);
+    border-radius: var(--ui-avatar-radius);
+  }
+
+  .fallback {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    background: var(--ui-avatar-bg);
+    color: var(--ui-avatar-color);
+    font-size: var(--ui-avatar-font-size);
+    font-weight: var(--ui-avatar-font-weight);
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    border-radius: var(--ui-avatar-radius);
+  }
+
+  .fallback[hidden] {
+    display: none;
+  }
+
+  .status {
+    position: absolute;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    transform: translate(12%, 12%);
+    width: var(--ui-avatar-status-size);
+    height: var(--ui-avatar-status-size);
+    border-radius: 50%;
+    border: var(--ui-avatar-status-border);
+    background: var(--ui-avatar-status-color, var(--ui-color-success, #16a34a));
+    box-sizing: border-box;
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-status-color, #16a34a) 28%, transparent), 0 0 0 1px color-mix(in srgb, #000000 10%, transparent);
+  }
+
+  :host([status="online"]) .status::after {
+    content: '';
+    position: absolute;
+    inset: -4px;
+    border-radius: 50%;
+    border: 1px solid color-mix(in srgb, var(--ui-avatar-status-color, #16a34a) 34%, transparent);
+    opacity: 0.64;
+  }
+
+  :host([status="offline"]) .status {
+    --ui-avatar-status-color: var(--ui-color-muted, #94a3b8);
+  }
+
+  :host([status="busy"]) .status {
+    --ui-avatar-status-color: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([status="away"]) .status {
+    --ui-avatar-status-color: var(--ui-color-warning, #f59e0b);
+  }
+
+  .badge {
+    position: absolute;
+    inset-inline-end: -4px;
+    inset-block-start: -4px;
+    min-width: 16px;
+    height: 16px;
+    border-radius: var(--ui-avatar-badge-radius);
+    padding: 0 4px;
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 16px;
+    text-align: center;
+    background: var(--ui-avatar-badge-bg);
+    color: var(--ui-avatar-badge-color);
+    border: 1px solid color-mix(in srgb, var(--ui-avatar-accent) 28%, transparent);
+    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
+    pointer-events: none;
+  }
+
+  .badge[hidden] {
+    display: none;
+  }
+
+  :host([headless]) .avatar {
+    display: none;
+  }
+
+  @keyframes ui-avatar-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .avatar,
+    .status {
+      transition: none !important;
+    }
+    :host([state="loading"]) .avatar::after {
+      animation: none;
+    }
+    :host([status="online"]) .status::after {
+      display: none;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-avatar-border: 2px solid currentColor;
+      --ui-avatar-ring: none;
+      --ui-avatar-status-border: 2px solid Canvas;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-avatar-bg: Canvas;
+      --ui-avatar-color: CanvasText;
+      --ui-avatar-border: 1px solid CanvasText;
+      --ui-avatar-status-border: 1px solid Canvas;
+    }
+    .status {
+      --ui-avatar-status-color: Highlight;
+    }
+    .badge {
+      background: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+      box-shadow: none;
+    }
+  }
+`;
+function o(r) {
+  return String(r).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function l(r) {
+  const a = r.trim().split(/\s+/).filter(Boolean);
+  return a.length === 0 ? "?" : a.length === 1 ? a[0].slice(0, 2).toUpperCase() : `${a[0][0] || ""}${a[1][0] || ""}`.toUpperCase();
+}
+function v(r) {
+  if (!r)
+    return "";
+  const a = r.trim().toLowerCase();
+  return a ? /^\d+(\.\d+)?$/.test(a) ? `${a}px` : a === "xs" ? "24px" : a === "sm" ? "30px" : a === "md" ? "36px" : a === "lg" ? "44px" : a === "xl" ? "56px" : a === "2xl" ? "64px" : r : "";
+}
+function c(r) {
+  if (!r)
+    return "";
+  const a = r.trim().toLowerCase();
+  return a ? a === "full" || a === "pill" || a === "circle" ? "999px" : /^\d+(\.\d+)?$/.test(a) ? `${a}px` : r : "";
+}
+function f(r) {
+  if (r === "eager")
+    return "eager";
+  if (r === "lazy" || !r)
+    return "lazy";
+  const a = r.toLowerCase();
+  return a === "true" || a === "1" ? "eager" : "lazy";
+}
+class m extends g {
+  constructor() {
+    super(), this._img = null, this._imgLoaded = !1, this._imgFailed = !1, this._managedRole = !1, this._managedTabIndex = !1, this._managedAriaDisabled = !1, this._managedAriaBusy = !1, this._onImageLoad = this._onImageLoad.bind(this), this._onImageError = this._onImageError.bind(this), this._onInteractiveKeyDown = this._onInteractiveKeyDown.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "src",
+      "alt",
+      "initials",
+      "size",
+      "bg",
+      "color",
+      "radius",
+      "fontweight",
+      "shape",
+      "tone",
+      "variant",
+      "status",
+      "badge",
+      "ring",
+      "interactive",
+      "disabled",
+      "state",
+      "loading",
+      "headless",
+      "elevation"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || (this.setAttribute("role", "img"), this._managedRole = !0), this.addEventListener("keydown", this._onInteractiveKeyDown), this._syncInteractiveA11y(), this._syncBusyState();
+    const a = v(this.getAttribute("size"));
+    a && this.style.setProperty("--ui-avatar-size", a);
+    const i = c(this.getAttribute("radius"));
+    i && this.style.setProperty("--ui-avatar-radius", i);
+    const t = this.getAttribute("bg");
+    t && this.style.setProperty("--ui-avatar-bg", t);
+    const e = this.getAttribute("color");
+    e && this.style.setProperty("--ui-avatar-color", e);
+    const s = this.getAttribute("fontweight");
+    s && this.style.setProperty("--ui-avatar-font-weight", s);
+  }
+  attributeChangedCallback(a, i, t) {
+    if (i !== t) {
+      if (a === "src" && i !== t && (this._imgLoaded = !1, this._imgFailed = !1), (a === "interactive" || a === "disabled") && this._syncInteractiveA11y(), a === "state" && this._syncBusyState(), a === "size") {
+        const e = v(t);
+        e ? this.style.setProperty("--ui-avatar-size", e) : this.style.removeProperty("--ui-avatar-size");
+      }
+      if (a === "bg" && (t ? this.style.setProperty("--ui-avatar-bg", t) : this.style.removeProperty("--ui-avatar-bg")), a === "color" && (t ? this.style.setProperty("--ui-avatar-color", t) : this.style.removeProperty("--ui-avatar-color")), a === "radius") {
+        const e = c(t);
+        e ? this.style.setProperty("--ui-avatar-radius", e) : this.style.removeProperty("--ui-avatar-radius");
+      }
+      a === "fontweight" && (t ? this.style.setProperty("--ui-avatar-font-weight", t) : this.style.removeProperty("--ui-avatar-font-weight")), this.isConnected && this.requestRender();
+    }
+  }
+  disconnectedCallback() {
+    this._detachImageListeners(), this.removeEventListener("keydown", this._onInteractiveKeyDown), super.disconnectedCallback();
+  }
+  _syncInteractiveA11y() {
+    const a = this.hasAttribute("interactive"), i = this.hasAttribute("disabled");
+    if (a) {
+      (this._managedRole || this.getAttribute("role") === "img" || !this.hasAttribute("role")) && (this.setAttribute("role", "button"), this._managedRole = !0), this.hasAttribute("tabindex") ? this._managedTabIndex && this.setAttribute("tabindex", i ? "-1" : "0") : (this.setAttribute("tabindex", i ? "-1" : "0"), this._managedTabIndex = !0), (!this.hasAttribute("aria-disabled") || this._managedAriaDisabled) && (this.setAttribute("aria-disabled", i ? "true" : "false"), this._managedAriaDisabled = !0);
+      return;
+    }
+    this._managedRole && this.setAttribute("role", "img"), this._managedTabIndex && (this.removeAttribute("tabindex"), this._managedTabIndex = !1), this._managedAriaDisabled && (this.removeAttribute("aria-disabled"), this._managedAriaDisabled = !1);
+  }
+  _syncBusyState() {
+    if (this.getAttribute("state") === "loading") {
+      (!this.hasAttribute("aria-busy") || this._managedAriaBusy) && (this.setAttribute("aria-busy", "true"), this._managedAriaBusy = !0);
+      return;
+    }
+    this._managedAriaBusy && (this.removeAttribute("aria-busy"), this._managedAriaBusy = !1);
+  }
+  _onInteractiveKeyDown(a) {
+    !this.hasAttribute("interactive") || this.hasAttribute("disabled") || a.key !== "Enter" && a.key !== " " || (a.preventDefault(), this.click());
+  }
+  _onImageLoad() {
+    if (this._imgLoaded && !this._imgFailed)
+      return;
+    this._imgLoaded = !0, this._imgFailed = !1, this.requestRender();
+    const a = { src: this.getAttribute("src") || "" };
+    this.dispatchEvent(new CustomEvent("avatar-load", { detail: a, bubbles: !0 })), this.dispatchEvent(new CustomEvent("load", { detail: a, bubbles: !0 }));
+  }
+  _onImageError() {
+    if (this._imgFailed)
+      return;
+    this._imgLoaded = !1, this._imgFailed = !0, this.requestRender();
+    const a = { src: this.getAttribute("src") || "" };
+    this.dispatchEvent(new CustomEvent("avatar-error", { detail: a, bubbles: !0 })), this.dispatchEvent(new CustomEvent("error", { detail: a, bubbles: !0 }));
+  }
+  _detachImageListeners() {
+    this._img && (this._img.removeEventListener("load", this._onImageLoad), this._img.removeEventListener("error", this._onImageError), this._img = null);
+  }
+  render() {
+    this._syncBusyState();
+    const a = this.getAttribute("src") || "", i = this.getAttribute("alt") || "", t = this.getAttribute("initials") || "", e = (this.textContent || "").trim(), s = t.trim() ? t.trim().slice(0, 2).toUpperCase() : i.trim() ? l(i) : e ? l(e) : "?";
+    this.hasAttribute("aria-label") || this.setAttribute("aria-label", i.trim() || s);
+    const n = !!a && !this._imgFailed, d = !n || !this._imgLoaded, b = f(this.getAttribute("loading")), h = this.hasAttribute("status"), u = (this.getAttribute("badge") || "").trim();
+    this._detachImageListeners(), this.setContent(`
+      <style>${p}</style>
+      <div class="avatar" part="base">
+        ${n ? `<img src="${o(a)}" alt="${o(i)}" loading="${b}" />` : ""}
+        <span class="overlay" part="overlay" aria-hidden="true"></span>
+        <span class="fallback" part="fallback" ${d ? "" : "hidden"}>
+          <slot>${o(s)}</slot>
+        </span>
+        ${h ? '<span class="status" part="status" aria-hidden="true"></span>' : ""}
+        <span class="badge" part="badge" ${u ? "" : "hidden"}>${o(u)}</span>
+      </div>
+    `), this._img = this.root.querySelector("img"), this._img && (this._img.addEventListener("load", this._onImageLoad), this._img.addEventListener("error", this._onImageError), this._img.complete && (this._img.naturalWidth > 0 ? this._onImageLoad() : this._onImageError()));
+  }
+  shouldRenderOnAttributeChange(a, i, t) {
+    return i === t ? !1 : ![
+      "size",
+      "bg",
+      "color",
+      "radius",
+      "fontweight",
+      "shape",
+      "tone",
+      "variant",
+      "ring",
+      "interactive",
+      "disabled",
+      "elevation"
+    ].includes(a);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-avatar") && customElements.define("ui-avatar", m);
+export {
+  m as UIAvatar
+};