Status Pill.

---
/**
 * StatusPill: a tinted state label with a leading dot.
 *
 * Ported from Beautiful UI `components/atoms/StatusPill.tsx`
 * (MIT, © 2026 Shane Levine). Tones are modifier classes
 * (`.vs-status-pill--green`). The dot is decorative, so the text must carry
 * the state on its own.
 *
 * @example
 * <StatusPill tone="green">Published</StatusPill>
 */
import type { HTMLAttributes } from "astro/types";

type Tone = "green" | "orange" | "red" | "accent" | "neutral";

type Props = HTMLAttributes<"span"> & {
  tone?: Tone;
  /** Show the leading dot. */
  dot?: boolean;
};

const { tone = "neutral", dot = true, class: className, ...rest } = Astro.props;
---

<span class:list={["vs-status-pill", `vs-status-pill--${tone}`, className]} {...rest}>
  {dot && <span class="vs-status-pill__dot" aria-hidden="true"></span>}
  <slot />
</span>

<style>
  .vs-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--vs-radius-pill);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }
  .vs-status-pill__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: var(--vs-radius-pill);
    background: currentColor;
  }

  .vs-status-pill--green {
    background: var(--vs-green-tint);
    color: var(--vs-green);
  }
  .vs-status-pill--orange {
    background: var(--vs-orange-tint);
    color: var(--vs-orange);
  }
  .vs-status-pill--red {
    background: var(--vs-red-tint);
    color: var(--vs-red);
  }
  .vs-status-pill--accent {
    background: var(--vs-accent-tint);
    color: var(--vs-accent-ink);
  }
  .vs-status-pill--accent .vs-status-pill__dot {
    background: var(--vs-accent);
  }
  .vs-status-pill--neutral {
    background: var(--vs-inset);
    color: var(--vs-ink-2);
  }
  .vs-status-pill--neutral .vs-status-pill__dot {
    background: var(--vs-ink-3);
  }

  @media (forced-colors: active) {
    .vs-status-pill {
      outline: 1px solid CanvasText;
    }
    .vs-status-pill__dot {
      background: CanvasText;
    }
  }
</style>