@dumiflex/wp-kit 0.0.0-stage → 0.4.0

package/src/ListFilter.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import SearchInput from "./SearchInput.vue";
+
+/**
+ * Text filter for a long list inside an editor card.
+ *
+ * Extracted from the fixed-values editor, which grew this pattern first
+ * (`fv-filter` in FixedEditor.vue). The wildcard options list has its own,
+ * richer variant with a tag menu attached; this is the plain-text case, which
+ * is what the constraint exceptions and derivation rules need.
+ *
+ * Since the component merge it is SearchInput with a list's rules on top:
+ * the "3 of 12" count inside the box, and the hide-until-long gate below.
+ *
+ * Deliberately dumb: it owns the query string and the count readout, and
+ * nothing else. Each caller keeps its own filtering, because what counts as a
+ * match differs per surface — an exception matches on resolved source/target
+ * labels, a rule matches on every variable name and value across its branches.
+ */
+const props = withDefaults(
+  defineProps<{
+    /** Unfiltered row count. Drives the "n of N" readout and the show/hide gate. */
+    total: number;
+    /** Row count after filtering. */
+    visible: number;
+    /** Plural noun for the placeholder and idle readout, e.g. "exceptions". */
+    noun: string;
+    /** `data-test` prefix; yields `<prefix>-search`, `-count`, `-clear` (the ✕). */
+    testPrefix: string;
+    /**
+     * Hide the control until the list is longer than this.
+     *
+     * Callers set it from how tall their rows are, not from a house style: a
+     * derivation rule is a whole card and three of them already scroll, while
+     * a fixed-value is one table row and eight fit comfortably.
+     *
+     * The default of 8 came from the fixed-values filter and was applied
+     * unchanged to the constraint and derivation editors, where it hid the
+     * feature outright — a real library measured 2026-08-06 had at most 3
+     * rules and 2 exceptions per module, so nobody ever saw it.
+     *
+     * Gated on `total`, never on `visible`, so the box cannot disappear
+     * underneath a query that filtered the list down past the threshold.
+     */
+    minRows?: number | undefined;
+  }>(),
+  { minRows: 8 },
+);
+
+const query = defineModel<string>({ required: true });
+</script>
+
+<template>
+  <SearchInput
+    v-if="total > props.minRows"
+    v-model="query"
+    class="wp-lfilter"
+    size="sm"
+    :placeholder="`Filter ${total} ${noun}…`"
+    :aria-label="`Filter ${noun}`"
+    :total="total"
+    :visible="visible"
+    :noun="noun"
+    clear-label="Clear filter"
+    :test-prefix="testPrefix"
+    :data-test="`${testPrefix}-search`"
+  />
+</template>
+
+<style scoped>
+.wp-lfilter {
+  /* Card's header puts a `.wp-spacer` (flex: 1) between the title and this
+     slot. With a grow factor of 1 the two split the free space evenly and the
+     search box ends up half the width it should be. A far larger factor takes
+     effectively all of the slack while leaving the spacer in place, which is
+     what still separates the title from the controls. */
+  flex: 1000 1 auto;
+  /* A floor, not a width. Below this the input is too small to read what you
+     typed, so the card header (which wraps) drops the filter onto its own row
+     instead of shaving it to nothing. The derivation card, with four buttons
+     beside it, is the case that forces this. */
+  min-width: 220px;
+  margin-right: var(--wp-space-4);
+}
+</style>

