@dumiflex/wp-kit 0.0.0-stage → 0.3.0

package/src/Disclosure.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+/**
+ * Disclosure: a "show more" section that folds open under its heading. The
+ * heading is a button with `aria-expanded` + `aria-controls` (APG
+ * disclosure), the chevron turns when open, and the body grows to its height
+ * (no motion with `prefers-reduced-motion`). Works on the canvas and in the
+ * manager.
+ *
+ *   <Disclosure v-model:open="open" label="Advanced">…</Disclosure>
+ *   <Disclosure label="Rules" :count="3"><template #summary>…</template>…</Disclosure>
+ *
+ * Leave out `v-model:open` and it keeps its own state (`default-open` sets
+ * where it starts). `#actions` sits at the right end of the heading, outside
+ * the button, for controls that should not fold the section; `#lead` sits
+ * before the button for the same (a "select all" checkbox lined up with
+ * the rows' own). `lazy` builds
+ * the body only while it is open. `flush` makes the heading a full-width
+ * band with a rule under it and drops the body's indent, for a section of a
+ * table or list that fills its card (a group of options, a rule).
+ */
+import { computed, ref, useId, useSlots } from "vue";
+
+const props = withDefaults(defineProps<{
+  open?: boolean | undefined;
+  /** Where it starts when nobody binds `open`. */
+  defaultOpen?: boolean | undefined;
+  label?: string | undefined;
+  /** A small count after the label. */
+  count?: number | string | undefined;
+  size?: "sm" | "md" | undefined;
+  disabled?: boolean | undefined;
+  /** Draw a border and a padded body, for a section that stands alone. */
+  boxed?: boolean | undefined;
+  /** Full-width heading band, body without indent: a section of a table or list. */
+  flush?: boolean | undefined;
+  /** Build the body only while open (a long list, a costly panel). */
+  lazy?: boolean | undefined;
+  /** Extra attributes on the heading button, e.g. `data-test`. */
+  triggerAttrs?: Record<string, string> | undefined;
+}>(), { open: undefined, size: "md", triggerAttrs: undefined });
+
+const emit = defineEmits<{ (e: "update:open", v: boolean): void }>();
+const slots = useSlots();
+
+const own = ref(props.defaultOpen);
+const isOpen = computed(() => props.open ?? own.value);
+const bodyId = `wp-disclosure-${useId()}`;
+
+function toggle(): void {
+  if (props.disabled) return;
+  const next = !isOpen.value;
+  own.value = next;
+  emit("update:open", next);
+}
+</script>
+
+<template>
+  <div class="wp-disclosure" :data-size="size" :data-open="isOpen" :data-boxed="boxed || undefined" :data-flush="flush || undefined">
+    <div class="wp-disclosure__head">
+      <div v-if="slots.lead" class="wp-disclosure__lead"><slot name="lead" /></div>
+      <button
+        v-bind="triggerAttrs ?? {}"
+        type="button"
+        class="wp-disclosure__trigger"
+        :aria-expanded="isOpen"
+        :aria-controls="bodyId"
+        :disabled="disabled"
+        @click="toggle"
+      >
+        <i class="pi pi-chevron-right wp-disclosure__chev" aria-hidden="true" />
+        <slot name="summary">
+          <span class="wp-disclosure__label">{{ label }}</span>
+        </slot>
+        <span v-if="count !== undefined" class="wp-disclosure__count">{{ count }}</span>
+      </button>
+      <div v-if="slots.actions" class="wp-disclosure__actions"><slot name="actions" /></div>
+    </div>
+    <div :id="bodyId" class="wp-disclosure__body" :inert="!isOpen || undefined">
+      <div class="wp-disclosure__inner">
+        <div v-if="isOpen || !lazy" class="wp-disclosure__content"><slot /></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wp-disclosure { min-width: 0; }
+.wp-disclosure[data-boxed] {
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-md);
+  background: var(--wp-bg-1);
+}
+.wp-disclosure__head { display: flex; align-items: center; gap: var(--wp-space-3); min-width: 0; }
+.wp-disclosure[data-boxed] .wp-disclosure__head { padding: 0 var(--wp-space-3); }
+.wp-disclosure__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wp-space-3);
+  flex: 1;
+  min-width: 0;
+  min-height: var(--wp-control-h-md);
+  margin: 0;
+  padding: 0 var(--wp-space-2);
+  border: 0;
+  border-radius: var(--wp-radius-sm);
+  background: transparent;
+  color: var(--wp-text);
+  font: 600 var(--wp-text-sm)/1.3 var(--wp-font-sans);
+  text-align: left;
+  cursor: pointer;
+}
+.wp-disclosure[data-size="sm"] .wp-disclosure__trigger {
+  min-height: var(--wp-control-h-sm);
+  font-size: var(--wp-text-xs);
+  gap: var(--wp-space-2);
+}
+.wp-disclosure__trigger:hover:not(:disabled) { background: var(--wp-row-hover); }
+.wp-disclosure__trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-disclosure__trigger:disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-disclosure__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-disclosure__chev {
+  flex: none;
+  font-size: 0.75em;
+  color: var(--wp-text-muted);
+  transition: transform var(--wp-motion-swap) var(--wp-motion-curve-collapse);
+}
+.wp-disclosure[data-open="true"] .wp-disclosure__chev { transform: rotate(90deg); }
+.wp-disclosure__count {
+  padding: 1px 6px;
+  border-radius: var(--wp-radius-cap, 999px);
+  background: var(--wp-bg-3);
+  color: var(--wp-text-muted);
+  font-size: var(--wp-text-xs);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.wp-disclosure__lead { display: inline-flex; align-items: center; flex: none; }
+.wp-disclosure__actions { display: inline-flex; align-items: center; gap: var(--wp-space-2); flex: none; }
+/* Grid rows animate from 0fr to 1fr, so the body grows to its own height
+   without measuring it. */
+.wp-disclosure__body {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--wp-motion-swap) var(--wp-motion-curve-collapse);
+}
+.wp-disclosure[data-open="true"] > .wp-disclosure__body { grid-template-rows: 1fr; }
+.wp-disclosure__inner { min-height: 0; overflow: hidden; }
+.wp-disclosure__content { padding: var(--wp-space-3) 0 var(--wp-space-2) calc(var(--wp-space-2) + 1.1em + var(--wp-space-3)); }
+.wp-disclosure[data-size="sm"] .wp-disclosure__content { padding: var(--wp-space-2) 0 var(--wp-space-2) calc(var(--wp-space-2) + 1em); }
+.wp-disclosure[data-boxed] .wp-disclosure__content { padding: var(--wp-space-2) var(--wp-space-5) var(--wp-space-5); }
+.wp-disclosure[data-flush] > .wp-disclosure__head {
+  border-bottom: 1px solid var(--wp-border);
+  background: var(--wp-bg-2);
+}
+.wp-disclosure[data-flush] .wp-disclosure__trigger {
+  padding: 0 var(--wp-space-5);
+  border-radius: 0;
+  font-size: var(--wp-text-xs);
+}
+.wp-disclosure[data-flush] .wp-disclosure__trigger:focus-visible { box-shadow: inset 0 0 0 2px var(--wp-border-focus); }
+.wp-disclosure[data-flush] .wp-disclosure__content,
+.wp-disclosure[data-flush][data-size="sm"] .wp-disclosure__content { padding: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-disclosure__chev, .wp-disclosure__body { transition: none; }
+}
+</style>

