Option row

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-option-row> is the SAME shared custom element React and Vue consume — here in its native form.
     It COMPOSES DS leaves (borderless CountedTextarea, ImageActionButton) + a success-green correct
     toggle (circle | square). Theming comes only from the --aha-* tokens in tokens.css. Hover a row to
     reveal its delete (top-right). -->
<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-option-row.js';   // registers <aha-option-row>
</script>

<div style="display:flex; flex-direction:column; gap:8px; max-width:420px">
  <!-- quiz answer: orderable + correct toggle (circle, default) + image; correct paints the card green.
       delete disabled at the minimum of 2. Use checkboxshape="square" for the square toggle,
       and singleline for a single-line answer (Enter blocked, trims on blur). -->
  <aha-option-row id="a" orderable correctable image correct value="Paris" maxlength="80"></aha-option-row>
  <aha-option-row orderable correctable image value="London" maxlength="80"></aha-option-row>
  <aha-option-row orderable correctable checkboxshape="square" singleline value="Rome" maxlength="80"></aha-option-row>
</div>

<script>
  document.getElementById('a').addEventListener('input', (e) => console.log('text:', e.detail.value));
  document.getElementById('a').addEventListener('correct-change', (e) => console.log('correct:', e.detail.correct));
</script>

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

// React 18 needs a thin wrapper; React 19 can use <aha-option-row> directly.
// Composes DS leaves; forwards input / correct-change / delete (+ the image control's intents).
function AhaOptionRow({ value, maxLength, orderable, correctable, correct, checkboxShape, singleLine, image, canDelete, onInput, onCorrect, onDelete }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    el.value = value ?? '';
    if (correct) el.setAttribute('correct', ''); else el.removeAttribute('correct');
    const hi = (e) => onInput?.(e.detail.value);
    const hc = (e) => onCorrect?.(e.detail.correct);
    const hd = () => onDelete?.();
    el.addEventListener('input', hi); el.addEventListener('correct-change', hc); el.addEventListener('delete', hd);
    return () => { el.removeEventListener('input', hi); el.removeEventListener('correct-change', hc); el.removeEventListener('delete', hd); };
  });
  return (
    <aha-option-row
      ref={ref}
      {...(maxLength ? { maxlength: String(maxLength) } : {})}
      {...(orderable ? { orderable: '' } : {})}
      {...(correctable ? { correctable: '' } : {})}
      {...(checkboxShape ? { checkboxshape: checkboxShape } : {})}
      {...(singleLine ? { singleline: '' } : {})}
      {...(image ? { image: '' } : {})}
      {...(canDelete === false ? { candelete: 'false' } : {})}
    />
  );
}

// usage — one per option; disable delete at the minimum count
{options.map((o, i) => (
  <AhaOptionRow key={o.id} value={o.text} maxLength={80} orderable correctable image
    checkboxShape="circle" correct={o.correct} canDelete={options.length > 2}
    onInput={(v) => update(i, v)} onCorrect={(c) => setCorrect(i, c)} onDelete={() => remove(i)} />
))}

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

// Component.vue
<script setup>
import { ref } from 'vue';
const options = ref([{ id: 1, text: 'Paris', correct: true }, { id: 2, text: 'London', correct: false }]);
function remove(i) { options.value.splice(i, 1); }
</script>

<template>
  <!-- one row per option; delete disables (not hides) at the minimum count -->
  <aha-option-row
    v-for="(o, i) in options"
    :key="o.id"
    orderable
    correctable
    image
    checkboxshape="circle"
    :value.prop="o.text"
    maxlength="80"
    :correct="o.correct || undefined"
    :candelete="options.length > 2 ? 'true' : 'false'"
    @input="o.text = $event.detail.value"
    @correct-change="o.correct = $event.detail.correct"
    @delete="remove(i)"
  />
</template>