Dropdown

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-dropdown> 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. -->
<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> for leading + caret glyphs
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-dropdown.js';  // registers <aha-dropdown>
</script>

<!-- placement="bottomLeft" (default) | "bottomRight" | "topLeft" | "topRight"
     trigger="click" (default) | "hover"
     items: leaf {key,label,icon?,disabled?,danger?} · submenu-parent {key,label,icon?,children:[…]}
            (opens an adjacent flyout — hover / ArrowRight / Enter; ArrowLeft / Escape closes it)
            · {type:"divider"} · {type:"group",label,children:[]} -->
<aha-dropdown id="menu" label="Actions" placement="bottomLeft"
  items='[
    {"key":"rename","label":"Rename","icon":"system-pencil-simple"},
    {"key":"export","label":"Export","icon":"system-export","children":[
      {"key":"pdf","label":"PDF","icon":"system-file"},
      {"key":"pptx","label":"PowerPoint","icon":"system-file"},
      {"key":"xlsx","label":"Excel","icon":"system-file"}
    ]},
    {"type":"divider"},
    {"key":"delete","label":"Delete","icon":"system-trash","danger":true}
  ]'>
</aha-dropdown>

<script>
  // Opens on click, closes on outside-click / Escape (focus returns to the trigger); choosing an
  // item emits a composed `select`.
  document.getElementById('menu').addEventListener('select', (e) => console.log('action', e.detail.key));
</script>

import '@ahaslides-product/design/icons';        // registers <aha-icon> for leading + caret glyphs
import '@ahaslides-product/design/aha-dropdown';  // registers <aha-dropdown>
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper for the composed `select` event; React 19 can bind onSelect directly.
function AhaDropdown({ label, items, placement, trigger, onSelect }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const h = (e) => onSelect?.(e.detail.key);
    el.addEventListener('select', h);
    return () => el.removeEventListener('select', h);
  });
  return <aha-dropdown ref={ref} label={label} placement={placement} trigger={trigger} items={JSON.stringify(items)} />;
}

// usage — leading icons, a submenu-parent (children[] → adjacent flyout), a divider, a red danger action
// placement: bottomLeft | bottomRight | topLeft | topRight · trigger: click | hover
// a submenu opens on hover / ArrowRight / Enter and closes on ArrowLeft / Escape (edge-collision flip)
<AhaDropdown
  label="Actions"
  placement="bottomLeft"
  items={[
    { key: 'rename', label: 'Rename', icon: 'system-pencil-simple' },
    { key: 'export', label: 'Export', icon: 'system-export', children: [
      { key: 'pdf', label: 'PDF', icon: 'system-file' },
      { key: 'pptx', label: 'PowerPoint', icon: 'system-file' },
      { key: 'xlsx', label: 'Excel', icon: 'system-file' },
    ] },
    { type: 'divider' },
    { key: 'delete', label: 'Delete', icon: 'system-trash', danger: true },
  ]}
  onSelect={(key) => runAction(key)}
/>

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

// Component.vue — leading icons, a submenu-parent (children[] → adjacent flyout), a divider, a danger action
// placement: bottomLeft | bottomRight | topLeft | topRight · trigger: click | hover
// a submenu opens on hover / ArrowRight / Enter and closes on ArrowLeft / Escape (edge-collision flip)
<script setup>
import { computed } from 'vue';
const items = computed(() => JSON.stringify([
  { key: 'rename', label: 'Rename', icon: 'system-pencil-simple' },
  { key: 'export', label: 'Export', icon: 'system-export', children: [
    { key: 'pdf', label: 'PDF', icon: 'system-file' },
    { key: 'pptx', label: 'PowerPoint', icon: 'system-file' },
    { key: 'xlsx', label: 'Excel', icon: 'system-file' },
  ] },
  { type: 'divider' },
  { key: 'delete', label: 'Delete', icon: 'system-trash', danger: true },
]));
function onSelect(e) { runAction(e.detail.key); }
</script>

<template>
  <aha-dropdown label="Actions" placement="bottomLeft" :items="items" @select="onSelect" />
</template>