package/src/DragHandle.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/**
+ * The six-dot grip on a row you drag to reorder (a module row, a bundle
+ * child, an injector binding). It only shows where to grab: the row owns the
+ * drag (HTML drag-and-drop or pointer events), so the grip is hidden from
+ * screen readers and the row gives keyboard users their own way to move it.
+ * For a list that the kit should reorder itself, with keyboard moves, use
+ * SortableList.
+ *
+ *   <DragHandle />            the canvas row size
+ *   <DragHandle size="md" />  a manager row
+ *
+ * Reads only the shared tokens, so it works on the canvas and on a page.
+ */
+withDefaults(defineProps<{
+  size?: "sm" | "md" | undefined;
+  /** Tooltip on hover. */
+  title?: string | undefined;
+}>(), { size: "sm", title: "Drag to reorder" });
+</script>
+
+<template>
+  <span class="wp-drag-grip" :data-size="size" :title="title" aria-hidden="true">
+    <svg viewBox="0 0 6 12" fill="currentColor" focusable="false">
+      <circle cx="1.5" cy="2" r="1" />
+      <circle cx="4.5" cy="2" r="1" />
+      <circle cx="1.5" cy="6" r="1" />
+      <circle cx="4.5" cy="6" r="1" />
+      <circle cx="1.5" cy="10" r="1" />
+      <circle cx="4.5" cy="10" r="1" />
+    </svg>
+  </span>
+</template>
+
+<style scoped>
+.wp-drag-grip {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 12px;
+  height: 20px;
+  color: var(--wp-text-dim);
+  cursor: grab;
+}
+.wp-drag-grip[data-size="md"] { width: 16px; height: 24px; }
+.wp-drag-grip svg { width: 6px; height: 12px; }
+.wp-drag-grip[data-size="md"] svg { width: 8px; height: 16px; }
+.wp-drag-grip:hover { color: var(--wp-text-muted); }
+</style>

