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}">
      {#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line"></span>{/each}
    </div>
  }

  style {
    .wrn-skeleton-component {
      --wrn-skeleton-highlight: var(--wrn-color-border);
      display: grid;
      width: min(100%, 24rem);
      gap: 0.55rem;
    }

    .wrn-skeleton-component[data-size="xs"] { gap: 0.35rem; }
    .wrn-skeleton-component[data-size="lg"],
    .wrn-skeleton-component[data-size="xl"] { gap: 0.75rem; }
    .wrn-skeleton-component[data-color="secondary"] { --wrn-skeleton-highlight: var(--wrn-color-secondary-soft); }
    .wrn-skeleton-component[data-color="primary"] { --wrn-skeleton-highlight: var(--wrn-color-primary-soft); }

    .wrn-skeleton-component__line {
      height: 0.8rem;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--wrn-color-surface-2), var(--wrn-skeleton-highlight), var(--wrn-color-surface-2));
      background-size: 200% 100%;
      animation: wrn-skeleton-component-shimmer 1.4s infinite;
    }

    .wrn-skeleton-component__line:last-child { width: 68%; }

    @keyframes wrn-skeleton-component-shimmer {
      from { background-position: 200% 0; }
      to { background-position: -200% 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .wrn-skeleton-component__line { animation: none; }
    }
  }
}