component Avatar {
  outputs {
    load(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    error(payload: { error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)
    click(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
  }

  props {
src: string = ""
    alt: string = ""
    initials: string = ""
    size: string = "md"
    color: string = "primary"
    variant: string = "solid"
    shape: string = "circle"

    status: string = ""
    statusLabel: string = ""
    statusPosition: string = "bottom"

    badge: string = ""
    badgeIcon: string = ""
    badgeLabel: string = ""

    tooltip: string = ""
    name: string = ""
    description: string = ""
    loading: string = "lazy"
    class: string = ""
  }

  view {
    <span
      {...attrs}
      class="wrn-component wrn-next--avatar {description ? 'wrn-next--avatar-media' : ''} {class}"
      data-wrn-avatar
    >
      <span
        class="wrn-next__avatar-wrap"
        data-shape="{shape}"
        data-size="{size}"
        data-color="{color}"
        data-variant="{variant}"
        data-status-position="{statusPosition}"
        tabindex="{tooltip ? '0' : '-1'}"
        aria-label="{tooltip || name || alt || initials || 'Avatar'}"
      >
        <span class="wrn-next__avatar">
          {#if src}
            <img src="{src}" alt="{alt || name}" loading="{loading}" />
          {:else if initials}
            <span class="wrn-next__avatar-initials" aria-hidden="true">{initials}</span>
          {:else}
            <span class="wrn-next__avatar-placeholder icon-[lucide--user-round]" aria-hidden="true"></span>
          {/if}
        </span>

        {#if status}
          <span
            class="wrn-next__avatar-status"
            data-status="{status}"
            title="{statusLabel || status}"
            aria-label="{statusLabel || status}"
          ></span>
        {/if}

        {#if badgeIcon}
          <span class="wrn-next__avatar-badge" aria-label="{badgeLabel || 'Linked account'}">
            <span class="{badgeIcon}" aria-hidden="true"></span>
          </span>
        {:else if badge}
          <span class="wrn-next__avatar-badge wrn-next__avatar-badge--text" aria-label="{badgeLabel || badge}">
            {badge}
          </span>
        {/if}

        {#if tooltip}
          <span class="wrn-next__avatar-tooltip" role="tooltip">{tooltip}</span>
        {/if}
      </span>

      {#if description}
        <span class="wrn-next__avatar-copy">
          <strong>{name || alt || initials}</strong>
          <span>{description}</span>
        </span>
      {/if}
    </span>
  }

  style {
    /* --- Avatar -------------------------------------------------------------- */
    .wrn-next--avatar {
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      align-items: center;
    }

    .wrn-next--avatar-media {
      gap: 0.8rem;
    }

    .wrn-next__avatar-wrap {
      --wrn-avatar-size: 3rem;
      --wrn-avatar-color: var(--wrn-color-primary);
      position: relative;
      display: inline-grid;
      width: var(--wrn-avatar-size);
      height: var(--wrn-avatar-size);
      flex: none;
      place-items: center;
      border-radius: 999px;
      outline: none;
    }

    .wrn-next__avatar-wrap[data-size="xs"] {
      --wrn-avatar-size: 1.75rem;
    }

    .wrn-next__avatar-wrap[data-size="sm"] {
      --wrn-avatar-size: 2.25rem;
    }

    .wrn-next__avatar-wrap[data-size="md"],
    .wrn-next__avatar-wrap[data-size="default"] {
      --wrn-avatar-size: 3rem;
    }

    .wrn-next__avatar-wrap[data-size="lg"] {
      --wrn-avatar-size: 4rem;
    }

    .wrn-next__avatar-wrap[data-size="xl"] {
      --wrn-avatar-size: 5rem;
    }

    .wrn-next__avatar-wrap[data-color="secondary"] {
      --wrn-avatar-color: #737373;
    }

    .wrn-next__avatar-wrap[data-color="success"] {
      --wrn-avatar-color: var(--wrn-color-success);
    }

    .wrn-next__avatar-wrap[data-color="info"] {
      --wrn-avatar-color: var(--wrn-color-info);
    }

    .wrn-next__avatar-wrap[data-color="danger"] {
      --wrn-avatar-color: var(--wrn-color-danger);
    }

    .wrn-next__avatar-wrap[data-color="warning"] {
      --wrn-avatar-color: var(--wrn-color-warning);
    }

    .wrn-next__avatar-wrap[data-color="light"] {
      --wrn-avatar-color: #f4f4f5;
    }

    .wrn-next__avatar-wrap[data-color="dark"] {
      --wrn-avatar-color: #27272a;
    }

    .wrn-next__avatar {
      display: grid;
      width: 100%;
      height: 100%;
      overflow: hidden;
      place-items: center;
      color: white;
      border: 1px solid color-mix(in srgb, var(--wrn-avatar-color) 58%, var(--wrn-color-border));
      border-radius: inherit;
      background: var(--wrn-avatar-color);
      box-shadow:
        0 0 0 2px var(--wrn-color-bg),
        0 5px 14px rgb(0 0 0 / 0.16);
    }

    .wrn-next__avatar-wrap[data-shape="rounded"] {
      border-radius: calc(var(--wrn-radius-sm, 0.5rem) * 0.72);
    }

    .wrn-next__avatar-wrap[data-shape="square"] {
      border-radius: 0;
    }

    .wrn-next__avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .wrn-next__avatar-initials {
      font-size: calc(var(--wrn-avatar-size) * 0.32);
      font-weight: 750;
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .wrn-next__avatar-placeholder {
      width: 54%;
      height: 54%;
      color: currentColor;
      opacity: 0.72;
    }

    .wrn-next__avatar-wrap[data-variant="soft"] .wrn-next__avatar {
      color: var(--wrn-avatar-color);
      border-color: transparent;
      background: color-mix(in srgb, var(--wrn-avatar-color) 15%, var(--wrn-color-surface));
      box-shadow: none;
    }

    .wrn-next__avatar-wrap[data-variant="outline"] .wrn-next__avatar {
      color: var(--wrn-avatar-color);
      border-color: var(--wrn-avatar-color);
      background: transparent;
      box-shadow: none;
    }

    .wrn-next__avatar-wrap[data-variant="white"] .wrn-next__avatar {
      color: var(--wrn-color-text);
      border-color: var(--wrn-color-border);
      background: var(--wrn-color-surface);
      box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
    }

    .wrn-next__avatar-status {
      position: absolute;
      right: -0.04rem;
      bottom: -0.04rem;
      z-index: 2;
      width: max(0.58rem, calc(var(--wrn-avatar-size) * 0.24));
      height: max(0.58rem, calc(var(--wrn-avatar-size) * 0.24));
      border: 2px solid var(--wrn-color-bg);
      border-radius: 999px;
      background: var(--wrn-color-muted);
    }

    .wrn-next__avatar-wrap[data-status-position="top"] .wrn-next__avatar-status {
      top: -0.04rem;
      bottom: auto;
    }

    .wrn-next__avatar-status[data-status="online"],
    .wrn-next__avatar-status[data-status="success"] {
      background: #14cba8;
    }

    .wrn-next__avatar-status[data-status="busy"],
    .wrn-next__avatar-status[data-status="danger"] {
      background: #fb5b68;
    }

    .wrn-next__avatar-status[data-status="away"],
    .wrn-next__avatar-status[data-status="warning"] {
      background: #ffc400;
    }

    .wrn-next__avatar-badge {
      position: absolute;
      right: -0.25rem;
      bottom: -0.25rem;
      z-index: 3;
      display: grid;
      width: max(1rem, calc(var(--wrn-avatar-size) * 0.42));
      height: max(1rem, calc(var(--wrn-avatar-size) * 0.42));
      place-items: center;
      color: white;
      border: 2px solid var(--wrn-color-bg);
      border-radius: 999px;
      background: #27272a;
      box-shadow: 0 4px 10px rgb(0 0 0 / 0.22);
    }

    .wrn-next__avatar-badge > span {
      width: 62%;
      height: 62%;
    }

    .wrn-next__avatar-badge--text {
      font-size: calc(var(--wrn-avatar-size) * 0.18);
      font-weight: 800;
    }

    .wrn-next__avatar-tooltip {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 0.65rem);
      z-index: 20;
      width: max-content;
      max-width: 15rem;
      padding: 0.4rem 0.6rem;
      color: var(--wrn-color-bg);
      border-radius: 0.4rem;
      background: var(--wrn-color-text);
      box-shadow: 0 8px 22px rgb(0 0 0 / 0.2);
      font-size: 0.75rem;
      font-weight: 650;
      line-height: 1.25;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, 0.25rem);
      transition:
        opacity var(--wrn-motion-fast) var(--wrn-ease-standard),
        transform var(--wrn-motion-fast) var(--wrn-ease-standard);
    }

    .wrn-next__avatar-tooltip::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      border: 0.3rem solid transparent;
      border-top-color: var(--wrn-color-text);
      transform: translateX(-50%);
    }

    .wrn-next__avatar-wrap:hover .wrn-next__avatar-tooltip,
    .wrn-next__avatar-wrap:focus-visible .wrn-next__avatar-tooltip {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .wrn-next__avatar-wrap:focus-visible {
      outline: 2px solid var(--wrn-avatar-color);
      outline-offset: 4px;
    }

    .wrn-next__avatar-copy {
      display: grid;
      min-width: 0;
      gap: 0.15rem;
    }

    .wrn-next__avatar-copy strong {
      color: var(--wrn-color-text);
      font-size: 0.9rem;
    }

    .wrn-next__avatar-copy > span {
      overflow: hidden;
      color: var(--wrn-color-muted);
      font-size: 0.78rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Shared component foundation. */

        .wrn-component {
          --wrn-component-color: var(--wrn-color-primary);
          --wrn-component-scale: 1;
          margin: 0;
          color: var(--wrn-color-text);
          font-family: var(--wrn-font-sans, inherit);
        }

        .wrn-component--color-primary {
          --wrn-component-color: var(--wrn-color-primary);
        }

        .wrn-component--color-secondary {
          --wrn-component-color: var(--wrn-color-secondary);
        }

        .wrn-component--color-success {
          --wrn-component-color: var(--wrn-color-success);
        }

        .wrn-component--color-warning {
          --wrn-component-color: var(--wrn-color-warning);
        }

        .wrn-component--color-danger {
          --wrn-component-color: var(--wrn-color-danger);
        }

        .wrn-component--color-info {
          --wrn-component-color: var(--wrn-color-info);
        }

        .wrn-component--size-xs {
          --wrn-component-scale: 0.78;
        }

        .wrn-component--size-sm {
          --wrn-component-scale: 0.88;
        }

        .wrn-component--size-default,
        .wrn-component--size-md {
          --wrn-component-scale: 1;
        }

        .wrn-component--size-lg {
          --wrn-component-scale: 1.14;
        }

        .wrn-component--size-xl {
          --wrn-component-scale: 1.28;
        }

        .wrn-component:not(.wrn-btn) {
          font-size: calc(1em * var(--wrn-component-scale));
        }

        .wrn-component :is(a, button, input, select, textarea):focus-visible {
          outline-color: var(--wrn-component-color);
        }

        .wrn-component p {
          margin: 0;
          color: var(--wrn-color-muted);
          line-height: 1.6;
        }
  }
}