Steps

<!-- Paste-and-run: save as .html and open in a browser. No build step, no bundler.
     Steps is a COMPOSITE (antd, no framework-free element), so its HTML form is a CDN-React
     page — React + antd load from a CDN (esm.sh) and mount on open. It consumes the SAME shared
     `stepsTheme` the React/Vue wrappers use, so it renders the DS V3 look (brand current/finished
     step, 32px icon, brand titles).
     No JSX here (JSX needs a compiler) — we use React.createElement via the `h` alias. -->
<div id="root"></div>
<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { ConfigProvider, Steps } from 'https://esm.sh/antd@6?deps=react@18,react-dom@18';
  import { stepsTheme } from 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/steps-theme.js';

  const h = React.createElement;
  const items = [{ title: 'Details' }, { title: 'Content' }, { title: 'Publish' }];

  createRoot(document.getElementById('root')).render(
    h(ConfigProvider, { theme: stepsTheme },
      h('div', { style: { width: 480 } },
        h(Steps, { current: 1, items })
      )
    )
  );
</script>

import { ConfigProvider, Steps } from 'antd';   // antd v6
import { stepsTheme } from '@ahaslides-product/design/steps-theme';

const items = [
  { title: 'Details' },
  { title: 'Content' },
  { title: 'Publish' },
];

<ConfigProvider theme={stepsTheme}>
  <Steps current={current} items={items} onChange={setCurrent} />
</ConfigProvider>
// One shared stepsTheme → the DS V3 look; reserve Steps for genuinely ordered flows, use Tabs for peers.

<script setup>
import { ref } from 'vue';
import { ConfigProvider, Steps } from 'ant-design-vue';   // ant-design-vue v4
import { stepsTheme } from '@ahaslides-product/design/steps-theme';

const current = ref(1);
const items = [
  { title: 'Details' },
  { title: 'Content' },
  { title: 'Publish' },
];
</script>

<template>
  <a-config-provider :theme="stepsTheme">
    <a-steps v-model:current="current" :items="items" />
  </a-config-provider>
</template>
<!-- The SAME stepsTheme as React → one DS V3 look across both vendor libraries. -->

// @ahaslides-product/design/steps-theme — declared ONCE, consumed by both tiers.
import { stepsTheme } from '@ahaslides-product/design/steps-theme';

export const stepsTheme = {
  token: {
    colorPrimary: '#6A1EBB',
    colorText: '#1A1A1A',
    borderRadius: 8,
    fontFamily: 'var(--aha-font-product, "Plus Jakarta Sans", sans-serif)',
  },
  components: {
    Steps: {
      colorPrimary: '#6A1EBB',   // current/finished accent
      iconSize: 32,
      iconFontSize: 14,
      titleLineHeight: 32,
    },
  },
};