@dumiflex/wp-kit 0.5.0 → 0.7.0

package/src/IconPicker.vue

@@ -1,21 +1,27 @@
 <script setup lang="ts">
 /**
- * IconPicker — pick one PrimeIcons glyph, or none.
+ * IconPicker: pick one PrimeIcons glyph, or none.
  *
- * The `icon` column has existed on categories end-to-end (engine column,
- * `wp_api/categories.py` `_UPDATABLE_FIELDS`, `CategoryRow.icon`) with no UI
- * to set it, so every category rendered with the same generic bookmark.
+ *   <IconPicker v-model="cat.icon" />                      curated groups in a popover
+ *   <IconPicker v-model="note.icon" all :color="tint" />   any glyph, with a search box
+ *   <IconPicker :model-value="null" all inline :allow-none="false" @update:model-value="insert" />
  *
- * The offered glyphs live in `./icon-catalog`, which is verified against the
- * installed `primeicons.css` by a test — an unknown name renders as an empty
- * cell rather than failing, so nothing else would catch a typo.
+ * The closed picker shows the glyph and its name (`compact`: the glyph
+ * alone, for a table cell). The list opens in the kit Popover, so it follows
+ * the trigger on scroll, flips to stay on screen and closes on Escape or a
+ * click outside with focus back on the trigger. `inline` draws the list
+ * itself, with no trigger (a panel in an editor). Without `all` the list is
+ * the curated groups in `icon-catalog.ts`; with `all` it is every glyph
+ * (`pi-icons.ts`, both checked against the installed `primeicons.css` by a
+ * test), searchable by name. `color` tints the glyphs; `allow-none` (on by
+ * default) offers "No icon", which sets null.
  *
- * The glyph name is stored WITHOUT the `pi pi-` prefix (e.g. `"user"`), which
- * is what the engine column already holds and what `Icon.vue` expects.
+ * The name is stored WITHOUT the `pi pi-` prefix (`"user"`), which is what
+ * Icon.vue expects.
  */
 import { computed, ref } from "vue";
+import IconPickerPanel from "./IconPickerPanel.vue";
 import Popover from "./Popover.vue";
