Card select

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-card-select> 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 whole grid is one radiogroup:
     Tab in, then Arrow keys move-and-select. Icons are summoned by name — never an inline <svg>. -->
<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-card-select.js';   // registers <aha-card-select>
</script>

<!-- labelled tiles — stretch to fill each of `columns` tracks -->
<aha-card-select id="chart" columns="3" value="bar" style="max-width:360px"></aha-card-select>

<!-- iconOnly — compact 44px squares packed to the start; the label is kept as title + aria-label -->
<aha-card-select id="chartCompact" icon-only columns="3" value="bar"></aha-card-select>

<script type="module">
  // options: value + label + an icon NAME from the DS library
  const options = [
    { value: 'bar',   label: 'Bar',   icon: 'system-chart-bar' },
    { value: 'line',  label: 'Line',  icon: 'system-chart-line-up' },
    { value: 'pie',   label: 'Pie',   icon: 'system-chart-pie' },
  ];
  const el = document.getElementById('chart');
  el.options = options;
  el.addEventListener('change', (e) => console.log('chart type:', e.detail.value));

  document.getElementById('chartCompact').options = options;
</script>

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

// React 18 needs a thin wrapper; React 19 can use <aha-card-select> directly.
// options is a PROPERTY (array), so set it imperatively; the grid is one roving radiogroup.
function AhaCardSelect({ options, value, columns, iconOnly, disabled, onChange }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    el.options = options || [];
    if (value != null) el.value = value;
    el.iconOnly = !!iconOnly;   // compact 44px squares; label kept as title + aria-label
    el.disabled = !!disabled;
    const h = (e) => onChange?.(e.detail.value);   // composed CustomEvent
    el.addEventListener('change', h);
    return () => el.removeEventListener('change', h);
  }, [options, value, iconOnly, disabled, onChange]);
  return <aha-card-select ref={ref} {...(columns ? { columns: String(columns) } : {})} />;
}

// usage — labelled tiles (default) or compact iconOnly squares
<AhaCardSelect
  value={chartType}
  columns={3}
  iconOnly={false}
  options={[
    { value: 'bar',  label: 'Bar',  icon: 'system-chart-bar' },
    { value: 'line', label: 'Line', icon: 'system-chart-line-up' },
    { value: 'pie',  label: 'Pie',  icon: 'system-chart-pie' },
  ]}
  onChange={setChartType}
/>

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

// Component.vue
<script setup>
import { ref } from 'vue';
const chartType = ref('bar');
const options = [
  { value: 'bar',  label: 'Bar',  icon: 'system-chart-bar' },
  { value: 'line', label: 'Line', icon: 'system-chart-line-up' },
  { value: 'pie',  label: 'Pie',  icon: 'system-chart-pie' },
];
</script>

<template>
  <!-- options + value are bound as PROPERTIES (.prop); the grid is one roving radiogroup -->
  <!-- add icon-only for compact 44px squares (label kept as title + aria-label) -->
  <aha-card-select
    columns="3"
    :options.prop="options"
    :value.prop="chartType"
    @change="chartType = $event.detail.value"
  />
</template>