@dumiflex/wp-kit 0.0.0-stage → 0.3.0

package/src/Lightbox.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+/**
+ * One image at a time, full screen, over a dimmed page: ← / → (or the side
+ * buttons) step through the list, Escape or the ✕ closes, and focus goes
+ * back to what opened it. Built on ModalShell, so keys pressed inside never
+ * reach ComfyUI's shortcuts. ImageGrid opens it for you; use it alone for
+ * a single image (a docs screenshot, a preview).
+ *
+ *   <Lightbox v-model:open="open" v-model:index="at" :images="shots" />
+ *   <Lightbox v-model:open="open" :images="frames" zoom />
+ *
+ * `zoom` shows each picture in WpImageZoom (Fit / 100% / 200%, wheel, drag,
+ * + − 0 1 2 keys); the level and the spot carry over as you step, so you
+ * can compare the same part of every frame.
+ */
+import { computed, nextTick, ref, watch } from "vue";
+import ModalShell from "./ModalShell.vue";
+import WpImageZoom from "./WpImageZoom.vue";
+import CloseButton from "./CloseButton.vue";
+import { focusablesIn } from "./useDialogFocus";
+
+export interface LightboxImage { src: string; alt: string; caption?: string | undefined }
+
+const props = withDefaults(defineProps<{
+  open: boolean;
+  images: LightboxImage[];
+  index?: number | undefined;
+  /** Go round from the last image to the first. */
+  loop?: boolean | undefined;
+  /** Real zoom levels (WpImageZoom) instead of a picture fitted to the screen. */
+  zoom?: boolean | undefined;
+}>(), { index: 0, loop: false, zoom: false });
+
+/** The zoom level, kept across images while the viewer is open. */
+const level = ref<number | null>(null);
+
+const emit = defineEmits<{
+  (e: "update:open", v: boolean): void;
+  (e: "update:index", v: number): void;
+}>();
+
+const panelEl = ref<HTMLElement | null>(null);
+let returnTo: HTMLElement | null = null;
+
+const count = computed(() => props.images.length);
+const at = computed(() => Math.min(Math.max(props.index, 0), Math.max(count.value - 1, 0)));
+const image = computed(() => props.images[at.value]);
+const canPrev = computed(() => count.value > 1 && (props.loop || at.value > 0));
+const canNext = computed(() => count.value > 1 && (props.loop || at.value < count.value - 1));
+
+function go(dir: 1 | -1): void {
+  if (dir < 0 ? !canPrev.value : !canNext.value) return;
+  emit("update:index", (at.value + dir + count.value) % count.value);
+}
+
+function close(): void {
+  emit("update:open", false);
+}
+
+function onKey(ev: KeyboardEvent): void {
+  if (ev.key === "ArrowLeft") { ev.preventDefault(); go(-1); }
+  else if (ev.key === "ArrowRight") { ev.preventDefault(); go(1); }
+  else if (ev.key === "Home" && count.value) { ev.preventDefault(); emit("update:index", 0); }
+  else if (ev.key === "End" && count.value) { ev.preventDefault(); emit("update:index", count.value - 1); }
+  else if (ev.key === "Tab") {
+    // Keep Tab inside: ModalShell stops the keys at its overlay, so this is the trap.
+    const els = focusablesIn(panelEl.value);
+    if (!els.length) return;
+    const first = els[0];
+    const last = els[els.length - 1];
+    if (ev.shiftKey && document.activeElement === first) { ev.preventDefault(); last.focus(); }
+    else if (!ev.shiftKey && document.activeElement === last) { ev.preventDefault(); first.focus(); }
+  }
+}
+
+watch(() => props.open, async (v, was) => {
+  if (typeof document === "undefined") return;
+  if (v) {
+    level.value = null;
+    returnTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    await nextTick();
+    panelEl.value?.focus();
+  } else if (was) {
+    const el = returnTo;
+    returnTo = null;
+    if (el?.isConnected) el.focus();
+  }
+}, { immediate: true });
+</script>
+
+<template>
+  <ModalShell :visible="open" @close="close" @keydown="onKey">
+    <!-- A click on the dark area closes, like the modal's own backdrop; Escape is the keyboard way. -->
+    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+    <div
+      ref="panelEl"
+      class="wp-lightbox"
+      tabindex="-1"
+      role="group"
+      aria-roledescription="image viewer"
+      :aria-label="image ? `${image.alt}, ${at + 1} of ${count}` : 'Image viewer'"
+      @click.self="close"
+    >
+      <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" />
+      </div>
+      <figure v-if="image" class="wp-lightbox__figure" :data-zoom="zoom || undefined">
+        <WpImageZoom v-if="zoom" v-model:zoom="level" class="wp-lightbox__zoom" :src="image.src" :alt="image.alt" size="md" minimap />
+        <img v-else class="wp-lightbox__img" :src="image.src" :alt="image.alt">
+        <figcaption v-if="image.caption" class="wp-lightbox__caption">{{ image.caption }}</figcaption>
+      </figure>
+      <button
+        v-if="count > 1"
+        type="button"
+        class="wp-lightbox__step"
+        data-dir="prev"
+        aria-label="Previous image"
+        :disabled="!canPrev"
+        @click="go(-1)"
+      ><i class="pi pi-chevron-left" aria-hidden="true" /></button>
+      <button
+        v-if="count > 1"
+        type="button"
+        class="wp-lightbox__step"
+        data-dir="next"
+        aria-label="Next image"
+        :disabled="!canNext"
+        @click="go(1)"
+      ><i class="pi pi-chevron-right" aria-hidden="true" /></button>
+    </div>
+  </ModalShell>
+</template>
+
+<style scoped>
+.wp-lightbox {
+  position: relative; display: flex; flex-direction: column; align-items: center;
+  width: min(1200px, 100%); max-height: calc(100vh - 40px); outline: none;
+  color: var(--wp-text); font-family: var(--wp-font-sans);
+}
+/* Its own near-black scrim in both themes: the shared modal one is light enough to read a dialog
+   over (and pale grey in light mode), too light to look at a picture on. A click on it closes. */
+.wp-lightbox::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgb(0 0 0 / 0.86); }
+.wp-lightbox__bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--wp-space-3); align-self: stretch; padding-bottom: var(--wp-space-2); }
+.wp-lightbox__count { color: rgb(255 255 255 / 0.75); font-size: var(--wp-text-sm); font-variant-numeric: tabular-nums; }
+.wp-lightbox .wp-lightbox__close { color: rgb(255 255 255 / 0.85); }
+.wp-lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: var(--wp-space-2); min-height: 0; margin: 0; }
+.wp-lightbox__figure[data-zoom] { align-self: stretch; }
+.wp-lightbox__zoom {
+  width: 100%; height: calc(100vh - 140px);
+  border-radius: var(--wp-radius); overflow: hidden; background: var(--wp-bg-1); box-shadow: var(--wp-shadow-lg);
+}
+.wp-lightbox__img {
+  display: block; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain;
+  border-radius: var(--wp-radius); box-shadow: var(--wp-shadow-lg); background: var(--wp-bg-1);
+}
+.wp-lightbox__caption { color: rgb(255 255 255 / 0.8); font-size: var(--wp-text-sm); text-align: center; }
+.wp-lightbox__step {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  display: grid; place-items: center; width: var(--wp-control-h-lg); height: var(--wp-control-h-lg);
+  border: 1px solid var(--wp-border-strong); border-radius: min(50%, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-2); color: var(--wp-text); cursor: pointer; box-shadow: var(--wp-shadow-md);
+  transition: background var(--wp-motion-hover);
+}
+.wp-lightbox__step[data-dir="prev"] { left: var(--wp-space-2); }
+.wp-lightbox__step[data-dir="next"] { right: var(--wp-space-2); }
+.wp-lightbox__step:hover:not(:disabled) { background: var(--wp-bg-3); }
+.wp-lightbox__step:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--wp-focus-ring); border-color: var(--wp-border-focus); }
+.wp-lightbox__step:disabled { opacity: 0.35; cursor: not-allowed; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-lightbox__step { transition: none; }
+}
+</style>

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 KindChip), 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><KindChip … /></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,161 @@
+<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; }
+.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 { animation: wp-lm-split-a var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
+.wp-lm__ring--b { animation: wp-lm-split-b var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
+.wp-lm__star--big { animation: wp-lm-dip var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
+.wp-lm__star--tw { animation: wp-lm-twinkle var(--wp-lm-t) ease-in-out infinite; }
+.wp-lm__swap {
+  transform-box: view-box; transform-origin: 512px 512px;
+  animation: wp-lm-swap calc(var(--wp-lm-t) * 2) cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+
+@keyframes wp-lm-split-a {
+  0%, 15%, 85%, 100% { transform: translate(0, 0); }
+  40%, 60% { transform: translate(-70px, -70px); }
+}
+@keyframes wp-lm-split-b {
+  0%, 15%, 85%, 100% { transform: translate(0, 0); }
+  40%, 60% { transform: translate(70px, 70px); }
+}
+@keyframes wp-lm-dip {
+  0%, 15% { transform: scale(1) rotate(0deg); }
+  32% { transform: scale(0.7) rotate(45deg); }
+  50%, 100% { transform: scale(1) rotate(90deg); }
+}
+@keyframes wp-lm-swap {
+  0%, 15% { transform: rotate(0deg); }
+  50%, 65% { transform: rotate(180deg); }
+  100% { transform: rotate(360deg); }
+}
+@keyframes wp-lm-twinkle {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.35; transform: scale(0.6); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wp-lm__svg * { animation: none !important; }
+  .wp-lm__svg { animation: wp-lm-fade 2.4s ease-in-out infinite; }
+  @keyframes wp-lm-fade { 50% { opacity: 0.55; } }
+}
+</style>