-import { ICON_GROUPS } from "./icon-catalog";
 
 const props = withDefaults(
   defineProps<{
@@ -25,8 +31,16 @@ const props = withDefaults(
     dataTest?: string | undefined;
     /** Icon only, no name beside it, for a tight table cell. */
     compact?: boolean | undefined;
+    /** Every PrimeIcons glyph, with a search box, instead of the curated groups. */
+    all?: boolean | undefined;
+    /** The list itself, no trigger or popover. */
+    inline?: boolean | undefined;
+    /** Tint the glyphs. */
+    color?: string | undefined;
+    /** Offer "No icon" (null). */
+    allowNone?: boolean | undefined;
   }>(),
-  { ariaLabel: "Pick an icon", dataTest: undefined, compact: false },
+  { ariaLabel: "Pick an icon", dataTest: undefined, compact: false, all: false, inline: false, color: undefined, allowNone: true },
 );
 
 const emit = defineEmits<{ "update:modelValue": [v: string | null] }>();
@@ -49,10 +63,10 @@ function pick(name: string | null): void {
 </script>
 
 <template>
-  <!-- On the kit Popover: it follows the trigger on scroll, flips to stay on
-       screen, and closes on Escape or a click outside with focus back on
-       the trigger. -->
-  <Popover v-model:open="open" :label="ariaLabel" role="listbox">
+  <div v-if="inline" class="wp-iconpick wp-iconpick--inline" :data-test="dataTest">
+    <IconPickerPanel :current="current" :all="all" :color="color" :allow-none="allowNone" @pick="pick" />
+  </div>
+  <Popover v-else v-model:open="open" :label="ariaLabel" role="listbox">
     <template #trigger="{ props: triggerProps }">
       <button
         v-bind="triggerProps"
@@ -66,7 +80,7 @@ function pick(name: string | null): void {
              different intrinsic widths and baselines, so without it the trigger
              resized and the mark shifted the moment an icon was picked. -->
         <span class="wp-iconpick__slot" aria-hidden="true">
-          <i v-if="current" :class="`pi pi-${current}`" />
+          <i v-if="current" :class="`pi pi-${current}`" :style="color ? { color } : undefined" />
           <span v-else class="wp-iconpick__none">—</span>
         </span>
         <span
@@ -78,32 +92,7 @@ function pick(name: string | null): void {
         <i class="pi pi-chevron-down wp-iconpick__caret" aria-hidden="true" />
       </button>
     </template>
-    <div class="wp-iconpick__panel" :data-test="dataTest ? `${dataTest}-panel` : undefined">
-      <button
-        type="button"
-        class="wp-iconpick__clear"
-        data-test="icon-picker-none"
-        @click="pick(null)"
-      >No icon</button>
-      <div v-for="group in ICON_GROUPS" :key="group.label" class="wp-iconpick__group">
-        <div class="wp-iconpick__group-label">{{ group.label }}</div>
-        <div class="wp-iconpick__grid">
-          <button
-            v-for="name in group.icons"
-            :key="name"
-            type="button"
-            class="wp-iconpick__cell"
-            :class="{ 'wp-iconpick__cell--on': name === current }"
-            role="option"
-            :aria-selected="name === current"
-            :title="name"
-            :aria-label="name"
-            :data-test="`icon-picker-${name}`"
-            @click="pick(name)"
-          ><i :class="`pi pi-${name}`" aria-hidden="true" /></button>
-        </div>
-      </div>
-    </div>
+    <IconPickerPanel :current="current" :all="all" :color="color" :allow-none="allowNone" :data-test="dataTest" @pick="pick" />
   </Popover>
 </template>
 
@@ -144,66 +133,6 @@ function pick(name: string | null): void {
   line-height: 1;
 }
 .wp-iconpick__none { color: var(--wp-text-dim); line-height: 1; }
-.wp-iconpick__caret { font-size: 9px; color: var(--wp-text-dim); line-height: 1; }
+.wp-iconpick__caret { font-size: 10px; color: var(--wp-text-dim); line-height: 1; }
 </style>
 
-<style>
-/* Unscoped: the panel is teleported to <body> by Popover, so a scoped selector's
-   `[data-v-…]` attribute would never match it. Class names are
-   component-specific (`wp-iconpick*`), so global is safe. */
-/* Lives inside the kit Popover's panel, which gives the frame and shadow. */
-.wp-iconpick__panel {
-  width: 212px;
-  max-height: 276px;
-  overflow-y: auto;
-}
-.wp-iconpick__clear {
-  width: 100%;
-  margin-bottom: var(--wp-space-3);
-  padding: var(--wp-space-2);
-  background: transparent;
-  border: 1px dashed var(--wp-border);
-  border-radius: var(--wp-radius-sm);
-  color: var(--wp-text-muted);
-  font-size: var(--wp-text-xs);
-  cursor: pointer;
-}
-.wp-iconpick__clear:hover { color: var(--wp-text); border-color: var(--wp-accent); }
-.wp-iconpick__group + .wp-iconpick__group { margin-top: var(--wp-space-3); }
-.wp-iconpick__group-label {
-  font-size: 9.5px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--wp-text-dim);
-  margin-bottom: var(--wp-space-2);
-}
-.wp-iconpick__grid {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 2px;
-}
-.wp-iconpick__cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 1;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--wp-radius-sm);
-  color: var(--wp-text-muted);
-  cursor: pointer;
-  font-size: 13px;
-}
-/* Kill the icon font's own line box — it otherwise pushes the glyph off the
- * cell's vertical centre even though the cell is a centred flex container. */
-.wp-iconpick__cell i { line-height: 1; }
-.wp-iconpick__cell:hover {
-  background: color-mix(in oklab, var(--wp-accent) 18%, transparent);
-  color: var(--wp-text);
-}
-.wp-iconpick__cell--on {
-  border-color: var(--wp-accent);
-  color: var(--wp-accent);
-}
-</style>

package/src/IconPickerPanel.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+/**
+ * The grid inside IconPicker (in its Popover, or on its own with `inline`).
+ * Internal: use IconPicker. Without `all` it offers the curated groups in
+ * `icon-catalog.ts`; with `all`, every PrimeIcons glyph (`pi-icons.ts`) and a
+ * search box. Emits the picked name without `pi-`, or null for No icon.
+ */
+import { computed, ref } from "vue";
+import SearchInput from "./SearchInput.vue";
+import { vTooltip } from "./tooltip";
+import { ICON_GROUPS } from "./icon-catalog";
+import { PI_ICONS } from "./pi-icons";
+
+const props = withDefaults(defineProps<{
+  current: string | null;
+  all?: boolean | undefined;
+  /** Tint the glyphs (a note's colour). */
+  color?: string | undefined;
+  allowNone?: boolean | undefined;
+  dataTest?: string | undefined;
+}>(), { all: false, color: undefined, allowNone: true, dataTest: undefined });
+
+const emit = defineEmits<{ pick: [name: string | null] }>();
+
+const query = ref("");
+const words = (name: string): string => name.replace(/-/g, " ");
+/** "arrow right" and "pi-arrow-right" both find arrow-right. */
+const found = computed(() => {
+  const q = query.value.trim().toLowerCase().replace(/^pi-/, "").replace(/\s+/g, "-");
+  return q ? PI_ICONS.filter((n) => n.includes(q)) : PI_ICONS;
+});
+const groups = computed(() => (props.all ? [{ label: "", icons: found.value }] : ICON_GROUPS));
+const tint = computed(() => (props.color ? { color: props.color } : undefined));
+</script>
+
+<template>
+  <div class="wp-iconpick__panel" :data-all="all || undefined" :data-test="dataTest ? `${dataTest}-panel` : undefined">
+    <SearchInput
+      v-if="all"
+      v-model="query"
+      size="sm"
+      placeholder="Search icons…"
+      aria-label="Search icons"
+      test-prefix="icon-picker"
+      class="wp-iconpick__search"
+    />
+    <button
+      v-if="allowNone"
+      type="button"
+      class="wp-iconpick__clear"
+      :aria-pressed="!current"
+      data-test="icon-picker-none"
+      @click="emit('pick', null)"
+    >No icon</button>
+    <div v-for="group in groups" :key="group.label" class="wp-iconpick__group">
+      <div v-if="group.label" class="wp-iconpick__group-label">{{ group.label }}</div>
+      <div class="wp-iconpick__grid" role="listbox" :aria-label="group.label || 'Icons'">
+        <button
+          v-for="name in group.icons"
+          :key="name"
+          v-tooltip="words(name)"
+          type="button"
+          class="wp-iconpick__cell"
+          :class="{ 'wp-iconpick__cell--on': name === current }"
+          role="option"
+          :aria-selected="name === current"
+          :aria-label="words(name)"
+          :data-test="`icon-picker-${name}`"
+          @click="emit('pick', name)"
+        ><i :class="`pi pi-${name}`" :style="tint" aria-hidden="true" /></button>
+        <p v-if="!group.icons.length" class="wp-iconpick__empty">No icon matches "{{ query }}".</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wp-iconpick__panel {
+  width: 212px;
+  max-height: 276px;
+  overflow-y: auto;
+}
+.wp-iconpick__panel[data-all] { width: 264px; }
+/* Stays at the top while the glyphs scroll under it. */
+.wp-iconpick__search { position: sticky; top: 0; z-index: 1; margin-bottom: var(--wp-space-3); box-shadow: 0 0 0 var(--wp-space-2) var(--wp-bg-2); background: var(--wp-bg-2); }
+.wp-iconpick__clear {
+  width: 100%;
+  margin-bottom: var(--wp-space-3);
+  padding: var(--wp-space-2);
+  background: transparent;
+  border: 1px dashed var(--wp-border);
+  border-radius: var(--wp-radius-sm);
+  color: var(--wp-text-muted);
+  font: inherit;
+  font-size: var(--wp-text-xs);
+  cursor: pointer;
+}
+.wp-iconpick__clear:hover { color: var(--wp-text); border-color: var(--wp-accent); }
+.wp-iconpick__clear[aria-pressed="true"] { border-style: solid; border-color: var(--wp-accent); color: var(--wp-text); }
+.wp-iconpick__clear:focus-visible, .wp-iconpick__cell:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-iconpick__group + .wp-iconpick__group { margin-top: var(--wp-space-3); }
+.wp-iconpick__group-label {
+  margin-bottom: var(--wp-space-2);
+  font-size: var(--wp-text-xs);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--wp-text-dim);
+}
+.wp-iconpick__grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 2px;
+}
+.wp-iconpick__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--wp-radius-sm);
+  color: var(--wp-text-muted);
+  cursor: pointer;
+}
+/* An even size, on whole pixels; the font's own line box would push it off centre. */
+.wp-iconpick__cell .pi { font-size: 14px; line-height: 1; }
+.wp-iconpick__cell:hover { background: color-mix(in oklab, var(--wp-accent) 18%, transparent); color: var(--wp-text); }
+.wp-iconpick__cell--on { border-color: var(--wp-accent); color: var(--wp-accent); }
+.wp-iconpick__empty { grid-column: 1 / -1; margin: var(--wp-space-2) 0; color: var(--wp-text-dim); font-size: var(--wp-text-sm); }
+</style>

