@dumiflex/wp-kit 0.0.0-stage → 0.3.0

package/src/Logo.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+/** Gradient ids must be unique on the page, and two logos may wear different
+ *  brands, so count across every app on it. */
+let nextId = 0;
+</script>
+
+<script setup lang="ts">
+/**
+ * The Wildcard Pipeline logo, drawn inline so it needs no file. It names
+ * itself to screen readers; `decorative` hides it when the name is written
+ * beside it (the top bar's brand). `brand="community"` draws it in the
+ * community site's colours.
+ *
+ *   <Logo :size="22" decorative />
+ */
+import { computed } from "vue";
+import { BRAND_COLOURS, type LogoBrand } from "./logo-paths";
+
+const props = withDefaults(defineProps<{
+  size?: number | undefined;
+  decorative?: boolean | undefined;
+  brand?: LogoBrand | undefined;
+}>(), { size: 28, brand: "extension" });
+
+const id = `wp-logo-${nextId++}`;
+const c = computed(() => BRAND_COLOURS[props.brand]);
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    :width="size"
+    :height="size"
+    :role="decorative ? undefined : 'img'"
+    :aria-label="decorative ? undefined : 'Wildcard Pipeline'"
+    :aria-hidden="decorative || undefined"
+    class="wp-logo"
+  >
+    <defs>
+      <linearGradient :id="`${id}a`" x1="312.56" y1="897.19" x2="312.56" y2="2" gradientUnits="userSpaceOnUse">
+        <stop offset="0" :stop-color="c[0]" />
+        <stop offset="1" :stop-color="c[1]" />
+      </linearGradient>
+      <linearGradient :id="`${id}b`" x1="711.44" y1="126.81" x2="711.44" y2="1022" gradientUnits="userSpaceOnUse">
+        <stop offset="0" :stop-color="c[1]" />
+        <stop offset="1" :stop-color="c[2]" />
+      </linearGradient>
+    </defs>
+    <path :fill="`url(#${id}a)`" d="m512,2c-53.6,0-98.47,38.16-108.84,88.73-75.07,19.29-143.32,58.26-198.74,113.68-55.42,55.42-94.39,123.68-113.68,198.74-50.58,10.38-88.73,55.24-88.73,108.84s38.16,98.47,88.73,108.84c13.62,53.14,37.03,102.64,69.77,147.47,37.14,50.86,85.83,93.86,140.81,124.33,5.54,3.08,11.56,4.54,17.48,4.54,12.7,0,25.02-6.72,31.61-18.61,9.68-17.44,3.38-39.42-14.07-49.09-85.32-47.32-147.22-125.71-173.38-218.21,36.3-18.29,61.27-55.92,61.27-99.28s-24.94-80.97-61.23-99.27c34.22-119.96,129.79-215.52,249.74-249.74,18.3,36.29,55.92,61.23,99.27,61.23,61.27,0,111.11-49.84,111.11-111.11S573.27,2,512,2ZM113.11,473.11c21.44,0,38.89,17.44,38.89,38.89,0,20.1-15.32,36.69-34.91,38.69h-.01c-.18.02-.36.03-.53.04-1.13.1-2.28.16-3.43.16-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89Zm398.89-321.11c-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89,38.89,17.44,38.89,38.89-17.44,38.89-38.89,38.89Z" />
+    <path :fill="`url(#${id}b)`" d="m933.27,403.16c-13.62-53.14-37.03-102.64-69.77-147.47-37.14-50.86-85.83-93.86-140.81-124.33-17.44-9.68-39.42-3.38-49.09,14.07-9.68,17.44-3.38,39.42,14.07,49.09,85.32,47.32,147.22,125.71,173.38,218.21-36.3,18.29-61.27,55.92-61.27,99.28s24.94,80.97,61.23,99.27c-34.22,119.96-129.79,215.52-249.74,249.74-18.3-36.29-55.92-61.23-99.27-61.23-61.27,0-111.11,49.84-111.11,111.11s49.84,111.11,111.11,111.11c53.6,0,98.47-38.16,108.84-88.73,75.07-19.29,143.32-58.26,198.74-113.68,55.42-55.42,94.39-123.68,113.68-198.74,50.58-10.38,88.73-55.24,88.73-108.84s-38.16-98.47-88.73-108.84Zm-421.27,546.62c-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89,38.89,17.44,38.89,38.89-17.44,38.89-38.89,38.89Zm398.89-398.89c-21.44,0-38.89-17.44-38.89-38.89,0-20.03,15.22-36.58,34.72-38.67.38-.04.77-.08,1.16-.11h.02c.99-.08,1.99-.11,2.99-.11,21.44,0,38.89,17.44,38.89,38.89s-17.44,38.89-38.89,38.89Z" />
+    <path :fill="c[0]" d="m735.02,517.56c-153.82,30.87-186.59,63.64-217.46,217.46-1.22,6.08-9.9,6.08-11.12,0-30.87-153.82-63.64-186.59-217.46-217.46-6.08-1.22-6.08-9.9,0-11.12,153.82-30.87,186.59-63.64,217.46-217.46,1.22-6.08,9.9-6.08,11.12,0,30.87,153.82,63.64,186.59,217.46,217.46,6.08,1.22,6.08,9.9,0,11.12Z" />
+    <path :fill="c[1]" d="m434.06,665.85c-51.08,10.25-61.96,21.13-72.22,72.22-.41,2.02-3.29,2.02-3.69,0-10.25-51.08-21.13-61.96-72.22-72.22-2.02-.41-2.02-3.29,0-3.69,51.08-10.25,61.96-21.13,72.22-72.22.41-2.02,3.29-2.02,3.69,0,10.25,51.08,21.13,61.96,72.22,72.22,2.02.41,2.02,3.29,0,3.69Z" />
+    <path :fill="c[2]" d="m738.07,361.84c-51.08,10.25-61.96,21.13-72.22,72.22-.41,2.02-3.29,2.02-3.69,0-10.25-51.08-21.13-61.96-72.22-72.22-2.02-.41-2.02-3.29,0-3.69,51.08-10.25,61.96-21.13,72.22-72.22.41-2.02,3.29-2.02,3.69,0,10.25,51.08,21.13,61.96,72.22,72.22,2.02.41,2.02,3.29,0,3.69Z" />
+  </svg>
+</template>
+
+<style scoped>
+.wp-logo { display: block; flex-shrink: 0; }
+</style>

