Popconfirm

<!-- Paste-and-run: save as .html and open in a browser. No build step, no bundler.
     Popconfirm 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 `popconfirmTheme` the React/Vue wrappers use, so it renders the DS V3
     look (radius-8 popover, primary confirm, #E3E3E3 cancel border). No JSX — React.createElement. -->
<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, Popconfirm, Button } from 'https://esm.sh/antd@6?deps=react@18,react-dom@18';
  import { popconfirmTheme } from 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/popconfirm-theme.js';

  const h = React.createElement;

  createRoot(document.getElementById('root')).render(
    h(ConfigProvider, { theme: popconfirmTheme },
      h(Popconfirm, {
        title: 'Delete this slide?',
        description: 'This cannot be undone.',
        okText: 'Delete', cancelText: 'Cancel',
        placement: 'top',        // top | bottom | left | right
        okType: 'danger',        // 'primary' (purple) default; 'danger' = red confirm
        onConfirm: () => console.log('confirmed'),
      }, h(Button, { danger: true }, 'Delete slide'))
    )
  );
</script>

import { ConfigProvider, Popconfirm, Button } from 'antd';   // antd v6
import { popconfirmTheme } from '@ahaslides-product/design/popconfirm-theme';

<ConfigProvider theme={popconfirmTheme}>
  <Popconfirm
    title="Delete this slide?"
    description="This cannot be undone."
    okText="Delete"
    cancelText="Cancel"
    placement="top"          // top | bottom | left | right — arrow tracks the trigger
    okType="danger"          // "primary" (purple) by default; "danger" = red confirm
    onConfirm={remove}
  >
    <Button danger>Delete slide</Button>
  </Popconfirm>
</ConfigProvider>
// One shared popconfirmTheme → the DS V3 look; primary confirm, #E3E3E3 cancel border.
// Matrix: placement (top/bottom/left/right) × okType (primary/danger).
// For a destructive/irreversible action use a Modal instead (overlays pattern).

<script setup>
import { ConfigProvider, Popconfirm, Button } from 'ant-design-vue';   // ant-design-vue v4
import { popconfirmTheme } from '@ahaslides-product/design/popconfirm-theme';

function remove() { /* delete the slide */ }
</script>

<template>
  <a-config-provider :theme="popconfirmTheme">
    <a-popconfirm
      title="Delete this slide?"
      description="This cannot be undone."
      ok-text="Delete"
      cancel-text="Cancel"
      placement="top"
      ok-type="danger"
      @confirm="remove"
    >
      <a-button danger>Delete slide</a-button>
    </a-popconfirm>
  </a-config-provider>
</template>
<!-- The SAME popconfirmTheme as React → one DS V3 look across both vendor libraries. -->
<!-- Matrix: placement (top/bottom/left/right) × ok-type (primary/danger). -->

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

export const popconfirmTheme = {
  token: {
    colorPrimary: '#6A1EBB',
    borderRadius: 8,
    borderRadiusLG: 8,
    controlHeight: 32,
    colorBorder: '#E3E3E3',
    colorText: '#1A1A1A',
    colorTextHeading: '#1A1A1A',
    colorWarning: '#FF7747',
    colorBgElevated: '#FFFFFF',
    fontFamily: 'var(--aha-font-product, "Plus Jakarta Sans", sans-serif)',
  },
  components: {
    Popover: { borderRadiusLG: 8, colorBgElevated: '#FFFFFF' },
    Button: { borderRadius: 8, controlHeight: 32 },
  },
};