<!-- #region UI.Badge [C:2] [TYPE Component] [SEMANTICS badge,status,label,chip,tag,ui,atom] -->
<!-- @ingroup UI -->
<!-- @BRIEF Compact inline badge/chip for status, severity, and tag labels. -->
<!-- @LAYER UI -->
<!-- @RELATION USED_BY -> [Dashboard.RepositoryGrid] -->
<!-- @RELATION USED_BY -> [TaskRunner] -->
<!-- @RELATION USED_BY -> [ValidationFindingsPanel] -->
<!-- @UX_STATE Default -> Colored pill with text label. -->
<!-- @UX_STATE Dot -> Colored dot + label (for connection/task status). -->
<script lang="ts">
  let {
    variant = "muted" as "success" | "warning" | "destructive" | "info" | "primary" | "muted",
    size = "md" as "sm" | "md",
    dot = false,
    class: className = "",
    children,
  } = $props();

  const variantClasses: Record<string, string> = {
    success:     "bg-success-light text-success",
    warning:     "bg-warning-light text-warning",
    destructive: "bg-destructive-light text-destructive",
    info:        "bg-info-light text-info",
    primary:     "bg-primary-light text-primary",
    muted:       "bg-surface-muted text-text-muted",
  };

  const sizeClasses: Record<string, string> = {
    sm: "px-2 py-0.5",
    md: "px-2.5 py-1",
  };

  const dotColorClasses: Record<string, string> = {
    success:     "bg-success",
    warning:     "bg-warning",
    destructive: "bg-destructive",
    info:        "bg-info",
    primary:     "bg-primary-ring",
    muted:       "bg-text-muted",
  };
</script>

<span class="inline-flex items-center gap-1.5 {className}">
  {#if dot}
    <span class="h-2.5 w-2.5 rounded-full {dotColorClasses[variant] || dotColorClasses.muted}"></span>
  {/if}
  <span class="rounded-full {sizeClasses[size] || sizeClasses.md} text-xs font-medium {variantClasses[variant] || variantClasses.muted}">
    {@render children?.()}
  </span>
</span>
<!-- #endregion UI.Badge -->
