{
  "generatedFrom": "status-badge.contract.json",
  "component": "Status badge",
  "slug": "status-badge",
  "group": "AhaSlides surfaces",
  "tier": "leaf-lit",
  "summary": "A glanceable lifecycle pill for a domain object — draft, published, closed, archived, active, inactive.",
  "install": {
    "package": "@ahaslides-product/design",
    "registry": "https://npm.pkg.github.com",
    "scope": "@ahaslides-product",
    "auth": "Published to GitHub Packages — needs a GitHub token with read:packages. Configure the @ahaslides-product scope in .npmrc before installing.",
    "npmrc": "@ahaslides-product:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages",
    "command": "npm i @ahaslides-product/design",
    "tokenLayer": "import '@ahaslides-product/design/tokens.css';",
    "import": "import '@ahaslides-product/design/aha-status-badge';",
    "element": "aha-status-badge",
    "registers": "aha-status-badge"
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/status-badge/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/status-badge/status-badge.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/status-badge.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/status-badge.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — <aha-status-badge> is a standard custom element that renders on open — React/Vue are thin adapters over the same element. Paste into an .html file and it renders with no build step.",
  "frameworks": {
    "react": {
      "via": "web-component",
      "ref": "aha-status-badge"
    },
    "vue": {
      "via": "web-component",
      "ref": "aha-status-badge"
    },
    "html": {
      "via": "web-component",
      "ref": "aha-status-badge",
      "runnable": "paste-and-run — no build step, renders on open"
    }
  },
  "props": [
    {
      "name": "status",
      "type": "draft | published | closed | archived | active | inactive",
      "default": "draft",
      "desc": "The lifecycle state — drives the pill and dot colour via a CSS-only persistent node"
    }
  ],
  "tokens": [
    "gray-20",
    "gray-25",
    "gray-60",
    "gray-70",
    "text-secondary",
    "text-tertiary",
    "text-positive",
    "text-warning",
    "bg-positive",
    "bg-warning",
    "color-success",
    "color-warning",
    "radius-pill"
  ],
  "spec": [
    {
      "label": "Shape",
      "value": "height 22 · radius pill · dot 6 + label"
    },
    {
      "label": "Draft",
      "value": "neutral #F7F7F7 · dot #B5B5B5"
    },
    {
      "label": "Published",
      "value": "positive #D8FAEF / #13A181 · dot #16C49A"
    },
    {
      "label": "Closed",
      "value": "warning #FFF5F0 / #E65B29 · dot #FF7747"
    },
    {
      "label": "Archived",
      "value": "muted #F3F3F3 / #8A8A8A · dot #8A8A8A"
    },
    {
      "label": "Active",
      "value": "positive #D8FAEF / #13A181 · dot #16C49A"
    },
    {
      "label": "Inactive",
      "value": "neutral #F3F3F3 / #8A8A8A · dot #B5B5B5"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "Status badge",
        "when": "reflecting a value from a known status enum (a survey/presentation/collector's lifecycle state)"
      },
      {
        "what": "Tag",
        "when": "a free-form label, keyword or category chip"
      },
      {
        "what": "Badge",
        "when": "a count or a bare notification dot"
      }
    ],
    "note": "Use only for a value from a real status enum — not free-form labels, counts, or notification dots (those are Tag / Badge). Always keep the text label; the dot colour is decorative and never the sole signal.",
    "dsv3": "COVERED — this is the reusable component form of the status-badges pattern (parts/status-badges.guide.md): dot + text label, colour by state, role=\"status\" + aria-label. The status enum is the one the DS status-badges pattern defines — draft · published · closed · archived, plus the active/inactive lifecycle pair called out in the pattern (SurveyStatus and the active/inactive label). Colours map to the semantic token layer (positive/warning + neutral greys), never inline hex. FOLLOW-UP: a `scheduled` state is NOT defined by the DS status-badges pattern today, so it is intentionally left out (add a translation key + a modifier + a token mapping to the pattern first)."
  },
  "surfaces": [
    "dashboard",
    "editor",
    "settings"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step.\n     <aha-status-badge> is the SAME shared custom element React and Vue consume — here in its\n     native form. Theming comes only from the --aha-* tokens in tokens.css. -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css\">\n<script type=\"module\">\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-status-badge.js';   // registers <aha-status-badge>\n</script>\n\n<div style=\"display:flex; gap:12px; align-items:center; flex-wrap:wrap\">\n  <aha-status-badge status=\"draft\">Draft</aha-status-badge>\n  <aha-status-badge status=\"published\">Published</aha-status-badge>\n  <aha-status-badge status=\"closed\">Closed</aha-status-badge>\n  <aha-status-badge status=\"archived\">Archived</aha-status-badge>\n  <aha-status-badge status=\"active\">Active</aha-status-badge>\n  <aha-status-badge status=\"inactive\">Inactive</aha-status-badge>\n</div>\n",
    "react": "import '@ahaslides-product/design/aha-status-badge';   // registers <aha-status-badge>\nimport { t } from 'i18next';   // label comes from i18n, never a hardcoded string\n\n// Attributes only — no events — so React 18/19 can render the element directly.\nfunction AhaStatusBadge({ status }) {\n  return <aha-status-badge status={status}>{t(`survey_status.${status}`)}</aha-status-badge>;\n}\n\n// usage\n<AhaStatusBadge status={survey.status} />\n",
    "vue": "// main.ts — register the element + mark aha-* as custom elements\nimport '@ahaslides-product/design/aha-status-badge';\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');\n\n// Component.vue\n<script setup>\nimport { useI18n } from 'vue-i18n';   // label comes from i18n, never a hardcoded string\nconst { t } = useI18n();\ndefineProps({ status: String });\n</script>\n\n<template>\n  <aha-status-badge :status=\"status\">{{ t(`survey_status.${status}`) }}</aha-status-badge>\n</template>\n"
  }
}