package/src/ListRow.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+/**
+ * One row of a list you click through: a facet ("portrait 12"), a child in a
+ * bundle's list, a category in a tree, a dependency that opens its page. The
+ * whole row is the target, full width, with an optional icon (or `#start`
+ * for anything else, e.g. a kind Chip), a label, a second `description` line,
+ * and a `count` or `#end` at the right; `arrow` adds a "goes somewhere"
+ * arrow that moves on hover.
+ *
+ *   <ListRow :selected="tag === t" toggle icon="tag" :count="12" @click="pick(t)">portrait</ListRow>
+ *   <ListRow :selected="current === c.key" :icon="kindIcon(c.type)" :description="summary(c)" :muted="!c.enabled">{{ c.name }}</ListRow>
+ *   <ListRow :as="RouterLink" :to="`/p/${dep.slug}`" arrow><template #start><Chip :color="kindColour(t)">{{ t }}</Chip></template>{{ dep.slug }}</ListRow>
+ *
+ * `selected` marks the row in the accent with a bar on its left. A row that
+ * turns a filter on and off says so with `aria-pressed` (pass `toggle`);
+ * otherwise a selected row is `aria-current`, the one being shown. `muted`
+ * dims a row that is still clickable (a child that is switched off);
+ * `disabled` stops it. `depth` indents a row for a simple tree.
+ *
+ * ArrowUp / ArrowDown / Home / End move between the rows of the same list:
+ * the nearest ancestor with `data-wp-rows` (put it on the outer element of a
+ * nested tree), else the row's parent. It reads only the shared tokens, so it
+ * works on a page and on the canvas.
+ */
+import { computed, useSlots, type Component } from "vue";
+import Icon from "./Icon.vue";
+
+const props = withDefaults(defineProps<{
+  /** What to render: a button (default), `"a"`, or a link component such as RouterLink. */
+  as?: string | Component | undefined;
+  selected?: boolean | undefined;
+  /** The row turns something on and off: `aria-pressed` instead of `aria-current`. */
+  toggle?: boolean | undefined;
+  /** PrimeIcons name (`tag` or `pi-tag`) before the label. */
+  icon?: string | undefined;
+  /** Colour of the icon: any CSS colour. */
+  iconColor?: string | undefined;
+  /** A second, smaller line under the label. */
+  description?: string | undefined;
+  count?: number | string | undefined;
+  /** An arrow at the right end, for a row that opens another page. */
+  arrow?: boolean | undefined;
+  /** Dim the row; it stays clickable. */
+  muted?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Indent level for a simple tree (0 = top). */
+  depth?: number | undefined;
+  size?: "sm" | "md" | undefined;
+}>(), { as: "button", size: "md", depth: 0 });
+
+const slots = useSlots();
+const isButton = computed(() => props.as === "button");
+
+const aria = computed(() => {
+  const a: Record<string, string | boolean | undefined> = {};
+  if (props.toggle) a["aria-pressed"] = !!props.selected;
+  else if (props.selected) a["aria-current"] = "true";
+  if (props.disabled && !isButton.value) a["aria-disabled"] = "true";
+  return a;
+});
+
+const style = computed(() => {
+  const s: Record<string, string> = {};
+  if (props.depth) s["--wp-list-row-depth"] = String(props.depth);
+  if (props.iconColor) s["--wp-list-row-icon"] = props.iconColor;
+  return Object.keys(s).length ? s : undefined;
+});
+
+function onKey(e: KeyboardEvent): void {
+  if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return;
+  const el = e.currentTarget as HTMLElement;
+  const list = el.closest("[data-wp-rows]") ?? el.parentElement;
+  if (!list) return;
+  const rows = Array.from(list.querySelectorAll<HTMLElement>(".wp-list-row"))
+    .filter((r) => !r.matches(":disabled, [aria-disabled='true']"));
+  const at = rows.indexOf(el);
+  if (at < 0) return;
+  const next = e.key === "Home" ? 0
+    : e.key === "End" ? rows.length - 1
+    : e.key === "ArrowDown" ? Math.min(rows.length - 1, at + 1)
+    : Math.max(0, at - 1);
+  e.preventDefault();
+  rows[next]?.focus();
+}
+
+function onClick(e: MouseEvent): void {
+  // A link can't be disabled natively; stop it here.
+  if (props.disabled && !isButton.value) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+}
+</script>
+
+<template>
+  <component
+    :is="as"
+    class="wp-list-row"
+    :class="[`wp-list-row--${size}`, { 'wp-list-row--muted': muted, 'wp-list-row--two-line': !!description || !!slots.description }]"
+    :type="isButton ? 'button' : undefined"
+    :disabled="isButton ? disabled : undefined"
+    :data-selected="selected || undefined"
+    :style="style"
+    v-bind="aria"
+    @keydown="onKey"
+    @click.capture="onClick"
+  >
+    <span v-if="slots.start" class="wp-list-row__start"><slot name="start" /></span>
+    <Icon v-else-if="icon" class="wp-list-row__icon" :name="icon" />
+    <span class="wp-list-row__main">
+      <span class="wp-list-row__label"><slot /></span>
+      <span v-if="description || slots.description" class="wp-list-row__desc">
+        <slot name="description">{{ description }}</slot>
+      </span>
+    </span>
+    <span v-if="count !== undefined" class="wp-list-row__count">{{ count }}</span>
+    <span v-if="slots.end" class="wp-list-row__end"><slot name="end" /></span>
+    <Icon v-if="arrow" class="wp-list-row__arrow" name="arrow-right" />
+  </component>
+</template>
+
+<style scoped>
+.wp-list-row {
+  --wp-list-row-icon: var(--wp-text-muted);
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-3);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--wp-control-h-md);
+  margin: 0;
+  padding: var(--wp-space-2) var(--wp-space-4);
+  padding-left: calc(var(--wp-space-4) + var(--wp-list-row-depth, 0) * var(--wp-space-6));
+  border: 0;
+  border-radius: min(6px, var(--wp-radius-cap, 999px));
+  background: transparent;
+  color: var(--wp-text);
+  font: inherit;
+  font-family: var(--wp-font-sans);
+  font-size: var(--wp-text-sm);
+  line-height: 1.35;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background var(--wp-motion-quick) ease, color var(--wp-motion-quick) ease;
+}
+.wp-list-row--sm {
+  min-height: var(--wp-control-h-sm);
+  padding-top: var(--wp-space-1);
+  padding-bottom: var(--wp-space-1);
+  gap: var(--wp-space-2);
+  color: var(--wp-text-muted);
+  font-size: var(--wp-text-xs);
+}
+.wp-list-row--two-line { align-items: flex-start; }
+.wp-list-row:hover:not(:disabled) { background: var(--wp-row-hover); color: var(--wp-text); }
+.wp-list-row:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-list-row:disabled, .wp-list-row[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+.wp-list-row--muted { opacity: 0.55; }
+.wp-list-row[data-selected] {
+  background: color-mix(in oklab, var(--wp-accent-500) 12%, transparent);
+  box-shadow: inset 2px 0 var(--wp-accent-500);
+  color: var(--wp-accent-text-strong);
+}
+.wp-list-row[data-selected]:focus-visible { box-shadow: inset 2px 0 var(--wp-accent-500), var(--wp-focus-ring); }
+.wp-list-row__icon {
+  flex: none;
+  width: 1.1em;
+  font-size: 0.9em;
+  text-align: center;
+  color: var(--wp-list-row-icon);
+}
+.wp-list-row--two-line .wp-list-row__icon { padding-top: 0.25em; }
+.wp-list-row[data-selected] .wp-list-row__icon { color: var(--wp-accent-text); }
+.wp-list-row__start { display: inline-flex; align-items: center; flex: none; }
+.wp-list-row__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+.wp-list-row__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-list-row__desc {
+  color: var(--wp-text-dim);
+  font-size: var(--wp-text-xs);
+  overflow-wrap: anywhere;
+}
+.wp-list-row__count {
+  flex: none;
+  color: var(--wp-text-dim);
+  font-family: var(--wp-font-mono);
+  font-size: var(--wp-text-xs);
+  font-variant-numeric: tabular-nums;
+}
+.wp-list-row[data-selected] .wp-list-row__count { color: inherit; }
+.wp-list-row__end { display: inline-flex; align-items: center; gap: var(--wp-space-2); flex: none; }
+.wp-list-row__arrow {
+  flex: none;
+  align-self: center;
+  font-size: 0.85em;
+  color: var(--wp-text-dim);
+  transition: transform var(--wp-motion-quick) ease, color var(--wp-motion-quick) ease;
+}
+.wp-list-row:hover .wp-list-row__arrow { color: var(--wp-accent-text); transform: translateX(2px); }
+@media (prefers-reduced-motion: reduce) {
+  .wp-list-row, .wp-list-row__arrow { transition: none; }
+  .wp-list-row:hover .wp-list-row__arrow { transform: none; }
+}
+</style>

package/src/LoadingMark.vue

@@ -0,0 +1,175 @@
+<script lang="ts">
+/** Gradient ids must be unique on the page. `useId` restarts per Vue app and
+ *  the extension mounts many small apps, so count across all of them. */
+let nextId = 0;
+</script>
+
+<script setup lang="ts">
+/**
+ * The loading mark. Two drawings, one per kind of place:
+ *
+ * - `logo` (pages and panels): the full logo. Its two rings slide apart and
+ *   back while the big star dips and turns and the small stars twinkle. A
+ *   `block` mark, or one 24 px or bigger, gets it by default.
+ * - `sparkle` (tight inline spots: a text row, a button, a list item): the
+ *   logo's three stars without the rings, the big one dipping while the small
+ *   ones swap places, like the AI working line. Small marks get it by
+ *   default, so an inline "Loading bundle…" is not a big colourful logo.
+ *
+ * Alone it is an icon (`size`, 14 inline and 40 as a block). With slot text it
+ * becomes a row ("[mark] Loading bundle…"); with `block` it is centred in its
+ * 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, useSlots } from "vue";
+import { BRAND_COLOURS, RING_A, RING_B, STAR_A, STAR_B, STAR_BIG, type LogoBrand } from "./logo-paths";
+
+const props = withDefaults(defineProps<{
+  /** Width and height in px. Default 14, or 40 with `block`. */
+  size?: number | undefined;
+  /** Accessible name when there is no slot text. */
+  label?: string | undefined;
+  /** Centre it (and its text, below) in the space it is given. */
+  block?: boolean | undefined;
+  /** Which drawing; default `logo` for a block or a 24 px+ mark, else `sparkle`. */
+  variant?: "logo" | "sparkle" | undefined;
+  /** Draw in the current text colour instead of the logo colours. */
+  mono?: boolean | undefined;
+  /** Hidden from screen readers, for a host that says it is busy itself
+   *  (a button with `aria-busy`). */
+  decorative?: boolean | undefined;
+  /** Whose colours: the extension's (default) or the community site's. */
+  brand?: LogoBrand | undefined;
+}>(), { size: undefined, label: "Loading", block: false, variant: undefined, mono: false, decorative: false, brand: "extension" });
+
+const slots = useSlots();
+const id = `wp-lm-${nextId++}`;
+const px = computed(() => props.size ?? (props.block ? 40 : 14));
+const drawing = computed(() => props.variant ?? (props.block || px.value >= 24 ? "logo" : "sparkle"));
+/** The logo's own colours (brand, not theme tokens: the mark looks the same
+ *  in light and dark). */
+const VIOLET = computed(() => BRAND_COLOURS[props.brand][0]);
+const INDIGO = computed(() => BRAND_COLOURS[props.brand][1]);
+const TEAL = computed(() => BRAND_COLOURS[props.brand][2]);
+const fill = (colour: string): string => (props.mono ? "currentColor" : colour);
+</script>
+
+<template>
+  <span
+    class="wp-lm"
+    :class="{ 'wp-lm--block': block }"
+    :role="decorative ? undefined : 'status'"
+    :aria-label="decorative || slots.default ? undefined : label"
+    :aria-hidden="decorative || undefined"
+    data-test="loading-mark"
+  >
+    <svg
+      class="wp-lm__svg"
+      :data-variant="drawing"
+      viewBox="0 0 1024 1024"
+      :width="px"
+      :height="px"
+      aria-hidden="true"
+    >
+      <template v-if="drawing === 'logo'">
+        <defs v-if="!mono">
+          <linearGradient :id="`${id}a`" x1="312.56" y1="897.19" x2="312.56" y2="2" gradientUnits="userSpaceOnUse">
+            <stop offset="0" :stop-color="VIOLET" />
+            <stop offset="1" :stop-color="INDIGO" />
+          </linearGradient>
+          <linearGradient :id="`${id}b`" x1="711.44" y1="126.81" x2="711.44" y2="1022" gradientUnits="userSpaceOnUse">
+            <stop offset="0" :stop-color="INDIGO" />
+            <stop offset="1" :stop-color="TEAL" />
+          </linearGradient>
+        </defs>
+        <path class="wp-lm__ring wp-lm__ring--a" :fill="fill(`url(#${id}a)`)" :d="RING_A" />
+        <path class="wp-lm__ring wp-lm__ring--b" :fill="fill(`url(#${id}b)`)" :d="RING_B" />
+        <path class="wp-lm__star wp-lm__star--big" :fill="fill(VIOLET)" :d="STAR_BIG" />
+        <path class="wp-lm__star wp-lm__star--tw" :fill="fill(INDIGO)" :d="STAR_A" />
+        <path class="wp-lm__star wp-lm__star--tw" :fill="fill(TEAL)" :d="STAR_B" />
+      </template>
+      <g v-else transform="translate(512 512) scale(1.45) translate(-512 -512)">
+        <path class="wp-lm__star wp-lm__star--big" :fill="fill(VIOLET)" :d="STAR_BIG" />
+        <g class="wp-lm__swap">
+          <path class="wp-lm__star" :fill="fill(INDIGO)" :d="STAR_A" />
+          <path class="wp-lm__star" :fill="fill(TEAL)" :d="STAR_B" />
+        </g>
+      </g>
+    </svg>
+    <span v-if="slots.default" class="wp-lm__text"><slot /></span>
+  </span>
+</template>
+
+<style scoped>
+.wp-lm {
+  --wp-lm-t: 2.4s;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  vertical-align: middle;
+}
+.wp-lm--block {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  padding: 48px 16px;
+  color: var(--wp-text-muted);
+  text-align: center;
+}
+.wp-lm__svg { flex-shrink: 0; overflow: visible; }
+/* Every move animates a registered custom property, never `transform` or
+ * `opacity` itself. A browser hands a `transform` / `opacity` animation to
+ * the compositor, which lifts the path onto its own layer the moment the
+ * animation starts: the layer is rasterised once, at a fixed scale, and
+ * snapped to whole pixels, so the crisp mark turned soft and jumped by up to
+ * half a pixel as it began to move. A custom property animates on the main
+ * thread, so each frame repaints the vector paths in place, as sharp as the
+ * mark at rest. The paths are tiny; the repaint costs nothing. */
+.wp-lm__ring { transform-box: view-box; transform-origin: 512px 512px; }
+.wp-lm__star { transform-box: fill-box; transform-origin: center; }
+.wp-lm__ring--a { transform: translate(var(--wp-lm-x), var(--wp-lm-x)); animation: wp-lm-split-a var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
+.wp-lm__ring--b { transform: translate(var(--wp-lm-x), var(--wp-lm-x)); animation: wp-lm-split-b var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
+.wp-lm__star--big { transform: rotate(var(--wp-lm-r)) scale(var(--wp-lm-s)); animation: wp-lm-dip var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
+.wp-lm__star--tw { opacity: var(--wp-lm-o); transform: scale(var(--wp-lm-s)); animation: wp-lm-twinkle var(--wp-lm-t) ease-in-out infinite; }
+.wp-lm__swap {
+  transform-box: view-box; transform-origin: 512px 512px;
+  transform: rotate(var(--wp-lm-r));
+  animation: wp-lm-swap calc(var(--wp-lm-t) * 2) cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+
+@property --wp-lm-x { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@property --wp-lm-r { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
+@property --wp-lm-s { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --wp-lm-o { syntax: "<number>"; inherits: false; initial-value: 1; }
+
+@keyframes wp-lm-split-a {
+  0%, 15%, 85%, 100% { --wp-lm-x: 0px; }
+  40%, 60% { --wp-lm-x: -70px; }
+}
+@keyframes wp-lm-split-b {
+  0%, 15%, 85%, 100% { --wp-lm-x: 0px; }
+  40%, 60% { --wp-lm-x: 70px; }
+}
+@keyframes wp-lm-dip {
+  0%, 15% { --wp-lm-s: 1; --wp-lm-r: 0deg; }
+  32% { --wp-lm-s: 0.7; --wp-lm-r: 45deg; }
+  50%, 100% { --wp-lm-s: 1; --wp-lm-r: 90deg; }
+}
+@keyframes wp-lm-swap {
+  0%, 15% { --wp-lm-r: 0deg; }
+  50%, 65% { --wp-lm-r: 180deg; }
+  100% { --wp-lm-r: 360deg; }
+}
+@keyframes wp-lm-twinkle {
+  0%, 100% { --wp-lm-o: 1; --wp-lm-s: 1; }
+  50% { --wp-lm-o: 0.35; --wp-lm-s: 0.6; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wp-lm__svg * { animation: none !important; }
+  .wp-lm__svg { opacity: var(--wp-lm-o); animation: wp-lm-fade 2.4s ease-in-out infinite; }
+  @keyframes wp-lm-fade { 0%, 100% { --wp-lm-o: 1; } 50% { --wp-lm-o: 0.55; } }
+}
+</style>

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,78 @@
+<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">
+    <!-- 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>
+      </div>
+    </div>
+  </Teleport>
+</template>