package/src/Modal.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import CloseButton from "./CloseButton.vue";
+import { computed, ref, useId, useSlots } from "vue";
+import { useDialogFocus } from "./useDialogFocus";
+
+interface Props {
+  open: boolean;
+  title?: string | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  closeOnBackdrop?: boolean | undefined;
+}
+const props = withDefaults(defineProps<Props>(), { size: "md", closeOnBackdrop: true });
+
+const emit = defineEmits<{
+  (e: "update:open", v: boolean): void;
+}>();
+
+const slots = useSlots();
+
+const modalClasses = computed(() => ["wp-modal", `wp-modal--${props.size}`]);
+const dialog = ref<HTMLElement | null>(null);
+const titleId = `wp-modal-title-${useId()}`;
+
+function close() {
+  emit("update:open", false);
+}
+
+function onBackdrop() {
+  if (props.closeOnBackdrop) close();
+}
+
+useDialogFocus(dialog, () => props.open, {
+  onEscape: close,
+  // The first control in the body, else the dialog itself (the close button
+  // would make Enter close it).
+  initial: (root, els) => {
+    const body = root.querySelector(".wp-modal__body");
+    return els.find((el) => body?.contains(el)) ?? root;
+  },
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="wp-modal__backdrop"
+      data-test="modal-backdrop"
+      @mousedown.self="onBackdrop"
+    >
+      <div
+        ref="dialog"
+        :class="modalClasses"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="title || slots.header ? titleId : undefined"
+        tabindex="-1"
+        @mousedown.stop
+      >
+        <header v-if="title || slots.header" class="wp-modal__head">
+          <h3 v-if="title" :id="titleId" class="wp-modal__title">{{ title }}</h3>
+          <!-- A custom header puts :id="titleId" on its own heading. -->
+          <slot name="header" :title-id="titleId" />
+          <span class="wp-spacer" />
+          <CloseButton kbd="Esc" @click="close" />
+        </header>
+        <div class="wp-modal__body">
+          <slot />
+        </div>
+        <footer v-if="slots.footer" class="wp-modal__foot">
+          <slot name="footer" />
+        </footer>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/ModalShell.vue

@@ -0,0 +1,107 @@
+<template>
+  <Teleport to="body">
+    <Transition name="wp-modal" appear>
+      <div v-if="visible" ref="overlayEl" class="wp-modal-overlay" @click="$emit('close')">
+        <div
+          class="wp-modal-wrapper"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="label"
+          :aria-labelledby="labelledby"
+          @click.stop
+        >
+          <slot></slot>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount } from "vue";
+import { useModalKeyShield } from "./useModalKeyShield";
+
+const props = defineProps<{
+  visible: boolean;
+  /** The dialog's name when it has no visible title. */
+  label?: string | undefined;
+  /** Id of the element that names the dialog (its title). */
+  labelledby?: string | undefined;
+}>();
+const emit = defineEmits<{
+  (e: "close"): void;
+  /** Every keydown inside the modal. Consumers MUST use this instead of a
+   *  window listener: the shield stops inside-modal keys at the overlay, so a
+   *  window listener would never see them. */
+  (e: "keydown", ev: KeyboardEvent): void;
+}>();
+
+const overlayEl = ref<HTMLElement | null>(null);
+
+function closeOnEscape(event: KeyboardEvent): void {
+  if (!props.visible || event.key !== "Escape") return;
+  event.preventDefault();
+  emit("close");
+}
+
+// Keys pressed INSIDE the modal are handled here and stop at the overlay, so
+// they never reach ComfyUI's global shortcuts (see useModalKeyShield).
+useModalKeyShield(overlayEl, {
+  onKey: (ev) => {
+    emit("keydown", ev);
+    closeOnEscape(ev);
+  },
+});
+
+// The window listener still covers the case where focus is OUTSIDE the modal
+// — clicking the canvas leaves the modal open but unfocused, and Escape should
+// still close it. Events from inside never get here; the shield stops them.
+function onKeydown(event: KeyboardEvent) {
+  closeOnEscape(event);
+}
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) window.addEventListener("keydown", onKeydown);
+    else window.removeEventListener("keydown", onKeydown);
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+</script>
+
+<style>
+@import "./_modal-motion.css";
+</style>
+
+<style scoped>
+.wp-modal-overlay,
+.wp-modal-overlay * {
+  box-sizing: border-box;
+}
+.wp-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: var(--wp-overlay-bg, rgba(0, 0, 0, 0.62));
+  font-family: var(--wp-font-sans, sans-serif);
+  cursor: default;
+}
+.wp-modal-wrapper {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-height: 100%;
+}
+
+/* `wp-modal` open/close transition lives in
+ * src/components/shared/_modal-motion.css (imported globally via
+ * ContextWidget) so every modal — ModalShell consumers, ConfirmDialog,
+ * InjectorBindingModal — animates with the same rules. */
+</style>