package/src/Drawer.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+/**
+ * A panel that slides in from the side of the page: inspectors, history,
+ * settings that sit beside the work instead of over it. Escape closes it,
+ * Tab stays inside it and focus goes back where it was. With `modal` off
+ * there is no backdrop, Tab moves on to the page and the page stays usable.
+ */
+import CloseButton from "./CloseButton.vue";
+import { ref, useId, useSlots } from "vue";
+import { useDialogFocus } from "./useDialogFocus";
+
+interface Props {
+  open: boolean;
+  title?: string | undefined;
+  side?: "right" | "left" | undefined;
+  /** Any CSS width; capped at the viewport. */
+  width?: string | undefined;
+  /** Dim the page and close on a click outside. */
+  modal?: boolean | undefined;
+}
+const props = withDefaults(defineProps<Props>(), { side: "right", width: "420px", modal: true });
+const emit = defineEmits<{ (e: "update:open", v: boolean): void }>();
+
+const slots = useSlots();
+const panel = ref<HTMLElement | null>(null);
+const titleId = `wp-drawer-title-${useId()}`;
+
+function close(): void {
+  emit("update:open", false);
+}
+
+// The backdrop is a click target only; keyboard users close with Escape.
+function bindBackdrop(el: unknown): void {
+  if (el instanceof HTMLElement) el.onmousedown = (ev) => { if (ev.target === el) close(); };
+}
+
+useDialogFocus(panel, () => props.open, {
+  onEscape: close,
+  trap: () => props.modal,
+  // The first control in the body, not the close button.
+  initial: (root, els) => {
+    const body = root.querySelector(".wp-drawer__body");
+    return els.find((el) => body?.contains(el)) ?? root;
+  },
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="wp-drawer-fade">
+      <div v-if="open && modal" :ref="bindBackdrop" class="wp-drawer__backdrop" data-test="drawer-backdrop" />
+    </Transition>
+    <Transition :name="`wp-drawer-${side}`">
+      <aside
+        v-if="open"
+        ref="panel"
+        class="wp-drawer"
+        :class="`wp-drawer--${side}`"
+        :style="{ width: `min(${width}, 100vw)` }"
+        role="dialog"
+        :aria-modal="modal || undefined"
+        :aria-labelledby="title ? titleId : undefined"
+        tabindex="-1"
+      >
+        <header v-if="title || slots.header" class="wp-drawer__head">
+          <h3 v-if="title" :id="titleId" class="wp-drawer__title">{{ title }}</h3>
+          <slot name="header" />
+          <span class="wp-spacer" />
+          <CloseButton kbd="Esc" data-test="drawer-close" @click="close" />
+        </header>
+        <div class="wp-drawer__body">
+          <slot />
+        </div>
+        <footer v-if="slots.footer" class="wp-drawer__foot">
+          <slot name="footer" />
+        </footer>
+      </aside>
+    </Transition>
+  </Teleport>
+</template>
+
+<style>
+.wp-drawer__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  background: var(--wp-overlay-bg);
+}
+.wp-drawer {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 9001;
+  display: flex;
+  flex-direction: column;
+  background: var(--wp-bg-1);
+  color: var(--wp-text);
+  box-shadow: var(--wp-shadow-xl);
+  outline: none;
+}
+.wp-drawer--right { right: 0; border-left: 1px solid var(--wp-border); }
+.wp-drawer--left { left: 0; border-right: 1px solid var(--wp-border); }
+.wp-drawer__head {
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-3);
+  min-height: 52px;
+  padding: 0 var(--wp-space-4) 0 var(--wp-space-5);
+  border-bottom: 1px solid var(--wp-border);
+}
+.wp-drawer__title { margin: 0; font-size: var(--wp-text-md); font-weight: 600; }
+.wp-drawer__body { flex: 1; min-height: 0; overflow: auto; padding: var(--wp-space-5); }
+.wp-drawer__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--wp-space-3);
+  padding: var(--wp-space-4) var(--wp-space-5);
+  border-top: 1px solid var(--wp-border);
+}
+.wp-drawer-right-enter-active, .wp-drawer-right-leave-active,
+.wp-drawer-left-enter-active, .wp-drawer-left-leave-active { transition: transform 180ms ease-out; }
+.wp-drawer-right-enter-from, .wp-drawer-right-leave-to { transform: translateX(100%); }
+.wp-drawer-left-enter-from, .wp-drawer-left-leave-to { transform: translateX(-100%); }
+.wp-drawer-fade-enter-active, .wp-drawer-fade-leave-active { transition: opacity 180ms ease-out; }
+.wp-drawer-fade-enter-from, .wp-drawer-fade-leave-to { opacity: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-drawer-right-enter-active, .wp-drawer-right-leave-active,
+  .wp-drawer-left-enter-active, .wp-drawer-left-leave-active,
+  .wp-drawer-fade-enter-active, .wp-drawer-fade-leave-active { transition: none; }
+}
+</style>

