@dumiflex/wp-kit 0.3.0 → 0.4.0

package/src/LoadingMark.vue

@@ -1,161 +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; }
-.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>
+<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

@@ -1,60 +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>
+<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

@@ -1,76 +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">
-    <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>
+<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>