@editora/ui-core 0.1.8 → 0.1.10

package/dist/avatar.cjs.js

@@ -0,0 +1,365 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./ElementBase-1b301e7f.js"),f=`
+  :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 m(r){if(r==="eager")return"eager";if(r==="lazy"||!r)return"lazy";const a=r.toLowerCase();return a==="true"||a==="1"?"eager":"lazy"}class d extends p.ElementBase{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,b=!n||!this._imgLoaded,h=m(this.getAttribute("loading")),g=this.hasAttribute("status"),u=(this.getAttribute("badge")||"").trim();this._detachImageListeners(),this.setContent(`
+      <style>${f}</style>
+      <div class="avatar" part="base">
+        ${n?`<img src="${o(a)}" alt="${o(i)}" loading="${h}" />`:""}
+        <span class="overlay" part="overlay" aria-hidden="true"></span>
+        <span class="fallback" part="fallback" ${b?"":"hidden"}>
+          <slot>${o(s)}</slot>
+        </span>
+        ${g?'<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",d);exports.UIAvatar=d;