component Skeleton {
  props {
    color: string = "primary"
    label: string = "Loading"
    size: string = "md"
    lines: number = 3
    class: string = ""
  }
  view {
    <div class="wire-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}">
      {#each Array(lines).fill(0) as line}<span class="wire-skeleton-component__line"></span>{/each}
    </div>
  }

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

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

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

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

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

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