Counted input

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-counted-input> 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 character counter
     is revealed only while the field is focused (SETTINGS-21/42) — click in to see it. -->
<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-counted-input.js';   // registers <aha-counted-input>
</script>

<!-- maxlength turns the focus-only counter on (shows current/max) -->
<aha-counted-input id="opt" maxlength="80" value="Paris" placeholder="Option text"></aha-counted-input>

<!-- size: small | default | large   ·   status: error   ·   disabled / readonly -->
<aha-counted-input size="large" maxlength="40" placeholder="Large"></aha-counted-input>
<aha-counted-input status="error" maxlength="80" value="Too long" placeholder="Answer"></aha-counted-input>

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

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

// React 18 needs a thin wrapper; React 19 can use <aha-counted-input> directly.
// size: 'small' | 'default' | 'large'  ·  the counter shows only on focus when maxLength is set.
function AhaCountedInput({ value, placeholder, maxLength, size, status, disabled, readOnly, onChange }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    el.value = value ?? '';
    el.disabled = !!disabled;
    const h = (e) => onChange?.(e.detail.value);   // composed CustomEvent
    el.addEventListener('input', h);
    return () => el.removeEventListener('input', h);
  });
  return (
    <aha-counted-input
      ref={ref}
      placeholder={placeholder}
      {...(maxLength ? { maxlength: String(maxLength) } : {})}
      {...(size ? { size } : {})}
      {...(status ? { status } : {})}
      {...(readOnly ? { readonly: '' } : {})}
    />
  );
}

// usage
<AhaCountedInput value={answer} placeholder="Answer" maxLength={80} onChange={setAnswer} />

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

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

<template>
  <!-- size: small | default | large  ·  maxlength turns the focus-only counter on -->
  <aha-counted-input
    size="default"
    maxlength="80"
    placeholder="Answer"
    :value.prop="answer"
    @input="answer = $event.detail.value"
  />
</template>