Status badge

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-status-badge> is the SAME shared custom element React and Vue consume — here in its
     native form. Theming comes only from the --aha-* tokens in tokens.css. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-status-badge.js';   // registers <aha-status-badge>
</script>

<div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap">
  <aha-status-badge status="draft">Draft</aha-status-badge>
  <aha-status-badge status="published">Published</aha-status-badge>
  <aha-status-badge status="closed">Closed</aha-status-badge>
  <aha-status-badge status="archived">Archived</aha-status-badge>
  <aha-status-badge status="active">Active</aha-status-badge>
  <aha-status-badge status="inactive">Inactive</aha-status-badge>
</div>

import '@ahaslides-product/design/aha-status-badge';   // registers <aha-status-badge>
import { t } from 'i18next';   // label comes from i18n, never a hardcoded string

// Attributes only — no events — so React 18/19 can render the element directly.
function AhaStatusBadge({ status }) {
  return <aha-status-badge status={status}>{t(`survey_status.${status}`)}</aha-status-badge>;
}

// usage
<AhaStatusBadge status={survey.status} />

// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/aha-status-badge';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<script setup>
import { useI18n } from 'vue-i18n';   // label comes from i18n, never a hardcoded string
const { t } = useI18n();
defineProps({ status: String });
</script>

<template>
  <aha-status-badge :status="status">{{ t(`survey_status.${status}`) }}</aha-status-badge>
</template>