@cardstack/boxel-cli 0.10.0 → 0.10.1-unstable.0

package/bundled-realms/pretui/components/popconfirm.gts

@@ -0,0 +1,380 @@
+// Pretui — Popconfirm: an inline confirm anchored to its trigger, smaller than AlertDialog.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { Popup } from './popup';
+import type { PopupPlacement } from '../internal/overlay';
+import { Button } from './button';
+import type { PretuiTone } from '../pretui-primitives';
+import { listenDocument, listenDocumentCapture } from '../focus';
+import { controlIn } from '../internal/overlay-confirm';
+
+/**
+ * Focuses the element on install. The panels here are rendered only while
+ * open, so install IS open — which makes this fire exactly once per opening,
+ * unlike `focusWhen`, whose `should` argument is re-evaluated on every
+ * re-render and would keep dragging focus back.
+ */
+const focusOnInstall = modifier((el: HTMLElement) => {
+  el.focus();
+});
+// ─────────────────────────────────────────────────────────────────────────
+// Popconfirm
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface PopconfirmSignature {
+  Args: {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** the question */
+    title?: string;
+    /** the second line, when the question needs one */
+    description?: string;
+    /** default 'Yes' */
+    confirmLabel?: string;
+    /** Ant alias for @confirmLabel */
+    okText?: string;
+    /** default 'No' */
+    cancelLabel?: string;
+    /** Ant alias for @cancelLabel */
+    cancelText?: string;
+    /** tone of the confirm button (default 'danger') */
+    tone?: PretuiTone;
+    /** where the bubble sits relative to its trigger (default 'top') */
+    placement?: PopupPlacement;
+    /** gap between trigger and bubble, px (default 6) */
+    distance?: number;
+    /** false leaves only the confirm button (Ant's showCancel) */
+    showCancel?: boolean;
+    /** the trigger opens nothing while true */
+    disabled?: boolean;
+    /** holds the bubble open with the confirm button pending */
+    busy?: boolean;
+    /** accessible name for the bubble (default: @title, else 'Confirm') */
+    label?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+  };
+  Blocks: {
+    trigger: [open: boolean, toggle: () => void];
+    /** replaces the title/description body */
+    default: [];
+    /** replaces both buttons; receives confirm and cancel */
+    footer: [confirm: () => void, cancel: () => void];
+  };
+  Element: HTMLSpanElement;
+}
+
+/**
+ * Ant's inline "are you sure?", anchored to the control it guards.
+ *
+ * ── When to reach for this instead of AlertDialog ────────────────────────
+ *
+ * The judgement is **how much the reader needs to re-read before answering**,
+ * not how destructive the action is.
+ *
+ *  * **Popconfirm** when the object of the verb is the thing you just
+ *    clicked, and it is still on screen: deleting *this* row, unpublishing
+ *    *this* draft, revoking *this* key. The bubble points at the object, so
+ *    the question needs no noun — "Delete this?" beside the row is unambiguous
+ *    in a way "Delete Q3-forecast-v2.xlsx?" in a centred modal is not. It is
+ *    also reversible-feeling: the page never went away.
+ *  * **AlertDialog** when the consequence is not visible from where the click
+ *    happened, needs more than one line to state, spans more than one object
+ *    ("delete 47 records"), or is genuinely irreversible. A modal earns its
+ *    interruption by forcing the reader to stop; a bubble that is easy to
+ *    dismiss by looking away is the wrong instrument for a decision you want
+ *    someone to actually make.
+ *
+ * The tell that a Popconfirm should have been an AlertDialog: you find
+ * yourself wanting a third paragraph, a checkbox, or a "type the name to
+ * confirm" field in it.
+ *
+ * **Better than Ant:** Ant's Popconfirm gives the trigger no ARIA at all —
+ * no `aria-haspopup`, no `aria-expanded`, so a screen-reader user is told
+ * nothing about the bubble that just appeared, and the bubble itself is not a
+ * dialog. Here the trigger's own control gets the full contract (restored on
+ * teardown, so the caller's element is left as it was found), the bubble is a
+ * `role='dialog'` named by its question, focus moves into it on open and back
+ * to the trigger on every dismissal path, and Escape is taken in the capture
+ * phase so a host listening for it cannot act on the same keypress.
+ */
+export class Popconfirm extends Component<PopconfirmSignature> {
+  private guid = guidFor(this);
+  @tracked private internalOpen = this.args.defaultOpen ?? false;
+  /** Written from a modifier body and read from another modifier's arguments,
+   * so deliberately untracked — see the note in Menu. */
+  private triggerControl: HTMLElement | undefined;
+  private hostEl: HTMLElement | undefined;
+
+  get isOpen(): boolean {
+    return this.args.open ?? this.internalOpen;
+  }
+  get titleId(): string {
+    return this.guid + '-title';
+  }
+  get confirmLabel(): string {
+    return this.args.confirmLabel ?? this.args.okText ?? 'Yes';
+  }
+  get cancelLabel(): string {
+    return this.args.cancelLabel ?? this.args.cancelText ?? 'No';
+  }
+  get tone(): PretuiTone {
+    return this.args.tone ?? 'danger';
+  }
+  get placement(): PopupPlacement {
+    return this.args.placement ?? 'top';
+  }
+  get showCancel(): boolean {
+    return this.args.showCancel ?? true;
+  }
+  get panelLabel(): string {
+    return this.args.label ?? this.args.title ?? 'Confirm';
+  }
+
+  private setOpen(next: boolean) {
+    if (this.args.open === undefined) {
+      this.internalOpen = next;
+    }
+    this.args.onOpenChange?.(next);
+  }
+
+  private dismiss(next: boolean) {
+    this.setOpen(next);
+    if (!next) {
+      this.triggerControl?.focus();
+    }
+  }
+
+  toggle = () => {
+    if (this.args.disabled) {
+      return;
+    }
+    this.dismiss(!this.isOpen);
+  };
+
+  confirm = () => {
+    if (this.args.busy) {
+      return;
+    }
+    this.args.onConfirm?.();
+    if (!this.args.busy) {
+      this.dismiss(false);
+    }
+  };
+
+  cancel = () => {
+    this.args.onCancel?.();
+    this.dismiss(false);
+  };
+
+  onEscape = (event: Event) => {
+    let ev = event as KeyboardEvent;
+    if (ev.key !== 'Escape' || !this.isOpen) {
+      return;
+    }
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.cancel();
+  };
+
+  /** Outside pointer dismissal, watched on the document rather than caught by
+   * a covering backdrop: a backdrop swallows the click that dismissed it, so
+   * closing a bubble to press the button behind it takes two clicks. */
+  onDocumentPointerDown = (event: Event) => {
+    if (!this.isOpen) {
+      return;
+    }
+    let target = event.target as Node | null;
+    let root = this.hostEl;
+    if (target && root?.contains(target)) {
+      return;
+    }
+    this.setOpen(false);
+  };
+
+  captureHost = modifier((el: HTMLElement) => {
+    this.hostEl = el;
+    return () => {
+      this.hostEl = undefined;
+    };
+  });
+
+  captureTrigger = modifier((el: HTMLElement) => {
+    this.triggerControl = controlIn(el);
+  });
+
+  /** The APG disclosure contract, applied to whatever control the caller put
+   * in the trigger block, and fully restored on teardown. */
+  triggerBehavior = modifier((el: HTMLElement, [isOpen]: [boolean]) => {
+    let control = controlIn(el);
+    let hadPopup = control.getAttribute('aria-haspopup');
+    control.setAttribute('aria-haspopup', 'dialog');
+    control.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+    return () => {
+      if (hadPopup === null) {
+        control.removeAttribute('aria-haspopup');
+      } else {
+        control.setAttribute('aria-haspopup', hadPopup);
+      }
+      control.removeAttribute('aria-expanded');
+    };
+  });
+
+  <template>
+    <span
+      class='pretui-pc'
+      data-test-pretui-popconfirm
+      {{this.captureHost}}
+      ...attributes
+    >
+      <Popup
+        @open={{this.isOpen}}
+        @placement={{this.placement}}
+        @distance={{if @distance @distance 6}}
+      >
+        <:anchor>
+          <span
+            class='pretui-pc-trigger'
+            {{this.captureTrigger}}
+            {{this.triggerBehavior this.isOpen}}
+          >{{yield this.isOpen this.toggle to='trigger'}}</span>
+        </:anchor>
+        <:default>
+          <div
+            class='pretui-pc-panel'
+            role='dialog'
+            aria-label={{this.panelLabel}}
+            data-test-pretui-popconfirm-panel
+            {{listenDocumentCapture 'keydown' this.onEscape}}
+            {{listenDocument 'pointerdown' this.onDocumentPointerDown true}}
+          >
+            <div class='pretui-pc-body'>
+              <span class='pretui-pc-mark' aria-hidden='true'>!</span>
+              <div class='pretui-pc-text'>
+                {{#if (has-block)}}
+                  {{yield}}
+                {{else}}
+                  <span id={{this.titleId}} class='pretui-pc-title'>{{@title}}</span>
+                  {{#if @description}}
+                    <span class='pretui-pc-desc'>{{@description}}</span>
+                  {{/if}}
+                {{/if}}
+              </div>
+            </div>
+            <div class='pretui-pc-acts'>
+              {{#if (has-block 'footer')}}
+                {{yield this.confirm this.cancel to='footer'}}
+              {{else if this.showCancel}}
+                <Button
+                  @tone='neutral'
+                  @appearance='plain'
+                  @size='s'
+                  data-test-pretui-popconfirm-cancel
+                  {{focusOnInstall}}
+                  {{on 'click' this.cancel}}
+                >{{this.cancelLabel}}</Button>
+                <Button
+                  @tone={{this.tone}}
+                  @appearance='accent'
+                  @size='s'
+                  @busy={{@busy}}
+                  data-test-pretui-popconfirm-confirm
+                  {{on 'click' this.confirm}}
+                >{{this.confirmLabel}}</Button>
+              {{else}}
+                <Button
+                  @tone={{this.tone}}
+                  @appearance='accent'
+                  @size='s'
+                  @busy={{@busy}}
+                  data-test-pretui-popconfirm-confirm
+                  {{focusOnInstall}}
+                  {{on 'click' this.confirm}}
+                >{{this.confirmLabel}}</Button>
+              {{/if}}
+            </div>
+          </div>
+        </:default>
+      </Popup>
+    </span>
+
+    <style scoped>
+      @layer PretComponent {
+        .pretui-pc {
+          display: inline-flex;
+        }
+        .pretui-pc-trigger {
+          display: inline-flex;
+        }
+        .pretui-pc-panel {
+          background: var(--popover);
+          color: var(--popover-foreground);
+          border-radius: var(--radius-surface, 10px);
+          box-shadow: var(--pretui-shadow-overlay, 0 0 0 1px var(--border), 0 8px 28px rgb(0 0 0 / 0.16));
+          padding: var(--space-4, 11px);
+          width: max-content;
+          max-width: var(--pretui-popconfirm-max-width, min(280px, calc(100vw - 16px)));
+          font-family: var(--font-sans);
+          font-size: var(--text-ui-md, 12.5px);
+          opacity: 1;
+          transform: none;
+          transition: opacity var(--pretui-dur-enter, 180ms) var(--pretui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),
+            transform var(--pretui-dur-enter, 180ms) var(--pretui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));
+        }
+        @starting-style {
+          .pretui-pc-panel {
+            opacity: 0;
+            transform: scale(0.97);
+          }
+        }
+        .pretui-pc-body {
+          display: flex;
+          gap: var(--space-3, 8px);
+          align-items: flex-start;
+        }
+        .pretui-pc-mark {
+          flex: none;
+          width: 15px;
+          height: 15px;
+          margin-top: 1px;
+          border-radius: 50%;
+          display: grid;
+          place-items: center;
+          font-size: 9px;
+          font-weight: 700;
+          background: var(--warning, var(--boxel-warning));
+          color: var(--pretui-on-warning, var(--background));
+        }
+        .pretui-pc-text {
+          display: grid;
+          gap: 2px;
+          min-width: 0;
+        }
+        .pretui-pc-title {
+          font-weight: 600;
+          line-height: 1.4;
+        }
+        .pretui-pc-desc {
+          color: var(--muted-foreground);
+          font-size: var(--text-ui-sm, 11.5px);
+          line-height: 1.5;
+        }
+        .pretui-pc-acts {
+          display: flex;
+          justify-content: flex-end;
+          gap: var(--space-2, 6px);
+          margin-top: var(--space-4, 11px);
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-pc-panel {
+            transition: none;
+          }
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/popconfirm.md

@@ -0,0 +1,78 @@
+## What it is
+
+Ant's inline "are you sure?": a small confirm bubble anchored to the control it guards, with a question, an optional line of detail and two buttons. Use it when the object of the verb is the thing you just clicked and it is still on screen — deleting _this_ row, revoking _this_ key, unpublishing _this_ draft. The bubble points at the object, so the question needs no noun, and the page never went away, so the whole exchange feels reversible.
+
+Reach for **AlertDialog** instead when the consequence is not visible from where the click happened, needs more than a line to state, spans more than one object, or is genuinely irreversible; a modal earns its interruption by forcing the reader to stop. The tell that a Popconfirm should have been an AlertDialog is wanting a third paragraph, a checkbox, or a type-the-name-to-confirm field inside it. **Popover** is the free-form version with no buttons and no answer; **Tooltip** is a string and never asks anything.
+
+## The contract
+
+```
+@open? @defaultOpen? @onOpenChange?          — the overlay contract
+@title? @description?                        — the question and one line under it
+@confirmLabel? @cancelLabel?                 — default 'Yes' / 'No'
+@okText? @cancelText?                        — Ant's names, accepted as aliases
+@tone? (default 'danger')                    — the confirm button's tone
+@placement? (default 'top') @distance? (6)   — through the shared Popup
+@showCancel? (default true)
+@disabled? @busy?
+@label?                                      — accessible name; falls back to @title, then 'Confirm'
+@onConfirm? @onCancel?
+<:trigger as |open toggle|>                  — the control that asks
+<:default>                                   — replaces the title/description body
+<:footer as |confirm cancel|>                — replaces both buttons
+```
+
+**The trigger block owns the control.** Whatever focusable element it contains is found and given the disclosure contract — `aria-haspopup='dialog'` and a live `aria-expanded` — and both are restored on teardown, so the caller's element is left exactly as it was found. The block yields `open` and `toggle`; wire `toggle` to a click and the rest is handled.
+
+**Ant's names work.** `@okText` and `@cancelText` are what an agent trained on Ant will type, and they resolve to the same labels as `@confirmLabel` and `@cancelLabel`; the Pretui names win when both are given. The defaults are the bare "Yes" / "No", which is the one place a bare yes/no is right: the question is one line and the object is on screen.
+
+**Busy holds the bubble open.** While `@busy` the confirm button shows Button's pending state (a spinner and `aria-busy`, still focusable) and a further confirm is refused; the bubble closes itself after `@onConfirm` only if `@busy` is still off, so a caller that turns it on from `@onConfirm` keeps the bubble open until it closes it. `@disabled` makes `toggle` inert without removing the trigger.
+
+**Outside clicks are not swallowed.** Dismissal is a document `pointerdown` listener rather than a covering backdrop, so closing the bubble to press a button behind it takes one press, not two.
+
+## Prior art
+
+**Ant Popconfirm** is the API this answers to: `title`, `description`, `onConfirm`, `onCancel`, `okText`, `cancelText`, `okType`, `showCancel`, `placement`, `disabled`, and `okButtonProps={{ loading }}`. Every one of those has a direct equivalent here, most under the same name. **Mantine** has no Popconfirm and documents a Popover with two Buttons; **Chakra** the same, as a Popover-plus-Dialog hybrid; **shadcn** has none and reaches for AlertDialog. Ant is right that this is a distinct instrument, and its sibling page in the usage gallery shows why: same verb, same object, two very different amounts of ceremony.
+
+Where this is better than Ant: **the accessibility is real.** Ant's Popconfirm gives the trigger no ARIA at all and the bubble is not a dialog, so a screen-reader user is told nothing about the bubble that just appeared. Here the trigger carries the disclosure contract, the bubble is a `role='dialog'` named by its question, focus moves into it on open and back to the trigger on every dismissal path, and Escape is taken in the capture phase so a host listening for the same key cannot act on the same press. The positioning is also shared: `@placement` goes through the same `Popup` primitive Popover and Menu use, so the bubble flips and shifts near a viewport edge for free.
+
+Where it is thinner: **click only.** Ant's `trigger='hover'` is not offered, deliberately — a confirm that opens on hover is a footgun. There is no `icon` arg; the warning mark is fixed. `@tone` is the kit's tone set rather than Ant's `okType` button-type enum, and there is no `okButtonProps` pass-through: the footer block is the escape hatch when the two buttons need to be something else.
+
+## Accessibility
+
+Governing pattern: APG **Dialog (Non-Modal)** for the bubble, with the **Disclosure** contract on the trigger.
+
+What the component does, and the tests assert:
+
+- **The trigger's control gets `aria-haspopup='dialog'` and `aria-expanded`**, applied to the focusable element inside the trigger block, and removed again on teardown. A pre-existing `aria-haspopup` is put back rather than dropped.
+- **The bubble is `role='dialog'`** with `aria-label` from `@label`, else `@title`, else `'Confirm'`. Always give it a question; a bubble labelled "Confirm" in a page with three of them is not helpful.
+- **Focus lands on Cancel when it opens.** Cancel is the safe choice, so it takes the opening focus; with `@showCancel={{false}}` the confirm button takes it instead, so there is never an opening state where focus is nowhere.
+- **Every dismissal returns focus to the trigger**: confirm, cancel, and Escape all route through the same path. An outside click closes without moving focus, because the reader's pointer is already somewhere else.
+- **Escape cancels**, taken in the capture phase on the document while the bubble is open, and it runs `@onCancel` — the two dismissals are not distinguished.
+- **The warning mark is `aria-hidden`.** It is decoration; the question carries the meaning.
+
+The caller's part: put a real control in the trigger block. The contract is applied to the first focusable element found there, and a bare `<span>` gets it applied to the wrapper, which is announced as nothing. Keep `@title` a question that stands alone, since it is also the dialog's name. And do not make the confirm depend on colour: `@tone` tints the button, the label says what it does.
+
+## Theming
+
+Read directly: `--popover` and `--popover-foreground` (the bubble), `--radius-surface`, `--space-2`, `--space-3`, `--space-4`, `--font-sans`, `--text-ui-md` and `--text-ui-sm`, `--muted-foreground` (the description line), `--warning` and `--pretui-on-warning` (the mark), `--pretui-shadow-overlay`, and the enter motion pair `--pretui-dur-enter` / `--pretui-ease-enter`.
+
+One knob of its own: `--pretui-popconfirm-max-width` (default `min(280px, 100vw - 16px)`). The buttons are the kit's **Button** at size `s`, so they take the theme's control tokens through it; the confirm's color is whatever `@tone` resolves to in the theme.
+
+Entry motion is `@starting-style` (opacity plus a 0.97 scale, 180ms) with a `prefers-reduced-motion` opt-out. The 15px warning disc and its 9px glyph are fixed.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.
+
+## React ecosystem
+
+| Agent types                                 | Give them                                                    |
+| ------------------------------------------- | ------------------------------------------------------------ |
+| Ant `title` / `description`                 | `@title` / `@description`                                    |
+| Ant `onConfirm` / `onCancel`                | same                                                         |
+| Ant `okText` / `cancelText`                 | accepted as-is (aliases of `@confirmLabel` / `@cancelLabel`) |
+| Ant `okType='danger'`                       | `@tone='danger'` — the default                               |
+| Ant `showCancel` / `placement` / `disabled` | same                                                         |
+| Ant `okButtonProps={{ loading }}`           | `@busy`                                                      |
+| Ant `trigger='hover'`                       | not offered; click only                                      |
+| shadcn / Chakra "Popover + two buttons"     | this tile                                                    |
+| anything needing a paragraph or a field     | **AlertDialog**                                              |

package/bundled-realms/pretui/components/popconfirm.usage.gts

@@ -0,0 +1,171 @@
+// Pretui — Popconfirm usage page.
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { FreestyleUsage } from './freestyle-usage';
+import { Button } from './button';
+import { Popconfirm } from './popconfirm';
+import type { PopupPlacement } from '../internal/overlay';
+
+const PC_PLACEMENTS = ['top', 'bottom', 'left', 'right', 'top-start', 'bottom-end'];
+
+
+class PopconfirmUsage extends GlimmerComponent {
+  @tracked placement = 'top';
+  @tracked showCancel = true;
+  @tracked rows = ['Ethiopia Guji', 'Colombia Huila', 'Kenya Nyeri'];
+  @tracked log = '—';
+
+  setPlacement = (value: string) => (this.placement = value);
+  setShowCancel = (value: boolean) => (this.showCancel = value);
+
+  get placementValue() {
+    return this.placement as PopupPlacement;
+  }
+
+  dropFirst = () => {
+    let [head, ...rest] = this.rows;
+    if (!head) {
+      return;
+    }
+    this.rows = rest;
+    this.log = 'Removed ' + head;
+  };
+
+  kept = () => (this.log = 'Kept');
+
+  restore = () => {
+    this.rows = ['Ethiopia Guji', 'Colombia Huila', 'Kenya Nyeri'];
+    this.log = '—';
+  };
+
+  <template>
+    <FreestyleUsage
+      @name='Popconfirm'
+      @description="Ant's inline are-you-sure, anchored to the control it guards. Reach for it when the object of the verb is the thing you just clicked and it is still on screen — deleting this row, revoking this key — because the bubble points at the object, so the question needs no noun. Reach for AlertDialog instead when the consequence is not visible from where the click happened, needs more than a line to state, spans more than one object, or is genuinely irreversible. The tell that a Popconfirm should have been an AlertDialog: you find yourself wanting a third paragraph, a checkbox, or a type-the-name-to-confirm field in it."
+    >
+      <:example>
+        <ul class='oc-list'>
+          {{#each this.rows as |lot|}}
+            <li class='oc-lotrow'>
+              <span>{{lot}}</span>
+            </li>
+          {{/each}}
+        </ul>
+        <div class='oc-row'>
+          <Popconfirm
+            @title='Remove the top lot?'
+            @description='It leaves the board straight away.'
+            @confirmLabel='Remove'
+            @cancelLabel='Keep'
+            @placement={{this.placementValue}}
+            @showCancel={{this.showCancel}}
+            @onConfirm={{this.dropFirst}}
+            @onCancel={{this.kept}}
+          >
+            <:trigger as |isOpen toggle|>
+              <Button
+                @tone='danger'
+                @appearance='plain'
+                @size='s'
+                {{on 'click' toggle}}
+              >{{if isOpen 'Cancel' 'Remove top lot'}}</Button>
+            </:trigger>
+          </Popconfirm>
+          <Button @tone='neutral' @appearance='outlined' @size='s' {{on 'click' this.restore}}>
+            Restore
+          </Button>
+          <span class='oc-log'>last action: <strong>{{this.log}}</strong></span>
+        </div>
+        <p class='oc-hint'>Open it and focus is already on
+          <em>Keep</em>. Escape cancels and puts focus back on the trigger;
+          clicking elsewhere closes it without swallowing that click, so
+          pressing a button behind the bubble takes one press rather than two.</p>
+      </:example>
+      <:api as |Args|>
+        <Args.Base
+          @name='open / onOpenChange / defaultOpen'
+          @description='Same overlay contract as every other Pretui layer.'
+          @hideControls={{true}}
+        />
+        <Args.String
+          @name='placement'
+          @description='Where the bubble sits, through the same anchorTo primitive Popover and Menu use, so it flips and shifts near a viewport edge. Ant defaults to top and so does this.'
+          @value={{this.placement}}
+          @options={{PC_PLACEMENTS}}
+          @defaultValue='top'
+          @onInput={{this.setPlacement}}
+        />
+        <Args.Bool
+          @name='showCancel'
+          @description="Ant's own arg name. With no cancel the confirm button takes the opening focus instead, so there is never an opening state where focus is nowhere."
+          @value={{this.showCancel}}
+          @defaultValue={{true}}
+          @onInput={{this.setShowCancel}}
+        />
+        <Args.Base
+          @name='confirmLabel / cancelLabel'
+          @description='okText and cancelText are accepted as aliases, because that is what an agent trained on Ant will type. Defaults are Yes and No, which is the one place a bare yes/no is right — the question is one line and the object is on screen.'
+          @hideControls={{true}}
+        />
+        <Args.Base
+          @name='tone / busy / disabled'
+          @description='Tone defaults to danger. Busy holds the bubble open with the confirm pending. Disabled makes the trigger inert without removing it.'
+          @hideControls={{true}}
+        />
+        <Args.Yield
+          @name='trigger / default / footer'
+          @description='The trigger block yields the open state and a toggle; whatever focusable control it contains is given aria-haspopup=dialog and a live aria-expanded, and both are restored on teardown so the element is left as it was found. Ant gives the trigger no ARIA at all.'
+          @hideControls={{true}}
+        />
+      </:api>
+    </FreestyleUsage>
+
+    <style scoped>
+      .oc-list {
+        list-style: none;
+        margin: 0 0 var(--space-4, 11px);
+        padding: 0;
+        display: grid;
+        gap: 2px;
+        max-width: 260px;
+      }
+      .oc-lotrow {
+        padding: 5px 9px;
+        border-radius: var(--radius-control, 6px);
+        background: var(--inset, var(--boxel-100));
+        font-size: var(--text-ui-md, 12.5px);
+      }
+      .oc-row {
+        display: flex;
+        align-items: center;
+        gap: var(--space-3, 8px);
+        flex-wrap: wrap;
+      }
+      .oc-log {
+        font-size: var(--text-ui-sm, 11.5px);
+        color: var(--muted-foreground);
+      }
+      .oc-log strong {
+        color: var(--foreground);
+        font-weight: 600;
+      }
+      .oc-hint {
+        margin: var(--space-4, 11px) 0 0;
+        max-width: 62ch;
+        font-size: var(--text-ui-sm, 11.5px);
+        line-height: 1.6;
+        color: var(--muted-foreground);
+      }
+      .oc-hint em {
+        font-style: normal;
+        font-weight: 600;
+        color: var(--foreground);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_POPCONFIRM: Record<string, unknown> = {
+  Popconfirm: PopconfirmUsage,
+};