Progress

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-progress> 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.
     type: line (default) | circle · size: default | small · steps: N (segmented line) ·
     status: default | active | success | warning | exception · show-info="false" hides the label. -->
<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/icons.js';       // <aha-icon> for the status glyph
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-progress.js'; // registers <aha-progress>
</script>

<div style="display:flex; flex-direction:column; gap:16px; max-width:320px">
  <aha-progress percent="30"></aha-progress>
  <aha-progress percent="70" status="warning"></aha-progress>
  <aha-progress percent="100" status="success"></aha-progress>
  <aha-progress size="small" percent="50"></aha-progress>
  <aha-progress steps="5" percent="60"></aha-progress>
  <aha-progress type="circle" percent="75"></aha-progress>
</div>

import '@ahaslides-product/design/aha-progress';   // registers <aha-progress>
import '@ahaslides-product/design/icons';          // registers <aha-icon> for the status glyph

// Attributes only — no events — so React 18/19 can render the element directly.
function AhaProgress({ percent, status, type, size, steps }) {
  return <aha-progress percent={percent} status={status} type={type} size={size} steps={steps} />;
}

// usage
<AhaProgress percent={uploaded} status={failed ? 'exception' : 'default'} />
<AhaProgress type="circle" percent={score} status="success" />
<AhaProgress steps={5} percent={stepPct} size="small" />

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

// Component.vue
<script setup>
import { ref } from 'vue';
const uploaded = ref(70);
const score = ref(75);
</script>

<template>
  <aha-progress :percent="uploaded" status="success" />
  <aha-progress type="circle" :percent="score" />
  <aha-progress :steps="5" :percent="uploaded" size="small" />
</template>