Select field

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-select> is the SAME shared custom element React and Vue consume. It's a styled control
     backed by a NATIVE <select>, so it inherits the OS keyboard model + a11y for free. Pass the
     `options` as JSON and an optional `placeholder`; 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/icons.js';       // <aha-icon> — the trailing caret
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-select.js';  // registers <aha-select>
</script>

<aha-select id="theme" placeholder="Pick a theme"
  options='[{"label":"Light","value":"light"},{"label":"Dark","value":"dark"},{"label":"High contrast","value":"contrast"}]'></aha-select>

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

import '@ahaslides-product/design/aha-select';   // registers <aha-select>
import '@ahaslides-product/design/icons';        // <aha-icon> — the trailing caret
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper (options is a property, not a string attribute); React 19 can use
// <aha-select> directly. Same element, same shadow-DOM CSS → byte-identical with Vue.
function AhaSelect({ value, options, placeholder, size, status, disabled, onChange }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    el.options = options || [];              // set the array as a property
    if (value != null) el.value = value;
    el.disabled = !!disabled;
    const h = (e) => onChange?.(e.detail.value);   // composed CustomEvent
    el.addEventListener('change', h);
    return () => el.removeEventListener('change', h);
  });
  return (
    <aha-select ref={ref} placeholder={placeholder} size={size} status={status} />
  );
}

// usage
<AhaSelect
  placeholder="Pick a theme"
  value={theme}
  options={[
    { label: 'Light', value: 'light' },
    { label: 'Dark', value: 'dark' },
  ]}
  onChange={setTheme}
/>

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

// Component.vue
<script setup>
import { ref } from 'vue';
const theme = ref('light');
const options = [
  { label: 'Light', value: 'light' },
  { label: 'Dark', value: 'dark' },
];
</script>

<template>
  <aha-select
    placeholder="Pick a theme"
    :value="theme"
    :options.prop="options"
    @change="theme = $event.detail.value"
  ></aha-select>
</template>