Switch

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-switch> 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. -->
<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/icons.js';       // registers <aha-icon> (loading spinner + children glyphs)
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-switch.js';   // registers <aha-switch>
</script>

<label style="display:inline-flex; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px">
  <aha-switch id="anon" checked></aha-switch>
  Show results live
</label>

<!-- size="small" · loading (spinner in the knob) · checked/unchecked children (text or an icon in the track) -->
<div style="display:flex; gap:16px; align-items:center; margin-top:12px">
  <aha-switch size="small" checked></aha-switch>
  <aha-switch loading checked></aha-switch>
  <aha-switch checked on-text="On" off-text="Off"></aha-switch>
  <aha-switch checked on-icon="system-check" off-icon="system-x"></aha-switch>
</div>

<script>
  document.getElementById('anon').addEventListener('change', (e) => {
    console.log('live results:', e.detail.checked);
  });
</script>

import '@ahaslides-product/design/icons';        // registers <aha-icon> (loading spinner + children glyphs)
import '@ahaslides-product/design/aha-switch';   // registers <aha-switch>
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper; React 19 can use <aha-switch> directly.
function AhaSwitch({ checked, disabled, loading, size, checkedChildren, unCheckedChildren, onChange }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    el.checked = !!checked;
    el.disabled = !!disabled;
    el.loading = !!loading;
    size ? el.setAttribute('size', size) : el.removeAttribute('size');
    checkedChildren != null ? el.setAttribute('on-text', checkedChildren) : el.removeAttribute('on-text');
    unCheckedChildren != null ? el.setAttribute('off-text', unCheckedChildren) : el.removeAttribute('off-text');
    const h = (e) => onChange?.(e.detail.checked);   // composed CustomEvent
    el.addEventListener('change', h);
    return () => el.removeEventListener('change', h);
  });
  return <aha-switch ref={ref} />;
}

// usage — applies immediately, no save step
<AhaSwitch checked={live} onChange={setLive} />
<AhaSwitch size="small" checked={compact} onChange={setCompact} />
<AhaSwitch loading checked={saving} />
<AhaSwitch checkedChildren="On" unCheckedChildren="Off" checked={live} onChange={setLive} />

// main.ts — register the elements + mark aha-* as custom elements
import '@ahaslides-product/design/icons';        // registers <aha-icon> (loading spinner + children glyphs)
import '@ahaslides-product/design/aha-switch';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

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

<template>
  <aha-switch
    :checked.prop="live"
    @change="live = $event.detail.checked"
  />
  <!-- size="small" · loading · checked/unchecked children (text or icon) -->
  <aha-switch size="small" :checked.prop="live" @change="live = $event.detail.checked" />
  <aha-switch :loading.prop="saving" :checked.prop="live" />
  <aha-switch on-text="On" off-text="Off" :checked.prop="live" @change="live = $event.detail.checked" />
</template>