Counted textarea

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-counted-textarea> 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; type past a few
     lines and the field scrolls instead of growing unbounded. -->
<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-textarea.js';   // registers <aha-counted-textarea>
</script>

<!-- maxlength turns the focus-only counter on; minrows/maxrows bound the autogrow -->
<aha-counted-textarea id="desc" maxlength="150" minrows="2" maxrows="5"
  value="A longer answer that wraps to several lines." placeholder="Answer"></aha-counted-textarea>

<!-- status: error   ·   disabled / readonly -->
<aha-counted-textarea status="error" maxlength="120" value="Too long" placeholder="Description"></aha-counted-textarea>

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

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

// React 18 needs a thin wrapper; React 19 can use <aha-counted-textarea> directly.
// The counter shows only on focus when maxLength is set; the field grows minRows→maxRows then scrolls.
function AhaCountedTextarea({ value, placeholder, maxLength, minRows, maxRows, 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-textarea
      ref={ref}
      placeholder={placeholder}
      {...(maxLength ? { maxlength: String(maxLength) } : {})}
      {...(minRows ? { minrows: String(minRows) } : {})}
      {...(maxRows ? { maxrows: String(maxRows) } : {})}
      {...(status ? { status } : {})}
      {...(readOnly ? { readonly: '' } : {})}
    />
  );
}

// usage
<AhaCountedTextarea value={answer} placeholder="Answer" maxLength={150} minRows={2} maxRows={5} onChange={setAnswer} />

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

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

<template>
  <!-- maxlength turns the focus-only counter on; minrows/maxrows bound the autogrow -->
  <aha-counted-textarea
    maxlength="150"
    minrows="2"
    maxrows="5"
    placeholder="Answer"
    :value.prop="answer"
    @input="answer = $event.detail.value"
  />
</template>