Mode field

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-mode-field> 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 bodies are light-DOM children tagged
     data-mode; switching the active value toggles which is visible IN PLACE (the hidden one keeps its
     state). variant="radio" (default) is the OUTLINE mode control; variant="segmented" is the grey one. -->
<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-mode-field.js';   // registers <aha-mode-field>
</script>

<aha-mode-field id="results" label="Results" value="auto"
  help="Choose when the results chart appears to the audience." style="max-width:360px">
  <div data-mode="auto">Results appear automatically when everyone has answered.</div>
  <div data-mode="manual">You reveal results with the "Show results" button.</div>
</aha-mode-field>

<script type="module">
  const el = document.getElementById('results');
  el.options = [{ value: 'auto', label: 'Automatic' }, { value: 'manual', label: 'Manual' }];
  el.addEventListener('change', (e) => console.log('value:', e.detail.value));
</script>

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

// React 18 needs a thin wrapper; React 19 can use <aha-mode-field> directly.
// options is a PROPERTY; bodies are children tagged data-mode — the hidden one keeps its state.
// variant: 'radio' (default outline) | 'segmented' (neutral grey). labelVariant: 'field' | 'section'.
function AhaModeField({ label, options, value, variant, labelVariant, help, disabled, onChange, children }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    el.options = options || [];
    if (value != null) el.value = value;
    if (variant != null) el.variant = variant;
    if (labelVariant != null) el.labelVariant = labelVariant;
    if (help != null) el.help = help;
    el.disabled = !!disabled;
    const h = (e) => onChange?.(e.detail.value);   // composed CustomEvent
    el.addEventListener('change', h);
    return () => el.removeEventListener('change', h);
  }, [options, value, variant, labelVariant, help, disabled, onChange]);
  return <aha-mode-field ref={ref} label={label}>{children}</aha-mode-field>;
}

// usage
<AhaModeField
  label="Results"
  value={resultsMode}
  options={[{ value: 'auto', label: 'Automatic' }, { value: 'manual', label: 'Manual' }]}
  help="Choose when the results chart appears."
  onChange={setResultsMode}
>
  <div data-mode="auto">Results appear automatically.</div>
  <div data-mode="manual">You reveal results manually.</div>
</AhaModeField>

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

// Component.vue
<script setup>
import { ref } from 'vue';
const resultsMode = ref('auto');
const options = [{ value: 'auto', label: 'Automatic' }, { value: 'manual', label: 'Manual' }];
</script>

<template>
  <!-- options + value bound as PROPERTIES; bodies are children tagged data-mode -->
  <!-- variant="radio" (default outline) | "segmented"; label-variant="field" | "section" -->
  <aha-mode-field
    label="Results"
    help="Choose when the results chart appears."
    :options.prop="options"
    :value.prop="resultsMode"
    @change="resultsMode = $event.detail.value"
  >
    <div data-mode="auto">Results appear automatically.</div>
    <div data-mode="manual">You reveal results manually.</div>
  </aha-mode-field>
</template>