package/src/ImageGrid.vue

@@ -15,7 +15,7 @@
 import { computed, ref } from "vue";
 import Lightbox from "./Lightbox.vue";
 import Skeleton from "./Skeleton.vue";
-import WpCheck from "./WpCheck.vue";
+import Checkbox from "./Checkbox.vue";
 
 export interface GridImage { id: string; src: string; alt: string; thumb?: string; caption?: string }
 
@@ -82,7 +82,7 @@ function toggle(id: string, on: boolean): void {
         <img v-if="img.thumb || img.src" class="wp-image-grid__img" :src="img.thumb || img.src" alt="" loading="lazy">
         <Skeleton v-else class="wp-image-grid__empty" shape="block" width="100%" height="100%" />
       </button>
-      <WpCheck
+      <Checkbox
         v-if="selectable"
         class="wp-image-grid__check"
         :model-value="props.selected.includes(img.id)"

package/src/Lightbox.vue

@@ -16,7 +16,7 @@
 import { computed, nextTick, ref, watch } from "vue";
 import ModalShell from "./ModalShell.vue";
 import WpImageZoom from "./WpImageZoom.vue";
-import CloseButton from "./CloseButton.vue";
+import Button from "./Button.vue";
 import Skeleton from "./Skeleton.vue";
 import { focusablesIn } from "./useDialogFocus";
 
@@ -104,7 +104,7 @@ watch(() => props.open, async (v, was) => {
     >
       <div class="wp-lightbox__bar">
         <span v-if="count > 1" class="wp-lightbox__count" aria-hidden="true">{{ at + 1 }} / {{ count }}</span>
-        <CloseButton class="wp-lightbox__close" kbd="Esc" @click="close" />
+        <Button variant="ghost" icon="times" aria-label="Close" class="wp-lightbox__close" kbd="Esc" @click="close" />
       </div>
       <figure v-if="image" class="wp-lightbox__figure" :data-zoom="zoom || undefined">
         <!-- An image with no src yet (still rendering): its shape, not an empty frame. -->

package/src/LoadingMark.vue

@@ -21,9 +21,10 @@ let nextId = 0;
  * box, for a panel or page that is loading. `mono` draws it in the text
  * colour, for a host with its own colours (a busy button).
  */
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, useSlots } from "vue";
+import { computed, ref, useSlots } from "vue";
 import { BRAND_COLOURS, RING_A, RING_B, STAR_A, STAR_B, STAR_BIG, type LogoBrand } from "./logo-paths";
-import { BOX, PAD, animate, drawNow, type Animated, type Look } from "./loading-mark-motion";
+import { canvasBox, useCanvasMotion } from "./canvas-motion";
+import { drawPose, poseAt, type Look } from "./loading-mark-motion";
 
 const props = withDefaults(defineProps<{
   /** Width and height in px. Default 14, or 40 with `block`. */
@@ -56,16 +57,10 @@ const fill = (colour: string): string => (props.mono ? "currentColor" : colour);
 
 /* The SVG is the still mark (first paint, reduced motion, a page with no
  * canvas). Once mounted, a canvas over it draws the motion: see
- * `loading-mark-motion.ts` for why it is not CSS. */
+ * `canvas-motion.ts` for why it is not CSS. */
 const root = ref<HTMLElement | null>(null);
 const canvas = ref<HTMLCanvasElement | null>(null);
-const live = ref(false);
-const drawn = ref(false);
-const canvasStyle = computed(() => {
-  const side = (px.value * BOX) / 1024;
-  const off = (px.value * PAD) / 1024;
-  return { width: `${side}px`, height: `${side}px`, top: `${-off}px`, left: `${-off}px` };
-});
+const canvasStyle = computed(() => canvasBox(px.value));
 
 let textColour = "";
 let textColourAt = -Infinity;
@@ -81,57 +76,7 @@ function look(): Look {
   return { variant: drawing.value, colours: [VIOLET.value, INDIGO.value, TEAL.value], flat: false };
 }
 
-let stop: (() => void) | null = null;
-let observer: IntersectionObserver | null = null;
-let motion: MediaQueryList | null = null;
-
-async function start(): Promise<void> {
-  if (stop) return;
-  live.value = true;
-  await nextTick();
-  const el = canvas.value;
-  if (!el || !live.value) return;
-  const mark: Animated = { canvas: el, look, clock: 0, visible: true };
-  if (!drawNow(mark)) {
-    live.value = false;
-    return;
-  }
-  drawn.value = true;
-  stop = animate(mark);
-  if (typeof IntersectionObserver === "function") {
-    observer = new IntersectionObserver((entries) => {
-      for (const e of entries) mark.visible = e.isIntersecting;
-    });
-    observer.observe(el);
-  }
-}
-function halt(): void {
-  stop?.();
-  stop = null;
-  observer?.disconnect();
-  observer = null;
-  live.value = false;
-  drawn.value = false;
-}
-function onMotionChange(): void {
-  if (motion?.matches) halt();
-  else void start();
-}
-
-onMounted(() => {
-  // No matchMedia means no way to honour reduced motion, and a test DOM
-  // (jsdom) has no canvas and logs an error for every attempt: keep the
-  // still SVG in both.
-  if (typeof window.matchMedia !== "function" || typeof requestAnimationFrame !== "function") return;
-  if (navigator.userAgent.includes("jsdom")) return;
-  motion = window.matchMedia("(prefers-reduced-motion: reduce)");
-  motion.addEventListener?.("change", onMotionChange);
-  if (!motion.matches) void start();
-});
-onBeforeUnmount(() => {
-  motion?.removeEventListener?.("change", onMotionChange);
-  halt();
-});
+const { live, drawn } = useCanvasMotion(canvas, (ctx, width, ms) => drawPose(ctx, width, look(), poseAt(ms)));
 </script>
 
 <template>

package/src/Modal.vue

@@ -1,36 +1,58 @@
 <script setup lang="ts">
-import CloseButton from "./CloseButton.vue";
-import { computed, ref, useId, useSlots } from "vue";
+/**
+ * Modal: the one dialog, in the manager, on the canvas and on the community
+ * site. A titled panel (header with ×, body, optional footer) on ModalShell,
+ * so it gets the shared overlay, open/close motion and the key shield that
+ * keeps typing away from ComfyUI's shortcuts; useDialogFocus adds the focus
+ * trap and focus return.
+ *
+ *   <Modal v-model:open="open" title="Rename module">…<template #footer>…</template></Modal>
+ *
+ * Escape, the × and the backdrop close it (`close-on-backdrop="false"` keeps
+ * a backdrop click from closing a form that would lose work). A custom
+ * `#header` puts `:id="titleId"` on its own heading. `keydown` gives every key
+ * pressed inside (the shield stops them before `window`), so a dialog's own
+ * keys go there, not on a window listener. ConfirmModal is built on it.
+ *
+ * The panel styles are scoped and read only shared tokens, so it wears the
+ * colours of whichever side it is on.
+ */
+import { ref, useId, useSlots } from "vue";
+import Button from "./Button.vue";
+import ModalShell from "./ModalShell.vue";
 import { useDialogFocus } from "./useDialogFocus";
 
-interface Props {
+const props = withDefaults(defineProps<{
   open: boolean;
   title?: string | undefined;
   size?: "sm" | "md" | "lg" | undefined;
   closeOnBackdrop?: boolean | undefined;
-}
-const props = withDefaults(defineProps<Props>(), { size: "md", closeOnBackdrop: true });
+}>(), { size: "md", closeOnBackdrop: true, title: undefined });
 
 const emit = defineEmits<{
   (e: "update:open", v: boolean): void;
+  /** Every keydown inside the dialog. */
+  (e: "keydown", ev: KeyboardEvent): 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() {
+function close(): void {
   emit("update:open", false);
 }
 
-function onBackdrop() {
-  if (props.closeOnBackdrop) close();
+function onShellClose(reason: "escape" | "backdrop"): void {
+  if (reason === "backdrop" && !props.closeOnBackdrop) return;
+  close();
 }
 
-useDialogFocus(dialog, () => props.open, {
-  onEscape: close,
+const focus = useDialogFocus(dialog, () => props.open, {
+  // ModalShell closes on Escape; the shield stops keys before window, so the
+  // trap runs from the shell's keydown (below), not a window listener.
+  onEscape: () => undefined,
+  window: false,
   // The first control in the body, else the dialog itself (the close button
   // would make Enter close it).
   initial: (root, els) => {
@@ -38,41 +60,84 @@ useDialogFocus(dialog, () => props.open, {
     return els.find((el) => body?.contains(el)) ?? root;
   },
 });
+
+function onKeydown(ev: KeyboardEvent): void {
+  focus.onKeydown(ev);
+  emit("keydown", ev);
+}
 </script>
 
 <template>
-  <Teleport to="body">
-    <!-- The backdrop is a click target only; keyboard users close with Escape. -->
-    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
-    <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>
+  <ModalShell
+    :visible="open"
+    :labelledby="title || slots.header ? titleId : undefined"
+    @close="onShellClose"
+    @keydown="onKeydown"
+  >
+    <div ref="dialog" class="wp-modal" :class="`wp-modal--${size}`" tabindex="-1" data-test="modal">
+      <header v-if="title || slots.header" class="wp-modal__head">
+        <h3 v-if="title" :id="titleId" class="wp-modal__title">{{ title }}</h3>
+        <slot name="header" :title-id="titleId" />
+        <span class="wp-modal__spacer" />
+        <Button variant="ghost" icon="times" aria-label="Close" kbd="Esc" data-test="modal-close" @click="close" />
+      </header>
+      <div class="wp-modal__body">
+        <slot />
       </div>
+      <footer v-if="slots.footer" class="wp-modal__foot">
+        <slot name="footer" />
+      </footer>
     </div>
-  </Teleport>
+  </ModalShell>
 </template>
+
+<style scoped>
+.wp-modal {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 560px;
+  max-height: calc(100vh - 48px);
+  overflow: hidden;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-lg);
+  box-shadow: var(--wp-shadow-xl);
+  color: var(--wp-text);
+  font-family: var(--wp-font-sans);
+  font-size: var(--wp-text-base);
+}
+/* The dialog takes focus only when nothing in it can. */
+.wp-modal:focus { outline: none; }
+.wp-modal--sm { max-width: 380px; }
+.wp-modal--md { max-width: 560px; }
+.wp-modal--lg { max-width: 880px; }
+.wp-modal__head {
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-4);
+  padding: var(--wp-space-4) var(--wp-space-5);
+  border-bottom: 1px solid var(--wp-border);
+  background: var(--wp-bg);
+}
+.wp-modal__title { flex: 1; margin: 0; font-size: var(--wp-text-md); font-weight: 600; color: var(--wp-text); }
+.wp-modal__spacer { flex: 1; }
+.wp-modal__title + .wp-modal__spacer { display: none; }
+.wp-modal__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--wp-space-5);
+}
+.wp-modal__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);
+  background: var(--wp-bg);
+}
+@media (max-width: 640px) {
+  .wp-modal__head, .wp-modal__body, .wp-modal__foot { padding-left: var(--wp-space-5); padding-right: var(--wp-space-5); }
+}
+</style>