package/src/DropZone.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+/**
+ * Drop zone: where files go, by dragging them in or with Browse. It lights
+ * up when a file it takes is dragged over, turns red with the reason when
+ * it won't take it, and says what it takes. Works on the canvas and in the
+ * manager.
+ *
+ *   <DropZone accept=".txt,.yaml,.yml,.zip" multiple hint="Wildcard files or a zip" @files="load" />
+ *   <DropZone overlay accept="image/*" label="Drop images to attach" @files="attach"><ChatThread /></DropZone>
+ *
+ * `overlay` wraps content (a chat, a panel) and only shows while a file is
+ * dragged over it. Files the zone can't take (wrong type, over `max-size`,
+ * more than one without `multiple`) come back on `reject` with a reason,
+ * and the rest on `files`. Browse keeps it usable without a mouse.
+ */
+import { computed, ref } from "vue";
+import { dragItemMaybeAccepted, fileAccepted, formatBytes } from "./drop-zone";
+import WpButton from "./WpButton.vue";
+
+export interface RejectedFile { file: File; reason: string }
+
+const props = withDefaults(defineProps<{
+  /** Like the file input's accept: "image/*,.txt". Empty takes anything. */
+  accept?: string | undefined;
+  multiple?: boolean | undefined;
+  /** Largest file in bytes. */
+  maxSize?: number | undefined;
+  disabled?: boolean | undefined;
+  /** Wrap the slot and show only while a file is dragged over it. */
+  overlay?: boolean | undefined;
+  /** The main line. */
+  label?: string | undefined;
+  /** The line under it, e.g. what it takes. */
+  hint?: string | undefined;
+  /** Words for the Browse button. */
+  browseLabel?: string | undefined;
+  size?: "sm" | "md" | undefined;
+}>(), {
+  accept: undefined, maxSize: undefined, label: undefined, hint: undefined,
+  browseLabel: "Browse", size: "md",
+});
+
+const emit = defineEmits<{ (e: "files", files: File[]): void; (e: "reject", files: RejectedFile[]): void }>();
+
+const inputEl = ref<HTMLInputElement | null>(null);
+const over = ref<"none" | "ok" | "refuse">("none");
+const refuseWhy = ref("");
+let depth = 0;
+
+const mainLabel = computed(() => props.label ?? (props.multiple ? "Drop files here" : "Drop a file here"));
+
+function hasFiles(ev: DragEvent): boolean {
+  return !!ev.dataTransfer && [...ev.dataTransfer.types].includes("Files");
+}
+
+function judge(ev: DragEvent): void {
+  const items = [...(ev.dataTransfer?.items ?? [])].filter((i) => i.kind === "file");
+  if (!props.multiple && items.length > 1) { over.value = "refuse"; refuseWhy.value = "One file at a time"; return; }
+  if (items.some((i) => !dragItemMaybeAccepted(i.type, props.accept))) {
+    over.value = "refuse";
+    refuseWhy.value = props.hint ? `Only ${props.hint}` : "This kind of file isn't taken here";
+    return;
+  }
+  over.value = "ok";
+}
+
+function onDragEnter(ev: DragEvent): void {
+  if (props.disabled || !hasFiles(ev)) return;
+  ev.preventDefault();
+  depth++;
+  judge(ev);
+}
+
+function onDragOver(ev: DragEvent): void {
+  if (props.disabled || !hasFiles(ev)) return;
+  ev.preventDefault();
+  if (ev.dataTransfer) ev.dataTransfer.dropEffect = over.value === "refuse" ? "none" : "copy";
+}
+
+function onDragLeave(ev: DragEvent): void {
+  if (props.disabled || !hasFiles(ev)) return;
+  depth = Math.max(0, depth - 1);
+  if (!depth) over.value = "none";
+}
+
+function take(list: File[]): void {
+  const ok: File[] = [];
+  const bad: RejectedFile[] = [];
+  for (const f of list) {
+    if (!fileAccepted(f, props.accept)) bad.push({ file: f, reason: "Not a file this takes" });
+    else if (props.maxSize !== undefined && f.size > props.maxSize) bad.push({ file: f, reason: `Over ${formatBytes(props.maxSize)}` });
+    else if (!props.multiple && ok.length) bad.push({ file: f, reason: "One file at a time" });
+    else ok.push(f);
+  }
+  if (ok.length) emit("files", ok);
+  if (bad.length) emit("reject", bad);
+}
+
+function onDrop(ev: DragEvent): void {
+  if (props.disabled || !hasFiles(ev)) return;
+  ev.preventDefault();
+  depth = 0;
+  over.value = "none";
+  take([...(ev.dataTransfer?.files ?? [])]);
+}
+
+function browse(): void {
+  if (!props.disabled) inputEl.value?.click();
+}
+
+function onPicked(ev: Event): void {
+  const el = ev.target as HTMLInputElement;
+  take([...(el.files ?? [])]);
+  el.value = "";
+}
+
+defineExpose({ browse });
+</script>
+
+<!-- A drop target: Browse is the keyboard and screen reader way in. -->
+<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+<template>
+  <div
+    v-if="overlay"
+    class="wp-drop-wrap"
+    :data-over="over === 'none' ? undefined : over"
+    @dragenter="onDragEnter"
+    @dragover="onDragOver"
+    @dragleave="onDragLeave"
+    @drop="onDrop"
+  >
+    <slot />
+    <div v-if="over !== 'none'" class="wp-drop wp-drop--overlay" :data-over="over" :data-size="size" aria-hidden="true">
+      <i class="pi wp-drop__icon" :class="over === 'refuse' ? 'pi-ban' : 'pi-upload'" />
+      <span class="wp-drop__label">{{ over === "refuse" ? refuseWhy : mainLabel }}</span>
+    </div>
+    <input ref="inputEl" class="wp-drop__input" type="file" :accept="accept" :multiple="multiple" tabindex="-1" aria-hidden="true" @change="onPicked">
+  </div>
+  <div
+    v-else
+    class="wp-drop"
+    :data-over="over === 'none' ? undefined : over"
+    :data-size="size"
+    :data-disabled="disabled || undefined"
+    @dragenter="onDragEnter"
+    @dragover="onDragOver"
+    @dragleave="onDragLeave"
+    @drop="onDrop"
+  >
+    <i class="pi wp-drop__icon" :class="over === 'refuse' ? 'pi-ban' : 'pi-upload'" aria-hidden="true" />
+    <span class="wp-drop__text">
+      <span class="wp-drop__label">{{ over === "refuse" ? refuseWhy : mainLabel }}</span>
+      <span v-if="hint && over !== 'refuse'" class="wp-drop__hint">{{ hint }}{{ maxSize ? ` · up to ${formatBytes(maxSize)}` : "" }}</span>
+    </span>
+    <WpButton class="wp-drop__browse" variant="secondary" size="sm" icon="pi-folder-open" :disabled="disabled" @click="browse">{{ browseLabel }}</WpButton>
+    <input ref="inputEl" class="wp-drop__input" type="file" :accept="accept" :multiple="multiple" tabindex="-1" aria-hidden="true" @change="onPicked">
+  </div>
+</template>
+
+<style scoped>
+.wp-drop {
+  --_tone: var(--wp-border-strong);
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wp-space-3);
+  box-sizing: border-box; min-width: 0; padding: var(--wp-space-7) var(--wp-space-5);
+  border: 1.5px dashed var(--_tone); border-radius: var(--wp-radius-md);
+  background: var(--wp-bg-1); color: var(--wp-text-muted); text-align: center;
+  font: 400 var(--wp-text-sm)/1.4 var(--wp-font-sans);
+  transition: border-color var(--wp-motion-hover), background var(--wp-motion-hover);
+}
+.wp-drop[data-size="sm"] {
+  flex-direction: row; justify-content: flex-start; gap: var(--wp-space-4); text-align: left;
+  padding: var(--wp-space-3) var(--wp-space-4); border-radius: var(--wp-radius); font-size: var(--wp-text-xs);
+}
+.wp-drop[data-over="ok"] { --_tone: var(--wp-accent); background: color-mix(in srgb, var(--wp-accent) 8%, var(--wp-bg-1)); color: var(--wp-text); }
+.wp-drop[data-over="refuse"] { --_tone: var(--wp-danger); background: color-mix(in srgb, var(--wp-danger) 8%, var(--wp-bg-1)); color: var(--wp-danger-text); }
+.wp-drop[data-disabled] { opacity: 0.45; }
+.wp-drop__icon { font-size: 20px; color: var(--_tone); }
+.wp-drop[data-over="ok"] .wp-drop__icon { color: var(--wp-accent-text); }
+.wp-drop[data-size="sm"] .wp-drop__icon { font-size: 14px; }
+.wp-drop__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.wp-drop[data-size="sm"] .wp-drop__text { flex: 1; }
+.wp-drop__label { color: inherit; font-weight: 500; }
+.wp-drop:not([data-over]) .wp-drop__label { color: var(--wp-text); }
+.wp-drop__hint { color: var(--wp-text-dim); font-size: var(--wp-text-xs); }
+.wp-drop__browse { flex: none; }
+.wp-drop__input { display: none; }
+.wp-drop-wrap { position: relative; min-width: 0; min-height: 0; }
+.wp-drop--overlay {
+  position: absolute; inset: var(--wp-space-2); z-index: 5; pointer-events: none;
+  background: color-mix(in srgb, var(--wp-bg) 82%, transparent); backdrop-filter: blur(2px);
+}
+.wp-drop--overlay[data-over="ok"] { background: color-mix(in srgb, var(--wp-accent) 12%, var(--wp-bg)); }
+@media (prefers-reduced-motion: reduce) {
+  .wp-drop { transition: none; }
+}
+</style>

