Checkbox

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-checkbox> is the SAME shared custom element React and Vue consume.
     Initial state is declarative (`checked`); it emits a composed `change` event. -->
<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-checkbox.js';   // registers <aha-checkbox>
</script>

<aha-checkbox id="anon" checked>Let participants join anonymously</aha-checkbox>

<script>
  // Plain DOM — no framework. Read e.detail.checked off the composed CustomEvent.
  document.getElementById('anon').addEventListener('change', (e) => {
    console.log('anonymous:', e.detail.checked);
  });
</script>

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

// React 18 needs a thin wrapper; React 19 can use <aha-checkbox> directly.
function AhaCheckbox({ checked, indeterminate, disabled, onChange, children }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    el.checked = !!checked;
    el.indeterminate = !!indeterminate;
    el.disabled = !!disabled;
    const h = (e) => onChange?.(e.detail.checked);   // composed CustomEvent
    el.addEventListener('change', h);
    return () => el.removeEventListener('change', h);
  });
  return <aha-checkbox ref={ref}>{children}</aha-checkbox>;
}

// usage
<AhaCheckbox checked={anon} onChange={setAnon}>
  Let participants join anonymously
</AhaCheckbox>

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

// Component.vue
<script setup>
import { ref } from 'vue';
const anon = ref(false);
</script>

<template>
  <aha-checkbox
    :checked.prop="anon"
    @change="anon = $event.detail.checked"
  >
    Let participants join anonymously
  </aha-checkbox>
</template>