component Skeleton {
  props {
    color: string = "primary"
    label: string = "Loading"
    size: string = "md"
    lines: number = 3
    class: string = ""
  }
  view {
    <div class="wrn-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}" aria-busy="true" data-wrn-owner="Skeleton" data-wrn-part="root" data-wrn-component="Skeleton" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
      <div class="wrn-skeleton-component__head" aria-hidden="true" data-wrn-owner="Skeleton" data-wrn-part="head" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
        <span class="wrn-skeleton-component__avatar" data-wrn-owner="Skeleton" data-wrn-part="avatar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
        <span class="wrn-skeleton-component__heading" data-wrn-owner="Skeleton" data-wrn-part="heading" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
          <span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--title" data-wrn-owner="Skeleton" data-wrn-part="bar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
          <span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--meta" data-wrn-owner="Skeleton" data-wrn-part="bar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
        </span>
      </div>
      <div class="wrn-skeleton-component__body" aria-hidden="true" data-wrn-owner="Skeleton" data-wrn-part="body" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
        {#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line wrn-skeleton-component__bar" data-wrn-owner="Skeleton" data-wrn-part="line" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>{/each}
      </div>
    </div>
  }

  style {
    .wrn-skeleton-component {
      --wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-text) 11%, var(--wrn-color-surface));
      --wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-text) 3%, var(--wrn-color-surface));
      --wrn-skeleton-line: 0.625rem;
      display: grid;
      width: min(100%, 24rem);
      gap: 1rem;
    }
    .wrn-skeleton-component[data-color="primary"] {
      --wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-primary) 17%, var(--wrn-color-surface));
      --wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-primary) 4%, var(--wrn-color-surface));
    }
    .wrn-skeleton-component[data-color="secondary"] {
      --wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-secondary) 17%, var(--wrn-color-surface));
      --wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-secondary) 4%, var(--wrn-color-surface));
    }
    .wrn-skeleton-component[data-size="xs"],
    .wrn-skeleton-component[data-size="sm"] { --wrn-skeleton-line: 0.5rem; gap: 0.75rem; }
    .wrn-skeleton-component[data-size="lg"],
    .wrn-skeleton-component[data-size="xl"] { --wrn-skeleton-line: 0.75rem; gap: 1.25rem; }

    .wrn-skeleton-component__head {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .wrn-skeleton-component__avatar {
      width: calc(var(--wrn-skeleton-line) * 4);
      height: calc(var(--wrn-skeleton-line) * 4);
      flex: none;
      border-radius: 999px;
    }
    .wrn-skeleton-component__heading,
    .wrn-skeleton-component__body {
      display: grid;
      flex: 1;
      min-width: 0;
      gap: calc(var(--wrn-skeleton-line) * 0.8);
    }

    /* Every block shares one shimmer; background-attachment: fixed keeps the
       sweep continuous across blocks instead of restarting per bar. */
    .wrn-skeleton-component__avatar,
    .wrn-skeleton-component__bar {
      display: block;
      background:
        linear-gradient(100deg, transparent 30%, var(--wrn-skeleton-shine) 50%, transparent 70%) 0 0 / 200% 100% fixed,
        var(--wrn-skeleton-base);
      animation: wrn-skeleton-component-shimmer 1.6s ease-in-out infinite;
    }
    .wrn-skeleton-component__bar {
      height: var(--wrn-skeleton-line);
      border-radius: 999px;
    }
    .wrn-skeleton-component__bar--title { width: 55%; height: calc(var(--wrn-skeleton-line) * 1.25); }
    .wrn-skeleton-component__bar--meta { width: 32%; }
    .wrn-skeleton-component__line:last-child:not(:first-child) { width: 64%; }

    @keyframes wrn-skeleton-component-shimmer {
      from { background-position: 150% 0, 0 0; }
      to { background-position: -50% 0, 0 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .wrn-skeleton-component__avatar,
      .wrn-skeleton-component__bar { animation: none; }
    }
  }
}