package/src/Pagination.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+/**
+ * Pagination: move through a long list a page at a time, or load more at
+ * its end. Works on the canvas and in the manager.
+ *
+ *   <Pagination v-model:page="page" :total="rows.length" :page-size="50" />
+ *   <Pagination mode="more" :shown="shown.length" :total="230" :loading="busy" @more="loadMore" />
+ *
+ * Pages: a `nav` with Previous / Next and the page numbers (first, last, the
+ * current page with `siblings` either side, "…" between), the current one
+ * marked `aria-current="page"`. More: one "Load more" button under a
+ * "Showing 50 of 230" line. Nothing is drawn when everything fits on one page.
+ */
+import { computed } from "vue";
+import { pageItems } from "./pagination";
+import WpButton from "./WpButton.vue";
+
+const props = withDefaults(defineProps<{
+  /** pages: numbered pages. more: a Load more button. */
+  mode?: "pages" | "more" | undefined;
+  /** The current page, from 1. */
+  page?: number | undefined;
+  /** How many items there are in all. */
+  total: number;
+  pageSize?: number | undefined;
+  /** Pages shown either side of the current one. */
+  siblings?: number | undefined;
+  /** In "more" mode: how many items are on screen. */
+  shown?: number | undefined;
+  loading?: boolean | undefined;
+  disabled?: boolean | undefined;
+  size?: "sm" | "md" | undefined;
+  /** The item's name in "Showing 50 of 230 modules". */
+  noun?: string | undefined;
+  ariaLabel?: string | undefined;
+}>(), { mode: "pages", page: 1, pageSize: 25, siblings: 1, shown: 0, size: "md", noun: undefined, ariaLabel: "Pages" });
+
+const emit = defineEmits<{ (e: "update:page", v: number): void; (e: "more"): void }>();
+
+const pages = computed(() => Math.max(1, Math.ceil(props.total / Math.max(1, props.pageSize))));
+const items = computed(() => pageItems(props.page, pages.value, props.siblings));
+const from = computed(() => Math.min(props.total, (props.page - 1) * props.pageSize + 1));
+const to = computed(() => Math.min(props.total, props.page * props.pageSize));
+
+function go(p: number): void {
+  const next = Math.min(Math.max(1, p), pages.value);
+  if (next !== props.page && !props.disabled) emit("update:page", next);
+}
+const btnSize = computed(() => (props.size === "sm" ? "sm" : "md"));
+</script>
+
+<template>
+  <nav v-if="mode === 'pages' && pages > 1" class="wp-paging" :data-size="size" :aria-label="ariaLabel">
+    <span class="wp-paging__range" aria-live="polite">{{ from }}–{{ to }} of {{ total }}</span>
+    <ul class="wp-paging__list">
+      <li>
+        <WpButton variant="ghost" :size="btnSize" icon="pi-chevron-left" aria-label="Previous page" :disabled="disabled || props.page <= 1" @click="go(props.page - 1)" />
+      </li>
+      <li v-for="it in items" :key="it">
+        <span v-if="typeof it !== 'number'" class="wp-paging__gap" aria-hidden="true">…</span>
+        <button
+          v-else
+          type="button"
+          class="wp-paging__page"
+          :data-size="size"
+          :aria-current="it === page ? 'page' : undefined"
+          :aria-label="`Page ${it}`"
+          :disabled="disabled"
+          @click="go(it)"
+        >{{ it }}</button>
+      </li>
+      <li>
+        <WpButton variant="ghost" :size="btnSize" icon="pi-chevron-right" aria-label="Next page" :disabled="disabled || props.page >= pages" @click="go(props.page + 1)" />
+      </li>
+    </ul>
+  </nav>
+  <div v-else-if="mode === 'more' && total > 0" class="wp-paging wp-paging--more" :data-size="size">
+    <span class="wp-paging__range" aria-live="polite">Showing {{ Math.min(props.shown, total) }} of {{ total }}{{ noun ? ` ${noun}` : "" }}</span>
+    <WpButton v-if="props.shown < total" variant="secondary" :size="btnSize" :loading="loading" :disabled="disabled" @click="emit('more')">Load more</WpButton>
+  </div>
+</template>
+
+<style scoped>
+.wp-paging {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-4); flex-wrap: wrap;
+  min-width: 0; color: var(--wp-text-muted); font: 400 var(--wp-text-sm)/1.2 var(--wp-font-sans);
+}
+.wp-paging[data-size="sm"] { font-size: var(--wp-text-xs); gap: var(--wp-space-3); }
+.wp-paging--more { flex-direction: column; justify-content: center; }
+.wp-paging__range { font-variant-numeric: tabular-nums; }
+.wp-paging__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.wp-paging__gap { display: inline-grid; place-items: center; min-width: 20px; color: var(--wp-text-dim); }
+.wp-paging__page {
+  display: inline-grid; place-items: center; box-sizing: border-box;
+  min-width: var(--wp-control-h-md); height: var(--wp-control-h-md); margin: 0; padding: 0 var(--wp-space-2);
+  border: 1px solid transparent; border-radius: var(--wp-radius);
+  background: transparent; color: var(--wp-text-muted); font: 500 var(--wp-text-sm)/1 var(--wp-font-sans);
+  font-variant-numeric: tabular-nums; cursor: pointer;
+  transition: background var(--wp-motion-hover), color var(--wp-motion-hover);
+}
+.wp-paging__page[data-size="sm"] { min-width: var(--wp-control-h-sm); height: var(--wp-control-h-sm); border-radius: var(--wp-radius-sm); font-size: var(--wp-text-xs); }
+.wp-paging__page:hover:not(:disabled) { background: var(--wp-row-hover); color: var(--wp-text); }
+.wp-paging__page[aria-current="page"] { border-color: var(--wp-border-strong); background: var(--wp-bg-3); color: var(--wp-text); font-weight: 600; }
+.wp-paging__page:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-paging__page:disabled { opacity: 0.45; cursor: not-allowed; }
+</style>