package/src/DropdownMenu.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * A list of actions behind a button: the "⋯" menu, "More", "Add…". The
+ * trigger toggles it; arrows, Home/End and Enter work; Escape or a pick
+ * closes it and focus goes back to the trigger. Items are ContextMenu
+ * entries (sections, icons, dividers, danger, subtitles), so a row's
+ * right-click menu and its ⋯ menu can share one list.
+ *
+ *   <DropdownMenu :items="rowActions" label="Hair colour actions">
+ *     <template #trigger="{ props }"><Button v-bind="props" variant="ghost" icon="pi-ellipsis-h" aria-label="More" /></template>
+ *   </DropdownMenu>
+ */
+import { computed, ref } from "vue";
+import ContextMenu, { type ContextMenuEntry, type ContextMenuHeader } from "./ContextMenu.vue";
+import type { Placement } from "./floating";
+
+const props = withDefaults(defineProps<{
+  items: ContextMenuEntry[];
+  header?: ContextMenuHeader | undefined;
+  placement?: Placement | undefined;
+  /** Names the menu for screen readers when the trigger is an icon. */
+  label?: string | undefined;
+}>(), { placement: "bottom-start" });
+
+const open = ref(false);
+const anchorEl = ref<HTMLElement | null>(null);
+
+function trigger(): HTMLElement | null {
+  return (anchorEl.value?.firstElementChild as HTMLElement | null) ?? anchorEl.value;
+}
+
+function close(): void {
+  if (!open.value) return;
+  open.value = false;
+  trigger()?.focus();
+}
+
+const triggerProps = computed(() => ({
+  "aria-haspopup": "menu" as const,
+  "aria-expanded": open.value,
+  "aria-label": props.label,
+  onClick: () => { open.value = !open.value; },
+  onKeydown: (ev: KeyboardEvent) => {
+    if ((ev.key === "ArrowDown" || ev.key === "ArrowUp") && !open.value) {
+      ev.preventDefault();
+      open.value = true;
+    }
+  },
+}));
+</script>
+
+<template>
+  <span ref="anchorEl" class="wp-dropdown-anchor">
+    <slot name="trigger" :props="triggerProps" :open="open" />
+  </span>
+  <ContextMenu
+    :visible="open"
+    :x="0"
+    :y="0"
+    :anchor="trigger()"
+    :placement="placement"
+    :items="items"
+    :header="header"
+    @close="close"
+  />
+</template>
+
+<style>
+@layer wp-extension {
+  .wp-dropdown-anchor { display: inline-flex; }
+}
+</style>