Collapse

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-collapse> 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.
     accordion → one panel open at a time · disabled → read-only · slot="extra" → header accessory
     ghost → borderless · size="small" → dense · icon-position="end" → caret trailing. -->
<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>
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-collapse.js'; // registers <aha-collapse>
</script>

<div style="display:flex; flex-direction:column; gap:8px; max-width:380px">
  <aha-collapse accordion open>
    <span slot="header">Advanced settings</span>
    <aha-icon slot="extra" name="system-star" size="14" aria-hidden="true"></aha-icon>
    Let participants join anonymously, and shuffle the answer order.
  </aha-collapse>
  <aha-collapse accordion id="scoring">
    <span slot="header">Scoring</span>
    Award points by speed, and show a leaderboard between rounds.
  </aha-collapse>
  <aha-collapse disabled>
    <span slot="header">Billing (read-only)</span>
    Managed by your workspace owner.
  </aha-collapse>
</div>

<script>
  document.getElementById('scoring').addEventListener('toggle', (e) => console.log('open:', e.detail.open));
</script>

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

// React 18 needs a thin wrapper for the composed `toggle` event; React 19 can bind onToggle directly.
function AhaCollapse({ header, extra, open, disabled, accordion, size, ghost, iconPosition, onToggle, children }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const h = (e) => onToggle?.(e.detail.open);
    el.addEventListener('toggle', h);
    return () => el.removeEventListener('toggle', h);
  });
  return (
    <aha-collapse
      ref={ref}
      {...(open ? { open: '' } : {})}
      {...(disabled ? { disabled: '' } : {})}
      {...(accordion ? { accordion: '' } : {})}
      {...(ghost ? { ghost: '' } : {})}
      {...(size ? { size } : {})}
      {...(iconPosition ? { 'icon-position': iconPosition } : {})}
    >
      <span slot="header">{header}</span>
      {extra && <span slot="extra">{extra}</span>}
      {children}
    </aha-collapse>
  );
}

// usage — accordion group: opening one closes its siblings
<AhaCollapse header="Advanced settings" accordion open onToggle={(o) => setOpen(o)}>
  Let participants join anonymously, and shuffle the answer order.
</AhaCollapse>
<AhaCollapse header="Scoring" accordion>Award points by speed.</AhaCollapse>
<AhaCollapse header="Billing (read-only)" disabled>Managed by your workspace owner.</AhaCollapse>

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

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

<template>
  <!-- accordion group: opening one panel closes its siblings -->
  <aha-collapse
    accordion
    :open="open || undefined"
    @toggle="open = $event.detail.open"
  >
    <span slot="header">Advanced settings</span>
    <aha-icon slot="extra" name="system-star" size="14" aria-hidden="true" />
    Let participants join anonymously, and shuffle the answer order.
  </aha-collapse>
  <aha-collapse accordion>
    <span slot="header">Scoring</span>
    Award points by speed, and show a leaderboard between rounds.
  </aha-collapse>
  <aha-collapse disabled>
    <span slot="header">Billing (read-only)</span>
    Managed by your workspace owner.
  </aha-collapse>
</template>