package/src/Popover.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+/**
+ * A panel anchored to a trigger: opens below it (or wherever `placement`
+ * says), flips and stays on screen, follows the trigger on scroll and
+ * resize, and closes on Escape or a click outside, giving focus back to
+ * the trigger. Works on the canvas and in the manager. Anything that
+ * floats next to a control builds on this instead of its own Teleport.
+ *
+ *   <Popover v-model:open="open" label="Category colour">
+ *     <template #trigger="{ props }"><Button v-bind="props">Colour</Button></template>
+ *     …panel content…
+ *   </Popover>
+ *
+ * One panel shared by many triggers (the cells of a rule grid) passes the
+ * element it belongs to as `anchor` instead of a trigger slot; clicks on that
+ * element don't count as outside, so it can toggle the panel itself.
+ *
+ *   <Popover :open="!!cell" :anchor="cell?.el" label="Cell rule" @update:open="cell = null">…</Popover>
+ */
+import { computed, nextTick, onBeforeUnmount, ref, useId, watch } from "vue";
+import { placeFloating, viewportSize, type Placement, type Side } from "./floating";
+
+const props = withDefaults(defineProps<{
+  open: boolean;
+  placement?: Placement | undefined;
+  /** The panel's name for screen readers. */
+  label?: string | undefined;
+  /** Make the panel at least as wide as the trigger (lists under a field). */
+  matchWidth?: boolean | undefined;
+  /** Move focus into the panel when it opens. Off for panels you type past. */
+  autofocus?: boolean | undefined;
+  /** "dialog" for panels with controls, "menu"/"listbox" when the content is one. */
+  role?: "dialog" | "menu" | "listbox" | "group" | undefined;
+  /** Place the panel against this element instead of the trigger slot. */
+  anchor?: HTMLElement | null | undefined;
+}>(), { placement: "bottom-start", autofocus: true, role: "dialog", anchor: null });
+
+const emit = defineEmits<{ (e: "update:open", v: boolean): void }>();
+
+const id = `wp-popover-${useId()}`;
+const anchorEl = ref<HTMLElement | null>(null);
+const panelEl = ref<HTMLElement | null>(null);
+const pos = ref<{ x: number; y: number; side: Side; minWidth?: number | undefined }>({ x: -9999, y: -9999, side: "bottom" });
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), '
+  + 'textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+function trigger(): HTMLElement | null {
+  if (props.anchor) return props.anchor;
+  const el = anchorEl.value;
+  return (el?.firstElementChild as HTMLElement | null) ?? el;
+}
+
+function setOpen(v: boolean): void {
+  if (v !== props.open) emit("update:open", v);
+}
+
+const triggerProps = computed(() => ({
+  "aria-haspopup": (props.role === "group" ? "true" : props.role) as "true" | "dialog" | "menu" | "listbox",
+  "aria-expanded": props.open,
+  "aria-controls": props.open ? id : undefined,
+  onClick: () => setOpen(!props.open),
+}));
+
+function place(): void {
+  const t = trigger();
+  const p = panelEl.value;
+  if (!t || !p) return;
+  const r = t.getBoundingClientRect();
+  const at = placeFloating(r, { width: Math.max(p.offsetWidth, props.matchWidth ? r.width : 0), height: p.offsetHeight }, viewportSize(), {
+    placement: props.placement,
+  });
+  pos.value = { ...at, minWidth: props.matchWidth ? r.width : undefined };
+}
+
+function onPointerDown(ev: PointerEvent): void {
+  const path = ev.composedPath();
+  if (panelEl.value && path.includes(panelEl.value)) return;
+  if (anchorEl.value && path.includes(anchorEl.value)) return;
+  if (props.anchor && path.includes(props.anchor)) return;
+  setOpen(false);
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (ev.key !== "Escape") return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  setOpen(false);
+  trigger()?.focus();
+}
+
+function listen(on: boolean): void {
+  const m = on ? "addEventListener" : "removeEventListener";
+  window[m]("pointerdown", onPointerDown as EventListener, true);
+  window[m]("keydown", onKeydown as EventListener, true);
+  window[m]("resize", place);
+  window[m]("scroll", place, true);
+}
+
+watch(() => props.open, async (v) => {
+  if (typeof window === "undefined") return;
+  listen(v);
+  if (!v) return;
+  await nextTick();
+  place();
+  if (props.autofocus && panelEl.value && !panelEl.value.contains(document.activeElement)) {
+    (panelEl.value.querySelector<HTMLElement>(FOCUSABLE) ?? panelEl.value).focus();
+  }
+}, { immediate: true });
+
+// A shared panel moving to another trigger re-places without closing.
+watch(() => props.anchor, () => { if (props.open) void nextTick(place); });
+
+onBeforeUnmount(() => { if (typeof window !== "undefined") listen(false); });
+
+defineExpose({ place });
+</script>
+
+<template>
+  <span v-if="$slots.trigger" ref="anchorEl" class="wp-popover-anchor">
+    <slot name="trigger" :props="triggerProps" :open="open" />
+  </span>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      :id="id"
+      ref="panelEl"
+      class="wp-popover"
+      :data-side="pos.side"
+      :role="role"
+      :aria-label="label"
+      tabindex="-1"
+      :style="{ left: `${pos.x}px`, top: `${pos.y}px`, minWidth: pos.minWidth ? `${pos.minWidth}px` : undefined }"
+    >
+      <slot :close="() => setOpen(false)" />
+    </div>
+  </Teleport>
+</template>
+
+<style>
+@layer wp-extension {
+  .wp-popover-anchor { display: inline-flex; }
+  .wp-popover {
+    position: fixed;
+    z-index: 10000;
+    max-width: min(420px, calc(100vw - 16px));
+    max-height: calc(100vh - 16px);
+    overflow: auto;
+    padding: var(--wp-space-3);
+    background: var(--wp-bg-2);
+    color: var(--wp-text);
+    border: 1px solid var(--wp-border-strong);
+    border-radius: var(--wp-radius);
+    box-shadow: var(--wp-shadow-md);
+    font-family: var(--wp-font-sans);
+    font-size: var(--wp-text-sm);
+    outline: none;
+    animation: wp-popover-in 120ms ease-out;
+  }
+  @keyframes wp-popover-in {
+    from { opacity: 0; transform: translateY(-2px); }
+  }
+  .wp-popover[data-side="top"] { animation-name: wp-popover-in-up; }
+  @keyframes wp-popover-in-up {
+    from { opacity: 0; transform: translateY(2px); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .wp-popover { animation: none; }
+  }
+}
+</style>