Skeleton

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

<!-- The common list-item shape: avatar + title + a multi-row paragraph (last row shorter) -->
<div style="display:flex; gap:16px; align-items:flex-start; max-width:420px">
  <aha-skeleton variant="avatar"></aha-skeleton>
  <div style="flex:1; display:flex; flex-direction:column; gap:12px">
    <aha-skeleton variant="title"></aha-skeleton>
    <aha-skeleton variant="paragraph" rows="3"></aha-skeleton>
    <div style="display:flex; gap:12px">
      <aha-skeleton variant="button"></aha-skeleton>       <!-- round for a pill: variant="button" round -->
      <aha-skeleton variant="image" style="width:120px"></aha-skeleton>
    </div>
  </div>
</div>

import '@ahaslides-product/design/icons';        // registers <aha-icon> (image variant)
import '@ahaslides-product/design/aha-skeleton'; // registers <aha-skeleton>

// Attributes only — no events — so React 18/19 can render the element directly.
function AhaSkeleton({ variant, rows, active, round }) {
  return (
    <aha-skeleton
      variant={variant}
      {...(rows != null ? { rows: String(rows) } : {})}
      {...(round ? { round: '' } : {})}
      {...(active === false ? { active: 'false' } : {})}
    />
  );
}

// usage — hold the list-item shape while the card loads
{loading
  ? <AhaSkeleton variant="paragraph" rows={3} />
  : <CardBody>{body}</CardBody>}

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

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

<template>
  <aha-skeleton v-if="loading" variant="paragraph" rows="3" />
  <CardBody v-else>{{ body }}</CardBody>
</template>