CSAT

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-csat> is the SAME shared custom element React and Vue consume — here in its native
     form. Its thumbs are the shared <aha-icon>, and a thumbs-down opens a feedback popover built
     from the shared <aha-popover> + <aha-counted-textarea> + <aha-button> — all loaded by the
     element itself. 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/aha-csat.js';   // registers <aha-csat> (+ <aha-icon>, <aha-popover>, <aha-counted-textarea>, <aha-button>)
</script>

<!-- The borderless single row (the only layout): prompt + 16px thumbs on one line, no chrome.
     Thumbs-up rates instantly; thumbs-down opens the free-text feedback popover.
     `thanks` opts into the confirmation line, shown after the up rating / feedback submit. -->
<aha-csat prompt="How's your experience?" source="docs_footer" thanks="Thanks for the feedback!"></aha-csat>

<script>
  const csat = document.querySelector('aha-csat');
  csat.addEventListener('rate', (e) => {
    console.log('CSAT', e.detail.rating, 'from', e.detail.source);   // { rating: 'up' | 'down', source }
  });
  csat.addEventListener('feedback', (e) => {
    console.log('CSAT feedback', e.detail.feedback, 'from', e.detail.source);   // { rating: 'down', source, feedback }
  });
</script>

import { useEffect, useRef } from 'react';
import '@ahaslides-product/design/aha-csat';   // registers <aha-csat> (+ <aha-icon>, <aha-popover>, <aha-counted-textarea>, <aha-button>)

// The element emits composed `rate` and `feedback` events — attach ref listeners (React <19 pattern).
function AhaCsat({ prompt, source, onRate, onFeedback }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    const rate = (e) => onRate?.(e.detail);         // { rating: 'up' | 'down', source }
    const feedback = (e) => onFeedback?.(e.detail);  // { rating: 'down', source, feedback }
    el.addEventListener('rate', rate);
    el.addEventListener('feedback', feedback);
    return () => { el.removeEventListener('rate', rate); el.removeEventListener('feedback', feedback); };
  }, [onRate, onFeedback]);
  return <aha-csat ref={ref} prompt={prompt} source={source} />;
}

// usage — thumbs-up rates instantly; thumbs-down opens the free-text feedback popover
<AhaCsat
  prompt="How's your experience?"
  source="editor_help"
  onRate={(d) => track('CSAT_RATED', d)}
  onFeedback={(d) => track('CSAT_FEEDBACK_SUBMITTED', d)}
/>

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

// Component.vue — the custom element's `rate` and `feedback` events bind natively with @rate / @feedback
<script setup>
function onRate(e) {
  track('CSAT_RATED', e.detail);   // { rating: 'up' | 'down', source }
}
function onFeedback(e) {
  track('CSAT_FEEDBACK_SUBMITTED', e.detail);   // { rating: 'down', source, feedback }
}
</script>

<template>
  <!-- The borderless single row (the only layout). Thumbs-up rates instantly; thumbs-down opens the
       free-text feedback popover, which emits `feedback` on submit. -->
  <aha-csat prompt="How's your experience?" source="editor_help" @rate="onRate" @feedback="onFeedback" />
</template>