Add Item Button

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-add-item-button> 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.
     The + glyph is summoned by name from the DS icon library via <aha-icon>. -->
<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-add-item-button.js'; // registers <aha-add-item-button> (also pulls in <aha-icon>)
</script>

<!-- full-width add row — sits under an editable settings list; disabled = at the max item count -->
<div style="width:320px">
  <aha-add-item-button id="add" label="Add option"></aha-add-item-button>
  <br>
  <aha-add-item-button label="Add option" disabled></aha-add-item-button>
</div>

<script>
  // Plain DOM — no framework. The composed `add` CustomEvent fires on click; append a new item here.
  let count = 1;
  document.getElementById('add').addEventListener('add', () => {
    console.log('add item #', ++count);
  });
</script>

import '@ahaslides-product/design/aha-add-item-button'; // registers <aha-add-item-button> (also pulls in <aha-icon>)
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper for the composed `add` event; React 19 can use <aha-add-item-button> directly.
function AhaAddItemButton({ label = 'Add', disabled, onAdd }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const h = () => onAdd?.();   // composed CustomEvent, no payload
    el.addEventListener('add', h);
    return () => el.removeEventListener('add', h);
  });
  return (
    <aha-add-item-button
      ref={ref}
      label={label}
      {...(disabled ? { disabled: '' } : {})}
    />
  );
}

// usage
function OptionList({ options, setOptions, max = 10 }) {
  return (
    <>
      {/* …option rows… */}
      <AhaAddItemButton
        label="Add option"
        disabled={options.length >= max}
        onAdd={() => setOptions([...options, { text: '' }])}
      />
    </>
  );
}

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

// Component.vue
<script setup>
import { ref, computed } from 'vue';
const options = ref([{ text: '' }]);
const max = 10;
const atMax = computed(() => options.value.length >= max);
</script>

<template>
  <!-- full-width add row under the option list; disabled at the max item count -->
  <!-- …option rows… -->
  <aha-add-item-button
    label="Add option"
    :disabled.prop="atMax"
    @add="options.push({ text: '' })"
  />
</template>