Numbered item

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-numbered-item> 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. Hover an item to reveal its delete;
     the whole item sits in ONE grey card (contained) with a muted-grey number chip. -->
<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-numbered-item.js';   // registers <aha-numbered-item>
</script>

<div style="display:flex; flex-direction:column; gap:8px; max-width:420px">
  <aha-numbered-item n="1" label="Question" deletable id="q1">
    <div>The fields for question 1 go here (prompt, options, …).</div>
  </aha-numbered-item>
  <!-- candelete="false" keeps the delete visible but disabled (e.g. at the minimum item count) -->
  <aha-numbered-item n="2" label="Question" deletable candelete="false">
    <div>The fields for question 2 go here.</div>
  </aha-numbered-item>
</div>

<script>
  document.getElementById('q1').addEventListener('delete', (e) => console.log('delete item', e.detail.n));
</script>

import '@ahaslides-product/design/aha-numbered-item'; // registers <aha-numbered-item>
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper; React 19 can use <aha-numbered-item> directly.
// The item's fields are the children; onDelete fires when the hover trash is pressed.
function AhaNumberedItem({ n, label, variant, deletable, canDelete, onDelete, children }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const h = (e) => onDelete?.(e.detail.n);   // composed CustomEvent
    el.addEventListener('delete', h);
    return () => el.removeEventListener('delete', h);
  }, [onDelete]);
  return (
    <aha-numbered-item
      ref={ref}
      n={String(n)}
      label={label}
      {...(variant ? { variant } : {})}
      {...(deletable ? { deletable: '' } : {})}
      {...(canDelete === false ? { candelete: 'false' } : {})}
    >{children}</aha-numbered-item>
  );
}

// usage
<AhaNumberedItem n={1} label="Question" deletable canDelete={items.length > 1} onDelete={removeQuestion}>
  {/* the question's fields */}
</AhaNumberedItem>

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

// Component.vue
<script setup>
import { ref } from 'vue';
const questions = ref([{ id: 1 }, { id: 2 }]);
function remove(n) { questions.value = questions.value.filter((_, i) => i + 1 !== n); }
</script>

<template>
  <!-- the item's fields are the default slot; candelete disables (not hides) the trash at the min count -->
  <aha-numbered-item
    v-for="(q, i) in questions"
    :key="q.id"
    :n="String(i + 1)"
    label="Question"
    deletable
    :candelete="questions.length > 1 ? 'true' : 'false'"
    @delete="remove($event.detail.n)"
  >
    <div>Fields for question {{ i + 1 }}…</div>
  </aha-numbered-item>
</template>